/* Stemma. The identity comes from the "Research has changed." flyer: ink on paper stock, one vermilion,
   a serif for display, a quiet sans for everything you operate and a mono for evidence. The layout is a
   chat workspace: a sidebar of studies, one centred column, a prompt box. The theme follows the system. */
@font-face { font-family: "Big Shoulders"; font-weight: 700; font-display: swap; src: url("/static/fonts/BigShoulders-Bold.ttf") format("truetype"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-display: swap; src: url("/static/fonts/InstrumentSerif-Italic.ttf") format("truetype"); }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-display: swap; src: url("/static/fonts/InstrumentSerif-Regular.ttf") format("truetype"); }
@font-face { font-family: "Instrument Sans"; font-weight: 400; font-display: swap; src: url("/static/fonts/InstrumentSans-Regular.ttf") format("truetype"); }
@font-face { font-family: "Instrument Sans"; font-weight: 700; font-display: swap; src: url("/static/fonts/InstrumentSans-Bold.ttf") format("truetype"); }
@font-face { font-family: "Plex Mono"; font-weight: 400; font-display: swap; src: url("/static/fonts/IBMPlexMono-Regular.ttf") format("truetype"); }
@font-face { font-family: "Plex Mono"; font-weight: 700; font-display: swap; src: url("/static/fonts/IBMPlexMono-Bold.ttf") format("truetype"); }

/* ------------------------------------------------------------ theme tokens */
:root {
  color-scheme: light dark;
  --paper: #f6f5f1;                      /* the page: paper stock, embossed by --texture */
  --surface: #ffffff;                    /* raised things: the prompt box, cards, fields */
  --wash: #eceae4;                       /* quiet fills: hover, your own messages */
  --side: #f1efea;                       /* the sidebar */
  --ink: #141414;
  --graphite: #5d5a55;
  --rule: #dcd9d2;
  --edge: rgba(20, 20, 20, 0.26);        /* the border of something you can press or type in */
  --red: #d9391e;                        /* the accent, as a fill or a mark */
  --red-dark: #b32c14;                   /* the accent pressed */
  --red-ink: #b32c14;                    /* the accent as small text */
  --on-red: #ffffff;
  --focus: #d9391e;
  --log-bg: #141414;
  --log-ink: #eceae4;
  --log-dim: #b9b5aa;
  --log-faint: #8a877f;
  --log-mark: #ff7d66;
  --log-bad: #ff9c8a;
  --log-strong: #ffffff;
  --lift: 0 1px 1px rgba(20, 20, 20, 0.04), 0 14px 34px -18px rgba(20, 20, 20, 0.28);
  --scrim: rgba(20, 20, 20, 0.38);
  /* embossed paper: fractal noise used as a height map and lit from the upper left; mid grey leaves the stock as it is */
  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='e' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.38' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='3.2' diffuseConstant='.61'%3E%3CfeDistantLight azimuth='225' elevation='55'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23e)'/%3E%3C/svg%3E");
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "Plex Mono", ui-monospace, Menlo, monospace;
  --display: "Big Shoulders", "Arial Narrow", sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
  --measure: 44rem;
  --side-w: 260px;
  --top-h: 3.25rem;
  --foot-h: 1.2rem;                      /* breathing room under the one-viewport home page (there is no footer) */
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0d0d0d;                    /* neutral, no tint */
    --surface: #181818;
    --wash: #222222;
    --side: #121212;
    --ink: #ededed;
    --graphite: #a6a6a6;
    --rule: #2c2c2c;
    --edge: rgba(255, 255, 255, 0.26);
    --red: #c2331b;                      /* the same vermilion, a little darker */
    --red-dark: #a82b15;
    --red-ink: #f2836d;                  /* small accent text needs to be lighter to be read on black */
    --focus: #f2836d;
    --log-bg: #161616;
    --lift: 0 0 0 1px rgba(255, 255, 255, 0.02), 0 16px 36px -18px rgba(0, 0, 0, 0.9);
    --scrim: rgba(0, 0, 0, 0.6);
    --texture: none;
  }
}

/* ------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
body { margin: 0; color: var(--ink); font: 400 1rem/1.55 var(--sans); min-height: 100vh; min-height: 100dvh; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--paper) var(--texture); background-blend-mode: soft-light; }
a { color: inherit; text-decoration-color: var(--red); text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--red-ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--red) 26%, transparent); }
h1, h2, h3 { font-weight: 700; line-height: 1.15; margin: 0; }
p { margin: 0 0 1em; }
code, pre, .mono { font-family: var(--mono); font-size: 0.86em; }
.icon-btn svg, .side-nav svg, .send svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 0.6rem; top: -4rem; z-index: 50; background: var(--ink); color: var(--paper); padding: 0.55rem 0.9rem; border-radius: 999px; font-size: 0.86rem; text-decoration: none; }
.skip:focus { top: 0.6rem; color: var(--paper); }

/* Chrome is not selectable (you cannot drag across a button or a heading letter by letter);
   what you read stays selectable: paper content, chat, the activity log, form fields. */
h1, h2, h3, button, .btn, nav, label, legend, summary, .top, .side, .tabs, .rail, .badge, .stamp, .examples, .hint,
.card > h2, .listing li, .reg-index li, .rows li, .fg-graph, .fg-trail, .pager, .actions, .greeting, .lede, .latest, .checks li::before {
  -webkit-user-select: none; user-select: none;
}
.paper h1, .abstract, .refs, table, pre, .log, .chat, .seed-text, dl.brief, dl.answers, .kv, input, textarea {
  -webkit-user-select: text; user-select: text;
}

/* ------------------------------------------------------------ frame: sidebar, top bar, footer */
.col { min-height: 100vh; min-height: 100dvh; min-width: 0; display: flex; flex-direction: column; }
.has-side .col { margin-left: var(--side-w); }
main { flex: 1; min-width: 0; padding: 0 var(--gutter) 4rem; }

.top { flex: none; height: var(--top-h); display: flex; align-items: center; gap: 0.5rem; padding: 0 clamp(12px, 2.5vw, 24px); }
.top nav { margin-left: auto; display: flex; align-items: center; gap: clamp(0.9rem, 3vw, 1.5rem); font-size: 0.88rem; }
.top nav a, .top-link { text-decoration: none; color: var(--graphite); }
.top nav a:hover, .top nav a[aria-current="page"], .top-link:hover { color: var(--ink); }
.top .top-login { flex: none; margin-left: clamp(0.4rem, 2vw, 1rem); padding: 0.42rem 0.8rem; }
.top-link { margin-left: auto; font-size: 0.88rem; }
.wordmark { font-family: var(--display); font-size: 1.22rem; letter-spacing: 0.01em; text-transform: uppercase; text-decoration: none; line-height: 1; padding: 0.3rem 0.25rem; border-radius: 6px; }
.wordmark:hover { color: var(--ink); }
.wordmark i { font-family: var(--serif); font-style: italic; color: var(--red); text-transform: none; font-size: 1.2em; margin-left: 0.02em; }
.icon-btn { all: unset; box-sizing: border-box; width: 2.15rem; height: 2.15rem; display: inline-grid; place-items: center; border-radius: 9px; color: var(--graphite); cursor: pointer; -webkit-user-select: none; user-select: none; }
.icon-btn:hover { background: var(--wash); color: var(--ink); }
.icon-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.has-side .top [data-side-toggle], .has-side .top .wordmark { display: none; }     /* shown when the sidebar is closed */
html.side-closed .has-side .top [data-side-toggle] { display: inline-grid; }
html.side-closed .has-side .top .wordmark { display: inline-block; }

