/* BidRadar - "The Bid Tab"
 * The bid tabulation sheet a public agency publishes when bids are opened,
 * made live. Ruled columns, a stub column, tabular figures, a provenance
 * stamp on every row. No cards; the sheet is the structure.
 * Palette is the owner's logo: navy #002860, spring green #00B878.
 */

/* ---- faces ------------------------------------------------------------- */
@font-face { font-family: Archivo; src: url(/static/fonts/archivo-700.woff2) format('woff2');
  font-weight: 700; font-display: swap; }
@font-face { font-family: Archivo; src: url(/static/fonts/archivo-500.woff2) format('woff2');
  font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url(/static/fonts/ibm-plex-sans-400.woff2) format('woff2');
  font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url(/static/fonts/ibm-plex-sans-500.woff2) format('woff2');
  font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url(/static/fonts/ibm-plex-sans-600.woff2) format('woff2');
  font-weight: 600; font-display: swap; }

/* ---- the sheet --------------------------------------------------------- */
:root {
  --navy: #002860;
  --navy-deep: #001b45;
  --green: #00845a;          /* logo green darkened to pass 4.5:1 on paper */
  --green-bright: #00b878;   /* logo green, used on navy only */
  --paper: #f6f4ef;
  --paper-lit: #fffefb;
  --rule: #cdc7b8;           /* hairline column rule */
  --rule-strong: #a8a091;
  --ink: #16181a;
  --ink-soft: #4d5359;
  --amber: #a35a00;          /* closing soon */
  --red: #9e2b25;            /* closed / error */
  --stub: #ece7dc;           /* stub column tint, the carbon band */
  --measure: 68ch;
  --sheet: 1240px;
  --step: 8px;
}

[data-theme='dark'] {
  --paper: #0d1420;          /* the same sheet on microfilm */
  --paper-lit: #131c2b;
  --rule: #2a3648;
  --rule-strong: #3d4c63;
  --ink: #e6ecf3;
  --ink-soft: #9aa8bb;
  --stub: #16202f;
  --green: #35d69a;
  --green-bright: #35d69a;
  --amber: #e0a020;
  --red: #ef6a63;
  --navy: #dce6f5;           /* on film the navy inverts to the light ink */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.55 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  /* the faint horizontal rule of ledger paper, behind everything */
  background-image: repeating-linear-gradient(
    to bottom, transparent 0 31px, color-mix(in srgb, var(--rule) 28%, transparent) 31px 32px);
}

/* browser surfaces belong to the design system too */
::selection { background: var(--green-bright); color: #00220f; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 1px; }
html { scrollbar-color: var(--rule-strong) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 0; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- header: the sheet's title block ----------------------------------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--step) * 3);
  max-width: var(--sheet); margin: 0 auto;
  padding: calc(var(--step) * 2) calc(var(--step) * 3);
  border-bottom: 2px solid var(--navy);
}
[data-theme='dark'] .site-header { border-bottom-color: var(--rule-strong); }

.site-header .brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: Archivo, sans-serif; font-weight: 700; font-size: 20px;
  letter-spacing: -0.02em; color: var(--navy); text-decoration: none;
}
.site-header .brand::before {
  content: ''; width: 38px; height: 38px; flex: 0 0 38px;
  background: url(/static/bidradar-mark.png) center/contain no-repeat;
}
.site-header nav { display: flex; flex-wrap: wrap; gap: calc(var(--step) * 2.5); }
.site-header nav a {
  font-size: 13px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none; padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.site-header nav a:hover { color: var(--navy); border-bottom-color: var(--green); }
[data-theme='dark'] .site-header nav a:hover { color: var(--ink); }

main {
  max-width: var(--sheet); margin: 0 auto;
  padding: calc(var(--step) * 5) calc(var(--step) * 3) calc(var(--step) * 9);
}

/* ---- type -------------------------------------------------------------- */
h1, h2, h3 { font-family: Archivo, sans-serif; font-weight: 700; letter-spacing: -0.025em;
  color: var(--navy); margin: 0 0 calc(var(--step) * 2); text-wrap: balance; }
[data-theme='dark'] h1, [data-theme='dark'] h2, [data-theme='dark'] h3 { color: var(--ink); }
h1 { font-size: clamp(32px, 5vw, 54px); line-height: 1.04; }
h2 { font-size: clamp(20px, 2.4vw, 27px); line-height: 1.15;
  margin-top: calc(var(--step) * 6); }
h3 { font-size: 18px; line-height: 1.25; }
p { margin: 0 0 calc(var(--step) * 2); max-width: var(--measure); }
.lede { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.5; color: var(--ink-soft); }
a { color: var(--green); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--navy); }
[data-theme='dark'] a:hover { color: var(--green-bright); }
code { font-family: 'IBM Plex Sans', monospace; background: var(--stub);
  padding: 1px 5px; border: 1px solid var(--rule); }

