/* ==========================================================================
   DT Tigers Phone - Finance Platform
   Design system: Nimbus (design.md) | Blue primary + neutral canvas | Geist
   --------------------------------------------------------------------------
   Colours, type, spacing and radii come from design.md. The variable NAMES
   below are the ones the rest of this file already uses, so the design system
   is applied by changing this block rather than every rule: one source of
   truth, exactly as Nimbus intends.
   ========================================================================== */

/* Geist, served from this site (2 October 2026: the auditors' network is
   weak, and two extra connections to Google before any text showed was the
   slowest part of opening a page). Variable fonts, one file each, latin
   only. Geist is under the SIL Open Font License 1.1. */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/fonts/geist-latin.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/fonts/geist-mono-latin.woff2') format('woff2'); }

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Nimbus reference palette. Kept under their Nimbus names so a value can be
     traced straight back to design.md. */
  --primary-interactive: #0059D5;
  --primary-interactive-hover: #00429F;
  --primary-interactive-pressed: #00347D;
  --primary-surface: #EEF5FF;
  --primary-surface-highlight: #96C1FC;
  --primary-text-low: #00255A;
  --primary-text-high: #000B19;

  --neutral-background: #FFFFFF;
  --neutral-surface: #F6F6F6;
  --neutral-surface-disabled: #E7E7E7;
  --neutral-surface-highlight: #D1D1D1;
  --neutral-interactive: #B0B0B0;
  --neutral-interactive-hover: #888888;
  --neutral-text-disabled: #6D6D6D;
  --neutral-text-low: #5D5D5D;
  --neutral-text-high: #0A0A0A;

  /* The legacy brand names still used by the sign-in art and the sidebar.
     Mapped onto Nimbus so nothing is left half-rebranded. */
  --gold-300: #96C1FC;
  --gold-400: #0059D5;
  --gold-700: #00347D;
  --navy-950: #000B19;
  --navy-900: #00255A;
  --blue-800: #00347D;

  /* Surfaces */
  --bg: #F6F6F6;
  --bg-subtle: #EFEFEF;
  --surface: #FFFFFF;
  --surface-2: #F6F6F6;
  --surface-3: #EDEDED;
  --surface-inset: #F1F1F1;
  --border: #D1D1D1;
  --border-strong: #B0B0B0;

  /* Text */
  --text: #0A0A0A;
  --text-muted: #5D5D5D;
  --text-subtle: #6D6D6D;
  --text-inverse: #FFFFFF;

  /* Intent. Nimbus keeps its brightest tones for fills and its text-low tones
     for words; each value below clears 4.5:1 on --surface, because these are
     used as text and icon colours, not only as blocks of fill. */
  --primary: #0059D5;
  --on-primary: #FFFFFF;
  --accent: #0059D5;
  --accent-hover: #00429F;
  --on-accent: #FFFFFF;
  --accent-soft: #EEF5FF;
  --accent-border: #96C1FC;

  --success: #005333;
  --success-soft: #DEFEF2;
  --success-border: #7AF7C7;
  --warning: #744700;
  --warning-soft: #FEF2DE;
  --warning-border: #F7C77A;
  --danger: #C80003;
  --danger-soft: #FEDEDE;
  --danger-border: #F77A7C;
  --info: #0059D5;
  --info-soft: #EEF5FF;
  --info-border: #96C1FC;

  --focus-ring: 0 0 0 3px rgba(0, 89, 213, 0.35);

  /* 4px spacing scale (design.md) */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* Nimbus radii: base 6, 2 = 8, 3 = 12, 4 = 16 */
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 9999px;

  /* Nimbus elevation: neutral shadows built on #888888, never coloured glows */
  --shadow-sm: 0 1px 2px rgba(136, 136, 136, 0.24);
  --shadow-md: 0 2px 4px rgba(136, 136, 136, 0.20), 0 4px 12px rgba(136, 136, 136, 0.16);
  --shadow-lg: 0 8px 24px rgba(136, 136, 136, 0.28);

  --font: Geist, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Stronger ease-out for tactile feedback (button press, notice entrance):
     the standard --ease above is tuned for hover/color crossfades, not for
     motion that needs to read as an instant response to a tap. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur: 200ms;

  --tap: 44px; /* WCAG 2.5.8 minimum target */
  --header-h: 68px;
}

/* Nimbus defines a dark counterpart for every semantic token: the roles stay
   the same, the values invert. Blue lightens so it still leads on a dark
   ground, where #0059D5 would be too heavy to read. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0B0B0C;
    --bg-subtle: #111113;
    --surface: #17181A;
    --surface-2: #1E1F22;
    --surface-3: #26282C;
    --surface-inset: #202226;
    --border: #2E3035;
    --border-strong: #43464D;

    --text: #F5F5F6;
    --text-muted: #AFB2B8;
    --text-subtle: #90939A;

    --primary: #96C1FC;
    --on-primary: #000B19;
    --accent: #96C1FC;
    --accent-hover: #C7DEFE;
    --on-accent: #000B19;
    --accent-soft: #10213B;
    --accent-border: #1E3E6B;

    --success: #7AF7C7; --success-soft: #06251A; --success-border: #0E4733;
    --warning: #F7C77A; --warning-soft: #2A1C06; --warning-border: #55390F;
    --danger:  #F77A7C; --danger-soft:  #2B0A0B; --danger-border:  #571416;
    --info:    #96C1FC; --info-soft:    #10213B; --info-border:    #1E3E6B;

    --gold-300: #C7DEFE;
    --gold-400: #96C1FC;
    --gold-700: #0059D5;
    --navy-950: #0B0B0C;
    --navy-900: #17181A;
    --blue-800: #00347D;

    --focus-ring: 0 0 0 3px rgba(150, 193, 252, 0.4);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B0B0C;
  --bg-subtle: #111113;
  --surface: #17181A;
  --surface-2: #1E1F22;
  --surface-3: #26282C;
  --surface-inset: #202226;
  --border: #2E3035;
  --border-strong: #43464D;

  --text: #F5F5F6;
  --text-muted: #AFB2B8;
  --text-subtle: #90939A;

  --primary: #96C1FC;
  --on-primary: #000B19;
  --accent: #96C1FC;
  --accent-hover: #C7DEFE;
  --on-accent: #000B19;
  --accent-soft: #10213B;
  --accent-border: #1E3E6B;

  --success: #7AF7C7; --success-soft: #06251A; --success-border: #0E4733;
  --warning: #F7C77A; --warning-soft: #2A1C06; --warning-border: #55390F;
  --danger:  #F77A7C; --danger-soft:  #2B0A0B; --danger-border:  #571416;
  --info:    #96C1FC; --info-soft:    #10213B; --info-border:    #1E3E6B;

  --gold-300: #C7DEFE;
  --gold-400: #96C1FC;
  --gold-700: #0059D5;
  --navy-950: #0B0B0C;
  --navy-900: #17181A;
  --blue-800: #00347D;

  --focus-ring: 0 0 0 3px rgba(150, 193, 252, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

/* The UA's [hidden] rule loses to any author display value; make it absolute
   so el.hidden always actually hides, whatever display class the element has. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--text);
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }

:is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Keyboard users need a way past the header */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 100;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
  font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

/* --------------------------------------------------------------------------
   3. Brand
   -------------------------------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--text);
  text-decoration: none;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  flex: 0 0 36px;
  border-radius: var(--r-md);
  background: linear-gradient(140deg, var(--gold-400) 0%, var(--gold-700) 100%);
  color: #1c1408;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.brand-text { color: inherit; }
.brand-dark, .brand-dark .brand-text { color: #fff; }

/* --------------------------------------------------------------------------
   4. Top bar
   -------------------------------------------------------------------------- */

header.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Nothing in here may spill out of it. */
  overflow: hidden;
  gap: var(--sp-4);
  min-height: var(--header-h);
  padding: var(--sp-3) clamp(var(--sp-4), 5vw, var(--sp-12));
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

header.topbar nav {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

header.topbar nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

header.topbar nav a:hover {
  color: var(--text);
  background: var(--surface-inset);
}

.lang-wrap { display: inline-flex; align-items: center; }

/* The language list in the app bar. It sits beside the icon buttons, so it
   matches their height — a control a thumb can hit, not a hairline select. */
.top-lang select {
  height: var(--tap); min-height: var(--tap); padding: 0 .6rem;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text); font-size: .9rem; cursor: pointer;
}
.top-lang select:hover, .top-lang select:focus-visible { border-color: var(--accent, var(--info)); }

/* --------------------------------------------------------------------------
   A dropdown you can type into
   --------------------------------------------------------------------------
   One control, not two. The first attempt put a search box above the select
   and left an auditor looking at a stack of fields wondering which to use.
   Here the text box IS the field, and the shops that match appear under it.

   Sized for a thumb: every row is at least a tap target tall, and the list
   is capped so it never covers the whole screen on a phone.
   -------------------------------------------------------------------------- */

.combo { position: relative; }

.combo-input {
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  /* Room for the chevron drawn on the right. */
  padding-right: var(--sp-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23475569' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  background-size: 12px;
}

.combo-input:hover { border-color: var(--text-subtle); }
.combo-input:focus-visible,
.combo-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.combo-input::placeholder { color: var(--text-subtle); }

/* The native control still holds the value; it is simply not what anybody
   looks at or tabs to. Kept in the layout at zero size rather than
   display:none, so the browser still validates and reports it. */
.combo-native {
  position: absolute;
  left: 0; bottom: 0;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.combo-list {
  position: absolute;
  z-index: 30;
  left: 0; right: 0;
  margin: 4px 0 0;
  padding: 4px;
  max-height: min(46vh, 320px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  list-style: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.combo-item {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm, 6px);
  cursor: pointer;
  line-height: 1.35;
  /* Shop names run long and several differ only by the word in brackets, so
     they wrap rather than being cut off where they differ. */
  overflow-wrap: anywhere;
}

.combo-item:hover,
.combo-item.is-active { background: var(--accent-soft); color: var(--accent); }
.combo-item.is-chosen { font-weight: 600; }
/* Where the money is: one table per place, its total beside the heading. */
.money-tables { grid-template-columns: 1fr; }
.money-place h4 { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.money-place .money-total { font-variant-numeric: tabular-nums; }
.dash-box.is-muted { opacity: .85; border-style: dashed; }
.static-grid .field-wide { grid-column: 1 / -1; }
.money-place .linkish { padding: 0; border: 0; background: none; color: var(--primary, inherit); text-decoration: underline;
  cursor: pointer; font: inherit; min-height: 32px; }
/* How far a form has got on its way to the office. */
.send-progress { display: block; width: 100%; height: 8px; margin-top: 10px; accent-color: var(--accent); }
/* "Add “…”": a name not on the list, offered in the same box. */
.combo-item.combo-add { color: var(--accent); font-weight: 600; border-top: 1px dashed var(--line, #d8dde6); }
.combo-item.is-chosen::after {
  content: '';
  margin-left: auto;
  width: 9px; height: 5px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.combo-note {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: var(--text-subtle);
}

@media (max-width: 420px) {
  .combo-list { max-height: min(40vh, 260px); }
}

/* --------------------------------------------------------------------------
   5. Form controls
   -------------------------------------------------------------------------- */

.field input,
.field select,
.field textarea,
.tools input,
.actions input,
.actions select,
nav select {
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

nav select { width: auto; min-width: 128px; }

.field select,
.actions select,
nav select {
  appearance: none;
  padding-right: var(--sp-8);
  /* Chevron inlined as a data URI: no extra request, no icon font */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23475569' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  background-size: 12px;
}

:is(.field, .tools, .actions) :is(input, select, textarea):hover,
nav select:hover { border-color: var(--text-subtle); }

:is(.field, .tools, .actions) :is(input, select, textarea):focus,
nav select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

input::placeholder { color: var(--text-subtle); }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: 0 var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease),
              transform 120ms var(--ease-out);
}

.btn:hover { background: var(--accent-hover); box-shadow: var(--shadow-md); }
/* A press must feel instant: the button visibly compresses so the UI reads
   as listening, not just clickable. */
.btn:active { box-shadow: none; transform: scale(0.97); }

.btn.secondary,
.btn.alt {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: none;
}

.btn.secondary:hover,
.btn.alt:hover { background: var(--surface-inset); border-color: var(--text-subtle); }

.btn.ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
  box-shadow: none;
}
.btn.ghost:hover { background: var(--surface-inset); color: var(--text); }

.btn.danger { background: var(--danger); color: #fff; }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 85%, #000); }

.btn.sm { min-height: 36px; padding: 0 var(--sp-3); font-size: 0.85rem; }

.btn:disabled,
.btn[aria-busy="true"] { opacity: 0.55; box-shadow: none; pointer-events: none; }

/* Submit feedback: the button says it is working */
.btn[aria-busy="true"]::before {
  content: "";
  width: 15px; height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Icon-only controls still need a real target; the name comes from aria-label */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap); height: var(--tap);
  flex: 0 0 var(--tap);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              transform 120ms var(--ease-out);
}
.icon-btn:hover { background: var(--surface-inset); color: var(--text); }
.icon-btn:active { transform: scale(0.95); }
.icon-btn svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding: var(--sp-12) clamp(var(--sp-4), 5vw, var(--sp-12));
  background: var(--navy-900);
  color: #fff;
  overflow: hidden;
}

/* Fine grid overlay: the Swiss cue, kept faint so text stays 4.5:1 */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(60rem 30rem at 70% 20%, #000, transparent 75%);
  mask-image: radial-gradient(60rem 30rem at 70% 20%, #000, transparent 75%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.75fr);
  gap: var(--sp-12);
  align-items: center;
}

.eyebrow,
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  border: 1px solid rgba(252, 211, 77, 0.3);
  background: rgba(245, 158, 11, 0.12);
  color: var(--gold-300);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 18ch;
  margin: 0 0 var(--sp-5);
  font-size: clamp(2.25rem, 5vw, 3.9rem);
  line-height: 1.05;
  letter-spacing: 0;
  text-wrap: balance;
  color: #fff;
}

.hero-sub {
  max-width: 58ch;
  margin: 0;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
}

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  padding: 0;
  list-style: none;
}

.hero-pills li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.85rem;
  font-weight: 500;
}

.hero-pills li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-400);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}

.hero-cta .btn.secondary {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
}
.hero-cta .btn.secondary:hover { background: rgba(255, 255, 255, 0.16); }

.hero-panel {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-xl);
  background: rgba(2, 6, 23, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.hero-signin {
  width: 100%;
  max-width: 420px;
  margin: 0 0 0 auto;
  padding: var(--sp-6);
  gap: var(--sp-3);
  color: var(--text);
  box-shadow: 0 16px 36px rgba(0, 11, 25, 0.28);
}

.hero-signin .form-head { margin-bottom: var(--sp-1); }
.hero-signin .form-head h2 { font-size: 1.35rem; }
.hero-signin .section-kicker { margin-bottom: var(--sp-2); }
.hero-signin .actions-row { margin-top: var(--sp-1); padding-top: var(--sp-4); }
.hero-signin .actions-row .btn { width: 100%; }

.mini-stat {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.mini-stat strong {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--gold-300);
}

.mini-stat span {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.72);
}

/* --------------------------------------------------------------------------
   8. Layout shell and cards
   -------------------------------------------------------------------------- */

.shell {
  width: min(1180px, 92vw);
  margin: calc(var(--sp-16) * -1) auto var(--sp-20);
  /* The negative margin lifts this over .hero, which is positioned and would
     otherwise paint on top of it — clipping the sign-in card's kicker badge. */
  position: relative;
  z-index: 1;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: clamp(var(--sp-5), 4vw, var(--sp-10));
}

.multi-step-form { max-width: 860px; margin: 0 auto; }

.section-kicker.light {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   9. Multi-step form
   -------------------------------------------------------------------------- */

.form-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-2);
}

.form-head h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}

.step-indicator {
  flex-shrink: 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-inset);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.form-intro {
  margin: 0 0 var(--sp-6);
  max-width: 66ch;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Progress: named steps, not just "1 / 4" */
.progress { margin-bottom: var(--sp-8); }

.progress-track {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--surface-inset);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 25%;
  border-radius: var(--r-pill);
  background: var(--accent);
  transition: width 320ms var(--ease);
}

.progress-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: 0;
  list-style: none;
}

.progress-steps li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-subtle);
  transition: color var(--dur) var(--ease);
}

.progress-steps li::before {
  content: counter(list-item);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: 0.72rem;
  font-weight: 600;
  transition: all var(--dur) var(--ease);
}

.progress-steps li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-steps li[aria-current="step"] {
  color: var(--text);
  font-weight: 600;
}

.progress-steps li[aria-current="step"]::before {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.progress-steps li.done { color: var(--text-muted); }

.progress-steps li.done::before {
  content: "";
  border-color: var(--success);
  background: var(--success);
  /* check mark, inlined */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 5.8 10.2 11 4.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px;
}

.step-track { position: relative; }

.step-panel {
  display: none;
  gap: var(--sp-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.step-panel.active {
  display: grid;
  animation: stepIn 260ms var(--ease);
}

@keyframes stepIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.step-panel .section-title {
  grid-column: 1 / -1;
  margin: 0;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

.field label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
}

.field .req {
  margin-left: 2px;
  color: var(--danger);
  font-weight: 600;
}

.field .hint {
  font-size: 0.78rem;
  color: var(--text-subtle);
}

/* Errors sit next to the field they belong to, and are announced */
.field-error {
  display: none;
  align-items: center;
  gap: var(--sp-1);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--danger);
}

.field.invalid .field-error { display: flex; }

.field.invalid :is(input, select, textarea) {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.field.invalid :is(input, select, textarea):focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
}

.wide { grid-column: 1 / -1; }

/* Focusable summary so keyboard users find the failures */
.error-summary {
  display: none;
  padding: var(--sp-4);
  border: 1px solid var(--danger-border);
  border-left: 3px solid var(--danger);
  border-radius: var(--r-md);
  background: var(--danger-soft);
}

.error-summary.show { display: block; }

.error-summary h3 {
  margin: 0 0 var(--sp-2);
  font-size: 0.95rem;
  color: var(--danger);
}

.error-summary ul { margin: 0; padding-left: var(--sp-5); }

.error-summary a {
  color: var(--danger);
  font-weight: 500;
}

.actions-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.actions-row .spacer { margin-left: auto; }

.notice {
  display: none;
  position: relative;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 44px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: 0.9rem;
  line-height: 1.45;
}

.notice::before {
  position: absolute;
  left: 14px;
  top: 13px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

.notice strong { display: block; margin-bottom: 2px; font-size: 0.88rem; }
.notice span { display: block; color: var(--text); font-weight: 400; }

.notice.ok {
  display: block;
  background: var(--success-soft);
  border-color: var(--success-border);
  color: var(--success);
}
.notice.ok::before { content: "✓"; }

.notice.err {
  display: block;
  background: var(--danger-soft);
  border-color: var(--danger-border);
  color: var(--danger);
}
.notice.err::before { content: "!"; }

/* Something is incomplete but nothing has gone wrong — a deal still waiting
   for its identity documents, for instance. */
.notice.warn {
  display: block;
  background: var(--warning-soft);
  border-color: var(--warning-border);
  color: var(--warning);
}
.notice.warn::before { content: "!"; }

/* Plain information — a check in progress, something filled in for you.
   A bare .notice is hidden on purpose (screens clear a message by setting
   it back to one), so anything meant to be read needs one of these four. */
.notice.info {
  display: block;
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--text);
}
.notice.info::before { content: "i"; }

/* display:none -> block can't transition, so animate the reveal instead.
   Reuses stepIn's timing so every "new content just appeared" moment in the
   app (step panels, this notice) moves the same way. */
.notice.ok, .notice.err, .notice.warn { animation: stepIn 260ms var(--ease); }

.verification-guide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: var(--sp-4) 0;
  padding: var(--sp-4);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-lg);
  background: var(--accent-soft);
}

.verification-guide div { display: grid; gap: var(--sp-1); }
.verification-guide small { color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.verification-guide p { grid-column: 1 / -1; margin: 0; color: var(--text-muted); }
.verification-history { margin: var(--sp-5) 0 var(--sp-8); }
.verification-history h4 { margin-bottom: var(--sp-3); }
.verification-history .timeline p { display: grid; gap: var(--sp-1); }
.verification-history .timeline b { text-transform: capitalize; }

/* The handset remains with the partner shop until this provider-backed gate
   is green. Give it enough visual weight that it cannot be mistaken for one
   more optional audit note. */
.device-link-card {
  margin: var(--sp-6) 0;
  padding: var(--sp-5);
  border: 1px solid var(--info-border);
  border-left: 4px solid var(--info);
  border-radius: var(--r-lg);
  background: var(--info-soft);
}

.device-link-card.ok { border-color: var(--success-border); border-left-color: var(--success); background: var(--success-soft); }
.device-link-card.locked { border-color: var(--danger-border); border-left-color: var(--danger); background: var(--danger-soft); }
.device-link-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.device-link-head small { color: var(--text-muted); font-weight: 700; letter-spacing: .08em; }
.device-link-head h3 { margin: var(--sp-1) 0 0; }
.device-match-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin: var(--sp-4) 0; }
.device-match-grid div { min-width: 0; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: color-mix(in srgb, var(--surface) 80%, transparent); }
.device-match-grid dt { color: var(--text-muted); font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.device-match-grid dd { margin: var(--sp-1) 0 0; overflow-wrap: anywhere; font-weight: 600; }
.device-link-copy { margin: 0; color: var(--text-muted); line-height: 1.55; }
.device-link-card .actions { margin-top: var(--sp-4); }

/* Another customer on the book with a name like this one. */
.lookalikes ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); }
.lookalikes li { margin-bottom: var(--sp-2); }
.lookalikes .linkish { padding: 0; border: 0; background: none; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }

/* What became of the last Lock or Unlock pressed on a deal. */
.device-command { margin: var(--sp-3) 0 0; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--info-border); border-left: 4px solid var(--info); border-radius: var(--r-md); background: var(--info-soft); }
.device-command p { margin: 0 0 var(--sp-2); }
.device-command p:last-child { margin-bottom: 0; }
.device-command.ok { border-color: var(--success-border); border-left-color: var(--success); background: var(--success-soft); }
.device-command.warn { border-color: var(--warning-border); border-left-color: var(--warning); background: var(--warning-soft); }

/* Per-field results of the Ghana Card cross-check. Each row is one field the
   OCR either found on the card or did not, so the auditor can see which part
   failed rather than a single opaque verdict. */
.id-check-list { margin: var(--sp-4) 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); }
.id-check-list li { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface) 80%, transparent); overflow-wrap: anywhere; }
.id-check-list small { display: block; margin-top: var(--sp-1); color: var(--text-muted); }
/* A card that was legible and disagreed must not read like a blurry photo. */
.id-check-list li.is-conflict { border-color: var(--danger, #dc2626);
  background: color-mix(in srgb, var(--danger, #dc2626) 10%, var(--surface)); }
/* A near match is neither confirmation nor a finding — it asks for a look. */
.id-check-list li.is-near { border-color: var(--warning, #b45309);
  background: color-mix(in srgb, var(--warning, #b45309) 8%, var(--surface)); }

/* --- Customer "pay now" options ---------------------------------------- */
.pay-options { display: grid; gap: var(--sp-3); margin: var(--sp-4) 0; }
.pay-option { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  text-align: left; white-space: normal; width: 100%; max-width: 100%; box-sizing: border-box; padding: var(--sp-4); min-height: 56px; }
/* The name keeps its words whole and the price takes what is left; on a
   narrow phone the price drops under the name rather than squeezing it to a
   letter a line (1 October 2026). */
.pay-option { flex-wrap: wrap; }
.pay-option b { flex: 1 1 9em; min-width: 0; overflow-wrap: normal; font-size: 1rem; }
.pay-option small { flex: 0 1 auto; font-weight: 700; font-size: 1rem; white-space: nowrap; text-align: right; }
.pay-option-note { flex: 1 1 100%; margin-top: -6px; font-weight: 500; font-size: .85rem; color: var(--success, #005333); white-space: normal; }
@media (min-width: 640px) { .pay-options { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }

/* --- Hubtel activation pack -------------------------------------------- */
.uat-block, .uat-capture { margin: var(--sp-4) 0; border: 1px solid var(--border);
  border-radius: var(--r-md); overflow: hidden; }
.uat-block-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3); background: color-mix(in srgb, var(--surface) 70%, transparent);
  border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.uat-json { margin: 0; padding: var(--sp-3); overflow-x: auto; white-space: pre;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; line-height: 1.5;
  background: var(--surface); }
.uat-reqs { margin: var(--sp-3) 0 0; padding-left: 1.4rem; display: grid; gap: var(--sp-3); }
.uat-reqs small { display: block; color: var(--text-muted); }
.uat-reqs li.uat-waived { color: var(--text-muted); }
.uat-ok { color: var(--ok, #15803d); font-weight: 700; }
.uat-todo { color: var(--warning, #b45309); font-weight: 700; }

/* --------------------------------------------------------------------------
   10. Admin shell
   -------------------------------------------------------------------------- */

.admin-page { background: var(--bg); }

.admin-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
}

.side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  padding: var(--sp-6) var(--sp-4);
  background: linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 100%);
  color: #fff;
  border-right: 1px solid var(--border);
}

.side .brand-dark { padding-left: var(--sp-2); }

.side-nav {
  display: grid;
  gap: var(--sp-1);
  align-content: start;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.side-nav button {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--tap);
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  text-align: left;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              transform 120ms var(--ease-out);
}

/* Press feedback only — the panel it switches to is not itself animated,
   since it's swapped many times a session and a reveal transition would
   just slow down navigation the admin already does constantly. */
.side-nav button:active { transform: scale(0.98); }

.side-nav button::before {
  content: "";
  width: 3px;
  height: 18px;
  border-radius: var(--r-pill);
  background: transparent;
  transition: background var(--dur) var(--ease);
}

.side-nav button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.side-nav button.active {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  font-weight: 600;
}

.side-nav button.active::before { background: var(--gold-400); }

.side-nav .count {
  margin-left: auto;
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

/* Section header above a group of nav buttons. Only the admin role's 20-item
   list uses these (see ADMIN_NAV_GROUPS in admin.js); every other role keeps
   its short flat list and never renders one. */
.side-nav-group {
  margin: var(--sp-4) 0 var(--sp-1);
  padding: 0 var(--sp-3);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.side-nav-group:first-child { margin-top: 0; }

.content {
  padding: clamp(var(--sp-4), 3vw, var(--sp-8));
  min-width: 0;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.top h1 {
  margin: 0 0 var(--sp-1);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: -0.03em;
}

.subtitle { margin: 0; color: var(--text-muted); }

.top-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.nav-toggle { display: none; }

/* --------------------------------------------------------------------------
   11. Stats
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-3);
}

.stat {
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.stat span {
  display: block;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stat b {
  display: block;
  margin-top: var(--sp-2);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.stat.is-alert b { color: var(--danger); }
.stat.is-money b { color: var(--accent); }

/* --------------------------------------------------------------------------
   12. Tools and table
   -------------------------------------------------------------------------- */

.tools {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-6) 0 var(--sp-3);
}

.tools .search-wrap { position: relative; flex: 1; min-width: 0; }

.tools .search-wrap input { padding-left: var(--sp-10); }

.tools .search-wrap svg {
  position: absolute;
  left: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--text-subtle);
  pointer-events: none;
}

.tablebox {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
  /* overflow:auto alone still let the wide table inflate the document's
     scroll width (page scrolled sideways at 1024px); containment stops that
     while the table keeps scrolling inside the box. */
  contain: paint;
}

table {
  width: 100%;
  min-width: 1000px;
  border-collapse: collapse;
  font-size: 0.9rem;
}

th, td {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

tbody tr { transition: background var(--dur) var(--ease); }
tbody tr:hover { background: var(--surface-inset); }
tbody tr:last-child td { border-bottom: 0; }

td small { display: block; margin-top: 2px; color: var(--text-subtle); font-size: 0.8rem; }
td b { font-weight: 600; font-variant-numeric: tabular-nums; }

.num { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   13. Status indicators
   -------------------------------------------------------------------------- */

/* Risk never rides on colour alone: shape and text carry it too */
.risk {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 500;
  text-transform: capitalize;
}

.dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: 0 0 9px;
}

.dot.green  { background: var(--success); }
.dot.orange { background: var(--warning); border-radius: 2px; transform: rotate(45deg); }
.dot.red    { background: var(--danger); clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; }

.pill,
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px var(--sp-3);
  border: 1px solid var(--info-border);
  border-radius: var(--r-pill);
  background: var(--info-soft);
  color: var(--info);
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}

.status-badge.submitted { background: var(--warning-soft); border-color: var(--warning-border); color: var(--warning); }
.status-badge.approved,
.status-badge.active    { background: var(--info-soft);    border-color: var(--info-border);    color: var(--info); }
.status-badge.completed,
.status-badge.paid      { background: var(--success-soft); border-color: var(--success-border); color: var(--success); }
.status-badge.rejected,
.status-badge.overdue   { background: var(--danger-soft);  border-color: var(--danger-border);  color: var(--danger); }
.status-badge.unpaid,
.status-badge.pending   { background: var(--surface-inset); border-color: var(--border); color: var(--text-muted); }

/* Slim repayment progress inside table rows */
.meter {
  display: block;
  width: 84px;
  height: 4px;
  margin-top: var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--surface-inset);
  overflow: hidden;
}

.meter i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--success);
}

/* --------------------------------------------------------------------------
   14. Empty and loading states
   -------------------------------------------------------------------------- */

.empty-state {
  padding: var(--sp-16) var(--sp-6);
  text-align: center;
  color: var(--text-muted);
}

.empty-state svg {
  width: 40px; height: 40px;
  margin-bottom: var(--sp-4);
  color: var(--text-subtle);
}

.empty-state h3 { margin: 0 0 var(--sp-2); font-size: 1rem; color: var(--text); }
.empty-state p  { margin: 0; font-size: 0.9rem; }

.skeleton {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--surface-inset) 25%, var(--border) 37%, var(--surface-inset) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  color: transparent;
}

@keyframes shimmer {
  from { background-position: 100% 50%; }
  to   { background-position: 0 50%; }
}

.skeleton-stat { height: 86px; border-radius: var(--r-lg); }
.skeleton-row  { height: 52px; margin-bottom: var(--sp-2); }

/* --------------------------------------------------------------------------
   15. Modal
   -------------------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  padding: var(--sp-4);
  background: rgba(2, 6, 23, 0.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 100;
}

.modal.open { display: grid; animation: fadeIn 180ms var(--ease); overscroll-behavior: contain; }

/* While a panel is open the page behind it does not move at all. Fixed in
   place rather than just overflow:hidden, which iPhones ignore. */
body.modal-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.panel {
  position: relative;
  width: min(820px, 100%);
  max-height: 90vh;
  /* The visible height on a phone, not the height behind the browser's own
     bars, so the bottom of the panel is never out of reach. */
  max-height: 90dvh;
  overflow-y: auto;
  /* A scroll that reaches the end of the panel stays in the panel. Without
     this the phone hands it to the page behind, and scrolling back up moves
     the page instead of the panel. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: clamp(var(--sp-5), 3vw, var(--sp-8));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: panelIn 220ms var(--ease);
}

@keyframes panelIn {
  from { opacity: 0; transform: translateY(12px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}

.panel h2 { margin: 0 var(--sp-12) var(--sp-2) 0; font-size: 1.3rem; }
.panel h3 {
  margin: var(--sp-8) 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.panel p { color: var(--text-muted); line-height: 1.6; }
.panel table { min-width: 0; font-size: 0.86rem; }

/* Definition grid replaces the old run-on <b>label:</b> paragraphs */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-5) 0;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}

.detail-grid div { display: grid; gap: 2px; min-width: 0; }

.detail-grid dt {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.detail-grid dd {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text);
  overflow-wrap: anywhere;
}

.close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: var(--tap); height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 1.05rem;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              transform 120ms var(--ease-out);
}
.close:active { transform: scale(0.93); }

.close:hover { background: var(--surface-inset); color: var(--text); }

.actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin: var(--sp-5) 0;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}

.actions input,
.actions select { max-width: 220px; }

.actions label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  font-size: 0.9rem;
  color: var(--text-muted);
  cursor: pointer;
}

.actions input[type="checkbox"] {
  width: 18px; height: 18px;
  min-height: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.timeline { display: grid; gap: var(--sp-3); }

.timeline p {
  margin: 0;
  padding-left: var(--sp-4);
  border-left: 2px solid var(--border);
  font-size: 0.88rem;
}

.timeline small {
  display: block;
  color: var(--text-subtle);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   16. Mobile cards
   -------------------------------------------------------------------------- */

.mobile-cards { display: none; }

.mobile-card {
  padding: var(--sp-4);
  margin-top: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.mobile-card h3 { margin: var(--sp-3) 0 var(--sp-1); font-size: 1rem; }
.mobile-card p  { margin: 0; color: var(--text-muted); font-size: 0.88rem; }

.mobile-card .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-3) 0;
}

.mobile-card .row span { color: var(--text-muted); font-size: 0.85rem; }
.mobile-card .btn { width: 100%; margin-top: var(--sp-2); }

/* --------------------------------------------------------------------------
   17. Responsive — 1024 / 920 / 640 / 380
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .admin-shell { grid-template-columns: 200px minmax(0, 1fr); }
  .hero-inner { gap: var(--sp-8); }
}

@media (max-width: 920px) {
  .hero { padding-top: var(--sp-12); padding-bottom: var(--sp-16); }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-panel { grid-template-columns: repeat(3, 1fr); display: grid; }

  .admin-shell { grid-template-columns: 1fr; }

  /* Sidebar becomes an off-canvas drawer instead of vanishing */
  .side {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: 260px;
    transform: translateX(-100%);
    transition: transform 260ms var(--ease);
    box-shadow: var(--shadow-lg);
  }

  .side.open { transform: none; }

  /* One scroll surface keeps the full menu reachable in mobile Safari. */
  .side {
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(var(--sp-6), env(safe-area-inset-bottom));
  }
  .side > * { flex-shrink: 0; }
  .side-nav { overflow: visible; }

  .nav-toggle {
    display: inline-flex;
    position: fixed;
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: calc(16px + env(safe-area-inset-right, 0px));
    z-index: 61;
    width: auto;
    min-width: 100px;
    min-height: 44px;
    gap: 8px;
    padding: 10px 14px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
  }
  .admin-page .content { padding-top: calc(76px + env(safe-area-inset-top, 0px)); }

  .side-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(2, 6, 23, 0.5);
  }

  .side-backdrop.show { display: block; }

  /* Tables used to be hidden outright on a phone, on the assumption that
     every screen offered a card alternative. Only the deal list ever did, so
     Shops, Staff, the form links, the repayment schedule and the owner's own
     summaries rendered nothing at all on the device the business is actually
     run from — and every row action with them, including Edit.

     A table that scrolls sideways is worth far more than a blank space, so
     they stay. The deal list still prefers its cards: it says so by sitting
     next to them. */
  .tablebox:has(+ .mobile-cards) { display: none; }
  .mobile-cards { display: block; }
  .tablebox { -webkit-overflow-scrolling: touch; }
  /* A first column that stays put while the rest slides, so it is always
     clear which row an action belongs to. */
  .tablebox table { min-width: 34rem; }
  .tablebox thead th:first-child,
  .tablebox tbody td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; }
  .tablebox tbody td:first-child { box-shadow: 1px 0 0 var(--border); }
  /* The buttons are the reason the row is on screen, so they are pinned to
     the right edge rather than left at the end of a sideways scroll. */
  .tablebox td:has(.actions),
  .tablebox td:has(> .btn) {
    position: sticky; right: 0; background: var(--surface); z-index: 2;
    box-shadow: -1px 0 0 var(--border);
  }
  .tablebox td:has(.actions) .actions { flex-direction: column; align-items: stretch; gap: 6px; }
  .tablebox td:has(.actions) .btn { width: 100%; justify-content: center; white-space: nowrap; }
}

@media (max-width: 640px) {
  /* The old rule left form fields two-across on a phone; one column now */
  .step-panel { grid-template-columns: 1fr; }

  .progress-steps { grid-template-columns: repeat(4, auto); justify-content: space-between; }
  .progress-steps li span { display: none; }
  .progress-steps li[aria-current="step"] span { display: inline; }

  /* At 390px the bar used to run to 462px and push the page sideways.
     Trim the brand word and the control widths instead of dropping links. */
  header.topbar {
    min-height: 60px;
    gap: var(--sp-2);
    padding-left: var(--sp-3);
    padding-right: var(--sp-3);
  }
  header.topbar .brand-text { display: none; }
  /* The brand must give way before the navigation does: on a narrow phone
     the two were competing for the same row and the logo won, sitting over
     "My plan" and "Staff sign in". It gives way by getting smaller, never by
     being sliced — a half a wordmark reads as a broken image. */
  header.topbar .brand { flex: 0 1 auto; min-width: 0; }
  header.topbar nav { gap: var(--sp-1); flex: 0 0 auto; }
  header.topbar nav a { padding: 0 var(--sp-2); font-size: 0.82rem; }
  header.topbar nav a.hide-sm { display: none; }
  header.topbar nav select { min-width: 0; width: 92px; padding-left: var(--sp-2); }
  header.topbar .icon-btn { width: 40px; flex-basis: 40px; }

  .hero h1 { font-size: clamp(1.9rem, 8vw, 2.5rem); }
  .hero-panel { grid-template-columns: 1fr; }
  .hero-cta .btn { width: 100%; }

  .shell { width: min(94vw, 100%); margin-top: calc(var(--sp-10) * -1); }

  .top { flex-direction: column; align-items: stretch; }
  .top-actions .btn { flex: 1; }

  .tools { flex-direction: column; align-items: stretch; }
  .tools .btn { width: 100%; }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .actions-row { flex-direction: column-reverse; align-items: stretch; }
  .actions-row .btn { width: 100%; }
  .actions-row .spacer { margin-left: 0; }

  .actions input, .actions select { max-width: none; width: 100%; }

  .verification-guide { grid-template-columns: 1fr; }
  .verification-guide p { grid-column: 1; }

  .panel h2 { margin-right: var(--sp-10); font-size: 1.15rem; }
}

@media (max-width: 380px) {
  .stats { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   18. Motion and print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .skeleton { animation: none; background: var(--surface-inset); }
}

@media print {
  header.topbar, .side, .tools, .actions, .actions-row, .close, .nav-toggle { display: none !important; }
  body { background: #fff; }
  .card, .tablebox, .panel { border: 1px solid #ccc; box-shadow: none; }
  .modal { position: static; display: block; background: none; }
}

/* --------------------------------------------------------------------------
   19. Sign in
   -------------------------------------------------------------------------- */

.signin-card {
  max-width: 460px;
  margin: 0 auto;
  display: grid;
  gap: var(--sp-4);
}

.demo-accounts {
  margin-top: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.demo-accounts summary {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
}

.demo-accounts ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); }
.demo-accounts li { margin-bottom: 2px; }

.hint code {
  padding: 1px 5px;
  border-radius: var(--r-sm);
  background: var(--surface-inset);
  font-size: 0.9em;
}

.mini-stat.is-exposure {
  border-color: var(--accent-border);
  background: rgba(245, 158, 11, 0.12);
}

/* The MFA field appears mid-flow after the first sign-in attempt succeeds;
   give it the same reveal motion as .notice so the step doesn't just snap in. */
#mfaField:not([hidden]) { animation: stepIn 260ms var(--ease); }

/* --------------------------------------------------------------------------
   20. Workspace chrome
   -------------------------------------------------------------------------- */

.side-user {
  padding: var(--sp-3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.05);
}

.side-name { margin: 0; font-weight: 600; color: #fff; font-size: 0.94rem; }

.side-role {
  margin: 2px 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-300);
}

.side-signout {
  margin-top: auto;
  color: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.16);
}
.side-signout:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* Simulation is never allowed to look like the real thing */
.sim-banner {
  margin-bottom: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--warning-border);
  border-left: 3px solid var(--warning);
  border-radius: var(--r-md);
  background: var(--warning-soft);
  color: var(--warning);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* Whether toggled via [hidden] (#demoCode, #simBanner) or freshly rendered
   into innerHTML (the Hubtel setup banners), this is always a one-time,
   attention-worthy reveal, so it earns the same entrance as .notice. */
.sim-banner { animation: stepIn 260ms var(--ease); }

/* --------------------------------------------------------------------------
   21. Forms inside the workspace
   -------------------------------------------------------------------------- */

.static-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-5);
  align-items: start;
}

/* Sales lead capture is intentionally short, but every field must remain a
   full touch target on a phone. These labels are wrappers, so size the wrapper
   as well as the control. */
.lead-form > label {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-height: var(--tap);
  font-size: 0.85rem;
  font-weight: 500;
}
.lead-form :is(input, select) {
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
}

.form-card { margin-top: var(--sp-6); }

.multi-step-form .section-title,
.form-card .section-title {
  margin: var(--sp-8) 0 var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.multi-step-form .section-title:first-of-type,
.form-card .section-title:first-of-type { margin-top: 0; }

.quote-box {
  margin-top: var(--sp-6);
  padding: var(--sp-4);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-lg);
  background: var(--accent-soft);
  animation: stepIn 260ms var(--ease);
}

.quote-box .detail-grid { margin: 0; border: 0; background: none; padding: 0; }
.quote-box .emphasis { font-size: 1.15rem; font-weight: 700; color: var(--accent); }
.quote-box .hint { margin: var(--sp-3) 0 0; }

/* "Model name" only appears once the lead form's model dropdown is set to
   Other — same state-transition case as #mfaField on the sign-in page. */
#leadOther:not([hidden]) { animation: stepIn 260ms var(--ease); }

.phone-preview {
  grid-column: 1 / -1;
  min-height: 172px;
  margin: 0;
  padding: var(--sp-3) 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--sp-2);
  border-block: 1px solid var(--border);
  background: var(--surface-1);
  animation: stepIn 220ms var(--ease);
}

.phone-preview[hidden] { display: none; }
.phone-preview img { width: 152px; height: 132px; object-fit: contain; }
.phone-preview figcaption { font-size: 0.9rem; font-weight: 700; color: var(--text); }

/* Mandate setup steps (my.html) and the standalone mandate flow
   (mandate.html) each swap in one section at a time — same "next step just
   appeared" moment as the sign-in form's MFA field. */
#mandateVerify:not([hidden]),
#mandateReactivate:not([hidden]),
#mandateForm:not([hidden]),
#verify:not([hidden]) { animation: stepIn 260ms var(--ease); }

/* Enrolment is a gate, not a footnote */
.enrol-gate {
  padding: var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}

.enrol-check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-weight: 500;
  cursor: pointer;
}

