/* =====================================================================
   Design step 2 · Look and navigation  (experience plan, "Ledger")
   ---------------------------------------------------------------------
   Loaded after app.css and step-1.css when the design level is 2 or more
   (base.html). The chosen direction (D21): a statement, not a dashboard.
   Structure from type, alignment and hairline rules; fills only for the
   current item, a hovered or selected row, a totals row and things that
   float. One accent, ledger green (D23), for the primary action, links,
   focus and the current item; red and amber only on exceptions, always
   with a word. Light first (D22), an equally finished dark.

   Token names: the Ledger set (--paper, --rail, --fill-1/2, --float,
   --rule, --rule-strong, --line-ui, --ink-1/2/3, --accent...) is defined
   per theme, and app.css's names (--bg, --surface, --text, --emerald,
   --gold...) are pointed at it, so inline styles that read a token follow.
   Theme blocks are (0,2,1), like step-1's, and screen only (print keeps
   app.css's print tokens). Keyed on html[data-ds], never [data-ds="2"],
   so later steps inherit it.

   Never touched: static/afp-logo.css, the lockup and mark classes,
   data-afp-settled, the sign-in sequence (tests/test_plan_design_steps.py).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS: paper (light) and graphite night (dark)
   --------------------------------------------------------------------- */
@media screen {
html[data-ds][data-theme="light"] {
  color-scheme: light;
  --paper:        #ffffff;   /* the page */
  --rail:         #f5f6f8;   /* the sidebar */
  --fill-1:       #f2f4f7;   /* hovered and selected rows, totals, current day */
  --fill-2:       #e8ebef;   /* current nav item, chosen segment */
  --float:        #ffffff;   /* menus, toasts, palette, sheets */
  --rule:         #e3e6ea;   /* hairline */
  --rule-strong:  #c9ced5;   /* header and section rule */
  --line-ui:      #868d98;   /* control boundary, 3.35:1 */
  --ink-1:        #11151b;   /* 18.3:1 */
  --ink-2:        #454d5a;   /*  8.5:1 */
  --ink-3:        #5f6774;   /*  5.7:1 on paper, 4.8:1 on fill-2 */
  --accent:       #0e6b4f;   /* ledger green: links, focus, current marker, 6.5:1 */
  --accent-fill:  #0e6b4f;
  --accent-fill-hover: #0b5a42;
  --on-accent-fill: #ffffff;
  --accent-tint:  #e9f2ef;
  --neg:          #b42318;   /* overdue, late, a loss */
  --warn:         #8a5300;   /* check this, re-confirm */
  --warn-tint:    #f6ede0;
  --on-accent:    #ffffff;   /* app.css meaning: ink on an --emerald fill */
  --shadow-float: 0 1px 2px rgba(17,21,27,.06), 0 10px 28px -6px rgba(17,21,27,.16);
  --shadow-bar:   0 1px 0 var(--rule), 0 10px 18px -14px rgba(17,21,27,.28);
  --shadow-bar-up: 0 -1px 0 var(--rule), 0 -10px 20px -14px rgba(17,21,27,.22);
  --row-hover:    #f2f4f7;
  --chart-grid:   rgba(17,21,27,.06);
}
html[data-ds]:not([data-theme="light"]) {
  color-scheme: dark;
  --paper:        #111418;
  --rail:         #0c0f12;
  --fill-1:       #171b20;
  --fill-2:       #1e2329;
  --float:        #1a1e24;
  --rule:         #22272e;
  --rule-strong:  #343b44;
  --line-ui:      #606976;   /* 3.3:1 */
  --ink-1:        #e8ebee;   /* 15.4:1 */
  --ink-2:        #aeb5bf;   /*  8.9:1 */
  --ink-3:        #8c949f;   /*  6.0:1 */
  --accent:       #46c79b;   /* 8.7:1 */
  --accent-fill:  #1f7f62;   /* quiet: white on it 4.9:1 */
  --accent-fill-hover: #1a7358;
  --on-accent-fill: #ffffff;
  --accent-tint:  #182d2a;
  --neg:          #f2766b;
  --warn:         #e3a64f;
  --warn-tint:    #2e2820;
  --on-accent:    #111418;   /* ink on the light green fill, 8.7:1 */
  --shadow-float: 0 1px 2px rgba(0,0,0,.5), 0 14px 34px -8px rgba(0,0,0,.62);
  --shadow-bar:   0 1px 0 var(--rule), 0 12px 22px -14px rgba(0,0,0,.7);
  --shadow-bar-up: 0 -1px 0 var(--rule), 0 -12px 22px -14px rgba(0,0,0,.6);
  --row-hover:    #171b20;
  --chart-grid:   rgba(255,255,255,.06);
}

/* app.css's names, pointed at the Ledger set (same (0,2,1) weight). */
html[data-ds]:not([data-theme="light"]),
html[data-ds][data-theme="light"] {
  --bg: var(--paper);  --surface: var(--paper);  --card: var(--paper);
  --surface2: var(--fill-1);  --surface3: var(--fill-2);  --surface4: var(--fill-2);
  --border: var(--rule);  --row-line: var(--rule);  --border-bright: var(--rule-strong);
  --rule-total: var(--ink-3);
  --text: var(--ink-1);  --text-mid: var(--ink-2);  --text-dim: var(--ink-3);  --dim: var(--ink-3);

  --emerald: var(--accent);  --primary: var(--accent);  --focus: var(--accent);
  --emerald-dim: var(--accent-fill-hover);
  --emerald-muted: var(--rule-strong);
  --emerald-glow: var(--fill-1);  --emerald-glow2: var(--accent-tint);
  --btn-fill-a: var(--accent-fill);  --btn-fill-b: var(--accent-fill);
  --success: var(--accent);  --success-glow: var(--accent-tint);  --success-glow2: var(--accent-tint);

  --red: var(--neg);  --amber: var(--warn);
  --blue: var(--ink-2);  --purple: var(--ink-2);   /* status marks are ink */

  /* Gold is the logo's alone (D15): money and figures are ink. */
  --gold: var(--ink-1);  --gold-grad2: var(--ink-1);  --gold-dim: var(--ink-2);
  --gold-glow: var(--fill-1);  --gold-glow2: var(--fill-2);  --gold-weak: var(--fill-2);
  --on-gold: var(--paper);

  /* Modules go quiet: the sidebar already says where you are. */
  --vault-color: var(--ink-2); --ams-color: var(--ink-2); --crm-color: var(--ink-2);
  --intel-color: var(--ink-2); --re-color: var(--ink-2); --hecm-color: var(--ink-2);
  --agmt-color: var(--ink-2); --rental-color: var(--ink-2);
  --vault-glow: var(--fill-1); --ams-glow: var(--fill-1); --crm-glow: var(--fill-1);
  --intel-glow: var(--fill-1); --re-glow: var(--fill-1); --hecm-glow: var(--fill-1);
  --agmt-glow: var(--fill-1); --rental-glow: var(--fill-1);
  --rental-line: var(--rule-strong);

  --zebra: transparent;  --head-band: transparent;
  --shadow-card: none;  --shadow-hero: none;  --shadow-glow: none;  --inner-hi: transparent;
  --card-hover-shadow: none;  --statcard-hover-shadow: none;
  --head-shadow: 0 1px 0 var(--rule-strong);
  --shadow-raise: var(--shadow-float);
}
}

