/* RFP Reader - visual system
   One accent (blue). Four-step fit scale (strong / good / partial / gap) used the same way in
   badges, dots and heatmap cells. Sections are white blocks with a tinted header band on a
   grey page. One spacing scale: 8 / 16 / 24 / 48. One type scale: 20 / 15 / 14 / 12.5. */

:root {
  --ink: #15202b;
  --ink-2: #33414f;
  --muted: #5f6d7b;
  --line: #d5dbe2;
  --line-2: #b8c2cc;
  --page: #e9edf1;
  --panel: #ffffff;
  --band: #e1e7ee;        /* section bands, table headers, empty cells: one tint family with the strip */
  --zebra: #f8fafb;
  --hover: #eef2f6;
  --strip: #1b2530;
  --strip-text: #f3f6f9;
  --strip-muted: #a7b3bf;
  --strip-line: #2d3a47;
  --strip-hover: #24313d;

  --accent: #1f4e8c;
  --accent-tint: #e4ecf7;
  --accent-dark: #183f72;

  /* fit scale */
  --strong: #1b6b45;  --strong-tint: #cfe8d8;  --strong-cell: #2a8a5b;
  --good: #4d8a3f;    --good-tint: #e0efd9;    --good-cell: #8ec882;
  --partial: #9a6700; --partial-tint: #fbe9bf; --partial-cell: #f0c24b;
  --gap: #a8332b;     --gap-tint: #f5d5d1;     --gap-cell: #d9584d;
  --na: #6b7784;      --na-tint: #e6eaee;
  --pending-tint: #e9edf1;

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 48px;
  --t-title: 20px; --t-sub: 15px; --t-body: 14px; --t-meta: 12.5px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--t-body);
  line-height: 1.45;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; }
ul { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: var(--t-meta); }
.error { color: var(--gap); margin-top: var(--s1); }

