/* ===========================================================================
   Loans — design system
   ---------------------------------------------------------------------------
   Hand-written, no build step, no CDN. A CDN asset is a hole in offline
   capability, and the agent PWA has to paint from cache on a cheap tablet.

   Structure:  tokens -> reset -> layout -> components -> utilities
   =========================================================================== */

/* --- tokens ---------------------------------------------------------------

   One palette, defined three times: the light values on bare :root, then
   overridden under prefers-color-scheme for people who never touch a toggle,
   then again under [data-theme] so an explicit choice beats the system in both
   directions. Miss the third block and the toggle only works one way.

   The blue is deliberately cool and mid-weight rather than a saturated
   "primary blue". This is a screen people look at for a whole working day
   while reading numbers; a vivid brand colour that is fine on a marketing page
   becomes tiring next to a column of rand amounts.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Surfaces carry the faintest blue cast rather than being neutral grey, so
     the interface reads as one temperature instead of blue accents dropped
     onto a grey app. */
  --lf-bg:#eef4fb;
  --lf-surface:#ffffff;
  --lf-surface-2:#f7fafd;
  --lf-surface-3:#eaf1f9;
  --lf-border:#dbe6f2;
  --lf-border-strong:#bcd0e6;

  --lf-ink:#0e1c2b;
  --lf-ink-2:#33475e;
  --lf-muted:#61748a;

  --lf-brand:#1567c8;
  --lf-brand-2:#0d4f9e;
  --lf-brand-3:#3d8ce4;
  --lf-brand-fg:#ffffff;
  --lf-brand-soft:#dcebfc;
  --lf-brand-ring:rgba(21,103,200,.28);

  /* Form fields: a white well in a firmer frame than a card's hairline, so a
     field is never mistaken for a label. The icons drawn inside fields cannot
     read a colour token, so each theme carries its own copy. */
  --lf-field:#ffffff;
  --lf-field-line:#aec3dc;
  --lf-field-line-hover:#7f9ab8;
  --lf-field-cap:#f1f6fc;
  --lf-field-inset:inset 0 1px 2px rgba(13,43,79,.06);
  --lf-i-chevron:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2333475e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  --lf-i-chevron-on:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231567c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  --lf-i-tick:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3 7.4l2.6 2.6L11 4.4'/%3E%3C/svg%3E");
  --lf-i-dash:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' d='M3.5 7h7'/%3E%3C/svg%3E");
  --lf-i-search:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='7.75' cy='7.75' r='5.25' fill='none' stroke='%2361748a' stroke-width='1.8'/%3E%3Cpath d='M11.6 11.6l3.9 3.9' stroke='%2361748a' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --lf-i-clear:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23dbe6f2'/%3E%3Cpath d='M7 7l6 6M13 7l-6 6' stroke='%2333475e' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --lf-i-calendar:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='3' y='4.5' width='14' height='12.5' rx='2.5' fill='none' stroke='%2333475e' stroke-width='1.6'/%3E%3Cpath d='M3 8.5h14M7 2.5v3.5M13 2.5v3.5' stroke='%2333475e' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");

  --lf-ok-bg:#dff5e6;   --lf-ok-fg:#1a6b3c;
  --lf-warn-bg:#fdf0d0; --lf-warn-fg:#8a5a00;
  --lf-bad-bg:#fde3e1;  --lf-bad-fg:#a51f1a;
  --lf-bad-ring:rgba(165,31,26,.22);
  --lf-info-bg:#dcebfc; --lf-info-fg:#0d4f9e;

  --lf-r-sm:8px; --lf-r-md:12px; --lf-r-lg:16px; --lf-r-full:999px;

  --lf-sp-1:4px;  --lf-sp-2:8px;  --lf-sp-3:12px; --lf-sp-4:16px;
  --lf-sp-5:24px; --lf-sp-6:32px; --lf-sp-7:48px; --lf-sp-8:64px;

  /* Tinted with the brand hue rather than pure black, so a raised card looks
     lifted off this background instead of smudged. */
  --lf-shadow-1:0 1px 2px rgba(13,43,79,.07);
  --lf-shadow-2:0 4px 14px rgba(13,43,79,.09);
  --lf-shadow-3:0 14px 36px rgba(13,43,79,.14);

  --lf-font-ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --lf-font-num:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* Minimum touch target. Agents use this one-handed on a tablet. */
  --lf-tap:48px;

  /* The one place the content column width is decided. */
  --lf-measure:1200px;
  --lf-measure-narrow:560px;
  --lf-measure-mid:760px;
}

/* The system's preference, for anyone who has not chosen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --lf-bg:#0b1220;
    --lf-surface:#111c2e;
    --lf-surface-2:#16233a;
    --lf-surface-3:#1d2d47;
    --lf-border:#243550;
    --lf-border-strong:#33496b;

    --lf-ink:#e8f0fa;
    --lf-ink-2:#bccbdd;
    --lf-muted:#8397b0;

    /* Lifted and desaturated: the light-mode blue on a dark ground is both
       too dark to read against and too intense to sit next to text. */
    --lf-brand:#5aa9f2;
    --lf-brand-2:#8ac4f7;
    --lf-brand-3:#3d8ce4;
    --lf-brand-fg:#08131f;
    --lf-brand-soft:#122843;
    --lf-brand-ring:rgba(90,169,242,.32);

    /* Fields sit a shade below the card, so they read as wells on a dark card. */
    --lf-field:#0c1627;
    --lf-field-line:#3a5274;
    --lf-field-line-hover:#58789f;
    --lf-field-cap:#15223a;
    --lf-field-inset:inset 0 1px 2px rgba(0,0,0,.35);
    --lf-i-chevron:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23bccbdd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    --lf-i-chevron-on:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235aa9f2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    --lf-i-tick:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%2308131f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3 7.4l2.6 2.6L11 4.4'/%3E%3C/svg%3E");
    --lf-i-dash:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath stroke='%2308131f' stroke-width='2.2' stroke-linecap='round' d='M3.5 7h7'/%3E%3C/svg%3E");
    --lf-i-search:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='7.75' cy='7.75' r='5.25' fill='none' stroke='%238397b0' stroke-width='1.8'/%3E%3Cpath d='M11.6 11.6l3.9 3.9' stroke='%238397b0' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    --lf-i-clear:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23243550'/%3E%3Cpath d='M7 7l6 6M13 7l-6 6' stroke='%23bccbdd' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    --lf-i-calendar:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='3' y='4.5' width='14' height='12.5' rx='2.5' fill='none' stroke='%23bccbdd' stroke-width='1.6'/%3E%3Cpath d='M3 8.5h14M7 2.5v3.5M13 2.5v3.5' stroke='%23bccbdd' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");

    --lf-ok-bg:#0e2c1d;   --lf-ok-fg:#63d69c;
    --lf-warn-bg:#33270a; --lf-warn-fg:#e8bc4e;
    --lf-bad-bg:#3a1a1c;  --lf-bad-fg:#f79490;
    --lf-bad-ring:rgba(247,148,144,.3);
    --lf-info-bg:#122843; --lf-info-fg:#8ac4f7;

    --lf-shadow-1:0 1px 2px rgba(0,0,0,.4);
    --lf-shadow-2:0 4px 14px rgba(0,0,0,.45);
    --lf-shadow-3:0 14px 36px rgba(0,0,0,.55);
  }
}

/* An explicit choice, which must win over the system in BOTH directions. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --lf-bg:#0b1220;
  --lf-surface:#111c2e;
  --lf-surface-2:#16233a;
  --lf-surface-3:#1d2d47;
  --lf-border:#243550;
  --lf-border-strong:#33496b;

  --lf-ink:#e8f0fa;
  --lf-ink-2:#bccbdd;
  --lf-muted:#8397b0;

  --lf-brand:#5aa9f2;
  --lf-brand-2:#8ac4f7;
  --lf-brand-3:#3d8ce4;
  --lf-brand-fg:#08131f;
  --lf-brand-soft:#122843;
  --lf-brand-ring:rgba(90,169,242,.32);

  --lf-field:#0c1627;
  --lf-field-line:#3a5274;
  --lf-field-line-hover:#58789f;
  --lf-field-cap:#15223a;
  --lf-field-inset:inset 0 1px 2px rgba(0,0,0,.35);
  --lf-i-chevron:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23bccbdd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  --lf-i-chevron-on:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235aa9f2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  --lf-i-tick:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%2308131f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3 7.4l2.6 2.6L11 4.4'/%3E%3C/svg%3E");
  --lf-i-dash:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath stroke='%2308131f' stroke-width='2.2' stroke-linecap='round' d='M3.5 7h7'/%3E%3C/svg%3E");
  --lf-i-search:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='7.75' cy='7.75' r='5.25' fill='none' stroke='%238397b0' stroke-width='1.8'/%3E%3Cpath d='M11.6 11.6l3.9 3.9' stroke='%238397b0' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --lf-i-clear:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23243550'/%3E%3Cpath d='M7 7l6 6M13 7l-6 6' stroke='%23bccbdd' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --lf-i-calendar:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='3' y='4.5' width='14' height='12.5' rx='2.5' fill='none' stroke='%23bccbdd' stroke-width='1.6'/%3E%3Cpath d='M3 8.5h14M7 2.5v3.5M13 2.5v3.5' stroke='%23bccbdd' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");

  --lf-ok-bg:#0e2c1d;   --lf-ok-fg:#63d69c;
  --lf-warn-bg:#33270a; --lf-warn-fg:#e8bc4e;
  --lf-bad-bg:#3a1a1c;  --lf-bad-fg:#f79490;
  --lf-bad-ring:rgba(247,148,144,.3);
  --lf-info-bg:#122843; --lf-info-fg:#8ac4f7;

  --lf-shadow-1:0 1px 2px rgba(0,0,0,.4);
  --lf-shadow-2:0 4px 14px rgba(0,0,0,.45);
  --lf-shadow-3:0 14px 36px rgba(0,0,0,.55);
}

/* Someone on a dark system who explicitly chose light gets light. Without this
   block the media query above already handles it via :not([data-theme="light"]),
   but stating it keeps the three blocks symmetrical and survives edits. */
:root[data-theme="light"] { color-scheme: light; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* --- reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* The hidden attribute has to beat every author display rule.
 *
 * `[hidden]` is only a USER-AGENT rule setting display:none, so any author
 * `display:` on the same element silently defeats it. `.banner { display:flex }`
 * meant every hidden banner in the app rendered anyway: an empty amber strip
 * under the calculator, and — much worse — the agent app's "No signal" and
 * "This device has been revoked" banners showing permanently, on a screen whose
 * whole job is telling an agent the truth about their connection.
 *
 * This is the one place !important is the correct tool: it is not overriding a
 * decision, it is restoring the meaning of an HTML attribute.
 */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--lf-bg);
  color: var(--lf-ink);
  font: 15px/1.55 var(--lf-font-ui);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* A tighter type scale than the browser default, with the tracking pulled in
   as the size goes up. Large text set at default tracking looks loose and
   amateurish; small text set tight becomes hard to read. */
h1, h2, h3, h4 { margin: 0 0 var(--lf-sp-3); line-height: 1.25; color: var(--lf-ink); }
h1 { font-size: 26px; font-weight: 680; letter-spacing: -.021em; }
h2 { font-size: 19px; font-weight: 660; letter-spacing: -.014em; }
h3 { font-size: 15.5px; font-weight: 650; letter-spacing: -.008em; }
h4 { font-size: 14px; font-weight: 650; }
p  { margin: 0 0 var(--lf-sp-3); }
p:last-child { margin-bottom: 0; }

a  { color: var(--lf-brand); text-underline-offset: 2px; }
a:hover { color: var(--lf-brand-2); }

/* One focus treatment everywhere: a ring in the brand colour with a gap, so it
   reads on a white card and on a coloured button alike. */
:focus-visible {
  outline: 2px solid var(--lf-brand);
  outline-offset: 2px;
  border-radius: 4px;
}

code, kbd, .mono { font-family: var(--lf-font-num); font-size: .9em; }

/* Numbers line up in a column only if the digits are the same width. Applied
   at the root so every figure in the app inherits it, not just the ones
   somebody remembered to tag. */
.num, table.data td.num, .stat .value, .value, input.num, td.num, th.num {
  font-variant-numeric: tabular-nums;
}

/* --- layout -------------------------------------------------------------- */
.shell { display: grid; grid-template-rows: auto 1fr; min-height: 100vh; }
/* A grid item's minimum width defaults to its content's, so one wide table or
   an unbreakable heading widened the whole column past a phone's screen and
   cut the page off at the right. Zero lets overflow stay inside the scroll
   containers built for it. */
.shell > * { min-width: 0; }

.topbar {
  display: flex; align-items: center; gap: var(--lf-sp-4);
  padding: 0 var(--lf-sp-5);
  min-height: 62px;
  background: var(--lf-surface);
  border-bottom: 1px solid var(--lf-border);
  position: sticky; top: 0; z-index: 20;
  /* Translucent so content scrolling underneath is hinted at rather than
     cut off dead. Falls back to the solid colour above where unsupported. */
  box-shadow: 0 1px 0 rgba(13,43,79,.03);
}
/* Progressive polish only. Both features are guarded together, because a
   browser with backdrop-filter but no color-mix would drop the background and
   leave the bar transparent over scrolling content. Older field tablets simply
   get the solid bar above, which is fine. */
@supports (backdrop-filter: blur(8px)) and (background: color-mix(in srgb, red 50%, transparent)) {
  .topbar {
    background: color-mix(in srgb, var(--lf-surface) 86%, transparent);
    backdrop-filter: blur(12px);
  }
}
.topbar .brand { display: flex; align-items: center; gap: var(--lf-sp-3); text-decoration: none; color: inherit; }
.topbar nav { display: flex; gap: var(--lf-sp-1); margin-left: auto; flex-wrap: wrap; }
.topbar nav a {
  padding: 8px 12px; border-radius: var(--lf-r-sm);
  color: var(--lf-ink-2); text-decoration: none; font-size: 14px; font-weight: 500;
}
.topbar nav a:hover { background: var(--lf-surface-3); color: var(--lf-ink); }
.topbar nav a[aria-current="page"] {
  background: var(--lf-brand-soft);
  color: var(--lf-brand);
  font-weight: 650;
  /* A colour change alone is not enough to say "you are here" for anyone who
     cannot distinguish it — the underline carries the same meaning. */
  box-shadow: inset 0 -2px 0 var(--lf-brand);
}

/* Who you are signed in as. Separated from the links so it does not read as
   another destination. */
.nav-user {
  padding: 8px 4px 8px 12px;
  margin-left: 6px;
  border-left: 1px solid var(--lf-border);
  color: var(--lf-muted);
  font-size: 13px;
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mark {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: grid; place-items: center;
  background: var(--lf-brand); color: var(--lf-brand-fg);
  border-radius: var(--lf-r-sm);
  font-weight: 700; font-size: 16px;
}
.brand-name { font-weight: 650; letter-spacing: -.01em; }

/* Impersonation bar. Deliberately loud: a super admin acting inside a tenant
   must never mistake it for the platform view. */
.acting-bar {
  background: var(--lf-warn-bg);
  color: var(--lf-warn-fg);
  border-bottom: 1px solid var(--lf-border);
  padding: 10px var(--lf-sp-5);
  font-size: 13.5px;
  position: sticky; top: 60px; z-index: 15;
}
.acting-bar .container { max-width: var(--lf-measure); margin: 0 auto; gap: var(--lf-sp-3); }

.main { padding: var(--lf-sp-6) var(--lf-sp-5) var(--lf-sp-8); }

/* Every content column comes from the same token, so the topbar, the acting
   bar, the page body and the footer all line up on the same left edge. They
   used to be three different hardcoded widths and the misalignment showed on
   any screen wider than the content. */
.container { width: 100%; max-width: var(--lf-measure); margin: 0 auto; }
.container.narrow { max-width: var(--lf-measure-narrow); }
.container.narrow-mid { max-width: var(--lf-measure-mid); }

.page-head { margin-bottom: var(--lf-sp-5); }
.page-head h1 { margin-bottom: 5px; }
.page-head .sub { color: var(--lf-muted); margin: 0; font-size: 14.5px; }

/* Centred single-card pages: sign-in, 2FA, errors. */
.centered {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: var(--lf-sp-5);
}
.centered .container { width: 100%; max-width: 420px; }

/* --- card ---------------------------------------------------------------- */
.card {
  background: var(--lf-surface);
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-r-lg);
  box-shadow: var(--lf-shadow-1);
  padding: var(--lf-sp-5) var(--lf-sp-6) var(--lf-sp-6);
}
.card + .card { margin-top: var(--lf-sp-4); }
/* Grid gap already spaces cards inside a grid; the sibling margin on top of it
   made rows of cards drift out of alignment with each other. */
.grid > .card + .card, .grid > .card { margin-top: 0; }

.card-head {
  margin-bottom: var(--lf-sp-4);
  padding-bottom: var(--lf-sp-3);
  border-bottom: 1px solid var(--lf-border);
}
.card-head h2 { margin-bottom: 3px; }
.card-head .sub { color: var(--lf-muted); font-size: 13.5px; margin: 0; }
/* A head with nothing under it needs no rule. */
.card-head:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

/* --- grid / stats -------------------------------------------------------- */
.grid { display: grid; gap: var(--lf-sp-4); }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* Stat tiles line up on a baseline: label, then figure, then footnote, with the
   figure pinned so a tile whose label wraps to two lines does not push its
   number out of line with the tile beside it. */
.stat {
  display: flex; flex-direction: column;
  background: var(--lf-surface);
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-r-md);
  padding: var(--lf-sp-4) var(--lf-sp-4) var(--lf-sp-4);
  box-shadow: var(--lf-shadow-1);
}
.stat .label {
  color: var(--lf-muted); font-size: 12.5px; font-weight: 600;
  letter-spacing: .01em; margin-bottom: 8px;
  min-height: 2.4em;          /* two lines' worth, so figures align across a row */
  display: flex; align-items: flex-start;
}
.stat .value {
  font-size: 27px; font-weight: 700; letter-spacing: -.024em;
  line-height: 1.1; color: var(--lf-ink);
  /* Tabular figures: a column of rand amounts with proportional digits is a
     legibility bug, not a style preference. */
  font-variant-numeric: tabular-nums;
}
.stat .meta { color: var(--lf-muted); font-size: 12.5px; margin-top: 6px; margin-bottom: 0; }

/* --- forms --------------------------------------------------------------- */
.form { display: grid; gap: var(--lf-sp-5); }

/* A field is a label, a control and its help text, stacked on a fixed rhythm.
   align-content:start keeps the control at the top of its grid cell, so a field
   whose label wraps to two lines does not push its input below the one beside
   it — which is what made the business form look ragged. */
.field { display: grid; gap: 6px; align-content: start; }
.field > label {
  font-size: 13.5px; font-weight: 650; color: var(--lf-ink-2);
  line-height: 1.35;
}
.field > label .muted { font-weight: 500; }
.field .hint { font-size: 12.5px; color: var(--lf-muted); line-height: 1.4; }

/* Something wrong is never shown by colour alone: the message under the field
   carries a mark, and the field itself a stripe (below), so it still reads on a
   photocopy or to someone who cannot tell red from grey. A hint that follows an
   invalid field becomes its message. */
.field .err,
.field input[aria-invalid="true"] ~ .hint,
.field .affix:has(> [aria-invalid="true"]) ~ .hint {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 13px; font-weight: 650; line-height: 1.4; color: var(--lf-bad-fg);
}
.field .err::before,
.field input[aria-invalid="true"] ~ .hint::before,
.field .affix:has(> [aria-invalid="true"]) ~ .hint::before {
  content: '!'; flex: 0 0 auto; display: grid; place-items: center;
  width: 16px; height: 16px; margin-top: 1px; border-radius: 50%;
  background: var(--lf-bad-fg); color: var(--lf-surface);
  font-size: 11px; font-weight: 800; line-height: 1;
}
.field:has(> [aria-invalid="true"]) > label,
.field:has(> .affix > [aria-invalid="true"]) > label { color: var(--lf-bad-fg); }

/* Form grids are looser than content grids: a 180px form field is too narrow
   to read a label above, and packing four of them into a row is what produced
   two-line labels and a half-empty last row. */
