/* =============================================================================
   Nouri — base styles (theme tokens via CSS custom properties)
   Light/dark switched via prefers-color-scheme + manual data-theme override
   Palette: zesty yellow primary, lime accent
   ============================================================================= */

:root {
    --nr-yellow:    #FFD23F;
    --nr-lime:      #A8E10C;
    --nr-bg:        #FFFCF2;     /* warm off-white */
    --nr-surface:   #FFFFFF;
    --nr-text:      #1F1F1F;     /* charcoal, not pure black */
    --nr-text-mute: #5A5A5A;
    --nr-border:    #EDE7D6;
    --nr-radius:    14px;
    --nr-font:
        -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --nr-yellow:    #E8B800;   /* muted on dark */
        --nr-lime:      #8FCB0A;
        --nr-bg:        #121212;
        --nr-surface:   #1C1C1C;
        --nr-text:      #ECECEC;
        --nr-text-mute: #9A9A9A;
        --nr-border:    #2A2A2A;
    }
}

[data-theme="light"] {
    --nr-yellow: #FFD23F; --nr-lime: #A8E10C;
    --nr-bg: #FFFCF2; --nr-surface: #FFFFFF; --nr-text: #1F1F1F;
    --nr-text-mute: #5A5A5A; --nr-border: #EDE7D6;
}
[data-theme="dark"] {
    --nr-yellow: #E8B800; --nr-lime: #8FCB0A;
    --nr-bg: #121212; --nr-surface: #1C1C1C; --nr-text: #ECECEC;
    --nr-text-mute: #9A9A9A; --nr-border: #2A2A2A;
}

* { box-sizing: border-box; }
html, body {
    margin: 0;
    padding: 0;
    background: var(--nr-bg);
    color: var(--nr-text);
    font-family: var(--nr-font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;   /* prevent page-wide horizontal scroll */
    min-height: 100dvh;   /* short pages fill the viewport (no gap below footer) */
}

.splash {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
}

.logo-img {
    width: clamp(220px, 60vw, 480px);
    height: auto;
    margin: 0 0 0.75rem;
    border-radius: 18px;
    /* In dark mode the logo has a cream background; render it as an intentional
       "plate" with subtle border so it sits cleanly on the dark surface. */
    background: transparent;
}
@media (prefers-color-scheme: dark) {
    .logo-img {
        box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.05);
    }
}
[data-theme="dark"] .logo-img {
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.05);
}

.tagline {
    font-size: 1.15rem;
    color: var(--nr-text-mute);
    margin: 0 0 2rem;
}

.status {
    font-size: 0.9rem;
    color: var(--nr-text-mute);
    border: 1px solid var(--nr-border);
    border-radius: var(--nr-radius);
    padding: 0.6rem 1rem;
    background: var(--nr-surface);
}

.splash-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.9rem 1rem calc(0.9rem + env(safe-area-inset-bottom));
    text-align: center;
    font-size: 0.8rem;
    color: var(--nr-text-mute);
    background: linear-gradient(to top, var(--nr-bg) 60%, transparent);
}
.splash-footer a {
    color: var(--nr-text-mute);
    text-decoration: none;
    margin: 0 0.5rem;
}
.splash-footer a:hover { color: var(--nr-text); }
.splash-footer .dot { opacity: 0.5; }

/* =============================================================================
   Page shell, forms, cookie banner, legal/spec pages
   ============================================================================= */

/* ----- Header ----- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.7rem 1rem;
    background: var(--nr-bg);
    border-bottom: 1px solid var(--nr-border);
    backdrop-filter: saturate(160%) blur(10px);
}
.brand img { height: 30px; width: auto; display: block; border-radius: 6px; }
.site-nav { display: flex; align-items: center; gap: 0.5rem; }
.nav-link {
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.9rem; font-weight: 500;
    color: var(--nr-text);
}
.nav-link:hover { background: var(--nr-surface); }
.nav-cta { color: #1F1F1F; }   /* fill + hover: shared action-button rule below */

.avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, var(--nr-yellow), var(--nr-lime));
    color: #1F1F1F; font-weight: 700; font-size: 0.9rem;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}

/* ----- Splash ----- */
.splash { min-height: calc(100vh - 60px - 60px); }
.splash-cta { display: flex; flex-direction: column; gap: 0.6rem; align-items: center; margin-top: 1.5rem; }

/* ----- Buttons ----- */
.btn-primary {
    display: inline-block;
    background: var(--nr-yellow); color: #1F1F1F;
    padding: 0.75rem 1.4rem;
    border: 0; border-radius: 12px;
    font-weight: 600; font-size: 1rem;
    text-decoration: none; cursor: pointer;
    transition: background 0.15s, transform 0.05s;
}
.btn-primary:active { transform: translateY(1px); }   /* fill + hover: shared action-button rule */
.btn-primary.btn-block { width: 100%; }

.btn-secondary {
    background: transparent; color: var(--nr-text);
    padding: 0.7rem 1.2rem;
    border: 1px solid var(--nr-border); border-radius: 12px;
    font-weight: 500; cursor: pointer;
}
.btn-secondary:hover { border-color: var(--nr-text-mute); }

.btn-link {
    background: none; border: 0; color: var(--nr-text-mute);
    text-decoration: none; font-size: 0.9rem;
    padding: 0.4rem 0.6rem;
}
.btn-link:hover { color: var(--nr-text); }

/* ----- Forms (auth) ----- */
.auth-wrap {
    max-width: 440px; margin: 0 auto; padding: 1.5rem 1.25rem 6rem;
}
.auth-title { font-size: 1.6rem; margin: 0.5rem 0 0.25rem; font-weight: 700; }
.auth-sub   { color: var(--nr-text-mute); margin: 0 0 1.5rem; }
.auth-form label {
    display: block; margin-top: 0.9rem; font-size: 0.85rem; color: var(--nr-text-mute);
}
.auth-form input,
.auth-form select {
    display: block; width: 100%; box-sizing: border-box;
    margin-top: 0.3rem;
    padding: 0.65rem 0.85rem; font-size: 1rem;
    background: var(--nr-surface); color: var(--nr-text);
    border: 1px solid var(--nr-border); border-radius: 10px;
}
.auth-form input:focus,
.auth-form select:focus { outline: 2px solid var(--nr-yellow); outline-offset: 1px; }
.auth-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.auth-form .hint { display: block; font-size: 0.75rem; color: var(--nr-text-mute); margin-top: 0.25rem; }
.auth-form .check { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.85rem; color: var(--nr-text); }
.auth-form .check input { width: auto; margin-top: 0.2rem; }
.auth-form button { margin-top: 1.5rem; }
.auth-meta { text-align: center; color: var(--nr-text-mute); font-size: 0.9rem; margin-top: 1.25rem; }

.form-error {
    background: #FEE2E2; color: #991B1B;
    padding: 0.7rem 0.9rem; border-radius: 10px;
    font-size: 0.9rem; margin: 0 0 1rem;
}
@media (prefers-color-scheme: dark) {
    .form-error { background: #3B1414; color: #FCA5A5; }
}

/* ----- Legal pages ----- */
.legal-wrap { max-width: 720px; margin: 0 auto; padding: 1.5rem 1.25rem 6rem; }
.legal-wrap h1 { margin: 0.5rem 0 0.25rem; }
.legal-wrap h2 { margin-top: 2rem; font-size: 1.1rem; }
.legal-wrap p, .legal-wrap li { line-height: 1.55; }
.legal-meta { color: var(--nr-text-mute); font-size: 0.85rem; margin-bottom: 1.5rem; }

/* ----- Spec page ----- */
.spec-wrap   { max-width: 880px; margin: 0 auto; padding: 1.5rem 1.25rem 6rem; }
.spec-back   { color: var(--nr-text-mute); text-decoration: none; font-size: 0.85rem; }
.spec-back:hover { color: var(--nr-text); }
.spec-h      { margin: 0.75rem 0 0.25rem; font-size: 1.4rem; }
.spec-meta   { color: var(--nr-text-mute); font-size: 0.85rem; margin-bottom: 1.5rem; }
.spec-md {
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    border-radius: var(--nr-radius);
    padding: 1.25rem 1.5rem;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.82rem; line-height: 1.55;
    white-space: pre-wrap; word-wrap: break-word;
    color: var(--nr-text); overflow-x: auto;
}

/* ----- Footer (replaces previous splash-only one) ----- */
.site-footer {
    border-top: 1px solid var(--nr-border);
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    background: var(--nr-bg);
}
.footer-inner {
    max-width: 880px; margin: 0 auto;
    text-align: center;
    font-size: 0.8rem; color: var(--nr-text-mute);
}
.site-footer a { color: var(--nr-text-mute); text-decoration: none; margin: 0 0.5rem; }
.site-footer a:hover { color: var(--nr-text); }
.site-footer .dot { opacity: 0.5; }

/* Suppress the older fixed splash-only footer if it ever renders */
.splash-footer { display: none; }

/* ----- Cookie banner ----- */
.sf-cookie-banner {
    position: fixed; left: 1rem; right: 1rem; bottom: 1rem;
    z-index: 200;
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}
@media (min-width: 700px) {
    .sf-cookie-banner { left: auto; right: 1rem; bottom: 1rem; max-width: 460px; }
}
.sf-cookie-inner { padding: 1rem 1.1rem 1.1rem; }
.sf-cookie-text strong { display: block; margin-bottom: 0.3rem; font-size: 0.95rem; }
.sf-cookie-text p      { margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--nr-text-mute); line-height: 1.5; }
.sf-cookie-detail summary { cursor: pointer; font-size: 0.8rem; color: var(--nr-text-mute); }
.sf-cookie-detail ul { padding-left: 1.2rem; margin: 0.5rem 0 0.6rem; font-size: 0.8rem; color: var(--nr-text-mute); }
.sf-cookie-actions {
    display: flex; gap: 0.5rem; justify-content: flex-end;
    margin-top: 0.4rem;
}
.sf-cookie-actions .btn-primary,
.sf-cookie-actions .btn-secondary { padding: 0.55rem 1rem; font-size: 0.9rem; }

