/* ============================================================================
   HERQLESS — "Paper & Ink v2"  ·  PREMIUM-HYBRID  ·  DROP-IN OVERRIDE
   ----------------------------------------------------------------------------
   Länkas ALLRA SIST (efter styles.css, redline/search/home, paper-ink.css,
   shell.css, enhance.css, polish.css). Ta bort <link> → allt återgår direkt.

   Mål: behåll den editoriella "paper & ink"-själen men höj hantverket så att det
   slutar läsa som wireframe. Tre grepp:
     1. DJUP via ton, inte hård svart kant — varma nära-svarta toner, hårstreck
        för gruppering, mjuk varmtonad elevation, liten radie (4–6px).
     2. TYPE-DISCIPLIN — sluta skrika: versal-spärren tas bort från knappar,
        labels och nav; versal-eyebrow reserveras för EN roll (struktur-etiketter).
     3. RÖRELSE — transitions på knappar/hover/fokus (löser "statiskt").

   + EN återhållen VARUMÄRKESACCENT för gränssnitts-affordans (aktiv nav,
   primärknapp, fokus, länkar, citat-id). Detta är medvetet SKILT från
   juridisk-semantisk färg: grön/amber/röd (ok/warn/del) lämnas HELT orörda och
   fortsätter betyda rättstillstånd, inte gränssnitt.
   ============================================================================ */

:root {
  /* — Varumärkesaccent (gränssnitt, INTE juridisk semantik). En rad att byta. —
     Default: djup indigo — koordinerar med den marinblå logotypen (institutionellt/förtroende).
     Alternativ oxblod ("rättsbibliotek/inbundet", varmt mot cremen):
       --brand:#6f2433; --brand-deep:#571a27; --brand-soft:#f4e9e7; --brand-ring:rgba(111,36,51,.28); */
  --brand:      #2a3170;
  --brand-deep: #1f2657;
  --brand-soft: #e9ebf5;
  --brand-ring: rgba(42, 49, 112, 0.28);

  /* — Varma neutraler: tona ned rent #000 → nära-svart; mjuka hårstreck. —
     (paper-ink.css tvingade --ink till #000000 vilket gjorde varje kant till en
     hård svart linje — det var det som läste som wireframe.) */
  --ink:       #211c16;   /* varm nära-svart — bröd, märke */
  --muted:     #6c675b;   /* varm grå */
  --line:      #e0dacb;   /* varmt hårstreck — gruppering */
  --line-soft: #ebe6da;   /* ännu svagare */
  /* Avgulnat papper (val A): varm pappers­känsla kvar, gult stick bortdämpat. */
  --bg:        #f4f2ea;
  --bg-alt:    #eae6dc;
  --panel:     #faf9f3;
  --accent:      var(--brand);   /* styles.css/home.css refererar --accent → led in i accenten */
  --accent-soft: var(--brand-soft);

  /* — Mjuk, varmtonad elevation (editorial = återhållen, inte skugglös). — */
  --shadow-sm: 0 1px 2px rgba(40, 33, 20, 0.04), 0 1px 3px rgba(40, 33, 20, 0.05);
  --shadow-md: 0 2px 6px rgba(40, 33, 20, 0.05), 0 10px 28px rgba(40, 33, 20, 0.08);
  --radius:    5px;
  --radius-lg: 8px;
}

/* — Mjuka upp den globala 0-radien (paper-ink: `*{border-radius:0!important}`).
     Samma specificitet, men v2 laddas efter → vinner. Återställ det som ska vara
     streck (sidebar/topbar/hr) resp. cirkel/pill (avatar/chip). — */
*, *::before, *::after { border-radius: var(--radius) !important; }
.shell-sidebar, .topbar, hr,
.source-panel, .source-backdrop { border-radius: 0 !important; }
.shell-avatar, .src-chip { border-radius: 999px !important; }

/* — Städa: element med [hidden] ska faktiskt vara dolda. (Klass-regler som
     `.builder-section{display:grid}` övertrumfar annars UA:ns [hidden]→none och
     läcker tomma sektioner, t.ex. "Utkast"-rutan — bidrog till tomhetskänslan.) */
