/* ============================================================
   SIGNAL — designsystem för resolverweb
   ------------------------------------------------------------
   Ett gränssnitt för en tjänst som medvetet inte vet vad
   användaren gör. Alla siffror här beskriver *konfiguration*,
   aldrig trafik. Se docs/DESIGN.md.

   Ordning i filen:
     1. Tokens och tema
     2. Grundläggande dokumentregler
     3. Skalet (sidomeny, mobil topp, flikrad)
     4. Komponenter (.ui-*)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* ------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------ */

:root {
  color-scheme: light dark;

  --ground:      #ECF0F3;
  --surface:     #FFFFFF;
  --surface-2:   #F4F7F9;
  --line:        #DBE2E8;
  --line-strong: #C1CCD4;
  --ink:         #101820;
  --ink-2:       #54626D;
  --ink-3:       #67757F;

  --accent:      #0E5C73;
  --accent-ink:  #0B4C60;
  --accent-soft: #DBEBF1;
  --on-accent:   #FFFFFF;

  --ok:          #17693F;
  --ok-soft:     #DCEEE4;
  --block:       #AF3229;
  --block-soft:  #F7E0DD;
  --warn:        #8C6000;
  --warn-soft:   #F5EBD4;

  --shadow: 0 1px 2px rgba(16, 24, 32, .06), 0 8px 24px -12px rgba(16, 24, 32, .14);
  --shadow-pop: 0 2px 6px rgba(16, 24, 32, .10), 0 16px 40px -18px rgba(16, 24, 32, .30);

  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --r: 4px;
  --r-lg: 8px;

  --side-w: 224px;
}

/* Mörkt läge är valt, inte inverterat: egna steg mot en mörk yta.
   Kontrasten är kontrollerad mot --surface i respektive läge. */
@media (prefers-color-scheme: dark) {
  :root {
    --ground:      #090F13;
    --surface:     #111920;
    --surface-2:   #18222A;
    --line:        #223039;
    --line-strong: #33454F;
    --ink:         #E2EAF0;
    --ink-2:       #98A8B4;
    --ink-3:       #7A8B97;

    --accent:      #46B4D2;
    --accent-ink:  #7ED0E7;
    --accent-soft: #0F323E;
    --on-accent:   #061318;

    --ok:          #46BE81;
    --ok-soft:     #0F2E22;
    --block:       #F0796A;
    --block-soft:  #331A16;
    --warn:        #D6A63F;
    --warn-soft:   #2E2413;

    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .7);
    --shadow-pop: 0 2px 6px rgba(0, 0, 0, .5), 0 16px 40px -18px rgba(0, 0, 0, .85);
  }
}

/* Användarens egen växel måste vinna över systeminställningen i BÅDA
   riktningar — därför upprepas båda uppsättningarna explicit. */
:root[data-theme="dark"] {
  --ground: #090F13; --surface: #111920; --surface-2: #18222A;
  --line: #223039; --line-strong: #33454F;
  --ink: #E2EAF0; --ink-2: #98A8B4; --ink-3: #7A8B97;
  --accent: #46B4D2; --accent-ink: #7ED0E7; --accent-soft: #0F323E; --on-accent: #061318;
  --ok: #46BE81; --ok-soft: #0F2E22; --block: #F0796A; --block-soft: #331A16;
  --warn: #D6A63F; --warn-soft: #2E2413;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-pop: 0 2px 6px rgba(0,0,0,.5), 0 16px 40px -18px rgba(0,0,0,.85);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --ground: #ECF0F3; --surface: #FFFFFF; --surface-2: #F4F7F9;
  --line: #DBE2E8; --line-strong: #C1CCD4;
  --ink: #101820; --ink-2: #54626D; --ink-3: #67757F;
  --accent: #0E5C73; --accent-ink: #0B4C60; --accent-soft: #DBEBF1; --on-accent: #FFFFFF;
  --ok: #17693F; --ok-soft: #DCEEE4; --block: #AF3229; --block-soft: #F7E0DD;
  --warn: #8C6000; --warn-soft: #F5EBD4;
  --shadow: 0 1px 2px rgba(16,24,32,.06), 0 8px 24px -12px rgba(16,24,32,.14);
  --shadow-pop: 0 2px 6px rgba(16,24,32,.10), 0 16px 40px -18px rgba(16,24,32,.30);
  color-scheme: light;
}

/* ------------------------------------------------------------
   2. Dokument
   ------------------------------------------------------------ */

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

