/* ==========================================================
   My Workout AI  -  CSS FOR THE CALCULATOR PAGES
   Loaded only on the /tools pages.

   The rest of the site CSS is in public/css/style.css, and the
   colours (--brand and friends) come from :root there.
   ========================================================== */

/* ==========================================================
   19c. CALCULATOR PAGE  (for example /tools/bmi)

   Two halves: the form on the left, the result on the right
   ========================================================== */
.calc-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: start;
}

.calc-box {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 26px;
}

.calc-box h3 {
    font-size: 22px;
    margin-bottom: 20px;
}

/* ---- form fields ---- */
.field {
    margin-bottom: 18px;
}

.field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 8px;
}

.field input {
    width: 100%;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 13px 15px;
    color: var(--text);
    font-family: 'Inter', Arial, sans-serif;
    font-size: 15px;
    transition: border-color 0.2s;
}

.field input:focus {
    outline: none;
    border-color: var(--brand);
}

/* strip the up and down arrows from number inputs */
.field input::-webkit-outer-spin-button,
.field input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.field input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* dropdown, e.g. "how active are you" */
.field select {
    width: 100%;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 13px 15px;
    color: var(--text);
    font-family: 'Inter', Arial, sans-serif;
    font-size: 15px;
    cursor: pointer;
    /* replace the browser arrow with our own */
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9'><path d='M1 1l6 6 6-6' stroke='%239391ab' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 40px;
}

.field select:focus {
    outline: none;
    border-color: var(--brand);
}

/* keep the option list dark - some browsers default to white */
.field select option {
    background: var(--card);
    color: var(--text);
}

/* two inputs on one row, e.g. feet and inches */
.field-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ---- choice buttons (Male/Female, cm/ft) ---- */
.pick {
    display: flex;
    gap: 8px;
}

.pick button {
    flex: 1;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    color: var(--muted);
    padding: 12px 10px;
    border-radius: 11px;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.pick button:hover {
    color: var(--text);
    border-color: #3d3d52;
}

.pick button.on {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
}

/* the small red warning shown for bad input */
.calc-error {
    display: none;
    background: rgba(255, 92, 92, 0.12);
    border: 1px solid rgba(255, 92, 92, 0.35);
    color: #ff8f8f;
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 13.5px;
    margin-bottom: 16px;
}

.calc-box .btn {
    width: 100%;
    text-align: center;
    margin-top: 4px;
}

/* ---- the result side ---- */
.result-empty {
    text-align: center;
    color: var(--muted);
    padding: 40px 20px;
    font-size: 14px;
}

.result-empty .big {
    font-size: 42px;
    margin-bottom: 10px;
}

/* the result starts hidden; jQuery reveals it */
.result-show {
    display: none;
    text-align: center;
}

.result-num {
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-size: 76px;
    font-weight: 700;
    line-height: 1;
    color: var(--rc, var(--brand));
}

.result-label {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
}

/* the Normal / Overweight chip */
/* --rc is the result colour. jQuery sets it from the answer
   (blue = under, green = healthy, amber = over, red = obese) */
.result-tag {
    display: inline-block;
    padding: 7px 18px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    background: transparent;
    color: var(--rc, var(--brand));
    border: 1px solid var(--rc, var(--brand));
}

/* ---- the coloured bar the marker moves along ---- */
.scale {
    position: relative;
    height: 12px;
    border-radius: 999px;
    margin: 34px 0 10px;
    background: linear-gradient(90deg,
        #38bdf8 0%, #38bdf8 18%,
        #4ade80 18%, #4ade80 46%,
        #fbbf24 46%, #fbbf24 62%,
        #ff5c5c 62%, #ff5c5c 100%);
}

/* the white marker that slides along the bar */
.scale-pin {
    position: absolute;
    top: -9px;
    left: 0;
    width: 4px;
    height: 30px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 0 3px rgba(10, 10, 18, 0.85);
    transition: left 0.6s ease;
}

.scale-legend {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--muted);
}

/* all three goals together - lose / maintain / gain */
.goal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 26px;
}

.goal-grid div {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 8px;
}

.goal-grid b {
    display: block;
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-size: 27px;
    line-height: 1;
    margin-bottom: 4px;
}

.goal-grid small {
    font-size: 10.5px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--muted);
}

