/* bag_bite.css — ../roll_legs/roll_legs.css (the rating panel, the comment,
   the buttons coloured from the page's PASS block, admin mode, the phone
   layout) with the skeleton card and the two punch lanes in place of the roll
   lane, and no examples sheet. */

:root {
  --cant: #8e8e93;
  --guard: #8e8e93;
}

.nav-sub { font-size: 12px; color: var(--ink-dim); }
.nav-link { font-size: 12px; color: var(--accent); text-decoration: none; }
.sync-chip { font-size: 12px; color: var(--ink-dim); }
.sync-chip.err { color: var(--no); }
.sync-chip[hidden] { display: none; }

/* ── the left panel ─────────────────────────────────────────────────────── */
#re-panel {
  flex: none; width: 340px; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
}
#re-panel .card { padding: 14px; }
.count { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-dim); }
.hint { font-size: 12px; color: var(--ink-dim); line-height: 1.45; margin: 6px 0 0; }
.muted { color: var(--ink-dim); }
#re-panel kbd {
  display: inline-block; min-width: 14px; padding: 0 4px; border-radius: 4px;
  border: 1px solid var(--line); background: var(--fill); font: 11px ui-monospace, Menlo, monospace;
  color: var(--ink-dim); vertical-align: middle; text-align: center;
}

#watch { font-size: 14px; line-height: 1.4; }
#watch b { color: var(--ink); }
#progress-bar { height: 4px; border-radius: 2px; background: var(--fill); margin: 10px 0 6px; overflow: hidden; }
#progress-fill { height: 100%; width: 0; background: var(--accent); }
#progress { font-size: 12px; }

#question { font-size: 16px; font-weight: 640; letter-spacing: -.01em; line-height: 1.3; margin: 0; }
#buttons { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.rate {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; text-align: left;
  border: 1px solid var(--line); border-left: 4px solid var(--tone); border-radius: 8px;
  background: var(--fill); color: var(--ink); padding: 8px 10px; font: inherit; cursor: pointer;
  touch-action: manipulation;
}
.rate:hover { border-color: var(--ink-dim); border-left-color: var(--tone); }
.rate .name { font-size: 14px; font-weight: 600; }
.rate .desc { grid-column: 1 / -1; font-size: 12px; color: var(--ink-dim); line-height: 1.35; }
.rate.chosen { background: color-mix(in srgb, var(--tone) 22%, var(--card)); outline: 2px solid var(--tone); outline-offset: 1px; }
.rate.flash { transform: scale(.98); }
.rate { --tone: var(--cant); }   /* each button's colour is its rating's `tone` in bag_bite.js's PASS block */

/* the comment; Can't tell asks for it (.need) and offers quick reasons */
.comment-label { display: block; font-size: 12px; font-weight: 600; margin-top: 12px; }
#comment {
  display: block; width: 100%; box-sizing: border-box; margin-top: 4px; resize: vertical; min-height: 44px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--fill); color: var(--ink);
  padding: 6px 8px; font: inherit; font-size: 13px; line-height: 1.4;
}
#comment:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
#comment.need { outline: 2px solid var(--bad); outline-offset: 0; border-color: transparent; }
#reasons { margin-top: 6px; }
#reasons[hidden] { display: none; }
.reasons-ask { font-size: 12px; color: var(--bad); font-weight: 600; margin-bottom: 4px; }
#reason-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  border: 1px solid var(--line); border-radius: 999px; background: var(--fill); color: var(--ink);
  padding: 3px 10px; font: inherit; font-size: 12px; cursor: pointer;
}
.chip:hover { border-color: var(--ink-dim); }
#done { font-size: 14px; padding: 10px 0; }

.review-actions { display: flex; flex-wrap: wrap; gap: 8px; }   /* admin's four buttons wrap */
.review-actions button {
  flex: 1; white-space: nowrap; border: 1px solid var(--line); border-radius: 8px;
  background: var(--fill); color: var(--ink); padding: 6px 10px; font: inherit; font-size: 13px; cursor: pointer;
}
.review-actions button:hover { border-color: var(--ink-dim); }

/* ── the video ───────────────────────────────────────────────────────────── */
#clip-loading {
  position: absolute; left: 12px; top: 10px; z-index: 3; font-size: 12px; color: #fff;
  background: rgba(0,0,0,.5); padding: 3px 8px; border-radius: 6px;
}
#clip-loading[hidden] { display: none; }
/* The clip is short and the drop small: let the picture fill its box rather
   than sit at the file's own pixel size. */
#video-player { width: 100%; height: 100%; object-fit: contain; }

/* the 0.5x switch next to the speed menu */
.half-btn {
  height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line);
  background: transparent; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer;
}
.half-btn:hover { border-color: var(--ink-dim); }
.half-btn.on { background: var(--accent-wash); color: var(--accent-on-wash); border-color: transparent; }

/* ── the punch lanes: lead hand on top, rear below, the punch rated orange ── */
.seg-lane.lane-punch { height: 16px; }
.seg-lane .bb-band {
  position: absolute; top: 2px; bottom: 2px; border-radius: 3px; pointer-events: none;
  background: color-mix(in srgb, var(--guard) 55%, transparent);
  color: #fff; font-size: 9px; font-weight: 700; line-height: 12px; text-align: center;
  overflow: hidden; white-space: nowrap; text-transform: uppercase; letter-spacing: .03em;
}
.seg-lane .bb-band.me { background: #ff9f0a; color: #1c1c1e; outline: 1.5px solid var(--ink); }
.seg-lane .bb-hand { position: absolute; left: 4px; top: 0; font-size: 9px; line-height: 16px; color: var(--ink-dim); pointer-events: none; }
#minimap-segments .bb-band { position: absolute; top: 0; height: 100%; background: color-mix(in srgb, var(--guard) 55%, transparent); }
#minimap-segments .bb-band.me { background: #ff9f0a; }

/* ── the skeleton alone ──────────────────────────────────────────────────── */
#skel-card { padding: 8px; }
#skel-canvas { display: block; width: 100%; max-width: 230px; margin: 0 auto; aspect-ratio: 1; border-radius: 8px; background: #111; }

/* ── admin: every rater's answers; the skeleton over the clip ────────────── */
#model-card[hidden], #rate-card[hidden], #face-canvas[hidden] { display: none; }
#face-canvas { position: absolute; left: 0; top: 0; z-index: 8; pointer-events: none; }
#rater-rows { font-size: 13px; line-height: 1.45; }
#rater-rows .rr { padding: 3px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
#rater-rows .rr:last-child { border-bottom: 0; }
#rater-rows .rr span { font-weight: 600; }
#btn-skel.on { background: var(--accent-wash); color: var(--accent-on-wash); border-color: transparent; }

/* ── the sheets ──────────────────────────────────────────────────────────── */
.sc-body .sc-note { font-size: 13px; line-height: 1.5; margin: 8px 0 0; }
.sc-body .sc-note.muted { color: var(--ink-dim); }
/* ── phone ───────────────────────────────────────────────────────────────── */
/* punch.css is a desktop layout (a fixed-height app, panel beside the video).
   On a phone the page scrolls, and what a rating needs comes first: the clip,
   which punch it is, the skeleton, the comment, the buttons — then back / next. */
@media (max-width: 760px) {
  html, body { height: auto; }
  #app { height: auto; overflow: visible; }
  #top-bar { height: auto; min-height: 48px; padding: 6px 12px; gap: 4px 8px; flex-wrap: wrap; }
  .nav-lead { flex: none; }
  .nav-sub, .nav-div, #help-btn { display: none; }
  .nav-title { font-size: 15px; white-space: nowrap; }
  .nav-actions { margin-left: auto; }
  #name-field { min-width: 0; height: 28px; }
  #labeler-input { width: 84px; }
  #main-layout { flex-direction: column; padding: 8px 12px 16px; gap: 8px; }
  #re-panel { display: contents; }
  #video-container { order: 1; flex: none; gap: 6px; }
  #clip-card { order: 2; }
  #skel-card { order: 3; }
  #rate-card { order: 4; }
  #model-card { order: 4; }
  #nav-card { order: 5; }
  #skel-canvas { max-width: 260px; margin: 0 auto; }
  #video-viewport { flex: none; height: auto; min-height: 0; aspect-ratio: 1; }
  #video-controls { padding: 6px 10px 8px; gap: 4px; }
  #seek-bar-wrapper { margin-top: 4px; }
  .timeline-tick-label, #time-wrap, #frame-display, .tdiv { display: none; }
  #controls-row { flex-wrap: nowrap; gap: 6px; }
  /* ±1 frame only: the ±2 steppers don't fit beside the speed controls */
  .seg-static button:first-child, .seg-static button:last-child { display: none; }
  .seg-static button:nth-child(2) { border-radius: 8px 0 0 8px; }
  .seg-static button:nth-child(3) { border-radius: 0 8px 8px 0; }
  #re-panel .card { padding: 8px 12px; }
  #clip-card .card-eyebrow { margin-bottom: 2px; }
  #progress-bar { margin: 6px 0 4px; }
  #rate-card .hint { display: none; }
  #question { font-size: 14px; }
  #buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
  .rate { padding: 6px 8px; }
  .rate .name { font-size: 13.5px; }
  .rate .desc { font-size: 11px; }
  #comment { min-height: 36px; }
  .rate[data-r="cant_tell"] { grid-column: 1 / -1; }
  #re-panel kbd { display: none; }
}

/* ── the panel is the picture and five buttons (Oleksandr, 2026-10-24): no clip card, no question / hint, no
   comment, no button descriptions. The elements stay in the page (bag_bite.js writes to them), hidden. ── */
#clip-card, #question, #rate-hint, .comment-label, #comment, #reasons, .rate .desc { display: none !important; }
#buttons { margin-top: 0; }
.rate { grid-template-columns: 1fr; }

/* no name to type: Stafford by default (bag_bite.js's RATER) */
#name-field, #cm-labeler-chip { display: none !important; }

/* ── the progress grid ───────────────────────────────────────────────────── */
#grid-card { order: 0; }
.grid-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
#grid-count { font-size: 12px; color: var(--ink-dim); }
#goto {
  width: 72px; border: 1px solid var(--line); border-radius: 6px; background: var(--fill); color: var(--ink);
  padding: 3px 6px; font: inherit; font-size: 12px;
}
#grid { display: grid; grid-template-columns: repeat(20, 1fr); gap: 2px; }
#grid .cell {
  aspect-ratio: 1; padding: 0; border: 0; border-radius: 2px; cursor: pointer;
  background: color-mix(in srgb, var(--ink-dim) 22%, transparent);
}
#grid .cell:hover { outline: 1px solid var(--ink-dim); }
#grid .cell.r-snapping { background: #2fa36b; }
#grid .cell.r-pushing { background: #d9473c; }
#grid .cell.now { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 760px) { #grid-card { order: 6; } }