/* ---------- tab bar ---------- */

/* The hidden attribute is only a user-agent rule, so the display
   declaration below outranks it. Onboarding, the lock screen and the
   sign-in screen all set hidden, and all three had the tab bar sitting
   over them regardless. */
.tabbar[hidden] { display: none; }

.tabbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
  display: flex; justify-content: center;
  padding: 0 12px calc(10px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.tabbar .inner {
  display: flex; width: 100%; max-width: 330px; pointer-events: auto;
  padding: 6px; border-radius: 999px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-lift);
}
.tabbar .inner button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 2px; border: none; background: none; cursor: pointer;
  color: var(--text-mute); font: inherit; font-size: .7rem; font-weight: 600;
  border-radius: 999px; transition: .18s var(--ease);
}
.tabbar .inner button.on { color: var(--accent-ink); background: var(--accent-wash); }
.tabbar svg { width: 21px; height: 21px; }

/* ---------- sheet ---------- */
.sheet-bg {
  /* Stops at the top of the keyboard rather than at the bottom of the
     screen; --kb is 0 whenever there is no keyboard. See
     trackKeyboard(). */
  position: fixed; inset: 0 0 var(--kb, 0px) 0; z-index: 40;
  background: rgba(8, 14, 12, .38);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fade .2s var(--ease);
}
.sheet {
  /* 86% of what is left, not 86% of the screen: with a keyboard up, the
     old height reached under it and the field being typed into was the
     part below the fold. */
  width: 100%; max-width: 560px; overflow-y: auto;
  max-height: min(86vh, calc(100vh - var(--kb, 0px) - 24px));
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 8px 16px calc(22px + env(safe-area-inset-bottom));
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  backdrop-filter: blur(30px) saturate(190%);
  border: 1px solid var(--hairline); border-bottom: none;
  box-shadow: var(--shadow-lift);
  animation: up .3s var(--ease);
}
.sheet .grabber {
  width: 38px; height: 5px; border-radius: 999px; margin: 6px auto 14px;
  background: var(--text-mute); opacity: .35;
}
.sheet h3 { margin: 0 0 14px; font-size: 1.08rem; letter-spacing: -.015em; }
@keyframes fade { from { opacity: 0 } }
@keyframes up { from { transform: translateY(24px) } }

.opt {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  padding: 13px; border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: var(--glass-sunk); margin-bottom: 8px; text-align: start; width: 100%;
  font: inherit; color: var(--text);
}
.opt.on { border-color: var(--accent); background: var(--accent-wash); }
.opt-body { flex: 1; min-width: 0; }
.opt-body b { display: block; font-weight: 600; margin-bottom: var(--pair-y); }
.opt-body small { color: var(--text-dim); font-size: .77rem; }

/* ---------- chart ---------- */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart text {
  fill: var(--text-mute); font-size: 12px; font-family: var(--font);
  font-variant-numeric: tabular-nums;
  /* text-anchor is resolved against the inline base direction, not
     against the screen: under [dir="rtl"] "start" means the right-hand
     end, so the label pinned to the left of the plot hung off the left
     of the card and the one pinned to the right hung off the right. The
     old chart had 68px of axis gutter absorbing it; this one has six.
     Everything in here is a number or a date — both read left to
     right in Arabic — so the whole element opts out of the page's
     direction rather than each label guessing.

     override, not isolate. A date is two runs of digits with a hyphen
     between them, and U+002D is bidi class ES: between two European
     numbers the algorithm folds it in, but between two ARABIC-INDIC
     numbers it does not — it resolves as right-to-left, and the two
     groups swap around it. So 06-11 was drawn as 11-06 in Arabic: not
     the digits reversed, which would be obvious, but the month and the
     day trading places, which is not. There is nothing in here but
     figures, so forcing the visual order is exactly right.

     Which is also why nothing in here is wrapped in ltr(): those are
     U+2066/U+2069, real isolate characters in the text, and an
     override on the element cannot reach inside one. The element
     settles the direction; the strings stay plain. */
  direction: ltr; unicode-bidi: isolate-override;
}

