/* Charita (owner, 2026-10-10, Phase 2): the Journey calendar with date blocks, shared by the child's Charita tab and
   /admin/journey (charita.js). Each day is one card (its date the sticky header band, days to the boards on the right);
   events are chat bubbles whose width and weight grow with their tier; a sticky runner track follows the scroll; a date
   opens the day pager. */
.journey-sub{margin:0 0 var(--vq-space-2);color:var(--vq-ink-muted);font:var(--vq-weight-medium) var(--vq-text-sm)/1.4 var(--vq-font)}
.journey-sub:empty{display:none}
.cal-month{margin-top:var(--vq-space-3)}

/* The runner track, sticky at the top of the workspace. */
.cal-track{position:sticky;top:0;z-index:4;display:flex;align-items:center;gap:var(--vq-space-3);margin:0 0 var(--vq-space-3);padding:calc(var(--vq-space-5) + var(--vq-space-2)) 0 var(--vq-space-3);background:var(--vq-paper);border-bottom:1px solid var(--vq-line)}
.cal-track-line{position:relative;flex:1;height:6px;border-radius:var(--vq-radius-pill);background:var(--vq-grid-strong)}
.cal-track-line i{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:var(--vq-success);transition:width .15s ease-out}
.cal-track-line em{position:absolute;top:-26px;margin-left:-12px;font-style:normal;transform:scaleX(-1);transition:left .15s ease-out}
/* On Charita the track is the hero card's visual (hero-card.js, owner 2026-10-11): in the card, not sticky. */
.vq-hero-visual .cal-track{position:static;margin:0;padding:var(--vq-space-2) 0 0;border:0;background:none}
.vq-hero-visual .cal-track-line em{top:calc(-1 * var(--vq-space-4))} /* the runner stands on the bar: no gap above it */
.cal-track-end{color:var(--vq-warning);font:var(--vq-weight-bold) var(--vq-text-sm)/1 var(--vq-font);white-space:nowrap}

/* A day is one card: the date block is its header band (sticky under the track), its events inside. */
.cal-day{position:relative;display:grid;grid-template-columns:1fr;gap:var(--vq-space-2);margin-bottom:var(--vq-space-4);padding:0 0 var(--vq-space-3);border:var(--vq-border-width) solid var(--vq-line);border-radius:var(--vq-radius-md);background:var(--vq-surface-muted)}
.cal-day::before{content:"";position:absolute;top:48px;bottom:var(--vq-space-3);left:23px;width:2px;background:var(--vq-line)}
.cal-day.is-past::before{background:var(--vq-success)}
.cal-day.is-today{border-color:var(--vq-accent)}
.cal-date{position:sticky;top:var(--cal-track-h,64px);z-index:3;display:flex;align-items:baseline;gap:var(--vq-space-2);padding:var(--vq-space-2) var(--vq-space-3);border-bottom:var(--vq-border-width) solid var(--vq-line);border-radius:var(--vq-radius-md) var(--vq-radius-md) 0 0;background:var(--vq-surface);color:var(--vq-ink-muted);cursor:pointer}
.cal-date b{color:var(--vq-ink);font:var(--vq-weight-bold) var(--vq-text-lg)/1.1 var(--vq-font)}
.cal-date small{font:var(--vq-weight-medium) var(--vq-text-sm)/1.2 var(--vq-font);text-transform:uppercase}
.cal-day.is-today .cal-date{color:var(--vq-accent);background:var(--vq-accent-soft)}
.cal-day.is-today .cal-date b{color:var(--vq-accent)}
.cal-left{margin-left:auto;color:var(--vq-warning);font:var(--vq-weight-bold) var(--vq-text-sm)/1 var(--vq-font)}
.cal-day.is-free{min-height:0;margin-bottom:var(--vq-space-2);padding:0;background:none}
.cal-day.is-free::before,.cal-day.is-free .cal-items{display:none}
.cal-day.is-free .cal-date{border-bottom:0;border-radius:var(--vq-radius-md);opacity:.6;cursor:default}
.cal-items{display:grid;gap:var(--vq-space-5);align-content:start;justify-items:stretch;min-width:0;padding:var(--vq-space-2) var(--vq-space-3) 0 calc(var(--vq-space-6) + var(--vq-space-3))}
.cal-earned{justify-self:start;padding:2px var(--vq-space-2);border-radius:var(--vq-radius-pill);background:var(--vq-surface);color:var(--vq-accent);font:var(--vq-weight-bold) var(--vq-text-xs)/1.5 var(--vq-font)}
.cal-free{padding-top:var(--vq-space-2);color:var(--vq-ink-subtle);font:var(--vq-weight-medium) var(--vq-text-xs)/1.3 var(--vq-font)}
.cal-runner{color:var(--vq-accent);font:var(--vq-weight-bold) var(--vq-text-sm)/1.3 var(--vq-font)}

