@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/schibsted-grotesk.woff2?v=f25c0b730a) format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/hanken-grotesk.woff2?v=271d597396) format("woff2");
}
.hb-sky-0 { stop-color: var(--hb-sky-0); }
.hb-sky-1 { stop-color: var(--hb-sky-1); }
.hb-sky-2 { stop-color: var(--hb-sky-2); }
.hb-sky-3 { stop-color: var(--hb-sky-3); }
.hb-hill-far { fill: var(--hb-hill-far); }
.hb-hill-near { fill: var(--hb-hill-near); }
.hb-bird { stroke: var(--hb-bird); }
.hb-word-hill { fill: var(--hb-word-hill); }
.hb-word-run-0 { stop-color: var(--hb-word-bird); }
.hb-word-run-1 { stop-color: var(--hb-word-bird-end); }
.hb-word-wing { stroke: var(--hb-word-bird); }
svg.word { display: block; flex: none; }
:root {
  --surface-canvas: #F4F1EB;
  --surface-raised: #FFFFFF;
  --surface-overlay: #FFFFFF;
  --text-primary: #1A1918;
  --text-secondary: #6E6A66;
  --text-accent: #0B5C48;
  --text-status-auto: #166534;
  --text-status-human-edit: #9A3412;
  --text-status-compliance-hold: #B91C1C;
  --fill-accent: #0F6E56;
  --fill-accent-label: #FFFFFF;
  --shadow-raised: 0 1px 1px rgba(10, 10, 10, 0.03), 0 2px 8px rgba(10, 10, 10, 0.04), 0 12px 24px rgba(10, 10, 10, 0.04);
  --shadow-overlay: 0 2px 8px rgba(10, 10, 10, 0.06), 0 16px 40px rgba(10, 10, 10, 0.12);
  --hb-sky-0: #FFB020;
  --hb-sky-1: #FF5A4E;
  --hb-sky-2: #E0348F;
  --hb-sky-3: #7C3AED;
  --hb-hill-far: #4C1D95;
  --hb-hill-near: #1E1147;
  --hb-bird: #FFFFFF;
  --hb-word-hill: #6D28D9;
  --hb-word-bird: #FFB020;
  --hb-word-bird-end: #FF5A4E;
  /* 2026-10-08 (owner): the mark's bars, the studio's yellow on every page. */
  --mark-fill: #F6C445;
  --font-display: "Schibsted Grotesk", "Hanken Grotesk", system-ui, sans-serif;
  --font-ui: "Hanken Grotesk", system-ui, sans-serif;
  /* Derived veils: alpha steps of the token custom properties above via
     color-mix. No color originates here — these track the mode-resolved
     tokens automatically in both modes. */
  --hairline-color: color-mix(in srgb, var(--text-secondary) 30%, transparent);
  --hairline-strong: color-mix(in srgb, var(--text-secondary) 45%, transparent);
  --veil-neutral: color-mix(in srgb, var(--text-secondary) 12%, transparent);
  --veil-accent: color-mix(in srgb, var(--fill-accent) 10%, transparent);
  --veil-bar: color-mix(in srgb, var(--surface-raised) 84%, transparent);
  --type-largeTitle-size: 34px;
  --type-largeTitle-lh: 41px;
  --type-title-size: 22px;
  --type-title-lh: 28px;
  --type-body-size: 17px;
  --type-body-lh: 22px;
  --type-caption-size: 13px;
  --type-caption-lh: 18px;
}
@media (prefers-color-scheme: dark) {
  :root {
  --surface-canvas: #0B0B0D;
  --surface-raised: #161618;
  --surface-overlay: #202023;
  --text-primary: #F4F1EB;
  --text-secondary: #A9A59F;
  --text-accent: #6FD3AE;
  --text-status-auto: #4ADE80;
  --text-status-human-edit: #FBBF24;
  --text-status-compliance-hold: #F87171;
  --fill-accent: #1FA37A;
  --fill-accent-label: #0F0F10;
  --shadow-raised: none;
  --shadow-overlay: none;
  }
}
/* Spec 57 rule 1 (owner direction 2026-09-29/30): every signed-in page is
   the dark studio whatever the system says — ONE token block, the studio's
   own set (packages/ui studio), with the derived veils re-read against
   it. The ground is flat: depth comes from the surface steps, never a glow.
   Public product pages keep the cream ground. */
body.studio {
  --surface-canvas: #15171A;
  --surface-rail: #111316;
  --surface-raised: #1C1F23;
  --surface-overlay: #262A30;
  --line: #30353C;
  --text-primary: #ECEDE8;
  --text-secondary: #9AA0A6;
  --text-faint: #878D94;
  --text-inverse: #15171A;
  --text-accent: #F9D777;
  --text-done: #6FD0AA;
  --text-problem: #F0566F;
  --text-progress: #8AA4CC;
  --fill-accent: #F6C445;
  --fill-accent-label: #1C1500;
  --fill-done: #3DB489;
  --fill-problem: #F0566F;
  --fill-progress: #8AA4CC;
  --type-largeTitle-size: 30px;
  --type-largeTitle-lh: 36px;
  --type-title-size: 22px;
  --type-title-lh: 28px;
  --type-item-size: 16px;
  --type-item-lh: 22px;
  --type-body-size: 15px;
  --type-body-lh: 22px;
  --type-caption-size: 13px;
  --type-caption-lh: 18px;
  --hb-word-hill: #A78BFA;
  --shadow-raised: none;
  --shadow-overlay: 0 12px 28px rgba(0, 0, 0, 0.45);
  --hairline-color: var(--line);
  --hairline-strong: color-mix(in srgb, var(--text-secondary) 45%, transparent);
  --veil-neutral: color-mix(in srgb, var(--text-primary) 7%, transparent);
  --veil-accent: color-mix(in srgb, var(--fill-accent) 14%, transparent);
  --veil-bar: color-mix(in srgb, var(--surface-rail) 92%, transparent);
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Platform look (2026-09-08): one committed light look, native controls
   follow it. */
html { color-scheme: light; }
body {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--text-primary);
  font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--fill-accent); color: var(--fill-accent-label); }

/* The shell is landscape (owner direction 2026-09-04): 1280px, so the
   composer and its aside sit side by side and posts run in two columns.
   Reading widths inside stay bounded by their own ch limits. */
main {
  max-width: 1600px;
  margin: 0 auto;
  padding: 40px 48px 64px;
}
@media (max-width: 720px) { main { padding: 24px 20px 48px; } }
/* The working measure (owner direction 2026-09-08): the Content page's idea
   box and the Support page's contact box share ONE narrower column,
   centered in the shell with open space on both sides, the title, the
   box, and what follows it move together so nothing sits alone at an edge.
   Posts, the library, and settings keep the full shell. */
.page-measure { max-width: 960px; margin: 0 auto; }
/* Every product page shares the one shell width (owner direction
   2026-09-06); settings rows size their controls to the text instead. */
.settings-group .card.group button, .settings-group .card.group .button { width: auto; }

h1 { font-family: var(--font-display); font-size: var(--type-largeTitle-size); line-height: var(--type-largeTitle-lh); letter-spacing: -0.022em; font-weight: 700; margin: 24px 0 32px; }
h2 { font-family: var(--font-display); font-size: var(--type-title-size); line-height: var(--type-title-lh); letter-spacing: -0.009428571428571427em; font-weight: 600; margin: 0 0 8px; }
p { margin: 0 0 12px; }
small, .caption { font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em; color: var(--text-secondary); }

time { font-variant-numeric: tabular-nums; }

a {
  color: var(--text-accent);
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--text-accent) 40%, transparent);
  transition: text-decoration-color 150ms ease;
}
a:hover { text-decoration-color: var(--text-accent); }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 4px solid var(--fill-accent);
  outline-offset: 0;
}

header.site {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--veil-bar);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--hairline-color);
  padding: 4px 20px;
}
header.site nav {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
header.site nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--text-secondary);
  font-weight: 500;
  text-decoration: none;
  transition: color 150ms ease, background-color 150ms ease;
}
header.site nav a:hover { color: var(--text-primary); background: var(--veil-neutral); }
header.site nav a[aria-current="page"] { color: var(--text-primary); font-weight: 600; }
header.site nav .wordmark {
  font-family: var(--font-display); font-size: var(--type-title-size); line-height: var(--type-title-lh); letter-spacing: -0.009428571428571427em;
  font-weight: 700;
  color: var(--text-primary);
  margin-right: 12px;
  gap: 8px;
}
header.site nav a.wordmark:hover { background: transparent; }
header.site nav a.wordmark.beta:hover { background: var(--veil-neutral); text-decoration: underline; }
/* Beta (owner direction 2026-09-22): a small chip beside the wordmark.
   2026-10-03: the chip is its own link, to the Terms' beta section. */
header.site nav .wordmark:has(+ .beta) { margin-right: 0; }
header.site nav a.wordmark.beta {
  font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em;
  min-height: 0;
  min-width: 0;
  margin-right: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-accent);
  background: var(--veil-neutral);
  border-radius: 999px;
  padding: 0 8px;
  line-height: 20px;
}

/* ---- Help and Support inside the app (2026-09-06). */
.lede { font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em; color: var(--text-secondary); margin: 0 0 24px; }
.help-card h2 { font-family: var(--font-display); font-size: var(--type-title-size); line-height: var(--type-title-lh); letter-spacing: -0.009428571428571427em; font-weight: 600; margin: 0 0 16px; }
.help-pointers { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.help-pointers li { display: grid; grid-template-columns: minmax(64px, 200px) minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 8px 0; }
.help-pointers li + li { border-top: 0.5px solid var(--hairline-color); }
.help-pointers a { font-weight: 600; }
.help-pointers span { color: var(--text-secondary); }
.help-faqs { display: grid; gap: 4px; }
.help-faq { padding: 8px 0; }
.help-faq + .help-faq { border-top: 0.5px solid var(--hairline-color); }
.help-faq summary { font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em; font-weight: 600; cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.help-faq p { color: var(--text-secondary); margin: 8px 0 8px; }
/* The contact box is short: one identity row (name, email, business),
   a three-line message, tight gaps. */
.support-card .contact-form { display: grid; gap: 12px; }
.support-card .contact-form fieldset { border: none; margin: 0; padding: 0; }
.support-card .contact-form legend { font-weight: 600; margin: 0 0 8px; padding: 0; }
.support-card .field-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.support-card .field-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.support-card .field { display: grid; gap: 4px; }
.support-card .field label { font-weight: 500; }
.support-card .field label small { display: block; font-weight: 400; color: var(--text-secondary); }
.support-card .span-2 { grid-column: 1 / -1; }
.support-card .cta-row { margin: 0; }
.support-card .cta-row button { width: auto; }
@media (max-width: 720px) { .support-card .field-grid, .support-card .field-grid.four { grid-template-columns: minmax(0, 1fr); } }

/* Today (owner direction 2026-09-25): the post itself, with its actions. */
.today-list .today-card { display: grid; gap: 8px; padding: 0; border: none; }
.today-list .today-card > .item { margin: 0; }
/* Spec 54: the Marketing Studio workstation — tiers, campaign states. */
.rules { display: grid; gap: 4px; }
.table-scroll { overflow-x: auto; margin: 0 calc(-1 * 4px); padding: 0 4px; }
.tier { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.tier-score { font-weight: 500; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.lead-value { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; font-weight: 600; color: var(--text-accent); margin-left: 4px; }
.campaign-links code { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; word-break: break-all; }
.rules-form, .campaign-form { display: grid; gap: 8px; margin-top: 12px; }
.rules-form label, .campaign-form label { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; color: var(--text-secondary); }
.rules-form button, .campaign-form button[type="submit"] { justify-self: start; }
.campaign-form fieldset { border: none; margin: 0; padding: 0; }
.campaign-form legend { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; color: var(--text-secondary); padding: 0; margin: 0 0 4px; }
.badge.off { color: var(--text-secondary); }
/* Spec 53 §2: the facts card under the flash. */
.facts-card { margin-bottom: 16px; }
.fact-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 8px 0 0; }
.fact-row label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fact-row select { font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em; width: auto; padding: 4px 8px; border-radius: 8px; }
/* Spec 53: a chip that ACTS (Add to record, Save price) reads as a button. */
button.chip-action { color: var(--text-accent); border: 1px solid var(--text-accent); background: transparent; cursor: pointer; font-weight: 600; }
button.chip-action:hover { background: var(--veil-accent); }
button.chip-action em { font-style: normal; font-weight: 500; color: var(--text-primary); }
/* Spec 51 — Today: short rows of what needs a look and what goes out. */
.today-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.today-row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: baseline;
  padding: 12px 0; border-bottom: 0.5px solid var(--hairline-color);
}
.today-row:last-child { border-bottom: none; }
.today-row a { font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em; font-weight: 600; color: var(--text-primary); text-decoration: none; }
.today-row a:hover { color: var(--text-accent); }
.today-row .meta { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; color: var(--text-secondary); }
.today-more { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; margin: 8px 0 0; }
/* A key date from the campaign brief (2026-09-28): a quiet label on its day. */
.cal-key-date { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; display: block; color: var(--text-primary); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.campaign-brief-dates { border: 0; padding: 0; margin: 8px 0; display: grid; gap: 8px; }
.key-date-row { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: center; }
@media (max-width: 480px) { .key-date-row { grid-template-columns: auto 1fr; } .key-date-row input[type="text"] { grid-column: 1 / -1; } }
.key-dates-saved li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Video packs (2026-09-28): the pack choices under a video's price. */
.pack-buys { display: flex; flex-wrap: wrap; gap: 8px; }
/* 2026-10-11: the top-ups lead the offer, side by side. */
.pay-offer .topup-first { display: flex; flex-wrap: wrap; gap: 8px; }
.pay-offer form { display: inline-block; }
/* Spec 51 analytics — inline SVG charts drawn from tokens: series colours
   step from the accent; axes and grid from the secondary text. */
.chart { display: block; width: 100%; height: auto; }
.chart .grid { stroke: var(--hairline-color); stroke-width: 1; }
.chart .axis { fill: var(--text-secondary); font-family: var(--font-ui); font-size: 11px; }
.chart .s0 { stroke: var(--fill-accent); fill: var(--fill-accent); }
.chart .s1 { stroke: color-mix(in srgb, var(--fill-accent) 55%, var(--text-secondary)); fill: color-mix(in srgb, var(--fill-accent) 55%, var(--text-secondary)); }
.chart .s2 { stroke: var(--text-secondary); fill: var(--text-secondary); }
.chart .s3 { stroke: color-mix(in srgb, var(--text-secondary) 55%, transparent); fill: color-mix(in srgb, var(--text-secondary) 55%, transparent); }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { stroke: none; opacity: 0.16; }
.chart .dot { stroke: var(--surface-raised); stroke-width: 1.5; }
.chart .bar { stroke: none; }
.chart .bar.muted { opacity: 0.35; }
.chart .ring { fill: none; stroke-width: 18; }
.chart .ring.track { stroke: var(--veil-neutral); }
.chart .label { fill: var(--text-primary); font-family: var(--font-ui); font-size: 12px; }
.chart .label.strong { font-weight: 700; font-size: 20px; }
.chart .meter-track { fill: var(--veil-neutral); }
.chart .meter-fill { fill: var(--fill-accent); }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; color: var(--text-secondary); margin: 0; padding: 0; list-style: none; }
.legend li { display: inline-flex; align-items: center; gap: 4px; }
.legend .swatch { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.legend .swatch.s0 { background: var(--fill-accent); }
.legend .swatch.s1 { background: color-mix(in srgb, var(--fill-accent) 55%, var(--text-secondary)); }
.legend .swatch.s2 { background: var(--text-secondary); }
.legend .swatch.s3 { background: color-mix(in srgb, var(--text-secondary) 55%, transparent); }
.clicks .top { display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: 999px; background: var(--veil-accent); color: var(--text-accent); font-weight: 600; }
/* Spec 51 — Leads: five stage columns of cards; the public lead page. */
.lead-message { font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em; margin: 0; }
.lead-notes { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; color: var(--text-secondary); margin: 0; white-space: pre-line; }
form.inline { display: inline; }
.lead-page .eyebrow { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); margin: 0 0 8px; }
.lead-page .offering { font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em; margin: 16px 0; }
.lead-form { display: grid; gap: 8px; }
.lead-form .consent { display: flex; gap: 8px; align-items: flex-start; font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; }
.steps-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.card.step { margin: 0; padding: 12px 16px; display: grid; gap: 4px; }
.card.step h3 { font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em; font-weight: 700; margin: 0; }

/* The HillBird mark (brand.ts): the ring takes the text color of its
   surface, the carried line takes the accent fill — one path set for
   light and dark. */
/* 2026-10-08 (owner): one logo everywhere: the bars are the studio's
   yellow on every page, signed in or not. */
.mark { --mark-accent: var(--mark-fill); display: block; flex: none; }
.mark-ring { fill: currentColor; }
.mark-bar { fill: var(--mark-accent); }

.banner {
  background: var(--surface-overlay);
  box-shadow: var(--shadow-overlay);
  border: 0.5px solid var(--hairline-color);
  border-radius: 20px;
  padding: 16px 24px;
  margin: 20px auto 0;
  max-width: 1600px;
}
.banner strong { color: var(--text-primary); }
.banner p:last-child { margin: 0; }

.flash {
  background: var(--surface-raised);
  box-shadow: var(--shadow-raised);
  border: 0.5px solid var(--hairline-color);
  border-left: 4px solid var(--fill-accent);
  border-radius: 12px;
  padding: 12px 20px;
  margin: 0 0 24px;
}
.flash p { margin: 0; font-weight: 500; }

.card {
  background: var(--surface-raised);
  box-shadow: var(--shadow-raised);
  border: 0.5px solid var(--hairline-color);
  border-radius: 20px;
  padding: 24px;
  margin: 0 0 20px;
}

.card.empty {
  text-align: center;
  padding: 64px 24px;
}
.card.empty h2 { color: var(--text-primary); }
.card.empty p { color: var(--text-secondary); margin: 0 auto; max-width: 480px; }

.content-item header {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 0.5px solid var(--hairline-color);
  margin-bottom: 16px;
}
.content-item .channel {
  font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em;
  color: var(--text-secondary);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* The card's zones each own their gap ABOVE themselves; the headline+excerpt
   cluster stays tight so the post reads as one object. */
.content-item h2 { margin: 0 0 4px; }
.content-item .excerpt { margin: 0; white-space: pre-line; }
/* Spec 27: the clip player — content supplies the color; the chrome just
   frames it at the card's own radius, portrait-bounded. */
.post-video {
  display: block;
  width: 100%;
  max-width: 320px;
  max-height: 480px;
  margin: 0 0 12px;
  border-radius: 12px;
  background: var(--text-primary);
}
.idea-box .idea-video { margin: 8px 0 0; }
/* Spec 33: the rendered post preview + the download cluster. */
.post-image {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 0 12px;
  border-radius: 12px;
}
.downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  margin: 12px 0 0;
}
.downloads .meta { margin: 0; }
.downloads a { color: var(--text-accent); }
/* Brand kit step one: the logo row — preview cell, upload, corner picker. */
.logo-row { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; }
.logo-cell {
  width: 64px; height: 64px; border-radius: 12px;
  border: 0.5px solid var(--hairline-color); background: var(--surface-overlay);
  display: grid; place-items: center; overflow: hidden;
}
.logo-cell img { max-width: 100%; max-height: 100%; display: block; }
.logo-cell .meta { margin: 0; text-align: center; padding: 4px; }
.logo-fields { display: grid; gap: 12px; }
.logo-fields input[type="file"] { max-width: 100%; }
.corner-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.corner-card { position: relative; display: block; cursor: pointer; }
.corner-card input { position: absolute; opacity: 0; }
.corner-card .corner-body {
  display: grid; gap: 4px; padding: 8px 12px;
  border-radius: 12px; background: var(--veil-neutral); border: 2px solid transparent;
  font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em;
}
.corner-card input:checked + .corner-body { border-color: var(--text-primary); }
.corner-card .corner-sketch {
  width: 40px; height: 48px; border-radius: 8px;
  border: 0.5px solid var(--hairline-color); position: relative; background: var(--surface-raised);
}
.corner-card .corner-sketch::after {
  content: ""; position: absolute; width: 12px; height: 12px;
  border-radius: 0; background: var(--fill-accent);
}
.corner-card[data-corner="top_left"] .corner-sketch::after { top: 4px; left: 4px; }
.corner-card[data-corner="top_right"] .corner-sketch::after { top: 4px; right: 4px; }
.corner-card[data-corner="bottom_left"] .corner-sketch::after { bottom: 4px; left: 4px; }
.corner-card[data-corner="bottom_right"] .corner-sketch::after { bottom: 4px; right: 4px; }
.corner-card[data-corner="none"] .corner-sketch::after { display: none; }
.logo-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.logo-actions button { width: auto; }
/* Spec 36: the creation cards — radio cards, accent ring on the pick. */
.creation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}
.creation-grid legend { font-weight: 600; margin: 0 0 8px; padding: 0; }
.creation-card { position: relative; display: block; cursor: pointer; }
.creation-card input { position: absolute; opacity: 0; }
.creation-card .creation-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--veil-neutral);
  border: 2px solid transparent;
  min-height: 44px;
}
.creation-card input:checked + .creation-card-body {
  border-color: var(--text-primary);
}
/* Owner decision 2026-08-29: the media type must read at a glance — a large
   monochrome glyph leads each card (accent-colored once picked). */