.side { position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--side-w); display: flex; flex-direction: column; background: var(--side) var(--texture); background-blend-mode: soft-light; border-right: 1px solid var(--rule); font-size: 0.88rem; }
html.side-closed .side { transform: translateX(-100%); visibility: hidden; }
/* the slide is shown only after someone uses the toggle (app.js adds .side-anim), never on load or when the window crosses the phone width */
html.side-anim .side { transition: transform 0.22s ease, visibility 0s; }
html.side-anim.side-closed .side { transition: transform 0.22s ease, visibility 0s 0.22s; }
html.side-anim .has-side .col { transition: margin-left 0.22s ease; }
html.side-closed .has-side .col { margin-left: 0; }
.side-head { height: var(--top-h); flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 0.55rem 0 0.8rem; }
.side-nav { display: flex; flex-direction: column; gap: 1px; padding: 0.2rem 0.55rem 0.6rem; }
.side a { text-decoration: none; }
.side-nav a, .side-list a { display: flex; align-items: center; gap: 0.6rem; padding: 0.44rem 0.55rem; border-radius: 9px; color: var(--ink); }
.side-nav a svg { color: var(--graphite); }
.side-nav a:hover, .side-list a:hover { background: var(--wash); color: var(--ink); }
.side-nav a[aria-current="page"], .side-list a[aria-current="page"] { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.side-new svg { color: var(--on-red); background: var(--red); border-radius: 50%; padding: 2px; }
.side-nav a.side-new svg { color: var(--on-red); }
.side-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0.4rem 0.55rem 0.8rem; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
.side-list h2 { font-size: 0.76rem; font-weight: 400; }
.side-list h2 a { display: inline-flex; padding: 0.3rem 0.55rem; color: var(--graphite); }
.side-list h2 a[aria-current="page"] { color: var(--ink); }
.side-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.side-list .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-list .dot { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; }
.side-list .dot.busy { background: var(--red); }
.side-list .dot.waiting { border: 1.5px solid var(--red); }
.side-empty { color: var(--graphite); padding: 0.2rem 0.55rem; font-size: 0.84rem; }
.side-foot { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; padding: 0.7rem 0.8rem; border-top: 1px solid var(--rule); }
.avatar { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-weight: 700; font-size: 0.84rem; }
.who { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.who .name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-link { grid-column: 1 / 3; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.6rem;
  margin: -0.3rem; padding: 0.3rem; border-radius: 10px; color: inherit; text-decoration: none; }
.who-link:hover, .who-link[aria-current="page"] { background: var(--wash); color: inherit; }
.credits-pill, .out { font-size: 0.78rem; color: var(--graphite); }
.who-link:hover .credits-pill, .out:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); }
.scrim { position: fixed; inset: 0; z-index: 25; background: var(--scrim); }


/* ------------------------------------------------------------ buttons / forms */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font: 700 0.9rem/1 var(--sans); padding: 0.7rem 1.1rem; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--paper); cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--red); border-color: var(--red); color: var(--on-red); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--edge); }
.btn.ghost:hover { background: var(--wash); color: var(--ink); border-color: var(--ink); }
.btn.small { padding: 0.5rem 0.85rem; font-size: 0.84rem; }
.btn[disabled] { opacity: 0.45; cursor: default; pointer-events: none; }
.send { all: unset; box-sizing: border-box; flex: none; width: 2.35rem; height: 2.35rem; display: inline-grid; place-items: center; border-radius: 50%; background: var(--red); color: var(--on-red); cursor: pointer; -webkit-user-select: none; user-select: none; transition: background-color 0.15s, opacity 0.15s; }
.send svg { stroke-width: 2; }
.send:hover { background: var(--red-dark); }
.send:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.send[disabled] { opacity: 0.35; cursor: default; }
input[type=text], input[type=search], input[type=password], input[type=email], textarea.plain { font: 400 1rem/1.4 var(--sans); padding: 0.62rem 0.8rem; border: 1px solid var(--edge); border-radius: 10px; background: var(--surface); color: var(--ink); width: 100%; }
input:focus-visible, textarea.plain:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
::placeholder { color: var(--graphite); opacity: 1; }
label { font-weight: 700; display: block; margin-bottom: 0.3rem; }
.note { color: var(--graphite); font-size: 0.9rem; }
.site-foot { padding: 0 var(--gutter) 1.5rem; text-align: center; font-size: 0.85rem; }
.site-foot a { color: var(--graphite); }
.alert { padding: 0.7rem 0.9rem; margin: 1rem 0; max-width: var(--measure); border: 1px solid color-mix(in srgb, var(--red) 55%, transparent); border-radius: 10px; background: var(--surface); }
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 1.2rem 1.3rem 1.3rem; box-shadow: var(--lift); }
.actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }
.inline-form { display: flex; gap: 0.5rem; }
.badge { display: inline-block; font: 400 0.76rem/1 var(--sans); padding: 0.34rem 0.6rem; border: 1px solid var(--rule); border-radius: 999px; color: var(--graphite); white-space: nowrap; }
.badge[data-kind="you"] { border-color: var(--red); color: var(--red-ink); }
.badge[data-kind="working"]::before { content: ""; display: inline-block; width: 0.42rem; height: 0.42rem; margin-right: 0.4rem; border-radius: 50%; background: var(--red); vertical-align: 0.06em; }
.badge[data-kind="done"] { border-color: var(--ink); color: var(--ink); }
.empty { color: var(--graphite); padding: 2.2rem 0; text-align: center; max-width: var(--measure); margin: 0 auto; }
.working { color: var(--graphite); }
.working::after { content: ""; display: inline-block; width: 0.5em; height: 1em; margin-left: 0.25em; background: var(--red); vertical-align: -0.12em; animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .working::after { animation: none; } }

