/* Base styles and components shared by every module. Sizes: nothing under 13px; controls 44px (36 compact, 52 for the
   main action on a phone); body text 16px on phones so the keyboard does not zoom the page. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.5; font-variant-numeric: tabular-nums; }
h1, h2, h3, p { margin: 0; }
a { color: var(--info); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- shell ---------- */
/* 2026-11-10: a white top bar that carries the company's own logo, a navy menu, and a band on any test site */
.shell { display: grid; grid-template-columns: var(--rail) 1fr; grid-template-rows: auto 1fr; min-height: 100vh; --top: var(--bar); }
.shell.testing { --top: calc(var(--bar) + 30px); }
@media (min-width: 861px) { .shell { background: linear-gradient(to right, var(--navy) var(--rail), var(--bg) var(--rail)); } }
.top { grid-column: 1 / -1; position: sticky; top: 0; z-index: 20; }
.envband { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 30px; padding: 4px var(--s4); background: #F2B233; color: #2B1A00; font-size: 13px; letter-spacing: .2px; text-align: center; }
.envband b { text-transform: uppercase; letter-spacing: 1.2px; font-size: 13px; }
.bar { display: flex; align-items: center; gap: var(--s4); height: var(--bar); padding: 0 var(--s5); background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(12, 20, 40, .02), 0 6px 18px -12px rgba(12, 20, 40, .25); }
.brand { display: flex; align-items: center; gap: var(--s4); min-width: 0; color: inherit; text-decoration: none; }
.brand .product { padding-left: var(--s4); border-left: 1px solid var(--line-strong); font-size: 13px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.logo { display: inline-flex; align-items: center; flex: none; }
.logo img { display: block; height: 38px; width: auto; max-width: 200px; object-fit: contain; }
.logo.lg img { height: 64px; max-width: 260px; }
.logo.sm img { height: 28px; max-width: 120px; }
.monogram { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: linear-gradient(160deg, var(--navy-hi), var(--navy)); color: #fff; font-size: 14px; font-weight: 800; letter-spacing: .6px; box-shadow: inset 0 -2px 0 var(--brand); }
.monogram.lg { width: 60px; height: 60px; border-radius: 14px; font-size: 20px; }
.monogram.sm { width: 30px; height: 30px; border-radius: 7px; font-size: 13px; }
.bar .grow { flex: 1; }
.who { display: flex; align-items: center; gap: var(--s3); font-size: 14px; }
.who .avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--info-soft); color: var(--primary); font-size: 13px; font-weight: 800; letter-spacing: .4px; }
.who .name { display: flex; flex-direction: column; line-height: 1.2; }
.who .name b { font-weight: 650; color: var(--ink); }
.who .name span { font-size: 13px; color: var(--muted); }
.bar .btn.quiet { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.bar .btn.quiet:hover { background: var(--surface-2); }
.rail { color: var(--navy-sub); padding: var(--s4) var(--s3); display: flex; flex-direction: column; gap: 2px; position: sticky; top: var(--top); height: calc(100vh - var(--top)); overflow: auto;
  /* the menu (Linear, Stripe, ServiceTitan): light at the top, the blueprint grid rising from the foot under a lift of the
     menu's own color, and a hairline edge. Layers of its own background, so they stay put while the page scrolls. */
  background:
    linear-gradient(180deg, var(--rail-sheen), transparent 220px),
    radial-gradient(150% 42% at 0 100%, var(--rail-glow), transparent 75%),
    linear-gradient(180deg, var(--navy) 42%, transparent 92%),
    linear-gradient(var(--rail-grid) 1px, transparent 1px) left bottom / 24px 24px,
    linear-gradient(90deg, var(--rail-grid) 1px, transparent 1px) left bottom / 24px 24px;
  background-color: var(--navy); box-shadow: inset -1px 0 0 rgba(255, 255, 255, .07); }
.rail .label { display: flex; align-items: center; gap: var(--s3); font-size: 13px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--navy-sub); padding: var(--s5) var(--s3) var(--s2); }
.rail .label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, .16), transparent); }
.nav { display: flex; align-items: center; gap: var(--s3); min-height: var(--control); padding: 0 var(--s3); border-radius: var(--r-sm); color: var(--navy-sub); text-decoration: none; font-weight: 550; }
.nav .ico { flex: none; opacity: .85; }
.nav:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav[aria-current="page"] { position: relative; background: linear-gradient(90deg, var(--rail-on), color-mix(in srgb, #FFFFFF 5%, transparent)); color: #fff; font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 3px rgba(0, 0, 0, .18); }
.nav[aria-current="page"]::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); box-shadow: 0 0 10px var(--brand); }
.nav[aria-current="page"] .ico { opacity: 1; }
.nav.app span:not(.appmark):not(.sr) { flex: 1; min-width: 0; line-height: 1.25; padding: 6px 0; }
.nav.app .ico { opacity: .5; }
.appmark { flex: none; display: grid; place-items: center; min-width: 32px; height: 28px; padding: 0 4px; border-radius: 7px; background: linear-gradient(160deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .07)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 -2px 0 color-mix(in srgb, var(--brand) 70%, transparent); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: 0; }
.nav .count { margin-left: auto; min-width: 24px; padding: 0 7px; border-radius: 12px; background: var(--brand); color: #fff; font-size: 13px; font-weight: 700; text-align: center; }
/* the company, at the foot of the menu, in a card set into it */
.rail .foot { margin-top: auto; display: flex; align-items: center; gap: var(--s3); padding: var(--s3); font-size: 13px; color: var(--navy-sub); border-radius: var(--r); background: var(--rail-well); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 1px 0 rgba(255, 255, 255, .05); overflow-wrap: anywhere; }
.rail .foot > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.3; }
.rail .foot b { color: var(--navy-ink); font-weight: 650; }
.footmark { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: linear-gradient(160deg, var(--navy-hi), var(--navy)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 -2px 0 var(--brand); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .4px; }
.signin-brand { display: flex; justify-content: flex-start; }
.status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: var(--ok); }
.status-dot.bad { background: var(--danger); }
.main { padding: var(--s6) var(--s6) var(--s8); min-width: 0; }
.page { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--s5); }
@media (min-width: 1680px) { .page { max-width: 1320px; } }
.tabbar { display: none; }

/* ---------- the band (2026-11-11, second pass) ----------
   The owner, after a first pass of faint texture he called "pretty much 0 difference": research the leading platforms and
   make it look premium. docs/design/INSPIRATION.md has the research; this is its first move. Every page opens on a deep
   band in the company's main color (Salesforce's brand band, Notion's page cover, Stripe's and Mercury's deep headers)
   that carries the page title and its key numbers in white, with soft light from the top left, the accent glowing in from
   the right, and a blueprint of fine white grid lines and drafting circles on the right. The first card under the title
   rises out of the band. It is drawn by the page header itself (two pseudo-elements stretched to the edges of the main
   area and clipped by it), so every page and module with a PageHeader has it with no extra markup. All of it is tokens:
   a company's colors and the dark theme apply with no code. Under prefers-contrast: more, forced colors and print it is
   a plain band of the main color. */
