/* Linear + GitHub-deployments idiom, skinned in the real cockpit-v2 tokens. Reuses rf.css
   for .qa, .binding, .rc-warn, .state-* etc. This adds the app shell + dense rows + slide-over. */

.lay{min-height:100vh;display:grid;grid-template-columns:56px 244px minmax(0,1fr)}
/* cockpit rail (unchanged idiom) */
.rail{background:var(--bg-deep);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 0}
.rail .logo{width:32px;height:32px;border-radius:9px;background:linear-gradient(150deg,var(--accent),#6d4bd0);color:#fff;display:grid;place-items:center;font-weight:900;font-size:12px;margin-bottom:8px}
.rail .ri{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;color:var(--muted);cursor:pointer;font-size:16px}
.rail .ri.on{color:var(--ink);background:var(--surface-3)} .rail .ri:hover{background:var(--surface-2);color:var(--ink)} .rail .spring{margin-top:auto}

/* Linear left view-nav */
.viewnav{background:var(--bg-deep);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:12px 8px;gap:2px;min-width:0}
.vn-ws{display:flex;align-items:center;gap:9px;padding:6px 8px 12px}
.vn-ws .av{width:26px;height:26px;border-radius:7px;background:var(--surface-3);display:grid;place-items:center;font-size:12px;font-weight:800}
.vn-ws b{font-size:13.5px} .vn-ws span{font-size:11px;color:var(--faint);display:block}
.vn-sec{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:12px 8px 5px}
.vn-item{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:7px;color:var(--muted);font-size:13.5px;font-weight:500;cursor:pointer}
.vn-item:hover{background:var(--surface-2);color:var(--ink)}
.vn-item.on{background:var(--surface-3);color:var(--ink)}
.vn-item .i{width:16px;text-align:center;font-size:13px;flex:none;opacity:.9}
.vn-item .ct{margin-left:auto;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.vn-item .ct.hot{color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:1px 7px;font-weight:700}
.vn-sub{padding-left:8px}

/* main */
.mainw{min-width:0;display:flex;flex-direction:column;height:100vh;overflow:hidden}
.listhead{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line)}
.listhead h1{font-size:16px;margin:0}
.listhead .ct{font-size:12px;color:var(--faint);background:var(--surface-3);border-radius:999px;padding:2px 9px;font-weight:700}
.listhead .sp{flex:1}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:2px}
.seg button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:6px;cursor:pointer}
.seg button.on{background:var(--surface-3);color:var(--ink)}
.hbtn{font-size:12.5px;font-weight:600;color:var(--muted);border:1px solid var(--line);background:var(--surface-1);border-radius:8px;padding:6px 11px;cursor:pointer}
.hbtn:hover{border-color:var(--accent);color:var(--ink)}
.listscroll{flex:1;overflow-y:auto}

/* group header (Linear) */
.grp-h2{display:flex;align-items:center;gap:9px;padding:9px 20px;background:var(--surface-1);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2;cursor:pointer}
.grp-h2 .chev{font-size:10px;color:var(--muted);transition:transform .15s}
.grp-h2.collapsed .chev{transform:rotate(-90deg)}
.grp-h2 b{font-size:12.5px;letter-spacing:.01em}
.grp-h2 .ct{font-size:11.5px;color:var(--faint)}
.grp-h2 .dot{width:7px;height:7px;border-radius:50%}
.grp-body.hide{display:none}

