/* app.css: what the app's own pages need on top of the site's stylesheet.
 *
 * The marketplace, the registration, sign-in and the account are served by the
 * Node app but they are pages of the Projects RH site, so they wear
 * tokens.css and assets/site.css unchanged (portal/static/ holds byte copies,
 * and portal/scripts/check-chrome-parity.cjs fails the deploy if they stop
 * being byte copies). This file adds only what site.css has no garment for, and
 * every value here is a token. There is no hex in this file.
 *
 * It also carries one rule that is NOT an addition: the reduced-motion block.
 * The static build emits it as an inline <style> in the document head, and the
 * app answers `style-src 'self'` with no nonce and no hash, so a browser would
 * refuse the same block there. It is the same rule, in a file instead.
 */

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

/* ── the marketplace's own motion curve ─────────────────────────────────
   --mk-ease is the one curve the filter bar uses, cubic-bezier(0.4, 0, 0.2, 1),
   paired everywhere with the brand's own --motion-base (200ms). The site's
   --ease-standard is a different curve and is left alone; this one is scoped
   to the marketplace's surfaces. */
:root {
  --mk-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── flashes ─────────────────────────────────────────────────────────────── */
.app-flash { padding-top: var(--space-8); }
.app-flash .notice { margin-bottom: 0; }

/* ── the listing rows ────────────────────────────────────────────────────────
   One row per listing. It carries the five public fields and the date it last
   changed, and nothing else has anywhere to go: the row is built from an
   allowlist in lib/marketplace.js, so there is no slot here for a sixth. */
.mk-list { border-top: 1px solid var(--border); margin-top: var(--space-8); }

.mk-row {
  display: grid; gap: var(--space-2) var(--space-4);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; text-decoration: none; color: var(--fg-2);
  padding: var(--space-5) 0; border-bottom: 1px solid var(--border);
  min-height: 48px;
}
a.mk-row:hover { color: var(--accent); }
a.mk-row:hover .mk-ref { color: var(--accent); }

.mk-ref {
  grid-column: 1; font-family: var(--font-supporting); font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 1rem; color: var(--fg-2);
}
.mk-facts { grid-column: 1; font: var(--type-caption); color: var(--fg-3); }
.mk-facts span + span::before { content: " · "; color: var(--meta); }
.mk-when {
  grid-column: 2; grid-row: 1 / span 2; text-align: right;
  font: var(--type-eyebrow); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3);
  white-space: nowrap;
}
.mk-when .s { display: block; color: var(--accent); }

/* ── the marketplace, since 30 September 2026 ───────────────────────────────
   A listing is an image card, and the card is .deal in assets/site.css, which
   the homepage preview draws too, so the two cannot drift apart. What is here
   is only what the marketplace adds: the kind tag on the image, the structure
   line, the notice, and the index and listing layouts.

   The badge is .badge-valid, also in site.css. Its words come from
   lib/marketplace.js validation() and from nowhere else. */
.mk-top { padding-top: var(--space-12); }
/* The head is short on purpose: the listings are the page, and the first row
   of them has to be on the first screen of a laptop. The title on the left,
   what the page is on the right. */
.mk-head { display: grid; gap: var(--space-5); margin-bottom: var(--space-8); }
.mk-h1 { font: var(--type-h2-xl); letter-spacing: var(--track-display); text-wrap: balance; margin: 0; max-width: 24ch; }
.mk-head .lead { font: var(--type-lead-xl); margin: 0; max-width: 46ch; }
@media (min-width: 1000px) {
  .mk-head { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--space-16); align-items: start; }
}
.mk-grid { margin-top: var(--space-5); }
.mk-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.deal-img .mk-kind { position: absolute; right: var(--space-4); top: var(--space-4); background: var(--bg); }
a.deal:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }

/* The notice: a standing statement about the page, set as the small print of
   the head and not as an alert about this request. */
.mk-note {
  max-width: 62ch; margin: var(--space-4) 0 0; padding: 0 0 0 var(--space-4);
  border-left: 2px solid var(--border);
  font-size: 0.875rem; line-height: 1.5; color: var(--fg-3);
}

.mk-empty {
  margin-top: var(--space-6); padding: var(--space-12) var(--space-8);
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg);
}
.mk-empty h2 { font: var(--type-h3-xl); margin-bottom: var(--space-3); }
.mk-empty .row { margin-top: var(--space-6); }
.mk-close .mk-partners { margin-top: var(--space-12); }

/* ── one listing ─────────────────────────────────────────────────────────────
   The title and four figures beside the photograph; then the teaser and the
   facts in a main column, with the validation card in a side column that stays
   in view while the main column scrolls. Below 1080px it is one column in
   reading order: title, figures, photograph, teaser, validation, record. */
.mk-back { margin: 0 0 var(--space-6); max-width: none; }
.mk-back a {
  display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px;
  color: var(--fg-2); text-decoration: none; font-weight: 500;
}
.mk-back a:hover { color: var(--accent); }
.mk-back .ico { width: 1.125rem; height: 1.125rem; stroke-width: 2; }
.mk-d-top { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.mk-d-badges { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin: 0 0 var(--space-5); max-width: none; }
.mk-d-badges:empty { display: none; }
/* The ribbon sits over the hero photograph (site.css 14.10). */
.mk-d-photo { position: relative; }
.mk-d-h1 { font: var(--type-h2-xl); letter-spacing: var(--track-display); text-wrap: balance; }
.mk-d-top .lead { font: var(--type-lead-xl); margin-top: var(--space-4); }
.mk-d-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-8); margin: var(--space-8) 0; }
.mk-d-stats > div { border-top: 2px solid var(--fg-2); padding-top: var(--space-3); }
.mk-d-stats dt { font: var(--type-caption); font-weight: 400; color: var(--fg-3); }
.mk-d-stats dd { margin: var(--space-1) 0 0; font: 700 1.25rem/1.25 var(--font-supporting); font-variant-numeric: tabular-nums; color: var(--fg-2); }
.mk-d-top .mk-note { margin: var(--space-12) 0 0; }

.mk-d-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
.mk-d-intro h2, .mk-d-block h2 { font: var(--type-h3-xl); color: var(--fg-2); margin: 0 0 var(--space-5); }
.mk-teaser { font: var(--type-lead-xl); color: var(--fg-3); max-width: 62ch; white-space: pre-line; overflow-wrap: anywhere; }
.mk-highlights { margin-top: var(--space-8); }
.mk-d-block + .mk-d-block { margin-top: var(--space-12); }
@media (min-width: 1080px) {
  .mk-d-grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    grid-template-areas: "intro side" "rest side";
    column-gap: var(--space-16); row-gap: var(--space-12); align-items: start;
  }
  .mk-d-intro { grid-area: intro; }
  .mk-d-rest { grid-area: rest; }
  /* The one card a reader should keep in view while the record scrolls. It is
     shorter than a 768px laptop viewport, which is the only reason it may be
     sticky: a sticky block taller than the screen hides its own foot. */
  .mk-d-side { grid-area: side; position: sticky; top: calc(var(--head-h, 73px) + var(--space-6)); align-self: start; }
}

/* What the firm has validated. A check that is done carries a tick; one that
   is outstanding, or that is only being described, carries a clock. */
.mk-valid { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-8); }
.mk-valid-head { margin-bottom: var(--space-4); }
.mk-valid p { color: var(--fg-3); }
.mk-valid-checks { margin: var(--space-5) 0; }
.mk-valid-checks > li { font-size: 1rem; font-weight: 600; }
.mk-valid-checks .sub { font-weight: 400; }
.ticks > li.is-wait .tk { background: var(--surface-tint); color: var(--fg-2); }
.badge-valid.is-lg { font-size: 1rem; padding: 0.55rem 1rem 0.55rem 0.75rem; }
.badge-valid.is-lg .ico { width: 1.25rem; height: 1.25rem; }

/* Documents: a public one is a link, a gated one is a name behind a lock. */
.mk-docs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.mk-docs li {
  display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4);
  align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--border);
  min-height: 56px; max-width: none; margin: 0; color: var(--fg-3);
}
.mk-docs .ico { width: 1.25rem; height: 1.25rem; color: var(--fg-2); }
.mk-docs .mk-doc-name { color: var(--fg-2); }
.mk-docs a.mk-doc-name { color: var(--accent); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.mk-docs .mk-doc-meta { font: var(--type-caption); font-weight: 400; color: var(--fg-3); text-align: right; }
@media (max-width: 560px) {
  .mk-docs li { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .mk-docs .mk-doc-meta { grid-column: 2; text-align: left; }
}

.mk-gallery { display: grid; gap: var(--space-6) var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 720px) { .mk-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mk-frame { margin: 0; }
.mk-frame .photo { display: block; aspect-ratio: 16 / 9; }
.mk-frame figcaption { margin-top: var(--space-2); font: var(--type-caption); font-weight: 400; color: var(--fg-3); }
/* A generated frame says so under its caption, from the frame's own record. */
.mk-frame .mk-origin { display: block; font-weight: 500; }

/* ── a listing: "I'm interested" and the share block ─────────────────── */
.mk-interest .split { align-items: start; }
.mk-interest-form { display: grid; gap: var(--space-5); max-width: 40rem; }
.mk-interest-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.mk-interest-form legend { font-weight: 600; color: var(--fg-2); margin-bottom: var(--space-2); padding: 0; }
.mk-interest-form .reg-two { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 720px) { .mk-interest-form .reg-two { grid-template-columns: 1fr 1fr; } }
.mk-interest-form textarea, .mk-interest-form select { width: 100%; }
.mk-interest-form .opt { font-weight: 400; color: var(--fg-3); }
.mk-interest-form .row { margin: 0; }
.mk-interest-form.is-sending { opacity: 0.7; }
.mk-interest-done { padding: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); }
.mk-interest-done h3 { margin: 0 0 var(--space-3); font: var(--type-h3-xl); }
.mk-share { padding: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); }
.mk-share h3 { margin: 0 0 var(--space-2); font: var(--type-h3-xl); }
.mk-share > p { margin: 0 0 var(--space-5); color: var(--fg-3); }
.share-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2); }
.share-list li { margin: 0; max-width: none; }
.share-btn {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 3rem;
  padding: 0 var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg); color: var(--fg-2); font: 600 0.9375rem/1.2 var(--font-supporting);
  text-decoration: none; cursor: pointer; text-align: left;
  transition: border-color var(--motion-base) var(--ease-standard), background var(--motion-base) var(--ease-standard);
}
.share-btn .ico { width: 1.25rem; height: 1.25rem; flex: none; color: var(--accent); }
.share-btn:hover { border-color: var(--accent); background: var(--accent-tint); color: var(--fg-2); }
.share-btn.is-done { border-color: var(--accent); background: var(--accent-tint); }

/* ── the workspace top bar (30 September): the sections across the top, the
   rail below it carrying only the current section's items. Slate, like the
   rail, so the two read as one frame around the canvas. On a phone the bar
   keeps the mark and the menu; the sections sit at the top of the drawer. */
