/*
 * Merlin — application chrome.
 *
 * This palette is MERLIN's, and it is the only place it lives. The colours a
 * customer's artwork is drawn in come from the Brand record and never from
 * here (docs/ROADMAP.md §0). Nothing in this file should ever be read by the
 * canvas renderer.
 *
 * Light ground, violet primary, near-black text. Dark is used deliberately in
 * two places — the editor stage and the auth panel — not as a theme.
 */

:root {
  /* light */
  --bg: #FFFFFF;
  --surface: #F5F5F7;
  --surface-2: #FAFAFA;
  --border: #E3E3E8;
  --border-strong: #D2D2D8;
  --fg: #1D1D1F;
  --muted: #6E6E73;

  /* violet */
  --primary: #6D28D9;
  --primary-hover: #5B21B6;
  --primary-soft: #F3EDFF;
  --accent: #A78BFA;

  /* dark sections — violet-tinted, so they read as the same family */
  --ink: #16131C;
  --ink-surface: #201B2A;
  --ink-border: #322B40;
  --ink-fg: #F5F3F7;
  --ink-muted: #8E86A0;

  /* The editor stage is its own, lighter and neutral. Near-black next to a
     white panel is a hard edge that reads as a seam rather than a surface,
     and the violet cast fought the artwork sitting on it. */
  --stage: #26262B;
  --stage-border: #34343B;
  --stage-fg: #EDEDF0;
  --stage-muted: #9A9AA4;

  --danger: #C0392B;
  /* Green and amber, for the two states that are not danger: something that
     is done, and something still running. Two of each, because #F59F0A is a
     good mark and bad text — 2:1 against white — and a colour that has to be
     read is not the same colour as one that only has to be seen. */
  --ok: #2F7D4F;
  --ok-mark: #2FA35F;
  --warning: #F59F0A;
  --warning-ink: #9A6700;

  --radius: 10px;
  --radius-sm: 8px;
  --topbar-h: 56px;

  /* The furniture, as the design draws it: a grey rail, a near-black press.
     Violet is no longer the colour of every button — it means where you are,
     what has focus, and what Merlin itself is about to do. */
  --rail: #FAFAFA;
  --rail-border: #ECECEF;
  --ink-btn: #1B1B1F;
  --ink-btn-hover: #000;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 13.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* ============================================================== topbar / nav */

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 22px;
  height: var(--topbar-h); padding: 0 28px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
}

.mark {
  font-weight: 600; font-size: 17px; letter-spacing: -0.02em; color: var(--fg);
  display: inline-flex; align-items: center; gap: 8px;
}
.mark:hover { text-decoration: none; }
.mark .mark-dot { border-radius: 50%; background: var(--primary); display: inline-block; }
.mark .mark-glyph { color: var(--primary); display: block; }
.auth-panel .mark .mark-glyph, .drawer .mark .mark-glyph { color: var(--accent); }
.auth-panel .mark .mark-dot, .drawer .mark .mark-dot { background: var(--accent); }

.topbar nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.topbar nav a, .topbar nav .linkish {
  color: var(--muted); font-size: 14px; background: none; border: 0; padding: 0;
  font: inherit; font-size: 14px; cursor: pointer;
}
.topbar nav a:hover, .topbar nav .linkish:hover { color: var(--fg); text-decoration: none; }
.topbar nav .who { color: var(--muted); font-size: 13.5px; }

/* the hamburger is the ONE mobile navigation affordance (docs/ROADMAP.md A3) */
.burger {
  display: none; margin-left: auto;
  width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); cursor: pointer; padding: 0; place-items: center;
}
.burger span, .burger span::before, .burger span::after {
  display: block; width: 15px; height: 1.5px; background: var(--fg); border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease;
}
.burger span { position: relative; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -5px; }
.burger span::after { top: 5px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-5px) rotate(-45deg); }

.drawer-scrim {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(29, 29, 31, 0.32); backdrop-filter: blur(2px);
}
.drawer {
  position: fixed; inset: 0 auto 0 0; z-index: 50;
  width: min(78vw, 290px); background: var(--bg);
  border-right: 1px solid var(--border);
  padding: 18px 22px; display: flex; flex-direction: column; gap: 4px;
  animation: drawer-in .2s cubic-bezier(.32, .72, 0, 1);
}
@keyframes drawer-in { from { transform: translateX(-100%); } }
.drawer .head { display: flex; align-items: center; margin-bottom: 18px; }
.drawer a, .drawer .linkish {
  display: block; padding: 11px 0; color: var(--fg); font-size: 16px;
  border-bottom: 1px solid var(--border);
  background: none; border-left: 0; border-right: 0; border-top: 0;
  width: 100%; text-align: left; font-family: inherit; cursor: pointer;
}
.drawer a:hover { text-decoration: none; color: var(--primary); }
.drawer .who { color: var(--muted); font-size: 13px; padding: 14px 0 0; }

/* ================================================================== layout */

.container { max-width: 1080px; margin: 0 auto; padding: 44px 28px 96px; }
/* Inside a brand the rail runs to the window's edge and the page starts at
   its own strip, so the shell's padding belongs to the columns, not here. */
.container.bleed-rail { max-width: none; padding: 0 0 64px; }
.container.wide { max-width: 1440px; }
.bleed { padding: 0; max-width: none; }

/* =================================================================== type */

h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 6px; }
/* The marketing page keeps a hero's size; the app does not have heroes. */
.hero h1 { font-size: 30px; }
h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; margin: 40px 0 14px; }
.lede { color: var(--muted); font-size: 13px; margin: 0 0 22px; max-width: 70ch; }
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--muted); margin: 0 0 8px;
}
.mono { font-family: var(--mono); font-size: 12.5px; }

/* ================================================================== forms */

label { display: block; font-size: 13px; font-weight: 500; color: var(--fg); margin: 0 0 7px; }
.field { margin-bottom: 18px; }
.field-hint { color: var(--muted); font-size: 13px; margin: 7px 0 0; }

/* Every kind of field a form here actually uses. Number and date were missing,
   so a figure and a deadline were drawn by the browser in its own grey inset
   border beside the app's own — on the plan page, the page most about a number
   and a date. */
input[type=text], input[type=email], input[type=password], input[type=url],
input[type=number], input[type=date], input[type=tel], input[type=search],
input[type=time], input[type=datetime-local],
textarea, select {
  width: 100%; background: var(--bg); color: var(--fg);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 11px 13px; font: inherit; font-size: 15px; line-height: 1.45;
  transition: border-color .12s, box-shadow .12s;
}
/* Grown to fit by the autogrow controller, so a paragraph is read as a
   paragraph rather than three lines at a time through a slot. Still draggable,
   for anyone who wants it shorter.

   Deliberately not `field-sizing: content` as well: it does the same job, and
   two mechanisms sizing one box is a fight waiting to happen. One that behaves
   the same in every browser is enough. */
textarea { min-height: 84px; resize: vertical; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3.5px var(--primary-soft);
}
input:disabled, textarea:disabled, select:disabled {
  background: var(--surface); color: var(--muted); cursor: not-allowed;
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236E6E73' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px;
}
input[type=file] { font: inherit; font-size: 14px; color: var(--muted); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }

/* colour token editor */
.tokens { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 14px; }
.token { border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 14px; background: var(--surface-2); }
.token .row { display: flex; gap: 9px; align-items: center; }
.token input[type=color] {
  width: 42px; height: 36px; padding: 0; border: 1px solid var(--border-strong);
  border-radius: 8px; background: var(--bg); cursor: pointer; flex: 0 0 auto;
}
.token input[type=text] { font-family: var(--mono); font-size: 12.5px; padding: 9px 10px; }
.tokens-core .token { background: var(--surface); border-color: var(--border-strong); }
.token.is-derived label { color: var(--muted); }
.token-state { margin: 8px 0 0; font-size: 11.5px; text-transform: lowercase; }
.swatch-chip {
  width: 42px; height: 36px; flex: 0 0 auto; border-radius: 8px;
  border: 1px solid var(--border-strong);
}
.linkish {
  background: none; border: 0; padding: 0; font: inherit; color: var(--primary);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}

.section-lead { color: var(--muted); max-width: 62ch; margin: -4px 0 16px; }

/* ---------------------------------------------------------------- channels */

.channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-bottom: 8px; }
.channel-group .picker-group-name { margin: 0 0 7px; }
.channel {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 8px 2px; border-top: 1px solid var(--border);
}
.channel:first-of-type { border-top: 0; }
.channel input { accent-color: var(--primary); margin-top: 3px; }
.channel-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.channel-name { font-size: 13.5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.channel-body .meta { font-size: 12px; }

/* ------------------------------------------------------------------ ground */

.ground-choices { display: flex; gap: 12px; flex-wrap: wrap; }
.ground-choice {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 15px 12px 13px; background: var(--surface-2); flex: 1 1 240px;
}
.ground-choice:has(input:checked) { border-color: var(--primary); background: var(--surface); }
.ground-choice input { accent-color: var(--primary); }
.ground-text { display: flex; flex-direction: column; gap: 2px; }
.ground-text .meta { font-size: 12px; }
.ground-preview {
  width: 46px; height: 34px; flex: 0 0 auto; border-radius: 6px;
  border: 1px solid var(--border-strong); background: var(--ground-bg);
}
.ground-preview-grid {
  background-image: linear-gradient(var(--ground-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--ground-line) 1px, transparent 1px);
  background-size: 11px 11px;
}
.grid-only { display: none; margin-top: 14px; max-width: 260px; }
.ground:has(input[value=grid]:checked) .grid-only { display: block; }

/* ----------------------------------------------------------------- derived */

.derived { margin-top: 18px; }
.derived > summary {
  cursor: pointer; padding: 10px 0; font-weight: 500;
  list-style-position: inside;
}
.derived > summary::marker { color: var(--muted); }
.derived[open] > summary { margin-bottom: 6px; }

/* ----------------------------------------------------------------- palette */

.palette-rows { display: flex; flex-direction: column; gap: 9px; margin-bottom: 12px; }
.palette-row .row { display: flex; gap: 9px; align-items: center; }
.palette-row input[type=color] {
  width: 42px; height: 38px; padding: 0; border: 1px solid var(--border-strong);
  border-radius: 8px; background: var(--bg); cursor: pointer; flex: 0 0 auto;
}
.palette-hex { font-family: var(--mono); font-size: 12.5px; max-width: 120px; }
.palette-name { max-width: 260px; }
.palette-remove {
  background: none; border: 1px solid transparent; border-radius: 8px;
  width: 32px; height: 32px; font-size: 19px; line-height: 1; color: var(--muted);
  cursor: pointer; flex: 0 0 auto;
}
.palette-remove:hover { border-color: var(--border); color: var(--fg); }

.card.is-off { opacity: .62; }
.card.is-off:hover { opacity: 1; }
.pill.quiet { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
form.adopt { display: inline-flex; gap: 7px; align-items: center; }
.adopt-format { padding: 7px 9px; font-size: 13px; width: auto; }

/* -------------------------------------------------------------- onboarding */

.steps { list-style: none; display: flex; gap: 10px; margin: 0 0 26px; padding: 0; flex-wrap: wrap; }
.steps li {
  display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 7px 15px 7px 8px;
}
.steps li span {
  width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center;
  background: var(--border); color: var(--bg); font-size: 11.5px; font-weight: 600;
}
.steps li.on { color: var(--fg); border-color: var(--primary); }
.steps li.on span { background: var(--primary); }
.steps li.passed span { background: var(--fg); }

.link-form .link-row, .link-row { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.link-row input[type=url], .link-row input[type=text] { flex: 1 1 200px; }
.link-row input[type=file] { flex: 1 1 240px; }
.link-label { max-width: 190px; }

ul.links { list-style: none; margin: 14px 0 0; padding: 0; }
ul.links li {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px solid var(--border); font-size: 13.5px;
}

.prepare, .notice-card {
  display: flex; gap: 20px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; margin-top: 22px;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; background: var(--surface-2);
}
.notice-card { display: block; }
.prepare .meta { max-width: 66ch; margin: 4px 0 0; }
.prepare-actions { display: flex; gap: 9px; flex: 0 0 auto; flex-wrap: wrap; }

.working-panel { border-color: var(--primary); }
.working-steps { margin: 12px 0; padding-left: 20px; color: var(--muted); font-size: 13.5px; }
.working-steps li { padding: 2px 0; }

.logo-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 10px; }
.logo-slot { text-align: center; }
.logo-preview {
  height: 92px; border: 1px solid var(--border); border-radius: var(--radius);
  display: grid; place-items: center; padding: 14px; margin-bottom: 8px;
}
.logo-preview img { max-height: 60px; max-width: 100%; }
.logo-name { margin: 0; font-size: 13.5px; font-weight: 500; }

.proposed-colours { display: flex; flex-direction: column; gap: 8px; }
.proposed-colour {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 13px; background: var(--surface-2);
}
.proposed-colour input[type=checkbox] { accent-color: var(--primary); }
.proposed-body { display: flex; align-items: center; gap: 11px; flex: 1 1 auto; flex-wrap: wrap; }
.colour-name { max-width: 190px; }
.colour-role { max-width: 220px; font-size: 13px; }

.stage-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.stage-choice {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 11px 13px; background: var(--surface-2);
}
.stage-choice:has(input:checked) { border-color: var(--primary); background: var(--surface); }
.stage-choice input { accent-color: var(--primary); margin-top: 3px; }
.stage-text { display: flex; flex-direction: column; gap: 1px; }
.stage-text .meta { font-size: 12px; }

.pressure-choices { display: flex; flex-wrap: wrap; gap: 7px; }
.pressure {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 14px; font-size: 13px; background: var(--surface-2);
}
.pressure:has(input:checked) { border-color: var(--primary); background: var(--surface); }
.pressure input { accent-color: var(--primary); }

/* ------------------------------------------------------------------- marks */

/* Not `.mark` — that is Merlin's own logo in the header. */
.mark-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.mark-option { text-align: center; }
.mark-option-grounds { display: flex; gap: 8px; align-items: stretch; margin-bottom: 9px; }
.mark-option-ground {
  flex: 1 1 auto; border: 1px solid var(--border); border-radius: var(--radius);
  display: grid; place-items: center; padding: 14px; min-height: 96px;
}
.mark-option-ground svg { width: 62px; height: 62px; }
.mark-option-ground.small { flex: 0 0 48px; padding: 8px; }
.mark-option-ground.small svg { width: 24px; height: 24px; }
.mark-option-name { margin: 0 0 8px; font-size: 13.5px; font-weight: 500; }

/* -------------------------------------------------------------- situations */

.situations { list-style: none; margin: 18px 0 0; padding: 0; }
.situation { display: flex; gap: 18px; align-items: flex-start; padding: 15px 0; border-top: 1px solid var(--border); }
.situation-when {
  flex: 0 0 150px; font-size: 12.5px; color: var(--muted);
  display: flex; flex-direction: column; gap: 4px;
}
.movement { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.moved-up .movement { color: var(--primary); }
.moved-down .movement { color: var(--danger); }
.situation-body { flex: 1 1 auto; min-width: 0; }
.situation-body .title { margin: 0 0 6px; font-weight: 500; }
.pressures { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }

/* ------------------------------------------------------------------- ideas */

.ideas { display: flex; flex-direction: column; gap: 11px; margin: 14px 0 26px; }
.idea {
  border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius);
  padding: 14px 16px; background: var(--surface-2);
}
.idea.is-good { border-left-color: var(--primary); }
.idea.is-bad { border-left-color: var(--danger); }
.idea.is-dormant { opacity: .6; }
.idea.is-dormant:hover { opacity: 1; }
.idea-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.idea-head .title { margin: 0 0 3px; font-weight: 500; }
.idea-detail { margin: 9px 0 0; font-size: 13.5px; }
.idea-evidence { margin: 5px 0 0; font-style: italic; }
.idea-statuses { display: flex; flex-wrap: wrap; gap: 0; margin-top: 11px; }
.idea-statuses form { display: inline; }
.idea-statuses .state {
  border: 1px solid var(--border); background: var(--bg); color: var(--muted);
  font: inherit; font-size: 11.5px; padding: 5px 10px; cursor: pointer;
  margin-left: -1px; white-space: nowrap;
}
.idea-statuses form:first-child .state { border-radius: 7px 0 0 7px; margin-left: 0; }
.idea-statuses form:last-child .state { border-radius: 0 7px 7px 0; }
.idea-statuses .state:hover { color: var(--fg); }
.idea-statuses .state.on { color: #fff; background: var(--muted); border-color: var(--muted); }
.idea-statuses .state.standing-good.on { background: var(--primary); border-color: var(--primary); }
.idea-statuses .state.standing-bad.on { background: var(--danger); border-color: var(--danger); }

.verdicts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 8px; }
.verdict {
  border: 1px solid var(--border); border-top-width: 3px; border-radius: var(--radius);
  padding: 14px 16px; background: var(--surface-2);
}
.verdict.standing-good { border-top-color: var(--primary); }
.verdict.standing-bad { border-top-color: var(--danger); }
.verdict ul { list-style: none; margin: 8px 0 0; padding: 0; }
.verdict li { padding: 6px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.verdict li:first-child { border-top: 0; }
.verdict li .meta { display: block; font-size: 11px; }


.desk-section { margin-bottom: 34px; }
.desk-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 11px; }
.desk-head h2 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.desk-count { font-size: 12px; color: var(--muted); }

/* Where a section sits, as a number to type over. Quiet until it is wanted:
   an outlined box on every heading reads as a form, and this is a heading.

   Scoped under .desk-head rather than left as a bare class, because the shared
   rule that sizes every text input is `input[type=number]` — an attribute
   selector, which counts as a class — and a plain class does not outweigh it.
   Left unscoped this field renders at 15px in a 46px box beside a 14px
   heading. */
.desk-order { display: flex; align-self: center; }
.desk-head .desk-order-field {
  width: 2.5em; padding: 3px 4px; font-size: 12px; line-height: 1.35;
  text-align: center; font-variant-numeric: tabular-nums;
  color: var(--muted); background: none; border: 1px solid transparent;
  border-radius: 6px; appearance: textfield; -moz-appearance: textfield;
}
.desk-head .desk-order-field::-webkit-outer-spin-button,
.desk-head .desk-order-field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.desk-section:hover .desk-head .desk-order-field { border-color: var(--border); }
.desk-head .desk-order-field:hover,
.desk-head .desk-order-field:focus {
  border-color: var(--border-strong); color: var(--fg); background: var(--bg);
  box-shadow: none; outline: none;
}
.desk-head .desk-order-field.is-read { border-color: transparent; }
.desk-edit {
  border: 0; background: none; padding: 2px 5px; cursor: pointer; font-size: 12px;
  color: var(--muted); opacity: 0; transition: opacity .12s; line-height: 1;
}
.desk-section:hover .desk-edit, .desk-edit:focus-visible { opacity: 1; }
.desk-edit:hover { color: var(--fg); }

/* grid-auto-rows: 1fr so every tile in a row is the same height, and
   min-width: 0 on the wrap because a grid item's default min-width is auto —
   which is why a long bookmark name with no spaces pushed its column wider
   than its share instead of wrapping inside it. */
.desk-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px; grid-auto-rows: 1fr;
}
.tile-wrap { position: relative; display: flex; min-width: 0; height: 100%; }
.dialog-holder { display: contents; }

.tile {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  width: 100%; min-width: 0; text-align: left; font: inherit; color: inherit;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2); padding: 12px 14px; text-decoration: none;
  min-height: 58px; cursor: pointer;
}
.tile:hover { border-color: var(--border-strong); background: var(--surface); text-decoration: none; }
.tile-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
/* Two lines, and two lines' worth of room whether or not it needs them: a
   short name and a long one take the same space, so the grid reads as a grid.
   `anywhere` because a bookmark name is often a URL with nothing to break on. */
.tile-title {
  font-size: 13.5px; font-weight: 500; line-height: 1.3; min-height: 2.6em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.tile-meta {
  font-size: 11.5px; color: var(--muted); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tile-go { color: var(--muted); font-size: 13px; opacity: 0; transition: opacity .12s; flex: 0 0 auto; }
.tile:hover .tile-go { opacity: 1; }

/* A note reads as a note before it is read at all: the warm ground of a legal
   pad, and the word itself. Everything else on the desk is a link to somewhere
   else — this is the one thing that is the thing. */
.tile.is-note {
  flex-direction: column; align-items: flex-start; gap: 2px;
  background: #FDF8EC; border-color: #EBDFC4;
}
.tile.is-note:hover { background: #FCF4E0; border-color: #DFCEA6; }
.tile-kind {
  font-size: 9.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: #8A6D26; margin-bottom: 1px;
}
.tile.is-image { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px; cursor: default; }
.tile.is-image img { width: 100%; height: 104px; object-fit: cover; border-radius: 7px; display: block; }
.tile.is-image .tile-title { padding: 0 4px 2px; min-height: 0; }
.tile.is-new {
  border-style: dashed; background: none; color: var(--muted);
  justify-content: center; font-size: 17px;
}
.tile.is-new:hover { color: var(--fg); }

.tile-tools { position: absolute; top: 6px; right: 6px; opacity: 0; transition: opacity .12s; }
.tile-wrap:hover .tile-tools, .tile-tools:focus-within { opacity: 1; }
.tile-tool {
  width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg); color: var(--muted); font-size: 11px; line-height: 1; cursor: pointer;
}
.tile-tool:hover { color: var(--fg); border-color: var(--border-strong); }

.desk-add { display: flex; gap: 8px; align-items: center; margin-top: 10px; max-width: 380px; }

/* ------------------------------------------------------------------ dialog */

dialog {
  border: 0; padding: 0; background: none; max-width: min(560px, calc(100vw - 32px));
  color: var(--fg);
}
dialog::backdrop { background: rgba(16, 16, 20, .42); backdrop-filter: blur(2px); }
.dialog-frame {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(16, 16, 20, .18); padding: 20px 22px 22px;
  max-height: min(78vh, 720px); overflow: auto;
}
.dialog-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.dialog-head h2 { margin: 0; font-size: 16.5px; }
.dialog-close {
  border: 0; background: none; font-size: 21px; line-height: 1; cursor: pointer;
  color: var(--muted); padding: 0 2px;
}
.dialog-close:hover { color: var(--fg); }
.dialog-doc {
  font-size: 14.5px; line-height: 1.62; padding: 10px 0 4px;
  border-bottom: 1px solid var(--border); margin-bottom: 6px;
}
.dialog-doc p { margin: 0 0 10px; }
.dialog-actions { display: flex; gap: 8px; align-items: center; margin-top: 16px; }

.tile-form .field { margin: 12px 0; }
.tile-form .field[hidden] { display: none; }
/* Which fields matter follows the choice, with no JavaScript to keep in step. */
.tile-form .for-link, .tile-form .for-note, .tile-form .for-image { display: none; }
.tile-form:has(input[value=link]:checked) .for-link,
.tile-form:has(input[value=note]:checked) .for-note,
.tile-form:has(input[value=image]:checked) .for-image { display: block; }

/* --------------------------------------------------------------- workspace */

/* The rail and the page, as the design has them: a grey column that runs the
   height of the window with the workspace at its head and the account at its
   foot, and the page beside it starting at its own strip. */
.workspace { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 0; align-items: stretch; }
/* A line of text is read, not scanned across a wide monitor: the page's
   column is held to a measure, as the design holds it, and only the pages
   that are a grid of their own (the calendar, the galleries) run wider. */
.workspace-main { min-width: 0; padding: 0 28px 40px; max-width: 1180px; }
.workspace-main.is-wide, .workspace-main:has(> .cal-weeks), .workspace-main:has(> .home-grid) { max-width: none; }
/* The strip is sticky, so the page's first row needs the room the strip's
   own padding does not give it. */
.workspace-main > .page-bar + * { margin-top: 0; }

.workspace-nav {
  position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--rail); border-right: 1px solid var(--rail-border); padding: 10px 10px 12px;
}
/* Merlin above the project: the platform's mark and wordmark, then the
   switcher under it with the brand's own mark at a size a person can see. */
/* The two things at the top of the rail are not the same kind of thing, and
   they were drawn as though they were: the application's mark and the brand
   you are working on, stacked at the same weight, four pixels out of line
   with each other. Worse when the brand is itself called Merlin — two purple
   hats saying the same word (23 Sep 2026).

   So: the application's mark is a label, quiet and small, because it never
   changes and is never pressed. The brand is the loud one, because it is the
   thing you act on and the thing that tells you where you are. A hairline
   between them says they are two regions rather than one list. */
/* Merlin's name in dark type, with the hat in violet.
   It was drawn as a quiet grey uppercase label earlier on 23 Sep so it would
   not compete with the brand beneath it. It is the product's name, and a name
   set in the furniture's colour reads as furniture — the hairline under it
   and the brand's larger mark do the separating instead. */
.rail-mark { display: flex; align-items: center; gap: 8px; padding: 4px 8px 12px; color: var(--fg); text-decoration: none; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.rail-mark:hover { text-decoration: none; opacity: 0.8; }
/* The violet is the hat's alone. The name set in it too made the whole thing
   read as one coloured badge; dark type with a coloured mark is the shape a
   wordmark has. */
.rail-mark .mark-glyph { color: var(--primary); width: 19px; height: 19px; }
/* Both marks start on the same left edge — the rail's own 8px. The button
   carries the inset so the pressable area still reaches the rail's width. */
.rail-head { display: flex; align-items: center; gap: 6px; padding: 12px 0 14px; border-top: 1px solid var(--border); }
.rail-head .brand-face, .rail-head .identity-mark { border-radius: 8px; overflow: hidden; flex: 0 0 auto; }
.rail-head .brand-current { font-size: 14.5px; font-weight: 600; }
.rail-head .brand-switch { flex: 1 1 auto; min-width: 0; }
.rail-head .brand-button { width: 100%; justify-content: flex-start; padding: 7px 8px; gap: 9px; }
.rail-head .brand-button .brand-face { width: 28px; height: 28px; border-radius: 8px; }
/* The foot sits at the bottom of the rail whatever the list's length. */
.rail-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--rail-border); display: flex; flex-direction: column; gap: 2px; }
.rail-foot nav { display: block; }
.rail-foot .account { display: flex; }
.rail-foot .account-button { width: 100%; justify-content: flex-start; gap: 8px; padding: 6px; border-radius: var(--radius-sm); }
.rail-foot .account-button:hover { background: var(--surface); }
.rail-foot .account-menu { left: 0; right: auto; bottom: 100%; top: auto; }
.rail-foot-link { font-size: 12px; color: var(--muted); padding: 4px 8px; }
.rail-foot-link:hover { color: var(--fg); }
.workspace-brand {
  display: flex; align-items: center; gap: 11px; padding: 4px 10px 16px;
  color: inherit; text-decoration: none;
}
.workspace-brand:hover { text-decoration: none; }
.workspace-brand span { display: flex; flex-direction: column; min-width: 0; }
.workspace-brand strong { font-size: 14.5px; font-weight: 600; }
.workspace-brand .meta { font-size: 11.5px; }
/* A group is a block with a rule above it, not a line of small text floating
   between two lists: the whole complaint was that the sections did not read as
   sections. The one you are inside is stated rather than implied. */