.enrol-check input {
  width: 20px; height: 20px;
  margin-top: 1px;
  flex: 0 0 20px;
  accent-color: var(--accent);
  cursor: pointer;
}

.enrol-gate .hint { margin: var(--sp-2) 0 0 32px; }

.audit-note {
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--warning);
  border-radius: var(--r-sm);
  background: var(--warning-soft);
  color: var(--text);
}

.flow-in { color: var(--success); font-weight: 600; }
.flow-out { color: var(--accent); font-weight: 600; }

.status-badge.unlocked, .status-badge.success, .status-badge.recorded { background: var(--success-soft); border-color: var(--success-border); color: var(--success); }
/* A handset brought back inside the five days: the plan ended, but nothing
   went wrong, so it reads as neither paid off nor written off. */
/* The bell, and what it drops down.
   The count sits on the bell rather than beside it so the app bar keeps its
   shape on a phone, where the bar is already four buttons wide. */
.alerts-wrap { position: relative; }
.alert-count {
  position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 9px; font-size: .68rem; font-weight: 700;
  background: var(--danger); color: #fff; line-height: 1;
}
.icon-btn.has-news { color: var(--danger); }
.alerts-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: min(380px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow-y: auto;
  padding: 12px; display: grid; gap: 6px; box-shadow: var(--shadow-lg, 0 18px 40px rgba(0,0,0,.18));
}
.alerts-panel .section-title { margin: 0 0 4px; }
.alert-row {
  display: grid; gap: 2px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 10px;
  border: 1px solid transparent; background: var(--surface-inset); color: inherit; cursor: pointer;
}
.alert-row:hover, .alert-row:focus-visible { border-color: var(--border); background: var(--surface); }
.alert-row b { font-size: .9rem; font-weight: 600; }
.alert-row small { font-size: .75rem; color: var(--text-muted); }
.alert-row.is-attention { border-left: 3px solid var(--warning); }
.alert-row.is-new { background: var(--warning-soft); }
@media (max-width: 480px) {
  .alerts-panel { position: fixed; top: 64px; right: 16px; left: 16px; width: auto; }
}

/* The code a shop sticks on its counter: big enough to scan from a phone
   held at arm's length, and it must survive being printed. */
.qr-print { background: #fff; padding: 16px; border-radius: 12px; width: max-content; max-width: 100%; }
.qr-print svg { display: block; width: 260px; height: 260px; max-width: 100%; }

.status-badge.returned_to_shop { background: var(--surface-inset); border-color: var(--warning-border); color: var(--warning); }
.status-badge.locked, .status-badge.failed, .status-badge.defaulted { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); }
.status-badge.returned, .status-badge.partial { background: var(--warning-soft); border-color: var(--warning-border); color: var(--warning); }

@media (max-width: 920px) {
  .side { display: flex; flex-direction: column; }
}

@media (max-width: 640px) {
  .static-grid { grid-template-columns: 1fr; }
  .signin-card { max-width: none; }
  .device-match-grid { grid-template-columns: 1fr; }
  .device-link-head { align-items: stretch; flex-direction: column; }
}

/* --------------------------------------------------------------------------
   22. Customer portal — one column, one big number, nothing to learn
   -------------------------------------------------------------------------- */

.portal-page { background: var(--bg); }

.portal-top {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding: var(--sp-2) var(--sp-4);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.portal-shell {
  width: min(460px, 100%);
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-4) var(--sp-16);
}

.portal-shell > *, .portal-shell section, .portal-shell div { min-width: 0; }

.portal-step { display: grid; gap: var(--sp-4); }

.portal-title {
  margin: var(--sp-4) 0 0;
  font-size: 1.6rem;
  letter-spacing: 0;
  text-wrap: balance;
}

.portal-lead {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
}

.portal-h2 {
  margin: 0 0 var(--sp-3);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.portal-step form { display: grid; gap: var(--sp-4); }

.portal-cta { width: 100%; min-height: 52px; font-size: 1rem; }

.portal-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin: var(--sp-2) 0 0;
  color: var(--text-subtle);
  font-size: 0.88rem;
  text-align: center;
}

.portal-foot a { color: var(--accent); font-weight: 500; }

.portal-legal { line-height: 1.6; }

/* One-time code entry */
.code-input {
  text-align: center;
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: 0.45em;
  padding-left: calc(var(--sp-3) + 0.45em);
  font-variant-numeric: tabular-nums;
}

.demo-otp { font-size: 1.15em; letter-spacing: 0.12em; }

/* Greeting + status */
.portal-hello {
  margin: var(--sp-2) 0 0;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0;
}

.plan-banner {
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  border-left-width: 4px;
  background: var(--surface);
  line-height: 1.55;
  font-size: 0.94rem;
}

.plan-banner.ok     { border-left-color: var(--success); background: var(--success-soft); border-color: var(--success-border); color: var(--success); }
.plan-banner.due    { border-left-color: var(--warning); background: var(--warning-soft); border-color: var(--warning-border); color: var(--warning); }
.plan-banner.locked { border-left-color: var(--danger); background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); }
.plan-banner.wait   { border-left-color: var(--info); background: var(--info-soft); border-color: var(--info-border); color: var(--info); }

/* The plan card: phone, big remaining figure, 12-segment week bar */
.plan-card {
  padding: var(--sp-6) var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.plan-phone { margin: 0; font-weight: 600; font-size: 1.05rem; }

.plan-shop {
  margin: var(--sp-1) 0 var(--sp-6);
  color: var(--text-subtle);
  font-size: 0.82rem;
}

.plan-remaining {
  margin: 0;
  font-size: clamp(2.1rem, 11vw, 2.6rem);
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.plan-remaining-label {
  margin: 0 0 var(--sp-5);
  color: var(--text-muted);
  font-size: 0.9rem;
}

.weekbar {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
}

.weekbar i {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--surface-inset);
}

.weekbar i.paid { background: var(--success); }
.weekbar i.next { background: var(--accent); }

.plan-weeks {
  margin: var(--sp-3) 0 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
}

/* Next payment */
.next-card {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-lg);
  background: var(--accent-soft);
}

.next-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
}

.next-note {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.next-card .portal-cta { min-height: 46px; }

.next-card.overdue {
  border-color: var(--danger-border);
  background: var(--danger-soft);
}

.next-label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.next-amount {
  margin: 2px 0 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.next-card.overdue .next-amount { color: var(--danger); }

.next-date {
  margin: 0;
  font-weight: 600;
  color: var(--text-muted);
  text-align: right;
}

.next-date small {
  display: block;
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--text-subtle);
}

/* Schedule list */
.sched {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
}

.sched-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 52px;
  border-bottom: 1px solid var(--border);
}

.sched-row:last-child { border-bottom: 0; }

.sched-week {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--text-subtle);
  font-size: 0.78rem;
  font-weight: 600;
}

.sched-week svg { width: 15px; height: 15px; }

.sched-row.is-paid .sched-week {
  border-color: var(--success);
  background: var(--success);
  color: #fff;
}

.sched-row.is-next .sched-week {
  border-color: var(--accent);
  color: var(--accent);
}

.sched-main { flex: 1; min-width: 0; font-weight: 500; }
.sched-main small { display: block; color: var(--text-subtle); font-size: 0.78rem; }

.sched-amt {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.sched-amt small { display: block; font-weight: 500; color: var(--warning); font-size: 0.75rem; }

.sched-row.is-paid .sched-main,
.sched-row.is-paid .sched-amt { color: var(--text-subtle); }

/* Facts + help */
.plan-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.plan-facts div {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}

.plan-facts span {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-subtle);
}

.plan-facts b {
  font-size: 0.98rem;
  font-variant-numeric: tabular-nums;
}

.help-card {
  margin-top: var(--sp-2);
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-align: center;
}

.help-card p { margin: 0 0 var(--sp-4); color: var(--text-muted); }
.help-lead { font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   Customer portal — collapsible sections
   --------------------------------------------------------------------------
   The plan used to be one long column with everything open at once, which on
   a phone is a page nobody reads to the end of. Each section states its name
   and, on the right, the one fact that would otherwise make somebody open it.
   -------------------------------------------------------------------------- */

/* These carry a `plan-` prefix rather than the obvious `.panel` and `.chip`.
   Both of those names were already taken — `.panel` is the admin deal dialog
   and `.chip` is the sales-person tag on a shop — and because this block is
   further down the file it silently won. The dialog kept `max-height: 90vh`
   and lost its `overflow-y: auto` to the `overflow: hidden` below, so on a
   phone an admin opening a deal could not scroll it. */
.plan-sections { display: grid; gap: var(--sp-3); }

.plan-section {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}

.plan-section > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.plan-section > summary::-webkit-details-marker { display: none; }
.plan-section > summary:hover { background: var(--surface-inset); }
.plan-section > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.plan-section-title {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  font-size: 0.98rem;
}

.plan-section-meta { flex: 0 0 auto; }

.plan-section-chevron {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  color: var(--text-subtle);
  transition: transform var(--dur) var(--ease);
}

.plan-section[open] > summary .plan-section-chevron { transform: rotate(180deg); }
.plan-section[open] > summary { border-bottom: 1px solid var(--border); }

.plan-section-body {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
}

.plan-section-body > * { margin: 0; }
.plan-section-lead { color: var(--text-muted); line-height: 1.6; }
.plan-section-sub { font-weight: 600; font-size: 0.9rem; }

.plan-section-note {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-subtle);
}

.plan-section-note:empty { display: none; }

/* Payments made by hand: the form on a deal, and the reports waiting for
   the office. One column on a phone, two sides from a tablet up. */
.manual-pay-fold { margin: var(--sp-3) 0; }
/* On a plan's record the folds above the weeks do not clip what is in them,
   and on a phone the weeks are cards rather than a table that slides
   sideways (owner, 18 October 2026: on his iPhone the folds and the whole
   schedule drew nothing; clipped and contained boxes inside the scrolling
   record are what iPhone browsers fail to paint). */
@media (max-width: 760px) {
  .tablebox.rec-weeks { contain: none; overflow: visible; border: 0; background: none; box-shadow: none; }
  .rec-weeks table, .rec-weeks tbody { display: block; min-width: 0 !important; width: 100%; }
  .rec-weeks thead { display: none; }
  .rec-weeks tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: var(--sp-2) var(--sp-3);
    margin: 0 0 var(--sp-2); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
  .rec-weeks td { display: block; min-width: 0; padding: 0; border: 0; background: none !important; position: static !important; box-shadow: none !important; }
  .rec-weeks td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: .7rem; font-weight: 600;
    letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
  /* "Week 1" and its status along the top, then due, amount and paid. */
  .rec-weeks td:nth-child(1) { grid-column: 1 / 3; font-weight: 700; color: var(--text); }
  .rec-weeks td:nth-child(1)::before { display: inline; content: attr(data-label) " "; font: inherit; letter-spacing: 0; text-transform: none; color: inherit; }
  .rec-weeks td:nth-child(5) { grid-column: 3; grid-row: 1; justify-self: end; }
  .rec-weeks td:nth-child(5)::before { display: none; }
  .rec-weeks td.how-paid { grid-column: 1 / -1; }
  .rec-weeks td.how-paid:has(> .muted:only-child), .rec-weeks td.is-none { display: none; }
  .rec-weeks td:nth-child(7) { grid-column: 1 / -1; }
}
.message-log .msg-delivered { color: var(--success); }
.message-log .msg-failed, .message-log .msg-not_sent { color: var(--danger); }
.message-log .msg-submitted, .message-log .msg-unknown { color: var(--text-muted); font-weight: 500; }
.manual-pay-form { display: grid; gap: var(--sp-3); padding: var(--sp-4); }
.manual-pay-form .hint { margin: 0; }
.quick-amounts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.manual-pay-list { display: grid; gap: var(--sp-2); margin: var(--sp-3) 0; }
.manual-pay-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-sm, 8px);
  background: var(--surface);
}
.manual-pay-main { display: grid; gap: 2px; min-width: 0; flex: 1 1 220px; }
.manual-pay-main p { margin: 0; }
/* The reference is what the office is judging, and the screenshot the
   customer sent sits under it rather than behind a link. */
.manual-pay-ref { margin: .15rem 0 !important; font-size: .92rem; }
.manual-pay-ref span { color: var(--text-muted); }
.manual-pay-proof { display: block; margin-top: .4rem; max-width: 260px; max-height: 320px; border: 1px solid var(--border); border-radius: var(--r-md); cursor: zoom-in; }
/* Until the picture has been fetched there is nothing to show, and an <img>
   with no source draws a broken frame. It stays out of the way instead. */
.manual-pay-proof:not([src]) { display: none; }
.manual-pay-proof:hover, .manual-pay-proof:focus-visible { border-color: var(--accent, var(--info)); }

/* A screenshot of a MoMo message is unreadable at thumbnail size, so it
   opens over the page rather than in a new tab: the office stays in the
   list of payments it is working through. */
.proof-viewer {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(0, 0, 0, .75); padding: 24px; cursor: zoom-out;
}
.proof-viewer figure { margin: 0; display: grid; gap: 8px; justify-items: center; cursor: default; }
.proof-viewer img { max-width: min(92vw, 720px); max-height: 82vh; border-radius: var(--r-md); background: #fff; }
.proof-viewer figcaption { color: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
.proof-close {
  position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, .15); color: #fff; font-size: 1.1rem; cursor: pointer;
}
.proof-close:hover, .proof-close:focus-visible { background: rgba(255, 255, 255, .3); }
.manual-pay-main small { color: var(--text-subtle); overflow-wrap: anywhere; }
.manual-pay-side { display: grid; gap: 6px; justify-items: end; align-content: start; }
@media (max-width: 520px) {
  .manual-pay-side { justify-items: start; width: 100%; }
}
.plan-section-note.ok { color: var(--success); font-weight: 500; }

/* The wallet a plan is collected from: shown, not typed. */
.field .field-label { font-size: 0.85rem; font-weight: 500; color: var(--text); }
.plan-wallet {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface-inset);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* The one fact in a section header: how many weeks are paid, whether the
   weekly collection is switched on. */
.plan-chip {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-inset);
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-muted);
}

.plan-chip.ok   { background: var(--success-soft); border-color: var(--success-border); color: var(--success); }
.plan-chip.warn { background: var(--warning-soft); border-color: var(--warning-border); color: var(--warning); }
.plan-chip.err  { background: var(--danger-soft);  border-color: var(--danger-border);  color: var(--danger); }

/* Weeks already settled, folded away inside the schedule. */
.sched-paid > summary {
  padding: var(--sp-2) 0;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.sched-paid[open] > summary { margin-bottom: var(--sp-2); }

@media (max-width: 420px) {
  .plan-section > summary { padding: var(--sp-3) var(--sp-4); gap: var(--sp-2); }
  .plan-section-body { padding: var(--sp-4); }
  .plan-section-title { font-size: 0.94rem; }
  .plan-chip { font-size: 0.72rem; padding: 3px 8px; }
}

/* --------------------------------------------------------------------------
   The auditor's second link: the handset to enrol
   --------------------------------------------------------------------------
   Read on a phone, at a counter, against the handset in their hand. So the
   two identifiers that have to match are large, monospaced and set apart from
   everything else, and they wrap rather than run off the screen.
   -------------------------------------------------------------------------- */

.handset-card {
  margin: var(--sp-4) 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}

.handset-head {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-inset);
  border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.handset-list { margin: 0; padding: var(--sp-2) var(--sp-4); }
.handset-list > div {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--sp-3);
  justify-content: space-between;
  align-items: baseline;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
}
.handset-list > div:last-child { border-bottom: 0; }
.handset-list dt { flex: 0 0 auto; color: var(--text-muted); font-size: 0.85rem; }
.handset-list dd {
  flex: 1 1 auto; margin: 0; min-width: 0;
  text-align: right; font-weight: 600; overflow-wrap: anywhere;
}

.handset-ids { display: grid; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-4); }

.handset-id {
  padding: var(--sp-3);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-md);
  background: var(--accent-soft);
}

.handset-id-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.handset-id-value {
  display: block;
  margin-top: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
  /* Read out loud and typed by hand, so the digits must not sit too close. */
  font-variant-numeric: tabular-nums;
}

.handset-id-hint { display: block; margin-top: 3px; font-size: 0.75rem; color: var(--text-muted); }

/* The way out when a handset is the right one in the wrong name: a phone
   that came back from an earlier customer and still carries theirs. */
.left-over {
  margin: var(--sp-4) 0;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.left-over-head { margin: 0 0 var(--sp-2); font-size: 1rem; }
.left-over .hint { margin: 0; }
.left-over-proof {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md, 8px);
  background: var(--success-soft, var(--surface-inset));
  color: var(--success, inherit);
  font-size: 0.88rem;
}
.left-over .check-row { margin-top: var(--sp-3); }
.left-over .btn { width: 100%; margin-top: var(--sp-3); }

.handset-note {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
  background: var(--warning-soft);
  color: var(--warning);
  font-size: 0.85rem;
  line-height: 1.55;
}

@media (min-width: 560px) {
  .handset-ids { grid-template-columns: 1fr 1fr; }
}

/* Deal switcher for the rare customer with more than one plan */
.deal-tabs {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: 2px;
}

.deal-tabs button {
  min-height: var(--tap);
  padding: 0 var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform 120ms var(--ease-out);
}

.deal-tabs button:hover { border-color: var(--text-subtle); }
.deal-tabs button:active { transform: scale(0.97); }

/* Only rendered once, for the rare customer with more than one plan */
.deal-tabs:not([hidden]) { animation: stepIn 260ms var(--ease); }

.deal-tabs button.active {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
}

/* Portal touch targets: everything tappable is at least 44px */
.portal-top .brand { min-height: var(--tap); }
.portal-page .btn.sm { min-height: var(--tap); }
.portal-page input, .portal-page select { min-height: var(--tap); }
.portal-foot a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--sp-2);
}

/* Payment references are long and must be comparable at a glance */
.mono {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: -0.02em;
  word-break: break-all;
}

.plan-banner ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); }
.plan-banner li { margin-bottom: 2px; }

/* Authenticator QR. White plate regardless of theme — scanners need the light
   quiet zone, and the SVG's own modules are black on transparent. */
.mfa-qr {
  margin: 0 0 var(--sp-4);
}
.mfa-qr img {
  display: block;
  width: 220px;
  height: 220px;
  padding: var(--sp-3);
  background: #fff;
  border-radius: var(--r-md);
}

/* A live MDM cartridge is not a warning, it is a standing condition: commands
   from this screen reach real handsets. Danger tone, not caution tone. */
.sim-banner.live {
  border-color: var(--danger-border);
  border-left-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
}

/* ------------------------------------------------------------ device fleet */
.fleet-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.fleet-toolbar .btn.is-active {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}
.fleet-count {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 0.82rem;
}
.fleet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--sp-3);
}
.fleet-card {
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.fleet-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fleet-card header { display: flex; align-items: flex-start; gap: var(--sp-2); }
.fleet-card h4 {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  /* Model strings are long and arrive uppercase from the provider. */
  overflow-wrap: anywhere;
}
.fleet-seen {
  margin-left: auto;
  flex: none;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--text-muted);
}
.fleet-seen.is-good { color: var(--success); }
.fleet-seen.is-ok { color: var(--accent); }
.fleet-seen.is-warn { color: var(--warning); }
.fleet-seen.is-bad { color: var(--danger); }
.fleet-serial {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.fleet-specs { display: flex; gap: var(--sp-3); margin: 0; flex-wrap: wrap; }
.fleet-specs div { min-width: 0; }
.fleet-specs dt {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.fleet-specs dd { margin: 2px 0 0; font-size: 0.8rem; font-weight: 600; overflow-wrap: anywhere; }
.fleet-specs dd.is-good { color: var(--success); }
.fleet-specs dd.is-ok { color: var(--accent); }
.fleet-specs dd.is-warn { color: var(--warning); }
.fleet-specs dd.is-bad { color: var(--danger); }
.fleet-card footer {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.fleet-holder { font-size: 0.78rem; font-weight: 600; display: grid; min-width: 0; }
.fleet-holder small { font-weight: 500; color: var(--text-muted); font-size: 0.7rem; }
.fleet-link {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--warning-soft);
  color: var(--warning);
  white-space: nowrap;
}
.fleet-link.is-linked { background: var(--success-soft); color: var(--success); }

/* Erase is the one action in this app that destroys a customer's data and
   cannot be undone. It gets its own bordered region so it can never be
   mistaken for the row of ordinary device actions above it. */
.danger-zone {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--danger-border);
  border-radius: var(--r-md);
  background: var(--danger-soft);
}
.danger-zone h3 {
  margin: 0 0 var(--sp-2);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--danger);
}
.danger-zone p {
  margin: 0 0 var(--sp-3);
  font-size: 0.82rem;
  color: var(--text-muted);
}
.btn.danger {
  border-color: var(--danger-border);
  background: var(--danger);
  color: #fff;
}
.btn.danger:hover:not(:disabled) { filter: brightness(1.08); }

/* Brand lockup. The lettermark is the default so a missing /logo.png never
   leaves an empty header; theme-init.js adds .has-logo once the real file
   loads, and the mark steps aside for it. */
.brand-logo {
  display: none;
  /* The file used to carry sixty pixels of transparent margin on every side,
     which was hidden with a clip-path and pulled back in with negative
     margins the width of the artwork. On a narrow phone that lockup escaped
     the header and sat over the navigation. The artwork is cropped in the
     file now, so this is only a height. */
  height: 34px;
  width: auto;
  max-width: 46vw;
  object-fit: contain;
}
@media (max-width: 640px) {
  .brand-logo { height: 28px; max-width: 42vw; }
}
/* Below about 420px the full lockup can only fit by being shrunk to the point
   where "DT Tigers" is unreadable anyway, so the head stands on its own — the
   same artwork with the wordmark cropped off, swapped in without a second
   <img> in every page's header. */
@media (max-width: 420px) {
  .brand.has-logo .brand-logo {
    content: url("/logo-mark.png");
    height: 30px;
    max-width: none;
  }
  header.topbar nav a { padding: 0 var(--sp-1); font-size: 0.8rem; }
  /* The chevron was reserving 32px for itself, which left "English" as
     "Englis". The gutter shrinks with the control. */
  header.topbar nav select {
    width: 84px;
    font-size: 0.8rem;
    padding-right: var(--sp-6);
    background-position: right var(--sp-2) center;
  }
}
@media (max-width: 360px) {
  header.topbar { padding-left: var(--sp-2); padding-right: var(--sp-2); gap: var(--sp-1); }
  header.topbar nav { gap: 2px; }
}
.brand.has-logo .brand-logo { display: block; }
.brand.has-logo .brand-mark,
.brand.has-logo .brand-text { display: none; }
/* The navy wordmark needs a restrained light plate on dark surfaces to retain
   contrast; the transparent image remains clear around the artwork. */
.brand-dark.has-logo,
.side .brand.has-logo,
:root[data-theme="dark"] .brand.has-logo {
  background: #fff;
  padding: 3px 8px;
  border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
  overflow: hidden;
}

/* Site footer. Carries the brand promise from the logo lockup so the tagline
   appears once, at the foot of the page, rather than competing with the hero. */
.site-foot {
  padding: var(--sp-8) clamp(var(--sp-4), 5vw, var(--sp-12)) var(--sp-10);
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
}
.site-foot p { margin: 0; }
/* The number to call and where we are: the two things somebody
   scrolling to the bottom of the page is looking for. */
.site-foot .foot-contact { margin: .4rem 0; font-weight: 600; }
.site-foot .foot-contact a { color: inherit; }
.brand-tagline {
  margin-bottom: var(--sp-2) !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold-700);
}

/* ------------------------------------------------------- deal documents --- */
.doc-list { margin-bottom: var(--sp-3); }
.doc-items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.doc-items li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
/* The file opens in a new tab rather than inline: an auditor checking a Ghana
   Card should not have it sitting in the page behind the next customer. */
.doc-open {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}
.doc-open:disabled { opacity: 0.6; cursor: progress; }
.doc-items small { color: var(--text-muted); font-size: 0.72rem; }
.doc-items code {
  margin-left: auto;
  font-size: 0.68rem;
  color: var(--text-muted);
}
.doc-upload {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--sp-2);
}
.doc-upload input[type="file"] { flex: 1 1 12rem; min-width: 0; font-size: 0.8rem; }

/* --------------------------------------------------------------- stepper ---
   The deal form asks for one category at a time. The rail shows how far along
   the agent is so a four-step form does not feel open-ended. */
.stepper {
  display: flex;
  gap: var(--sp-2);
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
  counter-reset: step;
  flex-wrap: wrap;
}
.stepper li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1 1 8rem;
  min-width: 0;
  padding-top: var(--sp-2);
  border-top: 3px solid var(--border);
  color: var(--text-muted);
  font-size: 0.76rem;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.stepper li.is-done { border-top-color: var(--success); color: var(--success); }
.stepper li.is-current { border-top-color: var(--accent); color: var(--accent); font-weight: 700; }
.stepper-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  flex: none;
  border-radius: 50%;
  background: var(--surface-inset);
  font-size: 0.7rem;
  font-weight: 700;
}
.stepper li.is-done .stepper-num { background: var(--success-soft); }
.stepper li.is-current .stepper-num { background: var(--accent-soft); }
.stepper-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* .static-grid sets display:grid and is defined later in this file, so it
   would otherwise win over .step-panel{display:none} and reveal every step at
   once. Two classes plus a pseudo-class outranks it without !important. */
.multi-step-form .step-panel:not(.active) { display: none; }

/* Steps slide in from the side the reader is travelling towards, so forward
   and backward feel like movement along one line rather than a reshuffle. */
.step-panel.active.from-right { animation: stepFromRight 260ms var(--ease); }
.step-panel.active.from-left { animation: stepFromLeft 260ms var(--ease); }

@keyframes stepFromRight {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes stepFromLeft {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Motion is decoration here; the step change is conveyed by the rail and the
   heading, both of which remain. */
@media (prefers-reduced-motion: reduce) {
  .step-panel.active,
  .step-panel.active.from-right,
  .step-panel.active.from-left { animation: none; }
}

.step-note { grid-column: 1 / -1; margin: 0; }
.step-nav { gap: var(--sp-2); }

.lead-wizard { margin-bottom: var(--sp-6); overflow: hidden; }
.lead-wizard .form-intro { margin-bottom: 0; }
.lead-wizard .stepper { margin-bottom: var(--sp-7); }
.lead-wizard .field.full { grid-column: 1 / -1; }
.lead-review { grid-column: 1 / -1; padding: var(--sp-5); border: 1px solid var(--accent-border); border-radius: var(--r-lg); background: var(--accent-soft); }
.lead-review dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--sp-4); margin: 0; }
.lead-review dt { color: var(--text-muted); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.lead-review dd { margin: var(--sp-1) 0 0; font-weight: 650; }
.lead-list h2 { margin-top: 0; }
.lead-row { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr) auto; align-items: center; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); }
.lead-row:last-child { border-bottom: 0; }
.lead-row small { display: block; margin-top: var(--sp-1); color: var(--text-muted); }
@media (max-width: 700px) {
  .lead-review dl { grid-template-columns: 1fr; }
  .lead-row { grid-template-columns: 1fr; }
}
/* Settings. Grouped cards, one decision per row, with the explanation under
   the field rather than in a manual nobody opens. Controls stay at least 44px
   tall so they remain usable on a phone. */
/* A grid track is auto-width by default, so a wide table or a long hint can
   push the whole page sideways. minmax(0,1fr) keeps the cards inside. */
