/* Declaration Letter-Grid v2 · full-codex layer passes + glyph rail + finale path */
.dlg-page .dlg-shell {
  max-width: min(1100px, 100%);
  margin: 0 auto;
  padding: 12px 16px 40px;
}
.dlg-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}
.dlg-hero h2 {
  margin: 0 0 4px;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}
.dlg-hero p {
  margin: 0;
  max-width: 56ch;
  font-size: 0.88rem;
  color: var(--muted, #8b9bb0);
  line-height: 1.4;
}
.dlg-hero p b {
  color: #64d2ff;
  font-weight: 650;
}
.dlg-scoreboard {
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: 6px;
  min-width: min(280px, 100%);
}
.dlg-scoreboard--sub {
  margin-top: 6px;
  opacity: 0.92;
}
.dlg-scoreboard--sub .dlg-metric b {
  font-size: 0.92rem;
  color: #64d2ff;
}
.dlg-metric {
  border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  border-radius: 10px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.18);
  text-align: center;
}
.dlg-metric b {
  display: block;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent, #0a84ff);
}
.dlg-metric span {
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #8b9bb0);
}
/* WebGrid timer emphasis */
.dlg-metric--timer b {
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  color: #f0f4f8;
}
.dlg-metric--timer.is-low b {
  color: #ff6b63;
  animation: dlg-timer-blink 0.6s step-end infinite;
}
.dlg-metric--timer.is-end b {
  color: #30d158;
  animation: none;
}
@keyframes dlg-timer-blink {
  50% {
    opacity: 0.35;
  }
}
/* Live strip mirrors Neuralink sidebar: MM:SS BPS NTPM · N×N */
.dlg-live-strip {
  width: 100%;
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(10, 132, 255, 0.28);
  background: rgba(10, 132, 255, 0.1);
  font: 650 0.88rem/1.25 ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: #e8f1ff;
  text-align: center;
}
.dlg-live-strip[data-phase="end"] {
  border-color: rgba(48, 209, 88, 0.4);
  background: rgba(48, 209, 88, 0.12);
  color: #d4f5dd;
}
.dlg-progress-bar i.is-timer {
  background: linear-gradient(90deg, #0a84ff, #ff9f0a 85%, #ff6b63);
}
/* Peak / end card (WebGrid end screen) */
.dlg-end-card {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 8, 12, 0.78);
  backdrop-filter: blur(6px);
  border-radius: 14px;
  padding: 16px;
}
.dlg-end-card[hidden] {
  display: none !important;
}
.dlg-end-inner {
  max-width: 360px;
  text-align: center;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid rgba(10, 132, 255, 0.35);
  background: rgba(12, 16, 24, 0.95);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.dlg-end-inner h3 {
  margin: 0 0 10px;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a8b3c0;
}
.dlg-peak-line {
  margin: 0 0 8px;
  font: 700 1.05rem/1.35 ui-sans-serif, system-ui, sans-serif;
  color: #64d2ff;
}
.dlg-end-meta {
  margin: 0 0 14px;
  font: 600 0.72rem/1.4 ui-monospace, Menlo, monospace;
  color: #8b9bb0;
}
.dlg-end-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.dlg-end-actions button {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: #f0f4f8;
  border-radius: 8px;
  padding: 7px 12px;
  font: 600 0.78rem/1.2 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}
.dlg-end-actions button.primary {
  background: rgba(10, 132, 255, 0.32);
  border-color: rgba(10, 132, 255, 0.65);
}
/* Score report tables (MG / sudoku-style) */
.dlg-end-inner--report {
  max-width: min(420px, 96vw);
  max-height: min(90vh, 720px);
  overflow: auto;
  text-align: left;
}
.dlg-end-inner--report h3 {
  text-align: center;
  color: #e8f1ff;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.95rem;
}
.dlg-end-inner--report .dlg-peak-line {
  text-align: center;
}
.dlg-score-table,
.dlg-stair-table {
  width: 100%;
  border-collapse: collapse;
  font: 600 0.78rem/1.35 ui-monospace, Menlo, monospace;
  margin: 8px 0;
}
.dlg-score-table th,
.dlg-stair-table th,
.dlg-score-table td,
.dlg-stair-table td {
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 5px 8px;
}
.dlg-score-table th,
.dlg-stair-table th {
  background: rgba(10, 132, 255, 0.14);
  color: #a8b3c0;
  text-align: left;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.dlg-score-table td.num,
.dlg-stair-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #e6edf3;
}
.dlg-score-table tr.is-peak td {
  color: #64d2ff;
  font-weight: 700;
}
.dlg-bps-note {
  margin: 6px 0 10px;
  font-size: 0.72rem;
  line-height: 1.4;
  color: #8b9bb0;
}
.dlg-stair-heading {
  margin: 10px 0 4px;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #a8b3c0;
}
.dlg-report-host {
  font-size: 0.78rem;
}
.dlg-report-title {
  font: 650 0.8rem/1.3 ui-monospace, Menlo, monospace;
  color: #64d2ff;
  margin-bottom: 6px;
}
.dlg-report-placeholder {
  margin: 0;
  font-size: 0.78rem;
  color: #8b9bb0;
}
.dlg-card--report .dlg-score-table {
  font-size: 0.72rem;
}

/* Codex progress */
.dlg-progress {
  margin: 0 0 10px;
}
.dlg-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.dlg-progress-bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #0a84ff, #64d2ff 70%, #30d158);
  border-radius: inherit;
  transition: width 0.12s ease-out;
}
.dlg-progress-meta {
  margin-top: 4px;
  font: 600 0.68rem/1.3 ui-monospace, Menlo, monospace;
  color: var(--muted, #a8b3c0);
  letter-spacing: 0.02em;
}

/* Master small-glyph rail (ordered stream window) */
.dlg-glyph-rail {
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  overflow-x: auto;
  padding: 6px 4px 10px;
  margin: 0 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  scrollbar-width: thin;
}
.dlg-gchip {
  flex: 0 0 auto;
  min-width: 1.15em;
  height: 1.45em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border-radius: 4px;
  font: 650 0.72rem/1 ui-monospace, Menlo, monospace;
  background: rgba(255, 255, 255, 0.06);
  color: #c5d0dc;
  border: 1px solid transparent;
}
.dlg-gchip.done {
  background: rgba(48, 209, 88, 0.16);
  color: #30d158;
  opacity: 0.75;
}
.dlg-gchip.next {
  background: rgb(10, 132, 255);
  color: #fff;
  border-color: rgba(100, 210, 255, 0.6);
  box-shadow: 0 0 0 1px rgba(10, 132, 255, 0.45), 0 2px 10px rgba(10, 132, 255, 0.35);
  transform: scale(1.12);
}

.dlg-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.85fr);
  gap: 14px;
  align-items: start;
}
@media (max-width: 820px) {
  .dlg-layout {
    grid-template-columns: 1fr;
  }
  .dlg-scoreboard {
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
  }
}
.dlg-board-wrap {
  position: relative;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  border-radius: 14px;
  padding: 12px;
  background: rgba(12, 14, 18, 0.55);
}
.dlg-board-top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.dlg-prompt {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.85rem;
}
.dlg-prompt em {
  font-style: normal;
  color: #0a84ff;
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0 2px;
}
.dlg-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dlg-controls button,
.dlg-side button {
  appearance: none;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.14));
  background: rgba(255, 255, 255, 0.05);
  color: inherit;
  border-radius: 8px;
  padding: 5px 9px;
  font: 600 0.72rem/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.03em;
  cursor: pointer;
}
.dlg-controls button:hover,
.dlg-side button:hover {
  border-color: rgba(10, 132, 255, 0.45);
}
.dlg-controls button.on {
  background: rgba(10, 132, 255, 0.18);
  border-color: rgba(10, 132, 255, 0.5);
}
.dlg-controls button.primary {
  background: rgba(10, 132, 255, 0.28);
  border-color: rgba(10, 132, 255, 0.65);
  color: #fff;
}
.dlg-controls button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Board + finale path overlay */
.dlg-board-host {
  position: relative;
  width: min(100%, 520px);
  margin: 0 auto;
}
.dlg-board {
  display: grid;
  gap: 3px;
  width: 100%;
  aspect-ratio: 1;
  user-select: none;
  touch-action: manipulation;
  position: relative;
  z-index: 2; /* above hairline guides */
}
/* Guides behind glyphs — never fight the blue target */
.dlg-path-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.15s ease;
  overflow: visible;
}
/* Contrail layer toggles — quiet chips, match dec-nav language */
.dlg-contrail-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 0 0 8px;
}
.dlg-contrail-chip {
  appearance: none;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  background: transparent;
  color: var(--muted, #8b949e);
  border-radius: 999px;
  padding: 4px 10px;
  font: 600 0.65rem/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.dlg-contrail-chip:hover {
  border-color: rgba(88, 166, 255, 0.35);
  color: var(--ink, #e6edf3);
}
.dlg-contrail-chip.on {
  color: var(--ink, #e6edf3);
  border-color: rgba(88, 166, 255, 0.35);
  background: rgba(88, 166, 255, 0.08);
}
.dlg-contrail-chip.on[data-contrail="word"] {
  border-color: rgba(63, 185, 80, 0.35);
  background: rgba(63, 185, 80, 0.08);
}
.dlg-contrail-chip.on[data-contrail="sentence"] {
  border-color: rgba(210, 153, 34, 0.35);
  background: rgba(210, 153, 34, 0.07);
}
.dlg-contrail-chip.on[data-contrail="same"] {
  border-color: rgba(88, 166, 255, 0.4);
  background: rgba(88, 166, 255, 0.08);
}
.dlg-contrail-meta {
  font: 600 0.62rem/1.2 ui-monospace, Menlo, monospace;
  color: var(--faint, #484f58);
  margin-left: 4px;
}
/* Cell marks: hairline ticks only — never recolor glyph ink */
.dlg-cell.is-word-start:not(.is-target):not(.is-hit) {
  box-shadow: inset 0 -1px 0 0 rgba(63, 185, 80, 0.35);
}
.dlg-cell.is-sentence-start:not(.is-target):not(.is-hit) {
  box-shadow: inset 0 0 0 1px rgba(210, 153, 34, 0.28);
}
.dlg-cell.is-word-start.is-sentence-start:not(.is-target):not(.is-hit) {
  box-shadow: inset 0 0 0 1px rgba(210, 153, 34, 0.28),
    inset 0 -1px 0 0 rgba(63, 185, 80, 0.35);
}
.dlg-cell.is-same-letter:not(.is-target):not(.is-hit) {
  /* no fill wash — tiny top tick only */
  box-shadow: inset 0 1px 0 0 rgba(88, 166, 255, 0.4);
}
.dlg-cell.is-target {
  /* target always wins */
  z-index: 3;
  position: relative;
}
.dlg-contrail-line,
.dlg-contrail-word,
.dlg-contrail-sentence,
.dlg-contrail-same,
.dlg-contrail-finale {
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dlg-contrail-dot {
  opacity: 0.75;
}
/* Speed presets — secondary to play controls */
.dlg-speed-presets {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-left: 4px;
  padding-left: 6px;
  border-left: 1px solid var(--line, rgba(255, 255, 255, 0.1));
}
.dlg-speed-presets button.dlg-speed {
  padding: 3px 7px;
  font-size: 0.62rem;
  border-radius: 6px;
  color: var(--muted, #8b949e);
}
.dlg-speed-presets button.dlg-speed.on {
  background: rgba(10, 132, 255, 0.14);
  border-color: rgba(10, 132, 255, 0.4);
  color: #58a6ff;
}
/* Turbo: agent-only paint shortcuts — target still clear */
.dlg-board-host.is-turbo .dlg-cell {
  transition: none !important;
}
.dlg-board-host.is-turbo .dlg-cell.is-target {
  box-shadow: 0 0 0 1px rgba(10, 132, 255, 0.75) !important;
}
.dlg-board-host.is-turbo .dlg-path-svg {
  opacity: 0.45 !important;
  transition: none;
}
.dlg-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid transparent;
  font-family: ui-monospace, Menlo, monospace;
  font-weight: 650;
  font-size: clamp(0.7rem, 2.2vw, 0.95rem);
  color: #f0f4f8;
  cursor: pointer;
}
.dlg-cell:hover {
  border-color: rgba(255, 255, 255, 0.18);
}
.dlg-cell.is-target {
  background: rgb(10, 132, 255);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(10, 132, 255, 0.5), 0 4px 14px rgba(10, 132, 255, 0.35);
}
.dlg-cell.is-path-head {
  animation: dlg-path-pulse 1.1s ease-in-out infinite;
}
.dlg-cell.is-path-future {
  opacity: 0.55;
  border-color: rgba(100, 210, 255, 0.18);
}
.dlg-cell.is-hit {
  background: rgba(48, 209, 88, 0.22);
  color: #30d158;
}
.dlg-cell.is-miss {
  background: rgba(255, 69, 58, 0.2);
  color: #ff6b63;
}
.dlg-cell.is-pad {
  opacity: 0.28;
  cursor: default;
}
.dlg-cell.is-space {
  opacity: 0.45;
  font-size: 0.65em;
}
@keyframes dlg-path-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(10, 132, 255, 0.5), 0 4px 14px rgba(10, 132, 255, 0.35);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(100, 210, 255, 0.55), 0 6px 20px rgba(10, 132, 255, 0.55);
  }
}

/* Layer pass rail (replaces old stair for codex windows) */
.dlg-layer-rail,
.dlg-stair {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}
.dlg-layer-rail button,
.dlg-stair button {
  appearance: none;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  background: transparent;
  color: var(--muted, #8b9bb0);
  border-radius: 999px;
  padding: 3px 8px;
  font: 600 0.65rem/1 ui-monospace, Menlo, monospace;
  cursor: pointer;
}
.dlg-layer-rail button.done,
.dlg-stair button.unlocked {
  color: #30d158;
  border-color: rgba(48, 209, 88, 0.35);
}
.dlg-layer-rail button.active,
.dlg-stair button.active {
  color: #fff;
  background: rgba(10, 132, 255, 0.28);
  border-color: rgba(10, 132, 255, 0.5);
}
.dlg-layer-rail button:disabled,
.dlg-stair button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.dlg-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dlg-card {
  border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.16);
}
.dlg-card h3 {
  margin: 0 0 6px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #8b9bb0);
}
.dlg-card p,
.dlg-card li {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
}
.dlg-xref-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 220px;
  overflow: auto;
}
.dlg-xref-list li {
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  padding: 6px 0;
  cursor: pointer;
}
.dlg-xref-list li:first-child {
  border-top: 0;
}
.dlg-xref-list li:hover {
  color: #64d2ff;
}
.dlg-xref-list .lid {
  font-family: ui-monospace, Menlo, monospace;
  font-weight: 700;
  color: #0a84ff;
  margin-right: 6px;
}
.dlg-xref-list .cnt {
  float: right;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.dlg-doc {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 0.92rem;
  line-height: 1.45;
  max-height: 180px;
  overflow: auto;
  white-space: pre-wrap;
}
.dlg-doc mark {
  background: rgba(10, 132, 255, 0.28);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}
.dlg-gateway {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.dlg-gateway a {
  font-size: 0.72rem;
  text-decoration: none;
  color: #64d2ff;
  border: 1px solid rgba(100, 210, 255, 0.28);
  border-radius: 8px;
  padding: 4px 8px;
}
.dlg-gateway a:hover {
  background: rgba(10, 132, 255, 0.12);
}
.dlg-log {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.68rem;
  color: var(--muted, #8b9bb0);
  max-height: 100px;
  overflow: auto;
  white-space: pre-wrap;
}
/* Dark-first shell text */
.dlg-shell,
.dlg-prompt,
.dlg-card p,
.dlg-card li,
.dlg-doc {
  color: var(--ink, #e6edf3);
}
.dlg-card h3,
.dlg-metric span {
  color: var(--muted, #a8b3c0);
}
.dlg-controls button,
.dlg-side button {
  color: #f0f4f8;
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="light"] .dlg-board-wrap,
html[data-theme="light"] .dlg-card,
html[data-theme="light"] .dlg-metric {
  background: #fafaf8;
  border-color: rgba(28, 25, 23, 0.12);
  color: #1c1917;
}
html[data-theme="light"] .dlg-shell,
html[data-theme="light"] .dlg-prompt,
html[data-theme="light"] .dlg-card p,
html[data-theme="light"] .dlg-card li,
html[data-theme="light"] .dlg-doc {
  color: #1c1917;
}
html[data-theme="light"] .dlg-card h3,
html[data-theme="light"] .dlg-metric span,
html[data-theme="light"] .dlg-progress-meta {
  color: #57534e;
}
html[data-theme="light"] .dlg-progress-bar {
  background: rgba(28, 25, 23, 0.08);
  border-color: rgba(28, 25, 23, 0.1);
}
html[data-theme="light"] .dlg-gchip {
  background: rgba(20, 40, 70, 0.08);
  color: #1e3a5f;
}
html[data-theme="light"] .dlg-gchip.done {
  color: #15803d;
  background: rgba(48, 209, 88, 0.14);
}
html[data-theme="light"] .dlg-glyph-rail {
  border-bottom-color: rgba(28, 25, 23, 0.1);
}
html[data-theme="light"] .dlg-cell {
  background: rgba(20, 40, 70, 0.08);
  color: #1e3a5f;
}
html[data-theme="light"] .dlg-cell.is-target {
  color: #fff;
}
html[data-theme="light"] .dlg-controls button,
html[data-theme="light"] .dlg-side button {
  color: #1c1917;
  background: #fff;
  border-color: rgba(28, 25, 23, 0.18);
}
html[data-theme="light"] .dlg-controls button.primary {
  background: rgba(10, 132, 255, 0.16);
  color: #0a4f9c;
}