/* Skynet — dark, precise operations console. */

.route-generator-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.25rem; }
.route-generator-heading h1 { margin-bottom: 0.5rem; }
.route-generator-heading .hint { max-width: 45rem; margin: 0; }
.eyebrow { margin: 0 0 0.45rem; color: var(--accent); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; }
.route-generator-total { min-width: 8rem; padding: 1rem 1.2rem; background: var(--accent-soft); border: 1px solid var(--hairline-strong); border-radius: var(--radius); }
.route-generator-total strong { display: block; font-family: var(--font-mono); font-size: 2rem; color: var(--ink); }.route-generator-total span { color: var(--ink-soft); font-size: 0.75rem; }
.route-generator-layout { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1.25rem; align-items: start; }.section-title-row { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }.section-title-row h2, .route-generator-summary h2 { margin: 0; }.market-bulk-controls { display: grid; grid-template-columns: minmax(0, 1fr) 14.5rem; gap: .6rem 1rem; align-items: end; margin-top: 1rem; }.market-bulk-selection { display: flex; flex-wrap: wrap; gap: .55rem; align-self: end; }.coverage-control > span { display: block; margin: 0 0 .2rem .1rem; color: var(--ink-soft); font: 700 .62rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.journey-controls h2 { margin: 0 0 1rem; }.journey-control-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }.journey-control-grid fieldset { min-width: 0; margin: 0; }.journey-control-grid .checkbox { display: block; margin: 0 0 .55rem; }.journey-control-grid .hint { margin: .35rem 0 0; }.journey-control-grid .season-options { margin-top: .7rem; }
.market-generator-list { margin-top: 1rem; border-top: 1px solid var(--hairline); }.market-generator-row { display: grid; grid-template-columns: minmax(0, 1fr) 14.5rem; align-items: center; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--hairline); }.market-generator-toggle { display: flex; align-items: center; gap: 0.7rem; margin: 0; color: var(--ink); cursor: pointer; }.market-generator-toggle input { width: auto; accent-color: var(--accent); }.market-generator-toggle strong, .market-generator-toggle small { display: block; }.market-generator-toggle small { margin-top: 0.22rem; color: var(--ink-soft); font-family: var(--font-mono); font-size: 0.72rem; }
.coverage-slider { width: 14.5rem; padding: .45rem .6rem .35rem; border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); background: var(--bg-elevated); }.coverage-slider input[type="range"] { display: block; width: 100%; height: .95rem; margin: 0; padding: 0; accent-color: var(--accent); cursor: pointer; }.coverage-slider input[type="range"]:disabled { cursor: not-allowed; opacity: .4; }.coverage-slider-labels { display: flex; justify-content: space-between; margin-top: .2rem; }.coverage-slider-labels span { color: var(--ink-faint); font: 700 .62rem var(--font-mono); letter-spacing: .04em; text-align: center; transition: color .15s var(--ease); }.coverage-slider-labels span.is-active { color: var(--accent); }
.coverage-slider--bulk { width: 11rem; padding-block: .3rem; }.coverage-slider--bulk .coverage-slider-labels { margin-top: 0; }.coverage-slider--bulk .coverage-slider-labels span { font-size: .58rem; }
.market-generator-list.is-global-depth .market-generator-row .coverage-slider:not(.coverage-slider--bulk) { display: none; }
.season-all { margin: 0; white-space: nowrap; }.season-options { display: grid; gap: .55rem; margin-top: 1rem; }.season-options .checkbox { margin: 0; }.season-options input:disabled { opacity: .45; }
.switch-control { position: relative; width: 2.7rem; height: 1.45rem; margin: 0; }.switch-control input { opacity: 0; }.switch-control span { position: absolute; inset: 0; border-radius: 2rem; background: var(--ink-faint); cursor: pointer; }.switch-control span::after { content: ""; position: absolute; width: 1rem; height: 1rem; top: .22rem; left: .22rem; border-radius: 50%; background: white; transition: transform .15s var(--ease); }.switch-control input:checked + span { background: var(--success); }.switch-control input:checked + span::after { transform: translateX(1.25rem); }
.route-generator-layout .card.is-disabled { opacity: .46; }.route-generator-layout .card.is-disabled .switch-control span { cursor: not-allowed; }
.custom-market-fields { display: grid; grid-template-columns: 1fr 1fr 8rem; gap: 0.75rem; }.route-generator-summary { position: sticky; top: 1.25rem; }.route-generator-preview { display: grid; gap: 0.35rem; max-height: 19rem; overflow: auto; padding: 0.8rem 0; margin: 1rem 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }.route-generator-preview span { font-family: var(--font-mono); color: var(--ink-soft); font-size: 0.72rem; }.route-generator-summary button { width: 100%; }.generated-route-notice { display: grid; gap: .35rem; margin: .25rem 0 1rem; padding: .9rem 1rem; border: 1px solid var(--success); border-radius: var(--radius-sm); background: var(--success-soft); }.generated-route-notice strong { color: var(--success); }.generated-route-notice span { color: var(--ink-soft); font-family: var(--font-mono); font-size: .78rem; }.generated-route-notice .generated-route-edit { width: fit-content; padding: .4rem .75rem; font-size: .78rem; }
.generated-route-generate { width: fit-content; margin: -.3rem 0 .75rem; padding: .4rem .75rem; font-size: .8rem; }
.non-us-confirm { display: grid; align-content: start; gap: .35rem; padding-top: 1.55rem; }.non-us-confirm button { width: fit-content; }.non-us-confirm small { color: var(--ink-soft); font-size: .7rem; }
.non-us-origin-list { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .8rem; }.non-us-origin-list span { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .45rem .35rem .6rem; border: 1px solid var(--success); border-radius: 999px; background: var(--success-soft); color: var(--ink); font: .74rem var(--font-mono); }.non-us-origin-list button { width: 1.15rem; height: 1.15rem; padding: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); font-size: 1rem; line-height: 1; }.non-us-origin-list button:hover { color: var(--danger); background: transparent; }
@media (max-width: 760px) { .route-generator-heading, .route-generator-layout, .journey-control-grid { display: grid; grid-template-columns: 1fr; }.route-generator-total { display: none; }.route-generator-summary { position: static; }.custom-market-fields, .market-bulk-controls, .market-generator-row { grid-template-columns: 1fr; }.market-bulk-selection { order: 1; }.coverage-control { order: 2; }.market-generator-row { align-items: start; }.coverage-slider { width: min(100%, 14.5rem); }.market-generator-row select { flex: 0 0 auto; } }

:root {
  /* Availability-grid fare types, ordered by commercial value. SR keeps the
     accent it has always had and PUB keeps the plain-available green, so a
     grid that gained the richer labels still reads the way it used to.
     Everything else lives in benchmarking/shared-ui/tokens.css. */
  --fare-sr: var(--accent);
  --fare-comm: #bf5af2;
  --fare-tour: #64d2ff;
  --fare-pub: var(--success);
  --fare-ndc: var(--pending);
}

:root[data-theme="light"] {
  /* Darkened so both stay legible as text on a white surface. */
  --fare-comm: #9a3fd0;
  --fare-tour: #0a7a99;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  font-family: var(--font-sans);
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

h1, h2, h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
}
h1 { font-size: clamp(1.4rem, 1.1rem + 0.7vw, 1.8rem); letter-spacing: -0.025em; color: var(--ink); }
h2 {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 0.65rem;
}
h3 {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

a { color: var(--accent); text-decoration: none; transition: color 0.15s var(--ease); }
a:hover { color: var(--accent); text-decoration: underline; }

/* Sidebar */
.app-main { margin-left: var(--sidebar-width); min-height: 100vh; }
.app-main--bare { margin-left: 0; }
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-drawer);
  width: var(--sidebar-width);
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.1rem 0.85rem 1.25rem;
  background: var(--surface);
  border-right: 1px solid var(--hairline);
  overflow-y: auto;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.5rem;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: -0.01em;
}
.sidebar-brand:hover { color: var(--ink); }
.sidebar-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  color: var(--accent);
}
.sidebar-brand-mark-icon { width: 100%; height: 100%; }
.sidebar-brand-mark .skynet-mark { width: 100%; height: 100%; }
.sidebar-brand-name { line-height: 1.25; }
.sidebar-brand-name-sky { color: var(--ink); }
.sidebar-brand-name-net { color: var(--accent); font-weight: 800; }

/* Skynet mark: globe (ink) wrapped by one flight path (accent). Static
   everywhere except the login hero. */
.skynet-mark { display: block; }
.skynet-globe { color: var(--ink); }
.skynet-orbit, .skynet-plane { color: var(--accent); }
.sidebar-brand-mark .skynet-globe { stroke-width: 1.7; }
/* Parked state, shared by every instance of the mark (sidebar, switcher, and
   the login hero once its flight finishes): the aircraft sits at the far end
   of the orbit arc, oriented to the path's tangent there. Positioning it via
   offset-path rather than a hand-computed translate/rotate is what keeps the
   static mark and the animated one pixel-identical at rest. */
.skynet-plane path {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1.8);
  offset-path: path('M14.876 6.059A10.2 4.2 -32 1 1 5.400 11.981');
  offset-distance: 100%;
  offset-rotate: auto;
}
/* Login hero only: the globe renders immediately, the orbit is drawn by the
   aircraft as it flies in from the start of the arc to its parked position
   (same duration/timing/delay as the flight itself), and it stays there.
   pathLength="1" on the orbit is what lets one dash length trace it
   regardless of its real geometry. */
.login-mark .skynet-orbit {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: skynet-draw 1.6s cubic-bezier(0.35, 0, 0.2, 1) 0.3s both;
}
.login-mark .skynet-plane path {
  animation: skynet-fly 1.6s cubic-bezier(0.35, 0, 0.2, 1) 0.3s both;
}
@keyframes skynet-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes skynet-fly {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .login-mark .skynet-orbit { animation: none; stroke-dashoffset: 0; }
  .login-mark .skynet-plane path { animation: none; offset-distance: 100%; }
}
.sidebar-nav { display: flex; flex-direction: column; gap: 0.15rem; }
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.6rem;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: 0.86rem;
  font-weight: 500;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.sidebar-link-icon { flex-shrink: 0; }