.workspace-section { padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--rail-border); }
/* Tagged with the element, because :first-of-type counts per element type and
   the groups are now a mix of <section> and <details> — so the first <details>
   also matched, and lost the rule that separates it from the group above. */
.workspace-nav > section.workspace-section:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.workspace-group {
  margin: 0 0 6px; padding: 0 10px; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
}
.workspace-section.on .workspace-group { color: var(--primary); }
/* A folded group's heading is the control that opens it, so it has to look
   like one — same size and colour as a heading that is not, plus a chevron and
   a hit area that covers the row. */
.workspace-section.folds > summary {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  list-style: none; border-radius: var(--radius-sm); padding: 3px 10px; margin: 0 0 6px;
}
.workspace-section.folds > summary::-webkit-details-marker { display: none; }
.workspace-section.folds > summary::marker { content: ""; }
.workspace-section.folds > summary::after {
  content: "›"; margin-left: auto; font-size: 13px; line-height: 1;
  transform: rotate(90deg); transition: transform .12s ease; opacity: .7;
}
.workspace-section.folds[open] > summary::after { transform: rotate(-90deg); }
.workspace-section.folds > summary:hover { background: var(--surface-2); color: var(--fg); }
.workspace-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A pipeline stage in the sidebar: the stage's name, and the page's under it. */
.workspace-text { display: flex; flex-direction: column; min-width: 0; }
.workspace-sub { font-size: 11px; font-weight: 400; color: var(--muted); line-height: 1.2; }
.workspace-link.on .workspace-sub { color: var(--muted); }
.workspace-nav ul { list-style: none; margin: 0; padding: 0; }
.workspace-link {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 9px; border-radius: var(--radius-sm); font-size: 13px;
  color: var(--fg); text-decoration: none; opacity: .82;
}
.workspace-link .workspace-text { flex: 1 1 auto; }
.nav-icon { flex: 0 0 auto; opacity: .75; }
.workspace-link:hover { background: var(--bg); text-decoration: none; opacity: 1; }
/* Where you are: violet, and the one place in the furniture that still is. */
.workspace-link.on { background: var(--primary-soft); color: var(--primary); opacity: 1; font-weight: 600; }
.workspace-link.on .nav-icon { opacity: 1; }
.workspace-badge {
  flex: 0 0 auto; min-width: 18px; text-align: center; font-size: 10.5px;
  padding: 1px 6px; border-radius: 999px; background: var(--border); color: var(--muted);
}
.workspace-link.on .workspace-badge { background: var(--primary); color: #fff; }

/* The page's strip: what page this is, and on the right what Merlin is
   doing, the allowance, and ✦. Sticky, because it is the only furniture the
   page has once the top bar is gone. */
.page-bar {
  position: sticky; top: 0; z-index: 20; margin: 0 -28px 18px; padding: 10px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.page-bar-name { margin: 0; font-size: 13px; font-weight: 600; }
.page-bar + * { padding-top: 2px; }
.page-bar-side { display: flex; align-items: center; gap: 10px; }
.merlin-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--muted); text-decoration: none; padding: 3px 8px; border-radius: 999px;
}
.merlin-chip:hover { background: var(--surface); color: var(--fg); text-decoration: none; }
.merlin-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok-mark); }
.merlin-chip.is-off .merlin-dot, .merlin-chip.is-hand .merlin-dot { background: var(--border-strong); }
.merlin-chip.is-stopped .merlin-dot, .merlin-chip.is-unready .merlin-dot { background: var(--danger); }
.merlin-chip.is-waiting .merlin-dot { background: var(--warning); }
/* The say bar is gone from the page; its reply is not. */
.say.is-reply { margin: 0 0 16px; }
.say.is-reply:empty { display: none; }

.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.page-head h1 { margin-bottom: 6px; }
.page-head .lede { max-width: 66ch; }
.page-head-actions { display: flex; gap: 8px; flex: 0 0 auto; }

@media (min-width: 901px) {
  /* Inside a brand the rail carries the switcher and the account. On a phone
     the rail is a horizontal strip with room for neither, so the bar stays. */
  body.has-rail > .topbar { display: none; }
  body.has-rail .rail-head, body.has-rail .rail-foot { display: flex; }
}
@media (max-width: 900px) {
  .workspace { grid-template-columns: 1fr; gap: 16px; }
  .workspace-nav { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--rail-border); }
  .workspace-main { padding: 0 16px 40px; }
  .page-bar { margin: 0 -16px 14px; padding: 10px 16px; }
  .rail-head, .rail-foot { display: none; }

  /* One scrolling row, not a wrapped block. The links stacked ate the whole
     first screen before any content appeared, which on a phone means the page
     opens on its own table of contents. */
  .workspace-nav {
    position: sticky; top: 56px; z-index: 30;
    margin: 0 -18px; padding: 0 18px;
    background: var(--bg); border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 6px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .workspace-nav::-webkit-scrollbar { display: none; }
  .workspace-nav ul { display: flex; gap: 2px; }
  /* The sections stay, as dividers in the row: hidden outright, twenty-four
     links became one undifferentiated strip. */
  .workspace-section {
    display: flex; align-items: center; gap: 4px; flex: 0 0 auto;
    padding: 0 0 0 10px; margin: 0; border-top: 0; border-left: 1px solid var(--border);
  }
  .workspace-section:first-of-type { padding-left: 0; }
  /* In the strip a group is a divider, not a disclosure: the controller forces
     every one open, so the chevron would point at nothing. */
  .workspace-section.folds > summary::after { content: none; }
  .workspace-section.folds > summary { padding: 0 4px 0 0; margin: 0; cursor: default; }
  .workspace-group {
    margin: 0; padding: 0 4px 0 0; flex: 0 0 auto;
    writing-mode: horizontal-tb; font-size: 9.5px;
  }

  .workspace-brand { padding: 8px 10px 8px 0; border-right: 1px solid var(--border); margin-right: 4px; }
  .workspace-brand .meta { display: none; }
  .workspace-brand strong { white-space: nowrap; }

  .workspace-link { white-space: nowrap; padding: 12px 10px; border-radius: 0; }
  .workspace-link.on { background: none; box-shadow: inset 0 -2px 0 var(--primary); }
  .workspace-link:hover { background: none; }
}

/* ----------------------------------------------------------- brand identity */

.identity-mark { border-radius: 11px; display: block; flex: 0 0 auto; }
.brand-face {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--border); border-radius: 11px;
  overflow: hidden; flex: 0 0 auto;
}
/* A logo is drawn with its own breathing room — often a great deal of it:
   the Merlin icon is a 186x172 file with 84x86 of hat in it, so more than
   half is already empty. Capping it again at 78% drew that hat at about a
   third of its tile, which is what "the logo is too small" was (23 Sep
   2026). It fills its tile now; the padding inside the file is the file's
   to fix, and re-cropping is the only thing that fixes it. */
.brand-face img { max-width: 100%; max-height: 100%; object-fit: contain; }

.card.brand-card { display: flex; gap: 15px; align-items: flex-start; }
.brand-card-face { flex: 0 0 auto; }
.brand-card-body { min-width: 0; flex: 1 1 auto; }
.brand-card .title { margin: 2px 0 3px; }
.brand-swatches { display: flex; gap: 5px; margin-top: 10px; }
.brand-swatch {
  width: 26px; height: 14px; border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, .1);
}

/* ---------------------------------------------------------------- overview */

/* One rhythm for the whole page, so nothing has to remember its own spacing. */
.left-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin: 40px 0 12px;
}
.left-head h2 { margin: 0; }

.standing-bar {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 22px; background: var(--surface-2);
}

.standing-next { flex: 1 1 300px; min-width: 0; }
.standing-kicker {
  margin: 0 0 3px; font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted);
}
.standing-label { margin: 0 0 2px; font-size: 16px; font-weight: 500; }
.standing-next .meta { margin: 0; }

.tally { display: flex; gap: 24px; flex-wrap: wrap; align-items: baseline; margin: 14px 2px 0; font-size: 13px; color: var(--muted); }
.tally strong { color: var(--fg); font-weight: 600; font-size: 16px; margin-right: 3px; }
.tally-change { font-size: 11.5px; font-weight: 600; margin-left: 3px; }
.tally-change.up { color: var(--primary); }
.tally-change.down { color: var(--danger); }

/* Twelve weeks, two bars each. Totals stop meaning anything once they are
   large; the shape of the weeks says whether anything is happening now. */
.rhythm {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 5px; height: 74px; align-items: end;
  border-bottom: 1px solid var(--border); padding-bottom: 1px;
}
.rhythm-week { display: flex; gap: 2px; align-items: flex-end; justify-content: center; height: 100%; }
.rhythm-made, .rhythm-out { flex: 1 1 0; max-width: 12px; border-radius: 2px 2px 0 0; min-height: 3px; }
.rhythm-made { background: var(--border-strong); }
.rhythm-out { background: var(--primary); }
.rhythm-week:hover .rhythm-made { background: var(--muted); }
.rhythm-key { display: flex; align-items: center; gap: 7px; margin: 8px 2px 0; font-size: 11.5px; color: var(--muted); }
.key-made, .key-out { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.key-made { background: var(--border-strong); }
.key-out { background: var(--primary); margin-left: 10px; }

/* What is left. One row each, one line of why, and where to go. */
.left-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.left-item {
  display: flex; align-items: baseline; gap: 13px;
  padding: 12px 2px; border-bottom: 1px solid var(--border);
}
.left-dot {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--border-strong); transform: translateY(-1px);
}
.left-item.is-warn .left-dot { background: var(--warning); }
.left-item.is-urgent .left-dot { background: var(--danger); }
.left-item.is-idle .left-dot { background: var(--border-strong); }
/* Going out on its own: not a warning, not a decision — a quiet dot. */
.left-item.is-quiet .left-dot { background: var(--primary); }
.going-out .inline-form { flex: 0 0 auto; }
.left-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.left-label { font-size: 14.5px; }
.left-body .meta { font-size: 12.5px; }
.left-group {
  flex: 0 0 78px; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.left-action { flex: 0 0 auto; font-size: 13px; white-space: nowrap; }

.done-note { margin: 14px 2px 0; font-size: 13px; color: var(--muted); }
.done-note span { color: var(--primary); margin-right: 6px; }
.ask-line { margin: 16px 2px 0; }

@media (max-width: 720px) {
  /* Wrapped, but in the order it is read: what it is, then where it belongs,
     then what to do. Letting the action float up ahead of the label put the
     answer before the question. */
  .left-item { flex-wrap: wrap; gap: 8px 11px; }
  .left-body { flex: 1 1 100%; order: 1; }
  .left-group { flex: 0 0 auto; order: 2; }
  .left-action { order: 3; margin-left: auto; }
}

/* ---------------------------------------------------------------- coverage */

.coverage { margin: 0 0 26px; }

.coverage-verdict { margin: 0 0 12px; font-size: 14.5px; }
.stage-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.stage-chip {
  border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius-sm);
  padding: 10px 12px; background: var(--surface-2);
  display: flex; flex-direction: column; gap: 2px;
}
.stage-chip-name { font-size: 13.5px; font-weight: 500; }
.stage-chip-counts { font-size: 11.5px; color: var(--muted); }
.stage-chip.gap-none { border-left-color: var(--primary); }
.stage-chip.gap-nothing_made { border-left-color: var(--danger); }
.stage-chip.gap-nothing_published,
.stage-chip.gap-nothing_measured { border-left-color: var(--warning); }
.coverage-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.stage {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; background: var(--bg);
}
.stage-name { margin: 0 0 3px; font-weight: 500; font-size: 14px; }
.stage-question { margin: 0 0 9px; font-size: 11.5px; color: var(--muted); }
.stage-counts { display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: 11.5px; color: var(--muted); }
.stage-gap { margin: 9px 0 0; font-size: 12px; }
.stage.gap-none { border-color: var(--primary); }
.stage.gap-none .stage-gap { color: var(--muted); }
.stage.gap-nothing_made { border-color: var(--danger); }
.stage.gap-nothing_made .stage-gap { color: var(--danger); }
.stage.gap-nothing_published .stage-gap,
.stage.gap-nothing_measured .stage-gap { color: var(--warning-ink); }

/* ------------------------------------------------------------ publications */

.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.metric { margin: 0; }
.publications { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.publication { border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 17px; background: var(--surface-2); }
.publication.no-results { border-style: dashed; }
.publication-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.publication-head .title { margin: 0 0 3px; font-weight: 500; }
.results { display: flex; gap: 26px; margin-top: 11px; flex-wrap: wrap; }
.results div { display: flex; flex-direction: column; gap: 1px; }
.results strong { font-size: 18px; font-weight: 600; }
.results span { font-size: 11.5px; color: var(--muted); }
.results-form { margin-top: 11px; }
.results-form > summary { cursor: pointer; font-size: 12.5px; color: var(--muted); padding: 4px 0; }
.results-form > summary:hover { color: var(--fg); }

/* ----------------------------------------------------------------- context */

.question label { font-weight: 500; }
.question.answered label::after {
  content: "answered"; margin-left: 9px; font-size: 10.5px; font-weight: 400;
  color: var(--muted); text-transform: uppercase; letter-spacing: .06em;
}
.warn-text { color: var(--danger); }

.scope { margin: 16px 0 4px; }
.scope-choice {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 8px 2px;
}
.scope-choice input { accent-color: var(--primary); margin-top: 3px; }
.scope-text { display: flex; flex-direction: column; gap: 1px; }
.scope-text .meta { font-size: 12px; }

/* Only the dates the chosen shape actually uses. One invalid selector in a
   comma-separated group throws the whole group away, so these stay simple. */
.scope-dates { display: none; gap: 14px; margin-top: 6px; padding-left: 26px; }
.scope-date { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.scope-date input { width: 170px; }
.scope:has(input[value="until"]:checked) .scope-dates { display: flex; }
.scope:has(input[value="between"]:checked) .scope-dates { display: flex; }
.scope:has(input[value="until"]:checked) .scope-date.from { display: none; }

.documents { display: flex; flex-direction: column; gap: 12px; margin: 18px 0 8px; }
.document { border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 17px; background: var(--surface-2); }
.document.is-expired, .document.is-pending { opacity: .6; }
.document.is-expired:hover, .document.is-pending:hover { opacity: 1; }
.document-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.document-head .title { margin: 0 0 4px; font-weight: 500; }
.document-window, .document-body { margin-top: 10px; }
.document-window > summary, .document-body > summary {
  cursor: pointer; font-size: 12.5px; color: var(--muted); padding: 4px 0;
}
.document-window > summary:hover, .document-body > summary:hover { color: var(--fg); }
.document-body pre {
  white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: 12px; margin: 8px 0 0;
}

.timeline { list-style: none; margin: 18px 0 0; padding: 0; }
.moment {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 14px 0; border-top: 1px solid var(--border);
}
.moment-when {
  flex: 0 0 168px; font-size: 12.5px; color: var(--muted);
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
}
.moment-body { flex: 1 1 auto; min-width: 0; }
.moment-body .title { margin: 0 0 3px; font-weight: 500; }
.moment .outcome { margin: 6px 0 0; font-size: 13.5px; }
.moment.running .moment-body .title { color: var(--primary); }

/* ------------------------------------------------------------------ topics */

.brief-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.brief-help { display: flex; gap: 2px; }
.brief-help .btn { padding: 4px 9px; font-size: 12.5px; }

.suggestions { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.suggestions .picker-group-name { margin: 8px 0 2px; }
.suggestion {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: 10px 13px; cursor: pointer; font: inherit;
}
.suggestion:hover { border-color: var(--primary); background: var(--surface); }
.suggestion-topic { font-size: 14px; }
.suggestion-why { font-size: 12px; color: var(--muted); }

/* -------------------------------------------------------------------- plan */

.standing { margin-bottom: 22px; }
.standing-figures { display: flex; gap: 34px; flex-wrap: wrap; margin-top: 10px; }
.standing-figures div { display: flex; flex-direction: column; gap: 2px; }
.standing-figures strong { font-size: 21px; font-weight: 600; }
.standing-figures span { font-size: 12px; color: var(--muted); }

.phases { display: flex; flex-direction: column; gap: 18px; margin: 22px 0; }
.phase { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; background: var(--surface-2); }
/* Quiet until touched: the name is the phase's heading and should read as one,
   not as a form field somebody has to look past. Written as `input.phase-name`
   because the base field rule is an element-plus-attribute selector and would
   otherwise outweigh a bare class — which is why these had borders all along,
   against the intention right here in this file. */
.phase-head { display: flex; flex-direction: column; gap: 2px; }
.phase-when-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
input.phase-name {
  font-size: 18px; font-weight: 600; border-color: transparent; background: none;
  padding: 4px 6px; width: 100%;
}
input.phase-when {
  width: auto; min-width: 120px; font-size: 12.5px; color: var(--muted);
  border-color: transparent; background: none; padding: 3px 6px;
}
input.phase-name:hover, input.phase-when:hover, textarea.phase-intent:hover { border-color: var(--border); }
input.phase-name:focus, input.phase-when:focus, textarea.phase-intent:focus {
  background: var(--bg); border-color: var(--primary);
}
.phase-done { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.phase-progress { flex: 1 1 auto; height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
.phase-progress span { display: block; height: 100%; background: var(--primary); }
.phase-done .meta { flex: 0 0 auto; }
textarea.phase-intent { border-color: transparent; background: none; padding: 4px 6px; margin-top: 4px; }

.items { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.item { display: flex; align-items: flex-start; gap: 13px; padding: 9px 4px; border-top: 1px solid var(--border); }
.item-body { flex: 1 1 auto; min-width: 0; }
.item-title { margin: 0; font-size: 14.5px; }
.item.is-done .item-title { color: var(--muted); text-decoration: line-through; }
.item-states { display: flex; gap: 0; flex: 0 0 auto; }
.item-states form { display: inline; }
.item-states .state {
  border: 1px solid var(--border); background: var(--bg); color: var(--muted);
  font: inherit; font-size: 11.5px; padding: 5px 9px; cursor: pointer;
  margin-left: -1px; white-space: nowrap;
}
.item-states form:first-child .state { border-radius: 7px 0 0 7px; margin-left: 0; }
.item-states form:last-child .state { border-radius: 0 7px 7px 0; }
.item-states .state:hover { color: var(--fg); }
.item-states .state.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.phase-remove .btn { padding-left: 0; }
.phase-remove { display: inline-block; }
.new-item { margin-top: 11px; }
.new-item-title { font-size: 13.5px; }

.danger-zone { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }

/* ================================================================ buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--ink-btn); color: #fff; border: 1px solid transparent;
  border-radius: var(--radius-sm); padding: 8px 14px;
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  text-decoration: none; transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--ink-btn-hover); text-decoration: none; }
/* ✦ — a press that starts something Merlin writes or reads. The one place
   violet still means "press me", so that it means something. */
.btn.ai { background: var(--primary); }
/* The one yes: green, because the design gives Approve its own weight and a
   person scanning a wall of pieces is looking for exactly that press. */
.btn.go { background: var(--ok); }
.btn.go:hover { background: #256540; }
.btn.ai:hover { background: var(--primary-hover); }
.btn:disabled { opacity: .45; cursor: progress; }
.btn.ghost { background: var(--bg); color: var(--fg); border-color: var(--border-strong); }
.btn.ghost:hover { background: var(--surface); border-color: var(--muted); }
.btn.quiet { background: none; color: var(--muted); border-color: transparent; padding-left: 0; padding-right: 0; }
.btn.quiet:hover { background: none; color: var(--fg); }
.btn.danger { background: var(--bg); color: var(--danger); border-color: var(--border-strong); }
.btn.danger:hover { background: var(--bg); border-color: var(--danger); }
.btn.small { padding: 6px 11px; font-size: 12.5px; }
.btn.block { width: 100%; }

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

/* ================================================================== cards */

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 16px; }
.card {
  display: block; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); padding: 20px; color: inherit;
  transition: border-color .12s, transform .12s;
}
a.card:hover, button.card:hover {
  border-color: var(--border-strong); text-decoration: none; transform: translateY(-1px);
}
.card .title { font-weight: 600; font-size: 15.5px; margin: 0 0 5px; letter-spacing: -0.01em; }
.card .meta { color: var(--muted); font-size: 13.5px; margin: 0; }
/* A warning inside a card is still a warning: .card .meta outranked .warn-text by specificity. */
.card .meta.warn-text { color: var(--danger); }

/* The empty state: one line saying it is empty, two lines saying what will
   be here, one press. Centred, with nothing drawn around it — a dashed box
   is a hole in the page, and the design leaves the room quiet instead. */
.empty { padding: 56px 28px; text-align: center; color: var(--muted); }
.empty p { margin: 0 auto 14px; max-width: 46ch; font-size: 13px; }
.empty p:first-child { font-size: 15px; font-weight: 600; color: var(--fg); }
.empty p:first-child:only-child { margin-bottom: 0; }

.pill {
  display: inline-block; font-size: 12px; font-weight: 500; padding: 3px 9px;
  border-radius: 999px; background: var(--primary-soft); color: var(--primary);
}

/* ======================================================== flash and errors */

.flash {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 15px; margin: 0 0 24px; font-size: 14.5px; background: var(--surface-2);
}
.flash.notice { border-left: 3px solid var(--primary); }
.flash.alert { border-left: 3px solid var(--danger); }

.errors {
  border: 1px solid var(--danger); border-radius: var(--radius-sm);
  padding: 13px 15px; margin: 0 0 24px; font-size: 14.5px;
}
.errors ul { margin: 7px 0 0; padding-left: 20px; color: var(--muted); }

[hidden] { display: none !important; }

/* ============================================================ auth split */
/*
 * Desktop: brand panel left, form right. The panel is drawn in CSS — the same
 * 68px grid the canvas renderer uses — so there is no image asset to keep in
 * sync with the palette (docs/ROADMAP.md A2).
 */

.auth { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }

.auth-panel {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--ink-fg);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 44px 52px;
}
.auth-panel::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--ink-border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ink-border) 1px, transparent 1px);
  background-size: 68px 68px;
  opacity: .5;
  mask-image: radial-gradient(120% 90% at 22% 32%, #000 20%, transparent 78%);
}
.auth-panel::after {
  content: ""; position: absolute; width: 620px; height: 620px;
  left: -140px; top: 32%; border-radius: 50%;
  background: radial-gradient(circle, rgba(109, 40, 217, .55), transparent 62%);
  filter: blur(28px);
}
.auth-panel > * { position: relative; z-index: 1; }
.auth-panel .mark { color: var(--ink-fg); }
.auth-panel .claim {
  font-size: 34px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.18;
  margin: 0 0 14px; max-width: 15ch;
}
.auth-panel .sub { color: var(--ink-muted); font-size: 16px; margin: 0; max-width: 40ch; }
.auth-panel .foot { color: var(--ink-muted); font-size: 13px; }

.auth-form { display: flex; align-items: center; justify-content: center; padding: 44px 28px; }
.auth-form .inner { width: 100%; max-width: 372px; }
.auth-form h1 { font-size: 26px; }
.auth-form .lede { font-size: 15px; margin-bottom: 30px; }
.auth-alt { margin-top: 26px; font-size: 14.5px; color: var(--muted); text-align: center; }

@media (max-width: 900px) {
  /* A decorative half-screen above a login form is wasted space on a phone. */
  .auth { grid-template-columns: 1fr; min-height: 100dvh; }
  .auth-panel { padding: 26px 24px 30px; }
  .auth-panel .claim { font-size: 24px; margin-bottom: 8px; }
  .auth-panel .sub, .auth-panel .foot { display: none; }
  .auth-panel .mark { margin-bottom: 20px; }
  .auth-form { align-items: flex-start; padding: 32px 24px 60px; }
}

/* ============================================================== editor */
/*
 * Light controls, dark stage. The canvas ground is dark; surrounding it with
 * white makes simultaneous contrast read it as lighter and flatter than it
 * will be on a phone. A dark stage removes the illusion (docs/ROADMAP.md A1).
 */

.editor {
  display: grid; grid-template-columns: minmax(360px, 460px) 1fr;
  min-height: calc(100vh - var(--topbar-h));
}

.editor-panel { padding: 30px 30px 90px; min-width: 0; }
.editor-panel .switcher { border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 24px; }
.editor-panel .panel-block { border-top: 1px solid var(--border); margin-top: 30px; padding-top: 24px; }
.editor-panel h2 { margin-top: 0; font-size: 15px; }

/* Inset and rounded, so it reads as a panel the artwork sits on rather than a
   slab butted against the header — which is what made the top-left corner
   look like a notch. */
.editor-stage {
  background: var(--stage); color: var(--stage-fg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 28px; gap: 16px; position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h) - 28px);
  margin: 14px 14px 14px 0; border-radius: 16px;
  border: 1px solid var(--stage-border);
}
.canvas-frame {
  display: flex; align-items: center; justify-content: center;
  width: 100%; flex: 1 1 0; min-height: 0;
}
.canvas-frame canvas {
  /* Belt and braces — the renderer sets these too. Inherited text properties
     leak into canvas text metrics and would alter the exported artwork. */
  letter-spacing: normal; word-spacing: normal; font-kerning: auto;
  display: block; max-width: 100%; height: auto;
  border-radius: 14px; border: 1px solid var(--ink-border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.stage-bar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center;
  color: var(--stage-muted); font-size: 13px;
}
.stage-bar label { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--stage-muted); font-weight: 400; }
.stage-bar input[type=checkbox] { accent-color: var(--accent); width: auto; }

.thumbs { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.thumb {
  width: 50px; height: 89px; border-radius: 8px; border: 1px solid var(--border-strong);
  background: var(--surface) center/cover no-repeat; cursor: pointer; padding: 0;
}
.thumb:hover { border-color: var(--muted); }
.thumb.on { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.thumb.none { display: grid; place-items: center; color: var(--muted); font-size: 10.5px; }

.variants { display: grid; gap: 10px; margin-top: 14px; }
.variant {
  text-align: left; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 13px 15px; font: inherit; color: var(--fg); cursor: pointer;
}
.variant:hover { border-color: var(--primary); }
.variant dl { margin: 0; }
.variant dt { font-size: 11.5px; color: var(--muted); margin-bottom: 2px; }
.variant dd { margin: 0 0 9px; font-size: 14.5px; }
.variant dd:last-child { margin-bottom: 0; }

.spinner { color: var(--muted); font-size: 13px; }

/* Editor on mobile: a segmented control, not a second hamburger. Both panes
   are content, so the choice between them stays visible. */
.editor-tabs { display: none; }
.editor-actions-bar { display: none; }

@media (max-width: 940px) {
  .editor { grid-template-columns: 1fr; min-height: 0; }
  .editor-panel { padding: 20px 22px 96px; }
  .editor-stage {
    position: static; height: auto; padding: 22px 18px 96px;
    min-height: 60vh; justify-content: flex-start;
    margin: 0 14px 14px; border-radius: 14px;
  }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .container { padding: 30px 22px 90px; }
  h1 { font-size: 25px; }

  .editor-tabs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
    position: sticky; top: var(--topbar-h); z-index: 30;
    background: var(--surface); padding: 3px; margin: 0;
    border-bottom: 1px solid var(--border);
  }
  .editor-tabs button {
    border: 0; background: none; border-radius: 8px; padding: 9px;
    font: inherit; font-size: 14px; font-weight: 500; color: var(--muted); cursor: pointer;
  }
  .editor-tabs button[aria-selected="true"] { background: var(--bg); color: var(--fg); }

  /* Primary actions sit at thumb height rather than at the end of a long form. */
  .editor-actions-bar {
    display: flex; gap: 10px; align-items: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    padding: 12px 22px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .9); backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--border);
  }
  .editor-panel .actions.desktop-only { display: none; }

  /* One pane at a time on a phone; the segmented control chooses. */
  .editor.show-preview .editor-panel { display: none; }
  .editor.show-edit .editor-stage { display: none; }

  /* Give the preview a definite height so the canvas can be fitted to it:
     viewport, less the topbar, the segmented control and the action bar. */
  .editor.show-preview .editor-stage {
    height: calc(100dvh - var(--topbar-h) - 44px - 66px - 28px);
    min-height: 340px; justify-content: center; padding: 16px 18px 10px;
  }
}

