/* Promptuaria — Hacker Gist light theme (UI spec §5–§9, §12–§14, §31–§33).
   Plain authored CSS: semantic tokens, cascade layers, no framework.
   Light theme only; there is deliberately no dark-mode variant (UI spec §4.4). */

@layer base, layout, components, markdown, utilities;

/* ---------------------------------------------------------------- fonts --
   Unmodified upstream subsets; see fonts/SOURCES.md. */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/IBMPlexSans-Regular-Latin1.woff2) format("woff2"); unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/IBMPlexSans-Regular-Latin2.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/IBMPlexSans-Regular-Pi.woff2) format("woff2"); unicode-range: U+0E3F, U+2032-2033, U+2070, U+2075-2079, U+2080-2081, U+2083, U+2085-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+EBE1-EBE7, U+ECE0, U+EFCC; }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/IBMPlexSans-Italic-Latin1.woff2) format("woff2"); unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/IBMPlexSans-Italic-Latin2.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/IBMPlexSans-Italic-Pi.woff2) format("woff2"); unicode-range: U+0E3F, U+2032-2033, U+2070, U+2075-2079, U+2080-2081, U+2083, U+2085-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+EBE1-EBE7, U+ECE0, U+EFCC; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/IBMPlexSans-Medium-Latin1.woff2) format("woff2"); unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/IBMPlexSans-Medium-Latin2.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/IBMPlexSans-Medium-Pi.woff2) format("woff2"); unicode-range: U+0E3F, U+2032-2033, U+2070, U+2075-2079, U+2080-2081, U+2083, U+2085-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+EBE1-EBE7, U+ECE0, U+EFCC; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/IBMPlexSans-SemiBold-Latin1.woff2) format("woff2"); unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/IBMPlexSans-SemiBold-Latin2.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/IBMPlexSans-SemiBold-Pi.woff2) format("woff2"); unicode-range: U+0E3F, U+2032-2033, U+2070, U+2075-2079, U+2080-2081, U+2083, U+2085-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+EBE1-EBE7, U+ECE0, U+EFCC; }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 600; font-display: swap; src: url(fonts/IBMPlexSans-SemiBoldItalic-Latin1.woff2) format("woff2"); unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 600; font-display: swap; src: url(fonts/IBMPlexSans-SemiBoldItalic-Latin2.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 600; font-display: swap; src: url(fonts/IBMPlexSans-SemiBoldItalic-Pi.woff2) format("woff2"); unicode-range: U+0E3F, U+2032-2033, U+2070, U+2075-2079, U+2080-2081, U+2083, U+2085-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+EBE1-EBE7, U+ECE0, U+EFCC; }

@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/IBMPlexMono-Regular-Latin1.woff2) format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/IBMPlexMono-Regular-Latin2.woff2) format("woff2"); unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/IBMPlexMono-Regular-Pi.woff2) format("woff2"); unicode-range: U+03C0, U+0E3F, U+2000-200D, U+2010-2012, U+2015, U+2028-2029, U+202F, U+2032-2033, U+203E, U+205F, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+2219-221A, U+221E, U+222B, U+2236, U+2248, U+2260, U+2264-2265, U+2400-2421, U+2500-259F, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+3000, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/IBMPlexMono-SemiBold-Latin1.woff2) format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/IBMPlexMono-SemiBold-Latin2.woff2) format("woff2"); unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/IBMPlexMono-SemiBold-Pi.woff2) format("woff2"); unicode-range: U+03C0, U+0E3F, U+2000-200D, U+2010-2012, U+2015, U+2028-2029, U+202F, U+2032-2033, U+203E, U+205F, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+2219-221A, U+221E, U+222B, U+2236, U+2248, U+2260, U+2264-2265, U+2400-2421, U+2500-259F, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+3000, U+FEFF, U+FFFD; }

@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/eb-garamond-latin-400-normal.woff2) format("woff2"); 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: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/eb-garamond-latin-ext-400-normal.woff2) format("woff2"); 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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* --------------------------------------------------------------- tokens -- */

:root {
  --canvas: #f6f5f1;
  --surface: #fff;
  --surface-subtle: #faf9f6;
  --chrome: #efede8;
  --rule: #e4e1da;
  --rule-subtle: #eceae4;
  --border: #d8d5ce;
  --control-border: #cfcbc3;
  --table-border: #dddad3;
  --code-border: #e6e3dc;
  --code-surface: #f6f5f1;
  --inline-code-surface: #f1efea;
  --text: #1d1c1a;
  --text-strong-muted: #3b3934;
  --text-muted: #5b5852;
  --text-secondary: #6e6a62;
  --text-placeholder: #7a766e;
  --text-disabled: #b3afa6;
  --accent: #a63a2b;
  --positive: #3e7b49;
  --yank-surface: #fbf3f1;
  --yank-border: #e3b3aa;
  --yank-text: #7a2e22;
  --yank-status: #8e3222;
  --archive-surface: #f1efea;
  --archive-mark: #8a867e;

  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-serif: "EB Garamond", Garamond, "Times New Roman", serif;

  --column: 1008px;
  --gutter: 24px;
  --control-height: 26px;
  --radius: 3px;
  --frame-radius: 2px;
}

/* ----------------------------------------------------------------- base -- */

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

  html {
    /* Light only (UI spec §4.4); also opts out of forced automatic darkening. */
    color-scheme: only light;
    background: var(--canvas);
    color: var(--text);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--canvas);
    font: 400 14px/1.5 var(--font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; }
  ul, ol { padding: 0; }
  a { color: inherit; }
  strong, b { font-weight: 600; }
  code, kbd, pre, samp { font-family: var(--font-mono); }
  svg { flex: none; }
  button, input { font: inherit; color: inherit; }

  :focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
  }
}

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

