/* Phase 2 — post / detail overlay. Uses the app's existing theme tokens so
   Sage / Warm Paper / Brutalist all work with no extra theme code. Missing
   fill/glow tokens are derived from --accent-rgb (which retints per theme). */
#p2-detail-root{
  --p2-fill: rgba(var(--accent-rgb), .12);
  --p2-soft: rgba(var(--accent-rgb), .30);
  position:fixed; inset:0; z-index:1000; overflow:auto;
  background:var(--bg); color:var(--text);
  font-family:var(--font-body, var(--sans));
}
#p2-detail-root[hidden]{ display:none; }
#p2-detail-root svg{ flex:none; }  /* inline SVG collapses to width:0 in flex without this */
.p2d-wrap{ max-width:64rem; margin:0 auto; padding:1.5rem 1.4rem 4rem; }
.p2d-back{
  font:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:.4rem;
  color:var(--muted); background:transparent; border:var(--border-w) solid var(--border);
  border-radius:var(--btn-radius); padding:.4rem .7rem; font-size:.85rem; margin-bottom:1.4rem;
}
.p2d-back:hover{ color:var(--text); border-color:var(--accent); }
.p2d-meta{ display:flex; align-items:center; gap:.6rem; margin-bottom:.7rem; flex-wrap:wrap; }
.p2d-type{
  font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--accent); border:var(--border-w) solid var(--p2-soft);
  border-radius:calc(var(--btn-radius) * .6); padding:.05rem .4rem;
}
.p2d-when{ font-size:.8rem; color:var(--dim); }
.p2d-title{
  margin:.1rem 0 .6rem; font-family:var(--font-head, var(--serif)); font-weight:600;
  font-size:1.75rem; line-height:1.25; text-wrap:balance;
}
:root[data-theme="brutal"] #p2-detail-root .p2d-title{ text-transform:uppercase; font-weight:700; }
.p2d-body{ color:var(--text2); }
.p2d-body h1{ font-family:var(--font-head, var(--serif)); font-size:1.3rem; margin:1.2rem 0 .4rem; color:var(--text); }
.p2d-body a{ color:var(--accent); text-decoration:none; }
.p2d-body a:hover{ text-decoration:underline; }
.p2d-body ul{ padding-left:1.1rem; }

.p2d-actions{ display:flex; gap:.4rem; flex-wrap:wrap; margin:1.1rem 0; padding:.9rem 0; border-top:var(--border-w) solid var(--border); border-bottom:var(--border-w) solid var(--border); }
.p2d-a{
  position:relative; width:2.1rem; height:2.1rem; display:inline-flex; align-items:center; justify-content:center;
  border:var(--border-w) solid var(--border); border-radius:var(--btn-radius);
  background:transparent; color:var(--muted); cursor:pointer;
}
.p2d-a:hover{ color:var(--text); border-color:var(--accent); }
.p2d-a.on{ background:var(--p2-fill); color:var(--accent); border-color:var(--p2-soft); }
.p2d-a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.p2d-a[data-tip]::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% + .4rem); left:50%; transform:translateX(-50%);
  background:var(--surface); color:var(--text); border:var(--border-w) solid var(--border);
  border-radius:calc(var(--btn-radius) * .6); box-shadow:var(--card-shadow);
  padding:.2rem .45rem; font-size:.7rem; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .12s; z-index:5;
}
.p2d-a[data-tip]:hover::after, .p2d-a[data-tip]:focus-visible::after{ opacity:1; }