/* Type, spacing, radii and sizes: one set for both themes. */
html[data-ds] {
  --font: var(--font-sans);
  --font-mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', monospace;
  --t-title:  600 28px/36px var(--font-sans);
  --t-figure: 500 24px/32px var(--font-sans);
  --t-head:   600 15px/24px var(--font-sans);
  --t-body:   400 14px/20px var(--font-sans);
  --t-table:  400 13px/20px var(--font-sans);
  --t-label:  500 12px/16px var(--font-sans);
  --track-title: -0.015em;  --track-figure: -0.01em;  --track-over: 0.06em;

  /* Re-cut of app.css's size roles (micro..hero) onto the six Ledger sizes. */
  --fs-1: 12px;  --fs-2: 12px;  --fs-3: 13px;  --fs-4: 13px;
  --fs-5: 13px;  --fs-6: 15px;  --fs-7: 28px;  --fs-8: 24px;
  --kpi-size-hero: 24px;  --kpi-size-lead: 24px;  --kpi-size-tile: 20px;
  --kpi-size-cell: 15px;  --kpi-size-inline: 13px;
  --kpi-track-hero: -0.01em;  --kpi-track-lead: -0.01em;  --kpi-track-tile: -0.01em;
  --kpi-track-cell: -0.01em;  --kpi-track-inline: 0;

  /* Ledger's 4px spacing steps (app.css's own --sp-* stay as they are). */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;  --space-4: 16px;  --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;

  --r-1: 4px;  --r-2: 6px;
  --radius-sm: 4px;  --radius: 6px;  --radius-lg: 6px;

  --rail-w: 240px;  --rail-mini: 56px;
  --ctl-h: 32px;  --ctl-h-sm: 28px;  --hit: 44px;
  --gutter: 32px;
  --dur: 120ms;  --ease: cubic-bezier(.2,0,0,1);
  --transition: 120ms cubic-bezier(.2,0,0,1);
}
/* Two densities (D20): Comfortable (as drawn) and Compact. Spacious retires:
   base.html folds it into Comfortable before the first paint. */
html[data-ds][data-density="compact"] {
  --ctl-h: 28px;  --ctl-h-sm: 24px;
  --t-table: 400 12px/16px var(--font-sans);
  --fs-5: 12px;
  --gutter: 24px;
  --rail-w: 216px;
}
@media (max-width: 1320px) { html[data-ds] { --gutter: 24px; } }
@media (max-width: 900px)  { html[data-ds] { --gutter: 16px; } }

/* ---------------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------------- */
html[data-ds] body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-1);
  background: var(--paper);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html[data-ds][data-density="compact"] body { font-size: 13px; }
html[data-ds] ::selection { background: var(--accent-tint); color: var(--ink-1); }
html[data-ds] :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-ds] .num, html[data-ds] .money, html[data-ds] .tnum,
html[data-ds] td.r, html[data-ds] th.r { font-variant-numeric: tabular-nums; }
html[data-ds] kbd {
  font: 500 12px/16px var(--font-mono);
  letter-spacing: 0;
  color: var(--ink-3);
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-1);
  padding: 0 4px;
}

/* The drawn icons (static/icons.svg): stroke from the size, colour from ink. */
html[data-ds] .icon { flex: none; stroke-width: 2; vertical-align: -0.15em; }
html[data-ds] .icon[width="12"] { stroke-width: 2.4; }
html[data-ds] .icon[width="20"] { stroke-width: 1.8; }
html[data-ds] .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------
   3. BUTTONS: one primary per page, quiet everything else
   --------------------------------------------------------------------- */
html[data-ds] .btn {
  min-height: var(--ctl-h);
  padding: 0 var(--space-3);
  gap: var(--space-2);
  justify-content: center;
  border-radius: var(--r-2);
  border: 1px solid var(--accent-fill);
  background: var(--accent-fill);
  color: var(--on-accent-fill);
  font: 500 13px/18px var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
}
html[data-ds] .btn:hover,
html[data-ds][data-theme="light"] .btn:hover {
  background: var(--accent-fill-hover);
  border-color: var(--accent-fill-hover);
  color: var(--on-accent-fill);
}
html[data-ds] .btn .icon { color: currentColor; }

html[data-ds] .btn-ghost,
html[data-ds] .btn-gold,
html[data-ds] .data-table td .btn:not(.btn-ghost):not(.btn-danger) {
  background: var(--paper);
  border: 1px solid var(--line-ui);
  color: var(--ink-1);
}
html[data-ds] .btn-ghost .icon, html[data-ds] .btn-gold .icon { color: var(--ink-2); }
html[data-ds] .btn-ghost:hover,
html[data-ds] .btn-gold:hover,
html[data-ds][data-theme="light"] .btn-ghost:hover,
html[data-ds][data-theme="light"] .btn-gold:hover,
html[data-ds] .data-table td .btn:not(.btn-ghost):not(.btn-danger):hover {
  background: var(--fill-1);
  border-color: var(--line-ui);
  color: var(--ink-1);
}
html[data-ds] .btn-danger,
html[data-ds] .btn-danger.btn-sm {
  background: var(--paper);
  border: 1px solid var(--line-ui);
  color: var(--neg);
}
html[data-ds] .btn-danger:hover,
html[data-ds][data-theme="light"] .btn-danger:hover {
  background: var(--fill-1);
  border-color: var(--neg);
  color: var(--neg);
}
html[data-ds] .btn-sm,
html[data-ds] .btn-danger.btn-sm {
  min-height: var(--ctl-h-sm);
  padding: 0 var(--space-3);
  font: 500 12px/16px var(--font-sans);
}
html[data-ds] .btn:active { transform: none; filter: none; }
html[data-ds] .btn:disabled, html[data-ds] .btn[aria-disabled="true"] { opacity: .5; }
/* Busy (Q-03): the label and the width stay; the button says it is working. */
html[data-ds] [aria-busy="true"] { cursor: progress; opacity: .7; }
html[data-ds] .as-link { color: var(--accent); }

