/* =====================================================================
   Design step 3 · The four screens  (experience plan, "Ledger")
   ---------------------------------------------------------------------
   Loaded after app.css, step-1.css and step-2.css when the design level
   is 3 or more (base.html). Today, Files, the file page and Auctions are
   new templates at this level (templates/ds3/), so every rule here is on
   an lg-* class those templates use, or on the sidebar's Today count that
   only this level draws: nothing restyles an existing page. (One rule lets
   a click on a toast's drawn close icon reach its button.)
   Tokens are step 2's (--paper, --ink-1/2/3, --rule, --accent, --space-*,
   --t-*); figures are tabular, money is ink, red and amber only with a word.

   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. THE PAGE AND ITS HEAD
   --------------------------------------------------------------------- */
html[data-ds] .lg-page { max-width: 1240px; color: var(--ink-1); }
/* Links in ledger green; a link drawn as a button keeps the button's ink.
   :where() adds no weight, so the page's own link colours still win. */
html[data-ds] .lg-page a:where(:not(.btn)) { color: var(--accent); }
html[data-ds] .lg-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap;
}
html[data-ds] .lg-head-main { min-width: 0; flex: 1 1 520px; }
html[data-ds] .lg-title-row { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
html[data-ds] .lg-title {
  margin: 0; font: var(--t-title); letter-spacing: var(--track-title); color: var(--ink-1);
}
html[data-ds] .lg-title-date { font: var(--t-head); font-weight: 400; color: var(--ink-3); }
html[data-ds] .lg-head-actions { display: flex; align-items: center; gap: var(--space-2); flex: none; padding-top: 2px; }
html[data-ds] .lg-h-sec { margin: 0; font: var(--t-head); color: var(--ink-1); }
html[data-ds] .lg-caption { font: var(--t-label); font-weight: 400; color: var(--ink-3); }
html[data-ds] .lg-sep { color: var(--ink-3); }
html[data-ds] .lg-strong { color: var(--ink-1); font-weight: 500; }
html[data-ds] .lg-warn { color: var(--warn); }
html[data-ds] .lg-late { color: var(--neg); }
html[data-ds] .lg-dash { color: var(--ink-3); }
html[data-ds] .lg-ph { white-space: nowrap; }

/* ---------------------------------------------------------------------
   2. SHARED PIECES: the lock, a stage, a segmented filter, a tip, buttons
   --------------------------------------------------------------------- */
html[data-ds] .lg-lock { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
html[data-ds] .lg-lock .icon { color: var(--ink-3); }
html[data-ds] .lg-stage { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
html[data-ds] .lg-stage .icon { color: var(--ink-3); }
html[data-ds] .lg-stage.is-unset { color: var(--ink-3); }

html[data-ds] .lg-seg {
  display: inline-flex; align-items: stretch; gap: 2px; padding: 2px;
  border: 1px solid var(--line-ui); border-radius: var(--r-2); background: var(--paper);
}
html[data-ds] .lg-seg > a, html[data-ds] .lg-seg > button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 26px; padding: 0 var(--space-3); border-radius: var(--r-1);
  font: var(--t-label); color: var(--ink-2); white-space: nowrap; text-decoration: none;
  background: transparent; border: 0; cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
html[data-ds] .lg-seg > a:hover, html[data-ds] .lg-seg > button:hover { color: var(--ink-1); background: var(--fill-1); text-decoration: none; }
html[data-ds] .lg-seg > [aria-current="true"], html[data-ds] .lg-seg > [aria-pressed="true"] {
  background: var(--fill-2); color: var(--ink-1); box-shadow: inset 0 0 0 1px var(--line-ui);
}

html[data-ds] .lg-tip { position: relative; }
html[data-ds] .lg-tip > summary {
  display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--ctl-h-sm);
  padding: 0 var(--space-2); border-radius: var(--r-2); cursor: pointer; list-style: none;
  font: var(--t-label); color: var(--ink-3);
}
html[data-ds] .lg-tip > summary::-webkit-details-marker { display: none; }
html[data-ds] .lg-tip > summary:hover, html[data-ds] .lg-tip[open] > summary { background: var(--fill-1); color: var(--ink-1); }
html[data-ds] .lg-tip-body {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; width: min(420px, 86vw);
  display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4);
  background: var(--float); border: 1px solid var(--rule-strong); border-radius: var(--r-2);
  box-shadow: var(--shadow-float); font: var(--t-table); color: var(--ink-2);
}
html[data-ds] .lg-tip-body p { margin: 0; }

html[data-ds] .lg-icon-btn {
  display: inline-grid; place-items: center; width: var(--ctl-h-sm); height: var(--ctl-h-sm);
  padding: 0; border: 0; border-radius: var(--r-2); background: transparent; color: var(--ink-3);
  cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
html[data-ds] .lg-icon-btn:hover { background: var(--fill-2); color: var(--ink-1); }
html[data-ds] .lg-star[aria-pressed="true"] { color: var(--ink-1); }
html[data-ds] .lg-star[aria-pressed="true"] .icon { fill: currentColor; }
html[data-ds] .lg-inline-form { display: inline; margin: 0; }
/* A toast's close button holds step 2's drawn icon; a click on the icon
   must reach the button app.js listens for, or a toast that waits to be
   closed (errors, warnings) never can be. */
html[data-ds] .toast-close .icon { pointer-events: none; }

/* ---------------------------------------------------------------------
   3. THE LEDGER: a ranked table with group and kind heads
   --------------------------------------------------------------------- */
html[data-ds] .lg-ledger {
  width: 100%; margin-top: var(--space-5); border-collapse: separate; border-spacing: 0;
  font: var(--t-table); background: transparent;
}
html[data-ds] .lg-ledger th, html[data-ds] .lg-ledger td { text-align: left; vertical-align: top; background: transparent; }
html[data-ds] .lg-ledger thead th {
  padding: 0 var(--space-3) var(--space-2); font: var(--t-label); color: var(--ink-3);
  border-bottom: 1px solid var(--rule-strong); white-space: nowrap; text-transform: none; letter-spacing: 0;
}
html[data-ds] .lg-ledger .r { text-align: right; font-variant-numeric: tabular-nums; }
html[data-ds] .lg-ledger td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--rule); }
html[data-ds] .lg-ledger td:first-child, html[data-ds] .lg-ledger th:first-child { padding-left: 0; }
html[data-ds] .lg-ledger td:last-child, html[data-ds] .lg-ledger th:last-child { padding-right: 0; }
html[data-ds] .lg-ledger .lg-c-who { width: 280px; }
html[data-ds] .lg-ledger .lg-c-amt { width: 136px; }
html[data-ds] .lg-ledger .lg-c-due { width: 156px; }
html[data-ds] .lg-ledger .lg-c-act { width: 168px; }
html[data-ds] .lg-ledger tr[hidden], html[data-ds] .lg-ledger tbody[hidden] { display: none !important; }

html[data-ds] .lg-grp th {
  padding: var(--space-8) 0 var(--space-2); border-bottom: 1px solid var(--rule-strong);
  font: var(--t-table); font-weight: 400; color: var(--ink-3); scroll-margin-top: var(--space-16);
}
html[data-ds] .lg-grp-body:first-of-type .lg-grp th { padding-top: var(--space-5); }
html[data-ds] .lg-grp-line { display: flex; align-items: baseline; gap: var(--space-1) var(--space-3); flex-wrap: wrap; }
html[data-ds] .lg-grp-name { margin: 0; font: var(--t-head); color: var(--ink-1); }
html[data-ds] .lg-k { margin-left: var(--space-2); font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
html[data-ds] .lg-grp-dates { font: var(--t-label); color: var(--ink-3); }
html[data-ds] .lg-grp-mix { font: var(--t-label); font-weight: 400; color: var(--ink-3); }
html[data-ds] .lg-page .lg-grp-mix a { color: var(--ink-3); white-space: nowrap; text-decoration: none; }
html[data-ds] .lg-page .lg-grp-mix a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
html[data-ds] .lg-empty td { color: var(--ink-3); padding: var(--space-3) 0; }

html[data-ds] .lg-kind th { padding: var(--space-4) 0 var(--space-1); font-weight: 400; scroll-margin-top: var(--space-16); }
html[data-ds] .lg-kind-line { display: inline-flex; align-items: center; gap: var(--space-2); }
html[data-ds] .lg-kind-line .icon { color: var(--ink-3); }
html[data-ds] .lg-kind-name { font: var(--t-table); font-weight: 600; color: var(--ink-2); }
html[data-ds] .lg-kind-line .lg-k { margin-left: 0; font: var(--t-label); }

html[data-ds] .lg-who-name { display: block; font: 500 14px/20px var(--font-sans); color: var(--ink-1); text-decoration: none; overflow-wrap: anywhere; }
html[data-ds] .lg-page a.lg-who-name { color: var(--ink-1); }
html[data-ds] .lg-page a.lg-who-name:hover { color: var(--accent); }
html[data-ds] .lg-who-sub { display: block; font: var(--t-label); font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }
html[data-ds] .lg-who-sub a { color: var(--ink-2); }
html[data-ds] .lg-why { color: var(--ink-2); }
html[data-ds] .lg-why + .lg-why { margin-top: 2px; }
html[data-ds] .lg-why .lg-det { color: var(--ink-3); }
html[data-ds] .lg-why .lg-det.lg-warn { color: var(--warn); font-weight: 500; }
html[data-ds] .lg-why .lg-det.lg-strong { color: var(--ink-1); font-weight: 500; }
html[data-ds] .lg-amt { display: block; color: var(--ink-1); font-variant-numeric: tabular-nums; font-weight: 500; }
html[data-ds] .lg-amt-sub, html[data-ds] .lg-due-sub { display: block; font: var(--t-label); font-weight: 400; color: var(--ink-3); white-space: nowrap; }
html[data-ds] .lg-due { display: block; color: var(--ink-1); font-variant-numeric: tabular-nums; }
html[data-ds] .lg-due-sub.lg-late { color: var(--neg); }
html[data-ds] .lg-acts { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); }
html[data-ds] .lg-ledger tbody tr.lg-row:hover td { background: var(--fill-1); }
html[data-ds] .lg-row.is-done td { opacity: .5; }
html[data-ds] .lg-more td { padding: var(--space-2) 0 var(--space-1); border-bottom: 0; }
html[data-ds] .lg-see-all {
  padding: 0; border: 0; background: none; cursor: pointer; min-height: 0;
  font: var(--t-label); color: var(--accent);
}
html[data-ds] .lg-see-all:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------------
   4. TODAY: the lede, the bar, the house book, since you last looked
   --------------------------------------------------------------------- */
html[data-ds] .lg-lede {
  margin: var(--space-4) 0 0; max-width: 900px;
  font: 400 24px/32px var(--font-sans); letter-spacing: var(--track-figure); color: var(--ink-2);
}
html[data-ds] .lg-lede a {
  color: var(--ink-1); font-weight: 500; font-variant-numeric: tabular-nums;
  text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 1px; text-underline-offset: 6px;
}
html[data-ds] .lg-lede a:hover { color: var(--accent); }
html[data-ds] .lg-lede-1, html[data-ds] .lg-lede-2 { display: block; }
html[data-ds] .lg-since-line { margin: var(--space-3) 0 0; font: var(--t-table); color: var(--ink-3); }
html[data-ds] .lg-since-line a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
html[data-ds] .lg-since-line a:hover { color: var(--accent); text-decoration-color: var(--accent); }
html[data-ds] .lg-bar { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }
html[data-ds] .lg-failed { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 0; font: var(--t-table); color: var(--warn); }

html[data-ds] .lg-statement, html[data-ds] .lg-since { margin-top: var(--space-10); }
html[data-ds] .lg-statement-head, html[data-ds] .lg-since-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
  padding-bottom: var(--space-2); border-bottom: 1px solid var(--rule-strong);
}
html[data-ds] .lg-statement-head .lg-lock .icon { vertical-align: -2px; }
html[data-ds] .lg-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
html[data-ds] .lg-page a.lg-cell {
  display: block; padding: var(--space-3) var(--space-5) var(--space-4); border-left: 1px solid var(--rule);
  color: inherit; text-decoration: none;
}
html[data-ds] .lg-page a.lg-cell:first-child { border-left: 0; padding-left: 0; }
html[data-ds] .lg-page a.lg-cell:hover .lg-cell-fig { color: var(--accent); }
html[data-ds] .lg-cell-label { display: block; font: var(--t-label); color: var(--ink-3); }
html[data-ds] .lg-cell-fig {
  display: block; margin-top: var(--space-1); font: var(--t-figure); letter-spacing: var(--track-figure);
  font-variant-numeric: tabular-nums; color: var(--ink-1); white-space: nowrap;
}
html[data-ds] .lg-cell-prov { display: block; margin-top: var(--space-1); font: var(--t-label); font-weight: 400; color: var(--ink-3); }
html[data-ds] .lg-foot { margin: var(--space-2) 0 0; font: var(--t-label); font-weight: 400; color: var(--ink-3); }

html[data-ds] .lg-since-list { margin: 0; padding: 0; list-style: none; }
html[data-ds] .lg-since-list li {
  display: grid; grid-template-columns: 120px 24px minmax(0, 1fr) auto; gap: 0 var(--space-3);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--rule);
}
html[data-ds] .lg-since-list li.lg-since-more { display: block; }
html[data-ds] .lg-since-when { font: var(--t-label); font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: 2px; }
html[data-ds] .lg-since-list .icon { color: var(--ink-3); margin-top: 2px; }
html[data-ds] .lg-since-what { color: var(--ink-2); }
html[data-ds] .lg-since-what b { font-weight: 500; color: var(--ink-1); }
html[data-ds] .lg-since-ref { font: var(--t-label); font-weight: 400; color: var(--ink-3); padding-top: 2px; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   5. DIALOGS AND SMALL FORMS
   --------------------------------------------------------------------- */
/* Today's Add task <dialog>. app.css's reset takes away the margin: auto
   that centres a modal dialog, so it is given back. The rule names the
   element: the keyboard sheet is a div of the same class and keeps step 2's
   look. */
html[data-ds] dialog.lg-dialog {
  width: min(560px, calc(100vw - 32px)); margin: auto; padding: var(--space-5) var(--space-6);
  border: 1px solid var(--rule-strong); border-radius: var(--r-2);
  background: var(--float); color: var(--ink-1); box-shadow: var(--shadow-float);
}
html[data-ds] dialog.lg-dialog::backdrop { background: rgba(17, 21, 27, .32); }
html[data-ds] .lg-form { display: grid; gap: var(--space-2); }
html[data-ds] .lg-form .lg-h-sec { margin-bottom: var(--space-2); }
html[data-ds] .lg-field-label { display: block; font: var(--t-label); color: var(--ink-2); margin-top: var(--space-2); }
html[data-ds] .lg-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); }
html[data-ds] .lg-dialog-acts { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }

/* ---------------------------------------------------------------------
   6. NARROW SCREENS: the ledger's rows stack (Step 4 finishes the phone)
   --------------------------------------------------------------------- */
@media (max-width: 760px) {
  html[data-ds] .lg-lede { font-size: 20px; line-height: 28px; }
  html[data-ds] .lg-ledger, html[data-ds] .lg-ledger tbody { display: block; }
  html[data-ds] .lg-ledger thead { display: none; }
  html[data-ds] .lg-ledger tr { display: block; }
  html[data-ds] .lg-ledger th { display: block; }
  html[data-ds] .lg-ledger .lg-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "who due" "why why" "amt act";
    gap: var(--space-1) var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--rule);
  }
  html[data-ds] .lg-ledger .lg-row td { display: block; width: auto; padding: 0; border: 0; }
  html[data-ds] .lg-ledger .lg-row .lg-c-who { grid-area: who; min-width: 0; }
  html[data-ds] .lg-ledger .lg-row .lg-c-why { grid-area: why; }
  html[data-ds] .lg-ledger .lg-row .lg-c-amt { grid-area: amt; text-align: left; }
  html[data-ds] .lg-ledger .lg-row .lg-c-due { grid-area: due; text-align: right; }
  html[data-ds] .lg-ledger .lg-row .lg-c-act { grid-area: act; }
  html[data-ds] .lg-amt, html[data-ds] .lg-amt-sub { display: inline; }
  html[data-ds] .lg-amt-sub { margin-left: var(--space-1); }
  html[data-ds] .lg-ledger .lg-row .btn { min-height: var(--hit); }
  html[data-ds] .lg-icon-btn { width: var(--hit); height: var(--hit); }
  html[data-ds] .lg-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-ds] .lg-page a.lg-cell:nth-child(3) { border-left: 0; padding-left: 0; }
  html[data-ds] .lg-since-list li { grid-template-columns: minmax(0, 1fr); }
  html[data-ds] .lg-since-list li .icon { display: none; }
  html[data-ds] .lg-tip-body { position: static; width: auto; margin-top: var(--space-2); }
}

/* ---------------------------------------------------------------------
   7. FILES: the book as a ledger (templates/ds3/files.html, D32)
   --------------------------------------------------------------------- */
html[data-ds] .lg-summary {
  margin: var(--space-2) 0 0; font: 500 15px/24px var(--font-sans); color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
html[data-ds] .lg-page .lg-summary a {
  color: var(--ink-1); text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 1px; text-underline-offset: 4px;
}
html[data-ds] .lg-page .lg-summary a:hover { color: var(--accent); }
html[data-ds] .lg-files-cap { display: block; margin: var(--space-1) 0 0; max-width: 920px; }
html[data-ds] .lg-files-cap .lg-lock .icon { vertical-align: -2px; }

/* The bar: search on the left, the table's tools on the right. */
html[data-ds] .lg-files-bar { justify-content: space-between; margin-top: var(--space-5); }
html[data-ds] .lg-search { position: relative; display: flex; align-items: center; gap: var(--space-2); flex: 1 1 220px; max-width: 360px; margin: 0; }
html[data-ds] .lg-search .form-control { flex: 1; min-width: 0; padding-left: 32px; }
html[data-ds] .lg-search-icon { position: absolute; left: 10px; top: 50%; display: inline-flex; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
html[data-ds] .lg-tools { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }

/* A menu of links or checkboxes under a button (step-2.js closes it on
   Escape or a click elsewhere: details[data-menu]). */
html[data-ds] .lg-menu { position: relative; }
html[data-ds] .lg-menu > summary { list-style: none; }
html[data-ds] .lg-menu > summary::-webkit-details-marker { display: none; }
html[data-ds] .lg-menu-panel {
  position: absolute; z-index: 30; top: calc(100% + 4px); right: 0; width: max-content; min-width: 240px; max-width: min(380px, 86vw);
  display: grid; gap: 2px; padding: var(--space-3);
  background: var(--float); border: 1px solid var(--rule-strong); border-radius: var(--r-2);
  box-shadow: var(--shadow-float); font: var(--t-table); color: var(--ink-2);
}
html[data-ds] .lg-menu-panel label { display: flex; align-items: center; gap: var(--space-2); min-height: 28px; cursor: pointer; color: var(--ink-1); }
html[data-ds] .lg-menu-panel .btn { justify-self: start; margin-top: var(--space-2); }
html[data-ds] .lg-menu-title { margin: 0 0 var(--space-1); font: var(--t-label); font-weight: 400; color: var(--ink-3); }
html[data-ds] .lg-page .lg-menu-links a {
  display: block; padding: 6px var(--space-2); border-radius: var(--r-1); color: var(--ink-1); text-decoration: none;
}
html[data-ds] .lg-page .lg-menu-links a:hover { background: var(--fill-1); color: var(--accent); }

/* The filters that are on, each with its own way out. */
html[data-ds] .lg-chips { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); font: var(--t-label); }
html[data-ds] .lg-chips-label { color: var(--ink-3); font-weight: 400; }
html[data-ds] .lg-chip {
  display: inline-flex; align-items: center; gap: 2px; min-height: 26px; padding: 0 2px 0 var(--space-3);
  border: 1px solid var(--line-ui); border-radius: 999px; background: var(--paper); color: var(--ink-1);
}
html[data-ds] .lg-page a.lg-chip-x { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--ink-3); }
html[data-ds] .lg-page a.lg-chip-x:hover { background: var(--fill-2); color: var(--ink-1); }

/* The saved views (D30): text tabs with their counts; the current one is
   underlined in ink. */
html[data-ds] .lg-tabs-row {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0 var(--space-4);
  margin-top: var(--space-6); border-bottom: 1px solid var(--rule);
}
html[data-ds] .lg-tabs { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); font: var(--t-table); }
html[data-ds] .lg-tabs-row .lg-showing { padding-bottom: var(--space-2); }
html[data-ds] .lg-page .lg-tabs a {
  display: inline-flex; align-items: baseline; gap: var(--space-1); padding: var(--space-2) 0;
  margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
html[data-ds] .lg-page .lg-tabs a:hover { color: var(--ink-1); border-bottom-color: var(--rule-strong); }
html[data-ds] .lg-page .lg-tabs a[aria-current="page"] { color: var(--ink-1); font-weight: 500; border-bottom-color: var(--ink-1); }
html[data-ds] .lg-tabs .lg-k { margin-left: 0; font: var(--t-label); color: var(--ink-3); font-variant-numeric: tabular-nums; }
html[data-ds] .lg-files-bar { margin-top: var(--space-3); }

/* The pickers: a button that says what is chosen, opening a list of
   links, each with its files and UPB on the right. */
html[data-ds] .lg-pickers { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
html[data-ds] .lg-pick-lbl { color: var(--ink-3); font-weight: 400; }
html[data-ds] .lg-pick-val { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ds] .lg-pickers .lg-menu-panel { left: 0; right: auto; }
html[data-ds] .lg-page .lg-opts a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
html[data-ds] .lg-page .lg-opts a[aria-current="true"] { background: var(--fill-2); font-weight: 500; }
html[data-ds] .lg-opt-name .icon { color: var(--ink-3); }
html[data-ds] .lg-opt-name.lg-stage { gap: var(--space-2); }
html[data-ds] .lg-opt-fig { font: var(--t-label); font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
html[data-ds] .lg-showing { margin-left: auto; align-self: center; font: var(--t-label); font-weight: 400; color: var(--ink-3); white-space: nowrap; }

/* More filters: the fields in a grid, the checkboxes under them. */
html[data-ds] .lg-more-on { margin-left: 2px; color: var(--ink-3); font-weight: 400; }
html[data-ds] .lg-menu-panel.lg-more-panel { width: min(560px, calc(100vw - 32px)); max-width: min(560px, calc(100vw - 32px)); gap: var(--space-3); }
/* No taller than the room below it (step-3.js sets --lg-room as it opens):
   it scrolls inside, and its scroll bar says there is more. */
html[data-ds] .lg-menu-panel[data-lg-fit] { max-height: var(--lg-room, none); overflow-y: auto; overscroll-behavior: contain; }
html[data-ds] .lg-more-form { display: grid; gap: var(--space-2); }
/* Paste a list (Q-16): the box under More filters' own, and the line over
   the table that says what it found. */
html[data-ds] .lg-paste-form { display: grid; gap: var(--space-1); padding-top: var(--space-3); border-top: 1px solid var(--rule); }
html[data-ds] .lg-menu-panel .lg-paste-form label { min-height: 0; font: var(--t-label); color: var(--ink-2); cursor: default; }
html[data-ds] .lg-paste-form textarea { width: 100%; min-height: 72px; resize: vertical; font: var(--t-table); }
html[data-ds] .lg-paste-form .lg-more-hint { margin-left: 0; }
html[data-ds] .lg-paste-line { margin: var(--space-4) 0 var(--space-2); font: var(--t-table); color: var(--ink-2); }
html[data-ds] .lg-paste-line .lg-attn-icon { color: var(--ink-3); }
html[data-ds] .lg-paste-line b { font-weight: 600; color: var(--ink-1); font-variant-numeric: tabular-nums; }
html[data-ds] .lg-paste-miss { color: var(--ink-1); }
/* Each number whole on its line (a hyphen is no place to break one); only
   one longer than the line wraps, anywhere. */
html[data-ds] .lg-paste-no { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
html[data-ds] .lg-paste-line .lg-copy { vertical-align: -3px; }
html[data-ds] .lg-paste-line + .lg-attn { margin-top: 0; }
html[data-ds] .lg-more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); }
html[data-ds] .lg-menu-panel label.lg-more-field { display: grid; gap: 2px; min-height: 0; font: var(--t-label); color: var(--ink-2); cursor: default; }
html[data-ds] .lg-more-field .form-control { width: 100%; min-width: 0; }
html[data-ds] .lg-menu-panel label.lg-more-check { display: block; min-height: 0; padding: 2px 0; color: var(--ink-1); }
html[data-ds] .lg-more-hint { display: block; margin-left: 24px; font: var(--t-label); font-weight: 400; color: var(--ink-3); }
html[data-ds] .lg-more-acts { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
html[data-ds] .lg-more-acts .btn { margin-top: 0; }

/* D16, the quiet State Ribbon: one grey bar per loan stage, sized by its
   share of the files in view (--lg-n, set per segment), with a 2px gap.
   Counts on hover and focus; the current stage in ink-2. */
html[data-ds] .lg-ribbon { display: flex; gap: 2px; max-width: 920px; margin-top: var(--space-3); }
html[data-ds] .lg-rib-seg {
  position: relative; flex: var(--lg-n, 1) 1 0; min-width: 8px; height: 24px;
  display: flex; align-items: center; border-radius: var(--r-1);
}
/* The count beside a segment on hover and on keyboard focus (a title shows
   on neither keyboard focus nor touch); a touch screen gets the line below. */
html[data-ds] .lg-rib-tip {
  position: absolute; z-index: 5; top: calc(100% + 2px); left: 0; display: none; white-space: nowrap;
  padding: 2px var(--space-2); border: 1px solid var(--rule-strong); border-radius: var(--r-1);
  background: var(--float); box-shadow: var(--shadow-float); font: var(--t-label); color: var(--ink-1);
  pointer-events: none;
}
html[data-ds] .lg-rib-seg:hover .lg-rib-tip, html[data-ds] .lg-rib-seg:focus-visible .lg-rib-tip { display: block; }
html[data-ds] .lg-rib-seg:last-child .lg-rib-tip { left: auto; right: 0; }
html[data-ds] .lg-rib-legend { display: none; margin: var(--space-1) 0 0; font: var(--t-label); font-weight: 400; color: var(--ink-3); }
@media (hover: none) {
  html[data-ds] .lg-rib-legend { display: block; }
}
html[data-ds] .lg-rib-bar { display: block; width: 100%; height: 8px; border-radius: 2px; background: var(--rule-strong); }
html[data-ds] .lg-rib-seg:hover .lg-rib-bar { background: var(--ink-3); }
html[data-ds] .lg-rib-seg.is-on .lg-rib-bar { background: var(--ink-2); box-shadow: 0 0 0 1px var(--line-ui); }
html[data-ds] .lg-rib-seg:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }

/* Needs attention (P2-03): the one line above the table. */
html[data-ds] .lg-attn {
  display: block; margin: var(--space-4) 0 0; padding: var(--space-2) 0; border-top: 1px solid var(--rule);
  font: var(--t-table); color: var(--ink-2);
}
html[data-ds] .lg-attn-icon { display: inline-flex; vertical-align: -3px; margin-right: var(--space-2); color: var(--warn); }
html[data-ds] .lg-attn b { font-weight: 600; color: var(--ink-1); font-variant-numeric: tabular-nums; }
html[data-ds] .lg-attn + .lg-table-wrap { margin-top: 0; }

/* The selection (Q-12): a tick on each file you can change; while any is
   ticked, the statement and its menus take the toolbar's place, in the
   toolbar's own box where they fit on one line, so the list below does not
   move. Stuck to the top while the rows go by, its paper and rule are drawn
   as shadows (no box of their own), and --lg-sel-h (step-3.js) is all it
   covers: the table's head sticks under it, and a row brought into view
   stops below it. */
html[data-ds] .lg-files-table .lg-c-sel { box-sizing: border-box; width: 32px; min-width: 32px; padding-right: 0; }
html[data-ds] .lg-files-table td.lg-c-sel { padding-top: calc(var(--space-2) + 2px); }
html[data-ds] .lg-check, html[data-ds] [data-lg-check-all] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
html[data-ds] .lg-files-table tbody tr.is-sel td { background: var(--fill-1); }
html[data-ds] .lg-files-bar.is-selecting { display: none; }
html[data-ds] .lg-sel {
  --lg-sel-pad: var(--space-2);
  position: sticky; top: var(--lg-sel-pad); z-index: 4;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
  min-height: 32px; margin-top: var(--space-3); background: var(--paper);
  box-shadow: 0 calc(-1 * var(--lg-sel-pad)) 0 var(--paper), 0 var(--lg-sel-pad) 0 var(--paper),
              0 calc(var(--lg-sel-pad) + 1px) 0 var(--rule-strong);
}
html[data-ds][data-nav="top"] .lg-sel { top: calc(var(--topbar-h, 52px) + var(--lg-sel-pad)); }
html[data-ds] .lg-sel[hidden] { display: none; }
html[data-ds] .lg-sel-stmt { margin: 0; font: var(--t-table); color: var(--ink-2); font-variant-numeric: tabular-nums; }
html[data-ds] .lg-sel-stmt b { color: var(--ink-1); font-weight: 600; }
html[data-ds] .lg-sel-acts { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); margin-left: auto; }
html[data-ds] .lg-sel-acts > .btn, html[data-ds] .lg-sel-acts summary.btn { margin-top: 0; }
html[data-ds] .lg-sel-menu summary .icon { margin-left: 2px; }
html[data-ds] .lg-menu-panel.lg-sel-opts { gap: 0; min-width: 220px; padding: var(--space-2); }
html[data-ds] .lg-sel-opts > button {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  width: 100%; min-height: 32px; padding: 6px var(--space-2); border: 0; border-radius: var(--r-1);
  background: none; color: var(--ink-1); font: var(--t-table); text-align: left; cursor: pointer;
}
html[data-ds] .lg-sel-opts > button:hover, html[data-ds] .lg-sel-opts > button:focus-visible { background: var(--fill-1); color: var(--accent); }
html[data-ds] .lg-sel-opts .lg-opt-fig { color: var(--ink-3); font: var(--t-label); font-weight: 400; }
html[data-ds] .lg-sel-pick { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin-top: var(--space-1); padding: var(--space-2) var(--space-2) 0; border-top: 1px solid var(--rule); }
html[data-ds] .lg-menu-panel .lg-sel-pick label { flex-basis: 100%; min-height: 0; font: var(--t-label); color: var(--ink-3); cursor: default; }
html[data-ds] .lg-sel-pick .form-control { width: auto; flex: 1 1 140px; }
html[data-ds] .lg-menu-panel .lg-sel-pick .btn { margin-top: 0; }
html[data-ds] .lg-files.is-selecting .lg-table thead th { top: var(--lg-sel-h, 0px); }
html[data-ds][data-nav="top"] .lg-files.is-selecting .lg-table thead th { top: calc(var(--topbar-h, 52px) + var(--lg-sel-h, 0px)); }
html[data-ds] .lg-files.is-selecting .lg-table-wrap.has-extra .lg-table thead th { top: 0; }

/* The preview beside the list (D33): an aside of 300 to 360px that sticks
   in view while the rows go by; the table narrows beside it, never under it:
   the stage column and the name give a little, and where the list still
   would not fit step-3.js opens the file instead (as on a tablet). The wrap
   scrolls rather than crop, should a long word still overflow. The row the
   preview shows is tinted; the keyboard's row carries an edge. */
html[data-ds] .lg-split.is-peek { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 25vw, 360px); gap: var(--space-6); align-items: start; }
html[data-ds] .lg-split-main { min-width: 0; }
html[data-ds] .lg-split.is-peek .lg-table-wrap { overflow-x: auto; }
html[data-ds] .lg-split.is-peek .lg-files-table .lg-c-stage { width: 140px; }
html[data-ds] .lg-split.is-peek .lg-files-table .lg-c-file { min-width: 150px; }
html[data-ds] .lg-peek {
  position: sticky; top: calc(var(--lg-sel-h, 0px) + var(--space-4));
  max-height: calc(100vh - var(--lg-sel-h, 0px) - var(--space-8)); overflow-y: auto;
  padding: var(--space-1) 0 var(--space-5) var(--space-6); border-left: 1px solid var(--rule);
}
html[data-ds][data-nav="top"] .lg-peek {
  top: calc(var(--topbar-h, 52px) + var(--lg-sel-h, 0px) + var(--space-4));
  max-height: calc(100vh - var(--topbar-h, 52px) - var(--lg-sel-h, 0px) - var(--space-8));
}
html[data-ds] .lg-peek[hidden] { display: none; }
html[data-ds] .lg-files-table tbody tr.is-peek td { background: var(--accent-tint); }
html[data-ds] .lg-files-table tbody tr[aria-current="true"] td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
html[data-ds] .lg-peek-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
html[data-ds] .lg-peek-ref { display: inline-flex; align-items: center; gap: var(--space-1); font: var(--t-label); color: var(--ink-3); }
html[data-ds] .lg-peek-name { margin: var(--space-2) 0 0; font: 600 22px/30px var(--font-sans); letter-spacing: var(--track-title); color: var(--ink-1); overflow-wrap: anywhere; }
html[data-ds] .lg-peek-owner { margin: var(--space-1) 0 0; font: var(--t-label); font-weight: 400; color: var(--ink-3); }
html[data-ds] .lg-peek-status { margin: var(--space-2) 0 0; font: var(--t-table); color: var(--ink-2); }
html[data-ds] .lg-peek-status .lg-stage { display: inline-flex; vertical-align: top; }
html[data-ds] .lg-peek-due { white-space: nowrap; }
html[data-ds] .lg-peek-sec { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--rule); }
html[data-ds] .lg-kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); margin: 0; font: var(--t-table); }
html[data-ds] .lg-kv dt { color: var(--ink-2); }
html[data-ds] .lg-kv dd { margin: 0; text-align: right; color: var(--ink-1); font-variant-numeric: tabular-nums; }
html[data-ds] .lg-prov { display: block; font: var(--t-label); font-weight: 400; color: var(--ink-3); }
html[data-ds] .lg-prov.lg-warn { color: var(--warn); }
html[data-ds] .lg-peek-overline { margin: 0; font: var(--t-label); color: var(--ink-3); }
html[data-ds] .lg-peek-touch { margin: var(--space-1) 0 0; color: var(--ink-1); }
html[data-ds] .lg-peek-quote { margin: var(--space-1) 0 0; font: var(--t-table); color: var(--ink-2); }
html[data-ds] .lg-peek-sec .lg-caption { display: block; margin-top: 2px; }
html[data-ds] .lg-peek-phones { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: var(--space-2) 0 0; }
html[data-ds] .lg-peek-phone { display: inline-flex; align-items: center; gap: var(--space-1); }
html[data-ds] .lg-page .lg-peek-phones a { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ink-1); }
html[data-ds] .lg-peek-foot { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--rule); }
html[data-ds] .lg-peek-msg { margin: var(--space-3) 0; font: var(--t-table); color: var(--ink-2); }
@media (max-width: 900px) {
  html[data-ds] .lg-split.is-peek { display: block; }
  html[data-ds] .lg-peek { display: none !important; }
  html[data-ds] .lg-sel { top: var(--mobile-bar-h, 0px); }
  html[data-ds] .lg-files.is-selecting .lg-table thead th { top: calc(var(--mobile-bar-h, 0px) + var(--lg-sel-h, 0px)); }
}

