/* Bid Herald: the engineering dossier direction (25 October 2026). Values from brand/tokens/tokens.css.
   Plain paper, one type family, hairline rules. Colour only where it means something: blue for actions,
   amber for time pressure, green for verified and done, red for errors and what excludes a bid.
   Mono only for references and figures. Fonts are self-hosted in static/fonts/. */
:root {
  --paper: #f6f7f4; --surface: #fdfdfb;
  --ink: #121821; --ink-2: #39414d; --muted: #5f6774;
  --rule: #cdd2d8; --rule-strong: #9aa3ad;
  --blue: #1f4f9c; --blue-dark: #183f7d; --amber: #a55a00; --amber-fill: #e39a2d; --green: #2b7a4b; --red: #b42318;
  --display: "IBM Plex Sans Condensed", "Arial Narrow", Arial, sans-serif;
  --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --line-strong: 1.5px; --radius: 2px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--blue-dark); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.15; margin: 0 0 .4em; }
h1 { font-size: 30px; letter-spacing: -.01em; } h2 { font-size: 22px; } h3 { font-size: 18px; } h4 { font-size: 16px; }
p { margin: 0 0 .7em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* top bar */
.top { display: flex; align-items: center; gap: 26px; padding: 0 28px; height: 56px; background: var(--paper);
  border-bottom: 1px solid var(--ink); position: sticky; top: 0; z-index: 10; }
.wm { font-family: var(--display); font-size: 24px; font-weight: 700; line-height: 1; color: var(--ink); text-decoration: none; letter-spacing: -.01em; }
.wm:hover { color: var(--ink); }
.top nav { display: flex; gap: 20px; font-size: 14px; }
.top nav a { color: var(--ink-2); text-decoration: none; padding: 17px 0 15px; border-bottom: 2px solid transparent; }
.top nav a.on, .top nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.top .sp { flex: 1; }
.top .meta { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--muted); }
.top .meta a.muted:hover { color: var(--ink); }
.top select { border: 1px solid var(--rule-strong); background: var(--surface); border-radius: var(--radius); padding: 4px 6px; font-size: 13px; }
.credits-pill { border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 3px 9px; color: var(--ink); text-decoration: none; }
.credits-pill:hover { color: var(--ink); border-color: var(--ink); }
.credits-pill.low, .credits-pill.low:hover { border-color: var(--amber); color: var(--amber); }

.wrap { max-width: 1240px; margin: 0 auto; padding: 26px 28px 60px; }
.narrow { max-width: 720px; }
.msgs { list-style: none; padding: 0; margin: 0 0 18px; }
.msgs li { padding: 10px 14px; border: 1px solid var(--rule-strong); background: var(--surface); border-radius: var(--radius); margin-bottom: 6px; }
.msgs li.error { border-color: var(--red); color: var(--red); }
.lede { font-family: var(--sans); font-style: normal; font-size: 17px; line-height: 1.45; color: var(--ink-2); margin-bottom: 18px; }
.muted { color: var(--muted); } .small { font-size: 13px; } .warn { color: var(--amber); } .bad { color: var(--red); }
.mono { font-family: var(--mono); font-size: 12px; }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 20px 0; }
.flag-head { display: inline-block; font-weight: 600; font-size: 13px; border-top: var(--line-strong) solid var(--ink); padding-top: 5px; margin-bottom: 6px; }

/* buttons and forms */
.btn { display: inline-block; border: var(--line-strong) solid var(--ink); background: var(--surface); color: var(--ink); border-radius: var(--radius);
  padding: 7px 13px; font-family: var(--sans); font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; line-height: 1.3; }