/* Events: a chat bubble with a tail to the spine; one column, the width and weight step with the tier. */
.cal-row{position:relative;display:grid;grid-template-columns:1fr;gap:0}
.journey-bubble{position:relative;box-sizing:border-box;display:grid;grid-template-columns:auto 1fr;column-gap:var(--vq-space-3);row-gap:2px;align-items:center;justify-self:start;min-width:0;padding:var(--vq-space-2) var(--vq-space-3);border:var(--vq-border-width) solid var(--vq-line);border-radius:var(--vq-radius-md);border-top-left-radius:var(--vq-radius-sm);background:var(--vq-surface);color:var(--vq-ink);text-align:left;font:inherit;cursor:default}
.journey-bubble::before{content:"";position:absolute;top:18px;left:-7px;width:12px;height:12px;margin-top:-6px;border:inherit;border-width:0 0 var(--vq-border-width) var(--vq-border-width);background:inherit;transform:rotate(45deg)}
.journey-bubble>strong,.journey-bubble>small{grid-column:2;min-width:0;overflow-wrap:break-word}
.journey-bubble strong{font:var(--vq-weight-bold) var(--vq-text-sm)/1.3 var(--vq-font)}
.journey-bubble small{color:var(--vq-ink-muted);font:var(--vq-weight-medium) var(--vq-text-xs)/1.3 var(--vq-font)}
.journey-earn{color:var(--vq-accent);font-weight:var(--vq-weight-bold)}
.cal-badge{grid-row:1/span 2;display:grid;place-items:center;width:28px;height:28px;border-radius:var(--vq-radius-pill);background:var(--vq-surface-muted);color:var(--vq-accent);line-height:1}
.cal-badge svg{width:60%;height:60%}
.tier-win .cal-badge{color:var(--vq-success)}
.tier-1 .cal-badge{color:var(--vq-paper)}
.cal-event .journey-bubble{padding-right:var(--vq-space-6)}
.cal-event .journey-bubble.is-plan{border-style:dashed;border-color:var(--vq-accent)}
.cal-event.is-school .journey-bubble{border-style:solid;border-color:var(--vq-line);background:var(--vq-surface-muted)}
.cal-grip{position:absolute;top:50%;right:var(--vq-space-1);margin-top:-14px;padding:var(--vq-space-1);color:var(--vq-ink-subtle);line-height:0;cursor:grab;touch-action:none}
.cal-grip svg{width:20px;height:20px}
.cal-event.is-dragging{opacity:.5}
.cal-day.is-drop{outline:2px dashed var(--vq-accent);outline-offset:-2px}
.tier-1 .journey-bubble{width:100%;padding:var(--vq-space-4);border:3px solid var(--vq-warning);box-shadow:0 0 var(--vq-space-5) var(--vq-warning)}
.tier-1 .cal-badge{width:44px;height:44px;background:var(--vq-warning);font-size:var(--vq-text-xl)}
.tier-1 .journey-bubble strong{color:var(--vq-warning);font-size:var(--vq-text-xl);text-transform:uppercase}
.tier-2 .journey-bubble{width:95%;border:3px solid var(--vq-accent);background:var(--vq-surface-tint)}
.tier-2 .cal-badge{width:38px;height:38px;background:var(--vq-accent-soft);font-size:var(--vq-text-lg)}
.tier-2 .journey-bubble strong{font-size:var(--vq-text-lg)}
.tier-3 .journey-bubble{width:90%;border:2px solid var(--vq-accent)}
.tier-3 .cal-badge{width:34px;height:34px;background:var(--vq-accent-soft);font-size:var(--vq-text-md)}
.tier-3 .journey-bubble strong{font-size:var(--vq-text-md)}
.tier-4 .journey-bubble{width:85%}
.tier-4 .cal-badge{width:30px;height:30px}
.tier-4 .journey-bubble strong{font-size:var(--vq-text-md)}
.tier-5 .journey-bubble,.tier-win .journey-bubble{width:80%}
.tier-5 .cal-badge{width:24px;height:24px;font-size:var(--vq-text-xs)}
.tier-win .journey-bubble{border-color:var(--vq-success)}
.tier-win .cal-badge{width:24px;height:24px;background:transparent}
/* Effort events (practice day, streak, best, comeback; owner, 2026-10-11): warm, compact, the same 80% as wins. */
.tier-effort .journey-bubble{width:80%;border-color:var(--vq-warning)}
.tier-effort .cal-badge{width:24px;height:24px;background:transparent;color:var(--vq-warning);font-size:var(--vq-text-sm)}
.tier-effort .journey-bubble strong{font-size:var(--vq-text-sm)}
.cal-event.tier-3 .journey-bubble.is-plan,.cal-event.tier-4 .journey-bubble.is-plan,.cal-event.tier-5 .journey-bubble.is-plan{border-style:dashed}
.cal-event.tier-1 .journey-bubble.is-plan{border-style:solid;border-color:var(--vq-warning)}