/* The charts: folded until asked for (the same remembered choice as today's
   list, rff-vault-charts, set before paint by base.html). */
html[data-ds] .lg-charts { margin-top: var(--space-5); padding: var(--space-4) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
html[data-ds][data-charts-hidden] .lg-charts { display: none; }
html[data-ds] .lg-charts-head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
html[data-ds] .lg-charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); margin-top: var(--space-3); }
html[data-ds] .lg-chart { margin: 0; min-width: 0; }
html[data-ds] .lg-chart figcaption { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 30px; margin-bottom: var(--space-2); font: var(--t-label); color: var(--ink-2); }
html[data-ds] .lg-chart canvas { max-width: 100%; }
html[data-ds] .lg-charts-fail { margin: var(--space-3) 0 0; font: var(--t-table); color: var(--warn); }

/* The table. The page is the scroller, so the head stays in view while the
   rows go by; the columns fold before they could overflow (container
   queries below), and overflow-x: clip is only the guard. With optional
   columns on the table can be wider than the page: then its box scrolls
   both ways, the head sticks at the top of that box, and the Borrower ·
   File # column stays put while the others scroll by (map 2.8). That box
   is never taller than the screen below the bars and above what follows it
   on the page (--lg-wrap-after, measured by step-3.js), so the page can
   never scroll its head away under the selection bar or off the top. */
html[data-ds] .lg-table-wrap { margin-top: var(--space-4); container: lgfiles / inline-size; overflow-x: clip; }
html[data-ds] .lg-table-wrap.has-extra {
  overflow: auto;
  max-height: calc(100vh - var(--lg-sel-h, 0px) - var(--lg-wrap-after, 0px) - var(--space-5));
}
html[data-ds][data-nav="top"] .lg-table-wrap.has-extra {
  max-height: calc(100vh - var(--topbar-h, 52px) - var(--lg-sel-h, 0px) - var(--lg-wrap-after, 0px) - var(--space-5));
}
html[data-ds] .lg-table { width: 100%; border-collapse: separate; border-spacing: 0; font: var(--t-table); background: transparent; }
html[data-ds] .lg-table th, html[data-ds] .lg-table td { text-align: left; vertical-align: top; background: transparent; }
html[data-ds] .lg-table thead th {
  position: sticky; top: 0; z-index: 2; background: var(--paper);
  padding: var(--space-2) var(--space-3); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule-strong);
  font: var(--t-label); color: var(--ink-3); white-space: nowrap; text-transform: none; letter-spacing: 0;
}
html[data-ds][data-nav="top"] .lg-table thead th { top: var(--topbar-h, 52px); }
html[data-ds] .lg-table-wrap.has-extra .lg-table thead th { top: 0; }
html[data-ds] .lg-table-wrap.has-extra .lg-files-table .lg-c-file {
  position: sticky; left: 0; z-index: 1; background: var(--paper); box-shadow: 1px 0 0 var(--rule);
}
html[data-ds] .lg-table-wrap.has-extra .lg-files-table .lg-c-sel {
  position: sticky; left: 0; z-index: 1; background: var(--paper);
}
html[data-ds] .lg-table-wrap.has-extra .lg-files-table .lg-c-sel + .lg-c-file { left: 32px; }
html[data-ds] .lg-table-wrap.has-extra .lg-files-table tbody tr:hover td.lg-c-sel,
html[data-ds] .lg-table-wrap.has-extra .lg-files-table .lg-total td.lg-c-sel { background: var(--fill-1); }
html[data-ds] .lg-table-wrap.has-extra .lg-files-table thead th.lg-c-file,
html[data-ds] .lg-table-wrap.has-extra .lg-files-table thead th.lg-c-sel { z-index: 3; }
html[data-ds] .lg-table-wrap.has-extra .lg-files-table tbody tr:hover td.lg-c-file,
html[data-ds] .lg-table-wrap.has-extra .lg-files-table .lg-total td.lg-c-file,
html[data-ds] .lg-table-wrap.has-extra .lg-files-table tbody tr.is-sel td.lg-c-sel,
html[data-ds] .lg-table-wrap.has-extra .lg-files-table tbody tr.is-sel td.lg-c-file { background: var(--fill-1); }
html[data-ds] .lg-table-wrap.has-extra .lg-files-table tbody tr.is-peek td.lg-c-sel,
html[data-ds] .lg-table-wrap.has-extra .lg-files-table tbody tr.is-peek td.lg-c-file { background: var(--accent-tint); }
/* A row the page lands on (#a-<id>, after a bucket's stage changes) sits
   below the sticky head, not under it. */
html[data-ds] .lg-frow { scroll-margin-top: calc(48px + var(--lg-sel-h, 0px)); }
html[data-ds][data-nav="top"] .lg-frow { scroll-margin-top: calc(var(--topbar-h, 52px) + 48px + var(--lg-sel-h, 0px)); }
html[data-ds] .lg-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--rule); }
html[data-ds] .lg-table td:first-child, html[data-ds] .lg-table th:first-child { padding-left: 0; }
html[data-ds] .lg-table td:last-child, html[data-ds] .lg-table th:last-child { padding-right: 0; }
/* Files' rows tint when ticked or previewed and the keyboard's row carries
   an edge, so the first column stands a little in from the tint's edge. */
html[data-ds] .lg-files-table td:first-child, html[data-ds] .lg-files-table th:first-child { padding-left: var(--space-2); }
html[data-ds] .lg-table .r { text-align: right; font-variant-numeric: tabular-nums; }
html[data-ds] .lg-page a.lg-sort { display: inline-flex; align-items: center; gap: 2px; color: var(--ink-3); text-decoration: none; }
html[data-ds] .lg-page a.lg-sort:hover, html[data-ds] .lg-page a.lg-sort.is-on { color: var(--ink-1); }
html[data-ds] .lg-sort .icon { color: var(--ink-1); }

html[data-ds] .lg-files-table .lg-c-file { min-width: 180px; }
html[data-ds] .lg-files-table .lg-c-owner { width: 150px; }
html[data-ds] .lg-files-table .lg-c-stage { width: 168px; }
html[data-ds] .lg-files-table .lg-c-upb { width: 104px; }
html[data-ds] .lg-files-table .lg-c-rate { width: 76px; }
html[data-ds] .lg-files-table .lg-c-next { width: 116px; }
html[data-ds] .lg-files-table .lg-c-act { width: 160px; }
html[data-ds] .lg-files-table .lg-c-act .lg-cm-sub { white-space: nowrap; }
html[data-ds] .lg-files-table .lg-c-flags { width: 184px; }
html[data-ds] .lg-files-table .lg-c-opt { white-space: nowrap; }
html[data-ds] .lg-files-table tbody tr:hover td { background: var(--fill-1); }
html[data-ds] .lg-files-table tbody tr:hover .lg-who-name { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
html[data-ds] .lg-files-table .lg-who-name { overflow-wrap: anywhere; }
html[data-ds] .lg-files-table .lg-who-sub { white-space: normal; }
html[data-ds] .lg-cm-date { display: block; color: var(--ink-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
html[data-ds] .lg-cm-sub { display: block; font: var(--t-label); font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }
html[data-ds] .lg-cm-sub.lg-late { color: var(--neg); }
html[data-ds] .lg-cm-sub.lg-strong { color: var(--ink-1); font-weight: 500; }
html[data-ds] .lg-ink-2 { color: var(--ink-2); }
html[data-ds] .lg-nw { white-space: nowrap; }
html[data-ds] .lg-fig, html[data-ds] .lg-tnum { font-variant-numeric: tabular-nums; }
html[data-ds] .lg-fold-owner { display: none; }
/* The stage line is a line of its own, as tall as the others, so every
   cell's second line starts at the same height. */
html[data-ds] .lg-files-table .lg-c-stage .lg-stage { display: flex; }

/* Flags: words, each opening the part of the file it is about. */
html[data-ds] .lg-flags { display: flex; flex-wrap: wrap; gap: 2px var(--space-3); }
html[data-ds] .lg-flag { font: var(--t-label); color: var(--ink-1); }
html[data-ds] .lg-page a.lg-flag { color: var(--ink-1); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
html[data-ds] .lg-page a.lg-flag:hover { color: var(--accent); text-decoration-color: var(--accent); }
html[data-ds] .lg-bucket { display: block; margin-top: 2px; font: var(--t-label); color: var(--ink-2); }
html[data-ds] .lg-flags + .lg-bucket { margin-top: var(--space-1); }
html[data-ds] .lg-bucket-form { display: inline; margin: 0; }
html[data-ds] .lg-bucket-sel {
  display: inline-block; width: auto; min-height: 24px; max-width: 100%; padding: 0 2px;
  border: 1px solid transparent; border-radius: var(--r-1);
  background: transparent; font: inherit; color: var(--ink-1); cursor: pointer;
}
html[data-ds] .lg-bucket-sel:hover, html[data-ds] .lg-bucket-sel:focus-visible { border-color: var(--line-ui); background: var(--paper); }
html[data-ds] .lg-bucket-sel.is-blocked { color: var(--warn); }

/* The totals: the page, then the whole view under a double rule. */
html[data-ds] .lg-files-table tfoot td { padding-top: var(--space-3); padding-bottom: var(--space-3); border-bottom: 0; color: var(--ink-1); font-weight: 600; }
html[data-ds] .lg-files-table tfoot .lg-cm-sub { font-weight: 500; }
html[data-ds] .lg-files-table .lg-subtotal td { border-top: 1px solid var(--rule-strong); font-weight: 500; }
html[data-ds] .lg-files-table .lg-total td { background: var(--fill-1); border-top: 3px double var(--rule-total); }
html[data-ds] .lg-tot-name { display: block; }

/* The foot: where you are, the pages, how many rows a page holds. */
html[data-ds] .lg-tfoot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-3) 0; font: var(--t-label); color: var(--ink-3); }
html[data-ds] .lg-range { margin-right: auto; font-variant-numeric: tabular-nums; }
html[data-ds] .lg-pages, html[data-ds] .lg-per { display: inline-flex; align-items: center; gap: 2px; }
html[data-ds] .lg-per > span { margin-right: var(--space-1); }
html[data-ds] .lg-pages > a, html[data-ds] .lg-pages > span, html[data-ds] .lg-per > a {
  display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 var(--space-2);
  border-radius: var(--r-2); font: var(--t-label); color: var(--ink-2); text-decoration: none; font-variant-numeric: tabular-nums;
}
html[data-ds] .lg-page .lg-pages > a, html[data-ds] .lg-page .lg-per > a { color: var(--ink-2); }
html[data-ds] .lg-page .lg-pages > a:hover, html[data-ds] .lg-page .lg-per > a:hover { background: var(--fill-1); color: var(--ink-1); }
html[data-ds] .lg-pages > [aria-current="page"], html[data-ds] .lg-page .lg-per > a[aria-current="true"] { background: var(--fill-2); color: var(--ink-1); font-weight: 600; }
html[data-ds] .lg-files-empty { margin-top: var(--space-6); }

/* Compact rows (the account menu's density, or the bar's Compact button):
   one line per file (D32). Each cell's second line moves inline after a
   middle dot, and what does not fit its column is cut short with an
   ellipsis instead of wrapping. The flags stay whole: they hold the bucket
   menus, which are never cut. */
html[data-ds][data-density="compact"] .lg-files-table { table-layout: fixed; }
html[data-ds][data-density="compact"] .lg-files-table td,
html[data-ds][data-density="compact"] .lg-files-table th { padding: var(--space-1) var(--space-2); }
html[data-ds][data-density="compact"] .lg-files-table .lg-c-owner { width: 130px; }
html[data-ds][data-density="compact"] .lg-files-table .lg-c-stage { width: 160px; }
html[data-ds][data-density="compact"] .lg-files-table .lg-c-upb { width: 88px; }
html[data-ds][data-density="compact"] .lg-files-table .lg-c-rate { width: 60px; }
html[data-ds][data-density="compact"] .lg-files-table .lg-c-next { width: 140px; }
html[data-ds][data-density="compact"] .lg-files-table .lg-c-act { width: 160px; }
html[data-ds][data-density="compact"] .lg-files-table .lg-c-flags { width: 170px; }
html[data-ds][data-density="compact"] .lg-files-table .lg-c-opt { width: 110px; }
html[data-ds][data-density="compact"] .lg-files-table tbody td:not(.lg-c-flags) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ds][data-density="compact"] .lg-files-table tbody .lg-who-name,
html[data-ds][data-density="compact"] .lg-files-table tbody .lg-who-sub,
html[data-ds][data-density="compact"] .lg-files-table tbody .lg-cm-date,
html[data-ds][data-density="compact"] .lg-files-table tbody .lg-cm-sub { display: inline; }
html[data-ds][data-density="compact"] .lg-files-table tbody .lg-c-stage .lg-stage { display: inline-flex; vertical-align: top; }
html[data-ds][data-density="compact"] .lg-files-table tbody .lg-who-sub::before,
html[data-ds][data-density="compact"] .lg-files-table tbody .lg-cm-date + .lg-cm-sub::before,
html[data-ds][data-density="compact"] .lg-files-table tbody .lg-stage + .lg-cm-sub::before { content: " · "; color: var(--ink-3); }

/* Folding: under 1080px the owner joins the File # line; under 860px the
   rate and the last activity step back (the preview beside the list will
   carry them). The flags never do: they are what needs doing. */
@container lgfiles (max-width: 1080px) {
  html[data-ds] .lg-files-table .lg-c-owner { display: none; }
  html[data-ds] .lg-files-table .lg-fold-owner { display: inline; }
}
@container lgfiles (max-width: 860px) {
  html[data-ds] .lg-files-table .lg-c-rate,
  html[data-ds] .lg-files-table .lg-c-act { display: none; }
}
@media (max-width: 900px) {
  html[data-ds] .lg-table thead th { top: var(--mobile-bar-h, 0px); }
  html[data-ds] .lg-table-wrap.has-extra { max-height: calc(100vh - var(--mobile-bar-h, 0px) - var(--lg-sel-h, 0px) - var(--lg-wrap-after, 0px) - var(--space-5)); }
  html[data-ds] .lg-frow { scroll-margin-top: calc(var(--mobile-bar-h, 0px) + 48px + var(--lg-sel-h, 0px)); }
}
/* Phones: each file stacks (Step 4 finishes the phone). */
@media (max-width: 760px) {
  html[data-ds] .lg-files-table, html[data-ds] .lg-files-table tbody, html[data-ds] .lg-files-table tfoot { display: block; }
  html[data-ds] .lg-files-table thead { display: none; }
  html[data-ds] .lg-files-table tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3);
    padding: var(--space-3) 0; border-bottom: 1px solid var(--rule);
  }
  html[data-ds] .lg-files-table td { display: block; width: auto; padding: 0; border: 0; text-align: left; }
  html[data-ds] .lg-files-table td:first-child { padding-left: 0; }
  html[data-ds] .lg-files-table .lg-c-file { grid-column: 1; grid-row: 1; min-width: 0; }
  html[data-ds] .lg-files-table .lg-c-next { grid-column: 2; grid-row: 1; text-align: right; }
  html[data-ds] .lg-files-table .lg-c-stage { grid-column: 1; grid-row: 2; }
  html[data-ds] .lg-files-table td.lg-c-upb { grid-column: 2; grid-row: 2; text-align: right; }
  html[data-ds] .lg-files-table td.lg-c-flags { grid-column: 1 / -1; grid-row: 3; }
  html[data-ds] .lg-files-table .lg-c-sel { display: none; }
  html[data-ds] .lg-files-table td.lg-c-flags:not(:has(*)) { display: none; }
  html[data-ds] .lg-files-table td.lg-c-opt, html[data-ds] .lg-files-table td.lg-c-rec { display: none; }
  html[data-ds] .lg-files-table tfoot td:empty { display: none; }
  html[data-ds] .lg-files-table .lg-total td, html[data-ds] .lg-files-table .lg-subtotal td { background: transparent; border-top: 0; }
  html[data-ds] .lg-files-table .lg-total { border-top: 3px double var(--rule-total); background: var(--fill-1); }
  html[data-ds] .lg-table-wrap.has-extra { overflow: visible; max-height: none; }
  html[data-ds] .lg-table-wrap.has-extra .lg-files-table .lg-c-file { position: static; box-shadow: none; background: transparent; }
  html[data-ds] .lg-search { max-width: none; }
  html[data-ds] .lg-per > a, html[data-ds] .lg-pages > a { min-width: var(--hit); height: var(--hit); }
  /* The tools take their own line, and a menu opens across it, never off
     the screen's edge. */
  html[data-ds] .lg-tools, html[data-ds] .lg-pickers { position: relative; flex-basis: 100%; }
  html[data-ds] .lg-tools .lg-menu, html[data-ds] .lg-pickers .lg-menu { position: static; }
  html[data-ds] .lg-menu-panel,
  html[data-ds] .lg-pickers .lg-menu-panel { left: 0; right: 0; width: auto; min-width: 0; max-width: none; }
  html[data-ds] .lg-more-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-ds] .lg-showing { margin-left: 0; }
  html[data-ds] .lg-tabs { gap: 0 var(--space-4); }
}

/* ---------------------------------------------------------------------
   8. THE SIDEBAR: Today's count (D24, templates/_sidebar_v2.html)
   --------------------------------------------------------------------- */
/* The star shows in a row's right-hand lane on hover and focus (phones have
   no star); the Today row keeps that lane clear, as every other row does,
   so the star never covers the number. The icon rail has no room for
   digits: a dot. */
@media (min-width: 901px) {
  html[data-ds]:not([data-nav="top"]) .sidebar-v2 .nav-link:has(> .nav-today-count) { padding-right: var(--space-8); }
}
html[data-ds]:not([data-nav="top"]) body.sidebar-mini .sidebar-v2 .nav-today-count {
  position: absolute; top: 7px; right: 7px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--ink-2); font-size: 0; overflow: hidden;
}

/* ---------------------------------------------------------------------
   9. THE FILE PAGE (map-file.md; Ledger file.html, style.css 656-806):
      a statement. templates/ds3/file.html, file_page.py; step-3-file.js.
   --------------------------------------------------------------------- */
html[data-ds] .fp3-crumbrow { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
html[data-ds] .fp3-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font: var(--t-label); color: var(--ink-3); }
html[data-ds] .lg-page .fp3-crumbs a { color: var(--ink-3); text-decoration: none; }
html[data-ds] .lg-page .fp3-crumbs a:hover { color: var(--accent); }
html[data-ds] .fp3-crumbs .icon { color: var(--rule-strong); }
html[data-ds] .fp3-crumbs [aria-current] { color: var(--ink-2); font-variant-numeric: tabular-nums; }
html[data-ds] .fp3-pager { display: flex; align-items: center; gap: var(--space-1); font: var(--t-label); color: var(--ink-3); white-space: nowrap; }
html[data-ds] .fp3-pos { margin: 0 var(--space-2); font-variant-numeric: tabular-nums; }
html[data-ds] .fp3-pos b { color: var(--ink-1); font-weight: 500; }
html[data-ds] .fp3-pager .lg-icon-btn[aria-disabled="true"], html[data-ds] .fp3-sticky .lg-icon-btn[aria-disabled="true"] { opacity: .45; cursor: default; }

/* One-line notices above the header: a private book, a deceased borrower,
   a closed file (with Reopen for a site admin). */
html[data-ds] .fp3-notice {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
  margin: var(--space-3) 0 0; padding: var(--space-2) 0; border-bottom: 1px solid var(--rule);
  font: var(--t-table); color: var(--ink-2);
}
html[data-ds] .fp3-notice > .icon { flex: none; color: var(--ink-3); }
html[data-ds] .fp3-notice b { color: var(--ink-1); font-weight: 600; }
html[data-ds] .fp3-notice.is-neg > .icon, html[data-ds] .fp3-notice.is-neg b { color: var(--neg); }
html[data-ds] .fp3-notice > span { flex: 1 1 320px; min-width: 0; }
html[data-ds] .fp3-reopen { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
html[data-ds] .fp3-reopen .form-control { width: auto; }

/* The header: the name, the address, the numbers the file answers to, and
   the file's actions. */
html[data-ds] .fp3-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4) var(--space-6); flex-wrap: wrap; margin-top: var(--space-4); }
html[data-ds] .fp3-head-main { min-width: 0; flex: 1 1 420px; }
html[data-ds] .fp3-title { margin: 0; overflow-wrap: anywhere; }
html[data-ds] .fp3-addr { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: var(--space-1) 0 0; color: var(--ink-2); }
html[data-ds] .lg-page .fp3-addr a { display: inline-flex; align-items: center; gap: var(--space-1); font: var(--t-label); }
html[data-ds] .fp3-ids { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin: var(--space-2) 0 0; font: var(--t-label); color: var(--ink-3); }
html[data-ds] .fp3-id { display: inline-flex; align-items: center; gap: var(--space-1); }
html[data-ds] .fp3-id .lg-tnum { color: var(--ink-1); font-weight: 500; }
html[data-ds] .fp3-xid .lg-tnum { color: var(--ink-2); }
html[data-ds] .fp3-meta { margin: var(--space-1) 0 0; font: var(--t-label); color: var(--ink-3); }
html[data-ds] .fp3-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
html[data-ds] .fp3-actions > .btn { margin: 0; }
html[data-ds] .fp3-menu { min-width: 220px; padding: var(--space-2); gap: 0; }
html[data-ds] .fp3-menu form { margin: 0; }
html[data-ds] .lg-page .fp3-menu a, html[data-ds] .fp3-menu button {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 32px;
  padding: 6px 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] .lg-page .fp3-menu a:hover, html[data-ds] .fp3-menu button:hover,
html[data-ds] .lg-page .fp3-menu a:focus-visible, html[data-ds] .fp3-menu button:focus-visible { background: var(--fill-1); color: var(--accent); }
html[data-ds] .fp3-menu .icon { color: var(--ink-3); }
html[data-ds] .fp3-menu button.is-neg, html[data-ds] .fp3-menu button.is-neg .icon { color: var(--neg); }

/* The status line, once on the page (P3-05), and Update status. */
html[data-ds] .fp3-status {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  margin-top: var(--space-5); padding: var(--space-2) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  font: var(--t-table); color: var(--ink-2);
}
html[data-ds] .fp3-lbl { margin-right: var(--space-2); font: var(--t-label); font-weight: 400; color: var(--ink-3); }
html[data-ds] .fp3-si { display: inline-flex; align-items: center; white-space: nowrap; }
html[data-ds] .fp3-si .lg-stage { color: var(--ink-1); font-weight: 500; }
html[data-ds] .fp3-vr { width: 1px; height: 16px; background: var(--rule-strong); }
html[data-ds] .fp3-nx { font-variant-numeric: tabular-nums; }
html[data-ds] .fp3-nx b { color: var(--ink-1); font-weight: 500; }
html[data-ds] .fp3-nx .lg-sep { margin: 0 var(--space-1); }
html[data-ds] .fp3-update { margin-left: auto; }
html[data-ds] .fp3-update > summary { margin: 0; }
html[data-ds] .lg-menu-panel.fp3-status-panel {
  width: min(640px, calc(100vw - 32px)); max-width: min(640px, calc(100vw - 32px));
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); padding: var(--space-4);
}
html[data-ds] .fp3-panel-h { margin: 0 0 var(--space-2); font: var(--t-label); color: var(--ink-1); font-weight: 600; }
html[data-ds] .fp3-panel-h .lg-dim { font-weight: 400; }
html[data-ds] .fp3-panel-note { margin: 0; font: var(--t-table); color: var(--ink-2); }
html[data-ds] .fp3-choose fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 2px; }
html[data-ds] .lg-menu-panel label.fp3-choice { display: flex; align-items: flex-start; gap: var(--space-2); min-height: 0; padding: 6px var(--space-1); border-radius: var(--r-1); cursor: pointer; }
html[data-ds] .lg-menu-panel label.fp3-choice:hover { background: var(--fill-1); }
html[data-ds] .fp3-choice input { margin: 3px 0 0; accent-color: var(--accent); }
html[data-ds] .fp3-choice-text { display: grid; gap: 2px; min-width: 0; color: var(--ink-1); }
html[data-ds] .fp3-def { font: var(--t-label); font-weight: 400; color: var(--ink-3); }
html[data-ds] .fp3-needs { display: grid; gap: 2px; margin-top: var(--space-2); font: var(--t-label); color: var(--ink-2); }
html[data-ds] .fp3-needs[hidden] { display: none; }
html[data-ds] .fp3-needs .form-control { width: auto; }
html[data-ds] .fp3-choose .btn { margin-top: var(--space-3); }

/* The six figures, whole dollars, each with where it comes from. */
html[data-ds] .fp3-figures { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: var(--space-5); }
html[data-ds] .fp3-fig { min-width: 0; padding: 0 var(--space-4); border-left: 1px solid var(--rule); }
html[data-ds] .fp3-fig:first-child { padding-left: 0; border-left: 0; }
html[data-ds] .fp3-fig-label { font: var(--t-label); color: var(--ink-3); white-space: nowrap; }
html[data-ds] .fp3-fig-val { margin-top: var(--space-1); font: var(--t-figure); letter-spacing: var(--track-figure); color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ds] .fp3-unit { margin-left: 2px; font: var(--t-head); font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
html[data-ds] .fp3-prov { margin-top: var(--space-1); font: var(--t-label); font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
html[data-ds] .fp3-prov + .fp3-prov { margin-top: 0; }
html[data-ds] .fp3-prov.lg-warn { color: var(--warn); }
html[data-ds] .fp3-prov .icon { margin-right: 2px; vertical-align: -2px; }
html[data-ds] .fp3-mk { margin-left: 2px; font: var(--t-label); color: var(--ink-2); }
html[data-ds] .lg-page .fp3-mk a { color: inherit; text-decoration: none; }
html[data-ds] .fp3-footnote { display: flex; gap: var(--space-1); margin: var(--space-4) 0 0; max-width: 920px; font: var(--t-label); font-weight: 400; color: var(--ink-3); }

/* The usual path of loan stages. */
html[data-ds] .fp3-path { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) 0; margin-top: var(--space-6); font: var(--t-table); }
html[data-ds] .fp3-path-lbl { margin-right: var(--space-4); font: var(--t-label); color: var(--ink-3); }
html[data-ds] .fp3-step { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-3); white-space: nowrap; }
html[data-ds] .fp3-step + .fp3-step::before { content: ""; display: inline-block; width: 28px; height: 1px; margin: 0 var(--space-3); background: var(--rule-strong); }
html[data-ds] .fp3-step.is-now { color: var(--ink-1); font-weight: 500; }
html[data-ds] .fp3-step.is-branch::before { border-top: 1px dashed var(--rule-strong); background: none; }
html[data-ds] .fp3-days { font: var(--t-label); font-weight: 400; color: var(--ink-3); }

/* Five tabs, then the tab's content beside a side column that stays. */
html[data-ds] .fp3-tabs-row { margin-top: var(--space-6); border-bottom: 1px solid var(--rule); }
html[data-ds] .lg-page .fp3-tabs a {
  display: inline-flex; align-items: baseline; gap: var(--space-1); padding: var(--space-2) 0;
  margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
html[data-ds] .lg-page .fp3-tabs a:hover { color: var(--ink-1); border-bottom-color: var(--rule-strong); }
html[data-ds] .lg-page .fp3-tabs a[aria-selected="true"] { color: var(--ink-1); font-weight: 500; border-bottom-color: var(--ink-1); }
html[data-ds] .fp3-tab-note { font: var(--t-label); font-weight: 400; color: var(--ink-3); }
html[data-ds] .fp3-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-10); margin-top: var(--space-4); align-items: start; }
html[data-ds] .fp3-main { min-width: 0; }
html[data-ds] .fp3-side { min-width: 0; }
html[data-ds] .fp3-history { margin-top: var(--space-5); }

/* The sticky bar, once the header has scrolled away: fixed under the top
   bar or beside the sidebar, never over it. */
html[data-ds] .fp3-sticky {
  position: fixed; top: 0; left: var(--rail-w); right: 0; z-index: 25;
  display: flex; align-items: center; gap: var(--space-4); min-height: 56px; padding: var(--space-2) var(--space-8);
  background: var(--float); box-shadow: var(--shadow-bar);
  opacity: 0; visibility: hidden; transition: opacity .16s ease, visibility 0s linear .16s;
}
html[data-ds] .fp3-sticky.is-on { opacity: 1; visibility: visible; transition: opacity .16s ease; }
html[data-ds] body.sidebar-mini .fp3-sticky { left: 60px; }
html[data-ds] body.sidebar-collapsed .fp3-sticky, html[data-ds][data-nav="top"] .fp3-sticky { left: 0; }
html[data-ds][data-nav="top"] .fp3-sticky { top: var(--topbar-h, 52px); }
html[data-ds] .fp3-sticky-who { display: grid; min-width: 0; }
html[data-ds] .fp3-sticky-name { font: var(--t-head); color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ds] .fp3-sticky-ref { font: var(--t-label); color: var(--ink-3); }
html[data-ds] .fp3-sticky-it { display: grid; font: var(--t-table); color: var(--ink-1); white-space: nowrap; font-variant-numeric: tabular-nums; }
html[data-ds] .fp3-sticky-it .fp3-lbl { margin: 0; }
/* What is brought into view (an old anchor, Log call, a field reached by
   Tab) lands below the sticky bar and any bar above it; step-3-file.js keeps
   --fp3-sticky-h at the bar's height. */
html[data-ds]:has(.fp3) { scroll-padding-top: calc(var(--fp3-sticky-h, 56px) + var(--space-3)); }
html[data-ds][data-nav="top"]:has(.fp3) { scroll-padding-top: calc(var(--topbar-h, 52px) + var(--fp3-sticky-h, 56px) + var(--space-3)); }
html[data-ds] .fp3-sp { flex: 1; }
html[data-ds] .fp3-sticky .btn { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  html[data-ds] .fp3-sticky, html[data-ds] .fp3-sticky.is-on { transition: none; }
}

/* Narrower: the figures go three, then two, to a row; the side column goes
   under the tabs; the sticky bar sits under the phone's top bar and keeps
   the name, the next action and Log call (Step 4 docks the phone's bar). */
