/* ====== Designrammer (desktop-først, én kolonne) ====== */
:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --text:#0b1324;
  --muted:#6b7280;
  --stroke:#e5e7eb;          /* gray-200 */
  --brand:#003366;           /* marineblå (primær) */
  --brand-600:#002244;       /* mørkere til hover/aktiv */
  --ok:#16a34a;
  --err:#b91c1c;
  --focus:#336699;           /* lysere marineblå til fokusramme */
  --radius:12px;
  --radius-sm:10px;
  --shadow:0 10px 24px rgba(0,51,102,0.15);
  --w:680px;                 /* fast bredde */
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1324;
    --surface:#0f182c;
    --text:#f6f8fb;
    --muted:#9aa3b2;
    --stroke:#1f2a44;
    --brand:#0055aa;         /* litt lysere blå i mørk modus */
    --brand-600:#004488;
    --focus:#4c80b3;         /* fokus som synes på mørk bakgrunn */
    --shadow:0 10px 24px rgba(0,51,102,0.25);
  }
}

/* ====== Grunnoppsett ====== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",
               "Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{ max-width:var(--w); margin:0 auto; padding:40px 20px 56px; }

/* ====== Header / logo ====== */
.brand{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.logo-img{ width:160px; height:auto; }
.brand-name{ font-weight:700; font-size:15px; color:var(--text); }

h1{ font-size:22px; line-height:1.25; margin:8px 0 10px; }
.lead{ color:var(--muted); font-size:15px; max-width:60ch; }

/* ====== Modusvelger (radioer skjult) ====== */
.mode-radio{ position:absolute; opacity:0; pointer-events:none; }

/* ====== Fane-knapper (Send / Motta / Om tjenesten) ====== */
.choice{
  display:grid; gap:10px; margin:18px 0 16px;
  grid-template-columns:1fr; /* én kolonne, desktop-først */
}
.btn-choice{
  display:flex; align-items:center; justify-content:center; gap:10px;
  height:42px; border-radius:12px; border:2px solid var(--brand);
  font-weight:700; cursor:pointer; user-select:none;
  background:var(--surface); color:var(--brand);
  transition: filter .15s ease, background .15s ease, box-shadow .2s ease;
}
.btn-choice:hover{ filter:brightness(.98); }
.btn-choice:focus{ outline:3px solid var(--focus); outline-offset:2px; }

/* Aktiv knapp basert på valgt radio */
#mode-send:checked ~ .choice label[for="mode-send"],
#mode-recv:checked ~ .choice label[for="mode-recv"],
#mode-info:checked ~ .choice label[for="mode-info"]{
  background:var(--brand); color:#fff; border-color:var(--brand);
  box-shadow:0 8px 20px rgba(0,51,102,.18);
}

/* ====== Paneler ====== */
.panel{
  border:1px solid var(--stroke);
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px 16px;
}

/* Skjul alle paneler som standard – vises kun via radio-regler */
#panel-send, #panel-recv, #panel-info { display:none; }

/* Vis korrekt panel basert på valgt radio (radios står før .choice og panelene i DOM) */
#mode-send:checked ~ .choice ~ #panel-send { display:block; }
#mode-send:checked ~ .choice ~ #panel-recv { display:none; }
#mode-send:checked ~ .choice ~ #panel-info { display:none; }

#mode-recv:checked ~ .choice ~ #panel-send { display:none; }
#mode-recv:checked ~ .choice ~ #panel-recv { display:block; }
#mode-recv:checked ~ .choice ~ #panel-info { display:none; }

#mode-info:checked ~ .choice ~ #panel-send { display:none; }
#mode-info:checked ~ .choice ~ #panel-recv { display:none; }
#mode-info:checked ~ .choice ~ #panel-info { display:block; }

/* Paneltypografi */
.panel h2{ font-size:18px; margin:0 0 6px; }
.panel h3{ font-size:16px; margin:14px 0 6px; }
.subtitle{ color:var(--muted); font-size:13px; margin-bottom:10px; }

/* ====== Skjemaelementer ====== */
label{ display:block; font-weight:600; font-size:15px; margin:12px 0 6px; }
input[type="text"], input[type="password"], input[type="file"]{
  width:100%; height:36px; padding:0 12px; font-size:15px;
  border:1px solid var(--stroke); border-radius:var(--radius-sm);
  background:var(--bg); color:var(--text);
}
input[type="file"]{ height:auto; padding:10px 12px; }
input:focus{ outline:3px solid var(--focus); outline-offset:1px; }

/* ====== Knapper ====== */
.actions{ display:flex; align-items:center; gap:12px; margin-top:14px; }
.btn{
  appearance:none; cursor:pointer;
  height:38px; padding:0 16px; border-radius:12px;
  border:1px solid var(--brand); background:var(--brand); color:#fff; font-weight:700;
  transition: background .15s ease, transform .06s ease, box-shadow .2s ease;
}
.btn:hover{ background:var(--brand-600); }
.btn:active{ transform:translateY(1px); }
.btn.btn-outline{
  background:transparent; color:var(--brand);
  border:2px solid var(--brand);
}

/* ====== Status / kvittering ====== */
.status{ color:var(--muted); font-size:14px; min-height:1.2em; }
.status.ok{ color:var(--ok); }
.status.err{ color:var(--err); }

.receipt{
  margin-top:12px; padding:12px; border:1px dashed var(--stroke);
  border-radius:var(--radius-sm); background:rgba(0,51,102,.06);
}
.receipt-title{ font-weight:700; margin-bottom:4px; }
.receipt-line{ margin-top:6px; }
.mono{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; word-break:break-all; font-size:14px; }
.hashes{ margin-top:10px; }
.downloads{ margin-top:12px; }

/* ====== Footer ====== */
footer{ margin-top:24px; color:var(--muted); font-size:14px; text-align:center; }
.footer-line{ margin-top:6px; }
.brand-link{
  color:var(--brand);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.brand-link:hover{ border-bottom-color:var(--brand); }

/* ====== Logo-variant byttes etter lys/mørk modus ====== */
@media (prefers-color-scheme: light){
  .logo-img { content: url('/logo-light.png'); }
}
@media (prefers-color-scheme: dark){
  .logo-img { content: url('/logo-dark.png'); }
}

/* ====== Utils ====== */
.hidden{ display:none; }