/* ==========================================================================
   Nordiva Lock In

   Samme merkevare som videoportalen (assets/nordiva.css der): Montserrat som
   eneste skrift, marineblå #0E1B4D, nøytral papirflate, ingen gradienter,
   ingen emoji. Timeren er den ene mørke flaten, fordi den er det man skal
   se på.
   ========================================================================== */

:root {
  --brand:#0E1B4D; --brand-myk:#EEF1F8;
  --ink:#17203C; --ink-soft:#4C5570; --muted:#7A8199;
  --paper:#F6F6F8; --card:#FFFFFF; --line:#E5E5EA; --line-mork:#D3D3DA; --hover:#F2F3F7;
  --green:#1B6B3A; --green-bg:#EDF5EF; --red:#A81F1F; --red-bg:#FBEFEF; --amber:#8A6410; --amber-bg:#FFF6DB;
  --panel:#0E1B4D; --panel-2:#1B2A62; --panel-line:rgba(255,255,255,.16); --on-panel:#FFFFFF; --on-panel-soft:#AEB7D6;
  --ring:#FFFFFF; --ring-pause:#A9D8BD;
  --btn:#0E1B4D; --btn-ink:#FFFFFF;
  --shadow:0 1px 3px rgba(14,27,77,.04), 0 14px 38px rgba(14,27,77,.07);
  --radius-card:20px; --radius-el:14px;
  --luft-1:10px; --luft-2:18px; --luft-3:28px; --luft-4:44px; --luft-5:80px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --brand-myk:#1A2447;
    --ink:#E8EBF5; --ink-soft:#B3BAD1; --muted:#8A92AD;
    --paper:#0B1022; --card:#121A33; --line:#232C4A; --line-mork:#303A5E; --hover:#18213F;
    --green:#6CCB93; --green-bg:#133021; --red:#FF8A80; --red-bg:#3A1A1A; --amber:#E8B75A; --amber-bg:#33290F;
    --panel:#15205A; --panel-2:#1F2C6E;
    --btn:#E8EBF5; --btn-ink:#0E1B4D;
    --shadow:0 1px 3px rgba(0,0,0,.3), 0 14px 38px rgba(0,0,0,.35);
  }
}

[hidden] { display:none !important; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink);
  font:500 15px/1.6 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
button, input, select { font:inherit; color:inherit; }
button { cursor:pointer; background:none; border:0; padding:0; }
:focus-visible { outline:3px solid var(--brand); outline-offset:3px; border-radius:6px; }
.timer :focus-visible, .fokusmodus :focus-visible { outline-color:#FFFFFF; }

.ordmerke { margin:0; font-weight:800; font-size:14px; letter-spacing:.3em; color:var(--brand); }
.ordmerke span { font-weight:600; letter-spacing:.16em; color:var(--muted); margin-left:6px; }
@media (prefers-color-scheme: dark) { .ordmerke { color:var(--ink); } }
.etikett { font-weight:700; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--on-panel-soft); }
.lenkeknapp { color:var(--ink-soft); font-weight:600; font-size:13px; text-decoration:underline; text-underline-offset:3px; min-height:44px; }

/* --- innlogging ------------------------------------------------------- */
.login { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:var(--luft-2); }
.login-kort { width:min(420px, 100%); background:var(--card); border:1px solid var(--line); border-radius:var(--radius-card);
  padding:var(--luft-4) var(--luft-3); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:var(--luft-3); }
.login form { display:flex; flex-direction:column; gap:var(--luft-2); }
.login h1 { margin:0; font-size:26px; font-weight:800; line-height:1.25; letter-spacing:-.015em; }
.login .hjelp { margin:-8px 0 0; color:var(--ink-soft); }
.felt { display:flex; flex-direction:column; gap:var(--luft-1); font-weight:600; font-size:14px; }
.felt input { min-height:52px; border:1px solid var(--line-mork); border-radius:var(--radius-el); padding:0 16px; background:var(--card); font-size:16px; }
.felt input:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-myk); }
#kode { letter-spacing:.3em; font-weight:700; font-size:22px; }
.feilmelding { margin:-8px 0 0; color:var(--red); font-size:14px; font-weight:600; }
.knapp { min-height:52px; border-radius:var(--radius-el); font-weight:700; }
.knapp-hoved { background:var(--btn); color:var(--btn-ink); }
.knapp-hoved:hover { transform:translateY(-1px); }
.knapp-hoved:disabled { opacity:.6; transform:none; cursor:progress; }

