/* Veterinary Medicine Application System: application styles.
   Tokens come from VetVerify.Ui/css/theme.css. Layout uses logical properties throughout, so the Arabic
   view mirrors without a second stylesheet.

   1  Base and type            7  Tables                 13  Registers and reference lists
   2  Shell: sidebar, top bar  8  Forms and controls     14  Assessment guide
   3  Page head                9  Messages and states    15  Public pages
   4  Text helpers and pills  10  Dashboard and lists    16  Narrow screens
   5  Cards and grids         11  The application screen 17  Motion and print
   6  Figures and charts      12  New application                                                    */

/* ── 1. Base and type ─────────────────────────────────────────────────────── */
:root {
  /* The gold of the Ministry logo. It marks and decorates; text and filled controls use --ui-accent,
     which is the same gold taken dark enough to read on white (5.4:1 against 4.5:1 for this one). */
  --ui-moccae-gold: #996F33;
  --ui-radius-lg: 12px;
  --vv-side: 264px;
  --vv-rail: 68px;
  --vv-top: 60px;
  --vv-pad: 32px;
  --vv-shadow: 0 1px 2px rgb(42 36 28 / .05);
  --vv-lift: 0 1px 2px rgb(42 36 28 / .05), 0 8px 20px -8px rgb(42 36 28 / .16);
  --vv-pop: 0 12px 32px rgb(42 36 28 / .14);
  /* Chart colours: one meaning each, the same as the pills. Amber waits, green is ready, steel blue is the
     proposed framework or a referral under it, red blocks, gold is a plain quantity, and the two greys are
     closed work and "none of these". Checked for colour-blind separation; every chart also names its parts. */
  --vv-c-warn: #BC7A0E;
  --vv-c-good: #1B7A43;
  --vv-c-brass: #35557A;
  --vv-c-bad: #A8291F;
  --vv-c-info: #5B7FA6;
  --vv-c-gold: #996F33;
  --vv-c-done: #8C8478;
  --vv-c-neutral: #B5AD9F;
  --vv-c-track: #EFEAE0;
  /* The edges of a phone: the notch, the rounded corners and the home bar. */
  --vv-safe-top: env(safe-area-inset-top, 0px);
  --vv-safe-bottom: env(safe-area-inset-bottom, 0px);
  --vv-safe-start: env(safe-area-inset-left, 0px);
  --vv-safe-end: env(safe-area-inset-right, 0px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgb(138 98 41 / .12); }
html.vv-noscroll { overflow: hidden; }
body {
  margin: 0;
  background: var(--ui-surface-page);
  color: var(--ui-ink);
  font: 14.5px/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
[dir="rtl"] { font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif; font-size: 15px; line-height: 1.65; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-inline-size: 0; }
a { color: var(--ui-accent); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
h1 { font-size: 26px; line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; color: var(--ui-ink); }
h2 { font-size: 15px; line-height: 1.4; font-weight: 600; }
h3 { font-size: 14px; font-weight: 600; }
[dir="rtl"] h1 { letter-spacing: 0; line-height: 1.45; }
bdi { unicode-bidi: isolate; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; border-radius: 4px; }
:where(h1, main)[tabindex="-1"]:focus { outline: none; }

.vv-app { min-block-size: 100vh; min-block-size: 100dvh; display: flex; flex-direction: column; }
.vv-sr { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.vv-icon { flex: none; display: inline-block; vertical-align: -0.2em; }
[dir="rtl"] .vv-flip { transform: scaleX(-1); }
.vv-skip { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; z-index: 100; padding: 8px 14px; border-radius: 6px; border: 0; background: var(--ui-inverse); color: #fff; font-weight: 600; cursor: pointer; transform: translateY(-200%); }
.vv-skip:focus-visible { transform: none; outline-color: #fff; }
.vv-iconbtn { display: inline-grid; place-items: center; inline-size: 36px; block-size: 36px; flex: none; padding: 0; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--ui-ink-3); cursor: pointer; transition: background-color .15s, color .15s; }
.vv-iconbtn:hover { background: var(--ui-surface-sunken); color: var(--ui-ink); }
.vv-iconbtn:active { background: var(--ui-surface-strong); }

/* The outline of the page, from the first paint until the live page is there (App.razor). */
.vv-boot { position: fixed; inset: 0; z-index: 5; display: flex; background: var(--ui-surface-page); animation: vv-boot-in .25s .2s both; }
body:has(.vv-app) .vv-boot { display: none; }
.vv-boot--public { flex-direction: column; }
.vv-boot-side { inline-size: var(--vv-side); flex: none; display: flex; flex-direction: column; gap: 10px; padding: 20px 14px; background: var(--ui-surface); border-inline-end: 1px solid var(--ui-line); }
.vv-boot-body { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; }
.vv-boot-top { block-size: var(--vv-top); flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-inline: var(--vv-pad); background: var(--ui-surface); border-block-end: 1px solid var(--ui-line); }
.vv-boot-main { inline-size: 100%; max-inline-size: 1560px; margin-inline: auto; padding: 28px var(--vv-pad); display: grid; gap: 20px; align-content: start; }
.vv-boot-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.vv-boot-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 20px; }
.vv-boot-auth { inline-size: min(440px, calc(100% - 32px)); margin: 72px auto; display: grid; gap: 16px; padding: 32px; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 12px; }
.vv-bone { display: block; block-size: 14px; border-radius: 8px; background: linear-gradient(100deg, var(--ui-surface-sunken) 40%, #F9F6F0 50%, var(--ui-surface-sunken) 60%) 0 0 / 200% 100%; animation: vv-shimmer 1.5s linear infinite; }
.vv-bone--logo { block-size: 56px; margin-block-end: 14px; }
.vv-bone--nav { block-size: 30px; }
.vv-bone--search { inline-size: min(420px, 55%); block-size: 38px; border-radius: 10px; }
.vv-bone--avatar { inline-size: 36px; block-size: 36px; border-radius: 50%; }
.vv-bone--h { inline-size: 220px; block-size: 28px; }
.vv-bone--lede { inline-size: min(460px, 80%); }
.vv-bone--tile { block-size: 112px; border-radius: var(--ui-radius-lg); }
.vv-bone--card { block-size: 260px; border-radius: var(--ui-radius-lg); }
.vv-bone--tall { block-size: 420px; }
.vv-bone--field, .vv-bone--btn { block-size: 40px; }

/* ── 2. Shell: sidebar, top bar ───────────────────────────────────────────── */
.vv-app.vv-shell { flex-direction: row; }
.vv-side {
  inline-size: var(--vv-side); flex: none; position: sticky; inset-block-start: 0; block-size: 100vh; block-size: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 8px; padding: 20px 14px 14px;
  background: var(--ui-surface); border-inline-end: 1px solid var(--ui-line);
}
.vv-side-head { display: flex; align-items: flex-start; gap: 8px; padding-block-end: 16px; border-block-end: 1px solid var(--ui-line); }
.vv-side-close { display: none; }
.vv-brand { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding-inline: 6px; color: inherit; min-inline-size: 0; }
.vv-brand:hover { text-decoration: none; }
.vv-brand-logo { display: block; inline-size: 100%; max-inline-size: 216px; block-size: auto; }
.vv-brand-mark { display: none; inline-size: 36px; block-size: 36px; border-radius: 9px; }
.vv-brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.vv-brand-text strong { font-size: 15px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--ui-accent); }
.vv-brand-text small { font-size: 12px; color: var(--ui-muted); }
[dir="rtl"] .vv-brand-text strong { letter-spacing: 0; font-size: 17px; line-height: 1.5; }
/* The logo already names the Ministry, so the written line is dropped when it is there. */
.vv-brand:has(.vv-brand-logo) .vv-brand-text small { display: none; }

.vv-side-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.vv-side-label { font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ui-muted); padding: 16px 12px 6px; }
[dir="rtl"] .vv-side-label { letter-spacing: 0; font-size: 12.5px; }
.vv-side-nav a {
  position: relative; display: flex; align-items: center; gap: 10px; min-block-size: 38px; padding: 7px 10px; color: var(--ui-ink-2); font-weight: 500;
  border-inline-start: 3px solid transparent; border-start-end-radius: 8px; border-end-end-radius: 8px;
  transition: background-color .15s, color .15s;
}
.vv-side-nav a .vv-icon { color: var(--ui-muted); transition: color .15s; }
.vv-side-nav a > span { flex: 1; min-inline-size: 0; }
.vv-side-nav a:hover { color: var(--ui-ink); background: var(--ui-surface-sunken); text-decoration: none; }
.vv-side-nav a:hover .vv-icon { color: var(--ui-ink-3); }
.vv-side-nav a:active { background: var(--ui-surface-strong); }
.vv-side-nav a.active { color: var(--ui-accent-strong); background: var(--ui-accent-tint); border-inline-start-color: var(--ui-moccae-gold); font-weight: 600; }
.vv-side-nav a.active .vv-icon { color: var(--ui-accent); }
.vv-side-nav a:focus-visible { outline-offset: -2px; }
.vv-side-nav a b { font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--ui-surface-sunken); color: var(--ui-ink-3); font-variant-numeric: tabular-nums; }
.vv-side-nav a.active b { background: var(--ui-surface); color: var(--ui-accent-strong); }
.vv-side-foot { display: flex; align-items: center; gap: 8px; min-block-size: 40px; padding: 10px 12px 0; font-size: 13px; color: var(--ui-muted); border-block-start: 1px solid var(--ui-line); }
.vv-side-foot:hover { color: var(--ui-accent); text-decoration: none; }
.vv-scrim { display: none; }
.vv-rail-btn { display: none; }
.vv-railtip { position: fixed; z-index: 80; padding: 6px 10px; border-radius: 6px; background: var(--ui-inverse); color: #fff; font-size: 12.5px; font-weight: 500; white-space: nowrap; pointer-events: none; box-shadow: var(--vv-pop); }
.vv-railtip[hidden] { display: none; }

/* On a wide screen the sidebar folds to a rail: icons with their names beside the pointer, counts as badges. The
   names stay in the page for a screen reader. The class is on <html>, set before the first paint (boot.js). */
@media (min-width: 1001px) {
  .vv-rail-btn { display: inline-grid; margin-inline-start: -8px; }
  .vv-rail { --vv-side: var(--vv-rail); }
  .vv-rail .vv-side { padding: 14px 10px 10px; overflow-x: hidden; scrollbar-width: none; }
  .vv-rail .vv-side-head { justify-content: center; padding-block-end: 12px; }
  .vv-rail .vv-brand { padding: 0; }
  .vv-rail .vv-brand-logo, .vv-rail .vv-brand-text { display: none; }
  .vv-rail .vv-brand-mark { display: block; }
  .vv-rail .vv-side-label { block-size: 1px; padding: 0; margin: 8px 10px; overflow: hidden; color: transparent; background: var(--ui-line); font-size: 0; }
  .vv-rail .vv-side-label:first-child { display: none; }
  .vv-rail .vv-side-nav a { justify-content: center; min-block-size: 44px; padding: 0; border-inline-start: 0; border-radius: 10px; }
  .vv-rail .vv-side-nav a.active { box-shadow: inset 0 0 0 1px var(--ui-accent-line); }
  .vv-rail .vv-side-nav a > span, .vv-rail .vv-side-foot > span:first-child { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .vv-rail .vv-side-nav a b { position: absolute; inset-block-start: 2px; inset-inline-end: 0; min-inline-size: 18px; padding: 0 5px; font-size: 10.5px; line-height: 17px; text-align: center; background: var(--ui-accent-fill); color: #fff; box-shadow: 0 0 0 2px var(--ui-surface); }
  .vv-rail .vv-side-nav a.active b { background: var(--ui-accent-fill); color: #fff; }
  .vv-rail .vv-side-nav a b.is-zero { display: none; }
  .vv-rail .vv-side-foot { justify-content: center; padding-inline: 0; }
}

.vv-body { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; }
.vv-top {
  position: sticky; inset-block-start: 0; z-index: 30; min-block-size: calc(var(--vv-top) + var(--vv-safe-top));
  display: flex; align-items: center; gap: 12px; padding: calc(10px + var(--vv-safe-top)) var(--vv-pad) 10px;
  background: rgb(255 255 255 / .92); backdrop-filter: saturate(1.4) blur(10px); border-block-end: 1px solid var(--ui-line);
}
.vv-menu-btn { display: none; }
.vv-top-right { display: flex; align-items: center; gap: 12px; margin-inline-start: auto; }
.vv-main { inline-size: 100%; max-inline-size: 1560px; margin-inline: auto; padding: 28px var(--vv-pad) calc(72px + var(--vv-safe-bottom)); display: flex; flex-direction: column; gap: 20px; }

/* Language switch and other two-way choices */
.vv-seg { display: inline-flex; padding: 3px; border-radius: 8px; background: var(--ui-surface-sunken); flex: none; }
.vv-seg button { border: 0; background: none; color: var(--ui-ink-3); min-block-size: 30px; padding: 4px 11px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; line-height: 1.2; transition: background-color .15s, color .15s; }
.vv-seg button:hover { color: var(--ui-ink); }
.vv-seg button.is-on { background: var(--ui-accent-fill); color: #fff; }
.vv-seg button[lang="ar"] { font-family: "IBM Plex Sans Arabic", var(--font-ui); }
.vv-seg--sm button { min-block-size: 28px; font-size: 12.5px; }
.vv-seg--sm button.is-on { background: var(--ui-surface); color: var(--ui-ink); box-shadow: 0 0 0 1px var(--ui-line-strong); }

/* Header search */
.vv-find { position: relative; flex: 1; max-inline-size: 560px; min-inline-size: 0; }
.vv-find-icon { position: absolute; inset-inline-start: 13px; inset-block-start: 50%; margin-block-start: -8px; color: var(--ui-muted); pointer-events: none; }
.vv-find-input { inline-size: 100%; block-size: 40px; padding-inline-start: 38px !important; border-radius: 10px; border-color: transparent; background: var(--ui-surface-sunken); text-overflow: ellipsis; }
.vv-find-input:hover:not(:focus) { border-color: var(--ui-line-strong) !important; }
.vv-find-input:focus-visible { background: var(--ui-surface); }
.vv-find-input::placeholder { color: var(--ui-muted); }
.vv-find-away { position: fixed; inset: 0; z-index: 40; }
.vv-find-list { position: absolute; inset-inline: 0; inset-block-start: calc(100% + 6px); z-index: 41; min-inline-size: min(440px, 90vw); background: var(--ui-surface); border: 1px solid var(--ui-line-strong); border-radius: var(--ui-radius-lg); box-shadow: var(--vv-pop); padding: 6px; display: flex; flex-direction: column; max-block-size: 70vh; overflow-y: auto; }
.vv-find-hit { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding: 8px 10px; border-radius: 8px; color: inherit; }
.vv-find-hit .vv-strong { overflow-wrap: anywhere; }
.vv-find-hit small { grid-column: 1 / -1; color: var(--ui-muted); font-size: 12.5px; }
.vv-find-hit:hover, .vv-find-hit.is-on { background: var(--ui-accent-tint); text-decoration: none; }
.vv-find-none { padding: 10px; color: var(--ui-muted); font-size: 13.5px; }
.vv-find-all { padding: 8px 10px; font-size: 13px; border-block-start: 1px solid var(--ui-line); margin-block-start: 4px; }

/* Account menu */
.vv-account > summary { gap: 10px; padding: 4px 8px 4px 4px; border-radius: 10px; }
[dir="rtl"] .vv-account > summary { padding: 4px 4px 4px 8px; }
.vv-item-value { margin-inline-start: auto; padding-inline-start: 12px; font-size: 12.5px; color: var(--ui-muted); }
.vv-item-value[lang="ar"] { font-family: "IBM Plex Sans Arabic", var(--font-ui); }
.vv-account > summary:hover, .vv-account[open] > summary { background: var(--ui-surface-sunken); }
.vv-avatar { inline-size: 36px; block-size: 36px; flex: none; border-radius: 50%; background: var(--ui-accent-fill); color: #fff; display: grid; place-items: center; font-weight: 600; }
.vv-user-text { display: flex; flex-direction: column; line-height: 1.25; text-align: start; max-inline-size: 280px; }
.vv-user-text strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vv-user-text small { color: var(--ui-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vv-account-chevron { color: var(--ui-muted); transition: transform .15s; }
.vv-account[open] .vv-account-chevron { transform: rotate(180deg); }
.vv-account .ui-dropdown__panel { min-inline-size: 250px; padding: 6px; box-shadow: var(--vv-pop); border-color: var(--ui-line-strong); z-index: 50; }
.vv-account-who { display: none; flex-direction: column; padding: 8px 12px 10px; margin-block-end: 6px; border-block-end: 1px solid var(--ui-line); line-height: 1.35; }
.vv-account-who small { color: var(--ui-muted); font-size: 12.5px; overflow-wrap: anywhere; }
.ui-dropdown__item { text-align: start; border: 0; background: none; cursor: pointer; font-family: inherit; color: var(--ui-ink-2); }
.ui-dropdown__item:hover { text-decoration: none; color: var(--ui-ink); }
.ui-dropdown__item .vv-icon { color: var(--ui-muted); }
.ui-dropdown__panel form { margin: 0; }
.vv-item-danger { color: var(--ui-bad) !important; }

/* Row menus: a three-dot button; the panel is placed by site.js so a scrolling table cannot clip it. */
.vv-rowmenu > summary { inline-size: 34px; block-size: 34px; padding: 0; justify-content: center; border-radius: 8px; color: var(--ui-ink-3); }
.vv-rowmenu > summary:hover, .vv-rowmenu[open] > summary { background: var(--ui-surface-sunken); color: var(--ui-ink); }
.vv-rowmenu .ui-dropdown__panel { min-inline-size: 220px; box-shadow: var(--vv-pop); border-color: var(--ui-line-strong); z-index: 60; text-align: start; white-space: normal; }

/* ── 3. Page head ─────────────────────────────────────────────────────────── */
.vv-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; }
.vv-head-text { min-inline-size: 0; flex: 1 1 420px; }
.vv-lede { margin-block-start: 6px; color: var(--ui-muted); max-inline-size: 78ch; }
.vv-head-actions { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.vv-head-actions .ui-field { min-inline-size: 240px; }
.vv-crumbs { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; margin-block-end: -8px; }
.vv-crumbs a { display: inline-flex; align-items: center; gap: 6px; color: var(--ui-muted); padding-block: 4px; }
.vv-crumbs a:hover { color: var(--ui-accent); text-decoration: none; }
.vv-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vv-actions--start { margin-block-start: 16px; }

/* ── 4. Text helpers and pills ────────────────────────────────────────────── */
.vv-muted { color: var(--ui-muted); }
.vv-small { font-size: 12.5px; }
.vv-strong { font-weight: 600; color: var(--ui-ink); }
a.vv-strong { color: var(--ui-ink); }
a.vv-strong:hover { color: var(--ui-accent); }
.vv-sub { font-size: 12.5px; color: var(--ui-muted); margin-block-start: 2px; }
.vv-mono { font-family: var(--font-mono); font-size: .9em; }
.vv-num { font-variant-numeric: tabular-nums; }
.vv-nowrap { white-space: nowrap; }
.vv-end { text-align: end; }
.vv-break { overflow-wrap: anywhere; }
.vv-measure { max-inline-size: 96ch; }
.vv-gap-top { margin-block-start: 14px; }
.vv-good { color: var(--ui-good); }
.vv-warn { color: var(--ui-warn); }
.vv-bad { color: var(--ui-bad); }
.vv-brass { color: var(--ui-brass); }
/* A tone as a background, as the fill or the stroke of a chart mark, and as a tinted badge behind an icon. */
.vv-bg-good { background: var(--vv-c-good); }
.vv-bg-info { background: var(--vv-c-info); }
.vv-bg-warn { background: var(--vv-c-warn); }
.vv-bg-bad { background: var(--vv-c-bad); }
.vv-bg-neutral { background: var(--vv-c-neutral); }
.vv-bg-brass { background: var(--vv-c-brass); }
.vv-bg-gold { background: var(--vv-c-gold); }
.vv-bg-done { background: var(--vv-c-done); }
.vv-fill-good { fill: var(--vv-c-good); }
.vv-fill-info { fill: var(--vv-c-info); }
.vv-fill-warn { fill: var(--vv-c-warn); }
.vv-fill-bad { fill: var(--vv-c-bad); }
.vv-fill-neutral { fill: var(--vv-c-neutral); }
.vv-fill-brass { fill: var(--vv-c-brass); }
.vv-fill-gold { fill: var(--vv-c-gold); }
.vv-fill-done { fill: var(--vv-c-done); }
.vv-stroke-good { stroke: var(--vv-c-good); }
.vv-stroke-info { stroke: var(--vv-c-info); }
.vv-stroke-warn { stroke: var(--vv-c-warn); }
.vv-stroke-bad { stroke: var(--vv-c-bad); }
.vv-stroke-neutral { stroke: var(--vv-c-neutral); }
.vv-stroke-brass { stroke: var(--vv-c-brass); }
.vv-stroke-gold { stroke: var(--vv-c-gold); }
.vv-stroke-done { stroke: var(--vv-c-done); }
.vv-tone-good { background: var(--ui-good-tint); color: var(--ui-good); }
.vv-tone-warn { background: var(--ui-warn-tint); color: #8A4B06; }
.vv-tone-bad { background: var(--ui-bad-tint); color: var(--ui-bad); }
.vv-tone-info { background: var(--ui-info-tint); color: var(--ui-info); }
.vv-tone-brass { background: var(--ui-brass-tint); color: var(--ui-brass); }
.vv-tone-gold { background: var(--ui-accent-tint); color: var(--ui-accent); }
.vv-tone-neutral { background: var(--ui-surface-sunken); color: var(--ui-ink-3); }
.vv-link { border: 0; background: none; padding: 0; color: var(--ui-accent); cursor: pointer; font-weight: 500; }
.vv-link:hover { text-decoration: underline; }
.vv-saved { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 500; color: var(--ui-good); }
.vv-you { margin-inline-start: 8px; padding: 1px 7px; border-radius: 4px; background: var(--ui-surface-sunken); font-size: 11.5px; font-weight: 600; color: var(--ui-ink-3); }

.vv-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.55; white-space: nowrap; background: var(--ui-surface-sunken); color: var(--ui-ink-3); }
.vv-pill--good { background: var(--ui-good-tint); color: var(--ui-good); }
.vv-pill--warn { background: var(--ui-warn-tint); color: #8A4B06; }
.vv-pill--bad { background: var(--ui-bad-tint); color: var(--ui-bad); }
.vv-pill--info { background: var(--ui-info-tint); color: var(--ui-info); }
.vv-pill--brass { background: var(--ui-brass-tint); color: var(--ui-brass); }
[dir="rtl"] .vv-pill { font-size: 12.5px; line-height: 1.7; }

.vv-list { display: flex; flex-direction: column; gap: 8px; }
.vv-list li { padding-inline-start: 16px; position: relative; }
.vv-list li::before { content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: .68em; inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--ui-faint); }
.vv-list--check li { padding-inline-start: 24px; }
.vv-list--check li::before { inset-inline-start: 2px; inset-block-start: .42em; inline-size: 11px; block-size: 6px; border-radius: 0; background: none; border-inline-start: 2px solid var(--ui-good); border-block-end: 2px solid var(--ui-good); transform: rotate(-45deg); }
[dir="rtl"] .vv-list--check li::before { transform: rotate(45deg); }
.vv-kv { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 8px 16px; margin-block-start: 12px; }
.vv-kv dt { color: var(--ui-muted); }
.vv-kv--tight { gap: 4px 16px; margin-block-start: 8px; font-size: 13.5px; }

/* ── 5. Cards and grids ───────────────────────────────────────────────────── */
.vv-card { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); padding: 20px 22px; box-shadow: var(--vv-shadow); min-inline-size: 0; }
.vv-card > h2 { margin-block-end: 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vv-card > p + p, .vv-card > ul + p { margin-block-start: 10px; }
.vv-card--flush { padding: 0; overflow: hidden; }
.vv-card--brass { border-color: var(--ui-brass-line); box-shadow: inset 0 3px 0 var(--ui-brass); }
.vv-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 14px 20px; border-block-end: 1px solid var(--ui-line-soft); }
.vv-card-head h2 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.vv-card-head--quiet { padding-block: 10px; background: var(--ui-surface); }
.vv-card-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px 16px; flex-wrap: wrap; margin-block-end: 16px; }
.vv-card-title h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vv-more { display: inline-flex; align-items: center; gap: 6px; min-block-size: 24px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.vv-card-note { margin-block-start: 14px; padding-block-start: 12px; border-block-start: 1px solid var(--ui-line-soft); font-size: 12.5px; color: var(--ui-muted); }
/* Nothing here yet: said plainly, with the way forward. */
.vv-hollow { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 44px 24px; text-align: center; }
.vv-hollow--inset { padding: 36px 24px 40px; }
.vv-hollow--wide { padding: 48px 28px 32px; }
.vv-hollow > h2, .vv-hollow > h3 { margin: 0; font-size: 16px; }
.vv-hollow > p { color: var(--ui-muted); max-inline-size: 62ch; }
.vv-hollow .vv-actions { margin-block-start: 10px; justify-content: center; }
.vv-hollow-mark { display: grid; place-items: center; inline-size: 56px; block-size: 56px; margin-block-end: 6px; border-radius: 50%; background: var(--ui-accent-tint); color: var(--ui-accent); box-shadow: 0 0 0 6px var(--ui-surface), 0 0 0 7px var(--ui-accent-line-soft); }
.vv-starts { inline-size: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; margin-block-start: 22px; text-align: start; }
.vv-starts a { display: flex; align-items: flex-start; gap: 12px; block-size: 100%; padding: 14px 16px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); color: inherit; transition: border-color .15s, background-color .15s; }
.vv-starts a:hover { border-color: var(--ui-accent); background: var(--ui-accent-tint); text-decoration: none; }
.vv-starts a > .vv-icon { margin-block-start: 2px; color: var(--ui-accent); }
.vv-starts strong { display: block; font-weight: 600; }
.vv-starts small { display: block; font-size: 12.5px; color: var(--ui-muted); }
.vv-card-foot { padding: 12px 20px; border-block-start: 1px solid var(--ui-line-soft); }
.vv-h-note { font-size: 12px; font-weight: 600; color: var(--ui-ink-3); padding: 0 7px; border-radius: 999px; background: var(--ui-surface-sunken); font-variant-numeric: tabular-nums; }
.vv-stack { display: flex; flex-direction: column; gap: 20px; min-inline-size: 0; }
.vv-grid-2 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.vv-grid-even { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; align-items: start; }
/* A table wider than its card scrolls inside it. A soft shadow at an edge says there is more that way. */
.vv-scroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  background: linear-gradient(to right, var(--ui-surface) 40%, transparent) left / 36px 100% no-repeat local, linear-gradient(to left, var(--ui-surface) 40%, transparent) right / 36px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(42 36 28 / .16), transparent) left / 12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgb(42 36 28 / .16), transparent) right / 12px 100% no-repeat scroll; }

/* ── 6. Figures and charts ────────────────────────────────────────────────── */
/* A figure that is also a way in: its name, the number, a thin bar for its share, and the whole in words. */
.vv-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.vv-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vv-tile { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; padding: 16px 18px 14px; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); box-shadow: var(--vv-shadow); color: inherit; }
.vv-tile-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ui-ink-3); }
.vv-tile-label .vv-icon { color: var(--ui-muted); }
.vv-tile-label > span { min-inline-size: 0; }
.vv-tile-value { font-size: 32px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ui-ink); }
.vv-tile-foot { font-size: 12.5px; color: var(--ui-muted); }
.vv-tile .vv-meter { margin-block: 4px 2px; }
a.vv-tile { transition: border-color .15s, box-shadow .15s, transform .15s; }
a.vv-tile:hover { text-decoration: none; border-color: var(--ui-line-strong); box-shadow: var(--vv-lift); transform: translateY(-1px); }
a.vv-tile:active { transform: none; box-shadow: var(--vv-shadow); }
.vv-tile--lead { background: var(--ui-accent-tint); border-color: var(--ui-accent-line); }
.vv-tile--lead .vv-tile-label, .vv-tile--lead .vv-tile-label .vv-icon { color: var(--ui-accent-strong); }
.vv-tile--lead .vv-track { fill: var(--ui-accent-line); }
.vv-tile--bad .vv-tile-value { color: var(--ui-bad); }
.vv-tile--warn .vv-tile-value { color: var(--ui-warn); }
.vv-figure { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; color: var(--ui-muted); }
.vv-figure b { font-size: 34px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: var(--ui-ink); }

/* Charts (Components/Charts). Marks are SVG; names, counts and tooltips are text. Colour is by tone, above. */
.vv-chart { position: relative; margin: 0; min-inline-size: 0; }
.vv-chart-none { padding-block: 14px; color: var(--ui-muted); }
.vv-track { fill: var(--vv-c-track); }
.vv-key { display: inline-block; flex: none; inline-size: 10px; block-size: 10px; border-radius: 3px; }
.vv-mark { outline: none; }
a.vv-mark { cursor: pointer; }
.vv-meter { display: block; }

.vv-donut-ring { position: relative; inline-size: min(100%, 212px); aspect-ratio: 1; margin-inline: auto; }
.vv-donut svg { display: block; inline-size: 100%; block-size: 100%; overflow: visible; transform: rotate(-90deg); }
[dir="rtl"] .vv-donut svg { transform: scaleX(-1) rotate(-90deg); }
.vv-donut-track { fill: none; stroke: var(--vv-c-track); stroke-width: 13; }
.vv-donut-arc { fill: none; stroke-width: 13; transition: stroke-width .15s, opacity .15s; animation: vv-arc .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 70ms); }
.vv-donut-hit { fill: none; stroke: transparent; stroke-width: 28; pointer-events: stroke; }
.vv-donut .vv-mark:is(:hover, :focus-visible) .vv-donut-arc { stroke-width: 17; }
.vv-donut .vv-mark:focus-visible .vv-donut-hit { stroke: var(--ui-accent-ring); }
.vv-donut:has(.vv-mark:is(:hover, :focus-visible)) .vv-mark:not(:hover, :focus-visible) .vv-donut-arc { opacity: .35; }
.vv-donut-mid { position: absolute; inset: 22%; display: grid; place-items: center; text-align: center; pointer-events: none; }
.vv-donut-mid > span { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; line-height: 1.25; transition: opacity .15s; }
.vv-donut-mid b { font-size: 34px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.vv-donut-mid small { font-size: 12.5px; color: var(--ui-muted); text-wrap: balance; }
.vv-donut-mid .vv-donut-share { font-weight: 600; color: var(--ui-ink-3); font-variant-numeric: tabular-nums; }
.vv-donut-tip { opacity: 0; }
.vv-donut:has(.vv-mark:is(:hover, :focus-visible)) .vv-donut-total { opacity: 0; }

.vv-stack-plot { position: relative; }
.vv-stack-svg { display: block; border-radius: 4px; animation: vv-wipe .8s cubic-bezier(.2, .7, .2, 1) both; }
.vv-stack-chart--tall .vv-stack-svg { border-radius: 6px; }
.vv-stack-part { stroke: var(--ui-surface); stroke-width: 2px; transition: opacity .15s; }
.vv-stack-chart .vv-mark:focus-visible .vv-stack-part { stroke: var(--ui-ink); }
.vv-stack-chart:has(.vv-mark:is(:hover, :focus-visible)) .vv-mark:not(:hover, :focus-visible) .vv-stack-part { opacity: .35; }
[dir="rtl"] :is(.vv-stack-svg, .vv-barrow-bar, .vv-meter, .vv-cols-svg) { transform: scaleX(-1); }

/* A tooltip: shown by the mark it belongs to, when the pointer or the keyboard is on that mark. */
.vv-tip { position: absolute; inset-block-end: calc(100% + 8px); z-index: 6; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 6px; background: var(--ui-inverse); color: #fff; font-size: 12.5px; font-weight: 400; line-height: 1.4; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transform: translateX(-50%); transition: opacity .12s; box-shadow: var(--vv-pop); }
[dir="rtl"] .vv-tip { transform: translateX(50%); }
.vv-tip.vv-tip--start { transform: translateX(-12px); }
.vv-tip.vv-tip--end { transform: translateX(calc(-100% + 12px)); }
[dir="rtl"] .vv-tip.vv-tip--start { transform: translateX(12px); }
[dir="rtl"] .vv-tip.vv-tip--end { transform: translateX(calc(100% - 12px)); }
.vv-tip b { font-weight: 600; font-variant-numeric: tabular-nums; }
.vv-tip small { opacity: .75; font-size: 12px; }
.vv-tip .vv-key { box-shadow: 0 0 0 1px rgb(255 255 255 / .5); }
.vv-tip.vv-tip--row { inset-inline-end: 0; inset-block-end: calc(100% - 2px); gap: 14px; transform: none; }
.vv-tip--row > span { display: inline-flex; align-items: center; gap: 6px; }
.vv-barrow:is(:hover, :focus-visible) .vv-tip--row { opacity: 1; visibility: visible; }
@media (hover: none) { .vv-tip { display: none; } }
/* The mark under the pointer or the keyboard shows its own tooltip (or its line in the middle of a ring), and the
   key beside a chart points at its mark. One rule per position; charts hold eight parts at most. */
.vv-chart:has(.vv-mark[data-i="0"]:is(:hover, :focus-visible)) [data-tip="0"], .vv-chart:has(.vv-mark[data-i="1"]:is(:hover, :focus-visible)) [data-tip="1"],
.vv-chart:has(.vv-mark[data-i="2"]:is(:hover, :focus-visible)) [data-tip="2"], .vv-chart:has(.vv-mark[data-i="3"]:is(:hover, :focus-visible)) [data-tip="3"],
.vv-chart:has(.vv-mark[data-i="4"]:is(:hover, :focus-visible)) [data-tip="4"], .vv-chart:has(.vv-mark[data-i="5"]:is(:hover, :focus-visible)) [data-tip="5"],
.vv-chart:has(.vv-mark[data-i="6"]:is(:hover, :focus-visible)) [data-tip="6"], .vv-chart:has(.vv-mark[data-i="7"]:is(:hover, :focus-visible)) [data-tip="7"] { opacity: 1; visibility: visible; }
.vv-status:has([data-key="0"]:hover) .vv-mark:not([data-i="0"]) :is(.vv-donut-arc, .vv-stack-part), .vv-status:has([data-key="1"]:hover) .vv-mark:not([data-i="1"]) :is(.vv-donut-arc, .vv-stack-part),
.vv-status:has([data-key="2"]:hover) .vv-mark:not([data-i="2"]) :is(.vv-donut-arc, .vv-stack-part), .vv-status:has([data-key="3"]:hover) .vv-mark:not([data-i="3"]) :is(.vv-donut-arc, .vv-stack-part),
.vv-status:has([data-key="4"]:hover) .vv-mark:not([data-i="4"]) :is(.vv-donut-arc, .vv-stack-part), .vv-status:has([data-key="5"]:hover) .vv-mark:not([data-i="5"]) :is(.vv-donut-arc, .vv-stack-part),
.vv-status:has([data-key="6"]:hover) .vv-mark:not([data-i="6"]) :is(.vv-donut-arc, .vv-stack-part), .vv-status:has([data-key="7"]:hover) .vv-mark:not([data-i="7"]) :is(.vv-donut-arc, .vv-stack-part) { opacity: .3; }
.vv-status:has(.vv-mark[data-i="0"]:is(:hover, :focus-visible)) [data-key="0"] > *, .vv-status:has(.vv-mark[data-i="1"]:is(:hover, :focus-visible)) [data-key="1"] > *,
.vv-status:has(.vv-mark[data-i="2"]:is(:hover, :focus-visible)) [data-key="2"] > *, .vv-status:has(.vv-mark[data-i="3"]:is(:hover, :focus-visible)) [data-key="3"] > *,
.vv-status:has(.vv-mark[data-i="4"]:is(:hover, :focus-visible)) [data-key="4"] > *, .vv-status:has(.vv-mark[data-i="5"]:is(:hover, :focus-visible)) [data-key="5"] > *,
.vv-status:has(.vv-mark[data-i="6"]:is(:hover, :focus-visible)) [data-key="6"] > *, .vv-status:has(.vv-mark[data-i="7"]:is(:hover, :focus-visible)) [data-key="7"] > * { background: var(--ui-surface-sunken); }

/* The key of a chart, with its counts. */
.vv-keys { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13px; }
.vv-keys li > * { display: flex; align-items: center; gap: 8px; color: var(--ui-ink-2); }
.vv-keys li > * > span { min-inline-size: 0; }
.vv-keys small { display: block; font-size: 12px; color: var(--ui-muted); }
.vv-keys b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ui-ink); }
.vv-keys em { font-style: normal; font-size: 12px; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.vv-keys a:hover { text-decoration: none; }
.vv-keys--rows { display: grid; gap: 1px; }
.vv-keys--rows li > * { min-block-size: 38px; padding: 6px 10px; margin-inline: -10px; border-radius: 8px; transition: background-color .12s; }
.vv-keys--rows li > * > span { flex: 1; }
.vv-keys--rows b { min-inline-size: 3ch; text-align: end; }
.vv-keys--rows em { min-inline-size: 4.5ch; text-align: end; }
.vv-keys--rows a:hover { background: var(--ui-surface-sunken); }
.vv-keys .is-zero > * { color: var(--ui-muted); }
.vv-keys .is-zero b { color: var(--ui-muted); font-weight: 500; }
.vv-keys .is-zero .vv-key { opacity: .45; }
.vv-stack-chart + .vv-keys { margin-block-start: 12px; }

/* A ranked list of bars. A line that leads somewhere is one link. */
.vv-barlist { display: grid; gap: 1px; }
.vv-barrow { position: relative; display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) max-content; gap: 4px 14px; align-items: center; min-block-size: 38px; padding: 6px 10px; margin-inline: -10px; border-radius: 8px; color: inherit; transition: background-color .12s; }
.vv-barlist--wide .vv-barrow { grid-template-columns: minmax(0, 230px) minmax(0, 1fr) max-content; }
a.vv-barrow:hover { background: var(--ui-surface-sunken); text-decoration: none; }
a.vv-barrow:focus-visible { outline-offset: -2px; }
.vv-barrow-name { display: flex; flex-direction: column; min-inline-size: 0; font-size: 13.5px; line-height: 1.35; }
.vv-barrow-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vv-barrow-name small { font-size: 12px; color: var(--ui-muted); }
.vv-barrow-bar { display: block; border-radius: 4px; animation: vv-wipe .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(min(var(--i), 9) * 35ms); }
.vv-barrow-part { stroke: var(--ui-surface); stroke-width: 2px; }
.vv-barrow-value { min-inline-size: 2.5ch; text-align: end; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Columns across ordered bands. */
.vv-cols-svg { display: block; overflow: visible; }
.vv-axis { stroke: var(--ui-line-strong); stroke-width: 1; }
.vv-cols-hit { fill: transparent; }
.vv-cols-bar { transform-box: fill-box; transform-origin: bottom; animation: vv-rise .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 60ms); transition: opacity .15s; }
.vv-cols-n { font-size: 12px; font-weight: 600; fill: var(--ui-ink); font-variant-numeric: tabular-nums; }
[dir="rtl"] .vv-cols-n { transform-box: fill-box; transform-origin: center; transform: scaleX(-1); }
.vv-cols .vv-mark:focus-visible .vv-cols-hit { fill: var(--ui-accent-tint); }
.vv-cols:has(.vv-mark:is(:hover, :focus-visible)) .vv-mark:not(:hover, :focus-visible) .vv-cols-bar { opacity: .4; }
.vv-cols-x { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 4px; margin-block-start: 8px; font-size: 12px; line-height: 1.3; color: var(--ui-muted); text-align: center; }

.vv-legend { display: flex; gap: 6px 18px; flex-wrap: wrap; margin-block: 10px; font-size: 12.5px; color: var(--ui-ink-2); }
.vv-legend li { display: flex; align-items: center; gap: 6px; }
.vv-legend i { inline-size: 10px; block-size: 10px; border-radius: 3px; display: inline-block; flex: none; }
.vv-legend--inline { margin: 0; }
.vv-card-head .vv-legend--inline { margin-block-start: 6px; }

/* ── 7. Tables ────────────────────────────────────────────────────────────── */
.vv-table { inline-size: 100%; border-collapse: collapse; }
.vv-table th { text-align: start; font-size: 12px; font-weight: 600; color: var(--ui-ink-3); padding: 10px 20px; background: var(--ui-surface-page); border-block-end: 1px solid var(--ui-line); white-space: nowrap; vertical-align: bottom; }
[dir="rtl"] .vv-table th { font-size: 13px; }
.vv-table td { padding: 12px 20px; border-block-end: 1px solid var(--ui-line-soft); vertical-align: top; }
.vv-table tbody tr:last-child td { border-block-end: 0; }
.vv-table th.vv-end, .vv-table td.vv-end { text-align: end; }
.vv-table--tight td { padding-block: 8px; }
.vv-table--tight th { padding-block: 8px; }
.vv-table--plain td { padding-inline: 0; }
.vv-card:not(.vv-card--flush) > .vv-table--tight td, .vv-card:not(.vv-card--flush) > .vv-table--tight th { padding-inline: 0 12px; }
.vv-table--click tbody tr { cursor: pointer; transition: background-color .12s; }
.vv-table--click tbody tr:hover, .vv-table--click tbody tr:focus-within { background: var(--ui-accent-tint); }
.vv-th-brass { color: var(--ui-brass) !important; }
.vv-cell-brass { box-shadow: inset 3px 0 0 var(--ui-brass-line); }
[dir="rtl"] .vv-cell-brass { box-shadow: inset -3px 0 0 var(--ui-brass-line); }
.vv-cell-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.vv-sub.vv-cell-tags { margin-block-start: 5px; }
.vv-row-warn td { background: var(--ui-warn-tint); }
.vv-row-off td { color: var(--ui-muted); }
.vv-total td { font-weight: 600; background: var(--ui-surface-sunken); border-block-start: 1px solid var(--ui-line); }
.vv-col-menu { inline-size: 1%; white-space: nowrap; }
.vv-col-n { inline-size: 1%; }
.vv-inset-table { margin-block-start: 12px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); }
.vv-pager { display: flex; justify-content: flex-end; align-items: center; gap: 14px; padding: 10px 20px; border-block-start: 1px solid var(--ui-line-soft); }
/* Wide tables keep readable columns and scroll inside their card. */
.vv-table--cases { min-inline-size: 980px; }
.vv-table--cases td:nth-child(1) { min-inline-size: 200px; }
.vv-table--cases td:nth-child(2) { min-inline-size: 190px; }
.vv-table--admin { min-inline-size: 720px; }
.vv-table--stats { min-inline-size: 860px; }
.vv-table--missing { min-inline-size: 760px; }
.vv-table--missing td:nth-child(2) { min-inline-size: 260px; }
.vv-table--claims { min-inline-size: 780px; }
.vv-table--ref { min-inline-size: 900px; }
.vv-table--ref td { font-size: 13.5px; }
.vv-table--schools { min-inline-size: 760px; }
.vv-table--schools tr.vv-row-first td { border-block-start: 1px solid var(--ui-line); }
.vv-table--schools tbody tr:first-child td { border-block-start: 0; }
.vv-table--fieldsreg { min-inline-size: 820px; }
.vv-table--legal { min-inline-size: 560px; }
.vv-table--ladder, .vv-table--source { min-inline-size: 720px; }
.vv-table--params td:last-child { inline-size: 1%; }
.vv-table--params { min-inline-size: 760px; }
/* The activity log: what was done first, then when, who, and to what. */
.vv-table--activity { min-inline-size: 980px; }
.vv-table--activity td:nth-child(5) { min-inline-size: 260px; }
/* A value before and after a change, one under the other. */
.vv-was { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 10px; margin-block-start: 6px; font-size: 13px; }
.vv-was dt { color: var(--ui-muted); }
.vv-was dd { margin: 0; overflow-wrap: anywhere; }

