/* ==========================================================================
   DRG Assist v3 — eitt skjelett, fire drakter.

   A  RO        Jobs / Ive — reduksjon. Flata trekkjer seg tilbake for innhaldet.
   B  MA (間)   Kenya Hara / Muji — tomrom som substans. Papir, sumi, éin sinober.
   C  RUTENETT  Müller-Brockmann / Rams — modulært rutenett, funksjonell farge.
   D  NORDISK   Norsk offentleg klarheit — stor skrift, rolege flater, låg terskel.

   Draktveljaren er eit DESIGNVERKTØY — i produksjon vel du éi drakt ved
   bygging. Utan data-theme gjeld drakt A (m.a. invitasjonssida).
   ========================================================================== */

:root{
  --sys:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --serif:'Iowan Old Style',Georgia,'Times New Roman',serif;
  --t:170ms cubic-bezier(.2,.6,.2,1);
}

/* ---------------- A · RO (default) ---------------- */
:root, :root[data-theme="a"]{
  --font:var(--sys); --num:var(--sys); --code:var(--mono);
  --bg:#fbfbfc; --panel:#ffffff; --panel-edge:transparent; --panel-shadow:0 1px 2px rgba(16,20,26,.05);
  --ink:#12161b; --ink-2:#333b45; --mut:#454e59;   /* AAA: 8,4:1 kvit */
  --line:#e7e9ec; --line-2:#d6dae0;
  --accent:#0a4ba1; --accent-ink:#083a7d; --accent-soft:#eef3fb;
  --band-off-bg:#ffffff; --band-off-edge:#e0e3e8; --band-on-bg:#12161b; --band-on-ink:#ffffff; --band-on-mut:#b9c2cc;
  --hd:#0a4ba1; --at:#0b5b5b; --pr:#523697;
  --error:#a03530; --login-panel:#ffffff;
  --r:11px; --r-sm:7px; --pad:18px; --gap:20px;
  --label-size:11.5px; --label-track:.055em; --label-weight:650; --label-case:none;
  --code-size:16px; --drg-size:22px; --nok-size:19px; --body:15px;
}
/* ---------------- B · MA ---------------- */
:root[data-theme="b"]{
  --font:var(--sys); --num:var(--serif); --code:var(--mono);
  --bg:#f7f5f0; --panel:transparent; --panel-edge:transparent; --panel-shadow:none;
  --ink:#20201d; --ink-2:#3b3a35; --mut:#4c4940;   /* AAA: 8,3:1 papir */
  --line:#e0dbd0; --line-2:#cfc9bb;
  --band-off-bg:transparent; --band-off-edge:transparent; --band-on-bg:transparent;
  --band-on-ink:#20201d; --band-on-mut:#575349;
  --accent:#8f2b16; --accent-ink:#6f2211; --accent-soft:#f4ece7; /* 朱 sinober */
  --hd:#26333f; --at:#3f4d33; --pr:#5d3f31;                      /* sumi · koke · kuri */
  --error:#8f2b16; --login-panel:#fffefb;
  --r:0; --r-sm:0; --pad:20px; --gap:22px;
  --label-size:10.5px; --label-track:.24em; --label-weight:600; --label-case:uppercase;
  --code-size:15px; --drg-size:24px; --nok-size:20px; --body:14.5px;
}
/* ---------------- C · RUTENETT ---------------- */
:root[data-theme="c"]{
  --font:'Helvetica Neue',Helvetica,Arial,var(--sys); --num:var(--font); --code:var(--mono);
  --bg:#ececeb; --panel:#ffffff; --panel-edge:#111417; --panel-shadow:none;
  --ink:#111417; --ink-2:#2b3034; --mut:#43484d;   /* AAA: 7,8:1 grunn */
  --line:#111417; --line-2:#b8bcbf;
  --band-off-bg:#ffffff; --band-off-edge:#111417; --band-on-bg:#111417; --band-on-ink:#ffffff; --band-on-mut:#b6bcc2;
  --accent:#0940ad; --accent-ink:#072f80; --accent-soft:#e7eeff;
  --hd:#0940ad; --at:#0b5748; --pr:#8c300e;
  --error:#8c300e; --login-panel:#ffffff;
  --r:0; --r-sm:0; --pad:14px; --gap:14px;
  --label-size:10.5px; --label-track:.13em; --label-weight:700; --label-case:uppercase;
  --code-size:15px; --drg-size:24px; --nok-size:20px; --body:13.5px;
}
/* ---------------- D · NORDISK ---------------- */
:root[data-theme="d"]{
  --font:var(--sys); --num:var(--sys); --code:var(--mono);
  --bg:#f3f1ee; --panel:#ffffff; --panel-edge:#ded9d3; --panel-shadow:none;
  --ink:#1a1a19; --ink-2:#33322f; --mut:#454340;   /* AAA: 8,8:1 grunn */
  --line:#e4e0da; --line-2:#cfcac2;
  --band-off-bg:#ffffff; --band-off-edge:#cfcac2; --band-on-bg:#153a52; --band-on-ink:#ffffff; --band-on-mut:#bacbd8;
  --accent:#0f4d72; --accent-ink:#0b3a57; --accent-soft:#e8f0f5;
  --hd:#0f4d72; --at:#1c6151; --pr:#7a3f6d;
  --error:#9c3a2e; --login-panel:#ffffff;
  --r:5px; --r-sm:4px; --pad:18px; --gap:16px;
  --label-size:12.5px; --label-track:.03em; --label-weight:660; --label-case:none;
  --code-size:16px; --drg-size:23px; --nok-size:20px; --body:15.5px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);
     font-size:var(--body);line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-ink)}

