/* Sediment. Colours and fonts come from the visitor's theme (themes/tokens.py),
   which sets the custom properties below on :root. These are the fallbacks. */
:root {
  --bg: #f1ece1;
  --surface: #faf7f0;
  --text: #221e19;
  --muted: #6b6155;
  --line: #d9cfbe;
  --accent: #9c3f1a;
  --on-accent: #ffffff;
  --deep: #4a3b30;
  --layer-0: #faf7f0; --on-layer-0: #221e19;
  --layer-1: #e4ddd3; --on-layer-1: #221e19;
  --layer-2: #cfc3b6; --on-layer-2: #221e19;
  --layer-3: #b9a998; --on-layer-3: #221e19;
  --layer-4: #8a7869; --on-layer-4: #f1ece1;
  --layer-5: #4a3b30; --on-layer-5: #f1ece1;
  --bedrock: #352a23; --on-bedrock: #f1ece1;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --radius: 3px;
  --rail: 56px;
  /* How wide pages get, margins included: the header, the page and the
     footer line up on it. The margins grow with the screen, so a big screen
     keeps some space either side; a phone keeps 1rem. */
  --frame: 100rem;
  --gutter: clamp(1rem, 6vw - 2.5rem, 5rem);
  /* Worked out from the theme's own colours and corners, for buttons, boxes
     and cards: rounder corners than its edges, a firmer line for things you
     use, a faint wash of the text colour for hovering, a ring for focus. */
  --r-control: calc(var(--radius) * 0.5 + 5px);
  --r-card: calc(var(--radius) + 8px);
  --line-strong: color-mix(in srgb, var(--line) 72%, var(--muted));
  --line-hover: color-mix(in srgb, var(--line) 40%, var(--muted));
  --tint: color-mix(in srgb, var(--text) 5%, transparent);
  --tint-strong: color-mix(in srgb, var(--text) 9%, transparent);
  --accent-hover: color-mix(in srgb, var(--accent) 86%, var(--text));
  --accent-press: color-mix(in srgb, var(--accent) 76%, var(--text));
  --ring: color-mix(in srgb, var(--accent) 24%, transparent);
  --danger: light-dark(#b3261e, #f28b82);
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0.5rem 0 1rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }

a { color: var(--accent); text-underline-offset: 0.15em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
code, pre { font-family: var(--font-mono); }

.visually-hidden, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip:focus { position: fixed; top: 0.5rem; left: 0.5rem; z-index: 99; background: var(--surface); padding: 0.5rem; }

.muted, .meta { color: var(--muted); }
.meta { font-size: 0.85rem; }

/* ── The core-sample rail: a depth ruler down the left edge ───────────── */
.rail {
  position: fixed; inset: 0 auto 0 0; width: var(--rail); z-index: 5;
  border-right: 1px solid var(--line);
  background:
    repeating-linear-gradient(180deg, var(--line) 0 1px, transparent 1px 2.5%) right / 8px 100% no-repeat,
    repeating-linear-gradient(180deg, var(--muted) 0 1px, transparent 1px 10%) right / 16px 100% no-repeat,
    var(--bg);
  font-family: var(--font-mono); font-size: 0.6rem; color: var(--muted);
  pointer-events: none;
}
.rail-mark { position: absolute; right: 20px; transform: translateY(-1px); }
.rail-mark:first-child { margin-top: 2px; }
/* Ten marks down the rail, a tenth of the way apart. */
.rail-mark:nth-child(2) { top: 10%; } .rail-mark:nth-child(3) { top: 20%; } .rail-mark:nth-child(4) { top: 30%; }
.rail-mark:nth-child(5) { top: 40%; } .rail-mark:nth-child(6) { top: 50%; } .rail-mark:nth-child(7) { top: 60%; }
.rail-mark:nth-child(8) { top: 70%; } .rail-mark:nth-child(9) { top: 80%; } .rail-mark:nth-child(10) { top: 90%; }
.rail-head { position: absolute; left: 0; right: 0; top: 0; border-top: 2px solid var(--accent); }
.rail-head span {
  position: absolute; left: 4px; top: 3px; color: var(--text); background: var(--bg); padding: 0 2px;
}
@media (max-width: 1100px) { .rail { display: none; } }
@media (min-width: 1101px) { body { padding-left: var(--rail); } }

/* ── Header ─────────────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.top-inner, .foot-inner {
  max-width: var(--frame); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem;
}
.top-inner { min-height: 3.5rem; }
.brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.2rem;
  color: var(--text); text-decoration: none;
}
.mark { display: inline-grid; gap: 2px; width: 18px; }
.mark i { display: block; height: 3px; background: var(--layer-5); }
.mark i:nth-child(1) { background: var(--accent); width: 100%; }
.mark i:nth-child(2) { background: var(--layer-3); width: 80%; }
.mark i:nth-child(3) { background: var(--layer-4); width: 55%; }
.mark i:nth-child(4) { width: 30%; }
.nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; }
.nav a { color: var(--muted); text-decoration: none; padding: 0.2rem 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }
/* You, on one line: background work, your avatar, Settings and Log out.
   Below the width where the header fits on one line with all three of
   background work's counts showing, that line has a row of its own whether
   or not anything's counted, so the header never changes height as work
   comes and goes. (A sixth link in the nav, Family, needs a little more room.) */
.who-am-i { margin-left: auto; display: flex; align-items: center; gap: 0.9rem; min-height: 2rem; }
.who-am-i form { margin: 0; }
.who-am-i > a, .who-am-i > form .link { white-space: nowrap; }
@media (min-width: 641px) and (max-width: 809px) { .who-am-i:has(.jobs) { flex-basis: 100%; } }
@media (min-width: 641px) and (max-width: 879px) { .top-inner:has(.nav > a:nth-child(6)) .who-am-i:has(.jobs) { flex-basis: 100%; } }
@media (max-width: 400px) { .who-am-i { gap: 0.6rem; } }
.nav .icon, .who-icon .icon { display: none; }

/* ── On a phone ─────────────────────────────────────────────────────── */
/* Like an app: once you're logged in, the main links are a bar along the
   bottom, each an icon over its name, out of the way while you type (the
   typing flag, from static/js/site.js). The header keeps the brand and you
   on one line (the brand shrinks to its mark on the narrowest phones while
   background work is counted): Settings, and Staff for staff, are icons,
   and Log out moves into Settings, under its tabs. The page stays clear of a phone's rounded
   corners, notch and home bar (viewport-fit=cover in base.html). */
.top { padding-top: env(safe-area-inset-top); }
@media (max-width: 1100px) { body { padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); } }
@media (max-width: 640px) {
  .top-inner:has(.nav > a:nth-child(2)) { flex-wrap: nowrap; column-gap: 0.75rem; }
  .top-inner:has(.nav > a:nth-child(2)) .who-am-i { flex-basis: auto; min-width: 0; margin-left: auto; gap: 0.7rem; }
  .top-inner:has(.nav > a:nth-child(2)) .who-am-i [data-logout] { display: none; }
  .top-inner:has(.nav > a:nth-child(2)) .who-icon { display: inline-flex; padding: 0.35rem; margin: -0.35rem; color: var(--text); }
  .top-inner:has(.nav > a:nth-child(2)) .who-icon .icon { display: block; width: 1.35rem; height: 1.35rem; }
  .top-inner:has(.nav > a:nth-child(2)) .who-icon span { display: none; } /* its aria-label still says what it is */

  .nav:has(> a:nth-child(2)) {
    position: fixed; inset: auto 0 0; z-index: 20; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0;
    padding: 0.3rem env(safe-area-inset-right) calc(0.3rem + env(safe-area-inset-bottom)) env(safe-area-inset-left);
    background: var(--bg); border-top: 1px solid var(--line);
  }
  .nav:has(> a:nth-child(2)) a {
    display: flex; flex-direction: column; align-items: center; gap: 0.15rem; min-width: 0; padding: 0.25rem 0.1rem;
    border: 0; font: 500 0.7rem/1.2 var(--font-body); letter-spacing: 0; text-transform: none; -webkit-tap-highlight-color: transparent;
  }
  .nav:has(> a:nth-child(2)) .icon { display: block; width: 1.4rem; height: 1.4rem; }
  .nav:has(> a:nth-child(2)) span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav:has(> a:nth-child(2)) a[aria-current="page"] { color: var(--accent); }
  .nav:has(> a:nth-child(2)) a[aria-current="page"] .icon { stroke-width: 2.2; }
  body:has(.nav > a:nth-child(2)) { padding-bottom: calc(3.6rem + env(safe-area-inset-bottom)); }
  /* Whatever's scrolled to (by Tab, a link to part of a page) stops above the bar, not under it. */
  html:has(.nav > a:nth-child(2)) { scroll-padding-bottom: calc(3.6rem + env(safe-area-inset-bottom)); }
  html[data-typing] .nav:has(> a:nth-child(2)) { display: none; }
  html[data-typing] body:has(.nav > a:nth-child(2)) { padding-bottom: env(safe-area-inset-bottom); }
}
@media (max-width: 400px) {
  .top-inner:has(.nav > a:nth-child(2)) .brand { font-size: 1.05rem; }
  /* Six tabs (with Family) get a size smaller, so "My layers" still fits. */
  .nav:has(> a:nth-child(6)) a { font-size: 0.64rem; }
}
@media (max-width: 359px) {
  .top-inner:has(.nav > a:nth-child(2)):has(.jobs:not([hidden])) .brand { gap: 0; font-size: 0; }
}
/* Staff have one more icon up there, so theirs shrinks a little sooner. */
@media (max-width: 430px) {
  .top-inner:has(.nav > a:nth-child(2)):has(.jobs:not([hidden])):has(.who-icon + .who-icon) .brand { gap: 0; font-size: 0; }
}
/* Inside the installed app, the links that say how to get it go. */
@media (display-mode: standalone) { .not-in-app { display: none !important; } }

/* ── Page frame ─────────────────────────────────────────────────────── */
main { margin: 0 auto; padding: 1.5rem var(--gutter) 3rem; }
main.full { max-width: var(--frame); }
main.wide { max-width: 72rem; }

.message {
  display: flex; align-items: flex-start; gap: 0.6rem; margin: 0 0 1.2rem; padding: 0.7rem 0.9rem;
  border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-control);
  background: var(--surface); font-size: 0.92rem;
}
.message.error { border-left-color: var(--danger); }

