/* An AMA's page (ama.html, ama.js): notes passed across a table and answered. Built on
   the design system (tokens.css, components.css) and the editor's ink (ink.js); only what
   is the AMA's own lives here. What people write is in EB Garamond, a size smaller on a
   phone and never under 16px (or an iPhone zooms into the field); every interface word
   is Schibsted Grotesk, the editor's --font-ui. */
:root {
  --ama-font: "EB Garamond", Georgia, serif;
  --ama-read: 1.0625rem; --ama-leading: 1.4; --ama-title: 1.625rem; --ama-small: var(--text-ui-lg);
}
/* Torn paper, its shadow and its folds: paper.css, shared with the desk, the pictures and the
   blog's print of a passage */
@media (min-width: 960px) {
  /* The title above the Closed stamp's letters (Mustafa, 2026-10-29), its line a step up with it */
  :root { --ama-read: 1.22rem; --ama-leading: 1.42; --ama-title: 2.5rem; --ama-small: 1.0625rem; }
}

*, *::before, *::after { box-sizing: border-box; corner-shape: var(--corner-shape, round); }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; }
/* No scroll bars, on the page or in any column, on a computer or a phone (Mustafa,
   2026-10-30), as on the blog's other pages (public-site.css): each still scrolls by wheel,
   touch and keys. Both rules, for browsers that know only one or the other */