.main { position: relative; isolation: isolate; overflow: clip; container-type: inline-size; --pad-x: var(--s6); --tail: var(--s8); }
.pagehead { position: relative; padding: var(--s2) 0 var(--s6); color: var(--navy-ink); }
.pagehead::before, .pagehead::after { content: ''; position: absolute; z-index: -1; pointer-events: none;
  top: -100vh; bottom: 0; left: calc((100% - 100cqw) / 2 - var(--pad-x)); right: calc((100% - 100cqw) / 2 - var(--pad-x)); }
.pagehead::before { background:
    radial-gradient(38% 130% at 100% 0, var(--band-glow), transparent 70%),
    radial-gradient(75% 150% at 0 0, var(--band-lift), transparent 72%),
    radial-gradient(55% 120% at 72% 100%, var(--band-shade), transparent 75%),
    linear-gradient(180deg, transparent 40%, var(--band-sheen)),
    var(--band);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08); }
/* the blueprint: a fine grid (every 24px, stronger every 96px) and two drafting circles, strongest on the right and fading
   out behind the title */
.pagehead::after { background-image:
    radial-gradient(circle at 86% 64%, transparent 0 159px, var(--band-grid-major) 160px 161px, transparent 162px 239px, var(--band-grid-major) 240px 241px, transparent 242px),
    linear-gradient(var(--band-grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--band-grid-major) 1px, transparent 1px),
    linear-gradient(var(--band-grid) 1px, transparent 1px), linear-gradient(90deg, var(--band-grid) 1px, transparent 1px);
  background-size: auto, 96px 96px, 96px 96px, 24px 24px, 24px 24px; background-position: center, right -1px bottom -1px, right -1px bottom -1px, right -1px bottom -1px, right -1px bottom -1px;
  -webkit-mask-image: linear-gradient(90deg, transparent 8%, rgba(0, 0, 0, .35) 38%, #000 78%);
  mask-image: linear-gradient(90deg, transparent 8%, rgba(0, 0, 0, .35) 38%, #000 78%); }
.pagehead h1 { color: var(--navy-ink); }
.pagehead p { color: var(--band-sub); }
.pagehead .eyebrow { margin: 0 0 var(--s1); font-size: 13px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--band-sub); }
.pagehead .btn { background: var(--glass); border-color: rgba(255, 255, 255, .3); color: var(--navy-ink); }
.pagehead .btn:hover { background: var(--glass); border-color: rgba(255, 255, 255, .6); }
.page > .backlink { color: var(--band-sub); position: relative; }
.page > .backlink:hover { color: var(--navy-ink); }
/* the first card under the title rises out of the band */
.pagehead:has(+ :is(.card, .statstrip)) { padding-bottom: var(--tail); }
.pagehead + :is(.card, .statstrip) { margin-top: calc(-1 * (var(--tail) - var(--s6)) - var(--s5)); }
/* the key numbers in the band, beside the title (home) */
.headstats { display: flex; gap: var(--s2); flex-wrap: wrap; }
.hstat { display: flex; flex-direction: column; justify-content: center; min-width: 116px; min-height: 64px; padding: var(--s2) var(--s4); border-radius: var(--r-sm); background: var(--glass); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .1); color: var(--navy-ink); text-decoration: none; line-height: 1.2; }
.hstat:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .1); }
.hstat b { font-size: 24px; font-weight: 750; font-stretch: 88%; letter-spacing: -.3px; }
.hstat span { font-size: 13px; font-weight: 600; color: var(--band-sub); }
@media (prefers-contrast: more), (forced-colors: active), print {
  .pagehead::after, .signin-art::after { display: none; }
  .pagehead::before, .signin-art { background: var(--band); box-shadow: none; }
  .rail { background: var(--navy); }
}

/* ---------- page header ---------- */
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.pagehead h1 { font-size: 34px; line-height: 1.12; font-weight: 750; font-stretch: 86%; letter-spacing: -.4px; }
.pagehead p { margin-top: var(--s1); max-width: 70ch; }
h2.section { font-size: 19px; font-weight: 700; font-stretch: 92%; }
/* a heading that stands on the page (not in a card) gets a short accent rule */
.page > h2.section { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s2); }
.page > h2.section::before { content: ''; width: 4px; height: 20px; border-radius: 2px; background: linear-gradient(var(--brand), var(--primary)); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--control); padding: 0 var(--s4); border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: var(--danger-soft); }
.btn.sm { min-height: var(--control-sm); padding: 0 var(--s3); font-size: 14px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--info); font-weight: 600; text-decoration: underline; cursor: pointer; }

/* ---------- surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--edge), var(--shadow); }
/* the one card that matters most on a page (what needs you) carries a fine rule in the company's colors */
.card.focal { position: relative; overflow: hidden; }
.card.focal::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--primary), var(--brand)); }
.card.pad { padding: var(--s5); }
.stack { display: flex; flex-direction: column; gap: var(--s4); }
.row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.muted { color: var(--muted); }
.fine { font-size: 13px; color: var(--muted); }

/* ---------- chips ---------- */
.chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 12px; font-size: 13px; font-weight: 600; background: var(--sunk); color: var(--muted); white-space: nowrap; }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.info { background: var(--info-soft); color: var(--info); }
.chip.bad { background: var(--danger-soft); color: var(--danger); }

/* ---------- messages: loading, empty, could-not-load and notices are four different things ---------- */
.banner { display: flex; gap: var(--s3); align-items: center; justify-content: space-between; flex-wrap: wrap; padding: var(--s3) var(--s4); border-radius: var(--r-sm); border-left: 4px solid var(--info); background: var(--info-soft); }
.banner.ok { border-left-color: var(--ok); background: var(--ok-soft); }
.banner.info { border-left-color: var(--info); background: var(--info-soft); }
.banner.warn { border-left-color: var(--warn); background: var(--warn-soft); }
.banner.bad { border-left-color: var(--danger); background: var(--danger-soft); }
.empty, .errorpanel { text-align: center; padding: var(--s7) var(--s5); color: var(--muted); }
.empty h3, .errorpanel h3 { color: var(--ink); font-size: 18px; margin-bottom: var(--s2); }
/* empty states (Stripe, ServiceTitan): a calm emblem above the words - rings in the company's color around a dot - on a
   soft wash, never behind the text */
.empty { background: radial-gradient(60% 70% at 50% 0, color-mix(in srgb, var(--primary) 6%, var(--surface)), var(--surface) 70%); }
.empty h3::before, .empty-hint p::before { content: ''; display: block; width: 76px; height: 76px; margin: 0 auto var(--s4); border-radius: 50%;
  background: radial-gradient(circle, var(--primary) 0 5px, transparent 6px),
    repeating-radial-gradient(circle, transparent 0 9px, color-mix(in srgb, var(--primary) 26%, transparent) 9px 10.5px, transparent 10.5px 15px),
    color-mix(in srgb, var(--primary) 7%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent); }
