/* Shared component contract for the shell and every workspace.
   Preserve module layouts, PDF pages, maps, TV boards and authored rich text. */
:root,:host{
 --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
 --ui-body:14px;--ui-control:13px;--ui-meta:12px;--ui-section:18px;
 --ui-control-height:42px;--ui-radius:14px;--ui-panel-radius:22px;
 --ui-fast:160ms;--ui-medium:220ms;--ui-ease:cubic-bezier(.2,.7,.2,1);
 --ui-focus:#b52c3c;--ui-primary:#c62e3b;--ui-primary-hover:#ad2733;
 --ui-neutral:rgba(255,255,255,.74);--ui-edge:rgba(93,109,101,.18);
 --ui-dialog:rgba(249,251,250,.98);--ui-highlight:inset 0 1px 0 rgba(255,255,255,.7);
 --ui-muted:#626c66;
}
html[data-theme=dark],:host([data-theme=dark]){
 --ui-neutral:rgba(255,255,255,.055);--ui-edge:rgba(236,244,239,.17);
 --ui-dialog:rgba(29,35,31,.98);--ui-highlight:inset 0 1px 0 rgba(255,255,255,.08);
 --ui-muted:#adb9b1;--ui-focus:#f197a2;
}
body,:host{font-family:var(--font-ui);font-size:var(--ui-body);line-height:1.5}
*,*::before,*::after{box-sizing:border-box}
button,input,select,textarea{font-family:inherit}
[hidden]:not([hidden="until-found"]){display:none!important}
dialog:not([open]){display:none!important}
/* Same hierarchy for equivalent roles, without flattening all text to one size. */
:is(.content,:host) :is(.page-heading,.workspace-heading,.finance-page-heading) h1{
 font-family:var(--font-ui);font-size:clamp(28px,3vw,38px);font-weight:600;line-height:1.15;letter-spacing:-.035em;overflow-wrap:anywhere;
}
:is(.content,:host) :is(.page-heading,.workspace-heading,.finance-page-heading) p{
 font-size:var(--ui-body);line-height:1.5;margin-top:8px;color:var(--muted,var(--ui-muted));
}
:is(.page-heading,.workspace-heading,.finance-page-heading,.heading-actions,.modal-heading,.drawer-heading)>div{min-width:0}
:is(.panel-heading,.card-heading,.section-title,.finance-card-heading,.po-detail-section,.ca-workspace) h2{
 font-size:var(--ui-section);font-weight:600;line-height:1.4;letter-spacing:-.015em;
}
.content .work-detail .project-workspace-header h1,:host .project-workspace-header h1{font-family:var(--font-ui);font-size:clamp(28px,3vw,38px);font-weight:600;line-height:1.15;letter-spacing:-.035em;overflow-wrap:anywhere}
:is(.record-name h2,.quote-card h3,.pm-project-card h3,.finance-project-card h3,.directory-info strong){font-size:16px;font-weight:600;line-height:1.4;letter-spacing:-.01em}
/* Operational buttons share dimensions across DOM and shadow modules. */
:is(body,:host) :is(.button,.primary,.primary-button,.secondary-button,.portal-button,.fd-button){
 display:inline-flex;align-items:center;justify-content:center;gap:8px;
 min-height:var(--ui-control-height);height:auto;padding:10px 16px;border-radius:999px;
 font-size:var(--ui-control);font-weight:550;line-height:1.4;text-align:center;
 white-space:normal;max-width:100%;text-decoration:none;
 transition:background var(--ui-fast) var(--ui-ease),border-color var(--ui-fast) var(--ui-ease),box-shadow var(--ui-fast) var(--ui-ease),color var(--ui-fast) var(--ui-ease);
}
:is(body,:host) :is(.primary,.primary-button){background:linear-gradient(145deg,#d43b48,var(--ui-primary));border:1px solid var(--ui-primary);color:#fff;box-shadow:var(--ui-highlight),0 4px 12px #c62e3b18}
:is(body,:host) :is(.primary,.primary-button):hover:not(:disabled){background:var(--ui-primary-hover);border-color:var(--ui-primary-hover)}
:is(body,:host) :is(.button,.secondary-button,.portal-button):not(.primary,.primary-button,.danger-button){background:var(--ui-neutral);color:var(--text,var(--ink));border:1px solid var(--line,var(--ui-edge));box-shadow:var(--ui-highlight)}
:is(body,:host) :is(.button,.secondary-button,.portal-button):not(.primary,.primary-button,.danger-button):hover:not(:disabled){border-color:var(--accent-line,#e8bdc5);background:var(--accent-soft,rgba(198,46,59,.07))}
:is(body,:host) :is(.icon-button,.finance-icon-button,.row-arrow,.modal-heading>button:has(>svg.lucide-x),.drawer-heading>button:has(>svg.lucide-x),.item-drawer-head>button:has(>svg.lucide-x)){
 display:inline-grid;place-items:center;flex-shrink:0;width:38px;height:38px;min-height:38px;padding:0;border-radius:50%;
 background:var(--ui-neutral);border:1px solid var(--line,var(--ui-edge));color:var(--text,var(--ink));
}
/* Outline icons use the same stroke; specialized illustrations keep their size. */
:is(button,a,.field-caption,.work-section-icon,.work-tab-icon,.panel-heading,.modal-heading,.drawer-heading) svg[stroke],svg.lucide{
 stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;
}
:is(.button,.primary,.primary-button,.secondary-button,.icon-button,.finance-icon-button,.modal-heading>button:has(>svg.lucide-x),.drawer-heading>button:has(>svg.lucide-x))>svg{width:18px;height:18px}
:is(body,:host) :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible{
 outline:2px solid var(--ui-focus);outline-offset:3px;
}
button:disabled{cursor:not-allowed}
:is(.button,.primary,.primary-button,.secondary-button,.icon-button):disabled{opacity:.5;transform:none;box-shadow:none}
:is(.profile-form,form.modal,.modal form,.ca-form,.finance-form-grid,.finance-po-form-grid,.pm-form,.admin-form) :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]){
 min-height:var(--ui-control-height);max-width:100%;font-size:var(--ui-control);line-height:1.5;
 padding:10px 12px;border-radius:var(--ui-radius);border:1px solid var(--line,var(--ui-edge));background-color:var(--ui-neutral);color:var(--text,var(--ink));
}
:is(.modal,.drawer,.finance-dialog) label{min-width:0}
:is(.modal,.drawer,.finance-dialog) label>span:first-child{font-size:var(--ui-meta);line-height:1.5}
/* Every ordinary popup shares material and readable headers. PDF canvases keep
   their own sizing and scroll containers. Native dialogs retain top-layer semantics. */
:is(body,:host) :is(.modal:not(.quote-pdf-modal),.finance-dialog,.pp-dialog){
 max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);
 border-radius:var(--ui-panel-radius);background:var(--ui-dialog);color:var(--text,var(--ink));
 border:1px solid var(--line,var(--ui-edge));box-shadow:0 24px 72px #12201933,var(--ui-highlight);
 overscroll-behavior:contain;
}
:is(.modal,.finance-dialog) .modal-heading,.modal>header,.finance-dialog>header{gap:16px;align-items:flex-start;padding:20px 24px;border-bottom:1px solid var(--line,var(--ui-edge))}
:is(.modal,.finance-dialog,.pp-dialog) .modal-heading h2,.modal>header h2,.finance-dialog>header h2{font-size:20px;font-weight:600;line-height:1.35;letter-spacing:-.02em;overflow-wrap:anywhere}
:is(.modal,.finance-dialog) .modal-heading p,.modal>header p,.finance-dialog>header p{font-size:var(--ui-control);line-height:1.5;color:var(--muted,var(--ui-muted));margin-top:6px}
:is(.modal-actions,.heading-actions,.drawer-actions){gap:8px;flex-wrap:wrap}
:is(.modal-actions,.drawer-actions){align-items:center;min-width:0}
:is(.modal,.finance-dialog) :is(header,.modal-heading)>:first-child{min-width:0}
:is(.modal,.finance-dialog) :is(header,.modal-heading)>button{flex-shrink:0}
:is(.modal,.finance-dialog) :is(input,select,textarea){min-width:0}
:is(.record-summary,.quote-summary,.finance-table,.data-table,.cost-table,.ca-summary){font-variant-numeric:tabular-nums}
:is(.panel,.glass-panel,.profile-panel,.table-panel,.drive-panel,.record-card,.quote-card,.finance-project-card,.pm-project-card){border-radius:var(--ui-panel-radius)}
:is(.data-table,.finance-table,.cost-table,.po-register-table) th{font-size:var(--ui-meta);font-weight:600;line-height:1.4;vertical-align:middle}
:is(.data-table,.finance-table,.cost-table,.po-register-table) td{font-size:var(--ui-control);line-height:1.5;vertical-align:middle}
:is(.status-badge,.finance-status,.work-status,.directory-status){font-size:var(--ui-meta);font-weight:500;line-height:1.4;border-radius:999px}
:is(.table-panel,.table-scroll,.finance-table-wrap){overscroll-behavior-x:contain}
/* Use one movement rhythm for interactive cards, without changing fitted boards. */
:is(.record-card,.quote-card,.directory-card,.pm-project-card,.finance-project-card,.ed-metric,.ca-kpis .metric){
 transition:transform var(--ui-medium) var(--ui-ease),border-color var(--ui-fast) var(--ui-ease),box-shadow var(--ui-medium) var(--ui-ease),background var(--ui-fast) var(--ui-ease);
}
@media(hover:hover) and (pointer:fine){
 :is(.record-card,.quote-card,.directory-grid>.directory-card,.pm-project-card,.finance-project-card):hover{transform:translateY(-3px);border-color:var(--accent-line,#e8bdc5);box-shadow:0 10px 28px #c62e3b16,var(--ui-highlight)}
}
@media(max-width:760px){
 :is(.page-heading,.workspace-heading,.finance-page-heading){flex-wrap:wrap;gap:16px}
 :is(.heading-actions,.modal-actions)>:is(.button,.primary,.primary-button,.secondary-button){white-space:normal;height:auto}
 :is(.modal,.finance-dialog) .modal-heading,.modal>header,.finance-dialog>header{padding:16px}
 :is(.profile-form,form.modal,.modal form,.ca-form,.finance-form-grid,.finance-po-form-grid,.pm-form,.admin-form) :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=file]){font-size:16px}
}
@media(pointer:coarse){
 :is(body,:host) :is(.button,.primary,.primary-button,.secondary-button,.icon-button,.finance-icon-button,.modal-heading>button:has(>svg.lucide-x),.drawer-heading>button:has(>svg.lucide-x)){min-height:44px}
 :is(body,:host) :is(.icon-button,.finance-icon-button,.modal-heading>button:has(>svg.lucide-x),.drawer-heading>button:has(>svg.lucide-x)){width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
 :is(.record-card,.quote-card,.directory-card,.pm-project-card,.finance-project-card,.ed-metric,.ca-kpis .metric):hover{transform:none}
}
@media(forced-colors:active){
 :is(.button,.primary,.primary-button,.secondary-button,.icon-button,.modal,.finance-dialog,.pp-dialog){border:1px solid ButtonText;box-shadow:none}
 :is(button,a,input,select,textarea):focus-visible{outline-color:Highlight}
}

/* Header actions override older department-specific compact button rules. */
:is(.content,:host) :is(.page-heading,.workspace-heading,.finance-page-heading,.project-workspace-actions) :is(.primary,.button,.primary-button,.secondary-button){min-height:42px;height:auto;padding:10px 16px;border-radius:999px;font-size:13px;font-weight:550;line-height:1.4;white-space:normal}
@media(pointer:coarse){:is(.content,:host) :is(.page-heading,.workspace-heading,.finance-page-heading,.project-workspace-actions) :is(.primary,.button,.primary-button,.secondary-button){min-height:44px}}

/* The shell owns page width. Modules must not reserve a second work-area gutter. */
.office>.stage>.content>:is(.estimation-module,.work-detail,.directory-module,.subcontractors-module,.finance-module,#quote-workspace,#operations-workspace,#administration-workspace){width:100%;max-width:none;min-width:0}
:host .quote-workspace{width:100%;min-width:0;max-width:none}

/* One responsive frame for every page, including dedicated external portals.
   Keep the gutter outside both surfaces, so their border boxes share edges.
   The stage already follows the navigation width, including its collapsed rail. */
.office>.stage,.main-stage{--portal-page-gutter:clamp(20px,3vw,40px);--portal-frame-width:calc(100% - var(--portal-page-gutter)*2)}
.office>.stage>.topbar,
.office>.stage>.content,
.office.is-estimation-dashboard>.stage>.content,
.main-stage>.topbar,
.main-stage>.page-content,
.external-portal-shell .main-stage>.topbar,
.external-portal-shell .main-stage>.page-content{
 box-sizing:border-box;width:var(--portal-frame-width);max-width:none;min-width:0;margin-inline:auto;
}
.office>.stage>.content,
.office.is-estimation-dashboard>.stage>.content,
.main-stage>.page-content,
.external-portal-shell .main-stage>.page-content{padding-inline:0}
.office>.stage>.content>:is(div,section),
.main-stage>.page-content>:is(div,section),
:host :is(.quote-workspace,.original-workspace,.finance-workspace){box-sizing:border-box;width:100%;max-width:none;min-width:0}
:host :is(.profile-settings-card,.webmaster-preview-workspace){box-sizing:border-box;width:100%;max-width:none;min-width:0}
/* Client and subcontractor pages have their own shell and the same edge rule. */
.cc :is(.cc-header,.cc-main,.cc-profile),.sc .sc-profile{box-sizing:border-box;width:100%;max-width:none;min-width:0}
@media(max-width:1180px){.office>.stage,.main-stage{--portal-page-gutter:24px}}
@media(max-width:860px){.office>.stage,.main-stage{--portal-page-gutter:20px}}
@media(max-width:760px){.office>.stage,.main-stage{--portal-page-gutter:12px}}
.portal-search-modal{width:min(860px,calc(100vw - 24px));max-width:860px;overflow:hidden;display:flex;flex-direction:column}
.portal-search-body{padding:20px 24px;overflow:auto;min-height:0}
.portal-search-input{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--ui-neutral);border-radius:var(--ui-radius);padding:0 14px;min-height:46px}
.portal-search-input svg{width:18px;height:18px;flex:none;color:var(--muted)}
.portal-search-input input{width:100%;min-width:0;padding:12px 0;border:0;background:transparent;font-size:14px;color:inherit}
.portal-search-help,#portal-search-status{font-size:12px;line-height:1.5;color:var(--muted);margin:10px 0}
.portal-search-results{display:grid;gap:6px;max-height:55dvh;overflow:auto;overscroll-behavior:contain}
.portal-search-results h3{font-size:12px;font-weight:600;color:var(--muted);margin:12px 0 4px}
.portal-search-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px;text-align:left;border:1px solid transparent;border-radius:14px;color:var(--text);background:var(--ui-neutral);min-height:60px}
.portal-search-row:hover,.portal-search-row:focus-visible{background:var(--accent-soft);border-color:var(--line)}
.portal-search-row>svg{width:18px;height:18px;flex:none}.portal-search-row>svg:last-child{margin-left:auto}
.portal-search-row>span{display:grid;gap:3px;min-width:0}.portal-search-row strong{font-size:14px;font-weight:550;line-height:1.5;overflow-wrap:anywhere}
.portal-search-row small,.portal-search-row em{font-size:12px;font-style:normal;color:var(--muted);line-height:1.5}.portal-search-row em{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.portal-search-record{padding:20px 24px;overflow:auto;font-size:13px}.portal-search-record>p{color:var(--muted);margin-bottom:16px}
.portal-search-record dl{display:grid;gap:0;margin:0}.portal-search-record dl>div{display:grid;grid-template-columns:160px minmax(0,1fr);gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.portal-search-record dt{color:var(--muted);text-transform:capitalize}.portal-search-record dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.portal-search-record footer{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:20px}
@media(max-width:600px){.portal-search-body,.portal-search-record{padding:16px}.portal-search-record dl>div{grid-template-columns:1fr;gap:4px}.portal-search-input input{font-size:16px}}
/* Reserve the viewport for the Finance project overview, as on Estimation. */
@media(min-width:1050px) and (min-height:700px){
 .office>.stage>.content:has([data-finance-project-overview]){padding-top:14px;padding-bottom:10px;min-height:0}
 .office>.stage>.content:has([data-finance-project-overview])>[data-finance-project-overview]{min-height:0}
}

/* Common bounds for ordinary native forms; full-screen readers and Worker
   task dialogs keep their dedicated layouts and materials. */
dialog:is(.pd-dialog,.cost-document-dialog,.fd-event-dialog,.prelim-dialog,.ea-dialog,.quote-item-upload-dialog,.po-email-preview-dialog){
 max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);color:var(--text,var(--ink));
 border:1px solid var(--line,var(--ui-edge));border-radius:var(--ui-panel-radius);
 background:var(--ui-dialog);box-shadow:0 24px 72px #12201933,var(--ui-highlight);overscroll-behavior:contain;
}
dialog:is(.finance-dialog,.pd-dialog,.cost-document-dialog,.fd-event-dialog,.prelim-dialog,.ea-dialog,.quote-item-upload-dialog,.po-email-preview-dialog)::backdrop{background:rgba(13,16,14,.42);backdrop-filter:blur(6px)}
:is(.project-workspace-actions,.heading-actions,.quote-builder-heading>div:last-child,.estimation-project-heading>div:last-child,.finance-detail-actions,.po-detail-actions,.fqi-record-actions){flex-wrap:wrap;min-width:0}
:is(.modal-actions,.drawer-actions)>:is(button,a){max-width:100%;overflow-wrap:anywhere}
@media(max-width:600px){
 :is(.modal-actions,.drawer-actions){gap:8px}
 :is(.modal-actions,.drawer-actions)>:is(button,a){min-width:0}
}