/* Linebooker design tokens — the client design system, ported byte-for-byte from the
   Linebooker Finance build's theme/tokens.css (brand triad + canvas/surface/type). */
:root {
  /* Linebooker brand triad — petrol blue (primary), lime (matched/pass), orange (attention) */
  --brand: #005e85;
  --brand-d: #00496a;
  --brand-l: #0a7cac;
  --green: #6baa2c;
  --green-d: #56901f;
  --accent: #f5821f;
  --accent-d: #e06f12;

  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface2: #f1f3f6;
  --surface3: #e9edf2;
  --border: #e2e6eb;
  --border2: #edeff3;
  --text: #28323c;
  --muted: #69737d;
  --faint: #94a0ac;

  --amber: #e0a400;
  --amber-d: #b5840a;
  --red: #d64545;
  --red-d: #b23232;

  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 14px rgba(16, 24, 40, 0.06);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);

  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --hero-gradient: linear-gradient(90deg, var(--brand) 0 58%, var(--green) 58% 82%, var(--accent) 82% 100%);

  /* facet accent colors for sparklines */
  --f-fulfil: #0a7cac;
  --f-rel: #6baa2c;
  --f-ontime: #f5821f;
  --f-pod: #7c5cbf;
  --f-acc: #2a9d8f;
  --f-podtime: #c2585d;

  /* open-row + skeleton surfaces (dark-aware) */
  --surface-open: #fafbfc;
  --surface-open-hover: #f7f8fa;
  --skel-shine: rgba(255, 255, 255, 0.65);

  color-scheme: light;
}

[data-theme="dark"] {
  --brand: #2a9bc8;
  --brand-d: #7cc4e2;
  --brand-l: #3fb2e0;
  --green: #86c23e;
  --green-d: #9dd85c;

  --bg: #0e1319;
  --surface: #151c25;
  --surface2: #1a2230;
  --surface3: #232e3d;
  --border: #2a3646;
  --border2: #222c3a;
  --text: #dfe7ef;
  --muted: #97a5b5;
  --faint: #6b7a8c;

  --amber: #f0b429;
  --amber-d: #f5c95c;
  --red: #e05d5d;
  --red-d: #ea7d7d;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);

  --f-fulfil: #3fb2e0;
  --f-rel: #86c23e;
  --f-ontime: #f79a4a;
  --f-pod: #9d82d9;
  --f-acc: #45b8a9;
  --f-podtime: #d37a7f;

  --surface-open: #171f2a;
  --surface-open-hover: #1a232f;
  --skel-shine: rgba(255, 255, 255, 0.07);

  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: var(--mono); }

/* align numeric columns everywhere mono is used */
.score-num, .score-rank, .facet-pct, .bd-val, .bd-pts, .bd-total,
.sense-v, .panel-header .count, .filter-chip .n {
  font-variant-numeric: tabular-nums;
}

::selection { background: rgba(0, 94, 133, 0.28); }
[data-theme="dark"] ::selection { background: rgba(63, 178, 224, 0.35); }

