/* Jam Making Calculator - "preserving label" identity.
   App-scoped only: global tokens (header/footer) are left untouched. */
:root {
  --jam-deep:  #5e0f29;   /* hero band, display headings */
  --jam:       #7a0f2c;   /* primary jam red - readable on white */
  --jam-bright:#b8214a;
  --gold:      #b8923c;   /* lid / label rule */
  --paper:     #f6edd6;   /* label paper - thematic, not a body bg */
  --cream:     #fdf2ea;   /* hero text */

  /* alias the flavour tokens so shared patterns recolour to jam */
  --fl-text:   #7a0f2c;
  --fl-bg:     #fbe9ef;
  --fl-border: #ecb0c5;
  --fl-icon-bg:#fbe9ef;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;

  /* High-end: spring easing + soft ambient / machined-bezel shadow stacks */
  --ease-fluid: cubic-bezier(0.32, 0.72, 0, 1);
  --bezel: /* top sheen + hairline core ring + diffused ambient float */
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px rgba(94,15,41,.04),
    0 1px 2px rgba(94,15,41,.06),
    0 18px 40px -16px rgba(94,15,41,.22),
    0 6px 16px -10px rgba(94,15,41,.16);
  --bezel-lift:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(94,15,41,.05),
    0 2px 4px rgba(94,15,41,.08),
    0 30px 60px -18px rgba(94,15,41,.30),
    0 10px 24px -12px rgba(94,15,41,.20);
}

/* On-theme film grain - fixed, pointer-events-none, perf-safe */
.app-main { position: relative; }
.app-main::before {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.app-main > * { position: relative; z-index: 2; }

/* ── Hero: a committed deep-berry band, serif title ──────── */
.app-hero { border-bottom: 2px solid var(--gold); padding: 1.6rem 1.6rem 1.45rem; }
.app-hero--sakura {
  background:
    radial-gradient(120% 140% at 85% -20%, rgba(184,33,74,.45), transparent 60%),
    var(--jam-deep);
}
.app-hero__inner { margin: 0 auto; }
.app-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.5vw, 2.9rem); font-weight: 600;
  color: var(--cream); letter-spacing: -.015em; line-height: 1.05;
  margin: 0 0 .55rem; text-wrap: balance;
}
.app-hero__desc { font-size: .92rem; color: rgba(253,242,234,.82); max-width: 600px; line-height: 1.65; margin: 0 0 1rem; }
.app-hero__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.hero-chip {
  display: inline-flex; align-items: center; gap: .15rem;
  padding: .24rem .7rem; font-size: .72rem; font-weight: 600;
  background: rgba(255,255,255,.07); border: 1px solid rgba(253,242,234,.35);
  border-radius: var(--radius-full); color: var(--cream); white-space: nowrap;
}

/* ── Layout ──────────────────────────────────────────────── */
.app-layout { display: grid; grid-template-columns: 320px 1fr; gap: 1.6rem; padding: 1.6rem 0 3rem; align-items: start; }
@media (max-width: 760px) { .app-layout { grid-template-columns: 1fr; } }

.panel {
  background: var(--color-surface); border: none;
  border-radius: var(--radius-2xl); padding: 1.5rem; box-shadow: var(--bezel);
  display: flex; flex-direction: column; gap: 1.15rem;
}
.panel-title { font-size: var(--text-sm); font-weight: 700; color: var(--color-text-primary); margin: 0 0 .4rem; }

.mode-toggle { display: flex; gap: .35rem; }
.mode-toggle button {
  flex: 1; padding: .4rem; font-size: var(--text-xs); font-weight: 700;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-bg); color: var(--color-text-secondary); cursor: pointer;
}
.mode-toggle button.active { background: var(--jam); border-color: var(--jam); color: var(--cream); }

.field { display: flex; flex-direction: column; gap: .3rem; }
.field label { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-secondary); }
.field input[type="number"], .field select {
  width: 100%; padding: .5rem .65rem; border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md); font-size: var(--text-sm);
  background: var(--color-bg); color: var(--color-text-primary); box-sizing: border-box;
}
.field input:focus, .field select:focus { outline: 2px solid var(--jam); outline-offset: 1px; border-color: var(--jam); }

.slider-row { display: flex; align-items: center; gap: .75rem; }
.slider-row input[type="range"] { flex: 1; accent-color: var(--jam); }
.slider-val { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--jam); min-width: 2.8rem; text-align: right; }
.hint { font-size: var(--text-xs); color: var(--color-text-muted); margin: .4rem 0 0; }

