/* static/strategy/strategy.css · ROADMAP 7.192 (D-232) — Strategy.
 *
 * Two parts:
 *   1. The Concreet skin, scoped to `.st-skin` — the same token values as the
 *      Assessment v2 skin (static/assessment-v2/av2.css, design-system §7.15)
 *      and Performance → SEO (static/performance-seo/seo.css), redefined on
 *      Strategy's content wrapper only. The wrapper sits INSIDE
 *      #strategyContent, so the shared nav tray above it (#strategySheetNav,
 *      nav-header parity) keeps the app tokens. The token block is the only
 *      place in this file a colour literal may appear.
 *   2. Strategy's components (`.st-*`), built on the tokens.
 *
 * Adopted board: docs/design/mocks/2026-10-07-strategy-workspace-board.html rev 6.
 */

/* st-skin-tokens:start */
.st-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;
  --st-slab-shadow: 6px 6px 0 var(--paper-3);
  --st-slab-shadow-hover: 8px 8px 0 var(--paper-4);
  --radius: 0; --r-card: 0; --r-sm: 0; --r-chip: 0; --r-badge: 0;
  font-family: var(--sans);
}
/* st-skin-tokens:end */

.st-skin { display: flex; flex-direction: column; gap: var(--sp-4); color: var(--ink-1); }

/* ── control row (§7.9: filters and the one action in one row, no banner above) */
.st-skin .st-ctl { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.st-skin .st-ctl > .st-btn { margin-left: auto; }
.st-skin .st-seg { display: inline-flex; border: 1px solid var(--paper-4); background: var(--paper-0); }
.st-skin .st-seg button { height: var(--nav-fil-h); padding: 0 var(--sp-3); font: inherit; font-size: var(--fs-meta); color: var(--ink-2);
  background: var(--paper-0); border: 0; border-right: 1px solid var(--paper-4); cursor: pointer; }
.st-skin .st-seg button:last-child { border-right: 0; }
.st-skin .st-seg button.st-on { background: var(--ink-0); color: var(--paper-0); }
.st-skin .st-seg .st-n { font-family: var(--mono); font-size: var(--fs-micro); opacity: .7; }
.st-skin .st-btn { height: var(--nav-fil-h); display: inline-flex; align-items: center; gap: var(--sp-1); padding: 0 var(--sp-3);
  border: 1px solid var(--ink-0); background: var(--paper-0); color: var(--ink-0); font: inherit; font-size: var(--fs-meta);
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.st-skin .st-btn:hover { background: var(--paper-1); }
.st-skin .st-lnk { font: inherit; font-size: var(--fs-meta); color: var(--ink-1); background: none; border: 0; padding: 0;
  text-decoration: underline; text-decoration-color: var(--paper-4); text-underline-offset: 3px; cursor: pointer; }
.st-skin .st-lnk.st-q { color: var(--ink-3); }
.st-skin .st-nc { color: var(--ink-4); font-family: var(--mono); font-size: var(--fs-meta); }

/* ── cluster cards: the Assessment v2 cluster card (ink slab, offset shadow —
   the shadow is the click affordance, so only clickable cards carry it) */
.st-skin .st-cgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 1100px) { .st-skin .st-cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .st-skin .st-cgrid { grid-template-columns: minmax(0, 1fr); } }
.st-skin .cluster-card.st-cc { background: var(--paper-0); border: 1px solid var(--ink-0); box-shadow: var(--st-slab-shadow);
  padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); cursor: pointer; min-width: 0;
  border-radius: 0; text-align: left; }
.st-skin .cluster-card.st-cc:hover { box-shadow: var(--st-slab-shadow-hover); background: var(--paper-0); border-color: var(--ink-0); }
.st-skin .cluster-card.st-cc:focus-within { outline: none; box-shadow: var(--st-slab-shadow), var(--focus-ring); }
.st-skin .st-cc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-2); }
.st-skin .cluster-card .st-cc-name { display: block; font: inherit; font-size: var(--fs-body); font-weight: 600; color: var(--ink-0); line-height: 1.3; letter-spacing: normal;
  overflow-wrap: anywhere; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; }
.st-skin .cluster-card .st-cc-name:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.st-skin .st-cc-menu { position: relative; flex: none; }
.st-skin .st-cc-menu > summary { list-style: none; width: 26px; height: 26px; display: grid; place-items: center;
  color: var(--ink-3); cursor: pointer; opacity: 0; }
