/* 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-dropdown-all { color: var(--accent-ink) !important; }
.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; }
}

/* Public contact page — two clear lanes (sales / support). */
.contact-lanes { display: grid; grid-template-columns: 1fr; gap: var(--s4); margin: var(--s5) 0; }
.contact-lane { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface);
  padding: var(--s4) var(--s5); }
.contact-lane h2 { display: flex; align-items: center; gap: 7px; font-size: var(--t-md); margin: 0 0 var(--s2); }
.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; }

/* Public blog — listing + article. */
.blog-article { max-width: 760px; }
.blog-article > h1 { font-size: var(--t-xl); line-height: 1.2; margin-bottom: 6px; }
.blog-article-meta { font-size: var(--t-sm); margin-bottom: var(--s5); }
.blog-body { color: var(--ink); line-height: 1.85; }
.blog-body h2 { font-family: var(--font-display); font-size: var(--t-lg); margin: var(--s5) 0 var(--s2); }
.blog-body p { margin: 0 0 var(--s3); }
.blog-body a { color: var(--accent-ink); }
.blog-refs { font-size: var(--t-sm); color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: var(--s3); margin-top: var(--s4); }
.blog-cta { margin: var(--s6) 0 var(--s4); padding: var(--s5); background: var(--seal-wash); border-radius: var(--r-card); text-align: center; }
/* Comparison table for editorial posts (e.g. approaches to finding tenders). */
.blog-body table.cmp { width: 100%; border-collapse: collapse; margin: var(--s4) 0; font-size: var(--t-sm); line-height: 1.5; }
.blog-body table.cmp th, .blog-body table.cmp td { border: 1px solid var(--line); padding: var(--s2) var(--s3); text-align: start; vertical-align: top; }
.blog-body table.cmp thead th { font-family: var(--font-display); background: var(--bg-soft, var(--seal-wash)); }
.blog-body table.cmp tbody th { font-weight: 500; }
.blog-body table.cmp .cmp-us { background: var(--seal-wash); color: var(--accent-ink); font-weight: 700; }
.blog-cta p { margin: 0 0 var(--s3); font-weight: 500; }
.blog-back { margin-top: var(--s4); }
.blog-back a { color: var(--accent-ink); }
/* About page — "how it works" steps. */
.about-steps { display: flex; flex-wrap: wrap; gap: var(--s4); margin: var(--s3) 0 var(--s4); }
.about-step { flex: 1 1 180px; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.about-step-ic { display: inline-flex; color: var(--seal); margin-bottom: var(--s2); }
.about-step h3 { font-size: var(--t-md); margin: 0 0 4px; }
.about-step p { margin: 0; color: var(--ink-soft); font-size: var(--t-sm); }

/* ---------- 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%; }

/* T-ILBTN: IL public-area button system — seal-blue fill + thin orange base
   line. Scoped to body.il-pub so the logged-in app and all UK pages are
   untouched. --accent is unchanged; orange lives only in the 2.5px base line. */
body.il-pub .btn-primary, body.il-pub button[type=submit], body.il-pub .cta {
  background: var(--btn); color: #fff; border: none;
  box-shadow: inset 0 -2.5px 0 var(--btn-line);
  border-radius: var(--r-control); font-weight: 500;
  font-size: 14px; padding: 7px 16px; line-height: 1.4;
  transition: background .12s ease;
}
body.il-pub .btn-primary:hover  { background: var(--btn-hover); }
body.il-pub .btn-primary:active { transform: translateY(1px); }
body.il-pub .btn-primary:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }

body.il-pub .btn-lg   { font-size: var(--t-sm); padding: 9px 22px; }   /* hero CTAs — the ONLY large size */
body.il-pub .btn-sm   { font-size: 13px; padding: 5px 12px; }
body.il-pub .btn-secondary { background: transparent; color: var(--seal);
  border: 1px solid var(--seal); box-shadow: none; }
body.il-pub .btn-secondary:hover { background: var(--seal-wash); }
body.il-pub .btn-primary:disabled { background: var(--line); color: var(--ink-soft);
  box-shadow: none; }
/* De-bulk (§4): no public button larger than .btn-lg. The landing hero CTA had a
   bespoke 13px/16px override — bring it back to the btn-lg scale on IL public. */
body.il-pub .lp-hero .lp-cta-row .btn-lg { font-size: var(--t-sm); padding: 9px 22px; }
/* 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; }
/* Inline helper line under an input (e.g. the password policy hint). */
.field-hint { font-size: var(--t-xs); line-height: 1.4; margin-top: -2px; }
/* Password field with a reveal (eye) toggle on the trailing edge. */
.pw-wrap { position: relative; display: flex; }
.pw-wrap > input { width: 100%; padding-inline-end: 42px; }
.pw-toggle {
  position: absolute; inset-inline-end: 1px; top: 1px; bottom: 1px; width: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink-soft);
  border-radius: var(--r-control);
}
.pw-toggle:hover { color: var(--accent-ink); }
.pw-ic { display: inline-flex; }
.pw-ic-hide { display: none; }
.pw-wrap.is-revealed .pw-ic-show { display: none; }
.pw-wrap.is-revealed .pw-ic-hide { display: inline-flex; }
/* Cloudflare Turnstile widget: center it in the auth card and give it room so it
   sits cleanly between the password fields and the submit button. */
.cf-turnstile { display: flex; justify-content: center; margin: var(--s3) 0 var(--s4); }
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); }
.alert-ok { border-color: var(--ok); background: var(--ok-wash); color: var(--ok); }

/* ---------- 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; }
/* Planning / pipeline notice badge — distinct (amber) from the verdict + deadline
   chips so a not-yet-biddable opportunity reads differently at a glance. */
.stage-chip {
  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 #d9a441; background: #fbf1dd; color: #8a5a12;
}
.sc-title .stage-chip, .t-title + .stage-chip { vertical-align: 2px; }

/* 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); }
.ps-interested { color: var(--seal); border-color: color-mix(in srgb, var(--seal) 30%, var(--line)); }
.ps-preparing { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.ps-submitted { color: var(--seal); border-color: color-mix(in srgb, var(--seal) 30%, var(--line)); }
.ps-won { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.ps-lost { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 30%, var(--line)); }

/* Card list — one clean card per saved tender. */
.saved-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s4); }
.saved-card {
  position: relative; background: var(--surface);
  border: 1px solid var(--line); border-inline-start: 3px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.saved-card:hover { box-shadow: var(--shadow); }
/* Stage accent on the inline-start edge — at-a-glance pipeline color. */
.stage-accent-interested { border-inline-start-color: var(--seal); }
.stage-accent-preparing  { border-inline-start-color: var(--accent); }
.stage-accent-submitted  { border-inline-start-color: var(--seal); }
.stage-accent-won        { border-inline-start-color: var(--ok); }
.stage-accent-lost       { border-inline-start-color: var(--bad); }
.saved-card.is-missed { border-inline-start-color: var(--accent); }

.sc-row { display: flex; align-items: flex-start; gap: var(--s4); padding: var(--s4) var(--s5); cursor: pointer; }
.sc-main { flex: 1; min-width: 0; }
.sc-title { font-family: var(--font-display); font-size: var(--t-md); color: var(--ink); margin: 0 0 7px; line-height: 1.3; }
.sc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s2); color: var(--ink-soft); font-size: var(--t-sm); }
.sc-meta .dot { color: var(--line); }
.sc-pub { display: inline-flex; align-items: center; gap: 5px; }
.sc-pub .lucide { color: var(--ink-soft); }
.sc-deadline { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.sc-deadline.urgent { color: var(--accent-ink); }
.sc-deadline.soon { color: var(--check); }
.sc-deadline.passed { color: var(--ink-soft); }
.sc-has-note { display: inline-flex; align-items: center; gap: 4px; }

/* At-a-glance AI facts on the collapsed card — compact pills, one wrapping line. */
.sc-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; margin-top: 7px; }
.sc-fact {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--t-xs); color: var(--ink-soft);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 9px; line-height: 1.7;
}
.sc-fact .lucide { color: var(--ink-soft); }
.sc-fact b { color: var(--ink); font-weight: 700; }
.sc-fact-warn { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-wash); }
.sc-fact-warn .lucide { color: var(--accent-ink); }
.sc-facts .t-conf-chip { line-height: 1.7; }

.sc-side { display: flex; align-items: center; gap: var(--s3); flex: none; }
.sc-caret { color: var(--ink-soft); display: inline-flex; transition: transform .15s ease; }
.t-row[aria-expanded="true"] .sc-caret { transform: rotate(180deg); color: var(--accent); }

/* 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; }
.stage-interested { border-color: var(--seal); background: var(--seal-wash); color: var(--seal); }
.stage-preparing  { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-ink); }
.stage-submitted  { border-color: var(--seal); background: var(--seal); color: #fff; }
.stage-won        { border-color: var(--ok); background: var(--ok-wash); color: var(--ok); }
.stage-lost       { border-color: var(--bad); background: var(--bad-wash); color: var(--bad); }

/* Expanded detail area. */
.sc-detail { border-top: 1px solid var(--line); background: var(--paper); padding: var(--s4) var(--s5); }
.sc-detail-grid { display: grid; grid-template-columns: 1fr 280px; gap: var(--s5); align-items: start; }
.sc-detail-main { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.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; }
@media (max-width: 760px) {
  .sc-detail-grid { grid-template-columns: 1fr; }
}

/* 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; }

/* ---- Drag handle + reorder states (list + board) ---- */
.drag-handle {
  flex: none; display: inline-flex; align-items: center; align-self: flex-start;
  color: var(--ink-soft); cursor: grab; opacity: .5; margin-top: 2px;
  touch-action: none; transition: opacity .12s ease;
}
.drag-handle:hover { opacity: 1; }
.drag-handle:active { cursor: grabbing; }
.saved-card.is-dragging, .kb-card.is-dragging { opacity: .45; }
.saved-card.drop-target { box-shadow: 0 -2px 0 var(--seal); }

/* ---- Kanban board ---- */
.kanban { display: flex; gap: var(--s3); overflow-x: auto; padding-bottom: var(--s3); align-items: flex-start; }
.kb-col {
  flex: 1 0 240px; min-width: 220px; max-width: 340px;
  background: var(--paper); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--line); border-radius: var(--r-card);
  display: flex; flex-direction: column;
  /* Gentle ease-in-out (soft start AND soft end) reads far calmer than a
     fast-start ease-out; slower + dim fading in step keeps the eye from
     jumping. scroll-margin clears the top nav when we scroll a top card so
     its stage header stays in view. */
  /* One easeOutExpo curve + duration for widen, dim and desaturate so the whole
     column moves as a single gently-decelerating motion (native, not
     mechanical). Paired with per-frame re-centring in the JS. */
  transition: flex-basis .96s cubic-bezier(.16,1,.3,1), max-width .96s cubic-bezier(.16,1,.3,1), opacity .96s cubic-bezier(.16,1,.3,1), filter .96s cubic-bezier(.16,1,.3,1);
  scroll-margin-top: 80px;
}
.kb-col-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.kb-col-title { font-weight: 700; font-size: var(--t-sm); }
.kb-col-count { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; font-size: var(--t-xs); color: var(--ink-soft); }
.kb-col-body { padding: 10px; display: flex; flex-direction: column; gap: var(--s2); min-height: 64px; transition: background .12s ease; }
.kb-col-body.is-drop { background: var(--seal-wash); outline: 2px dashed var(--seal); outline-offset: -4px; border-radius: var(--r-control); }
.kb-empty { font-size: var(--t-xs); text-align: center; padding: var(--s3) 0; margin: 0; }

.kb-card {
  background: var(--surface); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--line); border-radius: var(--r-control);
  box-shadow: var(--shadow-card);
  /* The focus lift (shadow + border) and the sibling-card dim ease in like a
     hover instead of snapping; transform stays snappy for drag feedback. */
  transition: box-shadow .48s cubic-bezier(.16,1,.3,1), border-color .48s ease, opacity .54s ease, transform .16s ease;
}
.kb-card.is-dragging { opacity: .45; }
/* ── Focus mode ────────────────────────────────────────────────────────────
   Click a card to focus it: its column widens (~30%), the other columns dim,
   and the full detail + editors get room to work. One card at a time. Works in
   both RTL (IL) and LTR (UK) — flex + border-inline-start are direction-aware. */
.kanban.has-focus .kb-col { flex-grow: 0; flex-basis: 244px; }           /* freeze the rest */
.kanban.has-focus .kb-col:not(.is-focus-col) { opacity: .45; filter: saturate(.55); }
/* Qualified with .kanban.has-focus so it outranks the freeze rule above
   (equal-or-higher specificity) — otherwise the focused column stays 244px.
   Capped to 90vw so it never spills past a phone viewport: min() keeps the
   full 588px on any screen wider than ~650px and shrinks to fit on mobile. */
.kanban.has-focus .kb-col.is-focus-col { flex-basis: min(588px, 90vw); max-width: min(588px, 90vw); }
.kanban.has-focus .kb-col.is-focus-col .kb-card:not(.is-focus) { opacity: .5; }
.kb-card.is-focus { position: relative; z-index: 2; box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--seal) 32%, var(--line)); outline: 2px solid var(--seal-wash); }
.kb-compact { padding: 10px 11px; cursor: grab; position: relative; }
.kb-compact:active { cursor: grabbing; }
/* Wordless draggability hint: a faint grip pinned to the top corner, brighter
   on hover. Decorative (pointer-events: none) so the grab still drags the whole
   card. Hidden when focused — the ✕ owns that corner then. */
.kb-grip {
  position: absolute; inset-block-start: 8px; inset-inline-end: 9px;
  display: inline-flex; color: var(--ink-soft); opacity: .3;
  pointer-events: none; transition: opacity .15s ease;
}
.kb-card:hover .kb-grip { opacity: .65; }
.kb-card.is-focus .kb-grip { display: none; }
/* The focused card's header is the collapse handle — click it (or the ✕) to
   minimise and leave focus. */
.kb-card.is-focus .kb-compact { cursor: pointer; position: relative; }
.kb-card.is-focus .kb-compact:hover { background: var(--paper); }
.kb-card.is-focus .kb-title { -webkit-line-clamp: unset; padding-inline-end: 28px; }
.kb-card.is-focus .kb-compact::after {
  content: "\00d7"; position: absolute; inset-block-start: 8px; inset-inline-end: 9px;
  width: 22px; height: 22px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; background: var(--surface);
  color: var(--ink-soft); font-size: 14px; line-height: 1;
}
.kb-card.is-focus .kb-compact:hover::after { border-color: var(--seal); color: var(--seal); }
.kb-title {
  font-size: var(--t-sm); font-weight: 700; color: var(--ink); margin: 0 0 5px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  padding-inline-end: 20px;   /* clear the grip in the top corner */
}
.kb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; font-size: var(--t-xs); color: var(--ink-soft); }
.kb-deadline { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.kb-deadline.urgent { color: var(--accent-ink); }
.kb-deadline.soon { color: var(--check); }
.kb-deadline.passed { color: var(--ink-soft); }
.kb-ic { display: inline-flex; }
.kb-award { color: var(--ok); font-weight: 700; }

.kb-detail { display: none; padding: 10px 12px 12px; border-top: 1px solid var(--line); }
.kb-card.is-focus .kb-detail { display: block; animation: kbReveal .72s cubic-bezier(.16,1,.3,1) .144s both; }
@keyframes kbReveal { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .kb-col { transition: none; }
  .kb-card.is-focus .kb-detail { animation: none; }
}
.kb-detail .t-detail-summary { font-size: var(--t-sm); }
/* The stage pill sizes to its label, not the full card width — the base
   `select { width: 100% }` rule would otherwise stretch it across the whole
   588px focused column. flex keeps it left-aligned at content width. */
.kb-detail-stage { margin: 0 0 var(--s2); display: flex; }
.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-detail-facts { display: flex; flex-wrap: wrap; gap: 4px 7px; font-size: var(--t-xs); margin-top: var(--s2); }
/* Labelled action row (source / hide / remove) set off by a dashed rule, like
   the list view's .sc-actions. The focus width lets every label breathe. */
.kb-actions {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin-top: var(--s3); padding-top: var(--s3); border-top: 1px dashed var(--line);
}
.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 {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; font-size: 11px; font-weight: 700;
  background: var(--seal-wash); color: var(--seal); vertical-align: middle;
}
.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); }
.notes-thread { border-top: 1px dashed var(--line); padding-top: var(--s3); }
.notes-head { font-size: var(--t-xs); font-weight: 700; color: var(--ink); margin-bottom: var(--s2); }
.notes-list { list-style: none; margin: 0 0 var(--s2); padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
/* Cap the thread at ~5 notes; scroll the rest so a long thread doesn't take
   over the card. (Newest are at the top.) */
.notes-list { max-height: 17rem; overflow-y: auto; padding-inline-end: 4px; }
.note-item { display: flex; align-items: flex-start; gap: var(--s2); }
.note-item .note-body { flex: 1; min-width: 0; }
.note-meta { font-size: var(--t-xs); color: var(--ink-soft); display: flex; gap: 6px; align-items: baseline; }
.note-text { font-size: var(--t-sm); color: var(--ink); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.note-del { flex: none; }
.notes-empty { font-size: var(--t-xs); }
.notes-add { display: flex; align-items: center; gap: var(--s2); }
.notes-input-wrap { position: relative; flex: 1; min-width: 0; }
.notes-input-wrap input { width: 100%; min-width: 0; }

/* @-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;
}
/* A note that mentions the current viewer — highlighted row. */
.note-item.is-mentioned {
  background: color-mix(in srgb, var(--seal) 9%, transparent);
  border-inline-start: 3px solid var(--seal);
  border-radius: var(--r-control); padding: 6px 8px; margin-inline-start: -2px;
}
.note-item.is-mentioned.is-flash { animation: kbReveal .25s ease; box-shadow: 0 0 0 3px color-mix(in srgb, var(--seal) 30%, transparent); }
.note-mention-tag { display: inline-flex; align-items: center; gap: 3px; color: var(--accent-ink); font-weight: 700; }
.note-mention-tag .lucide { color: var(--seal); }

/* @-mention picker dropdown (anchored under the composer input). */
.mention-pop {
  position: absolute; z-index: 30; inset-inline-start: 0; inset-inline-end: 0; top: calc(100% + 4px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-card); padding: 4px; max-height: 210px; overflow-y: auto;
}
.mention-opt {
  display: flex; align-items: center; gap: var(--s2); width: 100%;
  padding: 6px 8px; border: 0; background: transparent; cursor: pointer;
  border-radius: var(--r-control); text-align: start; color: var(--ink); font: inherit;
}
.mention-opt:hover, .mention-opt.is-active { background: var(--seal-wash); }
.mention-opt-name { font-weight: 600; font-size: var(--t-sm); }
.mention-opt-email { font-size: var(--t-xs); margin-inline-start: auto; }
.ws-upgrade { text-align: center; max-width: 560px; margin-inline: auto; padding: var(--s6) var(--s5); }
/* Settings tabs */
.settings-tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: var(--s5); }
.stab { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--ink-soft); font: inherit; font-weight: 500; font-size: var(--t-sm); cursor: pointer; border-radius: var(--r-control) var(--r-control) 0 0; }
.stab:hover { color: var(--ink); background: var(--paper); }
.stab.is-active { color: var(--seal); border-bottom-color: var(--seal); }
.stab .lucide { flex: none; }
@media (max-width: 560px) { .stab span { display: none; } .stab { padding: 10px 14px; } }
.settings-panel[hidden] { display: none; }

/* Billing / subscription page */
.billing-card { max-width: 560px; margin-inline: auto; }
.billing-head { display: flex; align-items: flex-start; gap: var(--s4); margin-bottom: var(--s4); }
.billing-head h1 { font-size: var(--t-lg); margin: 0 0 4px; }
.billing-mark { flex: none; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--seal-wash); color: var(--seal); }
.billing-mark.ok { background: var(--ok-wash, #E7F3EC); color: var(--ok); }
.billing-meta { display: flex; gap: var(--s5); flex-wrap: wrap; margin: 0 0 var(--s4); }
.billing-meta dt { font-size: var(--t-xs); color: var(--ink-soft); margin-bottom: 2px; }
.billing-meta dd { margin: 0; font-weight: 700; color: var(--ink); }
.billing-trial { margin: 0 0 var(--s3); display: inline-flex; align-items: center; gap: 5px; }
.billing-secure { margin: var(--s3) 0 0; display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-xs); }
.billing-actions { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.billing-cancel-form { margin: 0; }
.btn-cancel-sub { background: none; border: 0; padding: 0; font: inherit; color: var(--ink-soft); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.btn-cancel-sub:hover { color: #c0392b; }
.ws-upgrade-mark { color: var(--seal); display: inline-flex; }
.ws-upgrade-list { list-style: none; margin: var(--s4) auto; padding: 0; display: inline-flex; flex-direction: column; gap: var(--s2); text-align: start; }
.ws-upgrade-list li { display: flex; align-items: center; gap: var(--s2); color: var(--ink); }
.ws-upgrade-list .lucide { color: var(--ok); }
.auth-actions { display: flex; gap: var(--s2); margin-top: var(--s3); }

/* ---- Workspace settings forms ---- */
.ws-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.ws-section-head h2 { margin: 0; }
.ws-seat-pill { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 4px 11px; border-radius: 999px; font-size: var(--t-xs); font-weight: 600; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); }
.ws-rename { display: flex; gap: var(--s2); }
.ws-rename input { flex: 1; min-width: 0; }
.ws-name-static { font-weight: 700; color: var(--ink); margin: 0; }
/* Members + pending list */
.ws-members { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ws-member { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.ws-member:first-child { border-top: 0; }
.ws-member-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.ws-member-email { color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.ws-you-chip { font-size: var(--t-xs); color: var(--seal); background: var(--seal-wash); padding: 1px 8px; border-radius: 999px; font-weight: 600; }
.ws-member.is-invited .ws-member-email { color: var(--ink-soft); }
.ws-member-role { flex: none; }
.role-pill { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-xs); font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); }
.role-pill.role-owner { color: var(--seal); border-color: color-mix(in srgb, var(--seal) 30%, var(--line)); }
.role-pill.role-admin { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.role-select { font-size: var(--t-xs); font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.role-select.role-owner { color: var(--seal); border-color: color-mix(in srgb, var(--seal) 30%, var(--line)); }
.role-select.role-admin { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.ws-icon-btn { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ws-icon-btn:hover { background: var(--paper); color: var(--bad); }
.wn-copy.ws-icon-btn:hover { color: var(--seal); }
/* Invite card */
.ws-invite { display: flex; flex-direction: column; gap: var(--s3); }
.ws-invite-emails textarea { width: 100%; resize: vertical; min-height: 52px; }
.ws-invite-emails textarea.is-invalid { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-wash); }
.ws-invite-error { margin: 0; font-size: var(--t-sm); color: var(--bad); word-break: break-all; }
.ws-invite-foot { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.ws-invite-role { flex: none; display: inline-flex; align-items: center; gap: var(--s2); margin: 0; }
.role-inline-label { flex: none; font-size: var(--t-xs); font-weight: 600; color: var(--ink-soft); }
.ws-invite-foot .role-select { height: 40px; padding: 0 12px; }
.ws-invite-foot .btn-primary { height: 40px; }
.ws-invite-hint { font-size: var(--t-xs); display: inline-flex; align-items: flex-start; gap: 5px; margin: 0; }
.ws-sub { font-size: var(--t-sm); margin: var(--s5) 0 var(--s2); color: var(--ink); }
.ws-pending-list { margin-top: var(--s2); }
/* Teams-trial contact prompt (informational, not an error). */
.ws-trial-alert {
  display: flex; align-items: flex-start; gap: var(--s2);
  background: var(--seal-wash); border: 1px solid color-mix(in srgb, var(--seal) 30%, var(--line));
  color: var(--ink); border-radius: var(--r-control); padding: var(--s3) var(--s4); margin-bottom: var(--s4);
}
.ws-trial-alert .lucide { color: var(--seal); flex: none; margin-top: 2px; }
.ws-trial-alert a { color: var(--seal); font-weight: 700; }
/* Admin users table: badge for a user who's a non-owner member of a team. */
.member-team-badge {
  display: inline-flex; align-items: center; gap: 3px; vertical-align: middle;
  margin-inline-start: 5px; padding: 1px 8px; border-radius: 999px;
  font-size: var(--t-xs); font-weight: 600; white-space: nowrap;
  background: var(--seal-wash); color: var(--seal);
  border: 1px solid color-mix(in srgb, var(--seal) 25%, var(--line));
}
.member-team-badge.role-admin { background: var(--accent-wash); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 25%, var(--line)); }
.member-team-badge .lucide { flex: none; }

/* ---- Admin workspace plan list ---- */
.ws-admin-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.ws-admin-item + .ws-admin-item { border-top: 1px solid var(--line); }
.ws-admin-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); cursor: pointer; }
.ws-admin-row:hover { background: var(--paper); }
.ws-admin-caret { color: var(--ink-soft); flex: none; transition: transform .15s ease; }
.ws-admin-row[aria-expanded="true"] .ws-admin-caret { transform: rotate(180deg); color: var(--accent); }
.ws-admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ws-admin-owner { font-weight: 700; color: var(--ink); }
.ws-admin-meta { font-size: var(--t-xs); display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ws-admin-meta .lucide { vertical-align: middle; }
.ws-on { color: var(--ok); font-weight: 700; }
/* 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); }
.ws-admin-detail { padding: var(--s3) var(--s5) var(--s4); background: var(--paper); border-top: 1px dashed var(--line); }
.ws-team-list { list-style: none; margin: 0 0 var(--s3); padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ws-team-list li { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); }
.ws-team-email { flex: 1; min-width: 0; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.role-ic { flex: none; display: inline-flex; }
.role-owner { color: var(--seal); }
.role-admin { color: var(--accent-ink); }
.role-member { color: var(--ink-soft); }
.invited-chip { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: var(--t-xs); color: var(--check); background: var(--check-wash); padding: 1px 8px; border-radius: 999px; }
.ws-team-list li.is-invited .ws-team-email { color: var(--ink-soft); }
.ws-seat-form { display: flex; align-items: center; gap: var(--s2); }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.section-title { margin: var(--s6) 0 var(--s4); display: flex; align-items: baseline; gap: var(--s3); }
.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-summary { margin: var(--s3) 0 0; color: var(--ink); }
/* Key-facts strip under the summary — the real cards' compact inline facts
   (label: value), wrapping so the card stays its normal height. Middots keep
   each fact distinct. */
.fitcard-keyfacts { margin-top: var(--s3); display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s3); font-size: var(--t-sm); color: var(--ink-soft); }
.fitcard-keyfacts span { display: inline-flex; align-items: center; gap: 5px; }
.fitcard-keyfacts b { color: var(--ink); font-weight: 700; }
.fitcard-keyfacts .kf-sep { color: var(--line); }
.fitcard-keyfacts a { color: var(--seal); font-weight: 700; }
.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; }
.saved-chip { border-color: var(--accent); background: rgba(232, 101, 13, 0.10); color: var(--accent-ink); }

/* ---------- Admin tabs ---------- */
.admin-tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line);
  margin: var(--s4) 0; }
.admin-tab { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0;
  border-bottom: 2px solid transparent; padding: var(--s3) var(--s4); margin-bottom: -1px;
  font: inherit; font-weight: 500; color: var(--ink-soft); cursor: pointer; }
.admin-tab:hover { color: var(--ink); }
.admin-tab.is-active { color: var(--accent-ink); border-bottom-color: var(--accent); }
.tab-panel[hidden] { display: none; }
.tab-panel > .section-title:first-child { margin-top: 0; }
/* Client-sorted admin tables */
.sortable-table th.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable-table th.th-sort:hover { color: var(--accent-ink); }
.sortable-table th.th-sort.sorted::after { content: "▾"; font-size: .7em; margin-inline-start: 4px; }
.sortable-table th.th-sort.sorted[data-dir="asc"]::after { content: "▴"; }

/* ---------- Admin feature flags ---------- */
.admin-hint { margin-bottom: var(--s3); font-size: var(--t-sm); }
.flag-row { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.flag-row:first-of-type { border-top: 0; }
.flag-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.flag-label { font-weight: 600; }
.flag-info .muted { font-size: var(--t-sm); }
/* Collapsible group cards. Same <details> idiom as the profile settings, so the
   two admin-ish surfaces read the same way. */
.flag-group { border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--surface); overflow: hidden; margin-block-end: var(--s3); }
.flag-group + .flag-group { margin-block-start: 0; }
.flag-group > summary { display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s4); cursor: pointer; list-style: none;
  font-weight: 600; user-select: none; }
.flag-group > summary::-webkit-details-marker { display: none; }
.flag-group > summary::marker { content: ""; }
.flag-group > summary:hover { background: var(--paper); }
.flag-group > summary:focus-visible { outline: 2px solid var(--seal); outline-offset: -2px; }
.fg-chev { flex: 0 0 auto; color: var(--ink-soft); transition: transform .15s ease; }
.flag-group[open] .fg-chev { transform: rotate(90deg); }
.fg-name { flex: 1 1 auto; }
/* Count as a quiet pill, so the header reads name-first and the number is a
   detail rather than competing with it. */
.fg-count { flex: 0 0 auto; min-width: 1.5rem; text-align: center;
  padding: 1px 7px; border-radius: 999px; background: var(--paper);
  color: var(--ink-soft); font-size: var(--t-xs); font-weight: 600;
  font-variant-numeric: tabular-nums; }
.flag-group[open] > summary { border-block-end: 1px solid var(--line); }
/* Rows live inside the card now: the card's border is the only outer rule. */
.flag-group .flag-row { padding-inline: var(--s4); border-top: 1px solid var(--line); }
.flag-group .flag-row:first-of-type { border-top: 0; }
/* RTL: the chevron points into the text, so it flips with the writing mode. */
[dir="rtl"] .fg-chev { transform: scaleX(-1); }
[dir="rtl"] .flag-group[open] .fg-chev { transform: scaleX(-1) rotate(-90deg); }
/* Compact toggle switch (replaces the bulky checkbox + save button). */
.switch { position: relative; flex: none; cursor: pointer; line-height: 0; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track { display: inline-block; width: 40px; height: 22px; border-radius: 999px;
  background: var(--line); transition: background .15s; position: relative; }
.switch-track::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: inset-inline-start .15s; }
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { inset-inline-start: 20px; }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--seal); outline-offset: 2px; }

