* {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box;
}

/* Reset html + body so the calc page sits edge-to-edge on every
 * device. The browser default body margin (8px) was creating a
 * visible left/right gutter that made the form look inset on
 * mobile when the spec asked for full-width. */
html, body {
    margin: 0;
    padding: 0;
}

body {
    background-color: #1A1B1E;
}

/* Layout used to be `display: flex` because the legacy WP plugin
 * pattern put a persistent 300px .nav sidebar next to the calc.
 * After the nav was rewritten as a fixed-position era-crm-style
 * slide-in panel, .nav-hamburger was left as a flex sibling of
 * .tdee-calculator and ate horizontal space — so the calc form
 * got squeezed and pushed to the right side of the viewport.
 * Block layout stacks .nav-hamburger above .tdee-calculator and
 * lets the form fill the full width like the spec asks for. */
.cal-container {
    display: block;
    width: 100%;
}

.heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.heading>h2 {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #C1C2C5;
    font-weight: 700;
}

.tdee-calculator {
    background-color: #141517;
    color: #C1C2C5;
    line-height: 1.55;
    font-size: 16px;
    padding: 24px 20px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .tdee-calculator {
        padding: 32px 40px;
    }
}

@media (min-width: 1100px) {
    .tdee-calculator {
        padding: 40px 56px;
    }
}

hr {
    background-color: #373A40 !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

.search-container select,
.number-input input {
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
    height: 36px;
    -webkit-tap-highlight-color: transparent;
    line-height: 34px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    resize: none;
    box-sizing: border-box;
    font-size: 14px;
    width: 100%;
    color: #C1C2C5;
    display: block;
    text-align: left;
    min-height: 36px;
    padding-left: 12px;
    padding-right: 30px;
    border-radius: 4px;
    border: 1px solid #373A40;
    background-color: #25262b;
    -webkit-transition: border-color 100ms ease;
    transition: border-color 100ms ease;
}

.search-container select,
.number-input input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-size: 16px;
}

.search-container select:focus {
    outline: none;
    border-color: #1971c2;
}

.label-div {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #C1C2C5;
    word-break: break-word;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
}

.number-input input:focus {
    outline: none;
    border-color: #1971c2;
}

.form-row-1 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}

.form-row-2 {
    display: grid;
    grid-template-columns: 2fr 2fr;
    gap: 15px;
}

.padding {
    padding: 5px;
}

.para {
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    word-break: break-word;
    color: #909296;
    font-size: 12px;
    line-height: 1.55;
}

table {
    width: 100%;
    border-collapse: collapse;
    caption-side: top;
    color: #C1C2C5;
    line-height: 1.55;
    margin-top: 16px;

}

table td {
    text-align: left;
}

thead,
th {
    font-size: 14px;
    font-weight: bold;
    text-align: left;
    padding: 7px 10px;
    border: none !important;
    border-bottom: 1px solid #373A40 !important;
}

tr,
td {
    padding: 7px 10px !important;
    border: none !important;
    border-bottom: 1px solid #373A40 !important;
    font-size: 14px;
    cursor: pointer;
}

tbody tr:last-of-type td {
    border-bottom: none;
}

.activity-row:hover {
    background-color: #2C2E33
}

thead tr {
    cursor: default;
}

thead tr:hover {
    background-color: unset;
}

thead tr:focus-within {
    color: unset;
}

#activity-table thead,
#activity-table thead tr,
#activity-table thead th {
    text-align: left;
    line-height: 1.55;
}

#activity-table td {
    width: 50%;
}

.activity-inp input[type="radio"] {
    opacity: 0;
    position: absolute;
    cursor: pointer;
}

.desc-TDEE {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 16px;
}

.para-TDEE {
    line-height: 1.2;
}

.inp-TDEE {
    width: 200px;
    line-height: 34px;
    padding-left: 36px;
    padding-right: 12px;
    line-height: 34px;
    border: 1px solid #373A40;
    background-color: #25262b;
    color: #C1C2C5;
}

.inp-TDEE:focus {
    outline: none;
    border-color: #1971c2;
}

.calculate-TDEE {
    display: flex;
    position: relative;
    margin-top: calc(10px / 2);
}

.danger {
    pointer-events: none;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 8px;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    color: #909296;
}