.st-skin .st-cc-menu > summary::-webkit-details-marker { display: none; }
.st-skin .st-cc:hover .st-cc-menu > summary, .st-skin .st-cc:focus-within .st-cc-menu > summary,
.st-skin .st-cc-menu[open] > summary { opacity: 1; }
.st-skin .st-cc-menu > summary:hover { background: var(--paper-2); color: var(--ink-0); }
.st-skin .st-cc-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: var(--z-dropdown, 30); min-width: 168px;
  background: var(--paper-0); border: 1px solid var(--paper-3); box-shadow: var(--shadow-2); padding: var(--sp-1);
  display: flex; flex-direction: column; }
.st-skin .st-cc-pop button { text-align: left; padding: var(--sp-2) var(--sp-3); font: inherit; font-size: var(--fs-body-s);
  background: none; border: 0; color: var(--ink-1); cursor: pointer; }
.st-skin .st-cc-pop button:hover { background: var(--paper-1); }
.st-skin .st-cc-pop .st-danger { color: var(--bad); border-top: 1px solid var(--paper-2); }
.st-skin .st-cc-fig { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.st-skin .st-cc-num { font-size: 30px; line-height: 1.05; font-weight: 800; color: var(--ink-0); }
.st-skin .st-cc-num.st-nc { font-size: 30px; color: var(--ink-4); }
.st-skin .st-cc-unit { font-size: var(--fs-meta); color: var(--ink-3); }
.st-skin .st-cc-line { font-size: var(--fs-meta); color: var(--ink-2); }
.st-skin .st-cc-bar { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-1); }
.st-skin .st-cc-track { display: flex; height: 6px; border-radius: var(--r-pill); overflow: hidden; background: var(--paper-2); }
.st-skin .st-cc-seg { display: block; height: 100%; }
.st-skin .st-cc-seg.idea, .st-skin .st-cc-dot.idea { background: var(--ink-4); }
.st-skin .st-cc-seg.planned, .st-skin .st-cc-dot.planned { background: var(--ink-2); }
/* green = progress / achieved (§0.1; the Strategy progress numerals are a kept exception) */
.st-skin .st-cc-seg.drafting, .st-skin .st-cc-dot.drafting { background: var(--concreet); }
.st-skin .st-cc-seg.live, .st-skin .st-cc-dot.live { background: var(--concreet-deep); }
.st-skin .st-cc-legend { display: flex; gap: var(--sp-3); flex-wrap: wrap; font-family: var(--mono); font-size: var(--fs-micro); color: var(--ink-3); }
.st-skin .st-cc-lg.st-on { color: var(--concreet-ink); font-weight: 600; }
.st-skin .st-cc-dot { display: inline-block; width: 7px; height: 7px; margin-right: 4px; vertical-align: middle; }
.st-skin .st-cc-empty { flex-direction: row; justify-content: space-between; align-items: center; }
.st-skin .st-cc-foot { margin-top: auto; padding-top: var(--sp-2); border-top: 1px solid var(--paper-2); display: flex; align-items: center; }
.st-skin .st-pill { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: .06em; padding: 2px var(--sp-2); }
.st-skin .st-pill.st-ok { background: var(--concreet-soft); color: var(--concreet-ink); font-weight: 600; }
.st-skin .cluster-card.add.st-cc-new { border: 1px dashed var(--paper-4); background: transparent; box-shadow: none; color: var(--ink-3);
  min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
  font: inherit; cursor: pointer; }
.st-skin .cluster-card.add.st-cc-new:hover { border-color: var(--ink-3); color: var(--ink-1); background: transparent; }
.st-skin .st-basis { margin: 0; font-family: var(--mono); font-size: var(--fs-micro); color: var(--ink-3); }

.st-skin .st-cc-unit.st-err { color: var(--bad); }
.st-skin .st-type .select { height: var(--nav-fil-h); padding-top: 0; padding-bottom: 0; font-size: var(--fs-meta); }
.st-skin .st-empty { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); padding: var(--sp-8) var(--sp-6);
  border: 1px dashed var(--paper-4); text-align: center; }
.st-skin .st-empty p { margin: 0; max-width: 56ch; color: var(--ink-3); font-size: var(--fs-body); }
.st-skin .st-empty-act { display: flex; gap: var(--sp-2); }
.st-skin .st-btn.st-pri { background: var(--ink-0); color: var(--paper-0); }
.st-skin .st-btn.st-pri:hover { background: var(--ink-1); }

