:root {
  color-scheme: dark;
  --bg:#080b11; --surface:#0f141d; --raised:#151d29; --hover:#1b2634;
  --border:#273344; --border-strong:#3b4b5f; --text:#f0f5fc; --muted:#a0adbd;
  --subtle:#728096; --accent:#68a9ff; --accent-strong:#9dc6ff; --success:#58d6a0;
  --warning:#f3c56f; --danger:#ff7584; --focus:#a8cdff; --nav:238px; --inspector:350px;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
}
html[data-theme="light"] { color-scheme:light; --bg:#f3f6fa; --surface:#fff; --raised:#f8fafc; --hover:#edf2f8; --border:#d8e0e9; --border-strong:#aab7c7; --text:#192330; --muted:#536275; --subtle:#748397; --accent:#256fc2; --accent-strong:#175aa5; --success:#177449; --warning:#8d5b00; --danger:#c4364a; --focus:#175aa5; }
* { box-sizing:border-box; }
body { margin:0; min-width:0; min-height:100vh; color:var(--text); background:radial-gradient(ellipse at 76% -20%,rgba(75,120,190,.16),transparent 42%),var(--bg); }
button,input,select { font:inherit; }
button,select { color:var(--text); }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
a { color:inherit; text-decoration:none; }
.shell { min-height:100vh; display:grid; grid-template-columns:var(--nav) minmax(0,1fr); grid-template-rows:68px minmax(calc(100vh - 106px),1fr) 38px; }
.topbar { grid-column:1/-1; position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:24px; padding:0 24px; border-bottom:1px solid var(--border); background:color-mix(in srgb,var(--surface) 92%,transparent); backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; gap:10px; width:190px; font-size:16px; font-weight:800; letter-spacing:-.04em; }
.brand-mark { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; color:#06101d; background:linear-gradient(135deg,#93c4ff,#596fea); font-size:10px; font-weight:800; letter-spacing:-.04em; box-shadow:0 0 20px rgba(104,169,255,.24); }
.instance-line { display:flex; flex-direction:column; gap:2px; min-width:0; }
.instance-label,.panel-kicker,.card-overline,.nav-caption,.eyebrow,.gate-kicker { color:var(--subtle); font-family:"DM Mono",ui-monospace,monospace; font-size:10px; letter-spacing:.13em; text-transform:uppercase; }
.instance-value { max-width:min(54vw,660px); min-width:0; overflow-wrap:anywhere; color:var(--muted); font-size:11px; white-space:normal; }
.top-actions { display:flex; align-items:center; gap:14px; margin-left:auto; }
.user-chip { min-width:0; max-width:180px; overflow-wrap:anywhere; white-space:normal; padding:7px 10px; border:1px solid var(--border); border-radius:7px; color:var(--muted); font-family:"DM Mono",monospace; font-size:11px; }
.theme-picker select { padding:7px 25px 7px 9px; border:1px solid var(--border); border-radius:7px; background:var(--surface); font-size:11px; }
.sidebar { grid-row:2; display:flex; flex-direction:column; gap:4px; padding:26px 13px; border-right:1px solid var(--border); background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface) 80%,transparent)); }
.nav-caption { padding:0 12px 12px; }
.nav-item { width:100%; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:11px 12px; border:1px solid transparent; border-radius:8px; color:var(--muted); background:transparent; text-align:left; font-size:12px; font-weight:600; transition:background .15s,border-color .15s,color .15s; }
.nav-item:hover { background:var(--hover); color:var(--text); }
.nav-item.active { border-color:color-mix(in srgb,var(--accent) 24%,transparent); color:var(--text); background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 15%,transparent),color-mix(in srgb,var(--accent) 3%,transparent)); box-shadow:inset 2px 0 var(--accent); }
.nav-item.gated { opacity:.52; }
.nav-more { display:none; }
.nav-label { min-width:0; flex:1 1 52px; }
.nav-capability { flex:0 1 auto; }
.nav-capability,.nav-qualification { margin-left:auto; }
.nav-capability-dot { width:6px; height:6px; flex:0 0 6px; border-radius:50%; background:currentColor; }
.nav-capability-label,.nav-qualification-label { white-space:nowrap; }
.nav-qualification { margin-left:0; }
.nav-index,.roadmap-index { color:var(--subtle); font-family:"DM Mono",monospace; font-size:10px; }
.nav-lock { margin-left:auto; color:var(--subtle); font-family:"DM Mono",monospace; font-size:9px; }
.sidebar-note { display:flex; align-items:center; gap:9px; margin-top:auto; padding:13px 11px 4px; border-top:1px solid var(--border); color:var(--subtle); font-size:10px; }
.note-dot,.status-dot { width:7px; height:7px; border-radius:50%; background:var(--subtle); }
.workspace { grid-row:2; min-width:0; padding:clamp(20px,3vw,32px) clamp(16px,2.2vw,32px) clamp(28px,3vw,44px); overflow:visible; container-name:workspace; container-type:inline-size; }
.statusbar { grid-column:1/-1; display:flex; align-items:center; gap:22px; padding:0 20px; border-top:1px solid var(--border); color:var(--subtle); background:var(--surface); font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.02em; }
.statusbar span:first-child { display:flex; align-items:center; gap:8px; color:var(--muted); }
.statusbar span:last-child { margin-left:auto; }
.status-dot.online { background:var(--success); box-shadow:0 0 9px color-mix(in srgb,var(--success) 65%,transparent); }
.badge { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border:1px solid var(--border-strong); border-radius:999px; color:var(--muted); font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.04em; white-space:nowrap; }
.badge.success { border-color:color-mix(in srgb,var(--success) 35%,var(--border)); color:var(--success); background:color-mix(in srgb,var(--success) 8%,transparent); }
.badge.warning { border-color:color-mix(in srgb,var(--warning) 42%,var(--border)); color:var(--warning); background:color-mix(in srgb,var(--warning) 8%,transparent); }
.badge.error { border-color:color-mix(in srgb,var(--danger) 45%,var(--border)); color:var(--danger); background:color-mix(in srgb,var(--danger) 8%,transparent); }
.badge.accent { border-color:color-mix(in srgb,var(--accent) 35%,var(--border)); color:var(--accent-strong); }
.badge.muted { color:var(--subtle); }
.page-header { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin:0 0 26px; }
.page-header-copy { min-width:0; }
.page-title-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.page-title-row h1 { margin-bottom:0; }
.page-title-row + p { margin-top:6px; }
.page-header-meta { display:grid; justify-items:end; gap:8px; }
.concept-help { max-width:min(420px,80vw); color:var(--muted); font-size:10px; text-align:right; }
.concept-help summary { cursor:pointer; color:var(--accent); }
.concept-help-primary { position:relative; max-width:min(520px,90vw); text-align:left; }
.concept-help-primary summary { display:inline-flex; align-items:center; min-height:30px; padding:5px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); font-size:11px; font-weight:700; letter-spacing:.02em; list-style:none; }
.concept-help-primary summary::-webkit-details-marker { display:none; }
.concept-help-primary summary::before { content:"?"; display:grid; place-items:center; width:16px; height:16px; margin-right:6px; border:1px solid currentColor; border-radius:50%; font-size:10px; }
.concept-help-primary[open] summary { border-color:var(--accent); }
.concept-help-primary ul { position:absolute; z-index:8; top:calc(100% + 6px); left:0; width:min(520px,90vw); margin-top:0; box-shadow:0 14px 36px rgba(0,0,0,.24); }
.concept-help ul { margin:8px 0 0; padding:10px 12px 10px 28px; border:1px solid var(--border); border-radius:8px; background:var(--surface); text-align:left; line-height:1.55; }
.concept-help li+li { margin-top:7px; }
.concept-help .concept-explanations { max-height:min(440px,60dvh); overflow-y:auto; overflow-wrap:anywhere; font-size:12px; }
.concept-explanations a { color:var(--accent); white-space:nowrap; }
.button.quiet.learning-toggle { min-height:44px; }
.learning-toggle[aria-pressed="true"] { border-color:var(--border-strong); background:var(--raised); }
.learning-orientation { margin:-8px 0 24px; padding:14px 16px; border:1px solid var(--border); border-inline-start:3px solid var(--subtle); border-radius:12px; background:var(--surface); font-size:13px; }
.learning-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.learning-orientation p { color:var(--muted); line-height:1.6; margin:8px 0; }
.learning-help { min-width:0; max-width:100%; margin:6px 0; font-size:12px; color:var(--muted); }
.learning-help summary { display:flex; align-items:center; min-height:44px; padding:8px 10px; cursor:pointer; border:1px solid var(--border); border-radius:8px; color:var(--text); background:var(--raised); line-height:1.4; overflow-wrap:anywhere; }
.learning-help summary::before { content:"+"; margin-inline-end:8px; font-weight:700; }
.learning-help[open] > summary::before { content:"−"; }
.learning-help summary:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.learning-copy { padding:4px 10px 10px; border-inline-start:1px solid var(--border); line-height:1.6; overflow-wrap:anywhere; }
.learning-copy p { margin:8px 0; }
.learning-copy a { text-decoration:underline; }
.learning-help ol { margin:10px 0; padding-inline-start:24px; line-height:1.7; }
.learning-help li + li { margin-top:8px; }
.detail-grid dt:has(.learning-help[open]), .detail-grid dt:has(.learning-help[open]) + dd { grid-column:1 / -1; }
.identity-grid dt:has(.learning-help[open]), .identity-grid dt:has(.learning-help[open]) + dd { grid-column:1 / -1; }
.detail-grid .learning-help > summary, .identity-grid .learning-help > summary { padding-inline:6px; font-size:11px; }
.detail-grid .learning-help > summary::before, .identity-grid .learning-help > summary::before { margin-inline-end:4px; }
.learning-lifecycle { border-inline-start:2px solid var(--border); }
.learning-heading .button.quiet { min-height:44px; }
.snippet-library { margin-top:0; }
.snippet-library.concept-help-primary summary::before { content:"</>"; display:inline; width:auto; height:auto; margin-right:7px; border:0; border-radius:0; font-family:"DM Mono",monospace; font-size:10px; }
.snippet-select { border:0; padding:0; color:var(--accent); background:transparent; text-align:left; cursor:pointer; font:inherit; }
.snippet-body { max-width:min(700px,84vw); margin-top:8px; padding:10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); text-align:left; }
.snippet-body pre { max-height:260px; overflow:auto; margin:0 0 8px; white-space:pre-wrap; font-size:10px; line-height:1.5; }
.snippet-note,.snippet-error { margin:7px 0 0; font-size:10px; line-height:1.45; }
.snippet-error { color:var(--danger); }
@container workspace (max-width:780px) {
  .concept-help-primary[open] { position:static; flex:0 0 100%; width:100%; max-width:100%; }
  .concept-help-primary[open] ul { position:static; width:min(520px,90vw); max-width:100%; }
}
.eyebrow { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.eyebrow-rule { display:inline-block; width:18px; height:1px; background:var(--accent); }
.page-header h1 { margin:0; font-size:28px; letter-spacing:-.05em; }
.page-header p { margin:7px 0 0; color:var(--muted); font-size:12px; }
.overview-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(310px,.75fr); gap:14px; margin-bottom:14px; }
.panel,.connect-card { border:1px solid var(--border); border-radius:11px; background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 95%,var(--accent) 5%),var(--surface) 42%); box-shadow:0 14px 45px rgba(0,0,0,.12); }
.identity-panel,.read-panel { padding:19px 20px 15px; }
.panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:18px; }
.panel-kicker { margin-bottom:5px; }
.panel h2,.connect-card h2 { margin:0; font-size:15px; letter-spacing:-.025em; }
.identity-grid,.detail-grid { display:grid; grid-template-columns:122px minmax(0,1fr); gap:10px 13px; margin:0; font-size:11px; }
.identity-grid dt,.detail-grid dt { color:var(--subtle); }
.identity-grid dd,.detail-grid dd { min-width:0; margin:0; overflow-wrap:anywhere; color:var(--muted); }
.inline-code,code { padding:2px 5px; border:1px solid var(--border); border-radius:4px; color:var(--accent-strong); background:color-mix(in srgb,var(--surface) 76%,var(--accent) 24%); font-family:"DM Mono",ui-monospace,monospace; font-size:.92em; }
.panel-foot,.inspector-foot { margin-top:17px; padding-top:11px; border-top:1px solid var(--border); color:var(--subtle); font-family:"DM Mono",monospace; font-size:9px; }
.panel-foot code,.inspector-foot code { border:0; background:none; }
.read-metric { display:flex; align-items:baseline; gap:10px; }
.read-metric strong { color:var(--accent-strong); font-size:46px; font-weight:600; letter-spacing:-.07em; line-height:1; }
.read-metric span,.read-summary { color:var(--muted); font-size:11px; }
.read-summary { margin:12px 0 17px; }
.readback-row { display:flex; align-items:center; gap:10px; min-height:28px; }
.readback-row>span:last-child { color:var(--subtle); font-size:10px; }
.button { min-height:32px; padding:0 12px; border:1px solid var(--border-strong); border-radius:7px; background:var(--surface); font-size:10px; font-weight:700; }
.button:hover:not(:disabled) { border-color:var(--accent); }
.button:disabled { cursor:wait; opacity:.62; }
.button.primary { border-color:var(--accent); color:#07111e; background:linear-gradient(120deg,#91c2ff,#6b91f4); }
.button.secondary { color:var(--muted); }
.button.quiet { min-height:28px; color:var(--muted); background:transparent; }
.roadmap-panel { padding:18px 20px 14px; }
.roadmap-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.roadmap-item { min-width:0; display:flex; flex-direction:column; gap:7px; padding:11px 10px; border:1px solid var(--border); border-radius:7px; background:color-mix(in srgb,var(--surface) 55%,transparent); }
.roadmap-item strong { font-size:10px; }
.roadmap-item>span:last-child { color:var(--subtle); font-size:9px; line-height:1.45; }
.roadmap-note { margin:14px 0 0; color:var(--subtle); font-size:10px; }
.app-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; color:var(--muted); font-size:11px; }
.app-toolbar strong { color:var(--text); font-size:18px; letter-spacing:-.04em; }
.toolbar-divider { padding:0 9px; color:var(--subtle); }
.apps-layout { display:grid; grid-template-columns:minmax(0,1fr) var(--inspector); gap:16px; align-items:start; }
.table-panel { min-width:0; overflow:visible; }
.table-panel { container:inventory / inline-size; }
.table-wrap { min-width:0; overflow:visible; }
table { width:100%; min-width:0; border-collapse:collapse; }
th,td { padding:10px 11px; border-bottom:1px solid var(--border); text-align:left; vertical-align:middle; }
th { position:sticky; top:0; color:var(--subtle); background:var(--surface); font-family:"DM Mono",monospace; font-size:9px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; }
td { color:var(--muted); font-size:10px; }
.app-row { cursor:pointer; transition:background .12s; }
.app-row:hover { background:var(--hover); }
.app-row.selected { background:color-mix(in srgb,var(--accent) 8%,var(--surface)); box-shadow:inset 2px 0 var(--accent); }
.app-name { display:block; color:var(--text); font-family:"DM Mono",monospace; font-size:10px; }
.app-sub { display:block; margin-top:4px; color:var(--subtle); font-size:9px; }
.empty-cell { padding:36px; color:var(--subtle); text-align:center; }
.inspector { position:sticky; top:15px; padding:16px; }
.inspector-title { margin-top:11px!important; overflow-wrap:anywhere; font-size:14px!important; }
.inspector-title code { border:0; background:none; padding:0; font-size:inherit; }
.inspector-sub { margin:6px 0 17px; color:var(--subtle); font-size:10px; }
.detail-grid { grid-template-columns:100px minmax(0,1fr); gap:10px; font-size:10px; }
.verification-banner { display:flex; align-items:center; gap:12px; margin-top:13px; padding:13px 15px; border:1px solid var(--border); border-radius:9px; background:var(--surface); }
.verification-banner.verified { border-color:color-mix(in srgb,var(--success) 40%,var(--border)); }
.verification-banner.mismatch { border-color:var(--danger); }
.verification-symbol { width:24px; height:24px; display:grid; flex:none; place-items:center; border-radius:50%; color:var(--accent-strong); background:var(--raised); font-weight:800; }
.verified .verification-symbol { color:var(--success); }
.mismatch .verification-symbol { color:var(--danger); }
.verification-banner strong { font-size:10px; }
.verification-banner p { margin:4px 0 0; color:var(--subtle); font-size:9px; }
.verification-banner>code { margin-left:auto; border:0; background:none; color:var(--subtle); white-space:nowrap; }
.notice { margin:10px 0; padding:10px 12px; border:1px solid var(--border); border-radius:7px; font-size:10px; }
.notice.error { border-color:color-mix(in srgb,var(--danger) 45%,var(--border)); color:var(--danger); background:color-mix(in srgb,var(--danger) 7%,var(--surface)); }
.connect-layout { min-height:min(680px,calc(100vh - 190px)); display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,420px); gap:clamp(30px,7vw,110px); align-items:center; max-width:1120px; margin:0 auto; }
.intro-block h1 { margin:0; font-size:clamp(36px,5vw,60px); line-height:1.04; letter-spacing:-.065em; }
.intro-block h1 span { color:var(--accent-strong); }
.intro-block>p { max-width:500px; margin:17px 0 27px; color:var(--muted); font-size:13px; line-height:1.7; }
.promise-list { display:grid; gap:14px; max-width:490px; }
.promise-list>div { display:flex; align-items:flex-start; gap:10px; color:var(--muted); font-size:10px; line-height:1.6; }
.promise-check { flex:none; color:var(--accent); font-family:"DM Mono",monospace; font-size:9px; }
.connect-card { padding:24px; }
.card-overline { color:var(--accent); }
.connect-card h2 { margin-top:12px; font-size:19px; }
.card-copy { margin:7px 0 18px; color:var(--muted); font-size:10px; line-height:1.5; }
.connect-card label { display:block; margin:14px 0 6px; color:var(--muted); font-size:10px; font-weight:700; }
.connect-card input { width:100%; height:38px; padding:0 10px; border:1px solid var(--border-strong); border-radius:6px; color:var(--text); background:var(--bg); font-size:12px; }
.connect-card input:focus { border-color:var(--accent); }
.connect-button { width:100%; min-height:39px; margin-top:19px; }
.local-only { display:flex; align-items:center; gap:7px; margin-top:14px; color:var(--subtle); font-size:9px; line-height:1.45; }
.lock-icon { color:var(--success); font-size:13px; }
.gate-strip { display:grid; grid-template-columns:1fr auto; gap:5px 15px; max-width:1120px; margin:0 auto; padding:13px 15px; border:1px solid var(--border); border-radius:8px; background:var(--surface); }
.gate-strip>div:first-child { display:flex; align-items:center; gap:12px; }
.gate-strip strong { font-size:10px; }
.gate-strip>p { grid-column:1/-1; margin:0; color:var(--subtle); font-size:9px; }
.gated-panel { max-width:650px; margin:9vh auto; padding:30px; text-align:center; }
.provider-panel { min-width:0; padding:18px 20px 14px; container:source-panel / inline-size; }
.source-tabs { display:flex; flex-wrap:wrap; gap:7px; min-width:0; overflow:visible; margin:0 0 14px; padding-bottom:4px; }
.source-tab { flex:none; min-height:30px; padding:0 11px; border:1px solid var(--border); border-radius:7px; color:var(--muted); background:var(--surface); font-size:10px; }
.source-tab:hover { border-color:var(--border-strong); }
.source-tab.active { border-color:color-mix(in srgb,var(--accent) 55%,var(--border)); color:var(--accent-strong); background:color-mix(in srgb,var(--accent) 10%,var(--surface)); }
.source-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:3px 0 10px; color:var(--muted); font-size:10px; }
.source-toolbar strong { color:var(--text); font-size:20px; }
.provider-layout { display:grid; grid-template-columns:minmax(0,1fr) var(--inspector); gap:16px; align-items:start; }
.provider-row { cursor:pointer; }
.provider-row:hover { background:var(--hover); }
.provider-row.selected { background:color-mix(in srgb,var(--accent) 8%,var(--surface)); box-shadow:inset 2px 0 var(--accent); }
.provider-row td:first-child strong { display:block; color:var(--text); font-size:10px; }
.provider-inspector { position:static; }
.inspector-section { margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
.relationship-block { margin-top:10px; color:var(--muted); font-size:10px; }
.relationship-block>strong { display:flex; align-items:baseline; justify-content:space-between; color:var(--text); }
.relationship-list { display:flex; flex-wrap:wrap; gap:5px; margin:7px 0 0; padding:0; list-style:none; }
.relationship-list > li { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.owner-row { width:100%; justify-content:space-between; padding:5px 7px; border:1px solid var(--border); border-radius:5px; font-size:12px; }
.link-button { padding:4px 6px; border:1px solid var(--border); border-radius:5px; color:var(--accent-strong); background:var(--surface); cursor:pointer; font-size:9px; }
.link-button:hover { border-color:var(--border-strong); background:var(--hover); }
.relationship-item { margin-top:8px; padding:10px; border:1px solid var(--border); border-radius:7px; background:var(--surface); }
.relationship-item>div:first-child strong,.relationship-item>div:first-child span { display:block; }
.relationship-item>div:first-child strong { font-size:10px; }
.relationship-item>div:first-child span { margin-top:4px; color:var(--subtle); font-size:9px; }
.relationship-item .button { margin-top:8px; }
.spec-summary { margin-top:9px; color:var(--muted); font-size:9px; }
.spec-summary strong { display:block; margin-top:3px; color:var(--text); font-size:10px; }
.spec-summary ul { display:grid; gap:4px; margin:8px 0 0; padding-left:15px; }
.spec-summary li { color:var(--subtle); line-height:1.5; }
.spec-summary li code { color:var(--accent-strong); }
.spec-summary p { margin:7px 0 0; color:var(--subtle); }
.source-message { padding:22px 14px; border:1px dashed var(--border-strong); border-radius:8px; color:var(--muted); font-size:11px; }
.source-message p { margin:7px 0; }
.fixed-log-lines { display:grid; gap:6px; max-height:560px; overflow:auto; padding:0; margin:12px 0; list-style:none; }
.fixed-log-lines li { display:grid; grid-template-columns:42px minmax(0,1fr); gap:9px; align-items:start; min-width:0; padding:7px 9px; border:1px solid var(--border); border-radius:6px; }
.fixed-log-lines code { min-width:0; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--text); font-size:10px; }
.log-line-number { color:var(--subtle); font:9px "DM Mono",monospace; }
  .log-analysis { margin:16px 0 10px; padding:14px; border:1px solid var(--border); border-radius:9px; background:color-mix(in srgb,var(--surface) 82%,var(--accent) 4%); }
  .log-analysis-head,.log-finding-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .log-analysis-head h3 { margin:3px 0 0; font-size:15px; }
  .log-findings { display:grid; gap:8px; padding:0; margin:12px 0 0; list-style:none; }
  .log-finding { min-width:0; padding:11px; border:1px solid var(--border); border-radius:7px; background:var(--surface); }
  .log-finding p { margin:7px 0 0; color:var(--muted); font-size:10px; line-height:1.55; overflow-wrap:anywhere; }
  .log-finding code { color:var(--accent-strong); }
.source-error { border-color:color-mix(in srgb,var(--danger) 45%,var(--border)); color:var(--danger); }
.source-error code { display:inline-block; margin-top:5px; }
.metric-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:9px; }
.metric-card { min-width:0; padding:12px; border:1px solid var(--border); border-radius:8px; background:var(--surface); }
.metric-card span { display:block; overflow-wrap:anywhere; color:var(--subtle); font-family:"DM Mono",monospace; font-size:9px; }
.metric-card strong { display:block; margin-top:8px; overflow-wrap:anywhere; font-size:18px; font-weight:600; }
.source-caveat { margin:13px 0 0; color:var(--subtle); font-size:10px; line-height:1.55; }
.gated-mark { display:grid; place-items:center; width:43px; height:43px; margin:0 auto 15px; border:1px solid var(--border-strong); border-radius:50%; color:var(--accent-strong); font-family:"DM Mono",monospace; font-size:10px; }
.gated-panel h2 { font-size:17px; }
.gated-panel p { max-width:450px; margin:10px auto 18px; color:var(--muted); font-size:11px; line-height:1.7; }
.spinner { display:inline-block; width:12px; height:12px; margin-right:7px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .7s linear infinite; vertical-align:-2px; }
@keyframes spin { to { transform:rotate(360deg); } }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