.daily-goals {
    -webkit-tap-highlight-color: transparent;
    color: inherit;
    font-size: inherit;
    line-height: 1.55;
    -webkit-text-decoration: none;
    text-decoration: none;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.35;
    margin: 0;
    text-align: center;
}

.daily-goals h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 700;
    color: #C1C2C5;
}

.daily-goals-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.daily-goals-inp {
    display: flex;
    width: 150px;
}

.daily-goals-form input {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    /*accent-color: #fff;*/
    /*background: #1971c2;*/
    /*border-color: #1971c2;*/
    margin-right: 20px;
}

.daily-goals-inp label {
    align-self: center;
}

#daily-goals-table {
    cursor: none;
}

#daily-goals-table thead,
#daily-goals-table thead tr,
#daily-goals-table thead th {
    border: none !important;
    border-bottom: 1px solid #373A40 !important;
    text-align: left;
}

#daily-goals-table>tbody tr:hover {
    background-color: unset;
    cursor: unset;
}

#daily-goals-table>tbody tr:focus-within {
    outline: none;
    color: unset;
    font-weight: normal;
}

.weight {
    position: relative;
}

/* Required-field asterisk used to render here in #e03131 — looked like
 * a stray red dot next to "WEIGHT (LB)". Form already conveys
 * required-ness via the input being non-empty by default, so the
 * marker isn't pulling its weight. */
.weight::after {
    content: none;
}

.clicked {
    outline: none;
    color: #1971c2;
    font-weight: 700;
    font-size: 14px;
}


@media (max-width: 768px) {

    .heading>h2 {
        font-size: 35px;
        margin: 0;
    }
    
    .tdee-calculator {
        padding: 24px 20px;
    }
    
    hr:first-child {
       margin-top: 10px !important;
       margin-bottom: 10px !important;
    }
    
    .form-row-1, .form-row-2 {
        gap: 1px;
    }

}
/* ──────────────────────────────────────────────────────────────────
 * Era-crm-aligned UI cleanup. Adds three new blocks on top of the
 * legacy WP plugin styles:
 *   1. Hero — eyebrow + Anton headline + Poppins sub at the top of
 *              every calc page. Sets context: who this is for, why
 *              use it.
 *   2. Goal cards — replaces the stacked radio list with a 2x2 (or
 *              1x4 desktop / 1x3 carb) grid of clickable cards.
 *              Each card carries an icon + label + sub-description.
 *              Selected state lifts the brand orange.
 *   3. CTA — closing card that bridges to /elite-rugby/nutrition so
 *              the calculator becomes a funnel into the wider app
 *              instead of a dead-end utility.
 * Existing form CSS (form-row, table, etc.) untouched.
 * ────────────────────────────────────────────────────────────────── */

/* ── Hero ───────────────────────────────────────────────────────── */
.calc-hero {
    padding: 40px 16px 24px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    .calc-hero {
        padding: 56px 32px 32px;
    }
}

.calc-hero-eyebrow {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #FF5722;
    font-size: 12px;
    font-weight: 700;
    margin: 0 0 12px;
}

.calc-hero-h1 {
    font-family: 'Anton', Impact, sans-serif;
    text-transform: uppercase;
    font-size: 38px;
    line-height: 1em;
    letter-spacing: 0.4px;
    color: #fff;
    font-weight: 400;
    margin: 0 0 16px;
}

@media (min-width: 768px) {
    .calc-hero-h1 {
        font-size: 56px;
        letter-spacing: 0.6px;
    }
}

.calc-hero-sub {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.55em;
    color: rgba(255, 255, 255, 0.7);
    max-width: 640px;
    margin: 0;
}

@media (min-width: 768px) {
    .calc-hero-sub {
        font-size: 17px;
    }
}

/* ── Goal cards ─────────────────────────────────────────────────── */
.goals-block {
    padding: 24px 16px;
}

@media (min-width: 768px) {
    .goals-block {
        padding: 32px;
    }
}

.goals-block-h2 {
    font-family: 'Anton', Impact, sans-serif;
    text-transform: uppercase;
    font-size: 28px;
    line-height: 1em;
    letter-spacing: 0.4px;
    color: #fff;
    font-weight: 400;
    margin: 0 0 8px;
}