@media (max-width: 620px) {
  .topbar { padding: 0 18px; }
  .topbar nav { display: none; }
  .burger { display: grid; }
  .container { padding: 26px 18px 80px; }
}

/* ================================================================= tables */

.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table td, .table th { padding: 13px 20px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table th { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.table .meta { color: var(--muted); font-size: 13.5px; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.inline-form { display: inline; }
.inline-form select { width: auto; min-width: 118px; padding: 7px 30px 7px 11px; font-size: 13.5px; }

.share-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
@media (max-width: 620px) {
  .share-form { align-items: stretch; }
  .share-form .btn { width: 100%; }
  .table td, .table th { padding: 11px 14px; }
}

/* ================================================================== admin */

.admin-nav { display: flex; gap: 6px; margin: 0 0 30px; border-bottom: 1px solid var(--border); }
.admin-nav a {
  padding: 9px 14px; color: var(--muted); font-size: 14.5px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.admin-nav a:hover { color: var(--fg); text-decoration: none; }
.admin-nav a.on { color: var(--primary); border-bottom-color: var(--primary); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); gap: 14px; margin-bottom: 12px; }
.stat { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; background: var(--surface-2); }
.stat .k { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); }
.stat .v { margin: 0; font-size: 27px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat .s { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }

/* A plain CSS bar chart — 30 columns needs no charting library. */
.bars { display: flex; align-items: flex-end; gap: 3px; height: 168px; }
.bar-col { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.bar { width: 100%; background: var(--primary); border-radius: 3px 3px 0 0; min-height: 2px; }
.bar-col:hover .bar { background: var(--primary-hover); }
.bars-axis { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; color: var(--muted); }

.marks { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 240px)); gap: 16px; }
.mark-choice {
  display: grid; justify-items: center; gap: 14px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px 20px 20px; background: var(--bg); margin: 0;
  font-weight: 400; transition: border-color .12s;
}
.mark-choice:hover { border-color: var(--border-strong); }
.mark-choice.on { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.mark-choice input { position: absolute; opacity: 0; pointer-events: none; }
.mark-choice .preview { color: var(--primary); }
.mark-choice .preview .mark-dot { background: var(--primary); border-radius: 50%; display: block; }
.mark-choice .lockup-sample {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg);
}
.mark-choice .lockup-sample .mark-glyph { color: var(--primary); }
.mark-choice .lockup-sample .mark-dot { background: var(--primary); border-radius: 50%; display: inline-block; }
.mark-choice .name { font-size: 13px; color: var(--muted); }

/* ============================================================ format picker */

.picker-formats { display: flex; gap: 34px; flex-wrap: wrap; margin-bottom: 22px; }
.picker-group-name {
  margin: 0 0 9px; font-size: 12px; font-weight: 600; color: var(--muted);
  letter-spacing: 0.02em;
}
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: 10px; padding: 8px 14px; font: inherit; font-size: 14px;
  color: var(--fg); cursor: pointer; transition: border-color .12s, background .12s;
}
.chip:hover { border-color: var(--muted); }
.chip.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.chip .dims { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.chip.on .dims { color: var(--primary); opacity: .75; }

/* =============================================================== sequences */

.title-form { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.title-input {
  font-size: 28px; font-weight: 600; letter-spacing: -0.025em;
  border: 1px solid transparent; border-radius: 8px; padding: 4px 8px;
  margin-left: -8px; background: transparent; max-width: 640px;
}
.title-input:hover { border-color: var(--border); }

.pages {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px; margin-top: 28px; align-items: start;
}
.page {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); overflow: hidden;
}
.page-stage {
  background: var(--stage); padding: 14px; display: flex;
  align-items: center; justify-content: center; min-height: 150px;
}
.page-stage canvas {
  max-width: 100%; max-height: 300px; width: auto; height: auto; display: block;
  border-radius: 5px; letter-spacing: normal; word-spacing: normal;
}
.page-meta { padding: 12px 14px 0; }
.page-n { margin: 0; font-size: 11.5px; color: var(--muted); font-weight: 500; }
.page-title { margin: 3px 0 0; font-size: 14px; font-weight: 500; }
.page-actions { display: flex; gap: 5px; padding: 12px 14px 14px; flex-wrap: wrap; align-items: center; }
.page-actions .btn { padding: 6px 10px; font-size: 12.5px; }
.page-actions form { display: inline; }

.add-page { padding: 16px; display: grid; gap: 7px; align-content: start; background: var(--surface-2); }
.add-page .page-n { margin-bottom: 6px; }
.add-page form { display: block; }
.btn.block { width: 100%; }

.presets { margin-top: 26px; }
.presets .picker-group-name { margin-bottom: 12px; }

.page-strip { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 20px; }
.page-chip {
  min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 0 9px;
  font-size: 13px; font-weight: 500; color: var(--muted); text-decoration: none;
}
.page-chip:hover { color: var(--fg); border-color: var(--muted); text-decoration: none; }
.page-chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.page-chip.all { color: var(--primary); border-style: dashed; }

.photo-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.photo-current { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.photo-current img {
  width: 96px; height: 96px; object-fit: cover; border-radius: 9px;
  border: 1px solid var(--border);
}
input[type=range] { width: 100%; accent-color: var(--primary); }

/* ================================================================= gallery */

.filters { margin: 0 0 26px; }
.chip.small { padding: 6px 12px; font-size: 13px; flex-direction: row; gap: 7px; align-items: center; }
.chip.small .dims { font-size: 11px; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.shot { margin: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg); }
.shot > a { display: block; background: var(--stage); }
.shot img { display: block; width: 100%; height: auto; max-height: 340px; object-fit: contain; }
.shot figcaption { padding: 13px 15px 15px; }
.shot-title { margin: 0 0 4px; font-size: 14.5px; font-weight: 500; }
.shot-actions { display: flex; gap: 6px; align-items: center; margin-top: 11px; }
.shot-actions form { display: inline; }

/* =========================================================== meters, models */

.meter { margin-bottom: 18px; }
.meter:last-child { margin-bottom: 0; }
.meter-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; font-size: 13.5px; }
.meter-value { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.meter-track { height: 7px; background: var(--surface); border-radius: 4px; overflow: hidden; }
.meter-fill { height: 100%; background: var(--primary); border-radius: 4px; }
.meter-note { margin: 6px 0 0; font-size: 12px; color: var(--muted); }

.models { display: grid; gap: 6px; }
.models .provider { margin-bottom: 10px; }
.models .provider.is-off { opacity: .7; }
.models .provider-name { font-weight: 600; }
.model-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; margin-bottom: 18px; }
.model-choice {
  display: grid; gap: 5px; align-content: start; cursor: pointer; margin: 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 15px 16px; background: var(--bg); font-weight: 400;
  transition: border-color .12s;
}
.model-choice:hover { border-color: var(--border-strong); }
.model-choice.on { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.model-choice.locked { opacity: .55; cursor: not-allowed; }
.model-choice input { position: absolute; opacity: 0; pointer-events: none; }
.model-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.model-price { font-size: 12.5px; color: var(--fg); font-variant-numeric: tabular-nums; }
.model-price .per { color: var(--muted); display: block; font-size: 11.5px; }
.model-asset { font-size: 12.5px; color: var(--primary); font-weight: 500; }
.model-note { font-size: 12.5px; color: var(--muted); line-height: 1.45; margin-top: 3px; }

/* ================================================== avatar / account menu */

.avatar {
  display: inline-grid; place-items: center; border-radius: 50%;
  object-fit: cover; flex: 0 0 auto; overflow: hidden;
}
.avatar-initials { color: #fff; font-weight: 600; letter-spacing: 0.01em; line-height: 1; }

.account { position: relative; }
.account-button {
  display: grid; place-items: center; padding: 0; border: 0; background: none;
  cursor: pointer; border-radius: 50%;
}
.account-button:hover .avatar { box-shadow: 0 0 0 3px var(--primary-soft); }
.account-button[aria-expanded="true"] .avatar { box-shadow: 0 0 0 3px var(--primary-soft); }

.account-menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  width: 252px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 14px 38px rgba(16, 16, 20, .14); padding: 0; overflow: hidden;
}

.account-head { display: flex; gap: 11px; align-items: center; padding: 13px 14px; }
.account-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.account-name { font-size: 14px; font-weight: 600; }
/* Truncated rather than broken mid-word: a padded panel is not the place to
   discover how long somebody's address is. The whole of it is in the title. */
.account-email {
  font-size: 12.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Groups, divided edge to edge. A rule that stops short of the sides reads as
   a mistake rather than as a separation. */
.account-group { border-top: 1px solid var(--border); padding: 5px; }

.account-menu a, .account-menu .menu-signout {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; padding: 8px 9px; border-radius: 8px;
  font: inherit; font-size: 13.5px; color: var(--fg);
  background: none; border: 0; cursor: pointer; text-decoration: none;
}
.account-menu a:hover, .account-menu .menu-signout:hover {
  background: var(--surface); text-decoration: none;
}
.account-menu a:focus-visible, .account-menu .menu-signout:focus-visible {
  outline: 2px solid var(--primary); outline-offset: -2px;
}
/* Signing out is a normal thing to do, not a disabled one — grey text read as
   unavailable. It gets its own group instead. */
.account-menu .menu-signout:hover { background: var(--surface); color: var(--danger); }

.account-badge {
  font-size: 9.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 7px;
}

.drawer-who { display: flex; gap: 10px; align-items: center; padding: 16px 0 0; color: var(--muted); font-size: 13px; }

.profile-row { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.profile-fields { flex: 1 1 320px; }
.profile-row .avatar { border: 1px solid var(--border); }

/* ================================================= sequence: write and edit */

.brief-card { border-color: var(--border-strong); }
.brief-row { display: flex; gap: 12px; align-items: flex-start; }
.brief-row textarea { flex: 1; min-height: 58px; }
.brief-row .btn { flex: 0 0 auto; }

.proposal { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 16px; }
.proposal-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.proposal-head p { margin: 0; font-size: 13.5px; color: var(--muted); }
.proposal-head div { display: flex; gap: 8px; }
.proposal-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.proposal-page { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.proposal-line { margin: 5px 0 0; font-size: 13.5px; line-height: 1.45; }
.proposal-page .page-n { margin-bottom: 4px; }

.reformat { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.reformat label { margin: 0; font-size: 13px; color: var(--muted); }
.reformat select { width: auto; min-width: 170px; padding: 8px 30px 8px 11px; font-size: 13.5px; }

.pages { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.page-body { padding: 13px 15px 0; }
.page-body .field.compact { margin-bottom: 11px; }
.page-body .field.compact label { font-size: 12px; margin-bottom: 5px; }
.page-body .field.compact input, .page-body .field.compact textarea {
  padding: 8px 10px; font-size: 13.5px; border-radius: 8px;
}
.page-body .field.compact textarea { min-height: 52px; }
.page-status { min-height: 16px; margin: 0 0 4px; font-size: 11.5px; }

.chip.small.toggle { cursor: pointer; font-weight: 400; margin: 0; gap: 8px; }
.chip.small.toggle input { width: auto; accent-color: var(--primary); margin: 0; }
.chip.small.toggle:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.reformat { display: block; }
.reformat .chips { margin-bottom: 12px; }

.contrast { margin-top: 26px; }
.contrast-table { font-size: 13.5px; }
.contrast-table td { padding: 9px 0; border-color: var(--border); }
.contrast-table tr.warn td { color: var(--danger); }
.contrast-table tr.warn td.meta { color: var(--danger); }
.contrast-swatch {
  display: inline-grid; place-items: center; width: 34px; height: 24px;
  border-radius: 6px; font-size: 12px; font-weight: 600; margin-right: 11px;
  vertical-align: middle; border: 1px solid rgba(0,0,0,.08);
}
.contrast.has-warning .picker-group-name { color: var(--danger); }

@media (max-width: 620px) {
  .brief-row { flex-direction: column; }
  .brief-row .btn { width: 100%; }
  .proposal-head { align-items: flex-start; }
  .proposal-head div { width: 100%; }
  .proposal-head .btn { flex: 1; }
}

/* =========================================================== brand switcher */

.brand-switch { position: relative; }
.brand-button {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid transparent; border-radius: 9px;
  padding: 6px 11px; font: inherit; font-size: 13.5px; font-weight: 500;
  color: var(--fg); cursor: pointer; max-width: 260px;
}
.brand-button:hover { border-color: var(--border-strong); }
.brand-button[aria-expanded="true"] { border-color: var(--primary); background: var(--primary-soft); }
.brand-current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-caret { color: var(--muted); font-size: 10px; }
.brand-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
/* The face in the switcher is small, so it needs its own rounding and no
   shadow — at 18px the card treatment reads as grime. */
.brand-button .brand-face, .brand-option .brand-face,
.brand-button .identity-mark, .brand-option .identity-mark {
  flex: 0 0 auto; border-radius: 5px; box-shadow: none; border: 1px solid var(--border);
  background: #fff;
}


.brand-menu {
  position: absolute; left: 0; top: calc(100% + 9px); z-index: 60;
  min-width: 248px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .12); padding: 6px;
}
.menu-label {
  margin: 4px 10px 6px; font-size: 11.5px; font-weight: 600;
  color: var(--muted); letter-spacing: 0.02em;
}
.menu-divider { height: 1px; background: var(--border); margin: 6px 0; }
.brand-menu a {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px;
  border-radius: 8px; font-size: 14px; color: var(--fg);
}
.brand-menu a:hover { background: var(--surface); text-decoration: none; }
.brand-option.on { background: var(--primary-soft); color: var(--primary); font-weight: 500; }
.brand-option-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-option-note { margin-left: auto; font-size: 11.5px; color: var(--muted); }

@media (max-width: 860px) { .brand-current { display: none; } .brand-button { padding: 7px 9px; } }

/* ============================================================ image library */

.asset-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 7px; }
.asset-thumb {
  padding: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  background: var(--surface); cursor: pointer; aspect-ratio: 1; display: block;
}
.asset-thumb:hover { border-color: var(--primary); }
.asset-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-current > div { min-width: 0; }

/* ============================================================ explore layouts */

.explore { border-color: var(--border-strong); }
.explore-controls { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }

.candidates {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px; margin-top: 22px;
}
.candidate { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg); }
.candidate-stage {
  background: var(--stage); padding: 14px; display: flex;
  align-items: center; justify-content: center; min-height: 160px;
}
.candidate-stage canvas {
  max-width: 100%; max-height: 320px; width: auto; height: auto; display: block;
  border-radius: 5px; letter-spacing: normal; word-spacing: normal;
}
.candidate-body { padding: 13px 15px 15px; }
.candidate-name {
  width: 100%; font-size: 14.5px; font-weight: 600; padding: 7px 9px;
  border: 1px solid transparent; border-radius: 8px; background: transparent; margin-left: -9px;
}
.candidate-name:hover { border-color: var(--border); }
.candidate-actions { display: flex; gap: 8px; align-items: center; margin-top: 11px; }
.candidate-role { width: auto; flex: 1; padding: 7px 28px 7px 10px; font-size: 13px; }
.candidate-status { min-height: 16px; margin: 8px 0 0; font-size: 12px; }

@media (max-width: 620px) {
  .explore-controls { flex-direction: column; align-items: stretch; }
  .explore-controls .btn { width: 100%; }
}

/* Choosing images for a brand out of the library. */
.asset-pick { position: relative; display: block; margin: 0; cursor: pointer; aspect-ratio: 1; }
.asset-pick input { position: absolute; top: 6px; left: 6px; z-index: 1; accent-color: var(--primary); width: auto; }
.asset-pick img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border: 1px solid var(--border); border-radius: 8px; transition: border-color .12s, opacity .12s;
  opacity: .72;
}
.asset-pick:hover img { opacity: 1; }
.asset-pick:has(input:checked) img { border-color: var(--primary); opacity: 1; box-shadow: 0 0 0 3px var(--primary-soft); }

/* "All brands" is a state, not an absence — it gets its own mark. */
.brand-dot.all {
  background: none;
  border: 1.5px dashed var(--muted);
  box-sizing: border-box;
}
.brand-option.on .brand-dot.all { border-color: var(--primary); }

/* ================================================================== toasts */

.toasts {
  position: fixed; top: calc(var(--topbar-h) + 14px); right: 20px; z-index: 80;
  display: flex; flex-direction: column; gap: 9px;
  pointer-events: none; max-width: min(380px, calc(100vw - 40px));
}
.toast {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--bg); border: 1px solid var(--border);
  border-left: 3px solid var(--primary); border-radius: 10px;
  padding: 12px 12px 12px 14px; font-size: 14px; line-height: 1.45;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .13);
  pointer-events: auto;
  opacity: 0; transform: translateY(-6px) scale(.98);
  transition: opacity .18s ease, transform .18s cubic-bezier(.32, .72, 0, 1);
}
.toast.in { opacity: 1; transform: none; }
.toast.alert { border-left-color: var(--danger); }
.toast-text { flex: 1; min-width: 0; }
.toast-close {
  flex: 0 0 auto; background: none; border: 0; padding: 0 2px; margin: -2px 0 0;
  font-size: 19px; line-height: 1; color: var(--muted); cursor: pointer;
}
.toast-close:hover { color: var(--fg); }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity .18s ease; transform: none; }
  .toast.in { transform: none; }
}

@media (max-width: 620px) {
  .toasts { left: 14px; right: 14px; max-width: none; top: calc(var(--topbar-h) + 10px); }
}

/* ================================================================ feedback */

.rater {
  border-top: 1px solid var(--border); margin-top: 14px; padding-top: 12px;
}
.rater-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rater-question { font-size: 12.5px; color: var(--muted); }
.rater-scale { display: inline-flex; gap: 2px; }
.rater-dot {
  width: 22px; height: 22px; padding: 0; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg);
  font: inherit; font-size: 10.5px; color: var(--muted); cursor: pointer;
  font-variant-numeric: tabular-nums; transition: background .1s, border-color .1s, color .1s;
}
.rater-dot:hover { border-color: var(--muted); color: var(--fg); }
.rater-dot.zero { color: var(--muted); }
.rater-dot.within { background: var(--primary-soft); border-color: var(--primary-soft); color: var(--primary); }
.rater-dot.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.rater-body { margin-top: 10px; }
.rater-body textarea { min-height: 58px; font-size: 14px; }
.rater-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.rater-done { font-size: 12.5px; color: var(--primary); font-weight: 500; }