:where(a):focus-visible,
:where(button):focus-visible,
:where(input):focus-visible,
:where(select):focus-visible,
:where(textarea):focus-visible,
:where(summary):focus-visible,
:where([tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* hidden-attributet måste vinna över komponenternas egen display.
   Webbläsarens regel är [hidden] { display: none } med lägsta möjliga
   specificitet, så en klass som .ui-alert (display: flex) slår ut den och
   elementet syns trots attributet. Ett tomt felmeddelande blev då en tom
   ruta ovanför passkey-knappen. */
[hidden] { display: none !important; }

.ui-sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Hoppa direkt till innehållet — syns bara vid tangentbordsfokus. */
.ui-skip {
  position: absolute; left: 8px; top: -60px; z-index: 60;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r);
  padding: 9px 14px; font-size: 13px; font-weight: 600; text-decoration: none;
  transition: top .12s ease;
}
.ui-skip:focus { top: 8px; }

/* ------------------------------------------------------------
   3. Skalet
   ------------------------------------------------------------ */

.ui {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "top" "main" "tabs";
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
}
.ui > * { min-width: 0; }

.ui-side { display: none; grid-area: side; }
.ui-top  { grid-area: top; position: sticky; top: 0; z-index: 30; }
.ui-main { grid-area: main; padding: 16px; display: grid; gap: 16px; align-content: start; }
.ui-tabs { grid-area: tabs; position: sticky; bottom: 0; z-index: 30; }

@media (min-width: 880px) {
  .ui {
    grid-template-columns: var(--side-w) minmax(0, 1fr);
    grid-template-rows: 1fr;
    grid-template-areas: "side main";
  }
  .ui-side { display: flex; position: sticky; top: 0; height: 100dvh; }
  .ui-main { padding: 26px 30px 48px; gap: 22px; max-width: 1180px; }
}

/* --- Sidomeny --- */
.ui-side {
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 18px 0 14px;
  overflow-y: auto;
}
.ui-brand {
  display: flex; align-items: baseline; gap: 7px;
  padding: 0 18px 20px;
  font-family: var(--mono); font-weight: 700; font-size: 17px; letter-spacing: -.03em;
  color: inherit; text-decoration: none;
}
.ui-brand s { text-decoration: none; color: var(--accent); }
.ui-brand em {
  font-style: normal; font-size: 9.5px; letter-spacing: .18em;
  color: var(--ink-3); font-weight: 500;
}
.ui-navlabel {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
  padding: 16px 18px 7px; margin: 0;
}
.ui-nav { display: grid; gap: 1px; padding: 0 10px; }
.ui-nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 8px; border-radius: var(--r);
  color: var(--ink-2); text-decoration: none; font-size: 13.5px;
  border-left: 2px solid transparent;
}
.ui-nav a svg { flex: none; opacity: .75; }
.ui-nav a:hover { background: var(--surface-2); color: var(--ink); }
.ui-nav a.on {
  background: var(--accent-soft); color: var(--accent-ink);
  border-left-color: var(--accent); font-weight: 600;
}
.ui-nav a.on svg { opacity: 1; }

.ui-side-foot {
  margin-top: auto; padding: 14px 12px 0; border-top: 1px solid var(--line);
  display: grid; gap: 6px;
}
.ui-who {
  display: flex; align-items: center; gap: 10px;
  padding: 6px; border-radius: var(--r);
  color: inherit; text-decoration: none;
}
.ui-who:hover { background: var(--surface-2); }
.ui-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--accent-soft); color: var(--accent-ink);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
}
.ui-who b { font-size: 12.5px; font-weight: 600; display: block; line-height: 1.3; }
.ui-who span { font-size: 10.5px; color: var(--ink-3); font-family: var(--mono); }

/* --- Mobil topprad --- */
.ui-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--line);
}

/* --- Mobil flikrad --- */
.ui-tabs {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--surface); border-top: 1px solid var(--line);
  padding: 6px 4px calc(10px + env(safe-area-inset-bottom));
}
.ui-tabs a {
  display: grid; justify-items: center; gap: 4px;
  padding: 7px 2px; min-height: 44px;
  color: var(--ink-3); text-decoration: none;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .02em;
}
.ui-tabs a.on { color: var(--accent-ink); }
.ui-tabs a svg { opacity: .7; }
.ui-tabs a.on svg { opacity: 1; }

/* Måste stå EFTER .ui-top och .ui-tabs ovan. Reglerna har samma
   specificitet, så den som kommer sist vinner — låg den här uppe bland
   grid-reglerna skrev komponenterna över den och både topprad och
   flikrad låg kvar på stora skärmar. */
@media (min-width: 880px) {
  .ui-top, .ui-tabs { display: none; }
}

/* Guiden kör i fokuserat läge: ingen navigation att gå vilse i. */
.ui--wizard { grid-template-columns: 1fr; grid-template-areas: "top" "main"; grid-template-rows: auto 1fr; }
@media (min-width: 880px) {
  .ui--wizard { grid-template-columns: 1fr; grid-template-areas: "top" "main"; grid-template-rows: auto 1fr; }
  .ui--wizard .ui-top { display: flex; }
  .ui--wizard .ui-side { display: none; }
}

/* Inloggning och registrering har inget skal alls. */
.ui-auth {
  min-height: 100dvh; display: grid; align-items: center; justify-items: center;
  padding: 32px 20px 56px;
}
.ui-auth-card { width: 100%; max-width: 400px; display: grid; gap: 18px; }
.ui-auth-brand {
  display: flex; align-items: baseline; gap: 8px; justify-content: center;
  font-family: var(--mono); font-weight: 700; font-size: 20px; letter-spacing: -.03em;
  color: inherit; text-decoration: none;
}
.ui-auth-brand s { text-decoration: none; color: var(--accent); }
.ui-auth-brand em {
  font-style: normal; font-size: 10px; letter-spacing: .18em;
  color: var(--ink-3); font-weight: 500;
}