/* Her test's states (#224, owner 2026-10-11; designs live-1, live-3, live-4). LIVE: the bubble turns bright (light
   card, dark words) with a lit accent border, a pulsing LIVE badge, the time left large, the bar from start to end with
   a now marker, and the family's 💪 (cheers-view.js). Replies under it keep their normal look. */
.cal-row.is-live .journey-bubble{width:100%;padding:var(--vq-space-3) var(--vq-space-4) var(--vq-space-4);border:3px solid var(--vq-accent);background:var(--vq-ink);color:var(--vq-on-ink);box-shadow:0 0 0 4px var(--vq-accent-soft),0 0 var(--vq-space-5) var(--vq-accent)}
.cal-row.is-live .journey-bubble small{color:var(--vq-on-ink)}
.cal-row.is-live .journey-bubble strong{font-size:var(--vq-text-md)}
.cal-row.is-live .cal-badge{background:var(--vq-accent-soft)}
.live-badge{position:absolute;top:calc(-1 * var(--vq-space-3));right:var(--vq-space-3);display:inline-flex;align-items:center;gap:6px;padding:2px var(--vq-space-2);border-radius:var(--vq-radius-pill);background:var(--vq-mark-wrong);color:var(--vq-mark-on);font:var(--vq-weight-bold) var(--vq-text-xs)/1.5 var(--vq-font)}
.live-badge i{width:8px;height:8px;border-radius:var(--vq-radius-pill);background:var(--vq-mark-on);animation:live-pulse 1.2s ease-in-out infinite}
@keyframes live-pulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.live-badge i{animation:none}}
.live-body{grid-column:1/-1;display:grid;gap:var(--vq-space-2);margin-top:var(--vq-space-2)}
.live-clock{display:flex;align-items:baseline;gap:var(--vq-space-2);margin:0;font:var(--vq-weight-bold) var(--vq-text-2xl)/1 var(--vq-font);letter-spacing:var(--vq-tracking-tight);font-variant-numeric:tabular-nums}
.cal-row.is-live .live-clock small{font:var(--vq-weight-bold) var(--vq-text-md)/1 var(--vq-font)}
.live-bar{position:relative;height:10px;margin:var(--vq-space-4) 0 0;border-radius:var(--vq-radius-pill);background:var(--vq-sheet-grid-strong)}
.live-bar b{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:var(--vq-on-ink)}
.live-bar em{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border:3px solid var(--vq-ink);border-radius:var(--vq-radius-pill);background:var(--vq-mark-wrong);box-shadow:0 0 0 2px var(--vq-mark-wrong)}
.live-bar span{position:absolute;bottom:calc(100% + 6px);transform:translateX(-50%);color:var(--vq-mark-wrong);font:var(--vq-weight-bold) var(--vq-text-xs)/1 var(--vq-font)}
.live-ends{display:flex;justify-content:space-between;margin:0;font:var(--vq-weight-medium) var(--vq-text-xs)/1 var(--vq-font)}
.live-cheer-slot{display:grid;gap:var(--vq-space-2)}
.live-cheer-slot:empty{display:none}
.live-cheer{display:flex;align-items:center;justify-content:center;gap:var(--vq-space-2);min-height:var(--vq-button-height);margin-top:var(--vq-space-2);border:0;border-radius:var(--vq-radius-md);background:var(--vq-on-ink);color:var(--vq-ink);font:var(--vq-weight-bold) var(--vq-text-md)/1 var(--vq-font);cursor:pointer}
.live-cheer span{font-size:var(--vq-text-lg)}
.live-cheer[aria-pressed="true"]{border:3px solid var(--vq-accent);background:var(--vq-accent-soft)}
.cal-row.is-live .live-with{text-align:center;font:var(--vq-weight-bold) var(--vq-text-sm)/1.3 var(--vq-font)}
.cal-row.is-live .live-hold{text-align:center}
/* Missed: never started and past its window; dashed in the danger colour, Move it for its creator. */
.cal-row.is-missed .journey-bubble{border-style:dashed;border-color:var(--vq-danger)}
.cal-row.is-missed .journey-bubble strong{color:var(--vq-ink-muted)}
.missed-tag{color:var(--vq-danger);font-weight:var(--vq-weight-bold)}
/* #230: her time ran out and the paper wasn't handed in: a plain card, its words in the warning colour */
.cal-row.is-timeup .journey-bubble{border-color:var(--vq-warning)}
.timeup-tag{color:var(--vq-warning);font-weight:var(--vq-weight-bold)}
.missed-move{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:var(--vq-space-1);min-height:var(--vq-tap);margin-top:var(--vq-space-2);padding:0 var(--vq-space-3);border:var(--vq-border);border-radius:var(--vq-radius-sm);background:var(--vq-ink);color:var(--vq-on-ink);font:var(--vq-weight-bold) var(--vq-text-sm)/1 var(--vq-font);cursor:pointer}
.missed-move svg{width:16px;height:16px}
.cal-row.is-missed.cal-event .journey-bubble{padding-right:var(--vq-space-6)}
/* Marked: the score large in green, then 👏 Well done for the family. */
.cal-row.is-scored .journey-bubble{width:100%;border:2px solid var(--vq-success)}
.scored-line{grid-column:1/-1;display:flex;align-items:baseline;gap:var(--vq-space-2);margin:var(--vq-space-2) 0 0}
.scored-line b{color:var(--vq-success);font:var(--vq-weight-bold) var(--vq-text-2xl)/1 var(--vq-font);letter-spacing:var(--vq-tracking-tight)}
.cal-row.is-scored .scored-line small{font-size:var(--vq-text-sm)}
.scored-cheer-slot{grid-column:1/-1}
.scored-cheer-slot:empty{display:none}
.scored-clap{display:flex;align-items:center;justify-content:center;gap:var(--vq-space-2);width:100%;min-height:var(--vq-tap);margin-top:var(--vq-space-2);border:var(--vq-border);border-radius:var(--vq-radius-md);background:var(--vq-surface-muted);color:var(--vq-ink);font:var(--vq-weight-bold) var(--vq-text-md)/1 var(--vq-font);cursor:pointer}
.scored-clap[aria-pressed="true"]{border-color:var(--vq-accent)}