.foot { border-top: 1px solid var(--line); padding: 1.5rem 0 2.5rem; color: var(--muted); font-size: 0.85rem; }
.foot-inner { justify-content: space-between; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.foot-links a { color: inherit; }
.brand-small { font-family: var(--font-display); font-weight: 700; color: var(--text); }

/* ── Controls ───────────────────────────────────────────────────────── */
/* Line icons (static/img/icons.svg), drawn in the colour of the text round them. */
.icon {
  width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

/* A plain <button> is the theme's colour. Most buttons on the site are .sd-btn
   (below); the workspaces style their own. */
.button, button {
  font: inherit; font-size: 0.92rem;
  padding: 0.4rem 0.9rem; border: 1px solid var(--accent); border-radius: var(--radius);
  background: var(--accent); color: var(--on-accent);
  text-decoration: none; cursor: pointer; display: inline-block;
}
.button:hover, button:hover { filter: brightness(1.08); }
button.quiet, .button.quiet { background: transparent; color: var(--accent); }
button.quiet[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
button.link {
  border: 0; padding: 0; background: none; color: var(--muted); text-decoration: underline; text-underline-offset: 0.15em;
}
button.link:hover { color: var(--text); }

/* The site's buttons, as in an app: sentence-case words in the body font,
   quiet by default, the one thing to do on a page filled with the theme's
   colour (.primary), and ones that only show their words until pointed at
   (.quiet). .danger is for taking something away. */
.sd-btn, button.sd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 2.35rem; padding: 0.45rem 0.95rem; margin: 0;
  border: 1px solid var(--line-strong); border-radius: var(--r-control);
  background: var(--surface); color: var(--text);
  font-family: var(--font-body); font-size: 0.88rem; font-weight: 600; line-height: 1.2;
  letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap;
  cursor: pointer; filter: none; user-select: none;
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.04);
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.sd-btn:hover { background: var(--tint); border-color: var(--line-hover); filter: none; }
.sd-btn:active { background: var(--tint-strong); }
.sd-btn .icon { width: 1.05em; height: 1.05em; margin: 0 -0.1em; }
.sd-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.sd-btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.sd-btn.primary:active { background: var(--accent-press); }
.sd-btn.quiet { background: transparent; border-color: transparent; box-shadow: none; }
.sd-btn.quiet:hover { background: var(--tint); border-color: transparent; }
.sd-btn.danger { color: var(--danger); }
.sd-btn.danger:hover { background: color-mix(in srgb, var(--danger) 9%, transparent); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.sd-btn.quiet.danger:hover { border-color: transparent; }
.sd-btn.small { min-height: 2rem; padding: 0.3rem 0.7rem; font-size: 0.82rem; gap: 0.35rem; }
.sd-btn.icon { width: 2.35rem; padding: 0; }
.sd-btn.small.icon { width: 2rem; }
.sd-btn:disabled, .sd-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.sd-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Boxes to type in and pick from: a firm edge, a ring in the theme's colour
   while in use, red when something's wrong. :where() keeps these easy for the
   workspaces' own smaller boxes to change. */
:where(input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="url"],
input[type="number"], input[type="tel"], input:not([type]), input[type="search"], select, textarea) {
  font: inherit; font-size: 0.94rem; line-height: 1.4; color: var(--text); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-control); padding: 0.5rem 0.7rem;
  max-width: 100%; transition: border-color 0.12s, box-shadow 0.12s;
}
:where(input, select, textarea):hover:not(:focus, :disabled) { border-color: var(--line-hover); }
:where(input, select, textarea):focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--ring); }
:where(input, select, textarea)[aria-invalid="true"] { border-color: var(--danger); }
:where(input, select, textarea)[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent); }
:where(input, textarea)::placeholder { color: var(--muted); opacity: 0.75; }
:where(input, select, textarea):disabled { opacity: 0.6; cursor: not-allowed; }
:where(textarea) { resize: vertical; min-height: 5.5rem; }
/* A drop-down's arrow, drawn in the theme's quieter text colour. */
:where(select:not([multiple])) {
  appearance: none; padding-right: 2.2rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
/* Picking a file: its button looks like the site's. */
input[type="file"] { font: inherit; font-size: 0.88rem; color: var(--muted); max-width: 100%; }
input[type="file"]::file-selector-button {
  margin-right: 0.7rem; padding: 0.4rem 0.85rem; border: 1px solid var(--line-strong); border-radius: var(--r-control);
  background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--tint); }
