/* chrome.css — GENERATED by tools/build_chrome_css.py. Do not hand-edit.
   The slice of style.css the marketing landing page needs. Re-run the
   generator after changing the landing markup or style.css;
   tests/test_landing_chrome_css.py fails if this drifts. */
/* TenderRadar components. Built on tokens.css. RTL-first, logical properties. */

/* The HTML [hidden] attribute must always win: components like .btn set an
   explicit `display`, which otherwise beats the UA `[hidden]{display:none}` on
   specificity and leaves "hidden" elements visible (e.g. the wizard's Next
   button lingering on the final step). Keep this first so it's overridable
   only by an even more specific intentional rule. */
[hidden] { display: none !important; }


.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s5); padding-block: var(--s6); }


/* ---------- Top bar ---------- */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}

.topbar-inner {
  max-width: var(--maxw); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); padding: var(--s3) var(--s5);
}

.brand { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font-display); font-size: 22px; color: var(--ink); }

.brand:hover { text-decoration: none; }

.brand .mark { color: var(--seal); display: inline-flex; }

/* Bidvane wordmark lockup (UK): two-tone word with a reversed "tenders" bar the
   exact width of the word (flex column + stretch). */
.bv-lock { display: inline-flex; flex-direction: column; align-items: stretch; line-height: 1; }

.bv-word { font-family: var(--font-display); font-size: 25px; line-height: .82; letter-spacing: -.01em;
  white-space: nowrap; -webkit-text-stroke: .6px; paint-order: stroke fill; }

.bv-word .b1 { color: var(--seal); -webkit-text-stroke-color: var(--seal); }

.bv-word .b2 { color: var(--ink); -webkit-text-stroke-color: var(--ink); }

.bv-bar { margin-top: 3px; padding: 2px 0 1px; border-radius: 3px; background: var(--accent);
  color: #fff; font-family: var(--font-body); font-weight: 800; text-transform: uppercase;
  font-size: 11px; letter-spacing: .22em; text-indent: .22em; text-align: center; }

.nav { display: flex; align-items: center; gap: var(--s1); }

.nav a { color: var(--ink-soft); padding: var(--s2) var(--s3); border-radius: var(--r-control); font-weight: 500; font-size: var(--t-sm); }

.nav a:hover { background: var(--paper); color: var(--ink); text-decoration: none; }

.nav a.active { color: var(--ink); background: var(--paper); }

/* The signup CTA is a button inside the nav; .nav a (grey, with a pale hover
   background) would otherwise win on specificity over .btn-primary and make the
   button white-on-white on hover. Pin colour and the hover background so it
   matches the page's other primary CTAs. */
.nav a.btn-primary, .nav a.btn-primary:hover { color: #fff; }

.nav a.btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }

.nav-icon { display: inline-flex; vertical-align: -3px; margin-inline-end: 4px; }


/* Expandable "בלוג" menu in the nav (native <details>). */
.nav-dropdown { position: relative; }

.nav-dropdown > summary {
  list-style: none; cursor: pointer; color: var(--ink-soft); font-weight: 500;
  font-size: var(--t-sm); padding: var(--s2) var(--s3); border-radius: var(--r-control);
  display: inline-flex; align-items: center;
}

.nav-dropdown > summary::-webkit-details-marker { display: none; }

.nav-dropdown > summary::marker { content: ""; }

.nav-dropdown > summary:hover { background: var(--paper); color: var(--ink); }

.nav-dropdown[open] > summary { color: var(--ink); background: var(--paper); }

.nav-dropdown-menu {
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 50;
  min-width: 300px; max-width: 86vw; padding: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 2px;
}

.nav-dropdown-menu a {
  display: block; padding: 8px 10px; border-radius: var(--r-control);
  color: var(--ink); font-size: var(--t-sm); line-height: 1.45; font-weight: 500;
}

.nav-dropdown-menu a:hover { background: var(--seal-wash); text-decoration: none; }

.nav-caret { display: inline-flex; margin-inline-start: 3px; transition: transform .15s ease; }

.nav-dropdown[open] > summary .nav-caret { transform: rotate(180deg); }

.nav-dropdown-label { padding: 6px 10px 2px; font-size: var(--t-xs); font-weight: 700; color: var(--ink-soft); }

.nav-dropdown-sep { display: block; height: 1px; background: var(--line); margin: 6px 4px; }


/* Public (logged-out) header: flat destination links; below 860px they fold
   into a single "Menu" dropdown so the bar stays brand · Menu · login · CTA. */
.nav-pub-links { display: flex; align-items: center; gap: var(--s1);
  margin-inline-start: 22px; margin-inline-end: auto; }

/* Sleek public-nav links: crisp ink text with a teal underline that grows in
   on hover (brand --seal, deliberately not the orange accent). */
.nav .nav-pub-link { position: relative; font-weight: 500; color: var(--ink);
  background: transparent; border-radius: 0; }

.nav .nav-pub-link::after { content: ""; position: absolute;
  inset-inline: var(--s3); bottom: 3px; height: 2px; border-radius: 2px;
  background: var(--seal); opacity: 0; transform: scaleX(0);
  transform-origin: center; transition: transform .18s ease, opacity .18s ease; }

.nav .nav-pub-link:hover { background: transparent; color: var(--seal); }

.nav .nav-pub-link:hover::after { opacity: 1; transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {

  .nav .nav-pub-link::after { transition: none; }
}

/* Auth cluster — separated pair, square-angled (6px): Log in as a clean
   framed button ~10% smaller than the solid Sign up. */
.nav-auth { display: inline-flex; align-items: center; gap: 12px; margin-inline-start: 16px; }

.nav .nav-pub-login {
  display: inline-flex; align-items: center;
  padding: 7px 14px; font-size: var(--t-xs);
  border: 1px solid rgba(0, 0, 0, .8);
  border-radius: 6px;
  font-weight: 600; color: var(--ink);
  line-height: 1.2; transition: border-color .12s ease, background .12s ease;
}

.nav .nav-pub-login:hover { background: var(--paper); color: var(--ink); border-color: var(--ink); }

.nav .nav-signup { padding: 9px 18px; font-size: 16px; line-height: 1.2; border-radius: 6px; }

.nav-pub-menu { display: none; }

/* The auth cluster hugs the end; the nav stretches so the destination links
   sit left of the free space (clear of the brand, away from login/CTA). */
.topbar-inner:has(.nav-pub-links) .nav { flex: 1; }
@media (max-width: 860px) {

  .nav-pub-links { display: none; }

  .nav-pub-menu { display: inline-block; margin-inline-end: auto; }
}


/* Account menu (logged-in): workspace/settings/admin/logout behind one control,
   so the bar keeps only the daily work destinations flat. */
.nav-account > summary { gap: 4px; padding-block: 4px; }

.nav-account > summary.active { background: var(--paper); }

.nav-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--seal-wash); color: var(--seal);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; line-height: 1;
}

.nav-account > summary.active .nav-avatar,
.nav-account[open] > summary .nav-avatar { background: var(--seal); color: #fff; }

.nav-account-menu { min-width: 210px; }

.nav-account-menu a { display: flex; align-items: center; gap: 8px; }

.nav-account-menu a .nav-icon { margin: 0; color: var(--ink-soft); }

.nav-account-menu a.active { background: var(--paper); }

.nav-account-who {
  max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500; padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px;
}


/* Laptop widths: before anything wraps, drop the primary-nav labels to icons
   (title attributes keep the names on hover). The account control is already
   just an avatar. */
@media (max-width: 1000px) {
  .nav a .label { display: none; }
  .nav a { padding: var(--s2); }
  .nav-icon { margin: 0; }
  .nav-account-menu a .nav-icon { margin: 0; }
}

.contact-lane .btn { display: inline-flex; align-items: center; gap: 6px; direction: ltr; }

/* .blog-body a colouring would otherwise repaint the primary button's label. */
.contact-lane .btn-primary, .contact-lane .btn-primary:hover { color: #fff; }


/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 10px var(--s4); border-radius: var(--r-control);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-family: var(--font-body); font-size: var(--t-sm); font-weight: 500; cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}

.btn:hover { background: var(--paper); border-color: #d3d6cd; text-decoration: none; }

.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }

.btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }

.btn-lg { padding: 14px var(--s6); font-size: var(--t-md); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--accent-ink); }

.btn-block { width: 100%; }

/* Submit-in-progress state (set by the form loading handler in base.html): a
   spinner + locked button so the click clearly registered while the server works. */
.btn.is-loading { cursor: progress; opacity: .92; pointer-events: none; }

.btn.is-loading::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: btn-spin .6s linear infinite;
}

@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
 .btn.is-loading::before { animation: none; }
}


/* ---------- Forms ---------- */
label { font-weight: 500; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s4); }

.field > span, .field-label { font-size: var(--t-sm); color: var(--ink); font-weight: 500; }

.pw-wrap.is-revealed .pw-ic-show { display: none; }

.pw-wrap.is-revealed .pw-ic-hide { display: inline-flex; }

input, select, textarea {
  font-family: var(--font-body); font-size: var(--t-sm); color: var(--ink);
  padding: 10px var(--s3); border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--surface); width: 100%;
}

input:hover, select:hover, textarea:hover { border-color: #d3d6cd; }

input:focus, select:focus, textarea:focus { outline: 2px solid var(--seal); outline-offset: 1px; border-color: var(--seal); }

select { cursor: pointer; }


.alert { padding: var(--s3) var(--s4); border-radius: var(--r-control); border: 1px solid var(--bad); background: var(--bad-wash); color: var(--bad); margin-bottom: var(--s4); }


/* ---------- Chips (pure-CSS selectable via :has(:checked)) ---------- */
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px var(--s3); border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-soft); font-size: var(--t-sm); font-weight: 500;
  cursor: pointer; transition: background .12s, border-color .12s, color .12s; user-select: none;
}

.chip:hover { background: var(--paper); }

.chip input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; margin: 0; }

.chip:has(input:checked), .chip.selected { background: var(--seal-wash); border-color: var(--seal); color: var(--seal); font-weight: 700; }

.chip:has(input:focus-visible) { outline: 2px solid var(--seal); outline-offset: 2px; }


.cert-group { margin-bottom: var(--s4); }

.cert-group > .cert-label { font-size: var(--t-xs); color: var(--ink-soft); font-weight: 700; margin-bottom: var(--s2); display: block; }


/* Deadline chip */
.deadline-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 4px 10px; border-radius: 999px; font-size: var(--t-xs); font-weight: 600;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
}

.deadline-chip.soon { border-color: var(--check); background: var(--check-wash); color: var(--check); }

.deadline-chip.urgent { border-color: var(--accent); background: var(--accent); color: #fff; }

.deadline-chip.passed { color: var(--ink-soft); background: var(--paper); }

/* A dynamic market / DPS has no closing date to count down to — it takes new
   members for the life of the market. Reads as a steady state, not urgency. */
.deadline-chip.dl-open { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent);
  color: var(--ok); font-weight: 600; }


/* UK winnability signal (T2.3): a subtle "how contested?" chip on the fit card,
   in the same family as the stage / deadline chips. Tinted by how concentrated
   the field is — green when open, warm gold when an incumbent holds it, neutral
   when moderate. Rendered only for UK behind uk_winnability (v.winnability). */
.uk-winnability {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px; font-size: var(--t-xs); font-weight: 600;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
}

.uk-winnability .ic { flex: none; }

.uk-winnability.win-open { border-color: var(--ok); background: var(--ok-wash); color: var(--ok); }

.uk-winnability.win-concentrated { border-color: #d9a441; background: var(--check-wash); color: #8a5a12; }


/* Planning notices read as a quiet inline annotation right after the tender
   title — soft warm gold, no background, so it sits native to the row and
   doesn't catch the eye. Flows inline, so it never reflows the rest of the row. */
.stage-tag {
  font-size: 10.5px; font-weight: 600; letter-spacing: .3px;
  color: #9a7a2b; white-space: nowrap;
}

/* Dashboard match cards: the planning caption a touch larger than in the table,
   nudged 1px down so the smaller text optically rests on the verdict's line. */
.fitcard-status .stage-tag { font-size: calc(10.5px * 1.1); position: relative; top: 1px; }


/* ---------- Saved pipeline page ---------- */
/* Header row: result count on one side, stage tally chips on the other. */
.saved-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s2) var(--s4); margin-bottom: var(--s4);
}

.saved-head .results-summary { margin: 0; }

.pipeline-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }

.ps-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px; font-size: var(--t-xs); font-weight: 600;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  cursor: pointer; font-family: inherit; transition: opacity .12s ease, background .12s ease;
}

.ps-pill:hover { background: var(--paper); }

.ps-pill b { color: inherit; font-weight: 700; }

/* Each pill is an independent on/off filter. "On" (visible) is the default,
   coloured look; "off" (hidden) dims it and strikes its count. */
.ps-pill.is-off { opacity: .4; background: var(--paper); }

.ps-pill.is-off b { text-decoration: line-through; }

.ps-pill.is-off:hover { opacity: .7; }

/* Show-all chip. */
.ps-clear {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px; font-size: var(--t-xs); font-weight: 600;
  border: 1px dashed var(--line); background: transparent; color: var(--ink-soft);
  cursor: pointer; font-family: inherit;
}

.ps-clear:hover { background: var(--paper); color: var(--ink); }

.sc-meta .dot { color: var(--line); }

.sc-pub .lucide { color: var(--ink-soft); }

.sc-fact .lucide { color: var(--ink-soft); }

.sc-fact-warn .lucide { color: var(--accent-ink); }

.sc-facts .t-conf-chip { line-height: 1.7; }


/* Stage <select> rendered as a pill — the card's one prominent control. */
.stage-form { margin: 0; }

.stage-select {
  font-size: var(--t-xs); font-weight: 700; padding: 6px 12px;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-soft); cursor: pointer;
  -webkit-appearance: none; appearance: none; text-align: center; text-align-last: center;
}

/* The CLOSED control wears the stage colour as a status cue, but the open
   dropdown must stay neutral — otherwise the whole option list renders in the
   current stage's red/green, which reads as broken. <option> styling is
   limited, but color/background are honoured by Chromium/Firefox. */
.stage-select option { color: var(--ink); background: var(--surface); font-weight: 500; }

.sc-actions {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin-top: var(--s4); padding-top: var(--s3); border-top: 1px dashed var(--line);
}

.sc-actions .inline { display: inline-flex; margin: 0; }

.note-form { margin: var(--s2) 0 0; }

/* Slim inline note field: borderless auto-growing textarea + a round save
   button sharing one rounded container; a tiny lock hint sits beneath it. */
.note-field {
  display: flex; align-items: flex-end; gap: var(--s2);
  border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--surface); padding: 5px 6px 5px 10px;
  transition: border-color .12s ease, box-shadow .12s ease;
}

.note-field:focus-within { border-color: var(--seal); box-shadow: 0 0 0 3px var(--seal-wash); }

.note-input {
  flex: 1; min-width: 0; border: 0; background: transparent; resize: none;
  font: inherit; color: var(--ink); line-height: 1.5; padding: 4px 0;
  max-height: 160px; overflow-y: auto;
}

.note-input:focus { outline: none; }

.note-save-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--seal-wash); color: var(--seal); transition: background .12s ease, color .12s ease;
}

.note-save-btn:hover { background: var(--seal); color: #fff; }

.note-save-btn.is-saved { background: var(--ok); color: #fff; }

.note-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: 5px; }

.note-hint { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-xs); }