@media (max-width: 1240px) {
  html[data-ds] .fp3-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-4); }
  html[data-ds] .fp3-fig:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
}
@media (max-width: 1080px) {
  html[data-ds] .fp3-body { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}
@media (max-width: 900px) {
  html[data-ds] .fp3-sticky { top: var(--mobile-bar-h, 0px); left: 0; padding: var(--space-2) var(--space-4); gap: var(--space-3); }
  html[data-ds] .fp3-sticky .fp3-vr, html[data-ds] .fp3-sticky .fp3-pos,
  html[data-ds] .fp3-sticky .lg-icon-btn, html[data-ds] .fp3-sticky a[href^="tel:"] { display: none; }
  html[data-ds] .lg-menu-panel.fp3-status-panel { grid-template-columns: minmax(0, 1fr); }
  html[data-ds]:has(.fp3), html[data-ds][data-nav="top"]:has(.fp3) { scroll-padding-top: calc(var(--mobile-bar-h, 0px) + var(--fp3-sticky-h, 56px) + var(--space-3)); }
}
@media (max-width: 760px) {
  html[data-ds] .fp3-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-ds] .fp3-fig, html[data-ds] .fp3-fig:nth-child(3n + 1) { padding: 0 var(--space-3); border-left: 1px solid var(--rule); }
  html[data-ds] .fp3-fig:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
  html[data-ds] .fp3-update { margin-left: 0; }
  html[data-ds] .fp3-status .fp3-vr { display: none; }
  html[data-ds] .fp3-update .lg-menu-panel { position: static; width: auto; max-width: none; max-height: none; overflow: visible; margin-top: var(--space-2); }
  html[data-ds] .fp3-tabs-row { overflow-x: auto; }
  html[data-ds] .fp3-tabs { flex-wrap: nowrap; }
  html[data-ds] .lg-page .fp3-tabs a:focus-visible { outline-offset: -2px; }
  html[data-ds] .fp3-path { gap: var(--space-2) var(--space-4); }
  html[data-ds] .fp3-step { white-space: normal; }
  html[data-ds] .fp3-step + .fp3-step::before { display: none; }
  html[data-ds] .fp3-sticky-it:not(:last-of-type) { display: none; }
}

/* The Overview's Activity column (map-file 2.8; Ledger 125-228): the head
   and its segments, Up next, Log the call, the timeline by month and the
   payoff statement. */
html[data-ds] .fp3-act { display: grid; gap: var(--space-5); min-width: 0; margin-bottom: var(--space-6); }
html[data-ds] .fp3-act-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
html[data-ds] .fp3-h { margin: 0; font: var(--t-head); color: var(--ink-1); }
html[data-ds] .fp3-over { margin: 0; font: var(--t-label); font-weight: 600; letter-spacing: var(--track-over, .04em); text-transform: uppercase; color: var(--ink-3); }
html[data-ds] .fp3-over kbd { margin-left: var(--space-1); padding: 0 4px; border: 1px solid var(--rule-strong); border-radius: var(--r-1); font: var(--t-label); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
html[data-ds] .fp3-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border: 1px solid var(--rule); border-radius: var(--r-2); }
html[data-ds] .fp3-seg button {
  display: inline-flex; align-items: baseline; gap: var(--space-1); min-height: 28px; padding: 4px var(--space-2);
  border: 0; border-radius: var(--r-1); background: none; color: var(--ink-2); font: var(--t-table); cursor: pointer;
}
html[data-ds] .fp3-seg button:hover { color: var(--ink-1); background: var(--fill-1); }
html[data-ds] .fp3-seg button[aria-pressed="true"] { color: var(--ink-1); background: var(--fill-2); font-weight: 500; }
html[data-ds] .fp3-seg .lg-k { font-weight: 400; }
html[data-ds] .fp3-addnote { margin-left: auto; }
html[data-ds] .fp3-addnote > summary { margin: 0; }
html[data-ds] .lg-menu-panel.fp3-form-panel { width: min(440px, calc(100vw - 32px)); max-width: min(440px, calc(100vw - 32px)); padding: var(--space-4); }
html[data-ds] .fp3-form { display: grid; gap: var(--space-3); margin: 0; }
html[data-ds] .fp3-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
html[data-ds] .lg-menu-panel label.fp3-field, html[data-ds] label.fp3-field { display: grid; gap: 2px; min-height: 0; font: var(--t-label); color: var(--ink-2); cursor: default; }
html[data-ds] .fp3-field .form-control { width: 100%; min-width: 0; }
html[data-ds] .fp3-form-acts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
html[data-ds] .fp3-form-acts .btn { margin: 0; }
html[data-ds] .fp3-caption { margin: 0; font: var(--t-label); font-weight: 400; color: var(--ink-3); }

/* Up next: the open call backs and the file's open tasks. */
html[data-ds] .fp3-upnext { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--rule); border-radius: var(--r-2); }
html[data-ds] .fp3-un-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--rule); }
html[data-ds] .fp3-over + .fp3-un-row { padding-top: 0; border-top: 0; }
html[data-ds] .fp3-un-what { display: grid; gap: 2px; min-width: 0; font: var(--t-table); color: var(--ink-1); }
html[data-ds] .fp3-un-what .fp3-prov { margin: 0; }
html[data-ds] .fp3-un-move > summary { margin: 0; }

/* Log the call: chips that are radio buttons, so the keyboard and the
   form need no script. */
html[data-ds] .fp3-composer { display: grid; gap: var(--space-3); margin: 0; padding: var(--space-4); border: 1px solid var(--rule-strong); border-radius: var(--r-2); background: var(--float); }
html[data-ds] .fp3-lc-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); min-width: 0; margin: 0; padding: 0; border: 0; }
html[data-ds] fieldset.fp3-lc-row { display: block; }
html[data-ds] fieldset.fp3-lc-row > legend { float: left; padding: 6px 0 0; }
html[data-ds] .fp3-lc-lbl { width: 112px; flex: none; margin-right: var(--space-3); font: var(--t-label); color: var(--ink-3); }
html[data-ds] .fp3-lc-row > label.fp3-lc-lbl { margin-right: 0; }
html[data-ds] .fp3-chips { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
html[data-ds] .fp3-chip { position: relative; display: inline-flex; margin: 0; }
html[data-ds] .fp3-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
html[data-ds] .fp3-chip span {
  display: inline-flex; align-items: center; min-height: 28px; padding: 3px var(--space-3);
  border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--paper); color: var(--ink-2); font: var(--t-table); white-space: nowrap;
}
html[data-ds] .fp3-chip:hover span { color: var(--ink-1); border-color: var(--line-ui); }
html[data-ds] .fp3-chip input:checked + span { border-color: var(--accent-fill); background: var(--accent-fill); color: var(--on-accent-fill); }
html[data-ds] .fp3-chip input:focus-visible + span { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
html[data-ds] .fp3-lc-date { width: auto; }
html[data-ds] .fp3-lc-type { width: auto; }
html[data-ds] .fp3-lc-note { align-items: flex-start; flex-wrap: nowrap; }
html[data-ds] .fp3-lc-note textarea { flex: 1; min-width: 0; min-height: 40px; resize: vertical; }
html[data-ds] .fp3-lc-note .btn { margin: 0; }
html[data-ds] .fp3-lc-more > summary { width: max-content; cursor: pointer; font: var(--t-label); color: var(--accent); }
html[data-ds] .fp3-lc-more[open] > summary { margin-bottom: var(--space-2); }

/* The timeline by month. */
html[data-ds] .fp3-tl { display: grid; min-width: 0; }
html[data-ds] .fp3-tl-month { margin-top: var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--rule); }
html[data-ds] .fp3-tl-month:first-child { margin-top: 0; }
html[data-ds] .fp3-tl-entry { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
html[data-ds] .fp3-tl-entry[hidden], html[data-ds] .fp3-tl-month[hidden], html[data-ds] .fp3-tl-edit[hidden] { display: none; }
html[data-ds] .fp3-tl-entry.entry-new { background: var(--fill-1); }
html[data-ds] .fp3-tl-date { padding-top: 2px; font: var(--t-label); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
html[data-ds] .fp3-tl-kind { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--space-1); font: var(--t-label); color: var(--ink-2); }
html[data-ds] .fp3-tl-kind .icon { color: var(--ink-3); }
html[data-ds] .fp3-tl-title { font: var(--t-table); color: var(--ink-1); overflow-wrap: anywhere; }
html[data-ds] .fp3-tl-meta { margin-top: 2px; font: var(--t-label); font-weight: 400; color: var(--ink-3); overflow-wrap: anywhere; }
html[data-ds] .fp3-tl-body { margin-top: var(--space-1); font: var(--t-table); color: var(--ink-1); white-space: pre-wrap; overflow-wrap: anywhere; }
html[data-ds] .fp3-tl-body.fp3-fold { max-height: 9em; overflow: hidden; }
html[data-ds] .fp3-tl-body.fp3-fold.is-open { max-height: none; }
html[data-ds] .fp3-fold-btn { margin-top: var(--space-1); padding: 0; border: 0; background: none; color: var(--accent); font: var(--t-label); cursor: pointer; }
html[data-ds] .fp3-tl-acts { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
html[data-ds] .fp3-tl-acts form { margin: 0; }
html[data-ds] .fp3-tl-acts .btn { margin: 0; }
html[data-ds] .fp3-tl-acts .btn.is-neg { color: var(--neg); }
html[data-ds] .fp3-tl-edit { margin-top: var(--space-2); padding: var(--space-3); border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--float); }
html[data-ds] .fp3-tl-by { font: var(--t-label); color: var(--ink-3); white-space: nowrap; }
html[data-ds] .fp3-empty { margin: 0; padding: var(--space-3) 0; font: var(--t-table); color: var(--ink-3); }
html[data-ds] .fp3-audit { margin-top: var(--space-4); }
html[data-ds] .fp3-audit > summary { width: max-content; cursor: pointer; font: var(--t-table); color: var(--accent); }
html[data-ds] .fp3-audit .fp3-prov { display: inline; margin-left: var(--space-2); }
html[data-ds] .fp3-audit-list { display: grid; margin: var(--space-2) 0 0; padding: 0; list-style: none; }
html[data-ds] .fp3-audit-list li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--rule); font: var(--t-label); color: var(--ink-2); }
html[data-ds] .fp3-audit-text { overflow-wrap: anywhere; }

/* The payoff statement: cents in the cells, the unit in the head, a
   double rule over the total. */
html[data-ds] .fp3-stmt { display: grid; gap: var(--space-3); }
html[data-ds] .fp3-stmt-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
html[data-ds] .fp3-stmt-head .btn { margin: 0 0 0 auto; }
html[data-ds] .fp3-stmt-t { width: 100%; max-width: 640px; border-collapse: collapse; font: var(--t-table); color: var(--ink-1); }
html[data-ds] .fp3-stmt-t td { padding: 6px 0; border-bottom: 1px solid var(--rule); }
html[data-ds] .fp3-stmt-t td.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: var(--space-4); }
html[data-ds] .fp3-stmt-t tr.has-note td { border-bottom: 0; padding-bottom: 0; }
html[data-ds] .fp3-stmt-note td { padding-top: 2px; font: var(--t-label); font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }
html[data-ds] .fp3-stmt-total td { border-top: 3px double var(--ink-1); border-bottom: 0; font-weight: 600; }
html[data-ds] .fp3-stmt-warn { display: flex; align-items: flex-start; gap: var(--space-1); margin: 0; font: var(--t-label); font-weight: 400; color: var(--warn); }
html[data-ds] .fp3-stmt-warn.is-neg { color: var(--neg); }
html[data-ds] .fp3-stmt-warn .icon { margin-top: 2px; flex: none; }
html[data-ds] .fp3-stmt-foot { margin: 0; font: var(--t-label); font-weight: 400; color: var(--ink-3); }
@media (max-width: 760px) {
  html[data-ds] .fp3-tl-entry { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  html[data-ds] .fp3-tl-by { order: 2; }
  html[data-ds] .fp3-audit-list li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  html[data-ds] .fp3-lc-lbl { width: auto; }
  html[data-ds] fieldset.fp3-lc-row > legend { float: none; padding: 0 0 var(--space-1); }
  html[data-ds] .fp3-un-row { flex-wrap: wrap; }
  html[data-ds] .fp3-addnote { margin-left: 0; }
  html[data-ds] .fp3-chip span { min-height: 44px; }
}

/* The side column (map-file 2.11; Ledger 231-290): People, Owner, Notes,
   the recommendation, File details and Look up, on every tab. */
html[data-ds] .fp3-side { display: grid; gap: var(--space-5); align-content: start; }
html[data-ds] .fp3-sec { display: grid; gap: var(--space-2); min-width: 0; padding-bottom: var(--space-4); border-bottom: 1px solid var(--rule); }
html[data-ds] .fp3-sec:last-child { border-bottom: 0; }
html[data-ds] .fp3-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
html[data-ds] .fp3-sec-h { margin: 0; font: var(--t-label); font-weight: 600; letter-spacing: var(--track-over, .04em); text-transform: uppercase; color: var(--ink-3); }
html[data-ds] .fp3-sec-lead { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font: var(--t-table); font-weight: 500; color: var(--ink-1); }
html[data-ds] .fp3-sec-line { margin: 0; font: var(--t-table); color: var(--ink-2); overflow-wrap: anywhere; }
html[data-ds] .fp3-sec-body { font: var(--t-table); color: var(--ink-1); white-space: pre-wrap; overflow-wrap: anywhere; }
html[data-ds] .fp3-sec-body.fp3-fold { max-height: 9em; overflow: hidden; }
html[data-ds] .fp3-sec-body.fp3-fold.is-open { max-height: none; }
html[data-ds] .fp3-dim { color: var(--ink-3); }
html[data-ds] .fp3-tag { display: inline-flex; align-items: center; margin-left: var(--space-2); padding: 0 6px; border: 1px solid var(--rule); border-radius: 999px; font: var(--t-label); font-weight: 400; color: var(--ink-3); white-space: nowrap; }
html[data-ds] .fp3-person { display: grid; gap: 2px; padding: var(--space-2) 0; border-top: 1px solid var(--rule); min-width: 0; }
html[data-ds] .fp3-person.is-primary { border-top: 0; padding-top: 0; }
html[data-ds] .fp3-person.entry-new { background: var(--fill-1); }
html[data-ds] .fp3-person-name { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 0; font: var(--t-table); font-weight: 500; color: var(--ink-1); }
html[data-ds] .fp3-person-menu { margin-left: auto; }
html[data-ds] .fp3-person-menu > summary { margin: 0; }
html[data-ds] .fp3-person-line { display: flex; align-items: center; gap: var(--space-1); min-width: 0; font: var(--t-table); }
html[data-ds] .lg-page .fp3-person-line a { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; overflow-wrap: anywhere; color: var(--ink-1); }
html[data-ds] .fp3-person-line .icon { color: var(--ink-3); flex: none; }
html[data-ds] .fp3-person-meta { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); font: var(--t-label); font-weight: 400; color: var(--ink-3); overflow-wrap: anywhere; }
html[data-ds] .fp3-person-meta.lg-warn { color: var(--warn); }
html[data-ds] .fp3-person-meta.is-neg { color: var(--neg); }
html[data-ds] .fp3-person-notes > summary { cursor: pointer; font: var(--t-label); color: var(--accent); }
html[data-ds] .fp3-group { margin-top: var(--space-2); }
html[data-ds] .fp3-group.is-warn { color: var(--warn); }
html[data-ds] .fp3-disclose > summary { width: max-content; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); font: var(--t-table); color: var(--accent); }
html[data-ds] .fp3-disclose[open] > summary { margin-bottom: var(--space-2); }
html[data-ds] .fp3-disclose .fp3-form-row { grid-template-columns: minmax(0, 1fr); }
html[data-ds] .fp3-form-foot { margin: var(--space-2) 0 0; }
html[data-ds] .fp3-link-btn { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0; border: 0; background: none; color: var(--accent); font: var(--t-label); cursor: pointer; text-decoration: none; }
html[data-ds] .fp3-last-note { display: grid; gap: 2px; }
html[data-ds] .fp3-quick-note { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; }
html[data-ds] .fp3-quick-note textarea { flex: 1; min-width: 0; min-height: 36px; resize: vertical; }
html[data-ds] .fp3-quick-note .btn { margin: 0; }
html[data-ds] .fp3-rec-path { display: inline-flex; align-items: center; padding: 2px var(--space-2); border-radius: var(--r-1); background: var(--fill-2); color: var(--ink-1); font: var(--t-table); font-weight: 600; }
html[data-ds] .fp3-dl { display: grid; gap: 2px; margin: 0; }
html[data-ds] .fp3-dl > div { display: flex; justify-content: space-between; gap: var(--space-3); font: var(--t-table); }
html[data-ds] .fp3-dl dt { color: var(--ink-2); }
html[data-ds] .fp3-dl dd { margin: 0; color: var(--ink-1); text-align: right; font-variant-numeric: tabular-nums; }
html[data-ds] .fp3-dl dd.is-neg { color: var(--neg); }
html[data-ds] .fp3-list { margin: 0; padding-left: 18px; display: grid; gap: 2px; font: var(--t-table); color: var(--ink-2); }
html[data-ds] .fp3-list.is-warn { color: var(--warn); }
html[data-ds] .fp3-alts { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
html[data-ds] .fp3-alts li { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); font: var(--t-table); color: var(--ink-2); }
html[data-ds] .fp3-ssn { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
html[data-ds] .fp3-ssn .btn { margin: 0; }
html[data-ds] .fp3-lookup { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-3); }
html[data-ds] .lg-page .fp3-lookup a { display: inline-flex; align-items: center; gap: var(--space-1); font: var(--t-table); }

html[data-ds] .fp3-lc-acts { display: flex; flex-direction: column; gap: var(--space-1); }
html[data-ds] .fp3-lc-acts .btn { margin: 0; white-space: nowrap; }

/* The F1 review's fixes. B1: a tab's hidden count text stays inside its row. */
html[data-ds] .fp3-tabs-row, html[data-ds] .fp3-seg { position: relative; }
/* B2: in the sticky bar only the name gives way. */
html[data-ds] .fp3-sticky-who { flex: 0 1 auto; }
html[data-ds] .fp3-sticky .btn, html[data-ds] .fp3-sticky .lg-icon-btn, html[data-ds] .fp3-sticky .fp3-pos { flex: none; }
html[data-ds] .fp3-sticky .fp3-pos, html[data-ds] .fp3-sticky-ref { white-space: nowrap; }
/* B4: a note mark does not lift its figure. */
html[data-ds] .fp3-mk { line-height: 0; }
/* B9, R6: the figures go three across as soon as the column is too narrow
   for six whole-dollar values, whatever the sidebar does; never cut. */
html[data-ds] .fp3-figs-wrap { container-type: inline-size; }
@container (max-width: 1080px) {
  html[data-ds] .fp3-figs-wrap .fp3-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-4); }
  html[data-ds] .fp3-figs-wrap .fp3-fig { padding: 0 var(--space-4); border-left: 1px solid var(--rule); }
  html[data-ds] .fp3-figs-wrap .fp3-fig:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
}
@container (max-width: 520px) {
  html[data-ds] .fp3-figs-wrap .fp3-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-ds] .fp3-figs-wrap .fp3-fig, html[data-ds] .fp3-figs-wrap .fp3-fig:nth-child(3n + 1) { padding: 0 var(--space-3); border-left: 1px solid var(--rule); }
  html[data-ds] .fp3-figs-wrap .fp3-fig:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
}
/* R17a: the path's note line. B11: where the path wraps, no connector
   points at nothing. */
html[data-ds] .fp3-path-note { margin: var(--space-2) 0 0; max-width: 920px; font: var(--t-label); font-weight: 400; color: var(--ink-3); }
@media (max-width: 1080px) {
  html[data-ds] .fp3-path { gap: var(--space-2) var(--space-4); }
  html[data-ds] .fp3-step + .fp3-step::before { display: none; }
}
/* R13: the mini sidebar's offset is the left nav's only. */
html[data-ds][data-nav="top"] body.sidebar-mini .fp3-sticky { left: 0; }
/* P2: the number to call in the header, and its icon in the sticky bar on a phone. */
html[data-ds] .fp3-call { font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  html[data-ds] .fp3-sticky a[href^="tel:"] { display: inline-flex; }
  html[data-ds] .fp3-sticky .fp3-tel-num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* P3, P4: what today's page kept in its own style block. */
html[data-ds] .fp3 .detail-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); align-items: stretch; }
html[data-ds] .fp3 .detail-2col:has(> .card:only-child) { grid-template-columns: minmax(0, 1fr); }
html[data-ds] .fp3 .detail-2col > .card { margin-bottom: 0; }
@media (max-width: 1240px) { html[data-ds] .fp3 .detail-2col { grid-template-columns: minmax(0, 1fr); } }
html[data-ds] .fp3 a.linkified { text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
html[data-ds] .fp3 .tab-empty { font: var(--t-table); color: var(--ink-3); padding: var(--space-2) 0; }
@keyframes fp3-entry-new { from { background-color: var(--fill-2); } to { background-color: transparent; } }
html[data-ds] .fp3 .entry-new, html[data-ds] .fp3 .entry-new > td { animation: fp3-entry-new 1800ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  html[data-ds] .fp3 .entry-new, html[data-ds] .fp3 .entry-new > td { animation: none; }
}
/* R2: a printout names the file; the sticky bar never prints. */
@media print {
  html[data-ds] .fp3-head { display: flex !important; }
  html[data-ds] .fp3-sticky { display: none !important; }
}

/* The F2 review's fixes. B3: a long word in Up next wraps. B5: the entry
   menu at the entry's right. */
html[data-ds] .fp3-upnext { min-width: 0; }
html[data-ds] .fp3-un-what { overflow-wrap: anywhere; }
html[data-ds] .fp3-tl-main { position: relative; }
html[data-ds] .fp3-tl-menu { position: absolute; top: -4px; right: 0; }
html[data-ds] .fp3-tl-menu > summary { margin: 0; }
html[data-ds] .fp3-tl-kind { padding-right: 36px; }
html[data-ds] .fp3-tl-menu .lg-menu-panel { right: 0; left: auto; min-width: 160px; }

/* The F1 critic's fixes. C4: a long meta item, or a next action typed as
   words, wraps instead of widening a phone page; so do the pager's words
   on the narrowest phones. */
html[data-ds] .fp3-meta { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  html[data-ds] .fp3-si.fp3-nx { white-space: normal; flex-wrap: wrap; }
  html[data-ds] .fp3-nx b { overflow-wrap: anywhere; }
}
@media (max-width: 480px) {
  html[data-ds] .fp3-pager { white-space: normal; min-width: 0; }
}

/* The F2 critic's fixes. C2: each date column holds the longest date it
   can show at the label font, with room to spare (Chromium: "May 10, 2025"
   77px, "Yesterday 10:00 AM" 115px); the gap stays, and a phone still
   stacks the row. A long name in the author column gives way, with an
   ellipsis (its title holds the whole), so the words beside it keep their
   room; on a phone, where the name has a line of its own, it wraps. */
@media (min-width: 761px) {
  html[data-ds] .fp3-tl-entry { grid-template-columns: 84px minmax(0, 1fr) auto; }
  html[data-ds] .fp3-audit-list li { grid-template-columns: 128px minmax(0, 1fr) auto; }
  html[data-ds] .fp3-tl-by { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 760px) {
  html[data-ds] .fp3-tl-by { white-space: normal; overflow-wrap: anywhere; }
}
/* C3: a contrast theme (forced colours) drops the colours that marked the
   picked chip, the pressed segment and the selected tab. The chip takes
   the theme's Highlight itself (the backplate behind its text would hide
   the words); the pressed segment has a Highlight border, the others one
   in Canvas, so nothing moves. The selected tab's underline is Highlight,
   hovered or not, and the others' Canvas (a transparent one is drawn in
   the link colour); the tabs sit on the row's line, not 1px into it,
   where Canvas would cut it. Focus rings are in the theme's text colour.
   A day chip's hidden date takes none of the chip's face. */
html[data-ds] .fp3-chip .sr-only { min-height: 0; padding: 0; border: 0; }
@media (forced-colors: active) {
  html[data-ds] .fp3-chip input:checked + span { forced-color-adjust: none; border-color: Highlight; background: Highlight; color: HighlightText; }
  html[data-ds] .fp3-seg button { padding: 2px 6px; border: 2px solid Canvas; }
  html[data-ds] .fp3-seg button[aria-pressed="true"] { border-color: Highlight; }
  html[data-ds] .lg-page .fp3-tabs a { margin-bottom: 0; border-bottom-color: Canvas; }
  html[data-ds] .lg-page .fp3-tabs a[aria-selected="true"] { border-bottom-color: Highlight; }
  html[data-ds] .fp3-chip input:focus-visible + span, html[data-ds] .fp3-seg button:focus-visible { outline-color: CanvasText; }
}

/* Slice 3 review, the side group: the side column's figures, words, flags
   and layout. R7: a number or e-mail never gives way to what follows it,
   and leaves room for its copy button (a long one wraps there); the line
   wraps, and a long tag ("Primary · <a long CRM name>") goes under it and
   wraps too, so nothing runs past the column. */
html[data-ds] .fp3-person-line { flex-wrap: wrap; }
html[data-ds] .lg-page .fp3-person-line > a, html[data-ds] .fp3-nocall { flex: none; max-width: calc(100% - var(--space-1) - var(--ctl-h-sm)); }
@media (max-width: 760px) {
  html[data-ds] .lg-page .fp3-person-line > a, html[data-ds] .fp3-nocall { max-width: calc(100% - var(--space-1) - var(--hit)); }
}
html[data-ds] .fp3-person-line > .fp3-tag { min-width: 0; max-width: calc(100% - var(--space-2)); white-space: normal; overflow-wrap: anywhere; border-radius: 9px; }
/* R3, B1, P2: a do-not-contact number or e-mail reads as words, not a link. */
html[data-ds] .fp3-nocall { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; overflow-wrap: anywhere; color: var(--ink-2); }
/* B13: a long name wraps, so the person's menu stays in view at the right. */
html[data-ds] .fp3-person-name { overflow-wrap: anywhere; min-width: 0; }
html[data-ds] .fp3-person-name > a { min-width: 0; }
/* R13: the deceased mark beside the borrower's name. */
html[data-ds] .fp3-tag.is-neg { border-color: currentColor; color: var(--neg); }
/* C6: a typed UPB, however long, wraps in the recommendation's reasons. */
html[data-ds] .fp3-list li { overflow-wrap: anywhere; }
/* R15: the eye to reveal the SSN, the eye-off while it shows. */
html[data-ds] .fp3-ssn-btn:not(.is-shown) .fp3-eye-off, html[data-ds] .fp3-ssn-btn.is-shown .fp3-eye { display: none; }
/* B12: Show more sits at the left under its text, as the timeline's does. */
html[data-ds] .fp3-sec .fp3-fold-btn { justify-self: start; }
/* C1: a fold closes only once the page's script, which opens it, has run
   (data-fp-folds); without script, and in a printout, every fold is whole
   and Show more is gone. */
html[data-ds] .fp3:not([data-fp-folds]) .fp3-fold { max-height: none; overflow: visible; }
html[data-ds] .fp3:not([data-fp-folds]) .fp3-fold-btn { display: none; }
@media print {
  html[data-ds] .fp3 .fp3-fold { max-height: none; overflow: visible; }
  html[data-ds] .fp3 .fp3-fold-btn { display: none; }
}
/* C4: the side column sits beside the main one only when the page column
   holds both, whatever width the sidebar takes: under 960px of it (a main
   column under 600px) the side goes under the main column, as at 1080px. */
html[data-ds] .fp3 { container: fp3page / inline-size; }
@container fp3page (max-width: 959px) {
  html[data-ds] .fp3-body { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}
/* V1: where the number to call is a borrower's who is not to be contacted,
   the header and the sticky bar say so in its place, in People's colour;
   on a phone the sticky bar keeps the name, the next action and Log call. */
html[data-ds] .fp3-call-off { display: inline-flex; align-items: center; gap: var(--space-1); flex: none; min-height: var(--ctl-h-sm); padding: 0 var(--space-2); font: var(--t-label); color: var(--neg); white-space: nowrap; }
@media (max-width: 900px) {
  html[data-ds] .fp3-sticky .fp3-call-off { display: none; }
}

/* Slice 3 review, the money group: R12, Who can see it is a disclosure under
   Owner, its grants a list that fits the side column (name and what they can
   do, then Revoke or their page); B14, a sprite icon beside a document's name
   in today's Documents table; P6, a closed file's payoff statement, folded at
   the foot of Overview. */
html[data-ds] .fp3-access-body { display: grid; gap: var(--space-2); min-width: 0; }
html[data-ds] .fp3-walled { display: flex; align-items: flex-start; gap: var(--space-1); }
html[data-ds] .fp3-walled .icon { margin-top: 3px; color: var(--ink-3); }
html[data-ds] .fp3-grants { display: grid; margin: 0; padding: 0; list-style: none; }
html[data-ds] .fp3-grants li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px var(--space-2);
  padding: var(--space-2) 0; border-top: 1px solid var(--rule);
}
html[data-ds] .fp3-grants li:last-child { border-bottom: 1px solid var(--rule); }
html[data-ds] .fp3-grant-who { min-width: 0; font: var(--t-table); font-weight: 500; overflow-wrap: anywhere; }
html[data-ds] .fp3-grant-meta { grid-column: 1; font: var(--t-label); font-weight: 400; color: var(--ink-3); overflow-wrap: anywhere; }
html[data-ds] .fp3-grant-act { grid-column: 2; grid-row: 1 / span 2; margin: 0; font: var(--t-label); white-space: nowrap; }
html[data-ds] .fp3-grant-act .btn { margin: 0; }
html[data-ds] .fp3 .fp3-ico { margin-right: var(--space-1); vertical-align: -2px; }
/* A button that starts with its icon takes its baseline from the icon: a
   quote's View and Revoke meet in the middle of their row. */
html[data-ds] .fp3 #payoff-history td > .btn { vertical-align: middle; }
html[data-ds] .fp3-stmt-fold > summary { width: max-content; max-width: 100%; cursor: pointer; font: var(--t-table); color: var(--accent); }
html[data-ds] .fp3-stmt-fold > summary .fp3-prov { display: inline; margin-left: var(--space-2); }
html[data-ds] .fp3-stmt-fold[open] > summary { margin-bottom: var(--space-3); }

/* Slice 3 review, the list group: the tabs without script, the composer
   and the sticky bar at phone width. C3: without script every tab's panel
   shows, one after another; the page's own line of script marks it
   .fp3-tabbed before any panel is drawn. */
html[data-ds] .fp3:not(.fp3-tabbed) .tab-panel { display: block; }
/* B7: at phone width the call's words take the whole line, and Save (and
   Save and next) go in a row under them, not in a column beside them. */
@media (max-width: 760px) {
  html[data-ds] .fp3-lc-note { flex-wrap: wrap; }
  html[data-ds] .fp3-lc-note textarea { flex-basis: 100%; }
  html[data-ds] .fp3-lc-acts { flex-direction: row; flex-wrap: wrap; }
}
/* B16: the sticky bar's File # gives way with an ellipsis, as the name
   does, instead of running into the next action at 320px. */
html[data-ds] .fp3-sticky-ref { overflow: hidden; text-overflow: ellipsis; }

/* The slice 3 follow-ups (F1-F8). F1: in the preview beside Files, a
   do-not-contact borrower's numbers are words, as in People, and the mark
   is in People's negative colour. */
html[data-ds] .lg-peek-nocall { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ink-2); }
html[data-ds] .lg-peek-dnc { display: inline-flex; align-items: center; gap: var(--space-1); font: var(--t-label); color: var(--neg); }
/* F4: a request's status and its fulfil icon keep their width in the row.
   At 100% wide the status counted for nothing in the column's width, so it
   read only as its arrow, and the icon beside it was cut. */
html[data-ds] .fp3 #requests td form > select { width: auto; flex: none; }
html[data-ds] .fp3 #requests td form > button { flex: none; }
/* F8 (C1's optional part): a printout reads as a record. The forms, menus
   and buttons that change the file do not print, nor do the pager and the
   sticky bar; a document's name (a button that opens the viewer) does. */
@media print {
  html[data-ds] .fp3 form,
  html[data-ds] .fp3 button:not(.as-link),
  html[data-ds] .fp3 .btn,
  html[data-ds] .fp3 .fp3-link-btn,
  html[data-ds] .fp3 .lg-menu,
  html[data-ds] .fp3 .inline-form,
  html[data-ds] .fp3 details:has(> form),
  html[data-ds] .fp3 .fp3-pager,
  html[data-ds] .fp3-sticky { display: none !important; }
}

/* The slice 3 follow-ups, the verifier's findings. F8-conflicts: the cards
   above the page's root (a stale Vault form's, and a combined file's
   "Values that differ") print as a record too: without their buttons. */
@media print {
  html[data-ds] .fp3-above form,
  html[data-ds] .fp3-above button,
  html[data-ds] .fp3-above .btn { display: none !important; }
}

/* Workout: Requests (Eddy, Oct 22: "the Request tile is crammed"). The tab's
   cards stack, so Requests has the column's whole width, and its fields share
   a row that wraps on a narrow screen (a request's Edit row too). */
html[data-ds] .fp3 .detail-2col.fp3-wk-stack { grid-template-columns: minmax(0, 1fr); }
html[data-ds] .fp3 .fp3-req-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 8px; margin-bottom: 8px; max-width: 620px; }

/* Workout: one Offer & exit plan card (Eddy, Oct 22). What the file itself
   holds sits under the plan, set apart by a rule, above the plan's form. */