@media (min-width: 768px) {
    .goals-block-h2 {
        font-size: 36px;
    }
}

.goals-block-sub {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.5em;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 20px;
}

.goals-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (min-width: 768px) {
    .goals-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
    }
    /* Carb-cycling has only 3 goals */
    .goals-grid--three {
        grid-template-columns: repeat(3, 1fr);
    }
    /* Carb-cycling stripped Cut, so it's now Maintain + Bulk only.
     * Keep the cards centred at a comfortable width instead of
     * stretching them edge-to-edge. */
    .goals-grid--two {
        grid-template-columns: repeat(2, minmax(180px, 280px));
        justify-content: center;
    }
}

/* On phones, two-card carb-cycle grid stacks side-by-side at full width */
.goals-grid--two {
    grid-template-columns: 1fr 1fr;
}

.goal-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
}

.goal-card:hover {
    border-color: rgba(255, 87, 34, 0.4);
    background: rgba(255, 87, 34, 0.05);
}

/* Hide native radio — the whole card is the click target */
.goal-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Selected state: orange border + tint, brighter icon */
.goal-card:has(input[type="radio"]:checked) {
    border-color: #FF5722;
    background: rgba(255, 87, 34, 0.08);
}

.goal-card:has(input[type="radio"]:checked) .goal-card-icon {
    color: #FF5722;
    border-color: rgba(255, 87, 34, 0.55);
    background: rgba(255, 87, 34, 0.12);
}

.goal-card-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.012);
    color: rgba(255, 255, 255, 0.28);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.goal-card-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.goal-card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.goal-card-text strong {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.goal-card-text span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    line-height: 1.4;
}

/* ── CTA card (bottom) ──────────────────────────────────────────── */
.calc-cta {
    margin: 40px 16px 24px;
    padding: 32px 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background:
        radial-gradient(ellipse at top right, rgba(255, 87, 34, 0.08) 0%, transparent 60%),
        #0d0d0d;
    text-align: center;
}

@media (min-width: 768px) {
    .calc-cta {
        margin: 60px 32px 40px;
        padding: 56px 40px;
    }
}

.calc-cta-eyebrow {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #FF5722;
    font-size: 12px;
    font-weight: 700;
    margin: 0 0 14px;
}

.calc-cta-h2 {
    font-family: 'Anton', Impact, sans-serif;
    text-transform: uppercase;
    font-size: 30px;
    line-height: 1em;
    letter-spacing: 0.4px;
    color: #fff;
    font-weight: 400;
    margin: 0 0 14px;
}

@media (min-width: 768px) {
    .calc-cta-h2 {
        font-size: 44px;
        letter-spacing: 0.6px;
    }
}

.calc-cta-sub {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.6em;
    color: rgba(255, 255, 255, 0.7);
    max-width: 560px;
    margin: 0 auto 24px;
}

@media (min-width: 768px) {
    .calc-cta-sub {
        font-size: 16px;
    }
}

.calc-cta-btn {
    display: inline-block;
    padding: 14px 36px;
    border-radius: 10px;
    background: #FF5722;
    color: #fff;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background 0.15s, transform 0.15s;
}

.calc-cta-btn:hover {
    background: #F34E3A;
    transform: translateY(-1px);
}

.calc-cta-btn:active {
    transform: translateY(0);
}

/* ──────────────────────────────────────────────────────────────────
 * Era-crm dark theme upgrade. Sits at the END of style.css so it
 * overrides the legacy WP plugin defaults higher up in the file.
 *
 * Goal: match the era-crm marketing site's dark register —
 *   - Background: #0a0a0a (was #1A1B1E)
 *   - Form panels / inputs: rgba(255,255,255,0.03) tints with
 *     softer borders + bigger padding + brand-orange focus ring
 *   - Activity table: orange accent on the selected row instead
 *     of WP-blue, hairline white-rgba borders, more breathing
 *     room per row, hover lifts a subtle white tint
 *   - Manual TDEE input: same premium look as the form inputs
 *
 * Form / table JS untouched — selectors, IDs and class names all
 * stay the same; this is a pure visual pass.
 * ────────────────────────────────────────────────────────────── */

body {
    background-color: #000;
}

.tdee-calculator {
    background-color: #000;
    color: rgba(255, 255, 255, 0.85);
}