/* ---------- weight over time ----------
   The line is the trend and the fill gives it a floor; the dashed rule
   is what it is heading at. No axis, so the two figures at the ends of
   the line are the only numbers and are set at reading size. */
.chart .wl-area { stroke: none; }
.chart .wl-stop-a { stop-color: var(--ds-good); stop-opacity: .22; }
.chart .wl-stop-b { stop-color: var(--ds-good); stop-opacity: .02; }
.chart .wl-line {
  fill: none; stroke: var(--ds-good); stroke-width: 2.25;
  stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.chart .wl-now { fill: var(--ds-good); stroke: var(--glass-strong); stroke-width: 2; }
.chart .wl-aim {
  stroke: var(--text-mute); stroke-width: 1; stroke-dasharray: 4 4; opacity: .55;
}
.chart .wl-end {
  font-size: 13px; font-weight: 650; fill: var(--text-dim); letter-spacing: -.02em;
}
.chart .wb-ax { font-size: 11.5px; }
.wb-key { margin-top: 10px; }

/* ---------- learn / plan ---------- */
.learn-card { margin-bottom: 14px; }
.learn-card:last-child { margin-bottom: 0; }
.learn-card h3 { margin: 0 0 6px; font-size: .97rem; letter-spacing: -.01em; }
.learn-card p { margin: 0; font-size: .86rem; color: var(--text-dim); line-height: 1.6; }

.dayrow { display: flex; gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--hairline-dim); font-size: .85rem; }
.dayrow:last-child { border-bottom: none; }
.dayrow .dname { flex: 0 0 74px; font-weight: 600; color: var(--text-mute); font-size: .76rem; }
.dayrow .dmeals { flex: 1; color: var(--text-dim); }
.dayrow.today .dname { color: var(--accent-ink); }

/* ---------- shopping list ---------- */
.shopcat { margin-bottom: 18px; }
.shopcat:last-child { margin-bottom: 0; }
.shopcat h4 {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 8px; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-mute);
}
html[dir="rtl"] .shopcat h4 { letter-spacing: 0; }
.shop-icon { font-size: .95rem; }

.shop-items {
  border-radius: var(--r-md); overflow: hidden;
  background: var(--glass-sunk); border: 1px solid var(--hairline-dim);
}
.shop-row {
  /* The row is the tick, and now the aisles open by default it is the
     control this screen is made of. */
  min-block-size: 44px;
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 12px; border-bottom: 1px solid var(--hairline-dim);
}
.shop-row:last-child { border-bottom: none; }
.shop-name { flex: 1; min-width: 0; font-size: .85rem; }
.shop-qty {
  flex: 0 0 auto; font-size: .78rem; font-weight: 600; color: var(--accent-ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: .77rem; border-radius: 999px; padding: 5px 11px; color: var(--text-dim);
  background: var(--glass-sunk); border: 1px solid var(--hairline-dim);
}

/* ---------- misc ---------- */
.toast {
  position: fixed; inset-inline: 0; bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 50; display: flex; justify-content: center; pointer-events: none;
}
.toast > div {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 20px; border-radius: 999px; font-size: .85rem; font-weight: 500;
  background: var(--glass-strong); color: var(--text);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--hairline); box-shadow: var(--shadow-lift);
  animation: up .24s var(--ease);
}

/* The switch people see is 50×30 and the one they hit is 50×44. The
   input is already stretched over the whole .toggle, so growing the
   box by padding would have moved the track off centre — it is the
   input that reaches instead. */
.toggle { position: relative; width: 50px; height: 30px; flex: 0 0 auto; }
.toggle input {
  position: absolute; opacity: 0; width: 100%; margin: 0; z-index: 2; cursor: pointer;
  inset-block: -7px; height: calc(100% + 14px);
}
.toggle i {
  position: absolute; inset: 0; border-radius: 999px; transition: .22s var(--ease);
  background: var(--glass-sunk); border: 1px solid var(--hairline);
}
.toggle i::after {
  content: ''; position: absolute; top: 3px; inset-inline-start: 3px;
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,.24); transition: .22s var(--ease);
}
.toggle input:checked + i { background: linear-gradient(180deg, var(--accent-2), var(--accent)); border-color: transparent; }
.toggle input:checked + i::after { transform: translateX(20px); }
html[dir="rtl"] .toggle input:checked + i::after { transform: translateX(-20px); }