.form .grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.form .grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.form .grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.form .grid { gap: var(--lf-sp-4) var(--lf-sp-5); }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=tel], input[type=date], input[type=search], input[type=month],
input:not([type]), select, textarea {
  font-family: inherit;
  /* 16px minimum, or iOS zooms the page when the field takes focus. */
  font-size: 16px;
  line-height: 1.4;
  padding: 11px 14px;
  min-height: var(--lf-tap);
  width: 100%;
  color: var(--lf-ink);
  /* background-color, never the shorthand: dropdowns, search boxes and date
     boxes draw their marks as background images, which the shorthand wipes. */
  background-color: var(--lf-field);
  border: 1px solid var(--lf-field-line);
  border-radius: 10px;
  box-shadow: var(--lf-field-inset);
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
input:hover:not(:disabled):not(:focus),
select:hover:not(:disabled):not(:focus),
textarea:hover:not(:disabled):not(:focus) { border-color: var(--lf-field-line-hover); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--lf-brand);
  box-shadow: 0 0 0 3px var(--lf-brand-ring);
}
input::placeholder, textarea::placeholder { color: var(--lf-muted); opacity: 1; }
input:disabled, select:disabled, textarea:disabled {
  background-color: var(--lf-surface-3); border-color: var(--lf-border); box-shadow: none;
  color: var(--lf-muted); cursor: not-allowed;
}
textarea { min-height: 104px; line-height: 1.5; resize: vertical; }

/* The field's half of an error: a red frame and a stripe down its left edge. */
input[aria-invalid="true"]:not(.code-boxes), select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--lf-bad-fg);
  box-shadow: inset 4px 0 0 var(--lf-bad-fg);
  padding-left: 18px;
}
input[aria-invalid="true"]:not(.code-boxes):focus, select[aria-invalid="true"]:focus, textarea[aria-invalid="true"]:focus {
  border-color: var(--lf-bad-fg);
  box-shadow: inset 4px 0 0 var(--lf-bad-fg), 0 0 0 3px var(--lf-bad-ring);
}

/* Chrome paints autofilled fields with its own opaque background, which in dark
   mode is a pale brown-grey block that ignores every token here — the fields in
   a form end up mismatched depending on what the browser thinks it can fill.
   The colour cannot be overridden directly, but an inset shadow covers it. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--lf-ink);
  -webkit-box-shadow: 0 0 0 100px var(--lf-field) inset;
  box-shadow: 0 0 0 100px var(--lf-field) inset;
  caret-color: var(--lf-ink);
  /* Long enough that the transition never actually completes, which is the
     documented trick for keeping the override in place. */
  transition: background-color 100000s ease-in-out 0s;
}
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px var(--lf-field) inset, 0 0 0 3px var(--lf-brand-ring);
  box-shadow: 0 0 0 100px var(--lf-field) inset, 0 0 0 3px var(--lf-brand-ring);
}

/* A dropdown carries its arrow in an end cap of its own, divided from the text,
   so it never passes for a box to type in. The arrow is drawn rather than the
   browser's, which sits at a different height in every engine. Each theme's
   copy of the arrow comes from the tokens, so no dark-mode rule is needed here. */
select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 60px;
  text-overflow: ellipsis;
  cursor: pointer;
  background-image:
    var(--lf-i-chevron),
    linear-gradient(var(--lf-field-line), var(--lf-field-line)),
    linear-gradient(var(--lf-field-cap), var(--lf-field-cap));
  background-repeat: no-repeat;
  background-size: 12px 8px, 1px 100%, 46px 100%;
  background-position: right 17px center, right 46px top, right top;
}
select:focus {
  background-image:
    var(--lf-i-chevron-on),
    linear-gradient(var(--lf-brand), var(--lf-brand)),
    linear-gradient(var(--lf-field-cap), var(--lf-field-cap));
}
/* A filter that is narrowing a list lights up, so what is applied can be read
   off the controls themselves. */
select.is-set {
  border-color: var(--lf-brand);
  background-color: var(--lf-brand-soft);
  color: var(--lf-brand-2);
  font-weight: 650;
  background-image:
    var(--lf-i-chevron-on),
    linear-gradient(var(--lf-brand), var(--lf-brand)),
    linear-gradient(var(--lf-brand-soft), var(--lf-brand-soft));
}
select.is-set:hover:not(:disabled):not(:focus) { border-color: var(--lf-brand-2); }
/* The open list is drawn in the page's colours, not the lit control's. */
select option { color: var(--lf-ink); background-color: var(--lf-surface); font-weight: 400; }

/* Search boxes: a magnifier inside, and a clear button once there is text. */
input[type=search] {
  padding-left: 42px;
  background-image: var(--lf-i-search);
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-position: left 14px center;
}
input[type=search]::-webkit-search-decoration { -webkit-appearance: none; }
input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin: 0 -4px 0 10px;
  background: var(--lf-i-clear) center / 20px 20px no-repeat;
  cursor: pointer;
}
input[type=search]::-webkit-search-cancel-button:hover { opacity: .75; }
/* Chrome keeps the clear button's room even while the box is empty, which cuts
   the end off a placeholder in a tight filter bar. */
input[type=search]:placeholder-shown::-webkit-search-cancel-button { display: none; }

/* Dates are figures, so they are set in the figures face, with a calendar mark
   drawn for each theme in place of the browser's, which fades on a dark field. */
input[type=date], input[type=month] { font-family: var(--lf-font-num); font-variant-numeric: tabular-nums; }
input[type=date]::-webkit-datetime-edit, input[type=month]::-webkit-datetime-edit { padding: 0; }
input[type=date]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator {
  width: 24px; height: 24px; margin: -2px -4px -2px 10px; padding: 0; border-radius: 6px;
  background: var(--lf-i-calendar) center / 20px 20px no-repeat;
  color: transparent; opacity: 1; cursor: pointer;
}
input[type=date]::-webkit-calendar-picker-indicator:hover,
input[type=month]::-webkit-calendar-picker-indicator:hover { background-color: var(--lf-surface-3); }

/* File inputs are unstyleable inside; give the box itself the same frame so it
   does not sit in a form looking like a different application. */
input[type=file] {
  padding: 10px 14px; font-size: 14px;
  background-color: var(--lf-field);
  border: 1px dashed var(--lf-field-line);
  border-radius: 10px;
  width: 100%; min-height: var(--lf-tap);
  color: var(--lf-ink-2);
}
input[type=file]::file-selector-button {
  font: inherit; font-weight: 600; font-size: 13.5px;
  margin-right: 12px; padding: 7px 14px;
  color: var(--lf-ink); background: var(--lf-field-cap);
  border: 1px solid var(--lf-field-line); border-radius: 8px;
  cursor: pointer;
}
input[type=file]::file-selector-button:hover { background: var(--lf-surface-3); }

/* Checkboxes and radios drawn in the app's own blue, identical in both themes
   and every browser, instead of a grey system square on a dark card. */
input[type=checkbox], input[type=radio] {
  -webkit-appearance: none; appearance: none;
  display: inline-grid; place-content: center; flex: 0 0 auto;
  width: 20px; height: 20px; min-height: 0; margin: 0;
  vertical-align: -4px;
  border: 1.5px solid var(--lf-field-line);
  border-radius: 6px;
  background-color: var(--lf-field);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
input[type=radio] { border-radius: 50%; }
input[type=checkbox]:hover:not(:disabled), input[type=radio]:hover:not(:disabled) { border-color: var(--lf-brand); }
input[type=checkbox]:checked, input[type=checkbox]:indeterminate {
  border-color: var(--lf-brand); background-color: var(--lf-brand); background-image: var(--lf-i-tick);
}
input[type=checkbox]:indeterminate { background-image: var(--lf-i-dash); }
input[type=radio]:checked {
  border-color: var(--lf-brand);
  background-image: radial-gradient(circle, var(--lf-brand) 0 4.5px, transparent 5px);
  background-size: 100% 100%;
}
input[type=checkbox]:focus-visible { outline: 2px solid var(--lf-brand); outline-offset: 2px; border-radius: 6px; }
input[type=radio]:focus-visible { outline: 2px solid var(--lf-brand); outline-offset: 2px; border-radius: 50%; }
input[type=checkbox]:disabled, input[type=radio]:disabled {
  background-color: var(--lf-surface-3); border-color: var(--lf-border); cursor: not-allowed;
}
input[type=checkbox]:checked:disabled { background-color: var(--lf-brand); border-color: var(--lf-brand); opacity: .5; }

/* Money and rate fields: a fixed unit beside the figure, which lines up to the
   right as it does in every table. The group carries the focus ring, so the
   unit and the field light up as one control. */
.affix { display: flex; align-items: stretch; width: 100%; min-width: 0; border-radius: 10px; }
.affix > input { flex: 1 1 auto; min-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.affix > input.num { text-align: right; }
.affix-cap {
  display: grid; place-items: center; flex: 0 0 auto; min-width: 46px; padding: 0 12px;
  border: 1px solid var(--lf-field-line); border-right: 0; border-radius: 10px 0 0 10px;
  background: var(--lf-field-cap); color: var(--lf-ink-2);
  font-family: var(--lf-font-num); font-size: 15px; font-weight: 700;
  transition: border-color .12s ease, color .12s ease;
}
.affix.is-suffix > input { border-radius: 10px 0 0 10px; }
.affix.is-suffix > .affix-cap { order: 2; border-right: 1px solid var(--lf-field-line); border-left: 0; border-radius: 0 10px 10px 0; }
.affix:hover > .affix-cap { border-color: var(--lf-field-line-hover); }
.affix:hover > input:not(:focus):not(:disabled) { border-color: var(--lf-field-line-hover); }
.affix:focus-within { box-shadow: 0 0 0 3px var(--lf-brand-ring); }
.affix:focus-within > .affix-cap { border-color: var(--lf-brand); color: var(--lf-brand-2); }
.affix > input:focus { box-shadow: none; }
.affix > input[aria-invalid="true"] { padding-left: 14px; box-shadow: none; }
.affix:has(> input[aria-invalid="true"]) > .affix-cap { border-color: var(--lf-bad-fg); color: var(--lf-bad-fg); box-shadow: inset 4px 0 0 var(--lf-bad-fg); }

/* The row of buttons that ends a form. Separated by a rule so it reads as the
   end of the form rather than another field. */
.form-actions {
  display: flex; gap: var(--lf-sp-3); flex-wrap: wrap; align-items: center;
  padding-top: var(--lf-sp-4);
  border-top: 1px solid var(--lf-border);
}

/* Groups a set of related fields under a heading inside one card. */
.fieldset { display: grid; gap: var(--lf-sp-4); }
.fieldset + .fieldset { margin-top: var(--lf-sp-5); padding-top: var(--lf-sp-5); border-top: 1px solid var(--lf-border); }
.fieldset > h3 { margin: 0; color: var(--lf-ink); }

/* Money and ID inputs read as data, not prose. */
input.num { font-family: var(--lf-font-num); font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* --- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--lf-tap);
  padding: 11px 20px;
  font: inherit; font-weight: 600; font-size: 15px;
  color: var(--lf-brand-fg); background: var(--lf-brand);
  border: 1px solid transparent; border-radius: var(--lf-r-sm);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: var(--lf-shadow-1);
  transition: background .12s ease, box-shadow .12s ease, transform .06s ease;
}
.btn:hover { background: var(--lf-brand-2); color: var(--lf-brand-fg); box-shadow: var(--lf-shadow-2); }
/* A press that moves acknowledges the tap on a tablet, where there is no
   cursor to show the button reacting. */
.btn:active { transform: translateY(1px); box-shadow: var(--lf-shadow-1); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn:disabled:hover { background: var(--lf-brand); }
.btn.block { width: 100%; }
.btn.secondary {
  background: var(--lf-surface); color: var(--lf-ink-2); border-color: var(--lf-border-strong);
}
.btn.secondary:hover { background: var(--lf-surface-3); color: var(--lf-ink); border-color: var(--lf-muted); }
.btn.ghost { background: transparent; color: var(--lf-ink-2); box-shadow: none; }
.btn.ghost:hover { background: var(--lf-surface-3); box-shadow: none; }
.btn.danger { background: var(--lf-bad-fg); color: #fff; }
.btn.danger:hover { background: #8f1a15; color: #fff; }
.btn.sm { min-height: 36px; padding: 7px 14px; font-size: 13.5px; }

/* --- badges -------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--lf-r-full);
  font-size: 12px; font-weight: 600; line-height: 1.5;
  background: var(--lf-surface-3); color: var(--lf-ink-2);
}
.badge.ok   { background: var(--lf-ok-bg);   color: var(--lf-ok-fg); }
.badge.warn { background: var(--lf-warn-bg); color: var(--lf-warn-fg); }
.badge.bad  { background: var(--lf-bad-bg);  color: var(--lf-bad-fg); }
.badge.info { background: var(--lf-info-bg); color: var(--lf-info-fg); }

/* --- messages ------------------------------------------------------------ */
/* --- banners ------------------------------------------------------------- */
/* A left bar as well as a background tint, so the severity survives a
   greyscale print and a colour-blind reader. */
.banner {
  border-left: 3px solid currentColor;
  display: flex; gap: var(--lf-sp-3);
  padding: 12px 14px;
  border-radius: var(--lf-r-sm);
  font-size: 14px;
  margin-bottom: var(--lf-sp-4);
}
.banner.ok   { background: var(--lf-ok-bg);   color: var(--lf-ok-fg); }
.banner.warn { background: var(--lf-warn-bg); color: var(--lf-warn-fg); }
.banner.bad  { background: var(--lf-bad-bg);  color: var(--lf-bad-fg); }
.banner.info { background: var(--lf-info-bg); color: var(--lf-info-fg); }
.banner strong { font-weight: 650; }

/* --- tables -------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--lf-border); border-radius: var(--lf-r-md); }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--lf-surface); }
table.data th, table.data td {
  padding: 12px 14px; text-align: left;
  border-bottom: 1px solid var(--lf-border);
  /* Rows are read across, so cells align on their first line rather than
     centring — a cell with two lines of text used to drag its neighbours' text
     off the row's baseline. */
  vertical-align: top;
}
table.data th {
  background: var(--lf-surface-2);
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--lf-muted); white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
  border-bottom-color: var(--lf-border-strong);
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr { transition: background .1s ease; }
table.data tbody tr:hover { background: var(--lf-surface-2); }

/* Numbers right-aligned and monospaced so a column of amounts scans as a
   column. The header has to follow the cells or it floats off on its own. */
table.data td.num, table.data th.num {
  font-variant-numeric: tabular-nums; text-align: right;
}
table.data td.num { font-family: var(--lf-font-num); }

table.data tfoot td {
  background: var(--lf-surface-2);
  border-top: 2px solid var(--lf-border-strong);
  border-bottom: 0;
  font-weight: 650;
}

/* The scroll container gets the border and the corners; the table inside is
   flush to them, so a wide table never shows a seam at the rounded edge. */
.table-wrap { background: var(--lf-surface); }
.table-wrap table.data { border-radius: inherit; overflow: hidden; }

/* --- progress ------------------------------------------------------------ */
.progress {
  height: 10px;
  border-radius: var(--lf-r-full);
  background: var(--lf-surface-3);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--lf-brand);
  border-radius: var(--lf-r-full);
  transition: width .3s ease;
}

/* --- empty state --------------------------------------------------------- */
.empty { text-align: center; padding: var(--lf-sp-7) var(--lf-sp-4); color: var(--lf-muted); }
.empty h3 { color: var(--lf-ink-2); }

/* --- misc ---------------------------------------------------------------- */
.muted { color: var(--lf-muted); }
.small { font-size: 13px; }
.row { display: flex; align-items: center; gap: var(--lf-sp-3); flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack { display: grid; gap: var(--lf-sp-3); }
.divider { height: 1px; background: var(--lf-border); border: 0; margin: var(--lf-sp-5) 0; }
.footnote { margin-top: var(--lf-sp-5); text-align: center; color: var(--lf-muted); font-size: 12.5px; }

/* Visually hidden but read by screen readers. */
/* max-width as well as width: an input rule giving width:100% otherwise wins,
   and a hidden file picker stretched to the viewport scrolls the page sideways. */
.sr-only {
  position: absolute; width: 1px; height: 1px; max-width: 1px; max-height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- agent app ----------------------------------------------------------- */

/* The sync pill is the agent's one source of truth about whether their work has
   left the device. It is always visible and always says something specific —
   never just a spinner. */
.sync-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  min-height: 36px;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--lf-ok-fg); background: var(--lf-ok-bg);
  border: 0; border-radius: var(--lf-r-full);
  cursor: pointer; white-space: nowrap;
}
.sync-pill .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; flex: 0 0 8px;
}
.sync-pill.is-queued { color: var(--lf-warn-fg); background: var(--lf-warn-bg); }
.sync-pill.is-offline { color: var(--lf-bad-fg); background: var(--lf-bad-bg); }
.sync-pill.is-busy .dot { animation: lf-pulse 1s ease-in-out infinite; }

@keyframes lf-pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.client-card { padding: var(--lf-sp-4); box-shadow: var(--lf-shadow-1); }
.client-card + .client-card { margin-top: 0; }

/* Roomier controls throughout the field app: this is used one-handed, outdoors,
   often in a hurry. */
.agent-app .btn { min-height: var(--lf-tap); }
.agent-app input:not([type=checkbox]):not([type=radio]) { min-height: var(--lf-tap); }

/* The frame: banner across the top, the page, tabs along the bottom. */
.agent-app { background: var(--lf-bg); }
.agent-shell { min-height: 100vh; display: flex; flex-direction: column; }

/* Full width and loud, because "has my work left this tablet?" is the question
   an agent asks before they drive out of signal. The stripe along the bottom
   carries the state as well as the tint, so it survives glare on a screen. */
.sync-banner {
  position: sticky; top: 0; z-index: 25;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px;
  background: var(--lf-ok-bg); color: var(--lf-ok-fg);
  border-bottom: 2px solid currentColor;
}
.sync-banner .dot { flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; background: currentColor; }
.sync-banner .sync-copy { min-width: 0; }
.sync-banner strong { display: block; font-size: 16px; font-weight: 700; }
.sync-banner #sync-detail { display: block; font-size: 14px; color: var(--lf-ink-2); }
.sync-banner .btn { margin-left: auto; flex: 0 0 auto; }
.sync-banner.is-warn     { background: var(--lf-warn-bg); color: var(--lf-warn-fg); }
.sync-banner.is-bad      { background: var(--lf-bad-bg);  color: var(--lf-bad-fg); }
.sync-banner.is-info     { background: var(--lf-info-bg); color: var(--lf-info-fg); }
.sync-banner.is-checking { background: var(--lf-surface-3); color: var(--lf-muted); }
.sync-banner.is-busy .dot { animation: lf-pulse 1s ease-in-out infinite; }

.agent-main { flex: 1; padding: var(--lf-sp-5) 18px 120px; }
.agent-container { max-width: 1400px; margin: 0 auto; }

.agent-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--lf-sp-3); margin-bottom: 20px; }
.agent-head h1 { margin: 0 0 6px; font-size: 30px; font-weight: 750; letter-spacing: -.02em; }
.agent-head .sub { margin: 0; font-size: 17px; color: var(--lf-ink-2); }
.agent-tools { display: flex; align-items: center; gap: var(--lf-sp-2); }

.agent-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
.agent-stats .stat { padding: 16px 18px 18px; border-radius: 16px; box-shadow: var(--lf-shadow-2); }
.agent-stats .stat .label { min-height: 0; font-size: 14px; color: var(--lf-ink-2); }
.agent-stats .stat .value { margin-top: 14px; font-family: var(--lf-font-num); font-size: 26px; }
.agent-stats .stat .value.ok { color: var(--lf-ok-fg); }
.agent-stats .stat .value.warn { color: var(--lf-warn-fg); }

