/* ===== OncoNourish Tool — shared styles ===== */
:root{
  --green:#0e5945; --green-deep:#093c2e; --green-700:#14624d;
  --sage:#6fb89c; --sage-soft:#a9d3c1;
  --clay:#cf7d4f; --clay-deep:#b5642f;
  --ink:#16241f; --ink-soft:#41544c; --muted:#6c7d75;
  --paper:#f6f8f4; --paper-warm:#f1f4ec; --card:#ffffff;
  --mint:#e8f1ea; --mint-deep:#d8e9df;
  --line:#dde6df; --line-strong:#c8d4cb;
  --amber-bg:#f7ecd6; --amber-ink:#976219; --amber-line:#e6d2a8;
  --rose-bg:#fbeee8; --rose-ink:#b5642f; --rose-line:#f1d8ca;
  --shadow-sm:0 1px 2px rgba(9,60,46,.05),0 1px 1px rgba(9,60,46,.04);
  --shadow-md:0 18px 40px -24px rgba(9,60,46,.28),0 4px 12px -8px rgba(9,60,46,.16);
  --shadow-lg:0 40px 80px -40px rgba(9,60,46,.38),0 8px 24px -12px rgba(9,60,46,.18);
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  background:
    radial-gradient(60% 40% at 88% -5%, rgba(111,184,156,.16), transparent 70%),
    radial-gradient(46% 36% at 4% 8%, rgba(207,125,79,.07), transparent 70%),
    var(--paper);
  color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Newsreader",Georgia,serif;font-weight:500;letter-spacing:-.01em;margin:0;color:var(--ink);}
p{margin:0;}
button{font-family:inherit;cursor:pointer;}
.mono{font-family:"IBM Plex Mono",monospace;}
:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:6px;}

/* ---- app frame ---- */
.app{min-height:100%;display:flex;flex-direction:column;}
.appbar{
  position:sticky;top:0;z-index:50;background:rgba(246,248,244,.9);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.appbar-in{max-width:1080px;margin:0 auto;padding:13px 28px;display:flex;align-items:center;justify-content:space-between;gap:18px;}
.brand{display:flex;align-items:center;gap:10px;font-family:"Newsreader",serif;font-weight:600;font-size:20px;letter-spacing:-.02em;}
.brand .mark{width:28px;height:28px;border-radius:8px;background:linear-gradient(150deg,var(--green),var(--green-deep));display:grid;place-items:center;flex:none;}
.brand .mark svg{width:17px;height:17px;}
.brand b{color:var(--green);font-weight:600;}
.appbar .role{display:flex;gap:4px;background:var(--mint);border:1px solid var(--mint-deep);border-radius:999px;padding:3px;}
.appbar .role button{border:none;background:transparent;font-size:12.5px;font-weight:600;color:var(--ink-soft);padding:6px 13px;border-radius:999px;transition:.2s;}
.appbar .role button.on{background:#fff;color:var(--green);box-shadow:var(--shadow-sm);}

.disclaimer-strip{background:var(--amber-bg);border-bottom:1px solid var(--amber-line);}
.disclaimer-strip .in{max-width:1080px;margin:0 auto;padding:8px 28px;font-size:12px;color:var(--amber-ink);display:flex;align-items:center;gap:9px;font-weight:500;}
.disclaimer-strip svg{width:14px;height:14px;flex:none;}

.stage{flex:1;display:flex;justify-content:center;padding:34px 22px 64px;}

/* ===== WIZARD ===== */
.wizard{width:100%;max-width:600px;}
.progress{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.dots{display:flex;gap:7px;align-items:center;}
.dot{width:9px;height:9px;border-radius:50%;background:var(--line-strong);transition:.3s;}
.dot.done{background:var(--sage);}
.dot.cur{background:var(--green);transform:scale(1.35);}
.step-label{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.bar{height:5px;background:var(--mint-deep);border-radius:999px;overflow:hidden;margin-bottom:26px;}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--sage),var(--green));border-radius:999px;transition:width .45s cubic-bezier(.16,.84,.44,1);}

.card{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-md);padding:34px 36px;}
.eyebrow-sm{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);font-weight:500;}
.q-title{font-size:30px;line-height:1.1;margin:10px 0 8px;letter-spacing:-.02em;}
.q-sub{font-size:15px;color:var(--ink-soft);margin-bottom:26px;max-width:46ch;}

