/* THE CAPTOR'S DESK — styles. The distant-pair contrast is the payoff and has to read
   as one object, not two columns that happen to sit side by side. */
.dk-wrap {
  --ground:#0C0C0F; --panel:#14141A; --line:#2A2A33; --text:#E6E4DE;
  --muted:#84838F; --red:#CC0000; --amber:#E8A33D; --green:#6fd08c;
  --mono: ui-monospace,"JetBrains Mono","Cascadia Code",Consolas,monospace;
  color: var(--text);
}
.dk-wrap h3 { margin:1.4rem 0 .5rem; font-size:.9rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text); border-bottom:1px solid var(--line); padding-bottom:.3rem; }
.dk-phase { font-family:var(--mono); font-size:.62rem; color:var(--muted); text-transform:none; letter-spacing:0; }
.dk-counts { font-family:var(--mono); font-size:.68rem; color:var(--muted); border-left:2px solid var(--line); padding-left:.7rem; margin-bottom:1rem; }
.dk-honest { font-size:.76rem; color:#7d7c87; line-height:1.55; border-left:1px solid var(--line); padding-left:.7rem; margin:.5rem 0; }

/* Budget bar — sticks to the top of the viewport while you scroll the deck, so
   the count and the RUN IT are always to hand instead of scrolled off above 30
   cards. Five slots make the goal readable at a glance. */
.dk-budget {
  display:flex; flex-wrap:wrap; gap:.6rem; align-items:center;
  font-family:var(--mono); font-size:.76rem; color:var(--muted);
  background:var(--panel); border:1px solid var(--line);
  padding:.6rem .75rem; margin:.8rem 0 1.1rem;
  position:sticky; top:0; z-index:5;
}
.dk-budget b { color:var(--amber); }
.dk-budget-txt { margin-right:auto; }
.dk-slots { display:inline-flex; gap:.3rem; }
.dk-slot {
  width:15px; height:15px; border:1px solid var(--line); background:var(--ground);
  display:inline-block;
}
.dk-slot.filled { border-color:var(--red); background:rgba(204,0,0,.55); }
.dk-go, .dk-2nd { font-family:var(--mono); font-size:.72rem; letter-spacing:.09em; background:var(--ground); color:var(--red); border:1px solid #5a1818; padding:.5rem 1.1rem; cursor:pointer; }
.dk-go:hover:not(:disabled) { border-color:var(--red); background:rgba(204,0,0,.12); }
.dk-go:disabled { color:var(--muted); border-color:var(--line); cursor:not-allowed; }
.dk-2nd { color:var(--muted); border-color:var(--line); }

/* Cards. The tick box is the affordance the deck was missing entirely — thirty
   identical bordered rectangles gave no sign they were a five-slot choice. */
.dk-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:.45rem; }
.dk-card {
  text-align:left; background:var(--panel); border:1px solid var(--line);
  padding:.6rem .7rem; cursor:pointer; color:var(--text);
  display:flex; align-items:flex-start; gap:.55rem;
  transition:border-color .12s, background .12s;
}
.dk-card:hover { border-color:var(--muted); background:#191920; }
.dk-card.on { border-color:var(--red); background:rgba(204,0,0,.10); }
.dk-card-body { display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.dk-tick {
  flex:0 0 auto; width:14px; height:14px; margin-top:.15rem;
  border:1px solid var(--line); background:var(--ground); position:relative;
}
.dk-card:hover .dk-tick { border-color:var(--muted); }
.dk-card.on .dk-tick { border-color:var(--red); background:rgba(204,0,0,.2); }
.dk-card.on .dk-tick::after {
  content:""; position:absolute; left:3px; top:0px;
  width:5px; height:9px; border:solid var(--red); border-width:0 2px 2px 0;
  transform:rotate(42deg);
}
.dk-card-name { font-size:.85rem; font-weight:700; line-height:1.35; }
/* How often a move has actually been run is the one number on the card face. */
.dk-card-n { font-family:var(--mono); font-size:.62rem; color:var(--muted); letter-spacing:.04em; }
.dk-card-n b { color:var(--amber); font-size:.76rem; }
.dk-card-n.dk-none { color:#7d7c87; }
.dk-card.dk-unrun { opacity:.62; border-style:dashed; }

.dk-run { border:1px solid var(--line); border-left:2px solid var(--red); background:var(--panel); padding:.55rem .8rem; margin:.45rem 0; }
.dk-run-none { border-left-color:var(--muted); border-left-style:dashed; }
.dk-run-head { display:flex; flex-wrap:wrap; gap:.5rem; align-items:baseline; }
.dk-inst { font-family:var(--mono); font-size:.68rem; color:var(--amber); }
.dk-as { font-family:var(--mono); font-size:.56rem; border:1px solid; padding:.02rem .3rem; }
.dk-as-FACT { color:var(--green); border-color:#2c5c3a; }
.dk-as-ATTRIBUTED { color:var(--amber); border-color:#5a3f18; }
.dk-as-RUMOR { color:var(--muted); border-color:var(--muted); border-style:dashed; }
.dk-run-span { font-size:.82rem; line-height:1.55; color:var(--muted); margin:.3rem 0; }
.dk-run-why { font-size:.74rem; color:#7d7c87; font-style:italic; }
.dk-receipts { display:flex; gap:.3rem; }
.dk-receipts a { font-family:var(--mono); font-size:.58rem; letter-spacing:.06em; color:var(--amber); border:1px solid #5a3f18; padding:.02rem .35rem; text-decoration:none; }
.dk-alsoby { font-family:var(--mono); font-size:.6rem; color:#7d7c87; margin-top:.3rem; }

.dk-toggle { display:inline-flex; gap:.4rem; align-items:center; font-family:var(--mono); font-size:.68rem; color:var(--muted); margin:.4rem 0; cursor:pointer; }
.dk-pair { display:grid; grid-template-columns:1fr auto 1fr; gap:.6rem; align-items:center; border:1px solid var(--line); background:var(--panel); padding:.8rem; margin:.7rem 0; }
.dk-pair-side b { font-size:.9rem; display:block; }
.dk-frac { font-family:var(--mono); font-size:.64rem; color:var(--amber); }
.dk-actors { font-family:var(--mono); font-size:.58rem; color:var(--muted); margin-top:.2rem; }
.dk-vs { font-family:var(--mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.12em; color:var(--red); text-align:center; border-left:1px solid var(--line); border-right:1px solid var(--line); padding:0 .6rem; }
.dk-punch { font-size:.9rem; line-height:1.6; color:var(--text); border-left:2px solid var(--red); padding-left:.7rem; margin:.6rem 0; }
.dk-verdict { font-family:var(--mono); font-size:.76rem; color:var(--muted); background:var(--panel); border-left:2px solid var(--muted); padding:.6rem .8rem; line-height:1.6; }
.dk-list { margin:.6rem 0; }
.dk-listrow { display:flex; gap:.6rem; align-items:baseline; border-top:1px solid #1c1c22; padding:.3rem 0; font-size:.8rem; }
.dk-listrow span:first-child { flex:1; }
.dk-sc { font-family:var(--mono); font-size:.58rem; color:var(--green); border:1px solid #2c5c3a; padding:.02rem .3rem; }

@media (max-width:768px) {
  .dk-pair { grid-template-columns:1fr; }
  .dk-vs { border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:.35rem 0; }
}