html[data-ds] .fp3 .fp3-exit-file { display: grid; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
html[data-ds] .fp3 .fp3-exit-note { margin: 0; font: var(--t-label); color: var(--ink-3); }

/* ---------------------------------------------------------------------
   D28: work mode. Today's walk through the list (from Desk): Start
   narrows the list to a column with a pane beside it for the row you are
   on (templates/ds3/_today_work.html, _today_pane.html; step-3-today.js).
   A finished row stays, struck through, with Undo. Where a pane cannot sit
   beside the list (900px and below) the pane goes above it.
   --------------------------------------------------------------------- */
html[data-ds] .lg-work-start { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0 0 0 auto; }
html[data-ds] .lg-work-start .btn { margin: 0; }
/* The bar ("2 of 33 · Overdue · 1 done", the steps, Stop) stays in view
   above the list as it scrolls; step-3-today.js measures it
   (--lg-work-bar-h), so the pane and a row brought into view sit below it. */
html[data-ds] .lg-work-bar {
  position: sticky; top: 0; z-index: 5; background: var(--paper);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-2) var(--space-4); margin-top: var(--space-5); padding: var(--space-2) 0;
  border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule);
}
html[data-ds][data-nav="top"] .lg-work-bar { top: var(--topbar-h, 52px); }
html[data-ds] .lg-work-at { margin: 0; min-width: 0; font: var(--t-head); color: var(--ink-1); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
html[data-ds] .lg-work-acts { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
html[data-ds] .lg-work-acts .btn { margin: 0; }
html[data-ds] .lg-work-acts .lg-icon-btn { border: 1px solid var(--line-ui); }
html[data-ds] .lg-work-aside { font-weight: 400; color: var(--ink-3); }
/* The list takes up to 320px, but gives way first (down to 240px), so the
   pane keeps 320px for Log the call where the left nav leaves little room
   beside the list (901 to about 960px wide, CR2). */
html[data-ds] .lg-work {
  display: grid; grid-template-columns: minmax(240px, min(320px, 100% - 320px - var(--space-6))) minmax(0, 1fr);
  gap: var(--space-6); align-items: start; margin-top: var(--space-4);
}
html[data-ds] .lg-work-list { min-width: 0; }
html[data-ds] .lg-work-grp + .lg-work-grp { margin-top: var(--space-6); }
html[data-ds] .lg-work-grp-name { margin: 0; padding-bottom: var(--space-2); border-bottom: 1px solid var(--rule-strong); font: var(--t-head); color: var(--ink-1); }
html[data-ds] .lg-work-kind { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0; padding-bottom: var(--space-1); font: var(--t-label); font-weight: 600; color: var(--ink-2); }
html[data-ds] .lg-work-kind .icon { color: var(--ink-3); flex: none; }
html[data-ds] .lg-work-items { margin: 0; padding: 0; list-style: none; }
html[data-ds] .lg-work-item {
  display: grid; gap: 2px; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--rule); cursor: pointer; min-width: 0;
  scroll-margin-top: calc(var(--lg-work-bar-h, 52px) + var(--space-3));
}
html[data-ds][data-nav="top"] .lg-work-item { scroll-margin-top: calc(var(--topbar-h, 52px) + var(--lg-work-bar-h, 52px) + var(--space-3)); }
html[data-ds] .lg-work-item:hover { background: var(--fill-1); }
html[data-ds] .lg-work-item[aria-current="true"] { background: var(--accent-tint); box-shadow: inset 2px 0 0 var(--accent); }
html[data-ds] .lg-work-item[data-mark="done"] .lg-who-name { text-decoration: line-through; text-decoration-color: var(--ink-3); color: var(--ink-2); }
html[data-ds] .lg-page .lg-work-item[data-mark="done"] a.lg-who-name { color: var(--ink-2); }
html[data-ds] .lg-page .lg-work-item[data-mark="skip"] a.lg-who-name,
html[data-ds] .lg-page .lg-work-item[data-gone] a.lg-who-name { color: var(--ink-3); }
html[data-ds] .lg-work-state { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--space-2); font: var(--t-label); font-weight: 400; color: var(--ink-3); }
html[data-ds] .lg-work-mark:empty { display: none; }
html[data-ds] .lg-work-item[data-mark="done"] .lg-work-mark { color: var(--ink-2); }
html[data-ds] .lg-work-undo {
  min-height: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: var(--t-label); color: var(--accent);
}
html[data-ds] .lg-work-undo:hover { text-decoration: underline; text-underline-offset: 3px; }
html[data-ds] .lg-work-pane {
  position: sticky; top: calc(var(--lg-work-bar-h, 52px) + var(--space-4)); min-width: 0;
  max-height: calc(100vh - var(--lg-work-bar-h, 52px) - var(--space-8)); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-1) var(--space-1) var(--space-5) var(--space-6); border-left: 1px solid var(--rule);
}
html[data-ds][data-nav="top"] .lg-work-pane {
  top: calc(var(--topbar-h, 52px) + var(--lg-work-bar-h, 52px) + var(--space-4));
  max-height: calc(100vh - var(--topbar-h, 52px) - var(--lg-work-bar-h, 52px) - var(--space-8));
}
html[data-ds] .lg-work-pane:focus { outline: none; }
html[data-ds] .lg-work-pane:focus-visible { box-shadow: inset 2px 0 0 var(--accent); }
html[data-ds] .lg-work-body { display: grid; gap: var(--space-3); min-width: 0; }
html[data-ds] .lg-work-body > * { margin: 0; }
html[data-ds] .lg-work-body .lg-why { overflow-wrap: anywhere; }
html[data-ds] .lg-work-body .lg-peek-sec { margin-top: 0; }
html[data-ds] .lg-work-body h3.lg-peek-overline { font-weight: 600; }
html[data-ds] .lg-work-note { display: flex; align-items: center; gap: var(--space-2); font: var(--t-table); color: var(--ink-2); }
html[data-ds] .lg-work-note .icon { flex: none; color: var(--accent); }
html[data-ds] .lg-work-note.is-neg, html[data-ds] .lg-work-note.is-neg .icon { color: var(--neg); }
html[data-ds] .fp3-status.lg-work-status { margin-top: 0; }
html[data-ds] .lg-work-phone { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font: var(--t-table); }
html[data-ds] .lg-page .lg-work-phone a { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ink-1); font-weight: 500; }
html[data-ds] .lg-work-foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
html[data-ds] .lg-work-foot .btn { margin: 0; }
html[data-ds] .lg-peek-foot.lg-work-foot { margin-top: 0; }
/* A file the person may only read: why there is no Log the call, then Next and Skip. */
html[data-ds] .lg-work-ro { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--rule); }
html[data-ds] .lg-work-ro .lg-caption { margin: 0; }
html[data-ds] .lg-work-err { font: var(--t-table); color: var(--neg); }
html[data-ds] .lg-work-err[hidden] { display: none; }
html[data-ds] .lg-work-log { min-width: 0; }
html[data-ds] .lg-work-log .fp3-lc-lbl { width: 96px; }
/* The call's date shrinks with the pane rather than run past its edge. */
html[data-ds] .lg-work-log .fp3-lc-date { min-width: 0; max-width: 100%; }
html[data-ds] .lg-work-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); margin: var(--space-2) 0 0; }
html[data-ds] .lg-work-fig { min-width: 0; }
html[data-ds] .lg-work-fig dt { font: var(--t-label); color: var(--ink-3); }
html[data-ds] .lg-work-fig dd { margin: 0; }
html[data-ds] .lg-work-fig-val { font: 600 16px/22px var(--font-sans); color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ds] .lg-work-fig .lg-prov { overflow-wrap: anywhere; }
html[data-ds] .lg-work-tl { display: grid; margin: var(--space-2) 0 0; padding: 0; list-style: none; }
html[data-ds] .lg-work-tl li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--rule); font: var(--t-table); }
html[data-ds] .lg-work-tl-date { font: var(--t-label); color: var(--ink-3); padding-top: 2px; white-space: nowrap; }
html[data-ds] .lg-work-tl-what { min-width: 0; color: var(--ink-1); overflow-wrap: anywhere; }
html[data-ds] .lg-work-tl-kind { color: var(--ink-2); }
html[data-ds] .lg-work-tl-body { display: block; margin-top: 2px; font: var(--t-label); font-weight: 400; color: var(--ink-3); }
@media (max-width: 1100px) {
  html[data-ds] .lg-work-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* No room beside the list: the pane goes above it, in the page's flow, and
   the bar scrolls with the page (on a phone it would hide too much). */
@media (max-width: 900px) {
  html[data-ds] .lg-work-bar, html[data-ds][data-nav="top"] .lg-work-bar { position: static; }
  html[data-ds] .lg-work-item, html[data-ds][data-nav="top"] .lg-work-item { scroll-margin-top: calc(var(--mobile-bar-h, 0px) + var(--space-3)); }
  html[data-ds] .lg-work-pane { scroll-margin-top: calc(var(--mobile-bar-h, 0px) + var(--space-3)); }
  /* A new row brings the bar ("2 of 33", Stop) into view with the pane
     under it, both below the phone bar (H5, R6). */
  html[data-ds] .lg-work-bar { scroll-margin-top: calc(var(--mobile-bar-h, 0px) + var(--space-2)); }
  html[data-ds] .lg-work { grid-template-columns: minmax(0, 1fr); }
  html[data-ds] .lg-work-pane {
    position: static; order: -1; max-height: none; overflow: visible;
    padding: 0 0 var(--space-4); border-left: 0; border-bottom: 1px solid var(--rule-strong);
  }
  html[data-ds][data-nav="top"] .lg-work-pane { max-height: none; }
  html[data-ds] .lg-work-item { padding: var(--space-3) 0 var(--space-3) var(--space-3); }
  html[data-ds] .lg-work-undo { min-height: var(--hit); padding: 0 var(--space-2); }
  html[data-ds] .lg-work-acts .btn, html[data-ds] .lg-work-foot .btn { min-height: var(--hit); }
}
@media (max-width: 480px) {
  html[data-ds] .lg-work-log .fp3-lc-lbl { width: auto; }
  html[data-ds] .lg-work-tl li { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media print {
  html[data-ds] .lg-work-pane, html[data-ds] .lg-work-acts, html[data-ds] .lg-work-undo { display: none !important; }
  html[data-ds] .lg-work { display: block; }
}

/* ---------------------------------------------------------------------
   10. Auctions: the board (templates/ds3/auctions.html, auctions_page.py;
       map-auctions.md 2.2, 2.10; Ledger auctions.html, style.css 808-905).
       The lede, the range control, the week strip, the decision tabs, then
       each day's sale places and their sales. Every rule is under .au3.
   --------------------------------------------------------------------- */
html[data-ds] .lg-page.au3 { max-width: 1440px; }
html[data-ds] .au3 .au3-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); font: var(--t-label); color: var(--ink-3); }
html[data-ds] .au3 .au3-crumbs a { color: var(--ink-3); text-decoration: none; }
html[data-ds] .au3 .au3-crumbs a:hover { color: var(--accent); }
html[data-ds] .au3 .au3-crumbs .icon { color: var(--rule-strong); }
html[data-ds] .au3 .lg-title-row { margin-top: var(--space-1); }
html[data-ds] .au3 .au3-lede { margin: var(--space-2) 0 0; max-width: 900px; font: 400 17px/26px var(--font-sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
html[data-ds] .au3 .au3-lede b { color: var(--ink-1); font-weight: 600; }
html[data-ds] .au3 .au3-why { margin: var(--space-1) 0 0; font: var(--t-table); color: var(--ink-3); }
html[data-ds] .au3 .au3-k { margin-left: 2px; font-variant-numeric: tabular-nums; }
html[data-ds] .au3 .lg-seg .au3-k { color: var(--ink-3); }
html[data-ds] .au3 .lg-seg > [aria-current="true"] .au3-k { color: var(--ink-2); }

/* The tools: the range, then search and Filters; the panel opens under its
   button, never off the screen (step-3.js), and scrolls inside. */
html[data-ds] .au3 .au3-tools { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-top: var(--space-5); }
html[data-ds] .au3 .au3-range { flex-wrap: wrap; }
html[data-ds] .au3 .au3-search { margin-left: auto; }
html[data-ds] .au3 .au3-filters .lg-menu-panel.au3-fpanel { width: min(640px, calc(100vw - 32px)); max-width: min(640px, calc(100vw - 32px)); gap: var(--space-3); }
html[data-ds] .au3 .au3-fform { display: grid; gap: var(--space-3); }
html[data-ds] .au3 .au3-fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-3); }
html[data-ds] .au3 .au3-flabel { display: flex; align-items: center; gap: var(--space-1); margin-bottom: 2px; font: var(--t-label); color: var(--ink-2); }
html[data-ds] .au3 .ts-pick-n { padding: 0 6px; border-radius: 999px; background: var(--fill-2); color: var(--ink-1); font: var(--t-label); font-variant-numeric: tabular-nums; }
html[data-ds] .au3 .ts-pick-n[hidden] { display: none; }
html[data-ds] .au3 .ts-pick-search { width: 100%; margin-bottom: var(--space-1); }
html[data-ds] .au3 .ts-pick-list { max-height: 132px; overflow-y: auto; overscroll-behavior: contain; padding: 2px; border: 1px solid var(--line-ui); border-radius: var(--r-2); background: var(--paper); }
html[data-ds] .au3 .lg-menu-panel label.ts-pick-item { display: flex; align-items: center; gap: var(--space-2); min-height: 26px; padding: 0 var(--space-2); border-radius: var(--r-1); font: var(--t-table); color: var(--ink-1); }
html[data-ds] .au3 .ts-pick-item:hover { background: var(--fill-1); }
html[data-ds] .au3 .ts-pick-item.is-on { font-weight: 500; }
html[data-ds] .au3 .ts-pick-item[hidden] { display: none; }
html[data-ds] .au3 .ts-pick-item input { flex: none; margin: 0; accent-color: var(--accent); }
html[data-ds] .au3 .ts-pick-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ds] .au3 .ts-pick-count { flex: none; font: var(--t-label); font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }
html[data-ds] .au3 .au3-fnone, html[data-ds] .au3 .au3-fnote { margin: 0; font: var(--t-label); font-weight: 400; color: var(--ink-3); }

/* The week strip (D31): today and the next seven days, each with its sales,
   how many are decided and open, and any postponed in warn ink. */
html[data-ds] .au3 .au3-week { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); margin-top: var(--space-5); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
html[data-ds] .au3 .au3-wday { position: relative; display: block; min-width: 0; padding: var(--space-2) var(--space-3) var(--space-3); border-left: 1px solid var(--rule); color: inherit; text-decoration: none; }
html[data-ds] .au3 .au3-wday:first-child { border-left: 0; }
html[data-ds] .au3 a.au3-wday:hover { background: var(--fill-1); text-decoration: none; }
html[data-ds] .au3 .au3-wday[aria-current="date"] { background: var(--fill-1); }
html[data-ds] .au3 .au3-wday[aria-current="date"]::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--accent); }
html[data-ds] .au3 .au3-wday-nm { display: block; font: var(--t-label); color: var(--ink-3); }
html[data-ds] .au3 .au3-today-w { white-space: nowrap; }
html[data-ds] .au3 .au3-wday[aria-current="date"] .au3-wday-nm { color: var(--ink-1); }
html[data-ds] .au3 .au3-wday-n { display: block; margin-top: 2px; font: var(--t-head); color: var(--ink-1); font-variant-numeric: tabular-nums; }
html[data-ds] .au3 .au3-u { font: var(--t-label); font-weight: 400; color: var(--ink-3); }
html[data-ds] .au3 .au3-wday.is-empty .au3-wday-n { color: var(--ink-3); font-weight: 400; }
html[data-ds] .au3 .au3-wday-sub { display: block; font: var(--t-label); font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }
html[data-ds] .au3 .au3-wday-sub.lg-warn { color: var(--warn); }

/* The decision tabs, and the keys that decide. */
html[data-ds] .au3 .au3-tabs-row { margin-top: var(--space-5); }
html[data-ds] .au3 .au3-keys { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); margin-left: auto; padding-bottom: var(--space-2); font: var(--t-label); font-weight: 400; color: var(--ink-3); }

/* A day: its head (and Route), the clock on auction morning, its table. */
html[data-ds] .au3 .au3-board { container: au3board / inline-size; }
html[data-ds] .au3 .au3-day { margin-top: var(--space-2); }
html[data-ds] .au3 .au3-dayhead { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1) var(--space-3); padding: var(--space-5) 0 var(--space-1); }
html[data-ds] .au3 .au3-dayhead .lg-h-sec { scroll-margin-top: var(--space-6); }
html[data-ds][data-nav="top"] .au3 .au3-dayhead .lg-h-sec { scroll-margin-top: calc(var(--topbar-h, 52px) + var(--space-6)); }
html[data-ds] .au3 .au3-route { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin-left: auto; }
html[data-ds] .au3 .au3-clash { font: var(--t-label); font-weight: 400; color: var(--warn); }
html[data-ds] .au3 .au3-clock { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: var(--space-1) 0 0; padding: var(--space-2) 0; font: var(--t-table); color: var(--ink-2); }
html[data-ds] .au3 .au3-clock .icon { color: var(--warn); }
html[data-ds] .au3 .au3-clock b { color: var(--warn); font-weight: 600; }
html[data-ds] .au3 .au3-clock[data-done] .icon, html[data-ds] .au3 .au3-clock[data-done] b { color: var(--ink-2); }

html[data-ds] .au3 .au3-sales { width: 100%; border-collapse: separate; border-spacing: 0; font: var(--t-table); background: transparent; }
html[data-ds] .au3 .au3-sales th, html[data-ds] .au3 .au3-sales td { text-align: left; vertical-align: top; background: transparent; }
html[data-ds] .au3 .au3-sales thead th { padding: var(--space-2); border-bottom: 1px solid var(--rule); font: var(--t-label); color: var(--ink-3); vertical-align: bottom; white-space: nowrap; text-transform: none; letter-spacing: 0; }
html[data-ds] .au3 .au3-sales .r { text-align: right; font-variant-numeric: tabular-nums; }
html[data-ds] .au3 .au3-th-sub { display: block; font: var(--t-label); font-weight: 400; color: var(--ink-3); }
html[data-ds] .au3 .au3-th-sub .lg-sort { font-weight: 400; }
html[data-ds] .au3 .au3-sales td { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--rule); }
html[data-ds] .au3 .au3-sales th:first-child, html[data-ds] .au3 .au3-sales td:first-child { padding-left: 0; }
html[data-ds] .au3 .au3-sales th:last-child, html[data-ds] .au3 .au3-sales td:last-child { padding-right: 0; }
/* The keyboard's row is outlined inside its edges, so the first and last
   columns stand a little in from them. */
html[data-ds] .au3 .au3-sales thead th:first-child, html[data-ds] .au3 .au3-row td:first-child { padding-left: var(--space-2); }
html[data-ds] .au3 .au3-sales thead th:last-child, html[data-ds] .au3 .au3-row td:last-child { padding-right: var(--space-2); }
html[data-ds] .au3 .au3-c-time { position: relative; width: 116px; }
html[data-ds] .au3 .au3-c-val { width: 104px; }
html[data-ds] .au3 .au3-c-owed { width: 156px; }
html[data-ds] .au3 .au3-c-eq { width: 88px; }
html[data-ds] .au3 .au3-sales .au3-c-dec { width: 228px; padding-left: var(--space-3); }

/* A sale place's head: the venue and its county, its sales and times, Map. */
html[data-ds] .au3 .au3-place th { padding: var(--space-5) 0 0; border: 0; font-weight: 400; }
html[data-ds] .au3 .au3-sales tbody:first-of-type .au3-place th { padding-top: var(--space-2); }
html[data-ds] .au3 .au3-place-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--rule-strong); }
html[data-ds] .au3 .au3-place-nm { min-width: 0; font: var(--t-head); color: var(--ink-1); overflow-wrap: anywhere; }
html[data-ds] .au3 .au3-place-meta { font: var(--t-label); font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }
html[data-ds] .au3 a.au3-place-map { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: auto; font: var(--t-label); }

/* A sale. */
html[data-ds] .au3 .au3-row { scroll-margin-top: var(--space-16); }
html[data-ds] .au3 .au3-row:hover td { background: var(--fill-1); }
html[data-ds] .au3 .au3-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
html[data-ds] .au3 .au3-time { display: block; color: var(--ink-1); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
html[data-ds] .au3 .au3-tz { color: var(--ink-3); font-weight: 400; }
html[data-ds] .au3 .au3-sub { display: block; font: var(--t-label); font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
html[data-ds] .au3 .au3-soon { display: flex; align-items: center; gap: var(--space-1); color: var(--warn); font-weight: 600; white-space: nowrap; }
/* What the script shows and hides stays hidden whatever the layout says. */
html[data-ds] .au3 .au3-soon[hidden], html[data-ds] .au3 .au3-saved[hidden],
html[data-ds] .au3 .au3-clock .lg-sep[hidden] { display: none !important; }
html[data-ds] .au3 a.au3-sheet { display: none; }
html[data-ds] .au3 .au3-addr { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
html[data-ds] .au3 .au3-star { display: inline-grid; flex: none; place-items: center; width: 24px; height: 24px; margin-left: -4px; padding: 0; border: 0; border-radius: var(--r-1); background: none; color: var(--ink-3); cursor: pointer; }
html[data-ds] .au3 button.au3-star:hover { background: var(--fill-2); color: var(--ink-1); }
html[data-ds] .au3 .au3-star.is-on { color: var(--ink-1); }
html[data-ds] .au3 .au3-star[aria-pressed="true"] .icon,
html[data-ds] .au3 .au3-star.is-on .icon { fill: currentColor; }
html[data-ds] .au3 .au3-star.is-busy { opacity: .5; }
html[data-ds] .au3 .au3-star.is-error { color: var(--neg); }
html[data-ds] .au3 a.au3-nm { min-width: 0; color: var(--ink-1); font-weight: 500; overflow-wrap: anywhere; text-decoration: none; }
html[data-ds] .au3 a.au3-nm:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
html[data-ds] .au3 a.au3-map { display: inline-grid; flex: none; place-items: center; color: var(--ink-3); }
html[data-ds] .au3 a.au3-map:hover { color: var(--accent); }
html[data-ds] .au3 .au3-flags { display: block; font: var(--t-label); font-weight: 400; color: var(--ink-2); }
html[data-ds] .au3 .au3-flag.is-neg { color: var(--neg); font-weight: 500; }
html[data-ds] .au3 .au3-flag.is-warn { color: var(--warn); font-weight: 500; }
html[data-ds] .au3 .au3-pp { display: flex; align-items: flex-start; gap: var(--space-1); font: var(--t-label); font-weight: 400; color: var(--warn); }
html[data-ds] .au3 .au3-pp .icon { margin-top: 2px; }
html[data-ds] .au3 .au3-pp.is-hard { color: var(--neg); }
html[data-ds] .au3 .au3-v { color: var(--ink-1); font-variant-numeric: tabular-nums; }
html[data-ds] .au3 .au3-mark { font: var(--t-label); font-weight: 400; color: var(--ink-3); }
html[data-ds] .au3 .au3-v-sub { display: block; font: var(--t-label); font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* The decision: one neutral control, only the chosen segment tinted (Bid
   in the accent, Conditional in warn, No bid in grey); the line under it;
   what was saved, with Undo, or Not saved in warn ink. */
html[data-ds] .au3 .au3-decide > button { min-width: 0; padding: 0 var(--space-2); }
html[data-ds] .au3 .au3-decide > .au3-d-bid { min-width: 44px; }
html[data-ds] .au3 .au3-decide > .au3-d-cond { min-width: 84px; }
html[data-ds] .au3 .au3-decide > .au3-d-no { min-width: 56px; }
html[data-ds] .au3 .au3-decide > .au3-d-bid[aria-pressed="true"] { background: var(--accent-tint); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
html[data-ds] .au3 .au3-decide > .au3-d-cond[aria-pressed="true"] { background: var(--warn-tint); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); }
html[data-ds] .au3 .au3-decide > .au3-d-no[aria-pressed="true"] { background: var(--fill-2); color: var(--ink-1); }
html[data-ds] .au3 .au3-decide > [aria-pressed="true"] { font-weight: 600; }
html[data-ds] .au3 .au3-dword { font-weight: 500; color: var(--ink-1); }
html[data-ds] .au3 .au3-note { margin: var(--space-1) 0 0; font: var(--t-label); font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; }
html[data-ds] .au3 .au3-note:empty { display: none; }
html[data-ds] .au3 .au3-note .au3-v { font-weight: 500; }
html[data-ds] .au3 .au3-note .lg-warn { font-weight: 500; }
html[data-ds] .au3 .au3-note.is-open { color: var(--ink-1); font-weight: 500; }
html[data-ds] .au3 .au3-saved { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: var(--space-1) 0 0; font: var(--t-label); font-weight: 400; color: var(--ink-2); }
html[data-ds] .au3 .au3-saved .icon { color: var(--ink-2); }
html[data-ds] .au3 .au3-saved.is-error, html[data-ds] .au3 .au3-saved.is-error .icon { color: var(--warn); font-weight: 500; }
html[data-ds] .au3 .au3-saved .btn { min-height: 24px; padding: 0 var(--space-2); }
@media (forced-colors: active) {
  html[data-ds] .au3 .au3-decide > [aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* Under the board: the next day, a long day's rest, the empty board. */
html[data-ds] .au3 .au3-more { margin: var(--space-2) 0 0; font: var(--t-label); font-weight: 400; color: var(--ink-3); }
html[data-ds] .au3 .au3-next { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-5) 0 0; padding: var(--space-3) 0; border-top: 1px solid var(--rule); font: var(--t-table); color: var(--ink-2); }
html[data-ds] .au3 .au3-next .icon { margin-top: 2px; color: var(--ink-3); }
html[data-ds] .au3 .au3-empty { margin-top: var(--space-6); padding: var(--space-5) 0; border-top: 1px solid var(--rule); font: var(--t-table); color: var(--ink-2); }
html[data-ds] .au3 .au3-empty p { margin: var(--space-1) 0 0; }
html[data-ds] .au3 .au3-empty .au3-empty-t { margin: 0; font: var(--t-head); color: var(--ink-1); }

/* Narrow boards (a phone, or a narrow window beside the sidebar): each sale
   stacks, in time order under its sale place, with a 44px decision control
   and its Sheet link (Step 4 finishes the phone). */
@container au3board (max-width: 959px) {
  html[data-ds] .au3 .au3-sales thead { display: none; }
  html[data-ds] .au3 .au3-sales, html[data-ds] .au3 .au3-sales tbody,
  html[data-ds] .au3 .au3-sales tr, html[data-ds] .au3 .au3-sales th { display: block; }
  html[data-ds] .au3 .au3-sales tr.au3-row {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "time time time" "prop prop prop" "val owed eq" "dec dec dec";
    gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-2) var(--space-4); border-bottom: 1px solid var(--rule);
  }
  html[data-ds] .au3 .au3-sales td, html[data-ds] .au3 .au3-sales td.r { display: block; width: auto; padding: 0; border: 0; text-align: left; }
  html[data-ds] .au3 .au3-row td:first-child, html[data-ds] .au3 .au3-row td:last-child { padding: 0; }
  html[data-ds] .au3 .au3-decide { max-width: 440px; }
  html[data-ds] .au3 .au3-row:hover td { background: none; }
  html[data-ds] .au3 .au3-place-head > .lg-sep { display: none; }
  html[data-ds] .au3 .au3-place-nm { flex: 1 1 auto; }
  html[data-ds] .au3 .au3-place-meta { order: 3; flex-basis: 100%; }
  html[data-ds] .au3 .au3-sales .au3-c-time { grid-area: time; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3); width: auto; }
  html[data-ds] .au3 .au3-c-time .au3-sub { display: inline; }
  html[data-ds] .au3 a.au3-sheet { display: inline-flex; align-items: center; gap: 2px; min-height: var(--hit); margin: -10px -6px -10px auto; padding: 0 var(--space-1) 0 var(--space-2); font: var(--t-label); font-weight: 600; color: var(--accent); text-decoration: none; }
  html[data-ds] .au3 .au3-sales .au3-c-prop { grid-area: prop; }
  html[data-ds] .au3 .au3-sales .au3-c-val { grid-area: val; }
  html[data-ds] .au3 .au3-sales .au3-c-owed { grid-area: owed; }
  html[data-ds] .au3 .au3-sales .au3-c-eq { grid-area: eq; }
  html[data-ds] .au3 .au3-sales .au3-c-dec { grid-area: dec; width: auto; padding-left: 0; }
  html[data-ds] .au3 .au3-c-val::before, html[data-ds] .au3 .au3-c-owed::before,
  html[data-ds] .au3 .au3-c-eq::before { content: attr(data-label); display: block; font: var(--t-label); color: var(--ink-3); }
  html[data-ds] .au3 .au3-decide { display: flex; width: 100%; }
  html[data-ds] .au3 .au3-decide > button { flex: 1; min-height: var(--hit); font-size: 13px; }
  html[data-ds] .au3 .au3-saved .btn { min-height: var(--hit); padding: 0 var(--space-4); margin-left: auto; }
  html[data-ds] .au3 .au3-place th { padding: var(--space-5) 0 0; }
  html[data-ds] .au3 .au3-star { width: var(--hit); height: var(--hit); margin: -10px -12px -10px auto; order: 3; }
  html[data-ds] .au3 a.au3-map { width: var(--hit); height: var(--hit); margin: -12px -14px -12px -10px; }
  html[data-ds] .au3 a.au3-place-map { min-height: var(--hit); }
}
@media (max-width: 760px) {
  html[data-ds] .au3 .au3-lede { font-size: 15px; line-height: 24px; }
  html[data-ds] .au3 .au3-search { order: 2; flex: 1 1 auto; max-width: none; margin-left: 0; }
  html[data-ds] .au3 .au3-range { order: 1; flex: 1 1 100%; }
  html[data-ds] .au3 .au3-range > a { flex: 1 1 auto; }
  html[data-ds] .au3 .au3-filters { order: 3; }
  html[data-ds] .au3 .au3-tools .lg-menu { position: static; }
  html[data-ds] .au3 .au3-filters .lg-menu-panel.au3-fpanel { left: 0; right: 0; width: auto; min-width: 0; max-width: none; }
  html[data-ds] .au3 .au3-week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html[data-ds] .au3 .au3-wday { padding: var(--space-2); }
  html[data-ds] .au3 .au3-wday:nth-child(4n + 1) { border-left: 0; }
  html[data-ds] .au3 .au3-wday:nth-child(n + 5) { border-top: 1px solid var(--rule); }
  html[data-ds] .au3 .au3-today-w { display: none; }
  html[data-ds] .au3 .au3-wsep { display: none; }
  html[data-ds] .au3 .au3-wph { display: block; }
  html[data-ds] .au3 .au3-clock { align-items: flex-start; }
  html[data-ds] .au3 .au3-clock > .lg-sep { display: none; }
  html[data-ds] .au3 .au3-clock [data-au-clock-sub] { flex-basis: 100%; padding-left: var(--space-6); }
  html[data-ds] .au3 .au3-keys { display: none; }
  html[data-ds] .au3 .lg-tabs { gap: 0 var(--space-4); }
  html[data-ds] .au3 .au3-route { flex-basis: 100%; margin-left: 0; }
  html[data-ds] .au3 .lg-head-actions .btn { min-height: var(--hit); }
  html[data-ds] .au3 .au3-clock [data-au-clock-more] { flex-basis: 100%; padding-left: var(--space-6); }
}
/* A long one-word filter wraps inside its chip, never pushing a phone
   sideways; a reader's empty star slot keeps every address in line (the
   stacked rows put the star last); the clock's empty parts take no line. */
html[data-ds] .au3 .lg-chip { max-width: 100%; overflow-wrap: anywhere; }
html[data-ds] .au3 .au3-star-slot { flex: none; width: 24px; height: 24px; margin-left: -4px; }
html[data-ds] .au3 .au3-clock [data-au-clock-sub]:empty, html[data-ds] .au3 .au3-clock [data-au-clock-more]:empty { display: none; }
/* A long saved line ("(was Bid, changed elsewhere)") wraps beside its icon. */
html[data-ds] .au3 .au3-saved:not(.is-error) > span { flex: 1 1 14em; min-width: 0; }
@container au3board (max-width: 959px) {
  html[data-ds] .au3 .au3-star-slot { display: none; }
}
/* At 900px and below the sidebar is a sticky bar --mobile-bar-h tall (app.js
   measures it, in either nav): a day head or a sale that a link, J or K
   brings into view lands below it. */
@media (max-width: 900px) {
  html[data-ds] .au3 .au3-dayhead .lg-h-sec,
  html[data-ds][data-nav="top"] .au3 .au3-dayhead .lg-h-sec { scroll-margin-top: calc(var(--mobile-bar-h, 0px) + var(--space-6)); }
  html[data-ds] .au3 .au3-row { scroll-margin-top: calc(var(--mobile-bar-h, 0px) + var(--space-4)); }
  html[data-ds] .au3 .au3-filters { scroll-margin-top: calc(var(--mobile-bar-h, 0px) + var(--space-2)); }
}
/* A touch screen gets a 44px Undo at any width; a mouse keeps the Ledger's
   24px beside the table (the stacked rows have 44px already). */
@media (pointer: coarse) {
  html[data-ds] .au3 .au3-saved .btn { min-height: var(--hit); padding: 0 var(--space-4); }
}

/* ---------------------------------------------------------------------
   11. Auctions: the decision sheet (templates/ds3/_auctions_sheet.html and
       auction_defaults.html, auction_sheet.py, auctions-3.js; map-auctions.md
       2.3-2.5, D26, D38; Ledger style.css 906-978). The sheet beside the
       board, in view while the sales go by; beside it the board keeps its
       table in a narrower column (its container is au3side while the sheet
       is open, stacking only under 780px; auctions-3.js folds the sidebar
       to icons between 901 and 1599px, so a laptop keeps the table); on a
       phone the sheet covers the board, with Close. Then the worksheet
       defaults' page. Every rule is under .au3.
   --------------------------------------------------------------------- */
html[data-ds] .au3 .au3-split-main { min-width: 0; }
html[data-ds] .au3 .au3-pane[hidden] { display: none; }
/* Beside the board the sheet sticks once the page scrolls to it. At the top
   of the page it runs below the window, so its scroll hands on to the page
   (no overscroll containment here): scrolling over the sheet brings its end
   (research, Print bid card) into view. */
@media (min-width: 901px) {
  html[data-ds] .au3 .au3-split.is-sheet { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 340px); gap: var(--space-6); align-items: start; }
  html[data-ds] .au3 .au3-split.is-sheet .au3-pane {
    position: sticky; top: var(--space-4); max-height: calc(100vh - var(--space-8)); overflow-y: auto;
    margin-top: var(--space-4); padding: var(--space-1) var(--space-1) var(--space-5) var(--space-6); border-left: 1px solid var(--rule);
  }
  html[data-ds][data-nav="top"] .au3 .au3-split.is-sheet .au3-pane {
    top: calc(var(--topbar-h, 52px) + var(--space-4)); max-height: calc(100vh - var(--topbar-h, 52px) - var(--space-8));
  }
}
html[data-ds] .au3 .au3-split.is-sheet .au3-board { container-name: au3side; }
/* The open sheet's sale: tinted, with the keyboard's edge. */
html[data-ds] .au3 .au3-row.is-sel td { background: var(--accent-tint); }
html[data-ds] .au3 .au3-row.is-sel td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
html[data-ds] .au3 .au3-rs-n { white-space: nowrap; }

/* Beside the sheet (780px and wider) the figures' columns give a little, so
   the table keeps every one of them and the address a column of its own
   (about 130px at the narrowest, two lines for a long one); narrower, each
   sale stacks as on a phone. */
@container au3side (min-width: 780px) {
  html[data-ds] .au3 .au3-c-time { width: 96px; }
  html[data-ds] .au3 .au3-c-val { width: 80px; }
  html[data-ds] .au3 .au3-c-owed { width: 112px; }
  html[data-ds] .au3 .au3-c-eq { width: 64px; }
  html[data-ds] .au3 .au3-sales .au3-c-dec { width: 200px; padding-left: var(--space-2); }
  html[data-ds] .au3 .au3-soon { white-space: normal; }
}
/* With room to spare (a laptop with the sidebar folded), the TS # keeps
   its line under the time. */
@container au3side (min-width: 900px) {
  html[data-ds] .au3 .au3-c-time { width: 112px; }
}
@container au3side (max-width: 779px) {
  html[data-ds] .au3 .au3-sales thead { display: none; }
  html[data-ds] .au3 .au3-sales, html[data-ds] .au3 .au3-sales tbody,
  html[data-ds] .au3 .au3-sales tr, html[data-ds] .au3 .au3-sales th { display: block; }
  html[data-ds] .au3 .au3-sales tr.au3-row {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "time time time" "prop prop prop" "val owed eq" "dec dec dec";
    gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-2) var(--space-4); border-bottom: 1px solid var(--rule);
  }
  html[data-ds] .au3 .au3-sales td, html[data-ds] .au3 .au3-sales td.r { display: block; width: auto; padding: 0; border: 0; text-align: left; }
  html[data-ds] .au3 .au3-row td:first-child, html[data-ds] .au3 .au3-row td:last-child { padding: 0; }
  html[data-ds] .au3 .au3-row:hover td { background: none; }
  html[data-ds] .au3 .au3-row.is-sel { background: var(--accent-tint); box-shadow: inset 2px 0 0 var(--accent); }
  html[data-ds] .au3 .au3-row.is-sel td, html[data-ds] .au3 .au3-row.is-sel td:first-child { background: none; box-shadow: none; }
  html[data-ds] .au3 .au3-place-head > .lg-sep { display: none; }
  html[data-ds] .au3 .au3-place-nm { flex: 1 1 auto; }
  html[data-ds] .au3 .au3-place-meta { order: 3; flex-basis: 100%; }
  html[data-ds] .au3 .au3-sales .au3-c-time { grid-area: time; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3); width: auto; }
  html[data-ds] .au3 .au3-c-time .au3-sub { display: inline; }
  html[data-ds] .au3 a.au3-sheet { display: inline-flex; align-items: center; gap: 2px; min-height: var(--hit); margin: -10px -6px -10px auto; padding: 0 var(--space-1) 0 var(--space-2); font: var(--t-label); font-weight: 600; color: var(--accent); text-decoration: none; }
  html[data-ds] .au3 .au3-sales .au3-c-prop { grid-area: prop; }
  html[data-ds] .au3 .au3-sales .au3-c-val { grid-area: val; }
  html[data-ds] .au3 .au3-sales .au3-c-owed { grid-area: owed; }
  html[data-ds] .au3 .au3-sales .au3-c-eq { grid-area: eq; }
  html[data-ds] .au3 .au3-sales .au3-c-dec { grid-area: dec; width: auto; padding-left: 0; }
  html[data-ds] .au3 .au3-c-val::before, html[data-ds] .au3 .au3-c-owed::before,
  html[data-ds] .au3 .au3-c-eq::before { content: attr(data-label); display: block; font: var(--t-label); color: var(--ink-3); }
  html[data-ds] .au3 .au3-decide { display: flex; width: 100%; max-width: 440px; }
  html[data-ds] .au3 .au3-decide > button { flex: 1; min-height: var(--hit); font-size: 13px; }
  html[data-ds] .au3 .au3-saved .btn { min-height: var(--hit); padding: 0 var(--space-4); margin-left: auto; }
  html[data-ds] .au3 .au3-star { width: var(--hit); height: var(--hit); margin: -10px -12px -10px auto; order: 3; }
  html[data-ds] .au3 .au3-star-slot { display: none; }
  html[data-ds] .au3 a.au3-map { width: var(--hit); height: var(--hit); margin: -12px -14px -12px -10px; }
  html[data-ds] .au3 a.au3-place-map { min-height: var(--hit); }
}