/* ---- the ledger: rows, not cards --------------------------------------- */
.ledger { width: 100%; border-collapse: collapse; margin: calc(var(--step) * 3) 0; }
.ledger caption { text-align: left; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft); padding-bottom: 6px; }
.ledger thead th {
  text-align: left; font-family: Archivo, sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft);
  padding: 0 12px 7px; border-bottom: 2px solid var(--navy); white-space: nowrap;
}
[data-theme='dark'] .ledger thead th { border-bottom-color: var(--rule-strong); }
.ledger tbody tr { border-bottom: 1px solid var(--rule); }
.ledger tbody tr:hover { background: var(--paper-lit); }
.ledger td { padding: 9px 12px; vertical-align: top; }

/* stub column: the carbon band down the left of every tab sheet */
.ledger td.stub, .ledger th.stub {
  background: var(--stub); border-right: 1px solid var(--rule);
  font-size: 12px; letter-spacing: 0.03em; color: var(--ink-soft);
  white-space: nowrap; width: 1%;
}
.ledger td.title { width: 46%; }
.ledger td.title a { font-weight: 600; color: var(--navy); text-decoration: none;
  font-size: 16px; line-height: 1.3; display: block; }
[data-theme='dark'] .ledger td.title a { color: var(--ink); }
.ledger td.title a:hover { color: var(--green); text-decoration: underline; }
.ledger td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* deadline: the number is the message, the date is the footnote */
.days { font-family: Archivo, sans-serif; font-weight: 700; font-size: 21px;
  line-height: 1; letter-spacing: -0.02em; display: block; }
.days-unit { font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-soft); display: block; margin-top: 2px; }
.when { font-size: 12px; color: var(--ink-soft); white-space: nowrap; display: block;
  margin-top: 2px; }
tr.soon .days { color: var(--amber); }
tr.closed .days, tr.closed .days-unit { color: var(--red); }
tr.closed td.title a { text-decoration: line-through; color: var(--ink-soft); }

/* magnitude: an $80k job should look bigger than a $4k one */
.mag { display: block; height: 4px; background: var(--green);
  min-width: 3px; margin-top: 5px; opacity: 0.75; }

/* provenance stamp - the reason to trust the row */
.seal {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--green); border: 1px solid currentColor; padding: 2px 6px;
  border-radius: 2px; white-space: nowrap;
}
.seal::before { content: ''; width: 5px; height: 5px; background: currentColor;
  border-radius: 50%; }
/* an unclassified row should not shout the fact 26 times down the page */
.trade { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-soft); display: block; margin-top: 2px; opacity: 0.72; }

/* ---- forms: console inputs, never browser defaults --------------------- */
.search-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch;
  margin: calc(var(--step) * 3) 0; }