[hidden] { display: none !important; }

body { color: var(--ink); background: var(--bg); }

/* ── 1. TYPE-DISCIPLIN — sluta skrika ─────────────────────────────────────── */

/* Neutralisera paper-inks globala VERSAL-spärr på knappar/labels/nav/summary. */
button, label, .navlink, .settings summary, .quick-title {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
}

/* Reservera versal-eyebrow för EN roll: små struktur-/sektionsetiketter där
   versalen faktiskt bär hierarki (inte på varje fält). Dämpad + spärr 0.1em. */
.source-kicker, .actions-label, .shell-role, .panel-link,
.filter-label, .uncertainty-head, .src-chip,
.turn-q::before, .turn-citations:not(:empty)::before {
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}

/* Formulärlabels: lugn, dämpad, liten — leder ögat utan att skrika. */
label {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

/* ── 2. DJUP via ton — ytor får hårstreck + mjuk elevation, inte hård kant ── */

.topbar {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

/* Bort med tagline-raderna under rubriken ("Intelligence Amplifier … Juristen avgör")
   — sidebaren brandar redan, och slogan-rader läser som reklam. Pedagogiken flyttas
   i st.f. in i innehållet (tomt-läge/metod-stege), inte som permanent paratext. */
.tagline { display: none; }

.panel, .builder, .query, .quick-card, .gate, .komplettera,
.requisite, .grounding-card, .home-row {
  border-color: var(--line);
}

.panel, .builder, .query, .quick-card {
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

/* Inputs: vilande hårstreck → accent-ring vid fokus (inte bara kant-förtjockning). */
textarea, input[type="text"], input[type="password"], input[type="date"],
input[type="search"], select, #builder-disposition {
  border: 1px solid var(--line);
  background: var(--panel);
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
textarea:focus, input:focus, select:focus {
  outline: none;
  border: 1px solid var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}

/* Resonemangsstöd: behåll vänster-rule som struktur men på hårstrecks-box. */
.guidance { border: 1px solid var(--line); border-left: 3px solid var(--muted); }

/* ── 3. RÖRELSE + accent — knappar, nav, kort, citat ─────────────────────── */

/* Primärknapp: förfinad accent-knapp med mjuk lyft (inte ett svart slab-block). */
button {
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
  box-shadow: var(--shadow-sm);
  padding: 0.62rem 1.25rem;
  transition: background 0.14s ease, border-color 0.14s ease,
              transform 0.08s ease, box-shadow 0.14s ease;
}
button:hover {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
button:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
button:disabled {
  background: var(--bg-alt); color: #a39c8c;
  border: 1px solid var(--line); box-shadow: none; transform: none;
}

/* Sekundär (ghost): lugn kontur som lyfter lätt vid hover. */
button.ghost {
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); box-shadow: none;
}
button.ghost:hover {
  background: var(--bg-alt); border-color: var(--muted);
  transform: translateY(-1px); color: var(--ink);
}

/* Sidebar: aktiv modul i mjuk accent + inre vänster-stapel (ingen layout-shift),
   inte ett hårt svart block. Hover med transition. */
.shell-sidebar { background: var(--panel); border-right: 1px solid var(--line); }
.shell-item { transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease; }
.shell-item:hover { background: var(--bg-alt); }
.shell-item.active {
  background: var(--brand-soft);
  color: var(--brand);
  box-shadow: inset 3px 0 0 var(--brand);
}

/* Länkar/referenser i accenten. */
.navlink { color: var(--brand); }
.ref-link { color: var(--brand); text-decoration-color: var(--brand-ring); }
.ref-link:hover { background: var(--brand-soft); text-decoration-color: var(--brand); }
.citation .cid, .guidance .cid { color: var(--brand); }

/* Citat-kort: hårstreck + mjuk lyft vid hover (rörelse). */
.citation {
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform 0.1s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.citation.clickable:hover {
  transform: translateY(-1px); box-shadow: var(--shadow-md);
  border-color: var(--muted); background: var(--panel);
}

/* Snabbstart-kort (hem): lyft + accent-kant i st.f. hård svart-invertering. */
.quick-card {
  transition: transform 0.12s ease, box-shadow 0.14s ease, border-color 0.14s ease, color 0.12s ease;
}
.quick-card:hover {
  background: var(--panel); color: var(--ink);
  transform: translateY(-2px); box-shadow: var(--shadow-md);
  border-color: var(--brand);
}
.quick-card:hover .quick-title { color: var(--brand); }
.quick-card:hover .quick-sub { color: var(--muted); }
.quick-title { font-size: 1.02rem; }

/* Sök-facetter/kategori-chips: aktiv = accent (interface), inte hård svart. */
.facet.on, .cat-chip.on {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.facet, .cat-chip { transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease; }

/* Källpanel: accent vänster-rule (signatur "detta är en verifierbar källa"). */
.source-panel { border-left: 2px solid var(--brand); box-shadow: var(--shadow-md); }

/* ⌘K-palett: valt läge i accent (matchar nav). */
.hq-palette-item.sel { background: var(--brand); color: #fff; }
.hq-palette-item.sel .hq-pi-hint { color: rgba(255, 255, 255, 0.82); }

/* — Diskret entré för huvudytorna vid sidladdning (premium "alive", låg risk). — */
@media (prefers-reduced-motion: no-preference) {
  .builder, .query, .panel, .home-quick, .home-grid {
    animation: hq2-rise 0.34s ease both;
  }
  @keyframes hq2-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ============================================================================
   SEMANTISKT FÄRGSCHEMA — markerar text efter MENING (matchar temat, dämpat).
   ----------------------------------------------------------------------------
   Två axlar, hålls isär:
     • Rättskälletyp (författning / förarbete / praxis) — lär ut källhierarkin
       medan man läser. Färgar inline-referenser, citat-id och citatkortens
       vänsterkant. Typen härleds deterministiskt ur chunk_id i app.js (§2).
     • Grundningsstatus (förankrad/grundad = grön, svag = amber, granska = röd)
       — befintliga --ok/--warn/--del, nu burna in i markörerna.
   Allt på varmt papper; inga vassa mättade toner.
   ============================================================================ */
:root {
  --src-lag:       #2a3170;  /* författning/lagtext — backbone, = varumärkesindigo */
  --src-forarbete: #8a5a23;  /* förarbeten — varm brons ("äldre papper") */
  --src-praxis:    #6a3556;  /* praxis/prejudikat — dämpat plommon ("domarkåpa") */
}

/* Inline-referenser i svaret + citat-id, färgade per källtyp (placeras efter
   v2:s .ref-link/.cid-regler → vinner på källordning, samma specificitet). */
.ref-link.t-lag,        .cid.t-lag        { color: var(--src-lag); }
.ref-link.t-forarbete,  .cid.t-forarbete  { color: var(--src-forarbete); }
.ref-link.t-praxis,     .cid.t-praxis     { color: var(--src-praxis); }
.ref-link.t-lag, .ref-link.t-forarbete, .ref-link.t-praxis { text-decoration-color: currentColor; }

/* Citatkort: färgad vänsterkant per källtyp (snabb visuell sortering). */
.citation.t-lag       { border-left: 3px solid var(--src-lag); }
.citation.t-forarbete { border-left: 3px solid var(--src-forarbete); }
.citation.t-praxis    { border-left: 3px solid var(--src-praxis); }

/* Grundningsmarkörer → statusfärg (förankrad/grundad grön, svag amber, granska röd).
   Tidigare bläck-svarta; färgkodas nu för tydlig läsning (din "markera text"-önskan). */
.grounding-claim.b-anchored .claim-mark,
.grounding-claim.b-grounded .claim-mark { color: var(--ok); }
.grounding-claim.b-weak .claim-mark      { color: var(--warn); }
.grounding-claim.b-ungrounded .claim-mark { color: var(--del); }