.demo-repo-link { position:fixed; right:18px; bottom:50px; z-index:20; padding:9px 12px; border:1px solid var(--border-strong); border-radius:7px; color:var(--accent-strong); background:color-mix(in srgb,var(--surface) 94%,transparent); box-shadow:0 8px 28px rgba(0,0,0,.24); backdrop-filter:blur(12px); font-size:10px; font-weight:700; }
.demo-repo-link:hover { border-color:var(--accent); background:var(--hover); }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }
@media (max-width:1120px) { :root { --nav:204px; --inspector:310px; } .overview-grid { grid-template-columns:1fr; } .roadmap-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .connect-layout { gap:30px; } }
@media (max-width:820px) { .shell { grid-template-columns:1fr; grid-template-rows:60px auto minmax(calc(100vh - 146px),1fr) 38px; } .topbar { gap:12px; padding:0 13px; } .brand { width:auto; } .instance-line { display:none; } .sidebar { grid-row:2; flex-direction:row; overflow:auto; gap:4px; padding:7px 9px; border-right:0; border-bottom:1px solid var(--border); } .nav-caption,.sidebar-note { display:none; } .nav-item { width:auto; flex:none; gap:7px; padding:8px 10px; font-size:10px; } .nav-index { display:none; } .workspace { grid-row:3; padding:22px 15px 32px; } .statusbar { grid-row:4; gap:9px; padding:0 10px; font-size:8px; } .statusbar span:nth-child(2) { display:none; } .apps-layout,.provider-layout { grid-template-columns:1fr; } .inspector { position:static; } .connect-layout { min-height:auto; grid-template-columns:1fr; padding:25px 0 32px; } .intro-block h1 { font-size:43px; } }
@media (max-width:520px) { .connection-state { display:none; } .top-actions { gap:7px; } .theme-picker select { padding-left:7px; } .workspace { padding:19px 11px 27px; } .page-header h1 { font-size:24px; } .panel-head { margin-bottom:14px; } .identity-panel,.read-panel,.roadmap-panel { padding:15px; } .identity-grid { grid-template-columns:88px 1fr; font-size:10px; } .roadmap-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .app-toolbar { align-items:flex-start; flex-direction:column; } .verification-banner { align-items:flex-start; } .verification-banner>code { display:none; } .gate-strip { grid-template-columns:1fr; } .gate-strip>div:last-of-type { grid-row:2; } .gate-strip>p { grid-row:3; } .statusbar span:last-child { display:none; } }


