/* The brand faces are served from this origin: the app's CSP allows only 'self'
   for styles, and a finance dashboard should not call out to a font CDN anyway. */
@font-face{font-family:"Inter";src:url("/assets/fonts/Inter-Variable.woff") format("woff");font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/assets/fonts/JetBrainsMono-Variable.woff") format("woff");font-weight:100 800;font-display:swap}

/* finance-dashboard — tokens + base + components (same discipline as iRotary).
   The design system is written up in docs/design-system.md. Components use the tokens below;
   a new page that uses the existing classes inherits the look without any CSS of its own. */
:root{
  /* ---- iFusion brand palette: the same as ifusion.cloud and the Ambassador portal ---- */
  --ink:#0C1118; --muted:#5B5F66; --bg:#F5F6F8; --card:#FFFFFF; --border:#E3E5E9; --input:#C9CCD3;
  /* Two blues from the same brand ramp. --brand (blue-500) is for graphics and the blue sign-in
     field, where 3:1 is the bar and it clears it at 4.39. It is NOT used for text: on white it is
     4.39:1, just under the 4.5:1 normal text needs. --action (blue-600) carries links and button
     fills: 5.97:1 on white, and white text on it is 5.97:1. */
  --brand:#2671F7; --action:#1C5BD6; --action-ink:#fff; --navy:#0D285C; --blue-50:#EAF1FE;
  --action-hover:#1749B0; --action-active:#123C91;       /* blue-700 / blue-800: white text 7.4:1 and 9.6:1 */
  --ok-text:#0B7A3B; --ok-bg:#E7F5EC; --ok-border:#BFE5CB;
  --warn-text:#8A6A00; --warn-bg:#FFF3D6; --warn-border:#F0DFA8;
  --bad-text:#A11C1C; --bad-bg:#FDE8E8; --bad-border:#F3B9B9;

  /* ---- semantic colour: components use these, never raw hex ---- */
  --text:var(--ink); --text-muted:var(--muted);           /* muted: 6.5:1 on white, 6.0:1 on --bg */
  --surface:var(--card); --surface-sunken:var(--bg); --surface-hover:#F8F9FB; --surface-pressed:#ECEEF1;
  --surface-selected:var(--blue-50);
  --border-strong:var(--input); --border-hover:#A6ABB4;
  --link:var(--action); --focus:var(--action);
  --info-bg:#EEF4FD; --info-border:#C9DBF7;
  --group-text:#1C4FB0; --group-bg:#E8F0FD; --group-border:#C3D6F7;          /* "Group customer" label */
  --prospect-text:#5B3FA8; --prospect-bg:#F1ECFB; --prospect-border:#D9CCF3; /* "Never dealt with" label */
  --chart-in:var(--brand); --chart-out:#E8743B; --chart-band:rgba(38,113,247,.16);
  --scrim:rgba(12,17,24,.45);

  /* ---- spacing: a 4px grid ---- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;

  /* ---- type ---- */
  --font-sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-base:16px; --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px;
  --lh-tight:1.2; --lh-snug:1.35; --lh-body:1.55;
  --measure:68ch;        /* prose line length: ~70–80 characters */
  --measure-wide:90ch;   /* call-outs and lists that carry a figure plus a line of text */

  /* ---- shape and elevation ---- */
  --r-xs:4px; --r-sm:8px; --r:12px; --r-lg:16px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(12,17,24,.05);                                    /* cards, tiles, buttons */
  --shadow-2:0 1px 2px rgba(12,17,24,.05),0 4px 12px rgba(12,17,24,.07);     /* sticky bars */
  --shadow-3:0 12px 32px rgba(12,17,24,.18);                                  /* tooltips, dialogs */
  --shadow:var(--shadow-1);

  /* ---- layout ---- */
  --container-max:1760px;  /* content width cap: see docs/design-system.md for why */
  --gutter:16px;           /* 16 phone · 24 tablet · 32 laptop · 40 wide (set below) */
  --field-max:44rem;       /* a lone text field never runs the width of a wide card */
  --bar-h:60px;            /* the header bar */
  --header-h:60px;         /* the whole sticky header: keeps #anchors clear of it */

  /* ---- layers and motion ---- */
  --z-raised:5; --z-sticky:20; --z-overlay:30; --z-skip:200;
  --dur-fast:120ms; --dur:180ms; --ease-out:cubic-bezier(.2,.7,.2,1);
}
@media (min-width:640px){ :root{--gutter:24px} }
@media (min-width:1024px){ :root{--gutter:32px} }
@media (min-width:1440px){ :root{--gutter:40px} }

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}   /* a class that sets display (.row, .btn) must not un-hide it */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + var(--space-4))}
body{margin:0;font-family:var(--font-sans);font-size:var(--fs-base);line-height:var(--lh-body);color:var(--text);background:var(--surface-sunken);-webkit-font-smoothing:antialiased}
p{max-width:var(--measure)}
a{color:var(--link);text-underline-offset:.15em} a:hover{text-decoration:underline;color:var(--action-hover)}
button,input,select,textarea{font:inherit}
button,a.btn,input,select,summary,[data-chase-form] button{touch-action:manipulation}
summary{cursor:pointer}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
:where(a,summary):focus-visible{border-radius:var(--r-xs)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--action);color:var(--action-ink);padding:var(--space-3) var(--space-5);z-index:var(--z-skip);font-weight:600}
.skip-link:focus{left:var(--space-2);top:var(--space-2);color:var(--action-ink)}
.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}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.125em}
.mono{font-family:var(--font-mono)}
.muted{color:var(--text-muted)} .caption{color:var(--text-muted);font-size:var(--fs-sm);line-height:1.5;margin-top:var(--space-3)}