/* --- rammen ----------------------------------------------------------- */
.app { max-width:1480px; margin:0 auto; padding:var(--luft-2) clamp(12px, 3vw, 32px) var(--luft-5);
  display:grid; grid-template-columns:minmax(300px, 370px) minmax(0, 1fr); column-gap:var(--luft-3); row-gap:var(--luft-2); align-items:start; }
.topp { grid-column:1 / -1; display:flex; align-items:center; column-gap:var(--luft-3); row-gap:var(--luft-1); flex-wrap:wrap; min-height:44px; }
.live { margin:0 auto 0 0; font-size:13px; color:var(--ink-soft); display:flex; align-items:center; gap:8px; }
.live::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--line-mork); flex:none; }
.live.pa::before { background:var(--green); }
.live b { color:var(--ink); font-weight:700; }
.meg { display:flex; align-items:center; gap:var(--luft-2); font-weight:700; font-size:14px; }

/* --- timeren ---------------------------------------------------------- */
.timer { position:sticky; top:var(--luft-2); background:var(--panel); color:var(--on-panel); border-radius:var(--radius-card);
  padding:var(--luft-3) 22px 22px; display:flex; flex-direction:column; gap:var(--luft-2); box-shadow:var(--shadow); }
.timer-topp { display:flex; justify-content:space-between; align-items:center; }
.modus { display:flex; background:var(--panel-2); border-radius:999px; padding:3px; }
.modus button { min-height:34px; padding:0 14px; border-radius:999px; font-size:12px; font-weight:700; color:var(--on-panel-soft); }
.modus button[aria-pressed="true"] { background:var(--on-panel); color:var(--panel); }
.ring { position:relative; width:min(100%, 270px); aspect-ratio:1; margin:0 auto; }
.ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.ring-spor { fill:none; stroke:var(--panel-line); stroke-width:8; }
.ring-fyll { fill:none; stroke:var(--ring); stroke-width:8; stroke-linecap:round; }
.timer.pause .ring-fyll { stroke:var(--ring-pause); }
.ring-midt { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.sifre { font-weight:800; font-size:clamp(50px, 6.4vw, 64px); line-height:1.1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.ring-tekst { font-size:13px; color:var(--on-panel-soft); text-align:center; max-width:70%; line-height:1.4; }
.lengder { display:flex; gap:8px; justify-content:center; }
.lengder button { min-width:56px; min-height:40px; border-radius:12px; border:1px solid var(--panel-line); font-weight:700; font-size:13px;
  color:var(--on-panel-soft); font-variant-numeric:tabular-nums; }
.lengder button[aria-pressed="true"] { border-color:var(--on-panel); color:var(--on-panel); }
.lengder button:disabled { opacity:.35; cursor:not-allowed; }
.jobber { display:flex; flex-direction:column; gap:var(--luft-1); }
.jobber select { width:100%; min-height:48px; background:var(--panel-2); color:var(--on-panel); border:1px solid var(--panel-line);
  border-radius:12px; padding:0 12px; font-weight:600; font-size:14px; }
.kontroller { display:grid; grid-template-columns:1fr auto auto; gap:8px; }
.knapp-go { min-height:52px; border-radius:var(--radius-el); background:var(--on-panel); color:var(--panel); font-weight:800; font-size:15px; letter-spacing:.03em; padding:0 18px; }
.knapp-go:hover { transform:translateY(-1px); }
.knapp-panel { min-height:52px; border-radius:var(--radius-el); border:1px solid var(--panel-line); padding:0 14px; color:var(--on-panel); font-weight:600; font-size:13px; }
.knapp-panel:hover { background:var(--panel-2); }
.knapp-panel:disabled { opacity:.35; cursor:not-allowed; background:none; }
.budskap { border-top:1px solid var(--panel-line); padding-top:var(--luft-2); }
.budskap p { margin:8px 0 0; font-weight:700; font-size:18px; line-height:1.45; text-wrap:balance; min-height:3em; }
.idag { margin:0; border-top:1px solid var(--panel-line); padding-top:14px; font-size:13px; color:var(--on-panel-soft); line-height:1.6; }
.idag b { color:var(--on-panel); font-weight:800; font-size:15px; font-variant-numeric:tabular-nums; }

/* --- listene ---------------------------------------------------------- */
.lister { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:var(--luft-2); align-items:start; min-width:0; }
.liste { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-card); padding:var(--luft-2) 0 8px; min-width:0; }
.liste-topp { display:flex; align-items:center; gap:12px; padding:0 var(--luft-2) 6px; }
.liste-topp h2 { margin:0; font-size:20px; font-weight:800; letter-spacing:-.01em; }
.liste-topp .tall { margin-left:auto; font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.av { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:13px; flex:none; }
.seksjon { padding:var(--luft-1) 0 0; }
.seksjon h3 { margin:0; padding:8px var(--luft-2); font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:8px; }
.seksjon h3 .n { font-variant-numeric:tabular-nums; letter-spacing:0; }
.seksjon.idag-seksjon h3 { color:var(--brand); }
@media (prefers-color-scheme: dark) { .seksjon.idag-seksjon h3 { color:var(--ink); } }
.hint { margin:0 var(--luft-2) 8px; padding:8px 12px; background:var(--amber-bg); color:var(--amber); border-radius:10px; font-size:13px; font-weight:600; line-height:1.5; }
.tom { margin:0; padding:6px var(--luft-2) 10px; color:var(--muted); font-size:14px; }

.rad { display:grid; grid-template-columns:44px minmax(0, 1fr) auto; align-items:center; column-gap:4px; padding:4px 10px 4px 6px; border-top:1px solid var(--line); }
.rad:hover { background:var(--hover); }
.rad.aktiv { background:var(--brand-myk); }
.sjekk { width:44px; height:44px; display:flex; align-items:center; justify-content:center; }
.sjekk i { width:22px; height:22px; border-radius:50%; border:2px solid var(--line-mork); display:flex; align-items:center; justify-content:center; }
.sjekk:hover i { border-color:var(--green); }
.rad.ferdig .sjekk i { background:var(--green); border-color:var(--green); }
.sjekk svg { width:12px; height:12px; }
.innhold { min-width:0; padding:6px 0; }
.tittel { display:block; width:100%; text-align:left; overflow-wrap:anywhere; line-height:1.45; font-weight:600; cursor:text; }
.rad.ferdig .tittel { color:var(--muted); text-decoration:line-through; font-weight:500; }
.innhold input { width:100%; min-height:40px; border:1px solid var(--brand); border-radius:10px; padding:0 10px; background:var(--card); font-weight:600; }
.meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.meta:empty { display:none; }
.merke { font-size:12px; font-weight:600; color:var(--ink-soft); background:var(--hover); border-radius:999px; padding:1px 9px; font-variant-numeric:tabular-nums; }
.merke.forfalt { color:var(--red); background:var(--red-bg); }
.merke.snart { color:var(--amber); background:var(--amber-bg); }
.merke.fokus { color:var(--green); background:var(--green-bg); }
.handlinger { display:flex; align-items:center; gap:2px; }
.ikon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--muted); }
.ikon:hover { background:var(--line); color:var(--ink); }
.ikon[aria-pressed="true"] { color:var(--amber); }
.ikon svg { width:18px; height:18px; }
.lasinn { min-height:36px; padding:0 12px; border-radius:10px; background:var(--btn); color:var(--btn-ink); font-weight:700; font-size:12px; letter-spacing:.02em; }
.lasinn:hover { transform:translateY(-1px); }
.rad.ferdig .lasinn, .rad.ferdig .ikon.sol { display:none; }
/* Med mus vises «Lås inn» bare på raden du peker på, ellers tar knappen
   plassen fra titlene. På mobil står den alltid, der finnes ingen peker. */