.sidebar-link:hover { background: var(--bg-elevated); color: var(--ink); text-decoration: none; }
.sidebar-link.is-active { background: var(--accent-soft); color: var(--accent); }
.sidebar-logout-form { margin-top: auto; padding-top: 0.6rem; }
.sidebar-logout {
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--danger);
  font: inherit;
  text-align: left;
}
.sidebar-logout:hover { background: var(--danger-soft); color: var(--danger); }
.sidebar-divider { height: 1px; margin: 0 0.5rem; background: var(--hairline); }
.sidebar-toggle {
  display: none;
  position: fixed;
  top: 0.85rem;
  left: 0.85rem;
  z-index: var(--z-drawer-control);
  width: 2.35rem;
  height: 2.35rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.sidebar-scrim { display: none; }

/* Desktop sidebar-hide toggle. Hidden below 901px, where the mobile
   .sidebar-toggle drawer already owns this space. */
.sidebar-collapse-toggle {
  display: none;
  position: fixed;
  top: 0.85rem;
  left: calc(var(--sidebar-width) - 3.2rem);
  z-index: var(--z-drawer-control);
  width: 2.35rem;
  height: 2.35rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: left 180ms ease;
}
.sidebar-collapse-toggle svg { flex-shrink: 0; }
.sidebar-collapse-toggle .icon-expand { display: none; }
@media (min-width: 901px) {
  .sidebar-collapse-toggle { display: flex; }
  html.sidebar-collapsed .sidebar { display: none; }
  html.sidebar-collapsed .app-main { margin-left: 0; }
  html.sidebar-collapsed .topbar { padding-left: calc(var(--page-gutter) + 2.6rem); }
  html.sidebar-collapsed .sidebar-collapse-toggle { left: 0.85rem; }
  html.sidebar-collapsed .sidebar-collapse-toggle .icon-collapse { display: none; }
  html.sidebar-collapsed .sidebar-collapse-toggle .icon-expand { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-collapse-toggle { transition: none; }
}

/* Topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 4.25rem;
  padding: 0.7rem var(--page-gutter);
  background: var(--topbar-bg);
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}
.topbar .brand {
  font-weight: 700;
  letter-spacing: -0.015em;
  font-size: 1rem;
  color: var(--ink);
}
.topbar-start { display: flex; align-items: center; gap: 0.8rem; }
.run-benchmark-button, .dashboard-run-button { background: var(--accent-fill); color: #fff; white-space: nowrap; }
.run-benchmark-button {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.75rem;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.78rem;
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.15s var(--ease), transform 0.1s var(--ease);
}
.run-benchmark-icon { flex: none; width: 0.85rem; height: 0.85rem; margin-right: 0.4rem; }
.run-benchmark-button:hover { background: var(--accent-fill-hover); }
.run-benchmark-button:active { transform: scale(0.98); }
.run-benchmark-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.topbar a { color: var(--ink); text-decoration: none; }
.topbar a:hover { color: var(--accent); }
.topbar a.run-benchmark-button, .topbar a.run-benchmark-button:hover { color: #fff; }
.topbar nav { display: flex; gap: 0.2rem; align-items: center; font-size: 0.875rem; }
.topbar nav > a {
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.topbar nav > a:hover { background: var(--bg-elevated); text-decoration: none; }
.notification-menu { position: relative; margin-left: 0.35rem; }
.notification-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  color: var(--pending);
  background: var(--pending-soft);
  cursor: pointer;
}
.notification-trigger:hover { background: var(--surface-2); }
.notification-badge {
  position: absolute;
  top: 0.05rem;
  right: 0.05rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  background: var(--danger);
  border: 2px solid var(--bg-elevated);
  box-shadow: 0 0 0 1px var(--surface);
}
.notification-popover {
  position: absolute;
  z-index: var(--z-dropdown);
  top: calc(100% + 0.55rem);
  right: 0;
  width: min(22rem, calc(100vw - 2rem));
  padding: 0.45rem;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}
.notification-popover[hidden] { display: none; }
.notification-list { display: grid; gap: 0.55rem; margin: 0; padding: 0.3rem 0.65rem 0.6rem; list-style: none; max-height: 18rem; overflow-y: auto; }
.notification-list li { display: grid; gap: 0.12rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--hairline); font-size: 0.78rem; }
.notification-list li:last-child { padding-bottom: 0; border: 0; }
.notification-list strong { color: var(--ink); }
.notification-list span { color: var(--ink-soft); }
.notification-view-all { width: calc(100% - 1.3rem); margin: 0.3rem 0.65rem 0.35rem; padding: 0.5rem 0.65rem; font-size: 0.8rem; }
.notification-empty { margin: 0.3rem 0.65rem 0.6rem; }
.profile-menu { position: relative; margin-left: 0.35rem; }
.profile-trigger {
  min-height: 2.15rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.37rem 0.55rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  color: var(--ink);
  background: var(--bg-elevated);
  font-weight: 500;
}
.profile-trigger:hover { background: var(--surface-2); }
.profile-trigger-email { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-chevron { color: var(--ink-soft); transition: transform 0.15s var(--ease); }
.profile-trigger[aria-expanded="true"] .profile-chevron { transform: rotate(180deg); }
.profile-popover {
  position: absolute;
  z-index: var(--z-dropdown);
  top: calc(100% + 0.55rem);
  right: 0;
  width: min(20rem, calc(100vw - 2rem));
  padding: 0.45rem;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}
.profile-popover[hidden] { display: none; }
.profile-menu-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0.65rem 0.7rem; }
.profile-menu-name { overflow: hidden; color: var(--ink); font-size: 0.84rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu-role, .profile-menu-label { color: var(--ink-faint); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; }
.profile-benchmark-status { padding: 0.25rem 0.2rem 0.45rem; border-top: 1px solid var(--hairline); }
.profile-benchmark-status-heading { display: flex; align-items: center; justify-content: space-between; padding: 0.25rem 0.45rem; }
.profile-benchmark-state { color: var(--running); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.profile-benchmark-link { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 0.5rem; padding: 0.5rem 0.45rem; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; }
.profile-benchmark-link:hover { background: var(--bg-elevated); color: var(--ink); }
.profile-benchmark-title { font-size: 0.82rem; font-weight: 600; }
.profile-benchmark-progress { color: var(--ink-soft); font: 0.7rem var(--font-mono); font-variant-numeric: tabular-nums; }
.profile-benchmark-bar { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.profile-benchmark-bar > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--running); transition: width 0.35s var(--ease); }
.profile-menu-section { padding: 0.4rem 0; border-top: 1px solid var(--hairline); }
.profile-menu-label { display: block; padding: 0.3rem 0.65rem; }
.theme-setting, .profile-menu-link {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: transparent;
  font-size: 0.84rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
}
.theme-setting:hover, .profile-menu-link:hover { background: var(--bg-elevated); color: var(--ink); }
.theme-setting-value { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--ink-soft); font-size: 0.78rem; }
.theme-label-light, .theme-toggle-icon.icon-moon { display: none; }
:root[data-theme="light"] .theme-label-dark, :root[data-theme="light"] .theme-toggle-icon.icon-sun { display: none; }
:root[data-theme="light"] .theme-label-light, :root[data-theme="light"] .theme-toggle-icon.icon-moon { display: inline; }
.timezone-setting {
  width: calc(100% - 1.3rem);
  margin: 0 0.65rem 0.3rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 0.8rem;
}
.profile-cid-form { margin: 0.25rem 0; padding: 0.65rem; border-top: 1px solid var(--hairline); }
.profile-cid-form label { margin: 0 0 0.35rem; color: var(--ink-faint); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; }
.profile-cid-row { display: flex; gap: 0.45rem; }
.profile-cid-row input { min-width: 0; flex: 1; min-height: 2.1rem; margin: 0; padding: 0.35rem 0.5rem; font-size: 0.8rem; }
.profile-cid-row button { padding: 0.35rem 0.65rem; font-size: 0.76rem; }
.profile-logout-form { margin: 0.25rem 0 0; padding-top: 0.25rem; border-top: 1px solid var(--hairline); }
.profile-logout-form .profile-menu-link { cursor: pointer; color: var(--danger); }

/* Administration opens over the active page, which remains visible but subdued. */
.admin-overlay {
  position: fixed;
  z-index: var(--z-modal);
  inset: 0;
  display: flex;
  justify-content: flex-end;
  background: rgba(3, 3, 5, 0.34);
  opacity: 0;
  transition: opacity 0.23s var(--ease);
}
.admin-overlay.is-open { opacity: 1; }
.admin-panel {
  width: min(46rem, 72vw);
  height: 100%;
  overflow-y: auto;
  padding: 1.35rem clamp(1.25rem, 3vw, 2.5rem) 2.5rem;
  background: var(--bg);
  border-left: 1px solid var(--hairline-strong);
  box-shadow: -18px 0 48px rgba(0, 0, 0, 0.24);
  transform: translateX(100%);
  transition: transform 0.28s var(--ease);
}
.admin-overlay.is-open .admin-panel { transform: translateX(0); }
body.admin-panel-open { overflow: hidden; }
body.admin-panel-open .topbar, body.admin-panel-open > .content { filter: blur(5px) grayscale(0.25); pointer-events: none; user-select: none; }
.admin-page { width: 100%; margin: 0; }
.admin-panel .admin-page { max-width: none; }
.admin-back { display: inline-flex; gap: 0.4rem; align-items: center; margin: 0 0 1rem; color: var(--ink-soft); font-size: 0.86rem; font-weight: 600; text-decoration: none; }
.admin-back:hover { color: var(--ink); }

.content {
  width: 100%;
  max-width: none;
  margin: clamp(1.5rem, 2.5vw, 2.5rem) 0 clamp(2rem, 3vw, 3.5rem);
  padding: 0 var(--page-gutter);
}

/* Cards read as frosted, faintly lit panels rather than flat boxes. */
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  margin-bottom: var(--space-5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    var(--shadow-1),
    var(--shadow-2);
}
.card.narrow { max-width: 380px; margin-left: auto; margin-right: auto; }
/* A <details> card's own disclosure row. Replaces style="display:inline" on the
   nested h2, which was the only reason those headings needed an inline style. */
.card-summary {
  cursor: pointer;
  list-style: none;
}
.card-summary::-webkit-details-marker { display: none; }
.card-summary h2 { display: inline; }
.card-summary:hover h2 { color: var(--ink); }
.card-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Price-matrix entry point. Kayak informs the search-first hierarchy, while
   surfaces, typography, density, and color remain native to this webapp. */
.price-matrix-landing {
  width: 100%;
  margin: clamp(2rem, 7vh, 5.5rem) 0 0;
}
.price-matrix-landing-copy {
  max-width: 760px;
  margin-bottom: 2rem;
}
.price-matrix-landing-copy .eyebrow { margin-bottom: 0.65rem; }
.price-matrix-landing-copy h1 {
  max-width: 720px;
  margin-bottom: 0.75rem;
  font-size: clamp(2rem, 3.2vw, 3.15rem);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.045em;
}
.price-matrix-landing-copy > p:last-child {
  max-width: 650px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 1rem;
}
.price-matrix-search-card { padding: clamp(1.2rem, 2.4vw, 2rem); }

/* One panel heading shared by the landing search card and the results-view
   filter drawer, so both surfaces read as the same component. */
.price-matrix-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--hairline);
}
.price-matrix-panel-heading h2 {
  margin: 0.2rem 0 0;
  padding: 0;
  border: 0;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
}
.price-matrix-panel-meta {
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Every control in the form sits on one 12-column rhythm: the primary row
   spans it fully, the optional row divides it evenly. Same field styling in
   both rows, so nothing reads as a nested sub-form. */
.price-matrix-form { --pm-field-height: 3rem; }
.price-matrix-fields {
  display: grid;
  align-items: end;
  gap: 0.7rem;
}
.price-matrix-fields-primary {
  grid-template-columns: minmax(0, 1fr) 2.75rem minmax(0, 1fr) minmax(8.5rem, 0.55fr) minmax(8.5rem, auto);
}
.price-matrix-fields-secondary {
  grid-template-columns: minmax(12rem, 1.6fr) repeat(4, minmax(7rem, 1fr));
}
.price-matrix-field { min-width: 0; margin: 0; }
.price-matrix-field-label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
  white-space: nowrap;
}
.price-matrix-field select,
.price-matrix-clear-form input {
  min-height: var(--pm-field-height, 3rem);
  margin: 0;
  padding: 0.6rem 0.8rem;
  border-color: var(--hairline-strong);
  background: var(--surface-2);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
}
.price-matrix-swap {
  align-self: end;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: var(--pm-field-height, 3rem);
  min-height: var(--pm-field-height, 3rem);
  padding: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: 1.1rem;
  cursor: pointer;
}
.price-matrix-swap:hover { border-color: var(--accent); background: var(--surface-hover); color: var(--accent); }
.price-matrix-field-submit .price-matrix-field-label { user-select: none; }
.price-matrix-apply {
  width: 100%;
  min-height: var(--pm-field-height, 3rem);
  margin: 0;
  white-space: nowrap;
}

/* Optional filters collapse behind one disclosure and open automatically when
   any of them is already applied. */
.price-matrix-more {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hairline);
}
.price-matrix-more > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.price-matrix-more > summary::-webkit-details-marker { display: none; }
.price-matrix-more > summary::before {
  content: "›";
  color: var(--ink-faint);
  font-size: 1rem;
  line-height: 1;
  transition: transform .16s var(--ease);
}
.price-matrix-more[open] > summary::before { transform: rotate(90deg); }
.price-matrix-more > summary:hover { color: var(--ink); }
.price-matrix-more-label { color: inherit; }
.price-matrix-more[open] > summary .price-matrix-more-label { color: var(--ink); }
.price-matrix-more-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.price-matrix-more-hint {
  overflow: hidden;
  color: var(--ink-faint);
  font-size: 0.72rem;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.price-matrix-more[open] > summary { margin-bottom: 0.85rem; }
.price-matrix-form-note {
  margin: 0.9rem 0 0;
  color: var(--ink-faint);
  font-size: 0.74rem;
}
.price-matrix-advanced {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hairline);
}
.price-matrix-advanced > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.price-matrix-advanced > summary:hover { color: var(--ink); }
.price-matrix-advanced > summary::-webkit-details-marker { display: none; }
.price-matrix-advanced > summary::before {
  content: "›";
  color: var(--ink-faint);
  font-size: 1rem;
  transition: transform .16s var(--ease);
}
.price-matrix-advanced[open] > summary::before { transform: rotate(90deg); }
.price-matrix-advanced > summary small { color: var(--ink-faint); font-size: 0.7rem; font-weight: 400; }
.price-matrix-advanced-body {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.75rem;
  padding: 0.8rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
}
.price-matrix-advanced-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0.75rem;
}
.price-matrix-advanced-action + .price-matrix-advanced-action { border-top: 1px solid var(--hairline); }
.price-matrix-advanced-action strong { color: var(--ink); font-size: 0.8rem; }
.price-matrix-advanced-action p { margin: 0.15rem 0 0; color: var(--ink-soft); font-size: 0.72rem; }
.price-matrix-cell-override { margin-top: 0.35rem; }
.price-matrix-cell-override > summary {
  color: var(--ink-faint);
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.price-matrix-cell-override > summary:hover { color: var(--ink-soft); }
.price-matrix-cell-override > summary::-webkit-details-marker { display: none; }
.price-matrix-cell-override-form {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.4rem;
  padding: 0.55rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  min-width: 11rem;
}
.price-matrix-cell-override-form select,
.price-matrix-cell-override-form input {
  min-height: 2rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.74rem;
}
.price-matrix-clear-form { display: flex; align-items: end; gap: 0.55rem; min-width: min(24rem, 50%); }
.price-matrix-clear-form label { flex: 1; margin: 0; }
.price-matrix-clear-form input { min-height: 2.5rem; padding-block: 0.5rem; font-size: 0.78rem; }
.button-quiet-danger { min-width: 6.5rem; white-space: nowrap; }
.price-matrix-heading-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.price-matrix-new-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
}
.price-matrix-empty {
  display: grid;
  justify-items: center;
  max-width: 36rem;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 3.25rem) 1.5rem;
  text-align: center;
}
.price-matrix-empty-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.4rem;
}
.price-matrix-empty h2 {
  margin: 0 0 0.45rem;
  padding: 0;
  border: 0;
  color: var(--ink);
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  text-transform: none;
}
.price-matrix-empty p { max-width: 31rem; margin: 0; color: var(--ink-soft); }
.price-matrix-empty-actions { display: flex; gap: 0.6rem; margin-top: 1.2rem; }