/* Info / success banner used on auth pages */
.form-info {
    background: rgba(168, 225, 12, 0.18);
    color: #1F1F1F;
    border: 1px solid rgba(168, 225, 12, 0.6);
    padding: 0.7rem 0.9rem;
    border-radius: 10px;
    font-size: 0.9rem;
    margin: 0 0 1rem;
}
@media (prefers-color-scheme: dark) {
    .form-info { background: rgba(168, 225, 12, 0.10); color: #ECECEC; border-color: rgba(168, 225, 12, 0.35); }
}

/* =============================================================================
   Profile dropdown + preferences page + danger button
   ============================================================================= */

.profile-wrap { position: relative; }

.avatar { border: 0; padding: 0; cursor: pointer; }

.profile-menu {
    position: absolute; top: calc(100% + 8px); right: 0;
    min-width: 240px;
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.18);
    padding: 0.5rem;
    z-index: 60;
}
.pm-section { padding: 0.4rem 0.5rem; }
.pm-label   { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
              color: var(--nr-text-mute); margin-bottom: 0.35rem; }
.pm-toggle  {
    display: flex; gap: 4px; padding: 4px;
    background: var(--nr-bg);
    border-radius: 10px;
    border: 1px solid var(--nr-border);
    margin: 0;
}
.pm-toggle button {
    flex: 1;
    background: transparent; color: var(--nr-text);
    border: 0; padding: 0.4rem 0.6rem;
    border-radius: 8px; font-size: 0.8rem; cursor: pointer;
    font-weight: 500;
}
.pm-toggle button.is-active { background: var(--nr-yellow); color: #1F1F1F; }
.pm-toggle button:hover:not(.is-active) { background: rgba(0,0,0,0.04); }
@media (prefers-color-scheme: dark) {
    .pm-toggle button:hover:not(.is-active) { background: rgba(255,255,255,0.05); }
}

.pm-divider { height: 1px; background: var(--nr-border); margin: 0.4rem 0.4rem; }

.pm-item {
    display: block; width: 100%; text-align: left;
    background: transparent; border: 0; cursor: pointer;
    padding: 0.55rem 0.85rem;
    color: var(--nr-text); text-decoration: none; font-size: 0.9rem;
    border-radius: 8px;
}
.pm-item:hover { background: var(--nr-bg); }
.pm-item-danger { color: #B91C1C; }
.pm-item-danger:hover { background: rgba(185, 28, 28, 0.08); }
@media (prefers-color-scheme: dark) {
    .pm-item-danger { color: #F87171; }
    .pm-item-danger:hover { background: rgba(248, 113, 113, 0.10); }
}
.pm-form { margin: 0; }

/* Preferences page */
.pref-h {
    margin: 2.5rem 0 0.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--nr-border);
    font-size: 1.05rem;
}
.pref-h.pref-danger { color: #B91C1C; }
@media (prefers-color-scheme: dark) {
    .pref-h.pref-danger { color: #F87171; }
}
.pref-text { color: var(--nr-text-mute); font-size: 0.9rem; margin: 0.25rem 0 1rem; }

.btn-danger {
    display: inline-block;
    background: #B91C1C; color: #fff;
    padding: 0.7rem 1.2rem;
    border: 0; border-radius: 12px;
    font-weight: 600; cursor: pointer;
    margin-top: 1rem;
}
.btn-danger:hover { background: #991B1B; }

/* Small button variant — used for inline Edit / Abandon actions */
.btn-sm {
    padding: 0.35rem 0.8rem;
    font-size: 0.82rem;
    border-radius: 8px;
    margin-top: 0;
}
.btn-sm.btn-danger { margin-top: 0; }

/* Row of action buttons on a goal card */
.goal-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

/* Header action button (e.g. + Add goal) inside a .dash-greet header.
   Keeps the button on one line and centred against the title block.
   (Inline styles are blocked by our CSP, so this lives here.) */
.dash-greet .btn-sm {
    align-self: center;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Inline form (e.g. abandon-goal form sitting next to the Edit link). */
.goal-abandon-form { display: inline; }

/* Progress fill width is set by JS from data-pct (CSP blocks inline width). */
.goal-progress-fill { display: block; height: 100%; width: 0; }

/* Wider variant of the auth-wrap for forms with more content (e.g. goal builder). */
.auth-wrap--wide { max-width: 560px; }

/* Tight preference heading (no top border / padding) — used at top of a form. */
.pref-h--flush {
    margin-top: 0.5rem;
    border-top: 0;
    padding-top: 0;
}

/* Transient success / info banner after a redirect */
.flash-banner {
    background: var(--nr-yellow);
    color: #1F1F1F;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    font-weight: 500;
}

/* =============================================================================
   Defeat user-agent default purple on visited links.
   `a` plain rules have lower specificity than UA's `a:visited`, so we restate
   colours for the visited state — class-styled links keep their colour, plain
   inline links inherit from their parent's text colour.
   ============================================================================= */
a:visited                    { color: inherit; }

.brand:visited               { color: inherit; }
.nav-link:visited            { color: var(--nr-text); }
.nav-cta:visited             { color: #1F1F1F; }

.btn-primary:visited         { color: #1F1F1F; }
.btn-secondary:visited       { color: var(--nr-text); }
.btn-link:visited            { color: var(--nr-text-mute); }
.btn-danger:visited          { color: #fff; }

.spec-back:visited           { color: var(--nr-text-mute); }
.site-footer a:visited       { color: var(--nr-text-mute); }
.splash-footer a:visited     { color: var(--nr-text-mute); }

.pm-item:visited             { color: var(--nr-text); }
.pm-item-danger:visited      { color: #B91C1C; }
@media (prefers-color-scheme: dark) {
    .pm-item-danger:visited  { color: #F87171; }
}

/* Inline links in legal copy & message bodies — pick up parent colour */
.legal-wrap a:visited,
.auth-wrap a:visited,
.auth-meta a:visited,
.spec-md a:visited           { color: inherit; }

/* =============================================================================
   Header brand wordmark — yellow→lime gradient text with theme-aware outline
   (light mode: black outline; dark mode: white outline).
   The .webp logo continues to live on the splash + as favicon/PWA icon.
   ============================================================================= */
.brand { display: inline-flex; align-items: center; line-height: 1; text-decoration: none; }
.brand img { height: 30px; width: auto; display: block; border-radius: 6px; }  /* legacy fallback */

.brand-text {
    font-weight: 800;
    font-size: 1.55rem;
    letter-spacing: -0.04em;
    line-height: 1;
    background: linear-gradient(120deg, var(--nr-yellow) 0%, var(--nr-lime) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px #1F1F1F;       /* light mode default — black outline */
    paint-order: stroke fill;
    user-select: none;
}

/* Dark mode (system) */
@media (prefers-color-scheme: dark) {
    .brand-text { -webkit-text-stroke: 1px #FFFFFF; }
}
/* Manual theme overrides take precedence */
[data-theme="light"] .brand-text { -webkit-text-stroke: 1px #1F1F1F; }
[data-theme="dark"]  .brand-text { -webkit-text-stroke: 1px #FFFFFF; }

/* Two-tone "sch" + "liff" wordmark (overrides the earlier single-tone version) */
.brand-text {
    font-weight: 800;
    font-size: 1.55rem;
    letter-spacing: -0.04em;
    line-height: 1;
    background: none;          /* reset the earlier gradient */
    -webkit-background-clip: initial;
            background-clip: initial;
    color: inherit;
    -webkit-text-fill-color: initial;
    -webkit-text-stroke: 0;
    user-select: none;
    display: inline-flex;
}

/* "sch" — solid theme colour */
.brand-sch {
    color: #1F1F1F;            /* light mode default */
}
@media (prefers-color-scheme: dark) {
    .brand-sch { color: #FFFFFF; }
}
[data-theme="light"] .brand-sch { color: #1F1F1F; }
[data-theme="dark"]  .brand-sch { color: #FFFFFF; }

/* "liff" — yellow → lime gradient */
.brand-liff {
    background: linear-gradient(120deg, var(--nr-yellow) 0%, var(--nr-lime) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Prominent inline field alert (e.g. age violation) shown right under a form field */
.field-alert {
    display: block;
    margin-top: 0.5rem;
    padding: 0.6rem 0.85rem;
    background: #FEE2E2;
    color: #991B1B;
    border: 1px solid rgba(185, 28, 28, 0.35);
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
}
.field-alert[hidden] { display: none; }
@media (prefers-color-scheme: dark) {
    .field-alert { background: #3B1414; color: #FCA5A5; border-color: rgba(248, 113, 113, 0.4); }
}

/* =============================================================================
   Dashboard — main tabs, sub-tabs, cards, sparkline, summaries
   ============================================================================= */

.main-tabs, .sub-tabs {
    display: flex;
    gap: 4px;
    padding: 0.5rem 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--nr-bg);
    border-bottom: 1px solid var(--nr-border);
}
.main-tabs::-webkit-scrollbar,
.sub-tabs::-webkit-scrollbar { display: none; }

.main-tab, .sub-tab {
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    text-decoration: none;
    color: var(--nr-text-mute);
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
}
.main-tab:hover, .sub-tab:hover { color: var(--nr-text); }
.main-tab.is-active, .sub-tab.is-active {
    color: #1F1F1F;
    background: var(--nr-yellow);
}
[data-theme="dark"] .main-tab.is-active,
[data-theme="dark"] .sub-tab.is-active { color: #1F1F1F; }

.sub-tabs {
    border-bottom: 0;
    padding-top: 0.5rem;
    padding-bottom: 0;
}
.sub-tab {
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    font-size: 0.82rem;
}

.dash {
    max-width: 880px;
    margin: 0 auto;
    padding: 1rem 1rem 5rem;
}

.dash-greet {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin: 0.5rem 0 1.25rem;
}
.dash-title { font-size: 1.6rem; margin: 0 0 0.25rem; font-weight: 700; }
.dash-quote { color: var(--nr-text-mute); margin: 0; font-size: 0.95rem; line-height: 1.5; }
.dash-sub   { color: var(--nr-text-mute); margin: 0 0 1.5rem; }

.dash-streak {
    display: flex; flex-direction: column; align-items: center;
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    border-radius: 14px;
    padding: 0.6rem 0.9rem;
    min-width: 72px;
}
.streak-flame { font-size: 1.4rem; line-height: 1; }
.streak-num   { font-size: 1.3rem; font-weight: 700; line-height: 1; margin-top: 0.15rem; }
.streak-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--nr-text-mute); }

.dash-card {
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    border-radius: 16px;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
}
.card-h    { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 600; }
.card-sub  { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--nr-text-mute); margin-bottom: 0.4rem; }
.card-empty{ color: var(--nr-text-mute); font-size: 0.9rem; margin: 0.25rem 0; }

/* ----- Today snapshot ----- */
.snapshot-row {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: 1rem;
    align-items: center;
}
@media (max-width: 600px) {
    .snapshot-row { grid-template-columns: auto 1fr; gap: 0.75rem; }
    .workout-status { grid-column: 1 / -1; padding-top: 1rem; }
}

.points-ring {
    position: relative;
    width: 80px; height: 80px;
}
.points-ring-fill {
    stroke: var(--nr-yellow);
    transition: stroke-dasharray 0.4s ease;
}
.points-ring.is-over .points-ring-fill { stroke: #FF8E72; }
.points-ring.is-over .ring-num         { color: #FF8E72; }
.ring-inner {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    line-height: 1;
}
.ring-num    { font-size: 1.2rem; font-weight: 700; }
.ring-target { font-size: 0.7rem; color: var(--nr-text-mute); }
.ring-label  { position: absolute; bottom: -1.1rem; left: 0; right: 0; text-align: center;
               font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--nr-text-mute); }

.meal-ticks { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.meal-ticks .card-sub { width: 100%; }
.tick {
    width: 28px; height: 28px;
    border-radius: 999px;
    border: 1px solid var(--nr-border);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 600;
    color: var(--nr-text-mute);
    background: var(--nr-bg);
}
.tick.is-on { background: var(--nr-lime); color: #1F1F1F; border-color: transparent; }

.workout-line { font-size: 0.95rem; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--nr-border); margin-right: 0.4rem; vertical-align: middle; }
.dot.dot-on { background: var(--nr-lime); }

/* ----- Quick actions ----- */
.qa-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin: 1rem 0;
}
@media (max-width: 600px) {
    .qa-grid { grid-template-columns: repeat(2, 1fr); }
}
.qa {
    display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
    padding: 0.85rem 0.5rem;
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    border-radius: 14px;
    text-decoration: none;
    color: var(--nr-text);
    font-size: 0.78rem;
    text-align: center;
}
.qa:hover { background: var(--nr-bg); border-color: var(--nr-yellow); }
.qa-icon { font-size: 1.5rem; line-height: 1; }

/* ----- Sparkline ----- */
.sparkline-wrap { width: 100%; }
.sparkline { width: 100%; height: 120px; display: block; }
.sparkline-meta { display: flex; justify-content: space-between; font-size: 0.85rem; margin-top: 0.5rem; color: var(--nr-text); }
.sparkline-meta .muted { color: var(--nr-text-mute); font-size: 0.75rem; }

/* ----- Summary cards ----- */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-top: 1rem;
}
@media (max-width: 600px) {
    .summary-grid { grid-template-columns: 1fr; }
}
.summary-card {
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    border-radius: 14px;
    padding: 1rem;
    text-align: center;
}
.sc-num { font-size: 1.8rem; font-weight: 700; line-height: 1; }
.sc-lbl { color: var(--nr-text-mute); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.4rem; }

/* ----- Coming soon placeholder ----- */
.coming-soon-card {
    text-align: center;
    padding: 4rem 1.5rem;
    color: var(--nr-text-mute);
}
.cs-icon { font-size: 3rem; display: block; margin-bottom: 0.5rem; }
.coming-soon-card .dash-title { color: var(--nr-text); }

/* ----- Plan upsell ----- */
.upsell { border-color: var(--nr-yellow); }

/* Password peek toggle — eye button overlaid on right side of password inputs */
.password-wrap {
    position: relative;
    display: block;
}
.password-wrap input[type="password"],
.password-wrap input[type="text"] {
    padding-right: 2.6rem;     /* room for the eye button */
}
.password-peek {
    position: absolute;
    top: 50%;
    right: 0.45rem;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: var(--nr-text-mute);
    cursor: pointer;
    padding: 0.35rem;
    border-radius: 8px;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.password-peek:hover { color: var(--nr-text); background: rgba(0,0,0,0.05); }
@media (prefers-color-scheme: dark) {
    .password-peek:hover { background: rgba(255,255,255,0.06); }
}

/* Goals tab — list, cards, history */
.empty-goals { text-align: center; padding: 2rem 1rem; }
.empty-goals .cs-icon { font-size: 3rem; display: block; margin-bottom: 0.5rem; }
.empty-goals .card-empty { max-width: 36ch; margin: 0.5rem auto 1.25rem; }

.goal-list { display: flex; flex-direction: column; gap: 0.75rem; }
.goal-card { padding: 1.1rem; }
.goal-meta {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.78rem; color: var(--nr-text-mute);
    margin-bottom: 0.4rem;
}
.goal-type-pill {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    background: var(--nr-yellow);
    color: #1F1F1F;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.72rem;
}
.goal-type-pill.small { font-size: 0.68rem; }
.goal-status { color: var(--nr-text-mute); }
.goal-h     { margin: 0 0 0.35rem; font-size: 1.05rem; font-weight: 600; }
.goal-dates { margin: 0; color: var(--nr-text-mute); font-size: 0.85rem; }

.goal-history { list-style: none; padding: 0; margin: 0; }
.goal-history li {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--nr-border);
    font-size: 0.9rem;
}
.goal-history li:last-child { border-bottom: 0; }

/* Goals — type picker grid + direction toggle + projection card */
.goal-type-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin: 1rem 0 1.5rem;
}
@media (min-width: 640px) {
    .goal-type-grid { grid-template-columns: repeat(3, 1fr); }
}
.goal-type-card {
    display: block;
    padding: 1.25rem 1rem;
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    border-radius: 16px;
    text-decoration: none;
    color: var(--nr-text);
    transition: border-color 0.15s, transform 0.05s;
}
.goal-type-card:hover { border-color: var(--nr-yellow); transform: translateY(-1px); }
.goal-type-card.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.goal-type-card.is-disabled:hover { border-color: var(--nr-border); transform: none; }
.gtc-icon { font-size: 2rem; line-height: 1; display: block; margin-bottom: 0.5rem; }
.gtc-h    { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 600; }
.gtc-sub  { margin: 0; color: var(--nr-text-mute); font-size: 0.85rem; line-height: 1.45; }

.dir-toggle {
    display: flex; gap: 0.5rem; align-items: stretch;
    background: var(--nr-bg); border: 1px solid var(--nr-border);
    padding: 4px; border-radius: 12px; margin-bottom: 1rem;
}
/* Use .dir-toggle .dir-opt (specificity 0,2,0) to beat .auth-form label (0,1,1)
   which would otherwise impose display:block and margin-top:0.9rem on these labels. */
.dir-toggle .dir-opt {
    flex: 1; cursor: pointer; padding: 0.55rem 0.6rem;
    border-radius: 9px; font-weight: 600; text-align: center;
    color: var(--nr-text-mute);
    margin: 0;
    display: flex; align-items: center; justify-content: center;
}
.dir-toggle .dir-opt input { position: absolute; opacity: 0; pointer-events: none; }
.dir-toggle .dir-opt:has(input:checked) { background: var(--nr-yellow); color: #1F1F1F; }

.projection {
    margin: 0.75rem 0 0;
    padding: 0.75rem 0.95rem;
    border-radius: 10px;
    font-size: 0.9rem;
    line-height: 1.45;
    border: 1px solid var(--nr-border);
    background: var(--nr-surface);
    color: var(--nr-text);
}
.projection.is-safe   { border-color: rgba(168, 225, 12, 0.55); background: rgba(168, 225, 12, 0.10); }
.projection.is-unsafe { border-color: rgba(185, 28, 28, 0.45);  background: #FEE2E2; color: #991B1B; }
.projection.is-warn   { border-color: rgba(255, 180, 0, 0.55);  background: rgba(255, 210, 63, 0.15); color: #92620A; }
@media (prefers-color-scheme: dark) {
    .projection.is-unsafe { background: #3B1414; color: #FCA5A5; }
    .projection.is-warn   { background: rgba(255, 210, 63, 0.1); color: #FFD23F; }
}

/* Amber variant of the flash banner (gain-rate warning) */
.flash-banner--warn {
    background: rgba(255, 210, 63, 0.25);
    border: 1px solid rgba(255, 180, 0, 0.4);
    color: var(--nr-text);
}

/* Goals — body-comp progress block */
.goal-progress { margin-top: 0.85rem; }
.goal-progress-bar {
    height: 8px;
    background: var(--nr-bg);
    border: 1px solid var(--nr-border);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.4rem;
}
.goal-progress-bar > span {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--nr-yellow), var(--nr-lime));
    transition: width 0.3s ease;
}
.goal-progress-meta {
    display: flex; justify-content: space-between;
    font-size: 0.8rem; color: var(--nr-text-mute);
}
.goal-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.5rem;
    margin: 0.85rem 0 0;
}
.goal-stats > div {
    background: var(--nr-bg);
    border: 1px solid var(--nr-border);
    border-radius: 10px;
    padding: 0.55rem 0.7rem;
}
.goal-stats dt {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--nr-text-mute); margin: 0 0 0.15rem;
}
.goal-stats dd {
    margin: 0; font-size: 1rem; font-weight: 600;
}

/* =============================================================================
   Doc pages (Spec, Roadmap) — pretty markdown rendering
   ============================================================================= */
.doc-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 1.25rem 1.25rem 6rem;
}
.doc-h    { margin: 0.75rem 0 0.25rem; font-size: 1.6rem; font-weight: 700; }
.doc-meta { color: var(--nr-text-mute); font-size: 0.85rem; margin-bottom: 1.5rem; }

.doc-md { color: var(--nr-text); line-height: 1.65; font-size: 0.95rem; }
.doc-md h1 { font-size: 1.6rem; margin: 2rem 0 0.6rem; font-weight: 700; }
.doc-md h2 {
    font-size: 1.2rem; margin: 2rem 0 0.5rem; font-weight: 700;
    padding-top: 1rem; border-top: 1px solid var(--nr-border);
}
.doc-md h3 { font-size: 1.05rem; margin: 1.5rem 0 0.4rem; font-weight: 600; }
.doc-md h4 { font-size: 0.95rem; margin: 1.2rem 0 0.3rem; font-weight: 600; color: var(--nr-text-mute); }
.doc-md p  { margin: 0.6rem 0; }
.doc-md ul, .doc-md ol { padding-left: 1.4rem; margin: 0.5rem 0; }
.doc-md li { margin: 0.25rem 0; }
.doc-md li > ul, .doc-md li > ol { margin: 0.25rem 0; }

.doc-md hr { border: 0; border-top: 1px solid var(--nr-border); margin: 2rem 0; }
.doc-md a  { color: var(--nr-text); text-decoration: underline; text-underline-offset: 2px; }
.doc-md a:hover { color: var(--nr-lime); }

.doc-md code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85em;
    background: var(--nr-bg);
    border: 1px solid var(--nr-border);
    border-radius: 6px;
    padding: 0.05rem 0.4rem;
}
.doc-md pre {
    background: var(--nr-bg);
    border: 1px solid var(--nr-border);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    overflow-x: auto;
    font-size: 0.85rem;
}
.doc-md pre code { background: none; border: 0; padding: 0; }

.doc-md blockquote {
    margin: 0.75rem 0;
    padding: 0.4rem 0.9rem;
    border-left: 3px solid var(--nr-yellow);
    color: var(--nr-text-mute);
    background: var(--nr-bg);
    border-radius: 0 10px 10px 0;
}

.doc-md table {
    border-collapse: collapse;
    margin: 0.75rem 0;
    width: 100%;
    font-size: 0.9rem;
}
.doc-md th, .doc-md td {
    border: 1px solid var(--nr-border);
    padding: 0.5rem 0.7rem;
    text-align: left;
}
.doc-md th { background: var(--nr-bg); font-weight: 600; }

/* GitHub-style task list checkboxes */
.doc-md ul:has(input[type="checkbox"]) {
    list-style: none;
    padding-left: 0.25rem;
}
.doc-md li:has(input[type="checkbox"]) {
    display: flex; align-items: flex-start; gap: 0.55rem;
    padding: 0.15rem 0;
}
.doc-md li:has(input[type="checkbox"]:checked) {
    color: var(--nr-text-mute);
}
.doc-md li:has(input[type="checkbox"]:checked) code,
.doc-md li:has(input[type="checkbox"]:checked) a {
    color: inherit;
    text-decoration: line-through;
}
.doc-md input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px; height: 16px;
    margin: 0.3rem 0 0;
    border: 1.5px solid var(--nr-border);
    border-radius: 4px;
    cursor: default;
    flex: 0 0 auto;
    position: relative;
    background: var(--nr-surface);
}
.doc-md input[type="checkbox"]:checked {
    background: var(--nr-lime);
    border-color: var(--nr-lime);
}
.doc-md input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px; top: 0px;
    width: 5px; height: 10px;
    border: solid #1F1F1F;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.spec-back {
    display: inline-block;
    color: var(--nr-text-mute);
    text-decoration: none;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}
.spec-back:hover { color: var(--nr-text); }

/* =============================================================================
   Tier badges — Founder / Pro / Basic
   ============================================================================= */

.sf-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}
.sf-badge--founder {
    background: linear-gradient(135deg, #FFD23F 0%, #FFAA00 100%);
    color: #3A2800;
    border: 1px solid #E8A800;
}
.sf-badge--pro {
    background: var(--nr-lime);
    color: #1A3300;
    border: 1px solid #8FCB0A;
}
.sf-badge--basic {
    background: var(--nr-surface);
    color: var(--nr-text-mute);
    border: 1px solid var(--nr-border);
}

/* Profile dropdown badge row */
.pm-badge-row {
    padding: 10px 14px 4px;
}

/* =============================================================================
   Admin area
   ============================================================================= */

.admin-wrap {
    max-width: 1300px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 4rem;
}
.admin-header { margin-bottom: 1rem; }
.admin-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}
.admin-flash {
    margin-bottom: 1rem;
}

/* Tab nav */
.admin-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--nr-border);
    margin-bottom: 1.5rem;
}
.admin-tab {
    padding: 0.55rem 1.1rem;
    border-radius: 8px 8px 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--nr-text-mute);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s;
}
.admin-tab:hover { color: var(--nr-text); }
.admin-tab.is-active {
    color: var(--nr-text);
    border-bottom: 3px solid var(--nr-yellow);
    margin-bottom: -2px;
}
.admin-tab-count {
    background: var(--nr-border);
    color: var(--nr-text-mute);
    border-radius: 20px;
    padding: 1px 7px;
    font-size: 0.75rem;
    font-weight: 700;
}
.admin-tab-count--alert {
    background: #E53935;
    color: #fff;
}

/* Panel */
.admin-panel {
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    border-radius: var(--nr-radius);
    padding: 1.25rem;
    overflow: hidden;
}
.admin-empty {
    color: var(--nr-text-mute);
    text-align: center;
    padding: 2rem 0;
    margin: 0;
}

/* Table */
.admin-table-wrap { overflow-x: auto; }
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.admin-table th {
    text-align: left;
    padding: 0.5rem 0.5rem;
    color: var(--nr-text-mute);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--nr-border);
    white-space: nowrap;
}
.admin-table td {
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid var(--nr-border);
    vertical-align: top;
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-row--suspended td { opacity: 0.55; }
.admin-cell-email { color: var(--nr-text-mute); font-size: 0.82rem; }
.admin-cell-date  { color: var(--nr-text-mute); font-size: 0.82rem; white-space: nowrap; }
.admin-cell-name  { font-weight: 600; white-space: nowrap; }
.admin-cell-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
}
/* Primary action row (suspend + founder toggle) */
.admin-action-row {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: nowrap;
}
/* Delete sits below everything, visually lighter */
.admin-action-danger {
    margin-top: 1px;
}

/* Status toggle buttons — replace static chips */
.status-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: filter 0.15s;
    white-space: nowrap;
    line-height: 1.4;
}
.status-toggle:hover { filter: brightness(0.9); }
.status-toggle--active {
    background: #E8F5E9;
    color: #2E7D32;
    border-color: #A5D6A7;
}
.status-toggle--suspended {
    background: #FFEBEE;
    color: #C62828;
    border-color: #EF9A9A;
}
[data-theme="dark"] .status-toggle--active    { background: #1B3B1E; color: #81C784; border-color: #388E3C; }
[data-theme="dark"] .status-toggle--suspended { background: #3B1B1B; color: #EF9A9A; border-color: #C62828; }
@media (prefers-color-scheme: dark) {
    .status-toggle--active    { background: #1B3B1E; color: #81C784; border-color: #388E3C; }
    .status-toggle--suspended { background: #3B1B1B; color: #EF9A9A; border-color: #C62828; }
}

/* Tier cell */
.admin-cell-tier { min-width: 110px; }

/* Badge as clickable button */
.sf-badge--btn {
    cursor: pointer;
    transition: filter 0.15s;
}
.sf-badge--btn:hover { filter: brightness(0.88); }

/* Basic badge gets a more prominent outline so it reads as interactive */
.sf-badge--basic.sf-badge--btn {
    border: 1.5px dashed var(--nr-text-mute);
}

/* Pro tier wrap: badge stacked above  − date + row */
.tier-pro-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.tier-pro-date-row {
    display: flex;
    align-items: center;
    gap: 4px;
}
.tier-trial-date {
    font-size: 0.78rem;
    color: var(--nr-text-mute);
    white-space: nowrap;
}
/* .tier-month-btns removed — forms sit inline in .tier-pro-date-row */
.tier-month-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--nr-border);
    background: var(--nr-surface);
    color: var(--nr-text);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: background 0.12s;
}
.tier-month-btn:hover:not(:disabled) { background: var(--nr-border); }
.tier-month-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Countdown column */
.admin-countdown {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--nr-text-mute);
}
.admin-countdown--warn {
    color: #E53935;
}
.admin-mute {
    color: var(--nr-text-mute);
    font-size: 0.8rem;
}

.admin-chip {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 4px;
}
.admin-chip--admin { background: var(--nr-yellow); color: #3A2800; }

/* Action buttons */
.admin-btn {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    background: none;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s;
}
.admin-btn:hover { opacity: 0.8; }
.admin-btn--ok       { background: #E8F5E9; color: #2E7D32; border-color: #A5D6A7; }
.admin-btn--warn     { background: #FFF3E0; color: #E65100; border-color: #FFCC80; }
.admin-btn--danger   { background: #FFEBEE; color: #C62828; border-color: #EF9A9A; }
.admin-btn--founder  { background: linear-gradient(135deg, #FFD23F, #FFAA00); color: #3A2800; border-color: #E8A800; }
.admin-btn--muted    { background: var(--nr-surface); color: var(--nr-text-mute); border-color: var(--nr-border); }
[data-theme="dark"] .admin-btn--ok     { background: #1B3B1E; color: #81C784; border-color: #388E3C; }
[data-theme="dark"] .admin-btn--warn   { background: #3B2300; color: #FFB74D; border-color: #E65100; }
[data-theme="dark"] .admin-btn--danger { background: #3B1B1B; color: #EF9A9A; border-color: #C62828; }

/* Delete confirmation expander — mirrors trial picker style */
.admin-delete-details { display: block; }
.admin-delete-details summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
}
.admin-delete-details summary::-webkit-details-marker { display: none; }
.admin-delete-form {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 5px;
    padding: 6px 8px;
    background: var(--nr-bg);
    border: 1px solid #EF9A9A;
    border-radius: 6px;
}
.admin-delete-input {
    font-size: 0.82rem;
    padding: 3px 7px;
    border: 1px solid var(--nr-border);
    border-radius: 5px;
    background: var(--nr-surface);
    color: var(--nr-text);
    width: 110px;
    font-family: monospace;
    letter-spacing: 0.05em;
}

.admin-action-form { display: contents; }

/* Small size modifier for secondary/danger actions */
.admin-btn--sm {
    padding: 3px 8px;
    font-size: 0.72rem;
}

/* Trial date picker */
.admin-trial-details { display: block; }
.admin-trial-details summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.admin-trial-details summary::-webkit-details-marker { display: none; }
.admin-trial-until {
    font-size: 0.68rem;
    opacity: 0.7;
    font-weight: 400;
}
.admin-trial-form {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 5px;
    padding: 6px 8px;
    background: var(--nr-bg);
    border: 1px solid var(--nr-border);
    border-radius: 6px;
}
.admin-trial-input {
    font-size: 0.82rem;
    padding: 3px 7px;
    border: 1px solid var(--nr-border);
    border-radius: 5px;
    background: var(--nr-surface);
    color: var(--nr-text);
    flex: 1;
    min-width: 0;
}

/* Concerns severity */
.concern-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: middle;
    background: var(--nr-border);
}
.concern-dot--amber { background: #FFA726; }
.concern-dot--red   { background: #E53935; }
.concern-dot--black { background: #212121; }
[data-theme="dark"] .concern-dot--black { background: #9E9E9E; }

.concern-row--amber td { border-left: 3px solid #FFA726; }
.concern-row--red   td { border-left: 3px solid #E53935; }
.concern-row--black td { border-left: 3px solid #212121; opacity: 0.75; }
.concern-row--amber td:not(:first-child) { border-left: none; }
.concern-row--red   td:not(:first-child) { border-left: none; }
.concern-row--black td:not(:first-child) { border-left: none; }

.admin-concerns-key {
    font-size: 0.82rem;
    color: var(--nr-text-mute);
    margin: 0 0 1rem;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

/* Analytics stub */
.admin-analytics-stub {
    text-align: center;
    padding: 3rem 2rem;
}
.admin-stub-icon  { font-size: 2.5rem; margin-bottom: 0.75rem; }
.admin-stub-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.5rem; }
.admin-stub-sub   { font-size: 1rem; color: var(--nr-text-mute); margin: 0 0 1rem; }
.admin-stub-body  {
    font-size: 0.875rem;
    color: var(--nr-text-mute);
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ============================================================
   Admin — suspend modal dialog + suspension note button
   ============================================================ */

/* Native <dialog> backdrop */
.sf-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
}

.sf-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: min(420px, 92vw);
    max-width: 92vw;
    box-sizing: border-box;
    padding: 24px 28px 20px;
    border: 1px solid var(--nr-border);
    border-radius: 14px;
    background: var(--nr-surface);
    color: var(--nr-text);
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
    font-family: inherit;
}

.sf-dialog h3 {
    margin: 0 0 12px;
    font-size: 1.1rem;
    font-weight: 700;
}

.sf-dialog-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--nr-text-mute);
    margin: 0 0 8px;
}

.sf-dialog p {
    margin: 0 0 14px;
    font-size: 0.85rem;
    color: var(--nr-text-mute);
    line-height: 1.45;
}

.sf-dialog textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 90px;
    padding: 8px 10px;
    border: 1px solid var(--nr-border);
    border-radius: 7px;
    background: var(--nr-bg);
    color: var(--nr-text);
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
    margin-bottom: 14px;
}

.sf-dialog-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.sf-dialog-cancel,
.sf-dialog-submit {
    flex: 1;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: filter 0.15s;
    border: 1px solid transparent;
}

.sf-dialog-cancel {
    border-color: var(--nr-border);
    background: var(--nr-surface);
    color: var(--nr-text-mute);
}
.sf-dialog-cancel:hover { filter: brightness(0.95); }

.sf-dialog-submit {
    border-color: #EF9A9A;
    background: #FFEBEE;
    color: #C62828;
}
.sf-dialog-submit:hover { filter: brightness(0.93); }

.sf-dialog-submit--save {
    border-color: #A5D6A7;
    background: #E8F5E9;
    color: #2E7D32;
}
.sf-dialog-submit:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: none;
}

[data-theme="dark"] .sf-dialog-submit         { background: #3B1B1B; color: #EF9A9A; border-color: #C62828; }
[data-theme="dark"] .sf-dialog-submit--save   { background: #1B3B1E; color: #81C784; border-color: #388E3C; }
[data-theme="dark"] .sf-dialog-cancel         { background: var(--nr-surface); color: var(--nr-text-mute); }

/* Speech-bubble icon button beside "Suspended" */
.suspension-note-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid #EF9A9A;
    background: #FFEBEE;
    color: #C62828;
    font-size: 0.8rem;
    cursor: pointer;
    margin-left: 4px;
    vertical-align: middle;
    transition: filter 0.15s;
    flex-shrink: 0;
}
.suspension-note-btn:hover { filter: brightness(0.9); }
[data-theme="dark"] .suspension-note-btn { background: #3B1B1B; color: #EF9A9A; border-color: #C62828; }

/* Wrap suspended status + note button side-by-side */
.suspension-status-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ============================================================
   Dashboard — weigh-in flash + modal inputs
   ============================================================ */

.dash-flash {
    margin: 0.5rem 0 0;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid transparent;
}
.dash-flash--ok  { background: #E8F5E9; color: #2E7D32; border-color: #A5D6A7; }
.dash-flash--err { background: #FFEBEE; color: #C62828; border-color: #EF9A9A; }
.dash-flash--info{ background: var(--nr-surface); color: var(--nr-text-mute); border-color: var(--nr-border); }
[data-theme="dark"] .dash-flash--ok  { background: #1B3B1E; color: #81C784; border-color: #388E3C; }
[data-theme="dark"] .dash-flash--err { background: #3B1B1B; color: #EF9A9A; border-color: #C62828; }

/* Make button.qa look identical to a.qa */
button.qa {
    cursor: pointer;
    font-family: inherit;
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
}
button.qa:hover { background: var(--nr-bg); border-color: var(--nr-yellow); }

.qa-weight-logged {
    font-weight: 700;
    font-size: 0.85rem;
    color: #2E7D32;
}
[data-theme="dark"] .qa-weight-logged { color: #81C784; }

/* Weigh-in modal inputs */
.weighin-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--nr-text-mute);
    margin-bottom: 8px;
}
.weighin-last {
    font-size: 0.8rem;
    color: var(--nr-text-mute);
    margin: -4px 0 12px;
}
/* Wrap input + unit as a single pill so the unit sits inside the border */
.weighin-input-group {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--nr-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--nr-bg);
    transition: border-color 0.15s;
}
.weighin-input-group:focus-within { border-color: var(--nr-yellow); }

.weighin-input {
    flex: 1;
    padding: 14px 12px;
    font-size: 1.3rem;
    font-weight: 700;
    border: none;
    background: transparent;
    color: var(--nr-text);
    text-align: center;
    -moz-appearance: textfield;
    outline: none;
    min-width: 0;
}
.weighin-input::-webkit-outer-spin-button,
.weighin-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Stones layout: two narrow inputs side by side inside the same pill */
.weighin-input--stones { max-width: 80px; text-align: right; padding-right: 4px; }
.weighin-input--lbs    { max-width: 90px; text-align: left;  padding-left:  4px; }
.weighin-unit {
    display: flex;
    align-items: center;
    padding: 0 14px 0 4px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--nr-text-mute);
    flex-shrink: 0;
    background: transparent;
}
/* Stones: unit labels sit between inputs */
.weighin-unit--mid {
    padding: 0 4px;
}

/* ============================================================
   Weigh-in — warning state styles
   ============================================================ */

.dash-flash--warn {
    background: #FFF8E1;
    color: #795548;
    border-color: #FFE082;
}
[data-theme="dark"] .dash-flash--warn { background: #3B2E00; color: #FFD54F; border-color: #F9A825; }

.weighin-warn-banner {
    background: #FFF3E0;
    color: #E65100;
    border: 1px solid #FFCC80;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.88rem;
    font-weight: 600;
    margin-bottom: 10px;
}
[data-theme="dark"] .weighin-warn-banner { background: #3B2300; color: #FFB74D; border-color: #E65100; }

.weighin-warn-body {
    font-size: 0.85rem;
    color: var(--nr-text);
    margin: 0 0 6px;
    line-height: 1.45;
}

.weighin-warn-edit {
    font-size: 0.8rem;
    color: var(--nr-text-mute);
    margin: 0 0 12px;
}

.weighin-confirm-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    font-size: 0.83rem;
    color: var(--nr-text);
    line-height: 1.4;
    cursor: pointer;
}

.weighin-confirm-check {
    margin-top: 2px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: #E65100;
    cursor: pointer;
}
/* =============================================================================
   Food tab — meal cards, search dialog, configure panel
   ============================================================================= */

/* ── Page header ──────────────────────────────────────────────────────────── */
.food-page { padding-top: 0.5rem; }
@media (min-width: 900px) {
    /* Double-class selector wins over `.dash { max-width: 1120px }` further
       down the file. Food page deliberately stays narrower than the dashboard
       so meal cards don't stretch into giant empty rectangles. */
    .dash.food-page { max-width: 880px; padding: 1rem 1.5rem 5rem; }
    .food-date-title { font-size: 1.6rem; }
}

/* ── Day totals strip (top of food page) ─────────────────────────────────── */
.food-day-totals {
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    border-radius: 16px;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}
.food-day-totals::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #FFD43B, #B9F36A, #FFB088, #8FE3E8);
    opacity: 0.85;
}
.fdt-headline {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.fdt-kcal {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}
.fdt-kcal-lbl {
    font-size: 0.85rem;
    color: var(--nr-text-mute);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.fdt-points-badge {
    margin-left: auto;
    background: var(--nr-yellow);
    color: #1F1F1F;
    border-radius: 20px;
    padding: 0.35rem 0.9rem;
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
}
.fdt-macros {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}
.fdt-macro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.55rem 0.4rem;
    background: var(--nr-bg);
    border: 1px solid var(--nr-border);
    border-radius: 10px;
}
.fdt-macro-val {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1;
}
.fdt-macro-lbl {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--nr-text-mute);
}
@media (min-width: 900px) {
    .fdt-kcal { font-size: 2.4rem; }
    .fdt-macro-val { font-size: 1.1rem; }
    .food-day-totals { padding: 1.25rem 1.5rem; }
}
/* Narrow phones: 4-col macros get cramped once values cross 100g.
   Drop to 2x2 and slightly shrink the headline kcal so nothing wraps awkwardly. */
@media (max-width: 420px) {
    .food-day-totals { padding: 0.85rem 0.9rem; }
    .fdt-kcal        { font-size: 1.75rem; }
    .fdt-kcal-lbl    { font-size: 0.78rem; }
    .fdt-points-badge{ font-size: 0.82rem; padding: 0.3rem 0.75rem; }
    .fdt-macros      { grid-template-columns: 1fr 1fr; }
}

.food-day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0.5rem 0 1rem;
}
.food-date-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
}

/* ── Page transitions (View Transitions API) ─────────────────────────────
   Same-origin navigations crossfade instead of hard-swapping; the food page
   content additionally slides up slightly when stepping between days. The
   day strip and header are lifted out of the slide (own transition names)
   so they stay anchored and just crossfade. Progressive enhancement: older
   browsers ignore all of this and keep the instant swap. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.18s; }

main.food-page    { view-transition-name: food-main; }
.food-day-header  { view-transition-name: food-day-header; }
.day-strip        { view-transition-name: day-strip; }

@keyframes vt-rise-in  { from { opacity: 0; transform: translateY(12px); } }
@keyframes vt-fade-out { to   { opacity: 0; } }
::view-transition-old(food-main) { animation: vt-fade-out 0.12s ease-in forwards; }
::view-transition-new(food-main) { animation: vt-rise-in 0.22s ease-out; }

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(*),
    ::view-transition-new(*) { animation-duration: 0s; }
}

/* ── Day navigator ────────────────────────────────────────────────────────
   5 day-chips centred on the selected day (server recenters on tap) plus
   chevrons to step further. Chips share width evenly so the row fits a phone. */
.day-strip {
    display: flex;
    align-items: stretch;
    gap: 0.3rem;
    margin: 0 0 1rem;
}
.day-nav-arrow {
    flex: 0 0 auto;
    width: 1.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--nr-border);
    border-radius: 10px;
    color: var(--nr-text-mute);
    text-decoration: none;
    font-size: 1.2rem;
    line-height: 1;
}
.day-nav-arrow:hover { border-color: var(--nr-text-mute); color: var(--nr-text); }
.day-chip {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 0.4rem 0.15rem;
    border: 1px solid var(--nr-border);
    border-radius: 10px;
    background: var(--nr-surface);
    color: var(--nr-text-mute);
    text-decoration: none;
}
.day-chip-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.day-chip-num {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--nr-text);
}
.day-chip.is-today .day-chip-label { color: var(--nr-yellow); font-weight: 700; }
.day-chip.is-selected {
    border-color: var(--nr-yellow);
    background: var(--nr-yellow);
}
.day-chip.is-selected .day-chip-label,
.day-chip.is-selected .day-chip-num { color: #1F1F1F; }

.btn--yellow {
    background: var(--nr-yellow);
    color: #1F1F1F;
    border: none;
    border-radius: 20px;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.btn--yellow:hover { filter: brightness(0.93); }

/* Ghost / secondary button — paired with .btn--yellow for "primary + cancel"
   action rows. Used in the AI-photo flow (Change photo / Retry / etc.). */
.btn--ghost {
    background: var(--nr-surface);
    color: var(--nr-text);
    border: 1px solid var(--nr-border);
    border-radius: 20px;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.btn--ghost:hover {
    background: var(--nr-bg);
    border-color: var(--nr-text-mute);
}
.btn--ghost:active { transform: translateY(1px); }

/* ── Empty state ──────────────────────────────────────────────────────────── */
.food-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--nr-text-mute);
}
.food-empty-icon  { font-size: 2.5rem; margin-bottom: 0.5rem; }
.food-empty-title { font-size: 1.05rem; font-weight: 600; color: var(--nr-text); margin: 0 0 0.35rem; }
.food-empty-body  { margin: 0; font-size: 0.9rem; }

/* ── Meal card ────────────────────────────────────────────────────────────── */
.meal-card {
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    border-radius: 16px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.meal-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.meal-label-badge {
    background: var(--nr-yellow);
    color: #1F1F1F;
    border-radius: 20px;
    padding: 0.3rem 0.95rem;
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: 0.01em;
}
/* Per-meal-type colour accents — each meal feels distinct, not a wall of yellow */
.meal-label-badge[data-meal-type="breakfast"] { background: #FFD43B; }
.meal-label-badge[data-meal-type="lunch"]     { background: #B9F36A; }
.meal-label-badge[data-meal-type="dinner"]    { background: #FFB088; }
.meal-label-badge[data-meal-type="snack"]     { background: #8FE3E8; }
.meal-label-badge[data-meal-type="brunch"],
.meal-label-badge[data-meal-type="supper"]    { background: #E0AFFF; }

/* Matching left-edge accent stripe on each meal card */
.meal-card[data-meal-type] { position: relative; overflow: hidden; }
.meal-card[data-meal-type]::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 3px;
    background: var(--nr-border);
}
.meal-card[data-meal-type="breakfast"]::before { background: #FFD43B; }
.meal-card[data-meal-type="lunch"]::before     { background: #B9F36A; }
.meal-card[data-meal-type="dinner"]::before    { background: #FFB088; }
.meal-card[data-meal-type="snack"]::before     { background: #8FE3E8; }
.meal-card[data-meal-type="brunch"]::before,
.meal-card[data-meal-type="supper"]::before    { background: #E0AFFF; }

.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--nr-text-mute);
    font-size: 1.1rem;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    line-height: 1;
}
.icon-btn:hover { color: var(--nr-text); background: var(--nr-border); }

/* ── Meal items list ──────────────────────────────────────────────────────── */
.meal-items-list {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
}
.meal-item-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    margin-bottom: 0.4rem;
    background: var(--nr-bg);
    border: 1px solid var(--nr-border);
    border-radius: 10px;
}
.meal-item-row:last-child { margin-bottom: 0; }

/* Freshly-added item briefly highlights so you can spot what you just logged.
   Added/removed via the `is-new` class in food.js (buildItemRow insert sites). */
@keyframes item-flash {
    0%   { background: rgba(255, 210, 63, 0.45); box-shadow: 0 0 0 2px var(--nr-yellow); }
    55%  { background: rgba(255, 210, 63, 0.22); box-shadow: 0 0 0 1px var(--nr-yellow); }
    100% { background: var(--nr-bg);             box-shadow: 0 0 0 0 transparent; }
}
.meal-item-row.is-new { animation: item-flash 1.4s ease-out; }
@media (prefers-reduced-motion: reduce) {
    .meal-item-row.is-new { animation: none; }
}

.meal-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.meal-item-name {
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.meal-item-meta {
    font-size: 0.75rem;
    color: var(--nr-text-mute);
}
.meal-item-kcal {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--nr-text-mute);
}
.item-delete-btn { font-size: 1.2rem; }
.item-edit-btn   { font-size: 1rem; }   /* pencil sits beside the × delete */

/* ── Favourite heart ──────────────────────────────────────────────────────
   ♥ beside the pencil: text-coloured when not favourited, fills red (with a
   little pop) once saved. Toggles a name-deduped snapshot favourite — see
   the Favourites tab in the add-item dialog. */
.item-fav-btn {
    font-size: 1.05rem;
    color: var(--nr-text);
    opacity: 0.45;
    transition: color 0.15s, opacity 0.15s;
}
.item-fav-btn.is-fav {
    color: #E0245E;
    opacity: 1;
    animation: fav-pop 0.25s ease-out;
}
@keyframes fav-pop {
    0%   { transform: scale(1);   }
    50%  { transform: scale(1.35); }
    100% { transform: scale(1);   }
}
@media (prefers-reduced-motion: reduce) {
    .item-fav-btn.is-fav { animation: none; }
}

/* ── Add item button ─────────────────────────────────────────────────────── */
.add-item-btn {
    display: block;
    width: 66%;
    margin: 0 auto 0.75rem;        /* centered, 66% of full width */
    border-radius: 10px;
    padding: 0.7rem;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    transition: filter 0.15s, box-shadow 0.15s;
    /* fill + hover + shimmer: shared action-button rule below */
}

/* ── Add meal buttons ────────────────────────────────────────────────────
   Four one-tap buttons (+ Breakfast / + Lunch / + Dinner / + Snack)
   between the day-totals card and the meal list — creating a meal is a
   single tap, no picker dialog. 2×2 grid so the longer German labels
   (Mittagessen, Abendessen) still fit on phone widths. */
.add-meal-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin: 0.25rem 0 1.1rem;
}
.add-meal-btn {
    border-radius: 12px;
    padding: 0.7rem 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
    transition: filter 0.15s, box-shadow 0.15s;
    /* fill + hover + shimmer: shared action-button rule below */
}
.add-meal-btn:disabled { opacity: 0.55; cursor: default; animation: none; }
.add-meal-btn.is-loading { filter: brightness(1.08); }

/* ── Animated action buttons ──────────────────────────────────────────────
   Every "do something" CTA shares one shimmering yellow→green gradient so
   actions read consistently across the app. Pure background-position
   animation — the bright fill + dark text work on both light and dark
   themes. Honours prefers-reduced-motion. Cancel / ghost / link / danger
   buttons are deliberately excluded so destructive/secondary actions stay
   visually quiet. */
@keyframes btn-shimmer {
    0%   { background-position:   0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position:   0% 50%; }
}
.btn-primary,
.btn--yellow,
.nav-cta,
.add-meal-btn,
.add-item-btn {
    background: linear-gradient(270deg, #FFD23F, #A8E10C, #FFD23F);
    background-size: 200% 200%;
    color: #1F1F1F;
    border: none;
    animation: btn-shimmer 4s ease-in-out infinite;
}
.btn-primary:hover,
.btn--yellow:hover,
.nav-cta:hover,
.add-meal-btn:hover,
.add-item-btn:hover {
    filter: brightness(1.05);
    box-shadow: 0 2px 12px rgba(168, 225, 12, 0.4);
}
@media (prefers-reduced-motion: reduce) {
    .btn-primary,
    .btn--yellow,
    .nav-cta,
    .add-meal-btn,
    .add-item-btn { animation: none; }
}

/* ── Meal totals ──────────────────────────────────────────────────────────── */
.meal-totals { margin-top: 0.25rem; }

/* Flat macro strip: 5 borderless cells share the row evenly and never wrap,
   so kcal/protein/carbs/fat/fiber always fit one mobile line (replaces the
   old bordered pills that knocked each other onto extra rows). Mirrors the
   top day-totals strip. The .macro-pill class name is kept (used by both the
   EJS render and recalcTotals in food.js) but it's no longer a pill. */
.meal-macros-row {
    display: flex;
    justify-content: space-between;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}
.macro-pill {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.macro-val  { font-size: 0.85rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.macro-lbl  { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--nr-text-mute); white-space: nowrap; }

.meal-vitamins {
    font-size: 0.75rem;
    color: var(--nr-text-mute);
    margin-bottom: 0.5rem;
    line-height: 1.6;
}
.vit-sep  { margin: 0 0.2rem; }

.meal-points-row { display: flex; }
.meal-points-badge {
    background: var(--nr-yellow);
    color: #1F1F1F;
    border-radius: 20px;
    padding: 0.3rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 700;
}

/* ── Food select (Add Meal dialog) ───────────────────────────────────────── */
.food-select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--nr-border);
    border-radius: 10px;
    padding: 9px 11px;
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--nr-bg);
    color: var(--nr-text);
    margin: 0;
}

/* ── Food search dialog ───────────────────────────────────────────────────── */
dialog:not([open]) { display: none; }
.food-search-dialog {
    width: min(580px, 96vw);
    height: min(680px, 88vh);
    border-radius: 20px;
    padding: 0;
    border: 1px solid var(--nr-border);
    background: var(--nr-surface);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.food-search-dialog::backdrop { background: rgba(0,0,0,0.5); }

.fsd-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--nr-border);
    flex-shrink: 0;
}
.fsd-header h3 { margin: 0; font-size: 1rem; }
.fsd-close { font-size: 1.4rem; }

/* Panels fill remaining dialog height and scroll internally.
   Use :not([hidden]) so CSS display doesn't override the hidden attribute. */
.fsd-panel[hidden] { display: none; }
.fsd-panel:not([hidden]) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fsd-body  { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1rem 1.25rem 1.5rem; }

/* ── Category chips ───────────────────────────────────────────────────────── */
.food-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}
.cat-chip {
    border: 1px solid var(--nr-border);
    background: var(--nr-bg);
    border-radius: 20px;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    color: var(--nr-text);
    transition: background 0.12s, border-color 0.12s;
}
.cat-chip:hover   { border-color: var(--nr-yellow); }
.cat-chip.is-active {
    background: var(--nr-yellow);
    border-color: var(--nr-yellow);
    color: #1F1F1F;
    font-weight: 600;
}

/* ── Search input ─────────────────────────────────────────────────────────── */
.food-search-input-wrap { margin-bottom: 0.75rem; }
.food-search-input {
    width: 100%;
    border: 1px solid var(--nr-border);
    border-radius: 10px;
    padding: 0.65rem 0.9rem;
    font-size: 1rem;
    background: var(--nr-bg);
    color: var(--nr-text);
}
.food-search-input:focus { outline: 2px solid var(--nr-yellow); border-color: transparent; }

.food-search-status {
    font-size: 0.85rem;
    color: var(--nr-text-mute);
    margin-bottom: 0.5rem;
    min-height: 1.2em;
}

/* ── Result list ─────────────────────────────────────────────────────────── */
.food-result-list { list-style: none; margin: 0; padding: 0; }
.food-result-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--nr-border);
    cursor: pointer;
    border-radius: 8px;
}
.food-result-item:hover { background: var(--nr-bg); padding-left: 0.4rem; }

.food-result-img {
    width: 48px; height: 48px;
    border-radius: 8px;
    object-fit: contain;
    border: 1px solid var(--nr-border);
    flex-shrink: 0;
    background: var(--nr-bg);
}
.food-result-img-placeholder {
    width: 48px; height: 48px;
    border-radius: 8px;
    background: var(--nr-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.food-result-info { flex: 1; min-width: 0; }
.food-result-name {
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.food-result-brand { font-size: 0.75rem; color: var(--nr-text-mute); }
.food-result-kcal  { font-size: 0.8rem; font-weight: 600; color: var(--nr-text-mute); white-space: nowrap; flex-shrink: 0; }

/* ── Configure panel ─────────────────────────────────────────────────────── */
.fsd-back-btn {
    background: none;
    border: none;
    color: var(--nr-yellow);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-bottom: 1rem;
}

.food-configure { padding-top: 0.25rem; }
.food-cfg-name  { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.15rem; }
.food-cfg-brand { font-size: 0.8rem; color: var(--nr-text-mute); margin-bottom: 1rem; }

.food-configure-field { margin-bottom: 0.85rem; }
.food-configure-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--nr-text-mute);
    margin-bottom: 0.3rem;
}
.food-configure-input,
.food-configure-select {
    width: 100%;
    border: 1px solid var(--nr-border);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    font-size: 1rem;
    background: var(--nr-bg);
    color: var(--nr-text);
}
.food-configure-input:focus,
.food-configure-select:focus { outline: 2px solid var(--nr-yellow); border-color: transparent; }

.food-weight-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.food-weight-input { max-width: 120px; }
.food-weight-unit  { font-weight: 600; color: var(--nr-text-mute); }

/* g / ml segmented toggle in the configure panel */
.food-unit-toggle {
    display: inline-flex;
    background: var(--nr-bg);
    border: 1px solid var(--nr-border);
    border-radius: 8px;
    overflow: hidden;
}
.food-unit-btn {
    background: transparent;
    color: var(--nr-text-mute);
    border: 0;
    padding: 0.4rem 0.7rem;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.food-unit-btn.is-active { background: var(--nr-yellow); color: #1F1F1F; }
.food-unit-btn:hover:not(.is-active) { background: rgba(0,0,0,0.04); }
@media (prefers-color-scheme: dark) {
    .food-unit-btn:hover:not(.is-active) { background: rgba(255,255,255,0.05); }
}

/* ── Nutrition preview ───────────────────────────────────────────────────── */
.food-nutrition-preview {
    background: var(--nr-bg);
    border: 1px solid var(--nr-border);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0.75rem 0 1rem;
}
.fnp-item { display: flex; flex-direction: column; align-items: center; }
.fnp-val  { font-size: 1.05rem; font-weight: 700; }
.fnp-lbl  { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--nr-text-mute); }

/* =============================================================================
   Food search dialog — tabs + scan panel
   ============================================================================= */

/* ── Dialog tab bar ───────────────────────────────────────────────────────── */
.fsd-tabs {
    display: flex;
    border-bottom: 1px solid var(--nr-border);
    flex-shrink: 0;
}
.fsd-tab {
    flex: 1;
    min-width: 0;               /* let tabs shrink below content width */
    display: flex;
    flex-direction: column;     /* icon stacked over a small label — iOS tab-bar idiom */
    align-items: center;
    gap: 0.15rem;
    background: none;
    border: none;
    padding: 0.55rem 0.2rem;
    font-weight: 500;
    color: var(--nr-text-mute);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}
.fsd-tab-ico {
    font-size: 1.15rem;
    line-height: 1;
}
.fsd-tab-lbl {
    font-size: 0.68rem;
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fsd-tab.is-active {
    color: var(--nr-text);
    border-bottom-color: var(--nr-yellow);
    font-weight: 700;
}
.fsd-tab:hover:not(.is-active) { color: var(--nr-text); }

/* ── Favourites panel ─────────────────────────────────────────────────────
   One row per saved favourite; the whole row is a button — tapping it logs
   the snapshot straight into the open meal (no configure step). */
.favs-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.fav-row + .fav-row { margin-top: 0.5rem; }
.fav-add-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.6rem 0.75rem;
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    border-radius: 12px;
    color: var(--nr-text);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.fav-add-btn:hover:not(:disabled) { border-color: var(--nr-yellow); background: var(--nr-bg); }
.fav-add-btn:disabled { opacity: 0.55; cursor: default; }
.fav-heart { color: #E0245E; font-size: 1rem; }
.fav-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.fav-name {
    font-weight: 600;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fav-meta {
    font-size: 0.75rem;
    color: var(--nr-text-mute);
}
.fav-kcal {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Generics panel ───────────────────────────────────────────────────────── */
.generics-body { padding: 1rem 1rem 1.5rem; }

#generics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}
@media (max-width: 340px) {
    #generics-grid { grid-template-columns: repeat(2, 1fr); }
}

.generics-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    background: var(--nr-surface);
    border: 1.5px solid var(--nr-border);
    border-radius: 14px;
    padding: 0.75rem 0.4rem;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.15s,
                max-height 0.2s ease, min-height 0.2s ease,
                padding 0.2s ease, margin 0.2s ease;
    min-height: 76px;
    max-height: 200px;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
.generics-tile:hover,
.generics-tile:focus-visible {
    border-color: var(--nr-yellow);
    outline: none;
}
.generics-tile:active { transform: scale(0.95); }

.generics-tile-emoji { font-size: 1.6rem; line-height: 1; }
.generics-tile-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--nr-text);
    text-align: center;
    line-height: 1.2;
}

/* Collapse other tiles when one is chosen */
.generics-tile--fading {
    opacity: 0;
    transform: scale(0.85);
    max-height: 0 !important;
    min-height: 0 !important;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    pointer-events: none;
    border-color: transparent;
}

/* Drilldown section */
#generics-drilldown { padding-top: 0.25rem; }

.generics-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--nr-surface);
    border: 1.5px solid var(--nr-yellow);
    border-radius: 10px;
    padding: 0.5rem 0.8rem;
    margin-bottom: 1rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--nr-text);
    width: 100%;
    text-align: left;
    transition: background 0.15s;
}
.generics-breadcrumb:hover { background: var(--nr-bg); }
#generics-breadcrumb-emoji { font-size: 1.2rem; }
.generics-breadcrumb-back {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--nr-text-mute);
}

.generics-status {
    font-size: 0.85rem;
    color: var(--nr-text-mute);
    text-align: center;
    padding: 0.5rem 0;
    min-height: 1.5rem;
}

.generics-item-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.generics-item-btn {
    width: 100%;
    text-align: left;
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    border-radius: 10px;
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--nr-text);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
}
.generics-item-btn:hover,
.generics-item-btn:focus-visible {
    background: var(--nr-bg);
    border-color: var(--nr-yellow);
    outline: none;
}
.generics-item-btn:active { opacity: 0.75; }

/* Slide-in animation for drilldown */
@keyframes generics-slide-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
#generics-drilldown:not([hidden]) {
    animation: generics-slide-in 0.2s ease both;
}

/* ── Scan panel ───────────────────────────────────────────────────────────── */
.scan-body { display: flex; flex-direction: column; align-items: center; padding: 1rem 1.25rem; }
.scan-hint { font-size: 0.9rem; color: var(--nr-text-mute); text-align: center; margin: 0 0 1rem; }

.scan-viewfinder {
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    margin-bottom: 1rem;
}
.scan-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.scan-frame-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.scan-frame-box {
    width: 65%;
    aspect-ratio: 3 / 2;
    border: 2px solid var(--nr-yellow);
    border-radius: 8px;
    box-shadow: 0 0 0 2000px rgba(0,0,0,0.45);
}

.scan-fallback { text-align: center; margin-top: 0.5rem; }
.scan-file-label {
    display: inline-block;
    background: var(--nr-yellow);
    color: #1F1F1F;
    border-radius: 12px;
    padding: 0.65rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
#scan-file-input { display: none; }
.scan-status {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--nr-text-mute);
    text-align: center;
    min-height: 1.4em;
}
.scan-manual { margin-top: 1rem; border-top: 1px solid var(--nr-border); padding-top: 1rem; }
.scan-manual-row { display: flex; gap: 0.5rem; margin-top: 0.35rem; }
.scan-manual-row .food-search-input { flex: 1; font-size: 1.05rem; letter-spacing: 0.08em; }
.scan-manual-row .btn-sm { white-space: nowrap; }

/* ── AI Photo panel ─────────────────────────────────────────────────────────── */
.photo-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem;
    gap: 1rem;
    min-height: 200px;
}

/* "Take / choose photo" — styled like a big camera button */
.photo-capture-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--nr-yellow, #f5c518);
    color: #000;
    border-radius: 999px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: opacity 0.15s;
    text-align: center;
}
.photo-capture-label:hover { opacity: 0.88; }

/* "Pick row" — Take photo + Choose from library side by side */
.photo-pick-row {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
}
.photo-capture-label--alt {
    background: var(--nr-bg);
    color: var(--nr-text);
    border: 1px solid var(--nr-border);
}

/* Hide the raw file input but keep it accessible */
#photo-file-input { display: none; }

/* Thumbnail preview */
.photo-thumb-wrap {
    width: 100%;
    max-height: 220px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--nr-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.photo-thumb {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}
.photo-preview-actions {
    display: flex;
    gap: 0.75rem;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.85rem;
}
.photo-retake-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}

/* Spinner (CSS-only) */
.photo-spinner-wrap {
    display: flex;
    justify-content: center;
    padding: 1.5rem 0 0.5rem;
}
.photo-spinner {
    width: 36px;
    height: 36px;
    border: 4px solid var(--nr-border, #ddd);
    border-top-color: var(--nr-yellow, #f5c518);
    border-radius: 50%;
    animation: photo-spin 0.75s linear infinite;
}
@keyframes photo-spin { to { transform: rotate(360deg); } }

/* Edit-hint text above the review list */
.photo-edit-hint {
    font-size: 0.82rem;
    color: var(--nr-text-mute);
    margin: 0 0 0.5rem;
    text-align: center;
}

/* Review items list */
.photo-items-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.photo-items-list,
.photo-item-row {
    /* Keep every flex/grid child from blowing the dialog wider than 100% */
    min-width: 0;
}
.photo-item-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.6rem;
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    border-radius: 10px;
    box-sizing: border-box;
    width: 100%;
}
.photo-item-name {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--nr-text);
    padding: 0.2rem 0;
    text-overflow: ellipsis;
}
.photo-item-name:focus {
    outline: 1px solid var(--nr-yellow);
    border-radius: 4px;
}
.photo-item-weight {
    width: 50px;
    flex-shrink: 0;
    border: 1px solid var(--nr-border);
    border-radius: 6px;
    padding: 0.25rem 0.35rem;
    font-size: 0.85rem;
    text-align: right;
    background: var(--nr-bg);
    color: var(--nr-text);
    font-family: inherit;
    box-sizing: border-box;
}
.photo-item-g {
    font-size: 0.8rem;
    color: var(--nr-text-mute);
}
.photo-item-kcal {
    font-size: 0.78rem;
    color: var(--nr-text-mute);
    white-space: nowrap;
    flex-shrink: 0;
    text-align: right;
}
.photo-item-remove {
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 0.25rem;
    color: var(--nr-text-mute);
    flex-shrink: 0;
}
.photo-item-remove:hover { color: #FF7676; }

/* Footer actions (re-analyse + add-all) */
.photo-results-actions {
    display: flex;
    gap: 0.75rem;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.85rem;
}

/* Error state */
.photo-err-msg {
    text-align: center;
    color: #FF7676;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

/* Visually-hidden utility — used for file inputs triggered programmatically.
   Inline style="display:none" is blocked by CSP style-src 'self' without
   'unsafe-inline', so we use a class instead. */
.sf-visually-hidden {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ----------------------------------------------------------------------------
   Inline-style replacements
   Inline style="…" attributes are blocked by CSP (style-src 'self' without
   'unsafe-inline'), so these one-off cosmetic adjustments live here as
   purpose-named classes instead.
   --------------------------------------------------------------------------*/
.auth-wrap--narrow        { max-width: 560px; }
.form-info--w340          { max-width: 340px; }
.form-info--w380          { max-width: 380px; }
.form-error--spaced       { margin-bottom: 1.25rem; }
.onb-h-tight              { margin-top: 0.5rem; border-top: 0; padding-top: 0; }
.pref-text--tight         { margin-top: 0.25rem; }
.btn-spaced-top           { margin-top: 1.5rem; }
.msg-body                 { margin-top: 1.25rem; }
.impressum-footnote       { color: var(--nr-text-mute); font-size: 0.85rem; margin-top: 2rem; }
.admin-textarea--min80    { min-height: 80px; }

/* =============================================================================
   Dashboard — desktop polish (≥ 900px)
   Mobile (< 900px) keeps the original stacked layout untouched.
   ========================================================================== */

/* Subtle card lift on quick actions on ALL sizes — pops a little. */
.qa { transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease; }
.qa:hover { transform: translateY(-1px); }

/* Faint accent strip on the Today snapshot card. */
.dash-card.snapshot {
    position: relative;
    overflow: hidden;
}
.dash-card.snapshot::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--nr-yellow), var(--nr-lime));
    opacity: 0.85;
}

@media (min-width: 900px) {
    /* Wider, breathier container */
    .dash {
        max-width: 1120px;
        padding: 1.5rem 1.75rem 5rem;
    }

    /* Larger greeting */
    .dash-greet     { margin: 0.75rem 0 1.75rem; }
    .dash-title     { font-size: 2rem; }
    .dash-quote     { font-size: 1.05rem; }

    /* Side-by-side: Today snapshot + Weight trend */
    .dash-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        gap: 1.25rem;
        margin-bottom: 1.25rem;
    }
    .dash-grid > .dash-card {
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
    }
    .dash-grid > .weight-card .sparkline-wrap {
        margin-top: auto;   /* push the chart toward the bottom of the card */
    }

    /* Bigger, more confident Today card */
    .dash-card.snapshot { padding: 1.5rem 1.5rem; }
    .snapshot-row {
        grid-template-columns: auto 1fr 1fr;
        gap: 1.5rem;
        padding: 0.5rem 0 0.25rem;
    }
    .snapshot .points-ring,
    .snapshot .points-ring svg { width: 110px; height: 110px; }
    .snapshot .points-ring svg circle { stroke-width: 7; }
    .snapshot .ring-num    { font-size: 1.8rem; }
    .snapshot .ring-target { font-size: 0.8rem; }
    .snapshot .ring-label  { bottom: -1.25rem; font-size: 0.72rem; }
    .snapshot .tick        { width: 32px; height: 32px; font-size: 0.78rem; }
    .snapshot .workout-line{ font-size: 1rem; }

    /* Weight card matches snapshot rhythm */
    .weight-card { padding: 1.5rem 1.5rem; }
    .weight-card .sparkline { height: 150px; }

    /* Quick actions: roomier, more tactile */
    .qa-grid { gap: 0.75rem; margin: 1.25rem 0; }
    .qa {
        padding: 1.15rem 0.75rem;
        font-size: 0.9rem;
        gap: 0.5rem;
        border-radius: 16px;
    }
    .qa-icon { font-size: 1.9rem; }
    .qa:hover {
        background: var(--nr-bg);
        border-color: var(--nr-yellow);
        transform: translateY(-2px);
    }

    /* Weekly summary: bigger numbers, more presence */
    .summary-grid { gap: 0.75rem; margin-top: 1.25rem; }
    .summary-card { padding: 1.35rem 1rem; border-radius: 16px; }
    .sc-num       { font-size: 2.3rem; }
    .sc-lbl       { font-size: 0.78rem; margin-top: 0.55rem; }
}

@media (min-width: 1200px) {
    .dash { max-width: 1200px; }
    .qa-icon { font-size: 2rem; }
    .sc-num  { font-size: 2.5rem; }
}

/* =============================================================================
   Add-meal picker — 2x2 grid of meal-type cards (replaces a <select>)
   ========================================================================== */