.studio .studio-head { background: var(--fg-2); border-bottom: 1px solid color-mix(in srgb, var(--bg) 14%, transparent); }
.studio .studio-head .site-head-in { gap: var(--space-6); min-height: 64px; }
.studio .studio-head .wordmark img { filter: brightness(0) invert(1); height: 28px; width: auto; }
.studio .studio-head .nav-toggle { color: var(--bg); border-color: color-mix(in srgb, var(--bg) 40%, transparent); }
.top-sections { display: none; gap: 2px; padding: 2px; border-radius: 6px; background: color-mix(in srgb, var(--bg) 8%, transparent); }
.top-sections a {
  display: flex; align-items: center; min-height: 36px; padding: 0 var(--space-4); border-radius: 4px;
  color: color-mix(in srgb, var(--bg) 84%, transparent); text-decoration: none;
  font: 600 0.875rem/1 var(--font-supporting); white-space: nowrap;
}
.top-sections a:hover { background: color-mix(in srgb, var(--bg) 11%, transparent); color: var(--bg); }
.top-sections a[aria-current="true"] { background: var(--bg); color: var(--fg-2); }
.top-right { display: none; margin-left: auto; align-items: center; gap: var(--space-4); color: color-mix(in srgb, var(--bg) 84%, transparent); }
.top-help {
  display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
  border: 0; border-radius: 4px; background: transparent; color: inherit; cursor: pointer;
  font: 500 0.875rem/1 var(--font-supporting);
}
.top-help:hover { background: color-mix(in srgb, var(--bg) 11%, transparent); color: var(--bg); }
.top-help .ico { width: 1.1rem; height: 1.1rem; }
.top-help kbd { font: 500 0.75rem/1 var(--font-supporting); padding: 2px 5px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--bg) 30%, transparent); }
.top-who { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 0.875rem; }
.top-who .rail-avatar { width: 30px; height: 30px; flex-basis: 30px; font-size: 0.75rem; background: color-mix(in srgb, var(--bg) 16%, transparent); color: var(--bg); }
.rail-head .rail-section { margin: 0; font: var(--type-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--rail-dim, var(--fg-3)); }
@media (min-width: 900px) {
  .studio .studio-head { display: block; position: sticky; top: 0; z-index: 30; }
  .studio .studio-head .nav-toggle { display: none; }
  .top-sections, .top-right { display: flex; }
  .studio-body { min-height: calc(100vh - 64px); }
  .studio-rail { top: 64px; height: calc(100vh - 64px); }
  /* the rail's own switcher, mark and help are the phone's; the bar carries
     them here, so the rail opens with its section's name */
  .studio-rail .rail-sections, .studio-rail .rail-mark, .studio-rail .rail-help { display: none; }
  .studio-rail .rail-head { padding-top: var(--space-6); }
  .studio-rail .rail-section { font-size: 0.8125rem; color: var(--rail-fg); }
}

/* ── the Marketplace section: a deal card in the workspace, the forms ── */
.deal-ws .deal-body .tag { margin-top: var(--space-2); align-self: flex-start; }
.ws-form { display: grid; gap: var(--space-5); max-width: 56rem; }
.ws-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.ws-form legend { font-weight: 600; color: var(--fg-2); margin-bottom: var(--space-2); padding: 0; }
.ws-form .reg-two { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 720px) { .ws-form .reg-two { grid-template-columns: 1fr 1fr; } }
.ws-form textarea, .ws-form input[type="text"], .ws-form input[type="date"] { width: 100%; }
.ws-form .check { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; }
/* The SEO checklist's status dot (.check::before, further down) is not this
   form's: a checkbox label here carries its own box and nothing else. */
.ws-form .check::before { content: none; }
.ws-form .app-actions { margin-top: var(--space-2); }
.q-card .app-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-4); }
.q-card .app-actions .reason { flex: 1 1 16rem; }
.mk-gallery + .fine { margin-top: var(--space-5); }


/* ── the strategic partners strip ───────────────────────────────────────────
   One hairline row under the closing band. The label is set like an eyebrow but in the body grey: the
   page's teal is already spent on the eyebrow above and the Apply button below.
   Each mark has its own height because the three are different shapes (the
   reasoning is beside PARTNERS in pages/marketplace.js). */
.mk-partners {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-12);
  margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border);
}
.mk-partners-label {
  font: var(--type-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--fg-3); margin: 0;
}
.mk-partners-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-8);
}
@media (min-width: 900px) { .mk-partners-list { gap: var(--space-6) var(--space-12); } }
.mk-partners-list li { margin: 0; }
.mk-partner { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 48px; text-decoration: none; }
.mk-partner-img { display: block; width: auto; }
.mk-partner-img.is-rh { height: 30px; }
.mk-partner-img.is-po { height: 36px; }
.mk-partner-img.is-gsp { height: 40px; }
/* Pan Ocean's name, set the way its own header sets it: capitals, open
   tracking, the second half a step quieter. */
.mk-partner-word {
  font: 500 0.875rem/1.2 var(--font-supporting); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-2); white-space: nowrap;
}
.mk-partner-sub { color: var(--fg-3); font-weight: 400; }
@media (min-width: 900px) {
  .mk-partner-img.is-rh { height: 34px; }
  .mk-partner-img.is-po { height: 40px; }
  .mk-partner-img.is-gsp { height: 44px; }
  .mk-partner-word { font-size: 0.9375rem; }
}

/* ── the filter bar ──────────────────────────────────────────────────────────
   Spec section 4: the filters EXPAND THE BAR IN PLACE and never float over the
   results, and the active trigger becomes a tinted pill, so the control and its
   state are the same object. A <details> does both with no JavaScript, which is
   the constraint that matters most here: this bar is a GET form, the filter
   state is the URL, the back button works and a filtered view can be linked to.

   The radio itself is collapsed to nothing and the label is the target. That is
   not a trick to dodge the 48px control floor, since the label carries the height,
   it is how a chip taxonomy has to be built when the chip must also be a real
   form control that a keyboard can reach and arrow through. */
.mk-filterbar { padding-top: var(--space-5); border-top: 1px solid var(--border); }
.mk-filters { display: grid; gap: var(--space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
@media (min-width: 900px) {
  .mk-filters { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
}
.mk-filter { min-width: 0; }
/* On a phone the three triggers are one row, so the first listing is on the
   first screen. A trigger that is opened takes the whole row and its choices
   open under it, in place; the button that applies them appears with it. */
@media (max-width: 899px) {
  .mk-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .mk-filter { flex: 1 1 auto; }
  .mk-filter[open], .mk-apply { flex: 1 1 100%; }
  .mk-filter:not([open]) > summary { padding: 0 var(--space-3); gap: var(--space-1); }
  .mk-filter:not([open]) .mk-fvalue { display: none; }
  .mk-filter:not([open]) .mk-fname { white-space: nowrap; }
  .mk-filters:not(:has(.mk-filter[open])) .mk-apply { display: none; }
}
.mk-filter > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: 48px; padding: 0 var(--space-4); cursor: pointer;
  border: 1px solid var(--meta); border-radius: var(--radius-pill);
  font: var(--type-caption); color: var(--fg-3); list-style: none;
  transition: background-color var(--motion-base) var(--mk-ease),
              border-color var(--motion-base) var(--mk-ease),
              color var(--motion-base) var(--mk-ease);
}
.mk-filter > summary::-webkit-details-marker { display: none; }
.mk-filter > summary::after {
  content: "\203A"; font-size: 1.25rem; line-height: 1; color: var(--fg-3);
  transform: rotate(90deg); transition: transform var(--motion-base) var(--mk-ease);
}
.mk-filter[open] > summary::after { transform: rotate(-90deg); }
.mk-filter > summary:hover { border-color: var(--fg-2); }
.mk-filter > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
/* The active trigger reads as a tinted pill. */
.mk-filter.is-on > summary { background: var(--accent-tint); border-color: var(--accent); color: var(--fg-2); font-weight: 700; }
.mk-filter.is-on > summary::after { color: var(--fg-2); }
.mk-fname { color: var(--fg-3); }
.mk-fvalue { min-width: 0; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--fg-2); }

.mk-choices {
  display: grid; gap: 2px; margin-top: var(--space-2);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: var(--space-2); background: var(--surface);
}
.mk-choice { position: relative; display: block; margin: 0; }
/* Collapsed to nothing, so the label is the only thing with a size. It stays
   focusable, and the ring is painted on the label beside it. */
.mk-choice input {
  position: absolute; width: 0; height: 0; min-height: 0; margin: 0; padding: 0;
  opacity: 0; border: 0; -webkit-appearance: none; appearance: none;
}
.mk-choice span {
  display: flex; align-items: center; min-height: 44px;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  font: var(--type-caption); color: var(--fg-3); cursor: pointer;
  transition: background-color var(--motion-base) var(--mk-ease), color var(--motion-base) var(--mk-ease);
}
.mk-choice span:hover { background: var(--surface-warm); }
.mk-choice input:checked + span { background: var(--accent-tint); color: var(--fg-2); font-weight: 700; }
.mk-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.mk-apply { display: flex; gap: var(--space-3); grid-column: 1 / -1; }
@media (min-width: 900px) { .mk-apply { display: contents; } }
.mk-filters .call-secondary, .mk-filters .call-primary { flex: 1 1 auto; justify-content: center; }
@media (min-width: 900px) { .mk-filters .call-secondary, .mk-filters .call-primary { flex: 0 0 auto; align-self: start; min-height: 48px; } }

/* ── the count, and the empty state ──────────────────────────────────────────
   Spec section 4: ours shows a count, a clear control and a real message at
   zero, because the benchmark's is broken: a nonsense search left 60 unfiltered
   cards under a bare heading with no message, no count and no way to clear. */
.mk-tally {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: baseline;
  margin-top: var(--space-5);
}
.mk-count { font: var(--type-caption); color: var(--fg-3); margin: 0; }
.mk-count strong { color: var(--fg-2); font-weight: 700; }
.mk-clear {
  font: var(--type-caption); color: var(--accent); text-decoration: underline;
  text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center;
  transition: color var(--motion-base) var(--mk-ease);
}
.mk-clear:hover { color: var(--accent-hover); }
.mk-empty { margin-top: var(--space-6); }
.mk-empty .app-actions { margin-top: var(--space-5); }

/* ── registration ────────────────────────────────────────────────────────────
   What the page is and the three steps on the left, staying in view; the step
   itself on the right, in one card. On a phone the steps are one row of
   numbers with the current one named.

   A choice is a chip: a real radio or checkbox laid invisibly over a pill, so
   the control is the target, a keyboard reaches it, and choosing several is a
   tap on each. Nothing here needs a script. */
.reg { padding-top: var(--space-12); }
.reg-grid { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); }
.reg-side h1 { font: var(--type-h2-xl); letter-spacing: var(--track-display); text-wrap: balance; margin: 0 0 var(--space-4); }
.reg-side .lead { font: var(--type-lead-xl); margin: 0 0 var(--space-8); max-width: 40ch; }
.reg-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
.reg-steps li { display: flex; align-items: center; gap: var(--space-3); margin: 0; max-width: none; color: var(--fg-3); }
.reg-steps .n {
  flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--meta);
  font: 600 1rem/1 var(--font-supporting); color: var(--fg-3);
}
.reg-steps .n .ico { width: 1.125rem; height: 1.125rem; stroke-width: 2.5; }
.reg-steps .t { font-size: 1.0625rem; line-height: 1.3; }
.reg-steps .t small { display: block; font-size: 0.875rem; font-weight: 400; color: var(--fg-3); }
.reg-steps li[aria-current="step"] { color: var(--fg-2); font-weight: 600; }
.reg-steps li[aria-current="step"] .n { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.reg-steps li.is-done .n { background: var(--accent-tint); border-color: var(--accent-tint); color: var(--accent-active); }
@media (max-width: 999px) {
  .reg-side .lead { margin-bottom: var(--space-5); }
  .reg-steps .t small { display: none; }
  .reg-steps li:not([aria-current="step"]) .t {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
@media (min-width: 1000px) {
  .reg-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--space-16); align-items: start; }
  .reg-side { position: sticky; top: calc(var(--head-h, 73px) + var(--space-8)); }
  .reg-steps { display: grid; gap: var(--space-5); }
}

.reg-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); }
@media (min-width: 720px) { .reg-card { padding: var(--space-12); } }
.reg-count { font: var(--type-caption); color: var(--fg-3); margin: 0 0 var(--space-2); }
.reg-card h2 { font: var(--type-h3-xl); color: var(--fg-2); margin: 0 0 var(--space-8); text-wrap: balance; }
.reg-card .notice { font-size: 1rem; }
.reg-card .notice ul { margin: var(--space-2) 0 0; padding-left: 1.2rem; }
.reg-intro { font-size: 1.0625rem; line-height: 1.55; color: var(--fg-3); margin: 0 0 var(--space-8); max-width: 60ch; }
.reg-group { border: 0; border-radius: 0; padding: 0; margin: 0 0 var(--space-8); min-width: 0; }
.reg-group > legend { font: 600 1.0625rem/1.35 var(--font-body); color: var(--fg-2); margin: 0 0 var(--space-2); padding: 0; }
.reg-group > .hint { font: 400 0.9375rem/1.5 var(--font-body); color: var(--fg-3); margin: 0 0 var(--space-4); max-width: 60ch; }
.reg-group > legend + .picks, .reg-group > legend + .reg-two { margin-top: var(--space-3); }