/* Safe-demo evaluator and evidence surfaces */
.judge-tour { margin:14px 0; padding:18px 20px; }
.judge-tour-copy { max-width:900px; margin:-5px 0 15px; color:var(--muted); font-size:10px; line-height:1.65; }
.judge-tour-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.tour-step { min-width:0; padding:13px; border:1px solid var(--border); border-radius:8px; background:var(--surface); text-align:left; }
.tour-step:hover { border-color:var(--accent); background:var(--hover); }
.tour-step span { display:block; color:var(--accent); font-family:"DM Mono",monospace; font-size:9px; }
.tour-step strong { display:block; margin-top:7px; color:var(--text); font-size:11px; }
.tour-step small { display:block; margin-top:5px; color:var(--subtle); font-size:9px; line-height:1.5; }

.evidence-demo-notice { display:flex; gap:10px; align-items:center; margin:0 0 14px; padding:10px 13px; border:1px solid color-mix(in srgb,var(--warning) 45%,var(--border)); border-radius:8px; color:var(--warning); background:color-mix(in srgb,var(--warning) 7%,var(--surface)); font-size:10px; }
.evidence-demo-notice strong { font-family:"DM Mono",monospace; letter-spacing:.06em; }
.evidence-demo-notice span { color:var(--muted); }
.evidence-flow-panel { padding:18px 20px; }
.evidence-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr; gap:8px; align-items:center; }
.evidence-flow > div { min-width:0; min-height:88px; padding:12px; border:1px solid var(--border); border-radius:8px; background:color-mix(in srgb,var(--surface) 76%,var(--accent) 3%); }
.evidence-flow > b { color:var(--subtle); font-size:14px; font-weight:400; }
.evidence-flow span { display:block; color:var(--accent); font-family:"DM Mono",monospace; font-size:9px; }
.evidence-flow strong { display:block; margin-top:8px; color:var(--text); font-size:10px; }
.evidence-flow small { display:block; margin-top:5px; color:var(--subtle); font-size:9px; }
.evidence-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:14px 0; }
.evidence-card { padding:16px; border:1px solid var(--border); border-radius:9px; background:var(--surface); }
.evidence-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.evidence-card-head > strong { color:var(--text); font-size:11px; }
.evidence-card p { margin:10px 0 8px; color:var(--muted); font-size:10px; line-height:1.6; }
.evidence-card small { color:var(--subtle); font-size:9px; line-height:1.5; }
.evidence-legend { padding:18px 20px; }
.state-legend-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.state-legend-grid > div { padding:12px; border:1px solid var(--border); border-radius:8px; background:color-mix(in srgb,var(--surface) 72%,transparent); }
.state-legend-grid p { margin:9px 0 0; color:var(--subtle); font-size:9px; line-height:1.55; }
.evidence-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.durable-evidence-panel { padding:18px 20px; }
.evidence-toolbar { display:flex; flex-wrap:wrap; align-items:end; gap:8px; margin:14px 0; }
.evidence-toolbar label { display:grid; gap:5px; min-width:min(220px,100%); color:var(--subtle); font-size:9px; text-transform:uppercase; }
.evidence-toolbar input,.evidence-toolbar select { min-height:36px; padding:7px 9px; border:1px solid var(--border); border-radius:6px; color:var(--text); background:var(--surface); }
.evidence-record-list { display:grid; gap:8px; }
.evidence-record { min-width:0; padding:12px; border:1px solid var(--border); border-radius:8px; background:var(--surface); }
.evidence-record > div { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.evidence-record strong { color:var(--text); font-size:11px; }
.evidence-record small { display:block; margin-top:7px; color:var(--subtle); overflow-wrap:anywhere; }
.evidence-record p { margin:8px 0 0; color:var(--muted); font-size:10px; line-height:1.5; }
.application-tabs { margin:0 0 14px; }
.packages-workspace { padding:18px 20px; }
.package-source { display:flex; flex-wrap:wrap; gap:6px; align-items:center; color:var(--subtle); font-size:9px; }
.package-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.package-card { min-width:0; padding:14px; border:1px solid var(--border); border-radius:8px; background:var(--surface); }
.package-card-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; }
.package-card-head strong,.package-card-head small { display:block; }
.package-card-head strong { color:var(--text); font-size:12px; }
.package-card-head small { max-width:60ch; margin-top:5px; color:var(--subtle); line-height:1.45; }
.package-card .detail-grid { margin:12px 0; }
.package-actions { display:flex; flex-wrap:wrap; gap:7px; }
.package-plan-review { margin-top:16px; padding:14px; border:1px solid var(--warning); border-radius:8px; background:color-mix(in srgb,var(--warning) 4%,var(--surface)); }
.package-plan-review h3 { margin:8px 0 12px; color:var(--text); font-size:13px; }
.job-list { display:grid; gap:8px; }
.job-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:12px; padding:12px; border:1px solid var(--border); border-radius:8px; }
.job-row strong,.job-row small { display:block; overflow-wrap:anywhere; }
.job-row p { margin:6px 0; color:var(--muted); font-size:10px; overflow-wrap:anywhere; }
.job-row code { overflow-wrap:anywhere; }
@media (max-width: 600px) { .job-row { grid-template-columns:minmax(0,1fr); } }
.package-plan-facts p { margin:6px 0; color:var(--muted); font-size:10px; overflow-wrap:anywhere; }

