/* Vane — the in-app assistant (UK, signed in; flag uk_assistant).
   A launcher floating bottom-right, a panel above it; a bottom sheet on a
   phone. Colours come from the app's tokens (tokens.css), so the dark theme
   follows on its own; Vane's own navy ground is fixed in both themes — it is
   the mark's ground, the one place it lives. */

.vn {
  --vn-navy: #0E2A3D;
  --vn-navy-2: #16557A;
  --vn-glow: #7CB7DE;
  --vn-spark: #FF7A1A;
  --vn-user: var(--seal-wash);
  --vn-on-user: var(--ink);
  --vn-bubble: transparent;
  --vn-card: var(--surface);
  --vn-shadow: 0 14px 36px -14px rgb(14 42 61 / .22), 0 1px 3px rgb(14 42 61 / .06);
  --vn-go: #243238;
  --vn-go-hover: #3A4A52;
  --vn-on-go: #FFFFFF;
  font-family: var(--font-body);
}
html[data-theme="dark"] body.app .vn {
  --vn-user: #1B2E3B;
  --vn-bubble: transparent;
  --vn-card: #1B2831;
  --vn-shadow: 0 24px 60px -18px rgb(0 0 0 / .7), 0 2px 10px rgb(0 0 0 / .45);
  --vn-go: #E7EDF1;
  --vn-go-hover: #FFFFFF;
  --vn-on-go: #111A20;
}
.vn[hidden], .vn [hidden] { display: none !important; }
.vn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Vane: the fox ──────────────────────────────────────────────────────────
   A round portrait (static/vane-fox.webp) in a hairline compass ring, north in
   the brand's orange. */
.vn-fox { position: relative; display: block; flex: none; width: var(--vn-size, 40px); height: var(--vn-size, 40px); }
.vn-fox img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  background: #1C2F63; user-select: none; }
.vn-fox-ring { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px);
  overflow: visible; pointer-events: none; transform-origin: 50% 50%; }
.vn-fox-ring circle { fill: none; stroke: #4FD2FF; stroke-width: .7; opacity: .45; }
.vn-fox-north { fill: #E8650D; }
/* a little head-tilt, and the compass swinging to find north */
@keyframes vn-tilt { 0% { transform: rotate(0); } 30% { transform: rotate(-9deg); } 60% { transform: rotate(5deg); }
  100% { transform: rotate(0); } }
@keyframes vn-swing { 0% { transform: rotate(0); } 35% { transform: rotate(38deg); } 65% { transform: rotate(-16deg); }
  85% { transform: rotate(6deg); } 100% { transform: rotate(0); } }
@keyframes vn-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
.vn.is-busy .vn-head .vn-fox img { animation: vn-bob 1s ease-in-out infinite; }

/* ── the launcher: just the face ─────────────────────────────────────────── */
/* in from the corner by a fingertip, so it reads as part of the page rather
   than a browser badge (owner, 2026-10-03) */
.vn-launch { position: fixed; inset-inline-end: 32px; bottom: 30px; z-index: 70; padding: 0; border: 0; background: none;
  cursor: pointer; transition: opacity .2s, transform .2s var(--ease-pop, ease); }
.vn-launch .vn-fox img { box-shadow: 0 8px 20px -6px rgb(14 42 61 / .45), 0 0 0 2px var(--surface); }
.vn-launch:hover .vn-fox img, .vn-launch:focus-visible .vn-fox img { animation: vn-tilt .7s ease; }
.vn-launch:hover .vn-fox-ring, .vn-launch:focus-visible .vn-fox-ring { animation: vn-swing 1s ease; }
.vn-launch:active .vn-face { transform: scale(.94); }
.vn-launch:focus-visible { outline: none; }
.vn-launch:focus-visible .vn-fox img { outline: 2px solid var(--seal); outline-offset: 4px; }
/* a speech bubble, to the left of the face */
.vn-launch-tip { position: absolute; inset-inline-end: 68px; bottom: 30px; white-space: nowrap; padding: 8px 12px;
  border-radius: 14px 14px 4px 14px; background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  font: 600 13px/1.2 var(--font-body); box-shadow: 0 8px 22px -10px rgb(14 42 61 / .4);
  opacity: 0; transform: translateY(4px) scale(.96); transform-origin: 100% 100%; pointer-events: none;
  transition: opacity .15s, transform .15s; }
/* A list's selection bar is up at the foot of the page: the greeting would sit
   over its last button ("מעקב"), so it waits; the fox itself stays. */
body:has(.wb-bulk:not([hidden])) .vn-launch-tip { display: none; }
.vn-tip-new { display: none; }
/* on hover (a pointer that can hover: a tap would leave it stuck) or focus */
@media (hover: hover) { .vn-launch:hover .vn-launch-tip { opacity: 1; transform: none; } }
.vn-launch:focus-visible .vn-launch-tip { opacity: 1; transform: none; }
/* a public page's line (data-greet): out by itself for 5 seconds on arrival;
   a tap on it opens the chat, as the face does */
.vn.is-greet:not(.is-open) .vn-launch-tip { opacity: 1; transform: none; pointer-events: auto; cursor: pointer; }
/* while it says it, she glances toward her words and the compass makes one
   half turn and settles — once, slowly, then stillness. The words sit on the
   page's side of her: left of her in the app (RTL, she is in the left corner),
   right of her on the public sites (she takes the right corner there). */
.vn { --vn-glance: -8deg; }
[dir="rtl"] .vn:not(.is-pub) { --vn-glance: 8deg; }
.vn.is-greet:not(.is-open) .vn-launch .vn-fox img { animation: vn-glance 1.6s ease-in-out .2s 1; }
.vn.is-greet:not(.is-open) .vn-launch .vn-fox-ring { animation: vn-half 1.8s cubic-bezier(.3, .7, .3, 1) .2s 1; }
@keyframes vn-glance { 0%, 100% { transform: none; } 35%, 65% { transform: rotate(var(--vn-glance)); } }
@keyframes vn-half { 0% { transform: rotate(0); } 70% { transform: rotate(190deg); } 100% { transform: rotate(180deg); } }
/* the first page of someone who never opened her: the introduction instead */
.vn.is-first .vn-tip-hover { display: none; }
.vn.is-first .vn-tip-new { display: inline; }
/* the first visit: it says hello by itself for a few seconds */
.vn.is-new .vn-launch-tip { animation: vn-say 5s ease 1s both; }
.vn.is-new .vn-tip-hover { display: none; }
.vn.is-new .vn-tip-new { display: inline; }
/* hovering says only "צריכים עזרה?" — on the first visit too; the hello above
   is the one-time greeting that shows by itself (owner, 2026-09-26) */
.vn.is-new .vn-launch:hover .vn-tip-new { display: none; }
.vn.is-new .vn-launch:hover .vn-tip-hover { display: inline; }
.vn.is-new .vn-launch .vn-fox img { animation: vn-tilt .7s ease 1.2s 2; }
.vn.is-new .vn-launch .vn-fox-ring { animation: vn-swing 1s ease 1.2s 2; }
@keyframes vn-say { 0% { opacity: 0; transform: translateY(4px) scale(.96); } 8%, 88% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(4px) scale(.96); } }
.vn.is-open .vn-launch { transform: scale(.85); opacity: 0; pointer-events: none; }

/* beside each reply: the AI sparkle in a pale circle, as TenderScan's AI chat */
.vn-ava { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  margin-top: 2px; background: var(--seal-wash); color: var(--seal); }
.vn-hello-face { margin-bottom: 2px; }

/* ── the panel ───────────────────────────────────────────────────────────── */
.vn-grab { display: none; }
.vn-panel.is-dragged { animation: none; }
.vn-panel { position: fixed; inset-inline-end: 22px; bottom: 22px; z-index: 71; width: 400px;
  height: min(640px, calc(100vh - 110px)); display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--vn-shadow); overflow: hidden; transform-origin: 100% 100%;
  animation: vn-open .22s var(--ease-pop, ease) both; }