/* ── Form labels: Poppins for consistency with the hero ───── */
.label-div {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    margin-bottom: 6px;
}

/* ── Inputs (selects + number inputs) — premium dark look ── */
.search-container select,
.number-input input {
    height: 48px;
    min-height: 48px;
    line-height: 48px;
    padding: 0 14px;
    padding-right: 36px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.03);
    color: #fff;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 500;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.search-container select:hover,
.number-input input:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.05);
}

.search-container select:focus,
.number-input input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.32);
    background-color: rgba(255, 255, 255, 0.06);
}

/* Custom dropdown chevron (since native arrow was hidden by appearance: none) */
.search-container {
    position: relative;
}

.search-container::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 1.5px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.5);
    transform: translateY(-75%) rotate(45deg);
    pointer-events: none;
}

/* ── HR dividers fade in line with era-crm hairlines ─────── */
hr {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: none !important;
    height: 1px !important;
}

/* ── Activity table: card-like hover, orange selected row ─ */
table {
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 24px;
}

thead, th {
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

tr, td {
    padding: 16px !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    font-size: 15px;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    color: rgba(255, 255, 255, 0.78);
    transition: background 0.15s ease, color 0.15s ease;
}

.activity-row {
    cursor: pointer;
}

.activity-row:hover {
    background-color: rgba(255, 255, 255, 0.04);
    color: #fff;
}

/* Selected activity row — was WP-blue, now brand orange.
 * .clicked is applied to the <td> children, so we drive the
 * row look from there + cascade. */
.clicked {
    color: #FF5722 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

.activity-row:has(.clicked) {
    background-color: rgba(255, 87, 34, 0.06);
}

.activity-row:has(.clicked) td {
    color: #FF5722;
}

/* ── Manual TDEE input: match the premium look ──────────── */
.inp-TDEE {
    height: 48px;
    width: 240px;
    padding: 0 14px 0 40px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.03);
    color: #fff;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 15px;
}

.inp-TDEE:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.32);
    background-color: rgba(255, 255, 255, 0.06);
}

.inp-TDEE::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* The little skull icon next to the manual TDEE input was a
 * 'danger' indicator. Re-color it to neutral white so it reads
 * as informational rather than warning. */
.danger {
    color: rgba(255, 255, 255, 0.5);
    width: 40px;
}

/* ── Body copy / paragraph styles ─────────────────────────── */
.para,
.para-TDEE {
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    line-height: 1.6;
}

/* ── Daily-goals macro table at the bottom ──────────────── */
#daily-goals-table {
    margin-top: 28px;
}

#daily-goals-table tbody td {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

#daily-goals-table tbody tr:nth-child(1) td {
    font-weight: 700;
    color: #fff;
    font-size: 18px;
}

/* The macro values (carbDay class on the right column) take the
 * brand orange so the totals pop. */
.carbDay {
    color: #FF5722 !important;
    font-weight: 700 !important;
}

/* ── 'Sedentary translates to no physical activity' caption ─ */
.activity-msg,
[id*="msg"] {
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    margin-top: 16px;
}

/* ───────── Variant toggle (3-pill segmented control) ─────────────
 * Mirrors the affiliate-portal Teams/Subscriptions toggle pattern,
 * but with the era-crm brand orange (#FF5722) on the active pill
 * instead of the portal's mint green. Sits above the shared form
 * so visitors immediately see they can flip between Standard,
 * Carb Cycling and Keto Cycling without leaving the page.
 * Sessions persist via variant-toggle.js → sessionStorage.
 */

.variant-toggle {
    display: inline-flex;
    gap: 0;
    padding: 4px;
    margin: 8px auto 24px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    width: fit-content;
}

@media (max-width: 600px) {
    .variant-toggle {
        margin: 8px 16px 24px;
        width: calc(100% - 32px);
        max-width: 100%;
    }
}

.variant-pill {
    flex: 1;
    padding: 10px 22px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.65);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 999px;
    white-space: nowrap;
    transition: color 0.15s ease, background 0.15s ease;
}

@media (max-width: 600px) {
    .variant-pill {
        padding: 10px 8px;
        font-size: 12px;
    }
}

.variant-pill:hover {
    color: rgba(255, 255, 255, 0.95);
}

