/* 1st4Fitness — 7-Day Meal Plan generator */
:root{
  --ink:#14171c;
  --ink-2:#454c57;
  --ink-3:#78818f;
  --line:#e3e6ea;
  --bg:#ffffff;
  --bg-2:#f6f7f9;
  --gold:#cfb777;
  --accent:#cfb777;
  --accent-ink:#bda158;
  --accent-deep:#7a622a;   /* gold darkened enough for small text on white */
  --black:#111111;
  --danger:#b3261e;
  --ok:#1f7a4d;
  --warn:#9a5b00;
  --radius:12px;
  --wrap:720px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* ---------- header / footer ---------- */
.topbar{background:var(--black);padding:18px 0;margin-bottom:36px;
  border-bottom:4px solid var(--gold)}
.topbar .wrap{display:flex;align-items:center}
.brand-logo{display:block;height:34px;width:auto;max-width:100%}
.footer{border-top:1px solid var(--line);margin-top:56px;padding:20px 20px 40px;color:var(--ink-3);font-size:13px}
.footer a{color:var(--ink-2)}

/* ---------- steps ---------- */
.step{display:none;animation:fade .25s ease}
.step.is-active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

h1{font-size:clamp(30px,6vw,44px);line-height:1.1;letter-spacing:-.03em;margin:.2em 0 .4em}
h1 em{font-style:normal;color:var(--accent)}
h2{font-size:clamp(23px,4.4vw,30px);line-height:1.2;letter-spacing:-.02em;margin:.2em 0 .5em}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-3);font-weight:600;margin:0}
.lede{font-size:18px;color:var(--ink-2);max-width:56ch}
.sub{color:var(--ink-2);margin-top:-.2em;max-width:60ch}
.microcopy{font-size:13px;color:var(--ink-3)}

.progress{height:3px;background:var(--line);border-radius:3px;margin-bottom:22px}
.progress span{display:block;height:100%;background:var(--accent);border-radius:3px;transition:width .3s}

.ticks{list-style:none;padding:0;margin:26px 0 30px}
.ticks li{padding:7px 0 7px 30px;position:relative;color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;left:4px;top:14px;width:8px;height:14px;
  border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ---------- buttons ---------- */
.btn{font:inherit;font-weight:650;border-radius:var(--radius);cursor:pointer;
  padding:14px 22px;border:1px solid transparent;transition:.15s}
.btn-primary{background:var(--black);color:var(--gold)}
.btn-primary:hover{background:#282828}
.btn-ghost{background:transparent;color:var(--ink-2);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink-3);color:var(--ink)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.nav{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 6px}

/* ---------- choice cards ---------- */
.choices{display:grid;gap:10px;margin-top:20px}
.choice{display:block;width:100%;text-align:left;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;cursor:pointer;font:inherit;transition:.15s}
.choice:hover{border-color:var(--ink-3);background:var(--bg-2)}
.choice strong{display:block;font-size:17px;margin-bottom:2px}
.choice span{color:var(--ink-3);font-size:14px}
.choice.is-on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}

/* ---------- fields ---------- */
.field{margin:18px 0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.input-row{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg);overflow:hidden}
.input-row:focus-within{border-color:var(--accent)}
input[type=number],input[type=text],input[type=email]{
  flex:1;min-width:0;font:inherit;padding:13px 14px;border:0;outline:0;background:transparent;color:var(--ink)}
.unit{padding:0 14px;color:var(--ink-3);font-size:14px}

.segmented{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.segmented.small{margin-top:8px}
.seg{font:inherit;padding:10px 18px;border:0;background:transparent;cursor:pointer;color:var(--ink-2)}
.seg + .seg{border-left:1px solid var(--line)}
.seg.is-on{background:var(--ink);color:#fff}

.chips{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0 6px}
.chip{font:inherit;font-size:15px;padding:10px 16px;border-radius:999px;border:1px solid var(--line);
  background:var(--bg);cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--ink-3)}
.chip.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}

.consent{display:flex;gap:11px;align-items:flex-start;font-weight:400;font-size:14px;
  color:var(--ink-2);margin-top:16px;cursor:pointer}
.consent input{margin-top:3px;width:17px;height:17px;accent-color:var(--accent);flex:none}

.error{color:var(--danger);font-size:14px;min-height:1.2em;margin-top:10px}
.warn{color:var(--warn);font-size:14px;margin:12px 0 0}

/* ---------- result ---------- */
.target-card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;margin:18px 0}
.target-card .row{display:flex;flex-wrap:wrap;gap:26px}
.target-card .stat{flex:1;min-width:110px}
.target-card .stat b{display:block;font-size:26px;letter-spacing:-.02em}
.target-card .stat span{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.target-card p{margin:12px 0 0;font-size:14px;color:var(--ink-2)}

.day{border:1px solid var(--line);border-radius:var(--radius);margin:12px 0;overflow:hidden}
.day > summary{cursor:pointer;padding:15px 18px;font-weight:650;display:flex;
  justify-content:space-between;gap:12px;align-items:baseline;list-style:none}
.day > summary::-webkit-details-marker{display:none}
.day > summary::after{content:"＋";color:var(--ink-3);font-weight:400}
.day[open] > summary::after{content:"−"}
.day > summary .kcal{font-weight:400;font-size:14px;color:var(--ink-3)}
.day .meals{padding:0 18px 8px}
.meal{padding:12px 0;border-top:1px solid var(--line)}
.meal .slot{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--accent-deep);font-weight:700}
.meal .name{font-weight:600}
.meal .macros{font-size:13px;color:var(--ink-3)}