html, html * { scrollbar-width: none; }
html::-webkit-scrollbar, html *::-webkit-scrollbar { display: none; }
body { margin: 0; min-height: 100vh; background: var(--bg-sunken); color: var(--fg-default); font: 400 var(--text-ui)/1.45 var(--font-ui); }
/* The table: the same paper as everywhere, under the notes */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--paper-texture) 0 0 / var(--paper-texture-size) repeat;
  filter: var(--paper-texture-filter); mix-blend-mode: var(--paper-texture-blend); opacity: var(--paper-texture-opacity);
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--selection); }
:focus, :focus-visible { outline: none !important; }
p, h1 { margin: 0; }
[hidden] { display: none !important; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ── The page: one column on a phone; on a computer, their own notes held at the left ── */
.ama {
  display: grid; align-content: start; gap: var(--space-xl);
  max-width: 560px; margin: 0 auto;
  padding: 40px max(18px, env(safe-area-inset-right)) 120px max(18px, env(safe-area-inset-left));
  overflow-anchor: none;
}
.left { display: grid; align-content: start; gap: var(--space-xl); }
@media (min-width: 960px) {
  /* The published threads are the page, and scroll as it does. Their own column is held to
     the window, not to the row beside it (sticky was: the page's end pushed it up, and a
     thread opened there let it drop back; Mustafa, 2026-10-30), so nothing on the right
     moves it. A long thread of theirs scrolls inside it, under the pointer, and stops at its
     ends rather than carrying the page on. Its box reaches 6px past the column each side
     and 4px above, so tilted paper and shadows aren't clipped */
  .ama { grid-template-columns: 340px minmax(0, 600px); justify-content: center; gap: 72px; max-width: none; padding: 56px 40px 160px; }
  .stacks { grid-column: 2; }
  .left {
    position: fixed; top: 52px; left: 34px; width: 352px; max-height: calc(100vh - 80px); padding: 4px 6px 24px;
    overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none;
  }
  /* Nothing published to read beside it: their column alone, in the middle. It glides over
     when the first thread is published while they're here, and back if the last goes */
  .ama.is-alone .left { left: calc(50% - 176px); }
  .ama.is-moving .left { transition: left 760ms var(--ease-out); }
}
/* Where the page's two columns start once it's wide enough to centre them: 340 + 72 + 600 */
@media (min-width: 1092px) {
  .left { left: calc(50% - 512px); }
}

/* On a phone, and anything narrower than a computer's page, the bear sits beside the title,
   as on MovieBrain's shared boards, the two centred together over the line under them
   (Mustafa, 2026-10-29: a centred portrait ate the screen, and the board's left-aligned head
   looked too small); the light or dark switch keeps to the page's corner */
.ama-head { display: grid; justify-items: center; gap: var(--space-2xs); text-align: center; }
/* A name too long to sit beside the bear goes under it, still centred */
.ama-name { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2xs) 10px; max-width: 100%; }
.ama-head .bear { display: block; flex: none; width: 36px; height: auto; }
.ama-title { min-width: 0; font: 600 var(--ama-title)/1.2 var(--font-ui); letter-spacing: -0.012em; color: var(--fg-default); text-wrap: balance; overflow-wrap: anywhere; }
.ama-small { font: 400 var(--ama-small)/1.4 var(--font-ui); color: var(--fg-muted); text-wrap: balance; }
.theme { position: absolute; top: max(6px, env(safe-area-inset-top)); right: max(6px, env(safe-area-inset-right)); }
@media (max-width: 959px) {
  .ama { padding-top: 48px; gap: var(--space-lg); }
  .left { gap: var(--space-lg); }
}
@media (min-width: 960px) {
  /* One column the width of the page's: the bear's 80% is of that, not of the title */
  .ama-name { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; justify-self: stretch; gap: var(--space-2xs); }
  /* The portrait: the bear across most of the column while they arrive, easing down to a
     small mark once they've written, to leave the column to their thread. It looks to its
     right, so its snout and chin sit left of the picture's middle: it's moved right by that
     much, to sit over the words' centre line */
  .ama-head .bear { width: 80%; margin-bottom: var(--space-xs); translate: 7% 0; transition: width 640ms var(--ease-out); }
  /* By night the portrait's outline is feathered: its outermost hairs, near white, vanish
     into light paper but stood out on dark as bright spikes (Mustafa, 2026-10-30) */
  [data-theme="dark"] .ama-head .bear { filter: url(#bear-feather) brightness(1.12); }
  /* Twice the mark it was (Mustafa, 2026-10-30: at 64px it looked lost over the title) */
  .left.has-thread .ama-head .bear { width: 128px; }
  .ama-title { line-height: 1.15; letter-spacing: -0.015em; }
  .theme { position: fixed; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); z-index: 20; }
}

/* ── A note is the editor's paper, torn from the sheet; everything written on it is in the
   editor's ink. The paper is its own layer (.paper, under the words), cut along the tear;
   the note's shadow is drawn from the cut paper, so it follows the tear too ── */
.note {
  position: relative; isolation: isolate; padding: 12px 14px 14px;
  filter: drop-shadow(0 1px 1px var(--note-shadow-near)) drop-shadow(0 4px 7px var(--note-shadow-far));
}
.note > .paper, .stack.has-more:not(.is-open) > .lead::before, .stack.has-more:not(.is-open) > .lead::after {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--bg-canvas);
  /* The sheet, less what's torn from each edge: a corner is cut by both its tears. And while
     its top right corner is turned up (--cut, below), less that corner */
  -webkit-mask-image: linear-gradient(#000 0 0), var(--tear-top), var(--tear-bottom), var(--tear-left), var(--tear-right), linear-gradient(to bottom left, #000 calc(50% - 1.5px), transparent calc(50% - 1.5px));
  mask-image: linear-gradient(#000 0 0), var(--tear-top), var(--tear-bottom), var(--tear-left), var(--tear-right), linear-gradient(to bottom left, #000 calc(50% - 1.5px), transparent calc(50% - 1.5px));
  -webkit-mask-size: 100% 100%, 240px 5px, 240px 5px, 5px 240px, 5px 240px, var(--cut) var(--cut);
  mask-size: 100% 100%, 240px 5px, 240px 5px, 5px 240px, 5px 240px, var(--cut) var(--cut);
  -webkit-mask-position: 0 0, var(--tear-x, 0) 0, calc(0px - var(--tear-x, 0px)) 100%, 0 var(--tear-y, 0), 100% calc(0px - var(--tear-y, 0px)), 100% 0;
  mask-position: 0 0, var(--tear-x, 0) 0, calc(0px - var(--tear-x, 0px)) 100%, 0 var(--tear-y, 0), 100% calc(0px - var(--tear-y, 0px)), 100% 0;
  -webkit-mask-repeat: no-repeat, repeat-x, repeat-x, repeat-y, repeat-y, no-repeat;
  mask-repeat: no-repeat, repeat-x, repeat-x, repeat-y, repeat-y, no-repeat;
  -webkit-mask-composite: source-out, source-over, source-over, source-over, source-over, source-over;
  mask-composite: subtract, add, add, add, add, add;
}
.note > .paper::before {
  content: ""; position: absolute; inset: 0;
  background: var(--paper-texture) 0 0 / var(--paper-texture-size) repeat;
  filter: var(--paper-texture-filter); mix-blend-mode: var(--paper-texture-blend); opacity: var(--paper-texture-opacity);
}
/* A chit that's been passed carries its folds (Mustafa, 2026-10-30: "someone had folded a
   chit and passed it on to me"): one down, one across, each a fine hairline with a lit side
   and no shadow (chosen on the explorations board: C9). The hairline is only where the fold
   was pressed, so it comes and goes along it; where the folds cross, the paper puckers, the
   hairline breaks and the second fold jogs. Both folds are drawn alike, or the firmer one
   always led. Each fold is generated for its chit (ama.js, fold()) as two strips, 24px across
   and stretched along it, laid exactly on the fold: its hairline, drawn at night's strength
   and lightened by day, and its light, drawn at day's and dimmed by night. Fibres crushed
   along the fold break both into short streaks. The half beyond each fold lies a breath
   darker, turning over a few pixels as bent paper does, so the sheet has four panels. The
   note still being written lies flat; sent, it's folded, and its folds come in as it goes */
/* The folds themselves: paper.css (.is-folded), drawn by fold.js (foldNote) */
.note.is-passed > .paper > .fold, .note.is-passed > .paper::after { animation: crease-in 700ms var(--ease-out) both; }
@keyframes crease-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .note.is-passed > .paper > .fold, .note.is-passed > .paper::after { animation: none; } }
@media (min-width: 960px) { .note { padding: 14px 16px 16px; } }
.note .ink { font: 400 var(--ama-read)/var(--ama-leading) var(--ama-font); color: var(--text-ink); text-wrap: pretty; overflow-wrap: anywhere; white-space: pre-wrap; }
/* While it's being written it wraps as typing does: `pretty` weighs the whole paragraph's
   breaks again at every letter, so words hopped between lines as they were typed
   (Mustafa, 2026-10-30) */
.note .field { text-wrap: wrap; }
.field { min-height: calc(var(--ama-read) * var(--ama-leading)); cursor: text; outline: none; -webkit-user-select: text; user-select: text; }
.field:empty::before { content: attr(data-placeholder); color: var(--text-ink-placeholder); text-shadow: none; pointer-events: none; }
.note.write { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-xs); padding: 12px 6px 6px 14px; }
@media (min-width: 960px) { .note.write { padding: 14px 8px 8px 16px; } }
.write .field { align-self: start; padding-bottom: 6px; }
.ask .field { min-height: calc(var(--ama-read) * var(--ama-leading) * 3); }
@media (min-width: 960px) { .ask .field { min-height: calc(var(--ama-read) * var(--ama-leading) * 4); } }
/* The plane: a graphite outline while there's nothing to send; then the same plane
   inverted, solid ink, its crease in the paper's colour running right through the tip */
