/* Unified scene selector, world HUD, and the single physical context shell. */
.scene-selector {
  position: absolute;
  z-index: calc(var(--z-hud) + 4);
  top: calc(var(--sp-2) + var(--safe-top));
  left: 50%;
  display: grid;
  grid-template-columns: repeat(4, minmax(var(--touch-min), 1fr));
  width: min(35rem, calc(100vw - var(--sp-4) - var(--safe-left) - var(--safe-right)));
  min-height: var(--touch-min);
  padding: 3px;
  border-radius: var(--radius-pill);
  transform: translateX(-50%);
}
.scene-selector button {
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  overflow: hidden;
  padding-inline: var(--sp-2);
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: 700;
}
.scene-selector button[aria-selected="true"] {
  color: var(--text-inverse);
  border-color: transparent;
  background: var(--action-recommended);
}
#run-screen { padding-top: calc(4.5rem + var(--safe-top)); }
.hud-top { pointer-events: none; }
.hud-top > * { pointer-events: auto; }
.command-rail { grid-template-columns: auto auto; }
.dev-mode-marker { position: absolute; top: calc(100% + 2px); right: var(--sp-2); padding: 1px 5px; color: var(--text-inverse);
  background: var(--action-urgent); border-radius: var(--radius-s); font-size: .62rem; font-weight: 900; letter-spacing: .12em; }
:root[data-developer-mode="true"] #run-screen { padding-top: calc(5.4rem + var(--safe-top)); }
.time-dial.is-complete .clock-hand { transform: rotate(360deg); opacity: .78; }
.time-dial.is-complete .clock-face { box-shadow: inset 0 0 0 2px var(--life-core); }

.context-shell {
  position: absolute;
  z-index: var(--z-sheet);
  top: max(9rem, calc(var(--sp-4) + var(--safe-top)));
  bottom: calc(6.5rem + var(--safe-bottom));
  left: calc(var(--sp-4) + var(--safe-left));
  width: clamp(22rem, 32vw, 32rem);
  overflow: hidden;
  color: var(--text-primary);
  border-radius: var(--radius-l);
}
.surface-globe-gesture {
  display: flex;
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  color: var(--text-faint);
  border-bottom: 1px solid var(--border-faint);
  cursor: grab;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  touch-action: none;
  user-select: none;
}
.surface-globe-gesture:active { cursor: grabbing; }
.surface-globe-gesture span { pointer-events: none; }
.context-slot { box-sizing: border-box; height: 100%; min-height: 0; padding-top: var(--touch-min); }
.context-surface {
  position: static;
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
  padding: var(--sp-4);
  overflow: auto;
  color: var(--text-primary);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overscroll-behavior: contain;
  touch-action: pan-y;
  user-select: text;
}
.context-result, .context-history, .context-metric, .context-menu {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, auto) minmax(0, 1fr) auto;
  overflow: hidden;
}
.context-surface::before { content: none; }
.context-surface header {
  min-height: 4.25rem;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-faint);
}
.context-surface header > div { min-width: 0; }
.context-surface header h2 { overflow-wrap: anywhere; }
.context-surface .surface-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  touch-action: pan-y;
}
.context-result { grid-template-rows: auto minmax(0, 1fr) auto; }
.context-history { grid-template-rows: auto auto minmax(0, 1fr); }
.context-history .history-controls { min-width: 0; padding: var(--sp-2) 2px; border-bottom: 1px solid var(--border-faint); }
.context-history .history-body { min-height: 0; padding-top: var(--sp-2); }
.skill-detail, .context-confirm { display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) max-content; overflow: hidden; }
.skill-detail > header, .skill-detail > .surface-actions { min-width: 0; }
.skill-detail > header .eyebrow { min-width: 0; overflow-wrap: anywhere; }
.skill-detail .inspection-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.skill-detail .inspection-grid dd { overflow-wrap: anywhere; }
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.result-milestone { color: var(--action-available); font-weight: 700; }
.context-result h3, .metric-slot h3, .menu-group h3 { margin-top: var(--sp-3); color: var(--text-secondary); font-size: var(--fs-caption); letter-spacing: .08em; text-transform: uppercase; }
.context-result > header { min-width: 0; min-height: var(--touch-min); padding-bottom: var(--sp-2); }
.result-actions {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: var(--sp-2);
}
.result-continuation {
  --continuation-progress: 0;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  min-height: 40px;
  gap: var(--sp-2);
  margin: 0;
  color: var(--state-info);
  font-size: var(--fs-caption);
}
.continuation-cycle { position: relative; display: block; width: 36px; height: 36px; color: currentColor; }
.continuation-cycle svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.continuation-track, .continuation-trace { fill: none; stroke-width: 3; }
.continuation-track { stroke: var(--border-strong); }
.continuation-trace { stroke: currentColor; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--continuation-progress)); }
.continuation-marker { position: absolute; inset: 0; transform: rotate(calc(var(--continuation-progress) * 1turn)); }
.continuation-marker::after { position: absolute; top: 10%; left: 50%; width: 5px; height: 5px; content: ""; background: currentColor; border: 1px solid var(--bg-panel-solid); border-radius: 50%; transform: translate(-50%, -50%); }
.continuation-copy { min-width: 0; line-height: 1.25; }
.result-continuation[data-state="cancelled"], .result-continuation[data-state="disabled"] { color: var(--text-secondary); }
.result-continuation[data-state="paused-hidden"] .continuation-marker,
.result-continuation[data-state="cancelled"] .continuation-marker,
.result-continuation[data-state="disabled"] .continuation-marker { display: none; }
:root[data-motion="reduced"] .continuation-marker { display: none; }
#result-next-button { grid-column: 1 / -1; }
.result-actions .btn { min-width: 0; padding-inline: var(--sp-2); }

