/* ═══════════════════════════════════════════════════════════════════════════
   health-score.css — Score Strip + Score Panel styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Score font ───────────────────────────────────────────────────────────── */

@font-face {
    font-family: 'mybest';
    src: url('fonts/mybest.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ── Score Strip (replaces ritual row) ─────────────────────────────────────── */

.score-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 20px;
    min-height: 60px;
    width: 100%;
}

/* Desktop: match app-header padding */
@media (min-width: 481px) {
    .score-strip {
        padding: 8px 20px;
    }
}

/* ── Left zone: score number ──────────────────────────────────────────────── */

.score-strip-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* June 2026: space-between pins the SCORE label to the top edge and the
       number row to the bottom edge of the card. With zero vertical padding and
       a min-height matched to .qa-btn (and the parent .score-strip centering
       both), the top of "SCORE" lines up with the top of the qa-button borders
       and the bottom of the number + streak lines up with their bottom border. */
    justify-content: space-between;
    min-width: 100px;
    min-height: 56px;            /* matches .qa-btn desktop height (tune knob) */
    position: relative;
    top: 2px;                    /* nudge SCORE label + number row down 2px (desktop; mobile override sets top:0) */
    cursor: pointer;
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    border-radius: 10px;
    padding: 0 16px;             /* no vertical padding → text edges = card edges */
}

.score-strip-label {
    font-size: 0.65rem;
    letter-spacing: 1px;
    color: var(--accent-color);
    text-transform: uppercase;
    line-height: 1;
    opacity: 0.7;
    margin-top: 6px;
    margin-bottom: 0;            /* space-between owns the vertical gap now */
}

.score-strip-number-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    width: 100%;
}

/*  Score number text-shadow — uses layered shadows via a CSS var
    so the offset "drop" shadow and the accent glow stay in sync.

    --score-shadow-drop   = 2px / 2px offset, bg-colored (light-mode cream,
                            dark-mode near-black). Gives the number a
                            subtle embossed / cut-out feel.
    --score-shadow-glow   = accent-coloured blur behind the number.
                            Tuned to 20% in light mode (was 40% and felt
                            too intense on iOS Safari), 40% in dark mode.

    The shadows live in one `text-shadow` declaration because multiple
    text-shadows stack; the drop shadow sits on top of the glow in render
    order, which is what we want visually.

    CROSS-BROWSER NOTE (April 2026): Chrome renders text-shadow blur at
    20px + low alpha as effectively invisible, while Safari renders the
    same spec with a tighter/more visible falloff. To equalise the two:
      1. Reduced blur radius 20px → 12px (tighter glow, still soft).
      2. Bumped alpha 20% → 45% light mode / 60% dark mode.
      3. STACKED the glow twice at different blur radii (8px + 14px) so
         Chrome's wash-out at either radius is compensated by the other.
    Result: identical-looking glow in Safari, Chrome, and Firefox.

    April 18 2026: dialled the glow down again — the 30%/20% combo was
    reading too hot at large score values. Halved to 15%/10% in both
    light and dark mode for a subtler halo.                              */
.score-strip-value {
    font-size: 3.0rem;          /* June 2026: trimmed from 3.2rem so the label+number
                                   block fits the qa-button height for top/bottom alignment (tune knob) */
    margin-top:4px;
    font-weight: 700;
    color: var(--accent-color);
    line-height: 1;
    font-family: 'mybest', 'Outfit', sans-serif;
    text-shadow:
        1px 1px 0 var(--bg-main),
        0 0 8px  color-mix(in srgb, var(--accent-color) 15%, transparent),
        0 0 14px color-mix(in srgb, var(--accent-color) 10%, transparent);
}

/* Dark mode: same glow intensity — tuned together April 18 2026.
   The drop shadow automatically uses dark-mode --bg-main (#0a0a0a). */
body.dark-mode .score-strip-value {
    text-shadow:
        1px 1px 0 var(--bg-main),
        0 0 8px  color-mix(in srgb, var(--accent-color) 15%, transparent),
        0 0 14px color-mix(in srgb, var(--accent-color) 10%, transparent);
}