/* ---------- Dashboard unlock banner (flagged) ---------- */
.unlock-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4);
  margin-bottom: var(--s5); padding: var(--s3) var(--s4);
  border: 1px solid var(--accent); border-radius: var(--r-card); background: var(--accent-wash); }
.ub-title { display: inline-flex; align-items: center; gap: 6px; font-weight: 700;
  font-size: var(--t-sm); color: var(--accent-ink); }
.ub-title .ic { color: var(--accent); }
.ub-items { display: flex; flex-wrap: wrap; gap: 6px; }
.ub-item { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--accent); background: var(--surface); font-size: var(--t-sm); font-weight: 600;
  color: var(--ink); transition: background .15s ease, color .15s ease; }
.ub-item:hover { background: var(--accent); color: #fff; text-decoration: none; }
.ub-item .ub-count { font-family: var(--font-display); color: var(--accent); }
.ub-item:hover .ub-count { color: #fff; }

/* 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); } }

/* Browse: hidden rows */
.row-hidden { opacity: .58; }
.row-hidden td { background: var(--paper); }
.row-actions { white-space: nowrap; }
.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; }
}
@media (min-width: 781px) and (max-width: 900px) {
  .demo-body .row-actions .btn-label { display: inline; }
}
.hidden-chip { background: var(--paper); border-color: var(--line); 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); }
.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); }
/* Bid-prep note: attach-at-submission items (past projects, procedural docs) —
   informational, quieter than the met/verify rows and outside the verdict. */
.rd-prep { 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-prep .ic { flex: none; margin-top: 2px; color: var(--ink-soft); }
/* Per-level accent: the inline-start rule + badge + bar fill carry the colour. */
.rd-ready { border-inline-start-color: var(--ok); }
.rd-ready .rd-badge, .rd-ready .rd-badge .ic { color: var(--ok); }
.rd-ready .rd-bar > span { background: var(--ok); }
.rd-almost { border-inline-start-color: var(--check); }
.rd-almost .rd-badge, .rd-almost .rd-badge .ic { color: var(--check); }
.rd-almost .rd-bar > span { background: var(--check); }
.rd-blocked { border-inline-start-color: var(--bad); }
.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 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); } }

/* Dashboard stagger-in */
.fade-rise { opacity: 0; transform: translateY(8px); animation: fadeRise .4s ease forwards; }
@keyframes fadeRise { to { opacity: 1; transform: none; } }

/* ---------- Page head ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); flex-wrap: wrap; }
/* The title block keeps the row to itself: when the toolbar (Stage + Sort on UK)
   can't fit beside a comfortable title width, it wraps to its own line rather
   than squeezing "Tenders that fit you" onto two lines. Capped at 100% so on a
   phone the heading just goes full-width (no horizontal overflow) and the
   toolbar — which wraps its own groups — drops underneath. */
.page-head-main { flex: 0 1 auto; min-width: min(100%, 24rem); }
.page-sub { margin: var(--s2) 0 0; font-size: var(--t-sm); }

/* Sort toggle (segmented control) */
.dash-toolbar { display: flex; align-items: center; gap: var(--s4) calc(var(--s4) + 20px); flex-wrap: wrap; }
.sort-toggle { display: inline-flex; align-items: center; gap: var(--s2); flex-shrink: 0; }
.sort-label { display: inline-flex; align-items: center; gap: 3px; font-size: var(--t-xs); color: var(--ink-soft); font-weight: 500; }
.sort-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: 2px; }
.sort-seg .sort-opt {
  padding: 3px 10px; border-radius: 999px;
  color: var(--ink-soft); font-size: var(--t-xs); font-weight: 600; line-height: 1.4;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.sort-seg .sort-opt:hover { color: var(--ink); text-decoration: none; }
.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); }
}

.match-list { display: flex; flex-direction: column; gap: var(--s5); }
/* Save-from-matches: the card swipes left and fades, then collapses so the list
   closes the gap. Applied to the .fade-rise wrapper around each card. */
.match-list .fade-rise.is-swiping {
  transition: transform .34s ease, opacity .34s ease;
  transform: translateX(-115%); opacity: 0; pointer-events: none;
}
.match-list .fade-rise.is-removing {
  transition: max-height .26s ease, margin .26s ease, opacity .26s ease;
  max-height: 0 !important; margin: 0 !important; opacity: 0; overflow: hidden;
}
/* Disappearing confirmation toast (e.g. "moved to saved list"). */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px);
  z-index: 1000; max-width: 90vw;
  background: var(--ink); color: #fff; font-size: var(--t-sm); font-weight: 500;
  padding: 10px 18px; border-radius: 999px; box-shadow: 0 6px 24px rgb(28 43 51 / 0.28);
  display: inline-flex; align-items: center; gap: 8px;
  opacity: 0; transition: opacity .25s ease, transform .25s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast .ic { color: var(--ok); display: inline-flex; }
@media (prefers-reduced-motion: reduce) {
  .match-list .fade-rise.is-swiping, .match-list .fade-rise.is-removing, .toast { transition: none; }
}

/* Dashboard is a focused work queue — keep it to a comfortable reading column. */
.work-queue { max-width: 760px; margin-inline: auto; }
.work-queue .fitcard-title { font-size: var(--t-lg); }
.work-queue .fitcard-summary { max-width: 60ch; }

/* ---------- Tables (browse / admin) ---------- */
/* overflow must stay visible (not auto) or it becomes a scroll container and
   the page-level sticky <thead> stops working. The 5-column table fits the
   container at desktop widths; mobile switches to the card layout below. */
.table-wrap { overflow: visible; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }

/* Pagination */
.pager { display: flex; align-items: center; justify-content: center; gap: var(--s3); margin-top: var(--s5); flex-wrap: wrap; }
.pager-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px var(--s3); border-radius: var(--r-control); border: 1px solid var(--line); color: var(--ink); font-size: var(--t-sm); font-weight: 600; }
.pager-btn:hover { background: var(--paper); text-decoration: none; }
.pager-btn.is-disabled { color: var(--ink-soft); opacity: .5; pointer-events: none; }
/* RTL: "הקודם" (prev) points right, "הבא" (next) points left. The chevron icon
   points down by default — rotate it to horizontal arrows. */
/* Down-chevron rotated to a horizontal arrow. RTL: prev → right ›, next → left ‹.
   LTR mirrors it: prev → left ‹, next → right ›. */
.pager-prev { transform: rotate(-90deg); }
.pager-next { transform: rotate(90deg); }
[dir="ltr"] .pager-prev { transform: rotate(90deg); }
[dir="ltr"] .pager-next { transform: rotate(-90deg); }
.pager-pages { display: inline-flex; align-items: center; gap: 2px; }
.pager-num { min-width: 30px; text-align: center; padding: 6px 8px; border-radius: var(--r-control); color: var(--ink-soft); font-size: var(--t-sm); font-weight: 600; }
.pager-num:hover { background: var(--paper); color: var(--ink); text-decoration: none; }
.pager-num.is-current { background: var(--accent); color: #fff; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
/* Locked column widths (via the colgroup) so expanding a row never reflows the
   table; the actions column is sized to fit 'למקור המכרז' + icons on one line.
   Long detail tokens break so the detail cell can't widen anything either. */
table.data.tenders-table { table-layout: fixed; }
/* break-word (not anywhere): only chop a token that truly can't fit; normal
   multi-word text still wraps at spaces, so values never split mid-word. */
.t-detail, .t-detail * { overflow-wrap: break-word; }
table.data th, table.data td { padding: var(--s3) var(--s4); text-align: start; border-bottom: 1px solid var(--line); vertical-align: middle; }
/* Pin the column headers below the sticky topbar (~61px) while scrolling a
   long table; a bottom border keeps them legible over the rows beneath. */
table.data thead th { position: sticky; top: 64px; z-index: 20; background: var(--paper); color: var(--ink-soft); font-weight: 700; font-size: var(--t-xs); box-shadow: inset 0 -1px 0 var(--line); }
table.data th.sortable { padding: 0; }
table.data th.sortable a {
  display: flex; align-items: center; gap: 4px; padding: var(--s3) var(--s4);
  color: inherit; text-decoration: none; transition: color .12s;
}
table.data th.sortable a:hover { color: var(--ink); text-decoration: none; background: var(--surface); }
table.data th.sort-active a { color: var(--accent-ink); }
.sort-arrow { transition: transform .12s ease; opacity: .9; }
.sort-arrow.asc { transform: rotate(180deg); }
table.data tbody tr:hover { background: var(--paper); }
table.data tbody tr:last-child td { border-bottom: none; }
/* Buyer/publisher names can be very long ("The Common Services Agency (more
   commonly known as …) (PSD Scotland)"); the fixed-layout column would wrap and
   bloat the row. Keep it to one line with an ellipsis — the full name shows in
   the title tooltip and in the expanded row. */
table.data.tenders-table td.t-pub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-expired { opacity: .55; }
/* overflow-wrap: a buyer occasionally publishes a bare URL as the title (see
   app/notice_title.py). An unbroken string offers no wrap opportunity, so
   max-width alone can't contain it and the cell overruns the table. The title
   guard fixes the data going forward; this keeps the layout safe regardless. */
.t-title { font-weight: 500; color: var(--ink); max-width: 46ch; overflow-wrap: anywhere; }
/* Discriminator for batch-published notices sharing one title (see
   app/notice_variant.py). Secondary to the title, indented past the caret. */
.t-variant {
  font-size: .82em; color: var(--muted); max-width: 46ch; overflow-wrap: anywhere;
  margin-top: 2px; padding-inline-start: 20px; line-height: 1.35;
}
.status-dot { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.status-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-soft); }
.status-dot.ok::before { background: var(--ok); }
.status-dot.failed::before { background: var(--bad); }
.status-dot.running::before { background: var(--check); }

/* ---------- Admin stats ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s4); }
.stat-card { padding: var(--s5); }
.stat-card.stat-alert { border-color: var(--bad); background: var(--bad-wash); }
.stat-label { color: var(--ink-soft); font-size: var(--t-sm); }
.stat-value { font-family: var(--font-display); font-size: var(--t-lg); margin-top: 4px; }
.stat-flag { color: var(--bad); font-size: var(--t-xs); margin-top: 6px; display: flex; align-items: center; gap: 4px; }
.err { font-size: var(--t-xs); }
form.inline { display: inline; }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: var(--s7) var(--s5); color: var(--ink-soft); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-card); }
.empty h3 { color: var(--ink); margin-bottom: var(--s2); }

/* Post-onboarding "matching in progress" loading state on the dashboard. */
.match-loading { text-align: center; padding: var(--s7) var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.match-loading h3 { color: var(--ink); margin: var(--s4) 0 var(--s2); }
.match-loading p { margin: 0; }
.match-loading-spin {
  display: inline-block; width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--seal-wash); border-top-color: var(--seal);
  animation: matchSpin .8s linear infinite;
}
@keyframes matchSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .match-loading-spin { animation-duration: 2s; } }

/* ---------- Public (SEO) pages: browse + tender detail ---------- */
.crumbs { font-size: var(--t-sm); color: var(--ink-soft); margin-bottom: var(--s3); }
.crumbs a { color: var(--accent-ink); }
.crumb-sep { margin-inline: 6px; color: var(--ink-soft); }
.cat-nav { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }
.cat-chip { padding: 5px var(--s3); border-radius: 999px; border: 1px solid var(--line); font-size: var(--t-sm); color: var(--ink); background: var(--surface); }
.cat-chip:hover { border-color: var(--seal); text-decoration: none; }
.cat-chip.is-active { background: var(--seal); border-color: var(--seal); color: #fff; }
.pub-link { color: var(--ink); font-weight: 500; }
.pub-link:hover { color: var(--accent-ink); }
.cat-cell { color: var(--ink-soft); }
.pub-note { font-size: var(--t-xs); margin-top: var(--s3); }
.pub-cta { text-align: center; margin: var(--s7) auto 0; max-width: 600px; padding: var(--s6) var(--s5); background: var(--seal-wash); border-radius: var(--r-card); }
.pub-cta h2 { margin-bottom: var(--s2); }
.pub-cta p { color: var(--ink-soft); margin-bottom: var(--s4); }
.pub-tender-head h1 { font-size: var(--t-lg); }
.pub-tender-meta { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s2); color: var(--ink-soft); font-size: var(--t-sm); }
.pub-tender-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.pub-tender-body { display: grid; grid-template-columns: 1fr 300px; gap: var(--s5); margin-top: var(--s5); align-items: start; }
.pub-tender-summary { font-size: var(--t-md); line-height: 1.6; }
.pub-tender-side { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
@media (max-width: 720px) { .pub-tender-body { grid-template-columns: 1fr; } }
.pub-gate { text-align: center; padding: var(--s6) var(--s5); background: var(--seal-wash); border: 1px solid var(--line); border-radius: var(--r-card); }
.pub-gate-ic { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--seal); margin-bottom: var(--s3); }
.pub-gate h2 { font-size: var(--t-md); margin-bottom: var(--s2); }
.pub-gate p { color: var(--ink-soft); margin-bottom: var(--s4); }
.pub-gate-alt { font-size: var(--t-sm); margin-top: var(--s3); margin-bottom: 0; }
.pub-gate-alt a { color: var(--accent-ink); }
/* 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); }

/* Launch offer banner under the header (landing only). Dark & premium — slim
   navy bar, the offer glowing in orange, a sleek pill CTA. */
.promo-banner { background: linear-gradient(100deg, #14202A 0%, #1E2E3A 100%);
  color: #E9EDEA; border-bottom: 1px solid rgba(255,255,255,.08); }
.promo-banner-inner { max-width: var(--maxw); margin-inline: auto; padding: 9px 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: #E9EDEA; }
.promo-badge { display: inline-flex; align-items: center; gap: 5px; flex: none;
  background: rgba(255,255,255,.10); color: #fff; font-weight: 700; font-size: var(--t-xs);
  padding: 3px 10px; border-radius: 999px; letter-spacing: .2px; }
.promo-badge .lucide { color: var(--accent); }
.promo-msg b { color: #FF8A3D; font-weight: 800; text-shadow: 0 0 16px rgb(255 138 61 / .35); }
.promo-sub { color: rgb(233 237 234 / .6); }
.promo-banner-cta { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap;
  background: var(--accent); color: #fff; font-weight: 700; border-radius: 999px;
  padding: 5px 14px; box-shadow: 0 2px 8px rgb(232 101 13 / .35);
  transition: background .12s ease, transform .12s ease; }
.promo-banner-cta:hover { background: #F4761E; color: #fff; text-decoration: none; transform: translateY(-1px); }

.facet-block { margin-top: var(--s6); }
.facet-block h2 { display: flex; align-items: center; gap: 6px; font-size: var(--t-md); margin-bottom: var(--s3); }
.facet-block h2 .lucide { color: var(--seal); }
.pub-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.pub-links a { font-size: var(--t-sm); color: var(--ink); }
.pub-links a:hover { color: var(--accent-ink); }
/* T-ILSEO: public authority (publisher) page + directory hub */
.pub-links-az a { color: var(--ink-soft); }
.arch-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.arch-list li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--line); }
.arch-title { color: var(--ink-soft); }
.arch-month { flex: none; white-space: nowrap; font-size: var(--t-xs); }
.disclaimer { margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid var(--line); font-size: var(--t-xs); max-width: 760px; }
/* T-ILSEO2: public live-sample rows on the publisher page */
.pub-sample .ps-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.ps-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.ps-title { font-weight: 500; color: var(--ink); flex: 1 1 100%; }
.ps-meta { display: inline-flex; align-items: center; gap: var(--s2); }
.ps-locked { color: var(--ink-soft); font-size: var(--t-xs); }
/* T-ILSEO: public footer city links + non-affiliation disclaimer (IL) */
.footer-cities { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); font-size: var(--t-xs); }
.footer-cities-lead { color: var(--ink-soft); font-weight: 500; }
.footer-cities a { color: var(--ink-soft); }
.footer-cities a:hover { color: var(--ink); }
.footer-cities-all { font-weight: 500; }
.footer-disclaimer { margin-top: var(--s3); font-size: var(--t-xs); color: var(--ink-soft); max-width: 900px; }
/* T-ILSEO: landing "מכרזים לפי רשות" section */
.lp-authorities .lp-shell { text-align: center; }
.lp-auth-chips { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); justify-content: center; margin-top: var(--s4); }
.lp-auth-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px var(--s3); border: 1px solid var(--line); border-radius: 999px; font-size: var(--t-sm); color: var(--ink); background: var(--surface); }
.lp-auth-chip:hover { border-color: var(--seal); color: var(--seal); }
.lp-auth-all { display: inline-block; margin-top: var(--s4); font-weight: 500; color: var(--seal); }
/* T-ILSEO2: landing lookup teaser (search an authority, no login) + hub search */
.lp-lookup-il .lp-shell { text-align: center; }
.lp-lookup-card { max-width: 680px; margin: 0 auto; padding: var(--s6) var(--s5); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); }
.lp-lookup-form { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; margin-top: var(--s4); }
.lp-lookup-box { position: relative; flex: 1 1 320px; max-width: 460px; text-align: start; }
.lp-lookup-box input { width: 100%; min-height: 46px; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); font-size: var(--t-md); }
.lp-lookup-box input:focus { outline: 2px solid var(--seal); outline-offset: 1px; border-color: var(--seal); }
.lp-lookup-list { position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-control); box-shadow: 0 8px 28px rgba(0,0,0,.14); max-height: 320px; overflow-y: auto; text-align: start; }
.lp-lookup-list li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: 8px var(--s3); border-radius: 6px; cursor: pointer; font-size: var(--t-sm); }
.lp-lookup-list li.is-active, .lp-lookup-list li:hover { background: var(--paper); }
.lp-auth-chip-all { border-color: color-mix(in srgb, var(--seal) 40%, transparent); color: var(--seal); font-weight: 500; }
.hub-search { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0 var(--s2); }
.hub-search input { flex: 1 1 320px; min-height: 44px; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); font-size: var(--t-md); }
.hub-search input:focus { outline: 2px solid var(--seal); outline-offset: 1px; border-color: var(--seal); }
.faq { margin-top: var(--s7); max-width: 760px; }
.faq h2 { font-size: var(--t-lg); margin-bottom: var(--s4); }
.faq details { border-bottom: 1px solid var(--line); padding: var(--s3) 0; }
.faq summary { font-weight: 600; cursor: pointer; }
.faq details p { color: var(--ink-soft); margin-top: var(--s2); line-height: 1.6; }
.footer-nav a { color: var(--ink-soft); font-size: 12px; }
.footer-nav a:hover { color: var(--accent-ink); }

/* ---------- Error page (404 / fallback) ---------- */
.errpage { text-align: center; max-width: 520px; margin-inline: auto; padding: var(--s8) var(--s5); }
.errpage-code { font-family: var(--font-display); font-size: 96px; font-weight: 800; line-height: 1; color: var(--seal); opacity: .22; }
.errpage h1 { margin: var(--s2) 0; }
.errpage p { margin-bottom: var(--s5); }
.errpage-actions { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; }

/* ---------- Wizard ---------- */
.wizard { max-width: 640px; margin-inline: auto; }
.wizard > h1 { margin-bottom: var(--s4); }
.steps { list-style: none; display: flex; gap: var(--s2); padding: 0; margin: 0 0 var(--s5); flex-wrap: wrap; counter-reset: step; }
.step-pill { counter-increment: step; display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--ink-soft); padding: 4px 0; flex: 1; min-width: 90px; cursor: pointer; }
.step-pill:hover { color: var(--ink); }
.step-pill:hover::before { border-color: var(--seal); }
.step-pill:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; border-radius: var(--r-control); }
.step-pill::before { content: counter(step); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); font-weight: 700; background: var(--surface); flex: none; }
.step-pill.active { color: var(--seal); }
.step-pill.active::before { background: var(--seal); color: #fff; border-color: var(--seal); }
.step-pill.current { color: var(--ink); font-weight: 700; }
.wizard-step { padding: var(--s5); }
.wizard-step h2 { font-size: var(--t-md); margin-bottom: var(--s4); }
.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); }
.wizard-nav { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s4); }
.preview-note { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: var(--t-sm); margin: var(--s5) 0 var(--s2); }
.preview-note .lucide { color: var(--ok); }
.preview-card { border-style: dashed; }

/* ---------- Auth ---------- */
.auth-wrap { min-height: calc(100vh - 130px); display: grid; place-items: center; padding: var(--s5); }
.auth-card { width: 100%; max-width: 400px; padding: var(--s6); }
.auth-card h1 { font-size: var(--t-lg); margin-bottom: var(--s5); }
/* "Continue with Google" — white button with the Google mark, per brand guidance. */
.btn-google {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s3);
  background: #fff; color: #3c4043; border: 1px solid var(--line);
  font-weight: 600;
}
.btn-google:hover { background: #f7f8f8; border-color: var(--ink-soft); text-decoration: none; }
.btn-google .g-logo { flex: none; }
/* "or" divider between Google sign-in and the email form. */
.auth-sep { display: flex; align-items: center; gap: var(--s3); margin: var(--s5) 0; color: var(--ink-soft); font-size: var(--t-sm); }
.auth-sep::before, .auth-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- Settings ---------- */
.settings-block { padding: var(--s5); margin-bottom: var(--s4); }
.settings-block h2 { font-size: var(--t-md); margin-bottom: var(--s2); }
.settings-intro { font-size: var(--t-sm); color: var(--ink-soft); margin-bottom: var(--s4); }
.settings-readonly-note { display: flex; align-items: center; gap: 6px; }

/* UK qualification profile (/settings/qualification). The global
   input{width:100%} rule stretches each checkbox full-width and drops its label
   onto the next line — reset the checkbox to native size and lay each
   certification out as one left-aligned checkbox+label row. */
.qual-checks { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s4); }
.qual-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--t-sm); color: var(--ink); }
.qual-check input { flex: none; width: auto; margin: 0; padding: 0; }
.qual-check input:disabled { cursor: default; }
/* Stacked label + input for Constructionline tier and the insurance fields; the
   block margin also separates the tier input from the checkbox rows above it. */
.qual-field { display: block; margin-bottom: var(--s3); }
.qual-field > span { display: block; font-size: var(--t-xs); color: var(--ink-soft); font-weight: 600; margin-bottom: 4px; }
.qual-field > input { max-width: 340px; }

/* UK qualification-profile callout on /settings: a card-styled <a>. Anchors are
   inline by default, so its .settings-block block padding bled over the profile
   card beneath it — make it a flex row that flows normally (icon · text · arrow)
   and its margin-bottom now separates it cleanly. */
.qual-link { display: flex; align-items: center; gap: var(--s3); text-decoration: none; color: var(--ink); }
.qual-link > span { flex: 1; font-size: var(--t-sm); color: var(--ink-soft); }
.qual-link .lucide { flex: none; color: var(--ink-soft); }
.qual-link:hover { border-color: var(--seal); }
.qual-link:hover .lucide:last-child { color: var(--seal); }

/* Empty-state placeholder (frameworks, content bank). A min-height keeps a short
   "nothing here yet" message from collapsing the page and floating the footer up
   into the middle of the viewport. */
.empty-state {
  display: flex; align-items: center; justify-content: center;
  min-height: 240px; padding: var(--s6); border-radius: var(--r-card);
  border: 1px dashed var(--line); background: var(--paper);
  color: var(--ink-soft); font-size: var(--t-sm); text-align: center;
}

/* Frameworks list (/frameworks): proper cards, not bare bullets. */
.fw-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.fw-item { padding: var(--s4) var(--s5); }
.fw-head { display: flex; align-items: center; gap: var(--s3); }
.fw-title { flex: 1; min-width: 0; font-weight: 600; color: var(--ink); }
.fw-meta { margin-top: 6px; font-size: var(--t-sm); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.fw-kind { font-weight: 600; color: var(--ink); }
/* Membership badge — green when open to join, muted when closed. */
.fw-badge {
  flex: none; 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);
}
.fw-badge.fw-open { border-color: var(--ok); background: var(--ok-wash); color: var(--ok); }
.fw-badge.fw-closed { background: var(--paper); color: var(--ink-soft); }
/* A closed framework under "you could join" is de-emphasised so it reads apart. */
.fw-item.is-closed { opacity: .72; }
.fw-item.is-closed .fw-title { color: var(--ink-soft); }

