/* strategy-letterpress.css — the Group Strategy LETTERPRESS chrome.
   Re-inks the GSP XP skin into the crisp black Letterpress design language
   used across Order Management (om-letterpress.css) and Procurement (proc-letterpress.css).

   Loaded after xp-gsp.css and scoped under the .slp wrapper on the strategy layout root.
   - Ink-black title bars with paper-white serif type for all windows and dialogs
   - Ink-black column and section header bars across all matrices, cards, and sections
   - Ink-black table header rows with white monospace type across all datagrids
   - Paper & ink grounds, hairlines, and typography (Fraunces serif display, PP Neue Machina UI, JetBrains Mono)
   - Flat square letterpress buttons, inputs, and chips (no XP bevels or blue chrome)
*/

.slp {
  --slp-paper: var(--rp-white);
  --slp-paper-2: var(--rp-silver-2);
  --slp-paper-3: var(--rp-silver);
  --slp-hairline: var(--rp-line);
  --slp-hairline-dark: var(--rp-border-strong);
  --slp-ink: var(--rp-ink);
  --slp-ink-mute: var(--rp-ink-mute);
  --slp-acc: var(--rp-black);
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* app ground + type: paper and ink, UI face from the portal tokens    */
/* Ground token sweep (MMDB-2395): the app-level ground converges on the
   shared --rp-silver baseline the rest of the portal's 22 shell screens
   render on, instead of the paper tone the column sheets themselves use
   (--slp-paper stays on .gsp-mcol/.gsp-node/.gsp-card below -- those are
   the white sheets, this is the desk they sit on). */
.slp.gsp-app,
.slp .gsp-app {
  font-family: var(--font-ui, "PP Neue Machina", "Segoe UI", sans-serif);
  font-size: 12px;
  color: var(--slp-ink);
  background: var(--rp-silver, var(--slp-paper));
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.slp .gsp-window {
  border: 1px solid var(--slp-hairline-dark);
  background: var(--slp-paper);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

/* ------------------------------------------------------------------ */
/* MANDATORY: Black Title Bars / Header Bars for ALL Windows & Dialogs */
.slp .gsp-titlebar,
.slp .gsp-window > .gsp-titlebar,
.slp .gsp-dialog .gsp-titlebar {
  background: var(--rp-black) !important;
  color: var(--rp-white) !important;
  font-family: var(--font-display, Fraunces, Georgia, serif);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  padding: 4px 8px;
  border-bottom: 1px solid var(--rp-ink);
}

.slp .gsp-titlebar-icon {
  background: var(--rp-ink);
  border: 0;
  color: var(--rp-white);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  border-radius: 0;
}

.slp .gsp-titlebar .gsp-headcell {
  color: var(--rp-white);
  background: var(--rp-ink);
  border: 0;
  border-radius: 0;
  font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Menubar and Lead Filter                                            */
.slp .gsp-menubar {
  background: var(--slp-paper-2);
  border-bottom: 1px solid var(--slp-hairline);
  padding: 2px 4px;
  display: flex;
  gap: 2px;
  flex: none;
  align-items: center;
}

.slp .gsp-menu {
  padding: 4px 10px;
  cursor: pointer;
  color: var(--slp-ink);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
}
/* 2026-09-03 sibling fix (same defect as the Order Management active-tab
   regression, same author's identical pattern): [aria-current="page"] and
   [data-active="true"] fire together with :hover off one "current"
   boolean (see windows.tsx), and .slp .gsp-menu[x] (030) beat the ungated
   "module tab strip" rule in red-plate.css section 7 (.gsp-menu[data-
   active="true"], 020: white plate + 3px red top edge). This first pass
   stopped the active tab painting black permanently -- no local .slp
   [data-active="true"] rule exists, so the persistent (non-hover) state
   already fell through to red-plate's white-plate/red-top-edge rule --
   but left this :hover rule ungated (030), so it still beat that same
   020 active rule for the moment the pointer actually sat on the active
   tab: solid black on click and while hovered, same class of bug.
   MMDB-2571: :not([data-active="true"]) keeps the unchanged 030 black
   hover for every inactive tab, and stops matching an active one at all,
   so an active tab -- hovered or not -- falls through untouched to
   red-plate's white-plate/red-top-edge rule. No rule left in .slp paints
   the active tab black under any pointer state. */
.slp .gsp-menu:not([data-active="true"]):hover {
  background: var(--rp-black);
  color: var(--rp-white);
  border-color: var(--rp-black);
}
/* Record tabs (Ben, 2026-08-31: records default to a tab, same strip as
   the screens -- GspPopup, _lib/gsp.tsx, now delegates to OM's own OmPopup
   inside the tabbed desktop). Same black-ink menu language as every other
   tab here -- `[data-active="true"]` above already applies unchanged, this
   only tightens the padding a plain screen tab does not need, to leave
   room for the inline close x. Explicit here (this selector's specificity
   already wins the padding gsp-structural.css's own `.gsp-menu-record`
   would otherwise supply). */
.slp .gsp-menu-record { padding: 4px 3px 4px 10px; gap: 4px; }
.slp .gsp-menu-record-label { padding: 0; }

.slp .gsp-leadfilter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.slp .gsp-leadfilter-label {
  font-size: 10.5px;
  color: var(--slp-ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Toolbar and Statusbar                                              */
.slp .gsp-toolbar {
  background: var(--slp-paper-2);
  border-bottom: 1px solid var(--slp-hairline);
  padding: 3px 6px;
  display: flex;
  gap: 3px;
  align-items: center;
  flex: none;
}

.slp .gsp-tool {
  border: 1px solid transparent;
  background: transparent;
  color: var(--slp-ink);
  padding: 3px 8px;
  font: inherit;
  font-size: 11px;
  border-radius: var(--ds-radius-sm);
  cursor: pointer;
}
.slp .gsp-tool:hover {
  border-color: var(--rp-black);
  background: var(--slp-paper-3);
}
.slp .gsp-tool[data-on="true"] {
  border-color: var(--rp-black);
  background: var(--slp-paper-3);
}
.slp .gsp-tool[data-primary="true"] {
  border: 1px solid var(--rp-black);
  background: var(--rp-black);
  color: var(--rp-white);
  box-shadow: none;
}
.slp .gsp-tool[data-primary="true"]:hover {
  background: var(--rp-ink);
  border-color: var(--rp-ink);
}
.slp .gsp-toolbar-sep {
  background: var(--slp-hairline);
}
.slp .gsp-toolbar-note {
  color: var(--slp-ink-mute);
}
.slp .gsp-toolbar-label {
  color: var(--slp-ink-mute);
}

.slp .gsp-statusbar {
  background: var(--slp-paper-2);
  border-top: 1px solid var(--slp-hairline);
  color: var(--slp-ink-mute);
  padding: 3px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.slp .gsp-statusbar-cell {
  border: 1px solid var(--slp-hairline);
  background: var(--slp-paper);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 10.5px;
  color: var(--slp-ink);
  padding: 1px 6px;
  border-radius: 0;
}
.slp .gsp-statusbar-cell[data-tone="red"] {
  color: var(--ds-c-red-22);
  font-weight: 700;
}
.slp .gsp-statusbar-evidence {
  border: 1px solid var(--slp-hairline-dark);
  background: var(--slp-paper-3);
  color: var(--slp-ink);
  font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* Strategy Matrix (Why · What · How)                                 */
/* MMDB-1828: at 1280x720 the WHAT column was clipping. The grid track
   sizing (`1fr 36px 1fr 36px 1.25fr`, gsp-structural.css) is correct, but
   the `.gsp-matrix` grid box itself carried no `min-width: 0` — a grid
   item's automatic minimum size defaults to its content's min-content
   width, so once the three columns' combined min-content exceeded the
   viewport the WHOLE grid refused to shrink and overflowed past `.gsp-app`
   (which clips, `overflow: hidden`, rather than scrolls) instead of the
   individual columns' own `overflow: auto` ever getting a chance to
   engage. min-width: 0 here lets the grid shrink to the viewport first;
   each `.gsp-mcol-body` still scrolls internally (gsp-structural.css) as
   the fallback for whatever doesn't fit after that. Narrower fixed gaps
   free real width back to the three flexible columns at this size. */
.slp .gsp-matrix {
  background: var(--slp-paper);
  min-width: 0;
  grid-template-columns: 1fr 18px 1fr 18px 1.15fr;
}
.slp .gsp-mcol {
  border: 1px solid var(--slp-hairline-dark);
  background: var(--slp-paper);
  border-radius: 0;
  min-width: 0;
}
.slp .gsp-mcol-head {
  background: var(--rp-black) !important;
  border-bottom: 1px solid var(--rp-ink) !important;
  color: var(--rp-white) !important;
  font-family: var(--font-display, Fraunces, Georgia, serif);
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 8px;
}
.slp .gsp-mcol-head-count {
  color: rgba(255, 255, 255, 0.7) !important;
}
.slp .gsp-mcol-body {
  background: var(--slp-paper);
}
.slp .gsp-node {
  border: 1px solid var(--slp-hairline-dark);
  background: var(--slp-paper);
  border-radius: var(--ds-radius-sm);
}
.slp .gsp-node:hover {
  background: var(--slp-paper-2);
  border-color: var(--rp-black);
}
.slp .gsp-node[data-selected="true"] {
  border: 2px solid var(--rp-black);
  background: var(--slp-paper-2);
}
.slp .gsp-node-id {
  color: var(--rp-black);
  font-family: var(--font-mono, monospace);
  font-weight: 700;
}
.slp .gsp-node-sub {
  color: var(--slp-ink-mute);
}
.slp .gsp-node-open {
  border: 1px solid var(--rp-black);
  background: var(--slp-paper);
  color: var(--rp-black);
  box-shadow: none;
  border-radius: var(--ds-radius-sm);
  font-size: 10px;
}
.slp .gsp-node-open:hover {
  background: var(--rp-black);
  color: var(--rp-white);
}
.slp .gsp-edge {
  stroke: var(--slp-hairline-dark);
  stroke-width: 1.5;
}
.slp .gsp-edge[data-on="true"] {
  stroke: var(--rp-black);
  stroke-width: 2.5;
}
.slp .gsp-pane-foot {
  border-top: 1px solid var(--slp-hairline);
  background: var(--slp-paper-2);
  color: var(--slp-ink-mute);
}
.slp .gsp-pane-body {
  scrollbar-color: var(--slp-hairline-dark) var(--slp-paper);
}
/* MMDB-1827b/1828: the HOW card's plan-state line (gsp-structural.css:
   `.gsp-plan-state{white-space:nowrap}`) can run long ("plan drafted (4
   phases) — awaiting leader confirmation") — nowrap forced that single
   run past the card's width instead of breaking, which either scrolled
   the column sideways or, combined with the min-width gap above,
   contributed to the clip. It's a single card line, not a table cell that
   needs to stay single-line for row alignment, so let it wrap here. */
.slp .gsp-matrix .gsp-plan-state {
  white-space: normal;
}

/* ------------------------------------------------------------------ */
/* MMDB-2571: table heads are SILVER mono portal-wide (red-plate.css
   section 7's `.gsp-grid th` -- rp-silver ground, rp-ink text, mono
   uppercase, hairline borders, unscoped so it already reaches every
   .gsp-grid table including Strategy's). The block this comment replaces
   painted every .slp thead th solid black with !important, at (021) plus
   !important, so it always beat that canonical silver rule regardless of
   source order. Removed outright, not just de-!important'd -- .slp
   .gsp-grid th (021) still out-specifies the unscoped .gsp-grid th (011)
   on its own. All of Strategy's data tables carry className="gsp-grid"
   (StrategyHubSurface, KpiSurface, ProgramOverviewSurface,
   StrategyActivitySurface, StrategyProgramSurface, WizardPicker,
   ThemePopup, ins-sheet-trail-grid in InitiativeDetailSurface), so their
   heads now fall through to the silver rule unchanged. The one exception
   is the .gsp-gantt month-axis header in InitiativeDetailSurface's
   timeline (not .gsp-grid) -- it had no head background/color of its own
   anywhere in the cascade, only this deleted catch-all supplied one, so
   it now renders with the ambient --slp-paper/--slp-ink colors instead
   of a black band; flagged for runtime verification, not a data-table
   head so outside the "silver mono" mandate this fix targets. */
/* MMDB-2571 continued (reviewer finding): the two rules below were
   written for a black head (this file used to force one with the
   .slp thead th block removed above) -- white sort-arrow glyphs and a
   near-black ink hover fill, both illegible now the head is the
   canonical silver/ink rule. Both selectors already out-specify their
   only competitors (gsp-structural.css legacy blue-themed equivalents,
   lower specificity), so neither needs !important to win; dropped it
   from both. No new literals -- rp-silver-2 is the same token this
   file's own row-hover state and red-plate.css section 7 already use
   for "one step darker than silver, still legible", and rp-ink is the
   same text-ink token the silver head rule itself uses. */
.slp .gsp-grid th[data-click="true"]:hover {
  background: var(--rp-silver-2);
  color: var(--rp-ink);
}
.slp .gsp-grid th[data-sort="asc"]::after,
.slp .gsp-grid th[data-sort="desc"]::after {
  color: var(--rp-ink);
}
.slp .gsp-grid td {
  border-right: 1px solid var(--slp-hairline);
  border-bottom: 1px solid var(--slp-hairline);
  padding: 3px 6px;
}
.slp .gsp-grid tr:nth-child(even) td {
  background: var(--slp-paper-2);
}
.slp .gsp-grid tbody tr:hover td {
  background: var(--slp-paper-3);
}
.slp .gsp-grid tr[data-group="true"] td {
  background: var(--slp-paper-3);
  color: var(--slp-ink);
  font-weight: 700;
  border-bottom: 1px solid var(--slp-hairline-dark);
}
/* MMDB-2571 continued: .gsp-col-pin is applied to both the pinned body
   cells (td) and the pinned header cells (th, e.g. ProgramOverviewSurface's
   "ID"/"Objective" columns) to share the sticky-pin positioning defined
   elsewhere. The old unscoped .slp .gsp-col-pin rule below painted the
   paper (white) body fill onto both, so the pinned th's rendered white
   instead of the canonical silver every other head cell gets from
   red-plate.css's .gsp-grid th. Scoped to td so only body cells get the
   paper fill; the th rule right after gives pinned head cells the same
   --rp-silver ground as their neighbours. Both are (0,2,1) or lower,
   below the th[data-click="true"]:hover rule above (0,4,1), so a
   sortable pinned head's hover state still wins on specificity alone. */
.slp td.gsp-col-pin {
  background: var(--slp-paper);
}
.slp .gsp-grid th.gsp-col-pin {
  background: var(--rp-silver);
}
.slp .gsp-col-pin-id,
.slp .gsp-col-pin-title {
  border-right-color: var(--slp-hairline-dark);
}
.slp .gsp-grid tr:nth-child(even) td.gsp-col-pin {
  background: var(--slp-paper-2);
}
.slp .gsp-grid tbody tr:hover td.gsp-col-pin {
  background: var(--slp-paper-3);
}
.slp .gsp-group-toggle {
  color: var(--slp-ink);
}
.slp .gsp-group-toggle:hover .gsp-group-chevron {
  color: var(--rp-black);
}
.slp .gsp-group-chevron {
  color: var(--rp-black);
}
.slp .gsp-group-hint {
  color: var(--slp-ink-mute);
}
.slp .gsp-grid tr[data-click="true"] td:first-child::before {
  color: var(--rp-black);
}
.slp .gsp-grid tr[data-click="true"]:hover td:first-child::before {
  color: var(--slp-ink);
}
.slp .gsp-grid tr[data-ref="true"] td {
  background: var(--slp-paper-2);
  border-bottom-color: var(--slp-hairline-dark);
}
.slp .gsp-cell-sub {
  color: var(--slp-ink-mute);
}
.slp .gsp-cell-title {
  color: var(--slp-ink);
}
.slp .gsp-link {
  color: var(--rp-black);
  text-decoration: underline;
}
.slp .gsp-muted {
  color: var(--slp-ink-mute);
}

/* ------------------------------------------------------------------ */
/* Sections, Cards, Fieldsets, and Rollups                            */
.slp .gsp-section {
  border: 1px solid var(--slp-hairline-dark);
  background: var(--slp-paper);
  border-radius: var(--ds-radius-sm);
}
.slp .gsp-section-head {
  background: var(--rp-black) !important;
  border-bottom: 1px solid var(--rp-ink) !important;
  color: var(--rp-white) !important;
  font-family: var(--font-display, Fraunces, Georgia, serif);
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 8px;
}
.slp .gsp-section-head-note {
  color: rgba(255, 255, 255, 0.7) !important;
}
.slp .gsp-card {
  border: 1px solid var(--slp-hairline-dark);
  background: var(--slp-paper);
  border-radius: 0;
}
.slp .gsp-card-head {
  background: var(--rp-black) !important;
  border-bottom: 1px solid var(--rp-ink) !important;
  color: var(--rp-white) !important;
  font-family: var(--font-display, Fraunces, Georgia, serif);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
}
.slp .gsp-card-head-note {
  color: rgba(255, 255, 255, 0.7) !important;
}
/* MMDB-1829: the program sheet's own timeline no longer caps its month
   axis (InitiativeDetailSurface.tsx buildAxis) so every phase always
   shows — a long plan can now have many more month columns than before.
   Fixed, SMALLER columns keep the chart dense per Ben's redline instead of
   stretching to fill the card (gsp-structural.css's `.gsp-gantt{width:100%}`);
   overflow-x on the card body is the scroll fallback for a plan long
   enough that even small columns don't all fit (MMDB-1826: fit first,
   scroll internally, never drop content). */
.slp .gsp-card-body {
  overflow-x: auto;
}
.slp .gsp-gantt {
  width: auto;
  table-layout: fixed;
}
.slp .gsp-gantt th,
.slp .gsp-gantt td {
  width: 28px;
  min-width: 28px;
}
.slp .gsp-gantt .gsp-phase-name {
  width: 150px;
  min-width: 150px;
  max-width: 150px;
}
.slp .gsp-fieldset {
  border: 1px solid var(--slp-hairline-dark);
}
.slp .gsp-fieldset legend {
  color: var(--slp-ink);
  font-family: var(--font-display, Fraunces, Georgia, serif);
  font-weight: 600;
}
.slp .gsp-form-row label {
  color: var(--slp-ink-mute);
}
.slp .gsp-label {
  color: var(--slp-ink-mute);
}
.slp .gsp-headcell {
  border: 1px solid var(--slp-hairline);
  background: var(--slp-paper-2);
  color: var(--slp-ink);
}
.slp .gsp-rollup {
  border-bottom: 1px solid var(--slp-hairline);
  background: var(--slp-paper-2);
}
.slp .gsp-rollup-cell {
  border: 1px solid var(--slp-hairline);
  background: var(--slp-paper);
  color: var(--slp-ink);
}
.slp .gsp-hub-section {
  border: 1px solid var(--slp-hairline-dark);
  background: var(--slp-paper);
}
.slp .gsp-hub-section + .gsp-hub-section {
  margin-top: 8px;
}
/* MMDB-1832: Review & status stacks four full sections (needs attention /
   awaiting review / progress by theme / progress by lead) inside the one
   `.gsp-pane-body` scroller — the structural 46px bottom padding
   (gsp-structural.css) sized for a single-table screen left the last
   section's bottom rows sitting flush against the taskbar on a page this
   tall. More breathing room so nothing ever reads as cut off. */
.slp [data-eid="hub-body"] {
  padding-bottom: 72px;
}

/* ------------------------------------------------------------------ */
/* Inputs, Selects, Buttons, Popups & Dialogs                         */
.slp .gsp-input,
.slp .gsp-select,
.slp .gsp-textarea {
  border: 1px solid var(--slp-hairline-dark);
  background: var(--slp-paper);
  color: var(--slp-ink);
  border-radius: var(--ds-radius-sm);
}
.slp .gsp-input:focus,
.slp .gsp-select:focus,
.slp .gsp-textarea:focus {
  outline: 2px solid var(--rp-black);
  outline-offset: -1px;
}

.slp .gsp-btn {
  border: 1px solid var(--slp-hairline-dark);
  background: var(--slp-paper);
  color: var(--slp-ink);
  box-shadow: none;
  border-radius: var(--ds-radius-sm);
  font-size: 11.5px;
  padding: 3px 12px;
}
.slp .gsp-btn:hover {
  background: var(--slp-paper-3);
  border-color: var(--rp-black);
}
.slp .gsp-btn[data-default="true"] {
  border-color: var(--rp-black);
  background: var(--rp-black);
  color: var(--rp-white);
  outline: 0;
}
.slp .gsp-btn[data-default="true"]:hover {
  background: var(--rp-ink);
  border-color: var(--rp-ink);
}
.slp .gsp-btn:disabled {
  color: var(--slp-ink-mute);
  opacity: 0.6;
}
.slp .gsp-btnrow {
  border-top: 1px solid var(--slp-hairline);
  background: var(--slp-paper-2);
}
.slp .gsp-rowbtn {
  border: 1px solid var(--slp-hairline-dark);
  background: var(--slp-paper);
  border-radius: var(--ds-radius-sm);
}
.slp .gsp-rowbtn:hover {
  background: var(--slp-paper-3);
  border-color: var(--rp-black);
}
.slp .gsp-addrow {
  border: 1px dashed var(--slp-hairline-dark);
  background: var(--slp-paper);
  border-radius: 0;
}
.slp .gsp-addrow:hover {
  background: var(--slp-paper-3);
  border-color: var(--rp-black);
}

/* MMDB-1830: the leader directory picker (LeaderField, _lib/ui.tsx) and
   the theme selector's existing/new toggle (ThemeSelectField) both use the
   shared `.gsp-picker*` family (gsp-structural.css) — that base is inked
   for the XP blue palette, never re-inked for the black Letterpress theme
   here because nothing under `.slp` used it before this round. Mirrors
   order-mgmt's own `.olp .gsp-picker*` treatment (letterpress-order-mgmt.css)
   with strategy's own tokens. */
.slp .gsp-picker-chosen {
  border: 1px solid var(--slp-hairline-dark);
  background: var(--slp-paper);
}
.slp .gsp-picker-change {
  border: 1px solid var(--slp-hairline-dark);
  background: var(--slp-paper-2);
  color: var(--slp-ink);
  border-radius: 0;
}
.slp .gsp-picker-change:hover {
  background: var(--slp-paper-3);
  border-color: var(--ds-c-black-02);
}
.slp .gsp-picker-list {
  border: 1px solid var(--slp-ink);
  background: var(--slp-paper);
  box-shadow: var(--shadow-dialog);
}
.slp .gsp-picker-option {
  background: var(--slp-paper);
  border-bottom: 1px dotted var(--slp-hairline);
  color: var(--slp-ink);
}
.slp .gsp-picker-option:hover {
  background: var(--ds-c-black-02);
  color: var(--ds-c-white-01);
}
.slp .gsp-picker-option-meta {
  color: var(--slp-ink-mute);
}
.slp .gsp-picker-option:hover .gsp-picker-option-meta {
  color: var(--ds-c-white-01-a85);
}
.slp .gsp-picker-note {
  color: var(--slp-ink-mute);
}

.slp .gsp-dialog {
  background: var(--slp-paper);
  border: 1px solid var(--slp-ink);
  box-shadow: var(--shadow-dialog);
  font-family: var(--font-ui, "PP Neue Machina", "Segoe UI", sans-serif);
  border-radius: 0;
}
.slp .gsp-record-field {
  border-bottom: 1px dotted var(--slp-hairline);
}
.slp .gsp-record-field-l {
  color: var(--slp-ink-mute);
}
.slp .gsp-record-lead {
  border-color: var(--slp-hairline-dark);
  background: var(--slp-paper-2);
}
.slp .gsp-record-lead[data-tone="warn"] {
  background: var(--ds-c-amber-05);
  border-color: var(--ds-c-amber-26);
}
.slp .gsp-record-lead[data-tone="alert"] {
  background: var(--ds-c-red-06);
  border-color: var(--ds-c-red-19);
}
.slp .gsp-noplan {
  border: 1px solid var(--ds-c-red-19);
  background: var(--ds-c-red-06);
  color: var(--ds-c-red-24);
}
.slp .gsp-noplan .gsp-noplan-sub {
  color: var(--slp-ink);
}

/* ------------------------------------------------------------------ */
/* Chips, Progress, Meters, Action Tree & Wizard                      */
/* Why-What-How phase chips carry full sentences (phase.name), not short
   status labels -- the base .gsp-chip white-space:nowrap (gsp-structural.css)
   clipped them mid-word at the column edge. Wrap within the card instead. */
.slp .gsp-chip {
  border: 1px solid var(--slp-hairline-dark);
  background: var(--slp-paper);
  border-radius: var(--ds-radius-sm);
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 100%;
}
.slp .gsp-chip[data-tone="red"] { background: var(--ds-c-red-06); border-color: var(--ds-c-red-19); color: var(--ds-c-red-24); }
.slp .gsp-chip[data-tone="amber"] { background: var(--ds-c-amber-05); border-color: var(--ds-c-amber-26); color: var(--ds-c-yellow-26); }
.slp .gsp-chip[data-tone="green"] { background: var(--ds-c-green-03); border-color: var(--ds-c-green-11); color: var(--ds-c-green-12); }
.slp .gsp-chip[data-tone="blue"] { background: var(--slp-paper-3); border-color: var(--rp-black); color: var(--rp-black); }
.slp .gsp-chip[data-tone="stop"] { background: var(--slp-paper-2); border-color: var(--ds-c-red-19); color: var(--ds-c-red-24); font-weight: 700; }

.slp .gsp-meter-track { border-color: var(--slp-hairline-dark); background: var(--slp-paper); }
.slp .gsp-meter-fill { background: var(--rp-black); }

.slp .gsp-progress { border-color: var(--rp-black); background: var(--slp-paper-2); }
.slp .gsp-progress-step { color: var(--slp-ink); border-color: var(--slp-hairline-dark); background: var(--slp-paper); }
.slp .gsp-progress-bar { border-color: var(--slp-hairline-dark); background: var(--slp-paper); }
.slp .gsp-progress-fill { background: var(--rp-black); }
.slp .gsp-progress-pct { color: var(--slp-ink); }
.slp .gsp-progress-elapsed,
.slp .gsp-progress-note { color: var(--slp-ink-mute); }

.slp .gsp-gantt th,
.slp .gsp-gantt td { border-color: var(--slp-hairline); }
.slp .gsp-bar { background: var(--rp-black); }
.slp .gsp-bar[data-state="planned"] { background: var(--slp-hairline-dark); }

.slp .gsp-action-row { border-bottom: 1px dotted var(--slp-hairline); }
.slp .gsp-action-node { border-bottom: 1px dotted var(--slp-hairline); }
.slp .gsp-action-node:hover { background: var(--slp-paper-2); }
.slp .gsp-action-id { color: var(--rp-black); font-family: var(--font-mono, monospace); font-weight: 700; }
.slp .gsp-tree-toggle {
  border: 1px solid var(--slp-hairline-dark);
  background: var(--slp-paper);
  color: var(--slp-ink);
  border-radius: var(--ds-radius-sm);
}
.slp .gsp-tree-toggle:hover { background: var(--slp-paper-3); }
.slp .gsp-action-add { border-bottom: 1px solid var(--slp-hairline-dark); background: var(--slp-paper-2); }
.slp .gsp-action-shared { border-color: var(--ds-c-amber-26); background: var(--ds-c-amber-05); color: var(--ds-c-yellow-26); }

.slp .gsp-wiz-col { border-color: var(--slp-hairline-dark); background: var(--slp-paper); }
.slp .gsp-wiz-item { border-bottom: 1px dotted var(--slp-hairline); }
.slp .gsp-wiz-kind { border-color: var(--slp-hairline-dark); background: var(--slp-paper); }
.slp .gsp-wiz-section { border-bottom: 1px solid var(--slp-hairline); }
.slp .gsp-wiz-section-count { color: var(--slp-ink-mute); }
.slp .gsp-version { border-color: var(--slp-hairline-dark); background: var(--slp-paper-2); }
.slp .gsp-version[data-active="true"] { border-color: var(--rp-black); background: var(--slp-paper); }
.slp .gsp-version-meta { color: var(--slp-ink-mute); }
.slp .gsp-traction { border-color: var(--slp-hairline-dark); background: var(--slp-paper); }