/* ------------------------------------------------------------ home: one viewport, the prompt box at its centre */
.home .col { position: relative; height: 100vh; height: 100dvh; overflow: hidden; }
.home .top { position: absolute; inset: 0 0 auto 0; z-index: 2; }
.home main { height: 100%; padding-bottom: 0; }
.hero { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); justify-items: center; }
.hero-top { align-self: end; max-width: 46rem; padding: var(--top-h) 0 1.5rem; text-align: center; }
.greeting { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 8.6vw, 3.5rem); line-height: 1.02; letter-spacing: -0.012em; text-wrap: balance; }
.greeting em { color: var(--red); }
.lede { margin: 0.9rem auto 0; max-width: 34rem; color: var(--graphite); font-size: 0.95rem; text-wrap: balance; }
.seedbox { width: min(100%, 46rem); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--rule); border-radius: 1.6rem; box-shadow: var(--lift); }
.seedbox:focus-within { border-color: var(--edge); }
.seedbox textarea { display: block; width: 100%; min-height: 4.4rem; max-height: 30vh; border: 0; resize: none; padding: 1.1rem 1.35rem 0.2rem; background: transparent; color: var(--ink); font: 400 1.06rem/1.5 var(--sans); }
.seedbox textarea:focus { outline: none; }
.seedbox .row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.35rem 0.6rem 0.6rem 1.35rem; }
.hint { color: var(--graphite); font-size: 0.8rem; }
.seedbox:has(textarea:placeholder-shown) .send, .composer .box:has(textarea:placeholder-shown) .send { background: color-mix(in srgb, var(--ink) 52%, var(--surface)); color: var(--surface); }   /* nothing typed yet */
.hero-bottom { align-self: stretch; justify-self: center; width: min(100%, 46rem); min-height: 0; overflow: hidden; margin-bottom: var(--foot-h); padding: 0.2rem 2px 0; }
.hero-bottom .alert { margin: 0.9rem auto 0; font-size: 0.9rem; }
.hero-bottom .alert ~ .latest, .hero-bottom .alert ~ .examples li:nth-child(n+3) { display: none; }      /* a notice takes their room */
.examples { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.examples li { display: flex; }
.examples button { all: unset; box-sizing: border-box; flex: 1; min-width: 0; padding: 0.55rem 0.85rem; border: 1px solid var(--rule); border-radius: 12px; color: var(--graphite); font-size: 0.82rem; line-height: 1.35; cursor: pointer; }
.examples button span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.examples .field { font-weight: 600; color: var(--ink); margin-right: 0.2rem; }
.examples button:hover { color: var(--ink); border-color: var(--edge); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.examples button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.latest { margin: 0.9rem 0 0; text-align: center; color: var(--graphite); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-height: 640px) { .examples li:nth-child(n+3) { display: none; } }
@media (max-height: 540px) { .examples, .latest, .lede { display: none; } }
@media (max-height: 420px) {              /* a phone on its side: the page may scroll rather than hide the prompt box */
  .home .col { height: auto; overflow: visible; }
  .home .top { position: static; }
  .hero { display: block; padding: 1rem 0 2rem; }
  .hero-top { padding-top: 0; margin: 0 auto; }
  .seedbox { margin: 0 auto; }
  .hero-bottom { margin: 0 auto; }
}

/* ------------------------------------------------------------ generic page */
.page { max-width: var(--measure); margin: 0 auto; padding-top: 1.5rem; }
.page.wide { max-width: 64rem; }
.page h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.1rem, 6vw, 3rem); line-height: 1.05; margin-bottom: 1.1rem; text-align: center; }
.page h2 { font-size: 1.05rem; margin: 2rem 0 0.5rem; }
.page ul { padding-left: 1.1rem; }
.page.centred { text-align: center; padding-top: 14vh; }
.page.auth { max-width: 30rem; padding-top: 5vh; }
.page.auth > .note, .page.auth > .alert { text-align: center; }
.page.auth .card { margin-top: 1rem; }
.page.auth .card h2 { margin-top: 0; }
.page.auth .card > :last-child { margin-bottom: 0; }
.device-code { font-size: 2rem; font-weight: 700; letter-spacing: 0.08em; }
.lede-text { max-width: var(--measure); margin-left: auto; margin-right: auto; text-align: center; }
.links { display: flex; flex-wrap: wrap; gap: 0.2rem 1.2rem; }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.45rem 0.8rem 0.45rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 700; border-bottom: 1px solid var(--ink); }
.scroll-x { overflow-x: auto; }
.scroll-x th, .scroll-x td { white-space: nowrap; }          /* a wide table scrolls in its box; its numbers do not wrap */
.scroll-x td.note { white-space: normal; min-width: 13rem; }
.stamp { display: inline-block; font: 700 0.72rem/1 var(--mono); border: 1.5px solid var(--red); color: var(--red-ink); padding: 0.28rem 0.45rem; letter-spacing: 0.04em; text-transform: uppercase; transform: rotate(-2deg); margin-right: 0.3rem; }
pre.block { background: var(--wash); padding: 0.8rem; border-radius: 10px; overflow-x: auto; font-size: 0.78rem; line-height: 1.45; margin: 0; }
.rows { list-style: none; margin: 0; padding: 0; }
.page .rows { padding-left: 0; }
.rows li { padding: 0.9rem 0; border-top: 1px solid var(--rule); }
.rows li:last-child { border-bottom: 1px solid var(--rule); }
.row-title { text-decoration: none; font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; }
.row-title:hover { text-decoration: underline; text-decoration-color: var(--red); }
/* the credits page: the balance and one button, the plans small, then the tables (templates/credits.html) */
.billing h2 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; line-height: 1.1; margin: 2.4rem 0 0.7rem; }
.billing > p, .billing > .alert { max-width: var(--measure); }
.billing .center { text-align: center; max-width: none; }
.bal-card { max-width: 40rem; margin: 0 auto 1rem; padding: 1.3rem 1.4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.4rem; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--lift); }
.bal-card p { margin: 0; }
.bal-label { color: var(--graphite); font-size: 0.88rem; }
.bal-n { margin: 0.15rem 0 !important; }
.bal-n strong { font-size: 2.4rem; line-height: 1; letter-spacing: -0.02em; }
.bal-n span { color: var(--graphite); }
.bal-n .bal-usd { margin-left: 0.4rem; }
.bal-split { font-size: 0.88rem; color: var(--graphite); }
.bal-add { padding: 0.85rem 1.5rem; font-size: 0.95rem; }
@media (max-width: 480px) { .bal-add { flex: 1 1 100%; } }
.alert.ok { border-color: var(--ink); }
.page .plans-mini { list-style: none; margin: 1.6rem auto 0; padding: 0; max-width: 40rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.plans-mini > li { padding: 0.85rem 1rem; border: 1px solid var(--rule); border-radius: 12px; }
.plans-mini > li.mine { border-color: var(--edge); }
.plans-mini > li.soon { border-style: dashed; color: var(--graphite); }
.plans-mini p { margin: 0 0 0.45rem; }
.pm-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.pm-head .stamp { margin-right: 0; font-size: 0.64rem; }
.page .feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; font-size: 0.88rem; }
.feats li { position: relative; padding-left: 1.2rem; }
.feats li::before { content: ""; position: absolute; left: 0.1rem; top: 0.5em; width: 0.55rem; height: 0.3rem; border-left: 2px solid var(--red); border-bottom: 2px solid var(--red); transform: rotate(-45deg); }
.plans-mini .soon .feats li::before { border-color: var(--graphite); }
@media (max-width: 480px) { .page .plans-mini { grid-template-columns: minmax(0, 1fr); } }
.test-topup { text-align: center; }
.test-topup .btn { margin: 0.2rem; }
/* the "Add credits" window (static/credits.js) */
dialog.addc { width: min(30rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); padding: 0; border: 1px solid var(--rule); border-radius: 16px;
  background: var(--surface); color: var(--ink); box-shadow: var(--lift); overflow: auto; }
