/* ==========================================================================
   InnoCMS — the proofing desk
   Chrome is sans. Content is serif. Provenance is mono.
   Mobile-first: base styles are the phone; min-width queries add the rail.
   ========================================================================== */

/* --- Typefaces (self-hosted; no external requests) ----------------------- */

@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/newsreader-var.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/newsreader-var-italic.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Public Sans';
  src: url('fonts/public-sans-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
  /* Cool paper, not warm cream. */
  --paper: #f5f7f6;
  --surface: #ffffff;
  --ink: #16181d;
  --slate: #5b6470;
  --hairline: #e1e4e2;
  --hairline-strong: #c8cdc9;

  /* The editor's pen. Reserved for the revision mark and diff deletions. */
  --accent: #a6321f;
  --accent-wash: #fbf0ee;
  --accent-edge: #eccec8;
  --added: #2e7d46;
  --added-wash: #eef6f1;
  --added-edge: #cfe4d8;

  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body: 'Newsreader', Georgia, 'Times New Roman', serif;
  --chrome: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --provenance: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Fixed rem steps — product UI, not fluid chrome. */
  --step-xs: 0.75rem;
  --step-sm: 0.8125rem;
  --step-md: 0.875rem;

  --gap-1: 0.25rem;
  --gap-2: 0.5rem;
  --gap-3: 0.75rem;
  --gap-4: 1rem;
  --gap-5: 1.5rem;
  --gap-6: 2rem;
  --gap-7: 3rem;
  --gap-8: 4.5rem;

  --measure: 64ch;
  --radius: 6px;
  --rule: 1px solid var(--hairline);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --speed: 180ms;

  --z-sticky: 10;
  --z-skip: 100;
}

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

/* An author `display` beats the UA stylesheet's [hidden] rule, which silently
   un-hides anything given a display value. Restore the attribute's meaning. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  /* Nothing may push the page sideways. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--chrome);
  font-size: var(--step-md);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

img { max-width: 100%; height: auto; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-skip);
  background: var(--ink);
  color: var(--paper);
  padding: var(--gap-3) var(--gap-4);
  font-size: var(--step-sm);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { left: var(--gap-3); top: var(--gap-3); }

/* --- Masthead ------------------------------------------------------------ */

.masthead {
  background: var(--surface);
  border-bottom: var(--rule);
  padding-top: env(safe-area-inset-top);
}

.masthead-inner {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--gap-2) max(var(--gap-4), env(safe-area-inset-right))
           var(--gap-2) max(var(--gap-4), env(safe-area-inset-left));
}

.wordmark {
  display: flex;
  align-items: baseline;
  gap: var(--gap-2);
  text-decoration: none;
  min-height: 44px;
  align-items: center;
  flex-wrap: wrap;
}
.wordmark-name {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 40;
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}
/* The sublabel is the first thing to go on a narrow screen. */
.wordmark-sub {
  display: none;
  font-family: var(--provenance);
  font-size: var(--step-xs);
  color: var(--slate);
  letter-spacing: 0.02em;
}

.spacer { flex: 1 1 auto; }

.who {
  font-family: var(--provenance);
  font-size: var(--step-xs);
  color: var(--slate);
  max-width: 10ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inline-form { display: inline; margin: 0; }

/* --- Page shell ---------------------------------------------------------- */

.column {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--gap-5) max(var(--gap-4), env(safe-area-inset-right)) var(--gap-8)
           max(var(--gap-4), env(safe-area-inset-left));
}
.column--wide { max-width: 72rem; }
/* The desk is a list, not prose — the 64ch reading measure is too tight for a
   title, its provenance line and the New document action to share a row. */
.column--desk { max-width: 52rem; }

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-2);
  min-height: 44px;
  padding: 0 var(--gap-4);
  font-family: var(--chrome);
  font-size: var(--step-md);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--speed) var(--ease),
              background-color var(--speed) var(--ease);
}
.btn:hover { border-color: var(--slate); }
.btn:active { background: var(--paper); }

