:root {
  color-scheme: dark;
  --bg: #071018;
  --panel: #0e1a24;
  --panel-2: #122331;
  --line: rgba(140, 177, 204, 0.18);
  --line-strong: rgba(140, 177, 204, 0.32);
  --text: #f1f7fb;
  --muted: #91a7b7;
  --soft: #c6d4de;
  --accent: #48a5ff;
  --accent-2: #77baff;
  /* Change type: categorical hues. */
  --changed: #f5b942;
  --added: #45cf83;
  --deleted: #ff6259;
  --unverified: #a99be0;
  /* Magnitude: one blue hue, brighter means more drift. Deliberately not the
     change-type hues, so a "high" bar can never read as "deleted". */
  --heat-none: #1f3343;
  --heat-low: #24527a;
  --heat-guarded: #2f78b5;
  --heat-elevated: #5aa7ea;
  --heat-high: #bfe0ff;
  --radius: 12px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  margin: 0;
  background:
    radial-gradient(circle at 10% 0%, rgba(49, 118, 170, 0.16), transparent 34rem),
    linear-gradient(180deg, #09131c, var(--bg));
  color: var(--text);
}

button, input, select { font: inherit; }

.hidden, [hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.drift-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 68px;
  padding: 12px max(24px, calc((100vw - 1480px) / 2));
  border-bottom: 1px solid var(--line);
  background: rgba(7, 16, 24, 0.9);
  backdrop-filter: blur(18px);
}

.drift-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  text-decoration: none;
}

.drift-brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(72, 165, 255, 0.5);
  border-radius: 10px;
  background: linear-gradient(145deg, #247bce, #174873);
  box-shadow: 0 8px 30px rgba(37, 128, 211, 0.22);
  font-size: 0.76rem;
  font-weight: 850;
}

.drift-brand strong, .drift-brand small { display: block; }
.drift-brand small { margin-top: 2px; color: var(--muted); font-size: 0.68rem; }

.drift-header nav { display: flex; gap: 6px; }
.drift-header nav a {
  padding: 8px 10px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 650;
  text-decoration: none;
}
.drift-header nav a:hover, .drift-header nav a:focus-visible { background: var(--panel-2); color: var(--text); }

.drift-shell { width: min(1480px, calc(100vw - 40px)); margin: 0 auto; padding: 32px 0 56px; }

.drift-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.eyebrow {
  color: var(--accent-2);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1, h2, p { margin: 0; }
.drift-hero h1 { margin-top: 4px; font-size: clamp(2rem, 4vw, 3.6rem); letter-spacing: -0.055em; }
.drift-hero p { max-width: 720px; margin-top: 9px; color: var(--muted); line-height: 1.55; }

.view-switch {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(12, 25, 35, 0.86);
}

.view-switch-button, .change-tabs button {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.view-switch-button { min-height: 38px; padding: 8px 14px; border-radius: 7px; font-weight: 700; }
.view-switch-button.active { background: #1d67a3; color: white; box-shadow: 0 5px 16px rgba(22, 91, 148, 0.32); }

.drift-notice {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(72, 165, 255, 0.4);
  border-radius: 9px;
  background: rgba(72, 165, 255, 0.08);
  color: #cfe6ff;
  font-size: 0.82rem;
}

.drift-alert {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 98, 89, 0.4);
  border-radius: 9px;
  background: rgba(255, 98, 89, 0.1);
  color: #ffd2cf;
  font-size: 0.82rem;
}

.analysis-view { display: grid; gap: 16px; }

.analysis-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(19, 37, 51, 0.92), rgba(11, 23, 32, 0.96));
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.2);
}

.single-context-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 20px;
}

.single-context-card h2, .fleet-scope-card h2 { margin-top: 4px; font-size: 1.2rem; }
.single-context-card p, .fleet-scope-card p { margin-top: 5px; color: var(--muted); font-size: 0.8rem; }

.analysis-controls { display: flex; align-items: flex-end; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
label { display: grid; gap: 6px; color: var(--muted); font-size: 0.69rem; font-weight: 700; }

select, input[type="date"], input[type="search"] {
  min-height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  outline: none;
  background: #09151e;
  color: var(--text);
}
select { min-width: 158px; padding: 7px 34px 7px 10px; }
input[type="date"], input[type="search"] { padding: 8px 10px; }
select:focus, input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(72, 165, 255, 0.12); }