/* ── 8. Forms and controls ────────────────────────────────────────────────── */
.ui-input, .ui-select { min-block-size: 36px; font-family: inherit; }
[dir="rtl"] .ui-input, [dir="rtl"] .ui-select { font-size: 14.5px; }
.ui-input[dir="ltr"] { text-align: start; }
[dir="rtl"] .ui-input[dir="ltr"] { text-align: end; }
.ui-field__label { display: block; }
[dir="rtl"] .ui-field__label { font-size: 13.5px; }
[dir="rtl"] .ui-field__hint, [dir="rtl"] .ui-field__error { font-size: 12.5px; }
.ui-btn { cursor: pointer; font-family: inherit; border-style: solid; }
.ui-btn:hover { text-decoration: none; }
.ui-btn[disabled], .ui-btn[aria-disabled="true"] { cursor: not-allowed; }
[dir="rtl"] .ui-btn--md { font-size: 14.5px; }
[dir="rtl"] .ui-btn--sm { font-size: 13px; }
.vv-textarea { block-size: auto; min-block-size: 76px; padding-block: 8px; resize: vertical; line-height: 1.5; }
.vv-form-stack { display: grid; gap: 16px; }
.vv-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 16px; align-items: start; }
.vv-span { grid-column: 1 / -1; }
.vv-check { display: flex; align-items: center; gap: 8px; align-self: end; min-block-size: 36px; cursor: pointer; }
.vv-check input, .vv-switch input, .vv-choice input { accent-color: var(--ui-accent); inline-size: 16px; block-size: 16px; flex: none; }
.vv-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
/* Preferences: the two languages, each a large choice written in its own script. */
.vv-langs-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 10px; margin-block: 6px 8px; }
.vv-lang { position: relative; display: flex; align-items: center; gap: 12px; min-block-size: 76px; padding: 14px; border: 1px solid var(--ui-line-strong); border-radius: var(--ui-radius-lg); cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.vv-lang[lang="ar"] { font-family: "IBM Plex Sans Arabic", var(--font-ui); }
.vv-lang[lang="en"] { font-family: "IBM Plex Sans", var(--font-ui); line-height: 1.5; }
.vv-lang input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.vv-lang-glyph { display: grid; place-items: center; inline-size: 46px; block-size: 46px; flex: none; border-radius: 10px; background: var(--ui-surface-sunken); font-size: 20px; font-weight: 600; line-height: 1; color: var(--ui-ink-2); }
.vv-lang-name { display: flex; flex-direction: column; flex: 1; min-inline-size: 0; }
.vv-lang-name strong { font-size: 16px; font-weight: 600; }
.vv-lang-name small { font-size: 12.5px; color: var(--ui-muted); }
.vv-lang-tick { color: var(--ui-accent); opacity: 0; transform: scale(.6); transition: opacity .15s, transform .2s cubic-bezier(.2, 1.4, .4, 1); }
.vv-lang:hover { border-color: var(--ui-ink-3); }
.vv-lang:has(input:checked) { border-color: var(--ui-accent); background: var(--ui-accent-tint); box-shadow: 0 0 0 1px var(--ui-accent); }
.vv-lang:has(input:checked) .vv-lang-glyph { background: var(--ui-surface); color: var(--ui-accent-strong); }
.vv-lang:has(input:checked) .vv-lang-tick { opacity: 1; transform: none; }
.vv-lang:has(input:focus-visible) { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.vv-num-input { inline-size: 88px; display: inline-block; text-align: end; }
.vv-unit { display: inline-block; min-inline-size: 4.5em; text-align: start; margin-inline-start: 8px; }
.vv-param { white-space: nowrap; }
.vv-assign { inline-size: auto; min-inline-size: 200px; }
.vv-searchbox { position: relative; inline-size: min(360px, 100%); }
.vv-searchbox .vv-icon { position: absolute; inset-inline-start: 12px; inset-block-start: 50%; margin-block-start: -8px; color: var(--ui-faint); pointer-events: none; }
.vv-searchbox .ui-input { padding-inline-start: 36px; }
.vv-filterbar, .vv-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.vv-toolbar { justify-content: flex-start; }
.vv-toolbar > .ui-btn, .vv-toolbar > .vv-searchbox + span + .ui-btn { margin-inline-start: auto; }
.vv-toolbar .ui-field { min-inline-size: 200px; }
.vv-toolbar > span { padding-block-end: 8px; }
.vv-toolbar-end { margin-inline-start: auto; }
.vv-toolbar--filters { margin-block-end: 16px; }
.vv-toolbar--filters .ui-field { min-inline-size: 160px; }
.vv-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.vv-chip { display: inline-flex; align-items: center; gap: 6px; min-block-size: 34px; padding: 5px 12px; border: 1px solid var(--ui-line); border-radius: 999px; background: var(--ui-surface); color: var(--ui-ink-2); font-size: 13px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.vv-chip b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ui-muted); }
.vv-chip:hover { border-color: var(--ui-line-strong); text-decoration: none; }
.vv-chip:active { background: var(--ui-surface-sunken); }
.vv-chip.is-on { border-color: var(--ui-accent); background: var(--ui-accent-tint); color: var(--ui-ink); font-weight: 600; }
.vv-chip.is-on b { color: var(--ui-accent-strong); }
.vv-upload { display: inline-block; position: relative; cursor: pointer; }
.vv-upload input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; inline-size: 100%; }
.vv-upload.is-busy { pointer-events: none; opacity: .75; }
.vv-upload:focus-within .ui-btn { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.vv-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vv-tag { display: inline-flex; align-items: center; gap: 4px; padding-block: 2px; padding-inline: 9px 4px; border-radius: 5px; background: var(--ui-surface-sunken); font-size: 12.5px; }
.vv-tag:not(:has(button)) { padding-inline: 9px; }
.vv-tag.is-off { text-decoration: line-through; color: var(--ui-muted); background: none; outline: 1px dashed var(--ui-line-strong); }
.vv-tag button { border: 0; background: none; cursor: pointer; color: var(--ui-muted); inline-size: 24px; block-size: 24px; border-radius: 4px; padding: 0; line-height: 1; }
.vv-tag button:hover { background: var(--ui-surface-strong); color: var(--ui-ink); }
/* Dialogs: fields one per row; Arabic text keeps its own face. */
.form-dialog__body { gap: 16px !important; }
.dlg-panel { font-family: inherit; }
.dlg-body p + p { margin-block-start: 8px; }

/* ── 9. Messages and states ───────────────────────────────────────────────── */
.vv-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--ui-radius); border: 1px solid var(--ui-line); background: var(--ui-surface-sunken); }
.vv-alert-icon { margin-block-start: 2px; color: var(--ui-muted); }
.vv-alert-body { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 4px; }
.vv-alert-body p { color: var(--ui-ink-2); max-inline-size: 110ch; }
.vv-alert-body ul { list-style: disc; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 3px; color: var(--ui-ink-2); }
.vv-alert-x { inline-size: 28px; block-size: 28px; margin: -3px; margin-inline-start: 0; }
.vv-alert--good { background: var(--ui-good-tint); border-color: var(--ui-good-line); }
.vv-alert--good .vv-alert-icon, .vv-alert--good strong { color: var(--ui-good); }
.vv-alert--bad { background: var(--ui-bad-tint); border-color: #E7BDB7; }
.vv-alert--bad .vv-alert-icon, .vv-alert--bad strong { color: var(--ui-bad); }
.vv-alert--warn { background: var(--ui-warn-tint); border-color: #EBD3A2; }
.vv-alert--warn .vv-alert-icon, .vv-alert--warn strong { color: #8A4B06; }
.vv-alert--brass { background: var(--ui-brass-tint); border-color: var(--ui-brass-line); }
.vv-alert--brass .vv-alert-icon, .vv-alert--brass strong { color: var(--ui-brass); }
.vv-alert--inset { margin: 12px 20px; }
.vv-card > .vv-alert { margin-block: 12px; }
.vv-blank { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 72px 24px; margin-block: 24px; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); }
.vv-blank-mark { display: grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: 50%; background: var(--ui-accent-tint); color: var(--ui-accent); margin-block-end: 4px; }
.vv-blank p { color: var(--ui-muted); max-inline-size: 56ch; }
.vv-blank .vv-actions { margin-block-start: 10px; }
#blazor-error-ui { position: fixed; inset-block-end: 0; inset-inline: 0; padding: 12px 20px; background: var(--ui-bad-tint); color: var(--ui-bad); border-block-start: 1px solid #E7BDB7; z-index: 500; font-weight: 500; }
#blazor-error-ui a { color: inherit; text-decoration: underline; margin-inline-start: 8px; }

/* ── 10. Dashboard and lists ──────────────────────────────────────────────── */
/* The dashboard: twelve columns. What needs the reader comes first and widest; each row pairs a list with a chart. */
.vv-dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.vv-dash > * { grid-column: 1 / -1; }
.vv-dash-mix { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 20px; }
@media (min-width: 1180px) {
  .vv-dash > :is(.vv-dash-work, .vv-dash-gaps, .vv-dash-load) { grid-column: span 7; }
  .vv-dash > :is(.vv-dash-status, .vv-dash-attn, .vv-dash-made) { grid-column: span 5; }
  .vv-dash > .vv-dash-half { grid-column: span 6; }
  .vv-dash > .vv-dash-made--wide { grid-column: 1 / -1; }
}
.vv-dash-work { display: flex; flex-direction: column; }
.vv-dash-work > .vv-hollow { flex: 1; justify-content: center; }
/* The standing of every application: a ring with its key beside it; in a narrow card, one bar with the key under it. */
.vv-dash-status, .vv-worklist, .vv-dash-activity { container-type: inline-size; }
.vv-status { display: grid; grid-template-columns: minmax(132px, 200px) minmax(0, 1fr); gap: 12px 22px; align-items: center; }
.vv-status-bar { display: none; }
@container (max-width: 372px) {
  .vv-status { grid-template-columns: minmax(0, 1fr); }
  .vv-status-ring { display: none; }
  .vv-status-bar { display: grid; gap: 12px; }
}
.vv-queue-sum { display: grid; gap: 14px; }
.vv-queue-sum-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px 24px; flex-wrap: wrap; }

/* A work list: what to do next on each application, and why. */
.vv-worklist li + li { border-block-start: 1px solid var(--ui-line-soft); }
.vv-work { display: grid; grid-template-columns: auto minmax(0, 1.5fr) minmax(0, 1fr) max-content auto; gap: 2px 14px; align-items: center; min-block-size: 64px; padding: 11px 20px; color: inherit; transition: background-color .12s; }
.vv-work:hover { background: var(--ui-accent-tint); text-decoration: none; }
.vv-work:active { background: var(--ui-accent-line-soft); }
.vv-work:focus-visible { outline-offset: -2px; }
.vv-work-mark { display: grid; place-items: center; inline-size: 36px; block-size: 36px; flex: none; border-radius: 10px; }
.vv-work-main { display: flex; flex-direction: column; min-inline-size: 0; }
.vv-work-main strong { font-weight: 600; overflow-wrap: anywhere; }
.vv-work-why { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13px; color: var(--ui-ink-3); }
.vv-work-why b { margin-inline-end: 6px; font-weight: 600; color: var(--ui-ink); }
.vv-work-meta { display: flex; flex-direction: column; min-inline-size: 0; font-size: 13px; color: var(--ui-ink-2); }
.vv-work-meta > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vv-work-meta small, .vv-work-age small { font-size: 12px; color: var(--ui-muted); }
.vv-work-age { display: flex; flex-direction: column; align-items: flex-end; font-size: 12.5px; color: var(--ui-ink-3); white-space: nowrap; }
.vv-work-go { color: var(--ui-faint); transition: transform .15s, color .15s; }
a:hover > .vv-work-go { color: var(--ui-accent); }
@container (max-width: 660px) {
  .vv-work { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; padding-block: 13px; }
  .vv-work-meta { grid-column: 2; }
  .vv-work-age { grid-column: 2; flex-direction: row; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; white-space: normal; }
  .vv-work-go { grid-column: 3; grid-row: 1 / span 3; align-self: center; }
}

.vv-attn { display: grid; gap: 1px; }
.vv-attn a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; min-block-size: 50px; padding: 7px 10px; margin-inline: -10px; border-radius: 8px; color: inherit; transition: background-color .12s; }
.vv-attn a:hover { background: var(--ui-surface-sunken); text-decoration: none; }
.vv-attn .vv-work-mark { inline-size: 32px; block-size: 32px; border-radius: 8px; }
.vv-attn-text { display: flex; flex-direction: column; min-inline-size: 0; line-height: 1.35; }
.vv-attn-text strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vv-attn-text small { font-size: 12.5px; color: var(--ui-muted); }