/* Two classes, so the phone rule that pads every .card cannot put padding back. */
.card.book { padding: 0; overflow: hidden; border-radius: 16px; box-shadow: var(--lf-shadow-2); }
.book-head { padding: 22px 18px 16px; }
.book-head h2 { margin: 0 0 4px; font-size: 22px; font-weight: 750; }
.book-head .sub { margin: 0 0 14px; font-size: 14px; color: var(--lf-muted); }
.book-list { list-style: none; margin: 0; padding: 0; }
.book-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--lf-border); }
.avatar {
  display: grid; place-items: center; flex: 0 0 44px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--lf-surface-3); color: var(--lf-ink-2); font-size: 16px; font-weight: 700;
}
.book-row .who { flex: 1; min-width: 0; }
.book-row .who strong { display: block; font-size: 17px; color: var(--lf-ink); }
.book-row .who span { display: block; font-size: 15px; color: var(--lf-muted); }
.book-row .badge { flex: 0 0 auto; }
.book-empty { padding: var(--lf-sp-6) 18px; border-top: 1px solid var(--lf-border); color: var(--lf-muted); text-align: center; }
.book-chips { margin-top: 12px; }
button.chip { font-family: inherit; line-height: inherit; cursor: pointer; }
.book-chips .chip { min-height: 44px; }
.chip[aria-pressed="true"] { background: var(--lf-brand); border-color: var(--lf-brand); color: var(--lf-brand-fg); }
.chip-count {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; margin-left: 8px; padding: 0 7px;
  border-radius: var(--lf-r-full); background: var(--lf-surface-3); color: var(--lf-ink-2);
  font-family: var(--lf-font-num); font-size: 13px; font-weight: 700; line-height: 1;
}
.chip-count:empty { display: none; }
.chip[aria-pressed="true"] .chip-count { background: var(--lf-surface); color: var(--lf-brand); }
.book-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 18px; border-top: 1px solid var(--lf-border); font-size: 14px; color: var(--lf-muted); }

/* Thumb-reachable, and labelled in words: an icon alone is a guessing game
   for somebody using the app for the first time on a client's doorstep. */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  background: var(--lf-surface); border-top: 1px solid var(--lf-border);
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 60px; padding: 6px 4px; border-radius: 12px;
  color: var(--lf-ink-2); font-size: 14px; font-weight: 650; text-decoration: none;
}
.tab:hover { background: var(--lf-surface-3); }
.tab-chip {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px;
  background: var(--lf-surface-3); color: var(--lf-muted);
  font-size: 10.5px; font-weight: 750; letter-spacing: .02em;
}
.tab[aria-current="page"] { background: var(--lf-brand-soft); color: var(--lf-brand-2); }
.tab[aria-current="page"] .tab-chip { background: var(--lf-brand); color: var(--lf-brand-fg); }
.tab-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px;
  border-radius: 999px; background: var(--lf-warn-bg); color: var(--lf-warn-fg);
  font-family: var(--lf-font-num); font-size: 12px; font-weight: 700;
}
.tab-count.is-bad { background: var(--lf-bad-bg); color: var(--lf-bad-fg); }

/* The capture wizard. */
.capture-steps { list-style: none; margin: 18px 0 20px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.capture-steps li {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 14px; font-weight: 650; color: var(--lf-muted);
}
.capture-steps li::before {
  content: ''; display: block; height: 7px; margin-bottom: 10px;
  border-radius: 999px; background: var(--lf-surface-3);
}
.capture-steps li.is-done::before,
.capture-steps li[aria-current="step"]::before { background: var(--lf-brand); }
.capture-steps li[aria-current="step"] { color: var(--lf-brand); }

.capture-card { padding: 24px 22px; border-radius: 16px; box-shadow: var(--lf-shadow-2); }
.capture-card + .capture-card { margin-top: 16px; }
.capture-card > h2 { margin: 0 0 4px; font-size: 20px; font-weight: 750; }
.capture-card > .card-sub { margin-bottom: var(--lf-sp-4); }
.agent-form { display: grid; gap: 18px; }
.agent-form .field > label { font-size: 16px; font-weight: 700; color: var(--lf-ink-2); }
.agent-form .hint { font-size: 14px; }
.agent-form input:not([type=checkbox]):not([type=radio]):not([type=file]),
.agent-form select {
  min-height: 56px; padding: 12px 16px;
  font-size: 18px;
}
.agent-form input, .agent-form select, .agent-form textarea { border-radius: 12px; }
/* Words in the words face, figures in the figures face: a name reads as a name,
   and an ID or phone number still lines up digit for digit. */
.agent-form input.num, .agent-form input[inputmode=numeric],
.agent-form input[inputmode=decimal], .agent-form input[type=tel] {
  font-family: var(--lf-font-num); font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.agent-form select { padding-right: 60px; }
.agent-form .affix { border-radius: 12px; }
.agent-form .affix > input { border-radius: 0 12px 12px 0; }
.agent-form .affix-cap { min-width: 52px; font-size: 17px; border-radius: 12px 0 0 12px; }
.agent-form input[aria-invalid="true"] ~ .hint { font-size: 14px; }
.agent-form .grid { gap: 18px; }
.money-row { display: grid; grid-template-columns: 1fr 150px; gap: 10px; }

.capture-actions { display: grid; grid-template-columns: auto 1fr; gap: 12px; margin-top: 20px; }
.capture-actions .btn { min-height: 56px; font-size: 17px; }
.capture-actions .btn.secondary { padding: 0 26px; }
.capture-error { margin-top: 16px; }

.choice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.choice {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--lf-border-strong); border-radius: 12px;
  background: var(--lf-surface); cursor: pointer;
}
.choice:has(input:checked) { border-color: var(--lf-brand); box-shadow: 0 0 0 2px var(--lf-brand-ring); }
.choice input { flex: 0 0 auto; }
.choice .who { flex: 1; min-width: 0; }
.choice strong { display: block; font-size: 17px; }
.choice span { display: block; font-size: 14px; color: var(--lf-muted); }

.doc-rows { list-style: none; margin: 0; padding: 0; }
.doc-rows > li { padding: 16px 0; border-bottom: 1px solid var(--lf-border); }
.doc-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.doc-head .who { flex: 1; min-width: 200px; }
.doc-head strong { display: block; font-size: 17px; }
.doc-head .note { display: block; font-size: 14px; color: var(--lf-muted); }
.doc-buttons { display: flex; gap: 8px; flex-wrap: wrap; }

/* One uploaded or waiting file: what it is, how big, and how far it has got.
   The bar is a real <progress> fed by the browser's upload events. */
.doc-files { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.doc-file {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--lf-surface-2); border: 1px solid var(--lf-border);
}
.doc-kind {
  display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 8px;
  background: var(--lf-brand-soft); color: var(--lf-brand-2);
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
}
.doc-body { flex: 1; min-width: 0; display: grid; gap: 6px; }
/* The size drops under the name when there is no room beside it. Squeezing the
   two onto one line on a phone cut "Photo 1" down to "P…". */
.doc-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 10px; row-gap: 2px; }
.doc-line strong { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; }
.doc-size { font-family: var(--lf-font-num); font-size: 13px; color: var(--lf-muted); }
progress.bar.doc-bar { height: 8px; }
.doc-stats { font-family: var(--lf-font-num); font-size: 13px; color: var(--lf-ink-2); }

.quote-figure {
  margin: 4px 0 2px; font-family: var(--lf-font-num); font-variant-numeric: tabular-nums;
  font-size: 40px; font-weight: 700; letter-spacing: -.02em; color: var(--lf-ink);
}
.queued-mark {
  display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 14px;
  border-radius: 50%; background: var(--lf-ok-bg); color: var(--lf-ok-fg);
}

/* The sync inbox: one card, one row per capture, the state on the left edge. */
.card.inbox { padding: 0; overflow: hidden; border-radius: 16px; box-shadow: var(--lf-shadow-2); }
.inbox-item { padding: 18px 22px; border-left: 5px solid var(--lf-border-strong); }
.inbox-item + .inbox-item { border-top: 1px solid var(--lf-border); }
.inbox-item.is-waiting, .inbox-item.is-repriced { border-left-color: var(--lf-warn-fg); }
.inbox-item.is-refused  { border-left-color: var(--lf-bad-fg); }
.inbox-item.is-uploaded { border-left-color: var(--lf-ok-fg); }
.inbox-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.inbox-item h3 { margin: 0; font-size: 18px; font-weight: 700; }
.inbox-meta { margin: 8px 0 0; font-family: var(--lf-font-num); font-size: 14px; color: var(--lf-muted); }
.inbox-say  { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--lf-ink-2); }
.inbox-item .offer-pair { margin-top: 14px; }
.offer-box.warn { background: var(--lf-warn-bg); }
.offer-box.warn .eyebrow, .offer-box.warn .fig { color: var(--lf-warn-fg); }
.inbox-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
/* Long labels wrap inside the button, as the design's phone layout does,
   rather than running off the edge of the card. */
.inbox-actions .btn { min-height: 52px; padding: 10px 14px; white-space: normal; text-align: center; line-height: 1.25; }
.inbox-actions .btn:only-child { grid-column: 1 / -1; }

/* Today's book rows open the client. */
a.book-row { color: inherit; text-decoration: none; }
a.book-row:hover { background: var(--lf-surface-2); }
a.book-row:focus-visible { outline: 2px solid var(--lf-brand); outline-offset: -2px; }

/* The client screen: what the office is waiting on, and the answer. */
.back-link {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px;
  font-size: 15px; font-weight: 650; color: var(--lf-brand); text-decoration: none;
}
.back-link:hover { text-decoration: underline; }
.capture-card.stripe-warn { border-left: 5px solid var(--lf-warn-fg); }
.capture-card.stripe-ok   { border-left: 5px solid var(--lf-ok-fg); }
.capture-card.stripe-bad  { border-left: 5px solid var(--lf-bad-fg); }
.capture-card > .eyebrow { margin-bottom: 6px; }
.capture-card .doc-rows > li:last-child { border-bottom: 0; padding-bottom: 0; }
.check-row { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; font-weight: 650; color: var(--lf-ink-2); cursor: pointer; }
.check-row input { flex: 0 0 auto; width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; }
.check-row small { display: block; margin-top: 2px; font-size: 14px; font-weight: 500; color: var(--lf-muted); }
.capture-actions.is-single { grid-template-columns: 1fr; }
.agent-form textarea { font-size: 17px; }

/* The office's own words, set apart from ours. pre-line keeps the line breaks
   the consultant typed without letting markup through. */
.ask-message {
  margin: var(--lf-sp-3) 0 var(--lf-sp-2); padding: 12px 16px;
  border-left: 3px solid var(--lf-border-strong); border-radius: 0 10px 10px 0;
  background: var(--lf-surface-2);
  font-size: 16px; line-height: 1.55; color: var(--lf-ink-2); white-space: pre-line; overflow-wrap: anywhere;
}
.doc-file.is-sent .doc-stats { color: var(--lf-ok-fg); }
.doc-file.is-failed { border-color: var(--lf-bad-fg); }
.doc-file.is-failed .doc-stats { color: var(--lf-bad-fg); font-family: var(--lf-font-ui); }

@media (max-width: 640px) {
  .agent-stats { grid-template-columns: 1fr 1fr; }
  .agent-head h1 { font-size: 26px; }
  .capture-steps li { font-size: 12.5px; }
  .money-row { grid-template-columns: 1fr 120px; }
  .inbox-item { padding: 16px 18px; }
}
@media (max-width: 420px) {
  .agent-tools .theme-toggle { display: none; }
}

/* --- theme toggle -------------------------------------------------------- */

.theme-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 6px 12px;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--lf-ink-2);
  background: var(--lf-surface-3);
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-r-full);
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.theme-toggle:hover { background: var(--lf-brand-soft); color: var(--lf-brand); border-color: var(--lf-brand); }
.theme-toggle svg { flex: 0 0 16px; }

/* The word is useful on a desktop and just noise on a phone, where the icon is
   unambiguous and the bar is already crowded. */
@media (max-width: 720px) {
  .theme-toggle .theme-label { display: none; }
  .theme-toggle { padding: 6px 9px; }
}

/* --- layout utilities ---------------------------------------------------- */

/* These exist because the Content-Security-Policy is `style-src 'self'` with no
   'unsafe-inline'. That blocks `style="..."` ATTRIBUTES, not just <style>
   blocks — so every inline style in a view was being dropped by the browser and
   the pages rendered with none of their spacing. It fails silently: the markup
   is right, the CSS is right, and the page still looks wrong.

   Adding 'unsafe-inline' would have fixed the symptom by giving up the property
   that makes the CSP worth having. These classes fix the cause. */

.mt-1 { margin-top: var(--lf-sp-1); }
.mt-2 { margin-top: var(--lf-sp-2); }
.mt-3 { margin-top: var(--lf-sp-3); }
.mt-4 { margin-top: var(--lf-sp-4); }
.mt-5 { margin-top: var(--lf-sp-5); }
.mt-6 { margin-top: var(--lf-sp-6); }
.mt-7 { margin-top: var(--lf-sp-7); }
.mt-tight { margin-top: 6px; }

.mb-1 { margin-bottom: var(--lf-sp-1); }
.mb-2 { margin-bottom: var(--lf-sp-2); }
.mb-3 { margin-bottom: var(--lf-sp-3); }
.mb-4 { margin-bottom: var(--lf-sp-4); }
.mb-5 { margin-bottom: var(--lf-sp-5); }
.mb-hair { margin-bottom: 2px; }

.m-0 { margin: 0; }
.mt-2-only { margin: var(--lf-sp-2) 0 0; }
.ml-auto { margin-left: auto; }
.ml-1 { margin-left: 6px; }
.ml-3 { margin-left: var(--lf-sp-3); }
.pt-0 { padding-top: 0; }

/* A short scale rather than one class per pixel value. Everything that was a
   one-off width lands on the nearest step; the intent was always "about this
   wide", never a specific number. */
.w-xs { max-width: 150px; }
.w-sm { max-width: 170px; }
.w-md { max-width: 240px; }
.w-lg { max-width: 300px; }
.w-xl { max-width: 340px; }
.w-auto { width: auto; }
.min-w-md { min-width: 140px; }
.min-w-lg { min-width: 220px; }
.grow { flex: 1; min-width: 220px; }
.span-all { grid-column: 1 / -1; }

.gap-xs { gap: 6px; }
.gap-sm { gap: 8px; }
.gap-md { gap: 10px; }
.gap-lg { gap: var(--lf-sp-5); }
.nowrap { flex-wrap: nowrap; }
.center-x { justify-content: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.text-right { text-align: right; }

.text-sm { font-size: 14px; }
.text-lg { font-size: 17px; }
.text-xl { font-size: 20px; }
.text-2xl { font-size: 22px; }
.text-bad { color: var(--lf-bad-fg); }
.semibold { font-weight: 600; }
.break-all { word-break: break-all; }
.dimmed { opacity: .55; }

/* A whole card is a link on the dashboards. */
.plain-link { text-decoration: none; color: inherit; }
.inline-form { display: inline; }

/* A control that should not stretch to the full width of a flex row. */
.btn-auto { width: auto; min-height: auto; }
.check-lg { width: 18px; height: 18px; }

.panel {
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-r-md);
  padding: var(--lf-sp-4);
  margin-bottom: var(--lf-sp-4);
}
.pad-surface { padding: var(--lf-sp-4); background: var(--lf-surface-2); }

/* The OTP box on the call screen: read aloud digit by digit, so it is spaced
   out far enough that nobody misreads a pair. */
.otp-input {
  max-width: 170px; font-size: 22px;
  letter-spacing: 6px; text-align: center;
}

/* --- progress ------------------------------------------------------------ */

/* A <progress> element rather than a div with an inline width, because the
   width is computed per row and a computed value cannot be a class. This is
   also the accessible answer: screen readers announce it as a progress bar
   with a value, which a styled div never does. */
progress.bar {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 10px; border: 0;
  border-radius: var(--lf-r-full);
  background: var(--lf-surface-3);
  overflow: hidden;
  display: block;
}
progress.bar::-webkit-progress-bar {
  background: var(--lf-surface-3);
  border-radius: var(--lf-r-full);
}
progress.bar::-webkit-progress-value {
  background: var(--lf-brand);
  border-radius: var(--lf-r-full);
  transition: width .3s ease;
}
progress.bar::-moz-progress-bar {
  background: var(--lf-brand);
  border-radius: var(--lf-r-full);
}

/* --- pagination ---------------------------------------------------------- */

/* Sits under a table, inside the same card. Always shows the range and the
   total, because "page 3 of 7" answers a different question from "showing
   51–75 of 168" and people want the second one. */
.pager {
  display: flex; align-items: center; gap: var(--lf-sp-4);
  flex-wrap: wrap;
  padding: var(--lf-sp-4) var(--lf-sp-1) 0;
  margin-top: var(--lf-sp-3);
  border-top: 1px solid var(--lf-border);
  font-size: 13.5px; color: var(--lf-muted);
}
.pager-summary { font-family: var(--lf-font-num); font-variant-numeric: tabular-nums; }
.pager-links { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.pager-links a,
.pager-links span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 10px;
  border: 1px solid var(--lf-border-strong); border-radius: var(--lf-r-sm);
  background: var(--lf-surface);
  font-family: var(--lf-font-num); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600;
  text-decoration: none; color: var(--lf-ink-2);
}
.pager-links a:hover { background: var(--lf-surface-3); color: var(--lf-ink); }
.pager-links .is-current { background: var(--lf-brand); border-color: var(--lf-brand); color: var(--lf-brand-fg); }
.pager-links .is-disabled { opacity: .35; }
.pager-links .pager-gap { min-width: 18px; padding: 0; border: 0; background: transparent; }

.pager-size { display: flex; gap: 6px; align-items: center; }
.pager-size a, .pager-size .is-current {
  padding: 3px 8px; border-radius: var(--lf-r-sm);
  text-decoration: none; color: var(--lf-ink-2); font-weight: 600;
}
.pager-size a:hover { background: var(--lf-surface-3); }
.pager-size .is-current { background: var(--lf-surface-3); color: var(--lf-ink); }

@media (max-width: 640px) {
  .pager { gap: var(--lf-sp-3); }
  .pager-links { margin-left: 0; width: 100%; justify-content: flex-start; }
  .pager-size { width: 100%; }
}

/* --- dashboard ----------------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.tile {
  display: grid; gap: 6px; align-content: start; min-width: 0;
  padding: 20px 20px 22px; border: 1px solid var(--lf-border); border-radius: 18px;
  background: var(--lf-surface); box-shadow: var(--lf-shadow-2);
  color: inherit; text-decoration: none;
}
.tile:hover { border-color: var(--lf-border-strong); }
.tile-label { font-size: 14.5px; font-weight: 700; color: var(--lf-ink-2); }
.tile-value {
  margin-top: 18px; font-family: var(--lf-font-num); font-variant-numeric: tabular-nums;
  font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: var(--lf-ink);
  overflow-wrap: anywhere;
}
.tile-value.bad  { color: var(--lf-bad-fg); }
.tile-value.warn { color: var(--lf-warn-fg); }
.tile-meta { font-size: 14.5px; color: var(--lf-muted); }

.dash-split { margin-bottom: 24px; }
.funnel { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.funnel a { display: grid; gap: 8px; color: inherit; text-decoration: none; }
.funnel-row { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; color: var(--lf-ink-2); }
.funnel-row strong { font-family: var(--lf-font-num); color: var(--lf-ink); }
progress.bar.funnel-bar { height: 10px; }

.buckets { list-style: none; margin: 8px 0 0; padding: 0; }
.buckets li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label fig";
  align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--lf-border);
}
.buckets li { grid-template-columns: 120px auto minmax(0, 1fr); grid-template-areas: none; }
.bucket-label { font-size: 16px; color: var(--lf-ink-2); }
.bucket-fig { justify-self: end; font-family: var(--lf-font-num); font-variant-numeric: tabular-nums; font-size: 16px; color: var(--lf-ink); white-space: nowrap; }
.count-dot {
  display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px;
  border-radius: var(--lf-r-full); background: var(--lf-surface-3); color: var(--lf-ink-2);
  font-family: var(--lf-font-num); font-size: 13px; font-weight: 700;
}
.count-dot.warn { background: var(--lf-warn-bg); color: var(--lf-warn-fg); }
.count-dot.bad  { background: var(--lf-bad-bg);  color: var(--lf-bad-fg); }

.panel-title.inline { justify-content: flex-start; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; }
.panel-title.inline .card-sub { margin: 0; }
.sync-rows { list-style: none; margin: 10px 0 0; padding: 0; }
.sync-rows li {
  display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(0, 1fr) auto auto;
  align-items: center; gap: 8px 16px; padding: 14px 0; border-bottom: 1px solid var(--lf-border);
}
.sync-name { font-size: 16px; color: var(--lf-ink); }
.sync-who  { font-size: 15px; color: var(--lf-muted); }
.sync-quiet { justify-self: end; font-family: var(--lf-font-num); font-size: 15px; color: var(--lf-ink-2); white-space: nowrap; }

@media (max-width: 1100px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tile-value { margin-top: 12px; }
  .buckets li { grid-template-columns: 110px auto minmax(0, 1fr); }
  .sync-rows li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sync-quiet { justify-self: start; }
  .sync-rows .badge { justify-self: start; }
}

/* --- list screens (queue, books) ----------------------------------------- */
.page-head.with-tools { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px;
  border: 1px solid var(--lf-border-strong); border-radius: var(--lf-r-full);
  background: var(--lf-surface); color: var(--lf-ink-2);
  font-size: 14.5px; font-weight: 650; text-decoration: none; white-space: nowrap;
}
.chip:hover { background: var(--lf-surface-3); color: var(--lf-ink); }
.chip[aria-current="true"] { background: var(--lf-brand); border-color: var(--lf-brand); color: var(--lf-brand-fg); }