@media (hover:hover) {
  .rad .lasinn { opacity:0; }
  .rad:hover .lasinn, .rad:focus-within .lasinn, .rad.aktiv .lasinn { opacity:1; }
}

.ny { display:flex; padding:10px var(--luft-2) 8px; }
.ny input { flex:1; min-width:0; min-height:46px; border:1px dashed var(--line-mork); border-radius:12px; padding:0 14px; background:transparent; }
.ny input:focus { outline:none; border-style:solid; border-color:var(--brand); background:var(--card); }
.ferdigknapp { display:flex; align-items:center; gap:8px; width:100%; min-height:44px; padding:0 var(--luft-2); font-size:12px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); border-top:1px solid var(--line); }
.ferdigknapp:hover { color:var(--ink); }

/* --- sprettvindu, toast ----------------------------------------------- */
.pop { position:fixed; z-index:40; width:240px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-el); box-shadow:var(--shadow); padding:6px; }
.pop h4 { margin:6px 10px 4px; font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.valg { display:flex; width:100%; min-height:40px; align-items:center; gap:10px; padding:0 10px; border-radius:10px; text-align:left; font-weight:600; font-size:14px; }
.valg:hover { background:var(--hover); }
.valg.fare { color:var(--red); }
.valg small { margin-left:auto; color:var(--muted); font-weight:500; font-size:12px; }
.pop input[type="date"] { width:calc(100% - 20px); margin:4px 10px 8px; min-height:40px; border:1px solid var(--line-mork); border-radius:10px; padding:0 10px; background:var(--card); }
.pop hr { border:0; border-top:1px solid var(--line); margin:4px 0; }

.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:60; display:flex; align-items:center; gap:var(--luft-2);
  background:var(--ink); color:var(--paper); padding:10px 12px 10px 18px; border-radius:var(--radius-el); font-size:14px; font-weight:600;
  max-width:calc(100vw - 32px); box-shadow:var(--shadow); min-height:48px; }
