/* Workspace redesign (founder, 26 Oct 2026: "nothing anybody can have; it doesn't feel 2026"), from the prototype in
   ~/Developer/Carreh/business-workspace-redesign/. One layer over every workspace screen (company, employee, agency,
   client portal, application form): the same screens and the same information, a new look. Warm paper, serif page
   titles, one button family, journeys drawn as a line with labelled stops, statuses as coloured words. No pills, dots or
   departure-board type. Loaded last, after dark.css. Also the design audit's layout fixes (AUDIT.md, 26 Oct 2026). */
:root{
  --canvas:#F6F4EF;--sidebar:#F6F4EF;--surface:#FFFFFF;--surface-subtle:#F8F6F1;--surface-hover:#EFECE4;
  --text:#15202B;--text-secondary:#46525E;--text-muted:#6B7682;--border:#E3DED3;--border-strong:#D2CCBF;--border-control:#B9B2A4;
  --primary:#1E4D7A;--on-primary:#FFFFFF;--accent:#1E4D7A;--accent-soft:#E6EDF4;--accent-text:#163A5C;--focus:#1E4D7A;
  --success:#1D6B45;--success-bg:transparent;--warning:#8A5A00;--warning-bg:transparent;--danger:#A3341F;--danger-bg:transparent;--info:#1E4D7A;--info-bg:transparent;
  --chart:#1E4D7A;--chart-soft:#E6EDF4;--chart-secondary:#9DB7CF;
  --radius-sm:9px;--radius-md:12px;--radius-lg:14px;--radius-xl:16px;--control-height:40px;
  --shadow-sm:0 1px 0 rgba(21,32,43,.04),0 8px 24px -16px rgba(21,32,43,.18);--shadow-hover:0 1px 0 rgba(21,32,43,.05),0 12px 28px -16px rgba(21,32,43,.22);
  --serif:"Iowan Old Style","Charter","Palatino Linotype",Palatino,Georgia,serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --canvas:#12171C;--sidebar:#12171C;--surface:#1A2229;--surface-subtle:#182027;--surface-hover:#202A33;
  --text:#E7ECF0;--text-secondary:#B4BFC8;--text-muted:#8C99A4;--border:#2A343D;--border-strong:#36424C;--border-control:#55636F;
  --primary:#8DB8E0;--on-primary:#0E1A25;--accent:#8DB8E0;--accent-soft:#1C2B38;--accent-text:#BBD5EE;--focus:#8DB8E0;
  --success:#79C79D;--warning:#E3B65C;--danger:#F08B76;--info:#8DB8E0;--chart:#8DB8E0;--chart-soft:#1C2B38;--chart-secondary:#4E7C9B;
  --shadow-sm:0 1px 0 rgba(0,0,0,.3),0 10px 28px -18px rgba(0,0,0,.7);
}}
[data-theme="dark"]{--canvas:#12171C;--sidebar:#12171C;--surface:#1A2229;--surface-subtle:#182027;--surface-hover:#202A33;--text:#E7ECF0;--text-secondary:#B4BFC8;--text-muted:#8C99A4;--border:#2A343D;--border-strong:#36424C;--primary:#8DB8E0;--on-primary:#0E1A25;--accent-soft:#1C2B38;--accent-text:#BBD5EE;--success:#79C79D;--warning:#E3B65C;--danger:#F08B76}

/* ---------- Page and rail ---------- */
html body.cfb-app{background:var(--canvas);color:var(--text)}
body.cfb-app .acct-team:has(>.ws-rail){background:var(--canvas)!important}
body.cfb-app .ws-rail{background:var(--canvas)!important;border-inline-end:1px solid var(--border)!important}
body.cfb-app .ws-link{border-radius:8px!important;color:var(--text-secondary)!important}
body.cfb-app .ws-link:hover{background:var(--surface-hover)!important;color:var(--text)!important}
body.cfb-app .ws-link.active{background:var(--surface)!important;color:var(--text)!important;box-shadow:inset 2px 0 0 var(--primary)!important;font-weight:600}
html[dir=rtl] body.cfb-app .ws-link.active{box-shadow:inset -2px 0 0 var(--primary)!important}
body.cfb-app .ws-company{background:var(--surface)!important;border:1px solid var(--border)!important;color:var(--text)!important;border-radius:var(--radius-sm)!important}
body.cfb-app .ws-company .ws-test{text-transform:none!important;letter-spacing:0!important;font-size:12px!important;color:var(--warning)!important}
body.cfb-app .ws-top.acct-top{background:color-mix(in srgb,var(--canvas) 88%,transparent)!important;border-bottom:1px solid var(--border)!important;backdrop-filter:blur(10px)}

/* ---------- Type: one scale ---------- */
body.cfb-app .acct-team h1,body.cfb-app .pt-workspace h1,body.cfb-app .apl h1{font-family:var(--serif)!important;font-weight:600!important;font-size:clamp(28px,3.6vw,38px)!important;line-height:1.12!important;letter-spacing:-.01em!important}
body.cfb-app .acct-team .acct-card h2,body.cfb-app .pt-workspace h2,body.cfb-app .ws-panel-title h2{font:600 18px/1.3 var(--font-sans)!important;letter-spacing:-.005em}
body.cfb-app .trav-sub{font:600 15px/1.35 var(--font-sans)!important}
body.cfb-app .ws-eyebrow,body.cfb-app .ws-section-title{text-transform:none!important;letter-spacing:0!important;font-size:13px!important;font-weight:600!important;color:var(--text-muted)!important}
body.cfb-app .sub,body.cfb-app .footer-note{color:var(--text-muted)}

/* ---------- Surfaces ---------- */
body.cfb-app .acct-card,body.cfb-app .ws-panel,body.cfb-app .ws-stat,body.cfb-app .ws-tool{background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:var(--radius-lg)!important;box-shadow:var(--shadow-sm)!important}
body.cfb-app .ws-stat:hover,body.cfb-app .ws-tool:hover{box-shadow:var(--shadow-hover)!important;border-color:var(--border-strong)!important}
body.cfb-app .ws-stat strong,body.cfb-app .ws-stats strong{font-variant-numeric:tabular-nums}
body.cfb-app .ag-briefing{background:var(--surface)!important;border:1px solid var(--border)!important;border-inline-start:3px solid var(--primary)!important}
body.cfb-app .acct-alert{border-radius:var(--radius-sm)}
body.cfb-app .acct-confirm{border-radius:var(--radius-sm)}

/* ---------- Buttons: one family, one height (audit 10) ---------- */
body.cfb-app .button,body.cfb-app .site-cta{min-height:40px!important;border-radius:10px!important;font-weight:600!important;padding:8px 16px!important}
body.cfb-app .button.trav-small{min-height:36px!important;padding:6px 12px!important}
body.cfb-app .button.acct-primary{background:var(--primary)!important;border-color:var(--primary)!important;color:var(--on-primary)!important}
body.cfb-app .button.secondary{background:var(--surface)!important;border:1px solid var(--border-strong)!important;color:var(--text)!important}
body.cfb-app .button.secondary:hover{background:var(--surface-hover)!important}
body.cfb-app button.acct-link{min-height:36px;padding:0 4px;font-weight:600;text-decoration:none!important;color:var(--primary)}
body.cfb-app button.acct-link:hover{text-decoration:underline!important;text-underline-offset:3px}

/* ---------- Statuses: coloured words (the no-pills rule) ---------- */
body.cfb-app .trav-status,body.cfb-app .badge,body.cfb-app .sa-badge{font-size:13.5px!important;font-weight:600!important}
body.cfb-app .trav-approved,body.cfb-app .badge.approved,body.cfb-app .badge.paid,body.cfb-app .badge.active{color:var(--success)!important}
body.cfb-app .trav-submitted,body.cfb-app .badge.pending,body.cfb-app .badge.submitted{color:var(--warning)!important}

/* ---------- Journeys: a line with labelled stops (cases, applications, the portal) (audit 6) ---------- */
html body.cfb-app .ag-steps{display:flex!important;flex-wrap:nowrap!important;gap:0!important;margin:16px 0 8px!important;padding:0!important;list-style:none;overflow-x:auto;scrollbar-width:none}
html body.cfb-app .ag-steps li{flex:1 1 0!important;min-width:96px!important;position:relative;padding:14px 10px 0 0!important;border:0!important;border-top:3px solid var(--border)!important;border-radius:0!important;background:none!important;font-size:13px!important;color:var(--text-muted)!important;font-weight:500!important}
html body.cfb-app .ag-steps li::before{content:none!important}
html body.cfb-app .ag-steps li::after{content:""!important;position:absolute;left:0;top:-8px;width:3px;height:13px;background:var(--border-strong);margin:0!important}
html body.cfb-app .ag-steps li.done{border-top-color:var(--primary)!important;color:var(--text-secondary)!important}
html body.cfb-app .ag-steps li.done::after{background:var(--primary)}
html body.cfb-app .ag-steps li.now{border-top-color:var(--primary)!important;color:var(--text)!important;font-weight:700!important}
html body.cfb-app .ag-steps li.now::after{background:var(--primary);height:17px;top:-10px;width:4px}
@media(max-width:680px){
  html body.cfb-app .ag-steps{flex-direction:column!important;overflow:visible}
  html body.cfb-app .ag-steps li{min-width:0!important;padding:6px 0 10px 18px!important;border-top:0!important;border-inline-start:3px solid var(--border)!important}
  html body.cfb-app .ag-steps li.done,html body.cfb-app .ag-steps li.now{border-inline-start-color:var(--primary)!important}
  html body.cfb-app .ag-steps li::after{left:-8px;top:10px;width:13px;height:3px}
  html body.cfb-app .ag-steps li.now::after{left:-10px;top:9px;width:17px;height:4px}
}
/* The portal's timeline: a plain line, no dots. */
body.cfb-app .pt-timeline{border-inline-start:2px solid var(--border);padding-inline-start:16px}

/* ---------- Tables scroll on phones, with a hint (audit 7, 13) ---------- */
body.cfb-app .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(to right,var(--surface) 30%,transparent),linear-gradient(to left,var(--surface) 30%,transparent) right,radial-gradient(farthest-side at 100% 50%,rgba(21,32,43,.14),transparent);background-repeat:no-repeat;background-size:40px 100%,40px 100%,14px 100%;background-attachment:local,local,scroll;background-position:left,right,right}
body.cfb-app .acct-card:has(.table-wrap),body.cfb-app .acct-card:has(.acct-table){overflow:visible!important}
@media(max-width:680px){body.cfb-app .acct-card>.acct-table{display:block;overflow-x:auto}}
body.cfb-app .acct-table th{font-size:12.5px;font-weight:600;color:var(--text-muted);text-transform:none;letter-spacing:0}
body.cfb-app .acct-table td,body.cfb-app .acct-table th{border-color:var(--border)!important}

