/* OceanCrest AI — case-study chrome + components ("passage record" pages).
   Loaded AFTER styles.css; consumes its tokens, defines nothing token-level.
   Blue budget on these pages (audit before adding any var(--blue)):
     1 course rail + waypoints + topbar dots   2 primary CTA fills (cover/outcomes)
     3 focus rings (inherited)                 4 link-hover / active-tab underline
     5 the emphasized line in the accuracy chart + its milestone rings */

:root { color-scheme: light; }

/* ---------- app frame ---------- */

.case-body { overflow-x: clip; }

.case-side {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: 260px;
  background: var(--paper);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 20px;
  z-index: 90;
}
.case-side .brand img { height: 18px; width: auto; }
.case-side-label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.case-top {
  position: fixed;
  top: 0; left: 260px; right: 0;
  height: var(--nav-h);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-inline: clamp(16px, 3vw, 40px);
  z-index: 80;
}
.case-top-meta {
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.case-top-meta strong {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--navy);
}

.case-main {
  margin-left: 260px;
  padding: calc(var(--nav-h) + clamp(32px, 5vh, 64px)) clamp(20px, 4vw, 56px) 64px;
}
.chapter-col { width: min(880px, 100%); margin-inline: auto; }

/* ---------- sidebar rail (the course line) ---------- */

.case-nav { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.rail {
  position: absolute;
  top: 6px; bottom: 6px;
  left: 11px;
  width: 24px;
  pointer-events: none;
}
.rail-plan, .rail-track {
  position: absolute;
  left: 50%;
  width: 1.5px;
  margin-left: -0.75px;
}
.rail-plan {
  top: 0; bottom: 0;
  background: repeating-linear-gradient(to bottom, var(--blue) 0 5px, transparent 5px 10px);
  opacity: 0.3;
}
.rail-track {
  top: 0;
  height: var(--case-progress, 0%);
  background: var(--blue);
  transition: height 400ms var(--ease-out);
}

.case-nav ol { display: grid; gap: 2px; }
.case-nav a {
  position: relative;
  display: grid;
  grid-template-columns: 24px 26px 1fr;
  align-items: center;
  gap: 8px;
  padding: 10px 6px 10px 0;
  text-decoration: none;
  color: var(--slate);
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: 3px;
}
.case-nav a .wpt {
  justify-self: center;
  width: 9px; height: 9px;
  border: 1.5px solid var(--blue);
  border-radius: 50%;
  background: var(--paper);
  opacity: 0.35;
  transform: scale(0.8);
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out);
}
.case-nav a .idx {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.case-nav a:hover { color: var(--navy); }
.case-nav a[aria-current="page"] { color: var(--navy); }
.case-nav a[aria-current="page"] .wpt {
  opacity: 1;
  transform: scale(1.1);
}
.case-nav li.is-visited a .wpt {
  opacity: 1;
  transform: scale(0.9);
  background: var(--blue);
}
.case-nav a .wpt--berth { border-radius: 0; rotate: 45deg; }

/* ch3 sub-items */
.case-subnav {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 250ms var(--ease-out);
}
html[data-route^="team"] .case-subnav { grid-template-rows: 1fr; }
.case-subnav > div { overflow: hidden; }
.case-subnav a {
  grid-template-columns: 24px 1fr;
  font-size: 0.8125rem;
  font-weight: 400;
  padding-block: 7px;
}
.case-subnav a .tick {
  justify-self: center;
  width: 6px; height: 1.5px;
  background: var(--navy);
  opacity: 0.4;
  position: static;
}
.case-subnav a .tick::before, .case-subnav a .tick::after { content: none; }
.case-subnav a[aria-current="page"] .tick { opacity: 1; }

.case-disclosure {
  font-family: var(--mono);
  font-size: 0.5938rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.8;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

/* ---------- topbar progress dots ---------- */

.case-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.case-dots .n { font-family: var(--mono); font-size: 0.6875rem; color: var(--muted); letter-spacing: 0.08em; }
.case-dots i {
  width: 6px; height: 6px;
  border-radius: 50%;
  border: 1.5px solid var(--blue);
  opacity: 0.35;
}
.case-dots i.is-visited { background: var(--blue); opacity: 1; }
.case-dots i.is-current { opacity: 1; }

/* mobile hamburger */
.case-menu-btn {
  display: none;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius-card);
  padding: 9px;
  cursor: pointer;
  color: var(--navy);
}

/* ---------- routing (attribute router) ---------- */

.js .chapter { display: none; }
html[data-route="cover"] #cover,
html[data-route="discovery"] #discovery,
html[data-route="setup"] #setup,
html[data-route^="team"] #team,
html[data-route="engine"] #engine,
html[data-route="outcomes"] #outcomes { display: block; }

/* team role panels */
.js .team-panel { display: none; }
html[data-route="team"] #team-planner,
html[data-route="team-planner"] #team-planner,
html[data-route="team-director"] #team-director,
html[data-route="team-executive"] #team-executive { display: block; }

/* rail + dots progress per route */
html[data-route="cover"] { --case-progress: 4%; }
html[data-route="discovery"] { --case-progress: 20%; }
html[data-route="setup"] { --case-progress: 40%; }
html[data-route^="team"] { --case-progress: 60%; }
html[data-route="engine"] { --case-progress: 80%; }
html[data-route="outcomes"] { --case-progress: 100%; }

/* ---------- chapter skeleton ---------- */

.chapter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  margin-bottom: clamp(24px, 4vh, 40px);
}
.chapter h1 {
  outline: none; /* focus target on route change; ring would be noise */
}
.chapter .display-l { margin-bottom: 18px; }
.chapter-intro { margin-bottom: clamp(32px, 5vh, 56px); }