.plane { display: grid; place-items: center; width: 32px; height: 32px; color: var(--fg-subtle); }
.plane .ic { width: 19px; height: 19px; overflow: visible; }
.plane.is-ready { color: var(--fg-default); }
.plane:disabled { cursor: default; }
.is-ready .body { fill: currentColor; }
.crease { stroke-linecap: butt; }
.is-ready .crease { stroke: var(--bg-canvas); stroke-width: 2.1; }

/* ── A thread is a stack: theirs lean, his sit straight and carry the bear. The top card
   lies uppermost, as in a deck, and each card under it tucks its edge beneath. Everyone
   reading sits in the asker's seat: the notes passed are on the right, as one's own words
   are in a conversation, and his cards across from them on the left ── */
.stacks { display: grid; align-content: start; gap: 30px; min-width: 0; }
@media (min-width: 960px) { .stacks { gap: 36px; } }
.stack { display: grid; isolation: isolate; -webkit-tap-highlight-color: transparent; }
.stack > * + *, .more > * + * { margin-top: -6px; }
.more { display: none; }
.stack.is-open > .more { display: grid; }
.theirs { width: 90%; justify-self: end; rotate: var(--tilt, -0.6deg); }
.yours { width: 90%; justify-self: start; padding-bottom: 32px; }
@media (min-width: 960px) { .yours { padding-bottom: 36px; } }
.yours .sig { position: absolute; right: 12px; bottom: 10px; width: 20px; height: auto; }
.stack.can-open .note { cursor: pointer; }
/* The folded cards' edges under the top one: torn paper too, each a shade further into
   the deck, so the top card's tear shows against them */