@keyframes vn-open { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }

.vn-head { display: flex; align-items: center; gap: 11px; padding: 12px 10px 12px 14px;
  background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); }
.vn-head-t { flex: 1; min-width: 0; }
.vn-head-t h2 { margin: 0; font: 600 16px/1.1 "Sora", var(--font-body); letter-spacing: -.01em; color: var(--ink); }
.vn-head-t p { margin: 3px 0 0; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); }
.vn-live { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.vn-icon-btn { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 9px;
  background: transparent; color: var(--ink-soft); cursor: pointer; }
.vn-icon-btn:hover { background: var(--wash); color: var(--ink); }
.vn-icon-btn:focus-visible { outline: 2px solid var(--seal); outline-offset: 1px; }

.vn-where { display: flex; align-items: center; gap: 6px; padding: 8px 16px 0; font-size: 12px; color: var(--ink-soft); }
.vn-where b { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 250px; display: inline-block; vertical-align: bottom; }
.vn-where svg { color: var(--ink-soft); flex: none; }

/* ── the conversation ────────────────────────────────────────────────────── */
.vn-log { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 12px;
  overscroll-behavior: contain; }
/* a panel redrawn on a new page, and messages already read, stay still */
.vn.is-restored .vn-panel, .vn-msg.is-still { animation: none; }
.vn.is-restored .vn-launch, .vn.is-arriving * { transition: none !important; }
.vn-msg { display: flex; gap: 9px; align-items: flex-start; max-width: 100%; animation: vn-in .2s ease both; }
@keyframes vn-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.vn-msg.is-user { justify-content: flex-end; }
.vn-msg.is-user .vn-bubble { background: var(--vn-user); color: var(--vn-on-user); padding: 8px 13px; border-radius: 14px 14px 4px 14px; max-width: 82%; }
.vn-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.vn-bubble { padding: 3px 0; border-radius: 0; background: var(--vn-bubble); font-size: 14px; line-height: 1.5;
  overflow-wrap: anywhere; align-self: flex-start; max-width: 100%; }
.vn-bubble.is-ai::after { content: "AI"; margin-inline-start: 7px; padding: 1px 5px; border-radius: 5px; font-size: 10px; font-weight: 700;
  letter-spacing: .04em; color: var(--seal); background: var(--seal-wash); vertical-align: 1px; }

/* the welcome */
.vn-hello { padding: 6px 4px 2px; }
.vn-hello h3 { margin: 10px 0 4px; font: 600 18px/1.25 "Sora", var(--font-body); letter-spacing: -.01em; color: var(--ink); }
.vn-hello p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.vn-abilities { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.vn-ab { display: flex; flex-direction: column; gap: 3px; padding: 10px 11px; border: 0; border-radius: 10px;
  background: var(--wash); color: var(--ink); text-align: start; font: inherit; cursor: pointer; transition: background .15s; }
.vn-ab:hover { background: var(--seal-wash); }
.vn-ab:focus-visible { outline: 2px solid var(--seal); outline-offset: 1px; }
.vn-ab b { font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.vn-ab b svg { color: var(--ink-soft); flex: none; }
.vn-ab span { font-size: 12px; color: var(--ink-soft); line-height: 1.35; }

/* cards */
.vn-card { border: 0; border-radius: 10px; background: var(--wash); overflow: hidden; font-size: 13.5px; }
.vn-card-t { padding: 9px 12px 0; font-weight: 500; color: var(--ink); line-height: 1.35; }
.vn-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; }
.vn-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12.5px;
  background: var(--surface); color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.vn-chip.is-link { text-decoration: none; cursor: pointer; transition: background .15s, color .15s; }
.vn-chip.is-link:hover { background: var(--seal-wash); color: var(--seal); }
.vn-chip.is-link:focus-visible { outline: 2px solid var(--seal); outline-offset: 1px; }
.vn-note { padding: 0 12px 10px; font-size: 12.5px; color: var(--ink-soft); }
/* a list's count line, under its title (the brief's "3 מאתמול · 18 השבוע") */
.vn-note-top { padding: 2px 12px 0; font-size: 12px; }
.vn-list { list-style: none; margin: 0; padding: 4px; }
.vn-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px 9px;
  border-radius: 9px; color: var(--ink); text-decoration: none; }
.vn-list a:hover { background: var(--surface); }
.vn-list a:focus-visible { outline: 2px solid var(--seal); outline-offset: -2px; }
.vn-list b { font-weight: 500; font-size: 13.5px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vn-list small { grid-column: 1; font-size: 12px; color: var(--ink-soft); }
.vn-list .vn-go { grid-column: 2; grid-row: 1 / span 2; color: var(--ink-soft); }
.vn-list a:hover .vn-go { color: var(--seal); }
.vn-facts { margin: 0; padding: 8px 12px 10px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; }
.vn-facts dt { color: var(--ink-soft); font-size: 12.5px; white-space: nowrap; }
.vn-facts dd { margin: 0; color: var(--ink); font-size: 13px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.vn-text { padding: 8px 12px 10px; margin: 0; color: var(--ink); line-height: 1.55; }
/* insights / next steps: short lines, a dot each */
.vn-points { margin: 0; padding: 8px 12px 10px; padding-inline-start: 28px; display: grid; gap: 6px;
  color: var(--ink); line-height: 1.5; }
/* side by side: a column per tender; a row that differs is marked, the tender
   an aspect favours carries a ✓ */
.vn-cmp-wrap { overflow-x: auto; padding: 4px 6px 6px; }
.vn-cmp { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12.5px; }
.vn-cmp th, .vn-cmp td { padding: 6px; text-align: start; vertical-align: top; overflow-wrap: anywhere; line-height: 1.45; }
.vn-cmp thead th { border-bottom: 1px solid var(--line); }
.vn-cmp thead th:first-child, .vn-cmp tbody th { width: 26%; }
/* three to six tenders: each column stays readable, the panel scrolls sideways */
.vn-cmp.is-wide { min-width: calc(84px + var(--vn-cols, 3) * 140px); }
.vn-cmp.is-wide thead th:first-child, .vn-cmp.is-wide tbody th { width: 84px; }
.vn-cmp tbody th { color: var(--ink-soft); font-weight: 500; }
.vn-cmp td { color: var(--ink); font-variant-numeric: tabular-nums; }
.vn-cmp tbody tr + tr > * { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.vn-cmp tr.is-diff th { color: var(--ink); }
.vn-cmp td.is-best { background: color-mix(in srgb, var(--ok) 10%, transparent); }
.vn-cmp-ok { margin-inline-start: 5px; color: var(--ok); font-weight: 700; }
.vn-cmp-tag { display: block; font-size: 11px; font-weight: 600; color: var(--seal); }
.vn-cmp-name { display: block; margin-top: 2px; font-weight: 500; color: var(--ink); text-decoration: none; }
a.vn-cmp-name:hover { text-decoration: underline; }
.vn-cmp-open { display: block; margin: 0 12px 10px auto; padding: 4px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; }
.vn-cmp-open:hover { background: var(--seal-wash); color: var(--seal); }
.vn-cmp-full { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px;
  background: rgb(14 26 34 / .45); }
.vn-cmp-sheet { width: min(980px, 100%); max-height: calc(100vh - 32px); overflow: auto; display: grid; gap: 10px;
  padding: 14px 16px 16px; border-radius: 16px; background: var(--surface); color: var(--ink);
  box-shadow: 0 24px 60px -18px rgb(0 0 0 / .45); }
.vn-cmp-bar { display: flex; align-items: center; justify-content: space-between; }
.vn-cmp-bar b { font: 600 16px/1.2 "Sora", var(--font-body); }
.vn-cmp-sheet .vn-cmp { font-size: 14px; }
.vn-cmp-sheet .vn-cmp th, .vn-cmp-sheet .vn-cmp td { padding: 9px 10px; }
.vn-cmp-sheet .vn-cmp-open { display: none; }
.vn-cmp-sheet .vn-card { background: var(--wash); }
.vn-card-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px;
  color: var(--seal); font-weight: 500; font-size: 13px; text-decoration: none; }
.vn-card-link:hover { background: var(--surface); }
.vn-card-link:focus-visible { outline: 2px solid var(--seal); outline-offset: -2px; }
.vn-card > .vn-card-link:first-child { border-top: 0; }

/* navigating */
.vn-nav { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px;
  background: var(--wash); color: var(--ink-soft); font-weight: 500; font-size: 13.5px; }
.vn-nav-bar { flex: 1; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.vn-nav-bar i { display: block; height: 100%; width: 40%; border-radius: 3px; background: var(--ink-soft);
  animation: vn-slide .9s ease-in-out infinite; }
@keyframes vn-slide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* confirm */
.vn-confirm { border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.vn-confirm-t { font-weight: 500; line-height: 1.35; }
.vn-confirm-s { font-size: 13px; color: var(--ink-soft); }
.vn-confirm-b { display: flex; gap: 8px; margin-top: 2px; }
.vn-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 15px; border-radius: 999px; border: 1px solid transparent;
  font: 500 13px/1.2 var(--font-body); cursor: pointer; }
/* Vane's own buttons are plain: an ink pill and an outline pill, not the
   app's navy-with-an-orange-line — it's a chat, not a form */
.vn-btn-go { background: var(--vn-go); color: var(--vn-on-go); }
.vn-btn-go:hover { background: var(--vn-go-hover); }
.vn-btn-no { background: transparent; color: var(--ink-soft); border-color: var(--line); }
.vn-btn-no:hover { color: var(--ink); border-color: var(--line-hover); }
.vn-btn:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }
.vn-btn[disabled] { opacity: .6; cursor: progress; }
.vn-done { display: flex; align-items: center; gap: 7px; color: var(--ok); font-weight: 500; font-size: 13.5px; }
/* a line of its own ("Opened …"): its first line level with the avatar
   beside it — a long name wraps, and centring the two lines put it below
   the avatar (owner, 2026-09-27) */
.vn-body > .vn-done:only-child { align-items: flex-start; margin-top: 2px; padding-top: 4px;
  line-height: 20px; }
.vn-body > .vn-done:only-child > svg { flex: none; margin-top: 2.5px; }
.vn-err { color: var(--bad); font-size: 13px; }

/* typing */
/* a reply being written: a caret after the words so far; its cards and the
   suggestions wait, then settle in */
.vn-bubble.is-writing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-inline-start: 2px;
  vertical-align: -2px; border-radius: 1px; background: var(--seal); animation: vn-caret .75s steps(1) infinite; }
@keyframes vn-caret { 50% { opacity: 0; } }
.vn-later { opacity: 0; transform: translateY(6px); transition: opacity .28s ease, transform .28s ease; }
.vn-later.is-in { opacity: 1; transform: none; }
.vn-later.is-in .vn-rise { animation: vn-in .3s ease both; }
.vn-sugs { transition: opacity .25s ease; }
.vn-sugs.is-waiting { opacity: 0; pointer-events: none; }
.vn-typing { display: inline-flex; gap: 4px; padding: 10px 0; }
.vn-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-soft); opacity: .5; animation: vn-dot 1.1s infinite ease-in-out; }
.vn-typing i:nth-child(2) { animation-delay: .15s; }
.vn-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes vn-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-4px); opacity: .9; } }