.set-page { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
.set-group { padding: var(--sp-5); min-width: 0; }
.set-head h2 { margin: 0 0 var(--sp-1); font-size: 1.05rem; }
.set-head p { margin: 0 0 var(--sp-4); color: var(--text-muted); font-size: .9rem; }
.set-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.set-field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.set-field > label { font-weight: 600; font-size: .92rem; }
.set-field .hint { margin: 0; color: var(--text-muted); font-size: .82rem; line-height: 1.45; }
.set-field input, .set-field select { min-height: 44px; width: 100%; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: inherit; font: inherit; }
.set-input { display: flex; align-items: center; gap: var(--sp-2); }
.set-affix { color: var(--text-muted); font-size: .85rem; white-space: nowrap; }
.set-rule { margin-top: var(--sp-4); align-items: end; }
.set-rule-action { justify-content: flex-end; }
.set-rule-action .btn { min-height: 44px; }
.set-bar { position: sticky; bottom: 0; display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); box-shadow: 0 -6px 20px rgba(0,0,0,.06); }
.set-bar .btn { min-height: 44px; }
.set-bar span { color: var(--text-muted); font-size: .88rem; }

.compact-select { width: 100%; min-width: 10rem; margin-top: var(--sp-2); padding: var(--sp-2);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: inherit; }
.audit-filters { display: grid; grid-template-columns: repeat(5, minmax(9rem, 1fr)); gap: var(--sp-3);
  align-items: end; margin-bottom: var(--sp-4); padding: var(--sp-4); }
.audit-filters .field { margin: 0; }
.audit-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-4); }

@media (max-width: 900px) {
  .audit-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .audit-filters { grid-template-columns: 1fr; }
}

/* Support inbox, laid out like Gmail so staff recognise it on sight: one
   dense row per message, unread in bold on white, read on a tinted ground,
   and a reading view with the reply box at the bottom. The tokens keep it in
   the app's own palette in both light and dark themes. */
.gm { border: 1px solid var(--border); border-radius: var(--radius-lg, 14px); overflow: hidden; background: var(--surface); }
.gm-bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
.gm-search { position: relative; flex: 1; min-width: 0; }
.gm-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; fill: var(--text-muted); }
.gm-search input { width: 100%; padding: var(--sp-2) var(--sp-3) var(--sp-2) 34px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--surface-2, rgba(127,127,127,.08)); color: inherit; font: inherit; }
.gm-count { color: var(--text-muted); font-size: .85rem; white-space: nowrap; }
/* Inbox | Sent (18 October 2026). */
.gm-folders { flex: none; }
@media (max-width: 640px) { .gm-bar { flex-wrap: wrap; } .gm-folders { order: -1; width: 100%; } }

.gm-list { list-style: none; margin: 0; padding: 0; }
.gm-row { display: grid; grid-template-columns: auto minmax(7rem, 14rem) 1fr auto; align-items: center; gap: var(--sp-3);
  width: 100%; text-align: left; padding: var(--sp-3) var(--sp-4); border: 0; border-bottom: 1px solid var(--border);
  background: var(--surface-2, rgba(127,127,127,.05)); color: var(--text-muted); font: inherit; cursor: pointer; }
.gm-row:hover { background: var(--surface-3, rgba(127,127,127,.14)); }
.gm-row.is-unread { background: var(--surface); color: inherit; font-weight: 600; }
.gm-from, .gm-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-subject { color: var(--text); }
.gm-row.is-unread .gm-subject { font-weight: 700; }
.gm-snippet { color: var(--text-muted); font-weight: 400; }
.gm-date { color: var(--text-muted); font-size: .8rem; white-space: nowrap; }
.gm-empty { padding: var(--sp-6) var(--sp-4); color: var(--text-muted); }

.gm-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; font-weight: 700; }
.gm-avatar.lg { width: 44px; height: 44px; font-size: 1.1rem; }
.gm-avatar.sm { width: 28px; height: 28px; font-size: .85rem; }

.gm-read { padding: var(--sp-4); }
.gm-read-top { display: flex; align-items: center; gap: var(--sp-3); }
.gm-subject-line { margin: 0; font-size: 1.3rem; }
.gm-sender { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-4) 0; }
.gm-sender-text { display: flex; flex-direction: column; min-width: 0; }
.gm-sender-text small { color: var(--text-muted); }
.gm-sender .gm-date { margin-left: auto; }
.gm-banner { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.gm-frame { width: 100%; height: 28rem; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.gm-plain { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; background: var(--surface-2, rgba(127,127,127,.06));
  border: 1px solid var(--border); border-radius: 10px; padding: var(--sp-4); max-height: 28rem; overflow-y: auto; }

.gm-attachments { margin-top: var(--sp-4); }
.gm-attachments h3 { font-size: .9rem; margin: 0 0 var(--sp-2); color: var(--text-muted); }
.gm-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.gm-chip { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border);
  border-radius: 10px; text-decoration: none; color: inherit; background: var(--surface-2, rgba(127,127,127,.06)); max-width: 16rem; }
.gm-chip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-chip small { color: var(--text-muted); }
.gm-attachment-preview { display: block; margin-top: var(--sp-3); max-width: 22rem; width: 100%; border: 1px solid var(--border); border-radius: 10px; }

.gm-reply { margin-top: var(--sp-5); border: 1px solid var(--border); border-radius: 12px; padding: var(--sp-4); background: var(--surface); }
.gm-reply-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.gm-reply textarea { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: var(--sp-3);
  background: var(--surface-2, rgba(127,127,127,.04)); color: inherit; font: inherit; resize: vertical; }
.gm-reply-foot { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-3); }

@media (max-width: 700px) {
  .gm-row { grid-template-columns: auto 1fr auto; }
  .gm-from { grid-column: 2; }
  .gm-text { grid-column: 2; white-space: normal; }
  .gm-date { grid-column: 3; grid-row: 1; }
  .gm-frame { height: 22rem; }
}

/* Single-purpose customer mandate page. */
.mandate-shell { min-height:100vh; display:grid; place-items:center; padding:24px; }
.mandate-shell .login-card { width:min(620px,100%); padding:clamp(24px,5vw,44px); }
.mandate-shell .login-logo { display:block; width:150px; max-height:72px; object-fit:contain; margin:0 0 24px; }
.mandate-shell .quote-box { margin:20px 0; }
.mandate-shell .actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.mandate-shell .portal-cta { width:100%; justify-content:center; }

/* The auditor's form: one long page, filled in standing up at a counter, so
   it is a single column on a phone and two where there is room. */
.intake-shell { min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr); place-items:start center; padding:24px 16px 64px; }
.intake-shell .login-card { min-width:0; max-width:100%; }
.intake-shell .login-card { width:min(760px,100%); padding:clamp(20px,4vw,40px); }
.intake-shell .login-logo { display:block; width:140px; max-height:64px; object-fit:contain; margin:0 0 20px; }
.intake-shell .section-title { margin:28px 0 12px; }
.intake-shell .static-grid { grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); }
.intake-shell .quote-box { margin:18px 0; }
.intake-shell .portal-cta { width:100%; justify-content:center; margin-top:8px; }
.intake-error-summary { position:sticky; top:8px; z-index:5; margin:0 0 12px; box-shadow:var(--shadow-md); }
.intake-error-summary:not([hidden]) { display:block; }
.field.has-error input, .field.has-error select { border-color:var(--danger); box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 18%,transparent); }
/* One step at a time: a progress bar, the section, then Back and Next. */
.step-bar { margin:4px 0 20px; }
.step-progress { height:6px; border-radius:999px; background:var(--surface-muted); overflow:hidden; }
.step-progress > div { height:100%; width:12%; border-radius:999px; background:var(--primary); transition:width .25s ease; }
.step-count { margin:8px 0 0; color:var(--text-muted); font-size:.875rem; }
.intake-step[hidden] { display:none; }
.intake-step > .section-title:first-child { margin-top:0; }
.step-nav { display:flex; gap:10px; align-items:center; margin-top:20px; }
.step-nav .btn { min-width:120px; justify-content:center; }
.step-nav .portal-cta { flex:1; }
@media (max-width:520px) {
  .step-nav { flex-wrap:wrap; }
  .step-nav .btn { flex:1 1 140px; min-width:0; }
}
.check-row { display:flex; gap:10px; align-items:flex-start; margin:16px 0 4px; }
.check-row input { margin-top:3px; }
.terms-box { max-height:240px; overflow:auto; white-space:pre-wrap; padding:16px; border:1px solid var(--border); border-radius:8px; background:var(--surface-muted); line-height:1.55; }
.signature-pad { display:block; width:100%; height:160px; margin:8px 0; border:1px solid var(--border); border-radius:8px; background:#fff; touch-action:none; }
.phone-preview { display:grid; justify-items:center; gap:8px; margin:18px 0; }
.phone-preview img { width:min(240px,70vw); height:260px; object-fit:contain; }
.phone-preview figcaption { color:var(--text-muted); font-size:.875rem; }
/* A one-time link, shown to be copied: it must wrap and stay readable. */
.link-out { word-break:break-all; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85rem; }
/* Accounts kept only because their names are on old deals. */
.muted-row td { color: var(--text-muted); }

/* The owner's business summary, above the deal list. */
.summary-card { margin-bottom: 16px; }
.summary-card .section-title { margin-top: 0; }
.summary-figure { margin: 4px 0 8px; font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; }
.summary-card.is-late .summary-figure { color: var(--danger); }
.summary-pair { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }

/* The profit figure is the one number on this page that is good news, so it
   is the one that is not black. */
.summary-figure.is-good { color: var(--success); }

/* Three or four supporting figures under a headline. Each is a label, the
   number, and one line saying what it actually counts — because "still to
   come" means nothing on its own. */
.figure-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--border);
}

.figure-grid > div { min-width: 0; }
.figure-grid dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.figure-grid dd {
  margin: 2px 0 0;
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.figure-grid span {
  display: block;
  margin-top: 1px;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-subtle);
}
.figure-grid > div.is-late-cell dd { color: var(--danger); }
.figure-grid > div.is-late-cell { color: inherit; font-weight: inherit; }

/* A long list folded away under its own heading, so a screen of figures is
   not four thousand pixels above the thing it summarises. */
.fold {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  /* Not clipped (owner, 18 October 2026): on his iPhone a fold that clipped
     its contents drew nothing inside it, the search results included. The
     rounded corners are kept by the summary's own. */
  overflow: visible;
}
.fold > summary { border-radius: var(--r-lg); }
.fold[open] > summary { border-radius: var(--r-lg) var(--r-lg) 0 0; }

.fold > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  list-style: none;
}

.fold > summary::-webkit-details-marker { display: none; }
.fold > summary:hover { background: var(--surface-inset); }
.fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fold[open] > summary { border-bottom: 1px solid var(--border); }

.fold-title { flex: 1 1 auto; min-width: 0; font-weight: 700; }
.fold-count {
  flex: 0 0 auto;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--surface-inset);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
}
.fold > summary svg {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  color: var(--text-subtle);
  transition: transform var(--dur) var(--ease);
}
.fold[open] > summary svg { transform: rotate(180deg); }
.fold-body { padding: var(--sp-3); }
.fold-body > .tablebox { margin: 0; }

/* --------------------------------------------------------------------------
   Filter chips — the groups on the approval history
   --------------------------------------------------------------------------
   A row of taps, each with its own count, so "what did we turn down" is one
   tap rather than a search. They scroll sideways on a phone rather than
   wrapping into a block that pushes the table off the screen.
   -------------------------------------------------------------------------- */

.filter-chips {
  display: flex;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  padding-bottom: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: var(--tap);
  padding: 0 var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.filter-chip span {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-inset);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
}

.filter-chip:hover:not(:disabled) { border-color: var(--text-subtle); }
.filter-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.filter-chip.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.filter-chip.is-on span { background: rgb(255 255 255 / 0.22); color: inherit; }

/* A group with nothing in it is shown, greyed, rather than hidden: an empty
   "Written off" is information, and a row of chips that changes shape as
   deals move between groups is harder to use than one that does not. */
.filter-chip:disabled { opacity: 0.5; cursor: default; }

/* The customer's part of the landing page: what they pay, said plainly, with
   the cost of instalments in the same type size as the offer rather than in
   small print underneath it. */
.customer-offer { max-width: 1120px; margin: 0 auto; padding: 8px 20px 40px; }
.customer-inner { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); align-items: start; }
.customer-copy h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.15; margin: 0 0 12px; letter-spacing: -0.02em; }
.customer-sub { margin: 0 0 16px; font-size: 1.05rem; color: var(--text-muted); max-width: 46ch; }
.customer-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.customer-points li { position: relative; padding-left: 28px; line-height: 1.5; }
.customer-points li::before {
  content: ""; position: absolute; left: 0; top: 0.45em; width: 16px; height: 8px;
  border-left: 2.5px solid var(--primary); border-bottom: 2.5px solid var(--primary);
  transform: rotate(-45deg);
}
.customer-example { border: 1px solid var(--border); border-radius: 14px; padding: 20px; background: var(--surface); }
.customer-example-head { margin: 0 0 12px; font-weight: 700; }
.customer-example dl { margin: 0; display: grid; gap: 8px; }
.customer-example dl > div { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.customer-example dt { color: var(--text-muted); }
.customer-example dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.customer-example-foot { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); font-weight: 700; }
.customer-warning {
  margin: 24px 0 0; padding: 16px 18px; border-radius: 12px; line-height: 1.6;
  border: 1px solid var(--warning-border); background: var(--warning-soft); color: var(--text);
}
/* The customer section now sits between the hero and the sign-in card, so
   the card's lift over the hero would drag it onto the warning. */
.customer-offer + .shell { margin-top: var(--sp-6); }

/* The side menu is short enough to fit; a scrollbar inside it just looked
   like something was cut off. */
#sideNav { scrollbar-width: none; }
#sideNav::-webkit-scrollbar { width: 0; height: 0; }

/* The logo sat dark-on-dark on the auditor's form. It is a printed mark, so
   it gets its own light chip rather than being recoloured. */
.intake-shell .login-logo { background:#fff; padding:10px 14px; border-radius:12px; box-shadow:var(--shadow-1); }
/* What a good photograph of the handset looks like, and what a bad one does. */
.photo-guide { display:grid; gap:14px; margin:18px 0 4px; grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr)); }
.photo-guide figure { margin:0; text-align:center; }
.photo-guide img { width:100%; max-width:150px; height:auto; border-radius:12px; display:block; margin:0 auto 8px; }
.photo-guide figcaption { font-size:.85rem; color:var(--text-muted); line-height:1.45; }

/* The handset photographs.
 *
 * The two sides of the phone are one job, so they sit side by side, and the
 * examples come before the pickers rather than under them — an auditor
 * should see what a good picture looks like before taking a bad one.
 *
 * What has been taken is shown back: three file inputs reading "No file
 * chosen" is not evidence that anything was photographed, and somebody
 * standing at a counter needs to see the handset they just shot. */
.photo-guide { align-items: start; }
.photo-guide figure { padding: 10px 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2, transparent); }
.photo-guide figure.is-wrong { border-style: dashed; opacity: .85; }

.shot-grid { display: grid; gap: 14px; margin-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.shot-grid .field { margin: 0; }
.shot-grid input[type="file"] { width: 100%; }

.shot-preview { margin: 10px 0 0; }
.shot-preview img { display: block; width: 100%; max-height: 190px; object-fit: contain;
  border-radius: 12px; border: 1px solid var(--line); background: #0b1220; }
.shot-preview figcaption { display: flex; align-items: center; gap: 8px; justify-content: space-between;
  margin-top: 6px; font-size: .82rem; color: var(--text-muted); }
.shot-preview .shot-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot-preview .shot-taken { color: var(--success); font-weight: 700; white-space: nowrap; }

.shot-preview-list { display: grid; gap: 10px; margin-top: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.shot-preview-list figure { margin: 0; }
.shot-preview-list img { display: block; width: 100%; height: 120px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line); background: #0b1220; }
.shot-preview-list .doc-chip { display: flex; align-items: center; justify-content: center; height: 120px;
  border-radius: 10px; border: 1px dashed var(--line); font-weight: 700; color: var(--text-muted); }
.shot-preview-list figcaption { margin-top: 6px; font-size: .78rem; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The approval card: a verdict, three ticks, and a decision. */
.decision-card .section-title:first-child { margin-top: 0; }
.decision-verdict { margin: 4px 0 6px; font-size: clamp(1.1rem, 2.4vw, 1.45rem); font-weight: 800; letter-spacing: -0.01em; }
.decision-verdict.ok { color: var(--success); }
.decision-verdict.wait { color: var(--warning); }
.decision-verdict.locked { color: var(--danger); }
.decision-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.decision-checks li { position: relative; padding-left: 28px; line-height: 1.5; }
.decision-checks li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.decision-checks li.yes::before { content: "\2713"; color: var(--success); }
.decision-checks li.no::before { content: "\2717"; color: var(--danger); }

/* Photographs are evidence; evidence in another browser tab does not get
   looked at. Thumbnails in the list, full size on the same page. */
.doc-items li.is-image .doc-open { display: flex; align-items: center; gap: 10px; text-align: left; }
.doc-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-muted); }
.doc-viewer { margin: 14px 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.doc-viewer[hidden] { display: none; }
.doc-viewer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.doc-viewer img { display: block; width: 100%; max-height: 70vh; object-fit: contain; background: var(--surface-muted); }
/* Zoom in the document viewer (owner, 12 October 2026). */
/* Notices from the office (owner, 13 October 2026): there, never in the way. */
.notice-strip { display: grid; gap: 8px; margin: 0 0 14px; }
.notice-strip-head { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.notice-strip-head span { background: var(--warning-soft); color: var(--warning); border-radius: 999px; padding: 1px 8px; font-weight: 700; font-size: .8rem; }
.notice-card { border: 1px solid var(--warning-border); background: var(--warning-soft); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; }
.notice-card p { margin: 0; line-height: 1.45; overflow-wrap: anywhere; }
.notice-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.notice-card-actions .btn:only-child { grid-column: 1 / -1; }
/* Previous and next picture (owner, 13 October 2026). */
.doc-stage { position: relative; }
.doc-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 64px; border: 0; border-radius: 12px;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.doc-nav:hover { background: rgba(0, 0, 0, .75); }
.doc-nav-prev { left: 6px; } .doc-nav-next { right: 6px; }
.doc-nav[hidden] { display: none; }
.doc-zoom { overflow: auto; max-height: 75vh; touch-action: pan-x pan-y; }
/* No animation on the picture: the spot under the pointer has to stay put. */
.doc-zoom img { transition: none !important; }
.doc-zoom.is-zoomed { cursor: grab; }
.doc-zoom.is-zoomed:active { cursor: grabbing; }
.doc-zoom img { max-height: none; max-width: none; object-fit: initial; margin: 0 auto; height: auto; user-select: none; -webkit-user-drag: none; }
.doc-zoom-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.doc-zoom-level { min-width: 3.2em; text-align: center; font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--text-muted); }
.doc-zoom-hint { margin: 6px 14px 10px; }

/* Picking mail to delete: quiet until it is used. */
.gm-selectall { display:flex; align-items:center; gap:8px; padding:8px 14px; border-bottom:1px solid var(--border); font-size:.875rem; color:var(--text-muted); }
.gm-list li { display:flex; align-items:center; }
.gm-pick { display:flex; align-items:center; padding:0 6px 0 12px; }
.gm-list li .gm-row { flex:1; min-width:0; }
.is-late-cell { color: var(--danger); font-weight: 700; }
/* The language switch sits beside the theme switch. */
#languageToggle { font-weight: 800; font-size: 0.95rem; letter-spacing: 0; }

/* The form unfolds: a finished section stays on screen, quietly marked done,
   and the next one appears under it. */
.intake-step { border-left: 3px solid var(--border); padding-left: 16px; margin: 0 0 8px; }
.intake-step.is-done { border-left-color: var(--success); }
.intake-step[hidden] { display: none; }
/* An error on this form is read at arm's length, on a phone, in a shop, in
   daylight. Tinted panels do not survive that, so it is solid red with white
   text and a mark beside it — unmissable on purpose, in either theme. */
.step-error {
  margin: 12px 0 0;
  padding: 12px 14px 12px 42px;
  position: relative;
  border-radius: 10px;
  line-height: 1.5;
  /* Calm, not alarming (owner, 29 September 2026: "the red is too much"):
     a pale box with a red edge, like every other warning. */
  border: 1px solid var(--danger-border);
  border-left: 4px solid var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
  font-weight: 500;
}
.step-error::before {
  content: "!";
  position: absolute;
  left: 14px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--danger);
  color: var(--surface, #FFFFFF);
  font-size: 0.8rem;
  font-weight: 800;
}
/* The same treatment for the line at the top of the form, which is the one
   that says which section to look at. */
.intake-error-summary:not([hidden]) {
  display: block;
  background: var(--danger-soft);
  border-color: var(--danger-border);
  color: var(--danger);
  font-weight: 500;
}
.step-error[hidden] { display: none; }
.intake-error-summary[hidden] { display: none; }
@media (max-width: 520px) { .intake-step { padding-left: 12px; } }

/* People attached to a shop, each with a way off it. */
.chip { display:inline-flex; align-items:center; gap:6px; margin:0 6px 6px 0; padding:4px 8px;
  border:1px solid var(--border); border-radius:999px; background:var(--surface-muted); font-size:.85rem; }
.chip-x { border:0; background:none; cursor:pointer; color:var(--text-muted); font-size:1rem; line-height:1; padding:0 2px; }
.chip-x:hover { color:var(--danger); }

/* The sign-in has to be findable without scrolling: a shorter hero, the card
   beside the copy on a wide screen, and a direct link in the header for a
   phone, where the two columns become one. */
.hero { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
.hero-copy h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.1; margin: 0 0 12px; }
.hero-copy .hero-sub { margin: 0 0 16px; max-width: 46ch; }
.hero-copy .customer-points li { color: rgba(255,255,255,0.92); }
.hero-copy .customer-points li::before { border-color: #93C5FD; }
.nav-signin { font-weight: 700; }
@media (max-width: 860px) {
  .hero { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
  /* On a phone the card comes first: signing in is why staff open this page,
     and the customer story is still one scroll away. */
  .hero-inner { display: flex; flex-direction: column; }
  .hero-signin { order: -1; }
  .hero-copy .customer-points { display: none; }
}
/* A note on the decision card: worth reading, not a refusal. */
.decision-checks li.note { padding-left: 28px; }
.decision-checks li.note::before { content: "!"; color: var(--warning); font-weight: 800; }

/* The auditor's closing screen: what was done, what happens next, and the
   one thing they can still act on. */
.done-card { padding: 4px 0 8px; }
.done-reference { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-muted); font-size: .9rem; }
.done-lead { margin: 6px 0 4px; font-size: 1.15rem; font-weight: 700; line-height: 1.35; }
.done-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: done; }
.done-steps li { position: relative; padding-left: 34px; line-height: 1.5; counter-increment: done; }
.done-steps li::before {
  content: counter(done); position: absolute; left: 0; top: 0;
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-muted); border: 1px solid var(--border); font-weight: 700; font-size: .8rem;
}
.done-steps li.is-done::before { content: "\2713"; background: var(--success); border-color: var(--success); color: #fff; }
.done-steps li span { display: block; color: var(--text-muted); }
.done-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 8px; }
.done-actions .btn { flex: 1 1 8rem; justify-content: center; }


/* The wallet menu, for a customer who never saw the prompt. Numbered
   because they are read one at a time with a phone in the other hand. */
.approval-steps { margin: 6px 0 8px; padding-left: 22px; display: grid; gap: 4px;
  font-size: .9rem; color: var(--text); line-height: 1.5; }
.approval-steps li { padding-left: 2px; }
#approvalGuide { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--surface-2, transparent); }

/* --------------------------------------------------------------------------
   Customer care — the day's work, the week's numbers, one customer's case
   --------------------------------------------------------------------------
   Phone first. One column of cards on a phone, more from a tablet up; the
   amount to ask for in large type; call and WhatsApp as real buttons at the
   bottom of each card. Colours come from the intent tokens, and every colour
   is also said in words, so nothing depends on telling red from orange on a
   bright screen.
   -------------------------------------------------------------------------- */

.tone-good { background: var(--success); }
.tone-warn { background: #D98E04; }
.tone-bad { background: var(--danger); }
.tone-accent { background: var(--accent); }
.tone-due { background: var(--neutral-surface-highlight); }
.tone-none { background: var(--surface-inset); }

.care-scope { margin: 0 0 var(--sp-3); color: var(--text-muted); font-size: 0.9rem; }
.care-scope b { color: var(--text); }

/* Five headline figures. Two across on a phone, five across on a desk. */
.care-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
@media (min-width: 760px) { .care-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.care-tile {
  display: grid;
  gap: 2px;
  align-content: start;
  min-height: 76px;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.care-tile span { color: var(--text-muted); font-size: 0.78rem; font-weight: 600; line-height: 1.25; }
.care-tile b { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.care-tile small { color: var(--text-subtle); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.care-tile.is-alert b { color: var(--danger); }
.care-tile.is-warn b { color: var(--warning); }
.care-tile.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.care-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The fifth tile would sit alone on a phone; let it take the whole row. */
/* A last tile left on its own fills the row; otherwise the two columns stay even. */
@media (max-width: 759px) { .care-tiles .care-tile:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* At a glance: this week's collection and who is behind, side by side. */
.care-glance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.glance-part { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.glance-part p { margin: 0; }
.glance-wide { flex: 1 1 220px; display: block; }
.glance-title { font-weight: 700; font-size: 0.85rem; margin-bottom: 4px !important; }
.glance-figure { font-weight: 600; font-variant-numeric: tabular-nums; }
.care-glance .ring { width: 64px; height: 64px; flex: 0 0 auto; }
.care-glance .btn.glance-more { margin-left: auto; min-height: var(--tap); }

/* A row of buttons inside a card: no box around it, full-size targets. */
.case-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.case-buttons .btn { min-height: var(--tap); }
.task-list .btn, .attempt-list .btn, .case-line .btn, .case-card > .btn { min-height: var(--tap); }

/* The ring: how much of this week's money has come in. */
.ring { width: 96px; height: 96px; }
.ring-track { fill: none; stroke: var(--surface-inset); stroke-width: 9; }
.ring-fill { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; }
.ring-fill.is-good { stroke: var(--success); }
.ring-fill.is-low { stroke: var(--danger); }
.ring-text { font-size: 17px; font-weight: 700; fill: var(--text); font-family: inherit; }

.stack-bar { display: flex; height: 14px; overflow: hidden; border-radius: 999px; background: var(--surface-inset); gap: 2px; }
.stack-bar span { display: block; min-width: 6px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; padding: 0; list-style: none;
  font-size: 0.82rem; color: var(--text-muted); }
.chart-legend li { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.chart-legend b { color: var(--text); font-variant-numeric: tabular-nums; }

.bar-rows { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: 8px; }
.bar-rows li { display: grid; grid-template-columns: minmax(84px, 38%) 1fr 2.5em; align-items: center; gap: 8px; font-size: 0.86rem; }
.bar-label { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 10px; border-radius: 999px; background: var(--surface-inset); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 999px; }
.bar-value { text-align: right; font-variant-numeric: tabular-nums; }

.week-bars { width: 100%; height: auto; max-height: 180px; display: block; }
.week-bars .bar-due { fill: var(--neutral-surface-highlight); }
.week-bars .bar-in { fill: var(--accent); }
.week-bars .bar-axis { font-size: 9px; fill: var(--text-muted); font-family: inherit; }
.week-bars .bar-baseline { stroke: var(--border); }

/* My numbers: four cards, one column on a phone. */
.chart-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.chart-card { padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); min-width: 0; }
.chart-card h3 { margin: 0 0 var(--sp-3); font-size: 1rem; }
.chart-card .hint { margin: 6px 0 0; }
.chart-row { display: flex; align-items: center; gap: var(--sp-4); }
.chart-figure { margin: 0; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-sub { margin: var(--sp-2) 0 var(--sp-2); font-size: 0.82rem; font-weight: 600; color: var(--text-muted); }

/* The work list. */
.care-list { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.care-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-left: 4px solid var(--success);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.care-card.risk-orange { border-left-color: #D98E04; }
.care-card.risk-red { border-left-color: var(--danger); }
.care-card-main {
  display: grid;
  gap: 6px;
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.care-card-main:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.care-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); min-width: 0; }
.care-name { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.care-ref { font-size: 0.72rem; color: var(--text-subtle); flex: 0 0 auto; }
.care-card-money { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.care-amount { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.care-amount.is-late { color: var(--danger); }
.care-amount.is-fine { font-size: 1rem; color: var(--success); }
.care-amount-label { color: var(--text-muted); font-size: 0.85rem; }
.care-card-money small { color: var(--text-muted); font-size: 0.8rem; }
.care-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 0.86rem; color: var(--text-muted); }
.care-facts li.is-alert { color: var(--danger); font-weight: 600; }
.care-facts li.is-next { color: var(--text); font-weight: 600; }
.fact-label { color: var(--text-subtle); }
.fact-label::after { content: ":"; }
.care-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.care-card-actions {
  display: flex;
  gap: var(--sp-2);
  margin-top: auto;
  padding: var(--sp-2) var(--sp-4) var(--sp-3);
  border-top: 1px solid var(--border);
}
.care-card-actions .btn { flex: 1 1 0; justify-content: center; min-height: var(--tap); }

.mini-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-inset);
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}
.mini-chip.is-ok { background: var(--success-soft); border-color: var(--success-border); color: var(--success); }
.mini-chip.is-warn { background: var(--warning-soft); border-color: var(--warning-border); color: var(--warning); }
.mini-chip.is-bad { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); }

/* One customer's case. */
.case-head { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.case-kicker, .case-head h2 { padding-right: 52px; }
.case-head h2 { margin: 0; }
.case-head .hint { margin: 0; }
.case-kicker { margin: 0; color: var(--text-muted); font-size: 0.82rem; }
.case-due { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.case-due > div { display: grid; gap: 2px; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-inset); }
.case-due span { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
.case-due b { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.case-due small { color: var(--text-muted); font-size: 0.8rem; }
.case-due .is-late { background: var(--danger-soft); border-color: var(--danger-border); }
.case-due .is-late b { color: var(--danger); }
.case-next { margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); font-weight: 600; font-size: 0.92rem; }
.case-next.tone-bad { background: var(--danger-soft); color: var(--danger); }
.case-next.tone-next { background: var(--accent-soft); color: var(--text); }
.case-next.tone-ok { background: var(--success-soft); color: var(--success); }
.case-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.case-actions .btn { flex: 1 1 8rem; justify-content: center; min-height: var(--tap); }

.case-tabs {
  position: sticky;
  top: calc(-1 * clamp(var(--sp-5), 3vw, var(--sp-8)));
  z-index: 2;
  display: flex;
  gap: 4px;
  margin: 0 calc(-1 * clamp(var(--sp-5), 3vw, var(--sp-8))) var(--sp-3);
  padding: var(--sp-2) clamp(var(--sp-5), 3vw, var(--sp-8));
  overflow-x: auto;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.case-tabs button {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--tap);
  padding: 0 4px;
  font-size: 0.9rem;
  white-space: nowrap;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
@media (max-width: 400px) { .case-tabs button { font-size: 0.84rem; } }
.case-tabs button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }
.case-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.case-pane { display: grid; gap: var(--sp-3); }
.case-pane[hidden] { display: none; }
.case-card { padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); min-width: 0; }
.case-card h3 { margin: 0 0 var(--sp-3); font-size: 1rem; }
.case-card p { margin: 0 0 var(--sp-2); }
.case-card.is-alert { border-color: var(--danger-border); }
.case-progress { height: 10px; border-radius: 999px; background: var(--surface-inset); overflow: hidden; }
.case-progress span { display: block; height: 100%; background: var(--success); }
.case-facts { display: grid; gap: var(--sp-2); margin: var(--sp-3) 0 0; }
.case-facts > div { display: flex; justify-content: space-between; gap: var(--sp-3); }
.case-facts dt { color: var(--text-muted); white-space: nowrap; }
.case-facts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; display: grid; }
.case-facts dd small { color: var(--text-muted); font-size: 0.78rem; }
.case-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.case-line small { color: var(--text-muted); width: 100%; }

.task-list, .request-list, .contact-history, .attempt-list, .week-list, .team-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.task-list li, .attempt-list li { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-2);
  padding: var(--sp-2) 0; border-top: 1px solid var(--border); }
.task-list li:first-child, .attempt-list li:first-child { border-top: 0; }
.task-list p, .attempt-list p { margin: 4px 0 0; }
.request-list li, .contact-history li { padding: var(--sp-2) 0; border-top: 1px solid var(--border); }
.request-list li:first-child, .contact-history li:first-child { border-top: 0; }
.request-list p, .contact-history p { margin: 4px 0 0; }
.request-list small, .contact-history small, .attempt-list small { color: var(--text-muted); margin-left: 4px; }
.contact-history .outcome-promised, .contact-history .outcome-reached { background: var(--success-soft); border-color: var(--success-border); color: var(--success); }
.contact-history .outcome-no_answer, .contact-history .outcome-left_message { background: var(--warning-soft); border-color: var(--warning-border); color: var(--warning); }
.contact-history .outcome-wrong_number, .contact-history .outcome-dispute { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); }

.week-list li { display: grid; grid-template-columns: 4.4em 1fr auto auto; align-items: center; gap: var(--sp-2);
  padding: 6px 0; border-top: 1px solid var(--border); font-size: 0.86rem; }
.week-list li:first-child { border-top: 0; }
.week-no { font-weight: 600; white-space: nowrap; }
.week-date { color: var(--text-muted); }
.week-amount { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.week-list .mini-chip { justify-self: end; }

.case-form { display: grid; gap: var(--sp-3); }
.case-form .notice:empty { display: none; }
.outcome-group { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
.outcome-group legend { font-size: 0.85rem; font-weight: 500; margin-bottom: 6px; padding: 0; }
.outcome-chip { position: relative; }
.outcome-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.outcome-chip span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface);
  font-size: 0.88rem; font-weight: 600;
}
.outcome-chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.outcome-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.promise-fields { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.promise-fields[hidden] { display: none; }
.check-line { display: flex; align-items: center; gap: var(--sp-2); font-size: 0.9rem; }
.check-line input { width: 20px; height: 20px; }
.case-request { margin-top: var(--sp-2); }
.case-request .case-form { padding: var(--sp-3); }

/* The office's view of the care team. */
.care-team { margin-bottom: var(--sp-4); }
.team-list li { padding: var(--sp-3) 0; border-top: 1px solid var(--border); display: grid; gap: var(--sp-2); }
.team-list li:first-child { border-top: 0; }
.team-list li.is-off { opacity: 0.75; }
.team-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--sp-2); margin: 0; }
.team-figures > div { padding: var(--sp-2); border-radius: var(--r-md); background: var(--surface-inset); }
.team-figures dt { font-size: 0.74rem; color: var(--text-muted); font-weight: 600; }
.team-figures dd { margin: 2px 0 0; font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.team-figures .is-late, .team-figures small.is-late { color: var(--danger); }
.team-list .case-buttons { margin-top: 0; }
.request-list .case-buttons { margin-top: var(--sp-2); }

.manual-pay-side .btn, .request-list .btn { min-height: var(--tap); }

/* In-page dialogs (uiAlert, uiConfirm, uiPrompt in admin.js) — the browser's
   own boxes cannot be translated, so every message is shown here instead. */
.ui-dialog-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; padding: var(--sp-4);
  background: rgb(0 0 0 / 0.6);
  /* The page behind steps back, so the one thing being asked is plain. */
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.ui-dialog {
  width: min(460px, 100%); max-height: 85vh; overflow-y: auto;
  display: grid; gap: var(--sp-4); padding: var(--sp-5);
  border: 1px solid var(--border); border-radius: var(--r-xl);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
}
.ui-dialog-message { margin: 0; white-space: pre-line; line-height: 1.55; overflow-wrap: anywhere; }
.ui-dialog-input { width: 100%; min-height: var(--tap); padding: 0 var(--sp-3);
  border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text); font: inherit; }
.ui-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); }
.ui-dialog-actions .btn { min-height: var(--tap); min-width: 6.5rem; justify-content: center; }
@media (max-width: 480px) { .ui-dialog-actions .btn { flex: 1 1 0; } }

/* A form check in the page's language, under the field it is about. */
.field-invalid { margin: 4px 0 0; color: var(--danger); font-size: 0.82rem; font-weight: 600; }

/* --------------------------------------------------------------------------
   The page behind the code on a shop's counter
   --------------------------------------------------------------------------
   Opened on a shopkeeper's phone, often in dark mode, often one-handed with a
   customer waiting. So: one column, generous space between every part, the
   one thing that matters — the button — full width at the bottom, and the
   navy wordmark on its own white plate so it reads in either theme. */
.shop-page { min-height: 100vh; min-height: 100dvh; background: var(--bg); color: var(--text); }
.shop-shell {
  max-width: 520px; margin: 0 auto;
  padding: max(var(--sp-6), env(safe-area-inset-top)) var(--sp-4) max(var(--sp-8), env(safe-area-inset-bottom));
  display: grid; gap: var(--sp-5);
}
.shop-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--shadow-md); padding: var(--sp-6);
  display: grid; gap: var(--sp-5);
}
.shop-brand {
  justify-self: start; background: #fff; border-radius: var(--r-lg); padding: var(--sp-2) var(--sp-4);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.18); line-height: 0;
}
.shop-brand img { display: block; width: 152px; height: auto; max-height: 52px; object-fit: contain; }
.shop-eyebrow {
  margin: 0; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent);
}
.shop-card h1 { margin: calc(var(--sp-3) * -1) 0 0; font-size: clamp(1.6rem, 6vw, 2rem); line-height: 1.15; letter-spacing: -.01em; }
.shop-intro { margin: 0; color: var(--text-muted); font-size: 1rem; line-height: 1.55; }

.shop-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.shop-steps li {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); background: var(--surface-inset);
  font-size: .92rem; color: var(--text);
}
.shop-steps span {
  flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: .8rem; font-weight: 700;
}

.shop-form { display: grid; gap: var(--sp-5); }
.shop-form .field { display: grid; gap: var(--sp-2); margin: 0; }
.shop-form label { font-weight: 600; font-size: .92rem; }
.shop-form input, .shop-form select {
  width: 100%; min-height: 48px; padding: 0 var(--sp-4); font-size: 1rem;
  border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text);
}
.shop-form input:focus-visible, .shop-form select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.shop-customer {
  margin: 0; padding: var(--sp-5) var(--sp-4) var(--sp-4); border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg); display: grid; gap: var(--sp-4); min-width: 0;
}
.shop-customer legend { padding: 0 var(--sp-2); font-weight: 600; }
.shop-customer .optional {
  margin-left: var(--sp-2); padding: 2px 8px; border-radius: var(--r-pill); background: var(--surface-inset);
  color: var(--text-muted); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.shop-customer .hint { margin: calc(var(--sp-2) * -1) 0 0; }
.shop-name-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 480px) {
  .shop-name-grid { grid-template-columns: 1fr 1fr; }
  .shop-name-grid .field:last-child { grid-column: 1 / -1; }
}
.shop-send { width: 100%; min-height: 52px; font-size: 1.05rem; border-radius: var(--r-lg); margin-top: var(--sp-1); }