/* type scale */
.h1{font-size:var(--fs-2xl);line-height:var(--lh-tight);margin:0 0 6px;font-weight:650;letter-spacing:-.02em}
.h2{font-size:var(--fs-lg);line-height:1.3;margin:0 0 var(--space-3);font-weight:600;letter-spacing:-.01em}
.h3{font-size:var(--fs-base);line-height:1.35;margin:var(--space-5) 0 6px;font-weight:600}

/* ---------------------------------------------------------------- layout: header, nav, page */
.top{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:var(--z-sticky)}
.top__inner{max-width:calc(var(--container-max) + 2 * var(--gutter));margin:0 auto;display:flex;align-items:center;gap:var(--space-6);padding:var(--space-2) var(--gutter);min-height:var(--bar-h)}
.brand{display:inline-flex;align-items:center;min-height:44px;font-weight:800;text-decoration:none;color:var(--text);letter-spacing:-.01em;flex:none}
.brand img{display:block}
/* The nav scrolls inside itself rather than ever pushing the page sideways; the padding keeps focus rings unclipped. */
.nav{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:6px;margin:-6px}
.nav::-webkit-scrollbar{display:none}
.nav a{flex:none;padding:0 var(--space-3);border-radius:var(--r-sm);text-decoration:none;color:var(--text-muted);min-height:44px;display:inline-flex;align-items:center;font-size:var(--fs-md);font-weight:500;transition:background-color var(--dur-fast),color var(--dur-fast)}
.nav a:hover{color:var(--text);background:var(--surface-sunken);text-decoration:none}
.nav a[aria-current="page"]{color:var(--action);background:var(--surface-selected);font-weight:600}
.logout{display:flex;align-items:center;gap:var(--space-3);margin:0;flex:none}
.who{font-size:var(--fs-md);color:var(--text-muted)}
@media (min-width:1024px){ .logout{border-left:1px solid var(--border);padding-left:var(--space-5)} }

.wrap{max-width:calc(var(--container-max) + 2 * var(--gutter));margin:0 auto;padding:var(--space-6) var(--gutter) var(--space-16)}
.page-head{margin:0 0 var(--space-6)}
.page-head > p{margin:var(--space-1) 0 0}
.page-head > p:first-child{margin:0 0 var(--space-2)}
.part-of{margin:0 0 var(--space-2)}

/* ---------------------------------------------------------------- surfaces */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-1);padding:var(--space-5);margin-bottom:var(--space-5)}
.card--pad{padding:var(--space-6)}
.card > :last-child{margin-bottom:0}
details.card > summary{min-height:28px;display:list-item}
@media (min-width:1024px){ .card{padding:var(--space-6)} .card--pad{padding:var(--space-8)} }

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-4);margin-bottom:var(--space-5)}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:var(--space-4) var(--space-5);box-shadow:var(--shadow-1);min-width:0}
.tile__label{font-size:var(--fs-xs);color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.tile__value{font-size:var(--fs-2xl);font-weight:650;letter-spacing:-.02em;line-height:var(--lh-tight);margin-top:6px;font-variant-numeric:tabular-nums}
.tile__sub{font-size:var(--fs-sm);color:var(--text-muted);margin-top:var(--space-1);line-height:1.45}
.tile__unit{font-size:var(--fs-md);font-weight:500;color:var(--text-muted);margin-left:var(--space-1);letter-spacing:0}
.tile__note{font-size:var(--fs-sm);margin-top:var(--space-2)}
.health{margin-bottom:var(--space-5)}
.health__span{font-size:var(--fs-sm);font-weight:400;margin-left:6px;letter-spacing:0}
.tiles--health{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-bottom:var(--space-3)}
.health__more .grid-2{margin-top:var(--space-3)}
.health__missing{padding-left:18px;max-width:var(--measure)}

/* Two (or, on a wide screen, three) columns of fields or cards; never more, so a label always has room. */
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(240px,calc((100% - 2 * var(--space-5)) / 3)),1fr));gap:0 var(--space-5)}
/* A grid of form fields keeps its column positions even when it has only two fields, so fields line up down a form. */
.grid-2:has(> .field){grid-template-columns:repeat(auto-fill,minmax(max(240px,calc((100% - 2 * var(--space-5)) / 3)),1fr))}
.row{display:flex;gap:var(--space-3);flex-wrap:wrap}
.inline{display:inline-flex;gap:var(--space-2);margin:0;align-items:center}
.actions{white-space:nowrap}
.empty{color:var(--text-muted);margin:0}

/* ---------------------------------------------------------------- tables
   Cells stay on one line so figures never break; columns that hold prose (.contact, .route,
   .cell-wrap) wrap instead. A table wider than its card scrolls inside .table-wrap — never the
   page — and soft shadows at the edges say there is more. .table-wrap is a size container, so
   its own width never grows to fit the table inside it. */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative;container-type:inline-size;--wrap-bg:var(--surface);
  background:linear-gradient(to right,var(--wrap-bg) 50%,rgba(255,255,255,0)) left center/40px 100% no-repeat local,
    linear-gradient(to left,var(--wrap-bg) 50%,rgba(255,255,255,0)) right center/40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(12,17,24,.14),rgba(12,17,24,0)) left center/12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(12,17,24,.14),rgba(12,17,24,0)) right center/12px 100% no-repeat scroll}
