/* ============================================================
   THE SCAN PAGES -- what a scanned dish opens into, and the version card on the recipe it becomes.

   Step 1 "Check what we read" (/scan/{id}) and step 2 "Pick a version" (/scan/{id}/versions) are
   pages of their own (frontend/scan.blade.php, drawn by js/scan-studio.js); the recipe page is
   step 3, and .rp-version at the bottom is the card it shows for a version the visitor picked.
   Built on tokens.css / brand.css: deep green for the main action, fresh green for what is
   selected, Fraunces for names and numbers, Plus Jakarta Sans for everything else.
   ============================================================ */

.ss-page{
  --ss-deep:#0f4c3f;
  --ss-green:#3E7C36;
  --ss-fresh:#4F9B44;
  --ss-tint:#eef6ea;
  --ss-line:#e3eadf;
  --ss-ink:#141C1A;
  --ss-ink-2:#546056;
  --ss-ink-3:#7C887E;
  --ss-blue:#eaf2fa;
  --ss-amber-bg:#fff7e2;
  --ss-amber-line:#efd99a;
  --ss-amber-ink:#7a5a05;
  position:relative;
  min-height:60vh;
  color:var(--ss-ink);
  font-family:var(--font-body);
}
.ss-page [hidden]{ display:none !important; }
.ss-wrap{ max-width:1180px; }