/* The pill a choice is drawn as is .pick, in assets/site.css, which the static
   intake page uses too. */
.reg-juris { display: grid; gap: var(--space-5); margin-top: var(--space-5); }
@media (min-width: 640px) { .reg-juris { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-8); } }
.reg-j-name { font: var(--type-caption); color: var(--fg-3); margin: 0 0 var(--space-2); max-width: none; }
.reg-statement { margin: 0 0 var(--space-2); }

.reg-two { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .reg-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); } }
.reg-two .field-row { margin: 0; }
.reg-card .hint { font: 400 0.875rem/1.5 var(--font-body); color: var(--fg-3); }
.reg-card .app-consent { margin-top: var(--space-8); }

.reg-more { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 0 0 var(--space-2); }
.reg-more > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 64px; cursor: pointer; list-style: none;
  font: 600 1.0625rem/1.35 var(--font-body); color: var(--fg-2);
}
.reg-more > summary::-webkit-details-marker { display: none; }
.reg-more > summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; line-height: 1; color: var(--fg-2); }
.reg-more[open] > summary::after { content: "\2212"; }
.reg-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.reg-more-body { padding: var(--space-2) 0 var(--space-2); }

/* ── consent: a checkbox a thumb can actually hit ────────────────────────────
   site.css styles .choice input as a native control, which measures about 16px
   and fails the 48px floor scripts/check-viewport.cjs holds every control to.
   These are drawn rather than native so the control IS the target: a 48px box,
   filled with the accent when checked, with the label beside it. No background
   image, because the app's Content-Security-Policy sets img-src 'self' and a
   data: URI would be refused. */
.app-consent { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-3) 0; }
.app-consent input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto; width: 48px; height: 48px; min-height: 48px; margin: 0;
  border: 1px solid var(--meta); border-radius: var(--radius-sm);
  background: var(--bg); cursor: pointer;
  transition: box-shadow var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard);
}
.app-consent input[type="checkbox"]:hover { border-color: var(--fg-2); }
.app-consent input[type="checkbox"]:checked { border-color: var(--accent); box-shadow: inset 0 0 0 12px var(--accent); }
.app-consent input[type="checkbox"]:focus-visible { border-color: var(--accent); box-shadow: var(--focus-ring); outline: none; }
.app-consent label {
  margin: 0; font-weight: 400; color: var(--fg-3); font-size: 0.9375rem;
  min-height: 48px; display: flex; align-items: center; flex: 1; cursor: pointer;
}

/* ── actions ─────────────────────────────────────────────────────────────── */
.app-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; margin-top: var(--space-8); }
.app-actions form { display: contents; }

/* ── the ledger used for a mandate, an account and a submission ──────────── */
.app-facts { border-top: 1px solid var(--border); margin-top: var(--space-6); }
.app-facts .row {
  display: grid; gap: var(--space-1) var(--space-4); grid-template-columns: 1fr;
  padding: var(--space-4) 0; border-bottom: 1px solid var(--border);
}
@media (min-width: 720px) { .app-facts .row { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); } }
.app-facts .k { color: var(--fg-2); font-weight: 600; font-size: 0.9375rem; }
.app-facts .v { color: var(--fg-3); font-size: 0.9375rem; min-width: 0; overflow-wrap: anywhere; }

/* ── the staff queues ────────────────────────────────────────────────────── */
.q-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.q-tabs a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  font: var(--type-caption); color: var(--fg-3); text-decoration: none;
}
.q-tabs a[aria-current="page"] { border-color: var(--accent); color: var(--accent); font-weight: 600; }

.q-card {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-6); margin-bottom: var(--space-6); background: var(--bg);
}
.q-card h3 { margin-bottom: var(--space-2); }
.q-head { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: baseline; justify-content: space-between; }
.q-state { font: var(--type-eyebrow); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.q-state.on { color: var(--accent); }
.q-gaps { margin-top: var(--space-4); }
.q-gaps li { font: var(--type-caption); color: var(--fg-3); }
/* white-space: pre-wrap keeps the teaser's own line breaks, and on its own it
   does NOT break a long unbroken string, such as a Windows path or a URL in the
   internal provenance block. Chrome answers a too-wide line under mobile
   emulation by widening the LAYOUT VIEWPORT, which is worse than an overflow
   because scrollWidth then equals innerWidth and the page measures as fine at
   683px. overflow-wrap: anywhere is what actually holds it to 390.
   Found by scripts/check-viewport.cjs on 2026-09-21, on the listing detail
   page, which is where the provenance lives. */
.q-teaser {
  margin-top: var(--space-4); padding: var(--space-4); background: var(--surface);
  border-radius: var(--radius-sm); font-size: 0.9375rem; color: var(--fg-3);
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; min-width: 0;
}

/* An intake's files and its seven answers, as a list inside a value cell. */
.q-files { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.q-files li { margin: 0; max-width: none; overflow-wrap: anywhere; }
.q-files a { min-height: 44px; display: inline-flex; align-items: center; }

/* The reference at the head of a queue card is the row's control, so it is a
   target and not only a link. site.css gives .call-quiet no height of its own. */
.q-card h3 .call-quiet { min-height: 44px; }

/* A refusal from the database, read back as a sentence. Not a stack trace, and
   not a 500 page: the queue re-renders with this above the row that refused. */
.q-refusal { border-left: 3px solid var(--meta); background: var(--surface); padding: var(--space-6); margin-bottom: var(--space-8); }
.q-refusal .plabel { display: block; font: var(--type-eyebrow); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); margin-bottom: var(--space-2); }

/* ── the AI studio pages (SPEC-ai-studio-phase-d.md sections 3 and 4) ───────
   Writer's shape in the house palette: a centred greeting, one composer
   card, a segmented control over two groups of cards, and the sheet. What
   the script upgrades is styled under html.js; without it the tabs are
   headings and both groups show. */
.home .wrap-wide { padding-top: var(--space-6); }
.home-greeting { text-align: center; margin: var(--space-8) auto var(--space-6); font: 600 1.5rem/1.33 var(--font-display); letter-spacing: -0.01em; max-width: 46rem; }

/* the composer: one white card, the field on top, the controls below */
.composer { max-width: 46rem; margin: 0 auto var(--space-3); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); background: var(--bg); box-shadow: var(--elev-card); }
.composer textarea { display: block; width: 100%; border: 0; padding: var(--space-2) 0; font: 400 1rem/1.5 var(--font-body); color: var(--fg); background: transparent; resize: none; min-height: 2.5rem; max-height: 12rem; overflow: auto; }
.composer textarea:focus { outline: none; }
.composer:focus-within { box-shadow: var(--elev-card), var(--focus-ring); }
.composer-row { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); position: relative; }
.composer-grow { flex: 1 1 auto; }
.composer-plus, .composer-mic, .composer-send, .composer-stop {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--bg); color: var(--fg-2); cursor: pointer; padding: 0;
}
.composer-plus:hover, .composer-mic:hover { background: var(--surface); }
.composer-mic[aria-pressed="true"] { background: var(--accent-tint); color: var(--accent); border-color: var(--accent-tint); }
.composer-send { background: var(--accent); color: var(--accent-on); border-color: var(--accent); }
.composer-send:hover { background: var(--accent-hover); }
.composer-stop { background: var(--fg-2); color: var(--accent-on); border-color: var(--fg-2); }
.composer .ico, .composer-stop .ico { width: 18px; height: 18px; }
.composer-menu { position: absolute; left: 0; bottom: calc(100% + var(--space-2)); z-index: 5; list-style: none; margin: 0; padding: var(--space-2); min-width: 16rem; background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius-md); box-shadow: var(--elev-card); }
.composer-menu li { margin: 0; max-width: none; }
.composer-menu a { display: block; padding: var(--space-3); border-radius: var(--radius-sm); color: var(--fg-2); text-decoration: none; }
.composer-menu a:hover { background: var(--surface); color: var(--fg); }
.scope-pill { min-height: 36px; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); padding: 0 var(--space-4); font: 400 0.875rem/1 var(--font-body); color: var(--fg-3); background: var(--surface); max-width: 18rem; }
.composer-note { text-align: center; color: var(--fg-3); font-size: 0.8125rem; max-width: 46rem; margin: 0 auto var(--space-8); }
.home-note { max-width: 46rem; margin: 0 auto var(--space-8); text-align: center; }
.session-stop { margin: 0; }

/* the groups: a segmented control over the cards, More on the right */
.studio-groups { margin-top: var(--space-6); }
.group-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.segmented, .tabs { display: none; }
.js .segmented { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-warm); border-radius: var(--radius-md); }
.segmented [role="tab"] { min-height: 40px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--fg-3); font: 400 1rem/1 var(--font-body); cursor: pointer; }
.segmented [role="tab"][aria-selected="true"] { background: var(--bg); color: var(--fg); font-weight: 500; box-shadow: var(--elev-card); }
.group-head .more { margin-left: auto; }
.group-head .more .ico { width: 18px; height: 18px; margin-right: var(--space-2); vertical-align: -3px; }
.group-title { font: var(--type-h3); margin: var(--space-6) 0 var(--space-4); }
.js .group-title { display: none; }
.js .card-group:not(.is-active) { display: none; }

/* the cards (Writer 1): a tile, two lines of name, the line, the foot */
.action-cards { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .action-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .action-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.action-card { border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); background: var(--bg); min-height: 12rem; }
.action-card h3 { margin: 0; font: 500 1.125rem/1.35 var(--font-display); }
.action-card h3 a { color: var(--fg); text-decoration: none; }
.action-card h3 a:hover { color: var(--accent); }
.action-card p { margin: 0; color: var(--fg-3); font-size: 0.9375rem; }
.icon-tile { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--accent-tint); color: var(--fg-2); flex: 0 0 40px; }
.icon-tile .ico { width: 20px; height: 20px; }
.icon-tile-sm { width: 32px; height: 32px; flex-basis: 32px; border-radius: 6px; background: var(--surface-warm); }
.icon-tile-sm .ico { width: 16px; height: 16px; }
.card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-soft); }
.card-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--fg-2); color: var(--accent-on); font: 600 0.625rem/1 var(--font-supporting); letter-spacing: 0.04em; }
.card-foot .run { min-height: 36px; padding: 0 var(--space-4); background: var(--surface-warm); border-radius: var(--radius-pill); color: var(--fg); text-decoration: none; display: inline-flex; align-items: center; }
.card-foot .run:hover { background: var(--accent-tint); color: var(--fg-2); }

