/* AnyAllContext — "The Claim Ticket"
   A black counter carrying flat ticket stocks (raffle orange, check teal, stub yellow, receipt white),
   each printed in one black ink. Notches, perforations, punches and Nº serials are the working parts.
   The system is recorded in DESIGN.md; how the app uses it is in docs/brand.md, type in docs/typography.md.

   Contents
     1. Tokens
     2. Base
     3. Utilities
     4. Ticket primitives   notched ticket, section ticket, punch, stamp
     5. Controls            buttons, chips, fields, errors, notices, toast
     6. Chrome              top bar, footer
     7. Pages               content pages, blog, my spaces, sign-in, error
     8. Space dashboard     layout, space pane, share panel, sources pane, main panel, chat, viewer
     9. Responsive
    10. Reduced motion
*/

/* ========== 1. Tokens ========== */
:root {
  /* Stocks on the counter */
  --counter: #151515;
  --raffle: #ff5a36;          /* the one strong ticket per screen; citation stubs */
  --check: #2bb3a3;           /* ready, done */
  --stub: #ffd84d;            /* highlight: the selected item, focus ring, errors, selection */
  --receipt: #f6f6f1;         /* reading surfaces */
  --receipt-stub: #e9e8e0;    /* stub columns; the sources pane */
  --plate: #ffffff;           /* inset cards on receipt: answers, source tickets, fields */
  --rule: #d9d8d0;            /* hairlines on receipt */
  /* Ink */
  --ink: #151515;             /* the one ink printed on every stock */
  --ink-soft: #5c5a55;        /* secondary text on receipt (6.3:1), plate and receipt stub */
  --on-counter: #f6f6f1;      /* text on the counter */
  --on-counter-soft: #a7a59e; /* secondary text on the counter (7.4:1) */

  /* Faces */
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --text: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serial: "Martian Mono", ui-monospace, Consolas, monospace;

  /* Type scale (docs/typography.md). Readable text never goes below 12.5px. */
  --fs-serial: 12.5px;        /* mono serials and values */
  --fs-xs: 13px;              /* captions, helper notes, source status and errors */
  --fs-sm: 14px;              /* small UI: meta lines, notices, footer, toasts */
  --fs-ui: 15px;              /* list titles, chips, labels; tracked ticket print */
  --fs-base: 16px;            /* body and reading text */
  --fs-answer: 17px;          /* answer cards, post bodies */
  --fs-lede: clamp(17px, 1.35vw, 20px);
  --fs-title: clamp(28px, 2.6vw, 36px);     /* display capitals, from 28px up only */
  --fs-headline: clamp(44px, 5.4vw, 72px);
  --fs-display: clamp(52px, 7vw, 96px);

  /* Geometry */
  --notch: 13px;
  --r-stamp: 3px;
  --r-chip: 5px;
  --r-button: 6px;
  --r-card: 8px;
  --r-ticket: 10px;
  --gutter: clamp(16px, 3.4vw, 48px);
  --ticket-body: clamp(24px, 4vw, 56px);
  /* Perforations: 4px dashes, 7px on and 6px off, in counter black. */
  --perf-v: repeating-linear-gradient(to bottom, var(--counter) 0 7px, transparent 7px 13px);
  --perf-h: repeating-linear-gradient(to right, var(--counter) 0 7px, transparent 7px 13px);
  /* Four corner notches cut by mask so the counter shows through. */
  --notched:
    radial-gradient(circle var(--notch) at 0 0, #0000 97%, #000) top left / 51% 51% no-repeat,
    radial-gradient(circle var(--notch) at 100% 0, #0000 97%, #000) top right / 51% 51% no-repeat,
    radial-gradient(circle var(--notch) at 0 100%, #0000 97%, #000) bottom left / 51% 51% no-repeat,
    radial-gradient(circle var(--notch) at 100% 100%, #0000 97%, #000) bottom right / 51% 51% no-repeat;

  /* Motion */
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* The counter is always black and the reading surfaces are light stock, in both OS themes. */
  color-scheme: light;
}

/* ========== 2. Base ========== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--on-counter-soft) var(--counter); }
body {
  margin: 0; min-height: 100vh;
  display: flex; flex-direction: column;
  background: var(--counter); color: var(--on-counter);
  font: var(--fs-base)/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--stub); color: var(--ink); }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 4px; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 900; line-height: .92; letter-spacing: -.005em; text-wrap: balance; }
code { font-family: var(--serial); font-size: .85em; background: var(--receipt-stub); color: var(--ink); padding: .1em .35em; border-radius: var(--r-stamp); }
:focus-visible { outline: 3px solid var(--stub); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

/* ========== 3. Utilities ========== */
.muted { color: var(--ink-soft); }
.small { font-size: var(--fs-sm); }
.xsmall { font-size: var(--fs-xs); }
/* Ticket print: tracked display capitals for eyebrows and pane headings. Inherits its ink. */
.eyebrow, .group-head h2, .list-head h2, .post-section {
  margin: 0; color: inherit;
  font: 800 var(--fs-ui)/1 var(--display); letter-spacing: .16em; text-transform: uppercase;
}
.eyebrow { margin-bottom: 14px; }
/* Numbers in meta lines and tables line up. */
.source-meta, .space-meta, .nav-desc, .post-meta, .bubble table, .xsmall { font-variant-numeric: tabular-nums; }

/* ========== 4. Ticket primitives ========== */
/* Notched ticket: a standalone surface with four corner notches. */
.auth-card, .center-block, .blog-head, .post-cta, .empty, .dash-side, .dash-list, .dash-main {
  border-radius: var(--r-ticket);
  -webkit-mask: var(--notched); mask: var(--notched);
}

/* Section ticket: a stub column in --stock with a punch and ADMIT ONE print, a perforation, and a receipt
   body, notched at the top and bottom of the perforation. Drawn with pseudo-elements, so page views stay
   plain markup. Used by content pages (.prose) and blog posts (.post). */
.prose:not(.post-body), .post {
  --stub-w: clamp(72px, 8vw, 112px);
  --stock: var(--receipt-stub);
  --perf-x: calc(var(--stub-w) + 2px);
  position: relative;
  padding: var(--ticket-body) var(--ticket-body) var(--ticket-body) calc(var(--stub-w) + 4px + var(--ticket-body));
  background: var(--receipt); color: var(--ink); border-radius: var(--r-ticket);
  -webkit-mask:
    radial-gradient(circle var(--notch) at var(--perf-x) 0, #0000 97%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at var(--perf-x) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
          mask:
    radial-gradient(circle var(--notch) at var(--perf-x) 0, #0000 97%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at var(--perf-x) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
}
/* The stub. Vertical print reads bottom-to-top, so the element is rotated 180deg: its bottom edge is the
   visual top. The punch and the print are placed from that edge so they sit at the top of long pages. */
.prose:not(.post-body)::before, .post::before {
  content: "Admit one"; content: "Admit one" / "";
  position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--stub-w) + 4px);
  display: flex; align-items: center; justify-content: flex-end; padding-bottom: 82px;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 800 var(--fs-ui)/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
  background: radial-gradient(circle 11px at calc(50% - 2px) calc(100% - 44px), var(--counter) 96%, #0000) no-repeat, var(--stock);
  border-radius: 0 var(--r-ticket) var(--r-ticket) 0;
}
.prose:not(.post-body)::after, .post::after {
  content: ""; position: absolute; left: var(--stub-w); top: 22px; bottom: 22px; width: 4px; background: var(--perf-v);
}

/* Punch: a hole in the stub. Filled means checked in. The inset ring is the system's only shadow. */
.punch { display: block; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ink); }
.punch.is-punched { background: var(--counter); }

/* Stamp: VOID on a source that couldn't be read. */
.stamp {
  display: inline-block; padding: 4px 6px 2px; transform: rotate(-10deg);
  background: var(--plate); color: var(--ink); border: 2.5px solid var(--ink); border-radius: var(--r-stamp);
  font: 900 var(--fs-ui)/1 var(--display); letter-spacing: .14em; text-transform: uppercase;
}

/* ========== 5. Controls ========== */
/* Buttons: ink tickets. 48px default, lift 2px on hover. */
.btn {
  --h: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: var(--h); padding: 0 22px;
  color: var(--ink); background: transparent;
  border: 2px solid var(--ink); border-radius: var(--r-button);
  font: 800 19px/1 var(--display); letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: transform .25s var(--ease), background-color .2s, color .2s, border-color .2s;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); }
.btn:disabled { opacity: .5; cursor: default; }
.btn svg { flex: none; }
.btn-sm { --h: 38px; padding: 0 14px; font-size: 16px; }
.btn-xs { --h: 32px; padding: 0 11px; font-size: var(--fs-ui); }
.btn-block { width: 100%; }
.btn-icon { width: var(--h); padding: 0; }
/* Primary: ink fill, inverts on hover. */
.btn-primary { background: var(--ink); color: var(--receipt); }
.btn-primary:hover:not(:disabled) { background: var(--receipt); color: var(--ink); }
/* Outline (the brand's ghost button): fills ink on hover. */
.btn-outline:hover:not(:disabled) { background: var(--ink); color: var(--receipt); }
/* Ghost: borderless until hover, for quiet actions in pane heads. */
.btn-ghost { border-color: transparent; }
.btn-ghost:hover:not(:disabled) { border-color: var(--ink); }

/* Buttons printed on the counter: the top bar's own controls and page heads. Receipt print, inverting on
   hover; the primary is the orange ticket. (The share panel inside the top bar keeps ink buttons.) */
:is(.topnav > .btn, .share > .btn, .inline-form > .btn, .page-head .btn) { color: var(--on-counter); border-color: var(--on-counter); }
:is(.topnav > .btn, .share > .btn, .inline-form > .btn).btn-ghost { border-color: transparent; }
:is(.topnav > .btn, .share > .btn, .inline-form > .btn, .page-head .btn):hover:not(:disabled) { background: var(--on-counter); color: var(--ink); border-color: var(--on-counter); }
:is(.topnav > .btn, .page-head .btn).btn-primary { background: var(--raffle); color: var(--ink); border-color: var(--raffle); }

/* Icon button: small square actions on source tickets. */
.icon-btn {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  background: none; color: var(--ink); border: 2px solid transparent; border-radius: var(--r-chip);
  font-size: var(--fs-sm); cursor: pointer;
}
.icon-btn:hover { background: var(--plate); border-color: var(--ink); }

/* Chip: a short label or suggestion printed in ink on plate. */
.chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 4px 14px;
  background: var(--plate); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--r-chip);
  font: 700 var(--fs-ui)/1.3 var(--text); text-align: left; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.chip:hover { background: var(--ink); color: var(--receipt); }

/* Fields */
.stack { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-ui); font-weight: 700; }
.field input {
  height: 48px; padding: 0 14px;
  background: var(--plate); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--r-button);
  font: 400 var(--fs-base) var(--text);
}
.field input:focus { outline: 3px solid var(--stub); outline-offset: 2px; }
.field input::placeholder, .add-form textarea::placeholder, .ask textarea::placeholder { color: var(--ink-soft); opacity: 1; }