.block { margin-bottom: clamp(40px, 6vh, 64px); }
.block > h3 { margin-bottom: 6px; }
.block-desc {
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: 18px;
}

.chapter-foot {
  border-top: 1px solid var(--line);
  margin-top: clamp(48px, 8vh, 80px);
  padding-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.next-link {
  text-decoration: none;
  font-weight: 500;
  color: var(--navy);
  font-size: 0.9375rem;
  position: relative;
}
.next-link .arrow { display: inline-block; transition: transform var(--dur-micro) var(--ease-out); }
.next-link:hover .arrow { transform: translateX(4px); }
.next-link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -3px;
  height: 1.5px;
  background: var(--blue);
  transition: right var(--dur-micro) var(--ease-out);
}
.next-link:hover::after { right: 0; }

/* ---------- cover ---------- */

#cover { position: relative; }
#cover::before {
  content: "";
  position: absolute;
  inset: -32px;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%2316202e' stroke-width='1'%3E%3Cpath d='M60 210 C60 130, 140 80, 220 100 C300 120, 350 190, 330 260 C310 330, 220 360, 150 330 C90 305, 60 270, 60 210 Z'/%3E%3Cpath d='M100 210 C100 155, 160 118, 220 132 C280 146, 315 196, 300 248 C285 300, 220 322, 168 300 C122 280, 100 252, 100 210 Z'/%3E%3Cpath d='M140 210 C140 178, 176 156, 214 164 C252 172, 275 202, 266 234 C257 266, 218 282, 186 268 C158 256, 140 236, 140 210 Z'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 85%);
  mask-image: linear-gradient(to bottom, black 30%, transparent 85%);
}
.cover-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--slate);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 6px 12px;
  margin-bottom: 28px;
  background: var(--paper);
}
.cover-h1 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--navy);
  margin-bottom: 24px;
}
.cover-deck { max-width: 52ch; margin-bottom: 18px; }
.cover-spec {
  font-family: var(--mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 32px;
}
.cover-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: clamp(40px, 7vh, 72px); position: relative; z-index: 1; }
/* 2026-09-09 · cover photograph (OC-308 library, ../assets/photos/), plain: no frame, no caption */
.cover-photo { margin: 0 0 clamp(32px, 5vh, 48px); }
.cover-photo img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius-card); }