@layer layout {
  .page { flex: 1 0 auto; }
  .page:focus { outline: none; }

  .container {
    width: 100%;
    max-width: var(--column);
    margin: 0 auto;
    padding: 0 var(--gutter);
  }

  /* Header: one row on desktop, two rows on narrow screens. Never fixed. */
  .site-header {
    display: grid;
    grid-template-columns: auto minmax(0, 300px) 1fr auto;
    grid-template-areas: "brand search . nav";
    align-items: center;
    column-gap: 18px;
    height: 44px;
    padding: 0 var(--gutter);
    background: var(--chrome);
    border-bottom: 1px solid var(--border);
  }

  .brand {
    grid-area: brand;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--text);
  }
  .brand .mark { width: 18px; height: 18px; color: var(--text); }
  .brand__name { font: 400 18.8px/1 var(--font-serif); letter-spacing: 0.005em; padding-bottom: 1px; }

  .search {
    grid-area: search;
    position: relative;
    display: flex;
    align-items: center;
  }
  .search > .icon {
    position: absolute;
    left: 9px;
    width: 12px;
    height: 12px;
    color: var(--text-placeholder);
    pointer-events: none;
  }
  .search__input {
    width: 100%;
    height: var(--control-height);
    padding: 0 30px 0 28px;
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 12.5px;
    appearance: none;
  }
  .search__input::placeholder { color: var(--text-placeholder); opacity: 1; }
  .search__input::-webkit-search-cancel-button { display: none; }
  .search__input:focus-visible { outline-offset: 0; }
  .search__hint {
    position: absolute;
    right: 8px;
    display: grid;
    place-items: center;
    width: 16px;
    height: 17px;
    border: 1px solid #dddad3;
    border-radius: 2px;
    color: var(--text-placeholder);
    font: 400 11px/1 var(--font-mono);
    pointer-events: none;
  }

  .site-nav {
    grid-area: nav;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .site-nav__link { font-size: 13px; text-decoration: none; }
  .site-nav__link:hover { text-decoration: underline; }

  /* Sticky-footer layout: at the viewport bottom on short pages, after the
     content on long ones, never fixed (UI spec §9.4). */
  .site-footer {
    margin-top: 24px;
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 12px;
  }
  .site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--column);
    height: 40px;
    margin: 0 auto;
    padding: 0 var(--gutter);
  }
  .site-footer a { text-decoration: none; }
  .site-footer a:hover { color: var(--text); text-decoration: underline; }
  .site-footer__brand { display: inline-flex; align-items: center; gap: 6.5px; }
  .site-footer__brand .pilcrow { width: 9px; height: 14px; margin-top: 2px; }
  .site-footer__links { display: flex; gap: 16px; }
}

/* ----------------------------------------------------------- components -- */