/* suggestions + the composer */
.vn-sugs { display: flex; gap: 6px; padding: 4px 14px 8px; overflow-x: auto; scrollbar-width: none; flex: none; }
.vn-sugs::-webkit-scrollbar { display: none; }
.vn-sug { flex: none; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: transparent;
  color: var(--ink-soft); font: 400 12.5px/1.2 var(--font-body); cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s; }
.vn-sug:hover { border-color: var(--line-hover); color: var(--ink); }
/* chips about the ticked tenders: in the seal's colour, so they read as about them */
.vn-sugs.is-marks .vn-sug { border-color: color-mix(in srgb, var(--seal) 45%, var(--line)); color: var(--seal);
  background: var(--seal-wash); }
.vn-sug:focus-visible { outline: 2px solid var(--seal); outline-offset: 1px; }
.vn-form { display: flex; align-items: flex-end; gap: 6px; margin: 0 12px; padding: 4px 4px 4px 12px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface); transition: border-color .15s; flex: none; }
.vn-form:focus-within { border-color: var(--line-hover); }
.vn-input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); resize: none; outline: none;
  font: 400 14.5px/1.45 var(--font-body); padding: 6px 0; max-height: 120px; }
.vn-input::placeholder { color: var(--ink-soft); opacity: .85; }
.vn-send { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; border: 0; cursor: pointer;
  background: transparent; color: var(--seal); transition: background .15s, color .15s, opacity .15s; }