/* Plan mode (owner, 2026-10-11): the Plan button above the calendar; drafts dashed and faint with a "Draft" tag; the
   agree bar sticky at the foot of the workspace. */
.cal-plan-start{display:flex;justify-content:flex-end;margin:0 0 var(--vq-space-2)}
.cal-plan-start .primary-action{min-height:var(--vq-tap);padding:0 var(--vq-space-4)}
.cal-plan-note{margin:0 0 var(--vq-space-2);padding:var(--vq-space-2) var(--vq-space-3);border:var(--vq-border-width) dashed var(--vq-accent);border-radius:var(--vq-radius-md);background:var(--vq-accent-soft);color:var(--vq-ink);font:var(--vq-weight-medium) var(--vq-text-sm)/1.4 var(--vq-font)}
.journey-bubble.is-draft{border-style:dashed;border-color:var(--vq-accent);background:var(--vq-paper);opacity:.75}
.journey-bubble.is-draft strong{color:var(--vq-ink-muted)}
.cal-draft-tag{position:absolute;top:calc(-1 * var(--vq-space-3));right:var(--vq-space-6);padding:0 var(--vq-space-2);border:var(--vq-border-width) dashed var(--vq-accent);border-radius:var(--vq-radius-pill);background:var(--vq-paper);color:var(--vq-accent);font:var(--vq-weight-bold) var(--vq-text-xs)/1.6 var(--vq-font);text-transform:uppercase}
.cal-plan-bar{position:sticky;bottom:0;z-index:5;display:grid;grid-template-columns:1fr 2fr;gap:var(--vq-space-2);margin:var(--vq-space-3) calc(-1 * var(--vq-space-2)) 0;padding:var(--vq-space-3) var(--vq-space-2) calc(var(--vq-space-3) + env(safe-area-inset-bottom));border-top:var(--vq-border-width) solid var(--vq-line);background:var(--vq-paper)}
.cal-plan-bar .primary-action:disabled{opacity:.5;cursor:default}

