:root{
  /* Matched to the user's kitty theme (~/.config/kitty/current-theme.conf):
     muted pastels on deep navy. bg/fg are taken straight from it; the panel
     ramp keeps the same blue hue getting lighter; the issue accents map to the
     kitty ANSI palette so rails read the same as the terminal. */
  --bg: #0d1925;               /* kitty background */
  --col-bg: #11202e;
  --panel: #16283a;
  --panel-2: #1d3145;
  --border: #26394d;
  --text: #d9e5f1;             /* kitty foreground */
  --text-dim: #8695a8;
  --text-faint: #566578;
  --text-bright-dim: #b3c2d3;  /* brighter grey for dim text that needs to stay legible (column header, usage stat) */
  --accent: #eef4fa;

  --issue-1: #79b8b8;          /* kitty cyan    (color6) */
  --issue-2: #b8b879;          /* kitty yellow  (color3) */
  --issue-3: #b87979;          /* kitty red     (color1) */
  --issue-4: #b879b8;          /* kitty magenta (color5) */
  --issue-5: #7979b8;          /* kitty blue    (color4) */

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body{ height:100%; margin:0; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* ---------- bottom bar / tabs (bottom placement: terminal + thumb-reach) ---------- */
.bottombar{
  flex-shrink:0;
  order:99;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  padding:0 14px;
  border-top:1px solid var(--border);
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--text-faint);
}
.tabs{ display:flex; gap:2px; height:100%; }
.tab{
  display:flex; align-items:center;
  padding:0 14px;
  cursor:pointer;
  color:var(--text-faint);
  border-top:2px solid transparent;
}
.tab.active{
  color:var(--accent);
  border-top-color:var(--issue-5);
}
.tab:hover:not(.active){ color:var(--text-dim); }

/* usage limits, right side of the nav bar */
.usage{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  font-family:var(--mono);
  font-size:9.5px;
  color:var(--text-bright-dim);
  white-space:nowrap;
}
.usage .u-ok{ color:var(--text-bright-dim); }
.usage .u-warn{ color:var(--issue-2); }
.usage .u-hot{ color:var(--issue-3); }

.view{ flex:1; min-height:0; display:none; flex-direction:column; }
.view.active{ display:flex; }

/* ================= OPEN SESSIONS VIEW ================= */
/* Columns cap at 400px wide; when they don't fill the viewport the group is
   centered, so a single column sits in the middle and each additional column
   spreads outward from the center. */
.columns{
  flex:1;
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  min-height:0;
}
.columns-inner{
  display:flex;
  margin:0 auto;   /* centers the group when it's narrower than the viewport */
  min-height:0;
}

.column{
  flex:0 1 400px;
  width:400px;
  max-width:400px;
  min-width:250px;
  display:flex;
  flex-direction:column;
  border-right:1px solid var(--border);
  min-height:0;
  background:var(--col-bg);
}
.columns-inner .column:first-child{ border-left:1px solid var(--border); }

.empty-state{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:12px;
  color:var(--text-faint);
}

/* ---------- compose / respond (M2 act layer) ----------
   Sits directly above the search box so the two write affordances are the
   bottom-most, thumb-reachable things in a column. */
.compose{
  flex-shrink:0;
  padding:6px 8px;
  border-top:1px solid var(--border);
  background:var(--col-bg);
}
.compose .c-row{ display:flex; gap:6px; align-items:flex-end; }
.cinput{
  flex:1;
  min-width:0;
  resize:none;
  overflow-y:auto;
  /* one line of 11.5px/1.4 + 10px padding + 2px border. Undershooting this by
     even a pixel makes the textarea overflow itself and show a scrollbar stub. */
  height:30px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:4px;
  color:var(--text);
  font-family:var(--mono);
  font-size:11.5px;
  line-height:1.4;
  padding:5px 7px;
  outline:none;
}
.cinput::placeholder{ color:var(--text-faint); }
.cinput:focus{ border-color:#3a4150; }
.cinput:disabled{ background:transparent; color:var(--text-faint); cursor:not-allowed; }
.cbtn{
  flex-shrink:0;
  height:30px;
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:4px;
  color:var(--issue-5);
  font-family:var(--mono);
  font-size:10.5px;
  padding:0 9px;
  cursor:pointer;
}
.cbtn:hover:not(:disabled){ border-color:#3a4150; color:var(--accent); }
.cbtn:disabled{ color:var(--text-faint); cursor:not-allowed; }
.cstop{ color:var(--issue-2); }
/* no herdr pane behind this column: nothing is running to type into */
.compose.dead{ opacity:0.55; }

/* Respond mode swaps the whole zone: you can't half-answer a dialog, so the
   prompt box gets out of the way instead of sitting there inviting a typo. */
.compose .approve{ display:none; gap:6px; align-items:center; }
.compose.respond .c-row{ display:none; }
.compose.respond .approve{ display:flex; }
.compose.respond{ background:rgba(242,117,90,0.06); }
.ap-what{
  flex-shrink:0;
  font-family:var(--mono);
  font-size:9.5px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--issue-2);
}
.ap-what.danger{ color:var(--issue-3); font-weight:600; }
.ap{
  flex:1;
  position:relative;
  overflow:hidden;
  height:28px;
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:4px;
  color:var(--text);
  font-family:var(--mono);
  font-size:11px;
  cursor:pointer;
  touch-action:none;          /* a hold must not be stolen by the page scroller */
  user-select:none;
}
.ap:disabled{ color:var(--text-faint); cursor:progress; }
.ap-allow, .ap-always{ color:#6ed18c; border-color:rgba(110,209,140,0.35); }
.ap-always{ flex:0 0 auto; padding:0 8px; font-size:10px; }
.ap-deny{ color:var(--issue-3); border-color:rgba(242,117,90,0.35); }
.ap.needs-hold{ color:var(--issue-2); border-color:rgba(242,184,75,0.5); }
/* the hold's progress fill, behind the label */
.ap::after{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:0;
  background:rgba(242,184,75,0.28);
  pointer-events:none;
}
.ap.holding::after{ animation:apHold 800ms linear forwards; }
@keyframes apHold{ from{ width:0; } to{ width:100%; } }

.col-search{
  flex-shrink:0;
  display:flex;
  gap:6px;
  padding:6px 8px;
  border-top:1px solid var(--border);
}
.col-search .csearch-clear{
  flex-shrink:0;
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:4px;
  color:var(--issue-5);
  font-family:var(--mono);
  font-size:10.5px;
  padding:0 8px;
  cursor:pointer;
}
.col-search .csearch-clear:hover{ border-color:#3a4150; color:var(--accent); }
.col-search input{
  flex:1;
  min-width:0;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:4px;
  color:var(--text);
  font-family:var(--mono);
  font-size:11px;
  padding:4px 7px;
  outline:none;
}
.col-search input::placeholder{ color:var(--text-faint); }
.col-search input:focus{ border-color:#3a4150; }

.scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:8px 0 8px;
  scrollbar-width: thin;
  scrollbar-color: #2a303c transparent;
}
.scroll::-webkit-scrollbar{ width:5px; }
.scroll::-webkit-scrollbar-thumb{ background:#2a303c; border-radius:3px; }
/* justify-content:flex-end breaks scrolling when content overflows; this
   spacer pushes short content to the bottom instead */
.scroll{ justify-content:flex-start; }
.scroll .spacer{ flex:1 0 auto; }

.day-mark{
  font-family:var(--mono);
  font-size:9.5px;
  color:var(--text-faint);
  text-transform:uppercase;
  letter-spacing:0.06em;
  padding:8px 12px 4px;
}

.msg{
  display:grid;
  grid-template-columns: 46px 56px 1fr auto;  /* verb col fits 8ch (longest: refactor) */
  gap:0 6px;
  align-items:baseline;
  padding:3px 12px 3px 10px;
  border-left:2px solid transparent;
  cursor:pointer;
  font-size:12px;
  line-height:1.35;
}
.msg:hover{ background:var(--panel); }
.msg.r1{ border-left-color:var(--issue-1); }
.msg.r2{ border-left-color:var(--issue-2); }
.msg.r3{ border-left-color:var(--issue-3); }
.msg.r4{ border-left-color:var(--issue-4); }
.msg.r5{ border-left-color:var(--issue-5); }

.msg .t{
  font-family:var(--mono);
  font-size:10px;
  color:var(--text-faint);
  white-space:nowrap;
}
.msg .verb{
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--text-dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.msg .txt{
  min-width:0;
  overflow-wrap:anywhere;   /* long paths/tokens must wrap, not widen the column */
}
.msg.hit{ background:rgba(111,184,242,0.10); }
.msg .fc{
  font-family:var(--mono);
  font-size:9.5px;
  color:var(--text-faint);
}
.msg b{ color:var(--accent); font-weight:600; }
.msg.muted{ color:var(--text-dim); }
.msg.hidden{ display:none; }
.msg.user .t::after{ content:"❯"; margin-left:3px; color:var(--text-faint); }
.msg.user{ background:rgba(79,209,197,0.07); }   /* dark turquoise tint on your turns */
.msg.user:hover{ background:rgba(79,209,197,0.13); }

/* pale category colors, verb text only */
.vc-read{ color:#9db8d2; }    /* read / setup / investigating */
.vc-plan{ color:#cfc397; }    /* plan / decide */
.vc-add{ color:#a3c9a0; }     /* add / refactor / rewrite / swap */
.vc-fix{ color:#d2b48f; }     /* fix */
.vc-verify{ color:#93cdc3; }  /* test / verify */
.vc-error{ color:#d29a94; }   /* error / revert / retry */
.vc-user{ color:#b6a9d4; }    /* ask / answer / you */
.vc-chore{ color:#9aa2b0; }   /* chore / commit */
.vc-report{ color:#c9a9c9; }  /* report (user-facing summaries) */

.inline{
  display:none;
  margin:2px 10px 6px 10px;
  padding:7px 9px;
  border-left:2px solid var(--border);
  background:var(--panel);
  border-radius:0 4px 4px 0;
  font-size:11.5px;
  line-height:1.45;
  color:var(--text-dim);
}
.inline.open{ display:block; }
.inline{ overflow-wrap:anywhere; }
.day-mark{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.day-mark.search-head{ color:var(--issue-5); }

/* full raw transcript excerpt, opened by double-click */
.rawbox{
  margin:2px 10px 8px 10px;
  padding:9px 11px;
  border-left:2px solid var(--issue-5);
  background:var(--bg);
  border-radius:0 4px 4px 0;
  font-family:var(--mono);
  font-size:10.5px;
  line-height:1.5;
  color:var(--text-dim);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  max-height:800px;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#2a303c transparent;
}

/* per-column view toggle, sitting at the right of the search bar (tiny =
   timeline, biggy = conversation). No controls at the top of the page by
   design; the search row has the room. */
.cv-btn{
  flex-shrink:0;
  font-family:var(--mono);
  font-size:9.5px;
  padding:0 9px;
  background:transparent;
  border:1px solid var(--border);
  border-radius:4px;
  color:var(--text-faint);
  cursor:pointer;
}
.cv-btn:hover{ color:var(--text-dim); border-color:#3a4150; }
.cv-btn.active{ color:var(--text-bright-dim); background:var(--panel-2); }

/* conversation view: one block per turn, full stored text */
.cv-turn{
  margin:0 8px 8px 8px;
  padding:6px 10px;
  background:var(--bg);
  border-left:2px solid var(--border);
  border-radius:0 4px 4px 0;
}
.cv-turn.cu{ border-left-color:var(--issue-1); }
.cv-head{
  display:flex;
  justify-content:space-between;
  font-family:var(--mono);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:3px;
}
.cv-role{ color:var(--text-dim); }
.cv-turn.cu .cv-role{ color:var(--issue-1); }
.cv-time{ color:var(--text-faint); }
.cv-text{
  font-family:var(--mono);
  font-size:11px;
  line-height:1.55;
  color:var(--text);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.cv-files{
  margin-top:5px;
  font-family:var(--mono);
  font-size:10px;
  color:var(--text-faint);
  overflow-wrap:anywhere;
}
.inline .files{
  margin-top:5px;
  font-family:var(--mono);
  font-size:10px;
  color:var(--text-faint);
  word-break:break-all;
}

/* ---------- situation recap (above search) ---------- */
.f-recap{
  flex-shrink:0;
  border-top:1px solid var(--border);
  padding:7px 10px 8px;
  font-family:var(--mono);
  font-size:10.5px;
  line-height:1.55;
  color:var(--text-bright-dim);
  max-height:130px;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#2a303c transparent;
}
.f-recap .rk{
  color:var(--issue-2);
  font-weight:600;
}
.f-recap .rt{
  display:block;
  white-space:pre-line;   /* synopsis arrives as "- " bullet lines */
}

/* ---------- footer (per-column heading) ---------- */
.footer{
  flex-shrink:0;
  border-top:1px solid var(--border);
  background:var(--panel);
  padding:8px 12px 9px;
}
.f-name{
  font-family:var(--mono);
  font-size:12.5px;
  font-weight:600;
  color:var(--accent);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.f-sub{ color:var(--text-bright-dim); font-weight:400; font-size:11px; }
.f-left{ display:flex; gap:8px; min-width:0; }
.f-right{ display:flex; gap:6px; flex-shrink:0; align-items:center; }
.f-ctx, .f-model{
  font-family:var(--mono);
  font-size:10px;
  color:var(--text-bright-dim);
}
.f-stat{
  font-family:var(--mono);
  font-size:9.5px;
  padding:1px 5px;
  border-radius:3px;
  border:1px solid var(--border);
  color:var(--text-dim);
}
/* footer tint: same hue semantics as the user's kitty panes (focus-bg.py) —
   working=blue, waiting/comment=amber, permission=red, done=green — but subtle */
.footer.st-working{ background:rgba(111,184,242,0.09); }
.footer.st-working .f-stat{ color:var(--issue-5); border-color:rgba(111,184,242,0.4); }
.footer.st-comment{ background:rgba(242,184,75,0.11); }
.footer.st-comment .f-stat{ color:var(--issue-2); border-color:rgba(242,184,75,0.5); }
.footer.st-permission{ background:rgba(242,117,90,0.13); }
.footer.st-permission .f-stat{ color:var(--issue-3); border-color:rgba(242,117,90,0.5); }
.footer.st-done{ background:rgba(110,209,140,0.09); }
.footer.st-done .f-stat{ color:#6ed18c; border-color:rgba(110,209,140,0.4); }
.f-path{
  font-family:var(--mono);
  font-size:10px;
  color:var(--text-bright-dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:1px;
}
.f-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:5px;
}
.f-time{
  font-family:var(--mono);
  font-size:10px;
  color:var(--text-bright-dim);
}
.f-churn{
  font-family:var(--mono);
  font-size:9.5px;
  color:var(--issue-3);
  border:1px solid rgba(242,117,90,0.4);
  background:rgba(242,117,90,0.08);
  padding:1px 5px;
  border-radius:3px;
}

/* ================= ALL SESSIONS VIEW ================= */
.all-view{ flex-direction:column; }
.grid-wrap{ flex:1; min-height:0; overflow-y:auto; }
.global-search{
  flex-shrink:0;
  order:2;
  padding:10px 20px;
  border-top:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--col-bg);
}
.fbtn{
  flex-shrink:0;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:6px;
  color:var(--text-dim);
  font-family:var(--mono);
  font-size:11px;
  padding:8px 12px;
  cursor:pointer;
}
.fbtn:hover{ border-color:#3a4150; }
.fbtn.active{ color:var(--issue-1); border-color:rgba(79,209,197,0.5); background:rgba(79,209,197,0.08); }
.global-search input{
  flex:1;
  max-width:520px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:6px;
  color:var(--text);
  font-family:var(--mono);
  font-size:13px;
  padding:9px 12px;
  outline:none;
}
.global-search input::placeholder{ color:var(--text-faint); }
.global-search input:focus{ border-color:#3a4150; }
.global-search .count{
  font-family:var(--mono);
  font-size:11px;
  color:var(--text-faint);
}

.grid{
  padding:18px 20px 40px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:12px;
}
/* "by folder" mode: one column per cwd, horizontal scroll */
.grid.folders{
  display:flex;
  align-items:flex-start;
  gap:14px;
  overflow-x:auto;
}
.folder-col{
  flex:0 0 290px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.folder-head{
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--text-faint);
  padding:2px 2px 4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.folder-head span{ color:var(--text-dim); }
.card-badges{ display:flex; gap:5px; align-items:center; flex-shrink:0; }
.badge-branch{
  font-family:var(--mono);
  font-size:11px;
  color:var(--issue-4);
}
.hit-count{
  font-family:var(--mono);
  font-size:9.5px;
  padding:2px 6px;
  border-radius:3px;
  color:var(--issue-5);
  border:1px solid rgba(111,184,242,0.4);
  background:rgba(111,184,242,0.08);
  white-space:nowrap;
}
.card-resume{
  font-family:var(--mono);
  font-size:9.5px;
  color:var(--text-faint);
  background:var(--col-bg);
  border:1px solid var(--border);
  border-radius:4px;
  padding:3px 7px;
  margin-bottom:9px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:copy;
}
.card-resume:hover{ color:var(--text-dim); border-color:#3a4150; }
.card-resume.copied{ color:var(--issue-1); border-color:rgba(79,209,197,0.5); }
.card-sub{
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--text-dim);
  margin-bottom:4px;
}

.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:7px;
  padding:14px 15px;
  cursor:pointer;
  transition: border-color .12s ease, background .12s ease;
}
.card:hover{ border-color:#3a4150; background:var(--panel-2); }
.card.hidden{ display:none; }

.card-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
  margin-bottom:6px;
}
.card-name{
  font-family:var(--mono);
  font-size:13px;
  font-weight:600;
  color:var(--accent);
}
.badge{
  font-family:var(--mono);
  font-size:9.5px;
  padding:2px 6px;
  border-radius:3px;
  white-space:nowrap;
  flex-shrink:0;
}
.badge.open{ color:var(--issue-1); border:1px solid rgba(79,209,197,0.4); background:rgba(79,209,197,0.08); }
.badge.idle{ color:var(--text-dim); border:1px solid var(--border); background:var(--col-bg); }
.badge.archived{ color:var(--text-faint); border:1px solid var(--border); background:var(--col-bg); }

.card-path{
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--text-faint);
  margin-bottom:10px;
  word-break:break-all;
}
.card-summary{
  font-size:12.5px;
  color:var(--text-dim);
  line-height:1.4;
  margin-bottom:12px;
}
.card-tags{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.card-tags span{
  font-family:var(--mono);
  font-size:9.5px;
  padding:1px 6px;
  border-radius:3px;
  color:var(--text-dim);
  background:var(--col-bg);
  border:1px solid var(--border);
}
.card-foot{
  display:flex;
  justify-content:space-between;
  font-family:var(--mono);
  font-size:10px;
  color:var(--text-faint);
  padding-top:8px;
  border-top:1px solid var(--border);
}


/* ---------- toast (act-layer results) ----------
   Every write says what happened. Sits above the bottom bar so it never covers
   the compose zone that produced it. */
.toast{
  position:fixed;
  left:50%;
  bottom:50px;
  transform:translate(-50%, 8px);
  max-width:min(520px, 90vw);
  padding:7px 14px;
  border-radius:5px;
  background:var(--panel-2);
  border:1px solid var(--border);
  color:var(--text);
  font-family:var(--mono);
  font-size:11px;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:opacity 140ms ease, transform 140ms ease;
  z-index:50;
}
.toast.show{ opacity:1; transform:translate(-50%, 0); }
.toast.warn{ border-color:rgba(242,184,75,0.5); color:var(--issue-2); }
.toast.bad{ border-color:rgba(242,117,90,0.5); color:var(--issue-3); }

/* ---------- reach the phone (M3) ---------- */

/* Standalone PWA: the deck runs under the notch and over the home indicator.
   Padding the bottom bar rather than the body keeps the columns full-bleed. */
.bottombar{
  padding-bottom:env(safe-area-inset-bottom, 0);
  height:calc(38px + env(safe-area-inset-bottom, 0));
}

.pushbtn{
  position:absolute;
  left:14px;
  background:transparent;
  border:1px solid var(--border);
  border-radius:4px;
  color:var(--text-faint);
  font-family:var(--mono);
  font-size:10px;
  padding:3px 8px;
  cursor:pointer;
}
#push-test{ left:76px; }
.pushbtn:hover{ border-color:#3a4150; color:var(--text-dim); }
.pushbtn.on{ color:var(--issue-1); border-color:rgba(79,209,197,0.5); }

/* Arrived here by tapping a notification: say which column that was. */
.column.linked{ box-shadow:inset 0 0 0 1px var(--issue-5); }

.build-banner{
  position:fixed;
  left:50%;
  bottom:calc(50px + env(safe-area-inset-bottom, 0));
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:5px;
  background:var(--panel-2);
  border:1px solid rgba(111,184,242,0.5);
  color:var(--issue-5);
  font-family:var(--mono);
  font-size:11px;
  z-index:60;
}
.build-banner button{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:3px;
  color:var(--accent);
  font-family:var(--mono);
  font-size:10.5px;
  padding:2px 8px;
  cursor:pointer;
}

/* ---------- the dialog peek + key strip (M3c) ----------
   Only visible while a live pane is blocked on something the approve buttons
   can't answer. It replaces nothing: the compose box stays, because a
   free-text "Other:" answer goes through it. */
.compose .peek{ display:none; }
.compose.peeking .peek{ display:block; margin-bottom:6px; }
.compose.peeking{ background:rgba(242,184,75,0.05); }

.peek-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:var(--mono);
  font-size:9.5px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--issue-2);
  margin-bottom:4px;
}
.peek-refresh{
  background:transparent;
  border:none;
  color:var(--text-faint);
  font-size:12px;
  cursor:pointer;
  padding:0 2px;
}
.peek-refresh:hover{ color:var(--accent); }
.peek-text{
  margin:0;
  max-height:190px;
  overflow:auto;
  padding:6px 7px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:4px;
  color:var(--text);
  font-family:var(--mono);
  font-size:10.5px;
  line-height:1.45;
  white-space:pre-wrap;
  word-break:break-word;
  -webkit-overflow-scrolling:touch;
}
/* couldn't re-read the pane: the text on screen is not evidence any more */
.peek.stale .peek-text{ opacity:0.45; border-style:dashed; }

.keystrip{
  display:flex;
  gap:4px;
  margin-top:6px;
}
.kbtn{
  flex:1;
  height:34px;                /* thumb-sized; this is the phone control */
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:4px;
  color:var(--text);
  font-family:var(--mono);
  font-size:13px;
  cursor:pointer;
  user-select:none;
  touch-action:manipulation;  /* no double-tap-to-zoom delay on the d-pad */
}
.kbtn:hover:not(:disabled){ border-color:#3a4150; color:var(--accent); }
.kbtn:active{ background:var(--panel); }
.kbtn:disabled{ color:var(--text-faint); cursor:progress; }
.kbtn[data-key="enter"]{ color:#6ed18c; border-color:rgba(110,209,140,0.35); }
.kbtn[data-key="esc"]{ color:var(--issue-3); font-size:10px; }
.peek-hint{
  margin-top:5px;
  font-family:var(--mono);
  font-size:9.5px;
  color:var(--text-faint);
}

/* ---------- the lock screen ----------
   Replaces window.prompt(): a modal prompt blocks the JS thread, can't be
   styled, is trivially dismissed into a half-loaded deck, and on a phone reads
   like a browser error rather than part of the app. This covers the chrome
   completely — with everything gated there is nothing to show until it's
   answered, so there is no half state to design for.

   Deliberately anonymous. At a public URL this is the one screen anybody can
   reach, so it carries no app name, no wording about tokens, and no hint about
   where the credential lives. */
.gate{
  display:none;
  position:fixed;
  inset:0;
  z-index:200;
  background:var(--bg);
  align-items:center;
  justify-content:center;
  padding:24px calc(24px + env(safe-area-inset-left, 0)) calc(24px + env(safe-area-inset-bottom, 0));
}
.gate.show{ display:flex; }
.gate-card{
  width:min(300px, 100%);
  display:grid;
  grid-template-columns:1fr auto;
  gap:7px;
}
.gate-input{
  min-width:0;
  /* 16px keeps iOS from zooming the viewport when the field takes focus */
  font-size:16px;
  font-family:var(--mono);
  padding:10px 11px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:5px;
  color:var(--text);
  outline:none;
}
.gate-input:focus{ border-color:#3a4150; }
.gate-go{
  height:100%;
  min-height:42px;            /* thumb-sized */
  padding:0 14px;
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:5px;
  color:var(--text-dim);
  font-family:var(--mono);
  font-size:12px;
  cursor:pointer;
  white-space:nowrap;
}
.gate-go:hover:not(:disabled){ border-color:#3a4150; color:var(--accent); }
.gate-go:disabled{ color:var(--text-faint); cursor:progress; }
.gate-err{
  grid-column:1 / -1;
  min-height:13px;
  font-family:var(--mono);
  font-size:10px;
  color:var(--issue-3);
}

/* ---------- start work (M4): the new-session button + project sheet ----------
   The deck stopped being an observer here. The button lives in the tab row so
   it exists in both views and on a phone; the sheet is a bottom sheet for the
   same reason the nav is at the bottom — that is where the thumb is. */

.newbtn{
  align-self:center;
  margin-right:6px;
  background:transparent;
  border:1px solid var(--border);
  border-radius:4px;
  color:var(--text-faint);
  font-family:var(--mono);
  font-size:10px;
  padding:3px 8px;
  cursor:pointer;
  white-space:nowrap;
}
.newbtn:hover{ border-color:rgba(121,184,184,0.5); color:var(--issue-1); }

/* Per-folder shortcut in the by-folder grid: spawn straight into that project
   without going through the picker. */
.folder-new{
  float:right;
  background:transparent;
  border:1px solid var(--border);
  border-radius:3px;
  color:var(--text-faint);
  font-family:var(--mono);
  font-size:10px;
  line-height:1;
  padding:2px 6px;
  cursor:pointer;
}
.folder-new:hover{ border-color:rgba(121,184,184,0.5); color:var(--issue-1); }

.sheet{
  display:none;
  position:fixed;
  inset:0;
  z-index:150;
  background:rgba(6,12,19,0.72);
  align-items:flex-end;
  justify-content:center;
}
.sheet.show{ display:flex; }
.sheet-card{
  width:min(520px, 100%);
  max-height:min(86vh, 620px);
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px 12px calc(12px + env(safe-area-inset-bottom, 0));
  background:var(--col-bg);
  border:1px solid var(--border);
  border-radius:10px 10px 0 0;
}
.sheet-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:var(--mono);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.07em;
  color:var(--text-faint);
}
.sheet-x{
  background:transparent; border:none; cursor:pointer;
  color:var(--text-faint); font-size:18px; line-height:1; padding:0 4px;
}
.sheet-x:hover{ color:var(--accent); }
.sheet-filter, .sheet-prompt{
  width:100%;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:5px;
  color:var(--text);
  font-family:var(--mono);
  /* 16px: anything smaller makes iOS zoom the viewport on focus */
  font-size:16px;
  padding:9px 10px;
  outline:none;
}
.sheet-prompt{ font-size:13px; resize:vertical; max-height:130px; }
.sheet-filter:focus, .sheet-prompt:focus{ border-color:#3a4150; }
.sheet-list{
  flex:1;
  min-height:90px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--border);
  border-radius:5px;
  background:var(--panel);
}
.sheet-row{
  display:block;
  width:100%;
  text-align:left;
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(38,57,77,0.6);
  color:var(--text);
  font-family:var(--mono);
  padding:9px 10px;
  cursor:pointer;
}
.sheet-row:last-child{ border-bottom:none; }
.sheet-row:hover{ background:var(--panel-2); }
.sheet-row.sel{ background:rgba(121,184,184,0.1); box-shadow:inset 2px 0 0 var(--issue-1); }
.sheet-row .sr-name{ font-size:12.5px; }
.sheet-row .sr-pin{ color:var(--issue-2); font-size:10px; margin-left:5px; }
.sheet-row .sr-path{ font-size:10px; color:var(--text-faint); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sheet-row .sr-meta{ font-size:9.5px; color:var(--text-dim); margin-top:3px; }
.sheet-empty{ padding:12px 10px; font-family:var(--mono); font-size:11px; color:var(--text-faint); }
.sheet-opt{
  display:flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:11px; color:var(--text-dim); cursor:pointer;
}
.sheet-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sheet-target{
  flex:1; min-width:0;
  font-family:var(--mono); font-size:10px; color:var(--text-faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sheet-go{
  min-height:40px;             /* thumb-sized: this one starts a process */
  padding:0 18px;
  background:var(--panel-2);
  border:1px solid rgba(121,184,184,0.5);
  border-radius:5px;
  color:var(--issue-1);
  font-family:var(--mono);
  font-size:12px;
  cursor:pointer;
}
.sheet-go:disabled{ color:var(--text-faint); border-color:var(--border); cursor:not-allowed; }
.sheet-go:not(:disabled):hover{ background:rgba(121,184,184,0.12); }