/* StepSim platform shell, visual language 1.0 (docs/VISUAL_LANGUAGE.md).
   The top bar, page frame and shared parts for the platform pages: the
   launcher, the pathway and the Executive Cohort View. The player run uses
   the same top bar styles. The motion keyframes of section 4 are mirrored
   at the end of this file for shell pages; brand/hero.css holds the hero,
   chips, onboarding card, how-it-works rail, people and mission cards. */
@import url("./tokens.css");

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; max-width: 100%; }
body.ps {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: var(--bg-page);
  font: 400 var(--fs-body)/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, table { margin: 0; }
h1, h2, h3, p, li, th, td { overflow-wrap: break-word; }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; z-index: 30; top: 10px; left: 16px; padding: 8px 14px; transform: translateY(-160%); border-radius: var(--r-md); color: #fff; background: var(--navy); text-decoration: none; font-size: var(--fs-ui); }
.skip-link:focus { transform: none; }
.num, .cv-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Top bar */
.ps-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--nav-h);
  padding: 0 24px;
  border-bottom: 1px solid var(--card-line);
  background: var(--card);
}
.ps-brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.ps-brand img { display: block; width: 84px; height: auto; }
.ps-brand span { padding-left: 12px; border-left: 1px solid var(--card-line); color: var(--muted); font-size: var(--fs-sm); font-weight: 550; white-space: nowrap; }
.ps-nav { display: flex; align-items: center; gap: 2px; margin-left: 8px; }
.ps-nav a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 10px; border-radius: var(--r-md); color: var(--ink-2); font-size: var(--fs-ui); font-weight: 550; text-decoration: none; white-space: nowrap; }
.ps-nav a:hover { color: var(--ink); background: var(--bg-sunken); }
.ps-nav a[aria-current="page"] { color: var(--accent-press); background: var(--accent-soft); }
.ps-top-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ps-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: 1px solid var(--card-line); border-radius: var(--r-pill); color: var(--muted); background: var(--card); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.ps-tag-warn { border-color: var(--warn-line); color: var(--warn); background: var(--warn-bg); }

/* Page frame */
.ps-main { flex: 1; width: min(var(--container), calc(100% - 48px)); margin: 0 auto; padding: 40px 0 56px; }
.ps-main-narrow { width: min(var(--container-narrow), calc(100% - 48px)); }
.ps-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 28px; }
.ps-eyebrow { color: var(--accent); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ps-head h1 { margin-top: 6px; text-wrap: balance; font-size: var(--fs-h1); font-weight: 650; line-height: 1.2; letter-spacing: -.02em; }
.ps-head p { margin-top: 8px; max-width: 62ch; color: var(--ink-2); font-size: 15px; }
.ps-section { margin-top: 32px; }
.ps-section > h2 { margin-bottom: 12px; font-size: var(--fs-ui); font-weight: 650; color: var(--ink); }

/* Cards */
.ps-card { padding: 20px; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--card); }
.ps-card h2, .ps-card h3 { font-size: var(--fs-h3); font-weight: 650; line-height: 1.35; }
.ps-card p { margin-top: 6px; color: var(--ink-2); font-size: var(--fs-ui); }
.ps-grid { display: grid; gap: 16px; }
.ps-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ps-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ps-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding: 0; list-style: none; }
.ps-meta li { padding: 1px 8px; border: 1px solid var(--card-line); border-radius: var(--r-pill); color: var(--muted); font-size: var(--fs-xs); font-weight: 550; }
.ps-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--card-line-soft); }

/* Buttons */
.ps-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--ink);
  background: var(--card);
  font: 600 var(--fs-ui)/1.3 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.ps-btn:hover { border-color: var(--accent-line); background: var(--card); box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.10); }
.ps-btn:active { transform: scale(.98); }
.ps-btn-primary { border-color: var(--accent); color: #fff; background: var(--accent); }
.ps-btn-primary:hover { border-color: var(--accent-hover); background: var(--accent-hover); box-shadow: none; }
.ps-btn-quiet { border-color: transparent; background: transparent; color: var(--ink-2); }
.ps-btn-quiet:hover { border-color: var(--card-line); background: var(--card); }

/* Segmented switch between two views */
.ps-seg { display: inline-flex; padding: 3px; border: 1px solid var(--card-line); border-radius: var(--r-md); background: var(--bg-sunken); }
.ps-seg a { padding: 5px 12px; border-radius: 4px; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.ps-seg a[aria-current="page"] { color: var(--ink); background: var(--card); box-shadow: 0 0 0 1px var(--card-line); }

/* Steps: how the surfaces connect */
.ps-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--card); counter-reset: step; }
.ps-steps li { position: relative; padding: 16px 18px; color: var(--ink-2); font-size: var(--fs-sm); counter-increment: step; }
.ps-steps li + li { border-left: 1px solid var(--card-line); }
.ps-steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 20px; height: 20px; margin-bottom: 8px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--ink); font-size: 11px; font-weight: 700; }
.ps-steps strong { display: block; color: var(--ink); font-size: var(--fs-ui); }