.office .card.list-card { padding: 8px 22px 20px; border-radius: 18px; box-shadow: var(--lf-shadow-2); }
.table-scroll { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; font-size: 15px; }
table.list th {
  padding: 14px 12px 12px; text-align: left; white-space: nowrap;
  font-size: 13.5px; font-weight: 700; color: var(--lf-ink-2);
  border-bottom: 2px solid var(--lf-border-strong);
}
table.list td { padding: 14px 12px; border-bottom: 1px solid var(--lf-border); vertical-align: middle; color: var(--lf-ink); }
table.list th:first-child, table.list td:first-child { padding-left: 0; }
table.list th:last-child, table.list td:last-child { padding-right: 0; }
table.list .num { text-align: right; }
table.list td.num { font-family: var(--lf-font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.list tbody tr:hover { background: var(--lf-surface-2); }
table.list .muted-cell { color: var(--lf-ink-2); }
.ref { font-family: var(--lf-font-num); font-size: 14px; color: var(--lf-brand); text-decoration: none; white-space: nowrap; }
a.ref:hover { text-decoration: underline; }

.list-cards { display: none; list-style: none; margin: 0 -18px; padding: 0; }
.list-cards li + li { border-top: 1px solid var(--lf-border); }
.list-item { display: grid; gap: 6px; padding: 16px 18px; color: inherit; text-decoration: none; }
.list-item:hover { background: var(--lf-surface-2); }
.li-top, .li-mid { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.li-top strong { font-size: 17px; color: var(--lf-ink); }
.li-mid .fig { font-family: var(--lf-font-num); font-variant-numeric: tabular-nums; font-size: 15.5px; color: var(--lf-ink); white-space: nowrap; }
.li-meta { font-size: 14.5px; color: var(--lf-muted); }

/* The arrears worklist. Severity is the letter, the stripe and the tint; print
   keeps the first two. */
.office .card.panel.worklist-card { padding: 0 0 20px; overflow: hidden; }
.worklist-card > .pager { margin: 12px 24px 0; }
.worklist { list-style: none; margin: 0; padding: 0; }
.work-row {
  display: grid; align-items: center; gap: 4px 16px;
  grid-template-columns: 34px minmax(140px, 1.2fr) minmax(150px, 1fr) minmax(0, 1.6fr) auto;
  grid-template-areas: "sev name loan meta fig";
  padding: 16px 24px 16px 19px; border-left: 5px solid var(--lf-ink-2); border-bottom: 1px solid var(--lf-border);
}
.work-row.sev-a  { border-left-color: var(--lf-bad-fg); }
.work-row.sev-b, .work-row.sev-c { border-left-color: var(--lf-warn-fg); }
.work-row.sev-c0 { border-left-color: var(--lf-ink-2); }
.sev {
  grid-area: sev; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  border: 1.5px solid currentColor; font-size: 13px; font-weight: 800;
}
.sev-a .sev  { color: var(--lf-bad-fg);  background: var(--lf-bad-bg); }
.sev-b .sev, .sev-c .sev { color: var(--lf-warn-fg); background: var(--lf-warn-bg); }
.sev-c0 .sev { color: var(--lf-ink-2);   background: var(--lf-surface-3); }
.work-name { grid-area: name; font-size: 16.5px; color: var(--lf-ink); }
.work-loan { grid-area: loan; }
.work-meta { grid-area: meta; font-size: 15px; color: var(--lf-muted); }
.work-fig  { grid-area: fig; justify-self: end; font-family: var(--lf-font-num); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 700; color: var(--lf-ink); white-space: nowrap; }
.worklist-note { margin-top: 16px; }

@media (max-width: 900px) {
  .work-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-areas: "sev name name" ". loan fig" ". meta meta";
    padding: 16px 18px 16px 15px;
  }
  .worklist-card > .pager { margin: 12px 18px 0; }
}

@media print {
  .office-shell { display: block; }
  .office .side, .office-foot, .no-print, .worklist-card .pager-links, .pager-size { display: none !important; }
  .office .main { padding: 0; }
  .tile, .office .card.panel { box-shadow: none; border-color: #999; }
  .sev { background: transparent !important; color: #000 !important; border-color: #000; }
  .work-row { break-inside: avoid; }
  .work-row.sev-a { border-left: 5px solid #000; }
  .work-row.sev-b, .work-row.sev-c { border-left: 5px dashed #000; }
  .work-row.sev-c0 { border-left: 2px solid #000; }
  .tile-value, .work-fig { color: #000 !important; }
}

/* Products: one row per product, its range in figures, open loans and state. */
.office .card.panel.product-list-card { padding: 0; overflow: hidden; }
.product-list { list-style: none; margin: 0; padding: 0; }
.product-list li + li { border-top: 1px solid var(--lf-border); }
.product-row { display: flex; align-items: center; gap: 16px; padding: 18px 24px; color: inherit; text-decoration: none; }
.product-row:hover { background: var(--lf-surface-2); }
.product-who { flex: 1; min-width: 0; display: grid; gap: 4px; }
.product-who strong { font-size: 17px; color: var(--lf-ink); }
.product-meta { font-family: var(--lf-font-num); font-size: 13.5px; color: var(--lf-muted); }
.product-open { font-size: 15px; color: var(--lf-ink-2); white-space: nowrap; }

/* Confirmation call: three numbered steps in the order the call happens. */
.call-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.office .call-steps .card.panel { margin: 0; }
.step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.step-no {
  display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--lf-brand); color: var(--lf-brand-fg); font-size: 15px; font-weight: 750;
}
.step-head h2 { margin: 0; font-size: 22px; font-weight: 750; letter-spacing: -.015em; }
.call-name { margin: 6px 0 0; font-size: 30px; font-weight: 750; letter-spacing: -.02em; color: var(--lf-ink); }
.call-phone {
  display: inline-block; margin: 4px 0 14px;
  font-family: var(--lf-font-num); font-variant-numeric: tabular-nums; font-size: 32px; font-weight: 700;
  color: var(--lf-brand); text-decoration: none;
}
.call-phone:hover { text-decoration: underline; }
.call-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15.5px; color: var(--lf-ink-2); overflow-wrap: anywhere; }
.text-bad { color: var(--lf-bad-fg); }
.code-state { margin-bottom: 18px; padding: 14px 18px; border-left: 5px solid var(--lf-brand-2); border-radius: 12px; background: var(--lf-info-bg); }
.code-state strong { display: block; font-size: 17px; color: var(--lf-info-fg); }
.code-state p { margin: 4px 0 0; font-size: 15px; color: var(--lf-ink-2); }
.code-state.is-ok   { border-left-color: var(--lf-ok-fg);   background: var(--lf-ok-bg); }
.code-state.is-ok strong { color: var(--lf-ok-fg); }
.code-state.is-warn { border-left-color: var(--lf-warn-fg); background: var(--lf-warn-bg); }
.code-state.is-warn strong { color: var(--lf-warn-fg); }
.code-state.is-bad  { border-left-color: var(--lf-bad-fg);  background: var(--lf-bad-bg); }
.code-state.is-bad strong { color: var(--lf-bad-fg); }
.code-form { gap: 12px; }
/* One real field drawn as six boxes: paste works, and no script is needed to
   move between digits. Each character sits in a 2ch cell centred on a 1.6ch box. */
input.code-boxes {
  width: calc(12ch + 0.3ch); max-width: 100%; height: 76px; padding: 0 0 0 .3ch;
  font-family: var(--lf-font-num); font-size: 34px; font-weight: 700; letter-spacing: 1ch;
  color: var(--lf-ink); border: 0; border-radius: 0; box-shadow: none;
  background-color: transparent;
  background-image: repeating-linear-gradient(90deg, var(--lf-surface-3) 0 1.6ch, transparent 1.6ch 2ch);
}
input.code-boxes:focus { box-shadow: none; background-color: transparent;
  background-image: repeating-linear-gradient(90deg, var(--lf-brand-soft) 0 1.6ch, transparent 1.6ch 2ch); }
.code-attempts { margin: 0; text-align: left; }

/* New application. */
.apply-split { align-items: start; }
.static-field { min-height: var(--lf-tap); padding: 11px 14px; border: 1px solid var(--lf-border); border-radius: 10px; background: var(--lf-field-cap); font-family: var(--lf-font-num); color: var(--lf-ink); }
.quote-card .decision-actions { margin-top: 20px; }

/* Document reader. */
.doc-split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.doc-viewer {
  display: grid; place-items: center; align-content: center; gap: 16px; min-height: 460px;
  padding: 32px 24px; border: 1px solid var(--lf-border); border-radius: 18px; background: var(--lf-surface-3); text-align: center;
}
.doc-viewer img { max-width: 100%; max-height: 70vh; border-radius: 8px; background: #fff; box-shadow: var(--lf-shadow-2); }
.doc-viewer img.rot-90  { transform: rotate(90deg); }
.doc-viewer img.rot-180 { transform: rotate(180deg); }
.doc-viewer img.rot-270 { transform: rotate(270deg); }
.doc-viewer p { max-width: 460px; margin: 0; font-size: 16px; line-height: 1.5; color: var(--lf-ink-2); }
.doc-chip {
  display: grid; place-items: center; width: 76px; height: 76px; border: 1px solid var(--lf-border-strong); border-radius: 16px;
  background: var(--lf-surface); font-family: var(--lf-font-num); font-size: 15px; font-weight: 700; color: var(--lf-ink-2);
}
.doc-buttons-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.checks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.check-v {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px;
  padding: 14px 16px; border: 1px solid var(--lf-border); border-left: 5px solid var(--lf-ok-fg); border-radius: 12px;
}
.check-v strong { font-size: 16.5px; color: var(--lf-ink); }
.check-v .detail { grid-column: 1 / -1; font-size: 15px; color: var(--lf-ink-2); }

@media (max-width: 900px) {
  .call-steps, .doc-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .call-name { font-size: 26px; }
  .call-phone { font-size: 28px; }
  .doc-viewer { min-height: 340px; }
}

/* Operator screens. */
.list-card-head { padding: 24px 24px 8px; }
.list-card-head h2 { margin: 0 0 4px; font-size: 22px; font-weight: 750; letter-spacing: -.015em; }
.list-card-head .card-sub { margin: 0; }
.schema-list { list-style: none; margin: 0; padding: 0; }
.schema-list li { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; padding: 14px 24px; border-top: 1px solid var(--lf-border); }
.schema-no { font-family: var(--lf-font-num); font-size: 14.5px; color: var(--lf-muted); }
.schema-what { font-size: 16px; color: var(--lf-ink); }
.biz-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 20px; padding: 18px 24px; color: inherit; text-decoration: none; }
.biz-row:hover { background: var(--lf-surface-2); }
.biz-who { display: grid; gap: 4px; min-width: 0; }
.biz-who strong { font-size: 17px; color: var(--lf-ink); }
.biz-meta { font-size: 15px; color: var(--lf-muted); }
.biz-fig { font-family: var(--lf-font-num); font-variant-numeric: tabular-nums; font-size: 16px; color: var(--lf-ink-2); white-space: nowrap; }
.biz-row > .badge { justify-self: end; }
.tiles.tiles-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 12px; }
.tiles.tiles-5 .tile-value { overflow-wrap: anywhere; }
.narrow-panel { max-width: 640px; }
.office .card.panel.danger-panel { border-left: 5px solid var(--lf-bad-fg); }
.switch-list { display: grid; gap: 12px; }
.switch-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--lf-border); border-radius: 12px; cursor: pointer; }
.switch-row input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; }
.switch-row strong { display: block; font-size: 16px; color: var(--lf-ink); }
.switch-row small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--lf-muted); }

.kv.notes .v { font-family: var(--lf-font-ui); font-weight: 600; }
.badge.health-pill { min-height: 34px; padding: 6px 16px; font-size: 14.5px; white-space: nowrap; }
.rule-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.office .rule-grid > .card.panel.rule-card { margin: 0; padding: 20px 22px; border-left: 5px solid var(--lf-ok-fg); }
.office .rule-grid > .card.panel.rule-card.is-bad  { border-left-color: var(--lf-bad-fg); }
.office .rule-grid > .card.panel.rule-card.is-warn { border-left-color: var(--lf-warn-fg); }
.rule-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rule-no { font-family: var(--lf-font-num); font-size: 13.5px; color: var(--lf-muted); }
.office .card.panel.rule-card > .rule-title { margin: 12px 0 6px; padding: 0; font-size: 17px; font-weight: 750; letter-spacing: 0; line-height: 1.3; color: var(--lf-ink); }
.rule-detail { margin: 0; font-size: 15px; line-height: 1.45; color: var(--lf-ink-2); }
.rule-found { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--lf-border); display: grid; gap: 4px; font-family: var(--lf-font-num); font-size: 13.5px; color: var(--lf-bad-fg); overflow-wrap: anywhere; }
.rule-found .more { font-family: var(--lf-font-ui); color: var(--lf-muted); }
.health-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.office .health-cols > .card.panel { margin: 0; }
.kv .v.zero { color: var(--lf-muted); font-weight: 600; }
.health-h3 { margin: 22px 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--lf-muted); }
.health-feed { list-style: none; margin: 0; padding: 0; }
.health-feed li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--lf-border); font-size: 15px; color: var(--lf-ink); }
.health-feed .at { grid-row: span 2; font-family: var(--lf-font-num); font-size: 13.5px; color: var(--lf-muted); }
.health-feed .what { overflow-wrap: anywhere; }
.health-feed .who { font-size: 14px; color: var(--lf-muted); }
.kv .k.mono { font-family: var(--lf-font-num); font-size: 14.5px; }
.acct-list { list-style: none; margin: 0; padding: 0; }
.acct-row { display: grid; grid-template-columns: minmax(0, 1fr) 130px auto; align-items: center; gap: 12px 20px; padding: 16px 24px; border-bottom: 1px solid var(--lf-border); }
.acct-who { display: grid; gap: 2px; min-width: 0; }
.acct-who strong { font-size: 17px; color: var(--lf-ink); overflow-wrap: anywhere; }
.acct-meta { font-size: 15px; color: var(--lf-muted); }
.acct-meta a { color: inherit; text-decoration: none; }
.acct-meta a:hover { color: var(--lf-brand); text-decoration: underline; }
.acct-email { font-size: 14px; color: var(--lf-muted); overflow-wrap: anywhere; }
.acct-seen { font-family: var(--lf-font-num); font-size: 14.5px; color: var(--lf-muted); white-space: nowrap; text-align: right; }
.acct-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.acct-actions form { margin: 0; }
.acct-actions .btn { min-height: 40px; padding: 8px 16px; font-size: 14.5px; }
.acct-actions .btn[disabled] { opacity: .45; cursor: not-allowed; }
.product-list-card .acct-row:last-child { border-bottom: 0; }
.office .card.panel.approve-card .title-row h2 { margin: 0; font-size: 22px; font-weight: 750; letter-spacing: -.015em; }
.approve-card .table-panel.inset { margin: 18px 0 0; border: 1px solid var(--lf-border); border-radius: 12px; overflow-x: auto; }
.approve-card .table-panel.inset table.list { margin: 0; min-width: 560px; }
.approve-card table.list td .mono { white-space: nowrap; }
.office .card.panel.approve-card { margin-bottom: 16px; }
.change-up { color: var(--lf-bad-fg); font-weight: 700; white-space: nowrap; }
.change-down { color: var(--lf-ok-fg); font-weight: 700; white-space: nowrap; }
.change-new { color: var(--lf-warn-fg); font-weight: 700; white-space: nowrap; }
.change-same { color: var(--lf-muted); white-space: nowrap; }
.approve-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.approve-actions form { margin: 0; flex: 1 1 320px; display: flex; }
.approve-actions form .btn { flex: 1; }
.approve-actions > .btn { flex: 0 0 auto; }
.reject-reveal { margin-top: 16px; }
.decided-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; padding: 16px 24px; }
.rule-grid.gate-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.office .rule-grid > .card.panel.rule-card.is-off { border-left-color: var(--lf-border-strong); }
.rule-grid.gate-grid { align-items: stretch; }
.office .rule-grid.gate-grid > .card.panel.rule-card { display: flex; flex-direction: column; }
.gate-grid .rule-top { align-items: flex-start; }
.office .card.panel.rule-card .rule-top > .rule-title { margin: 0; }
.rule-detail + .gate-toggle { margin: auto 0 0; padding-top: 14px; }
.access-stack { display: grid; gap: 16px; align-content: start; }
.list-card-head.head-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; }
.inset-form { padding: 4px 24px 18px; }
.range-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; padding: 14px 24px; }
.range-what { display: grid; gap: 2px; min-width: 0; }
.range-what .mono { font-size: 15.5px; color: var(--lf-ink); overflow-wrap: anywhere; }
.range-note { font-size: 14.5px; color: var(--lf-muted); }
.empty-line { margin: 0; padding: 6px 24px 22px; color: var(--lf-muted); }
.log-list { list-style: none; margin: 0 24px; padding: 0; }
.log-list li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 12px 0 12px 14px; border-left: 4px solid transparent; border-bottom: 1px solid var(--lf-border); }
.log-list li.is-bad { border-left-color: var(--lf-bad-fg); }
.log-list li.is-warn { border-left-color: var(--lf-warn-fg); }
.log-list time { font-family: var(--lf-font-num); font-size: 13.5px; color: var(--lf-muted); padding-top: 2px; }
.log-text { font-size: 15.5px; color: var(--lf-ink); overflow-wrap: anywhere; }
.log-text small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--lf-muted); }
.product-list-card > .log-list + .pager { margin: 12px 24px 20px; }
.tiles.tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.office .card.panel.mt-4 { margin-top: 16px; }
.card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.office .card.panel .card-title-row h2 { margin: 0; font-size: 22px; font-weight: 750; letter-spacing: -.015em; }
.card-text { margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: var(--lf-ink-2); }
.divider-top { padding-top: 18px; border-top: 1px solid var(--lf-border); }
.parity-table { min-width: 640px; }
.parity-table td.vec { font-family: var(--lf-font-num); font-size: 14px; white-space: nowrap; }
.parity-table th:first-child, .parity-table td:first-child { padding-left: 24px; }
.parity-table th:last-child, .parity-table td:last-child { padding-right: 24px; }
.table-panel .table-wrap { overflow-x: auto; }
.parity-table tr.is-bad td { background: var(--lf-bad-bg); }
.table-panel > #p-pager .pager { margin: 12px 24px 20px; }
.gate-box { padding: 16px 18px; border-left: 5px solid var(--lf-bad-fg); border-radius: 12px; background: var(--lf-bad-bg); }
.office .card.panel .gate-box h2 { margin: 0 0 4px; font-size: 17px; font-weight: 750; color: var(--lf-bad-fg); }
.gate-box p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--lf-ink-2); }
.office .card.panel .title-row .plan-title { margin: 0; font-size: 22px; font-weight: 750; overflow-wrap: anywhere; }
.plan-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-family: var(--lf-font-num); font-size: 13.5px; color: var(--lf-ink-2); overflow-wrap: anywhere; }
.plan-list.is-warn { color: var(--lf-warn-fg); }
.banner.banner-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.banner.banner-action form { margin: 0; }
.acct-meta.mono-meta { font-family: var(--lf-font-num); font-size: 14px; overflow-wrap: anywhere; }
.leave-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* Public pages, rebuilt to the handover: a white bar, one centred column. */
body.pub { display: flex; flex-direction: column; min-height: 100vh; }
.pub-bar { background: var(--lf-surface); border-bottom: 1px solid var(--lf-border); }
.pub-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1180px; margin: 0 auto; padding: 14px 24px; min-height: 76px; }
.pub-brand { display: inline-flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 750; letter-spacing: -.01em; color: var(--lf-ink); text-decoration: none; }
.pub-brand-block { display: flex; justify-content: center; margin: 0 0 18px; }
.pub-mark { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--lf-brand); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.pub-step { font-size: 15px; color: var(--lf-muted); white-space: nowrap; }
.pub-main { flex: 1; padding: 48px 24px 56px; }
.pub-col { max-width: 620px; margin: 0 auto; }
.pub-col.wide { max-width: 680px; }
.pub-col.narrow { max-width: 440px; }
.pub-hero-title { margin: 0; font-size: 44px; line-height: 1.08; font-weight: 800; letter-spacing: -.028em; color: var(--lf-ink); }
.pub-lead { margin: 16px 0 0; font-size: 18px; line-height: 1.55; color: var(--lf-ink-2); }
.pub-cta { margin-top: 28px; }
.pub-cta .btn { min-height: 52px; padding: 12px 26px; font-size: 16px; }
.fact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; margin-top: 22px; }
.fact-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fact-card { padding: 18px 20px; background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: 14px; box-shadow: var(--lf-shadow-2); }
.fact-card strong { display: block; font-family: var(--lf-font-num); font-size: 21px; font-weight: 700; line-height: 1.25; color: var(--lf-ink); }
.fact-card span { display: block; margin-top: 8px; font-size: 14.5px; line-height: 1.45; color: var(--lf-ink-2); }
.pub-fine { margin: 24px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--lf-muted); }
.pub-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--lf-border); }
.lender-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.lender-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: 14px; color: inherit; text-decoration: none; }
.lender-row:hover { border-color: var(--lf-brand); }
.lender-who { display: grid; gap: 4px; min-width: 0; }
.lender-who strong { font-size: 17px; color: var(--lf-ink); }
.lender-who span { font-size: 14.5px; color: var(--lf-muted); }
.pub-foot { padding: 18px 24px 26px; }
.pub-foot-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; max-width: 1180px; margin: 0 auto; font-size: 13.5px; color: var(--lf-muted); }
.pub-foot-inner p { margin: 0; }
.pub-h1 { margin: 0; font-size: 34px; line-height: 1.15; font-weight: 800; letter-spacing: -.022em; color: var(--lf-ink); }
.pub-sub { margin: 10px 0 0; font-size: 17px; line-height: 1.5; color: var(--lf-ink-2); }
.pub-card { margin-top: 24px; padding: 26px; background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: 18px; box-shadow: var(--lf-shadow-2); }
.pub-card > .field + .field { margin-top: 20px; }
.pub-card .kv { margin-top: 12px; }
.pub-card .kv.notes .v { white-space: normal; overflow-wrap: anywhere; }
.pub-card-title { margin: 0; font-size: 20px; font-weight: 750; color: var(--lf-ink); }
.pub-card-h1 { margin: 0; font-size: 24px; font-weight: 750; letter-spacing: -.01em; color: var(--lf-ink); }
.pub-card-h1.mono-ref { font-family: var(--lf-font-num); font-size: 22px; }
.pub-note { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--lf-muted); }
.pub-text { margin: 14px 0 0; font-size: 16px; line-height: 1.55; color: var(--lf-ink-2); }
.pub-group-title { margin: 28px 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--lf-muted); }
.pub-card > .pub-group-title:first-child { margin-top: 0; }
.track-card, .auth-card { margin-top: 0; }
.track-card .form, .auth-card .form { margin-top: 18px; gap: 18px; }
.track-card .form .btn.block, .auth-card .form .btn.block, .auth-card .auth-cta { min-height: 50px; }
.auth-card .form .btn.secondary.block { margin-top: -6px; }
.auth-fine { text-align: center; }
.auth-fine.is-warn { color: var(--lf-warn-fg); font-weight: 600; }
.auth-signout { display: flex; justify-content: center; margin: 10px 0 0; }
.pub-col > form.form { gap: 20px; }
.pub-col > form.form > .pub-card { margin-top: 0; }
.pub-col > form.form > .funnel-actions { margin-top: 4px; }
.pub-col > .funnel-progress + .pub-h1 { margin-top: 0; }
.pub-col > .pub-sub + form.form, .pub-col > .banner + form.form { margin-top: 24px; }
.funnel-progress { list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.funnel-progress li { display: grid; gap: 10px; font-size: 14.5px; font-weight: 700; color: var(--lf-muted); }
.funnel-progress li::before { content: ''; height: 6px; border-radius: 999px; background: var(--lf-surface-3); }
.funnel-progress li.is-done { color: var(--lf-ink-2); }
.funnel-progress li.is-current { color: var(--lf-brand); }
.funnel-progress li.is-done::before, .funnel-progress li.is-current::before { background: var(--lf-brand); }
.funnel-actions { display: flex; gap: 14px; margin-top: 24px; }
.funnel-actions .btn { min-height: 54px; padding: 12px 22px; font-size: 16px; }
.funnel-actions .wide-action { flex: 1; }
.funnel-actions .back { order: -1; }
.funnel-actions .btn[disabled] { opacity: .5; cursor: not-allowed; }
.money-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 10px; }
.quote-live { border-left: 5px solid var(--lf-brand); }
.quote-label { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--lf-ink-2); }
.quote-figure { margin: 6px 0 0; font-family: var(--lf-font-num); font-size: 34px; font-weight: 750; letter-spacing: -.01em; color: var(--lf-ink); }
.ref-box { margin: 0 0 16px; padding: 18px; text-align: center; font-family: var(--lf-font-num); font-size: 26px; font-weight: 700; letter-spacing: .04em; color: var(--lf-ink); background: var(--lf-surface-2); border: 1px dashed var(--lf-border-strong); border-radius: 12px; overflow-wrap: anywhere; }
.next-steps { margin: 0; padding-left: 22px; display: grid; gap: 8px; font-size: 15.5px; line-height: 1.5; color: var(--lf-ink-2); }