/* Errors: ink on a stub-yellow band. There is no red stock, and the band never relies on colour alone. */
.form-error, .msg-error {
  margin: 0; padding: 8px 12px; border-radius: var(--r-chip);
  background: var(--stub); color: var(--ink); font-size: var(--fs-sm); font-weight: 700;
}

/* Notices */
.notice { margin-bottom: 16px; padding: 12px 16px; background: var(--receipt); color: var(--ink); border-radius: var(--r-card); font-size: var(--fs-sm); }
.notice a { font-weight: 700; }
.notice-warn { background: var(--stub); }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 64px; /* clears the footer */ z-index: 100;
  max-width: calc(100vw - 32px); padding: 10px 16px;
  background: var(--receipt); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--r-card);
  font-size: var(--fs-sm); font-weight: 700;
  opacity: 0; pointer-events: none; transform: translate(-50%, 20px);
  transition: opacity .2s, transform .25s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast[data-kind="error"] { background: var(--stub); }

/* ========== 6. Chrome ========== */
/* Top bar: the white lockup on the counter, actions on the right. Under 520px only the mark shows. */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px var(--gutter);
  background: var(--counter);
}
.brand { display: flex; align-items: center; flex-shrink: 0; padding: 6px 0; border-radius: 4px; text-decoration: none; }
.brand img { display: block; width: auto; }
.brand .brand-lockup { height: 32px; }
.brand .brand-mark { height: 28px; display: none; }
.topnav { display: flex; align-items: center; gap: 6px; }
.inline-form { display: flex; align-items: center; gap: 8px; margin: 0; }
.who { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); color: var(--on-counter-soft); }

