/* Congine interaction system — canonical final layer.
   Global navigation chooses a destination, local tabs switch context,
   primary buttons advance work, and disclosures reveal optional tools. */
:root{--ui-space-1:4px;--ui-space-2:8px;--ui-space-3:12px;--ui-space-4:16px;--ui-space-5:24px;--ui-space-6:32px;--ui-control-h:44px;--ui-radius-sm:8px;--ui-radius:12px;--ui-radius-lg:18px;--ui-reading:72ch;--ui-shadow-menu:0 20px 55px rgb(0 0 0/.24)}
html[data-ui="harmonized"]{scroll-padding-top:92px}html[data-ui="harmonized"] body{line-height:1.5}
html[data-ui="harmonized"] :is(.page,dialog) :is(button,.button,input,select,textarea){font:inherit}
html[data-ui="harmonized"] .page>*{min-width:0;max-width:100%;box-sizing:border-box}
html[data-ui="harmonized"] .page :is(.heading,.pw-head,.dash-head,.ui-page-head){display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ui-space-5);margin:0 0 var(--ui-space-5)}
html[data-ui="harmonized"] .page :is(.heading,.pw-head,.dash-head,.ui-page-head)>div{min-width:0}
html[data-ui="harmonized"] .page :is(.heading,.pw-head,.dash-head,.ui-page-head) h1{max-width:24ch;margin:4px 0 8px;overflow-wrap:anywhere}
html[data-ui="harmonized"] .page :is(.heading,.pw-head,.dash-head,.ui-page-head) p:not(.eyebrow){max-width:var(--ui-reading);margin-block:0;color:var(--muted);line-height:1.6}
html[data-ui="harmonized"] .eyebrow{margin:0;color:var(--muted);font-size:11px;font-weight:750;letter-spacing:.12em;text-transform:uppercase}
html[data-ui="harmonized"] .button{min-height:var(--ui-control-h);box-sizing:border-box;border-radius:var(--ui-radius-sm);font-weight:650;line-height:1.25;white-space:normal}
html[data-ui="harmonized"] .button.small{min-height:38px}
html[data-ui="harmonized"] .button.primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
html[data-ui="harmonized"] .button.danger{color:var(--tone-danger);border-color:var(--tone-danger-line);background:var(--tone-danger-bg)}
html[data-ui="harmonized"] .button.quiet{background:transparent;border-color:transparent}
html[data-ui="harmonized"] :is(.ui-action-cluster,.sp-actions,.pw-card-actions,.pw-quick-links){display:flex;align-items:center;flex-wrap:wrap;gap:var(--ui-space-2)}
html[data-ui="harmonized"] .ui-action-cluster small{flex:1 1 260px;color:var(--muted);line-height:1.45}
html[data-ui="harmonized"] .panel{min-width:0;border-radius:var(--ui-radius)}
html[data-ui="harmonized"] .panel.pad{padding:var(--ui-space-5)}
html[data-ui="harmonized"] .field{display:grid;gap:7px;min-width:0}
html[data-ui="harmonized"] .field>small{color:var(--muted);line-height:1.45}
html[data-ui="harmonized"] :is(input,select,textarea){max-width:100%;box-sizing:border-box}
html[data-ui="harmonized"] :is(input:not([type=checkbox]):not([type=radio]),select){min-height:var(--ui-control-h)}
html[data-ui="harmonized"] textarea{padding:12px 14px;line-height:1.55}
html[data-ui="harmonized"] :is(details>summary,.calendar-disclosure summary){min-height:var(--ui-control-h);box-sizing:border-box;display:flex;align-items:center;cursor:pointer}
html[data-ui="harmonized"] .ui-empty-state{display:grid;justify-items:start;gap:8px;padding:clamp(22px,4vw,42px);border:1px dashed var(--control-line);border-radius:var(--ui-radius-lg);background:color-mix(in srgb,var(--surface-2) 62%,transparent)}
html[data-ui="harmonized"] .ui-empty-state h3{margin:0;font-size:1.3rem}html[data-ui="harmonized"] .ui-empty-state p:not(.eyebrow){max-width:58ch;margin:0;color:var(--muted);line-height:1.6}
html[data-ui="harmonized"] .ui-inline-notice{padding:10px 12px;border-left:3px solid var(--tone-warning-line);background:var(--tone-warning-bg);color:var(--tone-warning);border-radius:0 8px 8px 0}
/* One compact switcher for the few heavy workspaces that genuinely need a route change. */
html[data-ui="harmonized"] .ui-context-switcher{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px!important;border:1px solid var(--line)!important;border-radius:var(--ui-radius)!important;background:var(--chrome)!important}
.ui-context-current{display:grid;min-width:0}.ui-context-current small{font-size:9px;letter-spacing:.1em;color:var(--muted)}.ui-context-current strong{font-size:14px}.ui-context-current span{font-size:11px;color:var(--muted)}
.ui-context-switcher>details{position:relative;margin-left:auto}.ui-context-switcher>details>summary{min-height:40px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;font-weight:700;list-style:none}.ui-context-switcher>details>summary::-webkit-details-marker{display:none}
.ui-workspace-menu{position:absolute;right:0;z-index:40;width:min(720px,calc(100vw - 48px));max-height:min(72vh,720px);overflow:auto;display:grid;gap:14px;margin-top:8px;padding:14px;border:1px solid var(--line);border-radius:var(--ui-radius-lg);background:var(--paper);box-shadow:var(--ui-shadow-menu)}
.ui-workspace-menu>section>p{margin:0 0 7px!important;color:var(--muted);font-size:11px!important;font-weight:750;text-transform:uppercase;letter-spacing:.08em}.ui-workspace-menu>section>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ui-workspace-link{display:flex;min-width:0;min-height:58px;box-sizing:border-box;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);color:var(--ink);font:inherit;text-align:left;text-decoration:none;cursor:pointer}.ui-workspace-link span{font-weight:700}.ui-workspace-link small{color:var(--muted);font-size:11px;line-height:1.35}.ui-workspace-link[aria-current=page]{border-color:var(--accent);background:var(--studio-lilac);color:var(--studio-lilac-ink)}.ui-context-hint{margin:0!important;color:var(--muted);font-size:13px!important}
/* Tables keep their data density but never widen the entire mobile page. */
html[data-ui="harmonized"] .page :is(.table-wrap,.budget-table-wrap,.registry-table-wrap){max-width:100%;overflow:auto;overscroll-behavior-inline:contain}
html[data-ui="harmonized"] .page table{max-width:100%}
html[data-ui="harmonized"] dialog{max-width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 32px);border-radius:var(--ui-radius-lg)}
@media(max-width:760px){html[data-ui="harmonized"] .page :is(.heading,.pw-head,.dash-head,.ui-page-head){display:block;margin-bottom:18px}html[data-ui="harmonized"] .page :is(.heading,.pw-head,.dash-head,.ui-page-head)>.button{width:100%;margin-top:14px}.page{overflow-x:hidden}html[data-ui="harmonized"] .panel.pad{padding:16px}.ui-context-switcher{align-items:stretch!important}.ui-context-switcher>details{position:static}.ui-context-switcher>details>summary{height:100%}.ui-workspace-menu{position:fixed;inset:auto 8px calc(var(--mobile-dock-height,76px) + env(safe-area-inset-bottom) + 8px) 8px;width:auto;max-height:72dvh}.ui-workspace-menu>section>div{grid-template-columns:1fr}.ui-action-cluster>.button{flex:1 1 auto}html[data-ui="harmonized"] dialog{inset:8px;width:auto;max-width:none;height:calc(100dvh - 16px);max-height:none;margin:0}}
@media(prefers-reduced-motion:reduce){html[data-ui="harmonized"] *{scroll-behavior:auto!important}}
/* Focused import and recovery states. These pages use the same measured content column as the workspaces. */
html[data-ui="harmonized"] .production-load-state{max-width:980px;margin-inline:auto}
html[data-ui="harmonized"] .production-load-error{max-width:760px;margin-block:clamp(44px,9vh,108px)}
html[data-ui="harmonized"] .production-load-error .ui-empty-state{padding:clamp(28px,5vw,52px)}
html[data-ui="harmonized"] .production-load-error details{width:100%;margin-top:8px;color:var(--muted)}
html[data-ui="harmonized"] .production-load-error details p{overflow-wrap:anywhere}
html[data-ui="harmonized"] .import-workspace{width:min(100%,1100px);margin-inline:auto;display:grid;gap:var(--ui-space-5)}
html[data-ui="harmonized"] .import-workspace>.heading{margin-bottom:0}
html[data-ui="harmonized"] .import-step-card{display:grid;gap:var(--ui-space-4)}
html[data-ui="harmonized"] .import-step-card>:is(h2,h3,p){margin-block:0}
html[data-ui="harmonized"] .import-step-kicker,.import-step-divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;font-weight:750}
html[data-ui="harmonized"] .import-step-kicker span,.import-step-divider span{display:grid;place-items:center;width:28px;height:28px;border-radius:999px;background:var(--studio-mint);color:var(--studio-mint-ink)}
html[data-ui="harmonized"] .import-step-divider{margin-top:8px;padding-top:20px;border-top:1px solid var(--line);color:var(--ink)}
html[data-ui="harmonized"] .import-step-card input[type=file]{padding:12px;border:1px dashed var(--control-line);border-radius:var(--ui-radius);background:var(--surface-2)}
html[data-ui="harmonized"] .import-step-card .import-resources{display:grid;gap:8px;margin-block:4px}
html[data-ui="harmonized"] .import-list-tools{margin-top:0}
html[data-ui="harmonized"] .import-list-tools>h2{font-size:1.15rem}
@media(max-width:760px){html[data-ui="harmonized"] .production-load-error{margin-block:24px}html[data-ui="harmonized"] .import-workspace{gap:16px}}
/* Context panels keep production tools beside the work instead of replacing it. */
#ui-context-layer{position:fixed;inset:0;z-index:120;display:grid;grid-template-columns:1fr minmax(420px,min(680px,92vw));visibility:hidden;pointer-events:none}
#ui-context-layer[data-open="true"]{visibility:visible;pointer-events:auto}
.ui-context-scrim{grid-column:1/-1;grid-row:1;background:rgb(5 9 12/.58);opacity:0;transition:opacity .18s ease}
#ui-context-layer[data-open="true"] .ui-context-scrim{opacity:1}
.ui-context-panel{grid-column:2;grid-row:1;min-width:0;height:100dvh;overflow:hidden;display:grid;grid-template-rows:auto 1fr;background:var(--paper);border-left:1px solid var(--line);box-shadow:-18px 0 60px rgb(0 0 0/.28);transform:translateX(102%);transition:transform .22s ease}
#ui-context-layer[data-open="true"] .ui-context-panel{transform:translateX(0)}
.ui-context-panel>header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:24px 24px 18px;border-bottom:1px solid var(--line);background:var(--chrome)}
.ui-context-panel>header h2{margin:3px 0 5px;font-size:clamp(1.35rem,2.5vw,1.8rem)}
.ui-context-panel>header p:not(.eyebrow){margin:0;max-width:54ch;color:var(--muted);line-height:1.45}
.ui-context-close{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);font-size:28px;line-height:1;cursor:pointer}
.ui-context-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:24px}
.ui-context-body>.ui-panel-status{margin-top:0}.ui-context-body .reg-list{display:grid;gap:12px}.ui-context-body .panel.pad{padding:18px}
.ui-context-body>header.heading{display:none}
.ui-panel-actions{display:flex;justify-content:flex-end;gap:8px;margin-bottom:16px}
.ui-resource-picker{display:grid;gap:14px;margin-bottom:20px;padding:18px;border:1px solid var(--line);border-radius:var(--ui-radius);background:var(--surface-2)}
.ui-resource-picker h3,.ui-resource-picker p{margin:0}.ui-resource-picker>div>p{margin-top:4px;color:var(--muted)}
.ui-picker-search{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:10px}.ui-picker-list{display:grid;max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:9px}
.ui-picker-list>label{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer}.ui-picker-list>label:last-child{border-bottom:0}.ui-picker-list small{display:block;color:var(--muted);margin-top:2px}
.ui-picker-assign{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px}.ui-picker-assign .button{min-width:140px}
.ui-context-body .heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.ui-context-body .heading h2{margin:0}
.ui-context-body .reg-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ui-context-body .ui-empty-state{margin-top:8px}
.import-current-version{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:16px 18px;border:1px solid var(--line);border-radius:var(--ui-radius);background:var(--surface-2)}
.import-current-version p,.import-current-version strong{margin:0}.import-current-version small{display:block;margin-top:4px;color:var(--muted)}
.import-revision{display:grid;gap:14px;padding:18px;border-left:3px solid var(--studio-lilac-ink);border-radius:0 var(--ui-radius) var(--ui-radius) 0;background:color-mix(in srgb,var(--studio-lilac) 42%,transparent)}
.import-revision>:is(h3,p){margin:0}.import-revision-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.import-revision-summary>span{padding:10px;border:1px solid var(--line);border-radius:8px;text-align:center}.import-revision-summary strong{display:block;font-size:1.25rem}
@media(max-width:760px){#ui-context-layer{grid-template-columns:1fr}.ui-context-panel{grid-column:1;width:100%;border-left:0}.ui-context-panel>header,.ui-context-body{padding:16px}.import-current-version{grid-template-columns:1fr}.import-revision-summary{grid-template-columns:1fr 1fr 1fr}.ui-picker-search,.ui-picker-assign{grid-template-columns:1fr}.ui-picker-assign .button{width:100%}.has-context-panel{overflow:hidden}}