/* A day full screen: pages side by side, one per day with something on it, snapping as you swipe. */
.cal-pager{position:fixed;inset:0;z-index:60;display:grid;grid-template-rows:1fr auto;background:var(--vq-paper)}
.cal-pager-close{position:absolute;top:var(--vq-space-3);right:var(--vq-space-3);z-index:2;width:var(--vq-tap);height:var(--vq-tap);border:var(--vq-border-width) solid var(--vq-line);border-radius:var(--vq-radius-pill);background:var(--vq-surface);color:var(--vq-ink);font-size:var(--vq-text-md);cursor:pointer}
.cal-pager-track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior:contain;scrollbar-width:none}
.cal-page{box-sizing:border-box;flex:0 0 100%;display:grid;align-content:start;gap:var(--vq-space-4);overflow-y:auto;padding:var(--vq-space-5) var(--vq-gutter) var(--vq-space-6);scroll-snap-align:start}
.cal-page-head{display:grid;gap:var(--vq-space-1);padding-right:var(--vq-space-6)}
.cal-page-head b{font:var(--vq-weight-bold) var(--vq-text-2xl)/1.1 var(--vq-font)}
.cal-page.is-today .cal-page-head b{color:var(--vq-accent)}
.cal-page-head span{color:var(--vq-ink-muted);font:var(--vq-weight-medium) var(--vq-text-md)/1.3 var(--vq-font)}
.cal-page-head em{color:var(--vq-warning);font:normal var(--vq-weight-bold) var(--vq-text-sm)/1.3 var(--vq-font)}
.cal-page .cal-items{padding:0}
.cal-page .cal-grip{display:none}
.cal-pager-dots{padding:var(--vq-space-3);color:var(--vq-ink-subtle);font:var(--vq-weight-medium) var(--vq-text-xs)/1 var(--vq-font);text-align:center}

/* Yatra (#216, owner 2026-10-11): the story is the main view, one day per screen swiped sideways under the hero card
   (its top block: Today · date · days to the boards, and her live line); the calendar is /student/yatra/calendar. */
