/* Veritura workspace, v6 (2026-10-25): THE SYSTEM, MEASURED FROM THE BEST.
   Joey, on Mercury's dashboard: "beautiful ... can we make our dashboards as a whole on every page on the same level". Round 2 measured
   Mercury's public demo, Linear, Attio, Vanta, Cloudscape, Geist and Stripe (app-ux/r2/a-craft) and audited every page of v5
   (app-ux/r2/c-audit). This layer, loaded last, puts every page on one system: Mercury's discipline in Veritura's identity.

   Type        Inter (variable, optical sizes): title 28/36 at 400, figures 20/28 and 32/40, section 16/24 at 500, body 14/20,
               meta 13/20, small 12/16. Nothing under 12px. (Mercury: 28/36, 19/28, 34/44, 15/24, 13/20, 12/20, in its own face.)
   Colour      four cool text greys, one hairline, one soft fill; the brand blue for the one primary; status keeps its traffic light.
   Surfaces    a page section is open (its heading, then its content on the page); a panel is boxed (radius 12, one hairline, no
               shadow) only on the home grid, in a side column and for a record's summary. Controls are radius 8; buttons are pills.
   Rhythm      4, 8, 12, 16, 24, 32, 48. Title block fixed, tabs 24 under it, content 24 under the tabs, sections 32 apart.
   Tables      sit on the page: a 36px header in meta grey, 52px rows, hairline dividers, the first column on the title edge, numbers
               right-aligned and tabular. */

:root {
  --v6-ink: #1e1e2a; --v6-ink-2: #363644; --v6-ink-3: #535461; --v6-ink-4: #70707d; --v6-ink-5: #a1a1ae;
  --v6-line: rgba(112, 115, 147, .14); --v6-line-2: rgba(112, 115, 147, .24);
  --v6-fill: rgba(112, 115, 147, .09); --v6-fill-2: rgba(112, 115, 147, .16);
  --v6-surface: #ffffff; --v6-page: #ffffff; --v6-nav: #fbfbfc;
  --v6-blue: #2457f5; --v6-blue-2: #1c48d8; --v6-blue-ink: #ffffff; --v6-link: #2457f5;
  --v6-green: #0a7a45; --v6-amber: #b54708; --v6-red: #b42318;
  --v6-r-panel: 12px; --v6-r-ctl: 8px;
  /* the kit's own tokens follow the system, so every older component that reads them moves with it */
  --t-title-size: 28px; --t-title-lh: 36px; --t-title-track: -0.02em;
  --t-num-size: 20px; --t-num-lh: 28px;
  --t-heading-size: 16px; --t-heading-lh: 24px;
  --t-body-size: 14px; --t-body-lh: 20px;
  --t-small-size: 13px; --t-small-lh: 20px;
  --t-label-size: 12px; --t-label-lh: 16px;
  --r-card: 12px; --r-lit: 12px;
  --k-lit-shadow: none;
  --primary-cta-hover: var(--v6-blue-2);
}
:root[data-theme="dark"] {
  --v6-ink: #ececf1; --v6-ink-2: #cfd0d9; --v6-ink-3: #a3a5b1; --v6-ink-4: #868896; --v6-ink-5: #5d5f6b;
  --v6-line: rgba(255, 255, 255, .08); --v6-line-2: rgba(255, 255, 255, .14);
  --v6-fill: rgba(255, 255, 255, .06); --v6-fill-2: rgba(255, 255, 255, .1);
  --v6-surface: #17181e; --v6-page: #111217; --v6-nav: #131419;
  --v6-blue: #4f7bff; --v6-blue-2: #6a8fff; --v6-link: #7d9bff;
  --v6-green: #4cc472; --v6-amber: #f0b54a; --v6-red: #ff8a90;
}

/* ---------- type: one face, one ramp ---------- */
.shell { font-family: "Inter V", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-optical-sizing: auto; color: var(--v6-ink); letter-spacing: normal; }
.shell .main, #view { background: var(--v6-page); }
#view { color: var(--v6-ink); font-size: 14px; line-height: 20px; }
#view .muted, #view .l2, #view td.muted, #view .sub, #view small { color: var(--v6-ink-4); }
#view .num, #view td.r, #view .r.num, #view [data-num] { font-variant-numeric: tabular-nums; }
#view .mono, #view .v89-id, #view .vk-id, #view code { font-size: 13px; letter-spacing: 0; }