/* What happened, day by day: the time, a mark for the kind of event, who and what, and the application. */
.vv-feed-kinds { display: flex; gap: 6px; flex-wrap: wrap; margin-block-end: 18px; }
.vv-feed-kinds .vv-chip { font-family: inherit; }
.vv-feed { display: grid; gap: 22px; }
.vv-feed-day h3 { display: flex; align-items: center; gap: 8px; padding-block-end: 8px; margin-block-end: 4px; border-block-end: 1px solid var(--ui-line-soft); font-size: 12.5px; font-weight: 600; color: var(--ui-ink-3); }
.vv-feed-item { position: relative; display: grid; grid-template-columns: 44px 28px minmax(0, 1fr) minmax(160px, 300px); gap: 2px 12px; align-items: start; padding-block: 8px; }
.vv-feed-item:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 69.5px; inset-block: 38px -6px; inline-size: 1px; background: var(--ui-line); }
.vv-feed-item > time { padding-block-start: 5px; font-size: 12.5px; color: var(--ui-muted); }
.vv-feed-mark { display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 50%; }
.vv-feed-text { padding-block-start: 4px; max-inline-size: 96ch; font-size: 13.5px; color: var(--ui-ink-2); overflow-wrap: anywhere; }
.vv-feed-text strong { font-weight: 600; color: var(--ui-ink); }
.vv-feed-case { display: flex; flex-direction: column; align-items: flex-end; padding-block-start: 4px; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--ui-ink); text-align: end; }
.vv-feed-case:hover { color: var(--ui-accent); text-decoration: none; }
.vv-feed-case small { font-size: 12px; font-weight: 400; color: var(--ui-muted); }
.vv-feed-more { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-block-start: 16px; padding-block-start: 14px; border-block-start: 1px solid var(--ui-line-soft); }
@container (max-width: 720px) {
  .vv-feed-item { grid-template-columns: 44px 28px minmax(0, 1fr); }
  .vv-feed-case { grid-column: 3; flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: wrap; padding-block: 2px 4px; text-align: start; }
}