.errorpanel .btn { margin-top: var(--s4); }
.skeleton { height: 18px; border-radius: 6px; background: linear-gradient(90deg, var(--sunk), var(--surface-2), var(--sunk)); background-size: 200% 100%; animation: sk 1.2s linear infinite; }
@keyframes sk { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .field > .lbl { font-size: 14px; font-weight: 600; }
.field .hint { font-size: 13px; color: var(--muted); }
.field .err { font-size: 13px; color: var(--danger); font-weight: 600; }
.input, .select { min-height: var(--control); padding: 0 var(--s3); border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface); width: 100%; }
.check { width: 22px; height: 22px; accent-color: var(--primary); }
/* app switches on People: a tick box with its label, big enough for a thumb */
.picks { display: flex; flex-wrap: wrap; gap: var(--s2); border: 0; padding: 0; margin: 0; min-width: 0; }
.pick { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--control); padding: 0 var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; max-width: 100%; }
.pick.on { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.pick.no { cursor: not-allowed; color: var(--faint); background: var(--surface-2); }
.pick:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.input.area { padding: 10px var(--s3); min-height: 64px; line-height: 1.4; resize: vertical; }
.input:hover, .select:hover { border-color: var(--faint); }
.formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s4); align-items: start; }
.savebar { position: sticky; bottom: var(--s4); display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding: var(--s3) var(--s4); border-radius: var(--r); background: var(--navy); color: var(--navy-ink); box-shadow: var(--shadow-lift); }
/* on the bar, Save is a solid button in the bar's own text color and Discard an outlined one: both read as buttons */
.savebar .btn { border-color: color-mix(in srgb, var(--navy-ink) 45%, transparent); background: transparent; color: var(--navy-ink); }
.savebar .btn:hover { background: color-mix(in srgb, var(--navy-ink) 12%, transparent); }
.savebar .btn.primary, .savebar .btn.primary:hover { background: var(--navy-ink); color: var(--navy); border-color: var(--navy-ink); }
.savebar > span:first-child { flex: 1 1 200px; min-width: 0; }
/* a Save bar with what stopped the last save right above it: the two stay at the bottom of the screen together */
.savezone { position: sticky; bottom: var(--s4); z-index: 2; display: flex; flex-direction: column; gap: var(--s2); }
.savezone > .savebar { position: static; }
.savezone > .banner { box-shadow: var(--shadow-lift); }
/* with a refusal right above it the bar is only its buttons: the refusal already says it is not saved */
.savezone.refused > .savebar > span:first-child { display: none; }
.savezone.refused > .savebar { justify-content: flex-end; }
/* a "Saved." note never sits on a Save bar: on a page that has one it shows at the top, under the bar */
body:has(.savezone) .toast { top: calc(var(--top, 64px) + var(--s3)); bottom: auto; }
/* a field the person has to fix */
.input[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }

/* ---------- logos on Settings ---------- */
.logofield { display: flex; flex-direction: column; gap: var(--s2); }
.logopreview { display: flex; gap: var(--s2); flex-wrap: wrap; }
.plate { display: grid; place-items: center; min-width: 180px; height: 84px; padding: var(--s3) var(--s4); border-radius: var(--r-sm); border: 1px solid var(--line); }
.plate img { max-height: 56px; max-width: 220px; object-fit: contain; }
.plate.light { background: #FFFFFF; }
.plate.dark { background: #141922; }
.plate.dark img { background: #fff; padding: 4px 8px; border-radius: 6px; }   /* as the top bar shows it on a dark screen */
.plate.empty { background: var(--surface-2); color: var(--muted); font-size: 14px; border-style: dashed; }
.logofield.sm .plate { min-width: 120px; height: 56px; }
.logofield.sm .plate img { max-height: 36px; max-width: 160px; }
.brandrow { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
label.btn { cursor: pointer; }
label.btn.busy { opacity: .6; pointer-events: none; }
input[type=file].sr:focus-visible + * , label.btn:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s4); }
.tile { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5); }
.tile h3 { font-size: 19px; font-weight: 700; font-stretch: 92%; }
.tile .desc { color: var(--muted); flex: 1; }
.tile .foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }

/* ---------- table that becomes cards on a phone ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.table tbody tr:hover td { background: color-mix(in srgb, var(--primary) 3%, var(--surface)); }
.table td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .actions { text-align: right; white-space: nowrap; }
.table .off td { color: var(--faint); }

/* ---------- timeline (who did what) ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 150px 1fr; gap: var(--s4); padding: var(--s3) var(--s5); border-bottom: 1px solid var(--line); }
.timeline li:last-child { border-bottom: 0; }
.timeline .when { color: var(--muted); font-size: 14px; }

/* ---------- sign-in and toast ---------- */
.narrow { max-width: 460px; width: 100%; }
.center h1.title { font-size: 24px; font-stretch: 88%; }
.center { min-height: 100vh; display: grid; place-items: center; padding: var(--s5); }
/* sign-in (Stripe, Mercury, Ramp): a split screen - the band on the left with the product's name, the sign-in on the
   right. On a phone the band is a short header and the card rises out of it. */
.signin { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; }
.testing-signin .signin { min-height: calc(100vh - 30px); }
.signin-art { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s6); padding: var(--s7) var(--s7) var(--s6); color: var(--navy-ink);
  background: radial-gradient(70% 60% at 100% 0, var(--band-glow), transparent 72%), radial-gradient(100% 75% at 0 0, var(--band-lift), transparent 75%), radial-gradient(80% 60% at 70% 100%, var(--band-shade), transparent 75%), linear-gradient(180deg, transparent 50%, var(--band-sheen)), var(--band); }