/* slim, theme-aware scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--faint); border: 2px solid transparent; background-clip: content-box; }

/* keyboard focus — visible ring, mouse clicks unaffected */
:focus-visible {
  outline: 2px solid var(--brand-l);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.bidder-head:focus-visible, .tender-row:focus-visible { outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- shell ---- */
/* Signature Linebooker chrome: a solid-petrol header with the wordmark in a white badge
   and the brand-triad gradient strip beneath — the same treatment as the Finance build.
   The header keeps its fixed petrol identity in BOTH themes (the dark theme only recolours
   the working canvas below), so the fixed literals here are deliberate, not token drift. */
.topbar {
  background: #005e85;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, #005e85 0 58%, #6baa2c 58% 82%, #f5821f 82% 100%) 1;
  padding: 0.6rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 10;
  box-shadow: var(--shadow-sm);
}
.topbar-brand { display: flex; align-items: center; gap: 0.7rem; min-width: 0; flex-wrap: wrap; }

/* White badge holding the logo + product name, legible on the petrol header (the logo
   asset is drawn in petrol/grey for a light canvas, so it needs a light backing rather
   than being recoloured). */
.brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 0.32rem 0.7rem 0.32rem 0.55rem;
  box-shadow: var(--shadow-sm);
  flex: none;
}
.brand-logo { height: 22px; width: auto; display: block; }
.brand-product {
  color: var(--brand-d);
  font-weight: 800;
  letter-spacing: 0.06em;
  font-size: 0.86rem;
  line-height: 1.2;
  padding-left: 0.6rem;
  border-left: 3px solid var(--accent);
  text-transform: uppercase;
  white-space: nowrap;
}
.topbar .subtitle { color: rgba(255, 255, 255, 0.82); font-size: 0.78rem; }

.topbar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.85rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.topbar-legend .leg { display: inline-flex; align-items: center; gap: 0.3rem; }
.topbar-legend i {
  width: 8px; height: 8px; border-radius: 2px; display: inline-block;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.topbar-legend i.f { background: var(--f-fulfil); }
.topbar-legend i.r { background: var(--f-rel); }
.topbar-legend i.o { background: var(--f-ontime); }
.topbar-legend i.p { background: var(--f-pod); }
.topbar-legend i.a { background: var(--f-acc); }
.topbar-legend i.tp { background: var(--f-podtime); }

/* theme toggle — moon in light mode, sun in dark. Sits on the petrol header, so it is
   styled as translucent-white chrome rather than a surface control. */
.theme-toggle {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.6); transform: rotate(15deg); }
.theme-toggle:active { transform: scale(0.92); }
.theme-toggle svg { width: 15px; height: 15px; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.95fr) minmax(520px, 1.45fr);
  gap: 0.85rem;
  padding: 0.85rem 1.15rem 1.5rem;
  align-items: start;
  min-height: calc(100vh - 56px);
}
@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; }
}

/* ---- card / panel ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100vh - 72px);
}
.panel-header {
  padding: 0.75rem 1rem 0.45rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  flex-shrink: 0;
}
.panel-header h2 { margin: 0; font-size: 0.92rem; font-weight: 700; letter-spacing: -0.01em; }
.panel-hint {
  margin: 0.15rem 0 0;
  color: var(--faint);
  font-size: 0.72rem;
  font-weight: 500;
}
.panel-header .count {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  font-family: var(--mono);
  white-space: nowrap;
  padding-top: 0.15rem;
}

/* ---- filter bar ---- */
.filterbar {
  display: flex;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem 0.65rem;
  border-bottom: 1px solid var(--border2);
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
}
.filter-chip {
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.08s, box-shadow 0.12s;
}
.filter-chip:hover { border-color: var(--brand-l); color: var(--brand-d); }
.filter-chip:active { transform: scale(0.96); }
.filter-chip.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0, 94, 133, 0.35);
}
.filter-chip.active:hover { color: #fff; }
.filter-chip .n { opacity: 0.7; font-weight: 500; margin-left: 0.2rem; font-family: var(--mono); font-size: 0.68rem; }

.search-box {
  margin-left: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.55rem;
  font-size: 0.78rem;
  min-width: 150px;
  background: var(--surface);
  color: var(--text);
}
.search-box:focus { outline: 2px solid rgba(0, 94, 133, 0.25); border-color: var(--brand-l); }

.sort-group {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.sort-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--faint);
}
.sort-select {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.4rem;
  font-size: 0.72rem;
  background: var(--surface2);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}

/* ---- column header (bidder list) ---- */
.list-col-head {
  display: grid;
  grid-template-columns: 52px minmax(140px, 1.1fr) minmax(150px, 1.2fr) minmax(160px, 1.3fr);
  gap: 0.65rem;
  padding: 0.35rem 1rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
  background: var(--surface2);
  border-bottom: 1px solid var(--border2);
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .list-col-head { display: none; }
}