.variant-pill.active {
    background: #FF5722;
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.variant-pill.active:hover {
    background: #F34E3A;
}

.variant-pill:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.45);
    outline-offset: 2px;
}

/* Center the toggle horizontally on the page */
.tdee-calculator > .variant-toggle {
    display: flex;
    margin-left: auto;
    margin-right: auto;
}

/* ───────── Inline icons inside pills + table cells ───────────────
 * Lucide-style stroke SVGs added to the variant toggle pills, every
 * activity-level row, and every macro row. Tiny CSS to align them
 * neatly with their adjacent text.
 */

/* Toggle pill icons — sit inline with the label, slight right gap */
.variant-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.variant-pill .pill-icon {
    flex-shrink: 0;
}

/* Activity-row labels — icon + text inline */
.activity-row label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.85);
}
.activity-row label .row-icon {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.55);
    transition: color 0.15s ease;
}
.activity-row:hover label .row-icon {
    color: #FF5722;
}
/* Highlight icon when the row's radio is checked */
.activity-row:has(input[type="radio"]:checked) label .row-icon {
    color: #FF5722;
}

/* Macro-row icons (Total / Protein / Carbs / Fat) */
.cell-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.cell-with-icon .row-icon {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.55);
}

/* ───────── kcal progress rings (Standard variant) ───────────────
 * Three concentric SVG rings — protein (outer, brand orange), carbs
 * (middle, amber) and fat (inner, emerald). Each ring's visible arc
 * length is the macro's share of total kcal, set live from the carbs
 * and keto scripts. Centre carries the big total-kcal number;
 * legend below names each macro + grams.
 */

.kcal-rings {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 24px 16px 8px;
}

@media (min-width: 768px) {
    .kcal-rings {
        padding: 32px 32px 12px;
    }
}

.kcal-rings-svg-wrap {
    position: relative;
    width: 220px;
    height: 220px;
}

.kcal-rings-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 12;
}

.ring-arc {
    fill: none;
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke-dasharray 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ring-arc-protein { stroke: #FF5722; }
.ring-arc-carbs   { stroke: #F59E0B; }
.ring-arc-fat     { stroke: #10B981; }

.kcal-rings-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.kcal-rings-eyebrow {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: 9px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 2px;
}

/* Value sized so 4-digit kcal numbers (1500–9000) fit comfortably
 * inside the inner ring's clear zone (~100px between strokes).
 * Anton is condensed (~0.5em per digit), so 38px keeps "9999" under
 * ~80px and well clear of the inner ring stroke. */
.kcal-rings-value {
    font-family: 'Anton', Impact, sans-serif;
    font-size: 38px;
    line-height: 1;
    color: #fff;
    margin: 0;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
}

.kcal-rings-unit {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    margin: 2px 0 0;
}

.kcal-rings-legend {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
}

.kcal-rings-legend li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.ring-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ring-dot-protein { background: #FF5722; }
.ring-dot-carbs   { background: #F59E0B; }
.ring-dot-fat     { background: #10B981; }

.ring-legend-label {
    color: rgba(255, 255, 255, 0.65);
}

.ring-legend-value {
    color: #fff;
    font-weight: 600;
}

/* ───────── Goal-card active state — toned down ──────────────────
 * Earlier active state painted the entire card orange (border +
 * tinted background + ring shadow). Pulled back to: white border
 * lift + soft shadow on the card, brand orange kept ONLY on the
 * icon chip so the selection cue lives on the icon (where eye
 * lands first) instead of dominating the whole card. */

.goal-card {
    transition: border-color 0.18s ease, background 0.18s ease,
                transform 0.18s ease, box-shadow 0.18s ease;
}

.goal-card:has(input[type="radio"]:checked) {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.045);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
    /* No more orange tint or orange box-shadow ring */
}

.goal-card:has(input[type="radio"]:checked) .goal-card-icon {
    color: #FF5722;
    border-color: rgba(255, 87, 34, 0.4);
    background: rgba(255, 87, 34, 0.08);
}

/* ───────── Goal-card text — unified typography ──────────────────
 * Title was 16px / 700, description was 12px / inherited weight —
 * felt like two different fonts. Both now Poppins, narrower size
 * gap (15px / 12px) and weights (600 / 500) so the description
 * reads as a sub-line of the title rather than a footnote. */

.goal-card-text strong {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.38);
    transition: color 0.18s ease;
}

.goal-card-text span {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.2);
    transition: color 0.18s ease;
}

.goal-card:hover .goal-card-text strong {
    color: rgba(255, 255, 255, 0.95);
}

.goal-card:hover .goal-card-text span {
    color: rgba(255, 255, 255, 0.6);
}

.goal-card:has(input[type="radio"]:checked) .goal-card-text strong {
    color: #fff;
}

.goal-card:has(input[type="radio"]:checked) .goal-card-text span {
    color: rgba(255, 255, 255, 0.65);
}

/* ───────── Activity grid — replaces the 5-row table ─────────────
 * Five clickable cards in a row (responsive grid). Each card is a
 * <label> wrapping a hidden radio input + icon + activity name +
 * computed kcal value. Selected card gets the same lift as the
 * goal-cards: white-tinted border + soft shadow, orange icon chip.
 * Stays compatible with standard.js — every card carries the legacy
 * .activity-row class so addActivityRowListener() still wires it up.
 */

.activity-block {
    margin-top: 8px;
}

.activity-block-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

.activity-block-eyebrow {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

.activity-block-caption {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

.activity-block-caption .activity-name {
    color: #FF5722;
    font-weight: 600;
}

.activity-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

@media (min-width: 560px) {
    .activity-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 880px) {
    .activity-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
    }
}

.activity-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "icon label kcal"
        "icon label unit";
    align-items: center;
    column-gap: 12px;
    row-gap: 0;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.025);
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease,
                transform 0.18s ease, box-shadow 0.18s ease;
}

.activity-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.04);
}

.activity-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.activity-card-icon {
    grid-area: icon;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.012);
    color: rgba(255, 255, 255, 0.28);
    flex-shrink: 0;
    transition: color 0.18s ease, border-color 0.18s ease,
                background 0.18s ease;
}