.field{margin-bottom:22px;}
.field:last-child{margin-bottom:0;}
.label{display:flex;align-items:baseline;gap:8px;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:9px;}
.label .opt{font-weight:500;font-size:11.5px;color:var(--muted);font-family:"IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.04em;}
.help{font-size:13px;color:var(--muted);margin-top:7px;line-height:1.45;}
.help.warn{color:var(--rose-ink);}

input[type=text],input[type=number],textarea,select{
  width:100%;font-family:inherit;font-size:15.5px;color:var(--ink);background:var(--paper-warm);
  border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;transition:.18s;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--sage);background:#fff;box-shadow:0 0 0 4px rgba(111,184,156,.16);}
input.bad{border-color:var(--clay);background:#fff;}
textarea{resize:vertical;min-height:74px;}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%236c7d75' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:40px;}
.input-unit{position:relative;}
.input-unit input{padding-right:54px;}
.input-unit .u{position:absolute;right:15px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--muted);font-family:"IBM Plex Mono",monospace;pointer-events:none;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

/* segmented */
.seg{display:flex;gap:6px;background:var(--paper-warm);border:1.5px solid var(--line);border-radius:13px;padding:5px;}
.seg button{flex:1;border:none;background:transparent;font-size:14px;font-weight:600;color:var(--ink-soft);padding:11px 8px;border-radius:9px;transition:.18s;line-height:1.2;}
.seg button.on{background:#fff;color:var(--green);box-shadow:var(--shadow-sm);}
.seg.sm button{padding:8px 6px;font-size:13px;}

/* number stepper */
.stepper{display:flex;align-items:center;gap:0;width:max-content;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper-warm);}
.stepper button{width:46px;height:48px;border:none;background:transparent;font-size:20px;color:var(--green);display:grid;place-items:center;}
.stepper button:hover{background:var(--mint);}
.stepper input{border:none;border-radius:0;background:transparent;width:74px;text-align:center;font-size:17px;font-weight:600;padding:0;box-shadow:none;}
.stepper input:focus{box-shadow:none;background:transparent;}

/* slider */
.slider-wrap{display:flex;align-items:center;gap:16px;}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:6px;border-radius:999px;background:var(--mint-deep);padding:0;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--green);border:3px solid #fff;box-shadow:var(--shadow-sm);cursor:pointer;}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--green);border:3px solid #fff;cursor:pointer;}
.slider-val{font-family:"IBM Plex Mono",monospace;font-size:17px;font-weight:600;color:var(--green);min-width:64px;text-align:right;}

/* check chips */
.chipset{display:flex;flex-wrap:wrap;gap:9px;}
.chk{display:inline-flex;align-items:center;gap:9px;padding:10px 15px;border-radius:11px;border:1.5px solid var(--line);background:var(--paper-warm);font-size:14px;font-weight:500;color:var(--ink-soft);transition:.16s;user-select:none;}
.chk:hover{border-color:var(--sage-soft);}
.chk .box{width:18px;height:18px;border-radius:6px;border:1.6px solid var(--line-strong);display:grid;place-items:center;flex:none;transition:.16s;background:#fff;}
.chk .box svg{width:12px;height:12px;color:#fff;opacity:0;transform:scale(.5);transition:.16s;}
.chk.on{border-color:var(--green);background:var(--mint);color:var(--green-deep);}
.chk.on .box{background:var(--green);border-color:var(--green);}
.chk.on .box svg{opacity:1;transform:none;}
.chk .ico{width:18px;height:18px;color:currentColor;opacity:.8;}

/* toggle */
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border:1.5px solid var(--line);border-radius:13px;background:var(--paper-warm);}
.toggle-row.on{border-color:var(--sage-soft);background:var(--mint);}
.toggle-row .t-main{display:flex;flex-direction:column;gap:2px;}
.toggle-row .t-main b{font-size:14.5px;font-weight:600;color:var(--ink);}
.toggle-row .t-main span{font-size:12.5px;color:var(--muted);}
.switch{width:46px;height:27px;border-radius:999px;background:var(--line-strong);border:none;position:relative;flex:none;transition:.2s;}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:.2s;}
.switch.on{background:var(--green);}
.switch.on::after{transform:translateX(19px);}

/* chip input (meds/allergies tags) */
.tagbox{border:1.5px solid var(--line);background:var(--paper-warm);border-radius:12px;padding:9px;display:flex;flex-wrap:wrap;gap:7px;align-items:center;}
.tagbox input{border:none;background:transparent;flex:1;min-width:120px;padding:6px;box-shadow:none;}
.tagbox input:focus{box-shadow:none;background:transparent;}
.tag{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:5px 8px 5px 11px;font-size:13px;font-weight:500;color:var(--ink);}
.tag button{border:none;background:transparent;color:var(--muted);font-size:15px;line-height:1;padding:0 2px;}
.tag button:hover{color:var(--clay-deep);}

/* faces appetite */
.faces{display:flex;gap:10px;}
.face{flex:1;border:1.5px solid var(--line);background:var(--paper-warm);border-radius:14px;padding:14px 8px;text-align:center;transition:.16s;}
.face:hover{border-color:var(--sage-soft);}
.face.on{border-color:var(--green);background:var(--mint);}
.face .emoji{font-size:26px;line-height:1;}
.face .fl{font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-top:6px;}
.face.on .fl{color:var(--green-deep);}

/* severity inline */
.sev{display:flex;gap:5px;margin-left:auto;}
.sev button{border:1px solid var(--line);background:#fff;font-size:11.5px;font-weight:600;color:var(--muted);padding:4px 9px;border-radius:7px;transition:.15s;}
.sev button.on{background:var(--clay);border-color:var(--clay);color:#fff;}
.symrow{display:flex;align-items:center;width:100%;gap:10px;}

/* consent */
.consent-card{display:flex;gap:14px;padding:18px;border:1.5px solid var(--line);border-radius:14px;background:var(--paper-warm);align-items:flex-start;}
.consent-card.on{border-color:var(--green);background:var(--mint);}
.privacy{display:grid;gap:12px;margin-bottom:24px;}
.privacy li{display:flex;gap:11px;font-size:14px;color:var(--ink-soft);align-items:flex-start;list-style:none;}
.privacy{padding:0;}
.privacy li svg{width:18px;height:18px;color:var(--green);flex:none;margin-top:2px;}

/* live BMI silent hint */
.silent-hint{margin-top:14px;display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);background:var(--paper-warm);border:1px dashed var(--line-strong);border-radius:10px;padding:9px 13px;}
.silent-hint svg{width:15px;height:15px;color:var(--sage);flex:none;}

/* nav buttons */
.wiz-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:28px;}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;padding:13px 24px;border-radius:12px;border:none;transition:transform .18s,box-shadow .18s,background .18s;}
.btn svg{width:17px;height:17px;}
.btn-primary{background:var(--green);color:#fff;box-shadow:var(--shadow-md);}
.btn-primary:hover{background:var(--green-deep);transform:translateY(-1px);}
.btn-primary:disabled{background:var(--line-strong);color:#fff;box-shadow:none;cursor:not-allowed;transform:none;}
.btn-ghost{background:transparent;color:var(--ink-soft);border:1.5px solid var(--line);}
.btn-ghost:hover{border-color:var(--green);color:var(--green);background:var(--mint);}
.btn-text{background:transparent;color:var(--muted);padding:13px 8px;}
.btn-text:hover{color:var(--green);}

.errline{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--clay-deep);margin-top:14px;background:var(--rose-bg);border:1px solid var(--rose-line);padding:9px 13px;border-radius:10px;}
.errline svg{width:15px;height:15px;flex:none;}

/* entrance: animate transform only, never pin opacity to 0 (stays visible if paused) */
.fade{animation:fadeUp .4s cubic-bezier(.16,.84,.44,1);}
@keyframes fadeUp{from{transform:translateY(9px);}to{transform:none;}}
@media (prefers-reduced-motion:reduce){.fade{animation:none;}}

@media (max-width:560px){
  .card{padding:26px 22px;border-radius:18px;}
  .q-title{font-size:25px;}
  .row2{grid-template-columns:1fr;}
  .appbar-in{padding:12px 18px;}
  .disclaimer-strip .in{padding:8px 18px;}
}