/* Truepenny: direction D (docs/plans/redesign-d-2026-10.md). Kinmoor's moss-grey neutrals and type, copper for the
   main action only, heather for links and the focus ring. Light is the default; dark follows the device setting.
   From slice R6 a person can pick Light or Dark: <html data-theme="light|dark"> wins over the device. */

/* Fonts, served from static/fonts (licences beside them). Archivo is one variable file per subset, weight 100-900
   and width 62-125%; IBM Plex Mono is 400 and 500. The fallback faces are Arial and Courier New resized to the
   same widths and line metrics, so the page doesn't move when the real fonts arrive. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url("fonts/archivo-latin-wdth-normal.de2f1fe81758.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url("fonts/archivo-latin-ext-wdth-normal.589f7bc0fac4.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/ibm-plex-mono-latin-400-normal.79936b18df9f.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/ibm-plex-mono-latin-ext-400-normal.8450d5944de2.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/ibm-plex-mono-latin-500-normal.b1c8a895f5fd.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/ibm-plex-mono-latin-ext-500-normal.fa8d8838b94a.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo Fallback';font-weight:100 500;src:local('Arial'),local('ArialMT'),local('Helvetica'),local('Liberation Sans');
  size-adjust:98.86%;ascent-override:88.81%;descent-override:21.24%;line-gap-override:0%}
@font-face{font-family:'Archivo Fallback';font-weight:600 900;src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Liberation Sans Bold');
  size-adjust:95.64%;ascent-override:91.80%;descent-override:21.96%;line-gap-override:0%}
@font-face{font-family:'Archivo Wide Fallback';font-weight:600 900;src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Liberation Sans Bold');
  size-adjust:125.2%;ascent-override:70.13%;descent-override:16.77%;line-gap-override:0%}
@font-face{font-family:'Plex Mono Fallback';src:local('Courier New'),local('CourierNewPSMT'),local('Liberation Mono');
  size-adjust:100%;ascent-override:102.5%;descent-override:27.5%;line-gap-override:0%}

/* light */
:root{
  --bg:#ECEEE8; --surface:#F9FAF6; --surface-2:#F1F3EC; --ink:#1A1D17; --muted:#545C50;
  --rule:#CBD1C4; --line-strong:#808779;
  --accent:#A8471B; --accent-hover:#8F3B15; --accent-ink:#FFFFFF; --accent-text:#94401A; --accent-soft:#F6E7DD;
  --link:#6B3D71; --link-hover:#4F2C54; --link-soft:#EEE4EF;
  --ok-bg:#E0EDD7; --ok-fg:#2E6020; --ok-line:#93BA80;
  --warn-bg:#F6EDC6; --warn-fg:#735A00; --warn-line:#CDB453;
  --bad-bg:#F7DEE5; --bad-fg:#9E1B45; --bad-line:#D891A8;
  --wait-bg:#E3E8F4; --wait-fg:#3A5396; --wait-line:#A3B3D9;
  --done-bg:#E3E6DE; --done-fg:#545C50; --done-line:#B9BFB1;
  --shadow-pop:0 8px 28px rgb(0 0 0 / .16);
  --qr-bg:#FFFFFF;                                  /* white in both modes: scanners need dark on light */
  /* names the templates already use */
  --line:var(--rule); --line-soft:var(--rule); --focus:var(--link);
  --radius:5px; --radius-lg:8px; --ease:cubic-bezier(.2,.7,.2,1);   /* corners: controls and panels (softened 2026-11-01; were 2 px) */
  --sans:'Archivo','Archivo Fallback',Arial,Helvetica,sans-serif;
  --display:'Archivo','Archivo Wide Fallback','Archivo Fallback',Arial,Helvetica,sans-serif;
  --mono:'IBM Plex Mono','Plex Mono Fallback',ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
/* dark values, written once; the two rules after this apply them. Neutral greys with no tint (2026-10-30: the olive
   ones read as green). Softened 2026-11-01 so long sessions glare less: text on a card is 12.8:1 (it was 15.6:1,
   near-white on near-black; Ramp's dark mode is 11.2:1), secondary text 6.8:1, both well above WCAG AA */
:root{
  --d-bg:#141414; --d-surface:#1B1B1B; --d-surface-2:#232323; --d-ink:#DEDEDE; --d-muted:#A3A3A3;
  --d-rule:#333333; --d-line-strong:#767676;
  --d-accent:#F2A877; --d-accent-hover:#F6BE97; --d-accent-ink:#151515; --d-accent-text:#F2A877; --d-accent-soft:#33241A;
  --d-link:#C99FCF; --d-link-hover:#DDBFE1; --d-link-soft:#2E2433;
  --d-ok-bg:#1C2A16; --d-ok-fg:#A6D48A; --d-ok-line:#3F5F31;
  --d-warn-bg:#2E280E; --d-warn-fg:#E6CB6A; --d-warn-line:#6A5B1F;
  --d-bad-bg:#3A1622; --d-bad-fg:#F49AB6; --d-bad-line:#7B3350;
  --d-wait-bg:#1A2236; --d-wait-fg:#A9BEF2; --d-wait-line:#3B4B74;
  --d-done-bg:#2A2A2A; --d-done-fg:#A6A6A6; --d-done-line:#444444;
  --d-shadow-pop:0 8px 28px rgb(0 0 0 / .5);
  --d-qr-bg:#FFFFFF;
}
@media (prefers-color-scheme: dark){:root:not([data-theme=light]){
  --bg:var(--d-bg); --surface:var(--d-surface); --surface-2:var(--d-surface-2); --ink:var(--d-ink); --muted:var(--d-muted);
  --rule:var(--d-rule); --line-strong:var(--d-line-strong);
  --accent:var(--d-accent); --accent-hover:var(--d-accent-hover); --accent-ink:var(--d-accent-ink); --accent-text:var(--d-accent-text); --accent-soft:var(--d-accent-soft);
  --link:var(--d-link); --link-hover:var(--d-link-hover); --link-soft:var(--d-link-soft);
  --ok-bg:var(--d-ok-bg); --ok-fg:var(--d-ok-fg); --ok-line:var(--d-ok-line);
  --warn-bg:var(--d-warn-bg); --warn-fg:var(--d-warn-fg); --warn-line:var(--d-warn-line);
  --bad-bg:var(--d-bad-bg); --bad-fg:var(--d-bad-fg); --bad-line:var(--d-bad-line);
  --wait-bg:var(--d-wait-bg); --wait-fg:var(--d-wait-fg); --wait-line:var(--d-wait-line);
  --done-bg:var(--d-done-bg); --done-fg:var(--d-done-fg); --done-line:var(--d-done-line);
  --shadow-pop:var(--d-shadow-pop); --qr-bg:var(--d-qr-bg);
  color-scheme:dark}}
:root[data-theme=dark]{
  --bg:var(--d-bg); --surface:var(--d-surface); --surface-2:var(--d-surface-2); --ink:var(--d-ink); --muted:var(--d-muted);
  --rule:var(--d-rule); --line-strong:var(--d-line-strong);
  --accent:var(--d-accent); --accent-hover:var(--d-accent-hover); --accent-ink:var(--d-accent-ink); --accent-text:var(--d-accent-text); --accent-soft:var(--d-accent-soft);
  --link:var(--d-link); --link-hover:var(--d-link-hover); --link-soft:var(--d-link-soft);
  --ok-bg:var(--d-ok-bg); --ok-fg:var(--d-ok-fg); --ok-line:var(--d-ok-line);
  --warn-bg:var(--d-warn-bg); --warn-fg:var(--d-warn-fg); --warn-line:var(--d-warn-line);
  --bad-bg:var(--d-bad-bg); --bad-fg:var(--d-bad-fg); --bad-line:var(--d-bad-line);
  --wait-bg:var(--d-wait-bg); --wait-fg:var(--d-wait-fg); --wait-line:var(--d-wait-line);
  --done-bg:var(--d-done-bg); --done-fg:var(--d-done-fg); --done-line:var(--d-done-line);
  --shadow-pop:var(--d-shadow-pop); --qr-bg:var(--d-qr-bg);
  color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.45;font-variant-numeric:tabular-nums}
a{color:var(--link);text-underline-offset:.15em;transition:color .2s var(--ease)} a:hover{color:var(--link-hover)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--radius)}
h1,h2,h3{margin:0;text-wrap:balance}
/* typography (2026-11-01): short labels balance their lines too, and running text avoids a last line of one word
   (Chrome, Edge and Safari; others break as before). app.js keeps dates, times and "3 of 26" on one line */