/* Applications: the filters a figure on the dashboard set, each with a way to take it off. */
.vv-narrowed { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.vv-narrowed li { display: inline-flex; align-items: center; gap: 2px; padding-inline-start: 10px; border: 1px solid var(--ui-accent-line); border-radius: 999px; background: var(--ui-accent-tint); font-size: 12.5px; font-weight: 500; color: var(--ui-ink); }
.vv-narrowed a { display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 50%; color: var(--ui-ink-3); }
.vv-narrowed a:hover { background: var(--ui-accent-line); color: var(--ui-ink); }
.vv-audit { display: flex; flex-direction: column; }
.vv-audit li { position: relative; display: grid; grid-template-columns: 1fr; gap: 1px; padding-inline-start: 20px; padding-block-end: 16px; }
.vv-audit li::before { content: ""; position: absolute; inset-inline-start: 3px; inset-block: 9px -5px; inline-size: 1px; background: var(--ui-line); }
.vv-audit li::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 7px; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--ui-surface); border: 2px solid var(--ui-moccae-gold); }
.vv-audit li:last-child { padding-block-end: 0; }
.vv-audit li:last-child::before { display: none; }
.vv-audit time { font-size: 12px; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.vv-audit p { color: var(--ui-ink-2); font-size: 13.5px; overflow-wrap: anywhere; }
.vv-missing-bars { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 2px 28px; padding: 12px 14px 16px; }
.vv-missing-bar { display: grid; grid-template-columns: minmax(0, 200px) 1fr max-content; gap: 12px; align-items: center; border: 1px solid transparent; background: none; padding: 7px 8px; border-radius: 6px; cursor: pointer; text-align: start; }
.vv-missing-bar:hover:not(:disabled) { background: var(--ui-surface-sunken); }
.vv-missing-bar.is-on { background: var(--ui-accent-tint); border-color: var(--ui-accent-line); }
.vv-missing-bar:disabled { cursor: default; color: var(--ui-muted); }
.vv-missing-name { font-size: 13.5px; }
.vv-missing-track { block-size: 8px; background: var(--ui-surface-sunken); border-radius: 4px; overflow: hidden; display: block; }
.vv-missing-track i { display: block; block-size: 100%; border-radius: 4px; }
.vv-missing-bar small { color: var(--ui-muted); }
.vv-matrix { min-inline-size: 900px; }
.vv-matrix th.vv-matrix-h { padding: 10px 4px; vertical-align: bottom; block-size: 150px; white-space: nowrap; text-align: center; }
.vv-matrix th.vv-matrix-h span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 500; }
.vv-matrix th.vv-matrix-h.is-on { color: var(--ui-ink); background: var(--ui-surface-strong); }
.vv-matrix td.vv-matrix-c { text-align: center; padding-inline: 4px; vertical-align: middle; }
.vv-matrix td.vv-matrix-c.is-on { background: var(--ui-accent-tint); }
.vv-dot { display: inline-block; inline-size: 12px; block-size: 12px; border-radius: 50% !important; }
.vv-dot--blocks { background: var(--ui-bad-fill); }
.vv-dot--limits { box-shadow: inset 0 0 0 2.5px #C98A1B; }
.vv-dot--housekeeping { box-shadow: inset 0 0 0 1.5px var(--ui-faint); }

/* ── 11. The application screen ───────────────────────────────────────────── */
.vv-head--file { align-items: flex-start; }
.vv-file-meta { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; margin-block-start: 8px; color: var(--ui-muted); }
.vv-file-meta .vv-mono { color: var(--ui-ink-2); font-weight: 500; }
.vv-assignee { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.vv-assignee-label { font-size: 12.5px; color: var(--ui-muted); }

.vv-summary { padding: 0; }
.vv-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px 32px; padding: 18px 22px; }
.vv-facts > div { min-inline-size: 0; }
.vv-facts-wide { grid-column: span 2; }
.vv-facts dt { font-size: 12px; font-weight: 500; color: var(--ui-muted); margin-block-end: 2px; }
.vv-facts dd { font-weight: 500; overflow-wrap: anywhere; }
.vv-facts dd .vv-sub { display: block; font-weight: 400; }
.vv-facts--plain { border: 1px solid var(--ui-line-soft); border-radius: var(--ui-radius); margin-block: 4px 16px; padding: 14px 18px; }
.vv-summary-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 20px; border-block-start: 1px solid var(--ui-line); background: var(--ui-warn-tint); border-end-start-radius: var(--ui-radius-lg); border-end-end-radius: var(--ui-radius-lg); }
.vv-summary-note .vv-icon { color: #8A4B06; margin-block-start: 3px; }

/* The two results, and between them whether they agree. */
.vv-compare { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; margin-block-start: 6px; }
.vv-verdict { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 18px 22px 16px; border-radius: var(--ui-radius-lg); background: var(--ui-surface); border: 1px solid var(--ui-line); box-shadow: var(--vv-shadow); min-inline-size: 0; }
.vv-verdict.is-on { border-color: var(--ui-ink-3); }
.vv-verdict--proposed { background: linear-gradient(var(--ui-brass-tint), var(--ui-surface) 64px); border-color: var(--ui-brass-line); box-shadow: inset 0 3px 0 var(--ui-brass), var(--vv-shadow); }
.vv-verdict--proposed.is-on { border-color: var(--ui-brass); }
.vv-verdict-label { display: flex; gap: 4px 10px; align-items: baseline; flex-wrap: wrap; inline-size: 100%; font-size: 13px; font-weight: 600; color: var(--ui-ink-3); }
.vv-verdict-label small { font-weight: 400; font-size: 12.5px; color: var(--ui-muted); }
.vv-verdict--proposed .vv-verdict-label { color: var(--ui-brass); }
.vv-verdict-flag { margin-inline-start: auto; padding: 1px 8px; border-radius: 4px; background: var(--ui-brass); color: #fff; font-size: 11.5px; font-weight: 600; }
.vv-verdict-title { font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; color: var(--ui-ink); }
[dir="rtl"] .vv-verdict-title { letter-spacing: 0; line-height: 1.5; }
.vv-verdict-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.vv-verdict-list { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; color: var(--ui-ink-2); padding-inline-start: 18px; list-style: disc; }
.vv-verdict-pick { display: inline-flex; align-items: center; gap: 5px; margin-block-start: auto; padding: 6px 0 2px; font-size: 13px; font-weight: 600; color: var(--ui-accent); background: none; border: 0; cursor: pointer; }
.vv-verdict-pick:hover { text-decoration: underline; }
.vv-verdict-pick[aria-pressed="true"] { color: var(--ui-ink-3); cursor: default; text-decoration: none; }
/* The chip sits on the top edge between the two cards, where the eye lands first. */
.vv-compare-link { position: absolute; inset-inline: 0; inset-block-start: -13px; z-index: 1; display: flex; justify-content: center; pointer-events: none; }
.vv-compare-link span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid; background: var(--ui-surface); box-shadow: 0 1px 3px rgb(42 36 28 / .1); }
.vv-compare-link.is-same span { color: var(--ui-good); border-color: var(--ui-good-line); }
.vv-compare-link.is-different span { color: var(--ui-brass); border-color: var(--ui-brass-line); }

.vv-next { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding: 11px 16px; border: 1px solid #E7BDB7; border-inline-start: 4px solid var(--ui-bad); border-radius: var(--ui-radius-lg); background: var(--ui-bad-tint); }
.vv-next-icon { color: var(--ui-bad); }
.vv-next.is-clear { border-color: var(--ui-good-line); border-inline-start-color: var(--ui-good); background: var(--ui-good-tint); }
.vv-next.is-clear .vv-next-icon { color: var(--ui-good); }
.vv-next-item { border: 1px solid #E0B0A9; background: var(--ui-surface); border-radius: 999px; padding: 3px 12px; min-block-size: 30px; font-size: 13px; font-weight: 500; color: var(--ui-bad); cursor: pointer; transition: border-color .15s; }
.vv-next-item:hover { border-color: var(--ui-bad); }
.vv-next .ui-btn, .vv-next .vv-link { margin-inline-start: auto; }

.ui-tabs { margin: 4px 0 0 !important; gap: 4px !important; }
.ui-tabs .ui-tab { font-size: 14px; padding: 10px 14px 11px; min-block-size: 42px; font-family: inherit; }
.ui-tabs .ui-tab-count { font-size: 11.5px; line-height: 18px; }
.ui-tabs .ui-tab.is-active .ui-tab-count { background: var(--ui-accent-tint); }

/* Reasoning */
.vv-stage { font-size: 12px; font-weight: 600; color: var(--ui-muted); margin-block: 20px 8px; text-transform: uppercase; letter-spacing: .06em; }
[dir="rtl"] .vv-stage { letter-spacing: 0; font-size: 13.5px; }
.vv-stage:first-of-type { margin-block-start: 0; }
.vv-steps { display: flex; flex-direction: column; gap: 8px; }
.vv-step { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--ui-radius); border: 1px solid var(--ui-line-soft); background: var(--ui-surface); }
.vv-step-mark { display: grid; place-items: center; inline-size: 24px; block-size: 24px; flex: none; border-radius: 50%; background: var(--ui-surface-sunken); color: var(--ui-ink-3); }
.vv-step--good .vv-step-mark { background: var(--ui-good-tint); color: var(--ui-good); }
.vv-step--bad .vv-step-mark { background: var(--ui-bad-tint); color: var(--ui-bad); }
.vv-step--warn .vv-step-mark { background: var(--ui-warn-tint); color: #8A4B06; }
.vv-step--brass .vv-step-mark { background: var(--ui-brass-tint); color: var(--ui-brass); }
.vv-step--bad { border-color: #EBCDC8; }
.vv-step-body { flex: 1; min-inline-size: 0; }
.vv-step-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.vv-step-test { font-weight: 600; }
.vv-step p { margin-block-start: 4px; color: var(--ui-ink-2); }
.vv-step .vv-basis { font-size: 12.5px; color: var(--ui-muted); }
.vv-step .vv-basis--proposed { color: var(--ui-brass); }
.vv-refs li { overflow-wrap: anywhere; font-size: 13px; }

/* Experience */
.vv-exp-top { display: flex; gap: 16px 48px; flex-wrap: wrap; margin-block-end: 16px; }
.vv-exp-figure { display: flex; flex-direction: column; }
.vv-exp-figure b { font-size: 34px; font-weight: 600; line-height: 1.15; color: var(--ui-good); font-variant-numeric: tabular-nums; }
.vv-exp-figure span { font-size: 12.5px; color: var(--ui-muted); max-inline-size: 28ch; }
.vv-exp-figure--muted b { color: var(--ui-ink-2); }
.vv-statebar { display: flex; gap: 2px; block-size: 12px; border-radius: 4px; overflow: hidden; }
.vv-statebar-seg { min-inline-size: 4px; }
.vv-timeline { display: flex; flex-direction: column; gap: 8px; }
.vv-tl-row { display: grid; grid-template-columns: minmax(0, 250px) 1fr; gap: 16px; align-items: center; }
.vv-tl-label { font-size: 13px; color: var(--ui-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; flex-direction: column; line-height: 1.3; }
.vv-tl-label bdi { overflow: hidden; text-overflow: ellipsis; }
.vv-tl-label small { color: var(--ui-muted); font-size: 12px; }
.vv-tl-track { position: relative; block-size: 18px; background: var(--ui-surface-sunken); border-radius: 4px; }
.vv-tl-grid { position: absolute; inset-block: 0; inline-size: 1px; background: var(--ui-surface); }
.vv-tl-bar { position: absolute; inset-block: 2px; border-radius: 3px; min-inline-size: 4px; }
.vv-tl-bar--reg { inset-block: 6px; background: #B4A68C; }
.vv-tl-mark { position: absolute; inset-block: -4px; inline-size: 2px; margin-inline-start: -1px; background: var(--ui-ink); border-radius: 1px; }
.vv-tl-axis { position: relative; block-size: 18px; font-size: 12px; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.vv-tl-axis span { position: absolute; inset-block-start: 0; padding-inline-start: 4px; border-inline-start: 1px solid var(--ui-line-strong); line-height: 16px; white-space: nowrap; }
.vv-key-reg { background: #B4A68C; block-size: 6px !important; }
.vv-key-mark { background: var(--ui-ink); inline-size: 2px !important; block-size: 14px !important; border-radius: 1px !important; }
.vv-gaps { margin-block-start: 14px; display: grid; gap: 4px; font-size: 13px; }
.vv-state-select { border: 0; border-radius: 999px; padding: 4px 12px; min-block-size: 28px; font-size: 12.5px; font-weight: 600; cursor: pointer; max-inline-size: 100%; }
.vv-screen-row td { background: var(--ui-surface-page); padding-block: 9px; }
.vv-screen { display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--ui-ink-2); }
.vv-screen-tag { font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 4px; background: var(--ui-ink-3); color: #fff; }
.vv-signal b { font-variant-numeric: tabular-nums; }
.vv-signal.is-high { color: var(--ui-bad); font-weight: 600; }

/* Documents: one line each; open to see what was read. */
.vv-doc + .vv-doc { border-block-start: 1px solid var(--ui-line-soft); }
.vv-doc-head { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding-inline-end: 20px; }
.vv-doc-toggle { flex: 1 1 280px; min-inline-size: 0; display: flex; align-items: center; gap: 10px; padding: 12px 20px; padding-inline-end: 0; border: 0; background: none; text-align: start; cursor: pointer; }
.vv-doc-toggle:hover strong { color: var(--ui-accent); }
.vv-doc-toggle:focus-visible { outline-offset: -2px; }
.vv-doc-chevron { color: var(--ui-muted); transition: transform .15s; }
[dir="rtl"] .vv-doc-chevron { transform: scaleX(-1); }
.is-open > .vv-doc-head .vv-doc-chevron, .is-open > .vv-acc-head .vv-doc-chevron { transform: rotate(90deg); }
.vv-doc-name { display: flex; flex-direction: column; min-inline-size: 0; line-height: 1.35; }
.vv-doc-name strong { font-weight: 600; }
.vv-doc-name small { color: var(--ui-muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vv-doc-side { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; padding-block: 8px; }
.vv-doc-open { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; margin-inline-start: 8px; }
.vv-doc.is-open { background: linear-gradient(var(--ui-surface-page), var(--ui-surface-page)); }
.vv-doc-body { margin: 0 20px 16px; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); overflow: hidden; }
.vv-doc-about { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 12px 16px; font-size: 13.5px; border-block-end: 1px solid var(--ui-line-soft); }
.vv-doc-about bdi { flex: 1 1 100%; }
.vv-doc-source { padding: 10px 16px; border-block-start: 1px solid var(--ui-line-soft); }
.vv-table--fields th, .vv-table--fields td { padding-inline: 16px; }
.vv-table--fields td:first-child { inline-size: 30%; min-inline-size: 130px; }
.vv-table--fields td:last-child { inline-size: 1%; }
.vv-table--fields td:last-child .ui-btn { margin-inline-start: 10px; }
.vv-table--fields td { vertical-align: middle; overflow-wrap: anywhere; }

/* Decision */
.vv-decision { display: flex; flex-direction: column; gap: 16px; border-color: var(--ui-line-strong); }
.vv-decision > h2 { margin-block-end: 0; font-size: 17px; }
.vv-decision > .vv-alert, .vv-decision > .vv-actions--start { margin-block: 0; }
.vv-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.vv-results > div { padding: 12px 14px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); }
.vv-results dt { font-size: 12.5px; color: var(--ui-muted); margin-block-end: 2px; }
.vv-results dd { font-weight: 600; }
.vv-results-rec { border-color: var(--ui-brass-line) !important; background: var(--ui-brass-tint); }
.vv-results-rec dt { color: var(--ui-brass); }
.vv-choices { display: grid; gap: 8px; }
.vv-choices legend { font-weight: 600; margin-block-end: 10px; padding: 0; }
.vv-choice { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--ui-line-strong); border-radius: var(--ui-radius); cursor: pointer; transition: border-color .15s, background-color .15s; }
.vv-choice input { margin-block-start: 3px; }
.vv-choice > span { display: flex; flex-direction: column; gap: 1px; min-inline-size: 0; }
.vv-choice small { font-size: 13px; color: var(--ui-ink-3); }
.vv-choice:hover { border-color: var(--ui-ink-3); }
.vv-choice.is-on { border-color: var(--ui-accent); background: var(--ui-accent-tint); box-shadow: 0 0 0 1px var(--ui-accent); }
.vv-choice.is-off { cursor: not-allowed; background: var(--ui-surface-page); border-style: dashed; }
.vv-choice.is-off strong { color: var(--ui-muted); }
.vv-choice-why { color: var(--ui-muted) !important; margin-block-start: 4px; }
.vv-outcome { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--ui-good-line); border-radius: var(--ui-radius); background: var(--ui-good-tint); }
.vv-outcome-mark { display: grid; place-items: center; inline-size: 36px; block-size: 36px; flex: none; border-radius: 50%; background: var(--ui-good); color: #fff; }
.vv-outcome-kind { font-size: 13px; font-weight: 600; color: var(--ui-good); }
.vv-outcome-title { font-size: 19px; font-weight: 600; line-height: 1.35; }

/* The document view: the page on one side, what was read from it on the other. The page image and the boxes over
   it are placed with left and top on purpose: a page never mirrors, whatever the language of the screen. */
.vv-table--docs td { vertical-align: middle; }
.vv-table--docs .vv-col-n { inline-size: 36px; padding-inline-end: 0; }
.vv-table--docs tr.is-aside > td { opacity: .62; }
.vv-docs-open { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; inline-size: 100%; min-inline-size: 180px; padding: 4px 0; border: 0; background: none; text-align: start; cursor: pointer; line-height: 1.35; }
.vv-docs-open strong { font-weight: 600; color: var(--ui-ink); }
.vv-docs-open:hover strong { color: var(--ui-accent); text-decoration: underline; text-underline-offset: 3px; }
.vv-docs-open small { color: var(--ui-muted); font-size: 12.5px; overflow-wrap: anywhere; }
.vv-docs-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }

.vv-dv { --vv-sheet: 46%; display: flex; flex-direction: column; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); box-shadow: var(--vv-shadow); scroll-margin-block-start: calc(var(--vv-top) + 8px); }
.vv-dv:focus { outline: none; }
.vv-dv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 12px; border-block-end: 1px solid var(--ui-line); }
.vv-dv-nav { display: flex; align-items: center; gap: 2px; min-inline-size: 0; flex: 0 1 auto; }
.vv-dv-ib { inline-size: 34px; block-size: 34px; display: inline-grid; place-items: center; flex: none; padding: 0; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--ui-ink-3); cursor: pointer; }
.vv-dv-ib:hover:not(:disabled) { background: var(--ui-surface-sunken); color: var(--ui-ink); }
.vv-dv-ib:disabled { opacity: .35; cursor: default; }
/* The one chevron points forwards. "Previous" turns it round, and the two swap in Arabic. */
.vv-dv-back { transform: scaleX(-1); }
[dir="rtl"] .vv-dv-back { transform: none; }
.vv-dv-picker { min-inline-size: 0; }
.vv-dv-picker > summary { max-inline-size: 100%; padding: 4px 8px; }
.vv-dv-title { display: flex; flex-direction: column; min-inline-size: 0; line-height: 1.3; text-align: start; }
.vv-dv-title strong { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: min(46ch, 52vw); }
.vv-dv-title small { color: var(--ui-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.vv-dv-picker .ui-dropdown__panel { inline-size: min(420px, calc(100vw - 32px)); max-block-size: min(60vh, 520px); overflow: auto; padding: 6px; box-shadow: var(--vv-pop); border-color: var(--ui-line-strong); z-index: 60; }
.vv-dv-option { align-items: flex-start; gap: 10px; }
.vv-dv-option.is-on { background: var(--ui-accent-tint); }
.vv-dv-option-n { flex: none; min-inline-size: 22px; color: var(--ui-muted); font-variant-numeric: tabular-nums; text-align: center; }
.vv-dv-option-text { display: flex; flex-direction: column; flex: 1; min-inline-size: 0; line-height: 1.35; white-space: normal; }
.vv-dv-option-text strong { font-weight: 600; color: var(--ui-ink); }
.vv-dv-option-text small { color: var(--ui-muted); font-size: 12.5px; overflow-wrap: anywhere; }
.vv-dv-dot { flex: none; inline-size: 9px; block-size: 9px; margin-block-start: 6px; border-radius: 50%; background: var(--vv-c-warn); }
.vv-dv-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; }
.vv-dv-fact { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.vv-dv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-inline-start: auto; }
.vv-dv-more > summary { padding: 0; }
.vv-dv-more > summary:hover { background: none; }
.vv-dv-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ui-ink-2); cursor: pointer; user-select: none; }
.vv-dv-switch input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.vv-dv-switch-track { position: relative; inline-size: 30px; block-size: 18px; border-radius: 999px; background: var(--ui-line-strong); transition: background-color .15s; flex: none; }
.vv-dv-switch-track::after { content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; inline-size: 14px; block-size: 14px; border-radius: 50%; background: #fff; transition: inset-inline-start .15s; }
.vv-dv-switch input:checked + .vv-dv-switch-track { background: var(--ui-accent-fill); }
.vv-dv-switch input:checked + .vv-dv-switch-track::after { inset-inline-start: 14px; }
.vv-dv-switch input:focus-visible + .vv-dv-switch-track { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.vv-dv-full-off, .vv-dv.is-full .vv-dv-full-on, .vv-dv:fullscreen .vv-dv-full-on { display: none; }
.vv-dv.is-full .vv-dv-full-off, .vv-dv:fullscreen .vv-dv-full-off { display: inline; }
.vv-dv > .vv-alert { margin: 10px 12px 0; }

.vv-dv-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, 1fr); block-size: clamp(540px, calc(100vh - 150px), 1400px); min-block-size: 0; }
.vv-dv-canvas { display: flex; flex-direction: column; min-inline-size: 0; min-block-size: 0; }
.vv-dv-stage { position: relative; flex: 1; min-block-size: 0; overflow: hidden; background: var(--ui-surface-strong); touch-action: none; user-select: none; -webkit-user-select: none; direction: ltr; border-end-start-radius: 0; }
.vv-dv-stage:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
.vv-dv-stage.is-pannable { cursor: grab; }
.vv-dv-stage.is-dragging { cursor: grabbing; }
.vv-dv-sheet { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; background: var(--ui-document-paper); box-shadow: 0 1px 3px rgb(42 36 28 / .18), 0 10px 24px -12px rgb(42 36 28 / .35); }
.vv-dv-sheet.is-animating { transition: transform .15s ease-out; }
.vv-dv-stage.is-loading .vv-dv-sheet { opacity: .45; }
.vv-dv-turn { position: absolute; transform-origin: center; }
.vv-dv-turn img { display: block; inline-size: 100%; block-size: 100%; pointer-events: none; -webkit-user-drag: none; }
.vv-dv-overlay { position: absolute; inset: 0; }
.vv-dv-overlay.is-off { display: none; }
.vv-dv-box { position: absolute; padding: 0; border: 0; border-radius: 2px; outline: 1.5px solid var(--ui-moccae-gold); background: rgb(153 111 51 / .10); cursor: pointer; }
.vv-dv-box span { position: absolute; left: 0; top: 0; min-inline-size: 18px; block-size: 18px; padding-inline: 4px; border-radius: 999px; background: var(--ui-accent-fill); color: #fff; font: 600 11px/18px var(--font-ui); font-variant-numeric: tabular-nums; text-align: center; transform-origin: 0 100%; transform: translate(-6px, -100%) scale(calc(1 / var(--vv-z, 1))); pointer-events: none; }
.vv-dv-box:hover, .vv-dv-box.is-focus { outline: 2.5px solid var(--ui-ink); background: rgb(153 111 51 / .24); z-index: 5; }
.vv-dv-box.is-focus span, .vv-dv-box:hover span { background: var(--ui-ink); }
.vv-dv-wait, .vv-dv-failed { position: absolute; inset: 0; display: none; place-items: center; margin: 0; padding: 24px; text-align: center; color: var(--ui-ink-3); pointer-events: none; }
.vv-dv-stage.is-loading .vv-dv-wait { display: grid; }
.vv-dv-stage.is-error .vv-dv-failed { display: grid; }
.vv-dv-stage.is-error .vv-dv-sheet { visibility: hidden; }
.vv-dv-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 5px 10px; border-block-start: 1px solid var(--ui-line); background: var(--ui-surface); }
.vv-dv-pager, .vv-dv-zoom { display: flex; align-items: center; gap: 2px; }
.vv-dv-zoom { margin-inline-start: auto; }
.vv-dv-count { padding-inline: 6px; font-size: 13px; color: var(--ui-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vv-dv-pct { min-inline-size: 46px; font-size: 12.5px; color: var(--ui-ink-3); font-variant-numeric: tabular-nums; text-align: center; }
.vv-dv-none { flex: 1; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 32px; text-align: center; color: var(--ui-muted); background: var(--ui-surface-page); }

.vv-dv-side { display: flex; flex-direction: column; min-inline-size: 0; min-block-size: 0; border-inline-start: 1px solid var(--ui-line); background: var(--ui-surface); }
.vv-dv-side > .ui-tabs { padding-inline: 12px; flex: none; }
.vv-dv-handle { display: none; }
.vv-dv-panel { flex: 1; min-block-size: 0; overflow: auto; overscroll-behavior: contain; }
.vv-dv-panel:focus { outline: none; }
.vv-dv-panel > .vv-alert { margin: 12px 16px 0; }
.vv-dv-note { padding: 10px 16px 0; color: var(--ui-muted); font-size: 13px; }
.vv-dv-about { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 12px 16px 0; font-size: 13.5px; }
.vv-dv-about bdi { flex: 1 1 100%; }
.vv-dv-saved { display: flex; align-items: center; gap: 6px; margin: 10px 16px 0; padding: 6px 10px; border-radius: var(--ui-radius); background: var(--ui-good-tint); color: var(--ui-good); font-size: 13px; }
.vv-dv-text { border-block-end: 1px solid var(--ui-line-soft); }
.vv-dv-text h3 { padding: 10px 16px 0; font-size: 12.5px; font-weight: 600; color: var(--ui-muted); }
.vv-dv-text.is-on h3 .vv-link { color: var(--ui-ink); }
.vv-dv-text pre { margin: 0; padding: 8px 16px 14px; white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.65 var(--font-ui); unicode-bidi: plaintext; text-align: start; }

.vv-fr-list { margin-block-start: 8px; }
.vv-fr { display: grid; gap: 6px; padding: 11px 16px 12px; border-block-end: 1px solid var(--ui-line-soft); border-inline-start: 3px solid transparent; scroll-margin-block: 12px; }
.vv-fr.is-low { border-inline-start-color: var(--vv-c-warn); }
.vv-fr.is-amended { border-inline-start-color: var(--ui-brass); }
.vv-fr.is-focus { background: var(--ui-accent-tint); }
.vv-fr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.vv-fr-num { flex: none; min-inline-size: 22px; block-size: 22px; padding-inline: 5px; border-radius: 999px; border: 1px solid var(--ui-accent-line); background: var(--ui-surface); color: var(--ui-accent); font: 600 11.5px/20px var(--font-ui); font-variant-numeric: tabular-nums; text-align: center; }
.vv-fr.is-focus .vv-fr-num { background: var(--ui-ink); border-color: var(--ui-ink); color: #fff; }
.vv-fr-num--none { border-style: dashed; border-color: var(--ui-line-strong); color: var(--ui-faint); }
.vv-fr.is-focus .vv-fr-num--none { background: var(--ui-surface); border-color: var(--ui-line-strong); color: var(--ui-faint); }
.vv-fr-label { flex: 1 1 120px; min-inline-size: 0; font-size: 13.5px; font-weight: 600; color: var(--ui-ink-2); }
.vv-fr-value { min-block-size: 36px; padding: 7px 12px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-surface-page); overflow-wrap: anywhere; }
.vv-fr.is-changed .vv-fr-input { border-color: var(--ui-accent-fill); background: var(--ui-accent-tint); }
.vv-fr-meta { display: grid; gap: 3px; font-size: 12.5px; color: var(--ui-ink-3); }
.vv-fr-meta:empty { display: none; }
.vv-fr-meta p { overflow-wrap: anywhere; }
.vv-fr-error { color: var(--ui-danger); font-weight: 500; }
.vv-fr-effect { display: flex; align-items: flex-start; gap: 6px; color: var(--ui-ink-2); }
.vv-fr-effect .vv-icon { flex: none; margin-block-start: 2px; color: var(--ui-muted); }
.vv-fr-was { color: var(--ui-muted); text-decoration: line-through; text-decoration-color: var(--ui-faint); }
.vv-fr-meta .vv-fr-was { text-decoration: none; color: var(--ui-ink-2); }
.vv-fr-two { display: grid; gap: 4px; margin-block-start: 4px; padding: 10px 12px; border-radius: var(--ui-radius); background: var(--ui-warn-tint); color: var(--ui-ink-2); }
.vv-fr-actions { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.vv-conf { display: inline-flex; align-items: center; gap: 6px; flex: none; white-space: nowrap; }
.vv-conf-track { inline-size: 40px; block-size: 6px; border-radius: 999px; background: var(--ui-surface-sunken); overflow: hidden; }
.vv-conf-track span { display: block; block-size: 100%; border-radius: 999px; background: var(--vv-c-warn); }
.vv-conf--mid .vv-conf-track span { background: var(--ui-muted); }
.vv-conf--hi .vv-conf-track span { background: var(--vv-c-good); }
.vv-conf-word { font-size: 12px; color: var(--ui-ink-3); }

/* Full screen: the browser's own where it has one for part of a page, otherwise the view covers the window. */
.vv-dv:fullscreen, .vv-dv.is-full { inline-size: 100%; block-size: 100%; border: 0; border-radius: 0; }
.vv-dv.is-full:not(:fullscreen) { position: fixed; inset: 0; z-index: 1200; block-size: 100dvh; padding-block-start: var(--vv-safe-top); padding-block-end: var(--vv-safe-bottom); }
.vv-dv:fullscreen::backdrop { background: var(--ui-surface); }
.vv-dv:fullscreen .vv-dv-grid, .vv-dv.is-full .vv-dv-grid { flex: 1; block-size: auto; }

/* A narrow view (a phone, or a tablet on its side beside the sidebar): the page above, the fields below as a sheet
   that its handle pulls up over the page. */
.vv-dv.is-narrow .vv-dv-grid { display: flex; flex-direction: column; block-size: clamp(480px, calc(100svh - 132px), 1100px); }
.vv-dv.is-narrow .vv-dv-canvas { flex: 1 1 0; }
.vv-dv.is-narrow .vv-dv-side { flex: 0 0 var(--vv-sheet); border-inline-start: 0; border-block-start: 1px solid var(--ui-line-strong); border-start-start-radius: 14px; border-start-end-radius: 14px; margin-block-start: -12px; position: relative; z-index: 2; box-shadow: 0 -8px 20px -12px rgb(42 36 28 / .35); transition: flex-basis .18s ease-out; }
.vv-dv.is-narrow .vv-dv-handle { display: grid; place-items: center; flex: none; inline-size: 100%; block-size: 24px; padding: 0; border: 0; background: none; cursor: ns-resize; touch-action: none; }
.vv-dv.is-narrow .vv-dv-handle span { inline-size: 40px; block-size: 4px; border-radius: 999px; background: var(--ui-line-strong); }
.vv-dv.is-narrow .vv-dv-handle:focus-visible { outline-offset: -3px; }
.vv-dv.is-narrow .vv-dv-tools { padding-block-end: 16px; }
.vv-dv.is-narrow .vv-dv-actions { margin-inline-start: 0; }
.vv-dv.is-narrow:fullscreen .vv-dv-grid, .vv-dv.is-narrow.is-full .vv-dv-grid { block-size: auto; }
.vv-dv.is-tight .vv-dv-bar { gap: 6px 10px; padding: 6px 8px; }
.vv-dv.is-tight .vv-dv-nav { flex: 1 1 100%; }
.vv-dv.is-tight .vv-dv-picker { flex: 1; }
.vv-dv.is-tight .vv-dv-picker > summary { display: flex; justify-content: space-between; }
.vv-dv.is-tight .vv-dv-title strong { max-inline-size: 58vw; }
.vv-dv.is-tight .vv-dv-fact.vv-muted { display: none; }
.vv-dv.is-tight .vv-dv-actions { flex: 1 1 100%; justify-content: space-between; }
.vv-dv.is-tight .vv-dv-tools { justify-content: center; }
.vv-dv.is-tight .vv-dv-full span { display: none; }
.vv-dv.is-tight .vv-dv-actions { gap: 4px 6px; }
.vv-dv.is-tight .vv-dv-zoom { margin-inline-start: 0; }
.vv-dv.is-tight .vv-fr { padding-inline: 12px; }
@media (pointer: coarse) {
  .vv-dv-ib { inline-size: 44px; block-size: 44px; }
  .vv-dv-switch { min-block-size: 44px; }
  .vv-docs-open { min-block-size: 44px; justify-content: center; }
}

/* ── 12. New application ──────────────────────────────────────────────────── */
.vv-auto { max-inline-size: 1040px; display: grid; gap: 14px; }
.vv-drop { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; padding: 40px 24px; border: 1.5px dashed var(--ui-line-strong); border-radius: var(--ui-radius-lg); background: var(--ui-surface-page); cursor: pointer; position: relative; transition: border-color .15s, background-color .15s; }
.vv-drop:hover, .vv-drop:focus-within { border-color: var(--ui-accent); background: var(--ui-accent-tint); }
.vv-drop:focus-within { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.vv-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; inline-size: 100%; block-size: 100%; }
.vv-drop strong { font-size: 16px; }
.vv-drop span { font-size: 13px; color: var(--ui-muted); max-inline-size: 72ch; }
.vv-drop-mark { display: grid !important; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 50%; background: var(--ui-surface); border: 1px solid var(--ui-line); color: var(--ui-accent) !important; margin-block-end: 4px; }
.vv-drop.is-busy { opacity: .7; pointer-events: none; }
.vv-drop.is-off { cursor: not-allowed; }
.vv-drop.is-off:hover { border-color: var(--ui-line-strong); background: var(--ui-surface-page); }
.vv-drop.is-off input { cursor: not-allowed; }
.vv-progress { display: grid; gap: 6px; }
.vv-progress li { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 9px 12px; border-radius: 6px; background: var(--ui-surface-sunken); border-inline-start: 3px solid #D99A2B; }
.vv-progress li.is-done { border-inline-start-color: var(--ui-good); }
.vv-progress li.is-failed { border-inline-start-color: var(--ui-bad); background: var(--ui-bad-tint); }
.vv-progress small { color: var(--ui-ink-3); }
.vv-manual { max-inline-size: 1040px; }
.vv-manual > summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--ui-ink-2); font-weight: 500; padding: 8px 4px; list-style: none; border-radius: 6px; }
.vv-manual > summary::-webkit-details-marker { display: none; }
.vv-manual > summary:hover { color: var(--ui-accent); }
.vv-manual-chevron { color: var(--ui-muted); transition: transform .15s; }
[dir="rtl"] .vv-manual-chevron { transform: scaleX(-1); }
.vv-manual[open] .vv-manual-chevron { transform: rotate(90deg); }
.vv-intake { display: flex; flex-direction: column; gap: 16px; margin-block-start: 12px; }
.vv-n { display: inline-grid; place-items: center; inline-size: 24px; block-size: 24px; border-radius: 50%; background: var(--ui-accent-tint); color: var(--ui-accent-strong); font-size: 12.5px; font-weight: 600; align-self: center; }
.vv-repeat { padding: 14px; margin-block-end: 12px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-surface-page); display: grid; gap: 12px; }
.vv-repeat.vv-form-grid { gap: 14px 16px; }
.vv-repeat-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.vv-remove { align-self: end; min-block-size: 36px; text-align: start; }
.vv-tests { display: grid; gap: 8px; }
.vv-tests label { display: grid; grid-template-columns: 1fr 200px; gap: 16px; align-items: center; }
.vv-submit { display: flex; justify-content: flex-end; align-items: center; gap: 16px; flex-wrap: wrap; position: sticky; inset-block-end: 0; padding: 14px 0; background: linear-gradient(transparent, var(--ui-surface-page) 30%); }

/* ── 13. Registers and reference lists ────────────────────────────────────── */
.vv-acc-item + .vv-acc-item { border-block-start: 1px solid var(--ui-line-soft); }
.vv-acc-head { display: flex; align-items: center; gap: 10px; inline-size: 100%; padding: 12px 20px; border: 0; background: none; text-align: start; cursor: pointer; transition: background-color .12s; }
.vv-acc-head:hover { background: var(--ui-surface-page); }
.vv-acc-head:focus-visible { outline-offset: -2px; }
.vv-acc-name { font-weight: 600; flex: 0 0 220px; min-inline-size: 0; }
.vv-acc-meta { display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: 13.5px; color: var(--ui-ink-2); min-inline-size: 0; }
.vv-acc-item.is-open { background: var(--ui-surface-page); }
.vv-acc-body { margin: 0 20px 16px; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); overflow: hidden; }
.vv-acc-body > .vv-kv { margin: 0; padding: 12px 20px; border-block-end: 1px solid var(--ui-line-soft); }
/* A country's own entry, with the button that edits it beside it. */
.vv-acc-entry { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 12px 20px; border-block-end: 1px solid var(--ui-line-soft); }
.vv-acc-entry > .vv-kv { margin: 0; flex: 1 1 320px; min-inline-size: 0; }
.vv-inline-edit { inline-size: 28px; block-size: 28px; margin-inline-start: 4px; vertical-align: middle; color: var(--ui-muted); }
.vv-reflist > li { padding: 16px 20px; }
.vv-reflist > li + li { border-block-start: 1px solid var(--ui-line-soft); }
.vv-reflist-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.vv-services { display: grid; gap: 20px; }
.vv-source { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; white-space: nowrap; }

/* ── 14. Assessment guide ─────────────────────────────────────────────────── */
.vv-pipeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.vv-pipe { background: var(--ui-surface); border: 1px solid var(--ui-line); border-block-start: 3px solid var(--ui-faint); border-radius: var(--ui-radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.vv-pipe--good { border-block-start-color: var(--ui-good); }
.vv-pipe--brass { border-block-start-color: var(--ui-brass); background: var(--ui-brass-tint); }
.vv-pipe-n { font-size: 12px; font-weight: 600; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.vv-pipe p { font-size: 13px; color: var(--ui-ink-2); }

/* ── 15. Public pages: sign in and the applicant portal ───────────────────── */
.vv-public { background: var(--ui-surface-page); }
.vv-public-top { display: flex; justify-content: space-between; align-items: center; gap: 16px 20px; flex-wrap: wrap; padding: 16px var(--vv-pad); background: var(--ui-surface); border-block-end: 1px solid var(--ui-line); box-shadow: inset 0 3px 0 var(--ui-moccae-gold); }
.vv-public-top .vv-brand { flex-direction: row; align-items: center; gap: 18px; padding: 0; }
.vv-public-top .vv-brand-logo { max-inline-size: 240px; inline-size: auto; block-size: 52px; }
.vv-public-top .vv-brand-text { padding-inline-start: 18px; border-inline-start: 1px solid var(--ui-line-strong); }
.vv-public-top .vv-brand-text strong { font-size: 16px; }
.vv-public-main { flex: 1; inline-size: 100%; max-inline-size: 1120px; margin-inline: auto; padding: 40px var(--vv-pad) 64px; display: flex; flex-direction: column; gap: 24px; }
.vv-public-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px 24px; flex-wrap: wrap; padding: 18px var(--vv-pad); font-size: 13px; color: var(--ui-muted); border-block-start: 1px solid var(--ui-line); background: var(--ui-surface); }
.vv-public-foot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.vv-auth { max-inline-size: 440px; margin: 32px auto; inline-size: 100%; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 12px; padding: 32px; display: grid; gap: 14px; box-shadow: 0 8px 28px rgb(42 36 28 / .06); }
.vv-auth .vv-lede { margin-block-start: -6px; }
.vv-auth-form { display: grid; gap: 16px; margin-block-start: 6px; }
.vv-auth-submit { inline-size: 100%; block-size: 40px !important; margin-block-start: 4px; }
.vv-auth-links { display: flex; flex-direction: column; gap: 8px; padding-block-start: 14px; border-block-start: 1px solid var(--ui-line-soft); font-size: 13.5px; color: var(--ui-muted); }
.vv-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 20px; align-items: start; }
.vv-langs { scroll-margin-block-start: calc(var(--vv-top) + 24px); }
.vv-portal-hero h1 { font-size: 32px; max-inline-size: 24ch; }
.vv-portal-hero p { margin-block-start: 10px; font-size: 16px; color: var(--ui-ink-2); max-inline-size: 62ch; }
.vv-portal-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.vv-portal-grid > .vv-card { display: grid; gap: 16px; }
.vv-portal-grid > .vv-card > h2 { margin: 0; }
.vv-portal-steps { display: grid; gap: 18px; counter-reset: step; }
.vv-portal-steps > li { position: relative; padding-inline-start: 38px; counter-increment: step; }
.vv-portal-steps > li::before { content: counter(step); position: absolute; inset-inline-start: 0; inset-block-start: 0; display: grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: 50%; background: var(--ui-accent-tint); color: var(--ui-accent-strong); font-size: 13px; font-weight: 600; }
.vv-portal-lookup { display: grid; grid-template-columns: 1fr; gap: 14px; }
.vv-portal-lookup .ui-btn { justify-self: start; }
.vv-portal-result { display: grid; gap: 14px; max-inline-size: 760px; }
.vv-portal-refrow { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.vv-portal-ref { font-size: 30px; font-weight: 600; line-height: 1.2; }

/* ── 16. Narrow screens ───────────────────────────────────────────────────── */
@media (max-width: 1240px) {
  .vv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vv-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vv-user-text { max-inline-size: 190px; }
}
@media (max-width: 1000px) {
  :root { --vv-pad: 20px; }
  /* The sidebar becomes a drawer over the page. Closed, it is out of sight and out of the tab order. */
  .vv-side { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 70; inline-size: min(320px, 88vw); block-size: auto; transform: translateX(-102%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; box-shadow: var(--vv-pop); }
  [dir="rtl"] .vv-side { transform: translateX(102%); }
  .is-nav-open .vv-side { transform: none; visibility: visible; transition: transform .2s ease; }
  .vv-side { inset-block: 0; block-size: auto; padding-block: calc(16px + var(--vv-safe-top)) calc(14px + var(--vv-safe-bottom)); padding-inline-start: calc(14px + var(--vv-safe-start)); }
  [dir="rtl"] .vv-side { padding-inline-start: calc(14px + var(--vv-safe-end)); }
  .vv-side-head { justify-content: space-between; }
  .vv-side-close { display: inline-grid; inline-size: 44px; block-size: 44px; margin: -4px; }
  .vv-side-nav a { min-block-size: 46px; font-size: 15px; }
  .vv-side-foot { min-block-size: 48px; }
  .vv-top { padding-inline: max(var(--vv-pad), var(--vv-safe-start)) max(var(--vv-pad), var(--vv-safe-end)); }
  .vv-main { padding-inline: max(var(--vv-pad), var(--vv-safe-start)) max(var(--vv-pad), var(--vv-safe-end)); }
  .vv-scrim { display: block; position: fixed; inset: 0; z-index: 65; background: rgb(31 27 22 / .45); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .is-nav-open .vv-scrim { opacity: 1; pointer-events: auto; }
  .vv-menu-btn { display: inline-grid; inline-size: 44px; block-size: 44px; margin-inline-start: -10px; }
  .vv-user-text, .vv-account-chevron { display: none; }
  .vv-account-who { display: flex; }
  .vv-account > summary { padding: 2px; border-radius: 50%; }
  .vv-top { gap: 10px; }
  .vv-top-right { gap: 8px; }
  .vv-grid-2, .vv-portal-grid, .vv-boot-grid { grid-template-columns: minmax(0, 1fr); }
  .vv-boot-side { display: none; }
  .vv-pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vv-compare { grid-template-columns: minmax(0, 1fr); gap: 0; margin-block-start: 0; }
  .vv-compare-link { position: relative; inset: auto; margin-block: -3px; }
  .vv-facts-wide { grid-column: auto; }
  .vv-tl-row { grid-template-columns: minmax(0, 150px) 1fr; gap: 10px; }
  .vv-acc-name { flex-basis: 160px; }
  .vv-tests label { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 640px) {
  :root { --vv-pad: 16px; }
  body { font-size: 14px; }
  h1 { font-size: 21px; }
  .vv-main { padding-block: 20px 56px; gap: 16px; }
  .vv-card { padding: 16px; }
  .vv-card--flush, .vv-summary { padding: 0; }
  .vv-card-head { padding: 12px 16px; }
  .vv-table th, .vv-table td { padding-inline: 16px; }
  .vv-head-actions { inline-size: 100%; }
  .vv-head-actions > .ui-btn, .vv-head-actions > .ui-field { flex: 1 1 100%; }
  .vv-assignee { flex: 1 1 100%; }
  .vv-assign { flex: 1; }
  .vv-filterbar .vv-searchbox, .vv-toolbar .vv-searchbox, .vv-toolbar .ui-field, .vv-card-head .vv-searchbox { inline-size: 100%; }
  .vv-toolbar > .ui-btn { margin-inline-start: 0; inline-size: 100%; }
  .vv-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--vv-pad) * -1); padding-inline: var(--vv-pad); scrollbar-width: none; inline-size: calc(100% + var(--vv-pad) * 2); }
  .vv-chips::-webkit-scrollbar { display: none; }
  .vv-chip { flex: none; }
  .vv-tiles, .vv-tiles--3 { gap: 10px; }
  .vv-tiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vv-tile { padding: 13px 14px 12px; }
  .vv-tile-value { font-size: 26px; }
  .vv-dash, .vv-dash-mix { gap: 16px; }
  .vv-barrow, .vv-barlist--wide .vv-barrow { grid-template-columns: minmax(0, 1fr) max-content; min-block-size: 48px; padding-block: 9px; }
  .vv-barrow-name { grid-column: 1; }
  .vv-barrow-name > span { white-space: normal; }
  .vv-barrow-value { grid-column: 2; grid-row: 1; }
  .vv-barrow-bar { grid-column: 1 / -1; }
  .vv-keys--rows li > * { min-block-size: 46px; }
  .vv-work { padding-inline: 16px; }
  .vv-feed-item { grid-template-columns: 38px 28px minmax(0, 1fr); gap: 2px 10px; }
  .vv-feed-item:not(:last-child)::before { inset-inline-start: 61.5px; }
  .vv-hollow, .vv-hollow--wide { padding: 32px 16px 24px; }
  .vv-boot-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vv-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; padding: 16px; }
  .vv-verdict { padding: 16px; }
  .vv-verdict-title { font-size: 19px; }
  .vv-next .ui-btn, .vv-next .vv-link { margin-inline-start: 0; }
  .vv-tl-row { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .vv-tl-row--axis > span:first-child { display: none; }
  .vv-doc-toggle { padding-inline-start: 16px; }
  .vv-doc-head { padding-inline-end: 16px; }
  .vv-doc-side { padding-inline-start: 42px; padding-block: 0 12px; }
  .vv-doc-open { margin-inline-start: 0; }
  .vv-doc-body, .vv-acc-body { margin-inline: 12px; }
  .vv-acc-head { padding-inline: 16px; flex-wrap: wrap; }
  .vv-acc-name { flex: 1 1 60%; }
  .vv-acc-meta { flex: 1 1 100%; padding-inline-start: 26px; }
  .vv-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .vv-kv dd { margin-block-end: 8px; }
  .vv-pipeline { grid-template-columns: minmax(0, 1fr); }
  .vv-missing-bar { grid-template-columns: minmax(0, 1fr) 70px max-content; }
  .vv-public-top .vv-brand { gap: 12px; }
  .vv-public-top .vv-brand-logo { block-size: 40px; }
  .vv-public-top .vv-brand-text { padding-inline-start: 12px; }
  .vv-public-top .vv-brand-text strong { font-size: 13px; }
  .vv-public-main { padding-block: 24px 48px; }
  .vv-auth { padding: 24px 20px; margin-block: 8px; }
  .vv-portal-hero h1 { font-size: 25px; }
  .vv-portal-hero p { font-size: 15px; }
  .vv-blank { padding: 48px 20px; }
  .vv-pager { justify-content: space-between; }
  .vv-find-list { position: fixed; inset-inline: 8px; inset-block-start: calc(var(--vv-top) + 4px); min-inline-size: 0; }
  /* Typing: 16px, so a phone does not zoom the page when a field takes focus, and fields tall enough for a thumb. */
  .ui-input, .ui-select, .ui-searchbox__input, [dir="rtl"] .ui-input, [dir="rtl"] .ui-select { font-size: 16px; min-block-size: 44px; }
  .vv-find-input { block-size: 44px; }
  .vv-chip { min-block-size: 42px; padding-inline: 14px; }
  .vv-iconbtn { inline-size: 44px; block-size: 44px; }
  .vv-alert-x { inline-size: 36px; block-size: 36px; }
  .ui-btn--md { min-block-size: 44px; }
  .ui-btn--sm { min-block-size: 40px; font-size: 13px; }
  .ui-dropdown__item { min-block-size: 46px; }
  .vv-more { min-block-size: 40px; }
  .vv-actions > .ui-btn { flex: 1 1 auto; }
  .vv-choice { padding-block: 14px; }
  .vv-rowmenu > summary { inline-size: 44px; block-size: 44px; }
  .vv-missing-bar { min-block-size: 46px; }
  .vv-crumbs a, .vv-verdict-pick, .vv-manual > summary, .vv-link { min-block-size: 44px; }
  .vv-link { display: inline-flex; align-items: center; }
  .vv-seg button, .vv-seg--sm button { min-block-size: 40px; padding-inline: 14px; }
  .vv-feed-case { min-block-size: 40px; align-items: center; }
  .vv-skip { min-block-size: 44px; }
  .vv-narrowed a { inline-size: 40px; block-size: 40px; }
  .vv-top { gap: 6px; padding-block-end: 8px; padding-block-start: calc(8px + var(--vv-safe-top)); }
  .vv-top-right { gap: 4px; }
  /* A dialog is a sheet from the bottom edge: its actions sit under the thumb, and above the keyboard when one is
     up (site.js measures the keyboard into --vv-kb). */
  .dlg-panel { inset: auto 0 var(--vv-kb, 0px) 0 !important; transform: none !important; inline-size: 100% !important; max-block-size: calc(100dvh - var(--vv-kb, 0px) - var(--vv-safe-top) - 12px) !important; border-radius: 16px 16px 0 0 !important; border-inline: 0 !important; border-block-end: 0 !important; }
  .dlg-body { overscroll-behavior: contain; }
  .dlg-foot { position: sticky; inset-block-end: 0; background: var(--ui-surface); padding-block-end: calc(14px + var(--vv-safe-bottom)) !important; }
  .dlg-foot .ui-btn { flex: 1 1 0; min-block-size: 46px; }
}
@media (max-width: 400px) {
  .vv-seg button { padding-inline: 8px; }
  .vv-find-input::placeholder { font-size: 13px; }
}

/* ── 17. Motion and print ─────────────────────────────────────────────────── */
/* Charts draw themselves once, when they arrive: arcs sweep, bars wipe in from the start edge, columns rise. */
@keyframes vv-arc { from { stroke-dasharray: 0 308; } }
@keyframes vv-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes vv-rise { from { transform: scaleY(0); } }
@keyframes vv-shimmer { to { background-position: -200% 0; } }
@keyframes vv-boot-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; }
  .vv-bone { animation: none; }
  a.vv-tile:hover { transform: none; }
}
@media print {
  .vv-side, .vv-top, .vv-scrim, .vv-skip, .vv-crumbs, .vv-head-actions, .ui-tabs { display: none !important; }
  .vv-main { padding: 0; max-inline-size: none; }
  .vv-card, .vv-verdict { box-shadow: none; break-inside: avoid; }
  body { background: #fff; }
}

/* Degree evidence (application screen, Missing information tab) */
.vv-table--evidence { min-inline-size: 560px; }
.vv-table--evidence td { vertical-align: middle; }
.vv-evidence-change { display: flex; align-items: center; gap: 8px; color: var(--ui-muted); }
.vv-table--claims { min-inline-size: 860px; }
.vv-table--claims td:first-child { min-inline-size: 260px; }
.vv-table--claims td:last-child { min-inline-size: 220px; }

/* Nothing inside the page may push it wider than the window: wide content scrolls inside its own card. */
.vv-main > *, .vv-public-main > *, .vv-stack > *, .vv-grid-2 > *, .vv-grid-even > * { min-inline-size: 0; max-inline-size: 100%; }
.vv-table td { overflow-wrap: break-word; }
.vv-table--schools { table-layout: fixed; min-inline-size: 820px; }
.vv-table--schools th:nth-child(1) { inline-size: 26%; }
.vv-table--schools th:nth-child(2) { inline-size: 19%; }
.vv-table--schools th:nth-child(3) { inline-size: 16%; }
.vv-table--schools th:nth-child(4) { inline-size: 21%; }
.vv-table--schools th:nth-child(6) { inline-size: 110px; }
.vv-table--schools td.vv-nowrap { white-space: normal; }
.vv-table--ref { min-inline-size: 1020px; }
.vv-table--ref td:nth-child(2) { min-inline-size: 230px; }
.ui-tabs { gap: 0 !important; scroll-padding-inline: 24px; }
.ui-tabs .ui-tab { padding-inline: 12px; }
/* Applications: seven columns share the width by what they hold; the last heading may wrap. */
.vv-table--apps { table-layout: fixed; min-inline-size: 1040px; }
.vv-table--apps th { white-space: normal; }
.vv-table--apps th:nth-child(1) { inline-size: 19%; }
.vv-table--apps th:nth-child(2) { inline-size: 18%; }
.vv-table--apps th:nth-child(3) { inline-size: 14%; }
.vv-table--apps th:nth-child(4) { inline-size: 19%; }
.vv-table--apps th:nth-child(5) { inline-size: 11%; }
.vv-table--apps th:nth-child(6) { inline-size: 10%; }
.vv-table--apps th:nth-child(7) { inline-size: 9%; }
.vv-table--apps th, .vv-table--apps td { padding-inline: 14px; }
.vv-table--apps th:first-child, .vv-table--apps td:first-child { padding-inline-start: 20px; }
.vv-table--apps th:last-child, .vv-table--apps td:last-child { padding-inline-end: 20px; }
.vv-card .ui-empty-state:not(.ui-empty-state--rich) { padding: 14px 20px; }

/* On a phone the list tables become one block per row: the first cell is the heading, the rest are labelled lines. */
@media (max-width: 640px) {
  .vv-table--stack { display: block; min-inline-size: 0 !important; table-layout: auto; }
  .vv-table--stack thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .vv-table--stack tbody, .vv-table--stack tr { display: block; }
  .vv-table--stack tr { position: relative; padding: 12px 16px; border-block-end: 1px solid var(--ui-line-soft); }
  .vv-table--stack tbody tr:last-child { border-block-end: 0; }
  .vv-table--stack td { display: grid; grid-template-columns: minmax(0, 118px) minmax(0, 1fr); gap: 2px 10px; align-items: start; inline-size: auto !important; min-inline-size: 0 !important; padding: 4px 0 !important; border: 0 !important; text-align: start !important; box-shadow: none !important; white-space: normal; }
  .vv-table--stack td::before { content: attr(data-label); font-size: 12px; color: var(--ui-muted); padding-block-start: 2px; }
  .vv-table--stack td:first-child { display: block; padding-block-end: 8px !important; padding-inline-end: 44px !important; }
  .vv-table--stack td:first-child::before { content: none; }
  .vv-table--stack td.vv-col-menu { position: absolute; inset-block-start: 8px; inset-inline-end: 10px; display: block; padding: 0 !important; }
  .vv-table--stack td.vv-col-menu::before { content: none; }
  .vv-table--stack td:not(:first-child):not(.vv-col-menu) > * { grid-column: 2; justify-self: start; }
  .vv-table--stack .vv-assign { inline-size: 100%; min-inline-size: 0; }
}

/* ---------- Submission progress: the files, the steps and what was found, as they happen ---------- */
.vv-sp { display: grid; gap: 18px; margin-block-start: 18px; padding: 18px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-surface); animation: vv-sp-in .35s ease-out both; }
.vv-sp-bar { block-size: 6px; border-radius: 999px; background: var(--ui-line); overflow: hidden; }
.vv-sp-bar i { display: block; block-size: 100%; inline-size: var(--to); border-radius: inherit; background: linear-gradient(90deg, var(--ui-accent), var(--ui-moccae-gold)); animation: vv-sp-glide var(--dur) cubic-bezier(.12, .7, .25, 1) both; position: relative; overflow: hidden; }
[dir="rtl"] .vv-sp-bar i { background: linear-gradient(270deg, var(--ui-accent), var(--ui-moccae-gold)); }
.vv-sp-bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .55), transparent); transform: translateX(-100%); animation: vv-sp-shine 1.6s linear infinite; }
.vv-sp.is-finished .vv-sp-bar i { background: var(--ui-good); }
.vv-sp.is-finished .vv-sp-bar i::after, .vv-sp.is-failed .vv-sp-bar i::after { animation: none; opacity: 0; }
.vv-sp.is-failed .vv-sp-bar i { background: var(--ui-bad); }