.creation-card-icon {
  width: 40px;
  height: 40px;
  color: var(--text-secondary);
}
.creation-card input:checked + .creation-card-body .creation-card-icon {
  color: var(--text-primary);
}
.creation-card small { color: var(--text-secondary); }
.creation-card.is-disabled { cursor: default; opacity: 0.45; }
.idea-extra { margin: 12px 0 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--veil-neutral);
  cursor: pointer;
}
.chip input { position: absolute; opacity: 0; }
/* Spec 40: the being-made-now card breathes — a soft pulse on the
   heading dot side; collapses under prefers-reduced-motion. */
.pending-request h2::before,
.brand-status[data-stage="extracting"] h2::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--fill-accent);
  animation: pending-pulse 1.6s ease-in-out infinite;
}
@keyframes pending-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pending-request h2::before,
  .brand-status[data-stage="extracting"] h2::before { animation: none; }
}
/* 2026-09-29: a request asked for before the brand record was ready waits;
   its dot rests. The note above the composer sits apart from it. */
.pending-request.waiting h2::before { animation: none; opacity: 0.5; }
.brand-status { margin: 0 0 16px; }
/* Spec 39: the needs-more-info card — a quiet notice with a list. */
.needs-input ul { margin: 0 0 12px; padding-left: 20px; }
.needs-input li { margin: 0 0 4px; }
/* Spec 38: the Library's quiet removal control. */
.library-remove { margin: 8px 0 0; }
.chip:has(input:checked) { background: var(--surface-overlay); color: var(--text-primary); font-weight: 600; box-shadow: inset 0 0 0 1px var(--hairline-strong); }
/* Analytics (2026-09-26): the period picker is links, not radios — the picked
   period highlights the way a checked chip does. */
a.chip[aria-current="true"] { background: var(--surface-overlay); color: var(--text-primary); font-weight: 600; box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.item-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 12px 0 0;
}
.item-meta .meta { margin: 0; }

/* System notices are inset panels — quiet, caption-scale, one surface step
   off the card. Emphasis comes from weight, never size or the reserved
   status colors. */
.notice {
  display: grid;
  gap: 4px;
  margin: 16px 0 0;
  padding: 12px 16px;
  background: var(--veil-neutral);
  border-radius: 12px;
}
.notice p { margin: 0; }

.badge {
  font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em;
  display: inline-flex;
  align-items: center;
  background: var(--veil-neutral);
  border-radius: 20px;
  padding: 4px 12px;
  white-space: nowrap;
  font-weight: 500;
}
.badge-quiet { color: var(--text-secondary); }
.badge-strong { color: var(--text-primary); font-weight: 600; }
.badge-accent { color: var(--text-accent); font-weight: 600; background: var(--veil-accent); }

.meta { font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em; color: var(--text-secondary); margin: 0 0 8px; }
.hashtags { color: var(--text-secondary); }

.failure-reason { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; color: var(--text-primary); font-weight: 600; }
.failure-detail { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; color: var(--text-secondary); }
.item-warning {
  font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em;
  color: var(--text-primary);
  font-weight: 600;
  margin: 16px 0 0;
  padding: 12px 16px;
  background: var(--veil-neutral);
  border-radius: 12px;
}
.review-note { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; color: var(--text-secondary); margin: 16px 0 0; }

form { margin: 0 0 12px; }
label {
  display: block;
  margin: 16px 0 4px;
  color: var(--text-secondary);
  font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em;
  font-weight: 500;
}
input, select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 8px 16px;
  border: 0.5px solid var(--hairline-strong);
  border-radius: 12px;
  background: var(--surface-raised);
  color: var(--text-primary);
  caret-color: var(--fill-accent);
  font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em;
  transition: border-color 150ms ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--text-secondary); }
textarea { min-height: 88px; }

/* Spec 22: preference checkboxes ride inside a 44pt label row — the row is
   the tap target; the box itself stays box-sized. */
input[type="checkbox"] {
  width: 20px;
  min-height: 20px;
  height: 20px;
  accent-color: var(--fill-accent);
}
.settings-section label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}

button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 20px;
  border: none;
  border-radius: 12px;
  background: var(--fill-accent);
  color: var(--fill-accent-label);
  font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 150ms ease, transform 150ms ease, background-color 150ms ease;
}
button:hover, .button:hover { opacity: 0.92; }
button:active, .button:active { opacity: 0.84; transform: scale(0.98); }

button.quiet, .button.quiet {
  background: none;
  color: var(--text-accent);
  font-weight: 500;
}
button.quiet:hover, .button.quiet:hover { filter: none; background: var(--veil-accent); }

/* The action bar: one footer per card, separated by a hairline. Primary
   verb first; quiet verbs after; .push-end sends a form to the far edge. */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin: 20px 0 0;
  border-top: 0.5px solid var(--hairline-color);
  padding: 16px 0 0;
}
.actions form { margin: 0; }
.actions p { margin: 0; }
.actions .push-end { margin-left: auto; }

/* The reschedule picker reads as one inline row: select, then its verb. */
.reschedule {
  display: flex;
  flex: 1 1 auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.reschedule select { flex: 1 1 auto; width: auto; min-width: 0; }

/* The edit request is a native disclosure on its own row of the bar; the
   summary reads as the quiet action it is. */
.edit-request { flex-basis: 100%; }
.edit-request summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  color: var(--text-accent);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: background-color 150ms ease;
}
.edit-request summary::-webkit-details-marker { display: none; }
.edit-request summary:hover { background: var(--veil-accent); }
.edit-request form { margin: 4px 0 0; }
.edit-request textarea { width: 100%; }
/* 2026-10-09: the weekly grid in Settings. */
.schedule-grid { border-collapse: collapse; margin-top: 12px; }
.schedule-grid th, .schedule-grid td { padding: 8px 12px; text-align: center; font-size: 14px; }
.schedule-grid th[scope="row"] { text-align: left; font-weight: 600; padding-left: 0; }
.schedule-grid thead th { color: var(--text-secondary); font-weight: 500; }
.schedule-grid input[type="checkbox"] { width: 20px; height: 20px; }
.schedule-time { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.schedule-time label { white-space: nowrap; }
.schedule-time select, body.studio .schedule-time select { width: auto; flex: none; min-width: 64px; }
/* 2026-10-09: a post's further platforms, under its downloads. */
.also-going { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin-top: 8px; }
.also-going ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.also-going li { display: flex; align-items: center; gap: 8px; }
.also-going .also-name { font-weight: 600; }
.also-going form { margin: 0; }
/* 2026-10-08: the schedule panel: platform, day, who posts. */
.schedule-panel summary { background: var(--fill-accent); color: var(--fill-accent-label); font-weight: 600; }
.schedule-panel summary:hover { background: var(--fill-accent); opacity: 0.92; }
.schedule-panel form { display: grid; gap: 12px; margin-top: 12px; max-width: 560px; padding: 16px; }
body.studio .schedule-panel > summary { background: var(--fill-accent); color: var(--fill-accent-label); border-color: transparent; }
.schedule-panel .schedule-field { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.schedule-panel .schedule-field legend { padding: 0; margin-bottom: 4px; font-size: 14px; color: var(--text-secondary); }
.schedule-panel .meta { margin: 0; }

.visually-hidden {
  position: absolute;
  width: 4px;
  height: 4px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Form errors are monochrome-plus-accent per the spec 19 rider: emphasis
   through primary color and weight, never the reserved status roles (the
   summary additionally carries role="alert" in the markup). */
.field-error { color: var(--text-primary); font-weight: 600; font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; margin: 4px 0 0; }
.error-summary { color: var(--text-primary); font-weight: 600; }

ul.plain { list-style: none; padding: 0; margin: 0 0 12px; }
ul.plain li { padding: 12px 0; border-bottom: 0.5px solid var(--hairline-color); }
ul.plain li:last-child { border-bottom: none; }
ol.plain { list-style: none; padding: 0; margin: 0 0 12px; }

/* Spec 20: the follow-up form inside the centered progress card reads as a
   form again — left-aligned, content-width, monochrome like every form. */
.onboarding-progress .followup {
  text-align: left;
  max-width: 480px;
  margin: 20px auto 0;
}
.onboarding-progress .followup textarea { width: 100%; }
.onboarding-progress .followup input[type="text"] { width: 100%; }
/* Owner direction 2026-09-01: one-click follow-up answers. The swatch
   backgrounds are CONTENT — the customer's candidate brand colors, set
   inline by the page — never chrome; chrome here stays monochrome + accent
   like every card. */
.onboarding-progress .followup .followup-q {
  font-weight: 600;
  margin: 16px 0 8px;
}
.palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 8px;
  margin: 0 0 8px;
}
.palette-card { position: relative; display: block; cursor: pointer; }
.palette-card input { position: absolute; opacity: 0; }
.palette-card .palette-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--veil-neutral);
  border: 2px solid transparent;
  min-height: 44px;
}
.palette-card input:checked + .palette-card-body {
  border-color: var(--text-primary);
}
.palette-swatches { display: flex; gap: 4px; }
.palette-swatches .swatch {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 0.5px solid var(--hairline-color);
}
.palette-card small { color: var(--text-secondary); }
.voice-chip {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 8px 12px;
  border-radius: 12px;
}
.voice-chip small { color: var(--text-secondary); font-weight: 400; }
ul.connections li, ul.ad-accounts li {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.steps { list-style: none; padding: 0; margin: 0 0 16px; }
.steps li { padding: 8px 0; border-bottom: 0.5px solid var(--hairline-color); color: var(--text-secondary); }
.steps li.done { color: var(--text-primary); }
.steps li.current { color: var(--text-primary); font-weight: 600; }

/* ---- Spec 46 commit 2: the brand questionnaire — a meter, five step
   chips, the screen's form on the left and the live sample post on the
   right (one column under 800px). */
.brand-flow .brand-head { margin: 0 0 24px; }
.meter { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.meter-bar { display: block; height: 8px; border-radius: 999px; background: var(--veil-neutral); overflow: hidden; }
.meter-fill { display: block; height: 100%; background: var(--fill-accent); }
.meter-text { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; color: var(--text-secondary); }
.brand-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.brand-steps li a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 12px;
  border: 0.5px solid var(--hairline-color); border-radius: 999px;
  color: var(--text-secondary); text-decoration: none;
}
.brand-steps li.done a { color: var(--text-primary); }
.brand-steps li.current a { color: var(--text-primary); border-color: var(--text-secondary); background: var(--surface-overlay); font-weight: 600; }
.step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--veil-neutral); font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em;
}
.brand-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 32px; align-items: start; }
@media (max-width: 800px) { .brand-grid { grid-template-columns: minmax(0, 1fr); } }
.brand-screen > h2 { margin: 0 0 16px; }
.brand-form textarea { min-height: 64px; }
.brand-form .state { display: block; font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; color: var(--text-secondary); margin: 4px 0 16px; }
.brand-form .state.fixed { color: var(--text-accent); }
.brand-kit-screen > form + form { border-top: 0.5px solid var(--hairline-color); margin-top: 24px; padding-top: 24px; }
.brand-kit-screen .kit-list { list-style: none; padding: 0; margin: 8px 0; color: var(--text-secondary); }
.brand-sample { margin: 0; }
.brand-sample svg { display: block; width: 100%; height: auto; border-radius: 12px; }
.brand-sample figcaption { margin: 8px 0 0; }
.clicks { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; color: var(--text-secondary); }
.cta-line code { word-break: break-all; }

/* ---- Settings grammar: eyebrow-titled groups of hairline-separated rows.
   The group title lives OUTSIDE the card; the card is a list of rows —
   label + support left, sized-to-content control right; footnotes under
   the card. */
.settings-group { margin: 0 0 32px; }
.settings-group > h2 {
  font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em;
  color: var(--text-secondary);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 8px;
  padding: 0 4px;
}
.card.group { margin: 0; padding: 4px 24px; }
.group-foot {
  font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em;
  color: var(--text-secondary);
  margin: 8px 0 0;
  padding: 0 4px;
}
.settings-group .banner { margin: 12px 0 0; }