/* dense row (Linear issue / deployment) */
.row{display:flex;align-items:center;gap:12px;padding:9px 20px;border-bottom:1px solid var(--line);cursor:pointer;min-height:42px}
.row:hover{background:var(--surface-1)}
.row.sel{background:var(--surface-2);box-shadow:inset 2px 0 0 var(--accent)}
.row .st{width:16px;flex:none;text-align:center;font-size:13px}
.row .title{font-size:13.5px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.row .title .id{color:var(--faint);font-family:var(--mono);font-size:11.5px;margin-right:8px}
.row .grow{flex:1;min-width:12px}
.row .chip{font-size:11px;font-weight:600;color:var(--muted);background:var(--surface-3);border-radius:6px;padding:2px 8px;white-space:nowrap}
.row .gh{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11.5px;color:var(--muted);text-decoration:none;white-space:nowrap}
.row .gh:hover{color:var(--accent)}
.row .gh .oct{opacity:.7}
.row .sha{font-family:var(--mono);font-size:11.5px;color:var(--accent);background:var(--accent-soft);border-radius:5px;padding:1px 6px}
.row .age{font-size:11.5px;color:var(--faint);width:38px;text-align:right;flex:none;font-variant-numeric:tabular-nums}
.row .av{width:20px;height:20px;border-radius:50%;background:linear-gradient(150deg,var(--accent),#6d4bd0);color:#fff;font-size:9.5px;font-weight:800;display:grid;place-items:center;flex:none}
.row.aged .st{color:#fbbf24} .row.quiet{opacity:.6}
/* status pill (deployments) */
.pill{font-size:10.5px;font-weight:800;letter-spacing:.02em;border-radius:999px;padding:3px 9px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.pill .d{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ready{color:var(--green);background:var(--green-soft)}
.pill.building{color:var(--blue);background:var(--blue-soft)}
.pill.promoted{color:var(--green);background:var(--green-soft)}
.pill.voided{color:#fbbf24;background:var(--orange-soft)}
.pill.unverified{color:#fbbf24;background:var(--orange-soft)}
.pill.expired{color:var(--faint);background:var(--surface-3)}
.pill.queued{color:var(--muted);background:var(--surface-3)}
/* inline promote button on a deployment row */
.promote{font-size:12px;font-weight:700;border:1px solid transparent;border-radius:7px;padding:5px 11px;cursor:pointer;white-space:nowrap;background:var(--green);color:#04231a}
.promote:hover{filter:brightness(1.07)}
.promote.warn{background:transparent;color:#fbbf24;border-color:rgba(251,191,36,.4)}
.promote.ghost{background:var(--surface-2);color:var(--ink);border-color:var(--line)}

/* board view (list-dense columns) */
.boardv{flex:1;overflow:auto;padding:16px 20px}
.bcols{display:grid;grid-template-columns:repeat(5,minmax(210px,1fr));gap:12px;align-items:start}
.bcol{background:var(--surface-1);border:1px solid var(--line);border-radius:10px;min-width:0}
.bcol.prod{border-color:rgba(52,211,153,.35)}
.bcol-h{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--line)}
.bcol-h b{font-size:12px} .bcol.prod .bcol-h b{color:var(--green)} .bcol-h .ct{font-size:11px;color:var(--faint)}
.brow{display:flex;flex-direction:column;gap:6px;padding:9px 11px;border-bottom:1px solid var(--line);cursor:pointer}
.brow:hover{background:var(--surface-2)} .brow:last-child{border:0}
.brow .bt{font-size:12.5px;font-weight:600;line-height:1.3}
.brow .bm{display:flex;align-items:center;gap:7px}

/* right slide-over */
.so-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .18s;z-index:40}
.so-scrim.open{opacity:1;pointer-events:auto}
.slideover{position:fixed;top:0;right:0;height:100vh;width:min(520px,94vw);background:var(--bg);border-left:1px solid var(--line-strong);box-shadow:-24px 0 60px rgba(0,0,0,.45);transform:translateX(100%);transition:transform .22s cubic-bezier(.3,.7,.3,1);z-index:41;display:flex;flex-direction:column}
.slideover.open{transform:none}
.so-head{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.so-head .st{font-size:16px;margin-top:1px}
.so-head .ht{flex:1;min-width:0}
.so-head .id{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.so-head h2{margin:3px 0 0;font-size:17px;letter-spacing:-.01em;line-height:1.25}
.so-head .x{cursor:pointer;color:var(--muted);font-size:18px;padding:2px 6px}
.so-body{flex:1;overflow-y:auto;padding:16px 18px;display:grid;gap:16px}
.so-meta{display:flex;gap:8px;flex-wrap:wrap}
.so-meta .m{font-size:11.5px;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:7px;padding:4px 9px;display:inline-flex;gap:6px;align-items:center}
.so-meta .m b{color:var(--ink);font-weight:600}
.so-sec .h{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.so-p{font-size:14px;color:var(--ink);line-height:1.55} .so-p b{color:var(--ink)}
/* git block (Linear-style) */
.git-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--surface-1);margin-bottom:7px;text-decoration:none;color:inherit}
.git-row:hover{border-color:var(--line-strong)}
.git-row .oct{color:var(--muted);flex:none}
.git-row .gl{flex:1;min-width:0} .git-row .gl b{font-size:13px;display:block} .git-row .gl span{font-size:11.5px;color:var(--muted);font-family:var(--mono)}
.git-row .ext{font-size:11px;color:var(--accent);white-space:nowrap}
.ci{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600}
.ci.pass{color:var(--green)} .ci.run{color:var(--blue)} .ci.fail{color:var(--red)}
/* the release-card content lives in-panel — reuse rf.css .sha-row/.task-row/.risk/.rc-warn/.binding/.btn */
.so-foot{border-top:1px solid var(--line);padding:14px 18px;display:grid;gap:10px;background:var(--surface-1)}
/* audit log */
.audit{display:grid;gap:0}
.audit .ev{display:flex;gap:10px;font-size:12.5px;color:var(--muted);padding:7px 0;border-bottom:1px solid var(--line)}
.audit .ev:last-child{border:0} .audit .ev .t{color:var(--faint);font-family:var(--mono);font-size:11px;white-space:nowrap} .audit .ev b{color:var(--ink)}

@media(max-width:900px){.lay{grid-template-columns:1fr}.rail,.viewnav{display:none}.bcols{grid-template-columns:1fr}}

/* ---- mobile Ship view (Adam #5): priority-first STACKED rows, never a cropped desktop row ---- */
@media(max-width:480px){
  .listhead{padding:11px 14px;gap:8px}
  .listhead h1{font-size:15px}
  .listhead .hbtn{display:none}
  .grp-h2{padding:9px 14px}
  /* row wraps into two priority bands: line 1 = state + title; line 2 = meta + status + action */
  .row{flex-wrap:wrap;gap:7px 8px;padding:11px 14px;min-height:0}
  .row .title{white-space:normal;flex:1 1 auto;min-width:0;line-height:1.35;font-size:14px}
  .row .title .id{display:inline-block;margin-right:6px}
  .row .grow{flex:0 0 100%;height:0;min-width:0;margin:0}         /* forced line break after the title */
  .row .age{width:auto;margin-left:auto}                          /* age trails the meta band, right-aligned */
  .row .gh{font-size:11px}
  .row .chip,.row .qa,.row .pill{flex:none}
  .promote{padding:8px 13px;font-size:12.5px}                     /* comfortable tap target on the meta line */
  .slideover{width:100vw}
  .so-head{padding:14px 15px}.so-body{padding:14px 15px}.so-foot{padding:13px 15px}
  .so-foot .approve-row{flex-wrap:wrap}.so-foot .btn.approve{flex:1 1 100%}
}