/* position:relative above so absolutely-positioned children (screen-reader labels) are clipped with the table instead of escaping to the page and making it scroll sideways */
.table{width:100%;border-collapse:collapse;font-size:var(--fs-md);font-variant-numeric:tabular-nums}
.table th,.table td{text-align:left;padding:10px var(--space-3);border-top:1px solid var(--border);vertical-align:middle;white-space:nowrap}
.table thead th{border-top:0;border-bottom:1px solid var(--border);background:var(--surface-sunken);color:var(--text-muted);font-weight:600;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;padding-top:var(--space-2);padding-bottom:var(--space-2)}
.table tbody th{font-weight:600}
/* zero specificity, so a row's own state (picked, company money) always shows through the hover */
:where(.table > tbody > tr:not(.line-detail,.line-division):hover) > *{background:var(--surface-hover)}
.table tfoot th,.table tfoot td{border-top:1px solid var(--border-strong);font-weight:600}
.table .num{text-align:right;font-variant-numeric:tabular-nums}
.table .cell-wrap{white-space:normal;min-width:10rem}
.table td.contact{white-space:normal;overflow-wrap:anywhere;min-width:12rem}
.table td.route{white-space:normal;min-width:170px;max-width:240px;font-size:var(--fs-sm);line-height:1.35}   /* Long QuickBooks addresses wrap, so Miles, Amount and Paid back stay on screen */
.table--compact th,.table--compact td{padding:6px 10px;font-size:var(--fs-sm)}
.table--history td{vertical-align:top}
.table select{min-height:36px;padding:4px 8px}
/* the Customers directory: the company name wraps rather than pushing the money columns off screen */
.table--directory > tbody > tr > th[scope=row]{white-space:normal;min-width:14rem}

/* ---------------------------------------------------------------- chips (status: always words, never colour alone) */
.chip{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px 9px;border-radius:var(--r-pill);font-size:var(--fs-xs);line-height:18px;font-weight:600;letter-spacing:.01em;border:1px solid var(--border);background:var(--surface-sunken);color:var(--text);white-space:nowrap}
.chip--ok{color:var(--ok-text);background:var(--ok-bg);border-color:var(--ok-border)}
.chip--warn{color:var(--warn-text);background:var(--warn-bg);border-color:var(--warn-border)}
.chip--bad{color:var(--bad-text);background:var(--bad-bg);border-color:var(--bad-border)}
.chip--group{color:var(--group-text);background:var(--group-bg);border-color:var(--group-border)}
.chip--prospect{color:var(--prospect-text);background:var(--prospect-bg);border-color:var(--prospect-border)}
.dnc{color:var(--bad-text);font-weight:600}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;padding:var(--space-2) var(--space-4);border-radius:var(--r-sm);border:1px solid var(--border-strong);background:var(--surface);color:var(--text);text-decoration:none;cursor:pointer;font-weight:600;font-size:var(--fs-md);line-height:1.25;box-shadow:var(--shadow-1);
  transition:background-color var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast),box-shadow var(--dur-fast)}
.btn:hover{background:var(--surface-sunken);border-color:var(--border-hover);color:var(--text);text-decoration:none}
.btn:active{background:var(--surface-pressed)}
.btn--primary{background:var(--action);border-color:var(--action);color:var(--action-ink)}
.btn--primary:hover{background:var(--action-hover);border-color:var(--action-hover);color:var(--action-ink)}
.btn--primary:active{background:var(--action-active);border-color:var(--action-active)}
.btn--ghost{background:transparent;box-shadow:none}
.btn--small{min-height:36px;padding:var(--space-1) var(--space-3);font-size:var(--fs-sm)}
.btn--block{width:100%}
.btn--danger{color:var(--bad-text);border-color:var(--bad-border)}
.btn--danger:hover{background:var(--bad-bg);border-color:var(--bad-text);color:var(--bad-text)}
.btn .icon{width:16px;height:16px}
.btn--small .icon{width:14px;height:14px}
.btn[disabled],.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn[disabled]:hover,.btn:disabled:hover{background:var(--surface);border-color:var(--border-strong)}
.btn--primary[disabled]:hover,.btn--primary:disabled:hover{background:var(--action);border-color:var(--action)}
.btn.is-disabled{opacity:.5;pointer-events:none}

/* ---------------------------------------------------------------- forms */
:where(input:not([type=checkbox],[type=radio],[type=file],[type=hidden],[type=submit],[type=button],[type=reset],[type=range],[type=color],[type=image]),select,textarea){
  border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--text);transition:border-color var(--dur-fast)}
:where(input:not([type=checkbox],[type=radio],[type=file],[type=hidden]),select,textarea):hover{border-color:var(--border-hover)}
:where(input:not([type=checkbox],[type=radio],[type=file],[type=hidden]),select,textarea):focus-visible{border-color:var(--focus);outline-offset:1px}
::placeholder{color:var(--text-muted);opacity:1}
input[type=checkbox],input[type=radio]{accent-color:var(--action);width:18px;height:18px}
input[type=file]{font-size:var(--fs-md);max-width:100%}
input[type=file]::file-selector-button{font:inherit;font-weight:600;margin-right:var(--space-3);min-height:40px;padding:0 var(--space-4);border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--text);cursor:pointer}
input[type=file]::file-selector-button:hover{background:var(--surface-sunken)}
.field{margin-bottom:var(--space-4);max-width:var(--field-max)}
.field label{display:block;font-weight:600;font-size:var(--fs-md);margin-bottom:6px}
.field label .muted{font-weight:400}
.field input,.field select{width:100%;min-height:44px;padding:var(--space-2) var(--space-3)}
.field select{font:inherit;color:var(--text)}
textarea{width:100%;min-height:80px;padding:var(--space-2) var(--space-3);font:inherit;line-height:1.5}
.code{font-size:24px;letter-spacing:.3em;text-align:center}
.secret{word-break:break-all;background:var(--surface);padding:10px;border-radius:var(--r-sm);border:1px solid var(--border);font-size:var(--fs-base)}
.codes{columns:2;padding-left:20px;margin:14px 0 22px} .codes li{margin:4px 0;font-size:16px}
.check{display:flex;gap:var(--space-2);align-items:center;margin:var(--space-1) 0 10px;font-size:var(--fs-md);min-height:32px}

