/* v8 (2026-10-30): THE BASELINE. The approved boards (design-proto/app/shell.css, dashboard-v6.html, DESIGN-SPEC-V8.md) laid over
   every tab of the workspace as one layer, loaded after every earlier one. Nothing is rewritten: the older layers' own variables
   are pointed at the v8 graphite (dark by default, light on the toggle), and the frame they draw (the sidebar, the top bar, page
   heads, panels, tables, controls, statuses, dialogs) is restyled to the boards. Page compositions belong to next-v8-today/pages
   and next-v8-read/lot; this layer only sets the ground they stand on. Its shared-component rules (panels, tables, figures,
   buttons, fields, statuses) stop at a composition's root: .v8r (the read), .v8q, .v8s, .v8f, .v8t, .v8d (Today and the list
   pages), .v8l, .v8rc, .v8b, .v8n (the lot, recall, release and inspection), and .v8own for any later composition.
   Note on the cascade: every stylesheet before next-v89.css sits in the "legacy" layer (next-legacy.css). An unlayered rule beats
   it, except where it says !important: there the legacy rule wins whatever this file says, so those are reached through their
   variables. */

/* =====================================================================================================================
   1. THE TOKEN BRIDGE: every earlier system's variables, on the v8 values, in both themes
   ===================================================================================================================== */