.p2d-sec{ margin-top:1.5rem; }
.p2d-lbl{ font-size:.66rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); margin:0 0 .6rem; }
.p2d-basis{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.p2d-card{ background:var(--surface); border:var(--border-w) solid var(--border); border-radius:var(--radius); padding:.75rem .9rem; box-shadow:var(--card-shadow); }
.p2d-tag{ font-size:.64rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--dim); border:var(--border-w) solid var(--border); border-radius:calc(var(--btn-radius)*.6); padding:.1rem .45rem; }
.p2d-tag.on{ color:var(--accent); border-color:var(--p2-soft); background:var(--p2-fill); }
.p2d-row{ display:flex; align-items:center; gap:.55rem; padding:.5rem .1rem; border-bottom:var(--border-w) solid var(--border); }
.p2d-row:last-child{ border-bottom:0; }
.p2d-row a{ color:var(--accent); text-decoration:none; flex:1; }
.p2d-cmt{ display:flex; gap:.6rem; margin-bottom:.8rem; }
.p2d-node{ width:1.7rem; height:1.7rem; flex:none; border-radius:var(--radius); background:var(--muted); color:var(--bg); display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; }
.p2d-who{ font-weight:600; font-size:.9rem; }
.p2d-vis{ font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; color:var(--dim); border:var(--border-w) solid var(--border); border-radius:calc(var(--btn-radius)*.5); padding:0 .3rem; }
.p2d-composer{ margin-top:.8rem; }
.p2d-composer textarea{ width:100%; font:inherit; color:var(--text); resize:vertical; min-height:3rem; background:var(--bg-in); border:var(--border-w) solid var(--border); border-radius:var(--btn-radius); padding:.6rem .7rem; }
.p2d-composer textarea:focus{ outline:none; border-color:var(--accent); }
.p2d-crow{ display:flex; justify-content:flex-end; margin-top:.5rem; }
.p2d-btn{ font:inherit; cursor:pointer; color:var(--accent-text); background:var(--iris); border:var(--border-w) solid transparent; border-radius:var(--btn-radius); padding:.5rem .9rem; font-weight:600; font-size:.86rem; box-shadow:var(--btn-glow); }
:root[data-theme="brutal"] #p2-detail-root .p2d-btn{ border-color:#111; text-transform:uppercase; letter-spacing:.05em; }
.p2d-empty{ color:var(--dim); font-size:.86rem; }
.p2d-refform{ display:flex; flex-direction:column; gap:.5rem; margin-top:.7rem; }
.p2d-in{ width:100%; font:inherit; color:var(--text); background:var(--bg-in); border:var(--border-w) solid var(--border); border-radius:var(--btn-radius); padding:.5rem .65rem; }
.p2d-in:focus{ outline:none; border-color:var(--accent); }
.p2d-mini{ font:inherit; cursor:pointer; font-size:.72rem; color:var(--muted); background:transparent; border:var(--border-w) solid var(--border); border-radius:calc(var(--btn-radius) * .7); padding:.12rem .5rem; margin-left:.5rem; flex:none; }
.p2d-mini:hover{ color:var(--text); border-color:var(--accent); }
.p2d-refmsg{ font-size:.8rem; color:var(--accent); min-height:1rem; }
.p2d-pick{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem; padding:.45rem; border:var(--border-w) solid var(--border); border-radius:var(--radius); background:var(--bg-in); }
.p2d-pick button{ font:inherit; cursor:pointer; border:var(--border-w) solid var(--border); background:var(--surface); color:var(--text); border-radius:var(--btn-radius); padding:.3rem .6rem; font-size:.82rem; }
.p2d-pick button:hover{ border-color:var(--accent); color:var(--accent); }
.p2d-msg{ font-size:.82rem; color:var(--dim); margin-top:.5rem; min-height:1.1rem; }
/* §18 real file attachments — live beside the link form, reusing .p2d-row rows. */
.p2d-atts{ margin:.5rem 0; }
.p2d-attform{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-top:.6rem; }
.p2d-file{ font:inherit; font-size:.82rem; color:var(--muted); flex:1; min-width:11rem; max-width:100%; }
.p2d-attmsg{ font-size:.8rem; color:var(--accent); flex-basis:100%; min-height:1rem; }
/* M2.F1 claim round — mounted from app.js; the global .claim-round rule already
   supplies the top divider + spacing, so this section wrapper adds none of its own. */
.p2d-round-sec{ margin-top:0; }
@media (max-width:560px){ .p2d-basis{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ #p2-detail-root *{ transition:none !important; } }