.signin-art::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(circle at 78% 72%, transparent 0 139px, var(--band-grid-major) 140px 141px, transparent 142px 219px, var(--band-grid-major) 220px 221px, transparent 222px 299px, var(--band-grid-major) 300px 301px, transparent 302px),
    linear-gradient(var(--band-grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--band-grid-major) 1px, transparent 1px),
    linear-gradient(var(--band-grid) 1px, transparent 1px), linear-gradient(90deg, var(--band-grid) 1px, transparent 1px);
  background-size: auto, 96px 96px, 96px 96px, 24px 24px, 24px 24px; background-position: center, center, center, center, center;
  -webkit-mask-image: linear-gradient(160deg, transparent 18%, #000 75%); mask-image: linear-gradient(160deg, transparent 18%, #000 75%); }
.signin-art .eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--band-sub); }
.signin-art h2 { margin-top: var(--s3); max-width: 15ch; font-size: 46px; line-height: 1.05; font-weight: 750; font-stretch: 84%; letter-spacing: -.8px; color: var(--navy-ink); }
.signin-art p { margin-top: var(--s4); max-width: 40ch; font-size: 17px; color: var(--band-sub); }
.signin-art .rule { width: 56px; height: 4px; border-radius: 2px; background: var(--brand); }
.signin-art .company { font-size: 14px; color: var(--band-sub); }
.signin-art .company b { color: var(--navy-ink); font-weight: 650; }
.signin-main { display: grid; place-items: center; padding: var(--s6) var(--s5); background: radial-gradient(70% 50% at 50% 0, color-mix(in srgb, var(--primary) 5%, var(--bg)), var(--bg) 70%); }
.signin-card { position: relative; overflow: hidden; width: 100%; max-width: 420px; box-shadow: var(--edge), var(--shadow-lift); }
.signin-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--primary), var(--brand)); }
.signin-card h1 { font-size: 28px; line-height: 1.15; font-stretch: 86%; letter-spacing: -.3px; }
.toast { position: fixed; left: 50%; bottom: var(--s6); transform: translateX(-50%); z-index: 50; max-width: min(560px, calc(100vw - 32px)); padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: #141A26; color: #F4F6FA; box-shadow: var(--shadow-lift); }

/* ---------- phone ---------- */
@media (max-width: 860px) {
  body { font-size: 16px; }
  .shell { grid-template-columns: 1fr; }
  .rail { display: none; }
  .bar { padding: 0 var(--s4); gap: var(--s3); }
  .who .name, .who .avatar, .wide { display: none; }
  .who { flex: none; }
  .brand { flex: 1; gap: var(--s3); }
  .brand .product { padding-left: var(--s3); font-size: 13px; letter-spacing: .8px; }
  .brand { overflow: hidden; }
  .logo img { height: 32px; max-width: 150px; }
  .bar .grow { display: none; }
  .main { padding: var(--s5) var(--s4) calc(var(--control-lg) + var(--s8)); --pad-x: var(--s4); --tail: var(--s7); }
  .pagehead { padding-bottom: var(--s5); }
  .pagehead h1 { font-size: 28px; }
  .pagehead::after { background-position: 70% 40%, right -1px bottom -1px, right -1px bottom -1px, right -1px bottom -1px, right -1px bottom -1px; }
  .pagehead > .row { width: 100%; }
  .headstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .hstat { min-width: 0; min-height: 60px; padding: var(--s2) var(--s3); }
  .hstat b { font-size: 21px; }
  .signin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .signin-art { padding: var(--s6) var(--s4) var(--s8); gap: var(--s4); }
  .signin-art h2 { font-size: 32px; }
  .signin-art p { font-size: 16px; }
  .signin-art .company, .signin-art .rule { display: none; }
  .signin-main { place-items: start center; padding: 0 var(--s4) var(--s6); margin-top: calc(-1 * var(--s7)); background: none; position: relative; }
  .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 60px; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 600; }
  .tabbar a[aria-current="page"] { color: var(--primary); box-shadow: inset 0 3px 0 var(--primary); }
  .tabbar .ico { flex: none; }
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
  .table td { padding: 2px 0; border: 0; }
  .table .actions { text-align: left; padding-top: var(--s2); }
  .timeline li { grid-template-columns: 1fr; gap: 2px; padding: var(--s3) var(--s4); }
  .btn.block-phone { width: 100%; min-height: var(--control-lg); }
  .savebar, .savezone { bottom: calc(60px + var(--s3)); }
  .savebar .row { width: 100%; flex-wrap: nowrap; } .savebar .row .btn { flex: 1 1 auto; }
  /* the Save bar and a refusal above it stay small on a phone: tighter, and the two read as one block */
  .savezone { gap: 2px; }
  .savezone > .savebar { gap: var(--s2); padding: var(--s2) var(--s3); font-size: 14px; }
  .savezone > .banner { gap: var(--s2); padding: var(--s2) var(--s3); font-size: 14px; line-height: 1.35; }
  body:has(.savezone) .toast { left: var(--s4); right: var(--s4); max-width: none; transform: none; }
}

/* a logo made for white backgrounds stays readable on a dark screen */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bar .logo img, :root:not([data-theme="light"]) .signin-brand .logo img, :root:not([data-theme="light"]) .pubhead img { background: #fff; padding: 4px 8px; border-radius: 6px; } }
:root[data-theme="dark"] .bar .logo img, :root[data-theme="dark"] .signin-brand .logo img { background: #fff; padding: 4px 8px; border-radius: 6px; }
@media (max-width: 440px) { .brand .product { display: none; } }

/* ---------- home (ADR 0005): what is waiting on you, and each app at a glance ---------- */
.sech { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); }
.worklist { list-style: none; margin: 0; padding: 0; }
.worklist li { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s5); border-bottom: 1px solid var(--line); }
.worklist li:last-child { border-bottom: 0; }
.worklist .num { flex: none; min-width: 52px; height: 44px; padding: 0 10px; display: grid; place-items: center; border-radius: 11px; background: var(--warn-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); font-size: 20px; font-weight: 800; font-stretch: 88%; }
.worklist li { transition: background-color .12s; }
.waiting .worklist li:hover, .sidelist .worklist li:hover { background: color-mix(in srgb, var(--primary) 3%, var(--surface)); }
.worklist .what { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.worklist .what b { font-weight: 650; }
.allclear { display: flex; flex-direction: column; gap: 2px; padding: var(--s5); }
.allclear { flex-direction: row; align-items: center; gap: var(--s4); }
.allclear::before { content: ''; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--ok);
  /* a tick cut out of a disc in the "good" color, so it reads in light and dark alike */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-8.5'/%3E%3C/svg%3E") center / 24px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-8.5'/%3E%3C/svg%3E") center / 24px no-repeat exclude, linear-gradient(#000 0 0); }
.allclear > span { display: flex; flex-direction: column; gap: 2px; }
.allclear b { color: var(--ok); font-size: 17px; }
.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--s4); }
.apppanel { display: flex; flex-direction: column; }
.apppanel { overflow: hidden; }
.apppanel header { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 4%, var(--surface)), var(--surface)); }
.apppanel header .t { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.apppanel h3 { font-size: 17px; font-weight: 700; font-stretch: 92%; }
.appbadge { flex: none; display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 6px; border-radius: 11px; background: linear-gradient(160deg, var(--navy-hi), var(--navy)); box-shadow: inset 0 -2px 0 var(--brand), 0 4px 10px -4px color-mix(in srgb, var(--navy) 60%, transparent); color: #fff; font-size: 14px; font-weight: 800; }
.pad0 { padding: var(--s4) var(--s5); }
.metrics { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metrics > div { padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.metrics > div:nth-child(odd) { border-right: 1px solid var(--line); }
.metrics dt { font-size: 13px; font-weight: 650; color: var(--muted); }
.metrics dd { margin: 0; font-size: 30px; font-weight: 750; font-stretch: 86%; letter-spacing: -.5px; line-height: 1.12; color: var(--ink); }
/* this period against the last, to scale (a bullet bar: Stripe's comparison under each figure, drawn honestly from the two
   numbers the app gives; the words beside it say the same) */
.cmp { position: relative; display: block; height: 6px; margin: 6px 0 2px; border-radius: 3px; background: color-mix(in srgb, var(--primary) 10%, var(--sunk)); }
.cmp i { position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 70%, var(--surface)), var(--primary)); }
.cmp u { position: absolute; top: -3px; bottom: -3px; left: var(--p); width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); opacity: .55; }
@media (max-width: 860px) {
  .panels { grid-template-columns: 1fr; }
  .worklist li { padding: var(--s3) var(--s4); gap: var(--s3); }
  .sech { padding: var(--s3) var(--s4); }
  .metrics > div { padding: var(--s3) var(--s4); }
  .metrics dd { font-size: 24px; }
}
/* home v2: opportunities and watch beside each other, trends under each number */
.twocol { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--s4); }
.worklist.compact li { padding: var(--s3) var(--s5); }
.worklist .mark { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--info); }
.worklist .mark.opp { background: var(--ok); }
.worklist .mark.warn { background: var(--warn); }
.worklist .mark.bad { background: var(--danger); }
.trend { font-size: 13px; font-weight: 650; }
.trend.good { color: var(--ok); }
.trend.bad { color: var(--warn); }
.trend.flat { color: var(--muted); font-weight: 500; }
@media (max-width: 860px) { .twocol { grid-template-columns: 1fr; } .worklist.compact li { padding: var(--s3) var(--s4); } }
/* brand colors on Settings > Company */
.swatches { display: flex; flex-wrap: wrap; gap: var(--s3); }
.swatch { display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: var(--s2) var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }
.swatch > span:nth-child(2) { display: flex; flex-direction: column; line-height: 1.25; }
.swatch .chipcolor { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line); flex: none; }
.swatch input[type=color] { width: 44px; height: 44px; border: 0; padding: 0; background: none; cursor: pointer; }