/* ---------- Tabs that run off the edge scroll, with snap (audit 6) ---------- */
body.cfb-app .ag-tabs,body.cfb-app .trav-tabs{overflow-x:auto;flex-wrap:nowrap!important;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 85%,transparent)}
body.cfb-app .ag-tabs>*,body.cfb-app .trav-tabs>*{flex:0 0 auto;scroll-snap-align:start}

/* ---------- Mobile header: a smaller language select (audit 5) ---------- */
@media(max-width:800px){
  body.cfb-app .ws-top .ws-language select,body.cfb-app .ws-top .cfb-lang select{font-size:13px!important;min-height:32px!important;max-width:118px;padding:4px 8px!important}
}

/* ---------- Agency dashboard period picker: one compact row (audit 4) ---------- */
body.cfb-app .ag-presets{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;gap:6px!important}
body.cfb-app .ag-presets .button,body.cfb-app .ag-presets>*{flex:0 0 auto!important;width:auto!important}

/* ---------- Client portal columns line up (audit 1) ---------- */
body.cfb-app.cfb-portal .pt-workspace>.acct-card.acct-wide{max-width:none!important;margin-inline:0!important}
body.cfb-app .pt-workspace{align-items:start}

/* ---------- Case checklist rows balanced (audit 17) ---------- */
body.cfb-app .ag-check select{font-size:14px;min-height:36px}
body.cfb-app .ag-check{align-items:center}