/* ---- pills / badges ---- */
.pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.12rem 0.45rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.2;
}
.pill.brand { background: rgba(0, 94, 133, 0.12); color: var(--brand-d); }
.pill.accent { background: rgba(245, 130, 31, 0.14); color: var(--accent-d); }
.pill.green { background: rgba(107, 170, 44, 0.16); color: var(--green-d); }
.pill.amber { background: rgba(224, 164, 0, 0.16); color: var(--amber-d); }
.pill.red { background: rgba(214, 69, 69, 0.14); color: var(--red-d); }
.pill.neutral { background: var(--surface3); color: var(--muted); }

.rel-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  cursor: help;
}
.rel-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.rel-badge.incumbent { color: var(--green-d); }
.rel-badge.incumbent .rel-dot { background: var(--green); }
.rel-badge.in_network { color: var(--brand-d); }
.rel-badge.in_network .rel-dot { background: var(--brand-l); }
.rel-badge.new { color: var(--muted); }
.rel-badge.new .rel-dot { background: var(--faint); }

/* ---- tender list ---- */
.tender-list {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.tender-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 0.75rem;
  align-items: center;
  padding: 0.55rem 0.9rem;
  border-top: 1px solid var(--border2);
  cursor: pointer;
  transition: background 0.1s;
}
.tender-row:first-child { border-top: none; }
.tender-row:hover { background: var(--surface2); }
.tender-row.selected {
  background: rgba(0, 94, 133, 0.07);
  box-shadow: inset 3px 0 0 var(--brand);
}
.tender-row .name {
  font-weight: 600;
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tender-row .meta {
  color: var(--muted);
  font-size: 0.7rem;
  margin-top: 0.1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}
.tender-stats {
  display: flex;
  gap: 0.65rem;
  flex-shrink: 0;
}
.tender-row .stat { text-align: right; font-size: 0.72rem; min-width: 2.4rem; }
.tender-row .stat .n { font-weight: 700; font-family: var(--mono); display: block; }
.tender-row .stat .lbl {
  display: block;
  color: var(--faint);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
}

/* ---- bidder list ---- */
.bidder-list {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.bidder-row {
  border-top: 1px solid var(--border2);
  transition: background 0.1s;
  animation: rowIn 0.22s ease-out both;
}
.bidder-row:first-child { border-top: none; }
.bidder-row.open { background: var(--surface-open); }
.bidder-row:hover { background: var(--surface2); }
.bidder-row.open:hover { background: var(--surface-open-hover); }

/* Dense lists (many bidders): skip entrance animations — N× rowIn + facet fillIn
   on a 90-row tender is pure paint cost for rows the operator is just scanning. */
.bidder-list.dense .bidder-row { animation: none; }
.bidder-list.dense .facet-fill,
.bidder-list.dense .score-bar-mini i { animation: none; }

@keyframes rowIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* bars grow in on fresh renders */
@keyframes fillIn { from { width: 0; } }

/* compact scan grid — the power-user glance row */
.bidder-head {
  display: grid;
  grid-template-columns: 52px minmax(140px, 1.1fr) minmax(150px, 1.2fr) minmax(160px, 1.3fr);
  gap: 0.65rem;
  align-items: center;
  padding: 0.55rem 1rem;
  cursor: pointer;
  user-select: none;
}
@media (max-width: 720px) {
  .bidder-head {
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
  }
  .bh-facets, .bh-edge { grid-column: 1 / -1; }
  .bh-facets { padding-left: 52px; }
  .bh-edge { padding-left: 52px; }
}

/* score cell */
.bh-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}
.score-num {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1;
  letter-spacing: -0.02em;
}
.score-bar-mini {
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--surface3);
  overflow: hidden;
}
.score-bar-mini > i {
  display: block;
  height: 100%;
  border-radius: 2px;
  animation: fillIn 0.45s ease-out both;
}
.score-rank {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--faint);
  font-family: var(--mono);
  letter-spacing: 0.02em;
}