/* ---------------------------------------------------------------- alerts */
.alert{padding:var(--space-3) var(--space-4);border-radius:var(--r-sm);background:var(--info-bg);border:1px solid var(--info-border);color:var(--text);margin-bottom:var(--space-4);max-width:var(--measure-wide)}
.alert > p{margin:var(--space-2) 0 0}
.alert--error{background:var(--bad-bg);border-color:var(--bad-border);color:var(--bad-text)}
.alert--warn{background:var(--warn-bg);border-color:var(--warn-border);color:var(--warn-text)}
.alert--warn a{color:inherit;font-weight:600}

/* ---------------------------------------------------------------- responsive: header and type */
/* Below 1024px the seven tabs no longer fit beside the brand, so the nav takes a row of its own. */
@media (max-width:1023.98px){
  :root{--header-h:112px}
  .top__inner{flex-wrap:wrap;gap:0 var(--space-3);padding-bottom:0;min-height:0}
  .brand{flex:1}
  .nav{order:3;flex:1 0 100%;padding-bottom:var(--space-2);margin-bottom:0}
}
@media (max-width:639.98px){
  .h1{font-size:var(--fs-xl)} .tile__value,.answer__value{font-size:var(--fs-xl)} .who{display:none}
  .nav a{padding:0 10px}
}