@media (max-width:1120px) {
  .judge-tour-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .state-legend-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .evidence-flow { grid-template-columns:1fr; }
  .evidence-flow > b { transform:rotate(90deg); justify-self:center; }
}
@media (max-width:620px) {
  .judge-tour-steps,.evidence-grid,.state-legend-grid { grid-template-columns:1fr; }
  .evidence-demo-notice { align-items:flex-start; flex-direction:column; }
}


/* Evaluator persona storytelling */
.persona-story { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr); gap:18px; margin:14px 0; padding:18px 20px; }
.persona-story-main h2 { margin:5px 0 8px; font-size:18px; letter-spacing:-.03em; }
.persona-story-main p { max-width:720px; margin:0; color:var(--muted); font-size:10px; line-height:1.65; }
.persona-scope { display:grid; gap:11px; align-content:start; }
.persona-scope > div { display:grid; gap:7px; }
.persona-scope strong { color:var(--subtle); font-family:"DM Mono",monospace; font-size:9px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; }
.persona-chips { display:flex; flex-wrap:wrap; gap:5px; }
.persona-hint { grid-column:1/-1; margin:0; padding-top:12px; border-top:1px solid var(--border); color:var(--subtle); font-size:9px; }
.persona-hint strong { color:var(--warning); font-family:"DM Mono",monospace; font-size:9px; }
.source-denied { border-style:dashed; }
.source-denied strong { color:var(--warning); }
@media (max-width:820px) { .persona-story { grid-template-columns:1fr; } }
@media (max-width:520px) { .topbar { gap:7px; } .top-actions { min-width:0; } .user-chip { max-width:70px; } }