/* Modules inside the Command Center (ADR 0006): a module's pages open under its name in the menu */
.nav.app.open { color: #fff; font-weight: 700; }
.subnav { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 var(--s2) 22px; padding-left: var(--s3); border-left: 1px solid rgba(255, 255, 255, .18); }
.nav.sub { min-height: 40px; font-size: 15px; }
.backlink { display: inline-flex; align-items: center; min-height: var(--control); color: var(--muted); font-weight: 600; text-decoration: none; margin-bottom: var(--s2); }
.backlink:hover { color: var(--ink); }
.warnnum { color: var(--warn); font-weight: 700; }
.oknum { color: var(--ok); }
.fine.block { display: block; }
.nowrap { white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Receivables: totals, filters, the accounts list and one account */
.sourceline { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin: calc(-1 * var(--s2)) 0 var(--s3); }
.statstrip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-bottom: var(--s4); }
.statstrip > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4) var(--s5); display: flex; flex-direction: column; gap: 4px; box-shadow: var(--edge), var(--shadow); }
.statstrip span { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); }
.statstrip b { font-size: 30px; font-weight: 750; font-stretch: 86%; letter-spacing: -.5px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.statstrip small { font-size: 13px; color: var(--muted); }
/* a stat's share of the whole (Stripe's meter): the fill carries the state, the track is a light step of the same color */
.meter { display: block; height: 6px; margin-top: 6px; border-radius: 3px; background: color-mix(in srgb, var(--primary) 12%, var(--sunk)); overflow: hidden; }
.meter i { display: block; height: 100%; width: var(--v); min-width: 6px; border-radius: 3px; background: var(--primary); }
.meter.warn { background: color-mix(in srgb, var(--warn) 16%, var(--sunk)); } .meter.warn i { background: var(--warn); }
.meter.bad { background: color-mix(in srgb, var(--danger) 14%, var(--sunk)); } .meter.bad i { background: var(--danger); }
.meter.zero i { display: none; }
.statstrip.inline { margin: 0 0 var(--s4); }
.statstrip.inline > div { border: 0; padding: 0; background: none; box-shadow: none; }
.statstrip.inline b { font-size: 26px; }
.filters { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s4); }
/* a row of views: every one is on screen. When they do not fit they go onto a second line; nothing is cut off or
   hidden behind a sideways scroll with no sign of it. On a phone the row scrolls instead (three lines of buttons would
   push the list off the screen) and its right edge fades to say there is more. */
.seg { display: flex; flex-wrap: wrap; gap: var(--s2); padding-bottom: 2px; }
@media (max-width: 700px) {
  .seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--s4)); padding-right: var(--s6);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
  .seg::-webkit-scrollbar { display: none; }
}
.seg button { flex: none; display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 0 var(--s3); border-radius: 20px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-weight: 600; cursor: pointer; }
.seg button.on { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.seg .n { font-size: 13px; font-weight: 700; opacity: .75; font-variant-numeric: tabular-nums; }
.grow-row { flex-wrap: nowrap; }
.grow-row .search { flex: 1; min-width: 0; }
.grow-row select { width: auto; flex: none; }
.acctlist { overflow: clip; }
.acct { display: grid; grid-template-columns: minmax(0, 2.4fr) repeat(3, minmax(0, 1fr)) minmax(0, .9fr) minmax(0, .9fr); gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.acct:last-child { border-bottom: 0; }
a.acct { transition: background-color .12s, box-shadow .12s; }
a.acct:hover { background: color-mix(in srgb, var(--primary) 4%, var(--surface)); box-shadow: inset 3px 0 0 var(--primary); }
/* the column names stay at the top while the list scrolls (Procore, Attio) */
.acct.head { position: sticky; top: var(--top); z-index: 2; background: var(--surface-2); font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); padding-top: var(--s3); padding-bottom: var(--s3); }
.acct .cust { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acct .cust b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct .cust .chip { align-self: flex-start; }
.acct .lbl { display: none; }
/* Statements: the same list as Accounts, with the reason in words as its widest column */
.acct.stmt { grid-template-columns: minmax(0, 2.2fr) minmax(0, .9fr) minmax(0, 3.2fr) minmax(0, 1.1fr); align-items: start; }
.acct.stmt.sent { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 3fr); }
.acct.stmt .why { overflow-wrap: anywhere; }
.plainlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.agingcard .buckets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); }
/* the open balance split by how late it is (a segmented bar: one whole, in parts, the later the deeper) */
.agebar { display: flex; gap: 2px; height: 12px; margin: 0 0 var(--s3); border-radius: 6px; overflow: hidden; background: var(--sunk); }
.agebar i { flex: var(--v) 1 0; min-width: 4px; }
.age-current { background: var(--seq-1); }
.age-1-30 { background: var(--seq-2); }
.age-31-60 { background: var(--seq-3); }
.age-61-90 { background: var(--seq-4); }
.age-over-90 { background: var(--seq-5); }
.bucket .key { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.bucket { border-radius: var(--r-sm); background: var(--surface-2); padding: var(--s2) var(--s3); display: flex; flex-direction: column; gap: 2px; }
.bucket span { font-size: 13px; color: var(--muted); }
.bucket b { font-variant-numeric: tabular-nums; }
.bucket.due { background: var(--warn-soft); }
.bucket.bad b { color: var(--warn); }
.invno { display: inline-flex; flex-direction: column; gap: 2px; }
.invtable .credit td { color: var(--ok); }
@media (max-width: 860px) {
  .statstrip b { font-size: 18px; }
  .statstrip.inline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s3); }
  .statstrip.inline b { font-size: 21px; }
  .statstrip > div { min-width: 0; }
  .statstrip { gap: var(--s2); }
  .statstrip > div { padding: var(--s2) var(--s3); }
  .acct.head { display: none; }
  .acct { grid-template-columns: 1fr 1fr; gap: 4px var(--s3); }
  .acct .cust { grid-column: 1 / -1; }
  .acct.stmt, .acct.stmt.sent { grid-template-columns: 1fr 1fr; }
  .acct.stmt .why { grid-column: 1 / -1; }
  .acct .num { text-align: left; }
  .acct .lbl { display: inline; font-size: 13px; color: var(--muted); margin-right: 6px; }
  .agingcard .buckets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invtable tr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px var(--s3); }
  .invtable td.first { grid-column: 1 / -1; padding-bottom: 4px; }
  .invtable td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 52px; margin-right: 6px; font-size: 13px; color: var(--muted); }
  .invtable td.num { text-align: left; }
  .grow-row { flex-wrap: wrap; }
  .grow-row .search { flex-basis: 100%; }
  .grow-row select { width: 100%; }
}