/* ---- auth pages: the ifusion.cloud front-door look ---- */
body.bare{background:var(--brand);min-height:100svh;display:flex;align-items:center;justify-content:center;padding:28px 20px}
.bare__main{width:100%;max-width:430px;position:relative;z-index:1}
.bare__brand{display:block;margin:0 auto 26px;width:188px}
.bare__brand svg,.bare__brand img{width:100%;height:auto;display:block}
body.bare .card{border:0;border-radius:28px;box-shadow:0 24px 60px rgba(12,17,24,.26);padding:30px 30px 26px}
body.bare .h1{font-size:30px;font-weight:500;letter-spacing:-.035em;margin-bottom:var(--space-4)}
.bare__road{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.bare__road path{fill:none;stroke:#fff;stroke-opacity:.14;stroke-width:110;stroke-linecap:round}
/* Beside the card, overlapping it slightly for depth — not behind it, where only
   a hand and two shoes showed. Hidden when the window is too narrow to hold it. */
.bare__ill{position:absolute;left:100%;margin-left:-30px;bottom:-6px;width:190px;height:auto;pointer-events:none;z-index:0}
body.bare{overflow-x:hidden}
@media (max-width:900px){ .bare__ill{display:none} }
@media (max-width:560px){ .bare__brand{width:150px} body.bare .h1{font-size:25px} body.bare .card{padding:24px 20px 20px} }

/* ---- cash forecast ---- */
/* The three questions, answered at a glance. Status chips carry an icon and words, never colour alone. */
.answers{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-4);margin-bottom:var(--space-5)}
.answer{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:var(--space-4) var(--space-5);box-shadow:var(--shadow-1);color:var(--text);text-decoration:none;min-height:44px;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.answer:hover{text-decoration:none;color:var(--text);border-color:var(--action)}
.answer.is-current{border-color:var(--action);box-shadow:0 0 0 1px var(--action),var(--shadow-1)}
.answer__label{font-size:var(--fs-xs);color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.answer .chip{align-self:flex-start}
.answer__line{font-size:var(--fs-sm);color:var(--text-muted);min-height:1em}
.answer__value{font-size:var(--fs-2xl);font-weight:650;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.answer__sub{font-size:var(--fs-sm);color:var(--text-muted)}

.chart-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.chart-head .h2,.chart-head .h3{margin:0}
.tabs{display:flex;flex-wrap:wrap;gap:var(--space-1);background:var(--surface-sunken);border:1px solid var(--border);border-radius:var(--r-pill);padding:3px;max-width:100%}
.tabs a{flex:none;min-height:44px;display:inline-flex;align-items:center;padding:0 var(--space-4);border-radius:var(--r-pill);text-decoration:none;color:var(--text-muted);font-weight:500;font-size:var(--fs-md);transition:background-color var(--dur-fast),color var(--dur-fast)}
.tabs a:hover{text-decoration:none;color:var(--text)}
.tabs a[aria-current="page"]{background:var(--surface);color:var(--text);font-weight:600;box-shadow:0 1px 2px rgba(12,17,24,.12)}
.fc-sub{margin:var(--space-2) 0 6px}

/* The charts are SVGs drawn at a fixed size and scaled to fit, so their lettering grows with
   them; past ~1400px they stop growing and sit in the middle of the card instead. */
.fc-wrap{position:relative;max-width:1400px;margin-inline:auto}
.fc-svg,.fc-flows{display:block;width:100%;height:auto}
.fc-svg:focus{outline:none}
.fc-svg:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:6px}
.fc-flows{margin-top:2px}
.fc-narrow{display:none}
@media (max-width:640px){ .fc-wide{display:none} .fc-narrow{display:block} }
.fc-axis{font-size:12px;fill:var(--text-muted);font-variant-numeric:tabular-nums}
.fc-narrow .fc-axis{font-size:11px}
.fc-limit{font-size:11.5px;font-weight:600;fill:var(--text);paint-order:stroke;stroke:var(--surface);stroke-width:3px}
.fc-callout{font-size:12px;font-weight:600;fill:var(--text);paint-order:stroke;stroke:var(--surface);stroke-width:3px}
.fc-end{font-size:13px;font-weight:700;fill:var(--text)}
.fc-hit{cursor:crosshair}

/* One tooltip, every value at that date. Values lead; labels follow. */
.fc-tip{position:absolute;top:0;left:0;min-width:200px;max-width:260px;background:var(--surface);border:1px solid var(--border);
  border-radius:10px;box-shadow:var(--shadow-3);padding:10px 12px;pointer-events:none;font-size:var(--fs-sm);z-index:var(--z-raised)}
.fc-tip__date{font-weight:600;margin-bottom:6px}
.fc-tip__row{display:flex;align-items:center;gap:var(--space-2);justify-content:space-between;font-variant-numeric:tabular-nums}
.fc-tip__row span:first-child{display:inline-flex;align-items:center;gap:6px;color:var(--text-muted)}
.fc-tip__row strong{color:var(--text)}
.fc-tip__key{display:inline-block;width:12px;height:2px;border-radius:1px}

.fc-legend{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;padding:0;margin:var(--space-3) auto 0;font-size:var(--fs-sm);color:var(--text-muted);max-width:1400px}
.fc-legend li{display:inline-flex;align-items:center;gap:7px}
.key{display:inline-block;width:14px;height:10px;border-radius:2px}
.key--line{height:2px;width:16px;background:var(--chart-in)}
.key--band{background:var(--chart-band)}
.key--warn{background:var(--warn-bg);box-shadow:inset 0 0 0 1px var(--warn-text)}
.key--bad{background:var(--bad-bg);box-shadow:inset 0 0 0 1px var(--bad-text)}
.key--in{background:var(--chart-in)}
.key--out{background:var(--chart-out)}

/* In Windows high-contrast mode the status washes would vanish; the dashed limit lines and their
   text labels still carry the meaning, so nothing depends on the fill. */
@media (forced-colors:active){ .fc-warn-region,.fc-bad-region{fill:Canvas} .chip{border-color:CanvasText} .nav a[aria-current="page"]{outline:2px solid Highlight} }

.table--forecast td,.table--forecast th{vertical-align:top}
.table--forecast details summary{cursor:pointer;color:var(--link);font-weight:500;min-height:24px}
/* A figure, then what it is. The figure column is as wide as the widest figure in the list (subgrid), so they line up. */
.items{list-style:none;padding:0;margin:var(--space-2) 0 2px;display:grid;grid-template-columns:auto 1fr;gap:6px var(--space-3);white-space:normal;min-width:280px;max-width:var(--measure-wide)}
.items li{display:grid;grid-column:1 / -1;grid-template-columns:90px 1fr;grid-template-columns:subgrid;gap:var(--space-3);font-size:var(--fs-md);line-height:1.45}
.items__amt{font-variant-numeric:tabular-nums;font-weight:600;text-align:right;white-space:nowrap}
.items__amt.is-in{color:var(--ok-text)}
.items__what{min-width:0}
.assume{margin:0 0 var(--space-3);padding-left:20px;display:grid;gap:var(--space-2);max-width:var(--measure)}
.planned-form{border-top:1px solid var(--border);margin-top:var(--space-4);padding-top:var(--space-4)}
tr.is-off td{color:var(--text-muted);text-decoration:line-through}
tr.is-off td:last-child{text-decoration:none}
@media (max-width:640px){ .table--forecast td.num .chip{display:block;width:fit-content;margin:3px 0 0 auto} }

/* ---- account: tabs + team ---- */
.tabs--page{display:inline-flex;margin:0 0 var(--space-4)}
.roles{border:0;padding:0;margin:var(--space-1) 0 var(--space-4);display:grid;gap:10px;max-width:var(--field-max)}
.roles legend{font-weight:600;font-size:var(--fs-md);margin-bottom:var(--space-2);padding:0}
.role{display:flex;gap:var(--space-3);align-items:flex-start;border:1px solid var(--border);border-radius:var(--r-sm);padding:var(--space-3) 14px;cursor:pointer;min-height:44px;transition:border-color var(--dur-fast)}
.role:hover{border-color:var(--border-hover)}
.role:has(input:checked){border-color:var(--action);box-shadow:0 0 0 1px var(--action);background:var(--surface-selected)}
.role input{margin-top:3px;width:18px;height:18px;flex:none}
.role span{display:flex;flex-direction:column;gap:2px}
.role .muted{font-size:var(--fs-sm)}
.copy-row{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.copy-row input{flex:1 1 320px;min-width:0;min-height:44px;padding:var(--space-2) var(--space-3);font-size:var(--fs-sm)}
.link-card{border-color:var(--action)}
td.actions{white-space:nowrap}
td.actions form.inline{display:inline-block;margin:0 var(--space-2) var(--space-1) 0}

/* Customers */
/* The weekly list fills the width: as many columns of cards as fit, each wide enough (~28rem) for its buttons on one line. */
.reach{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,28rem),1fr));gap:var(--space-3)}
.reach__item{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--r-sm);padding:var(--space-3) var(--space-4);background:var(--surface);min-width:0}
.reach__head{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.reach__name{font-weight:650}
.reach__why{margin:6px 0 var(--space-3);font-size:var(--fs-md);color:var(--text-muted)}
.reach__actions{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin-top:auto}
.reach__actions form.inline{display:inline-flex}
.reach__actions select{min-height:36px;padding:var(--space-1) 10px;font-size:var(--fs-sm)}
.filters .field{margin:0;min-width:180px;flex:1 1 180px;max-width:22rem}
.pager{display:flex;gap:var(--space-3);align-items:center;margin-top:var(--space-3)}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px var(--space-4);margin:0}
.kv dt{color:var(--text-muted);font-size:var(--fs-sm)}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.cust-top{margin-bottom:0}
.snooze{margin-top:var(--space-3)}
.log{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px;max-width:var(--measure-wide)}
.log__item{border-left:3px solid var(--border);padding:2px 0 2px var(--space-3)}
.log__meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:var(--fs-md)}
.log__body{margin:var(--space-1) 0 0;font-size:var(--fs-md)}
details.year{border-top:1px solid var(--border);padding:var(--space-2) 0}
details.year summary{cursor:pointer;padding:var(--space-1) 0;min-height:32px}
.lines{list-style:none;margin:0;padding:0}
/* Customer vs market labels: always text + colour, never colour alone */
tr.is-prospect th a{color:var(--prospect-text)}
.label-key{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin:var(--space-1) 0 var(--space-3);font-size:var(--fs-sm)}
/* Mileage */
.mileage-forms{margin-bottom:0}
.mileage-forms summary{cursor:pointer}
.paybar{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin:0 0 var(--space-3);padding:10px var(--space-3);border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-sunken)}
.paybar input{min-height:36px;padding:var(--space-1) var(--space-2);font-size:var(--fs-md)}
.paybar input[name=ref]{flex:1 1 200px;min-width:0}
tr.is-paid td{color:var(--text-muted)}
.chart-head select,#tyf{min-height:36px;padding:var(--space-1) 10px;font-size:var(--fs-md)}
/* Sortable headers: the button looks like the header text; the arrow shows the current order */
.th-sort{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:var(--space-1);font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;border-radius:var(--r-xs);min-height:24px}
.th-sort:hover{color:var(--text)}
.th-sort:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.th-sort__arrow{display:inline-block;width:.8em;text-align:center}
th[aria-sort=ascending] .th-sort__arrow::after{content:"▲";font-size:.75em}
th[aria-sort=descending] .th-sort__arrow::after{content:"▼";font-size:.75em}
th[aria-sort] .th-sort{color:var(--text)}
.table--pick tbody tr:has(input[data-pick]){cursor:pointer}
.table--pick tbody tr:has(input[data-pick]):hover td{background:var(--surface-sunken)}
.table--pick tbody tr.is-picked td{background:var(--surface-selected)}
.paybar__sum{flex-basis:100%;font-size:var(--fs-md);color:var(--text-muted)}
.paybar__sum strong{color:var(--text)}
.pickbar{position:sticky;bottom:0;z-index:var(--z-raised);display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);align-items:center;justify-content:space-between;margin-top:var(--space-3);padding:10px var(--space-3);border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);box-shadow:var(--shadow-2)}
.pickbar.is-active{border-color:var(--action)}
.pickbar__sum{font-size:var(--fs-md)}
.pickbar__go{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;font-size:var(--fs-md)}
.pickbar__go input{min-height:36px;padding:var(--space-1) var(--space-2);font-size:var(--fs-md)}
/* Bank: company / personal account switch, and company money picked out in the personal statement */
.page-head .chart-head{margin-bottom:var(--space-1)}
.bank-switch select{min-height:38px;padding:6px 10px;font-size:var(--fs-md)}
tr.is-company td{background:var(--surface-selected)}
.note-line{display:flex;gap:var(--space-2);align-items:baseline}
.note-line .icon{flex:none;position:relative;top:.125em}
.note-line--warn .icon{color:var(--warn-text)}
/* Today → Cash in and out: period switch, legend and chart (reuses the forecast chart's tooltip) */
.cashflow{margin-bottom:var(--space-3)}
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--border-strong);border-radius:var(--r-pill);padding:3px;gap:2px;background:var(--surface);max-width:100%}
.seg__opt{flex:none;padding:6px 14px;border-radius:var(--r-pill);font-size:var(--fs-md);color:var(--text-muted);text-decoration:none;min-height:32px;display:inline-flex;align-items:center;touch-action:manipulation;transition:background-color var(--dur-fast),color var(--dur-fast)}
.seg__opt:hover{color:var(--text);background:var(--surface-sunken);text-decoration:none}
.seg__opt[aria-current="true"],.seg__opt[aria-current="true"]:hover{background:var(--action);color:var(--action-ink);font-weight:600}
.seg__opt:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.cf-legend{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font-size:var(--fs-sm);margin:6px 0 var(--space-1)}
.cf-legend span{display:inline-flex;align-items:center;gap:6px}
.cf-key{width:12px;height:12px;border-radius:3px;display:inline-block}
.cf-key--in{background:var(--chart-in)}.cf-key--out{background:var(--chart-out)}
.cf-svg{display:block;width:100%;height:auto}
.cf-svg:focus{outline:none}
.cf-svg:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:6px}
.cf-wrap .fc-tip__key{width:10px;height:10px;border-radius:2px}
.fc-cross,.cf-cross{pointer-events:none}
.cf-wrap .fc-tip{max-width:340px;min-width:240px}
.cf-tip__head{margin:var(--space-2) 0 2px;font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.cf-tip__line span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-tip__line strong{font-weight:500}
.cf-tip__more{margin-top:6px;font-size:var(--fs-xs);color:var(--text-muted)}
.cf-detail{margin-top:var(--space-3);border-top:1px solid var(--border);padding-top:var(--space-3)}
.cf-detail:focus{outline:none}
.cf-detail__head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:6px}
.cf-detail__head .btn{margin-left:auto}
tr.is-excluded td{color:var(--text-muted)}
.cf-hit{cursor:pointer}

