/* App layer for "הדרך הקלה לירידה במשקל".
   Every value comes from the Industry tokens in design-system.css — no raw hexes,
   no ad-hoc spacing. Load design-system.css first. */

html { direction: rtl; }
body { min-height: 100vh; }
.hidden { display: none !important; }

/* Heebo needs a touch more line-height than Barlow was tuned for. */
body { line-height: 1.6; }
h1, h2, h3, h4 { letter-spacing: 0; }

/* The design system aligns table text left; this app is right-to-left. */
.table th, .table td { text-align: right; }

/* ── Blueprint frame helpers ───────────────────────────────────────────── */
.bp { position: relative; border: 1px solid var(--color-divider); }
.bp > .corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.bp > .corner::before, .bp > .corner::after { content: ""; position: absolute; background: currentColor; }
.bp > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.bp > .corner::after { top: 5px; left: 0; width: 100%; height: 1px; }
.bp > .corner.tl { top: -6px; left: -6px; }
.bp > .corner.tr { top: -6px; right: -6px; }
.bp > .corner.bl { bottom: -6px; left: -6px; }
.bp > .corner.br { bottom: -6px; right: -6px; }

/* ── Sign in ───────────────────────────────────────────────────────────── */
.auth {
  position: fixed; inset: 0; z-index: 60; overflow-y: auto;
  display: grid; place-items: center; padding: var(--space-6);
  background: color-mix(in srgb, var(--color-text) 38%, transparent);
}
.auth-card {
  width: min(420px, 100%); padding: var(--space-8); display: grid; gap: var(--space-4);
  position: relative; background: var(--color-bg); box-shadow: var(--shadow-sm);
}
.auth-close {
  position: absolute; top: var(--space-3); inset-inline-end: var(--space-3);
  width: 30px; height: 30px; border: 0; background: transparent; cursor: pointer;
  font-size: 15px; line-height: 1; color: var(--color-neutral-700);
}
.auth-close:hover { color: var(--color-text); }
body.modal-open { overflow: hidden; }
.auth-brand { display: grid; gap: var(--space-2); }
.auth-brand .kicker {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-700);
}
.auth-brand h1 { font-size: 34px; margin: 0; }
.auth-brand p { margin: 0; font-size: 14px; color: var(--color-neutral-700); }
.auth-tabs { display: flex; border: 1px solid var(--color-divider); }
.auth-tab {
  flex: 1; padding: var(--space-2); border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px;
  color: var(--color-neutral-700);
}
.auth-tab + .auth-tab { border-inline-start: 1px solid var(--color-divider); }
.auth-tab.active { background: var(--color-accent-700); color: var(--color-bg); }
.auth-error { min-height: 18px; font-size: 13px; color: #a8322b; }

/* ── Shell ─────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--color-bg); border-bottom: 1px solid var(--color-divider);
}
.topbar-inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; gap: var(--space-6); padding: var(--space-3) var(--space-6);
}
.brand {
  display: flex; align-items: baseline; gap: var(--space-2); margin-inline-end: auto;
  font-family: var(--font-heading); font-weight: 700; font-size: 19px;
}
.brand span { white-space: nowrap; }
.brand small {
  font-family: var(--font-body); font-weight: 500; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-700);
}
.tabs { display: flex; gap: 2px; }
.tabs a {
  padding: 7px 14px; text-decoration: none; border: 1px solid transparent;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px;
  color: var(--color-text);
}
.tabs a:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.tabs a.active { background: var(--color-accent-700); color: var(--color-bg); }
.readout {
  display: flex; align-items: center; gap: var(--space-4);
  border-inline-start: 1px solid var(--color-divider); padding-inline-start: var(--space-4);
}
.readout-member, .readout-guest { display: flex; align-items: center; gap: var(--space-4); }
.readout-guest { gap: var(--space-2); }
.readout-member.hidden, .readout-guest.hidden { display: none; }
.readout div { text-align: center; }
.readout .val {
  font-family: var(--font-heading); font-weight: 700; font-size: 20px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.readout .val.accent { color: var(--color-accent-700); }
.readout .cap { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55; }
.menu-toggle { display: none; }

main { max-width: 1180px; margin: 0 auto; padding: var(--space-8) var(--space-6) 80px; }
.screen { display: grid; gap: var(--space-8); }

/* ── Section headings ──────────────────────────────────────────────────── */
.sec { display: grid; gap: var(--space-2); }
.sec .kicker {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-700);
}
.sec h2 { margin: 0; }
.sec p { margin: 0; max-width: 68ch; color: var(--color-neutral-700); }
.label {
  display: block;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-neutral-600); text-align: start;
  margin-bottom: var(--space-3);
}
/* A label used inline inside a framed block sets its own spacing. */
.panel > .label, .statgrid .label { margin-bottom: 0; }

/* The muted one-liner that sits under a block. */
.note-line { margin: 0; font-size: 13px; color: var(--color-neutral-700); }

/* A second-level section heading, one step down from the screen's h2. */
.sec-sub h2 { font-size: clamp(21px, 2.4vw, 26px); }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero {
  padding: var(--space-8) calc(var(--space-8) * 1.6);
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: calc(var(--space-8) * 1.8); align-items: end;
}
.hero .gate-actions { margin-top: var(--space-6); }
.hero-note { margin: var(--space-4) 0 0; font-size: 13px; color: var(--color-neutral-600); }
.hero h1 { font-size: clamp(38px, 5vw, 58px); margin: var(--space-2) 0 var(--space-3); }
.hero p { margin: 0; max-width: 46ch; color: var(--color-neutral-700); }

/* ── Divided stat block ────────────────────────────────────────────────── */
.statgrid { display: grid; grid-template-columns: 1fr 1fr; }
.statgrid > div { padding: var(--space-3) var(--space-4); }
.statgrid > div:nth-child(odd) { border-inline-start: 1px solid var(--color-divider); }
.statgrid > div:nth-child(n + 3) { border-top: 1px solid var(--color-divider); }
.statgrid .val {
  font-family: var(--font-heading); font-weight: 700; font-size: 32px; line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.statgrid .val.accent { color: var(--color-accent-700); }
.statgrid .cap { font-size: 11px; color: var(--color-neutral-600); margin-top: 3px; }

.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.statrow > div { padding: var(--space-4) var(--space-6); }
.statrow > div + div { border-inline-end: 1px solid var(--color-divider); }
.statrow .val {
  font-family: var(--font-heading); font-weight: 700; font-size: 30px; line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.statrow .val.big { font-size: clamp(40px, 7vw, 76px); color: var(--color-accent); }
.statrow .val.accent { color: var(--color-accent-700); }
.statrow .cap { font-size: 11px; color: var(--color-neutral-600); margin-top: 4px; }

/* ── Goal rows ─────────────────────────────────────────────────────────── */
.goals { display: grid; gap: var(--space-4); }
.goal { display: grid; gap: 6px; }
.goal-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.goal-name { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; }
.goal-val { font-size: 12px; color: var(--color-neutral-600); font-variant-numeric: tabular-nums; }
.bar { height: 6px; background: var(--color-neutral-300); }
.bar > span { display: block; height: 100%; background: var(--color-accent); transition: width .5s ease; }
.bar.met > span { background: var(--color-accent-700); }

/* ── Rules of thumb ────────────────────────────────────────────────────── */
.rules { display: grid; gap: var(--space-4); }

/* One rule shows at a time; the others stay in the flow so the block keeps its height. */
#tip-rotator { position: relative; display: block; min-height: 78px; }
#tip-rotator .rule {
  position: absolute; inset: 0 0 auto 0;
  opacity: 0; visibility: hidden; transition: opacity .5s ease;
}
#tip-rotator .rule.is-shown { opacity: 1; visibility: visible; position: relative; }
.rule-ticks { display: flex; gap: 6px; padding-top: var(--space-3); }
.rule-ticks i {
  width: 18px; height: 2px; background: var(--color-neutral-300);
  cursor: pointer; transition: background .3s ease;
}
.rule-ticks i.on { background: var(--color-accent); }
.rule-ticks i:hover { background: var(--color-accent-400); }
.rule {
  border-inline-start: 2px solid var(--color-accent); padding-inline-start: var(--space-4);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 19px; line-height: 1.25;
}

/* ── Layout pairs ──────────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--space-8) * 1.4); align-items: start; }
.split-wide { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.panel { padding: var(--space-6); display: grid; gap: var(--space-4); }
.panel > header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.panel > header h3 { margin: 0; font-size: 22px; }
.panel > header .when { font-size: 12px; color: var(--color-neutral-600); font-variant-numeric: tabular-nums; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.field { display: grid; }
.check {
  display: flex; align-items: center; gap: var(--space-3); cursor: pointer; font-size: 14px;
  padding: var(--space-2) 0;
}
.check input { width: 16px; height: 16px; accent-color: var(--color-accent); }
.check .xp { color: var(--color-accent-700); font-size: 13px; }

/* ── Charts ────────────────────────────────────────────────────────────── */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid-line { stroke: var(--color-neutral-300); stroke-width: 1; }
.chart .lbl { font-size: 10px; fill: var(--color-neutral-600); font-family: var(--font-body); }
.chart .line { fill: none; stroke: var(--color-accent); stroke-width: 2; }
.chart .dot { fill: var(--color-accent); }
.chart .bar-rect { fill: var(--color-neutral-400); }
.chart .bar-rect.met { fill: var(--color-accent); }
.chart .goal-line { stroke: var(--color-accent-700); stroke-width: 1; stroke-dasharray: 4 3; }

/* ── Articles ──────────────────────────────────────────────────────────── */
.articles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); }
.article { padding: var(--space-6); display: grid; gap: var(--space-3); align-content: start; text-decoration: none; color: inherit; }
.article:hover { background: color-mix(in srgb, var(--color-text) 3%, transparent); }
.article h3 { margin: 0; font-size: 21px; }
.article p { margin: 0; font-size: 14px; color: var(--color-neutral-700); }
.article .meta { font-size: 11px; color: var(--color-neutral-600); }
.article-body { max-width: 68ch; display: grid; gap: var(--space-4); }
.article-body p { margin: 0; }
.article-body h4 { margin: var(--space-4) 0 0; font-size: 19px; }

/* ── Group ─────────────────────────────────────────────────────────────── */
.members { display: grid; }
.member {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4); border: 1px solid var(--color-divider); border-bottom: 0;
  background: transparent; cursor: pointer; text-align: start; font: inherit; color: inherit; width: 100%;
}
.members .member:last-child { border-bottom: 1px solid var(--color-divider); }
.member:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.member.active { background: var(--color-accent-100); border-color: var(--color-accent-400); }
.member .who { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; }
.member .facts { display: flex; gap: var(--space-4); font-size: 12px; color: var(--color-neutral-600); font-variant-numeric: tabular-nums; }
.member .kg { font-family: var(--font-heading); font-weight: 700; font-size: 20px; color: var(--color-accent-700); font-variant-numeric: tabular-nums; }

/* ── Science ───────────────────────────────────────────────────────────── */
.mechanisms { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-8); }
.mechanism { display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-4); border-top: 1px solid var(--color-divider); }
.mechanism .num {
  font-family: var(--font-heading); font-weight: 700; font-size: 44px; line-height: 1;
  color: var(--color-neutral-400); font-variant-numeric: tabular-nums;
}
.mechanism h3 { margin: 0; font-size: 21px; }
.mechanism p { margin: 0; font-size: 14px; color: var(--color-neutral-700); }
.refs { display: grid; gap: var(--space-4); }
.ref { font-size: 14px; }
.ref b { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
.ref p { margin: 3px 0 0; color: var(--color-neutral-700); }
.gate-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.disclaimer { font-size: 12px; color: var(--color-neutral-600); }
.disclaimer a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }

/* ── Badges ────────────────────────────────────────────────────────────── */
.badges { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); }
.badge { padding: var(--space-4); display: grid; gap: var(--space-2); align-content: start; }
.badge.locked { opacity: 0.45; }
.badge .ico { color: var(--color-accent); }
.badge h4 { margin: 0; font-size: 17px; }
.badge p { margin: 0; font-size: 13px; color: var(--color-neutral-700); }

/* ── Utility ───────────────────────────────────────────────────────────── */
.empty { padding: var(--space-8); text-align: center; color: var(--color-neutral-600); font-size: 14px; }
.table-wrap { overflow-x: auto; max-width: 100%; }
.table-wrap .table { min-width: 520px; }
.screen > *, .split > *, .articles > * { min-width: 0; }

.toast {
  position: fixed; bottom: var(--space-6); inset-inline-start: var(--space-6); z-index: 100;
  padding: var(--space-3) var(--space-6); border: 1px solid var(--color-accent);
  background: var(--color-accent); color: var(--color-bg);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 15px;
  opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: none;
}
.toast.show { opacity: 1; transform: none; }
.toast.error { background: #a8322b; border-color: #a8322b; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: var(--space-8); padding: var(--space-6); }
  .split, .split-wide { grid-template-columns: 1fr; gap: var(--space-8); }
}
@media (max-width: 700px) {
  html, body { overflow-x: hidden; }
  .topbar-inner { flex-wrap: wrap; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
  .tabs { order: 3; width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .tabs a { white-space: nowrap; }
  main { padding: var(--space-6) var(--space-4) 64px; }
  .form-row { grid-template-columns: 1fr; }
  .statrow > div + div { border-inline-end: 0; border-top: 1px solid var(--color-divider); }
  .member { grid-template-columns: 1fr; gap: var(--space-2); }
  .readout { gap: var(--space-3); padding-inline-start: var(--space-3); }
  .readout-guest .btn { padding-inline: var(--space-3); font-size: 13px; }
}

/* ── Dialog ────────────────────────────────────────────────────────────── */
.dialog-backdrop { z-index: 60; }
.dialog { max-height: 88vh; }
.dialog-form { display: flex; flex-direction: column; min-height: 0; gap: var(--space-4); }
.dialog-body { overflow-y: auto; }
.dialog-actions { display: flex; gap: var(--space-3); justify-content: flex-start; }
.dialog textarea.input { min-height: 200px; line-height: 1.7; }

/* ── Members ribbon — sits under the header on every page ──────────────── */
.ribbon {
  background: var(--color-accent-900);
  color: var(--color-bg);
  text-align: center;
  padding: 7px var(--space-4);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 14px;
  letter-spacing: .01em;
}
.ribbon .heart { color: #e2564d; font-family: var(--font-body); }

/* ── Small action buttons, for table rows and list rows ────────────────── */
.btn-sm { font-size: 13px; padding: 4px var(--space-3); min-height: 0; }
.row-actions { display: flex; gap: 6px; justify-content: flex-start; white-space: nowrap; }

/* ── Row list — the editor's tips, and anything else that is a plain list ─ */
.rowlist { display: grid; border: 1px solid var(--color-divider); }
.rowlist > * + * { border-top: 1px solid var(--color-divider); }
.rowlist .row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding: var(--space-3) var(--space-4);
}
.rowlist .row-text {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 16px; line-height: 1.35;
}
.rowlist .row:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* ── Section head with an action on the far side ───────────────────────── */
.sec-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.sec-row .sec { flex: 1; }

/* ── Inline add form ───────────────────────────────────────────────────── */
.add-row { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.add-row .input { flex: 1; }

@media (max-width: 700px) {
  .ribbon { font-size: 12.5px; padding: 6px var(--space-3); }
  .sec-row { flex-direction: column; align-items: stretch; }
  .sec-row .btn { align-self: flex-start; }
  .rowlist .row { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .add-row { flex-direction: column; }
  /* the header reads as one bar rather than three stacked fragments */
  .topbar-inner { row-gap: var(--space-2); }
  .brand { font-size: 17px; }
  .brand small { display: none; }
  .readout { border-inline-start: 0; padding-inline-start: 0; margin-inline-start: auto; gap: var(--space-3); }
}