.btn,button,th,dt,label,.p-status,.w-title,.pill{text-wrap:balance}
p,li,dd,.msg{text-wrap:pretty}
h1{font-family:var(--display);font-size:26px;font-weight:700;font-stretch:125%;line-height:1.15;letter-spacing:-.005em}
h2{font-size:18px;font-weight:650;line-height:1.3} h3{font-size:15px;font-weight:600}
p{margin:0}
/* one font (Josh, 2026-11-01): amounts, IDs, dates and counts are Archivo with tabular figures, so columns still line up.
   .mono and .num keep their names as markers for figures; Plex Mono stays only for what's read or typed character by
   character: keyboard keys, the diagnosis file, and the two-step key and backup codes (pre, code, kbd, samp) */
.mono{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .small{font-size:13px}
/* column heads, group names and section labels: mono capitals */
.eyebrow{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--muted)}
.stack>*+*{margin-top:12px} .stack-lg>*+*{margin-top:24px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .spread{justify-content:space-between}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* the shell (slice R2): a 232 px sidebar grouped by job (Today, Payouts, Checks, Setup, Records) with the company
   and the account at its foot, then the content column, fluid. Under 900 px a slim bar with the wordmark and Menu
   opens the sidebar as a drawer from the left; without JavaScript the sidebar sits above the page instead. */
.skip{position:absolute;left:-9999px;top:8px;z-index:60;background:var(--surface);color:var(--link);padding:8px 12px;border:1px solid var(--line-strong);border-radius:var(--radius);font-weight:600}
.skip:focus{left:16px}
/* the demo site's reminder that everything is sample data (DEMO_SITE) */
.demo-band{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;justify-content:space-between;margin:0 0 14px;padding:8px 12px;border:1px solid var(--wait-line);border-radius:var(--radius);background:var(--wait-bg);color:var(--wait-fg);font-size:.875rem}
.demo-band p{margin:0}
.content .demo-band button.linkish{color:inherit;font-weight:600;font-size:inherit}
/* the guided tour's panel and the outline on what it points at (demo site) */
.tour-panel{position:fixed;right:20px;bottom:20px;z-index:55;width:min(360px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow:auto;padding:16px 18px;background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop)}
.tour-panel p{margin:0 0 10px}
.tour-count{color:var(--accent-text);font-weight:600;letter-spacing:.02em}
.tour-title{font-size:1.125rem;margin:0 0 8px}
.tour-try{padding:8px 10px;background:var(--accent-soft);border-radius:var(--radius)}
.tour-buttons{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.tour-leave{margin-left:auto;min-height:32px;padding:4px 2px;background:none;border:0;color:var(--link);text-decoration:underline;text-underline-offset:.15em;cursor:pointer;font:inherit;font-size:13px}
.tour-leave:hover{color:var(--link-hover)}
.tour-target{outline:3px solid var(--accent);outline-offset:4px;border-radius:var(--radius)}
.tour-panel-left{right:auto;left:calc(var(--side-w, 232px) + 20px)}
@media (max-width:899px){.tour-panel,.tour-panel-left{left:12px;right:12px;bottom:10px;width:auto;max-height:48vh;padding:12px 14px}.tour-target{scroll-margin-top:64px}}
main:focus{outline:none}
.wordmark{display:inline-flex;flex-direction:column;gap:2px;font-family:var(--display);font-weight:800;font-stretch:125%;font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:none;line-height:1.15;white-space:nowrap}
.wordmark:hover{color:var(--ink)}
.wordmark .wm-penny{color:var(--accent-text)}                    /* TRUE in ink, PENNY in copper */
.shell.has-side{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;gap:14px;padding:20px 16px 14px;background:var(--bg);border-right:1px solid var(--rule)}
.side-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:0 10px}
/* the groups scroll on a short window; the company and the account stay in view at the foot */
.side-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:8px;margin:0 -6px;padding:2px 6px}
/* group names stand apart from the links under them: wide Archivo capitals in ink, a rule between groups */
.side-eyebrow{padding:2px 10px 4px;font-family:var(--display);font-stretch:125%;font-size:12px;font-weight:750;letter-spacing:.1em;color:var(--ink)}
.side-group+.side-group{border-top:1px solid var(--rule);padding-top:8px}
/* each group folds under its name; the choice is kept in this browser (app.js), and the group holding the page
   being shown is always open. A folded group with a count inside shows a copper dot, so nothing waiting is hidden */
.side-toggle{display:flex;align-items:center;gap:8px;width:100%;min-height:24px;margin:0;padding:0;background:none;border:0;
  border-radius:var(--radius);color:inherit;font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}
.side-toggle:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.side-toggle::after{content:"";margin-left:auto;margin-right:3px;width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s var(--ease);opacity:.7}
html:not(.js) .side-toggle{cursor:default}
html:not(.js) .side-toggle::after{display:none}
.side-dot{display:none;width:6px;height:6px;border-radius:50%;background:var(--accent)}
:is(html[data-folded~=today] [data-group=today],html[data-folded~=payouts] [data-group=payouts],html[data-folded~=checks] [data-group=checks],html[data-folded~=setup] [data-group=setup],html[data-folded~=records] [data-group=records]) ul{display:none}
:is(html[data-folded~=today] [data-group=today],html[data-folded~=payouts] [data-group=payouts],html[data-folded~=checks] [data-group=checks],html[data-folded~=setup] [data-group=setup],html[data-folded~=records] [data-group=records]) .side-toggle::after{transform:rotate(-45deg)}
:is(html[data-folded~=today] [data-group=today],html[data-folded~=payouts] [data-group=payouts],html[data-folded~=checks] [data-group=checks],html[data-folded~=setup] [data-group=setup],html[data-folded~=records] [data-group=records]):has(.count:not(:empty)) .side-dot{display:inline-block}
.side ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.side-nav a{display:flex;justify-content:space-between;align-items:baseline;gap:8px;min-height:28px;padding:4px 10px;color:var(--ink);text-decoration:none;border-radius:var(--radius);transition:background-color .2s var(--ease),color .2s var(--ease)}
.side-nav a.sub{padding-left:22px;color:var(--muted)}
.side-nav a:hover{background:var(--surface);color:var(--ink)}
.side-nav a[aria-current=page]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:inset 2px 0 0 var(--accent)}
/* Didn't post is a problem to fix, not another tab: crimson, with its count in a crimson chip (shown only when there is one) */
.side-nav a.alert,.side-nav a.alert:hover{color:var(--bad-fg)}
.side-nav a.alert .count{color:var(--bad-fg);background:var(--bad-bg);border:1px solid var(--bad-line);border-radius:var(--radius);padding:0 6px;font-weight:500}
.count{font-size:12px;font-weight:500;color:var(--muted)}
.count.you{color:var(--accent-text);font-weight:500}          /* waiting on the person signed in */
.side-foot{flex:none;border-top:1px solid var(--rule);padding:12px 10px 0;display:flex;flex-direction:column;gap:6px}
.side-co{font-weight:600;overflow-wrap:anywhere}
.side-me{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.side-links{gap:0!important}
.side-links a,.side-out{display:inline-flex;align-items:center;min-height:28px;font:inherit;font-size:13px;color:var(--link)}
.side-out{background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:.15em}
.side-out:hover{color:var(--link-hover)}
.side-switch label{display:block;font-size:12px;color:var(--muted);margin:0 0 4px}
.side-switch-row{display:flex;flex-wrap:wrap;gap:6px}
.side-switch .side-switch-row select{flex:1 1 100%}
.side-switch select{flex:1;min-width:0;background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius);padding:5px 6px;font:inherit;font-size:13px}
.side-switch .btn{padding:5px 10px;font-size:13px}
.phone-bar,.drawer-close,.drawer-scrim{display:none}
.drawer-close{align-items:center;gap:6px;background:none;border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--ink);font:inherit;font-size:13px;padding:5px 10px;cursor:pointer}
.menu-btn{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--ink);font:inherit;font-size:14px;padding:6px 12px;min-height:36px;cursor:pointer}
.menu-btn::before{content:"";width:16px;height:10px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat}
.bare-top{padding:20px 16px 0;max-width:1100px;margin:0 auto}
.page{min-width:0;display:flex;flex-direction:column}
main{flex:1;padding:24px 32px 48px}
/* a very wide screen (2026-11-01): the page stops growing at 1,700 px beside the sidebar, so a row's buttons stay near
   its payout (at 2560 they were 1,300 px away); a 1920 screen is just under it and unchanged */