main.page { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 24px var(--gutter) 64px; }

/* Footer: one compact row pinned to the bottom of every page. Product links left, copyright centred,
   legal links right; the 1fr | auto | 1fr grid keeps the copyright centred whatever the groups' widths.
   flex-shrink: 0 keeps it in view on the full-height dashboard. Narrow screens stack it (section 9). */
.site-footer {
  flex-shrink: 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px 24px;
  padding: 10px var(--gutter) 12px;
  background: var(--counter); color: var(--on-counter-soft);
  font-size: var(--fs-sm); line-height: 1.3;
}
.footer-links { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 18px; }
.footer-product { grid-column: 1; justify-content: flex-start; }
.footer-legal { grid-column: 3; justify-content: flex-end; }
.footer-links a { padding: 2px 0; white-space: nowrap; text-decoration: none; }
.footer-links a:hover, .footer-links a[aria-current="page"] { color: var(--on-counter); text-decoration: underline; }
.footer-copy { grid-column: 2; grid-row: 1; margin: 0; white-space: nowrap; color: var(--on-counter); }

/* ========== 7. Pages ========== */
/* --- Content pages (about, guides, legal): a section ticket --- */
.prose:not(.post-body) { max-width: 940px; margin: 0 auto; }
.prose > * { max-width: 68ch; }
.prose h1 { max-width: 16ch; margin-bottom: 20px; font-size: var(--fs-headline); text-transform: uppercase; }
.prose .lede { margin: 0 0 36px; font-size: var(--fs-lede); }
.prose h2 { margin: 44px 0 12px; font-size: var(--fs-title); text-transform: uppercase; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose li::marker { color: var(--ink); }
.prose a:not(.btn) { color: var(--ink); font-weight: 700; }
.prose a:not(.btn):hover { background: var(--stub); }
.prose > .btn { margin-top: 20px; }
.prose .updated { margin: -20px 0 32px; font-size: var(--fs-sm); color: var(--ink-soft); }

/* --- Blog list --- */
.blog { max-width: 980px; margin: 0 auto; }
/* The list's lead ticket: raffle orange, the page's one strong ticket. */
.blog-head { margin-bottom: 28px; padding: var(--ticket-body); background: var(--raffle); color: var(--ink); }
.blog-head h1 { max-width: 12ch; margin-bottom: 22px; font-size: var(--fs-display); text-transform: uppercase; }
.blog-head .lede { max-width: 34em; margin: 0; font-size: var(--fs-lede); }
.post-list { list-style: none; display: grid; gap: 16px; margin: 0; padding: 0; }
.post-row {
  display: grid; grid-template-columns: minmax(200px, 300px) 1fr; align-items: center; gap: clamp(18px, 3vw, 32px);
  padding: 20px; background: var(--receipt); color: var(--ink); border-radius: var(--r-ticket);
}
.post-thumb { display: block; overflow: hidden; border-radius: var(--r-card); }
.post-thumb img, .post-cover img, .post-related img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }
.post-thumb img { transition: transform .45s var(--ease); }
.post-row:hover .post-thumb img { transform: scale(1.03); }
.post-section { margin-bottom: 10px; }
.post-row h2 { margin-bottom: 10px; font-size: var(--fs-title); text-transform: uppercase; }
.post-row h2 a { text-decoration: none; }
.post-row h2 a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.post-summary { max-width: 64ch; margin: 0 0 10px; }
.post-meta { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); }