@layer components {
  .icon { width: 13px; height: 13px; }

  .identity { font-family: var(--font-mono); font-weight: 600; }
  .identity__version { color: var(--accent); }
  .sep { margin: 0 7px; color: var(--text-secondary); }
  .arrow { margin-left: 6px; font-family: var(--font-sans); }

  /* Compact controls (UI spec §7.3, §11). */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5.5px;
    height: var(--control-height);
    padding: 0 8.5px;
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font: 500 12.5px/1 var(--font-sans);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }
  .button:hover { border-color: #b9b4aa; }
  .button--primary { background: var(--text); border-color: var(--text); color: #fff; }
  .button--primary:hover { background: #33312d; border-color: #33312d; }
  .button--icon { width: var(--control-height); padding: 0; }
  .button--counted { padding-right: 0; font-weight: 400; }
  .button__count {
    display: inline-flex;
    align-items: center;
    height: 100%;
    margin-left: 4px;
    padding: 0 8px 0 8.5px;
    border-left: 1px solid var(--control-border);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 12px;
  }

  .tag {
    display: inline-block;
    padding: 0 5px;
    background: var(--chrome);
    border-radius: 2px;
    color: var(--text-strong-muted);
    font: 400 11px/16px var(--font-mono);
  }
  .tags { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; }

  .badge {
    display: inline-block;
    margin-left: 10px;
    padding: 0 5px;
    border: 1px solid var(--archive-mark);
    border-radius: 2px;
    color: var(--text-strong-muted);
    font: 500 11px/14px var(--font-mono);
    letter-spacing: 0.08em;
    vertical-align: 3px;
  }

  /* Route-level tabs: emphasis plus the rubrication underline (UI spec §10.3). */
  .tabs {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 3px 12px;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
  }
  .tab:hover { color: var(--text); }
  .tab[aria-current] { color: var(--text); font-weight: 500; }
  .tab[aria-current]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--accent);
  }
  .tab__count {
    min-width: 17px;
    padding: 0 4px;
    background: var(--chrome);
    border-radius: 2px;
    color: var(--text-muted);
    font: 400 12px/16px var(--font-mono);
    text-align: center;
  }

  /* Anchored menus: native <details> disclosures, enhanced by menus.js. */
  .menu { position: relative; }
  .menu > summary { list-style: none; }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu__panel {
    position: absolute;
    z-index: 10;
    top: calc(100% + 4px);
    left: 0;
    min-width: 220px;
    padding: 4px 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 2px 8px rgb(29 28 26 / 0.07);
  }
  .overflow .menu__panel { left: auto; right: 0; }
  .menu__list { list-style: none; }
  .menu__item {
    display: block;
    padding: 6px 14px;
    color: var(--text);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
  }
  .menu__item:hover, .menu__item:focus-visible { background: var(--surface-subtle); }
  .menu__item[aria-current] { background: var(--canvas); }
  .menu__title { color: var(--text-muted); }
  .state {
    margin-left: 6px;
    color: var(--text-secondary);
    font: 500 11px/1 var(--font-mono);
    letter-spacing: 0.06em;
  }
  .state--yanked { color: var(--yank-status); }

  .select {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: var(--control-height);
    max-width: 100%;
    padding: 0 6px 0 10px;
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 12.5px;
    cursor: pointer;
  }
  .select__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .select__dash, .select__state { color: var(--text-secondary); }
  .select .icon { width: 12px; height: 12px; }

  .segmented {
    display: inline-flex;
    height: 24px;
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .segmented__item {
    display: inline-flex;
    align-items: center;
    padding: 0 9.5px;
    background: var(--chrome);
    color: var(--text-muted);
    font-size: 11.5px;
    text-decoration: none;
  }
  .segmented__item + .segmented__item { border-left: 1px solid var(--control-border); }
  .segmented__item[aria-current] { background: var(--surface); color: var(--text); font-weight: 600; }
  /* The control clips its segments to its rounded border, so a segment's
     focus ring is drawn inside it, where it cannot be clipped. */
  .segmented__item:focus-visible { outline-offset: -2px; }

  /* Explicit, text-first state notices (UI spec §28.3–§28.4). */
  .notice {
    display: flex;
    gap: 14px;
    margin-top: 16px;
    padding: 12px 14px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    line-height: 21px;
  }
  .notice__label {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 21px;
    font: 600 11.5px/1 var(--font-mono);
    letter-spacing: 0.08em;
  }
  .notice__body > * + * { margin-top: 0; }
  .notice__title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
  .notice__square { width: 10px; height: 10px; background: var(--archive-mark); }
  .notice--archived { background: var(--archive-surface); color: var(--text-strong-muted); }
  .notice--archived .notice__detail { color: var(--text-muted); }
  .notice--yanked { background: var(--yank-surface); border-color: var(--yank-border); color: var(--yank-text); }
  .notice--yanked .icon { width: 14px; height: 14px; }
  .notice--yanked a { text-decoration-color: var(--yank-border); text-underline-offset: 3px; font-weight: 500; }
  .notice--plain { background: var(--surface); margin-top: 20px; padding: 18px 20px; }
  .notice--plain .notice__body > * + * { margin-top: 8px; }
  .version-links { list-style: none; }
  .version-links .identity { font-size: 13px; }

  .empty-state {
    margin-top: 12px;
    padding: 24px 16px;
    border: 1px solid var(--border);
    border-radius: var(--frame-radius);
    background: var(--surface);
    color: var(--text-muted);
  }
}

/* ---------------------------------------------------------------- pages -- */

@layer components {
  /* Home: a small introduction, then the catalogue (UI spec §13.1). */
  .intro { padding-top: 20px; }
  .intro__title { font: 400 25px/32px var(--font-serif); }
  .intro__tagline { margin-top: 2px; font-size: 14.8px; font-weight: 600; line-height: 20px; }
  .intro__lede { margin-top: 4px; color: var(--text-muted); font-size: 13.5px; line-height: 20px; }

  .tabbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-top: 21px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
  }
  /* The tab strip overlaps the hairline so the active underline covers it. */
  .tabbar .tabs { margin-bottom: -1px; }
  .tabbar .tab { padding-bottom: 11.5px; }
  .tabbar__meta {
    flex: none;
    padding-bottom: 12px;
    color: var(--text-secondary);
    font: 400 11.5px/16px var(--font-mono);
  }

  .spec-list {
    margin-top: 12px;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--frame-radius);
  }
  .spec-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    padding: 10px 16px 8px;
  }
  .spec-row + .spec-row { border-top: 1px solid var(--rule); }
  .spec-row__name {
    font: 400 14px/21px var(--font-mono);
    overflow-wrap: anywhere;
  }
  .spec-row__name a { text-decoration: none; }
  .spec-row__name a:hover .spec-row__spec { text-decoration: underline; }
  .spec-row__owner { color: var(--text-muted); }
  .spec-row__spec { font-weight: 600; }
  .spec-row__summary {
    grid-column: 1;
    color: var(--text-muted);
    font-size: 13.5px;
    line-height: 21px;
  }
  .spec-row__meta {
    grid-column: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 20px;
  }
  .spec-row .sep { color: var(--control-border); }
  .spec-row__line { display: inline; }
  .spec-row__version { color: var(--text); font-weight: 600; }
  .spec-row__stars {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    font: 400 13px/21px var(--font-mono);
  }
  .spec-row__stars .icon { width: 11px; height: 11px; }
  .spec-row__stars--corner { grid-column: 2; grid-row: 1; justify-self: end; }
  .spec-row__stars--inline { display: none; }

  .pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 11px;
    padding: 0 2px;
    font-size: 12.5px;
  }
  .pagination__range { color: var(--text-secondary); font: 400 11.5px/1 var(--font-mono); }
  .pagination__links { display: flex; gap: 14px; }
  .pagination__links a { text-decoration: none; font-weight: 500; }
  .pagination__links a:hover { text-decoration: underline; }
  .pagination__disabled { color: var(--text-disabled); }

  /* Spec / SpecVersion page (UI spec §14). */
  .spec-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding-top: 16px;
  }
  .spec-head__identity { min-width: 0; }
  .spec-title { font-size: 20px; font-weight: 400; line-height: 28px; overflow-wrap: anywhere; }
  .spec-title a { text-decoration: none; }
  .spec-title a:hover { text-decoration: underline; }
  .spec-title__sep { color: var(--text-secondary); }
  .spec-title__name { font-weight: 600; }
  .spec-head__summary { margin-top: -0.5px; color: var(--text-muted); font-size: 13.5px; line-height: 21px; }
  .spec-head__lineage { margin-top: 2px; color: var(--text-secondary); font-size: 13px; }
  .spec-head__lineage .identity { font-weight: 400; font-size: 12.5px; }
  .spec-head__actions { flex: none; display: flex; gap: 6px; padding-top: 2px; }
  .spec-head__actions .button { gap: 4px; padding-left: 7px; font-weight: 400; }
  .spec-head__actions .button:not(.button--counted) { padding-right: 8.5px; }
  .spec-head__actions .icon { width: 14px; height: 14px; }

  /* The hairline is drawn inside the scrolling strip so the active
     underline can cover it without being clipped. */
  .tabs--spec {
    margin-top: 17.5px;
    background: linear-gradient(var(--border), var(--border)) left bottom / 100% 1px no-repeat;
    font-size: 13px;
  }
  .tabs--spec .tab { padding-bottom: 10px; }

  .version-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 13px;
    row-gap: 8px;
    margin-top: 13px;
  }
  .version-bar__identity { font-size: 14px; line-height: 26px; }
  .version-bar__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 11.5px;
    color: var(--text-secondary);
    font-size: 12.5px;
  }
  .version-bar__status { display: inline-flex; align-items: center; gap: 6px; }
  .version-bar__status--yanked { color: var(--yank-status); }
  .version-bar__by { font-size: 12px; }
  .version-bar__by a { text-decoration: none; }
  .version-bar__by a:hover { text-decoration: underline; }
  .version-bar__by .sep { margin: 0 4px; }
  .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--positive); }

  .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
  }

  .document {
    margin-top: 13px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--frame-radius);
  }
  .document__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "file meta toggle";
    align-items: center;
    column-gap: 10px;
    min-height: 36px;
    padding: 5px 9px 5px 14px;
    background: var(--surface-subtle);
    border-bottom: 1px solid var(--rule);
    border-radius: var(--frame-radius) var(--frame-radius) 0 0;
  }
  .document__file {
    grid-area: file;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: 600 12.5px/1 var(--font-mono);
  }
  .document__file .pilcrow { width: 9px; height: 15px; color: var(--accent); }
  .document__meta {
    grid-area: meta;
    min-width: 0;
    color: var(--text-secondary);
    font: 400 11.5px/1.4 var(--font-mono);
  }
  .document__meta .sep { margin: 0 6px; }
  .segmented { grid-area: toggle; }
  .hash__middle {
    display: inline-block;
    width: 0;
    overflow: hidden;
    vertical-align: bottom;
  }
  .hash__tail::before { content: "…"; }

  .comments-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 15px;
    padding: 0 2px;
    font-size: 13px;
  }
  .comments-row__count { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); }
  .comments-row__link { font-weight: 600; text-decoration: none; }
  .comments-row__link:hover { text-decoration: underline; }

  /* About, Terms and Privacy. */
  .legal-page { max-width: 680px; padding: 56px 0 72px; font-size: 15px; line-height: 1.6; }
  .legal-page h1 { font-size: 26px; font-weight: 600; line-height: 32px; }
  .legal-page h2 { margin-top: 28px; font-size: 17px; font-weight: 600; }
  .legal-page p, .legal-page ul { margin-top: 10px; }
  .legal-page ul { padding-left: 20px; }
  .legal-page li + li { margin-top: 6px; }
  .legal-page__meta { color: var(--text-secondary); font-size: 13px; }
  .legal-page__missing { color: var(--text-secondary); font-style: italic; }

  /* Restrained not-found and unavailable pages (UI spec §29.3). */
  .error-page { max-width: 560px; padding-top: 72px; }
  .error-page__status { color: var(--text-secondary); font: 400 13px/1 var(--font-mono); letter-spacing: 0.04em; }
  .error-page__title { margin-top: 16px; font-size: 24px; font-weight: 600; line-height: 30px; }
  .error-page__message {
    margin-top: 12px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
  }
  .error-page__message .identity { font-size: 14.5px; }
  .error-page__links { margin-top: 20px; list-style: none; }
  .error-page__links li + li { margin-top: 12px; }
  .error-page__links a { text-decoration: none; }
  .error-page__links a:hover { text-decoration: underline; }
  .error-page__links .identity { font-size: 14px; }

  /* Signed-in header and account menu (UI spec §9.1–§9.3). */
  .site-nav__new { gap: 6px; padding: 0 9px 0 8px; }
  .site-nav__new .icon { width: 12px; height: 12px; }
  .avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 22px;
    height: 22px;
    border: 1px solid var(--text-secondary);
    border-radius: 50%;
    background: var(--border);
    color: var(--text);
    font: 600 9.5px/1 var(--font-sans);
    letter-spacing: 0.02em;
    user-select: none;
  }
  summary.avatar { cursor: pointer; }
  .account-menu .menu__panel {
    left: auto;
    right: 0;
    top: calc(100% + 7px);
    min-width: 168px;
    padding: 0 0 6px;
  }
  .account-menu__who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 12px 8px;
    border-bottom: 1px solid var(--rule);
  }
  .account-menu__name { font-size: 13px; font-weight: 500; line-height: 18px; overflow-wrap: anywhere; }
  .account-menu__handle { color: var(--text-muted); font: 400 12px/15px var(--font-mono); overflow-wrap: anywhere; }
  .account-menu .menu__list { padding-top: 3px; }
  .account-menu .menu__item { padding: 5px 12px; line-height: 18px; }
  .account-menu__form { margin: 0; }
  .menu__button {
    width: 100%;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
  }

  /* Sign in and first-login handle choice (UI spec §20). */
  .auth-card {
    width: 100%;
    max-width: 360px;
    margin: 73px auto 0;
    padding: 24px 24px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--frame-radius);
  }
  .auth-card--handle { max-width: 440px; margin-top: 56px; padding-top: 20px; }
  .auth-card__brand { display: flex; align-items: center; gap: 8px; height: 18px; }
  .auth-card__brand .mark { width: 18px; height: 18px; }
  .auth-card__wordmark { font: 400 20.5px/1 var(--font-serif); letter-spacing: 0.005em; padding-bottom: 1px; }
  .auth-card__title { margin-top: 13px; font-size: 16px; font-weight: 600; line-height: 22px; }
  .auth-card__lede { margin-top: 10px; color: var(--text-muted); font-size: 13.5px; line-height: 20px; }
  .auth-card__legal { margin-top: 10px; color: var(--text-secondary); font-size: 12px; line-height: 18px; }
  .auth-card__legal a { color: var(--text); text-underline-offset: 2px; text-decoration-color: var(--control-border); }
  .auth-card__problem {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 13.5px;
    font-size: 13.5px;
    line-height: 20px;
  }
  .auth-card__problem .icon { flex: none; align-self: center; width: 14px; height: 14px; color: var(--accent); }
  .auth-card__identity { font-size: 12.5px; }
  .auth-card__label {
    color: var(--text-muted);
    font: 600 10.5px/14px var(--font-sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .auth-card__heading { margin-top: 13.5px; font-size: 16px; font-weight: 600; line-height: 22px; }
  .auth-card__note { margin-top: 10.5px; color: var(--text-muted); font-size: 12.5px; line-height: 19px; }
  .auth-card__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 13.5px;
  }
  .button--block { display: flex; width: 100%; height: 28px; margin-top: 16px; font-size: 13px; }
  .button--form { padding: 0 13.5px; font-size: 12.5px; }
  .link-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: 12.5px;
    cursor: pointer;
  }
  .link-button:hover { color: var(--text); text-decoration: underline; }

  .github-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
  }
  .avatar--identity {
    width: 28px;
    height: 28px;
    border: 0;
    background: var(--rule);
    font-size: 10.5px;
  }
  .github-identity__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .github-identity__name { font-size: 13.5px; font-weight: 500; line-height: 18px; overflow-wrap: anywhere; }
  .github-identity__login { color: var(--text-muted); font: 400 12px/18px var(--font-mono); overflow-wrap: anywhere; }

  .field__label { display: block; margin-top: 14px; font-size: 12.5px; font-weight: 600; line-height: 18px; }
  .field__input {
    display: block;
    width: 100%;
    height: 28px;
    margin-top: 6px;
    padding: 0 9px;
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    background: var(--surface);
    font: 400 13px/1 var(--font-mono);
  }
  .field__input:focus-visible { outline-offset: 0; }
  .field__preview { margin-top: 6px; color: var(--text-muted); font: 400 12px/18px var(--font-mono); overflow-wrap: anywhere; }
  .field__preview-handle { color: var(--text); }
}