dialog.addc::backdrop { background: var(--scrim); }
/* the cost, confirmed before anything is held (static/project.js: confirmHold) */
.hold .hold-cost { font-size: 1.05rem; line-height: 1.5; }
.hold .hold-cost strong { font-size: 1.15rem; }
.hold .actions { margin-top: 0.3rem; }
.addc-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.2rem 0.4rem; }
.addc-head h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.7rem; }
.addc-x { all: unset; cursor: pointer; font-size: 1.6rem; line-height: 1; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; color: var(--graphite); }
.addc-x:hover { background: var(--wash); color: var(--ink); }
.addc-x:focus-visible { outline: 2px solid var(--focus); }
.addc-body { padding: 0.3rem 1.2rem 1.3rem; display: grid; gap: 0.75rem; }
.addc-body p { margin: 0; }
.addc-bal { color: var(--graphite); }
.addc-bal strong { color: var(--ink); }
.addc-label { font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem; margin-top: 0.2rem !important; }
.addc-label .stamp { font-size: 0.62rem; }
.addc-amounts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.45rem; }
.addc-chip { font: 700 0.95rem/1 var(--sans); padding: 0.75rem 0.3rem; border: 1px solid var(--edge); border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; }
.addc-chip:hover { background: var(--wash); }
.addc-chip[aria-checked="true"] { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); }
.addc-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
@media (max-width: 400px) { .addc-amounts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.addc-other { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-weight: 700; }
.addc-other input { font: 400 1rem/1.4 var(--sans); padding: 0.6rem 0.8rem; border: 1px solid var(--edge); border-radius: 10px; background: var(--surface); color: var(--ink); width: 100%; }
.addc-hint { margin-top: -0.4rem !important; }
.addc-sum { margin: 0; padding: 0.8rem 0.95rem; background: var(--wash); border-radius: 12px; display: grid; gap: 0.4rem; font-size: 0.93rem; }
.addc-sum > div { display: flex; justify-content: space-between; gap: 1rem; }
.addc-sum dt { color: var(--graphite); }
.addc-sum dd { margin: 0; font-variant-numeric: tabular-nums; }
.addc-sum .total { border-top: 1px solid var(--rule); padding-top: 0.45rem; font-weight: 700; }
.addc-sum .total dt { color: var(--ink); }
.addc-select { font: 400 1rem/1.4 var(--sans); padding: 0.65rem 0.8rem; border: 1px solid var(--edge); border-radius: 10px; background: var(--surface); color: var(--ink); width: 100%; }
.addc-new { display: grid; gap: 0.5rem; }
.addc-new[hidden] { display: none; }
.addc-pe { min-height: 2.5rem; }
.addc-buy { width: 100%; padding: 0.95rem 1.1rem; font-size: 1rem; margin-top: 0.3rem; }
.addc-said:empty { display: none; }
.addc-said { font-size: 0.92rem; }
.addc-said.bad { color: var(--red-ink); }
.addc-said.ok { font-weight: 700; }
.addc-study { font-size: 0.95rem; }
/* a study that cannot start for lack of credits: its cost and the two ways to pay for it (static/project.js) */
.paywall { margin: 1rem 0; padding: 1rem 1.1rem 1.1rem; max-width: var(--measure); background: var(--surface); border: 1px solid color-mix(in srgb, var(--red) 55%, transparent); border-radius: 12px; }
.paywall p { margin: 0; }
.paywall .pw-cost { font-weight: 700; }
.paywall .pw-cost .mono { font-size: 1.05em; }
.paywall .note { margin-top: 0.3rem; }
.paywall .actions { margin-top: 0.85rem; }
@media (max-width: 480px) { .paywall .actions .btn { flex: 1 1 100%; } }
.row-meta { margin: 0.45rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.9rem; color: var(--graphite); font-size: 0.86rem; }

/* ------------------------------------------------------------ study workspace: a header, tabs, a conversation */
.workspace main { padding-bottom: 0; }
.study { display: grid; grid-template-columns: minmax(0, 46rem); justify-content: center; }
.thread { display: flex; flex-direction: column; min-height: calc(100vh - var(--top-h)); min-height: calc(100dvh - var(--top-h)); }
.ws-head { padding-top: 0.2rem; }
.ws-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem 1rem; }
.ws-title h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.55rem, 4.6vw, 2.05rem); line-height: 1.1; overflow-wrap: anywhere; }
.ws-title .badge { margin-top: 0.4rem; }
.rail { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.rail li { padding-top: 0.4rem; border-top: 3px solid var(--rule); color: var(--graphite); font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail li.done { border-color: var(--ink); color: var(--ink); }
.rail li.active { border-color: var(--red); color: var(--ink); font-weight: 700; }
.rail li.failed { border-color: var(--red); color: var(--red-ink); font-weight: 700; }
.tabs { position: sticky; top: 0; z-index: 5; display: flex; gap: 0.1rem; margin-top: 0.7rem; overflow-x: auto; scrollbar-width: none; background: var(--paper) var(--texture) fixed; background-blend-mode: soft-light; box-shadow: inset 0 -1px 0 var(--rule); }
.tabs::-webkit-scrollbar { display: none; }
.tabs [role="tab"] { all: unset; box-sizing: border-box; flex: none; padding: 0.7rem 0.7rem 0.6rem; border-bottom: 2px solid transparent; color: var(--graphite); font-size: 0.9rem; white-space: nowrap; cursor: pointer; }
.tabs [role="tab"]:first-child { padding-left: 0.1rem; }
.tabs [role="tab"]:hover { color: var(--ink); }
.tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--red); }
.tabs [role="tab"]:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; border-radius: 8px; }
.panel { padding: 1.5rem 0 3rem; }
.panel:focus-visible { outline-offset: 6px; border-radius: 6px; }
.panel.conv { flex: 1; display: flex; flex-direction: column; padding-bottom: 0; }
.panel h2, .flow h2 { font-size: 0.95rem; margin-bottom: 0.5rem; }
.panel h2.gap { margin-top: 1.5rem; }
.panel > div > section + section, .panel > div > section + form, .revise { margin-top: 1.8rem; }
.flow { display: flex; flex-direction: column; gap: 1.5rem; padding-bottom: 1.5rem; }
.flow > div:empty { display: none; }
#dyn, #dyn-late { display: flex; flex-direction: column; gap: 1.5rem; }
.flow section > :last-child, .panel section > :last-child { margin-bottom: 0; }
.thread .alert { max-width: none; }
.msg.you { align-self: flex-end; max-width: min(100%, 38rem); padding: 0.7rem 1rem; background: var(--wash); border-radius: 1.2rem 1.2rem 0.35rem 1.2rem; }
.msg.you p { margin: 0; }
.seed-text { font-size: 1.05rem; overflow-wrap: anywhere; }
dl.answers { margin: 0; display: flex; flex-direction: column; gap: 0.55rem; font-size: 0.94rem; }
dl.answers dt { color: var(--graphite); font-size: 0.84rem; }
dl.answers dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.brief-title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 4.4vw, 1.95rem); line-height: 1.1; margin-bottom: 0.9rem; overflow-wrap: anywhere; }
.q { margin: 0 0 1.5rem; }
.q .why { color: var(--graphite); font-size: 0.88rem; margin: 0.1rem 0 0.55rem; }
.q legend { font-weight: 700; padding: 0; }
.q fieldset, fieldset.q { border: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; }
.opts { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.5rem; }
.opts label { font-weight: 400; display: flex; gap: 0.6rem; align-items: flex-start; border: 1px solid var(--rule); border-radius: 10px; padding: 0.55rem 0.75rem; margin: 0; cursor: pointer; }
.opts label:hover { border-color: var(--edge); }
.opts label:has(input:checked) { border-color: var(--ink); background: var(--wash); }
.opts input { margin-top: 0.3rem; accent-color: var(--red); }
label.check { font-weight: 400; display: flex; gap: 0.6rem; align-items: flex-start; }
label.check input { margin-top: 0.3rem; accent-color: var(--red); }
dl.brief { margin: 0; display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.55rem 1rem; }
dl.brief dt { font-weight: 700; }
dl.brief dd { margin: 0; overflow-wrap: anywhere; }
dl.brief ul { margin: 0; padding-left: 1.1rem; }
.cost { margin: 1.2rem 0 1rem; padding: 0.8rem 0.95rem; background: var(--wash); border-radius: 10px; font-size: 0.93rem; }
.page details > summary { cursor: pointer; font-weight: 700; padding: 0.6rem 0; border-top: 1px solid var(--rule); }
.page details:last-of-type:not([open]) > summary { border-bottom: 1px solid var(--rule); }
details.fold > summary { list-style: none; display: flex; align-items: baseline; gap: 0.6rem; width: fit-content; max-width: 100%; cursor: pointer; color: var(--graphite); font-size: 0.92rem; border-radius: 6px; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: ""; flex: none; width: 0.42em; height: 0.42em; margin-left: 0.15em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.2em) rotate(-45deg); transition: transform 0.15s; }
details.fold[open] > summary::before { transform: translateY(-0.3em) rotate(45deg); }
details.fold > summary:hover, details.fold[open] > summary { color: var(--ink); }
details.fold[open] > summary { margin-bottom: 0.8rem; }
div.log { font-family: var(--mono); font-size: 0.78rem; line-height: 1.5; background: var(--log-bg); color: var(--log-ink); padding: 0.9rem 1rem; border-radius: 12px; max-height: 20rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; scrollbar-width: thin; scrollbar-color: var(--log-faint) transparent; }
.log .ev { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); gap: 0 0.5em; padding: 0.08rem 0; }
.log .phase { color: var(--log-strong); font-weight: 700; }
.log .cmd, .log .file { color: var(--log-dim); }
.log .cmd::before { content: "$ "; color: var(--log-mark); }
.log .file::before { content: "wrote "; }
.log .error { color: var(--log-bad); }
.log .ts { color: var(--log-faint); }
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.figs img { width: 100%; border: 1px solid var(--rule); border-radius: 10px; background: #ffffff; }
.checks { list-style: none; padding: 0; margin: 0.5rem 0; }
.checks li { padding: 0.28rem 0 0.28rem 1.7rem; position: relative; }
.checks li::before { content: "ok"; position: absolute; left: 0; top: 0.42rem; font: 700 0.68rem/1 var(--mono); }
.checks li.bad::before { content: "no"; color: var(--red-ink); }
.pdf { display: block; width: 100%; height: min(80vh, 62rem); margin-top: 1rem; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); }
.revise { padding-top: 1.4rem; border-top: 1px solid var(--rule); }