.manifest { border-top: 1px solid var(--line); }
.manifest > p { margin-block: 16px 8px; }
.manifest ol { display: grid; }
.manifest a {
  display: grid;
  grid-template-columns: 40px 130px 1fr auto;
  align-items: baseline;
  gap: 14px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.manifest a:hover .mf-name { text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.manifest .mf-idx { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }
.manifest .mf-name { font-weight: 500; color: var(--navy); transition: color var(--dur-micro) var(--ease-out); }
.manifest .mf-promise { color: var(--ink-body); font-size: 0.9375rem; }
.manifest .arrow { color: var(--slate); }
@media (max-width: 720px) {
  .manifest a { grid-template-columns: 32px 1fr auto; }
  .manifest .mf-promise { grid-column: 2 / -1; grid-row: 2; font-size: 0.875rem; }
}

/* ---------- sounding plates (headline stats) ---------- */

.plates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.plate {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--line);
  padding: 20px 18px 24px;
  background: var(--paper);
}
.plate .chart-ref { display: block; margin-bottom: 10px; }
.plate-value {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.plate-value .unit {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--slate);
}
.plate-sub { font-size: 0.8125rem; color: var(--ink-body); margin-top: 6px; }
.plate::after {
  content: "";
  position: absolute;
  left: 18px; right: 18px; bottom: 12px;
  height: 1px;
  background: var(--line);
  background-image: linear-gradient(var(--navy), var(--navy)), linear-gradient(var(--navy), var(--navy)), linear-gradient(var(--navy), var(--navy));
  background-size: 1px 5px, 1px 5px, 1px 5px;
  background-position: 15% -2px, 50% -2px, 85% -2px;
  background-repeat: no-repeat;
  opacity: 0.6;
}

/* ---------- chips ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.6563rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slate);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 3px 8px;
  background: var(--paper);
  white-space: nowrap;
}
.chip::before { content: ""; flex: 0 0 auto; }
.chip--on { color: var(--navy); }
.chip--on::before { width: 6px; height: 6px; border-radius: 50%; background: var(--navy); }
.chip--flag { color: var(--navy); }
.chip--flag::before {
  width: 0.45rem; height: 0.45rem;
  background: linear-gradient(to top right, transparent 50%, currentColor 50%);
}
.chip--standby::before { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--slate); }
.chip--p1 { color: var(--navy); font-weight: 500; }
.chip--plain::before { content: none; }

/* ---------- generic row tables (single-render responsive) ---------- */

.rows { border-top: 1px solid var(--line); }
.row {
  display: grid;
  gap: 8px 16px;
  align-items: baseline;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
}
.row-head {
  font-family: var(--mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding: 8px 4px;
  display: grid;
  gap: 16px;
}
.cell-label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.row .name { font-weight: 500; color: var(--navy); }
.row .mono, .td-mono {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--ink-body);
}
@media (max-width: 720px) {
  .row-head { display: none; }
  .row { grid-template-columns: 1fr 1fr !important; padding-block: 16px; }
  .row.grid-check { grid-template-columns: 26px minmax(0, 1fr) auto !important; }
  .row.grid-action { grid-template-columns: auto minmax(0, 1fr) !important; }
  .row > .span-m { grid-column: 1 / -1; }
  .cell-label {
    display: block;
    position: static;
    width: auto; height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    font-family: var(--mono);
    font-size: 0.5938rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin-bottom: 2px;
  }
  .col-opt { display: none; }
}

/* named grids */
.grid-systems, .grid-systems-head { grid-template-columns: minmax(0,2fr) minmax(0,2.4fr) minmax(0,2.2fr) auto; }
.grid-opp, .grid-opp-head { grid-template-columns: 34px minmax(0,3fr) 70px 110px 60px 24px; }
.grid-rules, .grid-rules-head { grid-template-columns: 44px minmax(0,5fr) minmax(0,2.2fr) 110px; }
.grid-config, .grid-config-head { grid-template-columns: minmax(0,3fr) 100px 110px 100px; }
.grid-perf, .grid-perf-head { grid-template-columns: minmax(0,2.6fr) 90px 110px minmax(0,2fr); }
.grid-team, .grid-team-head { grid-template-columns: 40px minmax(0,2.2fr) minmax(0,2fr) 90px minmax(0,2.6fr); }
.grid-audit, .grid-audit-head { grid-template-columns: 120px 150px minmax(0,4fr) 60px 130px; }
.grid-ba, .grid-ba-head { grid-template-columns: minmax(0,3fr) minmax(0,1.6fr) 24px minmax(0,1.6fr) 90px; }
.grid-roi, .grid-roi-head { grid-template-columns: minmax(0,3fr) minmax(0,1.6fr); }
.grid-check { grid-template-columns: 26px minmax(0,1fr) 90px; }
.grid-action { grid-template-columns: auto minmax(0,1fr); }

/* ---------- bars ---------- */

.bar {
  position: relative;
  height: 4px;
  background: var(--navy-06);
  border-radius: 2px;
  overflow: hidden;
  min-width: 60px;
}
.bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 0%);
  background: var(--navy);
  border-radius: 2px;
}
.bar-val { font-family: var(--mono); font-size: 0.6875rem; color: var(--ink-body); }
.bar-pair { display: grid; grid-template-columns: 1fr 44px; align-items: center; gap: 8px; }