/* the sheet (Writer 4): two panes, the fields on the right */
.sheet { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--bg); box-shadow: var(--elev-card); overflow: hidden; }
@media (min-width: 900px) { .sheet { grid-template-columns: minmax(0, 1fr) 26rem; } }
.sheet-main { padding: var(--space-6); border-bottom: 1px solid var(--border-soft); }
@media (min-width: 900px) { .sheet-main { border-bottom: 0; border-right: 1px solid var(--border-soft); } }
.sheet-side { display: flex; flex-direction: column; background: var(--surface); }
.sheet-side .pending, .sheet-side .sheet-fields { margin: var(--space-6); }
.sheet-head { display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-4); }
.sheet-title { margin: 0; font: 600 1.375rem/1.3 var(--font-display); }
.sheet-by { margin: var(--space-1) 0 0; color: var(--fg-3); font-size: 0.875rem; }
.js .tabs { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--border-soft); margin-bottom: var(--space-5); }
.tabs [role="tab"] { min-height: 44px; padding: 0 0 var(--space-2); border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--fg-3); font: 500 1rem/1 var(--font-body); cursor: pointer; margin-bottom: -1px; }
.tabs [role="tab"][aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }
.js .tab-panel:not(.is-active) { display: none; }
.tab-panel h2 { font: 600 1.0625rem/1.4 var(--font-display); margin: var(--space-6) 0 var(--space-3); }
.tab-panel h2:first-child { margin-top: 0; }
.tab-panel p { color: var(--fg-2); font-size: 0.9375rem; }
.sheet-deliverables { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.sheet-deliverables li { display: flex; align-items: center; gap: var(--space-3); margin: 0; max-width: none; font-size: 0.9375rem; }
.sheet-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.sheet-steps li { display: flex; align-items: center; gap: var(--space-3); margin: 0; max-width: none; font-size: 0.9375rem; }
.step-no { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: 500 0.875rem/1 var(--font-supporting); color: var(--fg-2); }
.sheet-form { display: flex; flex-direction: column; min-height: 100%; }
.sheet-form .sheet-fields { flex: 1 1 auto; }
.sheet-form .field-row { margin-bottom: var(--space-5); }
.sheet-form label { font-weight: 500; display: block; margin-bottom: var(--space-1); }
.sheet-form .req { color: var(--accent); }
.sheet-form .hint { margin: 0 0 var(--space-2); color: var(--fg-3); font-size: 0.875rem; }
.sheet-form select, .sheet-form input[type="text"], .sheet-form textarea { width: 100%; min-height: 44px; border: 1px solid var(--meta); border-radius: 8px; padding: var(--space-2) var(--space-3); font: inherit; background: var(--bg); }
.sheet-form textarea { resize: vertical; }
.sheet-foot { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border-soft); background: var(--bg); }
.fields-complete { margin: 0 auto 0 0; display: inline-flex; align-items: center; gap: var(--space-2); }
.fields-count { display: inline-grid; place-items: center; min-width: 2.5rem; min-height: 28px; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--surface-warm); font: 600 0.8125rem/1 var(--font-supporting); }
.sheet-foot .run .ico { width: 16px; height: 16px; margin-right: var(--space-2); }
.sheet-foot .run[disabled] { opacity: 0.55; cursor: not-allowed; }
.sheet-dialog { border: 0; padding: 0; background: transparent; width: min(1200px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); overflow: visible; }
.sheet-dialog::backdrop { background: color-mix(in srgb, var(--surface) 78%, transparent); }
.sheet-dialog .sheet { max-height: calc(100vh - 32px); overflow: auto; }

.tiles { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-6); background: var(--bg); }
.tile-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-4); flex-wrap: wrap; }
.tile-head h2 { margin: 0; font: var(--type-h3); }
.tile-list, .inbox-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.tile-list li, .inbox-list li { display: grid; gap: var(--space-1); padding: var(--space-3) 0; border-top: 1px solid var(--border-soft); margin: 0; max-width: none; }
.tile-empty { color: var(--fg-3); }
.inbox-list li.is-read a { color: var(--fg-3); }
.deliverables, .steps { margin: 0 0 var(--space-6); }
.deliverables { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.steps li { margin-bottom: var(--space-2); }
.details { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2) var(--space-6); margin: 0 0 var(--space-6); }
@media (min-width: 720px) { .details { grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-3) var(--space-6); } }
.details dt { font-weight: 600; color: var(--fg-2); }
.details dd { margin: 0; }
.run-form { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-6); margin-top: var(--space-6); }
.run-actions { border: 0; padding: 0; margin: var(--space-4) 0; }
.run-actions legend { font-weight: 600; margin-bottom: var(--space-2); }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); }
.filters select, .filters input { min-height: 44px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 var(--space-3); font: inherit; min-width: 0; }

/* ── the session (SPEC-ai-studio-phase-d.md section 5) ──────────────────────
   A 46rem reading column: the person's turn on the right, the plan and the
   steps as activity rows, the agent's forms inside the transcript, a live
   line, then the docked step bar, the notify bar and the composer. */
.session-page .wrap { max-width: 46rem; }
.session-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.session-head h1 { margin: var(--space-1) 0 0; font: 600 1.25rem/1.35 var(--font-display); }
.session-meta { margin: 0; display: flex; align-items: center; gap: var(--space-3); }
.turns { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.turn { margin: 0; max-width: none; }
.turn-you { display: grid; justify-items: end; gap: var(--space-3); }
.bubble { margin: 0; display: inline-block; max-width: 80%; padding: var(--space-3) var(--space-5); border-radius: var(--radius-lg); background: var(--surface-warm); color: var(--fg); }
.card-inline { max-width: 26rem; width: 100%; min-height: 0; }
.turn-inputs { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-4); font-size: 0.875rem; color: var(--fg-3); max-width: 26rem; width: 100%; }
.turn-inputs dt { font-weight: 500; color: var(--fg-2); }
.turn-inputs dd { margin: 0; overflow-wrap: anywhere; }
.turn-assistant .chat-body { color: var(--fg); }
.activity { border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--bg); }
.activity > summary { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: var(--space-2) var(--space-4); cursor: pointer; list-style: none; color: var(--fg-3); font-size: 0.9375rem; }
.activity > summary::-webkit-details-marker { display: none; }
.activity > summary::after { content: ""; width: 8px; height: 8px; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: rotate(45deg); margin-left: auto; transition: transform var(--motion-fast) var(--ease-standard); }
.activity[open] > summary::after { transform: rotate(-135deg); }
.activity-ico { display: inline-flex; color: var(--fg-3); }
.activity-text { color: var(--fg-2); font-weight: 500; }
.activity-sep { width: 1px; height: 18px; background: var(--border); }
.activity-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity > :not(summary) { margin-left: var(--space-4); margin-right: var(--space-4); }
.activity > :last-child:not(summary) { margin-bottom: var(--space-4); }
.plan { list-style: none; margin: 0; padding: var(--space-2) 0 0; display: grid; gap: var(--space-2); }
.plan-step { margin: 0; max-width: none; display: flex; align-items: center; gap: var(--space-3); font-size: 0.9375rem; color: var(--fg-2); }
.plan-step.is-queued { color: var(--fg-3); }
.mark { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px; border-radius: var(--radius-pill); border: 1px solid var(--border); color: var(--fg-3); }
.mark .ico { width: 14px; height: 14px; }
.mark-done { background: var(--accent-tint); border-color: var(--accent-tint); color: var(--accent); }
.mark-running { border-color: var(--accent); color: var(--accent); }
.mark-awaiting_you { background: var(--surface-warm); color: var(--fg-2); }
.mark-failed, .mark-refused { color: var(--fg-2); border-color: var(--fg-3); }
.events { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-1); font-size: 0.875rem; color: var(--fg-3); }
.events li { margin: 0; max-width: none; }
.events .small { color: var(--meta); font-family: var(--font-supporting); font-size: 0.75rem; margin-right: var(--space-2); }
.evt-refused, .evt-failed { color: var(--fg-2); font-weight: 600; }
.step-note { margin: var(--space-2) 0 0; color: var(--fg-2); }
.qa { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: var(--space-3) 0 0; font-size: 0.9375rem; }
@media (min-width: 720px) { .qa { grid-template-columns: minmax(10rem, 18rem) minmax(0, 1fr); } }
.qa dt { color: var(--fg-3); }
.qa dd { margin: 0; color: var(--fg); overflow-wrap: anywhere; }
.run-cards { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); margin-top: var(--space-3); }
.run-card { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
.run-card p { margin: 0 0 var(--space-2); }
.run-card .row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.copy { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.copy-box { width: 100%; min-height: 8rem; font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.5; padding: var(--space-3); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--surface); resize: vertical; }
.copy .call-quiet { justify-self: start; }
.inline-card { margin-top: var(--space-3); padding: var(--space-4); border: 1px solid var(--accent-tint); border-radius: var(--radius-md); background: var(--surface); display: grid; gap: var(--space-3); }
.inline-card h3 { margin: 0; font: 600 1rem/1.4 var(--font-display); }
.inline-card p { margin: 0; }
.inline-card label { font-weight: 500; }
.inline-card .hint { color: var(--fg-3); font-size: 0.875rem; margin-top: calc(-1 * var(--space-2)); }
.inline-card input[type="text"], .inline-card select, .inline-card textarea { width: 100%; min-height: 44px; border: 1px solid var(--meta); border-radius: 8px; padding: var(--space-2) var(--space-3); font: inherit; background: var(--bg); }
.inline-card input[type="file"] { display: block; width: 100%; }
.inline-card .row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.inline-card .call-primary, .inline-card .call-secondary { justify-self: start; }
.inline-done { margin-top: var(--space-2); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.inline-form { display: inline; margin: 0; }
.doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); font-size: 0.9375rem; }
.doc-list li { margin: 0; max-width: none; display: flex; align-items: center; gap: var(--space-2); }
.revise { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border-soft); }
.session-live { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0 0; color: var(--fg-2); font-weight: 500; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: live-pulse 1.4s ease-in-out infinite; }
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.session-dock { position: sticky; bottom: 0; margin-top: var(--space-6); padding: var(--space-3) 0 var(--space-4); background: var(--bg); display: grid; gap: var(--space-3); }
.session-dock .composer { margin: 0; max-width: none; }
.session-dock .composer-note { margin: 0; }
.step-bar { display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: 0 var(--space-4); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--bg); font-size: 0.9375rem; color: var(--fg-2); }
.step-bar.is-running { border-color: var(--accent); }
.step-bar-ico { display: inline-flex; color: var(--fg-3); }
.step-bar-count { font-weight: 500; white-space: nowrap; }
.step-bar-sep { width: 1px; height: 18px; background: var(--border); }
.step-bar-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notify-bar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; min-height: 56px; padding: var(--space-2) var(--space-4); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--bg); }
.notify-bar .notify-ico { display: inline-flex; color: var(--fg-3); }
.notify-bar .notify-text { flex: 1 1 auto; font-weight: 500; color: var(--fg-2); }
.notify-bar .call-secondary, .notify-bar .call-primary { min-height: 40px; padding: 0 var(--space-5); }
.notify-close { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; background: transparent; color: var(--fg-3); cursor: pointer; border-radius: var(--radius-pill); }
.notify-close:hover { background: var(--surface); }
.session-upload { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface); }
/* The stop form is empty: its button sits in the composer's row beside Send. */
.session-stop { display: none; }
.transcript { padding-bottom: var(--space-4); }

/* ── files in the session (SPEC-ai-studio-phase-e.md) ─────────────────────
   Chips on the composer and on the person's turns; the Files drawer opened
   from the header, a panel beside the transcript on a desktop and a block
   under the header on a phone; the preview inside it. */