.vn-send:hover:not([disabled]) { background: var(--wash); }
.vn-send[disabled] { color: var(--ink-soft); opacity: .45; cursor: default; }
.vn-send:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }
.vn-foot { margin: 0; padding: 6px 14px 9px; font-size: 11px; color: var(--ink-soft); text-align: center; flex: none; opacity: .85; }

/* ── a phone: a bottom sheet ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .vn-launch { inset-inline-end: 20px; bottom: 22px; }
  .vn-launch .vn-face { width: 54px; height: 54px; }
  .vn-launch-tip { inset-inline-end: 60px; bottom: 26px; }
  /* A sheet as tall as what it holds, never more than 60% of the screen
     (owner, 2026-09-26: at 88% it hid the page). The conversation scrolls
     inside it. */
  .vn-panel { inset-inline-start: 0; inset-inline-end: 0; bottom: 0; width: auto; height: auto;
    max-height: min(60dvh, calc(100dvh - 40px)); border-radius: 18px 18px 0 0;
    border-bottom: 0; transform-origin: 50% 100%; }
  .vn-log { flex: 1 1 auto; }
  /* the sheet's grab bar: drag it (or the header) down to close */
  .vn-grab { display: block; position: relative; z-index: 2; height: 16px; margin-bottom: -16px;
    touch-action: none; cursor: grab; }
  .vn-grab::before { content: ""; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px;
    margin-left: -20px; border-radius: 2px; background: var(--line-hover, var(--line)); }
  .vn-head { touch-action: none; }
  /* the grab bar lies over the header's top edge: the face starts clear of
     it, and a sheet dragged to the whole screen clears the notch too */
  .vn-head { padding-top: 20px; }
  .vn-panel.is-full .vn-head { padding-top: calc(20px + env(safe-area-inset-top, 0px)); }
  .vn-panel.is-full { border-radius: 0; }   /* dragged up to the whole screen */
  /* a new chat fits the sheet: the header already shows צופית, and the six
     boxes say what the intro says, so the boxes sit right above the chips */
  .vn-hello .vn-hello-face, .vn-hello p { display: none; }
  .vn-hello { padding-top: 0; }
  .vn-hello h3 { margin: 4px 0 0; font-size: 16px; }
  .vn-ab { padding: 8px 10px; }
  .vn-ab span { font-size: 11.5px; }
  .vn-input { font-size: 16px; }               /* no zoom on focus (iOS) */
  .vn-abilities { grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
  .vn-icon-btn { width: 40px; height: 40px; }
  .vn-where b { max-width: 60vw; }
}