/* heatmap rows */
.heat { display: grid; gap: 10px; }
.heat-row {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 3fr) 100px;
  align-items: center;
  gap: 14px;
}
.heat-row .label { font-size: 0.875rem; color: var(--ink-body); }
.heat-track { height: 18px; background: var(--navy-04); border-radius: 2px; overflow: hidden; position: relative; }
.heat-track i {
  position: absolute; inset: 0 auto 0 0;
  width: var(--w, 0%);
  background: var(--navy);
  opacity: var(--heat, 0.5);
  border-radius: 2px;
}
.heat-row .mono { text-align: right; }
@media (max-width: 640px) {
  .heat-row { grid-template-columns: 1fr 84px; }
  .heat-row .label { grid-column: 1 / -1; }
}

/* ---------- accordions ---------- */

.acc { border-bottom: 1px solid var(--line); }
.acc-btn {
  display: grid;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 14px 4px;
  gap: 8px 16px;
  align-items: baseline;
  font: inherit;
  color: inherit;
}
.acc-btn:hover .name { text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.acc-btn .chev {
  width: 16px; height: 16px;
  justify-self: end;
  align-self: center;
  color: var(--slate);
  transition: transform 250ms var(--ease-out);
}
.acc-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* Panels default OPEN; only an enhanced page (case.js alive) collapses them,
   so a failed script load never locks content away. */
.acc-panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 250ms var(--ease-out);
}
.enhanced .acc-panel { grid-template-rows: 0fr; }
.enhanced .acc-btn[aria-expanded="true"] + .acc-panel { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
.acc-panel-inner { padding: 4px 4px 20px; display: grid; gap: 14px; }
html:not(.enhanced) .acc-btn .chev { display: none; }

.pain-note {
  font-size: 0.9375rem;
  color: var(--ink-body);
  max-width: 62ch;
  border-left: 1.5px solid var(--navy-20);
  padding-left: 14px;
}

/* show-more expander rows — content reachable unless case.js is alive */
.enhanced [data-more-region][hidden] { display: none; }
html:not(.enhanced) [data-more-region][hidden] { display: block; }
.more-btn {
  margin-top: 12px;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--slate);
  cursor: pointer;
}
.more-btn:hover { color: var(--navy); border-color: var(--silver); }
html:not(.enhanced) .more-btn { display: none; }

/* ---------- tabs ---------- */

.tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px 2px 12px;
  font-family: var(--mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--slate);
  white-space: nowrap;
  text-decoration: none;
}
.tab:hover { color: var(--navy); }
.tab[aria-selected="true"], .tab[aria-current] {
  color: var(--navy);
}
.tab[aria-selected="true"]::after, .tab[aria-current]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1.5px;
  background: var(--blue);
}
.enhanced .tabpanel[hidden] { display: none; }
.tabpanel.is-entering { animation: tab-in 250ms var(--ease-out); }
@keyframes tab-in { from { opacity: 0; transform: translateY(6px); } }
html:not(.enhanced) .tabpanel[hidden] { display: block; }

/* ---------- avatars / person rows ---------- */

.avatar {
  width: 32px; height: 32px;
  border: 1px solid var(--line);
  border-radius: 3px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  color: var(--navy);
  background: var(--paper);
  align-self: center;
}

/* ---------- agent trace (ch4) ---------- */

.event-card, .orch-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: clamp(20px, 3vw, 28px);
  margin-bottom: 20px;
}
.event-card .rows { margin-top: 14px; }
.event-lines .row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); padding-block: 8px; }
.event-lines .row :last-child { font-family: var(--mono); font-size: 0.8125rem; text-align: right; color: var(--navy); }

