/*! Ink Design System v1.0.0 — Paper + Night
 *  MIT. Fonts are SIL OFL-1.1; ship fonts/OFL-*.txt alongside them.
 *  Generated by tools/build.mjs — edit src/, not this file. */

/* ===== fonts/ink.css ===== */
/* Ink webfonts — self-hosted, SIL Open Font License 1.1.
   License texts travel with the binaries: fonts/OFL-*.txt.
   Latin and Latin Extended subsets, split by unicode-range: the second
   covers most other European languages. No network requests.

   Lora                      — the book. A brushed contemporary serif with
                               moderate contrast, calm at reading sizes.
                               Variable, 400–700, with italic.
   Atkinson Hyperlegible Next — the device. Letters drawn to stay distinct
                               at small sizes and low contrast. Variable,
                               200–800, with italic.

   Paths assume fonts/ sits at the site root. Rewrite these urls if not. */

@font-face {
  font-family: "Lora";
  src: url("fonts/Lora-Latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lora";
  src: url("fonts/Lora-Latin-Italic.woff2") format("woff2");
  font-weight: 400 700; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lora";
  src: url("fonts/Lora-LatinExt.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lora";
  src: url("fonts/Lora-LatinExt-Italic.woff2") format("woff2");
  font-weight: 400 700; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/AtkinsonHyperlegibleNext-Latin.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/AtkinsonHyperlegibleNext-Latin-Italic.woff2") format("woff2");
  font-weight: 200 800; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/AtkinsonHyperlegibleNext-LatinExt.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/AtkinsonHyperlegibleNext-LatinExt-Italic.woff2") format("woff2");
  font-weight: 200 800; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===== tokens/shared.css ===== */
/* Ink — shared tokens. Everything here is the same in Paper and Night.

   The palette is ink and water: sixteen levels of gray, 0x00 to 0xFF in
   steps of 0x11, and nothing between them. A small, fixed set keeps every
   page in one quiet register. tools/check-stillness.mjs fails any other
   color anywhere in src/. */

:root {
  --gray-0:  #000000;
  --gray-1:  #111111;
  --gray-2:  #222222;
  --gray-3:  #333333;
  --gray-4:  #444444;
  --gray-5:  #555555;
  --gray-6:  #666666;
  --gray-7:  #777777;
  --gray-8:  #888888;
  --gray-9:  #999999;
  --gray-10: #aaaaaa;
  --gray-11: #bbbbbb;
  --gray-12: #cccccc;
  --gray-13: #dddddd;
  --gray-14: #eeeeee;
  --gray-15: #ffffff;

  /* Space. A 4px base; generous, because margins are the only depth. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Corners stay rounded (an Ahimsa law), but small: a page, not a pill. */
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-pill: 999px;

  /* Strokes. Nothing thinner than one CSS pixel: a hairline fades on many
     screens and for many eyes. Controls are drawn twice as heavy as rules. */
  --stroke: 1px;
  --stroke-control: 2px;
  --stroke-focus: 3px;

  /* Type. The book and the device. */
  --font-book: "Lora", "Iowan Old Style", Georgia, serif;
  --font-ui: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Weights run a notch heavier than usual, so strokes stay firm in gray
     and in Night, and for tired eyes. */
  --weight-body: 450;
  --weight-ui: 500;
  --weight-heading: 650;
  --weight-strong: 700;

  --size-label: 0.875rem;
  --size-caption: 0.9375rem;
  --size-ui: 1.0625rem;
  --size-body: 1.125rem;
  --size-lead: 1.375rem;
  --size-h3: 1.375rem;
  --size-h2: 1.875rem;
  --size-h1: 2.625rem;
  --size-title: clamp(3rem, 2.2rem + 3.2vw, 5rem);

  --leading-tight: 1.15;
  --leading-ui: 1.35;
  --leading-body: 1.6;

  /* Text runs the full width it is given. Set a rem value to cap the
     line length, for example 38rem for about 70 characters of Lora. */
  --measure: 100%;

  /* A touch target, generous enough for a tired or unsteady hand. */
  --hit: 48px;

  /* There are no motion tokens. Nothing in Ink moves. */
}

/* ===== tokens/paper.css ===== */
/* Ink Paper — dark ink on light paper. The default, as a page has
   always been.

   --ground and --ink are the two levels everything else leans on. By
   default they stop one step short of the extremes (no pure white to
   glare, no pure black to smear, as in Ahimsa). With .ink-full,
   paper-full.css opens them to the full range. */

.ink-paper {
  color-scheme: light;

  --ground: var(--gray-14);
  --ink: var(--gray-1);

  /* Surfaces */
  --surface-canvas: var(--ground);
  --surface-raised: var(--ground);
  --surface-sunk: var(--gray-13);
  --surface-inverse: var(--ink);

  /* Text. --text-secondary still clears 7:1. */
  --text-heading: var(--ink);
  --text-body: var(--ink);
  --text-secondary: var(--gray-4);
  --text-inverse: var(--ground);

  /* Non-text. --mark-muted is for idle marks (leader dots, an empty
     step), never type. --rule is a decorative separator and carries no
     information; --border-control draws the edge of anything you touch. */
  --mark-muted: var(--gray-7);
  --rule: var(--gray-9);
  --rule-strong: var(--ink);
  --border-control: var(--ink);
  --focus-ring: var(--ink);

  /* Selection and press are an inversion: two levels, nothing between. */
  --selected-fill: var(--ink);
  --on-selected: var(--ground);
}

/* ===== tokens/paper-full.css ===== */
/* Ink Paper at the full range: pure paper and pure ink, for the
   strongest contrast. Opt in with .ink-full; a grayscale display gets it
   by itself. */

@media (monochrome) {
  .ink-paper {
    --ground: var(--gray-15);
    --ink: var(--gray-0);
  }
}

.ink-paper.ink-full {
  --ground: var(--gray-15);
  --ink: var(--gray-0);
}

/* ===== tokens/night.css ===== */
/* Ink Night — light ink on dark paper. For reading at night with the
   lamp low, and for people who read better inverted.

   The same tokens as Paper, turned over. --ink here is still whatever
   draws: light on a dark ground. */

.ink-night {
  color-scheme: dark;

  --ground: var(--gray-1);
  --ink: var(--gray-14);

  /* Surfaces */
  --surface-canvas: var(--ground);
  --surface-raised: var(--ground);
  --surface-sunk: var(--gray-2);
  --surface-inverse: var(--ink);

  /* Text */
  --text-heading: var(--ink);
  --text-body: var(--ink);
  --text-secondary: var(--gray-11);
  --text-inverse: var(--ground);

  /* Non-text */
  --mark-muted: var(--gray-7);
  --rule: var(--gray-5);
  --rule-strong: var(--ink);
  --border-control: var(--ink);
  --focus-ring: var(--ink);

  /* Selection and press */
  --selected-fill: var(--ink);
  --on-selected: var(--ground);
}

/* ===== tokens/night-full.css ===== */
/* Ink Night at the full range, turned over. */

@media (monochrome) {
  .ink-night {
    --ground: var(--gray-0);
    --ink: var(--gray-15);
  }
}

.ink-night.ink-full {
  --ground: var(--gray-0);
  --ink: var(--gray-15);
}

/* ===== base.css ===== */
/* Ink — base. The smallest reset plus the accessibility floor every
   component inherits. */

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

/* Never a px font-size on :root: the scale is rem, so a person's own
   text size setting still works. */
html { -webkit-text-size-adjust: 100%; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--surface-canvas);
}

body {
  font-family: var(--font-book);
  font-size: var(--size-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  color: var(--text-body);
  font-optical-sizing: auto;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

button, input, textarea, select { font: inherit; color: inherit; }
/* hidden means hidden, whatever display a component sets. */
[hidden] { display: none !important; }
strong, b { font-weight: var(--weight-strong); }
button, [role="button"], [role="checkbox"], [role="switch"] { touch-action: manipulation; }

/* Focus: always visible, solid ink, thick enough to find at a glance. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: var(--stroke-focus) solid var(--focus-ring);
  outline-offset: 3px;
}
:where(a, button, input, textarea, select, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

::selection { background: var(--selected-fill); color: var(--on-selected); }

.ink-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* There is no reduced-motion block because there is no motion to reduce.
   tools/check-stillness.mjs keeps it that way. */

/* Forced colors: hand everything to the person's own palette. */
@media (forced-colors: active) {
  .ink-btn, .ink-chip, .ink-card, .ink-notice, .ink-input, .ink-check__box, .ink-switch__track {
    border-color: CanvasText !important;
  }
  .ink-btn--primary { background: ButtonText !important; color: ButtonFace !important; }
  .ink-chip[aria-pressed="true"], .ink-btn:active { background: Highlight !important; color: HighlightText !important; }
  :focus-visible { outline: var(--stroke-focus) solid Highlight !important; }
}

/* ===== type.css ===== */
/* Ink — type. Type is most of the interface, so it gets most of the care.
   Lora for anything read; Atkinson Hyperlegible Next for anything
   operated. */

.ink-title {
  margin: 0;
  font-family: var(--font-book);
  font-size: var(--size-title);
  font-weight: var(--weight-heading);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--text-heading);
  text-wrap: balance;
}
.ink-h1, .ink-h2, .ink-h3 {
  margin: 0;
  font-family: var(--font-book);
  font-weight: var(--weight-heading);
  line-height: var(--leading-tight);
  color: var(--text-heading);
  text-wrap: balance;
}
.ink-h1 { font-size: var(--size-h1); letter-spacing: -0.01em; }
.ink-h2 { font-size: var(--size-h2); }
.ink-h3 { font-size: var(--size-h3); }

.ink-lead { font-size: var(--size-lead); line-height: 1.5; color: var(--text-body); }
.ink-body { font-size: var(--size-body); line-height: var(--leading-body); }
.ink-secondary { color: var(--text-secondary); }
.ink-italic { font-style: italic; }

/* The device voice: controls, labels, folios. */
.ink-ui {
  font-family: var(--font-ui);
  font-size: var(--size-ui);
  font-weight: var(--weight-ui);
  line-height: var(--leading-ui);
}
.ink-caption {
  font-family: var(--font-ui);
  font-size: var(--size-caption);
  font-weight: var(--weight-ui);
  line-height: var(--leading-ui);
  color: var(--text-secondary);
}
/* Small capitals are drawn, not faked: neither face ships them, so this
   is uppercase sans, spaced out. */
.ink-caps {
  font-family: var(--font-ui);
  font-size: var(--size-label);
  font-weight: var(--weight-strong);
  line-height: var(--leading-ui);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Book prose: a measure, paragraphs indented rather than spaced, and
   hyphenation where the language allows. Ragged right, because even
   spacing reads better than a straight edge (WCAG 1.4.8). */
.ink-prose {
  max-width: var(--measure);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  hyphens: auto;
  hanging-punctuation: first;
}
.ink-prose p { margin: 0; }
.ink-prose p + p { text-indent: 1.5em; }
.ink-prose > * + :not(p) { margin-top: var(--space-5); }
.ink-prose > :not(p) + p { margin-top: var(--space-5); }

/* A drop capital, three lines deep. */
/* flow-root keeps the capital inside its own paragraph, however short. */
.ink-dropcap { display: flow-root; }
.ink-dropcap::first-letter {
  float: left;
  font-size: 4.1em;
  line-height: 0.82;
  font-weight: var(--weight-heading);
  padding: 0.06em 0.08em 0 0;
}

.ink-quote {
  margin: 0;
  padding-left: var(--space-5);
  border-left: var(--stroke-control) solid var(--rule-strong);
  font-style: italic;
}

/* Rules and section breaks. */
.ink-rule {
  border: 0;
  border-top: var(--stroke) solid var(--rule);
  margin: var(--space-6) 0;
}
.ink-rule--strong { border-top: var(--stroke-control) solid var(--rule-strong); }
.ink-dinkus {
  border: 0;
  margin: var(--space-6) 0;
  text-align: center;
  font-family: var(--font-book);
  font-size: var(--size-lead);
  line-height: 1;
  color: var(--text-body);
}
.ink-dinkus::before { content: "*\2003*\2003*"; }

.ink-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
  border-radius: 2px;
}
.ink-link:active {
  background: var(--selected-fill);
  color: var(--on-selected);
  text-decoration: none;
}

/* ===== components/icons.css ===== */
/* Ink — icons. Drawn on a 24-unit grid with a 2-unit currentColor
   stroke on whole coordinates, so at 24px every line lands on the pixel
   grid and stays crisp. Inline the SVG from src/icons/;
   it inherits the ink. */

.ink-icon {
  --icon-size: 1.5rem;
  width: var(--icon-size);
  height: var(--icon-size);
  flex: none;
  display: inline-block;
  vertical-align: middle;
}
.ink-icon--l { --icon-size: 2rem; }
.ink-icon--xl { --icon-size: 3rem; }

/* The check, as a mask, for components that draw it in their own ink. */
:root {
  --mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 L10 17.5 L19 7'/%3E%3C/svg%3E");
}

/* ===== components/actions.css ===== */
/* Ink — actions. A press is an inversion: ink fills, paper becomes ink.
   Two levels and nothing between, so it is unmistakable, and instant,
   because nothing in Ink transitions. */

.ink-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--hit);
  min-width: var(--hit);
  padding: 0 var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--size-ui);
  font-weight: var(--weight-strong);
  line-height: 1.2;
  color: var(--text-body);
  background: var(--surface-canvas);
  border: var(--stroke-control) solid var(--border-control);
  border-radius: var(--radius-s);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}