.score { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.score.up { color: var(--primary); }
.score.down { color: var(--danger); }
.score.flat { color: var(--muted); }

/* ================================================================ composer */

.composer { border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; background: var(--surface-2); }
.composer-kinds { margin-bottom: 20px; }
.kind-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 9px; margin-bottom: 16px; }
.kind {
  display: grid; gap: 3px; text-align: left;
  background: var(--bg); border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 11px 13px; color: var(--fg);
  transition: border-color .12s, background .12s;
}
.kind:hover { border-color: var(--muted); }
.kind.on { border-color: var(--primary); background: var(--primary-soft); }
.kind-hit {
  background: none; border: 0; padding: 0; margin: 0; font: inherit;
  color: inherit; text-align: left; cursor: pointer; width: 100%;
}
/* The count is the decision, so it is edited where the decision is read. */
input.kind-count {
  width: 2.6em; padding: 1px 3px; margin: 0 1px 0 0;
  border: 1px solid transparent; border-radius: 5px; background: transparent;
  font: inherit; font-size: 11.5px; font-variant-numeric: tabular-nums;
  color: var(--fg); text-align: center; -moz-appearance: textfield;
}
input.kind-count::-webkit-outer-spin-button,
input.kind-count::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.kind-count:hover { border-color: var(--border-strong); }
input.kind-count:focus { outline: none; border-color: var(--primary); background: var(--bg); }
.kind.on input.kind-count { color: var(--primary); font-weight: 600; }
.kind-name { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.kind-meta {
  font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 3px;
}
.kind.on .kind-meta { color: var(--primary); opacity: .8; }

.from-scratch { margin-top: 20px; }
.from-scratch summary {
  cursor: pointer; font-size: 14px; color: var(--muted); padding: 6px 0;
  list-style: none;
}
.from-scratch summary::-webkit-details-marker { display: none; }
.from-scratch summary::before { content: "▸ "; font-size: 11px; }
.from-scratch[open] summary::before { content: "▾ "; }
.from-scratch summary:hover { color: var(--fg); }
.from-scratch > *:not(summary) { margin-top: 16px; }

/* ================================================================ reformat */

.reformat { border-top: 1px solid var(--border); margin-top: 20px; padding-top: 18px; }
.reformat-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 10px; }
.reformat-option {
  display: flex; gap: 10px; align-items: flex-start; margin: 0; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
  background: var(--bg); font-weight: 400; transition: border-color .12s;
}
.reformat-option:hover { border-color: var(--border-strong); }
.reformat-option:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.reformat-option input { width: auto; margin: 2px 0 0; accent-color: var(--primary); flex: 0 0 auto; }
.reformat-body { display: grid; gap: 2px; min-width: 0; }
.reformat-name { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.reformat-meta { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.reformat-warn { font-size: 12px; color: var(--danger); margin-top: 2px; }

/* =================================================================== guide */

.stage-map { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 2px; }
.stage-map a {
  display: grid; grid-template-columns: 26px 1fr 110px 44px; gap: 14px; align-items: center;
  padding: 11px 12px; border-radius: 9px; color: var(--fg); font-size: 14.5px;
}
.stage-map a:hover { background: var(--surface); text-decoration: none; }
.stage-map-num {
  width: 24px; height: 24px; border-radius: 50%; background: var(--surface);
  display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--muted);
}
.stage-map-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-map-bar { height: 5px; background: var(--surface); border-radius: 3px; overflow: hidden; }
.stage-map-bar span { display: block; height: 100%; background: var(--primary); border-radius: 3px; }
.stage-map-score { font-size: 12.5px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

.callout {
  border: 1px solid var(--border); border-left: 3px solid var(--primary);
  border-radius: 10px; padding: 15px 18px; background: var(--surface-2); margin-bottom: 38px;
}
.callout p { margin: 0; font-size: 14.5px; line-height: 1.55; }
/* Something that went less than perfectly and is worth saying so. */
.callout.is-warn { border-left-color: var(--warning); }

.stage { border-top: 1px solid var(--border); padding-top: 30px; margin-top: 38px; scroll-margin-top: 80px; }
.stage-number {
  margin: 0 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--primary);
}
.stage-name { font-size: 23px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px; }
.stage-goal { margin: 0 0 20px; color: var(--muted); font-size: 15.5px; }
.stage h3 { font-size: 13px; font-weight: 600; margin: 28px 0 12px; color: var(--muted); }

.stage-why p { margin: 0 0 14px; font-size: 15px; line-height: 1.62; max-width: 66ch; }
.stage-why p:last-child { margin-bottom: 0; }

.stage-actions { margin: 0; padding-left: 20px; max-width: 66ch; }
.stage-actions li { margin-bottom: 7px; font-size: 14.5px; line-height: 1.5; }

.checks, .gaps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.check, .gap {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg);
}
.check-mark {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; flex: 0 0 auto;
}
.check.done .check-mark { background: var(--primary-soft); color: var(--primary); }
.check.warn .check-mark { background: #FDF0E6; color: #A85B18; }
.check.todo .check-mark { background: var(--surface); color: var(--muted); }
.check.unknown .check-mark { background: var(--surface); color: var(--muted); }
.check.done { border-color: var(--border); }
.check.warn { border-color: #F0DCC8; }
.check-body { display: grid; gap: 3px; min-width: 0; }
.check-label { font-size: 14.5px; }
.check-detail { font-size: 13px; color: var(--muted); line-height: 1.5; }

.gap-severity {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  /* Sized to its content: this holds "medium" in one list and "4" in another. */
  min-width: 22px; height: 20px; padding: 0 6px; border-radius: 6px;
  display: inline-grid; place-items: center; white-space: nowrap;
}
.gap.high .gap-severity { background: #FBE9E7; color: var(--danger); }
.gap.medium .gap-severity { background: #FDF0E6; color: #A85B18; }
.gap.low .gap-severity { background: var(--surface); color: var(--muted); }
.gap.high { border-color: #F3D6D2; }
.gap-body { display: grid; gap: 4px; min-width: 0; }
.gap-title { font-size: 14.5px; font-weight: 500; }
.gap-detail { font-size: 13.5px; color: var(--muted); line-height: 1.55; max-width: 68ch; }

@media (max-width: 620px) {
  .stage-map a { grid-template-columns: 24px 1fr 44px; }
  .stage-map-bar { display: none; }
  .stage-name { font-size: 20px; }
}

.guide-brand { display: flex; align-items: center; gap: 10px; margin: -12px 0 26px; }
.guide-brand .field-hint { margin: 0; }

.composer-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; align-items: flex-start; }
.composer-row .field-hint { margin-top: 6px; }
@media (max-width: 620px) { .composer-row { flex-direction: column; } .composer-row .field { width: 100%; flex: none !important; } }

/* ==================================================================== looks */

.look-block { border-top: 1px solid var(--border); margin-top: 20px; padding-top: 18px; }
.look-picker .picker-group-name { display: block; margin-bottom: 9px; }
.looks { display: flex; gap: 8px; flex-wrap: wrap; }
.look {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  gap: 1px 8px; align-items: center; text-align: left;
  background: var(--bg); border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 8px 12px; font: inherit; cursor: pointer; color: var(--fg);
  transition: border-color .12s, background .12s;
}
.look:hover { border-color: var(--muted); }
.look.on { border-color: var(--primary); background: var(--primary-soft); }
.look-swatch { grid-row: span 2; width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,.1); }
.look-name { font-size: 13.5px; font-weight: 500; }
.look-ground { font-size: 10.5px; color: var(--muted); }
.look.on .look-ground { color: var(--primary); opacity: .8; }

.stock-search { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
@media (max-width: 620px) { .stock-search { align-items: stretch; } .stock-search .btn { width: 100%; } }

/* ================================================================= working */

.working-bar {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border); border-left: 3px solid var(--primary);
  border-radius: 10px; padding: 11px 14px; margin-bottom: 18px;
  background: var(--surface-2); font-size: 14px;
}
.working-bar.failed { border-left-color: var(--danger); }
.working-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
  flex: 0 0 auto; animation: pulse 1.1s ease-in-out infinite;
}
.working-bar.failed .working-dot { background: var(--danger); animation: none; }
@keyframes pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .working-dot { animation: none; } }

/* A page that is waiting shows its own placeholders rather than nothing. */
.page.pending .page-stage, .candidate.pending .candidate-stage { position: relative; }
.page.pending .page-stage::after, .candidate.pending .candidate-stage::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.05) 50%, transparent 80%);
  background-size: 220% 100%; animation: sweep 1.4s linear infinite;
}
@keyframes sweep { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) { .page.pending .page-stage::after { animation: none; } }


/* ---------------------------------------------------------------- coaching */