/* The sheet: the Ledger's (style.css 908-941). */
html[data-ds] .au3 .au3-sh-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
html[data-ds] .au3 .au3-sh-over { font: var(--t-label); color: var(--ink-3); }
html[data-ds] .au3 .au3-sh-close { display: inline-flex; align-items: center; gap: var(--space-1); }
html[data-ds] .au3 .au3-sh-close-w { display: none; }
html[data-ds] .au3 .au3-sh-hint { margin: var(--space-1) 0 0; font: var(--t-label); font-weight: 400; color: var(--ink-3); }
html[data-ds] .au3 .au3-sh-hint[hidden], html[data-ds] .au3 .au3-sh-cap[hidden] { display: none; }
html[data-ds] .au3 .au3-sh-nm { margin: var(--space-2) 0 0; font: 600 22px/30px var(--font-sans); letter-spacing: var(--track-title); color: var(--ink-1); overflow-wrap: anywhere; }
html[data-ds] .au3 .au3-sh-facts { margin: var(--space-1) 0 0; font: var(--t-label); font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* TS # and APN keep apart by the gap, not a dot, so a wrapped pair leaves
   no dot at the end of a line. */
html[data-ds] .au3 .au3-sh-nums { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--space-4); }
html[data-ds] .au3 .au3-sh-num { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
html[data-ds] .au3 .au3-sh-v { color: var(--ink-2); }
html[data-ds] .au3 .au3-sh-sec { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--rule); }
html[data-ds] .au3 .au3-sh-h { margin: 0 0 var(--space-2); font: var(--t-label); font-weight: 600; color: var(--ink-2); }
html[data-ds] .au3 .au3-sh-unit { font-weight: 400; color: var(--ink-3); }
html[data-ds] .au3 .au3-sh-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: 0; font: var(--t-table); }
html[data-ds] .au3 .au3-sh-kv dt { color: var(--ink-2); }
html[data-ds] .au3 .au3-sh-kv dd { margin: 0; text-align: right; color: var(--ink-1); overflow-wrap: anywhere; }
html[data-ds] .au3 .au3-sh-when { font-weight: 600; font-variant-numeric: tabular-nums; }
html[data-ds] .au3 a.au3-sh-map { display: inline-flex; align-items: center; gap: 2px; margin-left: var(--space-1); font: var(--t-label); white-space: nowrap; }
html[data-ds] .au3 .au3-sh-phone { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: var(--space-2); white-space: nowrap; }
html[data-ds] .au3 .au3-sh-phone a { display: inline-flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }
html[data-ds] .au3 .au3-sh-cap { margin: var(--space-2) 0 0; font: var(--t-label); font-weight: 400; color: var(--ink-3); overflow-wrap: anywhere; }
html[data-ds] .au3 .au3-sh-pp { margin: 0; padding: 0; list-style: none; font: var(--t-table); color: var(--ink-2); }
html[data-ds] .au3 .au3-sh-pp li { display: flex; align-items: flex-start; gap: var(--space-1); padding: 2px 0; overflow-wrap: anywhere; }
html[data-ds] .au3 .au3-sh-pp .icon { flex: none; margin-top: 3px; color: var(--warn); }
html[data-ds] .au3 .au3-sh-reason { margin: var(--space-1) 0 0; font: var(--t-table); font-weight: 500; color: var(--warn); overflow-wrap: anywhere; }
html[data-ds] .au3 .au3-sh-reason.is-hard { color: var(--neg); }
html[data-ds] .au3 .au3-sh-why { display: block; font: var(--t-label); font-weight: 400; }
html[data-ds] .au3 .au3-sh-dec .au3-decide { display: flex; width: 100%; }
html[data-ds] .au3 .au3-sh-dec .au3-decide > button { flex: 1; min-height: var(--ctl-h, 32px); }
html[data-ds] .au3 .au3-sh-dec .au3-dword { font: var(--t-table); font-weight: 600; }

/* The max bid worksheet: the value, less each line, double-ruled to the
   max; the target, owed and opening bid under it. */
html[data-ds] .au3 .au3-ws { width: 100%; border-collapse: collapse; font: var(--t-table); background: transparent; }
html[data-ds] .au3 .au3-ws th, html[data-ds] .au3 .au3-ws td { padding: var(--space-1) 0; border: 0; vertical-align: top; text-align: left; font-weight: 400; background: transparent; text-transform: none; letter-spacing: 0; }
html[data-ds] .au3 .au3-ws th { padding-right: var(--space-3); color: var(--ink-2); font: var(--t-table); }
html[data-ds] .au3 .au3-ws td.r { text-align: right; color: var(--ink-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
html[data-ds] .au3 .au3-ws-prov { display: block; font: var(--t-label); font-weight: 400; color: var(--ink-3); overflow-wrap: anywhere; }
html[data-ds] .au3 .au3-ws-prov.is-warn, html[data-ds] .au3 .au3-ws td.r.lg-warn { color: var(--warn); }
html[data-ds] .au3 .au3-ws-tot th, html[data-ds] .au3 .au3-ws-tot td { padding: var(--space-2) 0; border-top: 3px double var(--rule-total); background: var(--fill-1); font-weight: 600; color: var(--ink-1); }
html[data-ds] .au3 .au3-ws-tot th { padding-left: var(--space-2); }
html[data-ds] .au3 .au3-ws-tot td.r { padding-right: var(--space-2); }
html[data-ds] .au3 .au3-ws-after th, html[data-ds] .au3 .au3-ws-after td.r { padding-top: var(--space-2); color: var(--ink-2); }
html[data-ds] .au3 .au3-ws-after + .au3-ws-after th, html[data-ds] .au3 .au3-ws-after + .au3-ws-after td.r { padding-top: 0; }
html[data-ds] .au3 .au3-ws-cap { margin: var(--space-2) 0 0; font: var(--t-label); font-weight: 400; color: var(--ink-3); }
html[data-ds] .au3 .au3-ws-cap-l { display: block; }
html[data-ds] .au3 .au3-sh-plan { margin: var(--space-2) 0 0; font: var(--t-label); font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; }
html[data-ds] .au3 .au3-sh-plan b { color: var(--ink-1); font-weight: 600; }

/* Research N of 7: each step, done or not, with the fact that decides it. */
html[data-ds] .au3 .au3-rs { margin: 0; padding: 0; list-style: none; }
html[data-ds] .au3 .au3-rs-step { display: grid; grid-template-columns: 14px auto minmax(0, 1fr); align-items: baseline; gap: var(--space-2); padding: 2px 0; font: var(--t-table); color: var(--ink-2); }
html[data-ds] .au3 .au3-rs-step .icon { align-self: center; color: var(--ink-3); }
html[data-ds] .au3 .au3-rs-step.is-done, html[data-ds] .au3 .au3-rs-step.is-done .icon { color: var(--ink-1); }
html[data-ds] .au3 .au3-rs-step.is-na { color: var(--ink-3); }
html[data-ds] .au3 .au3-rs-w { font: var(--t-label); font-weight: 400; color: var(--ink-3); text-align: right; overflow-wrap: anywhere; }
html[data-ds] .au3 .au3-rs-w a { white-space: nowrap; }
html[data-ds] .au3 .au3-sh-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--rule); }
html[data-ds] .au3 .au3-sh-acts .btn { display: inline-flex; align-items: center; gap: var(--space-1); }
html[data-ds] .au3 .au3-sh-bought { flex-basis: 100%; margin: 0; font: var(--t-label); font-weight: 400; color: var(--ink-2); }
html[data-ds] .au3 .au3-sh-wait { margin-top: var(--space-4); }
@media (forced-colors: active) {
  html[data-ds] .au3 .au3-row.is-sel td:first-child { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* On a phone the head's three actions wrap rather than pass the edge, and
   Worksheet defaults is its icon (the words stay for a screen reader). */
@media (max-width: 760px) {
  html[data-ds] .au3 .lg-head-actions { flex: 1 1 100%; flex-wrap: wrap; }
  html[data-ds] .au3 .au3-dft-link { justify-content: center; min-width: var(--hit); padding: 0; }
  html[data-ds] .au3 .au3-dft-link .au3-lbl {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* A phone (and a narrow tablet): the sheet covers the board, its Close in
   a bar that stays at its top; the board stays where it was underneath. */
@media (max-width: 900px) {
  html[data-ds] .au3 .au3-pane:not([hidden]) {
    position: fixed; inset: 0; z-index: 700; max-height: none; margin: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 0 var(--space-4) var(--space-8); border: 0; background: var(--paper);
  }
  html[data-ds] .au3 .au3-sh-top { position: sticky; top: 0; z-index: 1; margin: 0 calc(-1 * var(--space-4)); padding: var(--space-1) var(--space-4); border-bottom: 1px solid var(--rule); background: var(--paper); }
  html[data-ds] .au3 .au3-sh-close { min-height: var(--hit); padding: 0 var(--space-3); }
  html[data-ds] .au3 .au3-sh-close-w { display: inline; }
  html[data-ds] .au3 .au3-sh-dec .au3-decide > button { min-height: var(--hit); }
  html[data-ds] .au3 .au3-sh-acts .btn { min-height: var(--hit); }
  html[data-ds] .au3 .au3-sh .lg-copy { width: var(--hit); height: var(--hit); }
}

/* The worksheet defaults' page: one table a group, the value, where it
   started and who last changed it; the log of changes under them. */
html[data-ds] .lg-page.au3.au3-dft { max-width: 1040px; }
html[data-ds] .au3 .au3-dft-problems { margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--warn); border-radius: var(--r-2); background: var(--warn-tint); font: var(--t-table); color: var(--ink-1); }
html[data-ds] .au3 .au3-dft-problems p { margin: 0; }
html[data-ds] .au3 .au3-dft-problems ul { margin: var(--space-1) 0 0; padding-left: var(--space-5); }
html[data-ds] .au3 .au3-dft-t { width: 100%; margin-top: var(--space-6); border-collapse: collapse; table-layout: fixed; font: var(--t-table); background: transparent; }
html[data-ds] .au3 .au3-dft-t caption { padding: 0 0 var(--space-2); text-align: left; font: var(--t-head); color: var(--ink-1); }
html[data-ds] .au3 .au3-dft-t th, html[data-ds] .au3 .au3-dft-t td { padding: var(--space-2); border-bottom: 1px solid var(--rule); vertical-align: top; text-align: left; font-weight: 400; background: transparent; text-transform: none; letter-spacing: 0; }
html[data-ds] .au3 .au3-dft-t thead th { font: var(--t-label); color: var(--ink-3); vertical-align: bottom; }
/* One set of column widths for every group, so the groups line up. */
html[data-ds] .au3 .au3-dft-t thead th:nth-child(1) { width: 44%; }
html[data-ds] .au3 .au3-dft-t thead th:nth-child(2) { width: 22%; }
html[data-ds] .au3 .au3-dft-t thead th:nth-child(3) { width: 15%; }
html[data-ds] .au3 .au3-dft-t tbody th { color: var(--ink-1); }
html[data-ds] .au3 .au3-dft-t th:first-child, html[data-ds] .au3 .au3-dft-t td:first-child { padding-left: 0; }
html[data-ds] .au3 .au3-dft-hint { display: block; font: var(--t-label); font-weight: 400; color: var(--ink-3); }
html[data-ds] .au3 .au3-dft-v { white-space: nowrap; color: var(--ink-1); font-variant-numeric: tabular-nums; }
html[data-ds] .au3 .au3-dft-in { width: 9.5em; max-width: 100%; display: inline-block; font-variant-numeric: tabular-nums; }
html[data-ds] .au3 .au3-dft-in[aria-invalid="true"] { border-color: var(--warn); }
html[data-ds] .au3 .au3-dft-unit { margin-left: var(--space-1); color: var(--ink-3); }
html[data-ds] .au3 .au3-dft-unit.au3-dft-pre { margin: 0 var(--space-1) 0 0; }
html[data-ds] .au3 .au3-dft-err { display: block; margin-top: 2px; font: var(--t-label); font-weight: 400; color: var(--warn); white-space: normal; }
html[data-ds] .au3 .au3-dft-start, html[data-ds] .au3 .au3-dft-when { color: var(--ink-2); font-variant-numeric: tabular-nums; }
html[data-ds] .au3 .au3-dft-acts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
html[data-ds] .au3 .au3-dft-sec { margin-top: var(--space-8); }
html[data-ds] .au3 .au3-dft-log { margin: var(--space-2) 0 0; padding: 0; list-style: none; font: var(--t-table); color: var(--ink-2); }
html[data-ds] .au3 .au3-dft-log li { padding: var(--space-1) 0; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
html[data-ds] .au3 .au3-dft-at { color: var(--ink-3); font-variant-numeric: tabular-nums; }
html[data-ds] .au3 .au3-dft-none { margin: var(--space-2) 0 0; font: var(--t-table); color: var(--ink-3); }
@media (max-width: 760px) {
  html[data-ds] .au3 .au3-dft-t thead { display: none; }
  html[data-ds] .au3 .au3-dft-t, html[data-ds] .au3 .au3-dft-t tbody, html[data-ds] .au3 .au3-dft-t tr,
  html[data-ds] .au3 .au3-dft-t caption { display: block; }
  html[data-ds] .au3 .au3-dft-t tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-1) var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
  html[data-ds] .au3 .au3-dft-t tbody th, html[data-ds] .au3 .au3-dft-t td { display: block; width: auto; padding: 0; border: 0; }
  html[data-ds] .au3 .au3-dft-t tbody th, html[data-ds] .au3 .au3-dft-t td.au3-dft-v { grid-column: 1 / -1; }
  html[data-ds] .au3 .au3-dft-start, html[data-ds] .au3 .au3-dft-when { font: var(--t-label); font-weight: 400; }
  html[data-ds] .au3 .au3-dft-start::before { content: "Starting value "; color: var(--ink-3); }
  html[data-ds] .au3 .au3-dft-t td.au3-dft-v { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); white-space: normal; }
  html[data-ds] .au3 .au3-dft-in { flex: 1 1 auto; width: auto; min-width: 0; min-height: var(--hit); }
  html[data-ds] .au3 .au3-dft-unit, html[data-ds] .au3 .au3-dft-unit.au3-dft-pre { margin: 0; }
  html[data-ds] .au3 .au3-dft-v .au3-dft-err { flex-basis: 100%; }
  html[data-ds] .au3 .au3-dft-acts .btn { min-height: var(--hit); }
}

/* ---------------------------------------------------------------------
   12. Auctions: decisions and results (templates/ds3/_auctions_rows.html,
       auctions.html and _auctions_sheet.html; auctions_page.py,
       auction_sheet.py, auction_day.py, auctions-3.js; map-auctions.md
       2.6-2.9, D39-D42). Under a decision: Needs a result with Record
       result (the row's control gives way), the condition and its links;
       each sale place's bidder and checked time, the day's sum; on the
       sheet, the condition form and Record result. Every rule is under
       .au3.
   --------------------------------------------------------------------- */
/* What the script shows and hides stays hidden whatever the layout says:
   a row's control while it needs a result, a sale's own check line, the
   day's count, the forms' boxes for another choice. */
html[data-ds] .au3 .au3-decide[hidden], html[data-ds] .au3 .au3-chk[hidden],
html[data-ds] .au3 .au3-day-res[hidden], html[data-ds] .au3 [data-au-res-for][hidden],
html[data-ds] .au3 .au3-res-acts [hidden], html[data-ds] .au3 [data-au-reason-other][hidden],
html[data-ds] .au3 .au3-cond-warn[hidden], html[data-ds] .au3 .au3-form-err[hidden],
html[data-ds] .au3 .au3-cond-err[hidden] { display: none !important; }

/* Under a decision: "Needs a result" in warn ink and weight; Record result,
   Confirm, Change and Name it as the accent's links; a condition not
   named on a line of its own. */
html[data-ds] .au3 .au3-needs { font-weight: 600; }
html[data-ds] .au3 a.au3-rec { font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
html[data-ds] .au3 a.au3-rec:hover { text-decoration: underline; text-underline-offset: 2px; }
/* Where the control gave way, Record result takes its place, as a quiet
   button on a line of its own. */
html[data-ds] .au3 a.au3-rec.is-due { display: flex; align-items: center; width: fit-content; min-height: 28px; margin-top: var(--space-2); padding: 0 var(--space-3); border: 1px solid var(--line-ui); border-radius: var(--r-2); background: var(--paper); color: var(--ink-1); }
html[data-ds] .au3 a.au3-rec.is-due:hover { background: var(--fill-1); text-decoration: none; }
html[data-ds] .au3 button.au3-link { display: inline; min-height: 0; margin: 0; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; white-space: nowrap; }
html[data-ds] .au3 button.au3-link:hover { text-decoration: underline; text-underline-offset: 2px; }
html[data-ds] .au3 button.au3-link:focus-visible, html[data-ds] .au3 a.au3-rec:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-1); }
html[data-ds] .au3 .au3-cond-miss { display: block; }
html[data-ds] .au3 .au3-chk { color: var(--ink-2); }

/* A sale place's day: who bids there (D41) and when its sales were checked
   (D42), under its head, kept apart by the gap (no dot to strand at a line
   break); a writer's bidder is a menu, Mark checked a quiet button. */
html[data-ds] .au3 .au3-place-day { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-4); padding: var(--space-1) 0 var(--space-2); font: var(--t-label); font-weight: 400; color: var(--ink-2); }
html[data-ds] .au3 .au3-bidder, html[data-ds] .au3 .au3-checked { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ink-1); }
html[data-ds] .au3 .au3-bidder.is-none, html[data-ds] .au3 .au3-checked.is-none { color: var(--ink-3); }
html[data-ds] .au3 .au3-checked .icon { color: var(--accent); }
/* A long typed name shortens with an ellipsis, the full name in the menu:
   the menu and its button may shrink to the line, so a phone never scrolls
   sideways. */
html[data-ds] .au3 .au3-bid-menu { position: relative; display: inline-block; max-width: 100%; min-width: 0; }
/* It sits at the board's left edge: its panel opens rightward, clear of
   the sidebar (a menu's panel opens leftward from its button). */
html[data-ds] .au3 .au3-bid-menu .lg-menu-panel { left: 0; right: auto; }
html[data-ds] .au3 .au3-bid-sum { display: inline-flex; align-items: center; gap: var(--space-1); max-width: 100%; min-width: 0; font-weight: 500; color: var(--ink-1); }
html[data-ds] .au3 .au3-bid-sum .icon { flex: none; }
html[data-ds] .au3 .au3-bid-sum [data-au-bidder-label] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ds] .au3 .lg-menu-panel.au3-bid-panel { width: min(320px, calc(100vw - 32px)); min-width: 0; }
html[data-ds] .au3 .au3-bid-form { display: grid; gap: var(--space-2); margin: 0; }
html[data-ds] .au3 .au3-bid-who { display: grid; gap: 2px; min-width: 0; margin: 0; padding: 0; border: 0; }
html[data-ds] .au3 .au3-bid-who legend { padding: 0 0 var(--space-1); font: var(--t-label); color: var(--ink-3); overflow-wrap: anywhere; }
html[data-ds] .au3 label.au3-bid-opt { display: flex; align-items: center; gap: var(--space-2); min-height: 28px; padding: 0 var(--space-1); border-radius: var(--r-1); font: var(--t-table); color: var(--ink-1); cursor: pointer; overflow-wrap: anywhere; }
html[data-ds] .au3 label.au3-bid-opt:hover { background: var(--fill-1); }
html[data-ds] .au3 label.au3-bid-opt input, html[data-ds] .au3 label.au3-cond-opt input,
html[data-ds] .au3 label.au3-res-opt input { flex: none; margin: 0; accent-color: var(--accent); }
html[data-ds] .au3 .au3-bid-name { width: calc(100% - var(--space-6)); margin: 0 0 var(--space-1) var(--space-6); }
html[data-ds] .au3 .au3-chk-form { display: inline-flex; margin: 0; }
html[data-ds] .au3 .au3-chk-btn { font-weight: 500; }
html[data-ds] .au3 .au3-form-err { margin: 0; color: var(--warn); font-weight: 500; }
/* The day's head: what needs a result there in warn ink, then the checks. */
html[data-ds] .au3 .au3-day-res { color: var(--warn); font-weight: 600; }

/* The sheet: the check line with its button; who decided; the condition
   form (a details of its own, opened by choosing Conditional) and Record
   result, each in a quiet box. */
html[data-ds] .au3 .au3-sh-chk { display: flex; align-items: flex-start; gap: var(--space-1); }
html[data-ds] .au3 .au3-sh-chk .icon { flex: none; margin-top: 2px; color: var(--accent); }
html[data-ds] .au3 .au3-sh .au3-chk-form { display: flex; margin: var(--space-1) 0 0; }
html[data-ds] .au3 .au3-cond, html[data-ds] .au3 .au3-res-again { margin-top: var(--space-2); }
html[data-ds] .au3 .au3-cond-sum { display: inline-flex; align-items: center; min-height: 28px; font: var(--t-label); font-weight: 600; color: var(--accent); cursor: pointer; }
html[data-ds] .au3 .au3-cond-form, html[data-ds] .au3 .au3-res-form { display: grid; gap: var(--space-2); margin-top: var(--space-2); padding: var(--space-3); border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--fill-1); }
html[data-ds] .au3 .au3-cond-kinds, html[data-ds] .au3 .au3-res-kinds { min-width: 0; margin: 0; padding: 0; border: 0; }
html[data-ds] .au3 .au3-cond-kinds { display: grid; gap: var(--space-1); }
html[data-ds] .au3 .au3-cond-legend { padding: 0 0 var(--space-1); font: var(--t-label); color: var(--ink-2); }
html[data-ds] .au3 label.au3-cond-opt { display: flex; align-items: center; gap: var(--space-2); min-height: 28px; font: var(--t-table); color: var(--ink-1); cursor: pointer; }
html[data-ds] .au3 .au3-cond-box { width: calc(100% - var(--space-6)); margin-left: var(--space-6); }
html[data-ds] .au3 .au3-cond-ceil, html[data-ds] .au3 label.au3-res-f { display: grid; gap: 2px; font: var(--t-label); color: var(--ink-2); }
html[data-ds] .au3 .au3-cond-warn { margin: 0; font: var(--t-label); font-weight: 500; }
html[data-ds] .au3 .au3-cond-err { margin: 0; color: var(--warn); font-weight: 500; }
html[data-ds] .au3 .au3-cond-acts, html[data-ds] .au3 .au3-res-acts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
html[data-ds] .au3 .au3-sh-res:focus { outline: none; }
html[data-ds] .au3 .au3-sh-res:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-ds] .au3 .au3-res-line { margin: 0; font: var(--t-table); font-weight: 600; color: var(--ink-1); font-variant-numeric: tabular-nums; }
html[data-ds] .au3 .au3-res-kinds { display: flex; flex-wrap: wrap; gap: var(--space-1); }
html[data-ds] .au3 label.au3-res-opt { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 28px; padding: 0 var(--space-2); border: 1px solid var(--line-ui); border-radius: 999px; background: var(--paper); font: var(--t-label); color: var(--ink-1); cursor: pointer; }
html[data-ds] .au3 label.au3-res-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); font-weight: 600; }
html[data-ds] .au3 label.au3-res-opt:has(input:disabled) { color: var(--ink-3); cursor: not-allowed; }
html[data-ds] .au3 label.au3-res-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-ds] .au3 .au3-res-fields { display: grid; gap: var(--space-2); }
html[data-ds] .au3 .au3-res-form textarea { resize: vertical; }
@media (forced-colors: active) {
  html[data-ds] .au3 label.au3-res-opt:has(input:checked) { outline: 2px solid Highlight; outline-offset: -2px; }
}
/* A phone, a stacked row and a touch screen: 44px targets. */
@container au3board (max-width: 959px) {
  html[data-ds] .au3 a.au3-rec, html[data-ds] .au3 button.au3-link { display: inline-flex; align-items: center; min-height: var(--hit); }
  html[data-ds] .au3 a.au3-rec.is-due { display: flex; min-height: var(--hit); }
}
@media (max-width: 900px), (pointer: coarse) {
  html[data-ds] .au3 label.au3-res-opt, html[data-ds] .au3 label.au3-bid-opt,
  html[data-ds] .au3 label.au3-cond-opt, html[data-ds] .au3 .au3-cond-sum,
  html[data-ds] .au3 a.au3-rec.is-due { min-height: var(--hit); }
  html[data-ds] .au3 .au3-res-acts .btn, html[data-ds] .au3 .au3-cond-acts .btn,
  html[data-ds] .au3 .au3-chk-form .btn, html[data-ds] .au3 .au3-bid-sum, html[data-ds] .au3 .au3-bid-form .btn { min-height: var(--hit); }
}
/* A day's routes, one for each bidder who goes in person (F10), side by
   side at the head's end; and on a phone, the clock's count after the last
   sale on a line of its own, as its other parts are. */
html[data-ds] .au3 .au3-routes { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-left: auto; }
html[data-ds] .au3 .au3-routes .au3-route { margin-left: 0; }
/* A route named for a long typed name shortens with an ellipsis (its title
   and its name say it whole), so a phone never scrolls sideways. */
html[data-ds] .au3 .au3-route, html[data-ds] .au3 .au3-routes { min-width: 0; max-width: 100%; }
html[data-ds] .au3 .au3-route .btn { max-width: 100%; min-width: 0; }
html[data-ds] .au3 .au3-route .btn .icon { flex: none; }
html[data-ds] .au3 .au3-route-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
html[data-ds] .au3 .au3-clock [data-au-clock-sub][hidden], html[data-ds] .au3 .au3-clock [data-au-clock-more][hidden],
html[data-ds] .au3 .au3-clock [data-au-clock-res][hidden] { display: none; }
@media (max-width: 760px) {
  html[data-ds] .au3 .au3-routes { flex-basis: 100%; margin-left: 0; }
  html[data-ds] .au3 .au3-clock [data-au-clock-res] { flex-basis: 100%; padding-left: var(--space-6); }
}

/* ---------------------------------------------------------------------
   Phone: Files in groups (D44)
   templates/ds3/files.html, files_page.phone_groups; map-step4 2.4. On a
   phone screen (760px and below), when the list is in its default order
   and its files fall in more than one group, the groups by next action
   take the table's place, and the totals row and the pager give way to
   their heads: the name, the rest of the week's days, the count and the
   UPB; then the group's first 5 files as cards (the stacked rows' own
   layout, folded as the table folds: the block is a container of the
   table's name; a card's UPB carries its word, as no head names it) and
   Show all. Never shown above 760px, and never printed: a printout keeps
   the table.
   --------------------------------------------------------------------- */
html[data-ds] .lg-groups { display: none; }
@media screen and (max-width: 760px) {
  html[data-ds] .lg-groups { display: block; margin-top: var(--space-2); container: lgfiles / inline-size; }
  html[data-ds] .lg-files:has(> .lg-groups) > .lg-split { display: none; }
  html[data-ds] .lg-groups .lg-grp-sec + .lg-grp-sec { margin-top: var(--space-5); }
  html[data-ds] .lg-groups .lg-grp-line {
    gap: 2px var(--space-3); padding: var(--space-3) 0 var(--space-2); border-bottom: 1px solid var(--rule-strong);
  }
  html[data-ds] .lg-groups .lg-grp-figs { font: var(--t-label); font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; }
  html[data-ds] .lg-groups .lg-see-all {
    display: inline-flex; align-items: center; min-height: var(--hit); font: var(--t-table); font-weight: 500;
  }
  html[data-ds] .lg-grp-table tr.lg-card { cursor: pointer; }
  html[data-ds] .lg-grp-table .lg-grp-unit { font: var(--t-label); font-weight: 400; color: var(--ink-3); }
  /* Compact sets a figure's column at 88px and cuts what overflows it: a
     card's figure carries its word, so it keeps its own width. */
  html[data-ds][data-density="compact"] .lg-grp-table td.lg-c-upb { width: auto; }
}