/* ---------------------------------------------------------------------
   4. FIELDS: 32px, a 3:1 boundary, the accent outline on focus
   --------------------------------------------------------------------- */
html[data-ds] label,
html[data-ds] .form-label {
  font: var(--t-label);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
}
html[data-ds] .form-control,
html[data-ds] .search-input,
html[data-ds] input[type="text"], html[data-ds] input[type="search"],
html[data-ds] input[type="email"], html[data-ds] input[type="number"],
html[data-ds] input[type="date"], html[data-ds] input[type="password"],
html[data-ds] input[type="tel"], html[data-ds] input[type="url"],
html[data-ds] input:not([type]),
html[data-ds] select, html[data-ds] textarea {
  background-color: var(--paper);
  border: 1px solid var(--line-ui);
  border-radius: var(--r-2);
  color: var(--ink-1);
  font-family: var(--font-sans);
  font-size: 13px;
}
html[data-ds] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
html[data-ds] select {
  height: var(--ctl-h);
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}
html[data-ds] input::placeholder, html[data-ds] textarea::placeholder { color: var(--ink-3); opacity: 1; }
html[data-ds] input:hover, html[data-ds] select:hover, html[data-ds] textarea:hover { border-color: var(--ink-3); }
html[data-ds] input:focus, html[data-ds] select:focus,
html[data-ds] textarea:focus, html[data-ds] .form-control:focus {
  border-color: var(--line-ui);
  box-shadow: none;
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
html[data-ds] input[type="checkbox"], html[data-ds] input[type="radio"] { accent-color: var(--accent-fill); }
html[data-ds] .form-section-label { color: var(--ink-2); }
html[data-ds] .form-hint { color: var(--ink-3); }
html[data-ds] .field-error, html[data-ds] .form-error { color: var(--neg); }

/* ---------------------------------------------------------------------
   5. TABLES: a ledger. Sentence-case heads, hairline rows, no zebra
   --------------------------------------------------------------------- */
html[data-ds] .data-table th {
  font: var(--t-label);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
  background: transparent;
  border-bottom: 1px solid var(--rule-strong);
  padding: var(--space-2) var(--space-3);
}
html[data-ds] .data-table td {
  font-size: 13px;
  line-height: 20px;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--rule);
}
html[data-ds][data-density="compact"] .data-table td,
html[data-ds][data-density="compact"] .data-table th { padding: var(--space-1) var(--space-2); font-size: 12px; }
html[data-ds] .data-table td.money { color: var(--ink-1); font-weight: 500; }
html[data-ds] .data-table td.dim { color: var(--ink-3); font-size: 12px; }
html[data-ds] .data-table tbody tr:nth-child(even) td,
html[data-ds] .data-table.zebra-manual tbody tr.is-alt td { background: transparent; }
html[data-ds] .data-table tbody tr td:first-child,
html[data-ds] .data-table tbody tr:hover td:first-child { border-left: 0; }
@media (hover: hover) {
  html[data-ds] .data-table tbody tr:hover td { background: var(--fill-1); }
}
html[data-ds] .data-table a { color: var(--ink-1); }
html[data-ds] .data-table a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
html[data-ds] .data-table th:first-child, html[data-ds] .data-table th:last-child { border-radius: 0; }
html[data-ds] .addr-sub { font-size: 12px; color: var(--ink-3); }

/* ---------------------------------------------------------------------
   6. PILLS, BADGES AND CHIPS: a word in ink with a hairline boundary
   --------------------------------------------------------------------- */
html[data-ds] .badge {
  border-radius: var(--r-1);
  font: 500 12px/16px var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
  padding: 1px 6px;
}
html[data-ds] .badge::before { display: none; }
html[data-ds] .state-pill,
html[data-ds] .rec-chip {
  border-radius: var(--r-1);
  font: 500 12px/16px var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
}
html[data-ds] .loan-id {
  font: 500 12px/16px var(--font-sans);
  letter-spacing: 0;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-1);
}
html[data-ds] .money-chip { color: var(--ink-1); font-size: 13px; font-weight: 500; background: transparent; }
html[data-ds] .date-chip, html[data-ds] .days-badge { border-radius: var(--r-1); letter-spacing: 0; }
html[data-ds] .nav-badge, html[data-ds] .tab-count {
  background: transparent;
  color: var(--ink-3);
  font: 500 12px/16px var(--font-sans);
  font-variant-numeric: tabular-nums;
  border: 0;
  padding: 0;
  min-width: 0;
  box-shadow: none;
}
/* The module chip above every page leaves: the sidebar says where you are. */
html[data-ds] .div-badge { display: none; }

/* ---------------------------------------------------------------------
   7. TABS: text tabs with a 2px accent underline
   --------------------------------------------------------------------- */
html[data-ds] .tab-bar { gap: var(--space-6); border-bottom: 1px solid var(--rule); background: transparent; padding: 0; }
html[data-ds] .tab-btn {
  font: 500 13px/20px var(--font-sans) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ink-2) !important;
  background: transparent !important;
  padding: var(--space-2) 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  margin-bottom: -1px;
}
html[data-ds] .tab-btn:hover { color: var(--ink-1) !important; }
html[data-ds] .tab-btn.active {
  color: var(--ink-1) !important;
  border-bottom-color: var(--accent) !important;
  box-shadow: none !important;
}
html[data-ds] .filter-btn {
  border-radius: var(--r-1);
  border: 1px solid var(--line-ui);
  background: var(--paper);
  color: var(--ink-2);
  font: 500 12px/16px var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
}
html[data-ds] .filter-btn:hover { background: var(--fill-1); color: var(--ink-1); }
html[data-ds] .filter-btn.active {
  background: var(--fill-2);
  color: var(--ink-1);
  border-color: var(--line-ui);
  box-shadow: inset 0 0 0 1px var(--line-ui);
}