/* ------------------------------------------------------------
   4. Komponenter
   ------------------------------------------------------------ */

/* --- Sidhuvud --- */
.ui-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ui-pagehead h1 {
  font-family: var(--mono); font-size: 21px; font-weight: 700;
  letter-spacing: -.03em; margin: 0;
}
.ui-pagehead p { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); max-width: 62ch; }
.ui-stamp { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

.ui-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  color: var(--ink-3); text-decoration: none;
}
.ui-back:hover { color: var(--accent-ink); }

/* --- Knappar --- */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  padding: 8px 14px; min-height: 36px;
  border-radius: var(--r); border: 1px solid transparent;
  background: var(--accent); color: var(--on-accent); cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.ui-btn:hover { background: var(--accent-ink); }
.ui-btn[disabled], .ui-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.ui-btn--ghost { background: var(--surface); color: var(--ink-2); border-color: var(--line-strong); }
.ui-btn--ghost:hover { background: var(--surface-2); color: var(--ink); }
.ui-btn--danger { background: var(--surface); color: var(--block); border-color: var(--line-strong); }
.ui-btn--danger:hover { background: var(--block-soft); border-color: transparent; }
.ui-btn--sm { min-height: 30px; padding: 5px 10px; font-size: 12px; }
.ui-btn--wide { width: 100%; }

.ui-linkbtn {
  border: 0; background: none; color: var(--accent-ink); cursor: pointer;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  padding: 4px 6px; border-radius: 3px;
  display: inline-flex; align-items: center; gap: 5px;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.ui-linkbtn:hover { background: var(--surface-2); }
.ui-linkbtn--danger { color: var(--block); }
.ui-linkbtn--danger:hover { background: var(--block-soft); }
/* Sidomenyns fot ska inte skrika — där är länkarna sekundära. */
.ui-side-foot .ui-linkbtn { color: var(--ink-3); font-weight: 400; text-decoration: none; }
.ui-side-foot .ui-linkbtn:hover { color: var(--ink); }
.ui-top .ui-linkbtn { color: var(--ink-2); font-weight: 400; text-decoration: none; }

.ui-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ui-actions--end { justify-content: flex-end; }

/* --- Kort --- */
.ui-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
/* En utfälld meny är absolut positionerad och klipptes bort av kortets
   overflow — panelen hamnade delvis under sidomenyn. Kort som innehåller
   en meny får därför inte klippa. */
.ui-card:has(.ui-menu) { overflow: visible; }
.ui-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.ui-card-head h2, .ui-card-head h3 {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; margin: 0; color: var(--ink-2);
}
.ui-card-body { padding: 16px; }
.ui-card-body > p { margin: 0 0 12px; color: var(--ink-2); max-width: 66ch; }
.ui-card-body > p:last-child { margin-bottom: 0; }
.ui-card-foot {
  padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface-2);
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
}

/* Två kolumner när det finns bredd för det. */
.ui-split { display: grid; gap: 16px; }
@media (min-width: 880px) { .ui-split { grid-template-columns: 1.45fr 1fr; gap: 22px; align-items: start; } }
.ui-split--even { grid-template-columns: 1fr; }
@media (min-width: 880px) { .ui-split--even { grid-template-columns: 1fr 1fr; } }

.ui-stack { display: grid; gap: 16px; align-content: start; }
.ui-stack--tight { gap: 10px; }