.note-hint .lucide { opacity: .8; }

.note-counter { font-size: var(--t-xs); font-variant-numeric: tabular-nums; flex: none; }

.note-counter.is-low { color: var(--accent-ink); font-weight: 700; }


/* Controls row: stage filter then the outcome KPIs, flowing from the start and
   wrapping together as a tidy group (no forced split that isolates a chip). */
.pipeline-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); margin-bottom: var(--s4); }

.pipeline-summary { margin-bottom: 0; }


/* ---- View toggle (list / board) ---- */
.view-toggle { display: inline-flex; flex: none; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }

.vt-btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft);
  font: inherit; font-size: var(--t-xs); font-weight: 600; cursor: pointer;
}

.vt-btn:hover { color: var(--ink); }

.vt-btn.is-active { background: var(--seal-wash); color: var(--seal); }


/* ---- Outcome KPI chips (compact, non-clickable; aligned with the filter) ---- */
.pipeline-stats { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0; }

.stat-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 999px;
  background: var(--paper); font-size: var(--t-xs); color: var(--ink-soft);
}

.stat-chip b { color: var(--ink); font-weight: 700; }

.stat-chip .stat-ok { color: var(--ok); }

.stat-chip .stat-bad { color: var(--bad); }

/* The awarded-value KPI: same size as the other chips, set apart by colour.
   (Own class — must not collide with the admin `.stat-value` display number.) */
.stat-chip.stat-money { background: var(--seal-wash); color: var(--seal); }

.stat-chip.stat-money b { color: var(--seal); }


/* ---- Won/lost award capture (compact) ---- */
.award-form {
  margin: var(--s2) 0; padding: var(--s2) var(--s3) var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface);
}

.award-form.stage-won { border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); background: color-mix(in srgb, var(--ok-wash) 50%, var(--surface)); }

.award-form.stage-lost { border-color: color-mix(in srgb, var(--bad) 30%, var(--line)); background: color-mix(in srgb, var(--bad-wash) 50%, var(--surface)); }

.award-head { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: var(--t-xs); color: var(--ink-soft); margin-bottom: 6px; }

.award-head .lucide { color: var(--check); }

.award-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s2); }

.award-row .field { flex: 1; min-width: 120px; margin: 0; }

.award-row .field span { font-size: var(--t-xs); }

.award-row .field input { padding: 6px 10px; }

.award-save { flex: none; padding: 7px 10px; align-self: flex-end; }

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

.kb-detail .t-detail-summary { font-size: var(--t-sm); }

.kb-detail-stage .stage-select { width: auto; min-width: 8.5rem; }

/* Facts read exactly as the list view (same label|value rows, same dashed
   separators, same typography) — the only difference is width: the focused
   card is wide enough to flow them into two columns instead of one. Each fact
   keeps the shared .t-detail-facts > div styling; a long free-text value spans
   the full width. */
.kb-detail .t-detail-facts {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s5); row-gap: 7px;
  margin-top: var(--s3); padding-top: var(--s3); border-top: 1px dashed var(--line);
}

.kb-detail .t-detail-facts > div:has(.t-fact-long) { grid-column: 1 / -1; }

/* Confidence reads as one grouped full-width block: the chip sits beside its
   label (left-aligned — not flung to the far-right edge like a numeric value),
   and the explanation sentence spans the full width directly beneath it. */
.kb-detail .t-detail-facts > .t-conf-row,
.kb-detail .t-detail-facts > .t-conf-note { grid-column: 1 / -1; }

.kb-detail .t-detail-facts > .t-conf-row dd { text-align: start; }

.kb-actions .inline { display: inline-flex; margin: 0; }

.kb-actions .btn { padding: 5px 10px; }


/* ---------- Team / workspace ---------- */
.head-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }

.ws-avatar.sm { width: 24px; height: 24px; font-size: 10px; }

.assignee-badge {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%; font-size: 10px; font-weight: 700;
  background: var(--accent-wash); color: var(--accent-ink);
}

.assign-form { margin: var(--s2) 0; display: flex; align-items: center; gap: var(--s2); }

.assign-label { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-xs); }

.assign-select {
  width: auto; max-width: 11rem; font-size: var(--t-xs); font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer;
}

.notes-block { margin-top: var(--s3); }


/* @-mention chip inside a saved note. */
.note-text .mention {
  color: var(--accent-ink); font-weight: 700;
  background: color-mix(in srgb, var(--seal) 12%, transparent);
  border-radius: 4px; padding: 0 3px; unicode-bidi: plaintext;
}

.note-mention-tag .lucide { color: var(--seal); }

.mention-opt:hover, .mention-opt.is-active { background: var(--seal-wash); }

.stab.is-active { color: var(--seal); border-bottom-color: var(--seal); }

.stab .lucide { flex: none; }

.billing-mark.ok { background: var(--ok-wash, #E7F3EC); color: var(--ok); }

.ws-upgrade-list .lucide { color: var(--ok); }

.ws-invite-foot .btn-primary { height: 40px; }

.ws-trial-alert .lucide { color: var(--seal); flex: none; margin-top: 2px; }

.member-team-badge .lucide { flex: none; }

.ws-admin-meta .lucide { vertical-align: middle; }

/* Segmented plan picker — click a segment to set the plan. */
.plan-seg { display: inline-flex; flex: none; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface); }

.plan-seg .inline { margin: 0; }

.seg-btn { border: 0; background: transparent; padding: 6px 12px; font: inherit; font-size: var(--t-xs); font-weight: 600; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }

.seg-btn:hover { background: var(--paper); color: var(--ink); }

.seg-btn.is-active { background: var(--seal); color: #fff; }

.seg-business.is-active { background: var(--ok); }


/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }

.section-title .count { color: var(--ink-soft); font-size: var(--t-sm); font-family: var(--font-body); }


/* ---------- Score seal ---------- */
.seal { position: relative; display: inline-grid; place-items: center; }

.seal svg { display: block; transform: rotate(0deg); }

.seal .seal-num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }

.seal .seal-num b { font-family: var(--font-display); color: var(--seal); line-height: 1; }

.seal .seal-tier { position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
  font-size: 7.87px; letter-spacing: .05em; text-transform: uppercase; color: #333333; white-space: nowrap; }

/* Hebrew has no case and its glyphs are denser — drop the letter-spacing that
   suits English caps. */
[dir="rtl"] .seal .seal-tier { letter-spacing: 0; }

.seal.size-lg .seal-num { place-content: center; transform: translateY(-2px); }

.seal.size-lg .seal-num b { font-size: 25.3px; }

.seal.size-sm .seal-num b { font-size: 16.5px; }


/* ---------- Fit Card (תעודת התאמה) ---------- */
.fitcard { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }

.fitcard + .fitcard { margin-top: var(--s5); }

.fitcard-head { display: flex; gap: var(--s4); padding: var(--s4) var(--s5); align-items: flex-start; }

.fitcard-head .seal { flex: none; }

.fitcard-main { flex: 1; min-width: 0; }

.fitcard-title { font-family: var(--font-display); font-size: var(--t-md); color: var(--ink); margin: 0 0 6px; }

/* "חדש" corner ribbon — tenders added to the system in the last 24h. A light-red
   diagonal banner across the top-left corner of the card (clipped by the card's
   overflow:hidden), so it's highly visible without covering any tender text.
   Tooltip on hover explains it. */
.new-ribbon {
  position: absolute; top: 14px; left: -44px; z-index: 2;
  width: 140px; text-align: center; transform: rotate(-45deg);
  background: #f4a9a9; color: #7a1414;
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; padding: 3px 0; cursor: default;
  box-shadow: 0 1px 3px rgb(28 43 51 / 0.18);
}

/* When the ribbon is present, push the card head clear of the corner so a long
   title never tucks under the diagonal banner (RTL: long lines reach the left
   corner where the ribbon sits). */
.new-ribbon + .fitcard-head { padding-top: 42px; }

.new-ribbon + .fitcard-head .seal { margin-top: -6px; }

/* Two predictable rows under the title: primary signal (verdict + deadline)
   on its own row so it doesn't shift with the publisher line length. */
.fitcard-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin: 0 0 6px; font-size: var(--t-sm); }

.fitcard-status .verdict-ok { color: var(--ok); font-weight: 700; }

.fitcard-status .verdict-no { color: var(--accent-ink); font-weight: 700; }

.fitcard-context { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s2); color: var(--ink-soft); font-size: var(--t-sm); }

/* Center each label's icon with its text (icons were sitting slightly high on
   the baseline) — applies wherever these card meta rows render. */
.fitcard-status span, .fitcard-context span { display: inline-flex; align-items: center; gap: 4px; }

.fitcard-status span .lucide, .fitcard-context span .lucide { margin: 0; }

.fitcard-context .dot { color: var(--line); }

.fitcard-context .deadline-chip { font-size: calc(var(--t-sm) - 1px); }

.fitcard-fit .lucide { flex: none; }

.fitcard-summary { margin: var(--s3) 0 0; color: var(--ink); }

.fitcard-keyfacts a .lucide, .fitcard-keyfacts span .lucide { color: var(--seal); }

/* Demo card footer: secondary metadata split out of the strip (document + tour). */
.fitcard-foot .ff-doc, .fitcard-foot .ff-meta { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-sm); color: var(--ink-soft); }

.fitcard-foot .ff-doc a { color: var(--seal); font-weight: 700; }

.fitcard-foot .ff-doc .lucide, .fitcard-foot .ff-meta .lucide { color: var(--seal); }

.fitcard-foot .ff-meta b { color: var(--ink); font-weight: 700; }

.fitcard-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s5); border-top: 1px solid var(--line); background: var(--paper); }

.fitcard-actions { display: inline-flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

.fitcard-actions .hide-form { display: inline-flex; margin: 0; }

.fitcard-actions .btn { padding: 6px var(--s3); font-size: var(--t-sm); }

.hide-btn { color: var(--ink-soft); }

.hide-btn:hover { color: var(--bad); background: var(--bad-wash); }

/* Save / bookmark toggle: outline when unsaved, filled accent when saved. */
.save-btn { color: var(--ink-soft); }

.save-btn:hover { color: var(--accent-ink); background: rgba(232, 101, 13, 0.08); }

.save-btn.is-saved { color: var(--accent); }

.save-btn.is-saved .lucide { fill: var(--accent); }

/* Inline AJAX save in progress: the spinner replaces the bookmark glyph so the
   click registers immediately while the save persists (no full page reload). */
.save-btn.is-loading { position: relative; }

.save-btn.is-loading svg { visibility: hidden; }

.save-btn.is-loading::before { position: absolute; top: 50%; inset-inline-start: 50%; margin: -7px 0 0 -7px; }

.admin-tab.is-active { color: var(--accent-ink); border-bottom-color: var(--accent); }

.flag-info .muted { font-size: var(--t-sm); }

.ub-title .ic { color: var(--accent); }


/* Hidden-card fade-out (smooth dismissal feel when a card disappears post-hide) */
.fitcard.fading-out { animation: fade-out .26s ease forwards; }

@keyframes fade-out { to { opacity: 0; transform: translateY(-4px); } }

.row-actions .inline { display: inline-flex; margin: 0; }

.row-actions .btn { padding: 4px var(--s3); }

/* "למקור המכרז" keeps its text while the actions column is wide enough, and
   collapses to an icon-only button (tooltip preserved) once the column gets too
   narrow — so the label never spills past the cell edge. The browse table
   carries three action buttons so it tightens first (~900px); the demo table
   has fewer buttons and can hold the label down to ~780px. */
@media (max-width: 900px) {
  .row-actions .btn-label { display: none; }
}

.passed-chip .lucide { color: var(--ink-soft); }


details.fitcard-details > summary { list-style: none; cursor: pointer; color: var(--accent-ink); font-weight: 600; font-size: var(--t-sm); display: flex; align-items: center; gap: 6px; padding: var(--s3) var(--s5); }

details.fitcard-details > summary:hover { background: var(--paper); }

details.fitcard-details > summary::-webkit-details-marker { display: none; }

details.fitcard-details > summary .chev { transition: transform .18s ease; }

details.fitcard-details[open] > summary .chev { transform: rotate(180deg); }


.conditions { display: grid; gap: var(--s4); padding: var(--s4) var(--s5) var(--s5); border-top: 1px dashed var(--line); }

.cond-group h4 { display: flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: var(--t-sm); font-weight: 700; margin: 0 0 var(--s2); }

.cond-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

.cond-group li { display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--t-sm); }

.cond-group li .ic { flex: none; margin-top: 2px; }

.cond-ok h4 { color: var(--ok); }
 .cond-ok .ic { color: var(--ok); }

.cond-bad h4 { color: var(--bad); }
 .cond-bad .ic { color: var(--bad); }

.cond-check h4 { color: var(--check); }
 .cond-check .ic { color: var(--check); }

.fitcard-extra { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); padding: 0 var(--s5) var(--s4); color: var(--ink-soft); font-size: var(--t-sm); }

.fitcard-extra b { color: var(--ink); font-weight: 600; }

.fitcard-enrichment { padding: 0 var(--s5) var(--s3); display: flex; flex-direction: column; gap: var(--s3); }


/* ---------- Readiness (action plan) — behind the "readiness" flag ---------- */
/* A distinct but quiet summary tile: a neutral (not coloured) inset so it reads
   as a separate block from the flat condition lists below — the level colour
   shows only through the inline-start accent, the badge, and the gauge bar. */
.readiness { margin: var(--s4) var(--s5) 0; padding: var(--s3) var(--s4);
  background: var(--paper); border-radius: var(--r-control);
  border-inline-start: 3px solid var(--line); display: grid; gap: 7px; }

/* Decision summary promoted onto the collapsed UK fit card (above the expandable
   details): needs the bottom margin the in-details copy didn't. */
.fitcard-readiness { margin-bottom: var(--s3); }

/* Both children carry .readiness, so one selector covers verdict + eligibility.
   Their own inset margin and left accent go: inside the block there is no card
   edge to inset from, and the block's own border is the outline now. */
.sc-block > .readiness { margin: 0; border-radius: 0; border-inline-start: 0; }

.sc-block > .fcv-sum + .readiness { border-top: 1px solid var(--line); }

/* Collapsible verdict (the /saved list). The head is the <summary>, so the
   verdict line and its for/against tally stay visible while the signals fold
   away; the marker is hidden because the head already reads as a control. */
.fcv-collapsible > .fcv-head { cursor: pointer; list-style: none; }

/* …but never fold away the reason. A collapsed "Long shot" that hides WHY
   is the same complaint in a smaller box, so the blocker rides with the
   summary and only the signal list collapses. */
.fcv-collapsible:not([open]) > .fcv-blocker { display: block; }

.fcv-blocker { color: var(--ink); }

.fcv-collapsible > .fcv-head::-webkit-details-marker { display: none; }

/* The SAME 14px chevron the eligibility panel below uses — a 7px CSS caret next
   to a 14px icon read as two different controls stacked on each other. */
.fcv-collapsible > .fcv-head .rd-chev { transition: transform .15s ease; flex: none; color: var(--ink-soft); }

.fcv-collapsible[open] > .fcv-head .rd-chev { transform: rotate(180deg); }

.fcv-collapsible > .fcv-head:hover .rd-badge { text-decoration: underline; text-underline-offset: 2px; }