/* ---------------------------------------------------------------------
   8. NOTICES, ALERTS AND TOASTS
   --------------------------------------------------------------------- */
/* The notices band (base.html at level 2): one ruled line per notice. */
html[data-ds] .notices { margin: 0 0 var(--space-5); }
html[data-ds] .notice {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--rule);
  font: 400 12px/16px var(--font-sans);
  color: var(--ink-2);
}
html[data-ds] .notice > .icon { color: var(--ink-3); }
html[data-ds] .notice-text { flex: 1; min-width: 0; }
html[data-ds] .notice-text strong { color: var(--ink-1); font-weight: 600; }
html[data-ds] .notice-acts { display: inline-flex; align-items: center; gap: var(--space-3); }
html[data-ds] .notice-acts form { margin: 0; }
html[data-ds] .notice-acts a, html[data-ds] .notice-link { color: var(--accent); font-weight: 500; }
html[data-ds] .notice--warn, html[data-ds] .notice--warn > .icon,
html[data-ds] .notice--warn .notice-text strong { color: var(--warn); }
html[data-ds] .notice-hide {
  display: inline-grid; place-items: center; width: 24px; height: 24px;
  border-radius: var(--r-1); color: var(--ink-3); background: none; border: 0; cursor: pointer;
}
html[data-ds] .notice-hide:hover { background: var(--fill-2); color: var(--ink-1); }

html[data-ds] .alert {
  border-radius: var(--r-2);
  border: 1px solid var(--rule);
  border-left-width: 1px;
  background: var(--paper);
  color: var(--ink-2);
  font-size: 13px;
}
html[data-ds] .alert::before { display: none; }

/* Toasts: bottom-left of the page column, never over the level-2 sidebar
   (the 60px icon rail when it is shrunk). Phones: full width (section 14). */
html[data-ds]:not([data-nav="top"]) body:has(.sidebar-v2) #toast-container {
  left: calc(var(--rail-w) + var(--space-4));
  right: auto;
  bottom: var(--space-4);
  align-items: flex-start;
}
html[data-ds]:not([data-nav="top"]) body.sidebar-mini:has(.sidebar-v2) #toast-container { left: calc(60px + var(--space-4)); }
html[data-ds]:not([data-nav="top"]) body.sidebar-collapsed:has(.sidebar-v2) #toast-container { left: var(--space-4); }
html[data-ds] .toast {
  background: var(--float);
  color: var(--ink-1);
  border: 1px solid var(--rule-strong);
  border-left: 1px solid var(--rule-strong);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-float);
  font: 400 13px/20px var(--font-sans);
  animation: ds-fade-in 120ms linear both;
}
html[data-ds] .toast::before { display: none; }
html[data-ds] .toast-undo { color: var(--accent); font-weight: 600; }
/* Colour only for the exceptions: a saved check is ink (Ledger). */
html[data-ds] .toast .toast-icon { color: var(--ink-2); display: inline-flex; }
html[data-ds] .toast.toast-error .toast-icon { color: var(--neg); }
html[data-ds] .toast.toast-warning .toast-icon { color: var(--warn); }
html[data-ds] .toast-close { color: var(--ink-3); display: inline-grid; place-items: center; }

/* ---------------------------------------------------------------------
   9. CARDS, SECTIONS AND PAGE HEADERS
   --------------------------------------------------------------------- */
html[data-ds] .card {
  border-radius: var(--r-2);
  border: 1px solid var(--rule);
  background: var(--paper);
  box-shadow: none;
}
html[data-ds] .card-title,
html[data-ds] .section-title {
  font: var(--t-head);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-1);
}
html[data-ds] .section-title::before { display: none; }
html[data-ds] .stat-card { border-radius: var(--r-2); border: 1px solid var(--rule); background: var(--paper); }
html[data-ds] .stat-label, html[data-ds] .kpi-label {
  font: var(--t-label);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
}
html[data-ds] .stat-value, html[data-ds] .kpi-value {
  font-weight: 500;
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
}

html[data-ds] .topbar { margin-bottom: var(--space-6); border: 0; }
html[data-ds] .page-title {
  font: var(--t-title);
  letter-spacing: var(--track-title);
  color: var(--ink-1);
  text-transform: none;
}
html[data-ds] .page-title::before { display: none; }
html[data-ds] .page-subtitle {
  font: 400 13px/20px var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
  margin-top: var(--space-1);
}
html[data-ds] .breadcrumbs { font: var(--t-label); letter-spacing: 0; color: var(--ink-3); }
html[data-ds] .breadcrumbs a { color: var(--ink-3); }
html[data-ds] .breadcrumbs a:hover { color: var(--accent); }
html[data-ds] .eyebrow {
  font: 600 12px/16px var(--font-sans);
  letter-spacing: var(--track-over);
  color: var(--ink-3);
}

/* Empty states: one quiet line and one next step. */
html[data-ds] .empty-gem, html[data-ds] .empty::before { display: none; }
html[data-ds] .empty-section {
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
}

/* ---------------------------------------------------------------------
   10. FLOATING LAYERS: menus, palette, dialogs, the help panel
   --------------------------------------------------------------------- */
html[data-ds] .tn-panel,
html[data-ds] .am-menu-list,
html[data-ds] .file-more-menu,
html[data-ds] .pf-pop,
html[data-ds] #cmd-box,
html[data-ds] .help-panel,
html[data-ds] .doc-viewer-card,
html[data-ds] .tour-tooltip,
html[data-ds] .session-warn,
html[data-ds] .lg-dialog {
  background: var(--float);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-float);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-ds] #cmd-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(17,21,27,.32); }
html[data-ds] #cmd-input { font: 400 15px/24px var(--font-sans); color: var(--ink-1); }
html[data-ds] .cmd-item-section {
  font: 600 12px/16px var(--font-sans);
  letter-spacing: var(--track-over);
  color: var(--ink-3);
}