/* Receivables: the work queue */
.page.split { max-width: none; }
.page.split .qlistcol { max-width: 760px; }
/* the page header spans both columns, so the list and the open item start level, below the band */
.page.split > .pagehead { margin-bottom: var(--s5); }
@media (min-width: 1100px) {
  .page.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s5); align-items: start; }
  .page.split > .pagehead { grid-column: 1 / -1; margin-bottom: 0; }
  .page.split .qitemcol { position: sticky; top: calc(var(--top) + var(--s4)); max-height: calc(100vh - var(--top) - 2 * var(--s4)); overflow: auto; }
  .phone-only { display: none !important; }
  /* nothing picked yet: a quiet prompt on the page itself, below the band, level with the list. No box: an empty card
     in the band reads as a broken panel. It follows the reader down a long list. */
  .page.split .qitemcol.empty-hint { position: static; max-height: none; overflow: visible; align-self: stretch; min-height: 420px; padding: 120px var(--s6) var(--s6); text-align: center; }
  .empty-hint p { position: sticky; top: 42vh; max-width: 34ch; margin: 0 auto; }
}
@media (max-width: 1099px) {
  .page.split.has-item .qlistcol, .page.split.has-item > .pagehead { display: none; }
  .desk-only { display: none; }
}
.qlist { list-style: none; margin: var(--s4) 0 0; padding: 0; overflow: hidden; }
.qlist li + li { border-top: 1px solid var(--line); }
.qlist a { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s3); padding: var(--s3) var(--s4); color: var(--ink); text-decoration: none; }
.qlist a { transition: background-color .12s; }
.qlist a:hover { background: color-mix(in srgb, var(--primary) 4%, var(--surface)); }
.qlist a[aria-current] { background: var(--info-soft); box-shadow: inset 3px 0 0 var(--brand); }
.qtype { font-size: 13px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--warn); }
.qage { font-size: 13px; color: var(--muted); text-align: right; }
.qname { grid-column: 1 / -1; }
.qwhy { grid-column: 1 / -1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qamt { grid-column: 1 / -1; font-weight: 700; font-variant-numeric: tabular-nums; }
.qitem .qtitle { font-size: 22px; margin: 0; }
.qitem .qtitle a { color: var(--ink); }
.qitem h3.lbl { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); }
.qitem p { margin: 0; }
.qactions .input.auto, .input.auto { width: auto; }
.timeline.compact li { padding: 6px 0; }

/* Receivables: a mail conversation */
.thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.thread li { border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s3) var(--s4); background: var(--surface); display: flex; flex-direction: column; gap: var(--s2); }
.thread li.out { background: var(--surface-2); margin-left: var(--s5); }
.thread .mhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s3); }
.thread .mwhen { margin-left: auto; }
/* the labels on a message wrap on a phone, and the sentence that explains one sits on its own line under them */
.thread .mchips { gap: var(--s2); }
.thread .mchips .chip { white-space: normal; padding-top: 2px; padding-bottom: 2px; }
.thread .mnote { margin: 0; color: var(--warn); }
.thread .mbody { display: flex; flex-direction: column; gap: var(--s3); line-height: 1.5; min-width: 0; }
.thread .mtext { white-space: pre-wrap; overflow-wrap: anywhere; }
/* the customer's statement page (no sign-in, no app frame): one calm column */
.publicpage { background: var(--bg); }
.publicpage .page { max-width: 820px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s8); }
/* the header holds one thing, the logo or the company's name; it wraps and shrinks, so neither a long name nor a wide
   logo can push the page sideways on a phone */
.pubhead { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3) var(--s4); padding: var(--s3) 0; min-width: 0; }
.pubnote { margin: 0; padding: var(--s3) var(--s5); border-top: 1px solid var(--line); color: var(--muted); }
.pubhead h1 { font-size: 22px; margin: 0; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.pubhead img { display: block; height: 48px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
/* a window over the page: the email as the customer gets it, and the statement beside it */
.dialog { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: min(640px, calc(100vw - 2 * var(--s4))); color: var(--ink); }
.dialog.large { width: min(1180px, calc(100vw - 2 * var(--s4))); }
.dialog::backdrop { background: color-mix(in srgb, var(--navy) 55%, transparent); }
.dialogbox { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow-lg, var(--shadow)); display: flex; flex-direction: column; max-height: calc(100dvh - 2 * var(--s4)); overflow: hidden; }
.dialoghead { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.dialoghead h2 { font-size: 18px; margin: 0; }
.dialogbody { padding: var(--s4); overflow: auto; }
.preview { display: grid; gap: var(--s4); }
.pvmail { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.pvenv { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--s3); margin: 0; padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.pvenv dt { color: var(--muted); font-size: 14px; } .pvenv dd { margin: 0; overflow-wrap: anywhere; }
.pvbody { font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5; }
.pvbody p { margin: 0 0 1em; white-space: pre-wrap; overflow-wrap: anywhere; }
.pvpdf { display: none; }
@media (min-width: 900px) {
  .preview.two { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: stretch; }
  .pvpdf { display: block; width: 100%; height: min(72vh, 860px); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
}
.mailcard .composer { border-top: 0; padding-top: 0; margin-top: 0; }
.attachline { padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); font-size: 14px; }
/* a table the sender made: compact, as wide as its words need, scrolling sideways inside the message on a phone */
.thread .mtablewrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-sm); align-self: flex-start; }
.thread .mtable { border-collapse: collapse; font-size: 14px; }
.thread .mtable th, .thread .mtable td { padding: 6px var(--s3); white-space: nowrap; text-align: left; border-bottom: 1px solid var(--line); }
.thread .mtable th { font-size: 13px; font-weight: 700; color: var(--muted); background: var(--surface-2); }
.thread .mtable tr:last-child td { border-bottom: 0; }
@media (max-width: 860px) { .thread li.out { margin-left: var(--s3); } }

/* The top bar's search (while in a module that has one); on a phone it is an icon that opens the search page */
.topsearch { display: flex; align-items: center; gap: var(--s2); width: min(420px, 36vw); height: 40px; padding: 0 var(--s3); margin-right: var(--s2); border-radius: 20px; background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--muted); }
.topsearch:focus-within { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.topsearch input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 15px; outline: none; }
.topsearch input::placeholder { color: var(--muted); opacity: 1; }
.searchlink { color: inherit; }
@media (max-width: 860px) { .topsearch { display: none; } }
@media (min-width: 861px) { .searchlink { display: none !important; } }
/* a phone's bottom bar: "More" opens the rest of the module's pages above the bar */
.tabbar button.more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 60px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.tabbar button.more.on { color: var(--primary); }
.moresheet { position: absolute; right: var(--s3); bottom: calc(100% + var(--s2)); min-width: 200px; display: flex; flex-direction: column; padding: var(--s2); border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lift); }
.tabbar .moresheet a { flex-direction: row; justify-content: flex-start; gap: var(--s3); min-height: 48px; padding: 0 var(--s3); border-radius: var(--r-sm); font-size: 15px; color: var(--ink); }
.tabbar .moresheet a[aria-current="page"] { box-shadow: none; background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary); }