/* --- Nyckeltal. Beskriver konfiguration, aldrig trafik. --- */
.ui-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 880px) { .ui-stats { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
.ui-stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 13px 15px 15px;
  color: inherit; text-decoration: none; display: block;
}
a.ui-stat:hover { border-color: var(--line-strong); }
.ui-stat .k {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
}
.ui-stat .v {
  font-family: var(--mono); font-size: 25px; font-weight: 700;
  letter-spacing: -.035em; font-variant-numeric: tabular-nums;
  margin-top: 6px; line-height: 1.1;
}
.ui-stat .v small { font-size: 13px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.ui-stat .s { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); margin-top: 5px; }
.ui-stat .s b { font-weight: 600; }

/* --- Statusskena --- */
.ui-rail { width: 3px; border-radius: 3px; background: var(--line-strong); flex: none; align-self: stretch; min-height: 28px; }
.ui-rail--ok { background: var(--ok); }
.ui-rail--block { background: var(--block); }
.ui-rail--warn { background: var(--warn); }
.ui-rail--idle { background: var(--line-strong); }

/* --- Rader --- */
.ui-rows { display: grid; }
.ui-row {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
.ui-row:last-child { border-bottom: 0; }
a.ui-row:hover { background: var(--surface-2); }
.ui-row-main { flex: 1 1 auto; }
.ui-row-main b { display: block; font-size: 13.5px; font-weight: 600; }
.ui-row-main span {
  display: block; font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ui-row-aside { flex: none; display: flex; align-items: center; gap: 8px; }

/* --- Etiketter --- */
.ui-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 600;
  padding: 3px 7px; border-radius: 3px; white-space: nowrap;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line);
}
.ui-pill--ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.ui-pill--block { background: var(--block-soft); color: var(--block); border-color: transparent; }
.ui-pill--warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.ui-pill--accent { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.ui-pill i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }

/* --- Meddelanden. Status bärs av ikon + text, aldrig av färg ensam. --- */
.ui-alert {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 14px; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 13px; color: var(--ink-2); line-height: 1.5;
}
.ui-alert svg { flex: none; margin-top: 1px; }
.ui-alert b { color: var(--ink); font-weight: 600; }
.ui-alert p { margin: 4px 0 0; }
.ui-alert > div { flex: 1 1 auto; }
.ui-alert--ok { background: var(--ok-soft); border-color: transparent; }
.ui-alert--ok svg { color: var(--ok); }
.ui-alert--warn { background: var(--warn-soft); border-color: transparent; }
.ui-alert--warn svg { color: var(--warn); }
.ui-alert--block { background: var(--block-soft); border-color: transparent; }
.ui-alert--block svg { color: var(--block); }
.ui-alert--accent { background: var(--accent-soft); border-color: transparent; }
.ui-alert--accent svg { color: var(--accent-ink); }

/* --- Tomt läge --- */
.ui-empty {
  display: grid; justify-items: center; gap: 12px; text-align: center;
  padding: 40px 20px; color: var(--ink-2);
}
.ui-empty b { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--ink); }
.ui-empty p { margin: 0; font-size: 13px; max-width: 46ch; }

/* --- Formulär --- */
.ui-form { display: grid; gap: 14px; }
.ui-form-row { display: grid; gap: 14px; }
@media (min-width: 640px) { .ui-form-row--2 { grid-template-columns: 1fr 1fr; } }

.ui-label {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px;
}
.ui-input, .ui-select, .ui-textarea {
  width: 100%; min-height: 38px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r);
  padding: 8px 11px; font-family: var(--sans); font-size: 13px; line-height: 1.4;
}
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--ink-3); }
.ui-input--mono { font-family: var(--mono); font-size: 12.5px; }
.ui-select { cursor: pointer; }
.ui-textarea { min-height: 96px; resize: vertical; font-family: var(--mono); font-size: 12.5px; }
.ui-input:disabled, .ui-select:disabled { background: var(--surface-2); color: var(--ink-3); cursor: not-allowed; }
.ui-help { margin: 6px 0 0; font-size: 12px; color: var(--ink-3); line-height: 1.45; }
.ui-help--error { color: var(--block); }

.ui-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.ui-check input { margin: 2px 0 0; width: 16px; height: 16px; flex: none; accent-color: var(--accent); }
.ui-check b { display: block; font-size: 13px; font-weight: 600; }
.ui-check span { display: block; font-size: 12px; color: var(--ink-2); margin-top: 2px; }

/* --- Verktygsrad --- */
.ui-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ui-field {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r); padding: 0 11px; min-height: 38px;
}
.ui-field svg { opacity: .5; flex: none; }
.ui-field input, .ui-field select {
  border: 0; background: none; color: var(--ink);
  font-family: var(--sans); font-size: 13px; padding: 8px 0; min-width: 0; width: 100%;
}
.ui-field input:focus-visible, .ui-field select:focus-visible { outline: none; }
.ui-field:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.ui-field select { width: auto; cursor: pointer; }
.ui-field--grow { flex: 1 1 190px; }

.ui-chips {
  display: flex; gap: 3px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r); padding: 3px;
  overflow-x: auto;
}
.ui-chip {
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .04em;
  padding: 5px 11px; border-radius: 3px; border: 0; background: none;
  color: var(--ink-3); cursor: pointer; min-height: 28px; flex: none;
  text-decoration: none; display: inline-flex; align-items: center;
}
.ui-chip.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* --- Tabeller --- */
.ui-tablewrap { overflow-x: auto; }
.ui-table { width: 100%; border-collapse: collapse; }
.ui-table th {
  text-align: left; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500;
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2);
  white-space: nowrap;
}
.ui-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-2); vertical-align: middle; }
.ui-table tr:last-child td { border-bottom: 0; }
.ui-table td.dom { font-family: var(--mono); font-size: 12.5px; color: var(--ink); word-break: break-all; }
.ui-table td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.ui-table th.num { text-align: right; }
.ui-table td.act { text-align: right; white-space: nowrap; }

/* --- Kopieringsfält --- */
.ui-copy { display: grid; gap: 6px; }
.ui-copy label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.ui-copy-box {
  display: flex; align-items: stretch;
  border: 1px solid var(--line-strong); border-radius: var(--r);
  background: var(--surface-2); overflow: hidden;
}
.ui-copy code {
  flex: 1 1 auto; font-family: var(--mono); font-size: 12px;
  padding: 9px 11px; color: var(--ink); overflow-x: auto; white-space: nowrap;
}
.ui-copy button {
  flex: none; border: 0; border-left: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink-2); cursor: pointer;
  font-family: var(--sans); font-size: 12px; font-weight: 600; padding: 0 13px;
  display: inline-flex; align-items: center; gap: 6px;
}
.ui-copy button:hover { color: var(--ink); }