/* ---------------------------------------------------------------------
   Phone: action bars (Q-17)
   templates/ds3/_phone_bar.html, step-3.js; map-step4 2.1 to 2.3. On a
   phone screen (900px and below) a record's actions sit in a row under
   its status line: up to four buttons at least 52px tall, an icon over
   its word, the main one filled (the Ledger's phone row, a-ledger
   style.css 1183-1203). Once the row has scrolled up under the phone's top
   bar the same buttons dock in a bar at the foot of the screen (is-on,
   from step-3.js), so one of the two shows at a time. While a field has
   focus the docked bar gives way: the keyboard shrinks the window
   (base.html's viewport), and a bar fixed to its foot would ride up over
   what is being typed; so it does while the drawer is open. The page keeps
   room under the bar (--lg-abar-h, its height, which step-3.js measures),
   a toast sits above it, and what Tab or a link brings into view stops
   short of both bars. On the file page the header's buttons and the top
   sticky bar give way to it. Never shown wider, or on paper.
   --------------------------------------------------------------------- */
html[data-ds] .lg-actrow, html[data-ds] .lg-abar { display: none; }
@media screen and (max-width: 900px) {
  html[data-ds] { --lg-abar-h: calc(68px + env(safe-area-inset-bottom)); }
  html[data-ds] .lg-actrow, html[data-ds] .lg-abar {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-2);
  }
  html[data-ds] .lg-actrow { margin-top: var(--space-3); }
  html[data-ds] .lg-abar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom));
    background: var(--float); box-shadow: var(--shadow-bar-up);
    opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
  html[data-ds] .lg-abar.is-on { opacity: 1; visibility: visible; transition: opacity var(--dur) var(--ease); }
  html[data-ds] .lg-ab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-width: 0; min-height: 52px; margin: 0; padding: var(--space-1) 2px;
    border: 1px solid var(--line-ui); border-radius: var(--r-2); background: var(--paper);
    font: var(--t-label); line-height: 14px; color: var(--ink-2); text-align: center; text-decoration: none;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  /* A link keeps the button's ink over the page's link green (0,2,2). */
  html[data-ds] a.lg-ab { color: var(--ink-2); }
  html[data-ds] .lg-ab .icon { flex: none; color: currentColor; }
  html[data-ds] .lg-ab-w { max-width: 100%; overflow-wrap: anywhere; }
  html[data-ds] .lg-ab:hover { color: var(--ink-1); text-decoration: none; }
  html[data-ds] .lg-ab.is-primary { border-color: var(--accent-fill); background: var(--accent-fill); color: var(--on-accent-fill); }
  html[data-ds] .lg-ab.is-primary:hover { border-color: var(--accent-fill-hover); background: var(--accent-fill-hover); color: var(--on-accent-fill); }
  /* A borrower who is not to be contacted: the words, in People's colour. */
  html[data-ds] .lg-ab.is-off { border-style: dashed; color: var(--neg); cursor: default; }
  html[data-ds] .lg-ab-more { min-width: 0; }
  html[data-ds] .lg-ab-more > .lg-ab { height: 100%; }
  html[data-ds] .lg-ab-more[open] > .lg-ab { background: var(--fill-2); color: var(--ink-1); }
  /* Docked, only the main one keeps its edge (the Ledger's action bar). */
  html[data-ds] .lg-abar .lg-ab:not(.is-primary) { border-color: transparent; background: none; }
  html[data-ds] .lg-abar .lg-ab-more[open] > .lg-ab { background: var(--fill-2); }
  /* More is never wider than the screen. In the docked bar it opens above
     its button and scrolls inside the room between the two bars. In the
     row it opens where the screen has room for all of it: under its
     button, else above it (is-up), else on the side with more room, no
     taller than that room (--lg-ab-room; step-3.js measures both) and
     scrolling inside, so every item is in reach without moving the page,
     which would dock the bar and close the menu. */
  html[data-ds] .lg-actrow .lg-menu-panel, html[data-ds] .lg-abar .lg-menu-panel {
    left: auto; right: 0; width: max-content; min-width: 240px; max-width: calc(100vw - 2 * var(--space-4));
  }
  html[data-ds] .lg-abar .lg-menu-panel {
    top: auto; bottom: calc(100% + var(--space-2));
    max-height: calc(100dvh - var(--mobile-bar-h, 56px) - var(--lg-abar-h) - var(--space-6));
    overflow-y: auto; overscroll-behavior: contain;
  }
  html[data-ds] .lg-actrow .lg-menu-panel { max-height: var(--lg-ab-room, none); overflow-y: auto; overscroll-behavior: contain; }
  html[data-ds] .lg-actrow .lg-ab-more.is-up > .lg-menu-panel { top: auto; bottom: calc(100% + 4px); }
  /* The sale page draws its row inside the hero card, which clips what
     overflows it (app.css .detail-hero): there the menu opens past it. */
  html[data-ds] .detail-hero:has(> [data-lg-actrow]) { overflow: visible; }
  html[data-ds] .lg-ab-menu { gap: 0; padding: var(--space-2); }
  html[data-ds] .lg-ab-menu form { margin: 0; }
  html[data-ds] .lg-ab-menu a, html[data-ds] .lg-ab-menu button {
    display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: var(--hit);
    padding: 6px 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] .lg-ab-menu a:hover, html[data-ds] .lg-ab-menu button:hover,
  html[data-ds] .lg-ab-menu a:focus-visible, html[data-ds] .lg-ab-menu button:focus-visible { background: var(--fill-1); color: var(--accent); }
  html[data-ds] .lg-ab-menu .icon { flex: none; color: var(--ink-3); }
  html[data-ds] .lg-ab-menu button.is-neg, html[data-ds] .lg-ab-menu button.is-neg .icon { color: var(--neg); }
  /* The file page: the header's buttons and the top sticky bar give way. */
  html[data-ds] .fp3:has([data-lg-actrow]) .fp3-actions,
  html[data-ds] .fp3:has([data-lg-actrow]) .fp3-sticky { display: none; }
  /* Room under the docked bar, a toast above it (and so the preview
     server's switch, _preview_bar.html, which sits 14px off the foot over
     everything), and what is brought into view clear of the phone's top
     bar and of the docked bar. */
  html[data-ds] body:has([data-lg-abar]) .main { padding-bottom: calc(var(--space-10) + var(--lg-abar-h)) !important; }
  html[data-ds] body:has(.lg-abar.is-on) #toast-container { bottom: calc(var(--lg-abar-h) + var(--space-4)); }
  html[data-ds] body:has(.lg-abar.is-on) .preview-bar { bottom: calc(var(--lg-abar-h) + 14px); }
  html[data-ds]:has([data-lg-actrow]), html[data-ds][data-nav="top"]:has([data-lg-actrow]) {
    scroll-padding-top: calc(var(--mobile-bar-h, 0px) + var(--space-3));
    scroll-padding-bottom: calc(var(--lg-abar-h) + var(--space-3));
  }
  /* A field with focus has the keyboard up; the open drawer is the page. */
  html[data-ds] body:has(:is(input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"], [type="file"], [type="range"], [type="color"], [type="image"], [type="hidden"]), textarea, select, [contenteditable="true"]):focus) .lg-abar { display: none; }
  html[data-ds] body:has(.sidebar-nav.open) .lg-abar { display: none; }
  /* A tap begun while it has given way keeps it away until the tap is done
     (is-held, step-3.js): the tap takes the focus from the field as it
     begins, and the bar, back at once, would take the end of a tap on a
     form's Save just under the field, which then reached neither. */
  html[data-ds] .lg-abar.is-held { display: none; }
}
/* A phone turned sideways has little height for two bars: the buttons go
   to 44px, the icon beside its word. */
@media screen and (max-width: 900px) and (max-height: 480px) {
  html[data-ds] { --lg-abar-h: calc(60px + env(safe-area-inset-bottom)); }
  html[data-ds] .lg-ab { flex-direction: row; gap: var(--space-1); min-height: var(--hit); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-ds] .lg-abar, html[data-ds] .lg-abar.is-on { transition: none; }
}
@media print {
  html[data-ds] .lg-actrow, html[data-ds] .lg-abar { display: none !important; }
}
/* The file page's notices (review-file.md: at 320px each one's words
   wrapped under its icon): the words keep a column of their own beside
   the 14px icon and its 12px gap, whatever the width; a Reopen form still
   takes the next line when the words need theirs. */
html[data-ds] .fp3-notice > span { flex-basis: min(320px, calc(100% - 26px)); }
/* On a phone that form's select and button take a finger's 44px, as the
   bar's buttons do (32px and 28px left them under it). */
@media screen and (max-width: 900px) {
  html[data-ds] .fp3-reopen .form-control, html[data-ds] .fp3-reopen .btn { min-height: var(--hit); }
}

/* ---------------------------------------------------------------------
   Phone: the auction day
   templates/ds3/_auctions_rows.html, auctions.html and _auctions_sheet.html,
   auctions_page.py, auctions-3.js; map-step4 2.5 to 2.7 (D21: Daybook's
   auction day in the Ledger's look). On a screen where the board stacks
   (its container at 959px and below: a phone, or a narrow window beside
   the sidebar) each sale is a card: its first line (the time and zone, the
   TS #, a "Needs a decision" tag, Sheet), its address with Map and the
   star, four labelled figures two to a line, the decision, the line under
   it (its target and max words left to the Max figure), research as seven
   ticks with its words, and its buttons, an icon over a word and 52px
   tall: Navigate, Call trustee, Worksheet and, once the sale's time has
   passed, a writer's Record result. A writer's No-bid sale folds
   (data-au-fold) to one dim line, the time with No bid and Change and the
   address under it, keeping a fresh save's line and its Undo. Beside the
   side sheet on a laptop (the au3side container) and on paper the rows
   are Step 3's. On a phone screen (760px and below) the week strip is the
   day picker: its head takes the range control's place. At 900px and
   below the decision sheet rises from the foot in 160ms (with no motion
   under reduced motion), a short grabber line at its top, and the board
   under it keeps its cards.
   --------------------------------------------------------------------- */
html[data-ds] .au3 .au3-need, html[data-ds] .au3 .au3-fold, html[data-ds] .au3 .au3-cfigs,
html[data-ds] .au3 .au3-ticks, html[data-ds] .au3 .au3-acts, html[data-ds] .au3 .au3-wk-head { display: none; }
/* What the script shows and hides stays hidden whatever the layout says. */
html[data-ds] .au3 .au3-need[hidden], html[data-ds] .au3 .au3-act[hidden] { display: none !important; }
html[data-ds] .au3 .au3-sh-ws:focus { outline: none; }
html[data-ds] .au3 .au3-sh-ws:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media screen {
  @container au3board (max-width: 959px) {
    /* The card: its first line, its address, then the rest in the
       decision's cell; the three figure cells and Research N of 7 give way
       to the card's own. */
    html[data-ds] .au3 .au3-sales tr.au3-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "time" "prop" "dec"; }
    html[data-ds] .au3 .au3-sales td.au3-c-val, html[data-ds] .au3 .au3-sales td.au3-c-owed,
    html[data-ds] .au3 .au3-sales td.au3-c-eq { display: none; }
    html[data-ds] .au3 .au3-c-prop .au3-rs-n, html[data-ds] .au3 .au3-c-prop .au3-sub > .lg-sep:has(+ .au3-rs-n) { display: none; }
    html[data-ds] .au3 .au3-row .au3-note .au3-tm, html[data-ds] .au3 .au3-row .au3-note:has(> .au3-tm:only-child) { display: none; }
    /* Record result is the card's own button: the line under the decision
       keeps its words, and a No-bid sale's optional result goes with it. */
    html[data-ds] .au3 .au3-row .au3-note a.au3-rec,
    html[data-ds] .au3 .au3-row .au3-note:has(> a.au3-rec:not(.is-due)) { display: none; }
    /* The address takes a finger's 44px without moving the line. */
    html[data-ds] .au3 .au3-row a.au3-nm { padding: 12px 0; margin: -12px 0; }
    /* Each 44px target takes every tap in its box: the first line's words
       and its tag take none, its links and buttons are drawn over the
       address line beneath (Sheet keeps its edge over the star), and the
       address line is drawn over the lines under it. */
    html[data-ds] .au3 .au3-sales tr.au3-row td.au3-c-time { z-index: 1; pointer-events: none; }
    html[data-ds] .au3 .au3-sales tr.au3-row td.au3-c-time a,
    html[data-ds] .au3 .au3-sales tr.au3-row td.au3-c-time button { pointer-events: auto; }
    html[data-ds] .au3 .au3-sales tr.au3-row .au3-addr { position: relative; }
    /* "Needs a decision", on a line of its own under the first. */
    html[data-ds] .au3 .au3-need { display: flex; flex-basis: 100%; margin-top: var(--space-1); }
    html[data-ds] .au3 .au3-need-tag {
      display: inline-flex; align-items: center; min-height: 20px; padding: 0 var(--space-2);
      border: 1px solid currentColor; border-radius: 999px; font: var(--t-label); font-weight: 600; color: var(--warn); white-space: nowrap;
    }
    html[data-ds] .au3 .au3-cfigs {
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3);
      margin: 0 0 var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--rule);
    }
    html[data-ds] .au3 .au3-cfig { min-width: 0; }
    html[data-ds] .au3 .au3-cfig dt { font: var(--t-label); font-weight: 400; color: var(--ink-3); }
    html[data-ds] .au3 .au3-cfig dd { margin: 0; font: var(--t-head); color: var(--ink-1); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
    html[data-ds] .au3 .au3-cfig dd .au3-mark { font: var(--t-label); font-weight: 400; }
    html[data-ds] .au3 .au3-cfig dd .au3-v-sub { font: var(--t-label); font-weight: 400; color: var(--ink-3); }
    html[data-ds] .au3 .au3-cfig dd .au3-cfig-none { font: var(--t-table); color: var(--ink-3); }
    html[data-ds] .au3 .au3-cfig dd .lg-warn { font: var(--t-table); font-weight: 600; }
    /* Research: its words, then a tick a step: filled once done, dashed
       where it does not apply (Attend and Result on a No-bid sale). */
    html[data-ds] .au3 .au3-ticks {
      display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: var(--space-3) 0 0;
      font: var(--t-label); font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums;
    }
    html[data-ds] .au3 .au3-tick-row { display: inline-flex; gap: 3px; }
    html[data-ds] .au3 .au3-tick { box-sizing: border-box; width: 10px; height: 10px; border: 1.5px solid var(--ink-3); border-radius: 50%; }
    html[data-ds] .au3 .au3-tick.is-done { border: 5px solid var(--ink-2); }
    html[data-ds] .au3 .au3-tick.is-na { border-style: dashed; border-color: var(--rule-strong); }
    html[data-ds] .au3 .au3-acts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-2); margin-top: var(--space-3); }
    html[data-ds] .au3 a.au3-act {
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
      min-width: 0; min-height: 52px; padding: var(--space-1) 2px; border: 1px solid var(--line-ui); border-radius: var(--r-2);
      background: var(--paper); font: var(--t-label); line-height: 14px; color: var(--ink-1); text-align: center; text-decoration: none;
    }
    html[data-ds] .au3 a.au3-act:hover { background: var(--fill-1); text-decoration: none; }
    html[data-ds] .au3 a.au3-act .icon { flex: none; color: var(--ink-2); }
    html[data-ds] .au3 .au3-act-w { max-width: 100%; overflow-wrap: anywhere; }
    /* The fold: the time with No bid and Change, the address under it in
       quiet ink, and only a save's line besides. */
    html[data-ds] .au3 .au3-sales tr.au3-row[data-au-fold] { gap: 0 var(--space-3); padding-top: var(--space-1); padding-bottom: var(--space-2); background: var(--fill-1); }
    html[data-ds] .au3 tr.au3-row[data-au-fold] .au3-c-time > :not(.au3-time):not(.au3-fold),
    html[data-ds] .au3 tr.au3-row[data-au-fold] .au3-c-prop > :not(.au3-addr),
    html[data-ds] .au3 tr.au3-row[data-au-fold] .au3-addr > :not(.au3-nm),
    html[data-ds] .au3 tr.au3-row[data-au-fold] .au3-c-dec > :not(.au3-saved),
    html[data-ds] .au3 tr.au3-row[data-au-fold] .au3-c-dec:not(:has(> .au3-saved:not([hidden]))) { display: none; }
    html[data-ds] .au3 tr.au3-row[data-au-fold] .au3-fold { display: block; align-self: center; margin-left: auto; font: var(--t-label); font-weight: 400; color: var(--ink-3); }
    html[data-ds] .au3 tr.au3-row[data-au-fold] .au3-time, html[data-ds] .au3 tr.au3-row[data-au-fold] .au3-tz,
    html[data-ds] .au3 tr.au3-row[data-au-fold] a.au3-nm { color: var(--ink-3); font-weight: 400; }
  }
}
@media screen and (max-width: 760px) {
  html[data-ds] .au3 .au3-range { display: none; }
  html[data-ds] .au3 .au3-wk-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--space-4); margin-top: var(--space-4); }
  html[data-ds] .au3 .au3-wk-head + .au3-week { margin-top: var(--space-1); }
  html[data-ds] .au3 .au3-wk-t { flex: 1 1 100%; font: var(--t-label); color: var(--ink-3); }
  html[data-ds] .au3 a.au3-wk-all, html[data-ds] .au3 .au3-wk-more > summary {
    display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--hit); font: var(--t-table); font-weight: 500;
  }
  html[data-ds] .au3 a.au3-wk-all[aria-current="true"] { background: var(--fill-2); color: var(--ink-1); font-weight: 600; }
  html[data-ds] .au3 .au3-wk-all .au3-k { color: var(--ink-3); }
  /* Brought up under the bar on a short phone as it opens (auctions-3.js). */
  html[data-ds] .au3 .au3-wk-more { margin-left: auto; scroll-margin-top: calc(var(--mobile-bar-h, 0px) + var(--space-2)); }
  html[data-ds] .au3 .au3-wk-panel { min-width: 200px; padding: var(--space-2); }
  html[data-ds] .au3 .au3-wk-panel a {
    display: flex; align-items: center; min-height: var(--hit); padding: 0 var(--space-2); border-radius: var(--r-1);
    color: var(--ink-1); text-decoration: none;
  }
  html[data-ds] .au3 .au3-wk-panel a:hover { background: var(--fill-1); color: var(--accent); }
  html[data-ds] .au3 .au3-wk-panel a[aria-current="true"] { font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }
}
@media screen and (max-width: 900px) {
  html[data-ds] .au3 .au3-pane:not([hidden]) { animation: au3-rise 160ms var(--ease) both; }
  html[data-ds] .au3 .au3-pane:focus { outline: none; }
  html[data-ds] .au3 .au3-pane .au3-sh-top { padding-top: var(--space-3); }
  html[data-ds] .au3 .au3-pane .au3-sh-top::before {
    content: ""; position: absolute; top: var(--space-1); left: 50%; width: 36px; height: 4px; margin-left: -18px;
    border-radius: 2px; background: var(--rule-strong);
  }
  /* What the script brings into view (the worksheet, Record result) stops
     below the sheet's sticky top bar. */
  html[data-ds] .au3 .au3-pane .au3-sh-sec { scroll-margin-top: calc(var(--hit) + var(--space-6)); }
  html[data-ds] .au3 .au3-split.is-sheet .au3-board { container-name: au3board; }
  /* The preview server's switch sits at the foot over everything: the
     sheet's last buttons scroll clear of it. */
  html[data-ds] body:has(> .preview-bar) .au3 .au3-pane:not([hidden]) { padding-bottom: calc(var(--space-8) + 56px); }
}
@keyframes au3-rise { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html[data-ds] .au3 .au3-pane:not([hidden]) { animation: none; }
}

/* ---------------------------------------------------------------------
   Classic navigation
   templates/profile.html, base.html, app.classic_nav_window; map-step4 2.8
   and its risk 13. With Classic navigation on (Profile, for its two weeks)
   the classic sidebar takes the eight areas' place beside the level-3
   pages: its footer (Profile, Sidebar or Top bar, the theme, Sign out) and
   the floating "?" in the bottom right corner. The level-2 rules for
   toasts and the help panel are the eight-area sidebar's
   (body:has(.sidebar-v2), step-2.css), so here: toasts at the foot of the
   page column beside the classic sidebar, as level 3 has them, and above
   the "?" with the top bar; while an Auctions sheet is open beside the
   board, the "?" is clear of it unless it has focus or the help panel is
   open, then at the foot of the page column, off the sheet, with toasts
   above it (step-3.js folds the classic rail for the sheet, D26). On a phone the "?", toasts and the help panel sit above the docked
   bar (slice 1's), the page's end clears all three, and the classic
   drawer's switch and account link take a finger's 44px.
   --------------------------------------------------------------------- */
@media (min-width: 901px) {
  html[data-ds]:not([data-nav="top"]) body:has(> .app-shell > .sidebar:not(.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(> .app-shell > .sidebar:not(.sidebar-v2)) #toast-container { left: calc(60px + var(--space-4)); }
  html[data-ds]:not([data-nav="top"]) body.sidebar-collapsed:has(> .app-shell > .sidebar:not(.sidebar-v2)) #toast-container { left: var(--space-4); }
  html[data-ds][data-nav="top"] body:has(> .app-shell > .sidebar:not(.sidebar-v2)) #toast-container { bottom: calc(var(--space-6) + 40px + var(--space-3)); }
  /* An Auctions sheet beside the board: the "?" is clear of the board while it
     is open (not drawn, not clickable: parked at the page column's foot it hid
     the time column), and back at that foot whenever it has focus or the help
     panel is open, so Tab, Esc and the ? key still reach it. */
  html[data-ds] body:has(> .app-shell > .sidebar:not(.sidebar-v2)):has(.au3 [data-au-pane]:not([hidden])) #helpBtn { opacity: 0; pointer-events: none; }
  html[data-ds] body:has(> .app-shell > .sidebar:not(.sidebar-v2)):has(.au3 [data-au-pane]:not([hidden])) #helpBtn:is(:focus, [aria-expanded="true"]) { opacity: 1; pointer-events: auto; right: auto; left: calc(var(--rail-w) + var(--space-6)); }
  html[data-ds] body.sidebar-mini:has(> .app-shell > .sidebar:not(.sidebar-v2)):has(.au3 [data-au-pane]:not([hidden])) #helpBtn:is(:focus, [aria-expanded="true"]) { left: calc(60px + var(--space-6)); }
  html[data-ds] body.sidebar-collapsed:has(> .app-shell > .sidebar:not(.sidebar-v2)):has(.au3 [data-au-pane]:not([hidden])) #helpBtn:is(:focus, [aria-expanded="true"]),
  html[data-ds][data-nav="top"] body:has(> .app-shell > .sidebar:not(.sidebar-v2)):has(.au3 [data-au-pane]:not([hidden])) #helpBtn:is(:focus, [aria-expanded="true"]) { left: var(--space-6); }
  html[data-ds] body:has(> .app-shell > .sidebar:not(.sidebar-v2)):has(.au3 [data-au-pane]:not([hidden])) #toast-container { bottom: calc(var(--space-6) + 40px + var(--space-3)); }
  html[data-ds][data-nav="top"] body:has(> .app-shell > .sidebar:not(.sidebar-v2)):has(.au3 [data-au-pane]:not([hidden])) #toast-container { left: var(--space-6); right: auto; align-items: flex-start; }
}
@media screen and (max-width: 900px) {
  html[data-ds] body:has(> .app-shell > .sidebar:not(.sidebar-v2)):has(.lg-abar.is-on) #helpBtn { bottom: calc(var(--lg-abar-h) + var(--space-4)); }
  html[data-ds] body:has(> .app-shell > .sidebar:not(.sidebar-v2)):has(.lg-abar.is-on) #toast-container,
  html[data-ds] body:has(> .app-shell > .sidebar:not(.sidebar-v2)):has(.lg-abar.is-on) .help-panel { bottom: calc(var(--lg-abar-h) + var(--space-4) + 48px + var(--space-3)); }
  html[data-ds] body:has(> .app-shell > .sidebar:not(.sidebar-v2)):has([data-lg-abar]) .main { padding-bottom: calc(var(--lg-abar-h) + var(--space-4) + 48px + var(--space-3)) !important; }
  html[data-ds] body:has(> .app-shell > .sidebar:not(.sidebar-v2)) .div-switcher a,
  html[data-ds] body:has(> .app-shell > .sidebar:not(.sidebar-v2)) .sidebar-user-info { min-height: var(--hit); }
}

/* Profile's choice (profile.html, level 3 only). */
html[data-ds] .pf-classic { margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--rule); }
html[data-ds] .pf-classic-head { font: var(--t-label); font-weight: 600; color: var(--ink-2); }
html[data-ds] .pf-classic-note { margin: var(--space-1) 0 var(--space-2); font: var(--t-label); font-weight: 400; color: var(--ink-3); }
html[data-ds] .pf-classic-seg { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* The chosen one looks as the Sidebar and Top bar pills' (profile.html). */
html[data-ds] .pf-classic-seg .btn[aria-pressed="true"] { background: var(--emerald-glow2); color: var(--emerald); border-color: rgba(79,142,247,0.3); }
@media screen and (max-width: 900px) {
  html[data-ds] .pf-classic-seg .btn { min-height: var(--hit); }
}

/* ---------------------------------------------------------------------
   Step 4 full review
   The findings of map-step4 6, level 3 only (this sheet is level 3's).
   S1: a printed payoff quote carries no internal band. S2, S3: contrast of
   the No Bid button (dark) and Profile's chosen pills (light). P1: the
   forms the phone bars lead to take a finger (the file page, and the sale
   page, found by its bar). P2: Classic's drawer headings. D1: the "?"
   covers nothing Tab has just brought to the foot of the screen. D2: the
   chosen choice shows in forced colours. D5, D6: widths just past the
   phone.
   --------------------------------------------------------------------- */
@media print {
  html[data-ds="3"] .notices { display: none !important; }
}
html[data-ds="3"][data-theme="dark"] button.btn[name="decision"][value="No Bid"][style*="color:#fff"] { color: var(--on-accent) !important; }
html[data-ds="3"][data-theme="light"] :is(.density-pill, .nav-pill, .theme-pill).active { color: var(--ink-1) !important; font-weight: 600; }

@media (max-width: 900px) {
  html[data-ds] .fp3 :is(.btn, .form-control, .fp3-seg button, .fp3-tabs a, .fp3-link-btn, summary,
                          .lg-menu-panel a, .lg-menu-panel button) { min-height: var(--hit); }
  html[data-ds] .fp3 :is(.fp3-tabs a, summary) { display: flex; align-items: center; }
  html[data-ds] .fp3 .fp3-tabs a { display: inline-flex; }
  html[data-ds] .main:has(.detail-hero > [data-lg-actrow]) :is(.btn, button, select, summary, .detail-hero-crumb a,
      input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"])) { min-height: var(--hit); }
  html[data-ds] .main:has(.detail-hero > [data-lg-actrow]) .detail-hero-crumb a { display: inline-flex; align-items: center; }
  /* step-2's control height is on the input itself, at a weight these rules do not reach. */
  html[data-ds] .fp3 :is(input, select):not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="hidden"]),
  html[data-ds] .main:has(.detail-hero > [data-lg-actrow]) :is(input, select):not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="hidden"]) { height: var(--hit) !important; min-height: var(--hit) !important; }
}

@media screen and (max-width: 900px) {
  html[data-ds] body:has(> .app-shell > .sidebar:not(.sidebar-v2)) .nav-section-header a.nav-label {
    display: flex; align-items: center; min-height: var(--hit);
  }
  html[data-ds] body:has(> .app-shell > .sidebar:not(.sidebar-v2)) .nav-section-toggle { min-width: var(--hit); min-height: var(--hit); }
}

/* D1: with Classic navigation the "?" floats at the bottom right; what Tab
   brings to the foot of the screen lands above it (its 40px, its offset and
   a gap), and above the docked bar too on a phone. */
html[data-ds]:has(> body > .app-shell > .sidebar:not(.sidebar-v2)) { scroll-padding-bottom: 72px; }
@media screen and (max-width: 900px) {
  html[data-ds]:has(> body > .app-shell > .sidebar:not(.sidebar-v2)):has([data-lg-actrow]) { scroll-padding-bottom: calc(var(--lg-abar-h) + 72px); }
}

