/* ───────────────────────────────────────────────────────────────────────────
   אקי — the measuring field.

   The page is one white field ruled in green on a fixed cell pitch, and
   everything you eat inks cells on it. One ink: deep green draws, signal green
   fills, near-black reports. Depth comes only from an opaque plane overlapping
   the field — no shadow, no gradient, no glass, no second hue. State is a mark,
   never a colour. No midtone: every element is full strength or absent. Every
   box, gap and line-height is a whole number of cells.
   ─────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Secular One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/secular-one-400-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Secular One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/secular-one-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/assistant-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/assistant-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* One ink, two jobs. */
  --paper: #ffffff;
  --ink: #0b1410;          /* reports: body, figures, message text */
  --green: #00a86b;        /* fills: inked cells, the live plane */
  --green-deep: #046b45;   /* draws: keylines, green text, the primary action */

  /* The field's rule. A fixed structural value, never an emphasis ramp. */
  --rule: rgba(4, 107, 69, 0.075);
  --rule-major: rgba(4, 107, 69, 0.15);
  --track: rgba(4, 107, 69, 0.38);

  --display: "Secular One", sans-serif;
  --data: "Assistant", -apple-system, "Segoe UI", sans-serif;

  /* The cell is the only unit of measure on this page. */
  --cell: 24px;
  --pip: 8px;              /* inked cell inside a meter */
  --pitch: 12px;           /* half a cell: pip + its gap */

  --maxw: 1104px;          /* 46 cells */
  --gut: clamp(24px, 4vw, 48px);
  --keyline: 1px;
  --radius: 14px;
  --hair: rgba(4, 107, 69, 0.22);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--data);
  font-size: 16px;
  line-height: var(--cell);
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;

}

/* The surfaces we did not draw still carry the palette. */
::selection { background: var(--green); color: var(--ink); }
:focus-visible { outline: var(--keyline) solid var(--green-deep); outline-offset: 2px; }
input, textarea { caret-color: var(--green-deep); }
* { scrollbar-color: var(--green-deep) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--green-deep); }
::-webkit-scrollbar-track { background: transparent; }

h1, h2, h3 { margin: 0; }
p { margin: 0; }
a { color: var(--green-deep); text-underline-offset: 3px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }

/* ── type ───────────────────────────────────────────────────────────────── */

.display {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.5rem, 9vw, 6rem);
  line-height: 0.94;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.display em { font-style: normal; color: var(--green-deep); }

.title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 3rem);
  line-height: 1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.lede {
  font-size: 1.125rem;
  line-height: calc(var(--cell) * 1.25);
  max-width: 36ch;
}

/* Data field names. Never positioning copy. */
.label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--green-deep);
}

.note { font-size: 0.9375rem; color: var(--green-deep); max-width: 62ch; }

/* Figures are laid out left to right even on an RTL page. */
.fig {
  direction: ltr;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── the primary action ─────────────────────────────────────────────────── */
/* Hover is a hard cut between two full-strength states, never a fade. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pip);
  min-height: calc(var(--cell) * 2.5);
  padding: 0 calc(var(--cell) * 1.25);
  border: var(--keyline) solid var(--green-deep);
  border-radius: 10px;
  background: var(--green-deep);
  color: var(--paper);
  font-family: var(--data);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms ease-out, color 120ms ease-out;
}
.btn:hover { background: var(--green); border-color: var(--green); color: var(--ink); }
.btn:active { background: var(--paper); color: var(--green-deep); border-color: var(--green-deep); }
.btn:disabled { background: var(--paper); color: var(--green-deep); cursor: default; opacity: 1; }
.btn--block { width: 100%; }
.btn--ghost { background: var(--paper); color: var(--green-deep); }
.btn--ghost:hover { background: var(--green-deep); color: var(--paper); border-color: var(--green-deep); }
.btn .chev { width: 0.5em; height: 0.5em; flex: none; }

.linkbtn {
  border: 0;
  background: none;
  padding: 0;
  color: var(--green-deep);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.linkbtn:hover { color: var(--ink); }

/* ── the ident bar ──────────────────────────────────────────────────────── */

.identbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cell);
  min-height: calc(var(--cell) * 2);
  padding-block: var(--pitch);
  border-bottom: 1px solid var(--hair);
}
.ident {
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--green-deep);
}

/* ── planes ─────────────────────────────────────────────────────────────── */
/* A plane is opaque and sits on the field, hiding the rules behind it.
   That overlap is the only depth this page has. */