input[type=text], input[type=search], input[type=email], select, textarea {
  font: 400 15px/1.4 'IBM Plex Sans', sans-serif; color: var(--ink);
  background: var(--paper-lit); border: 1px solid var(--rule-strong);
  border-radius: 2px; padding: 11px 12px; min-height: 44px;
}
input[type=text]:focus, input[type=search]:focus, input[type=email]:focus,
select:focus, textarea:focus { border-color: var(--green); }
input::placeholder { color: var(--ink-soft); opacity: 1; }
select {
  appearance: none; padding-right: 34px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 15px center, right 10px center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.search-form input[type=search], .search-form input[type=text] { flex: 1 1 260px; }

button, .btn, input[type=submit] {
  font: 700 13px/1 Archivo, sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; background: var(--navy); border: 1px solid var(--navy);
  border-radius: 2px; padding: 0 20px; min-height: 44px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 140ms cubic-bezier(.2,.7,.3,1);
}
button:hover, .btn:hover, input[type=submit]:hover { background: var(--green); border-color: var(--green); }
[data-theme='dark'] button, [data-theme='dark'] .btn, [data-theme='dark'] input[type=submit] {
  background: var(--green); border-color: var(--green); color: #04231a; }
[data-theme='dark'] button:hover { background: var(--green-bright); }
button:disabled { background: var(--rule-strong); border-color: var(--rule-strong); cursor: not-allowed; }

/* checkbox drawn, not defaulted */
input[type=checkbox] {
  appearance: none; width: 18px; height: 18px; margin: 0 7px 0 0;
  border: 1px solid var(--rule-strong); border-radius: 2px;
  background: var(--paper-lit); vertical-align: -3px; cursor: pointer;
}
input[type=checkbox]:checked { background: var(--green); border-color: var(--green); }
input[type=checkbox]:checked::after {
  content: ''; display: block; width: 4px; height: 9px; margin: 2px auto 0;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg);
}
label { font-size: 14px; color: var(--ink-soft); display: inline-flex; align-items: center; }

/* ---- homepage: the sheet's masthead ------------------------------------ */
.hero { border-bottom: 2px solid var(--navy); padding-bottom: calc(var(--step) * 4);
  margin-bottom: calc(var(--step) * 4); }
[data-theme='dark'] .hero { border-bottom-color: var(--rule-strong); }
.hero h1 { max-width: 17ch; }

/* the tally strip: figures at the top of a tab sheet, ruled not boxed */
.stat-row { display: flex; flex-wrap: wrap; gap: 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  margin: calc(var(--step) * 4) 0 calc(var(--step) * 3); }
.stat { flex: 1 1 150px; padding: 16px 20px 14px; border-right: 1px solid var(--rule); }
.stat:last-child { border-right: 0; }
.stat .n { display: block; font-family: Archivo, sans-serif; font-weight: 700;
  font-size: clamp(30px, 4vw, 44px); line-height: 1; letter-spacing: -0.03em;
  color: var(--navy); }
[data-theme='dark'] .stat .n { color: var(--green); }
.stat span:not(.n) { display: block; margin-top: 7px; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }

.meta { font-size: 13px; color: var(--ink-soft); }

/* a requirement's evidence: the sentence it was read from, quoted under it */
.evidence { display: block; margin-top: 4px; font-size: 13px; line-height: 1.45;
  color: var(--ink-soft); max-width: var(--measure); }

/* provenance tags: how we know a value, set in the seal's small-caps grammar */
.prov { display: inline-block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); border-bottom: 1px solid var(--rule-strong); padding-bottom: 1px;
  margin-left: 4px; white-space: nowrap; vertical-align: middle; }
.prov.derived, .prov.unknown { color: var(--amber); border-bottom-color: currentColor; }
.provenance td.title { font-weight: 600; width: 30%; }

/* bid brief: a printable sheet in the same ruled grammar */
.brief-facts { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 6px 18px;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 12px 0;
  margin: calc(var(--step) * 2) 0; }
.brief-facts dt { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
  padding-top: 3px; }
.brief-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* checksums and source URLs are unbreakable strings; on a phone they must wrap */
main code, main a { overflow-wrap: anywhere; }
.disqualifiers li { color: var(--red); font-weight: 600; }
.locked { border: 1px solid var(--rule); border-top: 2px solid var(--navy); background: var(--paper-lit);
  padding: 16px 20px; margin: calc(var(--step) * 3) 0; }
[data-theme='dark'] .locked { border-top-color: var(--green); }
/* verbatim document text must wrap on a phone: a 666px horizontal overflow
   on the detail and brief pages came from this block alone */
.doc-text { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }

/* key details on a listing: labelled cells on the ruled grid, not a bare stack */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 24px;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  margin: calc(var(--step) * 2) 0 calc(var(--step) * 3); }
.detail-grid > div { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.45; }
.detail-grid > div:last-child { border-bottom: 0; }
.label { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 3px; }
.detail-grid small { color: var(--ink-soft); }

@media print {
  .site-header, .site-footer, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: none; }
}

.hero-links { display: flex; flex-wrap: wrap; gap: 22px; font-size: 15px; font-weight: 500; }

/* ---- misc surfaces ----------------------------------------------------- */
.badge { display: inline-block; font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--rule-strong);
  border-radius: 2px; color: var(--ink-soft); }
.badge.open { color: var(--green); border-color: currentColor; }
.badge.soon { color: var(--amber); border-color: currentColor; }
.badge.closed { color: var(--red); border-color: currentColor; }

/* Notes on a tab sheet are ruled blocks, not accent-barred cards: a full
   hairline with the stub tint carried across the top edge, echoing the
   stub column rather than importing a side tab. */
.info-card, .save-search-cta, .empty-state {
  border: 1px solid var(--rule); border-top: 2px solid var(--navy);
  background: var(--paper-lit); padding: 16px 20px; margin: calc(var(--step) * 3) 0;
}
[data-theme='dark'] .info-card, [data-theme='dark'] .save-search-cta,
[data-theme='dark'] .empty-state { border-top-color: var(--green); }
.empty-state { border-top-color: var(--rule-strong); color: var(--ink-soft); }
.pagination { display: flex; gap: 16px; align-items: center; margin: calc(var(--step) * 3) 0;
  font-size: 14px; }

