/* static/orchestrator/orchestrator.css · D-246 — the Pipeline and the article
 * workspace wear the Concreet look, scoped.
 *
 * Three parts:
 *   1. The Concreet skin, scoped to `.or-skin` — the same token values as the
 *      Assessment v2 skin (static/assessment-v2/av2.css, design-system §7.15),
 *      Performance → SEO, Strategy and Setup. On the Pipeline the class sits on
 *      the three bar actions, the filter row, the three view slots, the table
 *      scroller and the New-article dialog — never on `.orch-bar1` or
 *      `.board-wrapper`, so the level-1 view tray (#createViewToggle) keeps the
 *      app kit. In the workspace it sits on `.ws-shell`; the top bar above it
 *      is app shell and is not touched.
 *   2. The editor and the level-2 status tabs keep the app look. `#editor-root`
 *      (BlockNote) and `#orchQuickViews` get the app's own token values back,
 *      so nothing inside them changes: the skin styles the frame around the
 *      manuscript, not the manuscript.
 *   3. The surface's existing components restyled on those tokens. No markup
 *      was rewritten: every rule targets a class the surface already ships.
 *
 * SPECIFICITY. app.html's own <style> loads AFTER this file, holds two blocks
 * for these surfaces (base + "Paper polish overrides", design-system §10) and
 * scopes many rules two or three classes deep. So every rule here opens with
 * `.or-skin:not(#_)`: the `:not(#_)` matches everything and lifts the rule to
 * id weight, which wins over both blocks and over the "Inputs everywhere"
 * sweep (≈ 0-9-1) without editing either. A rule that sets a colour on a
 * stateful element therefore also sets its states.
 *
 * The two token blocks are the only places a colour literal may appear.
 * Guarded by tests/test_orchestrator_concreet_skin.py.
 * Board: docs/design/mocks/2026-10-10-orchestrator-concreet-board.html.
 */

/* or-skin-tokens:start */
.or-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;
  --or-primary-hot: #129A60;
  /* aliases the app keeps beside the concreet family; the rail and the SERP map read them */
  --forest: #0B7A4A; --sage: #0B7A4A; --sage-soft: #DDF3E8;
  /* the pre-token aliases the publish form's inline styles still read */
  --bg: var(--paper-1); --surface: var(--paper-0); --surface-hover: var(--paper-2); --border: var(--paper-4);
  --text: var(--ink-1); --text-muted: var(--ink-3);
  --radius: 0; --r-card: 0; --r-sm: 0; --r-chip: 0; --r-badge: 0;
  font-family: var(--sans);
}
/* or-skin-tokens:end */

/* Two things inside the wrappers are not the skin's: the editor (#editor-root,
   BlockNote) and the level-2 status tabs (#orchQuickViews, the shared
   underline kit of design-system §3). Every token the block above redefines
   gets the value app.html's :root gives it (the guard test compares the two),
   so both render exactly as before. Rules below that select by TAG or by
   attribute carry `:not(#editor-root *)` for the same reason: a code block or
   a check-list box in the manuscript is the editor's. */
/* or-editor-tokens:start */
.or-skin #editor-root, .or-skin #orchQuickViews {
  --sans: "Public Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --paper-0: #FFFFFF; --paper-1: #F8F7F4; --paper-2: #EFE9E1; --paper-3: #E2DBD1; --paper-4: #CFC7BB;
  --ink-0: #15120F; --ink-1: #2A2520; --ink-2: #4A433B; --ink-3: #837A72; --ink-4: #A89E8E; --ink-5: #C9C0AF;
  --accent: #141311;
  --concreet: #2ECC8E; --concreet-deep: #1F9C6C; --concreet-ink: #00794B; --concreet-soft: #D6F1E4;
  --good: #00794B; --good-soft: #D6F1E4; --kpi-tint: #FAF9F6;
  --forest: #1F9C6C; --sage: #1F9C6C; --sage-soft: #D6F1E4;
  --bg: var(--paper-1); --surface: var(--paper-0); --surface-hover: var(--paper-2); --border: var(--paper-4);
  --text: var(--ink-1); --text-muted: var(--ink-3);
  --radius: 10px; --r-card: 14px; --r-sm: 8px; --r-chip: 6px; --r-badge: 4px;
  /* the two values they inherit from the frame around them */
  font-family: var(--sans); color: var(--ink-1);
}
/* or-editor-tokens:end */