.plane {
  background: var(--paper);
  border: var(--keyline) solid var(--hair);
  border-radius: var(--radius);
  padding: calc(var(--cell) - var(--keyline));
}
.plane--inked {
  background: var(--green);
  border-color: var(--green);
  color: var(--ink);
}

/* ── hero ───────────────────────────────────────────────────────────────── */

.hero { padding-block: var(--cell) calc(var(--cell) * 4); }

.hero__grid {
  display: grid;
  gap: var(--pitch);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "say" "thread" "act";
  align-items: start;
  padding-block: var(--pitch) var(--cell);
}
.hero__say { grid-area: say; }
.thread { grid-area: thread; }
.hero__act { grid-area: act; }

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
    grid-template-areas: "say thread" "act thread";
    gap: calc(var(--cell) * 2) calc(var(--cell) * 4);
    padding-block: calc(var(--cell) * 2) calc(var(--cell) * 3);
  }
}

.hero__say > * + * { margin-top: var(--cell); }
.hero__act > * + * { margin-top: var(--pitch); }
@media (max-width: 899px) { .hero__act { margin-top: var(--pitch); } }
@media (min-width: 900px) { .hero__act > * + * { margin-top: var(--cell); } }

/* ── the thread ─────────────────────────────────────────────────────────── */
/* A real exchange, shown at the scale it has in life. */

.thread { display: flex; flex-direction: column; gap: var(--cell); }

.msg {
  max-width: 46ch;
  padding: calc(var(--cell) - var(--keyline));
  border: var(--keyline) solid var(--hair);
  border-radius: var(--radius);
  background: var(--paper);
  white-space: pre-line;
}
.msg--out {
  align-self: flex-start;      /* RTL: the right edge, where you write */
  background: var(--green);
  border-color: var(--green);
  font-weight: 600;
}
.msg--out .msg__who { color: var(--ink); }
.msg--in { align-self: flex-end; }

.msg__who {
  display: flex;
  align-items: center;
  line-height: var(--cell);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--green-deep);
}
.msg--out .msg__who { color: var(--ink); }

.thread__foot {
  align-self: flex-end;
  margin-top: calc(var(--pip) - var(--cell));
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--green-deep);
}

/* ── the meters ─────────────────────────────────────────────────────────── */
/* The figure leads; one quiet line underneath says how far through the day it
   is. Full row width, so nothing floats in dead space. */

.meters {
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}

.meter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--pitch) var(--cell);
  padding-block: calc(var(--cell) * 0.875);
}
.meter + .meter { border-top: 1px solid var(--rule-major); }

.meter__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--green-deep);
}
.meter__value {
  text-align: end;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.meter__value .fignum { direction: ltr; unicode-bidi: isolate; }
.meter__value .of {
  margin-inline-start: 0.45em;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--green-deep);
}

.bar {
  grid-column: 1 / -1;
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: var(--rule-major);
}
.bar::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--fill, 0%);
  border-radius: 999px;
  background: var(--green);
}
/* Past target the line is full and deepens — it reads the same whether going
   past is good (training) or not (calories). */
.meter.is-over .bar::after { background: var(--green-deep); }

/* The page's one authored moment: the line draws itself once, when seen. */
.bar.is-inked::after { animation: fill 720ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes fill { from { width: 0; } }

/* ── sections ───────────────────────────────────────────────────────────── */

section { padding-block: calc(var(--cell) * 3); }
.section__title { margin-bottom: calc(var(--cell) * 2); }

/* the three coaches */

.said { margin-bottom: var(--cell); }
.said .msg { max-width: 54ch; }

/* One reply at a time now; the dial above chooses which. */
.tonepick { margin-block: calc(var(--cell) * 1.5); }
.tonepick .dial__legend { margin-top: var(--pitch); }

.channels { display: block; min-height: 360px; }
.channel { max-width: 64ch; }
.channel { display: flex; flex-direction: column; gap: calc(var(--cell) * 0.5); }
/* Avatars are square JPEGs on the source's own near-black ground; the circle is
   the border-radius, so there is no alpha channel to pay for. */
.avatar {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--ink);
}
.avatar--sm { width: 28px; height: 28px; vertical-align: middle; margin-inline-end: 8px; }

.channel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
}
.channel__head .label { font-family: var(--data); }
.channel--default .channel__head .label { color: var(--ink); }
.channel__body { white-space: pre-line; flex: 1; }
.channel__foot {
  border-top: 1px solid var(--hair);
  padding-top: calc(var(--cell) * 0.5);
  font-size: 0.9375rem;
  font-weight: 600;
}