.btn:hover { background: #ffffff; color: var(--ink); }
.btn.go { background: var(--blue); border-color: var(--blue); color: #ffffff; }
.btn.go:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: #ffffff; }
.btn.small { padding: 4px 9px; font-size: 13px; }
.btn.link { border: none; background: none; color: var(--blue); padding: 0; font-weight: 400; text-decoration: underline; }
.btn.link:hover { color: var(--blue-dark); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.inline { display: inline; }
label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 4px; }
input[type=text], input[type=email], input[type=url], input[type=number], input[type=datetime-local], select, textarea {
  width: 100%; border: 1px solid var(--rule-strong); background: var(--surface); border-radius: var(--radius); padding: 8px 10px; }
input[type=checkbox], input[type=radio] { accent-color: var(--blue); }
textarea { min-height: 90px; }
.form-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.form-row > * { flex: 1; min-width: 140px; }
.form-row > .btn { flex: none; }

/* tabs */
.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--rule); margin-bottom: 18px; flex-wrap: wrap; }
.tabs a { color: var(--muted); text-decoration: none; padding: 0 0 9px; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 15px; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.tabs .n { font-family: var(--mono); font-size: 12.5px; color: var(--muted); font-weight: 400; margin-left: 5px; }

/* the tender list */
table.list { width: 100%; border-collapse: collapse; background: transparent; }
.list th { text-align: left; font-weight: 600; font-size: 13px; color: var(--ink); padding: 0 10px 8px; border-bottom: var(--line-strong) solid var(--ink); vertical-align: bottom; }
.list th.r, .list td.r { text-align: right; white-space: nowrap; }
.list td { padding: 13px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.list tbody tr:hover { background: var(--surface); }
.fit-n { font-family: var(--mono); font-size: 26px; line-height: 1; font-weight: 500; letter-spacing: -.02em; }
.fit-bar { width: 52px; height: 3px; background: var(--rule); margin-top: 8px; }
.fit-bar i { display: block; height: 100%; background: var(--ink); }
.fit-l { font-size: 12px; color: var(--muted); margin-top: 5px; }
.t-title { font-family: var(--display); font-size: 19px; line-height: 1.2; font-weight: 600; color: var(--ink); text-decoration: none; }
.t-title:hover { color: var(--ink); text-decoration: underline; }
.t-buyer { color: var(--ink-2); font-size: 14px; margin-top: 3px; }
.t-src { color: var(--muted); font-size: 13px; }
.big { font-family: var(--mono); font-size: 20px; line-height: 1.1; font-weight: 500; letter-spacing: -.01em; }
.sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.soon .big { color: var(--amber); }
.act { white-space: nowrap; text-align: right; }
.act form { display: inline; }
.prov { font-size: 11px; color: var(--amber); background: none; border: 1px solid var(--amber); border-radius: var(--radius); padding: 0 4px; margin-left: 4px; }
.empty { padding: 40px 10px; color: var(--muted); }

/* the tender pop-up */
dialog.modal { border: var(--line-strong) solid var(--ink); border-radius: var(--radius); padding: 0; width: min(1060px, 96vw); max-height: 92vh;
  background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px rgba(18,24,33,.25); }
dialog.modal::backdrop { background: rgba(18,24,33,.36); }
.m-head { padding: 22px 30px 14px; border-bottom: 1px solid var(--ink); position: relative; }
.m-ref { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.m-title { font-family: var(--display); font-size: 26px; line-height: 1.15; font-weight: 600; margin: 5px 48px 4px 0; }
.m-close { position: absolute; top: 14px; right: 18px; background: none; border: none; font-size: 28px; color: var(--muted); cursor: pointer; }
.m-close:hover { color: var(--ink); }
.figs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--rule); }
.fig { padding: 12px 30px 14px; border-left: 1px solid var(--rule); }
.fig:first-child { border-left: none; }
.fig .fk { font-size: 13px; color: var(--muted); } .fig .fv { font-family: var(--mono); font-size: 24px; line-height: 1.15; font-weight: 500; letter-spacing: -.01em; }
.fig .fs { font-size: 12px; color: var(--muted); }
.m-body { display: grid; grid-template-columns: 1.05fr 1fr; }
.m-col { padding: 16px 30px 18px; min-width: 0; }
.m-col + .m-col { border-left: 1px solid var(--rule); }
.factor { padding: 8px 0; border-top: 1px solid var(--rule); }
.factor:first-of-type { border-top: none; }
.f-top { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; }
.f-pts { font-family: var(--mono); font-size: 12px; color: var(--ink-2); font-weight: 400; }
.f-bar { height: 3px; background: var(--rule); margin: 5px 0 4px; } .f-bar i { display: block; height: 100%; background: var(--ink); }
.f-why { font-size: 13px; color: var(--ink-2); }
dl.kv { font-size: 14px; margin: 0; }
dl.kv div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 7px 0; border-top: 1px solid var(--rule); }
dl.kv div:first-child { border-top: none; }
dl.kv dt { color: var(--muted); } dl.kv dd { margin: 0; }
.m-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 30px; border-top: 1px solid var(--ink); background: var(--paper); flex-wrap: wrap; }

