/* Hallmark · macrostructure: Workbench · genre: modern-minimal · tone: technical · anchor hue: safety orange · nav: N10 application masthead · footer: Ft2 inline · contrast: pass (46–50) · honest: pass (56) · chrome: pass (57) · tokens: pass (58) · mobile: pass (36, 59, 61–69) */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 */
@import url("./tokens.css");

* { box-sizing: border-box; }
html,
body { overflow-x: clip; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--color-paper);
  background:
    linear-gradient(var(--color-grid) var(--rule-hairline), var(--color-transparent) var(--rule-hairline)),
    linear-gradient(90deg, var(--color-grid) var(--rule-hairline), var(--color-transparent) var(--rule-hairline)),
    var(--color-ink);
  background-size: var(--space-xl) var(--space-xl);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select { font: inherit; }
button,
a,
input,
select { -webkit-tap-highlight-color: var(--color-transparent); }
a { color: inherit; }
button { color: inherit; }
button,
.source-button,
.lane-filter { white-space: nowrap; }
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline: var(--rule-focus) solid var(--color-accent);
  outline-offset: var(--space-3xs);
}
button:active,
.source-button:active { transform: translateY(var(--rule-hairline)); }
button:disabled,
input:disabled,
select:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}
::selection {
  color: var(--color-accent-ink);
  background: var(--color-accent);
}