/* ---------- the nav: quiet greys, one lit item ---------- */
.shell > .nav { background: var(--v6-nav); border-right: 1px solid var(--v6-line); }
.shell > .nav .navitems a[data-nav] { height: 32px !important; margin: 0 0 2px; padding: 0 10px; gap: 10px; border-radius: var(--v6-r-ctl); font-size: 14px; font-weight: 400; color: var(--v6-ink-3); }
.shell > .nav .navitems a[data-nav] svg.i { width: 17px; height: 17px; color: var(--v6-ink-4); }
.shell > .nav .navitems a[data-nav]:hover { background: var(--v6-fill); color: var(--v6-ink); }
.shell > .nav .navitems a[data-nav][aria-current] { background: var(--v6-fill-2); color: var(--v6-ink); font-weight: 500; }
.shell > .nav .navitems a[data-nav][aria-current] svg.i { color: var(--v6-ink-2); }
.shell > .nav .navitems a[data-nav] .count { font-size: 12px; font-weight: 500; color: var(--v6-ink-4); background: none; }
.shell > .nav .navitems a[data-nav] .count.hot { color: var(--v6-red); background: none; }
#nav .navgroup.v5-band + .navgroup.v5-band { margin-top: 16px; }
#nav .navgroup.v5-foot { border-top-color: var(--v6-line); }

/* ---------- the top bar ---------- */
.shell .main > header.top { border-bottom: 1px solid var(--v6-line); background: var(--v6-page); }
header.top .vk-crumb, header.top .vk-crumb b { font-size: 14px; font-weight: 500; color: var(--v6-ink); }
header.top .vk-crumb a, header.top .vk-crumb span, header.top .vk-crumb em { font-size: 14px; color: var(--v6-ink-4); font-weight: 400; }

/* ---------- the page: one column, one header, one rhythm ---------- */
#view .page { max-width: calc(1136px + 2 * var(--gutter, 32px)); padding-top: 24px; }
#view .page > .phead, #view .page > .v89-head, #view .page > header.v89-head { display: flex; align-items: flex-start; gap: 16px; min-height: 60px; margin: 0; padding: 0; border: 0; }
#view .page > :is(.phead, .v89-head) h1, #view .page > :is(.phead, .v89-head) .v89-titlerow h1 { margin: 0; font-size: 28px; line-height: 36px; font-weight: 400; letter-spacing: -0.02em; color: var(--v6-ink); }
#view .page > :is(.phead, .v89-head) :is(p, .v89-purpose) { margin: 4px 0 0; max-width: 760px; font-size: 14px; line-height: 20px; color: var(--v6-ink-3); }
#view .page > :is(.phead, .v89-head) .v89-purpose:not(.is-open) { display: block; -webkit-line-clamp: unset; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view .page > :is(.phead, .v89-head) > div:first-child { min-width: 0; flex: 1; }
#view .page > :is(.phead, .v89-head) :is(.acts, .v89-head-a) { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; flex: none; padding-top: 2px; }
/* the header's context (whose channel, which client) sits beside the title in quiet words, so the header stays two lines */
#view .page > :is(.phead, .v89-head) .v89-titlerow { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 12px; row-gap: 0; }
#view .page > :is(.phead, .v89-head) .vk-hsub { display: inline; margin: 0; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--v6-ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (max-width: 1199px) { #view .page > :is(.phead, .v89-head) { flex-wrap: wrap; } #view .page > :is(.phead, .v89-head) :is(.acts, .v89-head-a) { width: 100%; justify-content: flex-start; } }

/* the header tabs: flush with the title edge, 24 under the title block, 24 above the content */
#view .v5-tabs { margin: 24px 0 24px; gap: 24px; height: 40px; padding: 0; border-bottom: 1px solid var(--v6-line); background: var(--v6-page); }
#view .v5-tabs > a[role="tab"] { height: 40px; padding: 0; font-size: 14px; font-weight: 400; color: var(--v6-ink-3); border-radius: 0; }
#view .v5-tabs > a[role="tab"]:hover { color: var(--v6-ink); }
#view .v5-tabs > a[role="tab"][aria-selected="true"] { color: var(--v6-ink); font-weight: 500; }
#view .v5-tabs > a[role="tab"][aria-selected="true"]::after { left: 0; right: 0; height: 2px; background: var(--v6-ink); }
#view .v5-tabs .v5-n { font-size: 12px; }
#view .v5-moved { margin: -8px 0 24px; border-radius: var(--v6-r-ctl); background: var(--v6-fill); box-shadow: none; color: var(--v6-ink-3); }
/* a status line under the title (Review's "5 of your 17 lots wait") sits under the tabs, never as a third header line */
#view .page > :is(.phead, .v89-head) .v89-product { display: none; }