.readiness .rd-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }

.rd-badge { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--t-sm); }

.rd-frac { font-weight: 600; font-size: var(--t-xs); color: var(--ink-soft); }

/* clear · to verify · gaps tally (replaces the bare X/X on the UK panel) */
.rd-tally { font-size: var(--t-xs); color: var(--ink-soft); white-space: nowrap; }

.rd-tally b { font-weight: 700; }

.rd-tally .t-ok { color: var(--ok); }

.rd-tally .t-check { color: var(--check); }

.rd-tally .t-bad { color: var(--bad); }

.rd-tally .t-none { color: var(--ink-soft); }

.rd-bar { height: 3px; border-radius: 999px; background: var(--line); overflow: hidden; }

.rd-bar > span { display: block; height: 100%; border-radius: 999px; transition: width .5s ease; }

.rd-sub { margin: 0; font-size: var(--t-xs); line-height: 1.5; color: var(--ink-soft); }

.rd-cta { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: var(--t-sm); font-weight: 600; color: var(--accent-ink); }

.rd-cta:hover { text-decoration: underline; }

/* One-click "I have this" quick-add of a required certification. */
.rd-quickadd { display: grid; gap: 6px; }

.rd-qa-label { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-xs);
  font-weight: 600; color: var(--ink-soft); }

.rd-qa-label .ic { color: var(--ok); }

.rd-qa-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.rd-qa-form { margin: 0; }

.rd-qa-btn { display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: var(--t-xs); font-weight: 600; color: var(--ink); padding: 3px 10px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  transition: background .15s ease, color .15s ease, border-color .15s ease; }

.rd-qa-btn:hover { background: var(--ok); border-color: var(--ok); color: #fff; }

.rd-qa-btn:hover .lucide { color: #fff; }

.rd-qa-btn .lucide { color: var(--ok); }

/* On the UK collapsed card the quick-add sits directly under the read-only
   requirement lists and was blending into them. Set it apart as a tinted,
   bordered action callout so it clearly reads as "do something" rather than
   another checklist line. (Scoped to the UK fit card; IL is unchanged.) */
.fitcard-readiness .rd-quickadd { margin-top: var(--s2); padding: var(--s2) var(--s3);
  background: var(--accent-wash); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: var(--r-control); }

.fitcard-readiness .rd-qa-label { color: var(--accent-ink); }

.fitcard-readiness .rd-qa-label .ic { color: var(--accent-ink); }

/* Responsibility reminder shown only when the panel reads "ready". */
.rd-disclaimer { display: flex; align-items: flex-start; gap: 5px; margin: 2px 0 0;
  font-size: var(--t-xs); line-height: 1.45; color: var(--ink-soft);
  border-top: 1px solid var(--line); padding-top: 6px; }

.rd-disclaimer .ic { flex: none; margin-top: 2px; color: var(--ink-soft); }

.rd-ready .rd-badge, .rd-ready .rd-badge .ic { color: var(--ok); }

.rd-ready .rd-bar > span { background: var(--ok); }

.rd-almost .rd-badge, .rd-almost .rd-badge .ic { color: var(--check); }

.rd-almost .rd-bar > span { background: var(--check); }

.rd-blocked .rd-badge, .rd-blocked .rd-badge .ic { color: var(--bad); }

.rd-blocked .rd-bar > span { background: var(--bad); }

.rd-none .rd-badge { color: var(--ink-soft); }

.uk-elig-signals .rd-items { padding-inline-start: 0; }

/* UK eligibility verdict badge (T1.3) — compact met/gap chip on the fit card. */
.uk-elig-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin: var(--s3) var(--s5) 0; font-size: var(--t-sm); }

.uk-elig-verdict .uev-badge { display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; }

.uk-elig-verdict .uev-gaps { color: var(--ink-soft); }

.uk-elig-verdict.elig-ready .uev-badge, .uk-elig-verdict.elig-ready .uev-badge .ic { color: var(--ok); }

.uk-elig-verdict.elig-almost .uev-badge, .uk-elig-verdict.elig-almost .uev-badge .ic { color: var(--check); }

.uk-elig-verdict.elig-blocked .uev-badge, .uk-elig-verdict.elig-blocked .uev-badge .ic { color: var(--bad); }


/* Score-seal gauge draw-on: the value bar grows to the score and the hollow
   indicator rides its tip, both on load. */
.seal-gfill { animation: gaugeFill .55s ease-out both; }

@keyframes gaugeFill { from { stroke-dasharray: 0 999; } }

.seal-gdot { animation: gaugeDot .55s ease-out both; }

@keyframes gaugeDot { from { transform: rotate(135deg); } }

@keyframes fadeRise { to { opacity: 1; transform: none; } }

.page-sub { margin: var(--s2) 0 0; font-size: var(--t-sm); }

.sort-seg .sort-opt.is-active { background: var(--accent); color: #fff; }

/* On phones the labels ("Procurement stage", "Sort") + the multi-word stage
   pills push a single group past the viewport. Drop the text labels — the pills
   are self-describing — so each group fits and the toolbar can't widen the page.
   (Same approach as the .stab control above.) */
@media (max-width: 560px) {
  .dash-toolbar .sort-label { display: none; }
  .dash-toolbar { gap: var(--s3); }
}

.toast .ic { color: var(--ok); display: inline-flex; }

.work-queue .fitcard-title { font-size: var(--t-lg); }

.work-queue .fitcard-summary { max-width: 60ch; }


/* ── Buyer directory: premium rows (monogram · named sector pills · spend
   coverage cue). Sector families colour the "what they buy" pills AND the
   monogram, so a buyer reads by shape + colour, not bare CPV codes. ── */
:root {
  --sec-works-ink: #B14A05; --sec-works-bg: #FCEFE4;
  --sec-digital-ink: #155E8A; --sec-digital-bg: #E7F0F6;
  --sec-health-ink: #0F7A63; --sec-health-bg: #E4F3EF;
  --sec-facil-ink: #6B4AA8; --sec-facil-bg: #F0EBF9;
  --sec-supply-ink: #8A6410; --sec-supply-bg: #F8F0DC;
  --sec-prof-ink: #455A64; --sec-prof-bg: #ECEFF1;
}

.status-dot.ok::before { background: var(--ok); }

form.inline { display: inline; }

@keyframes matchSpin { to { transform: rotate(360deg); } }

.cat-chip.is-active { background: var(--seal); border-color: var(--seal); color: #fff; }

/* Trial-countdown bar for signed-in trial users (every app page). */
.trial-bar { background: var(--accent-wash); border-bottom: 1px solid var(--line); }

.trial-bar.is-expired { background: #FDECEC; }

.trial-bar-inner { max-width: var(--maxw); margin-inline: auto; padding: 8px var(--s5);
  display: flex; align-items: center; justify-content: center; gap: var(--s3);
  flex-wrap: wrap; text-align: center; font-size: var(--t-sm); color: var(--ink); }

.trial-bar .lucide { color: var(--accent); flex: none; }

.trial-bar b { font-weight: 700; }

.trial-bar-cta { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
  font-weight: 700; color: var(--accent-ink); }

.trial-bar-cta:hover { text-decoration: underline; }

.trial-bar-x { margin-inline-start: var(--s2); flex: none; width: 26px; height: 26px;
  border-radius: 50%; border: 0; cursor: pointer; color: var(--accent-ink);
  background: rgba(177, 74, 5, .14); display: inline-flex; align-items: center; justify-content: center; }

.trial-bar-x:hover { background: rgba(177, 74, 5, .26); color: var(--accent-ink); }


/* ---- "What's new" panel ---- */
.whatsnew { padding: var(--s4) var(--s5) 0; }

.whatsnew-inner {
  max-width: var(--maxw); margin-inline: auto; position: relative;
  background: linear-gradient(180deg, var(--seal-wash), var(--surface));
  border: 1px solid color-mix(in srgb, var(--seal) 25%, var(--line));
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
  padding: var(--s4) var(--s5); animation: kbReveal .2s ease;
}

.wn-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }

.wn-badge {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  padding: 2px 10px; border-radius: 999px; font-size: var(--t-xs); font-weight: 700;
  background: var(--seal); color: #fff;
}

.wn-badge .lucide { color: #fff; }

.wn-title { font-family: var(--font-display); font-weight: 400; font-size: var(--t-md); color: var(--ink); }

.wn-x {
  margin-inline-start: auto; flex: none; width: 28px; height: 28px; border-radius: 50%;
  border: 0; cursor: pointer; color: var(--ink-soft); background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
}

.wn-x:hover { background: var(--paper); color: var(--ink); }

.wn-intro { margin: 0 0 var(--s3); font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.55; }

.wn-intro a { color: var(--accent-ink); font-weight: 700; }

.wn-items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }

.wn-items li { display: flex; align-items: flex-start; gap: var(--s2); font-size: var(--t-sm); color: var(--ink); line-height: 1.5; }

.wn-items li b { font-weight: 700; }

.wn-ic { flex: none; color: var(--seal); margin-top: 1px; }

.wn-foot { margin-top: var(--s3); }

.wn-ok {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 14px; border-radius: 999px; cursor: pointer;
  font-size: var(--t-sm); font-weight: 600; line-height: 1;
  color: var(--accent-ink); background: transparent;
  border: 1px solid color-mix(in srgb, var(--seal) 32%, var(--line));
  transition: background .15s ease, border-color .15s ease;
}

.wn-ok:hover { background: var(--seal-wash); border-color: color-mix(in srgb, var(--seal) 50%, var(--line)); }

.wn-ok .lucide { color: var(--seal); }

.promo-badge .lucide { color: var(--accent); }

.facet-block h2 .lucide { color: var(--seal); }

.step-pill.active { color: var(--seal); }

.step-pill.active::before { background: var(--seal); color: #fff; border-color: var(--seal); }

.wizard-step .field { margin-bottom: var(--s4); }

.chip-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }

.chip-row .chip { padding: 8px var(--s4); font-size: var(--t-sm); }

.preview-note .lucide { color: var(--ok); }

.qual-link .lucide { flex: none; color: var(--ink-soft); }

.qual-link:hover .lucide:last-child { color: var(--seal); }

.fw-fchip.is-active { background: color-mix(in srgb, var(--ink) 7%, var(--surface));
  border-color: var(--ink-soft); color: var(--ink); font-weight: 700; }

.fw-chip.is-active { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: var(--shadow); }

.fw-detail .btn-ghost { background: var(--surface); border: .5px solid var(--line); border-radius: var(--r-control);
             padding: 7px 12px; font-size: var(--t-xs); color: var(--ink); }

.fw-hm .lucide { color: var(--ink-soft); }

.fw-detail .btn-ghost { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

.fw-detail .btn-ghost:hover { border-color: var(--seal); color: var(--seal); text-decoration: none; }

.fw-detail .btn-ghost:hover .lucide { color: var(--seal); }

.fw-detail .btn-ghost.is-tracked { background: var(--ok-wash); border-color: var(--ok); color: var(--ok); }

.fw-detail .btn-ghost.is-tracked .lucide { color: var(--ok); }

/* Keep the action row uniform: <a> and form-wrapped <button> share one box. */
.fw-detail .btn-apply, .fw-detail .btn-ghost { font: inherit; font-size: var(--t-xs);
  line-height: 1.4; box-sizing: border-box; }

.fw-detail .fw-inline-form > .btn-ghost { width: 100%; }

.fw-card__h .lucide { color: var(--seal); flex: none; }

.fwd-reason.fwd-met .lucide { color: var(--ok); }

.fwd-reason.fwd-out .lucide { color: var(--bad); }

.fwd-buyer .lucide { color: var(--seal); }

.fwd-members .ch-iconly { margin-inline-start: auto; flex: none; }

.fwd-anytime .lucide { color: var(--ok); }


/* Narrow screens — hero + fit ring stack gracefully. */
@media (max-width: 560px) {
  .fw-hero { flex-direction: column-reverse; align-items: stretch; }
  .fw-hero__aside { align-self: flex-start; }
  .fw-toolbar { flex-direction: column; align-items: stretch; }
  .fw-val { display: none; }
}


/* The UK primary nav carries one extra destination (Frameworks), so it runs out
   of room ~1024px and an item would drop off the row. Collapse to icon-only
   there — every link stays on the bar and reachable, with its name as the
   title/tooltip. UK-only; IL's shorter nav is untouched. */
@media (max-width: 1100px) {
  .mkt-uk .nav > a:not(.btn-primary) .label { display: none; }
  .mkt-uk .nav > a:not(.btn-primary) .nav-icon { margin-inline-end: 0; }
}

.stacked .field { margin-bottom: var(--s4); }

.settings-subhead .lucide { color: var(--seal); flex: none; }

.settings-advanced > summary .chev { margin-inline-start: auto; color: var(--ink-soft); transition: transform .18s ease; }

.settings-advanced[open] > summary .chev { transform: rotate(180deg); }

.pf-ic .lucide { color: inherit; }

.pf-sum > .chev { flex: none; color: var(--ink-soft); transition: transform .18s ease; }

.pf-card[open] > .pf-sum > .chev { transform: rotate(180deg); }

.pf-subhead .muted { font-weight: 400; }

.money-field > .field-label { display: block; margin-bottom: 6px; }

.money-chip.is-on { background: var(--seal); color: #fff; border-color: var(--seal); }

.check { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }

.check input { width: auto; }

.settings-row .field { margin-bottom: 0; }

.settings-row .btn { margin-inline-start: auto; }
@media (max-width: 720px) {

  .settings-row .btn { margin-inline-start: 0; }
}

.filterbar .field { margin: 0; min-width: 0; gap: 3px; }

/* Compact controls + labels so the whole bar takes minimal vertical room. */
.filterbar .field > span, .filterbar .field-label { font-size: var(--t-xs); }

.filterbar .field input, .filterbar .field select,
.filterbar .cpv-toggle, .filterbar .range-row input { padding-block: 7px; }

.filter-actions .btn { width: 100%; justify-content: center; white-space: nowrap; }

.filter-clear-btn .lucide { width: 13px; height: 13px; }

.field-grid > .field, .field-grid > .multiselect { margin: 0; min-width: 0; }
@media (max-width: 680px) {

  .filter-actions .btn { flex: 1; }
}

.search-row .btn { padding: 11px var(--s4); flex: none; }

.filterbar .field > span { font-size: var(--t-xs); color: var(--ink-soft); }


/* CPV multiselect — a compact popover so a 1000+ long list never bloats the bar */
.ms-filter { position: relative; }

.cpv-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  /* Match the native <select> height in the bar. Selects size intrinsically, so
     pin the toggle to the same box height (border-box) rather than chasing
     line-height. */
  width: 100%; min-height: 42px; padding: 0 var(--s3); cursor: pointer; text-align: start;
  border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--surface); color: var(--ink); font-size: var(--t-sm);
}

.cpv-toggle:hover { border-color: var(--ink-soft); }

.cpv-toggle.is-active { border-color: var(--seal); color: var(--seal); font-weight: 600; }

.cpv-toggle .cpv-chevron { flex: none; color: var(--ink-soft); }

.cpv-toggle-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cpv-panel {
  position: absolute; z-index: 30; inset-inline-start: 0; top: calc(100% + 4px);
  width: min(360px, 86vw); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-control);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14); overflow: hidden;
}

.cpv-panel-head { display: flex; gap: var(--s2); padding: var(--s2); border-bottom: 1px solid var(--line); }

.cpv-search {
  flex: 1; min-width: 0; padding: 7px var(--s3); font-size: var(--t-sm);
  border: 1px solid var(--line); border-radius: var(--r-control); background: var(--paper);
}

.cpv-search:focus { outline: 2px solid var(--seal); outline-offset: 1px; border-color: var(--seal); }

.cpv-clear-sel { flex: none; padding: 0 var(--s2); border: 0; background: none; color: var(--accent); cursor: pointer; font-size: var(--t-sm); }

.cpv-clear-sel:hover { text-decoration: underline; }

.cpv-list { max-height: 280px; overflow-y: auto; padding: 4px; }

.cpv-opt {
  display: flex; align-items: baseline; gap: var(--s2);
  padding: 6px var(--s2); border-radius: 6px; cursor: pointer; font-size: var(--t-sm); line-height: 1.4;
}

.cpv-opt:hover { background: var(--paper); }

/* Reset the global input{width:100%;padding;border} so the checkbox renders at
   its native size instead of stretching full-width and crushing the labels. */
.cpv-opt input { flex: none; width: auto; align-self: center; padding: 0; margin: 0; border: 0; }

.cpv-opt-code { flex: none; color: var(--ink-soft); }

.cpv-opt-label { color: var(--ink); word-break: break-word; }

.cpv-empty { padding: var(--s3); margin: 0; color: var(--ink-soft); font-size: var(--t-sm); text-align: center; }


/* Tag picker — a combobox that searches a big list (full CPV / NUTS) and builds
   removable chips, plus quick-suggest chips. Used in onboarding + settings. */
.tagpicker { max-width: 520px; }

.tp-control { position: relative; display: flex; align-items: stretch; gap: 0; }

.tp-selected {
  flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 6px 8px; min-height: 42px;
  border: 1px solid var(--line); border-radius: var(--r-control) 0 0 var(--r-control); background: var(--paper);
}

[dir="rtl"] .tp-selected { border-radius: 0 var(--r-control) var(--r-control) 0; }

.tp-control:focus-within .tp-selected { border-color: var(--seal); }

.tp-chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  padding: 3px 4px 3px 10px; font-size: var(--t-xs); line-height: 1.3;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
}

