/* next-v96-kit.css: the workspace kit. Owner: the kit lead (r91 K, 2026-10-14; first written v96, 2026-10-02).
   r91: the product rises to the site. The public site shows the product in hero windows (site2/s2/vx-hero.css, built by
   scratchpad/r84/kit.cjs) and pictures (scratchpad/r89/img/gen.cjs); those depictions are the floor. This file carries their
   language into every workspace screen at once: Inter with Geist Mono for IDs and citations, zinc greys, one blue (#2554e8),
   a quiet window (a sidebar panel, a title row with a breadcrumb, white work area, hairline cards), real-density tables,
   status chips by meaning, and the parts a builder applies (vk-*: the lit focus card, KPI tiles, timeline, chain, the
   certificate as read with its line gutter, the patient-facing Passport card). Class names are the contract in
   scratchpad/r91/kit/KIT.md; keep them stable. Loads after next-v95-inspect.css, so its tokens and globals beat next-v89.css
   (the same selectors, later) and the screen files before it; next-v96*.css and later screen files can still specialise.
   Sections: 1 tokens · 2 frame · 3 primitives (page head, cards, tables, chips, tabs, strip, empty, avatars) · 4 the v96 parts
   · 5 vk components · 6 phone. */

/* =============================================================== 1. TOKENS */
/* r94 X (A10-18): every font-size in this file now names one of the six styles below (title 20, heading 14, body 13, small 12,
   label 11.5); the 12.5, 17, 15.5, 13.5, 11, 10.5 and 10 px values it carried were off the scale on every page. */