@media (forced-colors: active) {
  html[data-ds] .lg-seg > [aria-current="true"], html[data-ds] .lg-seg > [aria-pressed="true"],
  html[data-ds] .pf-classic-seg .btn[aria-pressed="true"],
  html[data-ds] .au3 .au3-wk-all[aria-current="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  html[data-ds] .au3 .au3-wday[aria-current="date"] { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* D5: left nav, 901 to 1100px: the file page's sticky bar keeps the name and
   gives up the figures first (they were squeezing it to nothing). */
@media (min-width: 901px) and (max-width: 1100px) {
  html[data-ds]:not([data-nav="top"]) .fp3-sticky-it:not(:last-of-type) { display: none; }
}

/* D6: left nav, 901 to about 935px: the list's columns (the file's 180px
   first) were 45px wider than the list and the last was cut with nowhere to
   scroll; the file column gives way so the flags stay whole. */
@container lgfiles (max-width: 660px) {
  html[data-ds] .lg-files-table .lg-c-file { min-width: 120px; }
}

/* The completeness critic. C3: the stacked list (760px and below) places
   every figure cell in one grid cell, so a chosen Price was drawn over the
   UPB; Price goes, as the other chosen columns do there, and the UPB says
   what it is (the head that named it is hidden). The stack's own query,
   so a printed list stacks the same way. */
@media (max-width: 760px) {
  html[data-ds] .lg-files-table td.lg-c-upb ~ td.lg-c-upb { display: none; }
  html[data-ds] .lg-files-table td.lg-c-upb:not(:has(.lg-grp-unit)) > .lg-fig::after { content: " UPB"; font: var(--t-label); font-weight: 400; color: var(--ink-3); }
  html[data-ds] .lg-files-table td.lg-c-upb:not(:has(.lg-grp-unit)),
  html[data-ds][data-density] .lg-files-table td.lg-c-upb:not(:has(.lg-grp-unit)) { width: auto; white-space: nowrap; }
}
/* C4: the links a phone taps (P1 measured buttons and fields): the file
   page's crumbs, Map, a person's phone and email, the look-up links and a
   grant's own page; the sale page's research links under the address and
   its comps' Browse all; a checklist item's words, now its box's label; and
   Classic's Help panel links. C5: the sale page's Run Calculator was cut at
   both ends beside the card's sentence; the card wraps instead. */
@media screen and (max-width: 900px) {
  html[data-ds] .fp3 :is(.fp3-crumbs a, .fp3-addr a, .fp3-person-line a, .fp3-lookup a, .fp3-grant-act, .fp3-grant-who a),
  html[data-ds] .main:has(.detail-hero > [data-lg-actrow]) :is(.detail-hero > div > a[target="_blank"], a[href^="/re/trustee-sales/results/comps"]) {
    display: inline-flex; align-items: center; min-height: var(--hit);
  }
  html[data-ds] .main:has(.detail-hero > [data-lg-actrow]) #checklist label[for^="ts-ck-"] { display: flex; align-items: center; min-height: var(--hit); cursor: pointer; }
  html[data-ds] .main:has(.detail-hero > [data-lg-actrow]) #checklist input[id^="ts-ck-"] { width: 20px !important; height: 20px !important; flex: none; }
  html[data-ds] body:has(> .app-shell > .sidebar:not(.sidebar-v2)) #helpPanel :is(.help-tip a, #openKbSheet) { display: inline-flex; align-items: center; min-height: var(--hit); }
  html[data-ds] .main:has(.detail-hero > [data-lg-actrow]) .card:has(> a.btn[href$="/calc"]) { flex-wrap: wrap; gap: var(--space-3); }
  html[data-ds] .main:has(.detail-hero > [data-lg-actrow]) .card > a.btn[href$="/calc"] { flex: none; }
  html[data-ds] .main:has(.detail-hero > [data-lg-actrow]) .card > div:has(> .section-title):has(a[href$="/calc"]) { flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
  html[data-ds] .main:has(.detail-hero > [data-lg-actrow]) .card > div:has(> .section-title) > div:has(> a[href$="/calc"]) { flex-wrap: wrap; row-gap: var(--space-1); }
}

/* ---------------------------------------------------------------------
   Wide screens and previews
   Step 4, slice 5 (Eddy, 10-26-2026). At 1600px of window and wider the
   four screens use the width: a list keeps its rows at their reading width
   (Files and Today 1240px, the board 1440px) and docks its preview in the
   room to their right, the page growing to hold both, up to the window;
   with no preview open that room shows one or two more columns from what
   each row already loads (Files' State and Servicer loan #, Today's stage
   or decision, the board's opening bid). The file page widens with its
   facts beside the main column. Below 1600px every screen keeps its
   layout; on a phone nothing changes (a tap opens the page, map 7.7).
   The preview is one pattern on every list (step-3.js, the same heading):
   Today's aside is Files' (lg-peek), a sale's sheet in it keeps the
   board's look (.au3). Then the sale page's flags, and D7: at 760px and
   below Files keeps a Sort menu, and on a laptop's fine pointer (200% zoom)
   a Select toggle and the stacked list with its pager and totals.
   --------------------------------------------------------------------- */
/* The columns a wide screen adds: drawn only at 1600px and wider, and
   only with no preview open (tr > keeps them out of a stacked row too). */
html[data-ds] .lg-page tr > .lg-c-wide { display: none; }
/* Hidden, they are not the row's last cell: the one before them keeps the
   last cell's padding, so Files' rows below 1600px are the size they were. */
html[data-ds] .lg-files-table tr > :not(.lg-c-wide):has(+ .lg-c-wide) { padding-right: 0; }
html[data-ds] .au3 .au3-sales tr > .au3-c-open { display: none; }
html[data-ds] .lg-ledger .lg-c-wide { width: 168px; }
html[data-ds] .au3 .au3-c-open { width: 112px; }
/* Open beside Close in each preview's head. */
html[data-ds] .lg-peek-acts, html[data-ds] .au3 .au3-sh-topacts { display: inline-flex; align-items: center; gap: var(--space-1); }
@media (max-width: 900px) {
  html[data-ds] .au3 .au3-sh-topacts .au3-sh-open { min-height: var(--hit); padding: 0 var(--space-3); }
}
/* Today: a row with a preview opens it on a click; the one shown is
   tinted; the keyboard's row (J, K) is outlined. */
@media (min-width: 901px) {
  html[data-ds] .lg-ledger tr.lg-row[data-peek] { cursor: pointer; }
}
html[data-ds] .lg-ledger tr.lg-row:focus { outline: none; }
html[data-ds] .lg-ledger tr.lg-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
html[data-ds] .lg-ledger tr.lg-row.is-peek td { background: var(--accent-tint); }
html[data-ds] .lg-today .lg-split.is-peek { margin-top: var(--space-5); }
html[data-ds] .lg-today .lg-split.is-peek .lg-ledger { margin-top: 0; }
/* The rows scroll inside their column rather than run under the aside
   where the window leaves them less than the table's width (F1). */
html[data-ds] .lg-today .lg-split.is-peek .lg-split-main { overflow-x: auto; }
/* The aside's foot clears the "?" and the toasts that float over the
   page's corner. */
html[data-ds] .lg-peek { padding-bottom: calc(var(--space-5) + 48px); }

@media screen and (min-width: 1600px) {
  /* Today's list only: the walk (D28) has no preview and keeps its width. */
  html[data-ds] .lg-page.lg-files, html[data-ds] .lg-page.lg-today:has([data-lg-tsplit]) { max-width: calc(1240px + var(--space-6) + 360px); }
  html[data-ds] .lg-files .lg-split:not(.is-peek) tr > .lg-c-wide,
  html[data-ds] .lg-today .lg-split:not(.is-peek) tr > .lg-c-wide { display: table-cell; }
  html[data-ds] .lg-files .lg-split:not(.is-peek) .lg-files-table tr > :not(.lg-c-wide):has(+ .lg-c-wide) { padding-right: var(--space-3); }
  /* The page holds the rows and the aside at its own width (D33's 300 to
     360px, the sheet's 300 to 340px), so the rows take what is left. */
  html[data-ds] .lg-page.au3 { max-width: calc(1440px + var(--space-6) + 340px); }
  html[data-ds] .au3 .au3-split:not(.is-sheet) .au3-sales tr > .au3-c-open { display: table-cell; }
  html[data-ds] .au3 .au3-split:not(.is-sheet) .au3-open-sub { display: none; }
  html[data-ds] .lg-page.fp3 { max-width: 1560px; }
  html[data-ds] .fp3-body { grid-template-columns: minmax(0, 1fr) 380px; }
}

/* The sale page's flags under its address: the board's words, tones and
   titles (auctions_page.page_flags). */
html[data-ds] .ts3-flags { margin: var(--space-1) 0 var(--space-2); font: var(--t-label); font-weight: 400; color: var(--ink-2); }
html[data-ds] .ts3-flag.is-neg { color: var(--neg); font-weight: 500; }
html[data-ds] .ts3-flag.is-warn { color: var(--warn); font-weight: 500; }

/* D7: Files' Sort menu and Select toggle, at 760px and below only. */
html[data-ds] .lg-files .lg-sortmenu { display: none; }
html[data-ds] .lg-files .lg-pick-btn { display: none; }
html[data-ds] .lg-files .lg-pick-page { display: none; }
@media screen and (max-width: 760px) {
  html[data-ds] .lg-files .lg-sortmenu { display: inline-block; }
  html[data-ds] .lg-files .lg-sortmenu > summary, html[data-ds] .lg-files .lg-pick-btn, html[data-ds] .lg-files .lg-pick-page { min-height: var(--hit); align-items: center; }
  html[data-ds] .lg-files .lg-pick-btn[aria-pressed="true"] { background: var(--fill-2); color: var(--ink-1); box-shadow: inset 0 0 0 1px var(--line-ui); }
  /* Picking: each stacked row gains its box in a column of its own. */
  html[data-ds] .lg-files.is-picking .lg-files-table tr.lg-frow { grid-template-columns: var(--hit) minmax(0, 1fr) auto; }
  html[data-ds] .lg-files.is-picking .lg-files-table .lg-c-sel {
    display: flex; align-items: flex-start; justify-content: center; grid-column: 1; grid-row: 1 / span 2;
    position: static; min-height: var(--hit); padding-top: 2px;
    width: auto; min-width: 0;
  }
  /* The app's reset holds a box at its own size (width: auto !important), so
     it is drawn larger by scale; the cell around it is the 44px target. */
  html[data-ds] .lg-files.is-picking .lg-files-table .lg-c-sel .lg-check { height: auto; margin-top: 6px; transform: scale(1.4); }
  html[data-ds] .lg-files.is-picking .lg-files-table tr.lg-frow .lg-c-file { grid-column: 2; }
  html[data-ds] .lg-files.is-picking .lg-files-table tr.lg-frow .lg-c-next { grid-column: 3; }
  html[data-ds] .lg-files.is-picking .lg-files-table tr.lg-frow .lg-c-stage { grid-column: 2; }
  html[data-ds] .lg-files.is-picking .lg-files-table tr.lg-frow td.lg-c-upb { grid-column: 3; }
  html[data-ds] .lg-files.is-picking .lg-files-table tr.lg-frow td.lg-c-flags { grid-column: 2 / -1; }
  /* A ticked stacked row is tinted as one, not cell by cell. */
  html[data-ds] .lg-files.is-picking .lg-files-table tbody tr.lg-frow.is-sel { background: var(--fill-1); }
  html[data-ds] .lg-files.is-picking .lg-files-table tbody tr.lg-frow.is-sel td { background: transparent; }
}
/* A laptop zoomed to 200% (a fine pointer, 760px and below) keeps the
   stacked list with its pager and totals, and its Select; the phone's
   groups (D44) give the pager and totals up on purpose, and a phone has no
   selection (map-step4.md 1.5), so a touch screen keeps the groups and
   draws no Select. */
@media screen and (max-width: 760px) and (pointer: fine) {
  html[data-ds] .lg-groups { display: none; }
  html[data-ds] .lg-files:has(> .lg-groups) > .lg-split { display: block; }
  html[data-ds] .lg-files .lg-pick-btn { display: inline-flex; }
  html[data-ds] .lg-files.is-picking .lg-pick-page { display: inline-flex; }
}

/* ---------------------------------------------------------------------
   The switch and the notice
   Step 4's finish, Part A (map-step4 5.2; Eddy, 10-26 and 10-27-2026).
   The new look's notice (ds3/_new_look_notice.html): one line in the
   notices band while Classic navigation is offered with a last day, with
   Open Profile and Hide (step-3.js posts it in place, the same heading);
   Profile's setting, where the link lands, clears the phone bar. Classic's
   drawer: on a phone the division switch leaves Classic's top bar for the
   head of its drawer (step-3.js moves it there and back with the width;
   the bar never draws it on a phone), so the bar is as tall as the eight
   areas' (81px, not 121px). On a laptop Classic is unchanged. Admin >
   Settings' switch is drawn at every level, in app.css's look.
   --------------------------------------------------------------------- */
html[data-ds] .lg-newlook > .icon { color: var(--accent); }
/* On a narrow phone the line keeps its width, and Open Profile and Hide
   take the next line under it. */
@media screen and (max-width: 480px) {
  html[data-ds] .lg-newlook .notice-text { flex-basis: calc(100% - 16px - var(--space-3)); }
  html[data-ds] .lg-newlook .notice-acts { margin-inline-start: calc(16px + var(--space-3)); }
}
html[data-ds] #pfClassic { scroll-margin-top: calc(var(--mobile-bar-h, 0px) + var(--space-4)); }
@media screen and (max-width: 900px) {
  html[data-ds] body:has(> .app-shell > .sidebar:not(.sidebar-v2)) .sidebar > .div-switcher { display: none !important; }
  /* order: app.css gives the bar's switch its own line (order 2), which in
     the drawer would put it after every link. */
  html[data-ds] body:has(> .app-shell > .sidebar:not(.sidebar-v2)) .sidebar-nav > .div-switcher {
    order: -1; flex: 0 0 auto; padding: 0 0 var(--space-2) !important; margin: 0 0 var(--space-1);
    border-bottom: 1px solid var(--rule) !important;
  }
  /* Admin > Settings' switch at level 3: a finger's 44px. */
  html[data-ds] #lookSwitch .btn { min-height: var(--hit); }
}
@media print {
  html[data-ds] .lg-newlook { display: none !important; }
}

/* ── Watchlists (Step 4 slice 7) ──────────────────────────────────────────
   The star and the menu beside it (templates/ds3/_watch.html, step-3.js
   "Watchlists"): a filled star is a sale on one of the person's lists. On
   the board the pair takes the star's place (au3-star keeps its look), on
   a phone at the end of the address line; elsewhere (the sale page, the
   batch grid, the pre-foreclosure board, the Watchlist page) wl-star and
   wl-more. On a touch screen each is a finger's 44px. The menu floats
   (wl-pop) under its button or above it, inside the window, below the
   toasts. The Watchlist page's picker, who is on the list and its controls
   (ds3/_watchlists.html); the profile's reminders (ds3/_watch_profile.html). */
html[data-ds] .wl-pair { display: inline-flex; flex: none; align-items: center; gap: 0; vertical-align: middle; }
html[data-ds] .wl-star, html[data-ds] .wl-more {
  display: inline-grid; place-items: center; width: var(--ctl-h-sm); height: var(--ctl-h-sm); padding: 0;
  border: 0; border-radius: var(--r-1); background: none; color: var(--ink-3); cursor: pointer;
}
html[data-ds] .wl-more { width: 20px; }
html[data-ds] button.wl-star:hover, html[data-ds] .wl-more:hover { background: var(--fill-2); color: var(--ink-1); }
html[data-ds] .wl-star.is-on { color: var(--ink-1); }
html[data-ds] .wl-star.is-on .icon, html[data-ds] .wl-star[aria-pressed="true"] .icon { fill: currentColor; }
html[data-ds] .wl-star.is-busy, html[data-ds] .au3 .au3-star.is-busy { opacity: .5; }
html[data-ds] .wl-more[aria-expanded="true"] { background: var(--fill-2); color: var(--ink-1); }
html[data-ds] span.wl-star { cursor: default; }
html[data-ds] .au3 .au3-wl-more {
  display: inline-grid; flex: none; place-items: center; width: 16px; height: 24px; margin-right: 2px; padding: 0;
  border: 0; border-radius: var(--r-1); background: none; color: var(--ink-3); cursor: pointer;
}
html[data-ds] .au3 .au3-wl-more:hover, html[data-ds] .au3 .au3-wl-more[aria-expanded="true"] { background: var(--fill-2); color: var(--ink-1); }
html[data-ds] .lg-acts .wl-pair { margin-left: var(--space-1); }
html[data-ds] .lg-acts .wl-more { width: 20px; }
/* The board stacks its rows by the board's own width (au3board, up to 959px),
   which is wider than the screen where the sidebar is open: the pair follows
   that, star first, the same 44px as the stacked star. */
@container au3board (max-width: 959px) {
  html[data-ds] .au3 .au3-addr > .wl-pair { order: 3; margin: -10px -12px -10px auto; }
  html[data-ds] .au3 .au3-addr > .wl-pair > .au3-star { order: 0; margin: 0; }
  html[data-ds] .au3 .au3-wl-more { width: var(--hit); height: var(--hit); margin: 0; }
}
@media (pointer: coarse) {
  html[data-ds] .wl-star, html[data-ds] .wl-more, html[data-ds] .lg-acts .wl-more { width: var(--hit); height: var(--hit); }
  html[data-ds] .au3 .au3-wl-more, html[data-ds] .au3 .wl-pair > .au3-star { width: var(--hit); height: var(--hit); }
}
html[data-ds] .wl-pop {
  position: fixed; z-index: 1000; width: max-content; min-width: 220px; max-width: min(320px, calc(100vw - 32px));
  display: grid; gap: 2px; padding: var(--space-3); overflow-y: auto; overscroll-behavior: contain;
  background: var(--float); border: 1px solid var(--rule-strong); border-radius: var(--r-2);
  box-shadow: var(--shadow-float); font: var(--t-table); color: var(--ink-2);
}
html[data-ds] .wl-pop-h { margin: 0 0 var(--space-1); font: var(--t-label); color: var(--ink-3); }
html[data-ds] .wl-opt { display: flex; align-items: center; gap: var(--space-2); min-height: 32px; padding: 0 var(--space-1); border-radius: var(--r-1); color: var(--ink-1); cursor: pointer; }
html[data-ds] .wl-opt:hover { background: var(--fill-1); }
html[data-ds] .wl-opt input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
html[data-ds] .wl-opt-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
html[data-ds] .wl-tag { flex: none; margin-left: var(--space-2); padding: 0 6px; border: 1px solid var(--rule-strong); border-radius: 999px; font: var(--t-label); color: var(--ink-3); }
html[data-ds] .wl-pop-manage { display: flex; align-items: center; min-height: 32px; margin-top: var(--space-1); padding: 0 var(--space-1); border-top: 1px solid var(--rule); color: var(--accent); text-decoration: none; }
html[data-ds] .wl-pop-manage:hover { text-decoration: underline; }
@media (pointer: coarse) {
  html[data-ds] .wl-opt, html[data-ds] .wl-pop-manage { min-height: var(--hit); }
}

html[data-ds] .wl-page { display: grid; gap: var(--space-3); margin: 0 0 var(--space-5); }
html[data-ds] .wl-picker { display: flex; flex-wrap: wrap; gap: var(--space-2); }
html[data-ds] .wl-tab {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; max-width: 100%; padding: 0 var(--space-3);
  border: 1px solid var(--rule-strong); border-radius: 999px; color: var(--ink-2); text-decoration: none; overflow-wrap: anywhere;
}
html[data-ds] .wl-tab:hover { background: var(--fill-1); color: var(--ink-1); }
html[data-ds] .wl-tab.is-on { border-color: var(--ink-1); background: var(--fill-2); color: var(--ink-1); font-weight: 600; }
html[data-ds] .wl-n { font: var(--t-label); font-variant-numeric: tabular-nums; color: var(--ink-3); }
html[data-ds] .wl-tab .wl-tag { margin-left: 0; }
html[data-ds] .wl-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
html[data-ds] .wl-who { display: flex; align-items: flex-start; gap: var(--space-2); flex: 1 1 18em; min-width: 0; margin: 0; color: var(--ink-2); }
html[data-ds] .wl-who .icon { flex: none; margin-top: 3px; color: var(--ink-3); }
html[data-ds] .wl-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
html[data-ds] .wl-acts .btn .icon { margin-right: var(--space-1); }
html[data-ds] .wl-inline { display: inline; margin: 0; }
html[data-ds] .wl-neg, html[data-ds] .wl-neg .icon { color: var(--neg); }
html[data-ds] .wl-menu > summary { list-style: none; }
html[data-ds] .wl-panel { min-width: 260px; }
html[data-ds] .wl-panel form { display: grid; gap: var(--space-2); }
html[data-ds] .wl-people { display: grid; gap: 2px; max-height: 50vh; overflow-y: auto; margin: 0; padding: 0; border: 0; }
html[data-ds] .wl-person { display: flex; align-items: center; gap: var(--space-2); min-height: 32px; }
html[data-ds] .wl-none { margin: 0; color: var(--ink-3); }
html[data-ds] .wl-profile-lede { margin: 0 0 var(--space-3); color: var(--ink-2); }
html[data-ds] .wl-profile-lists { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
html[data-ds] .wl-profile-lists li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
html[data-ds] .wl-profile-lists form { margin: 0 0 0 auto; }
html[data-ds] .wl-profile-state { font: var(--t-label); color: var(--ink-3); }
html[data-ds] .wl-profile-lists a { color: var(--ink-1); font-weight: 600; text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
html[data-ds] .wl-profile-lists a:hover { color: var(--accent); text-decoration-color: var(--accent); }
/* The Watchlist page's phone cards (app.css .is-cards, 700px and below): the
   star cell is a strip down the card's left edge. The pair is two 44px buttons,
   so the strip and the card's left padding are two of them wide, and the
   address starts clear of both. */
@media (max-width: 700px) {
  html[data-ds] .data-table.is-cards tbody tr:has(> td.mc-sel .wl-pair) { padding-left: calc(var(--hit) * 2); }
  html[data-ds] .data-table.is-cards td.mc-sel:has(.wl-pair) { width: calc(var(--hit) * 2); justify-content: flex-start; }
  html[data-ds] .data-table.is-cards .wl-star, html[data-ds] .data-table.is-cards .wl-more { width: var(--hit); height: var(--hit); }
  /* The county and batch words wrap inside the card (the page's own rule keeps
     them on one line, which ran them past the card's edge): the Watchlist
     page's and the pre-foreclosure board's, whose cards hold the same strip. */
  html[data-ds] .data-table.is-cards .wl-batch { white-space: normal; }
  html[data-ds] .data-table.is-cards .pf-batch { white-space: normal; }
}
@media (max-width: 900px) {
  html[data-ds] .wl-menu { position: static; }
  html[data-ds] .wl-bar { position: relative; }
  html[data-ds] .wl-acts .lg-menu-panel.wl-panel { left: 0; right: 0; width: auto; min-width: 0; max-width: none; }
  html[data-ds] .wl-tab, html[data-ds] .wl-acts .btn, html[data-ds] .wl-person,
  html[data-ds] .wl-profile-lists .btn { min-height: var(--hit); }
}
/* Calculator: the four headline figures (re_ts_calc.html's .hero-stats sets
   four across at every width, which cut "$1,340,201" to "$1,34" on a phone):
   two to a row below 1100px, and on a phone a tighter card with the figure
   sized to it. */
@media (max-width: 1100px) {
  html[data-ds] .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  html[data-ds] .hero-stats { gap: var(--space-2); }
  html[data-ds] .hero-stat { padding: var(--space-3); }
  html[data-ds] .hero-stat-value { font-size: clamp(16px, 5vw, var(--kpi-size-lead)); overflow-wrap: anywhere; }
}

/* ── Zillow links (Eddy, 10-28-2026) ─────────────────────────────────────── */
html[data-ds] .au3 .au3-sh-topacts .au3-sh-zillow { min-width: var(--hit); }

/* ---------------------------------------------------------------------
   Phases 2 to 5, slice P1: Today and its email
   Q-10: Move on a Today row (its picks are the selection's menu's buttons,
   .lg-sel-opts) and the picks beside the file page's date field. Q-08:
   lgConfirm's card. P2-07: the Today star on the Tasks board's cards and
   list. P2-04: the profile's Today email switch.
   --------------------------------------------------------------------- */
html[data-ds] .lg-move > summary { cursor: pointer; }
html[data-ds] .lg-move > summary[aria-busy="true"] { opacity: .6; cursor: progress; }
html[data-ds] .lg-menu-panel.lg-move-panel { min-width: 248px; z-index: 31; }
html[data-ds] .lg-move-panel .lg-menu-title { padding: 0 var(--space-2) var(--space-1); }
html[data-ds] .lg-menu-panel .lg-move-pick label { display: grid; flex: 1 1 140px; gap: 2px; min-height: 0; font: var(--t-label); color: var(--ink-3); cursor: default; }
html[data-ds] .lg-move-pick .form-control { width: 100%; }
html[data-ds] .lg-move-pick { align-items: flex-end; }
html[data-ds] .lg-picks { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1); }
html[data-ds] .lg-picks .lg-pick {
  display: inline-flex; align-items: baseline; gap: var(--space-1); min-height: 28px; padding: 3px var(--space-3);
  border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--paper); color: var(--ink-2);
  font: var(--t-table); white-space: nowrap; cursor: pointer;
}
html[data-ds] .lg-picks .lg-pick:hover { color: var(--ink-1); border-color: var(--line-ui); }
html[data-ds] .lg-picks .lg-pick[aria-pressed="true"] { border-color: var(--accent-fill); background: var(--accent-fill); color: var(--on-accent-fill); }
html[data-ds] .lg-picks .lg-pick[aria-pressed="true"] .lg-opt-fig { color: inherit; }
html[data-ds] .tb-meta .lg-star { width: 24px; height: 24px; margin-left: auto; }
html[data-ds] .modal-overlay.lg-confirm { z-index: 10400; }
html[data-ds] .modal-card.lg-confirm-card {
  width: min(440px, calc(100vw - 32px)); max-width: none; padding: var(--space-5);
  background: var(--float); border: 1px solid var(--rule-strong); border-radius: var(--r-3, 12px); color: var(--ink-1);
}
html[data-ds] .lg-confirm-title { margin: 0 0 var(--space-2); font: 600 17px/24px var(--font-sans); color: var(--ink-1); }
html[data-ds] .lg-confirm-msg { margin: 0; font: var(--t-body, 400 14px/22px var(--font-sans)); color: var(--ink-2); }
html[data-ds] .lg-confirm-acts { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
html[data-ds] .td-profile-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
html[data-ds] .td-profile-row form { margin: 0 0 0 auto; }
@media (max-width: 900px), (pointer: coarse) {
  html[data-ds] .lg-move > summary, html[data-ds] .lg-move-panel > button, html[data-ds] .lg-move-pick .btn,
  html[data-ds] .lg-move-pick .form-control, html[data-ds] .lg-picks .lg-pick,
  html[data-ds] .lg-confirm-acts .btn, html[data-ds] .td-profile-row .btn { min-height: var(--hit); }
  html[data-ds] .lg-move > summary { display: inline-flex; align-items: center; }
  /* The base rule for inputs reads height from --ctl-h at a specificity no
     rule here beats, so the variable is what changes. */
  html[data-ds] .lg-move-pick { --ctl-h: var(--hit); }
  html[data-ds] .toast-undo { display: inline-flex; align-items: center; min-height: var(--hit); padding: 0 var(--space-3); }
  html[data-ds] .lg-picks .lg-pick { align-items: center; }
  html[data-ds] .tb-meta .lg-star, html[data-ds] .mc-act .lg-star { width: var(--hit); height: var(--hit); }
}

/* ---------------------------------------------------------------------
   Phases 2 to 5, slice P2: dates, HECM pool edit and the front pages
   P2-08: the workstream form's default date, the NPL transfer's new
   files, the undated workstreams' review. P2-09: the pool edit page.
   P2-03: the Real Estate front page's auction morning, the HECM pools'
   days left, Rent due's lead. P5-02: the HECM analyzer's sort heads.
   --------------------------------------------------------------------- */
html[data-ds] .ws3-due-hint { margin: 0 0 var(--space-2); }
html[data-ds] .npl3-new { margin: var(--space-3) 0; }
html[data-ds] .npl3-new-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
html[data-ds] .npl3-new-words { margin: 0; flex: 1 1 260px; color: var(--ink-2); }
html[data-ds] .ws3-review { margin-bottom: var(--space-4); }
html[data-ds] .ws3-sub { display: block; font: var(--t-label); font-weight: 400; color: var(--ink-3); }
html[data-ds] td .ws3-sub { margin-top: 2px; }
html[data-ds] .ws3-apply { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); }
html[data-ds] .ws3-readonly { margin: 0 0 var(--space-4); }
html[data-ds] .hp3-ref { margin-left: var(--space-2); font: var(--t-label); color: var(--ink-3); font-variant-numeric: tabular-nums; }
html[data-ds] .hp3-left { display: block; margin-top: 2px; font: var(--t-label); font-weight: 500; color: var(--ink-2); white-space: nowrap; }
html[data-ds] .hp3-left.is-today { color: var(--warn); }
html[data-ds] .hp3-left.is-late { color: var(--neg); }
html[data-ds] a.hp3-sort { display: inline-flex; align-items: center; gap: 2px; color: inherit; text-decoration: none; }
html[data-ds] a.hp3-sort:hover, html[data-ds] a.hp3-sort.is-on { color: var(--ink-1); }
html[data-ds] .hp3-sort .icon { color: var(--ink-1); }
html[data-ds] .re3-morning { margin-bottom: var(--space-5); }
html[data-ds] .re3-morning-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); margin-bottom: var(--space-3); }
html[data-ds] .re3-morning-h { margin: 0; font: var(--t-head); color: var(--ink-1); }
html[data-ds] .re3-morning-meta, html[data-ds] .re3-morning-when, html[data-ds] .re3-morning-note { font: var(--t-label); font-weight: 400; color: var(--ink-3); }
html[data-ds] .re3-morning-list { margin: 0; display: grid; gap: var(--space-2); }
html[data-ds] .re3-morning-row { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--space-1) var(--space-4); align-items: baseline; padding-top: var(--space-2); border-top: 1px solid var(--rule); }
html[data-ds] .re3-morning-row:first-child { padding-top: 0; border-top: 0; }
html[data-ds] .re3-morning-row dt { margin: 0; font-weight: 600; color: var(--ink-1); }
html[data-ds] .re3-morning-row dd { margin: 0; color: var(--ink-2); font-variant-numeric: tabular-nums; }
html[data-ds] .re3-ph { white-space: nowrap; }
html[data-ds] .re3-mc { color: var(--accent); font-weight: 500; text-decoration: none; }
html[data-ds] .re3-mc:hover { text-decoration: underline; }
html[data-ds] .rn3-lead { margin-bottom: var(--space-5); }
html[data-ds] .rn3-lead-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); margin-bottom: var(--space-3); }
html[data-ds] .rn3-lead-h { margin: 0; font: var(--t-head); color: var(--ink-1); }
html[data-ds] .rn3-lead-sum { font: var(--t-label); color: var(--ink-3); font-variant-numeric: tabular-nums; }
html[data-ds] .rn3-lead-list { margin: 0; padding: 0; list-style: none; }
html[data-ds] .rn3-lead-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1.4fr) auto; gap: var(--space-1) var(--space-4); align-items: baseline; padding: var(--space-2) 0; border-top: 1px solid var(--rule); }
html[data-ds] .rn3-lead-row:first-child { border-top: 0; }
html[data-ds] .rn3-lead-place { color: var(--ink-1); font-weight: 500; overflow-wrap: anywhere; }
html[data-ds] .rn3-lead-what { color: var(--ink-2); overflow-wrap: anywhere; }
html[data-ds] .rn3-lead-when { color: var(--ink-2); font-variant-numeric: tabular-nums; }
html[data-ds] .rn3-lead-row.is-late .rn3-lead-when { color: var(--neg); font-weight: 500; }
html[data-ds] .rn3-lead-amt { justify-self: end; color: var(--ink-1); font-weight: 500; font-variant-numeric: tabular-nums; }
html[data-ds] .rn3-lead-none { margin: 0; color: var(--ink-3); }
@media (max-width: 640px) {
  html[data-ds] .re3-morning-row { grid-template-columns: minmax(0, 1fr); }
  html[data-ds] .rn3-lead-row { grid-template-columns: minmax(0, 1fr) auto; }
  html[data-ds] .rn3-lead-what, html[data-ds] .rn3-lead-when { grid-column: 1; }
  html[data-ds] .rn3-lead-amt { grid-column: 2; grid-row: 1; }
}
@media (max-width: 900px), (pointer: coarse) {
  html[data-ds] .re3-mc, html[data-ds] .rn3-lead-place, html[data-ds] a.hp3-sort, html[data-ds] a.hp3-edit {
    display: inline-flex; align-items: center; min-height: var(--hit);
  }
  html[data-ds] .npl3-new-form .btn, html[data-ds] .ws3-apply .btn, html[data-ds] .ws3-review .inline-form .btn,
  html[data-ds] .ws3-card .btn, html[data-ds] .hp3-form .btn, html[data-ds] .hp3-cancel {
    display: inline-flex; align-items: center; min-height: var(--hit);
  }
  html[data-ds] a.hp3-sort { min-width: var(--hit); }
  /* The base rule for inputs reads height from --ctl-h (as .lg-move-pick). */
  html[data-ds] .hp3-form { --ctl-h: var(--hit); }
}

/* ---------------------------------------------------------------------
   Phases 2 to 5, slice P3: the file connects
   P4-02: the file's Open tasks and + Task, a task's file chip, the task
   forms' file picker. P4-03: a contact's calls on their files. P4-04: the
   Came from line, the wizard's and the calculator's file line. P4-07: the
   Edit page's exit strategy line, the review list. Q-21: the documents'
   drop zone and each file's result. Q-07: the amounts' copy buttons.
   --------------------------------------------------------------------- */