/* ---------------------------------------------------- private authoring --
   New Spec, the Draft editor, the Draft list and deletion (UI spec §21.3,
   §22, §28.5): one compact surface, source first. */

@layer components {
  .draft-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    column-gap: 24px;
    row-gap: 4px;
    padding-top: 22px;
  }
  .draft-head__identity { font: 400 17px/24px var(--font-mono); overflow-wrap: anywhere; }
  .draft-head__owner { color: var(--text-muted); }
  .draft-head__name { font-weight: 600; }
  .draft-head__heading { font-size: 17px; font-weight: 600; line-height: 24px; }
  .draft-head__state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-right: auto;
    color: var(--text-muted);
    font-size: 13px;
  }
  .draft-head__identity + .draft-head__state { margin-left: -10px; }
  .state-ring {
    width: 8px;
    height: 8px;
    border: 1.5px solid var(--text-secondary);
    border-radius: 50%;
  }
  .draft-head__published {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 12px;
    min-width: 0;
    max-width: 100%;
    color: var(--text-muted);
    font-size: 13px;
  }
  .draft-head__version { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; }
  .draft-head__version .status-dot { flex: none; }
  .draft-head__label { color: var(--text); font-family: var(--font-mono); font-weight: 600; }
  /* A version title can be 200 characters: one line, cut, whole in its title. */
  .draft-head__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
  .draft-head__view { color: var(--text); font-weight: 600; text-decoration: none; white-space: nowrap; }
  .draft-head__view:hover { text-decoration: underline; }

  .form-alert {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    padding: 11px 14px;
    background: var(--yank-surface);
    border: 1px solid var(--yank-border);
    border-radius: var(--radius);
    color: var(--yank-text);
    font-size: 13.5px;
    line-height: 20px;
  }
  .form-alert > .icon { flex: none; width: 14px; height: 14px; margin-top: 3px; }
  .form-alert__body > * + * { margin-top: 4px; }
  .form-alert a { color: inherit; font-weight: 600; text-underline-offset: 3px; text-decoration-color: var(--yank-border); }
  /* Unsaved text kept by the editor's script (assets/js/editor.js). */
  .kept-copy > .form-alert__body { flex: 1; min-width: 0; }
  .kept-copy__details > summary { cursor: pointer; font-weight: 600; }
  .kept-copy__meta { margin-top: 6px; overflow-wrap: anywhere; }
  .kept-copy__text {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--yank-border);
    border-radius: var(--radius);
    color: var(--text);
    font: 12.5px/1.5 var(--font-mono);
    resize: vertical;
  }
  .kept-copy__actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .kept-copy__done:empty { display: none; }

  .spec-form { margin-top: 14px; }
  .fields {
    padding: 0 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--frame-radius);
  }
  .field-row {
    display: grid;
    grid-template-columns: 136px minmax(0, 560px);
    padding: 12px 0 11px;
  }
  .field-row + .field-row { border-top: 1px solid var(--rule); }
  .field-row__label { font-size: 13px; font-weight: 600; line-height: 26px; }
  .field-row__control { min-width: 0; }
  .field-hint, .field-note {
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 18px;
  }
  .field-hint code, .field-note code, .readonly-value code { color: var(--text); font-size: 12px; }
  .field-note { color: var(--text-strong-muted); }
  .field-error {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 6px;
    color: var(--yank-status);
    font-size: 12.5px;
    line-height: 18px;
  }
  .field-error .icon { flex: none; align-self: center; width: 12px; height: 12px; }
  .field-error[hidden] { display: none; }

  .name-input, .counted-input, .select-field {
    display: flex;
    align-items: stretch;
    height: var(--control-height);
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    background: var(--surface);
  }
  .name-input:focus-within, .counted-input:focus-within, .select-field:focus-within,
  .tag-editor__input:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 0;
  }
  .is-invalid.name-input, .is-invalid.counted-input, .is-invalid.select-field,
  .tag-editor__input.is-invalid { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .name-input__owner {
    display: inline-flex;
    align-items: center;
    flex: none;
    padding: 0 9px 0 9px;
    background: var(--surface-subtle);
    border-right: 1px solid var(--control-border);
    border-radius: var(--radius) 0 0 var(--radius);
    color: var(--text-muted);
    font: 400 13px/1 var(--font-mono);
  }
  .name-input__field, .counted-input__field {
    flex: 1;
    min-width: 0;
    padding: 0 9px;
    border: 0;
    background: none;
    font: 400 13px/1 var(--font-mono);
  }
  .counted-input__field { font: 400 13.5px/1 var(--font-sans); }
  .name-input__field:focus, .counted-input__field:focus { outline: none; }
  .field-count {
    flex: none;
    align-self: center;
    padding: 0 9px;
    color: var(--text-secondary);
    font: 400 11px/1 var(--font-mono);
    white-space: nowrap;
  }
  .field-count.is-over { color: var(--yank-status); font-weight: 600; }

  .readonly-value { font: 400 13.5px/26px var(--font-mono); overflow-wrap: anywhere; }
  .readonly-value__owner { color: var(--text-muted); }

  .tag-editor { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-height: var(--control-height); }
  .tag-editor__chips { display: contents; list-style: none; }
  .tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 20px;
    padding: 0 2px 0 6px;
    background: var(--chrome);
    border-radius: 2px;
    color: var(--text-strong-muted);
    font: 400 12px/20px var(--font-mono);
  }
  .tag-chip__remove {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: none;
    color: var(--text-secondary);
    font: 400 12px/1 var(--font-sans);
    cursor: pointer;
  }
  .tag-chip__remove:hover { background: var(--border); color: var(--text); }
  .tag-editor__input {
    width: 120px;
    height: var(--control-height);
    padding: 0 9px;
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    background: var(--surface);
    font: 400 12.5px/1 var(--font-mono);
  }
  .tag-editor__input::placeholder, .counted-input__field::placeholder, .name-input__field::placeholder {
    color: var(--text-placeholder);
    opacity: 1;
  }
  .tag-editor .field-count { padding: 0 0 0 1px; }

  .select-field { position: relative; width: 220px; }
  .select-field__control {
    flex: 1;
    min-width: 0;
    padding: 0 28px 0 9px;
    border: 0;
    background: none;
    font: 400 13px/1 var(--font-mono);
    appearance: none;
    cursor: pointer;
  }
  .select-field__control:focus { outline: none; }
  .select-field .icon {
    position: absolute;
    right: 9px;
    top: 50%;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .source {
    margin-top: 13px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--frame-radius);
  }
  .source__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "file meta toggle";
    align-items: center;
    column-gap: 10px;
    min-height: 36px;
    padding: 5px 9px 5px 14px;
    background: var(--surface-subtle);
    border-bottom: 1px solid var(--rule);
    border-radius: var(--frame-radius) var(--frame-radius) 0 0;
  }
  .source__file { grid-area: file; font: 600 12.5px/1 var(--font-mono); }
  .source__meta { grid-area: meta; min-width: 0; color: var(--text-secondary); font: 400 11.5px/1.4 var(--font-mono); }
  .source__note { margin-left: 8px; color: var(--text-strong-muted); font: 400 12px/1.4 var(--font-sans); }
  .segmented--buttons .segmented__item {
    margin: 0;
    border: 0;
    font: inherit;
    font-size: 11.5px;
    cursor: pointer;
  }
  .segmented--buttons .segmented__item + .segmented__item { border-left: 1px solid var(--control-border); }
  .segmented--buttons .segmented__item[aria-pressed="true"] { background: var(--surface); color: var(--text); font-weight: 600; }
  .source__error { margin: 0; padding: 8px 14px; border-bottom: 1px solid var(--rule); background: var(--yank-surface); }

  /* The gutter lies beside the text and scrolls with it (editor.js); its
     extra bottom padding lets it scroll as far as the text can. */
  .editor { position: relative; }
  .editor[hidden] { display: none; }
  .editor__gutter {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40px;
    margin: 0;
    padding: 10px 10px 50vh 0;
    overflow: hidden;
    border-right: 1px solid var(--rule);
    color: var(--text-secondary);
    font: 400 12px/21px var(--font-mono);
    text-align: right;
    user-select: none;
  }
  .editor__text {
    display: block;
    width: calc(100% - 40px);
    margin: 0 0 0 40px;
    padding: 10px 14px;
    border: 0;
    border-radius: 0;
    background: var(--surface);
    color: var(--text);
    font: 400 13.5px/21px var(--font-mono);
    tab-size: 4;
    /* Source keeps its columns on wide screens (line numbers stay aligned);
       narrow screens soft-wrap ordinary lines (UI spec §22.5). */
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
    resize: vertical;
  }
  .editor__text:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
  .editor__text::placeholder { color: var(--text-placeholder); opacity: 1; }
  .source__preview .markdown { padding: 24px 40px 32px; }

  .source__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    min-height: 44px;
    padding: 8px 16px;
    background: var(--surface-subtle);
    border-top: 1px solid var(--rule);
    border-radius: 0 0 var(--frame-radius) var(--frame-radius);
  }
  .source__save, .source__publish { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
  .source__publish-note { color: var(--text-muted); font-size: 12.5px; }
  .source__cancel, .source__delete { color: var(--text); font-size: 13px; text-decoration: none; }
  .source__cancel:hover, .source__delete:hover { text-decoration: underline; }
  .source__delete { color: var(--yank-status); }
  .button:disabled { border-color: var(--rule); color: var(--text-disabled); cursor: not-allowed; }
  .button.is-pending { background: #5b5852; border-color: #5b5852; cursor: progress; }
  .button--danger { background: var(--accent); border-color: var(--accent); color: #fff; }
  .button--danger:hover { background: #8e3222; border-color: #8e3222; }
  .save-status { display: inline-flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: 12.5px; }
  .save-status:empty { display: none; }
  .save-status__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-secondary); }
  .save-status.is-saved .save-status__dot { background: var(--positive); }

  /* Own profile header and the private Draft list (UI spec §21.2–§21.3). */
  .profile-head { display: flex; align-items: center; gap: 14px; padding-top: 20px; }
  .avatar--profile { width: 56px; height: 56px; border: 0; background: var(--rule); font-size: 16px; }
  .profile-head__name { font-size: 18px; font-weight: 600; line-height: 24px; overflow-wrap: anywhere; }
  .profile-head__handle { margin-left: 4px; color: var(--text-muted); font: 400 13.5px/1 var(--font-mono); }
  .tabs--profile {
    margin-top: 18px;
    background: linear-gradient(var(--border), var(--border)) left bottom / 100% 1px no-repeat;
    font-size: 13px;
  }
  .tabs--profile .tab { padding-bottom: 10px; }
  .drafts__privacy { margin-top: 14px; color: var(--text-muted); font-size: 13px; }
  .draft-list {
    margin-top: 10px;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--frame-radius);
  }
  .draft-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    padding: 11px 16px 10px;
  }
  .draft-row + .draft-row { border-top: 1px solid var(--rule); }
  .draft-row__name { font: 400 14px/21px var(--font-mono); overflow-wrap: anywhere; }
  .draft-row__owner { color: var(--text-muted); }
  .draft-row__spec { font-weight: 600; }
  .draft-row__open { grid-column: 2; grid-row: 1; align-self: center; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
  .draft-row__open:hover { text-decoration: underline; }
  .draft-row__summary { grid-column: 1; color: var(--text-muted); font-size: 13.5px; line-height: 21px; }
  .draft-row__meta {
    grid-column: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 20px;
  }
  .draft-row__meta .sep { color: var(--control-border); }
  .draft-row__meta strong { color: var(--text); font-family: var(--font-mono); }
  .draft-row__state { color: var(--text); font: 600 12px/20px var(--font-mono); }
  .draft-row__identity { color: var(--text); font-family: var(--font-mono); }
  .empty-state--action { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .empty-state--action .button .icon { width: 12px; height: 12px; }

  /* Permanent deletion of a never-published Spec (UI spec §28.5). */
  .confirm-card {
    max-width: 464px;
    margin-top: 56px;
    padding: 22px 24px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--frame-radius);
  }
  .confirm-card__title { font-size: 16px; font-weight: 600; line-height: 22px; }
  .confirm-card__identity { margin-top: 4px; font: 600 14px/20px var(--font-mono); overflow-wrap: anywhere; }
  .confirm-card__meta { margin-top: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); color: var(--text-muted); font-size: 12.5px; }
  .confirm-card__problem { margin-top: 12px; }
  .confirm-card__body { margin-top: 14px; font-size: 13.5px; line-height: 20px; }
  .confirm-card__body > * + * { margin-top: 8px; }
  .confirm-card__effects {
    margin-top: 14px;
    padding: 9px 14px;
    list-style: none;
    background: var(--surface-subtle);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    font-size: 13px;
    line-height: 22px;
  }
  .confirm-card__effects code { font-size: 12px; }
  .confirm-card__x { margin-right: 10px; color: var(--accent); }
  .confirm-card__note { margin-top: 12px; color: var(--text-muted); font-size: 12px; line-height: 18px; }
  .confirm-card__actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }

  /* Publish new version (UI spec §23): a compact card, the form in rows like
     the Draft editor's, and a summary of exactly what will be public. */
  .publish-card {
    max-width: 520px;
    margin: 56px auto 0;
    padding: 22px 24px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--frame-radius);
  }
  .publish-card__title { font-size: 16px; font-weight: 600; line-height: 22px; }
  .publish-card__identity {
    margin-top: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
    color: var(--text-muted);
    font-size: 12.5px;
    overflow-wrap: anywhere;
  }
  .publish-card__spec { color: var(--text); font: 400 13px/20px var(--font-mono); }
  .publish-card__alert-label { font: 600 11px/16px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
  .publish-card__blocked, .publish-card__problem { margin-top: 14px; }
  .publish-form__row {
    display: grid;
    grid-template-columns: 136px minmax(0, 1fr);
    padding: 12px 0 11px;
  }
  .publish-form__row + .publish-form__row { border-top: 1px solid var(--rule); }
  .publish-form__version { color: var(--accent); font: 600 15px/26px var(--font-mono); }
  .publish-form__note { margin-top: 12px; font-size: 13.5px; line-height: 20px; }
  .publish-summary {
    margin-top: 12px;
    padding: 9px 14px;
    background: var(--surface-subtle);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
  }
  .publish-summary__row { display: grid; grid-template-columns: 104px minmax(0, 1fr); padding: 3px 0; }
  .publish-summary dt {
    color: var(--text-muted);
    font: 600 11px/20px var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .publish-summary dd { font: 400 13px/20px var(--font-mono); overflow-wrap: anywhere; }
  .publish-summary__muted { color: var(--text-muted); }
  .publish-summary__missing { display: inline-flex; align-items: center; gap: 5px; color: var(--yank-status); }
  .publish-summary__missing .icon { width: 12px; height: 12px; }
  .publish-form__actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }

  /* Raw: the exact canonical Markdown, read-only (UI spec §14.4). Lines keep
     their columns and scroll inside the document (§31.1). */
  .raw { display: flex; align-items: flex-start; }
  .raw__gutter, .raw__source {
    margin: 0;
    padding: 14px 0 18px;
    font: 400 12.5px/20px var(--font-mono);
  }
  .raw__gutter {
    flex: none;
    min-width: 40px;
    padding-right: 10px;
    padding-left: 10px;
    border-right: 1px solid var(--rule);
    color: var(--text-secondary);
    text-align: right;
    user-select: none;
  }
  .raw__source {
    flex: 1;
    min-width: 0;
    padding-left: 14px;
    padding-right: 14px;
    overflow-x: auto;
    white-space: pre;
    tab-size: 4;
  }
  .raw__source:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
}