:root:not([data-theme="dark"]) {
  /* opaque steps of the light ramp, for the places an older layer paints a fill or a border with a "grey" */
  --v8x-g0: #ffffff; --v8x-g25: #fafafa; --v8x-g50: #f5f5f6; --v8x-g100: #f0f0f1; --v8x-g200: #e7e7e8; --v8x-g300: #dadadc;
  --v8x-g400: #a3a3a7; --v8x-line2: rgba(23, 23, 23, .12); --v8x-line3: rgba(23, 23, 23, .18); --v8x-fill: rgba(23, 23, 23, .045); --v8x-fill2: rgba(23, 23, 23, .08);
  --v8x-accent-h: #0f56e0; --v8x-scrim: rgba(15, 15, 16, .32);
  --v5-ic-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%2316a34a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='7'/%3E%3Cpath d='M6 9.3l2.1 2.1L12.2 7.3'/%3E%3C/svg%3E");
  --v5-ic-fix: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23dc2626' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='7'/%3E%3Cpath d='M6.7 6.7l4.6 4.6M11.3 6.7l-4.6 4.6'/%3E%3C/svg%3E");
  --v5-ic-due: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23b45309' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='7'/%3E%3Cpath d='M9 5.6V9l2.2 1.4'/%3E%3C/svg%3E");
  --v5-ic-nil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23737373' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='7' stroke-dasharray='2.2 2.4'/%3E%3Cpath d='M6.4 9h5.2'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] {
  --v8x-g0: #19191b; --v8x-g25: #141415; --v8x-g50: #1d1d1f; --v8x-g100: #232325; --v8x-g200: #2a2a2c; --v8x-g300: #343437;
  --v8x-g400: #6b6b70; --v8x-line2: rgba(237, 237, 237, .12); --v8x-line3: rgba(237, 237, 237, .18); --v8x-fill: rgba(237, 237, 237, .055); --v8x-fill2: rgba(237, 237, 237, .09);
  --v8x-accent-h: #7aa2ff; --v8x-scrim: rgba(0, 0, 0, .6);
  --v5-ic-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%234cc38a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='7'/%3E%3Cpath d='M6 9.3l2.1 2.1L12.2 7.3'/%3E%3C/svg%3E");
  --v5-ic-fix: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23e5484d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='7'/%3E%3Cpath d='M6.7 6.7l4.6 4.6M11.3 6.7l-4.6 4.6'/%3E%3C/svg%3E");
  --v5-ic-due: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23f5a524' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='7'/%3E%3Cpath d='M9 5.6V9l2.2 1.4'/%3E%3C/svg%3E");
  --v5-ic-nil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%2385858b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='7' stroke-dasharray='2.2 2.4'/%3E%3Cpath d='M6.4 9h5.2'/%3E%3C/svg%3E");
}
/* both themes read the steps above; the names below are every earlier layer's, so their components move with the boards */
:root:not([data-theme="dark"]), :root[data-theme="dark"] {
  /* next.css (the first system) */
  --canvas: var(--v8-page); --tray: var(--v8x-g50); --card: var(--v8-card); --layer: var(--v8x-g100);
  --ink: var(--v8-t1); --ink-2: var(--v8-t2); --ink-3: var(--v8-t3); --muted: var(--v8-t3); --faint: var(--v8-t3);
  --line: var(--v8x-g200); --line-2: var(--v8x-g100); --rule: var(--v8x-g300); --line-soft: var(--v8x-g200);
  --hover: var(--v8x-g100); --selected: color-mix(in srgb, var(--v8-accent) 12%, var(--v8-card));
  --nav: var(--v8-deep); --nav-2: var(--v8-raised); --nav-line: var(--v8-hair); --nav-ink: var(--v8-t1); --nav-muted: var(--v8-t3);
  --blue: var(--v8-accent); --blue-ink: var(--v8-accent); --blue-bg: color-mix(in srgb, var(--v8-accent) 12%, var(--v8-card));
  --green: var(--v8-pos); --green-ink: var(--v8-pos); --green-bg: color-mix(in srgb, var(--v8-pos) 12%, var(--v8-card));
  --amber: var(--v8-warn); --amber-bg: color-mix(in srgb, var(--v8-warn) 12%, var(--v8-card)); --amber-line: color-mix(in srgb, var(--v8-warn) 35%, transparent);
  --red: var(--v8-neg); --red-ink: var(--v8-neg); --red-bg: color-mix(in srgb, var(--v8-neg) 12%, var(--v8-card));
  --grey-bg: var(--v8x-g100);
  --shadow: 0 0 0 1px var(--v8-hair); --sans: var(--v8-sans); --mono: var(--v8-mono);
  /* the v89 system and the kit */
  --font: var(--v8-sans); --font-mono: var(--v8-mono); --font-id: var(--v8-mono);
  --gray-0: var(--v8x-g0); --gray-25: var(--v8x-g25); --gray-50: var(--v8x-g50); --gray-100: var(--v8x-g100); --gray-150: var(--v8x-g100); --gray-200: var(--v8x-g200);
  --gray-300: var(--v8x-g300); --gray-400: var(--v8x-g400); --gray-500: var(--v8-t3); --gray-700: var(--v8-t2); --gray-900: var(--v8-t1);
  --surface: var(--v8-card);
  --accent: var(--v8-accent); --accent-hover: var(--v8x-accent-h); --accent-tint: color-mix(in srgb, var(--v8-accent) 12%, var(--v8-card)); --on-accent: #ffffff;
  --focus-ring: 0 0 0 2px var(--v8-accent);
  --positive-fg: var(--v8-pos); --positive-bg: color-mix(in srgb, var(--v8-pos) 12%, var(--v8-card)); --positive-bd: color-mix(in srgb, var(--v8-pos) 32%, transparent); --positive-dot: var(--v8-pos);
  --attention-fg: var(--v8-warn); --attention-bg: color-mix(in srgb, var(--v8-warn) 12%, var(--v8-card)); --attention-bd: color-mix(in srgb, var(--v8-warn) 32%, transparent); --attention-dot: var(--v8-warn);
  --critical-fg: var(--v8-neg); --critical-bg: color-mix(in srgb, var(--v8-neg) 12%, var(--v8-card)); --critical-bd: color-mix(in srgb, var(--v8-neg) 32%, transparent); --critical-dot: var(--v8-neg);
  --neutral-fg: var(--v8-t2); --neutral-bg: var(--v8x-g100); --neutral-bd: var(--v8x-g200); --neutral-dot: var(--v8-t3);
  --info-fg: var(--v8-accent); --info-bg: color-mix(in srgb, var(--v8-accent) 12%, var(--v8-card)); --info-bd: color-mix(in srgb, var(--v8-accent) 32%, transparent); --info-dot: var(--v8-accent);
  --shadow-card: 0 0 0 0 transparent; --shadow-overlay: var(--v8-shadow), 0 0 0 1px var(--v8-hair);
  --scrim: var(--v8x-scrim); --scrim-blur: 0px;
  --r: var(--v8-r-panel); --r-card: var(--v8-r-panel); --r-lit: var(--v8-r-panel); --r-dialog: var(--v8-r-panel); --r-ctl: var(--v8-r-ctl); --r-s: 8px;
  --k-line: var(--v8x-g200); --k-hair: var(--v8-hair); --k-side: var(--v8-deep); --k-sel: color-mix(in srgb, var(--v8-accent) 10%, var(--v8-card));
  --k-mute: var(--v8-t3); --k-dim: var(--v8x-g400); --k-nav-ink: var(--v8-t2); --k-nav-icon: var(--v8-t3); --k-nav-hover: var(--v8-raised); --k-nav-on: var(--v8-raised);
  --k-hover: var(--v8x-g50); --k-btn-bd: var(--v8x-g300); --k-track: var(--v8x-g100); --k-av-bg: var(--v8-raised); --k-av-fg: var(--v8-t2);
  --k-lit-shadow: 0 0 0 1px var(--v8-hair); --k-doc-shadow: 0 0 0 1px var(--v8-hair), var(--v8-shadow);
  /* the v5, v6 and v7 frame */
  --v5-pri-bg: var(--v8-accent); --v5-pri-hover: var(--v8x-accent-h); --v5-pri-fg: #ffffff;
  --v6-ink: var(--v8-t1); --v6-ink-2: var(--v8-t2); --v6-ink-3: var(--v8-t2); --v6-ink-4: var(--v8-t3); --v6-ink-5: var(--v8x-g400);
  --v6-line: var(--v8-hair); --v6-line-2: var(--v8x-line2); --v7-line-3: var(--v8x-line3);
  --v6-fill: var(--v8x-fill); --v6-fill-2: var(--v8x-fill2);
  --v6-surface: var(--v8-card); --v6-page: var(--v8-page); --v6-nav: var(--v8-deep); --v7-field: var(--v8-card);
  --v6-blue: var(--v8-accent); --v6-blue-2: var(--v8x-accent-h); --v6-blue-ink: #ffffff; --v6-link: var(--v8-accent); --v7-tint: color-mix(in srgb, var(--v8-accent) 14%, transparent);
  --v6-green: var(--v8-pos); --v6-amber: var(--v8-warn); --v6-red: var(--v8-neg);
  --v6-r-panel: var(--v8-r-panel); --v6-r-ctl: var(--v8-r-ctl);
  --v7-raised: 0 0 0 1px var(--v8-hair);
  --primary-cta-hover: var(--v8x-accent-h);
  /* v63's light frame */
  --frame: var(--v8-deep); --frame-ink: var(--v8-t1); --frame-muted: var(--v8-t3); --frame-line: var(--v8-hair); --frame-hover: var(--v8x-fill); --frame-on: var(--v8-raised);
  /* v73, v75, v84, the practice desk */
  --v73-canvas: var(--v8-page); --v73-canvas-hi: var(--v8-page); --v73-card: var(--v8-card); --v73-tray: var(--v8x-g50); --v73-tray-2: var(--v8x-g100);
  --v73-anchor: var(--v8-t1); --v73-anchor-ink: var(--v8-page); --v73-ring: var(--v8x-g200);
  --v73-shadow: 0 0 0 1px var(--v8-hair); --v73-shadow-hi: 0 0 0 1px var(--v8x-line2);
  --v73-r: var(--v8-r-panel); --v73-r-ctl: var(--v8-r-ctl);
  --v73-ok: var(--v8-pos); --v73-ok-bg: color-mix(in srgb, var(--v8-pos) 12%, var(--v8-card));
  --v73-warn: var(--v8-warn); --v73-warn-bg: color-mix(in srgb, var(--v8-warn) 12%, var(--v8-card));
  --v73-bad: var(--v8-neg); --v73-bad-bg: color-mix(in srgb, var(--v8-neg) 12%, var(--v8-card));
  --v73-off: var(--v8-t2); --v73-off-bg: var(--v8x-g100);
  --v75-bar: color-mix(in srgb, var(--v8-accent) 22%, transparent); --v75-bar-hi: color-mix(in srgb, var(--v8-accent) 42%, transparent);
  --v75-fill0: color-mix(in srgb, var(--v8-accent) 28%, transparent); --v75-fill1: color-mix(in srgb, var(--v8-accent) 0%, transparent);
  --v84-r: var(--v8-r-panel); --v84-r-ctl: var(--v8-r-ctl); --v84-shadow: 0 0 0 1px var(--v8-hair); --v84-shadow-hi: 0 0 0 1px var(--v8x-line2);
  --v84-sel: color-mix(in srgb, var(--v8-accent) 10%, transparent);
  --pc-on: color-mix(in srgb, var(--v8-accent) 8%, transparent);
  /* chart tones: the four series and the status colours */
  --t-a: var(--v8-warn); --t-r: var(--v8-neg); --t-b: var(--v8-accent); --t-g: var(--v8-pos);
  --c-b: var(--v8-accent); --c-g: var(--v8-pos); --c-r: var(--v8-neg); --c-ink: var(--v8-t1);
  /* the type ramp the older layers read: body 14, meta 12.5, panel titles 15, page titles 30 */
  --t-title-size: 28px; --t-title-lh: 36px; --t-title-track: -0.02em;
  --t-num-size: 20px; --t-num-lh: 28px; --t-num-track: -0.02em;
  --t-heading-size: 15px; --t-heading-lh: 22px; --t-heading-track: -0.005em;
  --t-body-size: 14px; --t-body-lh: 22px;
  --t-small-size: 13px; --t-small-lh: 20px;
  --t-label-size: 12px; --t-label-lh: 18px;
  --gutter: 32px; --v7-gutter: 32px; --v7-col: 1240px;
}

/* =====================================================================================================================
   2. THE GROUND: one face, the page tone, three text tones
   ===================================================================================================================== */
