/* Motion, background, first-paint placeholders and the compact system sheet. */
body { position:relative; isolation:isolate; background:var(--bg); }
.topbar { background:var(--bg); }
.app-shell { position:relative; z-index:1; }
.panel { background:var(--panel-solid); }
.ambient-surface { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.ambient-surface::after { content:""; position:absolute; inset:0; opacity:.16; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.7' d='M0 0h160v160H0z'/%3E%3C/svg%3E"); background-size:160px 160px; }
.ambient-light { position:absolute; width:115vw; height:100vh; left:-15vw; top:0; opacity:.065; background:radial-gradient(ellipse at 22% 44%,#ea5865 0,transparent 34%),radial-gradient(ellipse at 42% 58%,#eab93f 0,transparent 32%),radial-gradient(ellipse at 61% 50%,#45a474 0,transparent 33%),radial-gradient(ellipse at 78% 42%,#477ff3 0,transparent 33%),radial-gradient(ellipse at 87% 65%,#8966cb 0,transparent 30%); }
.ambient-light:nth-child(2) { top:30vh; left:-3vw; transform:rotate(-19deg); opacity:.035; }
html[data-theme="dark"] .ambient-surface::after { opacity:.115; mix-blend-mode:screen; }
html[data-theme="dark"] .ambient-light { opacity:.07; }
/* A short reveal, not a simulated wait for the embedded dataset. */
html[data-boot="ready"] .topbar { animation:spectrum-in 180ms ease-out both; }
html[data-boot="ready"] .panel { animation:spectrum-in 240ms 90ms ease-out both; }
html[data-boot="ready"] .detail-panel { animation-delay:120ms; }
html[data-boot="ready"] .capability-panel { animation-delay:150ms; }
#catalogList,#detailContent { position:relative; }
.content-arrived > :not(.loading-veil) { animation:spectrum-in 240ms 150ms ease-out both; }
.loading-veil { position:absolute; inset:0; z-index:4; pointer-events:none; background:var(--panel-solid); animation:spectrum-out 260ms 80ms ease both; overflow:hidden; }
.skeleton { display:grid; gap:14px; padding:16px; width:100%; }
.skeleton span { display:block; height:10px; border-radius:6px; background:var(--line); }
.skeleton span:nth-child(2n) { width:68%; }
.skeleton .sk-card { height:65px; width:100%; border-radius:12px; opacity:.58; }
.skeleton .sk-hero { height:300px; width:100%; opacity:.46; border-radius:18px; }
.skeleton .sk-title { height:24px; width:53%; }
.skeleton .sk-summary { height:38px; width:100%; }
[data-loading-region] .skeleton { animation:skeleton-breathe 1600ms ease-in-out infinite alternate; }
@keyframes skeleton-breathe { to { opacity:.5; } }
#capabilityList,#summaryPanel { position:relative; }
.is-busy::after { content:""; position:absolute; z-index:3; right:12px; top:12px; width:12px; height:12px; border:1.5px solid var(--line-strong); border-top-color:var(--ink); border-radius:50%; animation:region-spin 700ms linear infinite; }
@keyframes region-spin { to { transform:rotate(360deg); } }
.boot-error { position:fixed; z-index:200; inset:auto 16px 16px; max-width:540px; margin-inline:auto; padding:15px; background:var(--panel-solid); border:1px solid var(--line-strong); border-radius:12px; font-size:var(--font-small); box-shadow:var(--shadow); }
.boot-error a { color:inherit; }
.detail-idle { min-height:380px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--quiet); }
.detail-idle > .icon { width:30px; height:30px; margin-bottom:18px; }
.detail-idle h1 { font-size:var(--font-title); color:var(--muted); margin:0 0 9px; font-weight:500; letter-spacing:-.04em; }
.detail-idle p { font-size:var(--font-body); margin:0; }
#detailContent h1:focus { outline:none; }
.domain-initial { display:none; }
#systemToggle { flex:none; }
.system-backdrop { position:fixed; inset:0; background:rgba(16,19,23,.18); z-index:60; opacity:0; pointer-events:none; transition:none; }
.system-backdrop.is-visible { opacity:1; pointer-events:auto; }
.system-backdrop[hidden] { display:none; }
.mobile-detail-nav { display:none; }
.catalog-filters { display:grid; gap:8px; }
@media (min-width:721px) and (max-width:1150px) {
 .domain-name { display:none; }.domain-initial { display:inline; }
}
@media (max-width:720px) {
 .domain-filters.is-abbreviated .domain-name { display:none; }
 .domain-filters.is-abbreviated .domain-initial { display:inline; }
}
@media(max-width:1150px) {
 :root { --sheet-peek:46px; }
 .workspace { padding-bottom:calc(var(--sheet-peek) + env(safe-area-inset-bottom) + 14px); height:calc(100dvh - 66px); min-height:540px; }
 .capability-panel { position:fixed; z-index:70; left:var(--sheet-left,10px); right:auto; bottom:0; width:var(--sheet-width,calc(100% - 20px)); height:calc(100dvh - var(--sheet-top,76px) - env(safe-area-inset-top)); min-height:0; max-height:calc(100dvh - var(--sheet-top,76px) - env(safe-area-inset-top)); border:1px solid var(--line-strong); border-radius:20px 20px 0 0; transform:translateY(calc(100% - var(--sheet-peek) - env(safe-area-inset-bottom))); transition:box-shadow 260ms ease-out; overflow:visible; grid-template-rows:auto minmax(0,1fr) auto auto; padding-bottom:env(safe-area-inset-bottom); background:var(--panel-solid); box-shadow:0 -4px 24px rgba(15,20,18,.13),0 -1px 4px rgba(15,20,18,.05); backdrop-filter:none; -webkit-backdrop-filter:none; }
 .capability-panel.sheet-open { transform:translateY(0); }
 /* The sheet is opaque. Avoid nested live backdrop blurs inside a moving
    transform layer, which can flicker or rerasterize in WebKit. Glass remains
    on the stationary headers and scroll controls elsewhere in the app. */
 .capability-panel .summary-panel { backdrop-filter:none; -webkit-backdrop-filter:none; }
 /* Keep the open sheet's elevation below its rim instead of projecting a
    broad upward shadow over Safari's top safe area. Retain through the close
    travel, then return to the compact dock's shallow upward shadow. */
 .capability-panel.sheet-raised { box-shadow:0 18px 26px -18px rgba(15,20,18,.18); }
 html[data-theme="dark"] .capability-panel { box-shadow:0 -4px 24px rgba(0,0,0,.3); }
 html[data-theme="dark"] .capability-panel.sheet-raised { box-shadow:0 18px 26px -18px rgba(0,0,0,.42); }
 .capability-panel .scenario-panel { padding:0 16px 12px; border-radius:19px 19px 0 0; cursor:pointer; }
 .capability-panel.sheet-open .scenario-panel { cursor:default; }
 .scenario-top { position:relative; height:var(--sheet-peek); min-height:var(--sheet-peek); margin-bottom:0; padding-top:12px; padding-bottom:0; touch-action:pan-x pinch-zoom; user-select:none; -webkit-user-select:none; cursor:grab; }
 .scenario-top::before { content:""; position:absolute; top:5px; left:50%; transform:translateX(-50%); width:32px; height:4px; border-radius:999px; background:var(--muted); opacity:.45; pointer-events:none; }
 .sheet-dragging .scenario-top { cursor:grabbing; }
 /* The collapsed dock includes the home-indicator area. Keep that space below
    the title row so the inert scenario fields cannot peek into the viewport. */
 /* Do not resize the header mid-flight while the sheet is closing. */
 .capability-panel:not(.sheet-open):not(.sheet-transiting) .scenario-top { height:calc(var(--sheet-peek) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); }
 /* Keep the sheet perimeter subtle; emphasize the occupied tab controls. */
 .capability-panel:not(.sheet-open):has(.foundation-count[data-empty="false"]) :is(.scenario-title,#systemToggle) {
   color:var(--ink);
 }
 /* The count stays in ink even while the Plan sheet is expanded. */
 .capability-panel .foundation-count[data-empty="false"] {
   color:var(--ink);
   border-color:var(--ink);
 }
 .scenario-title { font-size:var(--font-heading); font-weight:650; letter-spacing:-.04em; }
 .scenario-actions { gap:5px; }
 #systemToggle { width:30px; height:32px; min-height:32px; margin-left:5px; }
 .system-sheet-open,.system-sheet-open body { overflow:hidden; }
 .capability-panel .select-menu { position:absolute; z-index:80; }
 /* Newly planned entries appear after the sheet rises; changed values settle visibly. */
 .tray-item.is-entering{animation:foundation-item-enter 380ms cubic-bezier(.2,.7,.2,1) both}
 .is-plan-updated{animation:foundation-value-update 440ms ease-out both}
 @keyframes foundation-item-enter{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
 @keyframes foundation-value-update{from{opacity:.4}to{opacity:1}}
 @media(prefers-reduced-motion:reduce){.tray-item.is-entering,.is-plan-updated{animation:none}}
 .iso-stage { min-height:262px; padding-block:34px 30px; }
 .iso-stage > svg { height:196px; max-height:196px; margin:0; }
 .hero { min-height:0; gap:9px; padding-bottom:14px; }
 .hero-copy { padding-block:0; }
 .hero h1 { font-size:var(--font-display); margin-block:7px; }
 .iso-topline { top:10px; }
 .occupancy-label { bottom:8px; }
 .detail-idle { min-height:290px; }
}
@media(max-height:600px) and (max-width:1150px) {
 .scenario-grid { gap:5px; }.profile-row { margin-top:5px; }
 .scenario-panel .field > label { margin-bottom:3px; }
 .capability-panel .scenario-panel { padding-bottom:7px; }
 .summary-panel { padding-block:7px; }
}
@media(prefers-reduced-motion:reduce) {
 .content-arrived > *,html[data-boot="ready"] .topbar,html[data-boot="ready"] .panel,.skeleton { animation:none !important; }
 .capability-panel,.system-backdrop { transition:none !important; }
 .loading-veil { display:none !important; }
 .is-busy::after { animation:none; }
}
@media(forced-colors:active) {
 .ambient-surface { display:none; }.system-backdrop { background:Canvas; }.capability-panel { border:1px solid CanvasText; }
}
/* The brand yields space before action targets do on narrow phone viewports. */
.app-shell { grid-template-columns:minmax(0,1fr); }
.topbar { min-width:0; }
@media(max-width:380px) {
 .brand-title { font-size:var(--font-compact); }
 .brand-home { gap:6px; }
 .topbar { gap:6px; }
}
@media(max-width:720px) {
 .brand-app { display:none !important; }
}