/* ══ 1 · shape: square slabs, flat on a hairline ═════════════════════════════
   Panels, controls and buttons lose their corner and their shadow. Round marks
   stay round (§7.15: `--r-pill` is kept): status pills, tag chips, the stage
   numerals, the SERP map's points and tier marks, the progress ring, the
   toggle switch. Nothing here is a clickable card, so nothing carries the
   offset slab (§7.15 rule 2: the shadow is the click affordance). */
.or-skin:not(#_) :is(table.board, .cluster-lens, .clov2-hero, .clov2-rows, .clov2-matrix, .clov2-emptybar, .clov2-cell, .clov2-d,
  .orch-search-group, .orch-search, .orch-uctl, .orch-pagesize-v2, .orch-hdd, .orch-sched-btn, .orch-sched-input, .orch-cluster-trigger,
  .orch-tag-add-btn, .new-row-btn, .row-runall, .row-delete, .orch-btn, .orch-modal-close, .orch-csel, .orch-csel-menu, .orch-toggle,
  .cl-headbtn, .cl-rowbtn, .cl-row-mid, .cl-bulkbar, .cl-bulkbar-btn, .orch-blk, .orch-blk-btn, .inbound-refresh, .btn, .select,
  .ws-stage, .ws-serp-section, .ws-serp-source, .ws-decisions, .ws-btn, .feedback-area, .feedback-input, .btn-continue-fb, .toolbar-btn,
  .draft-fs-open-btn, .ws-final-preview-btn, .output-area, .ws-final-canvas, .ws-brief, .ws-brief-banner, .ws-choice, .ws-choice-input,
  .ws-outline-tldr, .ws-outline-row-handle, .ws-livestruct-row, .ws-gap-band, .ws-bmap-plot, .ws-research-source, .ws-research-raw,
  .ws-research-exclude-btn, .ws-bi-src-block, .ws-bi-src-pre, .profile-suggest, .wf-review, .wiz-btn, .ws-pane-toggle, .ws-placeholder,
  .account-textarea, .ws-briefing-ctsel),