html, body { background: var(--v8-page); }
.shell { font-family: var(--v8-sans); font-optical-sizing: auto; color: var(--v8-t1); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.shell .main, #view { background: var(--v8-page) !important; }
#view { color: var(--v8-t1); font-size: 14px; line-height: 22px; font-variant-numeric: tabular-nums; }
#view p { line-height: 22px; }
#view :is(.muted, .l2, small, .sub) { color: var(--v8-t3); }
#view :is(.mono, .v89-id, .vk-id, code, kbd) { font-family: var(--v8-mono); }
#view ::selection { background: color-mix(in srgb, var(--v8-accent) 30%, transparent); }
#view :focus-visible, header.top :focus-visible, .shell > .nav :focus-visible, #dialog :focus-visible { outline: 2px solid var(--v8-accent); outline-offset: 2px; }

/* =====================================================================================================================
   3. THE SIDEBAR: 272 on the deep tone; the workspace at the top, search under it, bands divided by a hairline, items 36 tall
   ===================================================================================================================== */
@media (min-width: 700px) {
  .shell { grid-template-columns: 272px minmax(0, 1fr) !important; }
  .shell.mini { grid-template-columns: 72px minmax(0, 1fr) !important; }
  .shell > .nav { background: var(--v8-deep) !important; border-right: 1px solid var(--v8-hair) !important; padding: 0 16px 24px !important; }
  /* the workspace: its mark, its name, the sample badge */
  .shell > .nav .brand { height: 64px !important; margin: 0 -4px !important; padding: 0 6px !important; border-radius: 10px; background: none !important; }
  .shell > .nav .brand:hover { background: none !important; }
  .shell > .nav .brand:hover #wsNav { color: var(--v8-t1) !important; }
  .shell > .nav .brand { display: flex !important; width: auto !important; max-width: none; min-width: 0; overflow: hidden; }
  .shell > .nav .brand .bws { gap: 10px !important; min-width: 0; width: 100%; max-width: 100%; overflow: hidden; }
  .shell > .nav .brand .bws > div { min-width: 0; flex: 1 1 auto; }
  .shell > .nav .brand #wsNav { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .shell > .nav .brand .v7-wsrow { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .shell > .nav .brand .v7-wsname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .shell > .nav .brand .vk-wsi { width: 26px !important; height: 26px !important; border-radius: 7px !important; background: var(--v8-t1) !important; color: var(--v8-page) !important; font: 600 10px/26px var(--v8-sans) !important; letter-spacing: .01em; box-shadow: none !important; }
  .shell > .nav .brand #wsNav, .shell > .nav .brand .v7-wsname { font-size: 14px !important; line-height: 20px !important; font-weight: 550 !important; color: var(--v8-t1) !important; }
  .shell > .nav .brand .v7-badge { height: 20px; padding: 0 7px; border-radius: 6px; background: none !important; box-shadow: 0 0 0 1px var(--v8-hair) !important; border: 0 !important; color: var(--v8-t3) !important; font: 500 12px/20px var(--v8-sans) !important; }
  /* the search: the board's field, opening the same palette as the top bar's */
  .shell > .nav #navSearch { display: flex !important; align-items: center; gap: 8px; width: 100%; height: 38px; margin: 4px 0 0 !important; padding: 0 6px 0 10px !important; border-radius: var(--v8-r-ctl) !important; border: 1px solid var(--v8-hair) !important; background: var(--v8-card) !important; box-shadow: none !important; color: var(--v8-t3) !important; font: 400 14px/1 var(--v8-sans) !important; cursor: pointer; }
  .shell > .nav #navSearch:hover { color: var(--v8-t2) !important; border-color: var(--v8x-line2) !important; }
  .shell > .nav #navSearch svg.i { width: 16px; height: 16px; color: var(--v8-t3); }
  .shell > .nav #navSearch span { flex: 1; text-align: left; }
  .shell > .nav #navSearch kbd { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 5px; border: 1px solid var(--v8-hair); background: var(--v8-raised); box-shadow: none; font: 500 12px/1 var(--v8-sans); color: var(--v8-t2); }
  .shell.mini > .nav #navSearch { justify-content: center; padding: 0 !important; }
  .shell.mini > .nav #navSearch :is(span, kbd) { display: none !important; }
  /* the top bar's search moves to the sidebar, where the boards keep it */
  header.top > #topSearch { display: none !important; }
  #nav.navlist { margin-top: 16px !important; padding-top: 4px; border-top: 1px solid var(--v8-hair); margin-left: -16px !important; margin-right: -16px !important; padding-left: 16px; padding-right: 16px; }
  .shell > .nav .navitems a[data-nav] { height: 36px !important; margin: 0 0 2px !important; padding: 0 10px !important; gap: 12px !important; border-radius: 9px !important; font-size: 14px !important; line-height: 20px !important; font-weight: 400 !important; color: var(--v8-t2) !important; box-shadow: none !important; transition: background-color .15s var(--v8-ease), color .15s var(--v8-ease); }
  .shell > .nav .navitems a[data-nav] svg.i { width: 18px !important; height: 18px !important; color: var(--v8-t2) !important; stroke-width: 1.5; }
  .shell > .nav .navitems a[data-nav]:hover { background: var(--v8-raised) !important; color: var(--v8-t1) !important; }
  .shell > .nav .navitems a[data-nav]:hover svg.i { color: var(--v8-t1) !important; }
  .shell > .nav .navitems a[data-nav][aria-current] { background: var(--v8-raised) !important; color: var(--v8-t1) !important; font-weight: 400 !important; box-shadow: var(--v8-hi), 0 0 0 1px var(--v8-hair) !important; }
  .shell > .nav .navitems a[data-nav][aria-current] svg.i { color: var(--v8-t1) !important; }
  .shell > .nav .navitems a[data-nav] .count, .shell > .nav .navitems a[data-nav][aria-current] .count { min-width: 0; height: auto; padding: 0 !important; border-radius: 0; background: none !important; font: 400 12px/1 var(--v8-mono) !important; letter-spacing: 0 !important; color: var(--v8-t3) !important; }
  .shell > .nav .navitems a[data-nav] .count.hot, .shell > .nav .navitems a[data-nav][aria-current] .count.hot { color: var(--v8-neg) !important; background: none !important; }
  /* the collapsed sidebar: square items, centred, the count tucked into the corner */
  .shell.mini > .nav { padding: 0 12px 24px !important; }
  .shell.mini > .nav .brand { justify-content: center; }
  .shell.mini > .nav .brand .bws { justify-content: center; width: auto; }
  .shell.mini > .nav .navitems a[data-nav] { position: relative; justify-content: center !important; padding: 0 !important; gap: 0 !important; }
  .shell.mini > .nav .navitems a[data-nav] .count { position: absolute !important; top: 5px; right: 5px; font-size: 12px !important; }
  .shell.mini #nav.navlist, .shell.mini #nav .navgroup.v5-band + .navgroup.v5-band, .shell.mini #nav .navgroup.v5-foot { margin-left: -12px !important; margin-right: -12px !important; padding-left: 12px !important; padding-right: 12px !important; }
  #nav .navgroup.v5-band + .navgroup.v5-band, #nav .navgroup.v5-foot { margin-top: 12px !important; padding-top: 12px !important; border-top: 1px solid var(--v8-hair) !important; margin-left: -16px !important; margin-right: -16px !important; padding-left: 16px !important; padding-right: 16px !important; }
}

/* =====================================================================================================================
   4. THE TOP BAR: 64 with a hairline; where you are on the left, quiet ringed icons on the right
   ===================================================================================================================== */
@media (min-width: 700px) {
  .shell .main > header.top { height: 64px !important; padding: 0 32px 0 20px !important; gap: 10px !important; background: var(--v8-page) !important; border-bottom: 1px solid var(--v8-hair) !important; box-shadow: none !important; }
  header.top > #navToggle { order: 0; width: 36px; height: 36px; border-radius: var(--v8-r-ctl); border: 0; background: none; color: var(--v8-t3); display: grid; place-items: center; }
  header.top > #navToggle:hover { background: var(--v8-raised); color: var(--v8-t1); }
  /* where you are: the section's icon, then the trail */
  header.top > #crumb { order: 1; display: inline-flex !important; align-items: center; margin: 0 -2px 0 2px; color: var(--v8-t2); }
  header.top > #crumb b { display: none; }
  header.top > #crumb svg.i { width: 18px; height: 18px; color: var(--v8-t2); }
  header.top > .vk-crumb:not(#v8-none) { order: 1; display: flex !important; align-items: center; min-width: 0; font-size: 15px !important; color: var(--v8-t3); }
  header.top > .vk-crumb b { font-size: 15px !important; font-weight: 500 !important; color: var(--v8-t1) !important; }
  header.top > .vk-crumb :is(a, span) { font-size: 15px !important; font-weight: 400 !important; color: var(--v8-t1) !important; }
  header.top > .vk-crumb a:hover { color: var(--v8-t1) !important; text-decoration: underline; text-underline-offset: 3px; }
  header.top > .vk-crumb a + em + b, header.top > .vk-crumb em ~ b { color: var(--v8-t2) !important; font-weight: 400 !important; }
  header.top > .vk-crumb em { margin: 0 10px !important; color: var(--v8-t3) !important; opacity: .6; font-style: normal; }
  header.top > .sp { order: 2; flex: 1; }
  /* the right-hand icons: 36, ringed, radius 10 */
  header.top > .v89-status { width: 36px !important; height: 36px !important; border-radius: var(--v8-r-ctl) !important; }
  header.top > .v89-status::before { background: var(--v8-pos) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--v8-pos) 18%, transparent) !important; }
  header.top > .v89-status:not(.fresh)::before { background: var(--v8-warn) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--v8-warn) 18%, transparent) !important; }
  header.top > .v89-status:hover { background: var(--v8-raised) !important; }
  .shell header.top > .v87vbtn { height: 36px !important; padding: 0 12px 0 8px !important; border-radius: var(--v8-r-ctl) !important; background: none !important; box-shadow: 0 0 0 1px var(--v8-hair) !important; color: var(--v8-t1) !important; font-size: 14px !important; font-weight: 400 !important; }
  .shell header.top > .v87vbtn:hover { background: var(--v8-raised) !important; }
  header.top > #r95ask, header.top .v95-bell-b, header.top > .v8-theme { width: 36px !important; height: 36px !important; border-radius: var(--v8-r-ctl) !important; background: none !important; box-shadow: 0 0 0 1px var(--v8-hair) !important; border: 0 !important; color: var(--v8-t2) !important; display: inline-grid !important; place-items: center; padding: 0 !important; cursor: pointer; }
  header.top > #r95ask:hover, header.top .v95-bell-b:hover, header.top > .v8-theme:hover { background: var(--v8-raised) !important; color: var(--v8-t1) !important; }
  header.top .v95-bell-b .n { background: var(--v8-neg) !important; color: #fff !important; box-shadow: 0 0 0 2px var(--v8-page) !important; font: 600 12px/16px var(--v8-sans) !important; top: -4px !important; right: -4px !important; }
  header.top > .v8-theme { order: 5; }
  header.top > .v8-theme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  header.top > .me { margin-left: 0 !important; height: 36px !important; padding: 0 2px !important; }
  header.top > .me .avatar { width: 32px !important; height: 32px !important; border-radius: 50% !important; box-shadow: 0 0 0 1px var(--v8-hair) !important; }
}