/* Sliders and progress bars in the theme's colour, not the browser's blue. */
input, progress, meter { accent-color: var(--accent); }

/* Ticks and choices, drawn: a box that fills with the theme's colour and a
   tick, a ring with a dot. */
:where(input[type="checkbox"], input[type="radio"]) {
  appearance: none; flex: none; display: inline-grid; place-content: center;
  width: 1.1rem; height: 1.1rem; margin: 0; vertical-align: -0.2em;
  border: 1.5px solid var(--line-hover); border-radius: calc(var(--r-control) - 2px); background: var(--surface);
  cursor: pointer; transition: background-color 0.12s, border-color 0.12s;
}
:where(input[type="radio"]) { border-radius: 50%; }
:where(input[type="checkbox"])::before {
  content: ""; width: 0.62rem; height: 0.62rem; background: var(--on-accent); transform: scale(0); transition: transform 0.1s;
  clip-path: polygon(13% 50%, 0 64%, 40% 100%, 100% 22%, 86% 9%, 39% 72%);
}
:where(input[type="radio"])::before {
  content: ""; width: 0.44rem; height: 0.44rem; border-radius: 50%; background: var(--on-accent); transform: scale(0); transition: transform 0.1s;
}
:where(input[type="checkbox"], input[type="radio"]):checked { background: var(--accent); border-color: var(--accent); }
:where(input[type="checkbox"], input[type="radio"]):checked::before { transform: scale(1); }
:where(input[type="checkbox"], input[type="radio"]):hover:not(:checked, :disabled) { border-color: var(--text); }
:where(input[type="checkbox"], input[type="radio"]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:where(input[type="checkbox"], input[type="radio"]):disabled { opacity: 0.5; cursor: not-allowed; }
/* A switch, for a yes/no setting. */
:where(.switch input[type="checkbox"], .setting-row.toggle input[type="checkbox"], input[type="checkbox"].switch) {
  width: 2.2rem; height: 1.3rem; border-radius: 999px; place-content: center start; padding: 0 2px;
  background: var(--line-strong); border-color: transparent;
}
:where(.switch input[type="checkbox"], .setting-row.toggle input[type="checkbox"], input[type="checkbox"].switch)::before {
  width: calc(1.3rem - 7px); height: calc(1.3rem - 7px); border-radius: 50%; clip-path: none; transform: none;
  background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); transition: translate 0.15s;
}
:where(.switch input[type="checkbox"], .setting-row.toggle input[type="checkbox"], input[type="checkbox"].switch):checked::before { translate: calc(2.2rem - 1.3rem) 0; }
:where(.switch input[type="checkbox"], .setting-row.toggle input[type="checkbox"], input[type="checkbox"].switch):checked { background: var(--accent); }
:where(.switch input[type="checkbox"], .setting-row.toggle input[type="checkbox"], input[type="checkbox"].switch):hover:not(:checked) { border-color: transparent; background: var(--line-hover); }