.skip-link {
  position: fixed;
  inset-block-start: var(--space-2xs);
  inset-inline-start: var(--space-2xs);
  z-index: var(--z-skip);
  min-height: 44px;
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-accent-ink);
  background: var(--color-accent);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding-inline: var(--space-sm);
  border-block-end: var(--rule-hairline) solid var(--color-line);
  background: var(--color-surface-glass);
}
.identity,
.source-stamp,
.search-row,
.switch,
.panel-heading,
.queue-topline,
.detail-head,
.source-actions,
.map-key,
.map-key span,
.evidence-note,
footer,
.dialog-topline,
.dialog-actions {
  display: flex;
  align-items: center;
}
.identity { gap: var(--space-xs); }
.identity-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--color-detail-ink);
  background: var(--color-signal);
  font: 800 var(--text-body)/1 var(--font-data);
  letter-spacing: -0.08em;
  transform: skew(-5deg);
}
.identity div { display: grid; }
.identity strong {
  font: 800 1.125rem/1 var(--font-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.identity span:last-child {
  display: none;
  color: var(--color-muted);
  font: var(--text-label)/1.4 var(--font-data);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.source-stamp { gap: var(--space-2xs); }
.status-light {
  width: var(--space-2xs);
  height: var(--space-2xs);
  border-radius: 50%;
  background: var(--color-accent);
}
.source-stamp div { display: grid; gap: var(--space-3xs); }
.source-stamp span:not(.status-light) {
  display: none;
  color: var(--color-muted);
  font: var(--text-label)/1 var(--font-data);
  letter-spacing: 0.14em;
}
.source-stamp strong {
  font: var(--text-label)/1.2 var(--font-data);
  letter-spacing: 0.03em;
}

main {
  width: min(1500px, 100%);
  margin-inline: auto;
}
.hero {
  display: grid;
  gap: var(--space-lg);
  min-width: 0;
  padding: var(--space-xl) var(--space-sm) var(--space-2xl);
  border-block-end: var(--rule-hairline) solid var(--color-line);
}
.hero-copy,
.hero-aside { min-width: 0; }
.eyebrow,
.label {
  margin: 0 0 var(--space-xs);
  color: var(--color-signal);
  font: 700 var(--text-label)/1 var(--font-data);
  letter-spacing: 0.16em;
}
.hero h1,
.territory h2,
.evidence-note h2,
dialog h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}
.hero h1 {
  max-width: 14ch;
  margin: 0;
  font: 800 var(--text-display)/0.98 var(--font-display);
  letter-spacing: -0.035em;
}
.hero h1 em {
  color: var(--color-accent);
  font-style: normal;
}
.lede {
  max-width: 62ch;
  margin: var(--space-md) 0 0;
  color: var(--color-muted-bright);
  font-size: var(--text-lede);
}
.hero-aside {
  align-self: end;
  padding-block-start: var(--space-sm);
  border-block-start: var(--rule-focus) solid var(--color-signal);
}
.hero-aside p {
  max-width: 54ch;
  margin: 0 0 var(--space-sm);
  color: var(--color-muted-bright);
  font-size: var(--text-body);
}
.hero-aside .label {
  margin-block-end: var(--space-2xs);
  color: var(--color-paper);
}
.text-button {
  min-height: 44px;
  padding: 0;
  border: 0;
  color: var(--color-accent);
  background: var(--color-transparent);
  cursor: pointer;
  font: 700 var(--text-small)/1 var(--font-data);
  letter-spacing: 0.03em;
}
.text-button:hover { color: var(--color-paper-bright); }
.text-button.dark { color: var(--color-accent-deep); }
.text-button.dark:hover { color: var(--color-detail-ink); }

.metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block-end: var(--rule-hairline) solid var(--color-line);
}
.metrics article {
  position: relative;
  min-height: 100px;
  padding: var(--space-sm);
  border-inline-end: var(--rule-hairline) solid var(--color-line);
  border-block-end: var(--rule-hairline) solid var(--color-line);
}
.metrics article:nth-child(2n) { border-inline-end: 0; }
.metrics article:nth-last-child(-n + 2) { border-block-end: 0; }
.metrics strong {
  display: block;
  margin-block: var(--space-sm) 0;
  font: 700 clamp(2.5rem, 4.2vw, 3.75rem)/0.9 var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.metrics article > span:last-child {
  color: var(--color-muted);
  font: var(--text-label)/1.2 var(--font-data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.metric-index {
  position: absolute;
  inset-block-start: var(--space-xs);
  inset-inline-end: var(--space-xs);
  color: var(--color-line);
  font: var(--text-label)/1 var(--font-data);
}

.control-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-block-end: var(--rule-hairline) solid var(--color-line);
  background: var(--color-ink-soft);
}
.control-strip > * {
  min-height: 72px;
  padding: var(--space-sm);
  border-block-end: var(--rule-hairline) solid var(--color-line);
}
.control-strip > *:last-child { border-block-end: 0; }
.control-strip label > span:first-child,
.toggle-control > span,
.sort-control > span {
  display: block;
  margin-block-end: var(--space-2xs);
  color: var(--color-muted);
  font: var(--text-label)/1 var(--font-data);
  letter-spacing: 0.14em;
}
.search-row { gap: var(--space-xs); }
.search-row > span {
  color: var(--color-accent);
  font-size: 1.5rem;
  line-height: 1;
  transform: rotate(-15deg);
}
.search-row input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  outline: var(--rule-focus) solid var(--color-transparent);
  outline-offset: var(--rule-hairline);
  color: var(--color-paper-bright);
  background: var(--color-transparent);
  font-size: 1rem;
}
.search-row input:focus-visible { outline-color: var(--color-accent); }
.search-row input::placeholder { color: var(--color-muted); }
kbd {
  padding: var(--space-3xs) var(--space-2xs);
  border: var(--rule-hairline) solid var(--color-line);
  color: var(--color-muted);
  background: var(--color-ink);
  font: var(--text-small)/1 var(--font-data);
}
.toggle-control,
.sort-control {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.switch {
  min-height: 44px;
  gap: var(--space-2xs);
  cursor: pointer;
  font: 700 var(--text-small)/1 var(--font-data);
}
.switch input {
  position: absolute;
  opacity: 0;
}
.switch > span {
  width: 40px;
  height: 24px;
  padding: var(--space-3xs);
  border: var(--rule-hairline) solid var(--color-line);
  background: var(--color-ink-raised);
}
.switch > span::after {
  display: block;
  width: var(--space-sm);
  height: var(--space-sm);
  background: var(--color-muted);
  content: "";
  transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.switch input:checked + span {
  border-color: var(--color-signal);
  background: var(--color-surface-signal-soft);
}
.switch input:checked + span::after {
  background: var(--color-signal);
  transform: translateX(var(--space-sm));
}
.switch input:focus-visible + span {
  outline: var(--rule-focus) solid var(--color-accent);
  outline-offset: var(--space-3xs);
}
.sort-control select {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-md) 0 0;
  border: 0;
  outline: var(--rule-focus) solid var(--color-transparent);
  outline-offset: var(--rule-hairline);
  color: var(--color-paper);
  background: var(--color-transparent);
  font: 700 var(--text-small)/1 var(--font-data);
}
.sort-control select:focus-visible { outline-color: var(--color-accent); }
.export-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  color: var(--color-detail-ink);
  background: var(--color-signal);
  cursor: pointer;
  font: 800 var(--text-small)/1 var(--font-data);
  letter-spacing: 0.04em;
}
.export-button:hover { background: var(--color-signal-hover); }
.export-button span:last-child { font-size: 1.5rem; }

.lane-bar {
  display: flex;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-sm);
  overflow-x: auto;
  border-block-end: var(--rule-hairline) solid var(--color-line);
  scrollbar-width: thin;
}
.lane-filter {
  flex: 0 0 auto;
  min-height: 44px;
  padding: var(--space-2xs) var(--space-xs);
  border: var(--rule-hairline) solid var(--color-line-soft);
  color: var(--color-muted-bright);
  background: var(--color-transparent);
  cursor: pointer;
  font: var(--text-label)/1 var(--font-data);
}
.lane-filter span {
  margin-inline-start: var(--space-2xs);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.lane-filter:hover {
  border-color: var(--color-accent);
  color: var(--color-paper-bright);
}
.lane-filter.active {
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
  background: var(--color-accent);
}
.lane-filter.active span { color: var(--color-accent-deep); }

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 760px;
  border-block-end: var(--rule-hairline) solid var(--color-line);
}
.queue-panel { min-width: 0; }
.panel-heading {
  justify-content: space-between;
  min-height: 96px;
  padding: var(--space-md) var(--space-sm);
  border-block-end: var(--rule-hairline) solid var(--color-line);
}
.panel-heading .eyebrow { margin-block-end: var(--space-2xs); }
.panel-heading h2 {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font: 700 var(--text-panel)/1 var(--font-display);
  letter-spacing: -0.02em;
}
.verified-key {
  display: none;
  color: var(--color-muted);
  font: var(--text-label)/1 var(--font-data);
  text-transform: uppercase;
}
.verified-key i {
  color: var(--color-accent);
  font-style: normal;
}
.queue {
  max-height: 44rem;
  overflow-y: auto;
}
.queue-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 20px;
  gap: var(--space-2xs);
  align-items: center;
  width: 100%;
  min-height: 124px;
  padding: var(--space-sm) var(--space-xs);
  border: 0;
  border-block-end: var(--rule-hairline) solid var(--color-line-soft);
  text-align: start;
  background: var(--color-transparent);
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out);
}
.queue-item:hover { background: var(--color-ink-hover); }
.queue-item.selected {
  background: var(--color-ink-raised);
  box-shadow: inset 0 0 0 var(--rule-hairline) var(--color-signal);
}
.queue-item:focus-visible {
  position: relative;
  z-index: var(--z-raised);
  outline-offset: calc(var(--rule-focus) * -1);
}
.queue-rank {
  align-self: start;
  color: var(--color-muted);
  font: var(--text-label)/1 var(--font-data);
  font-variant-numeric: tabular-nums;
}
.queue-copy {
  display: grid;
  gap: var(--space-3xs);
  min-width: 0;
}
.queue-topline {
  gap: var(--space-2xs);
  color: var(--color-muted);
  font: var(--text-label)/1 var(--font-data);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}