.ink-btn:active {
  background: var(--selected-fill);
  color: var(--on-selected);
}

/* One per view: the thing the page is for. */
.ink-btn--primary {
  background: var(--surface-inverse);
  color: var(--text-inverse);
}
.ink-btn--primary:active {
  background: var(--surface-canvas);
  color: var(--text-body);
}

/* A quiet action reads as a word, and still inverts when pressed. */
.ink-btn--quiet {
  border-color: transparent;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}
.ink-btn--quiet:active { text-decoration: none; }

/* An icon-only button carries its name in .ink-visually-hidden. */
.ink-btn--icon { padding: 0; width: var(--hit); }

.ink-btn--wide { display: flex; width: 100%; }

/* Disabled goes dashed, not faint: it stays readable. */
.ink-btn:disabled, .ink-btn[aria-disabled="true"] {
  border-style: dashed;
  background: var(--surface-canvas);
  color: var(--text-secondary);
  cursor: default;
}

/* Chips: one choice among a few. aria-pressed is the state; the
   inversion and the drawn check both show it. */
.ink-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--size-ui);
  font-weight: var(--weight-ui);
  line-height: 1.2;
  color: var(--text-body);
  background: var(--surface-canvas);
  border: var(--stroke-control) solid var(--border-control);
  border-radius: var(--radius-pill);
  cursor: pointer;
  user-select: none;
}
.ink-chip[aria-pressed="true"] {
  background: var(--selected-fill);
  color: var(--on-selected);
  font-weight: var(--weight-strong);
}
.ink-chip[aria-pressed="true"]::before {
  content: "";
  width: 1em;
  height: 1em;
  margin-left: calc(var(--space-1) * -1);
  background: currentColor;
  -webkit-mask: var(--mask-check) center / contain no-repeat;
  mask: var(--mask-check) center / contain no-repeat;
}