/* 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; }
}

/* The profile form is wrapped in a <fieldset> so we can disable it wholesale for
   non-admins; strip the element's native chrome so layout is unchanged. */
.settings-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.settings-fieldset[disabled] { opacity: .75; }
.stacked .field { margin-bottom: var(--s4); }
/* Grouped subsections inside the long profile form, divided by a hairline. */
.settings-group { border-top: 1px solid var(--line); padding-top: var(--s4); margin-top: var(--s4); }
.settings-group:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.settings-group:last-of-type { margin-bottom: var(--s4); }
.settings-subhead { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm);
  font-weight: 700; color: var(--ink); margin-bottom: var(--s3); }
.settings-subhead .lucide { color: var(--seal); flex: none; }
/* "Advanced matching" is a native <details>: make its summary read as an
   expandable menu — pointer, no default triangle, a chevron that rotates open. */
.settings-advanced > summary { cursor: pointer; list-style: none; margin-bottom: 0; }
.settings-advanced[open] > summary { margin-bottom: var(--s3); }
.settings-advanced > summary::-webkit-details-marker { display: none; }
.settings-advanced > summary::marker { content: ""; }
.settings-advanced > summary:hover { color: var(--seal); }
.settings-advanced > summary .chev { margin-inline-start: auto; color: var(--ink-soft); transition: transform .18s ease; }
.settings-advanced[open] > summary .chev { transform: rotate(180deg); }

/* ── UK profile accordion — one card per section, expand to fill ── */
.pf-lead { color: var(--ink-soft); font-size: var(--t-sm); margin: 0 0 var(--s4); max-width: 62ch; }
.pf-accordion { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s5); }
.pf-card { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
.pf-card[open] { border-color: var(--seal); }
.pf-sum { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); cursor: pointer; list-style: none; }
.pf-sum::-webkit-details-marker { display: none; }
.pf-sum::marker { content: ""; }
.pf-sum:hover { background: var(--paper); }
.pf-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--paper); color: var(--seal); }
.pf-ic .lucide { color: inherit; }
.pf-card[open] .pf-ic { background: var(--seal); color: #fff; }
.pf-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pf-tt b { font-size: var(--t-sm); font-weight: 700; color: var(--ink); }
.pf-tt small { color: var(--ink-soft); font-size: var(--t-xs); }
.pf-sum > .chev { flex: none; color: var(--ink-soft); transition: transform .18s ease; }
.pf-card[open] > .pf-sum > .chev { transform: rotate(180deg); }
.pf-body { padding: var(--s4); border-top: 1px solid var(--line); }
.pf-subhead { font-weight: 700; font-size: var(--t-sm); color: var(--ink); margin: var(--s4) 0 var(--s2); }
.pf-subhead .muted { font-weight: 400; }

/* £-amount field with one-tap preset chips (real cover levels are large millions,
   so a spinner would be dozens of clicks). */
.money-field { margin-bottom: var(--s4); }
.money-field > .field-label { display: block; margin-bottom: 6px; }
.money-row { display: flex; align-items: stretch; width: 100%; max-width: 260px; border: 1px solid var(--line); border-radius: var(--r-control); overflow: hidden; background: var(--surface); }
.money-row:focus-within { border-color: var(--seal); }
.money-pre { display: grid; place-items: center; padding: 0 10px; background: var(--paper); color: var(--ink-soft); font-weight: 600; }
.money-input { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; flex: 1; min-width: 0; }
.money-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.money-chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); border-radius: 999px; padding: 4px 12px; font-size: var(--t-xs); font-weight: 600; cursor: pointer; transition: border-color .12s, color .12s, background .12s; }
.money-chip:hover { border-color: var(--seal); color: var(--seal); }
.money-chip.is-on { background: var(--seal); color: #fff; border-color: var(--seal); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
.checkgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--s2); }
.check { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.check input { width: auto; }
/* Inline control rows (digest toggle, change email): control + button on one
   line, button pinned to the end and vertically aligned with its control. */
.settings-row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.settings-row.align-end { align-items: flex-end; }
.settings-row .field { margin-bottom: 0; }
.settings-row .grow { flex: 1 1 220px; }
.settings-row .btn { margin-inline-start: auto; }
.settings-hint { font-size: var(--t-sm); color: var(--ink-soft); margin-bottom: var(--s3); }
@media (max-width: 720px) {
  .grid-2 { grid-template-columns: 1fr; }
  .settings-row .btn { margin-inline-start: 0; }
}

/* ---------- Filter bar (browse) ---------- */
/* Filters scroll away with the page so the table's own header can stay pinned
   (see table.data thead below). Both being sticky would overlap. */
.filterbar { background: var(--paper); padding-block: var(--s1); margin-bottom: var(--s3); }
/* Stacked sections: search row · divider · filter body · view scope. Kept tight
   vertically so the results table stays in view. */
.filterbar form { display: flex; flex-direction: column; gap: var(--s2); align-items: stretch; }
.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; }
.filterbar .search-box input { padding-block: 9px; }

/* View scope — instant-apply chips. Sits just above the results table with a
   divider rule so it reads as a control for the table, not part of the filters. */
.view-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2);
  margin-top: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line); }
.view-label { font-size: var(--t-xs); font-weight: 600; margin-inline-end: 2px; }

/* Filter body: the controls (basic grid + Advanced) fill the row; Apply/Clear sit
   on the right, vertically centred so it's clear they apply to *all* the filters —
   the visible ones and the Advanced ones. */
.filter-body { display: grid; grid-template-columns: minmax(0, 1fr) max-content;
  gap: var(--s4); align-items: stretch; }
.filter-actions { display: flex; flex-direction: column; justify-content: center;
  gap: var(--s2); }
.filter-actions .btn { width: 100%; justify-content: center; white-space: nowrap; }
/* Clear is secondary — a small, light text button, not a second heavy button. */
.filter-clear-btn { display: inline-flex; align-items: center; justify-content: center;
  gap: 4px; align-self: center; padding: 2px 8px; border: 0; background: none;
  color: var(--ink-soft); font: inherit; font-size: var(--t-xs); cursor: pointer; }
.filter-clear-btn:hover { color: var(--ink); }
.filter-clear-btn .lucide { width: 13px; height: 13px; }
.filter-controls { display: grid; gap: var(--s2); min-width: 0; }
/* Uniform-width fields: tight row gap (low bulk), roomier column gap (legible). */
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
  gap: var(--s1) var(--s4); align-items: end; }
.field-grid > .field, .field-grid > .multiselect { margin: 0; min-width: 0; }
@media (max-width: 680px) {
  .filter-body { grid-template-columns: 1fr; }
  .filter-actions { flex-direction: row; }
  .filter-actions .btn { flex: 1; }
}

/* Free-text search — full-width row above the filter dropdowns */
.search-row { display: flex; gap: var(--s2); width: 100%; align-items: center; margin-bottom: var(--s1); }
.search-box { position: relative; flex: 1; display: flex; align-items: center; }
.search-box .search-ic { position: absolute; inset-inline-start: var(--s3); color: var(--ink-soft); pointer-events: none; }
.search-box input {
  width: 100%; padding-block: 11px; padding-inline-start: 42px; padding-inline-end: 36px;
  font-size: var(--t-md); border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface);
}
.search-box input:focus { outline: 2px solid var(--seal); outline-offset: 1px; border-color: var(--seal); }
.search-clear { position: absolute; inset-inline-end: var(--s3); color: var(--ink-soft); display: inline-flex; padding: 0; border: 0; background: none; cursor: pointer; }
.search-clear:hover { color: var(--ink); }
.search-row .btn { padding: 11px var(--s4); flex: none; }
.filterbar .field > span { font-size: var(--t-xs); color: var(--ink-soft); }
.filterbar .actions { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.filter-check { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); }
.filter-check input { width: auto; }

/* 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-note { padding: 8px 10px 6px; margin-top: 2px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-soft); cursor: default; }
.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 {
  display: flex; align-items: baseline; gap: var(--s2);
  padding: 7px var(--s2); border-radius: 6px; cursor: pointer; font-size: var(--t-sm); line-height: 1.4;
}
.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; }
.tp-empty { padding: var(--s3); margin: 0; color: var(--ink-soft); font-size: var(--t-sm); text-align: center; }
.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; }

/* Compact "show" toggles (expired / hidden) — chip-style instead of long labels */
.show-toggles { display: inline-flex; align-items: center; gap: var(--s2); margin-inline-end: var(--s2); }
.show-label { font-size: var(--t-xs); color: var(--ink-soft); font-weight: 600; margin-inline-end: 2px; }
.chip-show { padding: 4px 10px; font-size: var(--t-xs); gap: 4px; }
.chip-show svg { vertical-align: -2px; }

/* ---------- Landing ---------- */
.hero { position: relative; overflow: hidden; background: var(--paper); border-bottom: 1px solid var(--line); }
/* Brand gradient glow stretched behind the hero — soft blueprint-blue + warm
   orange light, blurred. Sits beneath the content (z-index). */
.hero::before {
  content: ""; position: absolute; inset: -12% -6%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(46% 60% at 80% 8%, rgba(22, 85, 122, 0.30), transparent 70%),
    radial-gradient(42% 55% at 12% 40%, rgba(232, 101, 13, 0.22), transparent 72%),
    radial-gradient(48% 50% at 96% 88%, rgba(22, 85, 122, 0.16), transparent 72%);
  filter: blur(40px);
}
.hero-inner { position: relative; z-index: 1; max-width: var(--maxw); margin-inline: auto; padding: var(--s8) var(--s5);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: center; }
/* Nudge the hero copy column (rotating headline + demo button) up slightly. */
.hero-copy { transform: translateY(-10px); }
.hero-copy h1 { font-size: var(--t-2xl); line-height: 1.1; }
/* Rotating headline — items share one grid cell so the box sizes to the
   tallest line (no layout shift). Construction-themed "brick laying": JS splits
   each line into word blocks (.brick) that drop into place with a slight
   overshoot, staggered right-to-left; the outgoing line drops away first. */
.rotator { display: grid; }
.rot-item { grid-column: 1; grid-row: 1; }
/* Each word flies in from a scattered position (JS sets --tx/--ty/--rot per
   brick) and glides into place, staggered — the headline assembles itself. */
.brick {
  display: inline-block;
  opacity: 0;
  transform: translate(var(--tx, 0), var(--ty, -0.6em)) rotate(var(--rot, 0deg)) scale(.92);
  transition:
    opacity .63s ease,
    transform .92s cubic-bezier(.16, 1, .3, 1);    /* slow, smooth glide-and-settle */
  will-change: opacity, transform;
}
.rot-item.is-active .brick { opacity: 1; transform: none; }
.rot-item.is-leaving .brick {
  opacity: 0; transform: translateY(0.5em) scale(.96);
  transition-delay: 0s !important; transition-duration: .35s;
}
@media (prefers-reduced-motion: reduce) {
  .brick { transition: none; transform: none; }
  .rot-item.is-active .brick { opacity: 1; }
}
.hero-copy .lead { font-size: var(--t-md); color: var(--ink-soft); margin: var(--s4) 0 var(--s5); max-width: 30ch; }
.hero-cta { display: flex; gap: var(--s3); flex-wrap: wrap; }
/* 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; }

.strip { border-block: 1px solid var(--line); background: var(--surface); }
.strip-inner { max-width: var(--maxw); margin-inline: auto; padding: var(--s6) var(--s5);
  display: flex; align-items: flex-start; justify-content: center; gap: var(--s4); flex-wrap: wrap; }
.step { text-align: center; max-width: 220px; flex: 1 1 200px; }
.step-ic { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--seal-wash); color: var(--seal); margin-bottom: var(--s2); }
.step h3 { margin-bottom: 4px; }
.step p { color: var(--ink-soft); font-size: var(--t-sm); margin: 0; }
/* Top-aligned so every step's icon + title line up regardless of text length;
   nudge the connector down to sit at the icons' vertical centre. */
.step-arrow { color: var(--line); transform: rotate(90deg); margin-top: 14px; }

/* Live stats: a few honest, daily-updated counts under the hero. Kept slim and
   transparent — a quiet row that sits on the page, not a heavy coloured band. */
.stats-band { background: transparent; }
.stats-inner { max-width: 760px; margin-inline: auto; padding: calc(var(--s5) * .95) var(--s5) calc(var(--s4) * .95);
  display: flex; justify-content: center; flex-wrap: wrap; text-align: center; }
.stat { padding-inline: var(--s6); }
.stat + .stat { border-inline-start: 1px solid var(--line); }
.stat-num { display: block; font-family: var(--font-display); font-size: var(--t-lg);
  font-weight: 700; line-height: 1.05; color: var(--seal); }
.stat-label { display: block; margin-top: 5px; font-size: var(--t-xs); color: var(--ink-soft); }
@media (max-width: 560px) {
  .stat { flex-basis: 42%; padding-inline: var(--s3); }
  .stat + .stat { border-inline-start: 0; }
}

.coverage { background: var(--ink); color: #E9EDEA; }
.coverage-inner { max-width: var(--maxw); margin-inline: auto; padding: var(--s5);
  display: flex; align-items: center; gap: var(--s3); justify-content: center; text-align: center; font-size: var(--t-sm); }
.coverage b { color: #fff; font-weight: 700; }

.pricing { max-width: var(--maxw); margin-inline: auto; padding: var(--s7) var(--s5); }
.price-grid { display: flex; justify-content: center; margin-top: var(--s5); }
.price-card { position: relative; padding: var(--s6); max-width: 360px; width: 100%; text-align: start; }
/* Floating pill straddling the card's top edge — a clean, designed touch. */
.price-badge { position: absolute; top: 0; inset-inline: 0; margin-inline: auto; width: max-content;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-xs); font-weight: 700;
  color: #fff; background: var(--seal); border-radius: 999px; padding: 5px 14px;
  box-shadow: 0 6px 16px rgba(22, 85, 122, 0.28); letter-spacing: .01em; }
.price-badge .lucide { color: #fff; }
.price-name { color: var(--ink-soft); font-weight: 700; }
.price-amount { font-family: var(--font-display); font-size: var(--t-xl); margin: var(--s2) 0; }
.price-period { font-family: var(--font-body); font-size: var(--t-sm); color: var(--muted); font-weight: 500; }
.price-list { list-style: none; padding: 0; margin: var(--s4) 0; display: grid; gap: var(--s2); font-size: var(--t-sm); }
.price-list li { display: flex; align-items: center; gap: var(--s2); color: var(--ink); }
.price-list .lucide { color: var(--ok); }
.price-seats { display: flex; align-items: center; gap: var(--s2); margin: var(--s2) 0 var(--s3);
  padding: 8px 12px; border-radius: var(--r-control); background: var(--accent-wash);
  color: var(--accent-ink); font-weight: 700; font-size: var(--t-sm); }
.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; }
}

@media (max-width: 720px) {
  .hero-inner { grid-template-columns: 1fr; padding: var(--s6) var(--s4); gap: var(--s5); }
  .hero-copy h1 { font-size: var(--t-xl); }
}

/* ---------- 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);
}
/* Admin user-list email-verification badges. */
.verif-ok { color: var(--ok); font-weight: 700; }
.verif-no { color: var(--bad); font-weight: 700; cursor: help; }

.footer-links { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2) var(--s4); }
/* The legal links are the actual flex row — the parent's gap can't reach them
   (its only child is this nav), so space them here or they crowd together. */
.footer-legal { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); }
.footer-nav-link { color: var(--ink-soft); font-size: 12px; }
.footer-nav-link:hover { color: var(--accent-ink); }
.footer-meta { display: inline-flex; align-items: baseline; gap: 6px; }
.footer-rights { color: var(--ink-soft); font-size: var(--t-xs); }
.footer-contact-label { color: var(--ink-soft); font-weight: 500; }
.footer-contact { color: var(--ink); font-weight: 500; }
.footer-contact:hover { color: var(--accent-ink); text-decoration: underline; }
.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; }
}

@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); }
  .filterbar { position: static; }
}

/* ── Tenders table skeleton (async-load placeholder) ───────────────────── */
.skeleton-table { pointer-events: none; }
.skeleton-table thead th { color: var(--ink-soft); }
.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; }
}

/* Dashboard match-card skeleton (reuses .skel shimmer) */
.skel-card { pointer-events: none; }
.skel-card .skel { display: block; }
.skel-card .s-seal { width: 72px; height: 72px; border-radius: 50%; flex: none; }
.skel-card .s-l1 { height: 18px; width: 72%; }
.skel-card .s-l2 { height: 13px; width: 45%; margin-top: 10px; }
.skel-card .s-l3 { height: 12px; width: 92%; margin-top: 16px; }

/* ── Table footer: centered pager + page-size selector ─────────────────── */
.table-foot {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--s3); margin-top: var(--s5);
}
.table-foot .pager { margin-top: 0; }                 /* pager sits in the middle column */
.per-page {
  grid-column: 3; justify-self: end;
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--t-sm); white-space: nowrap;
}
.per-page select {
  padding: 6px var(--s3); border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--surface); color: var(--ink); font-size: var(--t-sm);
}
@media (max-width: 640px) {
  .table-foot { grid-template-columns: 1fr; justify-items: center; }
  .per-page { grid-column: 1; justify-self: center; }
}

/* ══ 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); }

.demo-banner {
  position: relative; overflow: hidden; width: auto; max-width: 100%; cursor: pointer; white-space: nowrap;
  margin-top: var(--s5); display: inline-flex; align-items: center; gap: var(--s2);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-control);
  padding: 9px var(--s4); padding-inline-start: calc(var(--s4) + 6px);
  color: var(--ink); font-weight: 700; font-size: var(--t-sm);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  animation: demo-banner-glow 3s ease-in-out infinite;
}
.demo-banner::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 5px; background: var(--accent);
}
.demo-banner:hover {
  transform: translateY(-2px); border-color: var(--accent); animation: none;
  box-shadow: 0 8px 20px rgb(28 43 51 / 0.12), 0 0 22px 3px rgb(232 101 13 / 0.30);
}
@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); }
}
.demo-banner:focus-visible { outline: 3px solid var(--seal); outline-offset: 3px; }

.demo-banner-ic {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff;
}
.demo-banner-arrow { display: inline-flex; color: var(--accent); transform: rotate(90deg); }   /* chevron → points (RTL) left */
.demo-banner:hover .demo-banner-arrow { animation: demo-nudge .7s ease-in-out infinite; }
@keyframes demo-nudge { 0%, 100% { transform: rotate(90deg) translateY(0); } 50% { transform: rotate(90deg) translateY(3px); } }

@media (prefers-reduced-motion: reduce) {
  .demo-banner { transition: none; animation: none; box-shadow: var(--shadow), 0 0 14px 0 rgb(232 101 13 / 0.2); }
  .demo-banner:hover { transform: none; }
}

/* Scrim dims + blurs the landing while the demo is open. */
body.demo-active { overflow: hidden; }
.demo-scrim {
  position: fixed; inset: 0; z-index: 190; background: rgb(28 43 51 / 0.5);
  opacity: 0; pointer-events: none; transition: opacity .45s ease;
  backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
}
body.demo-active .demo-scrim {
  opacity: 1; pointer-events: auto;
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}

/* Centered demo stage with margins (landing shows, dimmed, around the edges).
   The demo page assembles its OWN modules (brick effect) once loaded inside. */
.demo-stage {
  position: fixed; z-index: 200; inset: 6vh 6vw; border-radius: 16px; overflow: hidden;
  background: var(--paper); box-shadow: 0 30px 90px rgb(28 43 51 / 0.45);
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
/* The stage itself appears almost instantly — the brick assembly inside is the
   entrance, so it runs in parallel with the overlay rather than after it. */
body.demo-active .demo-stage { opacity: 1; pointer-events: auto; }
.demo-stage-iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (prefers-reduced-motion: reduce) {
  .demo-launch, .demo-scrim, .demo-stage { transition: none; }
  .demo-launch-eyebrow .pulse { animation: none; }
}

@media (max-width: 640px) {
  .demo-stage { inset: 0; border-radius: 0; }
  /* Landing launcher: centered under the (centered) hero text on phones.
     Small bottom gap so it reads as distinct from the tender example below. */
  .demo-banner { display: flex; width: fit-content; max-width: 100%; margin-inline: auto; margin-bottom: 3px; }
}

/* ── Demo chrome (inside the iframe) ── */
.demo-body { background: var(--paper); }
/* Bricks-to-assemble start hidden so a cold load never flashes them in place
   first; the (inline) assemble script reveals them by dropping this class. */
.demo-anim [data-brick] { opacity: 0; }
.demo-topbar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s5); background: var(--surface); border-bottom: 1px solid var(--line);
}
/* Brand in the demo bar — same look as the real site's top nav. */
.demo-brand { flex: none; }
.demo-topbar-fill { flex: 1; }
.demo-nav { display: flex; gap: var(--s2); flex: 1; }
.demo-nav a {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
  border-radius: var(--r-control); color: var(--ink-soft); font-weight: 500; font-size: var(--t-sm);
}
.demo-nav a:hover { background: var(--paper); color: var(--ink); }
.demo-nav a.active { background: var(--seal-wash); color: var(--seal); font-weight: 700; }
.demo-top-right { display: flex; align-items: center; gap: var(--s3); flex: none; }
.demo-profile { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--t-sm); }
.demo-switch { font-size: var(--t-xs); color: var(--seal); }
.demo-close {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 7px 12px; border-radius: var(--r-control);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); font-size: var(--t-sm);
}
.demo-close:hover { border-color: var(--bad); color: var(--bad); }

.demo-shell { padding: var(--s5); }
.demo-main { min-width: 0; max-width: 820px; margin-inline: auto; }

/* "This is a partial demo" ribbon, under the topbar on every demo screen. */
.demo-notice {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  padding: 10px var(--s5); font-size: var(--t-sm); color: var(--accent-ink);
  background: var(--accent-wash); border-bottom: 1px solid var(--line);
}
.demo-notice .lucide { flex: none; color: var(--accent); }

/* Profile chooser */
.demo-chooser { max-width: 1080px; margin: 0 auto; padding: var(--s7) var(--s5); text-align: center; }
.demo-chooser h1 { font-size: var(--t-xl); margin-bottom: var(--s2); }
.demo-chooser-sub { max-width: 640px; margin: 0 auto var(--s6); }
.demo-disclaimer { display: flex; align-items: flex-start; gap: 6px; justify-content: center; max-width: 680px; margin: var(--s6) auto 0; padding: var(--s3) var(--s4); background: var(--accent-wash); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); border-radius: var(--r-card); color: var(--accent-ink); font-size: var(--t-sm); text-align: start; }
.demo-disclaimer .lucide { flex: none; margin-top: 2px; }
.demo-profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s4); }
.demo-profile-card {
  position: relative; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: var(--s2); text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--s5); box-shadow: var(--shadow-card);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
/* The whole card is the click target. A transparent submit button is stretched
   over it so a click/tap anywhere — and keyboard focus + Enter — starts the demo. */
.demo-profile-go {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; background: transparent;
  border-radius: inherit; cursor: pointer; appearance: none;
}
.demo-profile-card:hover { transform: translateY(-3px); border-color: var(--seal); box-shadow: var(--shadow-card-hover, 0 8px 24px rgba(0,0,0,.1)); }
.demo-profile-card:hover .demo-profile-cta { gap: 8px; }
.demo-profile-card:focus-within { border-color: var(--seal); box-shadow: 0 0 0 3px var(--seal-wash); }
.demo-profile-go:focus { outline: none; }
.demo-profile-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 16px; background: var(--seal-wash); color: var(--seal);
}
.demo-profile-card h3 { font-size: var(--t-md); }
.demo-profile-card p { font-size: var(--t-sm); color: var(--ink-soft); min-height: 42px; }
.demo-profile-class { font-size: var(--t-xs); color: var(--accent-ink); font-weight: 700; margin-bottom: var(--s2); }
/* Subtle text CTA (replaces the big orange button — the card itself is clickable). */
.demo-profile-cta {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--accent); font-weight: 700; font-size: var(--t-sm);
  transition: gap .18s ease;
}

/* Source-gated popup */
.demo-modal {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  padding: var(--s4); background: rgb(28 43 51 / 0.5);
}
.demo-modal-card {
  background: var(--surface); border-radius: var(--r-card); padding: var(--s6) var(--s5);
  max-width: 420px; text-align: center; box-shadow: 0 20px 50px rgb(28 43 51 / 0.35);
}
.demo-modal-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; background: var(--seal-wash); color: var(--seal); margin-bottom: var(--s3);
}
.demo-modal-card h3 { font-size: var(--t-md); margin-bottom: var(--s2); }
.demo-modal-card p { color: var(--ink-soft); font-size: var(--t-sm); margin-bottom: var(--s4); line-height: 1.5; }
.demo-modal-actions { display: flex; gap: var(--s2); justify-content: center; }

@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; }
}

@media (max-width: 820px) {
  .demo-nav a span { display: none; }             /* icons-only nav on small */
}

/* 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); }
}

/* ── Browse/saved table: click-to-expand row details ─────────────────────── */
.t-row { cursor: pointer; }
.t-row:hover { background: var(--paper); }
.t-caret {
  display: inline-flex; vertical-align: -2px; margin-inline-end: 6px; color: var(--ink-soft);
  transition: transform .2s ease, color .2s ease;
}
.t-row[aria-expanded="true"] .t-caret { transform: rotate(180deg); color: var(--accent); }
.t-row[aria-expanded="true"] > td { background: var(--paper); }
/* Continue the detail's accent edge up through the expanded row, on its edge
   cell — the last cell in RTL, the first cell in LTR (otherwise the LTR site
   paints a stray orange line down the middle, on the actions column). */
[dir="rtl"] .t-row[aria-expanded="true"] > td:last-child,
[dir="ltr"] .t-row[aria-expanded="true"] > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
/* The detail cell stays a real table-cell so colspan spans the full row width;
   the layout lives on an inner grid. A soft paper panel with an accent edge
   ties it to the row it belongs to. */
.t-detail-row > td.t-detail {
  padding: 0; border-top: 0;
  background: var(--paper); border-bottom: 1px solid var(--line);
  /* Accent on the start edge of the expanded panel. A real border renders
     reliably at the cell edge; an inset box-shadow misrenders (lands mid-cell)
     on border-collapse table cells, which put a stray orange line across the
     description. */
  border-inline-start: 3px solid var(--accent);
}
.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; }
/* Placeholder while the panel is fetched. Only ever visible during the request
   itself — the row is hidden until it is expanded, and a hover usually has the
   content in place before the click. */
.t-detail-skel {
  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-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; }

/* 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); }
.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; }
.rd-collapsible.collapsed li:nth-child(n+5) { display: none; }
.rd-fade { display: none; }
.rd-collapsible.collapsed ~ .rd-fade { display: block; position: absolute; inset-inline: 0; bottom: 0;
  height: 26px; 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); }
/* "Where you stand" panel at the top of a tracked tender's detail (flush, not the
   fitcard's insets). */
