/* Fonter og fargepalett delt med paragraf36.no (se README/breadcrumbs der). */
@font-face {
  font-family: 'Archivo Black';
  src: url('/fonts/archivo-black-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/fonts/hanken-grotesk-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/fonts/hanken-grotesk-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/fonts/hanken-grotesk-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  color-scheme: dark;
  --y:    #FFE45C;
  --k:    #0A0A0A;
  --k2:   #141414;
  --dim:  rgba(255, 228, 92, 0.55);
  --hair: rgba(255, 228, 92, 0.18);
  --bg: var(--k);
  --panel: var(--k2);
  --border: var(--hair);
  --text: var(--y);
  --muted: var(--dim);
  --accent: var(--y);
  --danger: #FF6B6B;
  --plyr-color-main: var(--y);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Hanken Grotesk', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

h1 { font-family: 'Archivo Black', sans-serif; font-size: 1.4rem; letter-spacing: -0.01em; }
h2 { font-family: 'Hanken Grotesk', sans-serif; font-weight: 700; font-size: 1.1rem; margin-top: 0; }

label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

a { color: var(--y); }
a:hover, a:focus-visible { color: var(--dim); }

input[type="text"], input[type="password"], input[type="number"], textarea, select {
  width: 100%;
  padding: 0.5rem;
  background: var(--k2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 1rem;
  margin-bottom: 0.75rem;
  font-family: inherit;
}

input:focus, textarea:focus, select:focus { outline: none; border-color: var(--y); }

input[type="file"] {
  width: 100%;
  padding: 0.4rem;
  background: var(--k2);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 0.75rem;
}

input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  background: var(--accent);
  color: var(--k);
  border: none;
  border-radius: 4px;
  padding: 0.4rem 0.8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  margin-right: 0.75rem;
}

button {
  background: var(--accent);
  color: var(--k);
  border: none;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

button:disabled { opacity: 0.5; cursor: default; }
button.secondary { background: var(--k2); color: var(--text); border: 1px solid var(--hair); }

.error { color: var(--danger); font-size: 0.9rem; min-height: 1.2em; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); font-size: 0.9rem; }

.video-wrap { position: relative; background: black; }

/* Store runde play-knappen skal kun vises for foerste avspilling, ikke ved hver pause
   underveis (reviewer.js legger til has-played nar avspilling starter foerste gang). */
.plyr.has-played .plyr__control--overlaid { display: none !important; }

/* Egen tidslinjestripe for kommentarer (reviewer.js::renderCommentMarkers) - IKKE inni
   Plyr sin egen fremdriftslinje. Plyr eier og kan skrive over sin egen DOM naar som helst,
   sa markorer injisert der er upalitelige (bl.a. Plyr sin egen hover-boble for tid vinner). */
.comment-timeline { position: relative; height: 14px; margin: 0.35rem 0; background: var(--hair); border-radius: 2px; }
.comment-marker {
  position: absolute;
  top: 0; bottom: 0;
  width: 10px; /* usynlig, bredere treffflate enn selve streken - lettere a treffe/hovre */
  transform: translateX(-50%);
  pointer-events: auto;
  cursor: pointer;
}
.comment-marker::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 3px;
  background: var(--y);
  transform: translateX(-50%);
  border-radius: 1px;
}
.comment-marker-tooltip {
  position: absolute;
  bottom: 100%;
  margin-bottom: 6px;
  left: 0;
  transform: translateX(-50%);
  background: var(--k2);
  color: var(--text);
  border: 1px solid var(--hair);
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
  max-width: 220px;
  white-space: normal;
  pointer-events: none;
  z-index: 10;
}

/* touch-action/user-select er trygt a sette her uansett - laget tar bare imot
   beroring nar .drawing er aktiv (pointer-events:auto), ellers går alt rett
   gjennom til Plyr sine egne kontroller under. Ekstra CSS-niva sperre utover
   e.preventDefault() i pointerdown-handleren (reviewer.js): et veldig raskt
   dobbeltklikk-med-dragning fra Apple Pencil kan noen ganger utlose iOS sin
   native markerings-gest for JS rekker a reagere. */
#annotation-layer {
  position: absolute; inset: 0; pointer-events: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
#annotation-layer.drawing { pointer-events: auto; }
.draw-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
#annotation-layer.drawing .draw-canvas { cursor: crosshair; }

.draw-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.draw-tool { width: auto; background: var(--muted); }
.draw-tool[aria-pressed="true"] { background: var(--accent); }
#draw-toggle.active { background: var(--accent); color: var(--k); }
#draw-picker { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }

.tc-readout {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.1rem;
  padding: 0.4rem 0;
}

.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-thread { margin-bottom: 0.75rem; }
.comment-thread.archived { opacity: 0.6; }
.comment {
  border-left: 4px solid var(--border);
  padding: 0.5rem 0.75rem;
  background: var(--panel);
}
.comment-reply {
  margin: 0.4rem 0 0 1.5rem;
  background: transparent;
  border-left-width: 2px;
}
.comment-replies { }
.comment-head { display: flex; align-items: baseline; gap: 0.25rem; }
.comment-author { font-weight: 600; }
.comment-tc { color: var(--muted); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.85rem; }
.comment-body { margin-top: 0.2rem; white-space: pre-wrap; }
.comment-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.35rem; }
.comment-action {
  background: none; border: none; padding: 0; margin: 0; width: auto;
  color: var(--muted); font-size: 0.8rem; cursor: pointer; text-decoration: underline;
}
.comment-action:hover { color: var(--accent); }
.comment-badge {
  font-size: 0.75rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.06em; border: 1px solid var(--border); border-radius: 2px; padding: 0 0.3rem;
}
.reply-form { margin: 0.4rem 0 0 1.5rem; }
.reply-form textarea { width: 100%; }
.reply-form button { width: auto; margin-top: 0.25rem; }

.export-links a { margin-right: 0.75rem; }

/* Deltakerfarger (seksjon 12) - faste klasser i stedet for inline style, jf. CSP style-src 'self' */
.color-0  { border-left-color: #e63946; }
.color-1  { border-left-color: #f4a261; }
.color-2  { border-left-color: #e9c46a; }
.color-3  { border-left-color: #2a9d8f; }
.color-4  { border-left-color: #264653; }
.color-5  { border-left-color: #457b9d; }
.color-6  { border-left-color: #a8dadc; }
.color-7  { border-left-color: #1d3557; }
.color-8  { border-left-color: #e76f51; }
.color-9  { border-left-color: #06d6a0; }
.color-10 { border-left-color: #118ab2; }
.color-11 { border-left-color: #073b4c; }
.color-12 { border-left-color: #ef476f; }
.color-13 { border-left-color: #ffd166; }
.color-14 { border-left-color: #8338ec; }
.color-15 { border-left-color: #3a86ff; }