/* ---------- buttons: soft pills, one blue primary ---------- */
.shell .btn, #dialog .btn { height: 32px; padding: 0 14px; border: 0 !important; border-radius: 999px; background: var(--v6-fill) !important; color: var(--v6-ink-2) !important; box-shadow: none !important; font-size: 14px; font-weight: 400; gap: 6px; }
.shell .btn:hover, #dialog .btn:hover { background: var(--v6-fill-2) !important; color: var(--v6-ink) !important; }
.shell .btn svg.i, #dialog .btn svg.i { width: 15px; height: 15px; color: currentColor !important; }
.shell .btn.sm, #dialog .btn.sm { height: 28px; padding: 0 12px; font-size: 13px; }
.shell .btn.ghost, #dialog .btn.ghost { background: transparent !important; color: var(--v6-ink-3) !important; }
.shell .btn.ghost:hover, #dialog .btn.ghost:hover { background: var(--v6-fill) !important; }
.shell .btn.primary, #dialog .btn.primary, .shell .btn.primary:hover { background: var(--v6-blue) !important; border-color: var(--v6-blue) !important; color: var(--v6-blue-ink) !important; }
.shell .btn.primary:hover, #dialog .btn.primary:hover { background: var(--v6-blue-2) !important; }
.shell .btn[aria-disabled="true"], .shell .btn:disabled { opacity: .45; }
#view a.link, #view .link { color: var(--v6-link); font-weight: 400; }
#demoReadOwn { height: 32px !important; border-radius: 999px !important; background: var(--v6-fill) !important; box-shadow: none !important; color: var(--v6-ink-2) !important; font-size: 14px !important; font-weight: 400 !important; }
header.top :is(.r95ask, .v87vbtn) { height: 32px; border-radius: 999px; border: 0; background: var(--v6-fill); box-shadow: none; color: var(--v6-ink-2); font-size: 14px; font-weight: 400; }

/* ---------- fields ---------- */
#view :is(input[type="text"], input[type="search"], input[type="email"], input[type="date"], input:not([type]), select, textarea):not(.v89r-search input) { border-radius: var(--v6-r-ctl); border: 1px solid var(--v6-line-2); box-shadow: none; font-size: 14px; }
#view label.field, #view .field { border-radius: var(--v6-r-ctl); }

/* ---------- sections are open; panels are boxed only where they earn it ---------- */
#view .page .card { background: transparent; border: 0 !important; border-radius: 0; box-shadow: none !important; padding: 0; margin-bottom: 32px; overflow: visible; }
#view .page .card > .card-h { padding: 0 0 12px; min-height: 0; border: 0 !important; background: none; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
#view .page .card > .card-h h2, #view .page .card > .card-h h3 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: -0.01em; color: var(--v6-ink); }
#view .page .card > .card-h .sub, #view .page .card > .card-h .n { font-size: 13px; line-height: 20px; color: var(--v6-ink-4); font-weight: 400; }
#view .page .card > .card-b { padding: 0; }
#view .page .card + .card { margin-top: 0; }
/* a panel: the home grid, a side column, a record's summary */
#view :is(.v6-panel, aside.stack > .card, .vk-split-side > .card, .vk-split-side > section, .g-main > aside .card, .r92e-grid > aside .card),
#view .page .vk-lit { background: var(--v6-surface) !important; border: 1px solid var(--v6-line) !important; border-radius: var(--v6-r-panel) !important; box-shadow: none !important; padding: 20px 24px !important; margin-bottom: 24px; }
#view :is(aside.stack > .card, .vk-split-side > .card, .g-main > aside .card) > .card-h { padding: 0 0 12px; }
/* never a box in a box */
#view :is(.v6-panel, .vk-lit, aside .card) :is(.card, .vk-lit) { border: 0 !important; padding: 0 !important; background: none !important; border-radius: 0 !important; }
/* a card title never matches the page title */
#view .vk-lit-t, #view .vk-lit h3 { font-size: 16px !important; line-height: 24px !important; font-weight: 500 !important; }

/* ---------- tables sit on the page ---------- */
#view .tablewrap { border: 0; border-radius: 0; box-shadow: none; background: none; }
#view table th { height: 36px; padding: 8px 16px; font-size: 13px !important; line-height: 20px; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--v6-ink-4) !important; background: transparent !important; border-bottom: 1px solid var(--v6-line) !important; }
#view table td { padding: 15px 16px; font-size: 14px; line-height: 20px; border-bottom: 1px solid var(--v6-line) !important; vertical-align: middle; }
#view table :is(th, td):first-child { padding-left: 0; }
#view table :is(th, td):last-child { padding-right: 0; }
#view table td .l1, #view table td b { font-weight: 500; color: var(--v6-ink); }
#view table td :is(.l2, small, .muted) { font-size: 13px; color: var(--v6-ink-4); }
#view table tbody tr:hover td { background: transparent; }
#view table tbody tr[data-go]:hover td, #view table tbody tr[tabindex]:hover td { background: var(--v6-fill); }
#view table td.r, #view table th.r { text-align: right; }
#view .tfoot, #view .morebar { border: 0; background: none; padding: 12px 0; color: var(--v6-ink-4); }