.toast button { color:var(--paper); font-weight:800; text-decoration:underline; text-underline-offset:3px; min-height:36px; padding:0 8px; }

/* --- fokusmodus ------------------------------------------------------- */
.fokusmodus { position:fixed; inset:0; z-index:50; background:#0A1438; color:#FFFFFF; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:var(--luft-3); padding:var(--luft-4) var(--luft-2); text-align:center; }
.fm-oppgave { margin:0; font-weight:600; font-size:clamp(16px, 2.2vw, 22px); color:#AEB7D6; max-width:32ch; text-wrap:balance; line-height:1.4; }
.fm-sifre { font-weight:800; font-size:clamp(92px, 21vw, 230px); line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.fm-linje { width:min(520px, 80vw); height:4px; background:rgba(255,255,255,.14); border-radius:2px; overflow:hidden; }
.fm-linje i { display:block; height:100%; background:#FFFFFF; }
.fm-budskap { margin:0; font-weight:700; font-size:clamp(18px, 2.4vw, 26px); line-height:1.45; max-width:30ch; text-wrap:balance; min-height:3em; }
.fm-kontroller { display:flex; gap:10px; }
.fokusmodus .knapp-go { background:#FFFFFF; color:#0A1438; }
.fokusmodus .knapp-panel { color:#FFFFFF; border-color:rgba(255,255,255,.2); }

@media (max-width:1100px) {
  .app { grid-template-columns:minmax(0, 1fr); }
  .timer { position:static; }
}
@media (max-width:560px) {
  .lister { grid-template-columns:minmax(0, 1fr); }
  .kontroller { grid-template-columns:1fr 1fr; }
  .kontroller .knapp-go { grid-column:1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; }
  .knapp-go:hover, .knapp-hoved:hover, .lasinn:hover { transform:none; }
}