.settings-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 16px 0;
  margin: 0;
  min-height: 44px;
}
.card.group > .settings-row + .settings-row,
.card.group > form.settings-row + form.settings-row { border-top: 0.5px solid var(--hairline-color); }
/* Narrow screens: the control drops under the text instead of squeezing it. */
@media (max-width: 560px) {
  .settings-row { flex-direction: column; align-items: flex-start; }
  .row-text { flex-basis: auto; width: 100%; }
}
.row-text { flex: 1 1 64px; min-width: 0; display: grid; gap: 4px; }
.row-text label, .row-label {
  font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em;
  color: var(--text-primary);
  font-weight: 500;
  margin: 0;
}
.row-support { font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em; color: var(--text-secondary); margin: 0; }
.row-support strong { color: var(--text-primary); }
.row-value { font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em; color: var(--text-secondary); }
/* Radio lists inside a settings card (post style): the dot sizes to itself,
   the label beside it, the support line beneath — never a stretched input. */
.card.group .radio-row {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; row-gap: 4px;
  align-items: center; padding: 12px 0; margin: 0; cursor: pointer;
}
.card.group .radio-row + .radio-row { border-top: 0.5px solid var(--hairline-color); }
.card.group .radio-row input[type="radio"] { width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; grid-row: 1 / span 2; accent-color: var(--fill-accent); }
.card.group .radio-row > span { font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em; font-weight: 500; grid-column: 2; }
.card.group .radio-row > small { font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em; color: var(--text-secondary); grid-column: 2; }
.card.group .form-commit { margin: 12px 0 12px; }
.card.group > p.meta, .card.group > form > p.meta { font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em; }
.row-control { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.row-control form { margin: 0; display: flex; align-items: center; gap: 8px; }
/* 2026-09-29: the registration form's folds (what has a default, what is
   optional): a quiet line that says what is inside, and opens on a tap. */
.signup-more { border-top: 0.5px solid var(--hairline-color); margin: 16px 0 0; padding: 4px 0 0; }
.signup-more summary {
  font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 12px;
  padding: 8px 0;
  list-style: none;
}
.signup-more summary::-webkit-details-marker { display: none; }
/* The sign sits beside both lines, so a long line never pushes it under. */
.signup-more summary::after { content: "+"; grid-column: 2; grid-row: 1 / span 2; color: var(--text-secondary); }
.signup-more[open] summary::after { content: "–"; }
.signup-more summary .meta { grid-column: 1; grid-row: 2; font-weight: 400; margin: 0; }
/* Spec 52 amendment B: an add-on's two ways to pay, side by side, wrapping
   on a narrow screen. */
.row-control form.addon-buy { flex-wrap: wrap; justify-content: flex-end; }
/* db/080: the top-ups sit together at the start of their row. */
form.settings-row.topup-buy { flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
.row-control input[type="number"] {
  width: calc(64px + 16px);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.row-control a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  font-weight: 500;
}

/* Channel rows: the 29pt squircle icon tile (spec 08 metrics) carries a
   monogram; the name fills; the health control sits at the edge. */
.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  border-radius: 7px;
  background: var(--veil-neutral);
  color: var(--text-secondary);
  font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em;
  font-weight: 600;
  flex-shrink: 0;
}
ul.connections li, ul.ad-accounts li { min-height: 44px; }
ul.connections li, ul.ad-accounts li strong { flex: 1; min-width: 0; }
ul.connections li, ul.ad-accounts li form { margin: 0; }
.card.group ul.plain { margin: 0; }

/* The danger group: deletion folds behind a native disclosure; a confirm
   error re-renders it open. Isolation and the typed confirm ARE the
   destructive styling — no reserved status color is spent on it. */
.danger-disclosure summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: var(--text-primary);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.danger-disclosure summary::-webkit-details-marker { display: none; }
.danger-disclosure[open] { padding-bottom: 16px; }
.danger-disclosure[open] summary { margin-bottom: 8px; }
.danger-disclosure form { margin: 0; max-width: 480px; }

/* ---- Auth surfaces: one narrow centered column; the card holds the form. */
.auth { max-width: 440px; margin: 0 auto; }
.auth.wide { max-width: 560px; }
.auth h1 { margin: 24px 0 24px; }
.auth .card { padding: 24px; }
.auth-alt { text-align: center; margin: 16px 0 0; }
.form-commit { margin: 20px 0 0; }
.form-commit button { width: 100%; }
/* Spec 56: the pay-per-video form's two quiet lines sit apart from what they follow. */
#video-signup .meta { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; margin: 8px 0 20px; }
#video-signup .form-commit + .meta { margin: 12px 0 0; text-align: center; }
/* Spec 56: the quiet line on Make for a plain record reads as the lede does. */
.composer-head .plain-brand-line { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; margin: 4px 0 0; }
.creation-grid-one { margin-top: 12px; }

/* --- The composer (idea box, recomposed 2026-09-03) ----------------------
   One box that holds the idea: a greeting line, the three format tiles,
   the text field with its tool chips (template, photo, look, what-you-get)
   riding the field's bottom edge, and the send pair. Below it the demo
   gallery: filter tabs and tiles drawn in the customer's own brand. Every
   control is a plain form control; <details> carries the panels, so the
   whole surface works without a script. */
/* The desk: composer left, a quiet aside right (what you get, examples).
   One column under 960px. */
.desk { display: block; margin: 0 0 24px; }
.desk > .composer { margin: 0; }
.desk-aside { display: grid; gap: 20px; min-width: 0; }
.desk-aside > .card { margin: 0; padding: 20px 24px; }
.desk-aside h3 { font-family: var(--font-display); font-size: var(--type-title-size); line-height: var(--type-title-lh); letter-spacing: -0.009428571428571427em; font-weight: 600; margin: 0 0 12px; }
.facts dl { margin: 0; display: grid; gap: 12px; }
.facts dl > div + div { border-top: 0.5px solid var(--hairline-color); padding-top: 12px; }
.facts dt { font-weight: 600; margin: 0 0 4px; }
.facts dd { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; color: var(--text-secondary); margin: 0; }
.facts .facts-plan { margin: 12px 0 0; }
.card.group.facts-card { padding: 8px 24px; }
.card.group.facts-card .facts { margin: 0; display: grid; gap: 0; }
.card.group.facts-card .facts > div { padding: 16px 0; }
.card.group.facts-card .facts > div + div { border-top: 0.5px solid var(--hairline-color); }
.card.group.facts-card .facts dt { font-weight: 600; margin: 0 0 4px; }
.card.group.facts-card .facts dd { font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em; color: var(--text-secondary); margin: 0; }
/* The examples strip under the desk: eight tiles in one row on a wide
   screen, wrapping down as the width shrinks. */
.examples { margin: 0 0 24px; padding: 12px 16px 12px; }
/* A gallery of cards (owner direction 2026-09-08): each example is its
   own card, media, kind, title, the idea in two lines, the prefill
   action, four to a row inside the measure. */
.examples .demos-title { font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em; font-weight: 600; padding: 0; margin: 0 0 8px; }
.examples .demo-tabs { padding: 0; gap: 4px; }
.examples .demo-tab { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; min-height: 32px; padding: 0 4px 0 8px; gap: 4px; }
.examples .demo-count { min-width: 20px; height: 20px; padding: 0 4px; }
.examples .demo-grid { padding: 0; margin: 12px 0 0; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.examples .demo {
  background: var(--surface-raised); border: 0.5px solid var(--hairline-color); border-radius: 20px;
  box-shadow: var(--shadow-raised); padding: 8px 8px 12px;
  display: grid; gap: 8px; align-content: start;
  transition: transform 150ms ease;
}
.examples .demo:hover { box-shadow: var(--shadow-overlay); transform: translateY(-1px); }
.examples .demo-open { gap: 4px; }
.examples .demo-kind { display: block; margin: 4px 0 0; }
.examples .demo-open strong { font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em; font-weight: 600; }
.examples .demo-idea { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; }
.examples .demo-use {
  font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; font-weight: 600; justify-self: start;
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px;
  border-radius: 20px; border: 0.5px solid var(--hairline-color); text-decoration: none;
}
.examples .demo-use:hover { border-color: var(--fill-accent); background: var(--veil-accent); }
.examples .demo-media { border-radius: 12px; }
.examples .demo-glyph { padding: 12px; gap: 8px; }
/* Clips and stills fill the frame; a clip's badge names its sound. A clip
   card keeps the clip's own 9:16 frame so its text panel stays in view,
   and its badge sits at the top, clear of the panel. */
.demo-clip video, .demo-media img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--surface-overlay); }
.examples .demo-clip { aspect-ratio: 9 / 16; }
.examples .demo-clip .demo-play { top: 8px; bottom: auto; }
.demo-large-clip { background: var(--surface-canvas); }
.demo-large-clip video, .demo-large img { display: block; width: 100%; height: 100%; object-fit: contain; }
.examples .demos .meta, .examples .demos-note { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; margin: 8px 0 0; }
/* Posts below the desk run in two columns on wide screens. */
.posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
@media (max-width: 960px) { .posts { grid-template-columns: minmax(0, 1fr); } }
.posts > .card { margin: 0; min-width: 0; }
.library-pointer { margin: 8px 0 24px; }
/* The resolved brief (improve-my-idea, 2026-09-06): references as chips,
   ambiguous slots as dropdowns, missing slots as a note. */
.intent-panel { display: grid; gap: 8px; margin: 8px 0 0; padding: 8px 0 0; border-top: 0.5px solid var(--hairline-color); }
.intent-heading { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; margin: 0; color: var(--text-secondary); }
.intent-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.intent-chip { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; }
.intent-chip em { font-style: normal; color: var(--text-accent); font-weight: 600; }
.intent-pick { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; display: inline-flex; align-items: center; gap: 8px; }
.intent-pick q { quotes: "“" "”"; color: var(--text-secondary); }
.intent-panel select { width: auto; min-height: 32px; padding: 0 8px; font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; }
.intent-missing { margin: 0; }
.intent-missing q { quotes: "“" "”"; }
/* Proposed offerings (improve-my-idea ITEM 14, 2026-09-07): one row per
   proposal. Name, description, price, and its two decisions. */
.proposal-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 0; border-top: 0.5px solid var(--hairline-color); }
.proposal-row:first-of-type { border-top: 0; }
.proposal-body { flex: 1 1 16rem; min-width: 0; display: grid; gap: 4px; }
.proposal-name { margin: 0; }
.proposal-price { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; color: var(--text-secondary); }
.proposal-actions { display: flex; gap: 8px; }
.proposal-actions form { margin: 0; }
.proposal-approved { margin: 8px 0 0; }
.composer { padding: 0; overflow: visible; }
.composer-head { padding: 12px 16px 0; }
/* Owner direction 2026-09-06 ("too big"): the composer steps down one
   size — title-size greeting, tighter tiles and chips, a shorter box. */
.composer-title { font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em; font-weight: 700; margin: 0; text-wrap: balance; }
.composer-name { color: var(--text-accent); }
.composer-lede { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; color: var(--text-secondary); margin: 0 0 4px; }
.composer-status { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; color: var(--text-secondary); margin: 0 0 8px; display: inline-flex; align-items: center; gap: 8px; }
.composer-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-secondary); }
.composer-status .dot[data-state="ready"] { background: var(--fill-accent); }
.composer-form { padding: 0 16px; }
.composer .creation-grid legend { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; margin: 0 0 4px; }
/* The format switch (owner direction 2026-09-25): one segmented control,
   glyph and name per format, the picked one raised. The blurb stays in the
   markup for assistive tech and the phone layout. */
.composer .creation-grid {
  position: relative; display: inline-flex; grid-template-columns: none; gap: 4px; margin: 20px 0 12px;
  padding: 4px; border-radius: 12px; background: var(--veil-neutral); border: 0.5px solid var(--hairline-color);
}
/* The legend sits above the control, not on its border (a flex fieldset
   paints its legend over the frame). */
.composer .creation-grid legend { position: absolute; left: 0; top: calc(-1 * 20px); margin: 0; padding: 0; white-space: nowrap; }
.composer .creation-card .creation-card-body {
  display: flex; flex-direction: row; align-items: center; gap: 8px; text-align: left;
  padding: 8px 12px; min-height: 40px; border-radius: 8px;
  background: transparent; border: 1px solid transparent;
}
.composer .creation-card input:checked + .creation-card-body {
  background: var(--surface-overlay); border-color: var(--hairline-strong); box-shadow: var(--shadow-raised);
}
.composer .creation-card-icon { width: 20px; height: 20px; flex: none; }
.composer .creation-card strong { font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em; font-weight: 600; flex: none; }
.composer .creation-card small { display: none; }
@media (max-width: 720px) {
  .composer .creation-grid { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .composer .creation-card small { display: block; font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; color: var(--text-secondary); white-space: normal; }
}
.composer-box {
  position: relative;
  border: 1px solid var(--hairline-strong);
  border-radius: 20px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-raised);
  padding: 8px 12px;
  transition: border-color 150ms ease;
}
.composer-box:focus-within { border-color: var(--fill-accent); box-shadow: 0 0 0 4px var(--veil-accent); }
.composer-box > label { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; color: var(--text-secondary); display: block; margin: 0; }
.composer-box textarea {
  font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em;
  width: 100%;
  min-height: 72px;
  /* A prefilled example prompt is many lines: the box grows to its content. */
  field-sizing: content;
  max-height: 60vh;
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 4px 0;
  resize: vertical;
}
.composer-box textarea:focus { outline: none; }
/* The option rail under the idea: every option, always visible, as
   "Label: value" chips; a chip the picked format does not use dims and
   goes inert rather than disappearing, so the whole set stays legible. */
.composer-tools {
  display: grid; gap: 4px;
  margin: 4px 0 0; padding: 8px 0 0;
  border-top: 0.5px solid var(--hairline-color);
}
/* One line on a desk (the seven chips measure to fit at 1280 and 1600); the
   chip panels are overlays, so the row must never clip — it wraps on narrow
   screens instead of scrolling. */
.tool-row { display: flex; flex-wrap: nowrap; gap: 4px; min-width: 0; overflow: visible; }
/* The rail wraps inside the 960px measure (2026-09-08): the chips flow to a
   second line rather than spilling past the box. */
.tool-row { flex-wrap: wrap; }
/* Every chip on the same baseline: the .idea-extra helper's top margin
   does not apply inside the rail. */