/* --- Landing pages (use cases, features, comparisons) and their hubs: a content-page section ticket --- */
.landing > .btn { margin: 0 0 8px; }
.landing-intro { margin-top: 36px; }
.prose h3 { margin: 22px 0 6px; font: 700 var(--fs-answer)/1.3 var(--text); }
.prose .post-cta { margin: 48px 0 8px; }
.prose .post-cta h2 { margin-top: 0; }
/* Example questions read as chat prompts: plate cards in the ink of the app's ask box.
   Prefixed with .prose to outrank its list padding and link styles without !important. */
.prose .landing-questions { list-style: none; display: grid; gap: 8px; padding: 0; }
.prose .landing-questions li { margin: 0; padding: 12px 16px; background: var(--plate); border: 2px solid var(--ink); border-radius: var(--r-card); font-weight: 700; }
/* Link cards: related pages at the foot of a landing page, and every entry on a hub. */
.prose .landing-related { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; max-width: none; padding: 0; }
.prose .landing-related li { margin: 0; }
.prose .landing-related a {
  display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 14px 16px 16px;
  background: var(--plate); border: 2px solid var(--ink); border-radius: var(--r-card);
  font-weight: 400; text-decoration: none; transition: transform .25s var(--ease);
}
.prose .landing-related a:hover { transform: translateY(-2px); background: var(--plate); }
.landing-related-label { font: 800 var(--fs-ui)/1.1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.table-wrap { overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; background: var(--plate); border: 2px solid var(--ink); font-size: var(--fs-ui); }
.compare th, .compare td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.compare thead th { font: 800 var(--fs-ui)/1.1 var(--display); letter-spacing: .1em; text-transform: uppercase; border-bottom: 2px solid var(--ink); }
.compare tbody th { font-weight: 700; }
.table-wrap + .updated { margin: 10px 0 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Blog post: a section ticket on stub-yellow stock --- */
.post { --stock: var(--stub); max-width: 980px; margin: 0 auto; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 26px; padding: 0; font-size: var(--fs-sm); color: var(--ink-soft); }
.crumbs li + li::before { content: "/"; margin-right: 6px; }
.crumbs a { color: var(--ink); }
.post-head, .post-body, .post-foot { max-width: 70ch; }
.post-head h1 { margin-bottom: 18px; font-size: var(--fs-headline); text-transform: uppercase; }
.post-head .lede { margin: 0 0 16px; font-size: var(--fs-lede); }
/* The cover is itself a ticket on counter black, so it needs no frame of its own. */
.post-cover { margin: 28px 0 34px; overflow: hidden; border-radius: var(--r-ticket); }
.post-body h2 { margin: 40px 0 12px; font-size: var(--fs-title); }
.post-body p, .post-body li { font-size: var(--fs-answer); line-height: 1.65; }
.post-foot { margin-top: 36px; }
.post-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; padding: 0; }
.post-tags li { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; background: var(--receipt-stub); border-radius: var(--r-chip); font: 700 var(--fs-sm)/1 var(--text); }
/* The call to action is the post's orange ticket. */
.post-cta { margin-bottom: 40px; padding: 28px 30px; background: var(--raffle); }
.post-cta h2 { margin-bottom: 10px; font-size: var(--fs-title); text-transform: uppercase; }
.post-cta p { margin: 0 0 18px; }
.post-related h2 { margin-bottom: 14px; }
.post-related ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; padding: 0; }
.post-related a {
  display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 10px 10px 14px;
  background: var(--plate); border: 2px solid var(--ink); border-radius: var(--r-card); text-decoration: none;
  transition: transform .25s var(--ease);
}
.post-related a:hover { transform: translateY(-2px); }
.post-related img { border-radius: var(--r-chip); }
.post-related-title { margin-top: 4px; font-weight: 700; line-height: 1.3; }