/* The keyboard sheet at level 2 (base.html renders it class-based). */
html[data-ds] .lg-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  background: rgba(17,21,27,.32);
}
html[data-ds] .lg-dialog { min-width: 320px; max-width: min(560px, calc(100vw - 32px)); padding: var(--space-6); }
html[data-ds] .lg-dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
html[data-ds] .lg-dialog-title { font: var(--t-head); color: var(--ink-1); }
html[data-ds] .kb-grid { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-5); font: var(--t-table); }
html[data-ds] .kb-grid span { color: var(--ink-2); }

/* ---------------------------------------------------------------------
   11. MOTION: fades only, and none at all when asked
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html[data-ds] *, html[data-ds] *::before, html[data-ds] *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/* ---------------------------------------------------------------------
   12. THE SHELL: the level-2 sidebar (templates/_sidebar_v2.html)
   Scoped to .sidebar-v2, so a level-2 page that falls back to the classic
   sidebar keeps its own layout.
   --------------------------------------------------------------------- */
html[data-ds] .main { padding: var(--space-6) var(--gutter) var(--space-16); }
html[data-ds] .sidebar.sidebar-v2 {
  width: var(--rail-w);
  background: var(--rail);
  border-right: 1px solid var(--rule);
  box-shadow: none;
}
html[data-ds] .sidebar-v2 .sidebar-logo {
  display: flex; align-items: center; gap: var(--space-1);
  height: 52px; padding: var(--space-1) var(--space-12) 0 var(--space-5);
  border-bottom: 0;
}
html[data-ds] .sidebar-v2 .nav-phone-btn { display: none; }
html[data-ds] .sidebar-v2 .mobile-menu-btn { display: none; }

html[data-ds] .sidebar-v2 .sidebar-nav {
  display: flex; flex-direction: column;
  padding: 0 var(--space-3) var(--space-3);
  overflow-y: auto; scrollbar-width: thin;
}
/* D1: the context line and the division switch, quieter than the areas. */
html[data-ds] .sidebar-v2 .sidebar-context {
  padding: 0 var(--space-2) var(--space-1);
  background: none; border: 0;
}
html[data-ds] .sidebar-v2 .sidebar-context-text {
  font: 400 12px/16px var(--font-sans);
  letter-spacing: 0; text-transform: none;
  color: var(--ink-3);
}
html[data-ds] .sidebar-v2 .div-switcher {
  display: flex; gap: 2px; padding: 2px; margin: 0 0 var(--space-3);
  border: 1px solid var(--line-ui); border-radius: var(--r-2);
  background: transparent;
}
html[data-ds] .sidebar-v2 .div-pill {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  min-height: 24px; padding: 0 var(--space-2);
  border-radius: var(--r-1);
  font: 500 12px/16px var(--font-sans);
  letter-spacing: 0; text-transform: none;
  color: var(--ink-2); background: transparent; text-decoration: none;
}
html[data-ds] .sidebar-v2 .div-pill:hover { background: var(--fill-1); color: var(--ink-1); }
html[data-ds] .sidebar-v2 .div-pill[aria-current="true"],
html[data-ds][data-theme="light"] .sidebar-v2 .div-pill[aria-current="true"] {
  background: var(--fill-2); color: var(--ink-1);
  box-shadow: inset 0 0 0 1px var(--line-ui);
}

html[data-ds] .sidebar-v2 .nav-search-wrap { padding: 0; margin: 0 0 var(--space-2); }
html[data-ds] .sidebar-v2 .nav-search-btn {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  height: var(--ctl-h); padding: 0 var(--space-2) 0 var(--space-3);
  border: 1px solid var(--line-ui); border-radius: var(--r-2);
  background: var(--paper); color: var(--ink-3);
  font: var(--t-table);
}
html[data-ds] .sidebar-v2 .nav-search-btn:hover { color: var(--ink-2); border-color: var(--ink-3); }
html[data-ds] .sidebar-v2 .nav-search-txt { font: inherit; letter-spacing: 0; text-transform: none; color: inherit; }
html[data-ds] .sidebar-v2 .nav-search-kbd { margin-left: auto; }

/* Recent and Starred: plain rows under a small overline. */
html[data-ds] .sidebar-v2 .nav-group { margin-top: var(--space-2); padding: 0; background: none; border: 0; }
html[data-ds] .sidebar-v2 .nav-group-title,
html[data-ds] .sidebar-v2 .nav-pinned-title {
  display: block;
  padding: var(--space-1) var(--space-2);
  font: 600 12px/16px var(--font-sans);
  letter-spacing: var(--track-over); text-transform: uppercase;
  color: var(--ink-3);
}
html[data-ds] .sidebar-v2 .nav-recent-link {
  display: flex; align-items: center; gap: var(--space-2);
  height: var(--ctl-h-sm); padding: 0 var(--space-2);
  border-radius: var(--r-2);
  color: var(--ink-2); font: var(--t-table); text-decoration: none;
}
html[data-ds] .sidebar-v2 .nav-recent-link:hover { background: var(--fill-2); color: var(--ink-1); }
html[data-ds] .sidebar-v2 .nav-recent-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ds] .sidebar-v2 .nav-lock { display: inline-flex; flex: none; color: var(--ink-3); }