.shell.has-side main,.shell.has-side .foot{max-width:1700px}
/* a short window (780 px tall or less): less air above and between the page's parts, so more of the list shows */
@media (min-width:900px) and (max-height:780px){
  main{padding-top:16px}
  .qs{margin-bottom:12px}
  .stack-lg>*+*{margin-top:16px}
}
.shell:not(.has-side) main{width:100%;max-width:1100px;margin:0 auto;padding-left:16px;padding-right:16px}
.content p{max-width:90ch}          /* the column is fluid; lines of text aren't (about 105 characters at most; 2026-11-01) */
/* a short desktop window (a laptop at 125%, about 1534 x 829 or less): the sidebar's rows tighten, as the phone menu's
   do, so every link fits without scrolling the sidebar; rows stay at least 26 px tall (2026-11-01) */
@media (min-width:900px) and (max-height:880px){
  .side{gap:8px;padding-top:14px;padding-bottom:10px}
  .side-nav{gap:4px}
  .side-group+.side-group{padding-top:4px}
  .side-eyebrow{padding:1px 10px 1px}
  .side-toggle{min-height:22px}
  .side-nav a{min-height:26px;padding:3px 10px}
  .side ul{gap:0}
  .side-foot{padding-top:8px;gap:2px;flex-direction:row;flex-wrap:wrap;column-gap:6px;align-items:baseline}
  .side-co,.side-me{display:inline}
  .side-switch{flex-basis:100%}
  .side-links{flex-basis:100%;flex-direction:row!important;flex-wrap:wrap;gap:0 14px!important}
  .side-links a,.side-out{min-height:24px}
}
/* the account at the bottom of the sidebar: everything shows, except on a short window (below) */
.side-acct-btn{display:none}
.side-acct{display:contents}
/* while there are more links beyond the sidebar's bottom or top edge, that edge fades (app.js) */
.side-nav.more{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 36px),transparent)}
.side-nav.above{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 36px);mask-image:linear-gradient(to bottom,transparent,#000 36px)}
.side-nav.above.more{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to bottom,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
/* a short laptop window (780 px tall or less: 1366 x 630, 1280 x 600 at 150%, 1024 x 700): the account is one line,
   the company's name, which opens the rest above it, so every link fits (2026-11-01). Without JavaScript nothing
   changes. At 700 px or less the links tighten too, still 24 px tall */
@media (min-width:900px) and (max-height:780px){
  .js .side-foot{position:relative;display:block;padding:6px 0 0}
  .js .side-acct-btn{display:flex;align-items:center;gap:8px;width:100%;min-height:32px;margin:0;padding:4px 10px;background:none;border:0;
    border-radius:var(--radius);color:var(--ink);font:inherit;font-weight:600;text-align:left;cursor:pointer;transition:background-color .2s var(--ease)}
  .js .side-acct-btn:hover,.js .side-foot.open .side-acct-btn{background:var(--surface)}
  .js .side-acct-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .js .side-acct-btn::after{content:"";flex:none;margin-right:3px;width:6px;height:6px;border-right:1.5px solid currentColor;
    border-top:1.5px solid currentColor;transform:translateY(2px) rotate(-45deg);opacity:.7}      /* points up: the rest opens above */
  .js .side-foot.open .side-acct-btn::after{transform:translateY(-2px) rotate(135deg)}
  .js .side-acct{display:none}
  .js .side-foot.open .side-acct{display:flex;flex-direction:column;gap:2px;position:absolute;left:0;right:0;bottom:calc(100% + 6px);z-index:5;
    padding:10px 12px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop)}
  .js .side-acct .side-co{display:block}
  .js .side-acct .side-me{display:block;font-size:13px;margin:0 0 4px}
  .js .side-acct .side-switch{margin-bottom:6px}
  .js .side-acct .side-links{flex-direction:column!important;gap:0!important}
  .js .side-acct .side-links a,.js .side-acct .side-out{min-height:30px;font-size:14px}
}
@media (min-width:900px) and (max-height:700px){
  .side-nav{gap:2px}
  .side-group+.side-group{padding-top:2px}
  .side-toggle{min-height:20px}
  .side-nav a{min-height:24px;padding:2px 10px}
}
@media (max-width:899px){
  .shell.has-side{display:block}
  .side,.side-nav{position:static;height:auto;overflow:visible}
  .side{border-right:0;border-bottom:1px solid var(--rule)}
  .js .phone-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--bg);border-bottom:1px solid var(--rule)}
  .js .side{position:fixed;top:0;bottom:0;left:0;z-index:40;width:min(300px,86vw);height:auto;overflow:hidden;border-bottom:0;border-right:1px solid var(--rule);box-shadow:var(--shadow-pop);
    transform:translateX(-100%);visibility:hidden;transition:transform .25s var(--ease),visibility 0s linear .25s}
  .js .side-nav{overflow-y:auto}
  .js.drawer-open .side{transform:none;visibility:visible;transition:transform .25s var(--ease),visibility 0s}
  .js.drawer-open{overflow:hidden}
  .js .drawer-close{display:inline-flex}
  .js .drawer-scrim:not([hidden]){display:block;position:fixed;inset:0;z-index:35;background:rgb(0 0 0 / .4)}
  /* the drawer fits a phone screen: shorter rows (still 26 px to tap), tighter groups, the account on two lines;
     on a very short screen the whole drawer scrolls, the account with it */
  .js .side{gap:10px;padding:12px 12px 10px;overflow-y:auto;overscroll-behavior:contain}
  .js .side-nav{flex:none;overflow:visible;gap:5px}
  .js .side-group+.side-group{padding-top:5px}
  .js .side-eyebrow{padding:1px 10px 2px}
  .js .side-nav a{min-height:26px;padding:3px 10px}
  .js .side ul{gap:1px}
  .js .side-foot{padding-top:8px;gap:2px;flex-direction:row;flex-wrap:wrap;column-gap:6px;align-items:baseline}
  .js .side-co,.js .side-me{display:inline}
  .js .side-switch{flex-basis:100%}
  .js .side-links{flex-basis:100%;flex-direction:row!important;flex-wrap:wrap;gap:0 16px!important}
  main{padding:20px 16px 40px}
}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:18px 20px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.kpi{font-size:24px;font-weight:600}

/* page changes (2026-11-01): a 0.15 s cross-fade between pages in browsers that can (Chrome, Edge, Safari 18.2), with
   the sidebar and phone bar held still; none at all for people who turn motion off. base.html also loads a page when
   the pointer rests on its link, so the click feels instant */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.15s;animation-timing-function:var(--ease)}
  .side{view-transition-name:sidebar}
  .phone-bar{view-transition-name:phone-bar}
}

/* a pressed button that's sending says so and can't be pressed again (app.js) */
.is-busy{cursor:progress!important}
.btn.is-busy[disabled]{opacity:.75}

/* tables (slice R4, eased 2026-11-01): one ruled style on every list. Column heads in sentence case; a 1 px rule between
   rows and no stripes; rows 44 px (36 px in a .compact table); amounts (.num) and IDs (.mono) in tabular figures, so the points
   line up; dates in the body font, whose figures are tabular too; a tint on the row under the pointer. A list framed edge to edge
   (.card.flush, .tabpanel) indents its first and last columns to the frame's 16 px. */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-family:var(--sans);font-weight:500;color:var(--muted);font-size:13px;padding:8px 10px;border-bottom:1px solid var(--rule);vertical-align:bottom}