/* ---------- Empty states in body size, not headline size (audit 18) ---------- */
body.cfb-app .ws-empty{font-size:14.5px;color:var(--text-muted)}

/* The page head is not a card (it never had a frame): title, subtitle and status sit on the paper. Without this the
   card frame above drew a border tight around them (founder's screenshot, 27 Oct 2026). */
body.cfb-app .acct-team:has(>.ws-rail)>section:first-of-type:has(h1):not(:has(table,form,.acct-table,.ui-table)){background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important}
/* A first section that also holds a table or a form stays a card, with its padding. */
body.cfb-app .acct-team:has(>.ws-rail)>section:first-of-type:has(h1):has(table,form,.acct-table,.ui-table){padding:24px!important}
@media(max-width:680px){body.cfb-app .acct-team:has(>.ws-rail)>section:first-of-type:has(h1):has(table,form,.acct-table,.ui-table){padding:18px 16px!important}}

/* Found by the layout scan of 31 screens (27 Oct 2026). */
/* The period presets stay one row on phones (a phone rule turned every form row into a column). */
@media(max-width:680px){body.cfb-app .form-row.ag-presets{flex-direction:row!important;align-items:center!important}body.cfb-app .form-row.ag-presets>*{width:auto!important}}
/* Figures: the number under its label, no empty block below it. */
body.cfb-app .trav-figures>*{min-height:0!important}
body.cfb-app .trav-figures strong{font-size:26px;line-height:1.15;font-variant-numeric:tabular-nums}
/* The search button on a phone: a magnifier, not a keyboard shortcut a phone cannot press. */
@media(max-width:800px){
  body.cfb-app .ui-command-trigger kbd{display:none!important}
  body.cfb-app .ui-command-trigger{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
  body.cfb-app .ui-command-trigger::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat}
}
/* Touch sizes: the menu button and the sortable table headers. */
body.cfb-app .ws-menu-toggle{min-width:40px;min-height:40px}
body.cfb-app .ui-table-sort{min-height:28px}
/* Every table inside a card scrolls sideways on a phone instead of being cut at the card edge. */
@media(max-width:680px){
  body.cfb-app .acct-card table,body.cfb-app .ws-panel table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  body.cfb-app .acct-card table td,body.cfb-app .acct-card table th{white-space:nowrap}
  body.cfb-app .acct-card table td:first-child{white-space:normal;min-width:140px}
}
/* Long words in a figure ("None yet") wrap inside their card; the page addresses wrap rather than run off. */
body.cfb-app .trav-figures strong{overflow-wrap:anywhere}
body.cfb-app .alp-top .acct-table td{white-space:normal!important;word-break:break-all}
/* Every figure's number the same size, whatever element holds it. */
body.cfb-app .trav-figures :is(strong,b){font-size:24px!important;line-height:1.15!important;font-weight:650!important}