/* Reach-out email draft (customers page) */
.draft{width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 32px);border:1px solid var(--border);border-radius:var(--r);padding:0;box-shadow:var(--shadow-3);color:var(--text);background:var(--surface)}
.draft::backdrop{background:var(--scrim)}
.draft__form{padding:var(--space-5)}
.draft__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.draft__head .h2{margin:0}
.draft__status{min-height:1.5em;margin:6px 0 var(--space-3);font-size:var(--fs-md);color:var(--text-muted)}
.draft[aria-busy="true"] .draft__status::before{content:"";display:inline-block;width:12px;height:12px;margin-right:var(--space-2);border:2px solid var(--border-strong);border-top-color:var(--action);border-radius:50%;vertical-align:-1px;animation:draft-spin .8s linear infinite}
@keyframes draft-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .draft[aria-busy="true"] .draft__status::before{animation:none} }
.draft .field{max-width:none}
.draft textarea{width:100%;min-height:260px;padding:10px var(--space-3);font-size:var(--fs-base);line-height:1.5;resize:vertical}
.draft input{width:100%}
.draft__actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-1)}
@media (max-width:640px){ .draft__form{padding:14px} .draft textarea{min-height:220px} .draft__actions .btn{flex:1 1 auto} }

/* Sync progress (Settings → Connection & sync) */
.sync{border:1px solid var(--border);border-radius:var(--r-sm);padding:var(--space-3) 14px;margin:0 0 14px;background:var(--surface-sunken);max-width:var(--measure-wide)}
.sync__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-2);font-variant-numeric:tabular-nums}
.sync__pct{font-weight:650}
.progress{height:12px;border-radius:var(--r-pill);background:var(--border);overflow:hidden}
.progress__fill{height:100%;border-radius:var(--r-pill);background:var(--brand);transition:width .4s ease}
.sync[data-state="stalled"] .progress__fill,.sync[data-state="error"] .progress__fill{background:var(--warn-text)}
.sync[data-state="ok"] .progress__fill{background:var(--ok-text)}
.sync__note{margin:var(--space-2) 0 0;font-size:var(--fs-md);color:var(--text-muted);min-height:1.5em}
.sync .row{margin-top:10px}
@media (prefers-reduced-motion:reduce){ .progress__fill{transition:none} }
@media (forced-colors:active){ .progress{border:1px solid CanvasText} .progress__fill{background:Highlight} }