td{padding:6px 10px;border-bottom:1px solid var(--rule);vertical-align:middle}
tbody tr{height:44px}
table.compact tbody tr{height:36px}
table.compact td{padding-top:4px;padding-bottom:4px}
tbody>tr:last-child>*{border-bottom:0}
tfoot>tr:first-child>*{border-top:1px solid var(--rule)}
tbody>tr>*{transition:background-color .2s var(--ease)}
@media (hover:hover){tbody>tr:hover>*{background:var(--surface-2)}}
/* a ticked row (Ready to approve) gets the copper selection bar, drawn inside the row so nothing moves */
tr:has(>td>.tick>input[type=checkbox]:checked)>:first-child{box-shadow:inset 2px 0 0 var(--accent)}
tbody th,tfoot th{font-family:var(--sans);font-weight:600;text-transform:none;letter-spacing:0;font-size:14px;color:var(--ink);vertical-align:middle}
.content td .btn,.content td button.btn{padding:4px 10px;font-size:13px;vertical-align:middle}     /* a row's own action: small, never copper */
td>.tick{display:inline-flex;vertical-align:middle;cursor:pointer} td>.tick>input[type=checkbox]{margin:0}
.content td select{padding:3px 6px;font-size:13px}
@media (min-width:641px){
  :is(.card.flush,.tabpanel,.flush-table) :is(th,td):first-child{padding-left:16px}
  :is(.card.flush,.tabpanel,.flush-table) :is(th,td):last-child{padding-right:16px}
}
.scroll{overflow-x:auto}
/* the Payouts list's and the Activity log's column headings stay at the top of the window as the rows scroll
   (2026-11-01). Only from 1024 px: narrower, the Payouts list can scroll sideways, and a list that scrolls sideways
   can't keep its headings in view. The rule under the headings is a shadow: a collapsed border doesn't travel */
@media (min-width:1024px){
  .tabpanel.scroll{overflow-x:clip}
  :is(table.queue,table.events) thead th{position:sticky;top:0;z-index:2;background:var(--surface);box-shadow:inset 0 -1px 0 var(--rule)}
}
.table-foot{margin:0;padding:10px 16px;border-top:1px solid var(--rule)}

.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:9px;font-size:12px;font-weight:500;line-height:1.35;white-space:nowrap;vertical-align:baseline;
  background:var(--done-bg);color:var(--done-fg)}
.pill::before{content:"";flex:none;width:6px;height:6px;border-radius:3px;background:currentColor}
.pill.ok{background:var(--ok-bg);color:var(--ok-fg)}
.pill.warn{background:var(--warn-bg);color:var(--warn-fg)}
.pill.wait{background:var(--wait-bg);color:var(--wait-fg)}
.pill.bad{background:var(--bad-bg);color:var(--bad-fg)}
.pill.done{background:var(--done-bg);color:var(--done-fg)}

/* buttons: copper fill for the main action, an ink outline for the rest, crimson for undoing or removing */
.btn,button.btn,input[type=submit],.content button[type=submit]{display:inline-block;background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);border-radius:var(--radius);padding:8px 14px;font:inherit;font-weight:600;line-height:1.3;cursor:pointer;text-decoration:none;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.btn:hover,.content button[type=submit]:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-ink)}
.btn.secondary,.content .btn.secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.secondary:hover,.content .btn.secondary:hover{background:var(--surface-2);color:var(--ink);border-color:var(--ink)}
.btn.danger,.content .btn.danger{background:transparent;color:var(--bad-fg);border-color:var(--bad-fg)}
.btn.danger:hover,.content .btn.danger:hover{background:var(--bad-bg);color:var(--bad-fg);border-color:var(--bad-fg)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn[disabled]:hover{background:var(--accent);border-color:var(--accent)}
.btn.secondary[disabled]:hover{background:transparent;border-color:var(--ink)}
.btn.danger[disabled]:hover{background:transparent;border-color:var(--bad-fg)}
/* dark text on a light fill reads thinner in dark mode; a hairline stroke restores its weight (Kinmoor's fix) */
@media (prefers-color-scheme: dark){:root:not([data-theme=light]) :is(.btn,input[type=submit],.content button[type=submit]):not(.secondary):not(.danger):not(.linkish):not(.opt){-webkit-text-stroke:.3px currentColor}}
:root[data-theme=dark] :is(.btn,input[type=submit],.content button[type=submit]):not(.secondary):not(.danger):not(.linkish):not(.opt){-webkit-text-stroke:.3px currentColor}

.msg{padding:10px 14px;border-radius:var(--radius);border:1px solid;margin-bottom:12px}
.msg.success{background:var(--ok-bg);color:var(--ok-fg);border-color:var(--ok-line)}
.msg.error{background:var(--bad-bg);color:var(--bad-fg);border-color:var(--bad-line)}
.msg.info{background:var(--wait-bg);color:var(--wait-fg);border-color:var(--wait-line)}
.msg.warning,.msg.warn{background:var(--warn-bg);color:var(--warn-fg);border-color:var(--warn-line)}
ul.problems{margin:6px 0 0;padding-left:18px;color:var(--warn-fg)}

/* forms (ours and allauth's) */
.content form p,.form-row{margin:0 0 14px}
.content label{display:block;font-weight:600;font-size:14px;margin-bottom:4px}
.content input[type=text],.content input[type=email],.content input[type=password],.content input[type=number],.content input[type=date],.content input[type=search],.content input:not([type]),.content select,.content textarea{width:100%;max-width:460px;padding:8px 10px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);color:var(--ink);font:inherit}
.content input:focus-visible,.content select:focus-visible,.content textarea:focus-visible{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
::placeholder{color:var(--muted);opacity:1}
.content .helptext,.content .help{display:block;color:var(--muted);font-size:13px;margin-top:3px}
.content ul.errorlist{list-style:none;padding:0;margin:4px 0;color:var(--bad-fg);font-size:14px}
.narrow{max-width:520px;margin:0 auto}
.content img[alt*="QR"],.content svg{background:var(--qr-bg);padding:8px;border-radius:var(--radius)}   /* a QR code reads only dark on light */
.code{font-family:var(--mono);background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--radius);padding:2px 6px}