.chat { display: flex; flex-direction: column; gap: 1.1rem; }
.chat .m { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat .m.user { align-self: flex-end; max-width: min(100%, 38rem); padding: 0.65rem 1rem; background: var(--wash); border-radius: 1.2rem 1.2rem 0.35rem 1.2rem; }
.chat .m.working { color: var(--graphite); }
.composer { position: sticky; bottom: 0; z-index: 4; margin-top: auto; padding: 1.3rem 0 0.7rem; background: var(--paper) var(--texture) fixed; background-blend-mode: soft-light; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 1.1rem); mask-image: linear-gradient(to bottom, transparent, #000 1.1rem); }
.composer .box { display: flex; align-items: flex-end; gap: 0.5rem; padding: 0.4rem 0.45rem 0.4rem 1.15rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 1.5rem; box-shadow: var(--lift); }
.composer .box:focus-within { border-color: var(--edge); }
.composer textarea { flex: 1; min-width: 0; max-height: 11rem; border: 0; resize: none; padding: 0.42rem 0; background: transparent; color: var(--ink); font: 400 1rem/1.5 var(--sans); }
.composer textarea:focus { outline: none; }
.composer .hint { margin: 0.5rem 0 0; text-align: center; font-size: 0.74rem; }
.composer .hint.bad { color: var(--red-ink); }

/* ------------------------------------------------------------ library */
.lib-head { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; padding-top: 1.5rem; text-align: center; }
.lib-head h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 7vw, 3.2rem); line-height: 1; }
.lib-search { display: flex; align-items: center; gap: 0.4rem; width: min(100%, 34rem); padding: 0.3rem 0.3rem 0.3rem 1.15rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 999px; box-shadow: var(--lift); }
.lib-search:focus-within { border-color: var(--edge); }
.lib-search input[type=search] { flex: 1; min-width: 0; padding: 0.4rem 0; border: 0; border-radius: 0; background: transparent; }
.lib-search input[type=search]:focus-visible { outline: none; }
.lib-count { max-width: var(--measure); margin: 1.1rem auto 0; text-align: center; }
.reg-index { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 0 2.2rem; }
.page .reg-index { padding-left: 0; }
.reg-index li { border-top: 1px solid var(--rule); padding: 0.9rem 0 1rem; }
.reg-index a { text-decoration: none; font-size: 1.05rem; }
.reg-index a:hover { text-decoration: underline; text-decoration-color: var(--red); }
.reg-index .n { font-family: var(--mono); font-size: 0.78rem; color: var(--graphite); margin-left: 0.4rem; }
.reg-index p { margin: 0.35rem 0 0; font-size: 0.92rem; }
.reg-body { padding: 0.3rem 0 1rem; }
.reg-body ul { margin: 0; }
.reg-kind { margin: 0.6rem 0 0.2rem; }
.fields { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; max-width: 60rem; margin: 1.2rem auto 0.4rem; font-size: 0.86rem; }
.fields a { text-decoration: none; padding: 0.3rem 0.75rem; border: 1px solid var(--rule); border-radius: 999px; color: var(--graphite); }
.fields a:hover { color: var(--ink); border-color: var(--edge); }
.fields a[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.fields .n { font-family: var(--mono); font-size: 0.74rem; margin-left: 0.15rem; }
.listing { list-style: none; margin: 1.2rem auto 0; padding: 0; max-width: 52rem; }
.listing li { display: grid; grid-template-columns: 7.6rem minmax(0, 1fr); gap: 0 1.2rem; padding: 1.05rem 0; border-top: 1px solid var(--rule); }
.listing .pid { font-family: var(--mono); font-size: 0.8rem; color: var(--graphite); padding-top: 0.45rem; }
.listing h3 { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; line-height: 1.15; }
.listing h3 a { text-decoration: none; }
.listing h3 a:hover { text-decoration: underline; text-decoration-color: var(--red); }
.listing .by { font-size: 0.9rem; color: var(--graphite); margin: 0.25rem 0 0.35rem; }
.listing .abs { font-size: 0.95rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pager { display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; }

/* ------------------------------------------------------------ paper page */
.paper { display: grid; grid-template-columns: minmax(0, 44rem) minmax(15rem, 19rem); justify-content: center; align-items: start; gap: 2rem 3.5rem; padding-top: 1.5rem; }
.paper .pid { font-family: var(--mono); font-size: 0.82rem; color: var(--graphite); }
.paper h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 6vw, 3rem); line-height: 1.06; margin: 0.4rem 0 0.9rem; }
.paper .authors { margin-bottom: 1.2rem; }
.paper .abstract { font-size: 1.05rem; line-height: 1.62; }
.paper h2 { font-size: 1rem; margin: 1.8rem 0 0.5rem; }
.paper-block { margin-top: 1.8rem; padding: 1.1rem 1.2rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; }
.paper-block h2:first-child { margin-top: 0; }
.paper aside { font-size: 0.92rem; padding: 1.1rem 1.2rem 1.2rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; }
.paper aside h2:first-child { margin-top: 0; }
.paper aside ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.paper aside li { padding: 0.32rem 0; border-bottom: 1px solid var(--rule); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.9rem; margin: 0; }
.kv dt { color: var(--graphite); }
.kv dd { margin: 0; font-family: var(--mono); font-size: 0.82rem; overflow-wrap: anywhere; }
.refs { padding-left: 1.2rem; font-size: 0.92rem; }
.refs li { margin-bottom: 0.4rem; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ small screens */
@media (max-width: 860px) {
  :root { --foot-h: 1.2rem; }
  .has-side .col, html.side-closed .has-side .col { margin-left: 0; }
  .side, html.side-closed .side { width: min(84vw, 300px); transform: translateX(-100%); visibility: hidden; box-shadow: 0 0 60px rgba(0, 0, 0, 0.3); }
  html.drawer-open .side { transform: none; visibility: visible; }
  html.side-anim .side, html.side-anim.side-closed .side { transition: transform 0.22s ease, visibility 0s 0.22s; }
  html.side-anim.drawer-open .side { transition: transform 0.22s ease, visibility 0s; }
  .has-side .top { position: sticky; top: 0; z-index: 20; background: var(--paper) var(--texture) fixed; background-blend-mode: soft-light; }
  .has-side .top [data-side-toggle] { display: inline-grid; }
  .has-side .top .wordmark { display: inline-block; }
  .home.has-side .top { position: absolute; background: none; }
  .study { grid-template-columns: minmax(0, 1fr); }   /* minmax(0, ...): a wide results table scrolls in its box instead of widening the page */
  .has-side .tabs { top: var(--top-h); }
  .rail { grid-auto-columns: 5.2rem; overflow-x: auto; scrollbar-width: none; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
  .rail::-webkit-scrollbar { display: none; }
  .paper { grid-template-columns: minmax(0, 1fr); }
  .paper h1 { overflow-wrap: anywhere; }
  dl.brief { grid-template-columns: 1fr; gap: 0.1rem; }
  dl.brief dt { margin-top: 0.7rem; }
  .card { padding: 1rem 1rem 1.1rem; }
  .listing li { grid-template-columns: 1fr; }
  .listing .pid { padding-top: 0; }
  .examples button { padding: 0.5rem 0.7rem; font-size: 0.78rem; }                /* two by two, so all four fields show */
  .seedbox .hint { font-size: 0.74rem; }
}
@media (max-width: 860px) and (max-height: 700px) { .examples { display: none; } }

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

/* ------------------------------------------------------------ field graph (/fields): begin */
.fg-lede { max-width: var(--measure); margin: 1rem auto 0; text-align: center; }
.fg { max-width: 76rem; margin: 0 auto; }
.fg-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fg-trail ol { list-style: none; margin: 1.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.15rem 0.5rem; font-size: 0.9rem; }
.fg-trail li { min-width: 0; overflow-wrap: anywhere; }
.fg-trail li + li::before { content: "/"; color: var(--graphite); margin-right: 0.5rem; }
.fg-trail a { text-decoration: none; }
.fg-trail a:hover { text-decoration: underline; text-decoration-color: var(--red); }
.fg-trail [aria-current] { font-weight: 700; }
.fg-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.5rem 2.5rem; align-items: start; margin-top: 1rem; }
.fg-graph { min-width: 0; padding: 0.6rem 0; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; }
.fg-graph:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.fg-loading .fg-graph { opacity: 0.55; }
.fg-svg { display: block; max-width: 100%; height: auto; margin: 0 auto; font-family: var(--sans); }
.fg-edge { stroke: var(--rule); stroke-width: 1; }
.fg-node circle { fill: var(--surface); stroke: var(--graphite); stroke-width: 1.5; }
.fg-node .fg-label { fill: var(--graphite); font-size: 13px; }
.fg-node .fg-count { fill: var(--graphite); font-family: var(--mono); font-size: 11px; }
.fg-node.fg-has circle { fill: var(--ink); stroke: var(--ink); }
.fg-node.fg-has .fg-label { fill: var(--ink); font-weight: 700; }
.fg-node.fg-has .fg-count { fill: var(--paper); }
.fg-spoke .fg-label { font-size: 11px; }
.fg-spoke .fg-n { font-family: var(--mono); fill: var(--red-ink); }
.fg-hit { fill: transparent; stroke: transparent; stroke-width: 1.5; }
.fg-centre circle { fill: var(--wash); stroke: var(--ink); stroke-width: 2; }
.fg-centre .fg-label { fill: var(--ink); font-size: 12px; font-weight: 700; }
.fg-centre .fg-count { fill: var(--graphite); font-size: 10px; }
.fg-up circle { fill: var(--surface); stroke: var(--ink); }
.fg-up path { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
a.fg-node { cursor: pointer; text-decoration: none; }
a.fg-node:hover circle { stroke: var(--red); }
a.fg-node:hover .fg-label { fill: var(--red-ink); }
a.fg-node:hover path { stroke: var(--red); }
a.fg-node:focus-visible { outline: none; }
a.fg-node:focus-visible circle { stroke: var(--focus); stroke-width: 3.5; }
a.fg-node:focus-visible .fg-label { fill: var(--red-ink); font-weight: 700; text-decoration: underline; }
a.fg-node:focus-visible .fg-hit { stroke: var(--focus); }
a.fg-node:focus-visible path { stroke: var(--focus); }
.fg-list, .fg-list ul { list-style: none; margin: 0; padding: 0; }
.fg-list { padding: 0 1rem; }
.fg-list ul { padding-left: 1.2rem; margin-bottom: 0.4rem; }
.fg-list > li { border-top: 1px solid var(--rule); padding: 0.55rem 0; }
.fg-list > li:first-child { border-top: 0; }
.fg-list > li > a { font-weight: 700; }
.fg-list a { text-decoration: none; }
.fg-list a:hover { text-decoration: underline; text-decoration-color: var(--red); }
.fg-list .n, .fg-papers .pid { font-family: var(--mono); font-size: 0.78rem; color: var(--graphite); margin-left: 0.3rem; white-space: nowrap; }
.fg-panel { min-width: 0; }
.fg-panel .fg-kind { font-size: 0.8rem; line-height: 1.2; color: var(--graphite); margin: 0 0 0.3rem; }
.fg-panel h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 4.5vw, 2rem); line-height: 1.1; margin-bottom: 0.6rem; overflow-wrap: anywhere; }
.fg-panel h3 { font-size: 1rem; margin: 1.4rem 0 0.2rem; }
.fg-summary { font-size: 0.95rem; }
.fg-links { display: flex; flex-wrap: wrap; gap: 0.2rem 1.2rem; }
.fg-papers { list-style: none; margin: 0 0 1rem; padding: 0; }
.fg-papers li { border-top: 1px solid var(--rule); padding: 0.6rem 0; overflow-wrap: anywhere; }
.fg-papers li:last-child { border-bottom: 1px solid var(--rule); }
.fg-papers a { text-decoration: none; }
.fg-papers a:hover { text-decoration: underline; text-decoration-color: var(--red); }
@media (max-width: 900px) {
  .fg-cols { grid-template-columns: minmax(0, 1fr); }      /* the panel goes below the graph */
}
/* ------------------------------------------------------------ field graph: end */
/* ------------------------------------------------------------ rv: the review record (paper page, library rows, study page): start
   Colours are the theme tokens only, so both schemes work: ink = accepted, the accent = not accepted, graphite = open. */