/* Shell navigation uses viewport width because it spans the app. Content
   transitions use the actual workspace/component inline size below. */
@media (max-width:980px) {
  .shell { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr) auto; }
  .topbar { grid-column:1; min-width:0; min-height:60px; height:auto; flex-wrap:wrap; gap:8px 12px; padding:8px 12px; }
  .brand { width:auto; min-width:30px; }
  .instance-line { display:none; }
  .top-actions { min-width:0; flex-wrap:wrap; gap:8px; margin-left:auto; }
  .sidebar { grid-row:2; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; overflow:visible; padding:8px 12px; border-right:0; border-bottom:1px solid var(--border); }
  .nav-caption,.sidebar-note { display:none; }
  .nav-item { width:100%; min-width:0; min-height:44px; justify-content:center; gap:6px; padding:7px 4px; text-align:center; font-size:11px; }
  .nav-label { min-width:0; overflow-wrap:anywhere; }
  .nav-capability { margin-left:0; padding:3px 5px; font-size:8px; }
  .nav-capability-dot { width:5px; height:5px; flex-basis:5px; }
  .nav-capability-label { max-width:7ch; overflow:hidden; text-overflow:ellipsis; }
  .nav-qualification { display:none; }
  .nav-index { display:none; }
  .nav-more { display:flex; }
  .nav-secondary { display:none; grid-column:1/-1; justify-content:flex-start; padding:8px 12px; text-align:left; }
  .sidebar.more-open .nav-secondary { display:flex; }
  .workspace { grid-row:3; min-width:0; padding:20px clamp(14px,2.4vw,20px) 30px; overflow:visible; }
  .statusbar { grid-row:4; gap:9px; padding:8px 12px; }
  .statusbar span:nth-child(2) { display:none; }
  .source-tab,.button,.link-button,.tour-step { min-height:44px; }
  .source-toolbar,.panel-head,.page-header,.verification-banner { flex-wrap:wrap; }
  .source-toolbar>*,.panel-head>*,.page-header>*,.verification-banner>* { min-width:0; }
  .detail-grid,.identity-grid { grid-template-columns:minmax(75px,34%) minmax(0,1fr); }
  .inspector,.provider-panel,.source-message,.panel-foot,.inspector-foot,.relationship-item,.spec-summary,.notice { overflow-wrap:anywhere; }
  code,.badge,.user-chip { white-space:normal; overflow-wrap:anywhere; }
  .user-chip { max-width:180px; }
}
@media (max-width:520px) {
  .brand>span:last-child { display:none; }
  .nav-item { font-size:10px; padding-right:2px; padding-left:2px; }
  .nav-capability { gap:3px; padding:2px 4px; font-size:7px; }
  .connection-state { display:none; }
  .top-actions { gap:6px; }
  .theme-picker select { min-height:44px; padding-left:7px; font-size:16px; }
  .topbar .button { padding:0 8px; }
  .user-chip { max-width:110px; }
  .workspace { padding:18px 14px 28px; }
  .page-header h1 { font-size:24px; }
  .panel-head { margin-bottom:14px; }
  .identity-panel,.read-panel,.roadmap-panel { padding:15px; }
  .identity-grid { font-size:10px; }
  .roadmap-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .app-toolbar { align-items:flex-start; flex-direction:column; }
  .verification-banner { align-items:flex-start; }
  .verification-banner>code { display:none; }
  .gate-strip { grid-template-columns:1fr; }
  .gate-strip>div:last-of-type { grid-row:2; }
  .gate-strip>p { grid-row:3; }
  .statusbar span:last-child { display:none; }
  .connect-card input,.connect-button { min-height:44px; font-size:16px; }
  .metric-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr)); }
}