@media (max-width: 640px) {
  .pub-bar-inner { padding: 12px 18px; min-height: 64px; }
  .pub-main { padding: 30px 18px 40px; }
  .pub-hero-title { font-size: 36px; }
  .pub-lead { font-size: 17px; }
  .fact-grid, .fact-grid.two { grid-template-columns: minmax(0, 1fr); }
  .pub-h1 { font-size: 30px; }
  .pub-card { padding: 22px 20px; }
  .funnel-progress { gap: 8px; }
  .funnel-progress li { font-size: 13px; }
  .money-row { grid-template-columns: minmax(0, 1fr) 128px; }
  .lender-row { flex-wrap: wrap; }
  .quote-figure { font-size: 30px; }
}
.leave-actions .btn:first-of-type { flex: 1 1 260px; }
@media (max-width: 1100px) {
  .tiles.tiles-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rule-grid, .rule-grid.gate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .health-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .rule-grid, .rule-grid.gate-grid { grid-template-columns: minmax(0, 1fr); }
  .tiles.tiles-3 { grid-template-columns: minmax(0, 1fr); }
  .table-panel > #p-pager .pager { margin: 12px 18px 18px; }
  .list-card-head.head-row { grid-template-columns: minmax(0, 1fr); }
  .list-card-head.head-row > .btn { justify-self: start; }
  .range-row { padding: 14px 18px; }
  .inset-form { padding: 4px 18px 18px; }
  .empty-line { padding: 6px 18px 20px; }
  .log-list { margin: 0 18px; }
  .log-list li { grid-template-columns: 78px minmax(0, 1fr); }
  .product-list-card > .log-list + .pager { margin: 12px 18px 18px; }
  .acct-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; padding: 18px; }
  .acct-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .decided-row { padding: 16px 18px; }
  .approve-actions > .btn { flex: 1 1 100%; }
  .acct-actions .btn { min-height: 46px; padding: 10px 18px; font-size: 15.5px; }
  .health-feed li { grid-template-columns: minmax(0, 1fr); }
  .health-feed .at { grid-row: auto; }
  .kv.notes li { display: block; }
  .kv.notes .k { display: block; font-size: 14.5px; color: var(--lf-muted); }
  .kv.notes .v { display: block; margin-top: 3px; text-align: left; }
}
@media (max-width: 640px) {
  .tiles.tiles-5 { grid-template-columns: minmax(0, 1fr); }
  .schema-list li { grid-template-columns: 140px minmax(0, 1fr); padding: 16px 18px; }
  .schema-list li .badge { grid-column: 1 / -1; justify-self: start; }
  .list-card-head { padding: 22px 18px 8px; }
  .biz-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; padding: 18px; }
  .biz-row > .badge { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }
}

/* Rate card editor. */
.rates-split { margin-bottom: 24px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.panel-title.padded { margin: 0 24px; }
.office .card.panel.gap-card { margin: 0 0 24px; border-left: 5px solid var(--lf-bad-fg); }
.versions-card { margin-top: 0; }
.product-row.is-current { background: var(--lf-brand-soft); }
.product-list-card > .pager { margin: 12px 24px 20px; }

/* Staff: one row per person, their role, a word on their account, and the one action. */
.staff-list { list-style: none; margin: 0; padding: 0; }
.staff-row {
  display: grid; align-items: center; gap: 8px 16px;
  grid-template-columns: minmax(180px, 1.6fr) minmax(120px, 1fr) minmax(120px, 1fr) auto minmax(110px, auto);
  padding: 18px 24px; border-bottom: 1px solid var(--lf-border);
}
.staff-row:last-child { border-bottom: 0; }
.staff-who { display: grid; gap: 2px; min-width: 0; }
.staff-who strong { font-size: 17px; color: var(--lf-ink); }
.staff-email { font-size: 14.5px; color: var(--lf-muted); overflow-wrap: anywhere; }
.staff-role { font-size: 15.5px; color: var(--lf-ink-2); }
.staff-note { font-size: 15px; color: var(--lf-muted); }
.staff-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; }
.staff-actions form { margin: 0; }

@media (max-width: 900px) {
  .rates-split { grid-template-columns: minmax(0, 1fr); }
  .staff-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who role" "note badge" "actions actions"; }
  .staff-who { grid-area: who; } .staff-role { grid-area: role; justify-self: end; }
  .staff-note { grid-area: note; } .staff-row > .badge { grid-area: badge; justify-self: end; }
  .staff-actions { grid-area: actions; justify-content: flex-start; }
}
@media (max-width: 640px) {
  .staff-row { padding: 16px 18px; }
  .panel-title.padded { margin: 0 18px; }
  .product-list-card > .pager { margin: 12px 18px 18px; }
}

/* Agents: devices as cards, each with its two consequences spelled out. */
/* Doubled up to outrank .fine, which is defined later and would take the margin away. */
.device-rule, .fine.device-rule { margin: -8px 0 22px; }
/* A name beside figures is words, not a figure. */
.kv .v.text { font-family: var(--lf-font-ui); font-weight: 650; }
.device-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin-bottom: 20px; }
.office .card.panel.device-card-v2 { margin: 0; }
.device-card-v2.is-revoked { border-left: 5px solid var(--lf-bad-fg); }
.device-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.device-actions .btn { display: grid; justify-items: start; align-content: start; gap: 4px; height: auto; min-height: 76px; padding: 12px 14px; white-space: normal; text-align: left; line-height: 1.25; }
.device-actions .btn small { font-size: 13px; font-weight: 500; line-height: 1.35; opacity: .9; }
.target-cell { min-width: 160px; }
.target-cell progress.bar { width: 100%; height: 8px; }
.target-edit[open] .target-form { position: absolute; right: 24px; z-index: 5; width: 260px; margin-top: 8px; padding: 16px;
  border: 1px solid var(--lf-border); border-radius: 12px; background: var(--lf-surface); box-shadow: var(--lf-shadow-3); text-align: left; }
.target-edit summary { list-style: none; }
.target-edit summary::-webkit-details-marker { display: none; }
.search-row.wide-row { max-width: 720px; }

/* Field activity: visits by place, busiest first. */
.cluster-list { list-style: none; margin: 14px 0 0; padding: 0; }
.cluster { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--lf-border); }
.cluster:last-child { border-bottom: 0; }
.cluster-count {
  display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: 10px;
  background: var(--lf-surface-3); font-family: var(--lf-font-num); font-size: 16px; font-weight: 700; color: var(--lf-ink);
}
.cluster.is-tight .cluster-count { background: var(--lf-warn-bg); color: var(--lf-warn-fg); }
/* Visits captured without a location fix: grouped, but visibly less certain. */
.cluster.is-nofix .cluster-count { background: var(--lf-surface-3); color: var(--lf-muted); }
.cluster.is-nofix .cluster-body strong { color: var(--lf-ink-2); }
.cluster-body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.cluster-body strong { font-size: 16px; color: var(--lf-ink); overflow-wrap: anywhere; }
.cluster-meta { font-size: 14.5px; color: var(--lf-ink-2); }
.cluster-times { font-family: var(--lf-font-num); font-size: 13px; color: var(--lf-muted); overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .product-row { flex-wrap: wrap; padding: 16px 18px; row-gap: 8px; }
  .product-who { flex-basis: 100%; }
  .device-grid { grid-template-columns: minmax(0, 1fr); }
  .device-actions { grid-template-columns: minmax(0, 1fr); }
  .target-edit[open] .target-form { right: 12px; width: min(260px, calc(100vw - 48px)); }
}

/* Page heads with actions beside the title: loan detail, and others to come. */
.head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.head-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.head-actions .btn { min-height: 52px; padding: 12px 22px; font-size: 16px; }
.meta-line.meta-ui { font-family: var(--lf-font-ui); font-size: 15px; }
.num-left { font-family: var(--lf-font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.search-row { display: flex; gap: 10px; max-width: 560px; margin: -10px 0 22px; }
.search-row input { flex: 1; min-width: 0; }
.chips-row { margin: -10px 0 22px; }
table.list td.actions { text-align: right; white-space: nowrap; }
.tiles.compact .tile-value { margin-top: 6px; }

/* A panel opened by a link to its id, drawn as a card of its own. */
.office .card.panel.reveal { margin: 0 0 24px; padding: 26px 24px 24px; background: var(--lf-surface); border-color: var(--lf-border); }
.office .card.panel.reveal.is-danger { border-color: var(--lf-bad-fg); }
.office .card.panel.reveal-panel { margin: 0 0 24px; }
.inline-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; align-items: end; }
.inline-form-grid .field.wide { grid-column: span 2; }
.inline-form-grid .form-actions { grid-column: 1 / -1; }
.kv.promises { margin-top: 8px; }

/* A table flush to its card's edges, with a tinted head, as the loan detail draws it. */
.office .card.panel.table-panel { padding: 26px 0 20px; overflow: hidden; }
/* As specific as the .panel > h2 rule, and later, so the heading keeps its inset. */
.office .card.panel.table-panel > h2, .office .card.panel.table-panel > .card-sub, .office .card.panel.table-panel > .pager,
.office .card.panel.table-panel > p, .office .card.panel.table-panel > .empty { margin-left: 24px; margin-right: 24px; }
/* A table with no heading above it starts at the card's top edge. */
.office .card.panel.table-panel.flush-top { padding-top: 0; }
table.list.tinted thead th { padding: 14px 12px; background: var(--lf-surface-3); border-bottom: 1px solid var(--lf-border); }
table.list.tinted th:first-child, table.list.tinted td:first-child { padding-left: 24px; }
table.list.tinted th:last-child, table.list.tinted td:last-child { padding-right: 24px; }
table.list tfoot td { padding: 12px; border-top: 2px solid var(--lf-border-strong); border-bottom: 0; font-weight: 700; color: var(--lf-ink-2); }
table.list tfoot td.num { color: var(--lf-ink); }
table.list td.num.neg { color: var(--lf-bad-fg); }
.cell-sub { display: block; margin-top: 2px; font-family: var(--lf-font-num); font-size: 12.5px; color: var(--lf-muted); white-space: normal; }
.tile-value.ok { color: var(--lf-ok-fg); }

@media (max-width: 640px) {
  .head-actions { width: 100%; }
  .head-actions .btn { flex: 1 1 auto; }
  .inline-form-grid .field.wide { grid-column: auto; }
  .search-row, .chips-row { margin-top: -6px; }
  .office .card.panel.table-panel { padding: 22px 0 18px; }
  .office .card.panel.table-panel > h2, .office .card.panel.table-panel > .card-sub, .office .card.panel.table-panel > .pager,
  .office .card.panel.table-panel > p, .office .card.panel.table-panel > .empty { margin-left: 18px; margin-right: 18px; }
  /* Four columns fit a phone when the date may wrap and the cells tighten, as
     the design's phone layout does; money keeps its line. */
  .table-panel table.list th, .table-panel table.list td { padding-left: 8px; padding-right: 8px; }
  /* Dates may wrap; money never does. */
  .table-panel table.list td.date-cell { white-space: normal; }
  table.list.tinted th:first-child, table.list.tinted td:first-child { padding-left: 18px; }
  table.list.tinted th:last-child, table.list.tinted td:last-child { padding-right: 18px; }
}

@media (max-width: 640px) {
  .office .card.list-card { padding: 0 18px 18px; }
  .queue-table, .list-card .table-scroll.stack-on-phone { display: none; }
  .list-cards { display: block; }
  .list-card .pager { margin-top: 0; }
}

/* --- health console ------------------------------------------------------ */

.poll-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--lf-r-full);
  font-size: 12.5px; font-weight: 650;
  color: var(--lf-ok-fg); background: var(--lf-ok-bg);
}
.poll-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.poll-pill.is-busy .dot { animation: lf-pulse 1s ease-in-out infinite; }
.poll-pill.is-bad { color: var(--lf-bad-fg); background: var(--lf-bad-bg); }
.poll-pill.is-paused { color: var(--lf-muted); background: var(--lf-surface-3); }

.rule-list { list-style: none; display: grid; gap: var(--lf-sp-2); }
.rule {
  padding: var(--lf-sp-3) var(--lf-sp-4);
  border: 1px solid var(--lf-border); border-left-width: 4px;
  border-radius: var(--lf-r-sm); background: var(--lf-surface-2);
}
/* Left edge carries the state as well as the badge, so scanning the list does
   not depend on reading every badge. */
.rule.is-ok     { border-left-color: var(--lf-ok-fg); }
.rule.is-warn   { border-left-color: var(--lf-warn-fg); }
.rule.is-danger { border-left-color: var(--lf-bad-fg); background: var(--lf-bad-bg); }

.rule-rows {
  list-style: none; margin-top: var(--lf-sp-3);
  display: grid; gap: 4px;
  font-family: var(--lf-font-num); font-size: 12.5px;
  max-height: 200px; overflow-y: auto;
}
.rule-rows li {
  padding: 4px 8px; background: var(--lf-surface);
  border-radius: 4px; word-break: break-word;
}

.feed { list-style: none; display: grid; gap: 6px; font-size: 13px; }
.feed li { padding: 5px 0; border-bottom: 1px solid var(--lf-border); }
.feed li:last-child { border-bottom: 0; }

/* --- sub-navigation ------------------------------------------------------ */

/* Views of one subject, not separate sections — so they sit under the page
   heading rather than competing for space in the main menu. */