.rv-status { display: flex; align-items: baseline; gap: 0.5rem; font: 700 0.9rem/1.35 var(--sans); margin: 0.2rem 0 0.7rem; }
.rv-status::before { content: ""; flex: none; width: 0.6rem; height: 0.6rem; border: 2px solid var(--graphite); border-radius: 50%; }
.rv-status.rv-accepted::before { background: var(--ink); border-color: var(--ink); }
.rv-status.rv-rejected::before, .rv-status.rv-rejected_final::before { background: var(--red); border-color: var(--red); }
.rv-status.rv-revise::before, .rv-status.rv-revising::before { border-color: var(--red); }
.rv-status.rv-withdrawn { color: var(--graphite); }
.listing .rv-status { font-size: 0.82rem; margin: 0 0 0.35rem; }
.fields.rv-filter { margin-top: 1rem; margin-bottom: 0; }
.rv { min-width: 0; }
.rv h3 { font-size: 1rem; margin: 1.5rem 0 0.6rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.rv h4 { font-size: 0.92rem; margin: 1.1rem 0 0.25rem; }
.rv h5 { font: 400 0.74rem/1.2 var(--mono); margin: 0.9rem 0 0.2rem; color: var(--graphite); text-transform: uppercase; letter-spacing: 0.04em; }
.rv ul { padding-left: 1.2rem; margin: 0.3rem 0; }
.rv-none { color: var(--graphite); }
.rv-decision { background: var(--wash); padding: 0.8rem 1rem; border-left: 3px solid var(--graphite); border-radius: 0 10px 10px 0; }
.rv-decision.rv-accept { border-left-color: var(--ink); }
.rv-decision.rv-reject, .rv-decision.rv-revise { border-left-color: var(--red); }
.rv-decision p { margin: 0.2rem 0; }
.rv-outcome { font-weight: 700; }
.rv-reasons { font-size: 0.92rem; }
.rv table { font-size: 0.84rem; margin: 0.5rem 0; }
.rv-who { color: var(--graphite); font-size: 0.86rem; margin: 0.2rem 0 0.5rem; overflow-wrap: anywhere; }
.rv-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.rv-review, .rv-response { border-top: 1px solid var(--rule); padding: 0.15rem 0; min-width: 0; }
.rv-review > summary, .rv-response > summary { cursor: pointer; font-weight: 700; font-size: 0.92rem; padding: 0.55rem 0; overflow-wrap: anywhere; }
.rv-direction { border: 1px solid var(--edge); border-radius: 10px; padding: 0.8rem 1rem; margin: 1rem 0; background: var(--paper); }
.rv-direction h4 { margin-top: 0; }
.rv-letter { white-space: pre-wrap; overflow-wrap: anywhere; font: 400 0.82rem/1.5 var(--mono); background: var(--wash); border-radius: 10px; padding: 0.8rem; margin: 0.4rem 0 0.6rem; max-width: 100%; }
.rv-versions, .rv-withdrawal { margin-top: 1rem; font-size: 0.9rem; }
/* the study page's Reviews tab */
.rv-study .rv-list { list-style: none; padding: 0; margin: 0.8rem 0; }
.rv-study .rv-list > li { padding: 0.6rem 0; border-top: 1px solid var(--rule); }
.rv-study .rv-list ul { margin: 0.3rem 0 0; padding-left: 1.2rem; }
.rv-form { margin-top: 1.4rem; }
.rv-form textarea { display: block; width: 100%; min-height: 9rem; resize: vertical; }
.rv-count { font-size: 0.8rem; color: var(--graphite); }
.tabs [role="tab"][data-attention]::after { content: ""; display: inline-block; width: 0.42rem; height: 0.42rem; margin-left: 0.35rem; border-radius: 50%; background: var(--red); vertical-align: 0.12em; }
/* ------------------------------------------------------------ rv: end */

/* ------------------------------------------------------------ how it works, asking for an invitation */
.page.how { padding-bottom: 2rem; }
.page.how h2 { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; margin: 2.6rem 0 0.7rem; scroll-margin-top: 1rem; }
.page.how h3 { font-size: 1rem; margin: 1.6rem 0 0.5rem; }
.how-lede { font-size: 1.08rem; text-align: center; text-wrap: balance; }
.how-stats { text-align: center; color: var(--graphite); font-size: 0.92rem; }
.how-stats strong { color: var(--ink); font-family: var(--mono); }
.how-toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin: 1.4rem 0 0; font-size: 0.86rem; }
.how-toc a { text-decoration: none; padding: 0.3rem 0.75rem; border: 1px solid var(--rule); border-radius: 999px; color: var(--graphite); }
.how-toc a:hover { color: var(--ink); border-color: var(--edge); }
.page ol.how-steps { list-style: none; counter-reset: step; padding-left: 0; margin: 0; }
.how-steps li { counter-increment: step; position: relative; padding: 0.2rem 0 0.9rem 2.6rem; }
.how-steps li::before { content: counter(step); position: absolute; left: 0; top: 0.15rem; width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border: 1px solid var(--edge); border-radius: 50%; font: 700 0.8rem/1 var(--mono); }
.how-labels { display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: 0.35rem 1.2rem; margin: 0; }
.how-labels dt { font-weight: 700; }
.how-labels dd { margin: 0; color: var(--graphite); }
.stack label { margin-top: 0.9rem; }
.stack label:first-child { margin-top: 0; }
.stack label .note { font-weight: 400; }
.stack .actions { margin-top: 1rem; }
.stack > .note { margin: 0.8rem 0 0; }
.hp { position: absolute; left: -200vw; width: 1px; height: 1px; overflow: hidden; }
.hint a, .latest a, .lede a { color: inherit; }
.empty .btn { margin: 0.4rem 0; }
@media (max-width: 860px) {
  .how-labels { grid-template-columns: 1fr; gap: 0.1rem; }
  .how-labels dt { margin-top: 0.6rem; }
  .top nav { gap: 0.9rem; font-size: 0.84rem; white-space: nowrap; }
  .top .top-login { margin-left: 0.3rem; padding: 0.38rem 0.7rem; font-size: 0.8rem; }
}
@media (max-width: 380px) {          /* the smallest phones: the wordmark, three links and the way in still share one line */
  .top { gap: 0.3rem; }
  .top nav { gap: 0.6rem; font-size: 0.8rem; }
  .top .top-login { margin-left: 0.15rem; padding: 0.36rem 0.55rem; }
}
@media (max-width: 345px) {
  .top { padding: 0 8px; }
  .top .wordmark { font-size: 1.08rem; padding-left: 0; padding-right: 0; }
  .top nav { gap: 0.45rem; font-size: 0.76rem; }
  .top .top-login { margin-left: 0; padding: 0.34rem 0.5rem; font-size: 0.76rem; }
}