.btn--primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn--primary:hover { background: #23262d; border-color: #23262d; }

.btn--quiet {
  background: transparent;
  border-color: transparent;
  color: var(--slate);
  padding: 0 var(--gap-2);
}
.btn--quiet:hover { color: var(--ink); border-color: var(--hairline-strong); }

.btn--sm { font-size: var(--step-sm); padding: 0 var(--gap-3); }

.btn.is-working { pointer-events: none; opacity: 0.75; }

/* --- Flash + banners ----------------------------------------------------- */

.flash {
  max-width: var(--measure);
  margin: var(--gap-4) auto 0;
  padding: 0 var(--gap-4);
  display: grid;
  gap: var(--gap-2);
}
.flash-item {
  font-size: var(--step-sm);
  padding: var(--gap-3) var(--gap-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
}
.flash-item::before {
  font-family: var(--provenance);
  font-weight: 500;
  margin-right: var(--gap-2);
}
.flash-item.ok { background: var(--added-wash); border-color: var(--added-edge); }
.flash-item.ok::before { content: '✓'; color: var(--added); }
.flash-item.error { background: var(--accent-wash); border-color: var(--accent-edge); }
.flash-item.error::before { content: '!'; color: var(--accent); }

.banner {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--gap-4);
  font-size: var(--step-sm);
  margin-bottom: var(--gap-5);
}
.banner-title {
  font-family: var(--chrome);
  font-weight: 600;
  font-size: var(--step-md);
  margin: 0 0 var(--gap-2);
}
.banner p { margin: 0 0 var(--gap-2); }
.banner p:last-child { margin-bottom: 0; }
.banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2);
  margin-top: var(--gap-3);
}
.banner--conflict { background: var(--accent-wash); border-color: var(--accent-edge); }

/* --- The desk (index) ---------------------------------------------------- */

.desk-head {
  display: flex;
  align-items: baseline;
  gap: var(--gap-3);
  flex-wrap: wrap;
  margin-bottom: var(--gap-5);
}
.desk-title {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 32;
  font-weight: 600;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
.desk-count {
  font-family: var(--provenance);
  font-size: var(--step-xs);
  color: var(--slate);
}

.docs {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--rule);
}
.docs > li { border-bottom: var(--rule); }

.doc-row {
  display: block;
  text-decoration: none;
  padding: var(--gap-4) var(--gap-2);
  margin: 0 calc(-1 * var(--gap-2));
  transition: background-color var(--speed) var(--ease);
}
.doc-row:hover { background: var(--surface); }
.doc-row:hover .doc-row-title { text-decoration: underline; text-underline-offset: 3px; }

.doc-row-title {
  display: block;
  font-family: var(--display);
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 20;
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: var(--gap-2);
  text-wrap: balance;
}

/* Provenance line: mono, wraps to its own rows on a phone. */
.provenance {
  font-family: var(--provenance);
  font-size: var(--step-xs);
  color: var(--slate);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-1) var(--gap-2);
  line-height: 1.5;
}
.provenance .sep { color: var(--hairline-strong); }
.provenance .ver { color: var(--accent); font-weight: 500; }

.empty {
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius);
  padding: var(--gap-6) var(--gap-4);
  text-align: center;
  background: var(--surface);
}
.empty-title {
  font-family: var(--display);
  font-variation-settings: 'opsz' 24;
  font-weight: 600;
  font-size: 1.25rem;
  margin: 0 0 var(--gap-2);
}
.empty p {
  color: var(--slate);
  font-size: var(--step-sm);
  margin: 0 auto var(--gap-4);
  max-width: 40ch;
}

/* --- Document layout ----------------------------------------------------- */

.doc-layout { display: block; }
.doc-main { min-width: 0; }