.subtabs {
  display: flex; gap: var(--lf-sp-1); flex-wrap: wrap;
  border-bottom: 1px solid var(--lf-border);
  margin-bottom: var(--lf-sp-5);
}
.subtabs a {
  padding: 10px 16px; text-decoration: none;
  color: var(--lf-muted); font-size: 14px; font-weight: 600;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.subtabs a:hover { color: var(--lf-ink); }
/* Underline as well as colour: the current tab must be identifiable without
   relying on hue. */
.subtabs a[aria-current="page"] {
  color: var(--lf-brand); border-bottom-color: var(--lf-brand);
}

.device-card { box-shadow: var(--lf-shadow-1); }
.device-card + .device-card { margin-top: var(--lf-sp-4); }

.target-edit summary { list-style: none; cursor: pointer; display: inline-block; }
.target-edit summary::-webkit-details-marker { display: none; }
.target-edit[open] {
  position: relative; z-index: 2;
  background: var(--lf-surface); border: 1px solid var(--lf-border);
  border-radius: var(--lf-r-md); padding: var(--lf-sp-3);
  box-shadow: var(--lf-shadow-2);
}

/* --- two-factor ---------------------------------------------------------- */

/* A six-digit code is read off a phone and typed once. Wide tracking and a
   monospace face make a transposed digit visible before it is submitted. */
.code-input {
  font-family: var(--lf-font-num);
  font-size: 26px; font-weight: 650;
  letter-spacing: .35em; text-align: center;
  padding: 12px 10px;
}

.totp-setup {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--lf-sp-5); align-items: center;
}
/* The QR is drawn with an explicit white ground, so it needs a little padding
   of its own rather than sitting flush against a dark surface. */
.totp-qr {
  background: #fff; padding: var(--lf-sp-3);
  border-radius: var(--lf-r-md); border: 1px solid var(--lf-border);
  line-height: 0;
}
.totp-qr svg { display: block; }
.totp-secret {
  font-family: var(--lf-font-num); font-size: 16px; font-weight: 650;
  letter-spacing: .08em; word-break: break-all;
  background: var(--lf-surface-3); padding: var(--lf-sp-3);
  border-radius: var(--lf-r-sm); user-select: all;
}

/* Shown once, then never again - they are stored hashed. Made easy to select
   and copy in one go, because that is the only chance anyone gets. */
.recovery-codes {
  list-style: none; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--lf-sp-2); margin: var(--lf-sp-4) 0;
  user-select: all;
}
.recovery-codes li {
  font-family: var(--lf-font-num); font-size: 15px; font-weight: 650;
  letter-spacing: .05em; text-align: center;
  padding: 10px; background: var(--lf-surface-3);
  border: 1px solid var(--lf-border); border-radius: var(--lf-r-sm);
}

@media (max-width: 640px) {
  .totp-setup { grid-template-columns: 1fr; }
}

/* --- public site --------------------------------------------------------- */

/* The landing page and the apply funnel. Wider measure than the admin screens
   and a real hero, because this page has to persuade before it can inform —
   but the same tokens throughout, so a visitor who becomes a client does not
   feel handed off to a different product when they reach their profile. */

.container.narrow-mid { max-width: 760px; }

/* The public site sits on a softer ground than the admin screens, with a wash
   of the brand colour behind the top of the page. It is the same design system,
   dressed for someone who has not signed in yet. */
.public-page {
  background:
    radial-gradient(1100px 380px at 50% -140px, var(--lf-brand-soft), transparent 70%),
    var(--lf-bg);
  background-repeat: no-repeat;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: var(--lf-sp-7);
  align-items: center;
  padding: var(--lf-sp-6) 0 var(--lf-sp-5);
}
/* The text column. Given an explicit measure so a headline on a wide screen
   breaks where it was meant to rather than running the full width. */
.hero-copy { max-width: 34ch; }
.hero-copy h1, .hero-copy .lead, .hero-copy .row { max-width: none; }
.hero h1 {
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -.022em;
  margin-bottom: var(--lf-sp-4);
}
.hero .lead {
  font-size: 17px; line-height: 1.55;
  color: var(--lf-ink-2);
  margin-bottom: var(--lf-sp-5);
  max-width: 46ch;
}
.hero-points {
  list-style: none; display: grid; gap: var(--lf-sp-3);
  padding: var(--lf-sp-5);
  background: var(--lf-brand-soft);
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-r-lg);
}
.hero-points li { font-size: 14px; line-height: 1.5; color: var(--lf-ink-2); }
.hero-points strong { color: var(--lf-ink); }

.lender-card { display: block; text-decoration: none; color: inherit; }
.lender-card:hover { border-color: var(--lf-brand); box-shadow: var(--lf-shadow-2); }
.lender-card h3 { margin-bottom: var(--lf-sp-2); }
.lender-card .btn { margin-top: var(--lf-sp-3); }

.product-card { display: flex; flex-direction: column; gap: var(--lf-sp-2); }
.product-card h3 { margin: 0; }
.product-range {
  font-family: var(--lf-font-num); font-variant-numeric: tabular-nums;
  font-size: 19px; font-weight: 650; color: var(--lf-brand);
  margin: var(--lf-sp-2) 0 0;
}
.product-example {
  margin-top: auto; padding-top: var(--lf-sp-3);
  border-top: 1px solid var(--lf-border);
}
.product-card .btn { margin-top: var(--lf-sp-3); align-self: flex-start; }

/* The number a visitor came for. Given its own weight so the fee breakdown
   below reads as supporting detail rather than competing with it. */
.calc-headline {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--lf-sp-4); flex-wrap: wrap;
  padding: var(--lf-sp-4) var(--lf-sp-5);
  margin-bottom: var(--lf-sp-4);
  background: var(--lf-brand-soft);
  border-radius: var(--lf-r-md);
}
.calc-headline .label { font-size: 14px; font-weight: 600; color: var(--lf-ink-2); }
.calc-headline .value {
  font-family: var(--lf-font-num); font-variant-numeric: tabular-nums;
  font-size: 30px; font-weight: 700; letter-spacing: -.02em;
  color: var(--lf-brand);
}
.calc-amount-out {
  display: block; margin-top: 6px;
  font-family: var(--lf-font-num); font-variant-numeric: tabular-nums;
  font-size: 17px; font-weight: 650;
}
.calculator input[type="range"] { width: 100%; min-height: 32px; accent-color: var(--lf-brand); }
.calc-result .btn { margin-top: var(--lf-sp-4); }

.steps-list {
  list-style: none; counter-reset: step;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--lf-sp-4);
}
.steps-list li {
  counter-increment: step;
  padding: var(--lf-sp-5);
  background: var(--lf-surface); border: 1px solid var(--lf-border);
  border-radius: var(--lf-r-md);
}
.steps-list li::before {
  content: counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-bottom: var(--lf-sp-3);
  border-radius: 50%;
  background: var(--lf-brand); color: var(--lf-brand-fg);
  font-size: 14px; font-weight: 700;
}
.steps-list h3 { font-size: 16px; margin-bottom: 4px; }

.faq details {
  border: 1px solid var(--lf-border); border-radius: var(--lf-r-md);
  padding: var(--lf-sp-3) var(--lf-sp-4);
  background: var(--lf-surface-2);
}
.faq summary { cursor: pointer; font-weight: 600; font-size: 14.5px; }
.faq details[open] summary { margin-bottom: var(--lf-sp-2); }
.faq p { margin: 0; }

/* Where the applicant is in the funnel. Shown as text, not only as colour —
   a bare row of coloured dots tells a colour-blind visitor nothing. */
.wizard-steps {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--lf-sp-2);
  margin-bottom: var(--lf-sp-5);
}
.wizard-steps li {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--lf-r-full);
  font-size: 13px; font-weight: 600;
  color: var(--lf-muted); background: var(--lf-surface-3);
}
.wizard-steps .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--lf-border-strong); color: var(--lf-surface);
  font-size: 11px; font-weight: 700;
}
.wizard-steps .is-current { color: var(--lf-brand-fg); background: var(--lf-brand); }
.wizard-steps .is-current .n { background: rgba(255,255,255,.28); color: var(--lf-brand-fg); }
.wizard-steps .is-done { color: var(--lf-ok-fg); background: var(--lf-ok-bg); }
.wizard-steps .is-done .n { background: var(--lf-ok-fg); color: var(--lf-ok-bg); }

.consent { display: flex; gap: var(--lf-sp-3); align-items: flex-start; font-size: 14px; line-height: 1.55; }
.consent input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--lf-brand); }

/* The reference is the one thing the applicant must keep. Made selectable,
   monospaced and large enough to read back over a phone. */
.reference-box {
  font-family: var(--lf-font-num);
  font-size: 24px; font-weight: 700; letter-spacing: .06em;
  text-align: center; padding: var(--lf-sp-5);
  background: var(--lf-surface-3); border: 1px dashed var(--lf-border-strong);
  border-radius: var(--lf-r-md);
  user-select: all;
}

.public-foot {
  border-top: 1px solid var(--lf-border);
  padding: var(--lf-sp-5) var(--lf-sp-5) var(--lf-sp-7);
  margin-top: var(--lf-sp-7);
}
.public-foot .container { max-width: 1180px; margin: 0 auto; }
.public-foot a { color: var(--lf-muted); }

@media (max-width: 780px) {
  .hero { grid-template-columns: 1fr; gap: var(--lf-sp-5); padding-top: var(--lf-sp-4); }
}

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 640px) {
  .topbar { padding: 0 var(--lf-sp-4); height: auto; min-height: 56px; flex-wrap: wrap; padding-bottom: 8px; }
  .topbar nav { margin-left: 0; width: 100%; }
  .main { padding: var(--lf-sp-5) var(--lf-sp-4) var(--lf-sp-7); }
  .card { padding: var(--lf-sp-5); }
  h1 { font-size: 21px; }
}

/* --- office shell -------------------------------------------------------- */

/* The handover's frame for the office and the operator: a sidebar of chips and
   labels on a desktop, the chips alone on a tablet, a bar with a menu on a phone. */
.office-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.office-shell > * { min-width: 0; }