[dir="rtl"] .tp-chip { padding: 3px 10px 3px 4px; }

.tp-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tp-remove {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%;
  background: var(--line); color: var(--ink); cursor: pointer; font-size: 11px; line-height: 1;
}

.tp-remove:hover { background: var(--accent); color: #fff; }

.tp-input {
  flex: 1; min-width: 120px; width: auto; padding: 4px 2px; margin: 0;
  border: 0; background: none; font-size: var(--t-sm); outline: none;
}

.tp-toggle {
  flex: none; width: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-inline-start: 0;
  border-radius: 0 var(--r-control) var(--r-control) 0; background: var(--surface); cursor: pointer; color: var(--ink-soft);
}

[dir="rtl"] .tp-toggle { border-radius: var(--r-control) 0 0 var(--r-control); }

.tp-toggle:hover { background: var(--paper); color: var(--ink); }

.tp-results {
  position: absolute; z-index: 60; inset-inline: 0; top: calc(100% + 4px);
  margin: 0; padding: 4px; list-style: none; max-height: 300px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-control);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
}

/* The active picker (and so its dropdown) must sit above the form fields below. */
.tagpicker:focus-within { position: relative; z-index: 5; }

.tp-result:hover, .tp-result.is-active { background: var(--paper); }

.tp-result.is-picked { opacity: 0.5; }

.tp-result.is-picked::after { content: "✓"; margin-inline-start: auto; color: var(--seal); }

.tp-result-code { flex: none; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.tp-result-label { color: var(--ink); word-break: break-word; }


/* ---- Tag picker inside the /tenders filter bar ---------------------------
   The picker was built for a full-width settings field. Dropped into a ~180px
   filter slot it broke in three ways on the live site: the control stood 50px
   tall next to 40px selects and shoved the row out of line, and the dropdown
   inherited the field's width, so "Agricultural, farming, fishing, forestry and
   related products" wrapped over six lines. Scoped to this modifier so the
   settings/onboarding pickers keep the layout they were designed for. */
.tagpicker-inline { max-width: none; margin-bottom: 0; }

/* Match the sibling <select> height exactly — this is what stops the push. */
.tagpicker-inline .tp-selected { min-height: 38px; padding: 4px 8px; }

.tagpicker-inline .tp-toggle { width: 34px; }

.tagpicker-inline .tp-input { min-width: 60px; font-size: var(--t-xs); }

/* Wide enough to read a CPV label on one or two lines, and free to overhang the
   narrow field rather than being trapped inside its width. */
.tagpicker-inline .tp-results {
  inset-inline: auto; inset-inline-start: 0;
  min-width: 380px; max-width: min(560px, calc(100vw - 32px));
}

.tagpicker-inline .tp-result { align-items: flex-start; }

.tagpicker-inline .tp-result-label { word-break: normal; overflow-wrap: anywhere; }

/* Above the controls that follow it in the bar, and above the results table. */
.tagpicker-inline:focus-within { z-index: 40; }
@media (max-width: 640px) {

  .tagpicker-inline .tp-results { min-width: 0; inset-inline: 0; }
}

.tp-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--s2); }

.tp-suggest-label { font-size: var(--t-xs); margin-inline-end: 2px; }

.tp-suggest-chip { padding: 5px 10px; font-size: var(--t-xs); cursor: pointer; }

.tp-suggest-chip.is-picked { opacity: 0.45; pointer-events: none; }

.rot-item.is-active .brick { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {

  .rot-item.is-active .brick { opacity: 1; }
}

/* Shrink the public hero demo card 10% (scoped here only — the dashboard's real
   fitcards are unaffected). zoom (not transform) so the card's layout box shrinks
   too, keeping the gap to the next section natural instead of leaving slack. */
.hero-demo .fitcard { box-shadow: 0 10px 30px rgb(28 43 51 / 0.08); zoom: .9; }

.price-badge .lucide { color: #fff; }

.price-list .lucide { color: var(--ok); }

.price-seats .lucide { color: var(--accent-ink); }


/* Below ~880px three steps can't sit side-by-side without an ugly 2+1 wrap,
   so stack them into a clean vertical flow with the connector pointing down. */
@media (max-width: 880px) {
  .strip-inner { flex-direction: column; align-items: center; gap: var(--s5); }
  .step { max-width: 360px; flex: none; }
  .step-arrow { transform: rotate(0deg); margin-top: 0; }
}


/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); color: var(--ink-soft); font-size: var(--t-xs); background: var(--surface); }

.footer-inner {
  max-width: var(--maxw); margin-inline: auto; padding: var(--s5);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3);
}


.footer-links { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2) var(--s4); }

.footer-rights { color: var(--ink-soft); font-size: var(--t-xs); }

.disclaimer { color: var(--ink-soft); font-size: var(--t-xs); border-top: 1px solid var(--line); padding-top: var(--s3); margin-top: var(--s5); text-align: center; }


/* Responsive: stack the browse table into cards on narrow screens */
@media (max-width: 600px) {
  .table-wrap { border: none; background: transparent; overflow: visible; }
  table.data thead { display: none; }
  table.data, table.data tbody, table.data tr, table.data td { display: block; width: 100%; }
  table.data tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); margin-bottom: var(--s3); padding: var(--s2) var(--s4); }
  table.data td { border: none; padding: 6px 0; display: flex; justify-content: space-between; gap: var(--s4); align-items: center; }
  table.data td[data-label]::before { content: attr(data-label); color: var(--ink-soft); font-size: var(--t-xs); font-weight: 700; flex: none; }
  table.data td .t-title { white-space: normal; max-width: none; text-align: start; }
  /* On the stacked (card) layout there's vertical room — let the full buyer name
     wrap instead of truncating. */
  table.data.tenders-table td.t-pub { white-space: normal; overflow: visible; text-overflow: clip; text-align: end; min-width: 0; }
  table.data td[data-label="כותרת"] { display: block; }
  table.data td[data-label=""]::before { display: none; }
  /* The buyers/suppliers directories (.bp-dir) carry a DESKTOP column grid:
     table-layout:fixed, a 720px readable minimum, and per-column percentages.
     None of that is overridden by the card re-flow above — width:100% loses to
     min-width, and `table.data td` (0,1,2) loses to `table.bp-dir td:nth-child(4)`
     (0,2,2). So on a phone every "card" stayed 720px wide, pushing the page
     sideways, and each cell kept its desktop percentage, clipping the text inside
     (a £5,038,500,000 cell rendered at 58px). Cancel the grid here: :nth-child(n)
     matches every cell at the SAME specificity as the :nth-child(4) rules and
     lands later, so it wins without !important. */
  table.data { min-width: 0; table-layout: auto; }
  table.bp-dir th:nth-child(n), table.bp-dir td:nth-child(n) { width: auto; }
  /* Buyer/supplier profile header. .bp-idline ("local authority · buying since
     2025 · mainly construction work, …") is nowrap + overflow:hidden, but its
     parent is min-width:auto, so the parent grew to the full unbreakable text
     (593px) and took the page with it — the ellipsis never got a chance. Let the
     line wrap on a phone: there's vertical room, and the categories become fully
     readable instead of truncated. */
  .bp-headmain { min-width: 0; }
}
@media (max-width: 720px) {

  .container { padding-inline: var(--s4); padding-block: var(--s5); }

  .topbar-inner { padding: var(--s3) var(--s4); }

  .nav a { padding: var(--s2); }

  .nav a .label { display: none; }

  .nav-icon { margin: 0; }

  /* The public "עוד" menu's 300px min-width overflows the viewport on phones
     (the text gets clipped off-screen). Anchor it to the sticky topbar and pin
     both inline edges so it spans the screen with a 10px margin instead. */
  .nav-dropdown { position: static; }

  .nav-dropdown-menu {
    top: calc(100% + 6px); inset-inline: 10px;
    min-width: 0; max-width: none; width: auto;
  }

  h1 { font-size: var(--t-lg); }

  .fitcard-head { flex-direction: row; padding: var(--s4); }
}

.skel {
  display: inline-block; height: 14px; border-radius: 6px; vertical-align: middle;
  background: linear-gradient(90deg, var(--paper) 25%, var(--line) 37%, var(--paper) 63%);
  background-size: 400% 100%;
  animation: skel-shimmer 1.3s ease-in-out infinite;
}

.skel-lg { width: 80%; }

.skel-md { width: 55%; }

.skel-sm { width: 40%; }

.skel-chip { width: 84px; height: 22px; border-radius: 999px; }

@keyframes skel-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {

  .skel { animation: none; }
}

.skel-card .skel { display: block; }


/* ══ Live demo ════════════════════════════════════════════════════════════ */

/* Live-demo launcher — a compact, single-row accent-edge banner under the hero
   text (right column): orange spine, one line + a small CTA. Clean and small;
   clicking pops open the centered demo. */
:root { --ease-pop: cubic-bezier(.34, 1.25, .5, 1); }

@keyframes demo-banner-glow {
  0%, 100% { box-shadow: var(--shadow), 0 0 13px 0 rgb(232 101 13 / 0.16); }
  50%      { box-shadow: var(--shadow), 0 0 22px 3px rgb(232 101 13 / 0.30); }
}

@keyframes demo-nudge { 0%, 100% { transform: rotate(90deg) translateY(0); } 50% { transform: rotate(90deg) translateY(3px); } }

.demo-nav a.active { background: var(--seal-wash); color: var(--seal); font-weight: 700; }

.demo-notice .lucide { flex: none; color: var(--accent); }

.demo-disclaimer .lucide { flex: none; margin-top: 2px; }
@media (prefers-reduced-motion: reduce) {

  .demo-launch, .demo-stage, .demo-stage-frame,
  body.demo-active > .topbar, body.demo-active > main, body.demo-active > .footer { transition: none; }
}


/* Phone: the demo top bar must fit the width so the exit (✕) stays on screen —
   drop the brand/profile/switch, tighten spacing, leaving nav + close. */
@media (max-width: 640px) {
  .demo-topbar { gap: var(--s2); padding: var(--s2) var(--s3); }
  .demo-brand, .demo-profile, .demo-switch { display: none; }
  .demo-shell { padding: var(--s4) var(--s3); }
}

.t-detail-inner {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--s4) var(--s6); align-items: start;
  padding: var(--s4) var(--s5) var(--s5);
}

.t-detail-main { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }

.t-detail-skel .skel { display: block; height: 16px; margin-bottom: 10px; }

.t-detail-err { padding: var(--s4) var(--s5); margin: 0; }

.t-detail-summary { font-size: var(--t-sm); color: var(--ink); line-height: 1.6; margin: 0; }

/* Clamped extraction prose + its toggle. Line-clamp rather than max-height so
   the cut lands on a line boundary at any font size. */
.t-clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden; }

.t-clamp.is-open { display: block; -webkit-line-clamp: unset; }

.t-prose-more { margin: 4px 0 0; padding: 0; border: 0; background: none;
  font: inherit; font-size: var(--t-xs); font-weight: 600; color: var(--brand);
  cursor: pointer; }

.t-prose-more:hover { text-decoration: underline; }

/* A summary's lot enumeration, lifted out of the paragraph. The framework
   scope section can afford a rule and a heading per lot; this card cannot —
   it is already dense by the time the summary renders. So: one tight row per
   lot, no box, no rule, and the tag carries the weight instead of a heading.
   Rows align on their first line so a wrapping title stays indented under
   itself rather than sliding back under the tag. */
.t-lots { list-style: none; margin: 6px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 3px; }

.t-lots li { display: flex; align-items: baseline; gap: 6px;
  font-size: var(--t-xs); line-height: 1.45; color: var(--ink); }

.t-lot-tag { flex: none; background: var(--seal-wash); color: var(--seal);
  border-radius: 4px; padding: 1px 6px; font-size: 10px; font-weight: 600;
  white-space: nowrap; letter-spacing: .01em; }

/* Prose that followed the list — a closing sentence, or the per-lot detail
   pass that ended the enumeration. Set back a touch so the list reads as a
   group rather than the tail running straight on from the last row. */
.t-lots-tail { margin-top: 6px; }


/* UK fit card reuses the table's detail grid, but tighter (narrower column) and
   with the card's own padding. Stacks on a narrow card so nothing crowds. */
.fitcard-grid { padding: var(--s3) var(--s5) var(--s4); gap: var(--s3) var(--s5); grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }

.fitcard .t-detail-side { border-inline-start: 1px solid var(--line); padding-inline-start: var(--s4); }

/* A third child of the two-column card grid: spans both, so it lands on
   its own full-width row under the columns rather than inside the left one. */
/* Same idea wherever the expanded detail is a two-column grid: /tenders
   (.t-detail-inner) and the /saved list card (.sc-detail-grid). */
.sc-detail-grid > .t-detail-fullrow,
.t-detail-inner > .t-detail-fullrow { grid-column: 1 / -1;
  margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }

.fitcard-grid > .fitcard-fullrow { grid-column: 1 / -1;
  margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }

.fitcard-portal { align-self: start; margin-top: var(--s1); }
@media (max-width: 560px) {
 .fitcard-grid { grid-template-columns: 1fr; }
 .fitcard .t-detail-side { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--line); padding-top: var(--s3); }
}