/* Receivables: Reports and Search */
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s4); }
.toolbar .grow { flex: 1; }
.seg.tabs a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s4); border-radius: 20px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-weight: 600; text-decoration: none; }
.seg.tabs a.on { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.statstrip.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.reports .card + .card, .reports .card + .twocol, .reports .twocol + .card { margin-top: var(--s4); }
.panelbody { padding: var(--s4) var(--s5) var(--s5); }
@media (max-width: 860px) { .panelbody { padding: var(--s3) var(--s4) var(--s4); } }
/* the reports dashboard: panels two across, each answering one question; "wide" takes the larger share, "full" the row */
.dash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); align-items: start; }
.reports .dash > .card { margin: 0; }
.dash > .full { grid-column: 1 / -1; }
.delta { font-weight: 650; } .delta.good { color: var(--ok); } .delta.bad { color: var(--warn); } .delta.flat { color: var(--muted); font-weight: 500; }
.rfilters { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.rfilters .picked { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); font-weight: 650; }
.reading.picked { margin-bottom: var(--s4); padding: var(--s2) var(--s3); border-left: 4px solid var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); border-radius: var(--r-sm); max-width: none; }
.barrow.on { background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
/* amounts as bars on one scale: label, bar, number; the whole row is the link */
.bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.barrow { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.4fr) auto; gap: var(--s3); align-items: center; width: 100%; padding: 9px var(--s2); margin: 0 calc(-1 * var(--s2)); box-sizing: content-box; border: 0; border-radius: var(--r-sm); background: none; font: inherit; color: var(--ink); text-align: left; text-decoration: none; }
a.barrow:hover, button.barrow:not(:disabled):hover { background: color-mix(in srgb, var(--primary) 5%, var(--surface)); cursor: pointer; }
.bars li + li { border-top: 1px solid var(--line); }
.blabel { min-width: 0; overflow-wrap: anywhere; font-weight: 550; }
.btrack { position: relative; height: 14px; border-radius: 4px; background: var(--sunk); overflow: hidden; }
.btrack i { position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: 0 4px 4px 0; background: var(--chart-1); }
.btrack i.ours { background: var(--chart-2); } .btrack i.c2 { background: var(--chart-2); } .btrack i.light { background: var(--seq-1); }
.bnum { display: flex; flex-direction: column; align-items: flex-end; min-width: 108px; font-variant-numeric: tabular-nums; }
.bnum small { font-size: 13px; color: var(--muted); white-space: nowrap; }
.sw.light { background: var(--seq-1); }
/* two bars a week on one money axis */
.weekbars .legend, .reports .legend { display: flex; gap: var(--s4); font-size: 14px; color: var(--muted); margin-bottom: var(--s2); }
.weekbars .legend span, .reports .legend span { display: inline-flex; align-items: center; gap: 6px; }
.wbbox { padding: 6px 0 0 56px; }
.wbplot { position: relative; height: 200px; }
.wbgrid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--line); }
.wbgrid em { position: absolute; right: calc(100% + 8px); top: -9px; font-style: normal; font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; }
.wbcols { position: absolute; inset: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; align-items: end; }
.wbcol { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; outline: none; border-radius: 4px; }
.wbcol i { width: min(18px, 38%); min-height: 2px; border-radius: 4px 4px 0 0; }
.wbcol i.c1 { background: var(--chart-1); } .wbcol i.c2 { background: var(--chart-2); }
.wbcol:hover, .wbcol:focus-visible { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.wbcol .tip { display: none; position: absolute; bottom: calc(100% - 40px); left: 50%; transform: translateX(-50%); z-index: 3; min-width: 190px; padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow); font-size: 14px; flex-direction: column; gap: 2px; text-align: left; pointer-events: none; }
.wbcol .tip.toleft { left: auto; right: 0; transform: none; } .wbcol .tip.toright { left: 0; transform: none; }
.wbcol:hover .tip, .wbcol:focus-visible .tip { display: flex; }
.wbcol .tip span { display: inline-flex; align-items: center; gap: 6px; }
.wbx { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin-top: 6px; font-size: 13px; color: var(--faint); text-align: center; white-space: nowrap; }
/* aging by customer: a row per customer, a column per age band */
.agetable { overflow: clip; }
.agerow { display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(6, minmax(0, 1fr)); gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
a.agerow:hover { background: color-mix(in srgb, var(--primary) 3%, var(--surface)); }
.agerow .num { text-align: right; } .agerow .nil { color: var(--faint); } .agerow .on { font-weight: 700; }
.agerow .cust { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .agerow .cust b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agerow .lbl { display: none; }
.agerow.head { position: sticky; top: var(--top); z-index: 2; background: var(--surface-2); font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--faint); }
.agerow.total { background: color-mix(in srgb, var(--primary) 4%, var(--surface)); font-weight: 600; }
@media (max-width: 1000px) {
  .dash { grid-template-columns: 1fr; }
  .agerow.head { display: none; }
  .agerow { grid-template-columns: 1fr 1fr; gap: 4px var(--s3); }
  .agerow .cust { grid-column: 1 / -1; } .agerow .num { text-align: left; } .agerow .nil { display: none; }
  .agerow .lbl { display: inline; font-size: 13px; color: var(--muted); margin-right: 6px; font-weight: 400; }
}
@media (max-width: 560px) {
  .barrow { grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--s3); }
  .barrow .btrack { grid-column: 1 / -1; grid-row: 2; height: 10px; }
  .wbbox { padding-left: 44px; } .wbcols, .wbx { gap: 3px; }
}
.reading { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink); max-width: 72ch; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: none; }
.sw.c1, .l.c1 { --c: var(--chart-1); } .sw.c2, .l.c2 { --c: var(--chart-2); }
.sw.c1, .sw.c2 { background: var(--c); }
.seg-1 { background: var(--seq-1); } .seg-2 { background: var(--seq-2); } .seg-3 { background: var(--seq-3); } .seg-4 { background: var(--seq-4); } .seg-5 { background: var(--seq-5); }
.seg button .sw { width: 10px; height: 10px; }
.agingbar .track { display: flex; gap: 2px; height: 20px; border-radius: 6px; overflow: hidden; background: var(--sunk); }
.agingbar .track a { min-width: 6px; transition: filter .12s; }
.agingbar .track a:first-child { border-radius: 6px 0 0 6px; } .agingbar .track a:last-child { border-radius: 0 6px 6px 0; } .agingbar .track a:only-child { border-radius: 6px; }
.agingbar .track a:hover { filter: brightness(1.12); }
.agingkey { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); }
.agingkey a { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s2); align-items: center; padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink); text-decoration: none; }
.agingkey a:hover { background: color-mix(in srgb, var(--primary) 7%, var(--surface-2)); }
.agingkey span { font-size: 13px; color: var(--muted); }
.agingkey b, .agingkey small { grid-column: 2; font-variant-numeric: tabular-nums; }
.agingkey small { font-size: 13px; color: var(--muted); }
.trend .legend { display: flex; gap: var(--s4); font-size: 14px; color: var(--muted); margin-bottom: var(--s2); }
.trend .legend span { display: inline-flex; align-items: center; gap: 6px; }
.trendbox { position: relative; height: 240px; margin: 0 0 var(--s2); outline: none; touch-action: pan-y; cursor: crosshair; }
.trendbox:focus-visible { box-shadow: 0 0 0 2px var(--focus); border-radius: var(--r-sm); }
.trendbox .plot { position: absolute; left: 60px; right: 72px; top: 10px; bottom: 30px; }
.trendbox svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.trendbox .grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.trendbox .l { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.trendbox .cross { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.trendbox .dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 2px solid var(--surface); pointer-events: none; }
.trendbox .dot.c1 { background: var(--chart-1); } .trendbox .dot.c2 { background: var(--chart-2); }
.trendbox .ytick { position: absolute; right: calc(100% + 8px); transform: translateY(-50%); font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; pointer-events: none; white-space: nowrap; }
.trendbox .xtick { position: absolute; top: calc(100% + 8px); transform: translateX(-50%); font-size: 13px; color: var(--faint); white-space: nowrap; pointer-events: none; }
.trendbox .xtick.first { transform: none; } .trendbox .xtick.end { transform: translateX(-100%); }
.trendbox .endlabel { position: absolute; left: calc(100% + 8px); transform: translateY(-50%); font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; pointer-events: none; padding-left: 6px; border-left: 3px solid var(--c); white-space: nowrap; }
.trendbox .endlabel.c1 { --c: var(--chart-1); } .trendbox .endlabel.c2 { --c: var(--chart-2); }
.trendbox .tip { position: absolute; top: -6px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 2px; padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lift); font-size: 14px; white-space: nowrap; pointer-events: none; z-index: 3; }
.trendbox .tip.toleft { transform: translateX(calc(-100% - 12px)); } .trendbox .tip.toright { transform: translateX(12px); }
.trendbox .tip span { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.astable summary { cursor: pointer; color: var(--primary); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.tablewrap { max-height: 360px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }
.pairs { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.pairs div { padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--surface-2); }
.pairs dt { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); }
.pairs dd { margin: 4px 0 0; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.linkish { border: 0; background: none; padding: 0; font: inherit; color: var(--primary); text-decoration: underline; cursor: pointer; min-height: 32px; }
.ranklist { list-style: none; margin: 0; padding: 0; }
.ranklist a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.ranklist li:last-child a { border-bottom: 0; }
.ranklist a:hover b { color: var(--primary); }
.ranklist .cust { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ranklist .num { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ranklist .meter { grid-column: 1 / -1; margin-top: 2px; }
.invlist .acct { grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1fr); }
.events { list-style: none; margin: 0; padding: 0; }
.events li { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--s4); padding: var(--s3) var(--s5); border-bottom: 1px solid var(--line); }
.events li:last-child { border-bottom: 0; }
.events .enote { display: block; margin-top: 2px; color: var(--muted); overflow-wrap: anywhere; }
.results { list-style: none; margin: 0; padding: 0; }
.results a { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: var(--s3) var(--s5); border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; min-height: 52px; }
.results li:last-child a { border-bottom: 0; }
.results a:hover { background: color-mix(in srgb, var(--primary) 4%, var(--surface)); }
.results a > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.results .num { flex: none; text-align: right; }
.input.big { height: var(--control-lg); font-size: 17px; }
@media (max-width: 860px) {
  .statstrip.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agingkey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trendbox { height: 210px; }
  .trendbox .plot { left: 48px; right: 60px; }
  .events li { grid-template-columns: 1fr; gap: 2px; padding: var(--s3) var(--s4); }
  .results a { flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--s3) var(--s4); }
  .results .num { text-align: left; }
  .toolbar select { width: 100%; }
}

.warnrow td { background: var(--warn-soft); }
.block { display: block; }
.tablewrap.full { max-height: none; }
.row.wrap { flex-wrap: wrap; }
.linkrow { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); width: 100%; min-height: 48px; padding: var(--s2) var(--s3); border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.linkrow:hover { background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.acctactions { margin-bottom: var(--s4); }
.composer { border-top: 1px solid var(--line); padding-top: var(--s4); }
.composer textarea { min-height: 180px; }
.checks { margin: 0; padding: var(--s3) var(--s4) var(--s3) var(--s6); border-radius: var(--r-sm); background: var(--danger-soft); color: var(--ink); border-left: 4px solid var(--danger); }
.checks li + li { margin-top: 4px; }
/* the composer: what a person typed, kept beside the latest when someone else changed the email meanwhile; and the
   question before a discard. Words above, the choices under them, each a full-size button. */
.banner.clash, .banner.confirmstep { flex-direction: column; align-items: stretch; }
.minebox { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); min-width: 0; }
.minebox pre, .composer pre.mbody { margin: 0; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.minebox pre { max-height: 220px; overflow: auto; }

/* A control reached by the keyboard (Tab) is never left under what stays on screen: the top bar, the phone's bottom
   menu, and a Save bar (with a refusal above it) while a form has changes. The page keeps that much clear when it
   scrolls a focused control into view; a field's label above it and its hint under it come along. Every page and
   every settings section gets this: nothing here is about one form. */
html { scroll-padding-top: calc(var(--bar) + 30px + var(--s4)); scroll-padding-bottom: var(--s4); }
html:has(.savebar) { scroll-padding-bottom: calc(var(--s4) + 96px); }
html:has(.savezone > .banner) { scroll-padding-bottom: calc(var(--s4) + 200px); }
.field > :is(input, select, textarea), .field .pick { scroll-margin-top: 32px; scroll-margin-bottom: 52px; }
@media (max-width: 860px) {
  html { scroll-padding-bottom: calc(60px + env(safe-area-inset-bottom) + var(--s4)); }
  html:has(.savebar) { scroll-padding-bottom: calc(60px + env(safe-area-inset-bottom) + var(--s3) + 132px); }
  html:has(.savezone > .banner) { scroll-padding-bottom: calc(60px + env(safe-area-inset-bottom) + var(--s3) + 260px); }
}
/* the statements an email carries, each with its own PDF, inside the line that says what is attached */
.attachline .worklist { margin: var(--s2) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.attachline .worklist li { padding: var(--s2) 0; gap: var(--s3); }
.attachline .worklist .what { overflow-wrap: anywhere; }