.context-metric { grid-template-rows: auto 5.9rem 4.5rem minmax(0, 1fr) 3rem; }
.metric-summary-slot { min-height: 5.9rem; padding-top: var(--sp-2); }
.metric-summary-slot strong { display: block; font-size: 2rem; font-variant-numeric: tabular-nums; }
.metric-summary-slot p { min-height: 2.7rem; margin: 0; }
.metric-counts { display: grid; grid-template-columns: repeat(3, 1fr); min-height: 4.5rem; gap: var(--sp-2); }
.metric-count { display: grid; align-content: center; min-width: 0; padding: var(--sp-2); border: 1px solid var(--border-faint); border-radius: var(--radius-s); }
.metric-count span { overflow: hidden; color: var(--text-faint); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.metric-count strong { font-variant-numeric: tabular-nums; }
.metric-body { padding-block: var(--sp-2); }
.metric-slot { min-height: 9rem; }
.metric-rows { display: grid; gap: 2px; }
.metric-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: var(--touch-min); gap: var(--sp-2); border-bottom: 1px solid var(--border-faint); color: var(--text-secondary); font-size: var(--fs-caption); }
.metric-row strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.metric-footer { display: flex; align-items: center; min-height: 3rem; border-top: 1px solid var(--border-faint); }
.metric-footer p { margin: 0; }

.context-menu { grid-template-rows: auto auto minmax(0, 1fr); }
.menu-group { padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border-faint); }
.data-reset { margin-top: var(--sp-3); border-top: 1px solid var(--border-faint); }
.data-reset summary { min-height: var(--touch-min); padding-top: var(--sp-3); color: var(--text-secondary); cursor: pointer; font-weight: 700; }
.data-reset[open] summary { color: var(--text-primary); }