/* how it works */

.steps { border-top: 1px solid var(--hair); }
.step {
  display: grid;
  grid-template-columns: calc(var(--cell) * 2) minmax(0, 1fr);
  gap: 0 var(--cell);
  padding-block: var(--cell);
  border-bottom: 1px solid var(--rule-major);
}
@media (min-width: 760px) {
  .step { grid-template-columns: calc(var(--cell) * 2) minmax(0, 18ch) minmax(0, 1fr); align-items: baseline; }
}
.step__n {
  direction: ltr;
  font-family: var(--display);
  font-size: 1.375rem;
  line-height: var(--cell);
  color: var(--green-deep);
}
.step__t { font-size: 1.125rem; font-weight: 700; line-height: var(--cell); }
.step__b { grid-column: 2 / -1; max-width: 62ch; }
@media (min-width: 760px) { .step__b { grid-column: auto; } }

/* the honest section */

.straight { border-top: 1px solid var(--hair); padding-top: var(--cell); }
.straight > * + * { margin-top: var(--cell); }
.straight p { max-width: 62ch; }
.straight__h { font-family: var(--display); font-size: 1.625rem; line-height: 1.1; color: var(--green-deep); }

/* sign-off */

.signoff {
  background: var(--green);
  color: var(--ink);
  padding-block: calc(var(--cell) * 4);
  text-align: center;
}
.signoff .title { margin-bottom: calc(var(--cell) * 1.5); }
.signoff .btn { background: var(--paper); border-color: var(--paper); color: var(--green-deep); }
.signoff .btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

footer {
  border-top: 1px solid var(--hair);
  padding-block: calc(var(--cell) * 1.5);
  font-size: 0.9375rem;
  color: var(--green-deep);
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px var(--cell); justify-content: space-between; }

/* ── app chrome ─────────────────────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  gap: var(--cell);
  min-height: calc(var(--cell) * 3);
  /* Full-bleed rule, contents aligned to the same column as the page body. */
  padding-inline: max(var(--gut), calc((100% - var(--maxw)) / 2));
  border-bottom: 1px solid var(--hair);
  background: var(--paper);
}
.topbar nav { display: flex; gap: 4px; margin-inline-end: auto; overflow-x: auto; }
.topbar__ident { font-family: var(--display); font-size: 1.375rem; line-height: 1; color: var(--green-deep); }

.tab {
  border: 0;
  border-bottom: var(--keyline) solid transparent;
  background: none;
  padding: calc(var(--cell) * 0.5) 10px;
  color: var(--green-deep);
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color 120ms ease-out, border-color 120ms ease-out;
}
.tab:hover { color: var(--ink); }
.tab.is-on { color: var(--ink); font-weight: 700; border-bottom-color: var(--green); }

main { padding-block: 0; }
/* The app templates carry no .wrap of their own, so the container holds them
   off the edges and centres them the way the landing's sections do. */
#app.app, #app.auth {
  display: block;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-block: calc(var(--cell) * 2);
  padding-inline: var(--gut);
}
#app.auth { max-width: 460px; }
#app > .wrap > section,
#app > section { padding-block: 0; }

/* panels */

.panel {
  background: var(--paper);
  border: var(--keyline) solid var(--hair);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: calc(var(--cell) * 1.5);
}
.panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cell);
  margin: 0;
  padding: calc(var(--cell) * 0.5) var(--cell);
  border-bottom: 0;
  background: var(--green);
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: var(--cell);
  letter-spacing: -0.01em;
}
.panel__body { padding: var(--cell); }
.panel__body > * + * { margin-top: var(--cell); }
.zone { border-color: var(--ink); }
.zone .panel__head { background: var(--ink); color: var(--paper); border-bottom-color: var(--ink); }

.railhead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: calc(var(--cell) * 0.5);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--green-deep);
}
.railhead .dot { width: 8px; height: 8px; background: var(--green); flex: none; }
.railhead .sample { margin-inline-start: auto; border: 1px solid var(--green-deep); padding: 0 8px; }

/* rows */

.rows { list-style: none; margin: 0; padding: 0; }
.rows li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px var(--cell);
  padding-block: calc(var(--cell) * 0.5);
  border-bottom: 1px solid var(--rule-major);
}
.rows li:first-child { border-top: 1px solid var(--rule-major); }
.muted { font-size: 0.9375rem; font-weight: 600; color: var(--green-deep); direction: ltr; }
.row { display: flex; gap: 8px; }
.row input { flex: 1; }