/* --- Blocklistor: fyllt = på, ihåligt = av.
       Samma vokabulär som integritetsdatabladet. Markören står
       alltid bredvid en etikett — en symbol som måste avkodas
       fungerar inte ensam. --- */
.ui-listrow {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--line);
}
.ui-listrow:last-child { border-bottom: 0; }
.ui-listrow .mark { width: 9px; height: 9px; border-radius: 1px; flex: none; }
.ui-listrow .mark.on { background: var(--accent); }
.ui-listrow .mark.off { box-shadow: inset 0 0 0 1px var(--line-strong); }
.ui-listrow b { flex: 1 1 auto; font-size: 13px; font-weight: 500; }
.ui-listrow em {
  font-style: normal; font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); font-variant-numeric: tabular-nums; flex: none;
}
.ui-listrow--off b, .ui-listrow--off em { color: var(--ink-3); }
.ui-listfoot {
  padding: 11px 16px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* --- Beslutsspår: filtreringsordningen synliggjord --- */
.ui-verdict {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-radius: var(--r);
  background: var(--surface-2); margin-bottom: 14px;
}
.ui-verdict b { font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.ui-verdict span { font-size: 12.5px; color: var(--ink-2); }
.ui-verdict--block { background: var(--block-soft); }
.ui-verdict--block b { color: var(--block); }
.ui-verdict--ok { background: var(--ok-soft); }
.ui-verdict--ok b { color: var(--ok); }

.ui-trace { display: grid; }
.ui-trace-step {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 12px;
  align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line);
}
.ui-trace-step:last-child { border-bottom: 0; }
.ui-trace-step .n {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.ui-trace-step .t { font-size: 13px; color: var(--ink-2); }
.ui-trace-step .t em { font-style: normal; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); display: block; }
.ui-trace-step.hit {
  background: var(--block-soft); margin: 0 -16px; padding: 12px 16px;
  border-radius: var(--r); border-bottom-color: transparent;
}
.ui-trace-step.hit .t { color: var(--ink); font-weight: 600; }
.ui-trace-step.hit .n { color: var(--block); font-weight: 700; }
.ui-trace-step.hit--ok { background: var(--ok-soft); }
.ui-trace-step.hit--ok .n { color: var(--ok); }
.ui-trace-step.skip { opacity: .45; }

/* --- Skyddsstatus --- */
.ui-shield {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 15px 16px;
}
.ui-shield-main { flex: 1 1 auto; }
.ui-shield-main b { display: block; font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.ui-shield-main p { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-2); }

/* --- Integritetsdatablad: fyllt = sparas, ihåligt = sparas aldrig --- */
.ui-priv { display: grid; gap: 22px; }
@media (min-width: 880px) { .ui-priv { grid-template-columns: 1fr 1fr; gap: 34px; } }
.ui-priv h3 {
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 12px; font-weight: 500;
}
.ui-priv ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
/* Samma konstruktion som .ui-guide li: markören ligger absolut, inte som
   ett eget flex-item. Innehållet är ren text idag, men ett tillagt <b>
   skulle annars bryta isär meningen i flera items. */
.ui-priv li { position: relative; padding-left: 17px; font-size: 13px; line-height: 1.45; }
.ui-priv li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 7px; height: 7px; border-radius: 1px;
}
.ui-priv .keep li::before { background: var(--accent); }
.ui-priv .never li::before { box-shadow: inset 0 0 0 1px var(--line-strong); }
.ui-priv .never li { color: var(--ink-2); }
.ui-priv-foot {
  grid-column: 1 / -1; margin: 0; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-2); line-height: 1.55;
}

/* --- Felsökningsläge --- */
.ui-debug {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 14px 16px; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--line);
}
.ui-debug--on { background: var(--warn-soft); border-color: transparent; }
.ui-debug-body { flex: 1 1 auto; }
.ui-debug-body b { display: block; font-size: 13px; font-weight: 600; }
.ui-debug-body p { margin: 5px 0 0; font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.ui-countdown {
  font-family: var(--mono); font-size: 11.5px; color: var(--warn);
  font-variant-numeric: tabular-nums; font-weight: 700; flex: none;
}

.ui-live { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; color: var(--ink-3); }
.ui-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); animation: ui-puls 2.4s ease-in-out infinite; }
@keyframes ui-puls { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .ui-live i { animation: none; } }