/* --- My spaces: each space is a small ticket with a Nº serial on its stub --- */
.narrow { max-width: 760px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 8px 0 24px; }
.page-head h1 { font-size: var(--fs-headline); text-transform: uppercase; color: var(--on-counter); }
.space-list { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; counter-reset: space; }
.space-list li { counter-increment: space; }
.space-list a {
  --stub-w: 84px;
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 76px;
  padding: 16px 20px 16px calc(var(--stub-w) + 4px + 20px);
  background: var(--receipt); color: var(--ink); border-radius: var(--r-card); text-decoration: none;
  transition: transform .25s var(--ease);
}
.space-list a::before {
  content: "Nº\00a0" counter(space, decimal-leading-zero);
  position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--stub-w) + 4px);
  display: grid; place-items: center;
  background: var(--receipt-stub); border-radius: var(--r-card) 0 0 var(--r-card);
  font: 500 var(--fs-serial)/1 var(--serial); letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  transition: background-color .2s;
}
.space-list a::after { content: ""; position: absolute; left: var(--stub-w); top: 10px; bottom: 10px; width: 4px; background: var(--perf-v); }
.space-list a:hover { transform: translateY(-2px); }
.space-list a:hover::before { background: var(--stub); }
.space-list a:hover .space-name { text-decoration: underline; }
.space-name { font-size: var(--fs-base); font-weight: 700; }
.space-meta { font-size: var(--fs-sm); color: var(--ink-soft); }
.empty { padding: 56px var(--ticket-body); text-align: center; background: var(--receipt); color: var(--ink); }
.empty h2 { margin-bottom: 10px; font-size: var(--fs-title); text-transform: uppercase; }
.empty p { margin: 0; }
.empty .btn { margin-top: 20px; }

/* --- Sign-in: the orange lead ticket --- */
.auth-card { max-width: 480px; margin: 6vh auto 0; padding: clamp(28px, 5vw, 44px); background: var(--raffle); color: var(--ink); }
.auth-card h1 { margin-bottom: 16px; font-size: clamp(44px, 5vw, 60px); text-transform: uppercase; }
.auth-card > p { margin: 0 0 22px; }
.auth-card .muted { color: var(--ink); } /* soft ink fails contrast on orange */
.auth-card a:not(.btn) { font-weight: 700; }
.auth-icon { margin-bottom: 14px; font-size: 32px; line-height: 1; }

/* --- Error and not-found: a receipt ticket with the code stamped on it --- */
.center-block { margin-top: 6vh; padding: clamp(36px, 6vw, 72px) var(--ticket-body); text-align: center; background: var(--receipt); color: var(--ink); }
.center-block .eyebrow {
  display: inline-block; margin-bottom: 24px; padding: 6px 10px 3px; transform: rotate(-8deg);
  border: 3px solid var(--ink); border-radius: var(--r-stamp);
  font: 900 22px/1 var(--display); letter-spacing: .14em;
}
.center-block h1 { max-width: 14ch; margin: 0 auto 16px; font-size: var(--fs-headline); text-transform: uppercase; }
.center-block p { max-width: 52ch; margin: 0 auto 8px; }
.center-block .btn { margin-top: 20px; }

/* ========== 8. Space dashboard ========== */
/* Three tickets on the counter: the space (receipt), what's been added (receipt stub holding source
   tickets) and the main panel (receipt). */
body.is-space { height: 100vh; height: 100dvh; overflow: hidden; }
main.space { flex: 1; display: flex; min-height: 0; }
.dash { flex: 1; display: flex; gap: 8px; min-width: 0; min-height: 0; padding: 4px var(--gutter); }
.dash-side, .dash-list, .dash-main { color: var(--ink); scrollbar-color: var(--ink-soft) transparent; }

/* --- Space pane: name, Inputs, Outputs --- */
.dash-side { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; background: var(--receipt); }
.side-head { display: flex; align-items: center; padding: 22px 20px 12px; }
.space-title { flex: 1; min-width: 0; }
.title-input, .title-static {
  display: block; width: calc(100% + 10px); min-width: 0; margin-left: -10px; padding: 4px 8px 2px;
  background: none; color: var(--ink); border: 2px solid transparent; border-radius: var(--r-button);
  font: 900 var(--fs-title)/1 var(--display); text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.title-input:hover { border-color: var(--rule); }
.title-input:focus { background: var(--plate); border-color: var(--ink); outline: none; }
.side-note { margin: -6px 20px 10px; font-size: var(--fs-sm); color: var(--ink-soft); }
.dash-side .notice { margin: 0 16px 12px; padding: 8px 12px; }
.side-scroll { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 26px; padding: 4px 16px 24px; }
.side-group { display: flex; flex-direction: column; gap: 12px; }
.group-head, .list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.group-head { padding-top: 12px; border-top: 2px solid var(--ink); }
/* Add buttons, one per input type. The open add form is highlighted in stub yellow. */
.add-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.add-btn {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px;
  background: var(--plate); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--r-chip);
  font: 700 var(--fs-ui)/1 var(--text); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.add-btn:hover { background: var(--ink); color: var(--receipt); }
.add-btn.active, .add-btn.active:hover { background: var(--stub); color: var(--ink); }
.add-glyph { width: 16px; text-align: center; font-size: var(--fs-sm); }
/* Outputs. The open output is highlighted in stub yellow; orange stays for the screen's strong ticket. */
.nav-list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; }
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px;
  background: var(--plate); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--r-card);
  text-decoration: none; transition: transform .25s var(--ease);
}
.nav-item:hover { transform: translateY(-2px); }
.nav-item.active { background: var(--stub); }
.nav-icon { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; background: var(--receipt-stub); color: var(--ink); border-radius: var(--r-chip); }
.nav-item.active .nav-icon { background: var(--ink); color: var(--receipt); }
.nav-text { display: flex; flex-direction: column; min-width: 0; }
.nav-label { font-size: var(--fs-ui); font-weight: 700; line-height: 1.3; }
.nav-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); color: var(--ink-soft); }
.nav-item.active .nav-desc { color: var(--ink); }
/* "Made with AnyAllContext": a small plate ticket at the foot of the space pane, for people in someone
   else's space. Plate and ink only; the guest Save button keeps the screen's one orange ticket. */