.remrow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hairline-dim); }
.remrow:last-child { border-bottom: none; }
/* also covers .secrow, whose label previously had no flex — which left
   its toggle sitting against the text instead of at the row's end */
.remrow .rlabel, .secrow .rlabel { flex: 1; font-size: .88rem; }
.secrow .toggle { margin-inline-start: auto; }
/* A time is typed rarely and hit every time a reminder is changed, so
   the box was 34 tall against a 44 finger. */
.remrow input[type="time"], .remrow select, .calm-wake-field input {
  background: var(--glass-sunk); border: 1px solid var(--hairline);
  border-radius: 10px; padding: 10px 9px; min-block-size: 44px;
  font-size: .82rem; color: var(--text); font-family: var(--font);
}
/* calm.js: the wake-up field in its sheet, and the note on a reminder
   switched off for being skipped — words and an icon, not colour. */
.calm-wake-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: .9rem; }
.rlabel .calm-off { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 3px; font-size: .74rem; color: var(--text-mute); }
.rlabel .calm-off svg { flex: none; }

.center { text-align: center; }
.mt { margin-top: 12px; }
.mb0 { margin-bottom: 0; }
.onb-step { animation: fade .24s var(--ease); }
.empty { text-align: center; padding: 18px 8px; color: var(--text-mute); font-size: .86rem; }

/* the every-day / clear pair in the medication form */
.btn.ghost.on {
  background: var(--accent-wash);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent-ink);
}

/* ---------- medication card ---------- */
.medcard {
  border-radius: var(--r-md);
  background: var(--glass-sunk); border: 1px solid var(--hairline-dim);
  padding: 13px; margin-bottom: 10px;
}
.medcard:last-child { margin-bottom: 0; }
/* Done for the day, and quieter for it — but not by fading the whole
   card: opacity took the dose, the count and "all taken" under 4.5:1.
   The pill steps back and the name greys; every letter stays readable. */
.medcard.complete .med-pill { opacity: .6; }
.medcard.complete .med-name { color: var(--text-dim); }
.medcard-top { display: flex; align-items: center; gap: 11px; }
.medcard-id { flex: 1; min-width: 0; }
.med-progress {
  flex: 0 0 auto; font-size: .78rem; font-weight: 600; color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}
.medcard-next {
  display: flex; align-items: center; gap: 10px; margin-top: 11px;
  padding-top: 11px; border-top: 1px solid var(--hairline-dim);
}
.next-label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.next-tag {
  font-size: .62rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-mute);
}
html[dir="rtl"] .next-tag { letter-spacing: 0; }
.next-time {
  font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.take-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-radius: 999px; border: none; cursor: pointer;
  font: inherit; font-size: .84rem; font-weight: 600; color: var(--on-accent);
  background: linear-gradient(180deg, var(--btn), var(--btn-2));
  transition: transform .16s var(--ease);
}
.take-btn:active { transform: scale(.95); }
.take-btn .tick { display: grid; place-items: center; width: 15px; height: 15px; }
.take-btn svg { width: 15px; height: 15px; }
.medcard-done {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hairline-dim);
  font-size: .82rem; font-weight: 600; color: var(--accent-ink);
}

/* ---------- collapsible meal rows ---------- */
.meal { border-bottom: 1px solid var(--hairline-dim); padding: 4px 0; }
/* of-type, not child. The rule between two meals should not be drawn
   after the last one — which :last-child said correctly until the
   craving link was added at the foot of the card and became the last
   child itself. The final meal then kept its separator, and the link
   drew its own twelve pixels below it: two hairlines with a gap, on
   every expanded meal. The meals are the only divs in this card. */