#charita-path[data-view="story"]>:not(.yatra-story){display:none}
#charita-path[data-view="calendar"]>.yatra-story{display:none}
.yatra-story{display:grid;gap:var(--vq-space-3);min-width:0}
.yatra-strip{display:flex;align-items:flex-start;min-width:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.yatra-strip::-webkit-scrollbar{display:none}
.yatra-page{box-sizing:border-box;flex:0 0 100%;min-width:0;padding:var(--vq-space-1) var(--vq-space-1) var(--vq-space-3) var(--vq-space-2);scroll-snap-align:start;scroll-snap-stop:always}
.yatra-page .cal-items{padding:0}
.yatra-page .cal-grip{display:none}
.yatra-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--vq-space-3)}
.yatra-dots{flex:1;margin:0;text-align:center;color:var(--vq-ink-subtle);font:var(--vq-weight-medium) var(--vq-text-xs)/1.3 var(--vq-font)}
/* The calendar is a quiet link (plan mode and the date blocks live there), not a competing button */

/* Cheers (owner, 2026-10-11, Phase 3; design /lab/cheers): cheers-view.js. Pills WhatsApp-style on a bubble's lower
   edge, replies stacked on the right on a thread line, the cheer sheet over a dimmed page, the love line in Bhiksha. */
.cal-row[data-key] .journey-bubble{cursor:pointer}
.cal-row.has-cheers .journey-bubble{margin-bottom:var(--vq-space-3);padding-bottom:var(--vq-space-4)}
.cheer-pills{position:absolute;left:var(--vq-space-5);bottom:-13px;z-index:1;display:flex;gap:var(--vq-space-1)}
.tier-1 .cheer-pills,.tier-2 .cheer-pills{bottom:-15px}
.cheer-pill{display:inline-flex;align-items:center;gap:2px;min-height:26px;padding:0 var(--vq-space-2);border:var(--vq-border-width) solid var(--vq-line);border-radius:var(--vq-radius-pill);background:var(--vq-surface-muted);color:var(--vq-ink);font:var(--vq-weight-bold) var(--vq-text-xs)/1 var(--vq-font);white-space:nowrap;cursor:pointer}
.cheer-pill[aria-pressed="true"]{border-color:var(--vq-accent)}
.cheer-pill.is-love{border-color:var(--vq-accent);color:var(--vq-accent);cursor:default}
.cheer-thread{position:relative;display:grid;gap:var(--vq-space-2);justify-items:end;margin:var(--vq-space-3) 0 0 var(--vq-space-5);padding-left:var(--vq-space-4)}
.cheer-thread::before{content:"";position:absolute;top:calc(-1 * var(--vq-space-3));bottom:var(--vq-space-4);left:0;width:2px;border-radius:var(--vq-radius-pill);background:var(--vq-line)}
.cheer-reply{display:grid;gap:2px;max-width:85%;margin:0;padding:var(--vq-space-2) var(--vq-space-3);border:var(--vq-border-width) solid var(--vq-line);border-radius:var(--vq-radius-md);border-top-right-radius:var(--vq-radius-sm);background:var(--vq-surface);color:var(--vq-ink);font:var(--vq-weight-medium) var(--vq-text-sm)/1.35 var(--vq-font);overflow-wrap:break-word}
.cheer-reply b{color:var(--vq-accent);font:var(--vq-weight-bold) var(--vq-text-xs)/1.2 var(--vq-font)}
.cheer-reply.is-child{border-color:var(--vq-accent);background:var(--vq-accent-soft)}
.cheer-reply.is-child b{color:var(--vq-ink)}
.cal-row.is-cheer-flash .journey-bubble{border-color:var(--vq-accent);box-shadow:0 0 0 3px var(--vq-accent-soft)}