/* Price matrix is shaped as a familiar OTA result screen: search controls
   above the results, a wide fare grid, and an intentional reverse side for
   supplier coverage. */
.price-matrix-page { max-width: none; }
.price-matrix-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.price-matrix-view-toggle {
  display: grid;
  gap: 0.15rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.price-matrix-eyebrow {
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.price-matrix-title { font-size: clamp(1.65rem, 3vw, 2.1rem); font-weight: 700; line-height: 1.1; }
.price-matrix-view-hint { color: var(--accent); font-size: 0.78rem; font-weight: 600; opacity: 0; transform: translateY(-2px); transition: opacity .16s var(--ease), transform .16s var(--ease); }
.price-matrix-view-toggle:hover .price-matrix-view-hint,
.price-matrix-view-toggle:focus-visible .price-matrix-view-hint { opacity: 1; transform: none; }
.price-matrix-view-toggle:hover { background: transparent; }
.price-matrix-modify-toggle { white-space: nowrap; }
.price-matrix-search { margin-bottom: 1rem; padding: clamp(1.2rem, 2.4vw, 1.75rem); }
.price-matrix-search[hidden] { display: none; }
.price-matrix-search > form { display: block; }
.price-matrix-search form label { margin: 0; }
.price-matrix-search-footer {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--hairline);
}
.price-matrix-search-footer p { margin: 0; max-width: 68ch; font-size: 0.76rem; }
.price-matrix-stage { position: relative; perspective: 1400px; transition: min-height .32s var(--ease); }
.price-matrix-face {
  min-width: 0;
  margin: 0;
  backface-visibility: hidden;
  transition: opacity .26s var(--ease), transform .42s var(--ease);
}
.price-matrix-main {
  min-width: 0;
  overflow: hidden;
  position: relative;
  transform: rotateY(0deg);
}
.price-matrix-scroll {
  position: relative;
  isolation: isolate;
  max-height: var(--fill-viewport-height, calc(100vh - 5.5rem));
  overflow: auto;
}
.price-matrix-coverage {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  overflow: auto;
  opacity: 0;
  pointer-events: none;
  transform: rotateY(-180deg);
}
.price-matrix-coverage-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.price-matrix-coverage h2 { margin: 0.15rem 0 0; }
.price-matrix-page.is-coverage-visible .price-matrix-main { position: absolute; top: 0; right: 0; left: 0; opacity: 0; pointer-events: none; transform: rotateY(180deg); }
.price-matrix-page.is-coverage-visible .price-matrix-coverage { opacity: 1; pointer-events: auto; transform: rotateY(0); }
.price-matrix-page.is-coverage-visible .price-matrix-view-hint { opacity: 1; transform: none; }
.price-matrix-loading,
.price-matrix-loading-page,
[data-dashboard-content][aria-busy="true"],
[data-availability-content][aria-busy="true"],
[data-price-matrix-content][aria-busy="true"] {
  position: fixed;
  z-index: var(--z-modal);
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.price-matrix-loading-page,
[data-dashboard-content][aria-busy="true"],
[data-availability-content][aria-busy="true"],
[data-price-matrix-content][aria-busy="true"] { position: relative; z-index: auto; width: 100%; min-height: calc(100vh - 10rem); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.deferred-page { width: 100%; }
.price-matrix-loading[hidden] { display: none; }
.price-matrix-loading-message {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  min-width: min(20rem, 100%);
  padding: 1.5rem 2rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}
.price-matrix-loading-message > span:last-child { color: var(--ink-soft); font-size: 0.85rem; }
.deferred-progress {
  width: min(18rem, 100%);
  height: .45rem;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--hairline);
  accent-color: var(--accent);
}
.deferred-progress::-webkit-progress-bar { border-radius: inherit; background: var(--hairline); }
.deferred-progress::-webkit-progress-value { border-radius: inherit; background: var(--accent); transition: width .12s linear; }
.deferred-progress::-moz-progress-bar { border-radius: inherit; background: var(--accent); }
.price-matrix-spinner {
  width: 1.6rem;
  height: 1.6rem;
  border: 3px solid var(--hairline);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: price-matrix-spin 0.8s linear infinite;
}
@keyframes price-matrix-spin { to { transform: rotate(360deg); } }

@media (max-width: 1120px) {
  .price-matrix-fields-primary {
    grid-template-columns: minmax(0, 1fr) 2.75rem minmax(0, 1fr) minmax(8rem, 0.6fr);
  }
  .price-matrix-field-submit { grid-column: 1 / -1; justify-self: end; min-width: 11rem; }
  .price-matrix-field-submit .price-matrix-field-label { display: none; }
}
@media (max-width: 860px) {
  .price-matrix-fields-primary { grid-template-columns: minmax(0, 1fr) 2.75rem minmax(0, 1fr); }
  .price-matrix-field-cabin { grid-column: 1 / -1; }
  .price-matrix-fields-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-matrix-field-run { grid-column: 1 / -1; }
  .price-matrix-more-hint { display: none; }
  .price-matrix-advanced-action { align-items: flex-start; flex-direction: column; }
  .price-matrix-clear-form { width: 100%; min-width: 0; }
  .price-matrix-scroll { max-height: none; }
  .price-matrix-coverage { position: absolute; }
}
@media (max-width: 560px) {
  .price-matrix-landing { margin-top: 1rem; }
  .price-matrix-landing-copy h1 { font-size: 2rem; }
  .price-matrix-panel-heading { display: block; }
  .price-matrix-panel-meta { display: inline-block; margin-top: 0.65rem; }
  .price-matrix-heading { align-items: flex-start; flex-direction: column; }
  .price-matrix-heading-actions { width: 100%; }
  .price-matrix-heading-actions > * { flex: 1; }
  .price-matrix-fields-primary,
  .price-matrix-fields-secondary { grid-template-columns: 1fr; }
  .price-matrix-fields > .price-matrix-field { grid-column: auto; }
  .price-matrix-field-submit { justify-self: stretch; min-width: 0; }
  .price-matrix-fields-primary .price-matrix-swap { display: none; }
  .price-matrix-clear-form { align-items: stretch; flex-direction: column; }
  .price-matrix-empty-actions { width: 100%; flex-direction: column; }
}

/* Forms */
form label { display: block; margin-bottom: 0.75rem; font-size: 0.85rem; color: var(--ink-soft); }
form input[type=text],
form input[type=email],
form input[type=password],
form input[type=number],
form input[type=file],
form select {
  display: block;
  width: 100%;
  min-height: 2.45rem;
  padding: 0.5rem 0.65rem;
  margin-top: 0.3rem;
  box-sizing: border-box;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
form input::placeholder { color: var(--ink-faint); }
/* The ring must not be built from --accent-soft: that token is 10% alpha in the
   light theme, which made keyboard focus effectively invisible on every input.
   A solid 2px outline plus the soft halo reads in both themes, and :focus-visible
   keeps it off mouse clicks. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
label.checkbox { display: inline-block; margin-right: 1rem; font-size: 0.85rem; color: var(--ink); }
label.checkbox input { width: auto; display: inline; accent-color: var(--accent); }
fieldset { border: 1px solid var(--hairline); border-radius: var(--radius-sm); margin-bottom: 0.9rem; padding: 0.85rem 1rem; }
fieldset legend { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); padding: 0 0.4rem; }
.benchmark-mode { margin-top: 1.1rem; }
.benchmark-mode .hint { margin: 0.35rem 0 0; }
.benchmark-warning {
  margin-top: 0.85rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--danger);
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: var(--ink);
}
.benchmark-warning strong { color: var(--danger); }
.benchmark-warning p { margin: 0.35rem 0 0.65rem; }
.benchmark-warning label.checkbox { margin-bottom: 0; }

button {
  background: var(--accent-fill);
  color: #fff;
  border: none;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.2;
  transition: background 0.15s var(--ease), transform 0.1s var(--ease);
}
button:hover { background: var(--accent-fill-hover); }
button:active { transform: scale(0.98); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--hairline-strong);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s var(--ease), transform 0.1s var(--ease), border-color 0.15s var(--ease);
}
.button-secondary:hover { background: var(--surface-hover); }
.button-secondary:active { transform: scale(0.98); }
.button-secondary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.route-generator-benchmark-choice { border: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: .5rem; }
.route-generator-benchmark-choice legend { padding: 0 0 .35rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.route-generator-benchmark-choice button { width: 100%; }
.button-danger { background: var(--danger-fill); }
.button-danger:hover { background: var(--danger-fill-hover); }
.inline-form { display: inline; }

/*
 * Users panel (admin settings): one row per account, several small forms
 * packed into the actions cell. .row-actions wraps rather than overflows the
 * cell on narrow viewports; .stacked-form reuses the card's own `form label`
 * rule (label wraps its input) so "Add a user" matches every other form on
 * this page instead of introducing a second label convention.
 */
.admin-users .jobs-table td { vertical-align: middle; }
.row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.row-actions .inline-form { display: inline-flex; align-items: center; gap: 0.3rem; }
.password-reset-form input[type="password"] {
  width: 9rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.8rem;
}
.stacked-form { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--hairline); }
.stacked-form h3 { margin: 0 0 0.75rem; }
.user-status {
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  font-weight: var(--weight-semibold);
  display: inline-flex;
  align-items: center;
  min-height: 1.6rem;
  padding: 0 0.6rem;
  border-radius: var(--radius-pill);
}
.user-status[data-active="true"] { color: var(--success); background: var(--success-soft); }
.user-status[data-active="false"] { color: var(--ink-soft); background: var(--surface-2); }
.admin-danger-zone {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--hairline);
}
.admin-danger-zone summary { cursor: pointer; color: var(--danger); font-weight: 700; }
.admin-danger-zone p { color: var(--ink-soft); font-size: 0.82rem; }
.admin-danger-zone form { display: grid; gap: 0.55rem; }
.admin-danger-zone input { display: block; margin-top: 0.35rem; }
.fare-type {
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/*
 * Roles & permissions grid (admin settings): a role switcher, a per-role
 * data-scope form, and a wide capability table. The table gets its own
 * .table-scroll wrapper (existing pattern, overflow-x: auto) so the grid
 * scrolls horizontally in place instead of widening the page.
 */
.role-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.75rem 0 1rem;
}
.role-tab {
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: capitalize;
}
.role-tab:hover { color: var(--ink); background: var(--surface-hover); }
.role-tab.is-active { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
.permission-data-scope { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1.25rem; }
.permission-data-scope label { margin: 0; font-size: 0.85rem; }
.permission-grid th, .permission-grid td { vertical-align: middle; }
.permission-tab-row th[scope="rowgroup"] { text-align: left; vertical-align: top; color: var(--ink); font-weight: 700; }
.permission-checkbox { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; cursor: pointer; }
.permission-checkbox input[disabled] { cursor: not-allowed; }
.permission-locked-note { font-size: 0.72rem; }
.badge { display: inline-flex; align-items: center; padding: 0.1rem 0.5rem; border-radius: var(--radius-pill); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.badge-danger { color: var(--danger); background: var(--danger-soft); }
.admin-permissions .jobs-table td { vertical-align: middle; }
.admin-permissions button[type="submit"] { margin-top: 0.75rem; }

.error { color: var(--danger); font-size: 0.85rem; }
.hint { color: var(--ink-soft); font-size: 0.82rem; }

/*
 * Tables are dense enough for operations work without reading like raw logs.
 * .jobs-table is reused by every table across dashboard/insights/price-matrix
 * with widely varying column counts (4 to 9+). table-layout:fixed with a
 * nth-child(1..5) width scheme was tuned for exactly one 5-column table (the
 * #jobs-table job list below). Any other table inheriting this class had
 * columns past the 5th collapse to zero width, causing cell content (e.g.
 * timestamps next to "View run" links, or supplier price/status text) to wrap
 * and visually overlap. Keep the shared class auto-sized by content, and
 * scope the fixed 5-column layout to the actual job list via its element id.
 */
.jobs-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  font-size: 0.875rem;
  table-layout: auto;
}
.jobs-table-wrap { overflow-x: auto; margin: 0 -0.25rem; padding: 0 0.25rem; }
#jobs-table {
  min-width: 760px;
  table-layout: fixed;
}
#jobs-table th:nth-child(1) { width: 2.25rem; }
#jobs-table th:nth-child(2) { width: 18%; }
#jobs-table th:nth-child(3) { width: 32%; }
#jobs-table th:nth-child(4) { width: 16%; }
#jobs-table th:nth-child(5) { width: 16%; }
.jobs-table th {
  text-align: left;
  padding: 0.5rem 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--hairline);
}
.table-sort-button {
  appearance: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.table-sort-button:hover { background: transparent; color: var(--accent); }
.jobs-table td {
  padding: 0.8rem 0.65rem;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
  color: var(--ink);
}
.jobs-table tbody tr:last-child td { border-bottom: none; }
.jobs-table tbody tr { transition: background 0.15s var(--ease); }
.jobs-table tbody tr:hover td { background: var(--bg-elevated); }
.comparable-fares tbody tr.within-tolerance td { opacity: 0.55; }

/* Signature: status reads as a soft glowing dot, like a system indicator, not a colored bar. */
#jobs-table tr[data-job-id] td.job-id { position: relative; padding-left: 1.5rem; }
#jobs-table tr[data-job-id] td.job-id::before {
  content: "";
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-faint);
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
#jobs-table tr[data-status="queued"] td.job-id::before { background: var(--pending); box-shadow: 0 0 8px 1px var(--pending-soft); }
#jobs-table tr[data-status="running"] td.job-id::before { background: var(--running); box-shadow: 0 0 8px 1px var(--running-soft); animation: pulse-dot 1.8s ease-in-out infinite; }
#jobs-table tr[data-status="done"] td.job-id::before { background: var(--success); box-shadow: 0 0 8px 1px var(--success-soft); }
#jobs-table tr[data-status="completed_with_incomplete_rechecks"] td.job-id::before { background: var(--pending); box-shadow: 0 0 8px 1px var(--pending-soft); }
#jobs-table tr[data-status="failed"] td.job-id::before { background: var(--danger); box-shadow: 0 0 8px 1px var(--danger-soft); }
#jobs-table tr[data-status="cancelled"] td.job-id::before { background: var(--ink-faint); }

