/* Shared bead-detail modal — loaded by static/queue.html and static/all.html.
   Relies on the :root palette both pages already define (--ink/--navy/--surface/...).
   Class names are bead-* / m* scoped so they can't collide with page row styles. */

.modal-back{position:fixed; inset:0; z-index:50; background:rgba(22,36,63,.46);
  display:flex; align-items:flex-start; justify-content:center; padding:5vh 16px; overflow:auto;
  backdrop-filter:blur(1.5px)}
.modal-back[hidden]{display:none}
.modal{background:var(--surface); border:1px solid var(--line-strong); border-radius:16px;
  max-width:700px; width:100%; max-height:88vh; box-shadow:0 30px 80px -30px rgba(22,36,63,.6);
  display:flex; flex-direction:column; overflow:hidden}

/* ── header (stays put while the body scrolls) ───────────────────────── */
.modal .mhead{flex:none; padding:15px 22px 13px; border-bottom:1px solid var(--line); background:var(--surface-2)}
.modal .mbadges{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.modal .mid{font-family:"Spline Sans Mono",monospace; font-size:12px; color:var(--muted); margin-left:auto}
.modal h3{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:21px; line-height:1.2;
  margin:9px 0 0; letter-spacing:-.01em; overflow-wrap:anywhere}
.modal .mx{cursor:pointer; border:1px solid var(--line); background:var(--surface); width:28px; height:28px;
  border-radius:8px; font-size:14px; color:var(--muted); line-height:1; flex:none; transition:background .12s,color .12s}
.modal .mx:hover{background:#FBE9D0; color:var(--volt-deep)}
.modal .mbody{padding:16px 22px 22px; overflow-y:auto; overscroll-behavior:contain}

/* app / lane badge (also used by queue.html rows) */
.appbadge{font-family:"Spline Sans Mono",monospace; font-size:10.5px; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; padding:3px 7px; border-radius:6px; background:var(--surface-2); color:var(--muted);
  border:1px solid var(--line)}
.mhead .appbadge{background:var(--surface)}
/* status pill variants the modal needs that not every page defines */
.pill.block{background:#FBE3DB; color:#9A311A}
.pill.defer{background:#ECE9E1; color:#6E6553}
.pill.done{background:#E4EFE8; color:#25664A}

/* ── field grid ──────────────────────────────────────────────────────── */
.bead-fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:11px 18px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:12px 15px; margin-bottom:6px}
.bf-k{display:block; font-family:"Spline Sans Mono",monospace; font-size:9.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted)}
.bf-v{display:block; font-size:13.5px; font-weight:600; margin-top:2px; overflow-wrap:anywhere; line-height:1.35}

/* ── sections ────────────────────────────────────────────────────────── */
.bead-sec{margin-top:18px}
.bead-sec-k{font-family:"Spline Sans Mono",monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); display:flex; align-items:center; gap:9px; margin:0 0 9px}
.bead-sec-k::after{content:""; flex:1; height:1px; background:var(--line)}

/* ── markdown-lite description body ─────────────────────────────────── */
.bead-desc{font-size:14.5px; line-height:1.6; color:var(--ink); overflow-wrap:anywhere}
.bead-desc>*:first-child{margin-top:0}
.bead-desc>*:last-child{margin-bottom:0}
.bead-desc p{margin:0 0 11px}
.bead-desc .md-h{font-family:"Hanken Grotesk",ui-sans-serif,sans-serif; color:var(--navy); letter-spacing:-.005em}
.bead-desc .md-h1{font-size:16px; font-weight:700; margin:20px 0 9px; padding-top:12px; border-top:1px solid var(--line)}
.bead-desc .md-h2{font-size:15px; font-weight:700; margin:18px 0 8px}
.bead-desc .md-h3{font-size:13.5px; font-weight:700; margin:15px 0 7px; color:var(--volt-deep)}
.bead-desc .md-list{display:block; list-style:disc outside; margin:0 0 11px; padding:0 0 0 21px; gap:0}
.bead-desc ol.md-list{list-style:decimal outside}
.bead-desc .md-list li{display:list-item; margin:0 0 6px; padding:0; border:none; background:none;
  font-size:inherit; align-items:initial}
.bead-desc .md-list li::marker{color:var(--volt-deep)}
/* pre-wrap, not pre: short lines keep their column alignment (these blocks are usually
   tables/worklists) while an over-long SQL line wraps instead of hiding off the edge. */
.bead-desc pre{font-family:"Spline Sans Mono",monospace; font-size:12px; line-height:1.55; white-space:pre-wrap;
  background:var(--surface-2); border:1px solid var(--line); border-left:3px solid var(--line-strong);
  border-radius:8px; padding:10px 13px; margin:0 0 12px; overflow-x:auto; overflow-wrap:break-word}
.bead-desc code{font-family:"Spline Sans Mono",monospace; font-size:12.5px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:5px; padding:1px 5px}
.bead-desc strong{font-weight:700; color:var(--navy)}
.bead-desc a{color:var(--volt-deep); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(197,128,27,.4)}
.bead-desc a:hover{border-bottom-color:var(--volt-deep)}
.bead-desc .md-none{color:#A39A86; font-style:italic}

/* ── related-bead rows (blockers, subtasks) ─────────────────────────── */
.bead-list{list-style:none; display:flex; flex-direction:column; gap:5px; margin:0; padding:0}
.bead-list li{display:flex; gap:9px; align-items:baseline; font-size:13.5px; line-height:1.4;
  padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2)}
.bl-dot{flex:none; font-size:11px; color:var(--muted)}
.bl-dot.bl-done{color:var(--ok)} .bl-dot.bl-prog{color:var(--volt-deep)}
.bl-dot.bl-block{color:var(--hot)} .bl-dot.bl-open{color:var(--cool)}
.bl-id{flex:none; font-family:"Spline Sans Mono",monospace; font-size:11.5px; color:var(--muted)}
.bl-t{flex:1; min-width:0; overflow-wrap:anywhere}
.bl-st{flex:none; font-family:"Spline Sans Mono",monospace; font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted)}

.bead-progline{display:flex; align-items:center; gap:11px; margin:0 0 10px}
.bead-progress{flex:1; height:8px; border-radius:6px; background:var(--surface-2);
  border:1px solid var(--line); overflow:hidden}
.bead-progress>span{display:block; height:100%; background:var(--ok)}
.bead-progn{flex:none; font-family:"Spline Sans Mono",monospace; font-size:12px; color:var(--muted)}

@media (max-width:600px){
  .modal-back{padding:0}
  .modal{max-height:100vh; border-radius:0; border:none}
  .modal .mhead{padding:13px 16px 11px}
  .modal .mbody{padding:14px 16px 20px}
  .bead-list li{flex-wrap:wrap}
  .bl-st{margin-left:auto}
}