.err-msg { color: var(--color-danger); font-size: var(--text-xs); padding: .4rem .7rem; background: var(--color-danger-subtle); border-radius: var(--radius-md); border: 1px solid #f0a8ba; }

/* ── Results ─────────────────────────────────────────────── */
.results { display: flex; flex-direction: column; gap: 1.4rem; }

/* The jar - the centrepiece floats highest (machined double-bezel) */
.jar-card { background: var(--color-surface); border: none; border-radius: var(--radius-2xl); padding: 1.9rem 1.5rem 1.5rem; box-shadow: var(--bezel-lift); text-align: center; }
.jar-wrap { position: relative; width: 168px; margin: 0 auto; }
.jar { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgba(94,15,41,.18)); }
.jam-fill { animation: jam-rise .9s var(--ease-out) both; }
@keyframes jam-rise { from { transform: translateY(104px); } to { transform: translateY(0); } }
.jar-label {
  position: absolute; left: 50%; top: 61%; transform: translate(-50%,-50%);
  width: 66%; background: #fbf4e6; border: 1px solid rgba(94,15,41,.22);
  border-radius: 3px; padding: .4rem .35rem .45rem; box-shadow: 0 1px 3px rgba(94,15,41,.18); rotate: -1.2deg;
}
.jar-label__fruit { display: block; font-family: var(--font-display); font-style: italic; font-size: .98rem; font-weight: 600; color: var(--jam-deep); line-height: 1.1; }
.jar-label__rule { display: block; height: 1px; background: var(--gold); margin: .25rem 18% .2rem; }
.jar-label__yield { display: block; font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); }
.jar-caption { font-size: .86rem; color: var(--color-text-secondary); line-height: 1.55; margin: 1.05rem auto 0; max-width: 34ch; }
.jar-caption strong { color: var(--jam); font-weight: 700; }

/* The recipe: amount-led ingredient list */
.recipe { background: var(--color-surface); border: none; border-radius: var(--radius-2xl); padding: 1.4rem 1.6rem 1.5rem; box-shadow: var(--bezel); }
.recipe__title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--jam-deep); margin: 0 0 .7rem; }
.recipe__list { list-style: none; margin: 0; padding: 0; }
.recipe__row { display: grid; grid-template-columns: 5.5rem 1fr; align-items: baseline; gap: 1rem; padding: .55rem 0; border-top: 1px dashed var(--fl-border); }
.recipe__row:first-child { border-top: none; }
.recipe__amt { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--jam); letter-spacing: -.02em; text-align: right; white-space: nowrap; }
.recipe__name { font-size: var(--text-sm); color: var(--color-text-secondary); }
.recipe__note { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: .15rem; }
.recipe__row--none .recipe__amt { font-family: var(--font-sans); font-size: .9rem; font-weight: 700; color: var(--color-text-muted); }