/* "Ask Vane about this tender": a tab on the side of an opened tender. The
   dock is a zero-height sticky strip at the top of the details, so the tab
   rides down beside them while they scroll and leaves when they end; the tab
   hangs off the details' right edge (inside it when the page has no room).
   It slides out each time the details open — a hidden box restarts its
   animations when shown — and the fox tilts hello as it lands. */
/* --vn-top: where the tab sits below the box's top (lined up with a card's
   straight edge on the buyer page); stuck, it settles 10px under the top bar */
.vn-dock { position: sticky; top: calc(94px - var(--vn-top, 10px)); z-index: 6; height: 0; }
.vn-tab { position: absolute; top: var(--vn-top, 10px); inset-inline-start: calc(100% + var(--vn-out, 0px)); display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 58px; margin: 0; padding: 9px 4px 8px; border: 1px solid var(--line); border-inline-start: 0; border-radius: 0 14px 14px 0;
  background: var(--surface); color: var(--ink); box-shadow: 6px 8px 20px -12px rgb(14 42 61 / .35);
  font: 600 11px/1.15 var(--font-body); text-align: center; cursor: pointer;
  animation: vn-tab-in .32s var(--ease-pop, cubic-bezier(.2, .9, .3, 1.2)) .08s both;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.vn-tab .vn-fox img { box-shadow: 0 0 0 2px var(--surface); animation: vn-tilt .7s ease .4s; }
.vn-tab .vn-fox-ring { animation: vn-swing 1s ease .4s; }
.vn-tab:hover { background: var(--seal-wash); color: var(--seal); box-shadow: 8px 10px 24px -12px rgb(14 42 61 / .45); }
.vn-tab:hover .vn-fox img { animation: vn-tilt .7s ease; }
.vn-tab:hover .vn-fox-ring { animation: vn-swing 1s ease; }
.vn-tab:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }
/* No room beside the details (a narrower window): the tab never floats over
   what is written there, nor rides down over it while they scroll — it is a
   small pill on its own line at the top of the details, at the reading end. */
.vn-dock.is-inside { position: static; height: auto; display: flex; justify-content: flex-end;
  margin-block-end: 10px; }
.vn-dock.is-empty { display: none; }
.vn-dock.is-inside .vn-tab, [dir="rtl"] .vn-dock.is-inside .vn-tab,
.vn-tab.is-inline, [dir="rtl"] .vn-tab.is-inline { position: static; flex-direction: row;
  width: auto; gap: 7px; padding-block: 4px; padding-inline: 5px 12px; border: 1px solid var(--line);
  border-radius: 999px; box-shadow: none; font-size: 12px; animation-name: vn-tab-pop; }
.vn-dock.is-inside .vn-tab .vn-fox, .vn-tab.is-inline .vn-fox { --vn-size: 22px !important; }
/* A Tracking card clips to its rounded corners (overflow: hidden), which
   would cut the tab off and stop it riding down. While one is open with the
   tab, it lets the tab out and its two parts round their own corners. */
.saved-card:has(> .sc-detail:not([hidden]) > .vn-dock) { overflow: visible; }
.saved-card:has(> .sc-detail:not([hidden]) > .vn-dock) > .sc-row {
  border-radius: calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0; }
.saved-card:has(> .sc-detail:not([hidden]) > .vn-dock) > .sc-detail {
  border-radius: 0 0 calc(var(--r-card) - 1px) calc(var(--r-card) - 1px); }
/* All tenders: the list clips to its rounded corners (overflow: clip) the
   same way */
.tl:has(.tl-detail:not([hidden]) > .vn-dock) { overflow: visible; }
.tl:has(.tl-detail:not([hidden]) > .vn-dock) > :first-child {
  border-top-left-radius: inherit; border-top-right-radius: inherit; }
.tl:has(.tl-detail:not([hidden]) > .vn-dock) > :last-child {
  border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
@keyframes vn-tab-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes vn-tab-pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .vn-tab, .vn-tab .vn-fox img, .vn-tab .vn-fox-ring { animation: none !important; }
}
/* pinned: the "About …" line and its × */
.vn-unpin { display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-inline-start: auto; padding: 0;
  border: 0; border-radius: 6px; background: none; color: var(--ink-soft); cursor: pointer; }
.vn-unpin:hover { background: var(--wash); color: var(--ink); }
.vn-unpin:focus-visible { outline: 2px solid var(--seal); outline-offset: 1px; }

/* "Did this help?" — small words at the foot of an answer, not buttons to press */
.vn-fb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; font-size: 12.5px; color: var(--ink-soft);
  animation: vn-in .2s ease both; }
.vn-fb-q { margin-inline-end: 2px; }
.vn-fb-a { padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink);
  font: 500 12.5px/1.4 var(--font-body); cursor: pointer; transition: border-color .15s, background .15s; }
