/* New workspaces use the existing phone palette and local asset system. */
.workspace-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px}
.workspace-grid .surface{min-width:0}
.workspace-grid h2{margin-bottom:14px}
.workspace-actions{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0}
.workspace-grid label{display:block;color:var(--muted);margin:20px 0 8px}
.workspace-grid textarea{display:block;width:100%;resize:vertical;background:var(--surface2);color:var(--ink);border:1px solid var(--border);border-radius:12px;padding:14px;font:inherit;min-height:120px}
.workspace-grid textarea::placeholder{color:var(--muted)}
.draft-list{padding:0;list-style:none;display:grid;gap:12px;max-height:420px;overflow:auto}
.draft-message{padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface2);white-space:pre-wrap;overflow-wrap:anywhere}
.privacy-state{display:grid;grid-template-columns:1fr 1fr;gap:14px 8px;font-size:.9rem}
.privacy-state dt{color:var(--muted)}.privacy-state dd{margin:0;font-weight:650}
.capability-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.capability-card{padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:16px;min-width:0}
.capability-card h2{line-height:1.4;font-size:1.05rem}.capability-control{color:var(--muted);font-size:.88rem;margin:8px 0 15px}
.capability-card details{margin:14px 0;font-size:.82rem}.capability-card summary{cursor:pointer;line-height:1.5;color:var(--muted)}
.capability-card .results-label{overflow-wrap:anywhere}.capability-card button{min-height:44px}.capability-card button:disabled{cursor:default;opacity:.65}
.nav-icon{height:20px;flex:none}.nav{margin-bottom:22px}
@media(max-width:890px){.nav{display:flex;overflow-x:auto;max-width:100%;padding:3px 2px 8px;gap:6px;scrollbar-width:thin}.nav-item{flex:0 0 auto;width:auto;min-height:44px;padding:10px 13px;white-space:nowrap}.nav-item .nav-icon{display:none}.nav-number{margin-left:0}.workspace-grid{grid-template-columns:1fr}.capability-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.capability-card,.draft-message{animation:none;transition:none}}

.presence-rail{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px 18px;margin-bottom:16px}
.presence-rail-identity{display:flex;gap:10px;align-items:center}.presence-rail-identity img{object-fit:contain;border-radius:50%}.presence-rail-identity div{display:grid;gap:3px}.presence-rail-identity strong{font-size:.95rem}.presence-rail-identity span{color:var(--muted);font-size:.78rem}
.presence-rail-privacy{color:var(--muted);font-size:.8rem;margin:0;flex:1;min-width:170px}.presence-rail-actions{display:flex;flex-wrap:wrap;gap:8px}.presence-rail-actions button{min-height:44px;padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);color:var(--ink);font:inherit;font-size:.8rem}.presence-rail-actions span{color:var(--gold)}
@media(max-width:630px){.presence-rail{padding:13px;gap:12px}.presence-rail-privacy{flex-basis:100%;min-width:0}.presence-rail-actions{width:100%;gap:7px}.presence-rail-actions button{flex:1;font-size:.75rem;padding:8px}}

.foundation-panel{margin-top:20px}.foundation-panel h3{font-size:1rem;overflow-wrap:anywhere}.foundation-panel .capability-grid{margin-top:18px}

.ods-catalogue{margin-top:20px}.ods-catalogue summary{min-height:44px;padding:12px 0}.ods-catalogue label{display:block;margin:12px 0}.ods-catalogue input{display:block;width:100%;margin-top:8px}


.engineering-surfaces,.tools-receipts{margin-top:20px}
.engineering-surfaces>label{display:block;margin:18px 0 8px;color:var(--muted)}
.engineering-surfaces input{display:block;width:100%;margin-top:8px;min-height:44px}
.engineering-statuses{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:10px;font-size:.85rem;line-height:1.6;margin:16px 0}
.engineering-statuses dt{color:var(--muted)}.engineering-statuses dd{margin:0;overflow-wrap:anywhere}
.engineering-card h3{font-size:1rem;line-height:1.5}.engineering-card summary,.tool-receipt summary{min-height:44px;padding:12px 0}
#tools-refresh{min-height:44px;flex-shrink:0}#tools-refresh:disabled{opacity:.6;cursor:default}
#page-tools .surface-head{gap:16px;flex-wrap:wrap}.tool-receipt p{overflow-wrap:anywhere}
#page-tools button:focus-visible,.engineering-card button:focus-visible,.engineering-card summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Accessible mobile-friendly links; static fragment navigation when scripts are blocked. */
.nav-item{text-decoration:none;cursor:pointer}
a[data-page]:not(.nav-item){cursor:pointer;text-decoration:none}
.presence-rail-actions a[data-page]{min-height:44px;padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);color:var(--ink);font:inherit;font-size:.8rem;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.js-health{padding:12px 16px;margin-top:-20px;margin-bottom:24px;border:1px solid var(--gold);border-radius:10px;background:var(--surface);color:var(--ink);font-size:.85rem}
html[data-js-ready="true"] .js-health{display:none}
/* Native fragment fallback ONLY before JavaScript initializes.
   Once the app runs, hidden panel state is authoritative; history.replaceState
   does not consistently refresh :target in Chromium. */
