/* ============================================================
   TINY GRAND · DESIGN SYSTEM
   One ink · hairline weights · mono type · hairline grids
   Shared by: index.html · micrographics.html · system.html
   ============================================================ */

/* ---- 1 · TOKENS -------------------------------------------------- */
:root {
  --paper:#EDEDEB;
  --panel:#EDEDEB;   /* one ground: panel tracks paper */
  --ink:#141414;
  --ink-2:#5E5E5B;
  --rule:#C9C9C6;

  --f-display:"Barlow Condensed","Arial Narrow",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  --f-text:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;

  --pad:26px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#0B0B0C; --panel:#0B0B0C; --ink:#E9E9E6; --ink-2:#9A9A96; --rule:#2B2B2E;
  }
}
:root[data-theme="dark"] {
  --paper:#0B0B0C; --panel:#0B0B0C; --ink:#E9E9E6; --ink-2:#9A9A96; --rule:#2B2B2E;
}

/* ---- 2 · BASE ---------------------------------------------------- */
* { box-sizing:border-box; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-text); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding:0 18px 52px;
}
.sheet { max-width:1180px; margin:0 auto; background:var(--panel); }

/* ---- 3 · NAV ----------------------------------------------------- */
.nav {
  max-width:1180px; margin:0 auto; display:flex; flex-wrap:wrap;
  align-items:center; gap:10px 22px; padding:16px 2px 14px;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
}
.nav a { color:var(--ink-2); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px; }
.nav a:hover, .nav a:focus-visible { color:var(--ink); border-bottom-color:var(--ink); }
.nav a.on { color:var(--ink); border-bottom-color:var(--ink); }
.nav .brand { font-family:var(--f-display); font-weight:700; font-size:15px;
  letter-spacing:.12em; color:var(--ink); border:none; }
.nav .fill { flex:1; min-width:20px; }
:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }

/* ---- 4 · PAGE FURNITURE ------------------------------------------ */
header { padding:24px var(--pad) 20px; border-bottom:1px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:22px 44px; align-items:flex-end; justify-content:space-between; }
.hl { flex:1 1 470px; min-width:290px; }
.eyebrow { font-family:var(--f-mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-2); margin:0 0 9px; }
h1 { font-family:var(--f-display); font-weight:700; font-size:clamp(36px,5.6vw,58px);
  line-height:.9; text-transform:uppercase; letter-spacing:.012em; margin:0; text-wrap:balance; }
.lede { margin:12px 0 0; max-width:58ch; font-size:14.5px; }
.lede b { font-weight:500; }

.cap { font-family:var(--f-mono); font-size:9px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-2); margin-bottom:9px; }
.runline { display:flex; flex-wrap:wrap; gap:4px 26px; margin-top:18px; padding-top:11px;
  border-top:1px solid var(--rule); width:100%;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-2); }

.stateblock { flex:0 1 auto; }
.chain { display:flex; align-items:center; }
.chain .st { font-family:var(--f-display); font-weight:700; font-size:19px;
  text-transform:uppercase; letter-spacing:.07em; padding:0 11px; border-left:1px solid var(--rule); }
.chain .st:first-child { border-left:none; padding-left:0; }
.chain .st:last-child { padding-right:0; }
.chain .st b { display:block; font-family:var(--f-mono); font-weight:400; font-size:8px;
  letter-spacing:.16em; color:var(--ink-2); margin-top:4px; }

.band { padding:20px var(--pad) 24px; border-bottom:1px solid var(--rule); }
.bandhead { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.bandhead .ix { font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em; color:var(--ink-2); }
h2 { font-family:var(--f-display); font-weight:700; font-size:20px; text-transform:uppercase;
  letter-spacing:.07em; margin:0; white-space:nowrap; }
.bandhead .fill { flex:1; height:1px; background:var(--rule); }
.bandhead .note { font-family:var(--f-mono); font-size:9px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-2); white-space:nowrap; }

footer { padding:15px var(--pad) 19px; display:flex; flex-wrap:wrap; gap:5px 30px;
  justify-content:space-between; font-family:var(--f-mono); font-size:9px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }

/* ---- 5 · HAIRLINE GRID ------------------------------------------- */
/* Each cell rules its own edge into the 1px gap; adjacent outlines land on
   the same pixel. A partial last row leaves no ground showing, and the outer
   perimeter is clipped away, so the grid never draws a box around itself.  */
.hgrid { display:grid; gap:1px; overflow:hidden; }
.hgrid > * { background:var(--panel); position:relative; outline:1px solid var(--rule); }
.hgrid > *[data-id]::after {
  content:attr(data-id); position:absolute; top:8px; right:11px;
  font-family:var(--f-mono); font-size:8px; letter-spacing:.18em; opacity:.4;
}
.marks { grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); }
.acts  { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.stats { grid-template-columns:repeat(auto-fit,minmax(166px,1fr)); }
.wos   { grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); }
.specs { grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }

/* specimen cell: a mark on its own ground */
.cell { padding:26px 16px 20px; display:flex; align-items:center; justify-content:center; min-height:186px; }
.cell > svg { display:block; width:100%; height:auto; color:var(--ink); }

/* action cell */
.act { padding:15px 16px 16px; }
.act .idx { font-family:var(--f-mono); font-size:9px; letter-spacing:.18em;
  color:var(--ink-2); margin-bottom:8px; }