/* ── cluster detail (7.192 Car E2): header card · level-2 tabs · panes ── */
.st-skin.st-det { gap: var(--sp-5); }
.st-skin .st-hero { background: var(--paper-0); border: 1px solid var(--paper-3); padding: var(--sp-4) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3); }
.st-skin .st-back { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--ink-3); text-decoration: none; }
.st-skin .st-hero-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; }
.st-skin .st-hero-head { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; flex: 1 1 320px; }
.st-skin .st-name { font: inherit; font-size: 26px; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; color: var(--ink-0);
  border: 1px solid transparent; background: transparent; padding: 0 var(--sp-1); margin-left: calc(-1 * var(--sp-1)); width: 100%; min-width: 0; }
.st-skin .st-name:hover { border-color: var(--paper-3); }
.st-skin .st-name:focus { outline: none; border-color: var(--ink-2); box-shadow: var(--focus-ring); }
.st-skin .st-meta { display: flex; gap: var(--sp-1); flex-wrap: wrap; align-items: center; font-family: var(--mono); font-size: var(--fs-meta); color: var(--ink-3); }
.st-skin .st-meta .st-g { color: var(--concreet-ink); }
.st-skin .st-btn.st-cta { height: var(--ctl-h); }
.st-skin .st-hero-foot { display: flex; gap: var(--sp-5); align-items: center; padding-top: var(--sp-3); border-top: 1px solid var(--paper-2); }
.st-skin .st-hero-foot .st-danger { margin-left: auto; color: var(--bad); }
/* level 2: the shared kit (.analytics-subtabs / .analytics-subtab) — not redeclared here.
   The count slot is always rendered, so a count arriving late cannot widen its tab. */
.st-skin .st-tabs .count-pill { min-width: 2ch; display: inline-block; }
.st-skin .st-pane { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.st-skin .st-src { font-family: var(--mono); font-size: var(--fs-micro); color: var(--ink-3); }
.st-skin .st-err { color: var(--bad); }
.st-skin .st-panel { background: var(--paper-0); border: 1px solid var(--paper-3); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.st-skin .st-tw { overflow-x: auto; }
.st-skin .st-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body-s); }
.st-skin .st-table th { font-family: var(--mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3);
  text-align: left; font-weight: 500; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--paper-3); }
.st-skin .st-table td { padding: var(--sp-3); border-bottom: 1px solid var(--paper-2); color: var(--ink-2); }
.st-skin .st-table td b { color: var(--ink-0); }
.st-skin .st-table .st-r { text-align: right; font-family: var(--mono); }
.st-skin .st-brief { display: flex; flex-direction: column; gap: var(--sp-4); }
.st-skin .st-field { display: flex; flex-direction: column; gap: var(--sp-1); }
.st-skin .st-field label { font-family: var(--mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.st-skin .st-field textarea { font: inherit; font-size: var(--fs-body); min-height: 72px; padding: var(--sp-3); border: 1px solid var(--paper-4); background: var(--paper-0); color: var(--ink-0); }
.st-skin .st-field textarea:focus { outline: none; border-color: var(--ink-2); box-shadow: var(--focus-ring); }
.st-skin .st-hero .orch-kpis { max-width: none; margin: 0; background: transparent; border-radius: 0; padding: var(--sp-4) 0;
  border-top: 1px solid var(--paper-2); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.st-skin .st-hero .orch-kpi { padding: 0 var(--sp-5); border-right: 1px solid var(--paper-2); text-align: left; }
.st-skin .st-hero .orch-kpi:first-child { padding-left: 0; }
.st-skin .st-hero .orch-kpi:last-child { border-right: 0; }
@media (max-width: 700px) { .st-skin .st-hero .orch-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-4); }
  .st-skin .st-hero .orch-kpi:nth-child(odd) { padding-left: 0; } }
.st-skin .st-hero .orch-kpi, .st-skin .st-hero .orch-kpi.empty, .st-skin .st-hero .orch-kpi > * { text-align: left; align-items: flex-start; justify-content: flex-start; }
/* legacy panes inside a panel: the panel owns the inset, the old block's own padding goes */
.st-skin .st-legacy .cluster-detail-block { padding: 0; border: 0; }
.st-skin .st-legacy .cluster-detail-block + .cluster-detail-block { border-top: 0; }
.st-skin .st-legacy select.account-input { height: var(--ctl-h); padding-top: 0; padding-bottom: 0; }
@media (max-width: 700px) { .st-skin .st-hero .orch-kpi { border-right: 0; min-width: 0; overflow-wrap: anywhere; } }