.score-strip-streak {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* .score-strip-potential and .score-strip-share-btn rules removed June 2026 —
   the "of X" potential row and the in-strip share button were dropped from the
   score card. (The Score panel's own hero share button is unaffected.) */

/* ── Center zone: 24-hour clock ring + intent icon ────────────────────────── */

.score-strip-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.score-strip-clock {
    width: 44px;
    height: 44px;
    position: relative;
}

#score-strip-clock-ring {
    position: absolute;
    inset: 0;
}

.score-strip-intent-icon {
    position: absolute;
    top: calc(50% - 4px);
    left: calc(50% - 2px);
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    image-rendering: pixelated;
    z-index: 1;
    filter: var(--icon-accent-filter);
}

.score-strip-intent {
    font-size: 0.6rem;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* ── Right zone: quick-access buttons (right-aligned) ─────────────────────── */

.score-strip-buttons {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
}

.qa-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: none;
    border: 1.5px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
    border-radius: 8px;
    padding: 8px 6px 5px;
    cursor: pointer;
    min-width: 50px;
    min-height: 54px;
    transition: background 0.15s, border-color 0.15s;
}
.qa-btn:hover,
.qa-btn:active {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 70%, transparent);
}

/* All atlas icons in qa-btn: scale 2x and accent-tint (including mood) */
.qa-btn .nav-btn-pixel-icon {
    transform: scale(2);
    margin: 6px 4px;
    filter: var(--icon-accent-filter);
}

.qa-btn-label {
    font-size: 0.5rem;
    letter-spacing: 0.5px;
    color: var(--accent-color);
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
}

/* ── Coach notification dot + pulse ───────────────────────────────────────── */

.qa-btn-notify {
    position: relative;
    animation: qa-btn-bounce 1.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
}

/* Pause the bounce when user hovers — gives them a stable tap target */
.qa-btn-notify:hover,
.qa-btn-notify:active {
    animation-play-state: paused;
}

@keyframes qa-btn-bounce {
    0%, 100% { transform: translateY(0);     }
    15%       { transform: translateY(-12px); }
    30%       { transform: translateY(0);     }
    45%       { transform: translateY(-7px);  }
    60%       { transform: translateY(0);     }
}

.qa-btn-notify-dot {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e03030;
    border: 1.5px solid var(--bg-main);
    animation: qa-notify-pulse 2s ease-in-out infinite;
    z-index: 2;
    pointer-events: none;
}

@keyframes qa-notify-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.35); opacity: 0.7; }
}

/* ── Mobile responsive ────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .score-strip {
        gap: 6px;
        /* Mobile compression May 25 2026: tighter padding + min-height drop
           so the strip is as short as the qa-btns allow (no extra slack). */
        padding: 1px 12px;
        min-height: 46px;
    }
    /* Mobile compression May 25 2026: tighter padding on the "Today's Score"
       left card + nudged down 1px for visual alignment with right-side
       qa-btns. qa-btns are independent flex siblings — they don't shift. */
    /* Mobile: the score card drops its 10% accent tint so it reads flat against
       the black roof. (The roof rows themselves are flattened to #000 in
       styles.css — single source of truth for the mobile roof colour.) Zero
       vertical padding + min-height matched to the qa-btn keeps the SCORE label
       top / number bottom aligned with the button borders (June 2026). */
    .score-strip-left { min-width: 80px; padding: 0 12px; top: 0; background: transparent; min-height: 46px; }
    .score-strip-value { font-size: 2.2rem; }
    .score-strip-center { display: none; }
    .qa-btn {
        min-width: 42px;
        min-height: 46px;
        padding: 6px 4px 4px;
    }
    .qa-btn .nav-btn-pixel-icon {
        transform: scale(1.5);
        margin: 4px 2px;
    }
    .qa-btn-label { font-size: 0.4rem; }
    .qa-btn-notify-dot { top: 2px; right: 2px; width: 6px; height: 6px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Score Panel — HealthScore hero section inside My Score panel
   ═══════════════════════════════════════════════════════════════════════════ */

.score-hero-section {
    padding: 12px 0 8px;
}

.score-hero-row {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
    margin-bottom: 24px;
}

.score-hero-ring-wrap {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.score-hero-ring {
    position: absolute;
    inset: 0;
}

.score-hero-value {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--accent-color);
    line-height: 1;
    position: relative;
    z-index: 1;
    font-family: 'mybest', 'Outfit', sans-serif;
    /* Matches .score-strip-value — 1px offset drop shadow in the page bg
       colour, for the same cut-out feel in the Score panel hero. No glow
       here because the SVG ring already supplies the accent halo. */
    text-shadow: 2px 2px 0 var(--bg-main);
}

.score-hero-potential {
    font-size: 0.75rem;
    color: var(--accent-color);
    opacity: 0.55;
    position: relative;
    z-index: 1;
    display: block;
    text-align: center;
    margin-top: 2px;
}

@media (min-width: 481px) {
    .score-hero-potential {
        font-size: 1rem;
        opacity: 0.65;
    }
}

.score-hero-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.score-hero-challenge {
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent-color);
}

