/* ============================================================================
   HERQLESS — "Paper & Ink" restyle  ·  DROP-IN OVERRIDE
   ----------------------------------------------------------------------------
   Link this AFTER the existing stylesheets in every page that loads them:

     <link rel="stylesheet" href="styles.css" />
     <link rel="stylesheet" href="redline.css" />   (index + redline pages)
     <link rel="stylesheet" href="search.css" />     (search page)
     <link rel="stylesheet" href="paper-ink.css" />  <-- add LAST

   It re-defines the design tokens and overrides the handful of hard-coded radii,
   borders and shadows. No JS or markup changes required. Remove the <link> to
   revert instantly.

   Font policy: keeps EB Garamond self-hosted (no external calls — preserves the
   codebase's integrity principle). UI "chrome" uses a system sans stack; if you
   want true Inter, vendor Inter .woff2 the same way EB Garamond is vendored and
   set --sans to "Inter", ... below.
   ============================================================================ */

:root {
  /* Paper surfaces */
  --bg:          #fffcf2;   /* warm off-white canvas */
  --bg-alt:      #f5f2ea;   /* recessed / hover */
  --panel:       #ffffff;   /* raised / inputs */

  /* Ink + structure (true black; hairlines become solid black) */
  --ink:         #000000;
  --muted:       #444444;
  --line:        #000000;
  --accent:      #000000;
  --accent-soft: #f5f2ea;

  /* Semantic — restrained, legal-UI only (kept muted) */
  --ok:        #2f6b47;
  --ok-soft:   #e7f0ea;
  --warn:      #8a6400;
  --warn-soft: #faf2d8;
  --del:       #8a2b2b;
  --del-soft:  #f6e9e5;

  /* Type */
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;          /* content */
  --sans:  -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;   /* chrome  */
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* --- Sharp edges everywhere (the single most important move) --------------- */
*, *::before, *::after { border-radius: 0 !important; }

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

/* --- The structural "chrome" voice: uppercase, wide-tracked sans ----------- */
.navlink, .settings summary, button, label, .actions-label, .source-kicker {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
}

/* --- Topbar: solid 2px black rule ------------------------------------------ */
.topbar { background: var(--panel); border-bottom: 2px solid var(--ink); }

/* Real logo in place of the ⚖️ glyph (CSS-only: hides the emoji, shows the mark) */
.logo {
  font-size: 0 !important;
  display: inline-block;
  width: 40px; height: 40px;
  background: url("herqless-logo.png") left center / contain no-repeat;
  mix-blend-mode: multiply;
}

/* --- Surfaces: black hairline, no rounding, no soft shadow ----------------- */
.panel, .builder, .query, .requisite, .gate, .komplettera, .diff, .result, .hit,
.citation, #builder-disposition,
textarea, input[type="text"], input[type="password"], input[type="date"], input[type="search"] {
  border-color: var(--ink);
  box-shadow: none;
  background: var(--panel);
}

/* Inputs: border thickens on focus (signature state — no glow) */
textarea:focus, input:focus { outline: none; border: 2px solid var(--ink); }

/* --- Buttons: solid black primary, outline ghost --------------------------- */
button { background: var(--ink); color: var(--bg); border: 2px solid var(--ink); }
button:hover { filter: none; background: #ffffff; color: #000000; }
button:disabled { background: var(--bg-alt); color: #8a8579; border: 1px solid #d8d2c4; }
button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
button.ghost:hover { background: var(--bg-alt); }

/* --- Guidance: structural black LEFT rule (not a coloured accent) ---------- */
.guidance { background: var(--bg-alt); border: 1px solid var(--ink); border-left: 2px solid var(--ink); }

/* --- Citations: bordered chips, mono id ------------------------------------ */
.citation { background: var(--bg-alt); border: 1px solid var(--ink); }
.citation .cid { font-family: var(--mono); color: var(--ink); }
.citation.clickable:hover { background: var(--bg-alt); border-width: 2px; }

/* --- Reference links in the answer ----------------------------------------- */
.ref-link { text-decoration-color: #8a8579; }
.ref-link:hover { background: var(--bg-alt); text-decoration-color: var(--ink); }

/* --- Abstention / gate / komplettera / rejected: muted amber, flat --------- */
.abstention, .gate, .komplettera, .rejected-item { border: 1px solid var(--warn); background: var(--warn-soft); }
.abstention.mock { background: #eef1f6; border: 1px solid var(--muted); border-left: 3px solid var(--muted); color: #3a4456; }
/* Hypotetiskt resonemang (§7): egen orange ton, skild från avståelse (ej avslag) + demo. */
.abstention.hypothetical { background: #fff4e6; border: 1px solid #f0c088; border-left: 3px solid #e08a2e; color: #8a4b12; }

/* --- Trace chain: mono agent, sunken transitions --------------------------- */
.trace .agent { font-family: var(--mono); }
.trace li.transition { background: var(--bg-alt); }

/* --- Source panel: 2px black left rule, flat offset shadow ----------------- */
.source-panel { background: var(--panel); border-left: 2px solid var(--ink); box-shadow: -6px 0 0 rgba(0,0,0,0.06); }
.source-annotation { background: var(--bg-alt); }
mark.src-quote { background: #ffe39a; box-shadow: 0 0 0 1px #e0bc55 inset; color: var(--ink); }
mark.src-chunk { background: var(--bg-alt); }

/* --- Search: sharp facet chips (active = inverted), hits thicken on hover --- */
.facet { font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem;
         background: var(--panel); border: 1px solid var(--ink); color: var(--ink); }
.facet:hover { border-color: var(--ink); }
.facet.on { background: var(--ink); border: 2px solid var(--ink); color: var(--bg); }
.facet-count { font-family: var(--mono); }
.hit:hover, .hit:focus-visible { border: 2px solid var(--ink); background: var(--bg-alt); }
.hit-title { color: var(--ink); }
.hit-snippet mark { background: var(--bg-alt); }

/* --- Redline diff marks ---------------------------------------------------- */
.diff ins { background: var(--ok-soft); border-bottom: 2px solid var(--ok); color: #14502f; }
.diff del { background: var(--del-soft); color: var(--del); }
.change-tag { font-family: var(--mono); }
.change-detail .cid { font-family: var(--mono); color: var(--ink); }

/* ============================================================================
   Rättsdatabas-sökets v2-klasser (kategorigruppering, tillagda EFTER detta handoff).
   Designen mappar .facet; söksidan döptes om till .cat-chip/.cat-head/.cat-group med
   färgkodning per rättskälletyp. Här tas de in i paper & ink: färgaccenterna
   neutraliseras till bläck (regeln "färg är reserverad"), men den pedagogiska
   GRUPPERINGEN behålls och renderas som svarta strukturlinjer — jfr guidance-
   vänsterlinjen ("structural emphasis, not a coloured accent").
   ============================================================================ */

/* Neutralisera kategori-accentfärgerna till bläck. */
:root {
  --cat-forfattning: var(--ink);
  --cat-forarbeten:  var(--ink);
  --cat-praxis:      var(--ink);
  --cat-ovrigt:      var(--ink);
}

/* Källtyp-filter → samma röst som facetterna: skarpa, versal sans, inverterad aktiv. */
.cat-chip { font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.08em;
            font-size: 0.78rem; background: var(--panel); border: 1px solid var(--ink); color: var(--ink); }
.cat-chip:hover { border-color: var(--ink); }
.cat-chip.on { background: var(--ink); border: 2px solid var(--ink); color: var(--bg); }
.cat-count { font-family: var(--mono); color: var(--muted); }
.cat-chip.on .cat-count { color: var(--bg); }
.filter-label { font-family: var(--sans); }

/* Sektionsrubriker → strukturell eyebrow (versal spärrad sans, svart hårstreck). */
.cat-head { font-family: var(--sans); color: var(--ink); border-bottom: 1px solid var(--ink); }
.cat-head-count { font-family: var(--mono); color: var(--muted); }

/* Träffkort → svart strukturell vänsterlinje (inte färgad accent), platt. */
.hit { border: 1px solid var(--ink); border-left: 2px solid var(--ink); }
.hit:hover, .hit:focus-visible { border: 2px solid var(--ink); box-shadow: none; background: var(--bg-alt); }

/* Select: paper-input + kantförtjockning vid fokus (designens input-lista nämnde ej
   select → annars syns webbläsarens fokus-ring; designen vill "no glow"). */
select { border: 1px solid var(--ink); background: var(--panel); color: var(--ink); }
select:focus { outline: none; border: 2px solid var(--ink); }

/* ── Graderad grundningsindikator (SPEC §6) ───────────────────────────────────
   Band + per-menings-grundning + osäkerhetsflaggor. Färg är RESERVERAD: bläck för
   förankrad/grundad, dämpad warn för svag, dämpad del för "granska". Inget procenttal
   som rättslig sannolikhet (SPEC §1) — kvalitativa band. */
.grounding-card { border: 1px solid var(--ink); border-left: 2px solid var(--ink);
                  background: var(--bg-alt); padding: 0.7rem 0.9rem; margin: 0.6rem 0; }
.grounding-head { font-family: var(--sans); font-size: 0.9rem; color: var(--ink);
                  display: flex; align-items: baseline; gap: 0.3rem; flex-wrap: wrap; }
.grounding-dots { font-family: var(--mono); letter-spacing: 0.05em; color: var(--ink); }
.grounding-head .subtle { font-family: var(--sans); text-transform: none; letter-spacing: 0;
                          color: var(--muted); font-size: 0.82rem; }
.grounding-claims { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.grounding-claim { display: grid; grid-template-columns: 1.2rem 1fr; gap: 0.1rem 0.5rem;
                   align-items: baseline; padding: 0.25rem 0; border-top: 1px solid var(--bg);
                   font-family: var(--serif); }
.grounding-claim .claim-mark { font-family: var(--mono); font-weight: 700; text-align: center; }
.grounding-claim .claim-text.clickable { cursor: pointer; border-bottom: 1px dotted var(--muted); }
.grounding-claim .claim-text.clickable:hover { border-bottom-color: var(--ink); }
.grounding-claim .claim-gap { grid-column: 2; font-family: var(--sans); font-size: 0.78rem;
                              color: var(--muted); }
.grounding-claim.b-anchored .claim-mark,
.grounding-claim.b-grounded .claim-mark { color: var(--ink); }
.grounding-claim.b-weak .claim-mark { color: var(--warn); }
.grounding-claim.b-ungrounded .claim-mark { color: var(--del); }
.grounding-claim.b-ungrounded .claim-text { color: var(--muted); }
.grounding-uncertainty { margin-top: 0.6rem; padding: 0.5rem 0.7rem; background: var(--warn-soft);
                         border-left: 2px solid var(--warn); }
.grounding-uncertainty .uncertainty-head { font-family: var(--sans); text-transform: uppercase;
                         letter-spacing: 0.06em; font-size: 0.76rem; color: var(--warn); }
.grounding-uncertainty .uncertainty-list { margin: 0.3rem 0 0; padding-left: 1.1rem;
                         font-family: var(--serif); color: var(--ink); font-size: 0.92rem; }