/* Bit & Bearing pilot shell - brand tokens from brand/tokens/brand.css (Precision Workshop direction). */
@font-face{font-family:Manrope;src:url('/manrope.ttf') format('truetype');font-weight:200 800;font-display:swap}
:root{--bb-ink:#14261F;--bb-paper:#F3F5F0;--bb-mint:#D5E6DD;--bb-orange:#C99A2E;--bb-slate:#4F6359;--bb-white:#FFFFFF;--bb-line:#DDE3D9;--bb-control:#768A80;--bb-blue:#1E6B4F;--bb-bluebg:#E8F2EC;--bb-amber:#7F4C00;--bb-amberbg:#FBEBCB;--bb-red:#A01F29;--bb-redbg:#FADEDE;--bb-green:#1A6339;--bb-greenbg:#DDF2E5;--bb-neutralbg:#ECF0EA;--bb-menu:#10362B;--bb-menu-text:#D5E6DD;--bb-menu-muted:#8DAE9F;--bb-menu-active:#1C4A3C;--bb-open:#1A4B98;--bb-openbg:#E2ECFB;--bb-prog:#56379F;--bb-progbg:#ECE5FA;--bb-med:#8A430A;--bb-medbg:#FBE8D4;--bb-low:#205B3C;--bb-lowbg:#E3F0E9;--bb-font:Manrope,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;--bb-mono:"IBM Plex Mono",Consolas,monospace;--bar:56px;--tabs:64px;--gutter:16px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bb-paper);color:var(--bb-ink);font:16px/1.5 var(--bb-font);min-height:100vh;padding-bottom:calc(var(--tabs) + env(safe-area-inset-bottom))}
body:has(#workspace[hidden]){padding-bottom:0}

/* App bar */
#appbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;min-height:var(--bar);padding:8px var(--gutter);background:var(--bb-menu);color:var(--bb-paper)}
#appbar svg{width:32px;height:32px;flex:none}
#appbar .brand{display:flex;flex-direction:column;line-height:1.15}
#appbar .brand b{font-weight:700;font-size:1.05rem}
#appbar .brand small{font-size:.75rem;color:var(--bb-mint);letter-spacing:.02em}
#appbar h1{font-size:1rem;font-weight:600;margin:0 0 0 auto;color:var(--bb-paper);opacity:.9}

/* Status banner */
#notice{margin:0;padding:10px var(--gutter);background:var(--bb-mint);color:var(--bb-ink);font-size:.9rem;border-bottom:1px solid var(--bb-line)}
#notice:empty{display:none}

main{max-width:720px;margin:0 auto;padding:0 var(--gutter) 24px}

/* Headings and text */
h2{font-size:1.15rem;font-weight:700;margin:20px 0 10px}
h3{font-size:1rem;font-weight:700;margin:16px 0 6px}
p{margin:8px 0}
.muted,#queue-status,#work-filter-applied,#asset-status{color:var(--bb-slate);font-size:.9rem}
pre{font-family:var(--bb-mono);font-size:.8rem;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--bb-neutralbg);border-radius:8px;padding:10px}
pre:empty{display:none}
section{white-space:normal;overflow-wrap:anywhere}
.job-instructions{white-space:pre-wrap;overflow-wrap:anywhere}

/* Controls */
label{display:block;margin:12px 0 0;font-size:.9rem;font-weight:600;color:var(--bb-slate)}
input,select,textarea{display:block;width:100%;max-width:100%;min-height:52px;margin-top:6px;padding:12px 14px;font:400 1rem/1.5 var(--bb-font);color:var(--bb-ink);background:var(--bb-white);border:1px solid var(--bb-control);border-radius:8px}
textarea{min-height:110px}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%234F6359' stroke-width='2' d='M3 6l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
input[type=checkbox]{display:inline-block;width:22px;height:22px;min-height:0;margin:0 10px 0 0;vertical-align:middle;accent-color:var(--bb-ink)}
label:has(> input[type=checkbox]),label:has(> input[type=checkbox] + span){display:flex;align-items:flex-start;gap:0;font-weight:500;color:var(--bb-ink)}
label:has(> input[type=checkbox]) input{margin-top:2px}
button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;margin:8px 8px 0 0;padding:10px 18px;font:600 .95rem/1.3 var(--bb-font);color:var(--bb-ink);background:var(--bb-white);border:1px solid var(--bb-ink);border-radius:8px;cursor:pointer}
button[type=submit],button.primary,#begin,#login button,#verify button,#save{color:var(--bb-paper);background:var(--bb-menu)}
button.secondary{color:var(--bb-ink);background:var(--bb-white);border-color:var(--bb-control)}
button:disabled{cursor:not-allowed;color:var(--bb-slate);background:var(--bb-neutralbg);border-color:var(--bb-control)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid var(--bb-ink);outline-offset:2px}
fieldset{min-width:0;margin:12px 0;padding:14px 16px 16px;border:1px solid var(--bb-line);border-radius:12px;background:var(--bb-white)}
legend{padding:0 6px;font-weight:700;color:var(--bb-ink)}
a{color:var(--bb-blue)}
[role=alert]:empty{display:none}
[role=alert]{color:var(--bb-red);font-weight:600}

/* Sign-in card */
#login,#verify{max-width:440px;margin:28px auto 0;padding:20px 18px 22px;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:12px}
#login button,#verify button{width:100%;min-height:56px;margin:14px 0 0;font-size:1.05rem}
#login label:first-of-type{margin-top:0}
#consent,#terms-consent-label{display:block;position:relative;margin:14px 0 0;padding-left:34px;font-size:.85rem;font-weight:400;color:var(--bb-slate);line-height:1.4}
#consent input,#terms-consent-label input{position:absolute;left:0;top:2px;margin:0}
#consent a,#terms-consent-label a{white-space:nowrap}

/* Views (bottom tabs) */
#workspace[data-view] > [data-view]{display:none}
#workspace[data-view=overview] > [data-view~=overview],#workspace[data-view=work] > [data-view~=work],#workspace[data-view=requests] > [data-view~=requests],#workspace[data-view=create] > [data-view~=create],#workspace[data-view=pms] > [data-view~=pms],#workspace[data-view=people] > [data-view~=people],#workspace[data-view=more] > [data-view~=more],#workspace[data-view=account] > [data-view~=account],#workspace[data-view=assets] > [data-view~=assets],#workspace[data-view=locations] > [data-view~=locations],#workspace[data-view=library] > [data-view~=library],#workspace[data-view=messages] > [data-view~=messages]{display:block}
#workspace[data-view] > [data-view]:is([hidden]){display:none}
#workspace > section:not([data-view]){display:block}
#workspace[data-view]:not([data-view=more]):not([data-view=pms]) > :not([data-view]){display:none}
#workspace[data-view] > button:not([data-view]){display:none}
#workspace.requester>:not(#requests):not(#account):not(#renew):not(#logout){display:none!important}

#tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:space-around;min-height:var(--tabs);padding:4px 0 env(safe-area-inset-bottom);background:var(--bb-white);border-top:1px solid var(--bb-line)}
body:has(#workspace[hidden]) #tabs{display:none}
#tabs button{flex:1 1 0;flex-direction:column;gap:2px;min-height:56px;margin:0;padding:6px 2px;font-size:.7rem;font-weight:600;color:var(--bb-slate);background:none;border:0;border-radius:0}
#tabs button svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#tabs button[aria-current=page]{color:var(--bb-ink)}
#tabs button[aria-current=page] svg{stroke:var(--bb-ink)}
#tabs button[aria-current=page]::after{content:"";display:block;width:28px;height:3px;border-radius:2px;background:var(--bb-orange);margin-top:2px}
body.requester #tabs button:not([data-tab=requests]):not([data-tab=account]){display:none}

/* Work list cards */
#queue{list-style:none;margin:8px 0;padding:0}
#queue li{padding:0;margin:0 0 10px}
#queue li button{display:grid;grid-template-columns:auto 1fr;justify-content:start;justify-items:start;align-items:center;gap:4px 10px;width:100%;margin:0;padding:12px 14px;text-align:left;font-weight:500;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:12px}
#queue li button:disabled{background:var(--bb-neutralbg)}
#queue .sep{display:none}
#queue .wo-num{grid-column:1;grid-row:1;font:600 .8rem/1.6 var(--bb-mono);color:var(--bb-slate)}
#queue .wo-title{grid-column:2;grid-row:1;font-weight:700;color:var(--bb-ink)}
#queue .wo-meta{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:.85rem;color:var(--bb-slate)}
#queue .wo-who{font-size:.85rem;color:var(--bb-slate)}
#queue .wo-who.unassigned{color:var(--bb-amber)}

/* Chips: the raw text stays for scripts; the label shown comes from data-label. */
.chip{position:relative;display:inline-flex;align-items:center;min-height:24px;padding:2px 8px;border-radius:6px;font:600 .78rem/1.3 var(--bb-font);color:var(--bb-slate);background:var(--bb-neutralbg);white-space:nowrap}
.chip::before{content:attr(data-label)}
.chip > span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.chip.st-OPEN{color:var(--bb-open);background:var(--bb-openbg)}
.chip.st-IN_PROGRESS{color:var(--bb-prog);background:var(--bb-progbg)}
.chip.st-ON_HOLD{color:var(--bb-amber);background:var(--bb-amberbg)}
.chip.st-DONE{color:var(--bb-green);background:var(--bb-greenbg)}
.chip.pri-URGENT{color:var(--bb-red);background:var(--bb-redbg)}
.chip.pri-HIGH{color:var(--bb-med);background:var(--bb-medbg)}
.chip.pri-NORMAL{color:var(--bb-open);background:var(--bb-openbg)}
.chip.pri-LOW{color:var(--bb-low);background:var(--bb-lowbg)}

/* Detail panel */
#detail:not(:empty){margin:12px 0;padding:14px 16px 18px;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:12px}
#detail h2{margin-top:4px;font-size:1.25rem}
#detail > p:first-of-type{color:var(--bb-slate)}
#detail fieldset{padding-left:0;padding-right:0;border-left:0;border-right:0;border-radius:0;background:transparent}
#detail ul{padding-left:20px}
#detail .wo-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:6px 0;color:var(--bb-slate);font-size:.9rem}
#detail .wo-assignee{margin:0 0 8px;font-size:.9rem;color:var(--bb-slate)}
#detail .wo-grid{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;align-items:center;margin:8px 0 4px;padding:12px 14px;background:var(--bb-paper);border:1px solid var(--bb-line);border-radius:10px}
#detail .wo-grid dt{font-size:.72rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--bb-slate)}
#detail .wo-grid dd{margin:0;font-weight:600;color:var(--bb-ink)}
.timeline .history b{color:var(--bb-ink);font-weight:700}
.timeline .history .history-note{display:block;margin-top:2px;color:var(--bb-ink)}
#queue li.group-head{padding:14px 2px 4px;margin:0;font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--bb-slate);background:transparent;border:0}
#detail .status-native{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#detail .status-native select{min-height:1px;padding:0}
.status-group{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:8px 0 4px;border:1px solid var(--bb-control);border-radius:10px;overflow:hidden;background:var(--bb-white)}
.status-group .status-btn{min-height:48px;margin:0;padding:6px 4px;font-size:.85rem;font-weight:600;color:var(--bb-slate);background:var(--bb-white);border:0;border-right:1px solid var(--bb-line);border-radius:0}
.status-group .status-btn:last-child{border-right:0}
.status-group .status-btn[aria-pressed=true]{color:var(--bb-paper);background:var(--bb-menu)}
.status-group .status-btn.st-DONE[aria-pressed=true]{background:var(--bb-green)}
.status-group .status-btn.st-ON_HOLD[aria-pressed=true]{background:var(--bb-amber)}
.status-group .status-btn.st-IN_PROGRESS[aria-pressed=true]{background:var(--bb-blue)}
fieldset:disabled .status-group .status-btn{color:var(--bb-slate);background:var(--bb-neutralbg);cursor:not-allowed}
fieldset:disabled .status-group .status-btn[aria-pressed=true]{color:var(--bb-paper);background:var(--bb-control)}
#detail fieldset > label:has(> input[type=checkbox]){padding:10px 12px;margin:6px 0 0;background:var(--bb-paper);border:1px solid var(--bb-line);border-radius:10px;align-items:center}
.timeline{border-left:2px solid var(--bb-line);margin:4px 0 0 6px;padding-left:14px}
.timeline .history{position:relative;margin:0 0 10px;font-size:.85rem;color:var(--bb-slate)}
.timeline .history::before{content:"";position:absolute;left:-20px;top:7px;width:8px;height:8px;border-radius:50%;background:var(--bb-mint);border:1px solid var(--bb-slate)}

/* Sign-off banner */
.signed-off{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0;padding:10px 12px;border-radius:10px;background:var(--bb-greenbg);color:var(--bb-green);font-size:.9rem}
.signed-off b{font-weight:700}
.signed-off-note{margin:-4px 0 8px;padding:0 12px;font-size:.9rem;color:var(--bb-slate)}

/* Request rows and status chips */
.chip.rq-NEW{color:var(--bb-amber);background:var(--bb-amberbg)}
.chip.rq-APPROVED{color:var(--bb-green);background:var(--bb-greenbg)}
.chip.rq-DECLINED{color:var(--bb-red);background:var(--bb-redbg)}
#workspace ul.cards{margin:8px 0}
#workspace ul.cards li{padding:0;margin:0 0 10px;border-bottom:0}
#workspace ul.cards li button{display:grid;grid-template-columns:auto 1fr;justify-content:start;justify-items:start;align-items:center;gap:4px 10px;width:100%;margin:0;padding:12px 14px;text-align:left;font-weight:500;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:12px}
ul.cards .sep{display:none}
ul.cards .wo-num{grid-column:1;grid-row:1;font:600 .8rem/1.6 var(--bb-mono);color:var(--bb-slate)}
ul.cards .wo-title{grid-column:2;grid-row:1;font-weight:700;color:var(--bb-ink)}
ul.cards .chip{grid-column:1 / -1}

/* Owner overview tiles */
ul.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0}
ul.tiles li.tile{display:flex;flex-direction:column;gap:2px;padding:10px 12px;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:12px;border-bottom:1px solid var(--bb-line)}
ul.tiles li.tile span{font-size:.75rem;font-weight:600;color:var(--bb-slate);text-transform:uppercase;letter-spacing:.03em}
ul.tiles li.tile b{font-size:1.5rem;line-height:1.2;color:var(--bb-ink)}
ul.tiles li.tile:first-child b{color:var(--bb-blue)}
ul.tiles:empty{display:none}
@media (max-width:420px){ul.tiles{grid-template-columns:repeat(2,1fr)}}

/* Section header rows and chip rows */
.row-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.row-head h2{margin:0}
.row-head button{margin:0;min-height:40px;padding:6px 14px;font-size:.85rem}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px}
.chips button{min-height:36px;margin:0;padding:4px 14px;font-size:.85rem;font-weight:600;color:var(--bb-slate);background:var(--bb-white);border:1px solid var(--bb-line);border-radius:999px}
.chips button[aria-pressed=true]{color:var(--bb-paper);background:var(--bb-menu);border-color:var(--bb-ink)}
details#filter-box{margin:4px 0 8px}
details#filter-box > summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:4px 2px;font-size:.9rem;font-weight:600;color:var(--bb-blue)}
details#filter-box > summary::-webkit-details-marker{display:none}
details#filter-box > summary::before{content:"";width:8px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);margin:-4px 4px 0 2px}
details#filter-box[open] > summary::before{transform:rotate(-135deg);margin-top:4px}

/* Filters */
#work-filters fieldset{background:var(--bb-white)}
#work-filters legend{font-size:.95rem}
#work-filter-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
#work-filter-fields > label:first-of-type,#work-filter-fields > button{grid-column:1 / -1}
#work-filter-fields button{margin-top:14px}

/* Generic panel sections (staff, PM plans, restore, requests, workload) */
#workspace > section{margin:12px 0}
#workspace > section > h2:first-child{margin-top:8px}
#workspace ul{padding-left:0;list-style:none}
#workspace ul li{padding:8px 0;border-bottom:1px solid var(--bb-line)}
#workspace ul li:last-child{border-bottom:0}
#requests ul li button,#pm-plans-list button{width:100%;text-align:left;margin:0;font-weight:600;background:var(--bb-white)}
#requests .read-only fieldset{display:none}
table{width:100%;border-collapse:collapse;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:12px;overflow:hidden;font-size:.9rem}
th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--bb-line)}
th{background:var(--bb-neutralbg);font-weight:700}

