/* Margin. Tokens from DESIGN.md: colour means authorship or part of speech, nothing else. */
@layer reset, base, components, utilities;

@font-face { font-family: "Quattro"; src: url("/assets/iAWriterQuattroS-Regular-3f726b00.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Quattro"; src: url("/assets/iAWriterQuattroS-Italic-cc8207ad.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Quattro"; src: url("/assets/iAWriterQuattroS-Bold-c82883f9.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Quattro"; src: url("/assets/iAWriterQuattroS-BoldItalic-80982697.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Writer Mono"; src: url("/assets/iAWriterMonoS-Regular-e77836ba.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Writer Mono"; src: url("/assets/iAWriterMonoS-Bold-844fdceb.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* Light or dark is the page's colour scheme: the device's ("light dark"), or the one the reader
   chose in Settings > Appearance, which the layout writes on <html> as data-theme. Each colour token
   is written once, its light value then its dark, and light-dark() picks by the scheme. */
:root { color-scheme: light dark; }
:root[data-theme=light] { color-scheme: light; }
:root[data-theme=dark] { color-scheme: dark; }

:root {
  /* Basecamp's contrast: a white sheet on a warm desk. In the dark, as HEY, Basecamp and Fizzy do
     it (history/research/2026-10-06-dark-mode-37signals.md): a cool slate night, not a brown one;
     height is lightness, the desk darkest, the sheet a step lighter and what lies on the sheet (a
     small page, a binder, a menu, a dialog) a step lighter again, each edged with a hairline where
     the light mode has a shadow; words a warm cream, HEY's, never pure white. */
  --paper: light-dark(oklch(99.6% 0.002 85), oklch(24.5% 0.022 248));
  --desk: light-dark(oklch(95.5% 0.017 82), oklch(20% 0.02 245));
  /* The papers a paper is drawn on (Paper::LOOKS, looks.css): an index card's stock, a legal pad's
     yellow, a steno pad's green; the faint blue of their rules and the red of their margin lines. */
  --card-stock: light-dark(oklch(96.5% 0.03 85), oklch(27% 0.025 70));
  --legal-pad: light-dark(oklch(95.5% 0.075 102), oklch(28% 0.04 100));
  --steno-pad: light-dark(oklch(96.5% 0.03 155), oklch(26.5% 0.025 165));
  --paper-rule: light-dark(oklch(80% 0.055 238), oklch(40% 0.045 240));
  --paper-margin: light-dark(oklch(72% 0.12 22), oklch(50% 0.1 22));
  --raised: light-dark(oklch(99.6% 0.002 85), oklch(28.5% 0.022 250));
  --ink: light-dark(oklch(22% 0.01 60), oklch(93.5% 0.006 70));
  --ink-soft: light-dark(oklch(48% 0.01 60), oklch(73% 0.012 245));
  --rule: light-dark(oklch(86% 0.01 85), oklch(35% 0.02 250));
  --accent: light-dark(oklch(78% 0.16 85), oklch(82% 0.14 85));
  /* The New pill and other things made in the accent: pale in the light, the accent itself in the dark. */
  --accent-soft: light-dark(oklch(88% 0.09 85), oklch(80% 0.13 85));
  --accent-wash: color-mix(in oklab, var(--accent) 30%, transparent);
  /* Shadow and the dim behind a dialog: the same warm dark, made fainter or stronger. */
  --lch-shade: 10% 0.02 60;
  --backdrop: oklch(var(--lch-shade) / 0.3);
  /* In the dark a shadow is the night's own black, and a paper's edge on the pile a glint of light. */
  --lch-night: 0% 0 0;
  --lch-glint: 100% 0 0;
  /* A code to scan needs a white ground in either mode, or a camera cannot read it. */
  --scan-ground: oklch(100% 0 0);
  /* Words on the accent (the New pill, a count): always dark, since the accent is light in both modes. */
  --on-accent: oklch(22% 0.01 60);
  --caret: oklch(68% 0.16 232); /* iA Writer's caret: the one control that is blue */

  /* Notion's colours, for coloured words and callouts. The one place colour decorates (Joey, 2026-10-04). */
  --c-gray: light-dark(oklch(52% 0.01 60), oklch(70% 0.01 60));
  --c-brown: light-dark(oklch(50% 0.06 50), oklch(70% 0.06 50));
  --c-orange: light-dark(oklch(60% 0.15 55), oklch(75% 0.13 55));
  --c-yellow: light-dark(oklch(62% 0.13 85), oklch(82% 0.12 85));
  --c-green: light-dark(oklch(52% 0.11 150), oklch(74% 0.11 150));
  --c-blue: light-dark(oklch(52% 0.13 245), oklch(74% 0.11 245));
  --c-purple: light-dark(oklch(52% 0.14 300), oklch(74% 0.11 300));
  --c-pink: light-dark(oklch(57% 0.16 350), oklch(76% 0.12 350));
  --c-red: light-dark(oklch(55% 0.18 25), oklch(72% 0.14 25));

  /* Ballpoint inks, for circles and underlines. */
  --ink-blue: light-dark(oklch(44% 0.19 262), oklch(72% 0.14 255));
  --ink-black: light-dark(oklch(28% 0.02 260), oklch(88% 0.01 260));
  --ink-red: light-dark(oklch(50% 0.19 25), oklch(72% 0.15 25));
  --ink-green: light-dark(oklch(46% 0.13 150), oklch(74% 0.12 150));
  /* How strongly a ballpoint mark shows: a little more in the dark (--dark is 1 there, below). */
  --ring-strength: calc(0.72 + 0.08 * var(--dark, 0));

  --font: "Quattro", ui-serif, Georgia, serif;
  --mono: "Writer Mono", ui-monospace, Menlo, monospace;
  --body-size: 18px;
  --measure: 68ch;
  --inline-space: 1ch;
  --block-space: 1rem;
  --tooth: 6px;
  --shadow: 0 1px 0 var(--rule), 0 8px 24px -16px light-dark(oklch(var(--lch-shade) / 0.25), oklch(var(--lch-night) / 0.6));
  /* In the dark a sheet is edged all round, since a shadow does not show on a dark desk. */
  --sheet-edge: light-dark(transparent, oklch(31% 0.022 250));
}

/* The one number that changes in the dark, for --ring-strength: dark when chosen, or when the
   device is and nothing else was chosen. */
:root[data-theme=dark] { --dark: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) { --dark: 1; } }

@media (max-width: 60ch) { :root { --body-size: 17px; } }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, ol, ul, figure { margin: 0; }
  ol, ul { padding: 0; list-style: none; }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
  input { font: inherit; color: inherit; }
  a { color: inherit; }
}

@layer base {
  html { background: var(--desk); color: var(--ink); -webkit-text-size-adjust: 100%; }
  body {
    font-family: var(--font); font-size: var(--body-size); line-height: 1.55;
    min-height: 100dvh; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  }
  code { font-family: var(--mono); font-size: 0.9em; }
  strong { font-weight: 700; }

  .masthead {
    display: flex; align-items: baseline; gap: calc(var(--inline-space) * 2);
    padding: calc(var(--block-space) * 1.25) calc(var(--inline-space) * 4) var(--block-space);
    font-size: 0.85rem; color: var(--ink-soft);
  }
  .masthead-link { margin-inline-start: auto; text-decoration: none; color: var(--ink-soft); }
  .masthead-link.is-quiet { margin-inline-start: 0; }
  .masthead-find { margin-inline-start: auto; }
  .masthead-find + .masthead-link { margin-inline-start: 0; }
  .masthead-find-input {
    width: 13rem; padding: 0.3em 0.8em; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper);
    font: inherit; font-size: 0.82rem; color: var(--ink); caret-color: var(--caret); outline: none;
  }
  .masthead-find-input:focus { border-color: var(--ink-soft); width: 20rem; }
  @media (max-width: 60ch) { .masthead-find-input { width: 7rem; } .masthead-find-input:focus { width: 11rem; } }
  /* Going somewhere by name: the places whose name holds what is typed, under the bar, as HEY's menus are. */
  .masthead-find { position: relative; }
  .jump-list {
    position: absolute; z-index: 70; top: calc(100% + 0.4rem); right: 0; width: min(24rem, calc(100vw - 2rem)); margin: 0; padding: 0.4rem; list-style: none;
    background: var(--raised); border: 1px solid color-mix(in oklab, var(--rule), transparent 30%); border-radius: 12px;
    box-shadow: 0 1px 2px oklch(var(--lch-shade) / 0.08), 0 16px 36px -14px oklch(var(--lch-shade) / 0.4);
  }
  .jump-link { display: grid; gap: 0.05rem; padding: 0.4rem 0.6rem; border-radius: 8px; text-decoration: none; color: var(--ink); }
  .jump-item.is-chosen .jump-link, .jump-link:hover { background: color-mix(in oklab, var(--accent), var(--paper) 78%); }
  .jump-name { font-size: 0.86rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .jump-where { font-size: 0.72rem; color: var(--ink-soft); }
  .jump-where::first-letter { text-transform: uppercase; }
  @media (max-width: 60ch) { .jump-list { position: fixed; top: 3.4rem; left: 1rem; right: 1rem; width: auto; } }
  .masthead-link:hover { color: var(--ink); }
  /* Settings, as the reader's own mark: round, in their colour, the size of a line of the masthead. */
  .masthead-you { align-self: center; display: inline-flex; border-radius: 50%; text-decoration: none; }
  .masthead-you .timeline-who { width: 1.65rem; height: 1.65rem; font-size: 0.56rem; }
  .masthead-you:hover .timeline-who, .masthead-you:focus-visible .timeline-who { box-shadow: 0 0 0 2px var(--desk), 0 0 0 3.5px var(--accent); }
  .masthead-you:focus-visible { outline: none; }
  .wordmark { display: inline-flex; align-items: center; color: var(--ink); padding-block: 0.2rem; }
  .wordmark svg { display: block; }
  .wordmark:hover svg { transform: scaleY(1.3); }
  /* The way back: top left of every page below Home, always to what holds the page. */
  .way-back { display: flex; align-items: baseline; gap: 0.6em; min-width: 0; flex-shrink: 0; max-width: 45%; white-space: nowrap; }
  /* On a phone the way back has a line of its own under the masthead, never squeezed away. */
  @media (max-width: 60ch) {
    .masthead { flex-wrap: wrap; row-gap: 0.5rem; column-gap: 0.7rem; padding-inline: 16px; }
    .way-back { order: 10; flex-basis: 100%; max-width: 100%; }
  }
  .back { color: var(--ink); font-weight: 700; text-decoration: none; overflow: hidden; text-overflow: ellipsis; max-width: 28ch; }
  .back:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .back-around { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; }
  .back-around a { color: inherit; text-decoration: none; }
  .back-around a:hover { color: var(--ink); }
  @media (max-width: 60ch) { .back-around { display: none; } }

  .page-title { font-size: 1.6em; line-height: 1.2; margin-block-end: calc(var(--block-space) * 1.5); }
  .side-title, .facet-title {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-soft); margin-block: calc(var(--block-space) * 1.5) calc(var(--block-space) * 0.5);
  }
  .side-title:first-child, .facet-title:first-child { margin-block-start: 0; }
  time { white-space: nowrap; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
}

@layer components {
  /* Authorship: each actor's hue, set per actor in the layout. The reader's own has none: ink. */
  .au { color: var(--au, var(--ink)); }
  .author { white-space: nowrap; }

  .button {
    font-size: 0.8rem; padding: 0.25em 0.9em; border: 1px solid var(--rule); border-radius: 999px;
    background: var(--paper); cursor: pointer;
  }
  .button:hover { border-color: var(--ink-soft); }
  a.button { color: inherit; text-decoration: none; display: inline-block; }
  .inline-form { display: inline; }

  /* Entries: the log. */
  .entries { display: grid; gap: calc(var(--block-space) * 0.6); }
  .entry { display: grid; grid-template-columns: auto 1fr; column-gap: var(--inline-space); font-size: 0.82rem; line-height: 1.4; }
  .entry-who { font-weight: 700; }
  .entry-what { min-width: 0; overflow-wrap: anywhere; }
  .entry-when { grid-column: 2; color: var(--ink-soft); font-size: 0.72rem; }
  .entry-when a { text-decoration: none; }

  .facet-empty { color: var(--ink-soft); font-size: 0.82rem; }
}