/* MyTask — skjermreglene som hører til disse to skjermene.
   Tatt rett ut av tegningen (MYTASK.zip, MyTask.dc.html). Alt annet — farger,
   knapper, felter, tabell — kommer fra ds.css, som er designsystemet.
   Endres tegningen, endres denne fila fra tegningen, ikke for hånd. */

/* «hidden» skal alltid vinne over en klasse som sier display. Uten denne linja
   vises både den tomme tilstanden og tabellen samtidig. */
[hidden] { display: none !important; }

body{margin:0;background:var(--color-bg)}
a{color:var(--color-accent)}a:hover{color:var(--color-accent-600)}
.skall{width:100%;min-height:100vh;background:var(--color-bg);box-sizing:border-box}
.mrk{font-family:var(--font-heading);font-weight:700;font-size:19px;letter-spacing:-.01em;color:var(--color-text)}
.sub{font:400 12px ui-monospace,Menlo,monospace;color:var(--color-neutral-700);margin-top:2px}
button.mp2{background:none;border:0;border-left:3px solid transparent;width:100%;text-align:left;cursor:pointer;font:500 13.5px var(--font-body)}
button.mp2.on{border-left-color:var(--color-accent)}
.hdr{padding:22px 26px 16px;border-bottom:1px solid var(--color-divider);display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.hdr h2{margin:0;font-family:var(--font-heading);font-weight:600;font-size:26px;letter-spacing:-.01em;color:var(--color-text)}
.hdr .u{font:400 12.5px var(--font-body);color:var(--color-text-muted);margin-left:auto}
.innhold{padding:22px 26px 64px;display:flex;flex-direction:column;gap:18px}
.lb{font:600 10px var(--font-body);letter-spacing:.11em;text-transform:uppercase;color:var(--color-neutral-700)}
.kort{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-md);padding:18px 20px}
.rutenett{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));gap:16px}
.tall{font-family:var(--font-heading);font-weight:600;font-size:34px;line-height:1.05;letter-spacing:-.015em;color:var(--color-text);margin-top:6px}
.tall .e{font:400 14px var(--font-body);color:var(--color-text-muted);margin-left:4px}
.rad{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:9px 0;border-top:1px solid var(--color-divider)}
.rad:first-of-type{border-top:0}
.rad .n{font:500 13px var(--font-body);color:var(--color-text)}
.rad .v{font:400 12.5px var(--font-body);color:var(--color-neutral-800);white-space:nowrap;font-variant-numeric:tabular-nums}
.spor{grid-column:1/-1;height:7px;border-radius:4px;background:var(--color-neutral-200);overflow:hidden;margin-top:3px}
.spor i{display:block;height:100%;border-radius:4px;background:var(--color-accent)}
.drh{container-type:inline-size}
.nyrad{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.nyrad .f-dato{width:150px;flex:0 0 auto}
.nyrad .f-tid{width:108px;flex:0 0 auto}
.nyrad .bred{flex:1 1 210px;min-width:170px}
.nyrad .f-knapp{display:flex;gap:8px;flex:0 0 auto}
.chiprad{display:flex;gap:7px;flex-wrap:wrap}
.chip{font:500 12px var(--font-body);color:var(--color-neutral-800);padding:7px 12px;min-height:34px;display:inline-flex;align-items:center;background:var(--color-surface);border:1px solid var(--color-divider);border-radius:20px;cursor:pointer}
.chip:hover{border-color:var(--color-text)}
.chip.on{background:var(--color-text);border-color:var(--color-text);color:var(--color-bg);font-weight:600}
.klokkeboks{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:var(--radius-md);border:1px solid var(--color-divider);background:var(--color-surface)}
.klokkeboks.gaar{border-color:var(--color-accent);background:var(--color-accent-100)}
.ur{font:600 20px ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;color:var(--color-text)}
.hnd{background:none;border:0;padding:0 0 0 12px;cursor:pointer;font:500 12.5px var(--font-body);color:var(--color-accent-700)}
.hnd.f{color:var(--color-accent-2-700)}
.tall-td{font-variant-numeric:tabular-nums;white-space:nowrap}
.sumrad td{border-bottom:0;padding-top:12px;font-weight:600;color:var(--color-text)}
@container (max-width:640px){
  .dr{grid-template-columns:1fr}
  .mny{border-right:0;border-bottom:1px solid var(--color-divider)}
  .mnyl{flex-direction:row;padding:0}
  button.mp2{border-left:0;border-bottom:3px solid transparent;flex:1;justify-content:center;padding:0 10px}
  button.mp2.on{border-left-color:transparent;border-bottom-color:var(--color-accent)}
  .hdr{padding:16px 16px 12px}
  .innhold{padding:16px 16px 44px}
  .nyrad{grid-template-columns:1fr 1fr}
  .nyrad .bred{grid-column:1/-1}
}

/* Svarboksen på «Bytt passord». Grønn når det gikk, varselfarge når det ikke gikk —
   begge hentet fra ds.css, ingen nye farger. */
.svar { display: block; padding: 12px 14px; margin-top: 14px; border-radius: var(--radius-md);
        font: 500 13px var(--font-body); }
.svar.feil { border: 1px solid var(--color-accent-2-300); background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.svar.ok   { border: 1px solid var(--color-accent-300);   background: var(--color-accent-100);   color: var(--color-accent-800); }