/* ===== components/reading.css ===== */
/* Ink — reading. Pages, not scroll. As in a book, long content arrives a
   page at a time, with the count in view, and it ends. */

/* A page: running head, the text, and the folio. */
.ink-page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  background: var(--surface-canvas);
  color: var(--text-body);
}

.ink-runninghead {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: var(--stroke) solid var(--rule);
  font-family: var(--font-ui);
  font-size: var(--size-label);
  font-weight: var(--weight-strong);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
/* A running head is one line: a long chapter title is cut, not wrapped. */
.ink-runninghead > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ink-runninghead > :first-child { flex: none; }

.ink-folio {
  font-family: var(--font-ui);
  font-size: var(--size-caption);
  font-weight: var(--weight-ui);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  text-align: center;
}

/* The pager: back, where you are, forward. The label is the count, and
   it is always there. */
.ink-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.ink-pager__label {
  font-family: var(--font-ui);
  font-size: var(--size-ui);
  font-weight: var(--weight-ui);
  font-variant-numeric: tabular-nums;
  color: var(--text-body);
  text-align: center;
}

/* Position in a text: a static line, drawn in ink. It changes only when
   the page turns. */
.ink-progress {
  --at: 0%;
  position: relative;
  height: 6px;
  border: var(--stroke) solid var(--border-control);
  border-radius: var(--radius-pill);
  background: var(--surface-canvas);
  overflow: hidden;
}
.ink-progress::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--at);
  background: var(--surface-inverse);
}