/* Empty state */
.ps-empty { padding: 32px 24px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--card); text-align: center; }
.ps-empty h2 { font-size: var(--fs-h3); }
.ps-empty p { max-width: 52ch; margin: 6px auto 0; color: var(--ink-2); font-size: var(--fs-ui); }
.ps-empty .ps-btn { margin-top: 16px; }

/* Notice and toggle rows */
.ps-note { padding: 12px 14px; border: 1px solid var(--card-line); border-radius: var(--r-md); color: var(--ink-2); background: var(--card-soft); font-size: var(--fs-sm); }

/* Footer stamp */
.ps-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 16px 24px; border-top: 1px solid var(--card-line); color: var(--muted); background: var(--card); font-size: var(--fs-xs); }
.ps-foot button { min-height: 24px; padding: 0; border: 0; color: var(--muted); background: none; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ps-foot button:hover { color: var(--ink); }

/* Executive Cohort View */
.cohort { display: grid; gap: 16px; }
.cv-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; padding: 16px 20px; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--card); }
.cv-head h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cv-count { color: var(--ink); font-size: 15px; font-weight: 550; font-variant-numeric: tabular-nums; }
.cv-block { padding: 20px; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--card); }
.cv-group { margin: 18px 0 2px; font-size: var(--fs-ui); font-weight: 650; }
.cv-block h2 + .cv-group { margin-top: 4px; }
.cv-block h2 { margin-bottom: 10px; color: var(--muted); font-size: var(--fs-xs); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.cv-pattern { color: var(--ink); font-size: 15px; }
.cv-label { margin-top: 10px; color: var(--muted); font-size: var(--fs-sm); }
.cv-note { margin: 0 0 10px; color: var(--muted); font-size: var(--fs-sm); }
.cv-table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); }
.cv-table th, .cv-table td { padding: 9px 0; border-bottom: 1px solid var(--card-line-soft); text-align: left; vertical-align: top; }
.cv-table thead th { padding-top: 0; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.cv-table tbody th { padding-right: 16px; color: var(--ink); font-weight: 500; }
.cv-table tbody tr:last-child th, .cv-table tbody tr:last-child td { border-bottom: 0; }
.cv-table .cv-num { text-align: right; white-space: nowrap; color: var(--ink-2); }
/* Three headline counts and one neutral bar per count row (ruling R2-2). */
.cv-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cv-tile { padding: 16px 18px; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--card); }
.cv-tile-e { color: var(--muted); font-size: var(--fs-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.cv-tile-n { margin-top: 2px; color: var(--ink); font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.cv-tile-l { margin-top: 4px; color: var(--ink-2); font-size: var(--fs-sm); }
.cv-table .cv-bar-cell { width: 26%; padding-right: 16px; vertical-align: middle; }
.cv-table tbody .cv-bar-cell { background: linear-gradient(var(--bg-sunken), var(--bg-sunken)) left center / calc(100% - 16px) 8px no-repeat; }
.cv-bar { display: block; width: calc(var(--w) * 1%); height: 8px; border-radius: 2px; background: var(--ink-2); }
.cv-provenance { margin: 0; }
.cv-banner { padding: 12px 14px; border: 1px solid var(--warn-line); border-radius: var(--r-md); color: var(--warn); background: var(--warn-bg); font-size: var(--fs-sm); font-weight: 550; }

/* Individual pathway */
.debrief { display: grid; gap: 0; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--card); }
.debrief h2 { padding: 16px 20px 0; color: var(--muted); font-size: var(--fs-xs); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.debrief p { padding: 4px 20px 16px; border-bottom: 1px solid var(--card-line-soft); color: var(--ink); font-size: 15px; }
.debrief p:last-child { border-bottom: 0; }
.pv-cite { display: inline-block; margin-left: 4px; padding: 0 6px; border: 1px solid var(--card-line); border-radius: 4px; color: var(--muted); background: var(--card-soft); font: 500 11px/1.7 var(--mono); white-space: nowrap; }
.pv-signature { margin-top: 20px; }
.pv-signature h2 { font-size: var(--fs-h3); }
.pv-note { margin-top: 6px; color: var(--muted); font-size: 13px; }
.pv-table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 14px; }
.pv-table th, .pv-table td { padding: 8px 0; border-bottom: 1px solid var(--card-line-soft); text-align: left; vertical-align: top; }
.pv-table th { width: 30%; padding-right: 16px; font-weight: 600; }
.pv-provenance { margin-top: 16px; color: var(--muted); font-size: 13px; }
.ps-shared { margin-top: 20px; }
.ps-shared h3 { margin-bottom: 8px; font-size: var(--fs-ui); font-weight: 650; }
.withheld { padding: 24px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--card); }
.withheld h2 { font-size: var(--fs-h3); }
.withheld p { margin-top: 6px; color: var(--ink-2); font-size: var(--fs-ui); }

@media (max-width: 860px) {
  .ps-grid-3, .ps-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .ps-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-steps li:nth-child(3) { border-left: 0; }
  .ps-steps li:nth-child(n+3) { border-top: 1px solid var(--card-line); }
}
@media (max-width: 640px) {
  .ps-top { flex-wrap: wrap; height: auto; gap: 4px 12px; padding: 10px 16px 6px; }
  .ps-brand span { display: none; }
  .ps-top-end { margin-left: auto; }
  /* The top bar is the logo and the build tag; the page body holds every door (design second pass R6). */
  .ps-nav { display: none; }
  .ps-main, .ps-main-narrow { width: calc(100% - 32px); padding-top: 24px; }
  .ps-head h1 { font-size: 24px; }
  .ps-steps { grid-template-columns: minmax(0, 1fr); }
  .ps-steps li + li { border-left: 0; border-top: 1px solid var(--card-line); }
  .cv-block { padding: 16px; }
  /* Count rows fold to one line each; the theme table keeps two columns (R2-9). */
  .cv-tiles { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cv-tile { padding: 12px 16px; }
  .cv-tile-n { font-size: 22px; }
  .cohort .cv-table thead { display: none; }
  .cohort .cv-table tr { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--card-line-soft); }
  .cohort .cv-table tbody tr:last-child { border-bottom: 0; }
  .cohort .cv-table th, .cohort .cv-table td { padding: 0; border: 0; }
  .cohort .cv-table tbody th { flex: 1 1 auto; font-size: var(--fs-sm); }
  .cohort .cv-table .cv-bar-cell { display: flex; flex: 0 0 56px; align-items: center; align-self: stretch; width: 56px; }
  .cohort .cv-table tbody .cv-bar-cell { background-size: 100% 8px; }
  .cohort .cv-table .cv-num { font-size: var(--fs-sm); }
  .pv-table { table-layout: fixed; }
  .pv-table th { width: 44%; }
  .pv-table th, .pv-table td { overflow-wrap: anywhere; }
  .pv-table .pv-cite { white-space: normal; }
}
@media (max-width: 390px) {
  .ps-brand img { width: 72px; }
}

/* Motion (section 4), mirrored from surfaces/workspace.css for shell pages.
   Entry motion plays only while the page root carries data-enter: the page
   sets it on first paint and any pointerdown or keydown removes it, which
   lands every element in its final state at once. Opacity and transform
   only, so nothing shifts the layout. */
@keyframes gd-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes gd-pop { from { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.06); } }
@keyframes gd-fade { from { opacity: 0; } }
@keyframes gd-flip { from { opacity: 0; transform: perspective(400px) rotateY(80deg); } }
@keyframes gd-draw { from { transform: scaleX(0); } }
@keyframes gd-drawy { from { transform: scaleY(0); } }
@keyframes gd-draw-ring { from { stroke-dashoffset: var(--ring-len, 151); } }
@keyframes gd-draw-tick { from { stroke-dashoffset: var(--tick-len, 24); } }
@keyframes gd-dots { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes gd-show { from { opacity: 0; } }
@keyframes gd-hide { to { opacity: 0; } }
@keyframes gd-beat { 0%, 100% { box-shadow: 0 0 0 0 rgb(180 83 9 / 45%); } 60% { box-shadow: 0 0 0 7px rgb(180 83 9 / 0%); } }
@keyframes gd-shine { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
[data-enter] .gd-anim.gd-rise { animation: gd-rise var(--t-enter) var(--ease-out) var(--d, 0s) both; }
[data-enter] .gd-anim.gd-pop { animation: gd-pop .45s var(--ease-out) var(--d, 0s) both; }
[data-enter] .gd-anim.gd-fade { animation: gd-fade .35s var(--ease-std) var(--d, 0s) both; }
[data-enter] .gd-anim.gd-flip { animation: gd-flip .45s var(--ease-out) var(--d, 0s) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}