.cheer-scrim{position:fixed;inset:0;z-index:60;display:grid;align-items:end;background:var(--vq-scrim)}
.cheer-sheet{box-sizing:border-box;display:grid;gap:var(--vq-space-3);width:min(100%,36rem);max-height:88dvh;margin:0 auto;padding:var(--vq-space-2) var(--vq-gutter) calc(var(--vq-space-5) + env(safe-area-inset-bottom));overflow-y:auto;border:var(--vq-border);border-bottom:0;border-radius:var(--vq-radius-lg) var(--vq-radius-lg) 0 0;background:var(--vq-surface);color:var(--vq-ink);box-shadow:var(--vq-shadow-float);animation:cheer-up .2s ease-out}
@keyframes cheer-up{from{transform:translateY(40%);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.cheer-sheet{animation:none}}
.cheer-handle{justify-self:center;width:40px;height:4px;border-radius:var(--vq-radius-pill);background:var(--vq-grid-strong)}
.cheer-head{display:flex;align-items:flex-start;gap:var(--vq-space-3)}
.cheer-head>div{flex:1;display:grid;gap:2px;min-width:0}
.cheer-head h2{margin:0;font:var(--vq-weight-bold) var(--vq-text-lg)/1.25 var(--vq-font);letter-spacing:var(--vq-tracking-tight)}
.cheer-head small{color:var(--vq-ink-muted);font:var(--vq-weight-medium) var(--vq-text-sm)/1.3 var(--vq-font)}
.cheer-close{flex:0 0 auto;width:var(--vq-tap);height:var(--vq-tap);border:var(--vq-border);border-radius:var(--vq-radius-pill);background:var(--vq-surface-muted);color:var(--vq-ink);font-size:var(--vq-text-md);cursor:pointer}
.cheer-react{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--vq-space-2)}
.cheer-react button{display:grid;justify-items:center;gap:2px;min-height:var(--vq-button-height);padding:var(--vq-space-2) 0;border:var(--vq-border);border-radius:var(--vq-radius-md);background:var(--vq-surface-muted);color:var(--vq-ink);font:inherit;cursor:pointer}
.cheer-react button span{font-size:var(--vq-text-xl);line-height:1}
.cheer-react button small{color:var(--vq-ink-muted);font:var(--vq-weight-bold) var(--vq-text-xs)/1 var(--vq-font)}
.cheer-react button[aria-pressed="true"]{border-color:var(--vq-accent);background:var(--vq-accent-soft)}
.cheer-react button[aria-pressed="true"] small{color:var(--vq-accent)}
.cheer-label{margin:var(--vq-space-1) 0 0;color:var(--vq-ink-muted);font:var(--vq-weight-bold) var(--vq-text-sm)/1.3 var(--vq-font)}
.cheer-who{display:grid;gap:var(--vq-space-1);margin:0;padding:0;list-style:none}
.cheer-who li{display:flex;align-items:center;justify-content:space-between;gap:var(--vq-space-3);font:var(--vq-weight-medium) var(--vq-text-sm)/1.4 var(--vq-font)}
.cheer-who .cheer-none{color:var(--vq-ink-subtle)}
.cheer-love-tag{color:var(--vq-accent);font-style:normal;font-weight:var(--vq-weight-bold)}
.cheer-reply-form,.cheer-love{display:grid;gap:var(--vq-space-2)}
.cheer-field{display:flex;gap:var(--vq-space-2)}
.cheer-field input,.cheer-note{box-sizing:border-box;flex:1;width:100%;min-width:0;min-height:var(--vq-tap);padding:var(--vq-space-2) var(--vq-space-3);border:var(--vq-border);border-radius:var(--vq-radius-sm);background:var(--vq-paper);color:var(--vq-ink);font:var(--vq-weight-medium) var(--vq-text-md)/1.3 var(--vq-font)}
.cheer-send{display:grid;place-items:center;flex:0 0 var(--vq-tap);height:var(--vq-tap);border:0;border-radius:var(--vq-radius-pill);background:var(--vq-accent);color:var(--vq-paper);cursor:pointer}
.cheer-send svg{width:20px;height:20px}
.cheer-count{justify-self:end;color:var(--vq-ink-subtle);font:var(--vq-weight-medium) var(--vq-text-xs)/1 var(--vq-font)}
.cheer-love{padding-top:var(--vq-space-3);border-top:var(--vq-border)}
.cheer-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--vq-space-2)}
.cheer-chips .vq-chip{min-height:var(--vq-tap);font-size:var(--vq-text-md);cursor:pointer}
.cheer-chips .vq-chip[aria-checked="true"]{border-color:var(--vq-accent);background:var(--vq-accent-soft);color:var(--vq-accent)}
.cheer-love-send{width:100%;margin-top:0}
.cheer-love-send:disabled{opacity:.5}
.cheer-love-note{color:var(--vq-ink-muted);font:var(--vq-weight-medium) var(--vq-text-xs)/1.4 var(--vq-font);text-align:center}
.history-round.cheer-love-row{border-color:var(--vq-accent);background:var(--vq-accent-soft)}