@font-face { font-family: "Geist Mono"; src: url("/w/fonts/GeistMono-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  /* the site's faces: Inter (self-hosted, optical sizes) for everything, Geist Mono only for IDs, line numbers and citations */
  --font: "Inter V", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", ui-sans-serif, system-ui, Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-id: var(--font-mono);
  /* the window's scale (the hero windows are the product at true scale): 13px body, 12px second lines, 11.5px labels */
  --t-title-size: 20px; --t-title-lh: 28px; --t-title-track: -0.02em;
  --t-num-size: 20px; --t-num-lh: 28px; --t-num-track: -0.02em;
  --t-heading-size: 14px; --t-heading-lh: 20px; --t-heading-track: -0.01em;
  --t-body-size: 13px; --t-body-lh: 20px;
  --t-small-size: 12px; --t-small-lh: 18px;
  --t-label-size: 11.5px; --t-label-lh: 16px;
  /* zinc greys (the pictures' ink, mute and hairlines); text uses 900, 700 and 500 */
  --gray-0: #FFFFFF; --gray-25: #FAFAFA; --gray-50: #F4F4F5; --gray-100: #F0F0F2; --gray-200: #E7E7EA;
  --gray-300: #D4D4D8; --gray-400: #A1A1AA; --gray-500: #6B6B74; --gray-700: #3F3F46; --gray-900: #1D1D21;
  /* one blue */
  --accent: #2554E8; --accent-hover: #1E46C9; --accent-tint: #EEF3FF; --on-accent: #FFFFFF;
  /* status by meaning, as the site's chips draw them: text, fill, border, dot */
  --positive-fg: #067647; --positive-bg: #ECFDF3; --positive-bd: #ABEFC6; --positive-dot: #17B26A;
  --attention-fg: #B54708; --attention-bg: #FFF4E6; --attention-bd: #FEDF89; --attention-dot: #F79009;
  --critical-fg: #B42318; --critical-bg: #FEF3F2; --critical-bd: #FECDCA; --critical-dot: #F04438;
  --neutral-fg: #5B5B63; --neutral-bg: #F3F3F5; --neutral-bd: #E4E4E7; --neutral-dot: #A1A1AA;
  --info-fg: #1D4ED8; --info-bg: #EEF3FF; --info-bd: #C7D7FE; --info-dot: #2554E8;
  /* the kit's own: hairline, side panel, the lit card's one real shadow, the document's shadow */
  --k-line: #ECECEF; --k-hair: rgba(15, 23, 42, .08); --k-side: #FAFAFA; --k-sel: #F5F8FF;
  /* r94 X (A10-17): muted text was #8B8B94, 3.24:1 on the side panel's #FAFAFA at 11.5px (WCAG AA asks 4.5:1). #6B6B74 is 5.05:1
     there and 4.64:1 on the tab strip's #F0F0F2. --k-dim stays for rules, chevrons and separators, never text. */
  --k-mute: #6B6B74; --k-dim: #A1A1AA;
  --k-nav-ink: #3D3D44; --k-nav-icon: #7A7A84; --k-nav-hover: #F0F0F2; --k-nav-on: #EBEBEE; --k-hover: #FAFAFB; --k-btn-bd: #DEDEE3;
  --k-track: #F2F2F4; --k-av-bg: #EEF0FF; --k-av-fg: #4F46E5;
  --k-lit-shadow: 0 0 0 1px rgba(16, 24, 40, .07), 0 2px 4px rgba(16, 24, 40, .04), 0 10px 32px rgba(0, 24, 60, .11);
  --k-doc-shadow: 0 0 0 1px rgba(15, 23, 42, .10), 0 1px 2px rgba(15, 23, 42, .06), 0 6px 16px -6px rgba(15, 23, 42, .10);
  --k-pass-grad: linear-gradient(135deg, #DBE5FF 0%, #E9E1FF 48%, #FDE3EF 100%);
  --r-card: 12px; --r-ctl: 8px; --r-lit: 14px;
  --shadow-card: 0 0 0 0 transparent;   /* a shadow value, never none: older rules compose it with an inset rule */
  --line-soft: var(--k-line);
  /* the site's palette (r89/img/palette.cjs): [tint, strong text, mid]; a firm keeps one hue everywhere */
  --hue-1-bg: #E8EFFF; --hue-1-fg: #1D4ED8; --hue-1-bar: #2F62EF;   /* blue */
  --hue-2-bg: #E5F5EC; --hue-2-fg: #067647; --hue-2-bar: #17A34A;   /* green */
  --hue-3-bg: #FFF3E0; --hue-3-fg: #B54708; --hue-3-bar: #EB9A2B;   /* amber */
  --hue-4-bg: #F1EAFD; --hue-4-fg: #6D3FC4; --hue-4-bar: #8E4EC6;   /* violet */
  --hue-5-bg: #FCE7F0; --hue-5-fg: #BE185D; --hue-5-bar: #E64A8F;   /* pink */
  --hue-6-bg: #DEF4F1; --hue-6-fg: #0F766E; --hue-6-bar: #14A597;   /* teal */
  --hue-7-bg: #FFEDDE; --hue-7-fg: #C2410C; --hue-7-bar: #F2711C;   /* orange */
  --hue-8-bg: #EEF0F3; --hue-8-fg: #475467; --hue-8-bar: #98A2B3;   /* slate */
  --hue-indigo-bg: #EBEAFD; --hue-indigo-fg: #4338CA; --hue-indigo-bar: #6366F1;
  --hue-sky-bg: #E2F2FB; --hue-sky-fg: #0369A1; --hue-sky-bar: #0B97D4;
  --hue-red-bg: #FDECEB; --hue-red-fg: #B42318; --hue-red-bar: #D92D20;
}
:root[data-theme="dark"] {
  --k-line: #24324D; --k-hair: rgba(255, 255, 255, .08); --k-side: #0D1422; --k-sel: #16264D; --k-mute: #98A2B4; --k-dim: #6D788C;
  --k-nav-ink: #C9D0DC; --k-nav-icon: #98A2B4; --k-nav-hover: #162033; --k-nav-on: #1C2841; --k-hover: #162033; --k-btn-bd: #34435F;
  --k-track: #162033; --k-av-bg: rgba(99, 102, 241, .2); --k-av-fg: #C7C8FF;
  --k-lit-shadow: 0 0 0 1px #34435F, 0 10px 32px rgba(0, 0, 0, .45);
  --k-doc-shadow: 0 0 0 1px #34435F, 0 6px 16px -6px rgba(0, 0, 0, .5);
  --info-fg: #A9C0FF; --info-bg: rgba(74, 118, 255, .18); --info-bd: rgba(74, 118, 255, .4); --info-dot: #5B85FF;
  --accent: #4A76FF; --accent-hover: #5B85FF; --accent-tint: #16264D;
  --shadow-card: 0 0 0 0 transparent; --line-soft: #24324D;
  --hue-1-bg: rgba(74, 118, 255, .18); --hue-1-fg: #A9C0FF; --hue-1-bar: #5B85FF;
  --hue-2-bg: rgba(34, 197, 94, .16); --hue-2-fg: #8BE3A9; --hue-2-bar: #3CC473;
  --hue-3-bg: rgba(245, 158, 11, .16); --hue-3-fg: #F2CF6B; --hue-3-bar: #E8B030;
  --hue-4-bg: rgba(139, 92, 246, .18); --hue-4-fg: #C9B5FF; --hue-4-bar: #9B7DFA;
  --hue-5-bg: rgba(244, 63, 94, .16); --hue-5-fg: #FFB1C3; --hue-5-bar: #F26D8D;
  --hue-6-bg: rgba(20, 184, 166, .16); --hue-6-fg: #86E3D8; --hue-6-bar: #2CC2B3;
  --hue-7-bg: rgba(249, 115, 22, .16); --hue-7-fg: #FFC29B; --hue-7-bar: #F58A4B;
  --hue-8-bg: rgba(148, 163, 184, .14); --hue-8-fg: #C9D0DC; --hue-8-bar: #8A96AA;
  --hue-indigo-bg: rgba(99, 102, 241, .2); --hue-indigo-fg: #C7C8FF; --hue-indigo-bar: #8183F4;
  --hue-sky-bg: rgba(11, 151, 212, .18); --hue-sky-fg: #9BD8F5; --hue-sky-bar: #3AB0E3;
  --hue-red-bg: rgba(239, 68, 68, .16); --hue-red-fg: #FFB5BA; --hue-red-bar: #FF8A90;
}
body { letter-spacing: -0.003em; font-feature-settings: "cv11"; }

/* identifiers: lot numbers, record ids, file names, serials: Geist Mono 500, as the site's windows set them. In a title an ID
   stays in the title's face (the hero's object strip reads "Ketoprofen USP · lot KT-0716" in Inter). */
.v89-id, .mono, .bc-id, .vk-id {
  font-family: var(--font-id); font-weight: var(--w-medium); font-size: var(--t-small-size); letter-spacing: 0;   /* r94 X (A10-18): .92em made 11.96, 11.04, 12.88 and 10.58 px */
  font-variant-numeric: tabular-nums slashed-zero; font-synthesis: none; color: inherit;
}
:is(h1, h2, .titleline, .v89-titlerow, .vk-lit-t, .v96-dr-t, .v95-move-n) :is(.v89-id, .mono, .bc-id) { font-family: inherit; font-size: inherit; font-weight: inherit; }
/* a file name or an ID set as a row's title (bold) reads in Inter, as the window's lists name "COA-KT-0716.pdf" */
:is(b, strong).v89-id, :is(b, strong).mono, :is(b, strong) > .v89-id, table td :is(b, strong):is(.v89-id, .mono) { font-family: var(--font); font-size: inherit; font-weight: var(--w-medium); font-variant-numeric: normal; }
/* the hero's line references ("Line 11", "line 14, p. 1") are mono too */
.v87ln, .v80ln, .vk-meta, .vk-src { font-family: var(--font-mono); letter-spacing: 0; }
.v87ln, .v80ln { font-size: 11.5px; }

/* =============================================================== 2. THE WINDOW FRAME
   The site's window: a side panel (zinc 50 and a hairline), the workspace tile and its name, search in the panel with its key,
   30px nav rows; the work area is white under one title row (46px in the window) holding the breadcrumb, the page's quiet
   status and the person. */
@media (min-width: 700px) {
  body, .shell, .shell .main, #view { background: var(--gray-0); }
  .shell > .nav { height: auto; width: auto; min-width: 0; background: var(--k-side); border-right: 1px solid var(--k-line); padding: var(--s-3) 10px var(--s-3); }
  .shell:not(.mini) > .nav .navlist { padding-left: 0; padding-right: 0; }
  .shell:not(.mini) #navSetup { margin-left: 0; margin-right: 0; }
  .shell:not(.mini) > .nav .v73vera, .shell:not(.mini) > .nav #navSetup:not(:empty) + .v73vera, .shell:not(.mini) > .nav #navSetup:empty + .v73vera { margin-left: 0; margin-right: 0; }
  /* the workspace tile and name (next-v96-kit.js puts the tile in; until then the Veritura mark stands) */
  .shell > .nav .brand { padding: 4px 6px; margin: 0 0 10px; }
  .shell > .nav .brand .bws { display: flex; gap: 9px; align-items: center; }
  .shell > .nav .brand .bws:has(.vk-wsi) > img, .shell > .nav .brand .bws:has(.vk-wsi) > div > b { display: none; }
  .shell > .nav .brand .bws:has(.vk-wsi) #wsNav { font-size: var(--t-body-size); line-height: 18px; font-weight: var(--w-semibold); color: var(--gray-900); -webkit-line-clamp: 2; }
  .vk-wsi { width: 24px; height: 24px; border-radius: 6px; flex: none; display: inline-grid; place-items: center; color: #fff; background: #1E3352;
    font: 600 var(--t-label-size)/1 var(--font); letter-spacing: .02em; }
  .vk-wsi[data-kind="clinic"] { background: #7C3AED; } .vk-wsi[data-kind="supplier"] { background: #B45309; }
  /* search lives in the panel, as in the window */
  .shell:not(.mini) > .nav .navsearch {
    display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; margin: 0 0 12px; border: 0; border-radius: 7px; background: var(--gray-0);
    box-shadow: inset 0 0 0 1px var(--k-line); color: var(--k-mute); font-size: var(--t-body-size); font-weight: var(--w-regular); cursor: pointer; width: 100%;
  }
  .shell:not(.mini) > .nav .navsearch:hover { box-shadow: inset 0 0 0 1px var(--gray-300); color: var(--gray-700); }
  .shell > .nav .navsearch svg.i { width: 14px; height: 14px; color: var(--k-mute); }
  .shell > .nav .navsearch kbd { margin-left: auto; padding: 0; border: 0; background: none; font: 500 var(--t-label-size)/1 var(--font-mono); color: var(--k-mute); }
  /* nav groups and rows */
  #nav .navgroup + .navgroup { margin-top: 6px; }
  #nav .navhead { height: auto; padding: 10px 8px 6px; margin: 0; }
  #nav .navhead span, #nav .navhead { font-size: var(--t-label-size); line-height: 1; font-weight: var(--w-medium); color: var(--k-mute); }
  #nav .navhead svg.i { color: var(--gray-300); }
  #nav .navitems a { height: 30px; min-height: 30px; padding: 0 8px; gap: 9px; border-radius: 7px; font-size: var(--t-body-size); font-weight: var(--w-medium); color: var(--k-nav-ink); }
  #nav .navitems a svg.i { color: var(--k-nav-icon); }
  #nav .navitems a:hover { background: var(--k-nav-hover); color: var(--gray-900); }
  #nav .navitems a[aria-current="page"] { background: var(--k-nav-on); color: var(--gray-900); }
  #nav .navitems a[aria-current="page"] svg.i { color: var(--gray-900); }
  #nav .navitems a .count { font-size: var(--t-label-size); color: var(--k-mute); font-variant-numeric: tabular-nums; }
  #navSetup .setup-h b, .shell > .nav .v73vera .vv-top b { font-size: var(--t-body-size); font-weight: var(--w-medium); color: var(--k-nav-ink); }
  #navSetup .setup:hover, .shell > .nav .v73vera:hover { background: var(--k-nav-hover); }
  /* Vera has her nav row in the Agents group; the foot row that opened her page steps back (her panel stays on the title row) */
  .shell > .nav:has(#nav a[href="#/vera"]) .v73vera { display: none; }

  /* the title row: white, one hairline, the breadcrumb on the left */
  .shell .main > header.top { height: 52px; min-height: 52px; padding: 0 var(--s-5) 0 var(--s-3); gap: var(--s-2); background: var(--gray-0); border-bottom: 1px solid var(--k-line); }
  header.top .navtoggle { width: 30px; height: 30px; color: var(--k-mute); }
  header.top .navtoggle + .topsep { display: none; }
  /* the search moved to the panel; the title row keeps it only while the panel is folded */
  .shell:not(.mini) .main > header.top .topsearch { display: none; }
  header.top .v89-status { font-size: var(--t-small-size); color: var(--k-mute); }
  header.top .v87vbtn { height: 30px; padding: 0 10px; border-radius: 7px; font-size: var(--t-body-size); font-weight: var(--w-medium); color: var(--gray-700); }
  header.top .v87vbtn .vv-av { width: 20px; height: 20px; border-radius: 6px; font-size: var(--t-label-size); }
  header.top .me .avatar, header.top .avatar { width: 28px; height: 28px; line-height: 28px; font-size: var(--t-label-size); background: var(--k-av-bg); color: var(--k-av-fg); }
  header.top .me b { font-size: var(--t-body-size); line-height: 16px; } header.top .me #role { font-size: var(--t-label-size); line-height: 14px; color: var(--k-mute); }
  #view .page { padding-top: var(--s-5); }
}
/* the breadcrumb (next-v96-kit.js builds it from the nav and the page's own trail; #crumb stays as other layers read it) */
.vk-crumb { display: none; align-items: center; min-width: 0; flex: 0 1 auto; overflow: hidden; white-space: nowrap; font-size: var(--t-body-size); line-height: 20px; color: var(--k-mute); }
.vk-crumb > * { flex: none; }
.vk-crumb a { color: var(--k-mute); text-decoration: none; } .vk-crumb a:hover { color: var(--gray-900); }
.vk-crumb em { font-style: normal; margin: 0 6px; color: var(--gray-300); }
.vk-crumb b { font-weight: var(--w-semibold); color: var(--gray-900); flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vk-crumb .vk-id { font-size: 12px; }
@media (min-width: 900px) {
  header.top .vk-crumb { display: flex; }
  /* the trail moved up into the title row; the page keeps its title and purpose */
  body.vk-trail #view .page > :is(.crumbs, .v89-crumbs) { display: none; }
}

/* =============================================================== 3. PRIMITIVES */
/* ---- page head: the title at 20, the purpose line under it in the mute grey ---- */
.phead, .v89-head { margin-bottom: var(--s-5); }
.phead p, .v89-purpose { font-size: var(--t-body-size); line-height: var(--t-body-lh); color: var(--gray-500); }
.v89-head .acts .btn, .phead .acts .btn { height: 32px; }
/* SHELL-1: the title row reads like the window's, so the purpose line is one line from 900px (two on a phone). The whole
   sentence stays in the page for screen readers and as the tooltip; a click opens it (next-v96-kit.js marks .is-cut). */
.v89-purpose, #view .page > .phead > div:first-child > h1 + p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* r94 X (A10-16): the page's own answer to "what does this do" was cut to one line at desktop width on 15 of 19 pages, mid-sentence.
   Two lines hold every page's sentence at 900px and wider; a longer one still opens on a click, Enter or Space. */
@media (min-width: 900px) { .v89-purpose, #view .page > .phead > div:first-child > h1 + p { -webkit-line-clamp: 2; } #view .v89-head .v89-purpose { max-width: 780px; } }
.is-cut:is(.v89-purpose, h1 + p) { cursor: pointer; } .is-cut:is(.v89-purpose, h1 + p):hover { color: var(--gray-700); }
#view .is-open:is(.v89-purpose, h1 + p) { -webkit-line-clamp: unset; display: block; }
/* tabs a screen puts in its title row (V.v89.head({ actions: V.v89.tabs(…) + buttons })) sit beside the actions */
.v89-head .acts > :is(.tabs, .v89-tabs) { margin: 0 var(--s-2) 0 0; }

/* the pictures' window title: a hued tile before the title and a grey line after it (optional; V.kit.tile + .vk-hsub) */
.v89-titlerow > .vk-tile:first-child { width: 32px; height: 32px; border-radius: 9px; margin-right: 4px; }
.v89-titlerow > .vk-tile:first-child svg { width: 17px; height: 17px; }
.v89-titlerow > .vk-hsub { font-size: var(--t-heading-size); line-height: 28px; font-weight: var(--w-regular); color: var(--k-mute); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ---- buttons: the window's 32px controls, a hairline secondary, the one blue primary ---- */
.btn { border-radius: var(--r-ctl); font-size: var(--t-body-size); font-weight: var(--w-medium); border-color: var(--k-btn-bd); }
.btn.sec, .btn.dark, .btn.v85demoted { border-color: var(--k-btn-bd); }
.btn.primary { border-color: var(--accent); }
.btn:hover { border-color: var(--gray-300); }
.btn svg.i { width: 15px; height: 15px; }
.btn.primary { box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.btn.sm, table .btn { height: 28px; font-size: var(--t-small-size); padding: 0 10px; }

/* ---- cards: white, one hairline, radius 12, no shadow (the lit card alone carries one) ---- */
.card, section.card, aside.card { border-color: var(--k-line); box-shadow: none; }
.card .card, .card section.card, .card aside.card { box-shadow: none; }
.card-h { padding: 14px var(--s-5); }
.card-b { padding: var(--s-5); }
.card-h + .card-b { padding-top: 0; }
.card-h h2, .card-h h3, .card h2, .card-h .ttl { font-size: var(--t-heading-size); line-height: var(--t-heading-lh); }
.card-h + .tablewrap, .card-h + table, .card-h + .slist, .card-h + .list, .card-h + ul { border-top-color: var(--k-line); }

/* ---- tables: the window's density. White head in the mute grey, 44px rows at 13px, hairlines, the selected row in the
   pale blue with the blue edge. ---- */
table th, .v89-table th {
  height: 36px; padding: 0 var(--s-3); background: var(--gray-0); color: var(--k-mute); border-bottom: 1px solid var(--k-line);
  font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-medium);
}
table td, .v89-table td { height: 44px; padding: 10px var(--s-3); border-bottom-color: var(--gray-100); font-size: var(--t-body-size); line-height: var(--t-body-lh); }
table th:first-child, table td:first-child { padding-left: var(--s-5); }
table th:last-child, table td:last-child { padding-right: var(--s-5); }
table tbody tr:hover td, .v89-table tbody tr:hover td, tr:nth-child(even):hover td { background: var(--k-hover); }
table tbody tr:is([aria-selected="true"], .sel, .on) td { background: var(--k-sel); }
table tbody tr:is([aria-selected="true"], .sel, .on) td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
table td :is(.v89-id, .mono) { font-size: 12px; color: var(--gray-900); }
:is(table td.two > span, table td .two > span, table td.nm > span, table td.why > span, table td > span.sub2, table td .subl, table td small, .v89-table td .l2):not(.tag):not(.chip):not(.v75chip):not(.vx-chip):not(.v73pill):not(.vbadge):not(.dpill):not(.bage):not(.vx-out):not(.v96-l) {
  font-size: var(--t-small-size); line-height: 16px; color: var(--k-mute);
}
.tfoot, .v89-table + .tfoot, .tablewrap + .tfoot { font-size: var(--t-small-size); color: var(--k-mute); }

/* ---- status chips, by meaning: the site's pill. 22px, 12/500, no border, a 6px dot in the tone; an icon replaces the dot ---- */
.v96-l, .vk-chip, .chip[data-tone], .tag, .v75chip, .vx-chip, .vchip, .bage, .v73pill, .vbadge, .cs-s, .dpill, .kbadge, .vx-out, .v87chip {
  --chip-fg: var(--neutral-fg); --chip-bg: var(--neutral-bg); --chip-dot: var(--neutral-dot);
  display: inline-flex; align-items: center; gap: 6px; height: 22px; min-height: 22px; max-width: 100%; padding: 0 9px 0 8px; margin: 0;
  border: 0; border-radius: 999px; background: var(--chip-bg); color: var(--chip-fg); box-shadow: none;
  font-family: var(--font); font-size: 12px; line-height: 16px; font-weight: var(--w-medium); letter-spacing: 0; text-transform: none; font-style: normal;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; flex: none;
}
.v96-l::before, .vk-chip::before, .chip[data-tone]::before, .tag::before, .v75chip::before, .vx-chip::before, .vchip::before, .bage::before, .v73pill::before, .vbadge::before, .cs-s::before, .dpill::before, .vx-out::before, .v87chip::before {
  content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--chip-dot); flex: none; margin: 0;
}
:is(.v96-l, .vk-chip, .chip[data-tone], .tag, .v75chip, .vx-chip, .vchip, .bage, .v73pill, .vbadge, .cs-s, .dpill, .vx-out, .v87chip):has(> svg)::before { display: none; }
.vk-chip > i { display: none; }
.v96-l[data-tone="positive"], .vk-chip[data-tone="positive"], .chip[data-tone="positive"], .tag.g, .v75chip.ok, .v75chip.up, .vx-chip.g, .v73pill.ok, .vbadge.g, .vbadge.ok, .dpill.g, .bage.g, .vx-out.g, .cs-pass .cs-s, .kbadge.up {
  --chip-fg: var(--positive-fg); --chip-bg: var(--positive-bg); --chip-dot: var(--positive-dot); }
.v96-l[data-tone="attention"], .vk-chip[data-tone="attention"], .chip[data-tone="attention"], .tag.a, .v75chip.warn, .vx-chip.a, .v73pill.warn, .vbadge.a, .vbadge.warn, .bage.a, .dpill.a, .vx-out.a, .cs-warn .cs-s, .cs-attention .cs-s {
  --chip-fg: var(--attention-fg); --chip-bg: var(--attention-bg); --chip-dot: var(--attention-dot); }
.v96-l[data-tone="critical"], .vk-chip[data-tone="critical"], .chip[data-tone="critical"], .tag.r, .v75chip.bad, .vx-chip.r, .v73pill.bad, .vbadge.r, .vbadge.bad, .bage.r, .dpill.r, .vx-out.r, .cs-fail .cs-s, .kbadge.down {
  --chip-fg: var(--critical-fg); --chip-bg: var(--critical-bg); --chip-dot: var(--critical-dot); }
.v96-l[data-tone="info"], .vk-chip[data-tone="info"], .chip[data-tone="accent"], .chip[data-tone="info"] { --chip-fg: var(--info-fg); --chip-bg: var(--info-bg); --chip-dot: var(--info-dot); }
.v96-l[data-tone="neutral"], .vk-chip[data-tone="neutral"], .chip[data-tone="neutral"], .chip[data-tone="quiet"] { --chip-fg: var(--neutral-fg); --chip-bg: var(--neutral-bg); --chip-dot: var(--neutral-dot); }
.v96-l-i, :is(.v96-l, .vk-chip, .chip[data-tone], .tag, .v75chip, .vx-chip, .vbadge) svg { width: 12px; height: 12px; flex: none; }
.v89-titlerow > .chip[data-tone], .v89-titlerow > .v96-l { padding-left: 8px; border-left: 0; }
table .tag, table .v75chip, table .vx-chip, table .v73pill, .slist .tag { height: 22px; }
/* a rule citation stays a quiet reference, never a status */
.vx-rule { border: 0; border-radius: 6px; background: var(--gray-50); color: var(--gray-700); font: 500 11.5px/16px var(--font-mono); height: 22px; padding: 0 7px; }
.vx-rule::before { display: none; }

/* ---- tabs: the window's segmented switch (Record · Hands · History), a grey track with the chosen segment raised ---- */
.tabs, .v89-tabs, .tabs.v83sub {
  display: inline-flex; width: auto; max-width: 100%; gap: 2px; padding: 2px; height: auto; border: 0; border-radius: var(--r-ctl);
  background: var(--k-track); overflow-x: auto; margin: 0 0 var(--s-5);
}
.tabs button, .tabs a, .v89-tabs > * {
  height: 28px; padding: 0 10px; margin: 0; border: 0; border-radius: 6px; font-size: var(--t-body-size); line-height: 16px; font-weight: var(--w-medium); color: var(--k-mute);
}
.tabs button:hover, .tabs a:hover, .v89-tabs > *:hover { color: var(--gray-900); }
.tabs button[aria-selected="true"], .tabs a[aria-selected="true"], .tabs a[aria-current="page"], .tabs .on, .v89-tabs > [aria-selected="true"] {
  background: var(--gray-0); color: var(--gray-900); border: 0; box-shadow: 0 0 0 1px var(--k-line), 0 1px 2px rgba(15, 23, 42, .06);
}
.tabs .n, .v89-tabs .n { font-size: var(--t-label-size); color: var(--k-mute); }   /* r94 X (A10-17): counts were #A1A1AA, 2.29:1 */
.tabs [aria-selected="true"] .n { color: var(--gray-700); }
:is(#view, #dialog) :is(.seg, .sb-modes, .vx-tabs, .vp-tabs):not(#v93-seg) { background: var(--k-track); height: 30px; min-height: 30px; }
:is(#view, #dialog) :is(.seg, .sb-modes, .vx-tabs, .vp-tabs):not(#v93-seg) > :is(button, a) { height: 26px; font-size: var(--t-body-size); color: var(--k-mute); }
:is(#view, #dialog) :is(.seg, .sb-modes, .vx-tabs, .vp-tabs):not(#v93-seg) > :is([aria-pressed="true"], [aria-selected="true"], .on) {
  box-shadow: 0 0 0 1px var(--k-line), 0 1px 2px rgba(15, 23, 42, .06); color: var(--gray-900); }

/* ---- the status strip: separate KPI tiles, as the window draws them (a hairline tile, a small label, the figure at 20) ---- */
.v89-strip, #view .v84strip, #view .v75kpis.v84strip, #view .v84fts, #view .card.stats {
  gap: var(--s-2); background: none; border: 0; border-radius: 0; overflow: visible; margin-bottom: var(--s-5);
}
.v89-strip > *, #view .v84strip > .v75k, #view .v84fts > .v84ft, #view .card.stats > .stat {
  padding: 10px 12px; border-radius: 10px; background: var(--gray-0); box-shadow: inset 0 0 0 1px var(--k-line);
}
.v89-strip > * + *, #view .v84strip > .v75k + .v75k, #view .v84fts > .v84ft + .v84ft, #view .card.stats > .stat + .stat { border-left: 0; }
.v89-strip .lab, #view .v84strip .v75k-h, #view .v84strip .v75k-l, #view .v84fts .v84ft span, #view .stats .stat .lab { font-size: var(--t-label-size); line-height: 16px; color: var(--k-mute); }
.v89-strip .num, #view .v84strip .v75k-v b, #view .v84fts .v84ft b, #view .stats .stat .val { margin-top: 4px; font-size: var(--t-num-size); line-height: 24px; }
.v89-strip .ctx, #view .v84strip .v75k-v span, #view .v84strip .v75k-f, #view .stats .stat .sub { margin-top: 2px; font-size: var(--t-small-size); line-height: 16px; color: var(--k-mute); }
.v89-strip > :is(.critical, [data-tone="critical"]) .num, .v89-strip .num.critical { color: var(--critical-fg); }
#view a.v89-cell:hover, #view button.v89-cell:hover, #view a.v75k:hover, #view .v84fts .v84ft:hover { background: var(--k-hover); box-shadow: inset 0 0 0 1px var(--gray-300); }
#view .v89-strip > .v89-cell.on, #view .v89-strip > .v89-cell[aria-pressed="true"] { background: var(--k-sel); box-shadow: inset 0 0 0 1.5px var(--accent); }

/* ---- callouts: the window's reason box ---- */
.v89-note, .notice { border-radius: 10px; padding: 10px var(--s-3); font-size: var(--t-body-size); }

/* ---- empty state: a tile, what will be here, why it matters, one action ---- */
.v89-empty { gap: 6px; }
.v89-empty > svg.i { width: 18px; height: 18px; padding: 9px; box-sizing: content-box; border-radius: 10px; background: var(--gray-50); color: var(--gray-500); }
.v89-empty > b { font-size: var(--t-heading-size); line-height: var(--t-heading-lh); font-weight: var(--w-semibold); color: var(--gray-900); }
.v89-empty > span { font-size: var(--t-body-size); line-height: 18px; color: var(--gray-500); max-width: 52ch; }

/* ---- monograms and avatars: a firm's initials in its hue; a person's in the window's indigo ---- */
span.logo, .vp-logo, .plogo, .bcn, .v89-mono-gram { border-radius: 8px; font-size: var(--t-label-size); }
.avatar { background: var(--k-av-bg); color: var(--k-av-fg); }

/* =============================================================== 4. THE v96 PARTS (next-v96-kit.js, V.v96), in the site's language */
/* ---- avatar ---- */
.v96-av { --s: 32px; display: inline-grid; place-items: center; flex: none; width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden;
  background: var(--hue-8-bg); color: var(--hue-8-fg); font-size: max(var(--t-label-size), calc(var(--s) * .37));   /* r94 X (A10-18): a monogram grows with its circle; its floor is the label size */ line-height: 1; font-weight: var(--w-semibold); letter-spacing: .01em; user-select: none; }
.v96-av[data-size="24"] { --s: 24px; } .v96-av[data-size="40"] { --s: 40px; } .v96-av[data-size="56"] { --s: 56px; } .v96-av[data-size="72"] { --s: 72px; }
.v96-av.has-logo { background: var(--gray-0); box-shadow: inset 0 0 0 1px var(--k-line); }
.v96-av img { width: 100%; height: 100%; object-fit: contain; }
[data-hue="1"]:is(.v96-av, .v96-tile, .vk-tile, .vk-av) { background: var(--hue-1-bg); color: var(--hue-1-fg); }
[data-hue="2"]:is(.v96-av, .v96-tile, .vk-tile, .vk-av), [data-hue="green"]:is(.vk-tile, .vk-av) { background: var(--hue-2-bg); color: var(--hue-2-fg); }
[data-hue="3"]:is(.v96-av, .v96-tile, .vk-tile, .vk-av), [data-hue="amber"]:is(.vk-tile, .vk-av) { background: var(--hue-3-bg); color: var(--hue-3-fg); }
[data-hue="4"]:is(.v96-av, .v96-tile, .vk-tile, .vk-av), [data-hue="violet"]:is(.vk-tile, .vk-av) { background: var(--hue-4-bg); color: var(--hue-4-fg); }
[data-hue="5"]:is(.v96-av, .v96-tile, .vk-tile, .vk-av), [data-hue="pink"]:is(.vk-tile, .vk-av) { background: var(--hue-5-bg); color: var(--hue-5-fg); }
[data-hue="6"]:is(.v96-av, .v96-tile, .vk-tile, .vk-av), [data-hue="teal"]:is(.vk-tile, .vk-av) { background: var(--hue-6-bg); color: var(--hue-6-fg); }
[data-hue="7"]:is(.v96-av, .v96-tile, .vk-tile, .vk-av), [data-hue="orange"]:is(.vk-tile, .vk-av) { background: var(--hue-7-bg); color: var(--hue-7-fg); }
[data-hue="8"]:is(.v96-av, .v96-tile, .vk-tile, .vk-av), [data-hue="slate"]:is(.vk-tile, .vk-av) { background: var(--hue-8-bg); color: var(--hue-8-fg); }
[data-hue="blue"]:is(.vk-tile, .vk-av) { background: var(--hue-1-bg); color: var(--hue-1-fg); }
[data-hue="indigo"]:is(.vk-tile, .vk-av) { background: var(--hue-indigo-bg); color: var(--hue-indigo-fg); }
[data-hue="sky"]:is(.vk-tile, .vk-av) { background: var(--hue-sky-bg); color: var(--hue-sky-fg); }
[data-hue="red"]:is(.vk-tile, .vk-av) { background: var(--hue-red-bg); color: var(--hue-red-fg); }

/* ---- glyph tile ---- */
.v96-tile { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--gray-50); color: var(--gray-500); box-shadow: inset 0 0 0 1px var(--k-line); }
.v96-tile[data-hue] { box-shadow: none; }
.v96-tile.s28 { width: 28px; height: 28px; border-radius: 8px; } .v96-tile.s44 { width: 44px; height: 44px; border-radius: 12px; }
.v96-tile .v96-i { width: 18px; height: 18px; } .v96-tile.s28 .v96-i { width: 15px; height: 15px; } .v96-tile.s44 .v96-i { width: 22px; height: 22px; }
.v96-i { width: 16px; height: 16px; flex: none; }

/* ---- credential tiles ---- */
.v96-creds { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--s-2); }
.v96-cred { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; padding: var(--s-4); border: 1px solid var(--k-line); border-radius: 12px; background: var(--gray-0); color: inherit; text-decoration: none; }
a.v96-cred:hover { border-color: var(--gray-300); }
.v96-cred-g { position: relative; display: block; margin-bottom: var(--s-2); }
.v96-doc { display: block; width: 32px; height: 38px; }
.v96-doc .pg { fill: var(--gray-0); stroke: var(--gray-300); stroke-width: 1.2; }
.v96-doc .ln { stroke: var(--gray-200); stroke-width: 1.6; stroke-linecap: round; }
.v96-doc [data-hue="1"] { fill: var(--hue-1-bar); } .v96-doc [data-hue="2"] { fill: var(--hue-2-bar); } .v96-doc [data-hue="3"] { fill: var(--hue-3-bar); } .v96-doc [data-hue="4"] { fill: var(--hue-4-bar); }
.v96-doc [data-hue="5"] { fill: var(--hue-5-bar); } .v96-doc [data-hue="6"] { fill: var(--hue-6-bar); } .v96-doc [data-hue="7"] { fill: var(--hue-7-bar); } .v96-doc [data-hue="8"] { fill: var(--hue-8-bar); }
.v96-cred-m { position: absolute; right: -8px; top: -6px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; box-shadow: 0 0 0 2px var(--gray-0); }
.v96-cred-m svg { width: 11px; height: 11px; stroke-width: 2.6; }
.v96-cred-m.ok { background: var(--positive-dot); } .v96-cred-m.bad { background: var(--critical-dot); } .v96-cred-m.req { background: var(--accent); }
.v96-cred-t { font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-semibold); color: var(--gray-900); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v96-cred-s { font-size: var(--t-small-size); line-height: 16px; color: var(--gray-500); }
.v96-cred[data-state="source"] .v96-cred-s, .v96-cred[data-state="person"] .v96-cred-s { color: var(--positive-fg); }
.v96-cred[data-state="bad"] { border-color: var(--critical-bd); } .v96-cred[data-state="bad"] .v96-cred-s { color: var(--critical-fg); }
.v96-cred[data-state="missing"] { border-style: dashed; border-color: var(--gray-300); background: var(--gray-25); }
.v96-cred[data-state="missing"] .v96-doc .pg { stroke-dasharray: 2.5 2; }
.v96-cred[data-state="missing"] .v96-doc :is(.bar, .dot), .v96-cred[data-state="notrun"] .v96-doc :is(.bar, .dot) { opacity: .38; }
.v96-cred[data-state="na"] { opacity: .55; }
.v96-cred-a { margin-top: var(--s-1); font-size: var(--t-small-size); line-height: 16px; }
.v96-cred-a :is(a, button) { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: var(--w-medium); cursor: pointer; }

/* ---- document rows ---- */
.v96-dr { display: flex; align-items: center; gap: var(--s-3); min-width: 0; padding: 10px var(--s-4); border-top: 1px solid var(--gray-100); }
.v96-dr:first-child { border-top: 0; }
.v96-dr-main { display: flex; align-items: center; gap: var(--s-3); flex: 1 1 auto; min-width: 0; color: inherit; text-decoration: none; }
a.v96-dr-main:hover .v96-dr-t { color: var(--accent); }
.v96-dr-b { display: flex; flex-direction: column; min-width: 0; }
.v96-dr-t { font-size: var(--t-body-size); line-height: 20px; font-weight: var(--w-medium); color: var(--gray-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v96-dr-s { font-size: var(--t-small-size); line-height: 16px; color: var(--k-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v96-dr-l, .v96-dr-a { flex: none; display: inline-flex; align-items: center; gap: var(--s-2); }
.v96-list { border: 1px solid var(--k-line); border-radius: 12px; background: var(--gray-0); overflow: hidden; }

/* ---- stepper: status by meaning. Done is the site's green check on its tint, the current step a blue ring, a stop red, the
   rest a grey ring; the line between turns green behind the lot. ---- */
.v96-steps { display: flex; margin: 0; padding: 0; list-style: none; }
.v96-steps > li { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.v96-steps > li::before { content: ""; position: absolute; top: 10px; left: calc(-50% + 14px); right: calc(50% + 14px); height: 2px; border-radius: 1px; background: var(--gray-200); }
.v96-steps > li:first-child::before { display: none; }
.v96-steps > li:is([data-state="done"], [data-state="now"])::before { background: var(--positive-dot); }
.v96-steps > li[data-state="stop"]::before { background: var(--critical-dot); }
.v96-st-d { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gray-0); box-shadow: inset 0 0 0 1.5px var(--gray-300); color: var(--positive-dot); }
.v96-st-d svg { width: 12px; height: 12px; stroke-width: 2.6; }
li[data-state="done"] > .v96-st-d { background: var(--positive-bg); box-shadow: none; color: var(--positive-dot); }
li[data-state="now"] > .v96-st-d { background: var(--gray-0); box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 4px var(--accent-tint); color: var(--accent); }
li[data-state="now"] > .v96-st-d:empty::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
li[data-state="stop"] > .v96-st-d { background: var(--critical-bg); box-shadow: none; color: var(--critical-dot); }
.v96-st-b { display: flex; flex-direction: column; min-width: 0; padding: 0 var(--s-1); }
.v96-st-b b { font-size: var(--t-small-size); line-height: 16px; font-weight: var(--w-medium); color: var(--k-mute); }
.v96-st-b b a { color: inherit; text-decoration: none; } .v96-st-b b a:hover { color: var(--accent); }
li:is([data-state="done"], [data-state="now"]) .v96-st-b b { color: var(--gray-900); }
li[data-state="stop"] .v96-st-b b { color: var(--critical-fg); }
.v96-st-b em { font-style: normal; font-size: var(--t-label-size); line-height: 16px; color: var(--k-mute); }
.v96-steps.is-c .v96-st-b em { display: none; }
.v96-steps.is-v { flex-direction: column; gap: 0; }
.v96-steps.is-v > li { flex-direction: row; align-items: flex-start; text-align: left; gap: var(--s-3); padding-bottom: var(--s-4); }
.v96-steps.is-v > li:last-child { padding-bottom: 0; }
.v96-steps.is-v > li::before { display: block; top: 25px; bottom: -1px; left: 10px; right: auto; width: 2px; height: auto; }
.v96-steps.is-v > li:last-child::before { display: none; }
.v96-steps.is-v > li:first-child::before { display: block; }
.v96-steps.is-v > li:first-child:last-child::before { display: none; }
.v96-steps.is-v > li + li::before { top: 25px; }
.v96-steps.is-v .v96-st-b { padding: 1px 0 0; }
.v96-steps.is-v .v96-st-b b { font-size: var(--t-body-size); line-height: 20px; font-weight: var(--w-medium); color: var(--gray-900); }
.v96-steps.is-v .v96-st-b em { font-size: var(--t-small-size); line-height: 16px; }

/* ---- result tiles ---- */
.v96-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s-2); }
.v96-res { display: flex; align-items: center; gap: var(--s-2); min-width: 0; padding: var(--s-2) var(--s-3); border-radius: 10px; background: var(--gray-50); color: var(--gray-700); }
.v96-res[data-state="ok"] { background: var(--positive-bg); color: var(--positive-fg); }
.v96-res[data-state="fail"] { background: var(--critical-bg); color: var(--critical-fg); }
.v96-res-i { display: grid; place-items: center; flex: none; }
.v96-res-i svg { width: 16px; height: 16px; }
.v96-res-b { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-2); min-width: 0; flex: 1 1 auto; }
.v96-res-b .n { font-size: var(--t-small-size); line-height: 16px; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.v96-res-b b { align-self: start; white-space: nowrap; font-size: var(--t-small-size); line-height: 16px; font-weight: var(--w-semibold); text-align: right; font-variant-numeric: tabular-nums; }
.v96-res-b em { grid-column: 1 / -1; font-style: normal; font-size: var(--t-label-size); line-height: 16px; opacity: .8; }

/* ---- panel head (the pictures' header: a hued tile, the title, a grey sub line), stat ---- */
.v96-ph { display: flex; align-items: center; gap: var(--s-3); padding: 14px var(--s-5); }
.v96-ph-i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--info-bg); color: var(--info-fg); flex: none; }
.v96-ph-i .v96-i { width: 17px; height: 17px; }
.v96-ph-t { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.v96-ph-t h2 { margin: 0; font-size: var(--t-heading-size); line-height: var(--t-heading-lh); font-weight: var(--w-semibold); color: var(--gray-900); }
.v96-ph-t .sub { margin-left: 0; font-size: var(--t-small-size); line-height: 16px; color: var(--k-mute); }
.v96-ph-a { display: flex; gap: var(--s-2); flex: none; }
.v96-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: inherit; text-decoration: none; }
.v96-stat .l { font-size: var(--t-label-size); line-height: 16px; color: var(--k-mute); }
.v96-stat b { font-size: var(--t-num-size); line-height: 24px; font-weight: var(--w-semibold); letter-spacing: -.02em; color: var(--gray-900); font-variant-numeric: tabular-nums; }
.v96-stat[data-tone="critical"] b { color: var(--critical-fg); }
.v96-stat .s { font-size: var(--t-small-size); line-height: 16px; color: var(--k-mute); }

/* v97 fixes kept (audit M18, M19 and minors) */
.dtab .two > .v96-l, .dtab .two span.v96-l, .dtab .two > .chip[data-tone], .dtab .two span.chip[data-tone], .dtab .two > .tag, .dtab .two span.tag { display: inline-flex; width: auto; max-width: 100%; margin-top: 4px; }
.dtab .two :is(.v96-l, .chip[data-tone]) { color: var(--chip-fg); }
.dtab .two .v96-l > svg, .dtab .two .chip[data-tone] > svg { flex: none; width: 12px; height: 12px; }
#view .v84checks .v77r-s { grid-template-columns: minmax(0, 1fr) auto; }
#view .v84checks .v77r-s::before, #view .v84checks .v77r-s > i { display: none; content: none; }
#view .v84checks .v77r-s > span {
  --chip-fg: var(--neutral-fg); --chip-bg: var(--neutral-bg); --chip-dot: var(--neutral-dot);
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 8px; border-radius: 999px; white-space: nowrap; text-align: left;
  background: var(--chip-bg); color: var(--chip-fg); font-size: 12px; line-height: 16px; font-weight: var(--w-medium);
}
#view .v84checks .v77r-s > span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--chip-dot); flex: none; }
#view .v84checks .v77r-s.ok > span { --chip-fg: var(--positive-fg); --chip-bg: var(--positive-bg); --chip-dot: var(--positive-dot); }
#view .v84checks .v77r-s.warn > span { --chip-fg: var(--attention-fg); --chip-bg: var(--attention-bg); --chip-dot: var(--attention-dot); }
#view .v84checks .v77r-s.bad > span { --chip-fg: var(--critical-fg); --chip-bg: var(--critical-bg); --chip-dot: var(--critical-dot); }
header.top .v89-status::before, header.top .v89-status.fresh::before { display: none; content: none; }
.v79open li { padding-left: 0; }
.v79open li::before { display: none; content: none; }
.v75dot { border-radius: 2px; }
.v73pane .vp-sum i { border-radius: 2px; }
.v89-id, .mono.v89-id, a.v89-id { white-space: nowrap; }
@media (max-width: 899px) {
  #view td > .v96-l, #view td > .vk-chip, #view td > .chip[data-tone], #view td > .tag { justify-self: start; align-self: center; width: auto; max-width: 100%; }
}

/* =============================================================== 5. vk COMPONENTS (apply them; markup in KIT.md, helpers on V.kit) */
/* ---- small parts: the ID, the mono meta, the citation chip, the source line, the person row, the reason box ---- */
.vk-meta { font-size: 11.5px; line-height: 16px; font-weight: var(--w-medium); color: var(--k-mute); }
.vk-src { display: block; font-size: var(--t-label-size); line-height: 16px; font-weight: var(--w-medium); color: var(--k-mute); letter-spacing: .01em; }   /* r94 X (A10-17, A10-18): 10.5px at 2.56:1 */
.vk-cite { display: inline-block; max-width: 100%; min-height: 24px; padding: 4px 8px; border-radius: 6px; background: var(--gray-50); box-sizing: border-box;
  font: 500 11.5px/16px var(--font-mono); color: var(--gray-900); white-space: normal; overflow-wrap: anywhere; text-decoration: none; vertical-align: middle; }
a.vk-cite:hover { background: var(--gray-100); }
.vk-cites { display: flex; flex-wrap: wrap; gap: 6px; }
.vk-tile { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--hue-1-bg); color: var(--hue-1-fg); }
.vk-tile svg { width: 18px; height: 18px; } .vk-tile.s28 { width: 28px; height: 28px; border-radius: 8px; } .vk-tile.s28 svg { width: 15px; height: 15px; }
.vk-av { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--k-av-bg); color: var(--k-av-fg); font: 600 var(--t-label-size)/1 var(--font); letter-spacing: .01em; }
.vk-av.s24 { width: 24px; height: 24px; font-size: var(--t-label-size); } .vk-av.s40 { width: 40px; height: 40px; font-size: 14px; }
.vk-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vk-who > div { min-width: 0; } .vk-who b { display: block; font-size: var(--t-body-size); line-height: 18px; font-weight: var(--w-medium); color: var(--gray-900); }
.vk-who small { display: block; margin-top: 1px; font-size: var(--t-small-size); line-height: 16px; color: var(--k-mute); }
.vk-reason { padding: 10px 12px; border-radius: 8px; background: #F8F9FB; box-shadow: inset 0 0 0 1px var(--k-line); font-size: var(--t-body-size); line-height: 18px; color: var(--gray-900); }
.vk-reason code { margin-right: 6px; font: 500 11.5px/16px var(--font-mono); color: var(--critical-fg); }
.vk-reason[data-tone="attention"] code { color: var(--attention-fg); } .vk-reason[data-tone="positive"] code { color: var(--positive-fg); } .vk-reason[data-tone="neutral"] code { color: var(--gray-700); }
:root[data-theme="dark"] .vk-reason { background: var(--gray-50); }

/* ---- the lit focus card: the one element that carries the decision, its reason, the person and the citation. The only real
   shadow on a page; everything around it stays quiet. ---- */
.vk-lit { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px 20px 18px; border-radius: var(--r-lit); background: var(--gray-0); box-shadow: var(--k-lit-shadow); color: var(--gray-900); }
.vk-lit-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; }
.vk-lit-top > .vk-meta, .vk-lit-top > .vk-lit-at { margin-left: auto; }
.vk-lit-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vk-lit-head > div { min-width: 0; flex: 1 1 auto; }
.vk-lit-t { margin: 0; font-size: var(--t-title-size); line-height: var(--t-title-lh); font-weight: var(--w-semibold); letter-spacing: -.015em; color: var(--gray-900); text-wrap: balance; }
.vk-lit-s { margin: 2px 0 0; font-size: var(--t-small-size); line-height: 16px; color: var(--k-mute); }
.vk-lit-x { margin: 0; font-size: var(--t-body-size); line-height: 20px; color: var(--gray-500); }
.vk-lit > .vk-who { padding-top: 14px; border-top: 1px solid var(--k-line); }
.vk-lit-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.vk-lit-acts .btn { height: 32px; }
.vk-lit-rows { margin: 0 -2px; }
.vk-lit[data-tone="critical"] { box-shadow: var(--k-lit-shadow), inset 0 3px 0 var(--critical-dot); }
.vk-lit[data-tone="attention"] { box-shadow: var(--k-lit-shadow), inset 0 3px 0 var(--attention-dot); }
.vk-lit[data-tone="positive"] { box-shadow: var(--k-lit-shadow), inset 0 3px 0 var(--positive-dot); }
.vk-lit.is-quiet { box-shadow: 0 0 0 1px var(--k-line); }

/* ---- check rows (the pictures' "check" card: a tone circle, the line, where it was read) ---- */
.vk-rows { display: flex; flex-direction: column; }
.vk-row { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; min-height: 40px; padding: 8px 0; border-top: 1px solid var(--gray-100); font-size: var(--t-body-size); line-height: 18px; color: var(--gray-900); }
.vk-rows > .vk-row:first-child { border-top: 0; }
.vk-row > i { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--neutral-bg); color: var(--neutral-fg); font-style: normal; }
.vk-row > i svg { width: 11px; height: 11px; stroke-width: 2.6; }
.vk-row[data-tone="positive"] > i { background: var(--positive-bg); color: var(--positive-fg); }
.vk-row[data-tone="attention"] > i { background: var(--attention-bg); color: var(--attention-fg); }
.vk-row[data-tone="critical"] > i { background: var(--critical-bg); color: var(--critical-fg); }
.vk-row > span { flex: 1 1 160px; min-width: 0; }
.vk-row > em { flex: 0 1 auto; margin-left: auto; font-style: normal; font-size: var(--t-small-size); line-height: 16px; color: var(--k-mute); text-align: right; }
.vk-row[data-tone="critical"] > em.is-hot { color: var(--critical-fg); } .vk-row[data-tone="attention"] > em.is-hot { color: var(--attention-fg); }