@media (max-width: 899px) {
  .scene-selector { top: calc(var(--sp-1) + var(--safe-top)); width: calc(100vw - var(--sp-2) - var(--safe-left) - var(--safe-right)); }
  #run-screen { padding-top: calc(4rem + var(--safe-top)); }
  .hud-bottom { display: grid; width: 100%; }
  .command-rail { position: absolute; right: calc(var(--sp-1) + var(--safe-right)); bottom: calc(var(--sp-1) + var(--safe-bottom)); width: auto; grid-template-columns: 104px 4.5rem; }
  .rail-btn span { display: inline; }
  #menu-button::before { content: none; }
  .context-shell {
    inset: auto var(--safe-right) var(--safe-bottom) var(--safe-left);
    width: auto;
    height: min(56dvh, 34rem);
    border-radius: var(--radius-l) var(--radius-l) 0 0;
  }
  .context-shell::before { content: ""; position: absolute; z-index: 2; top: 7px; left: 50%; width: 2.5rem; height: 3px; pointer-events: none; background: var(--border-strong); border-radius: var(--radius-pill); transform: translateX(-50%); }
  .context-shell:has(.skill-detail:not([hidden])) { height: min(76dvh, 34rem); }
  .context-surface { padding: var(--sp-4) var(--sp-3) calc(var(--sp-3) + var(--safe-bottom)); }
  .context-surface header { padding-top: var(--sp-2); }
  .context-metric { grid-template-rows: auto 5.9rem 4.5rem minmax(0, 1fr) 3rem; }
}
@media (min-width: 700px) and (max-height: 650px) {
  .context-shell { inset: calc(4rem + var(--safe-top)) auto calc(var(--sp-2) + var(--safe-bottom)) calc(var(--sp-2) + var(--safe-left)); width: min(25rem, 45vw); height: auto; border-radius: var(--radius-l); }
  .context-shell:has(.skill-detail:not([hidden])) { height: auto; }
  .skill-detail { display: block; overflow-y: auto; }
  .skill-detail .surface-body { overflow: visible; }
  #app:has(#run-screen:not([hidden])) .context-shell { top: calc(8.5rem + var(--safe-top)); }
  .context-shell::before { display: none; }
}
@media (max-width: 420px) {
  .scene-selector button { padding-inline: 2px; font-size: .72rem; }
  .hud-metrics { width: 100%; }
  .metric-button { min-height: 4.75rem; min-width: 0; }
  .metric-value { font-size: 1rem; }
  #reach-button .metric-value { line-height: 1.05; white-space: normal; }
  .command-rail { width: auto; grid-template-columns: 104px 4.25rem; }
  .menu-grid { grid-template-columns: 1fr 1fr; }
  .context-metric { display: block; overflow-y: auto; scrollbar-gutter: stable; }
  .context-metric .surface-body { overflow: visible; }
  .context-metric > * { min-width: 0; }
  .context-metric .metric-summary-slot { min-height: 0; }
  .context-metric .metric-counts { grid-template-columns: 1fr; min-height: 0; margin-block: var(--sp-2); }
  .context-metric .metric-footer { min-height: var(--touch-min); margin-top: var(--sp-2); }
}
@media (max-width: 420px), (max-height: 650px) {
  .context-result .result-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); padding-top: var(--sp-1); }
  .context-result #result-next-button { grid-column: auto; }
  .context-result .result-actions .btn { padding: var(--sp-1); font-size: clamp(.75rem, 4vw, 1rem); }
  .context-result .result-continuation { grid-template-columns: 32px minmax(0, 1fr); min-height: 36px; gap: var(--sp-1); font-size: clamp(.625rem, 3.5vw, .8125rem); }
  .context-result .continuation-cycle { width: 32px; height: 32px; }
}
.hud-metrics:has(#result-control:not([hidden])) > #result-control { grid-column: 1 / -1; }
@media (max-width: 520px) {
  .hud-metrics:has(#result-control:not([hidden])) { grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(22rem, 100%); gap: var(--sp-1); }
  .hud-metrics:has(#result-control:not([hidden])) > button { width: 100%; min-width: 0; }
  .hud-metrics:has(#result-control:not([hidden])) > #result-control { grid-column: auto; }
}
@media (forced-colors: active) {
  .scene-selector, .context-shell, .metric-button, .result-control, .metric-count, .metric-row { border: 1px solid CanvasText; }
  .surface-globe-gesture { border-bottom-color: CanvasText; }
  .continuation-track { stroke: GrayText; }
  .continuation-trace { stroke: CanvasText; }
  .continuation-marker::after { background: CanvasText; border-color: Canvas; }
}