.side {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 20px 12px 16px;
  background: var(--lf-surface); border-right: 1px solid var(--lf-border);
}
.side-top { display: flex; align-items: center; gap: 12px; padding: 0 4px 22px; }
.side-brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }
.side-brand .mark { width: 34px; height: 34px; flex-basis: 34px; border-radius: 9px; font-size: 13px; letter-spacing: .02em; }
.side-brand-text { display: grid; min-width: 0; line-height: 1.3; }
.side-brand-text strong { font-size: 15px; font-weight: 700; color: var(--lf-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-brand-text small { font-size: 13px; color: var(--lf-muted); }
.side-bar-title, .menu-btn, .menu-close { display: none; }

.side-menu { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.side-menu nav { display: grid; gap: 4px; }
.side-menu nav a {
  display: flex; align-items: center; gap: 14px;
  min-height: 48px; padding: 6px 10px; border-radius: 10px;
  color: var(--lf-ink-2); font-size: 15.5px; font-weight: 500; text-decoration: none;
}
.side-menu nav a:hover { background: var(--lf-surface-3); color: var(--lf-ink); }
.side-menu nav a[aria-current="page"] { background: var(--lf-brand-soft); color: var(--lf-brand-2); font-weight: 700; }
.nav-chip {
  display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 8px;
  background: var(--lf-surface-3); color: var(--lf-ink-2);
  font-family: var(--lf-font-num); font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
}
.side-menu nav a[aria-current="page"] .nav-chip { background: var(--lf-surface); color: var(--lf-brand-2); }

.side-foot { margin-top: auto; padding: 16px 4px 0; border-top: 1px solid var(--lf-border); display: grid; gap: 10px; }
.side-user { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--lf-ink); text-decoration: none; }
.side-user-text { display: grid; min-width: 0; font-size: 14px; font-weight: 650; line-height: 1.3; }
.side-user-text small { font-size: 12.5px; font-weight: 500; color: var(--lf-muted); }
.side-user[aria-current="page"] .nav-chip { background: var(--lf-brand-soft); color: var(--lf-brand-2); }
.side-tools { display: flex; align-items: center; gap: 8px; }
.side-tools form { margin: 0; }
.side-signout { gap: 8px; }

.office-main { display: flex; flex-direction: column; min-height: 100vh; }
.office .main { flex: 1; padding: 36px 32px 56px; }
.office .container { max-width: 1320px; margin: 0; }
.office-foot { padding: 0 32px 24px; }
.office-foot .footnote { margin: 0; text-align: left; }
.office .acting-bar { top: 0; }
.office .page-head { margin-bottom: 28px; }
.office .page-head h1 { font-size: 32px; font-weight: 750; letter-spacing: -.02em; }

/* The operator's frame is dark in both themes, so stepping from the platform
   into a business is visible at a glance. */
.is-platform .side { background: #0e1726; border-right-color: #1c2a40; }
.is-platform .side-brand .mark { background: #e8bc4e; color: #1d1500; }
.is-platform .side-brand-text strong { color: #eef3fa; }
.is-platform .side-brand-text small, .is-platform .side-user-text small { color: #8ea2bb; }
.is-platform .side-menu nav a { color: #c3d0e0; }
.is-platform .side-menu nav a:hover { background: #17243a; color: #fff; }
.is-platform .side-menu nav a[aria-current="page"] { background: #1c2c46; color: #f3c75b; }
.is-platform .nav-chip { background: #17243a; color: #9fb2c9; }
.is-platform .side-menu nav a[aria-current="page"] .nav-chip { background: #0e1726; color: #f3c75b; }
.is-platform .side-foot { border-top-color: #1c2a40; }
.is-platform .side-user { color: #eef3fa; }
.is-platform .side-signout { color: #c3d0e0; }

/* A tablet keeps the rail and drops the words. */
@media (min-width: 641px) and (max-width: 1100px) {
  .office-shell { grid-template-columns: 80px minmax(0, 1fr); }
  .side { padding: 18px 10px 14px; align-items: center; }
  .side-top { padding: 0 0 20px; justify-content: center; }
  .side-brand-text, .side-user-text, .nav-label { display: none; }
  .side-menu { align-items: center; }
  .side-menu nav { justify-items: center; }
  .side-menu nav a { justify-content: center; width: 52px; padding: 6px; }
  .side-foot { padding: 14px 0 0; justify-items: center; }
  .side-tools { flex-direction: column; }
  .side-signout { padding: 7px 10px; }
  .office .main { padding: 28px 24px 48px; }
  .office-foot { padding: 0 24px 20px; }
}

/* A phone gets a bar, and the menu drops down from it. */
@media (max-width: 640px) {
  .office-shell { grid-template-columns: minmax(0, 1fr); }
  .side {
    height: auto; overflow: visible; z-index: 30;
    padding: 0; border-right: 0; border-bottom: 1px solid var(--lf-border);
  }
  .side-top { min-height: 64px; padding: 10px 14px; }
  .side-brand-text { display: none; }
  .side-bar-title {
    display: block; flex: 1; min-width: 0;
    font-size: 17px; font-weight: 700; color: var(--lf-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .is-platform .side-bar-title { color: #eef3fa; }
  .menu-btn {
    display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px;
    border: 1px solid var(--lf-border-strong); border-radius: 10px;
    background: var(--lf-surface); color: var(--lf-ink-2);
  }
  .side-menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    max-height: calc(100vh - 64px); overflow-y: auto;
    padding: 6px 14px 18px;
    background: var(--lf-surface); border-bottom: 1px solid var(--lf-border); box-shadow: var(--lf-shadow-3);
  }
  .is-platform .side-menu { background: #0e1726; border-bottom-color: #1c2a40; }
  .side-menu:target { display: flex; }
  .menu-close { display: block; align-self: flex-end; padding: 10px 4px; font-size: 14px; font-weight: 650; }
  .office .main { padding: 22px 16px 44px; }
  .office-foot { padding: 0 16px 20px; }
  .office .page-head h1 { font-size: 28px; }
}

/* --- notifications, recent updates and announcements --------------------- */

/* How many notifications are waiting, beside the menu item. It comes before the
   label in the markup and after it on screen. */
.side-menu nav a { position: relative; }
.nav-count {
  order: 2; margin-left: auto;
  display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px;
  border-radius: var(--lf-r-full); background: var(--lf-bad-fg); color: var(--lf-surface);
  font-family: var(--lf-font-num); font-size: 12px; font-weight: 700; line-height: 1;
}
.is-platform .nav-count { background: #f79490; color: #0e1726; }
.menu-dot { display: none; }

.feed { list-style: none; margin: 6px 0 0; padding: 0; }
.feed-item {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 36px; grid-template-areas: "dot body when x";
  align-items: start; gap: 4px 14px; padding: 14px 0; border-bottom: 1px solid var(--lf-border);
}
.feed-item:last-child { border-bottom: 0; }
.feed-dot  { grid-area: dot; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--lf-info-fg); }
.feed-body { grid-area: body; min-width: 0; }
.feed-when { grid-area: when; padding-top: 3px; font-family: var(--lf-font-num); font-size: 13.5px; color: var(--lf-muted); white-space: nowrap; }
.feed-clear { grid-area: x; margin: 0; }
.feed-item.is-ok   .feed-dot { background: var(--lf-ok-fg); }
.feed-item.is-warn .feed-dot { background: var(--lf-warn-fg); }
.feed-item.is-bad  .feed-dot { background: var(--lf-bad-fg); }
.feed-title { margin: 0; font-size: 16px; font-weight: 650; line-height: 1.35; color: var(--lf-ink); overflow-wrap: anywhere; }
.feed-title a { color: inherit; text-decoration: none; }
.feed-title a:hover { color: var(--lf-brand); text-decoration: underline; }
.feed-detail { margin: 3px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--lf-ink-2); overflow-wrap: anywhere; }
.feed-x {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--lf-muted); cursor: pointer;
}
.feed-x:hover { background: var(--lf-surface-3); border-color: var(--lf-border); color: var(--lf-ink); }
.office .card.panel.updates-card { margin-bottom: 24px; }
.updates-card .panel-title form, .head-actions form { margin: 0; }
.updates-more { display: inline-block; margin-top: 12px; font-size: 14.5px; font-weight: 650; color: var(--lf-brand); text-decoration: none; }
.updates-more:hover { text-decoration: underline; }

/* A manager's announcement, across the top of every page until dismissed. */
.team-notices { display: grid; gap: 10px; margin-bottom: 22px; }
.team-notices .banner { margin: 0; }
.notice-banner { align-items: flex-start; padding: 14px 16px; font-size: 15px; }
.notice-copy { display: grid; gap: 3px; min-width: 0; flex: 1 1 auto; }
.notice-copy strong { font-size: 16px; }
.notice-text { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.5; }
.notice-meta { font-size: 13px; opacity: .85; }
.notice-banner form, .notice-banner > .btn { flex: 0 0 auto; margin: 0; }
.office .card.panel.reveal.notice-new { margin-bottom: 24px; }
.notice-list { list-style: none; margin: 8px 0 0; padding: 0; }
.notice-row { padding: 18px 0; border-bottom: 1px solid var(--lf-border); }
.notice-row:last-child { border-bottom: 0; }
.notice-row .banner { margin: 0; }
.notice-row.is-down .notice-banner, .notice-row.is-ended .notice-banner { opacity: .6; }
.notice-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; }
.notice-facts { flex: 1 1 260px; font-size: 14.5px; color: var(--lf-muted); }
.notice-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.notice-actions form { margin: 0; }
.inline-form-grid .field.full { grid-column: 1 / -1; }

/* Credit and history, on every page about a client. */
.office .card.panel.client-record { margin-top: 24px; }
.office .split .card.panel.client-record, .office .tiles + .card.panel.client-record { margin-top: 0; }
.office .profile-gap, .office .card.panel.profile-gap { margin-top: 24px; }
.record-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 8px 36px; }
.record-grid > * { min-width: 0; }
.record-grid .kv { margin-top: 8px; }
.record-score { display: flex; align-items: center; gap: 16px; margin: 10px 0 4px; }
.record-band { margin: 0; font-size: 17px; font-weight: 700; color: var(--lf-ink); }
.record-delta { margin: 2px 0 0; font-size: 14.5px; color: var(--lf-muted); }
.record-delta.up { color: var(--lf-ok-fg); }
.record-delta.down { color: var(--lf-bad-fg); }
.record-off {
  margin: 10px 0 0; padding: 14px 16px; border: 1px dashed var(--lf-border-strong); border-radius: 12px;
  background: var(--lf-surface-2); font-size: 15px; line-height: 1.5; color: var(--lf-ink-2);
}
.record-factors { list-style: none; margin: 8px 0 0; padding: 0; }
.record-factors li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--lf-border); font-size: 14.5px; color: var(--lf-ink-2);
}
.record-factor-pts { text-align: right; font-family: var(--lf-font-num); font-size: 13.5px; color: var(--lf-muted); }
.record-sub { margin: 28px 0 2px; font-size: 18px; font-weight: 700; color: var(--lf-ink); }
.record-latest { margin-top: 20px; }
.record-rows .k { overflow-wrap: anywhere; }
.name-link { color: inherit; text-decoration: none; }
.name-link:hover { color: var(--lf-brand); text-decoration: underline; }
.portal .card + .health-strip, [data-documents] + .health-strip, [data-documents] + .card { margin-top: 20px; }
.statement-record { margin-top: 24px; }

@media (min-width: 641px) and (max-width: 1100px) {
  /* The rail has no labels, so the count sits on the chip. */
  .nav-count { position: absolute; top: 3px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; margin: 0; font-size: 10.5px; }
}
@media (max-width: 640px) {
  .menu-btn { position: relative; }
  .menu-dot {
    display: block; position: absolute; top: 8px; right: 8px; width: 9px; height: 9px;
    border-radius: 50%; background: var(--lf-bad-fg); box-shadow: 0 0 0 2px var(--lf-surface);
  }
  .feed-item { grid-template-columns: 10px minmax(0, 1fr) 36px; grid-template-areas: "dot body x" ". when x"; }
  .feed-when { padding-top: 0; }
  .notice-banner { flex-wrap: wrap; }
  .notice-banner form, .notice-banner > .btn { width: 100%; }
  .notice-banner form .btn { width: 100%; }
  .record-factors li { grid-template-columns: minmax(0, 1fr) auto; }
  .record-factor-pts { display: none; }
}

/* --- list tools: search, filters, sorting, saved views --------------------- */
.list-tools { display: grid; gap: 12px; margin: -6px 0 22px; }
.tools-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tools-form .tools-search { flex: 1 1 220px; min-width: 180px; max-width: 420px; }
.tools-form .tools-go { flex: none; }
/* A dropdown is as wide as its longest option unless told otherwise, so a sort
   order nobody has chosen can push a whole bar onto two lines. Where the
   browser can, each filter is sized to what it currently says instead. */
.tools-form select { flex: 0 1 auto; width: auto; min-width: 120px; max-width: 280px; field-sizing: content; }
/* With a mouse on a wide screen, filter bars run a little shorter so a search
   and its filters sit on one line; touch screens keep the full target. */
@media (min-width: 1101px) and (pointer: fine) {
  .tools-form .tools-search { flex-basis: 200px; }
  .tools-form input, .tools-form select, .tools-form .btn { min-height: 42px; padding-top: 8px; padding-bottom: 8px; }
  .tools-form select {
    padding-left: 12px; padding-right: 52px;
    background-size: 12px 8px, 1px 100%, 40px 100%;
    background-position: right 14px center, right 40px top, right top;
  }
  .tools-form .tools-go { padding-left: 16px; padding-right: 16px; }
}
.tools-dates { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--lf-muted); }
.tools-dates input { width: auto; }
.tools-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 6px 4px 14px;
  border-radius: var(--lf-r-full); background: var(--lf-brand-soft); color: var(--lf-brand-2);
  font-size: 14px; font-weight: 650; text-decoration: none;
}
.pill:hover { background: var(--lf-surface-3); color: var(--lf-ink); }
.pill-x { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--lf-surface); color: var(--lf-ink-2); font-size: 15px; line-height: 1; }
.pill-clear { font-size: 14px; font-weight: 650; color: var(--lf-brand); }
.tools-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.tools-save { position: relative; }
.tools-save > summary { list-style: none; }
.tools-save > summary::-webkit-details-marker { display: none; }
.tools-save-form {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; display: grid; gap: 8px; width: 280px; padding: 16px;
  border: 1px solid var(--lf-border); border-radius: 12px; background: var(--lf-surface); box-shadow: var(--lf-shadow-3);
}
.tools-save-form label { font-size: 14px; font-weight: 650; color: var(--lf-ink-2); }
.saved-views { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.saved-views ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.saved-label { font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--lf-muted); }
.saved-view { display: inline-flex; align-items: stretch; }
.saved-view .chip { min-height: 34px; padding: 4px 12px; border-radius: var(--lf-r-full) 0 0 var(--lf-r-full); }
.saved-del { display: flex; margin: 0; }
.saved-x {
  display: grid; place-items: center; width: 32px; padding: 0; cursor: pointer;
  border: 1px solid var(--lf-border-strong); border-left: 0; border-radius: 0 var(--lf-r-full) var(--lf-r-full) 0;
  background: var(--lf-surface); color: var(--lf-muted); font-size: 16px;
}
.saved-x:hover { background: var(--lf-bad-bg); color: var(--lf-bad-fg); }

table.list th[aria-sort] .sort { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
table.list th[aria-sort] .sort:hover { color: var(--lf-brand); }
.sort-dir { font-size: 12px; color: var(--lf-muted); }
table.list th[aria-sort] .sort.is-on { color: var(--lf-ink); }
.sort.is-on .sort-dir { color: var(--lf-brand); }
tr[data-href] { cursor: pointer; }

/* Paging additions: a page box for long lists, and "Show more" for short ones. */
.pager-links .pager-compact { display: none; min-width: 0; padding: 0 8px; border: 0; background: transparent; font-weight: 650; color: var(--lf-ink-2); }
.pager-jump { display: flex; align-items: center; gap: 6px; margin: 0; }
.pager-jump label { font-size: 13.5px; color: var(--lf-muted); white-space: nowrap; }
.pager-jump input { width: 80px; min-height: 36px; padding: 4px 8px; }
.pager-more { justify-content: space-between; }
.pager-more .pager-more-link { min-height: 44px; }

/* --- collapsible sections ------------------------------------------------- */
/* The heading, a line under it, and the chevron beside both. */
details.fold > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 12px; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary > :not(.fold-chev) { grid-column: 1; min-width: 0; }
details.fold > summary > .fold-chev { grid-column: 2; grid-row: 1 / span 2; }
.office details.fold > summary h2 { margin: 0; font-size: 22px; font-weight: 750; letter-spacing: -.015em; }
.portal details.fold > summary h2 { margin: 0; font-size: 22px; font-weight: 750; letter-spacing: -.015em; }
.portal details.fold > summary h3 { margin: 0; }
.fold-sub { font-size: 15px; color: var(--lf-muted); overflow-wrap: anywhere; }
.fold-chev {
  display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px;
  border: 1px solid var(--lf-border); border-radius: 10px; background: var(--lf-surface); color: var(--lf-ink-2);
}
.fold-chev::before {
  content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
details.fold[open] > summary .fold-chev::before { transform: translateY(2px) rotate(-135deg); }
details.fold > summary:hover .fold-chev { background: var(--lf-surface-3); color: var(--lf-ink); }
details.fold > summary:focus-visible { outline: 2px solid var(--lf-brand); outline-offset: 4px; border-radius: 8px; }
.fold-body { margin-top: 14px; }
.office .card.panel.table-panel > summary { margin: 0 24px; }
.office .card.panel.table-panel .fold-body > .card-sub,
.office .card.panel.table-panel .fold-body > .pager,
.office .card.panel.table-panel .fold-body > p,
.office .card.panel.table-panel .fold-body > .empty { margin-left: 24px; margin-right: 24px; }
/* A form behind an action button: out of the way until the button, a link to
   it, or its own heading opens it. */
details.form-fold:not([open]):not(:target) { display: none; }
.office details.card.panel.form-fold { margin: 0 0 24px; }
details.form-fold > summary h2, details.form-fold > summary h3 { margin: 0; }
details.form-fold .reveal-body { margin-top: 12px; }
.decision-card details.form-fold { margin-top: 18px; padding: 18px; border: 1px solid var(--lf-border); border-radius: 12px; background: var(--lf-surface-2); }
.decision-card details.form-fold.is-danger { border-color: var(--lf-bad-fg); }
.decision-card details.form-fold > summary h3 { font-size: 17px; }
.office details.card.panel.form-fold.is-danger { border-color: var(--lf-bad-fg); }
.record-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.record-head .card-sub { margin: 0; }

/* --- stacked tables, compact tiles and sticky parts on small screens ------- */
@media (min-width: 1101px) {
  .office .card.panel.has-sticky, .office .card.list-card.has-sticky { overflow: visible; }
  .table-scroll.sticky-head { overflow: visible; }
  .sticky-head table.list thead th { position: sticky; top: 0; z-index: 2; background: var(--lf-surface); }
  .sticky-head table.list.tinted thead th { background: var(--lf-surface-3); }
}
/* .stack is also the grid utility for spacing blocks; a table that stacks on a
   phone must stay a table everywhere wider. */
table.list.stack { display: table; }
.action-bar, .action-bar-spacer { display: none; }

@media (max-width: 640px) {
  .tiles, .tiles.tiles-3, .tiles.tiles-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { padding: 14px 14px 16px; border-radius: 14px; }
  .tile-label { font-size: 13px; }
  .tile-value { margin-top: 8px; font-size: 20px; }
  .tile-meta { font-size: 12.5px; }

  table.list.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.list.stack, table.list.stack tbody, table.list.stack tfoot, table.list.stack tr { display: block; width: 100%; }
  table.list.stack tr { padding: 10px 18px; border-bottom: 1px solid var(--lf-border); }
  table.list.stack tbody tr:hover { background: transparent; }
  table.list.stack td, table.list.stack tfoot td { display: block; overflow: hidden; padding: 5px 0; border: 0; text-align: right; white-space: normal; }
  table.list.stack td:first-child, table.list.stack td:last-child { padding-left: 0; padding-right: 0; }
  table.list.stack td::before {
    content: attr(data-label); float: left; margin-right: 12px;
    font-family: var(--lf-font-ui); font-size: 13.5px; font-weight: 600; color: var(--lf-muted); text-align: left;
  }
  table.list.stack td:not([data-label])::before { content: none; }
  table.list.stack td.actions { text-align: left; }
  table.list.stack .cell-sub { text-align: right; }
  .list-card table.list.stack tr, .client-record table.list.stack tr { padding-left: 0; padding-right: 0; }

  .action-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--lf-surface); border-top: 1px solid var(--lf-border); box-shadow: var(--lf-shadow-3);
  }
  .action-bar .btn { flex: 1 1 0; min-height: 50px; padding: 10px 12px; }
  .action-bar-spacer { display: block; height: 80px; }

  .pager-links a:not([rel]), .pager-links .is-current, .pager-links .pager-gap { display: none; }
  .pager-links .pager-compact { display: inline-flex; }
  .pager-links { justify-content: space-between; }
  .pager-jump { width: 100%; }
  .pager-more .pager-more-link { width: 100%; }

  .tools-form .tools-search { flex: 1 1 200px; min-width: 0; max-width: none; }
  .tools-form select { flex: 1 1 140px; max-width: none; }
  .tools-actions { margin-left: 0; }
  .tools-save-form { left: 0; right: auto; }
}

/* --- breadcrumbs ---------------------------------------------------------- */
.crumbs { margin: -8px 0 14px; font-size: 14.5px; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 0; list-style: none; }
.crumbs li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--lf-muted); }
.crumbs li + li::before { content: '›'; color: var(--lf-muted); }
.crumbs a { color: var(--lf-brand); font-weight: 600; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumb-note { font-weight: 500; color: var(--lf-muted); }
.crumbs li[aria-current="page"] { color: var(--lf-ink-2); font-weight: 600; overflow-wrap: anywhere; }

/* --- search --------------------------------------------------------------- */
.side-search { position: relative; margin: 0 4px 14px; }
.side-search input { width: 100%; min-height: 42px; padding: 8px 34px 8px 36px; font-size: 15px; border-radius: 10px; background-image: none; }
.side-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--lf-muted); pointer-events: none; }
.side-kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  min-width: 20px; padding: 0 5px; border: 1px solid var(--lf-border-strong); border-radius: 5px;
  font-family: var(--lf-font-num); font-size: 12px; line-height: 18px; text-align: center; color: var(--lf-muted);
}
.side-search input:focus ~ .side-kbd, .side-search input:not(:placeholder-shown) ~ .side-kbd { display: none; }
.side-search-rail { display: none; }
.is-platform .side-search input { background: #17243a; border-color: #2a3b56; color: #eef3fa; }
.is-platform .side-search svg, .is-platform .side-kbd { color: #8ea2bb; border-color: #2a3b56; }
@media (min-width: 641px) and (max-width: 1100px) {
  .side-search { display: none; }
  .side-search-rail {
    display: grid; place-items: center; width: 52px; height: 48px; margin: 0 0 10px; border-radius: 10px;
    color: var(--lf-ink-2); text-decoration: none;
  }
  .side-search-rail:hover { background: var(--lf-surface-3); color: var(--lf-ink); }
  .is-platform .side-search-rail { color: #c3d0e0; }
  .is-platform .side-search-rail:hover { background: #17243a; color: #fff; }
}
@media (max-width: 640px) {
  .side-search { margin: 6px 0 12px; }
  .side-kbd { display: none; }
}
.search-page-form { display: flex; gap: 10px; max-width: 720px; margin: -6px 0 24px; }
.search-page-form input { flex: 1; min-width: 0; }
.search-groups { display: grid; gap: 24px; }
.search-hits { list-style: none; margin: 6px 0 0; padding: 0; }
.search-hits li + li { border-top: 1px solid var(--lf-border); }
.search-hit { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 16px; padding: 14px 0; color: inherit; text-decoration: none; }
.search-hit strong { font-size: 16px; color: var(--lf-ink); overflow-wrap: anywhere; }
.search-hit .hit-meta { grid-column: 1; font-size: 14.5px; color: var(--lf-muted); overflow-wrap: anywhere; }
.search-hit .badge { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
.search-hit:hover strong { color: var(--lf-brand); }
.search-more { display: inline-block; margin-top: 12px; font-size: 14.5px; font-weight: 650; color: var(--lf-brand); }

/* The security log's tools sit inside its card, lined up with its entries. */
.log-tools { padding: 0 24px; }
.log-tools .list-tools { margin: 6px 0 10px; }

/* --- bulk actions --------------------------------------------------------- */
.office .card.panel.table-panel > .bulk-bar { margin: 0 24px; }
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 0; border-bottom: 1px solid var(--lf-border); }
.bulk-bar form { margin: 0; }
.bulk-all { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 650; color: var(--lf-ink-2); }
.bulk-all input, .row-check { width: 18px; height: 18px; accent-color: var(--lf-brand); }
.feed-item.has-check { grid-template-columns: 22px 10px minmax(0, 1fr) auto 36px; grid-template-areas: "check dot body when x"; }
.feed-check { grid-area: check; margin-top: 4px; }
.bulk-assign { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bulk-assign select { width: auto; min-width: 200px; }
@media (max-width: 640px) {
  .feed-item.has-check { grid-template-columns: 22px 10px minmax(0, 1fr) 36px; grid-template-areas: "check dot body x" ". . when x"; }
  .bulk-assign, .bulk-assign select { width: 100%; }
}

/* --- decision panel ------------------------------------------------------ */
.title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.title-row h1 { margin: 0; }
.meta-line { margin: 10px 0 0; font-family: var(--lf-font-num); font-size: 14.5px; color: var(--lf-muted); overflow-wrap: anywhere; }

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.split > .col { display: grid; gap: 24px; min-width: 0; }
.office .card.panel { margin: 0; padding: 26px 24px 24px; border-radius: 18px; box-shadow: var(--lf-shadow-2); }
.panel > h2, .panel-title h2 { margin: 0 0 6px; font-size: 22px; font-weight: 750; letter-spacing: -.015em; }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel .card-sub { font-size: 15px; }
.panel .kv { margin-top: 12px; }
.panel .kv .k, .panel .kv .v { font-size: 15.5px; }

table.measures { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 15.5px; }
table.measures th {
  padding: 0 0 10px; text-align: left; font-size: 14.5px; font-weight: 700; color: var(--lf-ink-2);
  border-bottom: 2px solid var(--lf-border-strong);
}
table.measures td { padding: 14px 0; border-bottom: 1px solid var(--lf-border); vertical-align: top; color: var(--lf-ink-2); }
table.measures th + th, table.measures td + td { padding-left: 14px; }
table.measures .num { text-align: right; }
table.measures td.num {
  font-family: var(--lf-font-num); font-variant-numeric: tabular-nums;
  font-weight: 700; color: var(--lf-ink);
}
/* The figure keeps its line and the measure's words wrap around it, as the
   design's phone layout does. A rand amount broken after the R is misread. */
table.measures td.num { white-space: nowrap; }
table.measures td.num.limit { font-weight: 400; color: var(--lf-muted); white-space: normal; }
table.measures td.num.bad  { color: var(--lf-bad-fg); }
table.measures td.num.warn { color: var(--lf-warn-fg); }
table.measures td.num.ok   { color: var(--lf-ok-fg); }

.well {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 22px; padding: 16px 22px; border-radius: 14px; background: var(--lf-surface-3);
}
.well span { font-weight: 700; color: var(--lf-ink-2); }
.well strong { font-family: var(--lf-font-num); font-variant-numeric: tabular-nums; font-size: 22px; color: var(--lf-ink); white-space: nowrap; }
.well.bad strong { color: var(--lf-bad-fg); }
.fine { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--lf-muted); }

.flag { margin-top: 16px; padding: 16px 18px; border: 1px solid var(--lf-border); border-left: 5px solid var(--lf-ink-2); border-radius: 12px; }
.flag.block { border-left-color: var(--lf-bad-fg); }
.flag.warn  { border-left-color: var(--lf-warn-fg); }
.flag.is-cleared { border-left-color: var(--lf-border-strong); }
.flag-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 6px !important; font-size: 17px; font-weight: 700; color: var(--lf-ink); }
.flag p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--lf-ink-2); }
.flag .flag-cleared { margin-top: 10px; font-size: 14px; color: var(--lf-muted); }
.flag-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-top: 14px; }
.flag-form .btn { min-height: var(--lf-tap); }

.decision-actions { display: grid; gap: 12px; margin-top: 18px; }
.decision-actions form { margin: 0; }
.decision-actions .btn { min-height: 54px; font-size: 16px; }
.decision-actions .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.decision-actions .pair .btn { white-space: normal; text-align: center; line-height: 1.25; }
.decision-actions .pair:empty { display: none; }
.btn.secondary.strong { color: var(--lf-ink); font-weight: 700; }
.btn.danger-outline { background: var(--lf-surface); color: var(--lf-bad-fg); border-color: var(--lf-bad-fg); box-shadow: none; }
.btn.danger-outline:hover { background: var(--lf-bad-bg); color: var(--lf-bad-fg); }
.text-link { justify-self: center; font-size: 14.5px; font-weight: 600; }

/* Inline panels opened by a link to their id. :target needs no script, and
   is-open reopens one after a post that came back with an error. */
.reveal { display: none; margin-top: 18px; padding: 18px; border: 1px solid var(--lf-border); border-radius: 12px; background: var(--lf-surface-2); }
.reveal:target, .reveal.is-open { display: block; }
.reveal.is-danger { border-color: var(--lf-bad-fg); }
.reveal h3 { margin: 0 0 14px; font-size: 17px; }
.reveal .form { gap: 16px; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 16px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--lf-ink-2); cursor: pointer; }

.timeline { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.tl-item { padding: 14px 16px; border: 1px solid var(--lf-border); border-left: 5px solid var(--lf-border-strong); border-radius: 12px; }
.tl-item.is-open { border-left-color: var(--lf-warn-fg); }
/* The upload link an open ask made, for the office to send by WhatsApp or SMS. */
.share-link { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--lf-border); }
.share-link > label { font-size: 13.5px; font-weight: 650; color: var(--lf-ink-2); }
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.share-row input { flex: 1 1 240px; min-width: 0; font-size: 14px; }
.share-row .btn { flex: none; }
.share-link .fine { margin: 0; }
.tl-item.is-answered { border-left-color: var(--lf-ok-fg); }
.tl-item.is-volunteered { border-left-color: var(--lf-brand); }
.tl-when { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lf-muted); }
.tl-title { margin: 6px 0 0; font-size: 16px; font-weight: 700; color: var(--lf-ink); }
.tl-note {
  margin: 8px 0 0; padding-left: 12px; border-left: 3px solid var(--lf-border-strong);
  font-size: 15px; color: var(--lf-ink-2); white-space: pre-line; overflow-wrap: anywhere;
}
.tl-meta { margin: 8px 0 0; font-size: 14px; color: var(--lf-muted); overflow-wrap: anywhere; }
.visit-box { margin-top: 14px; padding: 14px 16px; border: 1px dashed var(--lf-border-strong); border-radius: 12px; background: var(--lf-surface-2); }
.visit-box .tl-title { margin-top: 0; }
.inline-assign { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-top: 12px; }

.doc-list { list-style: none; margin: 12px 0 0; padding: 0; }
.doc-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--lf-border); }
.doc-item:last-child { border-bottom: 0; padding-bottom: 0; }
.doc-item .doc-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.doc-item .doc-line { justify-content: flex-start; }
.doc-item strong { font-size: 15px; }
.doc-meta { font-size: 13.5px; color: var(--lf-muted); overflow-wrap: anywhere; }