/* one colour each - blue to lose, green to maintain, orange to gain */
.goal-grid .g-lose b { color: #38bdf8; }
.goal-grid .g-keep b { color: #4ade80; }
.goal-grid .g-gain b { color: var(--brand); }

/* ---- the three large numbers on the macro calculator ---- */
.macro-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 22px;
}

.macro-3 > div {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px 8px;
}

.macro-3 b {
    display: block;
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-size: 38px;
    line-height: 1;
}

.macro-3 span {
    display: block;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 5px;
}

.macro-3 em {
    display: block;
    font-style: normal;
    font-size: 12px;
    color: var(--muted);
    margin-top: 3px;
}

/* a colour for each of the three */
.m-pro b { color: #ff5c9d; }
.m-carb b { color: #38bdf8; }
.m-fat b { color: #fbbf24; }

/* all three shares in one bar, which makes the split obvious */
.macro-bar {
    display: flex;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 10px;
}

.macro-bar i {
    display: block;
    height: 100%;
    transition: width 0.6s ease;
}

.macro-bar .b-pro { background: #ff5c9d; }
.macro-bar .b-carb { background: #38bdf8; }
.macro-bar .b-fat { background: #fbbf24; }

.macro-legend {
    display: flex;
    justify-content: center;
    gap: 18px;
    font-size: 12px;
    color: var(--muted);
}

.macro-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.macro-legend i {
    width: 9px;
    height: 9px;
    border-radius: 3px;
}

/* ---- the "where to get protein" Indian food list ---- */
.food-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.food-grid div {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
    transition: border-color 0.2s, transform 0.2s;
}

.food-grid div:hover {
    border-color: var(--brand);
    transform: translateY(-3px);
}

.food-grid b {
    display: block;
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-size: 26px;
    color: var(--brand);
    line-height: 1;
}

.food-grid strong {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    margin: 6px 0 2px;
}

.food-grid small {
    color: var(--muted);
    font-size: 12.5px;
}

@media (max-width: 900px) {

    .food-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* the rows below - ideal weight and so on */
.result-rows {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    text-align: left;
}

.result-rows div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    font-size: 14px;
    color: var(--muted);
}

.result-rows b {
    color: var(--text);
}

@media (max-width: 900px) {

    .calc-wrap {
        grid-template-columns: 1fr;
    }

    .result-num {
        font-size: 60px;
    }
}

/* ==========================================================
   THE BIG CARDS ON /tools

   The small .tool row still exists and is used on the home page
   and in the "also useful" strip. This is the full version, only
   on the tools page, where somebody is actually choosing.
   ========================================================== */
.tool-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 28px;
}

.tool-card {
    --c: var(--brand);
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 24px 24px 22px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

/* a soft wash of the tool's own colour, from the top left */
.tool-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(90% 70% at 6% 0%, var(--c), transparent 60%);
    opacity: 0.08;
    transition: opacity 0.3s;
    pointer-events: none;
}

.tool-card:hover::before {
    opacity: 0.18;
}

.tool-card:hover {
    border-color: var(--c);
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42);
}

.tool-card > * {
    position: relative;
}

.tc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.tc-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
}

.tool-card:hover .tc-icon {
    border-color: var(--c);
    box-shadow: 0 12px 26px -10px var(--c);
}

.tc-time {
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 4px 11px;
}

.tool-card h2 {
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-size: 25px;
    line-height: 1.12;
    margin: 0 0 5px;
}

.tc-note {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c);
}

.tc-about {
    margin: 0 0 18px;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--muted);
}

/* what goes in, what comes out */
.tc-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 14px 0;
    margin-bottom: 16px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.tc-facts small {
    display: block;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}

.tc-facts b {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
}

.tc-go {
    margin-top: auto;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--c);
}

.tool-card:hover .tc-go {
    text-decoration: underline;
    text-underline-offset: 4px;
}


/* ---------- the three numbers under the hero heading ---------- */
.hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.hero-facts span {
    padding: 8px 16px;
    border-radius: 22px;
    border: 1px solid var(--line);
    background: var(--card);
    font-size: 13px;
    color: var(--muted);
}

.hero-facts b {
    color: var(--brand);
    font-weight: 700;
}


/* ---------- which one do I need ---------- */
.pick-help {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 30px 32px;
    margin-top: 26px;
}

.pick-help h2 {
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-size: 28px;
    margin: 0 0 22px;
}

.pick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.pick-col > b {
    display: block;
    font-size: 14.5px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--brand);
}

.pick-col ol {
    margin: 0;
    padding-left: 19px;
}

.pick-col li {
    margin-bottom: 9px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--muted);
}

.pick-col a {
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
}

.pick-col a:hover {
    color: var(--brand);
    text-decoration: underline;
}


/* ---------- smaller screens ---------- */
@media (max-width: 1050px) {

    .tool-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .pick-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}

@media (max-width: 640px) {

    .tool-cards {
        grid-template-columns: 1fr;
    }

    .tool-card {
        padding: 20px 20px 18px;
    }

    .pick-help {
        padding: 24px 20px;
    }
}


/* ==========================================================
   INDIAN FOOD COUNTER   (/tools/indian-food)

   The running total sticks to the top of the viewport,
   because the point of this tool is watching the number move
   while you are still adding food.
   ========================================================== */