/* ---- KPI tiles: the window's (hairline, label, figure) and the pictures' tinted tile by meaning ---- */
.vk-kpis { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--s-2); }
.vk-kpi { display: flex; flex-direction: column; min-width: 0; padding: 10px 12px; border-radius: 10px; background: var(--gray-0); box-shadow: inset 0 0 0 1px var(--k-line); color: inherit; text-decoration: none; }
a.vk-kpi:hover { box-shadow: inset 0 0 0 1px var(--gray-300); }
.vk-kpi > small { display: flex; align-items: center; gap: 6px; font-size: var(--t-label-size); line-height: 16px; font-weight: var(--w-medium); color: var(--k-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vk-kpi > b { margin-top: 4px; font-size: 20px; line-height: 24px; font-weight: var(--w-semibold); letter-spacing: -.02em; color: var(--gray-900); font-variant-numeric: tabular-nums; }
.vk-kpi > span { margin-top: 2px; font-size: var(--t-small-size); line-height: 16px; color: var(--k-mute); }
.vk-kpi[data-tone="critical"] > b { color: var(--critical-fg); } .vk-kpi[data-tone="attention"] > b { color: var(--attention-fg); } .vk-kpi[data-tone="positive"] > b { color: var(--positive-fg); }
.vk-kpis.is-tinted .vk-kpi { box-shadow: none; background: #F6F6F8; }
.vk-kpis.is-tinted .vk-kpi > small::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--neutral-dot); flex: none; }
.vk-kpis.is-tinted .vk-kpi > b { font-size: var(--t-num-size); line-height: var(--t-num-lh); font-weight: var(--w-medium); letter-spacing: -.035em; }
.vk-kpis.is-tinted .vk-kpi[data-tone="positive"] { background: var(--positive-bg); } .vk-kpis.is-tinted .vk-kpi[data-tone="positive"] > small { color: var(--positive-fg); } .vk-kpis.is-tinted .vk-kpi[data-tone="positive"] > small::before { background: var(--positive-dot); }
.vk-kpis.is-tinted .vk-kpi[data-tone="attention"] { background: var(--attention-bg); } .vk-kpis.is-tinted .vk-kpi[data-tone="attention"] > small { color: var(--attention-fg); } .vk-kpis.is-tinted .vk-kpi[data-tone="attention"] > small::before { background: var(--attention-dot); }
.vk-kpis.is-tinted .vk-kpi[data-tone="critical"] { background: var(--critical-bg); } .vk-kpis.is-tinted .vk-kpi[data-tone="critical"] > small { color: var(--critical-fg); } .vk-kpis.is-tinted .vk-kpi[data-tone="critical"] > small::before { background: var(--critical-dot); }
.vk-kpis.is-tinted .vk-kpi[data-tone="info"] { background: var(--info-bg); } .vk-kpis.is-tinted .vk-kpi[data-tone="info"] > small { color: var(--info-fg); } .vk-kpis.is-tinted .vk-kpi[data-tone="info"] > small::before { background: var(--info-dot); }
.vk-kpis.is-tinted .vk-kpi > b { color: var(--gray-900); }
:root[data-theme="dark"] .vk-kpis.is-tinted .vk-kpi:not([data-tone]) { background: var(--gray-50); }

/* ---- timeline: a rail, a ring per event in its meaning, the event, who and when, the ID ---- */
.vk-tl { position: relative; margin: 0; padding: 0 0 0 20px; list-style: none; }
.vk-tl::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; border-radius: 1px; background: var(--k-line); }
.vk-te { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 8px 0 10px; }
.vk-te::before { content: ""; position: absolute; left: -19px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--gray-0); box-shadow: 0 0 0 2px var(--vkc, var(--positive-dot)); }
.vk-te[data-tone="attention"] { --vkc: var(--attention-dot); } .vk-te[data-tone="critical"] { --vkc: var(--critical-dot); } .vk-te[data-tone="info"] { --vkc: var(--accent); } .vk-te[data-tone="neutral"] { --vkc: var(--gray-300); }
.vk-te > div { flex: 1 1 auto; min-width: 0; }
.vk-te b { display: block; font-size: var(--t-body-size); line-height: 20px; font-weight: var(--w-medium); color: var(--gray-900); }
.vk-te b .vk-id { margin-left: 6px; color: var(--gray-700); font-size: 11.5px; }
.vk-te small { display: block; margin-top: 1px; font-size: var(--t-small-size); line-height: 16px; color: var(--k-mute); }
.vk-te > :is(.vk-chip, .v96-l, time, .vk-meta) { flex: none; margin-top: 1px; }
.vk-te > time { font-size: var(--t-small-size); color: var(--k-mute); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- the chain: the links maker to patient, a segment bar, each link with its source ---- */
.vk-chain-h { display: flex; align-items: center; gap: 16px; margin: 0 0 6px; }
.vk-chain-h > div { min-width: 0; } .vk-chain-h b { display: block; font-size: var(--t-heading-size); line-height: 20px; font-weight: var(--w-semibold); letter-spacing: -.01em; color: var(--gray-900); }
.vk-chain-h small { display: block; margin-top: 2px; font-size: var(--t-small-size); line-height: 16px; color: var(--k-mute); }
.vk-bar { margin-left: auto; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; width: min(180px, 40%); flex: none; }
.vk-bar > i { height: 6px; border-radius: 3px; background: var(--gray-200); }
.vk-bar > i[data-on], .vk-bar > i[data-tone="positive"] { background: var(--positive-dot); } .vk-bar > i[data-tone="critical"] { background: var(--critical-dot); } .vk-bar > i[data-tone="attention"] { background: var(--attention-dot); }
.vk-chain { display: flex; flex-direction: column; }
.vk-link { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--gray-100); }
.vk-link:last-child { border-bottom: 0; }
.vk-link > i { width: 9px; height: 9px; margin-left: 3px; border-radius: 50%; background: var(--gray-300); }
.vk-link[data-tone="positive"] > i { background: var(--positive-dot); } .vk-link[data-tone="critical"] > i { background: var(--critical-dot); } .vk-link[data-tone="attention"] > i { background: var(--attention-dot); }
.vk-link > div { min-width: 0; }
.vk-link b { font-size: var(--t-body-size); line-height: 18px; font-weight: var(--w-medium); color: var(--gray-900); }
.vk-link .vk-d { margin-left: 8px; font-size: var(--t-small-size); color: var(--k-mute); }
.vk-link .vk-src { margin-top: 2px; }
.vk-link > :is(.vk-chip, .v96-l) { grid-column: 3; }