/* Narrow (a zoomed phone, tokens.css; owner, 2026-10-11: "chapt er" one word a line): the spine and the bubble's tail
   go, every bubble takes the day's full width with its badge above the words, and the date band wraps its days left
   under the date instead of squeezing it. */
@media (max-width:319px){
  .cal-track{gap:var(--vq-space-2)}
  .cal-day::before,.journey-bubble::before{display:none}
  .cal-date{flex-wrap:wrap;column-gap:var(--vq-space-2);row-gap:0;padding:var(--vq-space-2)}
  .cal-left{white-space:nowrap}
  .cal-items{gap:var(--vq-space-3);padding:var(--vq-space-2) var(--vq-space-2) 0}
  .cal-row .journey-bubble,.cal-row[class*=tier] .journey-bubble{width:100%;grid-template-columns:minmax(0,1fr);padding:var(--vq-space-2)}
  .cal-badge{grid-row:auto}
  .journey-bubble>strong,.journey-bubble>small{grid-column:1}
  .cal-row.cal-event[class*=tier] .journey-bubble{padding-right:var(--vq-space-6)}
  .tier-1 .journey-bubble strong{font-size:var(--vq-text-md)}
  /* Cheer pills sit inside the bubble, under its words, wrapping, instead of hanging off its lower edge. */
  .cheer-pills,.tier-1 .cheer-pills,.tier-2 .cheer-pills{position:static;grid-column:1;flex-wrap:wrap;margin-top:var(--vq-space-1)}
  .cal-row.has-cheers .journey-bubble{margin-bottom:0}
  .tier-2 .journey-bubble strong,.tier-3 .journey-bubble strong,.tier-4 .journey-bubble strong{font-size:var(--vq-text-sm)}
}
/* The story fills the screen between the hero and the tab bar (owner, 2026-10-13): the day fills it edge to edge, like a story,
   with Back / Next and the count inside at the bottom (no border, no side gaps: it cancels the tab panel's padding). */
.student-surface[data-tab=history] #tab-history:not([hidden]){display:flex;flex-direction:column;min-height:100%}
#charita-path[data-view="story"]{display:flex;flex:1;flex-direction:column;min-height:0}
#charita-path[data-view="story"]>.yatra-story{display:flex;flex:1;flex-direction:column;margin:0 calc(-1 * var(--vq-gutter)) calc(-1 * var(--vq-space-6));padding:var(--vq-space-3) var(--vq-gutter);background:var(--vq-surface)}
/* The space left, not the tallest day (owner's app, 2026-10-13: a busy day pushed Back / Next under the tab bar). */
.yatra-story .yatra-strip{flex:1 1 0;min-height:0;align-items:stretch}
.yatra-story .yatra-page{overflow-y:auto}
/* The day starts right under the hero: no strip of background between them (owner, 2026-10-13). */
#charita-hero{margin-bottom:0}
/* UX pass (owner, 2026-10-13): quiet day arrows (the day's content leads), the when-line as a way back to today,
   no live line on another day, no bubble tail in the story (its tail peeked in from the next page). */
.yatra-pager .vq-pager-button{background:transparent;border:var(--vq-border);color:var(--vq-ink)}
.yatra-story .yatra-dots{border:0;background:none;color:var(--vq-ink-muted);font:var(--vq-weight-bold) var(--vq-text-sm)/1.3 var(--vq-font);cursor:pointer;text-decoration:underline}
.yatra-story .yatra-dots:disabled{color:var(--vq-ink);cursor:default;text-decoration:none}
#charita-hero[data-other-day] [data-hero-status]{visibility:hidden}
.yatra-page .journey-bubble::before{content:none}
.yatra-also{margin:var(--vq-space-3) 0 0}