/* Cook to: a vintage preserve label */
.cook {
  background: var(--paper); border: 1.5px solid var(--gold); border-radius: 12px;
  padding: 1.2rem 1.35rem 1.35rem; text-align: center;
  box-shadow:
    inset 0 0 0 3px var(--paper), inset 0 0 0 4px rgba(184,146,60,.45),
    0 18px 40px -16px rgba(94,15,41,.20), 0 6px 16px -10px rgba(94,15,41,.14);
}
.cook__lead { font-family: var(--font-display); font-style: italic; font-size: .95rem; color: var(--jam-deep); margin: 0 0 .7rem; }
.cook__nums { display: flex; align-items: center; justify-content: center; gap: 1.6rem; }
.cook__num { display: flex; flex-direction: column; align-items: center; gap: .12rem; }
.cook__big { font-family: var(--font-display); font-size: clamp(1.7rem, 5.5vw, 2.4rem); font-weight: 600; color: var(--jam-deep); letter-spacing: -.02em; line-height: 1; }
.cook__alt { font-size: var(--text-sm); font-weight: 700; color: var(--jam); }
.cook__lbl { font-size: var(--text-xs); color: #8a6a35; margin-top: .25rem; }
.cook__div { width: 1.5px; align-self: stretch; background: rgba(184,146,60,.5); margin: .25rem 0; }

.shelf-badge { display: inline-block; font-size: .58rem; font-weight: 700; padding: .1rem .45rem; border-radius: var(--radius-full); vertical-align: middle; letter-spacing: .02em; }
.shelf-badge.ok { background: var(--color-success-subtle); color: var(--color-success); }
.shelf-badge.warn { background: var(--color-warning-subtle); color: var(--color-warning); }

/* ── Saved recipes ───────────────────────────────────────── */
.saved-section { margin-top: 1.25rem; }
.saved-section-title { font-size: var(--text-sm); font-weight: 700; color: var(--color-text-primary); margin-bottom: .5rem; }
.saved-item { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: .35rem; font-size: var(--text-xs); }
.saved-name { font-weight: 700; color: var(--jam); flex: 1 1 auto; }
.saved-detail { color: var(--color-text-muted); flex: 2 1 auto; }
.btn-load { padding: .2rem .55rem; font-size: .7rem; font-weight: 700; background: var(--fl-bg); border: 1.5px solid var(--fl-border); border-radius: var(--radius-full); color: var(--jam); cursor: pointer; }
.btn-del { padding: .2rem .45rem; font-size: .7rem; font-weight: 700; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-text-muted); cursor: pointer; }
.btn-save {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  font-size: var(--text-sm); font-weight: 700; padding: .6rem .75rem .6rem 1.1rem;
  background: var(--jam); border: none; border-radius: var(--radius-full);
  color: var(--cream); cursor: pointer; margin-top: .5rem; width: 100%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 20px -8px rgba(94,15,41,.55);
}
.btn-save__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: var(--radius-full);
  background: rgba(255,255,255,.16); font-size: .9rem; line-height: 1;
  transition: transform var(--duration-base) var(--ease-fluid), background var(--duration-base) var(--ease-fluid);
}
.btn-save:hover .btn-save__ico { transform: translate(2px,-1px) scale(1.06); background: rgba(255,255,255,.26); }
.saved-empty { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; }

/* ── Interaction states ──────────────────────────────────── */
.mode-toggle button, .btn-save, .btn-load, .btn-del, .saved-item {
  transition: background var(--duration-base) var(--ease-fluid), border-color var(--duration-base) var(--ease-fluid),
              transform var(--duration-base) var(--ease-fluid), filter var(--duration-base) var(--ease-fluid), box-shadow var(--duration-base) var(--ease-fluid);
}
.btn-save:hover { background: var(--jam-deep); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 12px 26px -8px rgba(94,15,41,.6); }
.btn-load:hover { filter: brightness(.96); }
.btn-save:active { transform: scale(.985); }
.btn-load:active, .mode-toggle button:active { transform: translateY(1px); }
.mode-toggle button:not(.active):hover { border-color: var(--jam); color: var(--jam); }
.btn-del:hover { border-color: var(--color-danger); color: var(--color-danger); }
.saved-item:hover { border-color: var(--fl-border); }
.btn-save:focus-visible, .btn-load:focus-visible, .btn-del:focus-visible, .mode-toggle button:focus-visible { outline: 2px solid var(--jam); outline-offset: 2px; }

/* Scroll entry: heavy fade-up + blur. Default is visible; JS opts in. */
.results > section { transition: opacity .8s var(--ease-fluid), transform .8s var(--ease-fluid), filter .8s var(--ease-fluid); }
.results > section.js-reveal { opacity: 0; transform: translateY(26px); filter: blur(7px); }
.results > section.js-reveal.is-in { opacity: 1; transform: none; filter: blur(0); }

@media (prefers-reduced-motion: reduce) {
  *, .jam-fill { transition: none !important; animation: none !important; }
  .results > section.js-reveal { opacity: 1; transform: none; filter: none; }
}

/* ── Learn more ──────────────────────────────────────────── */
.learn-more { max-width: 820px; margin: 1.5rem auto 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 1.25rem 1.6rem; box-shadow: var(--shadow-sm); }
.learn-more-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--jam-deep); margin: 0 0 .75rem; }
.learn-more h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--color-text-primary); margin: 1.2rem 0 .5rem; }
.learn-more p { font-size: .9rem; line-height: 1.7; color: var(--color-text-secondary); margin: 0 0 .75rem; max-width: 70ch; }
.learn-more a { color: var(--jam); }
.learn-more .faq-item { margin-bottom: .85rem; }
.learn-more .faq-q { font-size: .9rem; font-weight: 700; color: var(--color-text-primary); margin: 0 0 .25rem; }
.learn-more-meta { font-size: .72rem; color: var(--color-text-muted); margin-top: 1.1rem; font-style: italic; }