.meal:last-of-type { border-bottom: none; }
.meal-head { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.meal-check {
  flex: 0 0 auto; width: 26px; height: 26px; padding: 0; cursor: pointer;
  border-radius: 50%; border: 2px solid var(--text-mute);
  display: grid; place-items: center; background: none;
  color: var(--on-bright); transition: .18s var(--ease);
}
.meal-check.on { background: var(--accent); border-color: var(--accent); }
.meal-check svg { opacity: 0; width: 14px; height: 14px; }
.meal-check.on svg { opacity: 1; }

.meal-title {
  flex: 1; min-width: 0; text-align: start; cursor: pointer;
  background: none; border: none; font: inherit; color: inherit; padding: 0;
  display: flex; flex-direction: column; gap: 1px;
}
/* Which meal this is — and, on the next one, a pill saying so — at the
   note size: it is the most important fact in the row, and at 10px a
   55-year-old at arm's length could not read it. */
.meal-slot {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-mute); font-weight: 600;
}
html[dir="rtl"] .meal-slot { letter-spacing: 0; }
.meal.isnext .meal-slot { color: var(--accent-ink); }
.meal-name { font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.meal.done .meal-name { text-decoration: line-through; color: var(--text-dim); }
.meal.done .meal-check { opacity: .8; }

.chev {
  flex: 0 0 auto; width: 28px; height: 28px; padding: 0; cursor: pointer;
  border: none; background: none; color: var(--text-mute);
  display: grid; place-items: center;
  transition: transform .22s var(--ease);
}
.chev svg { width: 17px; height: 17px; }
.chev.up { transform: rotate(180deg); }

.meal-body { padding: 0 0 12px 36px; animation: fade .2s var(--ease); }
html[dir="rtl"] .meal-body { padding: 0 36px 12px 0; }
.meal-body .btn { width: auto; display: inline-block; margin-top: 9px; padding: 7px 14px; }

.link-btn {
  background: none; border: none; cursor: pointer; padding: 0;
  font: inherit; font-size: .76rem; font-weight: 600; color: var(--accent-ink);
  position: relative;
}
/* The reach around a link-btn is set further down, beside the other
   hit-area extensions — see the block near .icon-btn::after. */

/* ---------- shopping list ---------- */
.shopcat-head {
  display: flex; align-items: center; gap: 9px; width: 100%; cursor: pointer;
  padding: 11px 12px; border-radius: var(--r-md);
  background: var(--glass-sunk); border: 1px solid var(--hairline-dim);
  font: inherit; color: var(--text);
}
.shopcat.open .shopcat-head { border-radius: var(--r-md) var(--r-md) 0 0; border-bottom: none; }
.shopcat-name { flex: 1; min-width: 0; text-align: start; font-size: .87rem; font-weight: 600; }
.shopcat-count {
  font-size: .74rem; font-weight: 600; color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}
.shopcat-count.all { color: var(--accent-ink); }

.shop-items {
  border-radius: 0 0 var(--r-md) var(--r-md);
  border: 1px solid var(--hairline-dim); border-top: none;
  overflow: hidden;
}
.shop-row {
  display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer;
  padding: 10px 12px; border-bottom: 1px solid var(--hairline-dim);
  background: none; border-left: none; border-right: none; border-top: none;
  font: inherit; color: var(--text); text-align: start;
}
.shop-row:last-child { border-bottom: none; }
.shop-box {
  flex: 0 0 auto; width: 21px; height: 21px; border-radius: 6px;
  border: 2px solid var(--text-mute); display: grid; place-items: center;
  color: var(--on-bright); transition: .16s var(--ease);
}
.shop-box svg { opacity: 0; width: 12px; height: 12px; }
.shop-row.on .shop-box { background: var(--accent); border-color: var(--accent); }
.shop-row.on .shop-box svg { opacity: 1; }
.shop-row.on .shop-name { text-decoration: line-through; color: var(--text-mute); }

/* ---------- home customisation ---------- */
.secrow {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--hairline-dim);
}
.secrow:last-child { border-bottom: none; }
.secrow.off .rlabel { color: var(--text-mute); }
.secrow .icon-btn:disabled { opacity: .3; cursor: default; }