/* Issue #7: a version title may be 200 characters of anything. The closed
   selector shrinks to the line and cuts the title (its accessible name keeps
   it whole); the open menu is as wide as its titles, up to a bound, and
   longer titles wrap inside it instead of widening the page. */
.version-menu { min-width: 0; max-width: 100%; }
.select__text { min-width: 0; }
@media (min-width: 641px) {
  .version-menu .menu__panel {
    width: max-content;
    max-width: min(560px, calc(100vw - 2 * var(--gutter)));
  }
  .version-menu .menu__item { white-space: normal; overflow-wrap: anywhere; }
}

/* ------------------------------------------------------------- markdown --
   Sanitized, server-rendered SPEC.md (UI spec §14.4, §32.8). Structural
   content may scroll horizontally; prose never does. */

@layer markdown {
  .markdown {
    padding: 30px 56px 52.5px;
    font-size: 15px;
    line-height: 24px;
    overflow-wrap: break-word;
  }
  .markdown > :first-child { margin-top: 0; }
  .markdown > :last-child { margin-bottom: 0; }
  .markdown p, .markdown ul, .markdown ol, .markdown pre, .markdown table,
  .markdown blockquote, .markdown details, .markdown dl { margin: 0 0 12.5px; }

  .markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 {
    margin: 30px 0 13px;
    line-height: 1.3;
  }
  .markdown h1 {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--rule);
    font: 400 31px/1.2 var(--font-serif);
    margin-bottom: 13.5px;
  }
  .markdown h2 {
    padding-bottom: 6.5px;
    border-bottom: 1px solid var(--rule-subtle);
    font-size: 17px;
    font-weight: 600;
    margin: 31px 0 9.5px;
  }
  .markdown h3 { font-size: 15px; font-weight: 600; }
  .markdown h4, .markdown h5, .markdown h6 { font-size: 14px; font-weight: 600; }

  .markdown ul, .markdown ol { padding-left: 20px; }
  .markdown li + li { margin-top: 3.25px; }
  .markdown li > ul, .markdown li > ol { margin: 3px 0 0; }
  .markdown li::marker { color: var(--text); }
  .markdown input[type="checkbox"] { margin: 0 6px 0 -18px; vertical-align: -1px; }
  .markdown li:has(> input[type="checkbox"]) { list-style: none; }

  .markdown a { text-decoration-color: var(--control-border); text-underline-offset: 3px; }
  .markdown a:hover { text-decoration-color: currentColor; }
  .markdown em { font-style: italic; }
  .markdown del { color: var(--text-muted); }
  .markdown hr { height: 0; margin: 26.5px 0 29.5px; border: 0; border-top: 1px solid var(--table-border); }
  .markdown hr + * { margin-top: 0; }

  .markdown code {
    /* line-height 1 keeps inline code from growing its line box. */
    line-height: 1;
    padding: 1px 5px;
    background: var(--inline-code-surface);
    border: 1px solid var(--code-border);
    border-radius: var(--radius);
    font-size: 12.5px;
  }
  .markdown pre {
    padding: 12px 14px;
    overflow-x: auto;
    background: var(--code-surface);
    border: 1px solid var(--code-border);
    border-radius: var(--radius);
    font-size: 12.5px;
    line-height: 20px;
    margin-bottom: 13.5px;
  }
  .markdown pre code { padding: 0; background: none; border: 0; border-radius: 0; font-size: inherit; line-height: inherit; }

  .markdown table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    margin-bottom: 15.5px;
    border-collapse: collapse;
    font-size: 13.5px;
    line-height: 20px;
  }
  .markdown th, .markdown td { padding: 6px 12px; border: 1px solid var(--table-border); }
  .markdown th { background: var(--code-surface); font-weight: 600; text-align: left; }
  .markdown td code { font-size: 12px; }

  .markdown blockquote {
    padding: 0 0 0 14px;
    border-left: 3px solid var(--border);
    color: var(--text-muted);
  }
  .markdown kbd {
    padding: 1px 4px;
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    font-size: 12px;
  }
  .markdown summary { cursor: pointer; }
}