.shop-done { display: grid; gap: var(--sp-3); justify-items: center; text-align: center; padding: var(--sp-4) 0; }
.shop-done h2 { margin: 0; font-size: 1.4rem; }
.shop-done p { margin: 0; }
.shop-done-mark {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: var(--success-soft); color: var(--success);
}
.shop-done-mark svg { width: 32px; height: 32px; }
.shop-foot { margin: 0; text-align: center; color: var(--text-muted); font-size: .8rem; }
.shop-card .notice { margin: 0; }

/* The fleet's views: all, on a plan, not on a plan, name differs. */
.fleet-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.fleet-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.fleet-filter {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 40px; padding: 0 var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); color: var(--text);
  font: inherit; font-size: .88rem; cursor: pointer;
}
.fleet-filter b { font-variant-numeric: tabular-nums; color: var(--text-muted); font-weight: 600; }
.fleet-filter:hover { border-color: var(--border-strong); }
.fleet-filter.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.fleet-filter.is-on b { color: #fff; }
.fleet-warning {
  margin: var(--sp-2) 0 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  background: var(--warning-soft); border: 1px solid var(--warning-border); color: var(--warning); font-size: .82rem;
}

/* The link dialog (uiLink in admin.js): a link to pass on, shown as text so
   no keyboard comes up, one tap to copy, and the phone's share sheet. */
.ui-link-dialog { gap: var(--sp-4); }
.ui-link-head { display: flex; align-items: center; gap: var(--sp-3); }
.ui-link-icon {
  flex: 0 0 40px; height: 40px; border-radius: var(--r-lg); display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.ui-link-icon svg { width: 20px; height: 20px; }
.ui-link-title { margin: 0; font-size: 1.1rem; font-weight: 600; letter-spacing: -.005em; }
.ui-link-dialog .ui-dialog-message { color: var(--text-muted); }
.ui-link-box {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg);
  background: var(--surface-inset); border: 1px solid var(--border);
  max-height: 7.5em; overflow-y: auto;
}
.ui-link-url {
  display: block; font-family: var(--font-mono); font-size: .85rem; line-height: 1.5;
  color: var(--text); word-break: break-all; user-select: all; -webkit-user-select: all;
}
.ui-link-status { margin: 0; }
.ui-link-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.ui-link-actions .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; border-radius: var(--r-lg); font-weight: 600;
}
.ui-link-actions .btn svg { width: 18px; height: 18px; flex: 0 0 18px; }
/* Copying is the thing people come here to do, so it spans the row. */
.ui-link-actions .ui-link-copy { grid-column: 1 / -1; }
/* Copied reads as done in either theme: the soft green, not white on mint. */
.ui-link-actions .ui-link-copy.is-done { background: var(--success-soft); border-color: var(--success-border); color: var(--success); }
/* With no share sheet (a desktop browser), Done sits alone and spans too. */
.ui-link-actions .btn:last-child:nth-child(2) { grid-column: 1 / -1; }

/* Adding an auditor by hand: name, number, button, on one line when there
   is room for it. */
.auditor-add {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  align-items: end;
  margin-top: var(--sp-4);
}
.auditor-add .field { margin: 0; }
@media (min-width: 720px) {
  .auditor-add { grid-template-columns: 2fr 1.4fr auto; }
}

/* The auditor's number, already on file: shown in part, with a way to say
   it has changed. */
.on-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-inset);
}
.on-file-number { font-family: var(--font-mono, ui-monospace, monospace); font-weight: 700; letter-spacing: 0.04em; }
.on-file-tag { font-size: 0.82rem; color: var(--success); }
.on-file .linkish { margin-left: auto; padding: 0; border: 0; background: none; color: var(--primary, inherit);
  text-decoration: underline; cursor: pointer; font: inherit; font-size: 0.88rem; }
.field-label { font-size: 0.85rem; font-weight: 500; color: var(--text); }

/* --------------------------------------------------------------------------
   Customer page: documents icon, paying ahead, asking customer care
   -------------------------------------------------------------------------- */

/* Documents and receipts sit behind a small icon in the corner of the plan
   card rather than taking a section of their own. */
.plan-card { position: relative; }
.doc-btn {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-inset);
  color: var(--text-muted);
  cursor: pointer;
}
.doc-btn:hover, .doc-btn[aria-expanded="true"] { color: var(--text); border-color: var(--text-subtle); }
.doc-btn svg { width: 20px; height: 20px; }
.doc-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--primary, #0059D5);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 18px;
}
.doc-pop {
  position: absolute;
  z-index: 5;
  top: calc(var(--sp-3) + 50px);
  right: var(--sp-3);
  width: min(280px, calc(100% - 2 * var(--sp-3)));
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  text-align: left;
}
.doc-pop-head {
  margin: var(--sp-2) var(--sp-2) var(--sp-1);
  color: var(--text-subtle);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.doc-item {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 44px;
  padding: var(--sp-2);
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
}
.doc-item:hover, .doc-item:focus-visible { background: var(--surface-inset); }
.doc-item small { color: var(--text-muted); white-space: nowrap; }
.doc-pop-empty { margin: 0 var(--sp-2) var(--sp-2); color: var(--text-muted); font-size: 0.85rem; }

/* Several weeks ahead: a count to step up and down, what it covers and costs. */
.pay-ahead {
  margin: var(--sp-4) 0;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-inset);
}
.pay-ahead .plan-section-sub { margin: 0 0 var(--sp-3); }
.pay-ahead-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); }
.stepper-btn {
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 1.3rem;
  cursor: pointer;
}
.stepper-btn:disabled { color: var(--text-subtle); cursor: default; }
.stepper output { min-width: 2ch; text-align: center; font-weight: 700; font-size: 1.1rem; }
.pay-ahead-sum { margin: 0; color: var(--text-muted); font-size: 0.9rem; text-align: right; }
.pay-ahead-sum b { display: block; color: var(--text); font-size: 1.1rem; }
.pay-ahead .btn { width: 100%; margin-top: var(--sp-3); }
.pay-ahead .plan-section-note { margin-top: var(--sp-2); }

/* Asking customer care: a call back, or a message, and what came of it. */
.help-actions { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
@media (min-width: 480px) { .help-actions { grid-template-columns: 1fr 1fr; } }
.ask-form { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); text-align: left; }
.ask-form label { font-size: 0.85rem; font-weight: 500; }
.ask-form textarea {
  width: 100%;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  resize: vertical;
}
.help-card .notice { margin: var(--sp-3) 0 0; text-align: left; }
.ask-list { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border); text-align: left; }
.ask-list-head { margin: 0 0 var(--sp-2); color: var(--text-subtle); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; }
.help-card .ask-list p { margin-bottom: var(--sp-2); }
.ask-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; }
.ask-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.ask-state { flex: none; font-size: 0.8rem; font-weight: 600; }
.ask-state.is-waiting { color: var(--warning); }
.ask-state.is-done { color: var(--success); }

/* The corner icon must not sit on top of a long handset name. */
.plan-card .plan-phone, .plan-card .plan-shop { padding: 0 48px; }

/* --------------------------------------------------------------------------
   Customer care: checking payments, one customer at a time
   --------------------------------------------------------------------------
   Built for a phone held in one hand: one customer on the screen, the record
   as a strip of twelve weeks, and three answers big enough for a thumb. */
.check-progress { margin-bottom: var(--sp-4); }
.check-progress-top { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-2); color: var(--text-muted); }
.check-progress-top b { color: var(--text); font-size: 1.1rem; }
.check-progress-top b span { font-weight: 400; color: var(--text-muted); }
.check-progress .linkish, .tour-later {
  margin-left: auto; padding: 0; border: 0; background: none; color: var(--primary); font: inherit;
  font-size: 0.88rem; text-decoration: underline; cursor: pointer;
}
.check-bar { height: 8px; border-radius: var(--r-pill); background: var(--surface-inset); overflow: hidden; }
.check-bar i { display: block; height: 100%; border-radius: inherit; background: var(--success); transition: width 0.3s ease; }

.check-help { margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border);
  border-radius: var(--r-lg); background: var(--surface); }
.check-help summary { font-weight: 600; cursor: pointer; }
.check-how { margin: var(--sp-3) 0 0; padding-left: 1.3em; display: grid; gap: var(--sp-2); line-height: 1.5; }
.check-how li::marker { font-weight: 700; color: var(--primary); }

.check-card {
  padding: var(--sp-5) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.check-kicker { margin: 0 0 var(--sp-1); color: var(--text-subtle); font-size: 0.82rem; }
.check-card h3 { margin: 0; font-size: 1.35rem; }
.check-sub { margin: var(--sp-1) 0 var(--sp-3); color: var(--text-muted); font-size: 0.88rem; }
.check-card .case-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.check-card .case-actions .btn { justify-content: center; min-height: 48px; }

.check-record { margin-top: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-lg); background: var(--surface-inset); }
.check-label { margin: 0 0 var(--sp-3); color: var(--text-subtle); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; }
.check-weeks { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.check-week {
  display: grid; place-items: center; height: 36px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  font-size: 0.85rem; font-weight: 600;
}
.check-week i { font-style: normal; }
.check-week.is-paid { border-color: transparent; background: var(--success-soft); color: var(--success); }
.check-week.is-late { border-color: transparent; background: var(--danger-soft, #FDECEC); color: var(--danger); }
.check-week.is-part { border-style: dashed; color: var(--warning); }
.check-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: var(--sp-2) 0 0;
  color: var(--text-muted); font-size: 0.78rem; }
.check-legend .dot { width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--border); background: var(--surface); }
.check-legend .dot.is-paid { border-color: transparent; background: var(--success); }
.check-legend .dot.is-late { border-color: transparent; background: var(--danger); }
.check-facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin: var(--sp-4) 0 0; }
.check-facts dt { color: var(--text-muted); font-size: 0.8rem; }
.check-facts dd { margin: 2px 0 0; font-weight: 600; }
.check-facts dd.is-late { color: var(--danger); }
.check-dates { margin-top: var(--sp-3); }
.check-dates summary { color: var(--primary); font-size: 0.88rem; cursor: pointer; }
.check-dates ul { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.check-dates li { display: grid; grid-template-columns: 5em 1fr auto; gap: var(--sp-2); padding: 6px 0;
  border-bottom: 1px solid var(--border); font-size: 0.86rem; }
.check-dates li:last-child { border-bottom: 0; }

.check-question { margin: var(--sp-5) 0 var(--sp-3); font-size: 1.1rem; font-weight: 700; }
.check-answers { display: grid; gap: var(--sp-2); }
.check-answers .btn { min-height: 52px; justify-content: center; font-size: 1rem; }
.check-yes { background: var(--success); border-color: var(--success); color: #fff; }
:root[data-theme="dark"] .check-yes { color: #04130D; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .check-yes { color: #04130D; } }

.check-differ { margin-top: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); }
.check-differ fieldset { margin: 0 0 var(--sp-3); padding: 0; border: 0; }
.check-differ legend { margin-bottom: var(--sp-2); font-weight: 600; }
.check-differ .check-row { margin: 0; padding: var(--sp-2) 0; min-height: 44px; align-items: center; }
.check-differ textarea { width: 100%; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text); font: inherit; resize: vertical; }
.check-differ .btn[type="submit"] { width: 100%; min-height: 48px; margin-top: var(--sp-2); }
.check-differ .notice { margin: var(--sp-2) 0 0; }
.check-nav { display: flex; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-4); }

.check-done { text-align: center; }
.check-done-mark { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto var(--sp-3);
  border-radius: 50%; background: var(--success-soft); color: var(--success); font-size: 1.6rem; font-weight: 700; }
.check-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin: var(--sp-4) 0; }
.check-totals div { padding: var(--sp-3) var(--sp-2); border-radius: var(--r-md); background: var(--surface-inset); }
.check-totals dt { color: var(--text-muted); font-size: 0.78rem; }
.check-totals dd { margin: 4px 0 0; font-size: 1.3rem; font-weight: 700; }

/* On Today, until every customer has been checked. */
.check-reminder {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
  margin-bottom: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--primary);
  border-radius: var(--r-lg); background: var(--surface);
}
.check-reminder > div { flex: 1 1 220px; }
.check-reminder-title { margin: 0; font-weight: 700; }
.check-reminder .hint { margin: 2px 0 var(--sp-2); }
.check-reminder .btn { min-width: 120px; min-height: 44px; justify-content: center; }

/* The first sign-in tour: one card in the middle of the screen, the whole
   screen on a phone. */
.tour {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--sp-4);
  background: rgba(8, 12, 20, 0.62); backdrop-filter: blur(3px);
}
.tour-card {
  position: relative; width: min(440px, 100%); max-height: calc(100vh - 2 * var(--sp-4)); overflow-y: auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-5); border-radius: var(--r-xl); background: var(--surface);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); text-align: center;
}
.tour-skip { position: absolute; top: var(--sp-3); right: var(--sp-3); min-height: 44px; padding: 0 var(--sp-3);
  border: 0; background: none; color: var(--text-muted); font: inherit; cursor: pointer; }
.tour-icon { display: grid; place-items: center; width: 72px; height: 72px; margin: var(--sp-2) auto var(--sp-4);
  border-radius: 50%; background: var(--surface-inset); color: var(--primary); }
.tour-icon svg { width: 34px; height: 34px; }
.tour-card h2 { margin: 0 0 var(--sp-3); font-size: 1.35rem; }
.tour-body { margin: 0 auto; max-width: 34ch; color: var(--text-muted); font-size: 1.02rem; line-height: 1.6; }
.tour-body b { color: var(--text); }
.tour-how { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg);
  background: var(--surface-inset); text-align: left; font-size: 0.92rem; }
.tour-how .check-how { margin: 0; }
.tour-dots { display: flex; justify-content: center; gap: 6px; margin: var(--sp-5) 0 var(--sp-4); }
.tour-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.tour-dots i.is-on { width: 22px; border-radius: var(--r-pill); background: var(--primary); }
.tour-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--sp-2); }
.tour-actions .btn { min-height: 50px; justify-content: center; font-size: 1rem; }
.tour-later { display: block; margin: var(--sp-3) auto 0; min-height: 44px; }
@media (max-width: 480px) {
  .tour { padding: 0; place-items: stretch; }
  .tour-card { width: 100%; max-height: 100vh; min-height: 100%; border-radius: 0; display: flex; flex-direction: column;
    justify-content: center; padding: var(--sp-6) var(--sp-5); }
}
.tour-actions > :only-child { grid-column: 1 / -1; }

/* Customer care's ready-made messages: each one's wording shown under its
   name, so what is picked is what is read. */
.message-pick { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
.message-pick fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: var(--sp-2); }
.message-pick legend { margin-bottom: var(--sp-2); font-weight: 600; }
.message-option { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; }
.message-option input { margin-top: 3px; }
.message-option span { display: grid; gap: 2px; }
.message-option small { color: var(--text-muted); line-height: 1.45; }
.message-option.is-off { opacity: 0.55; cursor: default; }
.message-pick textarea { width: 100%; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text); font: inherit; }

/* The privacy notice: long-form reading, comfortable on a phone. */
.portal-shell.legal { max-width: 760px; line-height: 1.65; }
.legal-meta { margin: 0 0 var(--sp-4); color: var(--text-subtle); font-size: 0.88rem; }
.legal-lead { font-size: 1.05rem; }
.legal h2 { margin: var(--sp-8) 0 var(--sp-3); font-size: 1.15rem; }
.legal ul { padding-left: 1.2em; display: grid; gap: var(--sp-2); }
.legal-contents { margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-5); border: 1px solid var(--border);
  border-radius: var(--r-lg); background: var(--surface); }
.legal-contents ol { margin: 0; padding-left: 1.2em; columns: 2; column-gap: var(--sp-6); }
@media (max-width: 520px) { .legal-contents ol { columns: 1; } }
.legal-contact { display: grid; gap: var(--sp-2); margin: var(--sp-4) 0 0; padding: var(--sp-4); border-radius: var(--r-lg);
  background: var(--surface-inset); }
.legal-contact div { display: grid; grid-template-columns: 11em 1fr; gap: var(--sp-3); }
.legal-contact dt { color: var(--text-muted); }
.legal-contact dd { margin: 0; font-weight: 600; }
@media (max-width: 520px) { .legal-contact div { grid-template-columns: 1fr; gap: 0; } }
.legal-table { width: 100%; border-collapse: collapse; margin: var(--sp-3) 0; font-size: 0.93rem; }
.legal-table th, .legal-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.legal-table th { color: var(--text-muted); font-weight: 600; }
.legal-foot-link { color: inherit; text-decoration: underline; }

/* The office's view of a payment-check difference: the record and what
   customer care found, side by side on a wide screen, stacked on a phone. */
.check-diff-head { display: grid; gap: 2px; margin-bottom: var(--sp-3); }
.check-diff { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-3); }
@media (max-width: 640px) { .check-diff { grid-template-columns: 1fr; } }
.check-diff > div { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--surface-inset); }
.check-diff .check-diff-found { background: var(--warning-soft); }
.check-diff-label { margin: 0 0 var(--sp-2); color: var(--text-subtle); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; }
.check-diff dl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin: 0; }
.check-diff dt { color: var(--text-muted); font-size: 0.8rem; }
.check-diff dd { margin: 0; font-weight: 600; }
.check-diff-found p { margin: 0 0 var(--sp-2); }

/* Giving one customer to another care person, from their panel. */
.assign-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.assign-row label { font-size: 0.85rem; color: var(--text-muted); }
.assign-row select { min-width: 10rem; }

/* A care person's photograph: large on their own profile, small on the
   customer's plan page beside their name. */
.profile-card { display: grid; gap: var(--sp-5); max-width: 640px; }
.profile-photo { display: flex; gap: var(--sp-5); align-items: center; flex-wrap: wrap; }
.avatar-large { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; overflow: hidden;
  background: var(--surface-inset); color: var(--text-muted); font-size: 2rem; font-weight: 700; flex: none; }
.avatar-large img { width: 100%; height: 100%; object-fit: cover; }
.profile-photo-actions { display: grid; gap: var(--sp-2); justify-items: start; flex: 1 1 220px; }
.profile-photo-actions .hint { margin: 0; }
.profile-facts { margin: 0; }
.profile-facts dt { color: var(--text-muted); font-size: 0.85rem; }
.profile-facts dd { margin: 2px 0 0; font-weight: 600; font-size: 1.05rem; }
.profile-facts dd small { display: block; font-weight: 400; font-size: 0.82rem; color: var(--text-subtle); }
.profile-username { display: grid; gap: var(--sp-3); justify-items: start; }
.profile-username .field { width: 100%; max-width: 360px; margin: 0; }
.help-avatar { display: block; width: 72px; height: 72px; margin: 0 auto var(--sp-3); border-radius: 50%; object-fit: cover;
  border: 3px solid var(--surface-inset); }

/* Customer care's own records, sent to the office. */
.records-send { margin-top: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); }
.records-send summary { font-weight: 600; cursor: pointer; }
.records-send form { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.records-send input[type="file"] { max-width: 100%; }
.records-send textarea { width: 100%; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text); font: inherit; }
.records-send .btn[type="submit"] { justify-self: start; min-height: 44px; }
.records-note-label { font-size: 0.85rem; font-weight: 500; }
.records-sent-head { margin: var(--sp-3) 0 var(--sp-1); color: var(--text-subtle); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; }
.records-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.records-list li { display: grid; gap: 2px; }
.records-list .linkish { justify-self: start; padding: 0; border: 0; background: none; color: var(--primary); font: inherit;
  text-decoration: underline; cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.records-list small { color: var(--text-muted); }
.records-office { margin-top: var(--sp-2); }
.records-office summary { cursor: pointer; color: var(--primary); font-size: 0.9rem; }
.records-office .records-list { margin-top: var(--sp-2); }
.records-send textarea, .records-send input[type="file"] { box-sizing: border-box; }
.records-send input[type="file"] { width: 100%; padding: var(--sp-3); border: 1px dashed var(--border); border-radius: var(--r-md); }

/* --------------------------------------------------------------------------
   Inbox: conversations with customers
   --------------------------------------------------------------------------
   Laptop: the list on the left, the open conversation on the right, both the
   height of the screen. Phone: the list fills the screen; opening a
   conversation replaces it, with "All messages" to go back, and the reply
   box sits at the bottom where the thumb is. */
.inbox {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  /* The screen's height less the page heading, so the reply box is always
     in view without scrolling the page. */
  height: max(440px, calc(100vh - 250px));
  height: max(440px, calc(100dvh - 250px));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  overflow: hidden;
}
.inbox-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); }
.inbox-tools { display: grid; gap: var(--sp-2); padding: var(--sp-3); border-bottom: 1px solid var(--border); }
.inbox-tools input[type="search"] { width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-inset); color: var(--text); font: inherit; }
.inbox-filters { display: flex; gap: var(--sp-2); }
.inbox-filter { min-height: 36px; padding: 0 var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-pill);
  background: none; color: var(--text-muted); font: inherit; font-size: 0.88rem; cursor: pointer; }
.inbox-filter.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
:root[data-theme="dark"] .inbox-filter.is-on { color: #06142b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .inbox-filter.is-on { color: #06142b; } }
.inbox-filter b { margin-left: 4px; }
.inbox-rows { list-style: none; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; flex: 1; }
.inbox-day { padding: var(--sp-3) var(--sp-3) var(--sp-1); font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); }
/* Customers | the team, above the Inbox (18 October 2026). */
.inbox-mode { margin: 0 0 var(--sp-3); }
.inbox-quiet { color: var(--text-subtle); font-weight: 400; }
.inbox-mode .inbox-filter b { margin-left: 4px; }
.inbox-thread-who { min-width: 0; display: grid; }
.inbox-thread-who b { font-size: 1rem; }
.inbox-thread-who small { color: var(--text-muted); }
.inbox-row { display: flex; gap: var(--sp-3); align-items: center; width: 100%; min-height: 64px; padding: var(--sp-3);
  border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.inbox-row:hover { background: var(--surface-inset); }
.inbox-row.is-open { background: var(--surface-inset); box-shadow: inset 3px 0 0 var(--primary); }
.inbox-avatar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface-inset); color: var(--text-muted); font-size: 0.85rem; font-weight: 700; }
.inbox-row.is-open .inbox-avatar, .inbox-row:hover .inbox-avatar { background: var(--surface); }
.inbox-row-main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.inbox-row-top { display: flex; justify-content: space-between; gap: var(--sp-2); align-items: baseline; }
.inbox-row-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.inbox-row-top time { flex: none; color: var(--text-subtle); font-size: 0.78rem; }
.inbox-row-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 0.88rem; }
.inbox-row.is-unread .inbox-row-top b, .inbox-row.is-unread .inbox-row-preview { color: var(--text); font-weight: 700; }
.inbox-you { color: var(--text-subtle); }
.inbox-callback { color: var(--warning); font-weight: 600; }
.inbox-unread { flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--primary);
  color: #fff; font-size: 0.75rem; font-weight: 700; line-height: 22px; text-align: center; }
.inbox-empty { padding: var(--sp-6) var(--sp-4); color: var(--text-muted); text-align: center; line-height: 1.5; }

.inbox-thread { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.inbox-placeholder { display: grid; place-items: center; color: var(--text-muted); }
.inbox-thread-head { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border); }
.inbox-back { display: none; min-height: 40px; padding: 0 var(--sp-2); border: 0; background: none; color: var(--primary);
  font: inherit; font-weight: 600; cursor: pointer; }
.inbox-who { flex: 1; min-width: 0; }
.inbox-who h3 { margin: 0; font-size: 1.05rem; }
.inbox-who p { margin: 2px 0 0; color: var(--text-muted); font-size: 0.82rem; }
.inbox-actions { display: flex; gap: var(--sp-2); }
.inbox-messages { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2); background: var(--surface-inset); }
.bubble-row { display: flex; }
.bubble-row.is-out { justify-content: flex-end; }
.bubble { max-width: min(78%, 520px); padding: var(--sp-2) var(--sp-3); border-radius: 16px; background: var(--surface);
  border: 1px solid var(--border); }
.bubble-row.is-in .bubble { border-bottom-left-radius: 4px; }
.bubble-row.is-out .bubble { border-bottom-right-radius: 4px; background: var(--primary); border-color: var(--primary); color: #fff; }
:root[data-theme="dark"] .bubble-row.is-out .bubble { color: #06142b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bubble-row.is-out .bubble { color: #06142b; } }
.bubble.is-callback { border-color: var(--warning); }
.bubble.is-callback .bubble-body { color: var(--warning); font-weight: 600; }
.bubble-kind { margin: 0 0 2px; color: var(--warning); font-size: 0.78rem; font-weight: 700; }
.bubble-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
/* A better-worded version of a reply, offered under the box (18 October 2026). */
.polish { margin: var(--sp-2) 0 0; padding: var(--sp-3); border-left: 3px solid var(--accent); border-radius: var(--r-md); background: var(--accent-soft); display: grid; gap: var(--sp-2); }
.polish-label { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.polish-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; color: var(--text); }
.polish-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.inbox-reply .polish { grid-column: 1 / -1; }
/* The pay buttons an automatic reply gave the customer (owner, 18 October 2026). */
.bubble-offer { margin: 6px 0 0; font-size: .82rem; font-weight: 600; opacity: .85; }
.bubble-offer span { white-space: nowrap; }
/* A question the office asked a care person, in the team thread (18 October 2026). */
.bubble.is-question { border-left: 3px solid var(--warning); }
.bubble-row.is-out .bubble.is-question { border-left-color: rgba(255, 255, 255, .7); }
.bubble-row.is-out .bubble-kind { color: inherit; opacity: .85; }
.bubble-ref { margin: 4px 0 0; font-size: .78rem; opacity: .8; }
.bubble-state { margin: 6px 0 0; font-size: .8rem; font-weight: 600; display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
/* Its picture and the answer's photos (18 October 2026). */
.inbox-messages .bubble.has-media { width: min(520px, 92%); max-width: 92%; }
.team-pic { margin-top: var(--sp-2); }
.team-pic .qp { color: var(--text); background: var(--surface); border-radius: var(--r-md); padding: var(--sp-2); }
.team-docs { margin-top: var(--sp-2); display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.team-doc { display: grid; gap: 4px; justify-items: start; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.team-doc img { display: block; width: 132px; height: 132px; object-fit: cover; border-radius: 10px; background: var(--surface-inset); border: 1px solid var(--border); }
.team-doc small { font-size: .74rem; opacity: .85; }
/* What was let off a plan, said at the top of its record; the office's choice on a late return (18 October 2026). */
.rec-alert.rec-letoff b { font-size: 1.05rem; }
.return-take { display: grid; gap: 6px; margin: 0 0 var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); }
.return-take legend { font-weight: 700; padding: 0 4px; }
.return-take .check-row { display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-3); text-align: left; }
/* A radio inside a .field would otherwise be drawn as a text box. */
.return-take .check-row input[type="radio"] { flex: 0 0 22px; width: 22px; height: 22px; min-height: 0; margin: 0; padding: 0; }
/* What is waiting for the office, at sign-in (19 October 2026). */
.wait-card { display: grid; gap: var(--sp-3); max-width: 520px; width: calc(100% - 32px); }
.wait-card h2 { margin: 0; }
.wait-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); max-height: 60vh; overflow: auto; }
.wait-list li { display: flex; gap: var(--sp-3); align-items: center; justify-content: space-between; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-inset); }
.wait-list li > div { min-width: 0; }
.wait-list b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.wait-list small { display: block; color: var(--text-muted); font-size: .8rem; margin-top: 2px; }
.wait-list .btn { flex: none; }
.bubble-meta { margin: 4px 0 0; font-size: 0.72rem; opacity: 0.75; }
.bubble-warn { font-weight: 700; }
.inbox-reply { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); align-items: end;
  padding: var(--sp-3); border-top: 1px solid var(--border); background: var(--surface); }
.inbox-reply textarea { box-sizing: border-box; width: 100%; min-height: 44px; max-height: 160px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border); border-radius: 22px; background: var(--surface-inset); color: var(--text); font: inherit; resize: none; }
.inbox-reply .btn { min-height: 44px; border-radius: 22px; }
.inbox-reply-hint { grid-column: 1 / -1; margin: 0; color: var(--text-subtle); font-size: 0.76rem; }
.inbox-reply .notice { grid-column: 1 / -1; margin: 0; }

/* The menu item's count, and a dot on the phone's menu button. */
.nav-count { display: inline-block; min-width: 20px; height: 20px; margin-left: 8px; padding: 0 6px; border-radius: 10px;
  background: var(--danger); color: #fff; font-size: 0.72rem; font-weight: 700; line-height: 20px; text-align: center; vertical-align: middle; }
/* The dot sits on the button wherever it is; the button keeps its own
   position (on a phone it is fixed at the top right). */
.nav-toggle.has-unread::after { content: ''; position: absolute; top: 6px; right: 6px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--surface); }

@media (max-width: 860px) {
  .inbox { grid-template-columns: 1fr; height: calc(100dvh - 150px); min-height: 460px; }
  .inbox-list { border-right: 0; }
  .inbox.is-reading .inbox-list { display: none; }
  .inbox:not(.is-reading) .inbox-thread { display: none; }
  .inbox-back { display: inline-flex; align-items: center; width: 100%; padding: 0; }
  .inbox-thread-head { padding: var(--sp-2) var(--sp-3); }
  .inbox-actions { width: 100%; }
  .inbox-actions .btn { flex: 1; justify-content: center; min-height: 40px; }
  .bubble { max-width: 86%; }
}

/* The customer's conversation with customer care, on their plan page. */
.chat { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border); text-align: left;
  display: flex; flex-direction: column; gap: var(--sp-2); }
.chat-row { display: flex; }
.chat-row.is-me { justify-content: flex-end; }
.chat-bubble { max-width: 85%; padding: var(--sp-2) var(--sp-3); border-radius: 16px; background: var(--surface-inset); }
.chat-row.is-me .chat-bubble { background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
:root[data-theme="dark"] .chat-row.is-me .chat-bubble { color: #06142b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chat-row.is-me .chat-bubble { color: #06142b; } }
.chat-row.is-them .chat-bubble { border-bottom-left-radius: 4px; }
.help-card .chat-bubble p { margin: 0; color: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-bubble small { display: block; margin-top: 2px; font-size: 0.72rem; opacity: 0.75; }
.help-card .chat-kind { font-weight: 600; }
.help-card .chat-note { margin: var(--sp-1) 0 0; color: var(--warning); font-size: 0.85rem; }

/* Paying any amount: the figure, then what it pays. */
.pay-any { margin: var(--sp-4) 0; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface-inset); }
.pay-any .plan-section-sub { margin: 0 0 var(--sp-3); }
.pay-any-input { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-3); border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface); }
.pay-any-input span { color: var(--text-muted); font-weight: 600; }
.pay-any-input input { flex: 1; min-width: 0; min-height: 52px; border: 0; background: none; color: var(--text);
  font: inherit; font-size: 1.35rem; font-weight: 700; outline: none; }