.tracked-readiness { margin: 0 0 var(--s4); }
.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; }
.conf-high   { background: #d1fae5; color: #065f46; }
.conf-medium { background: #fef3c7; color: #92400e; }
.conf-low    { background: #fee2e2; color: #991b1b; }

@media (max-width: 720px) {
  .t-detail-inner { grid-template-columns: 1fr; }
}

/* ---------- Workspace calendar (deadlines) ---------- */
.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.cal-nav { display: flex; align-items: center; gap: var(--s2); }
.cal-arrow { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--r-control); border: 1px solid var(--line); color: var(--ink); background: var(--surface); }
.cal-arrow:hover { background: var(--paper); }
/* Month arrows use explicit directional chevrons chosen by text direction in
   the template (chevron-left/right), so no rotation is needed here. */
.cal-month { font-family: var(--font-display); font-size: var(--t-lg); color: var(--ink); min-width: 8.5ch; text-align: center; }
.cal-today { height: 34px; }
.cal-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.cal-toggle { cursor: pointer; }

.cal-grid { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--surface); }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--paper); border-bottom: 1px solid var(--line); }
.cal-weekdays span { padding: 8px 6px; text-align: center; font-size: var(--t-xs); font-weight: 700; color: var(--ink-soft); }
.cal-weekdays span.is-weekend { color: var(--accent-ink); }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); }
/* Fixed, uniform cells so the date grid never shifts; overflow events collapse
   behind a "+N" button that expands the single cell on demand. */
.cal-cell { height: 124px; border-inline-start: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px; display: flex; flex-direction: column; gap: 3px; overflow: hidden; position: relative; }
.cal-cell.is-expanded { height: auto; min-height: 124px; z-index: 3; box-shadow: var(--shadow-card); }
.cal-week:last-child .cal-cell { border-bottom: 0; }
.cal-cell:first-child { border-inline-start: 0; }
.cal-cell.is-other { background: var(--paper); }
.cal-cell.is-other .cal-daynum { color: var(--line); }
.cal-cell.is-weekend { background: color-mix(in srgb, var(--paper) 60%, var(--surface)); }
.cal-cell.is-today { background: var(--seal-wash); }
.cal-daynum { font-size: var(--t-xs); font-weight: 700; color: var(--ink-soft); align-self: flex-start; padding: 1px 4px; flex: none; }
.cal-cell.is-today .cal-daynum { background: var(--seal); color: #fff; border-radius: 6px; }
.cal-cell-evs { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-cell-rest { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.cal-more { align-self: stretch; margin-top: auto; border: 0; background: var(--paper); color: var(--ink-soft); font: inherit; font-size: var(--t-xs); font-weight: 700; padding: 2px; border-radius: 5px; cursor: pointer; }
.cal-more:hover { background: var(--seal-wash); color: var(--seal); }

.cal-ev { display: flex; align-items: center; gap: 4px; padding: 1px 6px; min-height: 18px; border-radius: 5px; font-size: 11px; line-height: 1.35; overflow: hidden; }
.cal-ev .cal-ev-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev:hover { text-decoration: none; filter: brightness(0.97); }
.cal-ev-time { font-weight: 700; flex: none; }
.cal-ev-who { flex: none; margin-inline-start: auto; width: 17px; height: 17px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; background: var(--surface); border: 1px solid var(--line); }
/* Milestones: solid, colored by kind; urgency intensifies the submission one. */
.cal-ms-submission { background: var(--accent-wash); color: var(--accent-ink); font-weight: 700; }
.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-ms-site_tour { background: var(--seal-wash); color: var(--seal); font-weight: 700; }
.cal-ms.u-passed { opacity: .55; }
/* Reminder flags: muted countdown pills. */
.cal-rem { background: var(--paper); color: var(--ink-soft); border: 1px dashed var(--line); }
.cal-rem .lucide { flex: none; }

.cal-agenda { display: flex; flex-direction: column; gap: var(--s2); }
.cal-ag-day { display: grid; grid-template-columns: 11rem 1fr; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.cal-ag-day.is-today .cal-ag-date { color: var(--seal); font-weight: 700; }
.cal-ag-date { color: var(--ink); font-size: var(--t-sm); }
.cal-ag-evs { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-ag-evs .cal-ev { padding: 5px 10px; font-size: var(--t-sm); border-radius: var(--r-control); }

.cal-subscribe { margin-top: var(--s5); }
/* UK: contour-band variant — band header on top, padded body below, app chips. */
.cal-sub-uk { min-height: 0; }
/* App pages don't define the landing --lp-* vars — pin the band colors here
   (--accent is the same construction orange as the landing's --lp-accent). */
.cal-sub-uk .lpt-head { color: var(--accent); border-bottom-color: var(--line); }
.cal-sub-uk .lpt-head h3 { color: var(--accent); }
.cal-sub-uk .cal-sub-body { padding: var(--s4) var(--s5) var(--s5); }
.cal-sub-uk .cal-sub-hint { margin: 0 0 var(--s3); }
.cal-sub-uk .cal-sub-field { margin-top: 0; }
.cal-app-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
  margin-inline-end: 6px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 12px; color: var(--ink-soft); background: var(--paper); }
.cal-app-chip svg { color: var(--seal); }
.cal-sub-top { display: flex; align-items: flex-start; gap: var(--s3); }
.cal-sub-ic { flex: none; width: 40px; height: 40px; border-radius: var(--r-control); background: var(--seal-wash); color: var(--seal); display: inline-flex; align-items: center; justify-content: center; }
.cal-sub-intro h2 { margin: 0 0 2px; }
.cal-sub-intro p { margin: 0; }
/* URL + copy as one aligned unit. */
.cal-sub-field { display: flex; align-items: stretch; margin-top: var(--s4); border: 1px solid var(--line); border-radius: var(--r-control); overflow: hidden; background: var(--surface); transition: border-color .12s ease, box-shadow .12s ease; }
.cal-sub-field:focus-within { border-color: var(--seal); box-shadow: 0 0 0 3px var(--seal-wash); }
.cal-sub-url { flex: 1; min-width: 0; border: 0; background: transparent; height: 44px; padding: 0 12px; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: var(--t-sm); color: var(--ink-soft); }
.cal-sub-url:focus { outline: none; }
.cal-sub-copy { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 0; border-inline-start: 1px solid var(--line); background: var(--seal-wash); color: var(--seal); padding: 0 16px; cursor: pointer; font: inherit; font-weight: 700; font-size: var(--t-sm); white-space: nowrap; transition: background .12s ease, color .12s ease; }
.cal-sub-copy:hover { background: var(--seal); color: #fff; }
.cal-sub-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s3); }
.cal-sub-apps { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-xs); }
.cal-sub-apps .lucide { color: var(--ok); }
.cal-rotate { margin: 0; }
.cal-rotate .btn { padding: 6px 12px; font-size: var(--t-xs); }

@media (max-width: 720px) {
  .cal-cell { height: 96px; padding: 2px; }
  .cal-cell.is-expanded { height: auto; }
  .cal-ev { font-size: 10px; padding: 1px 4px; gap: 2px; }
  .cal-ev-who { display: none; }  /* too tight on a phone-width cell */
  .cal-ag-day { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 460px) {
  .cal-sub-copy-label { display: none; }  /* icon-only copy on tiny screens */
  .cal-sub-copy { padding: 0 12px; }
}

/* 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); }
.notif-item { display: flex; align-items: center; 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; flex-direction: column; gap: 2px; color: var(--ink); }
.notif-link:hover { text-decoration: none; }
.notif-when { font-weight: 700; font-size: var(--t-xs); color: var(--accent-ink); }
.notif-item.u-today .notif-when, .notif-item.u-soon .notif-when { color: var(--accent); }
.notif-text { font-size: var(--t-sm); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.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; }

/* Mention alerts: an @-tag + a snippet of the note, distinct from deadline rows. */
.notif-mention { align-items: flex-start; }
.notif-mention .notif-link { flex-direction: row; align-items: flex-start; gap: var(--s2); }
.notif-ic { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--seal-wash); color: var(--seal); 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: 1px; }
.notif-mention .notif-text { white-space: normal; }
.notif-sub { font-size: var(--t-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-mention .notif-when { flex: none; font-weight: 500; color: var(--ink-soft); }

/* ---------- User guide (manual) ---------- */
.guide-note { display: flex; align-items: flex-start; gap: 6px; background: var(--bg-soft, #f8f8f8); border-inline-start: 3px solid var(--accent); border-radius: 4px; padding: var(--s3) var(--s4); margin: var(--s4) 0; font-size: var(--t-sm); color: var(--ink-soft); }
.guide-fields { display: grid; gap: var(--s3); margin: var(--s4) 0; }
.guide-fields dt { font-weight: 600; color: var(--ink); }
.guide-fields dd { margin: 2px 0 0 0; color: var(--ink-soft); font-size: var(--t-sm); }
.guide-fields ul { margin: 4px 0 0; padding-inline-start: 18px; }
.guide-fields ul li { margin: 2px 0; }
.guide-toc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s4) var(--s5); margin: var(--s5) 0; }
.guide-toc h2 { margin: 0 0 var(--s2); font-size: var(--t-md); font-family: var(--font-display); }
.guide-toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.guide-toc a { color: var(--accent-ink); }
.guide .blog-body h2, .guide .blog-body h3 { scroll-margin-top: 84px; }  /* clear the sticky header on anchor jumps */
.settings-guide-link {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s5); margin-bottom: var(--s5);
  text-decoration: none; color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--seal) 18%, var(--line));
  border-radius: var(--r-card);
  background: linear-gradient(135deg, var(--seal-wash), color-mix(in srgb, var(--seal-wash) 40%, var(--surface)));
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.settings-guide-link:hover {
  text-decoration: none;
  border-color: color-mix(in srgb, var(--seal) 45%, var(--line));
  box-shadow: 0 4px 16px -8px color-mix(in srgb, var(--seal) 50%, transparent);
}
.settings-guide-ic {
  flex: none; width: 44px; height: 44px; border-radius: var(--r-control);
  background: var(--surface); color: var(--seal);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--seal) 20%, transparent);
}
.settings-guide-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.settings-guide-text strong { font-family: var(--font-display); font-size: var(--t-md); }
.settings-guide-hint { font-size: var(--t-sm); color: var(--ink-soft); }
.settings-guide-cta {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-sm); font-weight: 700; color: var(--accent-ink);
}
.settings-guide-cta .lucide { transition: transform .15s ease; }
.settings-guide-link:hover .settings-guide-cta .lucide { transform: translate(-2px, -2px); }
@media (max-width: 560px) { .settings-guide-cta { display: none; } }

/* UK profile: contract-value range (two number inputs with a separator). */
.range-row { display: flex; align-items: center; gap: var(--s3); }
.range-row input { flex: 1 1 0; min-width: 0; }
.range-row .range-sep { color: var(--muted); flex: 0 0 auto; }

/* Advanced filters (all-tenders): flows straight on from the basic fields (no
   separator) and expands with a smooth height + chevron animation. */
.adv-filters { display: grid; }
/* Toggle is the bottom handle; the panel above it opens upward. */
.adv-filters { grid-template-rows: auto auto; }
.adv-toggle { order: 2; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s2);
  width: fit-content; border: 0; background: none; font: inherit;
  font-size: var(--t-sm); font-weight: 500; color: var(--ink-soft); user-select: none;
  padding: var(--s2) 0 var(--s1); }
.adv-toggle:hover { color: var(--ink); }
.adv-toggle-label { display: inline-flex; align-items: center; gap: 6px; }
/* Closed → chevron points up ("open upward"); open → points down ("close"). */
.adv-chev { transition: transform .25s ease; opacity: .65; transform: rotate(180deg); }
.adv-filters.is-open .adv-chev { transform: rotate(0deg); }
/* Grid-rows 0fr→1fr is the buttery accordion trick: the panel animates its real
   height with no JS height math, so opening/closing reads naturally. The panel
   sits above the toggle (order:1) so the fields appear between the basic filters
   and the handle. */
.adv-panel { order: 1; display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .28s cubic-bezier(.4, 0, .2, 1); }
.adv-filters.is-open .adv-panel { grid-template-rows: 1fr; }
/* The clipped element must collapse fully to 0 — so no padding/border/margin on
   it (spacing lives on the toggle above). */
.adv-panel > .adv-grid { overflow: hidden; min-height: 0; }
/* 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; }
/* Uniform, equal-width fields — matches the basic grid above it. */
.adv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
  gap: var(--s1) var(--s4); align-items: end; }
.adv-grid .adv-span { grid-column: 1 / -1; }
/* Double-width field — gives the contract-value min–max pair room to breathe. */
.adv-grid .field-w2 { grid-column: span 2; }
.adv-grid .field { margin: 0; min-width: 0; }
.adv-grid .chip-row { margin-bottom: 0; margin-top: 6px; }
.adv-grid .chip-none { opacity: .8; }
@media (max-width: 640px) {
  .adv-grid { grid-template-columns: 1fr; }
  /* Reset the double-width value field: its `grid-column: span 2` would force an
     implicit 2nd column here, breaking the single-column intent into two cramped
     columns whose fields crowd/overlap. Span the single column instead. */
  .adv-grid .field-w2 { grid-column: 1 / -1; }
}