/* Row-expand arrow: sits ahead of the job id, reveals the worker detail row. */
.job-expand-col { padding: 0.8rem 0 0.8rem 0.65rem !important; text-align: center; }
.job-expand-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0.2rem;
  cursor: pointer;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}
.job-expand-toggle:hover { color: var(--ink); background: var(--bg-elevated); }
.job-expand-chevron { display: inline-block; font-size: 0.7rem; transition: transform 0.15s var(--ease); }
.job-expand-toggle[aria-expanded="true"] .job-expand-chevron { transform: rotate(90deg); }
.job-detail-row td { padding: 0 0.65rem 0.9rem 2.4rem; border-bottom: 1px solid var(--hairline); background: var(--bg-elevated); }
.job-detail-row:last-child td { border-bottom: none; }
.jobs-table-workers { margin-top: 0.4rem; }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.job-status {
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  font-weight: var(--weight-semibold);
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  justify-content: center;
  min-width: 5rem;
  padding: var(--space-1) 0.65rem;
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  background: var(--surface-2);
}
.job-status-detail { display: block; margin-top: 0.35rem; max-width: 20rem; color: var(--ink-soft); }
/* Colour keys off the pill's own data-status when it has one, and still off an
   ancestor row for the jobs table. Previously only the row-scoped form existed,
   so the same pill rendered as an empty grey capsule on the dashboard, in the
   worker-stage table, and in the JS-built worker rows. */
.job-status[data-status="queued"],
tr[data-status="queued"] .job-status { color: var(--pending); background: var(--pending-soft); }
.job-status[data-status="running"],
tr[data-status="running"] .job-status { color: var(--running); background: var(--running-soft); }
.job-status[data-status="done"],
tr[data-status="done"] .job-status { color: var(--success); background: var(--success-soft); }
.job-status[data-status="completed_with_incomplete_rechecks"],
tr[data-status="completed_with_incomplete_rechecks"] .job-status { color: var(--pending); background: var(--pending-soft); }
.job-status[data-status="failed"],
tr[data-status="failed"] .job-status { color: var(--danger); background: var(--danger-soft); }
.job-status[data-status="cancelled"],
tr[data-status="cancelled"] .job-status { color: var(--ink-soft); background: var(--surface-2); }

/* Progress bar: boarding strip */
.progress-bar {
  flex: 1;
  min-width: 5rem;
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  vertical-align: middle;
  overflow: hidden;
}
.progress-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--running);
  transition: width var(--dur-slow) linear;
}
#jobs-table tr[data-status="done"] .progress-bar-fill { background: var(--success); }
#jobs-table tr[data-status="completed_with_incomplete_rechecks"] .progress-bar-fill { background: var(--pending); }
#jobs-table tr[data-status="failed"] .progress-bar-fill { background: var(--danger); }
#jobs-table tr[data-status="cancelled"] .progress-bar-fill { background: var(--ink-faint); }
.progress-percent {
  font-size: 0.75rem;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.progress-display { display: flex; align-items: center; gap: 0.65rem; max-width: 18rem; }
.progress-cell { display: grid; gap: 0.25rem; }
.progress-eta { color: var(--ink-faint); font: 0.68rem var(--font-mono); letter-spacing: 0.01em; }
.recheck-progress { display: grid; gap: 0.25rem; max-width: 18rem; margin-top: 0.2rem; }
.recheck-progress-heading { display: flex; justify-content: space-between; gap: 0.65rem; color: var(--ink-soft); font: 0.68rem var(--font-mono); }
.recheck-progress-bar { height: 5px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.recheck-progress-bar-fill { display: block; width: 0%; height: 100%; background: var(--pending); transition: width var(--dur-slow) linear; }
.recheck-eta { color: var(--ink-faint); font: 0.68rem var(--font-mono); letter-spacing: 0.01em; }
.job-id, .job-created { font-family: var(--font-mono); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.job-id { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-created { color: var(--ink-soft) !important; white-space: nowrap; }
.job-actions { white-space: nowrap; }

.worker-task { display: grid; gap: 0.2rem; min-width: 12rem; }
.worker-task-label { font-size: 0.78rem; }
.worker-task-detail { color: var(--ink-soft); font-size: 0.7rem; font-family: var(--font-mono); }
.worker-progress-bar {
  height: 4px;
  min-width: 6rem;
  background: var(--surface-2);
  border-radius: 2px;
  overflow: hidden;
}
.worker-progress-bar-fill {
  display: block;
  height: 100%;
  background: var(--running);
  transition: width var(--dur-slow) linear;
}
tr[data-worker-status="failed"] .worker-progress-bar-fill { background: var(--danger); }
tr[data-worker-status="ok"] .worker-progress-bar-fill,
tr[data-worker-status="done"] .worker-progress-bar-fill { background: var(--success); }

.job-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.1rem;
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-sm);
  background: var(--accent-fill);
  color: #fff;
  font-weight: 600;
  font-size: 0.75rem;
  text-decoration: none;
  transition: background 0.15s var(--ease), transform 0.1s var(--ease);
}
.job-download:hover { background: var(--accent-fill-hover); color: #fff; }
.job-download:active { transform: scale(0.98); }
.job-view-report { margin-right: 0.45rem; }
.job-cancel { margin-left: 0.45rem; padding: 0.35rem 0.65rem; font-size: 0.75rem; }

/* Summary tiles above the jobs table */
.job-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 1rem 0 1.4rem;
}
.operations-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }.operations-heading h2 { margin-bottom: 0.45rem; }
.operations-heading .hint { margin: 0; }
.job-summary-item {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
  background: var(--surface-2);
}
.job-summary-item strong {
  font-family: var(--font-mono);
  color: var(--ink);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.job-summary-item--queued { border-color: color-mix(in srgb, var(--pending) 26%, var(--hairline)); }
.job-summary-item--running { border-color: color-mix(in srgb, var(--running) 26%, var(--hairline)); }
.job-summary-item--done { border-color: color-mix(in srgb, var(--success) 26%, var(--hairline)); }
.job-summary-item--failed { border-color: color-mix(in srgb, var(--danger) 26%, var(--hairline)); }

/* Homepage dashboard and benchmark launcher. The page is an operations
   instrument: one quiet summary panel, two dense evidence matrices, then the
   price table. */
.dashboard-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: var(--space-4); }
.dashboard-heading h1 { margin-bottom: 0.3rem; }
.dashboard-heading .hint { margin: 0; }
.dashboard-stats, .dashboard-grid, .dashboard-card--headlines {
  --dashboard-yellow: #eab308;
  --dashboard-yellow-ink: #a16207;
}
.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); align-items: stretch; }
.dashboard-card, .dashboard-summary { padding: clamp(.9rem, 1.4vw, 1.25rem); }
.dashboard-card { display: flex; flex-direction: column; margin: 0; }
.dashboard-grid .dashboard-card { min-height: 21rem; }
.dashboard-card h2 { margin-bottom: 0; font-size: var(--text-sm); letter-spacing: .035em; text-transform: uppercase; }
.dashboard-card-heading { display: flex; align-items: start; justify-content: space-between; gap: .75rem; }
.dashboard-card-heading > div { display: flex; align-items: baseline; gap: .5rem; }
.dashboard-card-heading a { margin-top: -.15rem; font-size: .76rem; font-weight: 600; white-space: nowrap; }
.dashboard-card-body { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.scorecard-action, .scorecard-evidence-link { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink); font: 600 .7rem var(--font-mono); letter-spacing: .01em; text-decoration: none; transition: border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease), transform .16s var(--ease); }
.scorecard-action { margin-top: -.15rem; padding: .38rem .55rem; }
.scorecard-action svg { width: .8rem; height: .8rem; color: var(--accent); }
.scorecard-action:hover, .scorecard-evidence-link:hover { border-color: color-mix(in srgb, var(--accent) 52%, var(--hairline-strong)); background: var(--accent-soft); color: var(--accent); }
.scorecard-action:active, .scorecard-evidence-link:active { transform: translateY(1px); }
.scorecard-action:focus-visible, .scorecard-evidence-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dashboard-card-context { color: var(--ink-soft); font: 500 .68rem var(--font-mono); }
.dashboard-footnote, .dashboard-empty { margin: .9rem 0 0; color: var(--ink-soft); font-size: .74rem; }
.dashboard-footnote { padding: .62rem .72rem; border-radius: var(--radius-sm); background: var(--surface-2); }

/* Shared compact meter list -- used by the score and availability overview cards */
.dashboard-meter-scroll { flex: 1; max-height: 12.5rem; overflow: auto; }
.dashboard-meter-groups { display: grid; gap: .85rem; }
.dashboard-meter-group-label { margin: 0 0 .4rem; color: var(--ink-soft); font: 600 .66rem var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }
.dashboard-meter-group + .dashboard-meter-group { padding-top: .1rem; border-top: 1px solid var(--hairline); }
.dashboard-meter-list { display: grid; gap: .55rem; }
.dashboard-meter-row { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem 2.6rem; align-items: center; gap: .55rem; }
.dashboard-meter-label { display: flex; align-items: center; gap: .38rem; min-width: 0; }
.dashboard-meter-label strong { overflow: hidden; color: var(--ink); font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-meter-bar { height: .34rem; overflow: hidden; border-radius: 999px; background: var(--hairline-strong); }
.dashboard-meter-bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.dashboard-meter-bar--availability span { background: linear-gradient(90deg, var(--accent), var(--success)); }
.dashboard-meter-value { color: var(--ink-soft); font: 600 .68rem var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.dashboard-card--availability .dashboard-meter-row {
  grid-template-columns: 3rem minmax(2.5rem, 1fr) 2.8rem;
  gap: .35rem;
}
.dashboard-card--availability .dashboard-meter-value { white-space: nowrap; }

/* Summary groups share one card so the evidence begins higher on the page.
   Vertical rules preserve the three operational questions without turning
   them into three competing surfaces. */
.dashboard-stats { margin-bottom: var(--space-4); }
.dashboard-summary {
  display: grid; grid-template-columns: minmax(22rem, 1.35fr) minmax(15rem, .9fr) minmax(16rem, 1fr);
  min-height: 7.2rem; margin: 0;
}
.dashboard-summary-group {
  display: flex; min-width: 0; flex-direction: column; gap: var(--space-2);
  padding: 0 clamp(.9rem, 1.6vw, 1.5rem);
}
.dashboard-summary-group:first-child { padding-left: 0; }
.dashboard-summary-group:last-child { padding-right: 0; }
.dashboard-summary-group + .dashboard-summary-group { border-left: 1px solid var(--hairline); }
.stat-card-label {
  margin: 0; color: var(--ink-faint);
  font: var(--weight-semibold) var(--text-2xs)/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: .09em;
}
.stat-card-metrics { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); flex: 1; }
.stat-card-metrics--scope { gap: var(--space-4) var(--space-6); }
.stat-metric { display: flex; align-items: center; gap: var(--space-2); min-width: 3.6rem; }
.stat-metric-icon { flex: none; width: 1.5rem; height: 1.5rem; color: var(--ink-faint); }
.stat-metric span { display: flex; flex-direction: column; }
.stat-metric strong {
  color: var(--ink); font: var(--weight-semibold) var(--text-2xl) var(--font-mono);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.stat-metric small { color: var(--ink-soft); font-size: var(--text-xs); }
.stat-metric--done .stat-metric-icon { color: var(--success); }
.stat-metric--failed .stat-metric-icon, .stat-metric--failed strong { color: var(--danger); }
.stat-metric--running .stat-metric-icon { color: var(--running); }
.stat-metric--queued .stat-metric-icon { color: var(--dashboard-yellow); }
.stat-card-link {
  display: inline-flex; align-items: center; gap: var(--space-1); margin-top: auto;
  color: var(--accent); font: var(--weight-semibold) var(--text-xs) var(--font-mono);
  text-decoration: none;
}
.stat-card-link svg { width: .8rem; height: .8rem; }
.stat-card-link:hover { text-decoration: underline; }
.stat-card-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); }
.stat-card-badge {
  align-self: start; min-width: 0; padding: var(--space-1) var(--space-3);
}
.stat-card-detail { margin: 0; color: var(--ink-soft); font-size: var(--text-sm); }
.stat-card-date { margin: 0 0 auto; color: var(--ink-faint); font: var(--text-xs) var(--font-mono); }