/* Customers: a company is one line that opens in place (docs/scope-company-groups.md) */
.line-toggle{display:inline-flex;align-items:baseline;gap:6px;font-weight:600;text-decoration:none;touch-action:manipulation;min-height:24px}
.line-toggle:hover{text-decoration:underline}
.line-caret::before{content:"";display:inline-block;width:.42em;height:.42em;margin:0 .25em 0 .1em;border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);transform:rotate(-45deg);transition:transform var(--dur) var(--ease-out);vertical-align:.12em}
.line-toggle[aria-expanded="true"] .line-caret::before{transform:rotate(45deg);vertical-align:.22em}
.line-detail>td{background:var(--surface-sunken);padding:var(--space-3) var(--space-4) var(--space-5);white-space:normal}
/* The open panel is as wide as the visible part of the table and stays in view while a wide table
   scrolls sideways on a phone; its own tables scroll inside it rather than widening the list. */
.line-detail__body{max-width:100%;position:sticky;left:var(--space-4);width:calc(100cqw - 2 * var(--space-4) - 8px)}
.line-detail__body .h3{margin:6px 0 var(--space-2)}
.line-detail__body .h3 ~ .h3{margin-top:var(--space-5)}
.line-detail .table-wrap{background-color:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm)}
.table .line-division>th{font-size:var(--fs-sm);font-weight:650;padding-top:var(--space-3);background:var(--surface-hover);border-bottom:1px solid var(--border)}
.table--people th[scope=row]{white-space:normal;min-width:12rem}