.pay-any-input:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
.pay-any-preview { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface); font-size: 0.93rem; }
.pay-any-preview.is-error { color: var(--danger); border-color: var(--danger); }
.pay-any-head { margin: 0 0 var(--sp-2); color: var(--text-subtle); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; }
.pay-any-preview ul { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: grid; gap: 6px; }
.pay-any-preview li { display: flex; justify-content: space-between; gap: var(--sp-3); }
.pay-any-preview li.is-paid b { color: var(--success); }
.pay-any-preview li.is-part b { color: var(--warning); }
.pay-any-preview li small { color: var(--text-muted); }
.pay-any-line, .pay-any-phone, .pay-any-fee { margin: var(--sp-2) 0 0; line-height: 1.45; }
.pay-any-line.is-ok, .pay-any-phone.is-ok { color: var(--success); }
.pay-any-phone.is-warn { color: var(--warning); font-weight: 600; }
.pay-any-fee { color: var(--text-muted); font-size: 0.85rem; }
.pay-any .btn { width: 100%; margin-top: var(--sp-3); }

/* The office's per-customer choice about part payments and the lock. */
.partial-row { margin-top: var(--sp-2); }
.partial-row .check-row { margin: 0; align-items: flex-start; }
.partial-row small { display: block; color: var(--text-muted); font-weight: 400; }
.partial-chip { display: inline-block; margin-top: var(--sp-2); padding: 2px 10px; border-radius: var(--r-pill);
  background: var(--warning-soft); color: var(--warning); font-size: 0.8rem; font-weight: 600; }
.pay-any-input input, .pay-any-input input:focus, .pay-any-input input:focus-visible { border: 0 !important; box-shadow: none !important; outline: none !important; padding: 0; background: none; }
.pay-any-preview li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: var(--sp-2); }
.pay-any-preview li span { white-space: nowrap; }
.pay-any-preview li b { text-align: right; white-space: nowrap; font-size: 0.92rem; }
.pay-any-preview li small { display: block; font-size: 0.75rem; }

/* Questions about payments (customer care): why we ask, the three records
   side by side, and big answers to tap. */
.question-how { margin: var(--sp-3) 0 0; padding-left: 1.3em; display: grid; gap: var(--sp-2); line-height: 1.5; }
.question-how li::marker { font-weight: 700; color: var(--primary); }
.question-why { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg);
  background: var(--warning-soft); border: 1px solid var(--warning-border); }
.question-why .check-label { margin-bottom: var(--sp-1); color: var(--warning); }
.question-why p:last-child { margin: 0; line-height: 1.5; }
.question-sources { display: grid; gap: var(--sp-2); margin: var(--sp-4) 0; }
.question-sources div { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border); }
.question-sources dt { color: var(--text-muted); font-size: 0.88rem; }
.question-sources dd { margin: 0; font-weight: 600; text-align: right; }
.question-choices { display: grid; gap: var(--sp-2); }
.question-choice { display: grid; gap: 2px; width: 100%; min-height: 56px; padding: var(--sp-3) var(--sp-4); text-align: left;
  font: inherit; color: var(--text); background: var(--surface); border: 2px solid var(--border); border-radius: var(--r-lg);
  cursor: pointer; transition: border-color 0.15s var(--ease), background 0.15s var(--ease); }
.question-choice b { font-size: 1.05rem; }
.question-choice small { color: var(--text-muted); }
.question-choice:hover { border-color: var(--accent-border); }
.question-choice.is-chosen { border-color: var(--accent); background: var(--accent-soft); }
.question-choice:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.question-other { margin-top: var(--sp-3); }
.question-save { margin-top: var(--sp-4); display: grid; gap: var(--sp-2); }
.question-save .notice { margin: 0; }
.question-save .btn { min-height: 52px; justify-content: center; }
.question-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.question-list li { display: grid; gap: 2px; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border);
  border-radius: var(--r-lg); background: var(--surface); }
.question-list span { color: var(--text-muted); font-size: 0.85rem; }
.question-list small { color: var(--text-muted); line-height: 1.45; }
.question-sources div.is-quote { display: grid; gap: 4px; }
.question-sources div.is-quote dd { text-align: left; font-weight: 500; }
.question-sources dd small { display: block; margin-top: 2px; color: var(--text-muted); font-weight: 400; }

/* Customer page: the weekly payment is the big number on the plan card, and
   what is left on the whole plan is the small card below it (25 Sep 2026). */
.plan-due-label {
  margin: 0 0 var(--sp-1);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.plan-remaining.is-late { color: var(--danger); }
.plan-card .plan-remaining-label + .plan-due-note { margin-top: calc(-1 * var(--sp-3)); }
.plan-due-note {
  margin: 0 0 var(--sp-4);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.plan-card .portal-cta { width: 100%; min-height: 46px; }
.left-card { border-color: var(--border); background: var(--surface); }
/* The customer's page, pared down (owner, 29 September 2026). */
.plan-progress { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.plan-progress-text { margin: 0 0 var(--sp-2); color: var(--muted); font-size: .95rem; }
.plan-progress-text b { color: var(--text); }
.plan-payoff { display: block; width: 100%; margin-top: var(--sp-3); padding: var(--sp-2) 0; border: 0; background: none;
  color: var(--primary, var(--accent)); font: inherit; text-align: center; text-decoration: underline; cursor: pointer; min-height: 44px; }
.plan-payoff-save { display: block; font-size: .85rem; color: var(--ok, #12805c); text-decoration: none; }
.plan-autopay { margin: var(--sp-3) 0 0; text-align: center; color: var(--ok, #12805c); font-weight: 600; }
.left-card .weekbar { margin-top: var(--sp-1); }
/* Five figures: the shop's name takes a row of its own. */
.plan-facts > div.is-wide { grid-column: 1 / -1; }

/* The shared queue: customers nobody in customer care owns (25 Sep 2026). */
.shared-hint { margin: 0 0 var(--sp-3); }
.shared-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.shared-list li { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.shared-main { display: grid; gap: 2px; min-width: 0; }
.shared-main small { color: var(--text-muted); overflow-wrap: anywhere; }
.shared-side { display: grid; gap: 4px; justify-items: end; align-content: start; text-align: right; }
.shared-side small { color: var(--text-muted); }
.shared-side .is-late { color: var(--danger); }
.shared-side .btn { min-height: 44px; }
.shared-office { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border);
  border-radius: var(--r-lg); background: var(--surface); }
.shared-office summary { font-weight: 600; cursor: pointer; }
.shared-office[open] summary { margin-bottom: var(--sp-3); }

/* Shop form: an MTN wallet in someone else's name, shown on its own statement. */
.statement-box { margin-top: var(--sp-3); padding: var(--sp-4); border: 1px dashed var(--warning-border);
  border-radius: var(--r-lg); background: var(--warning-soft); display: grid; gap: var(--sp-3); }
.statement-box > p { margin: 0; line-height: 1.5; }
.statement-box .notice:empty { display: none; }

/* Signatures are dark ink on a transparent background: on a dark screen they
   vanished. They sit on white, like paper, whatever the theme. */
.doc-thumb.is-signature, .doc-viewer img.is-signature { background: #fff; }

/* Ideas and requests from customer care (26 Sep 2026). */
.idea-form .idea-kinds { border: 0; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: var(--sp-1); }
.idea-form .idea-kinds legend { font-weight: 600; margin-bottom: var(--sp-1); }
.idea-form .check-row { margin: var(--sp-1) 0; }
.idea-list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: var(--sp-2); }
.idea-item { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.idea-item p { margin: var(--sp-2) 0 0; line-height: 1.5; white-space: pre-wrap; }
.idea-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.idea-head small { color: var(--text-muted); }
.idea-reply { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--accent-soft); }
.idea-answer { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.idea-answer .compact-input { flex: 1 1 180px; min-height: 40px; padding: 0 var(--sp-3); border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface); color: var(--text); font: inherit; }
.mini-chip.is-info { background: var(--info-soft); border-color: var(--info-border); color: var(--info); }
.mini-chip.is-muted { color: var(--text-muted); }

/* Today: payment received, the direct debit link, and today so far (26 Sep 2026). */
/* Two equal halves, the same height as the buttons above; one alone fills the row
   (owner, 10 October 2026: "this section must be symmetrical"). */
.care-card-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 var(--sp-4) var(--sp-3); }
.care-card-more .btn { width: 100%; min-height: 44px; padding: 0 10px; justify-content: center; text-align: center; white-space: normal; line-height: 1.2; }
.care-card-more.is-single > .btn { grid-column: 1 / -1; }
.care-card-more .care-dd-sent { grid-column: 1 / -1; }
.care-card > .dd-slot { display: block; padding: 0 var(--sp-4) var(--sp-3); }
.care-dd-sent { color: var(--text-muted); }
.care-today-so-far { margin: 0 0 var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.care-today-so-far dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin: var(--sp-2) 0 0; }
.care-today-so-far dt { color: var(--text-muted); font-size: 0.8rem; }
.care-today-so-far dd { margin: 2px 0 0; font-size: 1.3rem; font-weight: 700; }
.care-today-so-far dd small { display: block; font-size: 0.75rem; font-weight: 500; color: var(--text-muted); }
.care-today-so-far dd.is-late { color: var(--danger); }
@media (max-width: 480px) { .care-today-so-far dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The office: statement matching, the morning card, held plans (26 Sep 2026). */
.statement-match-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin: var(--sp-3) 0; }
.statement-match-head { margin: var(--sp-3) 0 var(--sp-1); }
.statement-match-list { margin: 0; padding-left: 1.2em; display: grid; gap: 2px; }
.morning-card { margin-bottom: var(--sp-4); }
.morning-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); }
.morning-item { display: grid; gap: 2px; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); text-align: left; font: inherit; color: var(--text); }
button.morning-item { cursor: pointer; }
.morning-item b { font-size: 1.5rem; }
.morning-item span { color: var(--text-muted); font-size: 0.85rem; line-height: 1.3; }
.morning-item small { color: var(--text-subtle); font-size: 0.78rem; }
.morning-item.is-alert { border-color: var(--danger-border); background: var(--danger-soft); }
.morning-item.is-alert b { color: var(--danger); }
.morning-more { margin-top: var(--sp-3); }
.morning-more summary { cursor: pointer; font-weight: 600; }
.morning-more ul { margin: var(--sp-2) 0 0; padding-left: 1.2em; display: grid; gap: 4px; }
.held-banner { margin: var(--sp-3) 0; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--warning-border);
  border-radius: var(--r-lg); background: var(--warning-soft); }
.held-banner p { margin: 0 0 var(--sp-2); }
.held-banner p:last-child { margin-bottom: 0; }

/* The morning card's numbers open the plans behind them (26 Sep 2026). */
.morning-item[aria-expanded="true"] { outline: 2px solid var(--accent, var(--text)); outline-offset: 1px; }
.morning-list { margin-top: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-lg); }
.morning-list-head { display: flex; gap: var(--sp-2); align-items: baseline; flex-wrap: wrap; }
.morning-list-head [data-morning-close] { margin-left: auto; }
.morning-list ul { margin: var(--sp-2) 0; padding-left: 1.2em; display: grid; gap: 6px; }
.morning-list li { overflow-wrap: anywhere; }

/* The owner's dashboard (26 Sep 2026). */
.owner-dash { margin-bottom: var(--sp-4); }
.dash-head { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; justify-content: space-between; }
.dash-head .section-title { margin: 0; }
.dash-period { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.dash-dates { display: inline-flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.dash-dates[hidden] { display: none; }
.dash-period select, .dash-dates input, .dash-dates .btn { min-height: 44px; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-3); margin: var(--sp-3) 0 var(--sp-4); }
.dash-box { display: flex; flex-direction: column; padding: var(--sp-4); border: 1px solid var(--border);
  border-top: 3px solid var(--border-strong, var(--border)); border-radius: var(--r-lg); background: var(--surface); min-width: 0; }
.dash-box.is-alert { border-top-color: var(--danger); }
.dash-box.is-alert .dash-big { color: var(--danger); }
.dash-label { color: var(--text-muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.dash-big { font-size: 2rem; line-height: 1.15; margin-top: var(--sp-1); font-variant-numeric: tabular-nums; }
.dash-sub { color: var(--text-subtle); font-size: 0.8rem; min-height: 1.2em; }
.dash-figures { margin: var(--sp-3) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--border); display: grid; gap: 6px; }
.dash-figures div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.dash-figures dt { color: var(--text-muted); font-size: 0.85rem; }
.dash-figures dd { margin: 0; font-weight: 600; font-size: 0.9rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dash-figures .is-profit dt, .dash-figures .is-profit dd { color: var(--success); }
.dash-tables { display: grid; gap: var(--sp-4); }
.dash-table h4 { margin: 0 0 var(--sp-2); }
.dash-table td.is-late { color: var(--danger); font-weight: 600; }
.phones-tabs { margin: 0 0 var(--sp-3); }
.book-shop-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); font-weight: 600; }
.ledger-split { display: block; color: var(--text-subtle); }
.stats-updated { grid-column: 1 / -1; margin: 0; color: var(--text-subtle); font-size: 0.78rem; }
.fleet-spoilt { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px dashed var(--border); }
.fleet-spoilt p { margin: 0 0 var(--sp-2); font-size: 0.85rem; }
.fleet-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
/* Overdue rates in bands: under 10% green, 10–24% orange, 25% and over red. */
.dash-table td.rate-good { color: var(--success); font-weight: 600; }
.dash-table td.rate-warn { color: var(--warning); font-weight: 600; }
.dash-table td.rate-bad { color: var(--danger); font-weight: 600; }
.dash-box.rate-good { border-top-color: var(--success); }
.dash-box.rate-warn { border-top-color: var(--warning-border); }
.dash-box.rate-warn .dash-big { color: var(--warning); }
.dash-box.rate-bad { border-top-color: var(--danger); }
.dash-box.rate-bad .dash-big { color: var(--danger); }
/* Today, kept apart from the period's figures. */
.dash-today { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--sp-2); margin: var(--sp-2) 0;
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md, 8px); background: var(--surface); }
.dash-today small { color: var(--text-subtle); }
.dash-table .dash-expand { margin-top: var(--sp-2); min-height: 44px; }
/* Five short columns: they fit a phone, so no sideways scrolling. */
.dash-table table { min-width: 0; table-layout: fixed; }
.dash-table th:first-child, .dash-table td:first-child { width: 34%; overflow-wrap: anywhere; }
.dash-table th.num, .dash-table td.num { text-align: right; }
@media (max-width: 600px) {
  .dash-table th, .dash-table td { padding: var(--sp-2) var(--sp-2); font-size: 0.82rem; }
  .dash-table th { white-space: normal; font-size: 0.64rem; letter-spacing: 0.03em; }
  .dash-table th:first-child, .dash-table td:first-child { width: 28%; }
}
.dash-figures dt { white-space: nowrap; }
.dash-figures div { gap: var(--sp-2); }
@media (max-width: 600px) {
  .dash-table th:first-child, .dash-table td:first-child { width: 24%; }
  .dash-table th { font-size: 0.6rem; letter-spacing: 0.02em; padding-left: 4px; padding-right: 4px; }
}

/* Today's orders, the Blacklist, and plan actions (26 Sep 2026). */
.orders-bar { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.orders-bar .filter-chips { margin: 0; }
.orders-day { display: inline-flex; gap: var(--sp-2); align-items: center; color: var(--text-muted); font-size: 0.9rem; }
.orders-day input { min-height: 44px; }
.blacklist-table table { min-width: 0; }
.blacklist-table td small { display: block; color: var(--text-muted); }
.plan-actions { margin: var(--sp-3) 0; }
.plan-action-buttons { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.plan-action-buttons [aria-pressed="true"] { border-color: var(--text); }
.plan-action-form { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
.plan-figures { display: grid; gap: 6px; margin: 0; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-lg); }
.plan-figures div { display: flex; justify-content: space-between; gap: var(--sp-3); }
.plan-figures dt { color: var(--text-muted); }
.plan-figures dd { margin: 0; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plan-figures .is-profit dd { color: var(--success); }
.plan-figures .is-late dd { color: var(--danger); }
.plan-figures .is-total { padding-top: 6px; border-top: 1px solid var(--border); }
.plan-figures .is-total dd { font-size: 1.1rem; }
.blacklist-table { margin-top: var(--sp-4); }

/* Order management's customer list (26 Sep 2026). */
.book-bar { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.book-bar .filter-chips { margin: 0; }
.book-search { min-height: 44px; min-width: 0; flex: 1 1 260px; max-width: 420px; padding: 0 var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--r-md, 8px); background: var(--surface); color: var(--text); font: inherit; }
.book-box table.book-table { min-width: 0; }
.book-table td small { display: block; color: var(--text-muted); font-size: 0.8rem; }
.book-table td.num, .book-table th.num { text-align: right; white-space: nowrap; }
.book-table tbody tr { cursor: pointer; }
.book-table tbody tr:hover, .book-table tbody tr:focus-visible { background: var(--surface-2); outline: none; }
.book-remark { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 260px; }
.book-cards { display: none; list-style: none; margin: 0; padding: 0; }
@media (max-width: 760px) {
  .book-box { display: none; }
  .book-cards { display: grid; gap: var(--sp-2); }
  .book-card { display: grid; gap: 4px; width: 100%; padding: var(--sp-3); text-align: left; font: inherit; color: var(--text);
    border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); cursor: pointer; }
  .book-card:active { background: var(--surface-2); }
  .book-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
  .book-card-head b:last-child { white-space: nowrap; }
  .book-card-sub { color: var(--text-muted); font-size: 0.8rem; }
  .book-card-lines { margin: var(--sp-2) 0 0; padding-top: var(--sp-2); border-top: 1px solid var(--border); display: grid; gap: 4px; }
  .book-card-lines div { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: 0.85rem; }
  .book-card-lines dt { color: var(--text-muted); flex: 0 0 auto; }
  .book-card-lines dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
}

/* Devices page filter (27 Sep 2026). */
.device-filters { margin: var(--sp-3) 0; }

/* Staff page tabs; the number inside the Call button; the guarantor on a
   care card (27 Sep 2026). */
.staff-tabs { margin-bottom: var(--sp-4); }
.staff-pane[hidden] { display: none; }
.call-btn { flex-direction: column; gap: 0; line-height: 1.15; }
.call-btn .call-label { font-weight: 700; }
.call-btn .call-number { font-size: 0.78rem; font-weight: 500; opacity: 0.92; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.care-guarantor { margin: 0; padding: 0 var(--sp-4) var(--sp-2); font-size: 0.85rem; color: var(--text-muted); }
.care-guarantor .fact-label { margin-right: 4px; }
.care-guarantor a { color: var(--primary); text-decoration: none; }
.care-guarantor a:hover { text-decoration: underline; }

/* Overview tabs (27 Sep 2026). */
.overview-tabs { margin: var(--sp-4) 0; }
.overview-pane[hidden] { display: none; }

/* A payment whose screenshot says something else (27 Sep 2026). */
/* Room on the left for the notice's own "!" mark, which sits in that space. */
.manual-pay-mismatch { margin: 6px 0; padding: 8px 12px 8px 42px; font-size: 0.85rem; }
.manual-pay-mismatch::before { top: 9px; left: 12px; }
.manual-pay-mismatch .btn { margin-top: 6px; }
#mpProofState .btn { margin-left: 6px; }
/* The plan behind a waiting payment opens from its reference (28 Sep 2026). */
.mp-open-deal { min-height: 44px; padding: 0; text-align: left; font: inherit; color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

/* The auditor's other documents, one line each with a way to take it off. */
.other-doc-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.other-doc-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line, #d8dde6);
  border-radius: 8px; min-width: 0; }
.other-doc-list li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.other-doc-list .linkish { padding: 0; border: 0; background: none; color: var(--primary, inherit);
  text-decoration: underline; cursor: pointer; font: inherit; flex: none; }

/* The overview while its figures load: a quiet outline, not a blank page. */
.skeleton-card { display: grid; gap: 12px; padding: 20px; }
.skeleton-line { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%; animation: skeleton-shimmer 1.2s ease-in-out infinite; }
.skeleton-line.w40 { width: 40%; height: 18px; } .skeleton-line.w70 { width: 70%; } .skeleton-line.w80 { width: 80%; } .skeleton-line.w90 { width: 90%; }
@keyframes skeleton-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton-line { animation: none; } }

/* The work tiles at the top of the overview: tiles that open their work. */
button.stat.stat-action { font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
button.stat.stat-action:hover { border-color: var(--accent); }
button.stat.stat-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* This week against last, lock recovery, shops ranked. */
.compare-card .dash-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.compare-card .dash-head .filter-chips { margin: 0; }
.compare-table td.is-up, .compare-card .is-up { color: var(--success); font-weight: 600; }
.compare-table td.is-down, .compare-card .is-down { color: var(--danger); font-weight: 600; }
.recovery { display: grid; grid-template-columns: minmax(140px, 180px) 1fr; gap: 16px; align-items: center; }
.recovery-big { display: grid; gap: 2px; text-align: center; padding: 16px; border-radius: 12px; background: var(--surface-2); }
.recovery-big b { font-size: 2.2rem; line-height: 1; }
.recovery-big span { font-size: .8rem; color: var(--text-muted); }
@media (max-width: 620px) { .recovery { grid-template-columns: 1fr; } }
.money-place.is-focus { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 8px; }

/* Weeks paid, under "Never paid or stopped early". */
.book-subtabs { margin: 0 0 var(--sp-2); }

/* Report a payment: the screenshot first, as one big target. */
.mp-proof-pick { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 2px dashed var(--accent-border, #96C1FC);
  border-radius: 14px; background: var(--accent-soft, #EEF5FF); cursor: pointer; min-height: 64px; }
.mp-proof-pick b { display: block; color: var(--accent); }
.mp-proof-pick small { display: block; color: var(--text-muted); font-size: .82rem; }
.mp-required { font-style: normal; font-size: .75rem; font-weight: 700; color: var(--danger); margin-left: 4px; }
.mp-proof-pick.is-missing { border-color: var(--danger); background: var(--danger-soft, #FDEBEC); }
.mp-proof-pick.has-file { border-style: solid; border-color: var(--success, #005333); background: var(--success-soft, #E7F6EE); }
.mp-proof-pick.has-file b { color: var(--success, #005333); }
.mp-proof-icon { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 1.3rem; font-weight: 700; }
.mp-proof-pick.has-file .mp-proof-icon { background: var(--success, #005333); }
.mp-proof-pick:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mp-pays { margin: 8px 0 0; font-size: .9rem; color: var(--success, #005333); font-weight: 500; }
.mp-pays.is-over { color: var(--warning); }
.mp-note-toggle { margin: 0 0 8px; }
.manual-pay-match { margin: 6px 0; display: flex; align-items: center; gap: 6px; }
.manual-pay-match .status-badge { text-transform: none; }

/* The filters above All deals. */
.deal-filters { margin: 0 0 var(--sp-4); }
.deal-filters .filter-chips { margin-bottom: var(--sp-3); }
.deal-filter-picks { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; }
.deal-filter-picks .al-valid { min-width: 200px; flex: 0 1 260px; }
@media (max-width: 520px) { .deal-filter-picks .al-valid { flex: 1 1 100%; } }

/* On a desktop the auditor cards sit side by side (owner, 1 October 2026). */
@media (min-width: 900px) {
  .al-list { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); align-items: start; }
  .al-card { height: 100%; display: flex; flex-direction: column; }
  .al-actions { margin-top: auto; padding-top: 12px; grid-template-columns: 1fr 1fr; }
  .al-valid { grid-column: 1 / -1; }
}
.al-phone { margin-left: 8px; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: .82rem;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.chip-name { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.chip-name small { display: block; font-size: .72rem; color: var(--accent); }

/* Link generation, the single-visit history. */
.il-history { margin-top: var(--sp-4); }
.il-when { white-space: nowrap; }
.il-deals .mono { display: block; white-space: nowrap; }
.il-actions { display: flex; flex-wrap: nowrap; gap: 6px; justify-content: flex-end; }
.il-actions .btn { white-space: nowrap; }

/* Each auditor's own link: one card each, phone first. */
.al-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3, 12px); }
.al-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--surface, transparent); }
.al-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.al-who { display: grid; gap: 2px; min-width: 0; }
.al-who b { font-size: 1rem; }
.al-who span { font-size: .85rem; color: var(--text-muted); }
.al-head .status-badge { flex: none; text-transform: none; }
.status-badge.al-none { color: var(--text-muted); }
.al-facts { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: .85rem; color: var(--text-muted); }
.al-facts span:not(:last-child)::after { content: "\00B7"; margin: 0 8px; }
.al-actions { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; align-items: end; }
.al-actions .btn { width: 100%; justify-content: center; margin: 0; }
.al-valid { display: grid; gap: 4px; font-size: .75rem; color: var(--text-muted); }
.al-valid select { width: 100%; min-height: 36px; margin: 0; }
@media (max-width: 520px) {
  .al-actions { grid-template-columns: 1fr 1fr; }
  .al-valid { grid-column: 1 / -1; }
}

/* Rate colours on the comparison cards. */
.compare-card td.rate-good, .recovery-big.rate-good b { color: var(--success); font-weight: 600; }
.compare-card td.rate-warn, .recovery-big.rate-warn b { color: var(--warning); font-weight: 600; }
.compare-card td.rate-bad, .recovery-big.rate-bad b { color: var(--danger); font-weight: 600; }
.compare-card .linkish { padding: 0; border: 0; background: none; color: var(--primary, inherit); font: inherit;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; text-align: left; }

/* On a phone every button on the comparison cards is a full tap target. */
@media (max-width: 720px) {
  .compare-card .btn.sm { min-height: 44px; }
  .compare-card .linkish { display: inline-flex; align-items: center; min-height: 44px; }
}

/* "Add a note" reads as a link; "This pays …" stands out (1 October 2026). */
.mp-note-toggle .linkish { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: .9rem;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; min-height: 32px; }
.manual-pay-form .mp-pays { color: var(--success, #005333); font-weight: 600; }
.manual-pay-form .mp-pays.is-over { color: var(--warning); }

/* Link generation: one card that makes an auditor's form link (the client,
   2 October 2026). Centred and narrow on a desktop, full width on a phone. */
.link-maker { max-width: 760px; margin: 0 auto; padding: var(--sp-6); display: grid; gap: var(--sp-5); }
.link-maker-head h3 { margin: 0 0 var(--sp-1); font-size: 1.15rem; font-weight: 600; color: var(--text); }
.link-maker-head p { margin: 0; color: var(--text-muted); font-size: .92rem; line-height: 1.5; }
.link-maker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-5); align-items: start; }
.link-maker-grid .field { margin: 0; min-width: 0; }
.link-maker-grid .lm-wide { grid-column: 1 / -1; }
.link-maker-grid select, .link-maker-grid input { width: 100%; }
.lm-optional { font-weight: 400; color: var(--text-subtle); font-size: .8rem; margin-left: 4px; }
.link-maker-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding-top: var(--sp-4); border-top: 1px solid var(--border); flex-wrap: wrap; }
.lm-text { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: .9rem; color: var(--text); cursor: pointer; }
.lm-text input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.link-maker-foot .btn { min-width: 160px; }
.link-maker .notice { margin: 0; }
/* Auditors' pass keys (owner, 17 October 2026): one row per auditor — who,
   where the pass key stands, one button. On a phone each row stacks and the
   button spans it. */
/* One column, the width of the form link card above. */
.pk-card, #linkRenewals { max-width: 760px; margin: var(--sp-5) auto 0; padding: var(--sp-6); }
.pk-actions .pk-remove { color: var(--danger); border-color: var(--danger-border); }
.pk-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); }
.pk-head h3 { margin: 0 0 var(--sp-1); font-size: 1.15rem; font-weight: 600; color: var(--text); }
.pk-head p { margin: 0; color: var(--text-muted); font-size: .92rem; line-height: 1.5; max-width: 62ch; }
.pk-count { flex: none; padding: 3px 12px; border: 1px solid var(--border); border-radius: var(--r-pill);
  font-size: .82rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pk-rule { margin: var(--sp-3) 0 0; font-size: .88rem; color: var(--text-muted); }
.pk-rule.is-on { color: var(--success); font-weight: 600; }
.pk-list { list-style: none; margin: var(--sp-4) 0 0; padding: 0; border-top: 1px solid var(--border); }
.pk-row { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 2.4fr) auto; gap: var(--sp-2) var(--sp-4);
  align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
.pk-who { min-width: 0; }
.pk-who b { display: block; color: var(--text); }
.pk-who small { color: var(--text-muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
.pk-status { min-width: 0; display: grid; gap: 3px; justify-items: start; }
.pk-status small { color: var(--text-muted); font-size: .82rem; line-height: 1.4; }
.pk-status .pk-warn { color: var(--danger); font-weight: 600; }
.pk-state { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border: 1px solid var(--border);
  border-radius: var(--r-pill); font-size: .78rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.pk-state.is-set { color: var(--success); background: var(--success-soft); border-color: var(--success-border); }
.pk-state.is-sent { color: var(--warning); background: var(--warning-soft); border-color: var(--warning-border); }
.pk-actions .btn { min-width: 128px; }
.pk-result { grid-column: 1 / -1; display: grid; gap: var(--sp-2); }
.pk-result p { margin: 0; }
.pk-share { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--sp-2); max-width: 360px; }
.pk-foot { margin: var(--sp-3) 0 0; }
@media (max-width: 640px) {
  .pk-head { flex-direction: column; gap: var(--sp-2); }
  .pk-row { grid-template-columns: 1fr; }
  .pk-actions .btn { width: 100%; }
  .pk-share { max-width: none; }
}

.link-result { border: 1px solid var(--success-border); background: var(--success-soft); border-radius: var(--r-lg);
  padding: var(--sp-5); display: grid; gap: var(--sp-3); }
.link-result-head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.link-result-head b { display: block; font-size: 1rem; color: var(--text); }
.link-result-head small { display: block; color: var(--text-muted); font-size: .88rem; margin-top: 2px; }
.link-result-mark { flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--success); color: #fff; font-weight: 700; font-size: .9rem; }
.link-result-sms { margin: 0; font-size: .88rem; }
.link-result-sms.is-ok { color: var(--success); }
.link-result-sms.is-bad { color: var(--danger); }
.link-result-url { display: flex; gap: var(--sp-2); }
.link-result-url input { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0 var(--sp-3); min-height: 44px; color: var(--text); }
.link-result-url .btn { flex: 0 0 auto; min-width: 96px; }
.link-result-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.link-result .hint { margin: 0; }
#linkRenewals { max-width: 760px; margin: 0 auto var(--sp-4); }
@media (max-width: 640px) {
  .link-maker { padding: var(--sp-4); gap: var(--sp-4); }
  .link-maker-grid { grid-template-columns: 1fr; }
  .link-maker-foot { flex-direction: column; align-items: stretch; }
  .link-maker-foot .btn { width: 100%; }
}

/* A tick inside a field (the lower deposit, 2 October 2026) is a tick, not
   a full-width input: one tappable row, box beside its words. */
.field .check-row { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-3) 0 0; padding: var(--sp-3);
  min-height: var(--tap); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  font-size: .92rem; font-weight: 500; line-height: 1.35; cursor: pointer; }
.field .check-row input[type="checkbox"] { flex: 0 0 22px; width: 22px; height: 22px; min-height: 0; margin: 0; padding: 0;
  border-radius: 6px; accent-color: var(--accent); }
.field .check-row span { flex: 1 1 auto; min-width: 0; }
.field .check-row:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

/* Customer list: the order picker, and a heading over each group (the
   client, 2 October 2026). */
.book-order { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: .85rem; color: var(--text-muted); white-space: nowrap; }
.book-order select { min-height: 44px; padding: 0 var(--sp-6) 0 var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background-color: var(--surface); color: var(--text); font: inherit; font-size: .9rem; }
.book-table tr.book-group th { text-align: left; padding: var(--sp-3) var(--sp-3) var(--sp-2); background: var(--surface-2);
  color: var(--text); font-size: .82rem; font-weight: 600; letter-spacing: .02em; border-top: 2px solid var(--border-strong); }
.book-group-head { padding: var(--sp-3) var(--sp-1) var(--sp-1); font-size: .82rem; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 640px) {
  .book-order { flex: 1 1 100%; }
  .book-order select { flex: 1 1 auto; }
}
.book-table tbody tr.book-group { cursor: default; }
.book-table tbody tr.book-group:hover { background: none; }

/* Care: change a customer's numbers from their panel (2 October 2026). */
.numbers-edit { margin: var(--sp-2) 0; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.numbers-edit summary { padding: var(--sp-2) var(--sp-3); cursor: pointer; font-weight: 500; font-size: .9rem; color: var(--accent); min-height: 40px; display: flex; align-items: center; }
.numbers-edit-body { padding: 0 var(--sp-3) var(--sp-3); }
.numbers-edit-body .hint { margin: 0 0 var(--sp-2); }

/* Customer page: paying from another number (2 October 2026). */
.pay-from { margin: var(--sp-3) 0 0; text-align: center; }
.pay-from-now { margin: 0; font-size: .88rem; color: var(--text-muted); }
.pay-from-now b { color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; }
.pay-from-change { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 var(--sp-2);
  border: 0; background: none; color: var(--accent); font: inherit; font-size: .88rem; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.pay-from-box { margin-top: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); text-align: left; }
.pay-from-box label { display: block; font-size: .85rem; font-weight: 500; margin-bottom: var(--sp-2); }
.pay-from-row { display: flex; gap: var(--sp-2); }
.pay-from-row input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--text); font: inherit; }
.pay-from-row .btn { flex: 0 0 auto; }
.pay-from-hint { margin: var(--sp-2) 0 0; font-size: .82rem; color: var(--text-muted); }
.pay-from-hint.is-warn { color: var(--danger); }

/* The repayment table: how each week was paid, and its reference (2 October 2026). */
.how-paid { min-width: 200px; }
.how-paid-line + .how-paid-line { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px dashed var(--border); }
.how-paid-line b { font-weight: 600; }
.how-paid-line small { display: block; color: var(--text-muted); font-size: .8rem; }
.how-paid-line .mono { color: var(--text); }

/* An approved plan's full record (owner, 2 October 2026): what to act on
   first, the rest folded. */
.rec-head h2 { margin: 0; font-size: 1.3rem; letter-spacing: -.01em; }
.rec-head p { margin: 4px 0 0; color: var(--text-muted); }
.rec-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 var(--sp-3); }
.rec-chip { font-size: .8rem; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text); }
.rec-chip.is-ok { background: var(--success-soft); color: var(--success); }
.rec-chip.is-bad { background: var(--danger-soft); color: var(--danger); }
.rec-chip.is-warn { background: var(--warning-soft); color: var(--warning); }
.rec-alert { border: 1px solid var(--danger-border); background: var(--danger-soft); color: var(--danger); border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-2); }
.rec-alert.is-warn { border-color: var(--warning-border); background: var(--warning-soft); color: var(--warning); }
/* Good news in green: what was let off a finished plan (18 October 2026). */
.rec-alert.is-ok { border-color: var(--success-border, var(--border)); background: var(--success-soft, var(--surface-inset)); color: var(--success, var(--text)); }
.rec-alert b { display: block; font-weight: 600; }
.rec-alert small { display: block; color: var(--text); margin-top: 2px; }
.rec-money { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); margin: var(--sp-3) 0; }
.rec-money > div { background: var(--surface-2); border-radius: var(--r-lg); padding: var(--sp-3); min-width: 0; }
.rec-money span:first-child { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.rec-money b { display: block; font-size: 1.15rem; margin-top: 4px; font-variant-numeric: tabular-nums; }
.rec-money small { color: var(--text-muted); font-size: .8rem; }
.rec-money .is-late b { color: var(--danger); }
.rec-bar { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; margin-top: 8px; }
.rec-bar i { height: 6px; border-radius: 3px; background: var(--border); }
.rec-bar i.p { background: var(--success); }
.rec-bar i.h { background: var(--warning); }
.rec-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.rec-people > div { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-3); min-width: 0; display: grid; gap: 2px; }
.rec-people span { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.rec-people a { color: var(--accent); text-decoration: none; }
.rec-people small { color: var(--text-muted); }
.rec-folds { display: grid; gap: var(--sp-2); }
.rec-fold { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.rec-fold > summary { list-style: none; cursor: pointer; padding: var(--sp-3) var(--sp-4); display: flex; align-items: center; gap: var(--sp-3);
  font-weight: 600; min-height: 48px; }
.rec-fold > summary::-webkit-details-marker { display: none; }
.rec-fold > summary > span:first-child { flex: 1 1 auto; }
.rec-fold-meta { font-weight: 400; color: var(--text-muted); font-size: .85rem; text-align: right; min-width: 0; }
.rec-fold > summary::after { content: '›'; font-size: 1.2rem; color: var(--text-muted); transform: rotate(90deg); transition: transform .15s; }
.rec-fold[open] > summary::after { transform: rotate(-90deg); }
.rec-fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-lg); }
.rec-fold-body { padding: 0 var(--sp-4) var(--sp-4); min-width: 0; }
.rec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-3); }
.rec-grid dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.rec-grid dd { margin: 2px 0 0; }
@media (max-width: 600px) {
  .rec-money { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rec-people, .rec-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .rec-fold > summary::after { transition: none; } }
.rec-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.rec-actions .btn { flex: 1 1 160px; }
.rec-more { margin: 0 0 var(--sp-3); }
.rec-more .rec-fold-body { padding-top: 0; }

/* Between paying and the payment showing on the plan (3 October 2026). */
.pay-progress { border: 1px solid var(--info-border); background: var(--info-soft); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); color: var(--text); }
.pay-progress.is-done { border-color: var(--success-border); background: var(--success-soft); }
.pp-title { margin: 0 0 var(--sp-3); font-weight: 700; font-size: 1.05rem; }
.pay-progress.is-done .pp-title { color: var(--success); }
.pp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.pp-steps li { display: flex; gap: var(--sp-3); align-items: flex-start; color: var(--text-muted); }
.pp-steps li b { display: block; font-weight: 600; }
.pp-steps li small { display: block; font-size: .82rem; color: var(--text-muted); }
.pp-steps li.is-done, .pp-steps li.is-active { color: var(--text); }
.pp-dot { flex: 0 0 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--border-strong); position: relative; }
.pp-steps li.is-done .pp-dot { background: var(--success); border-color: var(--success); }
.pp-steps li.is-done .pp-dot::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pp-steps li.is-active .pp-dot { border-color: var(--accent); border-top-color: transparent; animation: pp-spin .9s linear infinite; }
@keyframes pp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pp-steps li.is-active .pp-dot { animation: none; border-top-color: var(--accent); } }
.pp-note { margin: var(--sp-3) 0 0; font-size: .9rem; color: var(--text-muted); }
.plan-number { margin: -2px 0 var(--sp-2); text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; color: var(--text-muted); }

/* Care: the payment approval done with the customer on the phone (3 October 2026). */
/* Direct debit on a call (owner, 10 October 2026): the box on a customer's
   card or record, then the three steps, then done. */
.care-approval { margin: var(--sp-2) 0; }
.dd-offer { display: grid; gap: 10px; padding: 12px; border-radius: var(--r-lg); background: var(--accent-soft); border: 1px solid var(--accent-border); }
.dd-offer-text { display: grid; gap: 2px; min-width: 0; }
.dd-offer-text b { font-size: .92rem; }
.dd-offer-text small { color: var(--text-muted); font-size: .8rem; line-height: 1.35; }
.dd-offer .btn { width: 100%; min-height: 48px; gap: 8px; font-size: 1rem; }
.dd-offer .btn svg, .dd-step .btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.dd-call { border: 1px solid var(--accent-border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.dd-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 12px; background: var(--accent-soft); }
.dd-head b { font-size: .92rem; }
.dd-x { border: 0; background: none; color: var(--text-muted); font-size: 1.3rem; line-height: 1; min-width: var(--tap); min-height: var(--tap); border-radius: var(--r-md); cursor: pointer; }
.dd-x:hover { background: var(--surface-inset); color: var(--text); }
.dd-steps { list-style: none; margin: 0; padding: 12px; display: grid; }
.dd-step { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; position: relative; padding-bottom: 14px; }
.dd-step:last-child { padding-bottom: 0; }
.dd-step:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 2px; width: 2px; background: var(--border); }
.dd-step.is-done:not(:last-child)::before { background: var(--success); }
.dd-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem;
  background: var(--surface-inset); color: var(--text-muted); border: 1px solid var(--border); }
.dd-step.is-now .dd-n { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.dd-step.is-done .dd-n { background: var(--success); color: var(--surface); border-color: var(--success); }
.dd-step > div { display: grid; gap: 2px; padding-top: 3px; min-width: 0; }
.dd-step > div b { font-size: .9rem; }
.dd-step > div small { color: var(--text-muted); font-size: .8rem; line-height: 1.4; }
.dd-step.is-later > div b { color: var(--text-muted); font-weight: 600; }
.dd-step .btn { min-height: var(--tap); gap: 6px; }
.dd-wallet { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); font-weight: 600; }
.dd-foot { padding: 0 12px 12px; display: grid; gap: 10px; }
.dd-foot > .btn { width: 100%; min-height: 48px; font-size: 1rem; }
.dd-wait { margin: 12px 0 0; color: var(--text-muted); font-size: .88rem; }
.dd-live { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--warning-soft); font-size: .88rem; line-height: 1.4; }
.dd-live i { flex: 0 0 auto; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--warning);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--warning) 25%, transparent); animation: dd-pulse 1.6s ease-in-out infinite; }
.dd-live b { display: block; }
.dd-live.is-bad { background: var(--danger-soft); color: var(--danger); }
@keyframes dd-pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--warning) 10%, transparent); } }
@media (prefers-reduced-motion: reduce) { .dd-live i { animation: none; } }
.dd-help { font-size: .8rem; color: var(--text-muted); border-top: 1px dashed var(--border); padding-top: 8px; }
.dd-help summary { cursor: pointer; color: var(--accent); font-weight: 600; min-height: 32px; display: flex; align-items: center; gap: 8px; list-style: none; }
.dd-help summary::-webkit-details-marker { display: none; }
.dd-help summary::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s var(--ease, ease); }
.dd-help[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.dd-help ol { margin: 4px 0 0; padding-left: 1.2rem; display: grid; gap: 2px; }
.dd-code-label { margin: 0 0 6px; font-weight: 600; font-size: .88rem; }
.dd-code-label small { display: block; font-weight: 400; color: var(--text-muted); font-size: .8rem; }
.dd-boxes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dd-boxes input { width: 100%; min-width: 0; height: 56px; padding: 0; border-radius: var(--r-md); border: 1.5px solid var(--border-strong);
  background: var(--surface); color: var(--text); text-align: center; font: 700 1.6rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.dd-boxes input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dd-done { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 18px 14px 16px; }
.dd-tick { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--success-soft); color: var(--success); }
.dd-tick svg { width: 28px; height: 28px; }
.dd-done b { font-size: 1.02rem; }
.dd-done p { margin: 0; color: var(--text-muted); font-size: .86rem; line-height: 1.45; max-width: 34ch; }
.dd-proof { font-size: .78rem; color: var(--text-subtle); }

/* The customer's own approval page (3 October 2026). */
.approve-wallet { margin: var(--sp-3) 0; font-size: .95rem; }
.approve-code { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.approve-code label { font-weight: 600; }
.approve-code-row { display: flex; gap: var(--sp-2); }
.approve-code-row input { flex: 1 1 0; width: 100%; min-width: 0; min-height: 52px; font: 700 1.4rem ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .3em; text-align: center; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text); }
.approve-help { margin-top: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); }
.approve-help summary { cursor: pointer; font-weight: 600; min-height: 40px; display: flex; align-items: center; }
.approve-help ol { margin: var(--sp-2) 0 0; padding-left: 1.2rem; display: grid; gap: 4px; }
.mandate-shell #send { margin-top: var(--sp-2); }

