/* ============================================================
   DRYLINE — THE COCKPIT
   The one visual constant across the whole site.
   A prioritized approval-queue card: agent-drafted proposals,
   each a one-tap approve/reject/open, each carrying its
   blast radius + autonomy tier (AUTO / AUTO_PROPOSE / HUMAN_REQUIRED).
   HANDS roles get the principled exception: a WORK queue
   (tasks to do, not proposals to sign) — same visual grammar.
   Depends on tokens.css (colors, tiers, fonts).
   Rendered by cockpit.js.
   ============================================================ */

.cockpit{
  background:linear-gradient(180deg,var(--panel),var(--ink2));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:0;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-card),var(--glow-wet);
  display:flex;flex-direction:column;
  width:100%;
}
.cockpit::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px 220px at 82% -18%,rgba(245,165,36,.12),transparent 62%);
}
/* HANDS work-queue: shift the accent toward the field (cyan-forward) */
.cockpit.hands::before{
  background:radial-gradient(620px 220px at 82% -18%,rgba(34,211,238,.12),transparent 62%);
}

/* ---- header ---- */
.cockpit-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:22px 24px 18px;border-bottom:1px solid var(--line);position:relative;z-index:1;
}
.cockpit-id{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fog2);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.cockpit-id .layer-chip{border:1px solid var(--line);border-radius:5px;padding:2px 7px;color:var(--fog)}
.cockpit-title{font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.cockpit-survival{margin-top:7px;font-size:12.5px;color:var(--fog);line-height:1.5;max-width:46ch}
.cockpit-survival b{color:var(--fg);font-weight:600}
.cockpit-live{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);
  font-size:11px;color:var(--auto);white-space:nowrap;flex:none}
.cockpit-live .pulse{width:8px;height:8px;border-radius:50%;background:var(--auto);
  box-shadow:0 0 0 0 rgba(52,211,153,.7);animation:cockpit-pulse 1.8s infinite}
.cockpit.hands .cockpit-live{color:var(--wet2)}
.cockpit.hands .cockpit-live .pulse{background:var(--wet2);
  box-shadow:0 0 0 0 rgba(56,189,248,.7);animation:cockpit-pulse-wet 1.8s infinite}
@keyframes cockpit-pulse{70%{box-shadow:0 0 0 9px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
@keyframes cockpit-pulse-wet{70%{box-shadow:0 0 0 9px rgba(56,189,248,0)}100%{box-shadow:0 0 0 0 rgba(56,189,248,0)}}

/* ---- queue meta line ---- */
.cockpit-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 24px;font-family:var(--mono);font-size:11px;color:var(--fog2);
  letter-spacing:.06em;text-transform:uppercase;position:relative;z-index:1}
.cockpit-meta .count{color:var(--fg)}
.cockpit-meta .queue-kind{color:var(--auto)}
.cockpit.hands .cockpit-meta .queue-kind{color:var(--wet2)}

/* ---- queue list ---- */
.cockpit-queue{display:flex;flex-direction:column;position:relative;z-index:1}

/* one row = one agent-drafted proposal (or, for HANDS, one task) */
.cq-item{
  display:flex;align-items:stretch;gap:14px;
  padding:16px 24px;border-top:1px solid var(--line);
  transition:background .2s;
}
.cq-item:hover{background:rgba(255,255,255,.02)}
.cq-rail{width:3px;border-radius:3px;flex:none;align-self:stretch;background:var(--line2)}
.cq-item.tier-AUTO .cq-rail{background:var(--auto)}
.cq-item.tier-AUTO_PROPOSE .cq-rail{background:var(--propose)}
.cq-item.tier-HUMAN_REQUIRED .cq-rail{background:var(--human)}

.cq-body{flex:1;min-width:0}
.cq-top{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.cq-agent{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fog2)}
.cq-agent .diamond{color:var(--wet2)}
.cq-text{font-size:14px;font-weight:550;line-height:1.4;color:var(--fg)}
.cq-blast{margin-top:7px;font-size:12px;color:var(--fog);line-height:1.45;display:flex;gap:8px}
.cq-blast .br-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fog2);flex:none;padding-top:2px}

/* ---- the one-tap control ---- */
.cq-act{display:flex;flex-direction:column;gap:7px;align-items:stretch;flex:none;
  width:118px;justify-content:center}
