/* The right-hand detail panel (docked under the top bar, resizable), and key-value lists. */

/* Panel: the page shrinks beside it */
:root{--detail-w:max(280px,20vw)}
.detail{position:fixed;top:var(--bar-h);right:0;bottom:0;width:var(--detail-w);z-index:var(--z-panel);background:var(--page-bg);border-left:1px solid var(--line);box-shadow:var(--shadow-panel);display:flex;animation:detail-in .18s ease}
@keyframes detail-in{from{transform:translateX(24px);opacity:.6}}
@media (prefers-reduced-motion:reduce){.detail{animation:none}}
body.has-detail main{margin-right:var(--detail-w)}
body.resizing{cursor:col-resize;user-select:none}
.detail-resize{position:absolute;left:-4px;top:0;bottom:0;width:8px;cursor:col-resize;z-index:1}
.detail-resize::after{content:"";position:absolute;left:3px;top:0;bottom:0;width:2px;background:transparent;transition:background .12s}
.detail-resize:hover::after,.detail-resize:focus-visible::after,body.resizing .detail-resize::after{background:var(--accent)}
.detail-resize:focus-visible{outline:none}
.detail-body{flex:1;min-width:0;overflow-y:auto;padding:calc(0.625rem * var(--dz));container-type:inline-size}
.detail-body:focus{outline:none}
.detail .card{box-shadow:none;padding:var(--space-3)}
.detail-head{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);align-items:baseline;justify-content:space-between}
.detail-head h3{margin:0;font-size:var(--fs-2xl)}
.detail-actions{display:inline-flex;gap:calc(0.375rem * var(--dz))}
.detail a.close{text-decoration:none;display:inline-block}
@container (max-width:460px){
  .detail .kv{grid-template-columns:1fr;gap:0 0}
  .detail .kv dt{margin-top:calc(0.375rem * var(--dz));font-size:var(--fs-sm)}
  .detail-head h3{font-size:var(--fs-lg) !important}
}

/* Key-value list */
.kv{display:grid;grid-template-columns:max-content 1fr;gap:var(--space-1) calc(0.875rem * var(--dz));margin:var(--space-3) 0 var(--space-4);font-size:var(--fs-base)}
.kv dt{color:var(--muted)}
.kv dd{margin:0}

/* Plain list (no bullets) */
.plain{list-style:none;margin:var(--space-1) 0 var(--space-2);padding:0;font-size:var(--fs-md)}
.plain li{margin:calc(0.1875rem * var(--dz)) 0}