.notes { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.note {
  border: 1px solid var(--border); border-left-width: 3px; border-left-color: var(--primary);
  border-radius: var(--radius); padding: 15px 17px; background: var(--surface-2);
}
.note-head { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.note-head .title { margin: 0; font-size: 15px; font-weight: 600; }
/* The numbers, then what to do about them. Never one without the other: an
   observation with no change attached is a complaint. */
.note-evidence { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); }
.note-change { margin: 9px 0 0; font-size: 14px; max-width: 76ch; }
.note .left-action { display: inline-block; margin-top: 10px; }

/* ---------------------------------------------------------------- playbook */

.playbook-versions { display: flex; gap: 4px; flex: 0 0 auto; }
.playbook-version {
  padding: 6px 13px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 13px; color: var(--muted); text-decoration: none;
}
.playbook-version:hover { color: var(--fg); text-decoration: none; }
.playbook-version.on { background: var(--primary); border-color: var(--primary); color: #fff; }

.chapter { margin-bottom: 12px; }
.chapter-number {
  display: inline-grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--surface); color: var(--muted);
  font-size: 13px; font-weight: 600; margin-right: 8px; vertical-align: 2px;
}
.chapter-body { max-width: 74ch; font-size: 15px; line-height: 1.68; }
.chapter-body p { margin: 0 0 14px; }
.chapter-body ul, .chapter-body ol { margin: 0 0 14px; padding-left: 22px; }
.chapter-body li { margin-bottom: 7px; }
.chapter-body blockquote {
  margin: 0 0 14px; padding: 12px 18px; border-left: 3px solid var(--primary);
  background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
}

.shot { margin: 6px 0 26px; }
.shot img {
  width: 100%; display: block; border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 6px 20px rgba(16, 16, 20, .06);
}
.shot figcaption {
  margin-top: 9px; font-size: 12.5px; color: var(--muted);
  display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap;
}
.shot-missing {
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
  padding: 26px; text-align: center; color: var(--muted); font-size: 13px;
}

.gaps { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.gap {
  border: 1px solid var(--border); border-left-width: 3px;
  border-radius: var(--radius); padding: 14px 16px; background: var(--surface-2);
}
.gap.is-blocks { border-left-color: var(--danger); }
.gap.is-worth_doing { border-left-color: var(--warning); }
.gap.is-nice { border-left-color: var(--border-strong); }
.gap.done { opacity: .55; }
.gap.done .title { text-decoration: line-through; }
.gap-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.gap-head .title { margin: 0 0 2px; font-weight: 500; }
.gap-detail { margin: 9px 0 0; font-size: 13.5px; max-width: 76ch; }
.gap-states { display: flex; flex: 0 0 auto; }
.gap-states form { display: inline; }
.gap-states .state {
  border: 1px solid var(--border); background: var(--bg); color: var(--muted);
  font: inherit; font-size: 11.5px; padding: 5px 10px; cursor: pointer;
  margin-left: -1px; white-space: nowrap;
}
.gap-states form:first-child .state { border-radius: 7px 0 0 7px; margin-left: 0; }
.gap-states form:last-child .state { border-radius: 0 7px 7px 0; }
.gap-states .state.on { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ------------------------------------------------------------------ offers */

.offers { display: grid; gap: 12px; }
.offer {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 15px 17px; background: var(--bg);
}
.offer.is-paused, .offer.is-retired { background: var(--surface-2); }
.offer.is-retired .title, .offer.is-retired .offer-promise { color: var(--muted); }
.offer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.offer-head .title { margin: 0; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.offer-head .meta { margin: 3px 0 0; }
.offer-price { color: var(--muted); font-weight: 400; font-size: 13px; }
.offer-promise { margin: 9px 0 0; max-width: 62ch; }
.offer-results { display: flex; gap: 22px; margin-top: 13px; }
.offer-results div { display: flex; align-items: baseline; gap: 6px; }
.offer-results strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.offer-results span { color: var(--muted); font-size: 12.5px; }
.offer .warn-text { margin-top: 10px; max-width: 60ch; }

.offer-items { border: 0; border-top: 1px solid var(--border); padding: 14px 0 0; margin: 16px 0 0; }
.offer-items legend { padding: 0; font-size: 13px; color: var(--muted); }
.offer-item-row { display: flex; gap: 8px; align-items: center; margin-bottom: 7px; }
.offer-item-row input[type=text] { margin: 0; }
.offer-item-row input[type=text]:nth-child(2) { flex: 2 1 0; }
.offer-item-row input[type=text]:nth-child(1),
.offer-item-row input[type=text]:nth-child(3) { flex: 1 1 0; }
.offer-item-drop { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; white-space: nowrap; }

@media (max-width: 720px) {
  .offer-item-row { flex-wrap: wrap; }
  .offer-results { gap: 14px; flex-wrap: wrap; }
}

/* --------------------------------------------------------- backlog verdicts */

.verdict { font-weight: 600; }
.verdict.is-filled { color: var(--good, #2E7D32); }
.verdict.is-partial { color: #8A6D26; }
.verdict.is-open { color: var(--muted); }
.verdict.is-unchecked, .verdict.is-unknown { color: var(--muted); font-weight: 400; font-style: italic; }
.gap-verdict { margin: 6px 0 0; color: var(--muted); font-size: 13px; max-width: 72ch; }

/* ---------------------------------------------------------------- calendar */

.calendar { margin-top: 22px; }
.cal-head, .cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-head { margin-bottom: 6px; }
.cal-head span { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; padding-left: 2px; }
.cal-week { margin-bottom: 6px; }
.cal-week.is-now .cal-day { border-color: var(--border-strong); }
.cal-day {
  border: 1px solid var(--border); border-radius: 9px; padding: 6px 7px 8px;
  min-height: 92px; background: var(--bg); display: flex; flex-direction: column; gap: 5px;
}
.cal-day.is-past { background: var(--surface-2); }
.cal-day.is-today { outline: 2px solid var(--primary); outline-offset: -1px; }
.cal-date { margin: 0; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cal-date span { text-transform: uppercase; letter-spacing: .05em; font-size: 10.5px; }
.cal-entry {
  border-radius: 7px; padding: 5px 6px; font-size: 11.5px; line-height: 1.35;
  border: 1px solid var(--border); position: relative;
}
.cal-entry.is-planned { border-style: dashed; background: none; }
.cal-entry.is-published { background: var(--surface-2); }
.cal-entry.is-late { border-color: var(--danger); border-style: solid; }
.cal-channel { display: block; color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; }
.cal-title { display: block; font-weight: 500; }
.cal-offer { display: block; color: var(--muted); }
.cal-done {
  margin-top: 4px; border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--muted); font-size: 11px; text-decoration: underline;
}
.cal-done:hover { color: var(--fg); }
/* Moving one day: a date field quiet enough to sit among the entry's small
   controls, saving itself when it is changed. */
.cal-move { display: inline; }
.cal-move-date {
  width: 9.5em; padding: 1px 4px; font-size: 11px; line-height: 1.3;
  border: 1px solid transparent; border-radius: 4px; background: none; color: var(--muted);
}
.cal-move-date:hover, .cal-move-date:focus { border-color: var(--border-strong); background: var(--bg); color: var(--fg); }
.cal-unwritten.is-writing { color: var(--warning-ink); }
.cal-empty-week { grid-column: 1 / -1; margin: 0; padding: 4px 8px; font-size: 12px; color: var(--warning-ink); }
.cal-open { margin: 0 0 4px; font-size: 12px; line-height: 1.3; }
.cal-open-link { color: var(--warning-ink); text-decoration: none; border-bottom: 1px dotted currentColor; }
.topic-passed { color: var(--warning-ink); }

.overdue-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 7px; }
.overdue-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.overdue-actions { display: flex; gap: 6px; }
.later { margin-top: 26px; }
.publication.is-planned { border-style: dashed; }
.publication.is-planned.is-late { border-color: var(--danger); border-style: solid; }

@media (max-width: 760px) {
  .cal-head { display: none; }
  .cal-week { grid-template-columns: 1fr; gap: 4px; }
  .cal-day { min-height: 0; flex-direction: row; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .cal-day:not(:has(.cal-entry)) { display: none; }
  .cal-date::after { content: " " attr(data-weekday); }
}

/* ------------------------------------------------------------------ import */

/* One of the folds on Results, drawn like the other two: it was the one
   with a box and the browser's own marker. */
.import { margin: 8px 0 26px; }
.import-form textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; white-space: pre; }
.import-form .field { margin: 12px 0; }
.import-result { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; }
.import-result th { text-align: left; color: var(--muted); font-weight: 500; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .05em; padding: 0 8px 6px 0; }
.import-result td { padding: 6px 8px 6px 0; border-top: 1px solid var(--border); vertical-align: top; }
.import-result .meta { display: block; font-size: 12px; }
.import-result tr.is-updated td:first-child { color: var(--good, #2E7D32); }
.import-result tr.is-unmatched td, .import-result tr.is-no_numbers td { color: var(--muted); }

/* --------------------------------------------------------- idea promotions */

.proposals { margin: 24px 0; }
.proposals h2 { margin-bottom: 4px; }
.proposal {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; margin-top: 10px;
}
.proposal .title { margin: 0; font-weight: 500; }
.proposal .meta { margin: 3px 0 0; }
.proposal .gap-verdict { margin-top: 5px; }
/* Three corrections and the rule they might be: the pairs read as a list, the
   naming form stacks under the buttons rather than fighting them for a row. */
.proposal .pairs { margin: 6px 0 0; padding-left: 18px; }
.proposal .pairs li { margin: 2px 0; }
.proposal .pairs .quiet { color: var(--muted); }
.waiting-actions.stack { flex-direction: column; align-items: stretch; flex: 0 0 280px; }
.waiting-actions.stack input[type="text"], .waiting-actions.stack select { width: 100%; }

/* ------------------------------------------------------------ expectations */

/* One dot for a day against what was promised: red under half, orange to
   eighty, yellow to ninety-nine, green whole. No dot when nothing was
   promised. */
.habit-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; margin-left: 6px; background: var(--border-strong); }
.habit-dot.is-red { background: #D92D20; }
.habit-dot.is-orange { background: #F79009; }
.habit-dot.is-yellow { background: #EAAA08; }
.habit-dot.is-green { background: #12B76A; }
.habit-dot.is-none { background: transparent; border: 1px solid var(--border); }
/* A day that has not come: promised, not judged. */
.habit-dot.is-ahead { background: transparent; border: 2px solid var(--border-strong); }
.habit-days { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 0; padding: 0; }
.habit-day { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border: 1px solid var(--border); border-radius: 10px; }
.habit-day.is-today { border-color: var(--primary); }
.habit-day .habit-dot { width: 16px; height: 16px; margin: 0; }
.habit-date { font-size: 13px; font-weight: 500; }
.habit-today { margin: 14px 0 0; }
/* The week in one press, and what it costs beside it. */
/* Where it stands: a brand's six stages, a piece's eight. Done, current, ahead. */
.stages { list-style: none; margin: 0 0 18px; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.stage { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); min-width: 96px; font-size: 12px; }
.stage-mark { font-size: 11px; color: var(--muted); }
.stage-name { font-weight: 600; font-size: 13px; }
.stage-detail { color: var(--muted); }
.stage-action { font-size: 12.5px; margin-top: 4px; }
.stage.is-done .stage-mark { color: var(--primary); }
.stage.is-current { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.stage.is-current .stage-mark { color: var(--primary); }
.stage.is-ahead { opacity: .7; }
.stage.is-behind { border-color: var(--warning); }
.stage.is-behind .stage-detail { color: #A85B18; }
.stages.compact { margin: 0 0 16px; gap: 4px; }
.stages.compact .stage { flex-direction: row; align-items: baseline; gap: 6px; padding: 5px 10px; min-width: 0; }
/* The pipeline: every stage's line readable, the current one marked, the
   page's own stage marked as here, who is on it as a pill, and an arrow
   between stages so it reads as a flow rather than a row of boxes. */
.stages.pipeline { gap: 0; align-items: stretch; }
.stages.pipeline .stage { position: relative; margin-right: 16px; opacity: 1; }
.stages.pipeline .stage:last-child { margin-right: 0; }
.stages.pipeline .stage:not(:last-child)::after {
  content: "›"; position: absolute; right: -12px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 15px; line-height: 1;
}
.stage.is-here { background: var(--surface); box-shadow: inset 0 -3px 0 var(--primary); }
.stage.is-here .stage-name { color: var(--primary); }
a.stage-name { color: inherit; text-decoration: none; }
a.stage-name:hover { text-decoration: underline; }
.stage-by {
  width: fit-content; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  padding: 1px 6px; border-radius: 999px; background: var(--border); color: var(--muted);
}
.stage-by.is-merlin { background: var(--surface-2); color: var(--primary); }
.stage-by.is-you { background: var(--primary); color: #fff; }
.stages.compact .stage { flex-direction: column; gap: 1px; padding: 5px 10px; min-width: 0; }
.stages.compact .stage-name { font-size: 12.5px; }
.stages.compact .stage-detail { display: block; font-size: 11px; }
.stages.compact .stage-by { margin-top: 2px; }
.stages.compact .stage-action { margin-top: 2px; font-size: 12px; }
@media (max-width: 720px) { .stages.compact .stage-detail, .stages.compact .stage-by { display: none !important; } }
/* The library: each drawing in both tones, by family. */
.background-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 0 0 24px; }
.background-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: var(--bg); }
.background-card.is-hidden { opacity: .55; }
.background-both { display: flex; gap: 8px; }
.background-thumb { flex: 1 1 0; min-width: 0; border-radius: 6px; border: 1px solid var(--border); object-fit: cover; aspect-ratio: 3 / 4; }
.background-thumb.family-tall { aspect-ratio: 9 / 16; }
.background-thumb.family-square { aspect-ratio: 1; }
.background-thumb.family-wide { aspect-ratio: 16 / 9; }
.background-card .meta { margin: 8px 0; font-size: 12.5px; }
/* Light or dark: each choice shows the two colours it draws in. */
.tone-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.tone-choice { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); font: inherit; font-size: 13px; color: var(--fg); cursor: pointer; }
.tone-choice.on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.tone-swatch { width: 28px; height: 28px; border-radius: 6px; border: 1px solid; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.other-tone { margin-top: 16px; }
.approve-week { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.approve-week .meta { font-size: 12.5px; }
.expectations { margin-bottom: 22px; }
.expectations .left-dot.is-set { background: var(--primary); }
.day-picks { display: flex; gap: 10px; flex-wrap: wrap; }
.day-pick { display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13.5px; }
.xp-pill { font-size: 12.5px; color: var(--muted); text-decoration: none; white-space: nowrap; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; margin-right: 10px; }
.xp-pill:hover { color: var(--fg); border-color: var(--border-strong); text-decoration: none; }

/* ------------------------------------------------------------ colours read off a screenshot */

.screenshot-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.swatches-read { list-style: none; margin: 16px 0 10px; padding: 0; }
.swatch-read { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--border); }
.swatch-read .swatch-chip.large { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); flex: 0 0 auto; }
.swatch-read .mono { min-width: 78px; }
.swatch-add { display: inline-flex; gap: 6px; align-items: center; }
.swatch-add input[type="text"] { width: 150px; }
.swatch-set { display: inline-flex; gap: 6px; }

/* ------------------------------------------------------------ the desk */

/* One row per brand, the brand that needs somebody first. Cells share one
   grid so the eye runs down a column: what waits, what is next, the risk,
   what Merlin did, the number. */
.desk-total { margin: 0 0 12px; font-weight: 500; }
.desk { list-style: none; margin: 0 0 28px; padding: 0; border-top: 1px solid var(--border); }
.desk-row { display: grid; grid-template-columns: 200px 150px 1.4fr 130px 1.6fr 1fr; gap: 14px; align-items: center;
            padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.desk-row.needs-you { background: color-mix(in srgb, var(--primary) 4%, transparent); }
.desk-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; font-weight: 500; }
.desk-face { flex: 0 0 auto; }
.desk-cell { min-width: 0; }
.desk-cell a { color: inherit; text-decoration: none; }
.desk-cell a:hover { text-decoration: underline; }
.desk-label { display: block; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.desk-waiting { font-weight: 600; color: var(--primary); }
.desk-risk { color: var(--danger); font-weight: 500; }
@media (max-width: 900px) { .desk-row { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------ an offer's number */

.offer-target { margin: 8px 0 4px; }
.offer-target.is-behind, .offer-target.is-late { color: var(--danger); }
.offer-target.is-reached { color: var(--primary); }
.offer-target.is-not-counted { color: var(--muted); }
.offer-targets { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.offer-targets li { margin: 3px 0; }
.offer-targets li.is-behind, .offer-targets li.is-late { color: var(--danger); }
.offer-targets li.is-not-counted { color: var(--muted); }

/* ------------------------------------------------------------ the conversation */

/* A card under the reply that proposed it: the kind, the line, and the two
   buttons. A settled card stays, greyed, so the thread reads as what happened. */
/* No thread list beside the standing conversation: one column, the width the
   advisor's two would have had. */
.advisor:has(> .conversation) { grid-template-columns: minmax(0, 1fr); }
.conversation .advisor-message { max-width: 80ch; }
.conversation .cards { list-style: none; margin: 8px 0 0; padding: 0; }
.conversation .card-row { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.conversation .card-row .card-title { flex: 1 1 240px; }
.conversation .card-row.is-settled .card-title { color: var(--muted); }
.conversation .card-row .inline-form { flex: 0 0 auto; }
.asks { margin-bottom: 18px; }

/* ------------------------------------------------------------ the film's cost */

.estimate-lines { margin: 0 0 8px; padding-left: 18px; }
.estimate-lines li { margin: 2px 0; }

/* ------------------------------------------------------------ the hours */

.hours-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hours-row select { width: auto; min-width: 96px; }
.day-actions { margin: 4px 0 6px; padding-left: 20px; }
.day-actions li { margin: 2px 0; font-size: 14px; }
.day-actions .meta { display: inline-block; min-width: 46px; }

/* ------------------------------------------------------------ the memory */

/* One line per fact, the label first so the eye can find the guesses. A
   struck line stays on the page, struck: the person's correction is a thing
   to see, not a thing that vanished. */
.memory-lines { list-style: none; margin: 0; padding: 0; }
.memory-line { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--border); }
.memory-line:first-child { border-top: 0; }
.memory-line .pill { flex: 0 0 auto; min-width: 72px; text-align: center; }
.memory-line .text { flex: 1 1 auto; line-height: 1.45; }
.memory-line .inline-form { flex: 0 0 auto; }
.memory-line.is-struck .text { text-decoration: line-through; color: var(--muted); }
.memory-line .source-guessed { border-color: var(--warning); color: var(--warning); }
.memory-line .source-measured { border-color: var(--primary); color: var(--primary); }

/* ------------------------------------------------------------ rhythm target */

.rhythm.has-target { position: relative; }
.rhythm-target {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px dashed var(--border-strong); z-index: 1; pointer-events: none;
}
.rhythm-week.is-missed { background: color-mix(in srgb, var(--danger) 7%, transparent); border-radius: 3px; }
.key-target { display: inline-block; width: 14px; border-top: 1px dashed var(--border-strong); margin: 0 4px 4px 12px; }

/* ------------------------------------------------------ dates and what cost */

.item.is-late { border-left: 2px solid var(--danger); padding-left: 10px; }
.item-due { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.item-due input[type=date] { font-size: 12px; padding: 3px 6px; width: auto; margin: 0;
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--muted); }
.item-due input[type=date]:hover { color: var(--fg); border-color: var(--border-strong); }
.item-due span { font-size: 12px; color: var(--muted); }
.publication-spend { color: var(--muted); font-size: 12.5px; }

/* ------------------------------------------------------------- attribution */

.offer-attribution { margin: 12px 0 0; max-width: 66ch; }
.offer-since { display: block; margin-top: 4px; color: var(--muted); font-size: 0.92em; }
.offer-history { margin-top: 10px; }
.offer-history summary { cursor: pointer; color: var(--muted); font-size: 0.92em; }
.offer-readings { margin-top: 8px; font-size: 0.92em; }
.offer-readings td { padding: 4px 8px; }
.offer-reading { margin-top: 12px; }
.offer-reading > summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.offer-reading > summary:hover { color: var(--fg); }
.reading-form { margin-top: 10px; max-width: 460px; }
.tagged { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.tagged input {
  flex: 1 1 auto; margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--muted);
}
.tagged input:focus { color: var(--fg); }

/* ------------------------------------------------------------ side by side */

.compare-scroll { overflow-x: auto; margin-top: 20px; }
.compare { width: 100%; border-collapse: collapse; font-size: 13.5px; white-space: nowrap; }
.compare th {
  text-align: left; color: var(--muted); font-weight: 500; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .05em; padding: 0 14px 8px 0;
}
.compare td { padding: 10px 14px 10px 0; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.compare tbody tr:hover { background: var(--surface-2); }
.compare .compare-name { white-space: normal; min-width: 160px; font-variant-numeric: normal; }
.compare .compare-name a { font-weight: 600; }
.compare .compare-name .meta { display: block; font-size: 11.5px; }
.compare tr.is-stalled td { background: color-mix(in srgb, var(--danger) 5%, transparent); }

/* -------------------------------------------------------------- capabilities */

.capabilities { display: grid; gap: 12px; margin: 22px 0; }
.capability { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.capability.is-broken { border-color: var(--danger); }
.capability.is-off { background: var(--surface-2); }
.capability .title { margin: 0; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.capability .meta { margin: 3px 0 0; }
.capability .gap-verdict { margin-top: 8px; }
.capability.is-broken .gap-verdict { color: var(--danger); }

/* ------------------------------------------------------- image provenance */

.asset-pick { position: relative; }
.asset-pick-where {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 5px;
  font-size: 10px; line-height: 1.25; color: #fff; background: rgba(16, 16, 20, .62);
  border-radius: 0 0 7px 7px; opacity: 0; transition: opacity .12s;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.asset-pick:hover .asset-pick-where { opacity: 1; }

/* --------------------------------------------------------------- logo pick */

.logo-pick { margin-top: 8px; }
.logo-pick select { font-size: 12px; padding: 4px 6px; }

/* ---------------------------------------------------------------- post text */

.post-text textarea { font-size: 13.5px; }
.counter-line.is-folded span:first-child { color: #8A6D26; font-weight: 600; }
.counter-line.is-over span:first-child { color: var(--danger); font-weight: 600; }
.post-text-form { margin-bottom: 8px; }
.proposal-text { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.variant {
  display: flex; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--border);
  border-radius: 9px; padding: 9px 11px; background: var(--bg); cursor: pointer; margin-top: 8px;
}
.variant:hover { border-color: var(--border-strong); }
.variant-n { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.variant-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.variant-line { font-size: 13px; }
.variant-text { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* ------------------------------------------------------------- objective */

.objective-bar { margin-bottom: 18px; }
.objective-bar.is-behind { border-color: var(--danger); }
.objective-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 10px; }
.objective-track { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin: 4px 0 10px; }
.objective-track span { display: block; height: 100%; background: var(--primary); border-radius: 4px; }
.objective-bar.is-behind .objective-track span { background: var(--danger); }

/* ---------------------------------------------------------------- knowledge */

.knowledge-fields { display: grid; gap: 14px; margin: 22px 0; }
.knowledge-field { display: block; text-decoration: none; color: inherit; }
.knowledge-field:hover { border-color: var(--border-strong); text-decoration: none; }
.knowledge-field h2 { margin: 0 0 6px; font-size: 17px; }
.knowledge-field p { margin: 0 0 6px; }
.claims { display: grid; gap: 14px; margin-top: 16px; }
.claim { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; border-left-width: 3px; }
.claim.is-strong { border-left-color: var(--good, #2E7D32); }
.claim.is-mixed { border-left-color: #8A6D26; }
.claim.is-weak { border-left-color: var(--muted); }
.claim.is-contested { border-left-color: var(--danger); }
.claim-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.claim-head h3 { margin: 0; font-size: 15.5px; }
.claim p { margin: 8px 0 0; max-width: 72ch; }
.claim-practice { color: var(--fg); }
.claim-sources { margin: 10px 0 0; padding-left: 18px; color: var(--muted); font-size: 12.5px; }
.evidence { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; }
.evidence.is-strong { color: var(--good, #2E7D32); }
.evidence.is-mixed { color: #8A6D26; }
.evidence.is-weak { color: var(--muted); }
.evidence.is-contested { color: var(--danger); }

/* ------------------------------------------------------------------ advisor */

.advisor { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; }
.advisor-threads ul { list-style: none; margin: 0 0 12px; padding: 0; }
.advisor-thread { display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: inherit; }
.advisor-thread:hover { background: var(--surface-2); text-decoration: none; }
.advisor-thread.on { background: var(--surface); box-shadow: inset 2px 0 0 var(--primary); }
.advisor-thread-title { display: block; font-size: 13.5px; font-weight: 500; }
.advisor-thread .meta { display: block; font-size: 11.5px; }
.advisor-messages { display: grid; gap: 14px; margin-bottom: 22px; }
.advisor-message { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; max-width: 72ch; }
.advisor-message.is-user { background: var(--surface-2); margin-left: 40px; }
.advisor-message.is-assistant { background: var(--bg); margin-right: 40px; }
.advisor-message p { margin: 0 0 10px; }
.advisor-message p:last-child { margin-bottom: 0; }
.advisor-who { font-size: 12px; font-weight: 600; color: var(--muted); }
.advisor-sources { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--border); font-size: 12.5px; color: var(--muted); }
.advisor-sources li { margin: 4px 0; }
.advisor-ask { max-width: 72ch; }
.advisor-ask-row { display: flex; align-items: flex-end; gap: 12px; margin-top: 4px; }
@media (max-width: 760px) { .advisor { grid-template-columns: 1fr; } .advisor-message.is-user, .advisor-message.is-assistant { margin: 0; } }

/* ------------------------------------------------------------------- video */

.video-card { display: block; text-decoration: none; color: inherit; }
.video-card:hover { border-color: var(--border-strong); text-decoration: none; }
.storyboard { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: shot; }
.shot-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; position: relative; }
.shot-row::before { counter-increment: shot; content: counter(shot); position: absolute; top: 8px; left: 10px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.shot-frame { border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface-2); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.shot-frame.is-16-9 { width: 96px; height: 54px; }
.shot-frame.is-9-16 { width: 54px; height: 96px; margin-left: 21px; }
.shot-size { font-weight: 700; }
.shot-what { margin: 0 0 4px; font-weight: 500; }
.shot-dialogue { margin: 4px 0; font-style: italic; }
.shot-body .meta { margin: 3px 0 0; }
.shot-tools { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; }
.cast { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.cast-member { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.cast-member .title { margin: 8px 0 2px; font-weight: 600; }
.cast-images { display: flex; gap: 4px; height: 64px; align-items: center; }
.cast-images img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; }
.cast-none { font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------------- video phases */

/* A film's four steps. Named for the film rather than for "phase": these
   collided with the plan's own phases, which are a different thing on a
   different page — and being written later they won, so the plan laid its
   phases out in a four-column grid and drew their names at the size of a
   caption. Two components, two names. */
.video-phases { list-style: none; margin: 14px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.video-phase { border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; display: flex; flex-direction: column; gap: 2px; opacity: .7; }
.video-phase.passed { opacity: 1; background: var(--surface-2); }
.video-phase.on { opacity: 1; border-color: var(--primary); box-shadow: inset 0 2px 0 var(--primary); }
.video-phase-n { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.video-phase-name { font-weight: 600; font-size: 13.5px; }
.video-phase-does { font-size: 12px; color: var(--muted); }
.video-phase-actions { display: flex; gap: 10px; align-items: center; margin: 6px 0 22px; flex-wrap: wrap; }
.cast-add { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 10px 0 26px; }
.cast-pick { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cast-pick-one { display: inline-flex; gap: 5px; align-items: center; font-size: 13px; }
.film { width: 100%; max-height: 520px; border-radius: 9px; background: #000; display: block; margin-bottom: 8px; }
.film.is-9-16 { max-width: 300px; }
.film-form { margin-top: 12px; }
@media (max-width: 760px) { .phases { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------- working modal, usage */

.working-modal { border: 0; padding: 0; background: none; max-width: min(480px, calc(100vw - 32px)); color: var(--fg); }
.working-modal::backdrop { background: rgba(16, 16, 20, .42); backdrop-filter: blur(2px); }
.working-modal-frame { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 18px 48px rgba(16, 16, 20, .18); padding: 22px 24px; text-align: center; }
.working-modal-frame h2 { margin: 10px 0 6px; font-size: 17px; }
.working-modal-frame .working-text { margin: 0 0 8px; font-weight: 500; }
.working-modal-frame .meta { margin: 4px 0; }
.working-modal-frame .working-dot { display: inline-block; width: 12px; height: 12px; }
.working-modal-close { margin-top: 14px; }
.working-modal.failed .working-dot { background: var(--danger); animation: none; }
.working-modal.failed .working-text { color: var(--danger); }
.usage-pill { font-size: 12.5px; color: var(--muted); text-decoration: none; white-space: nowrap; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; margin-right: 10px; }
.usage-pill:hover { color: var(--fg); border-color: var(--border-strong); text-decoration: none; }
.usage-bolt { color: var(--primary); }
@media (max-width: 760px) { .usage-pill { display: none; } }

/* ------------------------------------------------------------- allowance */

.allowance { text-align: center; }
.allowance-figure { margin: 0; font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.allowance-label { margin: 2px 0 14px; color: var(--muted); }
.allowance .objective-track { max-width: 420px; margin: 0 auto 10px; }
.allowance.is-low .objective-track span { background: #8A6D26; }
.allowance.is-out { border-color: var(--danger); }
.allowance.is-out .objective-track span { background: var(--danger); }
.usage-pill.is-low { color: #8A6D26; border-color: #8A6D26; }
.usage-pill.is-out { color: var(--danger); border-color: var(--danger); font-weight: 600; }
.top-up .actions { margin-top: 4px; }

/* ------------------------------------------------------------ case studies */

.case-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; }
.case-step { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.case-step-head { display: flex; gap: 14px; align-items: flex-start; }
.case-step-head h3 { margin: 0; font-size: 15.5px; }
.case-step-head .meta { margin: 2px 0 0; }
.case-step-n { width: 26px; height: 26px; flex: none; border-radius: 999px; background: var(--surface-2);
  color: var(--muted); font-size: 12.5px; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.case-step-body { margin: 12px 0 0 40px; display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 6px 14px; }
.case-step-body dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; padding-top: 2px; }
.case-step-body dd { margin: 0; max-width: 74ch; }
.case-step-body dt.is-value { color: var(--primary); }
.case-step-body dd.is-value { font-weight: 500; }
@media (max-width: 720px) {
  .case-step-body { margin-left: 0; grid-template-columns: 1fr; gap: 2px; }
  .case-step-body dt { margin-top: 8px; }
}

/* ================================================================ journeys */

/* The four states reuse the readiness marks, so a reader who has read one
   list can read this one. What is added here is the row of small facts under
   each journey, and a step gallery wide enough to read a screenshot in. */
.journey-meta { display: flex; flex-wrap: wrap; gap: 0 14px; margin-top: 2px; }
.journey-meta span:not(:last-child)::after { content: " ·"; color: var(--border); }
.check.unknown { border-style: dashed; }

.journey-steps { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.journey-steps .shot figcaption { display: grid; gap: 5px; }
/* The top of the page, filling the card: a screenshot of a long page shown
   whole is a grey band with a stripe of interface in it. */
.journey-steps .shot img { height: 208px; max-height: none; object-fit: cover; object-position: top center; }
.journey-steps .shot-actions { flex-wrap: wrap; }
.journey-steps input[type=file] { font-size: 12px; max-width: 190px; }

/* =================================================================== plans */

.plan-cards { grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); align-items: start; }
.plan-card.is-current { border-color: var(--primary); }
.plan-price { margin: 2px 0 10px; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.plan-includes { margin: 12px 0 14px; padding-left: 18px; }
.plan-includes li { font-size: 13.5px; line-height: 1.55; margin-bottom: 5px; color: var(--fg); }
/* The line that says what a plan does not do reads as part of the list, not
   as a warning: it is a fact about the plan, like the others. */
.plan-includes li:last-child { color: var(--muted); }

/* ============================================================ intake links */

/* A type and an address on one line: the type first, because it is the
   narrower and the one that is usually left alone. */
.intake-link { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; margin-bottom: 8px; }
.intake-link select, .intake-link input { margin: 0; }
.intake-link-actions { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; }
/* The existing .link-row is a flex line and stays one; the type just joins it. */
.link-kind { flex: 0 0 150px; max-width: 150px; }
@media (max-width: 720px) {
  .intake-link { grid-template-columns: 1fr; }
  .link-kind { flex: 1 1 100%; max-width: none; }
}
.from-site { color: var(--primary); }

/* ======================================================= marketing practice */

/* A long document read on a screen: measured line length, headings that are
   findable, and the fenced blocks it is largely made of kept as blocks. */
.practice-toc { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 16px; }
.practice-toc a { font-size: 13px; color: var(--muted); padding: 2px 0; }
.practice-toc a:hover { color: var(--primary); }

.practice-document { max-width: 74ch; margin-top: 26px; }
.practice-document h2 {
  margin: 38px 0 10px; padding-top: 18px; border-top: 1px solid var(--border);
  scroll-margin-top: 20px;
}
.practice-document h3 { margin: 22px 0 6px; font-size: 15px; }
.practice-document p { margin: 0 0 10px; line-height: 1.6; }
.practice-document .practice-item { margin: 0 0 4px; padding-left: 14px; text-indent: -14px; }
.practice-document blockquote {
  margin: 12px 0; padding: 10px 14px; border-left: 3px solid var(--primary);
  background: var(--surface-2); font-size: 14.5px;
}
.practice-block {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; margin: 0 0 12px; overflow-x: auto;
}
/* The document's headings are its own — set in small caps rather than
   retyped, so CRO and SEO survive. */
.practice-document h2 { font-size: 17px; letter-spacing: 0.01em; }
.practice-toc a { text-transform: none; }

/* ================================================== this week, and next out */

/* The two answers first, side by side, with the reason under each. The reason
   is not small print: a next step nobody can argue with is a queue. */
.focus-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.focus-card {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px;
  background: var(--surface-2);
}
.focus-card.is-next { background: var(--bg); border-color: var(--border-strong); }
.focus-statement { margin: 6px 0 8px; font-size: 20px; letter-spacing: -0.015em; }
.focus-reason { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 52ch; }
.focus-card .shot-actions { margin-top: 14px; }

.chain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 26px; }
.chain-link {
  display: flex; flex-direction: column; gap: 2px; padding: 11px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg);
}
.chain-link:hover { border-color: var(--border-strong); text-decoration: none; }
.chain-link.is-missing { border-style: dashed; }
.chain-kicker {
  font-size: 9.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted);
}
.chain-value { font-size: 14px; color: var(--fg); }
.chain-link.is-missing .chain-value { color: var(--muted); }

@media (max-width: 780px) {
  .focus-pair, .chain { grid-template-columns: 1fr; }
}
/* When it goes out, said on one line in the editor's panel. */
.schedule-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.schedule-row input[type=date] { flex: 1 1 130px; }
.schedule-row select { flex: 1 1 120px; }

/* ================================================== something worth reading */

/* Two thousand years old, and the only part of a wait that is worth the
   reader's attention. Quiet enough not to compete with what is being said
   above it. */
.working-wisdom {
  margin: 18px 0 0; padding: 14px 16px 12px;
  border-top: 1px solid var(--border); text-align: left;
}
.working-wisdom blockquote {
  margin: 0 0 6px; padding: 0; border: 0;
  font-size: 15px; line-height: 1.5; font-style: italic; color: var(--fg);
}
.working-wisdom figcaption { font-size: 12px; color: var(--muted); }
.working-modal .working-steps { text-align: left; margin: 12px 0 0; padding-left: 20px; }
.working-modal .working-steps li { font-size: 13.5px; color: var(--muted); margin-bottom: 3px; }

/* ===================================================================== path */

/* A step is a mark, what it says, and the way to do it — three columns, so
   the button does not wrap onto a row of its own and double the height. */
.checks.steps .check { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.checks.steps .check .btn { white-space: nowrap; }
.checks.steps .check.is-next { border-color: var(--primary); background: var(--surface-2); }
.checks.steps .check.unknown { opacity: .6; }
.chain.is-path .chain-link { border-style: solid; }
/* Two ways to take a step, side by side: by hand, or handed to Claude. */
.step-actions { display: flex; gap: 6px; align-items: center; }
.step-actions form { display: inline; }

/* ------------------------------------------------------ where it disagrees */

.contradiction { margin-top: 14px; }
.contradiction-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.contradiction-head .title { margin: 0; font-weight: 500; }
.contradiction-head .meta { margin: 4px 0 0; max-width: 74ch; }
.sides {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px; margin: 14px 0 4px;
}
.side { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; }
.side-label { margin: 0; font-size: 12px; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.side-detail { margin: 5px 0 6px; font-size: 13.5px; line-height: 1.45; }
.side .meta { margin: 0; }
.contradiction-choices { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.contradiction-choices .choice { display: inline; }
.choice-detail { flex: 1 1 200px; min-width: 0; }

/* ------------------------------------------------------- the two halves */

.knowledge-halves { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.half-figure { margin: 4px 0 8px; font-size: 30px; font-weight: 500; line-height: 1; }
.half-figure .meta { font-size: 15px; font-weight: 400; }
.half .field-hint { max-width: 46ch; }

/* ------------------------------------------------------------------- plan */

/* The page opens on what somebody came for. The aim, then the phases, then how
   it is going — and the knobs that are set once folded away at the end, rather
   than sitting between a person and the plan they came to read. */
.plan-block { margin-top: 34px; }
.plan-block > .card { margin-top: 12px; }
.proposal-callout { margin-bottom: 14px; }
.plan-draft { margin-top: 24px; }
.plan-draft h2 { margin: 0 0 4px; }
.plan-draft .field-hint { max-width: 64ch; }
.plan-add-phase { margin-top: 16px; }

.plan-settings > summary {
  cursor: pointer; padding: 13px 16px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface-2);
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.plan-settings > summary::-webkit-details-marker { display: none; }
.plan-settings > summary::marker { content: ""; }
.plan-settings > summary::before { content: "▸"; color: var(--muted); font-size: 11px; }
.plan-settings[open] > summary::before { content: "▾"; }
.plan-settings > summary:hover { border-color: var(--border-strong); }
.summary-title { font-weight: 600; font-size: 14px; }
.plan-settings-body { padding: 20px 2px 4px; }
.plan-settings-body h3 { margin: 26px 0 4px; font-size: 14px; }

/* A phase is a card with room in it. The name is the heading it looks like,
   and the intent grows to whatever was written rather than showing two lines
   of it through a slot. */
.phase { padding: 20px 22px; }
.phase-name { font-size: 17px; font-weight: 600; }
.phase-intent { min-height: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.phase-intent:focus { color: var(--fg); }
.items { margin-top: 16px; }
.item { padding: 11px 4px; gap: 14px; }
.plan-aim .objective-bar { margin-bottom: 12px; }

/* -------------------------------------------------- designing by talking */

.design-start { margin-bottom: 18px; }
.design-start h2 { margin: 0 0 4px; }
.design-start .field-hint { margin-bottom: 16px; max-width: 70ch; }
.design-start-form .field { margin-bottom: 14px; }
.design-start-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.design-start-row .field { flex: 0 0 220px; margin: 0; }

/* The canvas stays put while the conversation scrolls past it: a design being
   argued about that you have to scroll to see is a design nobody looks at. */
.design-chat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 28px; align-items: start; }
.design-stage { position: sticky; top: 84px; }
.design-canvas {
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: var(--surface-2);
}
.design-canvas canvas { display: block; width: 100%; height: auto; }
.design-empty { margin: 0; border: 0; }
.design-facts { margin-top: 14px; }
.design-facts .meta { margin: 0 0 4px; }
.design-facts .btn { margin-top: 10px; }

.design-talk { display: flex; flex-direction: column; gap: 14px; }
.design-turn { border-left: 2px solid var(--border); padding: 2px 0 2px 12px; }
.design-turn.is-user { border-left-color: var(--primary); }
.design-who { margin: 0 0 3px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.design-said { margin: 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.design-say { margin-top: 6px; display: flex; flex-direction: column; gap: 10px; }
.design-say .btn { align-self: flex-start; }

@media (max-width: 900px) {
  .design-chat { grid-template-columns: 1fr; }
  .design-stage { position: static; }
}
.waiting-on { color: var(--muted); }
.check-label .pill { margin-left: 7px; vertical-align: 1px; }

/* Taking the context out and putting some in: one errand, two ends. */
.context-io { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; }
.context-io .field-hint { max-width: 48ch; margin-bottom: 12px; }
.context-io .field { margin-bottom: 10px; }

/* ------------------------------------------------------- period and metrics */

/* Which stretch of time everything below covers. §124: always make time
   explicit — a figure whose period is not stated is not a figure. */
.period-bar {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding: 10px 0 14px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.period-label { margin: 0; font-size: 13.5px; }
.period-kicker { color: var(--muted); }
.period-label .meta { margin-left: 6px; }
.period-choices { display: flex; gap: 2px; flex-wrap: wrap; }
.period-choice {
  padding: 4px 10px; border-radius: 999px; font-size: 12.5px; color: var(--muted);
  text-decoration: none; border: 1px solid transparent;
}
.period-choice:hover { color: var(--fg); text-decoration: none; border-color: var(--border); }
.period-choice.on { background: var(--surface-2); border-color: var(--border-strong); color: var(--fg); font-weight: 500; }

.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; }
.metric {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; background: var(--surface);
}
.metric-kicker {
  margin: 0 0 6px; font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted);
}
.metric-figure { margin: 0; font-size: 30px; font-weight: 500; line-height: 1.1; }
.metric-verdict { font-size: 18px; line-height: 1.3; }
.metric-unit { font-size: 15px; color: var(--muted); font-weight: 400; }
.metric .meta { margin: 5px 0 0; }
.metric-score { font-style: italic; }
.metric-asks { color: var(--fg); }
.metric-coverage { padding-top: 8px; border-top: 1px solid var(--border); }

.metric-parts { list-style: none; margin: 14px 0 0; padding: 0; }
.metric-parts li { padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; }
.metric-parts .part-name { font-weight: 500; }
.metric-parts .part-value { float: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.metric-parts .meta { display: block; margin-top: 2px; clear: both; }
/* Not recorded is a fact worth reading, not an error worth shouting. */
.metric-parts li.is-missing .part-name, .metric-parts li.is-missing .part-value { color: var(--muted); }

/* --------------------------------------------------------- waiting on you */

.waiting { list-style: none; margin: 12px 0 0; padding: 0; }
.waiting-item {
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
  padding: 14px 0; border-top: 1px solid var(--border);
}
.waiting-body { flex: 1 1 320px; min-width: 0; }
.waiting-body .title { margin: 0; font-weight: 500; }
.waiting-body .meta { margin: 3px 0 0; }
.waiting-actions { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
.ceiling-field { max-width: 260px; }
.drafted-phases { margin: 0; padding-left: 20px; }
.drafted-phases > li { margin-bottom: 14px; }
.drafted-phases .title { margin: 0; font-weight: 600; }
.drafted-phases .meta { margin: 2px 0 0; }
.drafted-items { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--muted); }

/* A form with a note in it is not asked to fit the box built for a one-line
   confirmation. `width` as well as `max-width`: a dialog with only a maximum
   shrinks to its content, so the roomier box was still the narrow one. */
dialog.is-wide { width: min(720px, calc(100vw - 32px)); max-width: min(720px, calc(100vw - 32px)); }
.tile-form .note-body { min-height: 200px; font-size: 14.5px; line-height: 1.6; }
.tile-form .kind-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.inline-form { display: inline; }
/* The one tool on the desk that removes something Merlin reads, rather than
   opening a form. It used to be the same grey pencil-sized square as the edit. */
.tile-tool.is-remove { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.tile-tool.is-remove:hover { color: #fff; background: var(--danger); border-color: var(--danger); }

/* ------------------------------------------------------------- the verdict */

/* How it is going, and what is in the way — the two things §18 puts at the top
   of a command centre and this page made a manager work out for themselves. */
.verdict-bar {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 22px;
  flex-wrap: wrap; padding: 15px 18px; margin-bottom: 4px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.verdict-say { flex: 1 1 320px; min-width: 0; }
.verdict-line { margin: 2px 0 0; font-size: 17px; font-weight: 500; line-height: 1.35; }
.verdict-say .meta { margin: 5px 0 0; }
.verdict-counts { display: flex; gap: 10px; flex: 0 0 auto; }
.verdict-count {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 92px; padding: 9px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--fg); text-decoration: none;
}
.verdict-count:hover { border-color: var(--border-strong); text-decoration: none; }
.verdict-figure { font-size: 22px; font-weight: 600; line-height: 1.1; }
.verdict-count.is-live { border-color: var(--primary); }
.verdict-count.is-live .verdict-figure { color: var(--primary); }
.verdict-count.is-warn .verdict-figure { color: var(--danger); }
.verdict-risk { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); }
.verdict-risk strong { color: var(--fg); }

/* What is working and what is not, side by side — the pair only means anything
   read against each other. */
.learned { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.learned-side {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; background: var(--surface);
}
.learned-side.is-against { background: var(--surface-2); }
.learned-list { list-style: none; margin: 8px 0 0; padding: 0; }
.learned-list li { padding: 8px 0; border-top: 1px solid var(--border); }
.learned-list li:first-child { border-top: 0; }
.learned-title { display: block; font-size: 14px; font-weight: 500; }
.learned-list .meta { display: block; margin-top: 2px; }
.path-line { margin: 18px 0 0; font-size: 13.5px; color: var(--muted); max-width: 74ch; }

/* -------------------------------------------------------------- identity */

.identities { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; margin-top: 20px; }
.identity { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; background: var(--surface); }
.identity-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.identity-head h2 { margin: 0; font-size: 17px; }
.identity-head .meta { margin: 3px 0 0; }

/* Both grounds, side by side: a mark that only works on one of them is half a
   mark, and the two lockups exist precisely because of that. */
.identity-stages { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.identity-stage {
  display: flex; align-items: center; gap: 12px; padding: 16px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); min-height: 92px;
}
.identity-stage svg { width: 48px; height: 48px; flex: 0 0 auto; }
.identity-stage-name { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }

/* Scoped, because an unscoped .swatch here collided with a 22px one left over
   from a component that no longer exists — the chip drew at 46px inside a 22px
   box and the names landed on top of whatever came next. */
.identity-palette { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.identity-palette .swatch { display: flex; flex-direction: column; gap: 3px; width: auto; height: auto; }
.identity-palette .swatch-chip { width: 46px; height: 30px; border-radius: 7px;
  border: 1px solid var(--border); display: block; }
.identity-palette .swatch-name { font-size: 12.5px; font-weight: 500; }

.identity-checks { margin-bottom: 14px; }
.identity-why { margin-bottom: 14px; }
.decision { padding: 10px 0; border-top: 1px solid var(--border); }
.decision-made { margin: 0 0 6px; font-size: 14px; font-weight: 500; }
.decision-ground { margin: 0 0 6px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.decision-ground .meta { display: block; margin-top: 2px; }
/* The one that is on the list because it is not supported. */
.decision-ground.is-contested { color: var(--danger); }
.decision-ground.is-contested .meta { color: var(--muted); }
.identity-files { margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.identity-files .picker-group-name, .identity-files .field-hint { flex: 1 0 100%; margin: 0; }

/* The proposed faces, set in themselves — a typeface chosen from a description
   is a typeface nobody has seen. The families are custom properties because
   they genuinely differ per option. */
.identity-type { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.type-specimen { margin: 0; overflow-wrap: anywhere; }
.type-specimen.is-display { font-family: var(--display-face), Georgia, serif; font-size: 26px; font-weight: 700; line-height: 1.2; }
.type-specimen.is-body { font-family: var(--body-face), system-ui, sans-serif; font-size: 14px; line-height: 1.5; margin-top: 6px; }
.identity-type .meta { margin-top: 8px; }

/* ------------------------------------------------------------------- seo */

.check-fix { margin: 6px 0 0; font-size: 13px; }
.check-fix strong { color: var(--fg); }
.snippet { margin-bottom: 10px; }
.snippet > summary {
  cursor: pointer; padding: 12px 15px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface-2);
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.snippet > summary::-webkit-details-marker { display: none; }
.snippet > summary::marker { content: ""; }
.snippet > summary::before { content: "▸"; color: var(--muted); font-size: 11px; }
.snippet[open] > summary::before { content: "▾"; }
.snippet-body { position: relative; margin-top: 8px; }
.snippet-body .btn { position: absolute; top: 10px; right: 10px; z-index: 1; }
.snippet-body pre {
  margin: 0; padding: 14px 16px; overflow-x: auto; font-size: 12.5px; line-height: 1.55;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
}

/* ------------------------------------------------------------ house style */

.house-style { margin-bottom: 18px; }
.house-shapes { list-style: none; margin: 14px 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.house-shapes li { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }
.house-shapes .title { margin: 0; font-weight: 500; }
.house-shapes .meta { margin: 3px 0 0; }

/* What the mark carries, directly under the artwork — it is what the mark is
   judged against, and useless anywhere else on the card. */
.identity-means { margin: 0 0 14px; padding: 12px 14px; background: var(--surface-2);
  border-radius: var(--radius-sm); border: 1px solid var(--border); }
.identity-means p:last-child { margin: 4px 0 0; font-size: 14px; line-height: 1.5; }
.identity-craft { margin-bottom: 14px; }
.identity-craft > summary { cursor: pointer; display: flex; align-items: baseline; gap: 10px;
  font-size: 13px; padding: 6px 0; }
.identity-craft > summary::-webkit-details-marker { display: none; }
.identity-craft > summary::marker { content: ""; }
.identity-craft > summary::before { content: "▸"; color: var(--muted); font-size: 10px; }
.identity-craft[open] > summary::before { content: "▾"; }

/* The brief governs both options, so it reads as one statement above them
   rather than as a card competing with the two. */
.identity-brief { margin-bottom: 18px; }
.identity-subject { margin: 4px 0 0; font-size: 18px; line-height: 1.4; font-weight: 500; }
.identity-because { margin: 8px 0 0; line-height: 1.55; color: var(--muted); }
.identity-derived { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.identity-facts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.identity-facts li { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 10px;
  font-size: 13px; line-height: 1.5; align-items: baseline; }
.fact-label { color: var(--muted); }
.fact-text { color: var(--fg); }
.identity-rejected { margin-top: 12px; }
.identity-rejected > summary { cursor: pointer; display: flex; align-items: baseline; gap: 10px;
  font-size: 13px; padding: 6px 0; }
.identity-rejected > summary::marker { content: ""; }
.identity-rejected > summary::-webkit-details-marker { display: none; }
.identity-rejected > summary::before { content: "▸"; color: var(--muted); font-size: 10px; }
.identity-rejected[open] > summary::before { content: "▾"; }
.identity-rejected ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.identity-colour { margin: 0 0 14px; padding: 12px 14px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); }
.identity-colour > p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; }
.identity-colour .fact-label { margin-right: 4px; }
@media (max-width: 640px) {
  .identity-facts li { grid-template-columns: 1fr; gap: 2px; }
}

/* The identity a brand has, as opposed to the ones it was offered. First on
   the page, because somebody who has already chosen is here for the files. */
.identity-taken { margin-bottom: 18px; }
.identity-taken-head { margin-bottom: 14px; }
.identity-files { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.identity-file { display: flex; flex-direction: column; gap: 4px; }
.identity-file-art { display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px; min-height: 96px; }
.identity-file-art img { max-height: 60px; width: auto; }
.identity-file .btn { margin-top: 6px; align-self: flex-start; }
.identity-taken-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.identity-taken-foot .identity-palette { margin-bottom: 6px; }

/* The file a brand already has, beside the field that would replace it. */
.logo-current { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.logo-current-art { display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 10px; min-width: 60px; }
.logo-current-art img { max-height: 30px; width: auto; display: block; }
.checkline { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: 13px; }
.checkline input { margin: 0; }

.identity-taken-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.identity-taken-head > div:first-child { min-width: 0; }
.identity-reapply { flex: 0 0 auto; text-align: right; }
.identity-reapply .field-hint { margin: 5px 0 0; }
@media (max-width: 640px) {
  .identity-taken-head { flex-direction: column; }
  .identity-reapply { text-align: left; }
}

/* ---------------------------------------------------------- the chronology */
.chronology-add { margin-bottom: 20px; }
.chronology-add > summary { cursor: pointer; list-style: none; padding: 2px 0; }
.chronology-add > summary::-webkit-details-marker { display: none; }
.chronology-add > summary::marker { content: ""; }
.chronology-add > summary::before { content: "+ "; color: var(--muted); }
.chronology-add[open] > summary { margin-bottom: 16px; }
.chronology-kinds { display: grid; gap: 8px; }
.chronology-kind-choice { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; }
.chronology-kind-choice input { margin-top: 3px; }
.chronology-kind-choice strong { display: block; font-weight: 500; font-size: 13.5px; }
.chronology-kind-choice .field-hint { margin: 1px 0 0; }
.chronology-kind-choice input:disabled ~ span { opacity: .55; }
/* Hidden only when a kind that cannot name a start is chosen, so a browser
   without :has() leaves the field visible — degraded, not broken. */
.chronology-form:has(#kind_done:checked) .finishes,
.chronology-form:has(#kind_milestone:checked) .finishes,
.chronology-form:has(#kind_started:checked) .finishes { display: none; }

/* Before and after, on one line each. */
.impact-fields { border: 0; padding: 0; margin: 0 0 4px; }
.impact-fields legend { padding: 0; }
.impact-row { display: grid; grid-template-columns: 1fr 90px 12px 90px; gap: 6px; align-items: center; margin-bottom: 6px; }
.impact-row span { text-align: center; color: var(--muted); font-size: 12px; }
.impact-row input { margin: 0; }

/* The history itself. Rows are one line each until they are opened, because
   a timeline is read by scanning and a column of paragraphs cannot be
   scanned. */
.evo-tally { list-style: none; display: flex; flex-wrap: wrap; gap: 22px; margin: 0 0 16px; padding: 0; }
.evo-tally-item { display: flex; align-items: baseline; gap: 6px; }
.evo-tally-item strong { font-size: 21px; font-weight: 500; font-variant-numeric: tabular-nums; }
.evo-tally-item span { font-size: 12px; color: var(--muted); }
.evo-tally-item.is-running strong { color: var(--warning-ink); }
.evo-tally-item.is-finished strong { color: var(--ok); }
.evo-tally-item.is-milestones strong { color: var(--primary); }

.evo-running { margin-bottom: 18px; }
.evo-running ul { list-style: none; margin: 0; padding: 0; }
.evo-running li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 7px 0;
  border-top: 1px solid var(--border); font-size: 13.5px;
}
.evo-running li:first-of-type { border-top: 0; }
.evo-running-title { font-weight: 500; }
.evo-running-actions { margin-left: auto; display: flex; gap: 12px; }
.evo-running-actions form { display: inline; }
.evo-running-actions .linkish { font-size: 12.5px; }

/* One row, not five. Every control in this application is width:100%, which
   inside a flex row makes each one its own line — so the widths are set here
   rather than left to the base rule. */
.evo-filters {
  display: grid; gap: 8px; align-items: center; margin-bottom: 18px;
  grid-template-columns: minmax(160px, 1fr) repeat(3, minmax(110px, .7fr)) auto;
}
.evo-filters select, .evo-filters input[type=search], .evo-filters .btn {
  margin: 0; width: 100%; font-size: 13.5px; padding: 8px 12px;
}
.evo-filters select { padding-right: 30px; background-position: right 10px center; }
.evo-filter-do { display: flex; align-items: center; gap: 10px; }
.evo-filters .linkish { white-space: nowrap; font-size: 13px; }

.evo-day {
  margin: 22px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
.evo { list-style: none; margin: 0; padding: 0; }
.evo-row {
  display: grid; grid-template-columns: 10px 1fr auto; gap: 12px; align-items: start;
  padding: 9px 0 9px 14px; border-left: 2px solid var(--border);
}
/* The status, as a colour and as a shape, so it survives being printed in
   grey and being read by somebody who cannot tell green from yellow. */
.evo-dot {
  width: 9px; height: 9px; border-radius: 50%; margin: 5px 0 0 -19px;
  background: var(--border-strong); display: block;
}
.evo-dot.is-done { background: var(--ok-mark); }
.evo-dot.is-handed { background: var(--muted, #b8b3aa); }
.evo-dot.is-finished { background: var(--ok-mark); }
.evo-dot.is-started { background: var(--warning); }
.evo-dot.is-abandoned { background: var(--border-strong); }
.evo-dot.is-milestone { background: var(--primary); width: 11px; height: 11px; border-radius: 2px; transform: rotate(45deg); margin-left: -20px; }
.evo-row.is-observed .evo-dot { background: var(--bg); border: 2px solid var(--border-strong); }

.evo-body { min-width: 0; }
.evo-line { margin: 0; font-size: 14px; line-height: 1.4; }
.evo-title { font-weight: 500; }
.evo-row.is-abandoned .evo-title { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.evo-span { font-size: 12px; color: var(--muted); margin-left: 8px; white-space: nowrap; }
.evo-meta { margin: 2px 0 0; font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; }
.evo-meta > span + span::before { content: "· "; }
.evo-cat { color: var(--fg); }
.evo-source { font-size: 11.5px; color: var(--muted); white-space: nowrap; padding-top: 2px; }
/* Where an automatic entry points. Coloured, because it is the one thing on
   the row that does something. */
.evo-link { color: var(--primary); }

.evo-more { margin-top: 4px; }
.evo-more > summary {
  cursor: pointer; list-style: none; font-size: 12px; color: var(--muted);
  display: inline-block; padding: 1px 0;
}
.evo-more > summary::-webkit-details-marker { display: none; }
.evo-more > summary::marker { content: ""; }
.evo-more > summary::before { content: "▸ "; }
.evo-more[open] > summary::before { content: "▾ "; }
.evo-more .check-detail { margin: 5px 0 0; }
.evo-impact { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.evo-impact li { display: grid; grid-template-columns: 1fr auto; gap: 12px; font-size: 13px; }

.evo-edit { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.evo-edit .field { margin-bottom: 10px; }
.evo-remove { display: inline; margin-left: 10px; }
.evo-remove .linkish { font-size: 12px; }

@media (max-width: 720px) {
  .evo-filters { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .evo-row { grid-template-columns: 10px 1fr; }
  .evo-source { grid-column: 2; padding-top: 0; }
  .impact-row { grid-template-columns: 1fr; }
  .impact-row span { display: none; }
}

/* Importing a document, and what Claude made of it. */
.cl-import .field { margin-bottom: 14px; }
.cl-import-or {
  margin: 0 0 12px; font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); text-align: center;
}

.cl-proposal { margin-bottom: 26px; }
.cl-proposal-lead { max-width: 68ch; margin-bottom: 16px; }
.cl-p-list { padding: 12px 0; border-top: 1px solid var(--border); }
.cl-p-list:first-of-type { border-top: 0; padding-top: 0; }
.cl-p-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cl-p-head strong { font-size: 15px; }
.cl-p-into { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.cl-p-into label { font-size: 12px; color: var(--muted); margin: 0; }
.cl-p-into select { width: auto; min-width: 170px; font-size: 13px; padding: 6px 28px 6px 10px; }
.cl-p-purpose { margin: 4px 0 0 24px; font-size: 13px; color: var(--muted); }

.cl-p-section { margin: 10px 0 0 22px; }
.cl-p-section-name {
  font-size: 12px; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--muted);
}

.cl-p-items { list-style: none; margin: 4px 0 0 22px; padding: 0; }
.cl-p-items li { padding: 3px 0; }
.cl-p-keep { display: flex; align-items: baseline; gap: 8px; cursor: pointer; margin: 0; }
.cl-p-keep input { margin: 0; flex: none; align-self: center; accent-color: var(--primary); }
.cl-p-title { font-size: 13.5px; line-height: 1.45; }
.cl-p-note { margin: 1px 0 0 24px; font-size: 12.5px; color: var(--muted); }

/* Unticked reads as dropped rather than merely unchecked, and its lines go
   with it — the server ignores them, and the page should say so. */
.cl-p-list:has(> .cl-p-head .cl-p-keep input:not(:checked)) > *:not(.cl-p-head) { opacity: .35; }
.cl-p-list:has(> .cl-p-head .cl-p-keep input:not(:checked)) > .cl-p-head strong { color: var(--muted); text-decoration: line-through; }
.cl-p-section:has(> .cl-p-keep input:not(:checked)) .cl-p-items { opacity: .4; }
.cl-p-keep:has(input:not(:checked)) .cl-p-title { color: var(--muted); text-decoration: line-through; }

.cl-p-left-out { margin-top: 14px; }
.cl-p-left-out > summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.cl-p-left-out ul { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--muted); }
.cl-p-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; }

/* Connecting to Meta, explained where somebody is when they need it. */
.meta-guide { margin-bottom: 24px; }
.meta-guide > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.meta-guide[open] > summary { margin-bottom: 14px; }
.meta-steps { margin: 18px 0 0; padding-left: 20px; }
.meta-steps > li { margin-bottom: 22px; }
.meta-steps h3 { margin: 0 0 6px; font-size: 14px; }
.meta-steps p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; max-width: 68ch; }
.meta-scopes { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 5px; }
.meta-scopes li { display: grid; grid-template-columns: minmax(180px, auto) 1fr; gap: 12px; font-size: 13px; }
.meta-scopes code { font-size: 12.5px; }
.meta-troubles { margin: 8px 0 16px; padding-left: 20px; }
.meta-troubles li { margin-bottom: 8px; font-size: 14px; line-height: 1.55; max-width: 68ch; }

/* Queued to go out on its own, on the calendar. The clock face is the whole
   point: a row that says only a time is a row nobody can check. */
.cal-queued, .cal-timed {
  display: inline-block; font-size: 11px; color: var(--muted);
  white-space: nowrap; margin-right: 6px;
}
.cal-queued { color: var(--warning-ink); }

/* Two things you can do to a planned piece, side by side rather than stacked. */
.publication-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 0 0 auto; }
.publication-actions form { margin: 0; }
.meta-send .chronology-kind-choice { margin-bottom: 10px; }
.meta-send .field-hint { max-width: 62ch; }

/* -------------------------------------------------------------- checklists */
.checklists { display: grid; gap: 26px; margin-bottom: 24px; }

.cl { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px 14px; background: var(--bg); }
.cl.is-dragging, .cl-section.is-dragging, .cl-item.is-dragging { opacity: .4; }

.cl-head { display: flex; align-items: center; gap: 10px; }
.cl-head h2 { margin: 0; font-size: 17px; }
.cl-purpose { margin: 6px 0 0 22px; font-size: 13px; color: var(--muted); max-width: 68ch; }

.cl-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-bar { flex: 0 1 120px; height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; }
.cl-bar > span { display: block; height: 100%; background: var(--ok-mark); transition: width .18s; }
.cl-head-actions { margin-left: auto; display: flex; gap: 2px; }

/* The handle. Only it starts a drag, so the text in a line stays selectable.
   Drawn rather than typed: a braille or dotted-square glyph is a font away
   from being a blank space or a tofu box, and this one is six dots wherever
   it renders. */
.cl-grip {
  cursor: grab; flex: none; width: 8px; height: 14px; border-radius: 4px;
  align-self: center; color: var(--border-strong); user-select: none;
  background-image: radial-gradient(currentColor 42%, transparent 46%);
  background-size: 4px 4.5px; background-position: center; background-repeat: space;
}
.cl-grip:hover { color: var(--muted); }
.cl-grip:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; color: var(--muted); }

.cl-icon {
  background: none; border: 0; cursor: pointer; color: var(--muted);
  font-size: 13px; line-height: 1; padding: 4px 5px; border-radius: 6px;
}
.cl-icon:hover { background: var(--surface); color: var(--fg); }
.cl-pin-form { display: inline; margin: 0; }
.cl-pin[aria-pressed="true"] { color: var(--warning); }
/* A pinned list is at the top because somebody put it there, not because it
   happens to sort first. Said quietly, so a page of five does not shout. */
.cl.is-pinned { border-color: var(--border-strong); box-shadow: 0 1px 0 var(--border); }

.cl-sections { display: grid; gap: 4px; }
.cl-section { padding: 10px 0 4px; }
.cl-section-head { display: flex; align-items: center; gap: 9px; padding-left: 0; }
.cl-section-head h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }

.cl-items { list-style: none; margin: 4px 0 0; padding: 0; min-height: 8px; }
.cl-item {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: baseline;
  gap: 8px; padding: 5px 0; border-radius: 6px;
}
.cl-item:hover { background: var(--surface-2); }
.cl-item-lost { outline: 1px solid var(--danger); }

.cl-tick { display: flex; align-items: baseline; gap: 9px; cursor: pointer; min-width: 0; margin: 0; }
.cl-tick input { margin: 0; flex: none; accent-color: var(--ok); align-self: center; }
.cl-title { font-size: 14px; line-height: 1.45; }
.cl-item.is-done .cl-title { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.cl-when { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.cl-note { grid-column: 2 / -1; margin: 0; font-size: 12.5px; color: var(--muted); }

/* Adding a line: one field, no button. A to-do that costs two clicks a line
   stops being written down. */
.cl-add-item { margin: 4px 0 2px; }
.cl-add-item input {
  border: 0; border-bottom: 1px dashed var(--border-strong); border-radius: 0;
  padding: 5px 0 5px 26px; font-size: 13.5px; background: none;
}
.cl-add-item input:focus { border-bottom-color: var(--primary); box-shadow: none; outline: none; }

.cl-add { display: flex; gap: 8px; align-items: center; margin-top: 12px; max-width: 380px; }
.cl-add input { font-size: 13.5px; padding: 7px 11px; }
.cl-remove { margin-top: 14px; }
.cl-done-by { margin-top: 10px; }

/* What is done, out of sight. A section or a list with nothing left in it goes
   with its lines — a heading over nothing is not less noise than the lines
   were. The form for adding to a hidden section goes too, or the page offers
   somewhere to type that cannot be seen. */
.checklists.is-hiding-done .cl-item.is-done,
.checklists.is-hiding-done .cl-section.is-complete,
.checklists.is-hiding-done .cl.is-complete { display: none; }
.cl-done-toggle[aria-pressed="true"] { border-color: var(--primary); color: var(--primary); }

/* The page and the server disagree about the order. Better said than hidden. */
.reorder-lost { outline: 1px solid var(--danger); outline-offset: 6px; }
.reorder-lost::before {
  content: "That order was not saved — reload the page to see what is stored.";
  display: block; margin-bottom: 10px; font-size: 12.5px; color: var(--danger);
}

@media (max-width: 640px) {
  .cl-item { grid-template-columns: auto 1fr auto; }
  .cl-when { grid-column: 2; }
  .cl-bar { display: none; }
}

/* The whole post decided at once, above the six controls that lead to one. */
.whole-post { margin-bottom: 8px; }
.whole-post-brief { margin: 4px 0 8px; font-size: 17px; line-height: 1.45; font-weight: 500; }
.whole-post-choices { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 6px; }
.whole-post-choices li { display: grid; grid-template-columns: 90px 1fr; gap: 10px; font-size: 13.5px; }
.whole-post-actions { display: inline-block; margin-top: 6px; }
.whole-post-again { display: inline-block; margin-left: 8px; }
.whole-post-or {
  margin: 18px 0 12px; font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); text-align: center;
}

/* The choice between a template and a composition, in the composer. */
.composer-how { display: grid; gap: 8px; margin: 0 0 16px; }
.composer-how .field-label { margin: 0 0 2px; }

.identity-start .chronology-kinds { margin-top: 2px; }
.identity-adopt { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.identity-adopt .field-hint { margin: 6px 0 0; max-width: 62ch; }

.identity-adopt-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 8px; }
.identity-adopt-ways .field-hint { max-width: 46ch; }

/* .pill.warn already exists and is styled; this only gives it room. */
.brand-card-state { margin: 8px 0 0; }

/* A planned day with nothing made for it. Shown differently from one that is
   ready, because a week of empty slots looked like a full week. */
.cal-entry.is-unwritten { border-style: dashed; }
.cal-unwritten { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.cal-title-made { text-decoration: none; color: inherit; }
.cal-title-made:hover { text-decoration: underline; }

.whole-post-title { margin: 6px 0 2px; font-size: 15px; font-weight: 600; }

/* ------------------------------------------------------------- the methods */
.skill-family { margin-bottom: 34px; }
.skill-family .checks { margin-bottom: 12px; }
.skill-instruction { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--fg); }
.skill-instruction p { margin: 0 0 8px; }
.skill-examples { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.skill-example {
  display: inline-flex; width: 62px; height: 62px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden; align-items: center; justify-content: center;
}
.skill-example img { width: 100%; height: 100%; object-fit: cover; }
.skill-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex: 0 0 auto; }
.skill-actions form { display: inline; }
.skill-add { margin-top: 4px; }
.skill-add > summary { cursor: pointer; list-style: none; padding: 2px 0; font-size: 13.5px; }
.skill-add > summary::-webkit-details-marker { display: none; }
.skill-add > summary::marker { content: ""; }
.skill-add > summary::before { content: "+ "; color: var(--muted); }
.skill-add[open] > summary { margin-bottom: 14px; }

/* The week's unwritten days, gathered above the grid. */
.write-week { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 22px 0; }
.write-week .check-detail { margin: 4px 0 0; max-width: 62ch; }
.write-week .btn { flex: 0 0 auto; }
@media (max-width: 640px) { .write-week { flex-direction: column; align-items: flex-start; } }

/* The legal links, out of the way at the foot of every page. */
.site-foot { text-align: center; padding: 28px 16px 40px; font-size: 12.5px; color: var(--muted); }
.site-foot a { color: var(--muted); }

/* The topics board: rows to drag into order, each with its yes. */
.due-lines { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.due-line { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; }
.due-line.is-done { border-color: #12B76A; }
.due-slots { border-top: 0; margin-top: 6px; }
.gaps-line { margin: 0 0 22px; line-height: 1.7; }
.gap-day { display: inline-block; margin-right: 14px; }
.topics { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; }
.topic {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg);
}
.topic.is-dragging { opacity: .4; }
.topic-body { flex: 1 1 auto; min-width: 0; }
.topic-kind { margin: 0 0 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.topic-title { margin: 0; font-size: 15px; font-weight: 500; }
.topic-brief { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.topic-edit { margin-top: 8px; }
.topic-edit summary { font-size: 13px; color: var(--muted); cursor: pointer; }
.topic-edit form { margin-top: 10px; }
.topic-actions { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
@media (max-width: 720px) {
  .topic { flex-wrap: wrap; }
  .topic-actions { flex-direction: row; width: 100%; }
}

/* The shape picker: three cells for the three roles, in the ground each gets. */
.shape-strip { display: inline-flex; gap: 2px; margin-bottom: 4px; }
.shape-cell { width: 12px; height: 16px; border-radius: 2px; border: 1px solid var(--border-strong); }
.shape-cell.is-photo { background: linear-gradient(135deg, #7A8C99, #3E4A55); }
.shape-cell.is-brand { background: var(--primary); }
.shape-cell.is-paper { background: #FFFFFF; }

/* The piece from its day: pages to take to a phone, the words, the two buttons. */
.piece-standing { margin: 0 0 12px; }
.piece-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.piece-page { margin: 0; }
.piece-page img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--border); display: block; }
.piece-page figcaption { font-size: 12px; margin-top: 4px; }
.piece-undrawn { aspect-ratio: 3 / 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px dashed var(--border-strong); border-radius: 8px; font-size: 12.5px; color: var(--muted); text-align: center; padding: 8px; }
.piece-text { margin-top: 14px; }
.piece-text textarea { width: 100%; font-size: 13px; }
.piece-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.cal-accepted { font-size: 11px; color: var(--primary); }


/* The overview: today, and the window. */
.today-card h2 .habit-dot { width: 14px; height: 14px; margin-left: 8px; }
.ahead-line { margin: 14px 0 0; font-size: 14px; }
.history-strip { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 12px; }
.history-strip .habit-dot { margin: 0; width: 12px; height: 12px; }
.history-line { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; }


/* What arrived over the wire: the text as it came, read in place. */
.handover-text { white-space: pre-wrap; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; max-height: 70vh; overflow: auto; margin: 12px 0 0; }
.wire-call { margin: 10px 0 0; }
.wire-call pre { margin: 6px 0 0; padding: 10px 12px; background: var(--surface); border-radius: 8px; font-size: 12px; overflow-x: auto; }


/* Whether a piece written before the record moved still holds. */
.verdict { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.verdict strong { text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; }
.verdict.is-stands strong { color: #12B76A; }
.verdict.is-shaky strong { color: #F79009; }
.verdict.is-remake strong { color: #D92D20; }
.verdict .inline-form { display: inline; margin-left: 6px; }

/* Five readers' word on a piece: the word first, then a line per reader.
   The colour is the word's — Go, Fix first, Don't — and a review that is
   behind its drawing is dimmed rather than recoloured: it was true of a
   picture that is gone. */
.review { border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius); padding: 10px 14px; margin: 10px 0 14px; background: var(--surface-2); }
.review.is-go { border-left-color: #12B76A; }
.review.is-fix { border-left-color: #F79009; }
.review.is-stop { border-left-color: #D92D20; }
.review.is-behind { opacity: .72; }
.review-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.review-word { font-size: 15px; }
.review.is-go .review-word { color: #12B76A; }
.review.is-fix .review-word { color: #F79009; }
.review.is-stop .review-word { color: #D92D20; }
.review-readers { list-style: none; margin: 8px 0 0; padding: 0; }
.review-reader { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border); font-size: 13.5px; line-height: 1.45; }
.review-reader-word { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.review-reader.is-go .review-reader-word { color: #12B76A; }
.review-reader.is-fix .review-reader-word { color: #F79009; }
.review-reader.is-stop .review-reader-word { color: #D92D20; }
.review-reader.is-silent .review-reader-word { color: var(--muted); }
.review-fixes { margin: 4px 0 0; padding-left: 18px; }
.review-fixes li { margin: 2px 0; }
.review-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cal-review { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 999px; border: 1px solid currentColor; margin-left: 6px; }
.cal-review.is-go { color: #12B76A; }
.cal-review.is-fix { color: #F79009; }
.cal-review.is-stop { color: #D92D20; }
.cal-review.is-behind { opacity: .6; text-decoration: line-through; }
.anyway-form { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.anyway-form input.anyway { font-size: 12.5px; padding: 5px 8px; min-width: 220px; }
.accept-week { border-left-color: var(--primary); margin-bottom: 18px; }
/* The joins on a form: a short list of ticks, not a table. */
fieldset.joins { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px 10px; }
fieldset.joins legend { font-size: 12px; color: var(--muted); padding: 0 4px; }
fieldset.joins .join { display: inline-flex; align-items: center; gap: 6px; margin: 4px 12px 2px 0; font-size: 13.5px; }
.offer-joins { margin-top: 4px; }

/* ---- the landing on the offer's card, the leads, the objections ---- */
.offer-landing { margin: 14px 0 6px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 8px; }
.offer-landing .next-label { margin-bottom: 4px; }
.offer-landing-line { margin: 0 0 4px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.offer-landing-line .mono { font-size: 12px; color: var(--muted); }
.pill.is-live { background: var(--ok-mark); color: #fff; }
.leads { list-style: none; padding: 0; margin: 18px 0 32px; display: grid; gap: 12px; }
.lead { padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface, #fff); }
.lead.is-won { border-color: var(--ok-mark); }
.lead.is-lost { opacity: 0.75; }
.lead-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.lead-head .title { margin: 0 0 2px; display: flex; gap: 8px; align-items: center; }
.lead-message { margin: 10px 0 6px; white-space: pre-line; }
.objections .objection-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.objections .objection-actions select { max-width: 260px; }
.table.landings td .mono { font-size: 12px; }
.chips.idea-kinds { margin: 0 0 16px; }

/* ---- how to use Merlin ---- */
.how-to { max-width: 1100px; }
.how-to-milestones { list-style: none; padding: 0; margin: 18px 0 36px; display: flex; gap: 8px; flex-wrap: wrap; }
.how-to-milestone-link a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: inherit; font-size: 14px; }
.how-to-milestone-link.is-done a { border-color: var(--ok-mark); }
.how-to-milestone-link.is-open a { border-color: var(--primary); }
.how-to-mark { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface, #f2f2f2); font-size: 12px; }
.how-to-milestone-link.is-done .how-to-mark { background: var(--ok-mark); color: #fff; }
.how-to-milestone { margin: 0 0 48px; padding-top: 12px; border-top: 1px solid var(--line); }
.how-to-head h2 { margin: 4px 0 6px; }
.how-to-steps { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 28px; }
.how-to-step { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1.4fr); gap: 20px; align-items: start; }
.how-to-step h3 { margin: 0 0 8px; }
.how-to-step p { margin: 0 0 10px; }
.how-to-shot { margin: 0; }
.how-to-shot img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,0.06); }
.how-to-shot figcaption { margin-top: 6px; font-size: 12px; }
.how-to-missing { margin: 0; padding: 14px; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); font-size: 14px; }
@media (max-width: 800px) { .how-to-step { grid-template-columns: 1fr; } }
/* A page's picture shows its top — the part a person reads first — and opens
   whole on a click; a full-page capture of the calendar is taller than the
   guide's whole column. */
.how-to-shot > a { display: block; max-height: 560px; overflow: hidden; position: relative; border-radius: 8px; }
.how-to-shot > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(to bottom, rgba(255,255,255,0), var(--bg, #fff)); pointer-events: none; }
.how-to-shot img { display: block; }

/* ---------------------------------------------------------------- overview */

/* Every step of the path as a card: the strip is the summary, this is the
   long form. Done cards go quiet in the grid and fold to one line in the
   list, so what is left to settle reads first. */
.overview-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: -6px 0 18px; }
.overview-tools > .meta { margin: 0; }
.view-switch { display: flex; gap: 6px; }
.view-switch .inline-form { display: inline; }
.milestone { margin: 0 0 26px; }
.milestone.is-complete .left-head h2::after { content: "✓"; margin-left: 8px; color: var(--primary); font-size: 13px; }
.overview .step-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.overview.is-grid .step-cards { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.overview.is-list .step-cards { gap: 6px; }
.step-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: start; padding: 14px 16px; }
.step-card.is-done { opacity: .62; }
.step-card.is-done:hover, .step-card.is-done:focus-within { opacity: 1; }
.step-card.is-done .check-mark { background: var(--primary-soft); color: var(--primary); }
.step-card.is-warn { border-color: #F0DCC8; }
.step-card.is-warn .check-mark { background: #FDF0E6; color: #A85B18; }
.step-card.is-todo .check-mark, .step-card.is-unknown .check-mark { background: var(--surface); color: var(--muted); }
.step-card.is-unknown { border-style: dashed; }
.step-card-body { min-width: 0; display: grid; gap: 4px; }
.step-card-title { margin: 0; font-weight: 500; font-size: 14.5px; }
.step-card-title .pill { margin-left: 6px; vertical-align: 1px; }
.step-card-state { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.step-card-state strong { color: var(--fg); font-weight: 500; }
.step-card-why { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.step-card-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.step-card-actions .inline-form { display: inline; }
.overview.is-list .step-card { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; padding: 10px 14px; }
.overview.is-list .step-card-why { display: none; }
.overview.is-list .step-card-actions { grid-column: 3; justify-content: flex-end; }
.overview.is-list .step-card.is-done .step-card-state,
.overview.is-list .step-card.is-done .step-card-actions { display: none; }
@media (max-width: 720px) {
  .overview.is-list .step-card { grid-template-columns: auto minmax(0, 1fr); }
  .overview.is-list .step-card-actions { grid-column: 2; justify-content: flex-start; }
}

/* ------------------------------------------------------------------- today */

/* One day: the pieces on it carry where each stands as a class, and the dot
   says it in the three colours a person reads — waiting on a yes, the yes
   given, out — with red for trouble. The same words the Pieces page files by. */
.day-nav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.day-piece.is-unwritten .left-dot, .day-piece.is-making .left-dot, .day-piece.is-review .left-dot { background: var(--warning); }
.day-piece.is-accepted .left-dot { background: var(--primary); }
.day-piece.is-out .left-dot { background: var(--ok-mark); }
.day-piece.is-trouble .left-dot { background: var(--danger); }
.day-piece-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.day-piece-actions .inline-form, .day-piece-actions .dialog-holder { display: inline; }
.day-piece .verdict { margin-top: 6px; }
.day-night { margin-top: 14px; }

/* --------------------------------------------------------------- questions */

/* A question Claude asked: its dialog offers the answers as a column of
   choices, Other with a line to write in, and Not now beside the answer. */
.waiting-item.is-question { border-left: 3px solid var(--primary); }
.question-why { margin: 0 0 12px; }
.question-options { display: grid; gap: 8px; margin: 0 0 4px; }
.question-option { display: flex; align-items: center; gap: 9px; font-size: 14px; cursor: pointer; }
.question-option input { margin: 0; accent-color: var(--primary); }
.question-other { margin-left: 25px; }
.decided { margin: 26px 0 0; }
.decided > summary { cursor: pointer; list-style: none; }
.decided > summary::-webkit-details-marker { display: none; }
.decided > summary .left-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.decided > summary h2::before { content: "▸ "; color: var(--muted); font-size: 12px; }
.decided[open] > summary h2::before { content: "▾ "; }

/* ------------------------------------------------------------ idea carried */

/* An idea's reading: the reply, where it went, and its cards to take or
   refuse — the conversation's card rows, on the idea. */
.idea-carry { margin: 10px 0 4px; }
.idea-carry .inline-form { display: inline; }
.idea-reading { margin: 8px 0 0; padding: 10px 12px; border-left: 2px solid var(--primary-soft); }
.idea-reading-reply { margin: 0 0 4px; font-size: 13.5px; line-height: 1.5; }
.idea-cards { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.idea-cards .card-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; }
.idea-cards .card-row.is-settled .card-title { color: var(--muted); }
.topic-from { margin-top: 2px; }

/* --------------------------------------------------------------- the state */

/* One colour for where a piece stands, everywhere it is drawn: yellow
   waiting on a yes, blue the yes given, green out, red late, and trouble
   its own. Soft — a background and an ink, never a filled block — and the
   word always beside it. The day's dot keeps its own meaning. */
:root {
  --state-waiting-bg: #FFF6D6; --state-waiting-line: #F0DFA0; --state-waiting-ink: #7A5A00;
  --state-yes-bg: #E8F0FF; --state-yes-line: #C6D8F8; --state-yes-ink: #1E4EB8;
  --state-out-bg: #E6F6EC; --state-out-line: #BFE3CC; --state-out-ink: #1F6B3A;
  --state-late-bg: #FDECEA; --state-late-line: #F2C2BC; --state-late-ink: #A32D22;
  --state-trouble-bg: #F3EAF7; --state-trouble-line: #DCC6E6; --state-trouble-ink: #6B2D7A;
}
.state.is-waiting { background: var(--state-waiting-bg); border-color: var(--state-waiting-line); }
.state.is-yes { background: var(--state-yes-bg); border-color: var(--state-yes-line); }
.state.is-out { background: var(--state-out-bg); border-color: var(--state-out-line); }
.state.is-late { background: var(--state-late-bg); border-color: var(--state-late-line); }
.state.is-trouble { background: var(--state-trouble-bg); border-color: var(--state-trouble-line); }
.state-word {
  display: inline-block; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  padding: 1px 6px; border-radius: 999px; border: 1px solid transparent; vertical-align: 1px;
}
.state-word.is-waiting { color: var(--state-waiting-ink); background: var(--state-waiting-bg); border-color: var(--state-waiting-line); }
.state-word.is-yes { color: var(--state-yes-ink); background: var(--state-yes-bg); border-color: var(--state-yes-line); }
.state-word.is-out { color: var(--state-out-ink); background: var(--state-out-bg); border-color: var(--state-out-line); }
.state-word.is-late { color: var(--state-late-ink); background: var(--state-late-bg); border-color: var(--state-late-line); }
.state-word.is-trouble { color: var(--state-trouble-ink); background: var(--state-trouble-bg); border-color: var(--state-trouble-line); }
/* The dot on a row takes the state's ink. */
.left-item.state .left-dot { background: currentColor; }
.left-item.state.is-waiting { color: var(--state-waiting-ink); }
.left-item.state.is-yes { color: var(--state-yes-ink); }
.left-item.state.is-out { color: var(--state-out-ink); }
.left-item.state.is-late { color: var(--state-late-ink); }
.left-item.state.is-trouble { color: var(--state-trouble-ink); }
.left-item.state .left-label, .left-item.state .meta { color: var(--fg); }
.left-item.state .meta { color: var(--muted); }

/* ---------------------------------------------------------------- the week */

/* Seven days with room in each: the open slots, then every piece in the
   colour of where it stands, each a link to its day. */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin: 0 0 24px; }
.week-day {
  border: 1px solid var(--border); border-radius: 9px; padding: 8px 9px 10px; min-height: 130px;
  background: var(--bg); display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.week-day.is-past { background: var(--surface-2); }
.week-day.is-today { outline: 2px solid var(--primary); outline-offset: -1px; }
.week-date { margin: 0; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.week-date a { color: inherit; font-weight: 600; text-decoration: none; }
.week-date a:hover { text-decoration: underline; }
.week-piece {
  display: block; border: 1px solid var(--border); border-radius: 7px; padding: 6px 7px;
  font-size: 12px; line-height: 1.35; color: inherit; text-decoration: none; overflow-wrap: anywhere;
}
.week-piece:hover { filter: brightness(.98); }
.week-piece-title { display: block; font-weight: 500; margin-top: 3px; }
.week-nothing { margin: auto 0 0; font-size: 12px; }
@media (max-width: 900px) {
  .week { grid-template-columns: 1fr; }
  .week-day { min-height: 0; }
}

/* ------------------------------------------------- the essential surface */
/* The sidebar's foot: everything else, one page away. */
.more-link { display: block; margin: 14px 10px 0; font-size: 12.5px; color: var(--muted); text-decoration: none; }
.more-link:hover, .more-link.on { color: var(--primary); text-decoration: none; }
.more-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.more-group h2 { margin: 0 0 2px; font-size: 15px; }
.more-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.more-list li { display: flex; flex-direction: column; gap: 1px; }
.more-item { font-weight: 500; }
/* The meters in the account menu, where the bar used to carry them. */
.account-meters .usage-pill, .account-meters .xp-pill {
  display: block; border: 0; border-radius: var(--radius-sm); margin: 0; padding: 8px 12px; font-size: 13.5px; color: var(--fg);
}
.account-meters .usage-pill.is-low { color: var(--warning-ink); }
.account-meters .usage-pill.is-out { color: var(--danger); }
/* What is settled folds into one line per milestone. */
.settled-fold { margin: 6px 0 0; }
.settled-fold > summary { cursor: pointer; font-size: 12.5px; color: var(--muted); padding: 4px 0; list-style: none; }
.settled-fold > summary::-webkit-details-marker { display: none; }
.settled-fold > summary::before { content: "› "; }
.settled-fold[open] > summary::before { content: "⌄ "; }
.settled-fold > summary:hover { color: var(--fg); }
.step-cards.is-settled .step-card { opacity: .82; }
/* A block folded shut until it is wanted. */
details.fold > summary { cursor: pointer; font-size: 14px; font-weight: 500; padding: 6px 0; list-style: none; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "› "; color: var(--muted); }
details.fold[open] > summary::before { content: "⌄ "; }
details.fold > summary .meta { font-weight: 400; margin-left: 6px; }

/* A plan file as cards: the frame in the real aspect ratio, the title in
   the brand's type, a strip for a carousel, a marked frame for a video. */
.plan-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.plan-card-item { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.plan-card-item.is-extra { opacity: .8; }
.plan-frame-link { display: block; color: inherit; text-decoration: none; }
.plan-frame { background: var(--bg); display: grid; }
.plan-frame.is-strip { grid-auto-flow: column; grid-auto-columns: 70%; overflow-x: auto; gap: 6px; padding: 6px; scroll-snap-type: x mandatory; }
.plan-page { position: relative; width: 100%; height: 0; background: linear-gradient(160deg, var(--bg) 0%, color-mix(in srgb, var(--primary) 55%, var(--bg)) 100%); border-radius: 6px; scroll-snap-align: start; }
.plan-page-inner { position: absolute; inset: 0; padding: 12% 10%; display: flex; flex-direction: column; justify-content: flex-end; color: var(--fg); }
.plan-title { font-family: var(--brand-font, inherit); font-weight: 700; font-size: clamp(14px, 1.6vw, 22px); line-height: 1.15; margin: 0; }
.plan-sub { font-size: 12px; opacity: .8; margin: 6px 0 0; }
.plan-card-item.is-video .plan-page { box-shadow: inset 0 0 0 6px #111, inset 0 0 0 8px #fff; }
.plan-card-item.is-video .plan-page::before, .plan-card-item.is-video .plan-page::after { content: ""; position: absolute; left: 0; right: 0; height: 6px; background: repeating-linear-gradient(90deg, #fff 0 8px, #111 8px 16px); }
.plan-card-item.is-video .plan-page::before { top: 0; } .plan-card-item.is-video .plan-page::after { bottom: 0; }
.plan-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.85); color: #111; display: grid; place-items: center; font-size: 18px; }
.plan-card-body { padding: 10px 12px 12px; }
.plan-card-title { margin: 4px 0 6px; font-weight: 600; }
.plan-card-title a { color: inherit; text-decoration: none; }
.plan-scenes { margin: 6px 0; padding-left: 18px; font-size: 13px; }
.plan-preview { font-size: 11.5px; }
.plan-card-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.plan-list tr.is-extra td { opacity: .75; }
.plan-pages { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.plan-pictures { display: flex; gap: 10px; flex-wrap: wrap; }
.plan-picture { margin: 0; width: 160px; }
.plan-picture img { width: 100%; height: auto; border-radius: 6px; border: 2px solid transparent; }
.plan-picture.is-kept img { border-color: var(--primary); }

/* ------------------------------------------------------------- home: the thread */

/* Home reads as a conversation: the input first, then Merlin's messages and
   yours by day. Merlin's sit left on the page's surface; yours sit right on
   the primary tint, as a chat draws them — so which side said a thing is
   read before a word of it. A day is a fold, not a list: the browser's own
   marker and bullet were the two things that made it read as a dump. */
/* One line, on every page, above the page's own head: a bar to say a
   thing in, not a box that pushes the title down. It grows as you type
   (the grow controller) and the press sits beside it. */
.home-say { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 22px; flex-wrap: wrap; }
.home-say-box { flex: 1 1 360px; min-height: 44px; resize: none; font: inherit; padding: 11px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.home-say-box:focus { border-color: var(--primary); outline: none; background: var(--bg); }
.home-say-box:disabled { color: var(--muted); background: var(--surface-2); }
.home-say-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; min-height: 44px; }
.say-reply { margin: -8px 0 22px; }
.turn-failed { margin: 16px 0 0; }
.home-waiting .left-head { margin-top: 28px; }
.home-quiet { margin: 28px 0 0; }
.home-days { margin-top: 12px; }
.home-day { border-top: 1px solid var(--border); padding: 4px 0 8px; }
.home-day > summary { list-style: none; cursor: pointer; }
.home-day > summary::-webkit-details-marker { display: none; }
.home-day > summary .left-head { margin: 24px 0 8px; justify-content: flex-start; }
.home-day > summary .left-head .meta { margin-left: auto; }
.home-day > summary .left-head::before { content: "›"; color: var(--muted); margin-right: 8px; font-weight: 500; }
.home-day[open] > summary .left-head::before { content: "⌄"; }
.home-messages { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.home-message { max-width: 720px; padding: 12px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.home-message.is-you { margin-left: auto; background: var(--primary-soft); border-color: transparent; border-bottom-right-radius: 4px; }
.home-message.is-merlin { border-bottom-left-radius: 4px; }
.home-message p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.55; }
.home-message p:last-child { margin-bottom: 0; }
.home-who { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.home-title { font-weight: 600; }
.home-message .card-row { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--border); flex-wrap: wrap; font-size: 13.5px; }
.home-message.is-you .card-row { border-top-color: rgba(0,0,0,.08); }

/* Brand: the record as five lines — mark, what, how it stands, the page
   it is corrected on — one press to hand Merlin what is open, the path
   folded under. */
.record-lines { list-style: none; margin: 24px 0 0; padding: 0; }
.record-line { display: grid; grid-template-columns: 22px 120px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border); }
.record-line:last-child { border-bottom: 1px solid var(--border); }
.record-line .check-mark { background: var(--surface); color: var(--muted); }
.record-line.is-set .check-mark { background: var(--primary-soft); color: var(--primary); }
.record-label { font-weight: 600; font-size: 14px; }
.record-value { font-size: 14.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-line.is-open .record-value { color: var(--muted); }
.record-hand { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 20px 0 8px; }
.record-hand .meta { flex: 1 1 320px; }
.path-fold { margin-top: 20px; }
@media (max-width: 720px) {
  .record-line { grid-template-columns: 22px 1fr; }
  .record-value, .record-line .btn { grid-column: 2; }
}

/* Plan, Publish, Results: the hands and the empty line, in one rhythm. */
.week-empty { margin: 8px 0 0; }
.week-hands { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 8px; }
.verdict-note { margin: 12px 0 0; font-size: 14.5px; line-height: 1.55; }
.overdue-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.day-piece-art { display: block; width: 96px; flex: 0 0 auto; }
.day-piece-art img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--border); display: block; }
.day-piece-state { text-transform: none; }
.day-piece-results { font-variant-numeric: tabular-nums; }
.how-fold, .record-fold, .reading-fold { margin-top: 20px; }

/* "Not this", with the why folded under it. The summary is drawn as the
   quiet button it replaced; open, one line and one press. */
.not-this { display: inline-block; }
.not-this > summary { list-style: none; cursor: pointer; display: inline-block; }
.not-this > summary::-webkit-details-marker { display: none; }
.not-this-form { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.not-this-why { min-width: 260px; font-size: 13.5px; padding: 6px 10px; }
/* The two presses on a customer's row, side by side under its words. */
.icp-tools { grid-column: 2; display: flex; gap: 8px; align-items: center; margin-top: 6px; }

/* What a reading proposed, on the page it is corrected on: rows with Keep. */
.proposed-rows { margin: 16px 0 22px; }
.proposed-head { margin: 0 0 8px; }
.proposed-list { list-style: none; margin: 0; padding: 0; }
.proposed-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--border); }
.proposed-body { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.proposed-title { font-weight: 500; font-size: 14.5px; }
.proposed-actions { display: flex; gap: 8px; align-items: center; }

/* One line and the hand: the by-hand forms of 20 Sep 2026. */
.one-line { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 16px 0 22px; }
.one-line-field { flex: 1 1 360px; min-height: 44px; font: inherit; padding: 11px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.one-line-field:focus { border-color: var(--primary); outline: none; background: var(--bg); }
.one-line select, .one-line input[type=date] { min-height: 44px; }
.composer-choices { margin: 10px 0 14px; }
.composer-choices[open] > summary { margin-bottom: 10px; }
.one-line .one-line-date { flex: 0 0 auto; width: auto; min-height: 44px; }

/* ------------------------------------------------------------- campaigns */

/* The design's list: thumbnail, name with the strategy under it, timing,
   a status pill read off the pieces. */
.page-actions { display: flex; gap: 8px; align-items: center; }
.connect-note { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.campaign-list td { vertical-align: middle; }
.campaign-cell { display: flex; align-items: center; gap: 12px; }
.campaign-thumb { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--surface); flex: 0 0 auto; }
.campaign-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.campaign-thumb-blank { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--surface), var(--primary-soft)); }
.campaign-name { display: flex; flex-direction: column; gap: 2px; }
.campaign-name a { font-weight: 600; color: inherit; text-decoration: none; }
.campaign-go a { color: var(--muted); text-decoration: none; font-size: 18px; }
.campaign-state.is-review { background: #FFF4D6; color: #7A5200; }
.campaign-state.is-generating, .campaign-state.is-ahead { background: var(--surface); color: var(--muted); }
.campaign-state.is-scheduled { background: var(--primary-soft); color: var(--primary); }
.campaign-state.is-live { background: #E3F5EA; color: #1B6B3A; }
.campaign-state.is-done { background: var(--surface); color: var(--fg); }
.pill.is-warn { background: #FFF4D6; color: #7A5200; }

/* The campaign's page: a hero band, the status bar, the detail rows, the
   posts as cards. */
.campaign-hero { position: relative; border-radius: var(--radius); overflow: hidden; background: #1a1d24; color: #fff; min-height: 180px; display: flex; align-items: flex-end; margin: 8px 0 14px; }
.campaign-hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.campaign-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.65)); }
.campaign-hero-text { z-index: 1; }
.campaign-hero-text { position: relative; padding: 24px; }
.campaign-hero-text .eyebrow, .campaign-hero-text .eyebrow a { color: rgba(255,255,255,.8); }
.campaign-hero-text h1 { margin: 4px 0 0; color: #fff; }
.campaign-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); margin-bottom: 8px; }
.campaign-section { margin-top: 8px; }
.campaign-section .left-head { margin-top: 26px; }
.campaign-details { margin: 0; display: grid; gap: 0; }
.campaign-details > div { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--border); }
.campaign-details dt { font-size: 13px; color: var(--muted); font-weight: 500; }
.campaign-details dd { margin: 0; font-size: 14.5px; line-height: 1.55; }
/* The post card: the design's single most reused component. A header strip,
   the artwork filling the body, the word floating over it — and no buttons,
   because the whole card opens the post, which is where the presses are. */
.post-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.post-card { border: 1px solid var(--border); border-radius: 12px; background: var(--bg); overflow: hidden; }
.post-card-link { display: flex; flex-direction: column; color: inherit; text-decoration: none; height: 100%; }
.post-card-link:hover { text-decoration: none; }
.post-card:hover { border-color: var(--border-strong); }
.post-card-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px; font-size: 12px; }
.post-card-kind { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
/* One glyph colour per kind, the same everywhere a kind is named. */
.post-card-glyph { width: 9px; height: 9px; border-radius: 2px; background: var(--muted); flex: 0 0 auto; }
.post-card-kind.is-story .post-card-glyph { background: #E0568C; }
.post-card-kind.is-post .post-card-glyph, .post-card-kind.is-facebook_post .post-card-glyph { background: #E4674A; }
.post-card-kind.is-carousel .post-card-glyph { background: #E08A2C; }
.post-card-kind.is-reel .post-card-glyph, .post-card-kind.is-tiktok .post-card-glyph, .post-card-kind.is-youtube .post-card-glyph { background: #3B7BD8; }
.post-card-kind.is-blog_post .post-card-glyph { background: #2F8B57; }
.post-card-kind.is-newsletter .post-card-glyph { background: #D9A400; }
.post-card-kind.is-linkedin_post .post-card-glyph, .post-card-kind.is-linkedin_document .post-card-glyph { background: #0A66C2; }
.post-card-art { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); display: grid; place-items: center; }
.post-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card-blank { font-size: 12px; color: var(--muted); }
/* The word sits on the artwork, not under it: on a wall of cards the state
   is what the eye is looking for. */
.post-card-word {
  position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; line-height: 1; padding: 6px 9px; border-radius: 6px;
  background: var(--state-waiting-bg); color: var(--state-waiting-ink); box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.post-card-word.is-yes { background: var(--state-yes-bg); color: var(--state-yes-ink); }
.post-card-word.is-out { background: var(--state-out-bg); color: var(--state-out-ink); }
.post-card-word.is-late { background: var(--state-late-bg); color: var(--state-late-ink); }
.post-card-word.is-trouble { background: var(--state-trouble-bg); color: var(--state-trouble-ink); }
.post-card-flag { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--warning); color: #1B1B1F; font-size: 10px; font-weight: 700; }
.post-card-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 2px; }
.post-card-title { font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 720px) { .campaign-details > div { grid-template-columns: 1fr; gap: 4px; } }

/* --------------------------------------------- the design's nine pages */

.ring-count { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--primary-soft); color: var(--primary); font-weight: 600; font-size: 12.5px; }
.integrations-group { margin-top: 22px; }
.integrations-group h2 { font-size: 14px; color: var(--muted); font-weight: 600; margin: 0 0 6px; }
.integrations { list-style: decimal; margin: 0; padding-left: 26px; }
.integration { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.integration-name { font-weight: 600; min-width: 140px; }
.integration-unlocks { flex: 1 1 200px; }
.integration-do { display: flex; gap: 8px; align-items: center; margin-left: auto; text-align: right; }
.pill.is-on { background: #E3F5EA; color: #1B6B3A; }

.kit { display: grid; grid-template-columns: 200px 1fr; gap: 34px; margin-top: 8px; }
.kit-tabs { display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--border); }
.kit-tab { display: flex; align-items: center; min-height: 38px; padding: 8px 14px; color: var(--muted); text-decoration: none; font-size: 13.5px; margin-left: -2px; border-left: 2px solid transparent; }
.kit-tab.on { color: var(--fg); border-left-color: var(--primary); font-weight: 500; }
.kit-tab:hover { color: var(--fg); text-decoration: none; }
.kit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.kit-card h3 { margin: 0; font-size: 14px; }
.kit-logo { display: grid; place-items: center; min-height: 120px; background: var(--surface); border-radius: 10px; padding: 12px; }
.kit-logo img { max-height: 96px; max-width: 100%; }
.kit-font-sample { font-size: 34px; margin: 6px 0 2px; }
.kit-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.kit-swatch { width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--border); }
.media-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.media-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; }
.media-tile .meta { margin: 4px 0 0; font-size: 12px; }
.kit-empty { text-align: center; padding: 48px 20px; }
@media (max-width: 720px) { .kit { grid-template-columns: 1fr; } .kit-tabs { flex-direction: row; flex-wrap: wrap; border-left: 0; } }

.prefs-section { margin-top: 26px; }
.prefs-section h2 { font-size: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.prefs-toggle { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; }
.prefs-toggle > span:last-child { display: flex; flex-direction: column; }
.prefs-fixed { font-size: 12px; font-weight: 600; color: var(--muted); padding: 2px 6px; border: 1px solid var(--border); border-radius: 6px; }

.insight { margin-top: 8px; }
.insight-figures { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; flex-wrap: wrap; }
.insight-figures li { display: flex; flex-direction: column; }
.insight-figures strong { font-size: 24px; }
.insight-figures span { font-size: 12.5px; color: var(--muted); }
.insight-connect { text-align: center; padding: 28px; border: 1px dashed var(--border); border-radius: 12px; }
.approvals-group { margin-top: 8px; }
.approvals-group-do { display: flex; gap: 10px; align-items: center; }

/* Home as the design draws it: the main column and the side column. */
.home-head { margin-bottom: 6px; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.home-side { position: sticky; top: 84px; }
.home-side .left-head { margin-top: 26px; }
.home-side .waiting-item { padding: 10px 0; }
.home-side .waiting-body { flex: 1 1 160px; }
.home-figures { display: grid; gap: 10px; }
.home-figure { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; }
.home-figure strong { font-size: 26px; }
.home-figure span { font-size: 12.5px; color: var(--muted); }
.home-figure.is-quiet { background: var(--surface-2); }
.home-upcoming .post-cards { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
@media (max-width: 960px) { .home-grid { grid-template-columns: 1fr; } .home-side { position: static; } }

/* --------------------------------------------------------- a post's page */

.post-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 8px 0 18px; }
.post-head-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.post-head-title h1 { margin: 0; font-size: 20px; }
.post-head-do { display: flex; gap: 8px; align-items: center; }
.post-word.is-go { background: #E3F5EA; color: #1B6B3A; }
.post-word.is-fix { background: #FFF4D6; color: #7A5200; }
.post-word.is-dont { background: #FDE7E7; color: #9B1C1C; }
.post-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr) 240px; gap: 28px; align-items: start; }
.post-h2 { font-size: 14px; margin: 0 0 8px; }
.post-suggestions { margin: 0 0 22px; padding-left: 20px; font-size: 13.5px; line-height: 1.5; }
.post-suggestions li { margin-bottom: 8px; }
.post-preview { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.post-preview-head { margin: 0; display: flex; gap: 10px; align-items: center; }
.phone-frame { width: min(360px, 100%); border: 1px solid var(--border); border-radius: 22px; padding: 14px; background: var(--bg); box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.phone-page { width: 100%; height: auto; display: block; border-radius: 8px; margin-bottom: 8px; }
.phone-caption { font-size: 13px; line-height: 1.5; margin: 6px 0 0; }
.post-right h3 { font-size: 12.5px; color: var(--muted); font-weight: 600; margin: 18px 0 6px; text-transform: none; }
.post-right h3:first-child { margin-top: 0; }
.post-accounts, .post-quick { list-style: none; margin: 0; padding: 0; }
.post-quick li { display: flex; flex-direction: column; padding: 8px 0; border-top: 1px solid var(--border); }
.post-quick .linkish { padding: 0; font: inherit; color: var(--primary); background: none; border: 0; text-align: left; cursor: pointer; }
@media (max-width: 960px) { .post-grid { grid-template-columns: 1fr; } }

/* The calendar's cell as a card: the preview on top, the presses folded. */
.cal-art { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; margin-bottom: 6px; background: var(--surface); }
.cal-more { margin-top: 6px; }
.cal-more > summary { list-style: none; cursor: pointer; font-size: 12px; color: var(--muted); }
.cal-more > summary::-webkit-details-marker { display: none; }
.cal-more > summary::before { content: "› "; }
.cal-more[open] > summary::before { content: "⌄ "; }

/* ------------------------------------------------------------ the setup */

.setup { max-width: 980px; margin: 0 auto; }
.setup-stepper { display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); margin: 8px 0 34px; }
.setup-step { color: var(--muted); text-decoration: none; }
.setup-step.on { color: var(--fg); font-weight: 600; }
.setup-step-sep { color: var(--border-strong); }
.setup-body { min-height: 420px; }
.setup-center { text-align: center; max-width: 620px; margin: 60px auto 0; }
.setup-narrow { max-width: 640px; margin: 0 auto; }
.setup-two { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; align-items: start; }
.setup-aside { border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; font-size: 13.5px; }
.setup-aside h3 { font-size: 13px; margin: 12px 0 4px; }
.setup-aside h3:first-child { margin-top: 0; }
.setup-checks { list-style: none; padding: 0; margin: 0; }
.setup-checks li::before { content: "✓ "; color: #1B6B3A; }
.setup-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--border); }
.setup-hero { text-align: center; margin: 48px 0 24px; }
.setup-panel { background: var(--surface-2); border-radius: 12px; padding: 14px 16px; margin: 0 0 18px; }
.setup-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 8px; }
.setup-choice { display: flex; gap: 10px; align-items: flex-start; padding: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.setup-choice:has(input:checked) { border-color: var(--fg); }
.setup-choice > span { display: flex; flex-direction: column; gap: 2px; }
.setup-logo img { max-height: 120px; }
.setup-progress { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; text-align: left; margin-top: 28px; }
.setup-site-mock, .setup-profile-mock { border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: var(--bg); min-height: 120px; }
.setup-site-bar { display: block; font-size: 11px; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; margin-bottom: 8px; }
.setup-site-block { display: block; height: 44px; background: var(--surface); border-radius: 6px; margin-bottom: 6px; }
.setup-site-line { display: block; height: 8px; background: var(--surface); border-radius: 4px; margin-bottom: 5px; }
.setup-site-line.short { width: 60%; }
.setup-arrow { font-size: 24px; color: var(--muted); }
.setup-profile-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--primary-soft); vertical-align: middle; }
.setup-strategy { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--border); border-radius: 12px; margin: 10px 0; cursor: pointer; }
.setup-strategy.is-recommended { background: linear-gradient(135deg, #2b2320, #7a3b0a); color: #fff; border-color: transparent; }
.setup-strategy.is-recommended .meta { color: rgba(255,255,255,.75); }
.setup-strategy:has(input:checked) { outline: 2px solid var(--fg); }
.setup-strategy-body { display: flex; flex-direction: column; gap: 4px; }
.setup-chips { margin: 6px 0 14px; }
.setup-chip { cursor: pointer; }
.setup-chip input { margin-right: 4px; }
.setup-days { margin-top: 8px; }
.mix-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.mix-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.mix-art { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 8px; background: linear-gradient(135deg, var(--surface), var(--primary-soft)); font-size: 28px; font-weight: 700; color: var(--primary); }
.mix-count { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.mix-count input { width: 64px; }
.mix-total strong { font-size: 30px; }
.setup-topics, .setup-campaigns { list-style: none; margin: 0; padding: 0; }
.setup-topic { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--border); }
.setup-topic-art { width: 72px; height: 72px; border-radius: 8px; overflow: hidden; background: var(--surface); flex: 0 0 auto; display: grid; place-items: center; text-align: center; font-size: 11px; }
.setup-topic-art img { width: 100%; height: 100%; object-fit: cover; }
.setup-topic-body { display: flex; flex-direction: column; gap: 2px; }
.setup-campaign { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; }
.setup-campaign-body { display: flex; flex-direction: column; gap: 6px; }
.setup-campaign-body p { margin: 0; font-size: 13.5px; }
.setup-sources { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 12px; }
.setup-sources .card { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 760px) { .setup-two { grid-template-columns: 1fr; } .setup-progress { grid-template-columns: 1fr; } .setup-campaign { grid-template-columns: 1fr; } }

/* The style, typeface and photo screens. */
.setup-split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 36px; align-items: start; }
.style-card { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--border); border-radius: 12px; margin: 8px 0; cursor: pointer; }
.style-card.on { border-color: var(--fg); }
.style-card input { position: absolute; opacity: 0; }
.style-thumb { width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: var(--surface); display: block; }
.style-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.style-thumb-blank { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #d9c2a5, #4a6b8a); }
.style-body { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.style-preview { position: sticky; top: 84px; }
.style-preview-head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; }
.style-preview-pair { position: relative; border-radius: 14px; overflow: hidden; }
.style-preview-pair img { width: 100%; display: block; }
.style-after { clip-path: inset(0 0 0 50%); position: absolute; inset: 0; }
.style-preview-pair::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; }
.style-before { width: 100%; border-radius: 14px; display: block; }
.style-preview-empty { border: 1px dashed var(--border); border-radius: 14px; padding: 40px 20px; text-align: center; }
.setup-center-h { text-align: center; }
.type-cards { display: grid; gap: 12px; max-width: 360px; margin: 18px auto; }
.type-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); cursor: pointer; }
.type-card.on { border-color: var(--fg); background: var(--bg); }
.type-card input { position: absolute; opacity: 0; }
.type-sample { font-size: 30px; font-weight: 700; }
.type-preview { display: flex; justify-content: center; }
.phone-frame.is-dark { background: #111; color: #fff; }
.phone-frame.is-dark .meta { color: rgba(255,255,255,.6); }
.type-post { aspect-ratio: 4 / 5; border-radius: 10px; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; gap: 6px; }
.type-post-head { font-size: 22px; font-weight: 700; line-height: 1.15; }
.type-post-sub { font-size: 13px; opacity: .85; }
.level-card { margin: 8px 0; }
@media (max-width: 860px) { .setup-split { grid-template-columns: 1fr; } .style-preview { position: static; } }

/* Integrations: the mark, next up, the platform line. Insights: the read line and the best pieces. */
.integration-mark { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--muted); flex: 0 0 auto; }
.integration-mark.is-instagram { background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF); }
.integration-mark.is-facebook { background: #1877F2; }
.integration-mark.is-linkedin { background: #0A66C2; }
/* The class is built from the row's key, and the key is "twitter" — this
   rule was written as .is-x and had never once applied, so X was drawn in
   the fallback grey. Both are kept: the key may yet become "x". */
.integration-mark.is-x, .integration-mark.is-twitter { background: #111; }
.integration-mark.is-youtube { background: #FF0000; }
.integration-mark.is-analytics { background: #E37400; }
.integration-mark.is-tiktok { background: #010101; }
.integration-mark.is-threads { background: #000; }
.integration-mark.is-pinterest { background: #E60023; }
.integration-mark.is-blog { background: #6B7280; }
.integration-mark.is-email { background: #6B7280; }
.integration.is-next-up .integration-name { color: var(--fg); }
.integration-next { font-size: 12.5px; }
.integration-switch { margin: 0; }
details.fold.integration-switch > summary { list-style: none; padding: 6px 12px; }
details.fold.integration-switch > summary::before { content: none; }
.integration-platform { display: flex; gap: 6px; margin-top: 8px; }
.integration-platform input { min-width: 260px; }
.insight-read { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; }
.insight-best { list-style: decimal; margin: 10px 0 0; padding-left: 22px; }
.insight-best li { padding: 5px 0; display: flex; flex-direction: column; }
.insight-best-title { font-weight: 600; }

/* Refine with AI: the dialog's form and the section on Home. */
.refine-form { display: grid; gap: 6px; min-width: min(520px, 90vw); }
.refine-form .field-label { margin-top: 8px; }
.refine-form .dialog-actions { margin: 14px 0 0; text-align: right; }
.home-refine { border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; margin-bottom: 22px; background: var(--surface-2); }
.refine-cards .card-row.is-replace { background: #FFF9EC; border-radius: 8px; padding: 6px 8px; }
.refine-cards .card-title .meta { display: block; font-size: 12px; }

/* A post in many campaigns: the chips on the post page, the shortfall, Create new. */
.post-campaigns { list-style: none; margin: 0 0 8px; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.post-campaign { display: inline-flex; gap: 4px; align-items: center; }
.post-campaign-x { font-size: 14px; line-height: 1; padding: 0 2px; }
.post-add-campaign { display: flex; gap: 6px; }
.post-card-campaigns { font-size: 11.5px; margin: -4px 0 6px; }
.campaign-short { margin-left: 6px; }
.create-new { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.create-new-item { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; }
.create-new-item.is-on { border-color: var(--fg); }
.create-new-item.is-off { opacity: .7; }
.create-new-item a { display: flex; flex-direction: column; gap: 3px; color: inherit; text-decoration: none; }

/* A post you bring: the form, and the Unplaced drawer on Calendar and Campaigns. */
.bring-form { display: grid; gap: 6px; min-width: min(520px, 90vw); }
.bring-form .field-label { margin-top: 8px; }
.bring-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.bring-row label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.bring-campaigns { display: flex; gap: 6px; flex-wrap: wrap; }
.bring-campaigns .chip, .unplaced-place .chip { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.bring-form .dialog-actions { margin: 14px 0 0; text-align: right; }
.unplaced { border: 1px dashed var(--border); border-radius: 14px; padding: 14px 18px; margin: 0 0 22px; background: var(--surface-2); }
.unplaced-list { list-style: none; margin: 0; padding: 0; }
.unplaced-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.unplaced-thumb { width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: var(--surface); }
.unplaced-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.unplaced-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.unplaced-caption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unplaced-place { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) { .unplaced-item { grid-template-columns: 64px 1fr; } .unplaced-place { grid-column: 1 / -1; justify-content: flex-start; } .bring-row { grid-template-columns: 1fr; } }

/* Merlin's line inside the page's strip: the same sentence, at the strip's
   size, with the dot the chip has. */
.page-bar .merlin-line { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.page-bar .merlin-line.is-stopped, .page-bar .merlin-line.is-unready { color: var(--danger); }
.page-bar .merlin-line .merlin-dot { background: var(--border-strong); }
.page-bar .merlin-line.is-stopped .merlin-dot, .page-bar .merlin-line.is-unready .merlin-dot { background: var(--danger); }
.page-bar .merlin-line.is-waiting .merlin-dot { background: var(--warning); }

/* A section's own presses, in its heading rather than the page's strip. */
.left-head .head-actions { display: flex; gap: 6px; margin-left: auto; }
/* Merlin's log: folded, because Home is the three sections the design has. */
.home-log { margin-top: 26px; border-top: 1px solid var(--border); padding-top: 10px; }
.home-log > summary { cursor: pointer; list-style: none; }
.home-log > summary::-webkit-details-marker { display: none; }
.home-log > summary .left-head { margin: 0; }
.home-log > summary h2::after { content: " ›"; color: var(--muted); font-weight: 400; }
.home-log[open] > summary h2::after { content: " ⌄"; }

/* The keys panel: what each one is for, whether it is set, and one field. */
.admin-keys { margin-bottom: 26px; }
.keys-table td { vertical-align: top; padding: 12px 10px; }
.keys-what { max-width: 40ch; }
.keys-what strong, .keys-what .meta { display: block; }
.keys-what code { font-size: 11.5px; }
.keys-state .meta { display: block; margin-top: 4px; }
.keys-form { display: flex; gap: 6px; }
.keys-field { min-width: 260px; font-family: var(--mono); font-size: 12px; }
.keys-do { text-align: right; }

/* The selection idiom, one for every choice in the app: what is chosen is
   white with a near-black edge and a filled check; what is not is grey with
   an empty ring. The design uses it for the business kind, the strategy,
   the styles, the typefaces, the photo levels and the channels, and a page
   that invented its own would read as another product. */
.setup-choice, .style-card, .type-card, .level-card, .pick-chip {
  position: relative; background: var(--surface-2); border: 1px solid transparent;
}
.setup-choice::after, .style-card::after, .level-card::after, .pick-chip::after {
  content: ""; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--bg);
}
.type-card::after {
  content: ""; position: absolute; left: 12px; top: 12px;
  width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--bg);
}
.setup-choice:has(input:checked), .style-card:has(input:checked), .type-card:has(input:checked),
.level-card:has(input:checked), .pick-chip:has(input:checked) {
  background: var(--bg); border-color: var(--fg);
}
.setup-choice:has(input:checked)::after, .style-card:has(input:checked)::after, .type-card:has(input:checked)::after,
.level-card:has(input:checked)::after, .pick-chip:has(input:checked)::after {
  background: var(--fg); border-color: var(--fg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 11px; background-position: center; background-repeat: no-repeat;
}
/* Room for the check, so a label never runs under it. */
.setup-choice, .style-card, .level-card { padding-right: 40px; }

/* Where the clicks came from: three short lists, side by side. */
.clicks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; margin-top: 10px; }
.clicks-list { list-style: none; margin: 6px 0 0; padding: 0; }
.clicks-list li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--border); font-size: 13px; }
.clicks-list li:first-child { border-top: 0; }

/* The calendar's cards are the one card, at the cell's width. */
.cal-cards { grid-template-columns: 1fr; gap: 8px; }
.cal-cards .post-card-head { padding: 6px 8px; font-size: 11px; }
.cal-cards .post-card-body { padding: 6px 8px 8px; }
.cal-cards .post-card-title { font-size: 12px; }

/* A day's entry is the card and nothing around it: the card already carries
   the state in its own colour, and a tinted box behind it said the same
   thing twice in two different shapes. What is left — the time, the piece,
   the presses — is one quiet row under it. */
.cal-day .cal-entry { border: 0; padding: 0; background: none; }
.cal-day .cal-entry.state { background: none; border: 0; }
.cal-day .cal-entry > .cal-timed, .cal-day .cal-entry > .cal-queued,
.cal-day .cal-entry > .dialog-holder, .cal-day .cal-entry > .cal-more { display: inline-block; vertical-align: middle; margin-right: 8px; }
.cal-day .cal-entry > .dialog-holder > .cal-done, .cal-day .cal-entry > .cal-more > summary { font-size: 11px; color: var(--muted); }
.cal-day .cal-entry + .cal-entry { margin-top: 12px; }
.cal-entry .post-card { box-shadow: 0 1px 2px rgba(0,0,0,.04); }

/* The campaign's action banner: what it needs from you, and the one press. */
.campaign-status { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  background: var(--state-waiting-bg); border: 1px solid var(--state-waiting-line); border-radius: 12px; padding: 14px 18px; margin: 18px 0 24px; }
.campaign-status.is-quiet { background: var(--surface-2); border-color: var(--border); }
.campaign-status-says { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.campaign-status-says p { margin: 0; }
.campaign-status-do { margin-left: auto; }
/* An Approvals group folds; its heading is the control. */
.approvals-group > summary { cursor: pointer; list-style: none; }
.approvals-group > summary::-webkit-details-marker { display: none; }
.approvals-group > summary h2::before { content: "⌄ "; color: var(--muted); font-weight: 400; }
.approvals-group:not([open]) > summary h2::before { content: "› "; }

/* A settings page's section: a heavier heading with a rule under it, as the
   design draws Brand Voice, Content Modification and the rest — so a page of
   settings reads as a stack of blocks rather than one long column. */
.prefs-section > h2, .kit-body > h2, .kit-section > h2 {
  font-size: 22px; margin: 34px 0 0; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.prefs-section > h2 + *, .kit-body > h2 + *, .kit-section > h2 + * { margin-top: 14px; }
.prefs-section:first-of-type > h2 { margin-top: 8px; }

/* The preview as a post rather than a picture: whose account, the creative,
   what a reader can press, the caption. */
.phone-account { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; }
.phone-account .brand-face, .phone-account .identity-mark { border-radius: 50%; overflow: hidden; }
.phone-who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.phone-who strong { font-size: 13px; }
.phone-who .meta { font-size: 11.5px; }
.phone-actions { display: flex; gap: 14px; margin: 0; padding: 8px 12px 2px; font-size: 15px; color: var(--fg); }
.phone-actions .phone-save { margin-left: auto; }
.phone-frame.is-dark .phone-actions { color: var(--ink-fg); }

/* The selectable chip, the design's own: white with a near-black edge and a
   filled check when it is on, grey with nothing when it is not. The native
   box goes away — two marks for one state (a tick and a colour) is the
   thing that made every choice in the setup look like a different product. */
.setup-chip, .day-pick {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 8px 14px 8px 12px; border-radius: 9px;
  background: var(--surface-2); border: 1px solid transparent; color: var(--fg); cursor: pointer;
}
.setup-chip input, .day-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.setup-chip::before, .day-pick::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid var(--border-strong); background: var(--bg);
}
.setup-chip:has(input:checked), .day-pick:has(input:checked) { background: var(--bg); border-color: var(--fg); font-weight: 500; }
.setup-chip:has(input:checked)::before, .day-pick:has(input:checked)::before {
  background: var(--fg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat;
  border-color: var(--fg);
}
.setup-chip.on { color: inherit; }

/* A join, with the press that unmakes it. */
.join-pill { display: inline-flex; align-items: center; gap: 4px; }
.join-x { font-size: 13px; line-height: 1; padding: 0 2px; color: var(--muted); }
.join-x:hover { color: var(--danger); }

/* Merlin's sentence, under the strip rather than inside it: the header stays
   one line whatever is wrong, and what is wrong still says itself in full. */
.workspace-main > .merlin-line { margin: 0 0 14px; display: flex; align-items: center; gap: 7px; font-size: 12.5px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 8px 12px; }
.workspace-main > .merlin-line.is-stopped, .workspace-main > .merlin-line.is-unready {
  background: #FDECEA; border-color: #F2C2BC; color: #8C2419; }
.workspace-main > .merlin-line.is-waiting { background: var(--state-waiting-bg); border-color: var(--state-waiting-line); color: var(--state-waiting-ink); }
.merlin-chip { white-space: nowrap; }

/* A difference, both sides: what the site says, what Merlin holds. */
.drift { list-style: none; margin: 14px 0 0; padding: 0; }
.drift-row { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.drift-label { margin: 0 0 10px; font-weight: 600; font-size: 13.5px; }
.drift-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.drift-side { background: var(--surface-2); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.drift-side.is-mine { background: var(--bg); border: 1px solid var(--border); }
.drift-value { margin: 0; font-size: 13.5px; word-break: break-word; }
@media (max-width: 760px) { .drift-sides { grid-template-columns: 1fr; } }

/* A model for each of the three jobs. Rows rather than three of the big
   pickers above: choosing three times from a wall of cards is how somebody
   ends up with the frontier model drawing an SVG. */
.role-rows { display: flex; flex-direction: column; gap: 8px; max-width: 620px; }
.role-row { display: grid; grid-template-columns: 180px 1fr; gap: 14px; align-items: center; }
.role-label { display: flex; flex-direction: column; font-weight: 600; font-size: 13.5px; }
.role-pick { font: inherit; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; width: 100%; }
@media (max-width: 560px) { .role-row { grid-template-columns: 1fr; gap: 4px; } }