.cq-approve{border:none;border-radius:10px;padding:10px 12px;font-family:var(--font);
  font-size:13px;font-weight:650;cursor:pointer;transition:.18s;
  background:var(--auto);color:#06251a;display:flex;align-items:center;justify-content:center;gap:7px}
.cq-approve:hover{filter:brightness(1.08);transform:translateY(-1px)}
.cq-item.tier-HUMAN_REQUIRED .cq-approve{background:var(--human);color:#2a0a12}
/* HANDS variant: the control is "Start", not "Approve" */
.cockpit.hands .cq-approve{background:var(--wet2);color:#04222b}
.cq-open{background:transparent;border:1px solid var(--line2);border-radius:10px;
  padding:8px 12px;font-family:var(--font);font-size:12px;font-weight:550;
  color:var(--fog);cursor:pointer;transition:.18s}
.cq-open:hover{color:var(--fg);border-color:var(--wet2)}

/* resolved state (after a tap) */
.cq-item.resolved{opacity:.55}
.cq-item.resolved .cq-act{width:auto}
.cq-resolved-tag{font-family:var(--mono);font-size:11px;color:var(--auto);
  display:flex;align-items:center;gap:7px;white-space:nowrap}
.cq-item.tier-HUMAN_REQUIRED.resolved .cq-resolved-tag{color:var(--human)}
.cockpit.hands .cq-resolved-tag{color:var(--wet2)}

/* ---- footer: the marquee story ticker ---- */
.cockpit-foot{padding:14px 24px;border-top:1px solid var(--line);
  position:relative;z-index:1;overflow:hidden}
.cockpit-marquee{font-family:var(--mono);font-size:11px;color:var(--fog);
  display:flex;align-items:center;gap:10px;white-space:nowrap}
.cockpit-marquee .label{color:var(--fog2);letter-spacing:.1em;text-transform:uppercase;flex:none}
.cockpit-marquee .track{overflow:hidden;flex:1}
.cockpit-marquee .track span{display:inline-block;padding-left:100%;
  animation:cockpit-scroll 22s linear infinite}
@keyframes cockpit-scroll{to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){
  .cockpit-marquee .track span{animation:none;padding-left:0;
    overflow:hidden;text-overflow:ellipsis;max-width:100%}
}

/* ============================================================
   THUMBNAIL MODE — for the 55-wall contact sheet
   Same grammar, miniature. Pointer-events off (it's a proof, not a tool).
   ============================================================ */
.cockpit.thumb{
  box-shadow:var(--shadow-card);
  border-radius:var(--r-sm);
  cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s;
}
.cockpit.thumb::before{opacity:.7}
.cockpit.thumb:hover{transform:translateY(-4px);border-color:var(--line2);
  box-shadow:var(--shadow-pop),var(--glow-wet)}
.cockpit.thumb .cockpit-head{padding:12px 13px 10px}
.cockpit.thumb .cockpit-id{font-size:8.5px;letter-spacing:.1em;margin-bottom:5px}
.cockpit.thumb .cockpit-id .layer-chip{padding:1px 5px}
.cockpit.thumb .cockpit-title{font-size:13px;line-height:1.15}
.cockpit.thumb .cockpit-survival{display:none}
.cockpit.thumb .cockpit-live{font-size:8.5px}
.cockpit.thumb .cockpit-live .pulse{width:6px;height:6px}
.cockpit.thumb .cockpit-meta{padding:7px 13px;font-size:8px}
.cockpit.thumb .cq-item{padding:8px 13px;gap:8px;pointer-events:none}
.cockpit.thumb .cq-item:hover{background:none}
.cockpit.thumb .cq-agent{font-size:7.5px;margin-bottom:3px}
.cockpit.thumb .cq-text{font-size:10.5px;font-weight:550;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cockpit.thumb .cq-blast{display:none}
.cockpit.thumb .cq-top{margin-bottom:2px}
.cockpit.thumb .cq-act{width:auto}
.cockpit.thumb .cq-approve{padding:5px 9px;font-size:9.5px;border-radius:7px;pointer-events:none}
.cockpit.thumb .cq-open{display:none}
.cockpit.thumb .cockpit-foot{display:none}
/* hover reveal: role name + survival reason for the contact sheet */
.cockpit.thumb .thumb-reveal{
  position:absolute;inset:auto 0 0 0;z-index:2;
  background:linear-gradient(0deg,rgba(8,12,16,.97),rgba(8,12,16,.85) 70%,transparent);
  padding:30px 13px 12px;
  transform:translateY(101%);transition:transform .25s cubic-bezier(.2,.7,.2,1);
}
.cockpit.thumb:hover .thumb-reveal{transform:translateY(0)}
.cockpit.thumb .thumb-reveal .tr-role{font-size:12px;font-weight:650;margin-bottom:3px}
.cockpit.thumb .thumb-reveal .tr-reason{font-family:var(--mono);font-size:9px;
  letter-spacing:.06em;color:var(--wet2)}
@media(prefers-reduced-motion:reduce){
  .cockpit.thumb .thumb-reveal{transition:none}
}

/* ---- the 55-wall grid (consumers may use this directly) ---- */
.cockpit-wall{display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
@media(max-width:640px){.cockpit-wall{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}}

/* ---- responsive: stack the action under the body on phones ---- */
@media(max-width:520px){
  .cq-item{flex-wrap:wrap}
  .cq-act{width:100%;flex-direction:row}
  .cq-approve{flex:1}
  .cq-open{flex:none}
}