/* --------------------------------------------------------- narrow -------
   390 px reference (UI spec §7.2, §31): 16 px gutters, two-row header,
   stacked records, larger touch targets. */

@media (max-width: 640px) {
  :root { --gutter: 16px; --control-height: 30px; }

  .site-header {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand . nav" "search search search";
    row-gap: 0;
    height: auto;
    padding: 0 var(--gutter) 8px;
  }
  .brand, .site-nav { height: 44px; }
  .search > .icon { left: 11px; width: 13px; height: 13px; }
  /* 16 px keeps mobile browsers from zooming into the field on focus. */
  .search__input { padding-left: 33px; font-size: 16px; }
  .search__hint { display: none; }
  .site-nav { gap: 16px; }

  /* Only the primary action row grows to the 30 px touch height. */
  .button { height: 26px; }
  .actions { position: relative; gap: 8px; margin-top: 8px; }
  .actions .button { height: var(--control-height); }
  .actions .button--icon { width: var(--control-height); }

  /* Open menus stay inside the content column: long titles wrap, and the
     overflow menu aligns with the end of the action row, so it stays on
     screen when its trigger wraps to the start of a new line. */
  .menu__panel { max-width: 100%; }
  .menu__item { white-space: normal; overflow-wrap: anywhere; }
  .actions .overflow { position: static; }

  .intro { padding-top: 16.5px; }
  .intro__title { font-size: 22px; line-height: 28px; }
  .intro__tagline { font-size: 14px; line-height: 20px; }
  .intro__lede { font-size: 13px; line-height: 18px; }

  .spec-list { padding: 0 14px; }
  .spec-row { display: block; padding: 10.5px 0 11px; }
  .spec-row__stars--corner { display: none; }
  .spec-row__stars--inline { display: inline-flex; }
  .spec-row__meta { display: block; }
  .spec-row__line { display: block; line-height: 20px; }
  .spec-row__line + .spec-row__line { margin-top: 2px; }
  .spec-row__meta .sep--group { display: none; }
  .spec-row__meta .tags { margin-top: 3px; }
  .spec-row__summary { margin-top: 0.75px; line-height: 20px; }

  .spec-head { flex-direction: column; gap: 7.5px; padding-top: 14.5px; }
  .spec-title { font-size: 17px; line-height: 24px; }
  .spec-head__summary { margin-top: 1.5px; }
  .spec-head__actions { padding-top: 0; }
  .button__count { background: var(--chrome); }
  .tabs--spec { margin-top: 21px; }
  .tabs--spec .tab { padding-bottom: 11.5px; }

  /* A single track that may shrink below its content: long identities wrap
     and long version titles truncate in the selector instead of widening
     the page. */
  .version-bar { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 9.5px; margin-top: 14px; overflow-wrap: anywhere; }
  .version-bar__identity { font-size: 16px; line-height: 22px; }
  .version-menu .select { display: flex; width: 100%; justify-content: space-between; height: 30px; font-size: 14px; }
  .version-bar__meta { font-size: 13px; }

  .document { margin-top: 12px; }
  .document__head {
    grid-template-columns: auto 1fr;
    grid-template-areas: "file toggle" "meta meta";
    row-gap: 9px;
    padding: 7px 10px 8px 12px;
  }
  .segmented { justify-self: end; height: 26px; }
  .segmented__item { padding: 0 10px; font-size: 12px; }

  .markdown { padding: 18.5px 16px 28px; }
  /* Tables keep their columns and scroll inside the document (UI spec §31.1). */
  .markdown th, .markdown td { padding: 5px 10px; white-space: nowrap; }
  .markdown hr { margin: 22.5px 0 25.5px; }
  .markdown h1 { font-size: 26px; margin-bottom: 11px; }
  .markdown h2 { margin: 26px 0 6.5px; }
  .markdown p, .markdown ul, .markdown ol, .markdown pre, .markdown table,
  .markdown blockquote, .markdown details, .markdown dl { margin-bottom: 10.5px; }
  .markdown pre { padding: 10px 12px; line-height: 19px; }

  /* Signed in: Explore, + New spec and the avatar sit closer (K6 reference). */
  .site-nav:has(.account-menu) { gap: 12.5px; }
  .avatar { border-color: transparent; }
  .account-menu { margin-left: 2px; }

  .auth-card, .auth-card--handle { margin-top: 24px; }
  .field__input { height: 34px; font-size: 16px; }
  .button--block { height: 34px; }

  /* Private authoring, stacked (mobile/draft-editor-mobile.png). */
  .draft-head { flex-direction: column; align-items: flex-start; padding-top: 16px; }
  .draft-head__identity + .draft-head__state { margin-left: 0; }
  .draft-head__title { max-width: 220px; }
  .field-row { display: block; padding: 14px 0 13px; }
  .field-row__label { display: block; margin-bottom: 4px; line-height: 20px; }
  .fields { padding: 0 16px; }
  .name-input, .counted-input, .select-field { height: 36px; }
  .name-input__field, .counted-input__field, .select-field__control, .tag-editor__input { font-size: 16px; }
  .select-field { width: 100%; }
  .tag-editor__input { height: 36px; width: 150px; }
  .tag-chip { height: 28px; padding-left: 9px; font-size: 13px; line-height: 28px; }
  .tag-chip__remove { width: 26px; height: 26px; }
  .tag-editor .field-count { flex-basis: 100%; padding: 2px 0 0; }
  .source__head {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "file meta" "toggle toggle";
    row-gap: 9px;
    padding: 9px 12px 10px;
  }
  .source__head .segmented { justify-self: start; height: 30px; }
  .segmented--buttons .segmented__item { padding: 0 14px; font-size: 13px; }
  .source__note { display: block; margin: 6px 0 0; }
  .editor__gutter { display: none; }
  /* Ordinary source lines soft-wrap; nothing scrolls sideways (UI spec §22.5). */
  .editor__text {
    width: 100%;
    margin: 0;
    padding: 12px;
    font-size: 16px;
    line-height: 24px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    overflow-x: hidden;
    max-height: 70vh;
  }
  .source__preview .markdown { padding: 18px 16px 24px; }
  .source__actions { padding: 10px 14px; }
  .source__save { width: 100%; justify-content: space-between; }
  .source__actions .button--form, .confirm-card .button--form, .publish-card .button--form { height: 34px; padding: 0 14px; font-size: 14px; }
  .source__publish { width: 100%; justify-content: space-between; flex-wrap: nowrap; }
  .source__publish-note { flex: 1; font-size: 13px; }
  .source__delete { flex: none; }
  .draft-row { display: block; padding: 11px 14px 12px; }
  .draft-row__meta { display: block; }
  .draft-row__line { display: block; }
  .draft-row__meta .draft-row__line + .sep, .draft-row__meta .sep:has(+ .draft-row__line) { display: none; }
  .draft-row__open { display: inline-block; margin-top: 8px; }
  .profile-head__handle { display: inline-block; margin-left: 0; }
  .confirm-card { margin-top: 24px; padding: 18px 16px; }
  .publish-card { margin-top: 24px; padding: 18px 16px; }
  .publish-form__row { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .publish-summary__row { grid-template-columns: 88px minmax(0, 1fr); }
  .raw__gutter, .raw__source { font-size: 12px; line-height: 19px; }

  .wide-only { display: none !important; }
}

@media (min-width: 641px) {
  .narrow-only { display: none !important; }
}

/* ------------------------------------------------------------ utilities -- */

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

  .skip-link {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 100;
    padding: 6px 10px;
    background: var(--surface);
    border: 1px solid var(--text);
    border-radius: var(--radius);
    font-size: 13px;
    transform: translateY(-200%);
  }
  .skip-link:focus { transform: none; }
}