/* Control typography, trace styling and responsive layout. Component
   primitives and reusable animation keyframes live in terminal.css. */
:root { --muted: #426174; }
@media (prefers-color-scheme: dark) { :root { --muted: #a1b8c9; } }
.panel-heading h2 { font-size: 11px; letter-spacing: .075em; font-weight: 500; }
.field-heading, .limit-row label, .worker-setting label { font-size: 11px; letter-spacing: .045em; }
.eyebrow { font-size: 9px; letter-spacing: .12em; }
.tool { font-size: 11px; }
/* Wide enough for "BGM / LOAD 99%": the toolbar never shifts while the soundtrack loads. */
#sound-toggle { min-width: calc(14ch + .49em + 24px); }
.select-wrap select, .payload-body > .select-wrap select { font-size: 12px; }
.limit-row select { font-size: 12px; }
.counter-heading h3, .stats dt, .worker-heading { font-size: 10px; letter-spacing: .095em; }
.state-indicator, .live-tag { font-size: 10px; letter-spacing: .04em; }
.worker-lane { font-size: 10px; }
.telemetry-label { font-size: 10px; height: 16px; line-height: 16px; }
.chart-axis { font-size: 9px; }
.terminal-prompt { font-size: 10px; }
.primary, .abort, .copy { font-size: 12px; }
.output-label .eyebrow { display: block; color: var(--accent); }
.verification, .key-hint { font-size: 10px; }
.factor-empty { font-size: 12px; }
#core-sub { font-size: 9px; letter-spacing: .13em; }
.core-state { gap: 6px; }
/* The state word sits on the sphere's axis, like the lock banner; its caption hangs below. */
#core-sub { position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; }
/* The cursor disappears in place: it never changes the title's measured width. */
.title-cursor, .start-effect .title-cursor {
  display: inline-block;
  animation: title-caret 1.2s steps(1, end) infinite;
}
@keyframes title-caret { 0%, 54% { opacity: 1; } 55%, 100% { opacity: 0; } }
.event-log {
  font-size: 11px;
  line-height: 1.65;
  padding: 10px 12px;
  overflow-anchor: none;
}
.event {
  display: grid;
  grid-template-columns: max-content 6ch minmax(0, 1fr);
  align-items: center;
  white-space: nowrap;
  column-gap: 7px;
  padding: 2px 0;
  line-height: 1.45;
  border-bottom: 0;
  animation: event-arrive 70ms ease-out both;
}
.event time { font-size: 9px; margin: 0; color: var(--muted); opacity: 1; align-self: center; }
.event b { font-size: 10px; letter-spacing: .04em; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.event-message { min-width: 0; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event[data-level=warn] .event-message { color: var(--amber); }
.event[data-level=hit] .event-message { color: var(--success); }
@keyframes event-arrive { from { opacity: .25; transform: translateY(3px); } to { opacity: 1; transform: none; } }
/* Compact labels follow the viewport, not the search status. */
@media (min-width:761px) and (min-height:590px) {
  .event-log { font-size: 11px; }
}

@media (min-width:761px) and (max-width:1100px) and (min-height:590px) {
  .panel-heading h2 { font-size: 11px; }
  #core-sub { font-size: 9px; }
  .worker-lane { font-size: 9px; }
}
@media (max-width:760px), (pointer:coarse) and (max-height:590px) {
  .system-mark { display: flex; width: 20px; flex-shrink: 0; }
  .toolbar { margin-left: auto; }
  .tool { font-size: 10px; }
  .title-cursor { display: inline-block; }
  .panel-heading h2, .side-stack .panel-heading h2 { font-size: 11px; }
  .chrome .mobile-tabs button { font-size: 11px; letter-spacing: .09em; }
  .field-heading, .limit-row label, .worker-setting label { font-size: 11px; }
  .counter-heading h3, .stats dt, .live-tag { font-size: 9px; }
  #core-sub { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .title-cursor, .start-effect .title-cursor, .event { animation: none !important; opacity: 1; }
}
body[data-fx=quiet] .title-cursor, body[data-fx=quiet] .event { animation: none; opacity: 1; }
body[data-suspended=true] .title-cursor { animation-play-state: paused; }

/* Variable-length, colour-coded test records. Each stays exactly one row. */
.event-log { padding: 10px 9px; scrollbar-gutter: stable; }
.event.trace-line { grid-template-columns: 11px minmax(0, 1fr); gap: 4px;
  height: 18px; min-height: 18px; line-height: 18px; padding: 0;
  animation: trace-in 75ms ease-out both; }
.trace-line .trace-mark { font: 10px/18px var(--mono); color: var(--muted); overflow: visible; }
.trace-line .event-message { font: 11px/18px var(--mono); letter-spacing: 0; }
.token-label { color: var(--accent); }
.token-worker { color: var(--secondary); }
.token-literal, .token-hex { color: var(--ink); }
.token-verdict { color: var(--amber); }
.token-op { color: var(--accent); }
.token-dim { color: var(--muted); }
.token-hit { color: var(--success); }
@keyframes trace-in { from { opacity: .35; transform: translateX(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .event.trace-line { animation: none !important; } }
body[data-fx=quiet] .event.trace-line { animation: none !important; }


/* Geometry has one owner. Values may change; these slots never depend on state. */
html, body { height: 100%; overflow: hidden; }
.app { height: 100dvh; max-width: 1920px; padding: 16px 24px 10px; display: grid; grid-template-rows: 52px minmax(0,1fr); gap: 12px; }
.chrome { display: block; min-width: 0; min-height: 0; }
.site-header { display: grid; grid-template-columns: auto auto auto minmax(0,1fr) auto auto; height: 100%; align-items: center; column-gap: 14px; border-bottom: 1px solid var(--line); padding-bottom: 10px; min-width: 0; }
.site-header .system-mark { grid-column: 1; }
.site-header h1 { grid-column: 2; margin: 0; font-size: 30px; line-height: 1; white-space: nowrap; }
.brand-caption { grid-column: 3; font-family: var(--mono); white-space: nowrap; }
.brand-caption .eyebrow { margin: 0; font-size: 9px; }
.brand-motto { margin: 1px 0 0; font-size: 10px; color: var(--muted); letter-spacing: .09em; }
.site-header .intro-meta { grid-column: 5; position: static; display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; font-size: 10px; white-space: nowrap; }
.site-header .local-light { position: static; display: inline-block; margin: 0; }
.site-header .toolbar { grid-column: 6; }
.core .panel-heading { gap: 12px; }
.heading-meta { display: flex; gap: 7px; flex: 1; min-width: 0; align-items: center; text-align: left; color: var(--muted); font: 9px/1 var(--mono); letter-spacing: .08em; }
.heading-meta span { white-space: nowrap; }
.core .state-indicator { margin-left: auto; flex-shrink: 0; }

h1 { font-size: clamp(30px,3vw,44px); }
.workspace { min-height: 0; display: grid; grid-template-columns: clamp(268px,21vw,310px) minmax(0,1fr) clamp(260px,21vw,320px); grid-template-rows: minmax(0,1fr) 88px; gap: 12px; }
.panel { min-height: 0; }
.panel-heading { min-height: 35px; flex: 0 0 35px; padding: 10px 13px; }
.payload { grid-column: 1; grid-row: 1; overflow: hidden; }
.core { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; overflow: hidden; }
.payload-foot, .key-hint { display: none; }
.payload-body { display: flex; flex-direction: column; min-height: 0; padding: 14px 16px; overflow: hidden; gap: 0; }
.payload-body > .field-heading { flex: 0 0 auto; margin: 0 0 6px; }
/* INTEGER N: ui.js sets the height (and, on desktop, the size: 15px to 11px, line 1.5x).
   The preview stands in, at rest, for a number too long to show at 11px. */
.payload .input-frame { --frame-pad: 10px 12px; position: relative; flex: 0 0 auto; min-height: 0; max-height: none; margin: 0; padding: var(--frame-pad); border: 1px solid var(--line); background: var(--field); }
.payload .input-frame textarea { display: block; width: 100%; height: 80px; min-height: 0; max-height: none; padding: 0; border: 0; font: 13px/20px var(--mono); letter-spacing: .02em; resize: none; overflow: hidden; scrollbar-width: thin; }
.payload .input-frame textarea:focus { overflow-y: auto; }
.n-preview { position: absolute; inset: var(--frame-pad); display: none; margin: 0; overflow: hidden; white-space: pre; font: 11px/16.5px var(--mono); letter-spacing: .02em; color: var(--bright); pointer-events: none; }
.n-preview .gap { color: var(--muted); }
.input-frame:has(textarea:read-only) .n-preview { color: var(--muted); }
.input-frame.abridged .n-preview { display: block; }
.input-frame.abridged textarea { opacity: 0; }
.field-meta { display: inline-flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; }
.view-all { padding: 0; border: 0; background: none; font: 10px/1 var(--mono); letter-spacing: .08em; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.view-all:hover { color: var(--bright); }
/* Operating the inputs only brightens the frame; nothing moves. */
.payload:has(textarea:focus, select:focus) { border-color: var(--line-focus); }
.payload .input-meta { flex: 0 0 auto; margin: 6px 0 0; font-size: 9px; }
.search-controls { flex: 0 0 auto; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--fine); }
.search-controls .preset-setting, .search-controls .limit-row, .search-controls .worker-setting { display: grid; grid-template-columns: 78px minmax(0,1fr); align-items: center; gap: 8px; margin: 0 0 8px; padding: 0; border: 0; }
.search-controls label { font: 10px/1.5 var(--mono); color: var(--muted); letter-spacing: .02em; }
.search-controls .select-wrap { width: 100%; max-width: none; min-width: 0; }
.search-controls select { width: 100%; min-height: 34px; padding: 7px 22px 7px 8px; font: 11px/1.4 var(--mono); letter-spacing: 0; }
.search-controls .worker-setting label span { display: block; font-size: 8px; }
.search-controls .actions { display: grid; grid-template-columns: minmax(0,1fr) 64px; gap: 8px; margin: 10px 0 0; }
.search-controls .primary, .search-controls .abort { min-width: 0; min-height: 42px; padding: 9px 10px; font-size: 11px; white-space: nowrap; }
.primary .action-icon { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.target-data { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; margin-top: 12px; }
.target-data .candidate-block { position: relative; flex: 0 0 auto; margin: 0; padding: 10px 0; border-top: 1px solid var(--fine); }
/* An input error covers the candidate count (then shown as —); no control moves. */
.candidate-block > .error { position: absolute; top: 0; left: 0; right: 0; min-height: 100%; margin: 0; z-index: 2; background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--panel); }
.target-data .candidate-block output { font-size: 24px; line-height: 1.4; }
.candidate-note { display: none; }
.coverage { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 6px; padding-top: 10px; border-top: 1px solid var(--fine); }
.coverage-heading { display: flex; flex: 0 0 auto; justify-content: space-between; align-items: baseline; gap: 6px; white-space: nowrap; }
.coverage-heading .eyebrow { font-size: 9px; letter-spacing: .1em; }
#coverage-value { color: var(--accent); font: 18px/1.2 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.coverage-plot { position: relative; flex: 1 1 auto; min-height: 64px; }
#coverage-curve { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.coverage-note { flex: 0 0 auto; font: 8.5px/1.4 var(--mono); letter-spacing: .05em; color: var(--muted); margin: 0; }
.core-view { position: relative; isolation: isolate; overflow: hidden; flex: 1 1 0; height: auto; min-height: 100px; max-height: none; }
.core-view > #reactor, .core-view > .sample-field, .core-view > .reactor-scale { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.core-view > #reactor { z-index: 0; }
.trial-block { flex: 0 0 auto; padding: 6px 22px 12px; }
.counter { min-height: 64px; height: 76px; max-height: none; padding: 0; }
#counter-reels { justify-content: flex-start; }
.stats { flex: 0 0 auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 13px 10px; margin: 0; }
.stats > div, .stats > div + div { min-width: 0; padding: 0 12px; border-left: 1px solid var(--line); }
.stats dt { text-align: left; margin-bottom: 6px; }
.stats dd { display: flex; justify-content: flex-start; align-items: baseline; gap: 6px; min-width: 0; margin: 0; white-space: nowrap; text-align: left; font: 22px/1.2 var(--mono); height: 1.2em; font-variant-numeric: tabular-nums; }
#elapsed, #rate { flex: 0 1 auto; width: auto; min-width: 0; max-width: 100%; margin: 0; text-align: left; }
#rate .metric-value { justify-content: flex-start; flex: 0 0 auto; }
#rate .leading-place { display: none; }
.stats .unit, .stats .metric-unit { flex: 0 0 auto; width: auto; min-width: 0; margin: 0; text-align: left; font: 9px/1.2 var(--mono); }
.side-stack { grid-column: 3; grid-row: 1; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: max-content minmax(0,1fr); min-height: 0; gap: 12px; }
.throughput-panel { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.telemetry-body { flex: 0 0 auto; display: grid; grid-template-rows: 16px 96px 14px auto auto; gap: 5px; min-height: 0; padding: 12px 14px; }
#rate-chart { height: 96px; margin: 0; }
#rate-chart path { vector-effect: non-scaling-stroke; }
.chart-axis { display: flex; height: 14px; line-height: 14px; }
.worker-heading { margin: 5px 0 0; padding-top: 7px; font-size: 10px; }
#worker-lanes { --lane-rows: 1; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: repeat(var(--lane-rows),18px); grid-auto-flow: column; align-content: start; gap: 2px 12px; height: auto; min-height: 0; max-height: none; margin: 2px 0 0; overflow: hidden; }
#worker-lanes[data-columns="2"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
#worker-lanes[data-columns="2"] .worker-lane { grid-template-columns: 2ch minmax(10px,1fr) 8.5ch; font-size: 9px; gap: 4px; }
#worker-lanes[data-columns="2"] .worker-lane output { display: inline-flex; font-size: 9px; }
#worker-lanes[data-columns="2"] .worker-lane { cursor: help; }
.worker-lane { min-height: 0; height: 100%; grid-template-columns: 2ch minmax(12px,1fr) 12ch; font-size: 10px; }
.worker-lane > .lane-track > .lane-fill { opacity: .55; }
.worker-lane .leading-place { display: none; }
.log-panel { min-height: 0; overflow: hidden; }
.event-log { flex: 1 1 0; height: auto; min-height: 0; max-height: none; }
.terminal-prompt { font-size: 10px; padding: 8px 12px; }
.output { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: 190px minmax(0,1fr) auto; grid-template-rows: minmax(0,1fr); height: 88px; min-height: 88px; max-height: 88px; overflow: hidden; align-items: stretch; }
.output-label { min-width: 0; padding: 12px 16px; }
.output-label h2 { font-size: 15px; white-space: normal; }
.verification { font-size: 8px; margin-top: 3px; }
.output-body { min-width: 0; min-height: 0; padding: 12px 22px; overflow: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.factor-values { font-size: 26px; gap: 12px; }
.factor-values.long { font-size: 13px; }
.factor-values > span { word-break: break-all; overflow-wrap: anywhere; }
.copy { position: relative; top: auto; right: auto; align-self: center; margin: 10px 14px 10px 0; padding: 8px 12px; min-height: 36px; }
/* Persistent, circle-contained result. There is never a blank transition frame. */
.lock-banner { display: none; }
body[data-state=found] .core-state { display: none; }
body[data-state=found] .lock-banner { display: flex; position: absolute; visibility: visible; opacity: 1; inset: 50% auto auto 50%; transform: translate(-50%,-50%); width: var(--lock-width,220px); max-height: var(--lock-height,140px); padding: 12px; gap: 5px; margin: 0; overflow: hidden; border: 1px solid var(--success); background: var(--panel); z-index: 1; align-items: center; flex-direction: column; text-align: center; pointer-events: none; }
.lock-banner > span:first-child { font: 8px/1.2 var(--mono); letter-spacing: .10em; color: var(--muted); }
.lock-banner b { color: var(--success); margin: 0; font: 500 var(--lock-font,22px)/1.2 var(--sans); white-space: nowrap; letter-spacing: .035em; }
.locked-divisor { display: block; max-width: 100%; margin: 5px 0 0; font: 18px/1.25 var(--mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: var(--ink); }
/* A small sphere makes a narrow banner: the digits shrink to fit its width (--lock-chars
   is their count), and the caption gives way. */
.lock-banner { container-type: inline-size; }
.locked-divisor:not(.long) { font-size: min(18px, calc((var(--lock-width, 220px) - 26px) / (var(--lock-chars, 8) * .62))); }
@container (max-width: 150px) { .lock-banner > span:first-child { display: none; } }
.locked-divisor.long { font-size: 10px; }
body[data-fx=full][data-state=found].hit-effect .lock-banner { animation: lock-acquire 650ms ease-out; }
@keyframes lock-acquire { from { box-shadow: 0 0 0 2px var(--success); } to { box-shadow: 0 0 0 0 transparent; } }
.start-effect .core-view { animation: none; }
.start-effect #reactor { animation: energize .9s ease-out; }
/* One-shot border traces: four 1px strips on a panel's border line, hidden while idle. */
.workspace { position: relative; }
.rim-strip { position: absolute; left: 0; top: 0; height: 1px; transform-origin: 0 0; pointer-events: none; z-index: 4; }
/* The previous border stays until the trace has laid the new one. */
body[data-state] .panel.is-tracing { border-color: var(--line); }
/* Panes group the phone's two views; elsewhere their panels sit directly in the grid. */
.pane { display: contents; }
@keyframes tab-thumb { from { transform: translateX(0); } to { transform: translateX(calc(100% + 6px)); } }
@keyframes tab-thumb-labels { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 3px)); } }
/* Mobile log gets a separate row, not pixels from the globe/background. */
.core-activity, .mobile-tabs, .target-dock, .readout, .target-side { display: none; }
@media (min-width:761px) and (max-height:790px) {
  .app { grid-template-rows: 46px minmax(0,1fr); gap: 9px; padding: 12px 18px 8px; }
  .site-header h1 { font-size: 26px; }
  h1 { font-size: 30px; }
  .workspace { gap: 9px; }
  .payload-body { padding: 10px 14px; }
  .payload .input-frame { --frame-pad: 8px 10px; }
  .payload .input-meta { display: none; }
  .search-controls { margin-top: 10px; }
  .search-controls .preset-setting, .search-controls .limit-row, .search-controls .worker-setting { grid-template-columns: 74px minmax(0,1fr); margin-bottom: 6px; }
  .search-controls select { min-height: 30px; padding-top: 5px; padding-bottom: 5px; }
  .search-controls .actions { margin-top: 8px; }
  .search-controls .primary, .search-controls .abort { min-height: 36px; padding: 7px 9px; font-size: 10px; }
  .target-data { margin-top: 12px; }
  .target-data .candidate-block { padding: 8px 0; }
  .target-data .candidate-block output { font-size: 22px; }
  .trial-block { padding: 5px 22px 7px; }
  .counter { height: 61px; min-height: 56px; }
  .stats { padding: 10px; }
  .stats dd { font-size: 20px; }
  .side-stack { gap: 9px; grid-template-rows: max-content minmax(0,1fr); }
  .telemetry-body { grid-template-rows: 16px 56px 14px auto auto; gap: 5px; padding: 10px 12px; }
  .throughput-panel .panel-heading, .log-panel .panel-heading { min-height: 28px; flex-basis: 28px; padding-top: 7px; padding-bottom: 7px; }
  #rate-chart { height: 56px; }
  .chart-axis { display: flex; }
  .worker-heading { padding-top: 0; margin-top: 2px; font-size: 9px; }
  #worker-lanes { grid-template-rows: repeat(var(--lane-rows),15px); row-gap: 1px; margin: 0; }
  .worker-lane { font-size: 9px; }
  .terminal-prompt { padding-top: 6px; padding-bottom: 6px; }
    .output-label h2 { font-size: 13px; }
}
@media (min-width:761px) and (max-width:1100px) {
  .workspace { grid-template-columns: 268px minmax(0,1fr); grid-template-rows: minmax(0,1fr) 108px 88px; }
  .core { grid-row: 1 / 3; }
  .side-stack { grid-column: 1; grid-row: 2; display: block; }
  .side-stack .log-panel, .throughput-panel .panel-heading, .telemetry-label, #rate-chart, .chart-axis { display: none; }
  .throughput-panel { height: 100%; }
  .telemetry-body { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 8px 12px; }
  .worker-heading { margin: 0; padding: 0; border: 0; }
  #worker-lanes { flex: 1; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: none; grid-auto-flow: row; grid-auto-rows: 12px; gap: 1px 8px; }
  .worker-lane { grid-template-columns: 2ch minmax(8px,1fr); }
  .worker-lane output { display: none; }
  .worker-lane { font-size: 9px; }
  .output { grid-row: 3; }
  .payload-body { overflow-y: auto; }
}
@media (max-width:760px), (pointer:coarse) and (max-height:590px) {
  .app { display: flex; flex-direction: column; width: 100%; max-width: 600px; height: var(--app-height,100dvh); min-height: 0; padding: 10px 12px; gap: 10px; overflow: hidden; }
  .chrome { display: flex; flex: 0 0 auto; flex-direction: column; gap: 10px; min-width: 0; background: var(--page); position: relative; z-index: 6; }
  .site-header { display: grid; height: auto; grid-template-columns: 20px minmax(0,1fr); grid-template-rows: 43px auto auto; align-items: center; column-gap: 8px; padding: 0; border: 0; }
  .site-header .system-mark { grid-column: 1; grid-row: 1; }
  .site-header .toolbar { grid-column: 2; grid-row: 1; margin-left: auto; }
  .site-header::after { content: ''; grid-column: 1/-1; grid-row: 1; align-self: end; height: 1px; background: var(--line); }
  .site-header .brand-caption { grid-column: 1/-1; grid-row: 2; margin-top: 10px; }
  .brand-caption .brand-motto { display: none; }
  .site-header h1 { grid-column: 1/-1; grid-row: 3; font-size: clamp(25px,7.8vw,33px); line-height: 1.12; margin-top: 2px; }
  .site-header .intro-meta, .heading-meta { display: none; }
  .toolbar { margin-left: auto; gap: 6px; }
  .tool { min-height: 34px; padding: 7px 9px; font-size: 10px; }
  #sound-toggle { min-width: calc(14ch + .49em + 20px); }
  .fullscreen-tool span { display: none; }
  .system-mark { width: 20px; flex-shrink: 0; }

  h1 { margin-top: 2px; font-size: clamp(25px,7.8vw,33px); line-height: 1.12; }
  .intro-meta { display: none; }
  .mobile-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 36px; gap: 6px; }
  .mobile-tabs button { min-height: 36px; padding: 8px 6px; border: 1px solid var(--line); background: var(--panel); font: 11px/1.4 var(--mono); color: var(--muted); letter-spacing: .09em; }
  /* The selected tab is a thumb that follows the panes while they slide (ui.js moves it);
     inside it, a copy of the labels shows in the accent colour. */
  .tab-thumb { position: absolute; top: 0; left: 0; bottom: 0; width: calc(50% - 3px); overflow: hidden; border: 1px solid var(--accent); background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--panel); pointer-events: none; transform: translateX(calc(var(--slide, 0) * (100% + 6px))); will-change: transform; }
  .tab-thumb-labels { position: absolute; top: -1px; bottom: -1px; left: -1px; width: calc(200% + 6px); display: grid; grid-template-columns: 1fr 1fr; gap: 6px; color: var(--accent); transform: translateX(calc(var(--slide, 0) * (-50% - 3px))); will-change: transform; }
  .tab-thumb-labels > span { display: flex; align-items: center; justify-content: center; font: 11px/1.4 var(--mono); letter-spacing: .09em; }
  /* Where the browser can, the thumb is tied to the views' scroll position directly, so it
     moves with the finger on every frame; elsewhere ui.js sets --slide as they scroll. */
  @supports (animation-timeline: scroll()) and (timeline-scope: --pager) {
    .app { timeline-scope: --pager; }
    .workspace { scroll-timeline: --pager x; }
    .tab-thumb { animation: tab-thumb linear both; animation-timeline: --pager; }
    .tab-thumb-labels { animation: tab-thumb-labels linear both; animation-timeline: --pager; }
    body[data-suspended=true] .tab-thumb, body[data-suspended=true] .tab-thumb-labels { animation-play-state: running !important; }
  }
  /* The two views sit side by side and slide by a swipe or a tab. Both stay laid out,
     so switching never resizes the core or redraws its stars. */
  .workspace { display: flex; flex: 1 1 0; min-height: 0; min-width: 0; margin: 0 -12px; padding: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .workspace::-webkit-scrollbar { display: none; }
  /* LIVE opens with the first search: nothing to swipe to before it. */
  body[data-ran=false] .workspace { overflow-x: hidden; }
  .pane { display: flex; flex: 0 0 100%; flex-direction: column; gap: 10px; min-width: 0; height: 100%; padding: 1px 12px; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: none; scroll-snap-align: start; scroll-snap-stop: always; }
  .pane::-webkit-scrollbar { display: none; }
  .side-stack { display: none; }
  /* Each view's actions sit at its foot, in the same place in both views, and slide as
     part of it, with the browser's own scrolling (ui.js moves TARGET's INITIATE and ABORT
     here). Should a view ever have to scroll, they stay in sight. */
  .target-dock, .mobile-dock { position: sticky; bottom: 0; z-index: 3; display: flex; flex: 0 0 46px; min-width: 0; gap: 8px; margin: 0; padding: 0; background: var(--page); }
  .target-dock .actions { display: flex; flex: 1; min-width: 0; gap: 8px; margin: 0; }
  .target-dock .primary, .mobile-dock .primary { flex: 1; min-width: 0; min-height: 46px; }
  .target-dock .abort, .mobile-dock .abort { flex: 0 0 70px; min-height: 46px; order: 1; }
  /* TARGET fills its view, the selects at the bottom. Only a screen too short for the
     minimum layout scrolls this view. */
  .payload { flex: 1 0 auto; }
  .payload-body { flex: 1 1 auto; padding: 14px; }

  /* The core grows into the free height and never clips its own content: the
     readings below the sphere always show whole (the tiers below make room). */
  #pane-live .core { flex: 1 1 auto; min-height: auto; overflow: visible; }
  .core-view { min-height: 144px; }
  .core-activity { display: flex; flex: 0 0 36px; height: 36px; min-height: 36px; max-height: 36px; overflow: hidden; flex-direction: column; justify-content: flex-end; padding: 2px 12px; border-top: 0; background: var(--panel); font: 9px/16px var(--mono); pointer-events: none; }
  .core-activity .event { flex: 0 0 16px; height: 16px; min-height: 16px; padding: 0; animation: none; }
  .core-activity .trace-mark, .core-activity .event-message { font-size: 9px; line-height: 16px; }
  .core-activity .event:first-child { opacity: .65; }
  .trial-block { padding: 9px 16px 8px; }
  .counter { min-height: 58px; height: 62px; }
  .counter-heading h3, .live-tag { font-size: 9px; }
  .stats { padding: 10px 4px; gap: 8px; }
  .stats > div, .stats > div + div { padding: 0 12px; }
  .stats dd { font-size: 21px; }
  .stats dt { font-size: 9px; }
  .stats .unit { font-size: 8px; }
  #core-word { font-size: clamp(14px,4.6vw,21px); }
  #core-sub { font-size: 8px; letter-spacing: .09em; }
  .output { display: grid; flex: 0 0 116px; height: 116px; min-height: 116px; max-height: 116px; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: 42px minmax(0,1fr); overflow: hidden; }
  .output-label { grid-column: 1; grid-row: 1; padding: 9px 13px; border: 0; flex-direction: row; gap: 9px; align-items: center; }
  .output-label .eyebrow, .output-label .verification { display: none; }
  .output-label h2 { font-size: 12px; margin: 0; }
  .output-body { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid var(--fine); padding: 10px 13px; }
  .empty-dashes { display: none; }
  .factor-empty { font-size: 11px; }
  .factor-values { font-size: 18px; gap: 8px; }
  .factor-values.long { font-size: 11px; }
  .copy { grid-column: 2; grid-row: 1; margin: 4px 8px 4px 0; padding: 5px 8px; min-height: 32px; font-size: 10px; }
  body[data-state=found] .lock-banner { padding: 9px 12px; gap: 3px; }
  .locked-divisor:not(.long) { font-size: min(15px, calc((var(--lock-width, 220px) - 26px) / (var(--lock-chars, 8) * .62))); }
  .locked-divisor.long { font-size: 9px; }
}
@media (max-width:760px) and (max-height:650px) {
  .app { padding-top: 8px; padding-bottom: 8px; gap: 8px; }
  .chrome { gap: 7px; }

  h1 { font-size: 27px; }
}
@media (min-width:761px) and (max-height:589px) and (pointer:fine) {
  html, body { height: auto; overflow: auto; }
  .app { min-height: 650px; height: 650px; }
}
@media (max-height:790px) {
  .target-data .candidate-block { padding: 6px 0; }
  .target-data .candidate-block output { font-size: 20px; }
}
@media (min-height:1001px) {
  .search-controls select { min-height: 38px; }
}
/* Phones: expected coverage lives in the LIVE tab's fixed 116px result slot while
   a search is active; afterwards the slot shows the result and the final value. */
.result-coverage { display: none; }
@media (max-width:760px), (pointer:coarse) and (max-height:590px) {
  #output-panel > .coverage { display: none; grid-column: 1 / -1; grid-row: 1 / -1; min-height: 0; padding: 10px 13px 8px; border: 0; gap: 4px; }
  #output-panel .coverage-plot { flex: 1 1 auto; height: auto; min-height: 0; }
  #output-panel .coverage-note { display: none; }
  body:is([data-state=screening],[data-state=running],[data-state=pausing],[data-state=paused],[data-state=resuming],[data-state=stopping]) #output-panel > .coverage { display: flex; }
  body:is([data-state=screening],[data-state=running],[data-state=pausing],[data-state=paused],[data-state=resuming],[data-state=stopping]) #output-panel > :not(.coverage, .result-flare) { display: none; }
  .result-coverage { display: block; margin-top: 2px; font: 9px/1.2 var(--mono); letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
  /* Phones: TELEMETRY takes the room the coverage plot has on the desktop, between the
     candidate count and the controls (ui.js moves it). The chart gives height to INTEGER N. */
  .payload .telemetry-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 5px; min-height: 0; padding: 10px 0 0; border-top: 1px solid var(--fine); }
  .payload .telemetry-body > * { flex: 0 0 auto; }
  .payload #rate-chart { flex: 1 1 0px; height: auto; min-height: 40px; margin: 0; }
  .payload .worker-heading { margin: 3px 0 0; padding: 0; border: 0; font-size: 9px; }
  .payload #worker-lanes { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: none; grid-auto-flow: row; grid-auto-rows: 14px; gap: 2px 14px; margin: 0; }
  .payload .worker-lane { grid-template-columns: 2ch minmax(10px,1fr) 8.5ch; gap: 5px; font-size: 9px; }
  .payload #worker-lanes[data-columns="4"] { grid-template-columns: repeat(4,minmax(0,1fr)); grid-auto-rows: 12px; gap: 1px 10px; }
  .payload #worker-lanes[data-columns="4"] .worker-lane { grid-template-columns: 2ch minmax(8px,1fr); }
  .payload #worker-lanes[data-columns="4"] .worker-lane output { display: none; }
  .pane { container: pane / size; }
}
/* Portrait phones (and any phone view taller than 590px). */
@media (orientation: portrait), (min-height: 591px) {
  /* A shorter phone view keeps every control and the chart, and never scrolls for a long N:
     first the lanes give way, then the axis and the bit count (the selects tighten as on
     short desktop windows), and last the candidate count folds into one line. */
  @container pane (max-height: 636px) {
    .payload .worker-heading, .payload #worker-lanes { display: none; }
  }
  @container pane (max-height: 576px) {
    .payload .input-meta, .payload .chart-axis { display: none; }
    .search-controls { margin-top: 10px; }
    .search-controls .preset-setting, .search-controls .limit-row, .search-controls .worker-setting { margin-bottom: 6px; }
    .search-controls select { min-height: 30px; padding-top: 5px; padding-bottom: 5px; }
  }
  /* A shorter phone keeps the whole LIVE view on screen, the readings included: first
     the two-line log gives way, then the sphere's box shrinks and the counter and stats
     tighten. (Sphere box 144 + heading, log, count, stats, result, actions and gaps 404.) */
  @container pane (max-height: 547px) {
    #pane-live .core-activity { display: none; }
  }
  @container pane (max-height: 511px) {
    #pane-live .core-view { min-height: 96px; }
    #pane-live .trial-block { padding-top: 6px; padding-bottom: 4px; }
    #pane-live .counter { height: 52px; min-height: 52px; }
    #pane-live .stats { padding-top: 7px; padding-bottom: 7px; }
  }
  @container pane (max-height: 526px) {
    .payload-body { padding-top: 10px; padding-bottom: 10px; }
    .target-data .candidate-block { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 0; }
    .target-data .candidate-block output { font-size: 17px; line-height: 1.3; white-space: nowrap; }
  }
}
@media (min-width:761px) and (max-width:1100px) {
  .app { grid-template-rows: 100px minmax(0,1fr); }
  .site-header { grid-template-columns: auto auto 1fr auto; grid-template-rows: 1fr 1fr; column-gap: 12px; }
  .site-header .system-mark { grid-column: 1; grid-row: 1; }
  .site-header .toolbar { grid-column: 2/-1; grid-row: 1; justify-self: end; }
  .site-header h1 { grid-column: 1/3; grid-row: 2; font-size: 30px; }
  .site-header .brand-caption { display: none; }
  .site-header .intro-meta { grid-column: 3/-1; grid-row: 2; justify-self: end; }
  .coverage-plot { flex: 1 0 90px; }
}
/* Landscape phones (after the tablet rules, which a phone on its side may also match):
   the header folds into one thin bar (brand, view tabs, toolbar) and the views take the
   rest. LIVE centres the core at their full height, the count and readings at its left,
   the result and actions at its right; TARGET gives the digits the left and the chart,
   selects and INITIATE the right. The two-line log is left out. */
@media (max-width:760px) and (orientation:landscape) and (max-height:590px), (pointer:coarse) and (orientation:landscape) and (max-height:590px) {
  .app { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: 30px minmax(0,1fr); row-gap: 8px; max-width: none; padding: 8px 12px; }
  .chrome { grid-row: 1; flex-direction: row; align-items: center; gap: 0; min-height: 0; }
  .site-header { display: flex; flex: 1 1 auto; align-items: center; gap: 12px; height: 30px; min-width: 0; }
  .site-header::after, .site-header .brand-caption { display: none; }
  .site-header h1 { margin: 0; font-size: 18px; line-height: 1; }
  /* ui.js moves the tabs into the bar, before the toolbar. */
  .site-header .mobile-tabs { flex: 0 0 clamp(170px,25vw,220px); min-height: 30px; margin-left: auto; }
  .mobile-tabs button { min-height: 30px; padding: 4px 6px; }
  .mobile-tabs button, .tab-thumb-labels > span { font-size: 10px; letter-spacing: .06em; }
  .site-header .toolbar { display: flex; gap: 6px; margin: 0; }
  .site-header .tool { min-height: 30px; padding: 5px 8px; }
  .workspace { grid-row: 2; margin: 0 -12px; }
  #pane-live { display: grid; grid-template-columns: clamp(168px,23vw,204px) minmax(0,1fr) clamp(200px,26vw,226px); grid-template-rows: minmax(0,1fr) 46px; gap: 10px; }
  #pane-live .readout { display: flex; grid-column: 1; grid-row: 1 / -1; flex-direction: column; justify-content: center; min-height: 0; overflow: hidden; }
  #pane-live .readout .stats { grid-template-columns: minmax(0,1fr); gap: 12px; }
  #pane-live .readout .counter-heading { flex-wrap: wrap; row-gap: 3px; }
  #pane-live .core { grid-column: 2; grid-row: 1 / -1; min-height: 0; }
  #pane-live .core-view { min-height: 0; }
  #pane-live .core-activity { display: none; }
  #pane-live .output { grid-column: 3; grid-row: 1; height: auto; min-height: 0; max-height: none; grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr) auto; }
  /* The tall result: heading, then the factors, then SHARE under them. */
  #pane-live .output .copy { grid-column: 1; grid-row: 3; justify-self: stretch; margin: 0 13px 12px; }
  /* A narrow slot puts the coverage value under its label rather than cut it. */
  #output-panel .coverage-heading { flex-wrap: wrap; row-gap: 0; }
  #output-panel #coverage-value { margin-left: auto; font-size: 16px; }
  #pane-live .mobile-dock { position: static; grid-column: 3; grid-row: 2; }
  .target-dock { display: none; }
  #pane-live .mobile-dock .primary { gap: 6px; padding: 10px 8px; font-size: 11px; letter-spacing: .02em; white-space: nowrap; }
  #pane-live .mobile-dock .abort { flex-basis: 56px; }
  .payload { flex: 1 1 auto; min-height: 0; }
  .payload-body { display: grid; grid-template-columns: minmax(0,1fr) 222px; grid-template-rows: auto minmax(0,1fr) auto auto; column-gap: 18px; padding: 12px 14px; }
  .payload-body > .field-heading { grid-column: 1; grid-row: 1; }
  .payload .input-frame { grid-column: 1; grid-row: 2; overflow: hidden; }
  .payload .input-meta { grid-column: 1; grid-row: 3; }
  .target-data { grid-column: 1; grid-row: 4; flex: none; margin: 8px 0 0; }
  .target-data .candidate-block { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 0 0; }
  .target-data .candidate-block output { font-size: 18px; line-height: 1.3; white-space: nowrap; }
  /* ui.js moves TELEMETRY and the controls into this column. */
  .target-side { display: flex; grid-column: 2; grid-row: 1 / -1; flex-direction: column; min-height: 0; }
  .payload .telemetry-body { flex: 1 1 auto; padding: 0; border: 0; }
  /* A phone on its side may be as wide as a tablet: undo the tablet layout's cuts. */
  .payload .telemetry-label, .payload .chart-axis { display: flex; }
  .payload #rate-chart { display: block; }
  .payload-body { overflow: hidden; }
  .payload .worker-heading, .payload #worker-lanes { display: none; }
  .search-controls { flex: 0 0 auto; margin-top: 10px; padding-top: 10px; }
  .search-controls .preset-setting, .search-controls .limit-row, .search-controls .worker-setting { margin-bottom: 6px; }
  .search-controls select { min-height: 30px; padding-top: 5px; padding-bottom: 5px; }
  .search-controls .actions { margin-top: 8px; }
  .search-controls .primary, .search-controls .abort { min-height: 40px; }
}
/* Dense arrays keep the numeric bars and six readable log rows. Only
   expendable prompt/padding yields when two columns alone cannot fit. */
@media (min-width:1101px) and (min-height:590px) {
  .side-stack[data-dense=true] .terminal-prompt { display: none; }
  .side-stack[data-dense=true] .event-log { padding-top: 2px; padding-bottom: 2px; }
  .side-stack[data-dense=true] .telemetry-body { padding-top: 10px; padding-bottom: 10px; }
}
@media (min-width:1101px) and (min-height:590px) and (max-height:790px) {
  .side-stack[data-dense=true] .telemetry-body { padding-top: 3px; padding-bottom: 3px; row-gap: 2px; }
  .side-stack[data-dense=true] .worker-heading { margin-top: 0; }
  .coverage-heading .eyebrow { font-size: 8.5px; letter-spacing: .04em; }
}
/* Accessibility overrides are centralized rather than repeated per component. */
[hidden] { display: none !important; }
body[data-fx=quiet] *, body[data-fx=quiet] *::before, body[data-fx=quiet] *::after { animation: none !important; transition: none !important; }
body[data-fx=quiet] .rim-strip, body[data-fx=quiet] .lane-glint { display: none; }
body[data-suspended=true] *, body[data-suspended=true] *::before, body[data-suspended=true] *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rim-strip, .lane-glint { display: none; }
}
@media (forced-colors:active) {
  .rim-strip, .lane-glint, .ambient-grid, .core-view canvas { display: none; }
  .panel { border-color: CanvasText; }
}