/* Siteboard phone and tablet pass. Loaded last, so it refines the other stylesheets without rewriting them.
   Goals: you always know what to press (strong primary buttons, bordered secondary buttons), big targets for gloves and sunlight,
   status that is colour AND text, a soft tinted background, a phone calendar on phones and roomy layouts on tablets.
   Contrast: primary #2b5e47 with white text is 7.0:1; chip text on its tint is 6:1 or better; secondary borders are 3:1+ against white. */

:root{
  --sb-primary:#2b5e47;--sb-primary-hover:#214a38;--sb-primary-ring:#b59a60;
  --sb-tint:#eef2ec;--sb-tint-2:#f6f3ea;--sb-edge:#7f8c85;
  --ok-fg:#1f5a3d;--ok-bg:#dcefe2;--wait-fg:#6e4a07;--wait-bg:#fbebc4;--bad-fg:#8e2a20;--bad-bg:#fadcd6;--info-fg:#24486b;--info-bg:#dde9f6;--plain-fg:#46524c;--plain-bg:#e9ece7
}

/* ---------- everywhere: calmer tinted background, clear buttons, visible focus, readable chips ---------- */
body{background:linear-gradient(180deg,var(--sb-tint) 0,var(--sb-tint-2) 900px) fixed,var(--sb-tint-2)}
.btn{border:1.5px solid var(--sb-edge);color:#1d2c26;font-weight:700}
.btn:hover{background:#eef2ec}
.btn.primary,.btn.primary.small{background:var(--sb-primary);border-color:var(--sb-primary);color:#fff;box-shadow:0 2px 0 #173a2b,0 6px 14px #2b5e4730}
.btn.primary:hover{background:var(--sb-primary-hover);border-color:var(--sb-primary-hover)}
.btn.primary:active{transform:translateY(1px);box-shadow:0 1px 0 #173a2b}
.btn.danger{color:var(--bad-fg);border-color:#c98b82}
.btn.gold{border-color:#b59a60;color:#5a4822}
:is(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid #192622;outline-offset:2px;box-shadow:0 0 0 6px #b59a6066}
.filter-button{border:1.5px solid #c9d0c9;background:#fff;color:#1d2c26;font-weight:650}
.filter-button.selected,.filter-button[aria-pressed="true"]{background:#192622;border-color:#192622;color:#fff}

.badge{font-size:12px;font-weight:700;padding:3px 9px;border-radius:99px;background:var(--plain-bg);color:var(--plain-fg)}
.badge.green,.badge.done{background:var(--ok-bg);color:var(--ok-fg)}
.badge.yellow,.badge.submitted{background:var(--wait-bg);color:var(--wait-fg)}
.badge.red{background:var(--bad-bg);color:var(--bad-fg)}
.badge.red::before{content:"!";display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--bad-fg);color:#fff;font-size:10px;font-weight:800}
.badge.progress{background:var(--info-bg);color:var(--info-fg)}
.badge.planned{background:var(--plain-bg);color:var(--plain-fg)}
.badge.booked{background:#ebe4f4;color:#553d73}

/* next meeting reminder: one clear coloured banner, not the whole calendar lit up */
.mc-next{display:flex;gap:12px;align-items:center;width:100%;text-align:left;margin:0 0 14px;padding:12px 16px;border:0;border-left:6px solid #7c3aed;border-radius:12px;background:linear-gradient(90deg,#efe8fd,#f7f3ff);color:#2e1a57;font:inherit}
.mc-next .icon{width:26px;height:26px;color:#5b21b6}
.mc-next>span{display:grid;gap:1px}
.mc-next small{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#5b21b6}
.mc-next b{font-size:16px}
.mc-next span span{font-size:14px;color:#3f2d6b}
.mc-phone,.m-tabs{display:none}

/* ---------- tablet (641 to 1100): roomy, two columns where useful, larger boxes ---------- */
@media(min-width:641px) and (max-width:1100px){
  body{font-size:15px}
  .btn{min-height:46px;padding:11px 16px;font-size:14px}
  .btn.small{min-height:40px;font-size:13px}
  .filter-button{min-height:44px;padding:8px 14px;font-size:14px}
  select,input:not([type=checkbox]):not([type=radio]),textarea{min-height:46px;font-size:15px}
  .badge{font-size:12.5px}
  .project-centred-layout>.main{padding-left:28px;padding-right:28px}
  .dashboard-projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .dashboard-projects>.dashboard-project:last-child{grid-column:auto}
  .dashboard-project{padding:22px}
  .dashboard-work-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
  .ov-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .panel-body,.ov-card{font-size:15px}
  .mc-table{min-width:0}
  .mc-table td{height:104px}
  .mc-day{min-height:96px}
  .mc-chip{font-size:12.5px;padding:4px 7px}
  .mc-num{font-size:14px}
  .worker-shell{max-width:820px;padding:28px 28px 80px}
  .worker-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
  .worker-shell .day{min-height:60px;min-width:110px;border:1.5px solid #cfd8d1;border-radius:12px;background:#fff;padding:8px 12px}
  .worker-shell .day b{font-size:16px}.worker-shell .day span{font-size:14px}
  .worker-shell .day.current{border-color:#192622;box-shadow:inset 0 0 0 1px #192622}
  .worker-heading p{font-size:16px}
  .worker-select{min-height:46px;font-size:15px}
  .worker-task{padding:24px}
  .worker-task h2{font-size:20px}
  .worker-task .instructions{font-size:15px;color:#3f4b45}
  .modal{max-width:min(720px,94vw)}
}

/* ---------- phone (up to 640) ---------- */
@media(max-width:640px){
  html,body{overflow-x:hidden}
  body{font-size:16px}
  .project-centred-layout>.main,.main{padding-left:16px;padding-right:16px}

  /* big, obvious controls */
  .btn,.btn.small{min-height:48px;padding:12px 16px;font-size:15px;border-radius:10px}
  .btn .icon{width:18px;height:18px}
  .filter-button{min-height:44px;padding:8px 14px;font-size:15px;border-radius:99px}
  .inline-filters{gap:8px;flex-wrap:wrap}
  .text-button{min-height:44px;font-size:15px}
  select,input:not([type=checkbox]):not([type=radio]),textarea{min-height:48px;font-size:16px;border-radius:10px}
  .form-row{grid-template-columns:1fr}
  .modal-footer{display:flex;flex-direction:column-reverse;gap:10px}
  .modal-footer .btn{width:100%}
  .page-heading>.btn,.page-heading .btn.primary{width:100%;font-size:16px}
  /* the top bar stays compact so nothing is pushed off screen */
  .workspace-controls{gap:6px;min-width:0}
  .workspace-header{grid-template-columns:auto minmax(0,1fr)!important;column-gap:8px!important}
  .workspace-brand{width:auto!important;min-width:0!important;max-width:106px}
  .workspace-controls{justify-content:flex-end}
  .workspace-brand .brand-mark{width:104px!important;height:50px!important;background-position:left center}
  .workspace-menu .icon{width:16px}
  .workspace-controls>.btn,.workspace-controls .btn{min-height:44px;padding:8px 11px;font-size:14px;border-radius:9px;white-space:nowrap}
  .workspace-header .btn.primary{box-shadow:none}

  /* readable text */
  .subtitle,.item-meta,.attention-content .detail,.queue-item p,.dashboard-project>p,.ov-hint,.form-hint,.tiny-info{font-size:15px;line-height:1.5}
  .item-title,.queue-item strong{font-size:16px}
  .badge{font-size:13px;padding:4px 10px}
  .panel,.ov-card{border-radius:14px}

  /* a few cards of the same kind: one swipe row instead of a long stack */
  .dashboard-projects{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-left:-16px;margin-right:-16px;padding:4px 16px 14px;scroll-padding-left:16px;-webkit-overflow-scrolling:touch}
  .dashboard-projects>.dashboard-project,.dashboard-projects>.dashboard-project:last-child{flex:0 0 84%;scroll-snap-align:start;grid-column:auto;margin:0}
  .dashboard-projects::-webkit-scrollbar{height:6px}.dashboard-projects::-webkit-scrollbar-thumb{background:#b8c2bb;border-radius:9px}

  /* headline figures two by two so the page is shorter */
  .ov-kpis{grid-template-columns:1fr 1fr!important;gap:10px}
  .ov-kpi{padding:14px 12px}
  .ov-kpi-value{font-size:21px}
  .ov-kpi-label{font-size:11.5px}
  .ov-kpi-note{font-size:13px}
  /* wide tables become stacked cards (labels come from the column headings, see mobile.js) */
  .ov-table-wrap,.data-wrap{overflow:visible}
  table.m-stack,table.m-stack tbody,table.m-stack tfoot,table.m-stack tr,table.m-stack td{display:block;width:100%}
  table.m-stack{min-width:0!important}
  table.m-stack thead{display:none}
  table.m-stack tr{border-bottom:1px solid var(--line);padding:10px 14px}
  table.m-stack td{border:0!important;padding:4px 0!important;display:flex;justify-content:space-between;gap:12px;text-align:right;font-size:15px}
  table.m-stack td[data-label]::before{content:attr(data-label);font-size:13px;font-weight:650;color:#5b6761;text-align:left;text-transform:none}
  table.m-stack td:first-child{display:block;text-align:left;font-size:16px;padding-bottom:6px!important}
  table.m-stack td:first-child::before{display:none}
  table.m-stack td:empty{display:none}

  /* ----- the crew screen ----- */
  .worker-shell{padding:16px 16px 96px}
  .project-centred-layout>.main{padding-bottom:96px}/* room for the notification bell, bottom-right on phones */
  .worker-heading h1{font-size:26px}
  .worker-heading p{font-size:15px}
  .worker-select{min-height:48px;font-size:15px;max-width:none}
  .worker-task{padding:18px;border-radius:14px}
  .worker-task h2{font-size:19px}
  .worker-task .instructions{font-size:16px;color:#3a4640;line-height:1.6}
  .worker-task .btn,.worker-actions .btn{min-height:52px;font-size:16px}
  .worker-actions{grid-template-columns:1fr;gap:10px}
  .worker-actions button{min-height:56px}
  .worker-note{font-size:14px}
  .eod-big,.ws-big{min-height:58px;font-size:18px}
  /* the clock box is always at the top and unmistakable */
  #ws-clock{border-width:2px;border-color:#2b5e47;background:#fff;box-shadow:0 6px 18px #1f3a2c1a}
  #ws-clock.ws-on{background:#e3f1e8}
  #ws-clock select{min-height:52px;font-size:17px}
  /* four tiles: each opens its own short view */
  .m-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 18px}
  .m-tile{display:grid;justify-items:start;gap:2px;min-height:84px;padding:12px 14px;border-radius:14px;border:2px solid #cfd8d1;background:#fff;color:#1d2c26;text-align:left;font:inherit}
  .m-tile:last-child:nth-child(odd){grid-column:1/-1;min-height:64px}
  .worker-shell .days{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .worker-shell .day{min-height:56px;border:1.5px solid #cfd8d1;border-radius:12px;background:#fff;padding:8px 10px}
  .worker-shell .day b{font-size:15px}.worker-shell .day span{font-size:13px}
  .worker-shell .day.current{border-color:#192622;box-shadow:inset 0 0 0 1px #192622}
  .m-tile .icon{width:24px;height:24px;margin-bottom:4px}
  .m-tile b{font-size:16px;line-height:1.2}
  .m-tile small{font-size:13px;color:#4f5c55}
  .m-tile-today .icon{color:#2b5e47}.m-tile-schedule .icon{color:#2a5d8f}.m-tile-report .icon{color:#8a5a00}.m-tile-materials .icon{color:#8f3b5a}
  .m-tile[aria-pressed="true"]{background:#192622;border-color:#192622;color:#fff}
  .m-tile[aria-pressed="true"] small,.m-tile[aria-pressed="true"] .icon{color:#e7dcc0}
  #app[data-mtab="today"] [data-mgroup]:not([data-mgroup="today"]):not([data-mgroup="all"]),
  #app[data-mtab="schedule"] [data-mgroup]:not([data-mgroup="schedule"]):not([data-mgroup="all"]),
  #app[data-mtab="report"] [data-mgroup]:not([data-mgroup="report"]):not([data-mgroup="all"]),
  #app[data-mtab="materials"] [data-mgroup]:not([data-mgroup="materials"]):not([data-mgroup="all"]){display:none!important}

  /* ----- the phone calendar (Schedule > Month) ----- */
  .cw .mc-desk{display:none}
  .mc-phone{display:grid;gap:14px}
  .mp-nav{display:grid;grid-template-columns:48px 1fr 48px auto;align-items:center;gap:6px}
  .mp-nav h2{text-align:center;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mp-arrow{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--sb-edge);background:#fff;font-size:26px;line-height:1;color:#1d2c26}
  .mp-today{min-height:48px}
  .mp-seg{display:grid;grid-template-columns:repeat(3,1fr);background:#dfe5df;border-radius:12px;padding:4px;gap:4px}
  .mp-seg button{min-height:44px;border:0;border-radius:9px;background:transparent;font:inherit;font-size:15px;font-weight:650;color:#2c3a33}
  .mp-seg button.selected{background:#fff;color:#192622;box-shadow:0 1px 4px #0002}
  .mp-grid{background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px 6px 10px}
  .mp-wd,.mp-days{display:grid;grid-template-columns:repeat(7,1fr)}
  .mp-wd span{text-align:center;font-size:12px;font-weight:700;color:#66726b;padding:4px 0 6px}
  .mp-day{display:grid;justify-items:center;align-content:start;gap:3px;min-height:52px;padding:4px 0;border:0;background:none;font:inherit;color:#1d2c26;border-radius:12px}
  .mp-day>span:first-child{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:16px;font-weight:600}
  .mp-day.is-out{color:#9aa49e}
  .mp-day.is-today>span:first-child{color:#b23b2e;font-weight:800}
  .mp-day.is-sel>span:first-child{background:#192622;color:#fff}
  .mp-day.is-today.is-sel>span:first-child{background:#b23b2e;color:#fff}
  .mp-day.has-meet>span:first-child{box-shadow:0 0 0 2px #7c3aed}
  .mp-dots{display:flex;gap:3px;height:7px}
  .mp-dots i{width:7px;height:7px;border-radius:50%;background:var(--c,#64748b)}
  .mp-list{display:grid;gap:8px}
  .mp-list h3{font-size:17px;margin:2px 2px 4px}
  .mp-item{display:grid;grid-template-columns:64px 1fr 18px;gap:10px;align-items:center;width:100%;min-height:60px;padding:10px 12px;border-radius:14px;border-left:6px solid var(--pc,var(--c));text-align:left;font:inherit;color:#14201b;-webkit-backdrop-filter:none;backdrop-filter:none}
  .mp-time{font-size:14px;font-weight:700;color:#2f3b35}
  .mp-what b{display:block;font-size:16px;line-height:1.3}
  .mp-what small{display:block;font-size:13.5px;color:#3d4943;line-height:1.4;margin-top:2px}
  .mp-go{font-size:24px;color:#4d5953}
  .mp-empty{padding:18px;border-radius:14px;background:#fff;border:1px dashed #b9c3bc;color:#4d5953;text-align:center}
  .mp-filters{background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 14px}
  .mp-filters summary{min-height:48px;display:flex;align-items:center;font-weight:650;cursor:pointer}
  .mp-filters select{width:100%;margin:0 0 10px}
  .cw-switch .filter-button{flex:1}
  /* week board and other wide grids keep their own scroll, clearly framed */
  .cw-scroll{border-radius:12px;border:1px solid var(--line);background:#fff}

  /* ----- the owner's Today screen (mobile.js folds it): urgent things open at the top, the rest behind big headers with counts ----- */
  .main>.dashboard-heading{display:block;margin-bottom:14px}
  .main>.dashboard-heading h1{font-size:24px;margin:4px 0 4px}
  .main>.dashboard-heading p{font-size:15px;margin:0}
  .main>.dashboard-heading .task-action-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
  .main>.dashboard-heading .task-action-row .btn{width:100%;padding:10px 8px;font-size:14.5px;white-space:normal;line-height:1.2}
  .mt-today{display:grid;gap:12px}
  .mt-today>.dashboard-metrics{grid-template-columns:1fr 1fr;margin:0;border-radius:14px;overflow:hidden}
  .mt-today>.dashboard-metrics>a{padding:12px 14px;min-height:76px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);color:#1d2c26}
  .mt-today>.dashboard-metrics>a:nth-child(2n){border-right:0}
  .mt-today>.dashboard-metrics>a:nth-last-child(-n+2){border-bottom:0}
  .mt-today>.dashboard-metrics span{font-size:13px;color:#46524c;font-weight:650}
  .mt-today>.dashboard-metrics strong{font-size:24px;margin:2px 0}
  .mt-today>.dashboard-metrics small{font-size:12.5px;color:#4f5c55;line-height:1.3;display:block}
  .mt-fold{background:#fff;border:1.5px solid #cfd8d1;border-left:6px solid var(--mt-c,#46524c);border-radius:14px;overflow:hidden;margin:0}
  .mt-fold.mt-has-bad{border-color:#d9a79f;border-left-color:var(--mt-c)}
  .mt-fold-h{margin:0;font-size:inherit}
  .mt-fold-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:60px;padding:10px 12px 10px 14px;border:0;background:#fff;font:inherit;color:#14201b;text-align:left;cursor:pointer}
  .mt-fold-btn:active{background:#f1f4f0}
  .mt-fold-txt{display:grid;gap:2px;flex:1 1 auto;min-width:0}
  .mt-fold-txt b{font-size:16.5px;line-height:1.25}
  .mt-fold-txt small{font-size:13.5px;color:#4b5852;line-height:1.35;font-weight:500}
  .mt-count{flex:0 0 auto;min-width:34px;height:34px;padding:0 9px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;background:var(--plain-bg);color:#24302a;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
  .mt-count.mt-bad{background:var(--bad-fg);color:#fff}
  .mt-count.mt-bad::before{content:"!";margin-right:2px}
  .mt-chev{flex:0 0 auto;width:12px;height:12px;border-right:3px solid #3d4943;border-bottom:3px solid #3d4943;transform:rotate(45deg);margin:0 6px 6px 2px;transition:transform .15s}
  .mt-fold-btn[aria-expanded="true"] .mt-chev{transform:rotate(-135deg);margin-bottom:-4px}
  .mt-fold-btn[aria-expanded="true"]{border-bottom:1px solid #e1e6e1}
  .mt-fold-body{padding:0}
  .mt-fold-body .mt-dup{display:none!important}
  /* the panels inside a fold lose their own frame and spacing, the fold is the frame */
  .mt-fold-body>.owner-view,.mt-fold-body>.panel,.mt-fold-body>section{margin:0!important;border:0!important;box-shadow:none!important;border-radius:0!important;background:transparent}
  .mt-fold-body>.owner-view>.ov-card,.mt-fold-body .ov-grid>.ov-card{border:0;box-shadow:none;border-radius:0;margin:0}
  .mt-fold-body>.owner-view .ov-grid{gap:0}
  .mt-fold-body>.owner-view .ov-grid>.ov-card+.ov-card{border-top:1px solid #e1e6e1}
  .mt-fold-body .ov-card>header{padding:10px 14px 4px;min-height:0}
  .mt-fold-body .ov-card>header:not(:has(> :not(.mt-dup))){display:none}
  .mt-fold-body .panel-head{padding:10px 14px 6px}
  .mt-fold-body>.section-title{margin:0;padding:8px 14px 0;justify-content:flex-end}
  .mt-fold-body>.dashboard-projects{margin:0;padding:10px 14px 14px;scroll-padding-left:14px}
  .mt-fold-body>.setup-home-banner,.mt-fold-body>.dashboard-routine{padding:14px}
  .mt-fold-body>.dashboard-routine{display:grid;gap:10px}
  .mt-fold-body .cu-list{margin:0;padding:0 14px}
  .mt-fold-body .cu-list li{padding:10px 0}
  .mt-fold-body .wd-latebar{padding-left:10px!important}
  .mt-fold-body .wd-counts{padding:0 14px}
  .mt-fold-body .queue-filters{padding:10px 12px;gap:8px}
  .mt-fold-body .queue-filters button{min-height:44px;padding:8px 14px;font-size:14.5px;border:1.5px solid #c9d0c9;border-radius:99px;color:#1d2c26;font-weight:650}
  .mt-fold-body .queue-filters .selected{background:#192622;border-color:#192622;color:#fff}
  .mt-fold-body .queue-item{padding:14px}
  .mt-fold-body .queue-item-meta{font-size:13.5px;color:#3d4943}
  /* ----- the programme (Gantt) on a phone: gantt.js draws a week-by-week list; the chart stays one tap away ----- */
  .gtp-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#dfe5df;border-radius:12px;padding:4px;margin:0 0 12px}
  .gtp-switch button{min-height:44px;border:0;border-radius:9px;background:transparent;font:inherit;font-size:15px;font-weight:700;color:#2c3a33}
  .gtp-switch button.selected{background:#fff;color:#192622;box-shadow:0 1px 4px #0002}
  .gt-wrap .gt-top .inline-filters{flex-wrap:wrap}
  .gtp-filters .cw-filters{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .gtp-filters select{width:100%}
  .gtp-sum{margin:0 2px 12px;font-size:15px;color:#33403a}
  .gtp-sum b{font-size:17px;color:#14201b}.gtp-sum .gtp-wait{color:#8a4f00}
  .gtp-week{display:grid;gap:10px;margin:0 0 20px}
  .gtp-wh{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;padding:8px 2px 4px}
  .gtp-wh h3{margin:0;font-size:19px;color:#14201b}
  .gtp-wh span{font-size:14.5px;color:#46524c;font-weight:600}
  .gtp-wh .gtp-n{margin-left:auto;font-size:13.5px;background:var(--plain-bg);color:#24302a;padding:3px 10px;border-radius:99px}
  .gtp-this .gtp-wh h3{color:#a3261f}
  .gtp-daysh,.gtp-strip{display:grid;grid-template-columns:14px repeat(7,1fr) 14px;gap:3px;align-items:center}
  .gtp-daysh{padding:0 14px 0 20px;margin-bottom:-4px}
  .gtp-daysh span{text-align:center;font-size:13px;font-weight:700;color:#33403a;line-height:1.1;padding:3px 0;border-radius:8px}
  .gtp-daysh span small{display:block;font-size:10.5px;font-weight:700;color:#66726b}
  .gtp-daysh span.we{color:#7a857f}
  .gtp-daysh span.now{background:#a3261f;color:#fff}.gtp-daysh span.now small{color:#ffd9d5}
  .gtp-task{display:grid;gap:6px;width:100%;text-align:left;font:inherit;color:#14201b;background:#fff;border:1.5px solid #cfd8d1;border-left:6px solid var(--sc);border-radius:14px;padding:12px 14px;min-height:64px;cursor:pointer;box-shadow:0 1px 3px #1a302010}
  .gtp-task:active{background:#f4f6f2}
  .gtp-job{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:#3d4943}
  .gtp-job i{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
  .gtp-top{display:flex;align-items:flex-start;gap:10px}
  .gtp-title{flex:1 1 auto;min-width:0;font-size:16.5px;line-height:1.3;overflow-wrap:anywhere}
  .gtp-st{flex:0 0 auto;color:#fff;font-size:12.5px;font-weight:750;padding:4px 10px;border-radius:99px;white-space:nowrap}
  .gtp-meta{font-size:14.5px;color:#3d4943}
  .gtp-strip i{height:14px;border-radius:3px;background:#edf0ec}
  .gtp-strip i.we:not(.on){background:#e3e7e2}
  .gtp-strip i.on{border-radius:0}.gtp-strip i.on.s{border-radius:7px 0 0 7px}.gtp-strip i.on.e{border-radius:0 7px 7px 0}.gtp-strip i.on.s.e{border-radius:7px}
  .gtp-strip i.now{box-shadow:0 0 0 2px #a3261f}
  .gtp-more{font-size:16px;line-height:1;color:#33403a;text-align:center}
  .gtp-when{font-size:14px;color:#33403a;font-variant-numeric:tabular-nums}
  .gtp-none{margin:0;padding:14px;border-radius:14px;border:1px dashed #b9c3bc;background:#fff;color:#4d5953;text-align:center}
  .gtp-earlier{margin:0 0 16px;background:#fff;border:1.5px solid #cfd8d1;border-radius:14px;padding:0 12px}
  .gtp-earlier>summary{min-height:52px;display:flex;align-items:center;flex-wrap:wrap;gap:2px 10px;font-weight:750;font-size:16px;cursor:pointer}
  .gtp-earlier>summary span{font-size:13.5px;font-weight:500;color:#4b5852}
  .gtp-earlier[open]{padding-bottom:12px}.gtp-earlier[open]>.gtp-task+.gtp-task{margin-top:8px}
  .gtp-hint{margin-top:4px}
  .mt-rest{display:grid;gap:10px;margin-top:6px}
  .mt-rest-h{margin:4px 2px 0;font-size:17px;font-weight:800;color:#192622;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
  .mt-rest-h span{font-size:13.5px;font-weight:500;color:#4b5852}
}
/* ---------- phone look, second pass (founder: "looks not good" on a phone) ----------
   One deliberate top bar, menus as tappable pills that show there is more to the side, the current place marked in
   navy with the lime brand dot, headings that stack instead of squeezing, nothing cut off, no text under 12px,
   every tap target at least 44px. Brand: lime #b7e85a on navy #1b2a33 (lime only ever sits on navy, never on white). */
@media(max-width:640px){
  :root{--sb-navy:#1b2a33;--sb-lime:#b7e85a}

  /* top bar: logo, New, view switch and account on one row; the menu as a pill row underneath. The "Workspace > Today" line is dropped. */
  .project-centred-layout{padding-top:112px!important}
  .workspace-header{height:112px!important;grid-template-rows:60px 52px!important;padding:0 12px!important;border-bottom:0!important;box-shadow:0 1px 0 #e1e6e1,0 6px 16px #1b2a3314}
  .workspace-brand .brand-mark{width:96px!important;height:42px!important}
  .workspace-context{display:none!important}
  .workspace-controls{gap:6px!important}
  .workspace-controls .new-menu>summary{min-height:44px;padding:8px 14px;border-radius:99px}
  .workspace-controls>.btn{min-height:44px;padding:8px 12px;border-radius:99px;font-size:13.5px;border:1.5px solid #cfd8d1}
  .workspace-menu summary{min-height:44px;min-width:44px;justify-content:center;gap:4px;padding:0 2px}
  .workspace-menu .avatar{width:34px!important;height:34px!important;font-size:12px}
  .workspace-menu .account-label{display:none}
  .workspace-menu>div{top:52px;width:min(280px,calc(100vw - 24px))}
  .workspace-menu a{min-height:48px;display:flex;align-items:center;font-size:15px}
  .workspace-menu p{font-size:13px}
  .new-pop{max-height:calc(100dvh - 140px);overflow-y:auto}
  .new-pop button{min-height:46px;font-size:15px}
  .new-pop small{font-size:12px}
  .workspace-navigation,.project-workspace-heading .project-workspace-tabs{display:flex;align-items:center!important;gap:6px!important;overflow-x:auto;scrollbar-width:none;margin:0 -12px!important;padding:0 40px 8px 12px!important;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
  .workspace-navigation::-webkit-scrollbar,.project-workspace-tabs::-webkit-scrollbar{display:none}
  .workspace-navigation>a,.project-workspace-tabs .tab,.project-workspace-tabs .tab:first-child{flex:0 0 auto;display:inline-flex;align-items:center;height:40px;padding:0 15px!important;border:0!important;border-radius:99px;background:#eef1ee;color:#33403a;font-size:14.5px!important;font-weight:650;white-space:nowrap}
  .workspace-navigation>a[aria-current],.project-workspace-tabs .tab.selected{background:var(--sb-navy)!important;color:#fff!important}
  .workspace-navigation>a[aria-current]::before,.project-workspace-tabs .tab.selected::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sb-lime);margin-right:8px;flex:0 0 auto}

  /* the job header: shorter, readable, its section menu the same pills as the main menu */
  .project-workspace-heading{margin:-23px -16px 0!important;padding:8px 16px 4px!important;border-bottom:1px solid #e1e6e1}
  .project-workspace-heading>.back,.back{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:15px!important;font-weight:650;margin-bottom:0!important}
  .project-workspace-title{padding-bottom:12px!important}
  .project-workspace-title .eyebrow{font-size:12px!important;letter-spacing:.06em}
  .project-workspace-title h1{font-size:25px!important;line-height:1.15;margin:2px 0 4px}
  .project-workspace-title p{font-size:14.5px!important;line-height:1.45;color:#4b5852}
  .project-workspace-people{margin-top:10px!important}
  .project-workspace-heading .project-workspace-tabs{margin:0 -16px!important;padding:4px 40px 10px 16px!important}
  .project-workspace-toolbar{padding:14px 0 12px!important}
  .project-workspace-toolbar>span{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#4b5852}

  /* headings with a button beside them: the button moves underneath instead of squeezing the words into a column */
  .timeline-head{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
  .timeline-head>div{flex:1 1 100%;min-width:0}
  .timeline-head>.btn{width:100%}
  .panel-head,.section-title{flex-wrap:wrap;row-gap:10px}
  .panel-head>:first-child,.section-title>:first-child{flex:1 1 200px;min-width:0}

  /* small labels that were 9 to 12px */
  .eyebrow,.worker-heading .eyebrow{font-size:12.5px!important;letter-spacing:.06em}
  .worker-note,.form-hint,.modal-header p{font-size:14px!important;line-height:1.45}
  .ov-kpi-label,.crm-tile span{font-size:12.5px!important}
  .page-footer,.page-footer span{font-size:12.5px!important;flex-wrap:wrap;gap:4px 12px}
  .main .item-meta,.main .item-meta span,.main .tiny-info,.timeline-head p,.buy-context-note p,.bottom-note,.main .form-field>label{font-size:14px!important;line-height:1.45}
  .money-stat>span,.main h2>span,.main small{font-size:max(12.5px,.85em)}
  .main button>span{font-size:max(12.5px,.85em)}
  .avatar-stack .avatar,.task-row .avatar{width:32px!important;height:32px!important;font-size:12px!important}
  .gtp-daysh span small{font-size:12px}
  .worker-shell summary span,.worker-shell td small,.worker-shell small{font-size:max(13px,.85em)}
  .task-main{min-height:44px}

  /* things that were cut off at the right edge */
  .project-centred-layout>.main,.main{min-width:0;max-width:100vw}
  .crm-board{grid-template-columns:repeat(6,82%)!important;max-width:none;margin:0 -16px;padding:2px 16px 12px;scroll-snap-type:x mandatory;scroll-padding-left:16px}
  .crm-board>*{scroll-snap-align:start;min-width:0}
  .crm-tools{flex-wrap:wrap;gap:10px}
  .crm-tools>*{min-width:0}
  .crm-tiles{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;min-width:0}
  .crm-tile{padding:10px 10px 12px!important;min-width:0}
  .crm-tile strong{font-size:22px}
  .crm-tile small{font-size:12.5px;line-height:1.25}
  .queue-filters,.mt-fold-body .queue-filters{display:flex;flex-wrap:wrap!important;overflow:visible!important}

  /* small tap targets */
  .act-chip,.cw-add,.manager-check-button{min-height:44px;min-width:44px}
  .act-chip{padding:8px 14px;font-size:14.5px}
  .modal-header .icon-button,.modal .icon-button{width:44px;height:44px;flex:0 0 44px}
  .worker-site strong{font-size:15px}
  .text-button{min-width:44px}

  /* pop-up forms: a sheet from the bottom with its title and its buttons always in reach */
  .modal{border-radius:18px 18px 0 0!important}
  .modal-backdrop{padding:10px 0 0!important}
  .modal-header{position:sticky;top:0;z-index:2;background:#fff;padding:16px 16px 14px!important}
  .modal-header h2{font-size:20px}
  .modal-body{padding:18px 16px!important}
  .modal-footer{position:sticky;bottom:0;z-index:2;background:#fff!important;padding:12px 16px calc(12px + env(safe-area-inset-bottom))!important;box-shadow:0 -6px 16px #1b2a3312}
  .modal label,.field>label{font-size:14.5px}
  .pill-group{display:grid!important;grid-template-columns:1fr;gap:8px}
  .severity-option{min-height:56px;padding:12px 14px;border-radius:12px;border:1.5px solid #cfd8d1;font-size:15px;align-items:center;gap:12px}
  .severity-option input{width:22px;height:22px;margin:0;flex:0 0 auto}
  .severity-option b{font-size:15.5px}
  .severity-option small{font-size:14px;color:#4b5852}
  .severity-option:has(input:checked){background:#eef3ea;border-color:var(--sb-navy);box-shadow:inset 0 0 0 1px var(--sb-navy)}

  /* customer screen: a clear header band and comfortable rows */
  body.customer-mode{background:#f4f6f2}
  .cv{padding:0 16px 48px}
  .cv-head{margin:0 -16px 6px;padding:22px 16px 18px;background:var(--sb-navy);color:#fff;border-bottom:4px solid var(--sb-lime)}
  .cv-head small{color:#cfe8a6!important;font-size:12.5px;font-weight:700}
  .cv-head h1{font-size:25px;line-height:1.15;color:#fff}
  .cv-head p{color:#d6dde1!important}
  .cv-meta{color:#eef2f4;gap:6px 14px}
  .cv-meta b{color:#fff}
  .cv-head .text-button{color:var(--sb-lime);min-height:44px;font-weight:700}
  .cv-section{background:#fff;border:1px solid #e1e6e1;border-radius:16px;padding:16px;margin:14px 0}
  .cv-section h2{font-size:19px}
  .cv-card{background:#fff;border-color:#dfe4df;border-radius:12px}
  .cv-totals{gap:6px}
  .cv-totals div{padding:10px 4px;background:#f6f8f5;border-color:#e1e6e1}
  .cv-totals small{font-size:12.5px}
  .cv-totals b{font-size:clamp(14px,4.2vw,17px)}
  .cv-chip{font-size:13px;font-weight:700}
  .cv-hint{font-size:14px;line-height:1.45}
  .cv-foot{font-size:13px}
  .cv details>summary,.cv-bank>summary{min-height:48px;display:flex;align-items:center;gap:8px;font-weight:650;cursor:pointer}
  .cv-copy{grid-template-columns:1fr auto;row-gap:2px}
  .cv-copy span{grid-column:1/-1;font-size:13px;color:#4b5852}
  .cv-bar i{background:var(--sb-navy)}

  /* worker and subcontractor headers: the date and the brand line readable */
  .worker-brand .brand-sub{font-size:12px}
  .worker-shell>.worker-top{margin-left:0!important;margin-right:0!important;max-width:100%}
  .worker-shell label{font-size:max(13.5px,1em)}
  .df-row{flex-wrap:wrap}
  .df-row>.btn,.df-row .btn{flex:1 1 100%}
  .worker-site{border-radius:14px}

  /* selected filters, tiles and switches use the brand navy so "where am I" looks the same everywhere */
  .filter-button.selected,.filter-button[aria-pressed="true"],.mt-fold-body .queue-filters .selected,.m-tile[aria-pressed="true"]{background:var(--sb-navy)!important;border-color:var(--sb-navy)!important;color:#fff!important}
  .m-tile[aria-pressed="true"] .icon{color:var(--sb-lime)!important}
}
/* ---------- phone, live app only (from the founder's screen recordings, 8 Nov) ----------
   1. The signed-in status strip (Saved, Invite a worker, phone alerts, Reload, Sign out) was put above the page, so on a phone it
      slid under the fixed top bar and left a tall empty band. It now sits straight under the top bar as one compact strip.
   2. The notification bell floated over buttons and the browser bar. On the owner screens it sits in the top bar; on the
      crew screens it stays bottom right, smaller, above the phone's home bar.
   3. Cards whose rows touched the card edge (website enquiries, archived jobs) get their inner margins back. */
@media(max-width:640px){
  body:has(.workspace-header)>#remote-banner{margin-top:112px}
  body:has(>#remote-banner) .project-centred-layout{padding-top:0!important}
  #remote-banner{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:6px 12px 8px;font-size:13px;line-height:1.3;background:#fdf6e6;border-bottom:1px solid #e3d3a8}
  #remote-banner>span{flex:1 1 100%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#5a4822}
  #remote-banner>b{font-size:13px;color:#1f5a3d;margin-right:auto}
  #remote-banner .btn,#remote-banner .text-button{min-height:40px;padding:6px 12px;font-size:13.5px;border-radius:99px;white-space:nowrap}
  #remote-banner .text-button{border:1.5px solid #d8c79a;background:#fff;color:#1d2c26;font-weight:650}
  .remote-mode .workspace-controls>[data-action="worker"]{display:none}
  body:has(.workspace-header) .nb-bell{top:8px;bottom:auto;right:12px;width:44px;height:44px;border-width:1.5px;box-shadow:none;font-size:18px}
  body:has(.workspace-header) .workspace-controls{margin-right:50px}
  body:has(.workspace-header) .nb-panel{top:64px;bottom:auto;max-height:calc(100dvh - 80px)}
  body:not(:has(.workspace-header)) .nb-bell{width:52px;height:52px;bottom:calc(14px + env(safe-area-inset-bottom));right:14px}
  .ov-card>.cu-list{margin:0;padding:0 16px 6px}
  .ov-card>.cu-list li{padding:12px 0}
  .ov-card>.cu-list li .btn{min-height:44px}
  .crm-capture>.li-name,.crm-capture>.li-block,.crm-capture>.li-dev,.crm-capture>.li-opts,.crm-capture>.btn{margin-left:16px;margin-right:16px}
  .crm-capture>.btn{width:calc(100% - 32px);margin-bottom:16px}
  .li-name{font-size:14px}.li-name input{max-width:none}
  .li-lab{align-items:flex-end}.li-lab .btn{flex:0 0 auto}
  .li-code{font-size:13px;max-height:120px;overflow:auto}
  .li-dev>summary{min-height:44px;display:flex;align-items:center}
  .li-opts label{font-size:14.5px;min-height:44px;display:flex;align-items:center;gap:10px}
  .li-btns .btn{min-height:44px}
  .mp-nav{grid-template-columns:44px minmax(0,1fr) 44px auto;gap:4px}
  .mp-arrow{width:44px;height:44px}
  .mp-nav h2{font-size:17px}
  .mp-today{padding-left:12px;padding-right:12px}
}
@media(max-width:640px) and (prefers-reduced-motion:reduce){.mt-chev{transition:none}}
@media(prefers-reduced-motion:reduce){.btn.primary:active{transform:none}}
@media print{body{background:#fff}.m-tabs,.mc-next,.mc-phone{display:none!important}}