/* ---------- figures: inline, open, label above the number (Mercury's "Net change this month") ---------- */
#view :is(.v89-strip, .vk-kpis, .qe-tiles, .v75kpis) { display: flex !important; flex-wrap: wrap; gap: 16px 48px !important; border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 32px !important; border-radius: 0 !important; overflow: visible; }
#view :is(.v89-strip, .vk-kpis, .qe-tiles, .v75kpis) > * { flex: none; min-width: 0; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; text-align: left; }
#view :is(.v89-strip, .vk-kpis, .v75kpis) > * + * { border-left: 0 !important; }
#view .qe-tiles > * { display: flex; flex-direction: column-reverse; }
#view :is(.v89-strip .lab, .vk-kpi-l, .v75k-l, .qe-tiles span) { font-size: 13px !important; line-height: 20px !important; font-weight: 400 !important; color: var(--v6-ink-3) !important; letter-spacing: 0 !important; text-transform: none !important; }
#view :is(.v89-strip .num, .vk-kpi-v, .v75k-v, .qe-tiles b) { font-size: 20px !important; line-height: 28px !important; font-weight: 400 !important; letter-spacing: -0.01em; color: var(--v6-ink); font-variant-numeric: tabular-nums; }
#view :is(.v89-strip .sub, .vk-kpi-s, .v75k-s) { font-size: 12px !important; line-height: 16px !important; color: var(--v6-ink-4) !important; }
#view .v89-strip > a.v89-cell:hover, #view .v89-strip > button.v89-cell:hover { background: none !important; }
#view .v89-strip > :is(a, button).v89-cell:hover .num { color: var(--v6-link); }