/* Supplier x GDS heat grids (score + availability cards): one tile per
   supplier-GDS pair rather than a plain number, so the card reads at a
   glance the way a heatmap does instead of as a table to be read cell by
   cell. Column count varies with how many GDSs have data, so
   grid-template-columns is set inline per row from the template -- the CSS
   only owns tile appearance. */
.heat-legend {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2);
  margin: var(--space-3) 0 var(--space-2); color: var(--ink-faint);
  font: var(--weight-medium) var(--text-2xs) var(--font-mono);
}
.heat-legend-title { margin-right: var(--space-2); color: var(--ink-soft); font-weight: var(--weight-semibold); }
.heat-legend-swatch { width: .68rem; height: .68rem; border-radius: 3px; }
.heat-legend-sep { width: 1px; height: .75rem; margin: 0 var(--space-1); background: var(--hairline-strong); }
.heat-legend-mark {
  display: inline-grid; place-items: center; width: 1rem; height: 1rem;
  border-radius: 4px; background: var(--surface-2); color: var(--ink-faint);
  font-size: var(--text-2xs); line-height: 1;
}
.heat-legend-swatch.is-absent { background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); }
.heat-legend-text { margin-right: var(--space-1); }

.heat-scroll { flex: 1; min-height: 0; overflow: auto; }
.heat-grid { display: grid; gap: 4px; min-width: max-content; }
.heat-row { display: grid; align-items: stretch; gap: 5px; }
/* Suppliers with no evidence at all recede instead of rendering a wall of
   placeholder marks louder than the real scores next to them. */
.heat-row.is-dormant { opacity: .5; }
.heat-row--header {
  position: sticky; top: 0; z-index: var(--z-base);
  padding-bottom: var(--space-2); margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--hairline-strong); background: var(--surface);
}
.heat-corner, .heat-colhead {
  display: flex; align-items: end;
  color: var(--ink-faint); font: var(--weight-semibold) var(--text-2xs) var(--font-mono);
  text-transform: uppercase; letter-spacing: .07em;
}
.heat-colhead { justify-content: center; gap: var(--space-2); }
.gds-logo {
  display: inline-grid; place-items: center; min-width: 1.25rem;
  font-family: Inter, sans-serif; font-size: 1.05rem; font-weight: 800;
  line-height: 1; letter-spacing: -.08em; text-transform: none;
}
/* Compact brand marks mirror the GDS identities used in the design without
   putting generic letters inside Skynet-coloured circles. */
.gds-logo[data-gds="S"] { color: #e21d2f; font-style: italic; transform: skew(-7deg); }
.gds-logo[data-gds="A"] { color: #1670d2; font-size: 1.2rem; font-weight: 700; }
.gds-logo[data-gds="G"], .gds-logo[data-gds="E"] { color: #16a05d; font-size: 1.12rem; }
.gds-logo[data-gds="T"] { color: #6a3fd6; }
.gds-logo[data-gds="V"] { color: #4d78e0; }
.gds-logo[data-gds="I"] { color: #ef7c4a; }
.heat-corner { position: sticky; left: 0; background: var(--surface); }
.heat-rowhead {
  position: sticky; left: 0; z-index: var(--z-base);
  display: flex; align-items: center; min-width: 0;
  padding-right: var(--space-2); background: var(--surface);
}
.heat-rowhead strong {
  overflow: hidden; color: var(--ink);
  font: var(--weight-semibold) var(--text-sm) var(--font-mono);
  text-overflow: ellipsis; white-space: nowrap;
}
/* Prospective and archived suppliers reach this grid only when a run included
   them, and only for admins -- the tag says which, so a non-established row is
   never mistaken for part of the established roster. */
.lifecycle-tag {
  flex: none; margin-left: var(--space-2); padding: 1px var(--space-1);
  border-radius: 3px; font: var(--weight-semibold) var(--text-2xs) var(--font-mono);
  text-transform: uppercase; letter-spacing: .04em;
}
.lifecycle-tag--prospective { background: var(--accent-soft); color: var(--accent); }
.lifecycle-tag--archived { background: var(--bg-elevated); color: var(--ink-faint); }
.heat-cell {
  position: relative; display: grid; place-items: center; height: 2.05rem;
  border-radius: var(--radius-sm);
  font: var(--weight-semibold) var(--text-sm) var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.score-band--strong, .coverage-band--strong {
  color: var(--success); background: color-mix(in srgb, var(--success) 30%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 22%, transparent);
}
.score-band--good, .coverage-band--good {
  color: color-mix(in srgb, var(--success) 88%, var(--ink)); background: color-mix(in srgb, var(--success) 18%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 12%, transparent);
}
.score-band--weak, .coverage-band--weak {
  color: var(--dashboard-yellow-ink); background: color-mix(in srgb, var(--dashboard-yellow) 32%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dashboard-yellow) 24%, transparent);
}
.score-band--poor, .coverage-band--poor {
  color: var(--danger); background: color-mix(in srgb, var(--danger) 28%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 18%, transparent);
}
.heat-cell.is-unswept { color: var(--ink-faint); background: var(--surface-2); font-size: var(--text-md); font-weight: var(--weight-regular); }
/* Structural absence (no PCC on this GDS at all) renders as a blank slot --
   nothing to scan there -- rather than the hatch pattern this used to draw,
   which read as noise smeared across every sparse supplier row. */
.heat-cell.is-absent { background: var(--surface); box-shadow: none; }
.heat-cell--coverage { overflow: hidden; font-size: var(--text-sm); }
.heat-cell-fill { display: none; }
.heat-cell-value { position: relative; display: inline-flex; align-items: baseline; gap: .18rem; }
.heat-cell-total { color: var(--ink-faint); font-size: var(--text-2xs); }
.heat-cell-percent { margin-left: .35rem; color: currentColor; font-size: var(--text-2xs); }

/* Price position is a compact operational table, not a collection of tiles:
   the job is rapid supplier comparison within one GDS. */
.headline-group + .headline-group { margin-top: var(--space-4); }
.headline-group-label {
  display: flex; align-items: center; gap: var(--space-3);
  margin: 0 0 var(--space-3); color: var(--ink-soft);
  font: var(--weight-semibold) var(--text-2xs) var(--font-mono);
  text-transform: uppercase; letter-spacing: .09em;
}
.headline-group-label::after {
  content: ""; flex: 1; height: 1px; background: var(--hairline);
}
.price-position-scroll { overflow-x: auto; }
.price-position-table { min-width: 42rem; }
.price-position-row {
  display: grid; grid-template-columns: 1.05fr .8fr 1fr .8fr 1.25fr 1.05fr;
  gap: var(--space-3); align-items: center; min-height: 2.4rem;
  border-top: 1px solid var(--hairline); color: var(--ink-soft); font-size: var(--text-xs);
}
.price-position-row--header {
  min-height: 1.7rem; border-top: 0; color: var(--ink-faint);
  font: var(--weight-semibold) var(--text-2xs) var(--font-mono);
  text-transform: uppercase; letter-spacing: .07em;
}
.price-position-row > strong { color: var(--ink); font-size: var(--text-sm); }
.price-position-cabin {
  width: max-content; padding: .15rem .4rem; border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill); color: var(--ink-soft); font: var(--weight-semibold) var(--text-2xs) var(--font-mono);
}
.price-position-rate { display: grid; grid-template-columns: auto minmax(2.4rem, 1fr); gap: var(--space-2); align-items: center; }
.price-position-rate strong { color: var(--ink); font: var(--weight-bold) var(--text-md) var(--font-mono); font-variant-numeric: tabular-nums; }
.price-position-bar { height: .28rem; border-radius: var(--radius-pill); background: var(--hairline-strong); }
.price-position-bar::before { content: ""; display: block; width: var(--fill, 0%); height: 100%; border-radius: inherit; background: var(--accent); }
.price-position-row.is-positive .price-position-bar::before { background: var(--success); }
.price-position-row.is-negative .price-position-bar::before { background: var(--dashboard-yellow); }
.price-position-gaps strong { color: var(--success); font-family: var(--font-mono); }
.price-position-delta { color: var(--ink-soft); }
.price-position-evidence { color: var(--ink-faint); }
.price-position-evidence span { display: block; width: max-content; margin-top: .12rem; color: var(--dashboard-yellow-ink); font-weight: var(--weight-semibold); }
.scorecard-spotlight { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: center; margin: -.2rem 0 .85rem; padding: .65rem .7rem; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--hairline)); border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--accent-soft), transparent 68%); }
.scorecard-spotlight-score { display: grid; min-width: 3.6rem; text-align: center; }
.scorecard-spotlight-score strong { color: var(--ink); font: 700 1.35rem var(--font-mono); }
.scorecard-spotlight-score span { color: var(--ink-soft); font: .62rem var(--font-mono); }
.scorecard-spotlight > div:last-child { display: grid; gap: .08rem; min-width: 0; }
.scorecard-spotlight > div:last-child > strong { color: var(--ink); font-size: .85rem; }
.scorecard-spotlight small { overflow: hidden; color: var(--ink-soft); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.scorecard-kicker { color: var(--accent); font: 700 .6rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.leader-list, .alert-list { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.leader-list li { display: grid; grid-template-columns: 1.35rem 1fr auto; gap: .45rem; align-items: baseline; color: var(--ink-soft); font-size: .8rem; }
.leader-rank { color: var(--accent); font: 600 .75rem var(--font-mono); }
.leader-list strong, .alert-list strong { color: var(--ink); }
.leader-list .baseline-mark { display: block; margin-top: .08rem; color: var(--ink-soft); font-size: .58rem; font-weight: 500; text-transform: uppercase; }
.alert-list li { display: grid; gap: .12rem; padding-bottom: .5rem; border-bottom: 1px solid var(--hairline); font-size: .78rem; }
.alert-list li:last-child { padding-bottom: 0; border: 0; }
.alert-list span { overflow: hidden; color: var(--ink-soft); text-overflow: ellipsis; white-space: nowrap; }
.benchmark-dialog { width: min(45rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 1.35rem; overflow-y: auto; color: var(--ink); background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--radius); box-shadow: 0 24px 72px rgba(0, 0, 0, .45); }
.benchmark-dialog::backdrop { background: rgba(3, 3, 5, .62); backdrop-filter: blur(3px); }
.benchmark-dialog-header { display: flex; justify-content: space-between; gap: 1rem; align-items: start; margin-bottom: 1rem; }
.benchmark-dialog-header h1 { margin: 0; }
.dialog-close { width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--hairline-strong); background: var(--surface-2); color: var(--ink); border-radius: 50%; font-size: 1.45rem; font-weight: 400; line-height: 1; }
.dialog-close:hover { background: var(--surface-hover); }

.benchmark-tabs { display: flex; gap: .35rem; border-bottom: 1px solid var(--hairline-strong); margin-bottom: 1rem; }
.benchmark-tab-button { background: none; border: none; border-bottom: 2px solid transparent; padding: .6rem .9rem; font: inherit; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.benchmark-tab-button:hover { color: var(--ink); background: none; }
.benchmark-tab-button.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.benchmark-tab-panel[hidden] { display: none; }
.scorecard-method-preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin: .5rem 0 .8rem; }
.scorecard-method-preview span { display: grid; gap: .15rem; padding: .65rem; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-soft); font-size: .7rem; }
.scorecard-method-preview strong { color: var(--ink); font: 700 .9rem var(--font-mono); }

/* Supplier scorecard */
.supplier-scorecard { overflow: hidden; }
.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; }
.scorecard-full-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1rem; }
.scorecard-full-heading h1 { margin: .15rem 0 .35rem; }
.scorecard-full-heading .hint { max-width: 46rem; margin: 0; }
.scorecard-back-link { flex: 0 0 auto; }
.scorecard-full-card { margin-top: 0; }
/* Availability keeps its matrix internally scrollable, but its card owns the
   page through the viewport instead of leaving a detached blank tail. */