.activity-card-label {
    grid-area: label;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.32);
    transition: color 0.18s ease;
}

.activity-card-kcal {
    grid-area: kcal;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.2px;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.22);
    text-align: right;
    transition: color 0.18s ease;
}

.activity-card-unit {
    grid-area: unit;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.2);
    text-align: right;
    margin-top: 3px;
    text-transform: lowercase;
    transition: color 0.18s ease;
}

.activity-card:hover .activity-card-label {
    color: rgba(255, 255, 255, 0.92);
}

.activity-card:hover .activity-card-kcal {
    color: rgba(255, 255, 255, 0.78);
}

.activity-card:has(input[type="radio"]:checked) {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
}

.activity-card:has(input[type="radio"]:checked) .activity-card-icon,
.activity-card.activity-row.clicked .activity-card-icon {
    color: #FF5722;
    border-color: rgba(255, 87, 34, 0.4);
    background: rgba(255, 87, 34, 0.08);
}

.activity-card:has(input[type="radio"]:checked) .activity-card-label,
.activity-card.activity-row.clicked .activity-card-label {
    color: #fff;
}

.activity-card:has(input[type="radio"]:checked) .activity-card-kcal,
.activity-card.activity-row.clicked .activity-card-kcal {
    color: #FF5722;
}

.activity-card:has(input[type="radio"]:checked) .activity-card-unit,
.activity-card.activity-row.clicked .activity-card-unit {
    color: rgba(255, 87, 34, 0.7);
}

/* ───────── Manual-TDEE collapsible — replaces the long block ────
 * Was a verbose label + 5-line paragraph + input always on screen.
 * Now a compact <details> that reveals the explainer + input only
 * when the user wants to override the estimate. Saves ~150px of
 * vertical space on first paint.
 */