/* ---- Campaigns ---- */
/* Everything for /campaigns and the public unsubscribe page, in one block; built from the tokens above. */
.mail-back{margin:0 0 4px;font-size:14px}
.mail-meta{align-items:center;margin:6px 0 0}
.mail-switch{margin:0 0 12px}
.mail-hint{margin-top:6px}
.mail-text{white-space:pre-wrap;overflow-wrap:anywhere;font-family:inherit;font-size:14.5px;line-height:1.55;margin:0;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 14px;max-width:var(--measure-wide)}
.mail-counts{list-style:none;display:flex;flex-wrap:wrap;gap:8px 16px;padding:0;margin:0 0 12px;font-size:14px}
.mail-counts li{display:inline-flex;align-items:center;gap:6px}
.mail-rows{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mail-row{border:1px solid var(--border);border-radius:var(--r-sm);min-width:0}
.mail-row__head{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:10px 14px;cursor:pointer;min-height:44px}
.mail-row__head::before{content:"▸";color:var(--text-muted);flex:none}
details[open] > .mail-row__head::before{content:"▾"}
.mail-row__who{flex:1 1 calc(100% - 2rem);min-width:0;overflow-wrap:anywhere}
@media (min-width:640px){ .mail-row__who{flex:0 1 var(--field-max)} }
.mail-email{padding:0 14px 14px}
.mail-email__head{margin:0 0 10px;font-size:14px}
.table .mail-name{white-space:normal;min-width:180px;font-weight:600}
.table .mail-addr{font-weight:500;white-space:normal;overflow-wrap:anywhere}
.mail-add,.mail-search{display:flex;flex-wrap:wrap;gap:0 10px;align-items:flex-end}
.mail-add .field,.mail-search .field{flex:1 1 260px;min-width:0}
.mail-add .btn,.mail-search .btn{margin-bottom:14px}
/* The audience: the create / change form, who gets it, and the reasons the rest are left out. */
.mail-segments{margin-top:6px}
.mail-segments .role.is-off{cursor:default;color:var(--muted)}
.mail-segments .role.is-off strong{color:var(--muted)}
.mail-limit{max-width:420px}
.mail-actions{margin:8px 0 0}
.mail-total{margin:0 0 10px;font-size:15.5px}
.mail-total__n{font-size:30px;font-weight:750;font-variant-numeric:tabular-nums;margin-right:4px}
.mail-reasons th[scope=row]{font-weight:500}
.mail-reasons td.num{font-variant-numeric:tabular-nums}
.mail-list{margin-top:6px}
.mail-list .mail-addr{overflow-wrap:anywhere;min-width:160px}
.mail-list .mail-who{min-width:160px;overflow-wrap:anywhere}
.mail-list .mail-greet{white-space:nowrap}
.mail-company form.inline{margin:0}
/* Drafting: the bar while the emails are written, why it stopped, and raising the AI cost cap. */
.mail-progress{border:1px solid var(--border);border-radius:var(--r-sm);padding:var(--space-3) var(--space-4);margin:0 0 var(--space-4);background:var(--surface-sunken);max-width:var(--measure-wide)}
.mail-progress__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-2);font-variant-numeric:tabular-nums}
.mail-progress__pct{font-weight:650}
.mail-progress__note{margin:var(--space-2) 0 0;font-size:var(--fs-md);color:var(--text-muted);min-height:1.5em}
.mail-progress[data-state="blocked"] .progress__fill,.mail-progress[data-state="stalled"] .progress__fill{background:var(--warn-text)}
.mail-progress[data-state="blocked"] .mail-progress__note{color:var(--warn-text);font-weight:500}
.mail-cap{display:flex;flex-wrap:wrap;gap:0 var(--space-3);align-items:flex-end;max-width:var(--field-max)}
.mail-cap .field{flex:1 1 240px;min-width:0}
.mail-cap .btn{margin-bottom:var(--space-4)}
.mail-why{margin:0 0 var(--space-3);font-size:var(--fs-md);color:var(--warn-text);max-width:var(--measure-wide);overflow-wrap:anywhere}
/* Review: the sample counter, each email's actions and what they said, the edit form, Copy. */
.mail-copy{margin-left:auto}
.mail-progress[data-state="done"] .progress__fill{background:var(--ok-text)}
.mail-cap-note{margin-top:var(--space-4)}
.mail-note{margin:0 0 var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--r-sm);background:var(--info-bg);border:1px solid var(--info-border);font-size:var(--fs-md);max-width:var(--measure-wide)}
.mail-note.is-refused{background:var(--bad-bg);border-color:var(--bad-border);color:var(--bad-text)}
.mail-row__actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}
.mail-row__actions form{margin:0}
.mail-edit{margin-top:var(--space-2)}
.mail-edit .field{max-width:var(--measure-wide)}
.mail-edit textarea{min-height:18rem}
.mail-text--fixed{color:var(--text-muted);background:var(--surface-sunken)}
/* Sending: what still stops Send or Resume, the typed count, the status line, and an unknown email's Send again. */
.mail-gates__head{margin:0 0 var(--space-1);font-weight:600}
.mail-gates{list-style:none;margin:0 0 var(--space-4);padding:0;max-width:var(--measure-wide);color:var(--warn-text)}
.mail-gates li{margin:var(--space-1) 0}
.mail-gates--met{color:var(--text-muted);font-size:var(--fs-md)}
.mail-confirm,.mail-again{display:flex;flex-wrap:wrap;gap:0 var(--space-3);align-items:flex-end;max-width:var(--field-max)}
.mail-confirm .field,.mail-again .field{flex:1 1 240px;min-width:0}
.mail-confirm .btn,.mail-again .btn{margin-bottom:var(--space-4)}
.mail-again{flex:1 1 100%}
.mail-status{margin:0 0 var(--space-3);max-width:var(--measure-wide);font-weight:500}
/* Results: the counts by state, on the card's own surface; what happened to one email. */
.tiles.mail-results{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:0}
@media (min-width:640px){ .tiles.mail-results{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:1440px){ .tiles.mail-results{grid-template-columns:repeat(8,minmax(0,1fr))} }
.mail-results .tile{background:var(--surface-sunken);box-shadow:none;padding:var(--space-3) var(--space-4)}
.mail-results .tile__unit{margin-left:0;white-space:nowrap}
.mail-gone{margin:0 0 var(--space-3);font-size:var(--fs-md);color:var(--text-muted)}
.mail-decide{margin:0 0 var(--space-4);padding-bottom:var(--space-4);border-bottom:1px solid var(--border)}
.mail-decide .mail-row__actions{margin-top:0}
/* The public pages reached from an email: the JGTS name, a card, nothing else. */
body.public{background:var(--bg)}
.public__main{max-width:560px;margin:0 auto;padding:48px 16px;overflow-wrap:anywhere}
.public__brand{font-weight:700;font-size:18px;letter-spacing:-.01em;margin:0 0 14px}

/* ---------------------------------------------------------------- utilities: last, so they win over a component's own spacing */
.mt-0{margin-top:0} .m-0{margin:0} .self-end{align-self:end}

/* ---------------------------------------------------------------- touch: 44px targets where a finger is the pointer */
@media (pointer:coarse){
  .btn--small,.seg__opt,.th-sort,.line-toggle,.table select,.reach__actions select,.chart-head select,#tyf,.bank-switch select,.paybar input,.pickbar__go input{min-height:44px}
  .line-toggle{align-items:center}
  /* 16px stops iOS zooming the page when a field takes focus */
  .paybar input,.pickbar__go input,.copy-row input,.table select,.reach__actions select,.chart-head select,#tyf,.bank-switch select,.draft textarea{font-size:16px}
  input[type=checkbox],input[type=radio]{width:22px;height:22px}
}

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

/* ---------------------------------------------------------------- print: the figures, without the controls */
@media print{
  :root{--shadow-1:none;--shadow-2:none}
  body{background:#fff;font-size:11pt}
  .top{position:static;border:0} .nav,.logout,.skip-link{display:none}
  .wrap{max-width:none;padding:0}
  .fc-tip,.tabs,.seg,.planned-form,.filters,.pickbar,.paybar,.pager,.reach__actions,.draft,form.inline,td.actions,.cf-detail__head .btn{display:none !important}
  .card,.tile,.answer{box-shadow:none;border-color:#999}
  .tile,.answer,tr{break-inside:avoid}
  .table-wrap{overflow:visible;background:none}
  .table{font-size:9pt}
  .table th,.table td{padding:4px 6px}
  .table thead{display:table-header-group}
  .table thead th{background:none;border-bottom:1px solid #999}
  .line-detail__body{position:static;width:auto}
  a{color:inherit;text-decoration:none}
}