/* Skjerm 4 «Kuttforslag». Fargetokener (--bg, --flate, ...) er definert i app.css. */

.kf-rot {
  --kf-pause: #6aa9ff;
  --kf-dodluft: #9b8cff;
  --kf-fyllord: #ff8a5c;
  --kf-gjentak: #ff5a9e;
  --kf-tagning: #5ad1c4;
  display: flex;
  flex-direction: column;
  min-height: 0; /* høyden kommer fra .skjerm.arbeid i app.css */
  max-width: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--tekst);
  position: relative;
}
.kf-rot [hidden] { display: none !important; }

.kf-t-pause { --kf-farge: var(--kf-pause); }
.kf-t-dodluft { --kf-farge: var(--kf-dodluft); }
.kf-t-fyllord { --kf-farge: var(--kf-fyllord); }
.kf-t-gjentak { --kf-farge: var(--kf-gjentak); }
.kf-t-tagning { --kf-farge: var(--kf-tagning); }

.kf-video {
  flex: 0 1 28dvh;
  min-height: 90px;
  background: #000;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.kf-video video { height: 100%; max-width: 100%; object-fit: contain; }
.kf-panel { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; }

.kf-sum { flex: 0 0 auto; padding: 8px 12px 0; font-size: 14px; font-weight: 600; }
.kf-pos { flex: 0 0 auto; padding: 0 12px; font-size: 13px; color: var(--aksent); font-variant-numeric: tabular-nums; }

.kf-tidslinje {
  flex: 0 0 auto;
  position: relative;
  height: 44px;
  margin: 8px 12px 4px;
  border-radius: 8px;
  background: var(--flate);
  overflow: hidden;
}
.kf-blokk {
  position: absolute;
  top: 4px;
  bottom: 4px;
  min-width: 6px;
  padding: 0;
  border: 2px solid var(--kf-farge);
  border-radius: 4px;
  background: var(--kf-farge);
  touch-action: manipulation;
}
.kf-blokk.av { background: transparent; border-style: dashed; opacity: 0.7; }
.kf-blokk.valgt { outline: 2px solid var(--tekst); outline-offset: 1px; z-index: 1; }
.kf-markor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--aksent);
  pointer-events: none;
  z-index: 2;
}

.kf-legend { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 2px 12px 6px; font-size: 12px; color: var(--dempet); }
.kf-legend-punkt { display: inline-flex; align-items: center; gap: 5px; }
.kf-prikk { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--kf-farge); }

.kf-knapper { flex: 0 0 auto; display: flex; gap: 6px; padding: 0 12px 8px; }
.kf-knapp {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius);
  background: var(--flate2);
  color: var(--tekst);
  font-size: 14px;
  touch-action: manipulation;
}
.kf-knapp:active:not(:disabled) { filter: brightness(1.3); }
.kf-knapp:disabled { opacity: 0.35; }
.kf-knapp.kf-primaer { background: var(--aksent); color: #111; font-weight: 700; }
.kf-knapp.kf-fare { color: var(--fare); }

.kf-scroll {
  flex: 1 1 auto;
  min-height: 80px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0 12px 8px;
}

.kf-usikre {
  margin-bottom: 8px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--usikker);
  background: rgba(255, 176, 32, 0.12);
  color: var(--usikker);
  font-size: 14px;
}
.kf-usikre-ord { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kf-usikkert-ord {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding: 4px 10px;
  border: 2px solid var(--usikker);
  border-radius: 10px;
  background: rgba(255, 176, 32, 0.16);
  color: var(--tekst);
  font-size: 16px; line-height: 1.15;
  touch-action: manipulation;
}
.kf-tekst { overflow-wrap: anywhere; }
.kf-tid { font-size: 10px; color: var(--dempet); }

.kf-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.kf-rad {
  display: flex; align-items: center; gap: 10px;
  min-height: 60px; padding: 8px 8px 8px 12px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: var(--flate);
}
.kf-rad.valgt { border-color: var(--aksent); }
.kf-rad.av .kf-rad-tekst { opacity: 0.5; }
.kf-rad-tekst { flex: 1; min-width: 0; }
.kf-rad-topp { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kf-rad-aarsak { font-size: 13px; color: var(--dempet); overflow-wrap: anywhere; }
.kf-spill {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: var(--flate2); color: var(--tekst);
  font-size: 16px;
  touch-action: manipulation;
}

.kf-bryter {
  flex: 0 0 auto;
  position: relative;
  width: 60px; height: 44px;
  padding: 0;
  border: 0; border-radius: 22px;
  background: var(--flate2);
  touch-action: manipulation;
  transition: background .15s;
}
.kf-bryter.paa { background: var(--ok); }
.kf-bryter-knott {
  position: absolute; top: 5px; left: 5px;
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff;
  transition: transform .15s;
}
.kf-bryter.paa .kf-bryter-knott { transform: translateX(16px); }

.kf-bunn {
  flex: 0 0 auto;
  padding: 8px 12px calc(8px + var(--sikker-bunn));
  background: var(--flate);
}
.kf-stor {
  display: block; width: 100%; min-height: 52px;
  border: 0; border-radius: var(--radius);
  background: var(--flate2); color: var(--tekst);
  font-size: 17px; font-weight: 600;
  touch-action: manipulation;
}
.kf-bunn { display: flex; gap: 8px; }
.kf-bunn .kf-stor { flex: 1 1 0; }
.kf-stor.kf-primaer { background: var(--aksent); color: #111; font-weight: 700; }

/* Liggende telefon: video til venstre, panelet til høyre (etter grunnreglene den overstyrer) */
@media (orientation: landscape) and (max-height: 540px) {
  .kf-rot { flex-direction: row; }
  .kf-video { flex: 0 0 auto; max-width: 40%; padding-bottom: var(--sikker-bunn); }
  .kf-video video { width: auto; }
  .kf-tidslinje { height: 36px; margin-top: 4px; }
  .kf-stor { min-height: 44px; }
  /* lite høyde: hele panelet ruller, bunnknappene ligger fast nederst */
  .kf-panel { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .kf-scroll { flex: none; min-height: auto; overflow: visible; }
  .kf-bunn { position: sticky; bottom: 0; z-index: 3; }
}