.history { list-style: none; margin: 10px 0 0; padding: 0; }
.history li { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--lf-border); font-size: 14.5px; }
.history li:last-child { border-bottom: 0; padding-bottom: 0; }
.history .when { padding-top: 2px; font-family: var(--lf-font-num); font-size: 12.5px; color: var(--lf-muted); }
.history .what { color: var(--lf-ink-2); }
.history .what small { display: block; font-size: 13px; color: var(--lf-muted); overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .flag-form, .inline-assign { grid-template-columns: minmax(0, 1fr); }
  .flag-form .btn, .inline-assign .btn { justify-self: start; }
}

/* One column on a phone, in the order the design reads: the arithmetic, the
   quote, the flags, the decision, then what came back from the client. */
@media (max-width: 700px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split > .col { display: contents; }
  .split .order-1 { order: 1; } .split .order-2 { order: 2; } .split .order-3 { order: 3; }
  .split .order-4 { order: 4; } .split .order-5 { order: 5; } .split .order-6 { order: 6; }
  .split .order-7 { order: 7; } .split .order-8 { order: 8; }
  .office .card.panel { padding: 22px 18px 20px; }
  table.measures { font-size: 14.5px; }
  .well { padding: 14px 16px; }
  .well strong { font-size: 19px; }
  .history li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* --- client portal ------------------------------------------------------- */

/* One narrow column at every width. At 720px a label on the left and its
   figure on the right still read as a pair across the row; on a full desktop
   width they drift apart and the eye loses which number belongs to what. */
.container.portal { max-width: 720px; }
.portal-main { padding-top: var(--lf-sp-5); }

.portal-bar { min-height: 80px; flex-wrap: nowrap; }
.portal-bar .brand { gap: var(--lf-sp-3); }
.portal-bar .brand-name { font-size: 17px; font-weight: 700; }
.mark.initials { font-size: 13.5px; letter-spacing: .02em; }
.portal-actions { margin-left: auto; display: flex; align-items: center; gap: var(--lf-sp-3); }
.portal-title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }

.back-btn {
  display: grid; place-items: center;
  width: var(--lf-tap); height: var(--lf-tap); flex: 0 0 var(--lf-tap);
  border: 1px solid var(--lf-border-strong); border-radius: var(--lf-r-md);
  background: var(--lf-surface); color: var(--lf-ink-2);
}
.back-btn:hover { background: var(--lf-surface-3); color: var(--lf-ink); }

.portal-head { margin: var(--lf-sp-2) 0 var(--lf-sp-5); }
.portal-head h1 { margin: 0 0 6px; font-size: 30px; font-weight: 750; letter-spacing: -.02em; }
.portal-head p { margin: 0; font-size: 17px; color: var(--lf-ink-2); }

.portal .card { border-radius: 20px; padding: var(--lf-sp-6) var(--lf-sp-5) var(--lf-sp-5); box-shadow: var(--lf-shadow-2); }
.portal .card + .card, .portal .health-strip + .card { margin-top: 20px; }
.portal .card > h2 { margin: 0 0 4px; font-size: 22px; font-weight: 750; letter-spacing: -.015em; }
.card-sub { margin: 0 0 var(--lf-sp-4); font-size: 16px; color: var(--lf-muted); }
.portal-text { margin: var(--lf-sp-4) 0 0; font-size: 16px; line-height: 1.55; color: var(--lf-ink-2); }
.portal-text a { color: var(--lf-brand); }

/* Uppercase, tracked, muted: a label that names a figure, never a sentence. */
.eyebrow {
  margin: 0; font-size: 13px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--lf-muted);
}

/* Label left, figure right, a hairline under each. */
.kv { list-style: none; margin: var(--lf-sp-5) 0 0; padding: 0; }
.card-sub + .kv { margin-top: var(--lf-sp-2); }
.kv li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--lf-sp-4);
  padding: 14px 0; border-bottom: 1px solid var(--lf-border);
}
.kv .k { font-size: 16px; color: var(--lf-ink-2); }
.kv .v {
  font-family: var(--lf-font-num); font-variant-numeric: tabular-nums;
  font-size: 16px; font-weight: 700; color: var(--lf-ink);
  text-align: right; white-space: nowrap;
}
.kv .v.ok  { color: var(--lf-ok-fg); }
.kv .v.bad { color: var(--lf-bad-fg); }
.kv .v small { display: block; margin-top: 3px; font-size: 13px; font-weight: 600; color: var(--lf-ok-fg); }
/* A status word beside a figure is a label, not a figure. */
.kv .v .badge { font-family: var(--lf-font-ui); vertical-align: 1px; }
.kv .k small { display: block; font-size: 14px; color: var(--lf-muted); margin-top: 2px; }
.kv a.k { color: var(--lf-brand); text-decoration: none; }
.kv a.k:hover { text-decoration: underline; }

.btn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: var(--lf-sp-5); }
.btn-pair .btn { width: 100%; min-height: 56px; font-size: 16px; }
.btn-pair .btn:only-child { grid-column: 1 / -1; }
.btn.secondary.brand-text { color: var(--lf-brand); }

/* Credit health, as a strip on the portal home. */
.health-strip {
  display: flex; align-items: center; gap: var(--lf-sp-4);
  padding: 18px var(--lf-sp-5);
  background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: 20px;
  box-shadow: var(--lf-shadow-2);
  color: inherit; text-decoration: none;
}
.health-strip:hover { border-color: var(--lf-border-strong); }
.health-strip .title { display: block; font-size: 17px; font-weight: 700; color: var(--lf-ink); }
.health-strip .meta  { display: block; margin-top: 2px; font-size: 15px; color: var(--lf-muted); }
.health-strip .meta.up   { color: var(--lf-ok-fg); }
.health-strip .meta.down { color: var(--lf-bad-fg); }
.health-strip .chev { margin-left: auto; flex: 0 0 auto; color: var(--lf-brand); }

.score-ring {
  display: grid; place-items: center;
  width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%;
  border: 3px solid var(--lf-ok-fg); background: var(--lf-ok-bg); color: var(--lf-ok-fg);
  font-family: var(--lf-font-num); font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 700;
}
.score-ring.fair     { border-color: var(--lf-warn-fg); background: var(--lf-warn-bg); color: var(--lf-warn-fg); }
.score-ring.building { border-color: var(--lf-bad-fg);  background: var(--lf-bad-bg);  color: var(--lf-bad-fg); }
.score-ring.thin     { border-color: var(--lf-border-strong); background: var(--lf-surface-3); color: var(--lf-muted); }

/* One loan. The top edge carries its state, and so does the badge beside the
   number, so the state survives greyscale. */
.loan-card { border-top: 5px solid var(--lf-ok-fg); }
.loan-card.is-overdue { border-top-color: var(--lf-bad-fg); }
.loan-card.is-pending { border-top-color: var(--lf-brand); }
.loan-top { display: flex; align-items: center; justify-content: space-between; gap: var(--lf-sp-3); }
.loan-no { font-family: var(--lf-font-num); font-size: 14px; letter-spacing: .02em; color: var(--lf-muted); text-decoration: none; }
a.loan-no:hover { color: var(--lf-brand); text-decoration: underline; }
.loan-figure {
  margin: var(--lf-sp-4) 0 6px;
  font-family: var(--lf-font-num); font-variant-numeric: tabular-nums;
  font-size: 40px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--lf-ink);
}
.loan-figure.bad { color: var(--lf-bad-fg); }
.loan-when { margin: 0; font-size: 17px; color: var(--lf-ink-2); }

/* What the office is waiting on. The left edge carries the state as well as
   the badge, so it survives a greyscale print. */
.portal .card.ask-card { border-left: 5px solid var(--lf-warn-fg); }
.ask-card .loan-top h2 { margin: 0; font-size: 22px; font-weight: 750; letter-spacing: -.015em; }
/* The lender is waiting on the client: the one card on the page that needs them. */
.card.ask-card.is-action { border-left: 5px solid var(--lf-brand); }
.ask-card .loan-top + .card-sub { margin-top: 6px; }
.ask-card > .eyebrow + h2 { margin-top: 6px; }
.ask-items { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ask-items li { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 650; color: var(--lf-ink); }
.ask-items li::before { content: ''; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--lf-warn-fg); }
.portal .doc-rows { margin-top: var(--lf-sp-3); }
.portal .doc-rows > li:last-child { border-bottom: 0; padding-bottom: 0; }
.send-form, .visit-form { display: grid; gap: var(--lf-sp-4); }

/* The tracking page's ask: the portal's document rows on the public cards. */
.pub-card.ask-card { border-left: 5px solid var(--lf-warn-fg); }
.pub-card > .eyebrow + .pub-card-title { margin-top: 6px; }
.pub-card .doc-rows { margin-top: var(--lf-sp-3); }
.pub-card .doc-rows > li:last-child { border-bottom: 0; padding-bottom: 0; }
.pub-card > .send-form, .pub-card > .visit-form, .pub-card > .kv + .send-form { margin-top: 16px; }
.track-upload > .pub-card:first-child { margin-top: 24px; }
.track-done { margin-top: 24px; }
.send-form .fine-print { margin: 0; font-size: 14px; }
.visit-form input { min-height: 52px; font-size: 16px; }
.portal .btn.block { min-height: 56px; font-size: 16px; }
.kv .v.wrap { white-space: normal; }
.kv .k small { overflow-wrap: anywhere; }

/* --- credit health page -------------------------------------------------- */
.score-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--lf-sp-3); }
.badge.lg { padding: 6px 18px; font-size: 16px; font-weight: 700; }
.score-num {
  margin: 14px 0 12px;
  font-family: var(--lf-font-num); font-variant-numeric: tabular-nums;
  font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -.03em;
  color: var(--lf-brand-2);
}
.score-num.is-thin { color: var(--lf-muted); }
.score-delta { margin: 0; font-family: var(--lf-font-num); font-size: 15.5px; font-weight: 600; color: var(--lf-muted); }
.score-delta.up   { color: var(--lf-ok-fg); }
.score-delta.down { color: var(--lf-bad-fg); }

/* Drawn as SVG because the marker's position is data, and a computed left
   offset would need a style attribute the CSP refuses. A cx percentage is an
   SVG attribute, not CSS, so it passes. overflow:visible lets the marker sit
   over either end of the track without being clipped in half. */
.score-track { display: block; width: 100%; height: 26px; overflow: visible; margin: var(--lf-sp-5) 0 var(--lf-sp-3); }
.score-track .trk { fill: var(--lf-surface-3); }
.score-track .dot { fill: var(--lf-ink); stroke: var(--lf-surface); stroke-width: 3; }

.bands { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.band { padding: 9px 4px; border-radius: 10px; text-align: center; line-height: 1.25; }
.band b    { display: block; font-size: 16px; font-weight: 700; }
.band span { display: block; margin-top: 2px; font-family: var(--lf-font-num); font-size: 13px; font-weight: 600; }
.band.building { background: var(--lf-bad-bg);  color: var(--lf-bad-fg); }
.band.fair     { background: var(--lf-warn-bg); color: var(--lf-warn-fg); }
.band.good     { background: var(--lf-info-bg); color: var(--lf-info-fg); }
.band.strong   { background: var(--lf-ok-bg);   color: var(--lf-ok-fg); }
/* The band you are in is solid rather than tinted — a change of weight, not
   only of hue. The text takes the surface colour so it inverts in dark mode. */
.band.is-current { color: var(--lf-surface); }
.band.building.is-current { background: var(--lf-bad-fg); }
.band.fair.is-current     { background: var(--lf-warn-fg); }
.band.good.is-current     { background: var(--lf-info-fg); }
.band.strong.is-current   { background: var(--lf-ok-fg); }

.portal .card > .score-say { margin: var(--lf-sp-5) 0 0; font-size: 19px; font-weight: 700; color: var(--lf-ink); }
.score-say + p { margin: 8px 0 0; font-size: 16px; line-height: 1.55; color: var(--lf-muted); }

.help-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: help; }
.help-list li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px; border-radius: 14px;
  background: var(--lf-surface-3); color: var(--lf-ink-2);
  font-size: 17px; line-height: 1.45;
  counter-increment: help;
}
.help-list li::before {
  content: counter(help);
  display: grid; place-items: center; flex: 0 0 28px;
  width: 28px; height: 28px; margin-top: 1px; border-radius: 50%;
  background: var(--lf-brand); color: var(--lf-brand-fg);
  font-size: 13.5px; font-weight: 700;
}
.help-list .gain {
  margin-left: auto; padding-left: var(--lf-sp-3); align-self: center; white-space: nowrap;
  font-family: var(--lf-font-num); font-size: 13px; font-weight: 700; color: var(--lf-ok-fg);
}

.factors { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.factor {
  padding: 18px 20px;
  border: 1px solid var(--lf-border); border-left: 6px solid var(--lf-border-strong); border-radius: 12px;
}
.factor.helping { border-left-color: var(--lf-ok-fg); }
.factor.okay    { border-left-color: var(--lf-warn-fg); }
.factor.hurting { border-left-color: var(--lf-bad-fg); }
.factor-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--lf-sp-3); }
.factor h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--lf-ink); }
.factor .eyebrow { margin-top: 6px; }
.factor .detail { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--lf-ink-2); }
.factor-meter { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.factor-meter progress.bar { height: 6px; }
.factor-meter .pts { white-space: nowrap; font-family: var(--lf-font-num); font-size: 13px; font-weight: 700; color: var(--lf-ink-2); }
.factor-stats { margin: 6px 0 0; font-family: var(--lf-font-num); font-size: 13px; color: var(--lf-muted); }
.factor-total { margin: var(--lf-sp-4) 0 0; font-size: 14px; color: var(--lf-muted); }
/* Each factor folds to its name and verdict; open, it gives the working. */
.factor > details.fold > summary .fold-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; font-size: 14px; }
.factor > details.fold .fold-body { margin-top: 4px; }

/* What can be borrowed now, beside what could be once the loan is paid —
   the same side-by-side pair the sync inbox uses for a quote and its reprice. */
.offer-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.offer-box { padding: 16px 18px; border-radius: 14px; background: var(--lf-surface-3); }
.offer-box.after { background: var(--lf-ok-bg); }
.offer-box.after .eyebrow, .offer-box.after .fig { color: var(--lf-ok-fg); }
.offer-box .fig {
  margin: 6px 0 4px;
  font-family: var(--lf-font-num); font-variant-numeric: tabular-nums;
  font-size: 26px; font-weight: 700; color: var(--lf-ink);
}
.offer-box .note { margin: 0; font-size: 14px; line-height: 1.45; color: var(--lf-ink-2); }

.months { list-style: none; margin: var(--lf-sp-3) 0 0; padding: 0; display: grid; gap: 14px; }
.months li { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 16px; }
.months .m { font-size: 16px; font-weight: 700; color: var(--lf-muted); }
.months .s { text-align: right; font-family: var(--lf-font-num); font-size: 15px; font-weight: 700; color: var(--lf-ink); }
.months progress.bar { height: 14px; }
.months li.is-current progress.bar::-webkit-progress-value { background: var(--lf-brand-2); }
.months li.is-current progress.bar::-moz-progress-bar      { background: var(--lf-brand-2); }

.fine-print { margin: var(--lf-sp-5) 0 0; font-size: 15px; line-height: 1.55; color: var(--lf-muted); }

/* --- statement ----------------------------------------------------------- */

/* A sheet of paper: square, white in both themes, its own light palette. It is
   the one screen made to be printed, and a dark statement prints as a slab of
   toner. */
.statement-page .container.portal { max-width: 820px; }
.sheet {
  --lf-ink:#0e1c2b; --lf-ink-2:#33475e; --lf-muted:#61748a;
  --lf-border:#dbe6f2; --lf-border-strong:#bcd0e6;
  color-scheme: light;
  padding: 52px; background: #fff; color: var(--lf-ink);
  box-shadow: var(--lf-shadow-3);
}
.sheet-actions { display: flex; justify-content: flex-end; gap: 12px; margin-bottom: var(--lf-sp-4); }
.sheet-head {
  display: flex; justify-content: space-between; gap: var(--lf-sp-5);
  padding-bottom: var(--lf-sp-5); border-bottom: 2px solid var(--lf-ink);
}
.sheet-head h2 { margin: 0 0 8px; font-size: 26px; font-weight: 750; letter-spacing: -.015em; }
.sheet-head h3 { margin: 0 0 8px; font-size: 20px; font-weight: 750; }
.sheet-head .lines { margin: 0; font-size: 14px; line-height: 1.6; color: var(--lf-muted); }
.sheet-head > div { min-width: 0; }
.sheet-head .right { text-align: right; flex: 0 1 auto; }
.sheet-head .right .lines { font-family: var(--lf-font-num); font-size: 13px; line-height: 1.8; }
.sheet-parties {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--lf-sp-5);
  padding: var(--lf-sp-5) 0; border-bottom: 1px solid var(--lf-border-strong);
}
.sheet-parties .eyebrow { margin-bottom: 8px; font-size: 12px; }
.sheet-parties p { margin: 0; font-size: 16px; line-height: 1.7; }
.sheet-parties .terms { font-family: var(--lf-font-num); font-size: 14px; line-height: 1.95; }
.ledger-wrap { margin-top: var(--lf-sp-5); overflow-x: auto; }
table.ledger { width: 100%; border-collapse: collapse; font-size: 14px; }
table.ledger th {
  padding: 10px 12px; text-align: left; white-space: nowrap;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lf-muted);
  border-bottom: 2px solid var(--lf-ink);
}
table.ledger td { padding: 12px; border-bottom: 1px solid var(--lf-border); vertical-align: top; }
table.ledger .num { text-align: right; white-space: nowrap; font-family: var(--lf-font-num); font-variant-numeric: tabular-nums; }
table.ledger td.date { white-space: nowrap; font-family: var(--lf-font-num); }
table.ledger td.bal { font-weight: 700; }
table.ledger tfoot td { padding-top: 16px; border-bottom: 0; font-weight: 700; }
table.ledger tfoot td.num { font-size: 16px; }
table.ledger tfoot td.label { text-align: right; font-size: 15px; }
.sheet-callout { margin-top: var(--lf-sp-5); padding: 18px 22px; background: #f2f4f7; border-left: 5px solid var(--lf-ink); }
.sheet-callout strong { display: block; margin-bottom: 4px; font-size: 15px; }
.sheet-callout p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--lf-ink-2); }
.sheet-foot { margin: var(--lf-sp-5) 0 0; font-size: 12.5px; line-height: 1.7; color: var(--lf-muted); }

@media (max-width: 640px) {
  .portal-bar { min-height: 72px; padding-bottom: 0; }
  .portal-head h1 { font-size: 26px; }
  .portal .card { padding: var(--lf-sp-5); }
  .loan-figure { font-size: 34px; }
  .score-num { font-size: 56px; }
  .band b { font-size: 14.5px; }
  .band span { font-size: 11.5px; }
  .sheet { padding: 32px 22px; }
  .sheet-head { gap: var(--lf-sp-4); }
  .sheet-head h2 { font-size: 22px; }
  .sheet-head h3 { font-size: 17px; }
  .sheet-parties { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .btn-pair, .offer-pair { grid-template-columns: 1fr; }
  .help-list li { flex-wrap: wrap; }
  .help-list .gain { margin-left: 42px; padding-left: 0; }
}

/* Printing drops every tint. Severity is still legible from the stripes and
   the words, which is the point of never carrying it by colour alone. */
@media print {
  .no-print { display: none !important; }
  body, .portal-page { background: #fff !important; }
  .shell { display: block; min-height: 0; }
  .main { padding: 0; }
  .statement-page .container.portal { max-width: none; }
  .sheet { padding: 0; box-shadow: none; }
  .sheet-callout { background: none; }
  table.ledger tr { break-inside: avoid; }
}