/* --------------------------------------------------------------------------
   Movement (owner, 3 October 2026). Panels grow from what opened them and
   the theme spreads from its switch: public/motion.js. Never the auditor's
   form. Everything here stops for anyone who asked their phone for less
   motion.
   -------------------------------------------------------------------------- */

/* The theme spreads out in a circle from the switch; the old one stays put
   underneath instead of fading. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.theme-spreading::view-transition-old(root) { z-index: 0; }
.theme-spreading::view-transition-new(root) { z-index: 1; }

/* A fold that opens slides its contents in. */
details[open] > :not(summary) { animation: unfold 220ms cubic-bezier(.2,.8,.2,1); }
@keyframes unfold { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Care's list settles in when a tile or filter changes it. */
.care-list.is-refiltered > .care-card { animation: settle 260ms cubic-bezier(.2,.8,.2,1) both; }
.care-list.is-refiltered > .care-card:nth-child(2) { animation-delay: 30ms; }
.care-list.is-refiltered > .care-card:nth-child(3) { animation-delay: 60ms; }
.care-list.is-refiltered > .care-card:nth-child(4) { animation-delay: 90ms; }
.care-list.is-refiltered > .care-card:nth-child(n+5) { animation-delay: 120ms; }
@keyframes settle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* A phone that has just locked or unlocked pulses once on its card. */
.mini-chip.chip-changed { animation: chip-pulse 1.4s ease-out 2; }
@keyframes chip-pulse { 0% { box-shadow: 0 0 0 0 currentColor; } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* A payment step that has just been reached ticks over. */
.pp-steps li.is-new .pp-dot { animation: tick 420ms cubic-bezier(.3,1.6,.5,1); }
.pp-steps li.is-new b { animation: settle 300ms ease-out; }
@keyframes tick { 0% { transform: scale(.4); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  details[open] > :not(summary), .care-list.is-refiltered > .care-card, .mini-chip.chip-changed,
  .pp-steps li.is-new .pp-dot, .pp-steps li.is-new b { animation: none; }
}
/* Not on the auditor's form (owner, 3 October 2026). */
.intake-shell details[open] > :not(summary), .intake-page details[open] > :not(summary) { animation: none; }

/* A payment the customer has just made, on their own page (3 October 2026). */
#payWatch:not([hidden]) { margin-block: var(--sp-3); }

/* --------------------------------------------------------------------------
   Customers on phones and tablets (owner, 4 October 2026): one row per
   customer, the amount in the same top-right slot on every row, and the
   full record as a sheet. Desktop keeps the cards and the panel.
   -------------------------------------------------------------------------- */
.tone-late   { --tone-fg: var(--danger);  --tone-bg: var(--danger-soft);  --tone-bd: var(--danger-border); }
.tone-behind { --tone-fg: var(--warning); --tone-bg: var(--warning-soft); --tone-bd: var(--warning-border); }
.tone-fine   { --tone-fg: var(--success); --tone-bg: var(--success-soft); --tone-bd: var(--success-border); }
.tone-start  { --tone-fg: var(--accent);  --tone-bg: var(--accent-soft);  --tone-bd: var(--accent-border); }

.care-list:has(.cc-row) { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
.cc-row { border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface); }
.cc-row.is-open { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cc-main { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 14px 14px 12px; background: none; border: 0;
  color: inherit; text-align: left; cursor: pointer; font: inherit; min-height: 44px; }
.cc-avatar { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border);
  display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.cc-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cc-name { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cc-amount { flex: 0 0 auto; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tone-fg); text-align: right; }
/* What the figure is, under it, when the list is ordered by something else than what is owed (19 October 2026). */
.cc-amount small { display: block; font-size: .72rem; font-weight: 500; color: var(--muted); white-space: nowrap; }
.cc-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cc-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 600; color: var(--tone-fg); background: var(--tone-bg); border: 1px solid var(--tone-bd); }
.cc-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--tone-fg); }
.cc-due { font-size: 13px; color: var(--text-muted); }
.cc-chev { flex: 0 0 auto; margin-top: 10px; color: var(--text-subtle); transition: transform 200ms var(--ease, ease); }
.cc-row.is-open .cc-chev, .cs-sec[open] > summary .cc-chev { transform: rotate(180deg); }
.cc-more { margin: 0 14px; padding: 12px 0 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.cc-facts { margin: 0; display: grid; gap: 8px; font-size: 14px; }
.cc-facts > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; }
.cc-facts dt { color: var(--text-subtle); }
.cc-facts dd { margin: 0; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cc-full { font-weight: 600; color: var(--accent); }
.cc-next { margin: 0; padding: 0; list-style: none; }
.cc-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.cc-actions .btn, .cc-actions a { min-height: 44px; justify-content: center; }

/* The full record as a sheet. */
@keyframes sheet-up { from { transform: translateY(40%); opacity: 0.6; } to { transform: none; opacity: 1; } }
#modal.sheet-mode.open { place-items: end center; padding: 0; }
#modal.sheet-mode .panel.case-sheet { width: 100%; max-width: 760px; max-height: 92dvh; border-radius: 22px 22px 0 0;
  padding: 8px 16px calc(28px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 14px;
  animation: sheet-up 280ms cubic-bezier(.2, .8, .2, 1); }
.cs-grab { align-self: center; width: 40px; height: 5px; border-radius: 3px; background: var(--border); margin-top: 4px; }
.case-sheet .cs-close { top: 10px; right: 12px; }
.cs-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--border); }
.cs-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-right: 36px; }
.cs-who { min-width: 0; }
.cs-ref { margin: 0; font-size: 13px; color: var(--text-muted); }
.cs-head h2 { margin: 4px 0 0; font-size: 22px; }
.cs-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cs-box { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.cs-box span, .cs-box small { font-size: 12px; color: var(--text-subtle); }
.cs-box b { font-size: 21px; font-variant-numeric: tabular-nums; }
.cs-box.is-late { background: var(--danger-soft); border-color: var(--danger-border); }
.cs-box.is-late b, .cs-box.is-late span, .cs-box.is-late small { color: var(--danger); }
.cs-box.is-ok { background: var(--success-soft); border-color: var(--success-border); }
.cs-box.is-ok b { color: var(--success); }
.cs-line { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.cs-card .case-next { margin: 0; }
.cs-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.cs-actions .btn, .cs-actions a { min-height: 44px; justify-content: center; }
.cs-weeks { display: flex; flex-direction: column; gap: 10px; }
.cs-weeks-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cs-weeks-head span { font-size: 13px; color: var(--text-subtle); }
.cs-wk-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.cs-wk { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 52px; border-radius: 10px; cursor: pointer;
  font: inherit; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); }
.cs-wk span { font-size: 11px; opacity: 0.8; }
.cs-wk b { font-size: 15px; }
.cs-wk.is-paid { color: var(--success); background: var(--success-soft); border-color: var(--success-border); }
.cs-wk.is-late { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-border); }
.cs-wk.is-part { color: var(--warning); background: var(--warning-soft); border-color: var(--warning-border); }
.cs-wk.is-on { outline: 2px solid var(--text); outline-offset: 0; }
.cs-wk-detail { padding: 12px 14px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--border); font-size: 14px; }
.cs-wk-detail p { margin: 0; }
.cs-wk-detail ul { margin: 6px 0 0; padding-left: 18px; color: var(--text-muted); }
.cs-wk-title { display: flex; justify-content: space-between; gap: 8px; }
.cs-wk-detail.is-paid .cs-wk-title span { color: var(--success); font-weight: 600; }
.cs-wk-detail.is-late .cs-wk-title span { color: var(--danger); font-weight: 600; }
.cs-sec { border-radius: var(--r-xl); background: var(--surface-2); border: 1px solid var(--border); }
.cs-sec[open] { border-color: var(--accent-border); }
.cs-sec > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; cursor: pointer; list-style: none; }
.cs-sec > summary::-webkit-details-marker { display: none; }
.cs-sec > summary b { flex: 1 1 auto; font-size: 15px; }
.cs-sum { font-size: 13px; color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.cs-sec > summary .cc-chev { margin-top: 0; }
.cs-body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cs-body .case-card { margin: 0; }
.cs-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cs-tile { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 10px; background: var(--surface); min-width: 0; }
.cs-tile span { font-size: 12px; color: var(--text-subtle); }
.cs-tile b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (min-width: 700px) { .cs-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cs-wk-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { #modal.sheet-mode .panel.case-sheet { animation: none; } }
.cc-facts dd { justify-content: flex-start; }
.cc-facts dd.cc-plan { justify-content: space-between; }
.cc-full { background: none; border: 0; padding: 0; min-height: 0; }
.cc-actions, .cs-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cc-actions > [data-cc-paylink] { grid-column: 1 / -1; }
.cc-more .care-card-more { margin: -2px 0 0; padding: 0; }
.cs-box b { font-size: clamp(16px, 4.6vw, 21px); white-space: nowrap; }
.cs-head { padding-right: 56px; }
@media (min-width: 700px) { .cc-actions, .cs-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cc-actions > [data-cc-paylink] { grid-column: auto; } }
/* The handle the record sheet is pulled down by (4 October 2026). */
.cs-grab-zone { display: flex; justify-content: center; align-items: center; height: 28px; margin: -4px -16px 0; touch-action: none; cursor: grab; }
.cs-grab-zone .cs-grab { width: 44px; height: 5px; border-radius: 3px; background: var(--text-subtle); opacity: 0.7; margin: 0; }
#modal.sheet-mode .panel.case-sheet { overscroll-behavior-y: contain; }

/* The Overview's tiles, tinted by meaning (owner, 4 October 2026). */
.st-green  { --st: var(--success); }
.st-red    { --st: var(--danger); }
.st-amber  { --st: var(--warning); }
.st-blue   { --st: var(--accent); }
.st-purple { --st: #6D3FD8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .st-purple { --st: #B49BFF; } }
:root[data-theme="dark"] .st-purple { --st: #B49BFF; }
.stat[class*="st-"] { position: relative; overflow: hidden; padding-right: 52px; text-align: left;
  border-color: color-mix(in srgb, var(--st) 38%, var(--border));
  background: linear-gradient(155deg, color-mix(in srgb, var(--st) 16%, var(--surface)) 0%, var(--surface) 70%); }
.stat[class*="st-"] > span { color: color-mix(in srgb, var(--st) 55%, var(--text)); }
.stat[class*="st-"] b { color: var(--st); font-size: clamp(1.5rem, 5vw, 2rem); }
.stat .stat-icon { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  color: var(--st, var(--text-muted)); background: color-mix(in srgb, var(--st, var(--text-muted)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--st, var(--border)) 30%, transparent); }
.stat .stat-icon svg { width: 18px; height: 18px; }
.stat .stat-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: color-mix(in srgb, var(--st, var(--border)) 18%, transparent); }
.stat .stat-bar i { display: block; height: 100%; background: var(--st, var(--accent)); border-radius: 0 3px 3px 0; }
.stat.stat-action[class*="st-"] { cursor: pointer; }

/* Overview tiles, second pass (owner, 4 October 2026): dark glass with a
   glow in the tile's colour, grey labels, the number in colour, a plain
   icon, a trend line behind "still paying". */
.stat[class*="st-"] { background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--st) 13%, transparent), transparent 60%), var(--surface);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--st) 22%, transparent), 0 8px 24px -14px color-mix(in srgb, var(--st) 55%, transparent);
  border-color: color-mix(in srgb, var(--st) 45%, var(--border)); border-radius: 16px; min-height: 118px; padding-bottom: 20px; }
.stat[class*="st-"] > span { color: var(--text-muted); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.05em; position: relative; z-index: 1; }
.stat[class*="st-"] b { position: relative; z-index: 1; }
.stat .stat-icon { background: none; border: 0; width: 26px; height: 26px; top: 14px; right: 12px; }
.stat .stat-icon svg { width: 20px; height: 20px; }
.stat .stat-sub { display: block; margin-top: 4px; font-size: 0.78rem; color: var(--text-subtle); position: relative; z-index: 1; }
.stat .stat-bar { left: 12px; right: 12px; bottom: 10px; height: 5px; border-radius: 3px; }
.stat .stat-bar i { border-radius: 3px; }
.stat.has-spark { padding-bottom: 24px; }
.stat .stat-spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; z-index: 0; pointer-events: none; }
.stat .stat-spark-fill { fill: color-mix(in srgb, var(--st) 22%, transparent); }
.stat .stat-spark-line { fill: none; stroke: var(--st); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0.85; }
.stat.st-green b { color: var(--text); }
.stat.st-quiet { --st: var(--text-subtle); background: var(--surface); box-shadow: none; }
.stat.st-quiet b, .stat.st-quiet .stat-icon { color: var(--text-subtle); }
.stat .stat-split { display: flex; gap: 14px; align-items: flex-end; }
.stat .stat-split > span { display: flex; flex-direction: column; text-transform: none; letter-spacing: 0; font-size: inherit; color: inherit; }
.stat .stat-split small { font-size: 0.7rem; font-weight: 500; color: var(--text-subtle); letter-spacing: 0; }
.stat .stat-split-a { color: var(--warning); }
.stat .stat-split-b { color: var(--success); padding-left: 14px; border-left: 1px solid var(--border); }
.stat .stat-bar-split { display: flex; background: none; gap: 3px; }
.stat .stat-bar-split i:first-child { background: var(--warning); }
.stat .stat-bar-split i:last-child { background: var(--success); }
.stat .stat-spark { bottom: 20px; height: 46%; }
.stat.is-money[class*="st-"] b { font-size: clamp(1.1rem, 4.6vw, 1.55rem); white-space: nowrap; }

/* The page header (owner, 4 October 2026): the role pill with the person's
   own account button on one line, the title and its line, then the bell,
   the language and the two-way theme switch, all in one dark, rounded set. */
.top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--sp-4); position: relative; }
.top-text { min-width: 0; }
.top-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.top-head .section-kicker { margin: 0; }
.top-profile { border-radius: 12px; }
.top .icon-btn, .top-lang, .theme-seg { border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.top .alerts-wrap .icon-btn { position: relative; }
.top .alert-count { position: absolute; top: 6px; right: 6px; }
.top-lang { position: relative; height: var(--tap); padding: 0 10px 0 8px; gap: 6px; }
.top-lang select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; height: 100%; min-height: 0;
  padding: 0 18px 0 2px; font-weight: 600; letter-spacing: 0.03em; font-size: 0.9rem; color: var(--text); }
.top-lang select:focus-visible { outline: 2px solid var(--accent); border-radius: 6px; }
.lang-badge { position: relative; width: 26px; height: 22px; flex: 0 0 auto; }
.lang-badge b { position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 3px; background: #4285F4; color: #fff;
  font: 700 11px/16px var(--font); text-align: center; }
.lang-badge i { position: absolute; right: 0; bottom: 0; width: 15px; height: 15px; border-radius: 3px; background: #E8EAED; color: #3c4043;
  font: 600 9px/15px var(--font); text-align: center; font-style: normal; }
.lang-chevrons { position: absolute; right: 9px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); color: var(--text-subtle); pointer-events: none; }
.theme-seg { display: inline-flex; align-items: center; gap: 2px; height: var(--tap); padding: 3px; }
.seg-btn { display: grid; place-items: center; width: 44px; height: 100%; border-radius: 9px; border: 1px solid transparent; background: none;
  color: var(--text-subtle); cursor: pointer; }
.seg-btn svg { width: 20px; height: 20px; }
.seg-btn[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow: 0 0 14px -4px color-mix(in srgb, var(--accent) 60%, transparent); }
.seg-btn:hover { color: var(--text); }
/* A faint glow behind the header, in the page's own colours. */
main.content { background-image: radial-gradient(70% 320px at 0% 0%, color-mix(in srgb, var(--success) 7%, transparent), transparent 70%),
  radial-gradient(60% 280px at 100% 0%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 70%); background-repeat: no-repeat; }
@media (max-width: 760px) {
  .top { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .top-actions { flex-wrap: wrap; }
  .top-actions .btn { flex: 1; }
}
.theme-seg { height: auto; padding: 2px; }
.seg-btn { height: var(--tap); }
/* The tiles share the whole row in equal columns on anything wider than a
   phone (owner, 4 October 2026). The "Updated" line sits under the grid,
   not in it, so the empty columns fold away and the tiles stretch. */
@media (min-width: 641px) {
  .stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .stat.is-money[class*="st-"] b { font-size: clamp(1.05rem, 1.5vw, 1.45rem); white-space: normal; overflow-wrap: anywhere; }
}
#statsUpdated { margin: var(--sp-2) 0 var(--sp-4); }
@media (min-width: 761px) {
  .top-profile { position: absolute; top: 0; right: 0; }
  .top-head { justify-content: flex-start; }
}
@media (min-width: 641px) {
  .stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .stat.is-money[class*="st-"] b { white-space: nowrap; overflow-wrap: normal; margin-right: -40px; font-size: clamp(0.95rem, 1.15vw, 1.35rem); }
}

/* Cards rest with a plain border and light up in their colour only when
   the mouse is over them or they are tapped or clicked (owner, 4 October 2026). */
.stat[class*="st-"] { border-color: var(--border); box-shadow: var(--shadow-sm);
  transition: border-color 180ms ease, box-shadow 220ms ease; }
@media (hover: hover) {
  .stat[class*="st-"]:hover { border-color: color-mix(in srgb, var(--st) 55%, var(--border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--st) 30%, transparent), 0 10px 28px -12px color-mix(in srgb, var(--st) 65%, transparent); }
}
.stat[class*="st-"]:focus-visible, .stat[class*="st-"]:active, .stat[class*="st-"].is-lit {
  border-color: color-mix(in srgb, var(--st) 55%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--st) 30%, transparent), 0 10px 28px -12px color-mix(in srgb, var(--st) 65%, transparent); }
/* The locked cards in teal instead of violet (owner, 4 October 2026). */
.st-purple { --st: #0E7C86; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .st-purple { --st: #4FD1D9; } }
:root[data-theme="dark"] .st-purple { --st: #4FD1D9; }

/* A week paid in part, filled as far as it is paid (owner, 4 October 2026). */
.weekbar i.part { position: relative; overflow: hidden; background: var(--border); box-shadow: inset 0 0 0 1px var(--accent); }
.weekbar i.part b { position: absolute; top: 0; bottom: 0; left: 0; background: var(--success); }
.plan-part { margin: 8px 0 0; font-size: 0.85rem; color: var(--text-muted); }
.plan-part b { color: var(--success); }
.wk-strip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; margin-top: 2px; }
.wk-strip i { height: 6px; border-radius: 2px; background: var(--border); position: relative; overflow: hidden; }
.wk-strip i.is-paid { background: var(--success); }
.wk-strip i.is-part { box-shadow: inset 0 0 0 1px var(--accent); }
.wk-strip i.is-part b { position: absolute; top: 0; bottom: 0; left: 0; background: var(--success); }
.cs-wk { position: relative; overflow: hidden; }
.cs-wk[style*="--fill"]::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--fill); background: var(--success-soft);
  border-top: 2px solid var(--success); }
.cs-wk > span, .cs-wk > b { position: relative; }
.cs-wk-meter { display: block; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; margin-top: 8px; }
.cs-wk-meter i { display: block; height: 100%; background: var(--success); }
.cs-wk-split { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px !important; }
.cs-wk-split span:last-child { color: var(--text-subtle); }

/* --------------------------------------------------------------------------
   Care people's photographs (owner, 5 October 2026)
   -------------------------------------------------------------------------- */
.sp { position: relative; flex: 0 0 auto; display: inline-grid; place-items: center; border-radius: 50%; overflow: hidden;
  width: 32px; height: 32px; background: var(--surface-2); border: 1.5px dashed var(--border); color: var(--text-muted);
  font-weight: 700; font-size: 12px; line-height: 1; }
.sp.has-photo { border: 2px solid #2BB673; }
.sp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 200ms ease; }
.sp.is-loaded img { opacity: 1; }
.sp.is-loaded b { visibility: hidden; }
.sp-xs { width: 22px; height: 22px; font-size: 9px; border-width: 1px !important; }
.sp-md { width: 42px; height: 42px; font-size: 14px; }
.sp-lg { width: 64px; height: 64px; font-size: 20px; }
.sp-who { display: inline-flex; align-items: center; gap: 8px; }
small.sp-who { display: flex; margin-top: 4px; }

.side-user { display: flex; align-items: center; gap: 12px; }
.side-who { min-width: 0; }
.side-user .sp { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.side-user .sp.has-photo { border-color: #7AF7C7; }
.side-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.care-hello { display: flex; align-items: center; gap: 16px; margin-bottom: var(--sp-4); padding: 16px 20px;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: radial-gradient(60% 140% at 0% 0%, rgba(43, 182, 115, 0.12), transparent 60%), var(--surface); }
.care-hello > div { min-width: 0; }
.care-hello h2 { margin: 0; font-size: 1.35rem; text-wrap: balance; }
.care-hello p { margin: 4px 0 0; color: var(--text-muted); font-size: 0.9rem; }
.care-hello .linkish { margin-top: 6px; font-size: 0.85rem; }
@media (max-width: 640px) {
  .care-hello { padding: 14px; gap: 12px; }
  .care-hello .sp-lg { width: 54px; height: 54px; }
  .care-hello h2 { font-size: 1.15rem; }
}

.cc-care { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); min-width: 0; }
.cc-care b { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The phone return, folded (owner, 5 October 2026). */
.return-fold > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.return-fold > summary .fold-title { flex: 0 0 auto; white-space: nowrap; margin-right: auto; }
.return-fold > summary .mini-chip { flex: 0 1 auto; }
.return-fold .case-form { padding: 0; border: 0; background: none; }

/* --------------------------------------------------------------------------
   Customer care's screen (owner, 5 October 2026)
   -------------------------------------------------------------------------- */
.care-stats { margin-bottom: var(--sp-4); }
button.stat { font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; }
.care-stat.is-on { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 641px) {
  .care-stats { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
@media (max-width: 640px) {
  .care-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .care-stats .is-zero { display: none; }
}

.is-care #searchGo, .is-care #refresh { display: none; }

.next-customer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

/* A call button on each row, beside the row itself. */
.cc-row:has(> .cc-call) { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.cc-row:has(> .cc-call) > .cc-more { grid-column: 1 / -1; }
.cc-call { align-self: center; display: grid; place-items: center; width: 44px; height: 44px; margin-right: 10px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface-2); color: #2BB673; }
.cc-call svg { width: 20px; height: 20px; }
.cc-call:active { transform: scale(0.95); }

/* Phones: settings in the menu, the bell at the top, tabs along the bottom. */
.side-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; padding-top: var(--sp-3); }
.side-settings + .side-signout { margin-top: var(--sp-3); }
.care-tabs { display: none; }
@media (max-width: 920px) {
  .is-care .nav-toggle { display: none; }
  /* No Menu button at the top for care, so no space kept for it (owner, 5 October 2026). */
  .admin-page.is-care .content { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
  .is-care .top-head { display: flex; align-items: center; gap: 10px; }
  .is-care .top-head .alerts-wrap { margin-left: auto; }
  .is-care .top-actions:not(:has(> :not([hidden]))) { display: none; }
  .care-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(4, 1fr);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--border);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.18); }
  .care-tabs button { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 52px; padding: 6px 2px;
    background: none; border: 0; border-radius: 12px; color: var(--text-muted); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; }
  .care-tabs button svg { width: 22px; height: 22px; }
  .care-tabs button.is-on { color: var(--accent); background: var(--accent-soft); }
  .is-care .content { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
.cc-row:has(> .cc-call) .cc-chev { display: none; }
.care-hello .linkish { min-height: var(--tap, 44px); display: inline-flex; align-items: center; margin-top: 0; }

/* --------------------------------------------------------------------------
   Staff page (owner, 5 October 2026: "make it look professional")
   -------------------------------------------------------------------------- */
.ct-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: var(--sp-4); }
.ct-head .section-title { margin: 0; }
.ct-head .hint { margin: 4px 0 0; }
.ct-stats { margin-bottom: var(--sp-5); }
@media (min-width: 641px) { .ct-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ct-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
@media (max-width: 640px) { .ct-grid { grid-template-columns: 1fr; } }
.ct-card { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--border); border-radius: var(--r-xl);
  background: var(--surface); transition: border-color 160ms ease, box-shadow 160ms ease; min-width: 0; }
.ct-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08); }
.ct-card.is-off { opacity: 0.6; }
.ct-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ct-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ct-who b { font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-who small { color: var(--text-muted); font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.ct-figs { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ct-fig { padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-inset, var(--surface-2)); border: 1px solid transparent; min-width: 0; }
.ct-fig dt { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.ct-fig dd { margin: 4px 0 0; font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; overflow-wrap: anywhere; }
.ct-fig small { display: block; margin-top: 2px; font-size: 0.78rem; color: var(--text-muted); }
.ct-fig.is-bad dd { color: var(--danger); }
.ct-fig.is-bad { border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.ct-fig.is-warn dd { color: var(--warning, #C98A1B); }
.ct-progress p { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 6px; font-size: 0.85rem; color: var(--text-muted); }
.ct-progress p b { color: var(--text); font-variant-numeric: tabular-nums; }
.ct-bar { display: block; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.ct-bar i { display: block; height: 100%; border-radius: inherit; background: #2BB673; }
.ct-progress small { display: block; margin-top: 6px; font-size: 0.8rem; }
.ct-progress .is-late { color: var(--danger); }
.ct-foot { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); margin-top: auto; }
.ct-move { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-move select { flex: 1 1 180px; min-width: 0; }
.ct-extras { display: grid; gap: 10px; margin-top: var(--sp-5); }
#careTeam.card { background: transparent; border: 0; box-shadow: none; padding: 0; }

.acct-card .tablebox { margin: 0; }
.acct-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.acct-who small { display: block; color: var(--text-muted); font-size: 0.8rem; margin-top: 2px; }
.acct-table td { vertical-align: middle; }
.row-menu { position: relative; display: inline-block; }
.row-menu > summary { list-style: none; cursor: pointer; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: flex; flex-direction: column; gap: 4px; min-width: 220px;
  padding: 6px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22); }
.row-menu-list .btn { justify-content: flex-start; width: 100%; border: 0; background: transparent; text-align: left; }
.row-menu-list .btn:hover { background: var(--surface-2); }
.row-menu-list select { width: 100%; }
.acct-card .tablebox { overflow: visible; }
.ct-fig.is-text dd { font-size: 1rem; padding-top: 4px; }
@media (max-width: 640px) {
  .acct-card .tablebox { border: 0; background: none; }
  .acct-table thead { display: none; }
  .acct-table, .acct-table tbody { display: block; width: 100%; }
  .acct-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: center;
    padding: 14px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
  .acct-table td { display: block; padding: 0; border: 0; min-width: 0; }
  .acct-table td:nth-child(1) { grid-column: 1 / 2; }
  .acct-table td:nth-child(4) { grid-column: 2 / 3; grid-row: 1; justify-self: end; }
  .acct-table td:nth-child(2) { grid-column: 1 / -1; font-variant-numeric: tabular-nums; }
  .acct-table td:nth-child(3) { grid-column: 1 / -1; }
  .acct-table td:nth-child(5) { grid-column: 1 / -1; }
  .acct-table td:nth-child(3) select { width: 100%; margin-top: 6px; }
  .acct-table .row-menu { display: block; }
  .acct-table .row-menu > summary { width: 100%; justify-content: center; }
  .acct-table .row-menu-list { left: 0; right: 0; min-width: 0; }
  .acct-who small { word-break: break-all; }
}
@media (max-width: 640px) {
  .acct-card .tablebox, .acct-table, .acct-table tbody, .acct-table tr { min-width: 0 !important; max-width: 100%; box-sizing: border-box; }
  .acct-table { table-layout: auto; }
  .acct-table .row-menu > summary { display: flex; align-items: center; justify-content: center; }
}
@media (max-width: 640px) { .acct-table td { border-left: 0 !important; border-right: 0 !important; box-shadow: none !important; } }

/* A phone brought back after the five days: the settlement figures. */
.return-figures { margin: 8px 0 4px; display: grid; gap: 0; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.return-figures > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--border); font-size: 0.9rem; }
.return-figures > div:first-child { border-top: 0; }
.return-figures dt { color: var(--text-muted); }
.return-figures dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.return-figures .is-strong dd { font-weight: 800; }
.return-figures .is-loss dd { color: var(--danger); }

/* A dropdown drawn by the page (owner, 5 October 2026). */
.nice-select { position: relative; display: inline-block; min-width: 190px; }
.nice-select .nice-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; }
.nice-button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: var(--tap, 44px);
  padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); color: var(--text);
  font: inherit; font-weight: 600; cursor: pointer; transition: border-color 140ms ease, box-shadow 140ms ease; }
.nice-button svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--text-muted); transition: transform 160ms ease; }
.nice-button:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.nice-button:focus-visible, .nice-select.is-open .nice-button { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.nice-select.is-open .nice-button svg { transform: rotate(180deg); }
.nice-list { position: absolute; z-index: 50; top: calc(100% + 6px); right: 0; min-width: 100%; max-height: 320px; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28); animation: niceIn 140ms ease; }
.nice-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px; border-radius: var(--r-sm, 8px);
  cursor: pointer; white-space: nowrap; font-size: 0.95rem; color: var(--text); }
.nice-list li.is-active { background: var(--surface-2); }
.nice-list li.is-on { color: var(--accent); font-weight: 700; }
.nice-list li svg { width: 16px; height: 16px; flex: 0 0 auto; }
@keyframes niceIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nice-list { animation: none; } }
/* The logo is dark lettering: on a white card so it reads in dark mode too (owner, 5 October 2026). */
.login-logo { background: #fff; padding: 10px 14px; border-radius: 12px; box-shadow: var(--shadow-1); box-sizing: content-box; }
.stat[hidden] { display: none !important; }
/* A card whose figures add up to a whole (Locked phones). */
.stat.has-parts { grid-column: span 2; }
@media (max-width: 640px) { .stat.has-parts { grid-column: 1 / -1; } }
.stat .stat-parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end; }
.stat .stat-parts > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-left: 10px; border-left: 1px solid var(--border);
  text-transform: none; letter-spacing: 0; font-size: inherit; line-height: 1.1; }