/* =====================================================================================================================
   5. THE PAGE: a 1240 column; the head is a title at 30 with its purpose under it in meta; sub-pages as one segmented row
   ===================================================================================================================== */
#view .page { max-width: calc(1240px + 64px) !important; padding: 32px 32px 48px !important; }
@media (max-width: 699px) { #view .page { padding: 20px 16px 40px !important; } #view .page > :is(.phead, .v89-head) { align-items: flex-start !important; } }
#view .page > :is(.phead, .v89-head) { min-height: 36px !important; gap: 16px !important; }
@media (min-width: 700px) { #view .page > :is(.phead, .v89-head) { align-items: center !important; } }
#view .page > :is(.phead, .v89-head) h1, #view .page > :is(.phead, .v89-head) .v89-titlerow h1, #view .v6-hello h1, #view .page .v7x-title h1, #view .page h1.v7x-h1 {
  font-family: var(--v8-sans) !important; font-size: 28px !important; line-height: 36px !important; font-weight: 450 !important; letter-spacing: -0.02em !important; color: var(--v8-t1) !important; }
#view .page > :is(.phead, .v89-head) :is(p, .v89-purpose) { margin-top: 6px !important; font-size: 14px !important; line-height: 22px !important; color: var(--v8-t3) !important; }
#view .page > :is(.phead, .v89-head) .vk-hsub { font-size: 14px !important; line-height: 22px !important; color: var(--v8-t3) !important; }
/* sub-pages: the board's segmented row (a ringed track, the chosen one raised) */
#view .v5-tabs { display: inline-flex !important; width: fit-content !important; justify-self: start; align-self: start; max-width: 100%; gap: 2px !important; margin: 24px 0 24px !important; padding: 3px !important; border-radius: var(--v8-r-ctl) !important; border: 0 !important; box-shadow: 0 0 0 1px var(--v8-hair) !important; background: var(--v8-card) !important; flex-wrap: wrap; }
#view .v5-tabs > a[role="tab"] { height: 32px !important; padding: 0 12px !important; border: 0 !important; border-radius: 7px !important; background: none !important; font-size: 14px !important; line-height: 20px !important; font-weight: 400 !important; color: var(--v8-t2) !important; box-shadow: none !important; }
#view .v5-tabs > a[role="tab"]:hover { color: var(--v8-t1) !important; background: color-mix(in srgb, var(--v8-raised) 60%, transparent) !important; }
#view .v5-tabs > a[role="tab"][aria-selected="true"] { background: var(--v8-raised) !important; color: var(--v8-t1) !important; box-shadow: var(--v8-hi), 0 0 0 1px var(--v8-hair) !important; }
#view .v5-tabs .v5-n { min-width: 0; height: auto; padding: 0 0 0 2px; background: none !important; font: 400 12px/1 var(--v8-mono) !important; letter-spacing: 0 !important; color: var(--v8-t3) !important; }
#view .v5-tabs .v5-n[data-tone="hot"] { color: var(--v8-neg) !important; }
#view .v5-tabs .v5-n[data-tone="warm"] { color: var(--v8-warn) !important; }
#view .v5-tabs.v5-stuck { background: var(--v8-card) !important; }
/* segmented controls inside a page */
#view :is(.v6-tabs, .seg):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) { display: inline-flex; gap: 2px !important; padding: 3px !important; border-radius: var(--v8-r-ctl) !important; border: 0 !important; box-shadow: 0 0 0 1px var(--v8-hair) !important; background: var(--v8-card) !important; }
#view :is(.v6-tabs, .seg):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) > button { height: 30px !important; padding: 0 12px !important; border: 0 !important; border-radius: 7px !important; background: none !important; box-shadow: none !important; font-size: 13px !important; font-weight: 400 !important; color: var(--v8-t2) !important; }
#view :is(.v6-tabs, .seg):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) > button:hover { color: var(--v8-t1) !important; }
#view :is(.v6-tabs, .seg):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) > button:is([aria-pressed="true"], [aria-selected="true"], .on) { background: var(--v8-raised) !important; color: var(--v8-t1) !important; box-shadow: var(--v8-hi), 0 0 0 1px var(--v8-hair) !important; }

/* =====================================================================================================================
   6. CONTROLS: quiet buttons are a raised pill with a hairline; the one primary is the accent
   ===================================================================================================================== */
.shell .btn:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *), #dialog .btn { height: 36px !important; padding: 0 14px !important; border: 0 !important; border-radius: 999px !important; background: var(--v8-raised) !important; box-shadow: var(--v8-hi), 0 0 0 1px var(--v8-hair) !important; color: var(--v8-t1) !important; font: 500 14px/20px var(--v8-sans) !important; gap: 8px !important; transition: background-color .15s var(--v8-ease), box-shadow .15s var(--v8-ease); }
.shell .btn:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *):has(svg.i), #dialog .btn:has(svg.i) { padding-left: 12px !important; }
.shell .btn:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) svg.i, #dialog .btn svg.i { width: 16px !important; height: 16px !important; color: currentColor !important; }
.shell .btn:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *):hover, #dialog .btn:hover { background: color-mix(in srgb, var(--v8-t1) 6%, var(--v8-raised)) !important; color: var(--v8-t1) !important; }
.shell .btn:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *).primary, #dialog .btn.primary, .shell .btn:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *).primary:hover { background: var(--v8-accent) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) !important; }
.shell .btn:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *).primary:hover, #dialog .btn.primary:hover { background: var(--v8x-accent-h) !important; color: #fff !important; }
:root[data-theme="dark"] .shell .btn:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *).primary:hover, :root[data-theme="dark"] #dialog .btn.primary:hover { color: #0f0f10 !important; }
.shell .btn:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *).ghost, #dialog .btn.ghost { background: transparent !important; box-shadow: none !important; color: var(--v8-t2) !important; }
.shell .btn:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *).ghost:hover, #dialog .btn.ghost:hover { background: var(--v8-raised) !important; color: var(--v8-t1) !important; }
.shell .btn:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *).sm, #dialog .btn.sm { height: 30px !important; padding: 0 12px !important; font-size: 13px !important; }
.shell .btn:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *)[aria-disabled="true"], .shell .btn:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *):disabled, #dialog .btn:disabled { opacity: .45; }
#view a.link, #view .link, #view .v6-pf a, #view .v6-pf .link { color: var(--v8-accent) !important; }
#demoReadOwn { height: 36px !important; background: var(--v8-raised) !important; box-shadow: var(--v8-hi), 0 0 0 1px var(--v8-hair) !important; color: var(--v8-t1) !important; font-size: 14px !important; }
/* fields: radius 10, a hairline, the card tone */
#view :is(input[type="text"], input[type="search"], input[type="email"], input[type="date"], input[type="number"], input[type="tel"], input[type="url"], input:not([type]), select, textarea):not(.v89r-search input):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *),
#dialog :is(input[type="text"], input[type="search"], input[type="email"], input[type="date"], input[type="number"], input[type="tel"], input[type="url"], input:not([type]), select, textarea) {
  border: 1px solid var(--v8x-line2) !important; border-radius: var(--v8-r-ctl) !important; background-color: var(--v8-card) !important; color: var(--v8-t1) !important; box-shadow: none !important; font-family: var(--v8-sans); font-size: 14px; }