/* ---------- Top strip: always one row ---------- */
.strip { background: var(--strip); color: var(--strip-text); border-bottom: 1px solid var(--strip-line); }
.strip-inner {
  max-width: 1100px; margin: 0 auto; padding: 0 var(--s3); height: 48px;
  display: flex; align-items: center; gap: var(--s2); flex-wrap: nowrap; overflow: hidden;
}
.strip .app { font-size: var(--t-sub); font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; flex: none; display: flex; align-items: center; gap: 10px; }
.strip .app .mark { width: 42px; height: 14px; color: var(--strip-text); }
.strip .mid { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: var(--s2); }
.strip .rfp { font-size: 13px; min-width: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strip .rfp .lbl { color: var(--strip-muted); margin-right: 6px; }
.strip .status { font-size: 13px; display: flex; align-items: center; gap: 7px; min-width: 0; }
.strip .status span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strip .right { flex: none; display: flex; align-items: center; gap: var(--s1); }
.strip .cost { font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; margin-right: 6px; }
.strip .cost .lbl { color: var(--strip-muted); margin-right: 6px; }
.strip select {
  font: inherit; font-size: var(--t-meta); padding: 5px 8px; max-width: 220px; min-width: 0;
  background: var(--strip-hover); color: var(--strip-text); border: 1px solid var(--strip-line); border-radius: 3px;
}
.strip select:disabled { opacity: 0.45; }
.strip .btn { background: transparent; color: var(--strip-text); border-color: var(--strip-line); padding: 5px 10px; font-size: var(--t-meta); white-space: nowrap; }
.strip .btn:hover:not(:disabled) { background: var(--strip-hover); }
.strip .btn.quiet { border-color: transparent; color: var(--strip-muted); }
.strip .btn:disabled { opacity: 0.45; }
.strip .dot.idle { background: #4a5966; }

/* ---------- Page and sections ---------- */
.page { max-width: 1100px; margin: 0 auto; padding: var(--s3) var(--s3) var(--s4); }
.sec { background: var(--panel); border: 1px solid var(--line-2); border-radius: 3px; margin-top: var(--s4); }
.sec:first-child { margin-top: 0; }
.sec-band {
  background: var(--band); border-bottom: 1px solid var(--line-2); padding: var(--s2) var(--s3);
  display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap;
}
.sec-band .num { font-size: 13px; font-weight: 800; color: var(--accent); letter-spacing: 0.08em; }
.sec-band h2 { font-size: var(--t-title); font-weight: 800; letter-spacing: -0.015em; }
.sec-band .desc { color: var(--muted); font-size: var(--t-meta); flex-basis: 100%; }
.sec-band .right { margin-left: auto; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.sec-body { padding: var(--s3); }

/* ---------- Buttons ---------- */
.btn {
  font: inherit; font-size: 13.5px; font-weight: 600; padding: 7px 14px; border-radius: 3px;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink); cursor: pointer;
  text-decoration: none; display: inline-block; line-height: 1.3;
}
.btn:hover:not(:disabled) { background: var(--hover); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn.quiet { border-color: transparent; color: var(--accent); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.linklike { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.linklike:hover { color: var(--accent-dark); }
/* One focus ring everywhere: the accent on white, the strip text colour on the dark strip. */
.btn:focus-visible, .linklike:focus-visible, select:focus-visible, input:focus-visible, .dropzone:focus-visible, table.hm td.has:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.strip .btn:focus-visible, .strip select:focus-visible { outline-color: var(--strip-text); outline-offset: 1px; }
input:focus { border-color: var(--accent); }
.row-actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2); }
.note { color: var(--muted); font-size: var(--t-meta); }

/* ---------- Upload ---------- */
.dropzone {
  border: 1.5px dashed var(--line-2); border-radius: 3px; min-height: 120px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: var(--zebra); transition: background 0.15s, border-color 0.15s; cursor: pointer;
}
.dropzone:hover { background: var(--hover); border-color: var(--line-2); }
.dropzone.over { border-color: var(--accent); background: var(--accent-tint); }
.dropzone .big { font-size: var(--t-sub); font-weight: 600; }
.dropzone .hint { color: var(--muted); font-size: var(--t-meta); }
table.files { width: 100%; border-collapse: collapse; margin-top: var(--s2); font-size: 13.5px; }
table.files td { padding: var(--s1) 10px var(--s1) 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.files td.name { font-weight: 600; }
table.files td.meta { color: var(--muted); font-size: var(--t-meta); white-space: nowrap; }
table.files td.state { white-space: nowrap; font-size: var(--t-meta); }
table.files td.rm { text-align: right; }

/* ---------- RFP read: three stacked bands ---------- */
/* 1. Verdict band: bleeds to the card edges, tinted by the verdict. The only coloured band here. */
.verdict-band {
  margin: calc(-1 * var(--s3)) calc(-1 * var(--s3)) var(--s3); padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line-2); display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
}
.verdict-band.bid { background: var(--strong-tint); }
.verdict-band.partial { background: var(--partial-tint); }
.verdict-band.no_bid { background: var(--na-tint); }
.vbadge { display: inline-block; padding: 4px 12px; border-radius: 3px; font-size: 13px; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; color: #fff; }
.vbadge.bid { background: var(--strong); }
.vbadge.partial { background: var(--partial); }
.vbadge.no_bid { background: var(--na); }
.verdict-text { font-size: var(--t-sub); font-weight: 600; flex: 1; min-width: 240px; }
/* 2. Key facts: cells that touch and share borders, so they read as one panel. */
.facts { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-2); border-radius: 3px; overflow: hidden; }
.fact { padding: var(--s2); border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); min-width: 0; }
.fact.wide { grid-column: 1 / -1; }
.facts .fact:nth-child(odd) { border-right: 0; }         /* the wide cell and the right-hand column */
.facts .fact:nth-last-child(-n+2) { border-bottom: 0; }  /* last row */
.fact h4 { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 6px; }
.fact p { font-size: var(--t-body); line-height: 1.45; }
/* 3. Outside our scope: its own cell below the panel, greyed. */
.fact-out { margin-top: var(--s2); border: 1px solid var(--line-2); border-radius: 3px; color: var(--muted); }
.fact-out ul { padding-left: 18px; font-size: 13.5px; }
.fact-out li { margin: 2px 0; }

/* ---------- Feed tables: fixed grid shared by header and rows ---------- */
.table-wrap { overflow-x: auto; }
table.feed { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.feed th {
  text-align: left; padding: var(--s1) 10px; font-size: 11.5px; font-weight: 700; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--line-2);
  background: var(--band); position: sticky; top: 0; z-index: 1; white-space: nowrap; overflow: hidden;
}
table.feed td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
table.feed > tbody > tr.row:nth-child(4n+3) > td { background: var(--zebra); }
table.feed tr.row { cursor: pointer; }
table.feed tr.row:hover td { background: var(--hover) !important; }
table.feed tr.row.open td { background: var(--hover) !important; border-bottom: 0; }
table.feed td.id { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
table.feed td.req { font-size: 14.5px; line-height: 1.45; }
table.feed td.tower { font-size: 13px; color: var(--ink-2); }
table.feed td.src { font-size: 12px; color: var(--muted); }
table.feed td.fit { white-space: nowrap; font-size: var(--t-meta); color: var(--ink-2); }
table.feed tr.row.new td { animation: rowin 0.7s ease-out; }
@keyframes rowin { from { background: var(--accent-tint); } to { background: transparent; } }
table.feed tr.detail td { background: var(--hover); padding: 4px var(--s2) var(--s2) var(--s2); }
table.feed tr.row.oos td.req { color: var(--ink-2); }
.detail-grid { display: grid; grid-template-columns: 1fr; gap: var(--s2); }
.detail-grid dl { display: grid; grid-template-columns: 96px 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.detail-grid dt { color: var(--muted); }
.detail-grid dd { margin: 0; }
.detail-grid h4 { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0 0 6px; }
.detail-grid .why { font-size: 13.5px; margin-bottom: var(--s1); }
table.matches { width: 100%; border-collapse: collapse; font-size: var(--t-meta); background: #fff; border: 1px solid var(--line); table-layout: fixed; }
table.matches th:nth-child(1) { width: 15%; } table.matches th:nth-child(2) { width: 13%; } table.matches th:nth-child(3) { width: 15%; } table.matches th:nth-child(4) { width: 33%; }
table.matches th:nth-child(5) { width: 9%; } table.matches th:nth-child(6) { width: 9%; } table.matches th:nth-child(7) { width: 6%; }
table.matches th { text-align: left; font-weight: 700; color: var(--ink-2); padding: 5px 8px; border-bottom: 1px solid var(--line); font-size: 11.5px; background: var(--band); }
table.matches td { padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
table.matches tr:last-child td { border-bottom: 0; }
table.matches td.client { font-weight: 600; }
table.matches td.seg { color: var(--muted); }
table.matches td.seg.same { color: var(--strong); font-weight: 600; }
table.matches td.seg.closest { color: var(--partial); font-weight: 600; }
table.matches td.desc { color: var(--muted); }
table.matches td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.empty { padding: var(--s2) 0; color: var(--muted); font-size: 13px; }
.counters { display: flex; gap: var(--s2); color: var(--muted); font-size: var(--t-meta); white-space: nowrap; flex-wrap: wrap; }
.counters strong { color: var(--ink); font-weight: 700; }
.subhead { margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s1); }
.subhead h3 { font-size: var(--t-sub); font-weight: 700; }
.subhead p { color: var(--muted); font-size: var(--t-meta); }
.filter-chip {
  display: inline-flex; align-items: center; gap: var(--s1); font-size: var(--t-meta); padding: 3px 8px;
  background: var(--accent-tint); color: var(--accent); border-radius: 3px; font-weight: 600;
}

/* ---------- Badges and dots ---------- */
.badge {
  display: inline-block; padding: 1px 7px; border-radius: 3px; font-size: 12px; font-weight: 700;
  line-height: 1.6; white-space: nowrap; background: var(--na-tint); color: var(--na);
}
.badge.strong { background: var(--strong-tint); color: var(--strong); }
.badge.good { background: var(--good-tint); color: var(--good); }
.badge.partial { background: var(--partial-tint); color: var(--partial); }
.badge.gap { background: var(--gap-tint); color: var(--gap); }
.badge.na, .badge.context, .badge.out, .badge.submission { background: var(--na-tint); color: var(--na); }
/* Same height as a badge so Good, Partial, Gap, Out of scope and Implied line up. */
.tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 3px; font-size: 12px; font-weight: 600;
  line-height: 1.6; white-space: nowrap; background: var(--na-tint); color: var(--na); vertical-align: 1px;
}
.dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2);
  margin-right: 6px; vertical-align: middle; position: relative; top: -1px; flex: none;
}
.dot.idle { background: var(--line-2); }
.dot.busy { background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
.dot.ok { background: var(--strong-cell); }
.dot.warn { background: var(--partial-cell); }
.dot.err { background: var(--gap-cell); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---------- The mark (Illimani ridgeline): one stroke, no fill, current colour ---------- */
.mark { display: inline-block; fill: none; stroke: currentColor; stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.hm-empty { text-align: center; padding: var(--s3) 0 var(--s2); }
.hm-empty .mark { width: 240px; height: 80px; color: var(--line-2); display: block; margin: 0 auto var(--s1); }

/* ---------- Heatmap ---------- */
.legend { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: var(--t-meta); color: var(--muted); }
.legend .sw { display: inline-block; width: 14px; height: 14px; border-radius: 2px; vertical-align: -2px; margin-right: 5px; border: 1px solid rgba(0,0,0,0.08); }
.hm-wrap { overflow-x: auto; margin-top: var(--s2); }
table.hm { border-collapse: separate; border-spacing: 3px; font-size: var(--t-meta); }
table.hm th { font-weight: 600; color: var(--ink-2); text-align: left; padding: 4px 8px; white-space: nowrap; }
table.hm thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); text-align: center; padding-bottom: 6px; }
table.hm th.tower { position: sticky; left: 0; background: #fff; z-index: 1; font-size: 13px; padding-right: 14px; }
table.hm th.tower.dim { color: var(--muted); font-weight: 500; }
table.hm td {
  width: 96px; min-width: 84px; height: 38px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--band); color: var(--line-2); border-radius: 2px; cursor: default; font-size: 13px;
}
table.hm td.has { cursor: pointer; color: var(--ink); }
table.hm td.has:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
table.hm td.sel { outline: 2px solid var(--ink); outline-offset: -2px; }
table.hm td.strong { background: var(--strong-cell); color: #fff; }
table.hm td.good { background: var(--good-cell); color: var(--ink); }
table.hm td.partial { background: var(--partial-cell); color: var(--ink); }
table.hm td.gap { background: var(--gap-cell); color: #fff; }
table.hm td.pending { background: var(--pending-tint); color: var(--muted); }
table.hm td.na { background: var(--na-tint); color: var(--muted); }
table.hm td .sub { display: block; font-size: 10.5px; font-weight: 500; opacity: 0.85; margin-top: -1px; }
.sw.strong { background: var(--strong-cell); } .sw.good { background: var(--good-cell); } .sw.partial { background: var(--partial-cell); }
.sw.gap { background: var(--gap-cell); } .sw.pending { background: var(--pending-tint); } .sw.na { background: var(--na-tint); } .sw.none { background: var(--band); }

/* ---------- Outputs ---------- */
.out-row { display: flex; gap: var(--s1); flex-wrap: wrap; }

/* ---------- Footer (sign out lives here on phones) ---------- */
.page-foot { display: none; padding: var(--s3) 0; font-size: var(--t-meta); color: var(--muted); }

/* ---------- Login ---------- */
.login-body { display: grid; place-items: center; min-height: 100vh; background: var(--page); }
.login-box { background: #fff; border: 1px solid var(--line); padding: 28px; width: min(360px, 92vw); }
.login-box .mark { width: 132px; height: 44px; color: var(--accent); display: block; margin: 0 0 var(--s2); }
.login-box h1 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.login-box form { display: grid; gap: var(--s1); margin-top: 18px; }
.login-box label { font-size: var(--t-meta); color: var(--muted); }
.login-box input { font: inherit; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 3px; }
.login-box .btn { margin-top: 6px; }

/* ---------- Narrow screens ---------- */
@media (max-width: 900px) {
  .strip-inner { padding: 0 14px; gap: 10px; }
  .strip .rfp { display: none; }
  .strip .cost .lbl { display: none; }
  .strip select { max-width: 130px; }
  .strip #run-delete { display: none; }
  .strip .btn { padding: 5px 8px; }
}
@media (max-width: 600px) {
  .page { padding: var(--s2) var(--s1) var(--s4); }
  .sec { margin-top: var(--s3); }
  .sec-band { padding: 12px var(--s2); }
  .sec-band h2 { font-size: 19px; }
  .sec-band .right { margin-left: 0; }
  .sec-body { padding: var(--s2); }
  .facts { grid-template-columns: 1fr; }
  .facts .fact { border-right: 0; border-bottom: 1px solid var(--line-2); }
  .facts .fact:last-child { border-bottom: 0; }
  .verdict-band { margin: calc(-1 * var(--s2)) calc(-1 * var(--s2)) var(--s2); padding: 12px var(--s2); }
  /* rows stack on phones; the header row is dropped (child selectors so nested tables are untouched) */
  table.feed { table-layout: auto; }
  table.feed > colgroup { display: none; }
  table.feed > thead { display: none; }
  table.feed > tbody > tr.row { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  table.feed > tbody > tr.row > td { display: block; border: 0; padding: 2px 0; width: auto; background: transparent !important; }
  table.feed > tbody > tr.row > td.id { font-size: var(--t-meta); }
  table.feed > tbody > tr.row > td.req { font-size: 15px; }
  table.feed > tbody > tr.row > td.tower, table.feed > tbody > tr.row > td.src, table.feed > tbody > tr.row > td.fit { display: inline-block; margin-right: 12px; }
  table.feed > tbody > tr.detail { display: block; }
  table.feed > tbody > tr.detail > td { padding: 6px 0 10px; display: block; }
  table.feed > tbody > tr.row.new > td { animation: none; }
  table.matches th:nth-child(4), table.matches td:nth-child(4),
  table.matches th:nth-child(5), table.matches td:nth-child(5),
  table.matches th:nth-child(6), table.matches td:nth-child(6) { display: none; }
  table.matches th:nth-child(1) { width: 28%; } table.matches th:nth-child(2) { width: 32%; } table.matches th:nth-child(3) { width: 28%; } table.matches th:nth-child(7) { width: 12%; }
  table.matches td { overflow-wrap: break-word; }
  table.files td.meta { display: none; }
  .strip-inner { gap: var(--s1); }
  .strip .cost, .strip .sign-out { display: none; }
  .strip .status { flex: 1 1 auto; }
  .strip select { max-width: 112px; }
  .page-foot { display: block; }
}