.tool-row > .tool, .tool-row > .tool.idea-extra { flex: none; margin: 0; }
.tool-row { align-items: center; }
.tool { position: relative; }
.tool.is-off > .tool-chip { opacity: 0.4; }
.tool.is-off { pointer-events: none; }
.chip.is-off { opacity: 0.4; pointer-events: none; }
.length-group { margin: 12px 0 8px; }
.tool-length .chip small { color: var(--text-secondary); }
.tool-chip {
  font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  min-height: 32px; padding: 0 12px;
  border-radius: 20px;
  border: 0.5px solid var(--hairline-color);
  background: var(--surface-raised);
  color: var(--text-primary);
  cursor: pointer; list-style: none; text-decoration: none;
  transition: background-color 150ms ease;
}
.tool-chip::-webkit-details-marker { display: none; }
.tool-chip .icon { width: 12px; height: 12px; color: var(--text-secondary); }
.tool-chip em { font-style: normal; color: var(--text-accent); font-weight: 600; }
.tool[open] > .tool-chip, .tool-chip:hover { background: var(--veil-neutral); }
.tool-chip:focus-visible { outline: 2px solid var(--fill-accent); outline-offset: 2px; }
.tool-panel {
  position: absolute; z-index: 20; top: calc(100% + 8px); left: 0;
  width: max-content; min-width: 280px; max-width: min(440px, 88vw);
  background: var(--surface-overlay);
  box-shadow: var(--shadow-overlay);
  border: 0.5px solid var(--hairline-color);
  border-radius: 12px;
  padding: 16px;
}
.tool-panel .chip-row { margin: 0; }
.tool-panel .idea-extra { margin: 12px 0 0; }
.tool-panel .idea-extra:first-child { margin: 0; }
.tool-panel input[type="file"] { width: 100%; }
.tool-facts dl { margin: 0; display: grid; gap: 8px; }
.tool-facts dt { font-weight: 600; }
.tool-facts dd { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; color: var(--text-secondary); margin: 0; }
.tool-facts .tool-plan { margin: 12px 0 0; }
.composer-actions { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.composer-actions button { white-space: nowrap; }
.composer-actions .composer-reset { margin-right: auto; }
.composer-actions button { width: auto; }
.composer-send { display: inline-flex; align-items: center; gap: 8px; }
.composer-send .icon { width: 16px; height: 16px; }
.composer .intent-confirm { margin: 8px 0 0; font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; }
.icon { display: block; flex: none; }
/* The demo gallery. */
.demos-title { font-family: var(--font-display); font-size: var(--type-title-size); line-height: var(--type-title-lh); letter-spacing: -0.009428571428571427em; font-weight: 600; margin: 24px 0 12px; padding: 0 24px; }
.demo-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 24px; }
.demo-tab {
  font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em;
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 4px 0 12px;
  border-radius: 20px; border: 0.5px solid var(--hairline-color);
  background: var(--surface-raised); color: var(--text-primary); cursor: pointer;
}
.demo-tab input { position: absolute; opacity: 0; }
.demo-tab:has(input:checked) { background: var(--surface-overlay); border-color: var(--text-secondary); color: var(--text-primary); font-weight: 600; }
.demo-count {
  font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; min-width: 24px; height: 24px; padding: 0 8px;
  display: inline-grid; place-items: center; border-radius: 12px;
  background: var(--veil-neutral); color: var(--text-secondary);
}
.demo-tab:has(input:checked) .demo-count { color: var(--text-primary); }
.demo-grid {
  list-style: none; margin: 12px 0 0; padding: 0 24px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;
}
/* A tile is a button that opens its preview; the prefill stays a link. */
.demo-open {
  display: grid; gap: 4px; width: 100%; padding: 0; margin: 0;
  border: none; background: none; color: var(--text-primary); text-align: left; cursor: pointer;
  font: inherit; min-height: 44px;
}
.demo-open:hover .demo-media { border-color: var(--fill-accent); }
.demo-open:focus-visible { outline: 4px solid var(--fill-accent); outline-offset: 4px; border-radius: 12px; }
.demo-dialog {
  border: 0.5px solid var(--hairline-color); border-radius: 20px; padding: 0;
  width: min(880px, 92vw); max-height: 90vh;
  background: var(--surface-overlay); color: var(--text-primary);
  box-shadow: var(--shadow-overlay);
}
.demo-dialog::backdrop { background: color-mix(in srgb, var(--surface-canvas) 72%, transparent); }
.demo-dialog-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px; padding: 24px; align-items: start; }
@media (max-width: 720px) { .demo-dialog-body { grid-template-columns: minmax(0, 1fr); } }
.demo-large { display: block; position: relative; border-radius: 12px; overflow: hidden; border: 0.5px solid var(--hairline-color); background: var(--surface-raised); aspect-ratio: 4 / 5; }
.demo-large svg { display: block; width: 100%; height: auto; }
.demo-large-reel .demo-large-slide { display: block; position: absolute; inset: 0; opacity: 0; animation: demo-reel 12s linear infinite; }
.demo-large-reel .demo-large-slide:nth-child(1) { position: static; opacity: 1; animation: none; }
.demo-large-reel .demo-large-slide:nth-child(2) { animation-delay: 3s; }
.demo-large-reel .demo-large-slide:nth-child(3) { animation-delay: 6s; }
.demo-large-reel .demo-large-slide:nth-child(4) { animation-delay: 9s; }
.demo-large-glyph { display: grid; place-items: center; align-content: center; gap: 12px; padding: 24px; text-align: center; color: var(--text-secondary); }
.demo-large-glyph .icon { width: 48px; height: 48px; color: var(--text-accent); }
.demo-large-glyph small { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; color: var(--text-secondary); }
.demo-dialog-text h3 { font-family: var(--font-display); font-size: var(--type-title-size); line-height: var(--type-title-lh); letter-spacing: -0.009428571428571427em; font-weight: 600; margin: 4px 0 8px; }
.demo-dialog-text p { color: var(--text-secondary); }
.demo-prompt {
  font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; white-space: pre-wrap; margin: 8px 0 0;
  padding: 12px; border-radius: 12px; border: 0.5px solid var(--hairline-color);
  background: var(--veil-neutral); color: var(--text-primary); max-height: 40vh; overflow: auto;
}
.demo-dialog-actions { display: flex; gap: 8px; align-items: center; margin: 16px 0 0; }
.demo-dialog-actions form { margin: 0; }
.demo-dialog-actions button, .demo-dialog-actions .button { width: auto; }
@media (prefers-reduced-motion: reduce) { .demo-large-reel .demo-large-slide { animation: none; } }
.demo-media {
  display: block; position: relative; aspect-ratio: 4 / 5;
  border-radius: 12px; overflow: hidden; border: 0.5px solid var(--hairline-color);
  background: var(--surface-overlay);
  transition: border-color 150ms ease;
}
.demo-media svg { display: block; width: 100%; height: auto; }
/* Slideshow example tiles PLAY: four real slides on a 12 s loop, 3 s each,
   crossfading — no script. The headline slide is the still base; the three
   overlays fade in and out in turn. Reduced motion shows the base alone. */