.label{font-size:var(--label-size);letter-spacing:var(--label-track);font-weight:var(--label-weight);
       text-transform:var(--label-case);color:var(--mut);margin:0 0 8px}

/* ---------- toppfelt ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
        padding:14px 28px;background:var(--panel);border-bottom:1px solid var(--line)}
:root[data-theme="b"] .topbar{background:transparent}
:root[data-theme="c"] .topbar{border-bottom:2px solid var(--ink)}
.brand{display:flex;align-items:center;gap:11px}
.brand-name{font-size:17px;font-weight:670;letter-spacing:-.012em}
:root[data-theme="b"] .brand-name{font-weight:500;letter-spacing:.06em}
:root[data-theme="c"] .brand-name{text-transform:uppercase;letter-spacing:.08em;font-size:15px}
.badge{font-size:10px;letter-spacing:.11em;font-weight:670;color:var(--mut);
       border:1px solid var(--line-2);border-radius:3px;padding:3px 8px}
.topbar-right{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.meta{font-size:13px;color:var(--mut)}
.user-box{display:flex;align-items:center;gap:11px;padding-left:16px;border-left:1px solid var(--line)}
.user-name{font-size:13.5px;color:var(--ink-2);font-weight:540}
.ghost{background:none;border:1px solid var(--line-2);border-radius:var(--r-sm);
       padding:6px 12px;font-size:13.5px;color:var(--mut);cursor:pointer;min-height:32px}
.ghost:hover{color:var(--ink);border-color:var(--accent)}

/* ---------- oppsett ---------- */
.layout{display:grid;grid-template-columns:1fr 1.18fr;gap:var(--gap);
        padding:var(--gap) 28px 56px;align-items:start;max-width:1780px}
.panel{background:var(--panel);border:1px solid var(--panel-edge);border-radius:var(--r);
       padding:var(--pad);min-width:0;box-shadow:var(--panel-shadow)}

/* ---------- notat ---------- */
.note{width:100%;min-width:0;min-height:290px;font-family:var(--font);font-size:var(--body);
      line-height:1.62;border:1px solid var(--line-2);border-radius:var(--r-sm);
      padding:14px 15px;resize:vertical;color:var(--ink);background:var(--panel)}