.attachments { list-style: none; margin: 0 0 var(--space-2); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.turn-you .chips { justify-content: flex-end; }
.chip { margin: 0; max-width: 100%; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg); font-size: 0.875rem; color: var(--fg); }
.chip-kind { font: 600 0.6875rem/1 var(--font-supporting); letter-spacing: 0.04em; padding: 3px 6px; border-radius: 4px; background: var(--accent-tint); color: var(--accent); }
.chip-name { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-size { color: var(--fg-3); font-size: 0.75rem; }
.chip-remove { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: -6px; border: 0; background: transparent; color: var(--fg-3); cursor: pointer; border-radius: 50%; font-size: 1.125rem; line-height: 1; }
.chip-remove:hover { background: var(--surface); color: var(--fg); }
.composer-attach-input { font-size: 0.8125rem; max-width: 13rem; color: var(--fg-3); }
.js .composer-attach-input { display: none; }
.turn-upload .small { margin: 0; text-align: right; color: var(--fg-3); }
.session-meta { flex-wrap: wrap; }
/* The header's children never grow past the column: the open drawer's table
   would otherwise size the row to its own content on a phone. */
.session-head > * { min-width: 0; max-width: 100%; }
.files { position: relative; flex: 0 0 auto; max-width: 100%; }
/* Open, on a narrow screen the drawer takes the whole row under the header. */
.files[open] { flex: 1 1 100%; }
.files-toggle { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-pill); cursor: pointer; list-style: none; font-size: 0.9375rem; color: var(--fg-2); background: var(--bg); }
.files-toggle::-webkit-details-marker { display: none; }
.files-toggle .ico { width: 18px; height: 18px; }
.files-toggle:hover { border-color: var(--accent); color: var(--accent); }
.files[open] .files-toggle { background: var(--accent-tint); border-color: var(--accent-tint); color: var(--accent); }
.files-panel { margin-top: var(--space-4); padding: var(--space-4); border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--bg); text-align: left; font-weight: 400; max-width: 100%; box-sizing: border-box; }
.files-panel .table-wrap { overflow-x: auto; }
.files-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.files-head strong { font: 600 1.0625rem/1.4 var(--font-display); }
.files-close { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; background: transparent; color: var(--fg-3); cursor: pointer; border-radius: 50%; }
.files-close:hover { background: var(--surface); color: var(--fg); }
.files-close .ico { width: 18px; height: 18px; }
.files-panel .tabs { margin-bottom: var(--space-4); }
.files-panel .table-wrap { margin: 0; }
.files-panel .data { font-size: 0.875rem; table-layout: fixed; width: 100%; min-width: 0; }
.files-panel .data th, .files-panel .data td { padding: var(--space-3) var(--space-2); }
.files-panel .data th:first-child { width: 44%; }
.files-panel .data th:last-child { width: 24%; }
.files-panel .data td { vertical-align: top; overflow-wrap: anywhere; }
.files-panel .data td a { min-height: 0; display: inline; }
.files-panel .basis { display: block; color: var(--fg-3); font-size: 0.8125rem; margin-top: 2px; }
.files-panel .inline-form { display: block; margin-top: var(--space-1); }
.files-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.files-panel .call-quiet { min-height: 32px; }
.where-state { display: inline-block; font-weight: 500; color: var(--fg-2); }
.files-viewer { display: grid; gap: var(--space-3); }
.files-viewer-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.files-viewer-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.files-frame { display: block; width: 100%; height: 70vh; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--surface); }
@media (min-width: 1200px) {
  .files-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(44vw, 720px); margin: 0; padding: var(--space-5) var(--space-6); border-radius: 0; border-width: 0 0 0 1px; overflow: auto; z-index: 30; box-shadow: var(--elev-card); }
  /* Open, the drawer is a second column: the transcript moves beside it.
     The script sets files-open on the page; :has() covers the no-script case. */
  .session-page.files-open .wrap { max-width: min(46rem, calc(100% - min(44vw, 720px) - var(--space-6) - var(--gutter))); margin-inline: var(--gutter) auto; }
  .session-page:has(.files[open]) .wrap { max-width: min(46rem, calc(100% - min(44vw, 720px) - var(--space-6) - var(--gutter))); margin-inline: var(--gutter) auto; }
  .files-frame { height: calc(100vh - 150px); }
}
/* The sheet's blocks beside the fields (SPEC-ai-studio-phase-e.md section 10):
   Context, Connectors, Agents, the way Writer's editor keeps its Blocks panel. */
.block { margin: 0 0 var(--space-5); padding: var(--space-4); border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--bg); }
.block-title { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font: 600 1rem/1.4 var(--font-display); }
.block-title .ico { width: 18px; height: 18px; color: var(--fg-3); }
.block .hint { margin: 0 0 var(--space-3); }
.context-list { margin-bottom: var(--space-3); }
.context-list li { align-items: flex-start; }
.context-list .ico { flex: 0 0 auto; margin-top: 3px; color: var(--fg-3); }
.doc-name { min-width: 0; display: grid; }
.doc-name a { overflow-wrap: anywhere; }
.doc-name .basis { display: block; color: var(--fg-3); font-size: 0.8125rem; }
.block .attachments { margin: 0 0 var(--space-3); }
.block .composer-attach-input { display: block; margin-bottom: var(--space-3); max-width: none; }
.js .block .composer-attach-input { display: none; }
.block [data-attach] .ico { width: 16px; height: 16px; margin-right: var(--space-2); }
.folder-path { font-family: var(--font-mono); font-size: 0.8125rem; overflow-wrap: anywhere; }
.agent-list, .session-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.agent-list li, .session-list li { margin: 0; max-width: none; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: 0.9375rem; }
.agent-list .ico { width: 10px; height: 10px; color: var(--accent); }
.session-list li { display: grid; gap: 2px; }

/* ── the SEO section and the public Insights pages (SPEC-seo.md) ───────── */
.rail-eyebrow[id^="rail-nav-"] { margin-top: var(--space-4); }
.rail-eyebrow#rail-nav-0 { margin-top: 0; }
/* ── Insights, the public pages ──────────────────────────────────────────────
   The index: a short head, the topics, the newest article set large, then the
   rest as a grid of covers. A card has no box: the photograph is the card, and
   the title under it is the one link, stretched over the whole card.

   The article: title, what it answers, who and when; the cover; then the text
   at a reading measure with its sections listed beside it on a wide screen. */
.insights-top { padding-top: var(--space-12); }
.ins-head h1 { font: var(--type-h2-xl); letter-spacing: var(--track-display); margin: 0; }
.ins-head { margin-bottom: var(--space-6); }

.insight-topics { margin: 0 0 var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.insight-topics ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.insight-topics li { margin: 0; max-width: none; }
.topic {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4);
  border: 1px solid var(--meta); border-radius: var(--radius-pill); background: var(--bg);
  font: 500 0.9375rem/1 var(--font-body); color: var(--fg-2); text-decoration: none;
  transition: background-color var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard);
}
.topic:hover { border-color: var(--fg-2); color: var(--fg-2); }
.topic[aria-current="true"] { background: var(--fg-2); border-color: var(--fg-2); color: var(--bg); }
/* On a phone the topics are one row that scrolls sideways inside itself, out
   to the edges of the screen, so the first article is on the first screen.
   The page itself never scrolls sideways. */
@media (max-width: 679px) {
  .insight-topics ul {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  }
  .insight-topics ul::-webkit-scrollbar { display: none; }
  .insight-topics li { flex: 0 0 auto; }
  .topic { white-space: nowrap; }
}

.insights-list { display: grid; gap: var(--space-12) var(--space-8); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 680px)  { .insights-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .insights-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.insight-card { position: relative; margin: 0; max-width: none; display: flex; flex-direction: column; gap: var(--space-5); }
.insight-card-img {
  display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-lg);
  background: var(--grad-wash), var(--surface);
}
.insight-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.insight-card:hover .insight-card-img img { transform: scale(1.03); }
/* An article with no cover yet gets a tile that names its topic, not a blank
   wash: slate to deep teal, the word set in the display face. */
.insight-card-img.is-empty {
  display: grid; place-items: center; text-align: center;
  background: linear-gradient(135deg, var(--fg-2), var(--accent-active));
}
.insight-card-blank {
  font: 600 clamp(1.25rem, 2vw, 1.625rem)/1.2 var(--font-display); letter-spacing: var(--track-display);
  color: var(--accent-tint); padding: var(--space-6); max-width: 14ch; text-wrap: balance;
}
.insight-card-body { display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.insight-card h2, .insight-card h3 { margin: 0; font: var(--type-h3-xl); color: var(--fg-2); text-wrap: balance; }
.insight-card h2 a, .insight-card h3 a { color: inherit; text-decoration: none; }
.insight-card h2 a::after, .insight-card h3 a::after { content: ""; position: absolute; inset: 0; }
.insight-card:hover h2 a, .insight-card:hover h3 a { color: var(--accent); }
.insight-card h2 a:focus-visible, .insight-card h3 a:focus-visible { outline: none; box-shadow: none; }
.insight-card:focus-within { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: var(--radius-md); }
.insight-card-body > p:not(.insight-meta) {
  margin: 0; max-width: none; font-size: 1.0625rem; line-height: 1.55; color: var(--fg-3);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.insight-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4);
  margin: 0; max-width: none; font: var(--type-caption); font-weight: 400; color: var(--fg-3);
}
.insight-card .insight-meta { margin-top: auto; padding-top: var(--space-2); }

/* The newest article, large: the cover beside the words from 900px. */
.insight-lead { margin-bottom: var(--space-16); }
.insight-lead .insight-card-body > p:not(.insight-meta) { font: var(--type-lead-xl); -webkit-line-clamp: 4; line-clamp: 4; }
.insight-lead .insight-card h2 { font: var(--type-h2-xl); letter-spacing: var(--track-display); }
@media (min-width: 900px) {
  .insight-lead .insight-card { flex-direction: row; align-items: center; gap: var(--space-12); }
  .insight-lead .insight-card-img { flex: 0 0 58%; aspect-ratio: 3 / 2; }
  .insight-lead .insight-card-body { gap: var(--space-5); }
  .insight-lead .insight-card .insight-meta { margin-top: 0; }
}

.insight-pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4); margin-top: var(--space-16); padding-top: var(--space-8); border-top: 1px solid var(--border); }
.insight-pager > :last-child { justify-self: end; }
.insight-pager > :first-child { justify-self: start; }
.insight-pager .ico { width: 1.125rem; height: 1.125rem; stroke-width: 2; }
.insight-pager .call-secondary { gap: var(--space-2); }
.insight-page { font: var(--type-caption); color: var(--fg-3); }
.insights-top .fine a { color: var(--fg-3); }

/* ── one article ─────────────────────────────────────────────────────────── */
.insight-top { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.insight-head { max-width: 56rem; margin-bottom: var(--space-12); }
.insight-topic { margin: 0 0 var(--space-5); max-width: none; }
.insight-topic .tag { text-decoration: none; }
.insight-topic .tag:hover { border-color: var(--fg-2); color: var(--fg-2); }
.insight-head h1 { font: var(--type-h2-xl); letter-spacing: var(--track-display); text-wrap: balance; margin: 0; }
.insight-head .lead { font: var(--type-lead-xl); margin: var(--space-5) 0 0; max-width: 48rem; }
.insight-head .insight-meta { margin-top: var(--space-6); font-size: 0.9375rem; }
.insight-by { font-weight: 600; color: var(--fg-2); }
.insight-cover { display: block; width: 100%; height: auto; max-height: 34rem; object-fit: cover; border-radius: var(--radius-lg); margin: 0; }

.insight-cols { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); padding-bottom: var(--section-y); }
.insight-main { min-width: 0; max-width: 46rem; }
/* From 1080px the sections sit in a rail on the right and stay in view; the
   text keeps the left edge the title sets. In the source the list comes first,
   so a reader who cannot see the page meets the contents before the text. */
@media (min-width: 1080px) {
  .insight-cols.has-toc { grid-template-columns: minmax(0, 46rem) minmax(0, 17rem); justify-content: space-between; align-items: start; }
  .insight-cols.has-toc .insight-main { grid-column: 1; grid-row: 1; }
  .insight-toc { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--head-h, 73px) + var(--space-8)); max-height: calc(100vh - var(--head-h, 73px) - var(--space-16)); overflow: auto; }
}
.insight-toc { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); }
.insight-toc-h { font: 600 0.9375rem/1.3 var(--font-body); color: var(--fg-2); margin: 0 0 var(--space-3); }
.insight-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.insight-toc li { margin: 0; max-width: none; }
.insight-toc a {
  display: block; padding: var(--space-2) 0; font-size: 0.9375rem; line-height: 1.4;
  color: var(--fg-3); text-decoration: none;
}
.insight-toc a:hover { color: var(--accent); }
@media (min-width: 1080px) { .insight-toc { border: 0; border-left: 1px solid var(--border); border-radius: 0; padding: 0 0 0 var(--space-6); } }

.insight-body { font-size: 1.125rem; line-height: 1.75; color: var(--fg-3); }
.insight-body > :first-child { margin-top: 0; }
.insight-body p, .insight-body li { max-width: none; }
.insight-body p { margin: 0 0 var(--space-6); }
.insight-body h2 { margin: var(--space-16) 0 var(--space-5); font: var(--type-h3-xl); font-size: clamp(1.5rem, 2.2vw, 1.875rem); color: var(--fg-2); text-wrap: balance; scroll-margin-top: calc(var(--head-h, 73px) + var(--space-6)); }
.insight-body h3 { margin: var(--space-12) 0 var(--space-3); font: 600 1.25rem/1.35 var(--font-display); color: var(--fg-2); scroll-margin-top: calc(var(--head-h, 73px) + var(--space-6)); }
.insight-body ul, .insight-body ol { margin: 0 0 var(--space-6); padding-left: 1.4rem; }
.insight-body li { margin: 0 0 var(--space-2); }
.insight-body li::marker { color: var(--accent); }
.insight-body a { color: var(--accent); text-underline-offset: 3px; }
.insight-body strong { color: var(--fg-2); }
.insight-body img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-lg); margin: var(--space-8) 0; }
.insight-body blockquote {
  margin: var(--space-8) 0; padding: var(--space-2) 0 var(--space-2) var(--space-6);
  border-left: 3px solid var(--accent); font: var(--type-lead-xl); color: var(--fg-2);
}
.insight-body blockquote p { margin: 0; }
.insight-body pre { padding: var(--space-4); border-radius: var(--radius-sm); background: var(--surface); overflow-x: auto; font-size: 0.875rem; }
.insight-body hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-12) 0; }