#view :is(input, select, textarea):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *):focus, #dialog :is(input, select, textarea):focus { border-color: var(--v8-accent) !important; outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--v8-accent) 22%, transparent) !important; }
#view :is(input, textarea)::placeholder, #dialog :is(input, textarea)::placeholder { color: var(--v8-t3); }
:root[data-theme="dark"] #view select, :root[data-theme="dark"] #dialog select { color-scheme: dark; }
:root[data-theme="dark"] { color-scheme: dark; }

/* =====================================================================================================================
   7. PANELS: card tone, a hairline ring, radius 16; a section's title is a panel title (15/500) with its meta beside it
   ===================================================================================================================== */
#view .page .card:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *):not(.card .card):not(.v6-panel .card) { background: var(--v8-card) !important; border: 0 !important; border-radius: var(--v8-r-panel) !important; box-shadow: 0 0 0 1px var(--v8-hair) !important; padding: 18px 22px 20px !important; margin-bottom: 16px !important; overflow: visible; }
#view .page .card:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) > .card-h { padding: 0 0 12px !important; min-height: 0; border: 0 !important; background: none !important; }
#view .page .card:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) > .card-h :is(h2, h3), #view .v5-sec:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) h2, #view .v6-ph:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) h2 { font-size: 15px !important; line-height: 22px !important; font-weight: 500 !important; letter-spacing: -0.005em !important; color: var(--v8-t1) !important; }
#view .page .card:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) > .card-h :is(.sub, .n, small) { font-size: 12px !important; line-height: 20px !important; color: var(--v8-t3) !important; font-weight: 400 !important; }
#view .page .card:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) > .card-b { padding: 0 !important; }
/* the boxed panels the earlier layers drew (the home grid, side columns, a record's summary) take the same ring */
#view :is(.v6-panel, aside.stack > .card, .vk-split-side > .card, .vk-split-side > section, .g-main > aside .card, .r92e-grid > aside .card):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *), #view .page .vk-lit:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) {
  background: var(--v8-card) !important; border: 0 !important; border-radius: var(--v8-r-panel) !important; box-shadow: 0 0 0 1px var(--v8-hair) !important; padding: 20px 22px !important; margin-bottom: 16px; }
#view .v6-grid { gap: 16px !important; }
#view :is(.g-main, .vk-split, .r92e-grid, .smgrid, .v95p-two) { gap: 16px !important; }
#view .v6-panel :is(.card, .vk-lit):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *), #view aside .card .card:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *), #view .card .card:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) { box-shadow: none !important; background: none !important; padding: 0 !important; border-radius: 0 !important; }

/* figures in a row: one panel, cells divided by a hairline, the label in body grey, the figure at 28 */
#view .page :is(.v89-strip, .vk-kpis, .v75kpis, .qe-tiles, .v5-strip):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; grid-auto-flow: row !important; gap: 0 !important; padding: 0 !important; margin: 0 0 16px !important; border-radius: var(--v8-r-panel) !important; background: var(--v8-card) !important; box-shadow: 0 0 0 1px var(--v8-hair) !important; overflow: hidden; }
#view .page :is(.v89-strip, .vk-kpis, .v75kpis, .qe-tiles, .v5-strip):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) > * { padding: 18px 22px 20px !important; min-height: 0; border: 0 !important; border-radius: 0 !important; }
#view .page :is(.v89-strip, .vk-kpis, .v75kpis, .qe-tiles, .v5-strip):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) > * + * { box-shadow: -1px 0 0 0 var(--v8-hair) !important; }
#view .page :is(.v89-strip, .vk-kpis, .v75kpis, .qe-tiles, .v5-strip):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) > * > :is(.lab, .vk-kpi-l, .v75k-l, .v5-cl, span:not(.num):not(.ctx):not(.sub)) { order: -1; font-size: 14px !important; line-height: 20px !important; color: var(--v8-t2) !important; }
#view .page :is(.v89-strip, .vk-kpis, .v75kpis, .qe-tiles, .v5-strip):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) > * > :is(.num, .vk-kpi-v, .v75k-v, .v5-cv, b) { display: block; margin-top: 6px; font-size: 28px !important; line-height: 34px !important; font-weight: 500 !important; letter-spacing: -0.02em !important; color: var(--v8-t1) !important; }
#view .page :is(.v89-strip, .vk-kpis, .v75kpis, .qe-tiles, .v5-strip):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) > * > :is(.num.critical, [data-tone="critical"]), #view .page :is(.v89-strip, .vk-kpis, .v75kpis, .qe-tiles, .v5-strip):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) > [data-tone="critical"] > b, #view .page .qe-tiles > .qe-t-r > b { color: var(--v8-neg) !important; }
#view .page :is(.v89-strip, .vk-kpis, .v75kpis, .qe-tiles, .v5-strip):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) > :not([hidden]) { display: flex !important; flex-direction: column !important; align-items: flex-start; justify-content: flex-start; min-width: 0 !important; text-align: left; }
#view :is(.v89-strip .sub, .v89-strip .ctx, .vk-kpi-s, .v75k-s) { font: 400 12px/18px var(--v8-mono) !important; color: var(--v8-t3) !important; }
#view .v89-strip > :is(a, button).v89-cell:hover { background: color-mix(in srgb, var(--v8-raised) 50%, var(--v8-card)) !important; }
#view .page :is(.v89-strip, .vk-kpis, .v75kpis, .qe-tiles, .v5-strip):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) > :is(a, button):hover > :is(.num, .vk-kpi-v, .v75k-v, .v5-cv, b) { color: var(--v8-t1) !important; }
#view .page :is(.v89-strip, .vk-kpis, .v75kpis, .qe-tiles, .v5-strip):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) > :is(a, button):hover { background: color-mix(in srgb, var(--v8-raised) 50%, var(--v8-card)) !important; }