.food-total {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    padding: 15px 20px;
    margin-bottom: 18px;
    border: 1px solid var(--brand);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.food-total > div {
    min-width: 74px;
}

.food-total b {
    display: block;
    font-size: 22px;
    color: var(--text);
    line-height: 1.1;
}

.food-total > div:first-child b {
    color: var(--brand);
    font-size: 27px;
}

.food-total small {
    display: block;
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 3px;
}

.food-total .btn {
    margin-left: auto;
}


/* ---------- search ---------- */
.food-search {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.food-search input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
}

.food-search input:focus {
    outline: none;
    border-color: var(--brand);
}

.food-search span {
    font-size: 12.5px;
    color: var(--muted);
    white-space: nowrap;
}


/* ---------- the list ---------- */
.food-group {
    margin-bottom: 26px;
}

.food-group h3 {
    font-size: 13px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 11px;
}

.food-rows {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--card);
}

.food-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
}

.food-row:last-child {
    border-bottom: 0;
}

.food-row.picked {
    background: var(--brand-soft);
}

.fr-name {
    flex: 1;
    min-width: 0;
}

.fr-name b {
    display: block;
    font-size: 14.5px;
    color: var(--text);
    font-weight: 600;
}

.fr-name small {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

.fr-count {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.fr-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s;
}

.fr-btn:hover {
    border-color: var(--brand);
    background: var(--card-hi);
}

.fr-btn.more:hover {
    background: var(--brand);
    color: var(--on-brand);
}

.fr-num {
    min-width: 22px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--muted);
}

.food-row.picked .fr-num {
    color: var(--brand);
}

.food-none {
    text-align: center;
    color: var(--muted);
    padding: 30px 0;
}


/* ==========================================================
   SLEEP CALCULATOR   (/tools/sleep)
   ========================================================== */
.sleep-list {
    display: grid;
    gap: 9px;
    margin: 4px 0 18px;
}

.sleep-row {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: baseline;
    gap: 12px;
    padding: 12px 15px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--line);
    border-radius: 10px;
    background: var(--bg);
}

.sleep-row b {
    font-size: 17px;
    color: var(--text);
}

.sleep-row span {
    font-size: 12px;
    color: var(--muted);
}

.sleep-row small {
    font-size: 12px;
    color: var(--muted);
    text-align: right;
}

.sleep-row.good {
    border-left-color: #4ade80;
}

.sleep-row.ok {
    border-left-color: #fbbf24;
}

.sleep-row.low {
    border-left-color: #ff5c5c;
}


/* ==========================================================
   WAIST TO HEIGHT   (/tools/waist-height)
   ========================================================== */
.result-tag-row {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.fld-help {
    display: block;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--muted);
    margin-top: 6px;
}


@media (max-width: 560px) {

    .food-total {
        gap: 14px;
        padding: 12px 14px;
    }

    .food-total > div {
        min-width: 62px;
    }

    .food-total b {
        font-size: 18px;
    }

    .food-total > div:first-child b {
        font-size: 22px;
    }

    .food-total .btn {
        margin-left: 0;
        width: 100%;
    }

    .sleep-row {
        grid-template-columns: auto 1fr;
    }

    .sleep-row small {
        grid-column: 1 / -1;
        text-align: left;
    }
}


/* ==========================================================
   GOAL DATE   (/tools/goal-date)

   The milestones matter more than the date. Nine months is
   a wall; nine months broken into four points you will pass
   is a plan.
   ========================================================== */
.mile-list {
    display: grid;
    gap: 7px;
    margin: 16px 0 4px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.mile-row {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: baseline;
    gap: 12px;
    padding: 9px 13px;
    border-radius: 9px;
    background: var(--bg);
}

.mile-row b {
    font-size: 15px;
    color: var(--text);
}

.mile-row span {
    font-size: 12px;
    color: var(--brand);
    font-weight: 600;
}

.mile-row small {
    font-size: 12px;
    color: var(--muted);
    text-align: right;
}


/* ==========================================================
   REP MAX CHART   (/tools/rep-max)
   ========================================================== */
.rep-chart {
    display: grid;
    gap: 5px;
    margin: 18px 0 4px;
}

.rep-line {
    display: grid;
    grid-template-columns: 68px 1fr 48px auto;
    align-items: baseline;
    gap: 10px;
    padding: 9px 13px;
    border-radius: 9px;
    background: var(--bg);
    border: 1px solid transparent;
}

/* the row matching the set they actually told us about */
.rep-line.yours {
    background: var(--brand-soft);
    border-color: var(--brand);
}

.rl-reps {
    font-size: 12.5px;
    color: var(--muted);
}

.rl-kg {
    font-size: 15.5px;
    color: var(--text);
}

.rep-line.yours .rl-kg {
    color: var(--brand);
}

.rl-pct {
    font-size: 12px;
    color: var(--muted);
    text-align: right;
}

.rl-use {
    font-size: 11.5px;
    color: var(--muted);
    text-align: right;
}


@media (max-width: 560px) {

    .mile-row {
        grid-template-columns: auto 1fr;
    }

    .mile-row small {
        grid-column: 1 / -1;
        text-align: left;
    }

    .rep-line {
        grid-template-columns: 58px 1fr 44px;
    }

    .rl-use {
        display: none;
    }
}