.insight-related { background: var(--grad-mist); }

.insight-gate { display: grid; gap: var(--space-4); margin: var(--space-12) 0 0; padding: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.insight-gate h2 { margin: 0; font: var(--type-h3-xl); color: var(--fg-2); }
.insight-gate p { margin: 0; }
.insight-gate label { display: grid; gap: var(--space-1); font-weight: 500; margin: 0; }
.insight-gate input[type="text"], .insight-gate input[type="email"] { min-height: 48px; border: 1px solid var(--meta); border-radius: var(--radius-sm); padding: 0 var(--space-4); font: inherit; background: var(--bg); }
.insight-gate .insight-consent { display: flex; align-items: flex-start; gap: var(--space-3); font-weight: 400; }
.insight-gate .call-primary { justify-self: start; }
.insight-download { margin: var(--space-12) 0 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.tile-figure { margin: 0 0 var(--space-1); font: 600 1.5rem/1.2 var(--font-display); }
.next-steps { padding-left: 1.2rem; display: grid; gap: var(--space-2); }
.post-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.post-head h1 { margin: var(--space-1) 0 0; font: 600 1.375rem/1.3 var(--font-display); overflow-wrap: anywhere; }
.post-layout { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .post-layout { grid-template-columns: minmax(0, 1fr) 24rem; align-items: start; } }
.post-form { display: grid; gap: var(--space-4); }
.post-form .field-row, .kw-form .field-row { margin: 0; }
.post-form label, .kw-form label { font-weight: 500; display: block; margin-bottom: 4px; }
.post-form .hint, .kw-form .hint { margin: 0 0 var(--space-2); color: var(--fg-3); font-size: 0.875rem; }
.post-form input[type="text"], .post-form textarea, .post-form select, .kw-form input[type="text"], .kw-form select { width: 100%; min-height: 44px; border: 1px solid var(--meta); border-radius: 8px; padding: var(--space-2) var(--space-3); font: inherit; background: var(--bg); }
.post-form textarea { font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.55; resize: vertical; }
.post-form-grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .post-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.post-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.post-side { display: grid; gap: var(--space-5); }
.seo-check, .ai-suggestions, .ai-form, .post-events, .post-keywords { padding: var(--space-4); border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--bg); }
.seo-check h2, .ai-suggestions h2, .ai-form h2, .post-events h2, .post-keywords h2 { margin: 0 0 var(--space-3); font: 600 1.0625rem/1.4 var(--font-display); }
.seo-score-line { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); }
.seo-score { display: inline-grid; place-items: center; min-width: 3rem; height: 3rem; border-radius: 50%; font: 600 1.25rem/1 var(--font-display); background: var(--surface-warm); color: var(--fg-2); }
.seo-score.is-good { background: var(--accent-tint); color: var(--accent); }
.seo-score.is-low { background: var(--surface-warm); color: var(--fg-3); }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.check { margin: 0; max-width: none; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--space-2); font-size: 0.875rem; color: var(--fg-2); }
.check::before { content: ""; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; border: 1px solid var(--border); }
.check.is-ok::before { background: var(--accent); border-color: var(--accent); }
.check.is-not::before { background: var(--surface-warm); border-color: var(--fg-3); }
.check strong { display: block; color: var(--fg); }
.ai-apply { display: grid; gap: var(--space-2); }
.ai-apply label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); font-size: 0.875rem; }
.ai-apply label strong { display: block; }
.ai-apply span { overflow-wrap: anywhere; }
.ai-form .row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ai-form .call-secondary .ico { width: 16px; height: 16px; margin-right: var(--space-2); }
.events { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: 0.875rem; color: var(--fg-3); }
.events li { margin: 0; max-width: none; }
.audit-fixes { margin-top: var(--space-2); }
.audit-fixes summary { cursor: pointer; color: var(--accent); font-size: 0.875rem; }
.kw-hits { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 0.875rem; }
.kw-hits li { margin: 0; max-width: none; }
.kw-hits li.is-not { color: var(--fg-3); text-decoration: line-through; }
.post-read .insight-body { font-size: 1rem; }
.is-current { color: var(--accent); }

/* A phone: the transcript's turns and cards shrink to the column instead of
   widening it (grid items default to their content's minimum width). */
.session-page .turns { min-width: 0; }
.session-page .turn, .session-page .turn > * { min-width: 0; max-width: 100%; }
.session-page .action-card, .session-page .turn-inputs, .session-page .activity { min-width: 0; }
.session-page .action-card h3, .session-page .action-card p, .session-page .activity-label { overflow-wrap: anywhere; }
/* The check's label and message both sit beside the mark, never under it. */
.check > strong { grid-column: 2; }
.check > span { grid-column: 2; }

/* ── Phase F: the console look and the helpers (SPEC-ai-studio-phase-f.md) ──
   Tokens only. The rail turns slate (the site's own footer colour), the
   canvas carries a dot grid that fades under the first screen, cards lose
   their shadow, the composer alone carries the gradient ring, and every
   signed-in page gets the studio bar, the palette, the guide and the tour. */

/* the canvas */
.has-rail main { position: relative; isolation: isolate; min-width: 0; }
.has-rail main::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--fg-2) 16%, transparent) 1px, transparent 1.4px) 0 0 / 24px 24px;
  -webkit-mask-image: linear-gradient(to bottom, var(--fg) 0, var(--fg) 30vh, transparent 95vh);
  mask-image: linear-gradient(to bottom, var(--fg) 0, var(--fg) 30vh, transparent 95vh);
}
.home { position: relative; }
.home::before {
  content: ""; position: absolute; top: -4rem; left: 50%; width: min(64rem, 100%); height: 26rem; transform: translateX(-50%);
  z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent-tint) 85%, transparent), transparent 62%);
}
.home-greeting { font: 600 clamp(1.75rem, 3vw, 2.25rem)/1.2 var(--font-display); letter-spacing: -0.02em; }

/* the surfaces: a hairline, never a shadow; the composer's ring */
.composer { box-shadow: none; border: 1px solid transparent; background: linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(120deg, var(--accent), var(--accent-soft) 55%, var(--accent-tint)) border-box; }
.composer:focus-within { box-shadow: var(--focus-ring); }
.sheet, .segmented [role="tab"][aria-selected="true"] { box-shadow: none; }
.segmented [role="tab"][aria-selected="true"] { outline: 1px solid var(--border-soft); }
.action-card, .tile { transition: border-color var(--motion-fast) var(--ease-standard); }
.action-card:hover, .action-card:focus-within { border-color: var(--accent); }
.tile { border-color: var(--border-soft); }
.tile:focus-within { border-color: var(--accent); }

/* the rail, slate */
.studio-rail, .studio-rail.is-open {
  --rail-fg: color-mix(in srgb, var(--bg) 84%, transparent);
  --rail-dim: color-mix(in srgb, var(--bg) 60%, transparent);
  --rail-fill: color-mix(in srgb, var(--bg) 11%, transparent);
  --rail-line: color-mix(in srgb, var(--bg) 14%, transparent);
  background: var(--fg-2); color: var(--rail-fg);
}
@media (min-width: 900px) { .studio-rail { background: var(--fg-2); border-right: 0; } }
.rail-head { padding: var(--space-4) var(--space-4) var(--space-3); }
.rail-mark { background: var(--bg); border-radius: var(--radius-sm); padding: 4px 10px; }
.rail-eyebrow { color: var(--rail-dim); }
.rail-nav a, .rail-list a { color: var(--rail-fg); }
.rail-nav a:hover, .rail-list a:hover { background: var(--rail-fill); color: var(--bg); }
.rail-nav a[aria-current="page"], .rail-list a[aria-current="page"] { background: var(--rail-fill); color: var(--bg); box-shadow: inset 3px 0 0 var(--accent-soft); }
.rail-nav a.is-accent, .rail-list a.is-accent, .rail-list a.rail-more { color: var(--bg); }
.rail-nav a.is-accent { font-weight: 600; }
.rail-ico { color: var(--rail-dim); }
.rail-nav a.is-accent .rail-ico, .rail-list a.is-accent .rail-ico, .rail-nav a[aria-current="page"] .rail-ico, .rail-nav a:hover .rail-ico { color: var(--accent-soft); }
.rail-count { background: var(--bg); color: var(--fg-2); }
.rail-empty { color: var(--rail-dim); }
.rail-list .live-dot { display: inline-block; width: 8px; height: 8px; margin-right: var(--space-2); vertical-align: 1px; background: var(--accent-soft); }
.rail-account { border-top-color: var(--rail-line); }
.rail-name { color: var(--bg); }
.rail-roles { color: var(--rail-dim); }
.rail-avatar { background: var(--accent-soft); color: var(--fg-2); }
.rail-usage, .rail-usage .small { color: var(--rail-dim); }
.rail-usage:hover .small { color: var(--bg); }
.usage-meter, .usage-meter::-webkit-meter-bar { background: var(--rail-fill); }
.usage-meter::-webkit-meter-optimum-value, .usage-meter::-webkit-meter-suboptimum-value, .usage-meter::-webkit-meter-even-less-good-value, .usage-meter::-moz-meter-bar { background: var(--accent-soft); }
.rail-account .signout .call-quiet { color: var(--rail-fg); border-bottom-color: transparent; }
.rail-account .signout .call-quiet:hover { color: var(--bg); border-bottom-color: var(--rail-line); }
.rail-help { display: none; }
.js .rail-help {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 44px; margin: 0 0 var(--space-4);
  padding: 0 var(--space-3); border: 1px solid var(--rail-line); border-radius: var(--radius-sm);
  background: transparent; color: var(--rail-fg); font: 400 0.875rem/1 var(--font-body); cursor: pointer; text-align: left;
}
.rail-help:hover, .rail-help:focus-visible { background: var(--rail-fill); color: var(--bg); }
.rail-help .ico { width: 18px; height: 18px; color: var(--accent-soft); }
.rail-help span { flex: 1 1 auto; }
.rail-help kbd { background: transparent; border-color: var(--rail-line); color: var(--rail-dim); }

/* the keys' garment */
.studio kbd {
  display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.375rem; padding: 0 0.4rem;
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; background: var(--surface);
  font: 500 0.6875rem/1 var(--font-supporting); color: var(--fg-3); letter-spacing: 0.02em;
}

/* the studio bar */
.studio-bar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--space-3);
  min-height: 56px; padding: var(--space-2) var(--gutter);
  background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.crumbs { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--space-2); font: var(--type-caption); color: var(--fg-3); white-space: nowrap; overflow: hidden; }
.crumbs a { color: var(--fg-3); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current="page"] { color: var(--fg); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.crumb-sep { color: var(--meta); }
.cmd-caret { color: var(--accent); font: 700 1.125rem/1 var(--font-supporting); animation: caret-blink 1.2s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0.25; } }
.cmd-open, .bar-help { display: none; }
.js .cmd-open {
  display: inline-flex; align-items: center; gap: var(--space-3); width: min(22rem, 40vw); min-height: 44px;
  padding: 0 var(--space-3) 0 var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--bg); color: var(--fg-3); font: 400 0.9375rem/1 var(--font-body); cursor: pointer;
}
.js .cmd-open:hover, .js .cmd-open:focus-visible { border-color: var(--accent); color: var(--fg); }
.cmd-open-label { flex: 1 1 auto; text-align: left; }
.js .bar-help {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg); color: var(--fg-2);
  font: 500 0.9375rem/1 var(--font-body); cursor: pointer; flex: 0 0 auto;
}
.js .bar-help:hover, .js .bar-help:focus-visible { border-color: var(--accent); color: var(--accent); }
.bar-help .ico { width: 18px; height: 18px; }
@media (max-width: 719px) {
  .js .cmd-open, .js .bar-help { width: 44px; padding: 0; justify-content: center; }
  .cmd-open-label, .cmd-open kbd, .bar-help span { display: none; }
}
/* On a desktop the site header is gone and the bar is the top of the canvas;
   below 900px the header stays above it and the bar sits under it. */