@supports selector(body:has(.panel-page:target)) {
  :root:not([data-js-ready="true"]) body:has(.panel-page:target) .panel-page{display:none!important}
  :root:not([data-js-ready="true"]) body:has(.panel-page:target) .panel-page:target{display:block!important}
}

/* Real connection status. Demo-online is not production-ready. */
.preview-connectivity{margin:0 0 24px}
.preview-connectivity .surface-head{flex-wrap:wrap}
.preview-module-list{padding:0;margin:18px 0 0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.preview-module-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--border);padding:12px 14px;border-radius:10px;min-width:0;font-size:.78rem}
.preview-module-list strong{font-weight:650;overflow-wrap:anywhere}
.preview-module-list span{font-size:.7rem;text-align:right;color:var(--muted);max-width:46%}
.preview-status-demo_only,.preview-status-reference_only,.preview-status-draft_only{color:var(--gold)!important}
@media(max-width:690px){.preview-module-list{grid-template-columns:1fr}.preview-connectivity .surface-head button{width:100%;min-height:44px}}

/* Scoped, non-AI 2.5D presence. Face and mouth travel as one image rig. */
.avatar-figure{position:relative;z-index:1;width:100%;height:100%;transform-origin:50% 78%;animation:chisan-idle 5.8s ease-in-out infinite}
.avatar-figure .companion-portrait{width:100%;height:100%;display:block;animation:none!important}
.avatar-mouth{position:absolute;z-index:3;pointer-events:none;height:auto;aspect-ratio:4.1/1;transform:translate(-50%,-52%) scaleY(.06);transform-origin:50% 30%;border-radius:55% 55% 48% 48%;background:radial-gradient(ellipse at 49% 51%,#281016 0%,#361b23 49%,#6d353d 78%,#ad6570 97%);border-top:1px solid #7f4846;opacity:0;filter:blur(.2px)}
.avatar-mouth[hidden]{display:none!important}
.companion-card[data-speech-state="speaking"] .avatar-figure,.companion-card[data-voice-preview="motion"] .avatar-figure{animation:chisan-gesture 2.4s ease-in-out infinite}
.companion-card[data-speech-state="speaking"] .avatar-mouth,.companion-card[data-voice-preview="motion"] .avatar-mouth{opacity:.92;animation:chisan-jaw 275ms ease-in-out infinite}
@keyframes chisan-idle{0%,100%{transform:translateY(0) rotate(0deg) scale(1)}48%{transform:translateY(-3px) rotate(-.2deg) scale(1.007)}75%{transform:translateY(-1px) rotate(.12deg) scale(1.004)}}
@keyframes chisan-gesture{0%,100%{transform:translateY(0) rotate(0deg)}30%{transform:translateY(-4px) rotate(-.4deg)}60%{transform:translateY(-2px) rotate(.4deg)}}
@keyframes chisan-jaw{0%,100%{transform:translate(-50%,-52%) scaleY(.17)}22%{transform:translate(-50%,-50%) scaleY(.72)}48%{transform:translate(-50%,-49%) scaleY(1.12)}70%{transform:translate(-50%,-50%) scaleY(.45)}}
.voice-pick-label{display:block;text-align:left;margin:13px 0 5px;font-size:.75rem;color:var(--muted);font-weight:650}
.local-voice-selector{display:block;width:100%;min-height:42px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--ink);padding:10px;font:inherit;font-size:.78rem}
.local-voice-selector:disabled{opacity:.6}
.companion-controls .voice-status{text-align:left;font-size:.71rem;line-height:1.45;margin:6px 0 0;color:var(--muted)}
.presence-move{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:14px}
.presence-move button{min-height:44px;min-width:80px}
.presence-move button[aria-pressed="true"]{background:var(--surface2);border-color:var(--gold)}
@media(max-width:630px){.presence-move button{min-width:0;flex:1 1 30%;padding:8px 5px;font-size:.68rem}.voice-pick-label{font-size:.74rem}}
@media(prefers-reduced-motion:reduce){.avatar-figure,.companion-card[data-speech-state="speaking"] .avatar-figure,.companion-card[data-voice-preview="motion"] .avatar-figure,.avatar-mouth{animation:none!important}.avatar-mouth{opacity:0!important}}

/* All module badges are navigable, including on smaller phones. */
.preview-module-list li{flex-wrap:wrap}
.preview-module-link{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-height:40px;min-width:80px;padding:5px 9px;border-radius:999px;border:1px solid var(--border);font-size:.72rem;font-weight:650;color:var(--ink);text-decoration:none;background:var(--surface2)}
.preview-module-link:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(max-width:560px){.preview-module-list li{gap:8px}.preview-module-link{width:100%;margin:3px 0 0}}