/* Inspector panel (P-122): right glass panel, 340 px. Under 1000 px it becomes a bottom sheet. Colours and spacing from tokens.css. */
.insp{position:fixed;top:52px;right:0;bottom:0;width:340px;z-index:32;padding:var(--s-4);overflow-y:auto;overscroll-behavior:contain;
  background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--sh-pop);display:flex;flex-direction:column;gap:var(--s-3);animation:rise .2s var(--ease) both}
.insp:focus{outline:none}
.insp-h{display:flex;align-items:flex-start;gap:var(--s-3);justify-content:space-between}
.insp-t{min-width:0}.insp-t h2{overflow-wrap:anywhere}.insp-t p{margin:var(--s-1) 0 0}
.insp-dl{margin:0;display:grid;gap:var(--s-1)}
.insp-row{display:grid;grid-template-columns:104px minmax(0,1fr);gap:var(--s-3);padding:var(--s-2) 0;box-shadow:inset 0 -1px 0 var(--edge2);align-items:baseline}
.insp-row dt{font:500 10.5px var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.insp-row dd{margin:0;min-width:0;overflow-wrap:anywhere}
.insp-sec h3{margin-bottom:var(--s-2)}
.insp-ai{display:grid;gap:var(--s-2);justify-items:start}.insp-ai .ai-box{width:100%}
.insp-f{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;margin-top:auto;padding-top:var(--s-3)}
.insp-keys{flex:1 1 100%}
.insp-late{color:var(--red)}
/* make room beside the page content while the panel is open on wide screens */
@media (min-width:1001px){body.insp-on .col{margin-right:340px}}
@media (max-width:1000px){
  .insp{top:auto;left:0;right:0;width:auto;max-height:65vh;border-radius:var(--r-xl) var(--r-xl) 0 0;z-index:36}
  .insp-row{grid-template-columns:96px minmax(0,1fr)}
}