@media (max-width: 899px) { .studio-bar { position: static; } }

/* the palette */
.cmd { border: 0; padding: 0; background: transparent; width: min(40rem, calc(100vw - 32px)); max-width: none; margin: 12vh auto auto; }
.cmd::backdrop { background: color-mix(in srgb, var(--fg-2) 45%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cmd-box { background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: 0 24px 64px color-mix(in srgb, var(--fg-2) 28%, transparent); overflow: hidden; }
.cmd-field { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-4); border-bottom: 1px solid var(--border-soft); }
.cmd-field .cmd-caret { font-size: 1.375rem; }
.cmd-input { flex: 1 1 auto; min-width: 0; min-height: 56px; border: 0; background: transparent; font: 400 1.0625rem/1.4 var(--font-body); color: var(--fg); }
.cmd-input:focus { outline: none; }
.cmd-list { list-style: none; margin: 0; padding: var(--space-2); max-height: min(28rem, 60vh); overflow: auto; }
.cmd-group { margin: 0; max-width: none; padding: var(--space-3) var(--space-3) var(--space-1); font: var(--type-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--fg-3); }
.cmd-row { margin: 0; max-width: none; }
.cmd-row > a, .cmd-row > button {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3);
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--fg); text-decoration: none; text-align: left; font: inherit; cursor: pointer;
}
.cmd-row-mark { color: var(--meta); font: 700 1rem/1 var(--font-supporting); flex: 0 0 1rem; }
.cmd-row-text { flex: 1 1 auto; min-width: 0; display: grid; }
.cmd-row-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-row-line { font-size: 0.8125rem; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-row[aria-selected="true"] > a, .cmd-row[aria-selected="true"] > button { background: var(--accent-tint); }
.cmd-row[aria-selected="true"] .cmd-row-mark { color: var(--accent); }
.cmd-row-ask .cmd-row-mark { color: var(--accent); }
.cmd-empty { margin: 0; padding: var(--space-5) var(--space-4); color: var(--fg-3); }
.cmd-foot { display: flex; gap: var(--space-5); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--border-soft); font: var(--type-caption); color: var(--fg-3); }
.cmd-foot kbd { margin-right: 4px; }

/* the guide, a panel on the right */
.guide { border: 0; padding: 0; background: transparent; width: min(26rem, 100vw); max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0 0 0 auto; }
.guide::backdrop { background: color-mix(in srgb, var(--fg-2) 30%, transparent); }
.guide-box { height: 100%; overflow: auto; background: var(--bg); border-left: 1px solid var(--border-soft); padding: var(--space-4) var(--space-6) var(--space-8); box-shadow: -12px 0 40px color-mix(in srgb, var(--fg-2) 16%, transparent); }
.guide-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.guide-eyebrow { margin: 0; font: var(--type-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--accent); }
.guide-close { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; color: var(--fg-3); cursor: pointer; border-radius: 50%; margin-right: -8px; }
.guide-close:hover { background: var(--surface); color: var(--fg); }
.guide-close .ico { width: 18px; height: 18px; }
.guide-title { margin: 0 0 var(--space-3); font: 600 1.5rem/1.25 var(--font-display); }
.guide-what { color: var(--fg-2); margin: 0 0 var(--space-5); }
.guide-sub { font: 600 0.9375rem/1.4 var(--font-display); margin: var(--space-6) 0 var(--space-3); color: var(--fg-2); }
.guide-can { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.guide-can li { margin: 0; max-width: none; display: grid; gap: 2px; padding: var(--space-3); border: 1px solid var(--border-soft); border-radius: var(--radius-md); }
.guide-can li:hover { border-color: var(--accent); }
.guide-can a { font-weight: 500; color: var(--fg); text-decoration: none; min-height: 24px; }
.guide-can a:hover { color: var(--accent); }
.guide-note { font-size: 0.8125rem; color: var(--fg-3); }
.guide-keys { margin: 0; display: grid; gap: var(--space-2); }
.guide-keys div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.guide-keys dt { display: flex; gap: 4px; }
.guide-keys dd { margin: 0; font-size: 0.875rem; color: var(--fg-2); }
.guide-tour { margin: var(--space-8) 0 0; }
.guide-tour .ico { width: 18px; height: 18px; margin-right: var(--space-2); vertical-align: -4px; }

/* opening: one short fade, none under reduced motion */
.cmd[open] { animation: helper-in var(--motion-fast) var(--ease-out); }
.guide[open] { animation: guide-in var(--motion-base) var(--ease-out); }
@keyframes helper-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes guide-in { from { opacity: 0; transform: translateX(16px); } }

/* the tour: a cut-out over one thing, the card beside it */
.tour { position: fixed; inset: 0; z-index: 60; }
.tour-shade { position: absolute; inset: 0; }
.tour-spot {
  position: absolute; border-radius: var(--radius-md); pointer-events: none;
  box-shadow: 0 0 0 9999px color-mix(in srgb, var(--fg-2) 58%, transparent), 0 0 0 3px var(--accent-soft);
  transition: top var(--motion-base) var(--ease-standard), left var(--motion-base) var(--ease-standard), width var(--motion-base) var(--ease-standard), height var(--motion-base) var(--ease-standard);
}
.tour-card { position: absolute; width: min(22rem, calc(100vw - 32px)); padding: var(--space-5); background: var(--bg); border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--border-soft), 0 16px 48px color-mix(in srgb, var(--fg-2) 30%, transparent); }
.tour-step { margin: 0 0 var(--space-2); font: var(--type-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--accent); }
.tour-text { margin: 0 0 var(--space-4); color: var(--fg); }
.tour-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.tour-back, .tour-skip { min-height: 40px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--fg-3); font: inherit; cursor: pointer; }
.tour-back:hover, .tour-skip:hover { background: var(--surface); color: var(--fg); }
.tour-back[disabled] { visibility: hidden; }
.tour-skip { margin-left: auto; }
.tour-row .call-primary { min-height: 40px; padding: 0 var(--space-5); }
@media (prefers-reduced-motion: reduce) {
  .cmd-caret { animation: none; }
  .cmd[open], .guide[open] { animation: none; }
  .tour-spot { transition: none; }
}

/* Phase F, after the first look on the box: the bar is opaque enough that the
   composer's note does not read through it; the palette's field carries no
   ring of its own (the box is the ring); the drawer on a phone does not repeat
   the mark the header already shows; the grid fades sooner and never shows
   through a table or a card that had no fill of its own. */
.studio-bar { background: color-mix(in srgb, var(--bg) 94%, transparent); }
.cmd-input:focus, .cmd-input:focus-visible { outline: none; box-shadow: none; border: 0; }
@media (max-width: 899px) { .studio-rail .rail-head { display: none; } .studio-rail.is-open { padding-top: var(--space-4); } }
.has-rail main::before {
  -webkit-mask-image: linear-gradient(to bottom, var(--fg) 0, var(--fg) 12vh, transparent 70vh);
  mask-image: linear-gradient(to bottom, var(--fg) 0, var(--fg) 12vh, transparent 70vh);
}
.studio .table-wrap, .studio .portal-deal, .studio .portal-dim, .studio .crm-row, .studio .run-form, .studio .app-facts, .studio .portal-upload, .studio .notice, .studio .pending, .studio .card:not(.mk-card) { background: var(--bg); }
/* Sign out is a <button> in .call-quiet's garment: on the slate rail the
   browser's own white fill showed as a box. It is text, like the rest. */
.rail-account .signout .call-quiet { background: transparent; border: 0; border-bottom: 1px solid transparent; padding: 0; min-height: 44px; font: inherit; font-size: 0.875rem; cursor: pointer; }

/* -- the section switcher (SPEC-sections-cadence-page-copy.md section 2) --
   Three cells under the mark: AI studio, CRM, SEO. The current one is the
   light cell; the rail below it lists that section only. The CRM cell leaves
   for the CRM app, which carries the same three cells back. */
.rail-sections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin: 0 var(--space-3) var(--space-4); padding: 2px; border-radius: var(--radius-sm); background: var(--rail-fill); }
.rail-sections a { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 var(--space-1); border-radius: 4px; color: var(--rail-fg); text-decoration: none; font: 600 0.8125rem/1 var(--font-supporting); white-space: nowrap; }
.rail-sections a:hover { background: var(--rail-fill); color: var(--bg); }
.rail-sections a[aria-current="true"] { background: var(--bg); color: var(--fg-2); }

/* -- the article cadence (SPEC-sections-cadence-page-copy.md section 3) --
   The Cadence page in the SEO section. The planner's notes, Add a slot and
   the settings sit in quiet panels; the plan is a data table whose cells
   stack below 640px (site.css), each slot's edit form folded into its own
   row. Buttons that read as text (Skip, Delete) drop the browser's fill and
   the link arrow. Tokens only. */
.cadence-page td { overflow-wrap: anywhere; vertical-align: top; }
.cadence-page button[disabled] { opacity: 0.5; cursor: not-allowed; }
.cadence-page .lead { margin-bottom: var(--space-3); }
.cadence-status { margin: 0 0 var(--space-6); color: var(--fg-2); font-weight: 500; }
.cadence-working { display: flex; align-items: center; gap: var(--space-3); }
.cadence-working .live-dot { display: inline-block; flex: 0 0 10px; }
.cadence-panel { margin: 0 0 var(--space-8); padding: var(--space-5); border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--bg); }
.cadence-panel h2 { margin: 0 0 var(--space-4); font: 600 1.0625rem/1.4 var(--font-display); }
.cadence-page .post-form textarea { font: var(--type-body); font-family: var(--font-body); min-height: 5rem; }
.cadence-head { margin: var(--space-8) 0 var(--space-4); }
.cadence-head h2 { margin: 0; font: var(--type-h3); }
.cadence-page .table-wrap { margin-bottom: var(--space-6); }
.cadence-date { color: var(--fg-2); font-weight: 500; white-space: nowrap; }
.cadence-title { color: var(--fg-2); font-weight: 600; }
.cadence-brief { margin: var(--space-2) 0 0; max-width: 60ch; }
.cadence-new { color: var(--accent); font-weight: 600; }
.pill.cadence-late { margin-top: var(--space-1); background: var(--surface-warm); color: var(--fg-2); border: 1px solid var(--meta); }
.cadence-error { margin: var(--space-2) 0 0; padding-left: var(--space-3); border-left: 2px solid var(--meta); color: var(--fg-2); max-width: 48ch; }
.cadence-edit { margin-top: var(--space-2); }
.cadence-edit > summary, .cadence-add > summary { display: flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 500; cursor: pointer; }
.data td .cadence-edit form { display: grid; margin: var(--space-3) 0 0; min-width: 0; }
.cadence-edit .post-form-grid { grid-template-columns: minmax(0, 1fr); }
.cadence-page input[readonly] { background: var(--surface); color: var(--fg-3); cursor: default; }
.cadence-kept { margin: 0 0 var(--space-3); }
.cadence-add form { margin-top: var(--space-4); }
.cadence-page button.call-quiet { min-height: 44px; padding: 0; border: 0; border-bottom: 1px solid var(--accent-tint); background: transparent; font: inherit; font-weight: 500; cursor: pointer; }
.cadence-page button.call-quiet::after { content: none; }
.cadence-page .row-actions { align-items: center; }
.cadence-check { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; margin: 0; font-weight: 500; }
.cadence-check input { width: auto; min-height: 0; margin: 0; accent-color: var(--accent); }
.cadence-days { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); margin: 0; padding: 0; border: 0; }
.cadence-days .hint { flex-basis: 100%; margin: 0; }
.cadence-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cadence-facts li { margin: 0; max-width: none; }

