/* Cooking with Beryl — the Build a Meal page. Same warm cream look as the rest of the site,
   with the original page's green hero band and orange "Ask Beryl" button, and a little movement.
   Loaded only on this page. */
.beryl-page { --bg: var(--cream); --bg-card: #ffffff; --bg-elevated: var(--cream-2); --bline: #e2dcc4; --text: var(--ink); --text-mid: #4a5260; --text-light: #6b7280;
  --bgreen: #229343; --bgreen-light: #2aad50; --bgreen-dark: #1a7234; --orange: #F18119; --orange-light: #f5993f; --gold: #c9950f; --bred: #D42B2B;
  --bshadow: 0 6px 20px rgba(40,47,57,.12); --bradius: 14px; }
.beryl-page main { background: linear-gradient(180deg, rgba(255,251,232,.8) 0%, rgba(255,251,232,.96) 40%, rgba(255,251,232,1) 100%), url(img/bg-vegetables.jpg) center top / cover no-repeat fixed; }
@media (max-width: 900px), (hover: none) { .beryl-page main { background-attachment: scroll; background-size: 100% auto; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bnote { font-size: .95rem; color: var(--text-light); margin: .4rem 0 0; }
.bmuted { color: var(--text-mid); }

/* ---- movement ---- */
@keyframes bFloat { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
@keyframes bBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes bRock { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes bRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes bPop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
.beryl-float, .beryl-bob { animation: none; }
.beryl-rock { animation: none; }
.beryl-rise { animation: bRise .45s ease both; }
.tag-item.pop { animation: bPop .25s ease; }
@media (prefers-reduced-motion: reduce) { .beryl-float, .beryl-bob, .beryl-rock, .beryl-rise, .tag-item.pop, .spinner { animation: none !important; } }

/* ---- hero ---- */
.beryl-hero { background: radial-gradient(ellipse at 20% 0%, #2f9e44 0%, #227a36 50%, #1a6a2e 100%); border-bottom: 6px solid var(--orange); color: #fff; overflow: hidden; }
.beryl-hero-inner { display: grid; grid-template-columns: 260px 1fr 220px; gap: 1.5rem; align-items: center; padding: 1.6rem 0; }
.beryl-hero-left { width: 260px; height: auto; filter: drop-shadow(0 10px 22px rgba(0,0,0,.35)); }
.beryl-hero-basket { width: 200px; height: auto; justify-self: center; filter: drop-shadow(0 10px 22px rgba(0,0,0,.35)); }
.beryl-pretitle { color: #e3f5e7; font-size: 1rem; margin: 0 0 .2rem; letter-spacing: .04em; }
.beryl-hero h1 { font-family: var(--font-head); color: #fff; font-size: clamp(2.8rem, 6vw, 4.2rem); margin: 0 0 .2rem; text-shadow: 0 3px 0 rgba(0,0,0,.35); }
.beryl-tagline { font-family: var(--font-head); font-size: 1.5rem; color: #fff; margin: 0 0 .6rem; }
.beryl-desc { color: #f2fbf4; font-size: 1.05rem; max-width: 560px; margin: 0; }
@media (max-width: 900px) { .beryl-hero-inner { grid-template-columns: 200px 1fr; } .beryl-hero-basket { display: none; } .beryl-hero-left { width: 200px; } }
@media (max-width: 600px) { .beryl-hero-inner { grid-template-columns: 1fr; text-align: center; } .beryl-hero-left { width: 180px; margin: 0 auto; } .beryl-desc { margin-inline: auto; } }

/* ---- cards & controls ---- */
.beryl-wrap { max-width: 1180px; }
/* ---- two columns on wide screens (Alix, 11 Sep 2026): ingredients stay in view on the left, results on the right ---- */
@media (min-width: 1001px) {
  .beryl-grid { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 1.6rem; align-items: start; }
  /* The panel sticks to the top when it fits the screen; when it is taller than the screen it sticks by its
     bottom instead (class set by beryl.js), so the Ask button is always in view and you scroll up for the top. */
  .beryl-col-left { position: sticky; top: 1rem; }
  .beryl-col-left.stick-bottom { top: auto; bottom: 1rem; align-self: end; }
  .beryl-col-left .bcard { margin: 0; }
  .beryl-col-left .beryl-panel { padding: 1.2rem 1.3rem; }
  .beryl-col-left .beryl-panel h2 { font-size: 1.55rem; }
  .beryl-col-left .bhelp { font-size: .95rem; }
  .beryl-col-left .opt-grid { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .beryl-col-left .opt-grid select { width: 100%; min-width: 0; }
  .beryl-col-left .quick-btn { font-size: .9rem; padding: .3rem .7rem; }
  .beryl-col-right { min-width: 0; margin-top: 1.6rem; }
  .beryl-col-right > *:first-child, .beryl-col-right #results > :first-child { margin-top: 0; }
  .beryl-col-right .beryl-state { padding-top: .5rem; }
  .beryl-col-right .beryl-state.has-kitchen { padding-top: 0; }
  .beryl-col-right .beryl-state.has-kitchen h2 { font-size: 2.1rem; }
  .beryl-col-right .beryl-state.has-kitchen p { font-size: 1.15rem; max-width: 620px; }
}
/* Welcome picture (assets/img/beryl/kitchen.webp): fills the results column while there is nothing to show */
.beryl-state .kitchen-pic { display: block; width: auto; max-width: 100%; height: auto; max-height: 520px; margin: 0 auto 1rem; border-radius: 14px; box-shadow: var(--bshadow); }
.results-strip { background: var(--bgreen-dark); color: #fff; border-radius: 12px; padding: .7rem 1.1rem; display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; margin: 1.6rem 0 1rem; }
.results-strip strong { font-family: var(--font-head); font-weight: 400; font-size: 1.25rem; }
.results-strip a { color: #fff; font-weight: 700; background: rgba(255,255,255,.16); padding: .3rem .9rem; border-radius: 999px; text-decoration: none; font-size: 1rem; }
.results-strip a:hover, .results-strip a:focus-visible { background: rgba(255,255,255,.3); outline: 2px solid #fff; outline-offset: 2px; }
#bankMatches { padding-top: .6rem; border-top: 2px dashed var(--bline); }
.bcard { background: var(--bg-card); border: 0; border-radius: var(--bradius); padding: 1.5rem 1.6rem; box-shadow: var(--bshadow); margin: 1.6rem 0; }
.beryl-panel h2 { font-family: var(--font-head); color: var(--bgreen-dark); font-size: 1.9rem; margin: 0 0 .4rem; }
.bhelp { color: var(--text-mid); font-size: 1rem; margin: 0 0 .9rem; }
.beryl-input { display: flex; gap: .6rem; margin: 0 0 .7rem; }
.beryl-input input { flex: 1; font: inherit; font-size: 1.15rem; padding: .7rem 1rem; border: 2px solid var(--bgreen); border-radius: 10px; background: #fff; color: var(--text); }
.beryl-input input::placeholder { color: var(--text-light); }
.beryl-input input:focus { outline: none; box-shadow: 0 0 0 3px rgba(42,173,80,.35); }
.bbtn { display: inline-block; border: 0; border-radius: 10px; padding: .7rem 1.4rem; font: 700 1.05rem var(--font-body); cursor: pointer; background: var(--bgreen); color: #fff; text-decoration: none; transition: transform .12s ease, background .15s, box-shadow .15s; }
.bbtn:hover { background: var(--bgreen-light); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(40,47,57,.25); color: #fff; }
.bbtn:active { transform: translateY(0); }
.bbtn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.bbtn-add { font-size: 1.7rem; line-height: 1; padding: 0 1.1rem; }
.bbtn-ask { display: block; width: 100%; background: var(--orange); font-size: 1.25rem; padding: .95rem 1rem; margin-top: 1.2rem; box-shadow: 0 6px 18px rgba(241,129,25,.35); }
.bbtn-ask:hover { background: var(--orange-light); }
.bbtn-ghost { background: transparent; border: 2px solid var(--charcoal); color: var(--charcoal); }
.bbtn-ghost:hover { background: var(--charcoal); border-color: var(--charcoal); color: #fff; }
.bbtn-sm { padding: .45rem .9rem; font-size: .95rem; }
.btn-link { background: none; border: 0; color: var(--text-light); text-decoration: underline; cursor: pointer; font: inherit; font-size: .95rem; }
.beryl-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: center; margin-top: .8rem; }
.tags { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; min-height: 1rem; }
.tag-item { background: var(--bgreen); border: 1.5px solid var(--bgreen); color: #fff; border-radius: 999px; padding: .3rem .5rem .3rem .9rem; font-weight: 700; font-size: .95rem; display: inline-flex; align-items: center; gap: .3rem; }
.tag-x { background: none; color: #fff; border: 0; cursor: pointer; font-size: .9rem; padding: 0 .3rem; }
.tag-x:hover { color: #ffd6d6; }
.quick-label { font-weight: 700; margin: .4rem 0 .5rem; color: var(--text-light); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.quick-btns { display: flex; flex-wrap: wrap; gap: .45rem; }
.quick-btn { background: #fff; border: 1.5px solid #c9c4ae; border-radius: 999px; padding: .35rem .85rem; font: 600 .95rem var(--font-body); cursor: pointer; color: var(--text-mid); transition: transform .1s, border-color .15s, color .15s; }
.quick-btn:hover { border-color: var(--bgreen); color: var(--bgreen-dark); transform: translateY(-1px); }
.quick-btn.active { border-color: var(--bgreen); color: #fff; background: var(--bgreen); }
.quick-more { margin-top: .9rem; }
.quick-more summary { cursor: pointer; font-weight: 700; color: var(--bgreen-dark); }
.quick-more .quick-btns { margin-top: .6rem; }
.beryl-options { border: 1px solid var(--bline); border-radius: 10px; padding: .6rem 1.1rem .9rem; margin: 1.3rem 0 0; background: var(--bg-elevated); }
.beryl-options legend { font-weight: 700; padding: 0 .4rem; color: var(--gold); }
.opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .7rem 1rem; align-items: end; }
.opt-grid label { font-weight: 700; font-size: .9rem; color: var(--text-mid); display: flex; flex-direction: column; gap: .25rem; }
.opt-grid select { font: inherit; font-size: 1rem; padding: .45rem .6rem; border: 1.5px solid #c9c4ae; border-radius: 8px; background: #fff; color: var(--text); }
.opt-check { flex-direction: row !important; align-items: center; gap: .5rem !important; }
.opt-check input { width: 22px; height: 22px; accent-color: var(--bgreen); }

/* ---- Beryl states (hello / thinking / shrug) ---- */
.beryl-state { text-align: center; padding: 1.5rem 1rem 2rem; }
.beryl-state[hidden] { display: none; }
.beryl-state img, .beryl-pose { width: 210px; height: auto; display: block; margin: 0 auto .6rem; filter: drop-shadow(0 8px 18px rgba(40,47,57,.3)); }
.beryl-state h2 { font-family: var(--font-head); color: var(--bgreen-dark); font-size: 1.9rem; margin: 0 0 .3rem; }
.beryl-state p { color: var(--text-mid); max-width: 520px; margin: 0 auto; }
.beryl-loading .spinner { width: 40px; height: 40px; border: 4px solid var(--bline); border-top-color: var(--bgreen); border-radius: 50%; margin: .4rem auto .8rem; animation: spin .8s linear infinite; }
.beryl-loading p strong { color: var(--text-mid); }

/* ---- results ---- */
.beryl-section { margin: 1.6rem 0; }
.results-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .3rem; }
.results-head h2, .results-hero h2 { font-family: var(--font-head); color: var(--bgreen-dark); font-size: 1.8rem; margin: 0; }
.match-count { background: var(--bgreen); color: #fff; border-radius: 999px; padding: .15rem .8rem; font-weight: 700; font-size: .9rem; white-space: nowrap; }
.results-hero { display: flex; align-items: center; gap: 1rem; margin-bottom: .8rem; }
.results-hero .beryl-pose { width: 130px; margin: 0; }
.safety-box { background: #fff3e4; border-left: 5px solid var(--orange); border-radius: 8px; padding: .7rem 1rem; margin-bottom: 1rem; color: #7a4a10; font-size: .95rem; }
.bank-list { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .9rem; }
.bank-card { background: var(--bg-card); box-shadow: var(--bshadow); border: 1px solid transparent; border-radius: var(--bradius); overflow: hidden; display: flex; flex-direction: column; transition: transform .15s, border-color .15s; }
.bank-card:hover { transform: translateY(-3px); border-color: var(--bgreen); }
.bank-img { display: block; height: 130px; background: #eee; }
.bank-img img { width: 100%; height: 100%; object-fit: cover; }
.bank-body { padding: .8rem 1rem 1rem; display: flex; flex-direction: column; gap: .25rem; }
.bank-body h3 { font-family: var(--font-head); font-size: 1.25rem; margin: 0; }
.bank-body h3 a { color: var(--ink); text-decoration: none; }
.bank-body h3 a:hover { color: var(--bgreen-dark); }
.bank-body p { font-size: .92rem; margin: 0; color: var(--text-mid); }
.bank-body .bbtn { align-self: flex-start; margin-top: .4rem; }
.meal-card { background: var(--bg-card); border: 1px solid transparent; border-radius: var(--bradius); margin-bottom: .9rem; overflow: hidden; box-shadow: var(--bshadow); animation: bRise .4s ease both; transition: border-color .15s; }
.meal-card:hover { border-color: var(--bgreen); }
.meal-top { display: flex; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font: inherit; color: inherit; padding: 0; }
.meal-colour { flex: 0 0 8px; }
.meal-info { display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.2rem; }
.meal-name { font-family: var(--font-head); font-size: 1.5rem; color: var(--ink); }
.meal-meta { color: var(--text-mid); font-size: .9rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.meal-yours { color: var(--bgreen-dark); font-weight: 700; font-size: .9rem; }
.tap-hint { color: var(--orange); font-size: .85rem; font-weight: 700; }
.meal-card.open .tap-hint { display: none; }
.meal-detail { padding: 0 1.2rem 1.2rem; border-top: 1px solid var(--bline); }
.meal-detail h3 { font-family: var(--font-head); color: var(--gold); margin: 1rem 0 .4rem; font-size: 1.25rem; }
.meal-ings { list-style: none; margin: 0; padding: 0; font-size: .98rem; color: var(--text); }
.meal-ings li { display: flex; align-items: center; gap: .5rem; padding: .15rem 0; }
.meal-ings .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bgreen); flex: 0 0 8px; }
/* Method: Beryl's line, a running count, then big numbered steps with a tick box each (pictures removed 11 Sep 2026) */
.meal-beryl { display: flex; align-items: center; gap: 1rem; background: #e9f6ec; border-radius: 12px; padding: .8rem 1.1rem; margin: .2rem 0 .8rem; }
.meal-beryl img { width: 84px; height: auto; flex: 0 0 84px; filter: drop-shadow(0 3px 8px rgba(40,47,57,.25)); }
.meal-beryl p { margin: 0; font-size: 1.05rem; color: var(--text); }
.meal-beryl strong { color: var(--bgreen-dark); }
.meal-progress { margin: 0 0 .2rem; font-weight: 700; color: var(--text-mid); font-size: 1rem; font-variant-numeric: tabular-nums; }
.meal-steps { list-style: none; margin: 0; padding: 0; }
.meal-steps li { display: grid; grid-template-columns: 44px 1fr 52px; gap: 1rem; align-items: start; padding: 1.15rem 0; border-bottom: 1px solid var(--bline); }
.meal-steps li:last-child { border-bottom: 0; }
.step-num { width: 44px; height: 44px; border-radius: 50%; background: var(--bgreen); color: #fff; font-family: var(--font-head); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.step-text { font-size: 1.15rem; line-height: 1.6; color: var(--text); padding-top: .25rem; max-width: 60ch; transition: opacity .2s; }
.step-tick { display: flex; justify-content: flex-end; align-items: center; height: 44px; }
.step-tick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.step-tick label { width: 42px; height: 42px; border: 3px solid var(--bgreen); border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; }
.step-tick svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.step-tick input:checked + label { background: var(--bgreen); }
.step-tick input:checked + label svg { opacity: 1; }
.step-tick input:focus-visible + label { outline: 3px solid var(--orange); outline-offset: 3px; }
.meal-steps li.done .step-text { opacity: .5; text-decoration: line-through; text-decoration-thickness: 2px; }
.meal-steps li.done .step-num { background: #cfe9d6; color: var(--bgreen-dark); }
@media (max-width: 520px) { .meal-steps li { grid-template-columns: 38px 1fr 46px; gap: .7rem; } .step-num { width: 38px; height: 38px; font-size: 1.1rem; } .meal-beryl { flex-direction: column; text-align: center; } }
.tip-box { background: #fff6d1; border-left: 4px solid var(--amber); border-radius: 8px; padding: .7rem 1rem; margin: 1rem 0; font-size: .95rem; color: var(--text); }
.meal-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.act-note { color: var(--bgreen-dark); }

/* ---- a word from Beryl ---- */
.beryl-word { display: grid; grid-template-columns: 120px 1fr; gap: 1.2rem; align-items: start; }
.beryl-word img { width: 120px; filter: drop-shadow(0 3px 10px rgba(40,47,57,.25)); }
.beryl-word h2 { font-family: var(--font-head); color: var(--bgreen-dark); font-size: 1.35rem; margin: 0 0 .5rem; }
.beryl-word p { font-size: .95rem; color: var(--text-mid); margin: 0 0 .5rem; }
.beryl-word p:last-child { color: var(--ink); font-weight: 700; font-size: 1rem; }
@media (max-width: 560px) { .beryl-word { grid-template-columns: 1fr; text-align: center; } .beryl-word img { margin: 0 auto; } }

@media print {
  .beryl-page { background: #fff; color: #000; }
  body.print-one .beryl-hero, body.print-one .beryl-panel, body.print-one .beryl-word, body.print-one .beryl-state, body.print-one .bank-list, body.print-one .results-head, body.print-one .results-hero, body.print-one .safety-box { display: none !important; }
  body.print-one .meal-card:not(.printing) { display: none !important; }
  .meal-card { background: #fff; border: 1px solid #ccc; box-shadow: none; animation: none; }
  .meal-name, .step-text, .meal-ings, .meal-detail h3, .tip-box, .meal-meta, .meal-progress, .meal-beryl p { color: #000 !important; }
  .meal-detail[hidden] { display: block !important; }
  .meal-actions, .tap-hint, .act-note, .results-strip { display: none !important; }
  .beryl-grid { display: block; }
  .meal-beryl { background: none; padding: 0; }
  .step-tick label { background: #fff !important; }
  .step-tick input:checked + label svg { stroke: #000; }
  .meal-steps li.done .step-num { background: #ddd; color: #000; }
}