#airline-availability { min-height: 100vh; }
.scorecard-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.scorecard-view-title { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; }
.scorecard-jv-scope { margin: .35rem 0 0; color: var(--ink-soft); font: .74rem var(--font-mono); }
.scorecard-vintage { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: .35rem 0 0; color: var(--ink-soft); font: .74rem var(--font-mono); }
.scorecard-vintage-stale { padding: .1rem .45rem; border-radius: 999px; background: var(--danger-soft); color: var(--danger); }
.scorecard-filter-bar { display: flex; align-items: end; gap: .75rem; margin: 0; }
.scorecard-filter-bar .price-matrix-field { min-width: 9rem; }
@media (max-width: 560px) { .scorecard-filter-bar { flex-wrap: wrap; width: 100%; } .scorecard-filter-bar .price-matrix-field { flex: 1 1 45%; } }
.scorecard-availability-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.scorecard-availability-heading h2 { margin: .15rem 0 .35rem; }
.scorecard-availability-heading .hint { margin: 0; }
/* One toolbar row on the right instead of two independent forms stacked
   against the card edge — keeps the header from reading as crowded. */
.availability-heading-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: .6rem; }
.availability-scope-control { display: flex; align-items: center; gap: .5rem; }
.availability-scope-control label.checkbox { margin: 0; }
.availability-override-controls { display: flex; flex: 0 0 auto; align-items: center; }
.availability-override-edit-actions { display: flex; align-items: center; gap: .5rem; }
/* Info icon: the coverage explanation used to run as a paragraph under the
   kicker; it now sits behind a hover/focus tooltip so the header stays a
   single line. Native title attribute — no tooltip component exists yet. */
.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  margin-left: .3rem;
  padding: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  font: 600 .62rem var(--font-mono);
  line-height: 1;
  cursor: help;
  vertical-align: middle;
}
.info-icon:hover, .info-icon:focus-visible { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
/* Carrier filter above the availability grid. */
.availability-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}
.availability-filter label {
  color: var(--ink-soft);
  font: 700 var(--text-2xs) var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.availability-filter input {
  width: 11rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
}
.availability-filter input::placeholder { color: var(--ink-faint); text-transform: none; }
.availability-filter-count { color: var(--ink-soft); font-size: var(--text-sm); }
/* Cabin dropdown otherwise falls back to the generic `form select` rule
   (taller, monospace, heavier border) which reads as a mismatched, squared-off
   control next to the carrier search box — bring it into the same shape. */
.availability-filter select {
  min-height: 0;
  width: auto;
  padding: 0.4rem 1.75rem 0.4rem 0.6rem;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.6rem center;
  background-size: 0.6rem;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  appearance: none;
  -webkit-appearance: none;
}

.availability-edit-hint { margin: 0 0 1rem; color: var(--accent); font-size: .82rem; font-weight: 600; }
/* The grid scrolls inside this box in both axes. The height cap is what makes
   the sticky header rows below work at all: a sticky cell sticks to its nearest
   scrolling ancestor, and with the container as tall as its content the page
   would be the only thing scrolling, so the headers would never engage. */
.scorecard-availability-scroll { overflow: auto; max-height: var(--fill-viewport-height, calc(100vh - 5.5rem)); border: 1px solid var(--hairline); border-radius: var(--radius-sm); }
.availability-grid-frame { position: relative; }
.availability-grid-expand {
  position: absolute;
  z-index: 6;
  top: .45rem;
  right: .45rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 1.1rem;
  line-height: 1;
}
.availability-grid-expand:hover { color: var(--ink); background: var(--surface-hover); }
.availability-grid-frame.is-expanded .scorecard-availability-scroll {
  max-height: none;
  overflow-x: auto;
  overflow-y: hidden;
}
/* Sticky cells lose their borders under border-collapse: collapse (the border
   belongs to the merged grid, not the cell, so it stays behind while the cell
   moves), so the grid draws per-cell hairlines instead -- only bottom borders
   are set, so nothing doubles up. */
.scorecard-availability-table {
  --availability-head-row: 2.2rem;
  min-width: max-content;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
/* Both header rows freeze on vertical scroll. The explicit row height is what
   the second row's offset is measured against -- it is a floor for the row, and
   the supplier/PCC labels are well short of it, so the two stay flush. */
.scorecard-availability-table thead th {
  position: sticky;
  z-index: 3;
  height: var(--availability-head-row);
  background: var(--surface);
  background-clip: padding-box;
}
.scorecard-availability-table thead tr:first-child th { top: 0; }
.scorecard-availability-table thead tr + tr th { top: var(--availability-head-row); }
/* The airline column freezes on horizontal scroll, so a cell deep in the PCC
   columns still says which carrier it belongs to. The header cell is matched by
   row, not by :first-child alone -- it carries rowspan="2", so the second header
   row's first cell is a PCC column, not the airline label. */
.scorecard-availability-table thead tr:first-child th:first-child,
.scorecard-availability-table tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  white-space: nowrap;
  background: var(--surface);
  background-clip: padding-box;
  box-shadow: 3px 0 4px rgba(0, 0, 0, 0.12);
}
/* The corner cell is frozen in both axes, so it has to sit above the header row
   sliding under it as well as the body column. */
.scorecard-availability-table thead tr:first-child th:first-child { z-index: 5; }
/* Row hover would otherwise stop at the frozen column, which reads as the two
   halves of the row being unrelated. --bg-elevated is translucent by design, so
   it is layered over the surface here rather than replacing it -- a see-through
   frozen column would show the fare cells sliding under it. */
.scorecard-availability-table tbody tr:hover td:first-child {
  background: linear-gradient(var(--bg-elevated), var(--bg-elevated)), var(--surface);
}
.scorecard-availability-table th:not(:first-child), .scorecard-availability-cell { min-width: 6rem; text-align: center; }
.scorecard-availability-cell { font: 700 .9rem var(--font-mono); }
.scorecard-availability-cell.is-available { color: var(--success); background: color-mix(in srgb, var(--success) 7%, transparent); }
.scorecard-availability-cell.is-available-sr { color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
/* One colour per cheapest-fare type. A type with no colour of its own still
   renders its label, on the plain available green. */
.scorecard-availability-cell.is-fare-sr { color: var(--fare-sr); background: color-mix(in srgb, var(--fare-sr) 7%, transparent); }
.scorecard-availability-cell.is-fare-comm { color: var(--fare-comm); background: color-mix(in srgb, var(--fare-comm) 8%, transparent); }
.scorecard-availability-cell.is-fare-tour { color: var(--fare-tour); background: color-mix(in srgb, var(--fare-tour) 9%, transparent); }
.scorecard-availability-cell.is-fare-pub { color: var(--fare-pub); background: color-mix(in srgb, var(--fare-pub) 7%, transparent); }
.scorecard-availability-cell.is-fare-ndc { color: var(--fare-ndc); background: color-mix(in srgb, var(--fare-ndc) 9%, transparent); }
/* The hover breakdown is the only place the per-type tally is readable. */
.scorecard-availability-cell[data-fare-mix] { cursor: help; }

/* Fare-mix hover breakdown. One element for the whole grid, moved and refilled
   per cell -- the grid runs to thousands of cells, so nothing here may be
   per-cell. pointer-events stay off so it can never swallow a click in the
   manual-override edit mode it floats over. */
.availability-fare-mix {
  position: fixed;
  z-index: var(--z-dropdown);
  width: 13.5rem;
  padding: .6rem .7rem .55rem;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  pointer-events: none;
  opacity: 0;
  transition: opacity 90ms var(--ease);
}
.availability-fare-mix.is-visible { opacity: 1; }
.availability-fare-mix[hidden] { display: none; }
/* Share of the cell's fares by type, in the same rank order as the rows below,
   so the bar and the list read as one figure. */
.availability-fare-mix-bar { display: flex; gap: 1px; height: .4rem; margin-bottom: .55rem; border-radius: 999px; overflow: hidden; }
.availability-fare-mix-bar span { background: var(--fare-mix-color, var(--ink-faint)); opacity: .45; }
.availability-fare-mix-bar span.is-cheapest { opacity: 1; }
.availability-fare-mix-row { display: flex; align-items: baseline; gap: .4rem; font: 700 .72rem var(--font-mono); line-height: 1.7; }
.availability-fare-mix-row b { color: var(--fare-mix-color, var(--ink)); font-weight: 700; }
.availability-fare-mix-row i { flex: 1; font-style: normal; font-weight: 400; font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fare-mix-color, var(--ink-faint)); }
.availability-fare-mix-row em { font-style: normal; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
/* The sweep prices one test route on one date, so this is scope evidence, not
   a fare quote -- it says so rather than sitting next to the counts unlabelled. */
.availability-fare-mix-note { margin: .5rem 0 0; padding-top: .45rem; border-top: 1px solid var(--hairline); font-family: var(--font-sans); font-size: .68rem; line-height: 1.45; color: var(--ink-faint); }
@media (prefers-reduced-motion: reduce) {
  .availability-fare-mix { transition: none; }
}
.availability-fare-legend { display: flex; flex-wrap: wrap; gap: .35rem .5rem; margin: .6rem 0 0; padding: 0; list-style: none; font-size: .78rem; }
.availability-fare-legend li { display: flex; align-items: baseline; gap: .35rem; padding: .1rem .45rem; border-radius: .3rem; color: var(--ink-soft); }
.availability-fare-legend li span { font: 700 .72rem var(--font-mono); }
.availability-fare-legend li.is-fare-sr span { color: var(--fare-sr); }
.availability-fare-legend li.is-fare-comm span { color: var(--fare-comm); }
.availability-fare-legend li.is-fare-tour span { color: var(--fare-tour); }
.availability-fare-legend li.is-fare-pub span { color: var(--fare-pub); }
.availability-fare-legend li.is-fare-ndc span { color: var(--fare-ndc); }
.scorecard-availability-cell.is-manual-change { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 65%, transparent); }
.availability-cell-edit-button { min-width: 2.3rem; padding: .35rem .55rem; border: 1px solid currentColor; border-radius: .35rem; background: transparent; color: inherit; font: inherit; line-height: 1; }
.availability-cell-edit-button:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.availability-cell-edit-button:focus-visible { outline-color: currentColor; }
.availability-tabs { display: flex; flex-wrap: wrap; gap: .35rem; border-bottom: 1px solid var(--hairline-strong); margin-bottom: 1rem; }
.availability-tab-button { background: none; border: none; border-bottom: 2px solid transparent; padding: .6rem .9rem; font: inherit; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.availability-tab-button:hover { color: var(--ink); background: none; }
.availability-tab-button.is-active { color: var(--accent); border-bottom-color: var(--accent); }
/* GDS tabs on one side, the NDC channel tab on the other. */
.availability-tab-divider { width: 1px; align-self: stretch; margin: 0.55rem 0.35rem; background: var(--hairline-strong); }
.availability-tab-panel[hidden] { display: none; }
.availability-tab-panel + .availability-tab-panel { margin-top: 1rem; }
.scorecard-availability-cell.is-unavailable { color: var(--danger); background: color-mix(in srgb, var(--danger) 5%, transparent); }
.availability-update-log { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--hairline); }
.availability-update-log-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.availability-update-log-heading h2 { margin: .15rem 0 0; font-size: 1.05rem; }
.availability-update-log-heading .hint { margin: 0; }
.availability-update-log-scroll { max-height: 22rem; overflow: auto; border: 1px solid var(--hairline); border-radius: var(--radius-sm); }
.availability-update-log-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.availability-update-log-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); }
.availability-update-log-table { min-width: 46rem; width: 100%; }
.availability-update-log-table td:first-child { white-space: nowrap; font: .72rem var(--font-mono); color: var(--ink-soft); }
.availability-update-log-empty { margin: 0; }

.availability-override-log { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--hairline); }
.availability-override-log-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.availability-override-log-heading h2 { margin: .15rem 0 0; font-size: 1.05rem; }
.availability-override-log-heading .hint { margin: 0; }
/* "Latest 50 changes" in a card: an internal scroller keeps the card compact and
   makes a sticky header possible. */