.dateline {
  font-family: var(--provenance);
  font-size: var(--step-xs);
  color: var(--slate);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--gap-3);
}

.headline {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 44;
  font-weight: 600;
  /* Content, not chrome — a headline may scale with the viewport. */
  font-size: clamp(1.875rem, 1.45rem + 2.1vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 var(--gap-4);
  text-wrap: balance;
}

.byline {
  font-family: var(--provenance);
  font-size: var(--step-xs);
  color: var(--slate);
  display: grid;
  gap: var(--gap-1);
  padding-bottom: var(--gap-5);
  border-bottom: var(--rule);
  margin-bottom: var(--gap-5);
}
.byline b { color: var(--ink); font-weight: 500; }

/* --- Reading prose ------------------------------------------------------- */

.prose {
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  text-wrap: pretty;
}
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 1.15em; }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 24;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 1.9em 0 0.5em;
  text-wrap: balance;
}
.prose h1 { font-size: 1.5rem; }
.prose h2 { font-size: 1.3125rem; }
.prose h3 { font-size: 1.125rem; }
.prose h4, .prose h5, .prose h6 { font-size: 1rem; }
.prose a { color: var(--accent); text-underline-offset: 2px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.prose li { margin-bottom: 0.35em; }
.prose blockquote {
  margin: 1.4em 0;
  padding: 0 0 0 1.1em;
  border-left: 1px solid var(--hairline-strong);
  color: var(--slate);
  font-style: italic;
}
.prose hr { border: 0; border-top: var(--rule); margin: 2em 0; }
.prose code {
  font-family: var(--provenance);
  font-size: 0.875em;
  background: var(--paper);
  border: var(--rule);
  border-radius: 3px;
  padding: 0.1em 0.35em;
}
/* Long code scrolls inside itself, never moving the page. */
.prose pre {
  font-family: var(--provenance);
  font-size: 0.8125rem;
  line-height: 1.6;
  background: var(--surface);
  border: var(--rule);
  border-radius: var(--radius);
  padding: var(--gap-4);
  overflow-x: auto;
  margin: 0 0 1.15em;
}
.prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }
/* Screenshots pasted into a document. */
.prose img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.4em 0;
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
/* A wide table scrolls inside itself. `display: block` is what makes the
   table its own scroll container without a wrapper element — Markdown output
   gives us no place to put one. */
.prose table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-family: var(--chrome);
  font-size: var(--step-sm);
  margin: 0 0 1.15em;
}
.prose th, .prose td {
  text-align: left;
  padding: var(--gap-2) var(--gap-3);
  border-bottom: var(--rule);
  white-space: nowrap;
}
.prose th { font-weight: 600; }
.prose .table-scroll { overflow-x: auto; margin: 0 0 1.15em; }

/* --- THE REVISION SPINE -------------------------------------------------- *
   Phone: a horizontal, swipeable strip above the document.
   Desktop: a vertical rail beside it. Same markup, different axis.
   -------------------------------------------------------------------------- */

.spine { margin: 0 0 var(--gap-5); min-width: 0; }

.spine-head {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  margin-bottom: var(--gap-2);
}
.spine-label {
  font-family: var(--provenance);
  font-size: var(--step-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
}
/* Small label, full-size tap target: the box reaches 44px without the text
   growing or an underline drifting away from it. */
.spine-all {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-left: var(--gap-2);
  font-family: var(--chrome);
  font-size: var(--step-xs);
  color: var(--slate);
  text-decoration: underline;
  text-decoration-color: var(--hairline-strong);
  text-underline-offset: 3px;
}
.spine-all:hover { color: var(--ink); text-decoration-color: var(--slate); }

.spine-track {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--gap-2);
  display: flex;
  /* Plain `row`, deliberately. `row-reverse` overflows to the left, and that
     overflow is not reachable by scrolling — it silently strands every tick
     past the second one on a phone. Newest is first in the DOM instead, so the
     current version is what you see before you swipe back through time. */
  flex-direction: row;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* Same scroll-shadow trick as the galley: shows there are older revisions
     off to the right, and clears once you've swiped to the oldest. */
  background-image:
    linear-gradient(to left, var(--paper), var(--paper)),
    linear-gradient(to left, rgba(22, 24, 29, 0.10), rgba(22, 24, 29, 0));
  background-position: right center, right center;
  background-size: 22px 100%, 22px 100%;
  background-repeat: no-repeat;
  background-attachment: local, scroll;
}

