/* shared.css — base theme for the Lens Explorer and the library index.
   Linked by: lens_explorer/index.html (published as dist/index.html),
              library/index.html (via library/derived/make_index.py).
   Each link carries ?v=<md5[:8]> of this file; after an edit, update the
   stamp in lens_explorer/index.html by hand (the generated pages stamp
   themselves) — `make verify` (F9) checks it. */

/* Inter (SIL OFL, common/fonts/OFL.txt), bundled and subset to the
   characters the site uses — no font is fetched from a third party */
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

/* Swiss / technical: neutral greys, one ink-blue accent, hairlines */
:root {
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --bg: #16171a;               /* recessed: inputs, hover, chips */
  --bg-elev: #0f1012;          /* the page surface */
  --border: #26282d;           /* hairlines */
  --rule: #3a3d44;             /* section rules, plot frame */
  --grid: #1f2125;             /* chart grid */
  --fg: #ecebe8;
  --muted: #83868d;             /* ≥ 4.5:1 on both surfaces */
  --dim: #a5a7ad;
  --accent: #9fb7d8;
  --frame: #000;
  --on-accent: #0c1522;
  --radius: 0;                 /* square corners throughout */
  --header-bg: var(--bg-elev);
  /* scrollbar thumb: the text colour at low opacity, so it suits both themes */
  --scroll-thumb: color-mix(in srgb, var(--fg) 20%, transparent);
  --scroll-thumb-hover: color-mix(in srgb, var(--fg) 38%, transparent);
  /* focus ring, card shadow, status badges — per theme */
  --focus: color-mix(in srgb, var(--accent) 35%, transparent);
  --card-shadow: none;
  --pop-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 1px var(--rule);   /* an edge that shows on graphite */
  --ok-bg: #16301f; --ok-fg: #6fd08c;
  --warn-bg: #3a2a12; --warn-fg: #e3a44a;
  /* lens / series colours: a curated muted set — ink blue, ochre, plum,
     slate teal, oxblood, moss, dusty rose, olive, steel, sienna — in that
     order (consecutive lenses far apart); OKLCH, moderate chroma, lightness
     alternating so neighbours differ in value (contrast ≥ 7.1 on graphite,
     ≥ 4.7 on white; closest pair oxblood / sienna, ΔE_OK 7) */
  --lens-1: #86b6ed;
  --lens-2: #c09858;
  --lens-3: #ca9cd1;
  --lens-4: #6ebaba;
  --lens-5: #eb9c99;
  --lens-6: #85b386;
  --lens-7: #c88ea4;
  --lens-8: #b5b574;
  --lens-9: #96a4bf;
  --lens-10: #db9677;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f2f2f0;
    --bg-elev: #ffffff;
    --border: #e3e3df;
    --rule: #1a1a1a;
    --grid: #efefec;
    --fg: #161616;
    --muted: #696b70;           /* ≥ 4.5:1 on both surfaces */
    --dim: #4f5156;
    --accent: #1f3a5f;
    --frame: #f0f0f0;
    --on-accent: #ffffff;
    --header-bg: #ffffff;
    --card-shadow: none;
    --pop-shadow: 0 10px 30px rgba(20, 24, 30, .10), 0 0 0 1px var(--border);
    --ok-bg: #e2f2e6; --ok-fg: #1b6e32;
    --warn-bg: #fbeedb; --warn-fg: #9a5a0c;
    --lens-1: #265a90;
    --lens-2: #966c1e;
    --lens-3: #78497f;
    --lens-4: #057273;
    --lens-5: #863a3a;
    --lens-6: #49794b;
    --lens-7: #985c74;
    --lens-8: #605e10;
    --lens-9: #616f8b;
    --lens-10: #96502f;
  }
}

/* Scrollbars (all tools): slim, square, translucent thumb on a transparent
   track. Chromium and Safari draw the webkit pseudo-elements (and ignore
   them as soon as scrollbar-color is set — so that property is only used
   where the pseudo-elements are not supported, i.e. Firefox). */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb); background-clip: content-box;
  border: 2px solid transparent; border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); }
::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
}

body {
  font-family: var(--font);
  font-feature-settings: "cv11", "ss03";   /* single-storey a off; round quotes */
  background: var(--bg-elev);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; }
/* square checkboxes: a hairline box, ink-filled with a white tick when on */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex-shrink: 0; margin: 0;
  width: 13px; height: 13px; border: 1px solid var(--muted); border-radius: 0;
  background: var(--bg-elev); display: inline-grid; place-content: center; cursor: pointer;
  vertical-align: -2px; transition: background .12s, border-color .12s;
}
input[type="checkbox"]::before {
  content: ""; width: 8px; height: 8px; transform: scale(0); transition: transform .12s;
  background: var(--bg-elev);
  clip-path: polygon(14% 44%, 0 58%, 38% 96%, 100% 22%, 86% 8%, 37% 68%);
}
input[type="checkbox"]:checked { background: var(--fg); border-color: var(--fg); }
input[type="checkbox"]:checked::before { transform: scale(1); }
input[type="checkbox"]:hover { border-color: var(--fg); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
input[type="checkbox"]:disabled { opacity: .45; cursor: default; }

header {
  width: 100%;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  padding: 6px 24px 7px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-line {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

header .eyebrow {
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

header h1 {
  font-size: 0.98rem;
  font-weight: 650;
  letter-spacing: -0.012em;
}

header p {
  font-size: 0.72rem;
  color: var(--dim);
  max-width: 60ch;
}

/* Collapsible notes — sits inline in the header line when closed */
.notes { max-width: 80ch; }
.notes summary {
  font-size: 0.68rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.notes summary:hover { color: var(--fg); }
.notes p { font-size: 0.72rem; opacity: 0.75; margin-top: 4px; }

/* Card / panel (elevated surface) */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.card h2 {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
}

/* Badge (coverage status) */
.badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--radius);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.badge-full    { background: var(--ok-bg); color: var(--ok-fg); }
.badge-partial { background: var(--warn-bg); color: var(--warn-fg); }

/* Line icons (inline SVG, class "i"): 12 px, a 1.25 px stroke in the
   current text colour — the app and the library index share them */
svg.i { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.25;
        stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; flex-shrink: 0; }

/* Cross-link icons (curves / image circle) — library index + info boxes */
a.xlink {
  display: inline-block;
  border: none;
  background: none;
  padding: 0 1px;
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--muted);
  vertical-align: middle;
}
a.xlink:hover { color: var(--fg); text-decoration: none; }