.nowrap{white-space:nowrap}
.content .narrow a+a{margin-left:14px}
table.queue td.note{min-width:240px}
input[type=checkbox],input[type=radio]{flex:none;width:20px;height:20px;accent-color:var(--accent)}
.id,td.id{white-space:nowrap}
.pair{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.content .pair label{display:inline;margin:0}
.part{border-top:1px solid var(--line-soft);padding-top:16px}
.jump{color:var(--muted)}
ul.findings{margin:0;padding-left:20px;max-width:80ch} ul.findings li+li{margin-top:8px}
details.confirm>summary{color:var(--bad-fg);list-style:none} details.confirm>summary::-webkit-details-marker{display:none}
details.confirm[open]{max-width:320px}
.save-bar{position:sticky;bottom:0;display:flex;align-items:center;gap:12px;background:var(--surface);padding:12px 0 2px;margin-top:8px;border-top:1px solid var(--line-soft)}
.save-bar [hidden]{display:none}
.content label.check{display:flex;gap:10px;align-items:flex-start;font-weight:400} .content label.check input{margin-top:3px}
details.more-settings{margin:8px 0 18px} details.more-settings>summary{padding:8px 0} details.more-settings[open]>summary{margin-bottom:12px}
ul.docs{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:14px}
@media (min-width:641px){ table.wide-table{min-width:600px} }
.content button.linkish{min-height:32px;padding:4px 2px}
@media (max-width:640px){
  table.queue td.note{min-width:0}
  table.stacked td[data-label]::before{content:attr(data-label) ": ";color:var(--muted);font-family:var(--sans,inherit)}
  /* an amount keeps to the right of its row, its label on the left */
  table.stacked td.num{text-align:right}
  table.stacked td.num[data-label]{display:flex;justify-content:flex-end;align-items:baseline;flex-wrap:wrap}
  table.stacked td.num[data-label]::before{margin-right:auto;padding-right:12px;font-size:13px}
  table.queue td:last-child{text-align:left!important;padding-top:6px}
  table.stacked thead{position:absolute;left:-9999px}
  table.stacked tr{display:block;height:auto;padding:10px 14px;border-bottom:1px solid var(--rule)}
  table.stacked tbody tr:last-child{border-bottom:0}
  table.stacked td{display:block;border:0;padding:1px 0}
  table.stacked tbody>tr{transition:background-color .2s var(--ease)}
  table.stacked tbody>tr:hover>*{background:none}
  @media (hover:hover){table.stacked tbody>tr:hover{background:var(--surface-2)}}
  table.stacked tr:has(>td>.tick>input[type=checkbox]:checked){box-shadow:inset 2px 0 0 var(--accent)}
  table.stacked tr:has(>td>.tick>input[type=checkbox]:checked)>:first-child{box-shadow:none}
  table.stacked td:empty,table.stacked td.same{display:none}
  table.stacked td.lead{display:inline-block;vertical-align:middle;margin:0 12px 2px 0}   /* tick, date and payout on one line */
  table.stacked th[scope=row]{display:block;border:0;padding:0 0 2px}
  table.stacked th[scope=rowgroup]{display:block;border:0;padding:0}
  .card:not(.flush) table.stacked tr{padding-left:0;padding-right:0}      /* the card is padded already */
  .tiles>:last-child:nth-child(odd){grid-column:1/-1}
  table.stacked tfoot tr{border-top:1px solid var(--line)}
  h1{font-size:22px}
  .tabs a{padding:10px 10px}
  .sum .net{grid-column:1/-1}
  .card{padding:14px}
  td,th{padding:8px 6px}
}

/* footer and long-form pages */
.foot{padding:0 32px 32px} .foot a{color:var(--muted)}
@media (max-width:899px){ .foot{padding:0 16px 24px} }
/* the phone menu on a short screen (390 x 700): a little less air so the account lines fit; links stay 24px tall */
@media (max-width:899px) and (max-height:780px){
  .js .side{gap:6px;padding-top:8px}
  .js .side-nav{gap:3px}
  .js .side-group+.side-group{padding-top:3px}
  .js .side-nav a{min-height:24px;padding:2px 10px}
  .js .side-foot{padding-top:5px}
}
.shell:not(.has-side) .foot{width:100%;max-width:1100px;margin:0 auto;padding-left:16px;padding-right:16px}
/* long-form pages (privacy, terms, the failure help): Archivo throughout at a reading size, lines kept to a
   comfortable width (Josh, 2026-10-30) */
.legal{max-width:760px;font-size:15px;line-height:1.6}
.legal>*,.legal section>*{max-width:68ch}
.legal h1{max-width:none}
.legal h2{margin-top:26px;font-size:19px;line-height:1.3}
.legal h3{margin-top:16px;font-size:15px}
.legal ul,.legal ol{padding-left:22px} .legal li+li{margin-top:6px}
.legal .mono,.legal code{font-size:13.5px}
.legal ul.docs{font-size:14px}

/* payouts: queue and review (follows the review mockup) */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.tiles.five{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.tile{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:14px 16px}
.tile .big{font-size:22px;font-weight:600;margin-top:2px}
a.tile{transition:border-color .2s var(--ease)} a.tile:hover{border-color:var(--line-strong)}
a.tile.link{color:inherit;text-decoration:none}
.tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:4px;border-bottom:1px solid var(--line);scrollbar-width:thin}
.tabs a{flex:none}
/* tabs: an ink underline marks the current one; counts are neutral, copper only when they wait on you (.n.you) */
.tabs a{color:var(--muted);text-decoration:none;font-weight:500;padding:10px 12px;transition:color .2s var(--ease)}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current=page]{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--ink)}
.tabs .n{font-size:13px;font-weight:500;color:var(--muted);margin-left:6px}
.tabs .n.you{color:var(--accent-text);font-weight:500}
.tabpanel{background:var(--surface);border:1px solid var(--rule);border-top:none;border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.tabpanel table td{vertical-align:middle}
/* text-only tables (the Activity log, Recent activity, a payout's invoices): a cell that wraps starts on the same
   line as its neighbours, rather than the row being centred (2026-11-01) */
.content :is(table.events,table.wide-table) td{vertical-align:baseline}
.under{display:flex;gap:4px;padding:4px 12px 0;border-bottom:1px solid var(--line)}
.under a{color:var(--muted);text-decoration:none;font-weight:500;padding:10px 12px;border-bottom:3px solid transparent;margin-bottom:-1px}
.under a[aria-current=page]{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
.under a{border-bottom-width:2px}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-lg);overflow:hidden}
.sum>div{box-shadow:inset -1px -1px 0 var(--line-soft)}
.sum>div{background:var(--surface);padding:12px 16px}
.sum>div>:first-child{font-size:13px;font-weight:500;color:var(--muted)}
.sum .v{font-size:18px;font-weight:600;margin-top:2px}
.sum .net{background:var(--surface-2)} .sum .net>:first-child{color:var(--ink)}
/* the payout page: decisions, then the checks and Approve beside them (below them on narrow screens), then the
   rest. The page source is in that order too, so the keyboard follows what's on screen. */
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,310px);grid-template-rows:auto 1fr;
  grid-template-areas:"first rail" "rest rail";gap:20px;align-items:start}
.cols>.first{grid-area:first} .cols>.rail{grid-area:rail} .cols>.rest{grid-area:rest}
.cols>.main,.cols>.rail{min-width:0}
.cols>.main>*+*,.cols>.rail>*+*{margin-top:16px}
/* one column when the content is narrower than 880 px: a window under 1112 px, less the 232 px sidebar */
@media (max-width:1112px){ .cols{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"first" "rail" "rest";gap:16px} }
.card.flush{padding:0} .card-h{padding:14px 18px;border-bottom:1px solid var(--line-soft);display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;align-items:baseline}
.item{padding:16px 18px;border-top:1px solid var(--line-soft)} .item:first-of-type{border-top:none}
.item p{margin-top:6px;max-width:72ch}
.opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.opts form{margin:0}
/* a decision's choices: outlined; the chosen one gets the copper selection bar */
.content button.opt{font:inherit;font-size:14px;font-weight:500;border-radius:var(--radius);padding:9px 14px;min-height:44px;cursor:pointer;background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);text-align:left;transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.content button.opt:hover{border-color:var(--ink);background:var(--surface);color:var(--ink)}
.content button.opt[aria-pressed=true]{background:var(--accent-soft);color:var(--ink);border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent);font-weight:600}
.result{margin-top:10px;font-size:14px;color:var(--ok-fg)}
.content button.linkish{background:none;border:0;padding:0;color:var(--link);text-decoration:underline;text-underline-offset:.15em;cursor:pointer;font:inherit;font-size:13px;font-weight:400}
.content button.linkish:hover{background:none;color:var(--link-hover)}
.content button.opt[disabled]{cursor:default;opacity:.7}
ul.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14px}
ul.checks li{display:flex;gap:10px} ul.checks .ic{flex:none;width:18px;font-weight:700;text-align:center}
ul.checks .ok{color:var(--ok-fg)} ul.checks .bad{color:var(--bad-fg)} ul.checks .wait{color:var(--muted)}
details>summary{cursor:pointer}
.wide{width:100%}
#payout-page{overflow-anchor:none}

.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);max-width:min(560px,calc(100vw - 32px));z-index:50;
  background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:4px;box-shadow:var(--shadow-pop);font-size:14px}

/* the Ready to approve tab: what's ticked, its total, and the copper button that names the count (the screen's one
   main action); Select all and Select none beside them */
.selbar{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;padding:12px 16px;
  border-bottom:1px solid var(--rule);background:var(--surface)}
.content form .selbar-sum{margin:0}     /* the bar sits in the Ready form: no field-row margin, so it lines up with the links */
.selbar-sum strong{font-weight:600}
.selbar [hidden]{display:none}
.selbar-tools{gap:16px}
.selbar-go{margin-left:auto}

/* finding things on a list: search, filters, sorting and paging (Payouts, Activity log). One row on a wide screen;
   on a phone the search takes the full width and the rest pair up two by two. On Payouts (.one-row, 2026-11-01) the
   search box stands alone and the other filters fold behind "Filter and sort" until one is in use, so the list
   starts higher; without JavaScript they stay open. */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:600px){.tabs{flex-wrap:wrap;overflow-x:visible}.tabs .tab-x{display:none}}   /* the footer has the tab's total */
/* a list row's own links (the payout number) aren't underlined until pointed at or focused: one underline per row
   was three things competing with Quick look and Review (2026-11-01). They keep the link colour */
