/* One button and color system for light and dark, driven by each workspace/location's branding.
   Loaded last. Four button kinds, used the same way everywhere:
     primary   – the one main action in an area (filled in the company button color)
     secondary – every other action (plain <button>: lightly tinted so it stands apart from the card)
     ghost     – quiet / link-like actions (no fill until hover, company color text)
     danger    – delete, decline, revoke, remove (red text and outline; never filled)
   Selected tabs and toggles use a light company tint with a company-colored underline. */

html[data-workspace-theme]{
 --btn-bg:color-mix(in srgb,var(--ui-text) 4%,var(--ui-surface));
 --btn-hover:color-mix(in srgb,var(--ui-text) 9%,var(--ui-surface));
 --btn-border:color-mix(in srgb,var(--ui-text) 16%,var(--ui-surface));
 --brand-text:var(--brand-dark,#165db0);
 --brand-tint:color-mix(in srgb,var(--brand-primary,#2583eb) 12%,var(--ui-surface));
 --brand-tint-strong:color-mix(in srgb,var(--brand-primary,#2583eb) 22%,var(--ui-surface));
 --focus-ring:color-mix(in srgb,var(--brand-primary,#2583eb) 70%,transparent);
 --danger:#b42318;--danger-tint:#fdecea;--danger-border:#f1b3ab;
 --ok:#2e6b1f;--ok-tint:#e9f5e3;--ok-border:#bcd9ad;
 /* Older screens were written with fixed SERVPRO greens. Point them at the company colors. */
 --green:var(--brand-text);--servpro-green:var(--brand-primary,#2583eb);
 --green-ink:var(--ui-text);--green-tint:var(--brand-tint);--green-border:color-mix(in srgb,var(--brand-primary,#2583eb) 30%,var(--ui-surface));
}
html[data-workspace-theme=dark]{
 --btn-bg:color-mix(in srgb,var(--ui-text) 7%,var(--ui-surface));
 --btn-hover:color-mix(in srgb,var(--ui-text) 13%,var(--ui-surface));
 --btn-border:color-mix(in srgb,var(--ui-text) 20%,var(--ui-surface));
 --brand-text:color-mix(in srgb,var(--brand-primary,#2583eb) 55%,white);
 --brand-tint:color-mix(in srgb,var(--brand-primary,#2583eb) 20%,var(--ui-surface));
 --brand-tint-strong:color-mix(in srgb,var(--brand-primary,#2583eb) 32%,var(--ui-surface));
 --danger:#ff9b8f;--danger-tint:#3a2220;--danger-border:#7a3a33;
 --ok:#9fd98a;--ok-tint:#22311d;--ok-border:#456b38;
}

/* Secondary: plain buttons that are not tabs, nav, cards or rows. */
html[data-workspace-theme] button:not([class]):not(:is(.tabs,.project-groups,.project-subsections,.dashboard-switch,.nav,.mobile-nav,.project-group,.notification-tray,.calendar-day,.task-menu-list) button),
html[data-workspace-theme] :is(button,a).secondary{
 background:var(--btn-bg);border:1px solid var(--btn-border);color:var(--ui-text);font-weight:600;transition:background-color .12s,border-color .12s,box-shadow .12s}
html[data-workspace-theme] button:not([class]):not(:is(.tabs,.project-groups,.project-subsections,.dashboard-switch,.nav,.mobile-nav,.project-group,.notification-tray,.calendar-day,.task-menu-list) button):not(:disabled):hover,
html[data-workspace-theme] :is(button,a).secondary:hover{background:var(--btn-hover)}

/* Primary */
html[data-workspace-theme] :is(button.primary,a.primary,.button.primary){
 background:var(--brand-dark);border:1px solid var(--brand-dark);color:var(--brand-button-ink,#fff);font-weight:700;
 box-shadow:0 1px 2px color-mix(in srgb,black 18%,transparent);transition:background-color .12s,box-shadow .12s}
html[data-workspace-theme] :is(button.primary,a.primary):not(:disabled):hover{
 background:color-mix(in srgb,var(--brand-dark) 86%,black);border-color:color-mix(in srgb,var(--brand-dark) 86%,black)}
html[data-workspace-theme=dark] :is(button.primary,a.primary):not(:disabled):hover{
 background:color-mix(in srgb,var(--brand-dark) 82%,white);border-color:color-mix(in srgb,var(--brand-dark) 82%,white)}

/* Ghost */
html[data-workspace-theme] :is(button.ghost,a.ghost){background:transparent;border:1px solid transparent;color:var(--brand-text);font-weight:600;box-shadow:none}
html[data-workspace-theme] :is(button.ghost,a.ghost):not(:disabled):hover{background:var(--btn-bg);border-color:var(--btn-border)}

/* Danger: explicit class plus the app's existing delete/decline/remove controls. */
html[data-workspace-theme] :is(button.danger,
 button[data-action="bid-decline"],button[data-delete-job-open],button[data-chat-delete],button[data-chat-delete-thread],
 button[data-community-revoke],button[data-community-remove],button[data-signing-revoke],button[data-revoke],
 button[data-cl-remove],button[data-remove-item],button[data-schedule-remove],button[data-rule-remove],button[data-off-remove],
 button[data-remove-claim-contact],button[data-remove],button[data-photo-remove],button[data-drying-remove],button[data-town-remove],
 button[data-remove-map],button[data-wip-remove-material],button[data-sds-remove],button[data-roster-remove],button[data-guideline-remove]){
 background:transparent;border:1px solid var(--danger-border);color:var(--danger);font-weight:600;box-shadow:none}
html[data-workspace-theme] :is(button.danger,button[data-action="bid-decline"],button[data-delete-job-open],button[data-chat-delete],button[data-chat-delete-thread],button[data-community-revoke],button[data-community-remove],button[data-signing-revoke],button[data-revoke],button[data-cl-remove],button[data-remove-item],button[data-schedule-remove],button[data-rule-remove],button[data-off-remove],button[data-remove-claim-contact],button[data-remove],button[data-photo-remove],button[data-drying-remove],button[data-town-remove],button[data-remove-map],button[data-wip-remove-material],button[data-sds-remove],button[data-roster-remove],button[data-guideline-remove]):not(:disabled):hover{background:var(--danger-tint)}
html[data-workspace-theme] button.danger.primary{background:var(--danger);border-color:var(--danger);color:#fff}

/* Disabled looks disabled, in both modes, for every kind. */
html[data-workspace-theme] :is(button,.button):disabled{opacity:.5;cursor:not-allowed;box-shadow:none}

/* One focus ring in the company color. */
html[data-workspace-theme] :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* Selected tabs and toggles: company tint + underline, never a different color per screen. */
html[data-workspace-theme] :is(.tabs,.project-groups,.project-subsections) button.active,
html[data-workspace-theme] .dashboard-switch button.active{
 background:var(--brand-tint);color:var(--ui-text);border-color:transparent;font-weight:700;box-shadow:inset 0 -3px var(--brand-primary,#2583eb)}
html[data-workspace-theme] .dashboard-switch{background:var(--btn-bg);border:1px solid var(--btn-border);border-radius:10px;padding:3px}
html[data-workspace-theme] .dashboard-switch button:not(.active){background:transparent;color:var(--ui-muted)}
html[data-workspace-theme] :is(.tabs,.project-groups,.project-subsections) button:not(.active):hover,
html[data-workspace-theme] .dashboard-switch button:not(.active):hover{background:var(--btn-bg);color:var(--ui-text)}

/* Status colors stay meaningful (green = done/paid), separate from company colors. */
html[data-workspace-theme] .badge:not(.amber):not(.gray):not(.red){background:var(--ok-tint);color:var(--ok);border-color:var(--ok-border)}
html[data-workspace-theme] .notice:not(.warning):not(.error){background:var(--brand-tint);border-color:color-mix(in srgb,var(--brand-primary,#2583eb) 28%,var(--ui-surface));color:var(--ui-text)}
html[data-workspace-theme] .customer-draw-card.is-paid{border-top-color:var(--ok)}

/* Former fixed-green details now follow the company palette. */
html[data-workspace-theme] .calendar-day.today{border-color:var(--brand-primary);background:var(--brand-tint)}
html[data-workspace-theme] .calendar-entry{border-left-color:var(--brand-primary)}
html[data-workspace-theme] .correspondence-shortcuts button{background:var(--brand-tint);border-color:color-mix(in srgb,var(--brand-primary) 40%,var(--ui-surface));color:var(--ui-text)}
html[data-workspace-theme] .correspondence-shortcuts button:hover{background:var(--brand-tint-strong)}
html[data-workspace-theme] .photo-download-all{background:var(--brand-dark);color:var(--brand-button-ink,#fff)}
html[data-workspace-theme] :is(.stat-link:hover,.stat-link:focus-visible,.daily-photo-grid img:hover){outline-color:var(--brand-primary)}
html[data-workspace-theme] .calendar-selected-order{outline-color:var(--brand-primary)}
html[data-workspace-theme] .gantt-bar{fill:var(--brand-primary)}
html[data-workspace-theme] .check input,html[data-workspace-theme] input[type=checkbox],html[data-workspace-theme] input[type=radio]{accent-color:var(--brand-dark)}

/* Header bands: follow the display mode instead of staying light in dark mode. */
html[data-workspace-theme=dark] .panel-head,
html[data-workspace-theme=dark] .my-day-section-head,
html[data-workspace-theme=dark] :is(.my-day-completed,.my-day-upcoming)>summary{background:var(--ui-raised)!important;color:var(--ui-text);border-color:var(--ui-line)}
html[data-workspace-theme=dark] .panel-head :is(h1,h2,h3,.eyebrow,label),
html[data-workspace-theme=dark] .my-day-section-head :is(h3,span){color:var(--ui-text)!important}
html[data-workspace-theme=dark] .panel-head :is(.subtle,.muted,small){color:var(--ui-muted)!important}

html[data-workspace-theme=dark] .required-mark{color:#ff9b8f}
/* Numbers read as numbers (not as a "good" status); links use the company color. */
html[data-workspace-theme] :is(.stat strong,.line.total){color:var(--ui-text)}
html[data-workspace-theme] :where(a:not(.button,.primary,.secondary)){color:var(--brand-text)}
html[data-workspace-theme] .topbar .eyebrow{color:var(--ui-muted)}

/* Task dialog title bars and footers follow the display mode. */
html[data-workspace-theme] :is(.project-action-overlay__header,.project-action-overlay__footer,.modal-top,dialog.modal>header){background:var(--ui-surface);color:var(--ui-text);border-color:var(--ui-line)}
html[data-workspace-theme] :is(.project-action-overlay__header,.modal-top,dialog.modal>header) :is(h1,h2,h3){color:var(--ui-text)}

/* Inputs: a hair darker than cards in light mode so fields read as fields. */
html[data-workspace-theme] :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),select,textarea){background:var(--ui-surface);border-color:var(--btn-border)}
html[data-workspace-theme=dark] :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),select,textarea){background:color-mix(in srgb,black 18%,var(--ui-surface))}

/* Notifications tray */
html[data-workspace-theme] .notification-tray>.notification-bell{border-color:var(--btn-border);background:var(--btn-bg);color:var(--ui-text)}
html[data-workspace-theme] .notification-count{background:var(--brand-dark);color:var(--brand-button-ink,#fff);border-color:var(--ui-surface)}
html[data-workspace-theme] .notification-bell.has-urgent .notification-count{background:#c4271b;color:#fff}
html[data-workspace-theme] .nt-menu-panel{padding:0;width:min(440px,calc(100vw - 24px));border-color:var(--ui-line);box-shadow:0 14px 40px color-mix(in srgb,black 22%,transparent)}
.nt-menu-panel .notification-menu-heading{position:sticky;top:0;z-index:2;background:inherit;padding:14px 16px 8px;gap:10px}
.nt-menu-panel .notification-menu-heading h2{font-size:17px;margin-right:auto}
.nt-menu-panel .notification-menu-heading [data-notice-close]{min-height:34px;padding:4px 10px}
.nt-scope{display:inline-flex;padding:2px;border-radius:9px;background:var(--btn-bg,#f2f2f0);border:1px solid var(--btn-border,#ddd)}
.nt-scope button{min-height:30px!important;padding:3px 10px;border:0!important;background:transparent!important;font-size:13px;font-weight:600;color:var(--ui-muted,#666);border-radius:7px;box-shadow:none!important}
.nt-scope button.active{background:var(--ui-surface,#fff)!important;color:var(--ui-text,#222);box-shadow:0 1px 2px color-mix(in srgb,black 15%,transparent)!important}
.nt-views{display:flex;gap:4px;padding:0 12px;border-bottom:1px solid var(--ui-line,#ddd);position:sticky;top:56px;z-index:2;background:inherit}
.nt-views button{min-height:36px!important;border:0!important;border-radius:0!important;background:transparent!important;color:var(--ui-muted,#666);font-size:14px;font-weight:600;padding:6px 8px;box-shadow:none!important}
.nt-views button.active{color:var(--ui-text,#222);box-shadow:inset 0 -2px var(--brand-primary,#2583eb)!important}
.nt-count{display:inline-block;min-width:18px;padding:0 6px;border-radius:9px;background:var(--btn-bg,#eee);color:var(--ui-muted,#555);font-size:11px;font-weight:700;text-align:center;line-height:18px}
.nt-list{padding:4px 16px 8px}
.nt-section h3{display:flex;align-items:center;gap:8px;margin:14px 0 4px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ui-muted,#666)}
.nt-section h3 .nt-ack-all{margin-left:auto;min-height:28px!important;padding:2px 8px;font-size:12px;text-transform:none;letter-spacing:0}
.nt-section-now h3{color:var(--danger,#b42318)}
.nt-row{display:flex;gap:10px;align-items:flex-start;padding:10px 0 10px 10px;margin:0;border-bottom:1px solid var(--ui-line,#e3e3e3);border-left:3px solid transparent}
.nt-row:last-child{border-bottom:0}
.nt-row.nt-now{border-left-color:var(--danger,#b42318)}
.nt-row.nt-todo{border-left-color:var(--brand-primary,#2583eb)}
.nt-row.nt-fyi{border-left-color:var(--ui-line,#ccc)}
.nt-main{flex:1;min-width:0}
.nt-msg{margin:0!important;font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.nt-meta,.nt-note{display:block;margin-top:3px;font-size:12px;color:var(--ui-muted,#666);overflow-wrap:anywhere}
.nt-actions{display:flex;gap:4px;align-items:center;flex:none}
.nt-actions .nt-open,.nt-actions [data-completion-ack]{min-height:34px!important;padding:4px 12px;font-size:13px;white-space:nowrap}
.nt-menu{position:relative}
.nt-menu>summary{list-style:none;cursor:pointer;min-width:34px;min-height:34px;display:grid;place-items:center;border-radius:8px;font-weight:800;color:var(--ui-muted,#666)}
.nt-menu>summary::-webkit-details-marker{display:none}
.nt-menu>summary:hover,.nt-menu[open]>summary{background:var(--btn-bg,#eee);color:var(--ui-text,#222)}
.nt-menu-list{position:absolute;right:0;top:38px;z-index:5;display:grid;gap:2px;min-width:210px;padding:6px;border:1px solid var(--ui-line,#ddd);border-radius:10px;background:var(--ui-surface,#fff);box-shadow:0 8px 24px color-mix(in srgb,black 18%,transparent)}
.nt-menu-list button{min-height:36px!important;text-align:left;border:0!important;background:transparent!important;font-weight:600;font-size:13px;padding:6px 10px;box-shadow:none!important}
.nt-menu-list button:hover{background:var(--btn-bg,#eee)!important}
.nt-empty{padding:22px 4px;text-align:center;color:var(--ui-muted,#666)}
.nt-empty p{margin:4px 0}
.nt-settings{margin:0;padding:10px 16px 14px;border-top:1px solid var(--ui-line,#ddd)}
.nt-settings>summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--ui-muted,#666)}
.nt-settings[open]{display:grid;gap:8px}
.nt-menu-panel [data-notice-status]:empty{display:none}
.nt-menu-panel [data-notice-status]{margin:0 16px 12px}

/* Grouped screens (Workspace settings) */
.screen-task-groups{display:grid;gap:22px;margin-top:8px}
.screen-task-group>.screen-task-heading{margin:0 0 2px;font-size:18px}
.screen-task-group-note{margin:0 0 10px;color:var(--ui-muted,#666);font-size:14px}
.screen-task-summary{line-height:1.4}
.screen-task-group>.customize-layout-toggle{display:none!important}

/* Tables used for rosters and libraries */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.roster-search,.sds-search{max-width:340px;margin:4px 0 10px}
:is(.roster-table,.sds-table){width:100%;border-collapse:collapse}
:is(.roster-table,.sds-table) th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ui-muted,#666);text-align:left;padding:8px 10px;border-bottom:1px solid var(--ui-line,#ddd)}
:is(.roster-table,.sds-table) td{padding:10px;border-bottom:1px solid var(--ui-line,#e6e6e6);vertical-align:top}
.roster-table td small{display:block;color:var(--ui-muted,#666);font-size:12px;margin-top:2px}
.roster-table td small:empty{display:none}
.roster-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.roster-actions button{min-height:36px!important;padding:4px 10px;font-size:13px}
.roster-actions [data-directory-photo-kind]{background:transparent!important;border-color:transparent!important;color:var(--brand-text,#165db0)}
.sds-table a.button{display:inline-block;padding:6px 10px;border-radius:8px;text-decoration:none;font-size:13px;font-weight:600;border:1px solid var(--btn-border,#ccc);background:var(--btn-bg,#f4f4f2);color:var(--ui-text,#222);white-space:nowrap}
.block-small{display:block;color:var(--ui-muted,#666);font-size:12px;margin-top:2px}
.sds-add{margin-top:14px;border:1px solid var(--ui-line,#ddd);border-radius:12px;padding:10px 14px}
.sds-add>summary{cursor:pointer;font-weight:700}
.sds-empty{padding:12px;border-radius:10px;background:var(--brand-tint,#eef4fd)}
@media(max-width:700px){
 .roster-table thead{display:none}
 .roster-table tr{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:10px 0;border-bottom:1px solid var(--ui-line,#e6e6e6)}
 .roster-table td{border:0;padding:0}
 .roster-table td.roster-actions{grid-column:1/-1;justify-content:flex-start}
}

/* On-call rules dialog: sections side by side on wide screens */
dialog.oncall-roster-dialog{width:min(820px,96vw);max-height:92vh;border-radius:14px;padding:20px 22px}
dialog.oncall-roster-dialog form{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px 18px;align-items:start}
dialog.oncall-roster-dialog form>:is(p,details,[role=status],button,.field:has(textarea)){grid-column:1/-1}
dialog.oncall-roster-dialog fieldset{border:1px solid var(--ui-line,#ddd);border-radius:12px;padding:10px 14px;margin:0}
dialog.oncall-roster-dialog legend{font-weight:700;padding:0 4px}
dialog.oncall-roster-dialog fieldset fieldset{border-style:dashed;margin-top:8px}
dialog.oncall-roster-dialog .check{padding:6px 0}
dialog.oncall-roster-dialog form>button{justify-self:start}

/* Branding sample */
.brand-swatch{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:12px 0 4px}
.brand-swatch-pane{border-radius:12px;padding:12px;display:grid;gap:10px;border:1px solid #dededc}
.brand-swatch-light{background:#fff;color:#242424}
.brand-swatch-dark{background:#222427;color:#f0f0ee;border-color:#45484e}
.brand-swatch-title{font-size:11px;text-transform:uppercase;letter-spacing:.05em;opacity:.7}
.brand-swatch-tabs{display:flex;gap:4px}
.brand-swatch-tabs span{padding:6px 10px;border-radius:8px 8px 0 0;font-size:13px;font-weight:600;opacity:.75}
.brand-swatch-tabs .is-active{opacity:1;background:color-mix(in srgb,var(--sw-primary,#2583eb) 14%,transparent);box-shadow:inset 0 -3px var(--sw-primary,#2583eb)}
.brand-swatch-buttons{display:flex;flex-wrap:wrap;gap:6px}
.brand-swatch-buttons span{padding:7px 12px;border-radius:9px;font-size:13px;font-weight:600;border:1px solid transparent}
.bs-primary{background:var(--sw-dark,#165db0);color:var(--sw-ink,#fff);font-weight:700}
.brand-swatch-light .bs-secondary{background:#f3f3f2;border-color:#d8d8d6!important}
.brand-swatch-dark .bs-secondary{background:#2e3034;border-color:#4a4d52!important}
.brand-swatch-light :is(.bs-ghost,.bs-link){color:var(--sw-dark,#165db0)}
.brand-swatch-dark :is(.bs-ghost,.bs-link){color:color-mix(in srgb,var(--sw-primary,#2583eb) 55%,white)}
.brand-swatch-light .bs-danger{color:#b42318;border-color:#f1b3ab!important}
.brand-swatch-dark .bs-danger{color:#ff9b8f;border-color:#7a3a33!important}
.bs-link{font-size:13px;font-weight:600;text-decoration:underline}

/* In-page report header (year report). Popup print windows keep their own styles. */
.year-report-print-brand .report-brand{display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:4px solid var(--brand-primary,#2583eb);padding:0 0 14px;margin:0 0 22px}
.year-report-print-brand .report-brand svg,.year-report-print-brand .report-brand-logo{width:170px;max-height:80px;height:auto;object-fit:contain;flex-shrink:0}
.year-report-print-brand .report-brand div{text-align:right;color:var(--brand-dark,#165db0);font:700 12px Arial;letter-spacing:1px}
.year-report-print-brand .report-brand small{display:block;font-weight:400;letter-spacing:0;margin-top:6px;color:var(--ui-muted,#555)}

@media print{html[data-workspace-theme] :is(button,.button){box-shadow:none!important}}

/* Public demo: sign-in choices and the always-visible "shared demo" banner. */
.demo-landing{max-width:880px;margin:24px auto;display:grid;gap:12px}
.demo-landing>img{width:210px;height:auto}
.demo-try-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.demo-try{display:flex;flex-direction:column;gap:8px}
.demo-try>button{margin-top:auto;min-height:48px}
.demo-banner{padding:8px 16px;background:color-mix(in srgb,var(--brand-primary,#165db0) 10%,var(--ui-surface,#fff));color:var(--ui-text,#1f2a24);border-bottom:1px solid var(--ui-line,#d8ddd9);font-size:14px}
.demo-banner a{margin-left:6px}

/* Marketing site: demo button beside the trial, company finder, feedback tab. */
.rjf-beta-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0 6px}
.rjf-button-secondary{background:transparent!important;color:inherit!important;border:1px solid currentColor!important}
.company-finder-row{display:flex;align-items:center;gap:6px}
.company-finder-row input{flex:1;min-width:0}
.company-finder-row span{white-space:nowrap;color:var(--ui-muted,#5b6660)}
.feedback-tab{position:fixed;left:0;top:50%;transform:translateY(-50%) rotate(-90deg);transform-origin:left top;z-index:40;border-radius:0 0 10px 10px;padding:8px 16px;min-height:40px;font-weight:600;background:var(--brand-dark,#165db0);color:#fff;border:0;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.feedback-dialog{width:min(520px,94vw);border:0;border-radius:14px;padding:20px}
.feedback-dialog textarea{width:100%;font-size:16px}
@media(max-width:600px){.company-finder-row{flex-direction:column;align-items:stretch}.feedback-tab{top:auto;bottom:90px}}

/* Phone portrait header: the button row took 334 of 375px, squeezing the logo to 7px (it overlapped
   the buttons) and the Cleo briefing button to 34px. Logo, buttons and Cleo each get their own row. */
@media (max-width:700px){
 header.topbar{grid-template-columns:minmax(0,1fr)}
 header.topbar .topbar-brand{grid-column:1;grid-row:1}
 header.topbar .profile{grid-column:1;grid-row:2;justify-self:stretch;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px}
 header.topbar [data-executive-open]{grid-column:1;justify-self:start;width:auto;white-space:nowrap;min-height:44px}
 /* The notification panel stays inside the screen, and takes no space while closed. */
 .notification-tray:not([open])>.notification-menu{display:none}
 /* Page headings: action buttons wrap instead of pushing past the screen (On-call "Request on-call time off"). */
 main.main .heading{flex-wrap:wrap}
 main.main .heading :is(button,.button){white-space:normal;max-width:100%}
 html[data-workspace-theme] .nt-menu-panel,.topbar .notification-menu{left:12px!important;right:12px!important;width:auto!important;max-width:none}
}
/* Touch phones: every button is at least a 44px finger target (close ✕, calendar arrows, Rearrange). */
@media (max-width:700px) and (pointer:coarse){
 main.main button,.nt-menu-panel button,header.topbar button,header.topbar .profile .workspace-theme-toggle{min-height:44px;min-width:44px}
}

/* Projects: search, Status and Phase on one row (stacked on phones). */
.project-filters{grid-template-columns:minmax(0,1fr) minmax(160px,220px) minmax(180px,260px)}
@media(max-width:700px){.project-filters{grid-template-columns:minmax(0,1fr)}}

/* Overview view switch sits first in the filter bar. */
.dashboard-filter .ov-view select{min-width:150px}
.company-financials-list{list-style:none;margin:8px 0;padding:0;display:grid;gap:4px}
.company-financials-list small{color:var(--ui-muted,#5b6660)}
/* Employee editor: responsibilities as a compact checkbox grid. */
.responsibility-picker{border:1px solid var(--ui-line,#d8ddd9);border-radius:8px;padding:8px 12px 10px;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px 12px}
.responsibility-picker legend{padding:0 4px;font-weight:600}
.responsibility-picker legend small{display:block;font-weight:400;color:var(--ui-muted,#5b6660)}
.roster-table td small+small{display:block}
.team-only-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px 24px;margin:16px 0 0}
.team-only-facts dt{font-size:13px;color:var(--ui-muted,#5b6660)}
.team-only-facts dd{margin:2px 0 0}

/* Overview: empty states are one line; the welcome block is just its button. */
.ov-empty{margin:4px 0 8px;color:var(--ui-muted,#5b6660);font-size:14px}
.calendar-week>.ov-empty{grid-column:1/-1}
.job-needs-grid>.ov-empty{grid-column:1/-1}
.main>.welcome.welcome--compact{min-height:0;padding:0;margin:0 0 12px;background:none;border:0;box-shadow:none;display:flex;justify-content:flex-start}

/* Overview weather status when there is no alert: one small line, details on demand. */
.weather-chip{display:inline-block;margin:0 0 8px}
.weather-chip>summary{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 12px;border:1px solid var(--ui-line,#dde3dc);border-radius:999px;font-size:13px;color:var(--ui-muted,#5b6660);background:var(--ui-surface,#fff);cursor:pointer;list-style:none}
.weather-chip>summary::-webkit-details-marker{display:none}
.weather-chip>summary::before{content:'☁'}
.weather-chip--warn>summary{color:var(--danger,#b42318);border-color:currentColor}
.weather-chip--warn>summary::before{content:'⚠'}
.weather-chip[open]>summary{margin-bottom:8px}
.weather-chip-body{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.weather-chip-body>p{flex-basis:100%;margin:0}
@media(pointer:coarse){.weather-chip>summary{min-height:44px}}

/* Job page tools as expandable sections in place (no "Choose what to work on" pop-up cards). */
.screen-section{margin:0 0 10px;border:1px solid var(--ui-line,#dde3dc);border-radius:12px;background:var(--ui-surface,#fff);overflow:hidden}
.screen-section>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;min-height:52px;padding:14px 44px 14px 16px;cursor:pointer;list-style:none;position:relative}
.screen-section>summary::-webkit-details-marker{display:none}
.screen-section>summary::after{content:'▸';position:absolute;right:18px;top:15px;color:var(--ui-muted,#5b6660);transition:transform .15s}
.screen-section[open]>summary::after{transform:rotate(90deg)}
.screen-section>summary strong{font-size:16px;color:var(--ui-text,inherit)}
.screen-section-summary{font-size:13px;color:var(--ui-muted,#5b6660)}
.screen-section>summary:hover{background:var(--btn-hover,rgba(0,0,0,.03))}
.screen-section>summary:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--focus-ring,#2583eb)}
.screen-section[open]>summary{border-bottom:1px solid var(--ui-line,#dde3dc)}
.screen-section>:is(section,div).panel{border:0;border-radius:0;box-shadow:none;margin:0;background:transparent}
/* The title moved into the summary row: drop a header band left empty, and the one-line summary once open. */
.screen-section .panel-head:not(:has(> :not([hidden]))){display:none}
.screen-section[open] .screen-section-summary{display:none}
@media print{.screen-section>summary::after{display:none}}

/* Folded "how this works" help text on the job page. */
.ui-hint{margin:4px 0 8px}
.ui-hint>summary{display:inline-flex;align-items:center;min-height:28px;cursor:pointer;list-style:none;font-size:13px;color:var(--ui-muted,#5b6660)}
.ui-hint>summary::-webkit-details-marker{display:none}
.ui-hint>summary:hover{color:var(--brand-text,#165db0)}
.ui-hint[open]>summary{margin-bottom:2px}
.ui-hint>p{margin:0}
@media(pointer:coarse){.ui-hint>summary{min-height:44px}}
@media print{.ui-hint>p{display:block}}

/* One-line draw summary on job tabs other than Job overview. */
.project-header-draws--compact{padding:8px 14px}
.project-header-draws--compact p{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.project-header-draws--compact button{margin-left:auto}