/* name cell */
.bh-name { min-width: 0; }
.bh-name .name {
  font-weight: 650;
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.bh-name .badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.4rem;
  align-items: center;
  margin-top: 0.2rem;
}
.bh-name .meta-line {
  color: var(--faint);
  font-size: 0.66rem;
  margin-top: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* facet sparkline — the glance hero */
.bh-facets { min-width: 0; }
.facet-row {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.facet {
  display: grid;
  grid-template-columns: 14px 1fr 28px;
  gap: 0.3rem;
  align-items: center;
}
.facet-key {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--faint);
  font-family: var(--mono);
  text-align: right;
}
.facet-track {
  height: 5px;
  border-radius: 3px;
  background: var(--surface3);
  overflow: hidden;
  position: relative;
}
.facet-fill {
  height: 100%;
  border-radius: 3px;
  min-width: 2px;
  transition: width 0.2s ease;
  animation: fillIn 0.4s ease-out both;
}
.facet-fill.weak { opacity: 0.9; box-shadow: inset 0 0 0 1px rgba(214, 69, 69, 0.35); }
.facet-fill.strong { }
.facet-pct {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.facet-pct.weak { color: var(--red-d); }
.facet-pct.strong { color: var(--green-d); }

/* edge / drivers glance */
.bh-edge { min-width: 0; }
.edge-stack {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}
.edge-chip {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  font-size: 0.7rem;
  line-height: 1.25;
  min-width: 0;
}
.edge-chip .tag {
  flex-shrink: 0;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.08rem 0.32rem;
  border-radius: 3px;
  margin-top: 0.1rem;
}
.edge-chip.up .tag { background: rgba(107, 170, 44, 0.18); color: var(--green-d); }
.edge-chip.down .tag { background: rgba(214, 69, 69, 0.14); color: var(--red-d); }
.edge-chip.why .tag { background: rgba(0, 94, 133, 0.12); color: var(--brand-d); }
.edge-chip .txt {
  color: var(--muted);
  min-width: 0;
}
/* Lift/Drag/Balanced stay one line (short by construction — a facet name + a percent);
   the Why chip carries a full sentence and was the one truncating hardest, so it alone
   gets room to wrap onto a second line instead of ending in "…" every time. */
.edge-chip.up .txt, .edge-chip.down .txt {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.edge-chip.why .txt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.edge-chip.up .txt { color: var(--text); }
.edge-chip.down .txt { color: var(--text); }
.flag-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--amber-d);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.flag-dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--amber);
  flex-shrink: 0;
}

/* expand chevron hint */
.expand-hint {
  grid-column: 1 / -1;
  font-size: 0.6rem;
  color: var(--faint);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding-top: 0.15rem;
  opacity: 0;
  transition: opacity 0.12s;
}
.bidder-row:hover .expand-hint { opacity: 1; }
.bidder-row.open .expand-hint { opacity: 0; pointer-events: none; height: 0; padding: 0; }

/* ---- detail panel (expand) ----
   Animated collapse: the grid track eases 0fr -> 1fr while .detail-clip hides the
   overflow. Padding/borders must NOT live on the collapsing element or the clip
   (they would leak height into the 0fr track) — they sit on .detail-pad instead. */
.bidder-detail {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.28s cubic-bezier(0.33, 1, 0.68, 1),
              visibility 0s linear 0.28s;
}
.bidder-detail.open {
  grid-template-rows: 1fr;
  visibility: visible;
  border-top: 1px dashed var(--border2);
  transition: grid-template-rows 0.28s cubic-bezier(0.33, 1, 0.68, 1);
}
.detail-clip { overflow: hidden; min-height: 0; }
.detail-pad { padding: 0 1rem 0.85rem; }

.detail-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0.85rem;
  padding-top: 0.75rem;
}
@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr; }
}

