/* THEME (29 Oct 2026, owner: "this theme orange is missing, and make the background of screens clear pure white ... Buttons and all this orange").
   Loaded LAST. Reference = the "tablett" food-app sheet: pure white pages, a bright orange (#F26A1B) for buttons, selected chips, tabs, bars, banners.
   The page is pure white (--bg #FFFFFF); cards stay white and separate by a 1px #F3E7DD line plus the soft warm shadow (--sh carries the line).
   Orange rules (WCAG, measured by tools/contrast_audit.mjs on the real pixels):
     - a label ON a bright-orange fill is either WHITE, bold 700, at least 18.7px (large text, white on #F26A1B = 3.07:1; the fill never goes lighter than #F26A1B under a label),
       or DARK (#1A0F05 on #F26A1B = 6.2:1) for anything smaller (chips, pills, tab labels, step numbers);
     - the burnt tokens --strong / --atext are for small orange TEXT on white only (links, eyebrows), never for a fill.
   Tokens live in css/tokens.css (--fill, --fill-ink, --btn-from/--btn-to, --hero-a..c). Nothing in this file is a new colour. */

/* ---- primary pill buttons: bright-orange fill + white 19px / 700 label, 50px high ---- */
.btn{min-height:50px;height:50px;font-size:19px;font-weight:700;color:#fff;background:linear-gradient(180deg,var(--btn-from),var(--btn-to));box-shadow:0 12px 20px -12px rgba(234,94,10,.75)}
.btn.out{background:#fff;color:var(--atext);box-shadow:0 0 0 2px var(--fill) inset;font-weight:700}
.btn.danger{background:var(--avoid-bg);color:var(--avoid-t);box-shadow:none}
.btn:disabled,.btn.disabled{background:var(--disabled-bg);color:var(--disabled-t);box-shadow:inset 0 0 0 1.5px var(--disabled-line)}
/* the small button: dark label on the bright fill */
.btn.sm{height:38px;min-height:38px;font-size:14px;font-weight:700;padding:0 16px;background:var(--fill);color:var(--fill-ink);box-shadow:0 8px 14px -8px rgba(234,94,10,.8)}
.btn.sm.out{background:#fff;color:var(--atext);box-shadow:0 0 0 2px var(--fill) inset}
.add{background:var(--fill);color:var(--fill-ink);font-weight:700;box-shadow:0 8px 14px -8px rgba(234,94,10,.8)}

/* ---- selected chips, tabs, steps: bright fill + dark label ---- */
.fc.on,.msw button.on,.pc.sel,.hmp .fc.on,.pl .msw button.on,.rcpage .fc.on,.ms.on,.dy.on{background:var(--fill);color:var(--fill-ink);box-shadow:0 8px 14px -8px rgba(234,94,10,.7)}
.stp b,.plan .tag,.tl.next .tl-s{background:var(--fill);color:var(--fill-ink)}
.tk2.on,.mpb.on .mpv{background:var(--fill);border-color:var(--fill)}
.mpv{border-color:var(--fill)}
.mpv::before,.mpv::after{background:var(--atext)}
.mpb.on .mpv::before{background:none}
.mot.on{box-shadow:0 0 0 2.5px var(--fill),0 12px 18px -12px rgba(234,94,10,.6)}
.mot{box-shadow:0 0 0 1px var(--card-line),0 12px 18px -14px rgba(120,60,20,.45)}
.mot.on{box-shadow:0 0 0 2.5px var(--fill),0 12px 18px -12px rgba(234,94,10,.6)}
.mcp.nx .ph{box-shadow:0 0 0 3px var(--fill)}

/* ---- audit fixes after the theme change ---- */
.ob{padding-bottom:49px}                       /* the last note on a start step stays clear of the (taller) fixed Next button and its glow */
html.te .bhero .bh-s{color:#000}               /* Telugu small line on the banner gradient: 5.5:1 needs the darkest ink */

/* ---- carousel cards: a 2px bright ring on the picked dish; the + on the photo ---- */
.mot.mcd{box-shadow:0 0 0 1px var(--card-line),0 12px 18px -14px rgba(120,60,20,.45)}
.mot.mcd.on{box-shadow:0 0 0 2px var(--fill),0 12px 18px -12px rgba(234,94,10,.6)}
.mcd .mpb.on .mpv::before{background:none}