/* portal/workspace-steps.css — Lane W3 (occupancy-cost), workspace rebuild 2026-10-05/06.
   Styling for Step 0 (Current portfolio) and Step 1 (Long-range plan), markup from workspace-step0.js /
   workspace-step1.js. Light theme as drawn in the wireframe board, with the SAME dark-override convention
   portal/shell.css already uses (CSS vars on :root, flipped by prefers-color-scheme + the explicit
   [data-theme] attribute the existing theme toggle sets) so the toggle keeps working across these sections.
   No horizontal scroll on the page at 390px — only the two data tables scroll internally (ws-table-wrap),
   same convention the wireframe itself uses for wide tables. */

:root {
  --ws-bg: #FFFFFF;
  --ws-border: #D3D8DF;
  --ws-border-soft: #EBEEF2;
  --ws-text: #14171C;
  --ws-text-soft: #4E5663;
  --ws-text-muted: #6B7380;
  --ws-tile-bg: #FAFBFC;
  --ws-chip-bg: #F6F7F9;
  --ws-chip-border: #D3D8DF;
  --ws-chip-live-bg: #E6EDFD;
  --ws-chip-live-border: #B3C6F5;
  --ws-chip-live-text: #1E40AF;
  --ws-link: #1D4ED8;
  --ws-accent: #1D4ED8;
  --ws-accent-soft-bg: #EEF3FE;
  --ws-pill-on-bg: #14171C;
  --ws-pill-on-text: #FFFFFF;
  --ws-asia-bg: #FAF8FE;
  --ws-asia-border: #8C74C9;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ws-bg: #1B1E24;
    --ws-border: #333A44;
    --ws-border-soft: #2A2F37;
    --ws-text: #EDEFF2;
    --ws-text-soft: #AEB6C2;
    --ws-text-muted: #8A93A1;
    --ws-tile-bg: #23272E;
    --ws-chip-bg: #262B32;
    --ws-chip-border: #3A414C;
    --ws-chip-live-bg: #1E2A47;
    --ws-chip-live-border: #35508F;
    --ws-chip-live-text: #9BB6F5;
    --ws-link: #7CA3F5;
    --ws-accent: #4E7FEA;
    --ws-accent-soft-bg: #1E2733;
    --ws-pill-on-bg: #EDEFF2;
    --ws-pill-on-text: #14171C;
    --ws-asia-bg: #241F33;
    --ws-asia-border: #5A4C8C;
  }
}
:root[data-theme="dark"] {
  --ws-bg: #1B1E24; --ws-border: #333A44; --ws-border-soft: #2A2F37; --ws-text: #EDEFF2;
  --ws-text-soft: #AEB6C2; --ws-text-muted: #8A93A1; --ws-tile-bg: #23272E; --ws-chip-bg: #262B32;
  --ws-chip-border: #3A414C; --ws-chip-live-bg: #1E2A47; --ws-chip-live-border: #35508F;
  --ws-chip-live-text: #9BB6F5; --ws-link: #7CA3F5; --ws-accent: #4E7FEA; --ws-accent-soft-bg: #1E2733;
  --ws-pill-on-bg: #EDEFF2; --ws-pill-on-text: #14171C; --ws-asia-bg: #241F33; --ws-asia-border: #5A4C8C;
}
:root[data-theme="light"] {
  --ws-bg: #FFFFFF; --ws-border: #D3D8DF; --ws-border-soft: #EBEEF2; --ws-text: #14171C;
  --ws-text-soft: #4E5663; --ws-text-muted: #6B7380; --ws-tile-bg: #FAFBFC; --ws-chip-bg: #F6F7F9;
  --ws-chip-border: #D3D8DF; --ws-chip-live-bg: #E6EDFD; --ws-chip-live-border: #B3C6F5;
  --ws-chip-live-text: #1E40AF; --ws-link: #1D4ED8; --ws-accent: #1D4ED8; --ws-accent-soft-bg: #EEF3FE;
  --ws-pill-on-bg: #14171C; --ws-pill-on-text: #FFFFFF; --ws-asia-bg: #FAF8FE; --ws-asia-border: #8C74C9;
}

.ws-panel {
  background: var(--ws-bg);
  border: 1px solid var(--ws-border);
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;
  min-width: 0;
  color: var(--ws-text);
  font-family: inherit;
}
.ws-step { display: flex; flex-direction: column; gap: 16px; }
.ws-step-primary { border-color: var(--ws-text); border-width: 2px; }