label { font-size: 0.92rem; }
.helptext { display: block; margin: 0; color: var(--muted); font-size: 0.82rem; line-height: 1.45; }
.helptext ul { margin: 0.2rem 0 0; padding-left: 1.1rem; }
.errorlist { list-style: none; margin: 0.25rem 0; padding: 0; color: var(--danger); font-size: 0.84rem; font-weight: 500; }
.errorlist li { display: flex; gap: 0.35rem; }
.errorlist li::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 1rem; height: 1rem; margin-top: 0.1rem; border-radius: 50%; background: var(--danger); color: #fff; font-size: 0.7rem; font-weight: 700; }
.errorlist.nonfield { padding: 0.6rem 0.8rem; border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line)); border-radius: var(--r-control); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }

/* One field of a form (templates/forms/field.html): its label, the box, then
   help and what's wrong, one under the other. */
.field { display: grid; gap: 0.4rem; margin: 0 0 1.1rem; min-width: 0; }
.field > label, .field > legend, .field-label { display: block; margin: 0; padding: 0; font-size: 0.875rem; font-weight: 600; color: var(--text); }
.field :where(input:not([type="checkbox"], [type="radio"], [type="color"], [type="range"], [type="file"]), select, textarea) { width: 100%; }
.field.invalid > label, .field.invalid > legend { color: var(--danger); }
fieldset.field { border: 0; padding: 0; }
fieldset.field > legend { margin-bottom: 0.4rem; }
/* Choices: one under another, the circle or box beside its words. */
.field.choices > div:not(.helptext), .setting-control [role="group"] > div { display: grid; gap: 0.5rem; }
.field.choices label, .setting-control [role="group"] label, label.choice {
  display: flex; align-items: center; gap: 0.6rem; font-size: 0.92rem; font-weight: 400; cursor: pointer;
}
/* A checkbox beside its label and help. */
.field.check { grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 0.7rem; }
.field.check > input { margin-top: 0.15rem; }
.field.check.switch > input { margin-top: 0; }
.field-text { display: grid; gap: 0.2rem; }
.field-text label { font-size: 0.9rem; font-weight: 600; cursor: pointer; }

.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }

.badge {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.05rem 0.5rem; border: 1px solid var(--line); border-radius: 999px;
  font-size: 0.74rem; font-weight: 500; color: var(--muted); white-space: nowrap; background: var(--surface);
}
.badge.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.key-hint { font-family: var(--font-mono); }
blockquote { margin: 1rem 0; padding: 0.2rem 1rem; border-left: 3px solid var(--line); color: var(--muted); }

.code {
  margin: 0; padding: 0.7rem 0.8rem; overflow-x: auto;
  background: var(--code-bg, #29211b); color: var(--on-code, #f2efe8); border-radius: var(--radius);
  font-size: 0.84rem; line-height: 1.45;
}

/* ── Home ───────────────────────────────────────────────────────────── */
.home { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 2.5rem; align-items: start; }
@media (max-width: 880px) { .home { grid-template-columns: minmax(0, 1fr); } }

.intro { padding: 1rem 0 1.5rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.intro h1 { font-size: clamp(2rem, 5vw, 3.1rem); max-width: 18ch; margin-top: 0.3rem; }
.kicker, .aside, .depth, .panel-title, .picker-label, .kind {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.lede { font-size: 1.08rem; max-width: 60ch; }

.section-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1rem;
  margin: 1.8rem 0 0.4rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--text);
}
.section-head h2 { margin: 0; }

/* ── Idea cards ─────────────────────────────────────────────────────── */
.card {
  position: relative; margin: 0.6rem 0; padding: 0.8rem 1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.card-body { display: block; color: inherit; text-decoration: none; }
.card-body p { margin: 0.2rem 0 0.4rem; white-space: pre-line; }
.card .meta { margin: 0; }

.entry { padding-left: 1.4rem; margin: 0; border-radius: 0; border-width: 0 0 1px; background: transparent; }
.feed .entry:hover { background: var(--surface); }
.core-strip { position: absolute; left: 0; top: 0.9rem; bottom: 0.9rem; width: 5px; background: var(--layer-0); border: 1px solid var(--line); }
.entry.layer-1 .core-strip { background: var(--layer-1); }
.entry.layer-2 .core-strip { background: var(--layer-2); }
.entry.layer-3 .core-strip { background: var(--layer-3); }
.entry.layer-4 .core-strip { background: var(--layer-4); }
.entry.layer-5 .core-strip { background: var(--layer-5); }
.entry.layer-0 .core-strip { background: var(--accent); border-color: var(--accent); }

.entry-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; margin-bottom: 0.35rem; }
.byline { min-width: 0; }
.who { color: var(--text); font-weight: 600; text-decoration: none; }
.who:hover { text-decoration: underline; }
.handle, .when { color: var(--muted); font-size: 0.85rem; }
.entry-head .depth { margin-left: auto; }
.entry-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin-top: 0.4rem; font-size: 0.85rem; }
.entry-foot form { margin: 0; }
.tally { color: var(--muted); text-decoration: none; }
a.tally:hover { color: var(--text); }
button.tally {
  background: transparent; border: 1px solid var(--line); color: var(--muted); padding: 0.05rem 0.55rem; font-size: 0.85rem;
}
button.tally:hover { border-color: var(--accent); color: var(--accent); filter: none; }
.entry audio { margin: 0.2rem 0 0.4rem; height: 2.2rem; }