.vv-sp-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.vv-sp-file { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-surface-2, var(--ui-surface)); animation: vv-sp-rise .4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 45ms); transition: border-color .3s, background-color .3s; min-inline-size: 0; }
.vv-sp-file .vv-sp-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-inline-size: 0; }
.vv-sp-file small { grid-column: 2; font-size: 11.5px; color: var(--ui-muted); }
.vv-sp-sheet { grid-row: 1 / span 2; position: relative; inline-size: 26px; block-size: 32px; border: 1.5px solid var(--ui-line-strong); border-radius: 4px; background: #fff; overflow: hidden; color: var(--ui-good); transition: border-color .3s, background-color .3s; }
.vv-sp-lines { position: absolute; inset: 6px 4px; background: repeating-linear-gradient(to bottom, var(--ui-line-strong) 0 1.5px, transparent 1.5px 5px); opacity: .7; transition: opacity .3s; }
.vv-sp-sweep { position: absolute; inset-inline: 0; block-size: 9px; inset-block-start: -9px; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--ui-moccae-gold) 55%, transparent)); border-block-end: 1.5px solid var(--ui-moccae-gold); opacity: 0; }
.vv-sp-tick { position: absolute; inset: 0; margin: auto; inline-size: 16px; block-size: 16px; opacity: 0; transform: scale(.4); transition: opacity .25s, transform .35s cubic-bezier(.2, 1.4, .4, 1); }
.vv-sp-file.is-arriving { opacity: .55; }
.vv-sp-file.is-reading { border-color: var(--ui-brass-line, var(--ui-line-strong)); }
.vv-sp-file.is-reading .vv-sp-sweep { opacity: 1; animation: vv-sp-scan 1.25s ease-in-out infinite; animation-delay: calc(var(--i) * 130ms); }
.vv-sp-file.is-read { border-color: color-mix(in srgb, var(--ui-good) 45%, var(--ui-line)); }
.vv-sp-file.is-read .vv-sp-sheet { border-color: var(--ui-good); background: color-mix(in srgb, var(--ui-good) 9%, #fff); }
.vv-sp-file.is-read .vv-sp-lines { opacity: .18; }
.vv-sp-file.is-read .vv-sp-tick { opacity: 1; transform: scale(1); }

.vv-sp-steps { display: grid; gap: 2px; }
.vv-sp-step { display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; padding-block: 8px; position: relative; animation: vv-sp-rise .35s cubic-bezier(.2, .8, .2, 1) both; }
.vv-sp-step:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 12px; inset-block: 32px -6px; inline-size: 2px; background: var(--ui-line); }
.vv-sp-step.is-done:not(:last-child)::before { background: color-mix(in srgb, var(--ui-good) 40%, var(--ui-line)); }
.vv-sp-mark { inline-size: 26px; block-size: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ui-surface); border: 2px solid var(--ui-line-strong); color: #fff; transition: background-color .3s, border-color .3s; }
.vv-sp-mark svg { inline-size: 14px; block-size: 14px; }
.vv-sp-step.is-done .vv-sp-mark { background: var(--ui-good); border-color: var(--ui-good); animation: vv-sp-pop .4s cubic-bezier(.2, 1.5, .4, 1) both; }
.vv-sp-step.is-failed .vv-sp-mark { background: var(--ui-bad); border-color: var(--ui-bad); }
.vv-sp-step.is-now .vv-sp-mark { border-color: transparent; }
.vv-sp-ring { inline-size: 22px; block-size: 22px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--ui-moccae-gold) 25%, transparent); border-block-start-color: var(--ui-accent); animation: vv-sp-spin .8s linear infinite; }
.vv-sp-draw { stroke-dasharray: 16; stroke-dashoffset: 16; animation: vv-sp-draw .35s .1s ease-out forwards; }
.vv-sp-body { min-inline-size: 0; padding-block-start: 2px; }
.vv-sp-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vv-sp-title strong { font-size: 14.5px; font-weight: 600; }
.vv-sp-step:not(.is-now):not(.is-failed) .vv-sp-title strong { color: var(--ui-ink-2); }
.vv-sp-count { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ui-accent); font-weight: 600; }
.vv-sp-time { font-size: 12px; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.vv-sp-fail { color: var(--ui-bad); font-size: 13.5px; margin-block-start: 4px; }
.vv-sp-ticker { position: relative; block-size: 1.5em; margin-block-start: 2px; font-size: 13px; color: var(--ui-muted); overflow: hidden; }
.vv-sp-ticker span { position: absolute; inset-inline-start: 0; inset-block-start: 0; white-space: nowrap; opacity: 0; animation: vv-sp-tick calc(var(--n) * 3.2s) linear infinite; animation-delay: calc(var(--i) * 3.2s); }
.vv-sp-found { display: grid; gap: 3px; margin-block-start: 6px; }
.vv-sp-found li { font-size: 13px; color: var(--ui-ink-2); padding-inline-start: 14px; position: relative; animation: vv-sp-slide .4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 110ms); }
.vv-sp-found li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .58em; inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--ui-moccae-gold); }
.vv-sp-step.is-done:last-child .vv-sp-title strong { color: var(--ui-good); }