/* Every row: a 28px line of 13px type in ink 2, a fill on hover. */
html[data-ds] .sidebar-v2 .nav-link {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--ctl-h-sm); margin: 0; padding: 0 var(--space-8) 0 var(--space-2);
  border: 0; border-left: 0; border-radius: var(--r-2);
  background: none;
  color: var(--ink-2); font: var(--t-table); font-weight: 400; letter-spacing: 0;
}
html[data-ds] .sidebar-v2 .nav-link:hover { background: var(--fill-2); color: var(--ink-1); }
html[data-ds] .sidebar-v2 .nav-link.active,
html[data-ds][data-theme="light"] .sidebar-v2 .nav-link.active {
  background: var(--fill-2); color: var(--ink-1); font-weight: 500;
  background-image: none; box-shadow: none; border-left: 0;
}
html[data-ds] .sidebar-v2 .nav-link-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The eight areas: 32px rows with their icon, a rule above the first. */
html[data-ds] .sidebar-v2 .nav-group + .nav-section-header,
html[data-ds] .sidebar-v2 .nav-group + .nav-section-items,
html[data-ds] .sidebar-v2 .nav-search-wrap + .nav-section-header,
html[data-ds] .sidebar-v2 .nav-search-wrap + .nav-section-items {
  margin-top: var(--space-2); padding-top: var(--space-2);
  border-top: 1px solid var(--rule);
}
html[data-ds] .sidebar-v2 .nav-section-items + .nav-section-header { border-top: 0; margin-top: 0; }
html[data-ds] .sidebar-v2 .nav-section-header { display: block; padding: 0; cursor: default; background: none; }
html[data-ds] .sidebar-v2 .nav-section-header:hover { background: none; }
html[data-ds] .sidebar-v2 .nav-area-link {
  display: flex; align-items: center; gap: var(--space-3);
  height: var(--ctl-h); padding: 0 var(--space-2);
  border-radius: var(--r-2);
  color: var(--ink-2); text-decoration: none;
  font: var(--t-table); font-weight: 500;
}
html[data-ds] .sidebar-v2 a.nav-area-link:hover { background: var(--fill-2); color: var(--ink-1); }
html[data-ds] .sidebar-v2 .nav-area-link .nav-label {
  font: inherit; letter-spacing: 0; text-transform: none;
  color: inherit; opacity: 1; padding: 0 !important; margin: 0 !important; display: inline;
}
html[data-ds] .sidebar-v2 .nav-area-link .nav-label::before { display: none; }
html[data-ds] .sidebar-v2 .nav-icon { display: inline-flex; width: auto; opacity: 1; font-size: 0; color: var(--ink-3); flex: none; }
html[data-ds] .sidebar-v2 .is-here > .nav-area-link,
html[data-ds] .sidebar-v2 .nav-area-link.is-open { color: var(--ink-1); }
html[data-ds] .sidebar-v2 .is-here > .nav-area-link .nav-icon,
html[data-ds] .sidebar-v2 .nav-area-link.active .nav-icon,
html[data-ds] .sidebar-v2 .nav-area-link[aria-current] .nav-icon { color: var(--accent); }
html[data-ds] .sidebar-v2 .nav-area-single .nav-area-link { height: var(--ctl-h); font-weight: 500; }

/* The open area's pages, under a guide hairline. */
html[data-ds] .sidebar-v2 .nav-section-items { max-height: none; overflow: visible; transition: none; }
html[data-ds] .sidebar-v2 .nav-section-items[hidden] { display: none !important; }
html[data-ds] .sidebar-v2 .nav-area-items { position: relative; margin: 0 0 var(--space-1); padding-left: 28px; }
html[data-ds] .sidebar-v2 .nav-area-items::before {
  content: ""; position: absolute; left: 15px; top: 2px; bottom: 2px;
  width: 1px; background: var(--rule-strong);
}
html[data-ds] .sidebar-v2 .nav-sub-lists { padding-left: var(--space-3); }
html[data-ds] .sidebar-v2 .nav-sublink { padding-left: var(--space-2); font-size: 12px; min-height: 24px; }
html[data-ds] .sidebar-v2 .nav-sublink-action { color: var(--accent); font-weight: 500; }
html[data-ds] .sidebar-v2 .nav-badge { margin-left: auto; }

/* Star a page: on hover and focus; filled when it is starred. */
html[data-ds] .sidebar-v2 .nav-pin-btn {
  right: var(--space-1); width: 24px; height: 24px; padding: 0;
  display: inline-grid; place-items: center;
  font-size: 0; color: var(--ink-3); background: none; border-radius: var(--r-1);
}
html[data-ds] .sidebar-v2 .nav-pin-btn:hover { background: var(--fill-1); color: var(--ink-1); }
html[data-ds] .sidebar-v2 .nav-pin-btn[aria-pressed="true"] .icon { fill: currentColor; }
html[data-ds] .sidebar-v2 .nav-link.is-pinned .nav-pin-btn { opacity: 0; color: var(--ink-3); }
html[data-ds] .sidebar-v2 .nav-link.is-pinned:hover .nav-pin-btn,
html[data-ds] .sidebar-v2 .nav-link.is-pinned .nav-pin-btn:focus-visible { opacity: 1; }
html[data-ds] .sidebar-v2 .nav-link.is-pinned.drop-target { box-shadow: inset 0 2px 0 0 var(--accent); }
html[data-ds] .sidebar-v2 .nav-link.is-pinned.drop-target-below { box-shadow: inset 0 -2px 0 0 var(--accent); }