.act h3 { font-family:var(--f-display); font-weight:700; font-size:21px;
  text-transform:uppercase; letter-spacing:.06em; margin:0 0 6px; }
.act p { margin:0; font-size:12.6px; line-height:1.45; color:var(--ink-2); }
.act p b { color:var(--ink); font-weight:500; }
.act.sum { background:var(--ink); }
.act.sum h3, .act.sum p b { color:var(--paper); }
.act.sum p, .act.sum .idx, .act.sum::after { color:var(--paper); opacity:.7; }
.act.sum h3 { opacity:1; }

/* stat cell */
.stat { padding:14px 15px 15px; }
.stat > svg { display:block; width:100%; height:auto; margin-bottom:10px; color:var(--ink); }
.stat .v { font-family:var(--f-display); font-weight:700; font-size:27px;
  line-height:1; letter-spacing:.02em; }
.stat .l { font-family:var(--f-mono); font-size:8.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-2); margin-top:6px; }

/* note cell */
.wo { padding:15px 16px 17px; }
.wo .bar { display:block; height:2px; background:currentColor; width:26px; margin-bottom:9px; }
.wo h4 { font-family:var(--f-display); font-weight:700; font-size:17px;
  text-transform:uppercase; letter-spacing:.055em; margin:0 0 5px; }
.wo p { margin:0; font-size:12.4px; line-height:1.45; color:var(--ink-2); }
.wo p b { color:var(--ink); font-weight:500; }

/* ---- 6 · FIGURE -------------------------------------------------- */
.figwrap { overflow-x:auto; }
.figwrap > svg { display:block; width:100%; min-width:900px; height:auto; color:var(--ink); }

/* ---- 7 · SVG PRIMITIVES ------------------------------------------ */
/* stroke ladder: four tiers, aliases kept for the ornament set      */
.s2, .em   { stroke:currentColor; fill:none; stroke-width:1.8; }   /* mark / emphasis  */
.w1        { stroke:currentColor; fill:none; stroke-width:1.6; }   /* signal path      */
.s, .ann   { stroke:currentColor; fill:none; stroke-width:1;   }   /* annotation line  */
.w2        { stroke:currentColor; fill:none; stroke-width:1.1; }   /* secondary / pair */
.thin      { stroke:currentColor; fill:none; stroke-width:.8; opacity:.5; }
.sh        { stroke:currentColor; fill:none; stroke-width:.7; opacity:.55; }
.hair      { stroke:currentColor; fill:none; stroke-width:.5; opacity:.45; }
.dsh, .dash{ stroke:currentColor; fill:none; stroke-width:.8; opacity:.5; stroke-dasharray:5 5; }
.env       { stroke:currentColor; fill:none; stroke-width:.7; opacity:.45; stroke-dasharray:3 4; }
.port      { stroke:currentColor; fill:none; stroke-width:.9; opacity:.7; }
.rad       { stroke:currentColor; fill:none; stroke-width:1.4; }

.f, .fk    { fill:currentColor; stroke:none; }
.fo        { fill:currentColor; stroke:none; opacity:.5; }
.blk       { fill:var(--panel); stroke:currentColor; stroke-width:1.1; }
.tintr     { fill:currentColor; opacity:.05; stroke:none; }
.badge     { fill:currentColor; stroke:none; }
.bn        { font-family:var(--f-mono); font-weight:500; font-size:10px; fill:var(--panel); letter-spacing:.02em; }

/* svg type */
svg text  { font-family:var(--f-mono); fill:currentColor; }
.nm   { font-family:var(--f-display); font-weight:700; font-size:21px; letter-spacing:.03em; }
.nms  { font-family:var(--f-display); font-weight:700; font-size:17px; letter-spacing:.03em; }
.mid  { font-family:var(--f-display); font-weight:700; font-size:26px; letter-spacing:.04em; }
.big  { font-family:var(--f-display); font-weight:700; font-size:46px; letter-spacing:.02em; }
.t    { font-family:var(--f-mono); font-weight:500; font-size:9.5px; letter-spacing:.13em; }
.lab  { font-size:9.5px; letter-spacing:.1em; }
.t2, .tiny { font-family:var(--f-mono); font-weight:400; font-size:8px; letter-spacing:.14em; opacity:.62; }
.ttl  { font-size:9.5px; letter-spacing:.18em; opacity:.62; }
.numt { font-family:var(--f-mono); font-weight:500; font-size:19px; letter-spacing:.01em; }

/* ---- 8 · PRINT --------------------------------------------------- */
@media print {
  :root { --paper:#FFF; --panel:#FFF; --ink:#000; --ink-2:#494949; --rule:#B5B5B5; }
  @page { size:A4 landscape; margin:7mm; }
  html { font-size:84%; }
  body { padding:0; background:#fff; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  .nav { display:none; }
  .sheet { border:none; max-width:none; }
  header { padding:7px 8px 9px; }
  .band { padding:9px 8px 11px; }
  .bandhead { margin-bottom:8px; }
  footer { padding:7px 8px 4px; }
  .figwrap > svg { min-width:0; }
  .act, .stat, .wo, .cell { padding:9px 11px 10px; }
  .cell { min-height:0; }
  .hgrid, .figwrap { break-inside:avoid; }
  h1 { font-size:36px; }
}

/* ---- 9 · SMALL SCREENS ------------------------------------------- */
@media (max-width:640px) {
  body { padding:0 8px 34px; }
  :root { --pad:16px; }
}