.shopping{border:1px solid var(--line);border-radius:var(--radius);margin:26px 0;padding:0 18px}
.shopping > summary{cursor:pointer;padding:15px 0;font-weight:650}
.shop-group{margin:6px 0 16px}
.shop-group h4{margin:12px 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--accent-deep)}
.shop-group ul{margin:0;padding-left:20px;color:var(--ink-2)}
.shop-group li{padding:2px 0}

.disclaimer{font-size:12px;color:var(--ink-3);line-height:1.5;border-top:1px solid var(--line);
  padding-top:16px;margin-top:30px}

@media (max-width:560px){
  .grid-2{grid-template-columns:1fr}
  .btn{width:100%}
  .nav .btn,.actions .btn{flex:1 1 100%}
}

/* ---------- menu columns (result screen) ---------- */
.menu-col{margin:28px 0}
.menu-col h3{font-size:19px;letter-spacing:-.01em;margin:0 0 10px;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.menu-col h3 em{font-style:normal;font-size:13px;font-weight:600;color:var(--accent-deep)}
.menu-col h3 .col-cap{margin-left:auto;font-size:13px;font-weight:400;color:var(--ink-3)}

.option{border:1px solid var(--line);border-radius:var(--radius);margin:8px 0;overflow:hidden}
.option > summary{cursor:pointer;padding:14px 16px;display:flex;align-items:baseline;gap:12px;
  list-style:none;font-weight:600}
.option > summary::-webkit-details-marker{display:none}
.option[open]{border-color:var(--accent)}
.opt-n{flex:none;width:22px;height:22px;border-radius:50%;background:var(--bg-2);
  color:var(--ink-3);font-size:12px;font-weight:700;display:grid;place-items:center;
  align-self:center}
.option[open] .opt-n{background:var(--black);color:var(--gold)}
.opt-name{flex:1;min-width:0}
.opt-kcal{font-weight:400;font-size:13px;color:var(--ink-3);white-space:nowrap}
.opt-body{padding:0 16px 16px;border-top:1px solid var(--line);margin-top:2px}
.opt-macros{font-size:13px;color:var(--ink-3);margin:12px 0}
.opt-body h5{font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--accent-deep);margin:14px 0 6px}
.opt-body ul,.opt-body ol{margin:0;padding-left:20px;color:var(--ink-2);font-size:15px}
.opt-body li{padding:2px 0}
.opt-note{font-size:12.5px;color:var(--ink-3);margin:12px 0 0}

@media (max-width:560px){
  .menu-col h3 .col-cap{margin-left:0;width:100%}
  .opt-kcal{white-space:normal}
}