.detail-block {
  background: var(--surface2);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border2);
}
.detail-block h3 {
  margin: 0 0 0.5rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---- verdict strip — the always-present award read ---- */
.verdict {
  margin-top: 0.65rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  font-size: 0.76rem;
  line-height: 1.45;
}
.verdict.ok {
  background: rgba(107, 170, 44, 0.1);
  border: 1px solid rgba(107, 170, 44, 0.3);
  border-left: 3px solid var(--green);
  color: var(--text);
}
.verdict.ok b { color: var(--green-d); }
.verdict.flag {
  background: rgba(224, 164, 0, 0.1);
  border: 1px solid rgba(224, 164, 0, 0.32);
  border-left: 3px solid var(--amber);
  color: var(--text);
}
.verdict.flag b { color: var(--amber-d); }
.verdict ul {
  margin: 0.3rem 0 0;
  padding-left: 1.1rem;
}
.verdict li { margin-top: 0.15rem; }

/* ---- score breakdown rows — derivation-first ---- */
.bd-row {
  padding: 0.4rem 0 0.45rem;
  border-bottom: 1px solid var(--border2);
}
.bd-row:last-of-type { border-bottom: none; }
.bd-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  margin-bottom: 0.25rem;
}
.bd-name {
  font-weight: 650;
  font-size: 0.76rem;
  color: var(--text);
}
.bd-name::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--facet, var(--brand));
  margin-right: 0.35rem;
}
.bd-weight {
  font-size: 0.64rem;
  color: var(--faint);
  font-weight: 500;
}
.bd-val {
  font-size: 0.72rem;
  color: var(--muted);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.bd-val b { color: var(--text); font-family: var(--mono); }
.bd-pts {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.bd-row.weak .bd-pts, .bd-row.weak .bd-val b { color: var(--red-d); }
.bd-derive {
  margin-top: 0.28rem;
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1.45;
}
.bd-floor {
  display: block;
  margin-top: 0.12rem;
  color: var(--red-d);
  font-weight: 600;
}
.bd-total {
  margin-top: 0.45rem;
  padding-top: 0.4rem;
  border-top: 1px dashed var(--border);
  font-size: 0.74rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.bd-total b { color: var(--text); font-family: var(--mono); }

.contrib-track {
  height: 8px;
  border-radius: 4px;
  background: var(--surface3);
  overflow: hidden;
  position: relative;
}
.contrib-fill { height: 100%; border-radius: 4px; animation: fillIn 0.4s ease-out both; }
.contrib-fill.weak { background: var(--red) !important; }

/* "How this score works" explainer */
.how-it-works {
  margin-top: 0.6rem;
  border-top: 1px solid var(--border2);
  padding-top: 0.45rem;
}
.how-it-works summary {
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--brand);
  user-select: none;
}
.how-it-works summary:hover { color: var(--brand-l); }
.how-it-works p {
  margin: 0.45rem 0 0;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.5;
}
.how-it-works p b { color: var(--text); }

/* sense-check groups */
.sense-group { margin-bottom: 0.6rem; }
.sense-group:last-child { margin-bottom: 0; }
.sense-group h4 {
  margin: 0 0 0.3rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand);
}
.sense-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 0.75rem;
}
.sense-item {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
  padding: 0.25rem 0;
  border-bottom: 1px dashed var(--border2);
}
.sense-item:nth-last-child(-n+2) { border-bottom: none; }
.sense-k {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.sense-v {
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

/* ---- activation list (uploaded source snapshot, not derived) ---- */
.activation-fleet {
  margin-top: 0.65rem;
  border-left: 3px solid var(--brand);
  background: color-mix(in srgb, var(--brand) 6%, var(--surface2));
}
.activation-fleet.unmatched {
  border-left-color: var(--faint);
  background: var(--surface2);
}
.activation-fleet h3 { color: var(--brand); }
.activation-miss {
  margin: 0;
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.45;
}
.activation-types,
.activation-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}
.activation-types { margin-top: 0.15rem; }
.activation-type b {
  font-family: var(--mono);
  font-weight: 700;
  margin-left: 0.15rem;
}
.activation-contacts {
  margin-top: 0.5rem;
  font-size: 0.72rem;
  color: var(--muted);
}
.activation-contacts summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--faint);
  list-style: none;
  user-select: none;
}
.activation-contacts summary::-webkit-details-marker { display: none; }
.activation-contacts summary::before {
  content: "▸ ";
  color: var(--brand-l);
}
.activation-contacts[open] summary::before { content: "▾ "; }
.activation-contacts summary:hover { color: var(--brand-l); }
.activation-contact-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.4rem;
  padding-left: 0.15rem;
}
.activation-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  padding: 0.3rem 0;
  border-top: 1px dashed var(--border2);
}
.activation-contact-name {
  font-weight: 600;
  color: var(--text);
  font-size: 0.74rem;
  min-width: 8rem;
}
.activation-contact-types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