/* Readiness action-plan items (what to close / verify before bidding) */
.rd-items { list-style: none; margin: var(--s2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

.rd-items li { display: flex; align-items: flex-start; gap: 6px; font-size: var(--t-sm); color: var(--ink); line-height: 1.4; }

.rd-items .lucide { flex: none; margin-top: 2px; color: var(--check); }

.rd-items-close .lucide { color: var(--bad); }

/* Merged readiness list: per-item icon colour + collapse-to-4 with a fade cue. */
.rd-i-met .lucide { color: var(--ok); }

.rd-i-cert .lucide { color: var(--seal); }

.rd-i-gap .lucide { color: var(--bad); }

.rd-i-verify .lucide { color: var(--check); }

.rd-listwrap { position: relative; }

/* Collapsed: clamp to ~3.5 lines so the 4th line is only half shown and fades
   out, with the "Show all" toggle below. Height-based (not item-based), so it
   reads as "3½ lines" even when an item wraps. Row stride = line-box (1.4·t-sm) +
   the 4px inter-item gap. */
.rd-collapsible.collapsed { max-height: calc((1.4 * var(--t-sm) + 4px) * 3.5); overflow: hidden; }

.rd-fade { display: none; }

.rd-collapsible.collapsed ~ .rd-fade { display: block; position: absolute; inset-inline: 0; bottom: 0;
  height: calc(1.4 * var(--t-sm) + 12px); background: linear-gradient(to bottom, transparent, var(--paper));
  pointer-events: none; }

.rd-more { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; cursor: pointer;
  color: var(--seal); font-weight: 700; font-size: var(--t-xs); padding: 3px 0; }

.rd-more .chev { transition: transform .18s ease; }

.rd-more.open .chev { transform: rotate(180deg); }

/* (The tracked-tender readiness now uses the shared eligibility_panel inside
   .sc-block — see the T-SCORECARD block near the fitcard verdict styles.) */
.t-detail-conds h4 { font-size: var(--t-sm); display: flex; align-items: center; gap: 6px; margin: 0 0 var(--s2); color: var(--ink); }

.t-detail-conds h4 .lucide { color: var(--seal); }

.t-detail-conds ul { margin: 0; padding-inline-start: 20px; }

.t-detail-conds li { font-size: var(--t-sm); color: var(--ink-soft); margin: 3px 0; line-height: 1.45; }

.t-detail-conds li b { color: var(--ink); }


/* Facts: a tidy label/value list filling the side column. */
.t-detail-side { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }

.t-detail-facts { margin: 0; display: flex; flex-direction: column; gap: 7px; }

/* Each fact is a 2-column grid (label | value) so every value starts on the
   same axis and wrapping text stays in its own column — the flex/space-between
   version squeezed values into char-by-char wraps next to two-line labels. */
.t-detail-facts > div {
  display: grid; grid-template-columns: fit-content(46%) 1fr;
  align-items: start; column-gap: var(--s3);
  font-size: var(--t-sm); border-bottom: 1px dashed var(--line); padding-bottom: 6px;
}

.t-detail-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }

.t-detail-facts dt { color: var(--ink-soft); display: inline-flex; align-items: flex-start; gap: 5px; }

.t-detail-facts dt .lucide { color: var(--ink-soft); }

.t-detail-facts dt svg { flex-shrink: 0; margin-top: 3px; }
  /* first-line align beside wrapped labels */
.t-detail-facts dd { margin: 0; color: var(--ink); font-weight: 700; text-align: end;
  min-width: 0; overflow-wrap: anywhere; }

/* Sentence-length values (e.g. a free-text contract period) read badly
   right-aligned in a narrow column — give them the full row instead. */
.t-detail-facts dd.t-fact-long { grid-column: 1 / -1; text-align: start;
  font-weight: 600; margin-top: 2px; }

.t-detail-docs { font-size: var(--t-sm); color: var(--ink-soft); position: relative; }

.t-docs-label { display: inline-flex; align-items: center; gap: 4px; }

.t-docs-list { margin-top: 4px; max-height: 128px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }

.t-doc-link { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--seal); line-height: 1.6; min-width: 0; flex-shrink: 0; }

.t-doc-link:hover { text-decoration: underline; }

/* "more files below" affordance: a soft fade + bobbing chevron pinned to the
   bottom of the scroll area, shown only when the list overflows and hidden
   once the user has scrolled to the end (classes toggled in base.html). */
.t-docs-more {
  position: absolute; inset-inline: 0; bottom: 0; height: 26px;
  display: none; align-items: flex-end; justify-content: center;
  background: linear-gradient(to top, var(--paper) 42%, transparent);
  color: var(--accent); pointer-events: none;
}

.t-detail-docs.has-scroll .t-docs-more { display: flex; }

.t-detail-docs.has-scroll.is-bottom .t-docs-more { display: none; }

.t-docs-more-ic { display: inline-flex; animation: docs-bob 1.5s ease-in-out infinite; }

@keyframes docs-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) {
 .t-docs-more-ic { animation: none; }
}

.t-detail-pending { font-size: var(--t-sm); display: inline-flex; align-items: center; gap: 6px; }


/* ---- CPV codes (main + additional, additional truncated behind <details>) ---- */
.t-detail-cpv { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: var(--s2) 0; font-size: var(--t-sm); }

.t-cpv-label { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-soft); }

.cpv-chip {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 999px;
  background: var(--paper); color: var(--ink-soft);
  font-size: var(--t-xs); line-height: 1.5;
}

.cpv-chip.cpv-main { background: var(--seal-wash); color: var(--seal); font-weight: 600; }

.cpv-more { display: inline; }

.cpv-more > summary {
  display: inline-flex; align-items: center; cursor: pointer; list-style: none;
  padding: 3px 9px; border-radius: 999px; background: var(--paper);
  color: var(--accent); font-size: var(--t-xs); font-weight: 600;
}

.cpv-more > summary::-webkit-details-marker { display: none; }

.cpv-more > summary:hover { text-decoration: underline; }

.cpv-more[open] > summary { color: var(--ink-soft); }

.cpv-more[open] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }


/* Key-points / eligibility sections — same visual rhythm as t-detail-conds. */
.t-detail-kpoints h4 { font-size: var(--t-sm); display: flex; align-items: center; gap: 6px; margin: 0 0 var(--s2); color: var(--ink); }

.t-detail-kpoints h4 .lucide { color: var(--seal); }

.t-detail-kpoints ul { margin: 0; padding-inline-start: 20px; }

.t-detail-kpoints li { font-size: var(--t-sm); color: var(--ink-soft); margin: 3px 0; line-height: 1.45; }


/* Confidence row: stacks the label, chip and its plain-language explanation
   as a full-width block instead of the usual label/value flex split. */
.t-detail-facts > div.t-fact-block { flex-direction: column; align-items: stretch; gap: 5px; }