.demo-reel .demo-slide { display: block; position: absolute; inset: 0; opacity: 0; animation: demo-reel 12s linear infinite; }
.demo-reel .demo-slide:nth-child(1) { position: static; opacity: 1; animation: none; }
.demo-reel .demo-slide:nth-child(2) { animation-delay: 3s; }
.demo-reel .demo-slide:nth-child(3) { animation-delay: 6s; }
.demo-reel .demo-slide:nth-child(4) { animation-delay: 9s; }
@keyframes demo-reel { 0% { opacity: 0; } 4% { opacity: 1; } 25% { opacity: 1; } 29% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .demo-reel .demo-slide { animation: none; } }
.demo-glyph {
  display: grid; place-items: center; align-content: center; gap: 8px;
  padding: 12px; text-align: center; color: var(--text-secondary);
  font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em;
}
.demo-glyph .icon { width: 32px; height: 32px; color: var(--text-accent); }
.demo-play {
  position: absolute; left: 8px; bottom: 8px; z-index: 1;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px 4px 4px;
  border-radius: 20px; background: var(--fill-accent); color: var(--fill-accent-label);
  font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; font-weight: 600; line-height: 1;
}
.demo-play .icon { width: 16px; height: 16px; }
.demo-kind { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; color: var(--text-accent); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; }
.demo strong { font-weight: 600; }
.demo-idea { font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.demo-use { font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em; color: var(--text-accent); font-weight: 600; }
.demo-note { padding: 12px 24px 24px; margin: 0; }
/* Filter tabs: radio + :has(), no script. */
.demos:has(input[name="demoFilter"][value="kind-image"]:checked) .demo:not([data-kind="image"]) { display: none; }
.demos:has(input[name="demoFilter"][value="kind-video"]:checked) .demo:not([data-kind="video"]) { display: none; }
.demos:has(input[name="demoFilter"][value="kind-slideshow"]:checked) .demo:not([data-kind="slideshow"]) { display: none; }
.demos:has(input[name="demoFilter"][value="kind-photo"]:checked) .demo:not([data-kind="photo"]) { display: none; }


/* ==== Spec 57: the studio ==== */
body.studio { -webkit-font-smoothing: antialiased; }
body.studio a:focus-visible, body.studio button:focus-visible, body.studio input:focus-visible,
body.studio select:focus-visible, body.studio textarea:focus-visible, body.studio summary:focus-visible,
body.studio label:has(> input:focus-visible) { outline: 2px solid var(--text-accent); outline-offset: 2px; }
body.studio h1 { font-weight: 600; letter-spacing: -0.01em; margin: 0 0 24px; text-wrap: balance; }
body.studio h2 { font-weight: 600; }
body.studio h3 { font-family: var(--font-ui); font-size: var(--type-item-size); line-height: var(--type-item-lh); font-weight: 600; margin: 0 0 8px; }
body.studio .lede, body.studio .meta { color: var(--text-secondary); }

/* ---- The shell: a 212 px rail, the work beside it up to 1280 px. */
body.with-rail { padding-left: 212px; }
body.with-rail main { max-width: calc(1280px + 64px); margin: 0 auto; padding: 32px 32px 64px; }
body.studio .page-measure { max-width: none; }
body.with-rail > .banner { max-width: 1280px; width: calc(100% - 64px); margin: 20px auto 0; }
body.studio header.site.studio-top { display: none; }
.rail {
  position: fixed; top: 0; left: 0; bottom: 0; width: 212px; z-index: 20;
  display: flex; flex-direction: column; gap: 20px;
  padding: 20px 12px 16px;
  background: var(--surface-rail); border-right: 1px solid var(--line); overflow-y: auto;
}
.rail-top { display: grid; gap: 16px; }
.rail-mark {
  display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 8px;
  font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--text-primary); text-decoration: none;
}
.rail-head { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rail .brand-menu { position: relative; }
.brand-summary { display: grid; gap: 4px; padding: 8px; border-radius: 8px; cursor: pointer; list-style: none; min-width: 0; }
.brand-summary::-webkit-details-marker { display: none; }
.brand-summary > span { font-family: var(--font-display); font-size: var(--type-body-size); line-height: 1.25; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-summary .brand-plan { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; color: var(--text-secondary); }
.brand-summary:hover, .brand-menu[open] > .brand-summary { background: var(--veil-neutral); }
.brand-panel { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; width: 240px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 12px; padding: 4px; box-shadow: var(--shadow-overlay); display: grid; gap: 4px; }
.brand-panel-title { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; color: var(--text-secondary); margin: 0; padding: 8px 12px 4px; }
.brand-row { margin: 0; display: block; }
.brand-current, body.studio button.brand-switch, .brand-add { display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; min-height: 40px; padding: 0 12px; margin: 0; border: none; border-radius: 8px; background: none; color: var(--text-primary); font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; white-space: normal; }
.brand-current { font-weight: 600; cursor: default; }
.brand-current::after { content: "Current"; margin-left: auto; font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; color: var(--text-secondary); font-weight: 500; }
button.brand-switch:hover, .brand-add:hover { background: var(--veil-neutral); }
.brand-add { border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; margin-top: 4px; }
.rail .studio-switch { display: grid; grid-template-columns: 1fr 1fr; }
.rail-group { display: grid; gap: 4px; }
.rail-item {
  display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px;
  border-radius: 8px; color: var(--text-secondary); font-weight: 500; text-decoration: none;
  white-space: nowrap; transition: color 150ms ease, background-color 150ms ease;
}
.rail-item::before { content: ""; width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; }
.rail-item:hover { color: var(--text-primary); background: var(--veil-neutral); }
.rail-item[aria-current="page"] { color: var(--text-primary); background: var(--surface-overlay); font-weight: 600; }
.rail-item[data-count]::after {
  content: attr(data-count); margin-left: auto; min-width: 20px; height: 20px; padding: 0 8px;
  border-radius: 999px; background: var(--fill-accent); color: var(--fill-accent-label);
  font-family: var(--font-ui); font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
}
.rail-item[data-icon="today"], .menu-item[data-icon="today"] { --glyph: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 3.5v2.5M12 18v2.5M3.5 12H6M18 12h2.5M6 6l1.8 1.8M16.2 16.2 18 18M6 18l1.8-1.8M16.2 7.8 18 6'/%3E%3C/svg%3E"); }
.rail-item[data-icon="plus"], .menu-item[data-icon="plus"] { --glyph: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.rail-item[data-icon="calendar"], .menu-item[data-icon="calendar"] { --glyph: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='3'/%3E%3Cpath d='M3.5 9.5h17M8 3v4M16 3v4'/%3E%3Crect x='12.5' y='12.5' width='4' height='3.5' rx='0.8'/%3E%3C/svg%3E"); }
.rail-item[data-icon="grid"], .menu-item[data-icon="grid"] { --glyph: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='9' rx='1.5'/%3E%3Crect x='13' y='4' width='7' height='6' rx='1.5'/%3E%3Crect x='13' y='12' width='7' height='8' rx='1.5'/%3E%3Crect x='4' y='15' width='7' height='5' rx='1.5'/%3E%3C/svg%3E"); }
.rail-item[data-icon="chart"], .menu-item[data-icon="chart"] { --glyph: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5h16'/%3E%3Crect x='6' y='11' width='3' height='6.5' rx='0.8'/%3E%3Crect x='10.5' y='6.5' width='3' height='11' rx='0.8'/%3E%3Crect x='15' y='9' width='3' height='8.5' rx='0.8'/%3E%3C/svg%3E"); }
.rail-item[data-icon="palette"], .menu-item[data-icon="palette"] { --glyph: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5a8.5 8.5 0 1 0 0 17c1.4 0 2-.9 2-1.8 0-.9-.7-1.4-.7-2.3 0-.9.7-1.6 1.6-1.6h1.7a3.9 3.9 0 0 0 3.9-3.9A7.7 7.7 0 0 0 12 3.5z'/%3E%3Ccircle cx='8' cy='10.5' r='1.1'/%3E%3Ccircle cx='11.5' cy='7.5' r='1.1'/%3E%3Ccircle cx='16' cy='9' r='1.1'/%3E%3C/svg%3E"); }
.rail-item[data-icon="plug"], .menu-item[data-icon="plug"] { --glyph: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3.5v4M15 3.5v4'/%3E%3Cpath d='M6.5 7.5h11v3a5.5 5.5 0 0 1-11 0z'/%3E%3Cpath d='M12 16v4.5'/%3E%3C/svg%3E"); }
.rail-item[data-icon="home"], .menu-item[data-icon="home"] { --glyph: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.5 12 4.5l8 7'/%3E%3Cpath d='M6 10v9.5h12V10'/%3E%3Cpath d='M10 19.5v-5h4v5'/%3E%3C/svg%3E"); }
.rail-item[data-icon="play"], .menu-item[data-icon="play"] { --glyph: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5.5v13l10-6.5z' fill='currentColor' stroke='none'/%3E%3C/svg%3E"); }
.rail-item[data-icon="people"], .menu-item[data-icon="people"] { --glyph: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='3.2'/%3E%3Cpath d='M3.5 19c.6-3 2.8-4.6 5.5-4.6s4.9 1.6 5.5 4.6M15.5 6.2a3 3 0 0 1 0 5.6M17.5 14.8c1.7.6 2.7 2 3 4.2'/%3E%3C/svg%3E"); }
.rail-item[data-icon="send"], .menu-item[data-icon="send"] { --glyph: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4 4 10.5l7 2.5 2.5 7z'/%3E%3Cpath d='M20 4 11 13'/%3E%3C/svg%3E"); }
.rail-item[data-icon="help"], .menu-item[data-icon="help"] { --glyph: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M9.6 9.6a2.5 2.5 0 1 1 3.6 2.3c-.8.5-1.2 1-1.2 1.9'/%3E%3Cpath d='M12 17.2h.01'/%3E%3C/svg%3E"); }
.rail-item[data-icon="chat"], .menu-item[data-icon="chat"] { --glyph: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5a2.5 2.5 0 0 1 2.5-2.5h11A2.5 2.5 0 0 1 20 6.5v7a2.5 2.5 0 0 1-2.5 2.5H10l-4.5 3.5V16H6.5A2.5 2.5 0 0 1 4 13.5z'/%3E%3C/svg%3E"); }
.rail-item[data-icon="crown"], .menu-item[data-icon="crown"] { --glyph: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17.5h16'/%3E%3Cpath d='m4.5 14.5-1-7 4.5 3 4-5.5 4 5.5 4.5-3-1 7z'/%3E%3C/svg%3E"); }
.rail-item[data-icon="gear"], .menu-item[data-icon="gear"] { --glyph: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3.5v2.2M12 18.3v2.2M3.5 12h2.2M18.3 12h2.2M6 6l1.6 1.6M16.4 16.4 18 18M6 18l1.6-1.6M16.4 7.6 18 6'/%3E%3C/svg%3E"); }
.rail-item[data-icon="bolt"], .menu-item[data-icon="bolt"] { --glyph: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3.5 5.5 13.5H12l-1 7 7.5-10H12z'/%3E%3C/svg%3E"); }
.rail-item[data-icon="archive"], .menu-item[data-icon="archive"] { --glyph: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='5' rx='1.5'/%3E%3Cpath d='M5 9.5v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-8'/%3E%3Cpath d='M10 13.5h4'/%3E%3C/svg%3E"); }
.rail-item[data-icon="folder"], .menu-item[data-icon="folder"] { --glyph: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5a2 2 0 0 1 2-2h4l2 2h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }
.rail-item[data-icon="spark"], .menu-item[data-icon="spark"] { --glyph: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v4M12 16.5v4M3.5 12h4M16.5 12h4'/%3E%3Cpath d='M12 8.5 13.6 10.4 15.5 12 13.6 13.6 12 15.5 10.4 13.6 8.5 12 10.4 10.4z'/%3E%3C/svg%3E"); }
.rail-spacer { flex: 1 1 auto; }
.rail-foot { display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.meter-link { display: grid; gap: 8px; padding: 4px 8px; font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; color: var(--text-secondary); text-decoration: none; border-radius: 8px; }
.meter-link:hover { background: var(--veil-neutral); }
.meter-row { display: flex; justify-content: space-between; gap: 8px; }
.meter-row b { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.meter-row .rail-badge { font: inherit; color: var(--text-primary); }
.allow-track { display: block; height: 4px; border-radius: 999px; background: var(--surface-overlay); overflow: hidden; }
.allow-value { display: block; height: 100%; border-radius: 999px; background: var(--text-primary); }
.account-menu { position: relative; }
.account-summary {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 8px;
  border-radius: 8px; cursor: pointer; list-style: none; color: var(--text-secondary); font-weight: 500;
}
.account-summary::-webkit-details-marker { display: none; }
.account-summary:hover, .account-menu[open] > .account-summary { background: var(--veil-neutral); color: var(--text-primary); }
.rail-avatar {
  width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-overlay); color: var(--text-primary); font-family: var(--font-ui); font-size: 12px; font-weight: 700;
}
.account-panel { position: absolute; z-index: 30; bottom: calc(100% + 8px); left: 0; width: 256px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 12px; padding: 4px; box-shadow: var(--shadow-overlay); display: grid; gap: 4px; }
.account-panel .who { display: block; font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; color: var(--text-secondary); padding: 8px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-item { display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; min-height: 40px; padding: 0 12px; margin: 0; border: none; border-radius: 8px; background: none; color: var(--text-primary); font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; white-space: normal; }
.menu-item::before { content: ""; width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; }
.menu-item.rail-account::before { display: none; }
.menu-item:hover { background: var(--veil-neutral); }
.menu-item[aria-current="page"] { background: var(--veil-neutral); font-weight: 600; }
.account-panel .signout-form { margin: 0; padding-top: 4px; border-top: 1px solid var(--line); }
body.studio .account-panel button.signout { display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; min-height: 40px; padding: 0 12px; margin: 0; border: none; border-radius: 8px; background: none; color: var(--text-primary); font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; white-space: normal; }
.account-panel button.signout:hover { background: var(--veil-neutral); }
.phone-only { display: none; }

/* ---- The page head: the title, one line under it, the page's actions. */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin: 0 0 32px; }
body.studio .page-head h1 { margin: 0; }
.page-sub { margin: 4px 0 0; color: var(--text-secondary); }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ---- Buttons: yellow is the one next step; the rest are quiet. */
body.studio button, body.studio .button { min-height: 40px; padding: 8px 16px; border-radius: 8px; font-family: var(--font-ui); font-size: 14px; line-height: 1.2; letter-spacing: 0; }
body.studio button.quiet, body.studio .button.quiet { background: transparent; color: var(--text-primary); border: 1px solid var(--line); font-weight: 600; }
body.studio button.quiet:hover, body.studio .button.quiet:hover { background: var(--veil-neutral); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 8px;
  font-family: var(--font-ui); font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0;
  text-decoration: none; white-space: nowrap; cursor: pointer; list-style: none;
  transition: background-color 150ms ease, opacity 150ms ease;
}
.btn::-webkit-details-marker { display: none; }
.btn.primary { background: var(--fill-accent); color: var(--fill-accent-label); }
.btn.primary:hover { opacity: 0.92; }
.btn.quiet { background: transparent; color: var(--text-primary); border-color: var(--line); }
.btn.quiet:hover, details[open] > .btn.quiet { background: var(--veil-neutral); }
.btn.small { min-height: 32px; padding: 0 12px; font-size: 13px; }
body.studio .button.small, body.studio button.small { min-height: 32px; padding: 4px 12px; font-size: 13px; }
.btn.danger { background: transparent; color: var(--text-problem); border-color: var(--line); }

/* ---- More: the rarer actions of one item, destructive last. */
.more { position: relative; }
.more > summary { list-style: none; }
.more > summary::-webkit-details-marker { display: none; }
.more-menu { position: absolute; z-index: 25; top: calc(100% + 8px); left: 0; min-width: 232px; width: max-content; max-width: min(360px, calc(100vw - 32px)); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 12px; padding: 4px; box-shadow: var(--shadow-overlay); display: grid; gap: 4px; }
.more-menu form { margin: 0; display: block; }
body.studio .more-menu button, body.studio .more-menu a, body.studio .more-menu details > summary { display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; min-height: 40px; padding: 0 12px; margin: 0; border: none; border-radius: 8px; background: none; color: var(--text-primary); font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: -0.00419047619047619em; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; white-space: normal; }
body.studio .more-menu button:hover, body.studio .more-menu a:hover, body.studio .more-menu details > summary:hover { background: var(--veil-neutral); }
.more-menu details { margin: 0; }
.more-menu details > summary { list-style: none; }
.more-menu details > summary::-webkit-details-marker { display: none; }
.more-menu details[open] > summary { font-weight: 600; }
.more-menu details form { display: grid; gap: 8px; padding: 4px 12px 12px; }
.more-menu details form label { margin: 0; }
body.studio .more-menu details form button { justify-content: center; border: 1px solid var(--line); font-weight: 600; }
.more-menu .more-danger { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
body.studio .more-menu .more-danger button { color: var(--text-problem); }
.more-menu .meta { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; margin: 0; }

/* ---- Status: a dot and a plain line. */
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text-secondary); flex: none; }
.status-dot[data-tone="turn"] { background: var(--fill-accent); }
.status-dot[data-tone="done"] { background: var(--fill-done); }
.status-dot[data-tone="problem"] { background: var(--fill-problem); }
.status-dot[data-tone="progress"] { background: var(--fill-progress); }
.status-dot[data-tone="planned"] { background: transparent; border: 1px dashed var(--text-secondary); }
.status-line { display: block; margin: 0; font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.status-line > .status-dot { vertical-align: 1px; margin-right: 8px; }
.status-line[data-tone="problem"] { color: var(--text-problem); }

/* ---- Rows, groups, panels, segmented controls, the figures band. */
.rows { display: grid; margin: 0; padding: 0; list-style: none; }
.rows > * { margin: 0; padding: 16px 0; border-top: 1px solid var(--line); }
.group { display: grid; gap: 0; margin: 0 0 32px; min-width: 0; }
.group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 12px; }
.group-head h2, .group-head h3 { font-family: var(--font-ui); font-size: var(--type-item-size); line-height: var(--type-item-lh); letter-spacing: 0; font-weight: 600; margin: 0; }
.group-head .count { color: var(--text-secondary); font-size: 14px; }
.panel { background: var(--surface-raised); border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; }
.seg, .studio-switch { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 0; background: var(--surface-canvas); border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.rail .studio-switch, .studio-top .studio-switch { background: var(--surface-raised); }
.seg > a, .seg > label, .studio-switch > a {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 32px; padding: 0 12px; margin: 0; border-radius: 8px;
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; line-height: 1; color: var(--text-secondary);
  text-decoration: none; white-space: nowrap; cursor: pointer; transition: color 150ms ease, background-color 150ms ease;
}
header.site nav .studio-switch > a { min-height: 32px; min-width: 0; padding: 0 12px; border-radius: 8px; font-weight: 600; }
.seg > a:hover, .seg > label:hover, .studio-switch > a:hover { color: var(--text-primary); }
.seg > a[aria-current="true"], .seg > a[aria-current="page"], .seg > label:has(> input:checked), .studio-switch > a[aria-current="true"] { background: var(--surface-overlay); color: var(--text-primary); }
.seg > label > input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.seg > label:has(> input:disabled) { opacity: 0.45; cursor: default; }
.seg > label small { font-size: 12px; font-weight: 500; color: var(--text-faint); }
.seg.big > a, .seg.big > label { min-height: 36px; padding: 0 16px; font-size: 14px; }
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 12px; }
.figures > div { display: grid; gap: 4px; align-content: start; padding: 16px 20px; border-left: 1px solid var(--line); min-width: 0; }
.figures > div:first-child { border-left: 0; }
.figures dt { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; color: var(--text-secondary); }
.figures dd { margin: 0; font-family: var(--font-display); font-size: var(--type-largeTitle-size); line-height: var(--type-largeTitle-lh); font-weight: 600; font-variant-numeric: tabular-nums; }
.figures small { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; color: var(--text-secondary); }
.work-side { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.work-side > * { min-width: 0; }
.kv { display: grid; margin: 0; }
.kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; }
.kv dt { color: var(--text-secondary); }
.kv dd { margin: 0; font-weight: 600; text-align: right; }

/* ---- Media first: a post at its real shape; the planned slot; being made. */
.thumb { position: relative; display: block; margin: 0; border-radius: 12px; overflow: hidden; background: var(--surface-rail); align-self: start; }
.thumb img, .thumb video, .thumb .post-image, .thumb .post-video {
  display: block; width: 100%; height: auto; max-width: none; max-height: none; margin: 0; border-radius: 0;
  aspect-ratio: auto 4 / 5; object-fit: cover; background: var(--surface-rail);
}
.thumb[data-shape="9:16"] img, .thumb[data-shape="9:16"] video { aspect-ratio: auto 9 / 16; }
.thumb[data-shape="1:1"] img, .thumb[data-shape="1:1"] video { aspect-ratio: auto 1 / 1; }
.thumb[data-shape="16:9"] img, .thumb[data-shape="16:9"] video { aspect-ratio: auto 16 / 9; }
.thumb-text { display: grid; align-content: end; aspect-ratio: 4 / 5; margin: 0; padding: 12px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text-primary); overflow: hidden; }
.thumb:has(> .thumb-text) { background: var(--surface-overlay); }
.thumb .dur { position: absolute; left: 8px; bottom: 8px; padding: 4px 8px; border-radius: 8px; background: rgba(0, 0, 0, 0.72); color: var(--text-primary); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.planned-slot { display: block; aspect-ratio: 4 / 5; border: 1px dashed var(--line); border-radius: 12px; background: transparent; }
.progress { position: relative; display: block; height: 4px; border-radius: 999px; background: var(--surface-overlay); overflow: hidden; }
.progress::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: 999px; background: var(--fill-progress); animation: progress-slide 2.4s ease-in-out infinite; }
@keyframes progress-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) { .progress::after { animation: none; width: 62%; } }

/* ---- Panels and notices inside the studio: containment that means
   something, never a card inside a card. */
body.studio .card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: 12px; box-shadow: none; padding: 20px 24px; }
body.studio .card .card { background: transparent; border: 0; border-radius: 0; padding: 0; }
body.studio .flash { background: var(--surface-raised); border: 1px solid var(--line); border-left: 3px solid var(--fill-done); border-radius: 8px; box-shadow: none; padding: 12px 16px; margin: 0 0 24px; }
body.studio .banner { background: var(--surface-raised); border: 1px solid var(--line); border-left: 3px solid var(--fill-problem); border-radius: 8px; box-shadow: none; padding: 12px 16px; }
body.studio .banner-addon { border-left-color: var(--fill-accent); }
body.studio .notice { background: var(--veil-neutral); border-radius: 8px; }
body.studio .badge-accent, body.studio .badge-strong { color: var(--text-primary); background: var(--veil-neutral); }
body.studio button.chip-action { color: var(--text-primary); border: 1px solid var(--line); }
body.studio .chip:has(input:checked), body.studio a.chip[aria-current="true"] { background: var(--surface-overlay); color: var(--text-primary); }
body.studio .clicks .top { background: var(--veil-neutral); color: var(--text-primary); }

/* ---- A post: its picture or video at its real shape, the words beside
   it, where it stands, and at most one yellow button. */
body.studio article.content-item {
  display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 24px;
  margin: 0; padding: 20px 0; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none;
}
body.studio article.content-item:not(:has(> .post-media)) { grid-template-columns: minmax(0, 1fr); }
.post-media { display: grid; gap: 8px; align-content: start; }
.post-body { display: grid; gap: 8px; align-content: start; min-width: 0; }
.post-kind { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; color: var(--text-secondary); margin: 0; }
body.studio .content-item h2.post-title { font-family: var(--font-ui); font-size: var(--type-item-size); line-height: var(--type-item-lh); letter-spacing: 0; font-weight: 600; margin: 0; }
.post-title a { color: var(--text-primary); text-decoration: none; }
.post-title a:hover { text-decoration: underline; }
body.studio .content-item .excerpt { margin: 0; max-width: 62ch; white-space: pre-line; color: var(--text-primary); font-size: var(--type-item-size); line-height: 24px; }
.content-item .hashtags { margin: 0; color: var(--text-secondary); }
body.studio .content-item .downloads { margin: 0; gap: 4px 12px; font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; }
body.studio .content-item .downloads .meta { margin: 0; }
body.studio .content-item .clicks, body.studio .content-item .review-note, body.studio .content-item .item-warning { margin: 0; }
body.studio .content-item .notice { margin: 0; }
body.studio .post-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 0; padding: 0; border: 0; }
.post-actions > form { margin: 0; }
.post-actions > details.edit-request { position: relative; flex-basis: auto; }
.post-actions > details.edit-request > summary { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 8px; color: var(--text-primary); font-size: 14px; font-weight: 600; }
.post-actions > details.edit-request > summary:hover, .post-actions > details.edit-request[open] > summary { background: var(--veil-neutral); }
.post-actions > details.edit-request > form {
  position: absolute; z-index: 25; top: calc(100% + 8px); left: 0; width: min(420px, calc(100vw - 32px));
  display: grid; gap: 8px; margin: 0; padding: 16px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 12px; padding: 4px; box-shadow: var(--shadow-overlay); display: grid; gap: 4px;
}
.post-actions > details.edit-request > form label { margin: 0; }
.post-actions .reschedule { flex: 0 1 auto; }
body.studio .post-actions .reschedule select { min-height: 40px; }

/* ---- Today: the posts waiting for you, what is being made, the week. */
.today-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.today-list > .today-card { display: block; padding: 0; border: 0; }
.today-list > .today-card:first-child > .content-item { border-top-color: var(--line); }
body.studio .today-more { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; margin: 12px 0 0; }
body.studio .pending-request {
  display: grid; gap: 8px; margin: 0; padding: 16px 0;
  background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none;
}
body.studio .pending-request h2 { font-family: var(--font-ui); font-size: var(--type-item-size); line-height: var(--type-item-lh); letter-spacing: 0; font-weight: 600; margin: 0; }
body.studio .pending-request h2::before { display: none; }
body.studio .pending-request p { margin: 0; color: var(--text-secondary); font-size: 14px; }
body.studio .pending-request.waiting .progress::after { animation: none; width: 0; }
body.studio .pending-request .post-video, body.studio .pending-request .post-image { max-width: 124px; border-radius: 12px; margin: 0; }
.group.making { margin-top: 8px; }
.today-empty p { margin: 0; color: var(--text-secondary); }
.week-list { list-style: none; margin: 0; padding: 0; display: grid; }
.week-day > a, .week-day.none {
  display: grid; grid-template-columns: 52px 36px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-primary); text-decoration: none;
}
.week-day > a:hover span { text-decoration: underline; }
.week-day b { font-size: 13px; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.week-day.is-today b { color: var(--text-primary); }
.week-thumb { display: block; width: 36px; height: 44px; }
.week-thumb .thumb { border-radius: 8px; }
.week-thumb .thumb img { width: 36px; height: 44px; aspect-ratio: auto; }
.week-thumb.planned-slot { aspect-ratio: auto; border-radius: 8px; }
.week-thumb.cal-thumb-text { border-radius: 8px; }
.week-day p { display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; }
.week-day p span { flex: none; }
.week-day p small { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: var(--text-secondary); }
.week-day p[data-tone="problem"] span { color: var(--text-problem); }
.week-day.none p { color: var(--text-faint); }

/* ---- Make: the words first in large type, every choice a segmented
   control in view, the cost stated before creating, the examples as a
   strip of pictures at their real shapes. */
body.studio [hidden] { display: none !important; }
body.studio .composer-head { padding: 0; }
.composer-head .composer-title { font-family: var(--font-ui); font-size: var(--type-item-size); line-height: var(--type-item-lh); letter-spacing: 0; font-weight: 500; color: var(--text-secondary); margin: 4px 0 0; }
.composer-head .composer-name { color: var(--text-primary); }
body.studio .composer-head .composer-lede { font-size: 14px; line-height: 20px; color: var(--text-secondary); margin: 0; }
body.studio .composer-head .plain-brand-line { margin: 4px 0 0; }
.make-desk { margin: 0 0 8px; }
.make-work { display: grid; gap: 24px; min-width: 0; }
.make-side { display: grid; gap: 16px; align-content: start; min-width: 0; }
.make-side .library-pointer { margin: 0; }
body.studio .composer.card { padding: 0; overflow: visible; }
body.studio .composer-form { padding: 0; margin: 0; }
.composer-row { padding: 16px 20px; }
.composer-row + .composer-row { border-top: 1px solid var(--line); }
body.studio .composer-for { padding: 12px 20px 0; margin: 0; }
body.studio .composer .creation-grid {
  display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 4px;
  background: var(--surface-canvas); border: 1px solid var(--line); border-radius: 12px; min-inline-size: 0;
}
body.studio .composer .creation-grid legend { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.studio .composer .creation-card .creation-card-body {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  min-height: 36px; padding: 0 16px; border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary);
}
body.studio .composer .creation-card input:checked + .creation-card-body { background: var(--surface-overlay); color: var(--text-primary); box-shadow: none; border-color: transparent; }
body.studio .composer .creation-card input:focus-visible + .creation-card-body { outline: 2px solid var(--text-accent); outline-offset: 2px; }
body.studio .composer .creation-card-icon { width: 18px; height: 18px; }
body.studio .composer .creation-card strong { font-size: 14px; font-weight: 600; }
body.studio .composer .payg-plan-line { margin: 8px 0 0; }
body.studio .composer-box { position: static; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; padding: 16px 20px; }
body.studio .composer-box:focus-within { border-color: var(--line); box-shadow: inset 0 0 0 1px var(--text-accent); }
body.studio .composer-box > label { font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; color: var(--text-secondary); margin: 0 0 8px; }
body.studio .composer-box textarea { font-size: 18px; line-height: 1.5; min-height: 118px; padding: 0; color: var(--text-primary); }
body.studio .composer-box .idea-count { font-size: 13px; color: var(--text-faint); margin: 8px 0 0; }
body.studio .composer-tools { margin: 0; border-top: 1px solid var(--line); padding: 16px 20px; display: grid; gap: 12px; }
body.studio .tool-row { display: grid; gap: 12px; }
body.studio .tool-row > .tool { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 16px; align-items: center; margin: 0; }
/* 2026-10-08: three more like the best post, under the table. */
body.studio .more-like { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 16px; }
body.studio .more-like .meta { margin: 0; flex: 1 1 320px; }
/* 2026-10-08: the less-used choices wait under "More options". */
body.studio .tool-more { border-top: 1px solid var(--line); padding-top: 12px; }
body.studio .tool-more > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; cursor: pointer; list-style: none; font-size: 14px; color: var(--text-primary); min-height: 32px; }
body.studio .tool-more > summary::-webkit-details-marker { display: none; }
body.studio .tool-more > summary::before { content: "+"; display: inline-block; width: 16px; color: var(--text-secondary); }
body.studio .tool-more[open] > summary::before { content: "\2212"; }
body.studio .tool-more-hint { font-size: 13px; color: var(--text-secondary); }
body.studio .tool-more[open] .tool-more-hint { display: none; }
body.studio .tool-more > .tool-row-more { margin-top: 12px; }
.opt-label { font-size: 14px; color: var(--text-secondary); }
.opt-body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.opt-help > summary {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 50%;
  font-size: 12px; font-weight: 700; color: var(--text-secondary); cursor: pointer; list-style: none;
}
.opt-help > summary::-webkit-details-marker { display: none; }
.opt-help[open] { flex-basis: 100%; }
.opt-help[open] > summary { color: var(--text-primary); border-color: var(--text-secondary); }
.opt-help p { margin: 8px 0 0; max-width: 70ch; font-size: 13px; line-height: 18px; }
/* 2026-10-11: a narrator or a track, heard before it is picked. */
.previews { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 16px; }
.previews li { display: flex; align-items: center; gap: 8px; }
.preview-name { flex: 0 0 auto; min-width: 9ch; font-size: 13px; line-height: 18px; color: var(--text-primary); }
.previews audio { flex: 1 1 auto; min-width: 0; height: 32px; }
body.studio .seg > label.chip { min-height: 32px; padding: 0 12px; border-radius: 8px; background: transparent; box-shadow: none; font-size: 13px; }
body.studio .seg > label.chip:has(> input:checked) { background: var(--surface-overlay); color: var(--text-primary); box-shadow: none; }
body.studio .seg > label.chip small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.studio .tool-own-video .opt-body { display: grid; gap: 8px; justify-items: start; }
body.studio .tool-photo .opt-body { display: grid; gap: 8px; justify-items: start; }
body.studio .tool-photo .idea-extra { margin: 0; }
body.studio .tool-photo label { margin: 0; font-size: 13px; color: var(--text-secondary); }
body.studio input[type="file"] { width: auto; max-width: 100%; min-height: 0; padding: 0; border: 0; background: none; font-size: 13px; color: var(--text-secondary); }
body.studio input[type="file"]::file-selector-button {
  margin-right: 12px; min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--text-primary); font: 600 13px var(--font-ui); cursor: pointer;
}
body.studio .photo-release label.consent { display: flex; gap: 8px; align-items: flex-start; }
body.studio .composer .resolved-brief, body.studio .composer .intent-panel { margin: 0; }
.composer-send-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
body.studio .composer-cost, body.studio .composer-price { margin: 0; font-size: 14px; color: var(--text-secondary); }
body.studio .composer-actions { margin: 0 0 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
body.studio .composer-actions .composer-reset { margin-right: 0; }
body.studio .composer .intent-confirm { margin: 0; padding: 0 20px 16px; font-size: 13px; }
body.studio .composer .intent-confirm label { display: flex; gap: 8px; align-items: center; margin: 0; }
body.studio .examples { margin: 40px 0 0; padding: 0; min-width: 0; }
body.studio .examples > *, body.studio .examples .demos { min-width: 0; }
body.studio .examples .demo-tabs {
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 0 0 16px;
  background: var(--surface-canvas); border: 1px solid var(--line); border-radius: 12px;
}
body.studio .examples .demo-tab { min-height: 32px; padding: 0 12px; gap: 4px; border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary); font-size: 13px; font-weight: 600; }
body.studio .examples .demo-tab:has(input:checked) { background: var(--surface-overlay); color: var(--text-primary); }
body.studio .examples .demo-count { min-width: 0; height: auto; padding: 0; background: none; color: var(--text-faint); font-weight: 500; }
body.studio .examples .demo-grid { display: flex; gap: 16px; overflow-x: auto; padding: 0 0 8px; margin: 0; }
body.studio .examples .demo { flex: none; display: grid; gap: 8px; align-content: start; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
body.studio .examples .demo:hover { transform: none; box-shadow: none; }
body.studio .examples .demo-open { width: auto; gap: 4px; padding: 0; min-height: 0; background: none; border-radius: 0; color: var(--text-primary); font-weight: 400; text-align: left; }
body.studio .examples .demo-media { height: 212px; width: auto; aspect-ratio: 4 / 5; border: 0; border-radius: 12px; }
body.studio .examples .demo-clip { aspect-ratio: 9 / 16; }
body.studio .examples .demo-media > svg, body.studio .examples .demo-media .demo-slide > svg { width: 100%; height: 100%; }
body.studio .examples .demo-kind, body.studio .examples .demo-open strong { width: 0; min-width: 100%; }
body.studio .demo-kind { text-transform: none; letter-spacing: 0; color: var(--text-secondary); font-weight: 500; font-size: 13px; }
body.studio .examples .demo-open strong { font-size: 14px; }
body.studio .examples .demo-idea { display: none; }
body.studio .examples .demo-use { min-height: 0; padding: 0; border: 0; font-size: 13px; color: var(--text-accent); }
body.studio .examples .demo-use:hover { background: none; text-decoration: underline; }
body.studio .examples .demo-play { background: rgba(0, 0, 0, 0.72); color: var(--text-primary); white-space: nowrap; max-width: calc(100% - 16px); overflow: hidden; }
body.studio .demo-note { padding: 8px 0 0; }
/* Rule 2: a picked radio or tick is neutral, never the accent. */
body.studio input[type="radio"], body.studio input[type="checkbox"] { accent-color: var(--text-primary); }
body.studio .tier { gap: 4px; }
/* Rule 11: a state never clips — a long badge wraps, a row wraps. */
body.studio .badge { white-space: normal; }
body.studio ul.connections li, body.studio ul.ad-accounts li { flex-wrap: wrap; }
/* No all-caps labels in the studio (rule 4). */
body.studio .settings-group > h2, body.studio .pane-title { text-transform: none; letter-spacing: 0; }

/* ---- Library: a sheet of pictures, filters as segmented controls, the
   chosen post in an inspector beside the sheet (below it on a phone). */
.lib-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 24px; }
fieldset.seg { min-inline-size: 0; }
.seg > label small { margin-left: 4px; font-variant-numeric: tabular-nums; }
.lib { display: grid; grid-template-columns: minmax(0, 1fr) 364px; gap: 32px; align-items: start; }
.sheet { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 24px 16px; align-items: flex-start; min-width: 0; }
.tile > a { display: grid; gap: 8px; color: var(--text-primary); text-decoration: none; font-size: 13px; }
.tile .thumb { height: 188px; }
.tile .thumb img { width: auto; height: 188px; max-width: 336px; }
.tile .thumb-making, .tile .thumb-text-only { width: 150px; }
.tile .thumb-making .planned-slot, .tile .thumb .thumb-text { height: 188px; }
.thumb-making { display: grid; gap: 8px; background: none; border-radius: 0; overflow: visible; }
.thumb-making .planned-slot { width: 100%; }
.tile .thumb .thumb-text { width: 150px; }
.tile > a:hover .thumb { outline: 1px solid var(--text-secondary); outline-offset: 3px; }
.tile-state { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.tile-when { color: var(--text-secondary); }
.inspector { position: sticky; top: 24px; display: grid; gap: 16px; padding-left: 32px; border-left: 1px solid var(--line); min-width: 0; }
body.studio .inspector > article.content-item, .inspector .library-row { display: none; }
body.studio .inspector > article.content-item:target, .inspector .library-row:target { display: grid; }
body.studio .lib:not(:has(.inspector [id^="content-"]:target)) .inspector > article.content-item:first-of-type { display: grid; }
.lib:not(:has(.inspector [id^="content-"]:target)) .inspector:not(:has(> article)) .library-row:first-child { display: grid; }
.lib:not(:has(.inspector [id^="content-"]:target)) .sheet > .tile:first-child .thumb { outline: 2px solid var(--text-primary); outline-offset: 3px; }
body.studio .inspector > article.content-item:is(:target, :first-of-type) { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 0; border-top: 0; }
.inspector .post-media .thumb[data-shape="9:16"] { max-width: 260px; }
.inspector .library-row { gap: 12px; }
.inspector .library-row .thumb { max-width: 260px; }
.inspector .library-list { margin: 0; }
.inspector .library-list > li { padding: 0; border: 0; }
.inspector .downloads { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; }
.lib-more { margin-top: 40px; }
.clip-sheet, .photo-sheet { display: flex; flex-wrap: wrap; gap: 24px 16px; }
.clip-sheet > li, .photo-sheet > li { display: grid; gap: 8px; width: 150px; padding: 0; border: 0; font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; }
.lib-empty p { margin: 0; color: var(--text-secondary); }

/* ---- Calendar: one grid of hairlines, each day its posts' pictures and
   times, autopilot's plan as dashed hollows, the chosen day beside it. */
.cal-nav { display: flex; gap: 8px; }
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.cal-grid-wrap { display: grid; gap: 16px; min-width: 0; }
.cal {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.cal-weekday { background: var(--surface-canvas); padding: 8px 12px; font-size: 13px; color: var(--text-secondary); }
.cal-day { position: relative; display: grid; gap: 8px; align-content: start; min-height: 104px; padding: 8px; background: var(--surface-canvas); min-width: 0; }
.cal-day.out { background: var(--surface-rail); }
.cal-date {
  justify-self: start; min-width: 24px; padding: 0 8px; margin-left: -4px; border-radius: 999px;
  font-size: 13px; font-weight: 600; line-height: 22px; text-align: center; color: var(--text-secondary);
  text-decoration: none; font-variant-numeric: tabular-nums;
}
a.cal-date:hover { color: var(--text-primary); background: var(--veil-neutral); }
.cal-day.today > .cal-date { background: var(--text-primary); color: var(--text-inverse); }
.cal-layout:not(:has(.cal-days > :target)) .cal-day.is-chosen { background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--text-primary); }
.cal-marks { display: grid; gap: 8px; }
.cal-mark { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 12px; color: var(--text-primary); text-decoration: none; }
.cal-mark:hover .cal-mark-time { text-decoration: underline; }
.cal-thumb { display: block; width: 22px; height: 28px; border-radius: 24%; overflow: hidden; background: var(--surface-rail); }
.cal-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cal-thumb-text { background: var(--surface-overlay); }
.cal-thumb.planned-slot { aspect-ratio: auto; border-color: var(--text-faint); background: none; }
.cal-mark-time { display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }
.cal-more { font-size: 12px; color: var(--text-secondary); }
.cal-add {
  position: absolute; right: 8px; top: 8px; width: 24px; height: 24px;
  display: grid; place-items: center; border-radius: 50%; text-decoration: none;
  color: var(--text-secondary); background: var(--veil-neutral); opacity: 0; transition: opacity 150ms ease;
}
.cal-day:hover .cal-add, .cal-add:focus-visible { opacity: 1; }
.cal-day.drop { outline: 2px solid var(--text-primary); outline-offset: -2px; }
.cal-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--text-secondary); }
.cal-legend li { display: inline-flex; align-items: center; gap: 8px; }
body.studio .cal-key-date { color: var(--text-primary); font-size: 12px; }
.cal-days > .cal-dayview { display: none; position: sticky; top: 24px; }
.cal-days > .cal-dayview:target { display: block; }
.cal-layout:not(:has(.cal-days > :target)) .cal-days > .is-chosen { display: block; }
.dayposts { list-style: none; margin: 0; padding: 0; display: grid; }
.daypost { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; }
.daypost .cal-thumb { width: 52px; height: 65px; border-radius: 8px; }
.daypost-body { display: grid; gap: 8px; align-content: start; min-width: 0; }
.daypost-body > p { margin: 0; }
body.studio .daypost .post-actions { margin: 0; }
.cal-dayview > .button { margin-top: 12px; }
.cal-move { position: relative; }
.cal-move > summary {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-primary); cursor: pointer; list-style: none;
}
.cal-move > summary::-webkit-details-marker { display: none; }
.cal-move[open] > summary, .cal-move > summary:hover { background: var(--veil-neutral); }
.cal-move form { display: grid; gap: 8px; padding: 8px 0; margin: 0; }
.cal-move label { margin: 0; font-family: var(--font-ui); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: 0em; }
.cal-week .cal-day { min-height: 320px; }
.cal-week .cal-date { font-weight: 600; }
.cal-post { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 13px; color: var(--text-primary); text-decoration: none; }
.cal-post .cal-thumb { width: 36px; height: 45px; }
.cal-chip-text { display: block; min-width: 0; }
.cal-chip-text .status-dot { margin-right: 4px; vertical-align: 1px; }
.cal-time { font-weight: 600; }
.cal-chip-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }

/* ---- Settings (part 3): sections as headed row groups, each control on
   its row, no boxes; the section list beside the work (after it in the
   source, so the phone reads the settings first). */
.settings-layout { display: grid; grid-template-columns: minmax(0, 880px) 200px; gap: 64px; justify-content: space-between; align-items: start; }
.settings-main { min-width: 0; }
.settings-index { position: sticky; top: 24px; display: grid; gap: 4px; }
.settings-index > p { margin: 0 0 8px; padding: 0 12px; font-size: 13px; color: var(--text-secondary); }
.settings-index a { display: flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 8px; font-size: 14px; color: var(--text-secondary); text-decoration: none; }
.settings-index a:hover { color: var(--text-primary); background: var(--veil-neutral); }
body.studio .settings-group { margin: 0 0 40px; scroll-margin-top: 24px; }
body.studio .settings-group > h2 { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 12px; padding: 0; }
body.studio .settings-group > .lede { margin: 0 0 16px; font-size: 15px; }
body.studio .card.group, body.studio .card.group.facts-card, body.studio .card.group.danger, body.studio .card.settings-section {
  margin: 0; padding: 0; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none;
}
body.studio .card.group.danger { margin-top: 0; }
body.studio .card.settings-section { max-width: 880px; }
body.studio .card.settings-section > p:first-child { margin: 16px 0; color: var(--text-secondary); }
body.studio .settings-section ul.plain { border-top: 1px solid var(--line); }
body.studio .settings-section ul.plain > li { padding: 4px 0; border-bottom: 1px solid var(--line); }
body.studio .settings-section ul.plain > li:last-child { border-bottom: 1px solid var(--line); }
body.studio .settings-section ul.plain label { gap: 12px; font-size: 15px; line-height: 20px; color: var(--text-primary); margin: 0; }
body.studio .settings-section ul.plain label small { font-size: 13px; color: var(--text-secondary); }
body.studio .card.group > .settings-row + .settings-row, body.studio .card.group > form.settings-row + form.settings-row,
body.studio .card.group > * + .settings-row, body.studio .card.group > .settings-row + * { border-top: 1px solid var(--line); }
body.studio .settings-row { padding: 16px 0; }
body.studio .row-label, body.studio .row-text label { font-size: var(--type-item-size); line-height: var(--type-item-lh); font-weight: 600; }
body.studio .row-support, body.studio .row-value { font-size: 14px; line-height: 20px; }
body.studio .group-foot { font-size: 14px; line-height: 20px; padding: 12px 0 0; margin: 0; border-top: 1px solid var(--line); }
body.studio .card.group > p, body.studio .card.group > form > p.meta { font-size: 14px; }
body.studio .card.group > p:first-child { margin: 16px 0; color: var(--text-secondary); }
body.studio .card.group .form-commit { margin: 16px 0; }
body.studio .row-control > a:not(.button):not(.btn), body.studio .row-control form > a:not(.button):not(.btn) {
  min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; font-weight: 600; color: var(--text-primary); text-decoration: none;
}
body.studio .row-control > a:not(.button):not(.btn):hover { background: var(--veil-neutral); }
body.studio .row-control { flex-wrap: wrap; justify-content: flex-end; }
/* Rule 2: a picked radio, tick or chip is neutral. */
body.studio .card.group .radio-row input[type="radio"], body.studio input[type="checkbox"] { accent-color: var(--text-primary); }
body.studio .card.group .radio-row { padding: 12px 0; }
body.studio .card.group .chip-row, body.studio .brand-form .chip-row {
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px;
  background: var(--surface-canvas); border: 1px solid var(--line); border-radius: 12px;
}
body.studio .card.group .chip-row .chip, body.studio .brand-form .chip-row .chip {
  height: 36px; min-height: 0; margin: 0; padding: 0 12px; border-radius: 8px; background: transparent; box-shadow: none;
  font-size: 13px; line-height: 1; font-weight: 600; color: var(--text-secondary);
}
body.studio .card.group .chip-row .chip:has(input:checked), body.studio .brand-form .chip-row .chip:has(input:checked) { background: var(--surface-overlay); color: var(--text-primary); box-shadow: none; }
body.studio .corner-card .corner-body { background: transparent; border: 1px solid var(--line); }
body.studio .corner-card input:checked + .corner-body { border-color: var(--text-primary); background: var(--surface-overlay); }
body.studio .corner-card .corner-sketch::after { background: var(--text-primary); }
body.studio .logo-cell { border: 1px solid var(--line); }
/* The destructive fold: its words red, its button quiet and red, last. */
body.studio .danger-disclosure summary { color: var(--text-problem); padding: 0; }
body.studio .danger-disclosure[open] { padding: 0 0 16px; }
body.studio .danger-disclosure form button { background: transparent; color: var(--text-problem); border: 1px solid var(--line); font-weight: 600; }
body.studio .danger-disclosure form button:hover { background: var(--veil-neutral); }
body.studio .card.group ul.plain > li { border-bottom: 0; }
body.studio .card.group ul.plain > li + li { border-top: 1px solid var(--line); }

/* ---- Channels (and Settings' channel rows): each channel a row, its
   state under its name as a dot and words that wrap, never clipped, and
   at most one action at the right. */
body.studio ul.connections, body.studio ul.ad-accounts { margin: 0; padding: 0; }
body.studio ul.connections > li, body.studio ul.ad-accounts > li {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 16px; row-gap: 4px;
  align-items: center; padding: 16px 0; margin: 0; min-height: 0; border: 0; border-top: 1px solid var(--line);
}
body.studio .card.group ul.connections > li:first-child { border-top: 0; }
body.studio :is(ul.connections, ul.ad-accounts) > li > .icon-tile { grid-column: 1; width: 32px; height: 32px; border-radius: 8px; background: var(--surface-overlay); color: var(--text-primary); }
body.studio :is(ul.connections, ul.ad-accounts) > li > strong { grid-column: 2; min-width: 0; font-size: var(--type-item-size); line-height: var(--type-item-lh); font-weight: 600; text-align: left; }
body.studio :is(ul.connections, ul.ad-accounts) > li > :is(form, a, button, .row-value, .row-control) { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; }
body.studio :is(ul.connections, ul.ad-accounts) > li:has(> .badge) > .icon-tile { grid-row: 1 / span 2; }
body.studio :is(ul.connections, ul.ad-accounts) > li:has(> .badge) > :is(form, a, button, .row-value, .row-control) { grid-row: 1 / span 2; }
body.studio :is(ul.connections, ul.ad-accounts) .badge {
  grid-column: 2; grid-row: 2; justify-self: start; display: inline-flex; align-items: baseline; gap: 8px;
  min-width: 0; height: auto; padding: 0; background: none; border: 0; border-radius: 0;
  font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-secondary); white-space: normal;
}
body.studio :is(ul.connections, ul.ad-accounts) .badge::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--text-secondary); transform: translateY(-1px);
}
body.studio :is(ul.connections, ul.ad-accounts) .badge[data-tone="done"]::before { background: var(--fill-done); }
body.studio :is(ul.connections, ul.ad-accounts) .badge[data-tone="turn"]::before { background: var(--fill-accent); }
body.studio :is(ul.connections, ul.ad-accounts) .badge[data-tone="progress"]::before { background: var(--fill-progress); }
body.studio :is(ul.connections, ul.ad-accounts) .badge[data-tone="problem"]::before { background: var(--fill-problem); }
body.studio :is(ul.connections, ul.ad-accounts) .badge[data-tone="turn"], body.studio :is(ul.connections, ul.ad-accounts) .badge[data-tone="problem"] { color: var(--text-primary); }
.channel-note { display: grid; gap: 8px; justify-items: start; margin: 0 0 32px; }
.channel-note h2 { font-family: var(--font-ui); font-size: var(--type-item-size); line-height: var(--type-item-lh); letter-spacing: 0; font-weight: 600; margin: 0; }
.channel-note p { margin: 0; max-width: 70ch; color: var(--text-secondary); font-size: 14px; line-height: 20px; }
.channel-note .btn { margin-top: 4px; }
body.studio .group > .group-copy { margin: 0 0 16px; max-width: 70ch; color: var(--text-secondary); font-size: 14px; line-height: 20px; }

/* ---- Brand: the record's screens as a segmented control, each form
   section a headed group of rows, the sample beside the form. */
body.studio .brand-flow .brand-head { margin: 0 0 32px; }
body.studio .brand-head .page-head { margin-bottom: 24px; }
body.studio .brand-head .meter { margin: 0; min-width: 240px; }
body.studio .brand-head .meter-fill { background: var(--fill-done); }
body.studio .brand-head .meter-bar { height: 4px; background: var(--surface-overlay); }
body.studio .brand-steps {
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px;
  background: var(--surface-canvas); border: 1px solid var(--line); border-radius: 12px;
}
body.studio .brand-steps li a {
  min-height: 36px; padding: 0 12px; gap: 8px; border: 0; border-radius: 8px;
  font-size: 14px; font-weight: 600; color: var(--text-secondary);
}
body.studio .brand-steps li a:hover { color: var(--text-primary); }
body.studio .brand-steps li.current a { background: var(--surface-overlay); color: var(--text-primary); border: 0; }
body.studio .brand-steps .step-n { width: 20px; height: 20px; font-size: 12px; line-height: 20px; font-weight: 700; background: var(--veil-neutral); color: var(--text-secondary); }
body.studio .brand-steps li.done .step-n { background: var(--fill-done); color: var(--text-inverse); }
body.studio .brand-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; }
body.studio .brand-screen > h2 { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 8px; }
body.studio .brand-screen > .owner-only-line { margin: 0 0 16px; }
body.studio .brand-form { display: grid; gap: 0; border-top: 1px solid var(--line); margin: 16px 0 0; padding: 0; min-inline-size: 0; }
body.studio fieldset.brand-form { border-left: 0; border-right: 0; border-bottom: 0; }
body.studio .brand-kit-screen > .brand-form { margin-top: 32px; }
body.studio .brand-kit-screen > .brand-form:first-child { margin-top: 16px; }
body.studio .brand-kit-screen > .brand-form + .brand-form { padding-top: 0; }
body.studio .brand-form .brand-field { display: grid; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--line); margin: 0; min-width: 0; }
body.studio .brand-form .brand-field > label:not(.consent), body.studio .brand-form .brand-field > .brand-field-label { color: var(--text-primary); font-size: var(--type-item-size); line-height: var(--type-item-lh); font-weight: 600; margin: 0; }
body.studio .brand-form .brand-field .meta { margin: 0; font-size: 13px; line-height: 18px; }
body.studio .brand-form .brand-field label.consent { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 14px; line-height: 20px; color: var(--text-secondary); }
body.studio .brand-form .brand-field .kit-list { margin: 0; }
body.studio .kit-examples > h3 { margin: 16px 0 4px; }
body.studio .kit-examples > .meta { font-size: 14px; }
body.studio .kit-examples .kit-example { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
body.studio .brand-done { margin: 24px 0 0; }
body.studio .brand-form .state { margin: 0; font-size: 13px; }
body.studio .brand-form .state.fixed { color: var(--text-done); }
body.studio .brand-form .form-commit { margin: 20px 0 0; }
body.studio .brand-form .form-commit button { width: auto; }
body.studio .brand-kit-screen > form + form { border-top: 1px solid var(--line); }
body.studio .brand-sample { position: sticky; top: 24px; }
body.studio .brand-sample figcaption { font-size: 13px; color: var(--text-secondary); }

/* ---- Forms on a studio page (add a brand, support): fields as rows. */
body.studio form.form-rows { display: grid; gap: 0; max-width: 720px; border-top: 1px solid var(--line); }
body.studio form.form-rows > .field-row { display: grid; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--line); margin: 0; min-width: 0; }
body.studio form.form-rows > .field-row > label, body.studio form.form-rows .field-grid .field label { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--text-primary); margin: 0; }
body.studio .field-error { color: var(--text-problem); }
body.studio .page-sub { max-width: 72ch; }
body.studio form.form-rows > .field-row .meta { margin: 0; font-size: 13px; }
body.studio form.form-rows .field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
body.studio form.form-rows .field-grid .field { display: grid; gap: 8px; min-width: 0; }
body.studio form.form-rows .field-grid .field label { font-weight: 600; margin: 0; }
body.studio form.form-rows > .form-commit { margin: 24px 0 0; }
body.studio form.form-rows > .form-commit button { width: auto; }

/* ---- Help and Support inside the app. */
.help-layout { max-width: 880px; }
body.studio .support-card .field { align-content: start; }
body.studio .support-card .field label { color: var(--text-primary); font-weight: 600; }
body.studio .help-card { background: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 48px; box-shadow: none; }
body.studio .help-card > h2 { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 12px; }
body.studio .help-pointers { gap: 0; border-top: 1px solid var(--line); }
body.studio .help-pointers li { padding: 16px 0; border-top: 0; border-bottom: 1px solid var(--line); }
body.studio .help-pointers li + li { border-top: 0; }
body.studio .help-pointers a { color: var(--text-primary); text-decoration: none; }
body.studio .help-pointers a:hover { text-decoration: underline; }
body.studio .help-faqs { gap: 0; border-top: 1px solid var(--line); }
body.studio .help-faq { padding: 0; border-bottom: 1px solid var(--line); }
body.studio .help-faq + .help-faq { border-top: 0; }
body.studio .help-faq summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 12px 0; list-style: none; font-size: var(--type-item-size); line-height: var(--type-item-lh); }
body.studio .help-faq summary::-webkit-details-marker { display: none; }
body.studio .help-faq summary::after { content: "+"; color: var(--text-secondary); font-weight: 500; }
body.studio .help-faq[open] summary::after { content: "\2013"; }
body.studio .help-faq p { margin: 0 0 16px; max-width: 72ch; }
body.studio .support-card { background: none; border: 0; border-radius: 0; padding: 24px 0 0; border-top: 1px solid var(--line); box-shadow: none; max-width: 880px; }
body.studio .plain-panel .owner-only-line { font-size: var(--type-item-size); line-height: 24px; color: var(--text-primary); max-width: 62ch; }
.plain-panel { max-width: 720px; display: grid; gap: 12px; justify-items: start; }
.plain-panel p { margin: 0; }
/* ---- The Marketing Studio (part 2): Overview, Leads, Follow-ups,
   Campaigns and both studios' Results in the same language. */
.figures:has(> :nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.figures:not(:has(> :nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.figures:not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.figures .chart.spark { width: 100%; max-width: 200px; height: 34px; margin-top: 4px; }
body.studio .chart .s0 { stroke: var(--text-accent); fill: var(--text-accent); }
body.studio .chart .s1 { stroke: var(--fill-progress); fill: var(--fill-progress); }
body.studio .chart .s2 { stroke: var(--text-secondary); fill: var(--text-secondary); }
body.studio .chart .s3 { stroke: var(--text-faint); fill: var(--text-faint); }
body.studio .chart .grid { stroke: var(--line); }
body.studio .chart .dot { stroke: var(--surface-canvas); }
body.studio .chart .ring.track { stroke: var(--surface-overlay); }
body.studio .chart .meter-track { fill: var(--surface-overlay); }
body.studio .chart .meter-fill { fill: var(--text-primary); }
body.studio .legend .swatch.s0 { background: var(--text-accent); }
body.studio .legend .swatch.s1 { background: var(--fill-progress); }
body.studio .legend .swatch.s2 { background: var(--text-secondary); }
body.studio .legend .swatch.s3 { background: var(--text-faint); }
.group-empty { margin: 0; padding: 16px 0; border-top: 1px solid var(--line); color: var(--text-secondary); font-size: 14px; }
.group-foot { margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); font-size: 14px; }
.group-foot a, .row-name:hover { color: var(--text-accent); }
.group > .group-head + .group-foot { border-top: 0; }
.group .group-head h3 { font-size: 14px; color: var(--text-secondary); font-weight: 600; }
.group > * + .group-head { margin-top: 24px; }
.group > .tier-closed { margin: 0 0 16px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.split > * { min-width: 0; }
.figures { margin-bottom: 32px; }
body.studio .figures + .tier-closed { margin: -16px 0 32px; }
body.studio .tier-closed p { margin: 0; }
body.studio .tier-closed p + p { margin-top: 8px; }
.note-panel {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px;
  margin: 0 0 24px; padding: 12px 16px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 8px; font-size: 14px;
}
.note-panel[data-tone="turn"] { border-left: 3px solid var(--fill-accent); }
.note-panel[data-tone="problem"] { border-left: 3px solid var(--fill-problem); }
.note-panel p { margin: 0; max-width: 72ch; }
.note-panel p + p { margin-top: 4px; color: var(--text-secondary); }
.note-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* The lead pipeline: one thin five-part bar, each stage's edge its colour. */
.pipe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.pipe > li { --edge: var(--line); background: var(--surface-raised); border-top: 3px solid var(--edge); min-width: 0; }
.pipe > li:first-child { border-radius: 8px 0 0 8px; }
.pipe > li:last-child { border-radius: 0 8px 8px 0; }
.pipe > li[data-tone="progress"] { --edge: var(--fill-progress); }
.pipe > li[data-tone="turn"] { --edge: var(--fill-accent); }
.pipe > li[data-tone="done"] { --edge: var(--fill-done); }
.pipe a { display: grid; padding: 12px 16px; color: var(--text-primary); text-decoration: none; }
.pipe a:hover span { color: var(--text-primary); }
.pipe b { font-family: var(--font-display); font-size: 20px; line-height: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pipe span { font-size: 13px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Leads: four working stages at full width, Lost narrow at the end; the
   column's edge follows the stage; a card has one next step and More. */
.leads-board { margin: 0 0 40px; }
.stage-switch { display: none; }
.stage-switch legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 0.55fr); gap: 16px; align-items: start; }
.board-col { --edge: var(--line); display: grid; gap: 12px; align-content: start; min-width: 0; scroll-margin-top: 24px; }
.board-col[data-tone="progress"] { --edge: var(--fill-progress); }
.board-col[data-tone="turn"] { --edge: var(--fill-accent); }
.board-col[data-tone="done"] { --edge: var(--fill-done); }
body.studio .board-col > h2 {
  display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 0 0 8px; border-bottom: 2px solid var(--edge);
  font-family: var(--font-ui); font-size: var(--type-item-size); line-height: var(--type-item-lh); letter-spacing: 0; font-weight: 600;
}
.board-col > h2 .count { font-size: 14px; font-weight: 500; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.board-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.board-empty { margin: 0; padding: 16px 12px; border: 1px dashed var(--line); border-radius: 12px; color: var(--text-faint); font-size: 14px; }
.lead-card { display: grid; gap: 8px; margin: 0; padding: 16px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 12px; font-size: 14px; min-width: 0; }
body.studio .lead-card h3 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 8px; margin: 0; font-size: 15px; line-height: 20px; }
.lead-name { min-width: 0; overflow-wrap: anywhere; }
body.studio .lead-value { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-done); font-variant-numeric: tabular-nums; }
.lead-reach { margin: 0; color: var(--text-secondary); overflow-wrap: anywhere; }
body.studio .lead-message { margin: 0; padding-left: 12px; border-left: 2px solid var(--line); font-size: 14px; line-height: 20px; }
body.studio .lead-notes { margin: 0; font-size: 13px; }
.lead-from { margin: 0; font-size: 13px; color: var(--text-secondary); }
.lead-from a { color: var(--text-accent); }
.lead-card .status-line { font-size: 13px; }
.lead-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 0; }
.lead-actions > form { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inline-value { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; font-size: 13px; color: var(--text-secondary); }
body.studio .inline-value input { width: 96px; min-height: 32px; height: 32px; padding: 4px 8px; font-size: 14px; }
.lead-actions .more > summary { min-height: 32px; padding: 0 12px; font-size: 13px; }
.note-add { position: relative; }
.note-add > summary { list-style: none; cursor: pointer; }
.note-add > summary::-webkit-details-marker { display: none; }
.lead-actions > .note-add > form {
  position: absolute; z-index: 25; top: calc(100% + 8px); left: 0; width: min(320px, calc(100vw - 32px));
  display: grid; gap: 8px; margin: 0; padding: 12px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 12px; padding: 4px; box-shadow: var(--shadow-overlay); display: grid; gap: 4px;
}
.lead-actions > .note-add > form label, .more-menu .note-add label { margin: 0; font-size: 13px; color: var(--text-secondary); }
.lead-usage { margin: 0 0 24px; font-size: 14px; color: var(--text-secondary); }
.page-head + .lead-usage, .page-head + .owner-only-line { margin-top: -16px; }
.page-head + .owner-only-line { margin-bottom: 8px; }
body.studio .owner-only-line { color: var(--text-secondary); font-size: 14px; }
/* A disclosure whose summary is a button and whose form drops below it. */
.pop { position: relative; }
.pop > summary { list-style: none; }
.pop > summary::-webkit-details-marker { display: none; }
.pop > form {
  position: absolute; z-index: 25; top: calc(100% + 8px); right: 0; width: min(380px, calc(100vw - 32px));
  display: grid; gap: 8px; margin: 0; padding: 16px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 12px; padding: 4px; box-shadow: var(--shadow-overlay); display: grid; gap: 4px;
}
.pop > form label { margin: 0; font-size: 13px; color: var(--text-secondary); }
.page-rows { margin: 0; }
.page-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 24px; align-items: center; font-size: 14px; }
.page-row form { margin: 0; }
.page-what { display: grid; margin: 0; min-width: 0; }
.page-what a { color: var(--text-secondary); overflow-wrap: anywhere; text-decoration: none; }
.page-what a:hover { color: var(--text-accent); text-decoration: underline; }
.page-new-row { padding: 12px 0 0; border-top: 1px solid var(--line); }
.page-new-row > .note-panel { margin: 0; }
.page-new > summary { list-style: none; }
.page-new > summary::-webkit-details-marker { display: none; }
.page-new[open] > summary { margin-bottom: 16px; }
.page-new > form { max-width: 640px; }
/* Follow-ups: sequences as rows with their state dot and one action; the
   emails beneath as hairline rows; the log as a table of rows. */
.group-lede { margin: 0 0 12px; color: var(--text-secondary); font-size: 14px; max-width: 72ch; }
.seq-rows { margin: 0; }
.seq-row { display: grid; gap: 12px; }
.seq-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.seq-what { display: grid; gap: 4px; min-width: 0; }
body.studio .seq-what h3 { margin: 0; }
.seq-actions { margin: 0; }
.seq-steps > summary { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text-secondary); cursor: pointer; list-style: none; }
.seq-steps > summary::-webkit-details-marker { display: none; }
.seq-steps > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 150ms ease; }
.seq-steps[open] > summary::before { transform: rotate(45deg); }
.seq-steps > summary:hover { color: var(--text-primary); }
.seq-steps > .step-rows { margin-top: 12px; }
.step-rows { margin: 0 0 16px; padding-left: 0; }
.step-row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 4px 24px; }
.step-when { margin: 0; font-size: 13px; color: var(--text-secondary); }
.step-mail { min-width: 0; }
body.studio .step-mail h3 { margin: 0 0 4px; font-size: 15px; line-height: 20px; }
.step-body { margin: 0; max-width: 72ch; white-space: pre-line; font-size: 14px; line-height: 20px; color: var(--text-secondary); }
#review > .status-line { margin: 0 0 12px; max-width: 80ch; }
.review-form { display: grid; gap: 12px; justify-items: start; margin: 0 0 24px; max-width: 520px; }
.review-form form.field-grid { width: 100%; }
.field-hint { margin: 0; font-size: 13px; color: var(--text-secondary); }
.mail-log .when { white-space: nowrap; color: var(--text-secondary); }
.rows-table td > .status-dot { margin-right: 4px; vertical-align: 1px; }
/* Campaigns: each a row with its state, its numbers across, one next step;
   the forms side by side below. */
.campaign-rows { margin: 0; }
.campaign-row { display: grid; gap: 12px; }
.campaign-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 24px; }
.campaign-what { min-width: 0; }
body.studio .campaign-what h3 { margin: 0; }
.campaign-sub { margin: 0; font-size: 14px; color: var(--text-secondary); }
.campaign-row > .kv { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.campaign-row > .kv > div { display: grid; gap: 0; padding: 0; border: 0; justify-content: start; }
.campaign-row > .kv dt { font-size: 13px; }
.campaign-row > .kv dd { text-align: left; font-variant-numeric: tabular-nums; }
.campaign-audience { margin: 0; font-size: 14px; max-width: 72ch; }
.campaign-audience span { color: var(--text-secondary); margin-right: 4px; }
.campaign-links > summary { font-size: 14px; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.campaign-links > summary:hover { color: var(--text-primary); }
.campaign-links .rows > li { padding: 8px 0; font-size: 13px; color: var(--text-secondary); }
.campaign-links code { display: block; color: var(--text-primary); }
.campaign-row > .lead-actions { margin: 0; }
.quiet-foot { color: var(--text-secondary); }
.campaigns-forms { margin-top: 16px; }
body.studio .campaigns-forms > .group > h2 { font-family: var(--font-ui); font-size: var(--type-item-size); line-height: var(--type-item-lh); letter-spacing: 0; margin: 0 0 4px; }
.campaigns-forms .rules { margin: 0 0 8px; }
.campaigns-forms .tier-closed { align-self: start; }
.campaign-form fieldset.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.campaign-form fieldset.chip-row > legend { width: 100%; }
/* Results: charts under plain headings, no boxes; tables as rows. */
.chart-group { margin-bottom: 40px; }
.chart-group > svg.chart:not(.spark):not(.meter) { max-width: 960px; }
body.studio .chart .ring { fill: none; }
.chart-group > svg.chart:not(.spark):not(.meter)[viewBox="0 0 200 200"] { max-width: 220px; }
.chart-group > .legend { margin-top: 12px; }
.chart-group > .group-head + .group-empty { border-top: 0; padding-top: 0; }
.chart-note { margin: 12px 0 8px; font-size: 14px; color: var(--text-secondary); }
.split.charts { gap: 48px; }
.best .bar-cell { width: 22%; min-width: 80px; vertical-align: middle; }
.best .mini { display: block; height: 4px; border-radius: 999px; background: var(--text-accent); }
.best .act { white-space: nowrap; text-align: right; }
.best .act a { color: var(--text-accent); font-weight: 600; }
.due-list { margin: 0; }
.due-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 14px; }
.due-row > a { font-weight: 600; color: var(--text-primary); text-decoration: none; }
.due-row > a:hover { text-decoration: underline; }
.due-why { color: var(--text-secondary); }
/* A lead to call: who, strength, one action. */
.call-list { margin: 0; }
.call-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; font-size: 14px; }
.call-who { display: grid; gap: 0; min-width: 0; }
.call-who > span { color: var(--text-secondary); overflow-wrap: anywhere; }
.call-name { font-size: var(--type-item-size); font-weight: 600; color: var(--text-primary); text-decoration: none; }
.call-name:hover { text-decoration: underline; }
.call-act form { margin: 0; }
/* A campaign's state: a dot and its word; the reason under it. Never cut. */
.state { display: inline-flex; align-items: baseline; gap: 8px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text-primary); }
.state > .status-dot { flex: none; transform: translateY(-1px); }
.state small { display: block; font-size: 13px; font-weight: 400; color: var(--text-secondary); }
/* Tables as hairline rows (rule 7). */
.rows-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rows-table th { text-align: left; font-size: 13px; font-weight: 500; color: var(--text-secondary); padding: 0 12px 8px 0; white-space: nowrap; }
.rows-table td { padding: 12px 12px 12px 0; border-top: 1px solid var(--line); vertical-align: top; }
.rows-table th:last-child, .rows-table td:last-child { padding-right: 0; }
.rows-table .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rows-table .row-name { font-weight: 600; color: var(--text-primary); text-decoration: none; }
.rows-table .row-sub { display: block; font-size: 13px; color: var(--text-secondary); overflow-wrap: anywhere; }
body.studio .table-scroll { margin: 0; padding: 0; }
.rules > li { padding: 12px 0; font-size: 14px; }
body.studio .chart .line { fill: none; }
body.studio .chart .area { stroke: none; }
.figures dd { font-variant-numeric: lining-nums; }

