/* The right-hand detail panel (docked under the top bar, resizable), and what it and the process
   page show: the SIPOC grid, the step flow with its step cards, handoffs 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}
/* In the panel the SIPOC is two columns and the step flow runs down */
.detail .sipoc{grid-template-columns:1fr 1fr}
.detail .sipoc > div:nth-child(3){grid-column:1 / -1}
.detail .fstep{width:100%}
.detail .flow li{width:100%;flex-direction:column}
.detail .flow li:not(:last-child)::after{content:"↓"}
@container (max-width:460px){
  .detail .sipoc{grid-template-columns:1fr}
  .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}
  .detail .handoffs{grid-template-columns:1fr}
}

/* 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}

/* SIPOC: five parts side by side, ruled by the grid's own gap */
.sipoc{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:calc(0.125rem * var(--dz));background:var(--line);border:var(--card-border);border-radius:var(--card-radius);overflow:hidden;margin-bottom:calc(1.125rem * var(--dz))}
.sipoc > div{background:var(--surface-2);padding:calc(0.625rem * var(--dz)) var(--space-3);min-width:0}
/* Part heads: a letter tile (levels.css .ld-letter), then the part */
.sipoc h4{display:flex;align-items:center;gap:var(--space-2);margin:0 0 calc(0.375rem * var(--dz));font-size:var(--fs-sm);color:var(--ink)}
.sipoc h4 .ld-letter{width:1.25rem;height:1.25rem;font-size:var(--fs-xs)}
.sipoc ul,.sipoc ol{margin:0;padding-left:calc(1.125rem * var(--dz));font-size:var(--fs-md)}
.sipoc li{margin:calc(0.125rem * var(--dz)) 0}
.sipoc-btns{display:inline-flex;gap:var(--space-1);flex-wrap:wrap;justify-content:flex-end}
/* Plain list (no bullets); comes after .sipoc li so its row spacing wins inside a SIPOC part */
.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}

/* Step flow: trigger → steps → done */
.flow-title{margin:0 0 var(--space-2)}
.flow{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:stretch}
.flow li{display:flex;align-items:stretch;gap:var(--space-2)}
.flow li:not(:last-child)::after{content:"→";align-self:center;color:var(--muted)}
.fstep{width:210px;background:var(--tile-bg);border:var(--tile-border);border-radius:var(--tile-radius);overflow:hidden;display:flex;flex-direction:column}
.fstep .bar{height:6px}
.fstep .body{padding:var(--space-2) calc(0.625rem * var(--dz));display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--fs-sm)}
.fstep .t{font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--ink)}
.fstep .meta{color:var(--muted)}
.fstep.trigger,.fstep.done{background:var(--accent-wash);border-style:dashed}
/* A step card that opens the step (a button, so it is reset first) */
.fstep.act{all:unset;box-sizing:border-box;width:100%;display:flex;flex-direction:column;background:var(--tile-bg);border:var(--tile-border);border-radius:var(--tile-radius);overflow:hidden;cursor:pointer}
.fstep.act:hover,.fstep.act:focus-visible{border-color:var(--ink-2)}

/* Handoffs: where the work comes from and goes to */
.handoffs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:calc(0.875rem * var(--dz));margin-top:calc(1.125rem * var(--dz))}
.handoffs h4{margin:0}
.handoffs ul{margin:calc(0.375rem * var(--dz)) 0 0;padding-left:calc(1.125rem * var(--dz));font-size:var(--fs-md)}

/* Review state (js/ui/records/review.js, D68) */
.review-chip{display:inline-block;margin-left:var(--space-1);padding:0 calc(0.375rem * var(--dz));border-radius:var(--pill-radius);font-size:var(--fs-xs);font-weight:var(--fw-semibold);text-decoration:none;white-space:nowrap}
.review-chip.is-confirmed{background:var(--chg-add-wash);color:var(--pos)}
.review-chip.is-drafted{background:var(--grid);color:var(--ink-2)}
.review-chip.is-review{background:var(--demo-wash);color:var(--ink)}