.ws-step-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; }
.ws-step-head-text { display: flex; flex-direction: column; gap: 6px; max-width: 820px; }
.ws-eyebrow { font: 500 12px/1 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--ws-text-soft); }
.ws-h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--ws-text); }
.ws-h3 { margin: 0 0 10px; font-size: 16px; font-weight: 600; color: var(--ws-text); }
.ws-sub { margin: 0; font-size: 14px; color: var(--ws-text-soft); line-height: 1.45; }
.ws-sub-small { font-size: 13px; }
.ws-muted { color: var(--ws-text-muted); }

.ws-step-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ws-btn {
  font: 500 14px 'IBM Plex Sans', sans-serif;
  min-height: 40px; padding: 0 16px; border-radius: 8px;
  border: 1px solid var(--ws-chip-border); background: var(--ws-bg); color: var(--ws-text);
  cursor: pointer;
}
.ws-btn-strong { font-weight: 600; border-color: var(--ws-text); }
.ws-btn-small { min-height: 34px; padding: 0 12px; font-size: 13px; display: inline-flex; align-items: center; text-decoration: none; }
.ws-btn[disabled] { cursor: default; opacity: .62; }
/* Workspace rebuild (W1 QA, 2026-10-06) — the Step-0 Upload / Update / Archive actions are honestly disabled in
   the demo: a muted fill + muted border + muted text so they read as OFF, never as an active primary button
   (fix 3). Paired with the disabled attribute above; the demo note below the row says why. */
.ws-btn-disabled { background: var(--ws-chip-bg); border-color: var(--ws-chip-border); color: var(--ws-text-muted); font-weight: 500; }

.ws-kpi-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .ws-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ws-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ws-kpi {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px;
  border: 1px solid var(--ws-border-soft); border-radius: 8px; background: var(--ws-tile-bg); min-width: 0;
}
.ws-kpi b { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ws-text); word-break: break-word; }
.ws-kpi span { font-size: 13px; color: var(--ws-text-soft); }

.ws-table-wrap { overflow-x: auto; }
.ws-table { border-collapse: collapse; width: 100%; }
.ws-table th {
  font-size: 12px; font-weight: 600; color: var(--ws-text-soft); text-align: left;
  padding: 8px 10px; border-bottom: 1px solid var(--ws-border); white-space: nowrap;
}
.ws-table td { font-size: 14px; padding: 9px 10px; border-bottom: 1px solid var(--ws-border-soft); vertical-align: top; color: var(--ws-text); }
.ws-table td.n, .ws-table th.n { text-align: right; font-variant-numeric: tabular-nums; }

.ws-expander { display: flex; flex-direction: column; gap: 8px; }
.ws-expand-link {
  background: none; border: 0; padding: 0; margin: 0; font-size: 14px; color: var(--ws-link);
  cursor: pointer; text-align: left;
}
.ws-expand-link:hover { text-decoration: underline; }
.ws-expand-body[hidden] { display: none; }

.ws-pill {
  display: inline-flex; align-items: center; font: 500 12px 'IBM Plex Sans', sans-serif;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ws-chip-border); background: var(--ws-chip-bg);
  color: var(--ws-text-soft);
}
.ws-pill-grow, .ws-pill-maintain, .ws-pill-reduce, .ws-pill-exit {
  background: var(--ws-pill-on-bg); color: var(--ws-pill-on-text); border-color: var(--ws-pill-on-bg);
}

.ws-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--ws-chip-border); background: var(--ws-chip-bg);
  color: var(--ws-text-soft); white-space: nowrap;
}
.ws-chip-live { color: var(--ws-chip-live-text); background: var(--ws-chip-live-bg); border-color: var(--ws-chip-live-border); }

.ws-step1-cols { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.ws-step1-main { flex: 999 1 480px; min-width: 0; }
.ws-step1-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.ws-mi {
  border: 1px solid var(--ws-border-soft); border-radius: 8px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px; background: var(--ws-bg);
}
.ws-mi-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ws-mi-head b { font-size: 14px; color: var(--ws-text); }
.ws-mi-label { font-size: 12px; color: var(--ws-text-soft); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.ws-mi-asia { border-style: dashed; border-color: var(--ws-asia-border); background: var(--ws-asia-bg); }

.ws-asia-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; font-size: 13px; color: var(--ws-text-soft); }

.ws-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ws-text-soft); line-height: 1.5; }

@media (max-width: 390px) {
  .ws-panel { padding: 14px; }
  .ws-h2 { font-size: 19px; }
}