.content td.lead a:not(:hover):not(:focus-visible){text-decoration:none}
.content td.lead{white-space:nowrap}      /* a payout number never breaks after its "…"; the row's words wrap instead (2026-11-01) */
.look-link{display:inline-flex;align-items:center;justify-content:center;width:30px;height:28px;margin-right:6px;vertical-align:middle;color:var(--muted);border:1px solid var(--rule);border-radius:var(--radius);text-decoration:none;transition:color .2s var(--ease),border-color .2s var(--ease)}
.look-link:hover{color:var(--ink);border-color:var(--line-strong)}
.content svg.eye{background:none;padding:0;border-radius:0;flex:none}               /* not the QR code's white card */
.look-link .look-word{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tabs .tab-x{font-size:13px;font-weight:400;color:var(--muted)}
.tabs a[aria-current=page] .tab-x{color:var(--muted)}
.pill.kind{margin-right:2px}
.content td .pill{margin-block:-2px}      /* a chip in a table cell doesn't make the line taller, so its text shares the row's baseline */
@media (pointer:coarse){.row-acts .look-link{width:44px;height:44px}
  .content td.lead a{display:inline-flex;align-items:center;min-height:32px}}
.finder{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:12px 14px}
.finder .f{display:flex;flex-direction:column;min-width:0;flex:0 1 auto}
.content .finder label{font-size:13px;font-weight:500;color:var(--muted);margin:0 0 3px}
.content .finder input,.content .finder select{width:100%;max-width:none;padding:7px 9px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);color:var(--ink);font:inherit;font-size:14px;min-height:38px}
.finder .f-q{flex:1 1 240px}
.finder .f-go{flex-direction:row;align-items:center;gap:12px}
.finder label.check{display:flex;flex-direction:row;align-items:center;gap:8px;font-size:14px;color:var(--ink);min-height:38px;margin:0}
.content .finder label.check input{width:20px;min-height:0}
.finder.one-row{display:block;background:none;border:0;padding:0}
.finder-row{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.finder.one-row .f-q{flex:0 1 480px}
.finder-row .btn,.finder .f-go .btn{min-height:38px}         /* as tall as the fields beside them */
.finder .f-go a.btn{display:inline-flex;align-items:center;justify-content:center}
.finder-toggle{display:none}
.js .finder-toggle{display:inline-flex;align-items:center;gap:6px}
.finder-toggle .n{font-size:13px;font-weight:600;color:var(--accent-text)}
.finder-more{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end;margin-top:10px;padding:12px 14px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-lg)}
.js .finder-more:not(.open){display:none}
.finder-more .f-check{justify-content:flex-end}
.clearing-line{margin-top:4px}
.finding{padding:0 2px 10px}
th a.sorter{color:inherit;text-decoration:none} th a.sorter:hover{color:var(--link);text-decoration:underline}
.pager{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--line-soft)}
.pager-links{gap:14px}
.empty{padding:20px 18px} .empty>*+*{margin-top:8px}
@media (max-width:640px){
  .finder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:12px}
  .finder .f-q,.finder .f-wide,.finder .f-go{grid-column:1/-1}
  .finder .f-go .btn{flex:1}
  .finder.one-row{display:block;padding:0}
  .finder-row .f-q{flex:1 1 100%}
  .finder-row .btn{flex:1}
  .finder-more{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .finder-more .f-check{grid-column:1/-1}
}
.event-links{display:block;margin-top:2px}
/* the confirm step (2026-11-01): payouts grouped by the day they reach the bank, and a bar that keeps the count,
   total and buttons in view however long the list is */
.confirm-list{max-width:720px}
.confirm-days tr.day{height:auto}
.confirm-days tr.day>th{padding:14px 10px 6px 16px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--rule)}
.confirm-days tbody:first-of-type tr.day>th{padding-top:8px}
.confirm-days .day-sum{font-weight:400;color:var(--muted)}
.confirm-days td.lead{padding-left:16px}
.confirm-bar{position:sticky;bottom:0;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;
  margin:4px -20px -18px;padding:12px 20px;background:var(--surface);border-top:1px solid var(--rule)}
.confirm-sum{margin:0}
.confirm-go{gap:10px}
.confirm-go form{margin:0}
@media (max-width:600px){.confirm-bar{gap:8px}.confirm-go .confirm-back{display:none}}   /* "← Ready to approve" is at the top */

/* a posting that didn't post: what happened, the steps, QuickBooks' own words, and the two ways out (Try again sits
   in the checks rail, the screen's one copper button) */
.failure-h{gap:6px 10px;align-items:baseline}
.failure-sentence{font-size:16px;max-width:72ch}
ol.steps{margin:6px 0 8px;padding-left:22px;max-width:72ch} ol.steps li+li{margin-top:6px}
.said{margin-top:8px;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--radius);padding:8px 10px}
.failure-actions{gap:10px} .failure-actions form{margin:0}
.didnt-post-line{padding:0 2px 10px}
/* a payout held before posting because something else may already book it (slice D) */
.hold-found td.what{font-weight:600} .hold-found td.what .small{font-weight:400}
.hold-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.hold-choice{border:1px solid var(--rule);border-radius:var(--radius);padding:12px 14px;background:var(--surface-2);margin:0}
.hold-choice textarea{width:100%}
.other-booking-q{border:0;padding:0;margin:22px 0 0;scroll-margin-top:16px}
.other-booking-q legend{font-size:18px;font-weight:600;padding:0;margin-bottom:4px}
.other-booking-q label.opt-line{display:flex;gap:8px;align-items:flex-start;font-weight:400;margin:6px 0}
.other-booking-q label.opt-line input{margin-top:4px;flex:none}
.help-kind{scroll-margin-top:16px}
.help-kind h3{margin-top:14px}
.help-kind ol,.help-kind ul{margin:6px 0 0;padding-left:22px;max-width:72ch} .help-kind li+li{margin-top:4px}
.other-risk{color:var(--warn-fg)}