.empty {
  border: var(--keyline) dashed var(--hair);
  border-radius: 10px;
  padding: calc(var(--cell) * 0.75) var(--cell);
  color: var(--green-deep);
  font-weight: 600;
}

/* forms */

label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--green-deep);
}
label + .note { margin-top: 8px; }
form > * + label { margin-top: var(--cell); }

input[type="text"], input[type="tel"], input[type="time"], select {
  width: 100%;
  min-height: calc(var(--cell) * 2);
  padding: 0 10px;
  border: var(--keyline) solid var(--hair);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
}
input::placeholder { color: var(--green-deep); opacity: 1; font-weight: 400; }
input:disabled { color: var(--green-deep); font-weight: 400; }
input[type="checkbox"] { accent-color: var(--green-deep); width: 18px; height: 18px; }

.confirm-number {
  direction: ltr;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: calc(var(--cell) * 1.5);
  padding-block: var(--pitch);
}

.err { color: var(--paper); background: var(--ink); padding: calc(var(--cell) * 0.5) var(--cell); font-weight: 700; }

/* the dial — one character, a setting you slide */

.tones { display: block; }

.dial__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--cell);
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.dial__input::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: var(--rule-major);
}
.dial__input::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--rule-major);
}
.dial__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border: 0;
  border-radius: 50%;
  background: var(--green-deep);
}
.dial__input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: var(--green-deep);
}
.dial__input:focus-visible { outline-offset: 4px; }

.dial__legend {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: var(--pitch);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--green-deep);
}
.dial__legend span { flex: 0 1 auto; text-align: center; }
.dial__legend span:first-child { text-align: start; }
.dial__legend span:last-child { text-align: end; }
.dial__legend span.is-on { color: var(--ink); font-weight: 700; }

#tone-blurb { margin-top: var(--cell); }
.tone__face { display: flex; justify-content: center; margin-bottom: var(--cell); }
.avatar--lg { width: 80px; height: 80px; }


.section__note { margin-top: calc(var(--cell) * -0.5); }

/* retired radio-style tone rows, kept for any surface still using them */
.tone {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px var(--cell);
  padding: calc(var(--cell) * 0.5) var(--cell);
  border: var(--keyline) solid var(--hair);
  border-radius: 10px;
  cursor: pointer;
  transition: background 120ms ease-out, color 120ms ease-out;
}
.tone:hover { background: var(--rule); }
.tone.is-on { background: var(--green); border-color: var(--green); }
.tone.is-on:hover { background: var(--green); }
.tone__name { font-weight: 700; }
.tone__blurb { grid-column: 2; font-size: 0.9375rem; color: var(--green-deep); }
.tone.is-on .tone__blurb { color: var(--ink); }

/* schedules */

.sched {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pitch) var(--pitch);
  padding-block: var(--pitch);
  border-bottom: 1px solid var(--rule-major);
}
.sched:last-child { border-bottom: 0; }
.sched > input[type="checkbox"] { flex: none; }
/* Fixed so every row's controls start on the same line, whatever the name. */
.sched__name {
  flex: 0 0 8rem;
  margin: 0;
  font-size: 0.9375rem;
  letter-spacing: 0;
  cursor: pointer;
}
.sched .timepick, .sched .daypick { flex: none; width: auto; min-width: 7.5rem; }
.sched .cron { flex: 1 1 14rem; width: auto; }

@media (max-width: 479px) {
  .sched__name { flex: 1 1 auto; }
  .sched .timepick, .sched .daypick { flex: 1 1 8rem; min-width: 0; }
}

/* toast */

#toast {
  position: fixed;
  inset-inline: var(--gut);
  bottom: var(--cell);
  max-width: 520px;
  margin-inline: auto;
  z-index: 20;
  padding: calc(var(--cell) * 0.5) var(--cell);
  border: var(--keyline) solid var(--green);
  background: var(--green);
  color: var(--ink);
  font-weight: 700;
  text-align: center;
}
#toast.is-err { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ── motion ─────────────────────────────────────────────────────────────── */
/* The ink sweep is the page's one authored moment. Everything else is a
   120ms colour cut on hover and selection. */

@media (prefers-reduced-motion: reduce) {
  .bar.is-inked::after { animation: none; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}