.vn-fb-a:hover { border-color: var(--line-hover); background: var(--wash); }
.vn-fb-a:focus-visible { outline: 2px solid var(--seal); outline-offset: 1px; }
/* after the reason: "מה ניסית לעשות?" — a small box in the same quiet style */
.vn-fb.is-note { flex-direction: column; align-items: stretch; gap: 6px; }
.vn .vn-fb-note { width: 100%; min-height: 0; margin: 0; padding: 6px 9px; resize: vertical;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink);
  font: 400 13px/1.45 var(--font-body); box-shadow: none; }
.vn .vn-fb-note:focus { outline: none; border-color: var(--line-hover); }
.vn-fb-bar { display: flex; gap: 6px; }
.vn-fb-a.is-quiet { border-color: transparent; color: var(--ink-soft); }
@media (max-width: 640px) { .vn .vn-fb-note { font-size: 16px; } }

/* ── tickling the fox (a click on it in the panel; clicks in a row build up) ── */
.vn-head, .vn-hello { position: relative; }
.vn-head .vn-fox, .vn-hello .vn-fox { cursor: pointer; border-radius: 50%; }
.vn-head .vn-fox:focus-visible, .vn-hello .vn-fox:focus-visible { outline: 2px solid var(--seal); outline-offset: 3px; }
.vn-fox.is-tickle-1 img { animation: vn-tk-wiggle .45s ease; }
.vn-fox.is-tickle-2 img { animation: vn-tk-bounce .55s cubic-bezier(.3, 1.6, .5, 1); }
.vn-fox.is-tickle-3 img { animation: vn-tk-shake .5s ease; }
.vn-fox.is-tickle-4 img { animation: vn-tk-bounce .55s cubic-bezier(.3, 1.6, .5, 1), vn-tk-shake .5s ease .1s; }
.vn-fox.is-tickle-4 .vn-fox-ring { animation: vn-tk-ring .8s ease; }
.vn-fox.is-tickle-5 img { animation: vn-tk-spin .7s cubic-bezier(.5, 0, .3, 1); }
.vn-fox.is-tickle-5 .vn-fox-ring { animation: vn-tk-ring .8s ease reverse; }
.vn-fox.is-tickle-6 img { animation: vn-tk-flip .8s cubic-bezier(.5, 0, .3, 1); }
.vn-fox.is-tickle-6 .vn-fox-ring { animation: vn-tk-ring .6s linear 2; }
@keyframes vn-tk-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); }
  50% { transform: rotate(10deg); } 75% { transform: rotate(-6deg); } }
@keyframes vn-tk-bounce { 0% { transform: translateY(0) scale(1); } 30% { transform: translateY(-9px) scale(1.08, .94); }
  60% { transform: translateY(0) scale(.94, 1.06); } 100% { transform: none; } }
@keyframes vn-tk-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-3px) rotate(-4deg); }
  40%, 80% { transform: translateX(3px) rotate(4deg); } }
@keyframes vn-tk-spin { from { transform: rotate(0) scale(1); } 50% { transform: rotate(200deg) scale(1.15); }
  to { transform: rotate(360deg) scale(1); } }
@keyframes vn-tk-flip { from { transform: perspective(200px) rotateY(0) scale(1); }
  50% { transform: perspective(200px) rotateY(180deg) scale(1.18); } to { transform: perspective(200px) rotateY(360deg) scale(1); } }
@keyframes vn-tk-ring { to { transform: rotate(360deg); } }
/* sparks and hearts flying off it */
.vn-tk-p { position: absolute; z-index: 3; pointer-events: none; font-size: 12px; line-height: 1; color: #FFB23F;
  transform: translate(-50%, -50%); animation: vn-tk-fly .85s ease-out forwards; }
.vn-tk-p.is-heart { color: #FF6F91; font-size: 13px; }
@keyframes vn-tk-fly { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.6); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.2) rotate(40deg); } }
/* what it says about it, beside it */
.vn-tk-say { position: absolute; z-index: 4; pointer-events: none; padding: 4px 9px; border-radius: 10px 10px 10px 3px;
  background: var(--vn-navy); color: #fff; font: 600 12px/1.3 var(--font-body);
  /* one line when it fits; the longest lines wrap rather than run off a phone */
  width: max-content; max-width: min(220px, 60vw);
  animation: vn-tk-pop .18s ease-out both; transition: opacity .3s ease; }
[dir="rtl"] .vn-tk-say { border-radius: 10px 10px 3px 10px; }
.vn-tk-say.is-gone { opacity: 0; }
@keyframes vn-tk-pop { from { opacity: 0; transform: translateY(4px) scale(.9); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .vn *, .vn *::before, .vn *::after { animation: none !important; transition: none !important; }
  .vn-log { scroll-behavior: auto; }
}
@media print { .vn { display: none !important; } }

/* the app styles every textarea (border, focus ring); the composer draws its own */
.vn .vn-input, .vn .vn-input:focus, .vn .vn-input:focus-visible { border: 0; box-shadow: none; outline: none;
  background: transparent; border-radius: 0; min-height: 0; margin: 0; width: auto; }

/* the "On …" line stays one line: the page name gives way, the hint keeps its words */
.vn-where-t { display: flex; align-items: baseline; gap: 4px; min-width: 0; white-space: nowrap; }
.vn-where-t b { max-width: none; flex: 0 1 auto; min-width: 0; }
.vn-where-t i { font-style: normal; flex: none; }
/* chips that run past the edge fade out, so it reads as "scroll for more" */
.vn-sugs { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent);
  padding-inline-end: 28px; }
/* right to left, the chips run off the LEFT edge: the fade goes there, not
   over the first chip */