.stat .stat-parts > span:first-child { padding-left: 0; border-left: 0; }
.stat .stat-parts small { font-size: 0.68rem; font-weight: 500; color: var(--text-subtle); line-height: 1.25; }
.stat .stat-parts .part-1 { color: #4FD1D9; }
.stat .stat-parts .part-2 { color: var(--warning); }
.stat .stat-parts .part-3 { color: var(--danger); }
.stat .stat-parts .part-4 { color: var(--text-muted); }
:root[data-theme="light"] .stat .stat-parts .part-1 { color: #0E7C86; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .stat .stat-parts .part-1 { color: #0E7C86; } }
.stat .stat-bar-parts { display: flex; background: none; gap: 3px; }
.stat .stat-bar-parts i { position: static; height: 100%; border-radius: 99px; }
.stat .stat-bar-parts i.part-1 { background: #4FD1D9; }
.stat .stat-bar-parts i.part-2 { background: var(--warning); }
.stat .stat-bar-parts i.part-3 { background: var(--danger); }
.stat .stat-bar-parts i.part-4 { background: var(--text-subtle); }

/* Refunds owed to customers (owner, 5 October 2026). */
.refund-banner { display: grid; gap: 6px; margin: 10px 0; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--border); }
.refund-banner p { margin: 0; }
.refund-banner.is-owed { border-color: color-mix(in srgb, var(--warning) 55%, var(--border)); background: color-mix(in srgb, var(--warning) 10%, var(--surface)); }
.refund-banner.is-done { background: var(--surface-2); color: var(--text-muted); }
.refund-banner .btn { justify-self: start; }
.refund-chip { margin: 4px 0 0; font-size: 0.85rem; }
.refund-chip.is-owed b { color: var(--warning); }
.refund-chip.is-done { color: var(--text-muted); }

/* A document picture opened over the customer's page (owner, 5 October 2026). */
body.viewer-open { overflow: hidden; }
.image-viewer { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; background: rgba(5, 6, 8, 0.92);
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); animation: viewerIn 160ms ease; }
.image-viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 18px; color: #fff; font-weight: 600; }
.image-viewer-close { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.12); color: #fff; cursor: pointer; }
.image-viewer-close svg { width: 22px; height: 22px; }
.image-viewer-body { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; padding: 8px 12px 16px; overflow: auto; }
.image-viewer-body img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; background: #fff; }
.image-viewer-wait { color: #fff; }
@keyframes viewerIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .image-viewer { animation: none; } }

/* "Who has finished paying?" (owner, 6 October 2026). */
.paid-check-list { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 6px; max-height: 55vh; overflow-y: auto; }
.paid-check-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; min-height: 44px; border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface); cursor: pointer; }
.paid-check-row input { width: 22px; height: 22px; margin-top: 2px; flex: 0 0 auto; }
.paid-check-row span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.paid-check-row small { color: var(--text-muted); }
.paid-check-row .is-late { color: var(--danger); font-weight: 600; }
.paid-check-row.is-sent { opacity: 0.6; cursor: default; }
.paid-check-row:has(input:checked:not(:disabled)) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
#paidCheckSearch { width: 100%; }
.paid-check-actions { position: sticky; bottom: 0; background: var(--surface); padding-top: 8px; }

/* Editing an application before deciding (owner, 6 October 2026). */
.edit-details-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.ed-form .section-title { margin: 18px 0 8px; }
.ed-form .set-grid { display: grid; gap: 10px 14px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.ed-form input, .ed-form select { width: 100%; }

/* Phones to hand back (owner, 6 October 2026) */
.hb { margin-bottom: 16px; }
.hb h2 { margin: 0 0 4px; font-size: 1.15rem; }
.hb .sub { margin: 0 0 16px; color: var(--text-muted); }
.hb-step { border-top: 1px solid var(--border); padding: 14px 0; display: grid; gap: 10px; }
.hb-step h3 { margin: 0; font-size: .95rem; display: flex; gap: 8px; align-items: center; }
.hb-num { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .75rem;
  background: var(--accent, #0059D5); color: #fff; font-weight: 700; flex: none; }
.hb-code input { font-size: 1.4rem; letter-spacing: .3em; width: 10em; max-width: 100%; padding-left: .3em; text-align: center; font-family: ui-monospace, monospace; }
.hb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hb-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-inset); }
.hb-list b { display: block; }
.hb-list small { color: var(--text-muted); }
.hb-list .why { font-size: .78rem; color: var(--text-muted); text-align: right; }
.hb-list .why b { color: var(--danger, #d64545); display: inline; }
.hb-foot { font-size: .8rem; color: var(--text-muted); margin: 8px 0 0; }

/* Money out: a recorded payout stays a week, in green (client, 6 October 2026) */
tr.payout-paid > td { background: var(--success-soft); }
tr.payout-paid > td:first-child { box-shadow: inset 4px 0 0 var(--success); }
.payout-done { display: grid; gap: 2px; justify-items: start; }
.payout-done b { color: var(--success); display: inline-flex; gap: 6px; align-items: center; }
.payout-done b::before { content: "✓"; }
.payout-done small { color: var(--text-muted); }

/* Photos and files in messages (owner, 6 October 2026) */
.inbox-reply { grid-template-columns: auto 1fr auto; }
.inbox-attach { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border); color: var(--text-muted); background: transparent; }
.inbox-attach:hover, .inbox-attach:focus-within { color: var(--text); border-color: var(--text-subtle); }
.inbox-attach svg { width: 20px; height: 20px; }
.inbox-file-chip { grid-column: 1 / -1; margin: 0; font-size: 0.82rem; color: var(--text-muted); display: flex; gap: 8px; align-items: center; min-width: 0; }
.inbox-file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-btn { background: none; border: 0; padding: 0; color: var(--primary, #0059D5); font: inherit; cursor: pointer; text-decoration: underline; }
.bubble-file { display: flex; gap: 8px; align-items: center; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; max-width: 100%; }
.bubble-file.is-image img { display: block; max-width: 220px; max-height: 220px; width: auto; border-radius: 10px; background: var(--surface-inset); min-width: 80px; min-height: 60px; object-fit: cover; }
.bubble-file-icon { flex: none; font-size: .7rem; font-weight: 700; padding: 6px 7px; border-radius: 6px; border: 1px solid currentColor; }
.bubble-file + .bubble-body, .chat-file + p { margin-top: 6px; }
.ask-file-chip { margin: 6px 0 0; font-size: .9rem; display: flex; gap: var(--sp-2); align-items: center; }
.ask-file-chip .link-btn { padding: 0; border: 0; background: none; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; }
.chat-file { display: flex; gap: 8px; align-items: center; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; max-width: 100%; }
.chat-file img { display: block; max-width: 200px; max-height: 200px; border-radius: 10px; min-width: 80px; min-height: 60px; object-fit: cover; background: rgba(127,127,127,.15); }
.ask-attach { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .9rem; }
.ask-attach input[type=file] { max-width: 100%; }

/* Cash confirmations in tabs, Payments waiting first (owner, 6 October 2026) */
.cash-tabs { margin-bottom: var(--sp-4); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cash-tabs::-webkit-scrollbar { display: none; }
.cash-tabs .filter-chip { flex: none; }

/* Automatic direct debit on: a badge on the customer's plan (owner, 7 October 2026) */
.plan-autopay { display: grid; gap: 6px; justify-items: center; }
.plan-autopay small { font-weight: 400; color: var(--text-muted); font-size: .85rem; }
.autopay-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: var(--success-soft); color: var(--success); border: 1px solid var(--success-border); font-weight: 700; }
.autopay-badge svg { width: 18px; height: 18px; }
.deal-new-row { display: flex; justify-content: flex-end; margin-bottom: var(--sp-2); }

/* Same colour as the line it sits on, so it reads on any bubble in either theme (owner, 8 October 2026). */
.bubble-auto { color: inherit; font-style: italic; font-weight: 600; }

/* Call-back times on the customer's page (owner, 7 October 2026) */
.callback-lead { margin: 0 0 4px; font-weight: 600; }
.callback-range { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.callback-range > div { display: grid; gap: 4px; min-width: 0; }
.callback-other-label { margin: 8px 0 0; font-size: .9rem; }
.callback-other { display: flex; flex-wrap: wrap; gap: 6px; }
.callback-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: .85rem; cursor: pointer; }
.callback-chip input { margin: 0; }

/* Money transactions: tabs, a smooth change between them, page numbers (owner, 7 October 2026) */
.ledger-tabs { margin: var(--sp-3) 0 var(--sp-3); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
.ledger-tabs::-webkit-scrollbar { display: none; }
.ledger-tabs .filter-chip { flex: none; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease; }
.ledger-tabs .filter-chip:active { transform: scale(.97); }
.ledger-pane.is-entering { animation: ledger-in .26s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes ledger-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ledger-pane.is-entering { animation: none; } .ledger-tabs { scroll-behavior: auto; } }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: var(--sp-4) 0 var(--sp-2); }
.pager-nums { display: inline-flex; gap: 4px; align-items: center; }
.pager-num, .pager-step { min-width: 38px; height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--border); background: transparent;
  color: var(--text); font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.pager-num:hover, .pager-step:hover:not(:disabled) { border-color: var(--text-subtle); }
.pager-num.is-on { background: var(--primary-interactive, #0059D5); border-color: transparent; color: #fff; font-weight: 700; }
.pager-step:disabled { opacity: .45; cursor: default; }
.pager-gap { color: var(--text-muted); padding: 0 2px; }
.pager-where { width: 100%; text-align: center; font-size: .8rem; color: var(--text-muted); }

/* Merge duplicate shops (7 October 2026) */
.shops-merge-bar { display: flex; justify-content: flex-end; margin-bottom: var(--sp-2); }
.merge-group { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin: 10px 0; }
.merge-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.merge-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.merge-row small { display: block; color: var(--text-muted); }
.merge-keep { font-size: .82rem; color: var(--text-muted); display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }

/* ==========================================================================
   Design pass (owner, 7 October 2026): the nine things that read wrong on
   phones and on the desktop, fixed in one place so each can be found.
   ========================================================================== */

/* 1. The search row: compact buttons; on phones one line, icons only, so the
      box and the results are on the first screen. The Search button stays
      (owner, 2 October 2026: it brings the results into view). */
.tools .btn { min-height: 40px; padding: 0 14px; gap: 6px; }
.tools .btn svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 640px) {
  body:not(.is-care) .tools { flex-direction: row; align-items: center; gap: 8px; margin: var(--sp-3) 0; }
  body:not(.is-care) .tools .btn { width: 44px; min-width: 44px; min-height: 44px; padding: 0; flex: 0 0 auto; }
  body:not(.is-care) .tools .btn .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* 2. Rows in tables: the modal action bar's box and margins never belong
      inside a cell. Money out's rows go from three lines tall to one. */
td .actions, .tablebox .actions { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.payout-cell { white-space: nowrap; }
.payout-cell .mini-chip { margin: 2px 4px 2px 0; }
.mini-chip.is-muted { opacity: .72; }
.mini-chip.is-ok { color: var(--success); border-color: var(--success-border); background: var(--success-soft); }

/* 3. The page header on phones: the controls sit beside the title instead of
      on a row of their own, the subtitle goes, and the title is smaller, so
      the first screen is content. Customer care's own compact header is
      left as it is. */
@media (max-width: 640px) {
  body:not(.is-care) .top { grid-template-columns: minmax(0, 1fr) auto; align-items: center; row-gap: 4px; margin-bottom: var(--sp-3); }
  body:not(.is-care) .top-text { display: contents; }
  body:not(.is-care) .top-head { grid-column: 1; grid-row: 1; margin: 0; }
  body:not(.is-care) .top-head .top-profile { display: none; }
  body:not(.is-care) .top-actions { grid-column: 2; grid-row: 1; flex-wrap: nowrap; gap: 4px; justify-content: flex-end; }
  body:not(.is-care) .top-actions .btn { flex: 0 0 auto; }
  body:not(.is-care) .top h1 { grid-column: 1 / -1; grid-row: 2; font-size: 1.3rem; margin: 0; }
  body:not(.is-care) .top .subtitle { display: none; }
  body:not(.is-care) .top-lang { padding: 0 6px; }
}

/* 4 and 5. Every row of chips is one line that scrolls, with a fade at the
      edge to say so, and the chips are smaller on phones; one style of tab
      everywhere. */
.filter-chips { scrollbar-width: none; -ms-overflow-style: none; }
.filter-chips::-webkit-scrollbar { display: none; }
@media (max-width: 640px) {
  .filter-chips { flex-wrap: nowrap; padding-right: 36px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); }
  .filter-chip { min-height: var(--tap); padding: 0 12px; font-size: .84rem; gap: 5px; }
  .filter-chip span { font-size: .72rem; padding: 0 6px; }
  .pager-num, .pager-step { min-height: var(--tap); height: var(--tap); }
}

/* 6. A long hint folds behind a "?": one line shows, the rest on a tap. The
      button is a full tap target; the small circle is what is drawn. */
.hint-fold { display: block; }
.hint-fold > span:first-child { display: inline; }
.hint-why { width: var(--tap); height: var(--tap); margin: -11px 0 -11px 2px; display: inline-grid; place-items: center; vertical-align: middle;
  border: 0; background: none; padding: 0; cursor: pointer; color: var(--text-muted); font-family: inherit; }
.hint-rest { display: block; margin-top: 4px; }
.hint-rest[hidden] { display: none; }
.hint-why > span { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface);
  display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; line-height: 1; }
.hint-why:hover > span { color: var(--text); border-color: var(--text-subtle); }
.hint-why[aria-expanded="true"] > span { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); }
.hint-rest { flex-basis: 100%; }

/* 7. A field that cannot be changed looks it: greyed, dashed, a lock on its
      label. */
.set-field.is-fixed input { background: var(--surface-inset); color: var(--text-muted); border-style: dashed; cursor: not-allowed; }
.set-field.is-fixed input:focus { box-shadow: none; border-color: var(--border-strong); }
.set-field.is-fixed > label { color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.set-field.is-fixed > label::before { content: ""; width: 12px; height: 12px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat; }

/* 8. In dark mode the one main button on a card is a strong blue with white
      text, so it no longer reads as disabled beside the outlined ones. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn:not(.alt):not(.secondary):not(.ghost):not(.danger):not(.linkish) { background: #2F6FEB; color: #FFFFFF; }
  :root:not([data-theme="light"]) .btn:not(.alt):not(.secondary):not(.ghost):not(.danger):not(.linkish):hover { background: #4A86F2; }
}
:root[data-theme="dark"] .btn:not(.alt):not(.secondary):not(.ghost):not(.danger):not(.linkish) { background: #2F6FEB; color: #FFFFFF; }
:root[data-theme="dark"] .btn:not(.alt):not(.secondary):not(.ghost):not(.danger):not(.linkish):hover { background: #4A86F2; }

/* 9. A badge keeps its wording: "Waiting for the office", not "Waiting For
      The Office". Only the first letter is raised. */
.status-badge { display: inline-block; text-transform: none; line-height: 1.5; }
.status-badge::first-letter { text-transform: uppercase; }

/* 10. The file picker (owner, 7 October 2026): the browser's own grey button
      read as foreign, above all in dark mode. The box is drawn like every
      other field, and its button like the outlined buttons beside it. The
      "No file chosen" words are the browser's and cannot be changed. */
input[type="file"] { width: 100%; min-height: var(--tap); padding: 6px 8px; border: 1px dashed var(--border-strong); border-radius: var(--r-md);
  background: var(--surface-inset); color: var(--text-muted); font: inherit; font-size: .9rem; cursor: pointer; box-sizing: border-box; }
input[type="file"]::file-selector-button { margin-right: 10px; padding: 0 14px; min-height: 32px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface); color: var(--text); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
input[type="file"]:hover::file-selector-button { background: var(--surface-2); border-color: var(--text-subtle); }
input[type="file"]:hover { border-color: var(--text-subtle); }
input[type="file"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.statement-match-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.statement-match-row input[type="file"] { flex: 1 1 16rem; min-width: 0; }

/* The evidence the office needs before the day starts (owner, 9 October 2026). */
.evidence-gate { z-index: 1000; backdrop-filter: blur(6px); }
.evidence-card { display: grid; gap: 12px; max-width: 520px; width: calc(100% - 32px); }
.evidence-card h2 { margin: 0; font-size: 1.25rem; }
.eg-kicker { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--danger); }
.eg-question { margin: 0; line-height: 1.55; }
.eg-plan { margin: 0; color: var(--text-muted); font-size: .9rem; }
.eg-pick { cursor: pointer; }
/* A picture with the office's question (owner, 11 October 2026). */
.qp { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-inset); }
.qp-t { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.qp-step { display: grid; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--border); }
.qp-step:first-of-type { border-top: 0; padding-top: 0; }
.qp-h { margin: 0; display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: .92rem; }
.qp-n { flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-size: .78rem; }
.qp-row { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); align-items: center; gap: 6px; }
.qp-box { display: grid; gap: 1px; border-radius: 10px; padding: 7px 9px; font-size: .8rem; line-height: 1.35; background: var(--surface); border: 1.5px solid var(--border); min-width: 0; }
.qp-box b { font-size: .86rem; } .qp-box small { color: var(--text-muted); }
.qp-box.is-ok { border-color: var(--success); } .qp-box.is-ok .qp-tag { color: var(--success); }
.qp-box.is-owed { border: 2px solid var(--danger); } .qp-box.is-owed .qp-tag { color: var(--danger); }
.qp-box.is-none { border-style: dashed; }
.qp-tag { font-weight: 700; font-size: .95rem; }
.qp-arr { text-align: center; color: var(--text-muted); font-size: 1.1rem; }
.qp-note { margin: 0; font-size: .82rem; color: var(--text-muted); }
.qp-one { display: grid; }
/* The proof itself, cut from the evidence (owner, 16 October 2026). */
.qp-img { margin: 0; display: grid; gap: 4px; }
.qp-img img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--border); background: #fff; display: block; }
.qp-img figcaption { font-size: .76rem; color: var(--text-muted); }
.qp-box.is-warn { border: 2px solid var(--warning, #b54708); } .qp-box.is-warn .qp-tag { color: var(--warning, #b54708); }
/* Evidence and a few words with a ticked answer (owner, 10 October 2026). */
.cg-extra { margin: 0; padding: 10px 12px 12px; border: 1px solid var(--border); border-radius: var(--r-lg); display: grid; gap: 8px; min-width: 0; }
.cg-extra legend { padding: 0 4px; font-size: .9rem; }
.cg-extra legend span, .cg-field > span { color: var(--text-muted); font-weight: 400; }
.cg-extra legend span.is-needed { color: var(--danger); font-weight: 700; }
.cg-field > span b { color: var(--text); font-weight: 600; }
.cg-field { display: grid; gap: 4px; font-size: .9rem; min-width: 0; }
.cg-field input, .cg-field textarea { width: 100%; min-width: 0; min-height: var(--tap); padding: 8px 10px; border: 1px solid var(--border-strong);
  border-radius: var(--r-md); background: var(--surface); color: var(--text); }
.cg-field input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.cg-field textarea { resize: vertical; }
.cg-proof { margin: 0; padding: 8px 10px; border-radius: var(--r-md); background: var(--surface-inset); font-size: .88rem; line-height: 1.45; }
.cg-proof.is-ok { background: var(--success-soft); color: var(--success); font-weight: 600; }
.cg-proof.is-bad { background: var(--danger-soft); color: var(--danger); }

/* Today's orders grouped by auditor or sales person (owner, 8 October 2026). */
.orders-groups { display: grid; gap: 18px; }
.orders-group { display: grid; gap: 8px; }
.orders-group-head { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 1rem; }
.orders-group-head small { color: var(--text-muted); font-weight: 500; font-size: .85rem; font-variant-numeric: tabular-nums; }
.orders-day select { width: auto; min-height: 44px; }

/* Cash: who received it (owner, 8 October 2026). */
.mp-receivers { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-receiver { border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; min-height: 44px; background: var(--surface);
  color: var(--text); font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.mp-receiver.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.mp-receiver.is-add { border-style: dashed; color: var(--accent); }
.mp-receiver.is-static { cursor: default; }
.mp-receiver-x { border: 0; background: none; color: var(--text-muted); font-size: 1.1rem; line-height: 1; cursor: pointer; min-width: 28px; min-height: 28px; }
#mpReceiverNew { margin-top: 8px; }
.mp-cash-ref { margin: 0; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text-muted); }
.field-label { display: block; font-weight: 600; font-size: .86rem; margin-bottom: 6px; }

/* Recommendations from the team (owner, 8 October 2026). */
.sugg-list { display: grid; gap: 12px; }
.sugg-item { display: grid; gap: 8px; }
.sugg-item.is-new { border-left: 4px solid var(--accent); }
.sugg-item header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sugg-item header small { color: var(--text-muted); }
.sugg-when { margin-left: auto; }
.sugg-areas { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
.sugg-text { margin: 0; max-width: 72ch; white-space: pre-wrap; }
.sugg-status { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--text-muted); }
.sugg-status select { width: auto; }
.suggest-card form { display: grid; gap: 10px; }
.suggest-areas { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.suggest-areas legend { font-weight: 600; margin-bottom: 6px; }
.suggest-areas #areas { display: grid; gap: 8px; }
.suggest-area { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); min-height: 44px; cursor: pointer; }
.suggest-area input { width: 20px; height: 20px; flex: none; margin: 0; }
.suggest-area:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.suggest-card textarea { width: 100%; }

/* Analytics on the Overview (owner, 8 October 2026). */
#insightsSlot { display: grid; gap: var(--sp-3, 12px); }
.ins-bar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; padding: 10px 14px;
  border: 1px solid var(--accent-border); background: var(--accent-soft); border-radius: 14px; font-size: .88rem; color: var(--text); }
.ins-card { display: grid; gap: 12px; }
.ins-card .section-title small { display: block; font-size: .8rem; font-weight: 500; color: var(--text-muted); margin-top: 2px; }
.ins-words { margin: 0; max-width: 72ch; line-height: 1.6; }
.ins-rec { border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: 0 12px 12px 0; padding: 10px 14px; }
.ins-rec b { display: block; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
.ins-rec p { margin: 0; max-width: 72ch; }
.ins-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 0; }
.ins-tile { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.ins-tile dt { font-size: .78rem; color: var(--text-muted); }
.ins-tile dd { margin: 2px 0 0; font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.ins-tile dd.is-good { color: var(--success); } .ins-tile dd.is-bad { color: var(--danger); } .ins-tile dd.is-warn { color: var(--warning); }
.ins-tile span { display: block; font-size: .78rem; color: var(--text-muted); }
.ins-chart { overflow-x: auto; }
.ins-chart svg { width: 100%; min-width: 520px; height: auto; display: block; }
.ins-chart text { fill: var(--text-muted); font-size: 11px; }
.ins-grid line { stroke: var(--border); }
.ins-due { fill: var(--accent-border); } .ins-exp { fill: var(--accent); }
.ins-late { fill: var(--warning); } .ins-late-0 { fill: var(--warning-border); } .ins-late-2 { fill: var(--danger); opacity: .75; } .ins-late-3 { fill: var(--danger); }
.ins-leaks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.ins-leak { border-left: 4px solid var(--danger); background: var(--danger-soft); border-radius: 0 12px 12px 0; padding: 10px 14px; }
.ins-leak b { display: block; color: var(--danger); font-size: .82rem; margin-bottom: 2px; }
.ins-leak p { margin: 0; }
.ins-table td.num, .ins-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ins-rate { display: flex; align-items: center; gap: 10px; }
.ins-rate b { min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }
.ins-meter { flex: 1; height: 8px; min-width: 48px; max-width: 140px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.ins-meter i { display: block; height: 100%; border-radius: 99px; }
.ins-meter i.is-good { background: var(--success); } .ins-meter i.is-mid { background: var(--warning); } .ins-meter i.is-bad { background: var(--danger); }
.ins-few { color: var(--text-muted); font-size: .75rem; }
.ins-sub { margin: 6px 0 0; font-size: .95rem; }
.ins-actions { margin: 0; padding-left: 20px; display: grid; gap: 8px; max-width: 76ch; }
.ins-foot { font-size: .8rem; }

/* The call-back's text and ticks (owner, 8 October 2026). */
.task-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.task-tries { display: block; color: var(--warning); }
.care-sheet { display: grid; gap: 10px; max-height: min(86vh, 720px); overflow-y: auto; }
.care-sheet h3 { margin: 0; }
.care-sheet .outcome-group { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 0; }
.care-sheet .sheet-label, .care-sheet label[for="ctTextBody"] { margin: 4px 0 0; font-weight: 600; font-size: .86rem; color: var(--text-muted); }
.care-sheet .sheet-fixed { margin: 0; padding: 8px 10px; border: 1px dashed var(--border-strong, var(--border)); border-radius: 10px;
  background: var(--surface-2); color: var(--text-muted); font-size: .9rem; }
.care-sheet textarea { width: 100%; }
.care-sheet .sheet-count { margin: 0; text-align: right; font-size: .8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.care-sheet .sheet-count.is-over { color: var(--danger); font-weight: 600; }
/* The analytics tables are four short columns: they fit their card rather than
   taking the 1000px every big list gets; on a phone the bars give way. */
.tablebox table.ins-table { min-width: 0; }
.ins-table td.num { white-space: nowrap; }
@media (max-width: 700px) {
  .tablebox table.ins-table { min-width: 0; }
  .ins-table .ins-meter { display: none; }
  .ins-table { font-size: .82rem; }
  .ins-table th, .ins-table td { padding: 8px 6px; }
  .ins-table th { font-size: .68rem; letter-spacing: .02em; }
  .tablebox .ins-table tbody td:first-child { position: static; box-shadow: none; }
}

/* Sent by another of our customers (owner, 9 October 2026): care fix it here
   before the report goes to the office. */
.sender-warn { border: 2px solid var(--danger); background: var(--danger-soft); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; margin: 8px 0; }
.sender-warn h4 { margin: 0; font-size: 1rem; color: var(--danger); overflow-wrap: anywhere; }
.sender-warn p { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.sender-warn .btn { width: 100%; white-space: normal; height: auto; min-height: 44px; }
.sender-warn.is-chosen { border-width: 1px; }
/* Putting money on the right customer (owner, 12 October 2026). */
.sender-why { margin: 0; padding-left: 1.1rem; display: grid; gap: 3px; font-size: .9rem; overflow-wrap: anywhere; }
.sender-pair, .move-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.move-pair .btn { width: 100%; min-height: 44px; }
.sender-flow { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); gap: 6px; align-items: center; margin: 6px 0; }
.sf-box { display: grid; gap: 1px; border: 1.5px solid var(--border); border-radius: 10px; padding: 7px 10px; min-width: 0; overflow-wrap: anywhere; }
.sf-box small { color: var(--text-muted); font-size: .75rem; }
.sf-box b { font-size: .95rem; }
.sf-box.is-new { border: 2px solid var(--danger); background: var(--danger-soft); }
.sf-new { justify-self: start; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--danger); }
.sf-arrow { text-align: center; color: var(--text-muted); font-size: 1.2rem; }
.sf-why { margin: 0 0 6px; font-size: .85rem; color: var(--text-muted); overflow-wrap: anywhere; }
.sf-tick { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--border); border-radius: 10px; padding: 9px 11px; margin: 6px 0; font-size: .9rem; cursor: pointer; }
.sf-tick input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.payer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.payer-list li { display: flex; justify-content: space-between; gap: 10px; align-items: center; border: 1px solid var(--border); border-radius: 10px; padding: 8px 11px; }
.payer-list li > span:first-child { display: grid; min-width: 0; overflow-wrap: anywhere; }
.payer-list small { color: var(--text-muted); }
.payer-count { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wrong-pick { display: grid; gap: 10px; }
.wrong-pick fieldset { border: 0; padding: 0; margin: 0; }
.wrong-options { display: grid; gap: 6px; margin-top: 6px; }
.wrong-option { display: flex; gap: 10px; align-items: center; justify-content: space-between; border: 1.5px solid var(--border); border-radius: 10px; padding: 9px 11px; background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; min-width: 0; overflow-wrap: anywhere; }
.wrong-option:has(input:checked) { border-color: var(--accent); }
.wrong-option small { color: var(--text-muted); white-space: nowrap; }
.wrong-option input { flex: none; width: 20px; height: 20px; margin: 0; }
.wrong-what { flex: 1; min-width: 0; }
.wrong-what .nowrap { white-space: nowrap; }
.wrong-chosen { margin: 0; display: grid; gap: 2px; border: 2px solid var(--success); border-radius: 10px; padding: 8px 11px; }
.wrong-chosen small { color: var(--text-muted); }
.move-side { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0; }
.move-plan { display: grid; gap: 4px; border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; min-width: 0; overflow-wrap: anywhere; }
.move-plan > span { display: flex; justify-content: space-between; gap: 6px; font-size: .88rem; }
.move-plan .minus { color: var(--danger); } .move-plan .plus { color: var(--success); }
@media (max-width: 480px) { .move-side { grid-template-columns: 1fr; } .sender-flow { grid-template-columns: 1fr; } .sf-arrow { transform: rotate(90deg); } }
.manual-pay-sender { margin: 6px 0; padding: 8px 12px; border: 1px solid var(--danger-border); background: var(--danger-soft); border-radius: 10px; font-size: 0.85rem; }
.manual-pay-sender b { color: var(--danger); }
/* More than the plan owes: the extra becomes a refund when confirmed (owner, 10 October 2026). */
.manual-pay-over { margin: 6px 0; padding: 8px 12px; border: 1px solid var(--warning-border); background: var(--warning-soft); border-radius: 10px; font-size: 0.85rem; }

/* The month, chosen once at the top for every page with dated lists (owner, 9 October 2026). */
.month-icon { width: 19px; height: 19px; flex: 0 0 auto; color: var(--text-subtle); }
.top-month.is-on { border-color: var(--accent); background: var(--accent-soft); }
.top-month.is-on .month-icon, .top-month.is-on select { color: var(--accent); }
@media (max-width: 640px) {
  body:not(.is-care) .top-month .month-icon { display: none; }
  body:not(.is-care) .top-month select { font-size: 0.85rem; max-width: 92px; }
}
/* With the month at the top, the phone's top row is too wide (owner, 9 October
   2026): the buttons get their own row under the role label, and the
   language shows as EN/中文 without its icon. */
@media (max-width: 640px) {
  body:not(.is-care) .top-actions { grid-column: 1 / -1; grid-row: 2; justify-content: flex-end; }
  body:not(.is-care) .top h1 { grid-row: 3; }
  body:not(.is-care) .top-lang .lang-badge { display: none; }
}

/* Pay buttons in the customer's chat (owner, 9 October 2026): the same
   buttons as the page's own, inside the assistant's reply. */
.chat-pay { display: grid; gap: var(--sp-2); margin-block: var(--sp-3) var(--sp-2); }
.chat-bubble:has(.chat-pay) { width: 85%; }
.chat-pay .btn { width: 100%; text-align: center; white-space: normal; min-height: var(--tap); height: auto; padding-block: var(--sp-2); }
/* "Another amount" is one line, the height of a button: GHS, the figure, Pay.
   Two classes deep so the page's own form and input rules do not stack it. */
.chat-pay .chat-amount { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); padding: 3px 3px 3px var(--sp-3);
  border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); }
.chat-pay .chat-amount:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.chat-pay .chat-amount-cur { flex: 0 0 auto; font-weight: 600; font-size: 0.94rem; color: var(--text-muted); }
.chat-pay .chat-amount input { flex: 1 1 0; width: 0; min-width: 0; min-height: 0; height: 36px; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--text); font-size: 1rem; font-variant-numeric: tabular-nums; }
.chat-pay .chat-amount input:focus { outline: none; box-shadow: none; }
.chat-pay .chat-amount .btn { flex: 0 0 auto; width: auto; min-height: 36px; padding: 0 var(--sp-4); }
.help-card .chat-bubble .chat-pay-note, .chat-pay-note { margin: 0; font-size: 0.85rem; color: var(--text-muted); white-space: normal; }
.help-card .chat-bubble .chat-pay-note.is-warn, .chat-pay-note.is-warn { color: var(--danger); }

/* Pictures on the assistant's replies (owner, 10 October 2026): the price,
   the payments, and where things are on the page. Theme tokens only, so they
   read the same in light and dark. */
.chat-bubble:has(.cv) { width: 88%; max-width: 88%; }
.cv { margin: var(--sp-3) 0 var(--sp-2); padding: var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); color: var(--text); white-space: normal; }
.help-card .chat-bubble .cv p { margin: 0; color: inherit; white-space: normal; }
.cv-title { font-size: 0.72rem !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted) !important; margin-bottom: var(--sp-2) !important; }
.cv-bar { display: flex; height: 30px; border-radius: var(--r-md); overflow: hidden; }
.cv-seg { display: flex; align-items: center; justify-content: center; min-width: 34px; font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cv-seg.is-deposit, .cv-legend i.is-deposit { background: color-mix(in srgb, var(--primary) 45%, var(--surface)); color: var(--text); }
.cv-seg.is-loan, .cv-legend i.is-loan { background: var(--primary); color: var(--on-primary); }
.cv-seg.is-charge, .cv-legend i.is-charge { background: var(--warning); color: var(--surface); }
.cv-brace { display: flex; margin-top: 4px; font-size: 0.72rem; color: var(--text-muted); }
.cv-brace span { border-top: 2px solid var(--border-strong); padding-top: 2px; text-align: center; }
.cv-brace span.is-gap { border: 0; }
.cv-legend { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: 4px; font-size: 0.82rem; }
.cv-legend li { display: flex; align-items: center; gap: var(--sp-2); }
.cv-legend i { flex: 0 0 10px; height: 10px; border-radius: 3px; }
.cv-legend span { flex: 1; color: var(--text-muted); }
.cv-legend b, .cv-total b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cv-total { display: flex; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-2) !important; padding-top: var(--sp-2); border-top: 1px dashed var(--border); font-size: 0.9rem; font-weight: 600; }
.cv-total.is-left { border-top: 0; margin-top: 2px !important; padding-top: 0; color: var(--text-muted) !important; font-weight: 500; }
.cv-total.is-left b { color: var(--text); }
.cv-weeks { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; margin-top: var(--sp-2); }
.cv-weeks span { height: 20px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 0.62rem; font-weight: 700; background: var(--surface-inset); color: var(--text-subtle); }
.cv-weeks span.is-paid { background: var(--success); color: var(--surface); }
.cv-weeks span.is-part { background: var(--warning-soft); color: var(--warning); box-shadow: inset 0 0 0 1px var(--warning-border); }
.cv-note { margin-top: var(--sp-2) !important; font-size: 0.82rem; color: var(--text-muted) !important; }
.cv-note b { color: var(--text); }
.cv-pays { list-style: none; margin: 0; padding: 0; }
.cv-pays li { display: grid; gap: 1px; padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); font-size: 0.82rem; }
.cv-pays li:first-child { padding-top: 0; }
.cv-pays li:last-child { border-bottom: 0; }
.cv-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: var(--sp-2); }
.cv-line b { font-size: 0.92rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cv-pays small { display: block; color: var(--text-muted); font-size: 0.76rem; line-height: 1.4; overflow-wrap: anywhere; }
.cv-wk { color: var(--success); font-weight: 700; font-size: 0.76rem; white-space: nowrap; }
/* Taken off by the office, not money paid: shown quieter than a payment. */
.cv-pays li.is-off b, .cv-pays li.is-off .cv-wk { color: var(--text-muted); font-weight: 600; }
/* Looks like a small link, taps like a button: 44px tall, the extra height outside its line. */
.cv-receipt { display: inline-flex; justify-self: start; align-items: center; min-height: var(--tap); margin: -12px 0 -12px -6px; padding: 0 6px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 0.76rem; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.cv-shot { position: relative; margin: 0 0 var(--sp-2); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface-inset); }
.cv-shot img { display: block; width: 100%; height: auto; }
.cv-ring { position: absolute; border: 3px solid var(--danger); border-radius: var(--r-lg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 22%, transparent); pointer-events: none; animation: cv-ring 1.8s ease-in-out 3; }
.cv-ring.is-round { border-radius: 50%; }
@keyframes cv-ring { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--danger) 12%, transparent); } }
.cv-step { position: absolute; left: 8px; top: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--danger); color: var(--surface); font-size: 0.75rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.cv-steps { margin: 0 0 var(--sp-2); padding-left: 1.3em; font-size: 0.85rem; display: grid; gap: 3px; }
.cv-steps.is-one { list-style: none; padding-left: 0; }
.cv-show { width: 100%; min-height: var(--tap); }
/* "Show me on my page": the place itself glows for a moment. */
.is-guided { position: relative; z-index: 2; outline: 3px solid var(--danger); outline-offset: 4px; border-radius: var(--r-md); animation: guided 1.4s ease-in-out 3; }
#docBtn.is-guided { border-radius: 50%; }
@keyframes guided { 50% { outline-offset: 9px; outline-color: color-mix(in srgb, var(--danger) 40%, transparent); } }
@media (prefers-reduced-motion: reduce) { .cv-ring, .is-guided { animation: none; } }