/* Bidvane Advanced Search — "?" help button + popover on the all-tenders search. */
.search-help-wrap { position: relative; display: inline-flex; align-items: center; }
.search-help-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink-soft); cursor: pointer; padding: 0;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.search-help-btn:hover { background: #fff; color: var(--brand, #16557A); border-color: var(--brand, #16557A); }
.search-help {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 60;
  width: min(440px, 92vw);
  background: #fff; border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 14px 40px rgba(28,43,51,.16); padding: 12px 14px;
  font-size: var(--t-sm); color: var(--ink); line-height: 1.4; text-align: start;
}
.search-help .sh-head { display: flex; align-items: center; gap: 7px; font-size: 14px; }
.search-help .sh-intro { color: var(--ink-soft); margin: 5px 0 9px; font-size: 12.5px; }
.search-help h5 { margin: 0 0 4px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-soft); }
.search-help .sh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 9px; }
.search-help code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 5px;
  padding: 1px 5px; color: #16557A; white-space: nowrap;
  /* Each chip/example lays out in its own natural direction so mixed
     Hebrew-field + operator + number lines read correctly under RTL (IL).
     No-op for LTR English-only content (UK). */
  unicode-bidi: plaintext;
}
.search-help .sh-fields { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.search-help .sh-fields code { cursor: help; }  /* hover for the field's description */
.search-help .sh-ops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.search-help .sh-ops li { display: flex; align-items: center; gap: 7px; color: var(--ink-soft); }
.search-help .sh-ex { list-style: none; margin: 4px 0 7px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.search-help .sh-ex code { cursor: pointer; white-space: normal; display: inline-block; }
.search-help .sh-ex code:hover { background: #fff; border-color: #16557A; }
.search-help .sh-tip { color: var(--ink-soft); margin: 0; font-size: 11.5px; }
@media (max-width: 560px) { .search-help { position: fixed; inset-inline: 8px; inset-inline-end: 8px; top: auto; bottom: 12px; width: auto; } }

/* 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; }

/* Blog cover art (shared by the listing cards and the article banner). */
.blog-hero { aspect-ratio: 400 / 190; width: 100%; line-height: 0; }
.blog-hero svg { width: 100%; height: 100%; display: block; }
/* Article-page hero banner (single, wide). */
.blog-article-hero { border-radius: var(--r-card); overflow: hidden; margin: var(--s3) 0 var(--s5);
  line-height: 0; box-shadow: var(--shadow); }
.blog-article-hero .blog-hero { aspect-ratio: 1100 / 300; }
/* ── Blog listing ───────────────────────────────────────────────────────────
   Every card answers the only question a visitor has — is this worth my time?
   — before the click: topic, headline, what it covers, how long it takes.
   Same visual language as the rest of the public site (seal blue, accent
   orange, hairline cards); the cover art is the per-slug SVG set above. */
.blg-head { max-width: 1060px; margin: 0 0 var(--s5); }
.blg-head h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.1; letter-spacing: -.02em; }
.blg-sub { margin: 10px 0 0; color: var(--ink-soft); font-size: var(--t-md);
  line-height: 1.6; max-width: 62ch; }

/* Topic filter — a table of contents that happens to filter. */
.blg-filters { max-width: 1060px; display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 var(--s5); padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.blg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-soft); font: inherit; font-size: var(--t-xs); font-weight: 600;
  cursor: pointer; transition: border-color .14s ease, color .14s ease, background .14s ease; }
.blg-chip:hover { border-color: var(--seal); color: var(--ink); }
.blg-chip.is-on { background: var(--seal); border-color: var(--seal); color: #fff; }
.blg-chip-n { font-size: 11px; font-weight: 700; opacity: .55; }

/* Topic label. A filled badge on all twelve cards read as badge soup next to
   the filter bar that already lists the same topics, so it's a quiet marker
   here — the colour belongs to the artwork and the hover state. */
.blg-topic { align-self: start; display: inline-flex; align-items: center; gap: 6px;
  color: var(--seal); font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; }
.blg-topic::before { content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex: none; }
/* …except on the featured card, where it sits beside the "featured" label and
   needs to hold its own. */
.blg-kicker .blg-topic { padding: 3px 9px; border-radius: 6px;
  background: var(--seal-wash); letter-spacing: .04em; }
.blg-kicker .blg-topic::before { display: none; }

/* Featured — art BESIDE the text, so the lead story reads as a lead story. */
.blg-feat { max-width: 1060px; display: grid; grid-template-columns: minmax(300px, 46%) 1fr;
  border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow); text-decoration: none;
  margin-bottom: var(--s6, 28px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.blg-feat:hover { transform: translateY(-3px); border-color: var(--accent);
  box-shadow: 0 18px 44px rgba(28,43,51,.16); text-decoration: none; }
.blg-feat-art { line-height: 0; overflow: hidden; }
.blg-feat-art .blog-hero { height: 100%; min-height: 260px; aspect-ratio: auto; }
.blg-feat-art .blog-hero svg { height: 100%; transition: transform .4s ease; }
.blg-feat:hover .blg-feat-art .blog-hero svg { transform: scale(1.04); }
.blg-feat-body { padding: var(--s5); display: flex; flex-direction: column;
  gap: 12px; justify-content: center; }
.blg-kicker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.blg-featlbl { font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent-ink); }
.blg-feat-title { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(21px, 2.3vw, 29px); line-height: 1.22; color: var(--ink);
  text-wrap: balance; }
.blg-feat-excerpt { color: var(--ink-soft); font-size: var(--t-md); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.blg-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: var(--t-sm); color: var(--ink-soft); }
.blg-dot { opacity: .5; }
.blg-go { margin-inline-start: auto; color: var(--accent-ink); font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px; }
.blg-go-ic { transition: transform .16s ease; }
.blg-feat:hover .blg-go-ic { transform: translateX(3px); }
[dir="rtl"] .blg-go-ic { transform: scaleX(-1); }
[dir="rtl"] .blg-feat:hover .blg-go-ic { transform: scaleX(-1) translateX(3px); }

.blg-label { max-width: 1060px; font-family: var(--font-body); font-weight: 700;
  font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 var(--s4); }

/* The listing is a menu, not a reading experience: twelve cards each carrying a
   tall illustration, a filled badge, a full paragraph and its own drop shadow
   asked the eye to process everything at once. Shorter art, two lines of
   summary and a flat resting state let the titles do the choosing — the detail
   is one click away, which is where it belongs. */
.blg-grid { max-width: 1060px; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s5); }
.blg-card { display: flex; flex-direction: column; border: 1px solid var(--line);
  border-radius: var(--r-card); overflow: hidden; background: var(--surface);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.blg-card:hover { transform: translateY(-3px); border-color: var(--accent);
  box-shadow: 0 16px 40px rgba(28,43,51,.16); text-decoration: none; }
/* Topic colour. Thirteen identical white rectangles read as a spreadsheet, so
   each card and its matching filter chip carry the hue of their subject — the
   same hues the article covers use, so a card and its cover agree. One custom
   property drives the rail, the label, the hover border and the chip. */
.blg-k-seal   { --blg-h: #16557A; }
.blg-k-cyan   { --blg-h: #1B6491; }
.blg-k-blue   { --blg-h: #2F5590; }
.blg-k-green  { --blg-h: #2C6B4C; }
.blg-k-indigo { --blg-h: #384A7C; }
.blg-k-teal   { --blg-h: #0E6E72; }
.blg-k-none   { --blg-h: var(--seal); }

.blg-card { position: relative; }
/* the rail: a hairline at rest, thickening into the hue on hover */
.blg-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--blg-h, var(--seal)); opacity: .55;
  border-radius: var(--r-card) var(--r-card) 0 0;
  transition: opacity .18s ease; }
.blg-card:hover::before { opacity: 1; }
.blg-card:hover { border-color: var(--blg-h, var(--accent)); }
.blg-card .blg-topic { color: var(--blg-h, var(--seal)); }
.blg-chip:hover { border-color: var(--blg-h, var(--seal)); color: var(--ink); }
.blg-chip.is-on { background: var(--blg-h, var(--seal)); border-color: var(--blg-h, var(--seal)); }
/* the arrow only appears on hover — an affordance, not another glyph to scan */
.blg-card-go { margin-inline-start: auto; display: inline-flex; color: var(--blg-h, var(--seal));
  opacity: 0; transform: translateX(-4px);
  transition: opacity .18s ease, transform .18s ease; }
.blg-card:hover .blg-card-go { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .blg-card-go { transition: none; transform: none; }
}

/* Text-only cards: the cover art lives on the featured card and the article
   pages, not here. Roomier padding since the band no longer opens the card. */
.blg-card-body { padding: var(--s5) var(--s5) var(--s4); display: flex;
  flex-direction: column; gap: 10px; flex: 1 1 auto; }
.blg-card-title { font-family: var(--font-display); font-weight: 700; font-size: var(--t-md);
  line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; }
.blg-card-excerpt { color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Pins the meta row to the card's bottom edge so dates line up across a row
   of cards whose titles wrap to different heights. */
.blg-card-body .blg-meta { margin-top: auto; padding-top: 2px; }
.blg-empty { max-width: 1060px; color: var(--ink-soft); padding: var(--s5) 0; }

@media (max-width: 720px) {
  .blg-feat { grid-template-columns: 1fr; }
  .blg-feat-art .blog-hero { min-height: 0; aspect-ratio: 400 / 190; }
  .blg-feat-body { padding: var(--s4); }
}
/* 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; }
}
@media (prefers-reduced-motion: reduce) {
  .blg-feat, .blg-card, .blg-go-ic,
  .blg-feat-art .blog-hero svg { transition: none; }
  .blg-feat:hover, .blg-card:hover { transform: none; }
  .blg-feat:hover .blg-feat-art .blog-hero svg { transform: none; }
}

/* Advanced Search: inline ghost-text completion overlaid on the search field.
   Mirrors the input's box (border + padding + font) so the grey suffix lines up
   exactly after the typed text; the typed part is transparent so the real input
   text shows through. */
.search-ghost { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; align-items: center; padding-inline-start: 42px; padding-inline-end: 36px;
  border: 1px solid transparent; font-size: var(--t-md); white-space: pre; overflow: hidden; }
.search-ghost .sg-typed { color: transparent; }
.search-ghost .sg-suffix { color: var(--ink-soft); opacity: .6; }
/* "Tab to complete" keycap hint — only while a completion is showing. */
.search-ghost .sg-tab { display: none; margin-inline-start: 8px; align-self: center;
  font-family: inherit; font-size: 10px; line-height: 1; letter-spacing: .02em;
  color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line);
  border-radius: 5px; padding: 3px 6px; box-shadow: 0 1px 0 var(--line); white-space: nowrap; }
.search-ghost.has-suffix .sg-tab { display: inline-flex; align-items: center; }
@media (max-width: 560px) { .search-ghost .sg-tab { display: none !important; } }
/* Basic/Advanced toggle reuses the dashboard sort-seg pill; reset the <button>. */
.search-mode { flex: none; }
.search-mode .sort-opt { border: 0; background: transparent; cursor: pointer; font-family: inherit; }
@media (max-width: 560px) { .search-mode { display: none; } }

/* Divider between the search row and the filter controls (they're separate). */
.filterbar .search-divider { flex: 0 0 100%; width: 100%; height: 0; border: 0;
  border-top: 1px solid var(--line); margin: 0; }

/* Advanced-search syntax error: a specific, actionable message telling the user
   exactly what to fix in their query. Spans the full filter-bar width. */
.filterbar .search-err { flex: 0 0 100%; width: 100%; display: flex; gap: var(--s2);
  align-items: flex-start; margin: calc(var(--s1) * -1) 0 var(--s1);
  padding: 10px var(--s3); border: 1px solid color-mix(in srgb, var(--bad) 45%, var(--line));
  border-radius: var(--r-control); background: var(--bad-wash);
  color: var(--ink); font-size: var(--t-sm); line-height: 1.45; }
.search-err .search-err-ic { color: var(--bad); flex: none; margin-top: 1px; }
.search-err strong { font-weight: 650; }

/* ════════════════════════════════════════════════════════════════════════
   UK landing (Bidvane) — modern marketing page. Every selector is scoped to
   `.lp` (or the unique `.lp-announce` bar), so the IL landing (landing.html,
   which reuses .hero/.pricing/etc.) is completely unaffected.
   ════════════════════════════════════════════════════════════════════════ */
.lp { --lp-ink:#1C2B33; --lp-soft:#5A6B73; --lp-line:#E3E5DE; --lp-accent:#E8650D;
      --lp-accent2:#F59E2B; --lp-seal:#16557A; --lp-paper:#FAFAF7; }
.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; }

/* Hero mock card (marketing-only markup; deliberately NOT the app's component
   classes so view-source doesn't document the product DOM). */
.lpm-card { background:#fff; border:1px solid var(--lp-line); border-radius:14px;
  box-shadow:0 18px 44px rgba(28,43,51,.10); overflow:hidden; }
.lpm-head { display:flex; gap:16px; padding:18px 20px; align-items:flex-start; }
.lpm-ring { position:relative; display:inline-grid; place-items:center; flex:none; }
.lpm-ring-num { position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.lpm-ring-num b { font-family:"Sora",sans-serif; font-weight:800; font-size:24px; color:var(--lp-seal); line-height:1; }
.lpm-ring-num small { font-size:9px; color:var(--lp-soft); letter-spacing:.06em; text-transform:uppercase; }
.lpm-main { flex:1; min-width:0; }
.lpm-title { font-family:"Sora",sans-serif; font-weight:700; font-size:17px; color:var(--lp-ink); margin:0 0 7px; }
.lpm-status { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 7px; font-size:13.5px; }
.lpm-status span { display:inline-flex; align-items:center; gap:4px; }
.lpm-ok { color:#1E7F4F; font-weight:700; }
.lpm-deadline { border-radius:999px; padding:2px 10px; background:var(--lp-accent); color:#fff; font-weight:600; font-size:12.5px; }
.lpm-context { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13.5px; color:var(--lp-soft); }
.lpm-context span { display:inline-flex; align-items:center; gap:4px; }
.lpm-dot { color:var(--lp-line); }
.lpm-summary { margin:10px 0 0; color:var(--lp-ink); font-size:14px; line-height:1.5; }
.lpm-facts { margin-top:10px; display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; font-size:13.5px; color:var(--lp-soft); }
.lpm-facts b { color:var(--lp-ink); font-weight:700; }
.lpm-conds { display:grid; gap:14px; padding:14px 20px 18px; border-top:1px dashed var(--lp-line); }
.lpm-cond h4 { display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700; margin:0 0 7px; }
.lpm-cond ul { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.lpm-cond li { display:flex; gap:8px; align-items:flex-start; font-size:13.5px; }
.lpm-cond li svg { flex:none; margin-top:2px; }
.lpm-cond-ok h4, .lpm-cond-ok li svg { color:#1E7F4F; }
.lpm-cond-check h4, .lpm-cond-check li svg { color:#B8860B; }

/* 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-badge { display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,.16);
  padding:3px 9px; border-radius:999px; font-weight:600; font-size:12px; }
/* The bar inherits Sora from the .lp block above, which was written for
   Bidvane and carries no Hebrew glyphs — so on the IL page every word here was
   silently falling back. Give the Hebrew bar the body face, and let the lead
   claim carry the weight while the qualifiers stay secondary. */
body:not(.mkt-uk) .lp-announce { font-family:var(--font-body); }
/* Same story for the rest of the page: .lp h1/h2/h3 and the small labels all
   inherit Sora from the block above. Headings take the site's Hebrew display
   face — the one every other h1/h2/h3 uses, and the one the price card's
   "חינם" now uses, so the landing reads as one page.
   Secular One ships a single weight: keeping font-weight:700 would make the
   browser synthesise a fake bold, so the weight is reset with the family.
   letter-spacing goes too — negative tracking is a Latin display trick that
   just crowds Hebrew letterforms. */
body:not(.mkt-uk) .lp h1, body:not(.mkt-uk) .lp h2, body:not(.mkt-uk) .lp h3 {
  font-family:var(--font-display); font-weight:400; letter-spacing:normal; }
/* The eyebrow and kicker are small UI labels, not headlines: they want a real
   600/700, which the body face has and the display face does not. */
body:not(.mkt-uk) .lp .lp-eyebrow, body:not(.mkt-uk) .lp .lp-kicker {
  font-family:var(--font-body); }
/* The two section headings that set Sora directly rather than inheriting it,
   and that carry Hebrew on the IL landing / about / calendar pages. Both are
   already font-weight:400, so the display face drops straight in.
   Left in Sora on purpose: .lp-stat-num and .lp-seal-mini render digits, which
   Sora has and sets well — swapping those would lose the tabular look for no
   gain, since there is no Hebrew in them to fall back. */
body:not(.mkt-uk) .lps-head h3, body:not(.mkt-uk) .lpt-head h3 {
  font-family:var(--font-display); }
.lp-announce-msg { font-weight:700; }
body:not(.mkt-uk) .lp-announce-msg { font-weight:800; letter-spacing:-.01em; }
.lp-announce-sub { opacity:.9; font-weight:400; }
.lp-announce-cta { color:#fff; font-weight:500; 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 { 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; }
/* Section kicker: quiet editorial eyebrow (dash + small label), both markets —
   the pill-badge look retired everywhere; UK adds uppercase/letter-spacing
   (Latin-only niceties) via its .mkt-uk override below. */
.lp-kicker { display:inline-flex; align-items:center; gap:10px; font-size:12px;
  font-weight:700; color:var(--lp-seal); margin-bottom:14px; white-space:nowrap; }
.lp-kicker::before { content:""; flex:none; width:26px; height:2px; border-radius:2px;
  background:var(--lp-seal); opacity:.45; }
.lp-h1 { font-size:clamp(34px,5vw,58px); line-height:1.05; font-weight:700; letter-spacing:-.02em;
  color:var(--lp-ink); margin:0 0 18px; }
.lp-mark { color:var(--lp-accent); white-space:nowrap; }
.lp-h2 { font-size:clamp(26px,3.4vw,40px); line-height:1.12; font-weight:700; letter-spacing:-.02em;
  color:var(--lp-ink); margin:0 0 14px; }
.lp-lead { font-size:clamp(16px,1.6vw,19px); line-height:1.6; color:var(--lp-soft); max-width:560px;
  margin:0 0 28px; }
.lp-sub { font-size:17px; line-height:1.6; color:var(--lp-soft); max-width:620px; margin:0; }
.lp-section { padding:84px 0; }
.lp-head { text-align:center; max-width:720px; margin:0 auto 52px; }
.lp-head-left { text-align:left; }

/* CTA + trust */
.lp-cta-row { display:flex; gap:12px; flex-wrap:wrap; }
/* 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-btn-ghost { background:#fff; border:1px solid var(--lp-line); color:var(--lp-ink); }
.lp-btn-ghost:hover { border-color:var(--lp-seal); text-decoration:none; }
.lp-trustline { list-style:none; display:flex; flex-wrap:wrap; gap:16px; padding:0; margin:26px 0 0;
  font-size:14px; color:var(--lp-soft); }
.lp-trustline li { display:inline-flex; align-items:center; gap:6px; }
.lp-trustline svg { color:var(--ok); }

/* Hero */
.lp-hero { position:relative; overflow:hidden; padding:64px 0 88px;
  background:linear-gradient(180deg,#FFFDFA,var(--lp-paper)); }
.lp-hero-grid { position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--lp-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--lp-line) 1px,transparent 1px); background-size:34px 34px;
  -webkit-mask-image:radial-gradient(120% 70% at 70% 10%,#000,transparent 70%);
  mask-image:radial-gradient(120% 70% at 70% 10%,#000,transparent 70%); }
.lp-hero-glow { position:absolute; top:-160px; right:-120px; width:640px; height:640px;
  pointer-events:none; border-radius:50%;
  background:radial-gradient(circle,rgba(232,101,13,.14),transparent 62%); }
.lp-hero-inner { position:relative; display:grid; grid-template-columns:1.05fr 1fr; gap:56px;
  align-items:center; }
.lp-hero-copy { min-width:0; }
.lp-hero-visual { position:relative; }
.lp-window { background:#fff; border:1px solid var(--lp-line); border-radius:14px;
  box-shadow:0 30px 60px -20px rgba(28,43,51,.28),0 8px 24px rgba(28,43,51,.08); overflow:hidden;
  transform:perspective(1400px) rotateY(-4deg) rotateX(1.5deg); transition:transform .4s ease; }
.lp-window:hover { transform:perspective(1400px) rotateY(0) rotateX(0); }
.lp-window-bar { display:flex; align-items:center; gap:7px; padding:11px 14px; background:#F4F4EF;
  border-bottom:1px solid var(--lp-line); }
.lp-dot { width:10px; height:10px; border-radius:50%; background:#D6D6CE; }
.lp-dot:nth-child(1){background:#E8650D;} .lp-dot:nth-child(2){background:#F59E2B;} .lp-dot:nth-child(3){background:#1E7F4F;}
.lp-window-url { margin-left:10px; font-size:12px; color:var(--lp-soft); background:#fff;
  border:1px solid var(--lp-line); border-radius:6px; padding:3px 10px; flex:1; text-align:center; }
.lp-window-body { padding:18px; background:var(--lp-paper); }
.lp-window-body .fitcard { margin:0; }
.lp-float { position:absolute; display:flex; align-items:center; gap:9px; background:#fff;
  border:1px solid var(--lp-line); border-radius:12px; padding:10px 13px;
  box-shadow:0 12px 28px rgba(28,43,51,.16); font-size:13px; }
.lp-float b { display:block; line-height:1.1; color:var(--lp-ink); font-weight:700; }
.lp-float small { color:var(--lp-soft); font-size:11px; }
.lp-float-ic { width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  background:var(--accent-wash); color:var(--lp-accent); flex:none; }
.lp-float-score { top:14px; left:-26px; animation:lp-bob 5s ease-in-out infinite; }
.lp-float-digest { bottom:24px; right:-22px; animation:lp-bob 6s ease-in-out infinite .6s; }
.lp-float-digest .lp-float-ic { background:var(--seal-wash); color:var(--lp-seal); }
@keyframes lp-bob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }

/* Sources */
.lp-sources { padding:30px 0; border-top:1px solid var(--lp-line); border-bottom:1px solid var(--lp-line);
  background:#fff; }
.lp-sources-label { text-align:center; font-size:13px; color:var(--lp-soft); text-transform:uppercase;
  letter-spacing:.06em; margin:0 0 16px; }
.lp-source-row { display:flex; flex-wrap:wrap; gap:12px 28px; justify-content:center; }
.lp-source { display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--lp-ink);
  font-size:15px; }
.lp-source svg { color:var(--lp-seal); }

/* Stats */
.lp-stats { padding:54px 0; }
.lp-stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.lp-stat { text-align:center; background:#fff; border:1px solid var(--lp-line); border-radius:14px;
  padding:28px 18px; box-shadow:var(--shadow-card); }
.lp-stat-num { display:block; font-family:"Sora",sans-serif; font-weight:700;
  font-size:clamp(32px,4vw,46px); color:var(--lp-seal); line-height:1; letter-spacing:-.02em; }
.lp-stat-label { display:block; margin-top:8px; color:var(--lp-soft); font-size:14px; }

/* Steps */
.lp-steps { display:flex; align-items:stretch; gap:18px; justify-content:center; }
.lp-step { flex:1; max-width:320px; background:#fff; border:1px solid var(--lp-line); border-radius:16px;
  padding:28px 24px; position:relative; box-shadow:var(--shadow-card); }
.lp-step-n { position:absolute; top:-14px; left:24px; width:28px; height:28px; border-radius:50%;
  background:var(--lp-seal); color:#fff; font-weight:700; font-size:14px; display:grid; place-items:center; }
.lp-step-ic { width:48px; height:48px; border-radius:12px; display:grid; place-items:center;
  background:var(--accent-wash); color:var(--lp-accent); margin:8px 0 14px; }
.lp-step h3 { font-size:19px; margin:0 0 8px; }
.lp-step p { color:var(--lp-soft); margin:0; font-size:15px; }
.lp-step-line { display:flex; align-items:center; color:var(--lp-line); flex:none; }
@media (max-width:860px){ .lp-steps{flex-direction:column; align-items:stretch;} .lp-step{max-width:none;}
  .lp-step-line{justify-content:center; transform:rotate(90deg);} }

/* Features */
.lp-feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.lp-checks { list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px; }
.lp-checks li { display:flex; align-items:flex-start; gap:10px; font-size:16px; color:var(--lp-ink); }
.lp-checks svg { color:var(--ok); flex:none; margin-top:3px; }
.lp-mock { background:#fff; border:1px solid var(--lp-line); border-radius:16px;
  box-shadow:0 20px 50px -22px rgba(28,43,51,.26); padding:16px; }
.lp-mock-matches { display:grid; gap:10px; }
.lp-mock-row { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--lp-line);
  border-radius:12px; background:var(--lp-paper); }
.lp-mock-row.is-plan { border-style:dashed; }
.lp-seal-mini { width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-weight:700; font-size:14px; color:#fff; font-family:"Sora",sans-serif; }
.lp-seal-mini.good{background:var(--ok);} .lp-seal-mini.mid{background:var(--check);} .lp-seal-mini.plan{background:var(--lp-seal);}
.lp-mock-main { flex:1; min-width:0; }
.lp-mock-main b { display:block; font-size:14px; color:var(--lp-ink); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.lp-mock-main small { color:var(--lp-soft); font-size:12px; }
.lp-pill { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; padding:4px 9px;
  border-radius:999px; flex:none; }
.lp-pill.ok{background:var(--ok-wash); color:var(--ok);} .lp-pill.warn{background:var(--check-wash); color:var(--check);}
.lp-pill.plan{background:var(--seal-wash); color:var(--lp-seal);}
.lp-mock-elig { display:grid; gap:12px; }
.lp-elig-head { display:flex; align-items:center; gap:8px; font-weight:700; color:var(--lp-ink); font-size:15px; }
.lp-elig-group { border-left:3px solid; border-radius:10px; padding:12px 14px; }
.lp-elig-group.ok { border-color:var(--ok); background:var(--ok-wash); }
.lp-elig-group.warn { border-color:var(--check); background:var(--check-wash); }
.lp-elig-label { display:inline-flex; align-items:center; gap:5px; font-weight:600; font-size:12px;
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.lp-elig-group.ok .lp-elig-label{color:var(--ok);} .lp-elig-group.warn .lp-elig-label{color:var(--check);}
.lp-elig-group p { margin:0; font-size:14px; color:var(--lp-ink); }
.lp-elig-group p + p { margin-top:4px; }
.lp-mock-board { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.lp-col { background:var(--lp-paper); border:1px solid var(--lp-line); border-radius:12px; padding:10px; }
.lp-col-h { display:flex; justify-content:space-between; font-size:12px; font-weight:600; color:var(--lp-soft);
  margin-bottom:8px; }
.lp-col-h em { font-style:normal; background:#fff; border:1px solid var(--lp-line); border-radius:6px; padding:0 6px; }
.lp-kcard { background:#fff; border:1px solid var(--lp-line); border-radius:8px; padding:9px 10px;
  font-size:12.5px; color:var(--lp-ink); margin-bottom:8px; box-shadow:var(--shadow); border-left:3px solid var(--lp-line); }
.lp-kcard.accent{border-left-color:var(--lp-accent);} .lp-kcard.ok{border-left-color:var(--ok);}

/* Bento */
.lp-bento { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.lp-tile { background:#fff; border:1px solid var(--lp-line); border-radius:16px; padding:26px 24px;
  box-shadow:var(--shadow-card); transition:transform .2s,box-shadow .2s; }
.lp-tile:hover { transform:translateY(-3px); box-shadow:0 16px 32px -16px rgba(28,43,51,.24); }
.lp-tile-ic { width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:var(--accent-wash); color:var(--lp-accent); margin-bottom:16px; }
.lp-tile h3 { font-size:18px; margin:0 0 6px; }
.lp-tile p { color:var(--lp-soft); margin:0; font-size:14.5px; }
.lp-tile code { background:var(--lp-paper); border:1px solid var(--lp-line); border-radius:5px; padding:1px 5px; font-size:12px; }

/* Compare */
.lp-compare-sec { background:#fff; border-top:1px solid var(--lp-line); border-bottom:1px solid var(--lp-line); }
.lp-compare { display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:880px; margin:0 auto; align-items:start; }
.lp-compare-col { border:1px solid var(--lp-line); border-radius:16px; padding:26px; }
.lp-compare-col.old { background:var(--lp-paper); }
.lp-compare-col.new { background:linear-gradient(180deg,#fff,#FFF7F0);
  border-color:color-mix(in srgb,var(--lp-accent) 30%,var(--lp-line));
  box-shadow:0 18px 40px -22px rgba(232,101,13,.35); }
.lp-compare-col h3 { font-size:18px; margin:0 0 16px; display:flex; align-items:center; gap:7px; }
.lp-compare-col.new h3 { color:var(--lp-accent); }
.lp-compare-col ul { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.lp-compare-col li { display:flex; align-items:flex-start; gap:10px; font-size:15px; }
.lp-compare-col.old svg { color:var(--bad); flex:none; margin-top:2px; }
.lp-compare-col.new svg { color:var(--ok); flex:none; margin-top:2px; }

/* Pricing */
.lp-pricing { background:linear-gradient(180deg,var(--lp-paper),#FFFDFA); }
.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; }
.lp-price-top { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-top:8px; flex-wrap:wrap; }
/* Sora + uppercase + tracking is a Latin small-caps treatment: Sora ships no
   Hebrew glyphs (so the text silently falls back), uppercase is a no-op in
   Hebrew, and letter-spacing pulls the word apart. Keep it for Bidvane, give
   the Hebrew card the body face at a normal rhythm. */
.lp-price-name { font-family:var(--font-body); font-weight:700; color:var(--lp-soft);
  font-size:15px; letter-spacing:normal; }
.mkt-uk .lp-price-name { font-family:"Sora",sans-serif; font-weight:600;
  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; }
/* "חינם" sits where the number used to. It is the headline claim on the page,
   so it gets the accent colour rather than the muted ink a price carried.
   The family has to be overridden: .lp-price-amount is set in Sora, which
   carries no Hebrew glyphs — fine for "₪149" (digits render) but a Hebrew word
   falls back to whatever the system picks, which is why it looked wrong next
   to the rest of the card. Use the display face the Hebrew headings use. */
.lp-price-free { color:var(--seal, var(--lp-ink)); font-family:var(--font-display);
  font-weight:400; letter-spacing:normal; }
/* The qualifier rides under it, not inline — "חינם לתקופה מוגבלת" on one line
   would read as a single hedged phrase and bury the word that matters. */
.lp-price-amount:has(.lp-price-free) { display:flex; flex-direction:column; gap:2px; }
.lp-price-amount:has(.lp-price-free) .lp-price-period { font-size:15px; }
/* המחיר העתידי, מתחת לכותרת "חינם". שורה אחת, שקטה — הנקודה היא שיש תשובה
   למספר, לא שהוא מתחרה במילה "חינם". רק ₪149 המחוק ו־₪74 החי נושאים הדגשה. */
.lp-price-later { margin:4px 0 0; font-size:14px; color:var(--lp-soft);
  display:flex; align-items:baseline; gap:5px; flex-wrap:wrap; }
.lp-price-later s { text-decoration-thickness:1.5px; opacity:.75; }
.lp-price-later b { font-size:17px; color:var(--lp-ink); font-weight:700; }
.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-fineprint { margin-top:8px; font-size:12px; line-height:1.5; color:var(--lp-soft); opacity:.9; }
.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-act { text-align:center; }
.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;} }

/* Final CTA */
.lp-cta { background:linear-gradient(135deg,#16557A,#1C2B33); color:#fff; padding:80px 0; }
.lp-cta-inner { text-align:center; max-width:680px; margin:0 auto; }
.lp-cta .lp-h2 { color:#fff; }
.lp-cta .lp-sub { color:rgba(255,255,255,.8); margin:0 auto 28px; }
.lp-cta-btn { background:var(--lp-accent); color:#fff; border:none; box-shadow:0 14px 30px -10px rgba(232,101,13,.7); }
.lp-cta-btn:hover { background:var(--accent-ink); text-decoration:none; }
.lp-cta-fine { margin-top:18px; font-size:13px; color:rgba(255,255,255,.7); }
/* Final CTA — "market lights up" radar dot-field band (ported from the UK
   landing). Light paper backdrop; the seal/orange dot field + illumination
   wave live behind the CTA copy. IL landing only (the .lp-cta-radar modifier). */
.lp2-radar-band { position:relative; overflow:hidden; }
.lp2-radar { position:absolute; inset:0; z-index:0; }
.lp2-radar-canvas, .lp2-radar-svg { position:absolute; inset:0; width:100%; height:100%; }
.lp2-radar-canvas { display:none; }
.lp-cta-radar { background:var(--paper); color:var(--lp-ink); }
.lp-cta-radar .lp-cta-inner { position:relative; z-index:1; }
.lp-cta-radar .lp-h2 { color:var(--lp-ink); }
.lp-cta-radar .lp-sub { color:var(--lp-soft); }
.lp-cta-radar .lp-cta-fine { color:var(--lp-soft); }
/* Compact authority-lookup teaser (relocated below pricing, before FAQ) */
.lp-lookup-compact { padding-top: var(--s6); padding-bottom: var(--s6); }
.lp-lookup-compact .lp-lookup-card { padding: var(--s5); }
.lp-lookup-compact .lp-head { margin-bottom: 0; }
.lp-lookup-compact .lp-head h2 { font-size: var(--t-lg); margin-bottom: var(--s2); }
.lp-lookup-compact .lp-head p { margin: 0; }
.lp-lookup-compact .lp-lookup-form { margin-top: var(--s3); }
.lp-lookup-compact .lp-auth-chips { margin-top: var(--s3); }
/* The way through to the public search, under the authority chips. A sentence
   rather than a fourth button: the card already has a primary action, and a
   second one of equal weight would just split the click. */
/* The free search in the hero. Sits under the two CTAs and stays a step
   quieter than either: a bordered field and a neutral button, not a third
   thing shouting. It is still a real box, because a box invites a query where
   a link only announces that one exists. */
.lp-hero-search { display: flex; gap: var(--s2); margin: var(--s5) 0 0;
  max-width: 480px; }
.lp-hero-search input { flex: 1; min-width: 0; font: inherit; font-size: var(--t-sm);
  padding: 11px 14px; border-radius: var(--r-control); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); }
.lp-hero-search input::placeholder { color: var(--ink-soft); opacity: .8; }
.lp-hero-search input:focus { outline: 0; border-color: var(--seal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--seal) 13%, transparent); }
.lp-hero-search .btn { flex: none; }
.lp-hero-search-note { margin: var(--s2) 0 0; font-size: var(--t-xs);
  color: var(--ink-soft); }
@media (max-width: 560px) {
  .lp-hero-search { flex-wrap: wrap; }
  .lp-hero-search .btn { width: 100%; }
}

.lp-lookup-search { margin: var(--s4) 0 0; text-align: center; font-size: var(--t-sm);
  color: var(--ink-soft); }
.lp-lookup-search a { color: var(--seal); font-weight: 500; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--seal) 35%, transparent); }
.lp-lookup-search a:hover { border-bottom-color: currentColor; }

/* 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;}
  .lp-float{display:none;}
  .lp-hero{padding:40px 0 60px;}
}

/* ════════════════════════════════════════════════════════════════════════
   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-h1, [dir="rtl"] .lp-h2 { letter-spacing: normal; }
/* Decorative hero glow → mirror to the start (right in RTL) side. */
[dir="rtl"] .lp-hero-glow { right:auto; left:-120px; }
/* Browser-window URL chip spacing (logical). */
[dir="rtl"] .lp-window-url { margin-left:0; margin-right:10px; }
/* Step number badge sits on the reading-start corner. */
[dir="rtl"] .lp-step-n { left:auto; right:24px; }
/* Banded-step (lps) number disc sits on the reading-start (right) corner too. */
[dir="rtl"] .lps-num { left:auto; right:16px; }
/* Section kicker: Hebrew has no uppercase to borrow prominence from (UK relies
   on it), so size the RTL eyebrow up a touch to read as strong as the UK one. */
[dir="rtl"] .lp-kicker { font-size:13.5px; }
/* Connector arrows between steps point along the RTL reading flow. */
[dir="rtl"] .lp-step-line svg { transform:scaleX(-1); }
/* Accent rule on the reading-start edge of eligibility groups / kanban cards. */
[dir="rtl"] .lp-elig-group { border-left:0; border-right:3px solid; }
[dir="rtl"] .lp-kcard { border-left:0; border-right:3px solid var(--lp-line); }
[dir="rtl"] .lp-kcard.accent { border-right-color:var(--lp-accent); }
[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; }

/* ════════════════════════════════════════════════════════════════════════
   UK public pages (auth + legal) — same look & feel as the Bidvane landing.
   Scoped to `.mkt-uk` (UK market body class) + page-specific component classes
   (.auth-card / .legal-doc), so the IL site and the UK *app* pages are
   untouched (those component classes never appear there). Blogs are excluded
   (they use .blog-article without .legal-doc).
   ════════════════════════════════════════════════════════════════════════ */
.mkt-uk .auth-card h1,
.mkt-uk .legal-doc > h1,
.mkt-uk .legal-doc .blog-body h2,
.mkt-uk .legal-doc .blog-body h3 { font-family:"Sora", system-ui, sans-serif; letter-spacing:-.01em; }

/* ── Auth pages: login / signup / forgot / reset / verify ───────────────── */
.mkt-uk .auth-wrap { position:relative; isolation:isolate; }
.mkt-uk .auth-wrap::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:34px 34px; opacity:.5;
  -webkit-mask-image:radial-gradient(110% 60% at 50% 0%,#000,transparent 72%);
  mask-image:radial-gradient(110% 60% at 50% 0%,#000,transparent 72%); }
.mkt-uk .auth-wrap::after { content:""; position:absolute; top:-120px; left:50%; transform:translateX(-50%);
  width:560px; height:420px; z-index:-1; pointer-events:none; border-radius:50%;
  background:radial-gradient(circle,rgba(232,101,13,.13),transparent 62%); }
.mkt-uk .auth-card { max-width:420px; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  position:relative; box-shadow:0 30px 70px -34px rgba(28,43,51,.4), 0 4px 12px rgba(28,43,51,.05); }
.mkt-uk .auth-card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-ink)); }
.mkt-uk .auth-card h1 { font-size:26px; }

/* ── Legal / policy pages: privacy / terms / cookies / security / refunds /
      about / accessibility (all use .blog-article.legal-doc) ─────────────── */
.mkt-uk .legal-doc > h1 { font-size:clamp(30px,4vw,42px); line-height:1.1; letter-spacing:-.02em; }
.mkt-uk .legal-doc .blog-article-meta { display:inline-block; background:var(--seal-wash); color:var(--seal);
  font-size:13px; padding:4px 11px; border-radius:999px; margin-bottom:var(--s5); }
.mkt-uk .legal-doc .blog-body { font-size:16px; line-height:1.8; }
.mkt-uk .legal-doc .blog-body h2 { font-size:22px; margin-top:var(--s6); padding-top:var(--s4);
  border-top:1px solid var(--line); }
.mkt-uk .legal-doc .blog-body h2:first-of-type { border-top:0; padding-top:0; margin-top:var(--s5); }
.mkt-uk .legal-doc .blog-body h3 { font-size:17px; margin-top:var(--s4); margin-bottom:var(--s1); }
.mkt-uk .legal-doc .blog-body ul { padding-left:1.1em; }
.mkt-uk .legal-doc .blog-body li { margin-bottom:6px; }
.mkt-uk .crumbs a { font-weight:600; }
.mkt-uk .legal-doc .legal-table { width:100%; border-collapse:collapse; margin:var(--s4) 0; font-size:14px; }
.mkt-uk .legal-doc .legal-table th, .mkt-uk .legal-doc .legal-table td { border:1px solid var(--line);
  padding:9px 12px; text-align:left; vertical-align:top; }
.mkt-uk .legal-doc .legal-table th { background:var(--paper); font-weight:650; }
.mkt-uk .legal-doc .blog-back a { font-weight:600; }

/* ── 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); }
.edge-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px;
  border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; background: var(--accent); color: #fff;
  font-family: var(--font-body); vertical-align: 4px; }
.edge-badge-sm { padding: 1px 7px; font-size: 10px; vertical-align: 1px;
  background: var(--accent-wash); color: var(--accent-ink);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.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); }
/* Header — compact, name + chips left, Edge pill right */
.bp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.bp-head h1 { display: flex; align-items: center; gap: var(--s2); }
.bp-headrow { display: flex; align-items: center; gap: var(--s2); margin-top: 6px; flex-wrap: wrap; }
.bp-type { text-transform: capitalize; }
.bp-alt { color: var(--ink-soft); }
.bp-edgepill { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 3px 10px; border-radius: 999px; font-size: var(--t-xs);
  background: var(--accent-wash); color: var(--accent-ink); }
.bp-edgepill svg { color: var(--accent); }
.bp-coverage { font-size: var(--t-sm); margin: 0 0 var(--s4); }
.bp-coverage svg { vertical-align: -2px; margin-right: 4px; }
/* KPI tiles — Live-now tile is the accent, actionable one */
.bp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s3); margin: 0 0 var(--s4); }
.bp-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: 2px; }
.bp-tile b { font-size: 1.5rem; line-height: 1.1; color: var(--ink);
  min-width: 0; overflow-wrap: anywhere; }
.bp-tile span { color: var(--ink-soft); font-size: var(--t-sm); }
/* Trillion-scale sums are 17+ characters: scale with the viewport on small
   screens (and overflow-wrap above is the never-overflow last resort). */
.bp-tile-money b { color: var(--seal); font-size: clamp(1.1rem, 4.8vw, 1.5rem); }
.bp-tile-live { text-decoration: none; background: var(--accent-wash); border-color: var(--accent);
  transition: transform .12s ease; }
.bp-tile-live:hover { transform: translateY(-1px); }
.bp-tile-live b { color: var(--accent-ink); }
.bp-tile-live span { color: var(--accent-ink); display: inline-flex; align-items: center; gap: 4px; }

/* Verdict — the "how to proceed" line, first-class */
.bp-verdict { display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-radius: var(--r-card); margin: 0 0 var(--s4);
  border: 1px solid var(--line); }
.bp-verdict p { margin: 0; font-size: var(--t-sm); color: var(--ink); }
.bp-verdict svg { flex: none; }
.bp-verdict-go { background: var(--accent-wash); border-color: var(--accent); }
.bp-verdict-go svg { color: var(--accent); }
.bp-verdict-go b { color: var(--accent-ink); }
.bp-verdict-watch { background: var(--seal-wash); border-color: var(--seal); }
.bp-verdict-watch svg { color: var(--seal); }

/* Sections */
.bp-sec { padding: var(--s4) var(--s5); margin: 0 0 var(--s4); }
.bp-sec h2 { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; margin: 0 0 var(--s3); }
.bp-radar { border: 1px solid var(--accent); }           /* the radar is the hero card */
.bp-radar h2 svg { color: var(--accent); }
.bp-radar-n { font-weight: 400; margin-inline-start: 4px; }
.bp-radar-empty { margin: 0; }

/* Expiring-soon block, nested inside the radar (§6) */
.bp-expiring { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px dashed var(--line); }
.bp-subh { display: flex; align-items: center; gap: 6px; font-size: .95rem; margin: 0 0 4px; }
.bp-subh svg { color: var(--check); }
.bp-expiring-intro { font-size: var(--t-sm); margin: 0 0 var(--s2); }

/* Likely-incumbent callout above the suppliers table */
.bp-incumbent { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 var(--s3);
  padding: 10px 12px; border-radius: var(--r-control);
  background: var(--check-wash); color: var(--check); font-size: var(--t-sm); }
.bp-incumbent svg { flex: none; margin-top: 1px; }
.bp-incumbent b { color: var(--ink); }
.bp-incumbent a { color: var(--accent-ink); }

/* Context row — two charts side by side, collapses on narrow */
.bp-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: start; }
.bp-2col .bp-sec { margin: 0; }
@media (max-width: 760px) { .bp-2col { grid-template-columns: 1fr; } }
.bp-table td, .bp-table th { vertical-align: middle; }
.aw-table .aw-title { max-width: 420px; }
.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); }
/* month chart */
.bp-chart { display: flex; align-items: flex-end; gap: 6px; height: 130px;
  padding: var(--s2) 0 0; }
.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; }
.bp-chart-hint { font-size: var(--t-sm); margin: var(--s2) 0 0; }
/* 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; }
/* live tenders list */
.bp-live { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 8px; }
.bp-live li { display: flex; align-items: center; gap: var(--s3);
  justify-content: space-between; border-bottom: 1px dashed var(--line);
  padding-bottom: 8px; }
.bp-live li:last-child { border-bottom: 0; padding-bottom: 0; }
.bp-live-title { flex: 1; min-width: 0; }
/* footer */
.bp-foot { margin: var(--s5) 0 0; padding-top: var(--s3); border-top: 1px solid var(--line); }
.bp-foot .bp-coverage { margin: 0 0 var(--s2); }
.aw-pager { margin-top: var(--s3); display: flex; justify-content: center;
  align-items: center; gap: var(--s3); }
/* 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); }
.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; }
.awarded-chip { color: var(--ok); font-weight: 600; }
/* buyers browse */
.bb-search { display: flex; gap: var(--s3); margin: 0 0 var(--s3); max-width: 560px; }
.bb-search input { flex: 1; }
/* market intelligence */
/* Directory filter bar: a card with an aligned grid — the labeled search spans
   the full first row, then uniform filter columns, with Apply pinned at the end
   of the last row. Every control is a labeled .field so baselines line up. */
.dir-filters { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s3) var(--s4); align-items: end; margin: 0 0 var(--s4);
  padding: var(--s4); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.dir-filters .field { margin: 0; min-width: 0; }
.dir-filters .field > span { display: block; margin-bottom: 4px;
  font-size: var(--t-sm); color: var(--ink-soft); }
.dir-filters .field input, .dir-filters .field select { width: 100%; display: block; }
.dir-filters .df-search { grid-column: 1 / -1; }
.dir-filters .df-apply { align-self: end; height: 44px; white-space: nowrap; }
/* Free-text search with an inline clear (✕), same pattern as all-tenders'
   .search-box: relative box, input padded so text clears the button. */
.dir-filters .df-search-box { position: relative; display: flex; align-items: center; width: 100%; }
.dir-filters .df-search-box input { padding-inline-end: 30px; }
.dir-filters .df-search-clear { top: 50%; transform: translateY(-50%); }
/* 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; }
/* Under the tab bar: coverage note on the left, scope switch on the right,
   one compact row that wraps on narrow screens. */
.mk-scope { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3) var(--s4); flex-wrap: wrap; margin: 0 0 var(--s4); }
.mk-scope .bp-coverage { margin: 0; flex: 1 1 260px; }
.mk-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s4); }
.mk-leaders { margin: 0; padding: 0 0 0 1.2em; display: flex; flex-direction: column;
  gap: 6px; }
.mk-leaders li { display: flex; align-items: center; gap: 8px; }
.mk-leaders li a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.mk-seeall { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--s3);
  font-size: var(--t-sm); }
.mk-share { color: var(--seal); font-weight: 600; white-space: nowrap; }
.sort-opt.is-disabled { opacity: .45; cursor: not-allowed; }
/* ── UK public-site polish ──────────────────────────────────────────────── */
/* "New" tag on landing + auth features */
.lp-new-tag { display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  background: var(--seal); color: #fff; vertical-align: 2px; font-style: normal; }
/* landing: market-intelligence mock */
.lp-mock-intel { display: flex; flex-direction: column; gap: 12px; }
.lp-intel-head { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.lp-intel-stats { display: flex; gap: var(--s4); }
.lp-intel-stats span { display: flex; flex-direction: column; }
.lp-intel-stats b { font-size: 1.25rem; line-height: 1.1; }
.lp-intel-stats small { color: var(--ink-soft); font-size: 11px; }
.lp-intel-inc { display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  border-radius: 10px; background: var(--seal-wash); font-size: var(--t-sm); }
.lp-intel-inc small { color: var(--ink-soft); }
.lp-intel-bars { display: flex; flex-direction: column; gap: 6px; }
.lp-intel-bar { position: relative; height: 22px; border-radius: 6px;
  background: var(--seal-wash); overflow: hidden; font-size: 11px;
  display: flex; align-items: center; padding: 0 8px; gap: 6px; color: var(--ink); }
.lp-intel-bar::before { content: ""; position: absolute; inset: 0; width: var(--w);
  background: color-mix(in srgb, var(--seal) 22%, transparent); }
.lp-intel-bar i { font-style: normal; font-weight: 700; position: relative; }
.lp-intel-bar { z-index: 0; } .lp-intel-bar > * { position: relative; z-index: 1; }
/* auth: branded split layout (UK only) */
.auth-wrap-split { display: grid; grid-template-columns: minmax(300px, 420px) minmax(320px, 400px);
  gap: var(--s6); align-items: center; justify-content: center; }
.auth-side { border-radius: var(--r-card); padding: var(--s6);
  background: linear-gradient(160deg, color-mix(in srgb, var(--seal) 10%, var(--surface)),
              color-mix(in srgb, var(--seal) 3%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--seal) 18%, var(--line)); }
.auth-side-kicker { display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--seal); }
.auth-side h2 { margin: var(--s2) 0 var(--s4); font-size: 1.5rem; line-height: 1.2; }
.auth-side-points { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 12px; }
.auth-side-points li { display: flex; gap: 10px; align-items: flex-start;
  font-size: var(--t-sm); line-height: 1.45; }
.auth-side-points svg { flex: none; margin-top: 2px; color: var(--seal); }
.auth-side-trust { margin: var(--s5) 0 0; display: flex; align-items: center; gap: 6px;
  color: var(--ink-soft); font-size: 12px; }
@media (max-width: 860px) { .auth-wrap-split { grid-template-columns: 1fr; }
  .auth-side { display: none; } }
/* legal hub nav */
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--s3) 0 var(--s4); }
.legal-nav a { padding: 5px 14px; border-radius: 999px; border: 1px solid var(--line);
  font-size: var(--t-sm); color: var(--ink-soft); text-decoration: none;
  transition: border-color .15s, color .15s, background .15s; }
.legal-nav a:hover { border-color: var(--seal); color: var(--seal); text-decoration: none; }
.legal-nav a.is-active { background: var(--seal); border-color: var(--seal); color: #fff; }
/* UK kickers add uppercase + letter-spacing on top of the shared quiet-eyebrow
   base (Latin-only niceties — Hebrew must not be letterspaced). */
.mkt-uk .lp-kicker { letter-spacing: .14em; text-transform: uppercase; }
.mkt-uk .lp-kicker .lp-new-tag { letter-spacing: .05em; vertical-align: 1px; }
/* framework-operator hint on buyer profiles */
.bp-fw-hint { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 var(--s4);
  padding: 10px 14px; border-radius: 10px; background: var(--seal-wash);
  color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.5; max-width: 720px; }
.bp-fw-hint svg { flex: none; margin-top: 2px; color: var(--seal); }
/* 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); }

/* ── Support desk (admin) ─────────────────────────────────────────────── */
.sd-filters { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.sd-filters select, .sd-filters input[type="search"] {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--surface); font-size: var(--t-sm); font-family: inherit;
  inline-size: auto; flex: 0 1 auto;
}
.sd-filters input[type="search"] { min-inline-size: 220px; flex: 1 1 220px; }
.sd-billing-head { margin-top: var(--s3); }
.sd-row-billing td { background: var(--accent-wash); }
.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); }

/* Thread page: work pane (left, sticky) + correspondence pane (right). */
.sd-cols { display: grid; grid-template-columns: minmax(340px, 5fr) minmax(0, 7fr);
  gap: var(--s5); align-items: start; }
.sd-col-work { display: flex; flex-direction: column; gap: var(--s4);
  position: sticky; top: var(--s4); max-block-size: calc(100vh - var(--s6));
  overflow-y: auto; }
.sd-col-thread { display: flex; flex-direction: column; gap: var(--s3);
  border-inline-start: 1px solid var(--line); padding-inline-start: var(--s5); }
.sd-thread-title { font-size: var(--t-md); margin: 0 0 var(--s2); }
@media (max-width: 980px) {
  .sd-cols { grid-template-columns: 1fr; }
  .sd-col-work { position: static; max-block-size: none; overflow: visible; order: 2; }
  .sd-col-thread { border-inline-start: 0; padding-inline-start: 0; order: 1; }
}
.sd-who { padding: var(--s3) var(--s4); }
.sd-who-name { margin: 0; display: flex; flex-wrap: wrap; gap: var(--s2); align-items: baseline; }
.sd-who-meta { margin: 4px 0 0; font-size: var(--t-xs); }
.sd-notes h2 { display: flex; align-items: center; gap: 6px; }
.sd-notes-list { list-style: none; margin: 0 0 var(--s3); padding: 0;
  display: flex; flex-direction: column; gap: var(--s2); }
.sd-notes-list li { background: var(--check-wash); border: 1px dashed var(--line);
  border-radius: var(--r-control); padding: var(--s2) var(--s3); font-size: var(--t-xs); }
.sd-note-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-sm); }
.sd-msg-when { margin-inline-start: auto; }
.sd-msg { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s3) var(--s4);
  background: var(--surface); max-inline-size: 88%; box-shadow: var(--shadow); }
.sd-msg-inbound { align-self: flex-start; }
.sd-msg-outbound { align-self: flex-end; background: var(--seal-wash); }
.sd-msg-note { align-self: stretch; max-inline-size: none; background: var(--check-wash); border-style: dashed; box-shadow: none; }
.sd-msg-auto { opacity: .65; }
.sd-msg-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-size: var(--t-sm); margin-bottom: var(--s2); }
.sd-msg-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-sm); }
.sd-atts { list-style: none; padding: 0; margin: var(--s2) 0 0; font-size: var(--t-xs); color: var(--ink-soft); }
.sd-reply textarea, .sd-note-form textarea {
  inline-size: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--r-control); font-family: inherit; font-size: var(--t-sm); resize: vertical;
}
.sd-reply-actions { display: flex; gap: var(--s2); margin-top: var(--s2); }
.sd-note-form { display: flex; gap: var(--s2); align-items: flex-start; }
.sd-note-form textarea { flex: 1; }
.sd-status-actions { display: flex; gap: var(--s2); }
.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); }
.contact-form input, .contact-form select, .contact-form textarea {
  padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--surface); font-family: inherit; font-size: var(--t-sm);
  inline-size: 100%; box-sizing: border-box;
}
.contact-form textarea { resize: vertical; }
/* Honeypot: visually gone but still submittable by naive bots. */
.hp-field { position: absolute !important; inset-inline-start: -9999px !important;
  inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }

/* Support desk — AI draft card */
.sd-draft { border: 1px dashed var(--seal); background: var(--seal-wash); }
.sd-draft-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.sd-draft-mark { font-weight: 700; color: var(--seal); font-size: var(--t-sm); }
.sd-draft-refs { font-size: var(--t-xs); margin: 0 0 var(--s2); }
.sd-draft textarea { inline-size: 100%; box-sizing: border-box; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-control); font-family: inherit;
  font-size: var(--t-sm); resize: vertical; background: var(--surface); }