:root[data-theme="b"] .note{background:#fffefb;border-color:var(--line)}
.note:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.actions-row{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.btn{border:1px solid var(--line-2);background:var(--panel);border-radius:var(--r-sm);
     padding:10px 18px;font-size:14.5px;font-weight:560;cursor:pointer;min-height:42px;
     transition:border-color var(--t),background var(--t)}
:root[data-theme="b"] .btn{background:transparent}
.btn:hover{border-color:var(--accent);background:var(--accent-soft)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:640;padding:10px 26px}
.btn.primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn.primary:disabled{opacity:.55;cursor:wait}
:root[data-theme="b"] .btn.primary{background:transparent;color:var(--accent);border-color:var(--accent)}
:root[data-theme="b"] .btn.primary:hover{background:var(--accent-soft);color:var(--accent-ink)}
.privacy{margin:10px 0 0;font-size:12.5px;color:var(--mut);display:flex;gap:9px;align-items:flex-start}
.privacy svg{flex:none;margin-top:3px}

/* ---------- resultathovud ---------- */
.head-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.status{font-size:13px;color:var(--mut);margin-bottom:8px}
.status.error{color:var(--error);font-weight:560}
.empty{font-size:14px;color:var(--mut);padding:10px 0}

/* ---------- kodelinjer, med akse-farge ---------- */
.axis-group{margin-bottom:8px}
.axis-title{display:flex;align-items:center;gap:8px;margin:0 0 4px}
.axis-dot{width:9px;height:9px;border-radius:50%;background:var(--axis);flex:none}
:root[data-theme="c"] .axis-dot{border-radius:0;width:11px;height:11px}
:root[data-theme="b"] .axis-dot{border-radius:0;width:2px;height:12px}
.axis-name{font-size:var(--label-size);letter-spacing:var(--label-track);
           font-weight:var(--label-weight);text-transform:var(--label-case);color:var(--axis)}

.row{display:flex;align-items:baseline;gap:12px;padding:7px 12px;
     border:1px solid var(--line);border-left:3px solid var(--axis);
     border-radius:var(--r-sm);background:var(--panel);margin-bottom:5px}
:root[data-theme="b"] .row{border:0;border-left:2px solid var(--axis);border-radius:0;
                           padding:7px 0 7px 12px;background:transparent;
                           border-bottom:1px solid var(--line);margin-bottom:0}
:root[data-theme="c"] .row{border:1px solid var(--line-2);border-left:5px solid var(--axis)}
.row .kode{font-family:var(--code);font-size:var(--code-size);font-weight:620;
           color:var(--axis);white-space:nowrap;font-variant-numeric:tabular-nums}
.row .body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.row .tekst{font-size:calc(var(--body) - 1px);color:var(--ink);line-height:1.35}
.row .rolle{font-size:12px;color:var(--mut)}
.row.av{border-style:dashed;opacity:.72}
.row.av .kode{text-decoration:line-through;text-decoration-thickness:1px}
.toggle{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mut);
        white-space:nowrap;cursor:pointer;padding:4px 2px;min-height:32px;align-self:center}
.toggle input{accent-color:var(--accent);width:18px;height:18px;cursor:pointer}
.row-tools{display:flex;align-items:center;gap:4px;align-self:center}
.manual-badge{align-self:flex-start;margin-top:2px;padding:1px 5px;border:1px solid var(--line-2);
              border-radius:3px;font-size:10.5px;color:var(--mut)}
.rm{background:none;border:0;color:var(--mut);cursor:pointer;font-size:18px;line-height:1;
    padding:6px 8px;min-height:32px;min-width:32px;border-radius:var(--r-sm)}
.rm:hover{color:var(--accent);background:var(--accent-soft)}
.none{border:1px dashed var(--line-2);border-radius:var(--r-sm);padding:7px 12px;
      font-size:13px;color:var(--mut);margin-bottom:5px}

/* legg til kode */
.legg-til{display:flex;gap:8px;margin-top:5px;align-items:center;flex-wrap:wrap}
.legg-til input{flex:1;min-width:140px;border:1px solid var(--line-2);border-radius:var(--r-sm);
                padding:6px 10px;font-size:13.5px;background:var(--panel);color:var(--ink)}
:root[data-theme="b"] .legg-til input{background:#fffefb}
.legg-til input:focus{outline:2px solid var(--accent);outline-offset:-1px}
.legg-til .btn{min-height:32px;padding:5px 12px;font-size:13px}
.legg-hint{font-size:12px;color:var(--mut);margin:5px 0 0}
[aria-busy="true"] .legg-til,[aria-busy="true"] .row-tools{opacity:.58}
button:disabled,input:disabled{cursor:wait}

/* ---------- DRG: begge gruppene, markøren flyttar seg ---------- */
.drg-block{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
:root[data-theme="c"] .drg-block{border-top:2px solid var(--ink)}
.drg-card{display:flex;align-items:center;justify-content:space-between;gap:14px;
          padding:9px 14px;margin-bottom:6px;border-radius:var(--r-sm);
          background:var(--band-off-bg);border:1px solid var(--band-off-edge);color:var(--ink);
          transition:background var(--t),color var(--t),border-color var(--t)}
.drg-card.vald{background:var(--band-on-bg);border-color:var(--band-on-bg);color:var(--band-on-ink)}
/* drakt B markerer med sinober-strek, ikkje fylling — blekkøkonomi */
:root[data-theme="b"] .drg-card{border:0;border-left:2px solid transparent;
                                padding:9px 0 9px 14px;background:transparent;opacity:.5}
:root[data-theme="b"] .drg-card.vald{border-left-color:var(--accent);opacity:1;background:transparent;color:var(--ink)}
.drg-main{display:flex;flex-direction:column;gap:1px;min-width:0}
.drg-cond{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:670;
          color:var(--mut);margin-bottom:1px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.drg-card.vald .drg-cond{color:var(--band-on-mut)}
:root[data-theme="b"] .drg-card.vald .drg-cond{color:var(--accent)}
.naa{font-size:10px;letter-spacing:.08em;border:1px solid currentColor;border-radius:2px;padding:1px 6px}
.drg-code-row{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.drg-code{font-family:var(--code);font-size:var(--drg-size);font-weight:640;
          letter-spacing:-.015em;font-variant-numeric:tabular-nums}
:root[data-theme="b"] .drg-code{font-family:var(--num);font-weight:500;letter-spacing:0}
.drg-mdc,.drg-name{font-size:12px;color:var(--mut)}
.drg-name{line-height:1.3}
.drg-card.vald .drg-mdc,.drg-card.vald .drg-name{color:var(--band-on-mut)}
:root[data-theme="b"] .drg-card.vald .drg-mdc,:root[data-theme="b"] .drg-card.vald .drg-name{color:var(--mut)}
.drg-value{text-align:right;display:flex;flex-direction:column;gap:1px;flex:none}
.drg-value-label{font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.drg-nok{font-family:var(--num);font-size:var(--nok-size);font-weight:660;
         font-variant-numeric:tabular-nums;letter-spacing:-.012em}
:root[data-theme="b"] .drg-nok{font-weight:400}
.drg-sub{font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums}
.drg-card.vald .drg-sub{color:var(--band-on-mut)}
:root[data-theme="b"] .drg-card.vald .drg-sub{color:var(--mut)}
.drg-delta{max-width:300px;font-size:11px;line-height:1.3;color:var(--mut);
           font-variant-numeric:tabular-nums}
.drg-card.vald .drg-value-label,.drg-card.vald .drg-delta{color:var(--band-on-mut)}
.zero{font-size:12.5px;color:var(--mut)}

.scenario-note{margin:10px 0 0;padding:7px 11px;border:1px solid #d9bd7c;
               border-radius:var(--r-sm);background:#fff8e7;color:#5c4715;font-size:13px}
.rationale{margin-top:10px;background:var(--accent-soft);border-radius:var(--r-sm);
           padding:9px 12px;font-size:calc(var(--body) - 1.5px);line-height:1.5;color:var(--ink-2)}
:root[data-theme="b"] .rationale{background:transparent;border-left:1px solid var(--line-2);
                                 border-radius:0;padding:2px 0 2px 14px}
:root[data-theme="c"] .rationale{background:transparent;border:1px solid var(--line-2);padding:9px 12px}
.rationale strong{color:var(--ink);font-weight:660}

.context-warning{margin-top:8px;padding:7px 11px;border:1px solid #d9bd7c;border-radius:var(--r-sm);
                 background:#fff8e7;color:#5c4715;font-size:13px}

.foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.disclaimer{margin:0;font-size:12.5px;color:var(--mut);flex:1;min-width:220px}
.kopi-ok{font-size:13px;color:var(--accent);margin-left:2px}


/* ==================== innlogging ==================== */
.login-view{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;
            align-items:center;justify-content:center;gap:20px;padding:24px;
            background:radial-gradient(120% 80% at 50% -10%, var(--accent-soft) 0%, transparent 62%),var(--bg)}
.login-card{width:100%;max-width:396px;background:var(--login-panel);
            border:1px solid var(--line);border-radius:calc(var(--r) + 5px);
            padding:34px 32px 26px;
            box-shadow:0 1px 2px rgba(16,26,38,.05),0 12px 34px -12px rgba(16,26,38,.16)}
:root[data-theme="b"] .login-card,:root[data-theme="c"] .login-card{box-shadow:none}
.login-brand{display:flex;align-items:center;gap:13px;margin-bottom:26px}
.login-mark{flex:none;display:grid;place-items:center;width:42px;height:42px;
            border-radius:var(--r-sm);background:var(--accent);color:#fff;
            font-family:var(--code);font-size:13px;font-weight:600;letter-spacing:.04em}
.login-titles{display:flex;flex-direction:column;gap:2px}
.login-name{margin:0;font-size:21px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.login-tagline{margin:0;font-size:12.5px;color:var(--mut)}
.login-form{display:flex;flex-direction:column;gap:15px}
.field{display:flex;flex-direction:column;gap:6px}
.field-label{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
.field input{width:100%;padding:10px 12px;font-family:var(--font);font-size:14.5px;color:var(--ink);
             background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-sm);
             transition:border-color 120ms ease,box-shadow 120ms ease}
.field input:focus{outline:none;border-color:var(--accent);
                   box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent)}
.field-wrap{position:relative;display:block}
.field-wrap input{padding-right:54px}
.reveal{position:absolute;top:50%;right:6px;transform:translateY(-50%);
        padding:5px 8px;border:0;border-radius:4px;background:transparent;
        font-size:11.5px;font-weight:600;letter-spacing:.03em;color:var(--mut);cursor:pointer}
.reveal:hover{color:var(--accent);background:var(--accent-soft)}
.login-error{padding:9px 11px;border-radius:var(--r-sm);
             border:1px solid color-mix(in srgb, var(--error) 34%, var(--line));
             background:color-mix(in srgb, var(--error) 8%, #ffffff);
             color:color-mix(in srgb, var(--error) 74%, var(--ink));font-size:13px}
.login-btn{margin-top:3px;padding:11px 16px;border:0;border-radius:var(--r-sm);
           background:var(--accent);color:#fff;font-size:14.5px;font-weight:600;
           cursor:pointer;transition:background 120ms ease}
.login-btn:hover:not(:disabled){background:var(--accent-ink)}
.login-btn:disabled{opacity:.6;cursor:default}
.login-foot{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--line);
            font-size:12px;line-height:1.5;color:var(--mut)}
.login-meta{margin:0;font-family:var(--code);font-size:11px;letter-spacing:.04em;color:var(--mut)}

/* ---------- Google-innlogging ---------- */
.google-block{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
#google-button{display:flex;justify-content:center;min-height:40px}
.or-split{display:flex;align-items:center;gap:12px;font-size:11.5px;
          letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.or-split::before,.or-split::after{content:'';flex:1;height:1px;background:var(--line)}

/* ---------- innrullering ---------- */
.innrull-intro{margin:0 0 4px;font-size:13px;line-height:1.55;color:var(--mut)}
.styrke{display:flex;align-items:center;gap:10px;margin-top:-6px}
.styrke-bar{flex:1;height:4px;border-radius:2px;overflow:hidden;background:var(--line)}
.styrke-bar > span{display:block;height:100%;width:0;
                   transition:width 160ms ease,background 160ms ease;background:#c0392b}
.styrke-bar > span[data-niva="2"]{background:#d68910}
.styrke-bar > span[data-niva="3"]{background:var(--accent)}
.styrke-bar > span[data-niva="4"]{background:#1f8a5f}
.styrke-tekst{font-size:11.5px;color:var(--mut);min-width:108px;text-align:right}

/* ---------- responsivt ---------- */
@media (max-width:1120px){.layout{grid-template-columns:1fr}}
@media (max-width:640px){
  .layout{padding:16px 15px 40px}
  .topbar{padding:11px 15px;flex-wrap:wrap;row-gap:9px}
  .user-box{padding-left:0;border-left:0}
  .user-name{display:none}
  .drg-card{flex-direction:column;align-items:flex-start;gap:11px}
  .drg-value{text-align:left}
  .login-card{padding:28px 22px 22px}
}
@media (max-width:400px){
  .badge,.meta{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}