.queue-copy > strong {
  overflow: hidden;
  color: var(--color-paper);
  font: 700 1.375rem/1.05 var(--font-display);
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.queue-copy > span:not(.queue-topline, .lane-name) {
  color: var(--color-muted-bright);
  font-size: var(--text-small);
}
.lane-name {
  color: var(--color-accent);
  font: var(--text-label)/1.3 var(--font-data);
}
.queue-standard { display: none; }
.queue-arrow {
  color: var(--color-muted);
  font-size: 1.25rem;
}
.queue-item.selected .queue-arrow { color: var(--color-signal); }
.severity {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 24px;
  padding-inline: var(--space-2xs);
  color: var(--color-muted-bright);
  background: var(--color-line-soft);
  font: 800 var(--text-label)/1 var(--font-data);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.severity-high {
  color: var(--color-accent-ink);
  background: var(--color-warning);
}
.empty-state,
.detail-empty {
  display: grid;
  place-content: center;
  gap: var(--space-2xs);
  min-height: 340px;
  padding: var(--space-lg);
  text-align: center;
}
.empty-state span,
.detail-empty { color: var(--color-muted); }

.detail-panel {
  min-width: 0;
  border-block-start: var(--space-3xs) solid var(--color-signal);
  color: var(--color-detail-ink);
  background: var(--color-paper-bright);
}
.detail-head {
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 148px;
  padding: var(--space-lg) var(--space-sm);
  border-block-end: var(--rule-hairline) solid var(--color-line-paper);
}
.detail-head > div { min-width: 0; }
.detail-head .eyebrow { margin-block-end: var(--space-xs); }
.detail-head h2 {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font: 800 clamp(2.25rem, 3.8vw, 3.5rem)/0.98 var(--font-display);
  letter-spacing: -0.025em;
}
.detail-head p {
  margin: var(--space-xs) 0 0;
  color: var(--color-detail-body);
  font: var(--text-small)/1.4 var(--font-data);
}
.source-status-box {
  margin: var(--space-md) var(--space-sm);
  padding: var(--space-sm);
  border: var(--rule-hairline) solid var(--color-line-paper);
  background: var(--color-paper-deep);
}
.source-status-box div { display: grid; gap: var(--space-3xs); }
.source-status-box div > span {
  color: var(--color-detail-muted);
  font: var(--text-label)/1 var(--font-data);
  letter-spacing: 0.12em;
}
.source-status-box strong { font-size: var(--text-body); }
.source-status-box p {
  max-width: 68ch;
  margin: 0;
  color: var(--color-detail-body);
  font-size: var(--text-small);
}
.detail-section {
  margin-inline: var(--space-sm);
  padding-block: var(--space-md);
  border-block-start: var(--rule-hairline) solid var(--color-line-paper);
}
.section-label {
  margin-block-end: var(--space-sm);
  color: var(--color-detail-body);
  font: 800 var(--text-label)/1 var(--font-data);
  letter-spacing: 0.11em;
}
.detail-section h3 {
  min-width: 0;
  margin: 0 0 var(--space-2xs);
  overflow-wrap: anywhere;
  font: 800 1.75rem/1 var(--font-display);
}
.detail-section > p {
  max-width: 68ch;
  margin: 0;
  color: var(--color-detail-body);
  font-size: var(--text-body);
}
.mapping-basis {
  width: max-content;
  max-width: 100%;
  margin-block-start: var(--space-sm);
  padding: var(--space-2xs);
  border: var(--rule-hairline) solid var(--color-line-paper);
  color: var(--color-detail-body);
  background: var(--color-paper-deep);
  font: var(--text-label)/1.3 var(--font-data);
}
.facts-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-block-start: var(--rule-hairline) solid var(--color-line-paper);
  border-inline-start: var(--rule-hairline) solid var(--color-line-paper);
}
.fact {
  display: grid;
  gap: var(--space-3xs);
  min-height: 72px;
  padding: var(--space-xs) var(--space-sm);
  border-inline-end: var(--rule-hairline) solid var(--color-line-paper);
  border-block-end: var(--rule-hairline) solid var(--color-line-paper);
}
.fact span {
  color: var(--color-detail-muted);
  font: var(--text-label)/1.2 var(--font-data);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fact strong {
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
}
.penalty-note {
  margin-block-start: var(--space-xs) !important;
  font-size: var(--text-label) !important;
}
.source-section { padding-block-end: var(--space-xl); }
.source-actions {
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-block-start: var(--space-sm);
}
.source-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  min-height: 44px;
  padding: var(--space-2xs) var(--space-xs);
  border: var(--rule-hairline) solid var(--color-detail-muted);
  color: var(--color-detail-ink);
  background: var(--color-transparent);
  cursor: pointer;
  font: 800 var(--text-label)/1 var(--font-data);
  text-decoration: none;
}
.source-button:hover {
  border-color: var(--color-detail-ink);
  background: var(--color-paper);
}
.source-button.primary {
  border-color: var(--color-detail-ink);
  color: var(--color-paper);
  background: var(--color-detail-ink);
}
.source-button.primary:hover { background: var(--color-ink-raised); }

.territory {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-block-end: var(--rule-hairline) solid var(--color-line);
}
.territory-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-xl) var(--space-sm);
  border-block-end: var(--rule-hairline) solid var(--color-line);
}
.territory h2 {
  max-width: 13ch;
  margin: 0;
  font: 800 var(--text-section)/0.98 var(--font-display);
  letter-spacing: -0.03em;
}
.territory-copy > p:last-child {
  max-width: 60ch;
  margin-block-start: var(--space-md);
  color: var(--color-muted-bright);
  font-size: var(--text-body);
}
.map-shell {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  background: var(--color-ink-soft);
}
.map-key {
  position: absolute;
  inset-block-start: var(--space-sm);
  inset-inline-start: var(--space-sm);
  z-index: var(--z-raised);
  gap: var(--space-sm);
  color: var(--color-muted-bright);
  font: var(--text-label)/1 var(--font-data);
  text-transform: uppercase;
}
.map-key span { gap: var(--space-2xs); }
.map-dot {
  display: inline-block;
  width: var(--space-2xs);
  height: var(--space-2xs);
  border-radius: 50%;
  background: var(--color-accent);
}
.map-dot.ss { background: var(--color-warning); }
#territory-map {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
}
.state-outline {
  fill: var(--color-surface-accent-soft);
  stroke: var(--color-muted);
  stroke-width: 1.3;
}
.state-grid {
  fill: none;
  stroke: var(--color-accent-deep);
  stroke-width: 1;
  stroke-dasharray: 2 8;
}
.map-label {
  fill: var(--color-line);
  font: 800 2.375rem/1 var(--font-display);
  letter-spacing: 0.16em;
  text-anchor: middle;
}
.map-point { cursor: pointer; }
.map-point circle:first-child {
  fill: var(--color-ink-raised);
  stroke: var(--color-accent);
  stroke-width: 1.5;
  transition: r var(--dur-short) var(--ease-out), fill var(--dur-short) var(--ease-out);
}
.map-point circle:last-child { fill: var(--color-accent); }
.map-point.ss circle:first-child {
  fill: var(--color-warning-surface);
  stroke: var(--color-warning);
}
.map-point.ss circle:last-child { fill: var(--color-warning); }
.map-point:hover circle:first-child,
.map-point:focus circle:first-child {
  r: 11px;
  fill: var(--color-accent-deep);
}
.map-point:focus { outline: none; }
.map-point:focus circle:first-child { stroke-width: 3; }

.evidence-note {
  align-items: flex-start;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-xl) var(--space-sm);
  color: var(--color-accent-ink);
  background: var(--color-accent);
}
.evidence-note h2 {
  max-width: 18ch;
  margin: 0;
  font: 800 var(--text-section)/0.98 var(--font-display);
  letter-spacing: -0.03em;
}
.evidence-note p {
  max-width: 70ch;
  margin: 0;
  color: var(--color-accent-deep);
  font-size: var(--text-body);
}

footer {
  align-items: flex-start;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 136px;
  padding: var(--space-lg) var(--space-sm);
  color: var(--color-muted);
  background: var(--color-ink-soft);
}
footer p {
  max-width: 60ch;
  margin: 0;
  font-size: var(--text-small);
}
footer > a {
  min-height: 44px;
  color: var(--color-accent);
  font: var(--text-label)/44px var(--font-data);
}
.footer-identity { color: var(--color-paper); }

dialog {
  width: min(650px, calc(100% - var(--space-lg)));
  padding: 0 var(--space-md) var(--space-lg);
  border: var(--rule-hairline) solid var(--color-muted);
  color: var(--color-paper);
  background: var(--color-ink-soft);
  box-shadow: var(--space-sm) var(--space-sm) 0 var(--color-shadow);
}
dialog::backdrop {
  background: var(--color-backdrop);
  backdrop-filter: blur(var(--space-3xs));
}
.dialog-topline {
  justify-content: space-between;
  padding-block: var(--space-sm);
  border-block-end: var(--rule-hairline) solid var(--color-line);
  color: var(--color-signal);
  font: var(--text-label)/1 var(--font-data);
  letter-spacing: 0.12em;
}
.dialog-topline button {
  width: 44px;
  min-height: 44px;
  border: 0;
  color: var(--color-paper);
  background: var(--color-transparent);
  cursor: pointer;
  font-size: 1.75rem;
}
dialog h2 {
  margin: var(--space-lg) 0 var(--space-sm);
  font: 800 2.5rem/1 var(--font-display);
}
dialog p {
  max-width: 68ch;
  color: var(--color-muted-bright);
  font-size: var(--text-body);
}
dialog p strong { color: var(--color-paper-bright); }
.dialog-actions {
  align-items: stretch;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-block-start: var(--space-md);
}
dialog .source-button {
  border-color: var(--color-muted);
  color: var(--color-paper);
}
dialog .source-button.primary {
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
  background: var(--color-accent);
}
.toast {
  position: fixed;
  inset-inline: var(--space-sm);
  inset-block-end: var(--space-sm);
  z-index: var(--z-toast);
  min-height: 44px;
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-accent-ink);
  background: var(--color-accent);
  box-shadow: var(--space-2xs) var(--space-2xs) 0 var(--color-shadow);
  font: 800 var(--text-label)/1.4 var(--font-data);
  opacity: 0;
  pointer-events: none;
  transform: translateY(var(--space-sm));
  transition: opacity var(--dur-medium) var(--ease-out), transform var(--dur-medium) var(--ease-out);
}
.toast.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 40rem) {
  .masthead { padding-inline: var(--space-lg); }
  .identity span:last-child,
  .source-stamp span:not(.status-light) { display: block; }
  .hero { padding-inline: var(--space-lg); }
  .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .metrics article { border-block-end: 0; }
  .metrics article:nth-child(2) { border-inline-end: var(--rule-hairline) solid var(--color-line); }
  .metrics article:last-child { border-inline-end: 0; }
  .control-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .control-strip > * { border-inline-end: var(--rule-hairline) solid var(--color-line); }
  .control-strip > *:nth-child(2n) { border-inline-end: 0; }
  .control-strip > *:nth-last-child(-n + 2) { border-block-end: 0; }
  .lane-bar { padding-inline: var(--space-lg); }
  .panel-heading { padding-inline: var(--space-md); }
  .verified-key { display: inline; }
  .queue-item {
    grid-template-columns: 32px minmax(0, 1fr) 84px 24px;
    gap: var(--space-xs);
    padding-inline: var(--space-md);
  }
  .queue-standard {
    display: block;
    color: var(--color-muted);
    font: var(--text-label)/1.4 var(--font-data);
    letter-spacing: 0.08em;
    text-align: end;
  }
  .queue-standard strong {
    color: var(--color-paper-deep);
    font-size: var(--text-small);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
  }
  .detail-head,
  .source-status-box,
  .detail-section { margin-inline: var(--space-lg); }
  .detail-head {
    margin-inline: 0;
    padding-inline: var(--space-lg);
  }
  .facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .source-button { width: auto; }
  .territory-copy,
  .evidence-note { padding-inline: var(--space-lg); }
  .evidence-note {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    align-items: end;
  }
  .evidence-note .text-button { grid-column: 2; justify-self: start; }
  footer {
    padding-inline: var(--space-lg);
  }
  .dialog-actions {
    align-items: center;
    flex-direction: row;
  }
  .toast {
    inset-inline: auto var(--space-md);
    width: max-content;
  }
}

