/* 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:2px; --ease:cubic-bezier(.2,.7,.2,1);
  --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); each pair's contrast is the same or higher than before */
:root{
  --d-bg:#0B0B0B; --d-surface:#151515; --d-surface-2:#1C1C1C; --d-ink:#EDEDED; --d-muted:#A6A6A6;
  --d-rule:#2F2F2F; --d-line-strong:#6E6E6E;
  --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:#222222; --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}
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}
.mono{font-family:var(--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(--mono);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;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}
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 small{font-family:var(--mono);font-weight:400;font-stretch:100%;font-size:12px;letter-spacing:0;text-transform:none;color:var(--muted)}
.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-family:var(--mono);font-size:12px;font-weight:400;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}
.shell:not(.has-side) main{width:100%;max-width:1100px;margin:0 auto;padding-left:16px;padding-right:16px}
.content :is(h1,h2)~p{max-width:90ch}                        /* the column is fluid; the lines under headings aren't */
@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);padding:18px 20px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.kpi{font-size:24px;font-weight:600}

/* tables (slice R4): one ruled style on every list. Mono capitals for the column heads; a 1 px rule between rows and
   no stripes; rows 40 px (36 px in a .compact table); amounts (.num) in mono on the right with tabular figures, so
   the points line up; dates and IDs in mono (.mono); 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(--mono);font-weight:500;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em;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:40px}
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>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>input[type=checkbox]{margin:0;vertical-align:middle}
.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}
.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;background:var(--surface);padding:12px 0 2px;margin-top:8px;border-top:1px solid var(--line-soft)}
.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>input[type=checkbox]:checked){box-shadow:inset 2px 0 0 var(--accent)}
  table.stacked tr:has(>td>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}
  .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);padding:14px 16px}
.tile .big{font-size:22px;font-weight:600;margin-top:2px}
.tile .big.mono{font-weight:500;letter-spacing:-.02em}
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-family:var(--mono);font-size:12px;font-weight:400;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) var(--radius)}
.tabpanel table td{vertical-align:middle}
.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-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
th.num{font-family:var(--mono)}
.sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);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-family:var(--mono);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.sum .v{font-family:var(--mono);font-size:18px;font-weight:500;letter-spacing:-.02em;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)}
.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. */
.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}
.finder-fold>summary{display:none}
@media (max-width:600px){.finder-fold>summary{display:inline-flex;margin-bottom:8px;list-style:none}.finder-fold>summary::-webkit-details-marker{display:none}
  .tabs{flex-wrap:wrap;overflow-x:visible}}
@media (pointer:coarse){.row-acts .look-link{display:inline-flex;align-items:center;min-height:44px;padding:0 8px}.content td .btn{min-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);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}
.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 .f-later{order:1}             /* month and order pair up first, then the two dates */
}
.event-links{display:block;margin-top:2px}

/* 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:12px;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-family:var(--mono);font-size:12px}
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)}
.tile .big.mono{font-size:20px}
.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);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;margin-right:10px}
.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);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-family:var(--mono);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;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:500;letter-spacing:-.02em}
.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}
.p-head h1 .mono{font-stretch:100%;font-weight:500}
.strip{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);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-family:var(--mono);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.strip .v{font-family:var(--mono);font-size:18px;font-weight:500;letter-spacing:-.02em;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)}
.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);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.signed-in{margin:0}
.entrance-mark{display:flex;width:max-content;margin:12px 0 22px 0;font-size:20px}
.entrance-card{padding:24px 24px 22px}
.entrance-card h1{font-size:24px}
.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:4px 0 16px} }
.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}     /* signed out, the footer lines up with the card */
.entrance-card form.stack>.form-row+.form-row{margin-top:16px}
pre,code,kbd,samp{font-family:var(--mono)}                         /* the diagnosis file and keys: 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}