.stack.has-more:not(.is-open) > .lead::before { content: ""; inset: 7px 3px -7px; z-index: -2; background: color-mix(in oklch, var(--bg-canvas), var(--fg-default) 5%); }
.stack.has-more:not(.is-open) > .lead::after { content: ""; inset: 14px 6px -14px; z-index: -3; background: color-mix(in oklch, var(--bg-canvas), var(--fg-default) 9%); }
.stack:not(.is-open) .long .ink { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Sharing cards (ama.js, share.js): a chosen card has its top right corner folded down, a
   dog-ear (below). On a phone a held card is chosen, so no card starts a selection or a link's
   menu there (Mustafa, 2026-10-31) ── */
/* On a computer, each card's top right corner turns up under the pointer and folds over at
   it; a click there starts choosing, and a chosen card is dog-eared (corner.css, ama.js). While
   it's up, the corner is cut from the card's paper (--cut, the paper's mask above), so what's
   under the fold is the table, never the card */
.note > .paper { --cut: 0px; transition: --cut 0s 340ms; }
.note.is-lifted > .paper, .note.is-dogeared > .paper { --cut: 28px; transition: --cut 0s; }
.is-touch .note:not(.write) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* Four sketched boxes, the pencil ticking one for each card chosen */
.share-places { display: flex; gap: 6px; margin-right: 10px; }
.share-place { position: relative; width: 15px; height: 15px; background: var(--mark-check-box-image) center / 100% no-repeat; }
.share-place .pencil { --pencil-ink: var(--fg-default); }

/* Their own thread folds as his do, by the same rules and the same deal (ama.js, toggle;
   Mustafa, 2026-10-30): the first exchange shows, and what came after tucks under his first
   answer. It comes dealt out, so his latest answer is in view. Gathered, the note to write
   on stands clear of the edges showing under the lead: 18px. ama.js moves it with the deck,
   from where it was to where it goes, so it never jumps */
.mine.has-more:not(.is-open) > .write { margin-top: 18px; }
.mine .note.write { cursor: text; }

/* ── Theirs alone: what happened to each piece of paper, stamped on it, in ink that says
   how it went (Mustafa, 2026-10-29: red is for something gone wrong): green for what went
   through, the writing's own blue-black for what's neither, red only for Closed ── */
.ds-stamp.is-good { --accent: var(--success); }
.ds-stamp.is-ink { --accent: var(--text-ink); }
.ds-stamp.is-closed { --accent: var(--danger); }
.stamped { padding-bottom: 32px; }
.stamped .ds-stamp-sm { right: 12px; bottom: 9px; }
.yours.stamped { padding-bottom: 38px; }
.yours.stamped .ds-stamp-sm { right: auto; left: 14px; bottom: 10px; }

/* Closed: a big Closed stamp where the note to write in was; the page reads only */
/* Its box is as tall as the stamp turned, so it sits as near the heading as anything else,
   and a little nearer, since its turned corners leave space above it anyway. On a phone its
   letters stay under the title's (Mustafa, 2026-10-29: read before the AMA's name, it was
   the loudest thing on the screen) */
.closed-stamp { position: relative; height: 76px; margin-top: -6px; --text-display: 1.25rem; }
@media (min-width: 960px) { .closed-stamp { height: 100px; margin-top: -8px; --text-display: 2.275rem; } }

@media (prefers-reduced-motion: reduce) {
  .ama-head .bear { transition: none; }
}

/* The page's exchanges in its HTML (amaReadHtml, server/ama/routes.ts), for what reads it
   without running scripts. theme.js sets data-theme before first paint, so wherever scripts
   run, ama.js draws the page and this never shows */
.ama-read { width: min(40rem, 100% - 2.5rem); margin: 0 auto 4rem; font: 400 var(--ama-read)/var(--ama-leading) var(--ama-font); color: var(--text-ink); }
:root[data-theme] .ama-read { display: none; }
.ama-read-ex { margin: 0 0 2.4rem; }
.ama-read p { margin: 0 0 0.6em; overflow-wrap: anywhere; }
.ama-read-asked { color: var(--fg-muted); }