/* static/setup/setup.css · D-241 — Setup wears the Concreet look, scoped.
 *
 * Two parts:
 *   1. The Concreet skin, scoped to `.su-skin` — the same token values as the
 *      Assessment v2 skin (static/assessment-v2/av2.css, design-system §7.15),
 *      Performance → SEO (static/performance-seo/seo.css) and Strategy
 *      (static/strategy/strategy.css). The class sits on the level-1 tab tray
 *      (#setupTabTray, since the follow-up of 2026-10-10), Setup's control
 *      bars, its two rails, the Review list and the detail slots — never on
 *      `.setup-shell` or `.setup-toprow`. The token block is the only place in
 *      this file a colour literal may appear.
 *   2. Setup's existing components restyled on those tokens. No markup was
 *      rewritten: every rule below targets a class the surface already ships.
 *
 * OUT OF SCOPE, on purpose: Knowledge documents, Original research and
 * Approved research. app.html's setupSelectArea() takes `.su-skin` off the
 * detail slot while one of them is open (SETUP_SKIN_DEFERRED), so those three
 * panes render exactly as before. Guarded by tests/test_setup_concreet_skin.py.
 *
 * Board: docs/design/mocks/2026-10-10-setup-concreet-board.html (built on Alex's
 * request of 2026-10-10; he has not walked the board itself).
 */

/* su-skin-tokens:start */
.su-skin {
  --sans: "Archivo", "Arial Narrow", Arial, sans-serif;
  --serif: "Archivo", "Arial Narrow", Arial, sans-serif;
  --paper-0: #FFFFFF; --paper-1: #F1F0EC; --paper-2: #E6E4DE; --paper-3: #C9C6BE; --paper-4: #B3B0A8;
  --ink-0: #0D0D0B; --ink-1: #2E2D2A; --ink-2: #3A3935; --ink-3: #65635D; --ink-4: #6E6C66; --ink-5: #8F8D86;
  --accent: #0D0D0B;
  --concreet: #17B26F; --concreet-deep: #0B7A4A; --concreet-ink: #0B7A4A; --concreet-soft: #DDF3E8;
  --good: #0B7A4A; --good-soft: #DDF3E8; --kpi-tint: #FFFFFF;
  --su-primary-hot: #129A60;
  /* aliases the app keeps beside the concreet family; inline styles in Setup read them */
  --forest: #0B7A4A; --sage: #0B7A4A; --sage-soft: #DDF3E8;
  /* the §7.6b chevron for the one select that ships without a wrapper */
  --su-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2365635D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --radius: 0; --r-card: 0; --r-sm: 0; --r-chip: 0; --r-badge: 0;
  font-family: var(--sans);
}
/* su-skin-tokens:end */

/* ── flat panels: white, a --paper-3 hairline, square, NO shadow. Nothing in
   Setup is a clickable card, so nothing carries the offset slab (§7.15 rule 2:
   the shadow is the click affordance). */
.su-skin.account-sidebar, .su-skin.account-detail:not(.is-host-only),
.su-skin .tsa-card, .su-skin .conn-item, .su-skin .kpanel, .su-skin .of-panel,
.su-skin .account-section, .su-skin .setup-pending-note, .su-skin .account-dropzone,
.su-skin .lrow, .su-skin .setup-ct, .su-skin .account-empty-detail {
  border-radius: 0; box-shadow: none;
}
.su-skin.account-sidebar, .su-skin.account-detail:not(.is-host-only),
.su-skin .tsa-card, .su-skin .conn-item { background: var(--paper-0); border: 1px solid var(--paper-3); }
.su-skin.account-detail .account-detail-header { background: var(--paper-0); border-bottom: 1px solid var(--paper-3); border-radius: 0; }

/* ── headings: Archivo 800 uppercase (the §7.15 view heading) */
.su-skin .account-detail-title, .su-skin .knowledge-title {
  font-family: var(--sans); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em;
  font-size: 30px; line-height: 1.1; color: var(--ink-0);
}
.su-skin .kpanel-title, .su-skin .conn-name, .su-skin .account-section-title, .su-skin .ar-cardtitle, .su-skin .of-head h3 {
  font-family: var(--sans); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em;
  font-size: 20px; line-height: 1.15; color: var(--ink-0);
}
.su-skin .account-detail-helper, .su-skin .knowledge-sub, .su-skin .conn-purpose, .su-skin .account-section-helper { color: var(--ink-3); }