/* Deeper ideas are compacted: smaller type, tighter spacing, smaller pictures. */
.card.layer-2 { font-size: 0.96rem; }
.card.layer-3 { font-size: 0.92rem; padding-top: 0.6rem; padding-bottom: 0.6rem; }
.card.layer-4 { font-size: 0.88rem; padding-top: 0.45rem; padding-bottom: 0.45rem; }
.card.layer-5 { font-size: 0.84rem; padding-top: 0.35rem; padding-bottom: 0.35rem; }

.card .thumb { display: block; max-width: 100%; max-height: 18rem; margin: 0.3rem 0; border-radius: var(--radius); }
.card.layer-1 .thumb { max-height: 14rem; }
.card.layer-2 .thumb { max-height: 10rem; }
.card.layer-3 .thumb { max-height: 6rem; }
.card.layer-4 .thumb { max-height: 3.5rem; }
.card.layer-5 .thumb { max-height: 2rem; }

/* Avatars: initials on a layer colour picked from the username. */
.avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; text-decoration: none;
  background: var(--layer-2); color: var(--on-layer-2);
}
.avatar.small { width: 1.8rem; height: 1.8rem; font-size: 0.7rem; }
.tone-0 { background: var(--accent); color: var(--on-accent); }
.tone-1 { background: var(--layer-1); color: var(--on-layer-1); }
.tone-2 { background: var(--layer-2); color: var(--on-layer-2); }
.tone-3 { background: var(--layer-3); color: var(--on-layer-3); }
.tone-4 { background: var(--layer-4); color: var(--on-layer-4); }
.tone-5 { background: var(--layer-5); color: var(--on-layer-5); }

/* ── Sinking shelf ──────────────────────────────────────────────────── */
.shelf {
  display: flex; gap: 0.8rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0.6rem 0 1rem; scrollbar-width: thin;
}
.fossil {
  flex: 0 0 min(15rem, 75%); scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 0.5rem; min-height: 9rem;
  padding: 0.8rem; border-radius: var(--radius); text-decoration: none;
  background: var(--layer-3); color: var(--on-layer-3);
}
.fossil.layer-4 { background: var(--layer-4); color: var(--on-layer-4); }
.fossil.layer-5 { background: var(--layer-5); color: var(--on-layer-5); }
.fossil .depth { color: inherit; opacity: 0.8; }
.fossil-body { flex: 1; font-family: var(--font-display); font-size: 1.02rem; line-height: 1.3; }
.fossil-by { font-size: 0.8rem; opacity: 0.85; }

/* ── Sidebar ────────────────────────────────────────────────────────── */
.side { position: sticky; top: 4.5rem; display: grid; gap: 1.2rem; }
@media (max-width: 880px) { .side { position: static; } }
.panel { padding: 0.9rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin: 1rem 0; }
.side .panel { margin: 0; }
.panel-title { margin: 0 0 0.7rem; font-weight: 400; }
.panel-note { margin: 0.6rem 0 0; font-size: 0.82rem; color: var(--muted); }
.panel h3 { margin: 1.3rem 0 0.5rem; }

.core-column {
  display: flex; flex-direction: column; height: 15rem; margin: 0; padding: 0; list-style: none;
  border: 1px solid var(--line);
}
.core-column.preview { height: 12rem; max-width: 22rem; margin: 1rem 0; }
.band {
  display: flex; justify-content: space-between; align-items: center; min-height: 1.4rem; padding: 0 0.6rem;
  font-size: 0.78rem; flex: 1 1 0;
}
.layer-0.band { background: var(--layer-0); color: var(--on-layer-0); }
.layer-1.band { background: var(--layer-1); color: var(--on-layer-1); }
.layer-2.band { background: var(--layer-2); color: var(--on-layer-2); }
.layer-3.band { background: var(--layer-3); color: var(--on-layer-3); }
.layer-4.band { background: var(--layer-4); color: var(--on-layer-4); }
.layer-5.band { background: var(--layer-5); color: var(--on-layer-5); }

.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.people li { display: flex; align-items: center; gap: 0.6rem; }
.people .count, .tag .count { margin-left: auto; color: var(--muted); font-size: 0.8rem; }

/* ── Theme picker ───────────────────────────────────────────────────── */
.picker { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0; }
.picker-label { width: 100%; }
.swatch {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--bg); color: var(--text); border: 1px solid var(--line);
  font-family: var(--font-body); font-size: 0.82rem; padding: 0.25rem 0.55rem 0.25rem 0.3rem;
}
.swatch[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 1px; }
.chip { display: inline-grid; grid-template-rows: repeat(3, 5px); width: 1.4rem; border: 1px solid var(--line); }
.chip i:nth-child(1) { background: var(--surface); }
.chip i:nth-child(2) { background: var(--accent); }
.chip i:nth-child(3) { background: var(--deep); }
.picker.compact .swatch { padding: 0.3rem; }

.swatches { list-style: none; padding: 0; display: grid; gap: 0.3rem; }
.swatches li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; }
.sample { width: 1.6rem; height: 1.1rem; border: 1px solid var(--line); }

