/* Skytterlab auth-UI – matchar prototypens mörka tema. */
:root{
  /* Säger till webbläsaren att rendera NATIVE-kontroller mörka. Utan detta ritar Windows/Chrome
     <select>-listan med vit botten medan <option> ärver vår ljusa textfärg → ljus text på vitt,
     nästan oläsligt (rapporterat 2026-08-11). Ger även mörka scrollbars och autofyll. */
  color-scheme: dark;
  --dark:#0d1520; --dark2:#111d2e; --dark4:#1e2d42; --accent:#3b82f6; --accent2:#60a5fa;
  --green:#22c55e; --green2:#4ade80; --red:#ef4444; --red2:#f87171;
  /* --text3: #64748b klarade inte AA (2.92–3.85:1); #8b9ab0 ger 4.87–6.42:1. Uppmätt 2026-08-12. */
  --text:#e2e8f0; --text2:#94a3b8; --text3:#8b9ab0;
  --border:rgba(255,255,255,.07); --border2:rgba(255,255,255,.13);
  --card:rgba(255,255,255,.03); --input:rgba(255,255,255,.06);
  --r:10px; --rs:6px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px;-webkit-font-smoothing:antialiased}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--dark);color:var(--text);min-height:100vh;line-height:1.5}

.hdr{background:var(--dark2);border-bottom:1px solid var(--border);padding:0 1.4rem;height:52px;display:flex;align-items:center;gap:.6rem}
.logo-mark{width:30px;height:30px;background:var(--accent);border-radius:var(--rs);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:#fff;letter-spacing:-.5px}
.logo-text{font-weight:700;font-size:15px}
.lang-ico{margin-left:auto;font-size:17px;line-height:1}
.lang{background:var(--input);border:1px solid var(--border2);border-radius:var(--rs);color:var(--text);font-family:inherit;font-size:13.5px;padding:.45rem .6rem;cursor:pointer}
.lang:focus{outline:none;border-color:var(--accent)}
/* Explicita option-färger utöver color-scheme: <option> ärver selectens color men INTE dess
   bakgrund, så utan detta blir listan ljus text på vit platta på plattformar som ignorerar
   color-scheme för popup-listan. */
select option{background-color:var(--dark4);color:var(--text)}

/* PWA-installationsknapp – dämpad accent: syns som en handling utan att dominera headern.
   [hidden]-regeln är INTE valfri: display:inline-flex nedan slår annars ut hidden-attributet
   och knappen skulle visas för alla (återkommande felklass i projektet, jfr .hdr-auth ovan). */
.install-btn{display:inline-flex;align-items:center;gap:.4rem;background:rgba(59,130,246,.14);border:1px solid rgba(59,130,246,.38);border-radius:8px;color:var(--accent2);font-family:inherit;font-size:13px;font-weight:600;padding:.42rem .7rem;margin-left:.6rem;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.install-btn:hover{background:rgba(59,130,246,.22);border-color:var(--accent)}
.install-btn:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.install-btn svg{flex-shrink:0}
.install-btn[hidden]{display:none}

.wrap{display:flex;justify-content:center;padding:2.4rem 1.2rem}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:1.6rem 1.6rem 1.4rem;width:100%;max-width:380px}
h1{font-size:1.15rem;font-weight:700;margin-bottom:1.1rem}
.lede{font-size:12.5px;color:var(--text2);margin-bottom:1rem}

.fld{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.9rem}
/* hidden måste vinna över .fld{display:flex} – annars visas dolda fält (t.ex. #fld-birth,
   #fld-guardian i parkerat guardian-läge). Specificitet (0,2,0) slår .fld (0,1,0). */
.fld[hidden]{display:none}
.fld label{font-size:11px;font-weight:500;color:var(--text2);letter-spacing:.03em}
.fld input[type=email],.fld input[type=password],.fld input[type=text]{
  width:100%;padding:.6rem .75rem;background:var(--input);border:1px solid var(--border2);
  border-radius:var(--rs);color:var(--text);font-family:inherit;font-size:14px;
  transition:border-color .15s,box-shadow .15s}
.fld input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.hint{font-size:11px;color:var(--text3)}
/* Luft ovanfor en hint som foljer pa ett block. Klass, inte style="" - de strikt
   skyddade sidorna (index/showme) kor CSP utan unsafe-inline, sa ett inline-attribut
   blockeras tyst och luften uteblir. Provet i smoke-admin-ui vaktar det. */
.hint.sep{margin-top:.6rem}

.seg{display:flex;gap:.5rem}
.segopt{flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.6rem;background:var(--input);border:1px solid var(--border2);border-radius:var(--rs);font-size:13px;font-weight:600;color:var(--text2);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.segopt:hover{border-color:var(--accent)}
.segopt input{position:absolute;opacity:0;pointer-events:none}          /* dölj radiopricken – hela knappen är valet */
.segopt:has(input:checked){background:var(--accent);border-color:var(--accent);color:#fff}   /* nedtryckt = valt */

.btn{width:100%;padding:.7rem;margin-top:.3rem;background:var(--accent);border:none;border-radius:var(--rs);color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s}
.btn:hover{background:#2f6fe0}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn.ghost{background:transparent;border:1px solid var(--border2);color:var(--text2)}
.btn.ghost:hover{background:var(--input);color:var(--text)}

.links{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.links a{font-size:12px;color:var(--accent2);text-decoration:none}
.links a:hover{text-decoration:underline}

.msg{font-size:12.5px;padding:.6rem .8rem;border-radius:var(--rs);margin-bottom:1rem}
.msg.error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);color:var(--red2)}
.msg.ok{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);color:var(--green2)}
.msg.info{background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.2);color:var(--accent2)}

.acct{display:flex;flex-direction:column;gap:.7rem;margin-bottom:1.2rem}
.acct div{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--border);padding-bottom:.6rem}
.acct dt{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.05em}
.acct dd{font-size:13px;text-align:right}