.button {
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--panel-2);
  color: var(--text);
  font-weight: 750;
  cursor: pointer;
}
.button:hover:not(:disabled), .button:focus-visible { border-color: rgba(72, 165, 255, 0.7); }
.button.primary { border-color: #2f8fdc; background: #2378ba; }
.button.ghost { background: transparent; color: var(--soft); }
.button:disabled { cursor: not-allowed; opacity: 0.45; }
.button.wide { width: 100%; }

.timeline-card, .comparison-summary-card, .change-table-card, .fleet-timeline-card, .correlation-card { padding: 18px 20px; }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.card-heading h2 { font-size: 1rem; }
.card-heading p { margin-top: 5px; color: var(--muted); font-size: 0.75rem; line-height: 1.5; }

.timeline-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 16px 0 8px; color: var(--muted); font-size: 0.68rem; }
.timeline-legend span { display: inline-flex; align-items: center; gap: 6px; }
.timeline-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; }
.timeline-legend .legend-separator { width: 1px; height: 18px; background: var(--line-strong); }
.heat.none { background: var(--heat-none); }
.heat.low { background: var(--heat-low); }
.heat.guarded { background: var(--heat-guarded); }
.heat.elevated { background: var(--heat-elevated); }
.heat.high { background: var(--heat-high); }
.type.changed { background: var(--changed); }
.type.added { background: var(--added); }
.type.deleted { background: var(--deleted); }
.type.unverified { background: var(--unverified); }
.timeline-legend .legend-title { color: var(--soft); font-weight: 700; }