.sd-draft-note { font-size: var(--t-xs); margin: var(--s2) 0 0; }
.sd-draft-stale-body { text-decoration: line-through; color: var(--ink-soft);
  white-space: pre-wrap; font-size: var(--t-sm); }
.sd-draft-nh .sd-draft-head { margin-bottom: 0; }
.sd-draft-regen { margin-inline-start: auto; }
.sd-draft-badge { color: var(--seal); font-weight: 700; margin-inline-start: 4px; }
.sd-draft-filter { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; }
.sd-draft-filter input { position: static; inline-size: auto; block-size: auto; opacity: 1; margin: 0; }

/* Awards table: "View source" link column (all-tenders pattern) */
.aw-table .aw-src { white-space: nowrap; text-align: end; }
.aw-table .aw-src a { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-xs); }

/* ══ Public contact — one form, live explainer pane ═══════════════════════ */
.ct-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 28px; align-items: start; margin: 18px 0 26px; }
.ct-form { margin: 0; }
.ct-info { position: sticky; top: 84px; }
.ct-info-inner { background: var(--seal-wash); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 20px 22px;
  transition: opacity .12s ease, transform .12s ease; }
.ct-info-inner.is-switching { opacity: 0; transform: translateY(4px); }
.ct-info-kicker { display: inline-block; font-weight: 700; color: var(--seal);
  font-size: var(--t-sm); margin: 0 0 8px; }
.ct-info-desc { margin: 0 0 14px; color: var(--ink); font-size: var(--t-sm);
  line-height: 1.55; }
.ct-info-note { margin: 0; padding-top: 12px; border-top: 1px solid var(--line);
  color: var(--ink-soft); font-size: var(--t-xs); line-height: 1.5; }
@media (max-width: 760px) {
  .ct-grid { grid-template-columns: 1fr; }
  .ct-info { position: static; order: -1; }   /* explainer above the form on mobile */
}

/* Support desk: source + registered-user + sales chips */
.sd-src { background: var(--paper); border: 1px solid var(--line); color: var(--ink-soft); }
.sd-src-public_form { border-color: var(--seal); color: var(--seal); background: var(--seal-wash); }
.sd-src-email_orphan { border-style: dashed; }
.sd-known { background: var(--ok-wash); color: var(--ok); border: 1px solid var(--ok); }
.sd-type-sales { background: var(--accent-wash); color: var(--accent-ink);
  border: 1px solid var(--accent-ink); font-weight: 700; }

/* Public contact page — fit one screen: tight rhythm, side-by-side fields */
.ct-grid { margin: 12px 0 14px; }
.ct-form .field { margin-bottom: 10px; }
.ct-form textarea { min-height: 96px; }
.ct-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ct-pair .field { margin-bottom: 10px; }
.legal-doc.ct-page h1 { margin: 4px 0 6px; font-size: 30px; }
.ct-page .blog-body > p:first-child { margin: 0 0 12px; }
.ct-page .crumbs { margin-bottom: 4px; }
.ct-page .muted:last-child { font-size: 12.5px; margin: 6px 0 0; }
@media (max-width: 640px) { .ct-pair { grid-template-columns: 1fr; } }

/* ══ How-it-works step headers — contour-line bands ═══════════════════════ */
.lp-steps-hdr .lps { padding: 0; overflow: hidden; }
.lps-head { position: relative; display: flex; align-items: center;
  justify-content: center; gap: 10px; padding: 14px 48px;
  min-height: 56px; color: var(--lp-ink); border-bottom: 1px solid var(--lp-line);
  background-color: #F4F4EF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='80' viewBox='0 0 220 80'%3E%3Cg fill='none' stroke='%231C2B33' stroke-opacity='.10' stroke-width='1'%3E%3Cpath d='M-10 66 C 40 30 90 86 140 50 S 240 40 250 60'/%3E%3Cpath d='M-10 52 C 40 16 90 72 140 36 S 240 26 250 46'/%3E%3Cpath d='M-10 38 C 40 2 90 58 140 22 S 240 12 250 32'/%3E%3Cpath d='M-10 24 C 40 -12 90 44 140 8 S 240 -2 250 18'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 220px 80px; }
.lps-head-2 { background-position: 60px 0; }
.lps-head-3 { background-position: 130px 0; }
.lps-head h3 { margin: 0; font-family: "Sora", sans-serif; font-size: 17px; color: var(--lp-accent); font-weight: 400; }
.lps-head svg { flex: none; }
/* Stage number in the header: same ink-on-paper palette, unmistakably a step
   marker — filled ink disc, paper-white numeral. */
.lps-num { position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; background: #FAFAF7;
  border: 1.5px solid var(--lp-ink);
  color: var(--lp-ink); font-family: "Sora", sans-serif; font-weight: 700; font-size: 13px; }
.lps-title { display: inline-flex; align-items: center; gap: 9px; }
.lps-body { padding: 16px 20px 22px; }
.lps-body p { margin: 0; }

/* ══ Everything-included tiles — same contour-band headers ════════════════ */
.lpt { padding: 0 !important; overflow: hidden; min-height: 160px; }
.lpt-head { display: flex; align-items: center; justify-content: center;
  padding: 8px 16px; min-height: 44px; color: var(--lp-accent);
  border-bottom: 1px solid var(--lp-line);
  background-color: #F4F4EF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='80' viewBox='0 0 220 80'%3E%3Cg fill='none' stroke='%231C2B33' stroke-opacity='.10' stroke-width='1'%3E%3Cpath d='M-10 66 C 40 30 90 86 140 50 S 240 40 250 60'/%3E%3Cpath d='M-10 52 C 40 16 90 72 140 36 S 240 26 250 46'/%3E%3Cpath d='M-10 38 C 40 2 90 58 140 22 S 240 12 250 32'/%3E%3Cpath d='M-10 24 C 40 -12 90 44 140 8 S 240 -2 250 18'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 220px 80px; }
.lp-bento .lpt:nth-child(3n+2) .lpt-head { background-position: 60px 0; }
.lp-bento .lpt:nth-child(3n) .lpt-head { background-position: 130px 0; }
.lpt-title { display: inline-flex; align-items: center; gap: 9px; }
.lpt-head h3 { margin: 0; font-family: "Sora", sans-serif; font-size: 15.5px; color: var(--lp-accent); font-weight: 400; }
.lpt-body { padding: 13px 16px 17px; }
.lpt-body p { margin: 0; }

/* Readiness: matched-certification reassurance rows (award icon, met styling) */

.onb-editable-note { margin: 14px 2px 0; font-size: 13px; display: flex; align-items: center; gap: 6px; }
/* 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 { margin-top: var(--s4); padding: 10px 12px 12px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--lp-accent, #d97706) 22%, var(--line));
  background: color-mix(in srgb, var(--lp-accent, #d97706) 4%, var(--surface)); }
.kw-group .field { margin-bottom: var(--s3); }
.kw-group .field:last-child { margin-bottom: 0; }
.kw-note { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 10px;
  font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
.kw-note .kw-note-ic { flex: none; margin-top: 2px; color: var(--lp-accent, #d97706); }
.cert-other { margin-top: var(--s3); }

/* Mid-trial subscribe confirmation dialog */
.sub-confirm-overlay { position: fixed; inset: 0; background: rgba(28, 43, 51, .45);
  z-index: 320; display: flex; align-items: center; justify-content: center; padding: 20px; }
.sub-confirm-overlay[hidden] { display: none; }
.sub-confirm { max-width: 460px; width: 100%; padding: 22px 24px; }
.sub-confirm h3 { margin: 0 0 10px; }
.sub-confirm p { margin: 0 0 18px; line-height: 1.55; }
.sub-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* Help & contact form — compact rhythm, hint and send on one footer row */
.support-form .field { margin-bottom: 10px; }
.support-form .settings-row { gap: 12px; }
.support-form textarea { min-height: 96px; }
.support-foot { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.support-foot .settings-hint { margin: 0; flex: 1 1 260px; }
.support-foot .btn { flex: none; }

/* ══ User guide (UK) — internal-site card layout with contour-band headers ══ */
.gd { max-width: 860px; margin: 0 auto; }
.gd .gd-sec { padding: 0; overflow: hidden; margin-bottom: var(--s5); }
.gd-band { display: flex; align-items: center; gap: 10px; padding: 10px 18px; min-height: 46px;
  color: var(--accent); border-bottom: 1px solid var(--line);
  background-color: #F4F4EF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='80' viewBox='0 0 220 80'%3E%3Cg fill='none' stroke='%231C2B33' stroke-opacity='.10' stroke-width='1'%3E%3Cpath d='M-10 66 C 40 30 90 86 140 50 S 240 40 250 60'/%3E%3Cpath d='M-10 52 C 40 16 90 72 140 36 S 240 26 250 46'/%3E%3Cpath d='M-10 38 C 40 2 90 58 140 22 S 240 12 250 32'/%3E%3Cpath d='M-10 24 C 40 -12 90 44 140 8 S 240 -2 250 18'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 220px 80px; }
.gd-band h2 { margin: 0; font-family: "Sora", sans-serif; font-size: 17px; font-weight: 640; color: var(--accent); }
.gd-band svg { flex: none; }
.gd-body { padding: var(--s4) var(--s5) var(--s5); }
.gd-body > :first-child { margin-top: 0; }
.gd-body > :last-child { margin-bottom: 0; }
.gd-body h3 { margin: var(--s5) 0 var(--s2); font-size: var(--t-md); }
.gd-body li { margin-bottom: 6px; }

/* "On this page" contents box — a quiet card with a multi-column link grid */
.gd-toc { margin: 0 0 var(--s5); padding: var(--s4) var(--s5); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.gd-toc-title { display: block; margin-bottom: 10px; font-family: "Sora", sans-serif;
  font-size: var(--t-sm); font-weight: 640; color: var(--ink); }
.gd-toc-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--s4) 28px; }
.gd-toc-col { display: flex; flex-direction: column; gap: 7px; }
.gd-toc-cat { font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft); opacity: .75; margin-bottom: 2px; }
.gd-toc-col a { font-size: 13.5px; color: var(--ink-soft); text-decoration: none;
  padding-inline-start: 12px; position: relative; transition: color .12s; }
.gd-toc-col a::before { content: ""; position: absolute; inset-inline-start: 0; top: 50%;
  transform: translateY(-50%); width: 5px; height: 5px; border-radius: 999px;
  background: var(--accent); opacity: .55; }
.gd-toc-col a:hover { color: var(--accent-ink); text-decoration: underline; }

/* Quick-start numbered steps — the paper/ink disc numbering */
.gd-qs-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.gd-qs-steps li { display: flex; align-items: flex-start; gap: 12px; }
.gd-num { flex: none; width: 28px; height: 28px; border-radius: 999px; margin-top: -2px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper); border: 1.5px solid var(--ink); color: var(--ink);
  font-family: "Sora", sans-serif; font-weight: 640; font-size: 14px; }

/* Amber tip callout (same visual family as the onboarding strict-filter note) */
.gd-tip { display: flex; align-items: flex-start; gap: 8px; margin: var(--s4) 0;
  padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.55;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.gd-tip svg { flex: none; margin-top: 2px; color: var(--accent); }

/* Numbered flow lists inside sections keep plain numbering (steps, not sections) */
.gd-flow { padding-inline-start: 22px; }
.gd-flow li { margin-bottom: 6px; }

/* Flat docs-style sections (the band card is reserved for the quick start):
   accent icon chip + Sora title over a thin rule, generous separation. */
.gd-s { margin: 0 0 44px; }
/* Anchor jumps must clear the sticky topbar, or it hides the section title. */
.gd-s[id] { scroll-margin-top: 78px; }
.gd-h { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--s3);
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
  font-family: "Sora", sans-serif; font-size: 19px; font-weight: 640; color: var(--ink); }
.gd-h .gd-h-ic { flex: none; width: 30px; height: 30px; border-radius: 8px;
  background: var(--accent-wash); color: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center; }
.gd-s .gd-body { padding: 0; }
.gd-s .gd-body h3 { margin-top: var(--s4); }


/* Grouped sector picker (onboarding "תחום עיסוק עיקרי"): 22 flat chips are hard
   to scan, so they're bucketed into families with a light heading. */

/* ── Public authority pages (T-ILSEO) — the buyer-page design language ported
   from the UK public pages so both markets read as one product. Markup is
   .bh2-* (hub) and .bp2-* (detail); the UK wow band (.bw-*) is deliberately
   NOT ported — it renders award history + spend, which IL has no data for.
   RTL-safe as written: the only directional rules use logical properties
   (inset-inline-start / margin-inline-end), so they mirror automatically. */
.seo-page { max-width: 860px; padding-block: var(--s5) var(--s6); }
.seo-crumb { font-size: var(--t-sm); color: var(--ink-soft); margin-bottom: var(--s3); }
.seo-crumb a { color: var(--ink-soft); }
.seo-crumb a:hover { color: var(--seal); }

.seo-head2 { display: flex; gap: var(--s4); align-items: flex-start; margin: var(--s4) 0 var(--s5); }
.seo-head-ic { flex: none; width: 54px; height: 54px; border-radius: 14px;
  background: var(--seal-wash); color: var(--seal); display: grid; place-items: center; }
.seo-head-main { min-width: 0; }
.seo-head2 h1 { font-size: clamp(24px, 3.4vw, 33px); line-height: 1.14; margin: 0;
  font-weight: 600; letter-spacing: -.015em; text-wrap: balance; }
.seo-h1-light { color: var(--ink-soft); font-weight: 500; }
.seo-idline { color: var(--ink-soft); font-size: var(--t-sm); margin: 8px 0 0; }
.seo-idtype { text-transform: capitalize; color: var(--ink); font-weight: 600; }
.seo-iddot { opacity: .5; margin: 0 2px; }

/* ── T-UKSEO4 v2 — slick buyer-page dossier (below the untouched band + strip).
   Restrained: white panels, hairline separators, one seal-blue accent, quiet
   premium teases. Eyebrow labels give the page an intelligence-report rhythm. */
.bp2 { display: grid; grid-template-columns: 1.7fr 1fr; gap: 20px; margin-top: 22px; align-items: start; }
@media (max-width: 760px) { .bp2 { grid-template-columns: 1fr; } }
.bp2-main, .bp2-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bp2-panel { background: #fff; border: 1px solid rgba(28,43,51,.08); border-radius: 14px;
  padding: 18px 20px; box-shadow: 0 1px 2px rgba(28,43,51,.03); }
.bp2-panel-soft { background: var(--seal-wash); border-color: transparent; box-shadow: none; }
.bp2-head { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.bp2-head h2 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0; letter-spacing: -.01em; }
.bp2-eyebrow { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--seal); background: var(--seal-wash);
  padding: 3px 8px; border-radius: 6px; }