@media (min-width: 60rem) {
  .masthead { min-height: 72px; padding-inline: var(--space-2xl); }
  .hero {
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.55fr);
    gap: var(--space-2xl);
    align-items: end;
    padding: var(--space-xl) var(--space-2xl) var(--space-2xl);
  }
  .metrics article { padding-inline: var(--space-md); }
  .control-strip { grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.65fr) minmax(0, 0.8fr) minmax(0, 0.5fr); }
  .control-strip > * {
    border-inline-end: var(--rule-hairline) solid var(--color-line);
    border-block-end: 0;
  }
  .control-strip > *:nth-child(2n) { border-inline-end: var(--rule-hairline) solid var(--color-line); }
  .control-strip > *:last-child { border-inline-end: 0; }
  .workspace { grid-template-columns: minmax(420px, 0.88fr) minmax(520px, 1.12fr); }
  .queue-panel { border-inline-end: var(--rule-hairline) solid var(--color-line); }
  .queue { max-height: 64rem; }
  .detail-panel {
    border-block-start: 0;
    border-inline-start: var(--space-3xs) solid var(--color-signal);
  }
  .territory { grid-template-columns: minmax(300px, 0.62fr) minmax(0, 1.38fr); }
  .territory-copy {
    padding-inline: var(--space-2xl);
    border-inline-end: var(--rule-hairline) solid var(--color-line);
    border-block-end: 0;
  }
  .map-shell,
  #territory-map { min-height: 520px; }
  .evidence-note { padding-inline: var(--space-2xl); }
  footer {
    align-items: center;
    flex-direction: row;
    padding-inline: var(--space-2xl);
  }
}

@media (hover: hover) and (pointer: fine) {
  .queue-item:hover,
  .lane-filter:hover,
  .source-button:hover,
  .text-button:hover,
  .export-button:hover { cursor: pointer; }
}

@media (pointer: coarse) {
  button,
  a,
  input,
  select { min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition-duration: var(--dur-short) !important;
    animation-duration: var(--dur-short) !important;
    animation-iteration-count: 1 !important;
  }
}