/* Contents: titles, dot leaders, page numbers. */
.ink-toc {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-book);
}
.ink-toc a {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-height: var(--hit);
  padding: var(--space-2) var(--space-2);
  margin: 0 calc(var(--space-2) * -1);
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-s);
}
.ink-toc a::after {
  content: "";
  order: 1;
  flex: 1 1 auto;
  min-width: var(--space-5);
  border-bottom: 2px dotted var(--mark-muted);
}
.ink-toc__page {
  order: 2;
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
}
.ink-toc a:active { background: var(--selected-fill); color: var(--on-selected); }
.ink-toc a:active::after { border-bottom-color: currentColor; }
.ink-toc a[aria-current] .ink-toc__title { font-weight: var(--weight-strong); }

/* The end of a chapter, or of anything finite. Rest, not loss. */
.ink-end {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  text-align: center;
}
.ink-end::before {
  content: "*\2003*\2003*";
  font-family: var(--font-book);
  font-size: var(--size-lead);
  line-height: 1;
}
.ink-end > * { margin: 0; }

/* ===== components/surfaces.css ===== */
/* Ink — surfaces. No shadows: depth is a rule, a border and a margin.
   A shadow lifts a card to make it louder than its neighbors, and nothing
   here needs to be louder. */

.ink-card {
  padding: var(--space-5);
  background: var(--surface-raised);
  color: var(--text-body);
  border: var(--stroke) solid var(--rule-strong);
  border-radius: var(--radius-m);
}
.ink-card--sunk {
  background: var(--surface-sunk);
  border-color: transparent;
}
.ink-card > :first-child { margin-top: 0; }
.ink-card > :last-child { margin-bottom: 0; }