/* The foot: the account button and Help (D20, D25). */
html[data-ds] .sidebar-v2 .sidebar-footer { padding: var(--space-2) var(--space-3); border-top: 1px solid var(--rule); }
html[data-ds] .sidebar-v2 .sidebar-user { flex-direction: row; align-items: center; gap: var(--space-1); }
html[data-ds] .acct-btn {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-3);
  height: var(--hit); padding: 0 var(--space-2);
  border: 0; border-radius: var(--r-2); background: none; color: var(--ink-1);
  cursor: pointer; text-align: left; font: inherit;
}
html[data-ds] .acct-btn:hover, html[data-ds] .acct-btn[aria-expanded="true"] { background: var(--fill-2); }
html[data-ds] .acct-btn > .icon { margin-left: auto; color: var(--ink-3); }
html[data-ds] .sidebar-v2 .user-avatar {
  width: 28px; height: 28px; flex: none;
  background: var(--fill-2); color: var(--ink-1);
  border: 1px solid var(--rule-strong); border-radius: 999px;
  font: 600 12px/1 var(--font-sans); letter-spacing: .02em;
}
html[data-ds] .acct-who { min-width: 0; display: flex; flex-direction: column; }
html[data-ds] .sidebar-v2 .user-name {
  font: 500 13px/18px var(--font-sans); color: var(--ink-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-ds] .sidebar-v2 .user-role { font: 400 12px/16px var(--font-sans); letter-spacing: 0; color: var(--ink-3); }
html[data-ds] .acct-help {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: var(--r-2); background: none; color: var(--ink-3); cursor: pointer;
}
html[data-ds] .acct-help:hover, html[data-ds] .acct-help.active { background: var(--fill-2); color: var(--ink-1); }

/* The handles: the icon-rail button sits in the rail's head; the hide
   handle shows only once the sidebar is hidden (Ctrl B still toggles it). */
html[data-ds] body:has(.sidebar-v2) .sidebar-mini-toggle,
html[data-ds] body:has(.sidebar-v2) .sidebar-toggle {
  width: 28px; height: 28px; border-radius: var(--r-2);
  border: 0; background: none; color: var(--ink-3); box-shadow: none;
  font-size: 0;
}
html[data-ds] body:has(.sidebar-v2) .sidebar-mini-toggle:hover,
html[data-ds] body:has(.sidebar-v2) .sidebar-toggle:hover { background: var(--fill-2); color: var(--ink-1); transform: none; box-shadow: none; }
html[data-ds] body:has(.sidebar-v2) .sidebar-mini-toggle { top: 12px; left: calc(var(--rail-w) - 40px); z-index: 120; }
html[data-ds] body.sidebar-mini:has(.sidebar-v2) .sidebar-mini-toggle { top: 56px; left: 16px; }
html[data-ds] body.sidebar-mini:has(.sidebar-v2) .sidebar-mini-toggle .icon { transform: scaleX(-1); }
html[data-ds] body:has(.sidebar-v2):not(.sidebar-collapsed) .sidebar-toggle { display: none; }
html[data-ds] body.sidebar-collapsed:has(.sidebar-v2) .sidebar-toggle {
  display: inline-flex; top: 12px; left: 12px;
  border: 1px solid var(--line-ui); background: var(--paper);
}
html[data-ds] body.sidebar-collapsed:has(.sidebar-v2) .sidebar-toggle .icon { transform: scaleX(-1); }

/* The icon rail (Ctrl Shift B): the eight area icons, the account and Help. */
html[data-ds]:not([data-nav="top"]) body.sidebar-mini .sidebar-v2 .sidebar-logo { height: 52px; padding: var(--space-3) 0 0 !important; }
html[data-ds]:not([data-nav="top"]) body.sidebar-mini .sidebar-v2 .sidebar-nav { padding: var(--space-10) var(--space-2) var(--space-2); }
html[data-ds]:not([data-nav="top"]) body.sidebar-mini .sidebar-v2 .div-switcher,
html[data-ds]:not([data-nav="top"]) body.sidebar-mini .sidebar-v2 .nav-group,
html[data-ds]:not([data-nav="top"]) body.sidebar-mini .sidebar-v2 .nav-area-items { display: none !important; }
html[data-ds]:not([data-nav="top"]) body.sidebar-mini .sidebar-v2 .nav-search-btn { justify-content: center; padding: 0 !important; width: 40px; height: 40px; margin: 0 auto; }
html[data-ds]:not([data-nav="top"]) body.sidebar-mini .sidebar-v2 .nav-area-link { justify-content: center; width: 40px; height: 40px; padding: 0 !important; margin: 0 auto 2px; }
html[data-ds]:not([data-nav="top"]) body.sidebar-mini .sidebar-v2 .is-here > .nav-area-link { background: var(--fill-2); }
html[data-ds]:not([data-nav="top"]) body.sidebar-mini .sidebar-v2 .sidebar-user { flex-direction: column; gap: var(--space-2); }
html[data-ds]:not([data-nav="top"]) body.sidebar-mini .sidebar-v2 .acct-btn { flex: none; justify-content: center; width: 40px; padding: 0; }
html[data-ds]:not([data-nav="top"]) body.sidebar-mini .sidebar-v2 .acct-who,
html[data-ds]:not([data-nav="top"]) body.sidebar-mini .sidebar-v2 .acct-btn > .icon { display: none; }
html[data-ds]:not([data-nav="top"]) body.sidebar-mini .sidebar-v2 .sidebar-footer { padding: var(--space-2) 0; }

/* Top-bar mode keeps the account and Help as icons. */
html[data-ds][data-nav="top"] .sidebar-v2 .acct-who,
html[data-ds][data-nav="top"] .sidebar-v2 .acct-btn > .icon { display: none; }
html[data-ds][data-nav="top"] .sidebar-v2 .acct-btn { width: 40px; height: 40px; justify-content: center; padding: 0; }

/* ---------------------------------------------------------------------
   13. THE ACCOUNT MENU AND HELP (floating)
   --------------------------------------------------------------------- */
html[data-ds] .acct-menu {
  position: fixed; z-index: 700;
  width: 280px; max-height: calc(100vh - 16px); overflow-y: auto;
  padding: var(--space-2);
  background: var(--float); color: var(--ink-1);
  border: 1px solid var(--rule-strong); border-radius: var(--r-2);
  box-shadow: var(--shadow-float);
  font: var(--t-table);
}
html[data-ds] .acct-menu[hidden] { display: none; }
html[data-ds] .acct-head { display: flex; flex-direction: column; padding: var(--space-2) var(--space-2) var(--space-3); border-bottom: 1px solid var(--rule); margin-bottom: var(--space-1); }
html[data-ds] .acct-head-name { font: 600 13px/20px var(--font-sans); }
html[data-ds] .acct-head-role { font: var(--t-label); font-weight: 400; color: var(--ink-3); }
html[data-ds] .acct-item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  min-height: var(--ctl-h); padding: 0 var(--space-2);
  border: 0; border-radius: var(--r-1); background: none;
  color: var(--ink-1); font: var(--t-table); text-align: left; text-decoration: none; cursor: pointer;
}
html[data-ds] .acct-item:hover { background: var(--fill-1); text-decoration: none; }
html[data-ds] .acct-item .icon { color: var(--ink-3); }
html[data-ds] .acct-item kbd { margin-left: auto; }
html[data-ds] .acct-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) var(--space-2); }
html[data-ds] .acct-row-label { color: var(--ink-2); }
html[data-ds] .acct-seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line-ui); border-radius: var(--r-2); }
html[data-ds] .acct-seg button {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: 24px; padding: 0 var(--space-2);
  border: 0; border-radius: var(--r-1); background: none;
  font: var(--t-label); color: var(--ink-2); cursor: pointer;
}
html[data-ds] .acct-seg button:hover { background: var(--fill-1); color: var(--ink-1); }
html[data-ds] .acct-seg button[aria-pressed="true"] { background: var(--fill-2); color: var(--ink-1); box-shadow: inset 0 0 0 1px var(--line-ui); }
html[data-ds] .acct-sep { height: 1px; margin: var(--space-1) 0; background: var(--rule); }
html[data-ds] .acct-session { margin: 0; padding: var(--space-1) var(--space-2) var(--space-2); font: var(--t-label); font-weight: 400; color: var(--ink-3); }
html[data-ds] .acct-signout { margin: 0; }
html[data-ds] .acct-legal { margin-top: var(--space-1); padding: var(--space-2) var(--space-2) var(--space-1); border-top: 1px solid var(--rule); font: var(--t-label); font-weight: 400; color: var(--ink-3); }
html[data-ds] .acct-legal a { color: var(--ink-3); }
html[data-ds] .acct-legal a:hover { color: var(--accent); }
@media (max-width: 900px) {
  html[data-ds] .acct-menu { left: 8px !important; right: 8px !important; top: auto !important; bottom: 8px !important; width: auto; }
  html[data-ds] .acct-row-nav { display: none; }
}