/* Online shops (owner, 11 October 2026): "Pay with DT Tigers". */
.os-top { display: grid; gap: var(--sp-3); }
.os-switch { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
.os-switch > div { display: grid; gap: 2px; min-width: 0; }
.os-switch small { color: var(--text-muted); }
.os-shops { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--sp-4); }
.os-shop { display: grid; gap: var(--sp-3); align-content: start; }
.os-shop-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.os-shop-head h3 { margin: 0; font-size: 17px; }
.os-shop-head a { font-size: 13px; color: var(--accent); }
.os-facts { margin: 0; display: grid; gap: 6px; }
.os-facts div { display: grid; grid-template-columns: 11em 1fr; gap: var(--sp-2); font-size: 14px; }
.os-facts dt { color: var(--text-muted); }
.os-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.os-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.os-actions .btn { width: 100%; justify-content: center; }
.os-earn { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.os-earn div { display: grid; gap: 2px; padding: var(--sp-3); border-radius: var(--r-lg); background: var(--surface-2); min-width: 0; }
.os-earn small { color: var(--text-muted); }
.os-earn b { font-size: 18px; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .os-earn { grid-template-columns: 1fr; } }
.os-late { display: block; color: var(--danger); font-weight: 600; }

/* A confirmed Ghana Card, as one line in the details (owner, 12 October 2026). */
.id-ok { color: var(--success); font-weight: 700; }

/* Training: guides with a video (owner, 13 October 2026). */
.training-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; align-items: start; }
.training-card { display: grid; gap: 10px; }
.training-card .section-title { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.training-chip { font-size: .72rem; vertical-align: middle; }
/* Who in customer care has watched a care guide (owner, 19 October 2026). */
.training-who { margin: 0; font-size: .9rem; color: var(--muted); }
.training-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.training-actions.is-single { grid-template-columns: 1fr; }
.training-actions .btn { width: 100%; justify-content: center; text-align: center; }

/* The customer's picture in the office inbox (owner, 13 October 2026). */
.inbox-messages .bubble:has(.cv) { width: min(440px, 88%); max-width: 88%; }
.inbox-messages .cv p { margin: 0; }
.cv-seen { font-size: 0.7rem !important; color: var(--text-subtle) !important; margin-bottom: 6px !important; }

/* The AI reading of the paper agreement, under the photos (owner, 13 October 2026). */
.paper-notes { display: grid; gap: 8px; margin-top: 12px; }
.paper-notes.is-checking { color: var(--text-muted); font-size: .92rem; }
.paper-note { margin: 0; padding: 10px 12px; border-radius: var(--r-md, 10px); display: grid; gap: 2px; font-size: .92rem; border-left: 4px solid; }
.paper-note b { font-size: .95rem; }
.paper-note.is-warn { background: var(--warning-soft); border-color: var(--warning); }
.paper-note.is-bad { background: var(--danger-soft, #fbe6e3); border-color: var(--danger); }
.paper-note.is-ok { background: var(--success-soft, #e4f2e8); border-color: var(--success); }

/* Phone replacement on the record (owner, 13 October 2026). */
.replace-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin: 8px 0; }
.replace-ph { border: 2px solid var(--border); border-radius: var(--r-md, 10px); padding: 8px; text-align: center; display: grid; gap: 2px; }
.replace-ph.is-old { opacity: .8; } .replace-ph.is-new { border-color: var(--success); }
.replace-ph small { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.replace-ticks { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; }
.replace-ticks li::before { content: "\2713  "; color: var(--success); font-weight: 800; }
.replace-price { border: 1px solid var(--border); border-radius: var(--r-md, 10px); padding: 10px 12px; display: grid; gap: 6px; margin: 8px 0; }
.replace-price input[type="number"] { width: 9em; margin-left: 6px; }
.replace-money { display: grid; grid-template-columns: 1fr auto auto; gap: 3px 12px; font-size: .88rem; font-variant-numeric: tabular-nums; margin-top: 6px; }
.replace-money .h { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.replace-money s { color: var(--text-muted); }
.replace-note { margin: 6px 0; padding: 8px 10px; border-radius: var(--r-md, 10px); border-left: 4px solid var(--warning); background: var(--warning-soft); }
.replace-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.replace-actions .btn, .case-buttons.is-single .btn { width: 100%; justify-content: center; }

/* A guide opened over Training (owner, 13 October 2026). */
.guide-sheet { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 16px; background: rgba(8, 9, 11, .72); }
.guide-sheet-box { width: min(1100px, 100%); height: min(92vh, 100%); display: flex; flex-direction: column; background: var(--surface); border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.guide-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.guide-sheet-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guide-sheet-frame { flex: 1; width: 100%; border: 0; background: #fff; }
body.guide-open { overflow: hidden; }
@media (max-width: 640px) { .guide-sheet { padding: 0; } .guide-sheet-box { height: 100%; border-radius: 0; } }

/* Approve and Turn down stacked, the same width (owner: symmetrical buttons); side by side they pushed the table off the page. */
.wo-actions { display: grid; grid-template-columns: 1fr; gap: 6px; min-width: 96px; }
.wo-actions > small { align-self: center; text-align: center; }
.wo-table td:nth-child(4) { max-width: 200px; white-space: normal; }
.wo-table th:last-child, .wo-table td:last-child { width: 112px; padding-left: 8px; padding-right: 8px; }
.tablebox table.wo-table { min-width: 0; }

/* Shops, redone (owner, 14 October 2026). */
.shop-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 12px; }
.shop-filter { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font: inherit; }
.shop-filter b { font-size: 1.35rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.shop-filter span { font-size: .8rem; color: var(--text-muted); }
.shop-filter.is-attn b { color: var(--warning, #b45309); }
.shop-filter.is-on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary) inset; background: var(--primary-soft, var(--surface-2)); }
.shop-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 12px; }
.shop-tool { display: grid; gap: 4px; font-size: .78rem; color: var(--text-muted); min-width: 170px; }
.shop-toolbar .spacer { flex: 1; }
.tablebox table.shop-table { min-width: 0; }
.shop-table tbody tr { cursor: pointer; }
.shop-table tbody tr:hover, .shop-table tbody tr:focus-visible { background: var(--surface-2); outline: none; }
.shop-table td small { display: block; }
.shop-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.shop-pill { display: inline-block; font-size: .74rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--surface-3); color: var(--text-muted); white-space: nowrap; }
.shop-pill.is-ready { background: rgba(16, 185, 129, .14); color: #047857; }
.shop-pill.is-review { background: rgba(245, 158, 11, .16); color: #b45309; }
.shop-pill.is-none { background: rgba(220, 38, 38, .1); color: #b91c1c; }
.shop-more { display: flex; justify-content: center; margin: 14px 0; }
.shop-sub { color: var(--text-muted); margin: -4px 0 12px; }
.shop-section { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px; }
.shop-section .section-title { display: flex; align-items: center; gap: 10px; }
.shop-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-top: 8px; }
.shop-sellers { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.shop-sellers li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.shop-sellers li > span:first-child { display: grid; gap: 2px; min-width: 0; }
.shop-seller-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.shop-add-btn { align-self: end; }
.shop-add-btn .btn { width: 100%; }
@media (max-width: 760px) {
  .shop-table thead { display: none; }
  .shop-table, .shop-table tbody, .shop-table tr, .shop-table td { display: block; width: 100%; }
  .shop-table tr { padding: 10px 12px; border-bottom: 1px solid var(--border); }
  .shop-table td { padding: 3px 0; border: 0; text-align: left !important; }
  .shop-table td[data-label]::before { content: attr(data-label); display: block; font-size: .7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
  .shop-table td:first-child::before { display: none; }
  .shop-table td:last-child .btn { width: 100%; margin-top: 6px; }
  .tablebox.shop-list .shop-table tbody td:first-child { position: static; box-shadow: none; }
  .shop-sellers li { flex-direction: column; align-items: stretch; }
}
/* Shops: one row of counts on a wide screen, a swipeable row of chips on a phone; matching controls (owner: symmetrical). */
.shop-filters { grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); }
.shop-tool select { height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: .95rem; }
.shop-toolbar .btn { min-height: 44px; }
.shop-table a.mono { color: var(--primary); text-decoration: none; }
.shop-table a.mono:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .shop-filters { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .shop-filter { flex: none; display: flex; align-items: baseline; gap: 6px; padding: 8px 12px; border-radius: 999px; }
  .shop-filter b { font-size: 1rem; }
  .shop-filter span { font-size: .82rem; white-space: nowrap; }
  .shop-toolbar { display: grid; grid-template-columns: 1fr 1fr; }
  .shop-toolbar .spacer { display: none; }
  .shop-tool { min-width: 0; }
  .shop-toolbar .btn { width: 100%; }
}
.shop-tool select { width: 100%; min-width: 0; }
@media (max-width: 760px) {
  .shop-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
  .shop-table td:first-child, .shop-table td:last-child { grid-column: 1 / -1; }
}

/* What the form could not confirm, in red on the application (owner, 14 October 2026). */
.intake-flags { border: 1px solid var(--danger, #dc2626); border-left-width: 5px; background: var(--danger-soft, rgba(220, 38, 38, .08)); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; color: var(--text); }
.intake-flags b { color: var(--danger, #b91c1c); display: block; margin-bottom: 6px; }
.intake-flags ul { margin: 0 0 6px; padding-left: 20px; display: grid; gap: 4px; }
.intake-flags p { margin: 0; font-size: .85rem; color: var(--text-muted); }
#phoneNotes { margin-bottom: 14px; }

/* ==========================================================================
   The Overview, redrawn (owner, 15 October 2026: "make sure that whole page
   is redesigned professionally"). Every block is its own card with the
   same edges, padding and heading; bars show the parts of each number;
   one set of chart colours that reads in light and dark.
   ========================================================================== */
:root {
  --dv-blue: #2F6FEB; --dv-green: #1E9E6A; --dv-amber: #D98A00; --dv-red: #D9363E; --dv-grey: #A3A7AE;
  --dv-track: #E9EAEC; --dv-card-pad: 22px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --dv-blue: #5B8DEF; --dv-green: #34C489; --dv-amber: #F0B23E; --dv-red: #FF6B6E; --dv-grey: #6B7079; --dv-track: #2A2D33; }
}
:root[data-theme="dark"] { --dv-blue: #5B8DEF; --dv-green: #34C489; --dv-amber: #F0B23E; --dv-red: #FF6B6E; --dv-grey: #6B7079; --dv-track: #2A2D33; }

/* The tiles at the top: the business on one row, what needs doing on a strip under it. */
#stats.is-overview { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
#stats.is-overview .stats-main { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-3); }
#stats.is-overview .stats-main[hidden], #stats.is-overview .stats-attention[hidden] { display: none; }
#stats.is-overview .stats-main > .stat { min-height: 128px; }
#stats.is-overview .stats-main > .stat.has-parts { grid-column: span 2; }
#stats.is-overview .stat.is-money b { white-space: nowrap; margin-right: 0; font-size: clamp(1.15rem, 1.9vw, 1.7rem); }
#stats.is-overview .stats-attention { display: flex; flex-wrap: wrap; gap: 1px; background: var(--border); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); }
#stats.is-overview .stats-attention-title { flex: 1 1 100%; margin: 0; padding: 10px 16px; background: var(--surface-2); color: var(--text-muted);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
#stats.is-overview .stats-attention > .stat { flex: 1 1 128px; min-height: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none;
  background: var(--surface); padding: 14px 44px 18px 16px; }
#stats.is-overview .stats-attention > .stat[hidden] { display: none !important; }
#stats.is-overview .stats-attention > .stat b { font-size: 1.6rem; margin-top: 6px; }
#stats.is-overview .stats-attention > .stat .stat-icon { top: 12px; right: 12px; width: 22px; height: 22px; }
#stats.is-overview .stats-attention > .stat .stat-icon svg { width: 18px; height: 18px; }
#stats.is-overview .stats-attention > .stat .stat-bar { left: 16px; right: 16px; bottom: 8px; height: 4px; }
#stats.is-overview .stats-attention > .stat.is-zero b { color: var(--text-subtle); }
#stats.is-overview .stats-attention > .stat .stat-split { font-size: 1.6rem; }
#stats.is-overview .stats-attention > .stat .stat-split small { font-size: 0.72rem; line-height: 1.25; margin-top: 2px; }
#stats.is-overview .stats-attention > .stat .stat-split b, #stats.is-overview .stats-attention > .stat .stat-split { color: inherit; }
#stats.is-overview .stats-attention > button.stat:hover { background: var(--surface-2); box-shadow: none; }
@media (max-width: 900px) {
  #stats.is-overview .stats-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  #stats.is-overview .stats-main > .stat.has-parts { grid-column: 1 / -1; }
  #stats.is-overview .stats-attention > .stat { flex-basis: 140px; }
}

/* The Overview's tabs as one underlined bar. */
.overview-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); padding: 0 2px; margin: var(--sp-5) 0 var(--sp-5); }
.overview-tabs .filter-chip { min-height: var(--tap); border: 0; border-radius: 0; background: none; color: var(--text-muted);
  padding: 0 var(--sp-3); margin-bottom: -1px; border-bottom: 2px solid transparent; font-weight: 600; }
.overview-tabs .filter-chip:hover:not(:disabled) { color: var(--text); border-bottom-color: var(--border-strong); }
.overview-tabs .filter-chip.is-on { background: none; color: var(--accent); border-bottom-color: var(--accent); }
.overview-tabs .filter-chip.is-on span { background: var(--accent-soft); color: var(--accent); }

/* Cards on the Dashboard tab: one look for all of them. */
.dv { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.dv-card, .compare-card.dv-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm);
  padding: var(--dv-card-pad); margin: 0 0 var(--sp-4); min-width: 0; }
.dv .dv-card { margin: 0; }
.dv-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.dv-card-head > div:first-child { min-width: 0; flex: 1 1 260px; }
.dv-card-head h4, .dv-card-head .section-title { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
.dv-card-head p, .dv-card-head .hint { margin: 4px 0 0; color: var(--text-muted); font-size: 0.86rem; }
.dv-card .hint { font-size: 0.82rem; }

/* The head of the tab: the period on the left, the choice on the right. */
.dv-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); }
.dv-head .section-title { margin: 0; font-size: 1.35rem; letter-spacing: -0.02em; }
.dv-head-text p { margin: 2px 0 0; color: var(--text-muted); font-size: 0.9rem; }
.dv-head .dash-period { min-width: 200px; }
.dv-today { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; padding: 10px 14px; border-radius: 12px;
  background: var(--accent-soft); color: var(--text); font-size: 0.9rem; }
.dv-today-tag { padding: 2px 9px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; }
.dv-today small { color: var(--text-muted); }

/* The four headline numbers. */
.dv-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.dv-kpi { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: var(--dv-card-pad); background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.dv-kpi::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--tone, var(--dv-blue)); }
.dv-kpi.tone-blue { --tone: var(--dv-blue); --tone-text: var(--accent); }
.dv-kpi.tone-green, .dv-kpi.rate-good { --tone: var(--dv-green); --tone-text: var(--success); }
.dv-kpi.rate-warn { --tone: var(--dv-amber); --tone-text: var(--warning); }
.dv-kpi.rate-bad { --tone: var(--dv-red); --tone-text: var(--danger); }
.dv-kpi header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dv-kpi-label { color: var(--text-muted); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.dv-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--tone-text, var(--accent));
  background: color-mix(in srgb, var(--tone, var(--dv-blue)) 12%, transparent); flex: 0 0 auto; }
.dv-icon svg { width: 17px; height: 17px; }
.dv-kpi-value { font-size: clamp(1.7rem, 2.6vw, 2.25rem); line-height: 1.1; font-weight: 650; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; color: var(--text); }
.dv-kpi.rate-warn .dv-kpi-value, .dv-kpi.rate-bad .dv-kpi-value { color: var(--tone-text); }
.dv-kpi-value small { font-size: 0.55em; font-weight: 600; margin-left: 2px; color: var(--text-muted); }
.dv-kpi-note { margin: 0; color: var(--text-muted); font-size: 0.84rem; }
.dv-kpi-foot { margin: 4px 0 0; color: var(--text-subtle); font-size: 0.78rem; }
.dv-kpi .dv-bar { margin-top: auto; }
.dv-kpi .dv-bar:first-of-type { margin-top: 10px; }

.dv-cedis { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dv-cedis small { font-size: 0.62em; font-weight: 600; margin-right: 0.3em; color: var(--text-subtle); letter-spacing: 0; }

/* Bars made of parts, and their key. */
.dv-bar { display: flex; gap: 2px; height: 8px; border-radius: 99px; overflow: hidden; background: var(--dv-track); }
.dv-bar i { display: block; height: 100%; min-width: 3px; }
.dv-bar .is-blue, .dv-key .is-blue { background: var(--dv-blue); }
.dv-bar .is-green, .dv-key .is-green { background: var(--dv-green); }
.dv-bar .is-amber, .dv-key .is-amber { background: var(--dv-amber); }
.dv-bar .is-red, .dv-key .is-red { background: var(--dv-red); }
.dv-bar .is-grey, .dv-key .is-grey { background: var(--dv-grey); }
.dv-bar .is-track { background: transparent; }
.dv-key { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.dv-key li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-muted); }
.dv-key li i { width: 10px; height: 10px; border-radius: 3px; }
.dv-key li b { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; }
.dv-pairs { margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--border); display: grid; gap: 6px; }
.dv-pairs div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.dv-pairs dt { color: var(--text-muted); font-size: 0.82rem; min-width: 0; }
.dv-pairs dd { margin: 0; font-weight: 600; font-size: 0.88rem; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The money on the plans. */
.dv-money-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--border);
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.dv-money-cell { background: var(--surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dv-money-cell dt { color: var(--text-muted); font-size: 0.78rem; font-weight: 500; }
.dv-money-cell dd { margin: 0; font-size: 1.3rem; font-weight: 650; letter-spacing: -0.02em; }
.dv-money-cell > span { color: var(--text-subtle); font-size: 0.78rem; }
.dv-money-cell.is-good dd { color: var(--success); }
.dv-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 14px; }
.dv-progress span { color: var(--text-muted); font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* The people: a segmented choice, then one table. */
.dv-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.dv-seg-btn { min-width: 0; min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 12px; border: 1px solid transparent; border-radius: 9px; background: none; color: var(--text-muted); font: inherit;
  font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.dv-seg-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-seg-btn small { padding: 1px 8px; border-radius: 99px; background: var(--surface-3); color: var(--text-muted); font-size: 0.76rem; font-weight: 700; }
.dv-seg-btn:hover { color: var(--text); }
.dv-seg-btn[aria-selected="true"], .dv-seg-btn[aria-pressed="true"] { background: var(--surface); color: var(--text); border-color: var(--border);
  box-shadow: var(--shadow-sm); }
.dv-seg-btn[aria-selected="true"] small { background: var(--accent); color: var(--on-accent); }
.dv-seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dv-seg-sm { flex: 0 0 auto; }
.dv-people { margin-top: var(--sp-4); }
.dv-people-sum { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; color: var(--text-muted); font-size: 0.84rem; }
.dv-people-sum span:not(.dv-people-note) { font-weight: 600; color: var(--text); }
.dv-people-note { flex: 1 1 100%; }
.dv .dash-table table { min-width: 0; table-layout: fixed; }
.dv .dash-table th:first-child, .dv .dash-table td:first-child { width: 30%; }
.dv .dash-table td { vertical-align: middle; }
.dv .dash-table td small { font-size: 0.76rem; }
.dv .dash-table td small.is-paid { color: var(--success); }
.dv .sp-who { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.dv .sp-who > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv .sp-who.is-nobody { color: var(--text-subtle); }
.dv-rate { display: grid; grid-template-columns: 52px minmax(40px, 1fr); align-items: center; gap: 10px; }
.dv-rate b { text-align: right; }
.dv-rate > i { display: block; height: 6px; border-radius: 99px; background: var(--dv-track); overflow: hidden; }
.dv-rate > i > i { display: block; height: 100%; border-radius: 99px; background: var(--dv-green); }
.dv-rate.rate-good b { color: var(--success); }
.dv-rate.rate-warn b { color: var(--warning); }
.dv-rate.rate-warn > i > i { background: var(--dv-amber); }
.dv-rate.rate-bad b { color: var(--danger); }
.dv-rate.rate-bad > i > i { background: var(--dv-red); }
.dv-card .dash-expand, .compare-card.dv-card .dash-expand { display: flex; width: 100%; justify-content: center; margin-top: 10px; min-height: var(--tap); }
.dv-foot { margin: 14px 0 0; }

/* Commission, by role. */
.dv-roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.dv-role { display: flex; flex-direction: column; gap: 2px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); min-width: 0; }
.dv-role-name { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 600; font-size: 0.9rem; }
.dv-role-name small { color: var(--text-subtle); font-weight: 500; font-size: 0.78rem; white-space: nowrap; }
.dv-role-owed { margin-top: 8px; font-size: 1.45rem; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dv-role-cap { color: var(--text-muted); font-size: 0.78rem; }
.dv-role .dv-pairs { margin-top: 12px; }

/* This week against last week. */
.dv-pair { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-4); align-items: stretch; margin-bottom: var(--sp-4); }
.dv-pair > .compare-card.dv-card { margin: 0; }
.dv-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden; }
.dv-cmp { background: var(--surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dv-cmp-label { color: var(--text-muted); font-size: 0.8rem; font-weight: 500; }
.dv-cmp-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.dv-cmp-now b { font-size: 1.3rem; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dv-change { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; font-size: 0.76rem; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.dv-change.is-up { color: var(--success); background: var(--success-soft); }
.dv-change.is-down { color: var(--danger); background: var(--danger-soft); }
.dv-change.is-flat { color: var(--text-muted); background: var(--surface-3); }
.dv-cmp-then { margin: 0; display: grid; gap: 2px; }
.dv-cmp-then div { display: flex; justify-content: space-between; gap: 8px; font-size: 0.78rem; }
.dv-cmp-then dt { color: var(--text-subtle); }
.dv-cmp-then dd { margin: 0; color: var(--text-muted); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Lock recovery: a ring, the parts, the facts. */
.dv-recovery { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; align-items: center; }
.dv-ring { position: relative; width: 132px; height: 132px; }
.dv-ring svg { width: 100%; height: 100%; }
.dv-ring circle { fill: none; stroke-width: 10; }
.dv-ring .dv-ring-track { stroke: var(--dv-track); }
.dv-ring .dv-ring-fill { stroke: var(--dv-green); stroke-linecap: round; }
.dv-ring.rate-warn .dv-ring-fill { stroke: var(--dv-amber); }
.dv-ring.rate-bad .dv-ring-fill { stroke: var(--dv-red); }
.dv-ring > span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.dv-ring b { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dv-ring.rate-good b { color: var(--success); } .dv-ring.rate-warn b { color: var(--warning); } .dv-ring.rate-bad b { color: var(--danger); }
.dv-ring small { color: var(--text-muted); font-size: 0.72rem; }
.dv-recovery-sum { margin: 0 0 10px; font-weight: 600; }
.dv-facts { margin: 18px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.dv-facts > div { background: var(--surface); padding: 10px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; min-width: 0; }
.dv-facts dt { grid-column: 1; color: var(--text); font-size: 0.86rem; font-weight: 500; }
.dv-facts dd { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-weight: 650; font-size: 1.1rem; font-variant-numeric: tabular-nums; text-align: right; }
.dv-facts > div > span { grid-column: 1; color: var(--text-subtle); font-size: 0.76rem; }
.dv-facts .is-late-cell dd { color: var(--danger); }

/* Shops ranked: the figure ranked by carries a bar. */
.compare-card.dv-card table { min-width: 0; }
.dv-meter { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 96px; }
.dv-meter > i { display: block; width: 100%; height: 5px; border-radius: 99px; background: var(--dv-track); overflow: hidden; }
.dv-meter > i > i { display: block; height: 100%; border-radius: 99px; }
.dv-meter.is-blue > i > i { background: var(--dv-blue); }
.dv-meter.is-red > i > i { background: var(--dv-red); }
.dv-meter.is-green > i > i { background: var(--dv-green); }

@media (max-width: 1180px) {
  .dv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-money-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-money-cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .dv-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-pair { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  :root { --dv-card-pad: 16px; }
  .dv-kpis, .dv-roles { grid-template-columns: minmax(0, 1fr); }
  .dv-money-cell dd { font-size: 1.1rem; }
  .dv-card-head > .btn { width: 100%; }
  .dv-role { padding: 14px; }
  .dv-compare { grid-template-columns: minmax(0, 1fr); }
  .dv-facts { grid-template-columns: minmax(0, 1fr); }
  .dv-recovery { grid-template-columns: 108px minmax(0, 1fr); gap: 14px; }
  .dv-ring { width: 108px; height: 108px; }
  .dv-ring b { font-size: 1.2rem; }
  .dv .dv-wide, .dv-card .dv-wide { display: none; }
  .dv .dash-table th:first-child, .dv .dash-table td:first-child { width: 40%; }
  .dv .dash-table th, .dv .dash-table td { padding: 10px 8px; font-size: 0.82rem; }
  .dv .dash-table th { font-size: 0.64rem; white-space: normal; }
  .dv-rate { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .dv-rate b { text-align: left; }
  .dv .sp-who .sp { display: none; }
  .dv-seg-btn { padding: 4px 6px; font-size: 0.8rem; gap: 4px; flex-wrap: wrap; }
  .dv-seg-btn span { white-space: normal; text-align: center; line-height: 1.15; }
  .dv-seg-btn small { padding: 1px 6px; }
  .dv-seg-sm { flex: 1 1 100%; }
  .dv-meter { min-width: 70px; }
  .compare-card.dv-card th, .compare-card.dv-card td { padding: 10px 6px; font-size: 0.8rem; }
  .compare-card.dv-card th { font-size: 0.62rem; white-space: normal; }
}

.stat .dv-cedis, .dv .dv-cedis, .dv-card .dv-cedis { display: inline; font-size: inherit; color: inherit; font-weight: inherit;
  text-transform: none; letter-spacing: inherit; white-space: nowrap; }
.stat .dv-cedis small, .dv .dv-cedis small, .dv-card .dv-cedis small { font-size: 0.6em; font-weight: 600; margin-right: 0.3em; color: var(--text-subtle); letter-spacing: 0; }
.compare-card.dv-card td .dv-cedis { white-space: nowrap; }
@media (max-width: 640px) { .compare-card.dv-card .dv-wide { display: none; } }
/* "td small" makes every small a line of its own; not the GHS in front of a figure. */
.dv-cedis small { display: inline; margin-top: 0; }
@media (max-width: 640px) {
  .dv .dash-table th:first-child, .dv .dash-table td:first-child { width: 34%; }
  .dv .dash-table .dv-col-rate { width: 26%; }
  .dv .dash-table .dv-col-money { width: 26%; }
  .dv .dash-table th { letter-spacing: 0; }
}
#stats.is-overview .stats-attention > .stat[data-action-card="notpaying"] { flex: 1.6 1 180px; }

/* Commission, redrawn (owner, 15 October 2026). */
.cm-totals { display: flex; gap: var(--sp-3); }
.cm-totals > span { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); min-width: 150px; }
.cm-totals small { color: var(--text-muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.cm-totals b { font-size: 1.3rem; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cm .hint-fold { margin: 0; }
button.cm-role { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color 150ms ease, box-shadow 150ms ease; }
button.cm-role:hover { border-color: var(--border-strong); }
button.cm-role.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--surface); }
button.cm-role:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cm-search input { min-height: var(--tap); width: min(100%, 320px); }
.cm-table { min-width: 0; table-layout: fixed; }
.cm-table th:first-child, .cm-table td:first-child { width: 40%; }
.cm-table td { vertical-align: middle; }
.cm-who { display: inline-flex; flex-direction: column; min-width: 0; }
.cm-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-who small { color: var(--text-subtle); font-size: 0.76rem; margin-top: 1px; }
.cm-table tr.is-settled td { color: var(--text-muted); }
.cm-table .cm-actions { width: 160px; text-align: right; white-space: nowrap; }
.cm-table .cm-actions .btn + .btn { margin-left: 6px; }
.cm-table tfoot td { background: var(--surface-2); font-weight: 600; border-top: 1px solid var(--border); border-bottom: 0; }
.cm-entries { min-width: 0; }
.cm-pay-facts { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; border-top: 1px solid var(--border); }
.cm-owed-inline { display: none; }
.cm-period { margin: 0; color: var(--text-muted); font-size: 0.95rem; font-weight: 500; }
@media (max-width: 640px) {
  .cm-totals { width: 100%; }
  .cm-totals > span { flex: 1; min-width: 0; padding: 8px 12px; }
  .cm-totals b { font-size: 1.1rem; }
  .cm-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-role .dv-pairs { display: none; }
  .cm-table .cm-actions { width: 118px; }
  .cm-table th:first-child, .cm-table td:first-child { width: 50%; }
  .cm-table .btn.sm { padding-left: 8px; padding-right: 8px; }
  .cm .sp-who .sp { display: none; }
  .cm-owed-col { display: none; }
  .cm-who .cm-owed-inline { display: block; color: var(--text); font-weight: 600; margin-top: 2px; }
  .cm-table .cm-actions { width: 92px; }
  .cm-table .cm-actions .btn { display: block; width: 100%; margin: 0; }
  .cm-table .cm-actions .btn + .btn { margin: 4px 0 0; }
  .cm-table th:first-child, .cm-table td:first-child { width: auto; }
}
/* The entries behind one person's commission: the plan and the date on one line each (15 October 2026). */
.cm-entries td:first-child, .cm-entries .cm-when, .cm-entries td:nth-child(3) { white-space: nowrap; }
.cm-entries td:nth-child(2) { min-width: 140px; }
@media (max-width: 640px) { .cm-entries td:first-child { white-space: normal; overflow-wrap: anywhere; } }