/* Home (slice R6, HomeA's layout in D's colours): the title with "as of" on the right, then "Waiting on you" as one
   framed panel (a header row with the count and the oldest date; each line a chip, what it is, and its outlined
   button), the payout tiles in mono figures, the setup line and recent activity. A line that blocks posting has a
   crimson bar on its left, one to check now an ochre bar; never copper. */
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 24px}
.page-title{min-width:0}
.page-title>*+*{margin-top:6px}
.page-asof{font-size:13px;line-height:1.5;text-align:right;max-width:62ch}
ol.w-list{list-style:none;margin:0;padding:0}
.w-item{display:grid;grid-template-columns:116px minmax(0,1fr) auto;column-gap:16px;row-gap:6px;align-items:start;padding:12px 16px;border-top:1px solid var(--rule)}
.w-item:first-child{border-top:none}
.w-item.blocks{box-shadow:inset 3px 0 0 var(--bad-line)} .w-item.alert{box-shadow:inset 3px 0 0 var(--warn-line)}
.w-item>*{grid-column:2/-1;min-width:0}
.w-item>.w-chip{grid-column:1;grid-row:1;padding-top:1px}
.w-item>.w-what{grid-column:2;grid-row:1}
.w-item>.w-fix{grid-column:3;grid-row:1}
.w-what>*+*{margin-top:3px}
.w-title{font-size:15px;font-weight:600}
.w-fix{white-space:nowrap}
ul.w-details{margin:4px 0 0;padding:0;list-style:none;max-width:80ch;color:var(--muted)} ul.w-details li+li{margin-top:1px}
ul.w-details .id{font-variant-numeric:tabular-nums}
details.w-dismiss>summary{font-size:13px;color:var(--muted);display:inline-block;padding:2px 0}
details.w-dismiss[open]>summary{color:var(--ink)}
details.w-dismiss form{margin-top:6px;max-width:460px}
.content details.w-dismiss label{font-size:13px}
.w-err{color:var(--bad-fg)}
.w-empty{padding:14px 16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.panel-foot{padding:10px 16px;border-top:1px solid var(--rule)}
ul.w-gone{list-style:none;margin:0;padding:0} ul.w-gone li{padding:8px 0;border-top:1px solid var(--rule)} ul.w-gone li:first-child{border-top:none}
.w-gone-part{border-top:1px solid var(--rule)}
.home-tiles{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.t-label,.t-sub{font-size:12px;color:var(--muted)}
.home-tiles .big{font-size:20px}                     /* the three Home tiles, one size */
.home .panel-h>a:last-child{margin-left:auto}
.setup-line>*+*{margin-top:4px}
.tight{margin-top:2px}
@media (max-width:640px){
  .page-asof{text-align:left}
  .w-item{grid-template-columns:minmax(0,1fr);padding:12px 14px}
  .w-item>*,.w-item>.w-chip,.w-item>.w-what,.w-item>.w-fix{grid-column:1;grid-row:auto}
  .w-item>.w-fix{justify-self:start}
}

/* search first (slice R3): the search box at the top of the content, and the command list it opens (Ctrl K / ⌘K).
   Without JavaScript the box is a plain search with its own button and no key hint. The list is a dialog: surface,
   1 px rule, 2 px corners; the chosen result is marked in heather (copper stays for the main action). On a phone
   it opens full width at the top. */
.qs{display:flex;gap:8px;align-items:stretch;max-width:560px;margin:0 0 20px}
.qs-wrap{position:relative;flex:1;min-width:0;display:block}
.content .qs input[type=search]{width:100%;max-width:none;min-height:40px;padding:8px 12px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--ink);font:inherit}
.content .qs input[type=search]::placeholder{color:var(--muted);opacity:1}
.qs-key{display:none;position:absolute;right:8px;top:50%;transform:translateY(-50%);pointer-events:none;font-family:var(--mono);font-size:12px;line-height:1.4;color:var(--muted);background:var(--bg);border:1px solid var(--rule);border-radius:var(--radius);padding:1px 6px}
.qs.qs-ready .qs-key{display:inline-block}
.qs.qs-ready .qs-go{display:none}
.content .qs.qs-ready input[type=search]{padding-right:68px;cursor:pointer}
.qs.qs-ready input[type=search]::-webkit-search-cancel-button{display:none}
.qs-dialog{width:min(640px,calc(100vw - 32px));max-width:none;max-height:min(560px,76dvh);margin:12vh auto auto;padding:0;border:1px solid var(--rule);border-radius:var(--radius-lg);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-pop);font-family:var(--sans);font-size:14px;overflow:hidden}
.qs-dialog[open]{display:flex;flex-direction:column;animation:qs-in .16s var(--ease)}
.qs-dialog::backdrop{background:rgb(0 0 0 / .4)}
@keyframes qs-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.qs-bar{flex:none;display:flex;gap:8px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--rule)}
.qs-bar:focus-within{box-shadow:inset 0 -2px 0 var(--focus)}
.qs-bar input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:16px;padding:8px 2px;outline:none}
.qs-bar input::placeholder{color:var(--muted);opacity:1}
.qs-close{flex:none;display:inline-flex;align-items:center;min-height:32px;background:none;border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--muted);padding:2px 8px;cursor:pointer;font:inherit}
.qs-close kbd{font-family:var(--mono);font-size:12px}
.qs-close:hover{color:var(--ink);border-color:var(--ink)}
.qs-help{flex:none;padding:8px 16px 0}
.qs-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 6px 8px}
.qs-head{padding:10px 10px 4px}
.qs-opt{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;min-height:40px;padding:8px 10px;color:var(--ink);text-decoration:none;border-radius:var(--radius)}
.qs-opt:hover{color:var(--ink)}
.qs-opt[aria-selected=true]{background:var(--link-soft);box-shadow:inset 3px 0 0 var(--link)}
.qs-date{min-width:6.6em}
.qs-id{color:var(--muted);font-size:13px}
.qs-amt{margin-left:auto;font-size:13px;text-align:right}
.qs-all{border-top:1px solid var(--rule);margin-top:6px;padding-top:6px}
.qs-all .qs-opt{color:var(--link)}
@media (max-width:640px){
  .qs{max-width:none}
  .qs-dialog{width:100%;max-width:100%;max-height:100dvh;margin:0 0 auto;border-width:0 0 1px}
}
@media (hover:none) and (pointer:coarse){.qs.qs-ready .qs-key{display:none}.content .qs.qs-ready input[type=search]{padding-right:12px}}   /* no keyboard to press it on */
@media (prefers-reduced-motion: reduce){.qs-dialog[open]{animation:none}}

/* quick look (slice R5): a payout's summary in a drawer from the right of the Payouts list, 440 px; full screen on a
   phone. Surface, 1 px rule, no copper (posting stays on the payout page). The slide is .25 s and off under reduced
   motion; the page behind is inert while it's open. Without JavaScript it opens only from a ?look= address, with
   Close as a plain link back to the list. */
td.row-acts{text-align:right;white-space:nowrap}
.look-link{font-size:13px}
.look{position:fixed;top:0;right:0;bottom:0;z-index:45;width:min(440px,100vw);display:flex;flex-direction:column;background:var(--surface);color:var(--ink);border-left:1px solid var(--rule);box-shadow:var(--shadow-pop);
  transform:translateX(100%);visibility:hidden;transition:transform .25s var(--ease),visibility 0s linear .25s}
.look.open{transform:none;visibility:visible;transition:transform .25s var(--ease),visibility 0s}
.look-scrim:not([hidden]){position:fixed;inset:0;z-index:44;background:rgb(0 0 0 / .32)}
.look-open{overflow:hidden}
.look-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px 10px 20px;border-bottom:1px solid var(--rule)}
.look-close{display:inline-flex;align-items:center;min-height:32px;padding:4px 10px;border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--ink);text-decoration:none;font-size:13px}
.look-close:hover{color:var(--ink);border-color:var(--ink)}
.look-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 20px 24px}
.look-body>*+*{margin-top:18px}
.look-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.look-head h2{font-family:var(--display);font-stretch:125%;font-size:20px;font-weight:700}
.look-head h2 .mono{font-stretch:100%;font-weight:500}
.look-facts{margin-bottom:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--rule);border-radius:var(--radius-lg);overflow:hidden}
.look-facts>div{padding:10px 14px;border-left:1px solid var(--rule);border-top:1px solid var(--rule);margin:-1px 0 0 -1px;min-width:0}
.look-facts .look-wide{grid-column:1/-1}
.look-facts dt{font-size:13px;font-weight:500;color:var(--muted)}
.look-facts dd{margin:2px 0 0;overflow-wrap:anywhere}
.look-facts .look-net{grid-column:1/-1;background:var(--surface-2)}
.look-facts .look-net dt{color:var(--ink)}
.look-facts .look-net dd{font-size:22px;font-weight:600}
.look-part>.eyebrow{margin-bottom:6px}
.look-count{text-transform:none;letter-spacing:0;font-size:12px;margin-left:6px;color:var(--ink)}
ul.look-checks{gap:6px;font-size:13px}
.look-go{border-top:1px solid var(--rule);padding-top:16px}
.look-go>*+*{margin-top:8px}
.look-wait{padding:8px 0}
@media (max-width:640px){
  .look{width:100vw;border-left:0}
  .look-body{padding:16px}
  .look-bar{padding:8px 16px}
}
@media (prefers-reduced-motion: reduce){.look,.look.open{transition:none}}

/* the payout page (slice R5, PayoutA's layout in D's colours): the title, a summary strip in mono figures (the
   amounts, then the bank date, invoices, status and "as of"), then one framed panel with what needs the person
   beside the checks rail (below it under 1112 px), then the entries. Cells in the strip and the panel's blocks are
   divided by 1 px rules; a failure or a hold gets a status bar on its left, never copper. */
.p-head>*+*{margin-top:6px}
/* what stands between the payout and posting, in one line under the title; and the review queue's Previous and Next,
   with their keys (2026-11-01). Key hints only where there's a keyboard */
.p-status{margin:0;font-size:15px;max-width:90ch}
.q-nav{gap:6px 16px;flex-wrap:wrap;justify-content:flex-end}
.key-hint{display:inline-block;min-width:1.6em;padding:0 5px;font-family:var(--mono);font-size:12px;line-height:1.5;text-align:center;
  color:var(--muted);background:var(--bg);border:1px solid var(--rule);border-radius:var(--radius);text-decoration:none}