/* ---------- Top: where you are ---------- */
.ss-head{ display:flex; align-items:center; justify-content:space-between; gap:16px 24px; padding:22px 0 6px; }
.ss-back{ display:inline-flex; align-items:center; gap:6px; color:var(--ss-ink-2); font-size:13.5px; font-weight:600; text-decoration:none; }
.ss-back:hover{ color:var(--ss-deep); }
.ss-steps{ display:flex; align-items:center; gap:0; margin:0; padding:0; list-style:none; }
.ss-step{ display:flex; align-items:center; gap:9px; color:var(--ss-ink-3); font-size:12.5px; font-weight:700; white-space:nowrap; }
.ss-step + .ss-step::before{ content:""; width:28px; height:2px; margin:0 12px; border-radius:2px; background:var(--ss-line); }
.ss-step-n{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:#e6ede2; color:var(--ss-ink-2); font-size:12px; font-weight:800; }
.ss-step.is-active{ color:var(--ss-deep); }
.ss-step.is-active .ss-step-n{ background:var(--ss-deep); color:#fff; }
.ss-step.is-done{ color:var(--ss-green); }
.ss-step.is-done .ss-step-n{ background:var(--ss-fresh); color:#fff; }
.ss-step.is-done + .ss-step::before{ background:var(--ss-fresh); }

.ss-body{ padding:14px 0 44px; outline:none; }

/* ---------- Two columns: the dish on the left, the work on the right ---------- */
.ss-grid{ display:grid; grid-template-columns:minmax(250px, 350px) minmax(0, 1fr); gap:48px; align-items:start; }
.ss-side{ position:sticky; top:92px; display:flex; flex-direction:column; gap:14px; }

.ss-media{ position:relative; margin:0; aspect-ratio:4 / 5; overflow:hidden; border-radius:20px; background:#e4edd8; box-shadow:0 18px 40px -22px rgba(15,76,63,.45); }
.ss-media img{ display:block; width:100%; height:100%; object-fit:cover; }
.ss-badge{ position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:var(--r-pill); background:rgba(255,255,255,.94); color:var(--ss-deep); font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; box-shadow:0 2px 8px rgba(15,76,63,.16); }
.ss-media--link{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:24px; background:linear-gradient(155deg, #0f4c3f 0%, #1a6653 58%, #2b8a6b 100%); color:#fff; text-align:center; }
.ss-media--link b{ font:600 22px/1.15 var(--font-display); }
.ss-media--link > span:last-child{ font-size:13px; opacity:.8; }
.ss-media-ic{ display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; margin-bottom:6px; border-radius:50%; background:rgba(255,255,255,.14); }

.ss-saved{ display:flex; align-items:center; gap:9px; padding:11px 13px; border-radius:12px; background:#eaf6e6; color:#2c5e26; font-size:13px; font-weight:600; line-height:1.3; }
.ss-saved-ic{ display:inline-flex; flex:0 0 auto; color:var(--ss-fresh); }
.ss-saved button, .ss-saved a{ flex:0 0 auto; margin-left:auto; padding:0; border:0; background:none; color:var(--ss-deep); font:700 13px/1 var(--font-body); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.ss-saved.is-guest, .ss-saved.is-off{ background:#fff; border:1px solid var(--ss-line); color:var(--ss-ink-2); }

/* ---------- The dish ---------- */
.ss-eyebrow{ margin:0 0 8px; color:var(--ss-green); font:800 11px/1.2 var(--font-body); letter-spacing:.14em; text-transform:uppercase; }
.ss-eyebrow--gap{ margin-top:26px; }
.ss-title{ margin:0 0 12px; color:var(--ss-deep); font:600 clamp(30px, 3.6vw, 44px)/1.1 var(--font-display); letter-spacing:-.012em; text-wrap:balance; outline:none; }
.ss-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.ss-chips:empty{ display:none; }
.ss-chip{ padding:5px 11px; border-radius:var(--r-pill); background:var(--ss-tint); color:var(--ss-green); font-size:12px; font-weight:700; }
.ss-meta{ margin:0 0 4px; color:var(--ss-ink-3); font:600 12px/1.4 var(--font-mono); letter-spacing:.06em; }
.ss-again{ display:inline-flex; align-items:center; gap:3px; margin:10px 0 0; color:var(--ss-ink-3); font-size:13px; text-decoration:none; }
.ss-again b{ color:var(--ss-deep); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.ss-again:hover b{ color:var(--ss-green); }
.ss-note{ margin:14px 0 0; padding:11px 14px; border-radius:12px; background:#eef4fb; color:#2a4f78; font-size:13px; line-height:1.5; }

/* ---------- Calories and portion ---------- */
.ss-cal{ margin:22px 0 12px; padding:20px 22px 22px; border-radius:20px; background:var(--ss-blue); }
.ss-cal-range{ color:var(--navy-800); font-size:16px; }
.ss-cal-range b{ font:700 clamp(30px, 3.6vw, 42px)/1 var(--font-display); letter-spacing:-.01em; }
.ss-cal-range span{ color:var(--ss-ink-2); font-weight:600; }
.ss-cal-note{ max-width:46ch; margin:8px 0 16px; color:var(--ss-ink-2); font-size:13px; line-height:1.5; }
.ss-cal-note:last-child{ margin-bottom:0; }
.ss-seg{ display:inline-flex; gap:2px; padding:4px; border-radius:var(--r-pill); background:#fff; box-shadow:0 1px 3px rgba(18,32,58,.08); }
.ss-seg button{ padding:8px 18px; border:0; border-radius:var(--r-pill); background:transparent; color:var(--ss-ink-2); font:700 13px/1 var(--font-body); cursor:pointer; transition:background .15s, color .15s; }
.ss-seg button:hover{ color:var(--ss-deep); }
.ss-seg button[aria-checked="true"]{ background:var(--ss-deep); color:#fff; }

.ss-macros{ display:grid; grid-template-columns:repeat(3, 1fr); overflow:hidden; border:1px solid var(--ss-line); border-radius:16px; background:#fff; }
.ss-macro{ padding:14px 8px 13px; text-align:center; }
.ss-macro + .ss-macro{ border-left:1px solid var(--ss-line); }
.ss-macro b{ display:block; font:700 24px/1.1 var(--font-display); color:var(--ss-ink); font-variant-numeric:tabular-nums; }
.ss-macro b i, .ss-nut b i{ margin-left:1px; color:var(--ss-ink-2); font:600 13px/1 var(--font-body); font-style:normal; }
.ss-macro span, .ss-nut span{ display:block; margin-top:5px; color:var(--ss-ink-3); font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }

.ss-more{ display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:10px; padding:11px 15px; border:0; border-radius:12px; background:var(--ss-tint); color:var(--ss-green); font:700 13px/1 var(--font-body); cursor:pointer; }
.ss-more:hover{ background:#e3f0dd; }
.ss-more svg{ transition:transform .18s; transform:rotate(90deg); }
.ss-more[aria-expanded="true"] svg{ transform:rotate(-90deg); }
.ss-nutri{ display:grid; grid-template-columns:repeat(auto-fill, minmax(112px, 1fr)); gap:8px; margin-top:10px; }
.ss-nut{ padding:11px 12px; border:1px solid var(--ss-line); border-radius:12px; background:#fff; }
.ss-nut b{ font:700 17px/1.1 var(--font-display); font-variant-numeric:tabular-nums; }

/* ---------- Ingredients ---------- */
.ss-ings-head{ display:flex; align-items:center; justify-content:space-between; margin:30px 0 10px; }
.ss-ings-head .ss-eyebrow{ margin:0; }
.ss-count{ min-width:26px; padding:3px 9px; border-radius:var(--r-pill); background:#e6ede2; color:var(--ss-ink-2); font-size:12px; font-weight:800; text-align:center; }
.ss-ings{ margin:0; padding:0; list-style:none; overflow:hidden; border:1px solid var(--ss-line); border-radius:16px; background:#fff; }
.ss-ing{ display:flex; align-items:center; gap:12px; padding:9px 12px 9px 14px; background:#fff; transition:opacity .16s, transform .16s; }
.ss-ing + .ss-ing{ border-top:1px solid var(--ss-line); }
.ss-ing.is-leaving{ opacity:0; transform:translateX(10px); }
.ss-ing-ic{ display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; background:#f3f7f1; font-size:18px; line-height:1; }
.ss-ing-main{ display:flex; flex:1 1 auto; flex-direction:column; min-width:0; }
.ss-ing-name, .ss-ing-amt{ width:100%; padding:6px 8px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--ss-ink); font:600 14px/1.3 var(--font-body); text-overflow:ellipsis; }
.ss-ing-amt{ flex:0 0 190px; width:190px; color:var(--ss-ink-2); font-weight:500; text-align:right; }
.ss-ing-name:hover, .ss-ing-amt:hover{ background:#f5f8f4; }
.ss-ing-name:focus, .ss-ing-amt:focus{ border-color:rgba(79,155,68,.55); background:#fff; outline:none; box-shadow:0 0 0 3px rgba(79,155,68,.14); }
.ss-ing-name::placeholder, .ss-ing-amt::placeholder{ color:var(--ss-ink-3); font-weight:500; }
.ss-ing-x{ display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; width:30px; height:30px; border:0; border-radius:50%; background:transparent; color:var(--ss-ink-3); cursor:pointer; }
.ss-ing-x:hover{ background:#fbe9e7; color:#b3372b; }
.ss-ing.is-unsure{ background:var(--ss-amber-bg); box-shadow:inset 3px 0 0 var(--ss-amber-line); }
.ss-ing.is-unsure .ss-ing-ic{ background:#ffedb8; }
.ss-ing-note{ padding:0 8px; color:var(--ss-amber-ink); font-size:12px; line-height:1.4; }
.ss-ing-note.is-quiet{ color:var(--ss-ink-3); }
.ss-guess{ margin:0 0 10px; padding:10px 14px; border-radius:12px; background:var(--ss-amber-bg); color:var(--ss-amber-ink); font-size:13px; line-height:1.5; }
.ss-fix{ flex:0 0 auto; padding:7px 15px; border:0; border-radius:var(--r-pill); background:var(--ss-deep); color:#fff; font:700 12px/1 var(--font-body); cursor:pointer; }
.ss-fix:hover{ background:#0b3a30; }
.ss-add{ display:inline-flex; align-items:center; gap:7px; margin-top:12px; padding:10px 16px; border:1.5px dashed #b9cdb2; border-radius:12px; background:transparent; color:var(--ss-green); font:700 13px/1 var(--font-body); cursor:pointer; }
.ss-add:hover{ background:var(--ss-tint); border-color:var(--ss-fresh); }

/* ---------- Step 2: the versions ---------- */
.ss-versions{ display:grid; gap:10px; }
.ss-ver-item{ border:1.5px solid var(--ss-line); border-radius:16px; background:#fff; transition:border-color .15s, background .15s; }
.ss-ver-item:hover{ border-color:#c3d6bb; }
.ss-ver-item.is-on{ border-color:var(--ss-fresh); background:var(--ss-tint); }
.ss-ver-item.is-off{ background:#f7f8f6; }
.ss-ver-item.is-off:hover{ border-color:var(--ss-line); }
.ss-ver{ position:relative; display:flex; align-items:center; gap:14px; margin:0; padding:14px 18px; border-radius:16px; cursor:pointer; }
.ss-ver input{ position:absolute; opacity:0; width:1px; height:1px; }
.ss-radio{ flex:0 0 20px; width:20px; height:20px; border:2px solid #b9c7b4; border-radius:50%; background:#fff; transition:border-color .15s, background .15s, box-shadow .15s; }
.ss-ver-item.is-on .ss-radio{ border-color:var(--ss-fresh); background:var(--ss-fresh); box-shadow:inset 0 0 0 3.5px #fff; }
.ss-ver input:focus-visible ~ .ss-radio{ outline:3px solid rgba(79,155,68,.35); outline-offset:2px; }
.ss-ver-item.is-off .ss-ver{ cursor:not-allowed; }
.ss-ver-item.is-off .ss-ver-body{ opacity:.55; }
.ss-ver-body{ display:flex; flex:1 1 auto; flex-direction:column; gap:3px; min-width:0; }
.ss-ver-body b{ font-size:15.5px; font-weight:700; color:var(--ss-ink); }
.ss-ver-body small{ color:var(--ss-ink-2); font:500 13px/1.3 var(--font-body); }
.ss-ver-more{ padding:0 18px 16px 52px; }
.ss-pill{ flex:0 0 auto; padding:5px 12px; border:1px solid #cfe3c8; border-radius:var(--r-pill); background:#fff; color:var(--ss-green); font-size:11.5px; font-weight:800; }
.ss-swaps-line{ margin:0; color:var(--ss-ink-2); font-size:13.5px; line-height:1.55; }
.ss-ver-more .ss-eyebrow{ margin-bottom:9px; }
.ss-swaps{ display:grid; gap:7px; margin:0; padding:0; list-style:none; }
.ss-swaps li{ display:flex; align-items:center; gap:10px; padding:9px 13px; border-radius:11px; background:#fff; font-size:13.5px; }
.ss-swaps li span{ color:var(--ss-ink-3); text-decoration:line-through; text-decoration-color:rgba(124,136,126,.55); }
.ss-swaps li svg{ flex:0 0 auto; color:var(--ss-green); }
.ss-swaps li b{ color:var(--ss-deep); }

/* ---------- The bar that stays with you: the way forward ---------- */
.ss-dock{ position:sticky; bottom:0; z-index:40; border-top:1px solid var(--ss-line); background:#fff; box-shadow:0 -14px 30px -22px rgba(15,76,63,.35); }
.ss-alert{ margin:0; padding:11px 24px; background:#fdeceb; color:#8a2a22; font-size:13.5px; line-height:1.45; text-align:center; }
.ss-foot .container{ max-width:1180px; }
.ss-foot-in{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 0 16px; }
.ss-foot-note{ margin:0; color:var(--ss-ink-3); font-size:12.5px; line-height:1.4; }
.ss-foot-actions{ display:flex; align-items:center; gap:10px; }
.ss-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; padding:0 24px; border:1.5px solid transparent; border-radius:var(--r-pill); font:700 14px/1 var(--font-body); text-decoration:none; white-space:nowrap; cursor:pointer; transition:background .15s, border-color .15s; }
.ss-btn:focus-visible, .ss-fix:focus-visible, .ss-add:focus-visible, .ss-more:focus-visible, .ss-seg button:focus-visible, .ss-back:focus-visible{ outline:3px solid rgba(79,155,68,.4); outline-offset:2px; }
.ss-btn-primary{ background:var(--ss-deep); color:#fff; }
.ss-btn-primary:hover{ background:#0b3a30; color:#fff; }
.ss-btn-ghost{ border-color:var(--ss-line); background:#fff; color:var(--ss-deep); }
.ss-btn-ghost:hover{ background:var(--ss-tint); color:var(--ss-deep); }

/* ---------- Working ---------- */
.ss-busy{ position:fixed; inset:0; z-index:1100; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:24px; background:rgba(255,255,255,.93); text-align:center; backdrop-filter:blur(3px); }
.ss-busy strong{ color:var(--ss-deep); font:600 24px/1.2 var(--font-display); }
.ss-busy span:last-child{ max-width:360px; color:var(--ss-ink-2); font-size:14px; line-height:1.5; }
.ss-spinner{ width:36px; height:36px; margin-bottom:6px; border:3px solid rgba(15,76,63,.16); border-top-color:var(--ss-deep); border-radius:50%; animation:ss-spin .8s linear infinite; }
@keyframes ss-spin{ to{ transform:rotate(360deg); } }

/* ---------- A scan that is no longer there ---------- */
.ss-expired{ max-width:520px; margin:72px auto 88px; text-align:center; }
.ss-expired h1{ margin:0 0 12px; color:var(--ss-deep); font:600 clamp(28px, 4vw, 38px)/1.15 var(--font-display); }
.ss-expired p{ margin:0 0 26px; color:var(--ss-ink-2); font-size:15px; line-height:1.6; }

/* ---------- Smaller screens ---------- */
@media (max-width:991.98px){
  .ss-grid{ grid-template-columns:1fr; gap:22px; }
  .ss-side{ position:static; }
  .ss-media{ aspect-ratio:16 / 10; }
  .ss-head{ padding-top:16px; }
}
@media (max-width:575.98px){
  .ss-head{ flex-direction:column; align-items:flex-start; gap:12px; }
  .ss-step:not(.is-active) .ss-step-t{ display:none; }
  .ss-step + .ss-step::before{ width:14px; margin:0 8px; }
  .ss-foot-in{ flex-direction:column-reverse; align-items:stretch; gap:10px; padding:12px 0 14px; }
  .ss-foot-note{ text-align:center; }
  .ss-foot-actions{ width:100%; }
  .ss-foot-actions .ss-btn{ flex:1 1 0; padding:0 12px; }
  .ss-ing{ flex-wrap:wrap; row-gap:0; }
  .ss-ing-main{ flex:1 1 calc(100% - 100px); }
  .ss-ing-amt{ order:5; flex:1 1 100%; width:100%; margin-left:48px; text-align:left; }
  .ss-cal-range b{ font-size:30px; }
}
@media (prefers-reduced-motion:reduce){
  .ss-spinner{ animation-duration:1.6s; }
}

/* ============================================================
   THE RECIPE PAGE, for a dish the visitor scanned and picked a version of.
   Says which version this is, what changed against the dish as shown, and how to switch.
   ============================================================ */
.rp-version{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr) auto; gap:18px 30px; align-items:center; margin:18px 0 22px; padding:20px 24px; border:1px solid #d5e5cf; border-radius:20px; background:linear-gradient(180deg, #f3f9ef 0%, #fff 100%); }
.rp-version-chip{ display:inline-flex; align-items:center; gap:7px; margin-bottom:10px; padding:6px 13px; border-radius:var(--r-pill); background:#0f4c3f; color:#fff; font:800 11px/1 var(--font-body); letter-spacing:.12em; text-transform:uppercase; }
.rp-version-now{ margin:0; color:#141C1A; font:700 clamp(22px, 2.6vw, 30px)/1.1 var(--font-display); font-variant-numeric:tabular-nums; }
.rp-version-now span{ color:#546056; font:600 15px/1 var(--font-body); }
.rp-version-was{ margin:7px 0 0; color:#7C887E; font-size:13px; }
.rp-version-cap{ margin:0 0 9px; color:#3E7C36; font:800 11px/1.2 var(--font-body); letter-spacing:.14em; text-transform:uppercase; }
.rp-version-swaps{ display:grid; gap:7px; margin:0; padding:0; list-style:none; }
.rp-version-swaps li{ display:flex; align-items:center; gap:9px; font-size:14px; color:#141C1A; }
.rp-version-swaps li svg{ flex:0 0 auto; color:#3E7C36; }
.rp-version-swaps li span{ color:#7C887E; text-decoration:line-through; text-decoration-color:rgba(124,136,126,.55); }
.rp-version-swaps li b{ color:#0f4c3f; }
.rp-version-plain{ margin:0; color:#546056; font-size:14px; line-height:1.55; }
.rp-version-switch{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 22px; border:1.5px solid #0f4c3f; border-radius:var(--r-pill); background:#fff; color:#0f4c3f; font:700 14px/1 var(--font-body); text-decoration:none; white-space:nowrap; cursor:pointer; }
.rp-version-switch:hover{ background:#0f4c3f; color:#fff; }
@media (max-width:991.98px){
  .rp-version{ grid-template-columns:1fr; gap:16px; padding:18px; }
}