/* ── Strata, layers and the core sample ─────────────────────────────── */
.stratum { padding: 0.6rem 1rem 1rem; }
.stratum > h1, .stratum > h2 { margin-top: 0.4rem; }
.stratum.layer-0 { background: var(--layer-0); color: var(--on-layer-0); }
.stratum.layer-1 { background: var(--layer-1); color: var(--on-layer-1); }
.stratum.layer-2 { background: var(--layer-2); color: var(--on-layer-2); }
.stratum.layer-3 { background: var(--layer-3); color: var(--on-layer-3); }
.stratum.layer-4 { background: var(--layer-4); color: var(--on-layer-4); }
.stratum.layer-5 { background: var(--layer-5); color: var(--on-layer-5); }
.stratum > h2 .muted, .stratum > p a { color: inherit; opacity: 0.8; }
.stratum .card { color: var(--text); }
.stratum .entry { background: var(--surface); border: 1px solid var(--line); margin: 0.5rem 0; }

/* ── Ideas, additions and forms ─────────────────────────────────────── */
img.media { display: block; max-width: 100%; border-radius: var(--radius); }
/* A 3D model: its picture with a button to open the model itself
   (model-view.js), which then fills the same box to turn round. */
.model-view { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.model-view [data-model-open], .model-view [data-schematic-open] { position: absolute; right: 0.6rem; bottom: 0.6rem; }
.model-view [data-model-open][hidden], .model-view [data-schematic-open][hidden] { display: none; }
.schematic-view.open canvas { display: block; cursor: grab; touch-action: none; }
.schematic-view.open .sd-btn { position: absolute; top: 0.6rem; right: 0.6rem; }
.schematic-where { position: absolute; left: 0.6rem; bottom: 0.5rem; padding: 0.1rem 0.4rem; border-radius: var(--radius); background: rgb(0 0 0 / 0.45); color: #fff; font-family: var(--font-mono); font-size: 0.7rem; pointer-events: none; }
.schematic-where:empty { display: none; }
.model-view-empty { display: grid; place-items: center; min-height: 12rem; }
.model-view.open canvas { display: block; cursor: grab; touch-action: none; }
/* An animation: its GIF, then (animation-view.js) the animation itself
   with its sound, under a bar of controls and downloads. */
.model-view [data-animation-open] { position: absolute; right: 0.6rem; bottom: 0.6rem; }
.model-view [data-animation-open][hidden] { display: none; }
.animation-view.open { padding-bottom: 0; }
.animation-view.open canvas { display: block; margin: 0 auto; cursor: pointer; touch-action: manipulation; }
.animation-view canvas.clear {
  background: repeating-conic-gradient(color-mix(in srgb, var(--line) 60%, transparent) 0 25%, transparent 0 50%) 0 0 / 16px 16px;
}
.animation-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0.5rem 0.6rem; border-top: 1px solid var(--line); }
.animation-bar input[type="range"] { flex: 1 1 8rem; min-width: 6rem; }
.animation-time { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }
.animation-time:empty { display: none; }
audio { display: block; width: 100%; max-width: 30rem; }
.waveform { max-width: 30rem; margin-bottom: 0.3rem; }
.addition { border-left: 3px solid var(--line); padding-left: 0.9rem; margin-bottom: 1.1rem; }

.content-form textarea { width: 100%; min-height: 8rem; }
.content-form ul, .kinds { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0.5rem 0; padding: 0; list-style: none; }
.stacked input[type="text"], .stacked textarea, .stacked select, .stacked input:not([type]) { width: 100%; }
form.inline { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.recorder { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.5rem 0; }
.draw-pad .tools { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 0.5rem 0; }
.draw-pad canvas {
  display: block; width: 100%; aspect-ratio: 8 / 5; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-control); touch-action: none; cursor: crosshair;
}

/* Tags */
.tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.3rem 0; }
.tag {
  display: inline-flex; gap: 0.4rem; padding: 0.05rem 0.5rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: transparent; color: var(--accent); font-size: 0.8rem; text-decoration: none;
}
.tag::before { content: "#"; opacity: 0.6; margin-right: -0.3rem; }
button.tag[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tag-picker input { width: 100%; }

/* Lists of people, keys, circles */
.members { padding: 0; list-style: none; }
.members li { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0.45rem 0; border-bottom: 1px solid var(--line); }
.members form { margin: 0; }
.members li > form:first-of-type { margin-left: auto; }

.pages { display: flex; gap: 1rem; justify-content: center; margin: 1.5rem 0; color: var(--muted); }

/* ── Background work (templates/jobs/) ──────────────────────────────── */
/* Something still going: a ring turning slowly, in the theme's colour. For
   people who'd rather nothing moved, it breathes in place instead. (pulse
   is the workspaces' running dot's, in studio.css.) */
.spinner {
  display: inline-block; flex: none; width: 0.85rem; height: 0.85rem; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 22%, transparent); border-top-color: var(--accent);
  animation: spin 1.4s linear infinite;
}
/* Queued, not started yet: the ring, dashed and still. */
.spinner.waiting { border-style: dashed; border-color: color-mix(in srgb, var(--accent) 60%, transparent); animation: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: 0.25; transform: scale(0.7); } }
@keyframes breathe { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .spinner { border-color: var(--accent); border-right-color: color-mix(in srgb, var(--accent) 22%, transparent); animation: breathe 2.4s ease-in-out infinite; }
}

/* The header's control: a count for each of what's working (the ring), what's
   newly done (a tick) and what didn't finish (a warning sign), side by side
   on one line. Each has its own shape as well as its colour, so none of it
   rests on colour alone. Phones show the shapes and numbers; wider screens,
   where the header has room, add a word to each. */