.tick {
  position: relative;
  flex: 0 0 auto;
  min-width: 8.5rem;
  max-width: 11rem;
  scroll-snap-align: start;
  padding: var(--gap-4) var(--gap-3) 0 0;
}
/* The rule the ticks sit on. */
.tick::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--hairline-strong);
}

.tick-mark {
  position: absolute;
  top: 0;
  left: 0;
  width: 13px;
  height: 13px;
  display: grid;
  place-items: center;
}
.tick-mark::after {
  content: '';
  width: 7px;
  height: 7px;
  border: 1px solid var(--slate);
  background: var(--paper);
  border-radius: 50%;
}
/* The proofreader's lozenge: current version, in the editor's pen. */
.tick.is-current .tick-mark::after {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 1px;
  background: var(--accent);
  transform: rotate(45deg);
}

.tick-link {
  display: block;
  text-decoration: none;
  min-height: 44px;
  padding-right: var(--gap-2);
}
.tick-ver {
  font-family: var(--provenance);
  font-size: var(--step-sm);
  font-weight: 500;
  color: var(--ink);
  display: block;
}
.tick.is-current .tick-ver { color: var(--accent); }
.tick-who,
.tick-when {
  font-family: var(--provenance);
  font-size: var(--step-xs);
  color: var(--slate);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tick-link:hover .tick-ver { text-decoration: underline; text-underline-offset: 3px; }
/* The version you are actually looking at. */
.tick-link[aria-current] .tick-ver {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* --- The filing tree ----------------------------------------------------- *
   Shares the spine's structure: a horizontal strip on a phone, a vertical rail
   on desktop, from one piece of markup.
   -------------------------------------------------------------------------- */

.filing { margin: 0 0 var(--gap-5); min-width: 0; }

.filing-head {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  margin-bottom: var(--gap-2);
}

.filing-list {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--gap-2);
  display: flex;
  flex-direction: row;
  gap: var(--gap-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  background-image:
    linear-gradient(to left, var(--paper), var(--paper)),
    linear-gradient(to left, rgba(22, 24, 29, 0.10), rgba(22, 24, 29, 0));
  background-position: right center, right center;
  background-size: 22px 100%, 22px 100%;
  background-repeat: no-repeat;
  background-attachment: local, scroll;
}
.filing-row { flex: 0 0 auto; }

.filing-item {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  min-height: 44px;
  padding: 0 var(--gap-3);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
  font-family: var(--chrome);
  font-size: var(--step-sm);
  white-space: nowrap;
  transition: border-color var(--speed) var(--ease);
}
.filing-item:hover { border-color: var(--slate); }
.filing-item.is-current {
  border-color: var(--accent);
  background: var(--accent-wash);
}
.filing-item.is-current .filing-name { color: var(--accent); font-weight: 600; }

.filing-name--quiet { color: var(--slate); }
.filing-count {
  font-family: var(--provenance);
  font-size: var(--step-xs);
  color: var(--slate);
}
.filing-item.is-current .filing-count { color: var(--accent); }

/* Where a document sits, on the desk listing. */
.filed-in { color: var(--accent); }

/* --- Category management ------------------------------------------------- */

.cat-new { margin-bottom: var(--gap-6); }
.cat-new-row { display: flex; flex-wrap: wrap; gap: var(--gap-2); }
.cat-input {
  flex: 1 1 14rem;
  min-width: 0;
  font-family: var(--chrome);
  font-size: 1rem;
  min-height: 44px;
  padding: 0 var(--gap-3);
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  color: var(--ink);
}
.cat-input:hover { border-color: var(--slate); }

.cat-list {
  list-style: none;
  margin: 0 0 var(--gap-5);
  padding: 0;
  border-top: var(--rule);
}
.cat-item {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  flex-wrap: wrap;
  padding: var(--gap-3) 0;
  border-bottom: var(--rule);
}
.cat-item-text { flex: 1 1 12rem; min-width: 0; }
/* A primary navigation target, so it earns a full-height tap area rather than
   just the height of its text. */
.cat-item-name {
  font-family: var(--display);
  font-variation-settings: 'opsz' 20;
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.cat-item-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.cat-item-meta {
  font-family: var(--provenance);
  font-size: var(--step-xs);
  color: var(--slate);
}
.cat-unfiled {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-2) var(--gap-3);
  font-family: var(--provenance);
  font-size: var(--step-xs);
  color: var(--slate);
  margin: 0 0 var(--gap-5);
}

/* Underlined, not just coloured: this sits inside a run of text, so colour
   alone would be the only thing marking it as a link. */
.dateline-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--accent-edge);
}
.dateline-link:hover { text-decoration-color: var(--accent); }