@keyframes vv-sp-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes vv-sp-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes vv-sp-slide { from { opacity: 0; transform: translateX(-8px); } }
[dir="rtl"] .vv-sp-found li { animation-name: vv-sp-slide-rtl; }
@keyframes vv-sp-slide-rtl { from { opacity: 0; transform: translateX(8px); } }
@keyframes vv-sp-glide { from { inline-size: var(--from); } to { inline-size: var(--to); } }
@keyframes vv-sp-shine { to { transform: translateX(100%); } }
@keyframes vv-sp-scan { 0% { inset-block-start: -9px; } 55%, 100% { inset-block-start: 100%; } }
@keyframes vv-sp-spin { to { transform: rotate(360deg); } }
@keyframes vv-sp-pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
@keyframes vv-sp-draw { to { stroke-dashoffset: 0; } }
/* One line of the ticker at a time: in, hold, out, then wait its turn. */
@keyframes vv-sp-tick { 0% { opacity: 0; transform: translateY(70%); } 3%, 14% { opacity: 1; transform: none; } 17%, 100% { opacity: 0; transform: translateY(-70%); } }

@media (prefers-reduced-motion: reduce) {
  .vv-sp, .vv-sp-file, .vv-sp-step, .vv-sp-found li, .vv-sp-mark { animation: none !important; }
  .vv-sp-bar i { animation-duration: .01s; }
  .vv-sp-bar i::after, .vv-sp-sweep { display: none; }
  .vv-sp-ring { animation-duration: 2s; }
  .vv-sp-draw { animation: none; stroke-dashoffset: 0; }
  .vv-sp-ticker span { animation: none; }
  .vv-sp-ticker span:first-child { opacity: 1; }
}

/* Saving has failed: said across the top of every screen */
.vv-savefail { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: baseline; padding: 10px 28px; background: var(--ui-bad); color: #fff; font-size: 14px; }
.vv-savefail strong { font-weight: 600; }

/* While documents are being read the drop zone gives way to the progress account */
.vv-drop.is-busy { display: none; }