/* ---------- side columns: one geometry ---------- */
#view :is(.g-main, .vk-split, .r92e-grid, .smgrid, .v95p-two) { grid-template-columns: minmax(0, 1fr) 320px !important; gap: 32px !important; align-items: start; }
#view :is(.vk-split-side, .g-main > aside) { position: sticky; top: 16px; }
@media (max-width: 1099px) { #view :is(.g-main, .vk-split, .r92e-grid, .smgrid, .v95p-two) { grid-template-columns: minmax(0, 1fr) !important; } #view :is(.vk-split-side, .g-main > aside) { position: static; } }

/* ---------- the v5 kit on the system ---------- */
#view .v5-sec { margin: 32px 0 12px; }
#view .v5-sec h2 { font-size: 16px; line-height: 24px; font-weight: 500; }
#view .v5-box { border-color: var(--v6-line); border-radius: var(--v6-r-panel); }
#view .v5-row { align-items: flex-start; border-top-color: var(--v6-line); }
#view .v5-row > .v5-si { margin-top: 2px; }
#view .v5-rb b { font-size: 14px; font-weight: 500; color: var(--v6-ink); }
#view .v5-rb small { font-size: 13px; line-height: 20px; color: var(--v6-ink-4); }
#view .v5-cl { color: var(--v6-ink-3); }
#view .v5-cv { font-weight: 400; }
#view .v5-cato-top { border-color: var(--v6-line); }

/* ---------- the home grid (next-v5-today.js) ---------- */
#view .v6-hello h1 { font-size: 28px; line-height: 36px; font-weight: 400; letter-spacing: -0.02em; margin: 0; }
#view .v6-hello p { margin: 4px 0 0; color: var(--v6-ink-3); font-size: 14px; line-height: 20px; }
#view .v6-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 32px; }
#view .v6-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; margin-bottom: 24px; align-items: stretch; }
#view .v6-grid > .v6-panel { margin: 0; display: flex; flex-direction: column; min-width: 0; }
#view .v6-s4 { grid-column: span 4; } #view .v6-s5 { grid-column: span 5; } #view .v6-s6 { grid-column: span 6; } #view .v6-s7 { grid-column: span 7; } #view .v6-s8 { grid-column: span 8; } #view .v6-s12 { grid-column: span 12; }
#view .v6-ph { display: flex; align-items: center; gap: 8px; min-height: 28px; margin-bottom: 12px; }
#view .v6-ph h2 { margin: 0; font-size: 15px; line-height: 24px; font-weight: 500; color: var(--v6-ink); letter-spacing: -0.005em; }
#view .v6-ph .v6-c { font-size: 13px; color: var(--v6-ink-4); font-variant-numeric: tabular-nums; }
#view .v6-ph .v6-sp { flex: 1; }
#view .v6-ph a { font-size: 13px; color: var(--v6-ink-3); text-decoration: none; }
#view .v6-ph a:hover { color: var(--v6-ink); }
#view .v6-fig { font-size: 32px; line-height: 40px; font-weight: 400; letter-spacing: -0.02em; color: var(--v6-ink); font-variant-numeric: tabular-nums; }
#view .v6-fig small { font-size: 15px; color: var(--v6-ink-4); letter-spacing: 0; margin-left: 6px; }
#view .v6-fig[data-tone="critical"] { color: var(--v6-red); }
#view .v6-fig[data-tone="attention"] { color: var(--v6-amber); }
#view .v6-figline { margin-top: 2px; font-size: 13px; line-height: 20px; color: var(--v6-ink-3); }
#view .v6-figs { display: flex; gap: 32px; margin-top: 16px; }
#view .v6-figs > div { display: flex; flex-direction: column; }
#view .v6-figs span { font-size: 13px; line-height: 20px; color: var(--v6-ink-3); }
#view .v6-figs b { font-size: 20px; line-height: 28px; font-weight: 400; color: var(--v6-ink); font-variant-numeric: tabular-nums; }
#view .v6-pf { margin-top: auto; padding-top: 16px; }
#view .v6-pf a { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--v6-link); text-decoration: none; }
#view .v6-pf a svg.i { width: 14px; height: 14px; }
#view .v6-list { margin: 0 -24px; }
#view .v6-li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 24px; border-top: 1px solid var(--v6-line); color: inherit; text-decoration: none; }
#view .v6-li:first-child { border-top: 0; }
#view a.v6-li:hover { background: var(--v6-fill); }
#view .v6-li .v5-si { margin-top: 2px; }
#view .v6-li b { display: block; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--v6-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view .v6-li small { display: block; font-size: 13px; line-height: 20px; color: var(--v6-ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view .v6-li .v6-when { font-size: 13px; line-height: 20px; color: var(--v6-ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
#view .v6-li .v6-when[data-tone="critical"] { color: var(--v6-red); }
#view .v6-li .v6-go { font-size: 13px; line-height: 20px; color: var(--v6-link); white-space: nowrap; }
#view .v6-li.v6-dated { grid-template-columns: 56px minmax(0, 1fr) auto; }
#view .v6-li .v6-date { font-size: 13px; line-height: 20px; color: var(--v6-ink-3); font-variant-numeric: tabular-nums; }
#view .v6-li .v6-date.late { color: var(--v6-red); }
#view .v6-more { display: block; width: calc(100% + 48px); margin: 0 -24px; padding: 12px 24px 0; border: 0; border-top: 1px solid var(--v6-line); background: none; text-align: left; font: inherit; font-size: 14px; color: var(--v6-link); cursor: pointer; }
#view .v6-bar { display: flex; gap: 2px; height: 6px; margin-top: 16px; border-radius: 3px; overflow: hidden; background: var(--v6-fill); }
#view .v6-bar i { display: block; height: 100%; }
#view .v6-bar i[data-tone="positive"] { background: #17b26a; } #view .v6-bar i[data-tone="positive2"] { background: #6ccf9e; }
#view .v6-bar i[data-tone="neutral"] { background: var(--v6-ink-5); } #view .v6-bar i[data-tone="attention"] { background: #f79009; } #view .v6-bar i[data-tone="critical"] { background: #f04438; }
#view .v6-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: 13px; line-height: 20px; color: var(--v6-ink-3); }
#view .v6-legend span { display: inline-flex; align-items: center; gap: 6px; }
#view .v6-legend i { width: 8px; height: 8px; border-radius: 2px; }
#view .v6-chart { display: block; width: 100%; height: 132px; margin-top: 16px; overflow: visible; }
#view .v6-chart .ln { fill: none; stroke: var(--v6-blue); stroke-width: 1.75; }
#view .v6-chart .ar { fill: url(#v6grad); }
#view .v6-chart text { font-size: 12px; fill: var(--v6-ink-4); font-family: inherit; }
#view .v6-chart .gl { stroke: var(--v6-line); }
#view .v6-tabs { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--v6-fill); }
#view .v6-tabs button { height: 26px; padding: 0 10px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 13px; color: var(--v6-ink-3); cursor: pointer; }
#view .v6-tabs button[aria-pressed="true"] { background: var(--v6-surface); color: var(--v6-ink); box-shadow: 0 0 0 1px var(--v6-line), 0 1px 2px rgba(16, 24, 40, .06); }
#view .v6-agent { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--v6-line); }
#view .v6-agent:first-of-type { border-top: 0; padding-top: 0; }
#view .v6-agent .v5-av { width: 28px; height: 28px; border-radius: 8px; font-size: 12px; box-shadow: none; display: grid; place-items: center; color: #fff; font-weight: 600; }
#view .v6-agent p { margin: 0; font-size: 14px; line-height: 20px; color: var(--v6-ink-2); }
#view .v6-agent p b { font-weight: 500; color: var(--v6-ink); }
#view .v6-agent small { display: block; margin-top: 2px; font-size: 13px; color: var(--v6-ink-4); }
#view .v6-empty { padding: 8px 0; font-size: 14px; color: var(--v6-ink-3); }
@media (max-width: 1099px) { #view .v6-grid > .v6-panel { grid-column: span 12; } }
@media (max-width: 699px) {
  #view .v6-grid { gap: 16px; }
  #view .v6-panel { padding: 16px !important; }
  #view .v6-list { margin: 0 -16px; } #view .v6-li { padding: 12px 16px; } #view .v6-more { width: calc(100% + 32px); margin: 0 -16px; padding: 12px 16px 0; }
  #view .v6-quick .btn { min-height: 40px; }
  #view .v6-fig { font-size: 28px; line-height: 36px; }
}
#view a.v6-figlink, #view .v6-figs a { color: inherit; text-decoration: none; }
#view .v6-figs a { display: flex; flex-direction: column; }
#view a.v6-figlink:hover .v6-fig, #view .v6-figs a:hover b { color: var(--v6-link); }
#view .v6-acts { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
#view .v6-home .v5-figs { margin-top: 8px; }
#view .v6-home > .v5-line { margin: 0 0 12px; }
#view .v6-grid > .v6-panel { margin: 0 !important; }
#view .v6-grid { margin-bottom: 32px; }
#view .v6-ph h2 { white-space: nowrap; }
#view .v6-tabs { flex: none; }
#view .v6-tabs button { white-space: nowrap; }
#view .v6-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--v6-ink-4); font-variant-numeric: tabular-nums; }
#view .v6-chart { height: 120px; }
#view .v6-figbtn { display: flex; flex-direction: column; align-items: flex-start; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
#view .v6-figbtn span { font-size: 13px; line-height: 20px; color: var(--v6-ink-3); }
#view .v6-figbtn b { font-size: 20px; line-height: 28px; font-weight: 400; color: var(--v6-ink); font-variant-numeric: tabular-nums; }
#view .v6-figbtn:hover b { color: var(--v6-link); }
#view .v6-agents .v6-agent:first-child { border-top: 0; padding-top: 0; }
#view .v6-agent { border-top: 1px solid var(--v6-line); padding: 12px 0; }
#view .v6-memo { margin: 12px 0 0; font-size: 14px; line-height: 20px; color: var(--v6-ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#view .v6-li .v5-st { justify-self: end; }

/* =====================================================================================================================
   v6 round 2: the top bar (Mercury's: one search at the left, a few quiet icons and the person's picture at the right),
   the people's pictures, and panels made of a figure and label/value lines instead of small sentences.
   ===================================================================================================================== */
@media (min-width: 700px) {
  .shell .main > header.top { height: 56px; gap: 4px; padding: 0 20px 0 16px; }
  header.top > #navToggle { order: 0; }
  header.top > #topSearch { order: 1; display: inline-flex !important; align-items: center; gap: 8px; width: 340px; max-width: 34vw; height: 36px; margin-left: 8px; padding: 0 10px 0 12px; border: 0; border-radius: var(--v6-r-ctl); background: var(--v6-fill); color: var(--v6-ink-4); font: inherit; font-size: 14px; cursor: text; box-shadow: none; }
  header.top > #topSearch svg.i { width: 16px; height: 16px; color: var(--v6-ink-4); }
  header.top > #topSearch span { flex: 1; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  header.top > #topSearch kbd { font: 500 12px/1 inherit; color: var(--v6-ink-4); background: none; border: 0; box-shadow: none; padding: 0; }
  header.top > #topSearch:hover { background: var(--v6-fill-2); }
  header.top > .sp { order: 2; flex: 1; }
  header.top > .v89-status { order: 3; }
  header.top > .v87vbtn { order: 4; }
  header.top > #r95ask { order: 5; }
  header.top > .v95-bell { order: 6; }
  header.top > .me { order: 7; }
  header.top > :is(.vk-crumb, #crumb, .topsep, #demoReadOwn, .wsel, .v73pill) { display: none !important; }
  .shell > .nav #navSearch { display: none !important; }
  /* the sync state: a dot, its words in the tooltip */
  header.top > .v89-status { display: inline-grid !important; place-items: center; width: 32px; height: 32px; padding: 0; margin: 0; border: 0; background: none; font-size: 0 !important; color: transparent; border-radius: 999px; cursor: default; }
  header.top > .v89-status::before { content: "" !important; display: block !important; width: 8px; height: 8px; border-radius: 50%; background: #17b26a; box-shadow: 0 0 0 3px rgba(23, 178, 106, .16); }
  header.top > .v89-status:not(.fresh)::before { background: #f79009; box-shadow: 0 0 0 3px rgba(247, 144, 9, .16); }
  header.top > .v89-status:hover { background: var(--v6-fill); }
  /* Ask Vera: a text button, like Mercury's "Move money" */
  header.top > .v87vbtn { height: 32px !important; padding: 0 10px !important; background: none !important; color: var(--v6-ink-2) !important; font-size: 14px !important; gap: 8px; }
  header.top > .v87vbtn:hover { background: var(--v6-fill) !important; }
  header.top > .v87vbtn .vv-av { width: 20px; height: 20px; border-radius: 6px; font-size: 12px; display: inline-grid; place-items: center; background: #4f46e5; color: #fff; }
  /* ask a person and the inbox: quiet icons */
  header.top > #r95ask { display: inline-grid !important; place-items: center; width: 32px; height: 32px; padding: 0 !important; border: 0 !important; border-radius: 999px; background: none !important; box-shadow: none !important; color: var(--v6-ink-3) !important; }
  header.top > #r95ask span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  header.top > #r95ask svg.i { width: 18px; height: 18px; }
  header.top > #r95ask:hover { background: var(--v6-fill) !important; color: var(--v6-ink) !important; }
  header.top .v95-bell-b { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--v6-ink-3); box-shadow: none; }
  header.top .v95-bell-b:hover { background: var(--v6-fill); color: var(--v6-ink); }
  header.top .v95-bell-b svg.i { width: 18px; height: 18px; }
  header.top .v95-bell-b .n { position: absolute; top: 3px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--v6-blue); color: #fff; font-size: 12px; font-weight: 600; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--v6-page); }
  /* the person: their picture only; the name and role in its tooltip */
  header.top > .me { display: inline-flex; align-items: center; gap: 0; height: 36px; padding: 0 2px; margin-left: 6px; border-radius: 999px; cursor: pointer; }
  header.top > .me > div:not(.avatar) { display: none !important; }
  header.top > .me .avatar { width: 32px; height: 32px; padding: 0; border: 0; background: none !important; box-shadow: none; display: grid; place-items: center; overflow: visible; }
}
/* a person's picture */
.v6-pic { display: inline-grid; place-items: center; flex: none; border-radius: 50%; overflow: hidden; vertical-align: middle; }
.v6-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v6-pic-role svg { display: block; }
:root[data-theme="dark"] .v6-pic-role { filter: saturate(.85) brightness(.92); }
/* Settings: your picture */
#view .v6-profile { margin-bottom: 32px; }
#view .v6-prof { display: flex; align-items: center; gap: 16px; }
#view .v6-prof-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#view .v6-prof-t b { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--v6-ink); }
#view .v6-prof-t span { font-size: 14px; line-height: 20px; color: var(--v6-ink-3); }
#view .v6-prof-a { display: flex; gap: 8px; align-items: center; }
#view .v6-prof-a label.btn { cursor: pointer; }
#view .v6-prof-note { font-size: 13px; color: var(--v6-ink-4); max-width: 260px; text-align: right; }
#view .v6-prof-help { margin: 16px 0 0; font-size: 13px; line-height: 20px; color: var(--v6-ink-4); }
#view .v6-prof-err { margin: 8px 0 0; font-size: 13px; color: var(--v6-red); }
/* panels: a figure, then label/value lines (Mercury's Accounts list): no rules between them, a 32px pitch */
#view .v6-kv { list-style: none; margin: 12px 0 0; padding: 0; }
#view .v6-kv li > :is(a, div) { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; color: inherit; text-decoration: none; border-radius: 6px; }
#view .v6-kv span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; line-height: 20px; color: var(--v6-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view .v6-kv span i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
#view .v6-kv b { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--v6-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
#view .v6-kv b[data-tone="critical"] { color: var(--v6-red); }
#view .v6-kv b[data-tone="attention"] { color: var(--v6-amber); }
#view .v6-kv a:hover b, #view .v6-kv a:hover span { color: var(--v6-link); }
#view .v6-fig + .v6-kv { margin-top: 12px; }
#view .v6-bar + .v6-kv { margin-top: 12px; }
/* Mercury's Bill Pay columns: a label over its value */
#view .v6-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 4px; }
#view .v6-cols > div { display: flex; flex-direction: column; min-width: 0; }
#view .v6-cols span { font-size: 13px; line-height: 20px; color: var(--v6-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view .v6-cols b { font-size: 20px; line-height: 28px; font-weight: 400; color: var(--v6-ink); font-variant-numeric: tabular-nums; }
#view .v6-cols + .v6-kv { margin-top: 16px; padding-top: 8px; border-top: 1px solid var(--v6-line); }
/* the chain: five stages, a label over its count and a meter of the purchased lots */
#view .v6-stages { display: flex; align-items: flex-start; gap: 4px; margin-top: 4px; }
#view .v6-stage { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 8px 8px 8px 0; color: inherit; text-decoration: none; }
#view .v6-stage span { font-size: 13px; line-height: 20px; color: var(--v6-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view .v6-stage b { font-size: 20px; line-height: 28px; font-weight: 400; color: var(--v6-ink); font-variant-numeric: tabular-nums; }
#view .v6-stage .v6-meter { display: block; height: 4px; margin-top: 8px; border-radius: 2px; background: var(--v6-fill); overflow: hidden; }
#view .v6-stage .v6-meter i { display: block; height: 100%; border-radius: 2px; background: var(--v6-blue); }
#view .v6-stage.wait b { color: var(--v6-amber); }
#view .v6-stage.wait .v6-meter i { background: #f79009; }
#view .v6-stage em { margin-top: 8px; font-style: normal; font-size: 13px; line-height: 20px; color: var(--v6-amber); white-space: nowrap; }
#view .v6-stage:hover b { color: var(--v6-link); }
#view .v6-arrow { flex: none; padding-top: 30px; color: var(--v6-ink-5); }
#view .v6-arrow svg.i { width: 14px; height: 14px; }
/* Lately: Mercury's recent transactions */
#view .v6-lately .v6-table { width: calc(100% + 48px); margin: -4px -24px -8px; border-collapse: collapse; }
#view .v6-table th { height: 36px; padding: 8px 24px !important; text-align: left; }
#view .v6-table td { padding: 12px 24px !important; }
#view .v6-table tbody tr:last-child td { border-bottom: 0 !important; }
#view .v6-table tbody tr { cursor: pointer; }
#view .v6-table tbody tr:hover td { background: var(--v6-fill); }
#view .v6-table .v6-td-d { width: 120px; color: var(--v6-ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
#view .v6-table .v6-td-r { color: var(--v6-ink-3); }
#view .v6-ev { display: inline-flex; align-items: center; gap: 12px; color: var(--v6-ink); text-decoration: none; font-weight: 500; }
#view .v6-evi { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--v6-fill); color: var(--v6-ink-3); flex: none; }
#view .v6-evi svg.i { width: 14px; height: 14px; }
#view .v6-evi[data-tone="critical"] { background: rgba(240, 68, 56, .1); color: var(--v6-red); }
/* the agents: who they are, then their lines */
#view .v6-who { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; color: inherit; text-decoration: none; }
#view .v6-who > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
#view .v6-who b { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--v6-ink); }
#view .v6-who small { font-size: 13px; line-height: 20px; color: var(--v6-ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view .v6-who svg.i { width: 14px; height: 14px; color: var(--v6-ink-5); }
#view .v6-who:hover b { color: var(--v6-link); }
#view .v6-agent { display: block; }
#view .v6-agent .v6-kv { margin: 8px 0 0 40px; }
#view .v6-agents .v6-agent + .v6-agent { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--v6-line); }
/* Needs you's foot: View all at the left, the morning email at the right */
#view .v6-pf-row { display: flex; align-items: center; gap: 12px; flex: 1; margin: 0 -24px; padding: 12px 24px 0; border-top: 1px solid var(--v6-line); }
#view .v6-needs .v6-pf { padding-top: 0; }
#view .v6-pf-row .link { padding: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--v6-link); cursor: pointer; }
#view .v6-note { font-size: 13px; line-height: 20px; color: var(--v6-ink-4); }
#view .v6-note a, #view .v6-note .link { font-size: 13px !important; color: var(--v6-ink-3) !important; text-decoration: none; }
#view .v6-note a:hover, #view .v6-note .link:hover { color: var(--v6-link) !important; }
#view .v6-quick .v6-sp { flex: 1; }
#view .v6-pf { display: flex; align-items: center; gap: 16px; }
#view .v6-pf .btn { margin-right: auto; }
#view .v6-pf .btn + a { margin-left: 0; }
@media (max-width: 699px) {
  #view .v6-stages { flex-wrap: wrap; } #view .v6-arrow { display: none; } #view .v6-stage { flex: 1 1 30%; }
  #view .v6-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view .v6-lately .v6-table { width: calc(100% + 32px); margin: -4px -16px -8px; }
  #view .v6-table th, #view .v6-table td { padding-left: 16px !important; padding-right: 16px !important; }
  #view .v6-table .v6-td-r { display: none; } #view .v6-table th:nth-child(3) { display: none; }
  #view .v6-pf-row { margin: 0 -16px; padding: 12px 16px 0; }
  #view .v6-agent .v6-kv { margin-left: 0; }
}
@media (min-width: 700px) { header.top > .v89-status { display: inline-flex !important; align-items: center; justify-content: center; align-self: center; line-height: 0; } }
/* a row's own actions read as links, like every other row's */
#view .v6-li .v6-acts { gap: 12px; }
#view .v6-li .v6-acts .btn { height: auto !important; min-height: 0; padding: 0 !important; background: none !important; font-size: 13px !important; line-height: 20px; color: var(--v6-link) !important; }
#view .v6-li .v6-acts .btn.ghost { color: var(--v6-ink-3) !important; }
#view .v6-li .v6-acts .btn:hover { background: none !important; text-decoration: underline; }
#view .v6-li .v6-acts .btn svg.i { display: none; }
@media (max-width: 699px) {
  #view .v6-quick [data-demo-read] { display: none; }   /* the phone has the strip under the header */
  #view .v6-ph { flex-wrap: wrap; }
  #view .v6-ph .v6-tabs { order: 9; flex: 1 1 100%; justify-content: space-between; }
  #view .v6-ph .v6-tabs button { flex: 1; padding: 0 6px; }
}
/* Mercury's search: an icon and words on the bar itself, a fill only on hover */
@media (min-width: 700px) {
  header.top > #topSearch { background: transparent !important; padding-left: 8px; margin-left: 4px; }
  header.top > #topSearch:hover { background: var(--v6-fill) !important; }
  header.top > #topSearch span { color: var(--v6-ink-3); }
  header.top > #topSearch kbd { opacity: 0; transition: opacity .12s; }
  header.top > #topSearch:hover kbd, header.top > #topSearch:focus-visible kbd { opacity: 1; }
}
/* the one-line purpose never widens its header: the header's columns may shrink below the line, and on a phone it wraps */
#view .page > :is(.phead, .v89-head) > div, #view .page > :is(.phead, .v89-head) .v89-titlerow, #view .page > :is(.phead, .v89-head) .v5-head-t { min-width: 0; max-width: 100%; }
#view .page > :is(.phead, .v89-head) .v89-purpose { max-width: min(760px, 100%); }
@media (max-width: 699px) { #view .page > :is(.phead, .v89-head) .v89-purpose:not(.is-open) { white-space: normal; } }