/* MusicMin — Crew talk (3.4). Always dark, like the call pad: it opens over a chart, the MD View
   and the Presenter's Control View alike, and must read the same on all three. One colour per desk. */
:root {
  --crew-md:#f59e0b; --crew-sound:#14b8a6; --crew-digital:#3b82f6; --crew-stream:#f43f5e;
  --crew-leader:#fb923c; --crew-host:#84cc16; --crew-band:#a78bfa; --crew-crew:#94a3b8;
}
.desk-md { --crew-c:var(--crew-md); } .desk-sound { --crew-c:var(--crew-sound); } .desk-digital { --crew-c:var(--crew-digital); }
.desk-stream { --crew-c:var(--crew-stream); } .desk-leader { --crew-c:var(--crew-leader); } .desk-host { --crew-c:var(--crew-host); }
.desk-band { --crew-c:var(--crew-band); } .desk-crew { --crew-c:var(--crew-crew); }

/* Entry points: a pill in Live Flow (above Call MD), a button in MD View's bar and the Presenter's. */
.crew-pill {
  position:fixed; right:148px; bottom:84px; z-index:2002; height:48px; padding:0 16px;
  display:flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.3); border-radius:999px;
  background:#0f766e; color:#fff; font:inherit; font-size:15px; font-weight:850; cursor:pointer;
  box-shadow:0 10px 28px rgba(15,118,110,.35); -webkit-tap-highlight-color:transparent;
}
.crew-pill[hidden], .live-view.is-stage .crew-pill { display:none !important; }
.stage-bar .stage-crew-btn { border-color:#14b8a6; color:#5eead4; font-weight:800; }
body.light .stage-bar .stage-crew-btn { color:#0f766e; }
.stage-bar .stage-crew-btn[hidden], .presenter-crew-btn[hidden] { display:none !important; }
.presenter-crew-btn { border-color:#14b8a6 !important; color:#5eead4 !important; font-weight:800; }
.crew-badge { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; margin-left:6px; padding:0 6px; border-radius:999px; background:#ef4444; color:#fff; font-size:12px; font-weight:900; line-height:1; }
.crew-pill.is-alone { bottom:23px; }
@media (max-width:768px), ((orientation:landscape) and (max-height:500px) and (pointer:coarse)) {
  .crew-pill { right:126px; bottom:calc(68px + env(safe-area-inset-bottom)); height:44px; padding:0 13px; font-size:14px; }
  .crew-pill.is-alone { bottom:calc(13px + env(safe-area-inset-bottom)); }
}

/* The panel: above Live View (2000), MD View's pads (2006) and the Control View (10000); below an
   in-page projector output (12000), so it can never be on the wall. */
.crew-panel {
  position:fixed; top:calc(12px + env(safe-area-inset-top)); right:12px; z-index:11500;
  width:min(440px, calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; padding:14px;
  border:1px solid color-mix(in srgb, var(--crew-c, #14b8a6) 55%, transparent); border-radius:16px;
  background:rgba(15,23,42,.98); color:#fff; box-shadow:0 18px 40px rgba(0,0,0,.5);
  font-family:inherit; font-size:14px; text-align:left;
}
.crew-panel[hidden] { display:none; }
.crew-panel h3 { margin:0; font-size:16px; }
.crew-panel h4 { margin:14px 0 6px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#cbd5e1; }
.crew-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.crew-panel button {
  min-height:40px; padding:6px 12px; border:1px solid rgba(255,255,255,.22); border-radius:12px;
  background:rgba(255,255,255,.06); color:#fff; font:inherit; font-size:14px; font-weight:800; cursor:pointer;
}
.crew-panel button:hover { border-color:var(--crew-c, #14b8a6); }
.crew-close { width:40px; padding:0 !important; }
.crew-me { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:8px 0 10px; }
.crew-k { font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#94a3b8; }
.crew-me strong { padding:3px 10px; border-radius:999px; background:var(--crew-c, #14b8a6); color:#0b1220; }
.crew-me .crew-desk-md { --crew-c:var(--crew-md); } .crew-me .crew-desk-sound { --crew-c:var(--crew-sound); } .crew-me .crew-desk-digital { --crew-c:var(--crew-digital); }
.crew-me .crew-desk-stream { --crew-c:var(--crew-stream); } .crew-me .crew-desk-leader { --crew-c:var(--crew-leader); } .crew-me .crew-desk-host { --crew-c:var(--crew-host); }

/* Inputs: dark whatever the app's theme (its light theme forces white inputs with !important). */
.crew-panel input:not([type="checkbox"]):not([type="radio"]), .crew-panel select {
  min-height:40px; padding:6px 10px; border:1px solid rgba(255,255,255,.3) !important; border-radius:10px !important;
  background:#0b1220 !important; color:#fff !important; -webkit-text-fill-color:#fff; caret-color:#fff; font:inherit; font-size:14px;
}
.crew-panel input::placeholder { color:#94a3b8; -webkit-text-fill-color:#94a3b8; opacity:1; }

.crew-to { display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:6px; }
.crew-panel .crew-chip { display:flex; flex-direction:column; align-items:flex-start; gap:1px; min-height:48px; padding:6px 10px; border-left:4px solid var(--crew-c); text-align:left; }
.crew-panel .crew-chip.is-on { background:color-mix(in srgb, var(--crew-c) 26%, transparent); border-color:var(--crew-c); }
.crew-chip.is-empty { opacity:.55; }
.crew-chip-name { font-size:13px; font-weight:850; }
.crew-chip-who { display:flex; align-items:center; gap:5px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:600; color:#cbd5e1; }
.crew-dot { width:7px; height:7px; flex:0 0 auto; border-radius:50%; background:#4ade80; }

.crew-hint { margin:8px 0 0; padding:8px 10px; border-radius:10px; background:rgba(148,163,184,.14); color:#cbd5e1; font-size:12.5px; line-height:1.35; }
.crew-hint.is-warn { background:rgba(245,158,11,.16); color:#fde68a; }
.crew-presets { display:grid; grid-template-columns:repeat(2, 1fr); gap:6px; margin-top:10px; }
.crew-panel .crew-preset { min-height:46px; text-align:left; }
.crew-write, .crew-replyform { display:flex; gap:6px; margin-top:8px; min-width:0; }
.crew-write input, .crew-replyform input { flex:1 1 0; width:0 !important; min-width:0; }
.crew-panel .crew-send { border-color:var(--crew-c, #14b8a6); background:var(--crew-c, #14b8a6); color:#0b1220; }
.crew-panel .crew-cancel { width:40px; padding:0; }
.crew-panel .crew-edit { min-height:32px; margin-top:8px; padding:4px 12px; font-size:12px; opacity:.85; }

.crew-item { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 10px; margin-top:6px; border-left:4px solid var(--crew-c, #94a3b8); border-radius:10px; background:rgba(255,255,255,.05); }
.crew-item.is-request { --crew-c:var(--crew-band); background:rgba(167,139,250,.12); }
.crew-item.is-urgent { --crew-c:#ef4444; background:rgba(239,68,68,.16); }
.crew-item.is-answered { opacity:.75; }
.crew-item-text { flex:1 1 180px; min-width:0; display:flex; flex-direction:column; gap:2px; }
.crew-item-text strong { font-size:14px; overflow-wrap:anywhere; }
.crew-item-text span { font-size:12px; color:#cbd5e1; }
.crew-answer { max-width:100%; font-size:13px; font-weight:800; color:#86efac; overflow-wrap:anywhere; }
.crew-answer.is-waiting { color:#94a3b8; font-weight:700; }
.crew-answers { flex:1 1 100%; display:flex; gap:6px; }
.crew-answers button { flex:1; min-height:38px; }
.crew-panel .crew-ok, .crew-banner .crew-ok { border-color:#22c55e; background:#22c55e; color:#052e16; }
.crew-replyform { flex:1 1 100%; }

.crew-editor .crew-note { margin:10px 0 6px; font-size:12px; color:#cbd5e1; }
.crew-edit-row { display:flex; gap:6px; margin-bottom:6px; }
.crew-edit-row input { flex:1 1 0; width:0 !important; min-width:0; }
.crew-panel .crew-add { width:100%; border-style:dashed; }
.crew-edit-actions { display:flex; gap:8px; margin-top:10px; }
.crew-edit-actions .crew-reset { margin-right:auto; font-size:12px; opacity:.85; }
.crew-panel .crew-save { border-color:var(--crew-c, #14b8a6); background:var(--crew-c, #14b8a6); color:#0b1220; }

/* An incoming message: top centre, in the sender's colour, with Got it / Nope / Reply on it. */
.crew-banner {
  position:fixed; left:50%; top:calc(10px + env(safe-area-inset-top)); transform:translateX(-50%); z-index:11600;
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; width:max-content; max-width:calc(100vw - 24px);
  padding:12px 16px; border:2px solid var(--crew-c, #14b8a6); border-radius:16px;
  background:#0b1220; color:#fff; box-shadow:0 0 0 3px rgba(0,0,0,.55), 0 18px 50px rgba(0,0,0,.6);
  cursor:pointer; animation:crew-in .25s ease-out;
}
.crew-banner[hidden] { display:none; }
.crew-banner.is-urgent { border-color:#ef4444; animation:crew-in .25s ease-out, crew-urgent 1s ease-in-out infinite; }
.crew-banner.is-leaving { animation:crew-out .3s ease forwards; }
.crew-banner-text { display:flex; flex-direction:column; gap:2px; min-width:0; border-left:5px solid var(--crew-c, #14b8a6); padding-left:10px; }
.crew-banner-text strong { font-size:clamp(18px, 2.4vw, 26px); font-weight:900; overflow-wrap:anywhere; }
.crew-banner-text small { font-size:12px; font-weight:700; color:#cbd5e1; text-transform:uppercase; letter-spacing:.05em; }
.crew-banner-actions { display:flex; gap:6px; }
.crew-banner button { min-height:40px; padding:6px 14px; border:1px solid rgba(255,255,255,.3); border-radius:999px; background:rgba(255,255,255,.08); color:#fff; font:inherit; font-size:14px; font-weight:850; cursor:pointer; }
@keyframes crew-in { from { opacity:0; transform:translate(-50%, -12px); } to { opacity:1; transform:translate(-50%, 0); } }
@keyframes crew-out { to { opacity:0; transform:translate(-50%, -12px); } }
@keyframes crew-fade { to { opacity:0; } }
@keyframes crew-urgent { 50% { box-shadow:0 0 0 12px rgba(239,68,68,.35), 0 18px 50px rgba(0,0,0,.6); } }
@media (max-width:768px), ((orientation:landscape) and (max-height:500px) and (pointer:coarse)) {
  .crew-panel { left:8px; right:8px; width:auto; top:calc(8px + env(safe-area-inset-top)); max-height:calc(100dvh - 16px); }
  .crew-banner { width:auto; left:8px; right:8px; transform:none; animation:none; }
  .crew-banner.is-leaving { animation:crew-fade .3s ease forwards; }
  .crew-banner-actions { flex:1 1 100%; }
  .crew-banner-actions button { flex:1; }
}

/* The MD's calls to the band, in the Presenter's Control View (never on the output): the same dark
   amber card as the MD's call elsewhere, under the top bar. "Show Bridge" waits for the operator. */
.presenter-call {
  position:fixed; left:50%; top:calc(74px + env(safe-area-inset-top)); transform:translateX(-50%); z-index:11550;
  display:flex; align-items:center; gap:12px; width:max-content; max-width:calc(100vw - 24px);
  padding:10px 12px 10px 18px; border:2px solid #f5ad32; border-radius:16px; background:#663d08; color:#fff3d6;
  box-shadow:0 0 0 3px rgba(0,0,0,.55), 0 18px 50px rgba(0,0,0,.6); animation:crew-in .25s ease-out;
}
.presenter-call[hidden] { display:none; }
.presenter-call.is-leaving { animation:crew-out .3s ease forwards; }
.presenter-call-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.presenter-call-text strong { font-size:clamp(20px, 2.4vw, 30px); font-weight:900; overflow-wrap:anywhere; }
.presenter-call-text small { font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#f5cd87; }
.presenter-call button { min-height:42px; padding:6px 14px; border:1px solid rgba(255,243,214,.45); border-radius:999px; background:transparent; color:#fff3d6; font:inherit; font-size:15px; font-weight:850; cursor:pointer; white-space:nowrap; }
.presenter-call .presenter-call-show { border-color:#f5ad32; background:#f5ad32; color:#2b1a03; }
.presenter-call .presenter-call-close { width:42px; padding:0; }
@media (max-width:768px), ((orientation:landscape) and (max-height:500px) and (pointer:coarse)) {
  .presenter-call { left:8px; right:8px; width:auto; transform:none; animation:none; flex-wrap:wrap; }
  .presenter-call.is-leaving { animation:crew-fade .3s ease forwards; }
  .presenter-call-text { flex:1 1 100%; }
}
.crew-log-head { display:flex; align-items:center; gap:10px; margin-top:14px; }
.crew-log-head h4 { margin:0; flex:1; }
.crew-panel .crew-link { min-height:30px; padding:2px 10px; border:0; background:transparent; color:#5eead4; font-size:12.5px; font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.crew-banner-text .crew-banner-more { color:#5eead4; text-transform:none; letter-spacing:0; }

/* 3.9.0 — urgent messages: a toggle beside the message box; red until answered. */
.crew-panel .crew-urgent { flex:0 0 auto; padding:6px 10px; color:#fca5a5; }
.crew-panel .crew-urgent.is-on { border-color:#ef4444; background:#ef4444; color:#fff; }
.crew-write.is-urgent input { border-color:#ef4444 !important; }
.crew-panel .crew-preset.is-urgent { border-color:rgba(239,68,68,.7); }
.crew-panel .crew-bell { min-height:34px; padding:2px 10px; margin-left:auto; }
.crew-panel .crew-bell:not(.is-on) { opacity:.6; }

/* The run sheet: where the service is, what is next, and its clock. */
.crew-plan { margin:10px 0 4px; padding:10px 12px; border:1px solid rgba(148,163,184,.3); border-radius:12px; background:rgba(255,255,255,.04); }
.crew-plan.is-sending { opacity:.7; }
.crew-plan-line { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; min-width:0; }
.crew-plan-line + .crew-plan-line { margin-top:4px; }
.crew-plan-line strong { font-size:15px; font-weight:850; overflow-wrap:anywhere; }
.crew-plan-k { flex:0 0 40px; font-size:11px; font-weight:850; letter-spacing:.06em; text-transform:uppercase; color:#94a3b8; }
.crew-plan-age { font-size:12px; font-weight:700; color:#94a3b8; }
.crew-plan-song { font-size:12.5px; font-weight:750; color:#cbd5e1; }
.crew-plan-song.is-changed { color:#fbbf24; }
.crew-plan-clock { margin-top:6px; font-size:13px; font-weight:800; color:#5eead4; font-variant-numeric:tabular-nums; }
.crew-plan-clock.is-over { color:#fca5a5; }
.crew-plan-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.crew-panel .crew-plan-btn { min-height:36px; padding:4px 10px; font-size:13px; }
.crew-panel .crew-plan-btn.is-on { border-color:#fbbf24; background:rgba(251,191,36,.18); }
.crew-plan-choose { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:6px; margin-top:8px; }
.crew-panel .crew-plan-song-btn { min-height:40px; text-align:left; font-size:13px; }
.crew-panel .crew-plan-song-btn.is-on { border-color:#fbbf24; }

/* On the Presenter's Control View (never the output): a chip in the top bar beside Crew. */
.crew-plan-chip { display:inline-flex; align-items:stretch; min-width:0; max-width:min(250px, 20vw); border:1px solid rgba(94,234,212,.45); border-radius:999px; overflow:hidden; }
.crew-plan-chip[hidden] { display:none !important; }
.crew-plan-chip button { border:0; background:transparent; color:#e2e8f0; font:inherit; cursor:pointer; }
.crew-plan-chip .crew-plan-chip-open { display:inline-flex; align-items:center; gap:6px; min-width:0; min-height:34px; padding:2px 10px 2px 12px; font-size:12.5px; font-weight:750; }
.crew-plan-chip-k { font-size:10px; font-weight:850; letter-spacing:.06em; text-transform:uppercase; color:#94a3b8; }
.crew-plan-chip-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crew-plan-chip-time { flex:0 0 auto; color:#5eead4; font-variant-numeric:tabular-nums; }
.crew-plan-chip.is-over { border-color:rgba(239,68,68,.6); }
.crew-plan-chip.is-over .crew-plan-chip-time { color:#fca5a5; }
.crew-plan-chip .crew-plan-chip-next { min-width:34px; padding:0 10px; border-left:1px solid rgba(94,234,212,.35); color:#5eead4; font-size:14px; font-weight:900; }
.crew-plan-chip .crew-plan-chip-next:disabled { opacity:.4; cursor:default; }
.crew-plan-chip button:hover:not(:disabled) { background:rgba(94,234,212,.12); }
.presenter-call.is-urgent { border-color:#ef4444; background:#7f1d1d; color:#fff; animation:crew-in .25s ease-out, crew-urgent 1s ease-in-out infinite; }
.presenter-call.is-urgent .presenter-call-text small { color:#fecaca; }
@media (max-width:768px), ((orientation:landscape) and (max-height:500px) and (pointer:coarse)) {
  .crew-plan-chip { max-width:52vw; }
  .crew-plan-chip-k { display:none; }
}
.crew-edit-actions { flex-wrap:wrap; }
.crew-panel .crew-save-team { border-color:#14b8a6; background:#14b8a6; color:#04201d; }

/* 3.9.0 B — what is on screen, and the ready check board. */
.crew-onscreen { margin:6px 0 0; padding:6px 10px; border-radius:10px; background:rgba(59,130,246,.14); color:#bfdbfe; font-size:12.5px; font-weight:750; }
.crew-onscreen.is-off { background:rgba(245,158,11,.18); color:#fde68a; }
.crew-board { margin:10px 0 4px; padding:8px 12px; border:1px solid rgba(148,163,184,.3); border-radius:12px; background:rgba(255,255,255,.03); }
.crew-board.has-issues { border-color:rgba(239,68,68,.55); }
.crew-board-head { display:flex; align-items:center; gap:8px; }
.crew-panel .crew-board-toggle { padding-left:0; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:#e2e8f0; text-decoration:none; }
.crew-board-sum { display:flex; gap:10px; margin-left:auto; font-size:12.5px; }
.crew-board-sum .is-ready { color:#86efac; } .crew-board-sum .is-issue { color:#fca5a5; } .crew-board-sum .is-wait { color:#94a3b8; }
.crew-board-mine { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px; }
.crew-panel .crew-ready-yes.is-on { border-color:#22c55e; background:rgba(34,197,94,.22); }
.crew-panel .crew-ready-no.is-on { border-color:#ef4444; background:rgba(239,68,68,.2); }
.crew-board-list { display:flex; flex-direction:column; gap:4px; margin-top:8px; max-height:260px; overflow:auto; }
.crew-board-row { display:flex; align-items:center; gap:8px; padding:5px 8px; border-left:3px solid #475569; border-radius:8px; background:rgba(255,255,255,.04); font-size:12.5px; }
.crew-board-row.is-ready { border-left-color:#22c55e; }
.crew-board-row.is-issue { border-left-color:#ef4444; background:rgba(239,68,68,.12); }
.crew-board-who { display:flex; align-items:baseline; gap:6px; min-width:0; flex:1; }
.crew-board-who strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crew-board-who small { color:#94a3b8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crew-board-state { flex:0 1 auto; font-weight:800; color:#94a3b8; text-align:right; overflow-wrap:anywhere; }
.crew-board-row.is-ready .crew-board-state { color:#86efac; }
.crew-board-row.is-issue .crew-board-state { color:#fca5a5; }
/* The MD's view of the wall, beside Crew in MD View's bar. */
.stage-bar .stage-onscreen { display:inline-flex; align-items:center; max-width:220px; min-height:32px; padding:2px 10px; border:1px solid rgba(59,130,246,.55); border-radius:999px; color:#bfdbfe; font-size:13px; font-weight:750; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stage-bar .stage-onscreen[hidden] { display:none !important; }
.stage-bar .stage-onscreen.is-off { border-color:#f59e0b; background:rgba(245,158,11,.2); color:#fde68a; }
.stage-bar .stage-onscreen.is-blank { color:#94a3b8; border-color:rgba(148,163,184,.5); }
body.light .stage-bar .stage-onscreen { color:#1d4ed8; }
@media (max-width:768px), ((orientation:landscape) and (max-height:500px) and (pointer:coarse)) {
  .stage-bar .stage-onscreen { max-width:120px; font-size:12px; }
}

/* 3.9.0 C — the service debrief: a sheet over Crew talk, and inline in the event's Status & notes. */
.crew-debrief { z-index:11520; width:min(560px, calc(100vw - 24px)); }
.crew-debrief[hidden] { display:none; }
.crew-debrief .crew-plan-btn { margin-top:10px; }
.crew-debrief-sum p { margin:4px 0; font-weight:700; }
.crew-debrief-kept { font-size:12px; font-weight:600 !important; opacity:.7; }
.crew-debrief-sec { margin-top:12px; }
.crew-debrief-sec h4 { margin:0 0 6px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; opacity:.8; }
.crew-debrief-sec ul { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:3px; font-size:13px; line-height:1.4; }
.crew-debrief-sec li b { font-variant-numeric:tabular-nums; margin-right:4px; }
.crew-debrief-sec.is-issues { padding:8px 10px; border-left:4px solid #ef4444; border-radius:8px; background:rgba(239,68,68,.1); }
.crew-debrief-sec li.is-urgent { color:#ef4444; }
.crew-debrief-sec li.is-unanswered, .crew-debrief-sec li.is-slow { color:#d97706; }
.crew-debrief-out { opacity:.75; }
.crew-debrief-inline { margin:6px 0 14px; }
.crew-debrief-inline .btn { margin-top:10px; }

.crew-pending{border:1px solid #f87171;border-radius:12px;padding:10px;margin:12px 0}.crew-pending h4{margin:0 0 8px;color:#fca5a5}.crew-pending .crew-item{display:flex;flex-wrap:wrap;gap:8px}.crew-pending .crew-item>strong{width:100%}

/* 4.0.0 — one row of answers; the note that says what Delivered / Got it / Done mean, once. */
.crew-item .crew-answers:empty { display:none; }
.crew-log .crew-note { margin:6px 0 2px; padding:6px 10px; border-radius:10px; background:rgba(148,163,184,.12); color:#cbd5e1; font-size:12px; line-height:1.35; }
.crew-panel .crew-info { min-width:30px; padding:2px 6px; text-decoration:none; font-size:15px; }
.crew-me .crew-standing { color:#fde68a; }
.crew-quick-bar { display:flex; align-items:center; gap:8px; margin-top:6px; }
.crew-quick-bar .crew-quick { padding-left:0; color:#e2e8f0; text-decoration:none; font-size:13px; }
.crew-panel .crew-quick-bar .crew-edit { margin:0 0 0 auto; }
.crew-panel .crew-plan-fold { display:flex; align-items:baseline; gap:6px; width:100%; min-height:36px; padding:4px 2px; border:0; background:transparent; text-align:left; font-weight:700; }
.crew-plan.is-folded { padding:4px 10px; }
.crew-plan-fold .crew-plan-k { flex:0 0 auto; }
.crew-plan-fold-now { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.crew-plan-fold-next { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; color:#cbd5e1; }
.crew-plan-fold-clock { flex:0 0 auto; margin-left:auto; font-size:12.5px; font-weight:800; color:#5eead4; font-variant-numeric:tabular-nums; }
.crew-plan-fold-clock.is-over { color:#fca5a5; }
.crew-plan-fold-more { flex:0 0 auto; color:#94a3b8; }
.crew-plan-fold-next + .crew-plan-fold-more { margin-left:auto; }
.crew-panel .crew-plan-shut { display:block; margin:-2px 0 4px; padding-left:0; color:#94a3b8; text-decoration:none; font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
/* What is waiting on me, first on a phone. */
.crew-inbox { margin:8px 0 4px; padding:2px 10px 10px; border:1px solid rgba(251,191,36,.55); border-radius:12px; background:rgba(251,191,36,.06); }
.crew-inbox h4 { margin:8px 0 4px; color:#fde68a; }
@media (max-width:768px), ((orientation:landscape) and (max-height:500px) and (pointer:coarse)) {
  .crew-panel.is-phone { padding:10px 12px 12px; }
  .crew-panel.is-phone .crew-head { flex-wrap:wrap; }
  .crew-panel.is-phone .crew-head h3 { flex:0 0 auto; }
  .crew-panel.is-phone .crew-head .crew-me { flex:1 1 auto; justify-content:flex-end; margin:0; gap:6px; }
  .crew-panel.is-phone .crew-head .crew-me strong { padding:2px 9px; font-size:13px; }
  .crew-panel.is-phone .crew-head .crew-k { font-size:10.5px; }
  .crew-panel.is-phone .crew-head .crew-bell { margin-left:0; }
  .crew-panel.is-phone .crew-head .crew-me select { min-height:34px; max-width:42vw; padding:4px 8px; font-size:13px; }
  .crew-panel.is-phone .crew-head + .crew-to, .crew-panel.is-phone .crew-inbox + .crew-to { margin-top:8px; }
  .crew-inbox h4 { margin-top:6px; }
  .crew-panel.is-phone .crew-to { display:flex; flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; gap:6px; margin:0 -12px; padding:0 12px 4px; scrollbar-width:none; }
  .crew-panel.is-phone .crew-to::-webkit-scrollbar { display:none; }
  .crew-panel.is-phone .crew-chip { flex:0 0 auto; min-width:96px; max-width:150px; min-height:44px; scroll-snap-align:start; }
  .crew-panel.is-phone .crew-plan { margin-top:8px; }
  .crew-panel.is-phone .crew-log-head { margin-top:10px; }
  /* Each answer keeps its words on one line: the longest (Working on it) takes more room. */
  .crew-panel.is-phone .crew-answers button { flex:1 1 auto; padding:6px 8px; font-size:13.5px; white-space:nowrap; }
}
/* A phone on its side: the answers sit beside the message instead of under it. */
@media ((orientation:landscape) and (max-height:500px) and (pointer:coarse)) {
  .crew-panel.is-phone .crew-item > .crew-answers { flex:0 1 360px; }
  .crew-panel.is-phone .crew-item { padding:6px 10px; }
}