/* empty / loading */
.empty-state {
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.82rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: center;
}
.empty-state strong {
  font-size: 0.9rem;
  color: var(--text);
}
.empty-state span { max-width: 28rem; line-height: 1.45; color: var(--faint); }
.loading {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--faint);
  font-size: 0.82rem;
}

/* ---- skeleton loaders ---- */
.skel {
  position: relative;
  overflow: hidden;
  background: var(--surface3);
  border-radius: 4px;
}
.skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--skel-shine), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
  to { transform: translateX(100%); }
}
.skel-col { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.skel-line { height: 9px; }
.skel-line.w40 { width: 40%; }
.skel-line.w45 { width: 45%; }
.skel-line.w50 { width: 50%; }
.skel-line.w55 { width: 55%; }
.skel-line.w60 { width: 60%; }
.skel-line.w65 { width: 65%; }
.skel-line.w70 { width: 70%; }
.skel-line.w75 { width: 75%; }
.skel-line.w80 { width: 80%; }
.skel-bar { height: 5px; border-radius: 3px; }

/* tender skeleton row — mirrors .tender-row's grid */
.skel-tender {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.7rem 0.9rem;
  border-top: 1px solid var(--border2);
}
.skel-tender:first-child { border-top: none; }
.skel-stat { width: 2.6rem; height: 1.6rem; }

/* bidder skeleton row — mirrors .bidder-head's scan grid */
.skel-bidder {
  display: grid;
  grid-template-columns: 52px minmax(140px, 1.1fr) minmax(150px, 1.2fr) minmax(160px, 1.3fr);
  gap: 0.65rem;
  align-items: center;
  padding: 0.8rem 1rem;
  border-top: 1px solid var(--border2);
}
.skel-bidder .skel-col { gap: 0.3rem; }
.skel-score { width: 30px; height: 30px; border-radius: 6px; justify-self: center; }
@media (max-width: 720px) {
  .skel-bidder { grid-template-columns: 48px 1fr; }
  .skel-bidder .skel-col:nth-child(n+3) { display: none; }
}

/* no-score placeholder facets */
.no-score-msg {
  font-size: 0.72rem;
  color: var(--faint);
  font-style: italic;
}

/* ---------- auth + refresh (production-hardening pass) ---------- */

.topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* On the petrol header: translucent-white chrome, matching the theme toggle. */
.refresh-btn,
.logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font: 600 0.72rem/1 var(--sans);
  padding: 0.42rem 0.65rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.refresh-btn svg { width: 13px; height: 13px; }
.refresh-btn:hover:not(:disabled),
.logout-btn:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.6); }
.refresh-btn:disabled { cursor: default; opacity: 0.55; }
.refresh-btn[data-running="1"] svg { animation: refresh-spin 1.1s linear infinite; }
@keyframes refresh-spin { to { transform: rotate(360deg); } }

.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.login-overlay[hidden] { display: none; }