.t-conf-dd { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

.t-conf-explain { font-size: var(--t-xs); color: var(--ink-soft); font-weight: 400; line-height: 1.5; }

/* Confidence on the fit card: chip sits on the row with the label (normal fact
   row), the explanation runs full-width underneath. */
/* Confidence chip row + its explanation form ONE block: no dashed separator
   between them (the separator above the chip already opens the section). */
.t-detail-facts > .t-conf-row { border-bottom: 0; padding-bottom: 4px; }

/* display:block overrides the inherited label|value grid (which squeezed the
   explanation into the ~46% first column) so the sentence spans the full width
   of wherever it sits — all-tenders detail, matched cards, and the board. */
.t-detail-facts > .t-conf-note { display: block; font-size: var(--t-xs); color: var(--ink-soft); line-height: 1.5; border-bottom: 0; padding: 0 0 2px; }


/* Head-start provenance: a now-live tender that grew out of a planning notice
   we'd been listing. Full-width, softly accented row so the link between the
   pipeline entry and the opportunity it became reads as one deliberate story
   (radar → "opened for bids", with "spotted in planning {date}" alongside),
   not just another cramped date field. */
.t-detail-facts > .fact-golive {
  grid-column: 1 / -1; border: 1px solid var(--seal); background: var(--seal-wash);
  border-radius: var(--r-card, 8px); padding: 7px 10px;
}

.t-detail-facts > .fact-golive dt { color: var(--accent-ink); font-weight: 700; }

.t-detail-facts > .fact-golive dt svg { color: var(--seal); }

.fact-golive-since { font-weight: 400; font-size: var(--t-xs); color: var(--ink-soft); }


/* Confidence badge in the side-facts panel. */
.t-conf-chip { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 10px; padding: 1px 8px; }
@media (max-width: 720px) {

  .t-detail-inner { grid-template-columns: 1fr; }
}

.cal-ms-submission.u-today, .cal-ms-submission.u-soon { background: var(--accent); color: #fff; }

.cal-ms-submission.u-today .cal-ev-who, .cal-ms-submission.u-soon .cal-ev-who { background: rgba(255,255,255,.25); border-color: transparent; color: #fff; }

.cal-rem .lucide { flex: none; }

.cal-sub-apps .lucide { color: var(--ok); }

.cal-rotate .btn { padding: 6px 12px; font-size: var(--t-xs); }


/* Card flashed when arriving from the calendar (?focus=<id>). */
.saved-card.is-focused, .kb-card.is-focused, .award-form.is-focused {
  outline: 2px solid var(--seal); outline-offset: 2px; border-radius: var(--r-card);
  animation: focusFlash 2.4s ease;
}

@keyframes focusFlash {
  0%, 12% { box-shadow: 0 0 0 5px var(--seal-wash); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
 .saved-card.is-focused, .kb-card.is-focused, .award-form.is-focused { animation: none; }
}


/* ---------- Notification center — left-edge expander ---------- */
/* A slim tab pinned to the left edge (the "hint"); clicking slides out a drawer
   with the deadline reminders. Kept out of the crowded top nav. */
.notif-dock { position: fixed; left: 0; top: 96px; z-index: 60; display: flex; align-items: flex-start; }

.notif-tab { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; background: var(--accent); color: #fff; border: 0; cursor: pointer; padding: 9px 7px; border-radius: 0 12px 12px 0; box-shadow: 2px 2px 8px rgb(28 43 51 / 0.18); }

.notif-tab:hover { filter: brightness(1.05); }

.notif-tab .lucide { color: #fff; }

.notif-badge { min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #fff; color: var(--accent); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

.notif-drawer { margin-inline-start: 6px; width: 340px; max-width: calc(100vw - 64px); max-height: 76vh; display: flex; flex-direction: column; background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }

/* LTR markets (UK): dock the alerts tab on the right edge; the drawer opens
   inward to the left. RTL (Hebrew) keeps the left-edge default above. */
html[dir="ltr"] .notif-dock { left: auto; right: 0; flex-direction: row-reverse; }

html[dir="ltr"] .notif-tab { border-radius: 12px 0 0 12px; box-shadow: -2px 2px 8px rgb(28 43 51 / 0.18); }

html[dir="ltr"] .notif-drawer { margin-inline-start: 0; margin-inline-end: 6px; }

.notif-head { display: flex; align-items: center; gap: 6px; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); font-weight: 700; color: var(--ink); font-size: var(--t-sm); }

.notif-close { margin-inline-start: auto; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }

.notif-close:hover { background: var(--paper); color: var(--ink); }

.notif-head-title { display: inline-flex; align-items: center; gap: 6px; flex: none; }

.notif-filter { display: inline-flex; }

.notif-filter .nf-btn { padding: 3px 9px; font-size: var(--t-xs); font-weight: 700; }

.notif-list { overflow-y: auto; }

.notif-list.mine-only .notif-item[data-mine="0"] { display: none; }

.notif-empty { padding: var(--s5) var(--s4); text-align: center; color: var(--ink-soft); font-size: var(--t-sm); }

/* Alert rows read subject-first (the tender/buyer name), with a compact kind +
   time line beneath — the "what happened" is a short label, never a wall of text
   that buries which item the alert is about. Every type shares this anatomy. */
.notif-item { display: flex; align-items: flex-start; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }

.notif-item:last-child { border-bottom: 0; }

.notif-link { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: var(--s2); color: var(--ink); }

.notif-link:hover { text-decoration: none; }

.notif-link:hover .notif-subject { text-decoration: underline; }

.notif-ic { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-wash); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }

.notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

/* Subject = the tender / buyer / framework name. Wraps up to two lines so it's
   never truncated to nothing; this is the row's headline. */
.notif-subject { font-size: var(--t-sm); font-weight: 600; color: var(--ink); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere; }

.notif-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: var(--t-xs); }

.notif-kind { font-weight: 600; color: var(--ink-soft); }

.notif-ent { color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; padding: 0 7px; max-width: 150px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }

.notif-dot { color: var(--line-strong, var(--ink-soft)); }

.notif-when { color: var(--ink-soft); white-space: nowrap; }

.notif-snippet { font-size: var(--t-xs); color: var(--ink-soft); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* Per-type accents on the icon + kind label (semantic, separate from the accent). */
.nk-go { color: var(--ok, var(--accent-ink)); }

.notif-go .notif-ic { background: color-mix(in srgb, var(--ok, var(--accent)) 15%, transparent); color: var(--ok, var(--accent-ink)); }

.notif-mention .notif-ic { background: var(--seal-wash); color: var(--seal); }

.nk-mention { color: var(--seal); font-weight: 500; }

.notif-item.u-today .notif-kind, .notif-item.u-soon .notif-kind, .nk-deadline { color: var(--accent); }

.notif-x { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }

.notif-x:hover { background: var(--paper); color: var(--ink); }

.notif-foot { display: flex; align-items: center; justify-content: center; gap: 4px; padding: var(--s3); color: var(--accent-ink); font-weight: 700; font-size: var(--t-sm); border-top: 1px solid var(--line); }

.notif-foot:hover { background: var(--paper); text-decoration: none; }

.settings-guide-cta .lucide { transition: transform .15s ease; }

.settings-guide-link:hover .settings-guide-cta .lucide { transform: translate(-2px, -2px); }

.adv-filters.is-open .adv-chev { transform: rotate(0deg); }

.adv-filters.is-open .adv-panel { grid-template-rows: 1fr; }

/* While a multiselect dropdown is open inside the (fully-expanded) advanced
   panel, let it overflow so the dropdown isn't clipped. Toggled by the
   multiselect JS; more specific than the clip rule above so order is irrelevant. */
.adv-panel > .adv-grid.ms-overflow { overflow: visible; }

.adv-grid .field { margin: 0; min-width: 0; }

.adv-grid .chip-row { margin-bottom: 0; margin-top: 6px; }


/* Filter sizing: keep the Procurement stage select to a normal dropdown width
   (don't let it stretch the whole wrapped row), and stop the advanced
   Confidence / Contract-value controls from over-widening for their content. */
/* Advanced fields fill their grid cell so every column is the same width. */
.adv-grid > label.field > select, .adv-grid .range-row { max-width: none; }

.blg-chip.is-on { background: var(--seal); border-color: var(--seal); color: #fff; }

.blg-chip.is-on { background: var(--blg-h, var(--seal)); border-color: var(--blg-h, var(--seal)); }

/* One column on a phone means twelve full-width cards stacked — a very long
   thumb. Below 560px each card turns on its side: a square crop of the same
   artwork beside the text, which roughly halves the height of the list without
   dropping anything from it. */
@media (max-width: 560px) {
  .blg-grid { grid-template-columns: 1fr; gap: var(--s4); }
  .blg-card-body { padding: var(--s4); gap: 8px; min-width: 0; }
  .blg-card-title { font-size: var(--t-sm); -webkit-line-clamp: 3; }
}

.lp h1,.lp h2,.lp h3,.lp .lp-eyebrow,.lp .lp-kicker,.lp-announce {
  font-family:"Sora", system-ui, sans-serif; }

.lp-shell { max-width:1140px; margin:0 auto; padding:0 24px; }


/* Announce bar */
.lp-announce { background:linear-gradient(90deg,#16557A,#1C6E96); color:#fff; }

.lp-announce-inner { max-width:1140px; margin:0 auto; padding:9px 24px; display:flex;
  align-items:center; gap:14px; justify-content:center; flex-wrap:wrap; font-size:14px; }

.lp-announce-sub { opacity:.9; }

.lp-announce-cta { color:#fff; font-weight:700; display:inline-flex; align-items:center; gap:4px; }

.lp-announce-cta:hover { text-decoration:underline; }
@media (max-width:680px) {
 .lp-announce-sub{display:none;}
}


/* Type */
.lp-eyebrow,.lp-kicker { display:inline-flex; align-items:center; gap:7px; font-size:13px;
  font-weight:600; color:var(--lp-accent); background:var(--accent-wash); padding:6px 12px;
  border-radius:999px; margin-bottom:18px; }

.lp-kicker { color:var(--lp-seal); background:var(--seal-wash); }

.lp-section { padding:84px 0; }

.lp-head { text-align:center; max-width:720px; margin:0 auto 52px; }

.lp-head-left { text-align:left; }

/* Hero CTA pair, one notch (~10%) smaller than the stock btn-lg. */
.lp-hero .lp-cta-row .btn-lg { padding: 13px 22px; font-size: 16px; }

.lp-window-body .fitcard { margin:0; }

@keyframes lp-bob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
 .lp-seal-mini.mid{background:var(--check);}

.lp-pill.ok{background:var(--ok-wash); color:var(--ok);}

.lp-elig-group.ok { border-color:var(--ok); background:var(--ok-wash); }

.lp-elig-group.ok .lp-elig-label{color:var(--ok);}
 .lp-kcard.ok{border-left-color:var(--ok);}

.lp-price-wrap { max-width:760px; margin:0 auto; }

.lp-price-card { position:relative; background:#fff; border-radius:22px; padding:38px;
  border:1px solid var(--lp-line); box-shadow:0 40px 80px -30px rgba(28,43,51,.3); }

.lp-price-card::before { content:""; position:absolute; inset:-1px; border-radius:22px; padding:1.5px;
  background:linear-gradient(135deg,var(--lp-accent),var(--lp-accent2),var(--lp-seal));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask-composite:exclude; pointer-events:none; }

.lp-price-ribbon { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--lp-accent);
  color:#fff; font-weight:700; font-size:13px; padding:6px 16px; border-radius:999px; display:inline-flex;
  align-items:center; gap:6px; box-shadow:0 8px 18px -6px rgba(232,101,13,.6); white-space:nowrap; }

/* Billing-period row. The control itself is the existing .plan-seg/.seg-btn
   segmented picker — only the row around it and the saving badge are new. */
.lp-price-seg { display:flex; align-items:center; justify-content:center; gap:10px;
  flex-wrap:wrap; margin-top:14px; }

.lp-price-save { font-size:var(--t-xs); font-weight:700; color:var(--accent-ink);
  background:var(--accent-wash); border-radius:999px; padding:3px 10px; white-space:nowrap; }

/* The badge shows only on Annual. In the flow it re-centred the row, so picking
   Annual visibly shoved the segmented control left. Reserving its space isn't
   available either — line 8 sets [hidden]{display:none!important} on purpose —
   so it is positioned against the control and out of the flow entirely. The
   control cannot move, whatever the badge does. */
.lp-price-segwrap { position:relative; display:inline-flex; align-items:center; }

.lp-price-segwrap .lp-price-save { position:absolute; inset-inline-start:calc(100% + 10px);
  top:50%; transform:translateY(-50%); }

/* On a phone there is no room to the right — let it drop back into the flow
   under the control, where a shift costs nothing because it wraps anyway. */
@media (max-width: 560px) {
  .lp-price-segwrap { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
  .lp-price-segwrap .lp-price-save { position:static; transform:none; }
}

/* Sits under the annual figure, in the accent so it reads as the saving
   rather than another price. */
.lp-price-saved { display:block; margin-top:4px; font-size:var(--t-sm);
  font-weight:700; color:var(--accent-ink); letter-spacing:0; }

.lp-price-top { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-top:8px; flex-wrap:wrap; }

.lp-price-name { font-family:"Sora",sans-serif; font-weight:600; color:var(--lp-soft); font-size:15px;
  text-transform:uppercase; letter-spacing:.05em; }

.lp-price-amount { font-family:"Sora",sans-serif; font-weight:800; font-size:54px; color:var(--lp-ink);
  line-height:1; letter-spacing:-.03em; }

.lp-price-period { font-size:16px; font-weight:500; color:var(--lp-soft); letter-spacing:0; }

.lp-price-period small { font-size:13px; }

.lp-price-seats { display:inline-flex; align-items:center; gap:7px; background:var(--seal-wash);
  color:var(--lp-seal); font-size:14px; padding:8px 14px; border-radius:999px; }

.lp-price-note { color:var(--lp-soft); font-size:14px; margin:14px 0 24px; }

.lp-price-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; padding:24px 0;
  border-top:1px solid var(--lp-line); border-bottom:1px solid var(--lp-line); margin-bottom:26px; }

.lp-price-gh { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--lp-accent); display:block; margin-bottom:12px; }

.lp-price-list { list-style:none; padding:0; margin:0; display:grid; gap:10px; }

.lp-price-list li { display:flex; align-items:flex-start; gap:8px; font-size:14px; color:var(--lp-ink); line-height:1.4; }

.lp-price-list svg { color:var(--ok); flex:none; margin-top:2px; }

.lp-price-reassure { display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:center; margin-top:18px;
  font-size:13px; color:var(--lp-soft); }

.lp-price-reassure span { display:inline-flex; align-items:center; gap:6px; }

.lp-price-reassure svg { color:var(--lp-seal); }


/* FAQ */
.lp-faq-inner { display:grid; grid-template-columns:300px 1fr; gap:48px; align-items:start; }

.lp-faq-list { display:grid; gap:12px; }

.lp-q { background:#fff; border:1px solid var(--lp-line); border-radius:12px; padding:0 18px; }

.lp-q summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  gap:12px; padding:18px 0; font-weight:600; color:var(--lp-ink); font-size:16px; }

.lp-q summary::-webkit-details-marker { display:none; }

.lp-q-ic { color:var(--lp-soft); transition:transform .2s; flex:none; }

.lp-q[open] .lp-q-ic { transform:rotate(180deg); }

.lp-q p { color:var(--lp-soft); margin:0; padding:0 0 18px; font-size:15px; line-height:1.6; max-width:640px; }
@media (max-width:820px) {
 .lp-faq-inner{grid-template-columns:1fr; gap:24px;}
 .lp-head-left{text-align:center;}
}


/* Responsive */
@media (max-width:920px){
  .lp-hero-inner,.lp-feature-grid{grid-template-columns:1fr; gap:40px;}
  .lp-hero-visual{max-width:520px; margin:0 auto;}
  .lp-window{transform:none;}
  .lp-float-score{left:0;} .lp-float-digest{right:0;}
  .lp-bento,.lp-price-cols{grid-template-columns:1fr 1fr;}
}
@media (max-width:620px) {

  .lp-section{padding:60px 0;}

  .lp-stats-grid,.lp-bento,.lp-price-cols,.lp-compare,.lp-mock-board{grid-template-columns:1fr;}

  .lp-price-card{padding:26px 20px;}
}


/* ════════════════════════════════════════════════════════════════════════
   RTL + Hebrew adaptation of the `.lp` landing (IL / מכרזיה reuses the same
   marketing layout). Every rule is scoped to `[dir="rtl"]`, so the UK (dir=ltr)
   page is byte-identical — this block only fixes physical-direction props and
   swaps the display font (Sora isn't loaded on IL) for the Hebrew display face.
   ════════════════════════════════════════════════════════════════════════ */
[dir="rtl"] .lp h1, [dir="rtl"] .lp h2, [dir="rtl"] .lp h3,
[dir="rtl"] .lp-announce { font-family: var(--font-display); }

[dir="rtl"] .lp-kcard.ok { border-right-color:var(--ok); }

/* FAQ heading aligns to the start (right) in RTL. */
[dir="rtl"] .lp-head-left { text-align:right; }


/* ── Awards & Buyers intelligence (UK, Preview) ────────────────────────────── */
/* "Bidvane Edge" — the capability brand for the market-intelligence layer.
   Lockup heads /market; the badge marks every Edge-powered surface. */
.edge-lockup { display: inline-flex; align-items: center; gap: 7px; }

.edge-lockup .edge-star { color: var(--accent); }

.edge-word { color: var(--accent); }

.pv-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px;
  border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; background: var(--seal-wash); color: var(--seal);
  border: 1px solid color-mix(in srgb, var(--seal) 25%, transparent); }

.bp-coverage { font-size: var(--t-sm); margin: 0 0 var(--s4); }

.bp-coverage svg { vertical-align: -2px; margin-right: 4px; }
  /* v3 §4: never wraps */
/* …except on a phone, where "never wraps" means the line the buyer is judged by
   ("local authority · buying since 2025 · mainly construction work, …") is cut
   off mid-word and its nowrap width dragged the whole page ~200px sideways.
   Deliberate, scoped deviation from v3 §4: desktop keeps the single line.
   Must live AFTER the rule above — same specificity, so source order decides. */
@media (max-width: 600px) {
  .bp-idline { white-space: normal; overflow: visible; text-overflow: clip; }
}
  /* match the type chip (nhs → Nhs) */
.bp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: var(--s2); margin: 0 0 var(--s4); }

.bp-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--s2) var(--s3); display: flex; flex-direction: column; gap: 2px;
  text-decoration: none; }

.bp-tile { min-width: 0; }
  /* let narrow grid tracks shrink instead of overflowing */
.bp-tile b { font-size: 1.35rem; line-height: 1.1; color: var(--ink);
  min-width: 0; max-width: 100%; }

.bp-tile span { color: var(--ink-soft); font-size: var(--t-xs); }

a.bp-tile:hover { border-color: var(--accent); transform: translateY(-1px);
  transition: all .12s ease; }

.bp-tabs .bp-tile { position: relative; cursor: pointer;
  min-width: 0; min-height: 78px; border: 1px solid var(--line);
  border-radius: var(--r-card); background: var(--surface); box-shadow: none;
  padding: var(--s4); display: flex; flex-direction: column; gap: 4px; justify-content: center;
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease; }

.bp-tabs a.bp-tile:hover { border-color: var(--seal); background: var(--seal-wash);
  transform: translateY(-2px); box-shadow: 0 4px 12px rgb(28 43 51 / .09); }

.bp-tabs a.bp-tile:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }

.bp-tabs a.bp-tile:hover .bp-tile-go { opacity: .9; color: var(--seal); }

.bp-tabs .bp-tile.is-active { border-color: var(--seal); background: var(--seal-wash);
  box-shadow: inset 0 -3px 0 var(--seal); }

.bp-tabs .bp-tile.is-active .bp-tile-hd, .bp-tabs .bp-tile.is-active .bp-tile-hd svg,
.bp-tabs .bp-tile.is-active .bp-tile-val b { color: var(--seal); }

.bp-tabs .bp-tile.is-active .bp-tile-go { opacity: 1; color: var(--seal); transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
 .bp-tabs .bp-tile { transition: none; }
}

/* "Fits your profile" — a slick, quiet match cue: a soft accent-green pill,
   label only (no icon). Single source is the fit_badge macro. */
.bp-fit { display: inline-flex; align-items: center; white-space: nowrap;
  padding: 2px 9px; border-radius: 999px; border: 0;
  background: var(--check-wash); color: var(--check);
  font-size: 11px; font-weight: 700; line-height: 1.55; letter-spacing: .01em; }

#bp-radar, #bp-expiring, #bp-frameworks, #bp-needs, #bp-suppliers, #bp-awards,
#sp-wins
  { scroll-margin-top: 72px; }

.bp-trackform .btn.is-on { background: var(--accent-wash);
  border-color: var(--accent); color: var(--accent-ink); }

.aw-chip.is-active { background: var(--accent-wash); border-color: var(--accent);
  color: var(--accent-ink); font-weight: 600; }

.aw-toggle.is-on { background: var(--accent-wash); border-color: var(--accent);
  color: var(--accent-ink); font-weight: 600; }

.aw-toggle.is-on .aw-toggle-tick { opacity: 1; }

.awcat.is-open .awcat-toggle { border-color: var(--accent); }

.awcat-toggle.is-active { border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }

.awcat.is-open .awcat-chevron { transform: rotate(180deg); }

.awcat-opt.is-active { background: var(--accent-wash); color: var(--accent-ink); font-weight: 600; }

.awcat-opt.is-active .awcat-opt-count { color: var(--accent-ink); }

.nb-track.is-on { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-ink); }

.nb-collapse:not(.is-open) { max-height: 300px; overflow: hidden; }

.nb-collapse:not(.is-open)::after { content: ""; position: absolute; inset-inline: 0;
  bottom: 0; height: 76px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--surface)); }

.nb-collapse.is-open ~ .nb-expand .nb-chev { transform: rotate(180deg); }

/* Aligned award table: header + expandable rows share one grid template. The last two
   tracks are in rem (not em) so they resolve to the same width under the header's small
   caps and the rows' larger body text — otherwise the columns drift out of alignment. */
.aw-grid { --aw-cols: minmax(0, 1.7fr) minmax(0, 1.1fr) minmax(0, 0.9fr) 8rem 5.25rem; }

.aw-head { display: grid; grid-template-columns: var(--aw-cols); gap: var(--s3);
  padding: 0 0 6px; font-size: var(--t-xs); font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid var(--line); }

.aw-head .aw-r { text-align: end; }

/* Loading skeleton for the awards/wins table. Deliberately the same grid, the
   same padding and the same border as a real row, so when the rows arrive they
   land exactly where the placeholder stood instead of shoving the page down. */
.aw-skelrow { display: grid; grid-template-columns: var(--aw-cols); gap: var(--s3);
  align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }

/* The pill is what sets a real row's height, so the placeholder's chip has to be
   the same size — with a 20px bar the skeleton came out 7px short per row, which
   is 140px of jump over a full page. */
.aw-skelrow .skel { display: block; height: 20px; }

.aw-skelrow .skel-chip { height: 25px; }

.aw-skelrow .aw-r { justify-self: end; width: 100%; }

.aw-skelrow .aw-r .skel { margin-inline-start: auto; }

/* Reserves the pager's row so it does not appear beneath the table as a jump. */
.aw-skelpager { height: 52px; }
@media (max-width: 640px) {

  .aw-grid { --aw-cols: minmax(0, 1.6fr) minmax(0, 1fr) 7rem 5rem; }

  .aw-head span:nth-child(3), details.aw .aw-c-cat { display: none; }
}

/* Mobile: STACK the row instead of squeezing 4 columns into 375px. Measured at
   375px the title cell got just 74px (~8 characters), and once a route chip sat
   beside it the name collapsed to 0 — the award was unreadable. So the name
   takes its own full-width line and the secondary facts (supplier · value ·
   date) share the line beneath, which is also the natural reading order. */