.orch-card { display: flex; gap: 16px; align-items: center; }
.orch-node {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border: 1.5px solid var(--navy);
  border-radius: var(--radius-card);
  display: grid;
  place-items: center;
  color: var(--navy);
}
.spawn-stub {
  font-family: var(--mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-align: center;
  margin: -8px 0 12px;
}

.agents { display: grid; gap: 12px; }
.agent-card { border: 1px solid var(--line); border-radius: var(--radius-card); }
.agent-card .acc-btn {
  grid-template-columns: minmax(0, 2fr) auto auto auto 16px;
  padding: 16px;
  align-items: center;
}
.agent-card .acc-panel-inner { padding: 0 16px 18px; }
.agent-result { font-size: 0.9375rem; max-width: 64ch; }
.transparency {
  font-family: var(--mono);
  font-size: 0.6563rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 2;
  color: var(--slate);
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.agent-rule { font-family: var(--mono); font-size: 0.6875rem; color: var(--muted); }
@media (max-width: 720px) {
  .agent-card .acc-btn { grid-template-columns: minmax(0,1fr) auto auto 16px; }
  .agent-card .acc-btn .chip--dur { display: none; }
}
/* planner queue cards carry no duration chip: 4 tracks at every width */
#team-planner .agent-card .acc-btn { grid-template-columns: minmax(0, 2fr) auto auto 16px; }

/* feedback loop */
.loop {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: stretch;
  margin-bottom: 16px;
}
.loop-box { border: 1px solid var(--line); border-radius: var(--radius-card); padding: 18px; }
.loop-box .chart-ref { display: block; margin-bottom: 8px; }
.loop-arrow { align-self: center; color: var(--slate); }
@media (max-width: 720px) {
  .loop { grid-template-columns: 1fr; }
  .loop-arrow { transform: rotate(90deg); justify-self: center; }
}
.loop-note {
  border-left: 1.5px solid var(--navy-20);
  padding-left: 14px;
  font-size: 0.9375rem;
  max-width: 64ch;
}

/* timeline (change detection) */
.timeline { border-left: 1.5px solid var(--navy-20); display: grid; gap: 22px; padding-left: 20px; }
.timeline > li { position: relative; }
.timeline > li::before {
  content: "";
  position: absolute;
  left: -25px; top: 5px;
  width: 8px; height: 8px;
  border: 1.5px solid var(--navy);
  border-radius: 50%;
  background: var(--paper);
}
.timeline .date { font-family: var(--mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.timeline .name { display: block; margin: 2px 0 4px; }

/* ---------- fake controls (imagery, not controls) ---------- */

.demo-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.demo-controls span.btn-demo {
  pointer-events: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 8px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--slate);
}
.demo-note { font-family: var(--mono); font-size: 0.5938rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }

/* ---------- dialog (fake document) ---------- */

.doc-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius-card);
  padding: 18px;
}
.doc-card .doc-icon { color: var(--navy); }
.doc-open {
  background: none;
  border: 0;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--navy);
  position: relative;
}
.doc-open::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -3px;
  height: 1.5px;
  background: var(--blue);
  transition: right var(--dur-micro) var(--ease-out);
}
.doc-open:hover::after { right: 0; }
html:not(.enhanced) .doc-open { display: none; }

dialog:not([open]) { display: none; }
.case-dialog {
  position: relative;
  width: min(760px, calc(100% - 32px));
  max-height: 85svh;
  border: 1px solid var(--silver);
  border-radius: var(--radius-panel);
  padding: 0;
  background: var(--paper);
  color: var(--navy);
}
.case-dialog::backdrop {
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.dialog-inner { position: relative; padding: clamp(24px, 4vw, 44px); overflow: auto; max-height: 85svh; }
.dialog-close {
  position: absolute;
  top: 14px; right: 14px;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 8px;
  cursor: pointer;
  color: var(--navy);
}
.doc-head { font-family: var(--mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 18px; }
.doc-title { font-family: var(--display); font-weight: 500; font-size: 1.5rem; margin-bottom: 4px; }
.doc-meta { font-size: 0.8125rem; color: var(--muted); margin-bottom: 24px; }
.doc-toc { border-top: 1px solid var(--line); margin-bottom: 24px; }
.doc-toc li { display: flex; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--line); font-size: 0.875rem; color: var(--ink-body); }
.doc-toc li span { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }
.doc-excerpt { margin-bottom: 24px; }
.doc-excerpt h4 { font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--slate); margin-bottom: 10px; }
.doc-excerpt ol { display: grid; gap: 8px; font-size: 0.9063rem; color: var(--ink-body); }
.doc-excerpt ol li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; }
.doc-excerpt ol li span { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }
.doc-note { font-size: 0.8125rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; }

/* ---------- line chart ---------- */