.input-select {
  width: 100%;
  font-family: var(--chrome);
  font-size: 1rem;
  min-height: 44px;
  padding: 0 var(--gap-3);
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  color: var(--ink);
}
.input-select:hover { border-color: var(--slate); }
.field-note {
  font-family: var(--provenance);
  font-size: var(--step-xs);
  color: var(--slate);
  margin: var(--gap-2) 0 0;
}

/* --- History (the spine, expanded) --------------------------------------- */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
/* The continuous rule the whole history hangs from. */
.timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--hairline-strong);
}

.entry {
  position: relative;
  padding: 0 0 var(--gap-6) var(--gap-6);
}
.entry:last-child { padding-bottom: 0; }

.entry-mark {
  position: absolute;
  left: 0;
  top: 4px;
  width: 13px;
  height: 13px;
  display: grid;
  place-items: center;
}
.entry-mark::after {
  content: '';
  width: 7px;
  height: 7px;
  border: 1px solid var(--slate);
  background: var(--paper);
  border-radius: 50%;
}
.entry.is-current .entry-mark::after {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 1px;
  background: var(--accent);
  transform: rotate(45deg);
}

.entry-ver {
  font-family: var(--provenance);
  font-size: var(--step-sm);
  font-weight: 500;
  color: var(--slate);
  display: inline-block;
  margin-bottom: var(--gap-1);
}
.entry.is-current .entry-ver { color: var(--accent); }

.entry-title {
  font-family: var(--display);
  font-variation-settings: 'opsz' 20;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
  margin: 0 0 var(--gap-1);
  text-wrap: balance;
}
.entry-meta {
  font-family: var(--provenance);
  font-size: var(--step-xs);
  color: var(--slate);
  margin: 0 0 var(--gap-3);
}
/* Flags the one thing a timeline of same-titled revisions can't show. */
.entry-note {
  font-family: var(--provenance);
  font-size: var(--step-xs);
  color: var(--accent);
  margin: 0 0 var(--gap-1);
}

/* Actions wrap rather than crowding one tap-dense row. */
.entry-actions { display: flex; flex-wrap: wrap; gap: var(--gap-2); }
.entry-actions form { margin: 0; }

/* --- Galley (diff as tracked changes) ------------------------------------ */