.scroll-x:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.page.auth > .card + .note { margin-top: 1rem; }

/* ------------------------------------------------------------ the door of the log-in page: the access code, then GitHub */
.page.auth .door { text-align: center; }
.page.auth .door h2 { margin-bottom: 0.9rem; }
.code-form { display: flex; flex-direction: column; gap: 0.7rem; align-items: stretch; }
.code-input { width: 100%; text-align: center; font: 700 1.7rem/1.2 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; padding: 0.8rem 0.6rem; border: 1px solid var(--edge); border-radius: 12px; background: var(--surface); color: var(--ink); }
.code-input::placeholder { color: color-mix(in srgb, var(--graphite) 55%, transparent); }
.btn.wide { display: flex; width: 100%; padding: 0.9rem 1.1rem; font-size: 1rem; }
.gh-btn { gap: 0.6rem; }
.gh-btn .gh-mark { flex: none; fill: currentColor; }
.page.auth .door .note { margin: 0.9rem 0 0; }
.page.auth .door .ok { margin: 0 0 0.9rem; font-weight: 700; }
.page.auth .door .ok::before { content: "\2713\00a0"; color: var(--red-ink); }
.page.auth .door #device { margin-top: 1rem; }
.page.auth > .note + .note { margin-top: 0.4rem; }
.google-btn { gap: 0.6rem; }
.google-btn .g-mark { flex: none; }
.email-btn { gap: 0.6rem; margin-top: 0.6rem; }
.email-btn .mail-mark { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.page.auth .door .or { display: flex; align-items: center; gap: 0.8rem; margin: 1.1rem 0; color: var(--graphite); font-size: 0.85rem; }
.page.auth .door .or::before, .page.auth .door .or::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }

/* deleting one's account (templates/account_delete.html), and the way to it at the foot of the credits page */
.btn.danger { background: var(--red); border-color: var(--red); color: var(--on-red); }
.btn.danger:hover { background: var(--red-dark); border-color: var(--red-dark); }
.btn.danger:disabled, .btn.danger:disabled:hover { opacity: 0.45; cursor: not-allowed; background: var(--red); border-color: var(--red); }
.delete-account .del-list li { margin: 0.35rem 0; }
.delete-account form { margin-top: 1.6rem; }
.del-papers { border: 1px solid var(--rule); border-radius: 12px; padding: 0.9rem 1rem 0.4rem; margin: 0 0 1.4rem; }
.del-papers legend { font-weight: 700; padding: 0 0.3rem; }
.del-papers ul { list-style: none; padding: 0; margin: 0.6rem 0 0; }
.del-papers li { padding: 0.7rem 0; border-top: 1px solid var(--rule); }
.del-papers .t { margin: 0 0 0.4rem; overflow-wrap: anywhere; }
.del-papers .opts { margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.del-papers label { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.del-confirm { display: block; margin-bottom: 0.4rem; }
.delete-account #confirm { width: 100%; max-width: 22rem; font: 1rem var(--mono, monospace); padding: 0.6rem 0.75rem; border: 1px solid var(--edge); border-radius: 8px; background: var(--surface); color: var(--ink); }
.account-end { margin-top: 2.6rem; padding-top: 1rem; border-top: 1px solid var(--rule); }

/* ------------------------------------------------------------ the landing page (templates/landing.html): signed-out visitors at / */
.landing { max-width: 72rem; margin: 0 auto; }
.l-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  min-height: min(calc(100vh - var(--top-h) - 2rem), 50rem); min-height: min(calc(100dvh - var(--top-h) - 2rem), 50rem); padding: clamp(2rem, 6vh, 4rem) 0; }
.l-title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.7rem, 6.2vw, 5.4rem); line-height: 0.98; letter-spacing: -0.018em; text-wrap: balance; max-width: 15ch; }
.l-lede { margin: 1.5rem 0 0; max-width: 34rem; font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.6; color: var(--graphite); }
.l-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2rem; }
.btn.l-cta { padding: 0.95rem 1.5rem; font-size: 1rem; }
.l-fine { margin: 1rem 0 0; font-size: 0.86rem; color: var(--graphite); max-width: 34rem; }

.l-study { margin: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: 20px; padding: 1.4rem 1.5rem 1.3rem; box-shadow: var(--lift); }
.l-study-head { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--graphite); }
.l-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.l-seed { margin: 0.8rem 0 1.1rem; font-family: var(--serif); font-size: 1.35rem; line-height: 1.3; }
.l-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.15rem 1rem; }
.l-track li { display: flex; align-items: center; gap: 0.6rem; padding: 0.42rem 0; font-size: 0.94rem; color: var(--ink); border-top: 1px solid var(--rule); }
.l-mark { flex: none; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--edge); position: relative; }
.l-track.playing li { color: var(--graphite); }
.l-track.playing li.now, .l-track li.done { color: var(--ink); }
.l-track li.now .l-mark { border-color: var(--red); animation: l-pulse 0.9s ease-in-out infinite; }
.l-track li.done .l-mark { background: var(--red); border-color: var(--red); }
.l-track li.done .l-mark::after { content: ""; position: absolute; left: 4.2px; top: 1.6px; width: 3.5px; height: 7px; border: solid var(--on-red); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.l-study-end { margin: 1rem 0 0; font-weight: 700; font-size: 0.95rem; }
.l-study-end::before { content: "\2713\00a0"; color: var(--red-ink); }
.l-track.playing ~ .l-study-end { opacity: 0; transition: opacity 0.4s; }
.l-track.playing ~ .l-study-end.shown { opacity: 1; }
@keyframes l-pulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 25%, transparent); } }

.l-h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; }
.l-steps, .l-proof, .l-library { padding: clamp(3rem, 8vh, 5rem) 0; border-top: 1px solid var(--rule); }
.l-step-list { list-style: none; margin: 2.2rem 0 0; padding: 0; counter-reset: st; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.6rem; }
.l-step-list li { counter-increment: st; }
.l-step-list li::before { content: counter(st); display: block; font: 400 2.2rem/1 var(--serif); color: var(--red-ink); margin-bottom: 0.6rem; }
.l-step-list h3 { font-size: 1rem; }
.l-step-list p { margin: 0.35rem 0 0; color: var(--graphite); font-size: 0.93rem; line-height: 1.5; }
.l-proof-list { margin: 2.2rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; }
.l-proof-list dt { font-weight: 700; font-size: 1.05rem; }
.l-proof-list dd { margin: 0.4rem 0 0; color: var(--graphite); line-height: 1.55; max-width: 32rem; }
.l-lib-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.l-more { font-size: 0.92rem; }
.l-papers { list-style: none; margin: 1.8rem 0 0; padding: 0; }
.l-papers li { border-top: 1px solid var(--rule); }
.l-papers li:last-child { border-bottom: 1px solid var(--rule); }
.l-papers a { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 0; text-decoration: none; }
.l-paper-title { font-family: var(--serif); font-size: 1.3rem; line-height: 1.25; }
.l-papers a:hover .l-paper-title { color: var(--red-ink); }
.l-paper-meta { color: var(--graphite); font-size: 0.88rem; }
.l-final { text-align: center; padding: clamp(4rem, 12vh, 7rem) 0 clamp(3rem, 8vh, 5rem); border-top: 1px solid var(--rule); }
.l-final-title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.02; margin-bottom: 1.8rem; text-wrap: balance; }
@media (max-width: 900px) {
  .l-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 2rem; }
  .l-step-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .l-proof-list, .l-track { grid-template-columns: 1fr; }
  .l-step-list { gap: 1.6rem 1rem; }
  .l-actions .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .l-track li.now .l-mark { animation: none; } }

/* a copy that is not the real site (RH_ENV_LABEL, the staging service) says so on every page */
.env-flag { position: fixed; right: 12px; bottom: 12px; z-index: 60; max-width: min(22rem, calc(100vw - 24px)); margin: 0; padding: 0.45rem 0.8rem;
  border-radius: 12px; background: var(--red); color: var(--on-red); font-size: 0.78rem; font-weight: 700; line-height: 1.35; pointer-events: none; }

/* signing in with an email address (templates/email_login.html): the address, then six boxes for the PIN */
.pin-to { margin: 0 0 1rem; font-size: 0.95rem; color: var(--graphite); }
.pin-to strong { color: var(--ink); word-break: break-all; }
.pin-fixed { margin: 0 0 1rem; padding: 0.8rem 1rem; border: 1px solid var(--rule); border-radius: 12px; background: var(--wash); font: 700 1rem/1.3 var(--sans); word-break: break-all; }
.pin-email { width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--edge); border-radius: 12px; background: var(--surface); color: var(--ink); font: 400 1rem/1.3 var(--sans); margin-bottom: 0.8rem; }
.pin-boxes { display: flex; justify-content: center; gap: clamp(0.35rem, 2vw, 0.6rem); margin: 0.2rem 0 1rem; }
.pin-boxes input { width: clamp(2.6rem, 11vw, 3.2rem); height: clamp(3.2rem, 13vw, 3.8rem); text-align: center; font: 700 1.6rem/1 var(--mono);
  border: 1px solid var(--edge); border-radius: 12px; background: var(--surface); color: var(--ink); caret-color: var(--red); }
.pin-boxes input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent); }
.pin-boxes input.filled { border-color: var(--ink); }
.pin-boxes.bad input { border-color: var(--red); animation: pin-shake 0.32s; }
.pin-boxes .gap { width: 0.4rem; }
.pin-row { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.9rem; font-size: 0.9rem; }
.pin-row button.link { border: 0; background: none; padding: 0; color: var(--ink); font: inherit; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 0.18em; cursor: pointer; }
.pin-row button.link[disabled] { color: var(--graphite); text-decoration: none; cursor: default; }
@keyframes pin-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .pin-boxes.bad input { animation: none; } }