/* =====================================================================================================================
   8. TABLES: the read's .v8all pattern. Meta-grey heads at 12, rows 44, hairline-2 dividers, first and last cells 22 in from a
   panel's edge, row hover in the raised tone
   ===================================================================================================================== */
#view .page table:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) table) th { height: 36px; padding: 8px 12px !important; letter-spacing: 0 !important; text-transform: none !important; background: none !important; border-top: 0 !important; border-bottom: 1px solid var(--v8-hair) !important; }
#view .page table:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) table):not(.v8c-on table) th { font: 400 12px/18px var(--v8-sans) !important; color: var(--v8-t3) !important; }
#view .page table:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) table) td { padding: 10px 12px !important; font-size: 14px !important; line-height: 20px !important; color: var(--v8-t2); border-bottom: 1px solid var(--v8-hair-2) !important; background: none; }
@media (min-width: 700px) { #view .page table:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) table) td { height: 44px !important; } }
#view .page table:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) table) td :is(.l1, b) { font-weight: 450 !important; color: var(--v8-t1) !important; }
#view .page table:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) table) td :is(.l2, small, .muted) { font-size: 12px !important; line-height: 18px !important; color: var(--v8-t3) !important; }
#view .page table:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) table) tbody tr:last-child td { border-bottom: 0 !important; }
#view .page table:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) table) tbody tr:is([data-go], [tabindex], .click, [data-href]):hover td { background: color-mix(in srgb, var(--v8-raised) 55%, var(--v8-card)) !important; }
#view .page table:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) table) :is(th, td):first-child { padding-left: 0 !important; }
#view .page table:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) table) :is(th, td):last-child { padding-right: 0 !important; }
/* a table inside a panel runs edge to edge, its first and last cells 22 in */
#view .page .card:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) :is(.tablewrap, .v89-table-wrap) { margin-left: -22px !important; margin-right: -22px !important; width: auto !important; max-width: none !important; border: 0 !important; box-shadow: none !important; background: none !important; border-radius: 0 !important; }
#view .page .card:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) :is(.tablewrap, .v89-table-wrap) table :is(th, td):first-child { padding-left: 22px !important; }
#view .page .card:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) :is(.tablewrap, .v89-table-wrap) table :is(th, td):last-child { padding-right: 22px !important; }
#view .page .card:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) :is(.tablewrap, .v89-table-wrap) table th { border-top: 1px solid var(--v8-hair) !important; }
#view .page .card:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) > .card-b:last-child > :is(.tablewrap, .v89-table-wrap):last-child { margin-bottom: -20px !important; }
#view .page .card:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *):not(.card .card):not(.v6-panel .card):not(:has(> .card-h)):has(> :is(.tablewrap, .v89-table-wrap)) { padding-top: 0 !important; }
#view .page .card:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *):not(:has(> .card-h)) > :is(.tablewrap, .v89-table-wrap) table th { border-top: 0 !important; }
#view .page .card:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) > .tfoot { margin: 0 -22px -20px !important; padding: 12px 22px !important; border-top: 1px solid var(--v8-hair-2) !important; }
#view .tfoot, #view .morebar { color: var(--v8-t3) !important; background: none !important; border: 0 !important; }

/* =====================================================================================================================
   9. STATUS: a stroked icon and the word, in the status colour (Verified pos, Failed neg, Waiting warn, the rest t3)
   ===================================================================================================================== */
#view :is(.chip, .vk-chip, .v96-l, .tag, .v73pill, .v75chip):not(.mono):not(.o):not(button):not(a):not([role=button]):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) { font-size: 13px !important; font-weight: 500 !important; color: var(--v8-t2); gap: 7px !important; }
#view :is(.chip, .vk-chip, .v96-l, .tag, .v73pill, .v75chip):not(.mono):not(.o):not(button):not(a):not([role=button]):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *)::before { width: 16px !important; height: 16px !important; background-size: 16px 16px !important; }
#view :is(.chip, .vk-chip, .v96-l, .tag, .v73pill, .v75chip):not(.mono):not(.o):not(button):not(a):not([role=button]):is([data-tone="positive"], [data-tone="ok"], .g, .ok, .green, .good):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) { color: var(--v8-pos) !important; }
#view :is(.chip, .vk-chip, .v96-l, .tag, .v73pill, .v75chip):not(.mono):not(.o):not(button):not(a):not([role=button]):is([data-tone="attention"], [data-tone="warn"], .a, .warn, .amber):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) { color: var(--v8-warn) !important; }
#view :is(.chip, .vk-chip, .v96-l, .tag, .v73pill, .v75chip):not(.mono):not(.o):not(button):not(a):not([role=button]):is([data-tone="critical"], [data-tone="bad"], .r, .bad, .red):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) { color: var(--v8-neg) !important; }
#view :is(.chip, .vk-chip, .v96-l, .tag, .v73pill, .v75chip):not(.mono):not(.o):not(button):not(a):not([role=button]):is(.n, [data-tone="neutral"]):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) { color: var(--v8-t3) !important; }
#view .tag:is(.o, .mono):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) { background: none !important; box-shadow: 0 0 0 1px var(--v8-hair) !important; color: var(--v8-t2) !important; border-radius: 6px !important; font: 400 13px/20px var(--v8-sans) !important; padding: 0 7px !important; }
#view .tag.mono:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) { font: 400 12px/20px var(--v8-mono) !important; }
#view .tag.b:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) { color: var(--v8-accent) !important; }

/* =====================================================================================================================
   10. DIALOGS, MENUS, TOASTS AND THE PALETTE: the card tone, a hairline ring, the overlay shadow
   ===================================================================================================================== */
#dialog { background: var(--v8x-scrim) !important; backdrop-filter: none !important; }
#dialog > :is(.dlg, .dialog, form, section, div):first-child { background: var(--v8-card) !important; color: var(--v8-t1); border: 0 !important; border-radius: var(--v8-r-panel) !important; box-shadow: var(--v8-shadow), 0 0 0 1px var(--v8-hair) !important; }
#dialog :is(h2, h3) { color: var(--v8-t1); font-weight: 500 !important; letter-spacing: -0.01em; }
#dialog :is(p, .help, small, .sub) { color: var(--v8-t2); }
#dialog label { color: var(--v8-t2); }
.cmdk .box, #pal > div, .v64pal .box { background: var(--v8-card) !important; border: 0 !important; box-shadow: var(--v8-shadow), 0 0 0 1px var(--v8-hair) !important; border-radius: var(--v8-r-panel) !important; color: var(--v8-t1); }
:is(.toast, .v89-toast, #toast, .vtoast) { background: var(--v8-raised) !important; color: var(--v8-t1) !important; border: 0 !important; border-radius: var(--v8-r-ctl) !important; box-shadow: var(--v8-shadow), 0 0 0 1px var(--v8-hair) !important; font-family: var(--v8-sans); font-size: 14px; }
:is(.v7w-menu, .v7x-menu, .menu, .dd-menu, details[open] > .v7w-how-b, .v5-menu, .v87menu)[role="menu"], :is(.v7w-menu, .v7x-menu, .v5-menu, .v87menu) { background: var(--v8-card) !important; border: 0 !important; border-radius: 12px !important; box-shadow: var(--v8-shadow), 0 0 0 1px var(--v8-hair) !important; color: var(--v8-t1); }

/* =====================================================================================================================
   11. THE PHONE: a 16px gutter, no sideways scroll
   ===================================================================================================================== */
@media (max-width: 699px) {
  html, body { overflow-x: hidden; }
  #view .page > :is(.phead, .v89-head) h1, #view .page > :is(.phead, .v89-head) .v89-titlerow h1, #view .v6-hello h1 { font-size: 28px !important; line-height: 34px !important; }
  #view .v5-tabs { display: flex !important; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #view .v5-tabs > a[role="tab"] { flex: none; }
  #view .page .card:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *):not(.card .card):not(.v6-panel .card) { padding: 16px 16px 18px !important; }
  #view .page .card:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) :is(.tablewrap, .v89-table-wrap) { margin-left: -16px !important; margin-right: -16px !important; }
  #view .page .card:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) :is(.tablewrap, .v89-table-wrap) table :is(th, td):first-child { padding-left: 16px !important; }
  #view .page .card:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) :is(.tablewrap, .v89-table-wrap) table :is(th, td):last-child { padding-right: 16px !important; }
  #view .page :is(.v89-strip, .vk-kpis, .v75kpis, .qe-tiles, .v5-strip):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view .page :is(.v89-strip, .vk-kpis, .v75kpis, .qe-tiles, .v5-strip):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) > * { padding: 14px 16px !important; }
  /* the phone's bar: the nav strip and the top bar are one surface on the page tone, the icons ringed as on the desktop */
  .shell > .nav { background: var(--v8-page) !important; border-bottom: 1px solid var(--v8-hair) !important; border-right: 0 !important; }
  .shell .main > header.top { background: var(--v8-page) !important; border-bottom: 1px solid var(--v8-hair) !important; gap: 8px !important; }
  header.top > :is(#topSearch, #r95ask, .v8-theme), header.top .v95-bell-b { position: relative; width: 36px !important; min-width: 36px !important; height: 36px !important; flex: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: var(--v8-r-ctl) !important; background: none !important; box-shadow: 0 0 0 1px var(--v8-hair) !important; color: var(--v8-t2) !important; display: inline-grid !important; place-items: center; }
  header.top > .v8-theme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  header.top .v95-bell-b .n { position: absolute !important; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--v8-neg) !important; color: #fff !important; font: 600 12px/16px var(--v8-sans) !important; box-shadow: 0 0 0 2px var(--v8-page); }
  header.top .me .avatar { box-shadow: 0 0 0 1px var(--v8-hair) !important; }
  /* a page's toolbar wraps, and its search takes a line of its own */
  #view .v7w-tools, #view .v7w-tools .toolbar { flex-wrap: wrap !important; }
  #view .v7w-tools .toolbar label.field, #view .v7w-tools > label.field { flex: 1 1 100% !important; width: auto !important; min-width: 0 !important; }
  #view .page :is(.v89-strip, .vk-kpis, .v75kpis, .qe-tiles, .v5-strip):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) > * > * { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
  #view .page :is(.v89-strip, .vk-kpis, .v75kpis, .qe-tiles, .v5-strip):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) > * > :is(.num, .vk-kpi-v, .v75k-v, .v5-cv, b) { font-size: 28px !important; line-height: 32px !important; margin-top: 4px; }
  #view .page :is(.v89-strip, .vk-kpis, .v75kpis, .qe-tiles, .v5-strip):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) > :nth-child(2n + 1) { box-shadow: none !important; }
  #view .page :is(.v89-strip, .vk-kpis, .v75kpis, .qe-tiles, .v5-strip):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) > :nth-child(n + 3) { border-top: 1px solid var(--v8-hair) !important; }
}

/* =====================================================================================================================
   12. FIXES PER PAGE FAMILY (round 1)
   ===================================================================================================================== */
/* a search field is its label: the label draws the field, the input inside it is bare */
#view label:is(.field, .sq, .v89r-search):has(svg), #view .v89r-search { border: 1px solid var(--v8x-line2) !important; border-radius: var(--v8-r-ctl) !important; background: var(--v8-card) !important; box-shadow: none !important; color: var(--v8-t3); }
#view label:is(.field, .sq, .v89r-search):has(svg) > :is(input, select), #view .v89r-search input { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; }
#view label:is(.field, .sq, .v89r-search):has(svg):focus-within, #view .v89r-search:focus-within { border-color: var(--v8-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--v8-accent) 22%, transparent) !important; }
/* "How this works" sits on the sub-page row, at its right */
#view .page .v7w-bar.v7w-onrow { top: 91px !important; right: 32px !important; }
#view .page[data-v7work="wide"] > .v7w-bar.v7w-onrow { top: 94px !important; }
#view .v7w-how > summary { color: var(--v8-accent) !important; font-size: 14px !important; border-radius: var(--v8-r-ctl) !important; }
#view .v7w-how > summary:hover { background: var(--v8-raised) !important; }
#view .v7w-how-b { background: var(--v8-card) !important; box-shadow: var(--v8-shadow), 0 0 0 1px var(--v8-hair) !important; border-radius: var(--v8-r-panel) !important; }
#view .v7w-how-b > *, #view .v7w-how-b .v7w-note > :not(b) { font-size: 14px !important; line-height: 22px !important; color: var(--v8-t2) !important; }
/* the one primary: any further primary on the same view is drawn quiet (next-v8-layer.js marks them) */
.shell .btn:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *).primary.v8-second, .shell .btn:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *).primary.v8-second:hover { background: var(--v8-raised) !important; color: var(--v8-t1) !important; box-shadow: var(--v8-hi), 0 0 0 1px var(--v8-hair) !important; }
.shell .btn:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *).primary.v8-second:hover { background: color-mix(in srgb, var(--v8-t1) 6%, var(--v8-raised)) !important; }
/* Settings: the workspace mark is the sidebar's */
#view .page .v7s-mark:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) { background: var(--v8-t1) !important; color: var(--v8-page) !important; border-radius: 12px !important; font-weight: 600 !important; box-shadow: none !important; }
#view .page .v7s-badge:not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) { border: 0 !important; box-shadow: 0 0 0 1px var(--v8-hair); border-radius: 6px !important; color: var(--v8-t3) !important; }
/* the moved-here notes: a quiet raised line */
#view .v5-moved { background: var(--v8-card) !important; box-shadow: 0 0 0 1px var(--v8-hair) !important; border-radius: var(--v8-r-ctl) !important; color: var(--v8-t2) !important; }
#view .v5-moved b { color: var(--v8-t1); font-weight: 500; }