/* Content mode transitions use available workspace width rather than device
   labels. 1000px leaves room for a readable stacked inspector and gutters. */
@container workspace (max-width:1000px) {
  .apps-layout,.provider-layout { grid-template-columns:minmax(0,1fr); gap:14px; }
  .inspector { position:static; }
  .source-tab,.button,.link-button,.tour-step { min-height:44px; }
  .overview-grid,.persona-story { grid-template-columns:minmax(0,1fr); }
  .roadmap-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .judge-tour-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .state-legend-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .evidence-flow { grid-template-columns:minmax(0,1fr); }
  .evidence-flow>b { transform:rotate(90deg); justify-self:center; }
  .connect-layout { grid-template-columns:minmax(0,1fr); gap:24px; }
}
@container workspace (max-width:620px) {
  .judge-tour-steps,.evidence-grid,.state-legend-grid { grid-template-columns:minmax(0,1fr); }
  .package-list { grid-template-columns:minmax(0,1fr); }
  .evidence-demo-notice { align-items:flex-start; flex-direction:column; }
  .roadmap-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* A 700px inventory can display the meaningful desktop columns; below that,
   each record becomes a labeled card and the full row remains in its detail. */
@container inventory (max-width:700px) {
  .table-wrap { overflow:visible; }
  table { min-width:0; width:100%; display:block; }
  thead { display:none; }
  tbody { display:grid; gap:10px; padding:10px; }
  .app-row,.provider-row { min-width:0; display:grid; gap:7px; padding:12px; border:1px solid var(--border); border-radius:8px; background:var(--surface); }
  .app-row.selected,.provider-row.selected { border-color:var(--accent); box-shadow:inset 3px 0 var(--accent); }
  .app-row td,.provider-row td { min-width:0; display:grid; grid-template-columns:minmax(74px,32%) minmax(0,1fr); gap:8px; align-items:start; padding:0; border:0; overflow-wrap:anywhere; }
  .app-row td::before,.provider-row td::before { content:attr(data-label); color:var(--subtle); font-family:"DM Mono",monospace; font-size:9px; text-transform:uppercase; }
  .app-row td:first-child,.provider-row td:first-child { display:block; color:var(--text); }
  .app-row td:first-child::before,.provider-row td:first-child::before { display:none; }
  .app-row td:nth-child(n+4),.provider-row td:nth-child(n+5) { display:none; }
  tbody tr:has(.empty-cell) { display:block; }
  .empty-cell { display:block; padding:16px; }
}
@container source-panel (max-width:760px) {
  .source-tabs { gap:8px; }
  .source-tab { flex:1 1 150px; max-width:100%; min-height:44px; }
}
.system-sections { display: flex; gap: 8px; margin-bottom: 16px; }
.about-panel { max-width: 760px; }
.about-panel h2 { margin: 8px 0 0; font-size: 1.8rem; }
.about-version { margin: 4px 0 16px; color: var(--text-muted); font-size: 1.1rem; }
.about-details { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 14px; }
.about-details summary { cursor: pointer; color: var(--text); font-weight: 600; }
.about-details .detail-grid { margin-top: 16px; }
.evidence-product-identity { margin: 0 0 12px; }

/* Optional FX projector uses only decorative tokens. Canonical state colors above remain authoritative. */
html[data-fx-material] body { background:radial-gradient(ellipse at 82% -12%,rgba(var(--fx-tint),var(--fx-intensity)),transparent 58%),radial-gradient(ellipse at 0 65%,rgba(var(--fx-secondary),var(--fx-intensity)),transparent 62%),var(--bg); }
html[data-fx-material] .panel,html[data-fx-material] .inspector { border-radius:var(--fx-radius); background:color-mix(in srgb,var(--surface) var(--fx-opacity),transparent); backdrop-filter:blur(var(--fx-blur)); box-shadow:var(--fx-shadow); }
html[data-fx-texture="sheen"] .panel { background-image:linear-gradient(135deg,rgba(var(--fx-secondary),var(--fx-intensity)),transparent 48%,rgba(var(--fx-tint),var(--fx-intensity))); }
html[data-fx-texture="facet"] .panel { background-image:conic-gradient(from 35deg at 90% 0,transparent 0 120deg,rgba(var(--fx-tint),var(--fx-intensity)) 125deg 170deg,transparent 180deg); }
html[data-fx-texture="grid"] body { background-image:linear-gradient(rgba(var(--fx-tint),var(--fx-intensity)) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--fx-tint),var(--fx-intensity)) 1px,transparent 1px); background-size:48px 48px; }
html[data-fx-texture="dots"] body { background-image:radial-gradient(rgba(var(--fx-tint),var(--fx-intensity)) 1px,transparent 1px); background-size:16px 16px; }
html[data-fx-motion="full"][data-fx-level="full"] .brand-mark { animation:fx-breathe 12s ease-in-out infinite; }
@keyframes fx-breathe { 50% { box-shadow:0 0 28px rgba(var(--fx-tint),.32); } }
html[data-fx-motion="off"] *,html[data-fx-motion="reduced"] * { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
@media(prefers-reduced-motion:reduce) { html[data-fx-material] * { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
.fx-backdrop { position:fixed; inset:0; z-index:30; background:rgba(0,0,0,.5); display:flex; justify-content:flex-end; padding:16px; }
.fx-studio { width:min(480px,100%); max-height:calc(100dvh - 32px); overflow:auto; padding:20px; align-self:flex-start; color:var(--text); background:var(--surface) !important; }
.fx-studio p { color:var(--muted); line-height:1.6; font-size:12px; }
.fx-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:16px 0; }
.fx-controls label { display:flex; flex-direction:column; gap:8px; min-width:0; font-size:11px; color:var(--muted); }
.fx-controls select { min-width:0; width:100%; min-height:44px; padding:10px; border:1px solid var(--border); background:var(--raised); border-radius:6px; }
.plan-impact summary { cursor:pointer; padding:12px 0; color:var(--text); font-weight:600; }
.plan-impact dd, .plan-impact code { overflow-wrap:anywhere; }
@media(max-width:500px) { .fx-backdrop { padding:8px; align-items:flex-end; } .fx-studio { align-self:flex-end; max-height:85dvh; } .fx-controls { grid-template-columns:1fr; } .top-actions { gap:6px; flex-wrap:wrap; } #fx-open { min-height:44px; } }

.command-trigger { position:fixed; z-index:21; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); min-height:48px; background:var(--raised); color:var(--text); border:1px solid var(--border-strong); box-shadow:0 4px 20px rgba(0,0,0,.25); }
.command-trigger kbd { padding-left:8px; font-size:10px; color:var(--muted); }
html { scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
[data-webapp-confirm],[data-workflow-confirm],[data-live-package-confirm] { scroll-margin-bottom:84px; }
.command-backdrop { position:fixed; inset:0; z-index:35; display:flex; align-items:flex-start; justify-content:center; padding:8vh 16px 16px; background:rgba(0,0,0,.55); }
.command-panel { width:min(680px,100%); max-height:84dvh; overflow:auto; padding:20px; background:var(--surface) !important; }
.confirmation-panel { display:flex; flex-direction:column; overflow:hidden; }
.confirmation-body { overflow:auto; min-height:0; }
.confirmation-actions { display:flex; flex-shrink:0; justify-content:flex-end; gap:12px; padding-top:16px; border-top:1px solid var(--border); }
.confirmation-actions .button { min-height:48px; min-width:0; white-space:normal; }
@media(max-height:500px) { .topbar { position:static; } }
.capability-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr)); gap:16px; margin:16px 0; }
.capability-metrics strong { display:block; font-size:2rem; }
.capability-metrics span { color:var(--muted); }
@media(max-width:500px) { .capability-summary .panel-head { flex-direction:column; align-items:flex-start; } .capability-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .capability-metrics span { font-size:14px; } }
.command-search-label { display:flex; flex-direction:column; gap:8px; color:var(--muted); font-size:12px; }
.command-search-label input { width:100%; min-height:48px; color:var(--text); background:var(--raised); border:1px solid var(--border-strong); border-radius:6px; padding:12px; }
.command-results { display:grid; gap:6px; margin-top:14px; }
.command-result { display:flex; flex-direction:column; gap:5px; min-height:52px; border:1px solid var(--border); border-radius:6px; padding:10px 12px; text-align:left; color:var(--text); background:var(--raised); }
.command-result small,.command-result span,.command-api p { color:var(--muted); font-size:11px; line-height:1.5; }
.command-result strong { font-size:13px; overflow-wrap:anywhere; }
.command-api { margin-top:14px; border-top:1px solid var(--border); padding-top:12px; }
.command-api h3 { overflow-wrap:anywhere; }
.observe-only[aria-pressed="true"] { border:1px solid var(--border-strong); }
@media(max-width:500px) { .command-backdrop { align-items:flex-end; padding:8px; } .command-panel { max-height:88dvh; padding:14px; } .command-trigger kbd { display:none; } .topbar { height:auto; min-height:68px; } .workspace { padding-bottom:80px; } }