.chart-fig { margin: 0; }
.chart-scroll { overflow-x: auto; }
@media (max-width: 640px) {
  .chart-scroll svg { min-width: 520px; }
}
.chart-fig svg { width: 100%; height: auto; }
.chart-fig .grid-line { stroke: var(--line); stroke-width: 1; }
.chart-fig text { font-family: var(--mono); font-size: 10px; fill: var(--muted); letter-spacing: 0.05em; }
.chart-fig .data-line { stroke: var(--blue); stroke-width: 1.5; fill: none; }
.chart-fig .ms circle { stroke: var(--blue); stroke-width: 1.5; fill: var(--paper); }
.chart-fig .ms text { fill: var(--slate); font-size: 9px; }
.chart-fig .ms .ms-num { fill: var(--navy); font-size: 9px; }
figcaption.chart-ref { margin-top: 10px; }
.chart-legend { display: none; margin-top: 12px; }
.chart-legend li { font-family: var(--mono); font-size: 0.6563rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--slate); line-height: 2; }
@media (max-width: 640px) {
  .chart-fig .ms text.ms-label { display: none; }
  .chart-legend { display: block; }
}

/* ---------- ownership cards ---------- */

.own-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.own-grid article { border: 1px solid var(--line); border-radius: var(--radius-card); padding: 22px; }
.own-grid h4 { font-family: var(--display); font-weight: 500; font-size: 1.125rem; color: var(--navy); margin-bottom: 8px; }
.own-grid p { font-size: 0.9063rem; }
@media (max-width: 720px) { .own-grid { grid-template-columns: 1fr; } }

/* ---------- closing CTA ---------- */

.case-cta { border-top: 1px solid var(--line); padding-top: clamp(32px, 5vh, 48px); }
.case-cta .display-l { margin-block: 12px 14px; }
.case-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 24px; }
.back-link { font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--slate); text-decoration: none; }
.back-link:hover { color: var(--navy); }

/* ---------- checklist (executive tracker) ---------- */

.checklist { border-top: 1px solid var(--line); }
.checklist li { padding-block: 10px; border-bottom: 1px solid var(--line); font-size: 0.9063rem; }
.checklist .mark { font-family: var(--mono); color: var(--navy); }
.checklist li.is-pending .mark { color: var(--muted); }
.checklist li.is-pending { color: var(--muted); }
.checklist .mono { justify-self: end; }

/* ---------- insight cards / alerts ---------- */

.note-cards { display: grid; gap: 12px; }
.note-cards article { border: 1px solid var(--line); border-left: 1.5px solid var(--navy-20); border-radius: var(--radius-card); padding: 18px; }
.note-cards .name { display: block; margin-bottom: 4px; }
.note-cards p { font-size: 0.9063rem; }
.note-cards .chart-ref { display: block; margin-top: 8px; }

/* ---------- mount motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js .chapter [data-mount] {
    animation: case-rise var(--dur-reveal) var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 70ms);
  }
  .js .chapter .bar i, .js .chapter .heat-track i {
    animation: bar-grow 600ms var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 60ms + 200ms);
  }
  .js .chart-fig .data-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: chart-draw 900ms var(--ease-out) 250ms forwards;
  }
  .js .chart-fig .ms { animation: case-rise 400ms var(--ease-out) backwards; }
  .js .chart-fig .ms:nth-child(odd) { animation-delay: 700ms; }
  .js .chart-fig .ms:nth-child(even) { animation-delay: 900ms; }
}
@keyframes case-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes bar-grow { from { width: 0; } }
@keyframes chart-draw { to { stroke-dashoffset: 0; } }

/* ---------- responsive frame ---------- */

@media (max-width: 1023px) {
  .case-side {
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 250ms var(--ease-out), visibility 0s 250ms;
    z-index: 120;
  }
  .case-side.is-open { transform: none; visibility: visible; transition-delay: 0s; }
  .case-backdrop {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: none;
  }
  .case-backdrop.is-open { display: block; }
  .case-top { left: 0; }
  .case-main { margin-left: 0; }
  .case-menu-btn { display: grid; place-items: center; }
  .case-dots i { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .case-side { transition: none; }
}

/* ---------- print ---------- */
@media print {
  .case-side, .case-top, .case-backdrop, .case-menu-btn { display: none !important; }
  .case-main { margin-left: 0; padding-top: 0; }
  .js .chapter { display: block !important; }
  .js .team-panel { display: block !important; }
}