/* ==========================================================================
   drawing-set.css: Simulators Edition 2, "Drawing Set" (Claude Opus 5.5)

   Each simulator is a sheet from one drawing set, printed by a different
   process. <body data-sheet="index|cyanotype|redline|diazo|night"> picks the
   print; everything else (grid, linework, title block, type) is shared.
   ========================================================================== */

:root {
  --f-display: "Bricolage Grotesque", "Geist", system-ui, sans-serif;
  --f-text: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --gut: 16px;
}
@media (min-width: 760px) { :root { --gut: 32px; } }

/* the prints */
body[data-sheet="index"] {
  --ground: #E9ECE8; --ground-2: #DEE2DD; --panel: #F4F6F3;
  --ink: #16201C; --ink-2: #44504A; --ink-3: #74807A;
  --line: rgba(22, 32, 28, 0.22); --line-2: rgba(22, 32, 28, 0.45);
  --grid: rgba(22, 32, 28, 0.06); --grid-major: rgba(22, 32, 28, 0.11);
  --accent: #16201C; --accent-2: #D22B2B; --on-accent: #F4F6F3;
}
body[data-sheet="cyanotype"] {            /* Alignment: the blueprint */
  --ground: #1B3A8C; --ground-2: #16317A; --panel: #20449E;
  --ink: #F2F6FF; --ink-2: #BFD0F5; --ink-3: #8EA6DE;
  --line: rgba(242, 246, 255, 0.28); --line-2: rgba(242, 246, 255, 0.6);
  --grid: rgba(242, 246, 255, 0.06); --grid-major: rgba(242, 246, 255, 0.12);
  --accent: #FFFFFF; --accent-2: #FFD166; --on-accent: #1B3A8C;
  --good: #9BF0C4; --bad: #FF9A8A; --warn: #FFD166;
  color-scheme: dark;
}
body[data-sheet="redline"] {              /* Code Blue: red on white */
  --ground: #F6F3EE; --ground-2: #ECE7DF; --panel: #FFFFFF;
  --ink: #1A1A1A; --ink-2: #4A4744; --ink-3: #85807A;
  --line: rgba(26, 26, 26, 0.18); --line-2: rgba(26, 26, 26, 0.45);
  --grid: rgba(210, 43, 43, 0.06); --grid-major: rgba(210, 43, 43, 0.12);
  --accent: #D22B2B; --accent-2: #1A1A1A; --on-accent: #FFFFFF;
  --good: #1F7A45; --bad: #D22B2B; --warn: #B8740A;
  color-scheme: light;
}
body[data-sheet="diazo"] {                /* Half-Life: the whiteprint */
  --ground: #F3EEDD; --ground-2: #E9E2CC; --panel: #FBF8EE;
  --ink: #2A2C6E; --ink-2: #4E509A; --ink-3: #8486B8;
  --line: rgba(61, 63, 158, 0.25); --line-2: rgba(61, 63, 158, 0.55);
  --grid: rgba(61, 63, 158, 0.06); --grid-major: rgba(61, 63, 158, 0.12);
  --accent: #3D3F9E; --accent-2: #B5462F; --on-accent: #FBF8EE;
  --good: #2E7A55; --bad: #B5462F; --warn: #9A6A12;
  color-scheme: light;
}
body[data-sheet="night"] {                /* Pocket Telescope: red light only */
  --ground: #0A0505; --ground-2: #140909; --panel: #1A0B0B;
  --ink: #E2483D; --ink-2: #C8413A; --ink-3: #9A3129;          /* ink-2 keeps ~4:1 on black for small labels */
  --line: rgba(226, 72, 61, 0.22); --line-2: rgba(226, 72, 61, 0.5);
  --grid: rgba(226, 72, 61, 0.04); --grid-major: rgba(226, 72, 61, 0.08);
  --accent: #E2483D; --accent-2: #FF7A5C; --on-accent: #0A0505;
  --good: #E2483D; --bad: #FF7A5C; --warn: #FF7A5C;
  color-scheme: dark;
}

/* the drawing: a faint grid under everything */
html { background: var(--ground); }
body {
  margin: 0; color: var(--ink); font: 400 15px/1.55 var(--f-text); -webkit-font-smoothing: antialiased;
  background-color: var(--ground);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
}

/* sheet bar: the strip across the top of every sheet */
.sheet-bar {
  position: relative; z-index: 50;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px var(--gut); border-bottom: 1px solid var(--line-2);
  font: 500 11px/1.3 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2);
  background: var(--ground);
}
.sheet-bar a { color: inherit; text-decoration: none; }
.sheet-bar a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.sheet-bar b { color: var(--ink); font-weight: 600; }

/* title block: every drawing carries one */
.tblock {
  margin: 48px var(--gut) 28px auto; max-width: 560px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1.5px solid var(--line-2); font: 500 10.5px/1.35 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
  background: var(--ground);
}
.tblock > div { padding: 7px 9px 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tblock > div:nth-child(4n) { border-right: 0; }
.tblock .t { grid-column: span 4; }
.tblock .t2 { grid-column: span 2; }
.tblock .t3 { grid-column: span 3; }
.tblock span { display: block; font-size: 9px; color: var(--ink-3); margin-bottom: 2px; }
.tblock b { font: 700 20px/1.05 var(--f-display); letter-spacing: 0; text-transform: none; color: var(--ink); }
.tblock a { color: var(--ink); }
.tblock > div:last-child { border-bottom: 0; }

/* dimension divider: a rule with ticks at both ends and a label in the middle */
.dim { display: flex; align-items: center; gap: 10px; font: 500 10.5px/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin: 26px 0 14px; }
.dim::before, .dim::after { content: ""; flex: 1; height: 7px; border-left: 1px solid var(--line-2); border-right: 1px solid var(--line-2); background: linear-gradient(var(--line-2), var(--line-2)) center / 100% 1px no-repeat; }

:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }