/* =========================================================================
   Sagi Dahan — מחשבון הקלוריות (/calc)
   Extends the landing page's design system. Every colour, radius and easing
   comes from assets/styles.css; nothing new is invented here.

   Two rules govern this file:
   1. The page is one question at a time, so the layout is a single column
      that never needs to scroll on a phone until the result screen.
   2. The numbers are the hero. They use the same stencil numeral face the
      landing page reserves for stats, and nothing else on the page competes
      with them for weight.
   ========================================================================= */

.calc-body { min-height: 100dvh; display: flex; flex-direction: column; }
.calc-main { flex: 1; display: flex; flex-direction: column; padding: 20px 0 40px; }
.calc-wrap { width: min(520px, 92vw); margin: 0 auto; flex: 1; display: flex; flex-direction: column; }

/* -------------------------------------------------------------------------
   The journey bar: 45 on the right, 66 on the left, a plate that travels as
   the questionnaire advances. Same story the hero tells, used here as the
   progress indicator so the visitor is walking Sagi's own line.
   ------------------------------------------------------------------------- */
.journey { display: flex; align-items: center; gap: 10px; margin: 4px 0 26px; }
.journey__kg {
  font-family: 'Heebo', system-ui, sans-serif;
  font-weight: 800; font-size: 1.2rem; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums;
}
.journey__kg--end { color: var(--at); }
.journey__track { flex: 1; height: 5px; background: var(--card); border-radius: 999px; position: relative; box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
.journey__fill {
  position: absolute; inset: 0 0 0 auto; right: 0; width: 0;
  background: linear-gradient(270deg, var(--at), var(--a)); border-radius: 999px;
  transition: width var(--dur-ecc) var(--ease-ecc);
}
.journey__plate {
  position: absolute; top: -6px; right: 0; width: 9px; height: 17px; border-radius: 4px;
  background: linear-gradient(180deg, #fff, var(--at) 45%, var(--a));
  border: 1px solid rgba(255,255,255,.7);
  transition: right var(--dur-ecc) var(--ease-ecc);
}

/* -------------------------------------------------------------------------
   Screens. Forward moves are driven (concentric), backward moves are
   controlled (eccentric) — the page's two easings, used by direction.
   ------------------------------------------------------------------------- */
.screen { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.screen[hidden] { display: none; }
.screen--result { justify-content: flex-start; }
@media (prefers-reduced-motion: no-preference) {
  .screen--fwd { animation: calc-fwd var(--dur-con) var(--ease-con); }
  .screen--back { animation: calc-back var(--dur-ecc) var(--ease-ecc); }
}
@keyframes calc-fwd { from { opacity: 0; transform: translateX(-22px); } }
@keyframes calc-back { from { opacity: 0; transform: translateX(22px); } }

.qnum {
  align-self: flex-start; display: inline-block; margin-bottom: 12px;
  font-family: 'Heebo', sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .16em;
  color: var(--at);
}
.q {
  font-family: 'Heebo', system-ui, sans-serif; font-weight: 900;
  font-size: clamp(1.9rem, 6.5vw, 2.6rem); line-height: 1.1; margin: 0 0 10px; color: var(--text);
}
.q .accent { color: var(--a); }
.calc-hint { color: var(--muted); font-size: .95rem; line-height: 1.6; margin: 0 0 22px; }

.calc-story { display: flex; align-items: center; gap: 12px; margin: 6px 0 22px; color: var(--muted); font-size: .85rem; }
.calc-story__num {
  font-family: 'Heebo', system-ui, sans-serif;
  font-weight: 900; font-size: 2rem; line-height: 1; color: var(--text); letter-spacing: -.01em;
}
.calc-story__num--end { color: var(--a); }
/* The bar between the two numbers, pointing the way Hebrew reads. */
.calc-story__arrow { flex: 0 0 30px; width: 30px; height: 3px; background: var(--a); border-radius: 2px; position: relative; }
.calc-story__arrow::after {
  content: ''; position: absolute; left: -2px; top: -3.5px;
  border: 5px solid transparent; border-right: 7px solid var(--a);
}

/* Numeric entry. Big enough to read at arm's length, centred because a single
   number in a wide field otherwise floats against the right edge in RTL. */
.input--big {
  font-size: 1.9rem; font-weight: 800; text-align: center; padding: 16px;
  font-variant-numeric: tabular-nums;
}
.input--err { border-color: var(--danger); animation: calc-shake .3s; }
@keyframes calc-shake { 25% { transform: translateX(5px); } 75% { transform: translateX(-5px); } }

/* Options. Card styling from the design system, plus a selected state that
   uses the accent the way the price cards do. */
.opts { display: flex; flex-direction: column; gap: 10px; }
.opt {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: right; cursor: pointer;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 100%, white 3%), var(--panel));
  border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; color: var(--text);
  font-family: inherit; font-weight: 700; font-size: .97rem; line-height: 1.35;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.3);
  transition: border-color var(--dur-fast), background var(--dur-fast), transform .12s var(--ease-con);
}
.opt:hover { border-color: color-mix(in srgb, var(--a) 55%, transparent); }
.opt:active { transform: scale(.99); }
.opt[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--a) 70%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--a) 18%, transparent), color-mix(in srgb, var(--a) 6%, transparent));
}
.opt small { display: block; color: var(--muted); font-weight: 400; font-size: .8rem; line-height: 1.45; margin-top: 2px; }
.opt__ico {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--border); transition: background var(--dur-fast);
}
.opt[aria-pressed="true"] .opt__ico { background: var(--a); border-color: transparent; }
.opt__ico svg { width: 24px; height: 24px; }

.calc-actions { margin-top: 22px; }
.back {
  background: none; border: none; color: var(--muted); font-family: inherit; font-size: .85rem;
  font-weight: 700; cursor: pointer; padding: 12px 4px; margin-top: 6px; align-self: center;
}
.back:hover { color: var(--text); }

/* -------------------------------------------------------------------------
   Result
   ------------------------------------------------------------------------- */
.res { padding: 18px 20px; margin-bottom: 12px; border-radius: 16px; }
.res__lbl { color: var(--muted); font-size: .8rem; font-weight: 700; }
.res__val {
  font-family: 'Heebo', system-ui, sans-serif; font-weight: 900;
  font-size: clamp(2rem, 8.6vw, 2.75rem); line-height: 1.1; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.res__val small { display: block; margin-top: 4px; font-family: 'Heebo', sans-serif; font-size: .95rem; font-weight: 700; color: var(--muted); letter-spacing: 0; }
.res__note { color: var(--muted); font-size: .82rem; margin-top: 4px; line-height: 1.55; }
.res--hero {
  background: linear-gradient(180deg, color-mix(in srgb, var(--a) 22%, transparent), color-mix(in srgb, var(--a) 7%, transparent));
  border: 1px solid color-mix(in srgb, var(--a) 55%, transparent);
}
.res--hero .res__val { color: var(--at); }




.calc-fine { color: var(--muted); font-size: .74rem; text-align: center; margin: 26px 0 0; line-height: 1.6; }

.last {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--panel); border: 1px solid color-mix(in srgb, var(--a) 40%, transparent);
  border-radius: 14px; padding: 12px 16px; margin-bottom: 18px; font-size: .82rem; color: var(--muted);
}
.last b { display: block; color: var(--text); font-size: .95rem; font-weight: 700; }

/* Simplified page chrome. The landing page's full nav carries a menu, a
   progress rail and a scroll spy, none of which mean anything on a page that
   is one question at a time. */
.calc-nav { border-bottom: 1px solid var(--border); background: var(--panel); }
.calc-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; min-height: 64px; }
.calc-foot { border-top: 1px solid var(--border); padding: 24px 0; text-align: center; color: var(--muted); font-size: .8rem; }
.calc-foot a { color: var(--at); text-decoration: none; font-weight: 700; }

/* ---------------------------------------------- להשאיר פרטים בתוצאה ----- */
.calc-lead { display: flex; flex-direction: column; gap: 14px; }
.calc-lead__head { display: flex; flex-direction: column; gap: 4px; }
.calc-lead__head strong { font-size: 1.02rem; line-height: 1.35; }
.calc-lead__head span { color: var(--muted); font-size: .88rem; line-height: 1.5; }
.calc-lead__head .calc-lead__price { color: var(--text); font-weight: 700; margin-top: 2px; }
.calc-lead form { display: flex; flex-direction: column; gap: 12px; }
/* The trap goes off the start edge, like the one on the main page. It was
   left: -9999px, and in RTL the left side is the one a page can scroll to:
   the result screen measured 10,374px wide at 375 (found 14.10.2026). */
.calc-lead .field--trap { position: absolute; inset-inline-start: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; margin: 0; }
.calc-lead__err { color: var(--bad); font-size: .85rem; margin: 0; }
.calc-lead__fine { color: var(--muted); font-size: .76rem; line-height: 1.5; margin: 0; }
.calc-lead__done { display: flex; flex-direction: column; gap: 6px; }
.calc-lead__done strong { font-size: 1.05rem; }
.calc-lead__done span { color: var(--muted); font-size: .88rem; line-height: 1.5; }

/* -------------------------------------------------------------------------
   14.10.2026: everyday movement, and the sample day from post 76
   ------------------------------------------------------------------------- */
/* The second question on the training screen. Smaller than .q so the screen
   still reads as one question with a follow-up, not two. */
.q-sub {
  font-family: 'Heebo', system-ui, sans-serif; font-weight: 800;
  font-size: 1.08rem; line-height: 1.3; margin: 22px 0 10px; color: var(--text);
}
.opts--row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.opts--row .opt { align-items: flex-start; padding: 12px 14px; }

/* A day of food: when on the right, what on the left, one line each. */
.day__lead { color: var(--text); font-size: .9rem; line-height: 1.6; margin: 6px 0 12px; }
.day__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.day__list li {
  display: grid; grid-template-columns: 6.2em minmax(0, 1fr); gap: 10px; align-items: baseline;
  padding: 9px 0; border-top: 1px solid var(--border); font-size: .9rem; line-height: 1.5;
}
.day__list li:first-child { border-top: 0; padding-top: 0; }
.day__list b { color: var(--at); font-weight: 700; font-size: .8rem; }
.day__list span { color: var(--text); }
.day .res__note { margin-top: 12px; }
.day__link { color: var(--at); font-weight: 700; text-underline-offset: 3px; }

/* The short result page (14.10.2026). Three facts in one card, label on the
   right and the number on the left, the way a receipt reads in Hebrew. */
.facts { margin: 0 0 12px; padding: 4px 20px; }
.facts__row {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: 14px;
  padding: 14px 0; border-top: 1px solid var(--border);
}
.facts__row:first-child { border-top: 0; }
.facts__row[hidden] { display: none; }
.facts__k { color: var(--muted); font-size: .85rem; font-weight: 700; white-space: nowrap; }
.facts__v { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.facts__v b {
  font-family: 'Heebo', system-ui, sans-serif; font-weight: 900;
  font-size: 1.3rem; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
/* The explanation runs the full width under its row, from the right. */
.facts__sub { flex-basis: 100%; margin-top: 6px; color: var(--muted); font-size: .76rem; line-height: 1.5; }

/* The sample day folds under its own title. */
.day[hidden] { display: none; }
.day summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  color: var(--text); font-weight: 700; font-size: .95rem; min-height: 24px;
}
.day summary::-webkit-details-marker { display: none; }
.day summary::after {
  content: ''; width: 8px; height: 8px; margin-inline-end: 4px;
  border-right: 2px solid var(--at); border-bottom: 2px solid var(--at);
  transform: rotate(45deg); transition: transform var(--dur-fast);
}
.day[open] summary::after { transform: rotate(-135deg); }
.day[open] summary { margin-bottom: 4px; }
.day summary:focus-visible { outline: 2px solid var(--at); outline-offset: 4px; border-radius: 4px; }

/* The way to the guide (14.10.2026): one row, the question on the right and
   an arrow pointing on, the way Hebrew reads. */
.calc-guide {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; margin-bottom: 12px; border-radius: 16px; text-decoration: none; color: var(--muted);
  font-size: .8rem; line-height: 1.5;
}
.calc-guide[hidden] { display: none; }
.calc-guide b { display: block; color: var(--text); font-size: .95rem; font-weight: 700; }
.calc-guide::after {
  content: ''; flex: 0 0 8px; width: 8px; height: 8px; margin-inline-end: 4px;
  border-left: 2px solid var(--at); border-bottom: 2px solid var(--at); transform: rotate(45deg);
}
.calc-guide:hover b { color: var(--at); }
.calc-guide:focus-visible { outline: 2px solid var(--at); outline-offset: 3px; }

.teen { color: var(--muted); font-size: .82rem; line-height: 1.6; margin: 0 0 14px; }
#wa { margin-bottom: 12px; }