/* =====================================================================
   CLEAN — the agent workspace shell, from Figma "Portal: Clean v1".
   A navy top bar with every app in three groups, a white left rail with
   the current app's own sections, and pages drawn as a title, a hairline
   and rows instead of boxes inside boxes. Loaded last; it only restyles.
   Everything sits under body.clean-on, which the agent renderers set, so
   the client and partner portals keep their own look. The calculators
   (.tools-app), Home Search's map and Sign are left as they were.
   The phone shell (assets/agent-phone.css) owns the layout under 701px; the
   last block here only carries the look across to it.
   ===================================================================== */

/* ---- tokens: variable collection "Portal clean tokens", mode Light ---- */
body.clean-on .money-app:not(.tools-app):not(.sg-app):not([data-theme="dark"]) {
  --m-bg: #ffffff; --m-surface: #ffffff; --m-surface-2: #f7f9fb; --m-line: #e7ebef; --m-line-soft: #f1f4f7;
  --m-ink: #1d2733; --m-muted: #46525e; --m-faint: #7a8794;
  --m-accent: var(--brand, #1d2733); --m-accent-ink: var(--brand-ink, #0d131b); --m-accent-soft: var(--brand-soft, #eef1f5);
  --m-pos: #2e7d5b; --m-pos-soft: #e4f2ec; --m-neg: #c24b3f; --m-neg-soft: #f9e9e7; --m-warn: #b8813a; --m-warn-soft: #f7efe2;
  --m-shadow: none;
}

@media (min-width: 701px) {
  /* ---- the top bar ---- */
  .ag-bar.ag-clean { background: var(--brand, #1d2733); border-bottom-color: var(--brand, #1d2733); gap: 2px; padding: 0 22px; }
  .ag-clean .ag-brand { padding-right: 18px; }
  .ag-clean .ag-brand b { color: #fff; font-size: 15px; font-weight: 600; }
  .ag-clean .ag-brand .tp-brand-mark { background: #fff; color: var(--brand, #1d2733); width: 22px; height: 16px; border-radius: 5px; font-size: 10px; }
  .ag-clean .ag-tabs { gap: 1px; }
  .ag-clean .ag-tab { color: #93a1b0; font-size: 13px; font-weight: 500; padding: 6px 10px; border-radius: 7px; }
  .ag-clean .ag-tab:hover { background: rgba(255, 255, 255, .07); color: #fff; }
  .ag-clean .ag-tab.active { background: rgba(255, 255, 255, .13); color: #fff; font-weight: 600; }
  .ag-clean .ag-tab .tp-count { background: transparent; border: 0; color: #93a1b0; font-size: 10.5px; font-weight: 500; padding: 0; min-width: 0; height: auto; margin-left: 5px; }
  .ag-clean .ag-tab.active .tp-count { color: #c9d2dc; }
  .ag-clean .ag-div { width: 1px; height: 18px; background: rgba(255, 255, 255, .14); margin: 0 10px; flex-shrink: 0; }
  .ag-clean .ag-right a { color: #93a1b0; }
  .ag-clean .ag-right a:hover { color: #fff; }
  .ag-clean .ag-avatar { background: rgba(255, 255, 255, .13); border-color: transparent; color: #fff; }
  /* Twenty apps do not fit a laptop's width at full padding: People was cut
     off at 1440. Log out also lives in the avatar menu, so it goes first. */
  @media (max-width: 1560px) { .ag-clean .ag-tab { padding: 6px 8px; } .ag-clean .ag-div { margin: 0 6px; } .ag-clean .ag-logout { display: none; } }
  @media (max-width: 1280px) { .ag-clean .ag-tab { padding: 6px 6px; font-size: 12.5px; } .ag-clean .ag-div { margin: 0 4px; } .ag-clean .ag-brand b { display: none; } }
  @media (max-width: 1140px) { .ag-clean .ag-tab { padding: 6px 5px; font-size: 12px; } .ag-clean .ag-div { margin: 0 3px; } }
  /* What still does not fit goes under "More" (agFitTabs in app.js). */
  .ag-clean .ag-cut { display: none !important; }
  .ag-clean .ag-over { position: relative; flex-shrink: 0; }
  .ag-clean .ag-overbtn { background: none; border: 0; cursor: pointer; font-family: inherit; }
  .ag-clean .ag-over.open .ag-overbtn { background: rgba(255, 255, 255, .13); color: #fff; }
  .ag-clean .ag-overmenu { display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 190px; padding: 6px; background: #fff; border: 1px solid #e7ebef; border-radius: 10px; box-shadow: 0 12px 32px rgba(13, 19, 27, .18); }
  .ag-clean .ag-over.open .ag-overmenu { display: block; }
  .ag-clean .ag-overitem { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 7px; font-size: 13px; color: #1d2733; white-space: nowrap; text-decoration: none; }
  .ag-clean .ag-overitem:hover, .ag-clean .ag-overitem:focus-visible { background: #f1f4f7; outline: none; }
  .ag-clean[data-theme="dark"] .ag-overmenu { background: #151b23; border-color: #27303a; }
  .ag-clean[data-theme="dark"] .ag-overitem { color: #e9edf2; }
  .ag-clean[data-theme="dark"] .ag-overitem:hover, .ag-clean[data-theme="dark"] .ag-overitem:focus-visible { background: #1c232c; }

  /* ---- the left rail: text only, the active section on a navy pill ---- */
  /* Only an app that draws a rail gets the rail column (the Brief, People and Perks have none). */
  body.clean-on .money-app:not(.tools-app):not(.sg-app):has(> .m-side) { grid-template-columns: 228px minmax(0, 1fr); }
}
/* Desktop only from here to the Home Search block: phones keep their own spacing. */
@media (min-width: 701px) {
body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-side { padding: 22px 14px 16px; gap: 1px; border-right-color: var(--m-line); }
body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-brand { padding: 2px 10px 14px; }
body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-brand .m-mark { display: none; }
body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-brand-name { font-size: 16px; font-weight: 600; }
body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-navlabel { font-size: 9.5px; letter-spacing: .12em; padding: 20px 10px 6px; color: var(--m-faint); }
body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-nav { padding: 8px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 400; color: var(--m-muted); gap: 8px; }
body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-side .m-nav > svg.i:first-child { display: none; }
body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-nav:hover { background: var(--m-surface-2); }
body.clean-on .money-app:not(.tools-app):not(.sg-app):not([data-theme="dark"]) .m-nav.active { background: var(--brand, #1d2733); color: #fff; font-weight: 600; }
body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-nav .m-count,
body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-nav .pl-count { margin-left: auto; background: transparent; color: var(--m-faint); font-size: 11.5px; font-weight: 400; padding: 0; min-width: 0; }
body.clean-on .money-app:not(.tools-app):not(.sg-app):not([data-theme="dark"]) .m-nav.active .m-count,
body.clean-on .money-app:not(.tools-app):not(.sg-app):not([data-theme="dark"]) .m-nav.active .pl-count { color: #c9d2dc; }

/* ---- the page: eyebrow, title, one line, then sections ---- */
body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-main { padding: 40px 44px 80px; gap: 28px; }
body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-eyebrow { font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--m-faint); }
body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-title { font-size: 27px; font-weight: 600; letter-spacing: -.01em; }

/* KPI figures sit on the page between two hairlines, not in boxes. */
body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-tiles { gap: 0; border-top: 1px solid var(--m-line); border-bottom: 1px solid var(--m-line); padding: 22px 0; }
body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-tile { background: transparent; border: 0; border-radius: 0; padding: 0 24px 0 0; }
body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-tile .lbl { font-size: 9.5px; letter-spacing: .12em; }
body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-tile .val { font-size: 25px; font-weight: 600; margin-top: 10px; }
body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-tile .sub { font-size: 11.5px; color: var(--m-faint); margin-top: 6px; }

/* No card in a card: a section is a title, a hairline and rows. */
body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-main .m-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; overflow: visible; }
body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-main .m-card-head { padding: 0 0 12px; margin-bottom: 0; border-bottom: 1px solid var(--m-line); }
body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-main .m-card.flush .m-card-head { padding: 0 0 12px; }
body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-main .m-card:not(.flush) > .m-card-head { margin-bottom: 14px; }
body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-card-title { font-size: 14.5px; font-weight: 600; }
/* A form stays a quiet panel so its fields read as one thing. */
body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-main form.m-card { background: var(--m-surface-2); border-radius: 12px; padding: 20px 22px; }
/* Modals and menus keep their surface. */
body.clean-on .money-app .m-modal .m-card, body.clean-on .money-app .m-modal { box-shadow: 0 12px 40px rgba(29, 39, 51, .18); }

/* buttons: one navy primary, the rest hairline */
body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-btn { border-radius: 8px; }


  /* The older Money and Books screens (fin.js) draw with .card and .fin-tile
     rather than the kit's .m-card and .m-tile. Same treatment. */
  body.clean-on .money-app .m-main .card { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
  body.clean-on .money-app .m-main .card + .card, body.clean-on .money-app .m-main .fin-tiles + .card { margin-top: 28px; }
  body.clean-on .money-app .m-main .card > .card-title { display: block; font-size: 14.5px; font-weight: 600; padding-bottom: 12px; border-bottom: 1px solid var(--m-line); margin-bottom: 14px; }
  body.clean-on .money-app .m-main .card > .card-title:has(+ .card-sub) { border-bottom: 0; padding-bottom: 0; margin-bottom: 2px; }
  body.clean-on .money-app .m-main .card > .card-sub { padding-bottom: 12px; border-bottom: 1px solid var(--m-line); margin-bottom: 14px; }
  body.clean-on .money-app .m-main .card.fin-form, body.clean-on .money-app .m-main .card.fin-empty { background: var(--m-surface-2); border-radius: 12px; padding: 20px 22px; }
  body.clean-on .money-app .m-main .fin-tiles { gap: 0; row-gap: 22px; border-top: 1px solid var(--m-line); border-bottom: 1px solid var(--m-line); padding: 22px 0; margin-bottom: 0; }
  body.clean-on .money-app .m-main .fin-tile { background: transparent; border: 0; border-radius: 0; padding: 0 24px 0 0; }
  body.clean-on .money-app .m-main .fin-tile .lbl { font-size: 9.5px; letter-spacing: .12em; }
  body.clean-on .money-app .m-main .fin-tile .val { font-size: 25px; font-weight: 600; margin-top: 10px; }
  /* a wrapped row of figures keeps its air */
  body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-tiles { row-gap: 22px; }
  /* the rail: a quiet scrollbar, and the search box on one line */
  body.clean-on .money-app .m-side { scrollbar-width: thin; scrollbar-color: var(--m-line) transparent; }
  body.clean-on .money-app .m-side .m-search { margin: 0 0 10px; }
  body.clean-on .money-app .m-side .m-search span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.clean-on .money-app .m-side .m-search .m-kbd { flex: none; }
  body.clean-on .money-app .m-tabs { scrollbar-width: none; }
  body.clean-on .money-app .m-tabs::-webkit-scrollbar { display: none; }
  /* a native file picker that matches the buttons beside it */
  body.clean-on .money-app input[type="file"]::file-selector-button { font: inherit; font-size: 12.5px; font-weight: 500; padding: 7px 12px; margin-right: 10px; border: 1px solid var(--m-line); border-radius: 8px; background: var(--m-surface); color: var(--m-ink); cursor: pointer; }
}

/* ---- Home Search: the tab strip becomes the left rail; the search and the
   map inside it are untouched ---- */
@media (min-width: 701px) {
  body.clean-on .money-app.sr-nav { position: fixed; top: 56px; left: 0; bottom: 0; width: 228px; z-index: 6; padding: 22px 14px 16px; border-bottom: 0; border-right: 1px solid var(--m-line); overflow-y: auto; }
  body.clean-on .sr-nav .m-tabs { flex-direction: column; align-items: stretch; gap: 1px; overflow: visible; }
  body.clean-on .sr-nav .m-tabs::before { content: "Home Search"; font-size: 16px; font-weight: 600; color: var(--m-ink); padding: 2px 10px 14px; }
  body.clean-on .sr-nav a.m-tab { padding: 8px 10px; border: 0; border-radius: 8px; font-size: 13.5px; font-weight: 400; color: var(--m-muted); margin: 0; }
  body.clean-on .sr-nav a.m-tab svg.i { display: none; }
  body.clean-on .sr-nav a.m-tab:hover { background: var(--m-surface-2); }
  body.clean-on .sr-nav:not([data-theme="dark"]) a.m-tab.active { background: var(--brand, #1d2733); color: #fff; font-weight: 600; }
  body.clean-on .sr-nav .sr-navcount { margin-left: auto; background: transparent; color: var(--m-warn); font-size: 11.5px; font-weight: 500; padding: 0; }
  body.clean-on .sr-nav .sr-nav-grow { flex: 1; min-height: 20px; }
  body.clean-on .sr-nav .sr-samplepill { align-self: flex-start; margin: 14px 10px 0; }
  body.clean-on .site-search-slot, body.clean-on .money-app.sr-pages { margin-left: 228px; }
  /* The bundle mounts in a fixed host beside #app (search-host.js sets its top). */
  body.clean-on #site-search-host { left: 228px; }
  /* The host is its own stacking layer (z 5) under the rail (z 6), so a listing
     or dialog the bundle opens full screen would sit under the rail. While one
     is open, lift the whole host over it. */
  body.clean-on #site-search-host:has(.fixed.inset-0, .fixed.inset-y-0) { z-index: 7; }

  /* Pipeline: the rail's buckets already are the groups, and the page
     header carries the one New deal button. */
  body.clean-on .pl-jump, body.clean-on .pl-side .pl-newbtn, body.clean-on .cr-side .cr-quick, body.clean-on .m-side .ht-logbtn { display: none; }
  /* The private tools sit in the top bar now, so the way back to Perks goes. */
  body.clean-on .ag-clean:not(.ag-member) ~ * .pk-back { display: none; }
}

/* Pipeline: every live deal in one table */
.pl-alltable td { vertical-align: middle; }
.pl-late { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #a3341f; background: #fbe9e4; }
.pl-alldeal { display: flex; flex-direction: column; gap: 2px; }
.pl-alldeal b { font-size: 13.5px; font-weight: 500; }
.pl-alldeal span { font-size: 11.5px; color: var(--m-faint); }
body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-table th { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--m-faint); background: transparent; }
body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-table td { padding-top: 14px; padding-bottom: 14px; }

/* rail groups (Pipeline buckets, CRM groups) in the same quiet type */
body.clean-on .pl-group-head, body.clean-on .cr-group-head { font-size: 13.5px; font-weight: 500; color: var(--m-ink); }
body.clean-on .pl-bucket { font-size: 13px; }
body.clean-on .money-app:not([data-theme="dark"]) .pl-bucket.active { background: var(--brand, #1d2733); color: #fff; }
body.clean-on .pl-navcount, body.clean-on .cr-navcount { background: transparent; font-weight: 500; }

/* CRM desk: the folded call row */
.cr-callbatch .cr-callmark { width: 18px; display: inline-flex; justify-content: center; color: var(--m-faint); }
.cr-callbatch .cr-callmark svg.i { width: 15px; height: 15px; }
.cr-callitem { padding-left: 34px !important; background: var(--m-surface-2); }
body.clean-on .m-info { background: transparent; border: 0; border-radius: 0; padding: 0 0 0 16px; position: relative; color: var(--m-ink); }
body.clean-on .m-info::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #b8813a; }

/* Boards keep their columns as quiet panels: the one place a surface helps. */
body.clean-on .kb-col { border-radius: 12px; }
body.clean-on { background: #fff; }
/* Dark: the ground under a page shorter than the window (Home Search's own
   pages left a white band) is the dark app ground, not white. */
body.clean-on:has(> #app > .ag-bar[data-theme="dark"]) { background: #0d1117; }

/* =====================================================================
   PHONE. The layout stays the phone shell's (assets/agent-phone.css: the
   header, the chip strip, the bottom tab bar). This only carries the look
   across: a navy header, figures two across between hairlines, and
   sections as a title, a hairline and rows.
   ===================================================================== */
@media (max-width: 700px) {
  .ag-bar.ag-clean:not([data-theme="dark"]) { background: var(--brand, #1d2733); border-bottom-color: var(--brand, #1d2733); }
  .ag-bar.ag-clean:not([data-theme="dark"]) .ag-mtitle { color: #fff; }
  .ag-bar.ag-clean:not([data-theme="dark"]) .ag-mact, .ag-bar.ag-clean:not([data-theme="dark"]) .ag-mback { color: #fff !important; }
  .ag-bar.ag-clean:not([data-theme="dark"]) .ag-mact:active { background: rgba(255, 255, 255, .13); }
  .ag-bar.ag-clean:not([data-theme="dark"]) .ag-avatar { background: rgba(255, 255, 255, .13); color: #fff; }
  .ag-bar.ag-clean:not([data-theme="dark"]) .ag-brand .tp-brand-mark { background: #fff; color: var(--brand, #1d2733); }

  body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-eyebrow { font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--m-faint); }
  body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-title { font-weight: 600; }

  body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-tiles,
  body.clean-on .money-app .m-main .fin-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0; row-gap: 18px; border-top: 1px solid var(--m-line); border-bottom: 1px solid var(--m-line); padding: 18px 0; }
  body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-tile,
  body.clean-on .money-app .m-main .fin-tile { background: transparent; border: 0; border-radius: 0; padding: 0 12px 0 0; min-width: 0; }
  body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-tile .lbl, body.clean-on .money-app .m-main .fin-tile .lbl { font-size: 9.5px; letter-spacing: .12em; }
  body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-tile .val, body.clean-on .money-app .m-main .fin-tile .val { font-size: 22px; font-weight: 600; margin-top: 8px; }
  body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-tile .sub { color: var(--m-faint); }

  body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-main .m-card,
  body.clean-on .money-app .m-main .card { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; overflow: visible; }
  body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-main .m-card-head,
  body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-main .m-card.flush .m-card-head { padding: 0 0 10px; margin-bottom: 0; border-bottom: 1px solid var(--m-line); }
  body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-main .m-card:not(.flush) > .m-card-head { margin-bottom: 12px; }
  body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-main form.m-card,
  body.clean-on .money-app .m-main .card.fin-form, body.clean-on .money-app .m-main .card.fin-empty { background: var(--m-surface-2); border-radius: 12px; padding: 16px; }
  /* rows inside a flat section run edge to edge, so they lose the card's side padding */
  body.clean-on .money-app:not(.tools-app):not(.sg-app) .m-main .m-card.flush .m-row { padding-left: 0; padding-right: 0; }
}

/* ---- Home Search on white, and the client roster in the rail -------------
   The search bundle is the website's and is not edited here; it marks its
   roster with data-ss, and its colours are all --v* tokens, so both changes
   are made from outside. Since site PR #103 (2026-09-23) the bundle's light
   theme already uses these Clean colours everywhere, clients included; the
   overrides below are kept for the agent layout and as a safety net. */
body.clean-on #site-search-host { background: #fff; }
body.clean-on #site-search-host .vow-light {
  --vpage: #ffffff; --vph-from: #eef1f5; --vph-to: #e3e8ee; --vcta-text: #ffffff;
}
@media (min-width: 1024px) {
  /* The rail's own entries cover the top of the column; the roster fills the
     rest of it, so the clients read as one list under Home Search. */
  body.clean-on .money-app.sr-nav:has(+ .site-search-slot) { bottom: auto; width: 227px; border-right: 0; padding-bottom: 8px; overflow: visible; }
  body.clean-on #site-search-host:has([data-ss="roster"]) { left: 0; }
  body.clean-on #site-search-host [data-ss="roster"] { width: 228px; padding-top: var(--sr-nav-h, 300px); background: var(--vpage, #fff); border-right: 1px solid var(--vborder, #e7ebef); font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif; }
  body.clean-on #site-search-host [data-ss="roster-head"] { padding: 14px 14px 6px 24px; gap: 6px; border-top: 1px solid var(--vborder, #e7ebef); }
  body.clean-on #site-search-host [data-ss="roster-head"] h1 { font-family: inherit; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--vfaint, #7a8794); }
  body.clean-on #site-search-host [data-ss="roster-head"] h1 + span { background: transparent; padding: 0; font-size: 11.5px; font-weight: 400; color: var(--vfaint, #7a8794); }
  body.clean-on #site-search-host [data-ss="roster-head"] button { width: 26px; height: 26px; border-color: transparent; }
  body.clean-on #site-search-host [data-ss="roster-head"] button svg { width: 15px; height: 15px; }
  /* Folding the roster away would leave a hole under the rail. */
  body.clean-on #site-search-host [data-ss="roster-head"] button[title="Hide clients"] { display: none; }
  body.clean-on #site-search-host [data-ss="roster-filter"] { padding: 0 14px 8px; }
  body.clean-on #site-search-host [data-ss="roster-filter"] input { border-radius: 8px; padding: 7px 10px; font-size: 12.5px; background: var(--vpanel2, #f7f9fb); border-color: transparent; }
  body.clean-on #site-search-host [data-ss="roster-list"] { padding: 0 14px 12px; }
  body.clean-on #site-search-host [data-ss="roster-list"] > button, body.clean-on #site-search-host [data-ss="roster-list"] > div { padding: 6px 10px; gap: 9px; border-radius: 8px; border-bottom: 0; }
  body.clean-on #site-search-host [data-ss="roster-list"] > button::before { display: none; }
  body.clean-on #site-search-host [data-ss="roster-list"] > button > span:first-child, body.clean-on #site-search-host [data-ss="roster-list"] > div > span:first-child { width: 26px; height: 26px; font-size: 9.5px; }
  body.clean-on #site-search-host [data-ss="roster-list"] > button > span:nth-child(2) > span:first-child { font-size: 13px; font-weight: 500; }
  body.clean-on #site-search-host [data-ss="roster-list"] > button > span:nth-child(2) > span:last-child { font-size: 11px; }
  body.clean-on #site-search-host [data-ss="roster-list"] > p { padding: 8px 10px; font-size: 12px; }
  /* The rail's navy pill says which page this is; the roster says whose
     search it is, so the picked row is a quieter grey. */
  body.clean-on #site-search-host .vow-light [data-ss="roster-list"] > button[class*="bg-(--vaccent-soft)"] { background: #eef1f5; }
  body.clean-on #site-search-host .vow-light [data-ss="roster-list"] > button[class*="bg-(--vaccent-soft)"] > span:nth-child(2) > span:first-child { font-weight: 600; }
}