:root {
  color-scheme: dark;
  --ink: #f4f4f2;
  --ink-2: #b9b9b5;
  --ink-3: #858581;
  --surface: #111110;
  --surface-2: #181817;
  --surface-3: #20201e;
  --surface-4: #292927;
  --line: #343431;
  --line-soft: #262624;
  --paper: #f3f2ed;
  --paper-ink: #111110;
  --accent: #f4f4f2;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.roadmap-page {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: .7rem 1rem;
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: .35rem;
}
.skip-link:focus { top: 1rem; }

.roadmap-app {
  display: grid;
  grid-template-rows: 76px minmax(0, 1fr);
  height: 100dvh;
  min-height: 640px;
}

.roadmap-header {
  display: grid;
  grid-template-columns: 190px minmax(220px, 1fr) minmax(260px, 420px) auto;
  align-items: center;
  gap: 1.2rem;
  padding: 0 1.25rem;
  border-bottom: 1px solid var(--line);
  background: rgba(17, 17, 16, .97);
  z-index: 20;
}

.roadmap-brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 720;
  letter-spacing: -.02em;
}
.roadmap-brand svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.roadmap-brand svg path:nth-child(2) { opacity: .62; }
.roadmap-brand svg path:nth-child(3) { opacity: .34; }

.roadmap-heading { min-width: 0; }
.eyebrow, .section-kicker {
  display: block;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.roadmap-heading h1 {
  margin: .12rem 0 0;
  font-size: 1.12rem;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.roadmap-search {
  display: grid;
  grid-template-columns: 19px 1fr auto;
  align-items: center;
  gap: .55rem;
  height: 42px;
  padding: 0 .75rem;
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: .45rem;
  transition: border-color .15s, background .15s;
}
.roadmap-search:focus-within { border-color: #777773; background: var(--surface-3); }
.roadmap-search svg { width: 19px; fill: none; stroke: var(--ink-3); stroke-width: 1.7; }
.roadmap-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: .84rem;
}
.roadmap-search input::placeholder { color: var(--ink-3); }
kbd {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  padding: 0 .35rem;
  border: 1px solid #474744;
  border-bottom-color: #5e5e5a;
  border-radius: .25rem;
  background: var(--surface-3);
  color: var(--ink-2);
  font: .68rem var(--mono);
}

.header-actions { display: flex; align-items: center; gap: .55rem; }
.icon-button, .site-button {
  display: inline-grid;
  height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: .4rem;
  background: transparent;
  color: var(--ink-2);
  text-decoration: none;
  cursor: pointer;
}
.icon-button { width: 38px; font: 700 .9rem var(--mono); }
.site-button { padding: 0 .85rem; font-size: .76rem; font-weight: 650; }
.icon-button:hover, .site-button:hover { border-color: #666662; color: var(--ink); }

.roadmap-layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr) 318px;
  min-height: 0;
}

.roadmap-rail {
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: #131312;
  scrollbar-width: thin;
}
.rail-section { padding: 1.05rem 1rem; border-bottom: 1px solid var(--line-soft); }
.rail-section h2 {
  margin: 0 0 .75rem;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rail-heading { display: flex; justify-content: space-between; align-items: flex-start; }
.text-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: .7rem;
  cursor: pointer;
}
.text-button:hover { color: var(--ink); }

.summary-number {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  margin-top: .5rem;
}
.summary-number span { font-size: 2rem; font-weight: 720; letter-spacing: -.06em; }
.summary-number small { color: var(--ink-2); font-size: .75rem; }
.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .8rem; }
.summary-grid div { padding: .7rem; border: 1px solid var(--line); border-radius: .35rem; background: var(--surface-2); }
.summary-grid strong { display: block; font: 650 1rem var(--mono); }
.summary-grid span { display: block; margin-top: .25rem; color: var(--ink-3); font-size: .62rem; line-height: 1.35; }
.phase-meter { display: grid; grid-template-columns: 1fr 1.3fr 1.45fr; gap: 3px; height: 4px; margin-top: .85rem; }
.phase-meter i { background: #ededeb; border-radius: 2px; }
.phase-meter i:nth-child(2) { background: #7f7f7b; }
.phase-meter i:nth-child(3) { background: #454542; }
.summary-note { margin: .7rem 0 0; color: var(--ink-3); font-size: .66rem; line-height: 1.45; }

.segmented {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: .4rem;
  background: var(--surface-2);
}
.segmented button {
  min-height: 30px;
  padding: 0 .72rem;
  border: 0;
  border-radius: .28rem;
  background: transparent;
  color: var(--ink-3);
  font-size: .7rem;
  cursor: pointer;
}
.segmented button.active { background: var(--paper); color: var(--paper-ink); font-weight: 700; }
.segmented button:not(.active):hover { color: var(--ink); }

.status-filters, .strand-filters { display: grid; gap: .18rem; }
.status-filters button, .strand-filters button {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: .5rem;
  min-height: 34px;
  padding: 0 .45rem;
  border: 0;
  border-radius: .3rem;
  background: transparent;
  color: var(--ink-3);
  text-align: left;
  font-size: .71rem;
  cursor: pointer;
}
.status-filters button:hover, .strand-filters button:hover { color: var(--ink); background: var(--surface-2); }
.status-filters button.active, .strand-filters button.active { color: var(--ink); background: var(--surface-3); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #777773; }
.status-dot.next { background: #f4f4f2; box-shadow: 0 0 0 3px rgba(244,244,242,.1); }
.status-dot.planned { border: 1px solid #aaa9a5; background: transparent; }
.status-dot.later { border: 1px dashed #6a6a66; background: transparent; }
.status-dot.all { background: linear-gradient(90deg, #eee 0 33%, #999 33% 66%, #555 66%); }
.strand-mark { width: 12px; height: 2px; background: var(--strand-colour, #ddd); border-radius: 2px; }
.filter-count { color: var(--ink-3); font: .64rem var(--mono); }

.delivery-list { display: grid; gap: .2rem; margin: .75rem 0 0; padding: 0; list-style: none; counter-reset: delivery; }
.delivery-list li { counter-increment: delivery; }
.delivery-list button {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: .45rem;
  width: 100%;
  padding: .45rem .35rem;
  border: 0;
  border-radius: .3rem;
  background: transparent;
  color: var(--ink-2);
  text-align: left;
  font-size: .66rem;
  cursor: pointer;
}
.delivery-list button::before { content: counter(delivery, decimal-leading-zero); color: var(--ink-3); font: .58rem var(--mono); }
.delivery-list button:hover { background: var(--surface-3); color: var(--ink); }
.delivery-list time { color: var(--ink-3); font: .58rem var(--mono); }

.roadmap-workspace {
  display: grid;
  grid-template-rows: 50px minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  background: var(--surface);
}
.workspace-toolbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 .8rem;
  border-bottom: 1px solid var(--line);
  background: #151514;
}
.view-switch { flex: 0 0 auto; }
.phase-jumps { display: flex; gap: .35rem; min-width: 0; overflow: hidden; }
.phase-jumps button {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-width: 0;
  height: 32px;
  padding: 0 .55rem;
  border: 1px solid var(--line);
  border-radius: .35rem;
  background: transparent;
  color: var(--ink-3);
  white-space: nowrap;
  font-size: .65rem;
  cursor: pointer;
}
.phase-jumps button:hover { border-color: #60605c; color: var(--ink); }
.phase-jumps span { color: var(--ink); font: 650 .6rem var(--mono); }
.zoom-controls { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.zoom-controls button, .zoom-controls output {
  display: inline-grid;
  height: 30px;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
}
.zoom-controls button { width: 30px; cursor: pointer; }
.zoom-controls button:hover { color: var(--ink); background: var(--surface-3); }
.zoom-controls output { width: 48px; border-left: 0; border-right: 0; font: .6rem var(--mono); }
.zoom-controls .fit-button { width: auto; margin-left: .35rem; padding: 0 .6rem; border-radius: .3rem; font-size: .65rem; }

.roadmap-map-view { position: relative; min-width: 0; min-height: 0; }
.roadmap-viewport {
  position: absolute;
  inset: 0 0 32px;
  overflow: auto;
  cursor: grab;
  outline: none;
  scrollbar-width: thin;
  scrollbar-color: #555551 var(--surface-2);
}
.roadmap-viewport.dragging { cursor: grabbing; user-select: none; }
.roadmap-viewport:focus-visible { box-shadow: inset 0 0 0 2px #777; }
.roadmap-svg { display: block; min-width: 100%; min-height: 100%; background: var(--surface); }

.roadmap-svg .grid-line { stroke: #1e1e1c; stroke-width: 1; }
.roadmap-svg .zone-fill.phase-1 { fill: rgba(255,255,255,.018); }
.roadmap-svg .zone-fill.phase-2 { fill: rgba(255,255,255,.009); }
.roadmap-svg .zone-fill.phase-3 { fill: rgba(255,255,255,.004); }
.roadmap-svg .phase-rule { stroke: #343432; stroke-width: 1; stroke-dasharray: 5 7; }
.roadmap-svg .phase-label { fill: #777773; font: 600 11px var(--mono); letter-spacing: .12em; }
.roadmap-svg .phase-window { fill: #50504d; font: 10px var(--mono); }
.roadmap-svg .strand-line { fill: none; stroke: #484845; stroke-width: 2; transition: opacity .18s, stroke .18s; }
.roadmap-svg .strand-line.core { stroke-width: 3; }
.roadmap-svg .strand-line.dimmed { opacity: .15; }
.roadmap-svg .strand-line.focused { stroke: #c8c8c3; }
.roadmap-svg .rope-line { fill: none; stroke-linecap: round; }
.roadmap-svg .rope-line.one { stroke: #e8e8e4; stroke-width: 4; }
.roadmap-svg .rope-line.two { stroke: #8e8e89; stroke-width: 4; }
.roadmap-svg .rope-line.three { stroke: #4c4c49; stroke-width: 4; }
.roadmap-svg .rope-tag { fill: #b8b8b4; font: 650 11px var(--mono); letter-spacing: .14em; }
.roadmap-svg .strand-title { fill: #e8e8e4; font: 650 12px var(--sans); letter-spacing: .07em; text-transform: uppercase; }
.roadmap-svg .strand-subtitle { fill: #666662; font: 9px var(--mono); letter-spacing: .05em; }
.roadmap-svg .strand-index { fill: #777773; font: 600 9px var(--mono); }
.roadmap-svg .strand-origin { fill: #171716; stroke: #bab9b5; stroke-width: 1.5; }
.roadmap-svg .strand-origin-text { fill: #e7e7e3; font: 650 10px var(--mono); text-anchor: middle; dominant-baseline: middle; }
.roadmap-svg .capability-node { cursor: pointer; outline: none; transition: opacity .18s; }
.roadmap-svg .capability-node .node-hit { fill: transparent; }
.roadmap-svg .capability-node .node-ring { fill: #151514; stroke: #8c8c87; stroke-width: 1.5; transition: fill .16s, stroke .16s, stroke-width .16s; }
.roadmap-svg .capability-node.next .node-ring { stroke: #f2f2ee; stroke-width: 2; }
.roadmap-svg .capability-node.planned .node-ring { stroke: #92928e; }
.roadmap-svg .capability-node.later .node-ring { stroke: #5c5c58; stroke-dasharray: 3.5 3.5; }
.roadmap-svg .capability-node .node-number { fill: #c6c6c1; font: 600 8px var(--mono); text-anchor: middle; dominant-baseline: middle; }
.roadmap-svg .capability-node .node-label { fill: #a5a5a0; font: 600 9px var(--mono); text-anchor: middle; letter-spacing: .025em; }
.roadmap-svg .capability-node.next .node-label { fill: #e8e8e4; }
.roadmap-svg .capability-node:hover .node-ring,
.roadmap-svg .capability-node:focus .node-ring,
.roadmap-svg .capability-node.selected .node-ring { fill: #efefeb; stroke: #efefeb; stroke-width: 2.5; }
.roadmap-svg .capability-node:hover .node-number,
.roadmap-svg .capability-node:focus .node-number,
.roadmap-svg .capability-node.selected .node-number { fill: #111; }
.roadmap-svg .capability-node.selected .node-label { fill: #fff; }
.roadmap-svg .capability-node.related .node-ring { stroke: #d6d6d1; stroke-width: 2; }
.roadmap-svg .capability-node.filtered { opacity: .075; pointer-events: none; }
.roadmap-svg .dependency-line { fill: none; stroke: #d5d5d0; stroke-width: 1.2; stroke-dasharray: 4 4; opacity: .72; }
.roadmap-svg .dependency-arrow { fill: #d5d5d0; }
.roadmap-svg .join-pulse { fill: none; stroke: #ddd; stroke-width: 1; opacity: .2; }

.empty-state {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  justify-items: center;
  gap: .45rem;
  transform: translate(-50%, -50%);
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: .45rem;
  background: rgba(24,24,23,.96);
  text-align: center;
}
.empty-state strong { font-size: .85rem; }
.empty-state span { color: var(--ink-3); font-size: .7rem; }
.empty-state button { margin-top: .3rem; border: 0; background: var(--paper); color: var(--paper-ink); padding: .45rem .7rem; border-radius: .3rem; font-size: .68rem; cursor: pointer; }

.map-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 32px;
  padding: 0 .85rem;
  border-top: 1px solid var(--line);
  background: #151514;
  color: var(--ink-3);
  font: .6rem var(--mono);
}

.minimap {
  position: absolute;
  right: 1rem;
  bottom: 48px;
  width: 180px;
  padding: 0;
  border: 1px solid #41413e;
  border-radius: .38rem;
  background: rgba(20,20,19,.9);
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
  cursor: crosshair;
  overflow: hidden;
}
.minimap svg { display: block; width: 100%; }
.minimap .mini-line { fill: none; stroke: #5b5b57; stroke-width: 1; }
.minimap .mini-node { fill: #b0b0ab; }
.minimap-window { fill: rgba(255,255,255,.06); stroke: #eeeeea; stroke-width: 1; }

.roadmap-list-view { min-height: 0; overflow: auto; padding: 1.4rem; }
.list-heading { display: flex; justify-content: space-between; align-items: end; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.list-heading h2 { margin: .2rem 0 0; font-size: 1.3rem; }
.list-heading > span { color: var(--ink-3); font: .65rem var(--mono); }
.capability-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .65rem; margin-top: 1rem; }
.capability-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-height: 180px;
  padding: .9rem;
  border: 1px solid var(--line);
  border-radius: .4rem;
  background: var(--surface-2);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.capability-card:hover { border-color: #656560; background: var(--surface-3); }
.card-meta { display: flex; justify-content: space-between; color: var(--ink-3); font: .58rem var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.capability-card h3 { margin: .7rem 0 .45rem; font-size: .84rem; }
.capability-card p { margin: 0; color: var(--ink-3); font-size: .69rem; line-height: 1.45; }
.card-footer { display: flex; align-items: center; gap: .4rem; margin-top: .8rem; color: var(--ink-2); font-size: .62rem; }

.capability-panel {
  overflow-y: auto;
  border-left: 1px solid #d8d7d1;
  background: var(--paper);
  color: var(--paper-ink);
}
.panel-empty, .panel-detail { position: relative; padding: 1.35rem; }
.panel-index { display: block; color: #77746e; font: 650 .62rem var(--mono); letter-spacing: .11em; }
.panel-empty h2, .panel-detail h2 { margin: .75rem 0 .6rem; font-size: 1.45rem; line-height: 1.07; letter-spacing: -.035em; }
.panel-empty > p, .detail-summary { margin: 0; color: #5e5c57; font-size: .79rem; line-height: 1.55; }
.panel-legend { display: grid; gap: .7rem; margin-top: 1.4rem; padding-top: 1.15rem; border-top: 1px solid #d8d7d1; }
.panel-legend div { display: grid; grid-template-columns: 12px 70px 1fr; align-items: center; gap: .4rem; }
.panel-legend strong { font-size: .72rem; }
.panel-legend span { color: #77746e; font-size: .67rem; }
.panel-legend .status-dot.next { background: #111; box-shadow: none; }
.panel-legend .status-dot.planned { border-color: #555; }
.scope-note { margin-top: 1.4rem; padding: .85rem; border: 1px solid #d8d7d1; border-radius: .35rem; color: #6d6a64; font-size: .68rem; line-height: 1.45; }
.scope-note strong { display: block; margin-bottom: .3rem; color: #111; font-size: .62rem; letter-spacing: .07em; text-transform: uppercase; }
.panel-close { position: absolute; top: .8rem; right: .8rem; width: 30px; height: 30px; border: 1px solid #d0cfc9; border-radius: 50%; background: transparent; color: #555; font-size: 1.2rem; cursor: pointer; }
.panel-close:hover { border-color: #888; color: #111; }
.panel-badges { display: flex; gap: .35rem; padding-right: 2rem; }
.panel-badges span { padding: .3rem .45rem; border: 1px solid #cbc9c2; border-radius: 999px; color: #5d5a55; font: 600 .57rem var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.detail-meta { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 1.1rem 0; }
.detail-meta div { padding: .65rem; border: 1px solid #d8d7d1; border-radius: .3rem; }
.detail-meta dt { color: #77746e; font: .55rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.detail-meta dd { margin: .3rem 0 0; font-size: .68rem; font-weight: 650; }
.detail-section { padding: .9rem 0; border-top: 1px solid #d8d7d1; }
.detail-section h3 { margin: 0 0 .4rem; font-size: .64rem; letter-spacing: .07em; text-transform: uppercase; }
.detail-section p { margin: 0; color: #5e5c57; font-size: .72rem; line-height: 1.5; }
.dependencies-section > div { display: flex; flex-wrap: wrap; gap: .35rem; }
.dependency-chip { padding: .38rem .5rem; border: 1px solid #c8c6bf; border-radius: 999px; background: transparent; color: #4b4945; font-size: .62rem; cursor: pointer; }
.dependency-chip:hover { border-color: #666; color: #111; }
.locate-button { width: 100%; margin-top: .55rem; padding: .7rem; border: 0; border-radius: .32rem; background: #111; color: #fff; font-size: .7rem; font-weight: 650; cursor: pointer; }

.shortcut-dialog { width: min(430px, calc(100vw - 2rem)); padding: 0; border: 1px solid #444; border-radius: .5rem; background: var(--surface-2); color: var(--ink); box-shadow: 0 24px 70px rgba(0,0,0,.55); }
.shortcut-dialog::backdrop { background: rgba(0,0,0,.62); }
.shortcut-dialog form { padding: 1.1rem; }
.dialog-heading { display: flex; justify-content: space-between; align-items: center; }
.dialog-heading h2 { margin: 0; font-size: .95rem; }
.dialog-heading button { border: 0; background: transparent; color: var(--ink-3); font-size: 1.3rem; cursor: pointer; }
.shortcut-dialog dl { display: grid; gap: .25rem; margin: 1rem 0 0; }
.shortcut-dialog dl div { display: grid; grid-template-columns: 105px 1fr; align-items: center; padding: .55rem 0; border-top: 1px solid var(--line); }
.shortcut-dialog dt, .shortcut-dialog dd { margin: 0; }
.shortcut-dialog dd { color: var(--ink-2); font-size: .72rem; }

[hidden] { display: none !important; }

@media (max-width: 1240px) {
  .roadmap-layout { grid-template-columns: 226px minmax(0, 1fr); }
  .capability-panel {
    position: fixed;
    top: 76px;
    right: 0;
    bottom: 0;
    z-index: 30;
    width: 330px;
    transform: translateX(100%);
    transition: transform .22s ease;
    box-shadow: -20px 0 45px rgba(0,0,0,.3);
  }
  .capability-panel.open { transform: translateX(0); }
}

@media (max-width: 980px) {
  .roadmap-header { grid-template-columns: auto 1fr minmax(220px, 330px) auto; }
  .roadmap-heading .eyebrow { display: none; }
  .roadmap-heading h1 { font-size: .92rem; }
  .roadmap-brand span { display: none; }
  .roadmap-layout { grid-template-columns: 200px minmax(0, 1fr); }
  .phase-jumps { display: none; }
  .interaction-hint { display: none; }
  .minimap { width: 150px; }
}

@media (max-width: 720px) {
  .roadmap-page { overflow: auto; }
  .roadmap-app { grid-template-rows: auto auto; height: auto; min-height: 100dvh; }
  .roadmap-header {
    position: sticky;
    top: 0;
    grid-template-columns: auto 1fr auto;
    gap: .65rem;
    padding: .7rem .8rem;
  }
  .roadmap-heading { display: none; }
  .roadmap-search { grid-column: 2; height: 38px; }
  .roadmap-search kbd, .site-button { display: none; }
  .roadmap-layout { display: block; }
  .roadmap-rail { display: grid; grid-template-columns: 1fr 1fr; max-height: none; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); }
  .summary-section, .strand-section, .delivery-section { display: none; }
  .rail-section { padding: .75rem; border-bottom: 0; }
  .rail-section h2 { margin-bottom: .5rem; }
  .status-filters { grid-template-columns: 1fr 1fr; }
  .status-filters button { min-height: 30px; }
  .roadmap-workspace { height: calc(100dvh - 190px); min-height: 560px; grid-template-rows: 48px minmax(0, 1fr); }
  .workspace-toolbar { padding: 0 .5rem; }
  .view-switch button { padding: 0 .55rem; }
  .zoom-controls output { display: none; }
  .minimap { display: none; }
  .map-foot { font-size: .55rem; }
  .roadmap-list-view { padding: .8rem; }
  .capability-list { grid-template-columns: 1fr; }
  .capability-panel { top: auto; left: 0; width: 100%; height: min(72dvh, 620px); transform: translateY(100%); border-left: 0; border-top: 1px solid #d8d7d1; }
  .capability-panel.open { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}