.ui-log { display: grid; }
.ui-log-row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 16px; border-bottom: 1px solid var(--line);
}
.ui-log-row:last-child { border-bottom: 0; }
.ui-log-row time {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; flex: none;
}
.ui-log-row .d { flex: 1 1 auto; }
.ui-log-row .d b {
  display: block; font-family: var(--mono); font-size: 12.5px;
  font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ui-log-row .d span { display: block; font-size: 10.5px; color: var(--ink-3); margin-top: 1px; }

/* --- Guiden --- */
.ui-wizard { width: 100%; max-width: 700px; margin: 0 auto; display: grid; gap: 20px; align-content: start; }

.ui-stepper { display: flex; align-items: center; }
.ui-step {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}
.ui-step .num {
  width: 21px; height: 21px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 10px; font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.ui-step--now { color: var(--ink); font-weight: 700; }
.ui-step--now .num, .ui-step--done .num { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.ui-stepline { flex: 1 1 auto; height: 1px; background: var(--line-strong); margin: 0 10px; min-width: 12px; }

.ui-choices { display: grid; gap: 9px; }
@media (min-width: 880px) { .ui-choices--row { grid-template-columns: repeat(3, 1fr); } }
.ui-choice {
  display: flex; align-items: flex-start; gap: 11px; text-align: left;
  padding: 14px; border: 1px solid var(--line-strong); border-radius: var(--r);
  background: var(--surface); cursor: pointer; width: 100%;
  font-family: var(--sans); color: inherit; position: relative;
}
.ui-choice:hover { border-color: var(--accent); }
.ui-choice .radio {
  width: 15px; height: 15px; border-radius: 50%; flex: none; margin-top: 1px;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.ui-choice input:checked ~ div,
.ui-choice input:checked + .radio { --checked: 1; }
.ui-choice input:checked + .radio { box-shadow: inset 0 0 0 5px var(--accent); }
.ui-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.ui-choice input:focus-visible + .radio { outline: 2px solid var(--accent); outline-offset: 2px; }
.ui-choice b { display: block; font-size: 13.5px; font-weight: 600; }
.ui-choice p { margin: 4px 0 0; font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.ui-choice em {
  font-style: normal; display: block; margin-top: 6px;
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.ui-guide { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; counter-reset: g; }
/* Siffran ligger i en absolut positionerad ::before, inte i en egen
   grid-kolumn. Med display:grid på <li> blir varje <b>, <code> och
   textstycke ett eget grid-item och fördelas växelvis över kolumnerna —
   en löpande mening faller isär och lägger sig omlott. Blocklayout med
   indrag håller ihop den inbyggda texten som den ska. */
.ui-guide li {
  counter-increment: g; position: relative; padding-left: 28px;
  font-size: 13px; color: var(--ink-2); line-height: 1.5;
}
.ui-guide li::before {
  content: counter(g);
  position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-size: 10.5px; line-height: 1.9;
  color: var(--accent-ink); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ui-guide b { color: var(--ink); font-weight: 600; }
.ui-guide code {
  font-family: var(--mono); font-size: 12px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 3px; padding: .08em .34em; color: var(--ink);
}

/* --- Sparkline (endast admin) --- */
.ui-spark { display: block; width: 100%; height: 76px; }
.ui-spark .ln { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ui-spark .ar { fill: var(--accent); opacity: .10; stroke: none; }
.ui-spark .pt { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.ui-axis {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); margin-top: 4px;
}

/* --- Meny som fälls ut (kontomeny i mobiltoppen) --- */
.ui-menu { position: relative; }
.ui-menu > summary { list-style: none; cursor: pointer; }
.ui-menu > summary::-webkit-details-marker { display: none; }
.ui-menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  min-width: 190px; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop); padding: 6px; display: grid; gap: 1px;
}
.ui-menu-panel a, .ui-menu-panel button {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: var(--r); border: 0; background: none;
  font-family: var(--sans); font-size: 13px; color: var(--ink-2);
  text-decoration: none; text-align: left; cursor: pointer; width: 100%;
}
.ui-menu-panel a:hover, .ui-menu-panel button:hover { background: var(--surface-2); color: var(--ink); }
.ui-menu-sep { height: 1px; background: var(--line); margin: 5px 0; }

/* --- Banderoll (trial) --- */
.ui-banner {
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
  padding: 13px 16px; border-radius: var(--r-lg);
  background: var(--warn-soft); color: var(--ink);
}
.ui-banner-body { flex: 1 1 240px; }
.ui-banner b { display: block; font-size: 13.5px; font-weight: 700; }
.ui-banner p { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-2); }

/* --- Notis efter en åtgärd --- */
.ui-toast-area {
  position: fixed; right: 16px; bottom: 16px; z-index: 70;
  display: grid; gap: 8px; justify-items: end; pointer-events: none;
}
.ui-toast {
  display: flex; align-items: center; gap: 9px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r); box-shadow: var(--shadow-pop);
  padding: 10px 14px; font-size: 13px; color: var(--ink);
  animation: ui-toast-in .16s ease-out;
}
@keyframes ui-toast-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .ui-toast { animation: none; } }

/* --- Dialog --- */
.ui-dialog {
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  background: var(--surface); color: var(--ink); padding: 0;
  width: min(440px, calc(100vw - 32px)); box-shadow: var(--shadow-pop);
}
.ui-dialog::backdrop { background: rgba(9, 15, 19, .55); }

/* --- Sifferpar --- */
.ui-defs { display: grid; gap: 0; margin: 0; }
.ui-def {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.ui-def:last-child { border-bottom: 0; }
.ui-def dt { font-size: 13px; color: var(--ink-2); }
.ui-def dd {
  margin: 0; font-family: var(--mono); font-size: 13px; color: var(--ink);
  font-variant-numeric: tabular-nums; text-align: right; word-break: break-all;
}

/* HTMX: dämpa innehåll som håller på att bytas ut. */
.htmx-request.ui-swapping { opacity: .55; transition: opacity .1s; }

/* --- OS-guide: flikar utan JavaScript.
       Radioknapparna ligger före panelerna så att ~-selektorn når dem. --- */
.ui-ostabs { display: grid; gap: 14px; }
.ui-ostabs > input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ui-ostabs .ui-chips label {
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .04em;
  padding: 5px 11px; border-radius: 3px; color: var(--ink-3); cursor: pointer;
  min-height: 28px; flex: none; display: inline-flex; align-items: center;
}
.ui-ospanel { display: none; }
.ui-ostabs > input:checked + label { }

#os-windows:checked ~ .ui-chips label[for="os-windows"],
#os-macos:checked   ~ .ui-chips label[for="os-macos"],
#os-linux:checked   ~ .ui-chips label[for="os-linux"],
#os-ios:checked     ~ .ui-chips label[for="os-ios"],
#os-android:checked ~ .ui-chips label[for="os-android"],
#os-router:checked  ~ .ui-chips label[for="os-router"] {
  background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
#os-windows:checked ~ .ui-ospanels .ui-ospanel--windows,
#os-macos:checked   ~ .ui-ospanels .ui-ospanel--macos,
#os-linux:checked   ~ .ui-ospanels .ui-ospanel--linux,
#os-ios:checked     ~ .ui-ospanels .ui-ospanel--ios,
#os-android:checked ~ .ui-ospanels .ui-ospanel--android,
#os-router:checked  ~ .ui-ospanels .ui-ospanel--router {
  display: grid; gap: 16px;
}
.ui-ostabs > input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

.ui-guide .ui-copy { margin-top: 9px; }
.ui-subhead {
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 10px; font-weight: 500;
}

/* --- Guidens rubriker --- */
.ui-wizard-title {
  font-family: var(--mono); font-size: 22px; font-weight: 700;
  letter-spacing: -.03em; margin: 0 0 6px; text-wrap: balance;
}
.ui-wizard-lede { margin: 0; color: var(--ink-2); max-width: 60ch; }

/* Länk i en rad ska ärva radens typografi men fortfarande vara klickbar. */
.ui-row-main b a { color: inherit; text-decoration: none; }
.ui-row-main b a:hover { color: var(--accent-ink); text-decoration: underline; }
.ui-alert a, .ui-help a { color: var(--accent-ink); }

/* Menypanel som rymmer ett formulär i stället för en länklista. */
.ui-menu-panel--form { min-width: 264px; padding: 14px; }
/* Rader som ska gå ut till kortets kant fast de bor i en card-body. */
.ui-rows--bleed { margin: 12px -16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Chips som radioknappar: valet bor i DOM:en, inte i ett skript. */
.ui-chips label.ui-chip { cursor: pointer; }
.ui-chips label.ui-chip:has(input:checked) {
  background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.ui-chips label.ui-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.ui-checkresult { margin-top: 16px; }
.ui-verdict .ui-rail { min-height: 34px; }

/* Bred variant av blocklistraden: rymmer beskrivning och en knapp. */
.ui-listrow--wide { gap: 14px; padding: 13px 16px; flex-wrap: wrap; }
.ui-listrow-body { flex: 1 1 220px; min-width: 0; }
.ui-listrow-body b { display: block; font-size: 13px; font-weight: 600; }
.ui-listrow-body span { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.ui-listrow--off .ui-listrow-body b { color: var(--ink-3); }

/* --- Inloggningssidorna --- */
.ui-auth-title {
  font-family: var(--mono); font-size: 20px; font-weight: 700;
  letter-spacing: -.03em; margin: 0 0 6px; text-wrap: balance;
}
.ui-auth-sub { margin: 0 0 4px; color: var(--ink-2); font-size: 13px; }
.ui-auth-foot { margin: 0; font-size: 13px; color: var(--ink-2); text-align: center; }
.ui-auth-foot a { color: var(--accent-ink); }

/* Avdelare mellan passkey och lösenord. */
.ui-or {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.ui-or::before, .ui-or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }

/* Tre påståenden under kortet. De ska gå att stå för — inga siffror
   vi inte har, ingen statistik vi inte samlar in. */
.ui-auth-facts {
  display: grid; gap: 14px; margin: 4px 0 0;
  padding-top: 22px; border-top: 1px solid var(--line);
}
.ui-auth-facts div { min-width: 0; }
.ui-auth-facts b {
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent-ink); margin-bottom: 5px;
}
.ui-auth-facts p { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }

/* Dämpad text inne i en tabellcell — sekundärt tal bredvid huvudtalet. */
.ui-muted { color: var(--ink-3); }
.ui-table a { color: var(--accent-ink); text-decoration: none; }
.ui-table a:hover { text-decoration: underline; }

/* --- Rad som får staplas när innehållet inte ryms bredvid varandra --- */
.ui-row--stack { align-items: flex-start; flex-wrap: wrap; }
.ui-row-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.ui-row-note {
  display: block; margin-top: 6px; font-size: 12px; color: var(--ink-2);
  font-family: var(--sans); white-space: normal;
}
.ui-row-note--error { color: var(--block); font-family: var(--mono); font-size: 11px; }
.ui-row-aside--wrap { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
.ui-row-figure { text-align: right; margin-right: 4px; }
.ui-row-figure b {
  display: block; font-family: var(--mono); font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.ui-row-figure span { display: block; font-family: var(--mono); font-size: 10px; color: var(--ink-3); }

/* Panel som annars skulle hamna utanför skärmkanten till höger. */
.ui-menu-panel--left { right: 0; left: auto; min-width: min(360px, calc(100vw - 48px)); }

/* --- Utfällbar rad (<details>) — ersätter onclick + display:none --- */
.ui-expand { padding: 0; }
.ui-expand > summary { list-style: none; cursor: pointer; }
.ui-expand > summary::-webkit-details-marker { display: none; }
.ui-expand-head {
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
  padding: 13px 16px;
}
.ui-expand[open] .ui-expand-head { border-bottom: 1px solid var(--line); }
.ui-expand-head:hover { background: var(--surface-2); }
.ui-expand-head::after {
  content: ""; flex: none; width: 8px; height: 8px; margin-left: 4px;
  border-right: 1.6px solid var(--ink-3); border-bottom: 1.6px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
}
.ui-expand[open] .ui-expand-head::after { transform: rotate(-135deg) translate(-2px, -2px); }
.ui-expand-meta { flex: none; text-align: right; min-width: 0; }
.ui-expand-meta b { display: block; font-size: 12.5px; font-weight: 600; }
.ui-expand-meta span { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }

/* Raden som gäller den inloggade — markeras med yta, inte bara med etikett. */
.ui-table tr.ui-row-now td { background: var(--accent-soft); }

/* --- Låst funktion: syns men går inte att använda på nuvarande nivå. --- */
.ui-card--locked .ui-card-head h2 { color: var(--ink-3); }
.ui-locked {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 14px; border-radius: var(--r);
  background: var(--surface-2); border: 1px dashed var(--line-strong);
}
.ui-locked > div { flex: 1 1 220px; }
.ui-locked b { display: block; font-size: 13px; font-weight: 600; }
.ui-locked p { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }

/* --- Skydd mot vågrät överflödning ---
   Flex- och grid-barn har min-width: auto som default och krymper därför
   inte under sitt innehåll. En lång DoH-adress i ett white-space: nowrap
   <code> kan då bredda hela kolumnen och dra ut layouten i sidled. Att
   nolla min-width låter overflow-x: auto på kodrutan göra sitt jobb. */
.ui-main > *,
.ui-split > *,
.ui-stack > *,
.ui-card,
.ui-card-body,
.ui-copy,
.ui-copy code,
.ui-ospanel,
.ui-ospanels { min-width: 0; }

/* --- Utfällbar rad inuti .ui-rows (admins blocklistor) --- */
.ui-expand--row { border-bottom: 1px solid var(--line); border-radius: 0; }
.ui-expand--row:last-child { border-bottom: 0; }
.ui-expand--row .ui-expand-head { align-items: flex-start; }
.ui-expand--row .ui-row-figure { margin-left: auto; }

/* --- Förhandsvisning som följer vald skyddsnivå (guiden, steg 2) ---
   Raderna renderas neutrala och CSS avgör vilka som är på, utifrån vilken
   radioknapp som är vald. Utan det stod listan stilla oavsett val, vilket
   såg ut som att ingenting var markerat. */
.ui-listpreview .ui-listrow b,
.ui-listpreview .ui-listrow em { color: var(--ink-3); }
.ui-listpreview .mark { box-shadow: inset 0 0 0 1px var(--line-strong); background: none; }

.ui-levelform:has(#level-rekommenderad:checked) .ui-listrow[data-default="1"] .mark,
.ui-levelform:has(#level-strikt:checked) .ui-listrow .mark {
  background: var(--accent); box-shadow: none;
}
.ui-levelform:has(#level-rekommenderad:checked) .ui-listrow[data-default="1"] b,
.ui-levelform:has(#level-strikt:checked) .ui-listrow b { color: var(--ink); font-weight: 600; }

/* Sammanfattningen i kortets huvud, också utan JavaScript. */
.ui-levelform:has(#level-rekommenderad:checked) .ui-levelcount::after { content: "rekommenderat urval"; }
.ui-levelform:has(#level-strikt:checked) .ui-levelcount::after { content: "alla listor"; }
.ui-levelform:has(#level-ingen:checked) .ui-levelcount::after { content: "ingen lista"; }

/* Blockeringssidan är bredare än inloggningskortet — den innehåller
   en felsökningslista, inte ett formulär. */
.ui-blocked { max-width: 560px; }