/* Help (D25): the page guide opens beside the sidebar's foot. */
html[data-ds] body:has(.sidebar-v2) .help-panel {
  left: calc(var(--rail-w) + var(--space-3)); right: auto; bottom: var(--space-3);
  width: 360px; max-height: min(72vh, 640px);
}
html[data-ds] body.sidebar-mini:has(.sidebar-v2) .help-panel { left: calc(60px + var(--space-3)); }
html[data-ds] body.sidebar-collapsed:has(.sidebar-v2) .help-panel { left: var(--space-3); }
html[data-ds][data-nav="top"] body:has(.sidebar-v2) .help-panel { left: auto; right: var(--space-3); top: 64px; bottom: auto; }
html[data-ds] .help-panel-title { font: var(--t-head); letter-spacing: 0; text-transform: none; color: var(--ink-1); }
html[data-ds] .help-panel-title::before, html[data-ds] .help-tip-dot { display: none; }
html[data-ds] .help-panel-header { border-bottom: 1px solid var(--rule); }
html[data-ds] .help-tip { font: var(--t-table); color: var(--ink-2); }
html[data-ds] .help-tip-section { font: 600 12px/16px var(--font-sans); letter-spacing: var(--track-over); text-transform: uppercase; color: var(--ink-3); }
/* With the floating "?" gone, nothing needs room at the foot of the page. */
html[data-ds] body:has(.sidebar-v2) .main { padding-bottom: var(--space-16); }

/* ---------------------------------------------------------------------
   14. PHONE (900px and below): a 56px bar, everything else in the drawer
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  html[data-ds] body:has(.sidebar-v2) .main { padding-bottom: var(--space-10) !important; }
  html[data-ds] body:has(.sidebar-v2) .help-panel { left: 8px; right: 8px; bottom: 8px; width: auto; }
  html[data-ds] .sidebar.sidebar-v2 { width: 100%; height: auto; border-right: 0; border-bottom: 1px solid var(--rule); }
  html[data-ds] .sidebar-v2 .sidebar-logo { height: 56px; padding: 0 52px 0 var(--space-4); }
  html[data-ds] .sidebar-v2 .nav-phone-btn,
  html[data-ds] .sidebar-v2 .mobile-menu-btn {
    display: inline-grid; place-items: center;
    width: var(--hit); height: var(--hit); padding: 0;
    border: 0; border-radius: var(--r-2); background: none; color: var(--ink-2);
  }
  html[data-ds] .sidebar-v2 .nav-phone-search { margin-left: auto; }
  html[data-ds] .sidebar-v2 .mobile-menu-btn { position: absolute; right: var(--space-1); top: 6px; }
  html[data-ds] .sidebar-v2 .mobile-menu-btn[aria-expanded="true"] { background: var(--fill-2); color: var(--ink-1); }
  /* The drawer (P3-11): closed until the menu button opens it; then the
     context line, the switch, Recent, Starred and only the current area. */
  html[data-ds] .sidebar-v2 .sidebar-nav:not(.open) { display: none !important; }
  html[data-ds] .sidebar-v2 .sidebar-nav.open { display: flex !important; padding: var(--space-3) var(--space-4) var(--space-4); }
  html[data-ds] .sidebar-v2 .sidebar-nav.open .sidebar-context { display: flex !important; }
  html[data-ds] .sidebar-v2 .sidebar-nav.open .div-switcher {
    display: flex !important; order: 0; flex: none; padding: 2px !important;
    border-bottom: 1px solid var(--line-ui) !important;
  }
  html[data-ds] .sidebar-v2 .div-pill { min-height: var(--hit); }
  html[data-ds] .sidebar-v2 .nav-link,
  html[data-ds] .sidebar-v2 .nav-area-link,
  html[data-ds] .sidebar-v2 .nav-recent-link { min-height: var(--hit); }
  html[data-ds] .sidebar-v2 .nav-pin-btn { display: none; }
  html[data-ds] body:has(.sidebar-v2) .sidebar-mini-toggle,
  html[data-ds] body:has(.sidebar-v2) .sidebar-toggle { display: none !important; }
  html[data-ds]:not([data-nav="top"]) body:has(.sidebar-v2) #toast-container {
    left: var(--space-4); right: var(--space-4); bottom: var(--space-4); align-items: stretch;
  }
  /* 44px targets on phones (the account sheet, the switch, search, notices). */
  html[data-ds] .acct-item, html[data-ds] .acct-seg button { min-height: var(--hit); }
  html[data-ds] .acct-legal a { display: inline-block; padding: 14px 2px; }
  html[data-ds] .sidebar-v2 .nav-search-btn { height: var(--hit); }
  html[data-ds] .notice-hide { width: var(--hit); height: var(--hit); }
  html[data-ds] .notice-acts .btn, html[data-ds] .notice-acts a { min-height: var(--hit); display: inline-flex; align-items: center; }
}

/* The slice 3 follow-ups, F7: Risk and pricing's title (Intelligence / the
   file's reference) is one long word in this title type, and at 320px it
   pushed the page sideways. The reference takes a line of its own when the
   two do not fit side by side, and breaks there if it must; the label never
   shrinks, so "Intelligence" is never cut (the verifier's F7-title). The
   class is drawn from design level 2 only (intelligence/loan_detail.html). */
html[data-ds] .ld-title { min-width: 0; flex-wrap: wrap; row-gap: 0; overflow-wrap: anywhere; }
html[data-ds] .ld-title > span { flex: none; }