/* ── Driftvy (showme.html, V013) ───────────────────────────────────────────────
   Ligger i auth.css och inte i en egen fil: allt nedan bygger på tokens och
   komponenter som redan står ovan, och en fil till hade kostat en manifestrad,
   ett .htaccess-övervägande och en post i deploy-grinden för ~40 rader CSS.

   OBS hidden-fällan (samma som .fld ovan): varje klass som sätter display måste
   ha ett eget [hidden]-undantag, annars visas dolda block. */
.wrap.wide{max-width:1180px;align-items:flex-start}
.card.wide{max-width:none}

.adm-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.adm-head h1{margin-bottom:0}
.btn.small{width:auto;padding:.4rem .8rem;font-size:12px}
/* Knapparna i driftvyns rubrikrad. <a class="btn"> behover text-align + de
   block-egenskaper en <button> har av sig sjalv. */
.adm-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.adm-actions[hidden]{display:none}
a.btn.small{display:inline-block;text-decoration:none;text-align:center;margin-top:0}
.adm-actions .btn[hidden]{display:none}

.adm-sec{margin-bottom:1.5rem}
.adm-sec h2{font-size:12px;font-weight:600;color:var(--text3);text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:.7rem}

/* auto-FILL, inte auto-fit: fit kollapsar tomma kolumner, sa en sektion med bara
   tva tal (Drift) hade strackt de tva korten over hela bredden medan grannsektionerna
   hade kompakta kort. Med auto-fill behaller alla sektioner samma kolumnraster. */
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:.6rem}
/* Bara .stats behover detta: den satter display:grid, som slar `hidden`.
   .tbl och .adm-sec satter ingen display - webblasarens egen regel racker
   dar, och en extra rad hade sett ut som ett skydd utan att vara det.
   Provet smoke:admin matar alla tre, sa en framtida display-regel fangas. */
.stats[hidden]{display:none}
.stat{background:var(--dark4);border:1px solid var(--border);border-radius:var(--rs);padding:.7rem .8rem}
.stat dt{font-size:11px;color:var(--text3);letter-spacing:.02em;margin-bottom:.25rem}
.stat dd{font-size:1.35rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}

.tblwrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{text-align:left;font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;
  letter-spacing:.04em;padding:.5rem .6rem;border-bottom:1px solid var(--border2);white-space:nowrap}
.tbl td{padding:.5rem .6rem;border-bottom:1px solid var(--border);vertical-align:top}
.tbl td.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl tr:hover td{background:var(--dark4)}
.tbl .mail{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--text2)}
.tbl .sub{display:block;font-size:11px;color:var(--text3)}
.tbl .never{color:var(--text3);font-style:italic}

.tag{display:inline-block;font-size:10.5px;padding:.1rem .4rem;border-radius:3px;
  border:1px solid var(--border2);color:var(--text2);white-space:nowrap}
.tag.warn{border-color:rgba(239,68,68,.35);color:var(--red2)}