.made-with {
  flex-shrink: 0; display: grid; grid-template-columns: 36px 4px minmax(0, 1fr) auto; align-items: stretch;
  margin: 0 16px 16px; background: var(--plate); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--r-card);
  overflow: hidden;
}
.made-with[hidden] { display: none; }
.made-with-stub { display: grid; place-items: center; background: var(--receipt-stub); }
.made-with-perf { margin: 6px 0; background: var(--perf-v); background-size: 100% 13px; }
.made-with-face { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; padding: 9px 4px 9px 12px; color: inherit; text-decoration: none; }
.made-with-by { font-size: var(--fs-xs); color: var(--ink-soft); }
.made-with-cta { font-size: var(--fs-ui); font-weight: 700; line-height: 1.3; }
.made-with-face:hover .made-with-cta, .made-with-face:focus-visible .made-with-cta { text-decoration: underline; }
.made-with-close { align-self: center; margin-right: 6px; }

/* --- Share panel: drops from the top bar; owner actions sit apart on a danger stub --- */
.share { position: relative; flex-shrink: 0; }
.popover {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; width: min(380px, calc(100vw - 32px)); padding: 20px;
  background: var(--receipt); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--r-ticket);
}
.popover h3 { margin-bottom: 10px; font-size: var(--fs-title); text-transform: uppercase; }
.popover p { margin: 0 0 14px; }
.copy-row { display: flex; gap: 6px; }
.copy-row input {
  flex: 1; min-width: 0; height: 38px; padding: 0 10px;
  background: var(--plate); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--r-button);
  font: 500 var(--fs-serial) var(--serial); letter-spacing: -.01em;
}
.invite-btn { margin-top: 8px; }
.danger-stub { display: grid; gap: 12px; margin-top: 18px; padding: 16px; border: 2px dashed var(--ink); border-radius: var(--r-ticket); }
.popover .danger-stub p { margin: 0; font-size: var(--fs-sm); }
.danger-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.danger-actions .btn { --h: 42px; padding: 0 16px; font-size: 17px; }

/* --- Sources pane: what's been added, as source tickets --- */
.dash-list { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; background: var(--receipt-stub); }
.list-head { padding: 24px 18px 12px; }
[data-source-summary] { font: 500 var(--fs-serial) var(--serial); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.drop-hint {
  display: none; place-items: center; height: 64px;
  background: var(--stub); color: var(--ink); border: 2px dashed var(--ink); border-radius: var(--r-card);
  font-size: var(--fs-sm); font-weight: 700;
}
body.page-drag .drop-hint { display: grid; }
.dash-list .drop-hint { margin: 0 14px 10px; }
.dash-list .source-list { flex: 1; overflow-y: auto; padding: 2px 14px 22px; }
.source-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
.source-empty { padding: 12px 4px; font-size: var(--fs-sm); color: var(--ink-soft); }
.skeleton { height: 68px; border: 2px dashed var(--ink-soft); border-radius: var(--r-card); animation: pulse 1.2s ease-in-out infinite alternate; }
@keyframes pulse { from { opacity: .35; } to { opacity: .8; } }
/* A source ticket: stub (kind glyph + punch) | perforation | face | actions. States are marks, with the
   word alongside (space.js renderSources):
     Pending    "Queued"   punch filled
     Processing "Reading"  punch filled, perforation feeds downward
     Ready      "Ready"    the whole ticket turns check teal
     Failed     "Failed"   punch empty, VOID stamp, the error on its own line */
.source {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 44px 4px minmax(0, 1fr) auto; align-items: stretch; min-height: 68px;
  background: var(--plate); border: 2px solid var(--ink); border-radius: var(--r-card);
}
.source-stub { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--receipt-stub); font-size: var(--fs-sm); }
.source-perf { margin: 8px 0; background: var(--perf-v); background-size: 100% 13px; }
.source[data-status="Processing"] .source-perf { animation: feed 1.2s linear infinite; }
@keyframes feed { to { background-position: 0 13px; } }
.source[data-status="Ready"], .source[data-status="Ready"] .source-stub { background: var(--check); }
.source.active { outline: 3px solid var(--ink); outline-offset: -1px; }
.source.active .source-stub { background: var(--stub); }
.source-main { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; padding: 10px 6px 10px 12px; color: inherit; text-decoration: none; }
.source-main > span { max-width: 100%; }
.source-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-ui); font-weight: 700; line-height: 1.3; }
.source-main:hover .source-title { text-decoration: underline; }
.source-meta { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-xs); color: var(--ink-soft); }
.source[data-status="Ready"] .source-meta { color: var(--ink); } /* soft ink fails contrast on teal */
.source-state { flex-shrink: 0; font-weight: 700; color: var(--ink); }
.source-meta-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source .stamp { flex-shrink: 0; padding: 3px 5px 1px; transform: rotate(-8deg); font-size: 14px; }
.source-error { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); color: var(--ink); }
.source-actions { display: flex; align-items: center; padding-right: 6px; opacity: 0; transition: opacity .15s; }
.source:hover .source-actions, .source:focus-within .source-actions, .source[data-status="Failed"] .source-actions { opacity: 1; }