.or-skin:not(#_) :is(pre, code, input, select, textarea):not(#editor-root *),
.or-skin:not(#_):is(.orch-btn, .orch-modal) {
  border-radius: 0;
}
.or-skin:not(#_) :is(table.board, .cluster-lens, .ws-decisions, .output-area, .orch-btn, .new-row-btn, .orch-cluster-trigger, .wiz-btn,
  .ws-pane-toggle, .account-textarea, .ws-btn, .toolbar-btn, .btn, .cl-rowbtn, .cl-headbtn),
.or-skin:not(#_).orch-btn {
  box-shadow: none;
}
/* inline-styled corners (the publish form, the build-images panels): no token
   reaches an inline style and this change rewrites no markup. Round marks
   (50 % / 999px) are left alone. */
.or-skin:not(#_) [style*="border-radius"]:not([style*="50%"]):not([style*="999"]):not([style*="99px"]):not(#editor-root *) { border-radius: 0 !important; }
.or-skin:not(#_) :is(code, pre):not(#editor-root *) { font-family: var(--mono); }
.or-skin:not(#_) :is(table.board, .cluster-lens, .clov2-hero, .clov2-rows, .clov2-matrix, .ws-decisions, .ws-serp-section, .ws-brief,
  .ws-choice, .ws-final-canvas, .ws-bmap-plot, .output-area.ws-manuscript) { border-color: var(--paper-3); }

/* ══ 2 · voice: headings and labels (§7.15 rule 3) ═══════════════════════════ */
/* the view heading: Archivo 800 uppercase at 30px */
.or-skin:not(#_) :is(.ws-stage-title, .ws-briefing-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);
}
/* a panel title */
.or-skin:not(#_).orch-modal header h2 {
  font-family: var(--sans); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em;
  font-size: 20px; line-height: 1.15; color: var(--ink-0);
}
/* the article's own title in the rail is content, not a label: no uppercase */
.or-skin:not(#_) .ws-article-title { font-family: var(--sans); font-weight: 700; letter-spacing: -.005em; }
/* labels: uppercase, letter-spaced, Archivo 700 at --fs-meta */
.or-skin:not(#_) :is(.cl-master-label, .clov2-sec, .clov2-herostatl, .cluster-lens-head .cl-head-left > span:not(.meta):not(.cl-collapse-chevron),
  .ws-back-link, .ws-phase-label, .ws-stage-eyebrow, .ws-briefing-step, .ws-serp-section-label, .feedback-label, .ws-pane-title,
  .ws-bmap-leg-head, .ws-gap-band-title, .ws-briefing-deflabel),
.or-skin:not(#_).orch-modal .orch-field label {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: var(--fs-meta);
}
.or-skin:not(#_) :is(.ws-back-link, .ws-phase-label, .ws-stage-eyebrow, .ws-pane-title, .ws-bmap-leg-head) { color: var(--ink-3); }
.or-skin:not(#_) .cluster-lens-head .cl-head-left > span:not(.meta):not(.cl-collapse-chevron) { color: var(--ink-0); }
/* a dense table's heads and a key inside a control stay mono, as in the
   Strategy and Assessment v2 tables (`.st-table th`, `.av2-cl-table th`) */
.or-skin:not(#_) :is(table.board th, .orch-hdd-lab, .orch-uk, .orch-flabel) { font-family: var(--mono); letter-spacing: .06em; }
.or-skin:not(#_) :is(.ws-serp-section-label, .feedback-label, .ws-briefing-step, .ws-briefing-deflabel) { color: var(--ink-0); }
.or-skin:not(#_).orch-modal .orch-field label { color: var(--ink-0); }
/* a hint inside a label stays a sentence */
.or-skin:not(#_) .ws-pane-title .ws-pane-note { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--fs-meta); color: var(--ink-3); }
.or-skin:not(#_).orch-modal .orch-field label .orch-opt { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--fs-meta); color: var(--ink-3); }
.or-skin:not(#_) :is(.ws-stage-subtitle, .ws-briefing-sub) { color: var(--ink-3); }

/* ══ 3 · 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, an outline stays an outline, a dashed one stays
   dashed (D-241, judge J.1: which button deserves a fill is a product
   question, not a skin's). The ONE green primary of a screen is the bar's:
   New Article on the Pipeline, Create in the dialog, the decision bar's
   approve in the workspace — ink text on green, never white (§7.15 rule 1). */
.or-skin:not(#_) :is(.orch-btn, .new-row-btn, .cl-headbtn, .cl-rowbtn, .cl-bulkbar-btn, .orch-blk-btn, .btn, .ws-btn, .btn-continue-fb,
  .toolbar-btn, .draft-fs-open-btn, .ws-final-preview-btn, .wiz-btn, .ws-research-exclude-btn),
.or-skin:not(#_).orch-btn {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: var(--fs-meta);
}
/* the decision bar holds up to four controls on one line, and an uppercase
   label is wider than the sentence it replaces: these sit tighter so the bar
   keeps the lines it had (judge J.1) */
.or-skin:not(#_) .ws-decisions .ws-btn { letter-spacing: .02em; font-size: var(--fs-label); }
.or-skin:not(#_) .new-row-btn { font-size: var(--fs-label); }
/* the label is smaller than the sentence it replaces; the line box keeps the
   height the button had (1.5 × its former 13 / 12 / 14px), so no row moves */
.or-skin:not(#_) :is(.ws-btn, .btn-continue-fb, .ws-final-preview-btn, .btn.btn-pill) { line-height: 19.5px; }
.or-skin:not(#_) :is(.toolbar-btn, .draft-fs-open-btn, .cl-bulkbar-btn, .orch-blk-btn, .btn:not(.btn-pill)) { line-height: 18px; }
.or-skin:not(#_) .wiz-btn { line-height: 21px; }
/* the secondary: white, an ink outline */
.or-skin:not(#_).orch-btn.orch-btn-ghost, .or-skin:not(#_) .orch-btn:not(.orch-btn-primary),
.or-skin:not(#_) .ws-btn:not(.primary):not(.ghost):not(.ws-btn-autopilot), .or-skin:not(#_) .btn:not(.btn-primary),
.or-skin:not(#_) :is(.toolbar-btn, .draft-fs-open-btn) {
  background: var(--paper-0); color: var(--ink-0); border: 1px solid var(--ink-0);
}
.or-skin:not(#_).orch-btn.orch-btn-ghost:hover, .or-skin:not(#_) .orch-btn:not(.orch-btn-primary):hover,
.or-skin:not(#_) .ws-btn:not(.primary):not(.ghost):not(.ws-btn-autopilot):hover:not(:disabled), .or-skin:not(#_) .btn:not(.btn-primary):hover,
.or-skin:not(#_) :is(.toolbar-btn, .draft-fs-open-btn):hover {
  background: var(--paper-1); color: var(--ink-0); border-color: var(--ink-0);
}
/* Note & continue has no outline today (a white bar with a transparent
   border) and gets none here; the two row buttons of the cluster view are
   outlines and take the ink line the other outlines have */
.or-skin:not(#_) .btn-continue-fb { color: var(--ink-0); border-color: transparent; }
.or-skin:not(#_) :is(.cl-headbtn, .cl-rowbtn:not(.cl-rowbtn-primary)) { border-color: var(--ink-0); }
.or-skin:not(#_) .orch-tag-add-btn { color: var(--ink-3); border-color: var(--paper-4); }
.or-skin:not(#_).orch-btn .orch-btn-sub { color: var(--ink-3); }
/* the one green primary */
.or-skin:not(#_).orch-btn.orch-btn-primary, .or-skin:not(#_).orch-modal .orch-btn.orch-btn-primary, .or-skin:not(#_) .ws-decisions .ws-btn.primary {
  background: var(--concreet); border: 1px solid var(--concreet); color: var(--ink-0);
}
.or-skin:not(#_).orch-btn.orch-btn-primary:hover, .or-skin:not(#_).orch-modal .orch-btn.orch-btn-primary:hover,
.or-skin:not(#_) .ws-decisions .ws-btn.primary:hover:not(:disabled) {
  background: var(--or-primary-hot); border-color: var(--or-primary-hot); color: var(--ink-0);
}
/* focus is ink, one ring for every control that takes the keyboard */
.or-skin:not(#_) :is(button, a, summary, [role="tab"], input[type=checkbox], input[type=radio]):not(#editor-root *):focus-visible,
.or-skin:not(#_):is(.orch-btn):focus-visible {
  outline: none; box-shadow: var(--focus-ring);
}

/* ══ 4 · fields: white, square, a --paper-4 border; ink border + ring on focus */
.or-skin:not(#_) input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not(.orch-search):not(.orch-sched-input):not(#editor-root *),
.or-skin:not(#_) textarea:not(#editor-root *), .or-skin:not(#_) select:not(#editor-root *) {
  background-color: var(--paper-0); border: 1px solid var(--paper-4); box-shadow: none; font-family: var(--sans);
}
.or-skin:not(#_) input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not(.orch-search):not(#editor-root *):focus,
.or-skin:not(#_) textarea:not(#editor-root *):focus, .or-skin:not(#_) select:not(#editor-root *):focus, .or-skin:not(#_) .orch-search-group:focus-within, .or-skin:not(#_) .orch-csel:focus {
  border-color: var(--ink-2); box-shadow: var(--focus-ring); outline: none;
}
.or-skin:not(#_) :is(.orch-search-group, .orch-uctl, .orch-csel, .orch-cluster-trigger) { background: var(--paper-0); border: 1px solid var(--paper-4); }
.or-skin:not(#_) :is(.orch-uctl, .orch-cluster-trigger):hover:not([disabled]) { background: var(--paper-1); border-color: var(--ink-2); }
.or-skin:not(#_) .orch-uctl.active { background: var(--paper-0); border-color: var(--ink-0); }
.or-skin:not(#_) .orch-cluster-trigger.is-legacy { border-style: dashed; }
/* two legacy traps: the stage comment is !important in app.html, and the
   publish form styles its fields inline (`background: var(--bg)`) */
.or-skin:not(#_) .feedback-input { border-radius: 0 !important; background: var(--paper-0) !important; border-color: var(--paper-4) !important; }
.or-skin:not(#_) .feedback-input:focus { border-color: var(--ink-2) !important; }
.or-skin:not(#_) :is(input, textarea, select)[style*="background"]:not(#editor-root *) { background-color: var(--paper-0) !important; }
.or-skin:not(#_) :is(input, textarea):not(#editor-root *)::placeholder { color: var(--ink-4); opacity: 1; }
.or-skin:not(#_) :is(input[type=checkbox], input[type=radio]):not(#editor-root *) { accent-color: var(--ink-0); }
.or-skin:not(#_) .select-chev { color: var(--ink-3); }

/* ══ 5 · the Pipeline ════════════════════════════════════════════════════════ */
.or-skin:not(#_) table.board { border: 1px solid var(--paper-3); }
.or-skin:not(#_) :is(.cluster-lens, .clov2-hero, .clov2-rows, .clov2-matrix) { background: var(--paper-0); border: 1px solid var(--paper-3); box-shadow: none; }
/* a not-yet state sits on --paper-2: the border greys are too dark to carry
   text in this skin (§7.15 contrast) */
.or-skin:not(#_) :is(.orch-stage-planned-new, .orch-stage-exploration, .pill.pending, .detail-stage-status.pending) { background: var(--paper-2); color: var(--ink-3); }
/* the floating selection bars keep their lift (they sit over the rows) and lose the pill */
.or-skin:not(#_) :is(.orch-blk, .cl-bulkbar) { background: var(--ink-0); }

/* ══ 6 · the workspace ═══════════════════════════════════════════════════════ */
/* rail: the stage you are on is an ink slab (as Setup's rail); done stays green */
.or-skin:not(#_) .ws-stage { color: var(--ink-1); }
.or-skin:not(#_) .ws-stage:hover { background: var(--paper-2); color: var(--ink-0); }
.or-skin:not(#_) .ws-stage.active, .or-skin:not(#_) .ws-stage.active:hover { background: var(--ink-0); color: var(--paper-0); }
.or-skin:not(#_) .ws-stage.active::before { content: none; }
.or-skin:not(#_) .ws-stage.active :is(.ws-auto-tag) { background: var(--paper-0); color: var(--ink-0); }
.or-skin:not(#_) .ws-stage.active .ws-writing-chev { color: var(--paper-0); }
.or-skin:not(#_) .ws-stage .ws-stage-num { background: var(--paper-2); color: var(--ink-3); }
.or-skin:not(#_) .ws-stage.done .ws-stage-num { background: var(--good-soft); color: var(--good); }
.or-skin:not(#_) .ws-stage.active .ws-stage-num { background: var(--paper-0); color: var(--ink-0); }
.or-skin:not(#_) .ws-stage.done.active .ws-stage-num { background: var(--good-soft); color: var(--good); }
.or-skin:not(#_) .ws-stage.running .ws-stage-num { background: var(--paper-0); color: var(--ink-0); }
.or-skin:not(#_) .ws-stage.error .ws-stage-num { background: var(--bad-soft); color: var(--bad); }
.or-skin:not(#_) .ws-auto-tag { color: var(--ink-3); }
/* with the Writing group open, the group row and the stage inside it are both
   current: the group keeps the slab, the stage inside it is a tint with an ink
   edge, so the rail never shows two slabs stacked (judge J.8) */
.or-skin:not(#_) .ws-stage.ws-substage.active, .or-skin:not(#_) .ws-stage.ws-substage.active:hover { background: var(--paper-2); color: var(--ink-0); box-shadow: inset 3px 0 0 var(--ink-0); }
.or-skin:not(#_) .ws-stage.ws-substage.active .ws-stage-num { background: var(--paper-0); color: var(--ink-0); }
.or-skin:not(#_) .ws-stage.ws-substage.done.active .ws-stage-num { background: var(--good-soft); color: var(--good); }
/* panels */
.or-skin:not(#_) .output-area.ws-manuscript { box-shadow: none; }
.or-skin:not(#_) .ws-serp-section-head { background: var(--paper-1); }
.or-skin:not(#_) .ws-decisions { background: var(--paper-0); border: 1px solid var(--paper-3); }
.or-skin:not(#_) .feedback-area { background: var(--paper-1); border: 1px solid var(--paper-3); }
.or-skin:not(#_) .ws-pane-toggle { background: var(--paper-0); border: 1px solid var(--paper-4); }
/* text never sits on a border grey (§7.15 contrast): the skin darkens --ink-4,
   so the SERP map's T3 mark moves down the paper ramp, and two hints lose the
   opacity that took them under 4.5:1 */
.or-skin:not(#_) .ws-bmap-t3 { background: var(--paper-4); color: var(--ink-0); }
.or-skin:not(#_) .ws-bmap-t4 { background: var(--paper-2); color: var(--ink-1); }
.or-skin:not(#_) .ws-bmap-leg-dr-missing { opacity: 1; color: var(--ink-4); }
.or-skin:not(#_) .ws-briefing-sub[style*="opacity"] { opacity: 1 !important; }
/* phone: the selection bars and the cluster heads hold several buttons on one
   line; without the letter-spacing they clip no more than before (judge J.7) */
@media (max-width: 767px) {
  .or-skin:not(#_) :is(.orch-blk-btn, .cl-bulkbar-btn, .cl-headbtn, .cl-rowbtn) { letter-spacing: 0; font-size: var(--fs-label); padding-left: var(--sp-2); padding-right: var(--sp-2); }
  .or-skin:not(#_) .cluster-lens-head .cl-head-left > span:not(.meta):not(.cl-collapse-chevron) { letter-spacing: .02em; }
}