.jobs { position: relative; display: flex; flex: none; }
.jobs-status {
  display: inline-flex; align-items: center; min-height: 2rem; padding: 0.2rem 0.7rem;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text);
  font-size: 0.82rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s;
}
.jobs-status:hover { background: var(--tint); border-color: var(--line-hover); }
.jobs-status[aria-expanded="true"] { background: var(--tint-strong); border-color: var(--line-hover); }
.jobs-status:has(.jobs-count.failed) { border-color: color-mix(in srgb, var(--danger) 50%, var(--line)); }
.jobs-status.idle { color: var(--muted); }
.jobs-counts { display: inline-flex; align-items: center; gap: 0.5rem; }
.jobs-count { display: inline-flex; align-items: center; gap: 0.3rem; }
.jobs-count + .jobs-count { padding-left: 0.5rem; border-left: 1px solid var(--line-strong); }
.jobs-count .icon { width: 1rem; height: 1rem; margin: 0 -0.05rem; stroke-width: 2.2; }
.jobs-count.done .icon { color: var(--accent); }
.jobs-count.failed .icon { color: var(--danger); }
.jobs-word { display: none; }
.jobs-status.idle .jobs-word { display: inline; }
@media (min-width: 1101px) { .jobs-word { display: inline; } }
@media (max-width: 400px) {
  .jobs-status { padding-inline: 0.55rem; }
  .jobs-counts { gap: 0.4rem; }
  .jobs-count { gap: 0.2rem; }
  .jobs-count + .jobs-count { padding-left: 0.4rem; }
}

/* The list under it, lined up with its right edge (or its left, when jobs.js
   finds that would run off the screen); on a phone, across the whole header
   (.top is what it's placed in, there). */
.jobs-panel {
  position: absolute; z-index: 30; top: calc(100% + 0.5rem); right: 0; width: min(25rem, calc(100vw - 2rem));
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card);
  box-shadow: 0 16px 36px -18px rgb(0 0 0 / 0.45), 0 2px 6px -2px rgb(0 0 0 / 0.12);
  color: var(--text); font-size: 0.9rem; line-height: 1.4; text-align: left; white-space: normal;
}
@media (max-width: 640px) {
  .jobs { position: static; }
  .jobs-panel { top: calc(100% - 0.25rem); left: var(--gutter); right: var(--gutter); width: auto; }
}
@media (min-width: 641px) { .jobs-panel.start { left: 0; right: auto; } }
.jobs-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.85rem 1rem 0.35rem; }
.jobs-panel-head .panel-title { margin: 0; }
.jobs-panel-head a { font-size: 0.84rem; }
.jobs-panel .jobs-list { max-height: min(60vh, 27rem); overflow-y: auto; padding: 0 0.45rem 0.45rem; overscroll-behavior: contain; scrollbar-width: thin; }
.jobs-panel-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; padding: 0.55rem 0.7rem;
  border-top: 1px solid var(--line); border-radius: 0 0 calc(var(--r-card) - 1px) calc(var(--r-card) - 1px);
  background: color-mix(in srgb, var(--bg) 55%, var(--surface));
}
.jobs-panel-foot:not(:has(> :not([hidden]))) { display: none; }
.jobs-panel-foot form { margin: 0; }
.jobs-panel-foot :is([data-jobs-notify], [data-jobs-notify-off]) { margin-left: auto; }
.jobs-more { flex: 1 1 100%; margin: 0; color: var(--muted); font-size: 0.82rem; }

/* A row per job: a mark for how it's going (the same shapes as the header's
   counts), what it is, how long it's been at it or when it finished, a cross
   to dismiss it, and an arrow when it leads somewhere. A row that leads
   somewhere is a link all over (its label's link stretches across it), with
   the label underlined as links are elsewhere on the site. */
