/* Inspector belongs to the prototype shell, not the app. */
:root { --inspect-panel-width:320px; --inspect-toolbar-clearance:calc(var(--control-height-md) + var(--spacing-2xl)); }
.inspect-panel { display:none; min-width:0; width:var(--inspect-panel-width); margin-left:var(--inspect-toolbar-clearance); height:100%; max-height:100%; align-self:stretch; overflow:auto; box-sizing:border-box; padding:var(--spacing-xl); color:var(--color-neutral-fg-primary); background:var(--color-static-bg-card); border:var(--border-width) solid var(--color-neutral-border-primary); border-radius:var(--radius-xl); font:var(--font-size-body-md)/var(--line-height-body) var(--font-family-body); scrollbar-width:thin; }
.inspect-open .inspect-panel { display:block; }
.inspect-open .layout > .spacer { display:none; }
.inspect-open .layout { grid-template-columns:minmax(280px,1fr) auto minmax(calc(var(--inspect-panel-width) + var(--inspect-toolbar-clearance)),1fr); }
.inspect-head { display:flex; align-items:center; justify-content:space-between; gap:var(--spacing-sm); }
.inspect-panel h2 { margin:0; font-size:var(--font-size-heading-xs); }
.inspect-panel h3 { margin:var(--spacing-2xl) 0 var(--spacing-sm); font-size:var(--font-size-body-md); }
.inspect-panel p { margin:var(--spacing-sm) 0; color:var(--color-neutral-fg-secondary); }
.inspect-panel button { cursor:pointer; border:var(--border-width) solid var(--color-neutral-border-primary); border-radius:var(--radius-sm); padding:var(--spacing-sm); background:var(--color-static-bg-subtle); color:var(--color-neutral-fg-primary); font:inherit; }
.inspect-panel a { color:var(--color-brand-fg-primary); overflow-wrap:anywhere; }
.inspect-panel code { font-family:var(--font-family-code); font-size:var(--font-size-body-sm); overflow-wrap:anywhere; }
.inspect-detail { padding-block:var(--spacing-sm); border-bottom:var(--border-width) solid var(--color-neutral-border-primary); }
.inspect-detail small { display:block; color:var(--color-neutral-fg-tertiary); }
.inspect-value { display:flex; align-items:center; gap:var(--spacing-sm); color:var(--color-neutral-fg-secondary); }
.inspect-swatch { display:inline-block; flex:none; width:var(--spacing-xl); height:var(--spacing-xl); border-radius:var(--radius-xxs); border:var(--border-width) solid var(--color-neutral-border-secondary); }
.inspect-actions { display:flex; gap:var(--spacing-sm); margin-top:var(--spacing-lg); }
.inspect-outline { position:absolute; z-index:100; pointer-events:none; box-sizing:border-box; border:var(--border-width-focus) solid var(--color-brand-bg-primary); border-radius:var(--radius-xxs); background:color-mix(in srgb,var(--color-brand-bg-primary) 8%,transparent); }
.inspect-outline[hidden] { display:none; }
.inspect-hint { color:var(--color-brand-fg-primary); }
@media(max-width:860px) { .inspect-open .layout { grid-template-columns:auto minmax(calc(var(--inspect-panel-width) + var(--inspect-toolbar-clearance)),1fr); } .inspect-open .index { display:none; } }
@media(max-width:600px) { .inspect-open .layout { display:block; } .inspect-panel { margin-left:0; position:fixed; z-index:150; right:var(--spacing-lg); left:var(--spacing-lg); bottom:var(--spacing-lg); width:auto; height:45dvh; box-shadow:var(--glass-drop); } }

.inspect-pick-layer { position:absolute; inset:0; z-index:90; cursor:crosshair; background:transparent; }
.inspect-pick-layer[hidden] { display:none; }

/* Light surfaces: white fill, neutral stroke; dark keeps its existing layers. */
:root:not([data-theme="dark"]) :is(.inspect-panel button) { background:var(--color-static-bg-card);border:var(--border-width) solid var(--color-neutral-border-primary);box-sizing:border-box; }