@media (hover:none) and (pointer:coarse){.key-hint{display:none}}
.strip{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-lg);overflow:hidden}
.strip-money,.strip-facts{display:flex;flex-wrap:wrap;margin:0}
.strip-money>div,.strip-facts>div{flex:1 1 150px;min-width:0;padding:12px 16px;border-left:1px solid var(--rule);border-top:1px solid var(--rule);margin:-1px 0 0 -1px}
.strip-facts{border-top:1px solid var(--rule)}
.strip-facts>div{padding:9px 16px}
.strip .l,.strip dt{font-size:13px;font-weight:500;color:var(--muted)}
.strip .v{font-size:18px;font-weight:600;margin-top:2px;white-space:nowrap}
.strip .net{flex-basis:180px;background:var(--surface-2)} .strip .net .l{color:var(--ink)}
.strip dd{margin:3px 0 0;font-size:14px}
.strip-facts .strip-asof{flex:2 1 300px}
.strip-asof dd{font-size:12px;color:var(--muted);line-height:1.5}
.panel{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-lg)}
.pblock+.pblock{border-top:1px solid var(--rule)}
.panel-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;padding:12px 16px;border-bottom:1px solid var(--rule)}
.panel-h h2{font-size:16px}
.panel-h>.mono{margin-left:auto}
.panel-b{padding:14px 16px}
.panel .item{padding:14px 16px}
.panel-h+.item{border-top:0}
.item.bulk{background:var(--surface-2)}
.item.decided{padding-top:10px;padding-bottom:10px}
.kind-group+.kind-group{border-top:1px solid var(--rule)}
.item.kind-h .row{gap:10px}
.item.compact{padding-top:8px;padding-bottom:8px;display:flex;flex-wrap:wrap;align-items:center;column-gap:16px;row-gap:6px}
.item.compact>.row{flex-direction:column;align-items:flex-start;gap:0;min-width:92px;font-size:13px}
.item.compact>p{flex-basis:100%;margin:0;order:3}
.item.compact .opts{margin-top:0;gap:6px}
.content .item.compact button.opt{min-height:34px;padding:5px 10px;font-size:13px}
@media (pointer:coarse){.content .item.compact button.opt{min-height:44px}}   /* full-size targets on touch */
.pblock.failure:not(.handled),.pblock.hold{box-shadow:inset 3px 0 0 var(--bad-line)}
.pblock.hold{box-shadow:inset 3px 0 0 var(--warn-line)}
.rail-box{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:16px}
.rail-box h2{font-size:16px} .rail-box h3{font-size:15px}
.rail-go{border-top:1px solid var(--rule);padding-top:14px}
.card.slim{padding-top:12px;padding-bottom:12px}
@media (max-width:640px){
  .strip .net{flex-basis:100%}
  .strip-money>div,.strip-facts>div{flex-basis:130px;padding:10px 12px}
  .strip-facts .strip-asof{flex-basis:100%}
  .panel-h,.panel-b,.panel .item{padding-left:14px;padding-right:14px}
  .rail-box{padding:14px}
}

/* slice R6: the rest. Narrow measures, the sign-in pages, error pages and the Light / Dark / Match device choice. */
.measure{max-width:720px}
fieldset.bare{border:0;padding:0;margin:0;min-width:0}
.choices{display:flex;flex-direction:column;gap:6px;max-width:460px}
.content label.choice{align-items:center;gap:12px;min-height:44px;padding:8px 12px;margin:0;border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);cursor:pointer;transition:border-color .2s var(--ease)}
.content label.choice:hover{border-color:var(--line-strong)}
.content label.choice input{margin:0}
.content label.choice:has(input:checked){border-color:var(--ink);box-shadow:inset 2px 0 0 var(--ink)}
.content label.choice strong{font-weight:600;margin-right:4px}
/* sign-in, password and two-step pages: one narrow card; signed out, the wordmark above it */
.entrance{max-width:440px;margin:0 auto;padding-top:8px}
.entrance:not(.signed-in){padding-top:32px}
.entrance.signed-in{margin:0}
.entrance-mark{display:flex;width:max-content;margin:2px auto 4px}     /* heads the card, centred (Josh, 2026-11-01) */
.entrance-card .entrance-mark{font-size:22px;line-height:1.15}         /* the sign-in page's h1 too: the wordmark's size, not a heading's */
.entrance-lede{text-align:center}
.entrance-card{padding:24px 24px 22px}
.entrance-card h1{font-size:24px;text-align:center}       /* under the centred wordmark; the text and fields below stay left */
.entrance-card .entrance-mark+h1{margin-top:18px}
.entrance-card form>.form-row{margin:0}
.entrance-card .content input,.entrance .content input{max-width:none}
.entrance input[type=email],.entrance input[type=password],.entrance input[type=text],.entrance input:not([type]){max-width:none!important}
.btn.wide,.content button.btn.wide{width:100%;text-align:center;padding-top:10px;padding-bottom:10px}
.entrance .linkish{font-size:13px}
.entrance ol.steps{margin:0}
.entrance .label{font-weight:600;margin-bottom:4px}
.code.secret{display:block;width:max-content;max-width:100%;font-size:14px;letter-spacing:.06em;padding:6px 10px;overflow-wrap:anywhere;user-select:all}
img.qr{display:block;width:180px;height:180px}
/* error pages: what happened in mono capitals, then a sentence and the way out */
.problem{max-width:640px}
.problem .eyebrow{margin-bottom:-4px}
@media (max-width:640px){ .entrance-card{padding:18px 16px} .entrance-mark{margin:0 auto 2px} }
.content select.auto,.content input.auto{width:auto}
.content input.grow{flex:1;min-width:200px;max-width:none;width:auto}
.shell:has(.entrance:not(.signed-in)) .foot{max-width:472px;text-align:center}     /* signed out, the footer sits centred under the card */
.entrance-card form.stack>.form-row+.form-row{margin-top:16px}
pre,code,kbd,samp,textarea.codes{font-family:var(--mono)}       /* the diagnosis file, keys, the two-step key: Plex Mono, not the browser's */

.content input[type=file].drop{display:block;width:100%;padding:28px 16px;border:1px dashed var(--line-strong);border-radius:var(--radius);background:var(--surface-2);cursor:pointer}

/* touch screens (2026-11-01): buttons and fields 44 px tall, the size phones' own guidelines ask for; checkboxes and
   round choices 24 px, a Ready row's box with a 44 px area to tap; fields in 16 px type, so a phone doesn't zoom in
   when one is tapped; "Take off the list" and the other openers 44 px tall; All payouts on a payout 44 px */
@media (pointer:coarse){
  .btn,button.btn,.content button[type=submit]:not(.linkish):not(.opt),.menu-btn{min-height:44px}
  a.btn{display:inline-flex;align-items:center;justify-content:center}
  .content :is(input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=search],input:not([type]),select),
  .content .finder :is(input,select),.content .qs input[type=search]{min-height:44px;font-size:16px}
  .content textarea{font-size:16px}
  .content :is(input[type=checkbox],input[type=radio]),.content .finder label.check input{width:24px;height:24px;min-height:0}
  td>.tick{margin:-10px;padding:10px}
  .content button.linkish{min-height:44px}
  .content details>summary,details.w-dismiss>summary{padding-block:12px}
  .p-nav>a{display:inline-flex;align-items:center;min-height:44px}
  .finder-row .btn,.finder .f-go .btn{min-height:44px}
  .tabs a,.under a{padding-top:12px;padding-bottom:12px}
  .panel-h>a{padding-block:12px;margin-block:-12px}          /* a bigger area to tap; the heading's line doesn't move */
  .phone-bar .wordmark{padding-block:12px;margin-block:-12px}
}
/* a phone: Previous and Next on a payout are two buttons side by side under "5 of 26 needing review", their words
   shortened to fit ("← Previous: …2328") */
@media (max-width:640px){
  .p-nav{flex-direction:column;align-items:stretch;gap:4px;margin-bottom:8px}
  .q-nav{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .q-nav>.muted{grid-column:1/-1;grid-row:1;text-align:center}
  .q-nav a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:6px 10px;border:1px solid var(--line-strong);
    border-radius:var(--radius);color:var(--ink);font-weight:600;text-decoration:none;text-align:center}
  .q-nav a:only-of-type{grid-column:1/-1}
  .q-long{display:none}
}
.rule-code{display:block}            /* Booking rules: Shopify's own name for a transaction, on its own line under ours */
/* the Payouts list's header: the buttons, and under them the state of what they started ("Prepare payouts · Queued"),
   so the status no longer takes a row of its own (2026-11-01) */
.head-acts{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.head-acts .prep-status{text-align:right}
.head-acts .prep-status:empty{display:none}
@media (max-width:640px){ .head-acts{align-items:flex-start} .head-acts .prep-status{text-align:left} }