/* ── labels: uppercase, letter-spaced, Archivo 700 at --fs-meta (§7.15 rule 3) */
.su-skin .setup-cat-group, .su-skin .account-sidebar-title, .su-skin .setup-sec-title, .su-skin .account-label,
.su-skin .account-subsection-header, .su-skin .tsa-kicker, .su-skin .conn-fields .label, .su-skin .lrow-dl dt,
.su-skin .setup-ct-name, .su-skin th {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: var(--fs-meta);
}
.su-skin .setup-cat-group, .su-skin .account-sidebar-title { color: var(--ink-3); }
.su-skin .setup-sec-title, .su-skin .account-label { color: var(--ink-0); }
/* a field's hint sits inside its label: it stays a sentence */
.su-skin .account-label .hint, .su-skin .account-label .opt, .su-skin .account-label small {
  text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-3);
}

/* ── rail */
.su-skin .account-cat { border-radius: 0; color: var(--ink-1); }
.su-skin .account-cat:hover { background: var(--paper-1); }
.su-skin .account-cat.active { background: var(--ink-0); color: var(--paper-0); box-shadow: none; }
.su-skin .account-cat.active .account-cat-status, .su-skin .account-cat.active .account-cat-tail { color: var(--paper-0); }
.su-skin .account-cat-tail { color: var(--ink-3); }
.su-skin .setup-railcount { color: var(--ink-2); }
/* scope segment: the same tray geometry (setup-geometry.spec.js measures it
   against the tab tray and the rows), square, the active part an ink slab */
.su-skin .setup-scopeseg { border-radius: 0; background: var(--paper-0); border-color: var(--paper-4); box-shadow: none; }
.su-skin .setup-scopeseg .setup-subtab { border-radius: 0; box-shadow: none; color: var(--ink-2); }
.su-skin .setup-scopeseg .setup-subtab.active { background: var(--ink-0); color: var(--paper-0); }

/* ── level-1 tab tray (Knowledge · Review · Settings). Setup is carved out of
   the nav-header kit (Karan, 2026-09-22: its ink tray is a decision, not to be
   "fixed" into the header), so the tray keeps its own grammar — a field with
   no material of its own, the active tab an ink slab — and takes the skin's
   shape: square, Archivo, the --paper-4 hairline. That is the segmented
   control of the other three skins (.av2-chk-seg, .pfo-seg, .st-seg) and of
   the scope segment one row down. PAINT ONLY: the box is measured by
   setup-geometry.spec.js (a 32px row on the rail's edges) and must not move,
   so no rule here sets a size, a padding, a border width or a font weight. */
#setupTabTray.su-skin { border-radius: 0; background: var(--paper-0); border-color: var(--paper-4); box-shadow: none; }
#setupTabTray.su-skin .setup-subtab { border-radius: 0; box-shadow: none; color: var(--ink-2); }
#setupTabTray.su-skin .setup-subtab.active { background: var(--ink-0); border-color: var(--ink-0); color: var(--paper-0); }
/* the Review count: square; a neutral count sits on --paper-2, not a border grey */
#setupTabTray.su-skin .setup-subtab .badge { border-radius: 0; }
#setupTabTray.su-skin .setup-subtab:not(.active) .badge:not(.is-attn) { background: var(--paper-2); color: var(--ink-2); }

/* ── buttons: shape and voice change, hierarchy does not. Every button is
   square and uppercase; a button that was FILLED before the skin stays an ink
   fill (`.account-btn`, `.tsa-run-btn`, `.wiz-btn`, an in-pane `.btn-primary`)
   and an outline stays an outline — which button deserves the fill is a
   product question this change does not re-decide (judge J.1). The ONE green
   primary of a screen is the control bar's (§7.15 rule 1: ink text on green,
   never white). */
.su-skin .btn, .su-skin .account-btn, .su-skin .kentry-btn, .su-skin .tsa-run-btn, .su-skin .wiz-btn,
.su-skin .kpanel-extract-btn, .su-skin .kpanel-discover-btn, .su-skin .rep-add, .su-skin .toolbar-btn, .su-skin .of-act {
  border-radius: 0; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: var(--fs-meta);
  font-family: var(--sans); box-shadow: none;
}
.su-skin .btn:not(.btn-primary) { background: var(--paper-0); color: var(--ink-0); border: 1px solid var(--ink-0); }
.su-skin .btn:not(.btn-primary):hover { background: var(--paper-1); color: var(--ink-0); border-color: var(--ink-0); }
.su-skin .btn.btn-pill, .su-skin .btn.btn-cta { border-radius: 0; }
.su-skin.setup-bar .btn.btn-primary { background: var(--concreet); border-color: var(--concreet); color: var(--ink-0); }
.su-skin.setup-bar .btn.btn-primary:hover:not(:disabled) { background: var(--su-primary-hot); border-color: var(--su-primary-hot); }
/* focus is ink, one ring for every control that can take the keyboard */
.su-skin .btn:focus-visible, .su-skin .account-btn:focus-visible, .su-skin .kentry-btn:focus-visible, .su-skin .wiz-btn:focus-visible,
.su-skin .tsa-run-btn:focus-visible, .su-skin .kpanel-extract-btn:focus-visible, .su-skin .kpanel-discover-btn:focus-visible,
.su-skin .conn-tab:focus-visible, .su-skin .setup-scopeseg .setup-subtab:focus-visible, #setupTabTray.su-skin .setup-subtab:focus-visible,
.su-skin input[type=checkbox]:focus-visible, .su-skin input[type=radio]:focus-visible {
  outline: none; box-shadow: var(--focus-ring);
}