/* --- Main panel: shows the mark until a view is selected --- */
.dash-main { flex: 1; display: flex; min-width: 0; min-height: 0; background: var(--receipt); }
.dash[data-view="blank"] .dash-main { background: url("/img/brand/aac-mark.svg") center / clamp(96px, 12vw, 150px) auto no-repeat, var(--receipt); }
.view { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
/* The view head is the stub; a perforation tears it from the face. */
.view-head {
  display: flex; align-items: center; gap: 10px; min-height: 68px;
  padding: 12px clamp(16px, 3vw, 32px) 14px;
  background: var(--perf-h) bottom 0 left 18px / calc(100% - 36px) 4px no-repeat;
}
.view-title-wrap { flex: 1; min-width: 0; }
.view-title-wrap .eyebrow { margin-bottom: 6px; }
.view-title { flex: 1; min-width: 0; padding-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-title); line-height: 1; text-transform: uppercase; }
.view-title-wrap .view-title { display: block; }
[data-view="output"] .back { display: none; }

/* Add forms (note, links) */
.add-form { flex: 1; display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 860px; min-height: 0; margin: 0 auto; padding: 22px clamp(16px, 4vw, 48px); }
.add-form textarea {
  flex: 1; min-height: 140px; padding: 14px 16px; resize: none;
  background: var(--plate); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--r-card);
  font: var(--fs-base)/1.6 var(--text);
}
.add-form textarea:focus { outline: 3px solid var(--stub); outline-offset: 0; }
.add-form[data-add-form="link"] textarea { flex: 0 0 auto; min-height: 150px; font-family: var(--serial); font-size: var(--fs-xs); }
.add-form-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* --- Chat --- */
.chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-scroll { flex: 1; overflow-y: auto; padding: 28px clamp(16px, 4vw, 48px); scrollbar-color: var(--ink-soft) transparent; }
.chat-empty { max-width: 640px; margin: 6vh auto 0; }
.chat-empty h2 { font-size: var(--fs-headline); text-transform: uppercase; }
.chat-empty p { margin: 16px 0 22px; font-size: var(--fs-lede); }
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; }

.messages { list-style: none; display: flex; flex-direction: column; gap: 22px; max-width: 760px; margin: 0 auto; padding: 0; }
.msg { display: flex; flex-direction: column; }
.msg-user { align-items: flex-end; }
.msg-user .bubble {
  max-width: 85%; padding: 10px 16px; white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--ink); color: var(--receipt); border-radius: var(--r-card) var(--r-card) var(--r-stamp) var(--r-card);
}
/* Answer card: plate on receipt, ink border. */
.msg-assistant .bubble {
  padding: 18px 22px; overflow-wrap: anywhere;
  background: var(--plate); border: 2px solid var(--ink); border-radius: var(--r-ticket);
  font-size: var(--fs-answer); line-height: 1.65;
}
.bubble > :first-child { margin-top: 0; }
.bubble > :last-child { margin-bottom: 0; }
.bubble p, .bubble ul, .bubble ol { margin: 0 0 .75em; }
.bubble ul, .bubble ol { padding-left: 1.3em; }
.bubble h1, .bubble h2, .bubble h3 { margin: 1.1em 0 .5em; font: 700 1.05em/1.3 var(--text); letter-spacing: 0; }
.bubble a { font-weight: 700; }
.bubble pre { overflow-x: auto; padding: 12px; background: var(--receipt-stub); border-radius: var(--r-card); font: var(--fs-xs)/1.5 var(--serial); }
.bubble pre code { background: none; padding: 0; }
.bubble table { display: block; overflow-x: auto; margin: .5em 0 1em; border-collapse: collapse; font-size: var(--fs-ui); }
.bubble th { padding: 6px 10px; border-bottom: 2.5px solid var(--ink); text-align: left; }
.bubble td { padding: 6px 10px; border-bottom: 1.5px solid var(--rule); text-align: left; }
.bubble blockquote { margin: 0 0 .75em; padding-left: 12px; border-left: 4px solid var(--ink); color: var(--ink-soft); }
/* Citation stub: an orange stub notched on its left edge, labelled with a serial ("Nº" is added here so the
   markup keeps the plain number). Focusable; Enter or Space opens the source. */