.bp2-eyebrow.bp2-live { color: #1a7f4b; background: rgba(26,127,75,.10); }
.bp2-dot { width: 6px; height: 6px; border-radius: 50%; background: #1a7f4b; box-shadow: 0 0 0 3px rgba(26,127,75,.18); }
.bp2-count { margin-inline-start: auto; font-size: 13px; font-weight: 700; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; }
/* "כמה זמן נותנים להגיש": the number leads, because it is the one fact on the
   panel a supplier acts on — 14 days and 59 days are different decisions about
   whether to start writing at all. */
.bp2-window { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.bp2-window b { font-size: 22px; font-weight: 700; line-height: 1.1;
  letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.bp2-window span { font-size: 12px; color: var(--ink-soft); line-height: 1.4; }
/* rows */
.bp2-rows { list-style: none; margin: 0; padding: 0; }
.bp2-row { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 0; border-top: 1px solid rgba(28,43,51,.07); }
.bp2-row:first-child { border-top: 0; padding-top: 2px; }
.bp2-row-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bp2-row-title { font-weight: 600; color: var(--ink); font-size: 14px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.bp2-row-sub { font-size: 11.5px; color: var(--ink-soft); }
.bp2-row-sm .bp2-row-title { font-weight: 500; font-size: 13.5px; }
.bp2-due { flex: none; font-size: 11.5px; font-weight: 600; color: var(--seal); background: var(--seal-wash);
  border-radius: 999px; padding: 4px 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bp2-when { flex: none; font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; }
/* "View source" — every row links back to the notice on the government service
   that published it: checkable provenance for a reader, a real citation for a
   crawler. Same wording + external icon as the in-app source links, and the same
   --accent-ink orange those links inherit from the base `a` rule (the AA-contrast
   text orange, not the bright --accent) — visible enough to find, quiet enough
   not to compete with the signup CTA. Deliberately NOT inline-flex: that would
   make the label one unbreakable box and push a narrow phone sideways. */
.bp2-src { color: var(--accent-ink); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color .15s ease; }
.bp2-src:hover, .bp2-src:focus-visible { border-bottom-color: currentColor; }
.bp2-src-ic { vertical-align: -1px; margin-inline-start: 3px; opacity: .65; }
.bp2-src:hover .bp2-src-ic, .bp2-src:focus-visible .bp2-src-ic { opacity: 1; }
.bp2-sep { margin: 0 5px; opacity: .45; }
.bp2-more { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-soft); }
/* ---- browse-the-grid, on the search empty state -------------------------
   Three quiet columns BELOW the search band, behind a rule. This is where the
   ~200 scope pages are linked from, so it has to be scannable rather than
   decorative: no cards, no icons, just names and real counts — and quiet
   enough that it never competes with the box someone came here to type in. */
.ps-browse-sec { max-width: 760px; margin: 0 auto; padding-top: 32px;
  border-top: 1px solid var(--line); }
.ps-browse { display: grid; gap: 26px 34px; margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  max-width: 760px; text-align: start; }
.ps-browse h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-soft); margin: 0 0 8px; font-weight: 600; font-family: var(--font-body); }
.ps-browse ul { list-style: none; margin: 0; padding: 0; }
.ps-browse li { margin: 0; }
/* Soft ink, not full ink: these are an alternative to searching, not the
   invitation. They come forward on hover, which is when they are wanted. */
.ps-browse a { display: flex; justify-content: space-between; gap: 10px;
  padding: 6px 0; font-size: 13px; color: var(--ink-soft); text-decoration: none;
  transition: color .12s ease; }
.ps-browse a:hover { color: var(--seal); text-decoration: underline;
  text-underline-offset: 3px; }
.ps-browse .muted { color: var(--ink-soft); font-size: 12.5px; }
@media (max-width: 560px) { .ps-browse { gap: 22px; } }

/* ---- the alert box (T-ILALERT) -----------------------------------------
   Sits under the results, where the reader has just seen what this search
   returns. Styled as a quiet panel rather than a banner: it is an offer, not an
   interruption, and a search page that shouts loses the search. */
.ps-alert { margin: 28px 0 0; padding: 18px 20px; border-radius: var(--r-card);
  background: color-mix(in srgb, var(--seal) 5%, var(--surface));
  border: 1px solid var(--line); }
.ps-alert-copy { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.ps-alert-copy strong { font-size: 15px; }
.ps-alert-copy span { font-size: 13px; color: var(--ink-soft); }
.ps-alert-row { display: flex; gap: 8px; margin: 12px 0 0; }
body.ps-body .ps-alert-input { flex: 1; min-width: 0; font: inherit; font-size: 14.5px;
  padding: 10px 12px; border-radius: var(--r-control); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); }
body.ps-body .ps-alert-input:focus { outline: 0; border-color: var(--seal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--seal) 13%, transparent); }
.ps-alert-btn { flex: none; border: 0; cursor: pointer; font: inherit; font-weight: 500;
  font-size: 14px; padding: 0 20px; border-radius: var(--r-control);
  background: var(--btn); color: #fff; box-shadow: inset 0 -2.5px 0 var(--btn-line); }
.ps-alert-btn:hover { background: var(--btn-hover); }
.ps-alert-fine { margin: 10px 0 0; font-size: 11.5px; color: var(--ink-soft); }
.ps-alert-title { font-size: clamp(24px, 4vw, 32px); margin: 0 0 10px;
  font-family: var(--font-display); color: var(--ink); }
@media (max-width: 560px) {
  .ps-alert-row { flex-wrap: wrap; }
  .ps-alert-btn { width: 100%; padding: 11px 20px; }
}

/* Where this tender sits in the grid — quiet, above the back link, and wrapping
   rather than scrolling on a phone. */
.pt-scopes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 26px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.pt-scopes-label { font-size: 12.5px; color: var(--ink-soft); }
.pt-scopes a { font-size: 13px; padding: 5px 11px; border-radius: 999px;
  text-decoration: none; color: var(--ink);
  background: color-mix(in srgb, var(--seal) 6%, var(--surface));
  border: 1px solid transparent; transition: background .14s ease, color .14s ease,
    border-color .14s ease; }
.pt-scopes a:hover { background: var(--seal-wash); color: var(--seal);
  border-color: color-mix(in srgb, var(--seal) 22%, transparent); }

/* ---- the scope pages (category / region / both) -------------------------
   The intro is the one paragraph a search engine quotes, so it gets reading
   width and body-size type rather than the muted caption treatment. */
.scope-intro { max-width: 70ch; margin: 0 0 var(--s5); color: var(--ink-soft);
  font-size: var(--t-sm); line-height: 1.6; }
/* The cross-link grid: dense enough to scan, not a wall of blue. */
.scope-grid { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2px 18px; }
.scope-grid a { display: block; padding: 7px 0; text-decoration: none;
  color: var(--ink); font-size: 13.5px; }
.scope-grid a:hover { color: var(--seal); text-decoration: underline;
  text-underline-offset: 3px; }

/* The authority page hosts real search-result cards when the public search is
   live. The cards bring their own border and padding, so the panel drops the
   inner gutter it uses for hairline rows and lets them sit flush. */
.bp2-panel-rows .ps-results { margin-top: 4px; }
.bp2-morelink { display: inline-block; margin: 14px 0 0; font-size: 13px;
  color: var(--seal); text-decoration: none; font-weight: 500; }
.bp2-morelink:hover { text-decoration: underline; text-underline-offset: 3px; }
/* A category row that is a link must not lose the row's own colour. */
.bp2-row a.bp2-row-title { color: inherit; text-decoration: none; }
.bp2-row a.bp2-row-title:hover { color: var(--seal); text-decoration: underline;
  text-underline-offset: 3px; }
.bp2-sub { margin: 0 0 10px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
/* quiet premium tease — a lock glyph + one muted line above a hairline */
.bp2-tease { display: flex; align-items: flex-start; gap: 7px; margin: 14px 0 0; padding-top: 12px;
  border-top: 1px dashed rgba(28,43,51,.13); font-size: 12px; color: var(--ink-soft); line-height: 1.55; }
.bp2-tease svg { flex: none; margin-top: 1px; color: var(--seal); opacity: .7; }
.bp2-panel-soft .bp2-tease { border-top-color: rgba(28,43,51,.12); }
/* framework links */
.bp2-links { list-style: none; margin: 0; padding: 0; }
.bp2-links li { padding: 9px 0; border-top: 1px solid rgba(28,43,51,.07); }
.bp2-links li:first-child { border-top: 0; padding-top: 0; }
.bp2-links a { color: var(--seal); font-weight: 500; font-size: 13.5px; }
.bp2-links a:hover { text-decoration: underline; }
/* related buyers — a clean link list (names vary in length; pills would stretch) */
.bp2-orglist { list-style: none; margin: 0; padding: 0; }
.bp2-orglist li { border-top: 1px solid rgba(28,43,51,.07); }
.bp2-orglist li:first-child { border-top: 0; }
.bp2-orglist a { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0; color: var(--ink); font-size: 13px; font-weight: 500; transition: color .14s ease; }
.bp2-orglist a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp2-orglist a svg { flex: none; color: var(--ink-soft); opacity: .45;
  transition: transform .14s ease, color .14s ease, opacity .14s ease; }
.bp2-orglist a:hover { color: var(--seal); }
.bp2-orglist a:hover svg { color: var(--seal); opacity: 1; transform: translateX(2px); }

/* ── Buyers hub (/organisations) — same slick language as the buyer page:
      refined header, soft featured cards with a live "open" dot, and a clean
      two-column A–Z directory of hairline rows. New .bh2-* namespace only. ── */
.bh2-head{margin:2px 0 6px;max-width:72ch}
.bh2-head h1{font-size:clamp(26px,3.6vw,34px);font-weight:600;line-height:1.14;margin:0;
  letter-spacing:-.015em;text-wrap:balance}
.bh2-intro{color:var(--ink-soft);line-height:1.6;font-size:14.5px;margin:11px 0 0}
.bh2-updated{font-size:12px;color:var(--ink-soft);margin:9px 0 0}
.bh2-sect{margin-top:34px}
.bh2-sect .bp2-head{margin-bottom:14px}
/* shared monogram avatar — soft seal-wash tile with the buyer's initials */
.bh2-mono,.bh2-az-mono{flex:none;display:grid;place-items:center;font-weight:800;color:var(--seal);
  background:var(--seal-wash);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.bh2-mono{width:40px;height:40px;border-radius:11px;font-size:14.5px}
.bh2-az-mono{width:24px;height:24px;border-radius:7px;font-size:10px}
/* featured cards — full-card link: monogram · name+stats · hover arrow */
.bh2-cards{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:12px}
.bh2-card{position:relative}
/* Uniform-height cards: a fixed floor + stretch so every panel in the grid is
   the same size regardless of name length. align-items:stretch lets the body
   fill the height so the stats can sit on a shared baseline. */
.bh2-card-link{display:flex;align-items:stretch;gap:13px;min-height:98px;
  background:#fff;border:1px solid rgba(28,43,51,.08);border-radius:15px;padding:15px 15px 15px 16px;
  box-shadow:0 1px 2px rgba(28,43,51,.03);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.bh2-card-link:hover{transform:translateY(-2px);border-color:rgba(22,85,122,.28);
  box-shadow:0 12px 26px -14px rgba(28,43,51,.28)}
.bh2-card-link:hover .bh2-mono{background:var(--seal);color:#fff}
.bh2-mono{transition:background .16s ease,color .16s ease}
.bh2-card-body{min-width:0;flex:1;display:flex;flex-direction:column;gap:9px}
/* Name fills up to two lines, then truncates with an ellipsis (full name in the
   title tooltip) — a very long name shortens instead of enlarging the panel. */
.bh2-card-name{font-weight:600;font-size:14.5px;line-height:1.3;color:var(--ink);
  transition:color .14s ease;display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.bh2-card-link:hover .bh2-card-name{color:var(--seal)}
/* Stats stay on ONE line (nowrap) so the card height never grows for a long
   count; overflow is clipped inside the body rather than wrapping. */
.bh2-card-stats{margin-top:auto;display:flex;flex-wrap:nowrap;gap:14px;overflow:hidden;
  font-size:11.5px;color:var(--ink-soft)}
.bh2-stat{white-space:nowrap}
.bh2-stat b{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.bh2-stat-live b{color:#1a7f4b}
.bh2-stat-live::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:#1a7f4b;margin-inline-end:5px;vertical-align:middle;box-shadow:0 0 0 2px rgba(26,127,75,.18)}
.bh2-card-go{flex:none;color:var(--ink-soft);opacity:.35;margin-top:1px;
  transition:transform .16s ease,color .16s ease,opacity .16s ease}
.bh2-card-link:hover .bh2-card-go{color:var(--seal);opacity:1;transform:translateX(3px)}
/* A–Z directory — two-column list of monogram rows with two live counts */
.bh2-az{list-style:none;margin:0;padding:0;columns:2;column-gap:26px}
@media(max-width:640px){.bh2-az{columns:1}}
.bh2-az li{break-inside:avoid;border-top:1px solid rgba(28,43,51,.07)}
.bh2-az a{display:flex;align-items:center;gap:11px;padding:9px 8px 9px 6px;border-radius:9px;
  color:var(--ink);font-size:13.5px;font-weight:500;
  transition:color .14s ease,background .14s ease}
.bh2-az a:hover{color:var(--seal);background:var(--seal-wash)}
.bh2-az a:hover .bh2-az-mono{background:var(--seal);color:#fff}
.bh2-az-mono{transition:background .14s ease,color .14s ease}
.bh2-az-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bh2-az-stats{flex:none;display:flex;align-items:baseline;gap:10px;font-size:11px;
  color:var(--ink-soft);font-variant-numeric:tabular-nums}
.bh2-az-open{font-weight:600;color:var(--ink)}
.bh2-az-open::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:#1a7f4b;margin-inline-end:5px;vertical-align:middle}
.bh2-az-exp{position:relative;padding-inline-start:11px}
.bh2-az-exp::before{content:"";position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);
  width:1px;height:10px;background:rgba(28,43,51,.16)}
@media (prefers-reduced-motion: reduce){.bh2-card-link{transition:none}}

/* The IL authority header tile carries a two-letter monogram, where the UK page
   uses a generic building glyph — a monogram identifies the authority, and with
   235 of them a repeated glyph would say nothing. Same 54px tile either way. */
.seo-head-ic { font-size: 21px; font-weight: 700; letter-spacing: .01em; }
/* The card chevron should travel along the reading direction, which is RTL here. */
[dir="rtl"] .bh2-card-link:hover .bh2-card-go { transform: translateX(-3px); }

/* T-PUBSTATS — admin public-site analytics dashboard (scoped .psx). Utilitarian
   but scannable: a conversion funnel on top, a KPI strip, a prominent insights
   callout, then grouped cards of tables with inline magnitude bars. */
.psx { --psx-good: #1a7f4b; }
.psx-note { margin: 0 0 var(--s5); font-size: var(--t-xs); color: var(--ink-soft);
  line-height: 1.5; max-width: 70ch; }
.psx-muted { color: var(--ink-soft); }

/* Conversion funnel — the headline. Steps shrink-illustrate the drop-off. */
.psx-funnel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin: 0 0 var(--s4); }
.psx-funnel-3 { grid-template-columns: repeat(3, 1fr); }
.psx-step { position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 16px 14px 14px; text-align: center; }
.psx-step.is-goal { background: var(--seal-wash); border-color: transparent; }
.psx-step-n { font-size: 28px; font-weight: 800; color: var(--ink); line-height: 1;
  font-variant-numeric: tabular-nums; }
.psx-step.is-goal .psx-step-n { color: var(--seal); }
.psx-step-l { margin-top: 5px; font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.psx-step-h { font-size: 10.5px; color: var(--ink-soft); margin-top: 2px; }
.psx-step-drop { position: absolute; top: 10px; inset-inline-end: 10px;
  font-size: 10.5px; font-weight: 700; color: var(--ink-soft);
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  padding: 1px 6px; }
.psx-step.is-goal .psx-step-drop { color: var(--seal); background: #fff; }

/* KPI strip. */
.psx-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
  margin: 0 0 var(--s5); }
.psx-kpi { background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px; }
.psx-kpi b { display: block; font-size: 19px; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.psx-kpi .psx-accent { color: var(--seal); }
.psx-kpi span { display: block; font-size: 11px; color: var(--ink-soft); margin-top: 1px; }

/* Insights callout. */
.psx-insights { background: var(--seal-wash); border-radius: 10px;
  padding: 14px 18px; margin: 0 0 var(--s5); }
.psx-insights-h { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--seal); margin-bottom: 6px; }
.psx-insights ul { margin: 0; padding-inline-start: 1.1rem;
  display: flex; flex-direction: column; gap: 5px; }
.psx-insights li { font-size: var(--t-sm); line-height: 1.5; color: var(--ink); }

/* Grouped card layout. */
.psx-group { margin: var(--s6) 0 var(--s3); font-size: var(--t-sm); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.psx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4); }
.psx-card { background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px 16px; min-width: 0; }
.psx-card.psx-wide { grid-column: 1 / -1; }
.psx-trend-card { margin-bottom: var(--s4); }
.psx-card-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  margin-bottom: 10px; }
.psx-card-h h3 { margin: 0; font-size: var(--t-base); font-weight: 700; color: var(--ink); }
.psx-sub { font-size: 11px; color: var(--ink-soft); line-height: 1.4; }

/* Compact tables with an inline bar column. */
.psx-tbl { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.psx-tbl th { text-align: start; font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .02em; color: var(--ink-soft);
  padding: 0 8px 6px 0; border-bottom: 1px solid var(--line); }
.psx-tbl td { padding: 6px 8px 6px 0; border-bottom: 1px solid rgba(28,43,51,.05);
  vertical-align: middle; }
.psx-tbl tr:last-child td, .psx-tbl tbody tr:last-child td { border-bottom: 0; }
.psx-tbl .psx-r { text-align: end; }
.psx-tbl b { font-weight: 700; color: var(--ink); }
.psx-path { max-width: 240px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--ink); }
.psx-linklabel { color: var(--ink); font-weight: 500; }
.psx-linktarget { display: block; font-size: 11px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.psx-barcell { width: 90px; }
.psx-bar { display: block; width: 100%; height: 6px; background: var(--line);
  border-radius: 999px; overflow: hidden; }
.psx-fill { display: block; height: 100%; background: var(--seal); opacity: .8;
  border-radius: 999px; }
.psx-conv { font-weight: 700; font-variant-numeric: tabular-nums; }
.psx-conv.is-good { color: var(--psx-good); }
.psx-conv.is-zero { color: var(--ink-soft); }

/* Trend sparkline. */
.psx-spark { display: flex; align-items: flex-end; gap: 3px; height: 96px; }
.psx-scol { position: relative; flex: 1; min-width: 3px; height: 100%;
  display: flex; align-items: flex-end; }
.psx-sbar { display: block; width: 100%; min-height: 2px; border-radius: 2px 2px 0 0;
  background: var(--seal); opacity: .7; }
.psx-scol:hover .psx-sbar { opacity: 1; }
/* Raw hits behind the engaged bar: present, so a spike is still visible, but
   plainly not the number being reported. Absolutely positioned so it shares the
   column's baseline with the solid bar rather than sitting beside it. */
.psx-sghost { position: absolute; inset-inline: 0; bottom: 0; display: block;
  min-height: 2px; border-radius: 2px 2px 0 0;
  background: var(--seal); opacity: .16; }
.psx-spark-note { font-size: var(--t-xs); margin: 6px 0 0; }

/* The engaged count leads the KPI strip; drive-by sits next to it, deliberately
   quiet, so the pair reads as "real people / everything else" at a glance. */
.psx-kpi-lead b { font-size: 1.35em; }
.psx-scope-note { font-size: var(--t-xs); margin: 6px 0 var(--s3); }
.psx-sdot { position: absolute; top: -3px; inset-inline-start: 50%;
  transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%;
  background: var(--psx-good); }
.psx-spark-x { display: flex; justify-content: space-between; margin-top: 6px;
  font-size: 10.5px; color: var(--ink-soft); }

@media (max-width: 760px) {
  .psx-funnel, .psx-kpis { grid-template-columns: repeat(2, 1fr); }
  .psx-grid { grid-template-columns: 1fr; }
  .psx-card.psx-wide { grid-column: auto; }
  .psx-path { max-width: 46vw; }
}

/* "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. */
.t-bid-dl { display: grid; gap: var(--s2) var(--s3); margin: 0; }
.t-bid-dl > div { display: grid; grid-template-columns: minmax(9rem, auto) 1fr;
  gap: var(--s2) var(--s3); align-items: baseline; }
.t-bid-dl dt { font-size: var(--t-xs); font-weight: 700; color: var(--muted);
  text-align: start; }
.t-bid-dl dd { margin: 0; font-size: var(--t-sm); color: var(--ink); }
@media (max-width: 560px) {
  .t-bid-dl > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ========================================================================
   T-ILSEARCH -- public search (/search) and public tender pages (/t/ID).
   Every selector is namespaced .ps-* / .pt-* and these pages carry their own
   shell, so nothing here can reach an existing screen -- which is what keeps
   the flag-off byte-identity gate green. Michraziya tokens only: search-results
   anatomy, no borrowed identity.

   SPECIFICITY NOTE: the pill's inner control is an <input> and a
   <button type=submit>, and two global rules outrank a bare class --
   `input:focus` (which drew a RECTANGULAR 2px outline inside the 999px pill,
   the misalignment this block fixes) and `body.il-pub button[type=submit]`
   (which forced an 8px radius and the T-ILBTN orange underline onto the round
   submit). So the control rules below are scoped `body.ps-body ...` to win
   honestly, rather than reaching for !important.
   ======================================================================== */
.ps-body { background: var(--paper); color: var(--ink); margin: 0; font-family: var(--font-body); }

/* A quiet wash behind the hero, so the pill sits on something rather than
   floating on flat paper. */
.ps-body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: 420px; z-index: -1;
  background:
    radial-gradient(120% 90% at 50% -20%, color-mix(in srgb, var(--seal) 9%, transparent), transparent 70%),
    linear-gradient(var(--surface), var(--paper));
}

.ps-topbar { border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: saturate(1.4) blur(8px); position: sticky; top: 0; z-index: 5; }
.ps-topbar-inner { max-width: 1080px; margin: 0 auto; padding: 10px 22px;
  display: flex; align-items: center; gap: 18px; }
.ps-auth { margin-inline-start: auto; display: flex; align-items: center; gap: 14px; }
.ps-login { color: var(--ink-soft); font-size: 14px; text-decoration: none;
  padding: 6px 4px; border-radius: 8px; transition: color .12s ease; }
.ps-login:hover { color: var(--ink); text-decoration: none; }
body.ps-body .ps-signup { font-size: 14px; font-weight: 500; padding: 7px 16px;
  border-radius: var(--r-control); background: var(--btn); color: #fff; text-decoration: none;
  border: 0; box-shadow: inset 0 -2.5px 0 var(--btn-line);
  transition: background .12s ease, transform .12s ease; }
body.ps-body .ps-signup:hover { background: var(--btn-hover); }
body.ps-body .ps-signup:active { transform: translateY(1px); }

/* Our own wordmark, with the accent full stop from the approved mock. */
.ps-wordmark { font-family: var(--font-display); color: var(--seal); text-decoration: none; }
.ps-wordmark-lg { font-size: clamp(40px, 7.5vw, 62px); margin: 0 0 8px; display: block;
  letter-spacing: -.015em; }
.ps-wordmark-sm { font-size: 21px; flex: none; }
.ps-dot { color: var(--accent); }

.ps-main { padding: 24px 22px 60px; }
/* The empty state is two bands rather than one long column. The first is the
   search and nothing else, sized so it fills the screen a visitor lands on;
   the second starts below it, behind a rule. Grid-centring the whole <main>
   (what this did before) meant every block added underneath dragged the search
   box upward — the page's only real control losing ground to its own
   footnotes. */
.ps-main-empty { display: block; padding-top: 0; }
/* Sized so the browse section's rule only PEEKS at the bottom of a laptop
   screen: enough to say "there is more here", not enough to pull the eye off
   the box. Measured at 1280x900 and 1280x720 — the band ends at ~81% of the
   viewport in both, because the padding and the min-height are both in vh. */
.ps-hero-wrap { display: grid; place-items: center; min-height: 74vh;
  padding-top: 7vh; }
.ps-hero { width: min(680px, 100%); text-align: center; }
.ps-tagline { color: var(--ink-soft); margin: 0 0 30px; font-size: 16.5px; }

/* ---- the query field ----------------------------------------------------
   Squared off, on the product's own radii — a search pill reads as somebody
   else's search box. The frame takes --r-card and the submit takes
   --r-control, the same radius every other button in the product uses, so the
   field belongs to this theme rather than to a search engine. The focus ring
   is a box-shadow on the FRAME (box-shadow follows border-radius; an outline
   on the inner input does not). */
.ps-form { display: flex; align-items: center; gap: 6px; width: 100%;
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r-card);
  padding: 5px 5px 5px 6px;
  box-shadow: 0 1px 2px rgba(28, 43, 51, .04), 0 6px 18px -10px rgba(28, 43, 51, .18);
  transition: box-shadow .16s ease, border-color .16s ease; }
.ps-form:hover { border-color: #d3d6cd;
  box-shadow: 0 1px 2px rgba(28, 43, 51, .05), 0 10px 26px -12px rgba(28, 43, 51, .24); }
.ps-form:focus-within { border-color: var(--seal);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--seal) 13%, transparent),
              0 10px 30px -12px rgba(28, 43, 51, .28); }

/* The magnifier is decorative — the input has its own aria-label. */
.ps-form-icon { flex: none; display: grid; place-items: center; inline-size: 22px;
  color: var(--ink-soft); margin-inline-start: 10px; transition: color .16s ease; }
.ps-form:focus-within .ps-form-icon { color: var(--seal); }
.ps-form-icon svg { display: block; }

body.ps-body .ps-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 16.5px; padding: 11px 10px; color: var(--ink);
  border-radius: 6px; box-shadow: none; width: auto; }
body.ps-body .ps-input:hover, body.ps-body .ps-input:focus { border: 0; outline: 0; box-shadow: none; }
body.ps-body .ps-input::placeholder { color: var(--ink-soft); opacity: .75; }
/* Chrome draws its own clear affordance in a search field; ours is the frame. */
body.ps-body .ps-input::-webkit-search-decoration,
body.ps-body .ps-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* align-self: stretch, not a hand-tuned height — the button then fills the
   frame's content box exactly, so the two stay flush if the font or padding
   ever changes. */
body.ps-body .ps-form .ps-submit { flex: none; align-self: stretch;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-control); cursor: pointer;
  background: var(--btn); color: #fff; font: inherit; font-weight: 500; font-size: 14.5px;
  padding: 0 26px; line-height: 1.2; box-shadow: inset 0 -2.5px 0 var(--btn-line);
  transition: background .12s ease, transform .12s ease; }
body.ps-body .ps-form .ps-submit:hover { background: var(--btn-hover); }
body.ps-body .ps-form .ps-submit:active { transform: translateY(1px); }
body.ps-body .ps-form .ps-submit:focus-visible { outline: 2px solid var(--seal); outline-offset: 3px; }

.ps-form-compact { max-width: 560px; padding: 3px 3px 3px 4px;
  box-shadow: 0 1px 2px rgba(28, 43, 51, .04); }
.ps-form-compact .ps-form-icon { inline-size: 18px; margin-inline-start: 8px; }
body.ps-body .ps-form-compact .ps-input { font-size: 14.5px; padding: 7px 8px; }
body.ps-body .ps-form.ps-form-compact .ps-submit { padding: 0 18px; font-size: 13.5px;
  border-radius: 6px; }

/* ---- example queries ----------------------------------------------------
   Suggestion pills, not buttons: no hard border, a faint seal wash, and they
   lift a hair on hover. Quiet enough to ignore, inviting enough to tap. */
.ps-examples { margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; align-items: center; }
.ps-examples-label { color: var(--ink-soft); font-size: 12.5px; letter-spacing: .01em;
  margin-inline-end: 2px; }
.ps-example { font-size: 13.5px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--seal) 6%, var(--surface));
  color: var(--ink); text-decoration: none; line-height: 1.3;
  box-shadow: 0 1px 2px rgba(28, 43, 51, .04);
  transition: background .14s ease, color .14s ease, border-color .14s ease,
              transform .14s ease, box-shadow .14s ease; }
.ps-example:hover { background: var(--seal-wash); color: var(--seal);
  border-color: color-mix(in srgb, var(--seal) 22%, transparent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -6px rgba(28, 43, 51, .3); }
.ps-example:active { transform: translateY(0); }
.ps-counts { margin: 26px 0 0; color: var(--ink-soft); font-size: 13px; }

.ps-shell { max-width: 720px; margin: 0 auto; }

/* Interpreted entities: how the query was read, one tap to correct. */
.ps-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 14px; }
.ps-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px;
  padding: 5px 12px; border-radius: 999px; text-decoration: none; font-weight: 500;
  background: color-mix(in srgb, var(--seal) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--seal) 26%, transparent); color: var(--seal);
  transition: background .14s ease, border-color .14s ease; }
.ps-chip:hover { background: var(--seal-wash);
  border-color: color-mix(in srgb, var(--seal) 42%, transparent); }
.ps-chip-x { opacity: .55; font-size: 11px; }
.ps-chip:hover .ps-chip-x { opacity: 1; }

.ps-filters { display: flex; flex-wrap: wrap; gap: 14px; padding: 0 0 12px;
  border-bottom: 1px solid var(--line); margin-bottom: 14px; }

.ps-meta { color: var(--ink-soft); font-size: 13px; margin: 0 0 16px; }
.ps-timing { opacity: .7; }
.ps-note { color: var(--seal); }
.ps-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

/* The decision-strip card. */
.ps-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 15px 17px; transition: border-color .14s ease, box-shadow .14s ease,
  transform .14s ease; }