/* ── fields: white, square, a --paper-4 border; ink border + ring on focus.
   Every selector carries the slot's id on purpose: app.html's "Inputs
   everywhere — final sweep" rule (`input:not(…)×9, textarea, select`,
   specificity ≈ 0-9-1) outranks any class-only field rule (§7.15, form
   controls). The id + `.su-skin` pair still drops off with the class, so a
   deferred pane keeps its fields. */
:is(#setupBarKnowledge, #setupKnowledgeRail, #accountDetail, #setupSettingsDetail, #setupReviewPanel).su-skin input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]),
:is(#setupBarKnowledge, #setupKnowledgeRail, #accountDetail, #setupSettingsDetail, #setupReviewPanel).su-skin textarea,
:is(#setupBarKnowledge, #setupKnowledgeRail, #accountDetail, #setupSettingsDetail, #setupReviewPanel).su-skin select {
  background-color: var(--paper-0); border: 1px solid var(--paper-4); border-radius: 0; box-shadow: none; font-family: var(--sans);
}
:is(#accountDetail, #setupSettingsDetail).su-skin .input-wrap { background: var(--paper-0); border: 1px solid var(--paper-4); border-radius: 0; }
:is(#accountDetail, #setupSettingsDetail).su-skin .input-wrap > input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]) { border: 0; background: transparent; }
:is(#setupBarKnowledge, #setupKnowledgeRail, #accountDetail, #setupSettingsDetail, #setupReviewPanel).su-skin input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):focus,
:is(#setupBarKnowledge, #setupKnowledgeRail, #accountDetail, #setupSettingsDetail, #setupReviewPanel).su-skin textarea:focus,
:is(#setupBarKnowledge, #setupKnowledgeRail, #accountDetail, #setupSettingsDetail, #setupReviewPanel).su-skin select:focus,
:is(#accountDetail, #setupSettingsDetail).su-skin .input-wrap:focus-within {
  border-color: var(--ink-2); box-shadow: var(--focus-ring); outline: none;
}
:is(#accountDetail, #setupSettingsDetail).su-skin .input-wrap > input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):focus { border: 0; box-shadow: none; }
.su-skin input::placeholder, .su-skin textarea::placeholder { color: var(--ink-4); opacity: 1; }
.su-skin input[type=checkbox], .su-skin input[type=radio] { accent-color: var(--ink-0); }
.su-skin .select-chev { color: var(--ink-3); }

/* ── sections and rows */
.su-skin .setup-sec { border-color: var(--paper-3); }
.su-skin .setup-sec-n, .su-skin .kpanel-counts { color: var(--ink-3); }
.su-skin .lrow { background: var(--paper-0); border: 1px solid var(--paper-3); }
.su-skin .lrow.open { background: var(--paper-0); border-color: var(--ink-0); }
.su-skin .lrow-title { color: var(--ink-0); font-weight: 600; }
.su-skin .setup-pending-note { background: var(--paper-1); border: 1px solid var(--paper-3); border-left: 3px solid var(--ink-0); }
.su-skin .account-dropzone, .su-skin .rep-add { border-radius: 0; }

/* ── connections: the category tabs are one square tray, the active tab keeps
   its box and adds an ink underline (shadow only — §7.5 no-jump rule) */
.su-skin .conn-tabs { border-radius: 0; background: var(--paper-2); border: 0; box-shadow: none; }
.su-skin .conn-tab { border-radius: 0; color: var(--ink-3); font-family: var(--sans); }
.su-skin .conn-tab-active { background: var(--paper-0); color: var(--ink-0); border-color: transparent; box-shadow: inset 0 -2px 0 var(--ink-0); }
.su-skin .conn-tab-count { border-radius: var(--r-pill); background: var(--paper-1); color: var(--ink-3); }
/* ROADMAP 472 Car 1 · Languages: the language tabs are this same tray; the
   filter under Images is the scope segment's square tray with an ink slab;
   the thumbnails and the Fix review pair are square like every Setup panel. */
.su-skin .lang-tab-chip { border-radius: 0; }
.su-skin .lang-filter { border-radius: 0; background: var(--paper-0); border-color: var(--paper-4); box-shadow: none; }
.su-skin .lang-filter .setup-subtab { border-radius: 0; box-shadow: none; color: var(--ink-2); }
.su-skin .lang-filter .setup-subtab.active { background: var(--ink-0); border-color: var(--ink-0); color: var(--paper-0); }
.su-skin .lang-img .draft-fs-fix-side, .su-skin .lang-thumb, .su-skin .lang-cms-hint { border-radius: 0; }
/* 472 Car 2 · the CTA pairs and their format chip, square like the image pairs */
.su-skin .lang-cta .draft-fs-fix-side, .su-skin .lang-cta-chip { border-radius: 0; }
.su-skin .conn-fields .value { color: var(--ink-1); }
.su-skin .conn-fields .value.empty { color: var(--ink-4); }

/* ── states: a not-set / not-connected mark sits on --paper-2 (the border
   greys are too dark to carry text in this skin, §7.15 contrast) */
.su-skin .conn-badge:not(.connected) { background: var(--paper-2); color: var(--ink-3); }
.su-skin .conn-badge.connected, .su-skin .pill.done { background: var(--good-soft); color: var(--good); }
.su-skin .tsa-muted, .su-skin .filterbar-count { color: var(--ink-3); }
.su-skin .tsa-strong { color: var(--ink-0); font-weight: 700; }
.su-skin .tsa-checklist span { border-radius: 0; }

/* ── legacy inline-styled corners. A handful of Setup panels (Webhooks, the
   transcript tools, the sitemap footnote) carry `style="border-radius:6px"`
   in their markup; no token reaches an inline style, and this change rewrites
   no markup. Round marks (50 % / 999px dots and pills) are left alone. */
.su-skin [style*="border-radius"]:not([style*="50%"]):not([style*="999"]):not([style*="99px"]) { border-radius: 0 !important; }
.su-skin .footnote, .su-skin .cref-row, .su-skin .ars-tk-empty, .su-skin .brand-font-preview, .su-skin pre, .su-skin code { border-radius: 0; }
.su-skin code, .su-skin pre { font-family: var(--mono); }
.su-skin input[type=file].account-input { border-radius: 0; box-shadow: none; background: var(--paper-0); }
.su-skin #webhooksPanel input { background: var(--paper-0) !important; border-color: var(--paper-4) !important; }
/* Webhooks' two Copy buttons are inline-styled grey chips: the skin's secondary. */
.su-skin #webhooksPanel button[onclick^="copyWebhookValue"] {
  background: var(--paper-0) !important; border-color: var(--ink-0) !important; color: var(--ink-0);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: var(--fs-meta) !important; font-family: var(--sans);
}

/* ── judge round (JUDGE_BUILD.md J.2–J.6) */
/* J.2 · text on the border greys: --paper-3 carries --ink-3 at 3.5:1 in this
   skin (§7.15 contrast), so a neutral pill sits on --paper-2; --ink-5 is not a
   text colour; the dropzone hint loses its inline .7 opacity. */
.su-skin .pill.pending { background: var(--paper-2); color: var(--ink-3); }
.su-skin .setup-ct-f { color: var(--ink-4); }
.su-skin .setup-ct-f.on { color: var(--ink-0); font-weight: 600; }
.su-skin .account-dropzone [style*="opacity"] { opacity: 1 !important; color: var(--ink-3); }
/* J.3 · list rows (Languages' targets) */
.su-skin .account-list-row, .su-skin .account-list-row .account-row-delete { border-radius: 0; }
/* J.5 · the one bare <select> (Disclosure → Wording) becomes the §7.6b control */
:is(#accountDetail, #setupSettingsDetail).su-skin select:not(.select):not(.account-input) {
  appearance: none; -webkit-appearance: none; -moz-appearance: none; height: var(--ctl-h); padding: 0 calc(var(--sp-3) + 18px) 0 var(--sp-3);
  font-size: var(--fs-body); color: var(--ink-1); cursor: pointer;
  background-image: var(--su-chev); background-repeat: no-repeat; background-position: right 9px center; background-size: 14px 14px;
}

/* ── phone: the bar's two actions share the row's width instead of wrapping ragged */
@media (max-width: 767px) {
  .su-skin.setup-bar .filterbar-end { flex-wrap: wrap; }
  .su-skin.setup-bar .filterbar-end > .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
  .su-skin .account-detail-title, .su-skin .knowledge-title { font-size: 24px; }
  /* J.6 · a title row with its actions wraps instead of pushing the page sideways */
  .su-skin .conn-head, .su-skin .knowledge-head { flex-wrap: wrap; gap: var(--sp-3); }
  .su-skin .conn-head > div { min-width: 0; flex-wrap: wrap; }
  .su-skin .kpanel-head, .su-skin .lrow-head { flex-wrap: wrap; }
  .su-skin .lrow-title, .su-skin .lrow-sub { min-width: 0; flex-shrink: 1; overflow-wrap: anywhere; white-space: normal; }
}
/* ── one column (the rail stacks above the detail, app.html's 900px break): the
   page never scrolls sideways. A grid item's automatic minimum is its widest
   unbreakable child, so one long line (a select's longest option, a curl
   sample, a row of counts) widened the whole column — rail included — past the
   screen. The two grid items give that minimum up; what cannot wrap scrolls or
   shrinks inside its own box. */
@media (max-width: 900px) {
  .su-skin.account-sidebar, .su-skin.account-detail { min-width: 0; }
  .su-skin .knowledge-panels { grid-template-columns: minmax(0, 1fr); }
  .su-skin.setup-bar .filterbar-count { white-space: normal; min-width: 0; }
  .su-skin.account-detail :is(select, input, textarea) { max-width: 100%; min-width: 0; }
  .su-skin.account-detail pre { max-width: 100%; overflow-x: auto; }
  .su-skin.account-detail label { flex-wrap: wrap; }
  .su-skin .kpanel-counts, .su-skin .lrow-end { flex-wrap: wrap; min-width: 0; }
  .su-skin .lrow-end { flex-shrink: 1; max-width: 100%; }
  /* Review · the German actions are wider than the English ones; the row lets
     them drop under the proposal instead of widening the page (16px at 375). */
  .su-skin .setup-review-row { flex-wrap: wrap; }
}

/* ── D-247 · the wizards and dialogs Setup opens (connection wizards, the sync
   and scan previews, Analyze website, the transcript editor, the image
   import). `.su-skin` sits on each dialog's own `.wiz-overlay`, so the pane
   rules above already reach the buttons, labels and inline corners inside it.
   What follows is the dialog shell. SSOT §7.4 / §10b: the overlay's layer,
   scrim, position and the card's box are NOT touched — the skin squares and
   re-types, it does not move a dialog. Dialogs of the deferred panes and of
   Owned media, the cluster and topic wizards (Strategy) and the app-wide
   confirm keep the app look: none of them carries the class. */
.wiz-overlay.su-skin .wiz-modal { border-radius: 0; border: 1px solid var(--ink-0); box-shadow: none; background: var(--paper-0); }
.wiz-overlay.su-skin .wiz-head { background: var(--paper-0); border-bottom: 1px solid var(--paper-3); }
.wiz-overlay.su-skin .wiz-title {
  font-family: var(--sans); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em;
  font-size: 20px; line-height: 1.15; color: var(--ink-0);
}
.wiz-overlay.su-skin .wiz-subtitle { color: var(--ink-3); }
.wiz-overlay.su-skin .wiz-subtitle code { background: var(--paper-1); border-color: var(--paper-3); color: var(--ink-1); }
.wiz-overlay.su-skin .wiz-close { border-radius: 0; color: var(--ink-2); }
.wiz-overlay.su-skin .wiz-close:hover { background: var(--paper-1); color: var(--ink-0); }
.wiz-overlay.su-skin .wiz-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* stepper: the active step keeps its box and takes an ink underline (shadow
   only, §7.5 no-jump); a waiting dot sits on --paper-2, never a border grey */
.wiz-overlay.su-skin .wiz-stepper {
  background: var(--paper-1); border-bottom: 1px solid var(--paper-3);
  font-family: var(--sans); font-weight: 700; letter-spacing: .06em; font-size: var(--fs-meta); color: var(--ink-3);
}
.wiz-overlay.su-skin .wiz-step { border-radius: 0; }
.wiz-overlay.su-skin .wiz-step.active { background: var(--paper-0); color: var(--ink-0); box-shadow: inset 0 -2px 0 var(--ink-0); }
.wiz-overlay.su-skin .wiz-step.done { color: var(--good); }
.wiz-overlay.su-skin .wiz-step-dot { background: var(--paper-2); color: var(--ink-3); }
.wiz-overlay.su-skin .wiz-step.active .wiz-step-dot { background: var(--ink-0); color: var(--paper-0); }
.wiz-overlay.su-skin .wiz-step.done .wiz-step-dot { background: var(--concreet-deep); color: var(--paper-0); }
.wiz-overlay.su-skin .wiz-body { background: var(--paper-0); color: var(--ink-1); }
.wiz-overlay.su-skin .wiz-body p { color: var(--ink-2); }
.wiz-overlay.su-skin .wiz-body a { color: var(--ink-0); border-bottom-color: var(--ink-0); }
.wiz-overlay.su-skin .wiz-foot { background: var(--paper-0); border-top: 1px solid var(--paper-3); }
.wiz-overlay.su-skin .wiz-btn.ghost { color: var(--ink-1); }
.wiz-overlay.su-skin .wiz-btn.ghost:hover { background: var(--paper-1); color: var(--ink-0); border-color: var(--ink-0); }
.wiz-overlay.su-skin .wiz-error, .wiz-overlay.su-skin .wiz-success { border-radius: 0; }
/* options: a chosen option is the current action — an ink line and an ink
   edge, drawn as a shadow so the row's box does not change */
.wiz-overlay.su-skin .wiz-option { border-radius: 0; background: var(--paper-0); border-color: var(--paper-4); }
.wiz-overlay.su-skin .wiz-option:hover { border-color: var(--ink-0); background: var(--paper-1); }
.wiz-overlay.su-skin .wiz-option.selected { border-color: var(--ink-0); background: var(--paper-1); box-shadow: inset 3px 0 0 var(--ink-0); }
.wiz-overlay.su-skin .wiz-option-radio { border-color: var(--paper-4); }
.wiz-overlay.su-skin .wiz-option.selected .wiz-option-radio { border-color: var(--ink-0); }
.wiz-overlay.su-skin .wiz-option-title { font-weight: 700; color: var(--ink-0); }
.wiz-overlay.su-skin .wiz-option-meta { color: var(--ink-3); }
/* dialog fields: the same id scope as the panes (the input sweep is ≈ 0-9-1);
   the overlay ids are the nineteen dialogs D-247 names plus the re-read dialog (D-263) */
:is(#gscWizOverlay, #gaWizOverlay, #wfWizOverlay, #dfsWizOverlay, #oaiWizOverlay, #notionWizOverlay, #youtubeWizOverlay, #youtubeSyncOverlay, #notionScanOverlay, #tldvWizOverlay, #tldvSyncOverlay, #firefliesWizOverlay, #firefliesSyncOverlay, #modjoWizOverlay, #modjoSyncOverlay, #anthropicWizOverlay, #scanOverlay, #rereadOverlay, #transcriptDrawerOverlay, #libImportOverlay).su-skin input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]),
:is(#gscWizOverlay, #gaWizOverlay, #wfWizOverlay, #dfsWizOverlay, #oaiWizOverlay, #notionWizOverlay, #youtubeWizOverlay, #youtubeSyncOverlay, #notionScanOverlay, #tldvWizOverlay, #tldvSyncOverlay, #firefliesWizOverlay, #firefliesSyncOverlay, #modjoWizOverlay, #modjoSyncOverlay, #anthropicWizOverlay, #scanOverlay, #rereadOverlay, #transcriptDrawerOverlay, #libImportOverlay).su-skin textarea,
:is(#gscWizOverlay, #gaWizOverlay, #wfWizOverlay, #dfsWizOverlay, #oaiWizOverlay, #notionWizOverlay, #youtubeWizOverlay, #youtubeSyncOverlay, #notionScanOverlay, #tldvWizOverlay, #tldvSyncOverlay, #firefliesWizOverlay, #firefliesSyncOverlay, #modjoWizOverlay, #modjoSyncOverlay, #anthropicWizOverlay, #scanOverlay, #rereadOverlay, #transcriptDrawerOverlay, #libImportOverlay).su-skin select {
  background-color: var(--paper-0); border: 1px solid var(--paper-4); border-radius: 0; box-shadow: none; font-family: var(--sans);
}
:is(#gscWizOverlay, #gaWizOverlay, #wfWizOverlay, #dfsWizOverlay, #oaiWizOverlay, #notionWizOverlay, #youtubeWizOverlay, #youtubeSyncOverlay, #notionScanOverlay, #tldvWizOverlay, #tldvSyncOverlay, #firefliesWizOverlay, #firefliesSyncOverlay, #modjoWizOverlay, #modjoSyncOverlay, #anthropicWizOverlay, #scanOverlay, #rereadOverlay, #transcriptDrawerOverlay, #libImportOverlay).su-skin input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):focus,
:is(#gscWizOverlay, #gaWizOverlay, #wfWizOverlay, #dfsWizOverlay, #oaiWizOverlay, #notionWizOverlay, #youtubeWizOverlay, #youtubeSyncOverlay, #notionScanOverlay, #tldvWizOverlay, #tldvSyncOverlay, #firefliesWizOverlay, #firefliesSyncOverlay, #modjoWizOverlay, #modjoSyncOverlay, #anthropicWizOverlay, #scanOverlay, #rereadOverlay, #transcriptDrawerOverlay, #libImportOverlay).su-skin textarea:focus,
:is(#gscWizOverlay, #gaWizOverlay, #wfWizOverlay, #dfsWizOverlay, #oaiWizOverlay, #notionWizOverlay, #youtubeWizOverlay, #youtubeSyncOverlay, #notionScanOverlay, #tldvWizOverlay, #tldvSyncOverlay, #firefliesWizOverlay, #firefliesSyncOverlay, #modjoWizOverlay, #modjoSyncOverlay, #anthropicWizOverlay, #scanOverlay, #rereadOverlay, #transcriptDrawerOverlay, #libImportOverlay).su-skin select:focus {
  border-color: var(--ink-2); box-shadow: var(--focus-ring); outline: none;
}
.wiz-overlay.su-skin .wiz-subtitle code, .wiz-overlay.su-skin .wiz-body code { border-radius: 0; }
/* the app's legacy alias resolves at :root, to the app's --ink-3 (3.9:1 on
   white); inline styles in the Webflow wizard read it */
.wiz-overlay.su-skin { --text-muted: var(--ink-3); }
/* judge round (JUDGE_BUILD.md J.3–J.7) */
/* J.3 · an error note's text: --bad on --bad-soft is 4.3:1 at 13px */
.wiz-overlay.su-skin .wiz-error { color: var(--ink-0); }
/* J.7 · links and unclassed buttons inside a dialog take the one focus ring */
.wiz-overlay.su-skin a:focus-visible, .wiz-overlay.su-skin button:focus-visible, .wiz-overlay.su-skin summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* J.4 / J.5 · phone: Archivo 700 uppercase is wider than the mono it replaces.
   The stepper scrolls inside its own row instead of being cut off by the card
   (§10b: nothing is cut off), and the footer's buttons wrap. */
@media (max-width: 767px) {
  .wiz-overlay.su-skin .wiz-stepper { overflow-x: auto; letter-spacing: .02em; gap: var(--sp-1); padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .wiz-overlay.su-skin .wiz-step { flex: 0 0 auto; white-space: nowrap; padding-left: var(--sp-2); padding-right: var(--sp-2); }
  .wiz-overlay.su-skin .wiz-foot { flex-wrap: wrap; }
  .wiz-overlay.su-skin .wiz-btn { letter-spacing: .02em; }
}

/* ── Re-read website (ROADMAP 6.44 · D-263 · design-system §7.26). The dialog is
   the Setup modal above; these are its three lists. Every part is a shipped
   shape — .pill, .btn, .empty, the §7.14 before/after pair — and only the
   layout is declared here, under .rr-*. One left edge: the body's own inset. */
.wiz-overlay.su-skin .rr-modal { max-width: 920px; }
.wiz-overlay.su-skin .rr-lede { font-size: var(--fs-body); color: var(--ink-1); margin: 0 0 var(--sp-3); line-height: 1.55; }
.wiz-overlay.su-skin .rr-hint { font-size: var(--fs-body-s); color: var(--ink-2); margin: 0 0 var(--sp-3); line-height: 1.55; }
.wiz-overlay.su-skin .rr-h {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--ctl-h);
  margin: var(--sp-6) 0 var(--sp-2); font-size: var(--fs-body-l); font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; color: var(--ink-0);
}
.wiz-overlay.su-skin .rr-row {
  display: grid; grid-template-columns: var(--sp-5) minmax(0, 1fr) auto; gap: var(--sp-3); align-items: start;
  padding: var(--sp-3) 0; border-top: 1px solid var(--paper-3);
}
.wiz-overlay.su-skin .rr-row input[type=checkbox] { width: auto; margin: var(--sp-1) 0 0; accent-color: var(--accent); cursor: pointer; }
.wiz-overlay.su-skin .rr-row input[type=checkbox]:disabled { cursor: default; }
.wiz-overlay.su-skin .rr-main { min-width: 0; }
.wiz-overlay.su-skin .rr-url { font-family: var(--mono); font-size: var(--fs-body-s); color: var(--ink-0); overflow-wrap: anywhere; }
.wiz-overlay.su-skin .rr-sub { font-size: var(--fs-body-s); color: var(--ink-3); line-height: 1.5; overflow-wrap: anywhere; }
.wiz-overlay.su-skin .rr-off .rr-url { color: var(--ink-2); }
.wiz-overlay.su-skin .rr-act { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; }
.wiz-overlay.su-skin .rr-mark { display: inline-flex; align-items: center; justify-content: center; height: var(--sp-5); color: var(--ink-3); }
.wiz-overlay.su-skin .rr-attn .rr-mark { color: var(--ink-0); }
.wiz-overlay.su-skin .rr-attn .rr-sub { color: var(--ink-1); }
.wiz-overlay.su-skin .rr-out { grid-template-columns: var(--sp-5) minmax(0, 1fr); }
.wiz-overlay.su-skin .rr-add { border-top: 1px solid var(--paper-3); padding: var(--sp-3) 0; }
.wiz-overlay.su-skin .rr-lbl {
  display: block; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: var(--sp-1);
}
.wiz-overlay.su-skin .rr-addrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2); }
.wiz-overlay.su-skin .rr-addrow .btn { height: var(--ctl-h); box-sizing: border-box; }
/* fields keep the id scope (the input sweep is ≈ 0-9-1) */
:is(#rereadOverlay).su-skin .rr-addrow input { height: var(--ctl-h); box-sizing: border-box; font-family: var(--mono); font-size: var(--fs-body-s); padding: 0 var(--sp-3); min-width: 0; }
.wiz-overlay.su-skin .rr-err { font-size: var(--fs-body-s); color: var(--bad); margin: var(--sp-2) 0 0; }
.wiz-overlay.su-skin .rr-foot { align-items: center; gap: var(--sp-4); }
.wiz-overlay.su-skin .rr-foothint { flex: 1 1 0; min-width: 0; font-size: var(--fs-body-s); color: var(--ink-2); line-height: 1.5; }
.wiz-overlay.su-skin .rr-over { color: var(--ink-0); font-weight: 700; }
.wiz-overlay.su-skin .rr-btns { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); justify-content: flex-end; }
/* a proposal: the §7.14 pair with the field's address above and one action row */
.wiz-overlay.su-skin .rr-card { padding: var(--sp-4) 0; border-top: 1px solid var(--paper-3); }
.wiz-overlay.su-skin .rr-addr { font-size: var(--fs-body-s); font-weight: 700; color: var(--ink-0); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.wiz-overlay.su-skin .rr-found { margin-top: var(--sp-3); }
.wiz-overlay.su-skin .rr-k { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.wiz-overlay.su-skin .rr-cardfoot { align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.wiz-overlay.su-skin .rr-note { flex: 1 1 0; min-width: 0; max-width: 62ch; font-size: var(--fs-body-s); color: var(--ink-2); line-height: 1.5; }
.wiz-overlay.su-skin .rr-edit { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); margin-bottom: var(--sp-2); }
:is(#rereadOverlay).su-skin .rr-edit input { height: var(--ctl-h); box-sizing: border-box; padding: 0 var(--sp-3); font-size: var(--fs-body); min-width: 0; width: 100%; }
.wiz-overlay.su-skin .rr-edit .rr-lbl { margin: var(--sp-2) 0 0; }
.wiz-overlay.su-skin .rr-decided { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); align-items: start; }
.wiz-overlay.su-skin .rr-quote { font-size: var(--fs-body); color: var(--ink-0); }
.wiz-overlay.su-skin .rr-what { font-size: var(--fs-body); color: var(--ink-0); overflow-wrap: anywhere; }
.wiz-overlay.su-skin .rr-rowact { margin-top: var(--sp-2); }
/* Setup's own long text beside an addition keeps its line breaks */
.wiz-overlay.su-skin .rr-pre { white-space: pre-wrap; }
/* a hand-added page: what it is read for (the shipped .select, one --ctl-h) */
.wiz-overlay.su-skin .rr-reader { margin-top: var(--sp-2); max-width: 320px; }
.wiz-overlay.su-skin .rr-reader .select-wrap { display: flex; }
:is(#rereadOverlay).su-skin .rr-reader select { height: var(--ctl-h); width: 100%; box-sizing: border-box; font-size: var(--fs-body-s); }
.wiz-overlay.su-skin .rr-modal:focus { outline: none; }
/* (the live region `.rr-live` is hidden by app.html's own stylesheet)
   the question before closing with undecided proposals: its own block, in ink */
.wiz-overlay.su-skin .rr-ask {
  display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--ink-0); background: var(--paper-1); color: var(--ink-0); font-size: var(--fs-body); font-weight: 700;
}
/* the estimate: on a wide screen the whole sentence; the toggle is the phone's */
.wiz-overlay.su-skin .rr-costmore { display: none; }
.wiz-overlay.su-skin .rr-body .empty { padding: var(--sp-6) 0; align-items: flex-start; text-align: left; }
@media (max-width: 767px) {
  .wiz-overlay.su-skin .rr-row { grid-template-columns: var(--sp-5) minmax(0, 1fr); }
  .wiz-overlay.su-skin .rr-row .rr-act { grid-column: 2; justify-content: flex-start; }
  .wiz-overlay.su-skin .rr-cardfoot { flex-direction: column; align-items: stretch; }
  .wiz-overlay.su-skin .rr-foothint { flex: 1 1 100%; }
  .wiz-overlay.su-skin .rr-costrest.rr-shut { display: none; }
  .wiz-overlay.su-skin .rr-costmore {
    display: inline; background: none; border: 0; padding: 0; margin-left: var(--sp-1); font: inherit;
    color: var(--ink-0); text-decoration: underline; cursor: pointer;
  }
  .wiz-overlay.su-skin .rr-body { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}