/* -- page copy editing (SPEC-sections-cadence-page-copy.md section 4) --
   The editor, the publish page and the preview's strip. The search title and
   description, the edits whose source text changed and the publish bar sit in
   quiet panels; the page's sections are folded blocks, each unit a row with
   its kind, its state, the live text in a tinted box and its fields at full
   width. Long texts wrap anywhere, so nothing scrolls sideways at 390px; the
   before and after of a change sit side by side from 720px. Buttons that read
   as text (Discard) drop the browser's fill and the link arrow; each Discard
   is a form of its own after its section's Save. The strip is
   the one rule loaded on a page as built (the preview): sticky at the top,
   with the site header kept below it. Tokens only. */
.copy-page .lead { margin-bottom: var(--space-4); }
.copy-notice { white-space: pre-line; }
.copy-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin: 0 0 var(--space-3); }
.copy-summary { margin: 0 0 var(--space-6); color: var(--fg-2); font-weight: 500; }
.copy-head, .copy-attention, .copy-publish-bar, .copy-gone { margin: 0 0 var(--space-6); padding: var(--space-5); border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--bg); min-width: 0; }
.copy-head h2, .copy-attention h2, .copy-gone h2 { margin: 0 0 var(--space-2); font: 600 1.0625rem/1.4 var(--font-display); }
.copy-head > .hint, .copy-attention > .hint, .copy-gone > .hint { margin: 0 0 var(--space-2); max-width: 70ch; }
.copy-groups { display: grid; gap: var(--space-3); }
.copy-group { min-width: 0; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--bg); }
.copy-group > summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-4); min-height: 48px; padding: var(--space-3) var(--space-5); color: var(--fg-2); font-weight: 600; cursor: pointer; }
.copy-group[open] > summary { border-bottom: 1px solid var(--border-soft); }
.copy-group-title { min-width: 0; overflow-wrap: anywhere; }
.copy-group-count { color: var(--fg-3); font-size: 0.875rem; font-weight: 400; }
.copy-group > .copy-form { padding: 0 var(--space-5) var(--space-5); }
.copy-form { display: grid; gap: 0; min-width: 0; }
.copy-unit { display: grid; gap: var(--space-3); min-width: 0; margin: 0; max-width: none; padding: var(--space-4) 0; border-top: 1px solid var(--border-soft); }
.copy-group .copy-unit:first-of-type, .copy-head .copy-unit:first-of-type, .copy-orphans > .copy-unit:first-child { border-top: 0; }
.copy-unit-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.copy-kind { font: var(--type-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--fg-3); }
.copy-state { font-size: 0.8125rem; }
.copy-live { min-width: 0; margin: 0; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface); }
.copy-live-label { display: block; margin-bottom: var(--space-1); color: var(--fg-3); font-size: 0.8125rem; font-weight: 600; }
.copy-live p, .copy-live li { margin: 0; max-width: none; color: var(--fg-2); overflow-wrap: anywhere; }
.copy-live-after { margin: var(--space-2) 0 0; padding-left: 1.2rem; }
.copy-hidden { color: var(--fg-3); font-style: italic; }
.copy-draft { background: var(--surface-warm); }
.copy-page .post-form .field-row { min-width: 0; }
.copy-page .post-form textarea { font: var(--type-body); font-family: var(--font-body); resize: vertical; }
.copy-page .post-form input[type="text"], .copy-page .post-form textarea { max-width: 100%; }
.copy-page .post-form .copy-check, .copy-check { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; margin: 0; font-weight: 500; }
.copy-check input { width: auto; min-height: 0; margin: 0; accent-color: var(--accent); }
.copy-count { margin: var(--space-1) 0 0; color: var(--fg-3); font-size: 0.875rem; }
.copy-count.is-over { color: var(--fg); font-weight: 600; }
.copy-save { margin: var(--space-4) 0 0; }
.copy-page button.call-quiet { justify-self: start; min-height: 44px; padding: 0; border: 0; border-bottom: 1px solid var(--accent-tint); background: transparent; font: inherit; font-weight: 500; cursor: pointer; }
.copy-page button.call-quiet::after { content: none; }
.copy-inline { margin: 0; }
.copy-orphans, .copy-changes, .copy-refusals ul { list-style: none; margin: 0; padding: 0; }
.copy-orphans > li, .copy-changes > li, .copy-refusals li { max-width: none; }
.copy-gone .copy-orphans li { margin: var(--space-2) 0 0; overflow-wrap: anywhere; }
.copy-publish-bar { display: grid; gap: var(--space-4); }
.copy-publish-bar form { margin: 0; }
.copy-none { margin: 0; color: var(--fg-2); }
.copy-refusals { padding-left: var(--space-3); border-left: 2px solid var(--meta); }
.copy-refusals p { margin: 0; color: var(--fg-2); }
.copy-refusals li { margin: var(--space-2) 0 0; color: var(--fg-2); overflow-wrap: anywhere; }
.copy-change { display: grid; gap: var(--space-3); min-width: 0; padding: var(--space-4) 0; border-top: 1px solid var(--border-soft); }
.copy-pair { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .copy-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.copy-after { border-left: 3px solid var(--accent); }
.copy-gone-pages { margin: var(--space-4) 0 0; overflow-wrap: anywhere; }
/* A section's discards: small forms of their own after its Save, so no
   Discard is ever the save form's default button. */
.copy-discards { min-width: 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--border-soft); }
.copy-group > .copy-discards { margin: 0 var(--space-5); padding-bottom: var(--space-5); }
.copy-discards ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.copy-discards li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3); max-width: none; margin: 0; color: var(--fg-2); overflow-wrap: anywhere; }
.copy-discard-link { justify-self: start; font-size: 0.875rem; }
/* The strip: one line from 640px, two below it, a fixed height either way so
   the site header can stick just under it. The page's own site.css colours
   strong text and a hovered link for a white ground (--fg-2 and
   --accent-hover, 2.29:1 and 3.07:1 on this black), so both are set here. */
.copy-preview-strip { position: sticky; top: 0; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: space-between; gap: 0 var(--space-4); height: 2.75rem; padding: 0 var(--space-4); overflow: hidden; background: var(--fg); color: var(--bg); font: 400 0.875rem/1.35 var(--font-supporting); }
.copy-preview-strip p { margin: 0; max-width: none; color: var(--bg); }
.copy-preview-strip strong { font-weight: 600; color: inherit; }
.copy-preview-strip a { color: var(--bg); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.copy-preview-strip a:hover { color: var(--accent-tint); }
.copy-preview-strip ~ .site-head { top: 2.75rem; }
@media (max-width: 639px) {
  .copy-preview-strip { height: 3.75rem; }
  .copy-preview-strip ~ .site-head { top: 3.75rem; }
}

/* ── the share kit (30 September, the third review) ──────────────────────
   The row of chips under a listing's figures, the caption as a field the
   buttons read from, and the kit on the workspace listing page with the two
   images. A chip is a small pill; the icon carries the network, the word
   says it. */
.share-row {
  list-style: none; margin: var(--space-5) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
}
.share-row li { margin: 0; max-width: none; }
.share-row-label { font: var(--type-caption); color: var(--fg-3); margin-right: var(--space-1); }
.share-chip {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.5rem; padding: 0 0.85rem 0 0.65rem;
  border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg); color: var(--fg-2);
  font: 600 0.8125rem/1 var(--font-supporting); text-decoration: none; cursor: pointer;
  transition: border-color var(--motion-base) var(--ease-standard), background var(--motion-base) var(--ease-standard);
}
.share-chip .ico { width: 1.05rem; height: 1.05rem; color: var(--accent); flex: none; }
.share-chip:hover, .share-chip.is-done { border-color: var(--accent); background: var(--accent-tint); color: var(--fg-2); }
.share-caption-label { display: block; font: var(--type-caption); color: var(--fg-3); margin-bottom: var(--space-2); }
.share-caption {
  width: 100%; margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
  font: 400 0.9375rem/1.5 var(--font-body); color: var(--fg-2); resize: vertical;
}
.share-list { grid-template-columns: 1fr; }
@media (min-width: 560px) { .share-list { grid-template-columns: 1fr 1fr; } }
.share-kit { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .share-kit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.share-kit-text label { display: block; font-weight: 600; color: var(--fg-2); margin-bottom: var(--space-2); }
.share-kit-images { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
.share-kit-img { display: block; color: var(--fg-3); text-decoration: none; font: var(--type-caption); }
.share-kit-img img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-tint); margin-bottom: var(--space-2); }
.share-kit-img.is-square img { max-width: 320px; }
.share-kit-img:hover img { border-color: var(--accent); }

/* A listing whose ribbon is hidden has no validation card: the record takes
   the whole measure rather than leaving a blank column. */
@media (min-width: 1080px) {
  .mk-d-grid.is-plain { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "rest"; }
}

/* ── the ribbon switch on the workspace listing page ───────────────────── */
.ws-switch { margin: var(--space-5) 0 var(--space-4); padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.ws-switch-state { margin: 0 0 var(--space-3); color: var(--fg-2); }
.deal-ws .deal-img, .split .mk-d-photo { position: relative; }

/* ── the account menu in the top bar ────────────────────────────────────── */
.top-account { position: relative; }
.top-account > summary { list-style: none; cursor: pointer; padding: var(--space-1) var(--space-2); border-radius: 4px; color: inherit; }
.top-account > summary::-webkit-details-marker { display: none; }
.top-account > summary:hover, .top-account[open] > summary { background: color-mix(in srgb, var(--bg) 11%, transparent); color: var(--bg); }
.top-account > summary .ico { width: 0.9rem; height: 0.9rem; margin-left: 0.15rem; opacity: 0.8; transition: transform var(--motion-base) var(--ease-standard); }
.top-account[open] > summary .ico { transform: rotate(180deg); }
.top-menu {
  position: absolute; right: 0; top: calc(100% + 0.5rem); min-width: 18rem; z-index: 40;
  padding: var(--space-2); background: var(--bg); color: var(--fg-2);
  border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--elev-card);
  display: grid; gap: 2px;
}
.top-menu-who { margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: 1px solid var(--border-soft); display: grid; gap: 2px; }
.top-menu-who strong { color: var(--fg-2); }
.top-menu-who span { font: var(--type-caption); font-weight: 400; color: var(--fg-3); overflow-wrap: anywhere; }
.top-menu a, .top-menu button {
  display: block; width: 100%; text-align: left; padding: 0.55rem 0.75rem; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--fg-2); font: 500 0.9375rem/1.2 var(--font-body); text-decoration: none; cursor: pointer;
}
.top-menu a:hover, .top-menu button:hover { background: var(--accent-tint); color: var(--fg-2); }
.top-menu .signout { margin: var(--space-1) 0 0; padding-top: var(--space-1); border-top: 1px solid var(--border-soft); }

/* ── the sign-in page: two doors ─────────────────────────────────────────── */
.signin-grid { display: grid; gap: var(--space-12); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .signin-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-16); } }
.signin-new { padding: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.signin-new h2 { margin: 0 0 var(--space-4); font: var(--type-h3-xl); color: var(--fg-2); }
.signin-new p { max-width: 48ch; }
.signin-new .row { margin: var(--space-5) 0; }

/* ── /book: the form before the call ──────────────────────────────────────── */
.book-split { align-items: start; }
.book-about {
  display: grid; gap: 2px; margin: 0 0 var(--space-6); padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.book-about strong { color: var(--fg-2); font: 600 1.0625rem/1.3 var(--font-body); }
.book-about span:last-child { font: var(--type-caption); font-weight: 400; color: var(--fg-3); }
.book-form .hint { display: block; margin-top: var(--space-1); font: var(--type-caption); font-weight: 400; color: var(--fg-3); }
.book-form .book-for[hidden] { display: none; }
.book-who { display: grid; gap: var(--space-2); }
.book-person {
  display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg); cursor: pointer;
}
.book-person input { margin-top: 0.3rem; }
.book-person strong { display: block; color: var(--fg-2); }
.book-person .sub { display: block; font: var(--type-caption); font-weight: 400; color: var(--fg-3); }
.book-person:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
.book-side { padding: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.book-side h2 { margin: 0 0 var(--space-4); font: var(--type-h3-xl); color: var(--fg-2); }
.book-side .ticks li { max-width: none; }
@media (min-width: 900px) { .book-side { position: sticky; top: calc(var(--head-h, 73px) + var(--space-6)); } }