/* notices: a quiet line on the card tone; the status lives in the icon and a hairline tinted by it, the words stay readable */
#view :is(.notice, .v89-note):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *), #dialog :is(.notice, .v89-note) { border-radius: var(--v8-r-ctl) !important; background: color-mix(in srgb, var(--v8-raised) 60%, var(--v8-card)) !important; box-shadow: 0 0 0 1px var(--v8-hair) !important; color: var(--v8-t2) !important; font-size: 14px; line-height: 22px; }
#view :is(.notice, .v89-note):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *) b, #dialog :is(.notice, .v89-note) b { color: var(--v8-t1); font-weight: 500; }
#view :is(.notice.a, .v89-note[data-tone="attention"]):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *), #dialog :is(.notice.a, .v89-note[data-tone="attention"]) { background: color-mix(in srgb, var(--v8-warn) 7%, var(--v8-card)) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--v8-warn) 30%, transparent) !important; }
#view :is(.notice.r, .v89-note[data-tone="critical"]):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *), #dialog :is(.notice.r, .v89-note[data-tone="critical"]) { background: color-mix(in srgb, var(--v8-neg) 7%, var(--v8-card)) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--v8-neg) 30%, transparent) !important; }
#view :is(.notice.g, .v89-note[data-tone="positive"]):not(:is(.v8r, .v8q, .v8s, .v8f, .v8t, .v8d, .v8l, .v8rc, .v8b, .v8n, .v8own) *), #dialog :is(.notice.g, .v89-note[data-tone="positive"]) { background: color-mix(in srgb, var(--v8-pos) 6%, var(--v8-card)) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--v8-pos) 26%, transparent) !important; }
#view .notice.a > svg.i, #dialog .notice.a > svg.i, #view .v89-note[data-tone="attention"] > svg.i { color: var(--v8-warn) !important; }
#view .notice.r > svg.i, #dialog .notice.r > svg.i, #view .v89-note[data-tone="critical"] > svg.i { color: var(--v8-neg) !important; }
#view .notice.g > svg.i, #dialog .notice.g > svg.i, #view .v89-note[data-tone="positive"] > svg.i { color: var(--v8-pos) !important; }
#view .notice:is(.b, .n) > svg.i, #dialog .notice:is(.b, .n) > svg.i { color: var(--v8-t3) !important; }
/* Settings: the rows inside a panel, divided by hairline-2, the first one open to the panel's edge */
#view .page[data-v7r] .setbody .card :is([data-v7s="row"], [data-v7s="pic"], .v7s-row, .v5-planline, .v96-dr, .v88row, .slist > div, .v97perm) { border-top-color: var(--v8-hair-2) !important; padding: 18px 0 !important; }
#view .page[data-v7r] .setbody .card > .card-b > :is([data-v7s="row"], [data-v7s="pic"], .v7s-row, .v5-planline, .v96-dr, .v88row, .v97perm):first-child,
#view .page[data-v7r] .setbody .card > .card-b > dl.kv:first-child > :first-child,
#view .page[data-v7r] .setbody .card > dl.kv:first-child > :first-child,
#view .page[data-v7r] .setbody .card > :is([data-v7s="row"], .v7s-row):first-child,
#view .page[data-v7r] .setbody .card > .card-h:not(:has(h2, h3)) + .card-b > :first-child,
#view .page[data-v7r] .setbody .card > .card-h:not(:has(h2, h3)) + .card-b > dl.kv > :first-child { border-top: 0 !important; padding-top: 4px !important; }
#view .page[data-v7r] .setbody .card > .card-h.v7s-sr { padding: 0 !important; margin: 0 !important; height: 0 !important; min-height: 0 !important; }
#view .page[data-v7r] .setbody .card > .card-h.v7s-sr + .card-b > dl.kv > :first-child, #view .page[data-v7r] .setbody .card > .card-h.v7s-sr + .card-b > :is(.v7s-row, [data-v7s="row"]):first-child { border-top: 0 !important; padding-top: 4px !important; }
#view .page[data-v7r] .setbody .card .v7s-note { padding-bottom: 0 !important; margin-bottom: 0 !important; }
#view .page[data-v7r] .setbody .card .card-b > :last-child > :is(.v7s-row, [data-v7s="row"]):last-child, #view .page[data-v7r] .setbody .card .card-b > :is(.v7s-row, [data-v7s="row"]):last-child { padding-bottom: 4px !important; }
/* a button that carries its icon inside a drop zone: the icon is part of the button, never a second chip */
#view label.drop .btn svg.i { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; }
/* a page grid whose side column was removed (v84 marks it .v84one) runs one column wide; the v6 frame's 320px column had
   come back as empty space beside it */