/* Public Safe Demo shell: keep its safety notice independent of the scroll-away utilities. */
body:has(#opsdeck-safe-demo-banner) .topbar { top:var(--opsdeck-safe-banner-height,0px); }
#opsdeck-demo-shell { padding-top:var(--opsdeck-safe-banner-height,36px); }
#opsdeck-safe-demo-banner { position:fixed; z-index:24; top:0; left:0; width:100%; padding:8px 14px; border-bottom:1px solid #f3c56f; background:#17140c; color:#f3c56f; text-align:center; font:700 12px/1.4 ui-monospace,monospace; letter-spacing:.04em; overflow-wrap:anywhere; box-shadow:0 4px 18px rgba(0,0,0,.28); }
#opsdeck-demo-access-anchor { min-height:62px; }
#opsdeck-demo-access-row { display:flex; width:max-content; max-width:calc(100% - 24px); flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin:10px auto 12px; }
#opsdeck-demo-persona { display:flex; min-width:0; align-items:center; gap:8px; padding:4px 8px; border:1px solid rgba(243,197,111,.45); border-radius:8px; background:color-mix(in srgb,var(--surface) 94%,#17140c); color:var(--warning); font:700 11px/1.2 ui-monospace,monospace; }
#opsdeck-demo-persona select { min-width:170px; max-width:100%; min-height:40px; padding:6px 28px 6px 9px; border:1px solid var(--border-strong); border-radius:6px; background:var(--raised); color:var(--text); font-size:14px; cursor:pointer; }
.demo-access-compact-label { display:none; }
.demo-repo-link { position:static; right:auto; bottom:auto; z-index:auto; display:flex; min-height:48px; align-items:center; justify-content:center; padding:8px 12px; border:1px solid var(--border-strong); border-radius:8px; background:var(--raised); color:var(--text); font-size:12px; font-weight:650; white-space:nowrap; box-shadow:none; backdrop-filter:none; }
.demo-repo-link:hover { border-color:var(--accent); background:var(--hover); }
html[data-theme="light"] #opsdeck-safe-demo-banner { background:#fff8e8; color:#7a4d00; }
html[data-theme="light"] #opsdeck-demo-persona { background:#fff8e8; color:#7a4d00; }
body.demo-access-persistent #opsdeck-demo-access-row { position:fixed; z-index:22; left:16px; bottom:calc(16px + env(safe-area-inset-bottom)); width:max-content; max-width:calc(100vw - 260px); flex-wrap:nowrap; justify-content:flex-start; margin:0; padding:5px; border:1px solid var(--border-strong); border-radius:10px; background:color-mix(in srgb,var(--surface) 96%,transparent); box-shadow:0 4px 20px rgba(0,0,0,.3); backdrop-filter:blur(18px); }
body.demo-access-persistent #opsdeck-demo-persona { gap:6px; padding:0 4px; border:0; background:transparent; }
body.demo-access-persistent .demo-access-full-label { display:none; }
body.demo-access-persistent .demo-access-compact-label { display:inline; }
body.demo-access-persistent #opsdeck-demo-persona select { min-width:110px; min-height:40px; font-size:13px; }
body.demo-access-persistent .demo-repo-link { min-height:40px; padding:7px 9px; font-size:11px; }
body.demo-access-persistent #app .workspace { padding-bottom:calc(104px + env(safe-area-inset-bottom)); }
@media(max-width:820px) { #opsdeck-demo-persona select { min-height:44px; font-size:16px; } }
@media(max-width:760px) {
  body.demo-access-persistent #opsdeck-demo-access-row { right:8px; bottom:calc(68px + env(safe-area-inset-bottom)); left:8px; width:auto; max-width:none; min-height:50px; justify-content:space-between; gap:6px; padding:5px; }
  body.demo-access-persistent #opsdeck-demo-persona { flex:1 1 auto; min-width:0; }
  body.demo-access-persistent #opsdeck-demo-persona select { flex:1 1 auto; width:auto; min-width:0; max-width:46vw; }
  body.demo-access-persistent .demo-repo-link { flex:0 0 auto; }
  body.demo-access-persistent #app .workspace { padding-bottom:calc(156px + env(safe-area-inset-bottom)); }
}
@media(max-width:360px) {
  #opsdeck-safe-demo-banner { padding:7px 9px; font-size:11px; }
  body.demo-access-persistent #opsdeck-demo-access-row { gap:4px; }
  body.demo-access-persistent #opsdeck-demo-persona { gap:4px; }
  body.demo-access-persistent #opsdeck-demo-persona select { max-width:43vw; padding-right:18px; }
  body.demo-access-persistent .demo-repo-link { padding-right:6px; padding-left:6px; font-size:10px; }
}
body:has(#opsdeck-safe-demo-banner) { min-width:0; }

.projection-exports { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.projection-exports .button,.evidence-toolbar .button { min-height:44px; }
.api-parameters { display: grid; gap: 12px; min-width: 0; }
.api-parameters label { display: grid; gap: 6px; min-width: 0; }
.api-parameters input, .api-parameters textarea { width: 100%; max-width: 100%; box-sizing: border-box; min-height: 44px; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.api-parameters small { overflow-wrap: anywhere; }
.command-api pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow: auto; }
.target-picker select { min-height:44px; padding:8px; max-width:115px; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:8px; }
.target-comparison { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.target-card { min-width:0; padding:12px; border:1px solid var(--border); border-radius:10px; }
.target-card pre { white-space:pre-wrap; overflow-wrap:anywhere; }
@media(max-width:500px) { .target-comparison {grid-template-columns:1fr;} }
:root { --graph-gap: 12px; }
.entity-graph-panel { margin-top: 18px; }
.graph-edges { display: grid; gap: var(--graph-gap); }
.graph-edge { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 10px; align-items: center; border-top: 1px solid var(--border); padding: 12px 0; }
.graph-edge code { overflow-wrap: anywhere; white-space: normal; }
.graph-edge button { grid-column: 1 / -1; justify-self: start; }
@media(max-width:600px) { .graph-edge { grid-template-columns: minmax(0,1fr); } }
:root { --intent-control-gap: 12px; }
.intelligence-panel { margin-top: 18px; }
.intelligence-controls { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--intent-control-gap); margin-bottom: 16px; }
.intelligence-controls label { display: grid; gap: 6px; min-width: 0; }
.intelligence-controls select,.intelligence-controls input { max-width: 100%; min-width: 0; padding: 10px; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 8px; }
.intelligence-controls .intent-text { grid-column: 1 / -1; }
@media(max-width:600px) { .intelligence-controls { grid-template-columns: minmax(0,1fr); } }