/* workspace */
.ws-head { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: start; margin-bottom: 14px; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); border-top: var(--line-strong) solid var(--ink); border-bottom: 1px solid var(--rule); margin-bottom: 22px; }
.cards > div { padding: 10px 16px 12px 0; }
.cards .fk { font-size: 13px; color: var(--muted); } .cards .fv { font-family: var(--mono); font-size: 20px; line-height: 1.2; font-weight: 500; letter-spacing: -.01em; }
.pagetabs { display: flex; gap: 0; border-bottom: var(--line-strong) solid var(--ink); margin-bottom: 14px; flex-wrap: wrap; }
.pagetabs a { padding: 8px 18px 8px 0; color: var(--muted); text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 17px; }
.pagetabs a:hover { color: var(--ink); }
.pagetabs a.on { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.brief-page { background: var(--surface); border: 1px solid var(--rule-strong); padding: 22px 26px; }
.brief-page ul { padding-left: 18px; margin: 0 0 12px; } .brief-page li { margin-bottom: 7px; }
.src { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.checkthis { display: inline-block; font-size: 12px; line-height: 1.4; color: var(--amber); background: none; border: 1px solid var(--amber); border-radius: var(--radius); padding: 0 5px; margin-left: 4px; }
.verdict { font-family: var(--display); font-weight: 600; font-size: 20px; line-height: 1.2; margin: 14px 0 6px; }
.side { border-left: 1px solid var(--rule); padding-left: 22px; }
.grid2 { display: grid; grid-template-columns: 1fr 320px; gap: 26px; }
table.plain { width: 100%; border-collapse: collapse; font-size: 14px; }
.plain th { text-align: left; font-weight: 600; font-size: 13px; border-bottom: var(--line-strong) solid var(--ink); padding: 0 10px 6px 0; vertical-align: bottom; }
.plain td { border-bottom: 1px solid var(--rule); padding: 8px 10px 8px 0; vertical-align: top; }
.plain td.r, .plain th.r { text-align: right; }
.box { border-top: var(--line-strong) solid var(--ink); padding-top: 8px; margin-bottom: 20px; }
.step { font-size: 13px; line-height: 1.7; }
.step .done { color: var(--green); } .step .now { color: var(--ink); font-weight: 600; } .step .todo { color: var(--muted); }
details.fact summary { cursor: pointer; }
.quote { font-family: var(--sans); font-style: normal; color: var(--ink-2); border-left: 2px solid var(--rule-strong); padding-left: 10px; margin: 4px 0; }
.ok { color: var(--green); }
.pill { display: inline-block; border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 0 7px; font-size: 12px; color: var(--ink-2); }
.pill.warn { border-color: var(--amber); color: var(--amber); }
.pill.go { border-color: var(--green); color: var(--green); }

/* public pages */
.public { max-width: 640px; margin: 40px auto; padding: 0 16px; }
.public .wm { display: block; font-size: 34px; margin-bottom: 14px; }
.dbl { border-top: var(--line-strong) solid var(--ink); height: 0; margin: 0 0 14px; }
.issue h2 { border-top: var(--line-strong) solid var(--ink); padding-top: 8px; margin-top: 26px; font-size: 22px; }
.score4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 10px 0; }
.score4 > div { border-top: 1px solid var(--rule-strong); padding-top: 6px; }
.score4 b { font-family: var(--mono); font-size: 24px; line-height: 1.1; font-weight: 500; display: block; }
.score4 b .small { font-family: var(--sans); font-weight: 400; }

/* The Herald, web version: the Tender of the Day as the brand's tender card (brand/components.css) */
.issue .mast { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.issue .mast .wm { margin: 0 0 10px; }
.issue .lede { font-size: 17px; line-height: 1.5; color: var(--ink-2); margin: 12px 0 10px; }
.tcard { border: var(--line-strong) solid var(--ink); background: var(--surface); margin: 22px 0 0; }
.tcard-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--ink); font-size: 13px; color: var(--ink); }
.tcard-top .ref { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
.tcard figure { margin: 0; border-bottom: 1px solid var(--rule-strong); }
.tcard figure img { display: block; width: 100%; height: auto; }
.tcard figcaption { padding: 7px 16px 8px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.tcard h1 { font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1.12; letter-spacing: -.01em; margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--rule-strong); }
.tcard .cells { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.tcard .cells div { padding: 9px 16px 10px; border-bottom: 1px solid var(--rule); }
.tcard .cells div:nth-child(odd) { border-right: 1px solid var(--rule); }
.tcard .cells dt { font-size: 12.5px; color: var(--muted); }
.tcard .cells dd { margin: 1px 0 0; font-size: 16px; line-height: 1.35; color: var(--ink); }
.tcard .cells dd.num { font-family: var(--mono); font-weight: 500; font-size: 17px; }
.tcard .gauge { padding: 13px 16px 11px; border-bottom: 1px solid var(--rule-strong); }
.g-top { display: flex; justify-content: space-between; align-items: baseline; }
.g-top .k { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.g-top .v { font-family: var(--mono); font-weight: 500; font-size: 22px; color: var(--amber); }
.g-top .v small { font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--ink-2); margin-left: 5px; }
.track { height: 12px; margin-top: 8px; display: grid; grid-template-columns: repeat(14, 1fr); gap: 2px; }
.track i { display: block; border: 1px solid var(--amber-fill); }
.track i.left { background: var(--amber-fill); }
.track i.gone { border-color: var(--rule-strong); background: repeating-linear-gradient(135deg, var(--rule-strong) 0 1px, transparent 1px 4px); }
.ms { display: flex; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; padding-top: 7px; font-size: 12px; color: var(--ink-2); }
.ms b { display: block; font-family: var(--mono); font-weight: 500; color: var(--ink); }
.ms span:last-child { text-align: right; }
.gauge .qs { margin: 7px 0 0; padding-top: 6px; border-top: 1px dotted var(--rule-strong); font-size: 12px; color: var(--ink-2); }
.gauge .qs b { font-family: var(--mono); font-weight: 500; color: var(--ink); }
.meters { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; padding: 12px 16px 2px; }
.meters .head { grid-column: 1 / -1; margin: 0 0 6px; font-size: 13px; }
.meter { padding: 8px 0 10px; border-top: 1px dotted var(--rule-strong); }
.meter .mt { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; font-weight: 600; color: var(--ink); }
.meter .mt span { font-family: var(--mono); font-size: 20px; font-weight: 500; line-height: 1; }
.meter .mt small { font-family: var(--sans); font-size: 12px; font-weight: 400; color: var(--muted); }
.meter .bar { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; height: 6px; margin: 6px 0 5px; }
.meter .bar i { background: var(--rule); } .meter .bar i.on { background: var(--ink); }
.meter p { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.story { padding: 0 16px; }
.story p { margin: 0; padding: 10px 0; border-top: 1px dotted var(--rule-strong); color: var(--ink-2); }
.story b, .it p b { color: var(--ink); font-weight: 600; }
.catch { margin: 4px 16px 0; padding: 10px 12px; border: 1px solid var(--amber); color: var(--amber); }
.tcard .acts { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px; }
.items .it { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.items .it:last-child { border-bottom: none; }
.it .ttl { font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1.25; }
.it p { margin: 3px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.it .meta { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.it .meta b { font-weight: 500; color: var(--ink); }
.it .meta b.num { font-family: var(--mono); }
.it .meta b.t { color: var(--amber); }
.product { border: 1px solid var(--rule-strong); background: var(--surface); margin-top: 32px; }
.product img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--rule); }
.product .cap { margin: 0; padding: 7px 14px 0; font-size: 12.5px; color: var(--muted); }
.product .txt { margin: 0; padding: 8px 14px 12px; font-size: 15px; color: var(--ink-2); }
.product .wm-inline { font-family: var(--display); font-weight: 700; color: var(--ink); }
.issue .foot { margin-top: 22px; }
@media (max-width: 560px) {
  .tcard h1 { font-size: 25px; }
  .tcard .cells, .meters { grid-template-columns: 1fr; }
  .tcard .cells div:nth-child(odd) { border-right: none; }
}

@media (max-width: 860px) {
  .top { padding: 0 14px; gap: 14px; height: auto; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .top nav { order: 3; width: 100%; overflow-x: auto; gap: 16px; }
  .top nav a { padding: 6px 0; }
  .wrap { padding: 18px 16px 40px; }
  .list thead { display: none; }
  .list tbody tr { display: grid; grid-template-columns: 60px 1fr 1fr 1fr; }
  .list td { padding: 6px; border-bottom: none; }
  .list tbody tr { border-bottom: 1px solid var(--rule); padding: 8px 0; }
  .list tbody tr:first-child { border-top: var(--line-strong) solid var(--ink); }
  .list td.fit { grid-row: span 2; } .list td.tender { grid-column: 2 / -1; }
  .list td.r { text-align: left; } .list td.act { grid-column: 1 / -1; text-align: left; }
  .big { font-size: 17px; }
  .figs, .cards { grid-template-columns: 1fr 1fr; }
  .m-body, .grid2, .ws-head { grid-template-columns: 1fr; }
  .m-col + .m-col, .side { border-left: none; padding-left: 0; border-top: 1px solid var(--rule); }
  .score4 { grid-template-columns: 1fr 1fr; }
  dl.kv div { grid-template-columns: 1fr; gap: 2px; }
}

  /* The logo: the mark (the cited line) at cap height before the name, from brand/logo/make_logo.py */
  .logo::before { content: ""; display: inline-block; width: 0.6em; height: 0.698em; margin-right: 0.293em; background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 698'><path d='M0.00 0.00 L253.00 0.00 L253.00 120.00 L143.00 120.00 L143.00 578.00 L253.00 578.00 L253.00 698.00 L0.00 698.00 Z M600.00 0.00 L347.00 0.00 L347.00 120.00 L457.00 120.00 L457.00 578.00 L347.00 578.00 L347.00 698.00 L600.00 698.00 Z M187.00 287.00 L413.00 287.00 L413.00 411.00 L187.00 411.00 Z'/></svg>") no-repeat 0 0 / 100% 100%; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 698'><path d='M0.00 0.00 L253.00 0.00 L253.00 120.00 L143.00 120.00 L143.00 578.00 L253.00 578.00 L253.00 698.00 L0.00 698.00 Z M600.00 0.00 L347.00 0.00 L347.00 120.00 L457.00 120.00 L457.00 578.00 L347.00 578.00 L347.00 698.00 L600.00 698.00 Z M187.00 287.00 L413.00 287.00 L413.00 411.00 L187.00 411.00 Z'/></svg>") no-repeat 0 0 / 100% 100%; }