.galley-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2) var(--gap-4);
  font-family: var(--provenance);
  font-size: var(--step-xs);
  color: var(--slate);
  margin-bottom: var(--gap-4);
}
.galley-key { display: inline-flex; align-items: center; gap: var(--gap-2); }
.galley-key i { font-style: normal; }
.galley-key .del-key { color: var(--accent); text-decoration: line-through; }
.galley-key .add-key {
  color: var(--added);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.galley {
  border: var(--rule);
  border-radius: var(--radius);
  /* The galley scrolls inside its own frame. The right-edge shadow says so,
     and disappears once you reach the end: the first layer is a cover pinned
     to the content (background-attachment: local), the second is the shadow
     pinned to the frame. */
  background-color: var(--surface);
  background-image:
    linear-gradient(to left, var(--surface), var(--surface)),
    linear-gradient(to left, rgba(22, 24, 29, 0.10), rgba(22, 24, 29, 0));
  background-position: right center, right center;
  background-size: 22px 100%, 22px 100%;
  background-repeat: no-repeat;
  background-attachment: local, scroll;
  overflow-x: auto;
  padding: var(--gap-3) 0;
}
.galley-line {
  font-family: var(--provenance);
  font-size: 0.8125rem;
  line-height: 1.7;
  white-space: pre;
  padding: 0 var(--gap-4);
  min-width: max-content;
}
.galley-line.del {
  color: var(--accent);
  background: var(--accent-wash);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.galley-line.add {
  color: var(--added);
  background: var(--added-wash);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
/* Hunk markers stay, quietly — they say where in the document you are. */
.galley-line.meta {
  color: var(--slate);
  font-size: var(--step-xs);
  letter-spacing: 0.04em;
  margin: var(--gap-4) 0 var(--gap-2);
  padding-top: var(--gap-2);
  border-top: var(--rule);
}
.galley-line.meta:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.galley-line.same { color: var(--slate); }
.galley-empty {
  font-family: var(--chrome);
  font-size: var(--step-sm);
  color: var(--slate);
  padding: var(--gap-4);
  text-align: center;
}

/* --- Editor -------------------------------------------------------------- */

.field { margin-bottom: var(--gap-5); }
.field-head {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  margin-bottom: var(--gap-2);
}
.field-head .field-label { margin-bottom: 0; }
.field-label {
  display: block;
  font-family: var(--chrome);
  font-size: var(--step-sm);
  font-weight: 600;
  margin-bottom: var(--gap-2);
}
.field-hint { font-weight: 400; color: var(--slate); font-size: var(--step-xs); }

.input-title,
.input-body {
  width: 100%;
  display: block;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  color: var(--ink);
  /* 16px minimum: anything smaller makes iOS zoom on focus. */
  font-size: 1rem;
  padding: var(--gap-3);
  transition: border-color var(--speed) var(--ease);
}
.input-title:hover, .input-body:hover { border-color: var(--slate); }

/* The title behaves as a real headline while you type it. */
.input-title {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 32;
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.input-body {
  font-family: var(--provenance);
  line-height: 1.7;
  min-height: 46vh;
  resize: vertical;
}
.input-body.is-dropping {
  border-color: var(--accent);
  background: var(--accent-wash);
}

/* --- Formatting toolbar -------------------------------------------------- *
   Scrolls sideways on a phone rather than wrapping into a tall block that
   pushes the writing area off screen.
   -------------------------------------------------------------------------- */

.toolbar {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  margin-bottom: var(--gap-2);
  padding-bottom: var(--gap-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  background-image:
    linear-gradient(to left, var(--paper), var(--paper)),
    linear-gradient(to left, rgba(22, 24, 29, 0.10), rgba(22, 24, 29, 0));
  background-position: right center, right center;
  background-size: 22px 100%, 22px 100%;
  background-repeat: no-repeat;
  background-attachment: local, scroll;
}
.toolbar-group { display: flex; gap: var(--gap-1); flex: 0 0 auto; }
.toolbar .spacer { flex: 1 1 auto; min-width: var(--gap-2); }

.tool {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--gap-2);
  font-family: var(--chrome);
  font-size: var(--step-sm);
  line-height: 1;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--speed) var(--ease),
              background-color var(--speed) var(--ease);
}
.tool:hover { border-color: var(--slate); }
.tool:active { background: var(--paper); }
.tool--wide { padding: 0 var(--gap-3); }
.tool[aria-pressed='true'] {
  background: var(--accent-wash);
  border-color: var(--accent);
  color: var(--accent);
}

/* --- The rich editing surface -------------------------------------------- */

.editor-panes { display: block; }

.rich {
  min-height: 46vh;
  padding: var(--gap-4);
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  /* 16px floor: anything smaller makes iOS zoom when the caret lands. */
  font-size: 1.0625rem;
  overflow-wrap: break-word;
}
.rich:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rich.is-dropping { border-color: var(--accent); background: var(--accent-wash); }
.rich > :first-child { margin-top: 0; }
.rich img { cursor: pointer; }
.rich img.is-selected { outline: 2px solid var(--accent); outline-offset: 2px; }
/* An empty editor should say so rather than looking broken. */
.rich:empty::before {
  content: 'Write here. Paste a screenshot straight in, or use the buttons above.';
  color: #767f88;
}

/* Source view swaps in for the rich surface. */
.editor-panes .input-body { display: none; }
.is-source .rich { display: none; }
.is-source .editor-panes .input-body { display: block; }

/* Appears only while the caret is in a table, or an image is selected. Marked
   by its label rather than a coloured edge. */
.toolbar--contextual {
  margin-top: calc(-1 * var(--gap-1));
  padding-top: var(--gap-2);
  border-top: var(--rule);
}
.toolbar-label {
  font-family: var(--provenance);
  font-size: var(--step-xs);
  color: var(--accent);
  flex: 0 0 auto;
  align-self: center;
}

.banner--draft { background: var(--surface); border-color: var(--accent-edge); }

.editor-status {
  font-family: var(--provenance);
  font-size: var(--step-xs);
  color: var(--slate);
  margin: var(--gap-2) 0 0;
  min-height: 1.4em;
}
.editor-status.is-error { color: var(--accent); }
.input-title::placeholder,
.input-body::placeholder { color: #767f88; }

/* Save stays reachable on a long document. */
.action-bar {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  background: var(--paper);
  border-top: var(--rule);
  margin: 0 calc(-1 * var(--gap-4));
  padding: var(--gap-3) var(--gap-4) calc(var(--gap-3) + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: var(--gap-3);
}
.action-bar .btn { flex: 1 1 auto; }
.action-note {
  display: none;
  font-family: var(--provenance);
  font-size: var(--step-xs);
  color: var(--slate);
}

/* --- Sign in ------------------------------------------------------------- */

.signin {
  min-height: 76vh;
  display: grid;
  place-items: center;
  padding: var(--gap-6) var(--gap-4);
}
.signin-inner { width: 100%; max-width: 26rem; }
.signin-mark {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 48;
  font-weight: 600;
  font-size: 2.5rem;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 0 var(--gap-3);
}
.signin-rule { width: 3rem; height: 2px; background: var(--accent); margin-bottom: var(--gap-4); }
.signin-blurb {
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--slate);
  margin: 0 0 var(--gap-6);
  max-width: 34ch;
}
.signin .btn { width: 100%; }
/* One button per enabled identity provider, stacked. */
.signin-providers { display: grid; gap: var(--gap-3); }
.signin-note {
  font-family: var(--provenance);
  font-size: var(--step-xs);
  color: var(--slate);
  margin-top: var(--gap-4);
  line-height: 1.6;
}
.dev-form { display: grid; gap: var(--gap-3); }
.dev-form input {
  width: 100%;
  font-family: var(--chrome);
  font-size: 1rem;
  min-height: 44px;
  padding: 0 var(--gap-3);
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  color: var(--ink);
}
.dev-flag {
  font-family: var(--provenance);
  font-size: var(--step-xs);
  color: var(--accent);
  background: var(--accent-wash);
  border: 1px solid var(--accent-edge);
  border-radius: var(--radius);
  padding: var(--gap-2) var(--gap-3);
  margin-top: var(--gap-4);
}

/* --- Notice (errors) ----------------------------------------------------- */

.notice {
  min-height: 68vh;
  display: grid;
  place-items: center;
  padding: var(--gap-6) var(--gap-4);
  text-align: center;
}
.notice-inner { max-width: 34rem; }
.notice-code {
  font-family: var(--provenance);
  font-size: var(--step-xs);
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: var(--gap-3);
}
.notice-message {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 30;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 var(--gap-5);
  text-wrap: balance;
}

/* --- Motion -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Enhancement: tablet
   ========================================================================== */

@media (min-width: 34rem) {
  .wordmark-sub { display: block; }
  .who { max-width: 22ch; }
  .action-bar { justify-content: flex-end; }
  .action-bar .btn { flex: 0 0 auto; }
  .action-note { display: block; margin-right: auto; }
  .desk-title { font-size: 2rem; }
}

/* ==========================================================================
   Enhancement: desktop — the spine becomes a left rail
   ========================================================================== */

@media (min-width: 62rem) {
  .doc-layout {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: var(--gap-7);
    align-items: start;
    max-width: 60rem;
    margin: 0 auto;
  }

  .spine {
    position: sticky;
    top: var(--gap-5);
    margin: 0;
    /* Long histories scroll within the rail. */
    max-height: calc(100vh - var(--gap-8));
    overflow-y: auto;
  }

  .spine-track {
    flex-direction: column;
    overflow-x: visible;
    padding: 0;
    scroll-snap-type: none;
  }

  .tick {
    min-width: 0;
    max-width: none;
    width: 100%;
    padding: 0 0 var(--gap-4) var(--gap-5);
  }
  .tick:last-child { padding-bottom: 0; }
  /* The rule flips from horizontal to vertical. */
  .tick::before {
    top: 0;
    bottom: 0;
    left: 6px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .tick:first-child::before { top: 6px; }
  .tick:last-child::before { bottom: auto; height: 100%; }
  .tick-link { min-height: 0; }

  /* The filing tree becomes a vertical rail, hanging off a rule like the
     spine so the two rails read as the same object in different modes. */
  .filing { position: sticky; top: var(--gap-5); margin: 0; }
  .filing-list {
    flex-direction: column;
    gap: 0;
    overflow-x: visible;
    padding: 0;
    background-image: none;
    border-left: 1px solid var(--hairline-strong);
  }
  .filing-row { width: 100%; }
  .filing-item {
    width: 100%;
    justify-content: space-between;
    border: 0;
    border-radius: 0;
    background: transparent;
    margin-left: -1px;
    border-left: 1px solid transparent;
    padding: var(--gap-2) var(--gap-3);
    min-height: 0;
    white-space: normal;
  }
  .filing-item:hover { border-left-color: var(--slate); background: var(--surface); }
  .filing-item.is-current {
    background: transparent;
    border-left-color: var(--accent);
  }

  /* Room to wrap, so the whole toolbar is visible at once instead of scrolling. */
  .toolbar {
    flex-wrap: wrap;
    overflow-x: visible;
    background-image: none;
    row-gap: var(--gap-2);
  }

  .column--doc { max-width: none; padding-left: var(--gap-6); padding-right: var(--gap-6); }
  .doc-main { max-width: var(--measure); }
  .prose { font-size: 1.1875rem; }
  .headline { margin-bottom: var(--gap-5); }

  .action-bar {
    position: static;
    margin: 0;
    padding: var(--gap-4) 0 0;
  }
}

@media (min-width: 75rem) {
  .doc-layout { grid-template-columns: 15rem minmax(0, 1fr); max-width: 66rem; }
}