@media (max-width: 560px) {
  .aw-head { display: none; }              /* column headers mean nothing stacked */
  details.aw > .aw-sum {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "title title title" "sup val date";
    gap: 3px var(--s3); padding: 10px 0; align-items: baseline;
  }
  details.aw > .aw-sum .aw-c-title { grid-area: title; }
  details.aw > .aw-sum .aw-c-sup   { grid-area: sup; }
  details.aw > .aw-sum .aw-c-val   { grid-area: val; }
  details.aw > .aw-sum .aw-c-date  { grid-area: date; }
  /* The name line: caret + name take the space, the chip keeps its own. */
  .aw-c-title .aw-title { flex: 1; }
  .aw-c-sup, .aw-c-date { font-size: var(--t-xs); color: var(--ink-soft); }
  /* Shorter chip copy on a narrow screen — the tooltip still carries the full
     explanation, and the title needs the pixels more than the label does. */
  .aw-tag-co { font-size: 10px; padding: 1px 6px; }
  .aw-tag-da { font-size: 10px; padding: 1px 6px; }
}

.ch-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px;
  color: var(--ink-soft); border: 1px dashed var(--line); border-radius: 999px;
  padding: 1px 8px; white-space: nowrap; }

.ch-badge.ch-ok { color: var(--ok); border-style: solid;
  border-color: color-mix(in srgb, var(--ok) 35%, transparent);
  background: color-mix(in srgb, var(--ok) 8%, transparent); }

/* Icon-only verified tick — for dense lists (framework members) where a repeated
   "Companies House" text badge is just noise. */
.ch-badge.ch-iconly { border: 0; background: none; padding: 0; }

/* month chart */
.bp-chart { display: flex; align-items: flex-end; gap: 6px; height: 130px;
  padding: var(--s2) 0 0; border-bottom: 1px solid var(--line-strong, var(--line)); }

.bp-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; height: 100%; min-width: 0; }

.bp-bar { width: 100%; max-width: 34px; background: var(--seal); opacity: .8;
  border-radius: 4px 4px 0 0; min-height: 2px; transition: opacity .15s; }

.bp-col:hover .bp-bar { opacity: 1; }

.bp-mlabel { font-size: 10px; color: var(--ink-soft); line-height: 1.15;
  text-align: center; margin-top: 4px; }

/* cpv bars */
.bp-cpv { display: flex; flex-direction: column; gap: 8px; }

.bp-cpvrow { display: grid; grid-template-columns: minmax(180px, 1.2fr) 2fr auto auto;
  align-items: center; gap: var(--s3); }

.bp-cpvlabel { font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }

.bp-cpvtrack { height: 10px; background: var(--seal-wash); border-radius: 999px;
  overflow: hidden; }

.bp-cpvfill { display: block; height: 100%; background: var(--seal); opacity: .85;
  border-radius: 999px; }

.bp-cpvnum { font-weight: 700; }

.bp-cpvspend { font-size: var(--t-sm); min-width: 90px; text-align: end; }

.bp-foot .bp-coverage { margin: 0 0 var(--s2); }

/* locked stub (dark until the entitlement flips) */
.bp-locked .bp-tile-locked { min-height: 72px; justify-content: center; filter: blur(1px); }

.bp-locked-note { display: flex; align-items: center; gap: var(--s3);
  justify-content: center; padding: var(--s5); color: var(--ink-soft); }

/* compact buyer-intel line on match cards */
/* compact buyer-intel strip — original card design, now inside the detail */
.fitcard-buyerintel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 8px var(--s5) 0; padding: 8px 12px; border-radius: 10px;
  background: var(--seal-wash); font-size: var(--t-sm); color: var(--ink-soft); }

.fitcard-buyerintel b { color: var(--ink); }

/* Flex items default to min-width:auto, so a long incumbent name ("Delivery of
   Conservation Measures … Owenduff/Nephin Complex" buyers have them) refuses to
   shrink and overflows the strip instead of wrapping — visible as text sitting
   on top of the awards line in the narrow detail sidebar. */
.fitcard-buyerintel > span { min-width: 0; overflow-wrap: anywhere; }

.fitcard-buyerintel .dot { opacity: .5; }

/* in the facts sidebar the card-width side margins don't apply */
.t-detail-side .fitcard-buyerintel { margin: 12px 0 0; }

.dir-filters .field { margin: 0; min-width: 0; gap: 3px; }

.dir-filters .field > span { display: block; margin-bottom: 2px;
  font-size: var(--t-xs); color: var(--ink-soft); }

.dir-filters .field input, .dir-filters .field select { width: 100%; display: block;
  height: 34px; font-size: var(--t-sm); padding: 4px 8px; }

/* Slim sub-tabs for the intelligence pages (Dashboard / Buyers / Suppliers):
   underline style, no chrome, one text-line tall. */
.subtabs { display: flex; gap: var(--s4); border-bottom: 1px solid var(--line);
  margin: 0 0 var(--s4); }

.subtabs a { padding: 4px 2px 8px; font-size: var(--t-sm); font-weight: 500;
  color: var(--ink-soft); text-decoration: none; margin-bottom: -1px;
  border-bottom: 2px solid transparent; transition: color .12s, border-color .12s; }

.subtabs a:hover { color: var(--ink); }

.subtabs a.is-active { color: var(--accent-ink); border-bottom-color: var(--accent);
  font-weight: 600; }

.mk-scope .bp-coverage { margin: 0; flex: 1 1 260px; }

.mk-preset.is-active { background: var(--accent-wash); border-color: var(--accent);
  color: var(--accent-ink); font-weight: 600; }

/* Clickable chart bars only in the all-UK view (the filterable one). */
.bp-chart.is-clickable .bp-col { cursor: pointer; }

.bp-chart.is-clickable .bp-col:hover .bp-bar,
.bp-chart.is-clickable .bp-col:focus-visible .bp-bar { opacity: 1; background: var(--accent); }

.bp-chart.is-clickable .bp-col:focus-visible { outline: 2px solid var(--accent);
  outline-offset: 2px; border-radius: 4px; }

.legal-nav a.is-active { background: var(--seal); border-color: var(--seal); color: #fff; }

/* UK landing: quiet editorial eyebrows instead of pill badges — reads native to
   the product's understated style. Scoped to .mkt-uk so IL keeps its pills. */
.mkt-uk .lp-kicker { background: none; padding: 0; border-radius: 0; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lp-seal); margin-bottom: 14px; }

.mkt-uk .lp-kicker::before { content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: var(--lp-seal); opacity: .45; }

.mkt-uk .lp-kicker .lp-new-tag { letter-spacing: .05em; vertical-align: 1px; }

/* competition intensity */
.comp-panel { margin-top: var(--s3); padding: 10px 14px; border-radius: 10px;
  background: var(--seal-wash); font-size: var(--t-sm); line-height: 1.5;
  border-inline-start: 3px solid var(--seal); max-width: 720px; }

.comp-panel.comp-open { border-inline-start-color: var(--ok); }

.comp-panel.comp-concentrated { border-inline-start-color: var(--bad); }

.comp-head { display: flex; align-items: center; gap: 8px; font-weight: 700;
  margin-bottom: 4px; }

.comp-panel p { margin: 2px 0; }

.comp-basis { font-size: 12px; }

.comp-more > summary { list-style: none; cursor: pointer; margin-top: 4px;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--t-xs); font-weight: 600; color: var(--seal); }

.comp-more > summary::-webkit-details-marker { display: none; }

.comp-more > summary::marker { content: ""; }

.comp-more > summary:hover { text-decoration: underline; }

.comp-more > summary .chev { transition: transform .15s ease; }

.comp-more[open] > summary .chev { transform: rotate(180deg); }

.chip.sd-type, .chip.sd-urg, .chip.sd-st, .chip.sd-flag {
  padding: 2px 9px; font-size: var(--t-xs); cursor: default; white-space: nowrap;
}

.chip.sd-type-billing { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }

.chip.sd-urg-urgent { background: var(--bad-wash); border-color: var(--bad); color: var(--bad); font-weight: 700; }

.chip.sd-urg-high { border-color: var(--accent); color: var(--accent-ink); }

.chip.sd-st-open, .chip.sd-st-awaiting_admin { background: var(--seal-wash); border-color: var(--seal); color: var(--seal); }

.chip.sd-st-resolved { color: var(--ok); border-color: var(--ok); }

.chip.sd-st-archived, .chip.sd-st-awaiting_user { color: var(--ink-soft); }

.chip.sd-flag { background: var(--check-wash); border-color: var(--check); color: var(--check); }

.chip.sd-flag-err { background: var(--bad-wash); border-color: var(--bad); color: var(--bad); }

.sd-side .card p { margin: 0 0 var(--s2); font-size: var(--t-sm); }


/* Public contact form (support lane) */
.contact-form .field { margin-bottom: var(--s3); }

.ct-form .field { margin-bottom: 10px; }

.ct-pair .field { margin-bottom: 10px; }

.ct-page .muted:last-child { font-size: 12.5px; margin: 6px 0 0; }


/* Readiness: matched-certification reassurance rows (award icon, met styling) */
.rd-items-cert li .ic { color: var(--seal); }

/* Onboarding fine-tune step: the two strict keyword filters sit in one bordered
   group with a compact amber caption, so the caution reads as part of the fields. */
/* UK wizard option chips (sector / regions / buyer types) run ~15% smaller than
   the default chip — the full-size rows read as oversized buttons. */
.mkt-uk .wizard-step .chip-row .chip { padding: 7px 14px; font-size: var(--t-xs); }

.kw-group .field { margin-bottom: var(--s3); }

.kw-group .field:last-child { margin-bottom: 0; }


/* Help & contact form — compact rhythm, hint and send on one footer row */
.support-form .field { margin-bottom: 10px; }

.support-foot .btn { flex: none; }



/* /about — §9b layout correction (T-STORY-ABOUT2). One centered 640px column
   for every section body, tight section rhythm, a boxless vertical-rail journey
   and typographic principle rows. NO cards, NO borders around steps, NO icons.
   Scoped to .ab-page so the shared .lp-section rhythm elsewhere is untouched. */
.ab-page .lp-section { padding-block: var(--s6); }

.ab-page .lp-head { margin-bottom: var(--s5); }


/* Contour divider — it IS the separator between journey and principles, so those
   two sections drop the touching padding (keeps the gap ~64px, never a void). */
.ab-page .lp-section.ab-sec-j { padding-bottom: 0; }

.ab-page .lp-section.ab-sec-p { padding-top: 0; }

.lp2-sources-explore { margin: 12px 0 0; text-align: center; font-size: 14px; color: var(--ink-soft); }

.lp2-sources-explore a { color: var(--seal); font-weight: 500; }
   /* ring matches the card face, not the page */
@media (prefers-reduced-motion: reduce){.bh2-card-link{transition:none}}


/* ── T-SCORECARD verdict panel — layout only; colours reuse readiness tones ─── */
.sc-panel { margin: 0 0 var(--s4); }

.sc-panel .sc-head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }

.sc-tier { font-size: var(--t-md); font-weight: 800; }

.sc-panel .rd-tally { margin-inline-start: auto; }

.sc-signals { list-style: none; margin: var(--s3) 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 6px 20px; }
@media (min-width: 720px) {
 .sc-signals { grid-template-columns: 1fr 1fr; }
}

.sc-sig { display: flex; align-items: baseline; gap: 7px; font-size: var(--t-sm);
  line-height: 1.5; color: var(--ink); }

.sc-sig .ic { flex: none; position: relative; top: 2px; }

.sc-for .ic { color: var(--ok); }

.sc-against .ic { color: var(--check); }

.sc-unavailable .ic { color: var(--ink-soft); opacity: .7; }

.sc-sig-link { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--line); }

.sc-sig-link:hover { border-bottom-color: var(--seal); color: var(--seal); }

.sc-change { margin: var(--s3) 0 0; font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.5; }

.sc-actions { margin-top: var(--s4); display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }


/* inline tier chip (board card + panel), reusing .rd-badge colour by tone */
.sc-chip { display: inline-flex; }

.sc-chip .rd-badge { font-size: var(--t-xs); font-weight: 700; }


/* one-tap pass picker (no JS) */
.sc-pass { position: relative; display: inline-block; }

.sc-pass > summary { list-style: none; cursor: pointer; }

.sc-pass > summary::-webkit-details-marker { display: none; }

.sc-pass-menu { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-top: 6px; padding: var(--s3); border: 1px solid var(--line);
  border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-card); }

.sc-pass-prompt { font-size: var(--t-xs); color: var(--ink-soft); width: 100%; }

.sc-pass-opt { font-size: var(--t-xs); font-weight: 600; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 11px; cursor: pointer; }

.sc-pass-opt:hover { border-color: var(--seal); color: var(--seal); }


/* ── T-SCORECARD compact verdict ON the match card (replaces the criteria list) ── */
.fcv { padding: 8px 12px; margin: 0 0 var(--s2); }
   /* tighter than .readiness */
.fcv-head { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

.fcv-head .rd-badge { font-size: var(--t-sm); font-weight: 800; }

/* Same tally element as the eligibility summary, so it lands in the same place:
   pushed to the far end of the head, chevron (if any) after it. */
.fcv-head .rd-tally { margin-inline-start: auto; }

.fcv-line { margin: 5px 0 0; font-size: var(--t-xs); color: var(--ink-soft); line-height: 1.5; }

.fcv-crit .rd-i-met .ic { color: var(--ok); }
 .fcv-crit .rd-i-gap .ic { color: var(--check); }


/* verdict summary + readiness read as one block (readiness = the X/Y at the bottom) */
.fcv-sum { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.fcv-sum .sc-signals { grid-template-columns: 1fr; }
   /* one column, on-card */
.fcv-sum + .fitcard-readiness { margin-top: 0; border-top: 1px dashed var(--line);
  border-top-left-radius: 0; border-top-right-radius: 0; }


/* verdict signals: two compact columns on the card */
.fcv-sum .sc-signals { grid-template-columns: 1fr 1fr; gap: 4px 18px; }
@media (max-width: 560px) {
 .fcv-sum .sc-signals { grid-template-columns: 1fr; }
}

/* readiness collapsed under the summary → click to reveal the criteria detail */
/* .readiness.sc-ready, not .sc-ready: `.readiness .rd-top` outranks a lone class
   and was holding this summary at the --s3 gap while the verdict head above it
   used --s2, which put the two tallies 4px out of line. */
.readiness.sc-ready > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s2); }

.sc-ready > summary::-webkit-details-marker { display: none; }

.sc-ready > summary .rd-tally { margin-inline-start: auto; }

.sc-ready .rd-chev { transition: transform .15s ease; flex: none; color: var(--ink-soft); }

.sc-ready[open] > summary .rd-chev { transform: rotate(180deg); }

.sc-ready > summary:hover .rd-badge { text-decoration: underline; text-underline-offset: 2px; }

.sc-ready .rd-bar, .sc-ready .rd-sub, .sc-ready .rd-listwrap, .sc-ready .rd-quickadd { margin-top: 8px; }


/* (.sc-block — the verdict + eligibility unit — is defined once, with the
   readiness styles it overrides. Two definitions here disagreed about the left
   accent and about which child selector to use.) */

/* Track (primary verdict CTA): white text + bookmark icon — .save-btn's ink-soft
   otherwise wins on source order and greys the label + icon (currentColor). */