.login-card {
  width: min(340px, calc(100vw - 2rem));
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid transparent;
  border-image: var(--hero-gradient) 1;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem 1.5rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.login-logo {
  height: 30px;
  width: auto;
  align-self: flex-start;
  margin-bottom: 0.15rem;
}
/* The wordmark is petrol/grey for a light canvas; on the dark theme's dark card it needs
   a white chip to stay legible. */
[data-theme="dark"] .login-logo {
  background: #fff;
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  box-sizing: content-box;
}
.login-card h2 {
  font: 800 1rem/1.2 var(--sans);
  letter-spacing: 0.04em;
  color: var(--brand);
  margin: 0;
}
.login-hint {
  margin: -0.45rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}
.login-card label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font: 600 0.72rem/1 var(--sans);
  color: var(--muted);
}
.login-card input {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface2);
  color: var(--text);
  font: 500 0.85rem/1.2 var(--sans);
  padding: 0.5rem 0.6rem;
  outline: none;
  transition: border-color 0.15s;
}
.login-card input:focus { border-color: var(--brand-l); }
.login-error {
  font-size: 0.76rem;
  color: var(--red);
  background: color-mix(in srgb, var(--red) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.6rem;
}
.login-card button[type="submit"] {
  border: none;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: #fff;
  font: 700 0.8rem/1 var(--sans);
  padding: 0.6rem;
  cursor: pointer;
  transition: background 0.15s;
}
.login-card button[type="submit"]:hover:not(:disabled) { background: var(--brand-l); }
.login-card button[type="submit"]:disabled { opacity: 0.6; cursor: default; }

/* ---------- bid-integrity lens (Bidding Insights) ---------- */
.bid-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font: 700 0.62rem/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.42rem;
  border-radius: 999px;
  white-space: nowrap;
}
.bid-chip.flag { color: var(--red-d); background: color-mix(in srgb, var(--red) 12%, transparent); border: 1px solid color-mix(in srgb, var(--red) 32%, transparent); }
.bid-chip.watch { color: var(--amber-d); background: color-mix(in srgb, var(--amber) 12%, transparent); border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent); }