/* ---- the certificate as read: the page on a grey desk, numbers in the gutter, the cited line boxed in the blue ---- */
.vk-doc { position: relative; padding: 18px 16px 18px 52px; border-radius: 10px; background: #F4F5F7; overflow: hidden; }
:root[data-theme="dark"] .vk-doc { background: var(--gray-50); }
.vk-sheet { position: relative; max-width: 640px; padding: 22px 24px; border-radius: 3px; background: #FFFFFF; box-shadow: var(--k-doc-shadow);
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 11.5px; line-height: 1.35; color: #1F2733; letter-spacing: 0; }
.vk-ln { position: relative; display: block; padding: 4px 6px; margin: 0 -6px; border-radius: 6px; }
.vk-ln > .vk-n { position: absolute; left: -58px; top: 50%; transform: translateY(-50%); width: 26px; text-align: right; font: 500 var(--t-label-size)/1 var(--font-mono); font-style: normal; color: var(--k-mute); }   /* r94 X (A10-17, A10-18): 11px at 2.4:1 */
.vk-ln.is-on { background: rgba(37, 84, 232, .05); box-shadow: 0 0 0 1.5px var(--accent); }
.vk-ln.is-on > .vk-n { color: var(--accent); font-weight: 600; }
.vk-ln.is-bad { background: rgba(240, 68, 56, .05); box-shadow: 0 0 0 1.5px var(--critical-dot); }
.vk-ln.is-bad > .vk-n { color: var(--critical-fg); font-weight: 600; }
.vk-ln.is-dim { color: #8A93A0; }
.vk-sheet h6 { margin: 0 0 2px; font: 700 14px/1.15 Arial, sans-serif; color: #2C3B57; }
.vk-sheet .vk-doc-ttl { text-align: center; font-weight: 700; font-size: var(--t-small-size); letter-spacing: .14em; color: #2B3442; }
.vk-sheet .vk-doc-k { display: inline-block; min-width: 132px; font-weight: 700; color: #2B3442; }

/* ---- one quoted line (builder A): the certificate as read, cut to the line a finding rests on. Inside a lit card the view is
   always this compact one; elsewhere add .is-line (V.kit.doc(lines, { line: true })). ---- */
.vk-doc.is-line, .vk-lit .vk-doc { padding: 6px 8px 6px 38px; border-radius: 8px; }
.vk-doc.is-line .vk-sheet, .vk-lit .vk-doc .vk-sheet { max-width: none; padding: 4px 6px; box-shadow: 0 0 0 1px rgba(15, 23, 42, .08); font-size: 12px; line-height: 1.35; }
.vk-doc.is-line .vk-ln, .vk-lit .vk-doc .vk-ln { margin: 0; padding: 4px 6px; border-radius: 5px; overflow-wrap: anywhere; }
.vk-doc.is-line .vk-ln > .vk-n, .vk-lit .vk-doc .vk-ln > .vk-n { left: -40px; width: 24px; font-size: var(--t-label-size); }
:root[data-theme="dark"] :is(.vk-doc.is-line, .vk-lit .vk-doc) .vk-sheet { box-shadow: 0 0 0 1px #34435F; }

/* ---- the split (builder B): a main column and the ~330px decision pane beside it; one column under 1100px ---- */
.vk-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); gap: var(--s-5); align-items: start; }
.vk-split-main, .vk-split-side { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.vk-split-side { position: sticky; top: var(--s-4); }
@media (max-width: 1100px) { .vk-split { grid-template-columns: minmax(0, 1fr); } .vk-split-side { position: static; } }

/* ---- a dialog's title row with a tile (builder B): the tile, the title at 17 and its line under it, the close button last ---- */
.dialog > header.vk-dlg-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.dialog > header.vk-dlg-h > small, .dialog > header.vk-dlg-h > small.v93eyebrow { flex: 1 0 100%; order: -1; margin: 0; }   /* a layer's context eyebrow sits above the row */
.dialog > header.vk-dlg-h > div { flex: 1 1 0; min-width: 0; }
.dialog > header.vk-dlg-h h2 { margin: 0; font-size: var(--t-title-size); line-height: var(--t-title-lh); font-weight: var(--w-semibold); letter-spacing: -.015em; color: var(--gray-900); }
.dialog > header.vk-dlg-h small { display: block; margin: 2px 0 0; font-size: var(--t-small-size); line-height: 16px; color: var(--k-mute); }
.dialog > header.vk-dlg-h > :is(.btn, button):last-child { flex: none; }

/* ---- the patient-facing card: the Passport's soft gradient, white cards inside, each fact with its meaning ---- */
.vk-pass { position: relative; padding: 18px 16px 16px; border-radius: 22px; background: var(--k-pass-grad); color: #1C1C1E; box-shadow: 0 1px 2px rgba(60, 20, 5, .08), 0 30px 60px -24px rgba(60, 30, 90, .30); }
.vk-pass-h { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 16px; font-weight: var(--w-semibold); color: #1C1C1E; }
.vk-pass-h > .vk-meta { margin-left: auto; color: #6E6E73; font-weight: 400; }
.vk-pass-t { margin: 10px 0 0; font-size: var(--t-title-size); line-height: var(--t-title-lh); font-weight: 700; letter-spacing: -.022em; color: #1C1C1E; }
.vk-pass-s { margin-top: 4px; font-size: var(--t-small-size); line-height: 18px; color: #6E6E73; }
.vk-pass-card { margin-top: 10px; padding: 13px 15px; border-radius: 16px; background: #FFFFFF; }
.vk-pass-k { display: flex; align-items: center; gap: 7px; font-size: 13px; line-height: 16px; font-weight: var(--w-semibold); color: var(--vkc, var(--positive-fg)); }
.vk-pass-k::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.vk-pass-card[data-tone="attention"] { --vkc: var(--attention-fg); } .vk-pass-card[data-tone="critical"] { --vkc: var(--critical-fg); } .vk-pass-card[data-tone="info"] { --vkc: var(--info-fg); } .vk-pass-card[data-tone="neutral"] { --vkc: #6E6E73; }
.vk-pass-v { margin-top: 6px; font-size: var(--t-heading-size); line-height: 20px; font-weight: 650; letter-spacing: -.01em; color: #1C1C1E; }
.vk-pass-x { margin-top: 3px; font-size: var(--t-small-size); line-height: 17px; color: #6E6E73; }
/* the pass the pharmacy keeps (the hero's .vxp): white, the gradient as a 3px top line */
.vk-pass.is-plain { background: #FFFFFF; box-shadow: 0 0 0 1px rgba(15, 23, 42, .09), 0 1px 2px rgba(15, 23, 42, .06), 0 12px 28px -12px rgba(15, 23, 42, .18); overflow: hidden; }
.vk-pass.is-plain::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #2F6BFF, #358EFD 55%, #05D3DA); }
.vk-pass.is-plain .vk-pass-card { padding: 8px 0; margin: 0; border-radius: 0; border-top: 1px solid #EEF0F3; }

/* ---- the object strip (the hero's lot or link header: a tile, the title and its line, a chip on the right) ---- */
.vk-strip { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border-radius: 12px; background: #FBFBFC; box-shadow: inset 0 0 0 1px var(--k-line); }
.vk-strip > div { min-width: 0; flex: 1 1 auto; }
.vk-strip b { display: block; font-size: var(--t-heading-size); line-height: 18px; font-weight: var(--w-semibold); letter-spacing: -.01em; color: var(--gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vk-strip small { display: block; margin-top: 2px; font-size: var(--t-small-size); line-height: 16px; color: var(--k-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vk-strip small .vk-id { color: var(--gray-900); font-size: var(--t-label-size); }
:root[data-theme="dark"] .vk-strip { background: var(--gray-50); }

/* ---- a dense list (the window's pane rows: the name, its line, a chip on the right) ---- */
.vk-list { display: flex; flex-direction: column; }
.vk-li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 0; border-bottom: 1px solid var(--gray-100); color: inherit; text-decoration: none; }
.vk-li:last-child { border-bottom: 0; }
.vk-li > div { min-width: 0; flex: 1 1 auto; }
.vk-li b { display: block; font-size: var(--t-body-size); line-height: 18px; font-weight: var(--w-medium); color: var(--gray-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vk-li small { display: block; margin-top: 1px; font-size: var(--t-small-size); line-height: 16px; color: var(--k-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vk-li > :is(.vk-chip, .v96-l, .chip) { margin-left: auto; }
a.vk-li:hover b { color: var(--accent); }

/* ---- a section label (the window's small grey caption above a table or tiles) ---- */
.vk-cap { margin: 0 0 6px; font-size: var(--t-label-size); line-height: 16px; font-weight: var(--w-medium); color: var(--k-mute); }

/* =============================================================== 6. PHONE (up to 699px) */
@media (max-width: 699px) {
  .v96-creds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v96-cred { padding: var(--s-3); } .v96-cred-t { font-size: var(--t-small-size); line-height: 18px; }
  .v96-dr { padding: var(--s-3); }
  .v96-steps:not(.is-v) .v96-st-b em { display: none; }
  /* the window's scale holds on a phone; inputs stay 16px so iOS never zooms */
  :root { --t-title-size: 20px; --t-title-lh: 28px; }
  /* a row of tabs wraps on a phone, whole words, never clipped ("ClearGate" ran off the Release row at 390) */
  .tabs, .v89-tabs, .tabs.v83sub { display: flex; flex-wrap: wrap; width: auto; max-width: 100%; overflow: visible; }
  .tabs > :is(button, a), .v89-tabs > * { flex: 0 0 auto; white-space: nowrap; }
  :is(#view, #dialog) :is(.seg, .sb-modes, .vx-tabs, .vp-tabs):not(#v93-seg) { flex-wrap: wrap; height: auto; max-width: 100%; }
  table th:first-child, table td:first-child { padding-left: var(--s-4); }
  table th:last-child, table td:last-child { padding-right: var(--s-4); }
  .v89-strip, #view .v84strip, #view .card.stats { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vk-lit { padding: 16px; } .vk-lit-t { font-size: var(--t-title-size); line-height: var(--t-title-lh); }
  .vk-doc { padding: 12px 8px 12px 40px; } .vk-sheet { padding: 14px; } .vk-ln > .vk-n { left: -44px; }
  .vk-chain-h { flex-wrap: wrap; } .vk-bar { width: 100%; margin-left: 0; }
  .vk-link { grid-template-columns: 16px minmax(0, 1fr); } .vk-link > :is(.vk-chip, .v96-l) { grid-column: 2; justify-self: start; margin-top: 4px; }
  .vk-link .vk-d { display: block; margin-left: 0; }
  .shell .main > header.top { border-bottom: 1px solid var(--k-line); }
}