.btn-primary.save-btn, .btn-primary.save-btn:hover { color: #fff; }


/* Pass reason picker: float as a popover above the button instead of pushing the
   card content down. .sc-pass is position:relative, so anchor to it. */
.sc-pass-menu { position: absolute; bottom: calc(100% + 6px); right: 0; left: auto;
  z-index: 30; width: max-content; max-width: 250px; margin: 0; }


/* Track: a soft, tinted CTA — clearly the primary action but easy on the eye;
   it commits to solid orange only on hover. Beats .save-btn's ink-soft (source order). */
.sc-track.save-btn, .sc-track.save-btn:focus-visible {
  background: var(--accent-wash); color: var(--accent-ink);
  border: 1px solid rgba(232, 101, 13, .35); font-weight: 700; }

.sc-track.save-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Pass: a defined but quiet outlined button — a skip glyph makes the no-bid
   action legible, a hairline border makes it read as a button (not bare text),
   and the muted ink keeps Track leading the eye. */
.sc-pass-btn { color: var(--ink-soft); font-weight: 600;
  border: 1px solid var(--line); background: var(--surface);
  display: inline-flex; align-items: center; gap: 6px; }

.sc-pass-btn .lucide { color: var(--ink-soft); }

.sc-pass-btn:hover { color: var(--ink); border-color: var(--ink-soft); background: var(--paper); }

.sc-pass-btn:hover .lucide { color: var(--ink); }


/* headline tiles */
.mk2 .bp-tiles { gap:12px; margin:0 0 16px;
  grid-template-columns:repeat(auto-fit, minmax(158px, 1fr)); }

.mk2 .bp-tile {
  background:#fff; border:1px solid rgba(28,43,51,.08); border-radius:14px;
  padding:16px 16px 14px; box-shadow:0 1px 2px rgba(28,43,51,.03);
  transition:transform .16s ease, box-shadow .16s ease;
}

.mk2 .bp-tile:hover { transform:translateY(-2px); box-shadow:0 10px 24px -14px rgba(28,43,51,.22); }

.mk2 .bp-tile b {
  font-size:27px; font-weight:800; color:var(--seal); letter-spacing:-.02em;
  line-height:1.05; font-variant-numeric:tabular-nums;
}

.mk2 .bp-tile span {
  display:block; margin-top:9px; font-size:11px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-soft);
}

.mk2 .bp-tile span small { display:inline; text-transform:none; letter-spacing:0;
  font-weight:500; font-size:10.5px; }

.mk2 .mk-alltime, .mk2 .bp-tile span small.mk-alltime { color:var(--seal); }


/* activity-over-time chart */
.mk2 .bp-chart { height:156px; gap:8px; }

.mk2 .bp-bar {
  background:#3A6E92; opacity:1; border-radius:7px 7px 0 0; max-width:42px;
  transition:background .14s ease;
}

.mk2 .bp-col:hover .bp-bar { background:#2E5C7C; }

.mk2 .bp-mlabel { font-size:10px; color:var(--ink-soft); margin-top:7px; }

.mk2 .bp-chart.is-clickable .bp-col:hover .bp-bar,
.mk2 .bp-chart.is-clickable .bp-col:focus-visible .bp-bar { background:var(--accent); }

.mk2 .mk-leaders li .tnum, .mk2 .mk-leaders li .muted {
  flex:none; font-size:12px; color:var(--ink-soft); font-variant-numeric:tabular-nums;
}


/* category (CPV) + region breakdown bars */
.mk2 .bp-cpv { gap:10px; }

.mk2 .bp-cpvrow { align-items:center; }

.mk2 .bp-cpvtrack { height:9px; background:var(--seal-wash); border-radius:999px; overflow:hidden; }

.mk2 .bp-cpvfill { background:#3A6E92; opacity:1; border-radius:999px; }

.mk2 .bp-cpvlabel { font-size:13px; }

.mk2 .bp-cpvlabel a { color:var(--ink); font-weight:550; transition:color .14s ease; }

.mk2 .bp-cpvlabel a:hover { color:var(--seal); }

.mk2 .bp-cpvlabel b { color:var(--ink-soft); font-weight:700; margin-inline-end:2px; }

.mk2 .bp-cpvnum { color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; }

.mk2 .bp-cpvspend { font-size:12px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
@media (prefers-reduced-motion: reduce) {
 .mk2 .bp-tile { transition:none; }
}


/* -- /buyers and /suppliers directory tables (T-MARKET, concept) -------------
   Scoped to #dir-results.dir2 so the shared table classes on other pages stay
   untouched. Aligned with the market dashboard: soft card, hairline rows,
   uppercase header, seal-wash monograms and pills, solid #3A6E92 coverage bars. */

/* results summary line */
.dir2 .results-summary { font-size:13px; color:var(--ink-soft); margin:0 0 14px; }

.dir2 .results-summary b { color:var(--ink); }


/* stat-nav tiles — keep tab states, add market polish */
.bpx .bp-tabs .bp-tile { border-radius:14px; box-shadow:0 1px 2px rgba(28,43,51,.03);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease; }

.bpx .bp-tabs a.bp-tile:hover { transform:translateY(-2px); box-shadow:0 10px 24px -14px rgba(28,43,51,.22); }


/* charts — one solid market blue */
.bpx .bp-bar { background:#3A6E92; opacity:1; border-radius:6px 6px 0 0; transition:background .14s ease; }

.bpx .bp-col:hover .bp-bar { background:#2E5C7C; }

.bpx .bp-cpvtrack { background:var(--seal-wash); }

.bpx .bp-cpvfill { background:#3A6E92; opacity:1; }

.bpx .bp-cpvlabel a { color:var(--ink); }

.bpx .bp-cpvlabel a:hover { color:var(--seal); }


/* -- buyer profile: recent-awards grid table + top cards (align w/ market) -- */
/* aligned award table header + expandable rows */
.bpx .aw-head { font-size:10.5px; letter-spacing:.05em; padding:0 0 11px;
  color:var(--ink-soft); border-bottom:1px solid rgba(28,43,51,.10); }

.bpx details.aw, .bpx .aw-skelrow { border-bottom:1px solid rgba(28,43,51,.06); }

/* The skeleton row shares the real row's padding here on purpose: this scope
   restyles 9px to 11px, and a placeholder that kept the base padding was two
   pixels short on every row. */
.bpx details.aw > .aw-sum, .bpx .aw-skelrow { padding:11px 8px; border-radius:8px; }


/* -- buyer profile "what they buy" + "activity" graphs — full market polish -- */
.bpx .bp-cpv { gap:11px; }

.bpx .bp-cpvrow { align-items:center; }

.bpx .bp-cpvtrack { height:9px; border-radius:999px; overflow:hidden; }

.bpx .bp-cpvfill { border-radius:999px; }

.bpx .bp-cpvlabel { font-size:13px; }

.bpx .bp-cpvlabel b { color:var(--ink-soft); font-weight:700; margin-inline-end:2px; }

.bpx .bp-cpvnum { color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; }

.bpx .bp-cpvspend { font-size:12px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }

.bpx .bp-chart { height:156px; gap:8px; }

.bpx .bp-bar { max-width:40px; border-radius:7px 7px 0 0; }


/* -- timeline month chart (month_chart macro): amount on top + month labels -- */
.bp-chart-tl { align-items:stretch; height:178px; gap:7px; }

.bp-chart-tl .bp-col { justify-content:flex-end; gap:5px; }

.bp-chart-tl .bp-bval { position:absolute; left:50%; transform:translateX(-50%);
  margin-bottom:3px; white-space:nowrap; font-size:9.5px; font-weight:700;
  color:var(--ink); font-variant-numeric:tabular-nums; }

/* Many grouped bars (e.g. 24 quarters): shrink + tighten so the £ labels don't collide. */
.bp-chart-tl .bp-bval-sm { font-size:7px; font-weight:600; margin-bottom:2px;
  letter-spacing:-.03em; }

.bp-chart-tl .bp-barwrap { flex:1; min-height:0; position:relative; width:100%; align-self:stretch; }

.bp-chart-tl .bp-barwrap .bp-bar { position:absolute; bottom:0; left:50%;
  transform:translateX(-50%); width:64%; max-width:40px; }

/* min-height keeps blank label slots (dense month view shows year ticks only)
   the same height as labelled ones, so every bar shares one vertical scale. */
.bp-chart-tl .bp-mlabel { flex:none; font-size:9.5px; line-height:1.2; text-align:center;
  color:var(--ink-soft); min-height:1.2em; }

.bp-chart-tl .bp-myr { margin-inline-start:2px; opacity:.6; }

.mk-grain-btn.is-on { background:var(--card, #fff); color:var(--seal);
  box-shadow:0 1px 2px rgba(0,0,0,.08); }

.bpx .bp-live-row.is-open .bp-live-dot { background:#1a7f4b; }

.bpx .bp-fw-row.is-open::before { background:#1a7f4b; }


/* -- track-buyer button (buyer profile header) — slick seal pill toggle -- */
.bpx .bp-trackform .btn {
  display:inline-flex; align-items:center; gap:7px; border-radius:999px;
  padding:8px 16px; font-weight:600; font-size:13px; line-height:1;
  background:var(--seal); border:1px solid var(--seal); color:#fff;
  box-shadow:0 1px 2px rgba(28,43,51,.10); transition:transform .15s ease,
  background .15s ease, border-color .15s ease, box-shadow .15s ease; }

.bpx .bp-trackform .btn svg { flex:none; }

.bpx .bp-trackform .btn:hover { background:#0f4265; border-color:#0f4265;
  transform:translateY(-1px); box-shadow:0 8px 18px -9px rgba(22,85,122,.55); }

/* tracked = softer seal-wash "done" state (still one tap to stop) */
.bpx .bp-trackform .btn.is-on { background:var(--seal-wash);
  border-color:rgba(22,85,122,.30); color:var(--seal); box-shadow:none; }

.bpx .bp-trackform .btn.is-on:hover { background:#dbe6ee; transform:none;
  box-shadow:none; }


/* -- supplier profile top panel — slick plain tiles (market treatment).
   Scoped to .bp-tiles so the buyer page's .bp-tabs tab-tiles are untouched. -- */
.bpx .bp-tiles { gap:12px; margin:0 0 16px; grid-template-columns:repeat(auto-fit, minmax(158px, 1fr)); }

.bpx .bp-tiles .bp-tile { background:#fff; border:1px solid rgba(28,43,51,.08); border-radius:14px;
  padding:16px 16px 14px; box-shadow:0 1px 2px rgba(28,43,51,.03);
  transition:transform .16s ease, box-shadow .16s ease; }

.bpx .bp-tiles .bp-tile:hover { transform:translateY(-2px); box-shadow:0 10px 24px -14px rgba(28,43,51,.22); }

.bpx .bp-tiles .bp-tile b { font-size:27px; font-weight:800; color:var(--seal); letter-spacing:-.02em;
  line-height:1.05; }

.bpx .bp-tiles .bp-tile-money b { font-size:21px; overflow-wrap:anywhere; }

.bpx .bp-tiles .bp-tile-date b { font-size:17px; }

.bpx .bp-tiles .bp-tile span { display:block; margin-top:9px; font-size:11px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); }

.bpx .bp-tiles .bp-tile span small { display:inline; text-transform:none; letter-spacing:0;
  font-weight:500; font-size:10.5px; }
@media (prefers-reduced-motion: reduce) {
 .bpx .bp-tiles .bp-tile { transition:none; }
}

/* "Before you bid" — the decision_info fields that were extracted and stored
   since the schema existed and rendered nowhere. Values are one-liners
   ("מחיר 70%, איכות 30%"), so a tight two-column list reads better than a
   paragraph per field. Logical properties throughout: this block is RTL on IL,
   which is where most of its content lives. */
/* ONE grid for the whole list, not a grid per row: `display: contents` on the
   wrappers lifts every dt/dd into it, so all labels share a column and every
   value starts at the same x. Each row sizing itself meant the values stepped
   in and out down the list, and an `auto` label column let the longest label
   ("Guarantees and commitments") push every value to the right. The column is
   fixed now, so a long label wraps inside it instead. */
.t-bid-dl { display: grid; grid-template-columns: 10.5rem 1fr;
  gap: var(--s2) var(--s3); margin: 0; align-items: baseline; }

.t-bid-dl > div { display: contents; }

.t-bid-dl dt { font-size: var(--t-xs); font-weight: 700; color: var(--ink-soft);
  text-align: start; overflow-wrap: anywhere; }

.t-bid-dl dd { margin: 0; font-size: var(--t-sm); color: var(--ink);
  min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {

  .t-bid-dl { grid-template-columns: 1fr; gap: 2px; }

  .t-bid-dl dd { margin-bottom: var(--s2); }
}


/* A value the buyer did not publish. Quieter than a real figure and NOT
   tabular-numeric -- it is a statement, not an amount. */
.t-val-none { color: var(--ink-soft); font-size: var(--t-xs); }


/* ── "Free while we grow" overlay ───────────────────────────────────────────
   Deliberately quiet for an interstitial: a card on a dimmed page, one primary
   action and an unmissable way out. The dismiss control is a real button, not
   a faint x in a corner — an overlay you cannot obviously close is the thing
   people resent. */
.fp-wrap { position: fixed; inset: 0; z-index: 120; display: flex;
  align-items: center; justify-content: center; padding: var(--s4);
  background: rgba(28, 43, 51, .55); backdrop-filter: blur(2px);
  animation: fp-fade .18s ease-out; }

.fp-wrap[hidden] { display: none; }

@keyframes fp-fade { from { opacity: 0 } to { opacity: 1 } }

body.fp-open { overflow: hidden; }

.fp-card { position: relative; width: min(30rem, 100%); background: var(--surface, #fff);
  border-radius: 14px; padding: var(--s5, 24px); box-shadow: 0 18px 50px rgba(0,0,0,.22);
  animation: fp-rise .22s cubic-bezier(.2,.8,.3,1); }

@keyframes fp-rise { from { transform: translateY(10px); opacity: .6 } to { transform: none; opacity: 1 } }

.fp-x { position: absolute; inset-block-start: 10px; inset-inline-end: 10px;
  border: 0; background: transparent; cursor: pointer; color: var(--ink-soft);
  padding: 6px; border-radius: 8px; line-height: 0; }

.fp-x:hover { background: rgba(0,0,0,.06); }

.fp-eyebrow { margin: 0 0 6px; font-size: var(--t-xs); letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-ink, var(--ink-soft)); font-weight: 700; }

.fp-h { margin: 0 0 10px; font-size: var(--t-lg); line-height: 1.25; text-wrap: balance; }

.fp-body { margin: 0 0 10px; color: var(--ink-soft); line-height: 1.55; }

.fp-body-quiet { font-size: var(--t-sm); }

.fp-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  margin-block-start: var(--s4); }

.fp-later { border: 0; background: transparent; cursor: pointer; padding: 8px 4px;
  color: var(--ink-soft); font-size: var(--t-sm); text-decoration: underline; }

.fp-later:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {

  .fp-wrap, .fp-card { animation: none; }
}


/* Field-level validation. A banner at the top of a form makes the reader map a
   message back onto an input they have already scrolled past; this puts it
   under the field, and marks the field itself. */
.field input.is-invalid, input.is-invalid { border-color: var(--danger, #B3261E) !important; }