.score-hero-high {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.score-hero-streak {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ── Category bars ────────────────────────────────────────────────────────── */

.score-quadrant-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.score-quad-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.score-quad-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    width: 82px;
    text-align: right;
    flex-shrink: 0;
}

.score-quad-track {
    flex: 1;
    height: 8px;
    background: color-mix(in srgb, var(--accent-color) 15%, transparent);
    border-radius: 4px;
    overflow: hidden;
}

.score-quad-fill {
    height: 100%;
    background: var(--accent-color);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.score-quad-pts {
    font-size: 0.65rem;
    color: var(--text-muted);
    width: 56px;
    text-align: left;
    flex-shrink: 0;
}

/* ── Cally tip row inside score section ───────────────────────────────────── */

.score-cally-row {
    margin: 18px 0 24px;
}

/* ── Quick Wins ───────────────────────────────────────────────────────────── */

.score-quick-wins {
    margin: 24px 0 48px;
}

.score-qw-title {
    font-size: 0.65rem;
    letter-spacing: 1px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.score-qw-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: color-mix(in srgb, var(--accent-color) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 25%, transparent);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 4px;
    cursor: pointer;
    transition: background 0.15s;
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.85rem;
}
.score-qw-btn:hover,
.score-qw-btn:active {
    background: color-mix(in srgb, var(--accent-color) 20%, transparent);
}

/* Pursue Goal — a clearer, filled-accent CTA (vs. the lighter Quick Win tiles)
   that routes to /wellgoal for more goal boosts. Today-only; toggled in
   reportRender, click delegated in reportBindEvents. */
.score-pursue-goal-btn {
    display: block;
    width: 100%;
    /* Small gap above (tight under Quick Wins — see the :has rule below that
       collapses Quick Wins' own bottom margin); the 48px bottom keeps the normal
       gap down to the intent pills. */
    margin: 8px 0 48px;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    background: var(--accent-color);
    color: var(--bg-main);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.score-pursue-goal-btn:hover,
.score-pursue-goal-btn:active {
    opacity: 0.85;
}
.score-pursue-goal-btn[hidden] { display: none; }

/* Pull the button tight under Quick Wins: collapse Quick Wins' 48px bottom
   margin ONLY when the VISIBLE button follows it (today). On past dates the
   button is [hidden] → this selector fails → Quick Wins keeps its normal 48px
   gap straight to the intent pills. */
.score-quick-wins:has(+ .score-pursue-goal-btn:not([hidden])) {
    margin-bottom: 0;
}

/* Quick Win UI icons — rendered via uiIconImg(), accent-tinted */
.score-qw-ui-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    image-rendering: pixelated;
    filter: var(--icon-accent-filter);
}

.score-qw-icon-fallback {
    font-size: 1.1rem;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

.score-qw-label {
    flex: 1;
    text-align: left;
}

.score-qw-pts {
    font-weight: 600;
    color: var(--accent-color);
    white-space: nowrap;
}

.score-qw-done {
    text-align: center;
    color: var(--accent-color);
    font-size: 0.85rem;
    padding: 8px;
}

/* ── Intent pills ─────────────────────────────────────────────────────────── */

.score-intent-pills {
    margin: 24px 0 48px;
}

.score-intent-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.score-intent-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.score-intent-pill {
    font-size: 0.65rem;
    padding: 4px 10px;
    border: 1px solid color-mix(in srgb, var(--accent-color) 30%, transparent);
    border-radius: 12px;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.score-intent-pill:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}
.score-intent-pill--active {
    background: var(--accent-color);
    color: var(--bg-main, #0a0a0f);
    border-color: var(--accent-color);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   A8 — "How scoring works" FAQ collapsible
   Lives at the bottom of the Score panel (#report-daily-view). Tap the
   header to expand; aria-expanded + hidden attr drive state. No persistence
   — collapsed on every panel open, which matches spec.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Intent & Balance collapsible (June 2026 declutter) — same chrome as .score-faq;
   reuses .score-faq-toggle for the header button. */
.score-customize {
    margin-top: 16px;
    border-top: 1px solid color-mix(in srgb, var(--accent-color) 15%, transparent);
    padding-top: 12px;
}
/* Inside the carat, drop the controls' old full-panel margins so they sit neatly
   under the toggle. (.score-intent-pills ships with margin:24px 0 48px for the old
   always-visible layout.) */
.score-customize-body .score-intent-pills { margin: 14px 0 18px; }
.score-customize-body .score-balance-toggles { margin: 0 0 4px; }

.score-faq {
    margin-top: 16px;
    border-top: 1px solid color-mix(in srgb, var(--accent-color) 15%, transparent);
    padding-top: 12px;
}

.score-faq-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 6px 0;
    cursor: pointer;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
}
.score-faq-toggle:hover {
    color: var(--accent-color);
}
.score-faq-toggle-label {
    text-align: left;
}
.score-faq-toggle-chevron {
    font-size: 0.9rem;
    color: var(--accent-color);
}

.score-faq-body {
    padding: 8px 0 16px;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-main);
}

.score-faq-lead {
    margin: 0 0 8px;
    color: var(--text-main);
}

.score-faq-h {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--accent-color);
    margin: 14px 0 4px;
    font-weight: 600;
}

.score-faq-p {
    margin: 4px 0 8px;
    color: var(--text-main);
}

.score-faq-list {
    margin: 4px 0 8px;
    padding-left: 18px;
    color: var(--text-main);
}
.score-faq-list li {
    margin: 3px 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   A4 — Balance activity toggles
   Per-day pills in the Score panel declaring which types count toward
   Balance. Same visual language as intent pills for consistency.
   --missing modifier: dashed border when a type is toggled ON but has
   0 hours logged today ("you said this counts but haven't done any").
   ═══════════════════════════════════════════════════════════════════════════ */

.score-balance-toggles { margin: 24px 0 12px; }

.score-balance-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.score-balance-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.score-balance-toggle {
    font-size: 0.65rem;
    padding: 4px 10px;
    border: 1px solid color-mix(in srgb, var(--accent-color) 30%, transparent);
    border-radius: 12px;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
.score-balance-toggle:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}
.score-balance-toggle--on {
    background: var(--accent-color);
    color: var(--bg-main, #0a0a0f);
    border-color: var(--accent-color);
    font-weight: 600;
}
/* Toggled ON but 0 hours logged today = dashed outline — ambient "you claimed
   this counts but haven't done any of it yet" signal. */
.score-balance-toggle--on.score-balance-toggle--missing {
    border-style: dashed;
    opacity: 0.8;
}

/* ── Intent pill preview deltas (A9, April 2026) ───────────────────────────
   Each intent pill shows how much the total score would change if that intent
   were committed. Gains show in accent colour, losses in muted warning tone,
   active pill hides its delta (always 0). The +50 first-declaration bonus is
   implicit in the math — see the pill render block in report.js. */

.score-intent-pill-score {
    display: inline-block;
    margin-left: 5px;
    font-size: 0.8em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}

.score-intent-pill-score--gain {
    color: var(--accent-color);
}

.score-intent-pill-score--loss {
    color: var(--text-muted, #888);
}

.score-intent-pill--active .score-intent-pill-score {
    display: none;
}


/* ── Score weekly sparkline ─────────────────────────────────────────────────
   Shown above the mood sparkline in the Score panel "This Week" tab.
   Visuals mirror .mood-sparkline-* (report-mood.css :312-385) intentionally —
   the two sparklines stack and need to look like a set. When tweaking either
   block, mirror the change in the other. The score block adds one rule the
   mood block doesn't have: .score-sparkline-goal (dashed reference line at
   score=500, the streak threshold).
   See report-score.js for the JS. */

.score-sparkline-section {
    margin-top: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    margin-bottom: 4px;
}

.score-sparkline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.score-sparkline-empty {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
    margin: 6px 0 4px;
}

.score-net {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.score-net--up   { color: var(--accent-color); }
.score-net--down { color: var(--color-report-warning, #c9913d); }

.score-sparkline {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.score-sparkline-line {
    stroke: var(--accent-color);
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.score-sparkline-dot {
    fill: var(--accent-color);
    opacity: 0.65;
}
.score-sparkline-dot--today {
    opacity: 1;
}

.score-sparkline-goal {
    stroke: var(--text-muted, rgba(255, 255, 255, 0.5));
    stroke-width: 0.8;
    stroke-dasharray: 3 3;
    opacity: 0.5;
}

.score-day-label {
    fill: var(--text-muted, rgba(255, 255, 255, 0.5));
    font-size: 9px;
    text-anchor: middle;
    font-family: inherit;
}
.score-day-label--today {
    fill: var(--accent-color);
    font-weight: 700;
}

/* Per-dot value label, mirrors .food-weight-val-label (report-food.css).
   Both use 9px to share visual weight in the chart — keep them in sync
   per invariant #172. */
.score-val-label {
    fill: var(--text-main, #fff);
    font-size: 9px;
    font-weight: 600;
    text-anchor: middle;
    font-family: inherit;
}