/* ---------- calendar ---------- */
.date-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer;
  padding: 13px; border-radius: 14px;
  background: var(--glass-sunk); border: 1px solid var(--hairline);
  font: inherit; color: var(--text); text-align: start;
}
.date-btn svg { width: 18px; height: 18px; color: var(--text-dim); flex: 0 0 auto; }

.cal {
  border-radius: var(--r-md); padding: 10px;
  background: var(--glass-sunk); border: 1px solid var(--hairline-dim);
}
.cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cal-month { flex: 1; text-align: center; font-weight: 600; font-size: .95rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-grid.weekdays { margin-bottom: 4px; }
.cal-wd {
  text-align: center; font-size: .64rem; font-weight: 600;
  color: var(--text-mute); padding: 4px 0;
}
.cal-cell {
  aspect-ratio: 1; display: grid; place-items: center; cursor: pointer;
  border-radius: 10px; border: 1px solid transparent; background: none;
  font: inherit; font-size: .84rem; color: var(--text);
  font-variant-numeric: tabular-nums;
  transition: .14s var(--ease);
}
.cal-cell.empty { cursor: default; }
.cal-cell:disabled { opacity: .25; cursor: default; }
.cal-cell.now { border-color: color-mix(in srgb, var(--accent) 50%, transparent); font-weight: 600; }
.cal-cell.sel {
  background: linear-gradient(180deg, var(--btn), var(--btn-2));
  color: #fff; font-weight: 600; border-color: transparent;
}

/* concrete examples under each avoid tile */
.avoid-eg {
  font-size: .63rem; color: var(--text-mute); line-height: 1.3;
  margin-top: 1px;
}
/* six tiles read better two-up than three-up now they carry examples */
.avoid-grid { grid-template-columns: repeat(2, 1fr); }
.avoid-tile { padding: 12px 9px 10px; }

/* ---------- More: grouped menu ---------- */
.card.menu { padding: 0; overflow: hidden; }

/* The fold at the foot of the More menu. Deliberately not a menu row —
   it does not go anywhere, so it does not get a chevron or a glyph. */
.menu-row {
  display: flex; align-items: center; gap: 12px; width: 100%; cursor: pointer;
  padding: 13px 15px; border: none; border-bottom: 1px solid var(--hairline-dim);
  background: none; font: inherit; color: var(--text); text-align: start;
}
.menu-row:last-child { border-bottom: none; }
.menu-row:active { background: var(--glass-sunk); }
.menu-glyph {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; font-size: 1rem;
  background: var(--glass-sunk); border: 1px solid var(--hairline-dim);
}
.menu-label { flex: 1; min-width: 0; font-size: .92rem; font-weight: 500; }
.menu-value { font-size: .82rem; color: var(--text-mute); white-space: nowrap; }
.menu-chev { flex: 0 0 auto; display: grid; place-items: center; color: var(--text-mute); }
.menu-chev svg { width: 16px; height: 16px; transform: rotate(-90deg); }
html[dir="rtl"] .menu-chev svg { transform: rotate(90deg); }

/* ---------- More: subpage ---------- */
.back-btn {
  display: inline-flex; align-items: center; gap: 3px; cursor: pointer;
  background: none; border: none; padding: 4px 0 0; margin-bottom: 4px;
  font: inherit; font-size: .9rem; font-weight: 500; color: var(--accent-ink);
  position: relative; min-block-size: 44px;
}
/* Back is the most-pressed control on every subpage and it was 42
   tall with nothing either side of the word. */
.back-btn::after { content: ''; position: absolute; inset: 0 -12px; }
.back-chev { display: grid; place-items: center; }
.back-chev svg { width: 18px; height: 18px; transform: rotate(90deg); }
html[dir="rtl"] .back-chev svg { transform: rotate(-90deg); }
.subpage-title {
  font-size: 1.4rem; font-weight: 600; letter-spacing: -.02em;
  margin: 2px 0 14px; text-transform: none; color: var(--text);
}

.craving-line { font-size: 1.1rem; font-weight: 600; line-height: 1.45; }
.craving-do { font-size: .88rem; color: var(--text-dim); margin: 8px 0 0; line-height: 1.5; }