.manual-tdee {
    margin-top: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

.manual-tdee-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.manual-tdee-summary::-webkit-details-marker {
    display: none;
}

.manual-tdee-label {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.manual-tdee-chev {
    color: rgba(255, 255, 255, 0.5);
    transition: transform 0.18s ease;
    line-height: 0;
}

.manual-tdee[open] .manual-tdee-chev {
    transform: rotate(180deg);
}

.manual-tdee-body {
    padding: 4px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.manual-tdee-help {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

.manual-tdee-body .inp-TDEE {
    width: 100%;
    max-width: 280px;
    padding-left: 14px;
}

/* ───────── Form-card surface + lifted inputs ─────────────────────
 * Wraps the units / sex / weight / height / age fields in a darker
 * inset card so the form reads as a discrete "data input" surface
 * separate from the activity grid below. Each input gets a soft
 * black drop shadow so it visually floats above the card surface.
 */

.form-card {
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 20px;
    margin-top: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

@media (min-width: 768px) {
    .form-card {
        padding: 28px;
    }
}

.form-card .form-row-1,
.form-card .form-row-2 {
    gap: 14px;
}

.form-card .form-row-1 {
    grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 600px) {
    .form-card .form-row-1 {
        grid-template-columns: 1fr 1fr;
    }
    /* On phone, units + sex sit in a row, weight gets its own row */
    .form-card .form-row-1 > .padding:nth-child(3) {
        grid-column: 1 / -1;
    }
    .form-card .form-row-2 {
        grid-template-columns: 1fr 1fr;
    }
}

.form-card .form-row-2 {
    margin-top: 14px;
}

.form-card .padding {
    padding: 0;
}

/* Label rows: icon + uppercase label text in a flex row */
.label-div {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.55);
}

.label-icon {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.45);
}

/* Black lifted glow on inputs — stacks INSIDE the form card, so a
 * shadow that drops below sits on the dark surface and reads as a
 * subtle 3D lift rather than a hard border. */
.form-card .search-container select,
.form-card .number-input input {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45),
                0 1px 0 rgba(255, 255, 255, 0.04) inset;
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.form-card .search-container select:hover,
.form-card .number-input input:hover {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.55),
                0 1px 0 rgba(255, 255, 255, 0.05) inset;
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
}

.form-card .search-container select:focus,
.form-card .number-input input:focus {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6),
                0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    border-color: rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.08);
}

/* Tighten the activity-block spacing so the eye doesn't get a big
 * empty gutter between the card and the activity grid. */
.activity-block {
    margin-top: 24px;
}

/* HR between form-card and activity becomes redundant once we have
 * a card surface — visually merges into the card edge. Hide it. */
.form-card + hr,
form#tdee-form > hr {
    display: none;
}

/* ───────── Why-this-variant panel (carbs / keto) ─────────────────
 * Sits above the dual rings on each cycling variant and explains
 * who the variant is for + warns 95% of users to stick with Standard.
 */

.why-panel {
    margin: 0 0 20px;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    text-align: center;
}

@media (min-width: 768px) {
    .why-panel {
        padding: 20px 24px;
    }
}

.why-panel-eyebrow {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: 10px;
    font-weight: 700;
    color: #FF5722;
    margin: 0 0 8px;
}

.why-panel-body {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 auto;
    max-width: 50ch;
}

.why-panel-tip {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 12.5px;
    line-height: 1.55;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    margin: 12px auto 0;
    padding: 12px 14px 0;
    border-top: 1px dashed rgba(255, 87, 34, 0.25);
    max-width: 52ch;
    text-align: left;
}

.why-panel-tip strong {
    color: #FF5722;
    font-weight: 700;
}

.why-panel-warn {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 12px;
    line-height: 1.55;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    margin: 12px auto 0;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    max-width: 50ch;
}

.why-panel-warn strong {
    color: #fff;
    font-weight: 600;
}

/* Keto-specific disclaimer block — heavier than the generic warn line
 * because keto is a metabolic intervention and we want any athlete
 * picking it to see "talk to a dietitian" before they read the rings. */

.why-panel--keto {
    border-color: rgba(255, 87, 34, 0.18);
    background: rgba(255, 87, 34, 0.04);
}

.why-panel-disclaimer {
    margin: 14px auto 0;
    padding: 14px 16px;
    background: rgba(255, 87, 34, 0.07);
    border: 1px solid rgba(255, 87, 34, 0.28);
    border-radius: 10px;
    text-align: left;
    max-width: 56ch;
}