.timeline-stage { min-height: 148px; overflow: hidden; border-radius: 8px; background: rgba(4, 12, 18, 0.55); }
.timeline-stage svg, .machine-timeline svg { display: block; width: 100%; touch-action: none; user-select: none; }
.timeline-instruction { margin-top: 7px; color: #6f8797; font-size: 0.65rem; }
.timeline-empty, .table-empty { display: grid; min-height: 120px; place-items: center; color: var(--muted); font-size: 0.8rem; text-align: center; }
.drift-axis-line { stroke: rgba(156, 187, 208, 0.22); stroke-width: 1; }
.drift-axis-text { fill: #7690a2; font-size: 11px; }
.drift-segment { cursor: pointer; }
.drift-segment .main { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; }
.drift-segment:hover .main { stroke: #fff; stroke-width: 1.5; filter: brightness(1.16); }
.drift-segment:focus { outline: none; }
.drift-segment:focus-visible .main { stroke: #ffffff; stroke-width: 3; }
.drift-band-none { fill: var(--heat-none); }
.drift-band-low { fill: var(--heat-low); }
.drift-band-guarded { fill: var(--heat-guarded); }
.drift-band-elevated { fill: var(--heat-elevated); }
.drift-band-high { fill: var(--heat-high); }
.drift-type-changed { fill: var(--changed); }
.drift-type-added { fill: var(--added); }
.drift-type-deleted { fill: var(--deleted); }
.drift-type-unverified { fill: var(--unverified); }
.zoom-selection { fill: rgba(72, 165, 255, 0.16); stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 3; }

.comparison-panel { display: grid; gap: 16px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.metric-card { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: rgba(5, 15, 22, 0.48); }
.metric-card .metric-label { color: var(--muted); font-size: 0.68rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.06em; }
.metric-card strong { display: block; margin-top: 6px; font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.metric-card .metric-description { display: block; margin-top: 8px; color: #7893a5; font-size: 0.7rem; line-height: 1.4; }
.metric-card.changed strong { color: var(--changed); }
.metric-card.added strong { color: var(--added); }
.metric-card.deleted strong { color: var(--deleted); }
.metric-card.unverified strong { color: var(--unverified); }
.comparison-provenance, .semantics-note { color: var(--muted); font-size: 0.72rem; line-height: 1.5; }
.comparison-provenance { margin-top: 12px; }

.change-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.change-tabs { display: inline-flex; gap: 4px; }
.change-tabs button { padding: 8px 11px; border-radius: 7px; font-size: 0.75rem; font-weight: 750; }
.change-tabs button.active { background: rgba(72, 165, 255, 0.15); color: var(--accent-2); }
.search-field input { width: min(320px, 50vw); }
.semantics-note { margin: 10px 0; padding: 9px 11px; border-left: 3px solid var(--accent); background: rgba(72, 165, 255, 0.06); }

.change-table-shell { overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.change-table { width: 100%; border-collapse: collapse; font-size: 0.72rem; }
.change-table th { position: sticky; top: 0; z-index: 1; padding: 10px 11px; background: #122330; color: var(--muted); text-align: left; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.06em; }
.change-table td { max-width: 460px; padding: 10px 11px; border-top: 1px solid var(--line); color: var(--soft); vertical-align: top; }
.change-table code { color: #a8c6d8; font: 0.68rem "JetBrains Mono", Consolas, monospace; overflow-wrap: anywhere; }
.change-path { color: var(--text); font: 0.7rem "JetBrains Mono", Consolas, monospace; overflow-wrap: anywhere; }
.change-pill { display: inline-flex; padding: 3px 7px; border-radius: 999px; font-size: 0.62rem; font-weight: 800; text-transform: uppercase; }
.change-pill.changed { background: rgba(245, 185, 66, 0.13); color: #ffd37a; }
.change-pill.added { background: rgba(69, 207, 131, 0.13); color: #7ce5aa; }
.change-pill.deleted { background: rgba(255, 98, 89, 0.13); color: #ff9b95; }
.change-pill.unverified { background: rgba(169, 155, 224, 0.15); color: #cdc3f2; }
.table-pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; color: var(--muted); font-size: 0.7rem; }
.table-pager button { min-width: 34px; min-height: 32px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--soft); cursor: pointer; }

.fleet-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.fleet-scope-card { position: sticky; top: 84px; display: grid; gap: 12px; max-height: calc(100vh - 108px); padding: 18px; overflow: auto; }
.scope-heading { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; color: var(--soft); font-size: 0.72rem; }
.scope-heading button { border: 0; background: transparent; color: var(--accent-2); font-size: 0.68rem; cursor: pointer; }
.scope-list { display: grid; gap: 5px; }
.scope-list.machine-list { max-height: 260px; overflow: auto; }
.scope-option { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; padding: 7px 8px; border: 1px solid transparent; border-radius: 7px; color: var(--soft); font-size: 0.72rem; cursor: pointer; }
.scope-option:hover { border-color: var(--line); background: rgba(72, 165, 255, 0.05); }
.scope-option input { accent-color: var(--accent); }
.scope-option small { display: block; margin-top: 2px; color: var(--muted); font-size: 0.63rem; }
.date-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.date-grid input { min-width: 0; width: 100%; }
#fleet-selection-summary { color: var(--muted); line-height: 1.45; text-align: center; }
.fleet-results { min-width: 0; }
.fleet-empty { display: grid; min-height: 340px; padding: 40px; place-items: center; text-align: center; }
.fleet-empty h2 { font-size: 1.25rem; }
.fleet-empty p { max-width: 650px; margin-top: 10px; color: var(--muted); line-height: 1.6; }
.fleet-results-content { display: grid; gap: 16px; }
.fleet-metrics { margin-top: 0; }
.machine-timeline-row { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr) 110px; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.machine-timeline-row:first-child { margin-top: 12px; border-top: 0; }
.machine-name { min-width: 0; }
.machine-name strong, .machine-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.machine-name strong { font-size: 0.76rem; }
.machine-name small { margin-top: 3px; color: var(--muted); font-size: 0.63rem; }
.machine-timeline { min-width: 0; border-radius: 5px; background: rgba(4, 12, 18, 0.52); overflow: hidden; }
.machine-total { color: var(--soft); font-size: 0.7rem; text-align: right; font-variant-numeric: tabular-nums; }
.fleet-axis { display: flex; justify-content: space-between; margin: 6px 122px 0 232px; color: var(--muted); font-size: 0.62rem; }
.correlation-list { display: grid; gap: 8px; margin-top: 14px; }
.correlation-section { margin-top: 18px; }
.correlation-section h3 { margin: 0; color: var(--soft); font-size: 0.76rem; }
.correlation-event { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 8px; background: rgba(5, 15, 22, 0.46); }
.correlation-event strong, .correlation-event code { display: block; }
.correlation-event strong { overflow-wrap: anywhere; font-size: 0.75rem; }
.correlation-event code { margin-top: 5px; color: var(--muted); font: 0.64rem "JetBrains Mono", Consolas, monospace; overflow-wrap: anywhere; }
.correlation-count { align-self: center; color: var(--accent-2); font-size: 0.78rem; font-weight: 850; white-space: nowrap; }
.machine-difference-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; margin-top: 12px; }
.machine-difference-list > div { padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: rgba(5, 15, 22, 0.32); }
.machine-difference-list strong, .machine-difference-list span { display: block; }
.machine-difference-list strong { overflow: hidden; text-overflow: ellipsis; font-size: 0.72rem; white-space: nowrap; }
.machine-difference-list span { margin-top: 4px; color: var(--muted); font-size: 0.64rem; }

@media (max-width: 1040px) {
  .single-context-card { align-items: flex-start; flex-direction: column; }
  .analysis-controls { justify-content: flex-start; }
  .fleet-layout { grid-template-columns: minmax(0, 1fr); }
  .fleet-scope-card { position: static; max-height: none; }
}

@media (max-width: 760px) {
  .drift-header { align-items: flex-start; flex-direction: column; padding: 12px 18px; }
  .drift-shell { width: min(100% - 24px, 1480px); padding-top: 22px; }
  .drift-hero { align-items: flex-start; flex-direction: column; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analysis-controls { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analysis-controls label, .analysis-controls select { width: 100%; min-width: 0; }
  .change-toolbar { align-items: stretch; flex-direction: column; }
  .search-field input { width: 100%; }
  .machine-timeline-row { grid-template-columns: minmax(110px, 160px) minmax(0, 1fr); }
  .machine-total { grid-column: 2; }
  .fleet-axis { margin-left: 172px; margin-right: 0; }
}

@media (max-width: 500px) {
  .analysis-controls, .metric-grid { grid-template-columns: minmax(0, 1fr); }
  .view-switch { width: 100%; }
  .view-switch-button { flex: 1; }
  .timeline-card, .comparison-summary-card, .change-table-card, .fleet-timeline-card, .correlation-card { padding: 15px; }
  .change-tabs { overflow-x: auto; }
  .machine-timeline-row { grid-template-columns: minmax(0, 1fr); }
  .machine-total { grid-column: 1; text-align: left; }
  .fleet-axis { margin-left: 0; }
}