/* A list of rows, as in a settings screen: one rule between each, every
   row a full touch target. */
.ink-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--stroke) solid var(--rule);
}
.ink-list > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: calc(var(--hit) + var(--space-3));
  padding: var(--space-2) 0;
  border-bottom: var(--stroke) solid var(--rule);
  font-family: var(--font-ui);
  font-size: var(--size-ui);
  font-weight: var(--weight-ui);
}
.ink-list__hint {
  display: block;
  font-size: var(--size-caption);
  color: var(--text-secondary);
}

/* ===== components/forms.css ===== */
/* Ink — forms. Every control has a 2px ink edge, a visible label and a
   state you can read without remembering what it looked like before. */

.ink-field { display: grid; gap: var(--space-2); }
.ink-label {
  font-family: var(--font-ui);
  font-size: var(--size-ui);
  font-weight: var(--weight-strong);
  color: var(--text-body);
}
.ink-hint {
  font-family: var(--font-ui);
  font-size: var(--size-caption);
  font-weight: var(--weight-ui);
  color: var(--text-secondary);
}

.ink-input {
  min-height: var(--hit);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--size-ui);
  font-weight: var(--weight-ui);
  color: var(--text-body);
  background: var(--surface-canvas);
  border: var(--stroke-control) solid var(--border-control);
  border-radius: var(--radius-s);
}
.ink-input::placeholder { color: var(--text-secondary); font-style: italic; opacity: 1; }
/* Something to look at: the edge goes dashed. No red, and no shake. */
.ink-input[aria-invalid="true"] { border-style: dashed; }

/* Checkbox: a box, and a check drawn in it when it is on. */
.ink-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--hit);
  font-family: var(--font-ui);
  font-size: var(--size-ui);
  font-weight: var(--weight-ui);
  cursor: pointer;
}
.ink-check input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ink-check__box {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  border: var(--stroke-control) solid var(--border-control);
  border-radius: var(--radius-s);
  background: var(--surface-canvas);
}
.ink-check input:checked + .ink-check__box { background: var(--selected-fill); }
.ink-check input:checked + .ink-check__box::after {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--on-selected);
  -webkit-mask: var(--mask-check) center / contain no-repeat;
  mask: var(--mask-check) center / contain no-repeat;
}
.ink-check input:focus-visible + .ink-check__box {
  outline: var(--stroke-focus) solid var(--focus-ring);
  outline-offset: 3px;
}

/* Switch: the track fills when it is on, and the word says which. */
.ink-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--hit);
  font-family: var(--font-ui);
  font-size: var(--size-ui);
  font-weight: var(--weight-ui);
  cursor: pointer;
}
.ink-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ink-switch__track {
  position: relative;
  flex: none;
  width: 52px;
  height: 30px;
  border: var(--stroke-control) solid var(--border-control);
  border-radius: var(--radius-pill);
  background: var(--surface-canvas);
}
.ink-switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: var(--stroke-control) solid var(--border-control);
  background: var(--surface-canvas);
}
.ink-switch input:checked + .ink-switch__track { background: var(--selected-fill); }
.ink-switch input:checked + .ink-switch__track::after {
  left: auto;
  right: 3px;
  border-color: var(--on-selected);
  background: var(--on-selected);
}
.ink-switch input:focus-visible + .ink-switch__track {
  outline: var(--stroke-focus) solid var(--focus-ring);
  outline-offset: 3px;
}
.ink-switch__state {
  min-width: 2.2em;
  font-weight: var(--weight-strong);
}

/* ===== components/feedback.css ===== */
/* Ink — feedback. A notice sits in the page where the person caused it,
   and stays there until they move on. It never floats, never times out
   and never announces itself (an Ahimsa law). */

.ink-notice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  align-items: start;
  padding: var(--space-4) var(--space-5);
  background: var(--surface-canvas);
  color: var(--text-body);
  border: var(--stroke-control) solid var(--border-control);
  border-radius: var(--radius-m);
  font-family: var(--font-ui);
  font-size: var(--size-ui);
  font-weight: var(--weight-ui);
  line-height: var(--leading-ui);
}
.ink-notice__glyph { line-height: 0; padding-top: 1px; }
.ink-notice__actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
/* Something to look at: dashed, never alarm. */
.ink-notice--note { border-style: dashed; }