.ps-card:hover { border-color: #d3d6cd; transform: translateY(-1px);
  box-shadow: 0 10px 26px -16px rgba(28, 43, 51, .45); }
.ps-card.is-closed { opacity: .72; }
.ps-card-source { font-size: 12.5px; color: var(--ink-soft); display: flex;
  flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 3px; }
.ps-card-pub { font-weight: 500; color: var(--ink); }
.ps-sep { opacity: .4; }
.ps-badge-enriched { font-size: 11.5px; padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--seal) 11%, var(--surface)); color: var(--seal);
  border: 1px solid color-mix(in srgb, var(--seal) 22%, transparent); }
.ps-card-title { margin: 2px 0 6px; font-size: 17.5px; line-height: 1.35;
  font-weight: 500; font-family: var(--font-body); }
.ps-card-title a { color: var(--seal); text-decoration: none; }
.ps-card-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ps-card-title a:visited { color: color-mix(in srgb, var(--seal) 72%, #6b4b8a); }
.ps-card-snip { margin: 0 0 11px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

.ps-facts { display: flex; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 10px; }
.ps-fact { flex: 1 1 0; min-width: 108px; padding-inline: 12px;
  border-inline-start: 1px solid var(--line); }
.ps-fact:first-child { padding-inline-start: 0; border-inline-start: 0; }
.ps-fact-label { display: block; font-size: 11px; color: var(--ink-soft); margin-bottom: 2px;
  letter-spacing: .015em; }
.ps-fact-value { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.ps-fact.is-urgent .ps-fact-value { color: var(--accent-ink); }
.ps-fact.is-muted .ps-fact-value { color: var(--ink-soft); font-weight: 500; }
.ps-fact-link { color: var(--seal); text-decoration: none; }
.ps-fact-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.ps-card-thresholds { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-soft);
  line-height: 1.6; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.ps-thresholds-label { font-weight: 700; color: var(--ink); }
.ps-thresholds-more { color: var(--seal); text-decoration: none; }
.ps-thresholds-more:hover { text-decoration: underline; text-underline-offset: 3px; }

.ps-zero { padding: 44px 0; text-align: center; }
.ps-zero h2 { font-family: var(--font-display); color: var(--ink); margin: 0 0 8px;
  font-size: 21px; font-weight: 400; }
.ps-zero p { color: var(--ink-soft); margin: 0; }

.ps-pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 28px 0 0; }
.ps-page { min-width: 36px; text-align: center; padding: 7px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--seal);
  text-decoration: none; font-size: 13.5px; transition: background .14s ease, border-color .14s ease; }
.ps-page:hover { background: var(--seal-wash); border-color: color-mix(in srgb, var(--seal) 30%, transparent); }
.ps-page.is-current { background: var(--seal); color: #fff; border-color: var(--seal); }

.ps-advanced { margin: 32px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.ps-advanced summary { cursor: pointer; color: var(--seal); }

/* Sponsored units: native and result-shaped. The label is what makes it
   honest -- bold, small, above the title, never omitted. */
.ps-ad { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 15px 17px; }
.ps-ad:empty { display: none; }
.ps-ad-label { font-size: 11.5px; font-weight: 700; color: var(--ink); display: block; margin-bottom: 3px; }

@media (prefers-reduced-motion: reduce) {
  .ps-example, .ps-card, body.ps-body .ps-form .ps-submit, body.ps-body .ps-signup,
  .ps-form { transition: none; }
  .ps-example:hover, .ps-card:hover { transform: none; }
}

@media (max-width: 640px) {
  .ps-topbar-inner { flex-wrap: wrap; gap: 10px; }
  .ps-form-compact { order: 3; flex-basis: 100%; max-width: none; }
  body.ps-body .ps-input { font-size: 16px; }
  body.ps-body .ps-form .ps-submit { padding: 0 18px; }
  .ps-fact { flex-basis: 50%; border-inline-start: 0; padding-inline: 0; margin-bottom: 6px; }
}

/* ---- typeahead ----------------------------------------------------------
   The list hangs off the field and shares its curvature, so the two read as one
   object rather than a panel that happens to be nearby. Hidden by default and
   only ever revealed by JS, so a no-JS visitor sees the plain form. */
.ps-form { position: relative; }
.ps-suggest { position: absolute; inset-inline: 0; top: calc(100% + 8px);
  margin: 0; padding: 6px; list-style: none; z-index: 20;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: 0 18px 40px -18px rgba(28, 43, 51, .45), 0 2px 6px rgba(28, 43, 51, .05);
  max-height: 340px; overflow-y: auto; }
.ps-suggest[hidden] { display: none; }
.ps-suggest-item { display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 9px 14px; border-radius: 6px; font-size: 15px; color: var(--ink);
  transition: background .1s ease; }
.ps-suggest-item:hover, .ps-suggest-item.is-active { background: var(--seal-wash); }
.ps-suggest-item.is-active { color: var(--seal); }
.ps-suggest-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
/* The kind label is the honest part: it says WHY the row is being offered —
   a category, an authority, a region — so picking one is never a guess. */
.ps-suggest-kind { flex: none; font-size: 11.5px; color: var(--ink-soft);
  background: color-mix(in srgb, var(--seal) 7%, var(--surface));
  border: 1px solid var(--line); border-radius: 4px; padding: 2px 9px; }
.ps-suggest-item.is-active .ps-suggest-kind {
  border-color: color-mix(in srgb, var(--seal) 28%, transparent); color: var(--seal); }
.ps-form-compact .ps-suggest-item { font-size: 14px; padding: 7px 12px; }

/* ---- the advanced-search hint (empty state) -----------------------------
   It lives where someone is deciding HOW to search, rather than at the foot of
   results they are already reading. Closed by default: a hint, not a feature
   tour. */
.ps-advanced-hint { margin: 18px auto 0; max-width: 520px; text-align: center; }
.ps-advanced-hint summary { display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; list-style: none; font-size: 13px; color: var(--ink-soft);
  padding: 6px 14px; border-radius: 999px; border: 1px dashed var(--line);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  transition: border-color .14s ease, color .14s ease, background .14s ease; }
.ps-advanced-hint summary::-webkit-details-marker { display: none; }
.ps-advanced-hint summary:hover { color: var(--ink);
  border-color: color-mix(in srgb, var(--seal) 35%, transparent);
  background: var(--surface); }
.ps-hint-cta { color: var(--seal); font-weight: 500; }
.ps-advanced-hint[open] summary { border-style: solid; border-color: var(--seal);
  color: var(--ink); background: var(--surface); }
/* The panel carries .search-help too, so its insides are styled by the app's
   own help-popover rules — one panel, two surfaces. Only the framing is
   re-stated here: it OVERLAYS what follows rather than displacing it (opening a
   hint must not shove the page under the reader), and it spans the hint's width
   instead of the popover's fixed 440px, so `width: auto` is load-bearing. */
.ps-advanced-hint { position: relative; }
.ps-advanced-panel { position: absolute; inset-inline: 0; width: auto;
  /* bottom: auto undoes the app popover's narrow-screen rule, which docks it to
     the bottom of the viewport. Left in, top AND bottom would both be set and
     the panel would be squashed to a 30px sliver. */
  top: calc(100% + 10px); bottom: auto;
  z-index: 15; text-align: start; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: 0 18px 40px -18px rgba(28, 43, 51, .45), 0 2px 6px rgba(28, 43, 51, .05); }
/* Once there is room, spill past the 520px hint that opens it: two columns plus
   four example lines are 390px tall at the hint's width and run under the fold.
   The negative inset spreads symmetrically in both writing directions, where a
   left/translate pair would need undoing under RTL — but only above the width
   where it fits, or it would push the page into horizontal scroll. */
@media (min-width: 760px) {
  .ps-advanced-panel { inset-inline: -70px; }
}

/* Each example is a paste target wrapping the app's <code> chip. The anchor is
   only there to carry the link and the paste — the chip does the drawing, so
   the anchor adds no box of its own. */
.ps-advanced-panel .sh-ex .ps-adv-ex { display: inline-block; text-decoration: none;
  padding: 0; border-radius: 5px; transition: none; }
.ps-advanced-panel .sh-ex .ps-adv-ex:focus-visible { outline: 2px solid var(--seal);
  outline-offset: 2px; }
.ps-advanced-panel .sh-ex .ps-adv-ex.is-pasted code {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border-color: var(--accent); }

/* ---- filter bar ---------------------------------------------------------
   Status is a segmented control: two options, both visible, one tap. Real
   radios underneath so it submits with JS off. */
.ps-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px;
  background: color-mix(in srgb, var(--seal) 7%, var(--surface));
  border: 1px solid var(--line); }
.ps-seg-opt { position: relative; display: inline-flex; align-items: center;
  cursor: pointer; font-size: 13px; color: var(--ink-soft); padding: 5px 15px;
  border-radius: 999px; transition: background .14s ease, color .14s ease; }
.ps-seg-opt input { position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px; margin: 0; }
.ps-seg-opt:hover { color: var(--ink); }
.ps-seg-opt.is-on { background: var(--surface); color: var(--seal); font-weight: 500;
  box-shadow: 0 1px 3px rgba(28, 43, 51, .12); }
.ps-seg-opt:focus-within { outline: 2px solid color-mix(in srgb, var(--seal) 45%, transparent);
  outline-offset: 1px; }
.ps-seg-go { margin-inline-start: 8px; }

/* Selects: our own chevron, so the control matches the pills instead of
   inheriting the OS dropdown look. */
.ps-filter { position: relative; display: inline-flex; align-items: center; }
body.ps-body .ps-filter select { appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 13px; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px;
  padding-block: 6px; padding-inline: 15px 34px;
  background: var(--surface); width: auto; cursor: pointer;
  transition: border-color .14s ease, color .14s ease, background .14s ease; }
body.ps-body .ps-filter select:hover { color: var(--ink);
  border-color: color-mix(in srgb, var(--seal) 35%, transparent); }
body.ps-body .ps-filter select:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--seal) 45%, transparent);
  outline-offset: 1px; border-color: var(--seal); }
/* A set filter is state, so it reads as selected rather than as a default. */
body.ps-body .ps-filter.is-set select { color: var(--seal); font-weight: 500;
  background: color-mix(in srgb, var(--seal) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--seal) 30%, transparent); }
.ps-filter::after { content: ""; position: absolute; inset-inline-end: 14px;
  width: 8px; height: 8px; pointer-events: none;
  border-inline-end: 1.6px solid currentColor; border-block-end: 1.6px solid currentColor;
  color: var(--ink-soft); transform: translateY(-2px) rotate(45deg); }
.ps-filter.is-set::after { color: var(--seal); }

@media (prefers-reduced-motion: reduce) {
  .ps-suggest-item, .ps-seg-opt, .ps-advanced-hint summary,
  body.ps-body .ps-filter select { transition: none; }
}

/* ---- footer: the legal minimum, kept quiet --------------------------------
   A search page is not a marketing surface, so this is one small centred row
   rather than the app's full footer. Reuses the app's own strings. */
/* The bottom padding is not decoration: without it the copyright line sits
   flush against the viewport edge, which reads as a page that got cut off
   rather than one that ended. */
.ps-footer { max-width: 720px; margin: 44px auto 0; padding: 18px 22px 40px;
  border-top: 1px solid var(--line); text-align: center; }
.ps-main-empty .ps-footer { margin-top: 34px; }
.ps-footer-links { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.ps-footer-links a { font-size: 13px; color: var(--ink-soft); text-decoration: none; }
.ps-footer-links a:hover { color: var(--seal); text-decoration: underline;
  text-underline-offset: 3px; }
.ps-footer-rights { margin: 10px 0 0; font-size: 12px; color: var(--ink-soft); opacity: .85; }

.ps-body { --ps-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8.75' cy='8.75' r='5.25'/%3E%3Cpath d='M12.6 12.6 16.5 16.5'/%3E%3C/svg%3E"); }
/* ---- inline ghost completion -------------------------------------------
   Mirrors the logged-in advanced search: the typed text is transparent (it
   only reserves the width) and the rest of the field name is greyed in right
   after it, so the completion sits exactly where the next character will land.
   The wrapper exists so the overlay can match the input's box precisely. */
.ps-input-wrap { position: relative; flex: 1; min-width: 0; display: flex; }
.ps-ghost { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  display: flex; align-items: center; padding: 11px 10px;
  font: inherit; font-size: 16.5px; white-space: pre; overflow: hidden; }
.ps-ghost-typed { color: transparent; }
.ps-ghost-suffix { color: var(--ink-soft); opacity: .55; }
.ps-ghost-key { display: none; margin-inline-start: 8px; font-family: inherit;
  font-size: 10px; line-height: 1; color: var(--ink-soft); background: var(--paper);
  border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px; }
.ps-ghost.has-suffix .ps-ghost-key { display: inline-flex; align-items: center; }
.ps-form-compact .ps-ghost { padding: 7px 8px; font-size: 14.5px; }
@media (max-width: 560px) { .ps-ghost-key { display: none !important; } }

/* ---- the submit, trimmed ------------------------------------------------
   It was a slab: 26px of padding either side of a word, filling a third of the
   pill. Now it carries the magnifier and keeps the word only where there is
   room for it, so the field itself is what the eye lands on. */
body.ps-body .ps-form .ps-submit { padding: 0 18px; font-size: 14px; gap: 7px;
  grid-auto-flow: column; align-items: center; }
body.ps-body .ps-form .ps-submit::before {
  content: ""; inline-size: 15px; block-size: 15px; flex: none;
  background: currentColor;
  -webkit-mask: var(--ps-search-icon) center / contain no-repeat;
  mask: var(--ps-search-icon) center / contain no-repeat; }
body.ps-body .ps-form.ps-form-compact .ps-submit { padding: 0 14px; }
body.ps-body .ps-form.ps-form-compact .ps-submit::before { inline-size: 14px; block-size: 14px; }
@media (max-width: 560px) {
  /* Icon only — the label is redundant next to a magnifier on a phone. */
  .ps-submit-text { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; }
  body.ps-body .ps-form .ps-submit { padding: 0 14px; }
}

/* The way into the product from a page that is deliberately only a search box. */
.ps-footer-product { font-weight: 500; color: var(--seal) !important; }
.ps-footer-product:hover { color: var(--btn-hover) !important; }

/* ---- T-ILSEARCH: the public tender page (/t/ID) --------------------------
   Rebuilt in the house language: the .bh2 card idiom (hairline border, soft
   lift), .bp2-head section headers, tokens for spacing and type, .tnum for
   every figure. Two columns like the app's own detail pages — the reading
   column carries the argument, the aside carries the actions — collapsing to
   one on narrow screens with the facts still high up.                        */
.pt-shell { max-width: 1000px; margin: 0 auto; }
.pt-crumbs { font-size: var(--t-xs); color: var(--ink-soft); margin: 0 0 14px;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pt-crumbs a { color: var(--ink-soft); text-decoration: none; }
.pt-crumbs a:hover { color: var(--seal); text-decoration: underline; text-underline-offset: 3px; }

/* ---- hero: status first, because that is the question people arrive with -- */
.pt-head { margin: 0 0 22px; }
.pt-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 11px; }
.pt-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  font-weight: 600; padding: 4px 12px; border-radius: 999px; letter-spacing: .01em; }
.pt-status::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%;
  background: currentColor; }
.pt-status.is-open { color: #1a7f4b; background: color-mix(in srgb, #1a7f4b 10%, var(--surface));
  border: 1px solid color-mix(in srgb, #1a7f4b 24%, transparent); }
.pt-status.is-closed { color: var(--ink-soft); background: var(--paper);
  border: 1px solid var(--line); }
.pt-countdown { font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
  padding: 4px 10px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); }
.pt-countdown.is-urgent { color: var(--accent-ink);
  background: var(--accent-wash); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.pt-tag { font-size: 12.5px; color: var(--ink-soft); padding: 4px 11px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line); }
.pt-tag.is-analysed { color: var(--seal);
  background: color-mix(in srgb, var(--seal) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--seal) 24%, transparent); }

.pt-title { font-family: var(--font-display); font-weight: 400; color: var(--ink);
  font-size: clamp(24px, 3.6vw, 33px); line-height: 1.25; margin: 0 0 9px; max-width: 34ch; }
.pt-sub { font-size: var(--t-xs); color: var(--ink-soft);
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.pt-sub-pub { font-weight: 600; color: var(--ink); }

/* ---- the two columns ---------------------------------------------------- */
/* Three children, not two: the reading column is split so that on a phone the
   ACTIONS (official link, documents) can follow the facts immediately, instead
   of sitting below the entire analysis. On desktop both halves return to the
   reading column and the aside spans them. */
.pt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  column-gap: 26px; row-gap: 0; align-items: start; }
.pt-lead, .pt-body { min-width: 0; grid-column: 1; }
.pt-aside { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: 14px;
  position: sticky; top: 76px; }

/* ---- the decision bar: the numbers a bidder weighs ---------------------- */
.pt-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 1px; margin: 0 0 22px; background: var(--line);
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.pt-facts > div { background: var(--surface); padding: 13px 15px; }
.pt-facts dt { font-size: 11.5px; color: var(--ink-soft); margin-bottom: 3px; letter-spacing: .015em; }
.pt-facts dd { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.pt-fact-note { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-soft);
  margin-top: 2px; }
.pt-fact.is-urgent dd { color: var(--accent-ink); }
.pt-fact.is-muted dd { color: var(--ink-soft); font-weight: 600; }

.pt-unanalysed { background: var(--surface); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--ink-soft); border-radius: var(--r-card);
  padding: 13px 16px; margin: 0 0 18px; }
.pt-unanalysed h2 { font-family: var(--font-body); font-weight: 700; font-size: 13.5px;
  color: var(--ink); margin: 0 0 4px; }
.pt-unanalysed p { margin: 0; font-size: var(--t-xs); color: var(--ink-soft); line-height: 1.6; }

/* ---- sections ----------------------------------------------------------- */
.pt-block { margin: 0 0 26px; }
.pt-block-head { display: flex; align-items: center; gap: 9px; margin: 0 0 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.pt-block-head h2 { font-family: var(--font-body); font-size: 15px; font-weight: 700;
  color: var(--ink); margin: 0; letter-spacing: -.01em; }
.pt-count { font-size: 11.5px; font-weight: 700; color: var(--seal);
  background: color-mix(in srgb, var(--seal) 10%, var(--surface));
  border-radius: 999px; padding: 1px 8px; }
.pt-summary { margin: 0; font-size: var(--t-sm); line-height: 1.75; color: var(--ink); max-width: 68ch; }

/* Threshold conditions read as a checklist — one gate per row. */
.pt-conds { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.pt-conds li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 11px 14px 11px 12px; font-size: 14.5px; line-height: 1.6;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  transition: border-color .14s ease; }
.pt-conds li:hover { border-color: color-mix(in srgb, var(--seal) 26%, transparent); }
.pt-conds li::before { content: ""; flex: none; align-self: center;
  inline-size: 6px; block-size: 6px; border-radius: 50%;
  background: color-mix(in srgb, var(--seal) 55%, transparent); }
.pt-cond-text { flex: 1 1 auto; min-width: 0; }
.pt-cond-value { flex: none; color: var(--seal); font-weight: 700;
  background: color-mix(in srgb, var(--seal) 8%, var(--surface));
  border-radius: 7px; padding: 2px 9px; font-size: 13.5px; }

.pt-cta { display: inline-block; margin: 13px 0 0; font-size: var(--t-xs);
  color: var(--seal); text-decoration: none; font-weight: 500; }
.pt-cta:hover { text-decoration: underline; text-underline-offset: 3px; }

.pt-decision { margin: 0; display: grid; gap: 0; border: 1px solid var(--line);
  border-radius: var(--r-card); overflow: hidden; background: var(--surface); }
.pt-decision > div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px;
  padding: 12px 15px; border-block-end: 1px solid var(--line); }
.pt-decision > div:last-child { border-block-end: 0; }
.pt-decision dt { font-size: 12px; color: var(--ink-soft); font-weight: 600; padding-top: 1px; }
.pt-decision dd { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ink); }
.pt-kp-title { font-size: 12px; color: var(--ink-soft); font-weight: 700;
  margin: 18px 0 8px; font-family: var(--font-body); }
.pt-kp { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.pt-kp li { position: relative; padding-inline-start: 20px; font-size: 14.5px;
  line-height: 1.65; color: var(--ink); }
.pt-kp li::before { content: ""; position: absolute; inset-inline-start: 4px; top: .62em;
  inline-size: 7px; block-size: 7px; border-radius: 2px; transform: rotate(45deg);
  background: color-mix(in srgb, var(--accent) 70%, transparent); }

/* ---- aside cards -------------------------------------------------------- */
.pt-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 15px 16px; box-shadow: 0 1px 2px rgba(28, 43, 51, .04); }
.pt-card-title { font-family: var(--font-body); font-size: 12px; font-weight: 700;
  color: var(--ink-soft); letter-spacing: .04em; margin: 0 0 12px;
  display: flex; align-items: center; gap: 8px; }
body.ps-body .pt-source { display: block; text-align: center; font-size: 14px; font-weight: 500;
  padding: 10px 16px; border-radius: 999px; background: var(--btn); color: #fff;
  text-decoration: none; box-shadow: inset 0 -2.5px 0 var(--btn-line);
  transition: background .12s ease, transform .12s ease; }
body.ps-body .pt-source:hover { background: var(--btn-hover); }
body.ps-body .pt-source:active { transform: translateY(1px); }
.pt-source-note { margin: 9px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--ink-soft); }

.pt-meta { margin: 14px 0 0; display: grid; gap: 9px; }
.pt-meta > div { display: grid; gap: 1px; }
.pt-meta dt { font-size: 11px; color: var(--ink-soft); letter-spacing: .015em; }
.pt-meta dd { margin: 0; font-size: 13.5px; color: var(--ink); font-weight: 500; line-height: 1.4; }

.pt-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pt-docs a { display: block; color: var(--seal); font-size: 13.5px; text-decoration: none;
  padding: 7px 9px; border-radius: 8px; line-height: 1.4;
  transition: background .12s ease; }
.pt-docs a:hover { background: var(--seal-wash); }

.pt-foot { margin: 30px 0 0; font-size: var(--t-xs); }
.pt-foot a { color: var(--seal); text-decoration: none; }
.pt-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .pt-conds li, .pt-docs a, body.ps-body .pt-source { transition: none; }
  body.ps-body .pt-source:active { transform: none; }
}

@media (max-width: 900px) {
  /* One column, in the order a phone reader needs: the numbers, then what to
     do about them, then the analysis. */
  .pt-grid { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .pt-lead, .pt-body, .pt-aside { grid-column: 1; grid-row: auto; }
  .pt-lead { order: 1; }
  .pt-aside { order: 2; position: static; }
  .pt-body { order: 3; }
}
@media (max-width: 640px) {
  .pt-decision > div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .pt-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ---- T-ILSEARCH: the admin ads block. Plain settings form, house style. ---- */
.ads-form { display: grid; gap: 14px; max-width: 560px; }
.ads-field { display: grid; gap: 5px; }
.ads-field > span { font-size: 13px; font-weight: 600; }
.ads-field input[type="text"], .ads-field textarea { font: inherit; font-size: 14px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.ads-field textarea { resize: vertical; min-height: 66px; }
.ads-field small { font-size: 12px; line-height: 1.5; }
.ads-slots { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
  display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }
.ads-slots legend { font-size: 13px; font-weight: 600; padding-inline: 4px; }
.ads-slot { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }