/* [C] The first tape, in public (ui/crawl.js): the Vine Crawl's card and the count-up every tape gets. Phone first: the
   card fits 390x844 without scrolling at each step; buttons >= 48 px, the picks and PULL THE TAPE 56 px. */
.crawl-card { padding-bottom: 14px; }
.crawl-body { display: grid; gap: 10px; margin-top: 4px; }
.crawl-fence { display: grid; gap: 6px; }
.crawl-say { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm);
  font-size: 14px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.crawl-say .portrait { width: 32px; height: 32px; flex: none; }
.crawl-say > span { flex: 1; min-width: 0; }
.crawl-say.radio { background: #f6efe6; font-style: italic; }
.crawl-n { flex: none; align-self: center; font: 800 15px 'Nunito Sans', sans-serif; color: var(--ink-strong); background: var(--chip); padding: 4px 8px; border-radius: 10px; }
.crawl-knock { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 14px; border: 1px dashed var(--line);
  background: var(--paper); cursor: pointer; text-align: left; }
.crawl-knock > span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.crawl-knock b { font-size: var(--fs-l); color: var(--ink-strong); }
.crawl-knock small { font-size: 13px; color: var(--muted); font-weight: 700; }
.crawl-knock.deep { border-style: solid; border-color: var(--pumpkin); background: var(--pumpkin-soft); }
.crawl-knock:active { transform: scale(0.98); }
.crawl-ask { font: 650 var(--fs-l) Fraunces, Georgia, serif; color: var(--ink-strong); margin-top: 2px; }
.crawl-picks { margin-top: 0; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.crawl-picks .choice { padding: 6px 8px; align-items: center; text-align: center; }
.crawl-picks .choice b { font-size: 15px; }
.crawl-mine { font-size: 14px; color: var(--muted); font-weight: 700; text-align: center; }
.crawl-mine b { color: var(--ink-strong); }
.crawl-pull, .crawl-done { min-height: 56px; font-size: var(--fs-l); letter-spacing: 0.04em; }
.crawl-count, .cu-panel { text-align: center; }
.cu-row { display: flex; justify-content: center; align-items: baseline; gap: 6px; }
.cu-num { font: 800 40px/1 Fraunces, Georgia, serif; color: var(--ink-strong); font-variant-numeric: tabular-nums; min-width: 3ch; }
.cu-unit { font-size: 16px; font-weight: 800; color: var(--muted); }
.cu-lb { margin-top: 4px; font: 700 22px Fraunces, Georgia, serif; color: var(--pumpkin-dark); opacity: 0; transform: translateY(4px); transition: opacity 0.25s, transform 0.25s var(--spring); }
.cu-lb.in { opacity: 1; transform: none; }
.crawl-results { display: grid; gap: 4px; }
.crawl-res { display: grid; grid-template-columns: 1fr auto 24px; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; border-radius: 12px; background: var(--chip); font-weight: 700; }
.crawl-res b { color: var(--ink-strong); }
.crawl-res.near { background: #e3ead9; color: var(--sage-dark); }
.crawl-res.off { opacity: 0.75; }
.crawl-res.you { border: 2px solid var(--line); }
.crawl-res.you.near { border-color: var(--sage); }
.crawl-res i .ico { width: 18px; height: 18px; }
.crawl-say.verdict { background: #f6efe6; }
.crawl-say .sunday { color: var(--muted); }
.crawl-pace { font-size: 14px; line-height: 1.3; font-weight: 700; color: var(--ink); text-align: center; }

/* your own tape: the count-up panel over the farm (a tap puts it away) */
/* under the HUD and the Next-up chip: clear of an open sheet (the tape is taped from her sheet) and of the toasts above it */
.cu-panel { position: absolute; left: 50%; top: calc(var(--top-h) + 52px); transform: translateX(-50%); z-index: 5; width: min(calc(100% - 32px), 340px);
  padding: 10px 14px 12px; border-radius: 20px; background: var(--card-strong); box-shadow: 0 16px 40px rgba(30, 40, 35, 0.28); animation: pop 0.3s var(--spring); }
.cu-panel.out { opacity: 0; transition: opacity 0.2s; }
.cu-delta { font: 800 15px 'Nunito Sans', sans-serif; color: var(--sage-dark); }
/* in her sheet's tape bar: one compact row (the 40 px count, then the pounds and the change) */
.cu-inline { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-top: 6px; padding: 4px 0; border-radius: 14px; background: #fbf3dc; }
.cu-inline .cu-row { gap: 4px; }
.cu-inline .cu-lb { margin-top: 0; font-size: 20px; }
.cu-inline.out { opacity: 0; transition: opacity 0.2s; }
.cu-pace { margin-top: 4px; font-size: 14px; line-height: 1.3; font-weight: 600; color: var(--muted); }