.recording-panel { margin: 0 0 16px; border: 1px solid var(--theme-line,#dae5de); border-radius: 16px; padding: 13px 16px; background: var(--theme-panel,#fff); color: var(--theme-ink,#293c33); }
.recording-panel summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-size: 13px; }
.recording-panel summary::-webkit-details-marker { display:none; }
.recording-panel summary::after { content:'⌄'; margin-left:auto; color:var(--theme-muted,#66786b); }
.recording-panel[open] summary::after { transform:rotate(180deg); }
#recording-progress { margin-left: auto; padding: 3px 9px; border-radius: 20px; background: var(--theme-accent-soft,#edf6f0); color: var(--theme-accent,#28765e); font-size: 12px; }
.recording-panel p { margin: 12px 0; font-size: 12px; line-height: 1.7; color: var(--theme-muted,#66786b); }
.recording-actions { display:flex; flex-wrap:wrap; gap:8px; }
.recording-panel button,.recording-panel select { min-height:40px; padding:8px 12px; border:1px solid var(--theme-line,#dae5de); border-radius:12px; background:var(--theme-raised,#f5f8f6); color:var(--theme-ink,#293c33); font:inherit; font-size:12px; }
.recording-panel button:disabled { opacity:.6; }
.recording-panel .recording-new { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; font-size:12px; }
.recording-panel input { box-sizing:border-box; width:100%; margin:8px 0; font-size:12px; }
.recording-panel a { font-size:12px; color:var(--theme-accent,#28765e); }
.records-no-spend-stamp { display:block; width:fit-content; max-width:100%; margin:3px auto 0; padding:3px 5px; border:1px dashed var(--theme-accent,#28765e); border-radius:8px; color:var(--theme-accent,#28765e); background:var(--theme-accent-soft,#edf6f0); font-size:10px; font-weight:600; line-height:1.3; overflow-wrap:anywhere; }
html[data-theme="paper"] .records-no-spend-stamp { border-radius:50% 42% 48% 40%; transform:rotate(-5deg); }
html[data-theme="ribbon"] .records-no-spend-stamp { border-style:solid; border-radius:12px 4px 12px 4px; box-shadow:1px 2px 0 var(--theme-line); }
.records-no-spend-detail { padding:12px 14px; margin:0 0 12px; border-radius:14px; background:var(--theme-accent-soft,#edf6f0); color:var(--theme-accent,#28765e); font-size:13px; line-height:1.7; }
.challenge-invite-page { max-width:440px; margin:8vh auto; padding:28px; border:1px solid var(--theme-line,#dae5de); border-radius:24px; background:var(--theme-panel,#fff); color:var(--theme-ink,#293c33); }
.challenge-invite-page .invite-symbol { display:block; font-size:44px; margin-bottom:20px; }
.challenge-invite-page h1 { font-size:24px; line-height:1.45; margin:0 0 18px; }
.challenge-invite-page p { font-size:14px; line-height:1.8; color:var(--theme-muted,#66786b); }
.challenge-invite-page button { display:block; width:100%; margin-top:12px; min-height:48px; border:1px solid var(--theme-line,#dae5de); border-radius:14px; background:var(--theme-raised,#f2f7f3); color:var(--theme-ink,#293c33); font:inherit; font-size:14px; }
.challenge-invite-page .primary { background:var(--theme-accent,#28765e); color:var(--theme-accent-ink,#fff); border:0; }
.challenge-invite-page input { box-sizing:border-box; width:100%; margin:12px 0; font-size:12px; }
.challenge-invite-page a { color:var(--theme-accent,#28765e); }
.challenge-invite-page [hidden] { display:none !important; }
.challenge-invite-page > a.primary { display:grid; place-items:center; min-height:48px; border-radius:14px; text-decoration:none; color:var(--theme-accent-ink,#fff); }
.challenge-invite-page #challenge-balance { color:var(--theme-accent,#28765e); font-weight:600; }
@container kkaebu (max-width:480px){ .challenge-invite-page { margin:24px 16px; padding:24px; } .records-no-spend-stamp { font-size:9px; padding:2px 3px; } }

/* Progress stays visible; the extra controls open only when needed. */
.recording-panel { padding:14px 16px; border-radius:16px; box-shadow:none; }
.recording-panel [hidden] { display:none !important; }
.recording-overview { display:flex; align-items:center; gap:9px; min-width:0; }
.recording-egg { display:block; flex:0 0 46px; width:46px; height:46px; }
.recording-egg svg { width:100%; height:100%; }
.recording-heading { display:flex; flex:1; min-width:0; flex-direction:column; gap:3px; }
.recording-heading strong { font-size:13px; font-weight:650; }
.recording-heading > span { font-size:11px; line-height:1.45; color:var(--theme-muted,#66756d); }
.recording-counts { display:flex; flex:0 0 auto; align-items:flex-end; flex-direction:column; gap:3px; margin-left:auto; }
#recording-progress { margin:0; padding:3px 8px; font-variant-numeric:tabular-nums; font-size:13px; }
.recording-panel #recording-invite { padding:0; min-height:22px; border:0; border-radius:4px; background:transparent; color:var(--theme-muted,#66756d); font-size:11px; text-decoration:underline; text-underline-offset:3px; }
#recording-meter { display:block; appearance:none; width:100%; height:8px; margin:10px 0 8px; border:0; border-radius:8px; overflow:hidden; background:var(--theme-raised,#e9f0ec); color:var(--theme-accent,#23766a); }
#recording-meter::-webkit-progress-bar { background:var(--theme-raised,#e9f0ec); border-radius:8px; }
#recording-meter::-webkit-progress-value { background:var(--theme-accent,#23766a); border-radius:8px; }
#recording-meter::-moz-progress-bar { background:var(--theme-accent,#23766a); border-radius:8px; }
.recording-caption { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11px; line-height:1.5; color:var(--theme-muted,#66756d); }
.recording-panel #recording-expand { flex:0 0 auto; min-height:28px; padding:3px 6px; border:0; background:transparent; color:var(--theme-accent,#23766a); font-size:11px; }
.recording-recovery { align-items:center; margin-top:10px; }
.recording-recovery > span { font-size:11px; color:var(--theme-muted,#66756d); }
.recording-panel #recording-recover,.recording-panel #recording-start { background:var(--theme-accent,#23766a); color:var(--theme-accent-ink,#fff); border-color:transparent; }
.recording-panel #recording-body { padding-top:10px; margin-top:10px; border-top:1px solid var(--theme-line,#dae5de); }
.recording-panel #recording-message:empty { display:none; }
.recording-panel #recording-message { margin-bottom:0; }
.recording-theme-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.recording-theme-options button { display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px; border-radius:10px; font-size:11px; }
.recording-theme-options button svg { width:42px; height:40px; }
.recording-theme-options button[aria-pressed="true"] { border-color:var(--theme-accent,#23766a); background:var(--theme-accent-soft,#e8f4ed); color:var(--theme-accent,#23766a); }
.recording-panel .recording-choice-title { margin:12px 0 8px; }
.recording-panel #recording-theme-apply { margin-top:8px; }
.recording-panel #recording-target { flex:0 0 88px; width:88px; height:36px; min-height:36px; padding:6px 10px; border-radius:8px; font-size:12px; }
.recording-panel[data-status="failed"] .recording-caption > span { color:var(--theme-danger,#a34435); }
@container kkaebu (max-width:480px){ .recording-panel { padding:12px; } .recording-heading strong { font-size:12px; } .recording-egg { flex-basis:40px; width:40px; height:42px; } .recording-caption { align-items:flex-start; } .recording-caption > span { max-width:65%; } }
.recording-event { margin-top:12px; padding-top:12px; border-top:1px solid var(--theme-line,#dae5de); }
.recording-event-tag { font-size:10px !important; color:var(--theme-accent,#28765e) !important; font-weight:600; }
#recording-event-progress { flex:0 0 auto; padding:3px 8px; border-radius:20px; background:var(--theme-accent-soft,#edf6f0); color:var(--theme-accent,#28765e); font-size:12px; font-variant-numeric:tabular-nums; }
#recording-event-meter { display:block; appearance:none; width:100%; height:8px; margin:10px 0 8px; border:0; border-radius:8px; overflow:hidden; background:var(--theme-raised,#e9f0ec); color:var(--theme-accent,#23766a); }
#recording-event-meter::-webkit-progress-bar { background:var(--theme-raised,#e9f0ec); border-radius:8px; }
#recording-event-meter::-webkit-progress-value { background:var(--theme-accent,#23766a); border-radius:8px; }
#recording-event-meter::-moz-progress-bar { background:var(--theme-accent,#23766a); border-radius:8px; }
.recording-event[data-status="upcoming"] #recording-event-meter { display:none; }
.recording-panel #recording-event-copy { margin:8px 0; font-size:11px; }
.recording-panel .recording-event-calendar summary { width:fit-content; padding:4px 0; font-size:11px; color:var(--theme-muted,#66786b); }
.recording-event-calendar ul { margin:8px 0 0; padding-left:16px; color:var(--theme-muted,#66786b); font-size:11px; line-height:1.8; }
.recording-panel .recording-completed { padding:10px 12px; border-radius:10px; background:var(--theme-accent-soft,#edf6f0); color:var(--theme-accent,#28765e); }

/* A single compact card is visible; extra controls live in their own dialog. */
.recording-panel { margin:0 0 12px; padding:0; border:0; border-radius:0; background:transparent; }
.recording-cards { display:flex; position:relative; gap:10px; width:100%; min-width:0; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory; scrollbar-width:none; }
.recording-cards::-webkit-scrollbar { display:none; }
.recording-cards:focus-visible { outline:2px solid var(--theme-accent,#28765e); outline-offset:2px; border-radius:14px; }
.recording-card { flex:0 0 100%; box-sizing:border-box; min-width:0; margin:0; padding:8px 12px; border:1px solid var(--theme-line,#dae5de); border-radius:14px; background:var(--theme-panel,#fff); scroll-snap-align:start; scroll-snap-stop:always; }
.recording-card .recording-overview { min-height:44px; gap:8px; }
.recording-panel .recording-theme-open { display:flex; flex:1; align-items:center; gap:8px; min-width:0; min-height:44px; padding:0; border:0; border-radius:8px; background:transparent; text-align:left; cursor:pointer; }
.recording-card .recording-egg { flex:0 0 36px; width:36px; height:36px; }
.recording-card .recording-heading { gap:2px; }
.recording-card .recording-heading strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.recording-card .recording-heading > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; line-height:1.35; }
.recording-card #recording-reward { color:var(--theme-accent,#28765e); }
.recording-card .recording-counts { gap:0; }
.recording-card #recording-progress,.recording-card #recording-event-progress { font-size:11px; padding:3px 7px; white-space:nowrap; }
.recording-panel :is(#recording-meter,#recording-event-meter) { height:6px; margin:5px 0; }
.recording-card .recording-caption { min-height:20px; align-items:center; gap:6px; font-size:10px; line-height:1.4; }
.recording-card .recording-caption > span { max-width:none; min-width:0; }
.recording-panel .recording-caption button { flex:none; min-height:24px; margin:-2px 0; padding:2px 6px; border:0; background:var(--theme-accent-soft,#edf6f0); color:var(--theme-accent,#28765e); font-size:10px; }
.recording-panel .recording-card .recording-caption > span { color:var(--theme-muted,#66756d); }
.recording-panel .recording-card[data-status="failed"] .recording-caption > span { color:var(--theme-danger,#a34435); }
.recording-card #recording-event-copy { margin:0; font-size:10px; }
.recording-pages { display:flex; justify-content:center; gap:4px; height:16px; margin-top:3px; }
.recording-panel .recording-pages button { display:grid; place-items:center; width:24px; min-height:16px; height:16px; margin:0; padding:0; border:0; background:transparent; cursor:pointer; }
.recording-pages button::before { content:''; width:4px; height:4px; border-radius:4px; background:var(--theme-line,#cbd8d0); }
.recording-pages button[aria-pressed="true"]::before { width:12px; background:var(--theme-accent,#28765e); }
.recording-options { box-sizing:border-box; width:min(420px,calc(100% - 24px)); max-height:calc(100dvh - 48px); padding:18px; border:1px solid var(--theme-line,#dae5de); border-radius:18px; background:var(--theme-panel,#fff); color:var(--theme-ink,#293c33); overflow-y:auto; overscroll-behavior:contain; }
.recording-options::backdrop { background:rgb(16 35 30 / 35%); }
.recording-options > header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.recording-options h2 { margin:0; font-size:16px; }
.recording-options #recording-new { justify-content:space-between; }
.recording-panel #recording-options-message:empty { display:none; }
.recording-options #recording-options-message { color:var(--theme-accent,#28765e); }
@media (prefers-reduced-motion:reduce){ .recording-cards { scroll-behavior:auto; } }

/* Any overlapping seasonal runs share the same compact horizontal carousel. */
.recording-event-meter { display:block; appearance:none; width:100%; height:6px; margin:5px 0; border:0; border-radius:8px; overflow:hidden; background:var(--theme-raised,#e9f0ec); color:var(--theme-accent,#23766a); }
.recording-event-meter::-webkit-progress-bar { background:var(--theme-raised,#e9f0ec); border-radius:8px; }
.recording-event-meter::-webkit-progress-value { background:var(--theme-accent,#23766a); border-radius:8px; }
.recording-event-meter::-moz-progress-bar { background:var(--theme-accent,#23766a); border-radius:8px; }
.recording-event-progress { flex:none; padding:3px 7px; border-radius:20px; background:var(--theme-accent-soft,#edf6f0); color:var(--theme-accent,#28765e); font-size:11px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.recording-card .recording-event-copy { margin:0; font-size:10px; }
.recording-card .recording-heading strong,.recording-card .recording-heading > span { overflow:visible; white-space:normal; overflow-wrap:anywhere; }
.recording-card .recording-caption > span { white-space:normal; overflow-wrap:anywhere; }