.availability-override-log-scroll { max-height: 22rem; overflow: auto; border: 1px solid var(--hairline); border-radius: var(--radius-sm); }
.availability-override-log-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.availability-override-log-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); }
.availability-override-log-table { min-width: 46rem; width: 100%; }
.availability-override-log-table td:first-child { white-space: nowrap; font: .72rem var(--font-mono); color: var(--ink-soft); }
.availability-log-decision { font: 700 .74rem var(--font-mono); }
.availability-log-decision.is-available { color: var(--success); }
.availability-log-decision.is-unavailable { color: var(--danger); }
.availability-log-decision.is-new { color: var(--accent); }
.availability-override-log-empty { margin: 0; }
@media (max-width: 620px) { .scorecard-availability-heading { align-items: flex-start; flex-direction: column; } .availability-override-controls { width: 100%; } }
.scorecard-heading h2 { margin: 0 0 .35rem; }
.scorecard-heading .hint { max-width: 46rem; margin: 0; }
.scorecard-weight-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin: 1.25rem 0; overflow: hidden; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--hairline); }
.scorecard-weight-strip div { display: grid; gap: .22rem; min-height: 4.35rem; padding: .75rem .85rem; background: var(--surface-2); }
.scorecard-weight-strip strong { color: var(--accent); font: 700 1.05rem var(--font-mono); }
.scorecard-weight-strip span { color: var(--ink-soft); font-size: .72rem; line-height: 1.35; }
.scorecard-overview { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 1rem; margin-bottom: 1.2rem; }
.scorecard-leader-panel, .scorecard-pair-panel { min-height: 10rem; padding: 1rem; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface-2); }
.scorecard-leader-panel { background: linear-gradient(145deg, var(--accent-soft), var(--surface-2) 70%); }
.scorecard-leader-name { display: flex; align-items: center; gap: .55rem; margin-top: .55rem; }
.scorecard-leader-name > strong { color: var(--ink); font-size: 1.1rem; }
.baseline-chip { padding: .2rem .42rem; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--hairline)); border-radius: 999px; color: var(--accent); font: 600 .59rem var(--font-mono); text-transform: uppercase; }
.scorecard-leader-score { display: flex; align-items: baseline; gap: .35rem; margin-top: .7rem; }
.scorecard-leader-score strong { color: var(--ink); font: 700 2.05rem var(--font-mono); }
.scorecard-leader-score span { color: var(--ink-soft); font: .72rem var(--font-mono); }
/* Marketed-codeshare rows (AA*BA) nest directly under their marketing
   carrier's own row, behind a small expand arrow in that row's first cell --
   collapsed (native `hidden`) until the arrow is toggled, so a JS failure
   leaves them hidden rather than dumped in view. */
.availability-codeshare-hint { margin: .5rem 0 .35rem; font-size: .68rem; }
/* The whole control -- arrow and carrier code together -- is one button, so
   clicking the code itself expands the row and not just the tiny arrow. */
.availability-codeshare-expand {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  border: none;
  outline: none;
  background: none;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  cursor: pointer;
}
.availability-codeshare-expand:hover { color: var(--accent); }
.availability-codeshare-expand:focus-visible { outline: none; }
.availability-codeshare-arrow {
  display: inline-block;
  font-size: .65rem;
  color: var(--ink-soft);
  transition: transform .1s ease;
}
.availability-codeshare-expand:hover .availability-codeshare-arrow { color: var(--ink); }
.availability-codeshare-expand[aria-expanded="true"] .availability-codeshare-arrow { transform: rotate(90deg); }
.availability-codeshare-row > td:first-child { color: var(--accent); }

.scorecard-overall-meter, .factor-meter { overflow: hidden; background: var(--hairline-strong); border-radius: 999px; }
.scorecard-overall-meter { height: .42rem; margin-top: .45rem; }
.scorecard-overall-meter span, .factor-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--success)); }
.scorecard-leader-panel p, .scorecard-pair-panel p { margin: .65rem 0 0; color: var(--ink-soft); font-size: .74rem; line-height: 1.45; }
.scorecard-pairs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.scorecard-pairs > span { display: grid; grid-template-columns: auto auto auto; gap: .25rem; align-items: baseline; padding: .5rem .6rem; border: 1px solid var(--hairline); border-radius: var(--radius-sm); color: var(--ink-soft); font-size: .72rem; }
.scorecard-pairs strong { color: var(--ink); }
.scorecard-pairs small { grid-column: 1 / -1; color: var(--ink-soft); font: .61rem var(--font-mono); }
.scorecard-table-wrap { margin: 0 -1.25rem; overflow-x: auto; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.scorecard-table { min-width: 1140px; }
.scorecard-table th { padding-top: .7rem; padding-bottom: .7rem; white-space: nowrap; }
.scorecard-table th span { margin-left: .2rem; color: var(--accent); }
.scorecard-table td { padding-top: .85rem; padding-bottom: .85rem; }
.scorecard-table td:first-child { padding-left: 1.25rem; }
.scorecard-table th:first-child { padding-left: 1.25rem; }
.scorecard-supplier { display: flex; align-items: center; gap: .65rem; min-width: 8.5rem; }
.scorecard-supplier > div { display: grid; gap: .15rem; }
.scorecard-supplier small { color: var(--ink-soft); font-size: .63rem; text-transform: capitalize; }
.scorecard-overall-cell { display: grid; gap: .12rem; }
.scorecard-overall-cell strong { color: var(--ink); font: 700 1rem var(--font-mono); }
.scorecard-overall-cell span { color: var(--ink-soft); font-size: .66rem; }
.factor-score { display: grid; grid-template-columns: 2.5rem minmax(4rem, 1fr); gap: .25rem .45rem; align-items: center; min-width: 7rem; }
.factor-score > strong { color: var(--ink); font: 600 .78rem var(--font-mono); }
.factor-meter { height: .3rem; }
.factor-score small { grid-column: 1 / -1; max-width: 10.5rem; color: var(--ink-soft); font-size: .6rem; line-height: 1.3; }
.interchangeable-list { display: inline-block; max-width: 10rem; color: var(--success); font-size: .7rem; line-height: 1.35; }
.missing-airlines { display: flex; flex-wrap: wrap; gap: .25rem; min-width: 6rem; }
.missing-airlines span { padding: .16rem .34rem; border: 1px solid color-mix(in srgb, var(--danger) 32%, var(--hairline)); border-radius: 999px; background: color-mix(in srgb, var(--danger) 7%, transparent); color: var(--danger); font: 600 .62rem var(--font-mono); }
.availability-complete { color: var(--success); font-size: .68rem; }
.pcc-availability { display: flex; flex-direction: column; gap: .2rem; min-width: 9rem; }
.pcc-availability-row { display: flex; align-items: baseline; gap: .35rem; font-size: .68rem; }
.pcc-availability-row strong { font: 700 .62rem var(--font-mono); }
.pcc-availability-missing { color: var(--danger); }
.pcc-availability-complete { color: var(--success); }
.muted-dash { color: var(--ink-faint); }
.scorecard-evidence-link { padding: .4rem .55rem; white-space: nowrap; }
.scorecard-evidence-link span { color: var(--accent); font-size: .9rem; line-height: .7; transition: transform .16s var(--ease); }
.scorecard-evidence-link:hover span { transform: translateX(.14rem); }
.scorecard-methodology { margin-top: 1rem; }
.scorecard-methodology summary { color: var(--ink); font-size: .78rem; font-weight: 600; cursor: pointer; }
.scorecard-methodology-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-top: .75rem; }
.scorecard-methodology-grid > div { padding: .75rem; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface-2); }
.scorecard-methodology-grid strong { color: var(--ink); font-size: .74rem; }
.scorecard-methodology-grid p { margin: .35rem 0 0; color: var(--ink-soft); font-size: .7rem; line-height: 1.45; }
.scorecard-empty { display: grid; justify-items: start; gap: .45rem; padding: 1.25rem; border: 1px dashed var(--hairline-strong); border-radius: var(--radius-sm); background: var(--surface-2); }
.scorecard-empty strong { color: var(--ink); }
.scorecard-empty p { max-width: 45rem; margin: 0; color: var(--ink-soft); font-size: .78rem; line-height: 1.5; }
.scorecard-run-link { display: inline-flex; margin-top: .35rem; padding: .55rem .85rem; border-radius: var(--radius-sm); font-size: .78rem; font-weight: 600; }

@media (max-width: 820px) {
  .scorecard-full-heading { align-items: stretch; flex-direction: column; }
  .scorecard-back-link { justify-content: center; width: 100%; }
  .scorecard-heading { align-items: stretch; flex-direction: column; }
  .scorecard-weight-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scorecard-overview { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .scorecard-method-preview, .scorecard-weight-strip, .scorecard-methodology-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .scorecard-action, .scorecard-evidence-link, .scorecard-evidence-link span { transition: none; }
}

/* PCC registry form */
.pcc-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 7rem auto;
  gap: 0.5rem;
  align-items: center;
}
.pcc-form input { min-width: 0; }
.job-type-input { width: 100%; max-width: 100%; box-sizing: border-box; }
.pcc-group { margin: 0 0 0.6rem; }
.pcc-group:last-child { margin-bottom: 0; }
.pcc-group-label {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.pcc-assignment { display: flex; gap: 0.45rem; align-items: center; margin: 0.2rem 0; }
.pcc-assignment .button-danger { padding: 0.22rem 0.5rem; font-size: 0.72rem; }

.governance-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; white-space: nowrap; min-height: 1.9rem; }
.queue-toolbar { display: flex; gap: 0.65rem; flex-wrap: wrap; margin: 1rem 0; }
.governance-queue { border-top: 1px solid var(--hairline); }
.governance-queue-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--hairline);
}
.governance-queue-run { display: flex; align-items: baseline; min-width: 0; gap: 0.5rem; }
.governance-queue-run strong { color: var(--ink); font-size: 0.9rem; }
.governance-queue-run span { overflow: hidden; color: var(--ink-soft); font: 0.75rem var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.governance-queue-row button { min-width: 10.5rem; white-space: nowrap; }

/* Readiness stays scannable at every width: compact numeric columns and semantic pills. */
.onboarding-table-wrap { overflow-x: auto; }
.onboarding-table { min-width: 700px; }
.onboarding-table th:nth-child(1) { width: 18%; }
.onboarding-table th:nth-child(2) { width: 24%; }
.onboarding-table th:nth-child(3), .onboarding-table th:nth-child(4), .onboarding-table th:nth-child(5) { width: 13%; }
.onboarding-table th:nth-child(6) { width: 19%; }
.onboarding-supplier { font-weight: 600; }
.onboarding-number { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.lifecycle-badge, .readiness-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lifecycle-badge--established, .readiness-badge--ready { color: var(--success); background: var(--success-soft); }
.lifecycle-badge--prospective, .readiness-badge--needs-evidence { color: var(--pending); background: var(--pending-soft); }
.readiness-badge--needs-benchmark { color: var(--danger); background: var(--danger-soft); }
.pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.9rem;
  color: var(--ink-soft);
  font-size: 0.82rem;
}
.pagination .button-secondary { padding: 0.4rem 0.85rem; font-size: 0.78rem; }
/* Breadcrumb: orientation for pages two or more levels deep. Replaces
   .run-back-link, which hardcoded a single origin the page did not always
   come from. */
.breadcrumb { margin: 0 0 var(--space-3); }
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}
.breadcrumb li { display: flex; align-items: center; gap: var(--space-2); }
/* A separator drawn by CSS rather than a text node, so a screen reader reads
   the trail as a plain list. */
.breadcrumb li + li::before {
  content: "";
  width: 0.32rem;
  height: 0.32rem;
  border-top: 1px solid var(--ink-faint);
  border-right: 1px solid var(--ink-faint);
  transform: rotate(45deg);
}
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumb [aria-current="page"] {
  color: var(--ink);
  font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
}
.queue-details {
  border-top: 1px solid var(--hairline);
  padding: 0.75rem 0;
}
.queue-details summary {
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 600;
}
/* The generic horizontal scroller for wide tables. A scrollable region has to be
   focusable or a keyboard user cannot reach the columns past the fold, and it
   needs a visible focus ring once it is. */
.table-scroll { overflow-x: auto; }
.table-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }

/* A sticky header only works when the table's own wrapper is the vertical scroll
   container. A plain .table-scroll is not: overflow-x: auto computes overflow-y
   to auto too, so the page keeps the vertical scroll and `top: 0` would stick to
   a box that scrolls away. This modifier gives the wrapper a height, which makes
   sticky meaningful -- worth it for long tables (the price-gap list is 100 rows
   at 1240px wide and loses all column context on the way down) and not worth it
   for short ones. */
.table-scroll--tall {
  max-height: var(--fill-viewport-height, min(70vh, 40rem));
  overflow: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
}
.table-scroll--tall thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
}
.comparable-fares { min-width: 1240px; }
.itinerary-cell {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  white-space: pre;
}

.alert-row td:first-child { color: var(--danger); font-weight: 600; }

.action-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.action-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.85rem;
}
.action-list li:last-child { border-bottom: none; }

@media (max-width: 640px) {
  .content { margin: 1.25rem auto 2rem; }
  .pcc-form { grid-template-columns: 1fr; }
  .topbar { position: sticky; flex-direction: column; align-items: flex-start; gap: 0.4rem; padding-block: 0.65rem; }
  .topbar nav { width: 100%; overflow-x: auto; padding-bottom: 0.1rem; }
  .profile-trigger-email { display: none; }
  .admin-panel { width: min(100%, 34rem); padding: 1rem 1rem 2rem; }
  .job-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .governance-queue-row { align-items: flex-start; flex-direction: column; padding: 0.8rem 0; }
  .governance-queue-row button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar-fill { transition: none; }
  #jobs-table tr[data-status="running"] td:first-child::before { animation: none; }
  .admin-overlay, .admin-panel { transition: none; }
}

@media (max-width: 900px) {
  .app-main { margin-left: 0; }
  .sidebar-toggle { display: flex; }
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s var(--ease);
    box-shadow: 0 0 0 100vmax transparent;
  }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-scrim[data-sidebar-scrim] {
    display: block;
    position: fixed;
    inset: 0;
    z-index: var(--z-scrim);
    background: rgba(0, 0, 0, 0.4);
  }
  .sidebar-scrim[hidden] { display: none; }
  .topbar { padding-left: calc(var(--page-gutter) + 2.6rem); }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