.why-panel-disclaimer-title {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11px;
    font-weight: 700;
    color: #FF5722;
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.why-panel-disclaimer-title::before {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #FF5722;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.why-panel-disclaimer-body {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 12px;
    line-height: 1.55;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 8px;
}

.why-panel-disclaimer-body:last-child {
    margin-bottom: 0;
}

.why-panel-disclaimer-body strong {
    color: #fff;
    font-weight: 700;
}

.why-panel-disclaimer-body em {
    color: #FF5722;
    font-style: italic;
    font-weight: 600;
}

/* ───────── Dual ring layout (carbs / keto Low Day | High Day) ──── */

.kcal-rings-pair {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 24px;
}

@media (min-width: 720px) {
    .kcal-rings-pair {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }
}

/* Smaller scale for the per-day rings — same SVG dimensions for the
 * stroke math, just constrained via max-width on the wrap. */
.kcal-rings--day {
    padding: 20px 12px 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    gap: 16px;
}

.kcal-rings--day .kcal-rings-svg-wrap {
    width: 180px;
    height: 180px;
}

/* Re-tune the centre stack for the smaller wrap so the kcal value
 * stays inside the inner ring's clear zone (~80px at this scale). */
.kcal-rings--day .kcal-rings-eyebrow {
    font-size: 8px;
    letter-spacing: 1px;
    margin: 0 0 1px;
}

.kcal-rings--day .kcal-rings-value {
    font-size: 32px;
    letter-spacing: -0.5px;
}

.kcal-rings--day .kcal-rings-unit {
    font-size: 9px;
    letter-spacing: 1px;
    margin: 1px 0 0;
}

.kcal-rings-day-label {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

/* Sub-line under each day label — names the actual rugby-week days
 * the macro split is for, so users don't have to guess what "Low" /
 * "High" means in practice. */
.kcal-rings-day-sub {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.45);
    margin: -10px 0 0;
    text-align: center;
}

/* The "Low Carb Day" row reads as the slimmer one — tint its label
 * orange to mirror the carbs ring colour, gives a quick visual link
 * between the ring legend and the day header. */
.kcal-rings--day .kcal-rings-legend {
    gap: 14px;
}

/* ───────── Unified hover/lift system + black shadow ──────────────
 * Every interactive surface gets the same micro-interaction: 2px
 * upward translate on hover + a deeper black drop shadow. Active /
 * selected states keep a persistent shadow at lower elevation so the
 * card reads as "engaged" without floating. Transitions are tuned
 * for snappiness (180ms cubic-bezier curve) — slow enough to feel
 * intentional, fast enough that flipping cards never feels laggy.
 */

.activity-card,
.goal-card,
.kcal-rings--day,
.manual-tdee,
.variant-pill,
.form-card .search-container select,
.form-card .number-input input {
    transition:
        transform 0.18s cubic-bezier(0.32, 0.72, 0.4, 1),
        box-shadow 0.18s cubic-bezier(0.32, 0.72, 0.4, 1),
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease;
}

/* Activity & goal cards — hover lift */
.activity-card:hover,
.goal-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.22);
}

/* Active state keeps a persistent shadow at lower elevation */
.activity-card:has(input[type="radio"]:checked),
.goal-card:has(input[type="radio"]:checked) {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
}

/* Active-card hover. The "you've already picked this" cue needs a
 * visible interaction signal that ISN'T orange (orange already lives
 * on the selected icon chip + kcal number). So we layer:
 *   - a brighter white inner ring (0 0 0 1px white-tint inset)
 *   - a deeper black drop shadow under the card
 *   - a slightly brighter border on the outer edge
 * Adds up to a clear glow that reads as white/black instead of
 * compounding the brand orange. */
.activity-card:has(input[type="radio"]:checked):hover,
.goal-card:has(input[type="radio"]:checked):hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.45);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.65),
                inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.07);
}

/* Day-ring cards (carbs / keto) — same hover treatment */
.kcal-rings--day:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.16);
}

/* Variant pills — only the inactive ones lift on hover. The active
 * pill keeps its orange surface and grows a stronger shadow. */
.variant-pill:not(.active):hover {
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-1px);
}

.variant-pill.active {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5),
                0 1px 2px rgba(0, 0, 0, 0.4);
}

.variant-pill.active:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55),
                0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Manual-TDEE collapsible — hover lift on the summary header */
.manual-tdee:hover {
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
    transform: translateY(-1px);
}

.manual-tdee[open] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Form-card inputs already get a base shadow — deepen on hover/focus */
.form-card .search-container select:hover,
.form-card .number-input input:hover {
    transform: translateY(-1px);
}