/* ============ Backlog — Jira board ============ */
#screen-backlog{background:#F4F5F7; color:#172B4D; font-family:-apple-system,'Segoe UI',Roboto,var(--body);}
#jira-top{display:flex; align-items:center; gap:14px; background:#fff; padding:9px 16px;
  border-bottom:1px solid #DFE1E6; flex-wrap:wrap;}
#jira-logo{color:#0052CC; font-weight:700; font-size:14.5px; letter-spacing:-.01em;}
#jira-crumb{color:#6B778C; font-size:12px; flex:1; min-width:150px;}
#jira-crumb b{color:#172B4D;}
#jira-user{width:28px; height:28px; border-radius:50%; background:#0052CC; display:flex;
  align-items:center; justify-content:center; font-size:14px;}
#jira-head{padding:12px 18px 2px;}
#jira-head h1{font-size:19px; font-weight:600; color:#172B4D; letter-spacing:-.01em;}
#jira-head .sprint-meta{color:#6B778C; font-size:12.5px; margin-top:3px; line-height:1.5;}
#jira-head .sprint-meta b{color:#172B4D;}
#backlog-cols{flex:1; min-height:0; overflow:auto; padding:12px 14px 92px; display:flex; gap:12px;
  align-items:flex-start;}
@media (max-width:720px){ #backlog-cols{flex-direction:column; align-items:stretch;} .jira-col{max-width:none !important;} }
.jira-col{background:#EBECF0; border-radius:8px; padding:8px 8px 4px; flex:1; min-width:250px; max-width:360px;}
.jira-col-head{display:flex; align-items:center; gap:6px; padding:4px 6px 8px;
  font-size:11px; font-weight:700; color:#5E6C84; letter-spacing:.06em;}
.jira-col-head .cnt{background:#DFE1E6; color:#42526E; border-radius:10px; padding:0 7px; font-size:11px;}
.jira-card{background:#fff; border-radius:3px; box-shadow:0 1px 2px rgba(9,30,66,.25); padding:10px 12px;
  margin-bottom:8px; cursor:pointer; position:relative; transition:background .1s, box-shadow .1s;
  border-left:3px solid transparent;}
.jira-card:hover{background:#FAFBFC; box-shadow:0 2px 6px rgba(9,30,66,.25);}
.jira-card.selected{outline:2px solid #0052CC; outline-offset:-1px; border-left-color:#0052CC;}
.jira-card.done{cursor:default; opacity:.75;}
.jira-card.blocked{cursor:default;}
.jc-title{font-size:14px; color:#172B4D; line-height:1.35; font-weight:500;}
.jc-desc{font-size:12px; color:#5E6C84; line-height:1.45; margin-top:4px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.jc-loz{display:inline-block; margin-top:7px; font-size:10.5px; font-weight:700; letter-spacing:.04em;
  border-radius:3px; padding:2px 6px; text-transform:uppercase;}
.jc-loz.effect{background:#E3FCEF; color:#006644;}
.jc-loz.auto{background:#EAE6FF; color:#403294;}
.jc-loz.blocked{background:#FFEBE6; color:#BF2600;}
.jc-loz.done{background:#E3FCEF; color:#006644;}
.jc-foot{display:flex; align-items:center; gap:7px; margin-top:9px;}
.jc-type{width:16px; height:16px; border-radius:3px; flex:none; display:flex; align-items:center;
  justify-content:center; font-size:10px; color:#fff; font-weight:900;}
.jc-type.story{background:#36B37E;}
.jc-type.epic{background:#6554C0;}
.jc-key{font-size:11px; color:#5E6C84; font-weight:600; letter-spacing:.02em;}
.jc-spacer{flex:1;}
.jc-cost{font-size:11.5px; font-weight:700; color:#42526E; background:#F4F5F7; border:1px solid #DFE1E6;
  border-radius:10px; padding:1px 8px; font-variant-numeric:tabular-nums;}
.jc-cost.cant{color:#BF2600; background:#FFEBE6; border-color:#FFBDAD;}
.jc-av{width:22px; height:22px; border-radius:50%; flex:none; display:flex; align-items:center;
  justify-content:center; font-size:12px; border:1.5px solid #fff; box-shadow:0 0 0 1px #DFE1E6;}
#backlog-bar{position:absolute; left:0; right:0; bottom:0; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:#fff; border-top:1px solid #DFE1E6; display:flex; gap:12px; justify-content:flex-end;
  align-items:center; flex-wrap:wrap;}
.jira-btn{border-radius:3px; font-size:14px; font-weight:600; padding:9px 16px; border:none;
  font-family:inherit; transition:background .1s;}
.jira-btn.primary{background:#0052CC; color:#fff;}
.jira-btn.primary:hover{background:#0065FF;}
.jira-btn.primary:disabled{background:rgba(9,30,66,.06); color:#A5ADBA; cursor:default;}
.jira-btn.subtle{background:transparent; color:#42526E;}
.jira-btn.subtle:hover{background:rgba(9,30,66,.06);}

/* ============ Stack the PR ============ */
#screen-pr{background:var(--night);}
#pr-wrap{flex:1; min-height:0; overflow-y:auto; padding:10px 14px 30px; display:flex; flex-direction:column; gap:12px;
  width:min(720px,100%); margin:0 auto;}
.spec-note{background:var(--panel); border-left:4px solid var(--codegreen); border-radius:0 10px 10px 0;
  padding:10px 12px; color:#c7d2ea; font-size:13px; line-height:1.5;}
.spec-note b{color:var(--cream);}
#pr-ide{background:#0d1117; border:2px solid #2c3650; border-radius:12px; overflow:hidden;}
#pr-ide-head{background:#161d2b; padding:8px 12px; display:flex; align-items:center; gap:8px; border-bottom:2px solid #2c3650;}
.dot{width:11px; height:11px; border-radius:50%;}
#pr-ide-title{font-family:var(--mono); color:var(--codedim); font-size:12px; flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#pr-slots{padding:10px; display:flex; flex-direction:column; gap:7px;}
.pr-slot{min-height:42px; border:2px dashed #33415e; border-radius:9px; display:flex; align-items:center;
  padding:3px; position:relative;}
.pr-slot .ln{font-family:var(--mono); color:#3d4a6b; font-size:11px; width:26px; text-align:right; padding-right:8px; flex:none;}
.pr-slot.hover{border-color:var(--codegreen); background:rgba(126,231,135,.06);}
.pr-block{flex:1; background:#1c2536; border:2px solid #3a4a70; border-radius:8px; padding:8px 11px;
  font-family:var(--mono); font-size:12.5px; color:#d8e2f8; cursor:grab; line-height:1.35;
  box-shadow:0 3px 0 rgba(0,0,0,.35); overflow-wrap:anywhere; touch-action:none;}
.pr-block .kw{color:#ff7b72;} .pr-block .fn{color:#d2a8ff;} .pr-block .str{color:#a5d6ff;} .pr-block .cm{color:#8b949e;}
.pr-block.dragging{opacity:.35;}
.pr-block.locked{border-color:var(--codegreen); cursor:default; box-shadow:none;}
.pr-block.helper{outline:2px solid #f7b955; outline-offset:2px;}
#pr-tray{display:flex; flex-direction:column; gap:7px; background:var(--panel); border:2px solid #33415e;
  border-radius:12px; padding:10px;}
#pr-tray-label{font-family:var(--disp); font-size:11px; color:var(--codedim); letter-spacing:.12em;}
#pr-ci{display:flex; flex-direction:column; gap:6px;}
.ci-msg{font-family:var(--mono); font-size:12px; border-radius:8px; padding:8px 11px; line-height:1.45; animation:msgin .25s;}
.ci-msg.fail{background:#2b1215; color:#ffa198; border:1.5px solid #7a2e35;}
.ci-msg.pass{background:#0f2617; color:#7ee787; border:1.5px solid #2e7a45;}
.ci-msg.note{background:#252017; color:#f7d494; border:1.5px solid #7a6435;}
#pr-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.shake{animation:shake .4s;}
@keyframes shake{0%,100%{transform:none;} 20%{transform:translateX(-7px);} 40%{transform:translateX(6px);}
  60%{transform:translateX(-4px);} 80%{transform:translateX(3px);}}

/* ============ Wire It Up ============ */
#screen-wire{background:var(--night);}
#wire-wrap{flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; gap:8px; padding:8px 10px 16px; overflow-y:auto;}
#wire-cv{border:3px solid #2c3650; border-radius:14px; background:#0d1117; touch-action:manipulation; max-width:100%;}
#wire-status{font-family:var(--mono); color:var(--codedim); font-size:12.5px; text-align:center; min-height:18px; padding:0 10px;}
#wire-status b{color:var(--codegreen);}

/* ============ night-phase headers (shared) ============ */
.night-head{padding:16px 18px 6px; text-align:center;}
.night-head h1{font-family:var(--disp); color:var(--cream); font-size:clamp(20px,4vw,28px); letter-spacing:.02em; text-wrap:balance;}
.night-head .sub{color:var(--codedim); font-size:13.5px; margin-top:6px; line-height:1.5; max-width:62ch; margin-inline:auto;}
.night-head .sub b{color:var(--codegreen);}

/* ============ Prompt Storm ============ */
#screen-storm{background:var(--night);}
#storm-wrap{flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; padding:6px 14px 16px;
  width:min(720px,100%); margin:0 auto;}
#storm-ide{flex:1; min-height:0; background:#0d1117; border:2px solid #2c3650; border-radius:12px;
  display:flex; flex-direction:column; overflow:hidden;}
#storm-head{background:#161d2b; padding:8px 12px; font-family:var(--mono); font-size:12px; color:#a5b4fc;
  border-bottom:2px solid #2c3650;}
#storm-feed{flex:1; min-height:0; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:7px;}
.storm-line{position:relative; background:#1c2536; border:2px solid #3a4a70; border-radius:8px; padding:9px 11px 12px;
  font-family:var(--mono); font-size:12.5px; color:#d8e2f8; cursor:pointer; animation:msgin .2s; overflow:hidden;
  touch-action:manipulation; line-height:1.35;}
.storm-line .sl-code{overflow-wrap:anywhere;}
.sl-fuse{position:absolute; left:0; bottom:0; height:4px; width:100%; background:linear-gradient(90deg,#f7b955,#e8590c);
  animation-name:fuseburn; animation-timing-function:linear; animation-fill-mode:forwards;}
@keyframes fuseburn{from{width:100%;} to{width:0%;}}
.storm-line.committed{border-color:#2e7a45; opacity:.6; cursor:default;}
.storm-line.committed .sl-fuse{display:none;}
.storm-line.rejected{border-color:#e03131; background:#2b1215; cursor:default;}
.storm-line.rejected .sl-code{text-decoration:line-through; color:#ff8787;}
.storm-line.rejected::after{content:'REJECTED ✂'; position:absolute; right:8px; top:8px; font-size:10px;
  font-weight:900; color:#ff8787; letter-spacing:.08em;}
.storm-line.rejected .sl-fuse{display:none;}
.storm-line.leaked{border-color:#e03131; box-shadow:0 0 0 2px rgba(224,49,49,.4); opacity:.85; cursor:default;}
.storm-line.leaked::after{content:'COMMITTED ☠'; position:absolute; right:8px; top:8px; font-size:10px;
  font-weight:900; color:#ff8787; letter-spacing:.08em;}
.storm-line.leaked .sl-fuse{display:none;}
.storm-line.falsetap{border-color:#f7b955;}
#storm-status{font-family:var(--mono); font-size:12.5px; color:var(--codedim); text-align:center; min-height:18px;}
#storm-status b{color:var(--codegreen);}
#storm-lives{color:#ff8787; letter-spacing:.1em;}

/* ============ LGTM code review ============ */
#screen-review{background:var(--night);}
#review-wrap{flex:1; min-height:0; overflow-y:auto; padding:6px 14px 24px; display:flex; flex-direction:column;
  gap:10px; width:min(760px,100%); margin:0 auto; position:relative;}
/* children must NOT flex-shrink: the diff has overflow:hidden (rounded corners), so shrinking
   CLIPPED its tail lines on short/landscape screens instead of letting the wrap scroll */
#review-wrap>*{flex:none;}
#review-pr{background:var(--panel); border:2px solid #33415e; border-radius:12px; padding:10px 14px;}
#review-title{font-family:var(--mono); color:var(--cream); font-size:14.5px; font-weight:bold;}
#review-desc{color:#aeb9d6; font-size:12.5px; margin-top:4px; font-style:italic;}
#review-diff{background:#0d1117; border:2px solid #2c3650; border-radius:12px; overflow:hidden;
  font-family:var(--mono); font-size:12.5px;}
.rv-line{display:flex; gap:8px; padding:5px 10px; cursor:pointer; border-left:3px solid transparent; line-height:1.4;}
.rv-line:hover{filter:brightness(1.25);}
.rv-line.ctx{color:#8b949e; background:#0d1117;}
.rv-line.add{color:#7ee787; background:#12261e;}
.rv-line .rv-ln{color:#3d4a6b; width:22px; text-align:right; flex:none; font-size:11px; padding-top:1px;}
.rv-line .rv-sign{width:12px; flex:none; color:#3fb950;}
.rv-line .rv-code{overflow-wrap:anywhere;}
.rv-line .rv-code .cm{color:#ffcf87; font-style:italic;} /* the confessions live in the comments — keep them readable */
.rv-line .rv-code .str{color:#a5d6ff;}
.rv-line.bugfound{background:#2b1215; border-left-color:#e03131; cursor:default;}
.rv-line.bugfound .rv-code{color:#ffa198;}
.rv-comment{background:#1c2536; border:1.5px solid #7a5b2e; border-left:4px solid #f7b955; margin:2px 10px 6px 40px;
  border-radius:0 8px 8px 8px; padding:7px 10px; font-size:12px; color:#f7d494; font-family:var(--body);
  animation:msgin .25s;}
.rv-line.shakeline{animation:shake .4s;}
#review-bar{display:flex; align-items:center; gap:12px; justify-content:space-between; flex-wrap:wrap;}
#review-status{font-family:var(--mono); font-size:12.5px; color:var(--codedim);}
#review-status b{color:var(--codegreen);}
#review-stamp{position:fixed; left:50%; top:42%; transform:translate(-50%,-50%) rotate(-14deg) scale(.3);
  font-family:var(--disp); font-size:clamp(40px,9vw,84px); color:#3fb950; border:6px solid #3fb950;
  border-radius:18px; padding:10px 30px; opacity:0; pointer-events:none; z-index:80;
  text-shadow:0 0 24px rgba(63,185,80,.5); background:rgba(13,17,23,.8);}
#review-stamp.stamped{transition:transform .3s cubic-bezier(.5,1.8,.6,1), opacity .2s;
  transform:translate(-50%,-50%) rotate(-14deg) scale(1); opacity:1;}

/* ============ Pager Duty ============ */
#screen-pager{background:var(--night);}
#pager-wrap{flex:1; min-height:0; display:flex; flex-direction:column; gap:14px; padding:8px 14px 20px;
  width:min(640px,100%); margin:0 auto; overflow-y:auto;}
#pager-card{background:#131a2b; border:2px solid #33415e; border-left:6px solid #e8590c; border-radius:12px;
  padding:16px; min-height:110px; animation:msgin .25s;}
#pager-card.escalate{border-color:#e03131; border-left-color:#e03131; animation:pulse-red 1s infinite;}
@keyframes pulse-red{0%,100%{box-shadow:0 0 0 0 rgba(224,49,49,.5);} 50%{box-shadow:0 0 0 8px rgba(224,49,49,0);}}
.pg-sev{font-family:var(--mono); font-size:11px; color:#ff8787; letter-spacing:.08em; margin-bottom:8px;}
.pg-tagchip{background:#2b1a3d; color:#d0bfff; border-radius:4px; padding:1px 7px;}
.pg-text{color:var(--cream); font-size:16px; line-height:1.45; font-family:var(--mono);}
.pg-hint{color:#5d6b8c; font-size:11.5px; margin-top:10px; font-style:italic;}
#pager-owners{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.pg-owner{background:var(--panel); border:2px solid #33415e; border-radius:12px; padding:10px 6px;
  display:flex; flex-direction:column; align-items:center; gap:5px; transition:transform .1s, border-color .1s;}
.pg-owner:hover{transform:translateY(-3px); border-color:#a5b4fc;}
.pg-owner:active{transform:translateY(0);}
.pg-av{width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:19px;}
.pg-name{color:var(--cream); font-weight:bold; font-size:13px;}
.pg-tag{color:#8b98b8; font-size:10px; text-align:center; line-height:1.3;}
#pager-status{font-family:var(--mono); font-size:12.5px; color:var(--codedim); text-align:center;}
#pager-status b{color:var(--codegreen);}
@media (max-width:520px){ #pager-owners{grid-template-columns:repeat(2,1fr);} }

/* new-ticket arrival: pop-in + NEW badge */
.jira-card.fresh{animation:jcPop .5s cubic-bezier(.34,1.56,.64,1) backwards}
@keyframes jcPop{from{opacity:0; transform:translateY(-14px) scale(.9)}}
.jc-newbadge{display:inline-block; background:#f59f00; color:#1d2125; font-size:9.5px; font-weight:800;
  letter-spacing:.5px; padding:1px 6px; border-radius:8px; vertical-align:2px; animation:jcNewPulse 1.6s ease-in-out infinite}
@keyframes jcNewPulse{50%{opacity:.55}}