@media (max-width: 900px) {
  .cal-layout { grid-template-columns: minmax(0, 1fr); }
  .cal-days > .cal-dayview { position: static; }
  .lib { grid-template-columns: minmax(0, 1fr); }
  .inspector { position: static; padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .work-side { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures > div:nth-child(3) { border-left: 0; }
  .figures > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .settings-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .settings-index { display: none; }
  body.studio .brand-sample { position: static; max-width: 320px; }
  body.studio .brand-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .figures:has(> :nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures > div:nth-child(5) { grid-column: 1 / -1; border-left: 0; }
  .figures:not(:has(> :nth-child(4))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures > div:nth-child(3):last-child { grid-column: 1 / -1; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 1180px) and (min-width: 721px) {
  .board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .stage-switch { display: flex; flex-wrap: wrap; width: 100%; margin: 0 0 16px; }
  .stage-switch > label { flex: 1 0 auto; }
  .board { grid-template-columns: minmax(0, 1fr); }
  .board-col, body.studio .board-col > h2 { display: none; }
  .leads-board:has(input[value="new"]:checked) .board-col[data-stage="new"] { display: grid; }
  .leads-board:has(input[value="contacted"]:checked) .board-col[data-stage="contacted"] { display: grid; }
  .leads-board:has(input[value="qualified"]:checked) .board-col[data-stage="qualified"] { display: grid; }
  .leads-board:has(input[value="won"]:checked) .board-col[data-stage="won"] { display: grid; }
  .leads-board:has(input[value="lost"]:checked) .board-col[data-stage="lost"] { display: grid; }
  .lead-actions .more > summary { min-height: 44px; }
  body.studio .inline-value input { height: 44px; min-height: 44px; }
  .step-row { grid-template-columns: minmax(0, 1fr); }
  /* A wide table stacks: each row a block of its cells, the first bold. */
  .rows-table.stack, .rows-table.stack tbody { display: block; min-width: 0; }
  .rows-table.stack thead { display: none; }
  .rows-table.stack tr { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--line); }
  .rows-table.stack td { display: block; padding: 0; border: 0; color: var(--text-secondary); }
  .rows-table.stack td:first-child { flex-basis: 100%; color: var(--text-primary); }
  .rows-table.stack td.n { text-align: left; }
  .page-row { grid-template-columns: minmax(0, 1fr) auto; }
  .page-row .status-line { grid-row: 2; }
  .pop > form { right: auto; left: 0; }
  .page-actions .pop > form { left: auto; right: 0; }
}

/* ---- The phone: a top bar (the mark, the studio switch), the sections as
   a bottom bar whose labels never wrap, everything else behind Account. */
@media (max-width: 720px) {
  body.with-rail { padding-left: 0; padding-bottom: calc(64px + 8px); }
  body.with-rail main { padding: 20px 16px 40px; }
  body.with-rail > .banner { width: calc(100% - 32px); margin-top: 12px; }
  body.studio header.site.studio-top { display: block; padding: 4px 16px; background: var(--surface-rail); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
  header.site.studio-top nav { flex-wrap: nowrap; justify-content: space-between; }
  header.site.studio-top .wordmark { font-size: 17px; line-height: 1; margin: 0; padding: 0; }
  body.studio button, body.studio .button, .btn, .btn.small, body.studio .button.small, body.studio button.small, .post-actions > details.edit-request > summary, .cal-move > summary { min-height: 44px; }
  .rail {
    top: auto; bottom: 0; width: 100%; height: auto; flex-direction: row; align-items: stretch; gap: 0;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--line); overflow: visible;
  }
  .rail-top, .rail-spacer, .rail-extra, .rail-foot > .meter-link { display: none; }
  .rail-group { flex: 5 1 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; }
  .rail-foot { flex: 1 1 0; display: block; padding: 0; border: 0; min-width: 0; }
  .rail-item, .account-summary {
    position: relative; flex-direction: column; justify-content: center; gap: 4px;
    min-height: 52px; padding: 4px 0; font-size: 12px; line-height: 1; text-align: center; min-width: 0;
  }
  .rail-item[aria-current="page"] { background: none; }
  .rail-item[aria-current="page"]::before { background: var(--text-primary); }
  .rail-item[data-count]::after { position: absolute; top: 2px; left: calc(50% + 4px); margin: 0; min-width: 18px; height: 18px; padding: 0 4px; line-height: 18px; font-size: 11px; }
  .account-summary .rail-avatar { width: 20px; height: 20px; font-size: 9px; }
  .account-panel { position: fixed; left: 8px; right: 8px; bottom: calc(64px + 8px); width: auto; max-height: 72vh; overflow-y: auto; }
  .phone-only { display: block; }
  .menu-item.phone-only { display: flex; }
  .menu-brands, .menu-meter { padding: 0 0 4px; margin: 0 0 4px; border-bottom: 1px solid var(--line); }
  .menu-meter .meter-link { padding: 8px 12px; }
  .page-head { margin-bottom: 24px; }
  body.studio h1 { font-size: 26px; line-height: 32px; }
  body.studio article.content-item { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
  body.studio .inspector > article.content-item:is(:target, :first-of-type) { grid-template-columns: minmax(0, 1fr); }
  body.studio .composer .creation-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; width: 100%; }
  body.studio .composer .creation-card .creation-card-body { flex-direction: column; justify-content: center; gap: 4px; min-height: 56px; padding: 8px 4px; text-align: center; }
  body.studio .composer .creation-card small { display: none; }
  body.studio .composer .creation-card strong { font-size: 13px; }
  .composer-row, body.studio .composer-box, body.studio .composer-tools { padding-left: 16px; padding-right: 16px; }
  body.studio .tool-row > .tool { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  body.studio .composer-box textarea { font-size: 17px; }
  body.studio .examples { padding: 0; }
  .seg > a, .seg > label, .studio-switch > a, header.site nav .studio-switch > a, body.studio .seg > label.chip, body.studio .examples .demo-tab { min-height: 44px; }
  .opt-help > summary { width: 44px; height: 44px; }
  body.studio .card.group .chip-row .chip, body.studio .brand-form .chip-row .chip { height: 44px; }
  body.studio .brand-steps li a, .settings-index a, body.studio .row-control > a:not(.button):not(.btn) { min-height: 44px; }
  body.studio .brand-head .meter { min-width: 0; width: 100%; }
  body.studio form.form-rows .field-grid { grid-template-columns: minmax(0, 1fr); }
  .tile .thumb, .tile .thumb img, .tile .thumb-making .planned-slot, .tile .thumb .thumb-text { height: 160px; }
  .tile .thumb-making, .tile .thumb .thumb-text { width: 128px; }
  .cal-grid-wrap > .cal, .cal-grid-wrap > .cal-legend { display: none; }
  .cal-days > .cal-dayview.has-posts { display: block; margin: 0 0 24px; }
  .cal-week { grid-template-columns: minmax(0, 1fr); }
  .cal-week .cal-day { min-height: 48px; }
  .pipe { gap: 2px; }
  .pipe a { padding: 8px 4px 8px 8px; }
  .pipe span { font-size: 11px; letter-spacing: -0.01em; text-overflow: clip; }
  .call-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .call-act { grid-column: 1 / -1; }
  .note-panel .btn { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}