#view .page .grid.g-main.v84one { grid-template-columns: minmax(0, 1fr) !important; }
/* a toast: the raised tone, its icon in the status colour */
#toast { display: inline-flex !important; align-items: center; gap: 10px; padding: 10px 14px !important; }
#toast > svg { width: 16px; height: 16px; flex: none; }
#toast.g > svg { color: var(--v8-pos) !important; } #toast.a > svg { color: var(--v8-warn) !important; } #toast.r > svg { color: var(--v8-neg) !important; }
/* the person, as on the boards: their picture and name in one ringed pill (the role stays in the tooltip) */
@media (min-width: 1100px) {
  .shell .main > header.top > .me { gap: 8px !important; height: 36px !important; padding: 0 12px 0 3px !important; border-radius: var(--v8-r-ctl) !important; box-shadow: 0 0 0 1px var(--v8-hair) !important; }
  .shell .main > header.top > .me:hover { background: var(--v8-raised); }
  .shell .main > header.top > .me .avatar { width: 28px !important; height: 28px !important; }
  .shell .main > header.top > .me > div:not(.avatar) { display: block !important; min-width: 0; max-width: 160px; }
  .shell .main > header.top > .me > div:not(.avatar) b { display: block; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--v8-t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .shell .main > header.top > .me > div:not(.avatar) > :not(b) { display: none !important; }
}

/* 2026-10-31 (port r1, PH-B follow-up): tablets, 700 to 1099 px. The page head wraps there (the title, then its actions on the
   next line), but the bar next-v7-work.js lays on the tab row is absolute at the one-line head's offset (top 91px), so it sat on
   the head's actions (Review, Release) and its filters on the tabs. In this range the bar sits in the page's flow instead, as it
   already does on a phone, just above the block it filters, with "How this works" at its right; the head's actions wrap rather
   than run off the page (Receive). 1440 and 390 are untouched. */
@media (min-width: 700px) and (max-width: 1099px) {
  #view .page > .v7w-bar.v7w-onrow { position: static !important; justify-content: flex-start; flex-wrap: wrap; row-gap: 8px; margin: 0 0 16px !important; }
  #view .page > .v7w-bar.v7w-onrow > .v7w-how { margin-left: auto; }
  #view .page[data-v7work] > :is(.phead, .v89-head) > :is(.acts, .v89-head-a) { flex-wrap: wrap; }
}