/* Desktop: sidebar instead of bottom tabs */
@media (min-width:900px){
 body{padding-bottom:24px}
 main{max-width:960px;margin-left:calc(240px + 32px)}
 #notice{margin-left:240px}
 #tabs{top:var(--bar);bottom:0;right:auto;width:240px;flex-direction:column;justify-content:flex-start;gap:4px;padding:16px 12px;background:var(--bb-menu);border-top:0;border-right:1px solid rgba(255,255,255,.08)}
 #tabs button{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:12px;min-height:48px;padding:10px 12px;font-size:.95rem;color:var(--bb-paper);border-radius:8px;opacity:.85}
 #tabs button[aria-current=page]{background:rgba(213,230,221,.16);color:var(--bb-mint);opacity:1}
 #tabs button[aria-current=page] svg{stroke:var(--bb-mint)}
 #tabs button[aria-current=page]::after{display:none}
 #login,#verify{margin-top:48px}
 /* Two panes: list on the left, selected work order on the right */
 main{max-width:none}
 #workspace[data-view=work] > #work{display:grid;grid-template-columns:minmax(320px,5fr) minmax(0,7fr);gap:0 20px;align-items:start}
 #work > *{grid-column:1;min-width:0}
 #work > #detail{grid-column:2;grid-row:1 / span 40;position:sticky;top:calc(var(--bar) + 12px);max-height:calc(100vh - var(--bar) - 36px);overflow:auto;margin:12px 0}
 #work > #detail:empty{display:none}
 body:has(#workspace[hidden]) main{margin-left:auto}
 body:has(#workspace[hidden]) #notice{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Staff list: cards on phones, table on wide screens */
@media (max-width:640px){
 #staff-list,#staff-list tbody,#staff-list tr,#staff-list td{display:block;width:100%}
 #staff-list{background:transparent;border:0}
 #staff-list tr:first-child{display:none}
 #staff-list tr{margin:0 0 10px;padding:12px 14px;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:12px}
 #staff-list td{padding:0;border:0}
 #staff-list td:nth-child(1){font-weight:700;color:var(--bb-ink)}
 #staff-list td:nth-child(2){font:400 .85rem/1.6 var(--bb-mono);color:var(--bb-slate)}
 #staff-list td:nth-child(3),#staff-list td:nth-child(4){display:inline-block;width:auto;margin:6px 6px 0 0;padding:2px 8px;border-radius:6px;font-size:.78rem;font-weight:600;color:var(--bb-slate);background:var(--bb-neutralbg)}
 #staff-list td:nth-child(5){display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
 #staff-list td:nth-child(5) select{width:auto;flex:1 1 140px;min-height:44px;margin:0}
 #staff-list td:nth-child(5) button{margin:0;min-height:44px;padding:6px 14px;font-size:.85rem}
}

[hidden]{display:none!important}
/* Owner page: New request opens a form above the review list. */
details#new-request-box{margin:0 0 12px}
details#new-request-box > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:8px;font-weight:600;color:var(--bb-paper);background:var(--bb-menu)}
details#new-request-box > summary::-webkit-details-marker{display:none}
details#new-request-box[open] > summary{opacity:.75}
/* Owner page: guest request page QR code. */
img.guest-qr{display:block;width:220px;max-width:100%;height:auto;margin:8px 0;background:#fff;border-radius:8px}
#guest-portal a{word-break:break-all}
/* Room/asset type-to-search matches (2026-10-27). */
ul.picker-matches{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:4px}
ul.picker-matches li button{width:100%;text-align:left;justify-content:flex-start;min-height:44px;font-weight:500}
ul.picker-matches li.muted{padding:6px 2px}
/* Grouped side menu on the Owner page (2026-10-27). Phones keep the bottom tabs. */
#tabs .nav-hotel,#tabs .nav-group,#tabs .soon,#tabs .nav-user,#tabs .long{display:none}
#tabs .nav-foot{display:contents}
/* Requests screen: search, filter pills, grouped list, detail pane. */
.rq-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.rq-top h2{margin:0 auto 0 0;font-size:1.6rem}
.rq-top .rq-search{flex:1 1 200px;max-width:340px;margin:0}
.rq-top button{margin:0}
.rq-filters{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
select.filter-pill{width:auto;max-width:100%;min-height:38px;margin:0;padding:4px 30px 4px 12px;font-size:.9rem;font-weight:600;border-radius:8px;background-color:var(--bb-white)}
.rq-list ul.cards{margin:8px 0}
#workspace .rq-list li.rq-group{margin:14px 0 6px}
#workspace .rq-list li.rq-group button.rq-group-toggle{display:inline-flex;width:auto;min-height:32px;padding:2px 4px;font-weight:700;color:var(--bb-ink);background:none;border:0}
.rq-group-toggle::after{content:"";width:7px;height:7px;margin:0 0 3px 8px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(-135deg)}
.rq-group-toggle[aria-expanded=false]::after{transform:rotate(45deg);margin-bottom:6px}
#workspace ul.cards li button.rq-card{grid-template-columns:44px minmax(0,1fr) auto;align-items:start;gap:4px 12px}
.rq-card .rq-icon{grid-row:1 / span 3;width:44px;height:44px;border-radius:8px;background:var(--bb-bluebg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6B4F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13h4l2 3h4l2-3h4'/%3E%3Cpath d='M4 13l2-8h12l2 8v6H4z'/%3E%3C/svg%3E") center/24px no-repeat}
.rq-card .rq-main{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left}
.rq-card .wo-title{font-weight:600}
.rq-card .rq-meta{font-size:.85rem;color:var(--bb-slate)}
.rq-card .rq-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.rq-card .rq-num{font:500 .75rem/1.2 var(--bb-mono);color:var(--bb-slate)}
#workspace ul.cards li button.rq-card.selected{border-left:4px solid var(--bb-orange)}
.rq-detail{margin:12px 0}
.rq-detail-body h3{margin:0 0 12px;font-size:1.25rem}
.rq-field{padding:12px 0;border-top:1px solid var(--bb-line)}
.rq-label{font-weight:700;font-size:.9rem;margin-bottom:4px}
.rq-value{white-space:pre-wrap;color:var(--bb-slate)}
.rq-detail form fieldset{border-top:1px solid var(--bb-line);padding-top:12px}
@media (min-width:900px){
 #tabs{overflow-y:auto;padding-top:8px}
 #tabs .short{display:none}
 #tabs .long{display:inline}
 #tabs .nav-hotel{display:block;padding:8px 12px 4px;color:var(--bb-paper);font-size:1rem}
 #tabs .nav-group{display:block;margin:14px 12px 2px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bb-mint);opacity:.75}
 #tabs button{min-height:40px;padding:8px 12px}
 #tabs button.soon{display:flex;opacity:.45;cursor:default}
 #tabs button.soon small{margin-left:auto;font-size:.68rem;font-weight:600}
 #tabs .nav-foot{display:flex;flex-direction:column;gap:4px;margin-top:auto;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
 #tabs .nav-user{display:block;padding:4px 12px;color:var(--bb-paper);font-weight:700}
 #workspace[data-view=requests]{max-width:none}
 .rq-panes{display:grid;grid-template-columns:minmax(340px,5fr) minmax(0,7fr);gap:20px;align-items:start}
 .rq-detail{position:sticky;top:calc(var(--bar) + 12px);max-height:calc(100vh - var(--bar) - 36px);overflow:auto;padding:20px;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:12px}
 .rq-detail:has(.rq-detail-body:empty):has(form[hidden])::before{content:"Select a request to see its details.";color:var(--bb-slate)}
}
@media (min-width:900px){
 /* Brand sits atop the side menu; content starts at the top. */
 body:has(#workspace:not([hidden])) #appbar{position:fixed;top:0;left:0;width:240px}
 body:has(#workspace:not([hidden])) #appbar h1{display:none}
 /* New request sits at the right of the Requests title row. */
 #workspace > details#new-request-box:not([open]){float:right;margin:16px 0 0 10px}
 #workspace > details#new-request-box[open]{margin-top:16px}
 .rq-top h2{font-size:2rem}
}
.rq-detail form fieldset{border:0;border-top:1px solid var(--bb-line);border-radius:0;padding:12px 0 0;margin:0;background:none;box-shadow:none}
.rq-detail form textarea{min-height:80px}
@media (max-width:899px){
 .rq-filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
 select.filter-pill{flex:none;max-width:70vw}
 .rq-top .rq-search{order:3;flex-basis:100%;max-width:none}
 .rq-top button{min-height:36px;padding:4px 12px;font-size:.85rem}
}
/* Phone layout for Requests (Chris's reference screenshots, 2026-10-28): one list on
   phones and the open fold; colored title bar with filter and refresh icons, full-width
   search, grey group bands, flat rows with a round icon, chevron, and full-screen detail. */
.rq-filter-btn,.rq-back,.rq-chev{display:none}
@media (max-width:899px){
 body:has(#workspace[data-view=requests]:not([hidden])) #appbar,body:has(#workspace[data-view=requests]:not([hidden])) #notice{display:none}
 body:has(#workspace[data-view=requests]:not([hidden])) main{max-width:none}
 #workspace > #requests.rq-screen{margin:0 calc(-1 * var(--gutter))}
 .rq-top{position:sticky;top:0;z-index:15;display:grid;grid-template-columns:minmax(0,1fr) 48px 48px;grid-template-rows:56px auto;align-items:center;gap:0;margin:0;padding:0 4px 0 0;background:linear-gradient(var(--bb-ink) 0 56px,var(--bb-white) 56px);border-bottom:1px solid var(--bb-line)}
 .rq-top h2,.rq-top h2:first-child{margin:0;padding-left:var(--gutter);font-size:1.3rem;font-weight:600;color:var(--bb-paper)}
 .rq-top button.rq-icon-btn{display:block;width:44px;min-height:44px;height:44px;margin:0;padding:0;font-size:0;color:transparent;border:0;border-radius:8px;background:center/26px no-repeat}
 .rq-top button.rq-icon-btn:disabled{opacity:.5;background-color:transparent}
 .rq-top button.rq-filter-btn{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3F5F0' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3 4h18l-7 8.5V19l-4 2v-8.5z'/%3E%3C/svg%3E")}
 .rq-filters-open .rq-top button.rq-filter-btn{background-color:rgba(213,230,221,.18)}
 .rq-top button.rq-refresh{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3F5F0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.7'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E")}
 .rq-top .rq-search{grid-column:1 / -1;order:0;max-width:none;min-height:52px;margin:0;padding-left:46px;border:0;border-radius:0;background:var(--bb-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F6359' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E") 16px center/20px no-repeat}
 .rq-filters{display:none;margin:0;padding:10px var(--gutter);background:var(--bb-white);border-bottom:1px solid var(--bb-line)}
 .rq-filters-open .rq-filters{display:flex}
 .rq-screen > p[role=status]{margin:0;padding:6px var(--gutter);font-size:.8rem;color:var(--bb-slate)}
 .rq-screen > p[role=status]:empty{display:none}
 .rq-list ul.cards{margin:0}
 .rq-list > button{margin:12px var(--gutter)}
 #workspace .rq-list li.rq-group{margin:0;padding:6px var(--gutter);background:var(--bb-neutralbg);border-bottom:1px solid var(--bb-line)}
 #workspace .rq-list li.rq-group button.rq-group-toggle{font-size:1.05rem;padding:2px 0}
 #workspace .rq-list li.muted{padding:16px var(--gutter)}
 #workspace ul.cards li:has(> button.rq-card){margin:0;border-bottom:1px solid var(--bb-line)}
 #workspace ul.cards li button.rq-card{grid-template-columns:56px minmax(0,1fr) auto 14px;align-items:center;gap:0 12px;padding:12px 10px 12px var(--gutter);border:0;border-radius:0;background:var(--bb-white)}
 #workspace ul.cards li button.rq-card.selected{border-left:0}
 .rq-card .rq-icon{position:relative;grid-row:1;width:56px;height:56px;border-radius:50%;background-size:26px}
 .rq-card:has(.rq-NEW) .rq-icon::before{content:"";position:absolute;top:1px;left:1px;width:12px;height:12px;border-radius:50%;background:var(--bb-orange);border:2px solid var(--bb-white)}
 #workspace .rq-card .wo-title{font-size:1.1rem;font-weight:700;line-height:1.3;color:var(--bb-blue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .rq-card .rq-n{display:none}
 .rq-card .rq-meta{font-size:.92rem;font-weight:500;color:var(--bb-ink)}
 .rq-card .rq-side .chip.rq-NEW,.rq-card .rq-side .chip.rq-APPROVED,.rq-card .rq-side .chip.rq-DECLINED,.rq-card .rq-num{display:none}
 .rq-card .rq-side .chip{min-height:30px;padding:3px 10px;border:1px solid var(--bb-line);border-radius:8px;background:var(--bb-white)}
 .rq-chev{display:block;width:10px;height:10px;border:solid var(--bb-slate);border-width:2px 2px 0 0;transform:rotate(45deg);align-self:start;margin-top:8px}
 .rq-detail{margin:0;padding:0 var(--gutter) 16px;background:var(--bb-white);min-height:calc(100vh - var(--tabs))}
 .rq-screen:not(.rq-detail-open) .rq-detail:has(.rq-detail-body:empty):has(form[hidden]){display:none}
 .rq-detail-open > .rq-top,.rq-detail-open > .rq-filters,.rq-detail-open .rq-list{display:none!important}
 #workspace:has(.rq-detail-open) > #new-request-box{display:none}
 .rq-detail-open .rq-back{position:sticky;top:0;z-index:15;display:flex;justify-content:flex-start;gap:14px;width:calc(100% + 2 * var(--gutter));max-width:none;min-height:56px;margin:0 calc(-1 * var(--gutter)) 12px;padding:0 var(--gutter);font-size:1.2rem;font-weight:600;color:var(--bb-paper);background:var(--bb-menu);border:0;border-radius:0}
 .rq-back::before{content:"";width:12px;height:12px;border:solid currentColor;border-width:0 0 2.5px 2.5px;transform:rotate(45deg);margin-left:4px}
 .rq-detail-body h3{font-size:1.35rem}
 /* New request floats above the bottom tabs, as a floating add button. */
 #workspace > details#new-request-box{margin:0}
 #workspace > details#new-request-box:not([open]) > summary{position:fixed;right:var(--gutter);bottom:calc(var(--tabs) + env(safe-area-inset-bottom) + 16px);z-index:25;min-height:52px;padding:0 20px;border-radius:999px;box-shadow:0 4px 14px rgba(16,38,31,.3)}
 #workspace > details#new-request-box[open]{margin:12px 0}
 #requests .rq-list{padding-bottom:84px}
}
@media (min-width:900px){.rq-top .rq-refresh{order:2}}
/* Work Orders list in the reference layout (2026-10-28): toolbar, To Do / Done tabs,
   grouped rows like Requests, the open work order beside the list on wide screens. */
.wo-tabs{display:flex;border-bottom:1px solid var(--bb-line);margin:8px 0 0}
.wo-tabs button{flex:1 1 0;margin:0;min-height:44px;border:0;border-radius:0;background:none;color:var(--bb-slate);font-weight:600;border-bottom:3px solid transparent}
.wo-tabs button[aria-pressed=true]{color:var(--bb-ink);border-bottom-color:var(--bb-orange)}
#queue.wo-list{margin:0}
#workspace #queue li.rq-group{margin:14px 0 6px;padding:0;border:0}
#workspace #queue li.rq-group button.rq-group-toggle{display:inline-flex;width:auto;min-height:32px;margin:0;padding:2px 4px;font-weight:700;color:var(--bb-ink);background:none;border:0}
#queue li.muted{padding:16px 4px;border:0}
.wo-card .wo-who.unassigned{color:var(--bb-amber)}
.wo-overdue{font-size:.75rem;font-weight:700;color:var(--bb-red)}
#workspace #queue .rq-card .wo-title{grid-column:auto;grid-row:auto}
@media (min-width:900px){
 #workspace[data-view=work] > #work{grid-template-columns:minmax(340px,5fr) minmax(0,7fr)}
 #work > .wo-top,#work > .wo-filters{grid-column:1 / -1}
 #work > .wo-top{grid-row:1}
 #work > .wo-filters{grid-row:2}
 #work > #detail{grid-row:3 / span 40}
 #work > #detail:empty{display:block;min-height:200px;padding:20px;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:12px}
 #work > #detail:empty::before{content:"Select a work order to see its details.";color:var(--bb-slate)}
}
@media (max-width:899px){
 body:has(#workspace[data-view=work]:not([hidden])) #appbar{display:none}
 /* Work messages show as a small note above the bottom tabs while the title bar is up top. */
 body:has(#workspace[data-view=work]:not([hidden])) #notice:not(:empty){position:fixed;left:var(--gutter);right:var(--gutter);bottom:calc(var(--tabs) + env(safe-area-inset-bottom) + 8px);z-index:26;border:1px solid var(--bb-line);border-radius:10px;box-shadow:0 4px 14px rgba(16,38,31,.2);font-size:.85rem}
 #workspace > #work{margin:0 calc(-1 * var(--gutter))}
 #work > .wo-tabs{margin:0;background:var(--bb-white)}
 #work > #workload{padding:0 var(--gutter)}
 #work > #next-work{margin:12px var(--gutter)}
 #work > #confirmation{padding:0 var(--gutter)}
 #workspace #queue li.rq-group{margin:0;padding:6px var(--gutter);background:var(--bb-neutralbg);border-bottom:1px solid var(--bb-line)}
 #workspace #queue li.rq-group button.rq-group-toggle{font-size:1.05rem;padding:2px 0}
 #queue li.muted{padding:16px var(--gutter)}
 #work .wo-card .rq-num{display:block}
 #work .wo-card .rq-side .chip.st-OPEN,#work .wo-card .rq-side .chip.st-IN_PROGRESS,#work .wo-card .rq-side .chip.st-ON_HOLD,#work .wo-card .rq-side .chip.st-DONE{display:inline-flex}
 /* An open work order is its own screen with a back arrow. */
 #work:has(> #detail:not(:empty)) > :not(#detail):not(#wo-back):not([role=status]){display:none!important}
 #work:has(> #detail:not(:empty)) > #wo-back{position:sticky;top:0;z-index:15;display:flex;justify-content:flex-start;gap:14px;width:100%;min-height:56px;margin:0;padding:0 var(--gutter);font-size:1.2rem;font-weight:600;color:var(--bb-paper);background:var(--bb-menu);border:0;border-radius:0}
 #work > #detail:not(:empty){margin:0;border:0;border-radius:0;padding:12px var(--gutter) 90px}
}
/* Overview (home) in the reference layout (2026-10-28): greeting, quick actions,
   four status tiles, the to-do list and recent activity. */
#overview .ov-bar{display:flex;align-items:center;gap:12px;margin:0 0 4px}
#overview .ov-bar h2{flex:1;margin:0}
.ov-greet{margin:8px 0 0;color:var(--bb-slate)}
.ov-welcome{margin:2px 0 14px;font-size:1.45rem}
/* Quick actions always fit the width in four equal columns, like the reference app (no sideways scroll). */
.ov-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:0 0 18px}
.ov-actions button{justify-content:flex-start;min-width:0;overflow-wrap:anywhere;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:0;margin:0;padding:6px 2px;background:none;border:0;color:var(--bb-ink);font-weight:600;font-size:.88rem}
.ov-ico{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--bb-white);border:1px solid var(--bb-line)}
.ov-ico svg{width:26px;height:26px;fill:none;stroke:var(--bb-blue);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ov-badge{position:absolute;top:-4px;right:-8px;min-width:22px;padding:1px 6px;border-radius:999px;background:var(--bb-orange);color:var(--bb-white);font-size:.72rem;line-height:1.5}
.ov-h{margin:14px 0 8px;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--bb-ink)}
.ov-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ov-tiles button{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:112px;margin:0;padding:14px 16px;text-align:left;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:12px;color:var(--bb-slate);font-weight:500;position:relative}
.ov-tiles button::after{content:"";position:absolute;top:22px;right:16px;width:8px;height:8px;border:solid var(--bb-slate);border-width:2px 2px 0 0;transform:rotate(45deg)}
.ov-n{display:flex;align-items:center;gap:8px}
.ov-n b{font-size:1.6rem;color:var(--bb-ink)}
.ov-n i{display:inline-block;width:18px;height:18px}
.ov-up{border-left:2px solid var(--bb-red);transform:translateX(8px);position:relative}
.ov-up::before{content:"";position:absolute;left:-7px;top:0;width:8px;height:8px;border:solid var(--bb-red);border-width:2px 0 0 2px;transform:rotate(45deg)}
.ov-clock{border:2px solid var(--bb-red);border-radius:50%}
.ov-inbox{border:2px solid var(--bb-amber);border-radius:4px;background:linear-gradient(transparent 55%,var(--bb-amber) 55% 62%,transparent 62%)}
.ov-check{width:14px!important;height:8px!important;border:solid var(--bb-green);border-width:0 0 3px 3px;transform:rotate(-45deg) translate(2px,-2px)}
.ov-list{list-style:none;margin:0;padding:0;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:12px}
.ov-list li{border-bottom:1px solid var(--bb-line)}
.ov-list li:last-child{border-bottom:0}
#overview .ov-list li.muted{padding:14px 16px}
.ov-item{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;min-height:0;margin:0;padding:12px 16px;text-align:left;background:none;border:0;border-radius:0;color:var(--bb-ink);font-weight:400}
.ov-item > b{font-weight:600}
.ov-item .chip{margin-top:2px}
.ov-meta{font-size:.82rem;color:var(--bb-slate)}
.ov-link{color:var(--bb-blue);font-weight:600}
@media (min-width:900px){
 #workspace[data-view=overview]{max-width:none}
 .ov-tiles{grid-template-columns:repeat(4,1fr)}
 .ov-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
 .ov-actions{max-width:520px}
}
@media (max-width:899px){
 body:has(#workspace[data-view=overview]:not([hidden])) #appbar{display:none}
 body:has(#workspace[data-view=overview]:not([hidden])) #notice{display:none}
 #workspace > #overview{margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 24px}
 #overview .ov-bar{position:sticky;top:0;z-index:15;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter);min-height:56px;background:var(--bb-menu);color:var(--bb-paper)}
 #overview .ov-bar h2{color:var(--bb-paper);font-size:1.25rem;text-align:center;padding-left:44px}
 #overview .ov-bar button.rq-refresh{width:44px;min-height:44px;height:44px;margin:0;padding:0;font-size:0;color:transparent;border:0;border-radius:8px;background:center/26px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3F5F0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.7'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E")}
 #overview .ov-list{margin:0 calc(-1 * var(--gutter) + 4px)}
}
/* Open work order on phones: a back arrow and the work order number in the top bar. */
@media (max-width:899px){
 #work:has(> #detail:not(:empty)) > #wo-back{gap:28px;font-size:1.3rem;font-weight:600}
 #work:has(> #detail:not(:empty)) > #wo-back::before{content:"";width:24px;height:24px;margin:0;border:0;transform:none;background:center/24px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3F5F0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H4M10 6l-6 6 6 6'/%3E%3C/svg%3E")}
}
.owner-link{display:block;margin:12px 0;font-weight:600}
.owner-link[hidden]{display:none}
/* Work Orders views: a view picker beside the title, the Table view and the Calendar view. */
.wo-viewpick{position:relative}
.wo-view-btn{min-height:36px;margin:0;padding:4px 28px 4px 12px;font-size:.9rem;font-weight:600;color:var(--bb-ink);background:none;border:1px solid var(--bb-line);border-radius:8px;position:relative}
.wo-view-btn::after{content:"";position:absolute;right:11px;top:50%;width:6px;height:6px;margin-top:-5px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
.wo-view-menu{position:absolute;z-index:40;top:calc(100% + 6px);left:0;min-width:190px;padding:6px;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:10px;box-shadow:0 8px 24px rgba(16,38,31,.18)}
.wo-view-menu[hidden]{display:none}
.wo-view-menu button{display:block;width:100%;min-height:40px;margin:0;padding:8px 12px;text-align:left;background:none;border:0;border-radius:6px;color:var(--bb-ink);font-weight:500}
.wo-view-menu button:hover{background:var(--bb-neutralbg)}
#work.wo-view-table > :is(.wo-tabs,#workload,#queue,#next-work,#detail,#wo-back,#confirmation),#work.wo-view-calendar > :is(.wo-tabs,#workload,#queue,#next-work,#detail,#wo-back,#confirmation){display:none!important}
#work.wo-view-table #wo-sort,#work.wo-view-calendar #wo-sort{display:none}
#work.wo-view-table > #wo-table,#work.wo-view-calendar > #wo-calendar{grid-column:1 / -1}
.wo-table-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0}
.wo-table-bar button{min-height:36px;margin:0}
.wo-cols{display:grid;gap:4px;max-width:420px;margin:0 0 12px;padding:10px 12px;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:10px}
.wo-cols[hidden]{display:none}
.wo-col-row{display:flex;align-items:center;gap:8px}
.wo-col-row label{flex:1;display:flex;align-items:center;gap:8px;margin:0}
.wo-col-move{min-height:32px;width:36px;margin:0;padding:0}
.wo-table-scroll{overflow-x:auto;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:10px}
#wo-table-grid{min-width:100%;table-layout:fixed;border-collapse:collapse;font-size:.9rem}
#wo-table-grid th{position:sticky;top:0;overflow:hidden;text-overflow:ellipsis;background:var(--bb-white);text-align:left;border-bottom:1px solid var(--bb-line);white-space:nowrap}
#wo-table-grid th .wo-sort{min-height:40px;margin:0;padding:8px 12px;background:none;border:0;color:var(--bb-slate);font-weight:600;font-size:.85rem}
#wo-table-grid th .wo-sort.on{color:var(--bb-ink)}
#wo-table-grid td{padding:10px 12px;border-bottom:1px solid var(--bb-line);white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}
#wo-table-grid td.wo-tcell-title{font-weight:600;color:var(--bb-ink)}
#wo-table-grid tr.wo-trow{cursor:pointer}
#wo-table-grid tr.wo-trow:hover{background:var(--bb-neutralbg)}
.wo-table-pager{display:flex;justify-content:flex-end;gap:8px;margin:10px 0}
.wo-table-pager button{min-height:36px;margin:0}
.wo-cal-bar{display:flex;align-items:center;gap:8px;margin:10px 0;flex-wrap:wrap}
.wo-cal-bar h3{margin:0 8px;min-width:180px;text-align:center}
.wo-cal-bar > button{min-height:36px;margin:0;padding:4px 12px}
.wo-cal-mode{display:flex;margin-right:auto}
.wo-cal-mode button{min-height:32px;margin:0;padding:2px 12px;border:1px solid var(--bb-line);background:var(--bb-white);color:var(--bb-ink);border-radius:0}
.wo-cal-mode button:first-child{border-radius:8px 0 0 8px}
.wo-cal-mode button:last-child{border-radius:0 8px 8px 0}
.wo-cal-mode button[aria-pressed=true]{background:var(--bb-menu);color:var(--bb-paper)}
.wo-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:var(--bb-white);border:1px solid var(--bb-line);border-radius:10px;overflow:hidden}
.wo-cal-head{padding:8px;text-align:center;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--bb-slate);border-bottom:1px solid var(--bb-line)}
.wo-cal-day{min-height:120px;padding:4px 6px 6px;border-right:1px solid var(--bb-line);border-bottom:1px solid var(--bb-line);min-width:0}
.wo-cal-day.other{background:var(--bb-paper)}
.wo-cal-num{text-align:right;font-size:.8rem;color:var(--bb-slate)}
.wo-cal-num{font-size:0}
.wo-cal-num b{font-size:.8rem}
.wo-cal-day.today .wo-cal-num b{display:inline-block;min-width:22px;padding:0 5px;border-radius:6px;background:var(--bb-orange);color:var(--bb-white);text-align:center}
.wo-cal-item{display:block;width:100%;min-height:0;margin:2px 0;padding:2px 4px 2px 18px;font-size:.78rem;font-weight:500;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:none;border:0;border-radius:4px;color:var(--bb-ink);position:relative}
.wo-cal-item::before{content:"";position:absolute;left:4px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--bb-blue)}
.wo-cal-item.st-DONE::before{background:var(--bb-green)}
.wo-cal-item.st-ON_HOLD::before,.wo-cal-item.st-IN_PROGRESS::before{background:var(--bb-prog)}
.wo-cal-item.late{color:var(--bb-red)}
.wo-cal-item.late::before{background:var(--bb-red)}
.wo-cal-item:hover{background:var(--bb-neutralbg)}
.wo-cal-more{display:block;width:100%;min-height:0;margin:4px 0 0;padding:2px;background:none;border:0;color:var(--bb-blue);font-weight:600;font-size:.8rem}
.wo-cal-week .wo-cal-day{min-height:320px}
@media (min-width:900px){
 #work > .wo-top{display:flex;align-items:center;gap:12px}
}
@media (max-width:899px){
 .rq-top.wo-top{grid-template-columns:minmax(0,1fr) auto 48px 48px}
 .rq-top .wo-viewpick{margin-right:4px}
 .rq-top .wo-view-btn{color:var(--bb-paper);border-color:rgba(243,245,240,.4);font-size:.8rem;padding:2px 22px 2px 8px;min-height:30px}
 #work.wo-view-table > #wo-table,#work.wo-view-calendar > #wo-calendar{padding:0 var(--gutter) 90px}
 /* Phones show the calendar as a list of days that have work. */
 .wo-cal-grid{display:block;border:0;background:none}
 .wo-cal-head,.wo-cal-day.empty{display:none}
 .wo-cal-day{min-height:0;margin:0 0 10px;padding:8px 12px;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:10px}
 .wo-cal-day.other{background:var(--bb-white)}
 .wo-cal-num{text-align:left;font-size:.85rem;font-weight:700;color:var(--bb-ink);margin-bottom:4px}
 .wo-cal-num b{display:none}
 .wo-cal-day.today .wo-cal-num{color:var(--bb-orange)}
 .wo-cal-item{font-size:.92rem;padding:6px 4px 6px 20px;white-space:normal}
 .wo-cal-bar h3{min-width:0;flex:1}
 .wo-cal-mode{width:100%;margin:0 0 4px}
}
/* Work order filters: Add Filter pill, removable chips, My Filters and the filter panel. */
.wo-filters{align-items:center}
button.filter-pill{min-height:38px;margin:0;padding:4px 14px;font-size:.9rem;border-radius:8px;border-color:var(--bb-control)}
.wo-add-filter{color:var(--bb-blue);border-style:dashed}
.wo-chips{display:contents}
.wo-chip{display:inline-flex;align-items:center;flex:none;max-width:100%;min-height:38px;background:var(--bb-bluebg);border:1px solid var(--bb-blue);border-radius:8px;color:var(--bb-blue)}
.wo-chip button{min-height:36px;margin:0;padding:4px 10px;background:none;border:0;color:inherit;font-size:.85rem;font-weight:600}
.wo-chip .wo-chip-label{max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;text-align:left}
.wo-chip .wo-chip-x{padding:4px 10px 4px 2px;font-size:1.1rem}
.wo-chip-clear{flex:none;min-height:36px;margin:0;padding:4px 8px;background:none;border:0;color:var(--bb-blue);font-size:.85rem;text-decoration:underline}
.wo-filter-panel{flex:1 1 100%;max-width:560px;padding:12px 14px;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:10px;box-shadow:0 8px 24px rgba(16,38,31,.12)}
.wo-filter-panel[hidden]{display:none}
.wo-fp-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wo-fp-head h3{margin:0;font-size:1.05rem}
.wo-fp-head button{min-height:36px;margin:0}
.wo-fp-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin-top:10px}
.wo-fp-fields button{margin:0;min-height:42px;justify-content:flex-start}
.wo-fp-op{margin:10px 0 0}
.wo-fp-body{margin-top:8px}
.wo-fp-find{min-height:42px;margin:0 0 6px}
.wo-fp-choices{max-height:260px;overflow-y:auto;border:1px solid var(--bb-line);border-radius:8px;padding:4px 8px}
#workspace label.wo-fp-choice{margin:0;padding:6px 0;font-weight:500;color:var(--bb-ink);border-bottom:1px solid var(--bb-neutralbg)}
.wo-fp-date{display:inline-block;width:calc(50% - 6px);margin-right:6px}
.wo-fp-error{margin:6px 0 0;color:var(--bb-red);font-size:.9rem}
.wo-fp-error:empty{display:none}
.wo-fp-apply,.wo-fp-save{margin-top:10px}
.wo-fp-name{margin-top:10px}
.wo-fp-saved{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--bb-neutralbg)}
.wo-fp-saved button{min-height:36px;margin:0}
.rq-top button.rq-filter-btn.on{box-shadow:inset 0 -3px 0 var(--bb-orange)}
@media (max-width:899px){
 #work .wo-filters{flex-wrap:wrap;overflow:visible}
 .wo-chip .wo-chip-label{max-width:62vw}
 .wo-filter-panel{max-width:none;box-shadow:none}
 .wo-fp-date{width:100%;margin-right:0}
}
/* Assets and Locations (reference layout): tabs, rows with a round icon, and a detail pane. */
.pl-tabs{display:flex;margin:8px 0 0;border-bottom:1px solid var(--bb-line)}
.pl-tabs button{flex:1;min-height:46px;margin:0;border:0;border-radius:0;background:none;color:var(--bb-slate);font-weight:600;letter-spacing:.02em;text-transform:uppercase;font-size:.9rem}
.pl-tabs button[aria-pressed=true]{color:var(--bb-blue);box-shadow:inset 0 -3px 0 var(--bb-blue)}
.pl-count{margin:8px 0 4px}
.pl-count:empty{display:none}
ul.pl-list{margin:0}
#workspace .pl-card .pl-name{grid-column:auto;font-weight:700;color:var(--bb-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-icon{display:block;width:44px;height:44px;border-radius:50%;background:var(--bb-bluebg) center/22px no-repeat}
.pl-asset{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6B4F' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='5' rx='1'/%3E%3Crect x='3' y='16' width='6' height='5' rx='1'/%3E%3Crect x='15' y='16' width='6' height='5' rx='1'/%3E%3Cpath d='M12 8v4M6 16v-4h12v4'/%3E%3C/svg%3E")}
.pl-room{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6B4F' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3 20V8l9-5 9 5v12z'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E")}
.pl-loc{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6B4F' stroke-width='1.8'%3E%3Cpath d='M12 21s-7-6-7-11a7 7 0 0 1 14 0c0 5-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E")}
.chip.pl-open{background:var(--bb-amberbg);color:var(--bb-amber)}
#pl-more{margin:12px 0}
.pl-detail{padding:16px 20px;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:12px}
.pl-detail:empty{display:none}
.pl-head h3{margin:0;font-size:1.4rem}
.pl-sub{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:6px 0 12px}
.pl-link{min-height:0;margin:0;padding:0;border:0;background:none;color:var(--bb-blue);font-weight:600}
.pl-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin:8px 0}
.pl-stats > div{display:flex;flex-direction:column;padding:10px 12px;border:1px solid var(--bb-line);border-radius:10px}
.pl-stats b{font-size:1.5rem}
.pl-stats span{font-size:.85rem;color:var(--bb-slate)}
.pl-chart{display:flex;gap:6px;height:150px;padding:8px 4px 0;border-bottom:1px solid var(--bb-line)}
.pl-week{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0}
.pl-bars{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:3px;width:100%}
.pl-bar{display:block;width:38%;min-height:2px;border-radius:3px 3px 0 0}
.pl-created{background:var(--bb-blue)}
.pl-done{background:var(--bb-green)}
.pl-wk{font-size:.68rem;color:var(--bb-slate);padding:4px 0}
.pl-legend{display:flex;align-items:center;gap:6px;margin:6px 0 0;font-size:.82rem;color:var(--bb-slate)}
.pl-key{display:inline-block;width:10px;height:10px;border-radius:2px}
.pl-chips{display:flex;gap:6px}
.pl-facts{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0}
.pl-facts dt{color:var(--bb-slate);font-weight:600}
.pl-facts dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
@media (min-width:900px){
 #workspace[data-view=assets] > #places,#workspace[data-view=locations] > #places,#workspace[data-view=library] > #places{display:grid;grid-template-columns:minmax(320px,5fr) minmax(0,7fr);gap:0 20px;align-items:start}
 #places > *{grid-column:1;min-width:0}
 #places > .pl-top{grid-column:1 / -1}
 #places > #pl-detail{grid-column:2;grid-row:2 / span 20;position:sticky;top:12px;max-height:calc(100vh - 36px);overflow:auto;margin:8px 0}
 #places > #pl-detail:empty{display:block;min-height:200px}
 #places > #pl-detail:empty::before{content:"Select an item to see its details.";color:var(--bb-slate)}
 #places ul.pl-list{max-height:calc(100vh - 220px);overflow:auto;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:12px}
}
@media (max-width:899px){
 #tabs .desk-only{display:none}
 body:has(#workspace:is([data-view=assets],[data-view=locations],[data-view=library]):not([hidden])) #appbar{display:none}
 #workspace > #places{margin:0 calc(-1 * var(--gutter))}
 .rq-top.pl-top{grid-template-columns:minmax(0,1fr) 48px}
 .pl-tabs{margin:0;background:var(--bb-white)}
 #places > .pl-count,#places > #pl-more{margin-left:var(--gutter);margin-right:var(--gutter)}
 #places > #pl-more.bb-auto-more{width:calc(100% - 2 * var(--gutter))}
 #places:has(> #pl-detail:not(:empty)) > :not(#pl-detail):not(#pl-back){display:none!important}
 #places:has(> #pl-detail:not(:empty)) > #pl-back{position:sticky;top:0;z-index:15;display:flex;justify-content:flex-start;gap:28px;width:100%;min-height:56px;margin:0;padding:0 var(--gutter);font-size:1.25rem;font-weight:600;color:var(--bb-paper);background:var(--bb-menu);border:0;border-radius:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 #places:has(> #pl-detail:not(:empty)) > #pl-back::before{content:"";flex:none;width:24px;height:24px;margin:0;border:0;transform:none;background:center/24px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3F5F0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H4M10 6l-6 6 6 6'/%3E%3C/svg%3E")}
 #places > #pl-detail{margin:0;border:0;border-radius:0;padding:12px var(--gutter) 90px}
 #places .pl-work{margin:0 -4px}
}

/* Table settings, column widths (2026-10-28, reference layout). */
#wo-table-grid th .wo-nosort{display:block;padding:8px 12px;color:var(--bb-slate);font-weight:600;font-size:.85rem;line-height:24px}
#wo-table-grid td{max-width:none}
.wo-resize{position:absolute;top:0;right:0;bottom:0;width:9px;cursor:col-resize;touch-action:none;z-index:2}
.wo-resize::after{content:"";position:absolute;top:25%;bottom:25%;left:4px;width:1px;background:var(--bb-line)}
.wo-resize:hover::after,.wo-resize:focus-visible::after{top:0;bottom:0;width:3px;left:3px;background:var(--bb-blue)}
.wo-cols{max-width:380px;gap:8px;padding:12px 16px}
.wo-set-head{display:flex;align-items:center;justify-content:space-between}
.wo-link,.wo-x{min-height:36px;margin:0;padding:0 6px;border:0;background:none;color:var(--bb-blue);font-weight:600}
.wo-x{color:var(--bb-slate);font-size:1.4rem}
.wo-cols h4{margin:10px 0 0;font-size:1.05rem}
.wo-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.wo-seg button{min-height:36px;margin:0;border:0;background:none;color:var(--bb-ink)}
.wo-seg button[aria-pressed=true]{background:var(--bb-blue);color:var(--bb-white)}
ol.wo-col-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
ol.wo-col-list .wo-col-row{padding:6px 8px;border:1px solid var(--bb-line);border-radius:8px}
ol.wo-col-list .wo-col-row span{flex:1}
.wo-col-move{min-height:32px;min-width:32px;margin:0;padding:0 6px}
select.wo-col-add{margin:0}
.wo-limit{display:inline-flex;align-items:center;gap:8px;margin:0 auto 0 0;font-size:.9rem;color:var(--bb-slate)}
.wo-limit select{width:auto;min-height:36px;margin:0}
.phone-only{display:none}
@media (max-width:899px){.phone-only{display:block}}
/* Messages (2026-10-28, reference layout). */
.nav-badge{min-width:18px;padding:0 5px;border-radius:9px;background:var(--bb-orange);color:var(--bb-white);font-size:.7rem;line-height:18px;text-align:center}
.nav-badge[hidden]{display:none}
#tabs button[data-tab=messages]{position:relative}
.msg-top .msg-new{min-height:40px;padding:0 16px}
.msg-search{margin:10px 0 6px;max-width:none}
ul.msg-list{list-style:none;margin:0;padding:0;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:12px;overflow:hidden}
ul.msg-list > li + li{border-top:1px solid var(--bb-line)}
ul.msg-list li.msg-empty{padding:16px}
.msg-row{display:flex;align-items:center;gap:12px;width:100%;min-height:72px;margin:0;padding:10px 14px;border:0;border-radius:0;background:none;color:var(--bb-ink);text-align:left;font-weight:400}
.msg-row.selected{background:var(--bb-bluebg);box-shadow:inset 4px 0 0 var(--bb-orange)}
.msg-avatar{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--bb-white);font-weight:700;font-size:.95rem}
.msg-avatar.msg-team{border-radius:12px}
.msg-main{flex:1;display:flex;flex-direction:column;min-width:0}
.msg-line{display:flex;align-items:baseline;gap:8px}
.msg-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.msg-when{flex:none;font-size:.8rem;color:var(--bb-slate)}
.msg-preview{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;color:var(--bb-slate)}
.msg-row.unread .msg-name,.msg-row.unread .msg-preview{font-weight:800;color:var(--bb-ink)}
.msg-unread{flex:none;min-width:22px;padding:0 6px;border-radius:11px;background:var(--bb-blue);color:var(--bb-white);font-size:.75rem;font-weight:700;line-height:22px;text-align:center}
.msg-pane{display:flex;flex-direction:column;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:12px;overflow:hidden}
.msg-pane:empty{display:none}
.msg-pane > p.muted{padding:16px}
.msg-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--bb-line)}
.msg-hinfo{display:flex;flex-direction:column;min-width:0}
.msg-members{font-size:.85rem;color:var(--bb-slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
ol.msg-log{flex:1;list-style:none;margin:0;padding:12px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.msg-item{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;padding-top:10px}
.msg-item.grouped{padding-top:0}
.msg-item .msg-avatar{grid-row:1 / span 2;width:36px;height:36px;font-size:.8rem}
.msg-who{grid-column:2;margin:0}
.msg-who .msg-when{margin-left:4px}
.msg-body{grid-column:2;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.msg-compose{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--bb-line)}
.msg-compose textarea{flex:1;min-height:44px;max-height:160px;margin:0;resize:vertical}
.msg-send{min-height:44px;margin:0;padding:0 18px}
.msg-newform{display:flex;flex-direction:column;gap:10px;padding:16px}
.msg-newform h3{margin:0}
.msg-newform input,.msg-newform select,.msg-newform textarea{margin:0}
.msg-newform .msg-send{align-self:flex-end}
.msg-mode{margin:0}
ul.msg-picks{list-style:none;margin:0;padding:0;max-height:300px;overflow-y:auto;border:1px solid var(--bb-line);border-radius:10px}
ul.msg-picks > li + li{border-top:1px solid var(--bb-line)}
ul.msg-picks label{display:flex;align-items:center;gap:10px;margin:0;padding:8px 12px;font-weight:500}
ul.msg-picks label input{width:20px;height:20px;margin:0}
ul.msg-picks .msg-avatar{width:32px;height:32px;font-size:.75rem}
.msg-role{margin-left:auto;font-size:.8rem;color:var(--bb-slate)}
ul.msg-picks li.muted{padding:12px}
.msg-err{margin:0;color:var(--bb-red)}
.msg-err:empty{display:none}
@media (min-width:900px){
 #tabs .nav-badge{margin-left:auto}
 #workspace[data-view=messages]{max-width:none}
 #workspace[data-view=messages] > #messages{display:grid;grid-template-columns:minmax(300px,4fr) minmax(0,7fr);gap:0 20px;align-items:start}
 #messages > *{grid-column:1;min-width:0}
 #messages > .msg-top{grid-column:1 / -1}
 #messages > #msg-pane{grid-column:2;grid-row:2 / span 20;position:sticky;top:12px;height:calc(100vh - 110px);margin:10px 0 0}
 #messages > #msg-pane:empty{display:flex;align-items:center;justify-content:center}
 #messages > #msg-pane:empty::before{content:"Select a conversation, or start one with New Message.";color:var(--bb-slate)}
 #messages ul.msg-list{max-height:calc(100vh - 190px);overflow-y:auto}
 .msg-newform{overflow-y:auto}
}
@media (max-width:899px){
 #tabs .nav-badge{position:absolute;top:4px;left:calc(50% + 6px)}
 body:has(#workspace[data-view=messages]:not([hidden])) #appbar{display:none}
 #workspace > #messages{margin:0 calc(-1 * var(--gutter))}
 /* Reference phone layout: full-width title bar, then a full-width search (2026-10-29). */
 #messages > .msg-top{margin:0;width:auto}
 #messages > .msg-search{display:block;width:100%;max-width:none;min-height:52px;margin:0;padding-left:46px;border:0;border-bottom:1px solid var(--bb-line);border-radius:0;background:var(--bb-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F6359' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E") 16px center/20px no-repeat}
 #messages > .msg-top .msg-new{padding:0 20px;font-size:16px;color:var(--bb-paper);background:var(--bb-ink);border:0;border-radius:999px;box-shadow:0 4px 14px rgba(16,38,31,.3)}
 #messages .msg-list > .msg-empty{padding:16px var(--gutter)}
 #messages > .msg-top .msg-new{position:fixed;right:var(--gutter);bottom:calc(var(--tabs) + env(safe-area-inset-bottom) + 14px);z-index:22;min-height:52px;border-radius:26px;box-shadow:0 4px 14px rgba(16,38,31,.25)}
 ul.msg-list{border-radius:0;border-left:0;border-right:0;margin-bottom:90px}
 #messages:has(> #msg-pane:not(:empty)) > :not(#msg-pane):not(#msg-back){display:none!important}
 #messages:has(> #msg-pane:not(:empty)) > #msg-back{position:sticky;top:0;z-index:15;display:flex;justify-content:flex-start;gap:28px;width:100%;min-height:56px;margin:0;padding:0 var(--gutter);font-size:1.15rem;font-weight:600;color:var(--bb-paper);background:var(--bb-menu);border:0;border-radius:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 #messages:has(> #msg-pane:not(:empty)) > #msg-back::before{content:"←";border:0;transform:none;width:auto;height:auto;margin:0;font-size:1.4rem}
 #messages > #msg-pane{border:0;border-radius:0;min-height:calc(100vh - 56px - var(--tabs));height:calc(100dvh - 56px - var(--tabs) - env(safe-area-inset-bottom))}
 .msg-head{display:none}
}

/* Calendar rows and hover card (2026-10-28, reference layout). */
.wo-cal-item{display:flex!important;align-items:center;gap:5px}
.wo-cal-item .wo-cal-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.wo-cal-st,.wo-cal-rec,.wo-cal-pri{flex:none;display:inline-block;width:14px;height:14px;background:center/14px no-repeat}
.wo-cal-item .wo-cal-st{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F6359' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")}
.wo-cal-item.st-DONE .wo-cal-st{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A6339' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E")}
.wo-cal-item.st-IN_PROGRESS .wo-cal-st{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356379F' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.7M20 4v5h-5'/%3E%3C/svg%3E")}
.wo-cal-item.st-ON_HOLD .wo-cal-st{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237F4C00' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M9 5v14M15 5v14'/%3E%3C/svg%3E")}
.wo-cal-item.late .wo-cal-st{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A01F29' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0'/%3E%3C/svg%3E")}
.wo-cal-rec{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F6359' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 12a8 8 0 0 1 13.7-5.7L20 8M20 4v4h-4M20 12a8 8 0 0 1-13.7 5.7L4 16M4 20v-4h4'/%3E%3C/svg%3E")}
.wo-cal-pri{border-radius:50%;background-size:10px}
.wo-cal-pri.pri-LOW{background-color:var(--bb-green);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E")}
.wo-cal-pri.pri-NORMAL{background-color:var(--bb-open);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E")}
.wo-cal-pri.pri-HIGH{background-color:var(--bb-med);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E")}
.wo-cal-pri.pri-URGENT{background-color:var(--bb-red);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M12 5v9M12 19h.01'/%3E%3C/svg%3E")}
.wo-cal-more{color:var(--bb-blue)!important;font-weight:600;text-align:center}
.wo-cal-card{position:fixed;z-index:60;padding:12px 14px;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:10px;box-shadow:0 8px 24px rgba(16,38,31,.22);font-size:.9rem}
.wo-cal-card[hidden]{display:none}
.wo-card-title{display:flex;align-items:flex-start;gap:6px;margin:0 0 8px;font-weight:700;color:var(--bb-ink)}
.wo-card-title .wo-cal-rec{margin-top:4px}
.wo-cal-card dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;margin:0;padding-top:8px;border-top:1px solid var(--bb-line)}
.wo-cal-card dt{color:var(--bb-slate)}
.wo-cal-card dd{margin:0;text-align:right;overflow-wrap:anywhere}
.wo-card-open{width:100%;min-height:40px;margin:10px 0 0}
.wo-cal-item::before{content:none!important}
#wo-cal-grid .wo-cal-item{padding-left:4px}

/* My Filters, Reset / Save Filters (2026-10-28, reference layout). */
.wo-myf{display:inline-flex;gap:8px;margin-left:auto;flex-wrap:wrap}
button.wo-myf-btn{width:auto;min-height:38px;margin:0;padding:4px 12px;font-size:.9rem;font-weight:600;border:1px solid var(--bb-line);border-radius:8px;background:var(--bb-white);color:var(--bb-ink)}
button.wo-myf-btn[hidden]{display:none}
#wo-save{color:var(--bb-blue)}
.wo-fp-sub{margin:12px 0 4px;font-size:.95rem}
.wo-fp-load{flex:1;min-height:40px;margin:0;border:0;background:none;color:var(--bb-blue);font-weight:600;text-align:left;justify-content:flex-start}
.wo-fp-share{display:flex;align-items:center;gap:8px;margin:8px 0;font-weight:500}
.wo-fp-share input{width:20px;height:20px;margin:0}
@media (max-width:899px){.wo-myf{margin-left:0}}
.wo-table-pager{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.wo-table-pager button{width:auto;white-space:nowrap;margin:0}
@media (max-width:899px){
 #messages > #msg-pane{height:auto;min-height:calc(100dvh - 56px - var(--tabs) - env(safe-area-inset-bottom));padding-bottom:76px;overflow:visible}
 #messages ol.msg-log{overflow:visible}
 #messages .msg-compose{position:fixed;left:0;right:0;bottom:calc(var(--tabs) + env(safe-area-inset-bottom));z-index:21;background:var(--bb-white)}
 .wo-limit{font-size:.85rem}
}
/* Auto-save (2026-10-28): saved toast, missing required items, procedure step rows */
#bb-toast{position:fixed;left:50%;bottom:calc(var(--tabs) + 16px);transform:translateX(-50%);z-index:60;padding:10px 18px;border-radius:999px;background:var(--bb-menu);color:var(--bb-paper);font-weight:600;font-size:.9rem;box-shadow:0 4px 16px rgba(16,38,31,.25);max-width:calc(100vw - 32px)}
#bb-toast.bad{background:var(--bb-red)}
#bb-toast[hidden]{display:none}
@media (min-width:900px){#bb-toast{bottom:24px}}
.bb-missing{outline:2px solid var(--bb-red);outline-offset:3px;border-radius:6px;background:var(--bb-redbg)}
.proc-steps{display:grid;gap:6px;margin:4px 0 8px}
.proc-step{display:flex;align-items:center;gap:8px}
.proc-step input[type=text]{flex:1;min-width:0}
.proc-req{display:flex;align-items:center;gap:4px;margin:0;font-size:.85rem;white-space:nowrap}
.proc-del{min-width:36px;padding:4px 8px}
.proc-add-step{justify-self:start;margin-bottom:8px}
/* Work Orders Table, reference layout pass (2026-10-28) */
.wo-quick{display:contents}
.wo-qf{display:inline-flex;align-items:center;flex:none;min-height:36px;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:6px;color:var(--bb-ink)}
.wo-qf.on{background:var(--bb-bluebg);border-color:var(--bb-blue);color:var(--bb-blue)}
.wo-qf-btn{display:inline-flex;align-items:center;gap:6px;min-height:34px;margin:0;padding:4px 12px;background:none;border:0;color:inherit;font-size:.88rem;font-weight:500;white-space:nowrap;max-width:300px;overflow:hidden;text-overflow:ellipsis}
.wo-qf .wo-chip-x{min-height:34px;margin:0;padding:4px 10px 4px 0;background:none;border:0;color:inherit;font-size:1.05rem}
.wo-qf-ico{flex:none;width:16px;height:16px;fill:none;stroke:var(--bb-blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wo-add-filter{border-style:solid;border-radius:6px;font-weight:500}
#wo-table .wo-table-scroll{border-radius:8px}
.wo-table-bar{margin:12px 0 0;padding:10px 16px;background:var(--bb-white);border:1px solid var(--bb-line);border-bottom:0;border-radius:8px 8px 0 0}
.wo-table-bar + .wo-cols + .wo-table-scroll,.wo-table-bar ~ .wo-table-scroll{border-top-left-radius:0;border-top-right-radius:0}
.wo-table-bar #wo-table-count{flex:1}
.wo-table-picked{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600;color:var(--bb-blue)}
.wo-table-picked[hidden]{display:none}
.wo-gear{width:36px;min-width:36px;padding:0;display:inline-grid;place-items:center}
.wo-gear svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.wo-cols{position:absolute;right:16px;z-index:30;max-width:280px;width:280px;max-height:60vh;overflow:auto;padding:10px 12px;box-shadow:0 6px 24px rgba(16,38,31,.18)}
#wo-table{position:relative}
.wo-cols .wo-set-head{display:flex;align-items:center;gap:8px}
.wo-cols .wo-set-head b{flex:1}
.wo-cols .wo-col-list{display:grid;gap:0}
.wo-cols .wo-col-row{display:flex;align-items:center;gap:10px;margin:0;padding:6px 2px;font-size:.9rem;border:0}
.wo-cols .wo-col-row input{width:16px;height:16px;margin:0}
.wo-col-hint{margin:6px 0 0;font-size:.8rem}
#wo-table-grid{font-size:.88rem}
#wo-table-grid th{height:44px;padding:0;color:var(--bb-slate)}
#wo-table-grid th.wo-movable{cursor:grab;touch-action:pan-y}
#wo-table-grid th.wo-dragging{opacity:.5}
#wo-table-grid th.wo-drop{box-shadow:inset 3px 0 0 var(--bb-blue)}
#wo-table-grid th .wo-sort{display:inline-flex;align-items:center;gap:6px;font-weight:500;color:var(--bb-ink);font-size:.88rem}
#wo-table-grid th .wo-nosort{font-weight:500;color:var(--bb-ink);font-size:.88rem}
.wo-sort-ico{color:var(--bb-control);font-size:.8rem}
.wo-sort.on .wo-sort-ico{color:var(--bb-blue)}
#wo-table-grid td{height:48px;padding:6px 12px;vertical-align:middle}
.wo-pick-col{width:44px;padding:0 0 0 14px!important;text-align:left}
.wo-pick-col input{width:16px;height:16px;margin:0;vertical-align:middle}
#wo-table-grid th.wo-pick-col{padding-left:14px!important}
#wo-table-grid td.wo-tcell-title{font-weight:500}
.wo-tcell-title{display:table-cell}
.wo-t-ico{display:inline-grid;place-items:center;width:30px;height:30px;margin-right:8px;vertical-align:middle;border:1px solid var(--bb-line);border-radius:6px;background:var(--bb-bluebg)}
.wo-t-ico svg{width:18px;height:18px;fill:none;stroke:var(--bb-blue);stroke-width:1.8;stroke-linejoin:round}
.wo-dot{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--bb-blue);vertical-align:middle}
.wo-t-text{vertical-align:middle}
.wo-t-text.wo-unread{font-weight:700}
.wo-pill{display:inline-flex;align-items:center;gap:5px;min-height:28px;margin:0;padding:2px 8px;border:1px solid var(--bb-line);border-radius:6px;background:var(--bb-white);color:var(--bb-ink);font-size:.82rem;font-weight:500;line-height:1}
button.wo-pill{cursor:pointer}
.wo-pill-ico{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.wo-pill-caret{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;margin-left:2px}
.wo-st.st-DONE{color:var(--bb-green);background:var(--bb-greenbg);border-color:transparent}
.wo-st.st-IN_PROGRESS{color:var(--bb-prog);background:var(--bb-progbg);border-color:transparent}
.wo-st.st-ON_HOLD{color:var(--bb-amber);background:var(--bb-amberbg);border-color:transparent}
.wo-pri.pri-LOW .wo-pill-ico{color:#fff;background:var(--bb-low);border-radius:50%;padding:1px}
.wo-pri.pri-NORMAL .wo-pill-ico{color:#fff;background:var(--bb-open);border-radius:50%;padding:1px}
.wo-pri.pri-HIGH .wo-pill-ico{color:#fff;background:var(--bb-med);border-radius:50%;padding:1px}
.wo-pri.pri-URGENT .wo-pill-ico{color:#fff;background:var(--bb-red);border-radius:50%;padding:1px}
.wo-st-cell{position:relative;overflow:visible!important}
.wo-st-menu{position:absolute;left:8px;top:calc(100% - 4px);z-index:40;display:grid;min-width:170px;padding:4px;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:8px;box-shadow:0 6px 24px rgba(16,38,31,.18)}
.wo-st-opt{display:flex;align-items:center;gap:8px;min-height:36px;margin:0;padding:6px 10px;background:none;border:0;border-radius:6px;color:var(--bb-ink);font-size:.88rem;text-align:left}
.wo-st-opt:hover,.wo-st-opt[aria-current=true]{background:var(--bb-neutralbg)}
.wo-st-opt.st-DONE .wo-pill-ico{color:var(--bb-green)}.wo-st-opt.st-IN_PROGRESS .wo-pill-ico{color:var(--bb-prog)}.wo-st-opt.st-ON_HOLD .wo-pill-ico{color:var(--bb-amber)}
.wo-avatars{display:inline-flex;align-items:center;vertical-align:middle}
.wo-av{display:inline-grid;place-items:center;width:24px;height:24px;margin-left:-6px;border:2px solid var(--bb-white);border-radius:50%;background:var(--bb-blue);color:#fff;font-size:.66rem;font-weight:700;position:relative}
.wo-av:first-child{margin-left:0}
.wo-av-1{background:#2F6C8F}.wo-av-2{background:#6B5B95}.wo-av-3{background:#B5523B}.wo-av-4{background:#B88A22}
.wo-av-more{background:var(--bb-neutralbg);color:var(--bb-slate)}
.wo-av-name{margin-left:8px;overflow:hidden;text-overflow:ellipsis}
#wo-table-grid tr.wo-trow:focus-visible{outline:2px solid var(--bb-blue);outline-offset:-2px}
/* Teams / Users (reference layout, 2026-10-28) */
.tu-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tu-top h2{margin:0;flex:1}
.tu-top .rq-search{max-width:320px}
.tu-invite{margin:0;min-height:40px;padding:0 16px;background:var(--bb-blue);border-color:var(--bb-blue);color:#fff;font-weight:600;border-radius:8px}
.tu-invite[hidden]{display:none}
.tu-tabs{display:flex;gap:4px;margin:12px 0;border-bottom:1px solid var(--bb-line)}
.tu-tabs button{margin:0 0 -1px;min-height:40px;padding:0 16px;background:none;border:0;border-bottom:3px solid transparent;border-radius:0;color:var(--bb-slate);font-weight:600}
.tu-tabs button[aria-selected=true]{color:var(--bb-blue);border-bottom-color:var(--bb-blue)}
#workspace:not(.tu-teams) > section.tu-team-root{display:none!important}
#workspace.tu-teams #staff-management,#workspace.tu-teams #role-permissions,#workspace.tu-teams .tu-perm-btn{display:none!important}
.tu-status{margin:4px 0 8px}
.tu-body{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
#staff-management.tu-open .tu-body{grid-template-columns:minmax(0,1fr) minmax(280px,380px)}
.tu-list{overflow-x:auto;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:8px}
#staff-list{width:100%;border-collapse:collapse;font-size:.9rem}
#staff-list th{height:44px;padding:0 12px;text-align:left;font-weight:500;color:var(--bb-ink);border-bottom:1px solid var(--bb-line);white-space:nowrap}
#staff-list td{height:52px;padding:6px 12px;border-bottom:1px solid var(--bb-line);white-space:nowrap}
#staff-list tr.tu-row{cursor:pointer}
#staff-list tr.tu-row:hover,#staff-list tr.tu-row.on{background:var(--bb-bluebg)}
#staff-list tr.tu-removed td{color:var(--bb-control)}
.tu-name{display:flex;align-items:center;gap:10px;font-weight:600}
.tu-name .wo-av{margin:0;width:30px;height:30px;font-size:.72rem}
.tu-detail:empty,.tu-back{display:none}
.tu-detail:not(:empty){padding:16px;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:8px;align-self:start}
.tu-d-head{display:flex;align-items:center;gap:12px}
.tu-d-head h3{margin:0}
.tu-av-lg{width:48px!important;height:48px!important;margin:0!important;font-size:1rem!important}
.tu-role{display:grid;gap:4px;margin:12px 0}
.tu-remove{color:var(--bb-red)}
.tu-invite-panel{margin:0 0 12px;padding:14px 16px;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:8px;box-shadow:0 6px 24px rgba(16,38,31,.12)}
.tu-invite-panel[hidden]{display:none}
.tu-invite-panel fieldset{margin:0;padding:0;border:0}
.tu-inv-head{display:flex;align-items:center}
.tu-inv-head h3{flex:1;margin:0 0 8px}
.tu-inv-rows{display:grid;gap:8px}
.tu-inv-row{display:grid;grid-template-columns:1fr 1fr 160px;gap:8px}
.tu-inv-row input,.tu-inv-row select{margin:0}
.tu-inv-more{display:block;margin:8px 0}
.tu-roles{margin:16px 0;padding:10px 14px;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:8px}
.tu-roles summary{cursor:pointer;font-weight:600}
@media (max-width:899px){
 #people > .tu-top,#people > .tu-tabs{padding:0 var(--gutter)}
 .tu-inv-row{grid-template-columns:1fr}
 #staff-list th:nth-child(3),#staff-list td:nth-child(3){display:none}
 #staff-management.tu-open .tu-body{grid-template-columns:minmax(0,1fr)}
 #staff-management.tu-open .tu-list{display:none}
 #staff-management.tu-open .tu-back{display:flex;position:sticky;top:0;z-index:15;min-height:48px;align-items:center;gap:14px;margin:0;padding:0 var(--gutter);background:var(--bb-menu);color:var(--bb-paper);border:0;border-radius:0;font-weight:600}
}
#people #staff-open{display:none!important}
#people .tu-perm-btn{min-height:36px;margin:0 0 8px;padding:0 12px;font-size:.88rem}
#staff-management.tu-open #staff-list th:nth-child(n+3),#staff-management.tu-open #staff-list td:nth-child(n+3){display:none}
.tu-grid{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:14px 0 0}
.tu-grid dt{font-size:.75rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--bb-slate)}
.tu-grid dd{margin:0;font-weight:600;overflow-wrap:anywhere}
/* Settings (reference layout, 2026-10-28): tabs, setting rows with a description */
.st-tabs{display:flex;gap:4px;margin:8px 0 16px;border-bottom:1px solid var(--bb-line);flex-wrap:wrap}
.st-tabs button{flex:none;margin:0 0 -1px;min-height:40px;padding:0 14px;background:none;border:0;border-bottom:3px solid transparent;border-radius:0;color:var(--bb-slate);font-weight:600;white-space:nowrap}
.st-tabs button[aria-selected=true]{color:var(--bb-blue);border-bottom-color:var(--bb-blue)}
.st-tabs button[hidden]{display:none}
#settings .st-group{display:none;max-width:760px}
#settings[data-st=general] .st-group[data-st-group=general],#settings[data-st=features] .st-group[data-st-group=features],#settings[data-st=teammates] .st-group[data-st-group=teammates],#settings[data-st=custom] .st-group[data-st-group=custom],#settings[data-st=data] .st-group[data-st-group=data]{display:grid;gap:10px}
.st-card{padding:16px;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:8px}
.st-card h3{margin:0 0 4px}
.st-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.st-actions button{margin:0;width:auto}
#settings .st-row{display:grid;gap:2px;width:100%;margin:0;padding:14px 44px 14px 16px;text-align:left;background:var(--bb-white) no-repeat right 16px center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F6359' stroke-width='2'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");border:1px solid var(--bb-line);border-radius:8px;color:var(--bb-ink);font-weight:600;font-size:1rem}
#settings .st-row::after{content:attr(data-desc);font-weight:400;font-size:.85rem;color:var(--bb-slate)}
#settings .st-row[hidden]{display:none}
#settings .st-group > section:not([hidden]){padding:14px 16px;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:8px}
@media (max-width:899px){#settings > h2,#settings > .st-tabs,#settings > .st-group{margin-left:var(--gutter);margin-right:var(--gutter)}}
#settings .st-row{justify-items:start}
#settings:not([data-st=data]) ~ .st-in-data,#settings:not([data-st=features]) ~ .st-in-features{display:none!important}
.st-in-data,.st-in-features{max-width:760px}
@media (max-width:899px){.st-in-data,.st-in-features{margin-left:var(--gutter);margin-right:var(--gutter)}}
.tu-top h2{font-size:1.9rem}
@media (max-width:899px){
 #people > .tu-top{padding-top:12px}
 .tu-top h2{font-size:1.5rem}
 .tu-top .rq-search{order:3;flex-basis:100%;max-width:none}
 #people:has(#staff-management.tu-open) > .tu-top,#people:has(#staff-management.tu-open) > .tu-tabs,#people:has(#staff-management.tu-open) .tu-perm-btn{display:none!important}
 #people .tu-perm-btn{margin-left:var(--gutter)}
 #staff-management > .tu-status,#staff-management > .tu-invites,#staff-management > .tu-invite-panel,#staff-management > .tu-roles{margin-left:var(--gutter);margin-right:var(--gutter)}
 .tu-list{border-left:0;border-right:0;border-radius:0}
}
/* Text never runs under the side column (Chris, 2026-10-28): the middle column of every
   card is held to its grid track; a long title wraps to two lines, then ends in "...". */
.rq-card > .rq-main{justify-self:stretch;width:auto;max-width:100%;min-width:0;overflow:hidden}
.rq-card > .rq-main > *{max-width:100%;min-width:0;overflow-wrap:anywhere}
.rq-card > .rq-side{min-width:0}
#workspace .rq-card .rq-main > .wo-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;white-space:normal;overflow:hidden}
/* A work order being rebuilt after a save waits here, unseen, while its copy stays on screen. */
.bb-offstage{position:fixed;top:0;left:-10000px;opacity:0;pointer-events:none;overflow:hidden;max-height:100vh}
/* After an auto-save the small "Saved" note is enough; the longer status line stays for screen readers only. */
#notice[data-quiet]{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0!important;padding:0!important;box-shadow:none!important}
/* Lists load more on their own (Chris, 2026-10-28): the trigger shows only as a quiet line. */
button.bb-auto-more:not([hidden]){display:flex;justify-content:center;align-items:center;width:100%;min-height:44px;margin:8px 0;padding:0;background:none!important;border:0!important;box-shadow:none!important;font-size:0!important;color:transparent!important}
button.bb-auto-more::after{content:"Loading more\2026";font-size:.88rem;font-weight:500;color:var(--bb-slate)}
/* Assigned to: people and teams as removable chips, one picker to add more (stage 83). */
.as-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.as-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:36px;padding:2px 4px 2px 4px;background:var(--bb-bluebg);border:1px solid var(--bb-line);border-radius:999px;font-size:.9rem;font-weight:600;color:var(--bb-ink)}
.as-chip > span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.as-av{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--bb-blue);color:var(--bb-white);font-size:.72rem;font-weight:700}
.as-teams .as-av{background:var(--bb-slate) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 19c0-3 3-5 6-5s6 2 6 5'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M16 14c3 0 5 2 5 4'/%3E%3C/svg%3E") center/18px no-repeat}
#detail .as-chip button.as-rm{flex:none;width:28px;min-width:28px;height:28px;min-height:28px;margin:0;padding:0;border:0;border-radius:50%;background:none;color:var(--bb-slate);font-size:1.1rem;line-height:1}
.as-none{padding:6px 2px}
/* Teams tab in the reference layout (2026-10-28). */
.tm-top{display:flex;align-items:center;gap:12px;margin:4px 0 8px}
.tm-top .tm-h{margin:0;flex:1;font-size:1.05rem}
.tm-top .tm-new{width:auto}
.tm-body.tm-open{grid-template-columns:minmax(0,1fr) minmax(280px,380px)}
.tm-list{width:100%;border-collapse:collapse;font-size:.9rem}
.tm-list th{height:44px;padding:0 12px;text-align:left;font-weight:500;border-bottom:1px solid var(--bb-line)}
.tm-list td{height:52px;padding:6px 12px;border-bottom:1px solid var(--bb-line)}
.tm-list tr.tu-row{cursor:pointer}
.tm-list tr.tu-row:hover,.tm-list tr.tu-row.on{background:var(--bb-bluebg)}
.tm-list tr.tu-removed td{color:var(--bb-control)}
.tm-list .tu-name{min-width:0}
.tm-list .tu-name span:last-child{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal}
.tm-av{background:var(--bb-blue)!important;color:#fff}
.tm-empty{padding:16px;margin:0}
.tm-count{margin:16px 0 6px;font-size:.85rem;color:var(--bb-slate)}
.tm-members{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.tm-members li{display:flex;align-items:center;gap:10px;min-width:0}
.tm-members .wo-av{margin:0;width:30px;height:30px;font-size:.72rem;flex:none}
.tm-mname{flex:1;min-width:0;overflow-wrap:anywhere}
.tm-rm{flex:none}
.tm-add{display:grid;gap:4px;margin:8px 0 12px}
.tm-archive{margin-top:8px}
.tm-create{margin:0 0 12px}
.tm-create-bar{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:720px){.tm-body.tm-open{grid-template-columns:minmax(0,1fr)}}
.tm-members button.tm-rm{width:32px;min-width:32px;height:32px;min-height:32px;margin:0;padding:0;border:0;border-radius:50%;background:none;color:var(--bb-slate);font-size:1.15rem;line-height:1}
.tm-members button.tm-rm:hover{background:var(--bb-bluebg)}
.tm-back{display:none}
@media (max-width:899px){
 .tm-panel{padding:0 var(--gutter)}
 .tm-body.tm-open .tu-list{display:none}
 .tm-body.tm-open .tm-back{display:flex;min-height:48px;align-items:center;margin:0;padding:0 14px;background:var(--bb-menu);color:var(--bb-paper);border:0;border-radius:8px;font-weight:600}
}
#people .tm-panel button.tm-new{background:var(--bb-blue);border-color:var(--bb-blue);color:#fff}
#settings .st-row{justify-content:stretch}
/* Phone sizes and layout measured from Chris's fold screenshots of the reference app (2026-10-28):
   56px title bar, 52px search row, 36px group bands, 82px list rows with a 56px round picture at 8px,
   18px titles and 16px lines, and a 5-item bottom bar (Overview, Work Orders, Assets, Messages, More). */
#more-menu,#more-back{display:none}
@media (min-width:900px){#workspace > #more-menu,#workspace > #more-back{display:none!important}}
@media (max-width:899px){
 #tabs button{min-height:56px;padding:8px 2px 6px;gap:3px;font-size:11px;font-weight:500;line-height:1.2}
 #tabs button svg{width:26px;height:26px}
 #tabs button[aria-current=page],#tabs button[aria-current=page] svg{color:var(--bb-blue);stroke:var(--bb-blue)}
 #tabs button[aria-current=page]::after{display:none}
 body:has(#more-menu) #tabs button[data-tab=assets]{order:1}body:has(#more-menu) #tabs button[data-tab=messages]{order:2}body:has(#more-menu) #tabs button[data-tab=more]{order:3}
 body:has(#more-menu) #tabs button[data-tab=work] .short{display:none}
 body:has(#more-menu) #tabs button[data-tab=work] .long{display:inline}
 body:has(#more-menu) #tabs button[data-tab=requests]{display:none}
 body:has(#more-menu):has(#workspace:is([data-view=requests],[data-view=pms],[data-view=people],[data-view=library]):not([hidden])) #tabs button[data-tab=more]{color:var(--bb-blue)}
 body:has(#more-menu):has(#workspace:is([data-view=requests],[data-view=pms],[data-view=people],[data-view=library]):not([hidden])) #tabs button[data-tab=more] svg{stroke:var(--bb-blue)}
 body:has(#workspace:is([data-view=more],[data-view=pms],[data-view=people]):not([hidden])) #appbar{display:none}
 /* More screen. */
 #workspace[data-view=more]:not(.st-open) > [data-view~=more]:not(#more-menu){display:none!important}
 #workspace[data-view=more].st-open > #more-menu{display:none!important}
 #workspace > #more-menu{background:var(--bb-white);min-height:calc(100vh - var(--tabs))}
 body:has(#more-menu):has(#workspace[data-view=locations]:not([hidden])) #tabs button[data-tab=assets]{color:var(--bb-blue)}
 body:has(#more-menu):has(#workspace[data-view=locations]:not([hidden])) #tabs button[data-tab=assets] svg{stroke:var(--bb-blue)}
 /* More: centered hotel name with Account on the right, hotel card, Invite Members, Product Features tiles. */
 #workspace > #more-menu{background:var(--bb-neutralbg)}
 .more-top{position:sticky;top:0;z-index:15;display:grid;grid-template-columns:72px minmax(0,1fr) 72px;align-items:center;min-height:56px;margin:0 0 16px;background:var(--bb-menu)}
 .more-top h2{grid-column:2;margin:0;font-size:1.125rem;font-weight:700;text-align:center;color:var(--bb-paper);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .more-top .more-account{grid-column:3;display:flex;flex-direction:column;align-items:center;gap:1px;min-height:52px;margin:0;padding:2px 0;font-size:10px;font-weight:500;color:var(--bb-paper);background:none;border:0}
 .more-avatar{width:28px;height:28px;border-radius:50%;background:var(--bb-mint)}
 #more-menu > .more-card{display:grid;grid-template-columns:64px minmax(0,1fr) 16px;align-items:center;gap:0 14px;width:calc(100% - 2 * var(--gutter));min-height:118px;margin:0 var(--gutter) 16px;padding:12px 14px;text-align:left;background:var(--bb-white) no-repeat right 14px center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6B4F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");border:1px solid var(--bb-line);border-radius:8px;color:var(--bb-ink)}
 .more-logo{width:64px;height:64px;border-radius:50%;background:var(--bb-menu) center/40px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 112 112'%3E%3Cpath fill='%23D5E6DD' d='M87 51C87 71 71 87 51 87C31 87 15 71 15 51C15 31 31 15 51 15V31C40 31 31 40 31 51C31 62 40 71 51 71C62 71 71 62 71 51Z'/%3E%3Cpath fill='%23C99A2E' d='M67 15H87V35H67Z'/%3E%3C/svg%3E")}
 .more-card-text{display:grid;gap:4px;min-width:0}
 .more-card-text b{font-size:20px;line-height:1.25;overflow-wrap:anywhere}
 .more-card-text span{font-size:16px;font-weight:500;color:var(--bb-slate)}
 #more-menu > .more-invite{display:flex;justify-content:center;align-items:center;gap:8px;width:calc(100% - 2 * var(--gutter));min-height:46px;margin:0 var(--gutter);font-size:16px;font-weight:600;color:#fff;background:var(--bb-blue);border:0;border-radius:4px}
 .more-invite svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
 /* Pause Notifications: outlined button under Invite Members; choices open in a bottom sheet. */
 #more-menu > .more-pause{display:flex;justify-content:center;align-items:center;gap:8px;width:calc(100% - 2 * var(--gutter));min-height:46px;margin:10px var(--gutter) 0;font-size:16px;font-weight:600;color:var(--bb-blue);background:transparent;border:1px solid var(--bb-blue);border-radius:4px}
 #more-menu > .more-pause.on{background:color-mix(in srgb,var(--bb-blue) 10%,transparent)}
 .more-pause svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
 .pause-sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.4)}
 .pause-box{display:grid;gap:8px;width:100%;max-width:480px;padding:20px var(--gutter,16px) calc(16px + env(safe-area-inset-bottom));background:var(--panel,#fff);border-radius:12px 12px 0 0}
 .pause-box h3{margin:0 0 4px;font-size:18px}
 .pause-box p{margin:0 0 4px}
 .pause-opt,.pause-cancel{min-height:46px;font-size:16px;border-radius:4px;border:1px solid var(--line,#ccd);background:transparent;color:inherit;text-align:left;padding:0 14px}
 .pause-resume{background:var(--bb-blue);color:#fff;border-color:var(--bb-blue);text-align:center;font-weight:600}
 .pause-cancel{text-align:center;border:0;color:var(--bb-blue);font-weight:600}
 .more-h{margin:28px var(--gutter) 10px;font-size:14px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--bb-ink)}
 .more-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0 var(--gutter)}
 .more-tiles button{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;min-height:124px;margin:0;padding:12px 8px;font-size:17px;font-weight:500;color:var(--bb-ink);background:var(--bb-white);border:1px solid var(--bb-line);border-radius:8px;text-align:center}
 .more-tiles button:disabled{opacity:.55}
 .more-tiles small{font-size:12px;color:var(--bb-slate);margin-top:-8px}
 .more-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--bb-bluebg)}
 .more-ico svg{width:24px;height:24px;stroke:var(--bb-blue);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
 /* Settings on phones: a list of rows; a row opens its own page. */
 #workspace[data-view=more].st-open:not(.st-sub) > [data-view~=more]:not(#settings):not(#more-back){display:none!important}
 #workspace.st-open:not(.st-sub) > #settings > .st-group{display:none!important}
 #workspace.st-open.st-sub > #settings > .st-tabs{display:none}
 #workspace.st-open > #settings > .st-tabs{flex-direction:column;flex-wrap:nowrap;gap:0;margin:0 var(--gutter);padding:0 14px;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:8px}
 #workspace.st-open > #settings > .st-tabs button{display:flex;justify-content:flex-start;align-items:center;gap:16px;min-height:70px;margin:0;padding:0 28px 0 0;font-size:17px;font-weight:500;color:var(--bb-ink);border:0;border-bottom:1px solid var(--bb-line);background:no-repeat right 0 center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6B4F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E")}
 #workspace.st-open > #settings > .st-tabs button:last-child{border-bottom:0}
 #workspace.st-open > #settings > .st-tabs button::before{content:"";flex:none;width:40px;height:40px;border-radius:50%;background:var(--bb-bluebg) center/22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6B4F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3v3M12 18v3M3 12h3M18 12h3'/%3E%3C/svg%3E")}
 #workspace.st-open > #settings > .st-tabs button[hidden]{display:none}
 #workspace.st-open > #settings > .st-tabs button[data-st-tab=teammates]{order:-1}
 /* Back arrow to the More screen, over the left end of each title bar. */
 #workspace > #more-back{position:fixed;top:0;left:0;z-index:21;width:64px;height:56px;min-height:56px;margin:0;padding:0;border:0;border-radius:0;background:center/24px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3F5F0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H4M10 6l-6 6 6 6'/%3E%3C/svg%3E")}
 #workspace[data-view=requests]:has(.rq-detail-open) > #more-back,#workspace[data-view=locations]:has(#places > #pl-detail:not(:empty)) > #more-back,#workspace[data-view=library]:has(#places > #pl-detail:not(:empty)) > #more-back,#workspace[data-view=people]:has(#staff-management.tu-open) > #more-back{display:none!important}
 #workspace[data-view=requests] #requests .rq-top h2,#workspace:is([data-view=locations],[data-view=library]) .pl-top h2{padding-left:72px}
 #workspace > #pm,#workspace > #people,#workspace > #more-menu{margin:0 calc(-1 * var(--gutter));padding:0 0 16px}
 #workspace.st-open > #settings{margin-top:0}
 #pm > :not(h2){margin-left:var(--gutter);margin-right:var(--gutter)}
 #people > section,#people > button{margin-left:var(--gutter);margin-right:var(--gutter)}
 #workspace > #pm > h2,#workspace.st-open > #settings > h2{position:sticky;top:0;z-index:15;display:flex;align-items:center;min-height:56px;margin:0 0 12px;padding:0 var(--gutter) 0 72px;font-size:1.25rem;font-weight:500;color:var(--bb-paper);background:var(--bb-menu)}
 #workspace.st-open > #settings{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter))}
 #workspace.st-open > #settings > h2{margin-left:0;margin-right:0}
 #people > .tu-top{position:sticky;top:0;z-index:15;padding:0 4px 0 0;gap:0 8px;background:linear-gradient(var(--bb-ink) 0 56px,var(--bb-white) 56px);border-bottom:1px solid var(--bb-line)}
 #people > .tu-top h2{display:flex;align-items:center;min-height:56px;padding-left:72px;font-size:1.25rem;font-weight:500;color:var(--bb-paper)}
 #people > .tu-top .rq-search{min-height:52px;margin:0;padding-left:46px;border:0;border-radius:0;background:var(--bb-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F6359' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E") 16px center/20px no-repeat}
 /* Title bars: regular-weight 20px title. */
 .rq-top h2,.rq-top h2:first-child{font-size:1.25rem;font-weight:500}
 /* Lists: 36px grey band with a 17px bold heading at 16px. */
 #workspace .rq-list li.rq-group,#workspace #queue li.rq-group{display:flex;align-items:center;min-height:36px;padding:0 16px;border-bottom:0}
 #workspace .rq-list li.rq-group button.rq-group-toggle,#workspace #queue li.rq-group button.rq-group-toggle{min-height:36px;padding:0;font-size:17px;font-weight:700}
 /* Rows: 82px pitch, white, no dividers; picture 56px at 8px; text from 73px; chevron 16px from the right. */
 #workspace ul.cards li:has(> button.rq-card){border-bottom:0}
 #workspace ul.cards li button.rq-card{grid-template-columns:56px minmax(0,1fr) auto 14px;align-items:start;gap:0 9px;min-height:82px;padding:8px 14px 0 8px}
 #workspace .rq-card .wo-title{font-size:18px;line-height:26px;font-weight:700}
 .rq-card .rq-meta{font-size:16px;line-height:22px;font-weight:500}
 .rq-card .rq-side{align-self:end;margin-bottom:6px}
 .rq-card .rq-side .chip{min-height:28px;padding:2px 8px;font-size:15px}
 .rq-chev{margin-top:10px}
 .rq-screen > p[role=status][data-count]{display:none}
 #work > #workload{display:none}
}

/* Assets and Work Orders on phones, matched to the reference screenshots (2026-10-28):
   Assets: title bar, ASSETS / LOCATIONS tabs right under it, then search; rows with the name in regular
   weight and a pin before "At <location>". Work Orders: calendar icon, search box inside the title bar,
   filter; TO DO / DONE tabs; titles in regular weight on one line. */
@media (min-width:900px){.pl-top .pl-tabs{order:4;flex-basis:100%}}
@media (max-width:899px){
 .rq-top.pl-top .pl-tabs{grid-column:1 / -1;margin:0;background:var(--bb-white);border-bottom:1px solid var(--bb-line)}
 #places > .pl-count{display:none}
 #workspace .pl-card .pl-name{font-size:17px;line-height:24px;font-weight:400}
 #places .pl-card .rq-meta{display:flex;align-items:center;gap:4px;font-size:15px;font-weight:400;color:var(--bb-slate)}
 #places:not(:has(#pl-tab-locations[aria-pressed=true])) .pl-card .rq-meta::before{content:"";flex:none;width:15px;height:15px;background:center/15px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F6359' stroke-width='2'%3E%3Cpath d='M12 21s-7-6-7-11a7 7 0 0 1 14 0c0 5-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E")}
 #places .pl-card{align-items:center!important;padding-top:12px!important;min-height:80px!important}
 #places .pl-icon{width:56px;height:56px;background-size:26px}
 .rq-top.wo-top{grid-template-columns:52px minmax(0,1fr) 44px 44px;padding:0 2px 0 0}
 .rq-top.wo-top > h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .rq-top.wo-top .wo-viewpick{grid-column:1;grid-row:1;margin:0;justify-self:center}
 .rq-top.wo-top .wo-view-btn{width:44px;height:44px;min-height:44px;padding:0;font-size:0;color:transparent;border:0;border-radius:8px;background:center/24px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3F5F0' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='15' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4M7 14h2M11 14h2M15 14h2M7 17h2M11 17h2'/%3E%3C/svg%3E")}
 .rq-top.wo-top .wo-view-btn::after{display:none}
 .rq-top.wo-top .wo-view-menu{left:4px;right:auto}
 .rq-top.wo-top #wo-search{grid-column:2;grid-row:1;min-height:40px;height:40px;margin:0 4px 0 0;padding-left:14px;font-size:16px;border-radius:2px;background:var(--bb-white);background-image:none}
 .rq-top.wo-top #wo-filter-toggle{grid-column:3;grid-row:1}
 .rq-top.wo-top #refresh{grid-column:4;grid-row:1}
 .rq-top.wo-top{background:var(--bb-menu)}
 #work > .wo-tabs button{text-transform:uppercase;font-weight:500;color:var(--bb-ink);letter-spacing:.01em}
 #work > .wo-tabs button[aria-pressed=true]{color:var(--bb-blue);border-bottom-color:transparent}
 #work > .wo-tabs button[aria-pressed=true]::before{content:"";display:inline-block;width:7px;height:7px;margin:0 5px 2px 0;border-radius:50%;background:var(--bb-blue);vertical-align:middle}
 #workspace #work .wo-card .wo-title{font-weight:400;color:var(--bb-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #work .wo-card .rq-meta{font-weight:400;color:var(--bb-slate)}
}

/* Overview on phones, matched to the reference screenshot (2026-10-28): bold centered hotel name,
   more space above the greeting, plain blue action icons, 2x2 status cards with grey labels. */
@media (max-width:899px){
 #overview .ov-bar h2{font-size:18px;font-weight:700}
 #overview .ov-greet{margin-top:26px;font-size:16px}
 #overview .ov-welcome{margin:6px 0 16px;font-size:24px;font-weight:700;line-height:1.25}
 #overview .ov-actions{margin:0 0 24px}
 #overview .ov-actions button{gap:6px;font-size:15px;font-weight:600;color:var(--bb-slate)}
 #overview .ov-ico{width:44px;height:44px;background:var(--bb-bluebg);border:0}
 #overview .ov-ico svg{width:26px;height:26px}
 #overview .ov-h{margin:18px 2px 12px;font-size:14px;letter-spacing:.02em}
 #overview .ov-tiles{gap:16px}
 #overview .ov-tiles button{min-height:126px;padding:16px;border-radius:8px;font-size:15px;font-weight:400;line-height:1.3}
 #overview .ov-n b{font-size:24px}
}

/* Open work order on phones, matched to the reference screenshot (2026-10-28): title first in large
   bold type, then four separate status tiles with icons, then the details card; assignment, planning,
   job details, room/asset, category, procedures and photos follow; sign-off and reopening come last. */
@media (max-width:899px){
 #work > #detail:not(:empty){display:flex;flex-direction:column;padding-top:4px}
 #detail > h2,#detail > h2 + p{display:none}
 #detail > .wd-progress{display:contents}
 #detail > .wd-progress > *{order:-5}
 #detail > .wd-progress > h3:last-of-type,#detail > .wd-progress > .timeline{order:20}
 #detail > .as-form{order:1}#detail > .as-form + p{order:1}
 #detail > .wd-planning{order:2}#detail > .wd-edit{order:3}#detail > .wd-asset{order:4}#detail > .wd-category{order:5}#detail > .wd-procedure{order:6}#detail > .wd-photo{order:7}
 #detail > form:not(.as-form){order:8}
 #detail > .wd-progress > h2{order:-30;margin:8px 0 12px;font-size:24px;line-height:1.35;font-weight:700}
 #detail > .wd-progress > form{order:-20}
 #detail > .wd-progress > p[role=alert]{order:-20}
 #detail > .wd-progress > .wo-grid{order:-15;padding:16px;background:var(--bb-white);border-radius:8px}
 #detail > .wd-progress > form legend{font-size:17px;font-weight:700}
 .status-group{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:8px 0 12px;border:0;border-radius:0;overflow:visible;background:none}
 .status-group .status-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:66px;padding:6px 2px;font-size:12px;font-weight:600;color:var(--bb-blue);background:var(--bb-white);border:1px solid var(--bb-line)!important;border-radius:4px}
 .status-group .status-btn.st-ON_HOLD{order:1}.status-group .status-btn.st-IN_PROGRESS{order:2}.status-group .status-btn.st-DONE{order:3}
 .status-group .status-btn::before{content:"";width:26px;height:26px;background:center/26px no-repeat}
 .status-group .status-btn.st-OPEN::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6B4F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 7.5-2'/%3E%3C/svg%3E")}
 .status-group .status-btn.st-ON_HOLD::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6B4F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 9v6M14 9v6'/%3E%3C/svg%3E")}
 .status-group .status-btn.st-IN_PROGRESS::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6B4F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.7'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E")}
 .status-group .status-btn.st-DONE::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6B4F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
 .status-group .status-btn[aria-pressed=true]{color:#fff;border-color:transparent!important}
 .status-group .status-btn.st-OPEN[aria-pressed=true]{background:var(--bb-blue)}
 .status-group .status-btn.st-OPEN[aria-pressed=true]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 7.5-2'/%3E%3C/svg%3E")}
 .status-group .status-btn.st-ON_HOLD[aria-pressed=true]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 9v6M14 9v6'/%3E%3C/svg%3E")}
 .status-group .status-btn.st-IN_PROGRESS[aria-pressed=true]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.7'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E")}
 .status-group .status-btn.st-DONE[aria-pressed=true]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
 fieldset:disabled .status-group .status-btn{background:var(--bb-white);opacity:.75}
 fieldset:disabled .status-group .status-btn[aria-pressed=true]{opacity:1}
 fieldset:disabled .status-group .status-btn.st-DONE[aria-pressed=true]{background:var(--bb-green)}
 fieldset:disabled .status-group .status-btn.st-ON_HOLD[aria-pressed=true]{background:var(--bb-amber)}
 fieldset:disabled .status-group .status-btn.st-IN_PROGRESS[aria-pressed=true]{background:var(--bb-blue)}
 fieldset:disabled .status-group .status-btn.st-OPEN[aria-pressed=true]{background:var(--bb-blue)}
}

/* Loading (Chris, 2026-10-28): while a page checks the sign-in, show the turning Bit & Bearing mark,
   never the sign-in form. */
#bb-loading{display:none}
body:has(#login[hidden]):has(#verify[hidden]):has(#workspace[hidden]) #bb-loading{display:flex;justify-content:center;align-items:center;min-height:60vh}
body:has(#login[hidden]):has(#verify[hidden]):has(#workspace[hidden]) #notice{visibility:hidden;animation:bb-reveal 0s linear 8s forwards}
@keyframes bb-reveal{to{visibility:visible}}
#bb-loading svg{width:72px;height:72px;padding:14px;border-radius:50%;background:var(--bb-menu);animation:bb-turn 1s linear infinite}
@keyframes bb-turn{to{transform:rotate(360deg)}}
/* Windows with "Show animations" off asks for reduced motion, which stops every other animation;
   the loading mark still turns, slowly, so the page never looks frozen (Chris, 2026-10-28). */
@media (prefers-reduced-motion:reduce){#bb-loading svg{animation:bb-turn 2s linear infinite!important}}
/* Opening a work order on a phone (pilot feedback #6): keep it hidden behind the turning mark until every
   section has loaded (supervisor-app.mjs select with opening). */
#wd-loading{display:none}
@media (max-width:899px){
 #work.wd-loading > :not(#wd-loading):not(#wo-back){display:none!important}
 #work.wd-loading > #wd-loading{display:flex;justify-content:center;align-items:center;min-height:60vh}
}
#wd-loading svg,.rq-loading svg{width:72px;height:72px;padding:14px;border-radius:50%;background:var(--bb-menu);animation:bb-turn 1s linear infinite}
ul.cards > li.rq-loading{display:flex;justify-content:center;align-items:center;min-height:40vh;list-style:none;border:0;background:transparent}
@media (prefers-reduced-motion:reduce){#wd-loading svg,.rq-loading svg{animation:bb-turn 2s linear infinite!important}}

/* PC layout matched to the reference app (Chris, 2026-10-28: "pixel perfect size and layout"),
   measured on his 1919px screenshots. 14px type, a 250px side menu that shrinks to 50px,
   a 40px title row, 32px filter pills, the Work Orders list as one 500px box and the open
   work order as a read view beside it. Only the colors are ours. */
.nav-logo,.nav-collapse,.nav-group-btn,.nav-support,.nav-av,.nav-me,.wo-new,.wo-sortbar,.wo-row-st,.wo-row-side,.wd-head,.wd-sum,.wd-share{display:none}
@media (max-width:899px){
 /* Phones keep their bottom bar and their own Sort By line. */
 .wo-sortbar{display:flex;align-items:center;gap:6px;padding:4px var(--gutter);background:var(--bb-white);border-bottom:1px solid var(--bb-line);font-size:14px;color:var(--bb-slate)}
 .wo-sort-label{display:flex;align-items:center;gap:6px;margin:0;font-size:14px;font-weight:500;color:var(--bb-slate)}
 select.wo-sort-pick{width:auto;min-height:36px;margin:0;padding:4px 26px 4px 4px;border:0;background-color:transparent;background-position:right 4px center;color:var(--bb-blue);font-size:14px;font-weight:600}
 .wo-group-btn{display:none}
}
@media (min-width:900px){
 body:has(#more-menu){--side:250px;font-size:14px}
 body.nav-mini:has(#more-menu){--side:50px}
 body:has(#more-menu):has(#workspace:not([hidden])) #appbar{display:none}
 body:has(#more-menu):has(#workspace:not([hidden])) main{margin:0 16px 0 calc(var(--side) + 16px);padding:0;max-width:none}
 body:has(#more-menu):has(#workspace:not([hidden])) #notice{margin-left:var(--side)}
 body:has(#more-menu):has(#workspace:not([hidden])) #notice:not(:empty){position:fixed;z-index:60;left:calc(var(--side) + 24px);bottom:20px;max-width:560px;margin:0;border:1px solid var(--bb-line);border-radius:6px;box-shadow:0 6px 20px rgba(16,38,31,.18);font-size:14px}

 /* Side menu */
 body:has(#more-menu) #tabs{top:0;width:var(--side);gap:0;padding:0;overflow-x:hidden;overflow-y:auto}
 body:has(#more-menu) #tabs .nav-hotel{display:flex;align-items:center;gap:8px;flex:none;height:50px;margin:0 0 4px;padding:0 8px;border-bottom:1px solid rgba(255,255,255,.12);font-size:14px}
 body:has(#more-menu) #tabs .nav-logo{display:block;flex:none;width:32px;height:32px;border-radius:4px;background:var(--bb-paper) url("/icons/apple-touch-icon.png") center/cover}
 body:has(#more-menu) #tabs #nav-hotel-name{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:600}
 body:has(#more-menu) #tabs .nav-collapse{display:block;flex:none;width:28px;height:28px;min-height:0;margin:0;padding:0;border:0;border-radius:4px;opacity:.8;background:center/18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3F5F0' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='14' rx='2'/%3E%3Cpath d='M9.5 5v14M6 9h1.5M6 12h1.5'/%3E%3C/svg%3E")}
 body:has(#more-menu) #tabs .nav-collapse:hover{background-color:rgba(255,255,255,.1);opacity:1}
 body:has(#more-menu) #tabs .nav-group{display:block;margin:12px 0 4px;padding:0 8px}
 body:has(#more-menu) #tabs .nav-group-btn{display:inline-flex;align-items:center;gap:6px;min-height:32px;width:auto;margin:0;padding:0 8px;border:0;background:none;opacity:1;font-size:12px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;color:rgba(243,245,240,.7)}
 body:has(#more-menu) #tabs .nav-group-btn::after{content:"";width:5px;height:5px;margin:-3px 0 0 2px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
 body:has(#more-menu) #tabs .nav-group-btn[aria-expanded=false]::after{transform:rotate(-45deg);margin-top:0}
 body:has(#more-menu) #tabs .nav-folded{display:none!important}
 body:has(#more-menu) #tabs > button{flex:none;gap:8px;min-height:32px;height:32px;margin:0 8px;padding:0 8px;font-size:14px;font-weight:400;line-height:20px;color:rgba(243,245,240,.9);border-radius:4px;opacity:1;white-space:nowrap}
 body:has(#more-menu) #tabs > button svg{width:16px;height:16px;flex:none}
 body:has(#more-menu) #tabs > button:hover:not(:disabled){background:rgba(255,255,255,.07)}
 body:has(#more-menu) #tabs > button[aria-current=page]{background:rgba(213,230,221,.16);color:var(--bb-mint)}
 body:has(#more-menu) #tabs > button.soon{opacity:.5}
 body:has(#more-menu) #tabs > button.soon small{font-size:11px}
 body:has(#more-menu) #tabs > button .nav-badge{position:static;margin-left:auto;min-width:20px;height:16px;padding:0 4px;border-radius:3px;font-size:11px;line-height:16px;font-weight:700;text-align:center}
 body:has(#more-menu) #tabs .nav-count{background:var(--bb-mint);color:var(--bb-ink)}
 body:has(#more-menu) #tabs .nav-foot{display:flex;flex-direction:column;gap:0;margin-top:auto;padding:0;border-top:1px solid rgba(255,255,255,.12)}
 body:has(#more-menu) #tabs .nav-support{display:flex;align-items:center;gap:8px;height:46px;padding:0 16px;color:rgba(243,245,240,.9);font-size:14px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.12)}
 body:has(#more-menu) #tabs .nav-support:hover{background:rgba(255,255,255,.07)}
 body:has(#more-menu) #tabs .nav-support-ico{width:16px;height:16px;flex:none;background:center/16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3F5F0' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .8-1 1.5v.4M12 17h.01'/%3E%3C/svg%3E")}
 body:has(#more-menu) #tabs .nav-foot .nav-me-btn{display:flex;justify-content:flex-start;gap:10px;width:100%;height:64px;min-height:64px;margin:0;padding:0 12px 0 10px;border:0;border-radius:0;background:none;color:var(--bb-paper);opacity:1;text-align:left;position:relative}
 body:has(#more-menu) #tabs .nav-foot .nav-me-btn:hover{background:rgba(255,255,255,.07)}
 body:has(#more-menu) #tabs .nav-foot .nav-me-btn > svg,body:has(#more-menu) #tabs .nav-foot .nav-me-btn > .short,body:has(#more-menu) #tabs .nav-foot .nav-me-btn > .long{display:none}
 body:has(#more-menu) #tabs .nav-foot .nav-me-btn[aria-current=page]{background:rgba(213,230,221,.16)}
 body:has(#more-menu) #tabs .nav-foot .nav-me-btn::after{content:"";position:absolute;right:20px;top:50%;width:7px;height:7px;margin-top:-4px;border:solid currentColor;border-width:2px 2px 0 0;transform:rotate(45deg)}
 body:has(#more-menu) #tabs .nav-av{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--bb-mint);color:var(--bb-ink);font-size:12px;font-weight:700}
 body:has(#more-menu) #tabs .nav-me{display:flex;flex-direction:column;min-width:0;line-height:1.3}
 body:has(#more-menu) #tabs .nav-me .nav-user{display:block;padding:0;font-size:14px;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 body:has(#more-menu) #tabs .nav-me small{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:400;color:rgba(243,245,240,.75)}
 body:has(#more-menu) #tabs .nav-me small::before{content:"";width:12px;height:12px;background:center/12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D5E6DD' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1 7 17M17 7l2.1-2.1'/%3E%3C/svg%3E")}
 /* Shrunk side menu: icons only, the expand button under the hotel picture. */
 body.nav-mini:has(#more-menu) #tabs .nav-hotel{flex-direction:column;justify-content:flex-start;gap:6px;height:auto;padding:9px 0 8px}
 body.nav-mini:has(#more-menu) #tabs #nav-hotel-name,body.nav-mini:has(#more-menu) #tabs > button > span,body.nav-mini:has(#more-menu) #tabs > button > small,body.nav-mini:has(#more-menu) #tabs .nav-support .long,body.nav-mini:has(#more-menu) #tabs .nav-me,body.nav-mini:has(#more-menu) #tabs .nav-me-btn::after{display:none}
 body.nav-mini:has(#more-menu) #tabs .nav-collapse{transform:scaleX(-1)}
 body.nav-mini:has(#more-menu) #tabs .nav-group{height:8px;margin:0;padding:0;overflow:hidden}
 body.nav-mini:has(#more-menu) #tabs .nav-group-btn{display:none}
 body.nav-mini:has(#more-menu) #tabs .nav-hotel + button{margin-top:12px}
 body.nav-mini:has(#more-menu) #tabs > button{justify-content:center;width:34px;margin:0 8px;padding:0;position:relative}
 body.nav-mini:has(#more-menu) #tabs > button .nav-badge{position:absolute;top:2px;right:2px;min-width:8px;width:8px;height:8px;padding:0;border-radius:50%;font-size:0}
 body.nav-mini:has(#more-menu) #tabs .nav-support{justify-content:center;padding:0}
 body.nav-mini:has(#more-menu) #tabs .nav-foot .nav-me-btn{justify-content:center;padding:0}

 /* Work Orders: title row, filter row, the list box and the open work order. */
 body:has(#more-menu) #workspace[data-view=work]{max-width:none}
 body:has(#more-menu) #workspace[data-view=work] > #work{grid-template-columns:clamp(340px,34vw,500px) minmax(0,1fr);gap:0 18px}
 body:has(#more-menu) #work > .wo-top{display:flex;flex-wrap:nowrap;align-items:center;gap:0;min-height:40px;margin:13px 0 0;padding:0}
 body:has(#more-menu) #work > .wo-top h2{margin:0;font-size:32px;line-height:40px;font-weight:700;letter-spacing:-.01em}
 body:has(#more-menu) #work .wo-viewpick{margin-left:24px}
 body:has(#more-menu) #work .wo-view-btn{display:inline-flex;gap:8px;min-height:32px;padding:0 20px 0 0;border:0;font-size:14px;font-weight:400}
 body:has(#more-menu) #work .wo-view-btn::before{content:"";width:16px;height:16px;background:center/16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314261F' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='1.5'/%3E%3Cpath d='M9.5 4.5v15M15 4.5v15'/%3E%3C/svg%3E")}
 body:has(#more-menu) #work .wo-view-btn::after{right:2px;width:6px;height:6px;border-width:0 1.5px 1.5px 0}
 body:has(#more-menu) #work > .wo-top > #wo-filter-toggle,body:has(#more-menu) #work > .wo-top > #refresh{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
 body:has(#more-menu) #work > .wo-top > #wo-search{flex:0 1 400px;width:400px;min-width:150px;max-width:400px;min-height:40px;height:40px;margin:0 0 0 auto;padding:0 12px 0 40px;font-size:14px;border:1px solid var(--bb-line);border-radius:4px;background:var(--bb-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F6359' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E") 13px center/16px no-repeat}
 body:has(#more-menu) #work .wo-new{display:flex;position:relative;margin-left:16px}
 body:has(#more-menu) #work .wo-new > button{min-height:40px;height:40px;margin:0;border:0;color:#fff;background:var(--bb-blue);font-size:14px;font-weight:600}
 body:has(#more-menu) #work .wo-new-main{gap:8px;padding:0 16px;border-radius:4px 0 0 4px}
 body:has(#more-menu) #work .wo-new-main::before{content:"+";font-size:20px;font-weight:400;line-height:1}
 body:has(#more-menu) #work .wo-new-more{width:40px;padding:0;border-left:1px solid rgba(255,255,255,.35)!important;border-radius:0 4px 4px 0}
 body:has(#more-menu) #work .wo-new-more::after{content:"";border:5px solid transparent;border-top-color:#fff;margin-top:5px}
 body:has(#more-menu) #work .wo-new > button:hover{filter:brightness(1.1)}
 body:has(#more-menu) #work .wo-new-menu{position:absolute;right:0;top:44px;z-index:45;display:grid;min-width:220px;padding:4px;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:6px;box-shadow:0 8px 24px rgba(16,38,31,.18)}
 body:has(#more-menu) #work .wo-new-menu[hidden]{display:none}
 body:has(#more-menu) #work .wo-new-menu button{justify-content:flex-start;min-height:36px;margin:0;padding:0 12px;border:0;background:none;font-size:14px;font-weight:400}
 body:has(#more-menu) #work .wo-new-menu button:hover{background:var(--bb-neutralbg)}
 body:has(#more-menu) #work > .wo-filters{display:flex;align-items:center;gap:8px;margin:19px 0 0;padding:0}
 body:has(#more-menu) #work > .wo-filters :is(.wo-qf-btn,.filter-pill){min-height:32px;height:32px;margin:0;padding:0 12px;gap:8px;font-size:14px;font-weight:400;color:var(--bb-ink);background:var(--bb-white);border:1px solid var(--bb-line);border-radius:4px}
 body:has(#more-menu) #work > .wo-filters .wo-qf-btn svg{width:14px;height:14px}
 body:has(#more-menu) #work > .wo-filters .wo-quick{display:flex;gap:8px}
 body:has(#more-menu) #work > .wo-filters .wo-myf{margin-left:auto;display:flex;gap:8px}
 body:has(#more-menu) #work #wo-saved::before{content:"";width:14px;height:14px;background:center/14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6B4F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 20l9-9M15 4v3M19 5l-2 2M20 9h-3M11 5l1.5 1.5'/%3E%3C/svg%3E")}
 body:has(#more-menu) #work > .wo-tabs,body:has(#more-menu) #work > .wo-sortbar,body:has(#more-menu) #work > #queue,body:has(#more-menu) #work > #next-work{grid-column:1;background:var(--bb-white);border:1px solid var(--bb-line)}
 body:has(#more-menu) #work > .wo-tabs{grid-row:3;margin:16px 0 0;border-bottom:0;border-radius:4px 4px 0 0}
 body:has(#more-menu) #work > .wo-tabs button{min-height:38px;height:38px;font-size:14px;font-weight:400;color:var(--bb-slate);border-bottom:2px solid var(--bb-line)}
 body:has(#more-menu) #work > .wo-tabs button[aria-pressed=true]{color:var(--bb-blue);border-bottom-color:var(--bb-blue)}
 body:has(#more-menu) #work > .wo-tabs button[aria-pressed=true]::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;margin-right:2px}
 body:has(#more-menu) #work > .wo-sortbar{grid-row:4;display:flex;align-items:center;height:40px;padding:0 12px;border-top:0;border-bottom:1px solid var(--bb-line)}
 body:has(#more-menu) #work .wo-sort-label{display:flex;align-items:center;gap:6px;margin:0;font-size:14px;font-weight:400;color:var(--bb-slate)}
 body:has(#more-menu) #work select.wo-sort-pick{width:auto;min-height:28px;margin:0;padding:0 18px 0 4px;border:0;font-size:14px;font-weight:600;color:var(--bb-blue);background-color:transparent;background-position:right 2px center;background-size:12px;cursor:pointer}
 body:has(#more-menu) #work .wo-group-btn{display:block;width:28px;height:28px;min-height:0;margin:0 0 0 auto;padding:0;border:0;border-radius:4px;background:center/18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F6359' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 13l2.5-7h11l2.5 7v5H4z'/%3E%3Cpath d='M4 13h5l1 2h4l1-2h5'/%3E%3C/svg%3E")}
 body:has(#more-menu) #work .wo-group-btn[aria-pressed=true]{background-color:var(--bb-bluebg)}
 body:has(#more-menu) #work > #queue{grid-row:5;display:block;margin:0;padding:0;height:calc(100vh - 213px);overflow-y:auto;border-top:0;border-radius:0 0 4px 4px}
 body:has(#more-menu) #work:has(> #next-work:not([hidden])) > #queue{height:calc(100vh - 253px);border-radius:0}
 body:has(#more-menu) #work > #next-work{grid-row:6;width:100%;min-height:40px;height:40px;margin:0;border-top:0;border-radius:0 0 4px 4px;font-size:14px;color:var(--bb-blue)}
 body:has(#more-menu) #work > #workload,body:has(#more-menu) #work > #confirmation{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}
 body:has(#more-menu) #workspace:not([hidden])[data-view=work]{height:100vh;overflow:clip}
 body:has(#more-menu):has(#workspace[data-view=work]:not([hidden])){overflow:hidden;padding-bottom:0}
 /* List rows */
 body:has(#more-menu) #workspace #queue li.rq-group{margin:0;padding:0 16px;height:32px;display:flex;align-items:center;border-bottom:1px solid var(--bb-line);background:var(--bb-white)}
 body:has(#more-menu) #workspace #queue li.rq-group button.rq-group-toggle{min-height:28px;padding:0;font-size:13px;font-weight:500}
 body:has(#more-menu) #workspace #queue li.rq-group button.rq-group-toggle::after{width:6px;height:6px;border-width:0 1.5px 1.5px 0;margin:0 0 -2px 8px;color:var(--bb-blue)}
 body:has(#more-menu) #workspace #queue li:has(> button.wo-card){margin:0;border-bottom:1px solid var(--bb-line)}
 body:has(#more-menu) #workspace #queue li button.wo-card{display:grid;grid-template-columns:48px minmax(0,1fr) auto;grid-template-rows:auto;align-items:center;gap:0 12px;width:100%;min-height:97px;margin:0;padding:12px 16px 12px 16px;border:0;border-left:3px solid transparent;border-radius:0;background:var(--bb-white);text-align:left;font-weight:400;box-shadow:none}
 body:has(#more-menu) #workspace #queue li button.wo-card:hover{background:#F6F8F4}
 body:has(#more-menu) #workspace #queue li button.wo-card.selected{border-left-color:var(--bb-blue);background:var(--bb-bluebg)}
 body:has(#more-menu) #queue .wo-card .rq-icon{grid-row:1;width:48px;height:48px;border:1px solid var(--bb-line);border-radius:8px;background-size:24px}
 body:has(#more-menu) #queue .wo-card .rq-main{gap:0;min-width:0}
 body:has(#more-menu) #workspace #queue .wo-card .wo-title{font-size:14px;line-height:22px;font-weight:400;color:var(--bb-ink);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 body:has(#more-menu) #queue .wo-card .rq-meta{font-size:13px;line-height:22px;color:var(--bb-slate)}
 body:has(#more-menu) #queue .wo-card .rq-meta:not(:nth-child(2)),body:has(#more-menu) #queue .wo-card .rq-side,body:has(#more-menu) #queue .wo-card .rq-chev{display:none}
 body:has(#more-menu) #queue .wo-card .wo-row-st{display:block;position:relative;margin-top:4px}
 body:has(#more-menu) #queue .wo-card .wo-st{min-height:22px;height:22px;padding:0 6px;gap:4px;border:1px solid transparent;border-radius:4px;font-size:13px;color:var(--bb-ink);background:transparent;cursor:pointer}
 body:has(#more-menu) #queue .wo-card .wo-st:hover{border-color:var(--bb-line);background:var(--bb-white)}
 body:has(#more-menu) #queue .wo-card .wo-st .wo-pill-ico{width:12px;height:12px}
 body:has(#more-menu) #queue .wo-card .wo-st.st-OPEN .wo-pill-ico{color:var(--bb-open)}
 body:has(#more-menu) #queue .wo-card .wo-st.st-ON_HOLD .wo-pill-ico{color:var(--bb-amber)}
 body:has(#more-menu) #queue .wo-card .wo-st.st-IN_PROGRESS .wo-pill-ico{color:var(--bb-prog)}
 body:has(#more-menu) #queue .wo-card .wo-st.st-DONE .wo-pill-ico{color:var(--bb-green)}
 body:has(#more-menu) #queue .wo-card .wo-st .wo-pill-caret{width:10px;height:10px;color:var(--bb-slate)}
 body:has(#more-menu) #queue .wo-card .wo-row-side{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;align-self:stretch;gap:4px}
 body:has(#more-menu) #queue .wo-card .wo-row-side .wo-avatars{min-height:22px;font-size:13px;color:var(--bb-slate)}
 body:has(#more-menu) #queue .wo-card .wo-row-side .wo-av{width:18px;height:18px;margin-left:-4px;border-width:1px;font-size:8px}
 body:has(#more-menu) #queue .wo-card .wo-row-side .wo-av:first-child{margin-left:0}
 body:has(#more-menu) #queue .wo-card .wo-row-num{font-size:13px;line-height:20px;color:var(--bb-slate)}
 body:has(#more-menu) #queue .wo-card .wo-row-side .wo-pri{min-height:22px;height:22px;padding:0 6px;font-size:13px;border-radius:4px}
 body:has(#more-menu) #queue .wo-card .wo-row-side .wo-pri .wo-pill-ico{width:13px;height:13px}
 body:has(#more-menu) #queue .wo-st-menu{left:0;top:26px}
 body:has(#more-menu) #queue li.muted{padding:16px}

 /* Open work order: a read view, with the editors behind Edit. */
 body:has(#more-menu) #work > #detail,body:has(#more-menu) #work > #detail:empty{grid-column:2;grid-row:3 / span 4;position:static;height:calc(100vh - 134px);max-height:none;margin:16px 0 0;padding:0 0 24px;overflow-y:auto;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:4px;box-shadow:none}
 body:has(#more-menu) #work > #detail:empty{padding:24px}
 body:has(#more-menu) #work > #detail:not(:empty){position:relative;top:auto;display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;gap:0}
 body:has(#more-menu) #detail > *,body:has(#more-menu) #detail > .wd-progress > *{grid-column:1 / -1;min-width:0;margin-left:24px;margin-right:24px}
 body:has(#more-menu) #detail > .wd-progress{display:contents}
 body:has(#more-menu) #detail > h2,body:has(#more-menu) #detail > h2 + p{display:none}
 body:has(#more-menu) #detail > .wd-head{order:-40;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;gap:2px 16px;margin:0 0 0;padding:20px 24px 14px 16px;border-bottom:1px solid var(--bb-line);margin-left:0;margin-right:0}
 body:has(#more-menu) .wd-title{display:flex;align-items:center;gap:12px;min-width:0}
 body:has(#more-menu) .wd-title h2{margin:0;font-size:20px;line-height:28px;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 body:has(#more-menu) .wd-link{flex:none;width:24px;height:24px;min-height:0;margin:0;padding:0;border:0;border-radius:4px;background:center/18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6B4F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E")}
 body:has(#more-menu) .wd-subline{grid-row:2;margin:0;font-size:12px;line-height:18px;color:var(--bb-slate)}
 body:has(#more-menu) .wd-due::before{content:"";display:inline-block;width:12px;height:12px;margin:0 5px -2px 0;background:center/12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F6359' stroke-width='2'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M4 10h16M9 3v4M15 3v4'/%3E%3C/svg%3E")}
 body:has(#more-menu) .wd-acts{grid-column:2;grid-row:1 / span 2;display:flex;align-items:center;gap:8px}
 body:has(#more-menu) .wd-btn{gap:8px;min-height:32px;height:32px;margin:0;padding:0 14px;font-size:14px;font-weight:600;color:var(--bb-blue);background:var(--bb-white);border:1px solid var(--bb-blue);border-radius:4px}
 body:has(#more-menu) .wd-btn::before{content:"";width:16px;height:16px;background:center/16px no-repeat}
 body:has(#more-menu) .wd-comments::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6B4F' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 7 0 1 1 3.5 5.8L4 19.5l1-3.6A6.6 6.6 0 0 1 4 12z'/%3E%3C/svg%3E")}
 body:has(#more-menu) .wd-edit-btn::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6B4F' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3C/svg%3E")}
 body:has(#more-menu) .wd-edit-btn[aria-pressed=true]{color:#fff;background:var(--bb-blue)}
 body:has(#more-menu) .wd-edit-btn[aria-pressed=true]::before{filter:brightness(0) invert(1)}
 body:has(#more-menu) .wd-more-wrap{position:relative;margin-left:16px}
 body:has(#more-menu) .wd-more{width:24px;height:32px;min-height:0;margin:0;padding:0;border:0;background:center/20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314261F'%3E%3Ccircle cx='12' cy='5' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Ccircle cx='12' cy='19' r='1.8'/%3E%3C/svg%3E")}
 body:has(#more-menu) .wd-menu{position:absolute;right:0;top:36px;z-index:45;display:grid;min-width:180px;padding:4px;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:6px;box-shadow:0 8px 24px rgba(16,38,31,.18)}
 body:has(#more-menu) .wd-menu button{justify-content:flex-start;min-height:34px;margin:0;padding:0 12px;border:0;background:none;font-size:14px;font-weight:400}
 body:has(#more-menu) .wd-menu button:hover{background:var(--bb-neutralbg)}
 /* Status tiles with Share Externally beside them */
 body:has(#more-menu) #detail > .wd-progress > form{grid-column:1;order:-20;margin-top:20px}
 body:has(#more-menu) #detail > .wd-progress > form fieldset{margin:0;padding:0;border:0;background:none}
 body:has(#more-menu) #detail > .wd-progress > form legend{margin:0 0 8px;padding:0;font-size:14px;font-weight:600;font-size:0}
 body:has(#more-menu) #detail > .wd-progress > form legend::before{content:"Status";font-size:14px}
 body:has(#more-menu) #detail .status-group{display:grid;grid-template-columns:repeat(4,86px);gap:12px;margin:0;border:0;background:none;overflow:visible}
 body:has(#more-menu) #detail .status-group .status-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:86px;min-height:60px;height:60px;margin:0;padding:6px 2px;font-size:13px;font-weight:500;color:var(--bb-blue);background:var(--bb-white);border:1px solid var(--bb-line)!important;border-radius:4px}
 body:has(#more-menu) #detail .status-group .status-btn.st-ON_HOLD{order:1}body:has(#more-menu) #detail .status-group .status-btn.st-IN_PROGRESS{order:2}body:has(#more-menu) #detail .status-group .status-btn.st-DONE{order:3}
 body:has(#more-menu) #detail .status-group .status-btn::before{content:"";width:20px;height:20px;background:center/20px no-repeat}
 body:has(#more-menu) #detail .status-group .status-btn[aria-pressed=true]{color:#fff;border-color:transparent!important;background:var(--bb-blue)}
 body:has(#more-menu) #detail .status-group .status-btn.st-ON_HOLD[aria-pressed=true]{background:var(--bb-amber)}
 body:has(#more-menu) #detail .status-group .status-btn.st-DONE[aria-pressed=true]{background:var(--bb-green)}
 body:has(#more-menu) #detail > .wd-share{display:inline-flex;grid-column:2;order:-19;align-self:start;justify-self:center;gap:6px;min-height:32px;height:60px;margin:48px 0 0;padding:0 8px;border:0;background:none;color:var(--bb-blue);font-size:14px;font-weight:600}
 body:has(#more-menu) #detail > .wd-share::before{content:"";width:16px;height:16px;background:center/16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6B4F' stroke-width='2'%3E%3Ccircle cx='18' cy='5' r='2.5'/%3E%3Ccircle cx='6' cy='12' r='2.5'/%3E%3Ccircle cx='18' cy='19' r='2.5'/%3E%3Cpath d='M8.2 10.8l7.6-4.4M8.2 13.2l7.6 4.4'/%3E%3C/svg%3E")}
 body:has(#more-menu) #detail .status-group .status-btn{text-transform:capitalize}
 body:has(#more-menu) #detail .status-group .status-btn.st-OPEN::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6B4F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 7.5-2'/%3E%3C/svg%3E")}
 body:has(#more-menu) #detail .status-group .status-btn.st-OPEN[aria-pressed=true]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 7.5-2'/%3E%3C/svg%3E")}
 body:has(#more-menu) #detail .status-group .status-btn.st-ON_HOLD::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6B4F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 9v6M14 9v6'/%3E%3C/svg%3E")}
 body:has(#more-menu) #detail .status-group .status-btn.st-ON_HOLD[aria-pressed=true]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 9v6M14 9v6'/%3E%3C/svg%3E")}
 body:has(#more-menu) #detail .status-group .status-btn.st-IN_PROGRESS::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6B4F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.7'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E")}
 body:has(#more-menu) #detail .status-group .status-btn.st-IN_PROGRESS[aria-pressed=true]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.7'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E")}
 body:has(#more-menu) #detail .status-group .status-btn.st-DONE::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6B4F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
 body:has(#more-menu) #detail .status-group .status-btn.st-DONE[aria-pressed=true]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
 /* Read view fields */
 body:has(#more-menu) #detail > .wd-sum{order:-10;display:block;margin-top:56px}
 body:has(#more-menu) .wd-sum hr{margin:24px -8px;border:0;border-top:1px solid var(--bb-line)}
 body:has(#more-menu) .wd-row3{display:grid;grid-template-columns:repeat(3,minmax(0,272px));gap:0 12px}
 body:has(#more-menu) .wd-row2{display:grid;grid-template-columns:minmax(0,408px) minmax(0,1fr);gap:0 12px;align-items:start;margin-top:24px}
 body:has(#more-menu) .wd-row2:first-of-type{margin-top:0}
 body:has(#more-menu) .wd-f h4{margin:0 0 12px;font-size:14px;line-height:20px;font-weight:600}
 body:has(#more-menu) .wd-v{font-size:14px;line-height:20px;color:var(--bb-ink);white-space:pre-wrap;overflow-wrap:anywhere}
 body:has(#more-menu) .wd-v .wo-pri{min-height:24px;height:24px;padding:0 6px;font-size:13px;border-radius:4px}
 body:has(#more-menu) .wd-people{display:flex;flex-wrap:wrap;gap:8px 16px}
 body:has(#more-menu) .wd-person{display:inline-flex;align-items:center;gap:6px}
 body:has(#more-menu) .wd-person .wo-av{width:20px;height:20px;margin:0;border:0;font-size:8px}
 body:has(#more-menu) .wd-thing{display:flex;align-items:flex-start;gap:8px}
 body:has(#more-menu) .wd-thing-ico{flex:none;width:32px;height:32px;border:1px solid var(--bb-line);border-radius:4px;background:var(--bb-bluebg) center/18px no-repeat}
 body:has(#more-menu) .wd-ico-asset{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6B4F' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='5' rx='1'/%3E%3Crect x='3' y='16' width='6' height='5' rx='1'/%3E%3Crect x='15' y='16' width='6' height='5' rx='1'/%3E%3Cpath d='M12 8v4M6 16v-4h12v4'/%3E%3C/svg%3E")}
 body:has(#more-menu) .wd-ico-loc{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6B4F' stroke-width='1.8'%3E%3Cpath d='M12 21s-6-5.5-6-11a6 6 0 0 1 12 0c0 5.5-6 11-6 11z'/%3E%3Ccircle cx='12' cy='10' r='2.2'/%3E%3C/svg%3E")}
 body:has(#more-menu) .wd-thing-text{display:flex;flex-direction:column;padding-top:6px;line-height:20px}
 body:has(#more-menu) .wd-thing-text small{font-size:11px;color:var(--bb-slate)}
 body:has(#more-menu) .wd-viewproc{display:none;align-self:center;justify-self:start;gap:8px;min-height:40px;height:40px;margin:0;padding:0 20px;font-size:14px;font-weight:600;color:var(--bb-blue);background:var(--bb-white);border:1px solid var(--bb-blue);border-radius:999px}
 body:has(#more-menu) #detail.wd-has-proc .wd-viewproc{display:inline-flex}
 body:has(#more-menu) .wd-viewproc::before{content:"";width:16px;height:16px;background:center/16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6B4F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4 6h.01M4 12h.01M4 18h.01'/%3E%3C/svg%3E")}
 /* Everything else of the open work order follows in the edit view; history stays last. */
 body:has(#more-menu) #detail > .wd-progress > :is(h2,.wo-assignee,.wo-head,.wo-grid,h3:not(:last-of-type),.job-instructions,p:empty){display:none}
 body:has(#more-menu) #detail > .wd-progress > p[role=alert]{order:-18}
 body:has(#more-menu) #detail > .wd-progress > h3:last-of-type{order:30;margin-top:32px;padding-top:24px;border-top:1px solid var(--bb-line);font-size:14px}
 body:has(#more-menu) #detail > .wd-progress > .timeline{order:31;font-size:13px}
 body:has(#more-menu) #detail > form:not(.as-form){order:20;margin-top:24px}
 body:has(#more-menu) #detail > .wd-photo{order:25;margin-top:24px}
 body:has(#more-menu) #detail:not(.wd-editing) > :is(.as-form,.as-form + p,.wd-planning,.wd-edit,.wd-asset,.wd-category){display:none}
 body:has(#more-menu) #detail:not(.wd-editing):not(.wd-proc-open) > .wd-procedure{display:none}
 body:has(#more-menu) #detail:not(.wd-editing) > .wd-progress > form label:has(textarea[name=completionNotes]){display:none}
 /* Edit view: one form in the reference order (title and description, asset, procedure,
    assignees, due date and priority, category), plain 14px labels. */
 body:has(#more-menu) #detail.wd-editing > :is(.as-form,.as-form + p,.wd-planning,.wd-edit,.wd-asset,.wd-category,.wd-procedure){margin-top:20px}
 body:has(#more-menu) #detail.wd-editing > .wd-edit{order:10}body:has(#more-menu) #detail.wd-editing > .wd-asset{order:11}body:has(#more-menu) #detail.wd-editing > .wd-procedure{order:12}body:has(#more-menu) #detail.wd-editing > .as-form,body:has(#more-menu) #detail.wd-editing > .as-form + p{order:13}body:has(#more-menu) #detail.wd-editing > .wd-planning{order:14}body:has(#more-menu) #detail.wd-editing > .wd-category{order:15}
 body:has(#more-menu) #detail.wd-editing > :is(.wd-planning,.wd-edit,.wd-asset) > :is(h3,p:not([role])){display:none}
 body:has(#more-menu) #detail.wd-editing > :is(.wd-planning,.wd-edit,.wd-asset) legend{display:none}
 body:has(#more-menu) #detail.wd-editing fieldset{margin:0;padding:0;border:0;background:none;box-shadow:none}
 body:has(#more-menu) #detail.wd-editing legend{margin:0 0 8px;padding:0;font-size:14px;font-weight:600;color:var(--bb-ink)}
 body:has(#more-menu) #detail.wd-editing label{margin:16px 0 0;font-size:14px;font-weight:600;color:var(--bb-ink)}
 body:has(#more-menu) #detail.wd-editing > .wd-edit label:first-of-type{margin-top:0}
 body:has(#more-menu) #detail.wd-editing :is(input,select,textarea){margin-top:8px}
 body:has(#more-menu) #detail.wd-editing > .wd-sum{display:none}
 body:has(#more-menu) #detail :is(input,select,textarea){min-height:40px;padding:8px 12px;font-size:14px;border-radius:4px}
 body:has(#more-menu) #detail :is(label,legend,h3){font-size:14px}
 body:has(#more-menu) #detail button:not(.status-btn):not(.wd-btn):not(.wd-more):not(.wd-link):not(.wd-share):not(.wd-viewproc):not(.as-rm){min-height:36px;padding:0 14px;font-size:14px;border-radius:4px}
}
 @media (min-width:900px){body:has(#more-menu) .wo-st-menu .wo-st-opt{justify-content:flex-start;min-height:34px;font-size:14px;font-weight:400}}
 /* Narrow windows: the open work order stacks its header buttons and Share Externally. */
@media (min-width:900px){
 body:has(#more-menu) #work > #detail{container-type:inline-size}
 body:has(#more-menu) #work .wo-new{flex:none}
 body:has(#more-menu) #work .wo-viewpick{flex:none;margin-right:16px}
 body:has(#more-menu) #work > .wo-top h2{flex:none}
}
@container (max-width:700px){
 body:has(#more-menu) #detail > .wd-head{grid-template-columns:minmax(0,1fr)}
 body:has(#more-menu) .wd-acts{grid-column:1;grid-row:3;margin-top:10px}
 body:has(#more-menu) #detail > .wd-share{grid-column:1;order:-19;justify-self:start;height:32px;margin:12px 24px 0}
 body:has(#more-menu) .wd-row3{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
}
.tu-inv-send{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0}
.tu-inv-text{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:8px;background:var(--bb-menu);color:var(--bb-paper);font-weight:600;text-decoration:none}
.tu-inv-note{margin:12px 0 0}
/* Phones (Chris, 2026-10-28: the bottom menu moved down while scrolling): Android's stretch
   effect at the end of a scroll pulls the whole page, the fixed bottom menu with it. Turn
   that stretch off so the bottom menu stays put; lists still scroll normally. */
@media (max-width:899px){html,body{overscroll-behavior-y:none}#tabs{transform:translateZ(0)}}

/* Theme: Evergreen & Brass with Night line icons (Chris, 2026-10-28: "C3, T4"). Layout is unchanged;
   only colors and icons. Large icons are dark 3D tiles in the menu color; small icons in menus,
   buttons and pills stay plain single-color line icons. Status and priority colors are fixed. */
svg.gl{overflow:visible}svg.gl .f{fill:currentColor;fill-opacity:.16}svg.gl .k{fill:currentColor;stroke:none}
.ov-ico,#overview .ov-ico,.more-ico{background:none;border:0;border-radius:0}
.ov-ico svg.tile3d,#overview .ov-ico svg.tile3d{width:100%;height:100%;overflow:visible;stroke:none}
.more-ico svg.tile3d{width:100%;height:100%;overflow:visible;stroke:none}
.rq-card .rq-icon,body:has(#more-menu) #queue .wo-card .rq-icon{background-color:transparent;border:0;border-radius:0;background-size:contain;background-position:center}
.rq-card .rq-icon{background-image:url("data:image/svg+xml,%3Csvg viewBox=%220 0 32 32%22 xmlns=%22http://www.w3.org/2000/svg%22 aria-hidden=%22true%22 class=%22tile3d%22%3E%3Cdefs%3E%3ClinearGradient id=%22bbgx%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23405E55%22/%3E%3Cstop offset=%221%22 stop-color=%22%2310362B%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22bbhx%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22 stop-opacity=%22.55%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3Cfilter id=%22bbsx%22 x=%22-30%%22 y=%22-30%%22 width=%22160%%22 height=%22175%%22%3E%3CfeDropShadow dx=%220%22 dy=%222.2%22 stdDeviation=%221.8%22 flood-color=%22%230B1A20%22 flood-opacity=%22.28%22/%3E%3C/filter%3E%3Cfilter id=%22bbdx%22 x=%22-20%%22 y=%22-20%%22 width=%22150%%22 height=%22160%%22%3E%3CfeDropShadow dx=%220%22 dy=%221.1%22 stdDeviation=%22.55%22 flood-color=%22%23000%22 flood-opacity=%22.38%22/%3E%3C/filter%3E%3C/defs%3E%3Crect x=%222%22 y=%224.2%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22%23081B16%22 filter=%22url(%23bbsx)%22/%3E%3Crect x=%222%22 y=%222%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22url(%23bbgx)%22/%3E%3Crect x=%222%22 y=%222%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22url(%23bbhx)%22/%3E%3Cg transform=%22translate(4.96 4.96) scale(0.92)%22 filter=%22url(%23bbdx)%22%3E%3Cpath stroke=%22%23DFCA9C%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22%23BF9638%22 fill-opacity=%22.5%22 d=%22M4.5 16a7.5 7.5 0 0 1 15 0z%22/%3E%3Cpath stroke=%22%23DFCA9C%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22 d=%22M3 16h18M12 8.5V6.5M10 6h4M5 19.5h14%22/%3E%3C/g%3E%3C/svg%3E")}
body:has(#more-menu) #queue .wo-card .rq-icon{background-image:url("data:image/svg+xml,%3Csvg viewBox=%220 0 32 32%22 xmlns=%22http://www.w3.org/2000/svg%22 aria-hidden=%22true%22 class=%22tile3d%22%3E%3Cdefs%3E%3ClinearGradient id=%22bbgx%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23405E55%22/%3E%3Cstop offset=%221%22 stop-color=%22%2310362B%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22bbhx%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22 stop-opacity=%22.55%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3Cfilter id=%22bbsx%22 x=%22-30%%22 y=%22-30%%22 width=%22160%%22 height=%22175%%22%3E%3CfeDropShadow dx=%220%22 dy=%222.2%22 stdDeviation=%221.8%22 flood-color=%22%230B1A20%22 flood-opacity=%22.28%22/%3E%3C/filter%3E%3Cfilter id=%22bbdx%22 x=%22-20%%22 y=%22-20%%22 width=%22150%%22 height=%22160%%22%3E%3CfeDropShadow dx=%220%22 dy=%221.1%22 stdDeviation=%22.55%22 flood-color=%22%23000%22 flood-opacity=%22.38%22/%3E%3C/filter%3E%3C/defs%3E%3Crect x=%222%22 y=%224.2%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22%23081B16%22 filter=%22url(%23bbsx)%22/%3E%3Crect x=%222%22 y=%222%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22url(%23bbgx)%22/%3E%3Crect x=%222%22 y=%222%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22url(%23bbhx)%22/%3E%3Cg transform=%22translate(4.96 4.96) scale(0.92)%22 filter=%22url(%23bbdx)%22%3E%3Crect stroke=%22%239ABCB0%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22%23347A61%22 fill-opacity=%22.5%22 x=%225%22 y=%224.5%22 width=%2214%22 height=%2216.5%22 rx=%222%22/%3E%3Crect stroke=%22%239ABCB0%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22 x=%229%22 y=%222.75%22 width=%226%22 height=%223.5%22 rx=%221%22/%3E%3Cpath stroke=%22%239ABCB0%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22 d=%22M8.5 13.2l2.3 2.3 4.7-4.8%22/%3E%3C/g%3E%3C/svg%3E")}
#work .wo-card .rq-icon{background-image:url("data:image/svg+xml,%3Csvg viewBox=%220 0 32 32%22 xmlns=%22http://www.w3.org/2000/svg%22 aria-hidden=%22true%22 class=%22tile3d%22%3E%3Cdefs%3E%3ClinearGradient id=%22bbgx%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23405E55%22/%3E%3Cstop offset=%221%22 stop-color=%22%2310362B%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22bbhx%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22 stop-opacity=%22.55%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3Cfilter id=%22bbsx%22 x=%22-30%%22 y=%22-30%%22 width=%22160%%22 height=%22175%%22%3E%3CfeDropShadow dx=%220%22 dy=%222.2%22 stdDeviation=%221.8%22 flood-color=%22%230B1A20%22 flood-opacity=%22.28%22/%3E%3C/filter%3E%3Cfilter id=%22bbdx%22 x=%22-20%%22 y=%22-20%%22 width=%22150%%22 height=%22160%%22%3E%3CfeDropShadow dx=%220%22 dy=%221.1%22 stdDeviation=%22.55%22 flood-color=%22%23000%22 flood-opacity=%22.38%22/%3E%3C/filter%3E%3C/defs%3E%3Crect x=%222%22 y=%224.2%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22%23081B16%22 filter=%22url(%23bbsx)%22/%3E%3Crect x=%222%22 y=%222%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22url(%23bbgx)%22/%3E%3Crect x=%222%22 y=%222%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22url(%23bbhx)%22/%3E%3Cg transform=%22translate(4.96 4.96) scale(0.92)%22 filter=%22url(%23bbdx)%22%3E%3Crect stroke=%22%239ABCB0%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22%23347A61%22 fill-opacity=%22.5%22 x=%225%22 y=%224.5%22 width=%2214%22 height=%2216.5%22 rx=%222%22/%3E%3Crect stroke=%22%239ABCB0%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22 x=%229%22 y=%222.75%22 width=%226%22 height=%223.5%22 rx=%221%22/%3E%3Cpath stroke=%22%239ABCB0%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22 d=%22M8.5 13.2l2.3 2.3 4.7-4.8%22/%3E%3C/g%3E%3C/svg%3E")}
.rq-card .rq-icon.pl-asset{background-image:url("data:image/svg+xml,%3Csvg viewBox=%220 0 32 32%22 xmlns=%22http://www.w3.org/2000/svg%22 aria-hidden=%22true%22 class=%22tile3d%22%3E%3Cdefs%3E%3ClinearGradient id=%22bbgx%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23405E55%22/%3E%3Cstop offset=%221%22 stop-color=%22%2310362B%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22bbhx%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22 stop-opacity=%22.55%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3Cfilter id=%22bbsx%22 x=%22-30%%22 y=%22-30%%22 width=%22160%%22 height=%22175%%22%3E%3CfeDropShadow dx=%220%22 dy=%222.2%22 stdDeviation=%221.8%22 flood-color=%22%230B1A20%22 flood-opacity=%22.28%22/%3E%3C/filter%3E%3Cfilter id=%22bbdx%22 x=%22-20%%22 y=%22-20%%22 width=%22150%%22 height=%22160%%22%3E%3CfeDropShadow dx=%220%22 dy=%221.1%22 stdDeviation=%22.55%22 flood-color=%22%23000%22 flood-opacity=%22.38%22/%3E%3C/filter%3E%3C/defs%3E%3Crect x=%222%22 y=%224.2%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22%23081B16%22 filter=%22url(%23bbsx)%22/%3E%3Crect x=%222%22 y=%222%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22url(%23bbgx)%22/%3E%3Crect x=%222%22 y=%222%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22url(%23bbhx)%22/%3E%3Cg transform=%22translate(4.96 4.96) scale(0.92)%22 filter=%22url(%23bbdx)%22%3E%3Cpath stroke=%22%239ABCB0%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22%23347A61%22 fill-opacity=%22.5%22 d=%22M12 3 20 7.5v9L12 21l-8-4.5v-9z%22/%3E%3Cpath stroke=%22%239ABCB0%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22 d=%22M4 7.5 12 12l8-4.5M12 12v9%22/%3E%3C/g%3E%3C/svg%3E")}
.rq-card .rq-icon.pl-room{background-image:url("data:image/svg+xml,%3Csvg viewBox=%220 0 32 32%22 xmlns=%22http://www.w3.org/2000/svg%22 aria-hidden=%22true%22 class=%22tile3d%22%3E%3Cdefs%3E%3ClinearGradient id=%22bbgx%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23405E55%22/%3E%3Cstop offset=%221%22 stop-color=%22%2310362B%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22bbhx%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22 stop-opacity=%22.55%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3Cfilter id=%22bbsx%22 x=%22-30%%22 y=%22-30%%22 width=%22160%%22 height=%22175%%22%3E%3CfeDropShadow dx=%220%22 dy=%222.2%22 stdDeviation=%221.8%22 flood-color=%22%230B1A20%22 flood-opacity=%22.28%22/%3E%3C/filter%3E%3Cfilter id=%22bbdx%22 x=%22-20%%22 y=%22-20%%22 width=%22150%%22 height=%22160%%22%3E%3CfeDropShadow dx=%220%22 dy=%221.1%22 stdDeviation=%22.55%22 flood-color=%22%23000%22 flood-opacity=%22.38%22/%3E%3C/filter%3E%3C/defs%3E%3Crect x=%222%22 y=%224.2%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22%23081B16%22 filter=%22url(%23bbsx)%22/%3E%3Crect x=%222%22 y=%222%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22url(%23bbgx)%22/%3E%3Crect x=%222%22 y=%222%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22url(%23bbhx)%22/%3E%3Cg transform=%22translate(4.96 4.96) scale(0.92)%22 filter=%22url(%23bbdx)%22%3E%3Crect stroke=%22%23DEB1A7%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22%23BC634F%22 fill-opacity=%22.5%22 x=%225%22 y=%223.5%22 width=%2214%22 height=%2217%22 rx=%221.5%22/%3E%3Cpath stroke=%22%23DEB1A7%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22 d=%22M3 20.5h18M9 7.5h.01M12 7.5h.01M15 7.5h.01M9 11h.01M12 11h.01M15 11h.01M10.5 20.5v-4h3v4%22/%3E%3C/g%3E%3C/svg%3E")}
.rq-card .rq-icon.pl-loc{background-image:url("data:image/svg+xml,%3Csvg viewBox=%220 0 32 32%22 xmlns=%22http://www.w3.org/2000/svg%22 aria-hidden=%22true%22 class=%22tile3d%22%3E%3Cdefs%3E%3ClinearGradient id=%22bbgx%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23405E55%22/%3E%3Cstop offset=%221%22 stop-color=%22%2310362B%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22bbhx%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22 stop-opacity=%22.55%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3Cfilter id=%22bbsx%22 x=%22-30%%22 y=%22-30%%22 width=%22160%%22 height=%22175%%22%3E%3CfeDropShadow dx=%220%22 dy=%222.2%22 stdDeviation=%221.8%22 flood-color=%22%230B1A20%22 flood-opacity=%22.28%22/%3E%3C/filter%3E%3Cfilter id=%22bbdx%22 x=%22-20%%22 y=%22-20%%22 width=%22150%%22 height=%22160%%22%3E%3CfeDropShadow dx=%220%22 dy=%221.1%22 stdDeviation=%22.55%22 flood-color=%22%23000%22 flood-opacity=%22.38%22/%3E%3C/filter%3E%3C/defs%3E%3Crect x=%222%22 y=%224.2%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22%23081B16%22 filter=%22url(%23bbsx)%22/%3E%3Crect x=%222%22 y=%222%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22url(%23bbgx)%22/%3E%3Crect x=%222%22 y=%222%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22url(%23bbhx)%22/%3E%3Cg transform=%22translate(4.96 4.96) scale(0.92)%22 filter=%22url(%23bbdx)%22%3E%3Cpath stroke=%22%23A1BDCD%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22%23447B9A%22 fill-opacity=%22.5%22 d=%22M12 21s6.5-6 6.5-11a6.5 6.5 0 0 0-13 0c0 5 6.5 11 6.5 11z%22/%3E%3Ccircle stroke=%22%23A1BDCD%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22 cx=%2212%22 cy=%2210%22 r=%222.3%22/%3E%3C/g%3E%3C/svg%3E")}
.rq-card .rq-icon.pl-proc{background-image:url("data:image/svg+xml,%3Csvg viewBox=%220 0 32 32%22 xmlns=%22http://www.w3.org/2000/svg%22 aria-hidden=%22true%22 class=%22tile3d%22%3E%3Cdefs%3E%3ClinearGradient id=%22bbgxp%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23405E55%22/%3E%3Cstop offset=%221%22 stop-color=%22%2310362B%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22bbhxp%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22 stop-opacity=%22.55%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3Cfilter id=%22bbsxp%22 x=%22-30%25%22 y=%22-30%25%22 width=%22160%25%22 height=%22175%25%22%3E%3CfeDropShadow dx=%220%22 dy=%222.2%22 stdDeviation=%221.8%22 flood-color=%22%230B1A20%22 flood-opacity=%22.28%22/%3E%3C/filter%3E%3Cfilter id=%22bbdxp%22 x=%22-20%25%22 y=%22-20%25%22 width=%22150%25%22 height=%22160%25%22%3E%3CfeDropShadow dx=%220%22 dy=%221.1%22 stdDeviation=%22.55%22 flood-color=%22%23000%22 flood-opacity=%22.38%22/%3E%3C/filter%3E%3C/defs%3E%3Crect x=%222%22 y=%224.2%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22%23081B16%22 filter=%22url(%23bbsxp)%22/%3E%3Crect x=%222%22 y=%222%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22url(%23bbgxp)%22/%3E%3Crect x=%222%22 y=%222%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22url(%23bbhxp)%22/%3E%3Cg transform=%22translate(4.96 4.96) scale(0.92)%22 filter=%22url(%23bbdxp)%22%3E%3Crect stroke=%22%23A1BDCD%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22%23447B9A%22 fill-opacity=%22.5%22 x=%225%22 y=%223.5%22 width=%2214%22 height=%2217%22 rx=%222%22/%3E%3Cpath stroke=%22%23A1BDCD%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22 d=%22M9 3.5h6v3H9zM8.5 11l1.5 1.5 3-3M8.5 16.5h7%22/%3E%3C/g%3E%3C/svg%3E")}
#workspace.st-open > #settings > .st-tabs button[data-st-tab=teammates]::before{background:center/contain no-repeat url("data:image/svg+xml,%3Csvg viewBox=%220 0 32 32%22 xmlns=%22http://www.w3.org/2000/svg%22 aria-hidden=%22true%22 class=%22tile3d%22%3E%3Cdefs%3E%3ClinearGradient id=%22bbgx%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23405E55%22/%3E%3Cstop offset=%221%22 stop-color=%22%2310362B%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22bbhx%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22 stop-opacity=%22.55%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3Cfilter id=%22bbsx%22 x=%22-30%%22 y=%22-30%%22 width=%22160%%22 height=%22175%%22%3E%3CfeDropShadow dx=%220%22 dy=%222.2%22 stdDeviation=%221.8%22 flood-color=%22%230B1A20%22 flood-opacity=%22.28%22/%3E%3C/filter%3E%3Cfilter id=%22bbdx%22 x=%22-20%%22 y=%22-20%%22 width=%22150%%22 height=%22160%%22%3E%3CfeDropShadow dx=%220%22 dy=%221.1%22 stdDeviation=%22.55%22 flood-color=%22%23000%22 flood-opacity=%22.38%22/%3E%3C/filter%3E%3C/defs%3E%3Crect x=%222%22 y=%224.2%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22%23081B16%22 filter=%22url(%23bbsx)%22/%3E%3Crect x=%222%22 y=%222%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22url(%23bbgx)%22/%3E%3Crect x=%222%22 y=%222%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22url(%23bbhx)%22/%3E%3Cg transform=%22translate(4.96 4.96) scale(0.92)%22 filter=%22url(%23bbdx)%22%3E%3Ccircle stroke=%22%23BCB5CF%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22%237A6BA0%22 fill-opacity=%22.5%22 cx=%229%22 cy=%228%22 r=%223.2%22/%3E%3Cpath stroke=%22%23BCB5CF%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22%237A6BA0%22 fill-opacity=%22.5%22 d=%22M3 19.5a6 6 0 0 1 12 0z%22/%3E%3Cpath stroke=%22%23BCB5CF%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22 d=%22M15.5 4.9a3.2 3.2 0 0 1 0 6.2M17.2 13.7a6 6 0 0 1 3.8 5.8%22/%3E%3C/g%3E%3C/svg%3E")}
#workspace.st-open > #settings > .st-tabs button[data-st-tab=general]::before{background:center/contain no-repeat url("data:image/svg+xml,%3Csvg viewBox=%220 0 32 32%22 xmlns=%22http://www.w3.org/2000/svg%22 aria-hidden=%22true%22 class=%22tile3d%22%3E%3Cdefs%3E%3ClinearGradient id=%22bbgx%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23405E55%22/%3E%3Cstop offset=%221%22 stop-color=%22%2310362B%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22bbhx%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22 stop-opacity=%22.55%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3Cfilter id=%22bbsx%22 x=%22-30%%22 y=%22-30%%22 width=%22160%%22 height=%22175%%22%3E%3CfeDropShadow dx=%220%22 dy=%222.2%22 stdDeviation=%221.8%22 flood-color=%22%230B1A20%22 flood-opacity=%22.28%22/%3E%3C/filter%3E%3Cfilter id=%22bbdx%22 x=%22-20%%22 y=%22-20%%22 width=%22150%%22 height=%22160%%22%3E%3CfeDropShadow dx=%220%22 dy=%221.1%22 stdDeviation=%22.55%22 flood-color=%22%23000%22 flood-opacity=%22.38%22/%3E%3C/filter%3E%3C/defs%3E%3Crect x=%222%22 y=%224.2%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22%23081B16%22 filter=%22url(%23bbsx)%22/%3E%3Crect x=%222%22 y=%222%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22url(%23bbgx)%22/%3E%3Crect x=%222%22 y=%222%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22url(%23bbhx)%22/%3E%3Cg transform=%22translate(4.96 4.96) scale(0.92)%22 filter=%22url(%23bbdx)%22%3E%3Cpath stroke=%22%23B0B9B4%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22 d=%22M4 7h9M17 7h3M4 12h3M11 12h9M4 17h11M19 17h1%22/%3E%3Ccircle stroke=%22%23B0B9B4%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22%2361736A%22 fill-opacity=%22.5%22 cx=%2215%22 cy=%227%22 r=%222%22/%3E%3Ccircle stroke=%22%23B0B9B4%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22%2361736A%22 fill-opacity=%22.5%22 cx=%229%22 cy=%2212%22 r=%222%22/%3E%3Ccircle stroke=%22%23B0B9B4%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22%2361736A%22 fill-opacity=%22.5%22 cx=%2217%22 cy=%2217%22 r=%222%22/%3E%3C/g%3E%3C/svg%3E")}
#workspace.st-open > #settings > .st-tabs button[data-st-tab=features]::before{background:center/contain no-repeat url("data:image/svg+xml,%3Csvg viewBox=%220 0 32 32%22 xmlns=%22http://www.w3.org/2000/svg%22 aria-hidden=%22true%22 class=%22tile3d%22%3E%3Cdefs%3E%3ClinearGradient id=%22bbgx%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23405E55%22/%3E%3Cstop offset=%221%22 stop-color=%22%2310362B%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22bbhx%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22 stop-opacity=%22.55%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3Cfilter id=%22bbsx%22 x=%22-30%%22 y=%22-30%%22 width=%22160%%22 height=%22175%%22%3E%3CfeDropShadow dx=%220%22 dy=%222.2%22 stdDeviation=%221.8%22 flood-color=%22%230B1A20%22 flood-opacity=%22.28%22/%3E%3C/filter%3E%3Cfilter id=%22bbdx%22 x=%22-20%%22 y=%22-20%%22 width=%22150%%22 height=%22160%%22%3E%3CfeDropShadow dx=%220%22 dy=%221.1%22 stdDeviation=%22.55%22 flood-color=%22%23000%22 flood-opacity=%22.38%22/%3E%3C/filter%3E%3C/defs%3E%3Crect x=%222%22 y=%224.2%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22%23081B16%22 filter=%22url(%23bbsx)%22/%3E%3Crect x=%222%22 y=%222%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22url(%23bbgx)%22/%3E%3Crect x=%222%22 y=%222%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22url(%23bbhx)%22/%3E%3Cg transform=%22translate(4.96 4.96) scale(0.92)%22 filter=%22url(%23bbdx)%22%3E%3Cpath stroke=%22%23DFCA9C%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22%23BF9638%22 fill-opacity=%22.5%22 d=%22M13.5 2.5 5.5 13.5h5.5l-1 8 8-11h-5.5z%22/%3E%3C/g%3E%3C/svg%3E")}
#workspace.st-open > #settings > .st-tabs button[data-st-tab=custom]::before{background:center/contain no-repeat url("data:image/svg+xml,%3Csvg viewBox=%220 0 32 32%22 xmlns=%22http://www.w3.org/2000/svg%22 aria-hidden=%22true%22 class=%22tile3d%22%3E%3Cdefs%3E%3ClinearGradient id=%22bbgx%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23405E55%22/%3E%3Cstop offset=%221%22 stop-color=%22%2310362B%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22bbhx%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22 stop-opacity=%22.55%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3Cfilter id=%22bbsx%22 x=%22-30%%22 y=%22-30%%22 width=%22160%%22 height=%22175%%22%3E%3CfeDropShadow dx=%220%22 dy=%222.2%22 stdDeviation=%221.8%22 flood-color=%22%230B1A20%22 flood-opacity=%22.28%22/%3E%3C/filter%3E%3Cfilter id=%22bbdx%22 x=%22-20%%22 y=%22-20%%22 width=%22150%%22 height=%22160%%22%3E%3CfeDropShadow dx=%220%22 dy=%221.1%22 stdDeviation=%22.55%22 flood-color=%22%23000%22 flood-opacity=%22.38%22/%3E%3C/filter%3E%3C/defs%3E%3Crect x=%222%22 y=%224.2%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22%23081B16%22 filter=%22url(%23bbsx)%22/%3E%3Crect x=%222%22 y=%222%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22url(%23bbgx)%22/%3E%3Crect x=%222%22 y=%222%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22url(%23bbhx)%22/%3E%3Cg transform=%22translate(4.96 4.96) scale(0.92)%22 filter=%22url(%23bbdx)%22%3E%3Cpath stroke=%22%23DEB1A7%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22%23BC634F%22 fill-opacity=%22.5%22 d=%22M3.5 4.5v6.3c0 .4.16.78.44 1.06l8.2 8.2c.59.59 1.54.59 2.12 0l6.3-6.3c.59-.59.59-1.54 0-2.12l-8.2-8.2A1.5 1.5 0 0 0 11.3 3H5a1.5 1.5 0 0 0-1.5 1.5z%22/%3E%3Ccircle fill=%22%23DEB1A7%22 cx=%228%22 cy=%227.5%22 r=%221.5%22/%3E%3C/g%3E%3C/svg%3E")}
#workspace.st-open > #settings > .st-tabs button[data-st-tab=data]::before{background:center/contain no-repeat url("data:image/svg+xml,%3Csvg viewBox=%220 0 32 32%22 xmlns=%22http://www.w3.org/2000/svg%22 aria-hidden=%22true%22 class=%22tile3d%22%3E%3Cdefs%3E%3ClinearGradient id=%22bbgx%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23405E55%22/%3E%3Cstop offset=%221%22 stop-color=%22%2310362B%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22bbhx%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22 stop-opacity=%22.55%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3Cfilter id=%22bbsx%22 x=%22-30%%22 y=%22-30%%22 width=%22160%%22 height=%22175%%22%3E%3CfeDropShadow dx=%220%22 dy=%222.2%22 stdDeviation=%221.8%22 flood-color=%22%230B1A20%22 flood-opacity=%22.28%22/%3E%3C/filter%3E%3Cfilter id=%22bbdx%22 x=%22-20%%22 y=%22-20%%22 width=%22150%%22 height=%22160%%22%3E%3CfeDropShadow dx=%220%22 dy=%221.1%22 stdDeviation=%22.55%22 flood-color=%22%23000%22 flood-opacity=%22.38%22/%3E%3C/filter%3E%3C/defs%3E%3Crect x=%222%22 y=%224.2%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22%23081B16%22 filter=%22url(%23bbsx)%22/%3E%3Crect x=%222%22 y=%222%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22url(%23bbgx)%22/%3E%3Crect x=%222%22 y=%222%22 width=%2228%22 height=%2228%22 rx=%2210%22 fill=%22url(%23bbhx)%22/%3E%3Cg transform=%22translate(4.96 4.96) scale(0.92)%22 filter=%22url(%23bbdx)%22%3E%3Cpath stroke=%22%23A1BDCD%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22%23447B9A%22 fill-opacity=%22.5%22 d=%22M12 6.5C10 5 7 4.5 3.5 5v13c3.5-.5 6.5 0 8.5 1.5 2-1.5 5-2 8.5-1.5V5c-3.5-.5-6.5 0-8.5 1.5z%22/%3E%3Cpath stroke=%22%23A1BDCD%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22 d=%22M12 6.5v13M15.5 5.6v4.6l1.5-1 1.5 1V5.2%22/%3E%3C/g%3E%3C/svg%3E")}
/* Phone bottom menu uses the 3D tiles (Chris, 2026-10-28); the PC side menu keeps the plain line icons. */
#tabs button svg.tile3d{display:none;stroke:none!important;overflow:visible}
@media (max-width:899px){#tabs button svg.gl{display:none}#tabs button svg.tile3d{display:block;width:30px;height:30px}#tabs button{gap:4px}}
/* Technician Overview: no hotel title row on the staff page, so the bar is a plain heading on wide screens. */
#workspace:not(.requester) > #overview .ov-todo-more{display:block;padding:12px 16px;color:var(--bb-blue);font-weight:600}
/* Phone Work Orders: a floating new-work button over the list (our own 3D tile, brass plus). */
.wo-fab{display:none}
@media (max-width:899px){#workspace[data-view=work] #work:not(:has(> #detail:not(:empty))) > .wo-fab{display:block;position:fixed;right:18px;bottom:calc(var(--tabs,64px) + 18px + env(safe-area-inset-bottom));z-index:25;width:60px;height:60px;min-height:0;margin:0;padding:0;background:none;border:0;border-radius:20px}.wo-fab svg{width:100%;height:100%;overflow:visible}}
/* Phone Work Orders list: alternating row shading instead of divider lines (Chris, 2026-10-28). */
@media (max-width:899px){#queue li:has(> button.wo-card){border-bottom:0}#queue li button.wo-card{border-bottom:0}#queue li:nth-child(even of :has(> button.wo-card)) > button.wo-card:not(.selected){background:#EEF3EC}}

/* Message composer, links, photos and files (2026-10-28, reference layout: text box, then mic / attach / camera / Send). */
.msg-compose{flex-direction:column;align-items:stretch;gap:6px;padding:8px 12px 10px}
.msg-compose textarea{flex:none;min-height:44px;max-height:160px;padding:8px 4px;border:0;border-radius:0;resize:none;font-size:1rem}
.msg-compose textarea:focus-visible{outline:0}
.msg-compose input[type=file]{display:none}
.msg-tools{display:flex;align-items:center;justify-content:flex-end;gap:4px}
button.msg-tool{width:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:50%;background:none;color:var(--bb-slate)}
button.msg-tool svg{width:26px;height:26px}
button.msg-tool:hover{background:var(--bb-neutralbg)}
button.msg-tool:disabled{background:none;opacity:.4}
button.msg-tool.on{background:var(--bb-blue);color:var(--bb-white)}
.msg-tools .msg-send{min-width:84px;margin:0 0 0 8px;border:0;border-radius:8px;color:var(--bb-white);background:var(--bb-blue)}
.msg-tools .msg-send:disabled{color:var(--bb-slate);background:var(--bb-neutralbg);border:0}
.msg-compose .msg-err{font-size:.9rem}
ul.msg-tray{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:4px 0 0}
ul.msg-tray[hidden]{display:none}
.msg-pending{position:relative;display:flex;align-items:center;gap:8px;height:64px;min-width:64px;max-width:220px;padding:0;border:1px solid var(--bb-line);border-radius:10px;background:var(--bb-paper);overflow:hidden}
.msg-pending img{width:64px;height:64px;object-fit:cover;display:block}
.msg-pending > svg{flex:none;width:26px;height:26px;margin-left:10px;color:var(--bb-slate)}
.msg-pending .msg-file-text{padding-right:30px}
.msg-pending.uploading img{opacity:.55}
.msg-pending.failed{border-color:var(--bb-red);background:var(--bb-redbg)}
.msg-spin{position:absolute;left:22px;top:22px;width:20px;height:20px;border:3px solid var(--bb-line);border-top-color:var(--bb-blue);border-radius:50%;animation:msg-spin .8s linear infinite}
@keyframes msg-spin{to{transform:rotate(360deg)}}
button.msg-unpick{position:absolute;top:3px;right:3px;width:22px;min-height:22px;margin:0;padding:0;border:0;border-radius:50%;background:rgba(20,38,31,.75);color:var(--bb-white);font-size:15px;line-height:1}
.msg-file-text{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.msg-file-text b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:.9rem}
.msg-file-text small{color:var(--bb-slate);font-size:.8rem}
a.msg-link{color:var(--bb-link,var(--bb-blue));text-decoration:underline;overflow-wrap:anywhere}
.msg-files{grid-column:2;display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 2px}
a.msg-photo{display:block;border-radius:10px;overflow:hidden;border:1px solid var(--bb-line);background:var(--bb-neutralbg)}
a.msg-photo img{display:block;max-width:min(260px,100%);max-height:260px;object-fit:cover}
a.msg-file{display:flex;align-items:center;gap:10px;max-width:280px;padding:8px 12px;border:1px solid var(--bb-line);border-radius:10px;background:var(--bb-white);color:var(--bb-ink);text-decoration:none}
a.msg-file svg{flex:none;width:26px;height:26px;color:var(--bb-blue)}
.msg-newform .msg-compose{padding:0;border:1px solid var(--bb-control);border-radius:8px}
.msg-newform .msg-compose textarea{padding:10px 12px}
.msg-newform .msg-tools{padding:0 8px 8px}
.msg-video{display:block;max-width:min(320px,100%);max-height:320px;border-radius:10px;background:#000}
/* Work order "Photos and files" (2026-10-29): the same tiles as Messages, camera and attach beside the heading. */
#detail > .wd-photo{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.wf-head{display:flex;align-items:center;gap:4px}
.wf-head h4{flex:1;margin:0;font-size:16px;font-weight:600}
.wf-grid{display:flex;flex-wrap:wrap;gap:8px}
.wf-item{position:relative}
.wf-item a.msg-photo img{width:120px;height:120px;max-width:none}
.wf-item .msg-video{max-width:240px}
.wf-empty{margin:0;color:var(--bb-slate);font-size:14px}
.wd-photo .msg-err:empty{display:none}
@media (max-width:899px){
 #messages > #msg-pane{padding-bottom:132px}
 #messages > #msg-pane:has(ul.msg-tray:not([hidden])){padding-bottom:204px}
 #messages .msg-newform .msg-compose{position:static}
}
/* New Work Order form (stage 91): the reference form's field order in the work order panel. */
#detail > .nw{grid-column:1 / -1;display:flex;flex-direction:column;gap:14px;max-width:760px;padding:20px 24px 32px}
.nw-head{display:flex;align-items:center;gap:12px}
.nw-head h2{flex:1;margin:0;font-size:20px;font-weight:600}
.nw-cancel{min-height:36px;margin:0;padding:0 14px;color:var(--bb-blue);background:none;border:1px solid var(--bb-line);border-radius:6px;font-weight:600}
.nw-f{display:flex;flex-direction:column;gap:6px;margin:0}
.nw-l{font-size:14px;font-weight:600;color:var(--bb-ink)}
.nw input,.nw textarea,.nw select{width:100%;min-height:40px;margin:0;padding:8px 12px;font:inherit;font-size:15px;color:var(--bb-ink);background:var(--bb-white);border:1px solid var(--bb-line);border-radius:6px;box-sizing:border-box}
.nw textarea{min-height:84px;resize:vertical}
.nw .nw-title{min-height:48px;font-size:18px;font-weight:600;border-width:0 0 1px;border-radius:0;padding:8px 0;background:transparent}
.nw .nw-title:focus{outline:0;border-bottom:2px solid var(--bb-blue)}
.nw-who{display:flex;flex-wrap:wrap;gap:8px}
.nw-who-btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;margin:0;padding:2px 12px 2px 4px;font-size:14px;font-weight:500;color:var(--bb-ink);background:var(--bb-white);border:1px solid var(--bb-line);border-radius:999px}
.nw-who-btn[aria-pressed=true]{color:var(--bb-blue);background:var(--bb-bluebg);border-color:var(--bb-blue)}
.nw-av{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--bb-blue);color:#fff;font-size:11px;font-weight:700}
.nw-av-team{border-radius:8px;background:var(--bb-orange)}
.nw-none{font-size:14px;color:var(--bb-slate)}
.nw-pri{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.nw-pri-btn{min-height:40px;margin:0;padding:0 6px;font-size:14px;font-weight:600;color:var(--bb-ink);background:var(--bb-white);border:1px solid var(--bb-line);border-radius:6px}
.nw-pri-btn.pri-LOW[aria-pressed=true]{color:var(--bb-low);background:var(--bb-lowbg);border-color:var(--bb-low)}
.nw-pri-btn.pri-NORMAL[aria-pressed=true]{color:var(--bb-open);background:var(--bb-openbg);border-color:var(--bb-open)}
.nw-pri-btn.pri-HIGH[aria-pressed=true]{color:var(--bb-med);background:var(--bb-medbg);border-color:var(--bb-med)}
.nw-pri-btn.pri-URGENT[aria-pressed=true]{color:var(--bb-red);background:var(--bb-redbg);border-color:var(--bb-red)}
.nw-msg{margin:0;font-size:14px;color:var(--bb-slate)}
.nw-msg:empty{display:none}
.nw-create{align-self:flex-end;min-width:140px;min-height:44px;margin:0;padding:0 24px;font-size:15px;font-weight:600;color:#fff;background:var(--bb-blue);border:0;border-radius:6px}
.nw-create:disabled{opacity:.6}
/* New Work Order: pictures, files, recurrence and category (2026-10-29). */
.nw-pics{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px dashed var(--bb-line);border-radius:6px;background:var(--bb-white)}
.nw-pics.drag{border-color:var(--bb-blue);background:var(--bb-bluebg)}
.nw-pics-add,.nw-files-add{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;margin:0;padding:0 14px;font-size:14px;font-weight:600;color:var(--bb-blue);background:var(--bb-white);border:1px solid var(--bb-line);border-radius:6px}
.nw-pics-add{border:0;background:none;min-height:56px}
.nw-pics-add::before,.nw-files-add::before{content:"";width:18px;height:18px;background:center/18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6B4F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='M21 16l-5-5-8 8'/%3E%3C/svg%3E")}
.nw-files-add{align-self:flex-start}
.nw-files-add::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6B4F' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M20 11.5l-8 8a5 5 0 0 1-7-7l8.5-8.5a3.3 3.3 0 0 1 4.7 4.7L9.7 17.2a1.6 1.6 0 0 1-2.3-2.3L15 7.3'/%3E%3C/svg%3E")}
.nw-files{display:flex;flex-direction:column;gap:8px}
ul.nw-tray{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
ul.nw-tray:empty{display:none}
.nw-q{position:relative;display:flex;align-items:center;gap:8px;height:64px;max-width:240px;padding:0 30px 0 0;border:1px solid var(--bb-line);border-radius:8px;background:var(--bb-paper);overflow:hidden;font-size:13px}
.nw-docs .nw-q{padding-left:12px}
.nw-q img{width:64px;height:64px;object-fit:cover;display:block}
.nw-q.nw-pic{width:64px;padding:0}
.nw-q.nw-pic .nw-q-name{display:none}
.nw-q .msg-unpick{position:absolute;top:3px;right:3px}
.nw-q-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.nw-days{display:flex;flex-wrap:wrap;gap:6px;margin-top:-6px}
.nw-days[hidden]{display:none}
.nw-day{min-width:48px;min-height:36px;margin:0;padding:0 10px;font-size:14px;font-weight:500;color:var(--bb-ink);background:var(--bb-white);border:1px solid var(--bb-line);border-radius:999px}
.nw-day[aria-pressed=true]{color:var(--bb-blue);background:var(--bb-bluebg);border-color:var(--bb-blue)}
.nw-rep-note{margin:-6px 0 0;font-size:13px;color:var(--bb-slate)}
.nw-rep-note:empty{display:none}
@media (max-width:899px){#detail > .nw{padding:16px var(--gutter,16px) 96px}.nw-head .nw-cancel{display:none}.nw-create{align-self:stretch}}
/* Assets and Locations on wide screens, matched to the reference panel view (2026-10-29):
   title and search, a filter row, the list box with its Sort By bar, and the open item
   with Insights / Details tabs, a line chart and the work order rows. Phones keep theirs. */
.pl-filters,.pl-sortbar,.pl-dtabs,.pl-line,.pl-use,.pl-copy,.pl-w-ico,.pl-w-who,.pl-w-st,.pl-w-num,.pl-w-pri,.pl-range{display:none}
@media (min-width:900px){
 body:has(#more-menu) #workspace:is([data-view=assets],[data-view=locations],[data-view=library]) > #places{grid-template-columns:clamp(340px,34vw,500px) minmax(0,1fr);gap:0 18px;grid-template-rows:auto auto auto minmax(0,1fr) auto;height:calc(100vh - 12px);overflow:clip}
 body:has(#more-menu):has(#workspace:is([data-view=assets],[data-view=locations],[data-view=library]):not([hidden])){overflow:hidden;padding-bottom:0}
 body:has(#more-menu) #places > .pl-top{display:flex;flex-wrap:nowrap;align-items:center;gap:0;min-height:40px;margin:13px 0 0;padding:0;grid-row:1}
 body:has(#more-menu) #places > .pl-top h2{margin:0;font-size:32px;line-height:40px;font-weight:700;letter-spacing:-.01em}
 body:has(#more-menu) #places > .pl-top .pl-tabs,body:has(#more-menu) #places > .pl-top #pl-refresh{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
 body:has(#more-menu) #places > .pl-top #pl-search{flex:0 1 400px;width:400px;min-width:150px;max-width:400px;min-height:40px;height:40px;margin:0 0 0 auto;padding:0 12px 0 40px;font-size:14px;border:1px solid var(--bb-line);border-radius:4px;background:var(--bb-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F6359' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E") 13px center/16px no-repeat}
 body:has(#more-menu) #places > .pl-filters{grid-row:2;grid-column:1 / -1;display:flex;align-items:center;gap:8px;min-height:32px;margin:19px 0 0;position:relative}
 body:has(#more-menu) #places:has(#pl-tab-locations[aria-pressed=true]) > .pl-filters{visibility:hidden}
 body:has(#more-menu) #places .pl-loc-filter{display:inline-flex;align-items:center;gap:8px;min-height:32px;height:32px;margin:0;padding:0 12px;font-size:14px;font-weight:400;color:var(--bb-ink);background:var(--bb-white);border:1px solid var(--bb-line);border-radius:4px}
 body:has(#more-menu) #places .pl-loc-filter::before{content:"";width:14px;height:14px;background:center/14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6B4F' stroke-width='2'%3E%3Cpath d='M12 21s-7-6-7-11a7 7 0 0 1 14 0c0 5-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E")}
 body:has(#more-menu) #places .pl-loc-filter.on{border-color:var(--bb-blue);background:var(--bb-bluebg)}
 body:has(#more-menu) #places .pl-loc-menu{position:absolute;left:0;top:36px;z-index:45;display:grid;min-width:240px;max-height:360px;overflow:auto;padding:4px;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:6px;box-shadow:0 8px 24px rgba(16,38,31,.18)}
 body:has(#more-menu) #places .pl-loc-menu[hidden]{display:none}
 body:has(#more-menu) #places .pl-loc-menu button{justify-content:flex-start;min-height:34px;margin:0;padding:0 12px;border:0;background:none;font-size:14px;font-weight:400;color:var(--bb-ink)}
 body:has(#more-menu) #places .pl-loc-menu button:hover,body:has(#more-menu) #places .pl-loc-menu button[aria-pressed=true]{background:var(--bb-bluebg)}
 body:has(#more-menu) #places .pl-loc-menu p{margin:8px 12px}
 body:has(#more-menu) #places > .pl-count{display:none}
 body:has(#more-menu) #places > .pl-sortbar{grid-row:3;grid-column:1;display:flex;align-items:center;gap:6px;height:40px;margin:16px 0 0;padding:0 12px;font-size:14px;color:var(--bb-slate);background:var(--bb-white);border:1px solid var(--bb-line);border-radius:4px 4px 0 0}
 body:has(#more-menu) #places > .pl-sortbar b{font-weight:600;color:var(--bb-blue)}
 body:has(#more-menu) #places > ul.pl-list{grid-row:4;grid-column:1;max-height:none;height:100%;min-height:0;margin:0 0 16px;overflow-y:auto;border:1px solid var(--bb-line);border-top:0;border-radius:0 0 4px 4px}
 body:has(#more-menu) #places > #pl-more{grid-row:5;grid-column:1}
 body:has(#more-menu) #places > #pl-more.bb-auto-more{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0}
 body:has(#more-menu) #places ul.pl-list li{margin:0;border-bottom:1px solid var(--bb-line)}
 body:has(#more-menu) #places ul.pl-list li.muted{padding:14px 16px}
 body:has(#more-menu) #places .pl-card{display:grid!important;grid-template-columns:48px minmax(0,1fr) auto;align-items:center!important;gap:0 16px;width:100%;min-height:72px!important;margin:0;padding:12px 16px!important;border:0;border-left:3px solid transparent;border-radius:0;background:var(--bb-white);box-shadow:none}
 body:has(#more-menu) #places .pl-card:hover{background:#F6F8F4}
 body:has(#more-menu) #places .pl-card.selected{border-left-color:var(--bb-blue);background:var(--bb-bluebg)}
 body:has(#more-menu) #places .pl-card .rq-chev,body:has(#more-menu) #places .pl-card::before,body:has(#more-menu) #places .pl-card::after{display:none}
 body:has(#more-menu) #places .pl-card{grid-template-rows:auto!important}
 body:has(#more-menu) #places .pl-card > *{grid-row:auto!important}
 body:has(#more-menu) #places .pl-icon{width:48px;height:48px;border:1px solid var(--bb-line);border-radius:6px;background-size:26px}
 body:has(#more-menu) #places .pl-card .rq-main{gap:2px}
 body:has(#more-menu) #workspace .pl-card .pl-name{font-size:14px;line-height:22px;font-weight:400}
 body:has(#more-menu) #places .pl-card .rq-meta{font-size:13px;line-height:20px}
 body:has(#more-menu) #places .pl-card .rq-side{align-self:flex-start}
 body:has(#more-menu) #places .chip.pl-open{min-height:22px;padding:0 6px;font-size:12px;border-radius:4px}
 /* The open item */
 body:has(#more-menu) #places > #pl-detail{grid-row:3 / span 3;grid-column:2;position:relative;top:auto;height:calc(100vh - 148px);max-height:none;margin:16px 0 16px;padding:0 0 80px;overflow-y:auto;border:1px solid var(--bb-line);border-radius:4px;background:var(--bb-white)}
 body:has(#more-menu) #places > #pl-detail:empty{padding:20px 24px}
 body:has(#more-menu) #places .pl-head{display:flex;align-items:center;gap:8px;min-height:64px;padding:0 16px;border-bottom:1px solid var(--bb-line)}
 body:has(#more-menu) #places .pl-head h3{margin:0;font-size:20px;line-height:28px;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 body:has(#more-menu) #places .pl-copy{display:block;flex:none;width:28px;height:28px;min-height:0;margin:0;padding:0;border:0;border-radius:4px;background:center/18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6B4F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E")}
 body:has(#more-menu) #places .pl-copy:hover{background-color:var(--bb-bluebg)}
 body:has(#more-menu) #places .pl-sub{margin:0;padding:10px 24px;border-bottom:1px solid var(--bb-line);font-size:14px}
 body:has(#more-menu) #places .pl-dtabs{display:flex;gap:0;margin:0 0 0;padding:0 0 0 0;border-bottom:1px solid var(--bb-line)}
 body:has(#more-menu) #places .pl-dtabs button{min-height:46px;margin:0;padding:0 32px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;font-size:14px;font-weight:400;color:var(--bb-slate)}
 body:has(#more-menu) #places .pl-dtabs button[aria-selected=true]{color:var(--bb-blue);border-bottom-color:var(--bb-blue);font-weight:600}
 body:has(#more-menu) #places #pl-detail[data-tab=insights] .pl-det,body:has(#more-menu) #places #pl-detail[data-tab=details] .pl-ins{display:none}
 body:has(#more-menu) #places #pl-detail > :not(.pl-head):not(.pl-dtabs):not(.pl-use){margin-left:24px;margin-right:24px}
 body:has(#more-menu) #places .pl-stats{margin-top:24px;gap:16px}
 body:has(#more-menu) #places .pl-stats > div{padding:16px;border-radius:4px}
 body:has(#more-menu) #places .pl-stats b{font-size:24px;line-height:32px;font-weight:600}
 body:has(#more-menu) #places .pl-stats span{font-size:14px}
 body:has(#more-menu) #places .ov-h{margin-top:24px;margin-bottom:8px;font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--bb-ink)}
 body:has(#more-menu) #places .pl-hist{margin-top:24px;padding:8px 0 0;border-top:1px solid var(--bb-line)}
 body:has(#more-menu) #places .pl-hist-h{display:flex;align-items:center;justify-content:space-between}
 body:has(#more-menu) #places .pl-hist .ov-h{margin:8px 0}
 body:has(#more-menu) #places .pl-range{display:block;font-size:14px;color:var(--bb-ink)}
 body:has(#more-menu) #places .pl-chart,body:has(#more-menu) #places .pl-legend{display:none}
 body:has(#more-menu) #places svg.pl-line{display:block;width:100%;max-width:820px;height:auto;margin:8px 0 0}
 body:has(#more-menu) #places .pl-line .pl-grid{stroke:var(--bb-line);stroke-width:1}
 body:has(#more-menu) #places .pl-line .pl-ax{font-size:11px;fill:var(--bb-slate)}
 body:has(#more-menu) #places .pl-line .pl-l{fill:none;stroke-width:2;stroke-linejoin:round}
 body:has(#more-menu) #places .pl-line .pl-l-created{stroke:var(--bb-blue);fill:none}
 body:has(#more-menu) #places .pl-line .pl-l-done{stroke:#3FB07A;fill:none}
 body:has(#more-menu) #places .pl-line circle.pl-l-created{fill:var(--bb-blue);stroke:none}
 body:has(#more-menu) #places .pl-line circle.pl-l-done{fill:#3FB07A;stroke:none}
 body:has(#more-menu) #places .pl-recent{display:none}
 body:has(#more-menu) #places ul.pl-work{margin-top:8px;border:0;border-top:1px solid var(--bb-line);border-radius:0}
 body:has(#more-menu) #places ul.pl-work .ov-item{display:grid;grid-template-columns:32px minmax(0,1fr) auto;grid-template-rows:auto auto auto;gap:2px 12px;align-items:center;min-height:96px;padding:12px 16px}
 body:has(#more-menu) #places ul.pl-work .ov-item:hover{background:#F6F8F4}
 body:has(#more-menu) #places ul.pl-work .ov-item > :is(.ov-meta,.pl-chips){display:none}
 body:has(#more-menu) #places .pl-w-ico{display:block;grid-column:1;grid-row:1 / 4;width:32px;height:32px;border:1px solid var(--bb-line);border-radius:6px;background:var(--bb-bluebg) center/18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6B4F' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 13l2.5-7h11l2.5 7v6H4z'/%3E%3Cpath d='M4 13h5l1 2h4l1-2h5'/%3E%3C/svg%3E")}
 body:has(#more-menu) #places ul.pl-work .ov-item > b{grid-column:2;grid-row:1;font-size:14px;line-height:22px;font-weight:400;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
 body:has(#more-menu) #places .pl-w-who{display:block;grid-column:2;grid-row:2;font-size:13px;line-height:20px;color:var(--bb-slate)}
 body:has(#more-menu) #places .pl-w-st{display:inline-flex;grid-column:2;grid-row:3;justify-self:start;gap:4px;font-size:13px;color:var(--bb-ink);background:none;border:0;padding:0}
 body:has(#more-menu) #places .pl-w-st .wo-pill-ico{width:12px;height:12px}
 body:has(#more-menu) #places .pl-w-st.st-OPEN .wo-pill-ico{color:var(--bb-open)}
 body:has(#more-menu) #places .pl-w-st.st-ON_HOLD .wo-pill-ico{color:var(--bb-amber)}
 body:has(#more-menu) #places .pl-w-st.st-IN_PROGRESS .wo-pill-ico{color:var(--bb-prog)}
 body:has(#more-menu) #places .pl-w-st.st-DONE .wo-pill-ico{color:var(--bb-green)}
 body:has(#more-menu) #places .pl-w-num{display:block;grid-column:3;grid-row:2;justify-self:end;font-size:13px;color:var(--bb-slate)}
 body:has(#more-menu) #places .pl-w-pri{display:inline-flex;grid-column:3;grid-row:3;justify-self:end}
 body:has(#more-menu) #places .pl-facts{margin-top:24px;gap:12px 32px;font-size:14px}
 body:has(#more-menu) #places .pl-det.ov-h{margin-top:24px}
 body:has(#more-menu) #places .pl-use{display:inline-flex;align-items:center;gap:8px;position:sticky;bottom:16px;left:50%;transform:translateX(-50%);z-index:5;min-height:40px;margin:24px 0 0;padding:0 18px;border:1px solid var(--bb-blue);border-radius:20px;background:var(--bb-white);color:var(--bb-blue);font-size:14px;font-weight:600;box-shadow:0 4px 14px rgba(16,38,31,.12)}
 body:has(#more-menu) #places .pl-use::before{content:"";width:16px;height:16px;background:center/16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6B4F' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 13l2.5-7h11l2.5 7v6H4z'/%3E%3Cpath d='M4 13h5l1 2h4l1-2h5'/%3E%3C/svg%3E")}
 body:has(#more-menu) #places .pl-use:hover{background:var(--bb-bluebg)}
}
/* Requests on wide screens, matched to the Work Orders and Assets panel view (2026-10-29):
   title, search and New Request on top, filter pills, the grouped list in one box on the
   left and the chosen request in a box on the right. New Request opens over the right box. */
@media (min-width:900px){
 body:has(#more-menu):has(#workspace[data-view=requests]:not([hidden])){overflow:hidden;padding-bottom:0}
 body:has(#more-menu) #workspace[data-view=requests] > #requests.rq-screen{display:grid;grid-template-columns:clamp(340px,34vw,500px) minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr);gap:0 18px;height:calc(100vh - 12px);overflow:clip}
 body:has(#more-menu) #requests > .rq-top{grid-column:1 / -1;display:flex;flex-wrap:nowrap;align-items:center;gap:0;min-height:40px;margin:13px 0 0;padding:0 160px 0 0}
 body:has(#more-menu) #requests > .rq-top h2{margin:0;font-size:32px;line-height:40px;font-weight:700;letter-spacing:-.01em}
 body:has(#more-menu) #requests > .rq-top .rq-filter-btn{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
 body:has(#more-menu) #requests > .rq-top .rq-refresh{order:5;flex:none;width:40px;height:40px;min-height:0;margin:0 0 0 8px;padding:0;font-size:0;color:transparent;border:1px solid var(--bb-line);border-radius:4px;background:var(--bb-white) center/16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F6359' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.7'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E")}
 body:has(#more-menu) #requests > .rq-top .rq-refresh::before,body:has(#more-menu) #requests > .rq-top .rq-refresh::after{display:none}
 body:has(#more-menu) #requests > .rq-top .rq-search{flex:0 1 400px;width:400px;min-width:150px;max-width:400px;min-height:40px;height:40px;margin:0 0 0 auto;padding:0 12px 0 40px;font-size:14px;border:1px solid var(--bb-line);border-radius:4px;background:var(--bb-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F6359' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E") 13px center/16px no-repeat}
 body:has(#more-menu) #workspace[data-view=requests] > details#new-request-box:not([open]),body:has(#more-menu) #workspace[data-view=requests] > details#new-request-box[open]{float:none;position:fixed;top:25px;right:16px;z-index:30;margin:0}
 body:has(#more-menu) #workspace[data-view=requests] > details#new-request-box > summary{min-height:40px;height:40px;padding:0 16px;gap:8px;border-radius:4px;font-size:14px;font-weight:600;color:#fff;background:var(--bb-blue);opacity:1}
 body:has(#more-menu) #workspace[data-view=requests] > details#new-request-box[open]{top:132px;bottom:16px;width:calc(100vw - var(--side) - 32px - clamp(340px,34vw,500px) - 18px);overflow:auto;padding:56px 24px 24px;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:4px;box-shadow:0 8px 24px rgba(16,38,31,.14)}
 body:has(#more-menu) #workspace[data-view=requests] > details#new-request-box[open] > summary{position:absolute;top:12px;right:12px;font-size:0;background:none;color:var(--bb-slate);border:1px solid var(--bb-line)}
 body:has(#more-menu) #workspace[data-view=requests] > details#new-request-box[open] > summary::after{content:"Cancel";font-size:14px}
 body:has(#more-menu) #requests > .rq-filters{grid-column:1 / -1;display:flex;align-items:center;gap:8px;margin:19px 0 0;padding:0}
 body:has(#more-menu) #requests > .rq-filters select.filter-pill{width:auto;min-width:130px;min-height:32px;height:32px;margin:0;padding:0 30px 0 12px;font-size:14px;font-weight:400;color:var(--bb-ink);background-color:var(--bb-white);border:1px solid var(--bb-line);border-radius:4px}
 body:has(#more-menu) #requests > p[role=status][data-count]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0}
 body:has(#more-menu) #requests > p[role=status]:not([data-count]):not(:empty){grid-column:1 / -1;margin:8px 0 0}
 body:has(#more-menu) #requests > p[role=status]:empty{display:none}
 body:has(#more-menu) #requests > .rq-panes{grid-column:1 / -1;grid-row:4;display:grid;grid-template-columns:clamp(340px,34vw,500px) minmax(0,1fr);gap:0 18px;min-height:0;margin:16px 0 16px;align-items:stretch}
 body:has(#more-menu) #requests .rq-list{min-height:0;overflow-y:auto;padding:0;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:4px}
 body:has(#more-menu) #requests .rq-list ul.cards{margin:0}
 body:has(#more-menu) #requests .rq-list > button.bb-auto-more{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0}
 body:has(#more-menu) #workspace #requests .rq-list li.rq-group{margin:0;padding:0 16px;height:32px;min-height:32px;display:flex;align-items:center;border-bottom:1px solid var(--bb-line);background:var(--bb-white)}
 body:has(#more-menu) #workspace #requests .rq-list li.rq-group button.rq-group-toggle{min-height:28px;padding:0;font-size:13px;font-weight:500}
 body:has(#more-menu) #requests .rq-list li.muted{padding:14px 16px}
 body:has(#more-menu) #requests .rq-list li:has(> button.rq-card){margin:0;border-bottom:1px solid var(--bb-line)}
 body:has(#more-menu) #requests .rq-list li button.rq-card{display:grid;grid-template-columns:48px minmax(0,1fr) auto;grid-template-rows:auto!important;align-items:center;gap:0 12px;width:100%;min-height:97px;margin:0;padding:12px 16px;border:0;border-left:3px solid transparent;border-radius:0;background:var(--bb-white);box-shadow:none;font-weight:400}
 body:has(#more-menu) #requests .rq-list li button.rq-card > *{grid-row:auto!important}
 body:has(#more-menu) #requests .rq-list li button.rq-card::before,body:has(#more-menu) #requests .rq-list li button.rq-card::after,body:has(#more-menu) #requests .rq-card .rq-chev{display:none}
 body:has(#more-menu) #requests .rq-list li button.rq-card:hover{background:#F6F8F4}
 body:has(#more-menu) #requests .rq-list li button.rq-card.selected{border-left-color:var(--bb-blue);background:var(--bb-bluebg)}
 body:has(#more-menu) #requests .rq-card .rq-icon{width:48px;height:48px;border:1px solid var(--bb-line);border-radius:8px;background-size:24px}
 body:has(#more-menu) #requests .rq-card .rq-main{gap:0;min-width:0}
 body:has(#more-menu) #requests .rq-card .wo-title{font-size:14px;line-height:22px;font-weight:400;color:var(--bb-ink);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 body:has(#more-menu) #requests .rq-card .rq-meta{font-size:13px;line-height:20px;color:var(--bb-slate)}
 body:has(#more-menu) #requests .rq-card .rq-side{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;align-self:stretch;gap:4px}
 body:has(#more-menu) #requests .rq-card .rq-side .chip{min-height:22px;padding:0 6px;font-size:12px;border-radius:4px}
 body:has(#more-menu) #requests .rq-card .rq-num{font-size:13px;color:var(--bb-slate)}
 body:has(#more-menu) #requests .rq-detail{position:relative;top:auto;max-height:none;min-height:0;margin:0;padding:0 0 24px;overflow-y:auto;border:1px solid var(--bb-line);border-radius:4px;background:var(--bb-white)}
 body:has(#more-menu) #requests .rq-detail:has(.rq-detail-body:empty):has(form[hidden])::before{display:block;padding:20px 24px}
 body:has(#more-menu) #requests .rq-detail-body h3{display:flex;align-items:center;min-height:64px;margin:0;padding:0 24px;font-size:20px;line-height:28px;font-weight:600;border-bottom:1px solid var(--bb-line)}
 body:has(#more-menu) #requests .rq-detail-body .rq-field{margin:0 24px;padding:16px 0;border-bottom:1px solid var(--bb-line)}
 body:has(#more-menu) #requests .rq-detail-body .rq-label{font-size:15px;font-weight:600;color:var(--bb-ink);margin-bottom:8px}
 body:has(#more-menu) #requests .rq-detail-body .rq-value{font-size:14px;color:var(--bb-ink);white-space:pre-wrap}
 body:has(#more-menu) #requests .rq-detail > form,body:has(#more-menu) #requests .rq-detail > button{margin-left:24px;margin-right:24px}
 body:has(#more-menu) #requests .rq-detail form fieldset{padding-top:16px}
 body:has(#more-menu) #requests .rq-detail form button{min-height:40px;font-size:14px;border-radius:4px}
}
/* Messages on wide screens, matched to the reference (2026-10-29): title with search and
   New Message on the right, conversations in one box on the left, the open conversation
   with a header (bell, more), the message log and an inline composer at the bottom. */
@media (min-width:900px){
 body:has(#more-menu):has(#workspace[data-view=messages]:not([hidden])){overflow:hidden;padding-bottom:0}
 body:has(#more-menu) #workspace[data-view=messages] > #messages{grid-template-columns:clamp(320px,26vw,440px) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:0 18px;height:calc(100vh - 12px);overflow:clip;align-items:stretch}
 body:has(#more-menu) #messages > .msg-top{grid-column:1 / -1;grid-row:1;display:flex;align-items:center;gap:0;min-height:40px;margin:13px 0 0;padding:0}
 body:has(#more-menu) #messages > .msg-top h2{margin:0;font-size:32px;line-height:40px;font-weight:700;letter-spacing:-.01em}
 body:has(#more-menu) #messages > .msg-top #msg-refresh{order:3;flex:none;width:40px;height:40px;min-height:0;margin:0 0 0 auto;padding:0;font-size:0;color:transparent;border:1px solid var(--bb-line);border-radius:4px;background:var(--bb-white) center/16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F6359' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.7'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E")}
 body:has(#more-menu) #messages > .msg-top #msg-refresh::before,body:has(#more-menu) #messages > .msg-top #msg-refresh::after{display:none}
 body:has(#more-menu) #messages > .msg-top .msg-new{order:4;display:inline-flex;align-items:center;gap:8px;min-height:40px;height:40px;margin:0 0 0 16px;padding:0 16px;border:0;border-radius:4px;color:#fff;background:var(--bb-blue);font-size:14px;font-weight:600}
 body:has(#more-menu) #messages > .msg-search{grid-column:1 / -1;grid-row:1;align-self:center;justify-self:end;z-index:2;width:400px;max-width:calc(100% - 520px);min-height:40px;height:40px;margin:13px 216px 0 0;padding:0 12px 0 40px;font-size:14px;border:1px solid var(--bb-line);border-radius:4px;background:var(--bb-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F6359' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E") 13px center/16px no-repeat}
 body:has(#more-menu) #messages > ul.msg-list{grid-column:1;grid-row:2;max-height:none;min-height:0;margin:20px 0 16px;overflow-y:auto;border-radius:4px;align-self:stretch}
 body:has(#more-menu) #messages .msg-row{gap:12px;min-height:72px;padding:12px 16px;border-left:3px solid transparent}
 body:has(#more-menu) #messages .msg-row:hover{background:#F6F8F4}
 body:has(#more-menu) #messages .msg-row.selected{border-left-color:var(--bb-blue);box-shadow:none;background:var(--bb-bluebg)}
 body:has(#more-menu) #messages .msg-row .msg-avatar{width:48px;height:48px;font-size:20px;font-weight:400}
 body:has(#more-menu) #messages .msg-name{font-size:14px;line-height:22px;font-weight:400}
 body:has(#more-menu) #messages .msg-when{font-size:12px}
 body:has(#more-menu) #messages .msg-preview{font-size:14px;line-height:22px}
 body:has(#more-menu) #messages .msg-row.unread .msg-name{font-weight:700}
 body:has(#more-menu) #messages > #msg-pane{grid-column:2;grid-row:2;position:relative;top:auto;height:auto;min-height:0;margin:20px 0 16px;border-radius:4px}
 body:has(#more-menu) #messages .msg-head{min-height:72px;padding:8px 16px;gap:16px}
 body:has(#more-menu) #messages .msg-head .msg-avatar{width:56px;height:56px;font-size:24px;font-weight:400}
 body:has(#more-menu) #messages .msg-hinfo b,body:has(#more-menu) #messages .msg-hinfo h3{font-size:14px;font-weight:400;margin:0}
 body:has(#more-menu) #messages .msg-members{font-size:14px}
 body:has(#more-menu) #messages ol.msg-log{padding:8px 16px 16px;gap:0}
 body:has(#more-menu) #messages .msg-item{grid-template-columns:40px minmax(0,1fr);column-gap:16px;padding-top:16px}
 body:has(#more-menu) #messages .msg-item.grouped{padding-top:4px}
 body:has(#more-menu) #messages .msg-item .msg-avatar{width:36px;height:36px;font-size:14px}
 body:has(#more-menu) #messages .msg-who{font-size:14px;line-height:22px}
 body:has(#more-menu) #messages .msg-who b{font-weight:600}
 body:has(#more-menu) #messages .msg-who .msg-when{font-size:14px;color:var(--bb-slate)}
 body:has(#more-menu) #messages .msg-body{font-size:14px;line-height:22px}
 body:has(#more-menu) #messages .msg-compose{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 16px;border-top:0}
 body:has(#more-menu) #messages .msg-compose > .msg-tools{display:contents}
 body:has(#more-menu) #messages .msg-compose button.msg-tool{order:1;width:36px;min-height:36px}
 body:has(#more-menu) #messages .msg-compose button.msg-tool svg{width:20px;height:20px}
 body:has(#more-menu) #messages .msg-compose textarea{order:2;flex:1;min-width:200px;min-height:40px;height:40px;max-height:120px;padding:9px 12px;border:1px solid var(--bb-line);border-radius:4px;font-size:14px}
 body:has(#more-menu) #messages .msg-compose textarea:focus-visible{border-color:var(--bb-blue)}
 body:has(#more-menu) #messages .msg-compose .msg-send{order:3;min-width:64px;min-height:40px;height:40px;margin:0;border-radius:4px;font-size:14px}
 body:has(#more-menu) #messages .msg-compose ul.msg-tray{order:0;flex-basis:100%}
 body:has(#more-menu) #messages .msg-compose .msg-err{order:4;flex-basis:100%}
}
/* Pictures and files on the request form (2026-10-29), reusing the New Work Order picker. */
.rq-pics{margin:4px 0 12px}
.rq-files .msg-files{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
/* PC Settings (2026-10-29): the same page title as Work Orders, Requests and Assets. */
@media (min-width:900px){
body:has(#more-menu) #settings > h2{margin:13px 0 12px;font-size:32px;line-height:40px;font-weight:700;letter-spacing:-.32px}
}
/* Estimated time (hours + minutes) on New Work Order and the work order (stage 98). */
.nw-est{display:flex;gap:12px;flex-wrap:wrap}
.nw-est-part{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;color:var(--bb-muted)}
.nw-est-part input{width:96px;min-height:40px;margin:0}
.wd-plan .wd-f{min-width:0}
.wd-plan-msg{grid-column:1/-1;margin:0;font-size:13px;color:var(--bb-muted)}
.wd-plan-msg:empty{display:none}
/* Phone Assets and Locations (2026-10-29): rows divided by a line, as in the reference list. */
@media (max-width:899px){
#places #pl-list > li + li > .pl-card{border-top:1px solid var(--bb-line)}
#places #pl-list > li > .pl-card > .rq-chev{align-self:center}
#places #pl-list{margin-top:0}
}
/* + New Asset / + New Location (stage 99): beside the search on PC, a floating button on phones. */
.pl-new{display:inline-flex;align-items:center;justify-content:center;min-height:40px;margin:0;padding:0 16px;font-size:14px;font-weight:600;color:#fff;background:var(--bb-blue);border:0;border-radius:4px}
@media (min-width:900px){
body:has(#more-menu) #places > .pl-top .pl-new{order:5;flex:none;height:40px;margin:0 0 0 16px}
}
@media (max-width:899px){
#places .pl-new{position:fixed;right:var(--gutter);bottom:calc(var(--tabs) + env(safe-area-inset-bottom) + 14px);z-index:22;min-height:52px;padding:0 20px;font-size:16px;color:var(--bb-paper);background:var(--bb-ink);border-radius:999px;box-shadow:0 4px 14px rgba(16,38,31,.3)}
#places:has(> #pl-detail:not(:empty)) .pl-new{display:none}
#places #pl-list{padding-bottom:84px}
}
.pl-new-form .nw-f select{min-height:40px}
.pl-new-form{display:grid;gap:16px;padding:8px 0 24px}
.pl-new-form .nw-f{display:grid;gap:6px;margin:0}
.pl-new-form .nw-head{display:flex;align-items:center;justify-content:space-between}
.pl-new-form .nw-head h2{margin:0;font-size:20px}
.pl-new-form .nw-create{justify-self:start;min-width:140px}
@media (max-width:899px){.pl-new-form .nw-head{display:none}}

/* Procedure Library (stage 101): the Assets list-and-detail layout without the Assets/Locations tabs and filters. */
#places[data-mode=library] :is(.pl-tabs,.pl-filters,.pl-sortbar){display:none!important}
.lib-desc{margin:4px 0 12px;white-space:pre-wrap}
.lib-steps{margin:0 0 16px;padding-left:24px;display:grid;gap:8px}
.lib-steps li{line-height:1.4}
.lib-req{font-size:12px}
.pl-head .lib-edit{margin-left:auto;min-height:36px;padding:0 16px}
.lib-step-list{margin:0;padding-left:24px;display:grid;gap:8px}
.lib-step{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center}
.lib-step-req{display:flex;align-items:center;gap:6px;font-size:14px;white-space:nowrap}
.lib-step-req input{width:18px;height:18px;min-height:0;margin:0;padding:0}
.lib-step-rm{min-height:36px;padding:0 10px;font-size:14px;background:transparent;border:1px solid var(--bb-line);color:inherit;border-radius:4px}
.lib-add{justify-self:start}
#places#places[data-mode=library] .pl-card .rq-meta::before{content:none;display:none}
#places #pl-detail .pl-head:has(.lib-edit){display:flex;align-items:center;gap:8px}
#places #pl-detail .pl-head:has(.lib-edit) h3{flex:1;min-width:0}
.lib-files{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.lib-file{position:relative;display:grid;gap:4px;justify-items:center}
.lib-file-open{display:grid;place-items:center;width:96px;height:96px;border:1px solid var(--bb-line);border-radius:6px;overflow:hidden;background:var(--bb-white);color:var(--bb-ink);text-decoration:none;font-size:13px}
.lib-file-open img{width:100%;height:100%;object-fit:cover}
.lib-pdf{font-weight:700;color:var(--bb-red)}
.lib-file-rm{min-height:28px;padding:0 8px;font-size:13px;background:transparent;border:1px solid var(--bb-line);border-radius:4px;color:inherit}
.lib-files-edit{margin-bottom:8px}
.lib-pick-btn{justify-self:start}