.jobs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.job {
  position: relative; display: grid; grid-auto-flow: column; grid-template-columns: auto minmax(0, 1fr); grid-auto-columns: auto;
  align-items: center; gap: 0.7rem; padding: 0.55rem 0.4rem 0.55rem 0.55rem; border-radius: var(--r-control);
}
.job.linked:hover { background: var(--tint); }
.job.linked:has(a.job-label:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.job-mark {
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent);
}
.job-mark .icon { width: 1rem; height: 1rem; stroke-width: 2.2; }
.job.failed .job-mark { background: color-mix(in srgb, var(--danger) 11%, transparent); color: var(--danger); }
.job.seen .job-mark { background: var(--tint); color: var(--muted); }
.job-text { display: grid; gap: 0.1rem; min-width: 0; }
.job-label { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
a.job-label {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
a.job-label::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
a.job-label:focus-visible { outline: none; }
.job.linked:hover a.job-label { text-decoration-color: currentColor; }
.job.seen .job-label { font-weight: 500; }
.job-meta { color: var(--muted); font-size: 0.8rem; }
.job.failed .job-meta { color: var(--danger); }
.job.failed.seen .job-meta { color: var(--muted); }
.job-dismiss { position: relative; z-index: 1; margin: 0; }  /* above the row's link */
.job-dismiss .sd-btn { color: var(--muted); }
.job-dismiss .sd-btn:hover { color: var(--text); }
.job-go { display: grid; place-items: center; width: 1.1rem; color: var(--muted); }
.job-go .icon { width: 1.05rem; height: 1.05rem; stroke-width: 2; }
.job.linked:hover .job-go { color: var(--text); }
.jobs-empty { padding: 0.6rem 0.55rem 0.8rem; color: var(--muted); }

/* The dashboard's glance: up to three rows in one box, side by side where
   there's room for them and one under another where there isn't. */
.jobs-home { margin: 0 0 1.4rem; container-type: inline-size; }
.jobs-home-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1rem; margin: 0 0 0.55rem; }
.jobs-home-head h2.sd-label { margin: 0; font-weight: 400; letter-spacing: 0.13em; }  /* .sd-page h2 (800, tight) would win */
.jobs-home-all { display: flex; gap: 0.75rem; margin: 0 0 0 auto; color: var(--muted); font-size: 0.85rem; }
.jobs-home .jobs-list {
  gap: 1px; overflow: hidden; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-card);
}
@container (min-width: 46rem) { .jobs-home .jobs-list { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.jobs-home :is(.job, .jobs-empty) { border-radius: 0; background: var(--surface); }
.jobs-home .job { padding: 0.6rem 0.45rem 0.6rem 0.7rem; }
.jobs-home .job.linked:hover { background: color-mix(in srgb, var(--text) 4%, var(--surface)); }
.jobs-home .jobs-empty { padding: 0.75rem 0.9rem; }

/* The Background work page's: cards, one under another. */
.jobs-page .jobs-list { gap: 0.5rem; }
.jobs-page .job { padding: 0.65rem 0.45rem 0.65rem 0.7rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.jobs-page .job.linked:hover { background: color-mix(in srgb, var(--text) 4%, var(--surface)); border-color: var(--line-hover); }
.jobs-page .job.failed:not(.seen) { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.jobs-page .jobs-empty { padding: 1rem 1.1rem; border: 1px dashed var(--line-strong); border-radius: var(--r-card); }
.jobs-left-out { margin: 0.7rem 0 0; color: var(--muted); font-size: 0.85rem; }

/* A page waiting on its own background work (an AI request, a prospect, a
   theme being drafted) says so the same way. */
.working-note {
  display: inline-flex; align-items: center; gap: 0.6rem; margin: 0 0 0.8rem; padding: 0.5rem 1rem 0.5rem 0.8rem;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 600;
}

/* Profiles */
.profile { display: flex; align-items: center; gap: 1rem; margin-top: 0.5rem; }
.profile h1 { margin: 0; }
.profile .meta { margin: 0.2rem 0 0; }
.avatar.large { width: 4rem; height: 4rem; font-size: 1.3rem; }

/* One idea, opened */
.idea { padding-bottom: 1rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.idea > .text { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.45; }
.idea .entry-head { margin-top: 0.5rem; }
.addition .meta { display: flex; align-items: center; gap: 0.5rem; }

/* Markdown in text ideas (ideas/markup.py), here and in the text workspace's
   preview: tables that scroll sideways rather than widen the page, checklists
   with their (always disabled) boxes where the bullets would be, and struck
   out words. */
.text table {
  display: block; width: max-content; max-width: 100%; overflow-x: auto;
  margin: 0 0 1rem; border-collapse: collapse; font-size: 0.85em; line-height: 1.45;
}
.text th, .text td { padding: 0.35rem 0.7rem; border: 1px solid var(--line); text-align: start; vertical-align: top; }
.text th { background: var(--layer-1); color: var(--on-layer-1); font-weight: 600; }
.text .align-left { text-align: left; } .text .align-center { text-align: center; } .text .align-right { text-align: right; }
.text .task-list-item { list-style: none; }
.text .task-list-item-checkbox { margin-block: 0; margin-inline: -1.4em 0.4em; vertical-align: -0.1em; accent-color: var(--accent); }
.text s { color: var(--muted); }

/* ── Iterations, stages and the showcase ────────────────────────────── */
/* Stages run from loose grain to an outcrop in the open, darkening as they set. */
.stage {
  display: inline-block; padding: 0 0.45rem; border-radius: var(--radius); white-space: nowrap;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase;
  border: 1px dashed var(--line); color: var(--muted);
}
.stage-1 { border-style: solid; background: var(--layer-1); color: var(--on-layer-1); }
.stage-2 { border-color: var(--layer-4); background: var(--layer-4); color: var(--on-layer-4); }
.stage-3 { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.progress { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.9rem; }
.stages { flex-direction: column; align-items: flex-start; }

.shelf-title { margin: 0.9rem 0 0; font-size: 1rem; }
.specimen {
  flex: 0 0 min(16rem, 80%); scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 0.45rem; min-height: 9rem; margin: 0;
  padding: 0.8rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  border-top: 4px solid var(--layer-2);
}
.specimen-2 { border-top-color: var(--layer-4); }
.specimen-3 { border-top-color: var(--accent); }
.specimen p { margin: 0; }
.specimen-body { flex: 1; color: inherit; text-decoration: none; font-family: var(--font-display); line-height: 1.3; }
.specimen-body:hover span { text-decoration: underline; }
.specimen .thumb { display: block; max-width: 100%; max-height: 6rem; margin-bottom: 0.4rem; border-radius: var(--radius); }
.specimen-by { font-size: 0.8rem; color: var(--muted); }

.history { list-style: none; margin: 1.5rem 0; padding: 0 0 0 1.2rem; border-left: 3px solid var(--layer-2); }
.event { position: relative; margin: 0 0 1.6rem; }
.event-head { margin: 0 0 0.3rem; }
.event-mark {
  position: absolute; left: calc(-1.2rem - 8px); top: 0.35rem; width: 13px; height: 13px; border-radius: 50%;
  background: var(--layer-3); border: 2px solid var(--bg);
}
.stage-change .event-mark { border-radius: 2px; background: var(--layer-4); }
.stage-change.forward .event-mark { background: var(--accent); }
.event-note { margin: 0 0 0.5rem; font-style: italic; }
.event details { margin-top: 0.5rem; }
.event summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; }

.diff-words { white-space: pre-wrap; }
.diff-words ins, .diff ins { text-decoration: none; background: color-mix(in srgb, #3c8d40 28%, transparent); }
.diff-words del, .diff del { background: color-mix(in srgb, #b3261e 22%, transparent); }
.diff-op { display: inline-block; width: 1.4em; opacity: 0.6; user-select: none; }
.diff .op-skip { opacity: 0.5; }