/* Bidding Insights list (repeat-offender view) */
.bi-list { display: flex; flex-direction: column; gap: 0.5rem; }
.bi-row {
  border: 1px solid var(--border);
  border-left: 3px solid var(--faint);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 0.6rem 0.8rem;
}
.bi-row.flag { border-left-color: var(--red); }
.bi-row.watch { border-left-color: var(--amber); }
.bi-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.bi-name { font-weight: 700; font-size: 0.9rem; color: var(--text); }
.bi-status { font: 700 0.62rem/1 var(--sans); text-transform: uppercase; letter-spacing: 0.04em; padding: 0.2rem 0.45rem; border-radius: 999px; }
.bi-status.flag { color: var(--red-d); background: color-mix(in srgb, var(--red) 12%, transparent); }
.bi-status.watch { color: var(--amber-d); background: color-mix(in srgb, var(--amber) 12%, transparent); }
.bi-reasons { margin: 0.35rem 0 0; padding-left: 1rem; color: var(--muted); font-size: 0.78rem; }
.bi-reasons li { margin: 0.15rem 0; }
.bi-stats { margin-top: 0.4rem; display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; font-size: 0.72rem; color: var(--faint); }
.bi-stats span { display: inline-flex; align-items: center; gap: 0.3rem; }
.bi-stats span:not(:last-child)::after { content: "·"; margin-left: 0.5rem; color: var(--border); }
.bi-stats b { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- newcomer growth lens ---------- */
.tender-viewbar { display: flex; gap: 0.4rem; padding: 0 0 0.5rem; }
.seg-btn {
  font: 600 0.74rem/1 var(--sans);
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.seg-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.seg-btn .n { font-variant-numeric: tabular-nums; opacity: 0.85; }

.nc-intro { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; margin-bottom: 0.6rem; }
.nc-intro p { margin: 0 0 0.3rem; font-size: 0.8rem; color: var(--text); }
.nc-intro .nc-env { color: var(--muted); font-size: 0.75rem; margin-bottom: 0; }

.nc-list { display: flex; flex-direction: column; gap: 0.5rem; }
.nc-row { display: flex; gap: 0.7rem; border: 1px solid var(--border); border-left: 3px solid var(--green); border-radius: var(--radius-sm); background: var(--surface); padding: 0.6rem 0.7rem; }
.nc-rank { font: 800 0.95rem/1 var(--sans); color: var(--faint); min-width: 1.8rem; padding-top: 0.15rem; }
.nc-body { flex: 1; min-width: 0; }
.nc-head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.nc-name { font-weight: 700; font-size: 0.9rem; color: var(--text); }
.nc-tier { font: 600 0.62rem/1 var(--sans); text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); background: var(--surface3); padding: 0.15rem 0.4rem; border-radius: 999px; }
.nc-score { margin-left: auto; font: 800 1.05rem/1 var(--sans); color: var(--green-d); font-variant-numeric: tabular-nums; }
.nc-gates { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.nc-gate { font: 600 0.68rem/1 var(--sans); padding: 0.22rem 0.45rem; border-radius: 999px; background: var(--surface2); color: var(--muted); border: 1px solid var(--border); }
.nc-gate.ok { color: var(--green-d); background: color-mix(in srgb, var(--green) 12%, transparent); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.nc-gate.warn { color: var(--amber-d); background: color-mix(in srgb, var(--amber) 12%, transparent); border-color: color-mix(in srgb, var(--amber) 28%, transparent); }
.nc-gate.bad { color: var(--red-d); background: color-mix(in srgb, var(--red) 12%, transparent); border-color: color-mix(in srgb, var(--red) 28%, transparent); }
.nc-pilot { margin-top: 0.45rem; padding-top: 0.4rem; border-top: 1px dashed var(--border); font-size: 0.76rem; }
.nc-pilot-share { color: var(--text); }
.nc-pilot-share b { color: var(--green-d); }
.nc-pilot-why { display: block; color: var(--faint); font-size: 0.72rem; margin-top: 0.15rem; }
.nc-blindspots { margin-top: 0.7rem; font-size: 0.75rem; color: var(--muted); }
.nc-blindspots summary { cursor: pointer; font-weight: 600; }
.nc-blindspots ul { margin: 0.4rem 0 0; padding-left: 1rem; }
.nc-blindspots li { margin: 0.2rem 0; }

/* ---------- prod-readiness fixes: caveats + chip contrast (WCAG AA) ---------- */
.nc-caveat {
  margin: 0.3rem 0 0;
  font-size: 0.74rem;
  color: var(--muted);
  background: color-mix(in srgb, var(--amber) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 24%, transparent);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.55rem;
}
/* Darken chip/label text toward the body colour so the small 700-weight text clears
   4.5:1 on its own tint (prod-readiness a11y finding — the flags ops rely on were ~3:1). */
.bid-chip.flag, .bi-status.flag, .nc-gate.bad { color: color-mix(in srgb, var(--red-d) 55%, var(--text)); }
.bid-chip.watch, .bi-status.watch, .nc-gate.warn { color: color-mix(in srgb, var(--amber-d) 45%, var(--text)); }
.nc-gate.ok { color: color-mix(in srgb, var(--green-d) 55%, var(--text)); }
/* visible focus for the keyboard-operable rows */
.tender-row:focus-visible, .bidder-head:focus-visible { outline: 2px solid var(--brand-l); outline-offset: -2px; }

/* seg-btn [hidden] override: .seg-btn sets display:inline-flex which beats the UA
   [hidden]{display:none}, so a hidden toggle (e.g. Awarded panel on a non-resolving
   tender) stayed visible. Restore it. */
.seg-btn[hidden] { display: none !important; }