/* Login */
.login-topbar { display: none; }
.login-content {
  display: grid;
  min-height: 100vh;
  margin: 0 auto;
  place-items: center;
}
.login-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  padding: 1.5rem 0;
}
.login-eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.login-mark {
  display: block;
  /* Larger than the sidebar's 2rem so the aircraft on the flight path actually
     resolve; below roughly 4rem they collapse into thickenings on the line. */
  width: 4.8rem;
  height: 4.8rem;
  margin: 0 0 1rem;
  color: var(--ink);
  animation: login-mark-in 0.5s var(--ease) both;
}
.login-mark svg { width: 100%; height: 100%; stroke-width: 1.3; }
@keyframes login-mark-in {
  from { opacity: 0; transform: translateY(6px) scale(0.9); }
  to { opacity: 1; transform: none; }
}
.login-title {
  margin: 0 0 1.1rem;
  padding-bottom: 0.15em;
  font-size: clamp(2.4rem, 2rem + 3vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.25;
}
.login-title-sky {
  background: linear-gradient(135deg, var(--ink) 30%, var(--ink-soft) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.login-title-net {
  background: linear-gradient(135deg, var(--accent) 10%, var(--ink) 140%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}
.login-subtitle {
  margin: 0 0 2.5rem;
  max-width: 30rem;
  font-size: 1.02rem;
  color: var(--ink-soft);
}
.login-card {
  width: 100%;
  max-width: 380px;
  text-align: left;
  animation: login-card-in 0.5s var(--ease) both;
}
.login-remember {
  display: block;
  margin: 0.1rem 0 0.9rem;
}
.login-card form > button[type="submit"] {
  display: block;
  margin: 0 auto;
}
@keyframes login-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .login-card { animation: none; }
}

@media (max-width: 1100px) {
  .dashboard-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-summary-group--latest {
    grid-column: 1 / -1; margin-top: var(--space-3); padding: var(--space-3) 0 0;
    border-top: 1px solid var(--hairline);
  }
  .dashboard-summary-group--latest.dashboard-summary-group { border-left: 0; }
}

@media (max-width: 760px) {
  .topbar { align-items: flex-start; gap: .75rem; }
  .topbar-start { flex-wrap: wrap; gap: .45rem; }
  .topbar .brand { width: 100%; }
  .topbar nav { justify-content: flex-end; flex-wrap: wrap; }
  .dashboard-heading { align-items: start; flex-direction: column; }
  .dashboard-run-button { width: 100%; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-summary { grid-template-columns: 1fr; }
  .dashboard-summary-group,
  .dashboard-summary-group:first-child,
  .dashboard-summary-group:last-child { padding: 0; }
  .dashboard-summary-group + .dashboard-summary-group {
    margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--hairline); border-left: 0;
  }
  .dashboard-summary-group--latest { grid-column: auto; }
}

/*
 * price-matrix-table has fixed airline and route columns plus one
 * column per supplier, and the supplier count is dynamic. Now that .jobs-table
 * is auto-layout by default (see above), columns size to content; these rules
 * just keep price/status text from wrapping mid-value once cells get narrow.
 */
.price-matrix-table {
  --matrix-airline-width: 4.75rem;
  --matrix-route-width: 5.75rem;
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.price-matrix-table th:first-child,
/* Sticky-header and frozen-column stacking is local to the table and is
   deliberately outside the page-level --z-* scale: these only compete with
   each other, never with page chrome. */
.price-matrix-table td:first-child {
  white-space: nowrap;
  position: sticky;
  left: 0;
  z-index: 2;
  width: var(--matrix-airline-width);
  min-width: var(--matrix-airline-width);
  max-width: var(--matrix-airline-width);
  background: var(--surface);
  background-clip: padding-box;
}
.price-matrix-table th:nth-child(2),
.price-matrix-table td:nth-child(2) {
  white-space: nowrap;
  position: sticky;
  left: var(--matrix-airline-width);
  z-index: 2;
  width: var(--matrix-route-width);
  min-width: var(--matrix-route-width);
  max-width: var(--matrix-route-width);
  background: var(--surface);
  background-clip: padding-box;
  box-shadow: 3px 0 4px rgba(0, 0, 0, 0.12);
}
.price-matrix-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--surface);
  background-clip: padding-box;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
}
.price-matrix-table thead th:first-child,
.price-matrix-table thead th:nth-child(2) {
  z-index: 4;
}
/* The shared table hover color is intentionally translucent. Frozen cells
   must stay opaque, otherwise the horizontally-scrolled itinerary and price
   text paints through Airline and Route while a row is hovered. */
.price-matrix-table tbody tr:hover td:first-child,
.price-matrix-table tbody tr:hover td:nth-child(2) {
  background: var(--surface-hover);
}
.price-matrix-table th:nth-child(n + 4),
.price-matrix-table td:nth-child(n + 4) {
  white-space: nowrap;
  padding-left: 1rem;
  padding-right: 1rem;
}
.price-matrix-table .itinerary-key {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  white-space: pre;
  margin: 0;
}
.price-matrix-table td.price-cheapest {
  font-weight: 600;
  color: var(--accent, #0a84ff);
}
.price-matrix-table .fare-type {
  display: inline-block;
  margin-left: 0.35rem;
}
/* The season label stands alone: the itinerary column already carries each
   segment's date, so repeating the travel dates here was redundant. */
.price-matrix-table .price-matrix-dates {
  white-space: nowrap;
}
.price-matrix-table .price-matrix-dates .fare-type {
  display: block;
  margin-left: 0;
}
.price-matrix-table .availability-none {
  display: inline-block;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-style: italic;
  white-space: nowrap;
}
.price-matrix-market-link {
  appearance: none;
  padding: 0;
  border: 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.price-matrix-market-link:hover,
.price-matrix-market-link:focus-visible { background: transparent; color: var(--accent); }
/* A weaker comparison tier must be legible at a glance, so a price is never
   read as an exact like-for-like match when it is not one. Exact matches carry
   no badge, so the badge itself signals "read this with care". */
.price-matrix-table .match-tier {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.price-matrix-table .match-tier-near {
  box-shadow: inset 3px 0 0 var(--pending);
}
.price-matrix-table .match-tier-carrier {
  box-shadow: inset 3px 0 0 var(--ink-soft, #8a94a6);
}

/* Scorecard scope filters apply on demand via the Adjust score button, and the
   card is covered by a flight-path progress state while the new scope loads. */
.scorecard-adjust-field { flex: 0 0 auto; min-width: 0; }
.scorecard-filter-bar .scorecard-adjust-field { min-width: 0; }
.scorecard-adjust-button { width: auto; padding-inline: 1.1rem; }
.scorecard-adjust-button[disabled] { opacity: .55; cursor: progress; }

#supplier-scorecard { position: relative; }
#supplier-scorecard.is-adjusting > *:not(.scorecard-adjusting) {
  filter: blur(7px) saturate(.6);
  pointer-events: none;
  user-select: none;
}
.scorecard-adjusting {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  align-content: start;
  justify-items: center;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 74%, transparent);
}
.scorecard-adjusting[hidden] { display: none; }
/* Sticky so the progress state stays in view on a tall scorecard table, and
   clamps inside the card when the table is short. */
.scorecard-adjusting-panel {
  position: sticky;
  top: max(1.5rem, 22vh);
  display: grid;
  justify-items: center;
  gap: .55rem;
  width: min(100%, 24rem);
  text-align: center;
}
.scorecard-adjusting-title { color: var(--ink); font-size: 1.05rem; }
.scorecard-adjusting-scope {
  margin: 0;
  color: var(--accent);
  font: 700 .68rem var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.scorecard-adjusting-scope:empty { display: none; }
.scorecard-adjusting-note { margin: .15rem 0 0; color: var(--ink-soft); font-size: .78rem; }

.scorecard-adjusting-progress {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  margin-top: .2rem;
}
.scorecard-adjusting-meter {
  flex: 1 1 auto;
  height: 4px;
  border-radius: 999px;
  background: var(--hairline-strong);
  overflow: hidden;
}
.scorecard-adjusting-meter span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width .28s var(--ease);
}
.scorecard-adjusting-percent {
  flex: 0 0 auto;
  min-width: 2.6rem;
  color: var(--ink);
  font: 700 .8rem var(--font-mono);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* The flight path is drawn at a fixed 320x88 so the plane's motion path lines
   up with the SVG curve exactly; smaller viewports scale the whole block. */
.scorecard-adjusting-flightpath {
  position: relative;
  width: 320px;
  height: 88px;
  margin-bottom: -.35rem;
  overflow: hidden;
}
.scorecard-adjusting-flightpath svg { display: block; width: 320px; height: 88px; overflow: visible; }
.flightpath-track {
  fill: none;
  stroke: var(--hairline-strong);
  stroke-width: 1.5;
  stroke-dasharray: 3 6;
  stroke-linecap: round;
}
.flightpath-trail {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: flightpath-draw 2.8s var(--ease) infinite;
}
.flightpath-node { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5; }
.flightpath-node-dest { animation: flightpath-arrive 2.8s var(--ease) infinite; }
.flightpath-plane {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  color: var(--ink);
  offset-path: path("M14 70 C 92 8, 228 8, 306 70");
  offset-rotate: auto;
  offset-distance: 0%;
  animation: flightpath-fly 2.8s var(--ease) infinite;
}
.flightpath-plane svg { width: 22px; height: 22px; fill: currentColor; }
.flightpath-cloud {
  position: absolute;
  height: 6px;
  border-radius: 999px;
  background: var(--hairline);
  animation: flightpath-drift 9s linear infinite;
}
.flightpath-cloud-1 { top: 22px; width: 42px; }
.flightpath-cloud-2 { top: 52px; width: 26px; animation-duration: 13s; animation-delay: -4s; }

@keyframes flightpath-fly {
  0% { offset-distance: 0%; opacity: 0; }
  8%, 88% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes flightpath-draw {
  0% { stroke-dashoffset: 1; }
  100% { stroke-dashoffset: 0; }
}
@keyframes flightpath-arrive {
  0%, 70% { fill: var(--surface); }
  100% { fill: var(--accent); }
}
@keyframes flightpath-drift {
  0% { transform: translateX(340px); }
  100% { transform: translateX(-60px); }
}

@media (max-width: 560px) {
  .scorecard-adjust-field { flex: 1 1 100%; }
  .scorecard-adjust-field .price-matrix-field-label { display: none; }
  .scorecard-adjust-button { width: 100%; }
  .scorecard-adjusting-flightpath { transform: scale(.78); margin-block: -.6rem -1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .flightpath-trail,
  .flightpath-node-dest,
  .flightpath-cloud { animation: none; }
  .flightpath-trail { stroke-dashoffset: 0; }
  .flightpath-cloud { display: none; }
  .flightpath-plane { animation: none; offset-distance: 50%; }
}

/* The brand doubles as the product switcher. Opens on hover for the mouse, on
   :focus-within for the keyboard, and on [data-open] for touch, where hover
   does not exist -- all three, or the switcher is unreachable for someone. */
.brand-switch { position: relative; }
.brand-switch-caret { margin-left: auto; color: var(--ink-faint); font-size: var(--text-xs); opacity: 0; transition: opacity 120ms ease; }
.brand-switch:hover .brand-switch-caret, .brand-switch:focus-within .brand-switch-caret { opacity: 1; }
.brand-switch-menu {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
  display: none; flex-direction: column; gap: 2px; padding: 4px;
  /* --surface-2, not --bg-elevated: the latter is rgba(255,255,255,.035), an
     overlay meant to sit ON a surface. As a floating popover's own background
     it is 96% transparent, and the sidebar links behind it read straight
     through the menu. A popover needs an opaque ground. */
  background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-2);
}
.brand-switch:hover .brand-switch-menu,
.brand-switch:focus-within .brand-switch-menu,
.brand-switch[data-open] .brand-switch-menu { display: flex; }
.brand-switch-item { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: var(--radius-sm); color: var(--ink-soft); text-decoration: none; }
.brand-switch-item:hover { background: var(--surface-hover); color: var(--ink); text-decoration: none; }
.brand-switch-item.is-current { color: var(--ink); }
.brand-switch-note { margin-left: auto; color: var(--ink-faint); font-size: var(--text-xs); }

.price-gap-cell { display: grid; gap: .2rem; min-width: 8.5rem; }
.price-gap-cell > strong { font: 700 .95rem var(--font-mono); letter-spacing: -.01em; }
.price-gap-cell small { color: var(--ink-soft); font-size: .6rem; line-height: 1.3; }
.price-gap-cell[data-direction="cheaper"] > strong { color: var(--success); }
.price-gap-cell[data-direction="pricier"] > strong { color: var(--danger); }
.price-gap-cell[data-direction="level"] > strong,
.price-gap-cell[data-direction="none"] > strong { color: var(--ink-soft); }