.faq-group { margin-bottom: calc(var(--step) * 5); }
.faq-group h2 { font-size: 13px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-soft); border-bottom: 1px solid var(--rule); padding-bottom: 6px; }
.faq-item { border-bottom: 1px solid var(--rule); padding: 14px 0; }
.faq-item summary { font-weight: 600; cursor: pointer; color: var(--navy);
  list-style: none; display: flex; justify-content: space-between; gap: 16px; }
[data-theme='dark'] .faq-item summary { color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-family: Archivo, sans-serif;
  color: var(--green); font-size: 20px; line-height: 1; }
.faq-item[open] summary::after { content: '\2212'; }
.faq-answer { padding-top: 10px; color: var(--ink-soft); max-width: var(--measure); }
.legal-draft-banner { border: 1px solid var(--amber); border-top-width: 2px;
  background: color-mix(in srgb, var(--amber) 8%, var(--paper-lit));
  padding: 14px 18px; max-width: var(--measure); }

.company-line { margin-top: calc(var(--step) * 6); padding-top: calc(var(--step) * 2);
  border-top: 1px solid var(--rule); font-size: 13px; color: var(--ink-soft); }

/* ---- footer ------------------------------------------------------------ */
.site-footer {
  max-width: var(--sheet); margin: 0 auto;
  padding: calc(var(--step) * 3);
  border-top: 1px solid var(--rule); font-size: 13px; color: var(--ink-soft);
}
.site-footer a { color: var(--ink-soft); }
.site-footer a:hover { color: var(--green); }
.site-footer p { max-width: 80ch; margin: 8px 0 0; }

/* ---- the desk view is wide; the truck view is one column --------------- */
@media (max-width: 860px) {
  main { padding: calc(var(--step) * 3) calc(var(--step) * 2) calc(var(--step) * 7); }
  .site-header { flex-wrap: wrap; gap: 12px; padding: 14px 16px; }
  .ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ledger, .ledger tbody, .ledger tr, .ledger td { display: block; width: auto; }
  .ledger tbody tr { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .ledger td { padding: 2px 0; }
  .ledger td.stub { background: none; border-right: 0; padding-bottom: 6px; }
  .ledger td.num { text-align: left; }
  .days { display: inline; font-size: 19px; }
  .days-unit { display: inline; margin-left: 5px; }
  .stat { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid var(--rule); }
  .stat:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---- the six-question profile form ------------------------------------- */
.profile-form fieldset { border: 0; border-top: 1px solid var(--rule); padding: 14px 0 4px; margin: 0 0 10px; }
.profile-form fieldset fieldset { border-top: 0; padding-top: 4px; }
.profile-form legend { font-weight: 700; padding-right: 10px; }
.profile-form textarea { width: 100%; }
.field-row { display: flex; flex-wrap: wrap; gap: 0 18px; }
.field-row label { flex: 1 1 14rem; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 2px 14px; max-height: 15rem; overflow: auto; border: 1px solid var(--rule); padding: 6px 10px; }
.check-grid label, .check-list label { display: block; font-weight: 400; }
.check-list { margin: 4px 0 10px; }
.plan-note { font-size: 13px; font-weight: 400; color: var(--ink-soft); }
.suggested { font-size: 12px; color: var(--ink-soft); }
.inline-search { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; margin: 0 0 14px; }
.sample-matches { border: 1px solid var(--rule); border-top: 2px solid var(--navy); padding: 6px 14px 10px; margin: 0 0 18px; }
[data-theme='dark'] .sample-matches { border-top-color: var(--green); }
.button-link { margin-left: 12px; }
.profile-list { list-style: none; padding: 0; margin: 0 0 12px; }
.profile-list li { border-bottom: 1px solid var(--rule); padding: 10px 0; }
.profile-list form { display: inline; margin-right: 8px; }
.profile-list .paused { color: var(--ink-soft); }
.marks { margin: 6px 0 0; }
.marks button { font-size: 12px; padding: 2px 8px; margin-right: 4px; }
.result-card.marked-down { opacity: 0.7; }
.ignored-list, .suggestions { list-style: none; padding: 0; margin: 0 0 12px; }
.ignored-list li, .suggestions li { padding: 4px 0; border-bottom: 1px solid var(--rule); }
.ignored-list form, .suggestions form { display: inline; margin-left: 8px; }