html[data-ds] .fp3-tasks .fp3-sec-h .lg-k { margin-left: var(--space-1); }
html[data-ds] .fp3-task-list { margin: 0; padding: 0; list-style: none; }
html[data-ds] .fp3-task { display: grid; gap: 2px; padding: var(--space-2) 0; border-top: 1px solid var(--rule); }
html[data-ds] .fp3-task:first-child { border-top: 0; padding-top: 0; }
html[data-ds] .fp3-task-title { color: var(--ink-1); font: var(--t-table); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
html[data-ds] .fp3-task-title:hover { color: var(--accent); text-decoration: underline; }
html[data-ds] .fp3-task-meta { font: var(--t-label); color: var(--ink-3); font-variant-numeric: tabular-nums; }
html[data-ds] .fp3-task-meta .lg-late { color: var(--neg); font-weight: 500; }
html[data-ds] .tk3-file {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 1px var(--space-2);
  border: 1px solid var(--line-ui); border-radius: 999px; font: var(--t-label); font-weight: 500;
  color: var(--ink-2); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-ds] .tk3-file:hover { color: var(--ink-1); border-color: var(--rule-strong); background: var(--fill-1); }
html[data-ds] .tk3-file .icon { flex: none; color: var(--ink-3); }
html[data-ds] .tk-add-pick.tk3-pick { flex: 0 1 190px; }
html[data-ds] .fp3-came { display: flex; align-items: baseline; gap: var(--space-1); margin: var(--space-1) 0 0; font: var(--t-label); color: var(--ink-3); overflow-wrap: anywhere; }
html[data-ds] .fp3-came .icon { flex: none; align-self: center; }
html[data-ds] .fp3-came a { color: var(--accent); }
html[data-ds] .fp3-fig-label .lg-copy { width: 20px; height: 20px; margin: -2px 0 -2px 2px; vertical-align: middle; }
html[data-ds] .lg-copy-amt { width: 22px; height: 22px; margin-left: 2px; vertical-align: -5px; }
html[data-ds] .ct3-calls { margin-bottom: var(--space-4); }
html[data-ds] .ct3-calls-h { display: flex; align-items: baseline; margin: 0 0 var(--space-3); }
html[data-ds] .ct3-call-list { margin: 0; padding: 0; list-style: none; }
html[data-ds] .ct3-call { display: grid; gap: 2px; padding: var(--space-2) 0; border-top: 1px solid var(--rule); }
html[data-ds] .ct3-call:first-child { border-top: 0; padding-top: 0; }
html[data-ds] .ct3-call-head { font: var(--t-table); color: var(--ink-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
html[data-ds] .ct3-call-day { color: var(--ink-1); font-weight: 500; }
html[data-ds] .ct3-call-file { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); text-decoration: none; }
html[data-ds] .ct3-call-file:hover { text-decoration: underline; }
html[data-ds] .ct3-call-on { font: var(--t-table); overflow-wrap: anywhere; }
html[data-ds] .ct3-call-who { color: var(--ink-2); }
html[data-ds] .ct3-call-note { font: var(--t-label); font-weight: 400; color: var(--ink-3); overflow-wrap: anywhere; }
html[data-ds] .ct3-calls-none, html[data-ds] .ct3-calls-more { margin: var(--space-2) 0 0; }
html[data-ds] .wz3-file, html[data-ds] .lm3-file { margin: var(--space-2) 0 var(--space-3); font: var(--t-table); color: var(--ink-2); overflow-wrap: anywhere; }
html[data-ds] .wz3-file a, html[data-ds] .lm3-file a { color: var(--accent); font-weight: 500; }
html[data-ds] .ae3-exit { margin: 0; font: var(--t-label); font-weight: 400; color: var(--ink-2); overflow-wrap: anywhere; }
html[data-ds] .ae3-exit a { color: var(--accent); }
html[data-ds] .ex3-table td { overflow-wrap: anywhere; }
html[data-ds] .fp3-drop {
  position: relative; display: grid; gap: var(--space-1); padding: var(--space-2);
  border: 1px dashed var(--line-ui); border-radius: var(--r-2); background: transparent;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
html[data-ds] .fp3-drop.is-over { border-color: var(--accent); background: var(--accent-tint); }
html[data-ds] .fp3-drop input[type="file"] { width: 100%; min-width: 0; }
html[data-ds] .fp3-drop-words { display: inline-flex; align-items: center; gap: 4px; font: var(--t-label); color: var(--ink-3); }
html[data-ds] .fp3-up-list { display: grid; gap: var(--space-1); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
html[data-ds] .fp3-up-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-2); font: var(--t-table); color: var(--ink-2); }
html[data-ds] .fp3-up-name { color: var(--ink-1); font-weight: 500; overflow-wrap: anywhere; }
html[data-ds] .fp3-up-size { color: var(--ink-3); font-variant-numeric: tabular-nums; }
html[data-ds] .fp3-up-res { display: inline-flex; align-items: baseline; gap: 4px; }
html[data-ds] .fp3-up-row.is-ok .fp3-up-res { color: var(--ink-1); }
html[data-ds] .fp3-up-row.is-no .fp3-up-res { color: var(--neg); }
html[data-ds] .fp3-up-row .icon { align-self: center; }
@media (max-width: 900px), (pointer: coarse) {
  html[data-ds] .tk3-file, html[data-ds] .fp3-task-title, html[data-ds] .ct3-call-file,
  html[data-ds] .fp3-came a, html[data-ds] .wz3-file a, html[data-ds] .lm3-file a, html[data-ds] .ae3-exit a {
    display: inline-flex; align-items: center; min-height: var(--hit);
  }
  /* On a touch screen the chip is a plain link line, 44px tall: a pill
     that tall would crowd the task's title above it. */
  html[data-ds] .tk3-file { padding: 0; border: 0; border-radius: 0; background: none; color: var(--accent); }
  html[data-ds] .tk3-file .icon { color: currentColor; }
  html[data-ds] .fp3-task-add { min-height: var(--hit); min-width: var(--hit); justify-content: center; }
  html[data-ds] .fp3-fig-label .lg-copy, html[data-ds] .lg-copy-amt {
    width: var(--hit); height: var(--hit); margin: 0; vertical-align: middle;
  }
  html[data-ds] .tk3-pick { --ctl-h: var(--hit); }
  html[data-ds] .tk3-pick .form-control { min-height: var(--hit); }
  html[data-ds] .fp3-drop input[type="file"] { min-height: var(--hit); }
  html[data-ds] .fp3-task-more > summary, html[data-ds] .ct3-calls-rest > summary {
    display: flex; align-items: center; min-height: var(--hit);
  }
}
/* The review's fixes. Show more on the Open tasks card and the contact's
   calls: the rest of the list, one click away. */
html[data-ds] .fp3-task-more, html[data-ds] .ct3-calls-rest { margin-top: var(--space-2); }
html[data-ds] .fp3-task-more[open] > .fp3-task-list, html[data-ds] .ct3-calls-rest[open] > .ct3-call-list {
  border-top: 1px solid var(--rule);
}
/* + Task opens the form at #new-task: the anchor jump clears the phone bar
   (or the top bar), so the heading and the title are not left under it. */
html[data-ds] #new-task { scroll-margin-top: var(--space-3); }
html[data-ds][data-nav="top"] #new-task { scroll-margin-top: calc(var(--topbar-h, 52px) + var(--space-3)); }
@media (max-width: 900px) {
  html[data-ds] #new-task, html[data-ds][data-nav="top"] #new-task {
    scroll-margin-top: calc(var(--mobile-bar-h, 0px) + var(--space-3));
  }
}
/* Files' phone cards: the UPB and its copy button share one line; the 44px
   hit area grows past the text line, not the card. */
@media (max-width: 760px) {
  html[data-ds] .lg-files-table td.lg-c-upb:has(.lg-copy-amt) {
    display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap;
  }
  html[data-ds] .lg-files-table td.lg-c-upb .lg-copy-amt { flex: none; margin-block: -12px; }
}

/* The Claude payment summary at level 3 (the Payments card on the Money tab:
   templates/ams/_tools/payments.html and static/payment-summary.js, for a site
   admin once Claude is set up). The button sits in the card's title row, at
   the right, and wraps under the title on a phone; the status line, a failure
   and the draft come above the table. A running button is aria-disabled, not
   disabled (it keeps the focus) and the draft already on screen is dimmed,
   not removed. Every target is 44px on a phone or a touch screen. */
html[data-ds] #payments > .card-title { flex-wrap: wrap; }
html[data-ds] .pay-summary-run { margin-left: auto; }
html[data-ds] .pay-summary-run .icon { flex: none; }
html[data-ds] .pay-summary-run[aria-disabled="true"] { opacity: .6; cursor: progress; }
html[data-ds] .pay-summary { margin: 0 0 var(--space-4); }
html[data-ds] .pay-summary [hidden] { display: none !important; }
html[data-ds] .pay-summary-status { font: var(--t-label); color: var(--ink-3); }
html[data-ds] .pay-summary-status:not(:empty) { margin-bottom: var(--space-2); }
html[data-ds] .pay-summary [data-summary-error] .alert { margin: 0 0 var(--space-3); }
html[data-ds] .pay-summary-kept { margin-top: var(--space-1); }
html[data-ds] .pay-summary-out {
  padding: var(--space-4); border: 1px solid var(--rule); border-radius: var(--r-2);
  background: var(--fill-1);
}
html[data-ds] .pay-summary-out.is-working { opacity: .55; }
html[data-ds] .pay-summary-label { margin: 0; font: var(--t-label); font-weight: 600; color: var(--warn); }
html[data-ds] .pay-summary-h {
  margin: var(--space-3) 0 var(--space-1); font: var(--t-label); color: var(--ink-3);
  text-transform: none; letter-spacing: 0;
}
html[data-ds] .pay-summary-out p, html[data-ds] .pay-summary-out ul {
  margin: 0; font: var(--t-body); color: var(--ink-1); overflow-wrap: anywhere;
}
html[data-ds] .pay-summary-out ul { padding-left: var(--space-5); }
html[data-ds] .pay-summary-out li + li { margin-top: var(--space-1); }
html[data-ds] .pay-summary-out .pay-summary-none { color: var(--ink-3); }
html[data-ds] .pay-summary-meta { margin-top: var(--space-3); font: var(--t-label); color: var(--ink-3); }
@media (max-width: 760px), (pointer: coarse) {
  html[data-ds] [data-summary-run] { min-height: var(--hit); }
}
@media (max-width: 760px) {
  html[data-ds] .pay-summary-run { margin-left: 0; }
}

/* Phases 2 to 5, slice P3b: slice P3's three calls. L2: on an Auctions row
   the Target and the Max, each with its copy button, make a line of their
   own (au3-cp): the decision column is too narrow for both and their
   buttons on one line, and a wrap there split a figure from its button or
   left the dot between them at a line's end, so the dot is not drawn. */
html[data-ds] .au3 .au3-note .au3-cp { display: block; white-space: nowrap; }
html[data-ds] .au3 .au3-note .au3-cp-sep { display: none; }

/* S2: a task read-only to the viewer (viewing as someone, or one they may
   not change) is not a control: its check box is a dotted, dim outline, a
   done one a plain muted tick, so the square does not invite a click. */
html[data-ds] .tk-check.is-static { background: transparent; border: 2px dotted var(--ink-3); opacity: .6; cursor: default; }
html[data-ds] .tk-check.is-static:not(:empty) { background: transparent; border-color: var(--ink-3); color: var(--ink-2); opacity: 1; }

/* ── Foreclosure sales up front (fc_sales.py; Eddy, 10-30-2026) ──────────
   The file's banner above the tabs, coloured by nearness: more than 7 days
   (is-far, the accent), within 7 (is-week, warn), today or tomorrow
   (is-day) and past, not marked held (is-past), both neg. The status line
   and the sticky bar carry the date; on a phone the sticky bar shows it in
   Next action's place (the last item, step-3.css 760px). The Legal tab's
   sale card, Files' FC sale column and Today's Coming up. */
html[data-ds] .fcs-banner {
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
  margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--rule); border-left: 4px solid var(--accent); border-radius: var(--r-2);
  background: var(--fill-1); color: var(--ink-1); font: var(--t-table);
}
html[data-ds] .fcs-banner > .icon { flex: none; margin-top: 2px; color: var(--accent); }
html[data-ds] .fcs-line {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3);
  flex: 1 1 320px; min-width: 0; margin: 0;
}
html[data-ds] .fcs-when { min-width: 0; overflow-wrap: anywhere; }
html[data-ds] .fcs-when b { font-weight: 600; }
html[data-ds] .fcs-count { font-weight: 600; white-space: nowrap; }
html[data-ds] .fcs-meta { color: var(--ink-3); }
html[data-ds] .fcs-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-left: auto; }
html[data-ds] .fcs-acts form { margin: 0; }
html[data-ds] .fcs-banner.is-week { border-left-color: var(--warn); background: var(--warn-tint); }
html[data-ds] .fcs-banner.is-week > .icon, html[data-ds] .fcs-banner.is-week .fcs-count { color: var(--warn); }
html[data-ds] .fcs-banner.is-day, html[data-ds] .fcs-banner.is-past {
  border-left-color: var(--neg); background: color-mix(in srgb, var(--neg) 8%, var(--paper));
}
html[data-ds] .fcs-banner.is-day > .icon, html[data-ds] .fcs-banner.is-day .fcs-count,
html[data-ds] .fcs-banner.is-past > .icon, html[data-ds] .fcs-banner.is-past .fcs-count { color: var(--neg); }

html[data-ds] .fcs-card .card-title { margin: 0 0 var(--space-2); }
html[data-ds] .fcs-card-when { margin: 0; font: var(--t-body); color: var(--ink-1); }
html[data-ds] .fcs-card-when .fcs-count { color: var(--ink-2); }
html[data-ds] .fcs-card-when.is-week .fcs-count { color: var(--warn); }
html[data-ds] .fcs-card-when.is-day .fcs-count, html[data-ds] .fcs-card-when.is-past .fcs-count { color: var(--neg); }
html[data-ds] .fcs-card-meta { margin: var(--space-1) 0 0; font: var(--t-label); font-weight: 400; color: var(--ink-3); }
html[data-ds] .fcs-card-meta:empty { display: none; }
html[data-ds] .fcs-card-note { display: flex; gap: var(--space-2); margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); border-radius: var(--r-1); background: var(--warn-tint); font: var(--t-table); color: var(--ink-1); }
html[data-ds] .fcs-card-note > .icon { flex: none; margin-top: 2px; color: var(--warn); }
html[data-ds] .fcs-card-none { margin: 0; font: var(--t-table); color: var(--ink-3); }
html[data-ds] .fcs-form { margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--rule); }
html[data-ds] .fcs-form-h { margin: 0 0 var(--space-2); font: var(--t-label); color: var(--ink-2); }
html[data-ds] .fcs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-3); }
html[data-ds] .fcs-field { display: grid; gap: var(--space-1); min-width: 0; font: var(--t-label); color: var(--ink-2); }
html[data-ds] .fcs-field .form-control { width: 100%; min-width: 0; }
html[data-ds] .fcs-wide { grid-column: span 2; }
html[data-ds] .fcs-card-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-3); }
html[data-ds] .fcs-card-acts form { margin: 0; }
html[data-ds] .fcs-cancel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
html[data-ds] .fcs-cancel .form-control { width: 220px; max-width: 100%; }
html[data-ds] .fcs-hist-h { margin: var(--space-4) 0 var(--space-2); font: var(--t-label); color: var(--ink-2); }
html[data-ds] .fcs-hist { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); font: var(--t-table); }
html[data-ds] .fcs-hist li { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); }
html[data-ds] .fcs-hist-what { color: var(--ink-1); overflow-wrap: anywhere; }
html[data-ds] .fcs-hist-who { color: var(--ink-3); white-space: nowrap; }

html[data-ds] .lg-files-table .lg-c-fcs { width: 132px; }
html[data-ds] .lg-c-fcs .fcs-cell-lbl { display: none; }
html[data-ds] .lg-c-fcs .fcs-count { font-weight: 400; white-space: normal; }
html[data-ds] .lg-c-fcs.is-week .fcs-count { color: var(--warn); }
html[data-ds] .lg-c-fcs.is-day .fcs-count, html[data-ds] .lg-c-fcs.is-past .fcs-count { color: var(--neg); }
html[data-ds] .lg-today .lg-grp-later .lg-grp-name { color: var(--ink-2); }

@media (max-width: 760px) {
  html[data-ds] .fcs-banner { padding: var(--space-3); }
  html[data-ds] .fcs-acts { margin-left: 0; flex-basis: 100%; }
  html[data-ds] .fcs-wide { grid-column: 1 / -1; }
  html[data-ds] .fcs-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-ds] .fcs-cancel .form-control { width: 100%; }
  html[data-ds] .lg-files-table td.lg-c-fcs { grid-column: 1 / -1; }
  html[data-ds] .lg-files-table td.lg-c-fcs:empty,
  html[data-ds] .lg-files-table td.lg-c-fcs:has(> .lg-dash:only-child) { display: none; }
  html[data-ds] .lg-c-fcs .fcs-cell-lbl, html[data-ds] .lg-c-fcs .lg-cm-date,
  html[data-ds] .lg-c-fcs .lg-cm-sub { display: inline; }
  html[data-ds] .lg-c-fcs .fcs-cell-lbl { margin-right: var(--space-1); }
}
@media (max-width: 760px), (pointer: coarse) {
  html[data-ds] .fcs-acts .btn, html[data-ds] .fcs-card .btn, html[data-ds] .fcs-card .form-control { min-height: var(--hit); }
}
/* The sticky bar never wraps: with the sale in it, Loan stage · Workout
   gives way where the bar is short of room (left nav 1101 to 1400px, top
   nav 901 to 1240px), so the name keeps its room and nothing is pushed
   past the edge. Left nav 901 to 1100px shows only the last figure, the
   sale (D5 above). */
@media (min-width: 1101px) and (max-width: 1400px) {
  html[data-ds]:not([data-nav="top"]) .fp3-sticky:has(.fp3-sticky-fcs) > .fp3-vr + .fp3-sticky-it { display: none; }
}
@media (min-width: 901px) and (max-width: 1240px) {
  html[data-ds][data-nav="top"] .fp3-sticky:has(.fp3-sticky-fcs) > .fp3-vr + .fp3-sticky-it { display: none; }
}
/* On a phone the top sticky bar gives way to the docked action bar, which
   carries the sale's line over its buttons (its height, --lg-abar-h, is
   measured with the line, so the room under it and a toast above it
   follow). Held, it still gives way (is-held). */
@media screen and (max-width: 900px) {
  html[data-ds] .lg-abar:not(.is-held):has(> .lg-abar-note) { display: flex; flex-wrap: wrap; }
  html[data-ds] .lg-abar:has(> .lg-abar-note) > :not(.lg-abar-note) { flex: 1 1 0; min-width: 0; }
  html[data-ds] .lg-abar-note {
    flex: 1 0 100%; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: var(--t-table); color: var(--ink-1); text-align: center; font-variant-numeric: tabular-nums;
  }
  html[data-ds] .lg-abar-note .fp3-lbl { margin-right: var(--space-1); }
}

/* ── HECM bids through to disposition (hecm.py, fc_outcomes.py; Eddy,
   10-30-2026) ──────────────────────────────────────────────────────────
   The pool page's bids, loan by loan: the totals and the controls for the
   ticked loans (ds3/_hecm_bids.html), the tick column and each loan's Bid
   cell with its own form in a disclosure (ds3/_hecm_bid_cell.html). The
   file page's ask after a held sale (on the banner, warn) and the Legal
   card's outcome step (ds3/_fc_outcome.html). */
html[data-ds] .hb3-bids { margin-bottom: var(--space-5); }
html[data-ds] .hb3-bids .card-title { margin: 0 0 var(--space-3); }
html[data-ds] .hb3-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3) var(--space-5); margin: 0; }
html[data-ds] .hb3-sum-it { min-width: 0; }
html[data-ds] .hb3-sum dt { margin: 0 0 2px; font: var(--t-label); color: var(--ink-3); }
html[data-ds] .hb3-sum dd { margin: 0; font: var(--t-table); color: var(--ink-1); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
html[data-ds] .hb3-sum dd b { font-weight: 600; }
html[data-ds] .hb3-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--rule); }
html[data-ds] .hb3-acts form { margin: 0; }
html[data-ds] .hb3-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-right: auto; }
html[data-ds] .hb3-bulk-pick { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font: var(--t-label); color: var(--ink-2); }
html[data-ds] .hb3-bulk-pick .form-control { width: auto; min-width: 150px; }
html[data-ds] .hb3-ticked { font: var(--t-label); font-weight: 400; color: var(--ink-3); }
html[data-ds] .data-table th.hb3-tick, html[data-ds] .data-table td.hb3-tick { width: 32px; padding-left: var(--space-2); padding-right: 0; text-align: center; }
html[data-ds] .hb3-tick-hit { display: inline-flex; align-items: center; justify-content: center; margin: 0; cursor: pointer; }
html[data-ds] .data-table td.hb3-cell { min-width: 170px; vertical-align: top; }
/* The roster's sticky heads were see-through: with the Bid cells' taller
   rows scrolled under them, they take the card's ground. */
html[data-ds] .table-sticky-wrap:has(.hb3-cell) thead th { background: var(--paper); }
html[data-ds] .hb3-dec { display: block; font-weight: 600; color: var(--ink-1); }
html[data-ds] .hb3-dec.is-pass { color: var(--ink-3); }
html[data-ds] .hb3-dec.is-none { font-weight: 400; color: var(--ink-3); }
html[data-ds] .hb3-line { display: block; margin-top: 2px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
html[data-ds] .hb3-line b { font-weight: 600; color: var(--ink-1); }
html[data-ds] .hb3-res.is-won { color: var(--accent); font-weight: 600; }
html[data-ds] .hb3-res.is-lost { color: var(--ink-3); }
html[data-ds] a.hb3-file { color: var(--accent); }
html[data-ds] .hb3-edit { margin-top: var(--space-1); }
html[data-ds] .hb3-edit > summary { list-style: none; display: inline-flex; align-items: center; }
html[data-ds] .hb3-edit > summary::-webkit-details-marker { display: none; }
html[data-ds] .hb3-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); width: 300px; max-width: 70vw; margin-top: var(--space-2); padding: var(--space-3); border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--paper); }
html[data-ds] .hb3-field { display: grid; gap: 2px; min-width: 0; margin: 0; font: var(--t-label); font-weight: 400; color: var(--ink-2); }
html[data-ds] .hb3-field .form-control { width: 100%; min-width: 0; }
html[data-ds] .hb3-form-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2); }
html[data-ds] .hb3-to-files { margin: var(--space-1) 0 0; }

html[data-ds] .fcs-banner.fco-banner { border-left-color: var(--warn); background: var(--warn-tint); }
html[data-ds] .fcs-banner.fco-banner > .icon { color: var(--warn); }
html[data-ds] .fco-pick { margin: 0 0 var(--space-3); padding: 0; border: 0; min-width: 0; }
html[data-ds] .fco-opt { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-2) 0 0; font: var(--t-table); color: var(--ink-1); cursor: pointer; }
html[data-ds] .fco-opt input { flex: none; margin-top: 3px; }
html[data-ds] .fco-opt b { font-weight: 600; }
html[data-ds] .fco-hint { display: block; font: var(--t-label); font-weight: 400; color: var(--ink-3); }
html[data-ds] .fco-sold { margin: var(--space-2) 0 0 var(--space-6); }
html[data-ds] .fco-done { margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); border-radius: var(--r-1); background: var(--fill-1); font: var(--t-table); }
html[data-ds] .fco-done p { margin: 0; }
html[data-ds] .fco-done-what { color: var(--ink-1); }
html[data-ds] .fco-done-what b { font-weight: 600; }
html[data-ds] .fco-done-who { margin-top: 2px; font: var(--t-label); font-weight: 400; color: var(--ink-3); }
html[data-ds] .fco-done form { margin: var(--space-2) 0 0; }

/* On a phone the table scrolls sideways inside its card, so a loan's open
   Bid form sits over the foot of the screen, all of it in view, until it
   is saved or cancelled (Cancel, Escape or its button again). */
@media (max-width: 760px) {
  html[data-ds] .fco-sold { margin-left: 0; }
  html[data-ds] .hb3-bulk { margin-right: 0; flex-basis: 100%; }
  html[data-ds] .hb3-edit[open] > .hb3-form {
    position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); z-index: 60;
    width: auto; max-width: none; max-height: 75vh; overflow-y: auto; margin: 0;
    grid-template-columns: minmax(0, 1fr); box-shadow: var(--shadow-float);
  }
  /* The table's containment (contain: content) would hold the sheet inside
     it; it lets go while a sheet is open. */
  html[data-ds] .data-table:has(.hb3-edit[open]) { contain: none; }
}
@media (max-width: 900px), (pointer: coarse) {
  html[data-ds] .hb3-acts .btn, html[data-ds] .hb3-cell .btn, html[data-ds] .hb3-bulk .form-control,
  html[data-ds] .hb3-form .form-control, html[data-ds] .fco-form .btn, html[data-ds] .fco-form .form-control,
  html[data-ds] .fco-done .btn, html[data-ds] .fco-banner .btn {
    min-height: var(--hit);
  }
  /* The base rule for inputs reads height from --ctl-h (as .hp3-form). */
  html[data-ds] .hb3-form, html[data-ds] .hb3-bulk, html[data-ds] .fco-form { --ctl-h: var(--hit); }
  html[data-ds] .hb3-tick-hit { min-width: var(--hit); min-height: var(--hit); }
  html[data-ds] a.hb3-file { display: inline-flex; align-items: center; min-height: var(--hit); }
  html[data-ds] .fco-opt { min-height: var(--hit); align-items: center; }
  html[data-ds] .fco-opt input { margin-top: 0; }
}

/* The new Rentals links, on a touch screen: the property page's "From file"
   and the file page's "Rental:" line. */
@media (max-width: 900px), (pointer: coarse) {
  html[data-ds] #rn3-from a, html[data-ds] #fc-rental a { display: inline-flex; align-items: center; min-height: var(--hit); }
}

/* ── Listings (listings.py; Eddy, 10-30-2026) ─────────────────────────────
   The section's list (ds3/listings.html: its figures, the status tabs, the
   rows), a listing's page (ds3/listing.html: the header, the jump links and
   its cards) and its form (ds3/listing_form.html); and the "For sale" marks
   and List for sale on the sources: a rental's list and page, a file's exit
   plan (ds3/_ls_exit.html) and a deal's page. */
html[data-ds] .ls3-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3) var(--space-5);
  margin: var(--space-5) 0 0; padding: var(--space-4) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
html[data-ds] .ls3-kpi { min-width: 0; }
html[data-ds] .ls3-kpi dt { margin: 0 0 2px; font: var(--t-label); color: var(--ink-3); }
html[data-ds] .ls3-kpi dd { margin: 0; color: var(--ink-1); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
html[data-ds] .ls3-kpi .ls-kpi-v { font-size: var(--kpi-size-tile); font-weight: 600; line-height: 1.2; }
html[data-ds] .ls3-kpi-sub { display: block; font: var(--t-label); font-weight: 400; color: var(--ink-3); }
html[data-ds] .ls3-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-3); }
html[data-ds] .ls3-bar .lg-chips { margin-top: 0; }
html[data-ds] .ls3-sortmenu { display: none; }
html[data-ds] .ls3-card { margin-top: var(--space-4); }
html[data-ds] .ls3-table td { vertical-align: top; }
html[data-ds] .ls3-sub { display: block; margin-top: 2px; font: var(--t-label); font-weight: 400; color: var(--ink-3); overflow-wrap: anywhere; }
html[data-ds] .ls3-st { font-weight: 500; color: var(--ink-1); white-space: nowrap; }
html[data-ds] .ls3-st.is-under-contract, html[data-ds] .ls3-st.is-coming-soon { color: var(--warn); }
html[data-ds] .ls3-st.is-sold { color: var(--accent); }
html[data-ds] .ls3-st.is-withdrawn, html[data-ds] .ls3-st.is-expired { color: var(--ink-3); }

html[data-ds] .ls3-crumbs { display: flex; align-items: center; gap: var(--space-1); margin: 0 0 var(--space-2); font: var(--t-label); color: var(--ink-3); }
html[data-ds] .ls3-crumbs .icon { color: var(--ink-3); }
html[data-ds] .ls3-place { margin: var(--space-1) 0 0; color: var(--ink-2); }
html[data-ds] .ls3-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-1); margin: var(--space-3) 0 0; font: var(--t-table); color: var(--ink-2); }
html[data-ds] .ls3-price { font-size: var(--kpi-size-tile); font-weight: 600; color: var(--ink-1); font-variant-numeric: tabular-nums; }
html[data-ds] .ls3-sub-in { color: var(--ink-3); }
html[data-ds] .ls3-src { display: flex; align-items: flex-start; gap: var(--space-1); margin: var(--space-2) 0 0; font: var(--t-label); font-weight: 400; color: var(--ink-2); }
html[data-ds] .ls3-src .icon { flex: none; margin-top: 2px; color: var(--ink-3); }
html[data-ds] .ls3-movemenu .lg-menu-panel { right: 0; left: auto; width: 280px; max-width: calc(100vw - 32px); }
html[data-ds] .ls3-move { display: grid; gap: var(--space-2); margin: 0; }
html[data-ds] .ls3-move .btn { justify-self: stretch; margin: 0; }
html[data-ds] .ls3-uc { display: grid; gap: var(--space-2); margin: 0; padding: 0 0 var(--space-2); border: 0; border-bottom: 1px solid var(--rule); min-width: 0; }
html[data-ds] .ls3-jump { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); margin-top: var(--space-5); padding-bottom: var(--space-2); border-bottom: 1px solid var(--rule); font: var(--t-table); }
html[data-ds] .lg-page .ls3-jump a { display: inline-flex; align-items: baseline; gap: var(--space-1); padding: var(--space-1) 0; color: var(--ink-2); text-decoration: none; }
html[data-ds] .lg-page .ls3-jump a:hover { color: var(--ink-1); }
html[data-ds] .ls3-jump .lg-k { font: var(--t-label); color: var(--ink-3); font-variant-numeric: tabular-nums; }
html[data-ds] .ls3-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-4); align-items: start; }
html[data-ds] .ls3-sec { min-width: 0; margin: 0; scroll-margin-top: var(--space-6); }
html[data-ds] #ls-offers, html[data-ds] #ls-history { grid-column: 1 / -1; }
html[data-ds] .ls3-sec > .lg-h-sec { margin-bottom: var(--space-3); }
html[data-ds] .ls3-sheet .d-value.money { font-variant-numeric: tabular-nums; }
html[data-ds] .ls3-desc { margin: var(--space-3) 0 0; color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; }
html[data-ds] .ls3-none { margin: 0; color: var(--ink-3); }
html[data-ds] .ls3-mini { margin: 0 0 var(--space-3); }
html[data-ds] .ls3-mini tr.is-contract td { background: var(--accent-tint); }
html[data-ds] .ls3-log { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font: var(--t-table); }
html[data-ds] .ls3-log li { padding-bottom: var(--space-2); border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
html[data-ds] .ls3-log li:last-child { border-bottom: 0; }
html[data-ds] .ls3-when { color: var(--ink-2); font-variant-numeric: tabular-nums; }
html[data-ds] .ls3-say { display: block; margin-top: 2px; color: var(--ink-1); white-space: pre-line; }
html[data-ds] .ls3-by { display: block; margin-top: 2px; font: var(--t-label); font-weight: 400; color: var(--ink-3); }
html[data-ds] .ls3-add { margin-top: var(--space-3); }
html[data-ds] .ls3-add > summary { list-style: none; display: inline-flex; align-items: center; }
html[data-ds] .ls3-add > summary::-webkit-details-marker { display: none; }
html[data-ds] .ls3-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-3) 0 0; }
html[data-ds] .ls3-form.ls3-inline { grid-template-columns: minmax(0, 220px) auto; align-items: end; }
html[data-ds] .ls3-inline { margin-top: var(--space-3); }
html[data-ds] .ls3-field { display: grid; gap: 4px; min-width: 0; margin: 0; font: var(--t-label); color: var(--ink-2); }
html[data-ds] .ls3-field .form-control { width: 100%; min-width: 0; }
html[data-ds] .ls3-wide { grid-column: 1 / -1; }
html[data-ds] .ls3-money { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
html[data-ds] .ls3-unit { color: var(--ink-3); }
html[data-ds] .ls3-hint { font: var(--t-label); font-weight: 400; color: var(--ink-3); }
html[data-ds] .ls3-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
html[data-ds] .ls3-offer-st { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: 0; }
html[data-ds] .ls3-offer-st .form-control { width: auto; min-width: 120px; }
html[data-ds] .ls3-ost.is-accepted { color: var(--accent); font-weight: 500; }
html[data-ds] .ls3-ost.is-rejected, html[data-ds] .ls3-ost.is-withdrawn { color: var(--ink-3); }
html[data-ds] .ls3-done { margin: 0; font: var(--t-table); color: var(--ink-1); }
html[data-ds] .ls3-done b { font-weight: 600; font-variant-numeric: tabular-nums; }
html[data-ds] .ls3-why { margin: var(--space-2) 0 0; color: var(--ink-2); }
html[data-ds] .ls3-problems { margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--neg); background: var(--fill-1); color: var(--ink-1); }
html[data-ds] .ls3-problems p, html[data-ds] .ls3-problems ul { margin: 0; }
html[data-ds] .ls3-problems ul { padding-left: var(--space-5); }
html[data-ds] .ls3-bigform { margin-top: var(--space-4); }
html[data-ds] .ls3-set { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); grid-column: 1 / -1; margin: 0; padding: 0; border: 0; min-width: 0; }
html[data-ds] .ls3-set > legend { margin: 0 0 var(--space-2); padding: 0; }
html[data-ds] .ls3-exit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: var(--space-3) 0 0; font: var(--t-table); color: var(--ink-1); }
html[data-ds] .ls3-exit > .icon { color: var(--ink-3); }
html[data-ds] .ls3-exit .btn .icon { margin-right: var(--space-1); }
/* The For sale badge is a link drawn as a badge: the theme's accent, never the browser's link blue. */
html[data-ds] a.rn3-sale { text-decoration: none; color: var(--accent); background: var(--accent-tint); border-color: color-mix(in oklab, var(--accent) 35%, transparent); }
html[data-ds] a.rn3-sale:visited { color: var(--accent); }
html[data-ds] a.rn3-sale:hover, html[data-ds] a.rn3-sale:focus-visible { color: var(--accent); border-color: var(--accent); text-decoration: none; }
html[data-ds] #ls-file-head a, html[data-ds] #ls-deal-listing { white-space: nowrap; }

@media (max-width: 760px) {
  html[data-ds] .ls3-grid, html[data-ds] .ls3-form { grid-template-columns: minmax(0, 1fr); }
  html[data-ds] .ls3-form.ls3-inline { grid-template-columns: minmax(0, 1fr); }
  html[data-ds] .ls3-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-ds] .ls3-kpis .ls3-kpi:first-child { grid-column: 1 / -1; }
  /* The status menu opens across the head's width, never off the screen's edge. */
  html[data-ds] .ls-head .lg-head-actions { position: relative; flex-basis: 100%; flex-wrap: wrap; }
  html[data-ds] .ls3-movemenu { position: static; }
  html[data-ds] .ls3-movemenu .lg-menu-panel { left: 0; right: 0; width: auto; max-width: none; }
}
@media (max-width: 699px) {
  /* The rows are cards here and the column heads are gone: the sorts are a menu. */
  html[data-ds] .ls3-sortmenu { display: block; position: relative; }
}
@media (max-width: 900px), (pointer: coarse) {
  html[data-ds] .ls3 .btn, html[data-ds] .ls3 .form-control, html[data-ds] .ls3-exit .btn,
  html[data-ds] a.rn3-sale, html[data-ds] #rn3-list-sale, html[data-ds] #ls-deal-new {
    min-height: var(--hit);
  }
  html[data-ds] .ls3 { --ctl-h: var(--hit); }
  html[data-ds] .lg-page.ls3 .lg-tabs a, html[data-ds] .lg-page .ls3-jump a, html[data-ds] .ls3-crumbs a,
  html[data-ds] .ls3-table .mc-id a, html[data-ds] .ls3-src a, html[data-ds] .ls3-exit a:not(.btn),
  html[data-ds] #ls-file-head a, html[data-ds] .lg-page .ls3-sortmenu .lg-opts a {
    display: inline-flex; align-items: center; min-height: var(--hit);
  }
  html[data-ds] .lg-page .ls3-sortmenu .lg-opts a { display: flex; }
  html[data-ds] a.rn3-sale, html[data-ds] #ls-deal-listing { display: inline-flex; align-items: center; }
  html[data-ds] .ls3 .lg-chip-x { width: var(--hit); height: var(--hit); }
}