.cite {
  display: inline-flex; align-items: center; height: 22px; margin: 0 2px; padding: 0 7px 0 9px; vertical-align: 2px;
  background: var(--raffle); color: var(--ink); border-radius: var(--r-stamp);
  font: 500 var(--fs-serial)/1 var(--serial); letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  cursor: pointer; transition: background-color .2s, color .2s;
  -webkit-mask: radial-gradient(circle 4px at 0 50%, #0000 97%, #000); mask: radial-gradient(circle 4px at 0 50%, #0000 97%, #000);
}
.cite::before, .citation b::before { content: "Nº\00a0"; }
.cite:hover { background: var(--ink); color: var(--receipt); }
.cite:focus-visible { -webkit-mask: none; mask: none; } /* the mask would clip the focus ring */
/* Below the answer, each cited source is a row: serial, then name. */
.citations { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.citation {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 14px;
  background: var(--receipt); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--r-card);
  font: var(--fs-ui)/1.3 var(--text); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-decoration: none;
  transition: background-color .2s;
}
.citation b { font: 500 13px/1 var(--serial); font-variant-numeric: tabular-nums; }
.citation:hover { background: var(--stub); }
.msg-error { display: inline-block; margin-top: 10px; }
/* Typing: three perforation dashes. */
.typing { display: inline-flex; gap: 5px; padding: 8px 0; }
.typing i { width: 10px; height: 4px; border-radius: 2px; background: var(--ink); animation: blink 1.2s infinite both; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }

.ask {
  display: flex; align-items: flex-end; gap: 8px; align-self: center;
  width: calc(100% - 2 * clamp(12px, 3vw, 32px)); max-width: 760px; padding: 6px 6px 6px 16px;
  background: var(--plate); border: 2px solid var(--ink); border-radius: var(--r-ticket);
}
.ask:focus-within { outline: 3px solid var(--stub); outline-offset: 2px; }
.ask textarea { flex: 1; max-height: 200px; padding: 10px 0; resize: none; background: none; color: var(--ink); border: 0; outline: none; font: inherit; }
.ask .btn-icon { --h: 42px; flex-shrink: 0; }
.ask-foot { margin: 8px 0 14px; text-align: center; }

/* --- Source viewer --- */
.source-view { flex: 1; overflow-y: auto; padding: 20px clamp(16px, 4vw, 48px) 32px; scrollbar-color: var(--ink-soft) transparent; }
.source-link { display: inline-block; margin-bottom: 14px; overflow-wrap: anywhere; font-size: var(--fs-sm); color: var(--ink); }
.viewer-body { max-width: 70ch; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: var(--fs-base)/1.7 var(--text); color: var(--ink); }

/* ========== 9. Responsive ========== */
@media (max-width: 1180px) and (min-width: 861px) {
  .dash-side, .dash-list { width: 264px; }
}

@media (max-width: 860px) {
  /* Top bar: drop the email and "+ New space" (the dashboard is one tap away). */
  .who, .topnav .btn-ghost:first-child { display: none; }
  /* The share panel spans the screen under the top bar. */
  .topbar .popover { position: fixed; left: 16px; right: 16px; top: 64px; width: auto; }

  /* Dashboard: the panes stack, and the space pane is the home screen; picking an item swaps in the main panel. */
  .dash { flex-direction: column; overflow-y: auto; padding: 4px 12px 8px; }
  .dash-side, .dash-list { width: 100%; flex-shrink: 0; }
  .dash-side .side-scroll, .dash-list .source-list { overflow: visible; }
  .dash:not([data-view="blank"]) { overflow: hidden; }
  .dash:not([data-view="blank"]) .dash-side, .dash:not([data-view="blank"]) .dash-list { display: none; }
  .dash[data-view="blank"] .dash-main { display: none; }
  [data-view="output"] .back { display: inline-flex; }
  .view-head { min-height: 60px; padding: 10px 12px 12px; }
  .source-actions { opacity: 1; }

  /* Section tickets turn on their side: the stub moves to the top behind a horizontal perforation, and the
     side notches and vertical ADMIT ONE print go. */
  .prose:not(.post-body), .post { padding: calc(52px + 4px + 24px) 20px 28px; -webkit-mask: none; mask: none; }
  .prose:not(.post-body)::before, .post::before {
    content: ""; right: 0; bottom: auto; width: auto; height: 56px; padding: 0; transform: none; writing-mode: horizontal-tb;
    background: radial-gradient(circle 11px at 30px 50%, var(--counter) 96%, #0000) no-repeat, var(--stock);
    border-radius: var(--r-ticket) var(--r-ticket) 0 0;
  }
  .prose:not(.post-body)::after, .post::after { left: 18px; right: 18px; top: 52px; bottom: auto; width: auto; height: 4px; background: var(--perf-h); }

  /* Blog */
  .post-row { grid-template-columns: 1fr; gap: 16px; padding: 14px; }
  .post-related ul { grid-template-columns: 1fr; }
  .post-cta { padding: 24px 20px; }

  /* Footer: product links, legal links, then the copyright, all centred. */
  .site-footer { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer-product, .footer-legal, .footer-copy { grid-column: 1; grid-row: auto; justify-content: center; }
  .footer-links { gap: 4px 14px; }
  .footer-copy { order: 1; }
}

@media (max-width: 520px) {
  .brand .brand-lockup { display: none; }
  .brand .brand-mark { display: block; }
  .topbar { gap: 8px; padding: 10px 12px; }
  .topnav { gap: 4px; }
  .page-head { flex-direction: column; align-items: flex-start; }
  .add-form-bar { flex-direction: column; align-items: stretch; }
  .space-list a { --stub-w: 64px; padding-left: calc(var(--stub-w) + 4px + 14px); }
}

/* ========== 10. Reduced motion ========== */
/* Removes lifts, the feeding perforation, pulses and transitions. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; }
  .btn:hover:not(:disabled), .nav-item:hover, .space-list a:hover, .post-related a:hover, .post-row:hover .post-thumb img { transform: none; }
}