[dir="rtl"] .vn-sugs { -webkit-mask-image: linear-gradient(270deg, #000 88%, transparent);
  mask-image: linear-gradient(270deg, #000 88%, transparent); }
/* the sheet covers the bottom of a phone: the "Cookie settings" pill steps aside
   while it is open (it is back the moment Vane closes) */
@media (max-width: 640px) {
  body:has(.vn.is-open) .cookie-reopen { visibility: hidden; }
  /* and both step aside while rows are selected: the bulk bar's buttons sit
     where they float */
  body:has(.wb-bulk:not([hidden])) .cookie-reopen,
  body:has(.wb-bulk:not([hidden])) .vn:not(.is-open) .vn-launch { visibility: hidden; }
}

/* ── Right-to-left (צופית): the tab hangs off the details' reading-side end,
   which is the left; transforms and one-sided corners mirrored ── */
[dir="rtl"] .vn-tab { border-inline-start: 0; border-inline-end: 1px solid var(--line);
  border-radius: 14px 0 0 14px; box-shadow: -6px 8px 20px -12px rgb(14 42 61 / .35); }
@keyframes vn-tab-in-rtl { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
[dir="rtl"] .vn-tab { animation-name: vn-tab-in-rtl; }
[dir="rtl"] .vn-msg.is-user .vn-bubble { border-radius: 14px 14px 14px 4px; }
[dir="rtl"] .vn-launch-tip { border-radius: 14px 14px 14px 4px; transform-origin: 0 100%; }
[dir="rtl"] .vn-panel { transform-origin: 0 100%; }

/* ── the public pages (public/_tzofit.html): צופית on a tender page of the
   free search and a post page of the jobs board. The Smart Agent's deck holds
   the reading side's END corner there, so she takes the START one — the
   corner the "שאלו AI" pill she replaced had — and her panel opens above
   her, her greeting to the page's side of her face. The tokens she reads
   (--surface, --ink, --line, --wash, --seal…) are the public theme's, dark
   swap included (style.css, html[data-ps-theme="dark"] body.ps-body). ── */
.vn.is-pub .vn-launch { inset-inline-end: auto; inset-inline-start: 32px; }
.vn.is-pub .vn-launch-tip { inset-inline-end: auto; inset-inline-start: 68px; }
.vn.is-pub .vn-panel { inset-inline-end: auto; inset-inline-start: 22px; }
[dir="rtl"] .vn.is-pub .vn-launch-tip { border-radius: 14px 14px 4px 14px; transform-origin: 100% 100%; }
[dir="rtl"] .vn.is-pub .vn-panel { transform-origin: 100% 100%; }
/* the public dark theme's own answers to the panel's fixed shades */
html[data-ps-theme="dark"] body.ps-body .vn {
  --vn-user: #1B2E3B;
  --vn-card: #1B2831;
  --vn-shadow: 0 24px 60px -18px rgb(0 0 0 / .7), 0 2px 10px rgb(0 0 0 / .45);
  --vn-go: #E7EDF1;
  --vn-go-hover: #FFFFFF;
  --vn-on-go: #111A20;
}
/* the free site paints every submit button as its own (body.il-pub
   button[type="submit"]: a blue fill with the orange base line) — her send
   arrow stays hers */
.vn.is-pub .vn-send { background: transparent; color: var(--seal); box-shadow: none; padding: 0;
  border-radius: 8px; line-height: 1; }
.vn.is-pub .vn-send:hover:not([disabled]) { background: var(--wash); }
.vn.is-pub .vn-send[disabled] { color: var(--ink-soft); background: transparent; }
/* the free site's light theme on a dark-preferring system: her scrollbars
   are the light page's, not the system's */
html:not([data-ps-theme="dark"]) body.ps-body .vn-panel { color-scheme: light; }
/* "מה קורה לשאלות שלכם" — to the privacy section, at its heading */
.vn-foot-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.vn-foot-link:hover { color: var(--seal); }
/* the conversation follows the visitor: where it moved to another item */
.vn-divider { display: flex; align-items: center; gap: 10px; justify-content: center;
  color: var(--ink-soft); font-size: 12px; font-weight: 500; }
.vn-divider::before, .vn-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.vn-divider span { max-width: 78%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* an item of her list already opened */
.vn-list li.is-visited b { color: var(--ink-soft); font-weight: 400; }
.vn-seen { grid-column: 2; grid-row: 1 / span 2; color: var(--ok); font-weight: 700; font-size: 13px; }
.vn-list li.is-visited .vn-go { display: none; }
/* "חזרה לרשימה": the list lights up for a moment where the log lands */
.vn-msg.is-flash .vn-card { animation: vn-flash 1.2s ease; }
@keyframes vn-flash { 0%, 40% { box-shadow: 0 0 0 2px var(--seal); } 100% { box-shadow: 0 0 0 0 transparent; } }
/* a phone that left her list for one of its items: the launcher offers to go on */
.vn-tip-cont { display: none; }
.vn.is-cont .vn-tip-cont { display: inline; }
.vn.is-cont .vn-tip-hover, .vn.is-cont .vn-tip-new { display: none; }
.vn.is-cont:not(.is-open) .vn-launch-tip { opacity: 1; transform: none; pointer-events: none; }
/* the Turnstile check, when a question needs one, above the composer */
.vn-ts { flex: none; padding: 0 14px 8px; }
@media (max-width: 640px) {
  .vn.is-pub .vn-launch { inset-inline-start: 20px; }
  /* the line wraps short of the Smart Agent's deck in the other corner */
  .vn.is-pub .vn-launch-tip { inset-inline-start: 60px; width: max-content; max-width: calc(100vw - 192px);
    white-space: normal; text-wrap: balance; text-align: start; }
  .vn.is-pub .vn-panel { inset-inline: 0; }
  body:has(.vn.is-pub.is-open) .ps-consent { visibility: hidden; }
}

/* ── a support ticket through her (static/assistant.js, the ticket flow) ──
   The foot is one row: the pill at the start, the panel's note beside it
   (never under it — on a phone the note wraps to two short lines instead).
   The pill: small words and a line icon, flat like the chips — not a form's
   button. While the steps run it is hidden but keeps its room, so the row
   does not move; her questions' choices are the chips' look, and the
   summary is a confirm card. */
.vn-foot-row { display: flex; align-items: center; gap: 8px; flex: none; padding: 7px 12px 9px; }
.vn-foot-row .vn-foot { flex: 1 1 auto; min-width: 0; padding: 0; text-align: start; line-height: 1.35; }
.vn-foot-row:not(:has(.vn-tk-open:not([hidden]))) .vn-foot { text-align: center; }
.vn-tk-open { display: inline-flex; flex: none; align-items: center; gap: 5px; padding: 4px 10px 4px 9px; border: 1px solid var(--line);
  border-radius: 999px; background: transparent; color: var(--ink-soft); font: 500 12px/1.3 var(--font-body);
  white-space: nowrap; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.vn-tk-open svg { flex: none; }
.vn-tk-open:hover { color: var(--ink); border-color: var(--line-hover); background: var(--wash); }
.vn-tk-open:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }
.vn.is-ticket .vn-tk-open { visibility: hidden; }
.vn.is-ticket .vn-sugs { display: none; }
/* the guide's answer offered before the ticket */
.vn-tk-help .vn-text { padding-top: 6px; }
/* the free site paints every button as its own: hers stays flat */
.vn.is-pub .vn-tk-open { box-shadow: none; }
.vn.is-pub .vn-tk-open:hover { background: var(--wash); }
/* her choices under a question: the topics, and a quiet "ביטול" */
.vn-tk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vn-tk-chip { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--ink); font: 500 13px/1.25 var(--font-body); cursor: pointer; transition: border-color .15s, background .15s; }
.vn-tk-chip:hover { border-color: var(--line-hover); background: var(--wash); }
.vn-tk-chip:focus-visible { outline: 2px solid var(--seal); outline-offset: 1px; }
.vn-tk-chip.is-quiet { border-color: transparent; background: transparent; color: var(--ink-soft); font-weight: 400; }
.vn-tk-chip.is-quiet:hover { color: var(--ink); background: var(--wash); }
/* the summary before it is sent */
.vn-tk-card .vn-facts { padding: 0; }
.vn-tk-card .vn-facts dd { white-space: pre-line; max-height: 9.5em; overflow-y: auto; }
.vn-tk-done b { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
@media (max-width: 640px) {
  .vn-foot-row { gap: 8px; padding: 6px 12px 8px; }
  .vn-tk-open { padding: 6px 12px; font-size: 12.5px; }   /* a thumb's target */
  .vn-tk-chip { padding: 7px 13px; }
}

/* ── Beside the page, not in the screen's corner ──────────────────────────────
   On a wide screen the corner is far from everything a reader is looking at
   (owner, 2026-10-15, as on Bidvane). The face sits just outside the content's
   edge and the panel opens in the margin beside the content, 40px clear (the face 48px), so it
   hides nothing; 400px wide up to a 1920px screen, 480px at 2560. Where the
   margin is too narrow, max() puts both back in the corner as before. Logical
   sides, so the app's (inline-end) and the public site's (inline-start) mirror
   correctly in Hebrew. --vn-page: the width of what it sits beside. */
@media (min-width: 901px) {
  .vn { --vn-w: clamp(400px, 12.5vw + 160px, 480px);
    --vn-gut: calc((100vw - var(--vn-page, var(--maxw))) / 2 - 24px); }
  .vn .vn-panel { width: var(--vn-w); }
  .vn:not(.is-pub) .vn-launch { inset-inline-end: max(32px, calc(var(--vn-gut) - 84px)); }
  .vn:not(.is-pub) .vn-panel { inset-inline-end: max(22px, calc(var(--vn-gut) - 16px - var(--vn-w))); }
  .vn.is-pub .vn-launch { inset-inline-start: max(32px, calc(var(--vn-gut) - 84px)); }
  .vn.is-pub .vn-panel { inset-inline-start: max(22px, calc(var(--vn-gut) - 16px - var(--vn-w))); }
  /* the free search: beside the results column, or the notice */
  body:has(.ps-shell) .vn.is-pub { --vn-page: calc(720px + var(--grow) * .6667); }
  body:has(.pt-shell) .vn.is-pub { --vn-page: calc(1000px + var(--grow) * .9259); }
}

/* the jobs board: beside the list, the post, or the employers' grid */
@media (min-width: 901px) {
  body:has(.jb-list-main) .vn.is-pub { --vn-page: calc(860px + var(--grow) * .7963); }
  body:has(.jb-job) .vn.is-pub { --vn-page: calc(760px + var(--grow) * .7037); }
  body:has(.ps-wide.jb-main):not(:has(.jb-job, .jb-list-main)) .vn.is-pub { --vn-page: calc(960px + var(--grow) * .8889); }
}

/* a bar card (the jobs board's "who is hiring", fields, regions): label · a
   share bar · the number; a label that names a page is its link */
.vn-bars { list-style: none; margin: 0; padding: 8px 12px 10px; display: grid; gap: 7px; }
.vn-bars li { display: grid; grid-template-columns: minmax(0, 1fr) 72px auto; align-items: center; gap: 10px; font-size: 13px; }
.vn-bar-l { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.vn-bar-l { color: var(--accent, var(--ink)); text-decoration: none; }
a.vn-bar-l:hover, a.vn-bar-l:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
.vn-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.vn-bar i { display: block; height: 100%; border-radius: 3px; background: var(--seal, var(--accent)); }
.vn-bar-n { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); min-width: 3ch; text-align: end; }