/* Shared screen styling. Contract pages retain their own measured print layout. */
:root { color-scheme:light; --line:#d9e1e7; --bg:#f3f5f7; --sunken:#edf1f4; --muted:#586a79; --radius:14px; --accent:#b94b17; }
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--line:#30404d;--bg:#0e171e;--sunken:#192631;--muted:#a1b0bc;--accent:#ff915f}}
:root[data-theme="dark"]{color-scheme:dark;--line:#30404d;--bg:#0e171e;--sunken:#192631;--muted:#a1b0bc;--accent:#ff915f}
body{font-size:15px;line-height:1.55}
/* One person per line keeps each day's crew readable while scheduling. */
.chart td .chip{display:block;width:fit-content;max-width:100%;margin:0 0 4px;white-space:normal;overflow-wrap:anywhere}
.schedule-manager-input{display:flex;align-items:end;gap:6px;margin-bottom:8px}
.schedule-manager-input label{display:grid;gap:5px;min-width:0;flex:1}
.schedule-manager-input input{width:100%;min-width:0}
.schedule-manager-input button{flex-shrink:0}
.crewpick .cp-heading{position:sticky;top:-18px;z-index:2;display:flex;align-items:start;gap:12px;background:var(--card);padding:8px 0 10px}
.crewpick .cp-heading>div{flex:1;min-width:0}
.crewpick .cp-heading h2{overflow-wrap:anywhere}
.crewpick .cp-close{flex-shrink:0;font-size:25px;line-height:1;width:42px;height:42px;padding:0}
.crewpick .cp-go{position:sticky;bottom:-18px;background:var(--card);padding:12px 0 5px;z-index:1}
.cp-discard{border:1px solid var(--warn);border-radius:8px;padding:12px;margin-top:14px}
.cp-discard p{margin:0 0 10px}
.cp-discard button{margin:3px}
button,input,select,textarea{font-family:inherit}
button{font-size:14px;border-radius:8px;min-height:42px;transition:background .12s,border-color .12s,box-shadow .12s}
button:not(:disabled):hover{border-color:color-mix(in srgb,var(--muted) 55%,var(--line))}
button.primary:not(:disabled):hover{background:color-mix(in srgb,var(--accent) 88%,var(--ink));border-color:transparent}
button:disabled{cursor:not-allowed}
input,select,textarea{border-radius:8px;min-height:43px;line-height:1.45}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.85}
input[type=checkbox],input[type=radio]{min-height:0;width:18px;height:18px;accent-color:var(--accent);flex-shrink:0}
label,.workspace-on label{font-family:inherit;text-transform:none;letter-spacing:normal;font-size:13px;font-weight:500;color:var(--muted)}
small,.tiny{line-height:1.5}
.workspace-on #app{padding:28px 0 44px;width:calc(100% - 64px);max-width:1320px}
.workspace-on #app.roomy{max-width:none}
.workspace-on #bar{padding:14px 24px;gap:15px;box-shadow:0 2px 12px #10212c0b}
.workspace-on #who{font-family:inherit;font-size:12px;letter-spacing:normal;max-width:210px}
.workspace-on #signout{font-size:12px;min-height:38px;padding:8px 13px}
#workspace-nav{gap:4px}
#workspace-nav>button{padding:11px 12px;min-height:42px;font-size:13px;font-weight:500;border-radius:7px}
#workspace-nav>button[aria-current]{box-shadow:none;background:#ffffff1e;color:#fff}
#workspace-nav>button[aria-current]::after{content:'';width:5px;height:5px;border-radius:50%;background:#ff9358;margin-left:1px}
#workspace-menu{display:none}
.workspace-on .card{padding:23px;border-color:var(--line);box-shadow:0 2px 4px #14202b03;margin-bottom:20px}
.workspace-on .card h2{font-size:17px;letter-spacing:-.02em}
.workspace-on .card>p.muted{font-size:13px;line-height:1.65}
.workspace-heading{gap:20px;margin-bottom:24px}
.workspace-heading h1{font-size:29px;line-height:1.2;letter-spacing:-.035em;overflow-wrap:anywhere}
.workspace-heading .eyebrow{margin:0 0 9px;font-size:10px;letter-spacing:.09em}
.workspace-heading p{margin:9px 0 0;font-size:14px}
.workspace-heading>button:not(.primary){background:var(--card);border-color:var(--line);color:var(--ink)}
.workspace-actions>button:first-child:not(.primary){background:var(--card);color:var(--ink);border-color:var(--line)}
.workspace-context{padding:8px 24px;font-size:12px;gap:14px}
.workspace-context button{min-height:30px}
.workspace-context [data-clear-job]{font-size:11px;text-decoration:underline;text-underline-offset:3px}
.role-views{padding:7px 24px;gap:10px;background:var(--bg);font-size:11px}
.role-views label{font-size:11px}.role-views select{font-size:12px;min-height:33px;padding:5px 9px;max-width:190px}.role-views span{font-size:11px;min-width:0}
.work-counts{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:22px}
.work-counts>button{padding:16px 18px;min-height:80px;box-shadow:none}
.work-counts strong{font:600 27px Archivo,system-ui,sans-serif;flex-shrink:0}
.work-counts span{font-size:12px;line-height:1.45;margin:0;color:var(--muted)}
.workspace-columns{gap:20px}
/* A crew member's week, read across at a glance: seven days in a row on a
   phone, the figures lined up under the day names. */
/* The people first, then the actual days underneath, stepped in so the two
   read as a list of somebody's work rather than a flat run of rows. */
.submission-person{border-bottom:0!important;padding-bottom:4px!important}
.submission-item{padding:9px 0 9px 18px!important;border-bottom:1px solid var(--line)}
.submission-item:last-child{border-bottom:0}
.submission-item strong{font-weight:400}
.crew-week-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:10px 0 4px}
.crew-week-day{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px;border-radius:9px;background:var(--card,#fff)}
.crew-week-day span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.crew-week-day strong{font-size:13px;font-variant-numeric:tabular-nums}
.crew-week-day.is-blank strong{color:var(--muted);font-weight:400}
.crew-week-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:10px 0 2px;font-size:15px}
.crew-week-total strong{font-size:20px;font-variant-numeric:tabular-nums}
.workspace-row{padding:14px 0!important;font-size:14px;line-height:1.4;gap:14px}
.workspace-row span span{font-size:12px;line-height:1.5;margin-top:5px}
.workspace-row>span:last-child:not(:first-child){font-size:12px;color:var(--muted)}
.workspace-row strong{font-weight:500}
.workspace-row>button{font-size:12px;min-height:36px;padding:7px 11px}
.draft-row{gap:10px}.draft-row>button:last-child:not(:first-child){font-size:12px;min-height:36px;padding:7px 10px}
.draft-row>.workspace-row>span:last-child{font-size:11px;white-space:nowrap}
.today-job-details{background:var(--sunken);border-radius:8px;padding:10px 12px;margin:12px 0!important}
.today-job-details b{font-weight:500;color:var(--ink)}
#receipt-notifications .workspace-heading{margin-bottom:5px}#receipt-notifications .workspace-row:last-child{padding-bottom:0!important}
#receipt-notifications{border-left:3px solid var(--accent)}
.home-integration{margin-top:4px}
.home-integration>details>summary{display:flex;align-items:center;gap:14px;cursor:pointer;list-style:none;min-height:36px}
.home-integration>details>summary::-webkit-details-marker{display:none}
.home-integration>details>summary>strong{flex:1;font-size:14px;font-weight:500}
.home-integration>details>summary::after{content:'⌄';font-size:17px;color:var(--muted)}
.home-integration>details[open]>summary{margin-bottom:15px}
.home-integration p{font-size:12px}
.workflow-steps{gap:8px 18px;margin:16px 0 22px;font-size:12px}
.workflow-steps li>span{width:23px;height:23px;font-size:11px}
.workflow-steps [aria-current]>span{background:var(--ink);color:var(--card)}
.crumb{margin-bottom:15px}.crumb .toolname{font:600 24px Archivo,system-ui,sans-serif;letter-spacing:-.03em}
.tabs{gap:5px;margin-bottom:20px;padding:4px;background:var(--sunken);border-radius:10px;border:1px solid var(--line);overflow-x:auto}
.tabs button{border:0;border-radius:7px;font-size:13px;padding:10px 13px;white-space:nowrap}
.tabs button[aria-current="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 5px #14202b13}
.pill{font-family:inherit;text-transform:none;letter-spacing:normal;font-size:11px;font-weight:500;padding:4px 9px;line-height:1.4;white-space:normal}
.note,.notice{border-radius:9px;font-size:13px;line-height:1.6;padding:14px 17px}
.work-save{background:transparent;border:1px solid var(--line);font-size:12px;padding:10px 14px;gap:12px;margin-bottom:20px}
.work-save button{font-size:12px;min-height:30px;padding:4px 7px}
.drop{border:1.5px dashed var(--line);background:var(--card);padding:28px;border-radius:12px}
.drop strong{font-size:19px}.drop>span{font-size:13px}.drop small{font-size:12px}.drop button{margin-top:12px}
.capture{border-radius:12px;padding:20px;font-size:16px;background:var(--card);border:1px solid var(--line);color:var(--ink)}
.capture small{font-size:12px;color:var(--muted);font-weight:400}
.rf-heading{margin:6px 0 24px}.rf-heading h1{font-size:27px}.rf-heading p{font-size:13px}
.rf-layout{grid-template-columns:minmax(0,1fr) 300px;gap:22px}
.rf-layout h2{font-size:17px}.rf-allocation{background:var(--card);padding:18px}.rf-choices{gap:12px}.rf-choice{background:var(--card);padding:17px}.rf-choice.selected{border:1px solid var(--accent);box-shadow:0 0 0 1px var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--card))}
.rf-choice span{font-size:12px;line-height:1.55}.rf-choice strong{font-size:14px}.rf-grid{gap:10px 16px}
.rf-actions #rf-submit,.rf-actions #rf-approve{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.rf-layout>aside{top:100px}.rf-layout details summary{padding:10px 0;min-height:42px;font-size:13px}
.job-tree>details{border-radius:10px}.job-tree summary{background:var(--card);padding:15px 17px;font-weight:500;font-size:14px;min-height:56px}.job-tree>details[open]>summary{background:var(--sunken)}
.job-tree-tools{font-size:12px;margin:14px 0}.job-tree-tools button{font-size:12px;min-height:34px;padding:6px 10px}.job-tree-open>span:first-child{font-size:13px}
.job-contact-grid dt{font-weight:500;font-size:11px}.job-contact-grid dd{font-size:14px}.job-folder-link strong{font-size:16px}.job-folder-link strong+span{font-size:12px}.job-folder-link>svg{color:#bc872e;width:32px;height:32px}
.estimate-extra-actions{gap:8px}.estimate-extra-actions button{font-size:12px;min-height:35px;padding:7px 11px}
.estimate-editor .estimate-heading h1{font-size:24px}.estimate-meta{gap:18px}.estimate-editor input,.estimate-editor select{min-height:40px}
.workspace-on .estimate-budget-setup{border-radius:12px}.workspace-on .estimate-budget-layout{gap:18px}
.estimate-toolbar,.estimate-budget-heading{padding:20px}.estimate-workspace button{min-height:32px;font-size:12px}
.workspace-on .estimate-actions{box-shadow:0 -5px 20px #14202b09;border-radius:0;padding:13px 20px;bottom:0}
.workspace-on .estimate-footer{padding:12px 18px;font-size:13px;border-top:1px solid var(--line)}
.estimate-budget-table input,.estimate-budget-table select,.estimate-budget-table textarea,.estimate-item-table input{min-height:35px;font-size:13px}
.sheet-card{border-radius:14px;box-shadow:0 20px 80px #0003}
.sheet-card h2{font-size:22px}.sheet-card p{font-size:14px;line-height:1.65}
.contracts-header h1{font-size:28px}.contract-list-row{padding:20px;border-radius:11px}.contract-list-row small{color:var(--muted)}
.contracts-stage{gap:8px}.contracts-stage span{border-radius:6px;font-size:12px}.contracts-stage .current{background:var(--ink);color:var(--card);border-color:var(--ink)}
.auth-screen{padding:50px 0}.auth-screen>h1{font-size:32px}.auth-screen>.card{padding:30px;margin-top:25px;box-shadow:0 12px 35px #14202b08}.auth-screen a{font-size:13px}
.daynav{margin:20px 0}.daynav button{min-width:42px}.segmented button{font-size:13px}
@media(min-width:1101px){.workspace-on #bar{flex-wrap:nowrap}}
@media(min-width:901px) and (max-width:1100px){#workspace-nav{order:5;flex-basis:100%}.workspace-on #who{max-width:45%}}
@media(min-width:1001px){.workspace-on.estimates-page #app{padding:22px 24px;width:100%;max-width:none}}
@media(max-width:1100px){.rf-layout{grid-template-columns:1fr}.rf-layout>aside{position:static;order:-1}}
@media(max-width:900px){
 .workspace-on #bar{padding:11px 16px;gap:10px;flex-wrap:wrap}.workspace-on #bar>.lockup{margin-right:0}.workspace-on #who{margin-left:auto;max-width:35%;font-size:11px}.workspace-on #signout{order:6;min-height:36px;padding:7px 10px;font-size:11px}
 #workspace-menu{display:flex;align-items:center;gap:8px;order:4;margin-left:0;font-size:12px;min-height:36px;padding:7px 11px}#workspace-menu svg{width:16px;height:16px}
 #workspace-nav{display:none;order:7;flex-basis:100%;padding:10px 0 0;gap:6px;border-top:1px solid #ffffff20;overflow:visible}
 #workspace-nav.is-open{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
 #workspace-nav>button{white-space:normal;padding:12px;min-height:46px}#workspace-nav>button[aria-current]::after{display:none}
 .workspace-on #app{width:calc(100% - 40px);padding:24px 0 36px}.workspace-columns{grid-template-columns:1fr}.workspace-context{padding:7px 16px}.role-views{padding:6px 16px}
}
@media(max-width:700px){
 .workspace-on #app{width:calc(100% - 28px);padding:20px 0 30px}.workspace-on .card{padding:18px;margin-bottom:15px}.workspace-on .card h2{font-size:16px}.workspace-heading h1{font-size:25px}.workspace-heading{gap:12px;margin-bottom:19px}.workspace-heading p{font-size:13px}.workspace-heading>button{font-size:12px;min-height:38px;padding:8px 11px}
 .work-counts{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:18px}.work-counts>button.card{padding:13px;gap:11px;min-height:70px;margin:0}.work-counts strong{font-size:25px}.work-counts span{font-size:11px}
 .workspace-row{font-size:13px;gap:10px}.workspace-row>button{font-size:11px;min-height:38px;max-width:105px}.draft-row>.workspace-row>span:last-child{display:none}.draft-row>button:last-child:not(:first-child){font-size:11px;padding:6px 9px}.today-job-details{padding:9px 11px}
 .tabs{gap:3px;border-radius:8px;padding:3px}.tabs button{font-size:12px;padding:10px 11px;min-height:42px}.tabs svg{width:15px;height:15px}.crumb .toolname{font-size:22px}.crumb{margin-bottom:13px}.workflow-steps{gap:8px 13px;font-size:11px;margin:14px 0 19px}.workflow-steps li>span{width:20px;height:20px;font-size:10px}
 .role-views:not(.active)>span{display:none}.role-views.active>span{flex-basis:100%}.role-views select{min-height:32px;font-size:12px}.role-views label{font-size:11px}
 .workspace-on input,.workspace-on select,.workspace-on textarea{font-size:16px}.workspace-on input[type=checkbox],.workspace-on input[type=radio]{min-height:0}.workspace-on label{font-size:12px}.workspace-on .tiny{font-size:12px}
 .rf-grid{grid-template-columns:1fr}.rf-heading h1{font-size:25px}.rf-heading p{font-size:13px}.rf-heading{margin-bottom:18px}.rf-choice{padding:14px 12px}.rf-choice strong{font-size:13px}.rf-choice span{font-size:11px}.rf-layout .card{padding:18px}.rf-allocation{padding:14px}.rf-actions button{min-height:46px}
 .estimate-editor .estimate-heading h1{font-size:21px;margin-left:10px}.estimate-extra-actions{gap:6px}.estimate-extra-actions button{font-size:11px;min-height:36px;padding:7px 9px}.workspace-on .estimate-actions{padding:12px;gap:9px;position:static;border-radius:10px}.workspace-on .estimate-footer{position:static}.workspace-on .estimate-budget-scroll{max-height:none;overflow:visible}
 .job-files-toolbar{padding:16px}.job-contact-grid{gap:15px}.job-folder-link strong{font-size:16px}.job-folder-link strong+span{font-size:12px}.job-file-dialog .row button{min-height:42px}.sheet-card{max-height:92dvh;overflow-y:auto;overscroll-behavior:contain}.contract-dialog{max-height:92dvh}
 .auth-screen{padding:25px 0}.auth-screen>.card{padding:23px}.home-integration>details>summary{gap:10px}.home-integration .pill{font-size:10px}
}
@media(max-width:430px){.workspace-on #who>span{display:none}.workspace-on #who{margin-left:auto;max-width:38px}.company-logo{width:32px;height:30px}.workspace-on #bar{gap:8px}#workspace-nav.is-open{grid-template-columns:repeat(2,minmax(0,1fr))}#workspace-nav>button{font-size:13px}.workspace-context>span{display:none}.workspace-context [data-clear-job]{font-size:10px}.workspace-heading{align-items:flex-start}.workspace-on .card{padding:16px}.work-counts>button.card{padding:12px}.today-job{flex-wrap:wrap}.today-job>span{flex-basis:100%}.today-job>button{max-width:none}.job-entry-delete{margin-right:9px;padding:7px 9px}.contracts-stage span{font-size:11px;padding:6px 9px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}

/* Secondary estimate actions should not push pricing off a phone screen. */
.estimate-options{border:1px solid var(--line);border-radius:9px;padding:0 14px;margin:12px 0}
.estimate-options>summary{cursor:pointer;font-size:12px;font-weight:500;min-height:42px;padding:11px 0;color:var(--muted)}
.estimate-options[open]>summary{border-bottom:1px solid var(--line)}
.estimate-options .estimate-extra-actions{margin:12px 0}
@media(min-width:1101px) and (max-width:1400px){#workspace-nav>button{padding:10px 8px;font-size:12px;gap:6px}.workspace-on #who{max-width:150px}.workspace-on #bar{gap:10px;padding-left:20px;padding-right:20px}}

.work-counts:not(:has(button:not([hidden]))){display:none}
@media(min-width:701px){.work-counts{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}}

.job-contract-summary{display:grid;grid-template-columns:1fr auto;gap:5px 20px;align-items:center}
.job-contract-summary h2{grid-column:1;margin:0}.job-contract-summary p{grid-column:1;margin:0;font-size:13px;color:var(--muted)}
.job-contract-summary button{grid-column:2;grid-row:1/3;font-size:12px}
@media(max-width:560px){.job-contract-summary{display:block}.job-contract-summary p{margin:8px 0 14px}.job-contract-summary button{min-height:40px}}
.chart .rowmanager.me { width:fit-content; max-width:100%; padding:.15rem .5rem; border-radius:999px; margin-top:.3rem; overflow-wrap:anywhere; }


/* A line Send would refuse: included, with no QuickBooks item it can use.
   Marked on the item box itself, because that is the empty thing — the name,
   quantity and price beside it all look finished, which is exactly why fifty
   of these went unnoticed. */
tr.needs-item [data-budget-field="item"] {
  border-color: var(--bad, #b42318);
  box-shadow: 0 0 0 1px var(--bad, #b42318);
}
tr.needs-item > td:first-child { box-shadow: inset 3px 0 0 var(--bad, #b42318); }
.estimate-missing { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }

/* ── Colour on the working screens ────────────────────────────────────────────
   These screens were grey on grey: card, row and figure all the same weight, so
   nothing said "this one" until it had been read. The owner asked for colour,
   and for not much of it.

   So it is used where it means something and nowhere else: which pile a receipt
   is in, which tool a figure belongs to, what state a transfer is in. The tones
   are the customer pages' tones, one per tool — receipts rose, timesheets
   violet, estimates green, invoices blue, jobs teal, waiting amber — mixed into
   the card rather than painted over it, so the company's navy and orange stay
   the loudest things on any screen. */

/* A pile of work: named, counted, and coloured the same as the rows under it. */
.group-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.group-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--tone,var(--accent))}
.receiptrow>.receipt{border-left:4px solid var(--tone,var(--line))}

/* Timesheets are hours, and the hours are what somebody is looking for. */
.sheetrow{border-left:4px solid color-mix(in srgb,var(--blueprint) 45%,var(--line))}
.sheetrow .amt,.myline .amt{color:var(--ink)}

/* The day, or the week, you are looking at. A card of its own so it reads as
   the thing the screen below it is about — and left plain, because the button
   under it is already the warm one and two tinted bands stacked is a stripe. */
.daynav{padding:7px 10px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.daynav .dayname strong{color:var(--ink)}

/* The schedule is left alone. It already had the only two colours it needs —
   the blueprint blue on today's column and orange on "this is you" — and a
   third and fourth on the chips turned a week into a pile of stickers. */

/* Invoices: the margin is the figure being checked, and a thin one already had
   a class of its own saying so. */
.margins strong{color:var(--ink)}
.margins strong.bad{color:var(--bad)}

/* "In QuickBooks" is the end of the line and it was grey — the same grey as a
   row with nothing on it at all. */
.pill.posted{background:color-mix(in srgb,var(--blueprint) 15%,var(--card));color:var(--blueprint)}
/* The tool's name at the top of its screens: the navy it always was, with the
   company's orange beside it. It was briefly in a colour per tool, which is the
   one thing here the owner did not want. */
.crumb .toolname{color:var(--ink)}
.crumb .toolname::before{content:'';display:inline-block;width:4px;height:17px;border-radius:2px;margin-right:9px;vertical-align:-3px;background:var(--accent)}

/* The one button on an empty screen. It was the same white as the card behind
   it; now it is the company's orange, quietly. */
.capture{background:color-mix(in srgb,var(--accent) 6%,var(--card));border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line))}
.capture:hover{background:color-mix(in srgb,var(--accent) 12%,var(--card))}
.capture .icon,.capture svg{color:var(--accent)}

/* Whose hours a timesheet row holds, readable at a glance in its muted line. */
.sheet-people{color:var(--ink);font-weight:600}

/* Foremen's everyday actions belong near today's assignments, not behind Menu. */
.field-quick-actions{display:flex;gap:12px;margin:0 0 22px}.field-quick-actions button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:12px 20px}.field-quick-actions svg{width:21px;height:21px;flex-shrink:0}
#workspace-phone-nav{display:none}
@media(max-width:700px){
 body.phone-nav{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
 .phone-nav #workspace-phone-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:35;min-height:64px;padding:4px 6px calc(4px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--line);box-shadow:0 -3px 16px #0001;gap:2px}
 #workspace-phone-nav button{display:flex;flex:1;min-width:0;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:56px;padding:7px 3px;border:0;background:transparent;color:var(--muted);font-size:11px;margin:0;border-radius:10px}
 #workspace-phone-nav svg{width:22px;height:22px}#workspace-phone-nav button[aria-current],#workspace-phone-nav button[aria-expanded=true]{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--card));font-weight:700}
 .phone-nav:has(input:focus,textarea:focus,dialog[open],.sheet) #workspace-phone-nav{display:none}
 .phone-nav .tally-helper-launcher{bottom:calc(84px + env(safe-area-inset-bottom))}
 .field-phone .field-quick-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:18px}.field-quick-actions button{font-size:14px;padding:14px 8px;min-height:58px}
 .workspace-on.field-phone #app{padding-bottom:24px}.field-phone input:not([type=checkbox]):not([type=radio]):not([type=file]),.field-phone textarea,.field-phone select{font-size:16px;min-height:48px}
 .field-phone #app label{font-size:14px}.field-phone #app button:not(.linkish){min-height:44px}
 .field-phone .today-job{display:block}.field-phone .today-job>span{display:block;min-width:0}.field-phone .today-job strong{overflow-wrap:anywhere;font-size:15px;line-height:1.5}.field-phone .today-job>button{width:100%;max-width:none!important;margin-top:12px;font-size:15px;min-height:48px;background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
 .field-phone .today-job-details{font-size:13px;line-height:1.6}.field-phone .workspace-heading>button{min-height:44px}.field-phone .workspace-row>button{font-size:13px}
 .field-phone #app>.tabs{overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start}.field-phone #app>.tabs button{flex:0 0 auto;min-width:94px;font-size:13px;padding:10px}
 .field-phone #actions{padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--card)}.field-phone #actions>#save,.field-phone #actions>#send{min-height:50px;font-size:16px}.field-phone #actions>#drop-sheet{font-size:13px;background:transparent}
 .field-phone .rf-choices{grid-template-columns:1fr}.field-phone .rf-choice strong{font-size:16px}.field-phone .rf-choice span{font-size:13px}.field-phone .rf-actions button{min-height:50px;font-size:16px}.field-phone .rf-allocation{padding:14px}
}

/* ChatGPT and Claude: the screen an app sends somebody to, and the card in
   Settings. What it can see is a list; the answer is two buttons side by side. */
.connect-screen{max-width:34rem}
.connect-list,.connect-steps{margin:.2rem 0 .8rem;padding-left:1.2rem;line-height:1.55}
.connect-steps li{margin:.15rem 0}
.connect-choice{justify-content:flex-end;gap:10px;margin-top:.6rem}
.connect-address{gap:8px;flex-wrap:nowrap}.connect-address input{flex:1;min-width:0;font-family:ui-monospace,Consolas,monospace;font-size:13px}.connect-address button{flex:none;width:auto}
.connect-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:.55rem 0;border-top:1px solid var(--line)}
.connect-row span{min-width:0;overflow-wrap:anywhere}
/* Invoices > Batch: one row per job, each with its own dates */
.batch-row{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1.4fr) 10rem 10rem auto;gap:.5rem;align-items:end;margin:.4rem 0}
.batch-row label{display:flex;flex-direction:column;gap:.2rem;font-size:13px;min-width:0}
.batch-row input,.batch-row select{width:100%;min-width:0}
.batch-actions{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;margin-top:.6rem}
.batch-invoice{border-top:1px solid var(--line);padding:.7rem 0;display:flex;flex-direction:column;align-items:flex-start;gap:.3rem}
.batch-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;width:100%}
.batch-head .batch-money{margin-left:auto;font-variant-numeric:tabular-nums}
.batch-invoice>details{width:100%;min-width:0}.batch-lines{overflow-x:auto;max-width:100%}.batch-words td{color:var(--muted)}
@media (max-width:900px){.batch-row{grid-template-columns:1fr 1fr}.batch-row label:first-child{grid-column:1/-1}}

/* ── Getting around ───────────────────────────────────────────────────────────
   The owner asked for the app to be easier to follow and to move about in.
   Nothing here is a new colour or a new idea: it is the same few things made
   to look and work the same way on every screen.

   On a phone the bar along the bottom is now everybody's, so the two buttons
   it replaces come out of the top bar, and the menu it opens comes up from the
   bottom, next to the thumb that asked for it, with Sign out as its last line. */
#workspace-nav>.nav-signout{display:none}
@media(max-width:700px){
 .phone-nav #workspace-menu,.phone-nav #signout{display:none}
 .phone-nav #workspace-nav.is-open{position:fixed;left:8px;right:8px;bottom:calc(74px + env(safe-area-inset-bottom));z-index:40;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;
   max-height:calc(100dvh - 170px);overflow-y:auto;padding:10px;border:0;border-radius:16px;background:var(--brand);box-shadow:0 14px 44px #0007}
 .phone-nav #workspace-nav.is-open>button{min-height:50px;font-size:14px}
 .phone-nav #workspace-nav.is-open>button[aria-current]{background:#ffffff24}
 .phone-nav #workspace-nav.is-open>.nav-signout{display:flex;grid-column:1/-1;justify-content:center;margin-top:6px;padding-top:14px;border-top:1px solid #ffffff26;border-radius:0 0 10px 10px;color:#ffffffc4;font-weight:500}
 /* The page behind goes quiet while the menu is up. */
 body.phone-nav:has(#workspace-nav.is-open)::before{content:'';position:fixed;inset:0;z-index:29;background:#0b141b70}
}

/* One kind of page title. A tool's name was a third smaller than "Today" and
   "Jobs", with a link home beside it; the link is in the menu that is now on
   every screen, at every size but one, and the names are the same size. */
.crumb{margin-bottom:18px}
.crumb .toolname{font:600 29px/1.2 Archivo,system-ui,sans-serif;letter-spacing:-.035em}
.crumb .toolname::before{width:5px;height:23px;margin-right:11px;vertical-align:-2px}
#app>.workspace-heading h1::before{content:'';display:inline-block;width:5px;height:23px;border-radius:2px;margin-right:11px;vertical-align:-2px;background:var(--accent)}
@media(min-width:901px),(max-width:700px){.workspace-on .crumb>.linkish[data-go="dashboard"]{display:none}}
@media(max-width:700px){.crumb .toolname{font-size:25px}.crumb .toolname::before,#app>.workspace-heading h1::before{height:20px;margin-right:9px}}

/* Tabs the size of their words. Stretched across a wide screen, five tabs were
   five slabs a hand's width each, and the one that was "on" was the heaviest
   thing on the page. On a phone they stay as they were: wrapped, every label
   whole, which is a decision made before and still right. A tool with a single
   tab has nothing to choose between, so the row is not drawn. */
@media(min-width:761px){
 #app>nav.tabs{width:fit-content;max-width:100%}
 #app>nav.tabs button{flex:0 0 auto;padding:9px 16px}
}
#app>nav.tabs:has(>button:only-child){display:none}

/* A change of view inside a screen, drawn as the lesser thing it is. It was the
   same black bar as the tabs above it, full width, so two rows both said "this
   is where you are". */
.segmented button.on{background:color-mix(in srgb,var(--blueprint) 14%,var(--card));color:var(--ink);font-weight:600;box-shadow:inset 0 -2px var(--blueprint)}
@media(min-width:761px){.segmented{width:fit-content;max-width:100%}.segmented button{flex:0 0 auto;padding:.5rem 1.15rem}}

/* A row with a button of its own beside it: the line under it runs the whole
   width, where it stopped short of the button. */
.draft-row:has(>.workspace-row){border-bottom:1px solid var(--line)}.draft-row:has(>.workspace-row):last-child{border-bottom:0}
.draft-row>.workspace-row{border-bottom:0!important}

/* The list of jobs to invoice. Each row was lined up by the foot of its tick box,
   which left the box riding above its own job's name; a customer's heading was a
   button and so as tall as one, with a gap under it that read as a missing row;
   and the names were in the grey used for small print, though they are the
   things being chosen. */
.jobpick{align-items:center;gap:.65rem;min-height:40px;padding:.4rem .75rem;font-size:14px}
.jobpick .what{color:var(--ink)}
.jobpick.heading{min-height:34px;padding-top:.55rem;padding-bottom:.3rem;border-radius:0;font-size:12px;letter-spacing:.04em;text-transform:uppercase;background:var(--sunken);border-bottom:1px solid var(--line)}
.jobpick.heading .who{font-weight:600}