/* Biskal - one stylesheet for every page. Colors are tokens; dark mode follows the system
   unless the settings pick a theme (data-theme on <html>). */

/* The safe areas around a notch, a rounded corner or the home bar: env() on the web and iOS,
   the variables Capacitor sets on Android (edge to edge) */
:root {
  --sa-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --sa-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
  --sa-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --sa-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
}
:root {
  --bg: #f1f5f3;
  --surface: #ffffff;
  --surface-2: #f6f9f7;
  --text: #15241f;
  --muted: #55655e;
  --border: #dfe8e3;
  --brand: #0a6b4c;
  --accent: #0c7553;
  --accent-text: #ffffff;
  --good: #0f7448;
  --warn: #c62f25;
  --protein-ink: #9a5a00;
  --carbs-ink: #0a6f68;
  --fat-ink: #6b3db5;
  --limit: #8792a8;
  --protein: #e08a00;
  --carbs: #0f9b91;
  --fat: #8a55d6;
  --track: #e3ebe7;
  --switch-off: #c5d2cb;
  --row-alt: #f4f8f6;
  --stage: #e6f2ec;
  --stage-glow: #ffffff;
  --red-label: #e2231a;
  --art-line: #2b3448;
  --art-shadow: rgba(16, 24, 40, .08);
  --glass: rgba(120, 170, 230, .14);
  --hero: linear-gradient(165deg, #0a5a42 0%, #0e7a57 55%, #2e8464 100%);
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 20px rgba(16, 24, 40, .06);
  --radius: 18px;
  /* a day over its goal on the panel (its arc and bars): on the light look a lighter coral red, brighter
     than the panel's colour (a red as bright as a blue panel shimmers against it, #d9564b on the sky's);
     the dark look's darker panels take a stronger one */
  --over-red: #ff8a7a;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1412; --surface: #151e1b; --surface-2: #1a2522; --text: #e6efeb; --muted: #97a8a1; --border: #26332e;
    --brand: #1aa575; --accent: #3cc391; --accent-text: #0b1020; --good: #3cc88a; --warn: #ff7b6b; --limit: #7d889e;
    --protein: #f3b443; --carbs: #3ccabf; --fat: #b38cf2; --protein-ink: #f3b443; --carbs-ink: #3ccabf; --fat-ink: #b38cf2; --track: #24302c; --switch-off: #3a4944; --row-alt: #1a2421; --stage: #1b2724;
    --stage-glow: #2b3546; --red-label: #d8281f; --art-line: #c9d2e3; --art-shadow: rgba(0, 0, 0, .35); --glass: rgba(120, 170, 230, .1);
    --hero: linear-gradient(165deg, #0a3d30 0%, #0f5a45 55%, #1c7d5f 100%); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
    --over-red: #ff6a5c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1412; --surface: #151e1b; --surface-2: #1a2522; --text: #e6efeb; --muted: #97a8a1; --border: #26332e;
  --brand: #1aa575; --accent: #3cc391; --accent-text: #0b1020; --good: #3cc88a; --warn: #ff7b6b; --limit: #7d889e;
  --protein: #f3b443; --carbs: #3ccabf; --fat: #b38cf2; --protein-ink: #f3b443; --carbs-ink: #3ccabf; --fat-ink: #b38cf2; --track: #24302c; --switch-off: #3a4944; --row-alt: #1a2421; --stage: #1b2724;
  --stage-glow: #2b3546; --red-label: #d8281f; --art-line: #c9d2e3; --art-shadow: rgba(0, 0, 0, .35); --glass: rgba(120, 170, 230, .1);
  --hero: linear-gradient(165deg, #0a3d30 0%, #0f5a45 55%, #1c7d5f 100%); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
  --over-red: #ff6a5c;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* A double tap never zooms the page (pinching still does, for whoever needs it larger) */
html, body { touch-action: manipulation; }
/* Nothing on the page is selected by a long press or a double tap, and no callout opens over it;
   the fields stay selectable, to edit what is typed in them */
html { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
:is(input, textarea, select, [contenteditable="true"], [contenteditable="true"] *) { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
/* a link, a picture or a drawing is never dragged out of the page (a long press on a tile showed the
   link's address, capacitor://localhost#…, floating under the finger) */
a, img, svg, [href] { -webkit-user-drag: none; user-drag: none; }
/* An empty field that follows its text's direction shows its Hebrew hint from the right (dir=auto
   alone would turn it left-to-right and cut the hint's start off) */
input[dir="auto"]:placeholder-shown, textarea[dir="auto"]:placeholder-shown { direction: rtl; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: "Rubik", "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.5;
}
a { color: var(--accent); }
img { max-width: 100%; }
h1, h2, h3, h4 { line-height: 1.25; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.note { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
/* a note (a part's explanation): an "i" in a circle before its first line, in the note's own colour
   and size, its other lines in line with the text (the glyph of settings.js's speech tip, as a mask).
   Not on the notes that say something else (done, a warning, the credits' footer) or have their own
   look; a centred note has it in the line */
:root { --note-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 11v6M12 7.6v.01'/%3E%3C/svg%3E"); }
.note:not(.ok, .warn-note, .credits-foot, .wi-note, .skin-note, .speech-tip, .health-consent, .center) { position: relative; display: block; padding-inline-start: 1.6em; }
.note:not(.ok, .warn-note, .credits-foot, .wi-note, .skin-note, .speech-tip, .health-consent)::before { content: ""; position: absolute; inset-inline-start: 0; top: .18em; top: calc((1lh - 1.15em) / 2);
  width: 1.15em; height: 1.15em; background: currentColor; opacity: .8; -webkit-mask: var(--note-i) center / contain no-repeat; mask: var(--note-i) center / contain no-repeat; }
.note.center::before { position: static; display: inline-block; vertical-align: -.2em; margin-inline-end: .4em; }
.error { color: var(--warn); }
.icon { flex: none; }
[hidden] { display: none !important; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 30; background: var(--hero); color: #fff; box-shadow: 0 4px 18px rgba(8, 60, 45, .18); }
/* The page's width: a phone column, wider on a computer and on an iPad (the 12.9" upright, any on its side) */
:root { --page: 920px; }
@media (min-width: 1000px) { :root { --page: 1200px; } }
@media (min-width: 1500px) { :root { --page: 1320px; } }
@media (min-width: 700px) and (pointer: coarse) { :root { --page: 100%; } }
.top-inner { max-width: var(--page); margin: 0 auto; padding: calc(10px + var(--sa-top)) 16px 0; }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.logo { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 700; font-size: 20px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
/* Back and forward (app.js historyStep): on a computer and an iPad; a phone has its bottom bar */
/* back and forward: one pill of two round buttons, in the bell's and the access button's round look */
.hist-nav { display: none; gap: 0; margin-inline-end: 4px; padding: 2px; border-radius: 999px; align-items: center;
  border: 2px solid rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.hist-nav .hero-btn { width: 34px; height: 34px; border-radius: 50%; background: transparent; transition: background .2s; }
.hist-nav .hero-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .22); }
.hist-nav .hero-btn + .hero-btn { margin-inline-start: 1px; }
.hist-nav .hero-btn + .hero-btn::before { content: ""; position: absolute; inset-inline-end: 100%; top: 9px; bottom: 9px; width: 1px; background: rgba(255, 255, 255, .25); }
.hist-nav .hero-btn:disabled { opacity: .35; cursor: default; }
/* The day's arrows and calendar in the header (top-days.js): one pill in the clock's look beside it, the
   day between its arrows with a thin line on each side (no frame inside a frame), the way back to today
   after them. The arrows stay where they are from day to day (the day a set width), for tap after tap */
.top-days { display: none; grid-column: 1; justify-self: start; align-items: center; gap: 0; height: 40px; padding: 0 3px; border-radius: 999px; box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); color: #fff; }
.td-btn { position: relative; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; transition: background .2s; }
.td-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .22); }
.td-btn:disabled { opacity: .35; cursor: default; }
.td-today { margin-inline-start: 3px; }
.td-today::before { content: ""; position: absolute; inset-inline-end: calc(100% + 1px); top: 9px; bottom: 9px; width: 1px; background: rgba(255, 255, 255, .25); }
.td-today[hidden] { display: none; }
.td-day { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 10.5em; height: 34px; margin-inline: 4px; padding: 0 14px;
  border: 0; border-radius: 10px; background: transparent; color: #fff; font: inherit; white-space: nowrap; cursor: pointer; transition: background .2s; }
.td-day::before, .td-day::after { content: ""; position: absolute; top: 8px; bottom: 8px; width: 1px; background: rgba(255, 255, 255, .24); }
.td-day::before { inset-inline-start: -4px; }
.td-day::after { inset-inline-end: -4px; }
.td-day:hover { background: rgba(255, 255, 255, .12); }
.td-day svg { opacity: .85; }
.td-day > span { display: inline-flex; align-items: baseline; gap: 6px; }
.td-day b { font-size: 15px; font-weight: 800; }
.td-day small { font-size: 12.5px; font-weight: 600; opacity: .82; }
.top-days :is(button):focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
@media (min-width: 700px) { .hist-nav { display: inline-flex; } }
.hero-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 0;
  background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; text-decoration: none; position: relative;
}
.hero-btn:hover { background: rgba(255, 255, 255, .24); }
.bell { position: relative; }
/* the bell: a circle the size of the avatar next to it */
.bell .hero-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .32);
  background: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); transition: background .2s, transform .2s;
}
.bell .hero-btn:hover { background: rgba(255, 255, 255, .24); transform: translateY(-1px); }
.bell .hero-btn svg { width: 20px; height: 20px; }
.bell .hero-btn.has svg { animation: bell-ring 2.4s ease-in-out 1s 2; transform-origin: 50% 10%; }
@keyframes bell-ring { 0%, 40%, 100% { transform: rotate(0); } 5%, 15%, 25% { transform: rotate(14deg); } 10%, 20%, 30% { transform: rotate(-14deg); } }
@media (prefers-reduced-motion: reduce) { .bell .hero-btn.has svg { animation: none; } }
/* empty, it must not take a row of the button's grid, or the bell sits above the middle */
.bell-count:empty { display: none; }
.bell-count:not(:empty) {
  position: absolute; top: -5px; left: -5px; border: 2px solid var(--brand); min-width: 21px; height: 21px; padding: 0 5px; border-radius: 999px;
  background: #ff5a4f; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center;
}
.bell-panel {
  position: absolute; top: 48px; left: 0; width: min(360px, calc(100vw - 32px)); max-height: 70vh; overflow: auto;
  background: var(--surface); color: var(--text); border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); z-index: 40;
}
.bell-head { position: sticky; top: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--surface); }
.bell-head a { font-size: 13px; }
.bell-tools { display: flex; align-items: center; gap: 12px; }
.bell-clear { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: 0; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: #e5484d; background: color-mix(in srgb, #e5484d 12%, transparent); }
.bell-clear:hover { background: color-mix(in srgb, #e5484d 20%, transparent); }
.bell-hint { display: flex; align-items: flex-start; gap: 7px; margin: 0; padding: 8px 16px; font-size: 12px; line-height: 1.45; color: var(--muted); border-bottom: 1px solid var(--border); }
/* (the drawing by the first line, should the words wrap at a large text size) */
.bell-hint > svg { flex: none; margin-top: .1em; }
/* older days: a quiet pill under the list (settings.js initBell), and a line when there are no more */
.bell-more { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px auto 12px; padding: 7px 16px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--accent); background: transparent; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); }
.bell-more:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.bell-more:disabled { opacity: .6; cursor: default; }
.bell-end { margin: 10px 16px 14px; font-size: 12px; text-align: center; color: var(--muted); }
/* a barcode no database has (app.js notFoundHtml): its drawing and number, then what can be done */
.nf-panel { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-block: 28px 22px; text-align: center; }
.nf-art { position: relative; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 28px; background: color-mix(in srgb, #f59e0b 14%, transparent); }
.nf-art i { position: absolute; top: -6px; inset-inline-start: -6px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-style: normal; font-size: 17px; font-weight: 900; color: #fff; background: #f59e0b; border: 3px solid var(--surface); }
.nf-panel h2 { margin: 6px 0 0; font-size: 24px; }
.nf-code { padding: 4px 14px; border-radius: 999px; font: 700 16px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em; background: var(--row-alt); }
.nf-panel p { margin: 4px 0 6px; max-width: 420px; font-size: 15px; line-height: 1.65; color: var(--muted); }
.nf-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 460px; }
.nf-actions .btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; white-space: nowrap; }
.nf-actions .nf-add { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--accent) 40%, var(--border)); }
.nf-off { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; color: var(--muted); text-decoration: none; }
.nf-off:hover { color: var(--accent); }
@media (max-width: 380px) { .nf-actions { grid-template-columns: minmax(0, 1fr); } }
/* the "i" before a short explanation: as tall as its line, in the look's colour */
/* calm: a faint ring in the text's grey, no colour of its own */
.info-i { flex: none; width: 1.45em; height: 1.45em; color: var(--muted); opacity: .75; }
.info-i .ii-bg { fill: color-mix(in srgb, currentColor 10%, transparent); stroke: currentColor; stroke-opacity: .55; stroke-width: 1.2; }
.info-i .ii-shine { display: none; }
.info-i .ii-dot { fill: currentColor; }
.info-i .ii-stem { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* A notification over the actions a swipe uncovers: delete on the right, pin on the left */
.bell-row { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); max-height: 400px; transition: max-height .25s ease, opacity .25s; }
/* (a row out of the list's view is not laid out until it scrolls near: the list opened at once, not
   after laying out every notification) */
.bell-row { content-visibility: auto; contain-intrinsic-size: auto 84px; }
.bell-row.gone { max-height: 0 !important; opacity: 0; border-bottom-width: 0; }
/* a message opened from its alert (settings.js reveal): the rows laid out for its place, the message
   lit a moment under its words */
#bellPanel.bell-reveal .bell-row { content-visibility: visible; }
.bell-item.bell-lit::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--accent); opacity: 0; animation: bell-lit 2s ease-out; }
@keyframes bell-lit { 0%, 35% { opacity: .26; } 100% { opacity: 0; } }
.bell-item {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; color: inherit; text-decoration: none;
  background: var(--surface); touch-action: pan-y; transition: transform .25s cubic-bezier(.34, 1.3, .64, 1); -webkit-touch-callout: none; user-select: none;
}
.bell-row.swiping .bell-item { transition: none; }
/* (one that leads nowhere of its own: a button, read where it is, looking as the links do) */
button.bell-item { width: 100%; border: 0; border-radius: 0; font: inherit; text-align: start; cursor: pointer; }
/* not read yet: the look's colour behind it, a bar on its side, a dot before the title, the title strong;
   it all goes (softly) once it is read */
.bell-item { transition: transform .25s cubic-bezier(.34, 1.3, .64, 1), background-color .45s, box-shadow .45s; }
.bell-item.unread { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); box-shadow: inset -4px 0 0 var(--accent); }
.bell-item.unread > span { color: var(--text); }
.bell-item.unread b { font-weight: 800; }
.bell-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); animation: bell-dot 2s ease-in-out infinite; }
@keyframes bell-dot { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 10%, transparent); } }
@media (prefers-reduced-motion: reduce) { .bell-dot { animation: none; } }
.bell-row.pinned .bell-item.unread { box-shadow: inset 3px 0 0 #f5a524, inset -4px 0 0 var(--accent); }
.bell-btns button[data-read]:hover { color: var(--accent); }
.bell-item span { font-size: 14px; color: var(--muted); }
.bell-item b { display: flex; align-items: center; gap: 6px; }
.bell-row.pinned .bell-item { box-shadow: inset 3px 0 0 #f5a524; }
.pin-mark { display: inline-flex; color: #f5a524; }
.bell-act { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding: 0 20px; color: #fff; font-weight: 700; opacity: 0; }
.bell-act svg { transition: transform .2s; }
/* dragged right the delete shows on the left, dragged left the pin on the right (the Hebrew way) */
.act-del { justify-content: flex-end; background: #e5484d; }
.act-pin { justify-content: flex-start; background: #e39b1b; }
.bell-row[data-dir="del"] .act-del, .bell-row[data-dir="pin"] .act-pin { opacity: 1; }
.bell-row.armed .bell-act svg { transform: scale(1.3); }
/* Pin and delete as buttons, for a mouse (on hover) and the keyboard (on focus) */
.bell-btns { position: absolute; z-index: 2; top: 8px; left: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.bell-btns button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; cursor: pointer; color: var(--muted); background: var(--surface); }
.bell-btns button[data-del]:hover { color: #e5484d; }
.bell-btns button[data-pin]:hover { color: #e39b1b; }
.bell-row:hover .bell-btns, .bell-row:focus-within .bell-btns { opacity: 1; }
@media (pointer: coarse) { .bell-btns:not(:focus-within) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.bell-empty { padding: 16px; margin: 0; }
/* A window that asks before something can't be undone */
.confirm { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 4px 4px 18px; }
.confirm p.muted { line-height: 1.6; max-width: 46ch; }
.confirm p { margin: 0; }
.confirm-ico { width: 60px; height: 60px; margin-bottom: 6px; border-radius: 50%; display: grid; place-items: center; color: #e5484d; background: color-mix(in srgb, #e5484d 14%, transparent); }
.confirm-title { font-size: 19px; font-weight: 700; }
.confirm .actions { justify-content: center; margin-top: 14px; width: 100%; }
.btn.danger-fill { color: #fff; background: #e5484d; border-color: transparent; }
.btn.danger-fill:hover { background: #d13a3f; }
/* Asking during a fast: the fasting page's colours, and how far along the fast is */
.confirm-primary .confirm-ico { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.confirm-fast .confirm-ico { color: #fff; background: linear-gradient(135deg, #7c5cff, #2eb67d); box-shadow: 0 8px 20px color-mix(in srgb, #7c5cff 35%, transparent); }
.fast-meter { width: min(260px, 100%); margin: 6px auto 2px; display: flex; flex-direction: column; gap: 6px; }
.fast-meter .fm-bar { height: 10px; border-radius: 999px; overflow: hidden; background: var(--border); }
.fast-meter .fm-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7c5cff, #2eb67d); }
.fast-meter .fm-legend { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.fast-meter .fm-legend b { color: var(--text); font-variant-numeric: tabular-nums; }
@media (min-width: 601px) { dialog#dialog.confirm-dlg { width: min(400px, calc(100vw - 24px)); } }

.search-box { position: relative; display: flex; align-items: center; margin: 10px 0 8px; }
/* The pages of the profile menu are about the user, not food: no search field at the top */
/* the pages without the search row (app.js NO_SEARCH): set as the new page comes into the view */
body:is([data-search="off"], [data-search="pad"]) .top .search-box { display: none; }
/* (the header without its search: the same room under its buttons as under the search on the other pages; "off" had none) */
body:is([data-search="off"], [data-search="pad"]) .top-inner { padding-bottom: 13px; }
@media (max-width: 640px) { body:is([data-search="off"], [data-search="pad"]) .top-inner { padding-bottom: 16px; } }
.search-icon { position: absolute; right: 14px; color: var(--muted); pointer-events: none; }
#q {
  width: 100%; min-width: 0; font: inherit; font-size: 18px; padding: 14px 46px 14px 116px;
  border: 2px solid transparent; border-radius: 16px; background: var(--surface); color: var(--text); outline: none;
  box-shadow: 0 2px 10px rgba(10, 30, 90, .15);
}
#q:focus { border-color: #8fe0c0; }
.field-actions { position: absolute; left: 5px; display: flex; gap: 0; }
.field-btn {
  width: 35px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 10px;
  background: transparent; color: var(--accent); cursor: pointer;
}
.field-btn:hover { background: var(--row-alt); }
/* the x that empties the search field (search.js): a small round mark, only while there is text;
   the browser's own x is hidden so there is one */
.field-clear span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--surface); background: color-mix(in srgb, var(--muted) 75%, transparent); transition: background .2s, transform .15s; }
.field-clear:hover span { background: var(--text); }
.field-clear:active span { transform: scale(.88); }
.field-clear:hover { background: transparent; }
#q::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.search-box:has(.field-clear:not([hidden])) #q { padding-left: 152px; }

.suggest {
  position: absolute; top: calc(100% + 6px); right: 0; left: 0; z-index: 35; margin: 0; padding: 6px 0; list-style: none;
  background: var(--surface); color: var(--text); border-radius: 16px; box-shadow: 0 14px 40px rgba(10, 20, 60, .25);
  max-height: min(70vh, 560px); overflow: auto;
}
/* the live list on its way (search.js showSearching): the words searched with the app's three arcs
   turning (as the page loader's), the rows to come shimmering in; or the results before, dimmed, a
   light running along the top. Nothing takes room it did not have */
.sg-wait { display: flex; align-items: center; gap: 10px; padding: 10px 14px 4px; color: var(--muted); font-size: 14.5px; }
.sg-wait b { color: var(--text); font-weight: 700; }
.sw-arcs { position: relative; flex: none; width: 24px; height: 24px; }
.sw-arcs i { position: absolute; border-radius: 50%; border: 2.5px solid transparent; border-top-color: var(--accent); border-inline-start-color: var(--accent); animation: spin .9s linear infinite; }
.sw-arcs i:nth-child(1) { inset: 0; }
.sw-arcs i:nth-child(2) { inset: 4px; opacity: .7; animation-duration: 1.25s; animation-direction: reverse; }
.sw-arcs i:nth-child(3) { inset: 8px; opacity: .45; animation-duration: .7s; }
.sg-skel { display: flex; align-items: center; gap: 12px; padding: 10px 14px; animation: sk-in .35s ease-out both; animation-delay: calc(var(--i) * 70ms); }
.ss-pic { flex: none; width: 44px; height: 44px; border-radius: 12px; }
.ss-lines { flex: 1; display: grid; gap: 8px; }
.ss-lines i { display: block; height: 12px; border-radius: 6px; width: 70%; }
.ss-lines i + i { width: 44%; height: 10px; }
.sg-skel:nth-child(3) .ss-lines i { width: 56%; } .sg-skel:nth-child(3) .ss-lines i + i { width: 36%; }
.ss-pic, .ss-lines i { background: linear-gradient(90deg, color-mix(in srgb, var(--text) 8%, transparent) 25%, color-mix(in srgb, var(--accent) 24%, transparent) 50%, color-mix(in srgb, var(--text) 8%, transparent) 75%);
  background-size: 200% 100%; animation: as-shimmer 1.3s linear infinite; }
@keyframes sk-in { from { opacity: 0; transform: translateY(4px); } }
.suggest.sg-loading > li { opacity: .5; transition: opacity .25s; }
.suggest.sg-loading::before { content: ""; position: sticky; top: 0; z-index: 2; display: block; height: 3px; margin: -6px 12px 3px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent) no-repeat; background-size: 45% 100%; animation: sw-run 1.1s ease-in-out infinite; }
@keyframes sw-run { from { background-position: -60% 0; } to { background-position: 160% 0; } }
@media (prefers-reduced-motion: reduce) { .sw-arcs i, .ss-pic, .ss-lines i, .suggest.sg-loading::before { animation-duration: 3s; } .sg-skel { animation: none; } }
.sg { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border); }
.sg:last-child { border-bottom: 0; }
.sg:hover, .sg.active { background: var(--row-alt); }
.sg-pic { width: 44px; height: 44px; }
.sg-recipe { background: color-mix(in srgb, var(--protein) 20%, var(--stage)); }
.sg-custom { background: color-mix(in srgb, var(--good) 18%, var(--stage)); }
.sg-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sg-name { font-weight: 500; }
.sg-name small { color: var(--muted); font-weight: 400; }
.sg-tag { margin-inline-start: 4px; padding: 0 6px; border-radius: 6px; background: var(--row-alt); }
/* a recipe or a food of the person's own beside its name: a small coloured badge with its sign (search.js kindTag) */
.sg-name .kind-tag { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 6px; padding: 2px 9px 2px 8px; border-radius: 999px; vertical-align: 2px;
  font-size: 11.5px; font-weight: 700; line-height: 1.35; white-space: nowrap; border: 1px solid transparent; }
.kind-tag svg { flex: none; }
.recipe-tag { color: #6d28d9; background: color-mix(in srgb, #8b5cf6 14%, transparent); border-color: color-mix(in srgb, #8b5cf6 30%, transparent) !important; }
.mine-tag { color: #0f766e; background: color-mix(in srgb, #14b8a6 14%, transparent); border-color: color-mix(in srgb, #14b8a6 30%, transparent) !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .recipe-tag { color: #c4b5fd; } :root:not([data-theme="light"]) .mine-tag { color: #5eead4; } }
:root[data-theme="dark"] .recipe-tag { color: #c4b5fd; }
:root[data-theme="dark"] .mine-tag { color: #5eead4; }
.sg-kcal { color: var(--muted); font-size: 15px; }
.sg-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 8px; padding-top: 4px; }
.sg-marks .al-mark { width: 24px; height: 24px; }
.sg-marks .al-mark svg { width: 16px; height: 16px; }
.sg-marks .pref-mark { width: 24px !important; height: 24px !important; }
.sg-marks .pref-marks, .sg-marks .al-marks { margin: 0; gap: 12px; }
.sg-add {
  flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-text); cursor: pointer;
}
.sg-all { padding: 12px 14px; text-align: center; color: var(--accent); font-weight: 500; cursor: pointer; }
.sg-all.active, .sg-all:hover { background: var(--row-alt); }
.sg-empty { padding: 14px; color: var(--muted); text-align: center; }

.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-bottom: 10px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  flex: none; padding: 7px 14px; border-radius: 999px; color: rgba(255, 255, 255, .85); text-decoration: none;
  font-weight: 500; border: 1px solid rgba(255, 255, 255, .25);
}
.tabs a.on { background: #fff; color: var(--brand); border-color: #fff; }

.view { max-width: var(--page); margin: 0 auto; padding: 18px 16px 96px; }
/* On the iPhone (WebKit) parts of a page with a blur behind them (backdrop-filter: the recipe's
   values, the glass cards) were drawn over the header, its menus and the accessibility panel while
   scrolling under them, so a menu seemed to open in the middle of the page. The page is a stacking
   context of its own, under everything that floats, and the floating parts get layers of their own. */
.view { position: relative; z-index: 0; isolation: isolate; }
.menu-panel, .a11y-panel, .a11y-fab, .bottom-nav, .to-top { will-change: transform; }
@media (min-width: 1000px) { .view { padding-inline: 24px; } .top-inner { padding-inline: 24px; } }
.loading { display: grid; place-items: center; padding: 60px 0; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 4px solid var(--track); border-top-color: var(--accent); animation: spin .8s linear infinite; margin: 0 auto 10px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- buttons & forms ---------- */
button, select, input, textarea { font: inherit; color: inherit; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; text-decoration: none; font-weight: 500;
}
.btn:hover { border-color: var(--accent); }
/* a file picker in a button (a label around its input): the input itself over the whole button, unseen,
   so a tap hits it and the picker opens at once (through the label, the phone let a tap go now and then) */
label.btn:has(> input[type="file"]) { position: relative; overflow: hidden; }
/* the body composition's one button: its way in, and under it how (typed, or read from a photo) */
.bc-add [data-bc-add]:has(.bc-add-sub) { flex-direction: column; gap: 1px; line-height: 1.2; }
.bc-add-sub { display: block; font-size: 12px; font-weight: 600; opacity: .8; }
label.btn > input[type="file"] { display: block !important; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  border: 0; opacity: 0; cursor: pointer; font-size: 16px; }
label.btn:has(> input[type="file"]:focus-visible) { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn.primary:hover { filter: brightness(1.05); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--warn); }
.btn.light { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); color: #fff; }
.btn.block { display: flex; width: 100%; }
.btn.small { padding: 6px 12px; font-size: 14px; }
.btn.star.on { color: #e9a800; border-color: #f0c64a; background: color-mix(in srgb, #f5c542 14%, var(--surface)); }
.btn.star.on .icon { fill: #f5c542; }
.pill-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 0; background: var(--accent); color: var(--accent-text); cursor: pointer; text-decoration: none; font-weight: 500; font-size: 14px; }
.pill-btn.ghost { background: transparent; color: inherit; border: 1px solid currentColor; opacity: .9; }
.pill-btn.light { background: rgba(255, 255, 255, .16); color: #fff; }
/* the recipes a page at a time (recipes.js): a soft button under them, how many are left beside it */
.rc-more-wrap { display: flex; justify-content: center; margin: 16px 0 8px; }
.rc-more-wrap:empty { display: none; }
/* the filter sheet's clear while nothing is picked: dimmer (it still says so when tapped) */
.btn.rc-clear-idle { opacity: .55; }
.btn.rc-more { gap: 8px; padding: 10px 18px 10px 14px; border-radius: 999px; font-weight: 700; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); }
.btn.rc-more small { min-width: 26px; padding: 1px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #fff; background: var(--accent); }
.btn.rc-more:active { transform: scale(.97); }
/* the next recipes on their way, and as they come (recipes.js loadMore) */
.rc-loading { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 18px; border-radius: 999px; font-size: 14.5px; font-weight: 700;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border)); }
.rc-spin { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); animation: rc-spin .8s linear infinite; }
@keyframes rc-spin { to { transform: rotate(360deg); } }
.rc-in { animation: rc-in .42s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes rc-in { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .rc-spin, .rc-in { animation: none; } }
html[data-a11y~="motion"] .rc-spin, html[data-a11y~="motion"] .rc-in { animation: none; }
/* the recipes' "more filters": a pill of the hero's own glass, the sliders' drawing, and the number of
   filters on in a small white badge (none: no badge) */
.pill-btn.rc-filters { gap: 7px; padding: 7px 14px 7px 12px; font-weight: 600; background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
  transition: background .2s, transform .15s; }
.pill-btn.rc-filters:active { transform: scale(.96); }
.pill-btn.rc-filters.on { background: #fff; color: var(--brand); box-shadow: none; }
.rc-fcount { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 800;
  background: #fff; color: var(--brand); }
.pill-btn.rc-filters.on .rc-fcount { background: var(--brand); color: #fff; }
.rc-fcount:empty { display: none; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.icon-btn:hover { background: var(--row-alt); color: var(--text); }
.round-btn {
  width: 52px; height: 52px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--surface); color: var(--accent); font-size: 28px; box-shadow: var(--shadow);
}
.round-btn.big { width: 72px; height: 72px; font-size: 34px; }
.round-btn.filled { background: var(--accent); color: var(--accent-text); }
.link-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; padding: 12px; border: 0; border-top: 1px solid var(--border); background: transparent; color: var(--accent); cursor: pointer; font-weight: 500; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.actions.sticky { position: sticky; bottom: 0; background: var(--surface); padding: 12px 0 4px; }
/* a window's lone "הבנתי" (or closing button): in the middle, not at the row's start */
.actions:has(> .btn:only-child:is([data-close], [data-ait-close], [data-close-legal])) { justify-content: center; }
.actions > .btn:only-child:is([data-close], [data-ait-close], [data-close-legal]) { min-width: 180px; }

.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); }
.field input, .field select, .field textarea, .edit-form textarea, .unit-row input, .scan-manual input, #recipeQ, .ing-add input {
  width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font-size: 16px;
}
.field input:focus, .field select:focus, textarea:focus, .unit-row input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); border-color: var(--accent); }
.field.check { flex-direction: row; align-items: center; gap: 8px; color: var(--text); }
.field.check input { width: auto; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
/* (the values' fields level with each other in a row, a name of two lines too) */
.form-grid.nutrients { align-items: end; }
.edit-form { display: flex; flex-direction: column; gap: 14px; }
.edit-form h3 { margin: 10px 0 0; }
/* A section's title in a long form: room above it, close to the panel it names */
.edit-form > h3.list-title { margin: 30px 4px 0; }
.edit-form > h3.list-title + .panel { margin-top: 0; }
.big-field input { font-size: 28px; font-weight: 700; text-align: center; }
.with-unit { display: flex; align-items: center; gap: 10px; }
.with-btn { display: flex; gap: 8px; }
input.filled { background: color-mix(in srgb, var(--good) 10%, var(--surface)); border-color: var(--good); }
.radio-list { display: flex; flex-direction: column; gap: 8px; }
.radio-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; cursor: pointer; }
.radio-row:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.radio-row span { display: flex; flex-direction: column; }
.radio-row input { accent-color: var(--accent); width: 18px; height: 18px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; }
.chip span, .chip-btn {
  display: inline-block; padding: 7px 14px; border-radius: 12px; border: 1.5px solid var(--border); cursor: pointer;
  background: var(--surface); color: var(--text); font-weight: 500; font-size: 15px;
}
.chip input:checked + span, .chip-btn.on { border-color: var(--accent); background: var(--accent); color: var(--accent-text); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip-btn.warn.on { border-color: var(--warn); background: var(--warn); color: #fff; }
.chips.light .chip-btn { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .35); color: #fff; }
.chips.light .chip-btn.on { background: #fff; color: var(--brand); border-color: #fff; }

.segmented { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--track); gap: 4px; }
.segmented.wide { display: flex; }
.segmented button { flex: 1; padding: 8px 14px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; font-weight: 500; color: var(--muted); }
.segmented button[aria-selected="true"], .segmented button[aria-checked="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

/* switches */
.switch, .toggle-row { position: relative; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; color: var(--muted); user-select: none; }
.switch input, .toggle-row input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.track {
  position: relative; flex: none; width: 52px; height: 30px; border-radius: 999px; cursor: pointer;
  background: var(--switch-off); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .18);
  transition: background .25s ease, box-shadow .25s ease;
}
.track::after {
  content: ""; position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff no-repeat center / 14px; box-shadow: 0 2px 6px rgba(0, 0, 0, .28);
  transition: transform .32s cubic-bezier(.34, 1.56, .64, 1);
}
/* On: green with a check in the knob, which moves to the left (the "on" side in Hebrew) */
input:checked + .track {
  background: linear-gradient(135deg, #22b883, #0e8a5f);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12), 0 0 0 4px color-mix(in srgb, var(--good) 16%, transparent);
}
input:checked + .track::after {
  transform: translateX(-22px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312936a' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.toggle-row:hover .track, .switch:hover .track { filter: brightness(1.04); }
input:active + .track::after { box-shadow: 0 2px 8px rgba(0, 0, 0, .32), 0 0 0 6px rgba(255, 255, 255, .18); }
input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- dialog & toast ---------- */
dialog#dialog {
  width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 22px;
  background: var(--surface); color: var(--text); box-shadow: 0 24px 80px rgba(0, 0, 0, .35); overflow: hidden;
}
/* The head stays, the content scrolls under it, inside the window's frame: its scrollbar is thin and
   rounded, and the same room is kept on the other side, so the margins stay equal */
dialog#dialog[open] { display: flex; flex-direction: column; }
/* isolated: everything placed in it with a layer of its own (a photo, its badges) belongs to the part
   that scrolls. Otherwise it belonged to the window, and on the iPhone, which scrolls such a part apart
   from the page, those layers lagged or ran ahead of the rest: one card drawn over the next as it scrolled */
dialog#dialog > .dlg-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; isolation: isolate;
  scrollbar-gutter: stable both-edges; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 26%, transparent) transparent;
}
dialog#dialog.wide { width: min(720px, calc(100vw - 24px)); }
/* a tall window across on an iPad and a computer (core.js autoWide): its parts two to a row, the first on
   the right; its head (a picture with its words), its choices' bar, its notes and its buttons across the
   row (a grid: the columns of print ran the parts into one column in WebKit) */
@media (min-width: 900px) and (min-height: 500px) {
  dialog#dialog.auto-wide { width: min(880px, calc(100vw - 48px)); }
  dialog#dialog.auto-wide > .dlg-body > :first-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 30px; align-items: start; }
  dialog#dialog.auto-wide > .dlg-body > :first-child > * { min-width: 0; margin: 0; }
  dialog#dialog.auto-wide > .dlg-body > :first-child > :is(:first-child:is([class*="hero"], [class*="head"], [class*="intro"], [class*="top"], header, h3, p),
    .actions, [class*="actions"], .btn, a.btn, button.btn, [class*="-go"], [class*="-foot"], [class*="send"], [class*="note"], .segmented, [role="tablist"], :last-child:nth-child(even)) { grid-column: 1 / -1; }
  /* a profile editor across (profile-edit.js editor): its choices on the right, where Hebrew starts (the
     user, of the address: "it is Hebrew, so the buttons on the right and the description with its text on
     the left"), and its picture with what it tells under it (the example, the month's change, the plate's
     shares) on the left, beside them from the top (their spare height on a row of their own, so the
     picture and its words stay together) */
  dialog#dialog.auto-wide form.pe:has(> .pe-stage):has(> :is(.pe-cards, .pe-rates)) { grid-template-rows: auto auto 1fr; }
  dialog#dialog.auto-wide form.pe:has(> .pe-stage):has(> :is(.pe-cards, .pe-rates)) > :is(.pe-stage, .pe-readout, .pe-legend) { grid-column: 2; }
  dialog#dialog.auto-wide form.pe:has(> .pe-stage):has(> :is(.pe-cards, .pe-rates)) > :is(.pe-cards, .pe-rates) { grid-column: 1; grid-row: 1 / span 3; }
  /* the kinds of food: all of them across, five to a row, a short last row centred */
  dialog#dialog.auto-wide form.pef-preferences > .pe-prefs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; }
  dialog#dialog.auto-wide form.pef-preferences > .pe-prefs > .pe-pref { flex: 0 0 calc((100% - 40px) / 5); }
  /* the sensitivities: the foods on the right, the conditions and what each chosen one means on the left */
  dialog#dialog.auto-wide form.pef-restrictions { grid-template-rows: auto auto auto 1fr; }
  dialog#dialog.auto-wide form.pef-restrictions > .pe-allergy:not(.pe-conds) { grid-column: 1; grid-row: 1 / span 4; }
  dialog#dialog.auto-wide form.pef-restrictions > :is(.pe-cond-title, .pe-conds, .pe-kb) { grid-column: 2; }
  dialog#dialog.auto-wide form.pef-restrictions > .pe-kb:empty { display: none; }
}
dialog#dialog::backdrop { background: rgba(10, 16, 30, .5); backdrop-filter: blur(2px); }
.dlg-head { flex: none; position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; background: var(--surface); border-bottom: 1px solid var(--border); }
.dlg-head h2 { margin: 0; font-size: 20px; }
/* back to the window this one was opened from */
.dlg-back { margin-inline-end: -6px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.dlg-back:hover { background: var(--accent); color: #fff; }
.dlg-head h2:has(+ .dlg-back) { flex: 1; }
.dlg-body { padding: 18px 20px 20px; }
/* Opening and closing (core.js openDialog): a window pops in on a wide screen; on a phone a sheet
   rises from the bottom, follows a finger that drags it down, and closes or settles back */
@keyframes dlg-pop-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes dlg-pop-out { to { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-down { to { transform: translateY(105%); } }
@keyframes backdrop-in { from { opacity: 0; } }
@keyframes backdrop-out { to { opacity: 0; } }
dialog#dialog[open] { animation: dlg-pop-in .28s cubic-bezier(.2, .9, .3, 1.15); }
dialog#dialog[open]::backdrop { animation: backdrop-in .3s ease-out; }
dialog#dialog.closing { animation: dlg-pop-out .19s ease-in forwards; pointer-events: none; }
dialog#dialog.closing::backdrop { animation: backdrop-out .19s ease-in forwards; }
.dlg-grab { display: none; }
@media (max-width: 600px) {
  dialog#dialog[open] { animation: sheet-up .44s cubic-bezier(.22, 1, .36, 1); }
  dialog#dialog.closing { animation: sheet-down .26s cubic-bezier(.4, 0, .9, .6) forwards; }
  dialog#dialog.closing::backdrop { animation-duration: .26s; }
  dialog#dialog.settling { transition: transform .32s cubic-bezier(.22, 1.3, .36, 1); }
  dialog#dialog.dragging { user-select: none; }
  dialog#dialog { box-shadow: 0 -10px 40px rgba(0, 0, 0, .28); }
  /* The handle: a pill at the top that says the sheet can be pulled down */
  .dlg-grab { display: block; position: absolute; top: 7px; left: 50%; width: 42px; height: 5px; margin-left: -21px; border-radius: 999px; background: color-mix(in srgb, var(--text) 24%, transparent); transition: width .2s, background .2s; }
  dialog#dialog.dragging .dlg-grab { width: 54px; margin-left: -27px; background: color-mix(in srgb, var(--text) 40%, transparent); }
  .dlg-head { padding-top: 24px; touch-action: none; cursor: grab; border-radius: 22px 22px 0 0; }
  .dlg-body { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  dialog#dialog[open], dialog#dialog[open]::backdrop, dialog#dialog.closing, dialog#dialog.closing::backdrop { animation: none; }
}
html[data-a11y~="motion"] dialog#dialog[open], html[data-a11y~="motion"] dialog#dialog[open]::backdrop { animation: none; }
@media (max-width: 600px) {
  /* 100%, not 100vw: on a computer 100vw includes the page's scrollbar and the sheet would overflow it */
  dialog#dialog, dialog#dialog.wide { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 22px 22px 0 0; max-height: 92vh; }
  /* Above the keyboard, rising with it (keyboard.js measures it, in the app and in a phone's browser) */
  dialog#dialog { margin-bottom: var(--kb, 0px); max-height: calc(92dvh - var(--kb, 0px));
    transition: margin-bottom .32s cubic-bezier(.33, .8, .3, 1), max-height .32s cubic-bezier(.33, .8, .3, 1); }
}
/* While typing, the bars and buttons at the bottom of the screen step aside */
html.kb-open .bottom-nav, html.kb-open .to-top, html.kb-open .a11y-fab { display: none; }
#toast {
  position: fixed; top: auto; right: auto; bottom: 22px; left: 50%; margin: 0; border: 0; overflow: visible; transform: translate(-50%, 30px); z-index: 120; opacity: 0; pointer-events: none;
  padding: 12px 18px; border-radius: 14px; background: #1c2333; color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  transition: opacity .25s, transform .25s;
  /* as wide as its words, up to a comfortable line: placed from the middle (left: 50%), its width was
     worked out in the half of the screen right of it, and a short message wrapped into two lines */
  box-sizing: border-box; width: max-content; max-width: min(520px, calc(100vw - 32px));
}
#toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#toast a { color: var(--glow); }

/* ---------- page parts ---------- */
.page-head { margin: 4px 0 14px; }
.page-head h2 { margin: 0; font-size: 26px; }
.row-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.row-head.small { font-size: 15px; margin: 10px 0 8px; }
/* back to the page before: in the title's row, at the left end, its arrow pointing out of the page */
.back-link { display: flex; width: fit-content; margin-inline-start: auto; align-items: center; gap: 4px; margin-bottom: 4px; text-decoration: none; font-weight: 500; }
.page-head:has(> .back-link) { display: flex; align-items: center; gap: 12px; }
.page-head > .back-link { order: 2; flex: none; margin-bottom: 0; padding: 6px 4px; }
/* the page's way back: a round arrow at the far side of the title (core.js backButton) */
.page-head:has(> .back-btn) { display: flex; align-items: center; gap: 12px; }
.page-head > .back-btn { order: 2; margin-inline-start: auto; }
.back-btn { flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; text-decoration: none;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow: 0 6px 14px -10px color-mix(in srgb, var(--accent) 80%, transparent); transition: transform .15s, background .2s, color .2s; }
.back-btn:hover { background: var(--accent); color: #fff; }
.back-btn:active { transform: scale(.92); }
.back-btn svg { transition: transform .2s; }
.back-btn:hover svg { transform: translateX(-2px); }
.panel { margin-top: 16px; padding: 20px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel h3 { margin: 0 0 14px; font-size: 18px; }
.panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; margin-bottom: 14px; }
.panel-head h3 { margin: 0; }
.list-title { margin: 26px 4px 10px; font-size: 18px; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--row-alt); border: 1px solid var(--border); color: var(--muted); font-size: 13px; }
.empty-state { display: grid; justify-items: center; gap: 6px; padding: 30px 10px; text-align: center; color: var(--muted); }
.empty { color: var(--muted); }
.badge-icon { display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: var(--badge); box-shadow: 0 4px 10px color-mix(in srgb, var(--badge) 35%, transparent); }

/* pictures */
.pic { width: 100%; aspect-ratio: 1; border-radius: 14px; background: var(--row-alt); }
.pic.photo img { object-fit: cover; }
.detail .pic.photo img { object-fit: contain; }
.detail-recipe .pic.photo img { object-fit: cover; }
.pic.cutout img { padding: 10%; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .18)) drop-shadow(0 2px 3px rgba(0, 0, 0, .12)); transition: opacity .3s, transform .25s ease; }
.card:hover .pic.cutout img { transform: translateY(-4px) scale(1.03); }

/* ---------- home ---------- */
.home-hero { margin: -18px -16px 0; padding: 6px 16px 14px; background: var(--hero); color: #fff; border-radius: 0 0 28px 28px; }
.day-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.day-title { position: relative; font-size: 20px; font-weight: 700; cursor: pointer; }
.day-title input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 12px 0; }
.wday { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0; border-radius: 14px; color: rgba(255, 255, 255, .85); text-decoration: none; font-size: 14px; }
.wday b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 16px; }
.wday.logged b { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.wday.on { background: rgba(255, 255, 255, .16); }
.wday.on b { background: #fff; color: var(--brand); }
.wday.future { opacity: .45; pointer-events: none; }
.carousel { overflow: hidden; position: relative; }
.slides { display: flex; transition: transform .35s ease; }
.slide { flex: 0 0 100%; min-height: 172px; padding: 6px 4px; }
.slide h3 { margin: 0 0 10px; font-size: 20px; }
.car-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.car-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .08); color: #fff; display: grid; place-items: center; cursor: pointer; }
.dots { display: flex; gap: 6px; }
.dot { width: 9px; height: 9px; border-radius: 999px; border: 0; padding: 0; background: rgba(255, 255, 255, .45); cursor: pointer; transition: width .2s; }
.dot.on { width: 24px; background: #fff; }
.card-split { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.kv { display: grid; gap: 6px; font-size: 17px; }
.kv div { display: flex; gap: 8px; align-items: baseline; }
.kv span { opacity: .85; }
.kv b { font-size: 20px; }
.kv-big { flex-direction: column; gap: 0 !important; }
.kv-big b { font-size: 30px; }
.kv-big small { font-size: 14px; opacity: .8; }
.rings { display: flex; gap: 12px; }
.h-ring { position: relative; width: 116px; height: 116px; }
.h-ring svg { width: 100%; height: 100%; }
.h-ring div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.15; }
.h-ring b { font-size: 22px; }
.h-ring b.neg { color: #ffd0cc; }
.h-ring span { font-size: 13px; opacity: .9; }
.h-bars { display: grid; gap: 10px; flex: 1; min-width: 220px; }
.h-bars.two { grid-template-columns: repeat(2, 1fr); gap: 12px 24px; }
.h-bar-top { display: flex; justify-content: space-between; font-size: 15px; }
.h-track { height: 9px; margin-top: 4px; border-radius: 999px; background: rgba(0, 0, 0, .18); overflow: hidden; }
.h-track div { height: 100%; border-radius: 999px; background: #cfe0ff; transition: width .4s; }
.h-track div.over { background: var(--over-red); }
.panel .h-track, .rank .h-track { background: var(--track); }
.panel .h-track div, .rank .h-track div { background: var(--accent); }
.h-track.light { background: var(--track); height: 12px; }
.h-track.light div { background: linear-gradient(90deg, #2f8ff0, #7cc8ff); }
.water-card { justify-content: flex-start; }
.water-quick { display: flex; gap: 8px; margin-inline-start: auto; }
.water-card .pill-btn { background: #fff; color: var(--brand); }
.water-card .pill-btn.ghost { background: transparent; color: #fff; }
.quality-score {
  --q: 0; width: 116px; height: 116px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(closest-side, #0f6b50 78%, transparent 80% 100%), conic-gradient(#8ff0c0 calc(var(--q) * 1%), rgba(255, 255, 255, .22) 0);
}
.quality-score b { font-size: 34px; line-height: 1; }
.quality-score span { font-size: 13px; }
.quality-tips { flex: 1; min-width: 200px; margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 15px; }
/* each line its mark close beside it (at the mark's near side, the marks of all lines one under the
   other), a long line wrapping under its own words, not under the mark */
.quality-tips li { display: flex; align-items: baseline; gap: 5px; }
.quality-tips li::before { content: "✓"; flex: none; width: 1em; text-align: end; font-weight: 700; color: #8ff0c0; }
.quality-tips li.warn::before { content: "!"; color: #ffd27a; }

.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.quick-grid.sheet { margin-top: 0; }
.quick {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px 8px;
  border: 0; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); cursor: pointer; font-weight: 500; font-size: 15px; text-align: center;
  transition: transform .15s;
}
.quick:hover { transform: translateY(-2px); }
.wide-actions { display: grid; gap: 10px; margin-top: 12px; }
.wide-action { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--radius); color: var(--text); text-decoration: none; font-weight: 500; font-size: 17px; }
.wide-action > span:not(.badge-icon) { flex: 1; }
.wide-action.violet { background: color-mix(in srgb, #8b5cf6 12%, var(--surface)); }
.wide-action.teal { background: color-mix(in srgb, #14a3b8 12%, var(--surface)); }
.wide-action.amber { background: color-mix(in srgb, #f59e0b 13%, var(--surface)); }
.tip-banner { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 16px; border-radius: var(--radius); background: color-mix(in srgb, #e5487f 9%, var(--surface)); }
.tip-banner div { display: flex; flex-direction: column; }

.meals { display: grid; gap: 14px; margin-top: 18px; }
.meal { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; border-inline-start: 5px solid var(--meal); }
.meal header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.meal h3 { margin: 0; font-size: 18px; flex: 1; }
.meal-kcal { color: var(--muted); font-size: 14px; }
.meal-kcal b { color: var(--text); font-size: 17px; }
.entry { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--border); background: transparent; text-align: start; cursor: pointer; color: inherit; }
button.entry:hover { background: var(--row-alt); }
.entry img { width: 42px; height: 42px; border-radius: 10px; object-fit: contain; background: var(--stage); flex: none; }
.entry-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--meal); margin: 0 16px; flex: none; }
.entry-text { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; } /* a long name with no spaces (a/b/c) breaks inside its column, never over the calories */
.entry-text small { color: var(--muted); }
.entry-kcal { font-weight: 700; font-size: 17px; color: var(--muted); }
.meal-add { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 16px; border: 0; background: transparent; color: var(--accent); font-weight: 500; cursor: pointer; text-align: start; }
.meal-add:hover { background: var(--row-alt); }
.meal.notes textarea { width: calc(100% - 32px); margin: 12px 16px 16px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text); resize: vertical; font-size: 16px; }
.fab {
  position: fixed; bottom: 24px; left: max(24px, calc(50vw - 460px + 24px)); z-index: 25; width: 64px; height: 64px; border-radius: 20px; border: 0;
  display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: 0 10px 28px rgba(18, 147, 106, .45); cursor: pointer;
}

/* ---------- item page ---------- */
.detail { padding: 22px; background: var(--surface); border-radius: 22px; box-shadow: var(--shadow); }
.detail .panel { box-shadow: none; border: 1px solid var(--border); }
.hero { display: grid; grid-template-columns: 250px 1fr; gap: 26px; align-items: center; }
.detail-recipe .hero { grid-template-columns: 1fr; }
.detail-recipe .hero .pic { aspect-ratio: 16 / 8; }
.hero figure { margin: 0; }
.hero .pic { border-radius: 22px; }
.hero figcaption { font-size: 11px; line-height: 1.45; color: var(--muted); opacity: .85; margin-top: 6px; text-align: center; }
/* a picture's license whole on its line ("CC BY 2.0" broke after "BY") */
.hero figcaption .pic-lic { white-space: nowrap; }
.hero h2 { margin: 0; font-size: 28px; }
.brand { color: var(--muted); font-size: 17px; margin-top: 2px; }
.subtitle { margin: 8px 0 0; color: var(--muted); }
/* a recipe's description and its servings and time, a line each (each lit as it is read aloud) */
.subtitle .sub-line { display: block; border-radius: 6px; }
.subtitle .sub-line + .sub-line { margin-top: 6px; }
.subtitle .sub-line.tts-now { outline-offset: 2px; }
.price-line { margin-top: 10px; font-size: 20px; font-weight: 700; }
.price-line .muted { font-size: 15px; font-weight: 400; }
/* the way down from the price to every chain's (detail.js priceLine) */
.price-go { display: inline-flex; align-items: center; gap: 3px; vertical-align: 2px; margin-inline-start: 6px; padding: 4px 7px; padding-inline: 11px 7px; border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--accent); font: inherit; font-size: 13px; font-weight: 600; line-height: 1.3; cursor: pointer; transition: background .2s, transform .15s; }
.price-go:active { transform: scale(.96); }
@media (hover: hover) { .price-go:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); } }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
/* the product's Nutri-Score (detail.js nutriScore): its grade in a round mark and its meaning in words,
   on a tint of the grade's colour (--ns), not the logo */
.ns-plain { --ns: #8a8f98; display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 5px; padding-inline-end: 16px; border-radius: 999px;
  background: color-mix(in srgb, var(--ns) 13%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ns) 34%, transparent); }
.nsp-mark { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; font-size: 17px; font-weight: 800; line-height: 1;
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--ns) 72%, #fff), var(--ns) 62%);
  box-shadow: 0 3px 10px -3px color-mix(in srgb, var(--ns) 70%, transparent), inset 0 -2px 0 rgba(0, 0, 0, .12); text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.nsp-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.nsp-text small { font-size: 11.5px; color: var(--muted); }
.nsp-text b { font-size: 14.5px; font-weight: 700; color: color-mix(in srgb, var(--ns) 62%, var(--text)); }
.portion { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; margin-top: 22px; padding: 16px; border-radius: 16px; background: var(--row-alt); }
.portion .field select { min-width: 230px; }
/* a number with − and +: a pill with two round buttons and the number between them, its own width */
.stepper { flex: none; width: auto; align-self: flex-start; justify-self: start; display: inline-flex; align-items: center; gap: 4px; padding: 5px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-2); }
.stepper button { flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px; display: grid; place-items: center; cursor: pointer;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--surface)); font-size: 22px; font-weight: 600; line-height: 1; transition: background .15s, transform .1s; }
.stepper button:hover { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.stepper button:active { transform: scale(.9); }
@media (hover: none) { .stepper button:hover { background: color-mix(in srgb, var(--accent) 13%, var(--surface)); } }
.stepper input, .field .stepper input { flex: none; width: 70px; min-width: 0; height: 40px; padding: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; outline: none;
  background: transparent; color: var(--text); font-size: 20px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.stepper:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.portion-total { padding-bottom: 11px; color: var(--muted); }
/* a search with a sensitivity's "free of": what the results keep to, over them (search.js freeNote) */
.free-note, .sg-free { display: flex; align-items: baseline; gap: 8px; margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.5;
  color: var(--text); background: color-mix(in srgb, #22a06b 10%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #22a06b 25%, transparent); }
.free-note b, .sg-free b { color: color-mix(in srgb, #22a06b 75%, var(--text)); }
.sg-free { margin: 6px 8px 4px; padding: 8px 12px; font-size: 12.5px; list-style: none; cursor: default; }
/* a search typed with a mistake: what its results are of (search.js fixNote) */
.fix-note, .sg-fix { margin: -4px 0 12px; font-size: 13.5px; color: var(--muted); }
.fix-note b, .sg-fix b { color: var(--text); }
.sg-fix { margin: 6px 12px 2px; font-size: 12.5px; list-style: none; cursor: default; }
/* the food's page: adding it to the diary and keeping it, at the end of what is chosen, side by side */
.portion-actions { flex: 1 1 100%; display: flex; gap: 10px; margin-top: 2px; padding-top: 14px; border-top: 1px solid var(--border); }
.portion-actions .btn { min-height: 48px; justify-content: center; font-size: 16px; white-space: nowrap; padding-inline: 12px; }
@media (max-width: 420px) { .portion-actions .btn { font-size: 15px; gap: 5px; padding-inline: 10px; } }
.portion-actions .btn.primary { flex: 1.5 1 0; }
.portion-actions .btn.star { flex: 1 1 0; }
.summary { display: grid; grid-template-columns: 160px 1fr; gap: 24px; align-items: center; }
/* (the portion's label under the tiles is a label, not a note to explain) */
.summary-side .note { padding-inline-start: 0; }
.summary-side .note::before { content: none; }
.donut { position: relative; flex: none; }
.donut svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.donut-center b { font-size: 34px; }
.donut-center span { font-size: 14px; color: var(--muted); }
.macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.macro { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 6px; border-radius: 16px; background: color-mix(in srgb, var(--c) 11%, transparent); }
.macro .m-label { color: var(--ink, var(--c)); font-weight: 500; }
.macro .m-val { font-size: 15px; color: var(--muted); }
.macro .m-val b { font-size: 30px; color: var(--text); font-variant-numeric: tabular-nums; }
.macro .m-pct { font-size: 14px; color: var(--muted); }
.macro .m-pct b { color: var(--ink, var(--c)); font-size: 16px; }
.m-protein { --c: var(--protein); --ink: var(--protein-ink); } .m-carbs { --c: var(--carbs); --ink: var(--carbs-ink); } .m-fat { --c: var(--fat); --ink: var(--fat-ink); }

.intake { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.intake-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--row-alt); }
.intake-card.main { grid-column: span 2; background: color-mix(in srgb, var(--accent) 9%, var(--row-alt)); }
.intake-text { display: flex; flex-direction: column; min-width: 0; }
.intake-label { font-weight: 500; }
.intake-amount { color: var(--muted); font-size: 14px; }
.intake-amount b { color: var(--text); font-size: 16px; }
.ring { position: relative; flex: none; display: inline-grid; place-items: center; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring b { position: relative; font-size: 15px; }
.level { margin-inline-start: 6px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--track); color: var(--muted); }
.level.bad { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.level.good { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good); }
.bars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 32px; }
.bar-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.track-bar, .bars .track { height: 10px; margin: 6px 0 4px; overflow: hidden; border-radius: 999px; background: var(--track); width: auto; }
.bars .track::after { display: none; }
.bars .track { box-shadow: none; cursor: default; transition: none; }
.fill { height: 100%; border-radius: 999px; background: var(--c, var(--accent)); transition: width .3s ease; }
.bar-sub { font-size: 13px; color: var(--muted); }
details.more { margin-top: 14px; }
details.more summary { cursor: pointer; color: var(--accent); }
details.more .bars { margin-top: 14px; }
.labels { display: flex; flex-wrap: wrap; gap: 8px; }
.labels + .labels, .fit + .labels { margin-top: 10px; }
.red-label { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 10px; background: var(--red-label); color: #fff; font-weight: 700; }
.claim { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--good) 13%, transparent); color: var(--good); font-weight: 500; }
.claim::before { content: "✓"; }
.fit { display: grid; gap: 6px; margin-bottom: 4px; }
.fit-row { padding: 9px 14px; border-radius: 12px; font-weight: 500; }
.fit-row.ok { background: color-mix(in srgb, var(--good) 11%, transparent); color: var(--good); }
.fit-row.warn { background: color-mix(in srgb, var(--warn) 11%, transparent); color: var(--warn); }
.fit-row.info { background: var(--row-alt); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 16px; }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--row-alt); }
.s-label { font-size: 13px; color: var(--muted); }
.s-val { font-size: 20px; font-weight: 700; }
.s-sub { font-size: 13px; color: var(--muted); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 16px; }
th, td { padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: right; }
th { color: var(--muted); font-weight: 500; }
td.num, th.num { text-align: left; font-variant-numeric: tabular-nums; }
tr.sub td:first-child { padding-right: 30px; color: var(--muted); }
tbody tr:nth-child(even) { background: var(--row-alt); }
.facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.prices ul { list-style: none; padding: 0; margin: 0 0 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.prices li { display: flex; justify-content: space-between; gap: 8px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 12px; }
.prices li.best { border-color: var(--good); background: color-mix(in srgb, var(--good) 10%, transparent); font-weight: 500; }
.src { margin: 18px 0 0; font-size: 13px; color: var(--muted); }
.recipe-body { display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; }
.ingredients { list-style: none; margin: 0; padding: 0; }
.ingredients li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.steps { margin: 0; padding-inline-start: 22px; display: grid; gap: 10px; }

/* ---------- results, lists ---------- */
.results-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
/* waiting screens by their subject (loading-art.js waitScreen): after a moment only (a quick answer never
   flashes them), a drawing that moves, its words with their dots */
.lw { display: grid; justify-items: center; align-content: center; gap: 6px; padding: 14px 8px; text-align: center; animation: lw-in .3s .15s both; }
@keyframes lw-in { from { opacity: 0; } }
.lw-art svg { display: block; width: 116px; height: auto; overflow: visible; }
.lw-search .lw-art svg, .lw-food .lw-art svg { width: 188px; }
.lw-say { display: grid; gap: 2px; }
.lw-words { font-size: 16px; font-weight: 700; }
.lw-say small { font-size: 13px; color: var(--muted); }
.lw-dots i { font-style: normal; animation: lw-dot 1.2s infinite both; }
.lw-dots i:nth-child(2) { animation-delay: .2s; }
.lw-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes lw-dot { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }
/* (inline, in a form's line: the drawing small beside the words) */
.lw.small { display: inline-flex; align-items: center; gap: 10px; padding: 4px 0; text-align: start; }
.lw.small .lw-art svg { width: 40px; }
.lw.small .lw-words { font-size: 14px; font-weight: 600; }
/* the search and the foods: a plate whose foods bob, a magnifier gliding over it */
.lw-plate { fill: color-mix(in srgb, var(--text) 9%, transparent); }
.lw-plate-in { fill: color-mix(in srgb, var(--text) 5%, transparent); }
.lw-bite { transform-box: fill-box; transform-origin: 50% 100%; animation: lw-bob 1.8s ease-in-out infinite; }
.lw-bite.f2 { animation-delay: -.6s; }
.lw-bite.f3 { animation-delay: -1.2s; }
@keyframes lw-bob { 50% { transform: translateY(-5px) scale(1.05); } }
/* (still, with less motion asked: over the plate's middle) */
.lw-lens { transform: translate(104px, 50px) rotate(-6deg); animation: lw-glide 2.6s ease-in-out infinite; }
@keyframes lw-glide { 0%, 100% { transform: translate(52px, 52px) rotate(-10deg); } 50% { transform: translate(148px, 47px) rotate(10deg); } }
.lw-glass { fill: color-mix(in srgb, #fff 18%, transparent); }
.lw-ring { fill: none; stroke: var(--accent); stroke-width: 6; }
.lw-handle { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; }
.lw-glint { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .75; }
/* reading: a light scans the sheet down and up, sparkles beside it */
.lw-sheet { fill: var(--surface); stroke: color-mix(in srgb, var(--accent) 40%, var(--border)); stroke-width: 2; }
.lw-lines rect { fill: color-mix(in srgb, var(--text) 16%, transparent); }
.lw-beam { fill: color-mix(in srgb, var(--accent) 45%, transparent); animation: lw-scan 1.8s ease-in-out infinite alternate; }
@keyframes lw-scan { to { transform: translateY(76px); } }
.lw-spark { fill: #fbbf24; transform-box: fill-box; transform-origin: center; animation: lw-twinkle 1.6s ease-in-out infinite; }
.lw-spark.s2 { animation-delay: -.8s; }
@keyframes lw-twinkle { 0%, 100% { opacity: .25; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.1); } }
/* a report: bars rising one after another */
.lw-base { fill: none; stroke: color-mix(in srgb, var(--text) 25%, transparent); stroke-width: 2; stroke-linecap: round; }
.lw-bar { fill: var(--accent); transform-box: fill-box; transform-origin: 50% 100%; animation: lw-rise 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * .14s); }
.lw-bar:nth-of-type(even) { fill: color-mix(in srgb, var(--accent) 55%, #22c55e); }
@keyframes lw-rise { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
/* the day by the hour: a clock whose hands turn */
.lw-face { fill: var(--surface); stroke: color-mix(in srgb, var(--accent) 50%, var(--border)); stroke-width: 3; }
.lw-tick { stroke: color-mix(in srgb, var(--text) 35%, transparent); stroke-width: 2.5; stroke-linecap: round; }
.lw-hour, .lw-min { fill: none; stroke-linecap: round; transform-origin: 60px 60px; }
.lw-hour { stroke: var(--text); stroke-width: 5; animation: lw-turn 12s linear infinite; }
.lw-min { stroke: var(--accent); stroke-width: 3.5; animation: lw-turn 1.5s linear infinite; }
.lw-pin { fill: var(--accent); }
@keyframes lw-turn { to { transform: rotate(360deg); } }
/* a document: its lines writing in from the right, as the page reads */
.lw-fold { fill: none; stroke: color-mix(in srgb, var(--accent) 40%, var(--border)); stroke-width: 2; }
.lw-write rect { fill: color-mix(in srgb, var(--text) 18%, transparent); transform-box: fill-box; transform-origin: 100% 50%; animation: lw-pen 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * .25s); }
@keyframes lw-pen { 0% { transform: scaleX(0); } 35%, 85% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
/* the nutrients: three rings turning in their colours */
.lw-track { fill: none; stroke: color-mix(in srgb, var(--text) 9%, transparent); stroke-width: 7; }
.lw-arc { fill: none; stroke: var(--c); stroke-width: 7; stroke-linecap: round; transform-origin: 60px 60px; animation: lw-turn var(--s) linear infinite; }
.lw-nutrients .lw-arc:nth-of-type(4) { animation-direction: reverse; }
/* the cart (a shopping list on its way): rolling in place, its wheels turning, the road's marks passing,
   the foods dropping in one by one and going, again */
.lw-cart .lw-art svg { width: 150px; }
.lw-road path { fill: none; stroke: color-mix(in srgb, var(--text) 22%, transparent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 14 12; animation: lw-roll-road .7s linear infinite; }
@keyframes lw-roll-road { to { stroke-dashoffset: 26; } }
.lw-trolley { animation: lw-cart-bump .7s ease-in-out infinite; }
@keyframes lw-cart-bump { 50% { transform: translateY(-1.5px); } }
.lw-basket { fill: color-mix(in srgb, #22c55e 22%, transparent); stroke: #22c55e; stroke-width: 4; stroke-linejoin: round; }
.lw-mesh { fill: none; stroke: color-mix(in srgb, #22c55e 55%, transparent); stroke-width: 2; }
.lw-frame { fill: none; stroke: color-mix(in srgb, var(--text) 55%, transparent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.lw-wheel { transform-box: fill-box; transform-origin: center; animation: lw-turn .7s linear infinite; }
.lw-wheel circle { fill: var(--surface); stroke: color-mix(in srgb, var(--text) 60%, transparent); stroke-width: 4; }
.lw-wheel path { stroke: color-mix(in srgb, var(--text) 40%, transparent); stroke-width: 2; }
.lw-drop { opacity: 0; animation: lw-drop 2.4s cubic-bezier(.5, 0, .7, 1.4) infinite both; }
.lw-drop.d2 { animation-delay: .35s; }
.lw-drop.d3 { animation-delay: .7s; }
@keyframes lw-drop { 0% { opacity: 0; transform: translateY(-46px); } 12% { opacity: 1; } 30%, 78% { opacity: 1; transform: translateY(14px); } 92%, 100% { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .lw *, .rsw-card::after { animation: none !important; } }
html[data-a11y~="motion"] :is(.lw *, .rsw-card::after) { animation: none !important; }
/* the search's results on their way: the waiting screen, and the cards shimmering in their places */
.rsw-cards { margin-top: 6px; animation: lw-in .3s .15s both; }
.rsw-card { position: relative; display: grid; gap: 8px; padding: 12px; overflow: hidden; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.rsw-card i { display: block; border-radius: 10px; background: color-mix(in srgb, var(--text) 9%, transparent); }
.rsw-pic { aspect-ratio: 1; }
.rsw-l1 { height: 14px; width: 70%; }
.rsw-l2 { height: 12px; width: 45%; }
.rsw-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, #fff 10%, transparent) 50%, transparent 70%);
  transform: translateX(-100%); animation: lw-shine 1.4s ease-in-out infinite; }
@keyframes lw-shine { to { transform: translateX(100%); } }
/* (a phone, one to a row: two of them, the rest under the screen anyway) */
@media (max-width: 640px) { .rsw-cards > :nth-child(n+3) { display: none; } }
.results-head h2 { margin: 0; font-size: 22px; }
/* a group folded by its title (the admin screen's settings, as the search's results): the body hidden, coming in gently */
.rs-sec.closed > .fold-body { display: none; }
.rs-sec:not(.closed) > .fold-body { animation: rs-open .28s ease-out; }
.ad-fold + .ad-fold { margin-top: 6px; }
.ad-fold-title { margin: 18px 0 10px; }
/* (its body a little apart from the title row, and from its focus ring: the a11y warning sat right under it) */
.ad-fold > .ad-fold-title { margin: 16px 0 12px; }
.ad-fold > .fold-body { padding-top: 6px; }
.ad-fold > .fold-body > .admin-warn:first-child { margin-top: 0; margin-bottom: 14px; }
.ad-fold-title .rs-toggle { font-weight: inherit; }
.ad-fold.closed > .ad-fold-title .rs-toggle { background: var(--surface-2); }
/* all the results together (the admin screen's choice): one grid with no titles, a little apart from the field */
.rs-all { margin-top: 18px; }
/* the admin screen: how the search's results are shown, three choices as cards (admin.js settings) */
.sl-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.sl-mode { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 14px; border-radius: 14px; cursor: pointer;
  background: var(--surface-2); border: 1.5px solid var(--border); transition: border-color .2s, background .2s, box-shadow .2s; }
.sl-mode:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.sl-mode input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sl-mode .sl-dot { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--muted); display: grid; place-items: center; transition: border-color .2s; }
.sl-mode .sl-dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .2s cubic-bezier(.34, 1.56, .64, 1); }
.sl-mode b { display: block; font-size: 14.5px; }
.sl-mode small { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.sl-mode.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface-2)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.sl-mode.on .sl-dot { border-color: var(--accent); }
.sl-mode.on .sl-dot::after { transform: scale(1); }
.sl-mode:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* the results page's own filter (search.js wireResultsFilter): a field under the title, narrowing the cards as it is typed */
.rs-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 14px 0 18px; }
.rs-tools .rs-filter { flex: 1 1 320px; margin: 0; }
/* the results' order beside the filter, as one of its kind: a pill with its sign, its word and its choice */
.rs-sort { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px 0 10px; border-radius: 14px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); transition: border-color .2s, box-shadow .2s; }
.rs-sort:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.rs-sort > .icon { flex: none; color: var(--accent); }
.rs-sort-word { font-size: 13px; font-weight: 700; color: var(--muted); }
/* (the site's own select inside, its arrow and styled list as everywhere: only its frame given to the pill) */
.rs-sort select { align-self: center; min-width: 0; margin: 0; padding-block: 6px; padding-inline-start: 2px !important; border: 0; outline: none; background-color: transparent; box-shadow: none;
  color: var(--text); font: inherit; font-size: 15px; font-weight: 700; }
@media (max-width: 640px) { .rs-sort { flex: 1 1 100%; } .rs-sort select { flex: 1; } }
/* its list opens under the whole pill, from its right edge and at least its width (it hung from the narrower select, askew) */
.rs-sort { anchor-name: --rs-sort; }
@supports (appearance: base-select) {
  .rs-sort select::picker(select) { position-anchor: --rs-sort; position-area: none; inset: auto; top: anchor(bottom); right: anchor(right); left: auto;
    min-width: anchor-size(width); margin: 8px 0 0; }
}
.rs-filter { display: flex; align-items: center; gap: 10px; max-width: 560px; height: 48px; margin: 12px 0 6px; padding: 0 14px; border-radius: 14px; cursor: text;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); transition: border-color .2s, box-shadow .2s; }
.rs-filter:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.rs-filter > .icon { flex: none; color: var(--muted); }
.rs-filter input { flex: 1; min-width: 0; height: 100%; padding: 0; margin: 0; border: 0; outline: none; background: transparent; box-shadow: none; color: var(--text); font: inherit; font-size: 15.5px; }
.rs-filter input::-webkit-search-cancel-button { -webkit-appearance: none; }
.rs-count { flex: none; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--row-alt); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rs-count:empty { display: none; }
.rs-none { margin: 6px 2px 14px; }
.section-title { margin: 26px 0 12px; font-size: 18px; }
/* a results section's title: a button that folds it (search.js sectionHead), its count and a round chevron with its word */
.rs-sec > .section-title { margin-bottom: 10px; }
.rs-toggle { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 6px 6px 6px 4px; border: 0; border-radius: 14px; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer;
  transition: background .2s; }
.rs-toggle:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.rs-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rs-title { flex: 1; min-width: 0; }
.rs-chev { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 14%, transparent); transition: background .2s, transform .15s, box-shadow .2s; }
.rs-chev svg { transition: transform .35s cubic-bezier(.34, 1.4, .64, 1); }
.rs-toggle:hover .rs-chev { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 24%, transparent); }
.rs-toggle:active .rs-chev { transform: scale(.9); }
.rs-sec.closed .rs-chev { color: var(--muted); background: var(--row-alt); border-color: var(--border); box-shadow: none; }
.rs-sec.closed .rs-chev svg { transform: rotate(180deg); }
.rs-sec.closed > :is(.grid, .dish-cards, .dk-cards) { display: none; }
.rs-sec:not(.closed) > :is(.grid, .dish-cards, .dk-cards) { animation: rs-open .28s ease-out; }
@keyframes rs-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rs-sec > :is(.grid, .dish-cards, .dk-cards) { animation: none !important; } .rs-chev svg { transition: none; } }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.card { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); color: inherit; text-decoration: none; }
.card:hover { outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); }
.card .name { font-weight: 500; }
.card .kcal { font-weight: 700; color: var(--accent); }
.card .kcal small { font-weight: 400; color: var(--muted); }
.card .price { font-weight: 500; }
.list { display: grid; gap: 8px; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); color: inherit; text-decoration: none; }
.list-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.list-text small { color: var(--muted); }
.list-kcal { font-weight: 700; }
.list-kcal small { font-weight: 400; color: var(--muted); }

/* settings & profile */
.set-list { display: grid; gap: 8px; }
.set-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 10px 16px; border: 0; border-radius: 16px;
  background: var(--surface); box-shadow: var(--shadow); color: inherit; text-decoration: none; text-align: start; cursor: pointer; font-size: 17px;
}
.set-label { flex: 1; display: flex; flex-direction: column; }
.set-label small { font-size: 13px; }
.set-value { color: var(--accent); font-weight: 700; }
.set-row > .icon { color: var(--muted); }
.time-input { padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); font-weight: 700; }
/* an hour field on a computer (time-field.js): the hour as the app writes it, and its own list */
.time-input.tf-input { width: 5.6em; text-align: center; font-variant-numeric: tabular-nums; cursor: pointer; }
.time-input.tf-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.tf-pop { position: fixed; z-index: 1000; width: min(318px, calc(100vw - 16px)); display: grid; gap: 8px; padding: 14px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .55); animation: tf-in .14s ease-out; }
@keyframes tf-in { from { opacity: 0; transform: translateY(-4px); } }
/* its X, in the corner where the page's windows have theirs, clear of the hour and the minutes */
.tf-x { position: absolute; top: 10px; left: 10px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: var(--surface-2); color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
.tf-x:hover { color: var(--text); background: color-mix(in srgb, var(--text) 12%, var(--surface-2)); }
.tf-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* the time being made, big: its hour or its minutes lit while they are picked */
.tf-show { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 30px; font-weight: 800; color: var(--muted); }
.tf-part { width: 72px; min-width: 64px; padding: 2px 8px; text-align: center; outline: none; -webkit-user-select: text; user-select: text; border: 0; border-radius: 12px; background: var(--surface-2); color: var(--text); font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.tf-part.now { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.tf-say { margin: 0; text-align: center; font-size: 12.5px; color: var(--muted); }
.tf-hours { display: grid; gap: 6px; }
.tf-row { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 6px; }
.tf-row small { font-size: 11.5px; color: var(--muted); }
.tf-cells { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.tf-mins { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tf-opt { padding: 8px 0; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; }
.tf-mins .tf-opt { padding: 11px 0; font-size: 16px; }
.tf-opt:hover { background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); }
.tf-opt.on { background: var(--accent); color: var(--accent-text); }
.tf-opt:focus-visible, .tf-part:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* (the grid and the way back to the hour, with room between them) */
.tf-body { display: grid; gap: 10px; }
.tf-back { justify-self: center; padding: 4px 10px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .tf-pop { animation: none; } }
.profile-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); color: inherit; text-decoration: none; }
.profile-card > span:not(.badge-icon) { flex: 1; display: flex; flex-direction: column; }
.profile-card b { font-size: 19px; }
.profile-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; background: var(--hero); color: #fff; }
.profile-hero > div:first-child { display: flex; flex-direction: column; }
.profile-hero b { font-size: 40px; line-height: 1.1; }
.profile-hero .muted { color: rgba(255, 255, 255, .85); }
.profile-hero .btn { background: #fff; color: var(--brand); border-color: #fff; }
.target-macros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
.target-macros > * {
  /* the dot (or the drop) beside the number, the words under it: they never run out of the pill */
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "i n" "i l"; align-items: center; column-gap: 8px; row-gap: 1px;
  min-width: 0; padding: 8px 12px; border-radius: 14px; line-height: 1.2;
  background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: #fff; text-decoration: none;
}
.target-macros > *::before, .target-macros > * > svg { grid-area: i; }
.target-macros > * > b { grid-area: n; }
.target-macros > * > small { grid-area: l; font-size: 12.5px; opacity: .85; overflow-wrap: break-word; }
.target-macros > span::before { content: ""; flex: none; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
.target-macros .m-protein { --c: #ffc56b; } .target-macros .m-carbs { --c: #6ff0e2; } .target-macros .m-fat { --c: #d6b6ff; }
.target-macros .m-water { background: rgba(125, 211, 252, .2); box-shadow: inset 0 0 0 1px rgba(186, 230, 253, .35); }
.target-macros .m-water svg { flex: none; align-self: center; color: #7dd3fc; }
.target-macros b { font-size: 18px; }
.smart-card b { font-size: 17px; }
.about p { margin: 0 0 6px; }

/* goal */
.goal-macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.goal-macro { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px; border-radius: 18px; background: color-mix(in srgb, var(--c) 10%, transparent); }
.goal-macro .m-label { color: var(--ink, var(--c)); font-weight: 700; font-size: 17px; }
.goal-pct { font-size: 32px; }
.goal-stepper { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.goal-stepper button { width: 40px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--c); font-size: 22px; cursor: pointer; }
.goal-stepper span b { font-size: 20px; }
.goal-total { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 18px; text-align: center; }
.goal-total div { display: flex; flex-direction: column; }
.goal-total b { font-size: 40px; }
.rate-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
/* the paces: plain until picked; the one the goal is worked out from filled with the accent and checked,
   a tap pressing it in and popping it out (profile.js renderGoal) */
.rate-btn { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px; border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--text); font: inherit; cursor: pointer; text-align: center;
  transition: transform .15s, background .25s, border-color .25s, box-shadow .25s, color .25s; -webkit-tap-highlight-color: transparent; }
.rate-btn small { color: var(--muted); }
.rate-btn:active { transform: scale(.95); }
.rate-btn:disabled { cursor: default; }
.rate-btn.wide { grid-column: 1 / -1; }
.rate-btn.on { border-color: var(--accent); background: var(--accent); color: var(--accent-text); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); }
.rate-btn.on small { color: inherit; opacity: .85; }
/* (its check a badge on the card's corner, mostly outside it: never over the words, at any text size) */
.rate-ck { position: absolute; top: -9px; inset-inline-start: -9px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 900;
  color: var(--accent); background: #fff; box-shadow: 0 0 0 3px var(--surface), 0 2px 6px rgb(0 0 0 / .25); pointer-events: none;
  opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.rate-btn.on .rate-ck { opacity: 1; transform: none; }
.rate-btn.pop { animation: rate-pop .45s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes rate-pop { 0% { transform: scale(.93); } 60% { transform: scale(1.04); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .rate-btn.pop { animation: none; } .rate-btn, .rate-ck { transition: none; } }
html[data-a11y~="motion"] .rate-btn.pop { animation: none; }

/* water */
.water-page { text-align: center; }
.water-page h3 { font-size: 26px; margin-bottom: 4px; }
.water-hero-wrap { display: grid; place-items: center; margin: 10px 0; }
.water-bar { max-width: 460px; margin: 0 auto; }
.water-bar-text { display: flex; justify-content: space-between; font-weight: 700; color: var(--muted); margin-top: 6px; }
.big-stepper { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 20px 0; }
.big-value { display: flex; flex-direction: column; align-items: center; min-width: 170px; padding: 14px 20px; border-radius: 22px; border: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); background: var(--surface); }
.big-value b, .big-value input { font-size: 44px; font-weight: 700; color: var(--accent); line-height: 1.1; }
.big-value input { width: 160px; border: 0; background: transparent; text-align: center; -moz-appearance: textfield; }
.big-value input::-webkit-inner-spin-button { -webkit-appearance: none; }
.big-value.boxed { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.drinks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }
.drink { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border: 0; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); cursor: pointer; transition: transform .15s; }
.drink:hover { transform: translateY(-3px); }
.drink-name { font-weight: 700; }
.drink small { color: var(--muted); }
/* (at the card's foot: the cards of a row are as tall as the tallest, so their adds are on one line
   whatever the size's words take above them, one line or two) */
.drink-add { position: relative; display: grid; margin-top: auto; color: var(--accent); font-weight: 700; font-size: 17px; }
.drink-add > span { grid-area: 1 / 1; transition: opacity .2s, transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.drink-add .da-done { opacity: 0; transform: translateY(6px) scale(.9); }
/* Just added: the card pops and glows for a moment, and says so */
.drink { position: relative; }
.drink.added { animation: drink-pop .5s cubic-bezier(.34, 1.56, .64, 1); box-shadow: 0 0 0 2.5px var(--accent), 0 10px 26px color-mix(in srgb, var(--accent) 30%, transparent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.drink.added .da-add { opacity: 0; transform: translateY(-6px) scale(.9); }
.drink.added .da-done { opacity: 1; transform: none; }
.drink.added::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 65%); animation: drink-glow .9s ease-out forwards;
}
@keyframes drink-pop { 0% { transform: scale(1); } 35% { transform: scale(.94); } 70% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes drink-glow { from { opacity: 1; transform: scale(.6); } to { opacity: 0; transform: scale(1.3); } }
@media (prefers-reduced-motion: reduce) { .drink.added, .drink.added::after { animation: none; } }
.art .steam path { animation: steam 2.4s ease-in-out infinite; }
.art .steam path:nth-child(2) { animation-delay: .4s; }
.art .steam path:nth-child(3) { animation-delay: .8s; }
@keyframes steam { 0%, 100% { opacity: .2; transform: translateY(2px); } 50% { opacity: .8; transform: translateY(-3px); } }
.water-hero .wave { animation: wave 3s linear infinite; }
@keyframes wave { from { transform: translateX(0); } to { transform: translateX(100px); } }
.glass-art .wave { animation: wave 4s linear infinite; }
.water-hero .bubble, .glass-art .bubble { animation: bubble 3.2s ease-in infinite; }
.water-hero .bubble.b2, .glass-art .bubble.b2 { animation-delay: 1.1s; }
.water-hero .bubble.b3, .glass-art .bubble.b3 { animation-delay: 2s; }
.water-hero { --rise: 66px; }
.glass-art { --rise: 36px; overflow: visible; }
@keyframes bubble { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: .7; } 100% { transform: translateY(calc(-1 * var(--rise, 60px))); opacity: 0; } }

/* the water moving to a new amount: it glides (a small overshoot), sloshes, a drop falls in */
.water-level { transition: transform 1.1s cubic-bezier(.34, 1.3, .64, 1); }
/* The day's other drinks, under the water glass: small rows with a drawing, the name and time, the amount */
.drinks-today { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.drinks-today h4 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.drinks-today h4 span { font-size: 13px; font-weight: 600; color: var(--muted); }
.drink-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.drink-list li { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 14px; background: var(--row-alt); transition: opacity .2s, transform .2s; }
.drink-list li.leaving { opacity: 0; transform: translateX(-20px); }
.dl-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #8a5a35; background: color-mix(in srgb, #c98a52 22%, transparent); }
.drink-list li.k-tea .dl-ico { color: #8a6d12; background: color-mix(in srgb, #e3b341 22%, transparent); }
.drink-list li.k-other .dl-ico { color: #2f8ff0; background: color-mix(in srgb, #2f8ff0 16%, transparent); }
:root[data-theme="dark"] .dl-ico { color: #e6b48a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dl-ico { color: #e6b48a; } }
.dl-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
/* the drink's name whole (two lines at most), its sweetening and time under it */
.dl-text b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.3; }
.dl-text small { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 5px; margin-top: 2px; font-size: 12px; color: var(--muted); }
.dl-text time { font-variant-numeric: tabular-nums; }
/* the hour as a button: it looks the same, with its clock, and a tap sets another (openDrinkTime) */
.dl-time { display: inline-flex; align-items: center; gap: 4px; margin: -6px -8px; padding: 6px 8px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; cursor: pointer; }
.dl-time svg { flex: none; opacity: .7; }
.dl-time:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (hover: hover) { .dl-time:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } }
.dl-sweet { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; color: #c27a2c; }
.dl-sweet svg { width: 12px; height: 12px; }
.dl-ml { display: inline-flex; align-items: baseline; gap: 3px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dl-ml small { font-weight: 500; color: var(--muted); }
.dl-del { width: 28px; height: 28px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--muted); background: transparent; }
.dl-del:hover, .dl-del:focus-visible { color: #e5484d; background: color-mix(in srgb, #e5484d 12%, transparent); }
.water-tilt { transform-box: view-box; transform-origin: var(--drop-x, 50px) 0; }
.pour .water-tilt, .sip .water-tilt { animation: water-slosh 1.2s ease-in-out; }
@keyframes water-slosh { 25% { transform: rotate(-5deg); } 55% { transform: rotate(3.5deg); } 80% { transform: rotate(-1.5deg); } }
.water-drop { opacity: 0; }
.pour .water-drop { animation: water-drop .7s cubic-bezier(.55, 0, 1, .45) forwards; }
@keyframes water-drop {
  0% { transform: translateY(-8px); opacity: 0; }
  15% { opacity: 1; }
  85% { transform: translateY(var(--drop-to, 50px)); opacity: 1; }
  100% { transform: translateY(var(--drop-to, 50px)) scaleY(.3); opacity: 0; }
}
.water-ripple { opacity: 0; transform-box: fill-box; transform-origin: center; }
.pour .water-ripple { animation: water-ripple .9s .55s ease-out; }
@keyframes water-ripple { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.4); } }
.sip .bubble { animation-duration: .9s; }
.water-stars { opacity: 0; }
.water-stars path { transform-box: fill-box; transform-origin: center; }
.goal .water-stars { opacity: 1; }
.goal .water-stars path { animation: water-star 1.8s ease-out both; }
.goal .water-stars path:nth-child(2) { animation-delay: .15s; }
.goal .water-stars path:nth-child(3) { animation-delay: .3s; }
@keyframes water-star { 0% { transform: scale(0) rotate(-90deg); opacity: 0; } 30% { transform: scale(1.3) rotate(0); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
/* the amount added or removed, floating up from the glass */
.water-float {
  position: absolute; z-index: 2; top: 0; pointer-events: none; padding: 2px 10px; border-radius: 999px; font-size: 14px; font-weight: 800;
  color: #fff; background: #1f6fd0; box-shadow: 0 4px 10px rgba(31, 111, 208, .4); animation: water-float 1.3s ease-out forwards;
}
.water-float.minus { background: #55657a; box-shadow: 0 4px 10px rgba(85, 101, 122, .4); }
@keyframes water-float { 0% { transform: translateY(16px) scale(.7); opacity: 0; } 20% { transform: translateY(0) scale(1.05); opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(-26px); opacity: 0; } }
.water-tile .tile-body, .water-hero-wrap { position: relative; }
/* the day's water goal reached: a small gold medal hung on the full glass, its ribbon from the rim
   and its disc on the glass's front (the glass: a 70px drawing from the tile's 6px padding, its rim
   12% down, centred 35px in), and "היעד הושג!" beside the glass, level with its middle */
.water-tile.won .tile-body { flex-direction: column; align-items: flex-start; gap: 8px; }
.water-medal {
  --medal-ink: #a86f00;
  position: absolute; inset-inline-start: 24px; top: 13.8px; width: 34px; z-index: 1; pointer-events: none;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .water-medal { --medal-ink: #f5c542; } }
:root[data-theme="dark"] .water-medal { --medal-ink: #f5c542; }
.water-medal .medal-art { display: block; width: 34px; height: auto; overflow: visible; filter: drop-shadow(0 3px 5px rgba(201, 138, 0, .32)); }
.water-medal > b { position: absolute; inset-inline-start: calc(100% + 15px); top: 22px; font-size: 12px; font-weight: 800; color: var(--medal-ink); white-space: nowrap; }
.medal-swing { transform-origin: 60px 0; animation: medal-sway 5s var(--clock, 0s) ease-in-out infinite; }
@keyframes medal-sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
.medal-shine { animation: medal-shine 4.2s var(--clock, 0s) ease-in-out infinite; }
@keyframes medal-shine { 0% { transform: translateX(-24px); } 40%, 100% { transform: translateX(110px); } }
.medal-glow { transform-box: fill-box; transform-origin: center; animation: medal-glow 2.8s var(--clock, 0s) ease-in-out infinite; }
@keyframes medal-glow { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.06); } }
.medal-spark { transform-box: fill-box; transform-origin: center; animation: medal-spark 2.4s var(--clock, 0s) ease-in-out infinite; }
.medal-spark.s2 { animation-delay: calc(var(--clock, 0s) + .6s); fill: #fff3b0; }
.medal-spark.s3 { animation-delay: calc(var(--clock, 0s) + 1.2s); }
.medal-spark.s4 { animation-delay: calc(var(--clock, 0s) + 1.8s); fill: #fff3b0; }
@keyframes medal-spark { 0%, 100% { transform: scale(.3) rotate(0); opacity: .2; } 45% { transform: scale(1.15) rotate(45deg); opacity: 1; } 70% { transform: scale(.9) rotate(60deg); opacity: .85; } }
/* reached just now: it drops in on its ribbon with a burst of gold */
.water-medal.pop { animation: medal-in 1.1s var(--pop, 0s) cubic-bezier(.3, 1.4, .5, 1) both; }
.water-medal.pop::before {
  content: ""; position: absolute; z-index: -1; inset-inline-start: 50%; top: 69%; width: 30px; height: 30px; margin: -15px; border-radius: 50%;
  border: 3px solid #ffd54a; opacity: 0; animation: medal-burst 1s calc(var(--pop, 0s) + .45s) ease-out;
}
.water-medal.pop > b { animation: medal-cap .5s calc(var(--pop, 0s) + .8s) ease-out both; }
@keyframes medal-in {
  0% { transform: translateY(-46px) scale(.3) rotate(-24deg); opacity: 0; }
  50% { transform: translateY(4px) scale(1.12) rotate(7deg); opacity: 1; }
  72% { transform: translateY(0) scale(.96) rotate(-4deg); }
  100% { transform: none; opacity: 1; }
}
@keyframes medal-burst { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(2); opacity: 0; } }
@keyframes medal-cap { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.water-medal.away { transition: opacity .3s, transform .3s; opacity: 0; transform: scale(.6); }
@media (prefers-reduced-motion: reduce) { .water-medal, .water-medal::before, .water-medal > b { animation: none !important; } }
.tile-bar div, #waterFill { transition: width .9s cubic-bezier(.34, 1.2, .64, 1); }
@media (prefers-reduced-motion: reduce) { .art *, .water-hero * { animation: none !important; } }

/* weight & fasting */
.weight-page { text-align: center; }
/* Progress photos: small pictures in the middle, opening large on a tap */
.photo-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 16px; }
.photo-grid figure { position: relative; margin: 0; width: 92px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.photo-open { display: block; width: 100%; padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: zoom-in; background: var(--row-alt); box-shadow: var(--shadow); }
.photo-grid img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.photo-grid figcaption { font-size: 12px; color: var(--muted); text-align: center; }
/* the progress photos: kept on the device only (local-photos.js), said under the title; those still on the server, to move */
/* (a quiet line at the section's foot, under the buttons and the photos) */
.photo-local { display: block; max-width: 520px; margin: 18px auto 0; font-size: 12px; line-height: 1.55; text-align: center; text-wrap: balance; color: var(--muted); }
.photo-local span:first-child { margin-inline-end: 5px; font-size: 11px; }
.photo-cloud { display: flex; align-items: center; gap: 12px; margin: 12px auto 0; max-width: 520px; padding: 10px 12px 10px 14px; border-radius: 16px; text-align: start; background: var(--row-alt); }
.photo-cloud > span { flex: 1; display: flex; flex-direction: column; line-height: 1.35; }
.photo-cloud small { font-size: 12.5px; color: var(--muted); }
.photo-cloud .btn { flex: none; }
.photo-badge { margin-inline-start: 4px; padding: 0 6px; border-radius: 999px; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--muted); background: var(--row-alt); }
.photo-del { position: absolute; top: 5px; left: 5px; width: 26px; height: 26px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(0, 0, 0, .5); }
.photo-full { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: 14px; }
.chart { width: 100%; height: auto; margin-top: 12px; overflow: visible; }
.chart-label { font-size: 13px; fill: var(--muted); }
.fasting { display: grid; justify-items: center; gap: 10px; }
/* a running fast: the desert behind it (diary.js desertScene) */
.fasting.fasting-live { position: relative; overflow: hidden; isolation: isolate; }
.fasting-live > :not(.desert) { position: relative; z-index: 1; }
.desert { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; --sand: #e8b56a; --sand-2: #d99a4e; --sand-3: #c9853d; --ink: #7a5228; --cloud: #7f97b2; }
:root[data-theme="dark"] .desert { --sand: #c9965a; --sand-2: #b47f45; --sand-3: #9c6a36; --ink: #e0b47a; --cloud: #dbe6f3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .desert { --sand: #c9965a; --sand-2: #b47f45; --sand-3: #9c6a36; --ink: #e0b47a; --cloud: #dbe6f3; } }
/* the clouds: three, each crossing the sky by itself (its height, size, pace and start of its own), faint;
   moved by transform only, from beyond the right edge to beyond the left */
.ds-cloud { position: absolute; left: 0; right: 0; height: 0; animation: ds-cloud linear infinite; }
.ds-cloud svg { position: absolute; top: 0; left: 0; display: block; fill: var(--cloud); }
.ds-cloud.k1 { top: 8%; animation-duration: 96s; animation-delay: -18s; transform: translateX(70%); }
.ds-cloud.k1 svg { width: 88px; opacity: .1; }
.ds-cloud.k2 { top: 22%; animation-duration: 150s; animation-delay: -95s; transform: translateX(34%); }
.ds-cloud.k2 svg { width: 58px; opacity: .07; }
.ds-cloud.k3 { top: 36%; animation-duration: 122s; animation-delay: -52s; transform: translateX(10%); }
.ds-cloud.k3 svg { width: 72px; opacity: .085; }
@keyframes ds-cloud { from { transform: translateX(100%); } to { transform: translateX(-120px); } }
.ds-dunes { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 38%; }
.ds-d1 { fill: var(--sand); opacity: .14; }
.ds-d2 { fill: var(--sand-2); opacity: .18; }
.ds-d3 { fill: var(--sand-3); opacity: .22; }
.ds-drift { animation: ds-drift linear infinite; }
.ds-far { animation-duration: 140s; }
.ds-mid { animation-duration: 95s; }
.ds-near { animation-duration: 60s; }
.ds-camel { position: absolute; bottom: 15%; left: 0; width: clamp(38px, 6vmin, 54px); animation: ds-cross 80s linear infinite; }
.ds-camel svg { display: block; width: 100%; fill: var(--ink); stroke: var(--ink); opacity: .22; animation: ds-bob 1.4s ease-in-out infinite; }
.ds-cactus { position: absolute; width: 16px; }
.ds-cactus svg { display: block; width: 100%; }
.ds-cactus path { stroke: var(--ink); opacity: .18; }
.ds-cactus.c1 { bottom: 13%; left: 24%; }
.ds-cactus.c2 { bottom: 12%; right: 14%; width: 13px; }
@keyframes ds-drift { from { transform: translateX(0); } to { transform: translateX(-400px); } }
@keyframes ds-cross { from { left: -60px; } to { left: calc(100% + 60px); } }
@keyframes ds-bob { 50% { transform: translateY(-1.5px); } }
@media (prefers-reduced-motion: reduce) { .desert, .desert * { animation: none !important; } .ds-camel { left: 62%; } }
html[data-a11y~="motion"] .desert, html[data-a11y~="motion"] .desert * { animation: none !important; }
html[data-a11y~="motion"] .ds-camel { left: 62%; }
.fast-clock .fc-main { font-size: 40px; font-weight: 700; fill: var(--text); }
.fast-clock .fc-sub { font-size: 15px; fill: var(--muted); }
/* The live clock: the ring glides each second, and fills from empty when the page opens */
.fast-clock.live .fc-arc { transition: stroke-dasharray 1s linear; }
.fast-clock.live.opening .fc-arc { transition: stroke-dasharray 1.2s cubic-bezier(.3, .8, .4, 1); }
.fast-clock.live .fc-head, .fast-clock.live .fc-sec { transform-box: view-box; transform-origin: 110px 110px; transition: transform 1s linear, opacity .3s; }
.fast-clock.live.opening .fc-head { transition: transform 1.2s cubic-bezier(.3, .8, .4, 1), opacity .3s; }
.fast-clock.live .fc-head circle:first-child { animation: fc-glow 2s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.fast-clock.live .fc-s { font-size: 24px; font-weight: 600; fill: var(--muted); font-variant-numeric: tabular-nums; }
.fast-clock.live .fc-hm { font-variant-numeric: tabular-nums; }
@keyframes fc-glow { from { opacity: .35; transform: scale(.8); } to { opacity: .8; transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .fast-clock.live * { transition: none !important; animation: none !important; } }
.fast-list li { align-items: center; }
.fast-del { width: 32px; height: 32px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--muted); background: transparent; }
.fast-del:hover, .fast-del:focus-visible { color: #e5484d; background: color-mix(in srgb, #e5484d 12%, transparent); }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.plan { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; border: 2px solid var(--border); border-radius: 16px; background: var(--surface); cursor: pointer; width: 100%; height: 100%; font: inherit; color: inherit; }
.plan-wrap { position: relative; }
.plan-wrap.custom .plan { border-style: dashed; border-color: color-mix(in srgb, #7c5cff 45%, var(--border)); }
.plan-wrap.custom .plan b { color: #7c5cff; }
.plan-del { position: absolute; top: 6px; left: 6px; width: 26px; height: 26px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--muted); background: var(--row-alt); }
.plan-del:hover, .plan-del:focus-visible { color: #e5484d; background: color-mix(in srgb, #e5484d 14%, transparent); }
.plan-new { align-items: center; justify-content: center; border-style: dashed; color: var(--accent); }
.plan-new b { font-size: 17px !important; }
.plan-plus { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); }
/* Choosing the length of one's own fast */
.plan-form { display: flex; flex-direction: column; gap: 12px; }
.pf-readout { display: flex; flex-direction: column; align-items: center; padding: 14px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, #7c5cff 16%, transparent), color-mix(in srgb, #2eb67d 16%, transparent)); }
.pf-readout b { font-size: 48px; line-height: 1; font-variant-numeric: tabular-nums; }
.pf-readout span { font-weight: 600; }
.pf-readout small { margin-top: 4px; color: var(--muted); }
#pfRange { width: 100%; accent-color: #7c5cff; }
.pf-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: -8px; }
.plan:hover { border-color: var(--accent); }
.plan b { font-size: 26px; color: var(--accent); }
.plan small { color: var(--muted); }
.fast-list { list-style: none; margin: 0; padding: 0; }
/* each fast a row of the same columns, every row's alike: the hours one under the other, flush to their
   column's start, the digits of one width. On a phone the day with its plan under it (two lines), the
   hours and the bin beside them; from 600px the day, the plan, the hours and the bin on one line */
.fast-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(min-content, 5.9em) 32px; grid-template-areas: "day hours del" "plan hours del";
  column-gap: 10px; row-gap: 1px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.fast-list li > :not(.fast-del) { justify-self: start; min-width: 0; overflow-wrap: anywhere; }
.fast-list li > span:first-child { grid-area: day; }
.fast-list li > span[dir] { grid-area: plan; font-size: 13px; color: var(--muted); }
.fast-list li > b { grid-area: hours; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fast-list li > .fast-del { grid-area: del; justify-self: end; }
@media (min-width: 600px) {
  .fast-list li { grid-template-columns: minmax(min-content, 6.9em) minmax(0, 1fr) minmax(min-content, 5.9em) 32px; grid-template-areas: "day plan hours del"; column-gap: 8px; }
  .fast-list li > span[dir] { font-size: inherit; color: inherit; }
}
.fast-list b.ok { color: var(--good); }

/* entry, capture, scan */
.entry-form { display: flex; flex-direction: column; gap: 14px; }
.entry-item { display: flex; align-items: center; gap: 12px; font-size: 18px; }
/* the window's two halves: one column on a phone, as it always was; across on an iPad and a computer
   (what the food is, its fat and the meal on the right, its portion and amount on the left) */
.ef-cols, .ef-a, .ef-b { display: contents; }
@media (min-width: 700px) {
  dialog#dialog.entry-dlg { width: min(900px, calc(100vw - 48px)); }
  .entry-form .ef-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 30px; align-items: start; }
  .entry-form :is(.ef-a, .ef-b) { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .entry-fat .ef-row { flex-wrap: wrap; overflow: visible; }
  /* (the two halves level, as the user asked: nothing above the meal when there are no notes, its gap
     included, and the portion's chips as tall as the meal's, so their titles and rows line up) */
  .entry-form #entryNotes:empty { display: none; }
  .entry-form .ef-b .choice-chips[data-chips="unit"] > .choice { min-height: 64px; }
  /* the portions even: three to a row, a last row of two in halves and of one across; four as two rows
     of two (a lone "לפי ליטר" across a second row looked dropped) */
  .entry-form .ef-b .choice-chips[data-chips="unit"] { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .entry-form .ef-b .choice-chips[data-chips="unit"] > .choice { grid-column: span 2; min-width: 0; }
  /* (counted among the buttons: the group's hidden input comes first) */
  .entry-form .ef-b .choice-chips[data-chips="unit"] > .choice:is(:nth-last-of-type(2):nth-of-type(3n+1), :last-of-type:nth-of-type(3n+2)) { grid-column: span 3; }
  .entry-form .ef-b .choice-chips[data-chips="unit"] > .choice:last-of-type:nth-of-type(3n+1) { grid-column: span 6; }
  .entry-form .ef-b .choice-chips[data-chips="unit"]:has(> .choice:nth-of-type(4):last-of-type) > .choice { grid-column: span 3; }
}
.entry-pic { width: 56px; height: 56px; border-radius: 14px; }
.qty-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.entry-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.entry-total b { font-size: 20px; }
.voice { display: grid; gap: 12px; justify-items: center; }
.voice form { width: 100%; }
.mic-btn { width: 96px; height: 96px; border-radius: 50%; border: 0; display: grid; place-items: center; background: linear-gradient(160deg, #38a3e0, #12936a); color: #fff; cursor: pointer; box-shadow: 0 10px 30px rgba(18, 147, 106, .35); }
.mic-btn.on { animation: pulse 1.2s ease-in-out infinite; background: linear-gradient(160deg, #ff6b6b, #e5487f); }
/* listening as the window opens: a row with a bolt, what it does, and a switch */
.voice-auto { width: 100%; max-width: 440px; margin: 2px auto 4px; padding: 10px 14px; border-radius: 16px; display: flex; align-items: center; gap: 12px;
  color: var(--text); background: var(--row-alt); border: 1px solid var(--border); transition: background .25s, border-color .25s; }
.voice-auto:has(input:checked) { background: color-mix(in srgb, #12936a 10%, var(--row-alt)); border-color: color-mix(in srgb, #12936a 40%, var(--border)); }
.va-ico { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #38a3e0, #12936a); box-shadow: 0 6px 14px -6px rgba(18, 147, 106, .8); }
.voice-auto:has(input:checked) .va-ico svg { animation: va-zap 2.6s ease-in-out infinite; }
@keyframes va-zap { 0%, 80%, 100% { transform: none; } 86% { transform: rotate(-12deg) scale(1.15); } 92% { transform: rotate(8deg) scale(1.08); } }
.va-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; text-align: start; }
.va-text b { font-size: 15px; }
.va-text small { font-size: 12.5px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .va-ico svg { animation: none !important; } }
@keyframes pulse { 50% { box-shadow: 0 0 0 18px rgba(229, 72, 127, .15); } }
.confirm-list { display: grid; gap: 10px; margin-top: 12px; }
.confirm-row { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: var(--row-alt); }
.confirm-row.off { opacity: .5; }
.confirm-row select, .confirm-portion input { padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); }
.confirm-check { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.confirm-portion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.confirm-portion input { width: 90px; }
.confirm-kcal { margin-inline-start: auto; }
.photo-pick { display: grid; gap: 12px; }
.consent-lead { padding: 14px 16px; border-radius: 14px; border-inline-start: 5px solid #5b4fe0; background: color-mix(in srgb, #5b4fe0 10%, var(--surface)); color: #3c33b8; font-weight: 500; font-size: 17px; }
:root[data-theme="dark"] .consent-lead { color: #c9c4ff; }
.consent h4 { margin: 16px 0 6px; }
.consent-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.consent-list li { display: flex; justify-content: space-between; gap: 10px; }
.consent-list.yes li::after { content: "●"; color: var(--good); }
.consent-list.no li { color: var(--muted); }
.consent-list.no li::after { content: "✗"; color: var(--warn); font-weight: 700; }
.consent .btn { margin-top: 10px; }
.scanner { display: grid; gap: 12px; }
.scan-view { position: relative; overflow: hidden; border-radius: 16px; background: #000; aspect-ratio: 4 / 3; }
.scan-view video { width: 100%; height: 100%; object-fit: cover; }
/* the frame: dim around it, bright corners, and a red line sweeping across while it looks; green when it finds */
.scan-frame { position: absolute; inset: 28% 12%; border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 14px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .4);
  transition: border-color .2s, background .2s; }
.scan-frame::before { content: ""; position: absolute; inset: -4px; border-radius: 16px; pointer-events: none;
  --c: #fff; --l: 26px; --w: 4px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--w), linear-gradient(var(--c), var(--c)) top left / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--w), linear-gradient(var(--c), var(--c)) top right / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--w), linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--w), linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--l);
  background-repeat: no-repeat; animation: scan-corners 2s ease-in-out infinite; }
@keyframes scan-corners { 50% { transform: scale(1.025); opacity: .8; } }
.scan-line { position: absolute; left: 7%; right: 7%; top: 12%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #ff4d4d 20%, #ff6b6b 50%, #ff4d4d 80%, transparent);
  box-shadow: 0 0 10px 2px rgba(255, 77, 77, .65), 0 0 24px 6px rgba(255, 77, 77, .25); animation: scan-sweep 1.8s ease-in-out infinite alternate; }
@keyframes scan-sweep { to { top: 86%; } }
.scan-frame.hit { border-color: #2eb67d; background: rgba(46, 182, 125, .18); }
.scan-frame.hit::before { --c: #2eb67d; animation: none; }
.scan-frame.hit .scan-line { display: none; }
@media (prefers-reduced-motion: reduce) { .scan-frame::before, .scan-line { animation: none; } .scan-line { top: 50%; } }
.scan-manual .btn:disabled { opacity: .45; cursor: not-allowed; }
.scan-manual { display: flex; gap: 8px; }
/* the barcode typed by hand: its hint and its digits in the middle of the field */
.scan-manual input { text-align: center; }
.scan-manual input::placeholder { text-align: center; }
.ocr-box { display: grid; gap: 8px; padding: 14px; border-radius: 16px; border: 2px dashed var(--border); background: var(--row-alt); }
.ocr-box p { margin: 2px 0 0; }
.unit-row { display: grid; grid-template-columns: 1fr 96px auto 40px; align-items: center; gap: 8px; margin-bottom: 8px; transition: opacity .2s, transform .2s; }
.unit-row.leaving { opacity: 0; transform: translateX(-24px); }
.unit-del { width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 12px; display: grid; place-items: center; cursor: pointer; color: var(--muted); background: transparent; }
.unit-del:hover, .unit-del:focus-visible { color: #e5484d; border-color: color-mix(in srgb, #e5484d 50%, transparent); background: color-mix(in srgb, #e5484d 10%, transparent); }
.ing-row { display: grid; grid-template-columns: 1fr 90px auto auto; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.ing-row input { padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.ing-add .suggest { top: 100%; }

/* recipes */
.recipes-hero { margin: -18px -16px 0; padding: 14px 16px 18px; background: var(--hero); color: #fff; border-radius: 0 0 28px 28px; }
.recipes-hero h2 { margin: 0; font-size: 26px; }
.recipes-hero #recipeQ { margin-top: 12px; border: 0; font-size: 17px; }
.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 18px; }
.recipe-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); color: inherit; text-decoration: none; transition: transform .15s; }
.recipe-card:hover { transform: translateY(-3px); }
.recipe-photo { position: relative; aspect-ratio: 4 / 3; background: var(--stage); }
.recipe-pic { height: 100%; aspect-ratio: auto; border-radius: 0; }
.bookmark { position: absolute; top: 12px; right: 12px; width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center; background: #fff; color: #39445c; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, .2); }
.bookmark.on { color: var(--accent); }
.bookmark.on svg { fill: currentColor; }
/* what a serving gives, across the whole bottom of the photo over a dark fade (recipes.js recipeBand) */
.recipe-values { position: absolute; right: 0; left: 0; bottom: 0; padding: 26px 14px 10px; color: #fff;
  background: linear-gradient(180deg, rgba(8, 12, 22, 0), rgba(8, 12, 22, .72) 38%, rgba(8, 12, 22, .86)); }
.rv-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.rv-title { font-weight: 700; font-size: 13px; opacity: .9; }
.rv-grade { display: inline-flex; align-items: center; gap: 6px; padding-block: 3px; padding-inline: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); white-space: nowrap; }
.rv-grade em { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-style: normal; font-weight: 800; font-size: 12px; background: var(--hc); }
.rv-grade small { font-weight: 600; font-size: 11.5px; opacity: .92; }
.rv-row { display: grid; grid-template-columns: 1.35fr repeat(4, minmax(0, 1fr)); gap: 4px; align-items: end; text-align: center; font-size: 11.5px; }
.rv-row span { display: flex; flex-direction: column; gap: 1px; min-width: 0; opacity: .92; }
.rv-row b { font-size: 17px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rv-row b i { font-style: normal; font-size: 10.5px; font-weight: 600; margin-inline-start: 1px; opacity: .8; }
.rv-kcal { opacity: 1 !important; }
.rv-kcal b { font-size: 24px; color: #ffd27a; }
.recipe-text { position: relative; padding: 14px 16px 16px; }
/* What the AI kitchen wrote, on the photo's corner opposite the bookmark */
.recipe-ai { position: absolute; top: 14px; left: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, .22); }
/* The user's own recipes can be deleted right from the list */
.recipe-del {
  position: absolute; top: 8px; left: 8px; width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: transparent; color: var(--muted); cursor: pointer; transition: background .15s, color .15s;
}
.recipe-del:hover, .recipe-del:focus-visible { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.recipe-del + h3 { padding-left: 40px; }
.recipe-text h3 { margin: 0 0 2px; color: var(--accent); font-size: 20px; }
.recipe-text p { margin: 8px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.filter-group { margin-bottom: 18px; }
.filter-group h4 { margin: 0 0 8px; font-size: 16px; }
.chip-btn { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--accent); }
.chip-btn.on { color: var(--accent-text); }

/* reports */
.report-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
/* Tips for the user: cards with a coloured drawing, what they are about, and what to do */
.tips-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-bottom: 14px; }
.tips-head h3 { margin: 0; }
/* (rows of cards at least 300 px wide; a last row with fewer grows its cards to fill it: no empty cell) */
.tips-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.tips-grid > .tip-card { flex: 1 1 300px; min-width: min(100%, 300px); }
.tip-card {
  position: relative; display: flex; gap: 14px; padding: 16px 16px 16px 18px; padding-inline: 16px 18px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tc) 11%, var(--surface)), var(--surface) 70%);
  border: 1px solid color-mix(in srgb, var(--tc) 22%, var(--border));
  animation: tip-in .45s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 70ms);
}
.tip-card::before { content: ""; position: absolute; inset-block: 14px; inset-inline-start: 0; width: 4px; border-radius: 0 4px 4px 0; background: var(--tc); }
.tip-ico { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--tc) 80%, #fff), var(--tc)); box-shadow: 0 6px 16px color-mix(in srgb, var(--tc) 35%, transparent); }
.tip-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tip-cat { align-self: flex-start; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: color-mix(in srgb, var(--tc) 75%, var(--text)); background: color-mix(in srgb, var(--tc) 14%, transparent); }
.tip-card h4 { margin: 2px 0 0; font-size: 16px; }
/* (what the tip is about, a food: a line of its own under the title, the words under it) */
.tip-card .tip-sub { display: block; margin-top: 2px; font-size: 14.5px; font-weight: 800; color: color-mix(in srgb, var(--tc) 72%, var(--text)); }
.tip-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.tip-card p b { color: var(--text); font-weight: 600; }
.tip-action { align-self: flex-start; display: inline-flex; align-items: center; gap: 2px; margin-top: 4px; font-size: 14px; font-weight: 700; color: color-mix(in srgb, var(--tc) 70%, var(--text)); text-decoration: none; }
.tip-action:hover { text-decoration: underline; }
.tip-card.good { --tc: #22a06b; }
.tips-more { margin-top: 12px; }
.tips-more summary { cursor: pointer; font-weight: 700; color: var(--accent); padding: 6px 0; }
.tips-more[open] summary { margin-bottom: 10px; }
.tips-sub { margin: 20px 0 10px; font-size: 14px; color: var(--muted); }
.tips-grid.general .tip-card { background: var(--surface-2); }
/* the watch's tips: a warm edge in the rings' colours */
.watch-tips { background: linear-gradient(160deg, color-mix(in srgb, #ff7a45 6%, var(--surface)), var(--surface) 50%, color-mix(in srgb, #a78bfa 6%, var(--surface))); }

@keyframes tip-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .tip-card { animation: none; } }
html[data-a11y~="motion"] .tip-card { animation: none; }
.kpi { display: flex; flex-direction: column; padding: 16px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.kpi span { color: var(--muted); font-size: 14px; }
.kpi b { font-size: 26px; }
.kpi small { color: var(--muted); }
.split-bar { display: flex; height: 18px; border-radius: 999px; overflow: hidden; background: var(--track); }
.split-bar span { background: var(--c); }
.split-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
.split-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); margin-inline-end: 6px; }
.insights { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.insights li { padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--good) 9%, transparent); }
.insights li.warn { background: color-mix(in srgb, #f59e0b 13%, transparent); }
/* Insights with their drawings (insight-art.js): the topic's picture on its tile, the words, and a mark */
.ins-list { gap: 10px; }
.ins-list li { display: flex; align-items: center; gap: 14px; padding: 10px 12px; padding-inline-end: 14px; border-radius: 16px; animation: ins-in .45s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }
.ins-art { flex: none; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(150deg, color-mix(in srgb, var(--ic) 20%, var(--surface)), color-mix(in srgb, var(--ic) 8%, var(--surface)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ic) 26%, transparent), 0 4px 12px color-mix(in srgb, var(--ic) 16%, transparent); }
.ins-art svg { overflow: visible; }
.ins-text { flex: 1; min-width: 0; line-height: 1.55; }
.ins-mark { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; background: var(--good); }
.ins-list li.warn .ins-mark { background: #e0a100; }
.ins-list li.info .ins-mark { background: var(--accent); color: var(--accent-text); font-family: Georgia, serif; font-style: italic; }
.ins-list li:hover .ia-move { animation: ia-wiggle .6s ease-in-out; }
.ins-list li[data-ins] { cursor: pointer; transition: transform .18s, box-shadow .2s; }
.ins-list li[data-ins]:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.ins-list li[data-ins]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ins-more { flex: none; font-size: 22px; line-height: 1; color: var(--muted); margin-inline-start: -4px; }
/* An insight's window */
.insd { display: flex; flex-direction: column; gap: 16px; }
.insd-hero { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 20px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--ic) 16%, var(--surface)), color-mix(in srgb, var(--ic) 5%, var(--surface))); }
.insd-hero .ins-art { width: 88px; height: 88px; border-radius: 24px; }
.insd-flag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; background: var(--fc); }
.insd-lead { margin: 8px 0 0; font-size: 17px; font-weight: 600; line-height: 1.5; }
.insd-sec h4 { margin: 0 0 6px; font-size: 15px; }
.insd-sec p { margin: 0; line-height: 1.65; color: var(--muted); }
.insd-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 8px; }
.insd-steps li { counter-increment: step; display: flex; align-items: flex-start; gap: 10px; line-height: 1.55; }
.insd-steps li::before { content: counter(step); flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; background: var(--ic); }
.insd-foods { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.insd-foods li { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; align-items: center; gap: 10px; font-size: 14px; }
.insd-foods li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insd-bar { height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; }
.insd-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ic); }
.insd-foods b { white-space: nowrap; }
.insd-foods small { color: var(--muted); font-weight: 400; }
.insd-go { align-self: stretch; text-align: center; }
.insd-cols, .insd-main { display: flex; flex-direction: column; gap: 16px; }
/* an iPad's and a computer's: across, why and what to do on one side, the foods on the other (or why
   and what to do side by side); its button a button's width in the middle */
@media (min-width: 700px) {
  dialog#dialog.insd-dlg { width: min(860px, calc(100vw - 48px)); }
  .insd-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; align-items: start; }
  .insd-cols:not(.has-foods) > .insd-main { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; align-items: start; }
  .insd-cols.has-foods > .insd-side { padding-inline-start: 28px; border-inline-start: 1px solid var(--border); }
  .insd-go { align-self: center; min-width: min(100%, 320px); }
}
.ins-list .ia-move { transform-box: fill-box; transform-origin: center; }
.ins-list .ia-spark { transform-box: fill-box; transform-origin: center; animation: ia-twinkle 2.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .3s); }
.ins-list .ia-grains { animation: ia-fall 2.2s ease-in infinite; }
.ins-list .ia-water { transform-box: fill-box; transform-origin: bottom; animation: ia-slosh 3s ease-in-out infinite; }
.ins-list .ia-moon { transform-box: fill-box; transform-origin: center; animation: ia-twinkle 4s ease-in-out infinite; }
.ins-list .ia-speed { animation: ia-speed 1.4s ease-in-out infinite; }
@keyframes ins-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes ia-wiggle { 25% { transform: rotate(-8deg) scale(1.06); } 60% { transform: rotate(6deg); } }
@keyframes ia-twinkle { 50% { transform: scale(.55) rotate(30deg); opacity: .5; } }
@keyframes ia-fall { from { transform: translateY(-3px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(6px); opacity: 0; } }
@keyframes ia-slosh { 50% { transform: scaleY(.93); } }
@keyframes ia-speed { 50% { transform: translateX(-3px); opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .ins-list li, .ins-list li *, .ins-list li *::before { animation: none !important; } }
html[data-a11y~="motion"] .ins-list li, html[data-a11y~="motion"] .ins-list li * { animation: none !important; }
.rank { display: grid; gap: 10px; }
.rank-row { display: grid; grid-template-columns: minmax(120px, 1.2fr) 2fr 70px; align-items: center; gap: 12px; }
.rank-row b { text-align: left; }

/* ---------- phones ---------- */
@media (max-width: 640px) {
  #q { font-size: 17px; padding-left: 112px; }
  .search-box:has(.field-clear:not([hidden])) #q { padding-left: 148px; }
  .hero { grid-template-columns: 1fr; gap: 16px; }
  .hero figure { width: min(260px, 100%); margin: 0 auto; }
  /* the Nutri-Score in the middle, under the photo: its title over its letters */
  .hero .ns { display: flex; align-items: center; width: fit-content; margin-inline: auto; }
  .detail { padding: 16px; }
  .summary { grid-template-columns: 1fr; justify-items: center; }
  .macros { width: 100%; }
  .macro .m-val b { font-size: 24px; }
  .bars, .h-bars.two { grid-template-columns: 1fr; }
  .intake-card.main { grid-column: auto; }
  .field, .portion .field select { width: 100%; }
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
  .rings { width: 100%; justify-content: center; }
  .report-kpis { grid-template-columns: repeat(2, 1fr); }
  .recipe-body { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .rank-row { grid-template-columns: 1fr 1fr 56px; }
  .big-value { min-width: 140px; }
  .big-value b, .big-value input { font-size: 36px; }
  .round-btn.big { width: 60px; height: 60px; }
  .fab { left: 18px; bottom: 18px; }
}

/* ---------- printable report: an A4 sheet on the screen, and the same sheet on paper ---------- */
/* the toolbar: back, what this is, PDF and print; it stays at the top while the sheet scrolls */
.print-bar { position: sticky; top: calc(var(--top-h, 0px) + 8px); z-index: 6; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 8px;
  border-radius: 18px; background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--border); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pb-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.pb-title small { font-size: 12px; color: var(--muted); }
.pb-acts { display: flex; gap: 8px; }
.print-bar .btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
@media (max-width: 480px) { .pb-title { display: none; } .print-bar { justify-content: space-between; } .print-bar .btn { padding-inline: 12px; } }
/* the sheet: A4, white, on a quiet desk, smaller on a narrow screen (--paper-zoom, reports.js) */
.paper-stage { display: flex; justify-content: center; padding: 8px 0 24px; overflow: hidden; }
.paper { zoom: var(--paper-zoom, 1); flex: none; width: 794px; min-height: 1123px; padding: 46px 44px; background: #fff; border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 18px 50px -12px rgba(15, 23, 42, .35); }
.print-report { background: #fff; color: #111827; font-size: 12.5px; line-height: 1.45; }
.pr-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 12px; border-bottom: 2.5px solid #0b5e45; }
.pr-head h1 { margin: 0; font-size: 25px; letter-spacing: -.3px; color: #0b3d2e; }
.pr-head p { margin: 4px 0 0; font-size: 13.5px; color: #374151; }
.pr-brand { font-weight: 800; font-size: 20px; color: #12936a; letter-spacing: -.3px; }
/* the figures: an even grid of label over value */
.pr-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; margin-top: 12px; }
.pr-chip { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border: 1px solid #d1d9e6; border-radius: 8px; background: #f8fafc; }
.pr-chip span { font-size: 10.5px; color: #4b5563; }
.pr-chip b { font-size: 14px; color: #111827; font-variant-numeric: tabular-nums; }
.pr-weights { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.pr-weights span { display: flex; flex-direction: column; align-items: center; padding: 3px 9px; border: 1px solid #e5e7eb; border-radius: 7px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pr-weights small { font-weight: 400; color: #6b7280; }
/* the days: two to a row, each a framed table */
.pr-days { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.pr-day { border: 1px solid #cbd5e1; border-radius: 9px; overflow: hidden; break-inside: avoid; page-break-inside: avoid; }
.pr-day h2 { margin: 0; padding: 7px 10px; font-size: 14px; background: #eef4f1; color: #0b3d2e; border-bottom: 1px solid #cbd5e1; }
.pr-day-sum { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 5px 6px; border-bottom: 1px solid #e5e7eb; text-align: center; font-size: 10px; color: #4b5563; }
.pr-day-sum span { display: flex; flex-direction: column; }
.pr-day-sum b { font-size: 12.5px; color: #111827; font-variant-numeric: tabular-nums; }
.pr-acts { margin: 5px 10px; font-size: 11px; color: #374151; }
.pr-day table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.pr-day th { padding: 4px 8px; font-size: 10.5px; font-weight: 700; color: #4b5563; background: #f8fafc; border-bottom: 1px solid #e5e7eb; text-align: start; }
.pr-day td { padding: 3px 8px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.pr-day td:not(:first-child), .pr-day th:not(:first-child) { text-align: center; width: 46px; font-variant-numeric: tabular-nums; }
.pr-day tbody tr:nth-child(even):not(.pr-meal) { background: #fafbfc; }
.pr-meal td { font-weight: 700; color: #0b5e45; padding-top: 6px; background: #fff; }
.pr-day small { color: #6b7280; }
.pr-day .muted { margin: 8px 10px; color: #6b7280; }
.pr-summary { grid-column: 1 / -1; }
.pr-summary h2 { background: #0b5e45; color: #fff; border-bottom: 0; }
.pr-foot { margin-top: 16px; padding-top: 8px; border-top: 1px solid #e5e7eb; font-size: 10px; color: #6b7280; text-align: center; }
@media print {
  @page { size: A4; margin: 12mm 11mm 14mm; }
  html, body { background: #fff !important; }
  .top, .no-print, .print-bar, .fab, #toast, dialog, .bottom-nav, .side-nav, .a11y-fab, .to-top, .skip-link { display: none !important; }
  .view, main { max-width: none !important; margin: 0 !important; padding: 0 !important; }
  .paper-stage { display: block; padding: 0; overflow: visible; }
  .paper { zoom: 1 !important; width: auto; min-height: 0; padding: 0; box-shadow: none; border-radius: 0; }
  .print-report, .print-report * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* fixes */
.level { white-space: nowrap; }
.hero-text [dir="auto"] { text-align: right; }
.profile-card > span:not(.badge-icon) { flex: 1; display: flex; flex-direction: column; }
.profile-card span.badge-icon { flex: none; }
.recipe-photo { aspect-ratio: auto; height: 210px; }

/* ---------- header menus ---------- */
.logo img { border-radius: 9px; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
/* the logo's emblem on a white chip, like the app icon, on the header and in the side menu */
.logo-mark {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2), inset 0 0 0 1px rgba(0, 0, 0, .04);
}
.logo .logo-mark img, .logo-mark img { display: block; width: 28px; height: 28px; border-radius: 0; box-shadow: none; }
.avatar-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); display: grid; place-items: center;
  background: linear-gradient(160deg, #ffb86b, #f06f8f); color: #fff; font-weight: 700; font-size: 18px; cursor: pointer;
}
.profile-menu { position: relative; }
.menu-panel {
  position: absolute; top: 48px; left: 0; width: min(330px, calc(100vw - 24px)); max-height: 78vh; overflow: auto; z-index: 40;
  background: var(--surface); color: var(--text); border-radius: 18px; box-shadow: 0 14px 44px rgba(0, 0, 0, .28); padding: 8px;
}
/* The header's menus (profile, notifications) stand apart from the page: a surface a shade lighter,
   tinted with the skin's colour, a fine edge of it and a deeper shadow */
.menu-panel, .bell-panel {
  --menu-bg: color-mix(in srgb, var(--surface) 90%, var(--accent) 10%);
  background: var(--menu-bg); border: 2px solid color-mix(in srgb, var(--accent) 72%, var(--border));
  box-shadow: 0 22px 54px rgba(0, 0, 0, .34), 0 3px 10px rgba(0, 0, 0, .18);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.menu-panel, .bell-panel) { --menu-bg: color-mix(in srgb, var(--surface) 84%, color-mix(in srgb, var(--accent) 50%, #fff) 16%); box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .05) inset; } }
:root[data-theme="dark"] :is(.menu-panel, .bell-panel) { --menu-bg: color-mix(in srgb, var(--surface) 84%, color-mix(in srgb, var(--accent) 50%, #fff) 16%); box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .05) inset; }
.bell-panel .bell-head, .bell-panel .bell-item:not(.unread) { background: var(--menu-bg); }
.bell-panel .bell-item.unread { background: color-mix(in srgb, var(--accent) 17%, var(--menu-bg)); }
.bell-panel.menu-panel { padding: 0; width: min(360px, calc(100vw - 24px)); }
.menu-head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 14px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
/* Signing out: last in the menu, set apart by a line, in the warning colour */
.menu-signout { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 14px 10px 10px; border: 0; border-top: 1px solid var(--border); border-radius: 0 0 12px 12px; background: none; color: var(--warn); font: inherit; font-weight: 600; text-align: start; cursor: pointer; }
.menu-signout > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.menu-signout small { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
.menu-item > span.menu-signout-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.menu-signout:hover { background: color-mix(in srgb, var(--warn) 8%, transparent); }
.menu-head div { display: flex; flex-direction: column; }
.menu-head b { font-size: 18px; }
.avatar-big { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: none; background: linear-gradient(160deg, #ffb86b, #f06f8f); color: #fff; font-weight: 700; font-size: 22px; }
.avatar-big:empty::before { content: ""; width: 22px; height: 22px; border-radius: 50%; border: 3px solid #fff; }
/* The profile picture in its round frames (profile-photo.js) */
.avatar-btn img, .avatar-big img, .me-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.avatar-btn.has-photo, .avatar-big.has-photo { overflow: hidden; padding: 0; }
.me-card { display: flex; align-items: center; gap: 16px; }
.me-photo {
  position: relative; flex: none; width: 84px; height: 84px; padding: 3px; border: 0; border-radius: 50%; cursor: pointer; color: #fff; font-size: 34px; font-weight: 700;
  display: grid; place-items: center; background: linear-gradient(160deg, #ffb86b, #f06f8f); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px color-mix(in srgb, var(--accent) 45%, transparent);
}
.me-photo.has-photo { background: var(--surface); }
.me-photo > span:first-child { line-height: 1; }
.me-cam { position: absolute; bottom: -2px; left: -2px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--accent); border: 2px solid var(--surface); }
.me-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.me-text b { font-size: 20px; }
.me-actions { display: flex; gap: 14px; margin-top: 4px; }
.me-link { padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--accent); cursor: pointer; }
.me-link.danger { color: #e5484d; }
/* Cropping the picture: a round window over the photo, a zoom slider under it */
.crop { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.crop-stage { position: relative; max-width: 100%; border-radius: 20px; overflow: hidden; background: #111; touch-action: none; }
.crop-stage canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.crop-stage canvas:active { cursor: grabbing; }
.crop-ring { position: absolute; inset: 0; pointer-events: none; border-radius: 20px; background: radial-gradient(circle closest-side, transparent 0 99%, rgba(0, 0, 0, .55) 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.crop-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); }
.crop-zoom { display: flex; align-items: center; gap: 10px; width: min(260px, 100%); font-size: 20px; color: var(--muted); }
.crop-zoom input { flex: 1; accent-color: var(--accent); }
.crop .actions { width: 100%; justify-content: center; }
.menu-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; color: inherit; text-decoration: none; font-weight: 500; }
.menu-item:hover { background: var(--row-alt); }
.menu-item > span:not(.badge-icon):not(.menu-signout-ico) { display: flex; flex-direction: column; }
.menu-item small { font-weight: 400; font-size: 12px; }
/* the page open now, in the profile's menu and the app's menu: its item marked */
.menu-item.here { background: color-mix(in srgb, var(--accent) 13%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 40%, transparent); }
.menu-item.here > span:not(.badge-icon):not(.menu-signout-ico) { font-weight: 700; color: var(--accent); }
.am-item.here { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.am-item.here b { color: var(--accent); }
/* the colour scheme, at the top of the profile menu: three drawings with their names, and a pill in
   the picked one's colour (warm for light, indigo for dark, the app's green for automatic) that slides */
.menu-theme { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 4px 10px; padding: 4px; border-radius: 16px;
  background: var(--track); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12); }
.mt-ink { position: absolute; z-index: -1; top: 4px; bottom: 4px; width: calc((100% - 8px) / 3); inset-inline-start: calc(4px + var(--i, 0) * (100% - 8px) / 3);
  border-radius: 12px; background: var(--mt); box-shadow: 0 6px 16px -6px var(--mt-glow); transition: inset-inline-start .4s cubic-bezier(.3, 1.3, .5, 1), box-shadow .3s; }
.menu-theme[data-on="light"] { --mt: linear-gradient(135deg, #fef3c7, #fbbf24); --mt-glow: rgba(245, 158, 11, .6); --mt-text: #6b4100; }
.menu-theme[data-on="dark"] { --mt: linear-gradient(135deg, #818cf8, #4338ca); --mt-glow: rgba(79, 70, 229, .6); --mt-text: #fff; }
.menu-theme[data-on="system"] { --mt: linear-gradient(135deg, color-mix(in srgb, var(--accent) 75%, #fff), var(--accent)); --mt-glow: color-mix(in srgb, var(--accent) 60%, transparent); --mt-text: var(--accent-text); }
.menu-theme button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px 7px; border: 0; border-radius: 12px;
  background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: color .25s; }
.menu-theme button:not([aria-checked="true"]):hover { color: var(--text); }
.menu-theme button[aria-checked="true"] { color: var(--mt-text); }
.menu-theme button svg { transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.menu-theme button[aria-checked="true"] svg { transform: scale(1.15); }
.menu-theme [data-theme-pick="light"][aria-checked="true"] svg { animation: mt-sun 14s linear infinite; }
@keyframes mt-sun { from { transform: scale(1.15) rotate(0deg); } to { transform: scale(1.15) rotate(360deg); } }
.menu-theme button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .mt-ink, .menu-theme button svg { transition: none; } .menu-theme svg { animation: none !important; } }
.greeting { margin: 4px 2px 0; font-size: 15px; opacity: .9; }
/* "The next day" on today: in its place, dimmed and not clickable */
.day-arrows .hero-btn:disabled { opacity: .35; cursor: default; pointer-events: none; }

/* tabs carry an icon; on phones they become an app-style bottom bar */
.tabs a { display: inline-flex; align-items: center; gap: 6px; }
.tabs svg { width: 18px; height: 18px; flex: none; }
.fab { display: none; }

@media (max-width: 640px) {
  body { padding-bottom: calc(64px + var(--sa-bottom)); }
  .top-inner { padding-top: calc(8px + var(--sa-top)); }
  .tabs {
    position: fixed; right: 0; left: 0; bottom: 0; z-index: 30; justify-content: space-around; gap: 0; overflow: visible;
    padding: 6px 4px calc(6px + var(--sa-bottom)); background: var(--surface); border-top: 1px solid var(--border);
    box-shadow: 0 -4px 18px rgba(16, 24, 40, .08);
  }
  .tabs a { flex: 1; flex-direction: column; gap: 2px; padding: 4px 0; border: 0; border-radius: 12px; color: var(--muted); font-size: 11px; }
  .tabs a svg { width: 24px; height: 24px; }
  .tabs a.on { background: transparent; color: var(--accent); }
  .tabs a.on svg { stroke-width: 2.4; }
  .search-box { margin-bottom: 12px; }
  .fab { display: grid; left: 16px; bottom: calc(80px + var(--sa-bottom)); }
  #toast { bottom: calc(84px + var(--sa-bottom)); }
  input, select, textarea { font-size: 16px; } /* iOS zooms into smaller fields */
  .view { padding-bottom: 40px; }
  .kv b { font-size: 18px; }
  .kv-big b { font-size: 26px; }
  .h-ring { width: 104px; height: 104px; }
  .slide { min-height: 196px; }
  .card-split { gap: 12px; }
  .page-head h2 { font-size: 22px; }
  .hero h2 { font-size: 23px; }
  .recipe-photo { height: 190px; }
  .goal-pct { font-size: 26px; }
  .drinks { grid-template-columns: repeat(2, 1fr); }
  .set-row { min-height: 54px; font-size: 16px; }
  /* Under the header's buttons, below the notch too, and never past the bottom bar */
  .menu-panel { position: fixed; top: calc(64px + var(--sa-top)); left: 12px; right: 12px; width: auto; max-height: calc(100dvh - 64px - var(--sa-top) - 110px - var(--sa-bottom)); }
}
/* tablets: two columns where there is room */
@media (min-width: 641px) and (max-width: 1024px) {
  .quick-grid { grid-template-columns: repeat(3, 1fr); }
  .recipe-grid { grid-template-columns: repeat(2, 1fr); }
  .hero { grid-template-columns: 220px 1fr; }
}
@media (hover: none) {
  .quick:hover, .drink:hover, .recipe-card:hover { transform: none; }
}
@media (max-width: 640px) {
  .intake { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .intake-card { flex-direction: column; text-align: center; gap: 6px; padding: 12px 6px; }
  .intake-card.main { grid-column: span 2; flex-direction: row; text-align: start; }
  .intake-text { align-items: center; }
  .intake-card.main .intake-text { align-items: flex-start; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .s-val { font-size: 17px; }
}
/* the profile's recommendations (always an even count): half of them to a row on a wide page, three and
   three (auto-fit had five and a lone one, the side menu closed) */
@media (min-width: 700px) { .stats.pr-tips { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); } }
.page-art { display: grid; place-items: center; margin-bottom: 6px; }
.hero-title { display: flex; align-items: center; gap: 12px; }
.hero-sub { font-size: 14px; opacity: .85; }
.segmented button { white-space: nowrap; }

/* ---------- bottom navigation: a floating glass bar with the add button in the middle ---------- */
body { padding-bottom: calc(108px + var(--sa-bottom)); }
.top-inner { padding-bottom: 4px; }
.bottom-nav {
  /* Low, as iOS floats its tab bar: partly over the home bar's safe area, never under 8px */
  position: fixed; z-index: 30; left: 50%; bottom: max(8px, calc(var(--sa-bottom) - 12px)); transform: translateX(-50%);
  width: min(520px, calc(100% - 20px)); height: 68px; padding: 0 8px; border-radius: 36px;
  display: grid; grid-template-columns: 1fr 1fr 84px 1fr 1fr; align-items: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .96));
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px rgba(16, 24, 40, .10), 0 10px 28px rgba(16, 24, 40, .22);
}
:root[data-theme="dark"] .bottom-nav { background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 80%, transparent), color-mix(in srgb, var(--surface) 96%, transparent)); box-shadow: 0 -8px 28px rgba(0, 0, 0, .35), 0 8px 28px rgba(0, 0, 0, .35); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bottom-nav { background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 80%, transparent), color-mix(in srgb, var(--surface) 96%, transparent)); box-shadow: 0 -8px 28px rgba(0, 0, 0, .35), 0 8px 28px rgba(0, 0, 0, .35); } }
.bottom-nav a {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 56px; margin: 0 2px;
  border-radius: 28px; color: var(--muted); text-decoration: none; font-size: 12px; font-weight: 500; transition: color .2s;
  -webkit-touch-callout: none;
}
.bottom-nav a svg { width: 24px; height: 24px; transition: transform .28s cubic-bezier(.3, 1.6, .5, 1); }
/* a finger on a tab: it presses in at once (the tab that opens hops once: nav.js markTab) */
.bottom-nav a.pressed svg { transform: scale(.84); transition-duration: .1s; }
.bottom-nav a.pressed span { opacity: .75; }
@media (prefers-reduced-motion: reduce) { .bottom-nav a svg { transition: none; animation: none !important; } }
.bottom-nav a.on, .bottom-nav a.under { color: var(--accent); }
.bottom-nav a.on svg, .bottom-nav a.under svg { stroke-width: 2.4; }
/* A finger slid along the bar moves the highlight (nav.js), so the bar doesn't scroll the page */
.bottom-nav { touch-action: none; }
/* The one highlight under the current tab: it glides to the next tab with a little spring, as in iOS */
.nav-pill {
  position: absolute; z-index: 0; top: 6px; left: 0; width: var(--pw, 0); height: 56px; border-radius: 28px; pointer-events: none;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  transform: translateX(var(--px, 0)) scale(var(--ps, 1));
  transition: transform .38s cubic-bezier(.34, 1.35, .6, 1), width .38s cubic-bezier(.34, 1.35, .6, 1), opacity .2s, background .2s, box-shadow .2s;
}
.nav-pill.off { opacity: 0; }
.nav-pill.instant { transition: none; }
/* While a finger drags it, it follows the finger closely and swells a little, like a lens */
.bottom-nav.dragging .nav-pill {
  --ps: 1.1; transition: transform .12s ease-out, width .2s ease-out;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 22%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}
@media (prefers-reduced-motion: reduce) { .nav-pill { transition: opacity .2s; } }
.nav-add {
  justify-self: center; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 4px solid var(--bg); color: #fff; transform: translateY(-18px);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--brand));
  box-shadow: 0 5px 6px color-mix(in srgb, var(--accent) 30%, transparent), 0 4px 10px rgba(0, 0, 0, .25); transition: transform .15s;
}
.nav-add:hover { transform: translateY(-20px); }
.nav-add:active { transform: translateY(-16px) scale(.96); }
.nav-add:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
#toast { bottom: calc(max(8px, calc(var(--sa-bottom) - 12px)) + 88px); }
@media print { .bottom-nav { display: none !important; } }

/* ---------- home dashboard ---------- */
.dash-hero { margin: -18px -16px 0; padding: 10px 18px 22px; background: var(--hero); color: #fff; border-radius: 0 0 32px 32px; box-shadow: 0 12px 30px color-mix(in srgb, var(--brand) 28%, transparent); }
.dash-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dash-title { display: flex; flex-direction: column; }
.dash-title .greeting { margin: 0; font-size: 14px; opacity: .85; }
.dash-title { flex: 1; min-width: 0; align-items: flex-start; }
/* The day's name on the right (its start) on one line, with the open-calendar mark right after it;
   where the line is too narrow, diary.js (fitDayTitle) makes the type smaller */
.day-title { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; font-size: 24px; font-weight: 700; text-align: start; line-height: 1.2; }
/* the same height whatever the day's name ("היום" whole, a long date made smaller to fit): the week's strip
   and the panel under it stand still from day to day (they moved by ten pixels) */
:is(.dash-title, .hx-day) .day-title { height: 1.5em; }
.day-title > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-title .chev { flex: none; transform: rotate(-90deg); opacity: .8; }
@media (max-width: 420px) { .day-title { font-size: 21px; } }
.day-arrows { display: flex; gap: 6px; }
/* another day: back to today, as the arrows look, a little apart from them */
.day-arrows .day-today { margin-inline-end: 4px; }
.week-rings { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin: 14px 0 6px; }
.wring { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0 8px; border-radius: 16px; color: rgba(255, 255, 255, .8); text-decoration: none; font-size: 13px; }
.wring-dial { position: relative; width: 40px; height: 40px; display: grid; place-items: center; }
.wring-dial svg { position: absolute; inset: 0; }
.wring-dial b { position: relative; font-size: 14px; color: #fff; }
.wring.on { background: rgba(255, 255, 255, .16); color: #fff; }
.wring.on .wring-dial b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--brand); }
.wring.future { opacity: .4; pointer-events: none; }
.dash-main { position: relative; display: flex; align-items: center; justify-content: center; gap: 44px; margin-top: 6px; }
.gauge { position: relative; width: 240px; height: 240px; color: #fff; text-decoration: none; justify-self: center; }
.gauge svg { width: 100%; height: 100%; }
.gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.1; }
.gauge-center b { font-size: 46px; letter-spacing: -.5px; }
.gauge-center span { font-size: 14px; opacity: .9; margin-top: 4px; }
.gauge-center small { margin-top: 8px; padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: 12px; }
/* The day's answer lives in the circle only: a soft light breathes behind the number, which is lit from above */
.gauge::before { content: ""; position: absolute; inset: 16%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .2), rgba(255, 255, 255, .06) 55%, transparent 72%); animation: gauge-glow 4.5s ease-in-out infinite; }
.gauge-center b { background: linear-gradient(180deg, #fff 30%, color-mix(in srgb, var(--glow) 55%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .18)); }
@keyframes gauge-glow { 50% { transform: scale(1.08); opacity: .75; } }
/* Beside the ring, the day's sum in one of four looks (diary.js HERO_STYLES), picked with the small
   switch in the panel's corner: a receipt, a ring that shows the sum itself, cards, a budget bar */
.hs-receipt, .hs-budget, .hs-card { box-sizing: border-box; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); }
.hs-receipt, .hs-budget { width: min(400px, 100%); padding: 18px 22px; border-radius: 22px; display: flex; flex-direction: column; gap: 11px; }
.dash-main b { font-variant-numeric: tabular-nums; }
.dash-main b.a { color: #6ff0e2; }
.dash-main b.f { color: #ffc56b; }
.hs-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.hs-ico.a { background: rgba(111, 240, 226, .18); color: #6ff0e2; }
.hs-ico.f { background: rgba(255, 197, 107, .18); color: #ffc56b; }
.hs-row { display: flex; align-items: center; gap: 12px; }
.hs-row > span:not(.hs-ico) { flex: 1; font-size: 15px; opacity: .9; }
.hs-row b { font-size: 20px; }
.hs-used { display: flex; flex-direction: column; gap: 7px; border-top: 1px dashed rgba(255, 255, 255, .3); padding-top: 11px; }
.hs-used > div:first-child { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.hs-used span { opacity: .85; }
.hs-track { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.hs-track i { display: block; height: 100%; border-radius: inherit; background: #fff; transition: width .5s ease; }
/* the ring: what was eaten in white, what activity added at its end, a mark where the target ends */
.hero-ring { gap: 52px; }
.hero-ring .gauge, .hero-cards .gauge { width: 270px; height: 270px; }
.hero-ring .gauge-center b, .hero-cards .gauge-center b { font-size: 54px; }
.gauge-tick { stroke: rgba(4, 20, 40, .55); stroke-width: 3; stroke-linecap: round; }
.hs-legend { width: 200px; display: flex; flex-direction: column; gap: 18px; }
.hs-li { display: flex; align-items: center; gap: 12px; }
.hs-li > div { display: flex; flex-direction: column; line-height: 1.2; }
.hs-li span { font-size: 14px; opacity: .8; }
.hs-li b { font-size: 23px; }
.hs-dot { flex: none; width: 18px; height: 18px; border-radius: 50%; box-sizing: border-box; }
.hs-dot.t { border: 3px solid rgba(255, 255, 255, .35); }
.hs-dot.a { background: #6ff0e2; }
.hs-dot.f { background: #fff; }
.hs-dot.u { background: rgba(255, 255, 255, .16); }
/* cards on both sides, joined to the ring by a fading line */
.hero-cards { gap: 0; }
.hs-col { display: flex; flex-direction: column; gap: 14px; }
.hs-card { width: 212px; display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: 18px; }
.hs-card .hs-ico { width: 40px; height: 40px; border-radius: 12px; }
.hs-card > div { display: flex; flex-direction: column; line-height: 1.2; }
.hs-card b { font-size: 22px; }
.hs-card > div > span { font-size: 13px; opacity: .8; }
.hs-used-card { display: block; }
.hs-used-card .hs-used { border: 0; padding: 0; }
.hs-link { flex: none; width: 46px; height: 2px; }
.hs-link.r { background: linear-gradient(90deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .04)); }
.hs-link.l { background: linear-gradient(270deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .04)); }
.gauge-center .gc-pre { margin: 0 0 4px; font-size: 13px; opacity: .75; }
.gauge-center .gc-used { display: none; }
/* the budget bar, filling from the right */
.hs-budget { width: min(600px, 100%); gap: 13px; }
.hs-bt { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.hs-bt b { font-size: 16px; }
.hs-bt span { font-size: 14px; opacity: .85; }
.hs-bar { position: relative; padding: 6px 0; }
.hs-fill { display: flex; height: 28px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .14); }
.hs-fill i { display: block; height: 100%; }
.hs-fill i.e { background: #fff; }
.hs-fill i.e.over { background: var(--over-red); }
.hs-fill i.a { background: repeating-linear-gradient(135deg, #6ff0e2 0 6px, #3fc9bb 6px 12px); }
.hs-tick { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; border-radius: 2px; background: #fff; }
.hs-keys { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; }
.hs-keys span { display: inline-flex; align-items: center; gap: 7px; }
.hs-keys i { width: 12px; height: 12px; border-radius: 4px; background: #fff; }
.hs-keys i.a { background: #6ff0e2; }
.hs-keys i.tk { width: 3px; height: 14px; border-radius: 2px; }
/* the switch, in the panel's far corner, and its menu of the four looks */
.hs-pick { position: absolute; top: 0; left: 0; z-index: 3; }
.hs-switch { position: relative; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; transition: background .2s, transform .15s;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hs-switch::after { content: ""; position: absolute; inset: -6px; } /* a finger-sized target */
.hs-switch:hover, .hs-switch[aria-expanded="true"] { background: rgba(255, 255, 255, .26); }
.hs-switch:active { transform: scale(.92); }
.hs-menu { position: absolute; top: 44px; left: 0; width: 256px; padding: 6px; border-radius: 18px; display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: 0 18px 40px rgba(0, 0, 0, .3); animation: hs-menu .18s ease-out; }
.hs-menu[hidden] { display: none; }
/* as a popover (diary.js wireHero): in the top layer, placed under the switch */
.hs-menu[popover] { position: fixed; inset: auto; margin: 0; }
.hs-menu[popover]:not(:popover-open) { display: none; }
#heroMain.menu-open { z-index: 5; } /* without popovers: over the panels below */
.hs-menu button { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.hs-menu button:hover { background: var(--surface-2); }
.hs-menu button[aria-checked="true"] { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.hs-menu svg { flex: none; color: var(--accent); }
.hs-menu b { display: block; font-size: 14px; }
.hs-menu small { display: block; font-size: 12px; line-height: 1.3; color: var(--muted); }
@keyframes hs-menu { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .hs-menu { animation: none; } }
@media (max-width: 760px) {
  .hs-receipt, .hs-budget { width: 100%; }
  .hero-ring, .hero-cards { display: grid; width: 100%; }
  .hero-ring { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hero-ring .gauge, .hero-cards .gauge { grid-column: 1 / -1; order: -1; width: 250px; height: 250px; }
  .hero-ring .gauge-center b, .hero-cards .gauge-center b { font-size: 46px; }
  .hs-legend { width: auto; gap: 10px; }
  .hero-ring .hs-li { padding: 11px 13px; border-radius: 16px; background: rgba(255, 255, 255, .08); }
  .hero-ring .hs-li b { font-size: 19px; }
  .hero-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .hero-cards .hs-col { display: contents; }
  .hero-cards .hs-link, .hero-cards .hs-used-card { display: none; }
  .hero-cards .hs-card { width: auto; flex-direction: column; text-align: center; gap: 6px; padding: 12px 6px; }
  .hero-cards .hs-card > div { align-items: center; }
  .hero-cards .hs-card b { font-size: 19px; }
  .gauge-center .gc-used { display: inline-block; }
}
.dash-macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.macro-line .ml-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 14px; }
.macro-line .ml-top i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-inline-end: 6px; background: var(--c); }
.macro-line b { font-size: 16px; }
.macro-line small { font-weight: 400; opacity: .75; font-size: 12px; }
.ml-track { height: 8px; margin-top: 6px; border-radius: 999px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.ml-track div { height: 100%; border-radius: 999px; background: var(--c); transition: width .5s ease; }
.dash-hero .m-protein { --c: #ffc56b; } .dash-hero .m-carbs { --c: #6ff0e2; } .dash-hero .m-fat { --c: #d6b6ff; }

.dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.dash-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); color: inherit; text-decoration: none; min-width: 0; }
.dash-card.wide { grid-column: span 2; }
.link-card { transition: transform .15s, box-shadow .15s; }
.link-card:hover { transform: translateY(-2px); }
.dash-card header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dash-card h3 { margin: 0; font-size: 16px; }
.dash-card .more { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; color: var(--accent); text-decoration: none; }
.icon.flip { transform: scaleX(-1); }
.tile-body { display: flex; align-items: center; gap: 14px; }
/* the glass and the amount open the water and the other drinks, like "עוד משקאות" */
.water-go { color: inherit; text-decoration: none; border-radius: 16px; margin: -6px; padding: 6px; -webkit-tap-highlight-color: transparent; transition: background .2s, transform .15s; }
.water-go:hover { background: color-mix(in srgb, #2f8ff0 8%, transparent); }
.water-go:active { transform: scale(.98); }
.water-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tile-num { display: flex; flex-direction: column; min-width: 0; }
.tile-num b { font-size: 26px; line-height: 1.15; }
.tile-num b small { font-size: 14px; font-weight: 400; color: var(--muted); }
.tile-num .small-b { font-size: 18px; }
.tile-num span { color: var(--muted); font-size: 13px; }
.tile-bar { height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; }
.tile-bar div { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #7cc8ff, var(--c)); }
.tile-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 12px; border: 0; border-radius: 12px; background: color-mix(in srgb, var(--accent) 11%, transparent); color: var(--accent); font-weight: 700; cursor: pointer; }
.tile-btn:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.quality-tile .quality-score { --q: 0; flex: none; width: 120px; height: 120px; background: radial-gradient(closest-side, var(--surface) 78%, transparent 80% 100%), conic-gradient(var(--good) calc(var(--q) * 1%), var(--track) 0); color: var(--text); }
.quality-tile .quality-score b { font-size: 36px; }
.quality-tile .quality-score span { font-size: 12px; color: var(--muted); }
.quality-tile .quality-tips { font-size: 13px; gap: 4px; min-width: 0; }
.quality-tile .quality-tips li::before { color: var(--good); }
.quality-tile .quality-tips li.warn::before { color: #e0a100; }
.mini-ring { position: relative; flex: none; width: 64px; height: 64px; display: grid; place-items: center; }
.mini-ring svg { position: absolute; inset: 0; }
.mini-ring b { position: relative; font-size: 14px; }
/* A running fast in the diary's tile: the ring breathes, a light circles it, and when it ends */
.fast-tile .tile-body { position: relative; }
.fast-now { display: contents; }
.fast-live { position: absolute; inset-inline-start: 0; top: 50%; width: 64px; height: 64px; margin-top: -32px; pointer-events: none; }
.fast-live::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, #14a3b8 30%, transparent) 0%, transparent 70%); animation: fast-breathe 3.2s ease-in-out infinite; }
.fast-tile .mini-ring { z-index: 1; }
@keyframes fast-breathe { 0%, 100% { transform: scale(.92); opacity: .55; } 50% { transform: scale(1.12); opacity: 1; } }
/* the hourglass: a glass in its wooden frame, its sand glowing, a thin stream down the neck and grains
   dropping one after another onto the heap, the glass swaying a little, a gleam on it now and then */
.fast-ring .hg { transform-box: fill-box; transform-origin: center; animation: hg-sway 5s ease-in-out infinite; }
.fast-ring .hg-bulb { fill: color-mix(in srgb, #7dd3fc 14%, transparent); }
.fast-ring .hg-glass { fill: none; stroke: color-mix(in srgb, var(--text) 62%, transparent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fast-ring .hg-shine { fill: none; stroke: #fff; stroke-width: 1.1; stroke-linecap: round; opacity: .35; animation: hg-gleam 4.5s ease-in-out infinite; }
.fast-ring .hg-post { fill: none; stroke: #b7793b; stroke-width: 1.4; stroke-linecap: round; }
.fast-ring .hg-cap { fill: #c98a45; }
.fast-ring .hg-sand { fill: #f2b33d; filter: drop-shadow(0 0 1.6px color-mix(in srgb, #f2b33d 70%, transparent)); }
.fast-ring .hg-stream { fill: none; stroke: #f2b33d; stroke-width: .9; stroke-linecap: round; opacity: .75; }
.fast-ring .hg-grain { fill: #ffd27a; animation: hg-fall .9s cubic-bezier(.55, 0, 1, .45) infinite; }
@keyframes hg-fall { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(var(--d)); opacity: .9; } }
@keyframes hg-gleam { 0%, 70%, 100% { opacity: .2; } 82% { opacity: .8; } }
@keyframes hg-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
/* the seconds beside the hours and minutes, smaller, the numbers one width (nothing moves as they turn) */
.fast-so-far { font-variant-numeric: tabular-nums; }
.fast-sec { font-size: .62em; font-weight: 700; color: var(--muted); }
.fast-ends { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 6px 10px; border-radius: 10px; font-size: 13px; font-weight: 600; color: color-mix(in srgb, #14a3b8 70%, var(--text)); background: color-mix(in srgb, #14a3b8 12%, transparent); }
@media (prefers-reduced-motion: reduce) { .fast-live::before, .fast-ring .hg, .fast-ring .hg-stream, .fast-ring .hg-shine { animation: none; } .fast-ring .hg-grain { display: none; } }
html[data-a11y~="motion"] .fast-live::before, html[data-a11y~="motion"] .fast-ring .hg, html[data-a11y~="motion"] .fast-ring .hg-stream, html[data-a11y~="motion"] .fast-ring .hg-shine { animation: none; }
html[data-a11y~="motion"] .fast-ring .hg-grain { display: none; }
/* Eight bars in even rows: four across when the card is wide, two when it is narrow */
.nutrient-bars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.dash-card:has(> .nutrient-bars) { container-type: inline-size; }
@container (min-width: 600px) { .nutrient-bars { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nbar-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 14px; }
.nbar-top b { font-size: 15px; }
.nbar-top small { font-weight: 400; color: var(--muted); font-size: 12px; }
.nbar-track { height: 7px; margin-top: 5px; border-radius: 999px; background: var(--track); overflow: hidden; }
.nbar-track div { height: 100%; border-radius: 999px; background: var(--good); }
.nbar.low .nbar-track div { background: #8fd3b8; }
.nbar.warn .nbar-track div { background: #f0a020; }
.nbar.bad .nbar-track div { background: var(--warn); }
.spark { width: 100%; height: 40px; }
.delta { font-size: 13px; font-weight: 700; }
.delta.down { color: var(--good); }
.delta.up { color: #e07a00; }

/* ---------- meals of the day, on a timeline ---------- */
.meals { position: relative; gap: 12px; }
.tl-item { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 10px; }
.tl-item::before { content: ""; position: absolute; top: 46px; bottom: -14px; right: 25px; width: 2px; background: linear-gradient(var(--meal), color-mix(in srgb, var(--meal) 10%, transparent)); opacity: .45; }
.tl-item:last-child::before { display: none; }
.tl-rail { display: flex; justify-content: center; padding-top: 8px; }
.tl-card { min-width: 0; padding: 14px 16px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.tl-item.empty .tl-card { padding: 10px 16px; background: color-mix(in srgb, var(--surface) 70%, transparent); }
.tl-head { display: flex; align-items: center; gap: 10px; }
.tl-title { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.tl-title h3 { margin: 0; font-size: 17px; white-space: nowrap; }
.tl-kcal { color: var(--muted); font-size: 13px; white-space: nowrap; }
.tl-kcal b { color: var(--text); font-size: 15px; }
/* a meal still ahead today: its part of what is left of the day's goal (diary.js mealPlan), on two
   lines when it must */
.tl-kcal:has(.tl-left) { white-space: normal; }
.tl-kcal b.tl-left, .tl-why { white-space: nowrap; }
.tl-kcal b.tl-left { color: var(--accent); }
.tl-share { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--meal) 14%, transparent); color: var(--meal); font-weight: 700; }
.tl-add {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: color-mix(in srgb, var(--meal) 14%, transparent); color: var(--meal); transition: transform .15s, background .15s;
}
.tl-add:hover { transform: scale(1.06); background: var(--meal); color: #fff; }
.tl-progress { height: 6px; margin-top: 10px; border-radius: 999px; background: var(--track); overflow: hidden; }
.tl-progress div { height: 100%; border-radius: 999px; background: var(--meal); }
.tl-split { display: flex; gap: 2px; height: 4px; margin-top: 4px; border-radius: 999px; overflow: hidden; }
.tl-split span { background: var(--c); }
.tl-entries { display: grid; margin-top: 8px; }
/* A food dragged to the right uncovers a red "מחיקה" on its left (diary.js wireEntrySwipes) */
.tl-swipe { position: relative; overflow: hidden; touch-action: pan-y; border-top: 1px solid var(--border); }
.tl-swipe .tl-entry { position: relative; z-index: 1; border-top: 0; background: var(--surface); transition: transform .28s cubic-bezier(.22, 1, .36, 1); }
.tl-swipe.dragging .tl-entry { transition: none; }
.tl-del {
  position: absolute; inset: 1px 0 0 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 0 18px;
  border: 0; border-radius: 14px; background: linear-gradient(90deg, #ff6b6b, #e5484d); color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}
.tl-del span { font-size: 14px; }
.tl-del svg { transition: transform .2s; }
.tl-swipe.armed .tl-del svg { transform: scale(1.25); }
.tl-swipe.removing { animation: tl-remove .3s ease-in .18s forwards; }
@keyframes tl-remove { to { height: 0; opacity: 0; } }
.tl-entry { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 10px; border: 0; border-top: 1px solid var(--border); border-radius: 12px; background: transparent; color: inherit; text-align: start; cursor: pointer; }
button.tl-entry:hover { background: var(--row-alt); border-radius: 12px; }
.tl-dot { flex: none; width: 46px; height: 46px; border-radius: 12px; background: color-mix(in srgb, var(--meal) 12%, transparent); position: relative; }
.tl-dot::after { content: ""; position: absolute; inset: 18px; border-radius: 50%; background: var(--meal); }
/* An activity: its drawing instead of the dot, and a title that wraps between words, evenly */
.tl-dot-ico { display: grid; place-items: center; color: var(--meal); }
.tl-dot-ico::after { display: none; }
.tl-act { gap: 10px; }
.tl-act .entry-text b { text-wrap: balance; line-height: 1.25; }
.tl-act .entry-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-act .tl-entry-kcal { margin-inline-start: 4px; }
/* the number centred over its word */
.tl-entry-kcal { flex: none; display: flex; flex-direction: column; align-items: center; text-align: center; margin-inline-start: 10px; min-width: 52px; line-height: 1.1; }
.tl-entry-kcal b { font-size: 17px; }
.tl-entry-kcal small { color: var(--muted); font-size: 11px; }
.tl-note { width: 100%; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text); resize: vertical; font-size: 16px; }

@media (max-width: 760px) {
  .dash-main { flex-direction: column; gap: 16px; }
  .gauge { width: 220px; height: 220px; }
  .gauge-center b { font-size: 40px; }
  .dash-macros { gap: 10px; }
  .dash-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .dash-card.wide { grid-column: span 2; }
  .dash-card { padding: 14px; border-radius: 18px; }
  .tile-body { flex-direction: column; align-items: flex-start; gap: 8px; }
  .tile-num b { font-size: 22px; }
  .quality-tile { grid-column: span 2; }
  .quality-tile .tile-body { flex-direction: row; }
  .tl-item { grid-template-columns: 44px 1fr; gap: 8px; }
  .tl-item::before { right: 21px; }
  .day-title { font-size: 21px; }
}
#q:placeholder-shown { direction: rtl; }
@media (max-width: 760px) {
  .macro-line .ml-top { flex-direction: column; align-items: flex-start; gap: 0; }
  .macro-line b { font-size: 15px; }
}
@media (max-width: 760px) { .dash-grid { grid-auto-flow: dense; } }
.tile-btn { white-space: nowrap; }

/* ---------- dashboard hero: drifting aurora and floating food drawings ---------- */
.dash-hero { position: relative; overflow: hidden; isolation: isolate; }
.dash-hero > :not(.aurora) { position: relative; z-index: 1; }
/* behind everything on the hero: the cards, the rings and the panels stay in front of the drawings */
.aurora { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.aurora .blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .22; will-change: transform; }
/* the drawings' own layer, with a round hole where the hero's ring stands (diary.js ringHole) */
.aurora .doodles { position: absolute; inset: 0;
  -webkit-mask-image: radial-gradient(circle at var(--hx, 50%) var(--hy, 50%), transparent 0 var(--hr, -40px), #000 calc(var(--hr, -40px) + 34px));
  mask-image: radial-gradient(circle at var(--hx, 50%) var(--hy, 50%), transparent 0 var(--hr, -40px), #000 calc(var(--hr, -40px) + 34px)); }
.aurora .b3 { display: none; }
.aurora .b1 { width: 60%; aspect-ratio: 1; top: -25%; right: -10%; background: radial-gradient(circle, color-mix(in srgb, var(--glow) 75%, transparent), transparent 68%); animation: drift1 24s ease-in-out infinite; }
.aurora .b2 { width: 55%; aspect-ratio: 1; bottom: -30%; left: -12%; background: radial-gradient(circle, color-mix(in srgb, var(--glow) 50%, transparent), transparent 68%); animation: drift2 28s ease-in-out infinite; }
.aurora .b3 { width: 45%; aspect-ratio: 1; top: 30%; left: 30%; background: radial-gradient(circle, rgba(110, 215, 200, .4), rgba(110, 215, 200, 0) 68%); animation: drift3 32s ease-in-out infinite; }
@keyframes drift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-14%, 10%) scale(1.08); } 66% { transform: translate(6%, 18%) scale(.95); } }
@keyframes drift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 40% { transform: translate(16%, -12%) scale(1.1); } 70% { transform: translate(-6%, -20%) scale(.92); } }
@keyframes drift3 { 0%, 100% { transform: translate(0, 0) scale(.9); } 50% { transform: translate(-20%, -10%) scale(1.12); } }
.aurora .doodle { position: absolute; color: #fff; opacity: .13; animation: float 14s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-12px) rotate(6deg); } }

/* ---------- the week on a glass card ---------- */
.week-card {
  margin: 14px 0 8px; padding: 12px 12px 10px; border-radius: 24px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .06));
  border: 1px solid rgba(255, 255, 255, .24);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 30px rgba(5, 45, 35, .18);
}
.week-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 4px 8px; font-size: 13px; }
.week-month { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; }
.week-logged { opacity: .8; }
.week-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
/* the week's card a strip of weeks under the finger (diary.js wireWeekSwipe): up and down stays the
   page's scroll; the weeks beside this one stand off the card, seen only while the strip moves */
.week-card { touch-action: pan-y; }
.week-track { position: relative; }
.week-pane { position: absolute; top: 0; left: 0; width: 100%; visibility: hidden; pointer-events: none; }
.week-card.wk-moving { overflow: hidden; }
.week-card.wk-moving .week-pane { visibility: visible; }
.week-card.wk-moving .week-track { will-change: transform; }
/* (their glasses stand full: the page drawn under the card keeps them so, app.js redraw; come while in
   sight, they fill in softly) */
.week-pane .wcap-fill { animation: none; }
.week-pane.came .wcap-in { animation: wk-came .3s ease both; }
@keyframes wk-came { from { opacity: 0; } }
.wcap {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0 4px; border-radius: 18px;
  color: rgba(255, 255, 255, .85); text-decoration: none; transition: transform .25s ease, background .25s;
}
.wcap:hover { transform: translateY(-3px); }
.wcap-day { font-size: 12px; font-weight: 500; }
.wcap-glass {
  position: relative; width: 42px; height: 62px; border-radius: 16px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .10); border: 1.5px solid rgba(255, 255, 255, .28);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .10);
}
/* the liquid is held inside the glass, a day over its goal too (it brimmed over the rim, and looked
   spilled out of the capsule: its colour says it) */
.wcap-in { position: absolute; inset: 0; overflow: hidden; border-radius: 14.5px; }
.wcap.none .wcap-glass { border-style: dashed; border-color: rgba(255, 255, 255, .30); background: rgba(255, 255, 255, .05); }
.wcap-fill {
  position: absolute; right: 0; left: 0; bottom: 0; height: var(--h);
  background: linear-gradient(180deg, color-mix(in srgb, var(--glow) 95%, transparent), color-mix(in srgb, var(--glow) 45%, var(--accent)));
  animation: wcap-rise 1.5s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i) * 90ms);
}
/* (the liquid rises from below the glass's edge, a move the screen makes on its own: grown by its
   height, the page was laid out again in every frame for a second and a half) */
@keyframes wcap-rise { from { transform: translateY(100%); } }
.wcap.over .wcap-fill { background: linear-gradient(180deg, rgba(255, 190, 182, .95), rgba(236, 100, 92, .9)); }
/* two waves on the surface, sliding against each other at different speeds */
.wcap-wave { position: absolute; left: 0; width: 200%; height: 11px; top: -9px; }
.wcap-wave.front { fill: color-mix(in srgb, var(--glow) 95%, transparent); animation: wcap-wave 2.4s linear infinite; }
.wcap-wave.back { top: -11px; fill: rgba(255, 255, 255, .35); animation: wcap-wave 3.8s linear infinite reverse; }
.wcap.over .wcap-wave.front { fill: rgba(255, 190, 182, .95); }
@keyframes wcap-wave { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* bubbles rising through the liquid: each a column as tall as the liquid with its bubble at its foot,
   the column moved up whole and the bubble growing on it, both moves the screen makes on its own
   (rising by "bottom", the whole page was laid out and painted again in every frame while the diary
   was open, most of the phone's time for the page, and moving to another tab waited for it) */
.wcap-fill .bubble {
  position: absolute; bottom: 0; width: 4px; height: 100%; opacity: 0;
  animation: wcap-bubble 3.4s ease-in infinite; animation-delay: calc(var(--i) * .45s + 1.2s);
}
.wcap-fill .bubble::before {
  content: ""; position: absolute; bottom: 0; left: 0; width: 100%; aspect-ratio: 1; border-radius: 50%;
  background: rgba(255, 255, 255, .85); box-shadow: 0 0 3px rgba(255, 255, 255, .6);
  animation: inherit; animation-name: wcap-bubble-grow;
}
.wcap-fill .bubble:nth-of-type(1) { left: 28%; }
.wcap-fill .bubble:nth-of-type(2) { left: 62%; width: 3px; animation-duration: 2.8s; animation-delay: calc(var(--i) * .45s + 2.3s); }
.wcap-fill .bubble:nth-of-type(3) { left: 45%; width: 2.5px; animation-duration: 4.2s; animation-delay: calc(var(--i) * .45s + 3.1s); }
@keyframes wcap-bubble {
  0% { opacity: 0; transform: translateY(0); }
  15% { opacity: .9; }
  85% { opacity: .7; }
  100% { opacity: 0; transform: translateY(calc(-100% + 4px)); }
}
@keyframes wcap-bubble-grow {
  0% { transform: translateX(0) scale(.6); }
  50% { transform: translateX(2px) scale(.9); }
  100% { transform: translateX(-1px) scale(1); }
}
/* a glassy highlight down one side */
.wcap-glass::after {
  content: ""; position: absolute; top: 7px; bottom: 9px; left: 5px; width: 4px; border-radius: 4px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .04));
}
.wcap.on .wcap-fill { box-shadow: 0 0 16px color-mix(in srgb, var(--glow) 45%, transparent); }
.wcap-glass b { position: relative; font-size: 17px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.wcap-dot { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.wcap.today .wcap-dot { background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, .9); }
.wcap.on { background: rgba(255, 255, 255, .16); color: #fff; }
.wcap.on .wcap-glass { border-color: #fff; border-style: solid; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25), 0 8px 18px rgba(5, 45, 35, .3); transform: scale(1.06); }
/* the lit day moves at the tap: its glass and its pill ease over */
.wcap-glass { transition: transform .28s cubic-bezier(.34, 1.4, .64, 1), box-shadow .28s, border-color .28s; }
.wcap.on .wcap-day { font-weight: 700; }
.wcap.future { opacity: .38; pointer-events: none; }
.wcap.future .wcap-glass { border-style: dotted; }
.week-rings { display: none; }

@media (max-width: 640px) {
  .week-card { padding: 10px 6px 8px; border-radius: 20px; }
  .week-days { gap: 2px; }
  .wcap-glass { width: 36px; height: 54px; border-radius: 14px; }
  .wcap-in { border-radius: 12.5px; }
  .wcap-glass b { font-size: 15px; }
  .aurora .doodle { opacity: .1; }
}
@media (prefers-reduced-motion: reduce) {
  .aurora .blob, .aurora .doodle, .wcap-wave, .wcap-fill, .wcap-fill .bubble, .wcap-fill .bubble::before { animation: none !important; }
  .wcap:hover { transform: none; }
}

/* Headings always wrap, never cut */
h1, h2, h3, h4 { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }

/* ---------- calories per day chart ---------- */
/* (a good day green, a bad one red, the colours of a day's result in every bar chart) */
.kchart { --ok: #4f9a42; --ok2: #86c26f; --over: #b23f33; --over2: #d9705f; }
.kchart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: -4px 0 14px; font-size: 13px; color: var(--muted); }
.kchart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.kchart-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; }
.kchart-legend i.ok { background: linear-gradient(180deg, var(--ok2), var(--ok)); }
.kchart-legend i.over { background: linear-gradient(180deg, var(--over2), var(--over)); }
.kchart-legend i.line { width: 18px; height: 0; border-top: 2px dashed var(--muted); border-radius: 0; }
.kchart-avg { margin-inline-start: auto; padding: 3px 10px; border-radius: 999px; background: var(--row-alt); color: var(--text); }
.kchart-plot { position: relative; height: 230px; margin-inline-end: 52px; } /* room for the values on the left */
.kchart-grid span { position: absolute; right: 0; left: -52px; height: 0; border-top: 1px solid var(--border); }
.kchart-grid em { position: absolute; left: 0; top: -9px; width: 46px; font-style: normal; font-size: 11px; color: var(--muted); text-align: left; font-variant-numeric: tabular-nums; }
.kchart-target { position: absolute; right: 0; left: 0; height: 0; border-top: 2px dashed color-mix(in srgb, var(--text) 45%, transparent); z-index: 2; pointer-events: none; }
.kchart-avgline { position: absolute; right: 0; left: 0; height: 0; border-top: 1.5px dotted var(--good); opacity: .8; z-index: 2; pointer-events: none; }
.kchart-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 6px; z-index: 3; }
.kchart.many .kchart-bars { gap: 3px; }
.kbar { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: pointer; outline: none; border-radius: 12px; }
.kbar::before { content: ""; position: absolute; inset: -6px 2px 0; border-radius: 12px; background: transparent; transition: background .2s; }
.kbar:hover::before, .kbar:focus-visible::before { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.kbar-fill {
  position: relative; width: min(72%, 46px); height: var(--h); min-height: 0; border-radius: 12px 12px 5px 5px;
  background: linear-gradient(180deg, var(--ok2), var(--ok)); box-shadow: 0 6px 14px color-mix(in srgb, var(--ok) 30%, transparent);
  transform-origin: bottom; animation: bar-grow .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 40ms);
  transition: filter .2s, transform .2s, opacity .2s;
}
.kbar.over .kbar-fill { background: linear-gradient(180deg, var(--over2), var(--over)); box-shadow: 0 6px 14px color-mix(in srgb, var(--over) 30%, transparent); }
.kbar.empty .kbar-fill { height: 4px; background: var(--track); box-shadow: none; }
@keyframes bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.kchart-bars:hover .kbar:not(:hover) .kbar-fill { opacity: .5; }
.kbar:hover .kbar-fill, .kbar:focus-visible .kbar-fill { filter: brightness(1.08) saturate(1.1); }
.kbar:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.kbar-tip {
  position: absolute; bottom: calc(var(--h) + 12px); left: 50%; transform: translate(-50%, 6px); z-index: 10;
  min-width: 170px; padding: 10px 12px; border-radius: 14px; background: #172033; color: #fff; text-align: right;
  display: flex; flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.35; white-space: nowrap;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .3); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
}
.kbar-tip::after { content: ""; position: absolute; bottom: -6px; left: 50%; width: 12px; height: 12px; background: #172033; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.kbar.edge-start .kbar-tip { left: auto; right: 0; transform: translate(0, 6px); }
.kbar.edge-start .kbar-tip::after { left: auto; right: 18px; transform: rotate(45deg); }
.kbar.edge-end .kbar-tip { left: 0; transform: translate(0, 6px); }
.kbar.edge-end .kbar-tip::after { left: 18px; transform: rotate(45deg); }
.kbar:hover .kbar-tip, .kbar:focus .kbar-tip { opacity: 1; transform: translate(-50%, 0); }
.kbar.edge-start:hover .kbar-tip, .kbar.edge-start:focus .kbar-tip, .kbar.edge-end:hover .kbar-tip, .kbar.edge-end:focus .kbar-tip { transform: translate(0, 0); }
.kbar-tip b { font-size: 13px; }
.tip-kcal { font-size: 22px; font-weight: 700; }
.tip-kcal small { font-size: 12px; font-weight: 400; opacity: .75; }
.tip-pct { font-size: 12px; color: var(--glow); }
.tip-pct.over { color: #ffb3a9; }
.tip-macros { display: flex; align-items: center; gap: 4px; font-size: 12px; opacity: .9; }
.tip-macros i { display: inline-block; width: 8px; height: 8px; border-radius: 3px; background: var(--c); margin-inline-start: 4px; }
.kbar-tip .muted { color: rgba(255, 255, 255, .7); }
.kchart-x { display: flex; gap: 6px; margin-inline-end: 52px; margin-top: 8px; }
.kchart.many .kchart-x { gap: 3px; }
.kchart-x span { flex: 1; display: flex; flex-direction: column; align-items: center; font-size: 13px; color: var(--muted); font-weight: 500; }
.kchart-x small { font-size: 11px; opacity: .8; }
.kchart-x span.full { min-width: 0; font-size: 12px; white-space: nowrap; }
.kchart.many .kchart-x span { font-size: 11px; }
/* a year by weeks: thin bars close together, quicker in, the dates free to run past their slot */
.kchart.dense .kchart-bars, .kchart.dense .kchart-x { gap: 1px; }
.kchart.dense .kbar-fill { width: 82%; border-radius: 3px 3px 1px 1px; animation-delay: calc(var(--i) * 12ms); }
.kchart.dense .kchart-x span { min-width: 0; white-space: nowrap; }
@media (max-width: 640px) {
  .kchart-plot { height: 200px; margin-inline-end: 40px; }
  .kchart-grid span { left: -40px; }
  .kchart-grid em { width: 36px; font-size: 10px; }
  .kchart-x { margin-inline-end: 40px; }
  .kchart-bars, .kchart-x { gap: 3px; }
  .kbar-tip { min-width: 150px; }
}
@media (prefers-reduced-motion: reduce) { .kbar-fill { animation: none; } }

/* add sheet: the meals of the day on one row */
.sheet-label { margin: 0 2px 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.sheet-label:not(:first-child) { margin-top: 18px; }
.meal-row { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; }
.meal-chip { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 2px 10px; border: 1.5px solid transparent; border-radius: 18px; background: color-mix(in srgb, var(--meal) 9%, var(--surface)); cursor: pointer; transition: transform .15s, border-color .15s; }
.meal-chip:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--meal) 45%, transparent); }
.meal-chip span:not(.badge-icon) { font-weight: 700; font-size: 14px; white-space: nowrap; }
.meal-chip.now { border-color: var(--meal); }
.meal-chip small { position: absolute; top: -8px; padding: 0 8px; border-radius: 999px; background: var(--meal); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; }
.quick span:not(.badge-icon) { white-space: nowrap; }
@media (max-width: 400px) { .meal-row { gap: 5px; } .meal-chip .badge-icon { width: 38px !important; height: 38px !important; } .meal-chip span:not(.badge-icon) { font-size: 13px; } }

/* ---------- choice chips (instead of native selects) ---------- */
.choice-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.choice {
  --chip: var(--accent);
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 7px 14px; border-radius: 14px;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; text-align: start;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.choice span { display: flex; flex-direction: column; line-height: 1.2; }
.choice b { font-weight: 700; font-size: 15px; white-space: nowrap; }
.choice small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.choice .icon { color: var(--chip); }
.choice:hover { border-color: color-mix(in srgb, var(--chip) 55%, var(--border)); transform: translateY(-1px); }
.choice.on {
  border-color: var(--chip); background: color-mix(in srgb, var(--chip) 12%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chip) 16%, transparent);
}
.choice.on b { color: var(--chip); }
.choice:focus-visible { outline: 2px solid var(--chip); outline-offset: 2px; }
.choice-chips.compact { flex-wrap: nowrap; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.choice-chips.compact .choice { flex-direction: column; justify-content: center; gap: 4px; min-height: 64px; padding: 8px 4px; }
.choice-chips.compact .choice span { align-items: center; }
.choice-chips.compact .choice b { font-size: 14px; }
.portion .portion-field { flex: 1 1 100%; color: var(--muted); }
.portion .portion-field .choice-chips { margin-top: 2px; }
.field > span { color: var(--muted); }

/* the remaining native selects get the same look */
select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  padding-inline-start: 14px !important; padding-inline-end: 40px !important;
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2366708a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 14px center; border-radius: 12px;
}
select:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
option { background: var(--surface); color: var(--text); }

/* ---------- allergens with drawings ---------- */
.allergens { display: flex; flex-wrap: wrap; gap: 10px; }
.allergen { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--row-alt); border: 1px solid var(--border); }
.allergen-art { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--al); box-shadow: 0 4px 10px color-mix(in srgb, var(--al) 35%, transparent); }
.allergen b { font-size: 15px; }
.allergen.mine { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
.allergen small { font-size: 11px; font-weight: 700; color: var(--warn); }
.allergen-none { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; background: color-mix(in srgb, var(--good) 11%, var(--surface)); color: var(--good); font-weight: 700; }
.allergen-none span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--good); color: #fff; }

/* sensitivities on every item */
.sens-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.sens { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; border-radius: 16px; border: 1.5px solid var(--border); background: var(--surface); }
.sens .allergen-art { width: 40px; height: 40px; flex: none; }
.sens.free .allergen-art { filter: saturate(.35); opacity: .65; box-shadow: none; }
.sens-text { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.sens-text b { font-size: 15px; }
.sens-text small { font-size: 12px; color: var(--muted); }
.sens-mark { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
.sens.free .sens-mark { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good); }
.sens.has { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); background: color-mix(in srgb, var(--warn) 7%, var(--surface)); }
.sens.has .sens-text small { color: var(--warn); font-weight: 700; }
.sens.has .sens-mark { background: var(--warn); color: #fff; }
.sens.mine { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.sens.mine.has { box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 25%, transparent); }
@media (max-width: 640px) { .sens-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .sens { padding: 8px; gap: 8px; } .sens .allergen-art { width: 34px; height: 34px; } .sens-text b { font-size: 14px; } }

/* ---------- header clock ---------- */
.top-row { display: grid; grid-template-columns: 1fr auto 1fr; }
.top-actions { justify-self: end; grid-column: 3; } /* stays at the end when the clock is hidden */
.top-row > .logo { grid-column: 1; }
.top-clock { grid-column: 2; }
.top-clock { justify-self: center; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.clock-time { display: inline-flex; align-items: baseline; font-weight: 700; font-size: 19px; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
/* (the colon stays: drawn anew every second, it never reached the blink's dim half, and its endless
   animation had the page drawn again in every frame, on every page) */
.clock-time i { font-style: normal; }
.clock-time small { font-size: 13px; font-weight: 500; opacity: .8; }
.clock-time em { font-style: normal; font-size: 11px; font-weight: 700; margin-inline-start: 6px; opacity: .85; }
@keyframes blink { 50% { opacity: .35; } }
@media (max-width: 400px) { .top-clock { padding: 0 10px; } .clock-time { font-size: 16px; } }

/* ---------- calendar ---------- */
.day-title { border: 0; background: transparent; color: inherit; font: inherit; font-size: 24px; font-weight: 700; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.day-title:hover .chev { opacity: 1; }
.cal { width: 100%; }
.cal-pop {
  position: absolute; z-index: 45; width: 330px; padding: 14px; border-radius: 20px; background: var(--surface); color: var(--text);
  box-shadow: 0 18px 50px rgba(10, 20, 60, .3); border: 1px solid var(--border); animation: pop-in .16s ease-out;
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-head b { font-size: 17px; }
.cal-nav { width: 36px; height: 36px; border-radius: 12px; border: 0; display: grid; place-items: center; background: var(--row-alt); color: var(--text); cursor: pointer; }
.cal-nav:hover { background: color-mix(in srgb, var(--accent) 14%, var(--row-alt)); color: var(--accent); }
.cal-nav.ghost { visibility: hidden; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal-wd { font-size: 12px; font-weight: 700; color: var(--muted); padding: 4px 0; }
.cal-cell { position: relative; height: 40px; border: 0; border-radius: 12px; background: transparent; color: var(--text); font: inherit; font-size: 15px; font-weight: 500; display: grid; place-items: center; }
button.cal-cell { cursor: pointer; }
button.cal-cell:hover { background: var(--row-alt); }
.cal-cell.ok::after, .cal-cell.over::after { content: ""; position: absolute; bottom: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--good); }
.cal-cell.over::after { background: var(--warn); }
.cal-cell.today { color: var(--accent); font-weight: 700; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 50%, transparent); }
.cal-cell.sel { background: var(--accent); color: #fff; box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 40%, transparent); }
.cal-cell.sel::after { background: #fff; }
.cal-cell.future, .cal-cell.empty { color: var(--muted); opacity: .45; }
.cal-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.cal-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.cal-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--good); display: inline-block; }
.cal-legend i.over { background: var(--warn); margin-inline-start: 8px; }
.cal-today { border: 0; padding: 7px 14px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-weight: 700; cursor: pointer; }

/* ---------- diet quality tile ---------- */
.quality-tile .tile-body { position: relative; }
.quality-art-wrap { margin-inline-start: auto; flex: none; }
.quality-empty { gap: 16px; }
.quality-empty div { display: flex; flex-direction: column; gap: 4px; }
.quality-empty b { font-size: 16px; }
.quality-empty span { color: var(--muted); font-size: 13px; }
.quality-art .sparkle { animation: twinkle 3s ease-in-out infinite; transform-origin: center; }
@keyframes twinkle { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@media (max-width: 760px) { .quality-art-wrap { display: none; } .quality-empty { flex-direction: row !important; align-items: center !important; } }

/* produce drifting behind the dashboard: bigger, slower, softer */
.aurora .doodle { opacity: .065; transform-origin: center; animation: produce-drift var(--dur, 22s) ease-in-out infinite; }
@keyframes produce-drift { 0%, 100% { transform: translate(0, 0) rotate(calc(var(--tilt) * -8deg)); } 25% { transform: translate(calc(var(--tilt) * 10px), -14px) rotate(calc(var(--tilt) * 4deg)); } 50% { transform: translate(calc(var(--tilt) * -6px), -24px) rotate(calc(var(--tilt) * 9deg)); } 75% { transform: translate(calc(var(--tilt) * -12px), -10px) rotate(0deg); } }
@media (max-width: 640px) { .aurora .doodle { opacity: .06; scale: .9; } }

/* the drawings stay behind: every block of content sits on frosted glass that blurs them away */
.week-card { -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); }
.gauge::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); background: radial-gradient(circle, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02) 70%); z-index: -1; }
.gauge { isolation: isolate; }
.dash-macros { padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.dash-top { padding: 4px 6px; border-radius: 16px; }
.dash-title, .day-arrows { position: relative; }
.quality-tile header { align-items: center; }
.quality-tile header .quality-art-wrap { margin: -8px 0 -24px; display: block !important; }
.quality-tile .quality-tips { flex: 1; }
/* the score's breakdown (diary.js qualityParts): beside the water on a wide screen only (on a phone the tile
   stands alone), filling the tile's height, and the way to the day's two halves; laid out by the tile's own
   width: two to a row, three on a wider one, and the widest has the score on one side and the breakdown on
   the other (the way to the halves under the score), only when both halves have room (from 900: at 690,
   the side menu closed, the score stood alone in a tall empty column). The last row always ends even. */
.quality-tile { container-type: inline-size; }
.q-in { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.quality-tile :is(.qp-head, .quality-parts, .qp-more) { display: none; }
@media (min-width: 761px) {
  .quality-tile .qp-head { display: block; margin: 2px 0 -2px; font-size: 13px; font-weight: 700; color: var(--muted); }
  .quality-tile .quality-parts { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(60px, 180px); align-content: start; gap: 8px; margin: 0; padding: 0; list-style: none; }
  /* (two to a row: the tile of the next step only on an even place, so the rows end even) */
  .quality-parts > .qp-next:nth-child(odd) { display: none; }
  .quality-tile .qp-more { display: inline-flex; align-self: stretch; }
}
@container (min-width: 520px) {
  .quality-tile .quality-parts { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .quality-parts > .qp { grid-column: span 2; }
  /* (three to a row: the next step's tile only where it closes a row; a part left alone spans the row) */
  /* (three to a row: the next step's tile takes what is left of the last row, a whole row when the parts filled theirs) */
  .quality-parts > .qp-next { display: flex; }
  .quality-parts > .qp-next:nth-child(3n+1) { grid-column: 1 / -1; }
  .quality-parts > .qp-next:nth-child(3n+2) { grid-column: span 4; }
}
@container (min-width: 900px) {
  .q-in:has(.quality-parts) { display: grid; grid-template-columns: minmax(250px, 4fr) minmax(0, 7fr); grid-template-rows: auto auto 1fr auto; column-gap: 20px; row-gap: 10px; }
  .q-in:has(.quality-parts) > header { grid-column: 1 / -1; }
  .q-in:has(.quality-parts) > .tile-body { grid-column: 1; grid-row: 2 / span 2; align-self: center; }
  .q-in:has(.quality-parts) > .qp-head { grid-column: 2; grid-row: 2; margin: 0; }
  .q-in:has(.quality-parts) > .quality-parts { grid-column: 2; grid-row: 3 / span 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .q-in:has(.quality-parts) > .quality-parts > .qp { grid-column: auto; }
  .q-in:has(.quality-parts) > .quality-parts > .qp-next { display: flex; }
  .q-in:has(.quality-parts) > .quality-parts > .qp-next:nth-child(odd) { display: none; }
  .q-in:has(.quality-parts) > .qp-more { grid-column: 1; grid-row: 4; align-self: end; }
}
.qp { --qp: var(--good); --qc: #64748b; position: relative; display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; padding: 12px 14px; padding-inline-end: 62px; border-radius: 16px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--qc) 12%, var(--row-alt)), var(--row-alt)); border: 1px solid color-mix(in srgb, var(--qc) 22%, var(--border)); }
/* (its sign in a circle of its colour, at the tile's end) */
.qp-ico { position: absolute; top: 12px; inset-inline-end: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  color: var(--qc); background: color-mix(in srgb, var(--qc) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qc) 30%, transparent); }
.qp-short { --qp: #e0a100; }
.qp-next { --qc: #f59e0b; --qp: #f59e0b; }
.qp-next.qp-all { --qc: #22c55e; --qp: #22c55e; }
.qp-next .qp-val { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.4; }
.qp-over { --qp: #e5484d; }
.qp-top { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 1px; }
.qp-top b { font-size: 14.5px; }
.qp-top small { font-size: 13px; font-weight: 800; white-space: nowrap; color: color-mix(in srgb, var(--qp) 85%, var(--text)); }
.qp-val { font-size: 12.5px; color: var(--muted); }
.qp-val b { font-size: 18px; font-weight: 800; color: var(--text); }
.qp-bar { height: 8px; margin-inline-end: -48px; border-radius: 999px; background: var(--track); overflow: hidden; }
.qp-bar i { display: block; height: 100%; border-radius: inherit; background: var(--qp); }

/* ---------- profile editors: a drawing that moves with the value ---------- */
.age-pill { display: inline-block; margin-inline-end: 6px; padding: 1px 10px; border-radius: 999px; font-size: 14px; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.pe { gap: 16px; }
.pe-stage {
  position: relative; display: grid; place-items: center; min-height: 140px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 15%, var(--stage-glow) 0%, var(--stage) 72%);
}
.pe-stage > svg { display: block; width: 100%; max-width: 380px; height: auto; max-height: 230px; direction: ltr; }
.pe-stage > svg.pe-goal-art, .pe-stage > svg.pe-sprout-art { max-width: none; }
.pe-hint { margin: -6px 0 0; text-align: center; font-size: 14px; color: var(--muted); }
.pe-hint b { color: var(--text); }
.pe-shake { animation: pe-shake .4s; }
@keyframes pe-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes pe-pop { from { transform: scale(.6); opacity: .3; } }
@keyframes pe-twinkle { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes pe-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes pe-spin { to { transform: rotate(360deg); } }

/* number with − and + */
.pe-stepper { display: flex; align-items: center; justify-content: center; gap: 14px; }
.pe-step {
  width: 52px; height: 52px; flex: none; border: 0; border-radius: 16px; cursor: pointer; touch-action: manipulation; user-select: none;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); font: inherit; font-size: 28px; font-weight: 700;
  transition: transform .12s, background .2s;
}
.pe-step:hover { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); }
.pe-step:active { transform: scale(.9); }
.pe-num { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 16px; border-radius: 18px; border: 1.5px solid var(--border); background: var(--surface); }
.pe-num:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.pe-num input, .pe-mini input {
  border: 0; padding: 0; background: transparent; color: var(--text); font: inherit; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums; outline: none; -moz-appearance: textfield; appearance: textfield;
}
.pe-num input { width: 5ch; font-size: 34px; }
.pe-num input::-webkit-inner-spin-button, .pe-num input::-webkit-outer-spin-button,
.pe-mini input::-webkit-inner-spin-button, .pe-mini input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pe-num span { color: var(--muted); font-weight: 500; }
.pe-range {
  --fill: 50%; -webkit-appearance: none; appearance: none; width: 100%; height: 8px; margin: -2px 0; border-radius: 999px; outline: none; cursor: pointer;
  background: linear-gradient(to left, var(--accent) var(--fill), var(--track) var(--fill));
}
.pe-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.pe-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.pe-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent); }

/* big readout: age, days */
.pe-readout { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 10px; text-align: center; }
.pe-readout b { font-size: 46px; line-height: 1; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.pe-readout b.pop { animation: pe-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
.pe-readout span { font-size: 20px; font-weight: 700; }
.pe-readout small { flex-basis: 100%; margin-top: 4px; font-size: 14px; color: var(--muted); }
.pe-readout.small b { font-size: 22px; }

/* day, month, year */
.pe-date { display: grid; grid-template-columns: .8fr 1.4fr 1fr; gap: 10px; }
.pe-date select { font-size: 17px; font-weight: 700; padding-top: 12px; padding-bottom: 12px; }

/* option cards */
.pe-cards { display: grid; gap: 8px; }
.pe-card, .pe-rate, .pe-al { position: relative; cursor: pointer; border: 1.5px solid var(--border); background: var(--surface); transition: border-color .2s, background .2s, transform .2s; }
.pe-card input, .pe-rate input, .pe-al input { position: absolute; opacity: 0; pointer-events: none; }
.pe-card { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; }
/* how the app speaks to the person (profile-edit.js address): the choices, and an example of the words */
.pe-card > .pe-addr-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-size: 22px; background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
.pe-addr-stage { display: grid; place-items: center; min-height: 92px; padding: 6px 4px; }
.pe-addr-say { position: relative; display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 18px 18px 18px 6px; font-size: 15px; line-height: 1.5;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); }
.pe-addr-say > span { flex: none; font-size: 20px; line-height: 1.2; }
.pe-card > span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pe-card small { font-size: 13px; color: var(--muted); }
.pe-card:has(input:checked), .pe-rate:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.pe-card:has(input:checked)::after {
  content: "✓"; flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; animation: pe-pop .35s cubic-bezier(.34, 1.56, .64, 1);
}
.pe-card:has(input:focus-visible), .pe-rate:has(input:focus-visible), .pe-al:has(input:focus-visible), .sex-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pe-card:hover, .pe-rate:hover, .pe-al:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }

/* name tag */
.pe-nametag { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 24px 16px; }
.pe-avatar {
  position: relative; flex: none; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 75%, #fff), var(--brand)); color: #fff; font-size: 34px; font-weight: 700; box-shadow: 0 10px 22px rgba(14, 122, 87, .35);
}
.pe-hand { position: absolute; bottom: -10px; left: -16px; transform-origin: 70% 90%; animation: pe-wave 2.6s ease-in-out infinite; }
@keyframes pe-wave { 0%, 55%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-20deg); } 20%, 40% { transform: rotate(14deg); } }
.tag { width: min(220px, 56vw); border-radius: 16px; overflow: hidden; background: var(--surface); box-shadow: 0 12px 26px rgba(0, 0, 0, .14); animation: pe-tag 4.5s ease-in-out infinite; }
@keyframes pe-tag { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(-1deg) translateY(-4px); } }
.tag-head { padding: 6px 12px 8px; text-align: center; line-height: 1.15; color: #fff; background: linear-gradient(135deg, var(--accent), var(--brand)); }
.tag-head b { display: block; font-size: 20px; }
.tag-head span { font-size: 12px; opacity: .9; }
.tag-name { min-height: 66px; padding: 14px 12px 16px; text-align: center; font-size: 24px; font-weight: 700; overflow-wrap: anywhere; }
.tag-name .empty { color: var(--muted); font-weight: 500; }
.caret { display: inline-block; width: 2px; height: 1em; margin-inline-start: 3px; vertical-align: -3px; background: var(--accent); animation: blink 1s steps(1) infinite; }

/* sex: ♀, ♂ and ? in their colours; the chosen one springs, its tail moves and it glows */
.sex-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sex-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px 12px; cursor: pointer;
  border-radius: 22px; border: 2px solid var(--border); background: var(--surface); transition: border-color .2s, transform .2s, box-shadow .2s, background .2s;
}
.sex-card input { position: absolute; opacity: 0; pointer-events: none; }
.sex-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.sex-art { width: 100%; max-width: 116px; height: auto; overflow: visible; }
.sex-halo { fill: color-mix(in srgb, var(--sex) 10%, var(--surface)); transition: fill .3s; }
.sex-card b { font-size: 17px; color: var(--sex); }
.sex-check {
  position: absolute; top: 8px; left: 8px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sex); color: #fff; font-size: 13px; font-weight: 700; transform: scale(0); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.sex-card:has(input:checked) {
  border-color: var(--sex); background: color-mix(in srgb, var(--sex) 8%, var(--surface));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--sex) 28%, transparent);
}
.sex-card:has(input:checked) .sex-check { transform: scale(1); }
.sex-card:has(input:checked) .sex-halo { fill: color-mix(in srgb, var(--sex) 20%, var(--surface)); }
.sex-sym { transform-box: fill-box; transform-origin: center; transition: opacity .2s; }
.sex-pick:has(input:checked) .sex-card:not(:has(input:checked)) .sex-sym { opacity: .45; }
.sex-card:has(input:checked) .sex-sym { animation: pe-spring .7s cubic-bezier(.34, 1.56, .64, 1); filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--sex) 45%, transparent)); }
@keyframes pe-spring { 0% { transform: scale(.7) rotate(-12deg); } 60% { transform: scale(1.12) rotate(4deg); } 100% { transform: none; } }
.sym-tail { transform-box: fill-box; }
.sex-female:has(input:checked) .sym-tail { transform-origin: 50% 0; animation: pe-swing 1.8s .6s ease-in-out infinite; }
.sex-male:has(input:checked) .sym-tail { animation: pe-shoot 1.6s .6s ease-in-out infinite; }
.sex-other:has(input:checked) .sym-tail { transform-origin: 50% 100%; animation: pe-wobble 1.6s .6s ease-in-out infinite; }
@keyframes pe-swing { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(10deg); } 70% { transform: rotate(-10deg); } }
@keyframes pe-shoot { 0%, 100% { transform: translate(0, 0); } 45% { transform: translate(5px, -5px); } }
@keyframes pe-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
.sex-sparks { opacity: 0; }
.sex-sparks path { transform-box: fill-box; transform-origin: center; }
.sex-card:has(input:checked) .sex-sparks { opacity: 1; }
.sex-card:has(input:checked) .sex-sparks path { animation: pe-twinkle 1.6s ease-in-out infinite; }
.sex-card:has(input:checked) .sex-sparks path + path { animation-delay: -.8s; }

/* height: a person by a tape measure */
.pe-height-art .tape { fill: #f6c744; stroke: #d9a514; stroke-width: 1.5; }
.pe-height-art .ticks line { stroke: #6b4f0a; stroke-width: 1.5; }
.pe-height-art .ticks text { font-size: 11px; font-weight: 700; fill: var(--text); }
.pe-height-art .floor { stroke: var(--art-line); stroke-width: 2.5; stroke-linecap: round; opacity: .45; }
.pe-height-art .kid { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .55s cubic-bezier(.34, 1.56, .64, 1); }
.pe-height-art .h-mark { transition: transform .55s cubic-bezier(.34, 1.56, .64, 1); }
.pe-height-art .h-mark line { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 4; animation: pe-dash 1s linear infinite; }
.pe-height-art .h-mark circle { fill: var(--accent); }
.pe-height-art .plant { transform-box: fill-box; transform-origin: 50% 100%; animation: pe-sway 5s ease-in-out infinite; }
@keyframes pe-dash { to { stroke-dashoffset: -8; } }
@keyframes pe-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }

/* birthday cake */
.pe-cake-art .string { fill: none; stroke: var(--muted); stroke-width: 1.2; }
.pe-cake-art .balloon { animation: pe-bob 4s ease-in-out infinite; }
.pe-cake-art .balloon.b2 { animation-duration: 4.8s; animation-delay: -2s; }
.pe-cake-art .candle { transform-box: fill-box; transform-origin: 50% 100%; animation: pe-rise .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.pe-cake-art .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: pe-flicker .45s ease-in-out infinite alternate; }
.pe-cake-art .glow { transform-box: fill-box; transform-origin: center; animation: pe-glow 1.1s ease-in-out infinite alternate; }
.pe-cake-art .confetti > * { transform-box: fill-box; transform-origin: center; animation: pe-twinkle 2.4s ease-in-out infinite; }
.pe-cake-art .confetti > :nth-child(2n) { animation-delay: -1.2s; }
@keyframes pe-rise { from { transform: scaleY(0); opacity: 0; } }
@keyframes pe-flicker { from { transform: scale(1) skewX(-4deg); } to { transform: scale(.88, 1.14) skewX(4deg); } }
@keyframes pe-glow { from { opacity: .12; transform: scale(.9); } to { opacity: .42; transform: scale(1.3); } }

/* bathroom scale */
.pe-scale-art .sc-body { fill: var(--surface); stroke: var(--art-line); stroke-width: 2.5; }
.pe-scale-art .sc-pad { fill: var(--row-alt); }
.pe-scale-art .sc-grip { stroke: var(--border); stroke-width: 3; stroke-linecap: round; }
.pe-scale-art .sc-dial { fill: var(--surface-2); stroke: var(--art-line); stroke-width: 2.5; }
.pe-scale-art .sc-ticks line { stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; }
.pe-scale-art .sc-ticks line.major { stroke: var(--text); stroke-width: 2.5; }
.pe-scale-art .sc-needle { transform-box: view-box; transform-origin: 130px 76px; transition: transform 1s cubic-bezier(.34, 1.5, .5, 1); }
.pe-scale-art .sc-lcd { font: 700 15px "Rubik", monospace; fill: #7df0bf; text-anchor: middle; letter-spacing: 1px; }
.pe-sub { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--row-alt); }
.pe-sub > div { flex: 1; display: flex; flex-direction: column; }
.pe-sub small { font-size: 12.5px; color: var(--muted); }
.pe-mini { display: inline-flex; align-items: baseline; gap: 4px; padding: 6px 10px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); }
.pe-mini:focus-within { border-color: var(--accent); }
.pe-mini input { width: 5ch; font-size: 18px; }
.pe-mini span { font-size: 13px; color: var(--muted); }
.pe-delta { margin: -4px 0 0; text-align: center; font-weight: 700; color: var(--muted); }
.pe-delta:empty { display: none; }
.pe-delta.down { color: var(--good); }
.pe-delta.up { color: var(--protein); }
.pe-link { align-self: center; font-weight: 700; text-decoration: none; }
.pe-link::after { content: " ←"; }

/* goal: a trail up to a flag */
.pe-goal-art .mount.back { fill: color-mix(in srgb, var(--accent) 20%, var(--stage)); }
.pe-goal-art .mount.front { fill: color-mix(in srgb, var(--accent) 36%, var(--stage)); }
.pe-goal-art .sun { transform-box: fill-box; transform-origin: center; animation: pe-glow-sun 3s ease-in-out infinite alternate; }
@keyframes pe-glow-sun { to { transform: scale(1.12); opacity: .85; } }
.pe-goal-art .trail { fill: none; stroke: var(--surface); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1 9; }
.pe-goal-art .trail-done { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset .9s cubic-bezier(.34, 1.2, .64, 1); }
.pe-goal-art .trail-start { fill: var(--surface); stroke: var(--accent); stroke-width: 3; }
.pe-goal-art .walker { transition: transform .9s cubic-bezier(.34, 1.2, .64, 1); }
.pe-goal-art .walker circle:first-child { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
.pe-goal-art .flag-cloth { transform-box: fill-box; transform-origin: 0 50%; animation: pe-flag 1.4s ease-in-out infinite; }
/* Each opening: the flag goes up and the sun rises (new elements, so these start over every time),
   while the walker climbs (profile-edit.js) without the transitions in its way */
.pe-goal-art .flag { animation: pe-flag-up .7s cubic-bezier(.34, 1.4, .64, 1) both .2s; }
.pe-goal-art .sun { animation: pe-sun-up .9s ease-out both, pe-glow-sun 3s ease-in-out .9s infinite alternate; }
.pe-goal-art.intro .walker, .pe-goal-art.intro .trail-done { transition: none; }
@keyframes pe-flag-up { from { transform: translateY(34px); opacity: 0; } }
@keyframes pe-sun-up { from { transform: translateY(26px); opacity: 0; } }
@keyframes pe-flag { 0%, 100% { transform: skewY(0) scaleX(1); } 50% { transform: skewY(-9deg) scaleX(.88); } }
.pe-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.pe-facts:empty { display: none; }
.pe-facts span { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 14px; background: var(--row-alt); }
.pe-facts small { font-size: 12.5px; color: var(--muted); }
.pe-facts b { font-size: 16px; }

/* start date: a plant that grows over the first month */
.pe-sprout-art .rays { transform-box: fill-box; transform-origin: center; animation: pe-spin 24s linear infinite; }
.pe-sprout-art .grow { transform-box: fill-box; transform-origin: 50% 100%; animation: pe-grow .9s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes pe-grow { from { transform: scale(.2); opacity: 0; } }
.pe-sprout-art .leaf { transform-box: fill-box; animation: pe-leaf 3.2s ease-in-out infinite; }
.pe-sprout-art .l1, .pe-sprout-art .l3 { transform-origin: 100% 100%; }
.pe-sprout-art .l2, .pe-sprout-art .l4 { transform-origin: 0 100%; animation-delay: -1.6s; }
@keyframes pe-leaf { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.pe-sprout-art .bloom { transform-box: fill-box; transform-origin: center; animation: pe-bloom .9s .4s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes pe-bloom { from { transform: scale(0) rotate(-90deg); } }
.pe-manual[hidden] { display: none !important; }
.pe-sprout-art .seed { animation: pe-grow .9s cubic-bezier(.34, 1.56, .64, 1) both, pe-seed 2.4s 1s ease-in-out infinite; }
@keyframes pe-seed { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }

/* activity: figures that move faster with each level */
.pe-act-stage { display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%; padding: 12px 16px; }
.act-big { width: 140px; height: 140px; flex: none; overflow: visible; animation: pe-pop .4s cubic-bezier(.34, 1.56, .64, 1); }
.act-big .body { animation: pe-bob var(--spd, 2s) ease-in-out infinite; }
.act-light { --spd: 1s; }
.act-moderate { --spd: .6s; }
.act-active { --spd: .42s; }
.act-sedentary .body { animation: pe-breathe 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes pe-breathe { 50% { transform: scale(1.02, 1.04); } }
.act-sedentary .screen { animation: pe-glow 1.4s ease-in-out infinite alternate; }
.act-big .lines path { stroke-dasharray: 12 28; animation: pe-speed .5s linear infinite; }
@keyframes pe-speed { to { stroke-dashoffset: 40; } }
.act-very_active .press { transform-box: view-box; transform-origin: 60px 48px; animation: pe-press 1.3s ease-in-out infinite; }
@keyframes pe-press { 50% { transform: scaleY(.62); } }
.act-facts { display: flex; flex-direction: column; gap: 4px; max-width: 190px; }
.act-facts > b { font-size: 34px; line-height: 1; color: var(--accent); }
.act-facts span { font-size: 14px; color: var(--muted); }
.act-facts span b { color: var(--text); }
.act-mini { flex: none; padding: 2px; border-radius: 12px; background: var(--row-alt); }

/* weekly rate: a trend line that tilts */
.pe-rate-art .grid line { stroke: var(--border); stroke-width: 1; }
.pe-rate-art .base { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 5; }
.pe-rate-art .trend { --c: var(--good); transform-box: view-box; transform-origin: 230px 75px; transition: transform .7s cubic-bezier(.34, 1.56, .64, 1); }
.pe-rate-art .trend.up { --c: var(--protein); }
.pe-rate-art .trend.keep { --c: var(--carbs); }
.pe-rate-art .trend line { stroke: var(--c); stroke-width: 5; stroke-linecap: round; }
.pe-rate-art .trend .end { fill: var(--c); }
.pe-rate-art .trend .end-pulse { fill: none; stroke: var(--c); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: pe-ping 1.6s ease-out infinite; }
.pe-rate-art .start { fill: var(--surface); stroke: var(--text); stroke-width: 3; }
@keyframes pe-ping { from { transform: scale(1); opacity: .8; } to { transform: scale(2.6); opacity: 0; } }
.pe-rates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pe-rate { display: flex; padding: 10px 12px; border-radius: 14px; font-size: 14.5px; font-weight: 700; }
.pe-rate span { display: flex; flex-direction: column; }
.pe-rate small { font-size: 12px; font-weight: 400; color: var(--muted); }
.pe-rate.keep { grid-column: 1 / -1; align-items: center; }

/* diet: a plate split by protein, carbs and fat */
.pe-plate-art .plate { fill: var(--surface); stroke: var(--border); stroke-width: 2; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .12)); }
.pe-plate-art .plate-in { fill: var(--surface-2); }
.pe-plate-art .arc { fill: none; stroke-width: 26; transition: stroke-dasharray .8s cubic-bezier(.34, 1.2, .64, 1), stroke-dashoffset .8s cubic-bezier(.34, 1.2, .64, 1); }
.pe-plate-art .arc-protein { stroke: var(--protein); }
.pe-plate-art .arc-carbs { stroke: var(--carbs); }
.pe-plate-art .arc-fat { stroke: var(--fat); }
.pe-plate-art .cutlery path { fill: none; stroke: var(--muted); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.pe-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: -4px; }
.pe-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.pe-legend i { width: 10px; height: 10px; border-radius: 3px; }
.pe-legend .m-protein i, .mini-split i.m-protein { background: var(--protein); }
.pe-legend .m-carbs i, .mini-split i.m-carbs { background: var(--carbs); }
.pe-legend .m-fat i, .mini-split i.m-fat { background: var(--fat); }
.pe-legend b { font-size: 16px; color: var(--text); }
.pef-diet .pe-cards { grid-template-columns: 1fr 1fr; }
.pef-diet .pe-cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.mini-split { display: flex; gap: 2px; height: 6px; margin-top: 6px; border-radius: 999px; overflow: hidden; }
.mini-split i { display: block; }

/* restrictions: tap a food to cross it out */
.pe-allergy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pe-al { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; border-radius: 18px; text-align: center; }
.pe-al .allergen-art { position: relative; width: 54px; height: 54px; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), filter .3s; }
.pe-al:hover .allergen-art { transform: scale(1.06); }
.pe-no { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); fill: none; stroke: var(--warn); stroke-width: 2.2; stroke-linecap: round; opacity: 0; transition: opacity .15s; }
.pe-al:has(input:checked) .pe-no { opacity: 1; }
.pe-no circle, .pe-no path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .4s ease; }
.pe-al b { font-size: 14px; }
.pe-al:has(input:checked) { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, var(--surface)); }
.pe-al:has(input:checked) .allergen-art { transform: scale(.9) rotate(-8deg); filter: saturate(.7); }
.pe-al:has(input:checked) .pe-no circle, .pe-al:has(input:checked) .pe-no path { stroke-dashoffset: 0; }
.pe-al:has(input:checked) .pe-no path { transition-delay: .25s; }
.pe-al:has(input:checked) b::before { content: "ללא "; color: var(--warn); }
/* the conditions (gout, diabetes, profile-edit.js): a row of two, ringed when chosen, never "ללא" */
.pe-cond-title { margin: 12px 2px 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.pe-conds { grid-template-columns: repeat(2, 1fr); }
.pe-conds .pe-al { flex-direction: row; justify-content: center; gap: 10px; padding: 10px 8px; }
.pe-conds .pe-al .allergen-art { flex: none; width: 44px; height: 44px; }
.pe-al.pe-cond .pe-no { stroke: var(--accent); }
.pe-al.pe-cond:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.pe-al.pe-cond:has(input:checked) .allergen-art { transform: scale(.92); filter: none; }
.pe-al.pe-cond:has(input:checked) b::before { content: none; }

@media (max-width: 420px) {
  .pe-num input { font-size: 30px; }
  .pe-step { width: 46px; height: 46px; }
  .pef-diet .pe-cards { grid-template-columns: 1fr; }
  .pe-act-stage { gap: 10px; }
  .act-big { width: 110px; height: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .pe *, .pe *::before, .pe *::after { animation: none !important; transition: none !important; }
}

/* ---------- tile grid: full rows on 3 columns and on 2 (spans set by the page) ---------- */
.dash-grid { grid-auto-flow: row; }
.dash-grid > .dash-card { grid-column: span var(--s3, 1); }
@media (max-width: 760px) {
  .dash-grid { grid-auto-flow: row; }
  .dash-grid > .dash-card { grid-column: span var(--s2, 1); }
}

/* water: add or remove a glass */
.tile-actions { display: flex; gap: 8px; }
.tile-actions .tile-btn { flex: 1; }
.tile-actions .tile-btn.minus { flex: 0 0 48px; padding: 6px 0; font-size: 22px; line-height: 1; }
.tile-btn:disabled { opacity: .4; cursor: default; }
.tile-btn:disabled:hover { background: color-mix(in srgb, var(--accent) 11%, transparent); }

/* smart tile: the next meal, or the top foods of a past day */
.next-tile .next-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  color: var(--meal); background: color-mix(in srgb, var(--meal) 14%, transparent);
}
.next-tile .tile-num b small { font-size: 14px; font-weight: 500; color: var(--muted); }
.next-hint { margin: -2px 0 0; font-size: 13px; color: var(--muted); }
.next-recipe {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; text-decoration: none; color: inherit;
  background: var(--row-alt); border: 1px solid var(--border); transition: border-color .2s, transform .2s;
}
.next-recipe:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); transform: translateY(-1px); }
.next-pic { width: 48px; height: 48px; }
.next-recipe > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.next-recipe b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.next-recipe small { font-size: 12px; color: var(--muted); }
.next-recipe small:first-child { color: var(--accent); font-weight: 700; }
.next-tile .tile-btn { margin-top: auto; }
.top-foods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.top-foods li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; background: var(--row-alt); }
.tf-rank { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; background: var(--accent); }
.top-foods li:nth-child(n+2) .tf-rank { background: color-mix(in srgb, var(--accent) 55%, var(--muted)); }
.tf-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.tf-kcal { display: flex; align-items: baseline; gap: 6px; }
.tf-kcal small { font-size: 12px; color: var(--muted); }

/* ---------- add to a meal ---------- */
.ma { display: flex; flex-direction: column; gap: 14px; }
.ma-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: color-mix(in srgb, var(--meal) 12%, var(--surface)); }
.ma-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* the meal switched in the sheet itself (meal-add.js): its button in the head, the day's meals under it */
.ma-switch { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border: 0; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 700;
  color: color-mix(in srgb, var(--meal) 72%, var(--text)); background: color-mix(in srgb, var(--meal) 18%, var(--surface)); cursor: pointer; }
.ma-switch[aria-expanded="true"] { color: #fff; background: var(--meal); }
/* (its word as the button is, not as the head's line under the meal's name) */
.ma-head .ma-switch span { color: inherit; font-size: inherit; }
.ma-switch:active { transform: scale(.95); }
.ma-meals { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.ma-meals[hidden] { display: none; }
.ma-meals button { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 7px; border: 1.5px solid transparent; border-radius: 14px;
  font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.2; text-align: center; color: var(--text); background: var(--row-alt); cursor: pointer; }
.ma-meals button[aria-checked="true"] { border-color: var(--meal); background: color-mix(in srgb, var(--meal) 12%, var(--surface)); }
.ma-meals button:active { transform: scale(.96); }
.ma-head b { font-size: 18px; }
.ma-head span { font-size: 13.5px; color: var(--muted); }
.ma-head span b { font-size: inherit; color: var(--text); }
.ma-search {
  display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 52px; border-radius: 16px; color: var(--muted);
  border: 1.5px solid var(--border); background: var(--surface);
}
.ma-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.ma-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--text); font: inherit; font-size: 17px; }
.ma-tools { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.ma-tools button {
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 6px; border-radius: 14px; border: 0; cursor: pointer;
  background: var(--row-alt); color: var(--text); font: inherit; font-weight: 700; font-size: 14px; transition: background .2s;
}
.ma-tools button:hover { background: color-mix(in srgb, var(--accent) 12%, var(--row-alt)); color: var(--accent); }
.ma-list { display: flex; flex-direction: column; min-height: 120px; }
.ma-imgs { align-self: flex-start; margin: -4px 2px -2px; font-size: 14px; }
/* not the whole height of a tall screen: the list scrolls inside. Its full height from the start, so it
   rises whole and the list fills it in place (it rose short, round a spinner, and grew taller in mid-rise
   as the foods came; and with each letter of a search) */
@media (min-width: 601px) { dialog#dialog.ma-dialog { max-height: min(680px, calc(100vh - 64px)); height: min(680px, calc(100vh - 64px)); } }
@media (max-width: 600px) { dialog#dialog.ma-dialog { height: 92vh; } }
/* across on an iPad and a computer: the meal on the right and the tools beside it, the search the form's
   whole width under them, then the foods, two to a row where each still has room for its name (an iPad on
   its side, a computer); it stood a phone's column, a long list of rows, in the middle of the screen */
@media (min-width: 760px) and (min-height: 500px) {
  dialog#dialog.ma-dialog { width: min(940px, calc(100vw - 48px)); }
  .ma { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; row-gap: 12px; }
  .ma > .ma-head { grid-column: 1; grid-row: 1; }
  .ma > .ma-tools { grid-column: 2; grid-row: 1; align-self: stretch; }
  .ma > .ma-tools button { height: 100%; }
  .ma > .ma-search { grid-column: 1 / -1; }
  .ma > .ma-meals { grid-column: 1 / -1; margin-top: 0; }
  .ma > .ma-list { grid-column: 1 / -1; }
  .ma-head b { font-size: 20px; }
  .ma-tabs { justify-self: center; align-self: center; width: min(100%, 520px); }
}
@media (min-width: 1000px) and (min-height: 500px) {
  :is(#maList, #maPanel, .ma-recent) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; align-content: start; }
  :is(#maList, #maPanel, .ma-recent) > :not(.ma-row, .ma-item, .ma-staple, .ma-q) { grid-column: 1 / -1; }
  /* a row as tall as the one beside it: the food's face fills it (the colour under a swiped row showed) */
  #maList .ma-item { align-items: stretch; }
}
.ma-list h4 { margin: 4px 0 6px; font-size: 13px; color: var(--muted); font-weight: 700; }
/* the two lists while nothing is typed (meal-add.js): eaten lately, the favourites; the one shown in front */
.ma-tabs { flex: none; margin: 2px 0 8px; }
.ma-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 8px 10px; font-size: 14.5px; font-weight: 700; }
.ma-tabs button[aria-selected="true"] { color: var(--accent); }
.ma-tabs [data-ma-tab="favs"][aria-selected="true"] svg { color: #f5a524; fill: currentColor; }
.ma-tab-n { min-width: 20px; padding: 0 6px; border-radius: 999px; font-size: 11.5px; font-weight: 800; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums;
  color: var(--muted); background: color-mix(in srgb, var(--text) 9%, transparent); }
.ma-tabs button[aria-selected="true"] .ma-tab-n { color: #fff; background: var(--accent); }
.ma-hint-line { margin: 0 2px 2px; }
.ma-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 10px; border: 0; border-bottom: 1px solid var(--border);
  background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; border-radius: 12px;
}
.ma-row:hover { background: var(--row-alt); }
.ma-row:last-of-type { border-bottom: 0; }
.ma-plus { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); }
.ma-row:hover .ma-plus { background: var(--accent); color: #fff; }
/* a recent food with a small X to take it off the list */
.ma-item { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--border); transition: opacity .25s, transform .25s; }
.ma-item .ma-row { flex: 1; min-width: 0; border-bottom: 0; }
.ma-recent .ma-item:last-child { border-bottom: 0; }
.ma-item.leaving { opacity: 0; transform: translateX(-24px); }
.ma-x {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 0;
  color: var(--muted); background: var(--row-alt); opacity: .75; transition: background .2s, color .2s, opacity .2s, transform .2s;
}
.ma-item:hover .ma-x, .ma-x:focus-visible { opacity: 1; }
.ma-x:hover { background: color-mix(in srgb, var(--warn) 14%, var(--surface)); color: var(--warn); transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .ma-x:hover { transform: none; } .ma-item.leaving { transform: none; } }
.ma-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 18px 0; text-align: center; color: var(--muted); }
.ma-loading { padding: 24px 0; }

/* ---------- date pickers: day, month and year grids ---------- */
.pe-date { position: relative; grid-template-columns: .8fr 1.3fr 1fr; }
.pick { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pick-label { font-size: 14px; color: var(--muted); }
.pick-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 52px; padding: 0 14px; cursor: pointer;
  border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font: inherit; font-size: 18px; font-weight: 700;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.pick-btn:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.pick-btn svg { flex: none; color: var(--muted); transition: transform .25s; }
.pick.empty .pick-val { color: var(--muted); font-weight: 500; }
.pick.open .pick-btn { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.pick.open .pick-btn svg { transform: rotate(180deg); color: var(--accent); }
.pick-pop {
  grid-column: 1 / -1; margin-top: 2px; padding: 12px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 18px 44px rgba(10, 30, 25, .22);
  animation: pop-in .16s ease-out;
}
.pick-title { margin: 0 4px 10px; font-weight: 700; font-size: 15px; }
.pick-grid { display: grid; gap: 4px; }
.pick-grid.days { grid-template-columns: repeat(7, 1fr); }
.pick-grid.months { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pick-grid.years { grid-template-columns: repeat(4, 1fr); gap: 6px; max-height: 236px; overflow-y: auto; padding: 2px; overscroll-behavior: contain; }
.pick-wd { padding: 2px 0 4px; text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); }
.pick-opt {
  height: 40px; border: 0; border-radius: 12px; background: transparent; color: var(--text); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
  transition: background .15s, color .15s;
}
.pick-grid.months .pick-opt, .pick-grid.years .pick-opt { background: var(--row-alt); height: 44px; }
.pick-grid .pick-opt:hover { background: color-mix(in srgb, var(--accent) 14%, var(--row-alt)); color: var(--accent); }
.pick-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pick-grid .pick-opt.sel { background: var(--accent); color: #fff; font-weight: 700; box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 35%, transparent); }

/* the other native selects get a styled list where the browser allows it */
@supports (appearance: base-select) {
  select { appearance: base-select; background-image: none; padding-inline-end: 14px !important; }
  select::picker-icon { color: var(--muted); transition: rotate .2s; }
  select:open::picker-icon { rotate: 180deg; color: var(--accent); }
  select::picker(select) {
    appearance: base-select; margin-top: 6px; padding: 6px; border-radius: 16px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text); box-shadow: 0 18px 44px rgba(10, 30, 25, .22); max-height: 320px;
  }
  select option { padding: 10px 12px; border-radius: 10px; font-size: 15px; }
  select option:hover, select option:focus-visible { background: var(--row-alt); }
  select option:checked { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); font-weight: 700; }
  select option::checkmark { display: none; }
}

/* ---------- favourites ---------- */
.fav-hero .star-art .sparkle { animation: twinkle 2.6s ease-in-out infinite; }
.fav-search {
  display: flex; align-items: center; gap: 10px; height: 50px; margin-top: 14px; padding: 0 14px; border-radius: 14px;
  background: var(--surface); color: var(--muted);
}
.fav-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--text); font: inherit; font-size: 16px; }
.fav-section { margin-top: 30px; }
.sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sec-head h3 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 20px; }
.sec-head h3 .icon { color: var(--accent); }
.sec-head .count:not(:empty) { min-width: 26px; padding: 1px 9px; border-radius: 999px; font-size: 13px; text-align: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.fav-card {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow);
  border: 1px solid transparent; transition: transform .2s, box-shadow .2s, border-color .2s, opacity .25s;
}
.fav-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--kind) 30%, transparent); box-shadow: 0 10px 28px rgba(16, 24, 40, .1); }
.fav-card.leaving { opacity: 0; transform: scale(.96); }
.fav-main { display: flex; align-items: center; gap: 14px; padding: 16px 16px 14px; color: inherit; text-decoration: none; }
/* a dish or a meal starred: its card opens its parts (a button, not a link) */
button.fav-main { width: 100%; border: 0; background: none; font: inherit; text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fav-dish .fav-text small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fav-pic { width: 84px; height: 84px; border-radius: 18px; }
.fav-pic.cutout img { padding: 6px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .15)); }
.fav-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fav-kind {
  align-self: flex-start; padding: 1px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  color: var(--kind); background: color-mix(in srgb, var(--kind) 13%, transparent);
}
.fav-text b { font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fav-text small { font-size: 13px; color: var(--muted); }
.fav-macros { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; font-size: 12px; color: var(--muted); }
.fav-macros:empty { display: none; }
.fav-macros span { display: inline-flex; align-items: center; gap: 4px; }
.fav-macros i { width: 7px; height: 7px; border-radius: 50%; }
.fav-macros .m-protein i { background: var(--protein); }
.fav-macros .m-carbs i { background: var(--carbs); }
.fav-macros .m-fat i { background: var(--fat); }
.fav-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface-2); }
.fav-kcal { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.fav-kcal b { font-size: 20px; }
.fav-kcal span { font-size: 12.5px; color: var(--muted); }
.fav-icon {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--row-alt); color: var(--muted); text-decoration: none; transition: background .2s, color .2s, transform .2s;
}
.fav-icon:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--row-alt)); }
.fav-icon.on { color: #e9a800; background: color-mix(in srgb, #f5c542 18%, var(--surface)); }
.fav-icon.on svg { fill: currentColor; }
.fav-icon.on:hover { transform: scale(1.06) rotate(-8deg); }
.fav-add {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--accent); color: var(--accent-text); font: inherit; font-weight: 700; font-size: 14px;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 30%, transparent); transition: filter .2s, transform .15s;
}
.fav-add:hover { filter: brightness(1.06); }
.fav-add:active { transform: scale(.96); }
/* the water page's list of the day's drinks (diary.js waterLogPanel) */
.wlg { margin: 14px 0; padding: 12px 14px 12px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }
.wlg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 0; padding: 4px 4px 4px 2px; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; border-radius: 14px; }
.wlg-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wlg-title h3 { margin: 0; font-size: 18px; }
.wlg-title small { color: var(--muted); font-size: 14px; }
.wlg-chev { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--muted); transition: transform .25s; }
.wlg:not(.shut) .wlg-chev { transform: rotate(180deg); }
.wlg-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .wlg-head:hover .wlg-chev { background: color-mix(in srgb, var(--text) 14%, transparent); } }
.wlg-body { margin-top: 12px; }
.wlg-body.opening { animation: wlg-in .25s ease-out; }
@keyframes wlg-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wlg-body { animation: none; } .wlg-chev { transition: none; } }
.confirm-ico .cdd-art svg { width: 40px; height: 40px; }
.wlg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* (swiped to the left and away, over a red bin on its right: as the shopping list's items, swipe-away.js) */
.wlg-row { position: relative; border-radius: 16px; touch-action: pan-y; }
.wlg-slide { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: inherit;
  background: color-mix(in srgb, var(--text) 5%, var(--surface)); transition: transform .28s cubic-bezier(.22, 1, .36, 1); }
.wlg-row.dragging .wlg-slide { transition: none; }
.wlg-bin { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start; gap: 6px; padding: 0 22px; border-radius: inherit;
  color: #fff; font-size: 14px; font-weight: 700; background: linear-gradient(90deg, #e5484d, #ff6b6b); visibility: hidden; }
.wlg-row:is(.dragging, .gone) .wlg-bin { visibility: visible; }
.wlg-bin svg { transition: transform .2s; }
.wlg-row.armed .wlg-bin svg { transform: scale(1.25); }
.wlg-art { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: color-mix(in srgb, var(--kc) 16%, transparent); }
.wlg-art svg { width: 38px; height: 38px; }
.wlg-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.wlg-text b { font-size: 15px; font-weight: 700; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.wlg-text small { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; color: var(--muted); font-size: 13px; }
.wlg-text small i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.wlg-text time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
.wlg-acts { flex: none; display: flex; gap: 6px; }
.wlg-btn { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); cursor: pointer; }
.wlg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .wlg-btn:hover { background: color-mix(in srgb, var(--text) 14%, transparent); } }
.cf-add { margin: 14px 0 14px; }
.cf-add-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; padding: 0 16px; border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
.cf-add-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .cf-add-btn:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); } }
.cf-add-form { display: grid; grid-template-columns: 1fr auto auto; gap: 14px 10px; align-items: center; }
.cf-add-form input { min-width: 0; min-height: 46px; padding: 0 14px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface); color: inherit; font: inherit; }
.cf-add-form .btn { min-height: 46px; white-space: nowrap; }
@media (max-width: 520px) { .cf-add-form { grid-template-columns: 1fr 1fr; } .cf-add-form input { grid-column: 1 / -1; } }
.fav-none { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 2px; padding: 16px 18px; border-radius: 20px; background: color-mix(in srgb, var(--text) 4%, transparent); border: 1.5px dashed color-mix(in srgb, var(--text) 16%, transparent); }
.fav-none > div { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fav-none b { font-size: 16px; }
.fav-none span:not(.fn-sign) { font-size: 14px; color: var(--muted); }
.fav-none .fn-sign { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; color: var(--fc); background: color-mix(in srgb, var(--fc) 16%, transparent); }
.fav-none .btn { margin-inline-start: auto; }
.fav-empty, .mine-cta { display: flex; align-items: center; gap: 18px; padding: 20px 22px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }
.fav-empty > div, .mine-cta-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fav-empty b, .mine-cta-text b { font-size: 17px; }
.fav-empty span, .mine-cta-text span { font-size: 14px; color: var(--muted); }
.mine-cta { margin-bottom: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface) 70%); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); }
.mine-cta .art { flex: none; }
.mine-cta-actions { display: flex; flex-direction: column; gap: 8px; flex: none; }
.mine-cta-actions .btn { justify-content: center; }
.toast-undo { margin-inline-start: 6px; padding: 2px 10px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .18); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
@media (max-width: 640px) {
  .fav-grid { grid-template-columns: 1fr; gap: 12px; }
  .mine-cta { flex-wrap: wrap; gap: 14px; padding: 18px; }
  .mine-cta .art { width: 72px; height: 72px; }
  .mine-cta-text { flex-basis: calc(100% - 90px); }
  .mine-cta-actions { flex-direction: row; width: 100%; }
  .mine-cta-actions .btn { flex: 1; }
  .fav-pic { width: 72px; height: 72px; }
  .sec-head .segmented { width: 100%; }
}

/* ---------- skins: ready-made looks (data-skin on <html>), each with light and dark tokens ----------
   Every key set for light is set again for dark, so nothing light leaks into dark mode. */
:root { --glow: #a6efd2; --font: "Rubik"; }
:root[data-skin="ocean"] { --glow: #a9d8ff; --font: "Heebo"; }
:root[data-skin="sunset"] { --glow: #f6d7c3; --font: "Fredoka"; }
:root[data-skin="lavender"] { --glow: #d8cbff; --font: "Assistant"; }
:root[data-skin="midnight"] { --glow: #f1cf7d; --font: "IBM Plex Sans Hebrew"; }
:root[data-skin="rose"] { --glow: #ffc6d9; --font: "Varela Round"; }
:root[data-skin="sky"] { --glow: #bae6fd; --font: "Rubik"; }
:root[data-skin="bank"] { --glow: #e8c88a; --font: "IBM Plex Sans Hebrew"; }
:root[data-skin="ruby"] { --glow: #ffc4bb; --font: "Heebo"; }
:root[data-skin="candy"] { --glow: #ffd6ec; --font: "Fredoka"; }

:root[data-skin="ocean"] {
  --bg: #eef3f9; --surface: #ffffff; --surface-2: #f4f7fb; --border: #dbe4ef; --brand: #155fb8; --accent: #1a66c4; --accent-text: #ffffff;
  --track: #e1e9f3; --row-alt: #f2f6fb; --stage: #e3eef9; --stage-glow: #ffffff;
  --hero: linear-gradient(165deg, #0c3b78 0%, #1f6fd0 55%, #2b7cb0 100%);
  --shadow: 0 1px 2px rgba(12, 40, 80, .06), 0 6px 18px rgba(12, 40, 80, .08);
}
/* sunset (shown as "אפרסק"): soft peach and clay, quiet on the eyes */
:root[data-skin="sunset"] {
  --bg: #faf5f1; --surface: #ffffff; --surface-2: #fcf8f5; --border: #eee2d9; --brand: #8f5646; --accent: #a5604b; --accent-text: #ffffff;
  --track: #f1e6de; --row-alt: #fbf6f2; --stage: #f6ebe3; --stage-glow: #ffffff;
  --hero: linear-gradient(165deg, #6e4a52 0%, #9c6a63 55%, #b9876f 100%);
  --shadow: 0 2px 4px rgba(110, 70, 60, .05), 0 12px 30px rgba(110, 70, 60, .09);
}
:root[data-skin="lavender"] {
  --bg: #f4f2fb; --surface: #ffffff; --surface-2: #f8f6fd; --border: #e3def4; --brand: #5b3fd1; --accent: #6d50e3; --accent-text: #ffffff;
  --track: #e8e3f7; --row-alt: #f6f3fd; --stage: #ece7fa; --stage-glow: #ffffff;
  --hero: linear-gradient(165deg, #3a2391 0%, #6c4ee0 55%, #7a5ad8 100%);
  --shadow: 0 1px 2px rgba(60, 35, 140, .05), 0 8px 24px rgba(60, 35, 140, .09);
}
:root[data-skin="midnight"] {
  --bg: #f3f2ef; --surface: #ffffff; --surface-2: #f8f7f4; --border: #e0ddd5; --brand: #2a2f38; --accent: #8a5a0c; --accent-text: #ffffff;
  --track: #e6e3dc; --row-alt: #f6f5f1; --stage: #ece9e2; --stage-glow: #ffffff;
  --hero: linear-gradient(165deg, #14171c 0%, #262b33 60%, #3a3f48 100%);
  --shadow: 0 0 0 1px #e0ddd5;
}
/* sky: a light, airy azure */
:root[data-skin="sky"] {
  --bg: #eff7fb; --surface: #ffffff; --surface-2: #f5fafd; --border: #d6e9f2; --brand: #0369a1; --accent: #0284c7; --accent-text: #ffffff;
  --track: #e0eff6; --row-alt: #f2f9fc; --stage: #e2f2fa; --stage-glow: #ffffff;
  --hero: linear-gradient(165deg, #075985 0%, #0284c7 55%, #0e9fc0 100%);
  --shadow: 0 1px 2px rgba(3, 80, 120, .06), 0 8px 22px rgba(3, 80, 120, .09);
}
/* bank: cognac brown and gold on parchment, square corners and fine rules, as a private bank's papers */
:root[data-skin="bank"] {
  --bg: #f6f1ea; --surface: #fffdf9; --surface-2: #faf6f0; --border: #e5dccd; --brand: #5c3a21; --accent: #8b5a2b; --accent-text: #ffffff;
  --track: #ece4d7; --row-alt: #f8f3ec; --stage: #f0e8dc; --stage-glow: #fffdf9;
  --hero: linear-gradient(165deg, #2b1a12 0%, #4a2c1d 55%, #6b4226 100%);
  --shadow: 0 0 0 1px #e5dccd, 0 6px 18px rgba(60, 35, 20, .07);
}
:root[data-skin="rose"] {
  --bg: #fbf1f4; --surface: #ffffff; --surface-2: #fdf6f8; --border: #f1dce3; --brand: #b52a5c; --accent: #b92d63; --accent-text: #ffffff;
  --track: #f5e3ea; --row-alt: #fcf3f6; --stage: #fae6ee; --stage-glow: #ffffff;
  --hero: linear-gradient(165deg, #8e1d4c 0%, #cc3f73 55%, #b8336c 100%);
  --shadow: 0 2px 4px rgba(140, 30, 70, .05), 0 10px 26px rgba(140, 30, 70, .09);
}
/* ruby (shown as "אודם"): a deep, calm wine red, quiet rather than loud */
:root[data-skin="ruby"] {
  --bg: #faf3f2; --surface: #ffffff; --surface-2: #fcf7f6; --border: #eedcd9; --brand: #9b2f35; --accent: #a8363b; --accent-text: #ffffff;
  --track: #f3e3e0; --row-alt: #fbf5f4; --stage: #f7e8e5; --stage-glow: #ffffff;
  --hero: linear-gradient(165deg, #5c1a1f 0%, #8f2c31 55%, #a5463f 100%);
  --shadow: 0 2px 4px rgba(120, 30, 35, .05), 0 10px 26px rgba(120, 30, 35, .09);
}
/* candy (shown as "סוכריה"): sweet pink melting into lilac, round letters and a little glitter on the header */
:root[data-skin="candy"] {
  --bg: #fdf2f8; --surface: #ffffff; --surface-2: #fef7fb; --border: #f5d9ea; --brand: #c02c7c; --accent: #c8328a; --accent-text: #ffffff;
  --track: #f8e1ef; --row-alt: #fdf4f9; --stage: #fbe5f2; --stage-glow: #ffffff;
  --hero: var(--glitter), linear-gradient(165deg, #a8286e 0%, #d9539a 55%, #9a5fd6 100%);
  --shadow: 0 2px 4px rgba(170, 40, 110, .05), 0 10px 26px rgba(170, 40, 110, .1);
  --glitter: radial-gradient(circle at 12% 22%, rgba(255, 255, 255, .55) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 34% 70%, rgba(255, 255, 255, .4) 0 1px, transparent 2px),
    radial-gradient(circle at 58% 16%, rgba(255, 255, 255, .45) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 80% 58%, rgba(255, 255, 255, .5) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 93% 14%, rgba(255, 255, 255, .35) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 88%, rgba(255, 240, 250, .4) 0 1.2px, transparent 2.2px);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="ocean"]:not([data-theme="light"]) {
    --bg: #0b1220; --surface: #121b2c; --surface-2: #172236; --border: #233149; --brand: #3d8ef0; --accent: #5aa2f5; --accent-text: #08111f;
    --track: #1f2b40; --row-alt: #162134; --stage: #17243a; --stage-glow: #24344f;
    --hero: linear-gradient(165deg, #081f44 0%, #0f3f80 55%, #1b6bb8 100%); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .3);
  }
  :root[data-skin="sunset"]:not([data-theme="light"]) {
    --bg: #15100f; --surface: #1f1817; --surface-2: #271f1d; --border: #382c29; --brand: #dca088; --accent: #e3a68c; --accent-text: #1a0f0b;
    --track: #30262a; --row-alt: #231b1a; --stage: #2a201e; --stage-glow: #3a2d2a;
    --hero: linear-gradient(165deg, #3e2a2f 0%, #6b4a46 55%, #8a6450 100%); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 26px rgba(0, 0, 0, .35);
  }
  :root[data-skin="lavender"]:not([data-theme="light"]) {
    --bg: #100d1a; --surface: #181425; --surface-2: #1e192f; --border: #2c2542; --brand: #8f74ff; --accent: #a08bff; --accent-text: #120b26;
    --track: #261f3a; --row-alt: #1c172c; --stage: #211b34; --stage-glow: #30284a;
    --hero: linear-gradient(165deg, #22144f 0%, #3e2a8c 55%, #6a4cc0 100%); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  }
  :root[data-skin="midnight"]:not([data-theme="light"]) {
    --bg: #0c0d10; --surface: #15171b; --surface-2: #1b1e23; --border: #2a2d33; --brand: #d9a441; --accent: #e0b04f; --accent-text: #15120a;
    --track: #24272d; --row-alt: #191b20; --stage: #1d2025; --stage-glow: #2b2f36;
    --hero: linear-gradient(165deg, #050608 0%, #15181d 60%, #262a31 100%); --shadow: 0 0 0 1px #2a2d33;
  }
  :root[data-skin="sky"]:not([data-theme="light"]) {
    --bg: #081419; --surface: #0f1e26; --surface-2: #142731; --border: #203743; --brand: #38bdf8; --accent: #4cc3f5; --accent-text: #04121a;
    --track: #1a2e38; --row-alt: #11222b; --stage: #13262f; --stage-glow: #1f3a47;
    --hero: linear-gradient(165deg, #04263a 0%, #075985 55%, #0e7490 100%); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .32);
  }
  :root[data-skin="bank"]:not([data-theme="light"]) {
    --bg: #120d0a; --surface: #1b1410; --surface-2: #221a15; --border: #33271f; --brand: #d4a65a; --accent: #dcb36a; --accent-text: #1a120a;
    --track: #2a2019; --row-alt: #1f1813; --stage: #241b15; --stage-glow: #362a21;
    --hero: linear-gradient(165deg, #0e0805 0%, #24160e 55%, #3d2718 100%); --shadow: 0 0 0 1px #33271f;
  }
  :root[data-skin="rose"]:not([data-theme="light"]) {
    --bg: #160c11; --surface: #20131a; --surface-2: #281820; --border: #3a2430; --brand: #f0679a; --accent: #ff7aa8; --accent-text: #1d0a12;
    --track: #321f29; --row-alt: #24161d; --stage: #2b1922; --stage-glow: #3d2633;
    --hero: linear-gradient(165deg, #4d0f2a 0%, #8c1f4d 55%, #b8406f 100%); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 26px rgba(0, 0, 0, .35);
  }  :root[data-skin="ruby"]:not([data-theme="light"]) {
    --bg: #140b0b; --surface: #1e1213; --surface-2: #261718; --border: #3a2425; --brand: #e8746f; --accent: #f08580; --accent-text: #1c0909;
    --track: #321e1f; --row-alt: #221415; --stage: #2a1819; --stage-glow: #3c2627;
    --hero: linear-gradient(165deg, #3a0e12 0%, #6a1d22 55%, #8f3a36 100%); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 26px rgba(0, 0, 0, .35);
  }
  :root[data-skin="candy"]:not([data-theme="light"]) {
    --bg: #150a12; --surface: #20111b; --surface-2: #2a1623; --border: #3d2234; --brand: #f472b6; --accent: #f98ac4; --accent-text: #22071a;
    --track: #331d2c; --row-alt: #241420; --stage: #2c1827; --stage-glow: #40253a;
    --hero: var(--glitter), linear-gradient(165deg, #4f0f36 0%, #8a2163 55%, #6a3fa8 100%); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 26px rgba(0, 0, 0, .35);
  }
}
:root[data-skin="ocean"][data-theme="dark"] {
  --bg: #0b1220; --surface: #121b2c; --surface-2: #172236; --border: #233149; --brand: #3d8ef0; --accent: #5aa2f5; --accent-text: #08111f;
  --track: #1f2b40; --row-alt: #162134; --stage: #17243a; --stage-glow: #24344f;
  --hero: linear-gradient(165deg, #081f44 0%, #0f3f80 55%, #1b6bb8 100%); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .3);
}
:root[data-skin="sunset"][data-theme="dark"] {
  --bg: #15100f; --surface: #1f1817; --surface-2: #271f1d; --border: #382c29; --brand: #dca088; --accent: #e3a68c; --accent-text: #1a0f0b;
  --track: #30262a; --row-alt: #231b1a; --stage: #2a201e; --stage-glow: #3a2d2a;
  --hero: linear-gradient(165deg, #3e2a2f 0%, #6b4a46 55%, #8a6450 100%); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 26px rgba(0, 0, 0, .35);
}
:root[data-skin="lavender"][data-theme="dark"] {
  --bg: #100d1a; --surface: #181425; --surface-2: #1e192f; --border: #2c2542; --brand: #8f74ff; --accent: #a08bff; --accent-text: #120b26;
  --track: #261f3a; --row-alt: #1c172c; --stage: #211b34; --stage-glow: #30284a;
  --hero: linear-gradient(165deg, #22144f 0%, #3e2a8c 55%, #6a4cc0 100%); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
}
:root[data-skin="midnight"][data-theme="dark"] {
  --bg: #0c0d10; --surface: #15171b; --surface-2: #1b1e23; --border: #2a2d33; --brand: #d9a441; --accent: #e0b04f; --accent-text: #15120a;
  --track: #24272d; --row-alt: #191b20; --stage: #1d2025; --stage-glow: #2b2f36;
  --hero: linear-gradient(165deg, #050608 0%, #15181d 60%, #262a31 100%); --shadow: 0 0 0 1px #2a2d33;
}
:root[data-skin="sky"][data-theme="dark"] {
  --bg: #081419; --surface: #0f1e26; --surface-2: #142731; --border: #203743; --brand: #38bdf8; --accent: #4cc3f5; --accent-text: #04121a;
  --track: #1a2e38; --row-alt: #11222b; --stage: #13262f; --stage-glow: #1f3a47;
  --hero: linear-gradient(165deg, #04263a 0%, #075985 55%, #0e7490 100%); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .32);
}
:root[data-skin="bank"][data-theme="dark"] {
  --bg: #120d0a; --surface: #1b1410; --surface-2: #221a15; --border: #33271f; --brand: #d4a65a; --accent: #dcb36a; --accent-text: #1a120a;
  --track: #2a2019; --row-alt: #1f1813; --stage: #241b15; --stage-glow: #362a21;
  --hero: linear-gradient(165deg, #0e0805 0%, #24160e 55%, #3d2718 100%); --shadow: 0 0 0 1px #33271f;
}
:root[data-skin="rose"][data-theme="dark"] {
  --bg: #160c11; --surface: #20131a; --surface-2: #281820; --border: #3a2430; --brand: #f0679a; --accent: #ff7aa8; --accent-text: #1d0a12;
  --track: #321f29; --row-alt: #24161d; --stage: #2b1922; --stage-glow: #3d2633;
  --hero: linear-gradient(165deg, #4d0f2a 0%, #8c1f4d 55%, #b8406f 100%); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 26px rgba(0, 0, 0, .35);
}
:root[data-skin="ruby"][data-theme="dark"] {
  --bg: #140b0b; --surface: #1e1213; --surface-2: #261718; --border: #3a2425; --brand: #e8746f; --accent: #f08580; --accent-text: #1c0909;
  --track: #321e1f; --row-alt: #221415; --stage: #2a1819; --stage-glow: #3c2627;
  --hero: linear-gradient(165deg, #3a0e12 0%, #6a1d22 55%, #8f3a36 100%); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 26px rgba(0, 0, 0, .35);
}
:root[data-skin="candy"][data-theme="dark"] {
  --bg: #150a12; --surface: #20111b; --surface-2: #2a1623; --border: #3d2234; --brand: #f472b6; --accent: #f98ac4; --accent-text: #22071a;
  --track: #331d2c; --row-alt: #241420; --stage: #2c1827; --stage-glow: #40253a;
  --hero: var(--glitter), linear-gradient(165deg, #4f0f36 0%, #8a2163 55%, #6a3fa8 100%); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 26px rgba(0, 0, 0, .35);
}
body { font-family: var(--font), "Rubik", "Segoe UI", Arial, sans-serif; }
/* a short cross-fade while the skin changes */
.skin-fade, .skin-fade body, .skin-fade body * { transition: background-color .5s ease, border-color .5s ease, color .5s ease, fill .5s ease, box-shadow .5s ease !important; }

/* ---------- skin picker ---------- */
.skin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
/* room between the note over the skins and their cards (the picked one's ring stands out of its card) */
.skin-note { margin-bottom: 18px; }
.skin-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 10px 10px 12px; cursor: pointer; text-align: start;
  border: 2px solid var(--border); border-radius: 22px; background: var(--surface); color: var(--text); font: inherit;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.skin-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(16, 24, 40, .12); }
.skin-card[aria-checked="true"] { border-color: var(--s-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--s-accent) 22%, transparent), 0 12px 28px rgba(16, 24, 40, .12); }
.skin-card:focus-visible { outline: 3px solid var(--s-accent); outline-offset: 3px; }
.skin-check {
  /* the chosen look: a small square badge in the look's colour, a crisp white tick */
  position: absolute; top: 18px; left: 18px; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  background: var(--s-accent); color: #fff; box-shadow: 0 0 0 2px #fff, 0 4px 10px rgba(0, 0, 0, .28);
  transform: scale(0); transition: transform .25s cubic-bezier(.34, 1.4, .64, 1);
}
.skin-card[aria-checked="true"] .skin-check { transform: scale(1); }
.skin-info { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; }
.skin-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.skin-name b { font-size: 16px; }
.skin-info small { font-size: 12.5px; color: var(--muted); }
.skin-dots { display: inline-flex; }
.skin-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--surface); margin-inline-start: -5px; }

/* the preview: a small app in the skin's colours */
.skin-mock {
  --mb: var(--m-bg); --ms: var(--m-surface);
  position: relative; display: flex; flex-direction: column; height: 178px; overflow: hidden; border-radius: 16px; background: var(--mb);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .skin-mock { --mb: var(--m-bg-d); --ms: var(--m-surface-d); } }
:root[data-theme="dark"] .skin-mock { --mb: var(--m-bg-d); --ms: var(--m-surface-d); }
.sm-hero {
  display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 10px; color: #fff;
  background: linear-gradient(165deg, var(--m-h0) 0%, var(--m-h1) 55%, var(--m-h2) 100%); border-radius: 0 0 var(--m-r) var(--m-r);
}
.sm-top { display: flex; align-items: center; justify-content: space-between; }
.sm-top i { display: block; border-radius: 999px; background: rgba(255, 255, 255, .85); }
.sm-logo { width: 34px; height: 7px; }
.sm-clock { width: 26px; height: 9px; background: rgba(255, 255, 255, .25) !important; }
.sm-avatar { width: 11px; height: 11px; }
.sm-mid { display: flex; align-items: center; gap: 10px; }
.sm-gauge { flex: none; width: 50px; height: 50px; transform: rotate(-90deg); }
.sm-gauge circle { fill: none; stroke-width: 6; stroke-linecap: round; }
.sm-track { stroke: rgba(255, 255, 255, .22); }
.sm-arc { stroke: var(--m-glow); stroke-dasharray: 70 107; transition: stroke-dasharray .8s ease; }
.skin-card:hover .sm-arc { stroke-dasharray: 90 107; }
.sm-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; line-height: 1.1; }
.sm-words b { font-size: 14px; font-weight: 700; }
.sm-words small { font-size: 10px; opacity: .85; }
.sm-week { display: flex; gap: 3px; margin-top: 2px; }
.sm-week i { position: relative; width: 9px; height: 16px; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .3); }
.sm-week em { position: absolute; bottom: 0; left: 0; right: 0; background: var(--m-glow); }
.sm-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 10px 0; }
.sm-tile { display: flex; align-items: center; gap: 6px; padding: 7px; border-radius: calc(var(--m-r) * .5); background: var(--ms); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.sm-ico { flex: none; width: 14px; height: 14px; border-radius: 5px; background: var(--m-h1); }
.sm-ring { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--m-h1); border-left-color: color-mix(in srgb, var(--m-h1) 25%, transparent); }
.sm-lines { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.sm-lines i { display: block; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--m-h1) 30%, #9aa3a0); opacity: .5; }
.sm-lines i + i { width: 60%; }
.sm-nav {
  display: flex; align-items: center; justify-content: space-around; height: 22px; margin: auto 22px 8px; border-radius: 999px;
  background: var(--ms); box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.sm-nav i { width: 8px; height: 8px; border-radius: 3px; background: color-mix(in srgb, var(--m-h1) 25%, #9aa3a0); opacity: .6; }
.sm-nav b {
  width: 22px; height: 22px; margin-top: -10px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 15px; line-height: 1;
  background: linear-gradient(135deg, var(--m-h2), var(--m-h0)); box-shadow: 0 3px 6px rgba(0, 0, 0, .2);
}
/* Columns that may shrink below their content's width (1fr alone would not, and on a phone the
   grid ran past the screen's edge); the preview's parts shrink with them */
.skin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.skin-card, .skin-mock, .sm-mid { min-width: 0; }
.sm-week { overflow: hidden; }
@media (max-width: 760px) {
  .skin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .skin-mock { height: 150px; }
  .skin-card { padding: 8px 8px 10px; }
  .sm-gauge { width: 40px; height: 40px; }
  .sm-mid { gap: 6px; }
  .sm-week i { width: 7px; height: 13px; }
  .skin-check { top: 14px; left: 14px; width: 22px; height: 22px; border-radius: 6px; }
  .skin-check svg { width: 14px; height: 14px; }
}
@media (max-width: 380px) { .skin-dots { display: none; } }

/* ---------- reports header ---------- */
.report-hero + * { margin-top: 24px; }
.report-hero .hero-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.report-art .bar { transform-box: fill-box; transform-origin: 50% 100%; animation: report-bar .9s cubic-bezier(.34, 1.56, .64, 1) both; }
.report-art .b2 { animation-delay: .08s; }
.report-art .b3 { animation-delay: .16s; }
.report-art .b4 { animation-delay: .24s; }
.report-art .trend { stroke-dasharray: 70; animation: report-line 1.2s .3s ease-out both; }
.report-art .sparkle { animation: twinkle 2.6s ease-in-out infinite; }
@keyframes report-bar { from { transform: scaleY(0); } }
@keyframes report-line { from { stroke-dashoffset: 70; } to { stroke-dashoffset: 0; } }
.hero-seg { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2); }
.hero-seg button { color: rgba(255, 255, 255, .85); }
.hero-seg button:hover { color: #fff; }
.hero-seg button[aria-selected="true"] { background: #fff; color: var(--brand); font-weight: 700; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); }
/* each pick as wide as its words in bold, picked or not (a hidden bold copy under them, data-l): the
   bold one never outgrows its place, cut at its sides */
.hero-seg button[data-l] { display: inline-flex; flex-direction: column; align-items: center; }
.hero-seg button[data-l]::after { content: attr(data-l); height: 0; overflow: hidden; visibility: hidden; font-weight: 700; pointer-events: none; }
@media (max-width: 640px) {
  .report-hero .hero-tools { width: 100%; } .report-hero .hero-tools .btn { flex: 1; justify-content: center; }
  /* the period picks across the whole width, like the day's arrows and the print button, each by its
     words (חצי שנה is longer than יום) */
  .report-hero .hero-seg { display: flex; width: 100%; }
  .report-hero .hero-seg button { flex: 1 1 auto; min-width: auto; padding-inline: 6px; white-space: nowrap; }
}
@media (max-width: 360px) { .report-hero .hero-seg button { padding-inline: 3px; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .report-art * { animation: none !important; } }

/* ---------- settings: diary parts as tiles, several in a row ---------- */
.sub-title { margin: 18px 4px 10px; font-size: 14px; font-weight: 700; color: var(--muted); }
.toggle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.toggle-tile {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 18px; cursor: pointer;
  background: var(--surface); box-shadow: var(--shadow); border: 1.5px solid transparent; transition: border-color .2s, background .2s, transform .2s;
}
.toggle-tile:hover { transform: translateY(-2px); }
.toggle-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tt-top { display: flex; align-items: center; justify-content: space-between; }
.tt-ico {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff;
  background: var(--tc); box-shadow: 0 6px 14px color-mix(in srgb, var(--tc) 35%, transparent); transition: filter .25s, opacity .25s, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.tt-name { font-size: 15px; font-weight: 700; line-height: 1.25; }
.toggle-tile:has(input:checked) { border-color: color-mix(in srgb, var(--tc) 45%, transparent); background: color-mix(in srgb, var(--tc) 7%, var(--surface)); }
.toggle-tile:has(input:checked) .tt-ico { transform: scale(1.06); }
.toggle-tile:not(:has(input:checked)) .tt-ico { filter: grayscale(1); opacity: .45; box-shadow: none; }
.toggle-tile:not(:has(input:checked)) .tt-name { color: var(--muted); }
.toggle-tile:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 640px) { .toggle-grid { grid-template-columns: repeat(2, 1fr); } .toggle-tile { padding: 12px; } }

/* ---------- item page: the user's sensitivities, right under the name ---------- */
.sens-alert {
  display: inline-flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; margin: 10px 0 2px; padding: 10px 18px 10px 14px; padding-inline: 12px 20px; cursor: pointer; text-align: start;
  border-radius: 16px; border: 1.5px solid; font: inherit; color: var(--text); transition: transform .2s, box-shadow .2s;
}
.sens-alert:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.sens-alert.warn { --sa: var(--warn); border-color: color-mix(in srgb, var(--warn) 55%, transparent); background: color-mix(in srgb, var(--warn) 11%, var(--surface)); }
.sens-alert.ok { --sa: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); background: color-mix(in srgb, var(--good) 9%, var(--surface)); }
.sens-alert-ico { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--sa); box-shadow: 0 4px 12px color-mix(in srgb, var(--sa) 40%, transparent); }
.sens-alert.warn .sens-alert-ico { animation: sens-pulse 2s ease-in-out infinite; }
@keyframes sens-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warn) 50%, transparent); } 70%, 100% { box-shadow: 0 0 0 10px transparent; } }
.sens-alert-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.sens-alert-text b { font-size: 16px; color: var(--sa); }
.sens-alert-text small { font-size: 12.5px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .sens-alert.warn .sens-alert-ico { animation: none; } }

/* ---------- profile: recommendations at the top once they can be computed ---------- */
.smart-top { margin: 26px 0 30px; }
.smart-top .list-title { margin-top: 0; }

/* ---------- preferences editor ---------- */
.pe-prefs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pe-pref {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 8px 12px; cursor: pointer; text-align: center;
  border-radius: 18px; border: 1.5px solid var(--border); background: var(--surface); transition: border-color .2s, background .2s, transform .2s;
}
.pe-pref:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--pref) 45%, var(--border)); }
.pe-pref input { position: absolute; opacity: 0; pointer-events: none; }
.pref-art {
  position: relative; width: 56px; height: 56px; margin-bottom: 4px; border-radius: 50%; display: grid; place-items: center;
  background: var(--pref); box-shadow: 0 6px 14px color-mix(in srgb, var(--pref) 35%, transparent); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.pref-arrow {
  position: absolute; bottom: -4px; left: -4px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); color: var(--pref); box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
.pe-pref b { font-size: 14.5px; }
.pe-pref small { font-size: 11.5px; line-height: 1.3; color: var(--muted); }
.pref-check {
  position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--pref); color: #fff; font-size: 12px; font-weight: 700; transform: scale(0); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.pe-pref:has(input:checked) { border-color: var(--pref); background: color-mix(in srgb, var(--pref) 9%, var(--surface)); }
.pe-pref:has(input:checked) .pref-check { transform: scale(1); }
.pe-pref:has(input:checked) .pref-art { transform: scale(1.08); }
.pe-pref:has(input:checked) .pref-arrow.down svg { animation: pref-down 1.2s ease-in-out infinite; }
.pe-pref:has(input:checked) .pref-arrow.up svg { animation: pref-up 1.2s ease-in-out infinite; }
@keyframes pref-down { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(2px); } }
@keyframes pref-up { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-2px); } }
.pe-pref:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 480px) { .pe-prefs { grid-template-columns: repeat(2, 1fr); } }

/* ---------- activity dialog ---------- */
.act-stage { --act: var(--accent); display: flex; align-items: center; justify-content: center; gap: 22px; padding: 18px 16px; min-height: 150px; }
.act-hero { position: relative; flex: none; width: 112px; height: 112px; display: grid; place-items: center; }
.act-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--act) 40%, transparent); animation: act-ping 2.4s ease-out infinite; }
.act-ring.r2 { animation-delay: 1.2s; }
@keyframes act-ping { from { transform: scale(.75); opacity: .9; } to { transform: scale(1.25); opacity: 0; } }
.act-big {
  width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--act);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--act) 40%, transparent); animation: pop-in .3s ease-out;
}
.act-big svg { animation: act-move var(--spd, 1s) ease-in-out infinite; }
@keyframes act-move { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-4px) rotate(-3deg); } 75% { transform: translateY(-2px) rotate(3deg); } }
/* walking and running: the legs and arms swing in turn, the body bobs, the ground runs */
.act-big svg.walker { animation: none; }
.walker .leg, .walker .arm { transform-box: view-box; animation: wk-swing var(--stride) ease-in-out infinite alternate; }
.walker .leg { transform-origin: 23px 28px; --swing: 31deg; }
.walker .arm { transform-origin: 25px 17px; --swing: -38deg; }
.walker.run .leg { --swing: 40deg; }
.walker.run .arm { transform-origin: 26.5px 18px; --swing: -46deg; }
.walker .b { animation-delay: calc(var(--stride) * -1); opacity: .62; }
.walker .body { animation: wk-bob var(--stride) ease-in-out infinite; }
.walker .ground { stroke-dasharray: 4 6; opacity: .55; animation: wk-ground calc(var(--stride) * 2) linear infinite; }
@keyframes wk-swing { from { transform: rotate(var(--swing)); } to { transform: rotate(calc(var(--swing) * -1)); } }
@keyframes wk-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
@keyframes wk-ground { to { stroke-dashoffset: 20; } }
/* every other activity moves in its own way */
.act-big svg.stage-art { animation: none; }
.stage-art .sa-spin, .stage-art .sa-stroke, .stage-art .sa-tick, .stage-art .sa-roll, .stage-art .sa-kick, .stage-art .sa-pulse, .stage-art .sa-sway,
.stage-art .sa-arm, .stage-art .sa-breathe, .stage-art .sa-lift, .stage-art .sa-shadow, .stage-art .sa-shadow-d, .stage-art .sa-sweep { transform-box: view-box; }
.stage-art .sa-spin { animation: sa-spin 1s linear infinite; }
@keyframes sa-spin { to { transform: rotate(360deg); } }
.stage-art .sa-ground { stroke-dasharray: 4 6; opacity: .55; animation: sa-ground .5s linear infinite; }
@keyframes sa-ground { to { stroke-dashoffset: 10; } }
.stage-art .sa-wave { animation: sa-wave 1.6s linear infinite; }
.stage-art .sa-wave.b { animation-duration: 1.1s; }
@keyframes sa-wave { to { transform: translateX(-12px); } }
.stage-art .sa-kick { animation: sa-kick .45s ease-in-out infinite alternate; }
.stage-art .sa-kick.b { animation-delay: -.45s; }
@keyframes sa-kick { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
.stage-art .sa-stroke { animation: sa-spin 1.6s linear infinite; }
.stage-art .sa-stroke.b { animation-delay: -.8s; opacity: .6; }
.stage-art .sa-bob { animation: sa-bob .8s ease-in-out infinite; }
@keyframes sa-bob { 50% { transform: translateY(1.2px); } }
.stage-art .sa-pulse { animation: sa-pulse 1.2s ease-out infinite; }
@keyframes sa-pulse { from { transform: scale(1); opacity: .8; } to { transform: scale(1.3); opacity: 0; } }
.stage-art .sa-tick { animation: sa-spin 1.2s steps(12) infinite; }
.stage-art .sa-flash { animation: sa-flash .6s ease-in-out infinite alternate; }
@keyframes sa-flash { from { opacity: .25; } to { opacity: 1; } }
.stage-art .sa-sway { animation: sa-sway 1.2s ease-in-out infinite alternate; }
@keyframes sa-sway { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.stage-art .sa-arm { --swing: -45deg; animation: sa-arm .6s ease-in-out infinite alternate; }
.stage-art .sa-arm.b { --swing: 45deg; animation-delay: -.6s; }
@keyframes sa-arm { from { transform: rotate(0); } to { transform: rotate(var(--swing)); } }
.stage-art .sa-note { opacity: 0; animation: sa-note 2.4s ease-out infinite; }
.stage-art .sa-note.b { animation-delay: 1.2s; }
@keyframes sa-note { 0% { transform: translateY(4px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } }
.stage-art .sa-breathe { animation: sa-breathe 5s ease-in-out infinite; }
@keyframes sa-breathe { 0%, 100% { transform: scale(.86); opacity: .07; } 50% { transform: scale(1.04); opacity: .2; } }
.stage-art .sa-lift { animation: sa-lift 1.4s ease-in-out infinite alternate; }
@keyframes sa-lift { from { transform: rotate(0); } to { transform: rotate(-55deg); } }
.stage-art .sa-bounce { transform-box: view-box; transform-origin: 24px 40px; animation: sa-bounce 1s infinite; }
@keyframes sa-bounce {
  0%, 100% { transform: translateY(0) scale(1.1, .88); animation-timing-function: ease-out; }
  10% { transform: translateY(-2px); animation-timing-function: ease-out; }
  50% { transform: translateY(-15px); animation-timing-function: ease-in; }
  90% { transform: translateY(-2px); animation-timing-function: ease-in; }
}
.stage-art .sa-roll { animation: sa-spin 1.6s linear infinite; }
.stage-art .sa-shadow { animation: sa-shadow 1s infinite; }
@keyframes sa-shadow { 0%, 100% { transform: scale(1.1); opacity: .35; animation-timing-function: ease-out; } 50% { transform: scale(.55); opacity: .12; animation-timing-function: ease-in; } }
.stage-art .sa-dribble { transform-box: view-box; transform-origin: 24px 35px; animation: sa-dribble .9s infinite; }
@keyframes sa-dribble {
  0%, 100% { transform: translateY(-10px); animation-timing-function: ease-in; }
  45% { transform: translateY(9px); animation-timing-function: linear; }
  52% { transform: translateY(9px) scale(1.12, .86); animation-timing-function: ease-out; }
}
.stage-art .sa-shadow-d { animation: sa-shadow-d .9s infinite; }
@keyframes sa-shadow-d { 0%, 100% { transform: scale(.55); opacity: .12; animation-timing-function: ease-in; } 48% { transform: scale(1.1); opacity: .38; animation-timing-function: ease-out; } }
.stage-art .sa-sweep { animation: sa-sweep 1s ease-in-out infinite alternate; }
@keyframes sa-sweep { from { transform: rotate(12deg); } to { transform: rotate(-14deg); } }
.stage-art .sa-dust { animation: sa-dust 1s ease-out infinite; }
@keyframes sa-dust { 0% { transform: translate(4px, 0); opacity: 0; } 30% { opacity: .9; } 100% { transform: translate(-5px, -5px); opacity: 0; } }

.act-burn { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.act-name { font-size: 15px; font-weight: 700; color: var(--act); }
.act-kcal { display: flex; align-items: center; gap: 6px; }
.act-kcal b { font-size: 40px; line-height: 1.05; font-weight: 800; font-variant-numeric: tabular-nums; }
.act-kcal span { font-size: 16px; font-weight: 700; color: var(--muted); }
.act-flame { transform-origin: 50% 90%; animation: act-flame .7s ease-in-out infinite alternate; }
@keyframes act-flame { from { transform: scale(1) rotate(-3deg); } to { transform: scale(1.08, 1.15) rotate(3deg); } }
.act-burn small { font-size: 13px; color: var(--muted); }
.act-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.act-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; cursor: pointer; text-align: center;
  border-radius: 16px; border: 1.5px solid var(--border); background: var(--surface); transition: border-color .2s, background .2s, transform .2s;
}
.act-tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--act) 50%, var(--border)); }
.act-tile input { position: absolute; opacity: 0; pointer-events: none; }
.act-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--act); box-shadow: 0 4px 10px color-mix(in srgb, var(--act) 30%, transparent); }
.act-tile b { font-size: 12.5px; line-height: 1.2; }
.act-tile small { font-size: 10.5px; color: var(--muted); line-height: 1.1; }
.act-tile:has(input:checked) { border-color: var(--act); background: color-mix(in srgb, var(--act) 10%, var(--surface)); box-shadow: 0 6px 16px color-mix(in srgb, var(--act) 22%, transparent); }
.act-tile:has(input:checked) .act-ico { transform: scale(1.08); }
.act-tile:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.act-quick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.act-quick button {
  min-width: 0; padding: 8px 2px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text);
  font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.act-quick button:hover { border-color: var(--accent); }
.act-quick button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
@media (max-width: 520px) {
  .act-grid { grid-template-columns: repeat(3, 1fr); }
  .act-stage { gap: 14px; }
  .act-hero { width: 92px; height: 92px; }
  .act-big { width: 78px; height: 78px; }
  .act-kcal b { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) { .act-stage *, .act-flame { animation: none !important; } }

/* a stepper inside a .field keeps its own look (.field input would restyle the slider) */
input.pe-range { padding: 0; border: 0; border-radius: 999px; background: linear-gradient(to left, var(--accent) var(--fill), var(--track) var(--fill)); }
.sens-alert.unknown { --sa: #d39b12; border-color: color-mix(in srgb, #d39b12 50%, transparent); background: color-mix(in srgb, #d39b12 10%, var(--surface)); }

/* ---------- accessibility basics (IS 5568 / WCAG 2.0 AA) ---------- */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link {
  position: fixed; top: 10px; right: 10px; z-index: 100; padding: 12px 18px; border-radius: 12px; font-weight: 700;
  background: #111; color: #fff; text-decoration: none; transform: translateY(-160%); transition: transform .2s;
}
.skip-link:focus { transform: none; outline: 3px solid #ffbf00; outline-offset: 2px; }
main.view:focus { outline: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* a button focused after a tap (a window putting the focus on its button): no ring until a key is pressed (core.js) */
html.by-pointer :is(button, .btn, [role="button"]):focus-visible { outline: none; }
.dlg-head h2:focus, .a11y-head h2:focus, .jr-info #jiTitle:focus { outline: none; }


/* the legal links at the bottom of every page */
/* The legal pages are linked from the settings' "about" and the accessibility panel, not under every page */
@media print { .a11y-fab { display: none !important; } }

/* ---------- the accessibility button ---------- */
.a11y-fab {
  position: fixed; z-index: 35; width: var(--a11y-size, 54px); height: var(--a11y-size, 54px); border-radius: 50%; border: 3px solid #fff; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: var(--a11y-color, #1f5fd6);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3); transition: transform .2s;
}
.a11y-fab svg { width: 58%; height: 58%; }
.a11y-fab:hover { transform: scale(1.07); }
.a11y-fab:focus-visible { outline: 3px solid #ffbf00; outline-offset: 3px; }
.a11y-fab.bottom-left { left: 16px; bottom: calc(max(8px, calc(var(--sa-bottom) - 12px)) + 88px); }
.a11y-fab.bottom-right { right: 16px; bottom: calc(max(8px, calc(var(--sa-bottom) - 12px)) + 88px); }
.a11y-fab.middle-left { left: 12px; top: 50%; transform: translateY(-50%); }
.a11y-fab.middle-right { right: 12px; top: 50%; transform: translateY(-50%); }
.a11y-fab.middle-left:hover, .a11y-fab.middle-right:hover { transform: translateY(-50%) scale(1.07); }
/* ---------- back to the top (nav.js): opposite the accessibility button, shown after scrolling down ---------- */
.to-top {
  position: fixed; z-index: 34; right: 16px; bottom: calc(max(8px, calc(var(--sa-bottom) - 12px)) + 88px); width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: var(--accent); border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 6px 18px rgba(16, 24, 40, .18);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.8);
  transition: opacity .25s, transform .35s cubic-bezier(.34, 1.4, .6, 1), visibility 0s linear .35s;
}
.to-top { width: var(--tt-size, 48px); height: var(--tt-size, 48px); }
.to-top svg { width: calc(var(--tt-size, 48px) * .5); height: calc(var(--tt-size, 48px) * .5); }
.to-top.show { opacity: var(--tt-alpha, 1); visibility: visible; transform: none; transition-delay: 0s; }
.to-top.show:hover, .to-top.show:focus-visible { opacity: 1; }
.to-top:active { transform: scale(.92); }
.to-top:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.a11y-fab.bottom-right ~ .to-top { right: auto; left: 16px; }
.to-top.tt-right, .a11y-fab.bottom-right ~ .to-top.tt-right { right: 16px; left: auto; }
.to-top.tt-left, .a11y-fab ~ .to-top.tt-left { left: 16px; right: auto; }
/* on the accessibility button's side: above it */
.a11y-fab.bottom-left ~ .to-top.tt-left, .a11y-fab.bottom-right ~ .to-top.tt-right { bottom: calc(max(8px, calc(var(--sa-bottom) - 12px)) + 88px + 70px); }
body[data-page="report-print"] .to-top { display: none; }
@media print { .to-top { display: none !important; } }

/* ---------- connecting the watch (health.js): a moving drawing, then the steps of the connection ---------- */
.hc-dialog .dlg-body { padding-top: 10px; }
.hc-stage { display: grid; place-items: center; margin: 0 -8px 6px; padding: 10px 0 4px; border-radius: 22px;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, #7c5cff 18%, transparent), transparent 60%), radial-gradient(90% 80% at 50% 100%, color-mix(in srgb, #2eb67d 18%, transparent), transparent 70%); }
.hc-scene { width: min(340px, 100%); height: auto; direction: ltr; color: var(--text); overflow: visible; }
.hc-watch { animation: hc-bob 3.2s ease-in-out infinite; }
.hc-heart { transform-box: fill-box; transform-origin: center; animation: hc-beat 1.1s ease-in-out infinite; }
.hc-steps { animation: hc-ring 3.2s cubic-bezier(.5, .1, .3, 1) infinite; }
.hc-dots circle { offset-path: path("M92 86 C140 40, 184 132, 232 86"); offset-rotate: 0deg; animation: hc-flow 2.4s cubic-bezier(.45, 0, .55, 1) infinite; opacity: 0; }
.hc-dots circle:nth-child(2) { animation-delay: .8s; }
.hc-dots circle:nth-child(3) { animation-delay: 1.6s; }
.hc-bar { transform-box: fill-box; transform-origin: right center; animation: hc-grow 2.4s ease-in-out infinite; }
.hc-bar.b2 { animation-delay: .4s; }
.hc-check, .hc-tick { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .5s cubic-bezier(.34, 1.6, .64, 1); }
.hc[data-step="done"] .hc-check, .hc[data-step="done"] .hc-tick { transform: scale(1); }
.hc[data-step="syncing"] .hc-dots circle { animation-duration: 1.1s; }
.hc[data-step="done"] .hc-dots circle, .hc[data-step="failed"] .hc-dots circle { animation: none; }
.hc-float text { font-size: 18px; animation: hc-float 4s ease-in-out infinite; }
.hc-float text:nth-child(2) { animation-delay: 1.3s; }
.hc-float text:nth-child(3) { animation-delay: 2.6s; }
@keyframes hc-bob { 50% { transform: translateY(-6px); } }
@keyframes hc-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1); } 45% { transform: scale(1.12); } }
@keyframes hc-ring { 0% { stroke-dashoffset: 157; } 60%, 100% { stroke-dashoffset: 30; } }
@keyframes hc-flow { 0% { offset-distance: 0%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes hc-grow { 0%, 100% { transform: scaleX(.4); } 50% { transform: scaleX(1); } }
@keyframes hc-float { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(-8px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hc-scene * { animation: none !important; } .hc-dots { display: none; } .hc-steps { stroke-dashoffset: 30; } }
.hc-intro h3, .hc-progress h3 { margin: 6px 0 6px; font-size: 21px; text-align: center; }
.hc-intro > .muted { text-align: center; line-height: 1.6; margin: 0 0 14px; }
.health-row { flex-wrap: wrap; gap: 10px; }
/* The word to type before something that cannot be undone (confirmDialog's typed) */
.confirm-typed { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 280px; margin: 4px auto 0; font-weight: 600; }
.confirm-typed b { color: #e5484d; letter-spacing: 1px; }
.confirm-typed input { width: 100%; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--border); background: var(--surface-2, var(--surface)); color: var(--text); font: 700 18px/1.2 system-ui, sans-serif; letter-spacing: 3px; text-align: center; text-transform: uppercase; transition: border-color .2s, box-shadow .2s; }
.confirm-typed input:focus { outline: none; border-color: #e5484d; box-shadow: 0 0 0 4px color-mix(in srgb, #e5484d 18%, transparent); }
.confirm-typed input.ok { border-color: var(--good); box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 18%, transparent); }
.confirm [data-yes]:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
/* The AI terms (ai-terms.js) and their row in the settings */
.ai-terms-row { margin-top: 8px; }
.cr-badge.ai { background: linear-gradient(135deg, #7c5cff, #c42f66); }
.cr-badge.ai svg { width: 20px; height: 20px; }
.ait { display: flex; flex-direction: column; gap: 16px; }
.ait-hero { padding-top: 20px; }
.ait-badge { width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 18px; display: grid; place-items: center; color: #6a46f0; background: #fff; box-shadow: 0 10px 26px rgba(0, 0, 0, .2); }
.ait-badge svg { width: 30px; height: 30px; }
.ait-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ait-list li { display: flex; gap: 12px; padding: 14px; border-radius: 18px; background: color-mix(in srgb, var(--ac) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ac) 24%, var(--border)); animation: wz-in .4s ease-out both; animation-delay: calc(var(--i) * 60ms); }
.ait-list b { display: block; margin-bottom: 4px; font-size: 15.5px; }
.ait-list p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.ait-ico { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--ac); box-shadow: 0 6px 14px color-mix(in srgb, var(--ac) 35%, transparent); }
.ait-more { margin: 0; text-align: center; font-size: 14px; color: var(--muted); }
@media (max-width: 600px) { .ait-list { grid-template-columns: 1fr; } }
/* The credits page (credits.js) and its row in "אודות" */
.about-credits { margin: 14px 0 16px; text-decoration: none; color: inherit; border-radius: 14px; background: var(--row-alt); }
.cr-badge { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #f5a524, #e5487f); }
.credits-lead { margin: 18px 4px 4px; line-height: 1.7; color: var(--muted); }
.credits-group .list-title { display: flex; align-items: center; gap: 10px; }
.cg-ico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--cg); box-shadow: 0 4px 12px color-mix(in srgb, var(--cg) 35%, transparent); }
.credits-list { list-style: none; margin: 0; padding: 4px 16px; }
.credits-list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.credits-list li:last-child { border-bottom: 0; }
.cr-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.5; }
.cr-text span { font-size: 14px; }
.cr-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 42%; }
.cr-license { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; text-align: center; color: color-mix(in srgb, var(--cg) 70%, var(--text)); background: color-mix(in srgb, var(--cg) 13%, transparent); }
.cr-lics { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
a.cr-lic-link { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
a.cr-lic-link svg { flex: none; opacity: .75; }
.cr-link { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: var(--row-alt); }
.credits-foot { margin: 18px 4px; line-height: 1.6; }
/* What connecting a watch collects, beside the switch and in the connection window */
.health-consent { margin: 8px 4px 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.hc-consent { margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.6; color: var(--muted); background: var(--row-alt); }
.health-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.health-actions .btn { padding: 8px 14px; }
.reset-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid color-mix(in srgb, #e5484d 35%, var(--border)); }
.reset-text { display: flex; flex-direction: column; gap: 4px; flex: 1 1 240px; }
.reset-text .muted { font-size: 13.5px; line-height: 1.55; }
.hc-features { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.hc-features li { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 16px; background: var(--row-alt); }
.hc-features li > span { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: var(--surface); box-shadow: var(--shadow); }
.hc-features b { display: block; font-size: 15px; }
.hc-features small { color: var(--muted); font-size: 13px; line-height: 1.45; }
.hc .actions { justify-content: center; }
.hc-go { min-width: 220px; }
.hc-web { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 10%, transparent); line-height: 1.6; text-align: center; }
.hc-progress { display: none; text-align: center; }
.hc:not([data-step="intro"]) .hc-intro { display: none; }
.hc:not([data-step="intro"]) .hc-progress { display: block; }
.hc-progress .muted { margin: 0 0 16px; line-height: 1.6; }
.hc-counters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.hc-counters div { display: flex; flex-direction: column; gap: 2px; padding: 12px 6px; border-radius: 16px; background: var(--row-alt); }
.hc-counters b { font-size: 24px; font-variant-numeric: tabular-nums; color: var(--accent); }
.hc-counters span { font-size: 12.5px; color: var(--muted); }
.hc[data-step="asking"] .hc-counters, .hc[data-step="failed"] .hc-counters { display: none; }
.hc[data-step="failed"] .hc-title { color: #e5484d; }

/* ---------- the app lock (lock.js): Face ID / Touch ID before the diary shows ---------- */
dialog.app-lock {
  position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; border: 0;
  padding: calc(40px + var(--sa-top, 0px)) 24px calc(40px + var(--sa-bottom)); color: #fff; background: var(--hero);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center;
}
dialog.app-lock::backdrop { background: var(--hero); }
.app-lock .lock-mark { width: 88px; height: 88px; border-radius: 26px; display: grid; place-items: center; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.app-lock h2 { margin: 12px 0 0; font-size: 26px; }
.app-lock p { margin: 0 0 14px; opacity: .85; }
html.locked { overflow: hidden; }

/* While a menu or a window is open, scrolling in it never scrolls the page behind it (nav.js) */
.menu-panel, dialog, .dlg-body, .a11y-body, .suggest, .sn-scroll { overscroll-behavior: contain; }
/* (the page under an open window is held by the window itself, core.js holdPage: the page's own overflow
   hidden while it was open made the iPhone draw the window's content as layers out of step, one card left
   standing over the next as the window scrolled) */
/* Only the viewport stops (html): hidden overflow on body as well made body the sticky header's
   scroll box, and the header went off the screen with the page scrolled down */
@media (pointer: coarse) { html.no-scroll { overflow: hidden; } }
.hero-btn.a11y-top { width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .5); background: var(--a11y-color, rgba(255, 255, 255, .14)); }
.hero-btn.a11y-top svg { width: 22px; height: 22px; }

/* ---------- the accessibility panel ---------- */
.a11y-panel {
  position: fixed; z-index: 70; top: 12px; bottom: 12px; width: min(380px, calc(100vw - 24px)); display: flex; flex-direction: column;
  border-radius: 24px; background: var(--surface); color: var(--text); box-shadow: 0 24px 70px rgba(0, 0, 0, .35); overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--accent) 72%, var(--border)); animation: a11y-in .22s ease-out;
}
.a11y-panel.left { left: 12px; }
.a11y-panel.right { right: 12px; }
@keyframes a11y-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.a11y-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; color: #fff; background: linear-gradient(135deg, #1f5fd6, #123a8a); }
.a11y-head h2 { flex: 1; margin: 0; font-size: 20px; }
.a11y-logo { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .18); }
/* light or dark: a glass track with a sun and a moon, and a knob that carries the one in use */
  background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08)); border: 1px solid rgba(255, 255, 255, .3);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .18); transition: background .3s; }
  background: linear-gradient(145deg, #fff7d6, #ffd36b); color: #e08a00; box-shadow: 0 3px 8px rgba(0, 0, 0, .3), inset 0 1px 0 #fff;
  transition: transform .35s cubic-bezier(.34, 1.4, .6, 1), background .3s, color .3s; }
@media (prefers-reduced-motion: reduce) { .a11y-theme .at-knob, .a11y-theme .at-knob svg { transition: none; } }
/* the close: a round button as in the bell's window, light on the blue head */
.a11y-close { flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: #fff; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: background .2s, transform .15s; }
.a11y-close:hover { background: rgba(255, 255, 255, .28); }
.a11y-close:active { transform: scale(.92); }
.a11y-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.a11y-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.a11y-text { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--row-alt); font-weight: 700; }
.a11y-stepper { display: flex; align-items: center; gap: 10px; }
.a11y-stepper button {
  width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--border); background: var(--surface); color: var(--text);
  font: inherit; font-size: 17px; font-weight: 800; cursor: pointer;
}
.a11y-stepper button:hover:not(:disabled) { border-color: #1f5fd6; color: #1f5fd6; }
.a11y-stepper button:disabled { opacity: .35; cursor: default; }
.a11y-level { display: inline-flex; gap: 4px; }
.a11y-level i { width: 8px; height: 20px; border-radius: 3px; background: var(--border); }
.a11y-level i.on { background: #1f5fd6; }
.a11y-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.a11y-opt {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 92px; padding: 10px 6px; cursor: pointer;
  border-radius: 16px; border: 2px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 700; text-align: center; line-height: 1.25;
  transition: border-color .15s, background .15s;
}
.a11y-opt:hover { border-color: #1f5fd6; }
.a11y-opt svg { color: #1f5fd6; }
.a11y-opt[aria-pressed="true"] { background: #1f5fd6; border-color: #1f5fd6; color: #fff; }
.a11y-opt[aria-pressed="true"] svg { color: #fff; }
/* fifteen of them: smaller tiles and room, so the panel opens whole on a phone, nothing to scroll */
.a11y-body { padding: 12px 14px; gap: 10px; }
.a11y-text { padding: 8px 12px; }
.a11y-grid { gap: 6px; }
.a11y-opt { min-height: 70px; padding: 8px 4px; gap: 4px; font-size: 12.5px; border-radius: 14px; }
.a11y-opt svg { width: 22px; height: 22px; }
/* the reset and the two links on one line */
.a11y-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border); }
.a11y-foot .a11y-reset { flex: none; padding: 8px 14px; font-size: 14px; }
.a11y-link { font-weight: 700; font-size: 14px; white-space: nowrap; }
.a11y-hint { margin: 0; padding: 0 16px 14px; font-size: 12px; color: var(--muted); }
@media (max-width: 520px) {
  .a11y-panel { top: auto; bottom: 0; left: 0 !important; right: 0 !important; width: 100%; max-height: 88vh; border-radius: 24px 24px 0 0; border-bottom: 0; }
}

/* ---------- the adjustments (on <html>, so they reach every page) ---------- */
/* The text's size (a11y.js): every font size grows by --tg, large type by --tg-big; a sheet to print
   keeps its own measures */
@media print { :root { --tg: 1 !important; --tg-big: 1 !important; } }
.paper { --tg: 1; --tg-big: 1; font-size: 16px; }
/* words inside a drawing or a fixed shape (a chart, a ring, a day's glass, a badge, the map of the
   road to the goal, the bars of the header and the bottom) grow only a little, so they stay inside it */
:is(svg, .gauge-center, .donut-center, .ring, .mini-ring, .wring-dial, .now-ring-center, .wz-ring-center, .nm-ring, .nm-strip-ring, .nr-ring-c, .see-ring, .sp-center, .sb-center,
  .wcap-glass, .bell-count, .avatar-btn, .avatar-big, .top-clock, .bottom-nav, .round-btn, .a11y-stepper button, .goal-stepper button, .ins-mark, .ng-tile-top,
  .jr-scene, .jr-num, .jr-lv-num, .jr-face, .jr-mode-ico, .kchart-x, .kchart-grid, .kchart-plot, .lchart, .wchart, .ac-chart, .dh-chart, .wt-chart, .bc-chart) {
  --tg: var(--tg-fit, 1); --tg-big: var(--tg-fit, 1); }
/* (the weekly bars' days under them are as wide as the bars: they keep their size) */
.kchart-x { --tg: 1; --tg-big: 1; }
/* larger text (data-text-large, from 130%): rows that held their words on one line give them room */
/* the meals: three to a row, the rows ending even (two of the last row share it, one spans it) */
html[data-text-large] .meal-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
html[data-text-large] .meal-chip { grid-column: span 2; }
html[data-text-large] .meal-chip:is(:last-child:nth-child(3n+2), :nth-last-child(2):nth-child(3n+1)) { grid-column: span 3; }
html[data-text-large] .meal-chip:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
html[data-text-large] .ng-table { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-text-large] .ng-table > :last-child:nth-child(odd) { grid-column: 1 / -1; }
/* the sport look's cards: the words under the small ring when beside it they would be cut */
html[data-text-large] .hero-sport .sp-card { flex-wrap: wrap; }
html[data-text-large] .hero-sport .sp-card > div { flex: 1 1 6em; }
html[data-text-large] .hero-sport .sp-card small { white-space: normal; }
/* the + sheet's other ways: two to a row, an odd last one across */
html[data-text-large] .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-text-large] .quick-grid.sheet > .quick:last-child { grid-column: auto; }
html[data-text-large] .quick-grid.sheet > .quick:last-child:nth-child(odd) { grid-column: 1 / -1; }
html[data-text-large] .quick span:not(.badge-icon) { white-space: normal; }
html[data-text-large] .goal-macros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-text-large] .goal-macros > :last-child:nth-child(odd) { grid-column: 1 / -1; }
html[data-text-large] .ng-tile-name { white-space: normal; }
/* grown text (data-text-grown, from 110%: the iPhone's own text size a step or two up): the lines that
   kept to one line with "…" break to the next, the switches' buttons to a second row, the bottom bar's
   three places one under the other (a picker cuts its word, "מועדפ…") */
html[data-text-grown] :is(.set-sec-text small, .app-menu-panel .am-item small, .jr-nw-left, .fh-facts span, .ocr-box .btn) {
  white-space: normal; text-overflow: clip; }
html[data-text-grown] .fh-facts span { border-radius: 12px; }
html[data-text-grown] .segmented { flex-wrap: wrap; max-width: 100%; }
html[data-text-grown] .segmented button { flex: 1 1 auto; min-width: auto; }
html[data-text-grown] .bp-slots { grid-template-columns: minmax(0, 1fr); }
html[data-text-grown] .gl-levels { grid-template-columns: minmax(0, 1fr); }

/* (much larger: the choices one to a row) */
html[data-text-large] :is(.gl-levels, .fb-kinds) { grid-template-columns: minmax(0, 1fr); }
/* numbers and names in a box of a fixed share of the row grow half as much, to stay in it */
:is(.dash-moves b, .gm-part b, .jr-stat b, .app-menu-panel .am-item b) { --tg: var(--tg-big, 1); }
/* the accessibility panel scrolls whole (its tiles had a strip of room between the head and the foot) */
html[data-text-large] .a11y-panel { overflow-y: auto; overscroll-behavior: contain; }
html[data-text-large] :is(.a11y-head, .a11y-foot, .a11y-body) { flex: none; }
html[data-text-large] .a11y-body { overflow: visible; }
html[data-text-large] .a11y-foot { flex-wrap: wrap; }
html[data-text-large] .sr-art svg { overflow: visible; }
html[data-a11y~="contrast"] {
  --bg: #000 !important; --surface: #000 !important; --surface-2: #0a0a0a !important; --text: #fff !important; --muted: #f2f2f2 !important;
  --border: #fff !important; --brand: #ffe600 !important; --accent: #ffe600 !important; --accent-text: #000 !important; --track: #444 !important;
  --row-alt: #111 !important; --stage: #000 !important; --stage-glow: #000 !important; --hero: #000 !important; --shadow: 0 0 0 1px #fff !important;
  --art-line: #fff !important; --good: #3dff8f !important; --warn: #ff7a7a !important; --glow: #ffe600 !important;
}
html[data-a11y~="light"] {
  --bg: #fff !important; --surface: #fff !important; --surface-2: #fff !important; --text: #000 !important; --muted: #1a1a1a !important;
  --border: #000 !important; --brand: #003da5 !important; --accent: #003da5 !important; --accent-text: #fff !important; --track: #cfcfcf !important;
  --row-alt: #f2f2f2 !important; --stage: #fff !important; --stage-glow: #fff !important; --hero: #003da5 !important; --shadow: 0 0 0 1px #000 !important;
  --art-line: #000 !important; --good: #006b2e !important; --warn: #b00000 !important; --glow: #fff !important; color-scheme: light;
}
html[data-a11y~="contrast"] a, html[data-a11y~="light"] a { text-decoration: underline !important; }
html[data-a11y~="contrast"] .aurora, html[data-a11y~="light"] .aurora { display: none; }
html[data-a11y~="gray"] { filter: grayscale(1); }
html[data-a11y~="links"] a[href] { text-decoration: underline !important; text-underline-offset: 3px; outline: 2px dashed currentColor; outline-offset: 2px; }
html[data-a11y~="titles"] h1, html[data-a11y~="titles"] h2, html[data-a11y~="titles"] h3 {
  text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; text-decoration-color: #ffbf00;
}
html[data-a11y~="font"] body, html[data-a11y~="font"] body * { font-family: Arial, "Assistant", sans-serif !important; letter-spacing: .01em; }
html[data-a11y~="spacing"] body * { line-height: 1.8 !important; letter-spacing: .05em !important; word-spacing: .14em !important; }
html[data-a11y~="motion"] *, html[data-a11y~="motion"] *::before, html[data-a11y~="motion"] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
html[data-a11y~="cursor"], html[data-a11y~="cursor"] * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 7.5-6.5 2-2.5 7z' fill='%23000' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto !important;
}
html[data-a11y~="focus"] :focus { outline: 4px solid #ffbf00 !important; outline-offset: 3px !important; box-shadow: 0 0 0 8px rgba(0, 0, 0, .55) !important; }
html[data-a11y~="noimg"] img { visibility: hidden !important; }
html[data-a11y~="noimg"] :is(.pic, .thumb) > img { display: none; }
/* bigger buttons: everything pressed at least 48 px high (a fingertip's target) */
html[data-a11y~="big"] :is(.btn, .pill-btn, .chip-btn, .chip, .dk-size, .dk-kind, .sp-chip, .segmented > button, .segmented > a) { min-height: 48px; }
html[data-a11y~="big"] .switch .track, html[data-a11y~="big"] .toggle-row .track { transform: scale(1.15); }
/* no see-through: nothing blurred or half clear behind windows, menus, bars and the header */
html[data-a11y~="solid"] *, html[data-a11y~="solid"] *::before, html[data-a11y~="solid"] *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html[data-a11y~="solid"] :is(.bottom-nav, .menu-panel, .bell-panel, #toast, .a11y-panel) { background: var(--surface) !important; }
html[data-a11y~="solid"] dialog#dialog::backdrop { background: rgba(0, 0, 0, .6); }
.a11y-guide {
  position: fixed; z-index: 69; left: 0; right: 0; top: 0; height: 44px; pointer-events: none;
  background: rgba(255, 230, 0, .16); border-top: 3px solid #ffbf00; border-bottom: 3px solid #ffbf00;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .28);
}

/* ---------- settings: the button's place, colour and size ---------- */
.a11y-set { display: flex; flex-direction: column; gap: 18px; }
/* the adjustments in the settings (settings.js a11yAdjust): a switch each, its drawing and what it does */
.a11y-adjust { margin-bottom: 14px; }
.a11y-switches { display: grid; gap: 6px; }
.a11y-sw { gap: 12px; }
.a11y-sw-ico { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #1f5fd6; background: color-mix(in srgb, #1f5fd6 12%, var(--surface)); }
.a11y-sw .set-label { flex: 1; min-width: 0; }
.a11y-text-set button { min-width: 44px; }
.a11y-set-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.a11y-set-label { font-weight: 700; padding: 0; }
fieldset.a11y-set-row { display: block; }
fieldset.a11y-set-row legend { margin-bottom: 10px; }
fieldset:disabled .corner-grid { opacity: .4; }
.corner-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.corner-pick { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 14px; border: 2px solid var(--border); cursor: pointer; font-size: 13px; font-weight: 600; text-align: center; }
.corner-pick input, .swatch input, .seg-radio input { position: absolute; opacity: 0; pointer-events: none; }
.corner-pick:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.corner-pick:has(input:focus-visible), .swatch:has(input:focus-visible), .seg-radio:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.corner-screen { position: relative; width: 44px; height: 70px; border-radius: 10px; border: 2px solid var(--muted); background: var(--row-alt); }
.corner-screen i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #1f5fd6; }
.corner-screen i.bottom-left { left: 4px; bottom: 12px; }
.corner-screen i.bottom-right { right: 4px; bottom: 12px; }
.corner-screen i.middle-left { left: 4px; top: 27px; }
.corner-screen i.middle-right { right: 4px; top: 27px; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { position: relative; cursor: pointer; }
.swatch span { display: block; width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--border); }
.swatch:has(input:checked) span { box-shadow: 0 0 0 3px var(--text); }
.seg-radio { position: relative; flex: 1; }
.seg-radio span { display: block; padding: 8px 18px; border-radius: 9px; font-weight: 500; color: var(--muted); cursor: pointer; text-align: center; }
.seg-radio:has(input:checked) span { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.a11y-actions { justify-content: flex-start; }
@media (max-width: 520px) { .corner-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- legal pages ---------- */
.legal-ico { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .25); color: #fff; }
.legal-hero + .legal-text { margin-top: 24px; }
.legal-text { line-height: 1.75; font-size: 16px; }
.legal-text h3 { margin: 22px 0 8px; font-size: 19px; color: var(--accent); }
.legal-text h3:first-child { margin-top: 0; }
/* the legal window when its text could not be loaded: what happened, plainly, and a try again */
.legal-err { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 16px 18px; text-align: center; }
.legal-err-ico { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 4px; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.legal-err b { font-size: 16px; }
.legal-err small { font-size: 12.5px; color: var(--muted); }
.legal-err .btn { margin-top: 10px; }
.legal-text p { margin: 0 0 12px; }
.legal-text ul { margin: 0 0 14px; padding-inline-start: 22px; }
.legal-text li { margin-bottom: 6px; }
/* The other legal pages: one row, three equal buttons */
.legal-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.legal-chip { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 6px 11px; border-radius: 18px; text-align: center;
  text-decoration: none; color: var(--text); font-weight: 600; font-size: 13.5px; line-height: 1.25; background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--lc) 22%, var(--border)); box-shadow: 0 6px 16px -12px color-mix(in srgb, var(--lc) 70%, transparent);
  transition: transform .15s, border-color .2s, box-shadow .2s; }
.legal-chip:hover { border-color: var(--lc); box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--lc) 80%, transparent); }
.legal-chip:active { transform: scale(.96); }
.lc-ico { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, color-mix(in srgb, var(--lc) 70%, #fff), var(--lc)); box-shadow: 0 6px 14px -6px var(--lc); }
.lc-name { overflow-wrap: anywhere; }
/* light mode: flat, the coloured glow under the buttons and their icons left out (it read as a smudge
   on the light page); the coloured border stays */
/* (the hover's own rule apart: on a touch screen a rule with :hover in it is taken out whole, touch-hover.js) */
:root[data-theme="light"] :is(.legal-chip, .lc-ico, .cg-ico) { box-shadow: none; }
:root[data-theme="light"] .legal-chip:hover { box-shadow: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) :is(.legal-chip, .lc-ico, .cg-ico) { box-shadow: none; }
  :root:not([data-theme="dark"]) .legal-chip:hover { box-shadow: none; }
}

/* ---------- admin ---------- */
.admin-tabs { margin-top: 16px; display: flex; }
.admin-tabs-row { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.admin-tabs a { flex: 1; padding: 8px 14px; border-radius: 9px; text-align: center; text-decoration: none; font-weight: 600; color: rgba(255, 255, 255, .85); white-space: nowrap; }
.admin-tabs a[aria-current="page"] { background: #fff; color: var(--brand); box-shadow: 0 4px 12px rgba(0, 0, 0, .15); }
.admin-body { margin-top: 10px; }
/* the search over the whole admin (admin-find.js), under the tabs, as wide as they are; what it finds
   in a list under it, over the page (only the list scrolls) */
.adm-find { position: relative; margin-top: 12px; }
.adm-find-box { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border-radius: 14px; background: var(--surface); color: var(--muted);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .14); border: 1.5px solid transparent; }
.adm-find-box:focus-within { border-color: var(--accent); }
.adm-find-box input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: var(--text); font: inherit; font-size: 16px; }
.adm-find-box input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.adm-find-list { position: absolute; z-index: 40; top: calc(100% + 6px); inset-inline: 0; max-height: min(56vh, 460px); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; border-radius: 16px; background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: 0 18px 44px rgba(0, 0, 0, .28); }
.adm-find-list[hidden] { display: none; }
.adm-find-hit { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 11px; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.adm-find-hit.on, .adm-find-hit:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.adm-find-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.adm-find-ico.k-tab { background: color-mix(in srgb, #2563eb 16%, transparent); color: #3b82f6; }
.adm-find-ico.k-action { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #d97706; }
.adm-find-ico.k-section { background: color-mix(in srgb, #8b5cf6 16%, transparent); color: #8b5cf6; }
.adm-find-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adm-find-text b { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.adm-find-text b mark { background: color-mix(in srgb, var(--accent) 26%, transparent); color: inherit; border-radius: 4px; padding: 0 1px; }
.adm-find-text small { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.adm-find-none, .adm-find-more { margin: 0; padding: 12px 10px; color: var(--muted); font-size: 14px; }
.adm-find-more { display: flex; align-items: center; gap: 8px; font-size: 12.5px; border-top: 1px solid var(--border); }
.adm-find-none + .adm-find-more { border-top: 0; }
.adm-find-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); border-top-color: var(--accent); animation: busy-spin .8s linear infinite; }
/* the place found, lit for a moment */
.adm-find-lit { animation: adm-find-lit 2.6s ease-out; border-radius: 12px; }
@keyframes adm-find-lit { 0%, 30% { box-shadow: 0 0 0 3px var(--accent), 0 0 0 9px color-mix(in srgb, var(--accent) 22%, transparent); } 100% { box-shadow: 0 0 0 3px transparent, 0 0 0 9px transparent; } }
@media (prefers-reduced-motion: reduce) { .adm-find-spin { animation-duration: 1.6s; } }
.admin-gate { max-width: 440px; margin: 40px auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.admin-gate .edit-form { width: 100%; text-align: start; }
.gate-ico { width: 80px; height: 80px; border-radius: 24px; display: grid; place-items: center; color: #fff; background: var(--hero); box-shadow: 0 10px 26px color-mix(in srgb, var(--brand) 35%, transparent); }
.admin-gate .error:empty { display: none; }
/* a manager's way in, under the owner's: the app's own sign-in panel (auth.js), signing in only */
.admin-gate-acc { margin-top: 0; }
.admin-gate-acc .gate-account { width: 100%; min-height: 60px; text-align: start; }
.admin-gate-acc .gate-account > .spinner { margin: 12px auto; }
.gate-acc-note { width: 100%; text-align: start; line-height: 1.6; }
.gate-acc-note svg { flex: none; margin-top: 3px; }
.gate-acc-note bdi { font-weight: 700; }
/* a manager in the admin screen: back to the app, and out */
.admin-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
/* the AI providers: three cards, the odd last across the row when they stand two by two */
.ai-provs { container: ai-provs / inline-size; }
@container ai-provs (min-width: 574px) and (max-width: 867.98px) { .ai-provs > .admin-card:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.ai-provs .ai-use { margin: 0 0 12px; white-space: nowrap; }
/* the product databases (admin.js productsPanel): two to a row at most, an odd last across both */
.ps-wrap { container: ps-cards / inline-size; }
.ps-cards { grid-template-columns: minmax(0, 1fr); }
@container ps-cards (min-width: 560px) { .ps-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ps-cards > .ps-card:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@supports not (container-type: inline-size) { @media (min-width: 900px) { .ps-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } }
.ps-card { display: flex; flex-direction: column; }
.ps-card header { gap: 8px; }
.ps-card.engine { border-color: color-mix(in srgb, #16a34a 45%, var(--border)); }
.ps-pill { flex: none; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; color: var(--pc); background: color-mix(in srgb, var(--pc) 15%, transparent); }
.ps-pill.engine, .ps-pill.ok { --pc: #16a34a; }
.ps-pill.warn { --pc: #d97706; }
.ps-pill.bad { --pc: #dc2626; }
.ps-pill.none, .ps-pill.closed { --pc: var(--muted); }
.ps-about { margin: 6px 0 10px; line-height: 1.5; }
.ps-closed { margin: 0 0 10px; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; background: color-mix(in srgb, var(--muted) 10%, transparent); }
.ps-form .field small { font-weight: 500; }
.ps-phone { white-space: nowrap; }
/* the database the site works with: one choice of all, each with why it can't be when it can't */
.ps-choose-box { container: ps-choose / inline-size; margin-bottom: 14px; }
.ps-ch-title, .ps-pv-title { margin: 0 0 10px; font-size: 14.5px; }
.ps-choose { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 8px; }
@container ps-choose (min-width: 560px) { .ps-choose { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ps-choose > .ps-opt:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.ps-opt { display: flex; flex-direction: row; align-items: center; gap: 10px; min-width: 0; padding: 9px 12px; border-radius: 12px; cursor: pointer;
  background: var(--surface-2); border: 1.5px solid var(--border); transition: border-color .2s, background .2s; }
.ps-opt input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: #16a34a; }
.ps-opt > span { display: grid; min-width: 0; }
.ps-opt b { font-size: 14px; }
.ps-opt small { font-size: 12px; color: var(--muted); line-height: 1.4; }
.ps-opt.on { border-color: #16a34a; background: color-mix(in srgb, #16a34a 12%, var(--surface-2)); }
.ps-opt.on small { color: #22c55e; font-weight: 700; }
.ps-opt.off { cursor: default; opacity: .72; }
.ps-opt:not(.off):not(.on):hover { border-color: color-mix(in srgb, #16a34a 50%, var(--border)); }
/* a test's products as the database gives them: its photo, name, Hebrew, photo and calories */
.ps-test { container: ps-test / inline-size; }
.ps-preview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 6px; }
@container ps-test (min-width: 430px) { .ps-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ps-preview > .ps-prod:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.ps-prod { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; margin: 0; padding: 8px; border-radius: 12px; background: var(--surface-2); }
.ps-prod.miss { opacity: .75; }
.ps-img { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 10px; overflow: hidden;
  background: color-mix(in srgb, var(--muted) 12%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='m21 16-5-5-9 9'/%3E%3C/svg%3E") center / 26px no-repeat; }
/* (the photo over its place, white behind it once it comes) */
.ps-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.ps-img img:not([data-in]) { opacity: 0; }
.ps-img i { display: none; padding: 4px; font-style: normal; font-size: 10.5px; line-height: 1.2; text-align: center; color: #64748b; }
.ps-img.none { background-image: none; }
.ps-img.none img { display: none; }
.ps-img.none i { display: block; color: var(--muted); }
.ps-prod figcaption { display: grid; gap: 2px; min-width: 0; }
.ps-prod b { font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.ps-prod small { font-size: 11px; color: var(--muted); }
.ps-prod .ps-flags { gap: 8px; font-size: 11.5px; }
.ps-test { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.ps-verdict { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; }
.ps-rows { display: grid; gap: 6px; margin: 0 0 6px; padding: 0; list-style: none; }
.ps-rows li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; padding: 7px 10px; border-radius: 10px; font-size: 13px; background: var(--surface-2); }
.ps-name { display: grid; min-width: 0; }
.ps-name small { font-size: 11.5px; color: var(--muted); }
.ps-flags { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12.5px; color: var(--muted); }
.ps-mark { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 900; color: #fff; vertical-align: -3px; }
.ps-mark.yes { background: #16a34a; }
.ps-mark.no { background: #dc2626; }
.ps-site { align-self: flex-start; margin-top: auto; }
.ps-card .actions + .ps-test, .ps-card .ps-test + .ps-site, .ps-card .actions + .ps-site, .ps-card .ps-form + .ps-site, .ps-card .ps-closed + .ps-site { margin-top: 12px; }
/* the admin screen's number fields with − and + (admin.js stepNumbers): smaller than the app's, the number's width */
.stepper.adm-step { align-self: center; gap: 3px; padding: 4px; border-radius: 14px; }
.stepper.adm-step button { width: 34px; height: 34px; border-radius: 10px; font-size: 20px; }
.stepper.adm-step > input[type="number"] { width: 64px; height: 34px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; font-size: 17px; font-weight: 700; }
.field .stepper.adm-step { align-self: flex-start; margin-top: 2px; }
/* the ring for typing in the number, not for a press on − or + */
.stepper.adm-step:not(:has(input:focus)) { border-color: var(--border); box-shadow: none; }
/* The MoH foods' pictures: a bar by kind, its legend, and the matching with its progress */
.admin-pics { display: flex; flex-direction: column; gap: 16px; margin-top: 14px; }
.pics-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pics-head h4 { margin: 0 0 4px; font-size: 18px; }
.pics-meta { display: flex; flex-direction: column; gap: 2px; }
.pics-pct { display: flex; flex-direction: column; align-items: center; flex: none; padding: 8px 14px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.pics-pct b { font-size: 24px; line-height: 1.1; }
.pics-pct small { font-size: 12px; font-weight: 600; }
.pics-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--border); }
.pics-bar span { height: 100%; transition: width .6s ease; }
.pk-product { background: #12936a; }
.pk-similar { background: #2ec4a6; }
.pk-wikipedia { background: #4f8ff7; }
.pk-none { background: color-mix(in srgb, var(--muted) 35%, transparent); }
.pics-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pics-legend li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border); }
.pics-legend li:last-child { border-bottom: 0; }
.pics-legend .dot { width: 14px; height: 14px; border-radius: 5px; }
/* (the legend's own names: .pl-text is the page loader's, with its dots running after it) */
.pics-lt, .pics-ln { display: flex; flex-direction: column; gap: 2px; }
.pics-ln { align-items: flex-end; text-align: end; }
.pics-ln b { font-size: 18px; font-variant-numeric: tabular-nums; }
/* how the pictures come, by themselves (no button: the computer's nightly task and the cron) */
.pics-auto { margin: 0; padding: 12px 14px; border-radius: 16px; line-height: 1.6; background: var(--row-alt); }
.admin-card header { display: flex; align-items: center; justify-content: space-between; }
.admin-card h4 { margin: 0; font-size: 18px; }
.admin-card.active { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
.pill-ok { padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.pill-off { padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--muted); background: var(--row-alt); }
/* The admin screen's users tab */
.adm-status header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.adm-status h4 { margin: 0; font-size: 18px; }
.adm-status > p { margin: 0 0 14px; line-height: 1.6; }
.adm-check { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.adm-check li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--muted); }
.adm-check li > span[aria-hidden] { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; border: 2px dashed var(--border); }
.adm-check li.ok { color: var(--text); }
.adm-check li.ok > span[aria-hidden] { color: #fff; border: 0; background: var(--good); }
.adm-check small { flex-basis: 100%; padding-inline-start: 32px; }
.adm-required { align-items: flex-start; }
.adm-required .label small, .adm-provider .switch .label small { display: block; font-weight: 400; }
.adm-provider { display: flex; flex-direction: column; gap: 12px; }
.adm-provider .key-help { margin: 0; }
.adm-policy { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.adm-policy legend { padding: 0; margin-bottom: 8px; font-weight: 700; }
.adm-steps { margin: 10px 0; padding-inline-start: 22px; display: grid; gap: 6px; line-height: 1.6; }
.adm-users { display: flex; flex-direction: column; padding-block: 4px; }
.adm-user { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.adm-user:last-child { border-bottom: 0; }
.adm-user.blocked .adm-avatar, .adm-user.blocked .adm-user-text { opacity: .6; }
.adm-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: 18px; font-weight: 700; color: #fff; background: linear-gradient(160deg, #22b883, #0e7a57); }
.adm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.adm-user-text { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adm-user-text b { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.adm-user-text small { overflow-wrap: anywhere; }
.adm-user-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-user[hidden] { display: none; }
.adm-users-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 30px; }
.adm-users-head .list-title { margin: 0 4px; }
.adm-users-head + .panel, .adm-user-search + .panel { margin-top: 12px; }
.adm-user-search { width: 100%; margin-top: 12px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; }
/* One user's window */
.adm-ud { display: flex; flex-direction: column; gap: 12px; }
/* a user's window on a wide screen: wide, in two columns (what is changed beside what is known), so it
   is not one long scroll; a pair of short fields side by side */
.adm-ud-cols { display: grid; gap: 12px; }
.adm-ud-main, .adm-ud-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.adm-ud-side > .adm-ud-title:first-child { margin-top: 0; }
.adm-ud-pair { display: grid; gap: 12px; }
/* the owner's "קביעת סיסמה עכשיו": the field with its eye inside, on the left (the password is typed left to right) */
.adm-pw { position: relative; display: block; }
.adm-pw input { width: 100%; padding-left: 50px; }
.adm-pw-eye { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: grid; place-items: center;
  border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.adm-pw-eye:hover, .adm-pw-eye[aria-pressed="true"] { color: var(--text); background: var(--surface-2); }
.adm-ud-usage { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; }
@media (min-width: 900px) {
  dialog#dialog.adm-ud-wide { width: min(1120px, calc(100vw - 40px)); }
  .adm-ud-cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 26px; align-items: start; }
  .adm-ud-side { padding-inline-start: 26px; border-inline-start: 1px solid var(--border); }
  .adm-ud-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.adm-ud .switch .label small { display: block; font-weight: 400; }
.adm-ud-head { display: flex; align-items: center; gap: 14px; }
.adm-ud-head .adm-avatar { width: 56px; height: 56px; font-size: 22px; }
.adm-ud-head > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-ud-head small { overflow-wrap: anywhere; }
.adm-ud-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.adm-ud-title { margin: 10px 0 0; font-size: 15px; }
.adm-ud-ways { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-ud-ways p { margin: 0; }
.adm-ud-way { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 12px; padding-inline: 12px 6px; border-radius: 999px; background: var(--row-alt); border: 1px solid var(--border); font-weight: 600; font-size: 14px; }
.adm-ud-way .icon-btn { width: 26px; height: 26px; font-size: 18px; line-height: 1; color: var(--muted); }
.adm-ud-way .icon-btn:hover { color: var(--warn); }
.adm-ud-devices { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.adm-ud-devices li { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 12px; background: var(--row-alt); }
.adm-ud-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
/* a user's dates: three tiles with their drawings (admin.js udDates), one under another when narrow */
.adm-ud-dates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
@media (max-width: 560px) { .adm-ud-dates { grid-template-columns: minmax(0, 1fr); } }
.adm-ud-date { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--c) 7%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--c) 22%, var(--border)); }
.adm-ud-date .ud-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.adm-ud-date .ud-txt { display: grid; gap: 1px; min-width: 0; }
.adm-ud-date small { font-size: 12px; color: var(--muted); }
.adm-ud-date b { font-size: 15.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.adm-ud-date b.none { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.adm-ud-date em { font-style: normal; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.adm-ud-stat { display: flex; flex-direction: column; align-items: center; padding: 10px 6px; border-radius: 12px; background: var(--row-alt); }
.adm-ud-stat b { font-size: 20px; }
.adm-ud-stat small { color: var(--muted); font-size: 12px; }
.adm-ud-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--border); }
.adm-ways { display: flex; gap: 6px; margin-top: 4px; }
.adm-way { padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid var(--border); color: var(--muted); }
/* A chip moves to the next line whole, and breaks inside only when a line is too short for it */
.adm-ui { display: inline-block; max-width: 100%; padding: 0 6px; border-radius: 6px; font-size: .92em; font-weight: 600; line-height: 1.45; background: color-mix(in srgb, var(--text) 9%, transparent); }
.switch input:disabled + .track { opacity: .45; cursor: default; }
.switch:has(input:disabled) { cursor: default; }
/* a phone: the tabs a strip that moves sideways inside the frame, fading out at an edge with more
   beyond it (core.js edgeFades), the fade growing in as it scrolls */
@property --tabs-fs { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --tabs-fe { syntax: "<length>"; inherits: false; initial-value: 0px; }
@media (max-width: 600px) {
  .admin-tabs-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: 9px;
    -webkit-mask-image: linear-gradient(to left, transparent, #000 var(--tabs-fs), #000 calc(100% - var(--tabs-fe)), transparent);
    mask-image: linear-gradient(to left, transparent, #000 var(--tabs-fs), #000 calc(100% - var(--tabs-fe)), transparent);
    transition: --tabs-fs .25s ease, --tabs-fe .25s ease; }
  .admin-tabs-row::-webkit-scrollbar { display: none; }
  .admin-tabs-row.fade-start { --tabs-fs: 44px; }
  .admin-tabs-row.fade-end { --tabs-fe: 44px; }
  .admin-tabs a { flex: none; }
}
@media (max-width: 600px) and (prefers-reduced-motion: reduce) { .admin-tabs-row { transition: none; } }
.adm-user-actions .btn { padding: 6px 12px; font-size: 13.5px; }
.admin-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 14px 0; }
.admin-dl dt { color: var(--muted); }
.admin-dl dd { margin: 0; font-weight: 600; }
.admin-key .actions { margin-top: 10px; }
/* a user's own yes to sending photos (admin.js manageUser): what they decided in the app, and a way to take it back */
.adm-ud-consent { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.adm-ud-consent > span { display: grid; gap: 2px; min-width: 0; flex: 1 1 220px; }
.adm-ud-consent.on > span b { color: #16a34a; }
.admin-consent { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.admin-consent > div { display: flex; flex-direction: column; gap: 4px; }
.admin-warn { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; padding: 12px 14px; border-radius: 14px; color: #8a5a00; background: color-mix(in srgb, #f5b52e 18%, var(--surface)); border: 1px solid color-mix(in srgb, #f5b52e 50%, transparent); font-weight: 600; }
:root[data-theme="dark"] .admin-warn { color: #ffd27a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .admin-warn { color: #ffd27a; } }
.admin-legal { margin-bottom: 16px; }
.admin-legal header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.admin-legal header h3 { margin: 0; }
.legal-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.legal-edit textarea { width: 100%; min-height: 360px; padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; line-height: 1.6; resize: vertical; }
.legal-preview { max-height: 380px; overflow-y: auto; padding: 12px 16px; border-radius: 14px; background: var(--row-alt); font-size: 14px; }
@media (max-width: 760px) { .legal-edit { grid-template-columns: 1fr; } }
html[data-a11y~="contrast"] .bottom-nav { background: #000 !important; border: 2px solid #fff; }
html[data-a11y~="contrast"] .search-box input, html[data-a11y~="contrast"] .btn, html[data-a11y~="contrast"] .tile-btn { border: 2px solid #fff !important; }
html[data-a11y~="light"] .bottom-nav { background: #fff !important; border: 2px solid #000; }
html[data-a11y~="light"] .search-box input, html[data-a11y~="light"] .btn, html[data-a11y~="light"] .tile-btn { border: 2px solid #000 !important; }
.admin-howto p { margin: 0 0 8px; font-size: 14px; }
.admin-howto code, .admin-codes code { padding: 1px 6px; border-radius: 6px; background: var(--row-alt); border: 1px solid var(--border); font-size: 13px; }
.admin-codes { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--muted); }
.admin-howto { margin-bottom: 16px; }
.admin-date { grid-column: 1 / -1; }

/* coloured labels stay readable (4.5:1): their colour mixed toward the text colour of the mode */
.fav-kind { color: color-mix(in srgb, var(--kind) 62%, var(--text)); }
.next-tile .next-chip { color: color-mix(in srgb, var(--meal) 62%, var(--text)); }
.act-name { color: color-mix(in srgb, var(--act) 62%, var(--text)); }
.sex-card b { color: color-mix(in srgb, var(--sex) 62%, var(--text)); }
.sens-alert.unknown .sens-alert-text b { color: color-mix(in srgb, #d39b12 55%, var(--text)); }
.sens-alert-text small { color: var(--muted); }
/* white buttons on the coloured header: a dark shade of the brand, readable in dark mode too */
.profile-hero .btn, .hero-seg button[aria-selected="true"], .admin-tabs a[aria-current="page"] { color: color-mix(in srgb, var(--brand) 55%, #000); }
/* the number inside a stepper: the frame around it shows the focus, not the field itself */
.field .pe-num input:focus, .field .pe-num input:focus-visible, .pe-num input:focus-visible { outline: none; border: 0; box-shadow: none; }

/* favourites: the calories on one line, then the two actions side by side, nothing cut */
.fav-foot { flex-direction: column; align-items: stretch; gap: 10px; }
.fav-kcal { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.fav-kcal span { white-space: normal; overflow: visible; }
.fav-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fav-actions .fav-add { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
.fav-remove {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 14px; cursor: pointer;
  border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text);
  font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; text-decoration: none; transition: border-color .2s, color .2s, background .2s;
}
.fav-remove:hover { border-color: var(--warn); color: var(--warn); background: color-mix(in srgb, var(--warn) 7%, var(--surface)); }
a.fav-remove:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }

/* ---------- reports: right now ---------- */
.now-panel { margin-top: 24px; }
.now-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.now-head h3 { margin: 0; }
.now-grid { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 26px; }
.now-ring { position: relative; width: 200px; height: 200px; flex: none; }
.now-ring svg { width: 100%; height: 100%; }
.now-ring .ring-track { fill: none; stroke: var(--track); stroke-width: 12; }
.now-ring .ring-arc { fill: none; stroke-width: 12; stroke-linecap: butt; animation: now-arc 1.1s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes now-arc { from { stroke-dasharray: 0 400; } }
.now-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.15; }
.now-ring-center b { font-size: 38px; font-weight: 800; font-variant-numeric: tabular-nums; }
.now-ring-center span { font-size: 15px; font-weight: 700; color: var(--muted); }
.now-ring-center small { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.now-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.now-macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 12px; }
/* the second row: sugar and salt (at most a day) and fiber (at least), under a thin line */
.now-macros .m-sugars { --c: #e8679a; --ink: #c8457a; } .now-macros .m-salt { --c: #8197b8; --ink: #5f7697; } .now-macros .m-fiber { --c: #3fae72; --ink: #23874f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .now-macros :is(.m-sugars, .m-salt, .m-fiber) { --ink: var(--c); } }
:root[data-theme="dark"] .now-macros :is(.m-sugars, .m-salt, .m-fiber) { --ink: var(--c); }
.now-macros .m-sugars { position: relative; }
.now-macros .m-sugars::before { content: ""; position: absolute; inset-inline: 0 calc(-200% - 24px); top: -8px; border-top: 1px solid var(--border); }
.now-macro span i { margin-inline-start: 5px; padding: 0 6px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 600; color: var(--muted); background: var(--row-alt); }
.now-macro.over { --c: var(--warn); }
.now-macro.over b { color: var(--warn); }
.now-macro span { font-size: 13.5px; font-weight: 700; color: var(--ink, var(--c)); }
.now-macro b { display: block; font-size: 20px; }
.now-macro b small { font-size: 12.5px; font-weight: 500; color: var(--muted); }
/* the amount and its goal in one line ("192 / 254 ג׳", never its unit alone under it): smaller in a narrow tile */
.now-macro { min-width: 0; container-type: inline-size; }
.now-macro b { white-space: nowrap; font-size: min(20px, 19cqi); }
.now-macro b small { font-size: min(12.5px, 11.5cqi); }
.now-bar { height: 7px; margin-top: 6px; border-radius: 999px; background: var(--track); overflow: hidden; }
.now-bar div { height: 100%; border-radius: 999px; background: var(--c); transition: width .8s ease; }
.now-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.now-stat { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 14px; background: var(--row-alt); min-width: 0; }
.now-stat span { font-size: 12.5px; color: var(--muted); }
.now-stat b { font-size: 18px; }
.now-stat small { font-size: 12px; color: var(--muted); }
.now-tips { margin-top: 16px; }
.insights li.info { background: color-mix(in srgb, var(--accent) 8%, transparent); }
@media (max-width: 760px) {
  .now-grid { grid-template-columns: 1fr; justify-items: center; gap: 18px; }
  .now-side { width: 100%; }
  .now-stats { grid-template-columns: repeat(2, 1fr); }
  .now-ring { width: 180px; height: 180px; }
}
@media (prefers-reduced-motion: reduce) { .now-ring .ring-arc { animation: none; } }

/* ---------- welcome wizard ---------- */
html.wz-open, html.wz-open body { overflow: hidden; }
.wizard {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 18px;
  background: var(--hero); animation: wz-in .4s ease-out;
}
@keyframes wz-in { from { opacity: 0; } }
.wz-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.wz-bubble {
  position: absolute; bottom: -80px; left: calc(var(--i) * 10% + 2%); width: calc(30px + var(--i) * 6px); aspect-ratio: 1; border-radius: 50%;
  background: rgba(255, 255, 255, .08); animation: wz-rise calc(14s + var(--i) * 1.3s) linear infinite; animation-delay: calc(var(--i) * -2.3s);
}
@keyframes wz-rise { to { transform: translateY(-120vh); } }
.wz-card {
  position: relative; display: flex; flex-direction: column; width: min(620px, 100%); max-height: calc(100dvh - 36px);
  border-radius: 28px; background: var(--surface); color: var(--text); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); overflow: hidden;
}
.wizard[data-step="welcome"] .wz-card { background: transparent; box-shadow: none; color: #fff; }
.wz-steps { display: flex; gap: 6px; margin: 0; padding: 16px 20px 0; list-style: none; }
.wizard[data-step="welcome"] .wz-steps { display: none; }
.wz-steps li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; font-size: 12px; color: var(--muted); }
.wz-steps li::before { content: ""; position: absolute; top: 14px; left: 50%; width: 100%; height: 3px; background: var(--track); z-index: 0; }
.wz-steps li:first-child::before { display: none; }
.wz-steps li.done::before, .wz-steps li.on::before { background: var(--accent); }
.wz-dot {
  position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px;
  background: var(--surface); border: 3px solid var(--track); color: var(--muted); transition: all .3s;
}
.wz-steps li.on .wz-dot { border-color: var(--accent); color: var(--accent); transform: scale(1.12); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent); }
.wz-steps li.done .wz-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.wz-steps li.on .wz-label { color: var(--text); font-weight: 700; }
.wz-body { flex: 1; overflow-y: auto; padding: 14px 24px 8px; }
.wz-step { display: flex; flex-direction: column; gap: 14px; animation: wz-slide .45s cubic-bezier(.22, 1, .36, 1); }
@keyframes wz-slide { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * -40px)); } }
.wz-step h2 { margin: 0; text-align: center; font-size: 24px; }
.wz-step h2:focus { outline: none; }
.wz-sub { margin: -8px 0 0; text-align: center; color: var(--muted); font-size: 14.5px; }
.wz-art { display: grid; place-items: center; animation: wz-float 4s ease-in-out infinite; }
@keyframes wz-float { 50% { transform: translateY(-5px); } }
.wz-field { display: flex; flex-direction: column; gap: 8px; }
.wz-label-big { font-weight: 700; font-size: 15px; }
.wz-age { font-style: normal; color: var(--accent); }
.wz-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wz-pair .pe-stepper { gap: 8px; }
.wz-pair .pe-step { width: 42px; height: 42px; font-size: 22px; border-radius: 12px; }
.wz-pair .pe-num { padding: 4px 10px; }
.wz-pair .pe-num input { font-size: 26px; width: 4.2ch; }
.wz-step .sex-art { max-width: 84px; }
.wz-step .sex-card { padding: 10px 6px 8px; }
.wz-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px 18px; border-top: 1px solid var(--border); }
.wizard[data-step="welcome"] .wz-foot { justify-content: center; border: 0; }
.wz-foot .btn { min-width: 120px; justify-content: center; font-size: 16px; padding: 12px 22px; }
.wz-foot .wz-back[hidden] { display: none; }
.wz-count { font-size: 13px; color: var(--muted); }
.wizard[data-step="welcome"] .wz-next { min-width: 220px; padding: 15px 30px; font-size: 18px; background: #fff; color: color-mix(in srgb, var(--brand) 60%, #000); border-color: #fff; box-shadow: 0 10px 26px rgba(0, 0, 0, .25); animation: wz-pulse 2.4s ease-in-out infinite; }
@keyframes wz-pulse { 50% { transform: scale(1.04); } }

/* welcome */
.wz-welcome { align-items: center; text-align: center; color: #fff; }
.wz-hero-art { animation: wz-pop .7s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes wz-pop { from { transform: scale(.5); opacity: 0; } }
.wz-orbit { transform-origin: 110px 110px; animation: wz-spin 18s linear infinite; }
.wz-fruit { animation: wz-spin 18s linear infinite reverse; }
@keyframes wz-spin { to { transform: rotate(360deg); } }
.wz-logo { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .25)); }
.wz-flame { transform-origin: 110px 130px; animation: wz-flicker 1.6s ease-in-out infinite alternate; }
.wz-mark { transform-origin: 110px 110px; animation: wz-mark 3.2s ease-in-out infinite; }
@keyframes wz-mark { 50% { transform: scale(1.06) rotate(-3deg); } }
@keyframes wz-flicker { to { transform: scale(1.05, 1.08); } }
.wz-spark path { transform-box: fill-box; transform-origin: center; animation: pe-twinkle 2.2s ease-in-out infinite; }
.wz-spark path:nth-child(2) { animation-delay: -.7s; }
.wz-spark path:nth-child(3) { animation-delay: -1.4s; }
.wz-big { font-size: clamp(28px, 6vw, 40px) !important; line-height: 1.15; color: #fff; }
.wz-lead { margin: -4px 0 4px; font-size: 17px; opacity: .92; max-width: 440px; }
.wz-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; width: 100%; }
.wz-features li {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; border-radius: 20px; text-align: center;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); animation: wz-pop .6s cubic-bezier(.34, 1.56, .64, 1) both;
}
.wz-features li:nth-child(2) { animation-delay: .1s; }
.wz-features li:nth-child(3) { animation-delay: .2s; }
.wz-features span { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: #fff; color: var(--f); }
.wz-features b { font-size: 15px; }
.wz-features small { font-size: 12.5px; opacity: .88; line-height: 1.35; }

/* goal */
.wz-diff { margin: -4px 0 0; text-align: center; font-size: 18px; color: var(--accent); }
.wz-paces { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.wz-pace, .wz-chip { position: relative; cursor: pointer; }
.wz-pace input, .wz-chip input, .wz-tag input, .wz-terms input { position: absolute; opacity: 0; pointer-events: none; }
.wz-pace span, .wz-chip span {
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 10px 8px; border-radius: 14px; text-align: center;
  border: 1.5px solid var(--border); background: var(--surface); transition: border-color .2s, background .2s, transform .2s;
}
.wz-pace small, .wz-chip small { font-size: 12px; color: var(--muted); line-height: 1.3; }
.wz-pace:has(input:checked) span, .wz-chip:has(input:checked) span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); transform: translateY(-2px); }
.wz-pace:has(input:focus-visible) span, .wz-chip:has(input:focus-visible) span, .wz-tag:has(input:focus-visible) span, .wz-terms:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
/* two a row, the last one alone across the row (grids end even); three a row on a wide screen below */
.wz-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.wz-chips > * { grid-column: span 3; }
.wz-chips > :last-child:nth-child(odd) { grid-column: 1 / -1; }

/* settings */
.wz-terms {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 16px; cursor: pointer; line-height: 1.5;
  border: 2px dashed color-mix(in srgb, var(--warn) 50%, var(--border)); background: color-mix(in srgb, var(--warn) 5%, var(--surface));
}
.wz-terms::before {
  content: ""; flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 7px; border: 2px solid var(--muted); background: var(--surface) no-repeat center / 16px;
}
.wz-terms.ok { border-style: solid; border-color: var(--good); background: color-mix(in srgb, var(--good) 8%, var(--surface)); }
.wz-terms.ok::before { border-color: var(--good); background-color: var(--good);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.wz-terms em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--warn); }
.wz-terms.ok em { color: var(--good); }
.wz-toggle { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--row-alt); cursor: pointer; }
.wz-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wz-toggle-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: #f5a524; flex: none; }
.wz-toggle-text { flex: 1; display: flex; flex-direction: column; }
.wz-toggle-text small { color: var(--muted); font-size: 12.5px; }
.wz-skins { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.wz-skins button {
  position: relative; height: 54px; border-radius: 14px; border: 3px solid transparent; cursor: pointer; color: #fff; font: inherit; font-size: 12px; font-weight: 700;
  display: flex; align-items: flex-end; justify-content: center; padding: 4px; box-shadow: 0 4px 10px rgba(0, 0, 0, .15); transition: transform .2s;
}
.wz-skins button:hover { transform: translateY(-2px); }
.wz-skins button[aria-checked="true"] { border-color: var(--text); transform: scale(1.06); }
.wz-allergy { display: flex; flex-wrap: wrap; gap: 8px; }
.wz-tag { position: relative; cursor: pointer; }
.wz-tag span { display: inline-block; padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--border); font-size: 14px; font-weight: 600; transition: all .2s; }
.wz-tag:has(input:checked) span { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--surface)); color: color-mix(in srgb, var(--warn) 70%, var(--text)); }

/* summary */
.wz-done-title { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--good); }
.wz-done-title svg { width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: var(--good); color: #fff; animation: wz-pop .6s cubic-bezier(.34, 1.56, .64, 1); }
.wz-sum { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 22px; }
.wz-ring { position: relative; width: 190px; height: 190px; }
.wz-ring svg { width: 100%; height: 100%; }
.wz-arc { fill: none; stroke-width: 12; animation: wz-arc 1.2s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes wz-arc { from { stroke-dasharray: 0 400; } }
.wz-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; text-align: center; }
.wz-ring-center small { font-size: 12px; color: var(--muted); }
.wz-ring-center b { font-size: 40px; font-weight: 800; color: var(--accent); }
.wz-ring-center span { font-size: 14px; font-weight: 700; color: var(--muted); }
.wz-macros { display: flex; flex-direction: column; gap: 10px; }
.wz-macro { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--row-alt); animation: wz-slide .5s both; }
.wz-macro:nth-child(2) { animation-delay: .1s; }
.wz-macro:nth-child(3) { animation-delay: .2s; }
.wz-macro i { width: 12px; height: 12px; border-radius: 4px; background: var(--c); }
.wz-macro span { font-weight: 700; color: var(--ink, var(--c)); }
.wz-macro b { font-size: 17px; }
.wz-macro small { font-size: 13px; color: var(--muted); min-width: 34px; text-align: left; }
.wz-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wz-facts span { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 12px; background: var(--row-alt); }
.wz-facts small { font-size: 12px; color: var(--muted); }
.wz-facts b { font-size: 15px; }
.wz-tips { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.wz-tips li { position: relative; padding: 8px 12px 8px 12px; padding-inline-start: 30px; border-radius: 12px; font-size: 14px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.wz-tips li::before { content: "✦"; position: absolute; inset-inline-start: 11px; color: var(--accent); }
.wz-note { margin: 0; font-size: 12px; color: var(--muted); text-align: center; }

@media (max-width: 560px) {
  .wizard { padding: var(--sa-top) var(--sa-right) var(--sa-bottom) var(--sa-left); }
  .wz-card { max-height: calc(100dvh - var(--sa-top) - var(--sa-bottom)); height: calc(100dvh - var(--sa-top) - var(--sa-bottom)); border-radius: 0; }
  .wz-body { padding: 12px 16px 8px; }
  .wz-features { grid-template-columns: 1fr; }
  .wz-features li { flex-direction: row; text-align: start; padding: 12px; }
  .wz-features li b { min-width: 110px; }
  .wz-pair { grid-template-columns: 1fr; }
  .wz-skins { grid-template-columns: repeat(3, 1fr); }
  .wz-sum { grid-template-columns: 1fr; justify-items: center; }
  .wz-ring { width: 160px; height: 160px; }
  .wz-macros { width: 100%; }
  .wz-facts { grid-template-columns: repeat(2, 1fr); }
  .wz-steps .wz-label { display: none; }
  .wz-foot .btn { min-width: 0; flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .wizard *, .wizard { animation: none !important; } }

.welcome-card {
  display: flex; align-items: center; gap: 14px; margin-bottom: 10px; padding: 14px 16px; border-radius: 20px; text-decoration: none; color: #fff;
  background: var(--hero); box-shadow: var(--shadow);
}
.welcome-card > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.welcome-card small { opacity: .88; }
.welcome-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .18); flex: none; }

.key-help { margin: 4px 0 12px; padding: 10px 14px; border-radius: 14px; background: var(--row-alt); }
.key-help summary { cursor: pointer; font-weight: 700; color: var(--accent); }
.key-help ol { margin: 10px 0 6px; padding-inline-start: 22px; line-height: 1.6; }
.key-help .note { margin: 0 0 10px; }
.key-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; max-width: 100%; white-space: nowrap; }
.key-link bdi { white-space: nowrap; }
.key-link svg { flex: none; }

/* ---------- settings search ---------- */
.set-search {
  position: sticky; top: calc(70px + var(--sa-top)); z-index: 5; display: flex; align-items: center; gap: 10px; height: 52px; margin: 0 0 14px; padding: 0 16px;
  border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); border: 1.5px solid var(--border); color: var(--muted);
}
.set-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), var(--shadow); }
.set-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--text); font: inherit; font-size: 16px; }
.set-search input:focus-visible { outline: none; }
.set-search-count { font-size: 12.5px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.set-none { margin: 20px 0; text-align: center; color: var(--muted); }
.set-hit { box-shadow: 0 0 0 2px var(--accent), var(--shadow) !important; }
@media (max-width: 640px) { .set-search { top: calc(68px + var(--sa-top)); } }

/* wizard: wide, two columns (intro beside the fields) so a step fits without scrolling */
.wz-card { width: min(1000px, 100%); }
.wizard[data-step="welcome"] .wz-card { width: min(780px, 100%); }
.wz-intro, .wz-fields { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.wz-intro { align-items: center; text-align: center; }
.wz-sub b { color: var(--text); }
.wz-body { scrollbar-width: thin; }
@media (min-width: 820px) {
  .wz-step:not(.wz-welcome) { display: grid; grid-template-columns: 250px 1fr; align-items: stretch; gap: 26px; }
  .wz-intro {
    justify-content: center; padding: 22px 16px; border-radius: 22px;
    background: radial-gradient(120% 90% at 50% 10%, var(--stage-glow) 0%, var(--stage) 80%);
  }
  .wz-intro .wz-sub { margin: 0; line-height: 1.6; }
  .wz-fields { justify-content: center; gap: 12px; }
  .wz-body { padding: 16px 26px 12px; }
  .wz-step .sex-art { max-width: 64px; }
  .wz-step .sex-card { padding: 8px 6px 6px; gap: 2px; }
  .wz-step .sex-card b { font-size: 15px; }
  .wz-step .pick-btn { height: 46px; }
  .wz-step .pe-range { margin: -4px 0 -2px; }
  /* three a row: a last row of two shares it, a last one alone takes it whole */
  .wz-chips > * { grid-column: span 2; }
  .wz-chips > :nth-last-child(2):nth-child(3n+1), .wz-chips > :last-child:nth-child(3n+2) { grid-column: span 3; }
  .wz-chips > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .wz-chip span, .wz-pace span { padding: 8px 6px; }
  .wz-summary .wz-intro .wz-ring { width: 200px; height: 200px; }
  .wz-summary .wz-macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .wz-summary .wz-macro { grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 2px 8px; }
  .wz-summary .wz-macro b { grid-column: 1 / -1; font-size: 20px; }
  .wz-summary .wz-macro small { grid-column: 1 / -1; text-align: start; }
}

/* ---------- a legal page in a window ---------- */
dialog#dialog.legal-dlg { width: min(760px, calc(100vw - 24px)); max-height: min(80vh, 860px); }
.legal-dlg .dlg-head { background: var(--hero); color: #fff; border-bottom: 0; padding: 14px 18px 18px; }
.legal-dlg .dlg-head h2 { display: flex; align-items: center; gap: 12px; font-size: 21px; }
.legal-dlg .dlg-head .icon-btn { color: #fff; }
.legal-dlg .dlg-head .icon-btn:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.legal-dlg-ico { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .25); flex: none; }
.legal-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .18); }
.legal-progress i { display: block; height: 100%; width: 0; background: #fff; border-radius: 0 4px 4px 0; transition: width .12s linear; }
.legal-dlg .dlg-body { padding: 22px 26px 0; }
.legal-dlg .legal-text { font-size: 15.5px; animation: wz-in .3s ease-out; }
.legal-dlg-foot {
  position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  margin: 18px -26px 0; padding: 14px 26px 22px; background: var(--surface); border-top: 1px solid var(--border);
  box-shadow: 0 -10px 20px color-mix(in srgb, var(--surface) 85%, transparent);
}
.legal-dlg-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.legal-dlg-foot .btn { justify-content: center; }
@media (max-width: 600px) {
  .legal-dlg .dlg-body { padding: 16px 16px 0; }
  .legal-dlg-foot { margin: 14px -16px 0; padding: 12px 16px; }
  .legal-dlg-actions { width: 100%; }
  .legal-dlg-actions .btn { flex: 1; }
  dialog#dialog.legal-dlg { width: 100%; max-width: 100%; max-height: 82dvh; }
  .legal-dlg-foot { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}

/* ---------- wizard on the coloured background (like the welcome screen), glass instead of a card ---------- */
.wizard {
  --text: #fff; --muted: rgba(255, 255, 255, .86); --surface: rgba(255, 255, 255, .1); --surface-2: rgba(255, 255, 255, .07);
  --border: rgba(255, 255, 255, .3); --row-alt: rgba(255, 255, 255, .1); --track: rgba(255, 255, 255, .22);
  --stage: rgba(255, 255, 255, .05); --stage-glow: rgba(255, 255, 255, .14); --accent: #fff;
  --accent-text: color-mix(in srgb, var(--brand) 50%, #000); --art-line: #fff; --art-shadow: rgba(0, 0, 0, .15); --shadow: none;
  --protein: #ffc56b; --carbs: #6ff0e2; --fat: #d6b6ff; --protein-ink: #ffc56b; --carbs-ink: #6ff0e2; --fat-ink: #d6b6ff;
  --good: #9ff0c8; --warn: #ffb4ab; color: #fff;
}
.wz-card, .wizard[data-step] .wz-card { background: transparent; box-shadow: none; color: var(--text); overflow: visible; }
.wz-foot { border-top-color: rgba(255, 255, 255, .2); }
.wz-intro { border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.wizard .wz-dot { background: var(--brand); border-color: rgba(255, 255, 255, .45); color: #fff; }
.wizard .wz-steps li.on .wz-dot { background: var(--brand); border-color: #fff; color: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .2); }
.wizard .wz-steps li.done .wz-dot { background: #fff; border-color: #fff; color: var(--accent-text); }
.wizard .wz-steps li .wz-label { color: rgba(255, 255, 255, .78); }
.wizard .wz-steps li.on .wz-label { color: #fff; }
.wizard .pick-pop { background: rgba(0, 0, 0, .28); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-color: rgba(255, 255, 255, .25); }
.wizard .pick-grid .pick-opt.sel { background: #fff; color: var(--accent-text); }
.wizard .pick-grid .pick-opt:hover { color: #fff; background: rgba(255, 255, 255, .2); }
.wizard .segmented button[aria-checked="true"] { background: #fff; color: var(--accent-text); font-weight: 700; }
.wizard .wz-terms { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .08); }
.wizard .wz-terms em { color: #ffd2cc; }
.wizard .wz-terms a { color: #fff; font-weight: 700; }
.wizard .wz-terms.ok { border-color: var(--good); background: rgba(159, 240, 200, .14); }
.wizard .wz-terms.ok::before { border-color: #fff; background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a5a42' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.wizard .wz-done-title { color: #fff; }
.wizard .wz-done-title svg { background: #fff; color: var(--accent-text); }
.wizard .pe-num, .wizard .pick-btn, .wizard .sex-card, .wizard .wz-chip span, .wizard .wz-pace span { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.wizard .wz-foot .btn.primary { box-shadow: 0 10px 24px rgba(0, 0, 0, .22); }
.wizard .wz-foot .btn.ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.wizard .toggle-row:hover .track, .wizard .wz-toggle .track { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25); }
/* more room between a number, its slider and the line under it */
.pe-range { margin: 10px 0 4px; }
.wz-step .pe-range { margin: 12px 0 4px; }
.wz-diff { margin: 2px 0 0; }
.pe-hint, .pe-delta { margin-top: 6px; }
.wz-pair { gap: 32px; }

/* wizard: a missing answer, and step dots that can be clicked */
.wz-missing { border-radius: 18px; animation: pe-shake .4s; outline: 2px solid #ffb4ab; outline-offset: 6px; transition: outline-color .4s; }
.wz-terms.wz-missing { outline-offset: 3px; }
button.wz-dot { cursor: pointer; padding: 0; font: inherit; font-weight: 800; font-size: 14px; }
button.wz-dot:hover { transform: scale(1.1); }
.wizard[data-step] ~ #toast, html.wz-open #toast { bottom: 28px; }
.wz-intro { border-radius: 22px; padding: 14px 12px; }

/* wizard: the ♀ ♂ ? symbols on a white disc, so their colours stay strong on the coloured background */
.wizard .sex-halo { fill: rgba(255, 255, 255, .9); }
.wizard .sex-card:has(input:checked) .sex-halo { fill: #fff; }
.wizard .sex-pick:has(input:checked) .sex-card:not(:has(input:checked)) .sex-sym { opacity: .8; }
.wizard .sex-pick:has(input:checked) .sex-card:not(:has(input:checked)) .sex-halo { fill: rgba(255, 255, 255, .7); }
.wizard .sex-sym { stroke-width: 10; }
.wizard .sex-card b { color: #fff; }
.wizard .sex-card:has(input:checked) { background: rgba(255, 255, 255, .18); border-color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sex) 70%, transparent), 0 10px 26px rgba(0, 0, 0, .2); }
.wizard .sex-check { border: 2px solid #fff; }

/* wizard drawings in motion: the flag waves, a hiker climbs the trail, the bell rings, the check draws itself */
.wz-trail { animation: wz-march 3.6s linear infinite; }
@keyframes wz-march { to { stroke-dashoffset: -8; } }
.wz-hiker circle:first-child { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); }
.wz-bell { transform-box: fill-box; transform-origin: 50% 0; animation: wz-ring 2.6s ease-in-out infinite; }
@keyframes wz-ring { 0%, 50%, 100% { transform: rotate(0); } 6%, 18%, 30% { transform: rotate(16deg); } 12%, 24%, 36% { transform: rotate(-16deg); } 42% { transform: rotate(5deg); } }
.wz-clapper { transform-box: fill-box; transform-origin: 50% 0; animation: wz-clap 2.6s ease-in-out infinite; }
@keyframes wz-clap { 0%, 50%, 100% { transform: translateX(0); } 6%, 18%, 30% { transform: translateX(-2px); } 12%, 24%, 36% { transform: translateX(2px); } }
.wz-waves path { opacity: 0; animation: wz-waves 2.6s ease-out infinite; }
@keyframes wz-waves { 0%, 4% { opacity: 0; } 12%, 32% { opacity: 1; } 45%, 100% { opacity: 0; } }
.wz-check { stroke-dasharray: 60; stroke-dashoffset: 60; animation: wz-draw .7s .35s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes wz-draw { to { stroke-dashoffset: 0; } }
.wz-lines { stroke-dasharray: 30; animation: wz-lines 2.8s ease-in-out infinite alternate; }
@keyframes wz-lines { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
.wizard .sex-art { max-width: 76px; }
@media (prefers-reduced-motion: reduce) { .wz-hiker { display: none; } .wz-check { stroke-dashoffset: 0; } }

/* wizard sex cards, redone: each card in its own colour with a white symbol; the chosen one full colour and lifted */
.wizard .sex-card {
  background: linear-gradient(150deg, color-mix(in srgb, var(--sex) 34%, transparent), color-mix(in srgb, var(--sex) 22%, transparent));
  border: 2px solid color-mix(in srgb, var(--sex) 55%, rgba(255, 255, 255, .25)); box-shadow: none;
}
.wizard .sex-card:hover { background: linear-gradient(150deg, color-mix(in srgb, var(--sex) 48%, transparent), color-mix(in srgb, var(--sex) 32%, transparent)); }
.wizard .sex-halo, .wizard .sex-card:has(input:checked) .sex-halo,
.wizard .sex-pick:has(input:checked) .sex-card:not(:has(input:checked)) .sex-halo { fill: rgba(255, 255, 255, .16); }
.wizard .sex-sym { stroke: #fff; }
.wizard .sex-pick:has(input:checked) .sex-card:not(:has(input:checked)) .sex-sym { opacity: .85; }
.wizard .sex-sparks { fill: #fff; }
.wizard .sex-card b { color: #fff; }
.wizard .sex-card:has(input:checked) {
  background: linear-gradient(150deg, color-mix(in srgb, var(--sex) 82%, #fff), var(--sex));
  border-color: #fff; transform: translateY(-3px);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--sex) 45%, transparent), 0 0 0 4px rgba(255, 255, 255, .22);
}
.wizard .sex-card:has(input:checked) .sex-halo { fill: rgba(255, 255, 255, .24); }
.wizard .sex-card:has(input:checked) .sex-sym { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .2)); }
.wizard .sex-check { background: #fff; color: var(--sex); border: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }

/* the bubbles behind the wizard: scattered, of every size, slow, drifting a little sideways */
.wz-bubble {
  left: var(--x); bottom: calc(-1 * var(--s) - 20px); width: var(--s); background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .08); animation: wz-float-up var(--d) linear infinite; animation-delay: calc(var(--at) * var(--d) * -1);
}
@keyframes wz-float-up {
  0% { transform: translate(0, 0); opacity: 0; }
  8% { opacity: 1; }
  50% { transform: translate(var(--sway), -60vh); }
  92% { opacity: 1; }
  100% { transform: translate(0, calc(-100vh - 200px)); opacity: 0; }
}

/* Tapping or double-clicking a card, chip or button never selects its text (or the text around it) */
button, .btn, .wizard, .sex-card, .pe-card, .pe-rate, .pe-al, .pe-pref, .pe-step, .act-tile, .act-quick, .toggle-tile, .toggle-row,
.skin-card, .corner-pick, .swatch, .seg-radio, .segmented, .chip, .chip-btn, .choice-chips, .meal-chip, .quick, .ma-row, .ma-tools,
.wcap, .day-title, .cal-cell, .bottom-nav, .nav-add, .tile-btn, .set-row, .radio-row, .a11y-opt, .pick-btn, .pick-opt, .fav-remove, .fav-add {
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.wizard input, .wizard textarea { -webkit-user-select: text; user-select: text; }

/* ---------- wizard speed: instant feedback, nothing heavy redrawn on every frame ---------- */
/* the page under the wizard is not drawn (its blurred blobs and waves kept animating behind it) */
html.wz-open body > :not(.wizard):not(.auth-screen):not(#toast):not(dialog) { visibility: hidden; }
/* Signing in first (index.php): only the sign-in screen's background until it is there */
html.auth-gate body { background: var(--hero); min-height: 100vh; }
html.auth-gate body > :not(.auth-screen):not(#toast):not(dialog) { visibility: hidden; }
html.wz-open .aurora *, html.wz-open .wcap-fill, html.wz-open .wcap-fill * { animation-play-state: paused; }
/* no live blur over the moving bubbles: plain see-through colours instead */
.wizard .wz-intro, .wizard .pe-num, .wizard .pick-btn, .wizard .sex-card, .wizard .wz-chip span, .wizard .wz-pace span, .wizard .pick-pop {
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.wizard .pick-pop { background: color-mix(in srgb, var(--brand) 78%, #000); }
.wz-bg { contain: strict; }
.wz-bubble { will-change: transform, opacity; }
/* taps answer at once: no tap delay, and the chosen state shows without a slow fade */
.wizard { touch-action: manipulation; }
/* Typing in the wizard (the account step): the steps and the buttons under it step aside, so the
   field and the keyboard have the screen */
html.kb-open .wizard .wz-steps, html.kb-open .wizard .wz-foot { display: none; }
html.kb-open .wizard { padding-bottom: 0; }
/* while the keyboard is up there is room under the last field, so any field can rise to the middle */
html.kb-open .view { padding-bottom: 45vh; }
html.kb-open :is(.wz-body, .dlg-body, .a11y-body, .auth-screen).kb-room::after { content: ""; display: block; height: 35vh; flex: none; }
.wizard .wz-chip span, .wizard .wz-pace span, .wizard .sex-card, .wizard .wz-tag span, .wizard .wz-skins button,
.wizard .segmented button, .wizard .pick-opt, .wizard .wz-terms, .wizard .track, .wizard .track::after { transition-duration: .06s; }
.wizard .wz-chip:has(input:checked) span, .wizard .wz-pace:has(input:checked) span { transform: none; }
.wz-step { animation-duration: .28s; }

/* the bell in the settings step rings once every 10 seconds (about a second of ringing, then quiet) */
.wz-bell { animation: wz-ring10 10s .6s ease-in-out infinite; }
.wz-clapper { animation: wz-clap10 10s .6s ease-in-out infinite; }
.wz-waves path { animation: wz-waves10 10s .6s ease-out infinite; }
@keyframes wz-ring10 { 0%, 13%, 100% { transform: rotate(0); } 1.5%, 4.5%, 7.5% { transform: rotate(16deg); } 3%, 6%, 9% { transform: rotate(-16deg); } 11% { transform: rotate(5deg); } }
@keyframes wz-clap10 { 0%, 13%, 100% { transform: translateX(0); } 1.5%, 4.5%, 7.5% { transform: translateX(-2px); } 3%, 6%, 9% { transform: translateX(2px); } }
@keyframes wz-waves10 { 0%, 1% { opacity: 0; } 3%, 9% { opacity: 1; } 13%, 100% { opacity: 0; } }

/* ---------- smart tips on the home page ---------- */
.tips-panel {
  position: relative; margin-top: 18px; padding: 14px 18px 12px; border-radius: 22px; overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--border);
}
.tips-panel::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 100%; pointer-events: none; opacity: .5;
  background: radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%);
}
.tips-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.tips-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tips-title b { font-size: 16px; }
.tips-title small { font-size: 12.5px; color: var(--muted); }
.tips-spark { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #f5b52e, #e5487f); flex: none; }
.tips-ctrl { display: flex; align-items: center; gap: 4px; flex: none; }
.tips-btn {
  width: 32px; height: 32px; border-radius: 10px; border: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--row-alt); color: var(--text); transition: background .15s, color .15s;
}
.tips-btn:hover { background: color-mix(in srgb, var(--accent) 14%, var(--row-alt)); color: var(--accent); }
.tips-count { min-width: 58px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.tips-pause .pl { display: none; }
.tips-pause[aria-pressed="true"] .p1, .tips-pause[aria-pressed="true"] .p2 { display: none; }
.tips-pause[aria-pressed="true"] .pl { display: inline; }
.tips-track { position: relative; touch-action: pan-y; transition: height .45s cubic-bezier(.32, .72, 0, 1); }
.tip-slide { display: flex; align-items: center; gap: 16px; padding: 6px 2px; }
/* the tips stacked in one cell (tips.js), each its own height from the top: the track takes the
   height of the one on it (tips.js fit); a strip moves them */
.tip-slide { grid-area: 1 / 1; align-self: start; will-change: transform; }
.tip-slide:not(.on):not(.leaving) { visibility: hidden; }
/* (moving from one tip to the next: tips.js, in one movement) */
/* the drawing in a box of its own size, so the ring around it is centred on it */
.tip-art { flex: none; position: relative; display: grid; place-items: center; width: 56px; height: 56px; }
.tip-art .badge-icon { width: 52px !important; height: 52px !important; }
.tip-art::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--tc) 35%, transparent); animation: tip-ring 2.4s ease-out infinite; pointer-events: none; }
.tips-track { display: grid; overflow: hidden; padding: 8px 14px; margin: -8px -14px; }
@keyframes tip-ring { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
.tip-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* the label's words start on the title's line: its pill reaches out into the gap by its padding */
.tip-kind { align-self: flex-start; margin-inline-start: -9px; padding: 1px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: color-mix(in srgb, var(--tc) 62%, var(--text)); background: color-mix(in srgb, var(--tc) 13%, transparent); }
.tip-body b { font-size: 17px; line-height: 1.3; }
.tip-body p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.55; }
.tip-action {
  flex: none; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 12px; border: 0; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; color: #fff; background: var(--tc);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--tc) 30%, transparent); transition: filter .15s, transform .1s;
}
.tip-action { background: color-mix(in srgb, var(--tc) 80%, #000); }
.tip-action:hover { filter: brightness(1.08); }
.tip-action:active { transform: scale(.96); }
/* on the tips panel, a round button by the tip's text, quiet in the tip's colour (tips.js tipAction) */
.tips-panel .tip-slide { flex-wrap: nowrap; }
.tips-panel .tip-action {
  width: 42px; height: 42px; padding: 0; border-radius: 50%; justify-content: center; align-self: center; box-shadow: none;
  background: color-mix(in srgb, var(--tc) 18%, transparent); color: color-mix(in srgb, var(--tc) 80%, var(--text));
  transition: background .15s, transform .1s;
}
.tips-panel .tip-action:hover { filter: none; background: color-mix(in srgb, var(--tc) 28%, transparent); }
.tips-panel .tip-action .icon { width: 20px; height: 20px; }
/* (what a glass of water added rises from the button toward the text, the button at the panel's edge) */
.tips-panel .tw-plus { left: 0; animation-name: tw-plus-end; }
@keyframes tw-plus-end { 0% { opacity: 0; transform: translate(0, 12px) scale(.6); } 18% { opacity: 1; transform: translate(0, -16px) scale(1.06); }
  30% { transform: translate(0, -18px) scale(1); } 75% { opacity: 1; transform: translate(0, -30px); } 100% { opacity: 0; transform: translate(0, -46px); } }
.tips-foot { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.tips-dots { display: flex; flex-wrap: wrap; gap: 6px; }
.tips-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: var(--track); transition: width .25s, background .25s; }
.tips-dot.tip-warn { background: color-mix(in srgb, var(--warn) 45%, var(--track)); }
.tips-dot.on { width: 22px; background: var(--accent); }
.tips-dot.tip-warn.on { background: var(--warn); }
.tips-head, .tips-foot { user-select: none; -webkit-user-select: none; }
@media (max-width: 640px) {
  .tips-panel { padding: 12px 14px 10px; }
  .tips-title small { display: none; }
  .tip-slide { flex-wrap: wrap; gap: 12px; }
  .tip-art { width: 48px; height: 48px; }
  .tip-art .badge-icon { width: 44px !important; height: 44px !important; }
  .tip-action { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .tip-art::after { animation: none; } .tips-track { transition: none; } }
/* a report tip's button: quiet, in the tip's colour (its words and a light tint, a thin line), as wide as its words */
.tip-card .tip-action {
  width: auto; align-self: flex-start; justify-content: flex-start; gap: 4px; height: 36px; margin-top: 10px; padding: 0 14px 0 10px; border-radius: 999px;
  font-size: 13.5px; font-weight: 700; color: color-mix(in srgb, var(--tc) 72%, var(--text)); background: color-mix(in srgb, var(--tc) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tc) 30%, transparent); box-shadow: none;
}
.tip-card .tip-action:hover { filter: none; background: color-mix(in srgb, var(--tc) 20%, transparent); }
.tip-card .tip-action .icon { width: 15px; height: 15px; }

/* ---------- pictures: every photo over its drawing, one stand-in design everywhere ---------- */
/* The drawing shows while the photo loads, when there is none, when it fails and when pictures are
   turned off; a large frame also shows the alt text on a label. */
:root { --fi-glow: rgba(255, 255, 255, .75); --fi-mix: 30%; }
:root[data-theme="dark"] { --fi-glow: rgba(255, 255, 255, .07); --fi-mix: 34%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fi-glow: rgba(255, 255, 255, .07); --fi-mix: 34%; } }
.pic, .thumb { position: relative; display: grid; overflow: hidden; isolation: isolate; }
.pic > *, .thumb > * { grid-area: 1 / 1; min-width: 0; min-height: 0; }
/* the default size; each list sets its own */
:where(.thumb) { flex: none; width: 46px; height: 46px; border-radius: 12px; }
.pic > img, .thumb > img { display: block; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: opacity .3s; }
.pic > img.loaded, .thumb > img.loaded { opacity: 1; }
/* a picture already shown in this visit, drawn again: there at once, no fade */
.pic > img.shown, .thumb > img.shown { transition: none; }
.cutout > img { object-fit: contain; padding: 8%; background: radial-gradient(circle at 50% 42%, var(--stage-glow) 0%, var(--stage) 72%); }
/* a product's photo cut out by the phone (cache.js): shown as the server's cutouts are */
.pic > img.cut, .thumb > img.cut { object-fit: contain !important; padding: 8% !important; background: radial-gradient(circle at 50% 42%, var(--stage-glow) 0%, var(--stage) 72%) !important; }
.see-pic > img.cut { background: #fff !important; }
.photo > img { object-fit: cover; background: var(--stage); }
.food-ico, .alt-art {
  --fi: #12936a;
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit;
  background:
    radial-gradient(circle at 50% 46%, var(--fi-glow) 0 28%, transparent 64%),
    linear-gradient(150deg, color-mix(in srgb, var(--fi) var(--fi-mix), var(--surface)) 0%, color-mix(in srgb, var(--fi) 10%, var(--surface)) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fi) 26%, transparent);
}
.food-ico svg { width: 74%; height: 74%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .16)); }
.alt-art > svg { max-width: 84%; max-height: 84%; }
/* in a page's top the drawing fills a frame of its own size, whole, and makes room for the label under it */
.hero .pic > .alt-art { position: absolute; inset: 0; }
.hero .pic > .alt-art > svg { width: auto; height: auto; max-width: 70%; max-height: 74%; }
.hero .pic.art-pic > .alt-art { align-content: start; padding-top: 4%; }
.hero .pic.art-pic > .alt-art > svg { max-height: calc(100% - 50px); }
.pic .food-ico svg { width: 46%; height: 46%; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .14)); }
.card .pic .food-ico svg { width: 56%; height: 56%; }
/* the alt text, on a label at the foot of a large frame */
.alt-cap {
  display: none; z-index: 2; align-self: end; justify-self: center; align-items: center; gap: 6px; max-width: calc(100% - 20px); margin-bottom: 10px;
  padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--text);
  background: color-mix(in srgb, var(--surface) 90%, transparent); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}
.alt-cap > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alt-cap > svg { flex: none; color: var(--muted); }
.hero figure:has(> .pic.art-pic) figcaption { display: none; }
.hero .pic.art-pic .alt-cap, .alt-frame .alt-cap, html[data-a11y~="noimg"] .hero .pic .alt-cap { display: flex; }
.alt-frame { width: 100%; height: 100%; min-height: 120px; }
.alt-frame .food-ico svg { width: 40%; height: 40%; }

/* ---------- allergy marks: the user's own sensitivities an item contains ---------- */
.al-marks { flex: none; display: inline-flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.al-mark {
  position: relative; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--al); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px color-mix(in srgb, var(--warn) 80%, transparent);
}
.al-mark svg { width: 20px; height: 20px; }
.al-mark::after {
  content: "!"; position: absolute; top: -5px; left: -5px; width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center;
  background: var(--warn); color: #fff; font-size: 10px; font-weight: 900; line-height: 1; border: 1.5px solid var(--surface);
}
.card .al-marks { margin-top: 2px; }
.fav-text .al-marks { margin-top: 4px; }
.sg .al-marks, .ma-row .al-marks, .tl-entry .al-marks { margin-inline-start: 10px; }

/* ---------- food preference marks: what the user follows, drawn ---------- */
.pref-marks { flex: none; display: inline-flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pref-mark {
  position: relative; flex: none; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--pf); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px color-mix(in srgb, var(--pf) 45%, transparent);
}
.pref-mark svg { width: 72%; height: 72%; }
.sg .pref-marks, .ma-row .pref-marks { margin-inline-start: 10px; }
.card-marks { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 6px; }
.card-marks:empty { display: none; }
.pref-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.pref-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px; padding-inline-end: 12px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  color: color-mix(in srgb, var(--pf) 60%, var(--text)); background: color-mix(in srgb, var(--pf) 11%, var(--surface)); border: 1px solid color-mix(in srgb, var(--pf) 30%, transparent);
}
.pref-chip .pref-mark { box-shadow: none; }
.pref-rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.pref-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface); }
.pref-row > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pref-row small { font-size: 12.5px; color: var(--muted); }
.pref-state { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #fff; }
.pref-row.yes { border-color: color-mix(in srgb, var(--good) 45%, transparent); background: color-mix(in srgb, var(--good) 6%, var(--surface)); }
.pref-row.yes .pref-state { background: var(--good); }
.pref-row.no .pref-state { background: var(--warn); }
.pref-row.no .pref-mark { filter: grayscale(.7); opacity: .7; }
.pref-row.unknown .pref-state { background: var(--limit); }
.pref-row.unknown .pref-mark { opacity: .6; }
.pe-lead { margin: 0; text-align: center; color: var(--muted); }
.pe-pref:has(input:checked) .pref-mark { transform: scale(1.08); }
.pe-pref .pref-mark { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); margin-bottom: 4px; }
.pref-more { min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--muted); background: var(--row-alt); border: 1px solid var(--border); }

/* ---------- the welcome wizard again, from the settings: a close button ---------- */
.wz-close {
  position: fixed; z-index: 3; top: max(18px, var(--sa-top)); inset-inline-end: 18px; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .14);
  border: 1.5px solid rgba(255, 255, 255, .38); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); transition: background .2s, transform .25s, border-color .2s;
}
.wz-close:hover { background: rgba(255, 255, 255, .26); border-color: rgba(255, 255, 255, .7); transform: rotate(90deg); }
.wz-close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .wz-close:hover { transform: none; } }

/* ---------- the smart kitchen (AI) ---------- */
:root { --ai-grad: linear-gradient(135deg, #6a46f0, #c42f66); }
.ai-tool, .ai-form, .ai-pick, .ai-shot { --ai-ink: color-mix(in srgb, var(--ai) 62%, #000); }
:root[data-theme="dark"] :is(.ai-tool, .ai-form, .ai-pick, .ai-shot) { --ai-ink: color-mix(in srgb, var(--ai) 62%, #fff); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.ai-tool, .ai-form, .ai-pick, .ai-shot) { --ai-ink: color-mix(in srgb, var(--ai) 62%, #fff); } }
.ai-art .ai-scan-line { animation: ai-scan 2.4s ease-in-out infinite alternate; opacity: .85; }
.ai-art .ai-steam path { animation: ai-steam 2.6s ease-in-out infinite; }
.ai-art .ai-steam path:nth-child(2) { animation-delay: .5s; }
.ai-art .ai-steam path:nth-child(3) { animation-delay: 1s; }
.ai-art .ai-spark { transform-box: fill-box; transform-origin: center; animation: ai-twinkle 2.2s ease-in-out infinite; }
.ai-art .ai-spark.s2 { animation-delay: 1.1s; }
@keyframes ai-scan { from { transform: translateY(0); } to { transform: translateY(58px); } }
@keyframes ai-steam { 0% { opacity: 0; transform: translateY(4px); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes ai-twinkle { 0%, 100% { transform: scale(.7); opacity: .6; } 50% { transform: scale(1.15); opacity: 1; } }

.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.ai-banner { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; padding: 12px 16px; border-radius: 16px; color: var(--text);
  background: color-mix(in srgb, #6a46f0 10%, var(--surface)); border: 1px solid color-mix(in srgb, #6a46f0 25%, transparent); }
.ai-banner > svg { color: #6a46f0; flex: none; }
/* four tools: two by two (one under the other on a phone) */
.ai-tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 18px; }
.ai-tool {
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 18px 18px; text-align: center; cursor: pointer;
  border-radius: 24px; border: 1px solid color-mix(in srgb, var(--ai) 22%, var(--border)); color: var(--text); font: inherit;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ai) 9%, var(--surface)), var(--surface) 70%); box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.ai-tool:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--ai) 50%, transparent); box-shadow: 0 14px 34px color-mix(in srgb, var(--ai) 18%, transparent); }
.ai-tool-text { display: flex; flex-direction: column; gap: 6px; }
.ai-tool-text b { font-size: 19px; }
.ai-tool-text span { font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.ai-tool-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 14.5px;
  color: var(--ai-ink); background: color-mix(in srgb, var(--ai) 13%, transparent); }
.ai-tool:hover .ai-tool-cta { background: var(--ai-ink); color: var(--surface); }
.ai-privacy { margin-top: 18px; }
.ai-privacy h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 17px; }
.ai-privacy ul { margin: 0 0 10px; padding-inline-start: 20px; display: grid; gap: 6px; color: var(--muted); font-size: 14.5px; }
.ai-setup { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }

/* the AI windows */
.btn.ai-go { background: var(--ai-grad); border: 0; color: #fff; box-shadow: 0 8px 22px rgba(106, 70, 240, .28); }
.btn.ai-go:hover { filter: brightness(1.08); }
.ai-pick { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 6px 0 4px; }
.ai-pick h3 { margin: 4px 0 0; font-size: 22px; }
.ai-pick p { margin: 0; max-width: 440px; }
.ai-pick .ai-go { margin-top: 8px; padding-inline: 26px; }
.ai-hints { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0 0; padding: 0; }
.ai-hints li { padding: 6px 12px; border-radius: 999px; font-size: 13.5px; background: var(--row-alt); color: var(--muted); }
.ai-hints li::before { content: "\2713"; margin-inline-end: 6px; color: var(--good); font-weight: 700; }
.ai-wait { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 0; text-align: center; }
.ai-wait-line { margin: 0; font-weight: 700; font-size: 16px; }
.ai-wait-line.in { animation: ai-line .4s ease; }
@keyframes ai-line { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ai-dots { display: flex; gap: 6px; }
.ai-dots i { width: 8px; height: 8px; border-radius: 50%; background: #6a46f0; animation: ai-dot 1.2s ease-in-out infinite; }
.ai-dots i:nth-child(2) { animation-delay: .15s; background: #9a3cc0; }
.ai-dots i:nth-child(3) { animation-delay: .3s; background: #c42f66; }
@keyframes ai-dot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-6px); opacity: 1; } }
.ai-fail { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 0; text-align: center; }
.ai-fail > svg { width: 52px; height: 52px; padding: 13px; border-radius: 50%; color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.ai-fail p { margin: 0; max-width: 460px; }
.ai-scan { display: flex; flex-direction: column; align-items: center; }
.ai-scan-photo { position: relative; width: min(100%, 380px); border-radius: 22px; overflow: hidden; }
.ai-photo { aspect-ratio: 4 / 3; border-radius: 20px; }
.ai-scan-beam { position: absolute; inset-inline: 0; top: 0; height: 30%; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(124, 92, 255, .35) 85%, #a78bfa 100%); animation: ai-beam 2.2s ease-in-out infinite alternate; }
@keyframes ai-beam { from { transform: translateY(-100%); } to { transform: translateY(330%); } }

/* the meal analysis */
.ai-meal { display: flex; flex-direction: column; gap: 16px; }
.ai-meal-top { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
.ai-meal-sum { display: flex; flex-direction: column; gap: 14px; }
.ai-meal-head { display: flex; align-items: center; gap: 16px; }
.ai-score { --c: var(--good); position: relative; flex: none; width: 92px; height: 92px; display: grid; place-items: center; align-content: center; }
.ai-score.mid { --c: #b45309; }
.ai-score.low { --c: var(--warn); }
.ai-score svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ai-score-arc { stroke: var(--c); }
.ai-score b { font-size: 28px; line-height: 1; color: var(--c); }
.ai-score small { font-size: 11.5px; color: var(--muted); }
.ai-kcal { display: flex; flex-direction: column; gap: 3px; }
.ai-kcal > span { font-size: 15px; }
.ai-kcal b { font-size: 30px; }
.ai-kcal small { color: var(--muted); font-size: 13.5px; }
.ai-kcal small.over { color: var(--warn); font-weight: 700; }
.ai-meal .macros { margin: 0; }
.ai-warn { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; color: var(--text);
  background: color-mix(in srgb, var(--warn) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }
.ai-warn > svg { flex: none; color: #fff; background: var(--warn); border-radius: 50%; padding: 3px; }
.ai-sub { margin: 4px 0 0; font-size: 17px; }
.ai-sub small { font-weight: 500; color: var(--muted); font-size: 13px; }
.ai-plate { display: flex; gap: 3px; height: 14px; border-radius: 999px; overflow: hidden; }
.ai-plate span { background: var(--g); min-width: 6px; }
.ai-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); margin-top: -6px; }
.ai-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ai-legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--g); }
.ai-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ai-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--row-alt); border-inline-start: 4px solid var(--g); }
.ai-item-pic { width: 44px; height: 44px; }
.ai-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ai-item-text small { color: var(--muted); font-size: 13px; }
.ai-item-kcal { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.ai-item-kcal b { font-size: 18px; }
.ai-item-kcal small { font-size: 11.5px; color: var(--muted); }
.ai-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.ai-card { --c: var(--good); padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--c) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 24%, transparent); }
.ai-card.improve { --c: #b45309; }
.ai-card.swaps { --c: #3b6cf6; }
.ai-card h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15.5px; color: color-mix(in srgb, var(--c) 70%, var(--text)); }
.ai-card h4 > svg { flex: none; width: 24px; height: 24px; padding: 4px; border-radius: 50%; color: #fff; background: var(--c); }
.ai-card ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 5px; font-size: 14.5px; line-height: 1.5; }
.ai-hidden { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 14px; border-radius: 14px; font-size: 14.5px;
  background: color-mix(in srgb, #6a46f0 8%, var(--surface)); }
.ai-hidden > svg { flex: none; color: #6a46f0; margin-top: 2px; }

/* the recipe request */
dialog#dialog.ai-dialog { width: min(820px, calc(100vw - 24px)); }
.ai-form { display: flex; flex-direction: column; gap: 16px; }
.ai-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ai-modes button {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 12px; border-radius: 18px; cursor: pointer; font: inherit; font-weight: 700; font-size: 15.5px;
  color: var(--text); background: var(--row-alt); border: 2px solid transparent; transition: border-color .2s, background .2s;
}
.ai-modes button[aria-selected="true"] { border-color: var(--ai); background: color-mix(in srgb, var(--ai) 10%, var(--surface)); }
.ai-intro { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-radius: 20px; background: color-mix(in srgb, var(--ai) 7%, var(--surface)); }
.ai-intro p { margin: 0; font-size: 15px; line-height: 1.6; }
.ai-form .field > span { display: block; margin-bottom: 6px; }
.ai-shots { display: flex; flex-wrap: wrap; gap: 10px; }
.ai-shot { position: relative; width: 96px; height: 96px; }
.ai-shot-pic { width: 96px; height: 96px; border-radius: 16px; }
.ai-shot-x { position: absolute; top: -6px; inset-inline-start: -6px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--surface);
  display: grid; place-items: center; cursor: pointer; background: var(--warn); color: #fff; }
.ai-shot.add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; border-radius: 16px; cursor: pointer;
  text-align: center; font-size: 12.5px; font-weight: 700; color: var(--ai-ink); border: 2px dashed color-mix(in srgb, var(--ai) 45%, var(--border));
  background: color-mix(in srgb, var(--ai) 6%, var(--surface)); transition: background .2s; }
.ai-shot.add:hover { background: color-mix(in srgb, var(--ai) 14%, var(--surface)); }
.ai-shot.add:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.ai-opts { display: grid; grid-template-columns: auto 1fr; gap: 16px 24px; }
.ai-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-chip {
  min-width: 44px; padding: 8px 14px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 600;
  color: var(--text); background: var(--surface); border: 1.5px solid var(--border); transition: background .15s, border-color .15s, color .15s;
}
.ai-chip:hover { border-color: color-mix(in srgb, var(--ai) 50%, var(--border)); }
.ai-chip[aria-checked="true"], .ai-chip[aria-pressed="true"] { background: var(--ai-ink); border-color: var(--ai-ink); color: var(--surface); }
.ai-chip.check[aria-pressed="true"]::before { content: "\2713\00a0"; }
.ai-send { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13.5px; color: var(--muted); }
.ai-send > svg { flex: none; margin-top: 2px; }
.ai-form .actions { justify-content: center; }
.ai-form .ai-go { padding-inline: 30px; font-size: 16.5px; }

/* the recipe */
.ai-recipe { display: flex; flex-direction: column; gap: 16px; }
.ai-recipe-hero { display: flex; align-items: center; gap: 18px; padding: 16px; border-radius: 22px;
  background: linear-gradient(135deg, color-mix(in srgb, #f08a24 12%, var(--surface)), color-mix(in srgb, #6a46f0 8%, var(--surface))); }
.ai-recipe-art { flex: none; display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.ai-recipe-head { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ai-recipe-head h2 { margin: 0; font-size: 26px; line-height: 1.2; }
.ai-recipe-head p { margin: 0; color: var(--muted); line-height: 1.5; }
.ai-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #fff; background: var(--ai-grad); }
.ai-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.ai-facts span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600; background: var(--surface); border: 1px solid var(--border); }
.ai-seen-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ai-seen-list span { padding: 5px 12px; border-radius: 999px; font-size: 13.5px; background: color-mix(in srgb, #22a06b 12%, var(--surface)); color: var(--text); }
.ai-recipe-cols { display: grid; grid-template-columns: 1fr 1.35fr; gap: 20px; align-items: start; }
.ai-ings { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.ai-ings li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 14px; background: var(--row-alt); }
.ai-ing-pic { width: 36px; height: 36px; border-radius: 10px; }
.ai-ings li > span:not(.thumb):not(.ai-have):not(.ai-buy) { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ai-ings small { color: var(--muted); font-size: 13px; }
.ai-have, .ai-buy { flex: none; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.ai-have { color: var(--good); background: color-mix(in srgb, var(--good) 13%, transparent); }
.ai-buy { color: #a14a06; background: color-mix(in srgb, #d97706 14%, transparent); }
.ai-steps { margin: 10px 0 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 10px; }
.ai-steps li { counter-increment: step; position: relative; padding-inline-start: 42px; line-height: 1.6; min-height: 30px; }
.ai-steps li::before { content: counter(step); position: absolute; inset-inline-start: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff; background: var(--ai-grad); }
.ai-nutri-row { display: flex; align-items: center; gap: 18px; margin-top: 8px; }
.ai-nutri-row .macros { flex: 1; margin: 0; }
.spinner.small { display: inline-block; width: 16px; height: 16px; border-width: 3px; margin: 0; vertical-align: -3px; border-top-color: #fff; }

/* the next meal (next-meal.js): the day's numbers and the choices, then the options */
.nm { --ai: #0d9488; --ai-ink: color-mix(in srgb, var(--ai) 62%, #000); display: flex; flex-direction: column; gap: 16px; }
:root[data-theme="dark"] .nm { --ai-ink: color-mix(in srgb, var(--ai) 50%, #fff); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nm { --ai-ink: color-mix(in srgb, var(--ai) 50%, #fff); } }
.nm .field > span { display: block; margin-bottom: 6px; font-weight: 600; }
.nm .field > span small { font-weight: 400; color: var(--muted); }
.nm .field input { margin-top: 10px; }
.nm .ai-sub { margin: 2px 0 -6px; }
.nm-loading { min-height: 220px; display: grid; place-items: center; }
/* the rings: the day's calories, eaten, this meal's part lit, the rest */
.nm-rings .nmr-t { stroke: rgba(255, 255, 255, .2); }
.nm-rings .nmr-e { stroke: rgba(255, 255, 255, .62); }
.nm-rings .nmr-m { stroke: #fde68a; }
.nm-hero { display: flex; align-items: center; gap: 18px; padding: 16px 18px; border-radius: 24px; color: #fff;
  background: radial-gradient(130% 150% at 100% 0%, #14b8a6 0%, #0f766e 48%, #134e4a 100%); box-shadow: 0 16px 30px -18px rgba(13, 148, 136, .8); }
.nm-ring { position: relative; flex: none; width: 128px; height: 128px; display: grid; place-items: center; }
.nm-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.nm-ring-num { display: flex; flex-direction: column; align-items: center; line-height: 1.05; text-align: center; }
.nm-ring-num b { font-size: 28px; }
.nm-ring-num small { max-width: 72px; margin-top: 3px; font-size: 11.5px; opacity: .85; }
.nm-hero-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nm-when { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: rgba(255, 255, 255, .16); }
.nm-hero h3 { margin: 0; font-size: 21px; line-height: 1.25; }
.nm-hero p { margin: 0; font-size: 14.5px; line-height: 1.55; opacity: .93; }
.nm-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; }
.nm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.nm-legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
/* what the meal should bring: four tiles, two by two on a phone */
.nm-needs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.nm-need { display: flex; flex-direction: column; gap: 3px; padding: 12px; border-radius: 18px; min-width: 0;
  background: color-mix(in srgb, var(--c) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 24%, transparent); }
.nm-need > span:first-child { font-size: 12.5px; font-weight: 700; color: color-mix(in srgb, var(--c) 72%, var(--text)); }
.nm-need b { font-size: 22px; line-height: 1.1; }
.nm-need b small { font-size: 12.5px; font-weight: 600; }
.nm-need-day { font-size: 11.5px; color: var(--muted); }
/* the day's diet quality, and the sensitivities and diet it keeps to: side by side, the same height */
.nm-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nm-q, .nm-sens { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border-radius: 18px; background: var(--row-alt); }
.nm-q-score { --q: var(--muted); --p: 0; position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 16px; color: var(--q); background: conic-gradient(var(--q) calc(var(--p) * 1%), color-mix(in srgb, var(--q) 16%, transparent) 0); }
.nm-q-score::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--row-alt); }
.nm-q-score > span { position: relative; }
.nm-q b, .nm-sens b { display: block; font-size: 14px; }
.nm-q small, .nm-sens small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.nm-sens { flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; }
.nm-sens-list { display: flex; flex-wrap: wrap; gap: 6px; }
.nm-sens-list span { padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ai-ink); background: color-mix(in srgb, var(--ai) 13%, transparent); }
.nm-sens-list span::before { content: "\2713\00a0"; }
.ai-chip.nm-meal { display: inline-flex; align-items: center; gap: 6px; }
/* the kind of dish (next-meal.js KINDS, twelve): each with its drawing; a phone's in three rows of four,
   a wide window's in two rows of six (in one row of twelve "לא משנה" ran past its button's sides) */
.nm-kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ai-chip.nm-kind { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 9px 4px 8px; border-radius: 16px;
  font-size: 13px; line-height: 1.15; text-align: center; }
.ai-chip.nm-kind svg { width: 24px; height: 24px; color: var(--ai, #0d9488); }
.ai-chip.nm-kind[aria-checked="true"] svg { color: inherit; }
.ai-chip.nm-kind span { max-width: 100%; text-wrap: balance; overflow-wrap: anywhere; }
@media (min-width: 700px) { dialog#dialog .nm-kinds { grid-template-columns: repeat(6, minmax(0, 1fr)); } dialog#dialog .ai-chip.nm-kind { flex-direction: row; gap: 8px; min-height: 48px; font-size: 14px; } }
@media (max-width: 340px) { .ai-chip.nm-kind { font-size: 12px; padding-inline: 2px; } }
.ai-chip.nm-meal svg { color: var(--m); }
.ai-chip.nm-meal[aria-checked="true"] svg { color: inherit; }
.nm-count { margin: 0; text-align: center; font-size: 13.5px; color: var(--muted); }
.nm .actions { justify-content: center; }
.nm .ai-go { padding-inline: 30px; font-size: 16.5px; }

/* the options */
.nm-insight { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 22px;
  background: linear-gradient(135deg, color-mix(in srgb, #0d9488 13%, var(--surface)), color-mix(in srgb, #6a46f0 9%, var(--surface))); }
.nm-insight p { margin: 0; font-size: 15px; line-height: 1.6; }
.nm-focus { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nm-focus li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  background: var(--surface); border: 1px solid color-mix(in srgb, #0d9488 32%, var(--border)); }
.nm-focus svg { flex: none; color: #0d9488; }
/* one under the other in a column, not a grid: on the iPhone the grid's row was measured with the card's
   words on fewer lines than they take, and the next card started under the first one */
.nm-picks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
/* each option a card of its own, framed clearly apart from the window and from the next one */
.nm-pick { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; padding: 12px; border-radius: 24px; isolation: isolate;
  background: color-mix(in srgb, var(--text) 4%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--text) 16%, var(--border)); box-shadow: 0 12px 26px -16px rgba(0, 0, 0, .5); }
.nm-pick.best { border-color: color-mix(in srgb, #0d9488 55%, var(--border)); box-shadow: 0 18px 36px -20px rgba(13, 148, 136, .6); }
.nm-pic { position: relative; min-height: 180px; border-radius: 18px; overflow: hidden; isolation: isolate; }
.nm-pic > .pic { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 18px; }
.nm-rank { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 800; color: #fff; background: rgba(15, 23, 42, .78); }
.nm-rank svg { width: 14px; height: 14px; }
.nm-pick.best .nm-rank { background: linear-gradient(135deg, #0d9488, #6a46f0); }
.nm-fit { position: absolute; bottom: 8px; inset-inline-end: 8px; z-index: 3; width: 58px; height: 58px; display: grid; place-items: center; align-content: center; border-radius: 50%;
  color: #fff; line-height: 1; background: rgba(15, 23, 42, .8); }
.nm-fit svg { position: absolute; inset: 3px; transform: rotate(-90deg); }
.nm-fit .nmf-t { stroke: rgba(255, 255, 255, .2); }
.nm-fit .nmf-a { stroke: #5eead4; }
.nm-fit b { position: relative; font-size: 14px; }
.nm-fit small { position: relative; font-size: 9.5px; opacity: .85; margin-top: 2px; }
.nm-main { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.nm-main h4 { margin: 0; font-size: 18px; line-height: 1.3; }
.nm-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }
.nm-grade { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11.5px; font-weight: 800; color: #fff; background: var(--hc); }
.nm-meter { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
.nm-meter b { color: var(--text); font-size: 15px; }
.nm-meter i { display: block; height: 8px; border-radius: 999px; overflow: hidden; background: var(--track); }
.nm-meter em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(270deg, #14b8a6, #0d9488); }
.nm-meter.over em { background: linear-gradient(270deg, #f59e0b, #dc2626); }
.nm-macros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.nm-macros span { display: flex; flex-direction: column; align-items: center; padding: 6px 4px; border-radius: 12px; font-size: 11.5px; color: var(--muted); background: var(--row-alt); }
.nm-macros b { font-size: 15px; color: var(--text); }
.nm-macros b small { font-size: 11px; font-weight: 600; margin-inline-start: 1px; }
.nm-insight .ai-badge { align-self: flex-start; }
.nm-why, .nm-tip { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 14px; line-height: 1.55; }
.nm-why > svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: #6a46f0; }
.nm-tip { padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, #0d9488 9%, var(--surface)); }
.nm-tip > svg { flex: none; margin-top: 3px; color: #0d9488; }
.nm-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.nm-reasons span { padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.nm-reasons .ok { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
.nm-reasons .warn { color: #b45309; background: color-mix(in srgb, #d97706 13%, transparent); }
.nm-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.nm-acts .btn { flex: 1 1 auto; justify-content: center; }
.nm-ideas { display: flex; flex-direction: column; gap: 10px; }
.nm-idea { display: flex; gap: 14px; padding: 14px; border-radius: 22px; border: 1.5px dashed color-mix(in srgb, #6a46f0 42%, var(--border)); background: color-mix(in srgb, #6a46f0 5%, var(--surface)); }
.nm-idea-art { flex: none; width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); }
.nm-idea-main { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.nm-idea h4 { margin: 0; font-size: 17px; }
.nm-desc { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.nm-write { align-self: flex-start; }
.nm-write small { font-weight: 500; color: var(--muted); }
.nm-avoid { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5;
  background: color-mix(in srgb, #d97706 9%, var(--surface)); border: 1px solid color-mix(in srgb, #d97706 28%, transparent); }
.nm-avoid > svg { flex: none; margin-top: 2px; padding: 2px; border-radius: 50%; color: #fff; background: #d97706; }
.nm-res .note { margin: 0; }
/* an idea in a window of its own */
.nm-one { gap: 14px; }
.nm-one > .ai-badge { align-self: flex-start; }
.nm-gone { margin: 0; font-size: 13.5px; color: var(--muted); }

/* the kept recommendations, on the recipes page: a row of cards that scrolls sideways */
.nm-saved { margin-top: 18px; }
.nms-head { margin-bottom: 0; transition: margin .35s ease; }
.nm-saved:has(.nms-body.open) .nms-head { margin-bottom: 12px; }
/* the head folds the list away and back: one bar across, its spark, the title on one line and its count,
   and the round arrow that turns at the far end, a little in from the edge */
.nms-toggle { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 9px 12px; padding-inline-end: 10px; border-radius: 20px; cursor: pointer;
  font: inherit; color: var(--text); text-align: start; border: 1px solid color-mix(in srgb, #6a46f0 22%, var(--border)); box-shadow: var(--shadow);
  background: linear-gradient(135deg, color-mix(in srgb, #6a46f0 10%, var(--surface)), var(--surface) 62%); transition: border-color .2s, transform .15s; }
.nms-toggle:hover { border-color: color-mix(in srgb, #6a46f0 45%, var(--border)); }
.nms-toggle:active { transform: scale(.99); }
.nms-spark-t { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; background: var(--ai-grad);
  box-shadow: 0 8px 16px -10px rgba(106, 70, 240, .8); }
.nms-spark-t svg { width: 18px; height: 18px; }
.nms-label { min-width: 0; overflow: hidden; font-size: 17px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.nms-toggle small { flex: none; display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #fff; background: var(--ai-grad); }
.nms-chevron { flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin-inline-start: auto; border-radius: 50%; color: #6a46f0;
  background: color-mix(in srgb, #6a46f0 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #6a46f0 26%, transparent);
  transition: transform .35s cubic-bezier(.2, .9, .3, 1.25), background .2s, color .2s; }
.nms-toggle[aria-expanded="true"] .nms-chevron { transform: rotate(180deg); }
.nms-toggle:hover .nms-chevron { color: #fff; background: var(--ai-grad); box-shadow: 0 6px 14px -6px rgba(106, 70, 240, .7); }
:root[data-theme="dark"] .nms-chevron { color: #c4b5fd; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nms-chevron { color: #c4b5fd; } }
.nms-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .35s ease, opacity .25s ease; }
.nms-body.open { grid-template-rows: 1fr; opacity: 1; }
/* room for the cards' shadows inside the fold */
.nms-inner { min-height: 0; overflow: hidden; margin: -6px; padding: 6px; }
@media (prefers-reduced-motion: reduce) { .nms-body, .nms-chevron, .nms-head { transition: none; } }
/* the foot of the open list: the rest of them, and the delete of them all at the far end */
.nms-foot { display: flex; align-items: stretch; gap: 10px; margin-top: 12px; }
.nms-clear { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; padding: 10px 14px; border: 0; border-radius: 14px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 700; white-space: nowrap; color: var(--warn); background: color-mix(in srgb, var(--warn) 11%, transparent); transition: background .15s, color .15s; }
.nms-clear:hover { color: #fff; background: var(--warn); }
.nms-list { display: grid; gap: 12px; }
.nms-card { position: relative; overflow: hidden; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--meal) 26%, var(--border)); box-shadow: var(--shadow);
  background: linear-gradient(135deg, color-mix(in srgb, var(--meal) 10%, var(--surface)), var(--surface) 55%, color-mix(in srgb, #6a46f0 6%, var(--surface))); }
.nms-card::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 5px; background: linear-gradient(180deg, var(--meal), #6a46f0); }
.nms-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px 18px 12px; }
.nms-open { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0; padding-inline-end: 44px; border: 0; cursor: pointer;
  font: inherit; color: var(--text); text-align: start; background: none; }
.nms-badge { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; color: #fff;
  background: linear-gradient(135deg, var(--meal), color-mix(in srgb, var(--meal) 55%, #6a46f0)); box-shadow: 0 8px 18px -10px var(--meal); }
.nms-head-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nms-title { font-size: 16.5px; line-height: 1.3; }
.nms-sub { font-size: 13px; color: var(--muted); }
.nms-dishes { display: grid; align-self: stretch; width: 100%; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
@media (max-width: 520px) { .nms-dishes { grid-template-columns: 1fr; } }
.nms-dish { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 10px 7px 12px; border: 0; border-radius: 14px; cursor: pointer;
  font: inherit; color: var(--text); text-align: start; text-decoration: none; background: var(--row-alt); transition: background .15s, transform .15s; }
.nms-dish:hover { background: color-mix(in srgb, var(--meal) 12%, var(--row-alt)); }
.nms-dish:active { transform: scale(.985); }
.nms-dish .nms-chev { flex: none; color: var(--muted); }
.nms-dish > span:not(.thumb):not(.nms-spark) { flex: 1; min-width: 0; overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.nms-dish small { flex: none; font-size: 12px; color: var(--muted); }
.thumb.nms-pic { flex: none; width: 34px; height: 34px; border-radius: 10px; }
.nms-dish.idea { border: 1.5px dashed color-mix(in srgb, #6a46f0 40%, var(--border)); background: color-mix(in srgb, #6a46f0 7%, var(--surface)); }
.nms-dish.idea:hover { background: color-mix(in srgb, #6a46f0 13%, var(--surface)); }
.nms-spark { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; background: var(--ai-grad); }
.nms-spark svg { width: 16px; height: 16px; }
.nms-go { justify-self: end; display: inline-flex; align-items: center; gap: 4px; padding: 4px 2px; border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700;
  color: color-mix(in srgb, var(--meal) 70%, var(--text)); background: none; }
/* the idea a card's row led to, lit a moment in the recommendation */
.nm-idea.lit { animation: nm-lit 2.4s ease-out; }
@keyframes nm-lit { 0%, 30% { box-shadow: 0 0 0 4px color-mix(in srgb, #6a46f0 55%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .nm-idea.lit { animation: none; outline: 3px solid #6a46f0; } }
.nms-del { position: absolute; top: 14px; inset-inline-end: 14px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--muted); background: var(--row-alt); transition: background .15s, color .15s; }
.nms-del:hover { color: #fff; background: var(--warn); }
.nms-more { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 10px; border: 1px dashed var(--border); border-radius: 14px;
  cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; color: var(--muted); background: none; }
.nms-more:hover { color: var(--text); background: var(--row-alt); }

/* the way in on the recipes page: today's next meal on the hero, glassy */
.nm-strip { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 10px 12px; border: 0; border-radius: 20px; cursor: pointer;
  font: inherit; color: #fff; text-align: start; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: background .2s, transform .15s; }
.nm-strip:hover { background: rgba(255, 255, 255, .18); }
.nm-strip:active { transform: scale(.985); }
.nm-strip-ring { position: relative; flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.nm-strip-ring svg.nm-rings { position: absolute; inset: 0; transform: rotate(-90deg); }
.nm-strip-ring > span { position: relative; display: grid; color: #fff; }
.nm-strip-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nm-strip-text b { font-size: 16px; }
.nm-strip-text small { font-size: 13px; line-height: 1.35; opacity: .88; }
.nm-strip-go { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 14px;
  color: #fff; background: var(--ai-grad); box-shadow: 0 6px 16px -6px rgba(106, 70, 240, .7); }
/* the smart kitchen: the next meal first, across the row */
.ai-tool.wide { grid-column: 1 / -1; flex-direction: row; gap: 18px; padding: 18px 22px; text-align: start; }
.ai-tool.wide .ai-tool-text { flex: 1; }
.ai-tool.wide .ai-tool-cta { margin-top: 0; }

@media (max-width: 640px) {
  .nm-hero { flex-direction: column; text-align: center; gap: 12px; }
  .nm-when { align-self: center; }
  .nm-legend { justify-content: center; }
  .nm-needs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nm-facts { grid-template-columns: 1fr; }
  .nm-pick { display: flex; flex-direction: column; }
  /* a set height, not an aspect ratio: on the iPhone the card was sized without its photo and overlapped the next */
  .nm-pic { flex: none; min-height: 0; height: clamp(170px, 52vw, 250px); }
  .nm-idea { flex-direction: column; align-items: center; text-align: center; }
  .nm-idea .ai-facts, .nm-idea .nm-why { justify-content: center; }
  .nm-write { align-self: center; }
  .nm-strip-go { padding: 8px 11px; }
}

/* the + sheet: the AI tools */
.ai-quick-grid .ai-quick:nth-child(1) .ai-badge-icon { background: linear-gradient(135deg, #e5487f, #9a3cc0); }
.ai-quick-grid .ai-quick:nth-child(2) .ai-badge-icon { background: linear-gradient(135deg, #f08a24, #c42f66); }
.ai-quick-grid .ai-quick:nth-child(3) .ai-badge-icon { background: linear-gradient(135deg, #22a06b, #6a46f0); }
.ai-quick-grid .ai-quick:nth-child(4) .ai-badge-icon { background: linear-gradient(135deg, #6366f1, #c026d3); }
/* the agreement to the AI tools: its title and its button in one row at the top, what is sent and what
   to keep in mind under them across the card (the button stood alone in the middle of a wide card's side) */
.set-row.ai-consent { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; }
.set-row.ai-consent .set-label small { line-height: 1.55; margin-top: 3px; }
.set-row.ai-consent > .set-label:not(:has(small)) { display: block; } /* (its words one run, "ה-AI" kept whole) */
.set-row.ai-consent .aic-nw { white-space: nowrap; }
.set-row.ai-consent > .aic-text { grid-column: 1 / -1; font-size: 13px; line-height: 1.55; }
.set-row.ai-consent .btn { flex: none; justify-self: end; }
/* what to keep in mind about the AI's answers: a calm note under the text, not a warning */
.set-row.ai-consent .ai-mind { grid-column: 1 / -1; display: block; margin-top: 2px; padding: 8px 10px; border-radius: 10px; font-size: 12.5px; line-height: 1.5; color: var(--text);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent); }

@media (max-width: 760px) {
  .ai-tools { grid-template-columns: 1fr; }
  .ai-tool { flex-direction: row; text-align: start; padding: 16px; }
  .ai-tool-art svg { width: 84px; height: 84px; }
  .ai-tool-cta { display: none; }
  .ai-meal-top, .ai-recipe-cols { grid-template-columns: 1fr; }
  .ai-meal-top .ai-photo { aspect-ratio: auto; height: 220px; }
  .ai-opts { grid-template-columns: 1fr; }
  .ai-recipe-hero { flex-direction: column; text-align: center; }
  .ai-recipe-head { align-items: center; }
  .ai-badge { align-self: center; }
  .ai-facts { justify-content: center; }
  .ai-nutri-row { flex-direction: column; align-items: stretch; }
  .ai-modes button { flex-direction: column; gap: 4px; font-size: 14px; }
  .set-row.ai-consent .set-label { font-weight: 700; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-art .ai-scan-line, .ai-art .ai-steam path, .ai-art .ai-spark, .ai-scan-beam, .ai-dots i { animation: none; }
}

/* ---------- settings: each section folds open and closed ---------- */
.set-sec { margin-top: 12px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  interpolate-size: allow-keywords; transition: border-color .25s, box-shadow .25s; }
.set-sec[open] { border-color: color-mix(in srgb, var(--sc) 35%, var(--border)); }
.set-sec > summary {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; list-style: none; border-radius: 22px;
  user-select: none; -webkit-user-select: none; transition: background .2s;
}
.set-sec > summary::-webkit-details-marker { display: none; }
.set-sec > summary:hover { background: color-mix(in srgb, var(--sc) 6%, transparent); }
.set-sec > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.set-sec-ico { flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--sc) 82%, #fff), var(--sc)); box-shadow: 0 2px 6px color-mix(in srgb, var(--sc) 18%, transparent); }
.set-sec-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.set-sec-text h3.list-title { margin: 0; font-size: 17px; }
.set-sec-text small { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-sec-chev { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--muted);
  background: var(--row-alt); transition: transform .3s ease, background .2s, color .2s; }
.set-sec[open] .set-sec-chev { transform: rotate(-90deg); background: color-mix(in srgb, var(--sc) 14%, transparent); color: var(--sc); }
.set-sec-body { padding: 4px 14px 16px; }
.set-sec-body > :first-child { margin-top: 4px; }
.set-sec-body .set-list .set-row { background: var(--row-alt); box-shadow: none; }
.set-sec::details-content { block-size: 0; overflow: hidden; transition: block-size .32s ease, content-visibility .32s allow-discrete; }
.set-sec[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) { .set-sec::details-content, .set-sec-chev { transition: none; } }

/* ---------- reports: today's summary ---------- */
.day-meals { display: grid; gap: 12px; }
.day-meal { border-radius: 18px; padding: 12px 14px; background: color-mix(in srgb, var(--meal) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--meal) 20%, var(--border)); }
.day-meal-head { display: flex; align-items: center; gap: 10px; }
/* the meal's name and its calories side by side, or where both don't fit, each a whole line of its own
   (the name and the line under it had each broken in two) */
.day-meal-t { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.day-meal-t > b { font-size: 16px; white-space: nowrap; }
.day-meal-kcal { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.day-meal-kcal b { color: var(--text); font-size: 16px; }
.day-meal ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
/* each food a small card: its picture, its name and portion, its calories close by at its end with their
   word (on a wide screen, two or three to a row: the calories had stood across the whole width) */
.day-meal ul { grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 700px) { .day-meal ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .day-meal li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.day-meal li { padding: 8px 10px; border-radius: 14px; background: color-mix(in srgb, var(--meal) 6%, var(--row-alt)); }
.day-meal li em { flex: none; display: flex; flex-direction: column; align-items: center; min-width: 56px; padding: 4px 8px; border-radius: 10px; line-height: 1.1;
  color: color-mix(in srgb, var(--meal) 70%, var(--text)); background: color-mix(in srgb, var(--meal) 14%, transparent); font-variant-numeric: tabular-nums; }
.day-meal li em small { font-size: 10.5px; font-weight: 600; color: var(--muted); }
.day-meal li { display: flex; align-items: center; gap: 10px; }
.day-pic { width: 36px; height: 36px; border-radius: 10px; }
.day-meal li > span:not(.thumb) { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.day-meal li small { color: var(--muted); font-size: 12.5px; }
.day-meal li em { font-style: normal; font-weight: 700; font-size: 14px; }
.day-bars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 22px; }
@media (max-width: 640px) { .day-bars { grid-template-columns: 1fr; } }
.coach-row .time-input { margin-inline-start: auto; }

/* ---------- the AI consent ---------- */
dialog#dialog.consent-dlg { width: min(640px, calc(100vw - 24px)); }
.consent-dlg .dlg-head { background: #6a46f0; color: #fff; border-bottom: 0; }
.consent-dlg .dlg-head .icon-btn { color: #fff; }
.consent-dlg .dlg-head .icon-btn:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.consent2 { display: flex; flex-direction: column; gap: 16px; }
.cs-hero {
  margin: -18px -20px 0; padding: 0 20px 22px; text-align: center; color: #fff;
  background: linear-gradient(180deg, #6a46f0 0%, #8b3fc7 55%, #c42f66 100%); border-radius: 0 0 30px 30px;
}
.cs-art { display: block; margin: 0 auto -4px; }
.cs-art .cs-float { animation: cs-float 3.2s ease-in-out infinite; }
.cs-art .cs-float.b { animation-delay: -1.6s; }
.cs-art .cs-spark { transform-box: fill-box; transform-origin: center; animation: ai-twinkle 2.4s ease-in-out infinite; }
.cs-art .cs-spark.b { animation-delay: -1.2s; }
@keyframes cs-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.cs-lead { margin: 0 auto; max-width: 460px; font-size: 16.5px; line-height: 1.55; font-weight: 500; }
.cs-flow { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 0; padding: 0; counter-reset: cs; }
.cs-flow li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 16px;
  font-size: 13px; font-weight: 600; line-height: 1.35; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); }
.cs-flow li > span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #6a46f0; }
.cs-flow li:not(:last-child)::after { content: ""; position: absolute; top: 26px; inset-inline-end: -8px; width: 8px; border-top: 2px dashed rgba(255, 255, 255, .6); }
.cs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cs-card { --c: var(--good); padding: 14px; border-radius: 20px; background: color-mix(in srgb, var(--c) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 24%, var(--border)); }
.cs-card.no { --c: var(--warn); }
.cs-card h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 16px; }
.cs-mark { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--c); flex: none; }
.cs-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cs-card li { display: flex; align-items: center; gap: 10px; }
.cs-card li > span:last-child { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.cs-card li b { font-size: 14.5px; font-weight: 600; }
.cs-card li small { font-size: 12.5px; color: var(--muted); }
.cs-ico { position: relative; flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center;
  color: color-mix(in srgb, var(--c) 75%, var(--text)); background: color-mix(in srgb, var(--c) 13%, var(--surface)); }
.cs-card.no .cs-ico::after { content: ""; position: absolute; width: 26px; height: 2.4px; border-radius: 2px; background: var(--warn); transform: rotate(-45deg); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c) 13%, var(--surface)); }
.cs-card.no li b { color: var(--muted); }
.cs-note { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border-radius: 14px; font-size: 14px; color: var(--muted); background: var(--row-alt); }
.cs-note svg { flex: none; }
.cs-actions { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.cs-actions .btn { justify-content: center; min-height: 50px; font-size: 16px; }
@media (max-width: 560px) {
  .cs-cols { grid-template-columns: 1fr; }
  .cs-actions { grid-template-columns: 1fr; }
  .cs-flow li { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .cs-art .cs-float, .cs-art .cs-spark { animation: none; } }
@media (max-width: 600px) { dialog#dialog.consent-dlg, dialog#dialog.ai-dialog { width: 100%; max-width: 100%; } }

/* ---------- the admin screen's own page (/admin) ---------- */
.admin-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px max(16px, calc((100vw - 980px) / 2)); background: var(--hero); color: #fff; }
.admin-top .logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 800; font-size: 20px; }
.admin-to-app { color: #fff; font-weight: 600; padding: 8px 14px; border-radius: 12px; background: rgba(255, 255, 255, .14); text-decoration: none; }
/* the top bar's buttons: "לאפליקציה" and, while someone is in, "ניתוק" */
.admin-top-acts { display: inline-flex; align-items: center; gap: 8px; }
button.admin-to-app { border: 0; font: inherit; font-weight: 600; cursor: pointer; }
button.admin-to-app[hidden] { display: none; }
.admin-to-app:hover { background: rgba(255, 255, 255, .24); }
.admin-page { max-width: 980px; margin: 0 auto; padding: 18px 16px 60px; }
body[data-page="admin"] .admin-hero { margin-top: 0; }

/* ---------- inside the phone apps ---------- */
html.native { -webkit-tap-highlight-color: transparent; }
html.native body { overscroll-behavior-y: none; }
html.native .web-only { display: none !important; }

/* =====================================================================================================
   ---------- the side menu (nav.js, nav-art.js): on a computer and an iPad, in place of the bottom bar ----------
   A panel on the right (the start side) with a drawing for each topic. On a wide screen it is open,
   with the names, or a slim rail of the drawings alone (the round button on its edge switches; the
   choice is remembered). Narrower (an iPad upright) it is the rail, and opens over the page with a
   shade behind it. Phones, and anything short (a phone on its side), keep the bottom bar.
   html.sidenav: the app's page (index.html; the admin page shares this stylesheet). html.sn-rail:
   the rail, set before the page paints.
   ===================================================================================================== */
:root { --sn-open: 268px; --sn-rail: 84px; --sn-time: .42s; --sn-ease: cubic-bezier(.22, 1, .36, 1); }
.side-nav, .side-scrim, .sn-tip { display: none; }
.side-nav { --na-paper: #fff; --na-lens: #dcecff; --na-glass: #eaf5ff; --sn-tint: 15%; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .side-nav { --na-paper: #e3eae7; --na-lens: #c4dcf7; --na-glass: rgba(140, 190, 255, .16); --sn-tint: 24%; }
}
:root[data-theme="dark"] .side-nav { --na-paper: #e3eae7; --na-lens: #c4dcf7; --na-glass: rgba(140, 190, 255, .16); --sn-tint: 24%; }

@media (min-width: 700px) and (min-height: 500px) {
  /* the menu's width for what keeps clear of it: set on those few things themselves, never on <html> (a
     custom property changed there is inherited by every element of the page, and opening or closing the
     menu restyled the whole diary: about 70 ms on an iPad, frames lost). The page's padding is not
     animated: it moves once, at the end of the opening (the menu grows over the page) and at once on the
     closing (the page widens under the menu as it goes) - animated, the whole page was laid out again
     in each frame */
  html.sidenav :is(#toast, .to-top, .a11y-fab, .tts-player) { --side-w: calc(var(--sn-rail) + var(--sa-right)); }
  html.sidenav body { padding-inline-start: calc(var(--sn-rail) + var(--sa-right)); padding-bottom: var(--sa-bottom); }
  html.sidenav .bottom-nav { display: none; }
  /* The menu carries the logo; its place in the header stays, so the clock keeps to the middle */
  html.sidenav .top-row > .logo { visibility: hidden; }
  /* a page of days (the diary, the activity page, the reports' one day): the day's arrows and calendar
     in the logo's place (top-days.js) */
  html.sidenav .top-row.has-days > .logo { display: none; }
  /* (clear of the menu's open-close button: it stands 16 px into the page and a finger's target round it 8
     more; at 12 a tap on the day's arrow opened the menu) */
  html.sidenav .top-row.has-days > .top-days { display: inline-flex; margin-inline-start: 36px; }
  /* (and the page's own arrows left out: twice was too much) */
  html.sidenav:has(.top-row.has-days) #view :is(.day-arrows, .rep-daynav) { display: none; }
  html.sidenav .view { padding-bottom: 48px; }
  /* What floated over the bottom bar comes down, and keeps clear of the menu */
  html.sidenav #toast { bottom: calc(28px + var(--sa-bottom)); left: calc((100% - var(--side-w)) / 2); }
  /* (an arrow set on the left stays on the left: right and left both set, a right-to-left page kept the right) */
  html.sidenav .to-top.tt-left { right: auto; left: 20px; }
  html.sidenav .to-top { right: calc(var(--side-w) + 20px); bottom: calc(24px + var(--sa-bottom));
    transition: opacity .25s, transform .35s cubic-bezier(.34, 1.4, .6, 1), visibility 0s linear .35s, right var(--sn-time) var(--sn-ease); }
  /* the menu open over the page (a mouse over the rail, or open on a narrower screen): the arrow and the
     accessibility button keep clear of its open width, not only of the rail's */
  html.sidenav.sn-rail.sn-peek .to-top:not(.tt-left), html.sidenav:not(.sn-rail) .to-top:not(.tt-left) { right: calc(var(--sn-open) + var(--sa-right) + 20px); }
  html.sidenav.sn-rail.sn-peek .a11y-fab.bottom-right, html.sidenav:not(.sn-rail) .a11y-fab.bottom-right { right: calc(var(--sn-open) + var(--sa-right) + 20px); }
  html.sidenav .a11y-fab.bottom-left { bottom: calc(24px + var(--sa-bottom)); }
  html.sidenav .a11y-fab.bottom-right { right: calc(var(--side-w) + 20px); bottom: calc(24px + var(--sa-bottom)); }
  html.sidenav .a11y-fab.middle-right { right: calc(var(--side-w) + 12px); }
  html.sidenav .a11y-fab.bottom-right ~ .to-top { right: auto; left: 20px; }

  html.sidenav .side-nav {
    display: flex; flex-direction: column; position: fixed; z-index: 32; top: 0; bottom: 0; inset-inline-start: 0;
    width: calc(var(--sn-open) + var(--sa-right)); padding: var(--sa-top) var(--sa-right) var(--sa-bottom) 0;
    background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 92%, var(--bg)) 100%);
    border-inline-end: 1px solid var(--border); box-shadow: -6px 0 26px rgba(16, 24, 40, .05);
    transition: width var(--sn-time) var(--sn-ease), box-shadow var(--sn-time);
    -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
    contain: layout style; will-change: width;
  }
  html.sidenav.sn-rail .side-nav { width: calc(var(--sn-rail) + var(--sa-right)); }
  html.sidenav .sn-tip { display: block; }
  /* a finger drags it sideways (nav.js): up and down stays the list's scroll; while dragged it follows the
     finger, its names by how far open it is (--sn-p, on the menu itself) */
  html.sidenav .side-nav, html.sidenav .side-nav * { touch-action: pan-y; }
  html.sidenav .side-scrim { touch-action: none; }
  html.sidenav .side-nav.sn-dragging { transition: none; }
  html.sidenav .side-nav.sn-instant, .side-nav.sn-instant * { transition: none !important; }
  .side-nav.sn-dragging :is(.sn-brand-name, .sn-group span, .sn-label) { opacity: var(--sn-p, 0) !important; transition: none !important; }
  .side-nav.sn-dragging .sn-group::after { opacity: calc(1 - var(--sn-p, 0)) !important; transition: none !important; }
}
/* Wide: open pushes the page aside */
@media (min-width: 1100px) and (min-height: 500px) {
  html.sidenav:not(.sn-rail) :is(#toast, .to-top, .a11y-fab, .tts-player) { --side-w: calc(var(--sn-open) + var(--sa-right)); }
  html.sidenav:not(.sn-rail) body { padding-inline-start: calc(var(--sn-open) + var(--sa-right)); transition: padding-inline-start 0s var(--sn-time); }
}
/* A mouse over the rail opens it over the page for a moment (nav.js), without moving the page */
@media (min-width: 700px) and (min-height: 500px) {
  html.sidenav.sn-rail.sn-peek .side-nav { width: calc(var(--sn-open) + var(--sa-right)); box-shadow: -24px 0 60px rgba(0, 0, 0, .22); }
  html.sn-rail.sn-peek .sn-brand-name, html.sn-rail.sn-peek .sn-group span,
  html.sn-rail.sn-peek .sn-item .sn-label, html.sn-rail.sn-peek .sn-add .sn-label { opacity: 1; transition-delay: .12s; }
  html.sn-rail.sn-peek .sn-group::after { opacity: 0; transition-delay: 0s; }
}
/* Narrower: the rail stays, and open lies over the page, with a shade that closes it */
@media (min-width: 700px) and (max-width: 1099.98px) and (min-height: 500px) {
  html.sidenav .side-scrim {
    display: block; position: fixed; inset: 0; z-index: 31; background: rgba(6, 20, 15, .38);
    opacity: 0; pointer-events: none; transition: opacity var(--sn-time) var(--sn-ease);
  }
  html.sidenav:not(.sn-rail) .side-scrim { opacity: 1; pointer-events: auto; }
  html.sidenav:not(.sn-rail) .side-nav { box-shadow: -24px 0 60px rgba(0, 0, 0, .28); }
}

/* the top: the logo, level with the header's buttons */
.sn-head { flex: none; display: flex; align-items: center; height: 60px; padding-inline-start: 26px; }
.sn-brand { display: inline-flex; align-items: center; gap: 11px; border-radius: 12px; color: var(--text); text-decoration: none; font-weight: 800; font-size: 21px; letter-spacing: -.01em; white-space: nowrap; }
.sn-brand .logo-mark { flex: none; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.sn-brand-name { transition: opacity .25s .1s; }
html.sn-rail .sn-brand-name { opacity: 0; transition-delay: 0s; }

/* open and close: a round button on the menu's edge, moving with it */
.sn-toggle {
  position: absolute; z-index: 2; top: calc(var(--sa-top) + 14px); inset-inline-end: -16px; width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer; color: var(--muted);
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 3px 10px rgba(16, 24, 40, .16);
  transition: color .2s, background .2s, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s;
}
.sn-toggle::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; } /* a bigger target for a finger */
.sn-toggle:active { transform: scale(.94); }
.sn-toggle svg { transition: transform var(--sn-time) var(--sn-ease); }
html.sn-rail .sn-toggle svg { transform: rotate(180deg); }

/* add: what the + in the bottom bar does */
.sn-add {
  flex: none; display: flex; align-items: center; gap: 12px; height: 50px; margin: 4px 12px 8px; padding: 0; padding-inline-start: 7px;
  border: 0; border-radius: 16px; cursor: pointer; overflow: hidden; white-space: nowrap; font: inherit; font-size: 16px; font-weight: 700;
  color: var(--accent-text); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 86%, #fff), var(--brand));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.sn-add:active { transform: scale(.97); }
.sn-add:focus-visible { outline-offset: 3px; }
.sn-add-ico { flex: none; width: 46px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .16); }
.sn-add-ico svg { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }

/* the topics */
.sn-scroll { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 0 14px; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.sn-scroll::-webkit-scrollbar { display: none; }
.sn-sec.sn-end { margin-top: auto; padding-top: 8px; }
.sn-group { position: relative; display: flex; align-items: center; height: 30px; margin: 4px 0 0; padding-inline-start: 26px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--muted); white-space: nowrap; }
.sn-group span { transition: opacity .2s .1s; }
.sn-group::after { content: ""; position: absolute; top: 50%; inset-inline-start: 28px; width: 28px; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--border); opacity: 0; transition: opacity .2s; }
html.sn-rail .sn-group span { opacity: 0; transition-delay: 0s; }
html.sn-rail .sn-group::after { opacity: 1; transition-delay: .1s; }
.sn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sn-item {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; height: 48px; margin-inline: 12px; padding-inline-start: 10px;
  border-radius: 15px; color: var(--text); text-decoration: none; font-size: 15.5px; font-weight: 500; white-space: nowrap; overflow: hidden;
  transition: background .2s; -webkit-touch-callout: none;
}
.sn-item[aria-current="page"] { color: var(--accent); font-weight: 700; }
.sn-item:focus-visible { outline-offset: -2px; }
.sn-label { transition: opacity .2s .1s; }
html.sn-rail .sn-item .sn-label, html.sn-rail .sn-add .sn-label { opacity: 0; transition-delay: 0s; }
/* each drawing on a tile of its own colour */
.sn-art {
  flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) var(--sn-tint), var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 16%, transparent);
  transition: background .25s, box-shadow .25s;
}
.sn-art .na { display: block; overflow: visible; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.sn-item:focus-visible .na { transform: translateY(-1.5px) scale(1.1); }
.sn-item[aria-current="page"] .sn-art {
  background: color-mix(in srgb, var(--c) calc(var(--sn-tint) + 12%), var(--surface));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 45%, transparent), 0 4px 12px color-mix(in srgb, var(--c) 24%, transparent);
}
.sn-item.pop .sn-art { animation: sn-pop .55s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes sn-pop { 0% { transform: scale(.82); } 60% { transform: scale(1.08); } 100% { transform: none; } }
/* the one highlight under the current topic: on the next one at once (the user, on an iPad: "the animation
   takes time to move in the menu from place to place, I want it immediate"; it glided half a second) */
.sn-glide {
  position: absolute; z-index: 0; top: 0; inset-inline: 12px; height: 48px; border-radius: 15px; pointer-events: none;
  background: color-mix(in srgb, var(--accent) 11%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
  transform: translateY(var(--gy, 0)); transition: opacity .2s;
}
.sn-glide.off { opacity: 0; }
.sn-glide.instant { transition: none; }
/* the rail's names, beside it on hover or focus */
.sn-tip {
  position: fixed; z-index: 45; top: 0; right: 0; padding: 7px 12px; border-radius: 10px; pointer-events: none; white-space: nowrap;
  background: var(--text); color: var(--surface); font-size: 13.5px; font-weight: 600; box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
  opacity: 0; transform: translate(6px, -50%); transition: opacity .15s, transform .2s cubic-bezier(.22, 1, .36, 1);
}
.sn-tip::after { content: ""; position: absolute; top: 50%; right: -4px; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 2px; background: inherit; transform: rotate(45deg); }
.sn-tip.show { opacity: 1; transform: translate(0, -50%); }

/* the drawings move a little on hover - with a mouse only: on a touch screen a tap leaves :hover
   stuck, and the drawing would go on moving */
@media (hover: hover) {
.sn-item:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.sn-item[aria-current="page"]:hover { background: transparent; }
.sn-item:hover .na { transform: translateY(-1.5px) scale(1.1); }
.sn-brand:hover .logo-mark { transform: rotate(-8deg) scale(1.08); }
.sn-toggle:hover { color: var(--accent); transform: scale(1.1); box-shadow: 0 5px 16px rgba(16, 24, 40, .22); }
.sn-add:hover { transform: translateY(-1px); box-shadow: 0 10px 22px color-mix(in srgb, var(--brand) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, .22); filter: saturate(1.1); }
.sn-add:hover .sn-add-ico svg { transform: rotate(90deg); }
.na .na-spark { transform-box: fill-box; transform-origin: center; }
.sn-item:hover .na-spark { animation: na-twinkle .8s ease-in-out infinite alternate; }
.sn-item:hover .na-spark.s2 { animation-delay: .25s; }
.sn-item:hover .na-spark.s3 { animation-delay: .5s; }
@keyframes na-twinkle { to { transform: scale(.55) rotate(45deg); opacity: .6; } }
.na-apple, .na-hat, .na-lid { transform-box: fill-box; transform-origin: 50% 100%; }
.sn-item:hover .na-apple, .sn-item:hover .na-hat { animation: na-hop .7s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes na-hop { 40% { transform: translateY(-3px) scale(1.04, .97); } 70% { transform: translateY(0) scale(.97, 1.03); } }
.na-check { stroke-dasharray: 10; stroke-dashoffset: 0; }
.sn-item:hover .na-check { animation: na-draw .6s ease-out; }
@keyframes na-draw { from { stroke-dashoffset: 10; } }
.sn-item:hover .na-lens { animation: na-peek 1.4s ease-in-out infinite; }
@keyframes na-peek { 25% { transform: translate(-1.5px, -1px); } 50% { transform: translate(0, -2px); } 75% { transform: translate(1.5px, -1px); } }
.sn-item:hover .na-steam path { animation: na-steam 1.3s ease-in-out infinite; }
.sn-item:hover .na-steam path:nth-child(2) { animation-delay: .25s; }
.sn-item:hover .na-steam path:nth-child(3) { animation-delay: .5s; }
@keyframes na-steam { 0% { transform: translateY(2px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-3px); opacity: 0; } }
.sn-item:hover .na-lid { animation: na-rattle .26s ease-in-out 4 alternate; }
@keyframes na-rattle { from { transform: translateY(0) rotate(0); } to { transform: translateY(-1.6px) rotate(-5deg); } }
.na-star { transform-box: fill-box; transform-origin: 50% 60%; }
.sn-item:hover .na-star { animation: na-wiggle .7s ease-in-out; }
@keyframes na-wiggle { 25% { transform: rotate(-10deg) scale(1.05); } 60% { transform: rotate(7deg); } }
.na-bars rect { transform-box: fill-box; transform-origin: 50% 100%; }
.sn-item:hover .na-bars rect { animation: na-grow .6s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.sn-item:hover .na-bars .b2 { animation-delay: .06s; }
.sn-item:hover .na-bars .b3 { animation-delay: .12s; }
.sn-item:hover .na-bars .b4 { animation-delay: .18s; }
@keyframes na-grow { from { transform: scaleY(.3); } }
.na-trend { stroke-dasharray: 30; stroke-dashoffset: 0; }
.sn-item:hover .na-trend { animation: na-trend .8s ease-out; }
@keyframes na-trend { from { stroke-dashoffset: 30; } }
.sn-item:hover .na-water { animation: na-wave 1.1s linear infinite; }
@keyframes na-wave { to { transform: translateX(-10px); } }
.sn-item:hover .na-drop { animation: na-fall 1.1s cubic-bezier(.55, 0, .8, .4) infinite; }
@keyframes na-fall { 0% { transform: translate(0, -2px); opacity: 0; } 15% { opacity: 1; } 70% { transform: translate(-12px, 16px); opacity: 1; } 100% { transform: translate(-13px, 18px); opacity: 0; } }
.na-needle { transform-box: view-box; transform-origin: 24px 22.6px; }
.sn-item:hover .na-needle { animation: na-weigh .9s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes na-weigh { 0% { transform: rotate(-80deg); } 55% { transform: rotate(14deg); } 80% { transform: rotate(-5deg); } }
.na-hand { transform-box: view-box; transform-origin: 22px 25.4px; }
.sn-item:hover .na-hand { animation: na-tick 1.6s steps(12) infinite; }
@keyframes na-tick { to { transform: rotate(360deg); } }
.na-moon { transform-box: fill-box; transform-origin: center; }
.sn-item:hover .na-moon { animation: na-rock 1s ease-in-out infinite alternate; }
@keyframes na-rock { from { transform: rotate(-14deg); } to { transform: rotate(10deg) scale(1.08); } }
.na-head { transform-box: view-box; transform-origin: 24px 27px; }
/* the profile's badge: its picture nods around its own middle */
.na-profile .na-head { transform-origin: 30.2px 26px; }
.sn-item:hover .na-head { animation: na-nod .8s ease-in-out; }
@keyframes na-nod { 30% { transform: rotate(-9deg); } 65% { transform: rotate(6deg); } }
.na-cog { transform-box: view-box; transform-origin: 20px 26px; transition: transform .9s cubic-bezier(.34, 1.3, .64, 1); }
.na-cog2 { transform-box: view-box; transform-origin: 36.5px 12.5px; transition: transform .9s cubic-bezier(.34, 1.3, .64, 1); }
.sn-item:hover .na-cog { transform: rotate(40deg); }
.sn-item:hover .na-cog2 { transform: rotate(-70deg); }
}

/* still, for whoever asked for less motion (the system's setting, or the accessibility menu's) */
@media (prefers-reduced-motion: reduce) {
  html.sidenav body, .side-nav, .side-nav *, .side-nav *::before, .side-nav *::after, .side-scrim, .sn-tip { transition-duration: 0s !important; animation: none !important; }
}
html[data-a11y~="motion"].sidenav body, html[data-a11y~="motion"] .side-nav, html[data-a11y~="motion"] .side-nav *, html[data-a11y~="motion"] .side-nav *::before,
html[data-a11y~="motion"] .side-nav *::after, html[data-a11y~="motion"] .side-scrim, html[data-a11y~="motion"] .sn-tip { transition-duration: 0s !important; animation: none !important; }
html[data-a11y~="contrast"] .side-nav { background: #000 !important; border-inline-end: 2px solid #fff; }
html[data-a11y~="light"] .side-nav { background: #fff !important; border-inline-end: 2px solid #000; }
@media print {
  .side-nav, .side-scrim, .sn-tip { display: none !important; }
  html.sidenav body { padding-inline-start: 0 !important; }
}

/* ================= The watch: activity, heart, sleep (watch.js, health-page.js) ================= */
/* The rings draw themselves in */
.act-rings .ring-arc { transform-box: view-box; transform-origin: 50% 50%; animation: ring-in .9s cubic-bezier(.22, 1, .36, 1) both; }
.act-rings .ring-arc:nth-of-type(2) { animation-delay: .1s; }
@keyframes ring-in { from { opacity: 0; transform: rotate(-40deg) scale(.94); } }
@media (prefers-reduced-motion: reduce) { .act-rings .ring-arc { animation: none; } }
html[data-a11y~="motion"] .act-rings .ring-arc { animation: none; }

/* The hero's activity strip, under the macros: a tap opens the activity page */
.dash-moves { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 14px; padding: 12px 14px; border-radius: 18px;
  color: inherit; text-decoration: none; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); transition: background .2s; }
.dash-moves:hover { background: rgba(255, 255, 255, .13); }
/* the sport looks show all of it already */
.dash-hero:has(.hero-sport, .hero-sport2) .dash-moves { display: none; }
.move-line .ml-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 14px; }
.move-line .ml-top i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-inline-end: 6px; background: var(--c); box-shadow: 0 0 8px var(--c); }
.move-line b { font-size: 16px; font-variant-numeric: tabular-nums; }
.move-line small { font-weight: 400; opacity: .75; font-size: 12px; }
.dash-hero .mv-move { --c: #ff9a5c; } .dash-hero .mv-exercise { --c: #5eead4; } .dash-hero .mv-steps { --c: #ffc56b; }
/* on a phone each line has its name over its numbers, as the macros above: all three the same height,
   their bars level (a short one, like "אימון", would otherwise stay on one line) */
.move-line .ml-top > * { white-space: nowrap; }
@media (max-width: 760px) {
  .dash-moves { gap: 10px; padding: 10px 12px; }
  .move-line .ml-top { flex-direction: column; align-items: flex-start; gap: 0; }
  .move-line b { font-size: 15px; }
}

/* The activity tile: the rings and what they hold; the night's sleep */
.act-body { color: inherit; text-decoration: none; }
.act-nums { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.act-nums > div { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.act-nums i { flex: none; width: 8px; height: 8px; border-radius: 50%; align-self: center; }
.act-nums b { font-size: 17px; font-variant-numeric: tabular-nums; }
.act-nums small { color: var(--muted); font-size: 12px; }
.act-steps { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line, rgba(120, 140, 130, .22)); min-width: 0; }
.as-tile { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #fff; background: linear-gradient(150deg, #5eead4, #14b8a6); }
.as-tile svg { width: 26px; height: 26px; }
.as-txt { display: grid; gap: 2px; flex: 1; min-width: 0; }
.as-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.as-big b { font-size: 22px; font-variant-numeric: tabular-nums; direction: ltr; }
.as-big span { color: var(--muted); font-size: 14px; }
.as-sub { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--muted); font-size: 12px; }
.as-sub > span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-inline-end: 10px; border-radius: 50%; background: currentColor; opacity: .5; vertical-align: middle; }
.as-track { height: 7px; margin-top: 4px; border-radius: 4px; background: rgba(20, 184, 166, .2); overflow: hidden; }
.as-track i { display: block; height: 100%; border-radius: 4px; background: #14b8a6; }
/* a narrow card: the footprints without their tile, the word over the number, the distance and the share on one line, the bar under all of it */
@container (max-width: 260px) {
  .act-steps { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 10px; }
  .as-txt { display: contents; }
  .as-tile { grid-row: 1 / 3; width: auto; height: auto; background: none; color: #14b8a6; }
  .as-tile svg { width: 34px; height: 34px; }
  .as-big { flex-direction: column-reverse; align-items: flex-start; gap: 0; line-height: 1.15; }
  .as-big span { font-size: 13px; }
  .as-sub { gap: 0 10px; }
  .as-sub > span + span::before { display: none; }
  .as-of { display: none; }
  .as-track { grid-column: 1 / -1; margin-top: 6px; }
}
.sleep-tile .tile-num b { font-size: 26px; }
.sleep-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; gap: 2px; margin-top: 4px; }
.sleep-bar i { display: block; height: 100%; border-radius: 3px; }
.sleep-keys { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); }
.sleep-keys li { display: inline-flex; align-items: center; gap: 5px; }
.sleep-keys i { width: 8px; height: 8px; border-radius: 3px; }
.sleep-keys b { color: var(--text); font-weight: 600; }

/* ---------- the sport looks of the hero ---------- */
.hero-sport { gap: 34px; }
.sp-col { display: flex; flex-direction: column; gap: 12px; width: 230px; }
.sp-ring-row { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 12px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid color-mix(in srgb, var(--rc) 35%, transparent); }
.sp-ring-row span { font-size: 13px; opacity: .85; }
.sp-ring-row > div { display: flex; flex-direction: column; line-height: 1.2; }
.sp-ring-row b { font-size: 19px; color: var(--rc); font-variant-numeric: tabular-nums; }
.sp-ring-row b small { color: rgba(255, 255, 255, .7); font-weight: 400; font-size: 12px; }
.sp-mini { position: relative; flex: none; display: grid; place-items: center; }
.sp-mini svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sp-mini .sp-pct { position: relative; font-style: normal; font-weight: 700; line-height: 1; letter-spacing: -.3px; color: #fff; white-space: nowrap; }
.sp-rings { position: relative; width: 270px; height: 270px; flex: none; color: #fff; text-decoration: none; filter: drop-shadow(0 0 18px rgba(255, 122, 69, .25)); }
.sp-rings svg { width: 100%; height: 100%; }
.sp-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; text-align: center; }
.sp-center .sp-pre { font-size: 12px; opacity: .75; }
.sp-center b { font-size: 34px; letter-spacing: -.5px; background: linear-gradient(180deg, #fff 30%, #ffc2d1); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp-center > span:not(.sp-pre) { font-size: 13px; opacity: .85; }
/* what is left to eat: under the rings, with room around it */
.sp-mid { display: flex; flex-direction: column; align-items: center; gap: 12px; flex: none; }
.sp-left { padding: 5px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .18); font-size: 13px; }
.sp-left b { font-size: 15px; }
.sp-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; color: inherit; text-decoration: none;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.sp-card > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sp-card span { font-size: 13px; opacity: .8; }
.sp-card b { font-size: 21px; font-variant-numeric: tabular-nums; }
.sp-card small { font-size: 12px; opacity: .75; }
.sp-steps b { color: #ffc56b; }
.sp-water b { color: #7dd3fc; }
.sp-nw { white-space: nowrap; }
.sp-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(135deg, #ff7a59, #ff7a45); color: #fff; }
.sp-card .sp-wname { font-size: 14px; font-weight: 600; white-space: normal; }
.sp-add { align-self: flex-start; margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border: 0; border-radius: 999px;
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .18); }
.sp-add:hover { background: rgba(255, 255, 255, .28); }

.hero-sport2 { gap: 30px; }
.sb-steps { position: relative; width: 250px; height: 250px; flex: none; color: #fff; text-decoration: none; filter: drop-shadow(0 0 22px rgba(251, 191, 36, .25)); }
.sb-steps svg { width: 100%; height: 100%; }
.sb-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.sb-center span { font-size: 13px; opacity: .8; }
.sb-center b { font-size: 44px; letter-spacing: -.5px; background: linear-gradient(180deg, #fff 30%, #c9f7ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sb-center small { margin-top: 8px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: 12px; }
.sb-main { display: flex; flex-direction: column; gap: 14px; width: min(560px, 100%); }
.sb-balance { padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); display: flex; flex-direction: column; gap: 10px; }
.sb-row { display: grid; grid-template-columns: 52px 1fr 70px; align-items: center; gap: 10px; font-size: 14px; }
.sb-row b { text-align: end; font-size: 17px; font-variant-numeric: tabular-nums; }
.sb-track { height: 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.sb-track i { display: block; height: 100%; border-radius: inherit; transition: width .6s ease; }
.sb-row.in .sb-track i { background: linear-gradient(270deg, #ffc56b, #ff9f43); }
.sb-row.in b { color: #ffc56b; }
.sb-row.out .sb-track i { background: linear-gradient(270deg, #ff7a45, #ff7a59); }
.sb-row.out b { color: #ff8fa6; }
.sb-left { margin: 2px 0 0; font-size: 13px; opacity: .9; }
.sb-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sb-chip { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 16px; color: #fff; background: var(--g); box-shadow: 0 8px 20px -10px var(--gs); line-height: 1.2; }
.sb-chip span { font-size: 12px; opacity: .9; }
.sb-chip b { font-size: 21px; font-variant-numeric: tabular-nums; }
.sb-chip small { font-size: 11px; opacity: .85; }
.sb-chip.c-kcal { --g: linear-gradient(135deg, #ff7a45, #ff7a59); --gs: #ff7a45; }
.sb-chip.c-ex { --g: linear-gradient(135deg, #5fbf1f, #22a06b); --gs: #5fbf1f; }
.sb-chip.c-dist { --g: linear-gradient(135deg, #1fb6d6, #4f6ff7); --gs: #1fb6d6; }
.sb-chip.c-work { --g: linear-gradient(135deg, #8b5cf6, #6366f1); --gs: #8b5cf6; }
.sb-chip.c-fl { --g: linear-gradient(135deg, #f5a524, #ef6c2f); --gs: #f5a524; }
.sb-chip.c-hr { --g: linear-gradient(135deg, #ef4466, #c026d3); --gs: #ef4466; }
@media (max-width: 760px) {
  .hero-sport, .hero-sport2 { display: grid; width: 100%; gap: 12px; }
  .hero-sport { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-sport .sp-mid { grid-column: 1 / -1; order: -1; justify-self: center; }
  .hero-sport .sp-rings { width: 250px; height: 250px; }
  .hero-sport .sp-col { width: auto; display: contents; }
  .hero-sport .sp-ring-row { padding: 8px 10px; }
  .hero-sport .sp-ring-row b { font-size: 16px; }
  .hero-sport .sp-work { grid-column: 1 / -1; }
  /* with a third ring (stand), the water takes the whole row, so no square is left alone */
  .hero-sport:has(.sp-ring-row:nth-child(3)) .sp-water { grid-column: 1 / -1; }
  .hero-sport2 { grid-template-columns: minmax(0, 1fr); }
  .hero-sport2 .sb-main { width: 100%; }
  .hero-sport2 .sb-steps { justify-self: center; width: 230px; height: 230px; }
  .sb-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the activity, sport and calorie heroes: in the light a soft pastel glow with dark ink, in the dark deep night colours */
:root {
  --hx-ink: #2b1f3f; --hx-dim: rgba(43, 31, 63, .58); --hx-row: rgba(255, 255, 255, .66); --hx-line: rgba(90, 60, 130, .12); --hx-line-2: rgba(90, 60, 130, .16);
  --hx-glass: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .72)); --hx-glass-hover: linear-gradient(135deg, #fff, rgba(255, 255, 255, .88));
  --hx-btn-shadow: inset 0 1px 0 #fff, 0 8px 18px -10px rgba(80, 40, 110, .35); --hx-rc: 74%; --hx-track: rgba(90, 60, 130, .1); --hx-tick: rgba(90, 60, 130, .35); --hx-pin: #3a2a52;
  --hx-chip: rgba(255, 255, 255, .72); --hx-big: linear-gradient(180deg, #3b2356 15%, #e2571c 95%);
  --hx-act: radial-gradient(120% 90% at 85% 10%, #ffd6e2 0%, transparent 55%), radial-gradient(90% 80% at 10% 90%, #c9efe9 0%, transparent 60%), linear-gradient(160deg, #fff5f7, #f4efff 50%, #eaf7f5);
  --hx-sport: radial-gradient(110% 90% at 90% 0%, #ffd9c6 0%, transparent 60%), radial-gradient(90% 80% at 0% 100%, #dfd8ff 0%, transparent 60%), linear-gradient(160deg, #fff6f0, #f7f1ff 55%, #eff2fb);
  --hx-cs: linear-gradient(150deg, #f7f5fd, #f2f6fb 50%, #eff8f6);
  --hx-act-shadow: 0 16px 30px -18px rgba(120, 60, 140, .45), inset 0 -1px 0 rgba(90, 60, 130, .08); --hx-sport-shadow: 0 16px 30px -18px rgba(150, 80, 50, .45), inset 0 -1px 0 rgba(120, 70, 50, .08);
  --hx-cs-shadow: 0 14px 30px -20px rgba(70, 70, 130, .4), inset 0 0 0 1px rgba(110, 100, 170, .12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hx-ink: #fff; --hx-dim: rgba(255, 255, 255, .65); --hx-row: rgba(255, 255, 255, .07); --hx-line: rgba(255, 255, 255, .14); --hx-line-2: rgba(255, 255, 255, .22);
    --hx-glass: linear-gradient(135deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .05)); --hx-glass-hover: linear-gradient(135deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .09));
    --hx-btn-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 22px -12px rgba(0, 0, 0, .7); --hx-rc: 100%; --hx-track: rgba(255, 255, 255, .12); --hx-tick: rgba(255, 255, 255, .45); --hx-pin: #fff;
    --hx-chip: rgba(255, 255, 255, .1); --hx-big: linear-gradient(180deg, #fff 30%, #ffd2b8);
    --hx-act: radial-gradient(120% 90% at 85% 10%, #3a1240 0%, transparent 55%), radial-gradient(90% 80% at 10% 90%, #0b3a44 0%, transparent 60%), linear-gradient(160deg, #120d1f, #1b1430 50%, #0d1e26);
    --hx-sport: radial-gradient(110% 90% at 90% 0%, #5b1f12 0%, transparent 60%), radial-gradient(90% 80% at 0% 100%, #2a1f5c 0%, transparent 60%), linear-gradient(160deg, #1a1210, #22162c 55%, #12131f);
    --hx-cs: linear-gradient(150deg, #171b2e, #1a2133 50%, #15292f);
    --hx-act-shadow: 0 14px 34px rgba(18, 8, 30, .35); --hx-sport-shadow: 0 14px 34px rgba(30, 12, 8, .35); --hx-cs-shadow: 0 16px 34px -18px rgba(30, 12, 40, .8);
  }
}
:root[data-theme="dark"] {
  --hx-ink: #fff; --hx-dim: rgba(255, 255, 255, .65); --hx-row: rgba(255, 255, 255, .07); --hx-line: rgba(255, 255, 255, .14); --hx-line-2: rgba(255, 255, 255, .22);
  --hx-glass: linear-gradient(135deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .05)); --hx-glass-hover: linear-gradient(135deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .09));
  --hx-btn-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 22px -12px rgba(0, 0, 0, .7); --hx-rc: 100%; --hx-track: rgba(255, 255, 255, .12); --hx-tick: rgba(255, 255, 255, .45); --hx-pin: #fff;
  --hx-chip: rgba(255, 255, 255, .1); --hx-big: linear-gradient(180deg, #fff 30%, #ffd2b8);
  --hx-act: radial-gradient(120% 90% at 85% 10%, #3a1240 0%, transparent 55%), radial-gradient(90% 80% at 10% 90%, #0b3a44 0%, transparent 60%), linear-gradient(160deg, #120d1f, #1b1430 50%, #0d1e26);
  --hx-sport: radial-gradient(110% 90% at 90% 0%, #5b1f12 0%, transparent 60%), radial-gradient(90% 80% at 0% 100%, #2a1f5c 0%, transparent 60%), linear-gradient(160deg, #1a1210, #22162c 55%, #12131f);
  --hx-cs: linear-gradient(150deg, #171b2e, #1a2133 50%, #15292f);
  --hx-act-shadow: 0 14px 34px rgba(18, 8, 30, .35); --hx-sport-shadow: 0 14px 34px rgba(30, 12, 8, .35); --hx-cs-shadow: 0 16px 34px -18px rgba(30, 12, 40, .8);
}

/* ---------- the activity page ---------- */
.hp-hero { margin: -18px -16px 16px; padding: 16px 18px 22px; border-radius: 0 0 32px 32px; color: var(--hx-ink); background: var(--hx-act); box-shadow: var(--hx-act-shadow); }
/* the hero's own glass button, light or deep with the hero */
:is(.hp-hero, .sport-hero) .btn.light { background: var(--hx-glass); border-color: var(--hx-line-2); color: var(--hx-ink); box-shadow: var(--hx-btn-shadow); }
.ah-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ah-head h2 { margin: 0; font-size: 24px; }
.ah-sub { font-size: 13px; opacity: .75; }
.ah-head .btn.light { display: inline-flex; align-items: center; gap: 6px; }
.ah-main { display: flex; align-items: center; justify-content: center; gap: 36px; margin-top: 10px; flex-wrap: wrap; }
.ah-rings { position: relative; width: 210px; height: 210px; filter: drop-shadow(0 0 20px rgba(255, 122, 69, .3)); }
.ah-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.1; }
.ah-center b { font-size: 30px; }
.ah-center span { font-size: 12px; opacity: .75; max-width: 76px; }
.ah-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 250px; }
/* the health ring look: its four numbers in a row of their own under the rings (health-page.js lookHealth) */
.ah-body.look-health .ah-hkpis { flex-basis: 100%; margin-top: 0; }
/* (two of them: each half the row on a wide screen too, not two of four columns with half the row empty) */
.ah-hkpis:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ah-legend li { display: grid; grid-template-columns: 12px 1fr auto auto; align-items: baseline; gap: 10px; padding: 9px 12px; border-radius: 14px; background: var(--hx-row); box-shadow: inset 0 0 0 1px var(--hx-line); }
.ah-legend i { width: 12px; height: 12px; border-radius: 50%; background: var(--rc); box-shadow: 0 0 10px var(--rc); align-self: center; }
.ah-legend span { font-size: 14px; opacity: .85; }
.ah-legend b { font-size: 19px; color: color-mix(in srgb, var(--rc) var(--hx-rc), var(--hx-ink)); font-variant-numeric: tabular-nums; }
.ah-legend b small { color: var(--hx-dim); font-weight: 400; font-size: 12px; }
.ah-legend em { font-style: normal; font-size: 12px; opacity: .7; min-width: 44px; text-align: end; }
/* the rows' columns shared (a subgrid): the numbers start at one line, after the longest name, as
   Hebrew reads (each row's own grid pushed them to its far side, each at another place) */
.ah-legend { grid-template-columns: auto auto 1fr auto; column-gap: 10px; }
.ah-legend li { grid-column: 1 / -1; grid-template-columns: subgrid; }
.ah-legend li > b { justify-self: start; margin-inline-start: 14px; }
@supports not (grid-template-columns: subgrid) { .ah-legend li { grid-template-columns: 12px 6.5em 1fr auto; } }
/* the health ring's rows in two lines: the name and the average (never broken) on the first, the days
   closed under the name (four columns in a phone's width broke the average into three lines) */
.ah-legend.two { grid-template-columns: minmax(0, 1fr); }
.ah-legend.two li { grid-column: auto; grid-template-columns: 12px minmax(0, 1fr) auto; grid-template-areas: "dot name num" ". note note"; align-items: center; row-gap: 3px; }
.ah-legend.two li > i { grid-area: dot; }
.ah-legend.two li > span { grid-area: name; min-width: 0; }
.ah-legend.two li > b { grid-area: num; justify-self: end; margin: 0; white-space: nowrap; }
.ah-legend.two li > em { grid-area: note; min-width: 0; text-align: start; }
.ah-legend .ah-steps { --rc: #ffc56b; }
.ah-legend .ah-flights { --rc: #f5a524; }
.act-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.act-kpis > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--row-alt); line-height: 1.25; }
.act-kpis span { font-size: 13px; color: var(--muted); }
.act-kpis b { font-size: 24px; font-variant-numeric: tabular-nums; }
.act-kpis small { font-size: 12px; color: var(--muted); }
.act-sum .as-rows { display: flex; flex-direction: column; gap: 8px; max-width: 460px; }
.as-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 15px; }
.as-row b { font-size: 18px; font-variant-numeric: tabular-nums; }
.as-row small { color: var(--muted); font-size: 12px; }
.as-row.plus b { color: #e2571c; }
.as-row.minus b { color: #d97706; }
.as-row.total { margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--border); font-weight: 700; }
.as-row.total b { font-size: 22px; color: var(--good); }
.as-row.total.over b { color: var(--warn); }
.act-after { display: flex; flex-direction: column; gap: 12px; }
.aw-card { padding: 14px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, #ff7a45 8%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, #ff7a45 22%, var(--border)); }
.aw-head { display: flex; align-items: center; gap: 12px; }
.aw-head > div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.aw-head small { color: var(--muted); font-size: 13px; }
.aw-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #ff7a59, #ff7a45); }
.aw-kcal { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.1; }
.aw-kcal b { font-size: 22px; color: #e2571c; }
.aw-kcal small { font-size: 11px; color: var(--muted); }
.aw-tips { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.aw-tips li { display: flex; gap: 10px; align-items: baseline; }
.aw-tips i { flex: none; width: 9px; height: 9px; border-radius: 50%; transform: translateY(-1px); }
.aw-tips i.b { background: #ff7a45; }
.aw-tips i.p { background: #f08a24; }
.aw-tips i.c { background: #22a06b; }
.aw-tips i.w { background: #0ea5e9; }
.week-act { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wa-day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; border-radius: 14px; font-size: 13px; color: var(--muted); }
.wa-day.today { background: var(--row-alt); color: var(--text); font-weight: 700; }
.wa-day svg { width: 100%; max-width: 52px; height: auto; }
/* each day a button opening its rings' window (health-page.js openRingsWindow) */
button.wa-day { min-width: 0; border: 0; background: none; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background .2s, transform .15s; }
button.wa-day:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
button.wa-day:active, button.wa-day.picked { transform: scale(.94); background: color-mix(in srgb, #ff7a45 12%, var(--row-alt)); }
button.wa-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* the window: the day's rings large, each ring with its numbers, a bar and what it counts */
.jr-info .wa-big { display: grid; place-items: center; width: 104px; height: 104px; margin-top: -6px; filter: drop-shadow(0 8px 18px rgba(255, 122, 69, .25)); }
.wa-why { display: grid; gap: 8px; width: 100%; margin: 4px 0 0; padding: 0; list-style: none; text-align: start; }
.wa-why li { display: grid; gap: 5px; padding: 8px 11px 9px; border-radius: 15px; background: color-mix(in srgb, var(--c) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent); }
.ww-top { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.ww-top > i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.ww-top > span { margin-inline-start: auto; font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.ww-top > span b { color: var(--text); font-size: 15px; }
.ww-bar { height: 7px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--c) 18%, transparent); }
.ww-bar i { display: block; height: 100%; border-radius: inherit; background: var(--c); }
.wa-why small { font-size: 12.5px; line-height: 1.45; color: color-mix(in srgb, var(--text) 78%, var(--muted)); }
.wa-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; width: 100%; margin-top: 2px; }
.wa-star { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #d97706; }
.wa-goals { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--accent); text-decoration: none; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.wa-all { position: absolute; top: 2px; inset-inline-end: 4px; color: #f5b52e; }
.wchart { margin: 10px 0 4px; }
.wc-plot { position: relative; height: 150px; }
.wc-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 4px; }
.wc-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; min-width: 0; }
.wc-bar i { display: block; width: 100%; max-width: 28px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #ffd38a, #f5a524); opacity: .6; transition: height .5s ease; }
/* a day that reached the goal green, one that did not red (the colours of a day's result in every bar chart); today, still going, as before */
.wc-bar.hit i { opacity: 1; background: linear-gradient(180deg, #86c26f, #4f9a42); }
.wc-bar.miss i { opacity: 1; background: linear-gradient(180deg, #d9705f, #b23f33); }
.wc-bar.mid i { opacity: 1; background: linear-gradient(180deg, #e3b26a, #c58a32); }
/* the sleep chart's key: the nights' colours by their quality (health-page.js sleepGrade) */
.wc-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.wc-legend span { display: inline-flex; align-items: center; gap: 5px; }
.wc-legend i { width: 10px; height: 10px; border-radius: 3px; }
.wc-legend i.hit { background: #4f9a42; } .wc-legend i.mid { background: #c58a32; } .wc-legend i.miss { background: #b23f33; }
.wc-goal { position: absolute; inset-inline: 0; height: 0; border-top: 2px dashed color-mix(in srgb, var(--muted) 55%, transparent); z-index: 1; pointer-events: none; }
.wc-goal em { position: absolute; inset-inline-start: 0; bottom: 2px; font-style: normal; font-size: 11px; color: var(--muted); }
.wc-x { display: flex; gap: 4px; margin-top: 4px; }
/* the values' axis at the end side (watch.js bars): faint lines across, their numbers in a gutter the
   bars and the days keep clear of */
.wchart.has-axis .wc-bars { inset-inline-end: 40px; }
.wchart.has-axis .wc-x { padding-inline-end: 40px; }
.wc-axis { position: absolute; inset: 0; pointer-events: none; }
.wc-axis span { position: absolute; inset-inline: 0; height: 0; border-top: 1px solid color-mix(in srgb, var(--muted) 16%, transparent); }
.wc-axis em { position: absolute; inset-inline-end: 0; transform: translateY(-50%); font-style: normal; font-size: 10.5px; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; }
.wc-x span { flex: 1; min-width: 0; text-align: center; font-size: 11px; color: var(--muted); }
.wspark { margin: 6px 0 0; }
.wspark svg { width: 100%; height: 80px; display: block; }
.wspark figcaption { font-size: 12px; color: var(--muted); }
.act-heart .hk-rest b { color: #e2571c; }
.sl-last { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; margin-bottom: 14px; }
.sl-last > div:first-child { display: flex; flex-direction: column; line-height: 1.2; }
.sl-last span { font-size: 13px; color: var(--muted); }
.sl-last > div:first-child b { font-size: 34px; color: #6d5dfc; }
.sl-last small { font-size: 12px; color: var(--muted); }
.aw-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.aw-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.aw-list li:last-child { border-bottom: 0; }
.aw-list li > div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.aw-list small { color: var(--muted); font-size: 12px; }
.aw-list .aw-ico { width: 36px; height: 36px; border-radius: 12px; }
.aw-meta { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; color: var(--muted); white-space: nowrap; }
.aw-meta b { font-size: 15px; color: var(--text); }
@media (max-width: 760px) {
  .ah-main { gap: 16px; }
  .ah-legend { min-width: 0; width: 100%; }
  .sl-last { grid-template-columns: 1fr; }
}

/* ---------- the reports' health ring ---------- */
.health-ring { background: linear-gradient(160deg, color-mix(in srgb, #ff7a45 6%, var(--surface)), var(--surface) 45%, color-mix(in srgb, #a78bfa 6%, var(--surface))); }
.hr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hr-head h3 { margin: 0; }
.hr-head .btn { display: inline-flex; align-items: center; gap: 4px; }
.hr-main { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin: 14px 0; }
.hr-rings { position: relative; width: 168px; height: 168px; flex: none; }
.hr-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.hr-center b { font-size: 22px; }
.hr-center span { font-size: 11px; color: var(--muted); }
.hr-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; flex: 1; min-width: 220px; }
.hr-legend li { display: flex; gap: 10px; align-items: flex-start; }
.hr-legend i { flex: none; width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: var(--rc); box-shadow: 0 0 8px var(--rc); }
.hr-legend li > div { display: flex; flex-direction: column; line-height: 1.25; }
.hr-legend span { font-size: 13px; color: var(--muted); }
.hr-legend b { font-size: 20px; color: color-mix(in srgb, var(--rc) 75%, var(--text)); font-variant-numeric: tabular-nums; }
.hr-legend b small { font-size: 12px; font-weight: 400; color: var(--muted); }
.hr-closed { font-size: 12px; color: var(--muted); }
.hr-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.hr-kpis > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 16px; line-height: 1.25; background: var(--row-alt); border-top: 3px solid var(--kc); }
.hr-kpis span, .hr-kpis small { font-size: 12px; color: var(--muted); }
.hr-kpis b { font-size: 22px; font-variant-numeric: tabular-nums; }
.hr-kpis .k-steps { --kc: #f5a524; }
.hr-kpis .k-move { --kc: #ff7a45; }
.hr-kpis .k-ex { --kc: #14b8a6; }
.hr-kpis .k-sleep { --kc: #6366f1; }
.hr-kpis .k-heart { --kc: #ef4466; }
.hr-sub { margin: 20px 0 8px; font-size: 15px; }
.hr-workouts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hr-workouts li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--row-alt); }
.hr-workouts li > div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.hr-workouts small { font-size: 12px; color: var(--muted); }
.hw-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #ff7a59, #ff7a45); }
.hw-kcal { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.hw-kcal b { color: #e2571c; font-size: 17px; }
.hw-kcal small { font-size: 11px; color: var(--muted); }

/* the profile's hint from the steps; the fast's sleep */
.act-hint { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 4px; padding: 10px 14px; border-radius: 14px; font-size: 14px;
  background: color-mix(in srgb, #ff7a45 8%, var(--surface)); border: 1px solid color-mix(in srgb, #ff7a45 25%, var(--border)); }
.fast-sleep { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 6px 12px; border-radius: 999px; font-size: 14px; background: color-mix(in srgb, #6366f1 12%, var(--surface)); }

/* ---------- sport and nutrition (sport-page.js) ---------- */
.sport-hero { margin: -18px -16px 16px; padding: 16px 18px 22px; border-radius: 0 0 32px 32px; color: var(--hx-ink); background: var(--hx-sport); box-shadow: var(--hx-sport-shadow); }
.sh-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sh-head h2 { margin: 0; font-size: 24px; }
.sh-sub { font-size: 13px; opacity: .75; }
.sh-head .btn.light { display: inline-flex; align-items: center; gap: 6px; }
.sh-head > div:first-child, .ah-head > div:first-child { flex: 1; min-width: 0; }
.ah-acts { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; max-width: 62%; }
/* a round glass button the height of the link beside it, its drawing only (the watch's update) */
.hero-round { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; padding: 0; color: var(--hx-ink); cursor: pointer;
  background: var(--hx-glass); border: 1px solid var(--hx-line-2); box-shadow: var(--hx-btn-shadow); transition: transform .15s, background .2s; }
.hero-round:hover { background: var(--hx-glass-hover); }
.hero-round:active { transform: scale(.94); }
.hero-round:focus-visible { outline: 2px solid var(--hx-ink); outline-offset: 3px; }
.hero-round:disabled { cursor: progress; }
.hero-round.busy svg { animation: auth-spin-r .9s linear infinite; }
@keyframes auth-spin-r { to { transform: rotate(360deg); } }
/* a phone with both (the link and the round button): they go under the title, which keeps its line */
@media (max-width: 480px) {
  .ah-head:has(.ah-acts > :nth-child(2)) { flex-wrap: wrap; }
  .ah-head:has(.ah-acts > :nth-child(2)) > div:first-child { flex-basis: 100%; }
  .ah-head:has(.ah-acts > :nth-child(2)) .ah-acts { max-width: none; width: 100%; justify-content: space-between; padding-inline-end: 4px; }
}
.ah-acts .btn.light { white-space: nowrap; }

/* the link between the activity page and the sport page, at the top of each: a glass pill with a
   glowing badge (a beating heart, a flickering bolt), the page's name and an arrow */
.hero-link { flex: none; display: inline-flex; align-items: center; gap: 9px; padding: 5px; padding-inline-end: 10px; border-radius: 999px;
  color: var(--hx-ink); text-decoration: none; white-space: nowrap;
  background: var(--hx-glass); border: 1px solid var(--hx-line-2);
  box-shadow: var(--hx-btn-shadow); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .15s, background .2s, border-color .2s; }
.hero-link:hover { background: var(--hx-glass-hover); }
.hero-link:active { transform: scale(.96); }
.hero-link:focus-visible { outline: 2px solid var(--hx-ink); outline-offset: 3px; }
.hl-ico { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: var(--hl, linear-gradient(135deg, #ff6b8b, #e5487f)); box-shadow: 0 0 0 3px rgba(255, 255, 255, .1), 0 0 18px var(--hl-glow, rgba(229, 72, 127, .6)); }
.hl-ico svg { display: block; }
.hl-txt { display: flex; flex-direction: column; line-height: 1.15; font-size: 14px; font-weight: 700; }
.hl-txt small { font-size: 11px; font-weight: 500; opacity: .7; }
.hl-go { display: grid; opacity: .65; transition: transform .2s; }
.hero-link:hover .hl-go { transform: translateX(-3px); }
.hero-link.to-sport { --hl: linear-gradient(135deg, #ffc15a, #ff7a45); --hl-glow: rgba(255, 122, 69, .6); }
.to-activity .hl-ico svg, .to-watch .hl-ico svg { animation: hl-beat 2.4s ease-in-out infinite; transform-origin: center; }
.to-sport .hl-ico svg { animation: hl-zap 3s ease-in-out infinite; transform-origin: center; }
@keyframes hl-beat { 0%, 45%, 100% { transform: scale(1); } 10% { transform: scale(1.2); } 20% { transform: scale(1); } 30% { transform: scale(1.12); } }
@keyframes hl-zap { 0%, 80%, 100% { transform: none; opacity: 1; } 84% { transform: rotate(-12deg) scale(1.15); } 88% { opacity: .55; } 92% { transform: rotate(8deg) scale(1.1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hl-ico svg { animation: none !important; } }
@media (max-width: 380px) { .hl-txt small { display: none; } .hl-ico { width: 30px; height: 30px; } }
.sh-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.sh-kpis > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 16px; line-height: 1.25;
  background: var(--hx-row); border: 1px solid var(--hx-line); border-top: 3px solid var(--kc, #ffa63d); }
.sh-kpis span { font-size: 12px; opacity: .8; }
.sh-kpis b { font-size: 24px; font-variant-numeric: tabular-nums; }
.sh-kpis small { font-size: 11px; opacity: .7; }
.sh-kpis .k-spent { --kc: #ff7a45; }
.sh-kpis .k-eaten { --kc: #ffc56b; }
.sh-kpis .k-bal { --kc: #94a3b8; }
.sh-kpis .k-bal.minus { --kc: #2dd4bf; }
.sh-kpis .k-bal.plus { --kc: #f87171; }
.sh-kpis .k-week { --kc: #a78bfa; }
.sp-target .st-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.sp-target .st-row > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--row-alt); line-height: 1.25; }
.sp-target .st-row > div:first-child { background: color-mix(in srgb, #ff7a45 10%, var(--surface)); border: 1px solid color-mix(in srgb, #ff7a45 30%, var(--border)); }
.sp-target span, .sp-target small { font-size: 13px; color: var(--muted); }
.sp-target .st-row b { font-size: 26px; font-variant-numeric: tabular-nums; }
/* each card's drawing at its other side, where no words are (sport-page.js ST_ART); a card too narrow leaves it out */
.sp-target .st-row > div { position: relative; container-type: inline-size; }
.st-art { position: absolute; inset-inline-end: 14px; top: 50%; width: 62px; height: 62px; translate: 0 -50%; pointer-events: none; }
.st-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
@container (max-width: 250px) { .st-art { display: none; } }
/* the note under them: its number in the text's own size (the "i" stays on its line), and room before its button */
.sp-target .note b { font-size: inherit; color: var(--text); }
.sp-target .note + :is(.btn, a.btn) { margin-top: 12px; }
.sp-target .note.ok { color: var(--good); }
.sp-today h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.load-chip { padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #fff; background: var(--lc); }
.macro-plan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; margin-top: 10px; }
.plan-row .pr-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; }
.plan-row b { font-size: 18px; font-variant-numeric: tabular-nums; }
.plan-row b small { font-weight: 400; font-size: 12px; color: var(--muted); }
.pr-track { height: 10px; margin: 6px 0 4px; border-radius: 999px; background: var(--track); overflow: hidden; }
.pr-track i { display: block; height: 100%; border-radius: inherit; background: var(--pc); transition: width .6s ease; }
.pr-why { font-size: 12px; color: var(--muted); }
.plan-row.p-protein { --pc: linear-gradient(270deg, #f08a24, #ffc56b); }
.plan-row.p-carbs { --pc: linear-gradient(270deg, #0fb5a6, #5eead4); }
.plan-row.p-fat { --pc: linear-gradient(270deg, #8b5cf6, #c4b5fd); }
.plan-row.p-water { --pc: linear-gradient(270deg, #2f8ff0, #7cc8ff); }
/* (its line first in the panel: no space over it beyond the panel's own) */
.sp-fuel > p.muted { margin-top: 0; }
.fuel-line { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fuel-line li { position: relative; display: flex; gap: 10px; padding: 14px; border-radius: 16px; background: var(--row-alt); }
.fuel-line li > div { display: flex; flex-direction: column; min-width: 0; }
.fuel-line b { font-size: 16px; }
.fuel-line small { font-size: 12px; color: var(--muted); }
.fuel-line p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; }
.fl-dot { flex: none; width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: var(--fc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fc) 25%, transparent); }
.fuel-line .f-before { --fc: #ffa63d; }
.fuel-line .f-during { --fc: #2dd4bf; }
.fuel-line .f-after { --fc: #a78bfa; }
/* by the card's own width (an iPad's or the site's half column too, not only a phone): before, during and
   after one under another, each its title and its time on a line and its words across under them */
.sp-fuel { container: fuel / inline-size; }
@container fuel (max-width: 700px) {
  .fuel-line { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .fuel-line li > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 8px; }
  .fuel-line li p { grid-column: 1 / -1; }
}
.tvr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tvr-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 14px; border-radius: 18px; background: var(--row-alt); }
.tvr-col h4 { grid-column: 1 / -1; margin: 0 0 4px; font-size: 15px; }
.tvr-col.train { background: color-mix(in srgb, #ff7a45 9%, var(--surface)); }
.tvr-col.rest { background: color-mix(in srgb, #2dd4bf 8%, var(--surface)); }
.tvr-col > div { display: flex; flex-direction: column; line-height: 1.25; }
.tvr-col span, .tvr-col small { font-size: 12px; color: var(--muted); }
.tvr-col b { font-size: 18px; font-variant-numeric: tabular-nums; }
.ec-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.ec-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ec-legend i { width: 12px; height: 12px; border-radius: 4px; }
.ec-legend i.in, .ec-bars i.in { background: linear-gradient(180deg, #86c26f, #4f9a42); }
.ec-legend i.in.w, .ec-bars i.in.w { background: linear-gradient(180deg, #d9705f, #b23f33); }
.ec-legend i.out, .ec-bars i.out { background: linear-gradient(180deg, #b3a8f0, #7c6fd6); }
.ec-plot { display: flex; align-items: flex-end; gap: 6px; height: 170px; }
.ec-day { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ec-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.ec-bars i { display: block; width: 42%; max-width: 14px; border-radius: 5px 5px 2px 2px; }
.ec-day span { display: flex; flex-direction: column; align-items: center; font-size: 11px; line-height: 1.15; color: var(--muted); }
/* a day's card (sport-page.js energyCard): over the chart, a mouse over a day or a tap on it */
.ec-wrap { position: relative; }
.ec-day { cursor: pointer; border-radius: 10px; -webkit-tap-highlight-color: transparent; transition: background .15s; }
.ec-day.on { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ec-day.on span { color: var(--text); font-weight: 700; }
.ec-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* a window of its own over the panel, not its colour: raised (over the legend, the day's bars in
   sight), a shade of the accent, its edge and a soft ring in it, a deep shadow */
.ec-tip { position: absolute; z-index: 4; top: -82px; width: min(330px, 100%); display: grid; gap: 7px; padding: 11px 13px 12px; border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-2)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent), 0 24px 48px -16px rgba(0, 0, 0, .7), 0 6px 14px -6px rgba(0, 0, 0, .35);
  pointer-events: none; animation: ec-tip-in .15s ease-out; }
.ec-tip.pinned { pointer-events: auto; }
.ec-tip[hidden] { display: none; }
@keyframes ec-tip-in { from { opacity: 0; transform: translateY(4px); } }
.ec-tip-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 26px; }
.ec-tip-day { font-size: 13.5px; }
/* the X, top left: small and quiet, its touch wider than it looks */
.ec-tip-x { position: relative; flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-inline-end: -3px; padding: 0; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s, color .15s, transform .15s; }
.ec-tip-x::before { content: ""; position: absolute; inset: -9px; }
.ec-tip-x:hover { color: var(--text); background: color-mix(in srgb, var(--text) 15%, transparent); }
.ec-tip-x:active { transform: scale(.9); }
.ec-tip-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ec-tip-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ec-tip-row { display: grid; gap: 1px; align-content: start; padding: 7px 8px; border-radius: 10px; background: color-mix(in srgb, var(--surface) 72%, transparent); font-size: 12.5px; }
.ec-tip-row b { font-size: 15px; }
.ec-tip-row small { font-size: 11px; line-height: 1.35; color: var(--muted); }
.ec-tip-row span { display: flex; align-items: center; gap: 5px; color: var(--muted); }
.ec-tip-row i { flex: none; width: 9px; height: 9px; border-radius: 3px; }
.ec-tip-row.in.g i { background: #5aa84a; }
.ec-tip-row.in.w i { background: #c4503f; }
.ec-tip-row.out i { background: #9187e6; }
.ec-tip-bal { display: grid; gap: 2px; padding: 6px 9px; border-radius: 10px; font-size: 13px; }
.ec-tip-bal span { font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.ec-tip-bal.g { color: color-mix(in srgb, #22c55e 72%, var(--text)); background: color-mix(in srgb, #22c55e 14%, transparent); }
.ec-tip-bal.w { color: color-mix(in srgb, #ef4444 76%, var(--text)); background: color-mix(in srgb, #ef4444 14%, transparent); }
.ec-tip-none { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.ec-tip-go { display: flex; gap: 8px; margin-top: 4px; }
.ec-tip-go a { flex: 1; padding: 5px 8px; border-radius: 10px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--surface) 72%, transparent); border: 1px solid var(--border); text-decoration: none; }
.ec-hint { margin: 8px 0 0; font-size: 12px; color: var(--muted); text-align: center; }
@media (prefers-reduced-motion: reduce) { .ec-tip { animation: none; } }
.ec-day span small { font-size: 9.5px; opacity: .8; }
/* a day without a number: its place kept, a short dashed stub */
.ec-legend i.none, .ec-bars i.none { background: none; border: 1.5px dashed color-mix(in srgb, var(--muted) 55%, transparent); }
.ec-bars i.none { height: 8%; width: 30%; }
.sport-locked { text-align: center; }
.sl-ico { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, #ff7a45, #a78bfa); margin-bottom: 8px; }
.hr-links { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 760px) {
  .sh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .macro-plan, .fuel-line, .sp-target .st-row { grid-template-columns: 1fr; }
  .tvr { grid-template-columns: 1fr; }
  .ec-plot { gap: 3px; }
}

/* the sport page's ring: four looks, the switch in its corner (look-switch.js) */
.sr-panel { position: relative; margin-top: 14px; padding: 14px 16px; border-radius: 22px; background: var(--hx-row); border: 1px solid var(--hx-line); }
.sr-panel .hs-pick { top: 10px; left: 10px; }
.sr-panel .hs-switch { color: var(--hx-ink); background: var(--hx-glass); border-color: var(--hx-line-2); box-shadow: var(--hx-btn-shadow); }
/* the dials' lines and pins, light or deep with the hero (sport-page.js) */
.sr-track { stroke: var(--hx-track); }
.sr-tickmark { stroke: var(--hx-tick); }
.sr-pin { stroke: var(--hx-pin); fill: var(--hx-pin); }
.sr-hub { fill: var(--hx-row); }
.sr-hit { fill: var(--hx-pin); }
.sr-body { display: flex; align-items: center; justify-content: center; gap: 36px; flex-wrap: wrap; }
.sr-art { position: relative; width: 230px; height: 230px; flex: none; color: var(--hx-ink); text-decoration: none; }
.sr-art svg { width: 100%; height: 100%; display: block; }
.sr-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.1; pointer-events: none; }
.sr-center span { font-size: 12px; opacity: .8; }
.sr-center b { font-size: 32px; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.sr-center small { font-size: 12px; opacity: .75; margin-top: 2px; }
.sr-center.bal { justify-content: flex-end; padding-bottom: 2px; }
.sr-center.bal b { font-size: 28px; }
.sr-center.week b { font-size: 24px; }
.sr-center.week small { max-width: 80px; }
.sr-center.fuel b { font-size: 24px; }
.sr-load { margin-bottom: 4px; padding: 2px 10px; border-radius: 999px; font-size: 11px !important; font-weight: 700; opacity: 1 !important; color: #fff; background: var(--lc); }
.sr-tick { font-size: 11px; fill: var(--hx-dim); }
.sr-day { font-size: 12px; fill: var(--hx-dim); }
.sr-day.today { fill: var(--hx-ink); font-weight: 700; }
.sr-needle { transform-origin: 110px 98px; transform: rotate(var(--turn, 0deg)); animation: sr-needle 1s cubic-bezier(.22, 1.4, .36, 1) both; }
@keyframes sr-needle { from { transform: rotate(-60deg); opacity: 0; } }
/* the balance's arc: its segments, the scale inside, the goal's mark outside (lookBalance) */
.sr-scale { font-size: 8.5px; font-weight: 700; fill: var(--hx-dim); font-variant-numeric: tabular-nums; }
.sr-inner { stroke: var(--hx-line); fill: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sr-seg.on { filter: drop-shadow(0 0 2.5px rgba(255, 255, 255, .2)); } }
:root[data-theme="dark"] .sr-seg.on { filter: drop-shadow(0 0 2.5px rgba(255, 255, 255, .2)); }
@media (prefers-reduced-motion: reduce) { .sr-needle { animation: none; } }
/* the energy balance: the goal by now marked on the arc (as the legend's row), the needle resting while nothing is written */
.sr-goal { fill: #a78bfa; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.sr-idle { opacity: .45; }
/* what the body spent, in its parts: under it, set in and smaller */
.sr-legend li.sub { margin-inline-start: 22px; padding-block: 6px; }
.sr-legend li.sub span { font-size: 13px; }
.sr-legend li.sub b { font-size: 16px; }
.sr-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 260px; }
.sr-legend li { display: grid; grid-template-columns: 12px 1fr auto auto; align-items: baseline; gap: 10px; padding: 8px 12px; border-radius: 14px; background: var(--hx-row); box-shadow: inset 0 0 0 1px var(--hx-line); }
.sr-legend i { width: 11px; height: 11px; border-radius: 50%; background: var(--rc); box-shadow: 0 0 10px var(--rc); align-self: center; }
.sr-legend span { font-size: 14px; opacity: .85; }
.sr-legend b { font-size: 18px; color: color-mix(in srgb, var(--rc) var(--hx-rc), var(--hx-ink)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sr-legend b small { font-size: 12px; font-weight: 400; color: var(--hx-dim); }
.sr-legend em { font-style: normal; font-size: 12px; opacity: .7; min-width: 40px; text-align: end; white-space: nowrap; }
@media (max-width: 760px) {
  .sr-panel { padding: 12px; }
  .sr-body { gap: 14px; padding-top: 18px; }
  .sr-art { width: 210px; height: 210px; }
  .sr-legend { min-width: 0; width: 100%; }
}

/* settings › units: a row for each kind, its choices beside it */
.units-set { display: flex; flex-direction: column; gap: 10px; }
.uset-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.uset-row > span { font-weight: 600; }
.uset-row .segmented button { padding: 7px 14px; }

/* a page pulled aside by a swipe (swipe-nav.js): a shadow along its edge, covering the screen;
   under it the page it goes to (its copy as it was left), still and a little shaded until it is in */
.view.page-swiping { will-change: transform; box-shadow: 0 0 40px rgba(0, 0, 0, .28); background: var(--bg); min-height: 100vh; }
.swipe-under { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--bg); }
.swipe-under > .view { will-change: transform; }
.swipe-under *, .swipe-under *::before, .swipe-under *::after, .page-leave *, .page-leave *::before, .page-leave *::after { animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition: none !important; }
/* A page sliding in or out (a move, a swipe) never widens the page: on a phone that would zoom it out
   for a moment. clip, unlike hidden, doesn't make a scroll box, so the sticky header stays put. */
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }
/* moving between pages (swipe-nav.js playEntrance): the page left behind, under the one coming in */
.page-leave { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.page-leave > .view { will-change: transform, opacity; }
.page-leave > .swipe-dim { opacity: 0; }
.view.page-entering { will-change: transform, opacity; background: var(--bg); min-height: 100vh; }
.view.page-entering.push { box-shadow: 0 0 40px rgba(0, 0, 0, .28); }
.swipe-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .3); pointer-events: none; }
.swipe-sketch { display: grid; gap: 14px; align-content: start; }
.swipe-sketch i { display: block; height: 120px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); opacity: .7; }
.swipe-sketch i:first-child { height: 44px; width: 45%; background: var(--surface-2); box-shadow: none; }
.swipe-sketch i:nth-child(2) { height: 210px; }
/* a page's picture until the page itself is drawn (app.js): still, and a sketch that breathes */
.page-shot * { animation: none !important; transition: none !important; }
.page-sketch i { animation: sketch-breathe 1.2s ease-in-out infinite !important; }
/* another day on its way: what is on the page dims, its frame (the top's colours) stays */
.view.page-wait, .view.page-hold { pointer-events: none; }
/* the page on screen while the next one, never drawn before, is on its way (app.js): it stays, barely
   fading after a moment, until the next one comes in over it (a tab of the bottom bar: it stays as it
   is, the slide is the only motion) */
.view.page-hold:not(.hold-still) > * { opacity: .88; transition: opacity .3s ease .25s; }
.view.page-wait > :not(.dash-hero), .view.page-wait > .dash-hero > :not(.aurora) { opacity: .55; transition: opacity .25s ease; }
@keyframes sketch-breathe { 50% { opacity: .45; } }

/* the account on the profile page (account.js): the email, the ways in, a new password */
.pa-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; }
.pa-mail { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pa-ico { flex: none; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #3b82f6, #6366f1); box-shadow: 0 8px 18px -10px #4f46e5; }
.pa-out .pa-ico { background: linear-gradient(135deg, #0c7553, #22a06b); box-shadow: 0 8px 18px -10px #0c7553; }
.pa-out .btn { justify-self: start; }
.pa-mail-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pa-mail-text small { font-size: 13px; }
.pa-addr { font-size: 17px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .2s; }
.pa-addr.masked { color: var(--muted); letter-spacing: .5px; }
.pa-addr:not(.masked) { white-space: normal; overflow-wrap: anywhere; } /* shown: the whole address, on two lines if it must */
.pa-btn { flex: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: color .2s, background .2s, border-color .2s, transform .15s; }
.pa-btn:hover { color: var(--text); }
.pa-btn:active { transform: scale(.92); }
.pa-btn[aria-pressed="true"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.pa-btn.done { color: #fff; background: var(--good); border-color: transparent; }
.pa-ways { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 12px; border-top: 1px dashed var(--border); font-size: 13px; }
.pa-ways > .muted { margin-inline-end: 2px; }
.pa-way { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-weight: 600; }
.pa-list { margin-top: 10px; }
.pa-row { gap: 14px; }
.pa-row-ico { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; }
.pa-row-ico.password { background: linear-gradient(135deg, #0c7553, #22a06b); }
.pa-row-ico.signout { background: linear-gradient(135deg, #64748b, #334155); }
.pa-row-ico.delete { background: linear-gradient(135deg, #f87171, #e5484d); }
.pa-row-ico.mails { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.pa-mails .set-label small { line-height: 1.45; margin-top: 2px; }
.pa-row.danger .set-label { color: var(--warn); }
.pa-row.danger .set-label small { color: var(--muted); }
@media (max-width: 380px) { .pa-btn { width: 36px; height: 36px; } .pa-addr { font-size: 15px; } }

/* the new password window */
.pw-form { gap: 14px; }
.pw-art { justify-self: center; width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #0c7553, #22a06b); box-shadow: 0 12px 26px -12px #0c7553; animation: pw-pop .5s cubic-bezier(.3, 1.5, .5, 1) both; }
.pw-lead { margin: 0; text-align: center; color: var(--muted); line-height: 1.6; }
.pw-lead b { color: var(--text); }
.pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: -4px; }
.pw-meter span { height: 6px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); transition: background .25s, border-color .25s; }
.pw-meter[data-level="1"] span:nth-child(1) { background: #e5484d; border-color: transparent; }
.pw-meter[data-level="2"] span:nth-child(-n+2) { background: #f59e0b; border-color: transparent; }
.pw-meter[data-level="3"] span:nth-child(-n+3) { background: #84cc16; border-color: transparent; }
.pw-meter[data-level="4"] span { background: #22a06b; border-color: transparent; }
.pw-level { min-height: 1.2em; margin-top: -8px; font-size: 13px; color: var(--muted); }
.pw-rules { list-style: none; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); display: grid; gap: 8px; font-size: 14px; }
.pw-rules li { display: flex; align-items: center; gap: 9px; color: var(--muted); transition: color .2s; }
.pw-rules i { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border); display: grid; place-items: center; color: #fff; transition: background .2s, border-color .2s; }
.pw-rules i svg { opacity: 0; transform: scale(.4); transition: opacity .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.pw-rules li.ok { color: var(--text); }
.pw-rules li.ok i { background: var(--good); border-color: var(--good); }
.pw-rules li.ok i svg { opacity: 1; transform: none; }
.pw-rules li.bad { color: var(--warn); }
.pw-rules li.bad i { border-color: var(--warn); }
.pw-form .auth-input input.invalid { border-color: var(--warn); }
.pw-form .auth-input input.valid { border-color: color-mix(in srgb, var(--good) 60%, var(--border)); }
.pw-form .auth-submit:disabled { opacity: .5; cursor: not-allowed; }
.pw-switch { justify-self: center; font-size: 14px; }
.pw-note { margin: -4px 0 0; font-size: 13px; color: var(--muted); text-align: center; line-height: 1.5; }
@keyframes pw-pop { from { transform: scale(.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pw-art, .pw-rules i svg { animation: none; transition: none; } }

/* the page's sections as a sticky strip under the header (section-nav.js): glass, a chip each, the
   one on screen lit; when they don't fit, it scrolls sideways and fades at the side with more */
.sec-nav { position: sticky; top: var(--top-h, 0px); z-index: 20; margin: 18px -16px 14px; padding: 8px 0;
  background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.sec-strip { display: flex; gap: 8px; padding: 2px 16px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-padding-inline: 16px;
  --fs: 0px; --fe: 0px; -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--fs), #000 calc(100% - var(--fe)), transparent 100%);
  mask-image: linear-gradient(to left, transparent 0, #000 var(--fs), #000 calc(100% - var(--fe)), transparent 100%); }
.sec-strip::-webkit-scrollbar { display: none; }
.sec-strip.fade-start { --fs: 36px; }
.sec-strip.fade-end { --fe: 36px; }
.sec-chip { flex: none; padding: 8px 15px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted);
  font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color .25s, background .25s, border-color .25s, box-shadow .25s, transform .15s; }
.sec-chip:hover { color: var(--text); }
.sec-chip:active { transform: scale(.96); }
.sec-chip.on { color: var(--accent-text); border-color: transparent; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent));
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
.sec-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.detail > section, .detail > .portion { scroll-margin-top: calc(var(--top-h, 0px) + 70px); }
@media (min-width: 761px) { .sec-nav { margin-inline: 0; border-radius: 0 0 18px 18px; } }
/* the activity page's four tabs (act-tabs.js): under the hero, sticking under the header as the page
   scrolls; the tab picked in the skin's colours, as the strip's chip was */
.act-tabs { position: sticky; top: var(--top-h, 0px); z-index: 20; margin: 6px -16px 14px; padding: 8px 16px;
  background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); }
@media (min-width: 761px) { .act-tabs { margin-inline: 0; padding-inline: 0; border-radius: 0 0 18px 18px; } }
.act-tablist { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 6px; padding: 5px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 10px 26px -16px rgba(0, 0, 0, .55); }
.act-tablist button { display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 0; min-height: 56px; padding: 7px 2px; border: 0; border-radius: 15px;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--muted); background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color .25s, background .25s, box-shadow .25s, transform .15s; }
.act-tablist button svg { width: 22px; height: 22px; }
/* (a word never broken in its middle: on a narrow screen or with larger text the words a little smaller,
   by the button's width) */
.act-tablist button { container-type: inline-size; }
.act-tablist button span { font-size: min(1em, 16.5cqi); line-height: 1.2; text-wrap: balance; overflow-wrap: normal; }
.act-tablist button:hover { color: var(--text); }
.act-tablist button:active { transform: scale(.96); }
.act-tablist button[aria-selected="true"] { color: var(--accent-text); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent));
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
.act-tablist button:focus-visible, .act-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.act-off, .act-hide, .act-void { display: none !important; }
.act-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.act-cell { min-width: 0; }
/* the tab's panel at least a screen tall under the bar: a short tab (an empty one's card) still opens with
   the bar stuck under the header and its start right under it (act-tabs.js toTop), not half a page down */
#actTabPanel { min-height: calc(100dvh - var(--top-h, 0px) - 100px); align-content: start; }
/* a tab with nothing in it yet (act-tabs.js EMPTY): its drawing and a few words, in place of an empty page */
.act-cell.act-empty { grid-column: 1 / -1; }
.act-empty-card { display: grid; justify-items: center; gap: 6px; margin: 4px 0 14px; padding: 26px 20px 28px; text-align: center; }
.ae-art svg { display: block; width: 140px; height: 112px; }
.act-empty-card b { margin-top: 6px; font-size: 17.5px; line-height: 1.35; }
.act-empty-card p { margin: 0; max-width: 34ch; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
/* today's calorie parts in one card: its switch under the head of the part shown */
.act-seg { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 4px; margin: 0 0 12px; padding: 4px; border-radius: 14px;
  background: color-mix(in srgb, var(--text) 6%, transparent); }
.act-seg button { min-width: 0; min-height: 40px; padding: 6px 2px; border: 0; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 700; line-height: 1.2;
  color: var(--muted); background: transparent; cursor: pointer; text-wrap: balance; overflow-wrap: normal; -webkit-tap-highlight-color: transparent; }
.act-seg button[aria-selected="true"] { color: var(--text); background: var(--surface); box-shadow: 0 2px 8px rgba(0, 0, 0, .22); }
/* (a word never wider than its button, whatever the width and the text's size: four that would not fit
   go two by two, three two and one across, the box measured in its own text's size; a word smaller
   only when it still must, by its row's longest word, --w letters) */
.act-seg.seg-fit { display: block; container-type: inline-size; }
.seg-fit > .seg-row { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 4px; }
@container (max-width: 15em) { .seg-fit > .seg-row[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 10em) {
  .seg-fit > .seg-row[data-n="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seg-fit > .seg-row[data-n="3"] > :last-child { grid-column: 1 / -1; }
}
.act-seg button:has(> span) { container-type: inline-size; }
.act-seg button > span { font-size: min(1em, calc(166cqi / var(--w, 8))); }
/* the reports' cards of parts, the same switch (reports.js mergeCards): a part's own line over it; the
   nutrients' four parts by the one picked (nutrients-report.js), its emptied head gone */
.rep-part-note { margin: 0 2px 10px; }
.nr-body[data-part="macros"] > :not(.nr-macros),
.nr-body[data-part="quality"] > :not(.nr-quality),
.nr-body[data-part="values"] > :not(.nr-grid, .nr-note),
.nr-body[data-part="vitamins"] > :not(.mt-report) { display: none; }
.nr-body[data-part] > section > .nr-sub:first-child { margin-top: 0; }
.rep-titled > .nr-head:not(:has(> :not(.rep-moved))) { display: none; }
/* (an iPad and a computer: the tab's sections two to a row, an odd last across both) */
@media (min-width: 900px) {
  .act-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; align-items: start; }
  .act-cell.act-wide { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .act-tablist button { transition: none; } }
@media (prefers-reduced-motion: reduce) { .sec-chip { transition: none; } }
.sec-nav.still .sec-chip { transition: none; }
/* the settings' check of the pictures kept on the device */
.cc-sum { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; font-weight: 700; }
.cc-sum.ok { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
.cc-sum.bad { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.cc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cc-list li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--row-alt); font-size: 14px; }
.cc-list li.ok span { color: var(--good); }
.cc-list li.bad span { color: var(--warn); }
.cc-list bdi { min-width: 0; overflow-wrap: anywhere; color: var(--muted); font-size: 12.5px; text-align: end; }
.cc-more { margin-top: 10px; font-size: 13px; }
.cc-more pre { white-space: pre-wrap; font-size: 11.5px; }

/* the allergen panel's warning (detail.js): not to rely on it, the package's label decides */
.allergy-legal { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.6;
  color: var(--text); background: color-mix(in srgb, #f59e0b 10%, var(--surface)); border: 1px solid color-mix(in srgb, #f59e0b 35%, var(--border)); }
.allergy-legal b { color: color-mix(in srgb, #f59e0b 70%, var(--text)); }
.al-ico { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; background: #f59e0b; margin-top: 1px; }
.al-ico svg { width: 16px; height: 16px; }

/* the prices' "updated automatically" mark (detail.js): its arrows turn while the server brings them up to date */
.prices-sub { margin: -6px 0 12px; font-size: 13px; color: var(--muted); }

/* ---------- the calorie state (activity-stats.js): a dark hero with the workouts' total, and six cards ---------- */
.cs-panel .cs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cs-panel .cs-head h3 { margin: 0; }
.cs-panel .cs-hero { position: relative; overflow: hidden; isolation: isolate; margin: 12px 0 0; padding: 20px 16px 16px; border-radius: 22px; color: var(--hx-ink); text-align: center;
  background: var(--hx-cs); box-shadow: var(--hx-cs-shadow); }
.cs-panel .cs-glow { position: absolute; z-index: -1; left: 20%; right: 20%; bottom: -30%; height: 70%; background: radial-gradient(closest-side, rgba(255, 170, 110, .35), transparent); filter: blur(8px); animation: cs-breathe 5s ease-in-out infinite; }
@keyframes cs-breathe { 50% { transform: scale(1.12); opacity: .75; } }
.cs-panel .cs-pre { display: block; font-size: 13px; opacity: .85; }
.cs-panel .cs-big { display: block; margin-top: 4px; font-size: 46px; font-weight: 800; letter-spacing: -1px; line-height: 1.05; font-variant-numeric: tabular-nums;
  background: var(--hx-big); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-panel .cs-unit { font-size: 14px; opacity: .8; }
.cs-panel .cs-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.cs-panel .cs-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; font-size: 13px; background: var(--hx-chip); border: 1px solid var(--hx-line); }
.cs-panel .cs-chips b { font-weight: 800; }
.cs-panel .cs-chips svg { width: 15px; height: 15px; opacity: .9; }
.cs-panel .cs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.cs-panel .cs-card { display: flex; gap: 10px; align-items: flex-start; min-width: 0; padding: 12px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); border-top: 3px solid var(--cc); }
.cs-panel .cs-card > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; line-height: 1.25; }
.cs-panel .cs-card > div > span { font-size: 12.5px; color: var(--muted); }
.cs-panel .cs-card b { font-size: 20px; font-weight: 800; color: color-mix(in srgb, var(--cc) 78%, var(--text)); font-variant-numeric: tabular-nums; }
.cs-panel .cs-card b small { font-size: 12px; font-weight: 500; color: var(--muted); }
/* a value and its goal (358 / 300) on one line, smaller only when a narrow card has no room for it
   (--len, its width in letters: activity-stats.js). It broke after the slash, the slash left beside the
   value and the goal alone a tall line under it */
.cs-panel .cs-card > div { container-type: inline-size; }
.cs-panel .cs-card b { white-space: nowrap; font-size: min(20px, 100cqi * 1.6 / var(--len, 5)); }
.cs-panel .cs-card b small { font-size: .6em; }
.cs-panel .cs-card small { font-size: 12px; color: var(--muted); }
.cs-panel .cs-ico { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--cc); box-shadow: 0 6px 14px -6px var(--cc); }
.cs-panel .cs-card.today { --cc: #ff7a45; } .cs-panel .cs-card.week { --cc: #6366f1; } .cs-panel .cs-card.who { --cc: #14b8a6; }
.cs-panel .cs-card.best { --cc: #f5a524; } .cs-panel .cs-card.streak { --cc: #e5487f; } .cs-panel .cs-card.steps { --cc: #0ea5e9; }
.cs-panel .cs-meter { height: 6px; margin-top: 6px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--cc) 18%, transparent); }
.cs-panel .cs-meter i { display: block; height: 100%; border-radius: inherit; background: var(--cc); }
.cs-panel .cs-trend { margin-top: 3px; font-style: normal; font-size: 12px; font-weight: 700; }
.cs-panel .cs-trend.up { color: var(--good); } .cs-panel .cs-trend.down { color: var(--warn); }
@media (max-width: 760px) { .cs-panel .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cs-panel .cs-big { font-size: 40px; } }
/* (two to a row by the card's own width too: in an iPad's half column three were squeezed to a word a line) */
.cs-panel { container: cstate / inline-size; }
@container cstate (max-width: 760px) { .cs-panel .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 360px) { .cs-panel .cs-ico { display: none; } }

/* ---------- the activity over time: range picks, a summary, stacked bars against the goal, a card on hover ---------- */
.ac-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ac-head h3 { margin: 0; }
.ac-ranges { display: flex; gap: 3px; max-width: 100%; padding: 4px; border-radius: 999px; background: var(--track); overflow-x: auto; scrollbar-width: none; }
.ac-ranges::-webkit-scrollbar { display: none; }
.ac-ranges button { flex: none; padding: 6px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: color .2s, background .2s, box-shadow .2s; }
.ac-ranges button:hover { color: var(--text); }
.ac-ranges button[aria-checked="true"] { color: #fff; background: linear-gradient(135deg, #ff9a5a, #ff7a45); box-shadow: 0 6px 14px -6px rgba(255, 122, 69, .75); }
.ac-sum { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; }
.ac-sum > div { flex: 1; min-width: 96px; display: flex; flex-direction: column; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); line-height: 1.25; }
.ac-sum span, .ac-sum small { font-size: 12px; color: var(--muted); }
.ac-sum b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ac-sum b.up { color: var(--good); } .ac-sum b.down { color: var(--warn); }
.ac-chart { position: relative; height: 230px; margin: 22px 0 34px; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.ac-grid span { position: absolute; left: 0; right: 0; border-top: 1px dashed color-mix(in srgb, var(--border) 85%, transparent); }
.ac-grid em { position: absolute; left: 0; top: -8px; padding-right: 4px; font-style: normal; font-size: 10.5px; line-height: 1; color: var(--muted); background: var(--surface); font-variant-numeric: tabular-nums; }
.ac-goal { position: absolute; z-index: 2; left: 34px; right: 0; border-top: 2px dashed #a78bfa; pointer-events: none; }
.ac-goal em { position: absolute; right: 0; top: -21px; padding: 1px 7px; border-radius: 7px; font-style: normal; font-size: 11px; font-weight: 700; color: #a78bfa; background: color-mix(in srgb, var(--surface) 88%, transparent); }
.ac-bars { position: absolute; top: 0; bottom: 0; left: 36px; right: 0; display: flex; align-items: flex-end; gap: clamp(2px, calc(40% / var(--n)), 12px); }
.ac-col { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; cursor: pointer; }
.ac-col.empty { cursor: default; }
/* (a bar grows up from its foot by a scale, a move the screen makes on its own: grown by its height,
   the page was laid out again in every frame) */
.ac-stack { width: min(100%, 40px); height: var(--h); display: flex; flex-direction: column-reverse; border-radius: 9px 9px 3px 3px; overflow: hidden;
  transform: scaleY(0); transform-origin: 50% 100%; transition: transform .65s cubic-bezier(.22, 1, .36, 1), opacity .2s, box-shadow .2s; }
.ac-chart.in .ac-stack { transform: none; }
.ac-stack i { display: block; flex-basis: 0; min-height: 0; }
.ac-stack .mv { background: linear-gradient(180deg, #ffb07a, #ff7a45); }
.ac-stack .wk { background: linear-gradient(180deg, #67e8d4, #14b8a6); }
.ac-col.hit .ac-stack { box-shadow: 0 0 14px rgba(255, 122, 69, .45); }
.ac-chart.focus .ac-col:not(.on) .ac-stack { opacity: .35; }
.ac-col.on .ac-stack { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #ff7a45; }
.ac-x { position: absolute; top: 100%; margin-top: 7px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.ac-col.on .ac-x { color: var(--text); font-weight: 700; }
.ac-chart.parts .ac-x { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.ac-tip { position: absolute; z-index: 5; min-width: 160px; max-width: 230px; padding: 10px 12px; border-radius: 14px; pointer-events: none; font-size: 13px; line-height: 1.35;
  background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--border); box-shadow: 0 16px 32px -14px rgba(0, 0, 0, .5); animation: ac-tip-in .15s ease-out; }
@keyframes ac-tip-in { from { opacity: 0; transform: translateY(4px); } }
.ac-tip > b { display: block; font-size: 14px; }
.ac-tip dl { display: grid; grid-template-columns: auto auto; gap: 3px 14px; margin: 6px 0 0; }
.ac-tip dt { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.ac-tip dd { margin: 0; text-align: end; font-weight: 700; font-variant-numeric: tabular-nums; }
.ac-tip dd.ok { color: var(--good); }
.ac-tip i { width: 9px; height: 9px; border-radius: 3px; }
.ac-tip i.wk, .ac-legend i.wk { background: #14b8a6; }
.ac-tip i.mv, .ac-legend i.mv { background: #ff7a45; }
.ac-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--muted); }
.ac-legend i { display: inline-block; width: 10px; height: 10px; margin-inline-end: 6px; border-radius: 3px; vertical-align: -1px; }
.ac-legend i.gl { width: 14px; height: 0; border-radius: 0; border-top: 2px dashed #a78bfa; vertical-align: 3px; }
@media (prefers-reduced-motion: reduce) { .ac-stack, .cs-glow, .ac-tip { transition: none; animation: none; } }

/* a drink on its way to the glass (diary.js flyDrink): above everything, untouchable */
.drink-lane { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.drink-fly { position: absolute; margin: 0; pointer-events: none; transform-origin: 50% 50%; will-change: transform; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .3)); }
/* the splash as a drink lands in the glass: drops out of the mouth, up and back down */
.drink-splash { position: absolute; width: 7px; height: 9px; margin: -4px 0 0 -3.5px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #5fb7ff;
  box-shadow: inset -1px -2px 0 rgba(255, 255, 255, .55); animation: drink-splash .55s cubic-bezier(.2, .7, .4, 1) both; }
@keyframes drink-splash {
  0% { transform: translate(0, 0) scale(.4); opacity: 0; }
  15% { opacity: 1; }
  55% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 1; }
  100% { transform: translate(calc(var(--dx) * 1.3), calc(var(--dy) + 26px)) scale(.6); opacity: 0; }
}
/* the small glass that comes down to catch a drink when the big one is off the screen */
.water-dock { position: fixed; z-index: 59; left: 50%; display: flex; align-items: center; gap: 8px; padding: 6px 16px 6px 10px; border-radius: 22px; pointer-events: none;
  transform: translateX(-50%); background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--border); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .45); animation: dock-in .35s cubic-bezier(.34, 1.4, .6, 1) both; }
.water-dock .wd-pct { font-size: 18px; font-weight: 800; color: #2f8ff0; font-variant-numeric: tabular-nums; }
.water-dock .water-float { top: -6px; }
.water-dock.leaving { animation: dock-out .3s ease-in forwards; }
@keyframes dock-in { from { opacity: 0; transform: translate(-50%, -14px) scale(.7); } }
@keyframes dock-out { to { opacity: 0; transform: translate(-50%, -12px) scale(.8); } }

/* a day's summary in the diary (day-score.js; a day gone by, and today from the evening): an evening scene
   behind (a sky, three hills, the sun setting, a sprig), the ring out of 100 with the verdict, and a tile
   for each part, its number big, what it means, its line and bar, a way to its page */
.day-score { --sky1: #e7f5ef; --sky2: #cfeadf; --h1: #b3dcc8; --h2: #93cbb1; --h3: #7cbd9f; --sun: #ffd76e; --glow: rgba(255, 214, 110, .55);
  --leaf: #5fae7f; --tile: rgba(255, 255, 255, .72); --tile-line: rgba(16, 80, 60, .12);
  position: relative; overflow: hidden; isolation: isolate; margin-top: 18px; padding: 22px 22px 20px; border-radius: 26px;
  background: linear-gradient(180deg, var(--sky1), var(--sky2)); box-shadow: var(--shadow); border: 1px solid color-mix(in srgb, var(--sc) 22%, var(--border)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .day-score { --sky1: #0d2731; --sky2: #12343a; --h1: #1b4549; --h2: #163a3f; --h3: #102e33; --sun: #f3dd78; --glow: rgba(243, 221, 120, .32);
    --leaf: #3f9a6c; --tile: rgba(10, 26, 34, .62); --tile-line: rgba(255, 255, 255, .09); }
}
:root[data-theme="dark"] .day-score { --sky1: #0d2731; --sky2: #12343a; --h1: #1b4549; --h2: #163a3f; --h3: #102e33; --sun: #f3dd78; --glow: rgba(243, 221, 120, .32);
  --leaf: #3f9a6c; --tile: rgba(10, 26, 34, .62); --tile-line: rgba(255, 255, 255, .09); }
.ds-scene { position: absolute; z-index: -1; inset: 0 0 auto 0; height: 190px; pointer-events: none; }
.ds-hills { position: absolute; inset: auto 0 0 0; width: 100%; height: 110px; }
.ds-h1 { fill: var(--h1); } .ds-h2 { fill: var(--h2); } .ds-h3 { fill: var(--h3); }
/* (the sun half behind the far hill, its glow round it; the sprig in the far corner, both their own size) */
.ds-sunset { position: absolute; bottom: 62px; left: 22%; width: 92px; height: 92px; border-radius: 50%; background: var(--sun); }
.ds-glow { position: absolute; bottom: 10px; left: calc(22% - 104px); width: 300px; height: 200px; border-radius: 50%; background: radial-gradient(closest-side, var(--glow), transparent); }
.ds-sprig { position: absolute; left: 3%; bottom: 40px; width: 92px; height: auto; fill: var(--leaf); stroke: var(--leaf); opacity: .8; overflow: visible; }
.ds-sprig path:not(:first-child) { stroke: none; }
.ds-top { position: relative; display: flex; align-items: center; gap: 20px; min-height: 140px; }
.ds-ring { position: relative; flex: none; width: 128px; height: 128px; filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--sc) 40%, transparent)); }
.ds-ring svg { width: 100%; height: 100%; }
.ds-arc { transition: stroke-dashoffset 1.1s cubic-bezier(.22, 1, .36, 1); }
.ds-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.ds-num b { font-size: 40px; font-weight: 900; letter-spacing: -1px; color: var(--text); font-variant-numeric: tabular-nums; }
.ds-num small { margin-top: 6px; font-size: 13px; color: var(--muted); direction: ltr; unicode-bidi: isolate; }
.ds-head { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ds-pre { font-size: 14px; font-weight: 700; color: var(--muted); }
.ds-verdict { font-size: 30px; font-weight: 900; line-height: 1.15; color: color-mix(in srgb, var(--sc) 85%, var(--text)); }
.ds-note { font-size: 14.5px; color: var(--text); opacity: .88; }
.ds-parts { position: relative; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.ds-part { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px 16px; border-radius: 20px; color: inherit; text-decoration: none;
  background: var(--tile); box-shadow: inset 0 0 0 1px var(--tile-line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .15s; }
.ds-part:active { transform: scale(.98); }
.ds-part:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ds-part.food { --pc: #f59e0b; } .ds-part.water { --pc: #3b82f6; } .ds-part.move { --pc: #22c55e; }
.ds-pt-top { display: flex; align-items: center; gap: 10px; }
.ds-ico { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 4px 12px -4px var(--pc); }
.ds-ico.food { background: linear-gradient(135deg, #fbbf24, #f97316); }
.ds-ico.water { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.ds-ico.move { background: linear-gradient(135deg, #4ade80, #16a34a); }
.ds-name { flex: 1; font-size: 16px; font-weight: 800; }
.ds-chev { flex: none; display: grid; place-items: center; color: var(--muted); }
.ds-big { display: flex; flex-direction: column; line-height: 1.05; margin-top: 4px; }
.ds-big b { font-size: 34px; font-weight: 900; color: color-mix(in srgb, var(--pc) 85%, var(--text)); font-variant-numeric: tabular-nums; }
.ds-big small { font-size: 13px; font-weight: 700; color: color-mix(in srgb, var(--pc) 70%, var(--text)); }
.ds-text { font-size: 13px; color: var(--muted); line-height: 1.4; }
.ds-bar { display: block; height: 8px; margin-top: 6px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--pc) 16%, transparent); }
.ds-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 70%, #fff), var(--pc)); animation: ds-grow 1s cubic-bezier(.22, 1, .36, 1) both; transform-origin: right; }
@keyframes ds-grow { from { transform: scaleX(0); } }
.ds-none { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: var(--muted); }
/* a phone: the tiles one under another, each a row (its sign and name, its number at the end) */
@media (max-width: 760px) {
  .day-score { padding: 18px 16px 16px; }
  .ds-top { gap: 14px; min-height: 120px; }
  .ds-ring { width: 104px; height: 104px; }
  .ds-num b { font-size: 32px; }
  .ds-verdict { font-size: 24px; }
  .ds-note { font-size: 13.5px; }
  .ds-parts { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ds-part { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top big" "text big" "bar bar"; column-gap: 12px; padding: 12px 14px; }
  .ds-pt-top { grid-area: top; } .ds-text { grid-area: text; } .ds-bar { grid-area: bar; }
  .ds-big { grid-area: big; align-items: flex-end; justify-content: center; margin: 0; }
  .ds-big b { font-size: 28px; }
  .ds-chev { display: none; }
  .ds-scene { height: 170px; }
  .ds-sunset { width: 54px; height: 54px; left: 6%; bottom: 74px; opacity: .8; }
  .ds-glow { left: calc(6% - 70px); width: 200px; height: 140px; bottom: 40px; }
  .ds-sprig { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ds-arc { transition: none; } .ds-bar i { animation: none; } }

/* an item's health score (health-score.js): a dial out of 100, the grade's letter and words, and chips for what pulls it down or up */
.hsc { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; align-items: center; margin: 4px 0 16px; padding: 14px; border-radius: 18px;
  background: color-mix(in srgb, var(--hc) 8%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--hc) 30%, var(--border)); }
.hsc-dial { position: relative; width: 96px; height: 96px; filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--hc) 35%, transparent)); }
.hsc-dial svg { width: 100%; height: 100%; }
.hsc-arc { animation: hsc-fill 1s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes hsc-fill { from { stroke-dashoffset: 251.3; } }
.hsc-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.hsc-num b { font-size: 26px; font-weight: 800; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.hsc-num small { margin-top: 3px; font-size: 10.5px; color: var(--muted); direction: ltr; unicode-bidi: isolate; }
.hsc-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hsc-pre { font-size: 12.5px; color: var(--muted); }
.hsc-title { display: flex; align-items: center; gap: 8px; }
.hsc-title b { font-size: 20px; font-weight: 800; color: color-mix(in srgb, var(--hc) 75%, var(--text)); }
.hsc-grade { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #fff; font-weight: 800; font-size: 17px; background: var(--hc); box-shadow: 0 4px 10px -4px var(--hc); }
.hsc-grade.sm { width: 20px; height: 20px; border-radius: 6px; font-size: 12px; vertical-align: -4px; margin-inline: 2px; }
.hsc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hsc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--surface); border: 1px solid var(--border); }
.hsc-chip small { font-weight: 400; color: var(--muted); }
.hsc-chip i { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font-style: normal; font-size: 10px; font-weight: 800; color: #fff; background: var(--muted); }
.hsc-chip.good i { background: #22a06b; } .hsc-chip.mid i { background: #e5a50a; } .hsc-chip.bad i { background: #e5484d; } .hsc-chip.none i { background: color-mix(in srgb, var(--muted) 60%, transparent); }
.hsc-chip.bad { border-color: color-mix(in srgb, #e5484d 40%, var(--border)); }
.hsc-note { grid-column: 1 / -1; margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.hsc-line { display: inline-flex; align-items: center; gap: 8px; padding: 4px; padding-inline-end: 12px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--hc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--hc) 30%, transparent); }
.hsc-line .hsc-grade.sm { width: 26px; height: 26px; border-radius: 50%; font-size: 13px; margin: 0; vertical-align: 0; }
.hsc-line .hsc-w { font-weight: 700; color: color-mix(in srgb, var(--hc) 70%, var(--text)); }
.hsc-line .hsc-n { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hsc-line b { font-size: 15px; color: var(--text); }
@media (max-width: 420px) { .hsc { grid-template-columns: 1fr; justify-items: center; text-align: center; } .hsc-title, .hsc-chips { justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .hsc-arc { animation: none; } }

/* the test notification's row in the settings (settings.js): a bell that rings while it waits */
.notify-test .nt-ico { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #f472b6, #e5487f); }
.notify-test.busy .nt-ico svg { animation: nt-ring 1s ease-in-out infinite; transform-origin: 50% 10%; }
.notify-test:disabled { cursor: progress; opacity: .85; }
@keyframes nt-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .notify-test.busy .nt-ico svg { animation: none; } }

/* ---------- the reports' day: a day back or forward, around the day's name (reports.js) ---------- */
.rep-daynav { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2); }
.rd-btn { flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; cursor: pointer;
  background: rgba(255, 255, 255, .18); transition: background .2s, transform .15s, opacity .2s; }
.rd-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .3); }
.rd-btn:active:not(:disabled) { transform: scale(.88); }
.rd-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rd-btn:disabled { opacity: .3; cursor: default; }
.rd-day { display: flex; flex-direction: column; align-items: center; min-width: 96px; padding: 0 6px; line-height: 1.15; color: #fff; text-align: center; }
.rd-day b { font-size: 15px; }
.rd-day small { font-size: 11.5px; opacity: .8; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .report-hero .rep-daynav { width: 100%; justify-content: space-between; } }

/* ---------- the reports' nutrients (nutrients-report.js): the macronutrients drawn, then the other values ---------- */
.nr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 16px; }
.nr-head > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nr-head h3 { margin: 0; }
.nr-body { position: relative; min-height: 180px; transition: opacity .2s; }
.nr-body.loading-soft { opacity: .5; pointer-events: none; }
.nr-wait { display: grid; place-items: center; min-height: 180px; }
/* nothing eaten in the range (nutrients-report.js emptyState): a plate on a soft round, the words, the way to the diary */
.nr-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px 6px; text-align: center; }
.nr-empty-art { display: grid; place-items: center; width: 118px; height: 118px; margin-bottom: 6px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, #22a06b 20%, transparent) 0%, color-mix(in srgb, #22a06b 9%, transparent) 55%, transparent 71%); }
.nr-empty b { font-size: 16.5px; }
.nr-empty p { max-width: 32ch; margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.nr-empty-go { margin-top: 12px; padding: 9px 20px; border-radius: 999px; font-size: 14px; font-weight: 700; text-decoration: none;
  color: color-mix(in srgb, var(--accent) 80%, var(--text)); background: color-mix(in srgb, var(--accent) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent); transition: background .2s; }
.nr-empty-go:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
/* the calories' split: a ring with the calories in its middle, and its legend */
.nr-macros { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 14px; align-items: start; }
.nr-ring { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 12px; border-radius: 22px;
  background: var(--surface-2); border: 1px solid var(--border); }
.nr-ring svg { display: block; width: 180px; height: 180px; }
/* (a glow of the look's colour behind the ring on the dark look only: on the light one it was a blur) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nr-ring { background: radial-gradient(90% 70% at 50% 28%, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface-2)); }
  :root:not([data-theme="light"]) .nr-ring svg { filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--accent) 18%, transparent)); }
}
:root[data-theme="dark"] .nr-ring { background: radial-gradient(90% 70% at 50% 28%, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface-2)); }
:root[data-theme="dark"] .nr-ring svg { filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--accent) 18%, transparent)); }
.nr-ring .arc { transition: stroke-dasharray 1s cubic-bezier(.3, .8, .3, 1); }
.nr-ring:not(.in) .arc { stroke-dasharray: 0 400; }
/* the calories in the ring's middle: the hole a box of the ring's own size, its words centred in it by
   the flex (the user: "the number in the ring is not centred": ring-fit.js shrinks the words with zoom, and
   a zoom on the box itself, placed by its top and height, moved them up); a big number shrinks to fit */
.nr-ring-pic { position: relative; flex: none; }
.nr-ring-hole { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.nr-ring-c { display: flex; flex-direction: column; align-items: center; line-height: 1.15; text-align: center; }
.nr-ring-c b { font-size: 30px; font-weight: 800; letter-spacing: -.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nr-ring-c small { display: flex; flex-direction: column; align-items: center; margin-top: 2px; font-size: 11.5px; line-height: 1.3; color: var(--muted); white-space: nowrap; }
/* (the legend a small table: the dots in one column, the names after them, the shares lined up at the end) */
.nr-legend { display: grid; gap: 7px; width: min(100%, 150px); font-size: 13.5px; }
.nr-legend span { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.nr-legend b { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.nr-legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--mc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc) 20%, transparent); }
/* a drawn card for each of protein, carbs and fat */
.nr-macro-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.nr-macro { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border-radius: 20px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--mc) 13%, var(--surface)), var(--surface) 72%); border: 1px solid color-mix(in srgb, var(--mc) 28%, var(--border)); }
.nr-macro::before { content: ""; position: absolute; z-index: -1; top: -46px; inset-inline-start: -46px; width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--mc) 22%, transparent), transparent); }
.nm-top { display: flex; align-items: center; gap: 12px; }
.nm-art { flex: none; width: 66px; height: 66px; border-radius: 20px; display: grid; place-items: center; background: var(--surface);
  box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--mc) 80%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--mc) 26%, transparent); }
.nm-art svg { width: 54px; height: 54px; animation: nm-bob 4.2s ease-in-out infinite; }
.nr-macro.carbs .nm-art svg { animation-delay: -1.4s; }
.nr-macro.fat .nm-art svg { animation-delay: -2.8s; }
@keyframes nm-bob { 50% { transform: translateY(-3px) rotate(-4deg); } }
.nm-top > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.nm-name { font-size: 17px; color: color-mix(in srgb, var(--mc) 72%, var(--text)); }
.nm-g { font-size: 13px; color: var(--muted); }
.nm-g b { font-size: 27px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.nm-g small { display: block; font-size: 12px; }
.nm-bar { height: 8px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--mc) 14%, var(--track)); }
.nm-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(270deg, var(--mc), color-mix(in srgb, var(--mc) 62%, #fff)); }
.nm-share { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; }
.nm-state { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.nm-state.ok { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.nm-state.low { color: #c2780a; background: color-mix(in srgb, #f59e0b 16%, transparent); }
.nm-state.high { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
/* the share of the calories on a scale of 0-70%, the recommended range lit */
.nm-amdr { position: relative; height: 28px; margin: 0 7px; }
.nm-amdr::before { content: ""; position: absolute; top: 5px; inset-inline: 0; height: 6px; border-radius: 999px; background: var(--track); }
.nm-zone { position: absolute; top: 5px; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--good) 55%, transparent); }
.nm-dot { position: absolute; top: 1px; width: 14px; height: 14px; margin-right: -7px; border-radius: 50%; background: var(--mc); border: 2.5px solid var(--surface);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: right .6s cubic-bezier(.3, .8, .3, 1); }
.nm-amdr small { position: absolute; top: 15px; font-size: 10.5px; color: var(--muted); transform: translateX(50%); font-variant-numeric: tabular-nums; }
.nm-about { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.nm-top-foods { padding-top: 10px; border-top: 1px dashed color-mix(in srgb, var(--mc) 32%, var(--border)); }
.nm-top-foods > span { font-size: 12px; font-weight: 700; color: var(--muted); }
.nm-top-foods ol { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; counter-reset: nf; }
.nm-top-foods li { display: flex; align-items: center; gap: 8px; font-size: 13px; counter-increment: nf; }
.nm-top-foods li::before { content: counter(nf); flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; color: #fff; background: var(--mc); }
.nm-top-foods li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-top-foods li b { font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the other values: a card each, with its drawing, its state and its bars */
.nr-sub { display: flex; align-items: center; gap: 6px; margin: 22px 0 10px; font-size: 15px; }
.nr-sub svg { color: var(--accent); }
/* six values: three and three, or two to a row on a phone (auto-fit had five and a lone one) */
.nr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.nr-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--border); }
/* the drawing and the state on top, the name and the value under them */
.nc-top { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "art state" "text text"; align-items: start; gap: 8px; }
.nc-top > .nc-art { grid-area: art; }
.nc-top > .nc-state { grid-area: state; justify-self: end; }
.nc-art { flex: none; width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: color-mix(in srgb, var(--nc) 14%, var(--surface)); }
.nc-art svg { width: 42px; height: 42px; }
.nc-top > div { grid-area: text; display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.nc-name { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.nc-val { font-size: 22px; font-weight: 800; color: color-mix(in srgb, var(--nc) 70%, var(--text)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nc-val small { font-size: 12px; font-weight: 500; color: var(--muted); }
.nc-sub { font-size: 11.5px; color: var(--muted); }
.nc-state { flex: none; font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.nc-state.ok { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.nc-state.warn { color: #c2780a; background: color-mix(in srgb, #f59e0b 16%, transparent); }
.nc-state.bad { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.nc-bar { height: 6px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--nc) 14%, var(--track)); }
.nc-bar i { display: block; height: 100%; border-radius: inherit; background: var(--nc); }
.nc-bars { display: flex; align-items: flex-end; gap: 2px; height: 46px; padding-top: 2px; }
.nc-bars i { flex: 1; min-width: 0; border-radius: 3px 3px 1px 1px; background: color-mix(in srgb, var(--nc) 72%, transparent); }
.nc-bars i.none { background: var(--track); }
.nc-bars-x { display: flex; justify-content: space-between; margin-top: -4px; font-size: 10.5px; color: var(--muted); }
.nr-note { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
@media (max-width: 760px) { .nr-macros { grid-template-columns: minmax(0, 1fr); } }
/* an iPad and a computer: the ring and the three cards two by two (the user: "two on top, two below"), the
   ring's card as tall as the card beside it, its ring in its middle */
@media (min-width: 761px) {
  .nr-macros { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .nr-macro-cards { display: contents; }
  .nr-ring { justify-content: center; gap: 18px; }
  .nr-ring svg { width: 210px; height: 210px; }
}
@media (max-width: 480px) {
  .nr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nr-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .nr-card { padding: 10px; }
  .nc-art { width: 40px; height: 40px; border-radius: 12px; }
  .nc-art svg { width: 34px; height: 34px; }
  .nc-val { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .nr-ring .arc, .nm-dot { transition: none; } .nm-art svg { animation: none; } }

/* ---------- the diary's section titles (diary.js dayHead): outside the cards, a badge, the name, a rule fading away ---------- */
.day-head { display: flex; align-items: center; gap: 10px; margin: 28px 2px 6px; font-size: 19px; font-weight: 800; letter-spacing: -.2px; }
.day-head .dh-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--dh) 70%, #fff), var(--dh)); box-shadow: 0 6px 14px -6px var(--dh); }
.day-head .dh-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.day-head small { font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
/* a section's head as a banner (dayHead's scene: "מעקב ובריאות"): the evening hills behind its sign and words */
.day-head.dh-scene { display: flex; align-items: center; gap: 14px; min-height: 120px; margin: 28px 0 12px; padding: 20px 24px; font-size: 26px; font-weight: 900; }
.day-head.dh-scene::after { display: none; }
.day-head.dh-scene .dh-ico { width: 56px; height: 56px; border-radius: 16px; }
.day-head.dh-scene small { font-size: 14.5px; margin-top: 4px; }
.day-head.dh-scene .ds-scene { height: 100%; }
.day-head.dh-scene .ds-hills { height: 62%; }
.day-head.dh-scene .ds-sunset { width: 58px; height: 58px; bottom: 34%; }
.day-head.dh-scene .ds-glow { width: 220px; height: 150px; bottom: 0; left: calc(22% - 80px); }
.day-head.dh-scene .ds-sprig { width: 66px; bottom: 8px; }
@media (max-width: 760px) { .day-head.dh-scene .ds-sunset { width: 40px; height: 40px; left: 8%; } .day-head.dh-scene .ds-glow { left: calc(8% - 90px); } }
@media (max-width: 760px) { .day-head.dh-scene { min-height: 96px; padding: 16px; font-size: 22px; } }
.day-head::after { content: ""; flex: 1; height: 2px; margin-inline-start: 6px; border-radius: 2px;
  background: linear-gradient(to left, color-mix(in srgb, var(--dh) 45%, transparent), transparent); }

/* ---------- a search with an amount ("סטייק 150"): the rows that have it, marked (search.js) ---------- */
.sg-kcal.amt { color: var(--accent); font-weight: 600; }
.sg-kcal.amt svg, .fit-line svg { display: inline-block; flex: none; vertical-align: -2px; margin-inline-end: 4px; }
.fit-line { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.fit-line.hit { color: var(--accent); font-weight: 600; }

/* ---------- the bottom bar's picker (settings.js barPicker): a small copy of the bar, and a choice for each place ---------- */
.bar-pick { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.bp-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; gap: 2px; padding: 6px 8px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .3); }
.bp-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 0; border-radius: 999px; color: var(--muted); min-width: 0; }
.bp-cell svg { width: 20px; height: 20px; }
.bp-cell small { font-size: 10.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bp-cell.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
/* (its plus drawn as the bar's own, in the middle of the round: a "+" letter sat low in it) */
.bp-add { justify-self: center; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: var(--accent); box-shadow: 0 6px 14px -6px var(--accent); }
.bp-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bp-slot { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.bp-slot select { width: 100%; min-width: 0; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; }
.bp-reset { align-self: flex-start; }

/* ---------- the wizard's health step (welcome.js): the watch passing its data to the phone, what comes in, the permission ---------- */
.wz-hc { width: min(300px, 100%); }
.wz-hc .hc-scene { width: 100%; }
.wz-health-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wz-health-list li { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border-radius: 14px; background: var(--row-alt); min-width: 0; }
.wz-health-list li > span { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 18px; background: var(--surface); box-shadow: var(--shadow); }
.wz-health-list b { display: block; font-size: 14px; }
.wz-health-list small { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; }
.wz-health-go { width: 100%; justify-content: center; gap: 8px; padding-block: 14px; font-size: 16px; }
.wz-health-go.busy { opacity: .75; cursor: progress; }
.wz-health-go.busy svg { animation: hc-beat-wz 1s ease-in-out infinite; }
@keyframes hc-beat-wz { 50% { transform: scale(1.2); } }
.wz-health-done { display: none; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px;
  background: color-mix(in srgb, #2eb67d 12%, var(--surface)); border: 1px solid color-mix(in srgb, #2eb67d 35%, var(--border)); }
.wz-health-done > span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
.wz-health-done small { color: var(--muted); font-size: 12.5px; }
.wz-health-tick { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #2eb67d; animation: wz-pop .45s cubic-bezier(.34, 1.6, .64, 1); }
@keyframes wz-pop { from { transform: scale(0); } }
.wz-health-act[data-state="on"] .wz-health-go { display: none; }
.wz-health-act[data-state="on"] .wz-health-done { display: flex; }
.wz-health-consent { font-size: 12.5px; color: var(--muted); }
.wz-health-consent summary { cursor: pointer; font-weight: 600; }
.wz-health-consent p { margin: 6px 0 0; line-height: 1.6; }
@media (max-width: 380px) { .wz-health-list { grid-template-columns: minmax(0, 1fr); } }

/* a page drawn again in place (app.js: new data, back from the background): what grows or slides in
   when the page opens stays put, so the page doesn't seem to jump */
.view.redraw :is(.tip-card, .ins-list li, .kbar-fill, .report-art .bar, .report-art .trend, .now-ring .ring-arc, .ring-arc, .wc-bar i, .tip-slide.on, .wcap-fill, .ds-bar i) {
  animation: none !important; transition: none !important; }

/* the vibration's areas (settings.js), under its strength */
.haptics-areas { display: contents; }
.haptics-areas[hidden] { display: none; }
.set-group-title { margin: 10px 4px 2px; font-size: 13px; font-weight: 700; color: var(--muted); }

/* ---------- the reports' PDF and print (reports.js, report-pdf.js) ---------- */
.rep-out { display: flex; gap: 8px; }
.rep-out .btn { flex: 1; justify-content: center; gap: 6px; white-space: nowrap; }
@media (max-width: 640px) { .report-hero .rep-out { width: 100%; } }
.print-bar .btn { display: inline-flex; align-items: center; gap: 6px; }
/* the report on an A4 page: the page's own margin, nothing around it */
.print-report.pdf-copy { padding: 0; border-radius: 0; box-shadow: none; }
.print-report.pdf-copy, .print-report.pdf-copy * { font-family: Arial, "Arial Hebrew", "Noto Sans Hebrew", "Segoe UI", sans-serif !important; font-style: normal; }
.pdf-out { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0 4px; text-align: center; }
.po-art { width: 84px; height: 84px; border-radius: 24px; display: grid; place-items: center; color: #fff; margin-bottom: 6px;
  background: linear-gradient(145deg, #ef4444, #b91c1c); box-shadow: 0 14px 28px -14px rgba(185, 28, 28, .8); }
.pdf-out[data-state="making"] .po-art svg { animation: po-bob 1.2s ease-in-out infinite; }
@keyframes po-bob { 50% { transform: translateY(-4px); } }
.po-title { margin: 0; font-size: 18px; font-weight: 800; }
.po-sub { margin: 0; font-size: 14px; }
.po-bar { width: min(280px, 100%); height: 8px; margin: 8px 0 4px; border-radius: 999px; overflow: hidden; background: var(--track); }
.po-bar i { display: block; height: 100%; width: 4%; border-radius: inherit; background: linear-gradient(90deg, #ef4444, #f97316); transition: width .3s; }
.pdf-out[data-state="ready"] .po-bar, .pdf-out[data-state="failed"] .po-bar { display: none; }
.pdf-out[data-state="ready"] .po-art { background: linear-gradient(145deg, #2eb67d, #15803d); box-shadow: 0 14px 28px -14px rgba(21, 128, 61, .8); }
.po-actions { width: 100%; justify-content: center; margin-top: 10px; }
.po-actions .btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* (the file's button on one line, its share sign in a soft square; a narrow window: the two one under the other) */
#dialog .po-actions.actions > .btn.po-save { flex: 1 1 auto; gap: 8px; padding-inline: 12px 16px; font-size: 15.5px; }
#dialog .po-actions.actions > .po-save + .btn[data-close] { flex: 0 1 112px; padding-inline: 16px; }
.po-save-ico { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 9px; background: color-mix(in srgb, currentColor 14%, transparent); }
.po-save-ico svg { width: 18px; height: 18px; }

/* ---------- a page that could not be shown (core.js errorPanel) ---------- */
.err-panel { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 20px 24px; text-align: center; }
.err-art { margin-bottom: 4px; }
.err-art .err-plug { animation: err-plug 2.4s ease-in-out infinite; }
.err-art .err-spark { transform-box: fill-box; transform-origin: center; animation: err-spark 2.4s ease-in-out infinite; }
@keyframes err-plug { 50% { transform: translateX(6px); } }
@keyframes err-spark { 0%, 35%, 100% { opacity: 0; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }
.err-title { margin: 0; font-size: 20px; }
.err-text { margin: 0 0 8px; max-width: 320px; color: var(--muted); line-height: 1.55; }
.err-retry { display: inline-flex; align-items: center; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .err-art * { animation: none !important; } }
/* no network after minutes of trying (core.js netPanel): the signal bars searching, one after another,
   a ring going out, and a large try again */
.net-panel { gap: 10px; padding: 32px 22px 28px; }
.net-art .net-bars rect { fill: var(--track); animation: net-bar 1.8s ease-in-out infinite; }
.net-art .net-bars rect:nth-child(1) { fill: var(--accent); animation: none; }
.net-art .net-bars rect:nth-child(2) { animation-delay: .2s; }
.net-art .net-bars rect:nth-child(3) { animation-delay: .4s; }
.net-art .net-bars rect:nth-child(4) { animation-delay: .6s; }
@keyframes net-bar { 0%, 60%, 100% { fill: var(--track); } 30% { fill: color-mix(in srgb, var(--accent) 55%, var(--track)); } }
.net-art .net-wave { transform-box: fill-box; transform-origin: center; opacity: 0; animation: net-wave 2.6s ease-out infinite; }
@keyframes net-wave { 0% { opacity: .5; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.12); } }
.net-art .net-badge { transform-box: fill-box; transform-origin: center; animation: net-badge 2.6s ease-in-out infinite; }
@keyframes net-badge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.net-panel .err-title { font-size: 21px; }
/* the two buttons alike: the same width and height, round, a little room between them */
.net-retry, .net-cancel { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; width: min(240px, 100%); height: 54px; padding: 0 24px; font-size: 17px; border-radius: 999px; }
.net-retry { box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 35%, transparent); }
.net-cancel { margin-top: 6px; }
.net-auto { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
/* (its bottom: the bar's (.bottom-nav: max(8px, safe area - 12px), 68px high), the add button above it (16px), 24px between) */
/* the network weak while requests are tried again (core.js retrying): a red pill low on the screen, above the
   bottom bar (clear of the search), its bars searching in white */
.net-line { position: fixed; inset: auto 0 auto 0; top: auto; bottom: calc(max(8px, calc(var(--sa-bottom) - 12px)) + 68px + 16px + 24px); height: auto; overflow: visible; margin: 0 auto; width: max-content; max-width: calc(100% - 32px); z-index: 60; display: flex; align-items: center; gap: 10px; padding: 6px; padding-inline-end: 20px; border-radius: 999px; background: linear-gradient(135deg, #d93636, #a3201a); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 12px 28px rgba(163, 32, 26, .5), 0 2px 8px rgba(0, 0, 0, .28); color: #fff; font-size: 15.5px; font-weight: 800; text-shadow: 0 1px 2px rgba(0, 0, 0, .28); opacity: 0; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.net-line.on { opacity: 1; transform: none; }
.net-line svg { flex: none; }
/* as the app's pill buttons: its drawing in a round of its own, a small line over a bold one */
.net-line .nl-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .18); box-shadow: 0 0 0 3px rgba(255, 255, 255, .08); }
.net-line .nl-txt { display: flex; flex-direction: column; line-height: 1.15; }
.net-line .nl-txt small { font-size: 12px; font-weight: 600; opacity: .88; }
.net-line .nl-txt b { font-size: 15.5px; font-weight: 800; }
.net-line svg rect { fill: rgba(255, 255, 255, .32); animation: net-bar-red 1.8s ease-in-out infinite; }
.net-line svg rect:nth-child(1) { fill: #fff; animation: none; }
.net-line svg rect:nth-child(2) { animation-delay: .2s; }
.net-line svg rect:nth-child(3) { animation-delay: .4s; }
.net-line svg rect:nth-child(4) { animation-delay: .6s; }
@keyframes net-bar-red { 0%, 60%, 100% { fill: rgba(255, 255, 255, .32); } 30% { fill: #fff; } }
/* meanwhile what needs the network is locked: dimmed and not pressed (the search fields are read-only too) */
html.net-weak :is(#form, .fx-searchbox, .fx-bar, .ma-search, .ma-tools, #navAdd, .quick-grid, .meal-row, [data-water], [data-dq-add], .ai-go, #dialog [type=submit], #confirmSave, #entryDelete) { pointer-events: none; opacity: .45; filter: saturate(.4); transition: opacity .2s ease; }
/* no network after the minutes of trying, for what someone waits for (core.js netHold): the network panel over everything */
dialog.net-hold { border: 0; padding: 0; margin: auto; width: min(440px, calc(100% - 32px)); max-width: none; background: transparent; color: inherit; overflow: visible; }
dialog.net-hold::backdrop { background: rgba(4, 9, 20, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog.net-hold .net-panel { margin: 0; box-shadow: 0 22px 54px rgba(0, 0, 0, .45); animation: net-hold-in .32s ease both; }
dialog.net-hold.leaving { opacity: 0; transition: opacity .2s ease; }
/* (its title takes the focus for a screen reader to start from; no ring around it) */
dialog.net-hold .err-title:focus { outline: none; }
@keyframes net-hold-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .net-line svg rect, dialog.net-hold .net-panel { animation: none !important; } }

/* a photo now or one from the gallery, side by side */
.pick-two { display: flex; flex-wrap: wrap; gap: 8px; }
.pick-two .btn { flex: 1 1 0; min-width: 0; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.pick-two.center { justify-content: center; max-width: 420px; margin-inline: auto; }

/* a new food filled by the AI (favorites.js): the fields it filled, and what it says */
.edit-form input.ai-filled { border-color: color-mix(in srgb, #7c5cff 55%, var(--border)); background: color-mix(in srgb, #7c5cff 7%, var(--surface)); }
.ai-reading, .ai-done { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-reading .spinner { width: 18px; height: 18px; border-width: 3px; margin: 0; }
.ai-done { color: color-mix(in srgb, #7c5cff 70%, var(--text)); font-weight: 600; }
.ai-done small { flex-basis: 100%; font-weight: 400; color: var(--muted); }

/* ---------- the notifications' head and day headings (settings.js initBell) ---------- */
.bell-head { padding: 12px 12px 12px 10px; }
.bh-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bh-title > span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.bh-title b { font-size: 17px; }
.bh-title small { font-size: 12px; color: var(--muted); }
.bh-ico { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #f5a524, #e5487f); box-shadow: 0 6px 14px -6px rgba(229, 72, 127, .7); }
.bell-tools { display: flex; align-items: center; gap: 6px; }
.bh-btn { width: 36px; height: 36px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; text-decoration: none;
  color: var(--muted); background: color-mix(in srgb, var(--text) 7%, transparent); border: 0; transition: background .2s, color .2s, transform .15s; }
.bh-btn:hover { color: var(--text); background: color-mix(in srgb, var(--text) 13%, transparent); }
.bh-btn:active { transform: scale(.92); }
.bh-btn.danger { color: #e5484d; background: color-mix(in srgb, #e5484d 12%, transparent); }
.bh-btn.danger:hover { background: color-mix(in srgb, #e5484d 22%, transparent); }
.bh-btn.read { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.bh-btn.read:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.bh-new { font-style: normal; font-weight: 800; color: var(--accent); }
.bell-day { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px 8px;
  background: var(--menu-bg); font-size: 13px; font-weight: 800; color: var(--text); }
.bd-pill { padding: 4px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 800; color: var(--bd, var(--muted));
  background: color-mix(in srgb, var(--bd, var(--muted)) 15%, transparent); border: 1px solid color-mix(in srgb, var(--bd, var(--muted)) 30%, transparent); }
.bell-day small { font-size: 12px; font-weight: 600; color: var(--muted); }
.bell-day i { flex: 1; height: 1px; background: linear-gradient(to left, color-mix(in srgb, var(--bd, var(--muted)) 40%, transparent), transparent); }
.bell-day.today { --bd: var(--accent); }
.bell-day.today .bd-pill { color: #fff; background: var(--accent); border-color: var(--accent); box-shadow: 0 4px 12px -6px var(--accent); }
.bell-day.yesterday { --bd: #3b82f6; }
.bell-day.before { --bd: #8b5cf6; }
.bell-day.pinned { --bd: #f5a524; }
.bell-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 16px; text-align: center; }
.bell-empty > span { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: color-mix(in srgb, var(--text) 6%, transparent); }
.bell-empty p { margin: 0; color: var(--muted); }

/* what gout is, under the sensitivities (profile-edit.js) */
.pe-about { margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, #dc2626 7%, var(--row-alt)); border: 1px solid color-mix(in srgb, #dc2626 18%, var(--border)); }
.pe-about summary { cursor: pointer; font-weight: 700; color: color-mix(in srgb, #dc2626 70%, var(--text)); }
.pe-about p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* ---------- the search's settings (settings.js searchSettings) ---------- */
.ss-block { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
/* the kinds searched: two to a row, each the same width and height (an odd last one the whole row), as
   the sort's switches under them; one to a row at much larger text */
.ss-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
.ss-chips > :last-child:nth-child(odd) { grid-column: 1 / -1; }
html[data-text-large] .ss-chips { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 360px) { .ss-chips { grid-template-columns: minmax(0, 1fr); } }
.ss-chip { position: relative; cursor: pointer; }
.ss-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ss-chip span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600;
  color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); transition: background .2s, color .2s, border-color .2s; }
.ss-chip input:checked + span { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.ss-chip input:checked + span::before { content: "✓"; font-weight: 800; }
.ss-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.ss-chip { display: flex; min-width: 0; }
.ss-chip span { flex: 1; justify-content: center; min-width: 0; min-height: 46px; box-sizing: border-box; padding: 8px 10px; border-radius: 14px; text-align: center; line-height: 1.25; }
.ss-block { min-width: 0; overflow: hidden; }
.ss-block > * { max-width: 100%; min-width: 0; }
/* the choices: in a row of equal cells, two rows of two when they have four */
.ss-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; box-sizing: border-box; }
.ss-seg:has(> :nth-child(4)) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* (an odd count: the last one across the row, no empty cell beside it) */
.ss-seg:has(> :nth-child(4)) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.ss-seg button { min-width: 0; padding: 9px 6px; font-size: 13.5px; line-height: 1.25; white-space: normal; }
.ss-none a { font-weight: 600; }

/* ---------- the item page's details, values table and recipe (detail.js) ---------- */
/* the way back: a round arrow in the page's top far corner, glassy; a recipe's wide photo starts under it */
.detail { position: relative; }
.detail.detail-recipe { padding-top: 58px; }
.detail-back { position: absolute; z-index: 3; top: 10px; inset-inline-end: 10px; }
.detail-back .back-btn { width: 38px; height: 38px; border-radius: 12px; }
.detail-back .back-btn { background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .45); }
.detail-back .back-btn:hover { background: var(--accent); }
/* (beside the photo, on an iPad and a computer, the arrow is in the words' far top corner: their first
   line keeps clear of it, a long name going on under it) */
@media (min-width: 641px) {
  .detail:not(.detail-recipe) .hero-text::before { content: ""; float: left; float: inline-end; width: 34px; height: 32px; }
}
@media (max-width: 640px) {
  .detail-recipe .hero figure { width: 100%; }
  /* on a phone the photo stays clear of the arrow in the corner beside it */
  .detail:not(.detail-recipe) .hero figure { width: min(260px, 100% - 76px); }
}

/* the values table: the name with its unit small, the numbers in even columns, the portion's lit */
.nt { border-collapse: separate; border-spacing: 0; font-size: 15px; }
.nt th, .nt td { padding: 10px 10px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); vertical-align: middle; }
.nt tbody tr:nth-child(even) { background: none; }
.nt thead th { padding-top: 10px; padding-bottom: 10px; border-bottom: 2px solid var(--border); font-size: 13px; font-weight: 600; color: var(--muted); vertical-align: bottom; }
.nt th.num, .nt td.num { width: 78px; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nt th.num b { display: block; font-size: 14px; font-weight: 800; color: var(--text); line-height: 1.2; }
.nt th.num small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.nt .nt-mine { background: color-mix(in srgb, var(--accent) 9%, transparent); font-weight: 700; }
.nt thead .nt-mine { border-radius: 14px 14px 0 0; }
.nt thead .nt-mine b { color: var(--accent); }
.nt tbody tr:last-child td { border-bottom: 0; }
.nt tbody tr:last-child .nt-mine { border-radius: 0 0 14px 14px; }
.nt-name { font-weight: 600; }
.nt-unit { font-size: 12px; color: var(--muted); white-space: nowrap; }
.nt tr.nt-kcal td { font-size: 17px; font-weight: 800; }
.nt tr.nt-kcal .nt-name { font-weight: 800; }
.nt tr.sub td:first-child { position: relative; padding-inline-start: 30px; color: inherit; }
.nt tr.sub td:first-child::before { content: ""; position: absolute; inset-inline-start: 14px; top: 0; height: 50%; width: 9px;
  border-inline-start: 2px solid var(--border); border-bottom: 2px solid var(--border); border-end-start-radius: 6px; }
.nt tr.sub .nt-name { font-weight: 500; color: var(--muted); }
.nt tr.sub td.num { font-size: 14px; color: var(--muted); }
.nt tr.sub td.num.nt-mine { color: var(--text); }
@media (max-width: 480px) { .nt { font-size: 14.5px; } .nt th, .nt td { padding-inline: 8px; } .nt th.num, .nt td.num { width: 64px; } .nt tr.nt-kcal td { font-size: 16px; } }

/* the details: a row each, with a picture, the name and its value at the far side */
.facts-panel .facts { display: flex; flex-direction: column; gap: 0; }
.fact { display: grid; grid-template-columns: 36px auto 1fr; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.fact:last-child { border-bottom: 0; padding-bottom: 0; }
.fact:first-child { padding-top: 0; }
.fact-ico { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.fact dt { color: var(--muted); font-size: 14px; }
.fact dd { margin: 0; text-align: end; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.fact dd a { color: var(--accent); }

/* the recipe: its ingredients, ticked off while cooking, and its steps in numbered circles */
.rb-head { display: flex; align-items: center; gap: 8px; }
.rb-count { padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ingredients { display: grid; gap: 6px; }
.ingredients li { display: block; padding: 0; border: 0; }
.ing { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text); font: inherit; text-align: start; cursor: pointer; transition: background .2s, border-color .2s, opacity .2s; }
.ing:active { transform: scale(.99); }
.ing-tick { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 45%, var(--border)); display: grid; place-items: center; transition: background .2s, border-color .2s; }
.ing-tick::after { content: ""; width: 10px; height: 5px; margin-top: -2px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) scale(0); transition: transform .2s cubic-bezier(.34, 1.6, .6, 1); }
.ing-name { flex: 1; min-width: 0; line-height: 1.4; }
.ing-name b { color: var(--accent); }
.ing-g { flex: none; padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; background: var(--surface); border: 1px solid var(--border); }
.ing-g small { font-weight: 500; color: var(--muted); }
.ing[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.ing[aria-pressed="true"] .ing-tick { background: var(--accent); border-color: var(--accent); }
.ing[aria-pressed="true"] .ing-tick::after { transform: rotate(-45deg) scale(1); }
.ing[aria-pressed="true"] .ing-name { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.ing-hint { margin: 8px 2px 0; font-size: 12.5px; color: var(--muted); }
.ing-clear { margin-inline-start: 6px; padding: 2px 4px; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ing-clear[hidden] { display: none; }
/* not kosher (kosher.js): said quietly, under the recipe's ingredients and under a dish's total */
.ing-hint.ing-kosher { margin-top: 2px; }
.cf-aside { margin: 8px 4px 0; font-size: 12.5px; color: var(--muted); }
.steps { list-style: none; padding: 0; counter-reset: step; gap: 12px; }
.steps li { counter-increment: step; position: relative; padding-inline-start: 42px; line-height: 1.55; min-height: 30px; }
.steps li::before { content: counter(step); position: absolute; inset-inline-start: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 14px; color: #fff; background: var(--accent); box-shadow: 0 4px 10px -4px var(--accent); }
.steps li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 14px; top: 32px; bottom: -10px; width: 2px; background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* ---------- settings: the back-to-top button's look, and the about card (settings.js) ---------- */
.totop-opts { display: grid; gap: 12px; padding: 4px 16px 14px; }
.tt-row { display: grid; gap: 6px; }
.tt-row .segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.tt-row .segmented button { padding-inline: 4px; white-space: nowrap; }
.about-head { display: flex; align-items: center; gap: 14px; }
.about-logo { flex: none; width: 52px; height: 52px; border-radius: 17px; display: grid; place-items: center; color: #fff; background: var(--hero); box-shadow: 0 10px 22px -12px var(--accent); }
.about-head > div { flex: 1; min-width: 0; container-type: inline-size; display: flex; flex-direction: column; line-height: 1.3; }
.about-head b { font-size: 20px; }
/* the line under the name on one line always: a little smaller where it would not fit (its text is
   about 13 times its letters' size wide) */
.about-head > div > span { color: var(--muted); white-space: nowrap; font-size: min(1em, 7.4cqi); }
@media (max-width: 359px) { .about-head { gap: 12px; } .about-logo { width: 46px; height: 46px; border-radius: 15px; } }
.about-head .about-version { align-self: flex-start; padding: 0; border: 0; background: none; font: inherit; font-size: min(12.5px, 6.6cqi); color: var(--muted); cursor: pointer; -webkit-user-select: none; user-select: none; }
.about-head .about-version:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.about .about-mission { margin: 14px 0 10px; font-size: 16px; font-weight: 600; line-height: 1.55; }
.about-badges { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.about-badges li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border-radius: 999px; font-size: 13px; font-weight: 700;
  color: color-mix(in srgb, var(--ab) 80%, var(--text)); background: color-mix(in srgb, var(--ab) 11%, transparent); border: 1px solid color-mix(in srgb, var(--ab) 25%, transparent); }
.about-disclaimer { display: flex; gap: 12px; padding: 14px; border-radius: 16px; background: color-mix(in srgb, #f59e0b 9%, var(--surface));
  border: 1px solid color-mix(in srgb, #f59e0b 30%, var(--border)); }
.ad-ico { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: #e59a0b; }
.about-disclaimer b { display: block; margin-bottom: 4px; color: color-mix(in srgb, #b45309 85%, var(--text)); }
.about .about-disclaimer p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.6; color: color-mix(in srgb, var(--text) 85%, var(--muted)); }
.about .about-disclaimer p:last-child { margin-bottom: 0; }
.about .legal-nav { margin: 14px 0 12px; }
/* "הבנתי": the legal window's way out, a full pill at its bottom */
.legal-dlg-foot .got-it { min-width: 150px; gap: 8px; border-radius: 999px; font-weight: 700; box-shadow: 0 10px 22px -12px var(--accent); }

/* ---------- the logo's menu (nav.js initAppMenu) ---------- */
.app-menu { position: relative; }
.logo-btn { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 4px; margin: -4px; border: 0; border-radius: 14px; background: none;
  color: inherit; font: inherit; font-weight: 700; font-size: 20px; cursor: pointer; transition: background .2s; }
.logo-btn:hover, .logo-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .14); }
.logo-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.logo-caret { opacity: .8; transition: transform .25s; }
.logo-btn[aria-expanded="true"] .logo-caret { transform: rotate(180deg); }
.app-menu-panel { right: 0; left: auto; width: min(360px, calc(100vw - 24px)); padding: 0; overflow: hidden auto; transform-origin: top right; animation: am-in .28s cubic-bezier(.34, 1.3, .6, 1); }
@keyframes am-in { from { opacity: 0; transform: translateY(-8px) scale(.96); } }
.am-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 16px; color: #fff; background: var(--hero); }
.am-head > div { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.am-head b { font-size: 19px; }
.am-head small { font-size: 12.5px; opacity: .85; }
.am-head .am-close { color: #fff; background: rgba(255, 255, 255, .16); }
.am-head .am-close:hover { background: rgba(255, 255, 255, .26); color: #fff; }
.am-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; }
.am-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px; border-radius: 16px; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 6px 16px -14px rgba(0, 0, 0, .5);
  animation: am-item .34s cubic-bezier(.34, 1.3, .6, 1) both; animation-delay: calc(var(--i) * 35ms); transition: transform .15s, border-color .2s; }
.am-item:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; }
/* the name and under it, close, what it holds; as wide as its card, so what does not fit stays in it */
.am-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; align-self: stretch; }
.am-item:last-child:nth-child(odd) .am-text { align-self: center; flex: 1; }
.am-item:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.am-item:active { transform: scale(.97); }
.am-art { margin-bottom: 4px; }
.am-item:last-child:nth-child(odd) .am-art { margin: 0; }
.am-item b { font-size: 15.5px; }
/* what it holds: light and quiet under the bold name */
.am-item small { font-size: 12.5px; font-weight: 400; line-height: 1.35; letter-spacing: .005em; color: var(--muted); }
@keyframes am-item { from { opacity: 0; transform: translateY(6px) scale(.97); } }
@media (max-width: 640px) { .app-menu-panel { right: 12px; left: 12px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .app-menu-panel, .am-item { animation: none; } }

/* ---------- feedback (feedback.js) ---------- */
.fb-form { display: grid; gap: 18px; }
.fb-block { margin: 0; padding: 0; border: 0; min-width: 0; }
.fb-title { display: block; margin-bottom: 8px; font-weight: 700; font-size: 16px; padding: 0; }
.fb-title small { font-weight: 400; font-size: 12.5px; color: var(--muted); }
.fb-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fb-kind { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 12px;
  border-radius: 16px; border: 1.5px solid var(--border); background: var(--surface-2); cursor: pointer; transition: border-color .2s, background .2s, transform .15s; }
.fb-kind input { position: absolute; opacity: 0; pointer-events: none; }
.fk-ico { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: var(--fk); background: color-mix(in srgb, var(--fk) 14%, transparent); transition: background .2s, color .2s; }
.fb-kind b { font-size: 15px; }
.fb-kind small { font-size: 12px; color: var(--muted); line-height: 1.3; }
.fb-kind:has(input:checked) { border-color: var(--fk); background: color-mix(in srgb, var(--fk) 8%, var(--surface)); }
.fb-kind:has(input:checked) .fk-ico { color: #fff; background: var(--fk); box-shadow: 0 6px 14px -6px var(--fk); }
.fb-kind:has(input:focus-visible) { outline: 3px solid var(--fk); outline-offset: 2px; }
.fb-kind:active { transform: scale(.98); }
@media (max-width: 420px) { .fb-kind { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 4px; } .fk-ico { grid-row: auto; } }
.fb-msg textarea { width: 100%; min-height: 140px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font: inherit; font-size: 16px; line-height: 1.55; resize: vertical; }
.fb-msg textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.fb-count { display: block; margin-top: 4px; text-align: end; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fb-shot-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fb-pick { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.fb-preview { position: relative; margin: 0; }
.fb-preview img { display: block; max-width: 140px; max-height: 140px; border-radius: 12px; border: 1px solid var(--border); object-fit: cover; }
.fb-remove { position: absolute; top: -8px; inset-inline-end: -8px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: #e5484d; color: #fff; font-size: 17px; line-height: 1; cursor: pointer; }
/* (its switch clear of the frame's edge) */
.fb-log .set-row { gap: 14px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.fb-log-see { margin-top: 6px; font-size: 13.5px; }
.fb-log-see summary { cursor: pointer; color: var(--accent); }
.fb-log-see pre { max-height: 220px; overflow: auto; margin: 8px 0 0; padding: 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; white-space: pre-wrap; word-break: break-word; }
.fb-contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fb-contact-row input { min-width: 0; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: 16px; text-align: right; }
.fb-contact-row input:focus { outline: none; border-color: var(--accent); }
@media (max-width: 420px) { .fb-contact-row { grid-template-columns: 1fr; } }
.fb-me { margin-top: 6px; font-size: 13px; }
.fb-agree { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); font-size: 14px; line-height: 1.55; cursor: pointer; }
.fb-agree input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); }
.fb-agree a { color: var(--accent); font-weight: 600; }
.fb-send { justify-self: stretch; justify-content: center; gap: 8px; min-height: 52px; border-radius: 999px; font-size: 17px; }
.fb-send:disabled { opacity: .5; cursor: not-allowed; }
/* sending: the plane flies off and comes round again, a light runs across the button */
.fb-send { position: relative; overflow: hidden; }
.fb-send.busy, .fb-send.busy:disabled { opacity: 1; cursor: progress; }
.fb-plane { display: grid; }
.fb-send.busy .fb-plane { animation: fb-fly 1.1s cubic-bezier(.5, 0, .5, 1) infinite; }
.fb-send.sent .fb-plane { animation: fb-away .45s cubic-bezier(.5, 0, .75, 0) forwards; }
.fb-send.busy::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .32) 50%, transparent 80%); transform: translateX(110%); animation: fb-shine 1.2s ease-in-out infinite; }
@keyframes fb-fly { 0% { transform: none; opacity: 1; } 45% { transform: translate(16px, -12px) rotate(8deg) scale(.8); opacity: 0; }
  46% { transform: translate(-16px, 12px) scale(.8); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes fb-away { to { transform: translate(60px, -40px) rotate(14deg) scale(.6); opacity: 0; } }
@keyframes fb-shine { to { transform: translateX(-110%); } }
@media (prefers-reduced-motion: reduce) { .fb-send .fb-plane, .fb-send::after { animation: none !important; } }
.fb-thanks { text-align: center; padding: 32px 20px; }
.fb-thanks-art { width: 76px; height: 76px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--hero); box-shadow: 0 14px 30px -14px var(--accent); animation: am-in .5s cubic-bezier(.34, 1.6, .6, 1); }
.fb-thanks h3 { margin: 0 0 6px; font-size: 22px; }
.fb-thanks .actions { justify-content: center; }

/* ---------- the admin's feedback tab (admin.js) ---------- */
.adm-fb header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-fb time { margin-inline-start: auto; font-size: 13px; color: var(--muted); }
.adm-fb-kind { padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #fff; background: #3b82f6; }
.adm-fb-kind.k-idea { background: #f5a524; } .adm-fb-kind.k-bug { background: #e5484d; } .adm-fb-kind.k-problem { background: #f97316; }
.adm-fb-status { font-size: 12.5px; color: var(--muted); }
.adm-fb.new { border-inline-start: 4px solid var(--accent); }
.adm-fb.done { opacity: .7; }
.adm-fb-msg { white-space: pre-wrap; margin: 10px 0; line-height: 1.6; }
.adm-fb-meta { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0 0 8px; font-size: 13.5px; }
.adm-fb-meta dt { color: var(--muted); } .adm-fb-meta dd { margin: 0; }
.adm-fb-log pre { max-height: 260px; overflow: auto; font-size: 12px; white-space: pre-wrap; background: var(--surface-2); padding: 10px; border-radius: 10px; }
.adm-fb-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.adm-fb-img { display: block; max-width: 100%; border-radius: 12px; }

/* ---------- the activity and sport heroes, like the app's other heroes: the skin's gradient with white
   ink in the light and in the dark, their art beside the title, the refresh on the title's line,
   and a calm sea drifting behind ---------- */
.hx-hero {
  --hx-ink: #fff; --hx-dim: rgba(255, 255, 255, .72); --hx-row: rgba(255, 255, 255, .11); --hx-line: rgba(255, 255, 255, .17); --hx-line-2: rgba(255, 255, 255, .28);
  --hx-glass: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08)); --hx-glass-hover: linear-gradient(135deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .12));
  --hx-btn-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 22px -12px rgba(0, 0, 0, .45); --hx-rc: 100%; --hx-track: rgba(255, 255, 255, .16); --hx-tick: rgba(255, 255, 255, .5);
  --hx-pin: #fff; --hx-chip: rgba(255, 255, 255, .14); --hx-big: linear-gradient(180deg, #fff 30%, #ffe3d2);
  position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--hero); border-radius: 0 0 28px 28px;
  box-shadow: 0 18px 34px -22px color-mix(in srgb, var(--brand, #0e7a57) 80%, transparent);
}
.hx-top { display: flex; align-items: center; gap: 12px; }
.hx-art { flex: none; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; --art-line: #1f2937; --art-shadow: rgba(0, 0, 0, .12);
  background: rgba(255, 255, 255, .92); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .5); }
.hx-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hx-titles h2 { margin: 0; font-size: 24px; line-height: 1.2; }
.hx-titles .ah-sub, .hx-titles .sh-sub { font-size: 13px; opacity: .82; }
.hx-top .hero-round { align-self: center; }
/* the activity and sport pages' links (and the watch's connect): one look, glass pills as tall as each other,
   side by side across the hero's width, as the export bar under them */
.hx-hero .ah-acts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; max-width: none; margin-top: 14px; }
.hx-hero .ah-acts > .hero-link { width: 100%; min-width: 0; min-height: 50px; box-sizing: border-box; font: inherit; text-align: start; cursor: pointer; }
.hx-hero .ah-acts .hl-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hx-hero .ah-acts .hl-go { margin-inline-start: auto; }
.hx-hero .ah-rings { filter: drop-shadow(0 0 22px rgba(255, 255, 255, .18)); }
.hx-hero .ah-legend li { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hx-hero .ah-legend b { color: #fff; }
.hx-hero .ah-legend i { box-shadow: 0 0 0 2px rgba(255, 255, 255, .7), 0 0 12px var(--rc); }

/* the heroes' sea: soft white waves, each layer drifting at its own pace, a slow swell, glints */
.sea { position: absolute; inset: auto 0 0 0; height: min(58%, 170px); z-index: -1; pointer-events: none; overflow: hidden; animation: sea-swell 9s ease-in-out infinite alternate; }
.sea-l { position: absolute; bottom: 0; left: 0; width: 200%; height: 100%; fill: #fff; will-change: transform; }
.sea-l.s1 { opacity: .13; animation: sea-drift 34s linear infinite; }
.sea-l.s2 { opacity: .17; height: 82%; animation: sea-drift 24s linear infinite reverse; }
.sea-l.s3 { opacity: .22; height: 64%; animation: sea-drift 16s linear infinite; }
.glint { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px rgba(255, 255, 255, .7); opacity: 0; animation: sea-glint 4.6s ease-in-out infinite; }
@keyframes sea-drift { to { transform: translateX(-50%); } }
@keyframes sea-swell { from { transform: translateY(0); } to { transform: translateY(8px); } }
@keyframes sea-glint { 0%, 70%, 100% { opacity: 0; transform: scale(.4); } 80% { opacity: .85; transform: scale(1); } 90% { opacity: .2; transform: scale(.7); } }
/* a soft light over the water, like the sun on it */
.hx-hero::before { content: ""; position: absolute; z-index: -1; inset: -30% -10% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 62%); animation: sea-sun 12s ease-in-out infinite alternate; }
@keyframes sea-sun { to { transform: translate(-8%, 6%) scale(1.08); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .sea, .sea-l, .glint, .hx-hero::before { animation: none !important; } }
html[data-a11y~="motion"] :is(.sea, .sea-l, .glint), html[data-a11y~="motion"] .hx-hero::before { animation: none !important; }

/* ---------- the week's capsules by how the day went (diary.js capLevels) ---------- */
.wcap.lv-good { --cap-top: #9af2c0; --cap-bot: #1f9d63; }
.wcap.lv-near { --cap-top: #e0f7a6; --cap-bot: #7cb82a; }
.wcap.lv-fair { --cap-top: #ffd49c; --cap-bot: #ee7d1a; }
.wcap.lv-poor { --cap-top: #ffb8b0; --cap-bot: #e5484d; }
.wcap.lv-low { --cap-top: #c6e9ff; --cap-bot: #3b98dc; }
.wcap[class*="lv-"] .wcap-fill { background: linear-gradient(180deg, color-mix(in srgb, var(--cap-top) 96%, transparent), color-mix(in srgb, var(--cap-bot) 92%, transparent)); }
.wcap[class*="lv-"] .wcap-wave.front { fill: color-mix(in srgb, var(--cap-top) 96%, transparent); }
.wcap.on[class*="lv-"] .wcap-fill { box-shadow: 0 0 16px color-mix(in srgb, var(--cap-bot) 55%, transparent); }

/* ---------- smoother scrolling ---------- */
/* sideways moves on a page are its own (the swipe between pages), so the browser never waits for them */
.view { touch-action: pan-y pinch-zoom; }
/* (the swipe itself holds the page from scrolling, swipe-nav.js: hiding the overflow made the sticky header
   stick to the body instead of the screen, and it went out of sight while the page moved) */
html.swiping { overscroll-behavior: none; }
/* while the page moves, the drifting decorations rest, leaving the frames to the scroll */
html.scrolling :is(.aurora, .sea, .desert, .wcap-fill, .ah-rings, .produce) *, html.scrolling :is(.sea, .hx-hero)::before { animation-play-state: paused !important; }
/* Motion only where it can be seen (motion.js): a part of the page off the screen has its animations
   paused, the endless ones and those it comes in with (they play as it comes near); and a tip turned
   away keeps its ring still */
.motion-off, .motion-off::before, .motion-off::after, .motion-off *, .motion-off *::before, .motion-off *::after,
.tip-slide:not(.on) .tip-art::after { animation-play-state: paused !important; }

/* ---------- a celebration (confetti.js celebrate): a festive card under the header ---------- */
.celebrate { position: fixed; z-index: 210; top: calc(var(--sa-top, 0px) + 74px); left: 50%; width: min(400px, calc(100vw - 28px)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; padding: 16px 18px 16px 16px; border-radius: 24px; overflow: hidden; cursor: pointer; color: #fff;
  background: var(--cel, linear-gradient(135deg, #f5a524, #e5487f 60%, #7c5cff));
  box-shadow: 0 22px 50px -16px color-mix(in srgb, var(--cel-c, #e5487f) 75%, transparent), 0 0 0 1px rgba(255, 255, 255, .22) inset;
  animation: cel-in .62s cubic-bezier(.34, 1.56, .64, 1) both; }
.celebrate.leaving { animation: cel-out .42s ease-in forwards; }
.cel-water { --cel: linear-gradient(135deg, #1f6fd0, #2f8ff0 45%, #49c6ef); --cel-c: #2f8ff0; }
.cel-fast { --cel: linear-gradient(135deg, #5b3fd6, #7c5cff 45%, #2eb67d); --cel-c: #7c5cff; }
.cel-weight { --cel: linear-gradient(135deg, #f97316, #f5a524 40%, #e5487f); --cel-c: #f97316; }
.cel-start { --cel: var(--hero); --cel-c: var(--accent); }
.cel-station { --cel: linear-gradient(135deg, #0b7a55, #22a06b 45%, #7cc46a); --cel-c: #138a5e; }
.cel-castle { --cel: linear-gradient(135deg, #a86f00, #f5a524 40%, #e5487f); --cel-c: #c27c00; }
/* with buttons (a station won): the badge and the words, and under them the buttons side by side */
.celebrate.with-actions { flex-wrap: wrap; row-gap: 14px; padding-bottom: 14px; cursor: default; }
.celebrate.with-actions .cel-text { flex: 1; }
.cel-chip { align-self: flex-start; margin-bottom: 1px; padding: 2px 10px; border-radius: 999px; font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: .01em;
  background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.cel-actions { position: relative; z-index: 1; flex-basis: 100%; display: flex; gap: 10px; }
.cel-btn { flex: 1; min-height: 46px; padding: 0 14px; border: 0; border-radius: 15px; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); transition: transform .15s, background .2s; }
.cel-btn.primary { flex: 1.6; color: var(--cel-c); background: #fff; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .45); }
.cel-btn:hover { background: rgba(255, 255, 255, .26); }
.cel-btn.primary:hover { background: #fff; filter: brightness(.97); }
.cel-btn:active { transform: scale(.96); }
@keyframes cel-in { 0% { opacity: 0; transform: translate(-50%, -40px) scale(.7); } 60% { opacity: 1; } 100% { transform: translate(-50%, 0) scale(1); } }
@keyframes cel-out { to { opacity: 0; transform: translate(-50%, -24px) scale(.92); } }
/* a band of light sweeping across it */
.cel-shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .35) 48%, transparent 66%);
  transform: translateX(-120%); animation: cel-shine 1.6s .45s ease-in-out; }
@keyframes cel-shine { to { transform: translateX(120%); } }
/* the badge: white, bouncing in, a ring pulsing out of it */
.cel-badge { position: relative; flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #fff;
  color: var(--cel-c, #e5487f); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .45); animation: cel-pop .7s .15s cubic-bezier(.34, 1.8, .64, 1) both; }
.cel-badge svg { position: relative; animation: cel-wiggle 1.4s .8s ease-in-out 2; }
.cel-ring { position: absolute; inset: -4px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .8); animation: cel-ring 1.6s .35s ease-out infinite; }
@keyframes cel-pop { from { transform: scale(0) rotate(-30deg); } }
@keyframes cel-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg) scale(1.08); } 50% { transform: rotate(10deg); } 75% { transform: rotate(-5deg); } }
@keyframes cel-ring { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.55); opacity: 0; } }
.cel-text { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cel-text b { font-size: 19px; font-weight: 800; letter-spacing: -.2px; text-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.cel-text span { font-size: 14px; line-height: 1.45; opacity: .95; }
/* sparkles twinkling around the card */
.cel-sparks i { position: absolute; width: 10px; height: 10px; background: #fff; pointer-events: none; opacity: 0;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: cel-spark 1.8s ease-in-out infinite; }
.cel-sparks i:nth-child(1) { top: 10px; left: 18%; animation-delay: .3s; }
.cel-sparks i:nth-child(2) { bottom: 10px; left: 34%; width: 7px; height: 7px; animation-delay: .8s; }
.cel-sparks i:nth-child(3) { top: 14px; left: 52%; width: 8px; height: 8px; animation-delay: 1.2s; }
.cel-sparks i:nth-child(4) { bottom: 12px; left: 8%; width: 6px; height: 6px; animation-delay: .5s; }
.cel-sparks i:nth-child(5) { top: 8px; left: 4%; width: 7px; height: 7px; animation-delay: 1.5s; }
.cel-sparks i:nth-child(6) { bottom: 16px; right: 26%; width: 6px; height: 6px; animation-delay: 1s; }
@keyframes cel-spark { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { .celebrate, .celebrate *, .celebrate.leaving { animation: none !important; } .cel-sparks { display: none; } }
html[data-a11y~="motion"] .celebrate, html[data-a11y~="motion"] .celebrate * { animation: none !important; }

/* ---------- the watch in the settings: what the last reading found (settings.js drawHealth) ---------- */
.health-report { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 4px; }
.health-report span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.health-report b { font-size: 19px; font-variant-numeric: tabular-nums; }
.health-report small { font-size: 12px; color: var(--muted); }
.warn-note { color: color-mix(in srgb, var(--warn) 85%, var(--text)); }
.health-errors summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.health-errors pre { white-space: pre-wrap; font-size: 12px; background: var(--surface-2); padding: 8px; border-radius: 10px; }

/* ---------- the welcome wizard: its ×, its steps and its buttons (welcome.js) ---------- */
/* the × stands apart from the steps: they leave its corner free, and it shows clearly on any skin */
.wizard:has(.wz-close) .wz-steps { padding-inline-end: 68px; }
.wz-close { width: 44px; height: 44px; background: rgba(0, 0, 0, .22); border: 2px solid rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); }
.wz-close:hover { background: rgba(0, 0, 0, .32); border-color: #fff; }
/* no bubble floats behind the steps and the × at the top: the bubbles fade out before they get there */
.wz-bg { -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 120px, #000 220px); mask-image: linear-gradient(to bottom, transparent 0, transparent 120px, #000 220px); }
/* the buttons at the bottom: the same height, each on one line */
.wz-foot { align-items: stretch; }
.wz-foot .wz-count { align-self: center; flex: none; text-align: center; }
.wz-foot .btn { min-height: 52px; white-space: nowrap; display: inline-flex; align-items: center; }
@media (max-width: 640px) { .wz-foot .btn { padding-inline: 14px; } .wz-foot .wz-count { font-size: 12px; } }

/* a day of the week before the start date: faint, empty, not a link (diary.js dayCapsule) */
.wcap.pre { opacity: .32; pointer-events: none; }
.wcap.pre .wcap-glass { border-style: dotted; background: transparent; }

/* a switch in a row that isn't a label (a reminder with its hour): the switch is its own label */
.row-switch { position: relative; flex: none; display: inline-flex; align-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* the bottom bar's three places: always in one row; each shows its choice in the app's own type with
   an arrow inside the frame, and the phone's list (a select laid invisibly over it) opens on a tap */
.bp-choice { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; padding: 10px 10px 10px 8px;
  border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
.bp-choice b { min-width: 0; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-chev { flex: none; transform: rotate(-90deg); color: var(--muted); }
.bp-choice select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.bp-choice:has(select:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 380px) { .bp-slots { gap: 6px; } .bp-choice { padding-inline: 8px 6px; } .bp-choice b { font-size: 13px; } }

/* ---------- the sport ring's looks: fuel and week, drawn plainly (sport-page.js) ---------- */
.sr-track { stroke: var(--hx-track, rgba(255, 255, 255, .14)); }
.fuel-art .sr-center.fuel { padding: 0 34px; }
.sr-center.fuel b { font-size: 30px; }
.sr-bars li { grid-template-columns: 12px 1fr auto auto; row-gap: 6px; }
.srb-track { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--hx-track, rgba(255, 255, 255, .14)); overflow: hidden; }
.srb-track > span { display: block; height: 100%; width: var(--p); border-radius: inherit; background: var(--rc); transition: width .6s cubic-bezier(.22, 1, .36, 1); }
.sr-week { width: min(100%, 360px); color: var(--hx-ink); }
/* (the week's total in the activity panel's badge, as the bars' and the cards': health-page.js) */
.srw-head { display: flex; justify-content: center; margin-bottom: 16px; }
.sr-week svg { display: block; width: 100%; height: auto; overflow: visible; }
.srw-day rect { fill: url(#srW); opacity: .55; }
.srw-day.today rect { opacity: 1; filter: drop-shadow(0 4px 10px rgba(255, 106, 54, .45)); }
.srw-day.hit rect { opacity: .85; }
.srw-val { font-size: 11px; font-weight: 700; fill: var(--hx-ink); opacity: .85; font-variant-numeric: tabular-nums; }
.srw-lbl { font-size: 13px; fill: var(--hx-dim); }
.srw-day.today .srw-lbl { fill: var(--hx-ink); font-weight: 800; }
.srw-base { stroke: var(--hx-line-2, rgba(255, 255, 255, .25)); stroke-width: 1.5; }
.srw-goal { stroke: var(--hx-ink); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: .45; }
.srw-goal-lbl { font-size: 10px; fill: var(--hx-dim); }

/* the health ring's head in the reports: the title on one line, its two links at the far side, one
   under the other, flush with the edge and a little apart */
.hr-head h3 { white-space: nowrap; flex: none; }
.hr-links { flex: 1; min-width: 0; flex-direction: column; flex-wrap: nowrap; align-items: flex-end; gap: 8px; }
.hr-links .btn { white-space: nowrap; }

/* the candy skin's preview glitters like its header */
.sm-hero.sparkle {
  background: radial-gradient(circle at 14% 30%, rgba(255, 255, 255, .6) 0 1px, transparent 1.8px), radial-gradient(circle at 46% 78%, rgba(255, 255, 255, .5) 0 1px, transparent 1.8px),
    radial-gradient(circle at 62% 20%, rgba(255, 255, 255, .55) 0 1px, transparent 1.8px), radial-gradient(circle at 88% 64%, rgba(255, 255, 255, .5) 0 1px, transparent 1.8px),
    linear-gradient(165deg, var(--m-h0) 0%, var(--m-h1) 55%, var(--m-h2) 100%);
}

/* ---------- the calorie state's background: three soft, see-through colours drifting slowly (activity-stats.js) ---------- */
.cs-orbs { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; border-radius: inherit; }
.cs-orbs i { position: absolute; width: 75%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--oc), transparent); will-change: transform; }
.cs-orbs .o1 { --oc: rgba(167, 139, 250, .2); top: -35%; right: -20%; animation: cs-orb-a 26s ease-in-out infinite alternate; }
.cs-orbs .o2 { --oc: rgba(94, 200, 190, .16); bottom: -40%; left: -22%; animation: cs-orb-b 32s ease-in-out infinite alternate; }
.cs-orbs .o3 { --oc: rgba(244, 190, 160, .12); width: 60%; bottom: -30%; right: 18%; animation: cs-orb-c 38s ease-in-out infinite alternate; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cs-orbs .o1 { --oc: rgba(150, 125, 235, .26); }
  :root:not([data-theme="light"]) .cs-orbs .o2 { --oc: rgba(80, 180, 175, .2); }
  :root:not([data-theme="light"]) .cs-orbs .o3 { --oc: rgba(220, 165, 140, .13); }
}
:root[data-theme="dark"] .cs-orbs .o1 { --oc: rgba(150, 125, 235, .26); }
:root[data-theme="dark"] .cs-orbs .o2 { --oc: rgba(80, 180, 175, .2); }
:root[data-theme="dark"] .cs-orbs .o3 { --oc: rgba(220, 165, 140, .13); }
@keyframes cs-orb-a { to { transform: translate(-22%, 18%) scale(1.15); } }
@keyframes cs-orb-b { to { transform: translate(24%, -14%) scale(1.1); } }
@keyframes cs-orb-c { to { transform: translate(-30%, -22%) scale(.9); } }

/* ---------- clouds over the heroes' sea (art.js seaWaves): faint, crossing slowly ---------- */
/* the clouds' band: where the rings begin, behind them (placeSky sets its top and height) */
.sky { position: absolute; inset: 30% 0 auto 0; height: 26%; z-index: -1; pointer-events: none; overflow: hidden; }
.sky-defs { position: absolute; }
.cloud { position: absolute; left: 0; width: 100%; direction: ltr; opacity: .2; animation: cloud-cross linear infinite; will-change: transform; }
.cloud.c2 { opacity: .13; }
.cloud.c3 { opacity: .16; }
.cloud.c4 { opacity: .1; }
.cloud svg { display: block; width: calc(170px * var(--cs, 1)); height: auto; filter: blur(.8px); overflow: visible; }
/* alive: each puff swells and settles at its own pace */
.cloud .puff { transform-box: fill-box; transform-origin: center; animation: puff 9s ease-in-out infinite alternate; }
.cloud .p1 { animation-duration: 11s; animation-delay: -3s; } .cloud .p2 { animation-duration: 13s; animation-delay: -6s; }
.cloud .p3 { animation-duration: 10s; animation-delay: -2s; } .cloud .p4 { animation-duration: 12s; animation-delay: -8s; }
.cloud .p5 { animation-duration: 14s; animation-delay: -5s; }
@keyframes puff { to { transform: translate(1.5px, -2px) scale(1.07); } }
/* each cloud rides a track as wide as the sky, from past its right edge to past its left one */
@keyframes cloud-cross { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .cloud, .cloud .puff, .cs-orbs i { animation: none !important; } }
html[data-a11y~="motion"] :is(.cloud, .cs-orbs i) { animation: none !important; }
html.scrolling :is(.sky, .cs-orbs) * { animation-play-state: paused !important; }

/* ---------- the weight tile's trend (diary.js weightTrend) ---------- */
.weight-tile .wt-chart { position: relative; height: 62px; margin-top: 12px; }
.wt-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* the line is drawn from the oldest weighing (on the left) to the last: the chart is uncovered left to right */
.wt-chart svg { clip-path: inset(0 100% 0 0); animation: wt-draw 1.3s cubic-bezier(.22, 1, .36, 1) .15s forwards; }
.wt-line { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.wt-goal { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; opacity: .7; }
.wt-goal-label { position: absolute; left: 0; transform: translateY(-120%); font-size: 10.5px; font-weight: 700; color: var(--muted); }
.wt-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent); animation: wt-pulse 2.6s ease-in-out 1.3s infinite; }
@keyframes wt-draw { to { clip-path: inset(0 -2% 0 0); } }
@keyframes wt-pulse { 50% { box-shadow: 0 0 0 3px var(--surface), 0 0 0 9px color-mix(in srgb, var(--accent) 8%, transparent); } }
.wt-stats { display: flex; gap: 6px; margin-top: 10px; }
.wt-stat { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.wt-stat small { font-size: 11px; color: var(--muted); }
.wt-stat b { font-size: 13px; white-space: nowrap; }
.wt-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 14px; text-align: center; }
.wt-empty svg { width: 100%; max-width: 160px; height: 40px; fill: none; stroke: color-mix(in srgb, var(--accent) 45%, var(--border)); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 5 6; }
.wt-empty span { font-size: 12px; line-height: 1.4; color: var(--muted); }
.view.redraw .wt-chart svg { animation: none; clip-path: none; }
@media (prefers-reduced-motion: reduce) { .wt-chart svg, .wt-dot { animation: none !important; clip-path: none; } }

/* ---------- who made it, at the foot of the settings ---------- */
.made-by { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 34px 0 calc(18px + var(--sa-bottom, 0px)); font-size: 13.5px; color: var(--muted); }
.made-by a { font-weight: 700; color: var(--accent); text-decoration: none; border-bottom: 1.5px solid color-mix(in srgb, var(--accent) 35%, transparent); transition: border-color .2s; }
.made-by a:hover { border-bottom-color: var(--accent); }
.mb-heart { flex: none; filter: drop-shadow(0 2px 4px rgba(229, 36, 63, .35)); transform-origin: 50% 60%; animation: mb-beat 2.4s ease-in-out infinite; }
@keyframes mb-beat { 0%, 60%, 100% { transform: scale(1); } 10%, 30% { transform: scale(1.18); } 20% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .mb-heart { animation: none; } }
html[data-a11y~="motion"] .mb-heart { animation: none; }

/* ---------- the panel's menu: the looks in two groups, and the switch for two measures ---------- */
#heroMain { position: relative; }
/* the dots of a panel's looks, a moment under the one swiped in (swipe-looks.js), its own a longer pill */
.hs-dots { position: absolute; left: 50%; bottom: -13px; z-index: 3; display: flex; gap: 6px; padding: 5px 9px; border-radius: 999px; pointer-events: none;
  background: rgba(0, 0, 0, .24); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transform: translateX(-50%);
  animation: hs-dots-in .2s ease-out; transition: opacity .35s; }
.hs-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .45); }
.hs-dots i.on { width: 16px; background: #fff; }
.hs-dots.away { opacity: 0; }
@keyframes hs-dots-in { from { opacity: 0; transform: translate(-50%, 4px); } }
/* a panel's looks as a strip under the finger (swipe-looks.js): the part holds what slides in it, and
   the looks beside it come without its frame (the part's own stays) */
.sl-moving { overflow: hidden !important; }
.sl-pane { pointer-events: none; border-color: transparent !important; background: none !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.hs-menu { overflow-y: auto; overscroll-behavior: contain; }
.hs-menu button { padding-block: 6px; }
/* each group's name, standing out: its drawing in a tinted square, the name in bold */
.hs-group { display: flex; align-items: center; gap: 8px; padding: 10px 10px 3px; font-size: 13px; font-weight: 800; letter-spacing: .01em; color: color-mix(in srgb, var(--accent) 70%, var(--text)); }
.hs-group:first-child { padding-top: 4px; }
.hs-group.sport { color: color-mix(in srgb, #f08a24 75%, var(--text)); }
/* the diary panel's looks, as the menu's own: one under the other, each as wide as the menu */
.hs-menu-items { display: flex; flex-direction: column; gap: 2px; }
/* a wide screen (an iPad, a computer): the panel's looks open across, two to a row under each topic's title
   (an odd last takes the row: diary.js and look-switch.js mark it), whole without scrolling */
@media (min-width: 760px) {
  .hs-menu { width: min(560px, calc(100vw - 16px)); }
  .hs-menu-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 6px; }
  .hs-menu-items > :is(.hs-group, .hs-dual, .hs-layout, .hs-wide) { grid-column: 1 / -1; }
}
.hs-menu .hs-dual { margin-top: 6px; border-top: 1px solid var(--border); border-radius: 0 0 12px 12px; padding-top: 12px; }
.hs-menu .hs-dual[aria-checked="true"] { background: none; }
.hs-dual-ico { flex: none; width: 42px; display: grid; place-items: center; color: var(--accent); }
.hs-dual > span:nth-child(2) { flex: 1; min-width: 0; }
.hs-toggle { flex: none; position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--track); box-shadow: inset 0 0 0 1px var(--border); transition: background .25s; }
.hs-toggle i { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
  transition: transform .3s cubic-bezier(.34, 1.4, .64, 1); }
.hs-dual[aria-checked="true"] .hs-toggle { background: var(--accent); box-shadow: none; }
.hs-dual[aria-checked="true"] .hs-toggle i { transform: translateX(-18px); }
@media (prefers-reduced-motion: reduce) { .hs-toggle i { transition: none; } }

/* the day on screen in the week: already there, so it takes no tap */
span.wcap.on { pointer-events: none; cursor: default; }

/* ---------- the header's row, centred: the logo and the buttons each 16px from their edge, the clock
   in the middle of what is between them (equal columns pushed the buttons past the left edge when
   there were four of them on a narrow phone) ---------- */
.top-row { grid-template-columns: auto minmax(0, 1fr) auto; }
@media (max-width: 430px) {
  .top-row { gap: 8px; }
  .top-actions { gap: 7px; }
  .top-clock { padding: 0 12px; }
}

/* ---------- the reports' bar: PDF, print, Excel, email, the same everywhere, in one row (export-bar.js) ---------- */
.xbar { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: 16px;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.xb { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; min-width: 0; padding: 0 14px; border: 0; border-radius: 12px;
  background: none; color: var(--text); font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer;
  transition: background .2s, box-shadow .2s, transform .15s; }
.xb:hover { background: var(--surface); box-shadow: 0 4px 12px rgba(16, 24, 40, .08); }
.xb:active { transform: scale(.96); }
.xb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.xb-ico { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: #fff; background: var(--xc); box-shadow: 0 2px 6px -3px var(--xc); }
.xb-pdf { --xc: #e5484d; } .xb-print { --xc: #3b82f6; } .xb-excel { --xc: #1d8f55; } .xb-mail { --xc: #7c5cff; }
/* locked while the screen has nothing for it: grey, a small lock on each, a tap says why */
.xb-ico { position: relative; }
.xb-lock { display: none; position: absolute; bottom: -4px; inset-inline-start: -4px; width: 16px; height: 16px; place-items: center; border-radius: 50%;
  color: #fff; background: #64748b; box-shadow: 0 0 0 2px var(--surface); }
.xb[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
.xb[aria-disabled="true"] .xb-ico { background: #94a3b8; box-shadow: none; }
.xb[aria-disabled="true"] .xb-lock { display: grid; }
.xb[aria-disabled="true"]:hover { background: none; box-shadow: none; }
.xb[aria-disabled="true"]:active { transform: none; }
.xbar.on-hero .xb-lock { box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
.xb.pressed .xb-ico { animation: xb-pop .45s cubic-bezier(.34, 1.6, .64, 1); }
@keyframes xb-pop { 40% { transform: scale(1.18) rotate(-6deg); } }
/* on a coloured header: white glass */
.xbar.on-hero { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.xbar.on-hero .xb { color: #fff; }
.xbar.on-hero .xb:hover { background: rgba(255, 255, 255, .16); box-shadow: none; }
.xbar.on-hero .xb-ico { box-shadow: 0 0 0 2px rgba(255, 255, 255, .3); }
.xbar.on-hero .xb:focus-visible { outline-color: #fff; }
.hx-hero .xbar { display: grid; margin-top: 14px; }
.report-hero .hero-tools .xbar .xb { flex: none; }
@media (max-width: 640px) { .report-hero .xbar { display: grid; width: 100%; } }
.print-bar .xbar { flex: none; }
/* a phone: the four side by side, each word under its drawing (never cut, the same width each) */
@media (max-width: 520px) {
  .xb { flex-direction: column; gap: 4px; min-height: 56px; padding: 6px 2px; font-size: 12.5px; line-height: 1.1; }
  .xb-ico { width: 26px; height: 26px; border-radius: 8px; }
  .xb-ico svg { width: 15px; height: 15px; }
  .xb-lock { top: -6px; bottom: auto; inset-inline-start: -6px; }
  .xbar { display: grid; width: 100%; }
}
.xo-excel .po-art { color: #1d8f55; }
/* the email window (export-bar.js): violet, what to attach as two toggles */
.xo-mail .po-art { background: linear-gradient(145deg, #8b5cf6, #6d28d9); box-shadow: 0 14px 28px -14px rgba(109, 40, 217, .8); }
.xo-mail .po-bar i { background: linear-gradient(90deg, #7c5cff, #c084fc); }
.mo-to { color: var(--text); font-weight: 700; unicode-bidi: isolate; overflow-wrap: anywhere; }
.mo-pick { display: flex; justify-content: center; gap: 8px; margin: 12px 0 2px; }
.xo-mail[data-state="making"] .mo-pick, .xo-mail[data-state="ready"] .mo-pick { display: none; }
.mo-kind { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 12px 0 10px; border: 1.5px solid var(--border); border-radius: 14px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: border-color .2s, background .2s; }
.mo-kind .xb-ico { width: 26px; height: 26px; border-radius: 8px; }
.mo-kind .xb-ico svg { width: 15px; height: 15px; }
.mo-kind::after { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid var(--border); }
.mo-kind[aria-pressed="true"] { border-color: var(--xc); background: color-mix(in srgb, var(--xc) 9%, var(--surface)); }
.mo-kind[aria-pressed="true"]::after { border: 0; background: var(--xc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.mo-kind[aria-pressed="false"] .xb-ico { background: #94a3b8; box-shadow: none; }
.mo-kind:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mo-off { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); color: var(--muted); font-size: 13.5px; line-height: 1.5; }
/* the printable page of the activity: one week a row */
.pr-days.pr-wide { grid-template-columns: minmax(0, 1fr); }

/* ---------- the AI's full summary (ai-summary.js) ---------- */
.ai-sum { position: relative; overflow: hidden; }
.ai-sum::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--ai-grad); }
.as-head, .lt-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.as-head h3, .lt-head h3 { margin: 0 0 2px; }
.as-head > div, .lt-head > div { min-width: 0; }
.as-art, .lt-art svg { flex: none; display: block; border-radius: 16px; box-shadow: 0 3px 8px -5px rgba(0, 0, 0, .35); }
.as-art .as-spark { transform-box: fill-box; transform-origin: center; animation: ai-twinkle 2.4s ease-in-out infinite; }
.as-art .as-spark.b { animation-delay: -1.2s; }
.as-skel i { display: block; height: 14px; margin: 10px 0; border-radius: 7px; background: linear-gradient(90deg, var(--surface-2), var(--border), var(--surface-2)); background-size: 200% 100%; animation: as-shimmer 1.4s linear infinite; }
.as-skel i:nth-child(2) { width: 80%; } .as-skel i:nth-child(3) { width: 58%; }
@keyframes as-shimmer { to { background-position: -200% 0; } }
.as-empty p { margin: 0 0 10px; line-height: 1.65; }
.as-points { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; }
.as-points li { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #6a46f0; background: color-mix(in srgb, #7c5cff 11%, transparent); }
.as-empty .btn, .as-acts .btn { display: inline-flex; align-items: center; gap: 8px; }
.as-empty .btn svg { border-radius: 6px; }
.as-wait { padding: 18px 0 6px; text-align: center; }
.as-orbit { position: relative; width: 64px; height: 64px; margin: 0 auto 12px; }
.as-orbit i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; border-top-color: #7c5cff; animation: as-spin 1.2s linear infinite; }
.as-orbit i:nth-child(2) { inset: 9px; border-top-color: #e5487f; animation-duration: 1.6s; animation-direction: reverse; }
.as-orbit i:nth-child(3) { inset: 18px; border-top-color: #22a06b; animation-duration: 2.1s; }
@keyframes as-spin { to { transform: rotate(360deg); } }
.as-line { margin: 0 0 4px; font-weight: 700; }
.as-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.as-top h4 { margin: 0 0 2px; font-size: 17px; }
.as-score { position: relative; flex: none; width: 54px; height: 54px; }
.as-score svg { display: block; width: 100%; height: 100%; }
.as-score b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 19px; color: var(--sc); }
.as-overall { margin: 0 0 14px; font-size: 15px; line-height: 1.7; }
.as-status { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.as-st { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--vc) 8%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vc) 24%, transparent); }
.as-st-top { display: flex; justify-content: space-between; gap: 6px; font-size: 12.5px; color: var(--muted); }
.as-st-top em { font-style: normal; font-weight: 800; color: var(--vc); }
.as-st b { font-size: 16px; }
.as-st small { font-size: 12px; line-height: 1.45; color: var(--muted); }
.as-sec { margin: 0 0 10px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.as-sec h5, .as-plan h5 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 14.5px; }
.as-ico { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: #fff; background: var(--sc); }
.as-sec ul { margin: 0; padding-inline-start: 20px; }
.as-sec li, .as-plan li { margin: 4px 0; line-height: 1.6; }
.as-sec li::marker { color: var(--sc); }
.as-plan { margin: 0 0 10px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, #7c5cff 9%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #7c5cff 24%, transparent); }
.as-plan ol { margin: 0; padding-inline-start: 22px; }
.as-plan li::marker { font-weight: 800; color: #7c5cff; }
.as-caution { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.55;
  background: color-mix(in srgb, #f0a020 12%, var(--surface)); }
.as-caution svg { flex: none; margin-top: 2px; color: #c27c0e; }
.as-note { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.as-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.as-acts .danger { color: #e5484d; }
.as-older { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); }
.as-older summary { padding: 6px 0; font-weight: 700; cursor: pointer; }
.as-older ul { display: grid; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.as-older li { display: flex; align-items: center; gap: 6px; }
.as-pick { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px; border: 0; border-radius: 12px;
  background: var(--surface-2); color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.as-pick small { font-size: 12px; color: var(--muted); }
@media (max-width: 340px) { .as-status { grid-template-columns: minmax(0, 1fr); } }

/* ---------- the long view on the reports (long-term.js) ---------- */
.lt-title { margin: 18px 0 8px; font-size: 15px; }
.lt-body > .lt-title:first-child { margin-top: 0; }
/* the measures, the foods and the tips (long-term.js): rows that end even at any width, their count
   from how many there are (--cols: ten measures five and five); a narrower page wraps them sooner, the
   last row's cards wider (auto-fill had left a lone card or empty room at the end of a row) */
.lt-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.lt-grid > .lt-card { flex: 1 1 max(150px, calc((100% - (var(--cols, 6) - 1) * 8px) / var(--cols, 6) - 1px)); min-width: 0; }
.lt-card { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border);
  border-inline-start: 3px solid var(--lc); }
.lt-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12.5px; color: var(--muted); }
.lt-top em { flex: none; padding: 1px 8px; border-radius: 999px; font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--lc); background: color-mix(in srgb, var(--lc) 14%, transparent); }
.lt-card b { font-size: 16px; }
.lt-bar { display: block; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.lt-bar i { display: block; height: 100%; border-radius: 3px; background: var(--lc); transform-origin: right; animation: lt-grow .9s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes lt-grow { from { transform: scaleX(0); } }
.lt-card small { font-size: 11.5px; color: var(--muted); }
.lt-fix { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: fix; }
.lt-fix li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; padding-inline-start: 46px; border-radius: 14px; background: var(--surface-2); counter-increment: fix; }
.lt-fix li::before { content: counter(fix); position: absolute; top: 10px; inset-inline-start: 12px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: #f08a24; color: #fff; font-size: 13px; font-weight: 800; }
.lt-fix li span { font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.lt-great { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; font-weight: 600; color: #1a7f53; background: color-mix(in srgb, #22a06b 12%, var(--surface)); }
.lt-foods, .lt-tips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
:is(.lt-foods, .lt-tips) > * { flex: 1 1 max(220px, calc((100% - (var(--cols, 4) - 1) * 8px) / var(--cols, 4) - 1px)); min-width: 0; }
.lt-foods li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, #22a06b 8%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #22a06b 20%, transparent); }
.lt-foods li > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.lt-foods b { font-size: 14px; }
.lt-foods small { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.lt-leaf { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: #fff; background: #22a06b; }
.lt-tip { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border-top: 3px solid var(--accent); }
.lt-tip p { margin: 0; font-size: 13.5px; line-height: 1.6; }
.lt-src.ltr { align-self: flex-end; } /* (English only: on the left, left to right) */
.lt-src { align-self: flex-start; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.lt-note { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.lt-wait { margin: 0; line-height: 1.6; }

/* ---------- sleep and food on the activity page (sleep-food.js) ---------- */
.sf-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.sf-kpis > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 6px; border-radius: 14px; text-align: center; background: var(--surface-2); }
.sf-kpis span { font-size: 12px; color: var(--muted); }
.sf-kpis b { font-size: 18px; }
.sf-kpis small { font-size: 11px; color: var(--muted); }
.sf-plot { margin: 0 0 12px; padding: 10px; border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, #6366f1 10%, var(--surface)), var(--surface-2)); }
.sf-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.sf-plot figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.sf-guide { stroke: #6366f1; stroke-width: 1.2; stroke-dasharray: 4 4; opacity: .7; }
.sf-goal { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 5; opacity: .7; }
.sf-tx { font-size: 10px; font-weight: 700; fill: var(--muted); }
.sf-dot { fill: #6366f1; opacity: .85; transform-box: fill-box; transform-origin: center; animation: sf-pop .5s cubic-bezier(.34, 1.6, .64, 1) both; animation-delay: calc(var(--i) * 25ms); }
.sf-dot.short { fill: #f08a24; }
@keyframes sf-pop { from { transform: scale(0); opacity: 0; } }
.sf-key i { display: inline-block; width: 10px; height: 10px; margin-inline-end: 4px; border-radius: 50%; background: #f08a24; vertical-align: middle; }
.sf-cards { display: grid; gap: 8px; }
.sf-card { --tc: #6366f1; display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 14px; background: var(--surface-2); }
.sf-card.t-warn { --tc: #f08a24; } .sf-card.t-good { --tc: #22a06b; }
.sf-big { flex: none; min-width: 80px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border-radius: 12px; color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); }
.sf-big b { font-size: 18px; white-space: nowrap; }
.sf-big small { font-size: 10.5px; font-weight: 700; text-align: center; }
.sf-card p { margin: 0 0 4px; font-size: 14px; line-height: 1.55; }
.sf-card > div:last-child > small { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.sf-tips { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.sf-tips li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #6366f1 8%, var(--surface)); }
.sf-tips b { font-size: 13.5px; }
.sf-tips small { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .as-orbit i, .as-skel i, .lt-bar i, .sf-dot, .xb.pressed .xb-ico { animation: none !important; } }

/* ---------- the sensitivities: what each one is (sens-kb.js), the engine's marks ---------- */
.pe-kb { display: grid; gap: 8px; margin-top: 12px; }
.pe-kb .pe-about { margin-top: 0; }
.sens-kb { display: grid; gap: 10px; margin-top: 10px; font-size: 14px; line-height: 1.6; }
.sens-kb p { margin: 0; }
.sk-what { color: var(--text); }
.sk-why { padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.sk-row { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border-inline-start: 4px solid var(--skc); }
.sk-row b { display: block; margin-bottom: 2px; color: var(--skc); }
.sk-row p { font-size: 13.5px; color: var(--text); }
.sk-row.avoid { --skc: #e5484d; } .sk-row.limit { --skc: #e59a0b; } .sk-row.hidden { --skc: #8b5cf6; } .sk-row.safe { --skc: #22a06b; }
.sk-tip { padding: 8px 12px; border-radius: 12px; font-size: 13.5px; background: color-mix(in srgb, #f0a020 11%, var(--surface)); }
.sk-sources { font-size: 12.5px; color: var(--muted); }
.sk-sources a { color: var(--accent); }
.sk-note { font-size: 12px; color: var(--muted); }
.sens-kb-dlg .dlg-body { padding-bottom: 18px; }
/* on an item's page: a chip for each of the user's sensitivities, opening what it is */
.sk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.sk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2);
  color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .2s, background .2s; }
.sk-chip svg { color: var(--accent); flex: none; }
.sk-chip:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
/* "in moderation" (the engine's limit): amber, not red */
.sens-alert.warn.soft { --sa: #e59a0b; border-color: color-mix(in srgb, #e59a0b 50%, transparent); background: color-mix(in srgb, #e59a0b 10%, var(--surface)); }
.sens-alert.warn.soft .sens-alert-ico { animation: none; }
/* the admin area: how much the engine has learned */
/* the sensitivities engine (admin.js sensAdmin): its drawing alive while it learns, the bar with a
   shine running over it, the numbers, the foods asked about now, the seconds ticking, a line a batch */
.se-head { display: flex; align-items: center; gap: 12px; }
.se-orb { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; color: #fff;
  background: linear-gradient(145deg, #7c5cff, #22a06b); box-shadow: 0 8px 18px -8px rgba(124, 92, 255, .6); }
.se-head.done .se-orb { background: linear-gradient(145deg, #22a06b, #0e7a57); }
.se-title { display: grid; gap: 2px; min-width: 0; }
.se-title b { font-size: 17px; }
.se-title small { font-size: 12.5px; color: var(--muted); }
.se-pct { margin-inline-start: auto; display: grid; justify-items: center; line-height: 1.1; }
.se-pct b { font-size: 24px; font-weight: 800; color: #7c5cff; font-variant-numeric: tabular-nums; }
.se-pct small { font-size: 11.5px; color: var(--muted); }
.se-head.on .se-ring { transform-origin: 24px 24px; animation: se-spin 6s linear infinite; }
.se-head.on .se-spark { transform-box: fill-box; transform-origin: center; animation: se-twinkle 1.6s ease-in-out infinite; }
.se-head.on .se-s2 { animation-delay: .8s; }
.se-head.on .se-orb { animation: se-glow 2.4s ease-in-out infinite; }
@keyframes se-spin { to { transform: rotate(360deg); } }
@keyframes se-twinkle { 0%, 100% { opacity: .25; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes se-glow { 0%, 100% { box-shadow: 0 8px 18px -8px rgba(124, 92, 255, .6); } 50% { box-shadow: 0 8px 26px -4px rgba(124, 92, 255, .85); } }
.se-what { margin: 12px 0 10px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.se-bar { position: relative; height: 12px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, #7c5cff 12%, var(--surface-2)); }
.se-bar i { position: relative; display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #22a06b, #7c5cff); transition: width .6s ease; overflow: hidden; }
.se-bar.on i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: se-shine 1.6s ease-in-out infinite; }
@keyframes se-shine { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
.se-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
@media (max-width: 560px) { .se-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.se-stats span { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.se-stats b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.se-stats small { font-size: 12px; color: var(--muted); line-height: 1.35; }
.se-all { margin: 8px 2px 0; }
.se-live { display: grid; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 14px;
  background: color-mix(in srgb, #7c5cff 8%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #7c5cff 30%, transparent); }
.se-now { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; font-weight: 600; }
.se-now .se-timer { margin-inline-start: auto; }
.se-line { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.se-timer { flex: none; font-variant-numeric: tabular-nums; color: #7c5cff; }
/* (the wave starts at the right and runs to the left, as Hebrew reads, whatever the direction around it) */
.se-dots { display: inline-flex; gap: 4px; direction: rtl; }
.se-dots i { width: 7px; height: 7px; border-radius: 50%; background: #7c5cff; animation: se-dot 1.2s ease-in-out infinite; }
.se-dots i:nth-child(2) { animation-delay: .2s; }
.se-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes se-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
/* the foods of the batch asked now: whole names, one under another (two columns where there is room), the rest folded */
.se-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 6px 10px; margin: 0; padding: 0; font-size: 13.5px; line-height: 1.45; }
.se-list li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 10px; border-radius: 12px; background: color-mix(in srgb, var(--surface) 80%, transparent); overflow-wrap: anywhere; }
.se-list li b { flex: none; display: grid; place-items: center; min-width: 22px; height: 22px; margin-top: 1px; border-radius: 999px; font-size: 11.5px; font-variant-numeric: tabular-nums; color: #fff; background: #7c5cff; }
.se-list li span { flex: 1; min-width: 0; }
.se-rest > summary { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #7c5cff; background: color-mix(in srgb, #7c5cff 12%, transparent); cursor: pointer; list-style: none; }
.se-rest > summary::-webkit-details-marker { display: none; }
.se-rest[open] > summary { margin-bottom: 6px; }
/* the learning's money counter (admin.js sensAdmin) */
.se-money { display: grid; gap: 4px; justify-items: center; margin: 12px 0; padding: 16px 14px 12px; border-radius: 18px; text-align: center;
  background: linear-gradient(160deg, color-mix(in srgb, #7c5cff 18%, var(--surface)), color-mix(in srgb, #2eb67d 14%, var(--surface))); box-shadow: inset 0 0 0 1px color-mix(in srgb, #7c5cff 28%, transparent); }
.se-m-label { font-size: 13px; font-weight: 700; color: var(--muted); }
.se-m-num { font-size: 46px; line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.5px; background: linear-gradient(90deg, #7c5cff, #2eb67d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.se-m-ils { font-size: 13px; font-weight: 600; color: var(--muted); }
.se-m-live { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 2px; padding: 6px 12px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--text) 7%, transparent); color: inherit; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.se-m-live small { font-weight: 400; color: var(--muted); }
.se-m-sw { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: color-mix(in srgb, var(--text) 22%, transparent); transition: background .2s; }
.se-m-sw i { position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: inset-inline-start .2s; }
.se-m-live[aria-checked="true"] .se-m-sw { background: #2eb67d; }
.se-m-live[aria-checked="true"] .se-m-sw i { inset-inline-start: 16px; }
.se-m-live:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.se-m-pair { flex: none; display: grid; justify-items: start; gap: 0; }
.se-m-exp-top > span:first-child { flex: 1; min-width: 0; }
.se-m-big, .se-m-val { font-size: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.se-m-sub { font-size: 12px; color: var(--muted); }
.se-m-exp { display: grid; gap: 6px; width: 100%; margin-top: 10px; padding: 12px; border-radius: 14px; text-align: start; background: color-mix(in srgb, var(--surface) 70%, transparent); }
.se-m-exp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.se-m-exp-top span { font-size: 13px; color: var(--muted); line-height: 1.4; }
.se-m-exp-top b { flex: none; font-size: 20px; font-variant-numeric: tabular-nums; }
.se-m-track { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.se-m-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7c5cff, #2eb67d); transition: width .9s cubic-bezier(.22, 1, .36, 1); }
.se-m-exp-bot { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--muted); }
.se-m-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; width: 100%; margin-top: 8px; }
@media (max-width: 520px) { .se-m-row { grid-template-columns: 1fr 1fr; } }
.se-m-row > span { display: grid; gap: 1px; padding: 8px 6px; border-radius: 12px; background: color-mix(in srgb, var(--surface) 70%, transparent); }
.se-m-row b { font-size: 16px; font-variant-numeric: tabular-nums; }
.se-m-row small { font-size: 11.5px; color: var(--muted); }
.se-m-now { margin-top: 4px; font-size: 12px; min-height: 1.4em; }
.se-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.se-chips span { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.se-chips .se-more { color: var(--muted); }
.se-log { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.se-log li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 14px; font-size: 13.5px; background: color-mix(in srgb, var(--surface) 80%, transparent); }
.se-log li i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-style: normal; font-weight: 800; font-size: 13px; color: #fff; }
.se-log li .se-log-t { flex: 1; min-width: 0; display: grid; gap: 3px; }
.se-log li .se-log-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.se-log li .se-log-t b { font-size: 14px; }
.se-log li .se-log-time { flex: none; padding: 2px 9px; border-radius: 999px; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: #7c5cff; background: color-mix(in srgb, #7c5cff 14%, transparent); }
.se-log li .se-log-t em { display: grid; gap: 2px; font-style: normal; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.se-log li .se-log-t em span { position: relative; padding-inline-start: 12px; overflow-wrap: anywhere; }
.se-log li .se-log-t em span::before { content: ""; position: absolute; inset-inline-start: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, #7c5cff 60%, var(--muted)); }
.se-log li .se-log-t em .se-log-more { font-weight: 700; color: #7c5cff; }
.se-log li .se-log-t em .se-log-more::before { display: none; }
.se-log li small { flex: none; padding-top: 3px; color: var(--muted); font-variant-numeric: tabular-nums; }
.se-log .se-good i { background: #16a34a; }
.se-log .se-bad i { background: #dc2626; }
.se-log .se-bad .se-log-t b { color: #dc2626; }
.se-note { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .se-head.on .se-ring, .se-head.on .se-spark, .se-head.on .se-orb, .se-bar.on i::after, .se-dots i { animation: none; } }
.sens-meter { display: grid; gap: 4px; margin: 10px 0; }
.sens-bar { height: 10px; border-radius: 5px; background: var(--track); overflow: hidden; }
.sens-bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #22a06b, #7c5cff); transition: width .5s ease; }

/* ---------- the admin screen's backups (admin.js backup) ---------- */
.bk-now h3 { margin: 0 0 10px; }
.bk-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.bk-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.bk-stats span { font-size: 12.5px; color: var(--muted); }
.bk-stats b { font-size: 18px; }
.bk-stats small { font-size: 12px; color: var(--muted); }
.bk-note { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; font-weight: 600; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.bk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.bk-card { display: flex; flex-direction: column; gap: 10px; border-top: 4px solid var(--bk); }
.bk-card header { display: flex; align-items: center; gap: 10px; }
.bk-card h4 { margin: 0; font-size: 16px; }
.bk-card header small { color: var(--muted); }
.bk-card p { flex: 1; margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.bk-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #fff; background: var(--bk); box-shadow: 0 3px 8px -5px var(--bk); }
.bk-list .bk-ico { width: 34px; height: 34px; border-radius: 10px; }
.bk-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
/* a backup being made (admin.js makingHtml): its picture with rings going out, the time so far, a running bar */
.bk-making { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 12px; padding: 10px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--bk) 12%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--bk) 40%, transparent); }
.bk-making-ico { position: relative; grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; background: var(--bk); }
.bk-making-ico svg { animation: bk-bob 1.2s ease-in-out infinite; }
.bk-making-ico i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--bk); animation: bk-ring 1.8s ease-out infinite; }
.bk-making-ico i + i { animation-delay: .9s; }
.bk-making-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bk-making-text b { font-size: 14.5px; }
.bk-making-text small { font-size: 12.5px; color: var(--muted); }
.bk-making-bar { height: 6px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--bk) 28%, transparent); }
.bk-making-bar i { display: block; width: 45%; height: 100%; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--bk) 30%, transparent), var(--bk) 50%, color-mix(in srgb, var(--bk) 30%, transparent)); animation: bk-run 1.3s ease-in-out infinite; }
.bk-card.making { animation: bk-glow 1.6s ease-in-out infinite; }
@keyframes bk-ring { from { transform: scale(1); opacity: .75; } to { transform: scale(1.9); opacity: 0; } }
@keyframes bk-bob { 50% { transform: translateY(-2px); } }
@keyframes bk-run { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
@keyframes bk-glow { 50% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--bk) 45%, transparent), 0 12px 28px -14px var(--bk); } }
@media (prefers-reduced-motion: reduce) { .bk-making-ico svg, .bk-making-ico i, .bk-making-bar i, .bk-card.making { animation: none; } }
/* the full backup's "with the food pictures" switch: its size as a tag at the end, never broken */
.bk-switch { display: flex; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); color: var(--text); font-size: 13.5px; }
.bk-switch .label { flex: 1; min-width: 0; line-height: 1.4; }
.bk-size { flex: none; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--bk); background: color-mix(in srgb, var(--bk) 14%, transparent); }
.bk-card .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.bk-fact { white-space: nowrap; }
.bk-facts { display: flex; flex-wrap: wrap; gap: 2px 18px; }
.bk-facts .bk-fact + .bk-fact { color: var(--muted); }
.bk-tag { display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; vertical-align: middle;
  color: #b45309; background: color-mix(in srgb, #f59e0b 16%, transparent); }
.bk-list .btn.small { white-space: nowrap; }
.bk-upload-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; }
/* how many of a kind are kept, at the top of its list (admin.js keepRow): wraps on a narrow card */
.bk-keep-one { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.bk-keep-one .bk-what { flex: 1 1 170px; }
.bk-keep-one .stepper { align-self: center; background: var(--surface); }
.bk-keep-one .stepper input { width: 56px; }
.bk-keep-one .btn { white-space: nowrap; }
/* (saved already: dimmed until the number changes) */
.bk-keep-one [data-keep-save]:disabled { opacity: .4; cursor: default; filter: grayscale(.3); }
.bk-upload { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; }

/* ---------- the restore window (admin.js openRestore) ---------- */
.rs { display: flex; flex-direction: column; gap: 12px; }
.rs h4 { margin: 4px 0 0; font-size: 15px; }
.rs-wait { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 8px; text-align: center; }
.rs-wait p { margin: 0; color: var(--muted); }
.rs-head { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--surface-2); }
.rs-head div { display: flex; flex-direction: column; gap: 2px; }
.rs-head small { color: var(--muted); font-size: 12.5px; }
.rs-checks { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.rs-checks li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
.rs-checks li > span { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; }
.rs-checks .ok > span { background: #16a34a; }
.rs-checks .no > span { background: #dc2626; }
.rs-checks .warn > span { background: #d97706; }
.rs-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rs-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.rs-stats span, .rs-stats small { font-size: 12px; color: var(--muted); }
.rs-stats b { font-size: 18px; }
.rs-warnings { margin: 0; padding: 10px 14px 10px 14px; padding-inline-start: 28px; border-radius: 12px; font-size: 13px; line-height: 1.6;
  color: #92400e; background: color-mix(in srgb, #f59e0b 14%, var(--surface)); }
.rs-bad { margin: 0; padding: 12px 14px; border-radius: 12px; font-weight: 600; color: #b91c1c; background: color-mix(in srgb, #dc2626 12%, var(--surface)); }
.rs-scopes { display: grid; gap: 8px; }
.rs-scope { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; cursor: pointer; background: var(--surface-2); box-shadow: inset 0 0 0 2px transparent; }
.rs-scope:has(input:checked) { box-shadow: inset 0 0 0 2px var(--accent); }
.rs-scope input { margin-top: 4px; accent-color: var(--accent); }
.rs-scope span { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.rs-scope small { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.rs-scope select { margin-top: 6px; max-width: 100%; }
.rs-safety { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.rs-safety svg { flex: none; margin-top: 2px; color: #16a34a; }
.rs-typed { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.rs-typed input { max-width: 220px; }
.rs-done { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.rs-done .rs-checks { text-align: start; }
.rs-done-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: #fff; background: #16a34a; }
.rs-done-ico svg { width: 28px; height: 28px; }
@media (max-width: 520px) { .rs-stats { grid-template-columns: 1fr 1fr; } .rs-stats > div:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.bk-row { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-row .btn { flex: 1 1 auto; }
.bk-load { cursor: pointer; }
.bk-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bk-list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.bk-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* a backup's row on a phone: its name and date whole on the first line, its buttons under them */
.bk-list li { flex-wrap: wrap; }
.bk-list .bk-what { flex: 1 1 170px; }
.bk-list .bk-what small { white-space: nowrap; }
/* (a restore names its file: long, so it wraps where it must) */
.rs-history .bk-what small { white-space: normal; overflow-wrap: anywhere; }
.bk-acts { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.bk-what small { font-size: 12.5px; color: var(--muted); }
.bk-cron { margin-bottom: 8px; }
.bk-cron h3 { margin: 0 0 8px; }
.bk-cron p { margin: 4px 0; font-size: 13.5px; line-height: 1.6; }
.bk-cron ul { margin: 6px 0; padding-inline-start: 20px; font-size: 13.5px; line-height: 1.6; }
/* the watch's switch and the runs it kept (admin.js cronPanel) */
.bk-watch { margin-top: 10px; }
/* the backup tab's way to the scheduled jobs (their own tab now) */
.bk-to-cron { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; padding: 12px 14px; text-decoration: none; color: inherit; }
.bk-to-cron .bk-to-go { flex: none; color: var(--muted); }

/* ---------- the scheduled jobs' tab (admin.js cronTab) ---------- */
.cj-panel { margin-top: 12px; }
.cj-panel h3 { margin: 0 0 6px; }
.cj-panel > p { margin: 0 0 10px; line-height: 1.6; }
.cj-list { display: grid; gap: 8px; }
/* a job's or a chain's row: its switch, its drawing in its colour, its name, what it does and when */
.cj-row { align-items: center; gap: 12px; transition: opacity .2s; }
.cj-row.off .cj-ico, .cj-row.off .label { opacity: .55; }
.cj-ico { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--cj); }
.cj-when { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: color-mix(in srgb, var(--cj) 70%, var(--text)); }
.cj-when .error { font-weight: 700; }
/* the timing and the alerts: two in a row (one on a narrow phone), each its question over its field */
.cj-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 520px) { .cj-fields { grid-template-columns: minmax(0, 1fr); } }
.cj-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 13.5px; font-weight: 600; }
.cj-field > span small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.cj-field select { width: 100%; }
.cj-saved { min-height: 1.4em; margin: 8px 2px 0; }
/* the prices' hours: across both columns, quick picks over the day's 24 hours, what they come to under them */
.cj-field.cj-wide { grid-column: 1 / -1; }
.cj-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.cj-preset { padding: 6px 12px; border: 0; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.cj-preset[aria-pressed="true"] { color: #fff; background: #0ea5e9; box-shadow: none; }
.cj-hours { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 560px) { .cj-hours { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.cj-hour { min-height: 38px; padding: 0; border: 0; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  font-variant-numeric: tabular-nums; color: var(--muted); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.cj-hour[aria-pressed="true"] { color: #fff; background: linear-gradient(160deg, #38bdf8, #0284c7); box-shadow: none; }
.cj-hour:focus-visible, .cj-preset:focus-visible { outline: 2px solid #0ea5e9; outline-offset: 2px; }
.cj-hours-sum { font-size: 13.5px; color: #0369a1; }
:root[data-theme="dark"] .cj-hours-sum { color: #7dd3fc; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cj-hours-sum { color: #7dd3fc; } }
/* the prices brought in now (admin.js cronTab): the chains as chips, the run's bars and its log */
.pn-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pn-chip { position: relative; cursor: pointer; }
.pn-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pn-chip span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.pn-chip span small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.pn-chip input:checked + span { color: #0369a1; background: color-mix(in srgb, #0ea5e9 14%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #0ea5e9 50%, var(--border)); }
.pn-chip input:checked + span::before { content: "✓"; font-weight: 800; }
.pn-chip input:focus-visible + span { outline: 2px solid #0ea5e9; outline-offset: 2px; }
.pn-chip.off { cursor: default; opacity: .55; }
/* the run's button across, "all" and "none" side by side under it, the stop across while it runs */
.pn-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pn-actions .btn { gap: 6px; justify-content: center; }
.pn-actions #pnGo, .pn-actions #pnStop { grid-column: 1 / -1; }
.pn-actions #pnStop[hidden] { display: none; }
.pn-live { display: grid; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.pn-line { display: grid; grid-template-columns: minmax(70px, auto) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; }
.pn-bar { height: 10px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, #0ea5e9 14%, var(--surface)); }
.pn-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #38bdf8, #0284c7); transition: width .3s ease-out; }
.pn-line b { font-size: 12.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.pn-stage { min-height: 1.4em; margin: 0; }
.pn-log { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pn-log li { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; }
.pn-log li i { flex: none; width: 1.2em; font-style: normal; font-weight: 800; text-align: center; }
.pn-log li small { margin-inline-start: auto; color: var(--muted); white-space: nowrap; }
.pn-log .pn-good i { color: #16a34a; }
.pn-log .pn-same i { color: var(--muted); }
.pn-log .pn-mid i { color: #d97706; }
.pn-log .pn-bad i, .pn-log .pn-bad span { color: #dc2626; }

/* ---------- the server's tab (admin.js serverTab) ---------- */
.mon-live { display: flex; align-items: center; gap: 8px; margin: 12px 2px 0; }
.mon-dot { width: 8px; height: 8px; border-radius: 50%; background: #22a06b; box-shadow: 0 0 0 0 rgba(34, 160, 107, .5); animation: mon-pulse 2s ease-out infinite; }
@keyframes mon-pulse { 70% { box-shadow: 0 0 0 7px rgba(34, 160, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 160, 107, 0); } }
.mon-panel { margin-top: 12px; }
/* who lets the server in: the places the data comes from (admin.js reachPanel, Reach.php) */
.rc-panel { margin-top: 12px; }
.rc-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.rc-top p { flex: 1 1 260px; margin: 0; line-height: 1.55; }
/* the server's own address (Reach: Cloudflare's trace), to give a chain asked to let it in */
.rc-ip { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin: 10px 0 0; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; background: color-mix(in srgb, var(--accent) 9%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); }
.rc-ip p { flex: 1 1 260px; min-width: 0; margin: 0; }
.rc-ip .bk-copy { flex: none; margin-inline-start: auto; }
.rc-ip bdi { font-weight: 800; font-variant-numeric: tabular-nums; }
.rc-run { display: inline-flex; align-items: center; gap: 8px; }
.rc-sum { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 2px; }
.rc-sum span { --rc: #16a34a; display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 13px; border-radius: 999px; font-size: 13px;
  color: color-mix(in srgb, var(--rc) 78%, var(--text)); background: color-mix(in srgb, var(--rc) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 24%, transparent); }
.rc-sum b { font-size: 16px; font-variant-numeric: tabular-nums; }
.rc-sum .bad { --rc: #dc2626; }
.rc-sum .bad.zero { --rc: #94a3b8; }
.rc-sum .pc { --rc: #2563eb; }
.rc-h { margin: 18px 2px 8px; font-size: 13px; font-weight: 800; letter-spacing: .01em; color: var(--muted); }
.rc-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
/* two to a row on a wide screen; an odd last as wide as the others, not across the row (the user asked) */
@media (min-width: 900px) {
  .rc-list { grid-template-columns: 1fr 1fr; gap: 8px; }
}
.rc-row { --rc: #16a34a; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--rc) 5%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 18%, transparent); }
.rc-row.bad { --rc: #dc2626; }
.rc-row.warn { --rc: #d97706; }
.rc-row.pc { --rc: #2563eb; }
.rc-dot { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: color-mix(in srgb, var(--rc) 85%, var(--text)); background: color-mix(in srgb, var(--rc) 15%, transparent); }
.rc-name { display: grid; gap: 1px; min-width: 0; }
.rc-name b { font-size: 14.5px; overflow-wrap: anywhere; }
.rc-name small { font-size: 12px; line-height: 1.45; color: var(--muted); }
.rc-meta bdi { white-space: nowrap; }
.rc-meta { margin-top: 2px; font-size: 11px; font-style: normal; line-height: 1.4; color: color-mix(in srgb, var(--muted) 85%, transparent); }
.rc-pill { padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 800; font-style: normal; white-space: nowrap;
  color: color-mix(in srgb, var(--rc) 80%, var(--text)); background: color-mix(in srgb, var(--rc) 14%, transparent); }
@media (max-width: 520px) { .rc-row { gap: 10px; padding: 9px 10px; } .rc-dot { width: 28px; height: 28px; } }
.rc-empty { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, #0f766e 9%, transparent); }
.rc-empty span { color: color-mix(in srgb, #0f766e 85%, var(--text)); }
.rc-empty p { margin: 0; }
.rc-when { margin: 14px 2px 0; line-height: 1.55; }
.rc-acts { display: inline-flex; align-items: stretch; gap: 10px; }
.rc-acts > .help-q { align-self: center; }
.rc-acts > .bk-copy.rc-log-all { align-items: center; padding-inline: 16px; font-size: 14px; }
.rc-acts .help-q { margin: 0; }
/* what to do about a place not let in, under its line */
.rc-todo { margin-top: 6px; padding: 6px 10px; border-radius: 10px; font-size: 12.5px; line-height: 1.5; color: var(--text);
  background: color-mix(in srgb, var(--rc) 9%, transparent); }
.rc-todo b { color: color-mix(in srgb, var(--rc) 80%, var(--text)); }
/* the check's "?": what it says and what to do (admin.js rcHelp, info-window.js) */
/* each place asked again on its own, and its request's log in a window with a copy button (Reach::runOne, rcLog) */
.rc-one { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rc-one .bk-copy, .bk-copy.rc-log-all { gap: 5px; padding: 4px 10px; font-size: 12px; box-shadow: none; }
.bk-copy.rc-log-all { padding: 7px 12px; font-size: 13px; }
.jr-info.rc-log-win { width: min(640px, calc(100% - 24px)); }
.rc-log-win .ji-card { align-items: stretch; gap: 10px; padding: 22px 20px 16px; text-align: start; }
.rc-log-win h2 { margin: 0; font-size: 18px; text-align: center; overflow-wrap: anywhere; }
.rc-log-bar { display: flex; justify-content: flex-end; }
.rc-log { margin: 0; padding: 10px 12px; max-height: min(52vh, 440px); overflow: auto; overscroll-behavior: contain; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border); white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; text-align: right;
  font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text); user-select: text; -webkit-user-select: text; }
.jr-info.rc-help-win { width: min(440px, calc(100% - 24px)); }
.rc-help-win .ji-card { align-items: stretch; gap: 10px; padding: 22px 20px 16px; text-align: start; }
.rc-help-win h2 { text-align: center; }
.rc-help-lead { margin: 0 !important; font-size: 14px !important; line-height: 1.55 !important; color: var(--muted); text-align: center; }
.rc-help { display: grid; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.rc-help .rc-row { grid-template-columns: auto minmax(0, 1fr); padding: 7px 10px; }
.rc-help .rc-dot { width: 28px; height: 28px; }
.rc-help .rc-name small { font-size: 12.5px; }
.rc-help-note { margin: 0 !important; font-size: 12.5px !important; color: var(--muted); text-align: center; }
.mon-panel h3 { margin: 0 0 10px; }
.mon-h4 { margin: 16px 2px 6px; font-size: 13.5px; color: var(--muted); }
.mon-note { margin: 10px 2px 0; line-height: 1.6; }
/* the gauges: the processor, the memory and the disk, a ring each in the colour of how full it is */
.mon-gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 700px) { .mon-gauges { grid-template-columns: minmax(0, 1fr); } }
.mon-gauge { --mc: #22a06b; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.mon-gauge.warn { --mc: #f59e0b; }
.mon-gauge.bad { --mc: #e5484d; }
.mon-gauge.none { --mc: var(--muted); }
.mon-ring { flex: none; color: var(--mc); }
.mon-gauge > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 13.5px; }
.mon-gauge b { font-size: 14.5px; }
.mon-gauge small { font-size: 12px; color: var(--muted); }
/* the app's load: six numbers, two or three in a row */
.mon-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 700px) { .mon-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mon-stats > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.mon-stats span { font-size: 12.5px; color: var(--muted); }
.mon-stats b { font-size: 20px; font-variant-numeric: tabular-nums; }
.mon-stats small { font-size: 12px; color: var(--muted); line-height: 1.4; }
.mon-stats .mon-bad b { color: #e5484d; }
/* the bars over time: the oldest on the left, now on the right */
.mon-chart { position: relative; direction: ltr; padding-top: 16px; }
.mon-max { position: absolute; top: 0; left: 0; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mon-bars { display: block; width: 100%; height: 110px; }
.mon-bars rect { fill: var(--accent); opacity: .85; }
.mon-bars .mon-base { stroke: var(--border); }
.mon-axis { position: relative; height: 18px; margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.mon-axis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.mon-axis span.first { transform: none; left: 0 !important; }
.mon-axis span.last { transform: none; left: auto !important; right: 0; }
.mon-top { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.mon-top th { text-align: start; font-size: 12px; font-weight: 600; color: var(--muted); padding: 4px 6px; }
.mon-top td { padding: 7px 6px; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.mon-top td small { color: var(--muted); margin-inline-start: 4px; }
.mon-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; }
@media (max-width: 520px) { .mon-facts { grid-template-columns: minmax(0, 1fr); } }
.mon-facts > div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); font-size: 13.5px; }
.mon-facts dt { color: var(--muted); }
.mon-facts dd { margin: 0; font-weight: 600; text-align: end; }
.mon-log summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.mon-log summary::-webkit-details-marker { display: none; }
.mon-log pre { max-height: 320px; overflow: auto; margin: 10px 0 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
/* ---------- the admin's overview (admin.js summary): each part a section that opens and closes ---------- */
.ov-sec { margin-top: 10px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.ov-head { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; cursor: pointer; }
.ov-head::-webkit-details-marker { display: none; }
.ov-head:focus-visible { outline: 3px solid color-mix(in srgb, var(--ov) 55%, transparent); outline-offset: 2px; }
.ov-ico { flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, color-mix(in srgb, var(--ov) 72%, #fff), var(--ov)); }
.ov-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ov-title b { font-size: 16px; }
.ov-title small { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the arrow: a round chip in the part's colour, turning up as it opens */
.ov-arrow { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ov);
  background: color-mix(in srgb, var(--ov) 12%, var(--surface)); transition: transform .25s cubic-bezier(.34, 1.3, .6, 1), background .2s; }
.ov-head:hover .ov-arrow { background: color-mix(in srgb, var(--ov) 22%, var(--surface)); }
.ov-sec[open] > .ov-head .ov-arrow { transform: rotate(180deg); }
.ov-sec[open] > .ov-head { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ov-body { padding: 4px 14px 14px; }
.ov-body > .report-kpis:first-child, .ov-body > .panel:first-child { margin-top: 0; }
.ov-body > .panel { box-shadow: none; padding-inline: 0; }
@media (prefers-reduced-motion: reduce) { .ov-arrow { transition: none; } }

/* prices from a computer (admin.js summary, wirePushKey) */
.pp-panel { margin-top: 12px; }
.pp-panel h3 { margin: 0 0 6px; }
.pp-panel p, .pp-panel ol { margin: 0 0 10px; font-size: 13.5px; line-height: 1.65; }
.pp-panel ol { padding-inline-start: 20px; }
.pp-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.pp-row .btn { white-space: nowrap; }
.pp-panel .bk-cmd { margin-top: 10px; }
/* the pictures engine on the computer, live (admin.js engineHtml): its state, the run going on with its
   stages, numbers and log, the last run, the options and the runs before */
.eng-panel { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.eng-panel h5 { margin: 0; font-size: 15px; }
.eng-head { display: flex; align-items: center; gap: 12px; }
.eng-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.eng-head h4 { margin: 0; font-size: 18px; }
.eng-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #fff; background: linear-gradient(145deg, #2f8ff0, #7c5cff); }
.eng-state { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap;
  color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); }
.eng-state i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.eng-state.s-run { color: var(--good); border-color: color-mix(in srgb, #22a06b 45%, var(--border)); background: color-mix(in srgb, #22a06b 12%, var(--surface)); }
.eng-state.s-run i, .eng-pulse { animation: eng-pulse 1.4s ease-in-out infinite; }
.eng-state.s-wait { color: #d97706; } .eng-state.s-away, .eng-state.s-none { color: var(--warn); }
@keyframes eng-pulse { 50% { opacity: .25; transform: scale(.7); } }
.eng-panel > .bk-facts { margin: 0; font-size: 13.5px; }
.eng-setup p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.6; }
.eng-setup ol { margin: 0 0 4px; padding-inline-start: 20px; font-size: 13.5px; line-height: 1.7; }
.eng-warn { margin: 0; padding: 8px 12px; border-radius: 12px; font-size: 13.5px; color: var(--warn); background: color-mix(in srgb, #e5484d 9%, transparent); }
.eng-live, .eng-last { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 16px; background: var(--surface-2); }
.eng-live { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #22a06b 40%, transparent); }
.eng-sub { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.eng-sub h5 { display: inline-flex; align-items: center; gap: 8px; }
.eng-pulse { width: 10px; height: 10px; border-radius: 50%; background: #22a06b; }
.eng-ok { color: var(--good); } .eng-bad { color: var(--warn); }
.eng-bar { position: relative; height: 22px; border-radius: 999px; overflow: hidden; background: var(--track); }
.eng-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #22a06b, #2f8ff0); transition: width .6s ease; }
.eng-bar span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12.5px; font-weight: 800; color: var(--text); }
/* the stages: six, three by two on a phone (they end even) */
.eng-stages { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.eng-stages li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 14px; text-align: center; background: var(--surface); border: 1px solid var(--border); }
.eng-st-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 14px; font-weight: 900; color: var(--muted); border: 2px solid var(--border); }
.eng-stages .s-done .eng-st-ico { color: #fff; background: #16a34a; border-color: #16a34a; }
.eng-stages .s-fail .eng-st-ico { color: #fff; background: #dc2626; border-color: #dc2626; }
.eng-stages .s-run { border-color: color-mix(in srgb, #2f8ff0 55%, var(--border)); background: color-mix(in srgb, #2f8ff0 9%, var(--surface)); }
.eng-stages .s-run .eng-st-ico { border-color: color-mix(in srgb, #2f8ff0 30%, transparent); border-top-color: #2f8ff0; animation: eng-turn .9s linear infinite; }
.eng-stages .s-skip, .eng-stages .s-wait { opacity: .6; }
@keyframes eng-turn { to { transform: rotate(360deg); } }
.eng-st-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.eng-st-tx b { font-size: 13px; line-height: 1.25; }
.eng-st-tx small { font-size: 11.5px; color: var(--muted); }
/* the numbers: six tiles, three by two (two by three on a phone) */
.eng-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.eng-nums > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.eng-nums span { font-size: 12.5px; color: var(--muted); }
.eng-nums b { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.eng-nums small { font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.eng-panel .bk-run { margin-top: 0; background: var(--surface); }
.eng-last .bk-run, .eng-live .bk-run { background: var(--surface); }
/* the log: a time, the stage and the line (in Hebrew where it is known); its own scroll, newest at the bottom */
.eng-log { margin: 0; padding: 10px 12px 12px; max-height: 280px; overflow: auto; list-style: none; display: flex; flex-direction: column; gap: 3px;
  font-size: 13px; line-height: 1.5; user-select: text; -webkit-user-select: text; }
.eng-log li { display: flex; align-items: baseline; gap: 8px; }
.eng-log time { flex: none; font: 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--muted); direction: ltr; }
.eng-l-st { flex: none; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface-2); }
.eng-l-tx { min-width: 0; overflow-wrap: anywhere; }
.eng-l-tx[dir="ltr"] { font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: left; }
.eng-l-none { color: var(--muted); }
.eng-logbox .bk-log { padding-bottom: 2px; }
/* the options */
.eng-opts { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; border: 1px solid var(--border); }
.eng-opt-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.eng-time { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.eng-time select { padding: 7px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-variant-numeric: tabular-nums; }
.eng-run-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 4px; }
.eng-run-row .btn { white-space: nowrap; }
.eng-asked { font-size: 13.5px; color: #d97706; }
/* the runs before: a row each, opened to its stages, numbers and lines */
.eng-runs { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0 12px 12px; list-style: none; }
.eng-runs details { border-radius: 12px; background: var(--surface-2); }
.eng-runs summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 10px; cursor: pointer; font-size: 13px; list-style: none; }
.eng-runs summary::-webkit-details-marker { display: none; }
.eng-runs summary .bk-arrow { width: 28px; height: 28px; margin-inline-start: auto; }
.eng-runs details[open] > summary .bk-arrow { transform: rotate(180deg); }
.eng-r-when { font-weight: 700; } .eng-r-what, .eng-r-sum { color: var(--muted); }
.eng-r-body { display: flex; flex-direction: column; gap: 10px; padding: 0 10px 10px; }
.eng-r-body .eng-log { padding: 0; max-height: 220px; }
@media (max-width: 760px) {
  .eng-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .eng-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eng-head { flex-wrap: wrap; }
}
.bk-cmd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.bk-run .bk-cmd { margin: 0; border-radius: 0 0 12px 12px; border-top: 1px solid var(--border); }
.bk-cmd code { flex: 1 1 260px; min-width: 0; font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: left; word-break: break-all; user-select: all; -webkit-user-select: all; }
.bk-cmd .btn { white-space: nowrap; }
.bk-switch .label small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.bk-run { margin-top: 8px; border-radius: 12px; background: var(--surface-2); }
.bk-run summary { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; font-size: 13.5px; list-style: none; }
.bk-run summary::-webkit-details-marker { display: none; }
.bk-run-head { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
/* the arrow at the row's end (on the left): a round button, turned up when the row is open */
.bk-arrow { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--accent);
  background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: 0 2px 6px -3px rgba(0, 0, 0, .25);
  transition: transform .25s ease, background .15s; }
.bk-run summary:hover .bk-arrow { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.bk-run[open] > summary .bk-arrow { transform: rotate(180deg); }
.bk-run-st { color: #15803d; font-weight: 600; }
.bk-run.bad .bk-run-st { color: #b91c1c; }
.bk-log { border-top: 1px solid var(--border); }
.bk-log-bar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 10px 12px 0; }
.bk-run pre { margin: 0; padding: 10px 12px 12px; max-height: 300px; overflow: auto; white-space: pre-wrap; word-break: break-word; text-align: left;
  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; user-select: text; -webkit-user-select: text; }
/* the run's log in sections: a job's title with a tick or a cross, its lines under it */
.bk-secs { display: grid; gap: 8px; padding: 10px 12px 12px; user-select: text; -webkit-user-select: text; }
.bk-sec { padding: 10px 12px; border-radius: 12px; background: var(--surface); border-inline-start: 4px solid #16a34a; }
.bk-sec.bad { border-inline-start-color: #dc2626; background: color-mix(in srgb, #dc2626 7%, var(--surface)); }
.bk-sec h5 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 14px; }
.bk-sec-ico { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; background: #16a34a; }
.bk-sec.bad .bk-sec-ico { background: #dc2626; }
.bk-sec-ico svg { width: 13px; height: 13px; }
.bk-sec ul { margin: 0; padding-inline-start: 28px; font-size: 13px; line-height: 1.65; color: var(--text); }
.bk-sec li { overflow-wrap: anywhere; }
/* a copy button (the scheduled jobs' log and command): an outlined pill, green with a tick once copied */
.bk-copy { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--accent); background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 2px 6px -3px rgba(0, 0, 0, .25); transition: background .15s, color .15s, border-color .15s; }
.bk-copy:hover { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.bk-copy.done { color: #fff; background: #16a34a; border-color: #16a34a; }
.bk-clear { color: #dc2626; border-color: color-mix(in srgb, #dc2626 40%, var(--border)); }
.bk-clear:hover { background: color-mix(in srgb, #dc2626 10%, var(--surface)); }

/* ---------- two measures on the panel: the food look, a line, the sport look (diary.js heroMain) ---------- */
.hs-dual-sep { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; color: rgba(255, 255, 255, .78); font-size: 12.5px; font-weight: 700; }
.hs-dual-sep::before, .hs-dual-sep::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); }
.hs-dual-sep span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }

/* ---------- the sport look's tiles: every one the same height (diary.js sportRings) ---------- */
@media (max-width: 760px) {
  .hero-sport { align-items: stretch; }
  .hero-sport .sp-ring-row, .hero-sport .sp-card:not(.sp-work) { min-height: 86px; box-sizing: border-box; }
  .hero-sport .sp-ring-row > div, .hero-sport .sp-card > div { justify-content: center; }
  /* the unit on its own line under the numbers, the same in every tile */
  .hero-sport .sp-ring-row b small { display: block; margin-top: 2px; }
  .hero-sport .sp-card small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- the printable report's first blocks, across the page (reports.js insightBlocks) ---------- */
.pr-day.pr-block { grid-column: 1 / -1; }
.pr-in { padding: 8px 10px 10px; font-size: 12px; line-height: 1.55; }
.pr-in h3 { margin: 8px 0 4px; font-size: 12.5px; color: #0b3d2e; }
.pr-in h3:first-child { margin-top: 0; }
.pr-in ol, .pr-in ul { margin: 0; padding-inline-start: 18px; }
.pr-in li { margin: 2px 0; }
.pr-in small { color: #6b7280; }
.pr-in p { margin: 0; }
.pr-block table.pr-measures td:not(:first-child), .pr-block table.pr-measures th:not(:first-child) { width: auto; }
.pr-measures .lv-good { color: #15803d; font-weight: 700; }
.pr-measures .lv-fair { color: #b45309; font-weight: 700; }
.pr-measures .lv-poor { color: #b91c1c; font-weight: 700; }
.pr-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pr-stat { display: flex; flex-direction: column; padding: 6px 8px; border: 1px solid #e5e7eb; border-radius: 8px; }
.pr-stat span { font-size: 10.5px; color: #6b7280; }
.pr-stat b { font-size: 13px; color: #172033; }
.pr-line { margin-top: 6px !important; color: #374151; }
/* the printable page's bar: the way back at its far end */
.print-bar .back-btn { order: 3; }

/* the AI's points: a short label before a colon, in bold and in the section's colour */
.as-lbl { font-weight: 800; color: color-mix(in srgb, var(--sc, var(--accent)) 70%, var(--text)); }
.as-plan .as-lbl { color: color-mix(in srgb, #7c5cff 70%, var(--text)); }
.as-sec li, .as-plan li { padding-inline-start: 2px; }

/* ---------- two measures side by side: two halves of the same height (diary.js sideMain) ---------- */
.hero-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 10px; width: 100%; padding-top: 6px; }
.hs-half { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 12px 10px 12px; border-radius: 22px;
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.hs-half-title { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13.5px; font-weight: 700; opacity: .92; }
.hs-half .hs-mini { width: 142px; height: 142px; flex: none; }
.hs-half .gauge.hs-mini .gauge-center b { font-size: 30px; }
.hs-half .gauge.hs-mini .gauge-center span { font-size: 11.5px; margin-top: 2px; }
.hs-half .gauge.hs-mini .gauge-center .gc-pre { font-size: 11px; margin-bottom: 2px; }
.hs-half .gauge.hs-mini .gauge-center small { margin-top: 5px; padding: 1px 8px; font-size: 10.5px; }
.hs-half .sp-rings.hs-mini { position: relative; display: block; color: #fff; text-decoration: none; }
.hs-half .sp-rings.hs-mini svg { width: 100%; height: 100%; }
.hs-half .sp-rings.hs-mini .sp-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.hs-half .sp-rings.hs-mini .sp-center b { font-size: 26px; }
.hs-half .sp-rings.hs-mini .sp-center span { font-size: 11px; opacity: .85; }
.hs-mini-list { display: grid; gap: 4px; width: 100%; margin: 2px 0 0; }
.hs-mini-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 5px 9px; border-radius: 10px; background: rgba(255, 255, 255, .07); }
.hs-mini-list dt { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; opacity: .85; white-space: nowrap; }
.hs-mini-list dt i { width: 7px; height: 7px; border-radius: 50%; background: var(--rc); }
.hs-mini-list dt .hs-walker { flex: none; margin-block: -4px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .22)); }
/* (the badge at its full colour: the row's word as dim as the others') */
.hs-mini-list dt:has(.hs-walker) { opacity: 1; color: color-mix(in srgb, currentColor 85%, transparent); }
.hs-mini-list > div:has(.hs-walker) { align-items: center; padding-block: 4px; }
.hs-mini-list dd { margin: 0; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hs-mini-list dd small { font-size: 10.5px; font-weight: 500; opacity: .7; }
.hs-mini-list dd.f { color: #ffc56b; } .hs-mini-list dd.a { color: #6ff0e2; } .hs-mini-list dd.s { color: #ffd38a; } .hs-mini-list dd.w { color: #9bdcff; }
/* the menu: how the two measures sit */
.hs-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 2px 6px 6px; }
.hs-menu .hs-layout button { flex-direction: column; justify-content: center; gap: 4px; padding: 10px 4px; border: 1.5px solid var(--border); border-radius: 12px; font-size: 12.5px; font-weight: 600; text-align: center; }
.hs-menu .hs-layout button svg { color: var(--muted); }
.hs-menu .hs-layout button[aria-checked="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.hs-menu .hs-layout button[aria-checked="true"] svg { color: var(--accent); }

/* the lock's cover fading away (lock.js hideCover) */
dialog.app-lock, dialog.app-lock::backdrop { transition: opacity .25s ease; }
dialog.app-lock.leaving, dialog.app-lock.leaving::backdrop { opacity: 0; }

/* ---------- the rings' empty part on a coloured header: light, with a hint of its colour, so the
   rings read on any skin (a faint tint of their own colour vanished on the pink and the light ones) ---------- */
:is(.hx-hero, .dash-hero, .sport-hero) .act-rings .ring-track { stroke: color-mix(in srgb, var(--rk) 30%, #fff); stroke-opacity: .38; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.hx-hero, .dash-hero, .sport-hero) .act-rings .ring-track { stroke-opacity: .2; } }
:root[data-theme="dark"] :is(.hx-hero, .dash-hero, .sport-hero) .act-rings .ring-track { stroke-opacity: .2; }
/* the lit part stands out a little from the header */
:is(.hx-hero, .dash-hero, .sport-hero) .act-rings .ring-arc { filter: drop-shadow(0 0 2px rgba(0, 0, 0, .18)); }

/* ---------- the reports' section titles: a badge in the section's colour, as the diary's cards (reports.js reportHeads) ---------- */
.rep-h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 17.5px; line-height: 1.25; }
.panel-head .rep-h, .tips-head .rep-h, .nr-head .rep-h { margin: 0; }
.rh-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; color: #fff;
  background: var(--rh); box-shadow: 0 3px 8px -5px var(--rh); }
/* the line under a title: close to it */
.nr-head .muted, .tips-head .muted { display: block; margin-top: 3px; margin-inline-start: 42px; }
body[data-page="reports"] .view > section + section { margin-top: 16px; }

/* a bar's bubble placed as it shows (reports.js wireBarTips): within the chart, the arrow on the bar */
.kbar .kbar-tip.placed { left: var(--tl); right: auto; transform: translate(0, 6px); }
.kbar:is(:hover, :focus) .kbar-tip.placed { transform: translate(0, 0); }
.kbar .kbar-tip.placed::after { left: var(--ax); right: auto; transform: translateX(-50%) rotate(45deg); }

/* an odd last card in a grid of two: across the whole row, so the grid ends even */
.as-status > .as-st:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 520px) { .lt-grid > .lt-card { flex-basis: calc(50% - 4px); } }

/* ---------- the reports' titles, as the diary's (reports.js reportHeads) ---------- */
.rep-head { margin: 26px 2px 10px; }
.rep-head + section { margin-top: 0 !important; }
.rep-titled .rep-moved { display: none !important; }
/* a panel whose title went above it: its first line starts at the top */
.rep-titled > .hr-head:has(> .rep-moved) { justify-content: flex-start; }
.rep-titled .hr-links { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; }

/* ---------- a page on its way (loader.js): the mark in three turning arcs, what loads, a running light ---------- */
.page-loader { position: fixed; inset: 0; z-index: 25; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding-bottom: calc(90px + var(--sa-bottom, 0px)); background: color-mix(in srgb, var(--bg) 50%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1); opacity: 0; transition: opacity .25s ease; pointer-events: none; }
/* (the page on screen shows through, frosted: the cover was nearly the page's own colour, a dark
   screen at night) */
.page-loader.on { opacity: 1; pointer-events: auto; }
.page-loader.leaving { opacity: 0; transition-duration: .22s; }
/* standing in the page itself (the first load, a food's page): no cover, just the middle of the page */
.page-loader.static { position: static; min-height: 62vh; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 1; animation: pl-in .4s ease .25s both; }
@keyframes pl-in { from { opacity: 0; } }
.pl-art { position: relative; width: 120px; height: 120px; display: grid; place-items: center; }
.pl-rings { position: absolute; inset: 0; width: 100%; height: 100%; }
.pl-track { fill: none; stroke: var(--track); stroke-width: 7; opacity: .7; }
.pl-arc { fill: none; stroke-width: 7; stroke-linecap: round; transform-origin: 60px 60px; }
.pl-arc.a1 { stroke: var(--accent); stroke-dasharray: 90 237; animation: pl-spin 1.6s cubic-bezier(.5, .15, .5, .85) infinite; }
.pl-arc.a2 { stroke: color-mix(in srgb, var(--glow) 70%, var(--accent)); stroke-dasharray: 60 191; animation: pl-spin 2.1s cubic-bezier(.5, .15, .5, .85) infinite reverse; }
.pl-arc.a3 { stroke: #f5a524; stroke-dasharray: 40 136; animation: pl-spin 1.2s linear infinite; }
@keyframes pl-spin { to { transform: rotate(360deg); } }
.pl-logo { position: relative; width: 34px; height: 34px; border-radius: 10px; animation: pl-beat 1.6s ease-in-out infinite; }
@keyframes pl-beat { 50% { transform: scale(1.12); } }
.pl-text { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
/* the dots after the words, appearing one by one */
.pl-text::after { content: ""; display: inline-block; width: 1.2em; text-align: start; animation: pl-dots 1.4s steps(1) infinite; }
@keyframes pl-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.pl-bar { position: relative; width: 150px; height: 5px; border-radius: 3px; background: var(--track); overflow: hidden; }
.pl-bar i { position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: pl-run 1.3s ease-in-out infinite; }
@keyframes pl-run { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) { .pl-arc, .pl-logo, .pl-text::after, .pl-bar i { animation: none !important; } }
html[data-a11y~="motion"] :is(.pl-arc, .pl-logo, .pl-bar i), html[data-a11y~="motion"] .pl-text::after { animation: none !important; }
/* the health ring's figures: an odd last one across the row */
@media (max-width: 520px) { .hr-kpis > div:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* ---------- the reports' health ring: centred, the rings large, each ring's count a tile under them ---------- */
.rep-titled > .hr-head:has(> .rep-moved), .rep-titled .hr-links { justify-content: center; }
.hr-main { flex-direction: column; justify-content: center; gap: 18px; margin: 16px 0 6px; }
.hr-rings { width: 230px; height: 230px; }
.hr-rings svg { width: 100%; height: 100%; }
.hr-center b { font-size: 34px; }
.hr-center span { font-size: 12.5px; }
.hr-legend { width: 100%; min-width: 0; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.hr-legend li { flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px 12px; border-radius: 16px; text-align: center;
  background: color-mix(in srgb, var(--rc) 8%, var(--surface-2)); box-shadow: inset 0 3px 0 var(--rc); }
.hr-legend i { margin: 2px 0 0; width: 10px; height: 10px; box-shadow: none; }
.hr-legend li > div { align-items: center; gap: 1px; }
.hr-legend b { font-size: 22px; }
.hr-legend b small { display: block; margin-top: 1px; }

/* ---------- the calorie state's number: in the look's own colours, large and bold, always whole and
   in the middle (its size follows the panel's width, so a long number never runs past the frame) ---------- */
.cs-panel .cs-hero { container-type: inline-size; }
.cs-panel .cs-big { display: block; max-width: 100%; margin-inline: auto; text-align: center; white-space: nowrap; overflow: hidden;
  font-size: min(68px, calc(100cqi / (var(--len, 5) * .64 + .4))); font-weight: 900; line-height: 1.05; letter-spacing: -1px; padding-bottom: 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 80%, #000) 10%, var(--accent) 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cs-panel .cs-big { background: linear-gradient(180deg, #fff 25%, color-mix(in srgb, var(--glow) 75%, #fff)); -webkit-background-clip: text; background-clip: text; }
}
:root[data-theme="dark"] .cs-panel .cs-big { background: linear-gradient(180deg, #fff 25%, color-mix(in srgb, var(--glow) 75%, #fff)); -webkit-background-clip: text; background-clip: text; }


/* ---------- the panel's menu: its title and a close button at the top, staying while it scrolls ---------- */
#heroMain > .hs-pick { top: 6px; z-index: 4; }
.hs-menu-head { position: sticky; top: -6px; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: -6px -6px 2px; padding: 10px 12px 10px 10px; border-bottom: 1px solid var(--border); border-radius: 18px 18px 0 0; background: var(--surface); }
.hs-menu-head b { font-size: 16.5px; font-weight: 800; }
.hs-menu .hs-close { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%;
  background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); transition: background .2s, transform .15s; }
.hs-menu .hs-close:hover { background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); }
.hs-menu .hs-close:active { transform: scale(.92); }

/* the rings' tiles all in one row, whatever their number (none left alone on a row of its own) */
.hr-legend { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.hr-legend b { font-size: 20px; }
.hr-legend b small { font-size: 11.5px; }
.hr-legend span { font-size: 12.5px; }

/* a chip beside a moved title (the day's load on the sport page) */
.rep-head .dh-title { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.rep-head .load-chip { font-size: 12px; font-weight: 700; letter-spacing: 0; }

/* ---------- the reports' meals: each against its part of the daily target (reports.js mealShares) ---------- */
/* (scoped to the reports' list: the add sheet's meal picker has its own .meal-row) */
.meal-rows { display: grid; gap: 10px; }
.meal-rows > .meal-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: color-mix(in srgb, var(--mc) 7%, var(--surface-2)); }
.mr-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; background: var(--mc); box-shadow: 0 3px 8px -5px var(--mc); }
.mr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.mr-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mr-top > b { font-size: 15px; }
.mr-top span { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.mr-top span b { font-size: 15px; color: var(--text); }
.mr-track { height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; }
.mr-track i { display: block; height: 100%; border-radius: 4px; background: var(--mc); transform-origin: right; animation: lt-grow .8s cubic-bezier(.22, 1, .36, 1) both; }
.mr-track i.over { background: #e5484d; }
.mr-track i.low { opacity: .65; }
.meal-rows > .meal-row small { font-size: 12px; color: var(--muted); }

/* ---------- the AI switched off (or not set up): not one AI part shows (app.js html.ai-off) ---------- */
html.ai-off :is(.ai-only, #photoBtn, .ai-quick-grid, #recipeAi, .recipe-ai, [data-tool="photo"], [data-ai-sum], li:has(> .sn-item[data-side="ai"])) { display: none !important; }

/* the admin screen's switch for the AI */
.ai-master { display: flex; align-items: center; gap: 14px; border-inline-start: 4px solid var(--muted); }
.ai-master.on { border-inline-start-color: #7c5cff; }
.ai-master .am-text { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ai-master .am-text b { font-size: 16.5px; }
.ai-master .am-text .muted { font-size: 13px; line-height: 1.5; }
.hs-toggle-btn { flex: none; padding: 4px; border: 0; background: none; cursor: pointer; }
.hs-toggle-btn .hs-toggle { display: block; width: 52px; height: 30px; }
.hs-toggle-btn .hs-toggle i { width: 24px; height: 24px; }
.hs-toggle-btn[aria-checked="true"] .hs-toggle { background: #7c5cff; box-shadow: none; }
.hs-toggle-btn[aria-checked="true"] .hs-toggle i { transform: translateX(-22px); }

/* ---------- maintenance in the admin screen (admin.js maintenancePanel; the page itself: app/maintenance.html) ---------- */
.mta { display: grid; gap: 14px; margin-bottom: 14px; border-inline-start: 4px solid var(--muted); }
.mta.on { border-inline-start-color: #f5a524; background: color-mix(in srgb, #f5a524 7%, var(--surface)); }
.mta-head { display: flex; align-items: center; gap: 14px; }
.mta-head .am-text { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.mta-head .am-text b { font-size: 16.5px; }
.mta-head .am-text .muted { font-size: 13px; line-height: 1.5; }
.mta-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #c27400; background: color-mix(in srgb, #f5a524 18%, var(--surface)); }
.mta-pill { display: inline-block; margin-inline-start: 6px; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; background: #d97706; vertical-align: 2px; }
.mta-switch[aria-checked="true"] .hs-toggle { background: #e08a00; }
.mta-form { display: grid; gap: 12px; }
.mta-form textarea { resize: vertical; min-height: 64px; }
.mta-at { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mta-form .actions { margin: 0; }
.mta-pass { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; border-radius: 14px; background: var(--row-alt); font-size: 13.5px; font-weight: 600; }
.mta-pass-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.mta-banner { display: flex; align-items: center; gap: 8px; margin: 16px 0 12px; padding: 10px 14px; border-radius: 14px; color: #8a5a00; font-weight: 600;
  background: color-mix(in srgb, #f5b52e 18%, var(--surface)); border: 1px solid color-mix(in srgb, #f5b52e 50%, transparent); }
.mta-banner svg { flex: none; }
:root[data-theme="dark"] :is(.mta-banner, .mta-ico) { color: #ffd27a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.mta-banner, .mta-ico) { color: #ffd27a; } }
@media (max-width: 520px) { .mta-at { grid-template-columns: 1fr; } }

/* side by side, each half in its look (diary.js sideMain) */
.hs-mini-list.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.hs-mini-list.tiles > div { flex-direction: column; align-items: center; gap: 1px; padding: 6px 8px; text-align: center; container-type: inline-size; }
/* (the user: "design it with colours": each tile in its own colour, a glow of it and its edge; the
   eaten amber, the goal violet, the activity teal, the water blue) */
.hs-mini-list:not(.receipt) > div:has(> dd:is(.f, .t, .a, .w, .s)) { background: linear-gradient(160deg, rgba(var(--tc), .24), rgba(var(--tc), .08)); box-shadow: inset 0 0 0 1px rgba(var(--tc), .38); }
.hs-mini-list > div:has(> dd.f) { --tc: 255, 197, 107; }
.hs-mini-list > div:has(> dd.t) { --tc: 196, 181, 253; }
.hs-mini-list > div:has(> dd.a) { --tc: 111, 240, 226; }
.hs-mini-list > div:has(> dd.w) { --tc: 155, 220, 255; }
.hs-mini-list > div:has(> dd.s) { --tc: 255, 211, 138; }
/* the number as large as its tile has room for, a little air to the frame: by its length (--n, diary.js sideMain) */
.hs-mini-list.tiles dd { font-size: min(16px, calc(100cqw / (var(--n, 4) * .6))); max-width: 100%; }
.hs-mini-list.tiles dd .dd-unit { display: block; font-size: 11px; line-height: 1.2; }
.hs-mini-list dd.t { color: #d8ccff; }
.hs-mini-list.receipt { gap: 0; }
.hs-mini-list.receipt > div { padding: 4px 4px; border-radius: 0; background: none; border-bottom: 1px dashed rgba(255, 255, 255, .22); }
.hs-mini-list.receipt > .total { border-bottom: 0; border-top: 1.5px solid rgba(255, 255, 255, .5); margin-top: 3px; padding-top: 6px; }
.hs-mini-list.receipt > .total dt { font-weight: 700; opacity: 1; }
.hs-mini-list.receipt > .total dd { font-size: 16px; }
.hs-mini-bar { width: 100%; display: grid; gap: 5px; }
.hs-mini-bar > div { display: flex; align-items: baseline; justify-content: space-between; font-size: 12px; }
.hs-mini-bar > div span { opacity: .85; }
.hs-mini-bar > div b { font-size: 15px; font-variant-numeric: tabular-nums; }
.hs-mini-bar > i, .hs-mini-bars i { display: block; height: 9px; border-radius: 5px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.hs-mini-bar s, .hs-mini-bars s { display: block; height: 100%; border-radius: inherit; background: #fff; transform-origin: right; animation: lt-grow .8s cubic-bezier(.22, 1, .36, 1) both; }
.hs-mini-bar.over s { background: var(--over-red); }
.hs-board { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 92px; padding: 10px 6px; border-radius: 18px; background: rgba(255, 255, 255, .08); color: inherit; text-decoration: none; line-height: 1.1; }
.hs-board b { font-size: 32px; font-variant-numeric: tabular-nums; }
.hs-board span { margin-top: 4px; font-size: 11.5px; opacity: .85; }
.hs-mini-bars { width: 100%; display: grid; gap: 7px; }
.hs-mini-bars > div { display: grid; gap: 3px; }
.hs-mini-bars span { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; font-size: 12px; }
.hs-mini-bars span b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.hs-mini-bars span small { font-size: 10.5px; font-weight: 500; opacity: .7; }
.hs-mini-bars i { height: 7px; }
.hs-mini-bars s { background: var(--rc); }

/* the colour scheme at the bottom of the logo's menu (nav.js) */
.am-theme { margin: 6px 14px 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.am-theme .menu-theme { margin: 0; }

/* the printable page's bar on a phone: the export buttons as wide as their words, so the way back
   keeps the same room from the frame as the other end */
@media (max-width: 480px) {
  .print-bar { gap: 8px; }
  .print-bar .xbar { display: grid; flex: 1 1 auto; min-width: 0; }
  .print-bar .back-btn { width: 44px; height: 64px; border-radius: 15px; }
}
/* a narrow phone: smaller words, still whole */
@media (max-width: 400px) {
  .print-bar .xb { min-height: 52px; font-size: 11.5px; }
  .print-bar .xb-ico { width: 24px; height: 24px; border-radius: 7px; }
  .print-bar .xb-ico svg { width: 14px; height: 14px; }
  .print-bar .back-btn { height: 60px; }
}

/* side by side: the panel's look button floats over the corner of the sport half, half in and half
   out, a little raised from the panel (a soft shadow and a thin ring), as a badge on a card */
#heroMain:has(.hero-side) > .hs-pick { top: -9px; left: -9px; }
#heroMain:has(.hero-side) > .hs-pick .hs-switch { width: 38px; height: 38px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .38); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .5), 0 0 0 3px rgba(0, 0, 0, .06); }

/* ---------- the order of the diary's panels (panel-order.js): rows dragged by a handle, or sent to the top or the bottom ---------- */
.ro-lead { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; }
.ro-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ro-item { position: relative; border-radius: 18px; }
.ro-block { padding: 5px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.ro-row { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 4px 4px 4px 6px; border-radius: 14px; }
.ro-grip { flex: none; display: grid; place-items: center; width: 36px; height: 44px; padding: 0; border: 0; border-radius: 11px; background: none; color: var(--muted); cursor: grab; touch-action: none; }
.ro-grip:hover { background: color-mix(in srgb, var(--rc) 12%, transparent); color: var(--rc); }
.ro-grip:focus-visible { outline: 2px solid var(--rc); outline-offset: 1px; }
.ro-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: var(--rc); background: color-mix(in srgb, var(--rc) 15%, transparent); }
.ro-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ro-text b { font-size: 15px; }
.ro-text small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro-text .ro-off { color: color-mix(in srgb, var(--warn) 80%, var(--muted)); }
.ro-item.off > .ro-row :is(.ro-ico, .ro-text b) { opacity: .55; }
.ro-jumps { flex: none; display: flex; gap: 4px; }
.ro-jump { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 11px; background: var(--surface); color: var(--muted); box-shadow: inset 0 0 0 1px var(--border); cursor: pointer; transition: color .2s, background .2s, transform .15s; }
.ro-jump:hover { color: var(--rc); background: color-mix(in srgb, var(--rc) 10%, var(--surface)); }
.ro-jump:active { transform: scale(.9); }
.ro-tiles { gap: 6px; margin: 2px 0 2px; padding-inline-start: 26px; }
.ro-tile > .ro-row { min-height: 48px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.ro-tile .ro-ico { width: 30px; height: 30px; border-radius: 10px; }
.ro-tile .ro-text b { font-size: 14px; }
/* lifted under the finger: above the rest, a deep soft shadow and a ring in its colour; the others slide aside */
.ro-lifted { z-index: 5; transition: none !important; }
.ro-lifted.ro-block { box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .5), 0 0 0 2px color-mix(in srgb, var(--rc) 60%, transparent); background: var(--surface); }
.ro-lifted.ro-tile > .ro-row { box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .5), 0 0 0 2px color-mix(in srgb, var(--rc) 60%, transparent); }
.ro-lifted .ro-grip { color: var(--rc); }
.ro-sorting > .ro-item:not(.ro-lifted) { transition: transform .24s cubic-bezier(.2, .8, .2, 1); }
html.ro-dragging, html.ro-dragging * { cursor: grabbing !important; }
.ro-actions { margin-top: 16px; }
@media (max-width: 380px) { .ro-jump { width: 32px; height: 32px; } .ro-row { gap: 6px; } .ro-tiles { padding-inline-start: 14px; } }
/* the way to it at the bottom of the diary */
.ro-open-wrap { display: flex; justify-content: center; margin: 22px 0 6px; }
.ro-open { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--surface); color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--border); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: color .2s, transform .15s; }
.ro-open:hover { color: var(--accent); }
.ro-open:active { transform: scale(.96); }

/* ---------- where each reminder comes: the phone (or the browser) and the bell, or the bell only (settings.js pushRows) ---------- */
.push-where { padding: 6px 0 2px; }
.push-where > .note { margin: 0 4px 8px; font-size: 12.5px; }
.push-row { gap: 10px; flex-wrap: wrap; }
.push-row .pw-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--pc); background: color-mix(in srgb, var(--pc) 14%, transparent); }
.push-row .set-label { min-width: 90px; }
.push-row.is-off .pw-ico, .push-row.is-off .set-label { opacity: .6; }
.pw-seg { display: inline-grid; grid-template-columns: repeat(3, auto); gap: 3px; padding: 3px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.pw-seg button { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 10px; border: 0; border-radius: 9px; background: none; color: var(--muted);
  font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.pw-seg button[aria-checked="true"] { background: var(--surface); color: var(--pc); box-shadow: 0 2px 8px -4px rgba(16, 24, 40, .35), inset 0 0 0 1px color-mix(in srgb, var(--pc) 35%, transparent); }
.pw-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 400px) { .pw-seg { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); } .pw-seg button { justify-content: center; } }

/* the details' health score: on its row when it fits; else it drops under its name, at the far side,
   never past the panel's edge */
.fact:has(> dd > .hsc-line) { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 8px; }
.fact:has(> dd > .hsc-line) .fact-ico { flex: none; }
.fact:has(> dd > .hsc-line) dd { margin-inline-start: auto; max-width: 100%; }
/* on a phone the score goes under its title, at the right (where a line starts), not to the far side */
@media (max-width: 600px) { .fact:has(> dd > .hsc-line) dd { flex-basis: 100%; margin-inline-start: 0; text-align: start; } }
.fact dd .hsc-line { max-width: 100%; }

/* a diary row pulled to the left: the favourites' star under it on the right, the other side from the delete */
.tl-fav {
  position: absolute; inset: 1px 0 0 0; display: flex; align-items: center; justify-content: flex-start; gap: 6px; padding: 0 18px;
  border: 0; border-radius: 14px; background: linear-gradient(270deg, #ffc93c, #f0a500); color: #4a2f00; font: inherit; font-weight: 700; cursor: pointer; visibility: hidden;
}
.tl-fav span { font-size: 14px; }
.tl-fav svg { fill: currentColor; transition: transform .25s cubic-bezier(.34, 1.6, .64, 1); }
.tl-swipe.to-fav .tl-fav, .tl-swipe.open-fav .tl-fav, .tl-swipe.faved .tl-fav { visibility: visible; }
.tl-swipe.to-fav .tl-del, .tl-swipe.open-fav .tl-del, .tl-swipe.faved .tl-del { visibility: hidden; }
.tl-swipe.armed-fav .tl-fav svg { transform: scale(1.3) rotate(-12deg); }
.tl-swipe.faved .tl-fav svg { animation: tl-star .7s cubic-bezier(.34, 1.6, .64, 1); }
@keyframes tl-star { 40% { transform: scale(1.5) rotate(18deg); } }

/* the logo's button, lit while its menu is open, keeps a little room from the clock beside it */
.top-row .logo-btn { margin-inline-end: 0; }
.top-row .top-clock { margin-inline: 6px; }

/* ---------- the weight page: the day of the weighing, and the smart tracker (diary.js weightTracker) ---------- */
.kg-day { display: inline-flex; align-items: center; gap: 8px; margin: -4px auto 12px; font-size: 13.5px; color: var(--muted); }
.kg-day input { padding: 6px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; }
.weight-page .stats .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* a wide screen (an iPad, a computer): the weighing's column no wider than it needs, in the middle (the save
   button, the smart scale and the numbers with it, as the stepper over them), and the numbers in one row */
@media (min-width: 761px) {
  .weight-page > :is(.btn.block, .link-btn, .stats, .note, .sw-card, .wt-start-fix) { width: min(100%, 600px); margin-inline: auto; }
  .weight-page .stats { grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); }
  .weight-page .stats .stat:last-child:nth-child(odd) { grid-column: auto; }
  /* the numbers under the weighing (the user: "on an iPad and a computer, a little different, there is empty
     room"): across the whole card, each tile its sign, its number big and what it means under it */
  .weight-page > .stats.ws-stats { width: 100%; gap: 12px; margin-top: 22px; }
  .ws-stats .stat { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 14px; row-gap: 2px; align-items: center; justify-items: start; padding: 14px 16px; border-radius: 18px; text-align: start;
    background: linear-gradient(160deg, color-mix(in srgb, var(--wsc) 12%, var(--row-alt)), var(--row-alt)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wsc) 18%, transparent); }
  .ws-stats .ws-ico { display: grid; place-items: center; grid-row: 1 / span 3; width: 46px; height: 46px; border-radius: 14px; color: var(--wsc); background: color-mix(in srgb, var(--wsc) 16%, transparent); }
  .ws-stats .s-val { font-size: 22px; line-height: 1.2; white-space: nowrap; }
  .ws-stats .ws-sub { display: block; }
}
/* the summary's tiles: each its colour, its meaning under the number (a phone: no sign, the line only) */
.ws-stats .stat { --wsc: #8b5cf6; }
.ws-stats .ws-start { --wsc: #0ea5e9; } .ws-stats .ws-goal { --wsc: #22c55e; } .ws-stats .ws-bmi { --wsc: #f59e0b; } .ws-stats .ws-fat { --wsc: #ec4899; }
.ws-ico { display: none; }
.ws-sub { font-size: 12.5px; color: var(--muted); }
.ws-sub.good { color: #1f9d63; } .ws-sub.warn { color: #d97706; } .ws-sub.bad { color: #e5484d; }
.wt-smart { display: grid; gap: 12px; }
.wt-smart h3 { margin: 0; }
.wt-now { display: flex; flex-direction: column; gap: 2px; }
.wt-now b { font-size: 34px; font-variant-numeric: tabular-nums; }
.wt-now span { color: var(--muted); }
.wt-now small { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.wt-chg { font-weight: 700; white-space: nowrap; }
.wt-chg.good { color: #1f9d63; } .wt-chg.bad { color: #e07a12; } .wt-chg.flat { color: var(--muted); }
.wt-verdict { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.5; background: var(--surface-2); border-inline-start: 4px solid var(--muted); }
.wt-verdict.good { border-color: #1f9d63; background: color-mix(in srgb, #1f9d63 9%, var(--surface-2)); }
.wt-verdict.bad { border-color: #e07a12; background: color-mix(in srgb, #e07a12 9%, var(--surface-2)); }
.wt-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wt-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.wt-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--row-alt); }
.wt-tile span { font-size: 12.5px; color: var(--muted); }
.wt-tile b { font-size: 17px; font-variant-numeric: tabular-nums; }
.wt-tile small { font-size: 11.5px; color: var(--muted); }
.wt-tile.good b { color: #1f9d63; } .wt-tile.bad b { color: #e07a12; }
.wt-hist-title { margin: 4px 0 0; font-size: 15px; }
.wt-hist { list-style: none; margin: 0; padding: 0; display: grid; }
.wt-hist li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.wt-hist li:last-child { border-bottom: 0; }
.wt-day { display: flex; flex-direction: column; font-size: 14px; min-width: 0; }
.wt-day small { font-size: 11.5px; color: var(--muted); }
.wt-hist b { font-variant-numeric: tabular-nums; }
.wt-hist .wt-chg { font-size: 13px; min-width: 74px; text-align: end; }
@media (min-width: 700px) { .wt-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wt-tile:last-child:nth-child(odd) { grid-column: auto; } .wt-tiles:has(> :nth-child(3n + 1):last-child) > :last-child { grid-column: 1 / -1; } .wt-tiles:has(> :nth-child(3n + 2):last-child) > :last-child { grid-column: span 2; } }

/* ---------- flat drawings in place of the framed icons (flat-art.js; the look picked, "שטוח דו־גוני") ---------- */
.flat-art { display: block; overflow: visible; flex: none; }
.flat-art .l { fill: color-mix(in srgb, var(--fa) 58%, #fff); }
.flat-art .d { fill: var(--fa); }
.flat-art .x { fill: color-mix(in srgb, var(--fa) 62%, #0b1220); }
.flat-art .c { fill: color-mix(in srgb, var(--fa) 42%, #fff); }
.flat-art .sh { clip-path: inset(0 0 0 50%); }
.flat-art :is(.xs, .ws, .ds) { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.flat-art .xs { stroke: color-mix(in srgb, var(--fa) 62%, #0b1220); }
.flat-art .ws { stroke: #fff; }
.flat-art .ds { stroke: var(--fa); }
/* the frames go: no colour behind, no shadow, no rounded box; the drawing fills the place */
.badge-icon.flat, .flat-box { background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; overflow: visible; }
.flat-box { display: grid; place-items: center; width: auto !important; height: auto !important; }
/* a sheet's grid of ways ends even: in two columns an odd last one takes the whole row, in three a
   lone last one takes it, and two last ones share it */
@media (max-width: 640px) { .quick-grid.sheet > .quick:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 641px) {
  .quick-grid.sheet > .quick:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  .quick-grid.sheet > .quick:last-child:nth-child(3n + 2) { grid-column: span 2; }
}
/* the add sheet on an iPad and a computer: wide, the meals, the ways and the AI tools each in one row
   (seven and five across), whole without a scroll; a narrower one's words on two lines */
@media (min-width: 700px) {
  dialog#dialog.quick-dlg { width: min(820px, calc(100vw - 48px)); }
  .quick-dlg .dlg-body { padding-bottom: 22px; }
  .quick-dlg .meal-row { gap: 12px; }
  .quick-dlg .quick-grid.sheet { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
  .quick-dlg .quick-grid.sheet.ai-quick-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .quick-dlg .quick-grid.sheet > .quick, .quick-dlg .quick-grid.sheet > .quick:last-child:is(:nth-child(odd), :nth-child(even)) { grid-column: auto; }
  .quick-dlg .quick { gap: 9px; padding: 16px 6px 14px; }
  .quick-dlg .quick span:not(.badge-icon) { white-space: normal; font-size: 14.5px; line-height: 1.25; text-wrap: balance; }
}

/* ---------- a weighing from the + sheet (weigh-in.js) ---------- */
.wi { display: grid; gap: 12px; text-align: center; }
.wi-art { display: grid; place-items: center; }
.wi-last { margin: 0; font-size: 14px; color: var(--muted); }
.wi-last b { color: var(--text); }
.wi-diff { min-height: 1.4em; margin: -2px 0 0; font-size: 14.5px; font-weight: 700; }
.wi-diff.good { color: #1f9d63; } .wi-diff.bad { color: #e07a12; } .wi-diff.flat { color: var(--muted); }
.wi-when { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; text-align: start; }
.wi-when .field input { width: 100%; }
.wi-note { margin: 0; font-size: 12.5px; }
.wi-more { justify-self: center; font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; padding: 6px 10px; }
button.wi-more { border: 0; background: none; font-family: inherit; cursor: pointer; }
/* the body's composition on the weight page (body-comp.js): its latest numbers, the quality of the
   change, the body by its parts, what it changes in the targets, the measurements; and its window */
.bc-panel { display: flex; flex-direction: column; gap: 14px; }
.bc-head { display: flex; align-items: center; gap: 12px; }
.bc-head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bc-head h3 { margin: 0; }
.bc-ico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: color-mix(in srgb, #8b5cf6 14%, transparent); }
.bc-intro { margin: 0; font-size: 14.5px; line-height: 1.6; }
.bc-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bc-tiles > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px; border-radius: 14px; background: var(--row-alt); }
.bc-tiles span { font-size: 13px; color: var(--muted); }
.bc-tiles b { font-size: 23px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bc-tiles small { font-size: 12px; color: var(--muted); }
.bc-tiles small.bc-d { font-weight: 700; }
.bc-d.up { color: var(--good); } .bc-d.down { color: #e07a12; }
.bc-quality { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.55;
  background: var(--row-alt); border-inline-start: 4px solid var(--muted); }
.bc-quality b { font-size: 15px; }
.bc-quality.good { border-color: #22a06b; background: color-mix(in srgb, #22a06b 9%, transparent); }
.bc-quality.mid { border-color: #f59e0b; background: color-mix(in srgb, #f59e0b 10%, transparent); }
.bc-quality.bad { border-color: #e5484d; background: color-mix(in srgb, #e5484d 9%, transparent); }
/* the body by its parts, oldest on the left (dates read left to right) */
.bc-chart { direction: ltr; display: flex; align-items: flex-end; gap: 8px; height: 190px; padding: 4px 2px 0; }
.bc-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.bc-col > b { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.bc-col > small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bc-stack { width: min(46px, 100%); display: flex; flex-direction: column; border-radius: 9px; overflow: hidden; min-height: 40px; }
.bc-stack i { display: grid; place-items: center; min-height: 18px; }
.bc-stack em { font-style: normal; font-size: 10.5px; font-weight: 800; color: #fff; }
i.bc-lean { background: #8b5cf6; } i.bc-fat { background: #f59e0b; }
.bc-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 0; font-size: 12.5px; color: var(--muted); }
.bc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bc-legend i { width: 11px; height: 11px; border-radius: 3px; }
.bc-targets { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, #8b5cf6 8%, transparent); }
.bc-targets h4 { margin: 0; font-size: 15px; }
.bc-targets p { margin: 0; font-size: 14px; line-height: 1.6; }
.bc-switch { min-height: 0; padding: 8px 12px; font-size: 15px; box-shadow: none; }
/* a new measurement and a photo of the printout: side by side, each half the row and the same height; one
   alone the whole row; the health line under both */
.bc-add { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
.bc-add > .btn { width: 100%; min-height: 48px; padding-inline: 10px; justify-content: center; text-align: center; white-space: normal; }
.bc-add:not(:has(.bc-ai-btn)) > .btn, .bc-add > .bc-health { grid-column: 1 / -1; }
html[data-text-large] .bc-add { grid-template-columns: minmax(0, 1fr); }
.bc-ai-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #7c5cff; }
.bc-health:empty { display: none; }
.bc-all summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.bc-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 8px; padding: 0; list-style: none; }
.bc-list li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--row-alt); font-size: 13.5px; }
.bc-list li > span:first-child { display: flex; flex-direction: column; min-width: 92px; }
.bc-list small { font-size: 12px; color: var(--muted); }
.bc-vals { flex: 1; min-width: 0; }
.bc-del { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; color: var(--muted); background: var(--surface); cursor: pointer; font: inherit; }
.bc-form { display: flex; flex-direction: column; gap: 12px; }
.bc-lead { margin: 0; }
.bc-ai-state { margin: -4px 0 0; font-size: 13.5px; }
.bc-ai-state:empty { display: none; }
.bc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* the measurement's values: each a tile, its name, its short name on the printouts, the number large with
   its unit inside the field */
.bc-field { gap: 4px; padding: 12px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); min-width: 0; transition: border-color .2s; }
.bc-field:focus-within { border-color: var(--accent); }
.bc-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-weight: 700; font-size: 14.5px; line-height: 1.25; }
.bc-abbr em { font-style: normal; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); }
.bc-abbr { display: flex; align-items: center; gap: 6px; min-height: 22px; font-size: 11.5px; color: var(--muted); letter-spacing: .3px; }
.bc-in { position: relative; display: block; margin-top: auto; padding-top: 4px; }
.bc-in input { width: 100%; box-sizing: border-box; height: 50px; padding-inline: 40px 12px; text-align: center; font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; border-radius: 12px; }
.bc-in input::placeholder { font-weight: 500; opacity: .45; }
.bc-in i { position: absolute; top: 50%; left: 12px; translate: 0 -50%; font-style: normal; font-size: 13px; font-weight: 600; color: var(--muted); pointer-events: none; }
.bc-field small { font-size: 12px; font-weight: 400; }
.bc-form input.ai-filled { border-color: color-mix(in srgb, #7c5cff 55%, var(--border)); background: color-mix(in srgb, #7c5cff 7%, var(--surface)); }
.bc-form .note { margin: 0; }
@media (max-width: 640px) { .bc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* inside the window: the stepper fits its width, the lines wrap */
.wi > * { min-width: 0; }
.wi .big-stepper { gap: 14px; margin: 6px 0 0; }
.wi .round-btn.big { width: 58px; height: 58px; font-size: 30px; flex: none; }
.wi .big-value { min-width: 0; flex: 0 1 180px; padding: 12px 10px; }
.wi .big-value input { width: 100%; }

/* the scanner's frame nearly square: a barcode is read in any direction (scan.js) */
.scan-frame { inset: 14% 22%; }

/* ---------- the admin screen's users (admin.js manager): counts, tools, filters, many at once ---------- */
.adm-um { display: grid; gap: 12px; margin-bottom: 18px; }
.adm-um-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 640px) { .adm-um-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.adm-um-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border: 0; border-radius: 16px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border); color: var(--text); font: inherit; text-align: start; cursor: pointer; transition: box-shadow .2s, transform .15s; }
.adm-um-kpi b { font-size: 24px; font-variant-numeric: tabular-nums; }
.adm-um-kpi span { font-size: 12.5px; color: var(--muted); }
.adm-um-kpi.on { box-shadow: inset 0 0 0 2px var(--accent); }
.adm-um-kpi.warn b { color: #d97706; }
.adm-um-kpi:active { transform: scale(.97); }
.adm-um-ai { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.adm-um-ai > div { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; }
.adm-um-ai-set { display: flex; align-items: center; gap: 8px; }
.adm-um-ai-set input { width: 84px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; text-align: center; }
.adm-um-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.adm-um-tools input[type="search"] { flex: 1 1 220px; min-width: 0; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; }
.adm-um-tools select { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; }
.adm-um-filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.adm-um-filters button { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 0; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer; }
.adm-um-filters button small { font-size: 11.5px; color: var(--muted); }
.adm-um-filters button[aria-checked="true"] { background: var(--accent); color: var(--accent-text); box-shadow: none; }
.adm-um-filters button[aria-checked="true"] small { color: inherit; opacity: .8; }
.adm-um-bulk { position: sticky; top: calc(var(--top-h, 0px) + 8px); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface)); box-shadow: 0 8px 24px -14px rgba(0, 0, 0, .4), inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.adm-um-bulk b { margin-inline-end: 6px; font-size: 14px; }
.adm-um-bulk button { padding: 7px 11px; border: 0; border-radius: 10px; background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); font: inherit; font-size: 13px; cursor: pointer; }
.adm-um-bulk button.danger { color: var(--warn); }
.adm-um-bulk button.ghost { background: none; box-shadow: none; color: var(--muted); }
.adm-pick-all { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13.5px; color: var(--muted); }
/* the users list: how many shown, the count, the pages, the order both ways (admin.js listHtml) */
.adm-users { scroll-margin-top: calc(var(--top-h, 0px) + 12px); }
.adm-um-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.adm-um-count { font-size: 13.5px; color: var(--muted); }
.adm-um-count b { color: var(--text); }
.adm-um-size { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-2); }
.adm-um-size > span { padding-inline: 8px 4px; font-size: 12.5px; color: var(--muted); }
.adm-um-size button { min-width: 44px; min-height: 34px; padding: 4px 10px; border: 0; border-radius: 999px; background: none; color: var(--text); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer; }
.adm-um-size button[aria-checked="true"] { background: var(--accent); color: var(--accent-text); font-weight: 700; }
.adm-um-picks { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 6px; }
.adm-um-picks .adm-pick-all { margin: 0; }
.adm-pick-every { font-size: 13px; }
.adm-um-pager { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--border); }
.adm-um-pager button { min-width: 40px; height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; cursor: pointer; }
.adm-um-pager button[aria-current="page"] { background: var(--accent); color: var(--accent-text); font-weight: 700; }
.adm-um-pager button:disabled { opacity: .4; cursor: default; }
/* the admin: a button whose request is on its way spins in place of its words; the buttons beside it
   are locked meanwhile (admin.js post); a window locked with no button to spin has a line running along its top */
.is-busy { position: relative; color: transparent !important; cursor: progress !important; opacity: 1 !important; }
.is-busy > * { visibility: hidden; }
.is-busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); animation: busy-spin .7s linear infinite; }
.btn.primary.is-busy::after, .is-busy.danger-solid::after { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; }
[data-busy-lock]:not(.is-busy) { opacity: .55; cursor: progress; }
dialog.is-busy-dlg { cursor: progress; }
dialog.is-busy-dlg::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 3px; z-index: 5; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent), transparent) 0 0 / 40% 100% no-repeat; animation: busy-line 1.1s ease-in-out infinite; }
@keyframes busy-spin { to { transform: rotate(360deg); } }
@keyframes busy-line { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { .is-busy::after { animation-duration: 1.6s; } dialog.is-busy-dlg::before { animation-duration: 2.4s; } }
.adm-um-gap { color: var(--muted); padding-inline: 2px; }
.adm-um-dir { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.adm-um-label { flex: none; align-self: center; font-size: 12.5px; color: var(--muted); padding-inline-end: 2px; }
/* (a wide screen has every filter in one row: the chips share the width, a little tighter) */
@media (min-width: 900px) {
  .adm-um-filters { gap: 5px; overflow: visible; }
  .adm-um-filters button { gap: 5px; padding: 7px 9px; font-size: 13px; white-space: nowrap; }
  .adm-um-filters:not(.adm-um-ways) button { flex: 1 1 auto; justify-content: center; }
  .adm-um-filters button small { font-size: 11px; }
}
/* the name and the email in a user's row, each with a small copy button beside it */
.adm-copy-line { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.adm-copy { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; margin-block: -4px; padding: 0; border: 0; border-radius: 8px;
  background: none; color: var(--muted); cursor: pointer; }
.adm-copy:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.adm-copy.done { color: var(--accent); }
.adm-copy svg { width: 15px; height: 15px; }
.adm-copy-line bdi { min-width: 0; overflow-wrap: anywhere; }
.adm-user { position: relative; }
.adm-user .adm-pick { flex: none; display: grid; place-items: center; width: 28px; }
.adm-user .adm-pick input, .adm-pick-all input { width: 18px; height: 18px; accent-color: var(--accent); }
.adm-user.picked { background: color-mix(in srgb, var(--accent) 7%, transparent); border-radius: 14px; }
.adm-user.st-pending { box-shadow: inset 3px 0 0 #f59e0b; }
.adm-ai { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.adm-ai.on { color: #6d28d9; background: color-mix(in srgb, #7c5cff 14%, transparent); }
.adm-ai.off { color: var(--muted); background: var(--surface-2); text-decoration: line-through; }
.pill-wait, .pill-pause { display: inline-flex; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; vertical-align: 1px; }
.pill-wait { color: #92400e; background: #fef3c7; }
.pill-pause { color: #1e40af; background: #dbeafe; }
.adm-login { margin-top: 8px; }
.adm-login > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.adm-login > summary::-webkit-details-marker { display: none; }
.adm-login > summary::after { content: "▾"; margin-inline-start: auto; color: var(--muted); transition: transform .2s; }
.adm-login[open] > summary { margin-bottom: 12px; }
.adm-login[open] > summary::after { transform: rotate(180deg); }
.adm-login-t { display: flex; flex-direction: column; gap: 2px; }
/* one user's window: the AI */
.adm-ud-ai { display: grid; gap: 10px; margin: 6px 0 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); }
.adm-ud-ai legend { padding: 0 6px; font-weight: 700; }
.adm-ud-aiuse { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; font-size: 12.5px; color: var(--muted); }
.adm-ud-aiuse b { display: block; font-size: 16px; color: var(--text); font-variant-numeric: tabular-nums; }
.adm-aidays { display: flex; align-items: flex-end; gap: 3px; height: 40px; }
.adm-aidays i { flex: 1; min-height: 3px; border-radius: 3px 3px 1px 1px; background: #7c5cff; }
.adm-aidays i.none { background: var(--track); }
/* the panels' order window: no scroll bar showing behind the rows, and nothing else moves under a drag */
dialog.ro-dlg .dlg-body { scrollbar-width: none; overscroll-behavior: contain; }
dialog.ro-dlg .dlg-body::-webkit-scrollbar { display: none; }
html.ro-dragging dialog.ro-dlg .dlg-body { touch-action: none; }
.ro-grip { width: 44px; height: 48px; -webkit-touch-callout: none; }
.ro-row { -webkit-touch-callout: none; }
/* the rows never wider than the window (a long line under a name used to push them past its left edge) */
.ro-list { grid-template-columns: minmax(0, 1fr); }
.ro-item, .ro-row { min-width: 0; }
.ro-jumps { margin-inline-start: auto; }
/* a hold on a row: it eases in before it lifts, so the finger knows it is about to move */
.ro-item > .ro-row { transition: transform .28s cubic-bezier(.22, 1, .36, 1), background .28s; }
.ro-item.ro-pressing > .ro-row { transform: scale(.975); background: color-mix(in srgb, var(--rc) 10%, transparent); }
.ro-grip { align-self: stretch; height: auto; min-height: 48px; }
.ro-text small { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
/* the window's two buttons as one pair: the same height and width, side by side */
.ro-actions { flex-wrap: nowrap; align-items: stretch; }
.ro-actions .btn { flex: 1 1 auto; min-height: 50px; padding-block: 0; white-space: nowrap; justify-content: center; box-sizing: border-box; }

/* nothing moves sideways: a window's content fits its width and scrolls only up and down, and the
   page never pans left or right under a finger (a date or an hour field used to push past the edge) */
html, body { overflow-x: clip; }
dialog#dialog { max-width: 100vw; overflow-x: hidden; }
dialog#dialog .dlg-body { overflow-x: hidden; overscroll-behavior-x: none; touch-action: pan-y pinch-zoom; }
input[type="date"], input[type="time"], input[type="datetime-local"] { min-width: 0; max-width: 100%; box-sizing: border-box; }
.wi-when input { -webkit-appearance: none; appearance: none; text-align: center; min-height: 48px; }

/* the weighing's day and hour: two even cards in Hebrew, the phone's own picker over each, unseen */
.wi-when { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wi-pick { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 60px; padding: 10px 12px; border-radius: 16px;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); text-align: start; cursor: pointer; transition: box-shadow .2s, transform .15s; }
.wi-pick:active { transform: scale(.98); }
.wi-pick:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
.wi-pick-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #8b5cf6; background: color-mix(in srgb, #8b5cf6 14%, transparent); }
.wi-pick-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.wi-pick-t small { font-size: 12px; color: var(--muted); }
.wi-pick-t b { font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wi-pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; cursor: pointer; -webkit-appearance: none; appearance: none; }
.wi-when { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
/* when a food was eaten (entry.js): its hour card, and its meal's usual hour offered beside it in a tap */
.et-row { display: flex; align-items: center; gap: 10px; }
.et-row .wi-pick { flex: 1; min-height: 54px; padding-block: 8px; }
.et-suggest { flex: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 800; direction: rtl; /* (the ? ends the sentence, at the left, as Hebrew reads) */
  font-variant-numeric: tabular-nums; color: color-mix(in srgb, #f59e0b 85%, var(--text)); background: color-mix(in srgb, #f59e0b 15%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #f59e0b 40%, transparent); cursor: pointer; }
.et-suggest[hidden] { display: none; }
/* a dish's window: the hour under its meal's buttons, with the room the food's window gives it */
.confirm-meal + .entry-time { margin-top: 14px; }
.et-suggest:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.eat-time { display: grid; gap: 16px; }
/* (the hour under a food in the diary is a button of its own: it changes the hour) */
[data-eat-time] { cursor: pointer; }
.wi-pick-t b { white-space: normal; overflow: visible; text-overflow: clip; }
/* the panel's menu on a shorter phone: a little more compact, so it fits whole */
@media (max-height: 900px) {
  .hs-menu button { padding: 6px 10px; }
  .hs-menu .hs-group { padding: 8px 10px 2px; }
  .hs-menu .hs-group:first-child { padding-top: 4px; }
  .hs-menu small { font-size: 11.5px; }
  .hs-menu .hs-layout button { padding: 8px 4px; }
}

/* a number counting to its new value (count-up.js): a soft glow while it runs, down or up */
[data-count-key] { font-variant-numeric: tabular-nums; transition: text-shadow .4s, color .4s; }
.count-down { text-shadow: 0 0 18px rgba(255, 255, 255, .45); }
.count-up { text-shadow: 0 0 18px rgba(255, 200, 120, .55); }

/* how dates are written (settings): four choices, each with today written that way */
.df-row { flex-direction: column; align-items: stretch; }
.df-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.df-list button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 12px; border: 0; border-radius: 14px; background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border); color: var(--text); font: inherit; text-align: start; cursor: pointer; transition: box-shadow .2s, background .2s; }
.df-list button b { font-size: 14px; }
.df-list button small { font-size: 12.5px; color: var(--muted); }
.df-list button[aria-checked="true"] { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); box-shadow: inset 0 0 0 2px var(--accent); }
/* the weight page's date card */
.kg-day { display: flex; justify-content: center; margin: -4px auto 14px; }
.kg-day .pick-card { width: min(100%, 360px); } /* (as wide as the note under it, .kg-unsaved) */

/* a flat drawing fills its badge exactly, whatever size the badge is given (a smaller badge left
   the drawing at its own size, off the badge's centre: the tips' ring around another point) */
.badge-icon.flat > .flat-art { width: 100%; height: 100%; }
/* the round + and − stay round: they keep their size, the value between them gives way */
.round-btn { flex: none; aspect-ratio: 1; }
.big-stepper { gap: clamp(10px, 4vw, 22px); }
.big-stepper .big-value { flex: 0 1 200px; min-width: 0; }
.big-stepper .big-value input { width: 100%; }

/* ---------- the weight chart (diary.js weightChart): values on the gridlines, dates under it, a tap per weighing ---------- */
.wgraph { --wg-goal: #8b5cf6; display: grid; gap: 6px; }
.wg-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.wg-sum { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wg-sum .wt-chg { font-size: 17px; }
.wg-sum small { font-size: 12.5px; color: var(--muted); }
.wg-goal { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--wg-goal);
  background: color-mix(in srgb, var(--wg-goal) 12%, transparent); }
.wg-goal i { width: 16px; border-top: 2px dashed currentColor; }
.wg-goal i.off { display: none; }
.wg-plot { position: relative; height: 210px; }
.wg-unit { position: absolute; top: 0; right: 0; width: 40px; text-align: center; font-size: 11px; color: var(--muted); }
.wg-in { position: absolute; top: 34px; bottom: 10px; left: 24px; right: 48px; }
.wg-grid span { position: absolute; left: -24px; right: 0; height: 0; border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent); }
.wg-grid em { position: absolute; top: 0; right: -46px; width: 40px; transform: translateY(-50%); text-align: center; font-style: normal; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wg-goal-line { position: absolute; left: -24px; right: 0; height: 0; border-top: 2px dashed var(--wg-goal); }
.wg-goal-line b { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); padding: 1px 7px; border-radius: 8px; font-size: 11px; color: var(--wg-goal); background: var(--surface); white-space: nowrap; }
.wg-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wg-line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.wg-dot { position: absolute; z-index: 2; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wg-dot::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2.5px var(--accent); transition: transform .2s, background .2s, box-shadow .2s; }
.wg-dot.on::before { background: var(--accent); transform: scale(1.3); box-shadow: inset 0 0 0 2.5px var(--accent), 0 0 0 5px color-mix(in srgb, var(--accent) 24%, transparent); }
.wg-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wgraph.dense .wg-dot::before { inset: 11.5px; }
.wg-val { position: absolute; z-index: 3; transform: translate(-50%, calc(-100% - 10px)); padding: 2px 7px; border-radius: 8px; font-size: 12px; font-weight: 700; line-height: 1.4;
  color: var(--text); background: var(--surface-2); box-shadow: 0 1px 4px rgba(0, 0, 0, .18), inset 0 0 0 1px var(--border); pointer-events: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wg-val.now { color: var(--accent-text); background: var(--accent); box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent); }
.wg-val.l { transform: translate(-24%, calc(-100% - 10px)); }
.wg-val.r { transform: translate(-76%, calc(-100% - 10px)); }
/* time runs left to right: the first date on the left, the latest on the right */
.wg-x { display: flex; flex-direction: row-reverse; justify-content: space-between; padding: 0 34px 0 8px; font-size: 12px; color: var(--muted); }
.wg-read { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 10px; margin: 6px 0 0; padding: 9px 12px; border-radius: 12px; background: var(--row-alt); font-size: 13.5px; text-align: center; }
.wg-read b { font-size: 15px; font-variant-numeric: tabular-nums; }
.wg-hint { margin: 0; font-size: 11.5px; color: var(--muted); text-align: center; }
/* the weighings' list: a weighing can be taken off */
.wt-hist li { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; }
.wt-del { width: 32px; height: 32px; color: var(--muted); }
.wt-del:hover { color: #df4339; }
/* the weight page's date card, in the page's own colour */
.kg-day .pick-card { color: var(--text); font-size: 14px; }
/* the weight chart under a finger: the nearest weighing picked, a line down from it */
.wg-in { touch-action: pan-y; cursor: pointer; }
.wg-dot { pointer-events: none; }
.wg-guide { position: absolute; top: -8px; bottom: 0; width: 0; border-left: 1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent); pointer-events: none; transition: left .15s ease-out; }
/* the picked weighing (diary.js WG_ARROW, approved): the point filled over the labels, and an arrow under
   it pointing up at it along the dashed line, never on the numbers above the line; over it, pointing
   down, when the point is near the chart's foot (the dates under it) */
.wg-dot.on { z-index: 4; }
.wg-dot.on::before { transform: none; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.wg-arrow { position: absolute; z-index: 4; width: 30px; height: 22px; margin: 12px 0 0 -15px; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .4));
  transition: left .15s ease-out, top .15s ease-out; }
.wg-arrow svg { display: block; width: 100%; height: 100%; fill: var(--accent); stroke: #fff; stroke-opacity: .85; stroke-width: 1.6; stroke-linejoin: round; }
.wg-arrow.over { margin-top: -34px; }
.wg-arrow.over svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .wg-arrow { transition: none; } }

/* ---------- the castle game's level in the settings (settings.js gameLevels): four cards, two by two ---------- */
.gl-rec { display: block; }
.gl-rec b { color: var(--text); font-weight: 700; }
.gl-levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 8px; margin-top: 6px; }
.gl-levels button { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 64px; padding: 10px 12px; border: 0; border-radius: 16px;
  font: inherit; text-align: start; color: inherit; cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s;
  background: var(--surface); box-shadow: var(--shadow), inset 0 0 0 1.5px color-mix(in srgb, var(--lc) 22%, transparent); }
.gl-levels button:active { transform: scale(.97); }
.gl-levels button[aria-checked="true"] { background: linear-gradient(160deg, color-mix(in srgb, var(--lc) 24%, var(--surface)), color-mix(in srgb, var(--lc) 8%, var(--surface)));
  box-shadow: inset 0 0 0 2.5px var(--lc), 0 10px 20px -12px var(--lc); }
.gl-levels button:focus-visible { outline: 2px solid var(--lc); outline-offset: 2px; }
.gl-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 21px;
  background: color-mix(in srgb, var(--lc) 16%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lc) 26%, transparent); }
.gl-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.gl-txt b { font-size: 15.5px; font-weight: 800; }
.gl-txt small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the recommended one: a badge on its top edge (over it, so nothing moves when it comes) */
.gl-mark { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 1px 9px; border-radius: 999px; font-style: normal; font-size: 10.5px; font-weight: 800;
  line-height: 1.5; white-space: nowrap; color: #fff; background: linear-gradient(135deg, #f5a524, #f08a24); box-shadow: 0 3px 8px rgba(240, 138, 36, .35); }
/* (a wide row, one to a line on an iPad or a computer: the badge inside it, at its end, beside the words
   it belongs to, not floating mid-edge over an empty stretch) */
.gl-levels button { container-type: inline-size; }
@container (min-width: 380px) {
  .gl-mark { top: 50%; left: auto; inset-inline-end: 14px; transform: translateY(-50%); padding: 3px 12px; font-size: 12px; }
}

/* ---------- the nutrients panel: each bar opens the guide (nutrient-guide.js) ---------- */
button.nbar { display: block; width: 100%; margin: 0; padding: 4px 6px 6px; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background .2s, transform .15s; }
button.nbar:hover { background: var(--row-alt); }
button.nbar:active { transform: scale(.98); }
.nutrient-bars:has(> button.nbar) { gap: 6px 12px; margin: 0 -6px; }
.nbar-top, .nbar-track { display: flex; }
.nbar-track > span { display: block; height: 100%; border-radius: 999px; background: var(--good); }
.nbar.low .nbar-track > span { background: #8fd3b8; }
.nbar.warn .nbar-track > span { background: #f0a020; }
.nbar.bad .nbar-track > span { background: #df4339; }
.dash-card header .ng-open { border: 0; background: none; padding: 4px 0; font: inherit; font-size: 13px; cursor: pointer; }
.ng-hint { margin: 10px 0 0; font-size: 12px; color: var(--muted); text-align: center; }

/* ---------- the guide to the nutrients: a table of tiles, the chosen one explained, the user's numbers beside ---------- */
.ng { display: grid; gap: 14px; }
.ng-intro { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.ng-table { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ng-tile { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 0; min-height: 76px; padding: 9px 10px 14px; border: 0; border-radius: 14px;
  background: color-mix(in srgb, var(--nc) 11%, var(--surface-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nc) 28%, transparent);
  color: var(--text); font: inherit; text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .25s, box-shadow .25s, transform .15s; }
.ng-tile:active { transform: scale(.97); }
.ng-tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; }
.ng-tile-top b { font-size: 21px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--nc); transition: color .25s; }
.ng-tile-top small { font-size: 11px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.ng-tile-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ng-tile-bar { position: absolute; inset-inline: 10px; bottom: 7px; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--nc) 16%, transparent); overflow: hidden; }
.ng-tile-bar i { display: block; height: 100%; border-radius: 3px; background: var(--good); }
.ng-tile.st-low .ng-tile-bar i { background: #8fd3b8; } .ng-tile.st-warn .ng-tile-bar i { background: #f0a020; } .ng-tile.st-bad .ng-tile-bar i { background: #df4339; }
.ng-tile[aria-selected="true"] { background: var(--nc); box-shadow: 0 6px 16px color-mix(in srgb, var(--nc) 38%, transparent); color: #fff; }
.ng-tile[aria-selected="true"] .ng-tile-top b, .ng-tile[aria-selected="true"] .ng-tile-top small { color: #fff; }
.ng-tile[aria-selected="true"] .ng-tile-bar { background: rgba(255, 255, 255, .3); }
.ng-tile[aria-selected="true"] .ng-tile-bar i { background: #fff; }
.ng-tile-terms .ng-tile-top { justify-content: flex-start; }
.ng-tile:focus-visible { outline: 2px solid var(--nc); outline-offset: 2px; }
.ng-panel { outline: none; }
.ng-card { display: grid; gap: 14px; }
.ng-hero { display: flex; align-items: center; gap: 14px; }
.ng-hero h3 { margin: 0; font-size: 22px; }
.ng-term { margin: 2px 0 6px; font-size: 13px; color: var(--muted); }
.ng-el { flex: none; position: relative; display: grid; place-items: center; align-content: end; padding-bottom: 9px; box-sizing: border-box; width: 74px; height: 74px; border-radius: 18px; color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--nc) 78%, #fff), var(--nc)); box-shadow: 0 8px 20px color-mix(in srgb, var(--nc) 35%, transparent); }
.ng-el b { font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.ng-el small { position: absolute; top: 6px; left: 8px; font-size: 11px; font-weight: 700; opacity: .85; }
.ng-el em { margin-top: 4px; font-size: 10.5px; font-style: normal; opacity: .9; }
.ng-kind { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.ng-kind.limit { color: #c2410c; background: color-mix(in srgb, #f97316 15%, transparent); }
.ng-kind.need { color: #15803d; background: color-mix(in srgb, #22c55e 15%, transparent); }
:root[data-theme="dark"] .ng-kind.limit { color: #fdba74; }
:root[data-theme="dark"] .ng-kind.need { color: #86efac; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ng-kind.limit { color: #fdba74; } :root:not([data-theme="light"]) .ng-kind.need { color: #86efac; } }
/* the user's own numbers: small, in a box of their own */
/* (one column its own width: a long food's name, kept on one line, had widened it past its card, the
   bar and the lines cut at the window's side) */
.ng-mine { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 4px; align-content: start; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); font-size: 12.5px; }
.ng-mine h4 { margin: 0 0 2px; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .01em; }
.ng-now { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ng-now b { font-size: 22px; font-variant-numeric: tabular-nums; color: var(--nc); }
.ng-now small { font-size: 12.5px; color: var(--muted); }
.ng-bar { height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; }
.ng-bar i { display: block; height: 100%; border-radius: 999px; background: var(--good); }
.ng-mine.st-low .ng-bar i { background: #8fd3b8; } .ng-mine.st-warn .ng-bar i { background: #f0a020; } .ng-mine.st-bad .ng-bar i { background: #df4339; }
.ng-state { margin: 2px 0 0; font-weight: 700; font-size: 13px; }
.ng-mine.st-warn .ng-state { color: #d97706; } .ng-mine.st-bad .ng-state { color: #df4339; } .ng-mine.st-ok .ng-state { color: #1f9d63; }
.ng-avg, .ng-note { margin: 0; line-height: 1.5; color: var(--muted); }
.ng-avg b { color: var(--text); }
.ng-note { padding-top: 6px; border-top: 1px dashed var(--border); }
.ng-top small { display: block; margin-top: 4px; color: var(--muted); }
.ng-top ol { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.ng-top li { min-width: 0; display: flex; justify-content: space-between; gap: 10px; }
.ng-top li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-top li b { flex: none; font-variant-numeric: tabular-nums; }
/* the explanations */
.ng-main { display: grid; gap: 4px; }
.ng-sec { padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.ng-sec:first-child { border-top: 0; padding-top: 0; }
.ng-sec h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 15px; }
.ng-sec h4 svg { flex: none; color: var(--nc); }
.ng-sec p { margin: 0; font-size: 14.5px; line-height: 1.7; }
.ng-recs { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ng-recs li { position: relative; padding-inline-start: 16px; font-size: 14px; line-height: 1.6; }
.ng-recs li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--nc); }
.ng-foods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ng-foods.one { grid-template-columns: minmax(0, 1fr); }
.ng-foods > div { padding: 10px 12px; border-radius: 14px; }
.ng-foods .good { background: color-mix(in srgb, #22a06b 10%, var(--surface-2)); }
.ng-foods .bad { background: color-mix(in srgb, #f08a24 10%, var(--surface-2)); }
.ng-foods h5 { margin: 0 0 6px; font-size: 13px; }
.ng-foods .good h5 { color: #1f9d63; } .ng-foods .bad h5 { color: #d9771b; }
.ng-foods ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13.5px; line-height: 1.5; }
.ng-foods li { position: relative; padding-inline-start: 13px; }
.ng-foods li::before { content: ""; position: absolute; inset-inline-start: 1px; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .45; }
.ng-terms { display: grid; gap: 8px; margin: 0; }
.ng-terms > div { padding: 9px 12px; border-radius: 12px; background: var(--row-alt); }
.ng-terms dt { font-weight: 700; font-size: 14px; color: var(--nc); }
.ng-terms dd { margin: 2px 0 0; font-size: 13.5px; line-height: 1.6; }
.ng-el-terms { background: linear-gradient(145deg, #94a3b8, #64748b); }
.ng-foot { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--row-alt); font-size: 12px; line-height: 1.6; color: var(--muted); }
/* a phone: the foods one under the other; a wide window: the numbers beside the explanations */
@media (max-width: 420px) { .ng-foods { grid-template-columns: minmax(0, 1fr); } .ng-el { width: 64px; height: 64px; } .ng-el b { font-size: 23px; } .ng-hero h3 { font-size: 20px; } }
@media (min-width: 700px) {
  .ng-card { grid-template-columns: minmax(0, 1fr) 230px; align-items: start; }
  .ng-card > .ng-hero { grid-column: 1 / -1; }
  .ng-card > .ng-mine { grid-column: 2; grid-row: 2; position: sticky; top: 0; }
  .ng-card > .ng-main { grid-column: 1; grid-row: 2; }
  .ng-card-terms { grid-template-columns: minmax(0, 1fr); }
  .ng-terms-all { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* a counting number inside the ring's centre keeps its own size (the centre's label spans are smaller),
   and the big number, its text a gradient, glows with a drop shadow (a text shadow would cover it) */
.gauge-center [data-count-key]:not(b) { font-size: inherit; opacity: 1; margin: 0; }
b.count-down, b.count-up { text-shadow: none; transition: filter .4s; }
b.count-down { filter: drop-shadow(0 0 12px rgba(255, 255, 255, .5)); }
b.count-up { filter: drop-shadow(0 0 12px rgba(255, 200, 120, .6)); }

/* the accessibility panel opened from the header's button: right under it, a notch pointing at it,
   on a phone too (from the floating button it still rises from the bottom) */
.a11y-panel.from-top { top: var(--a11y-top); bottom: auto; left: var(--a11y-left) !important; right: auto !important; width: min(380px, calc(100vw - 16px));
  max-height: calc(100dvh - var(--a11y-top) - 12px - env(safe-area-inset-bottom, 0px)); border-radius: 22px; overflow: visible; transform-origin: var(--a11y-notch, 50%) 0;
  animation: a11y-drop .24s cubic-bezier(.22, 1, .36, 1); }
.a11y-panel.from-top > .a11y-head { border-radius: 22px 22px 0 0; }
.a11y-panel.from-top > :last-child { border-radius: 0 0 22px 22px; }
.a11y-panel.from-top::before { content: ""; position: absolute; top: -7px; left: calc(var(--a11y-notch, 50%) - 8px); width: 16px; height: 16px; border-radius: 3px;
  background: #1f5fd6; transform: rotate(45deg); }
@keyframes a11y-drop { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
@media (max-width: 520px) { .a11y-panel.from-top { width: calc(100vw - 16px); } }
@media (prefers-reduced-motion: reduce) { .a11y-panel.from-top { animation: none; } }
/* the weight between the + and the −: the box gives its padding to the number, never the number's digits
   (on a narrow phone "104.9" lost its first digit), and the number's size follows the screen's width */
.big-stepper .big-value { padding: 12px 8px; }
.big-stepper .big-value input { padding: 0; margin: 0; font-size: clamp(32px, 9.5vw, 44px); }
@media (max-width: 340px) { .big-stepper { gap: 8px; } .big-stepper .round-btn.big { width: 52px; height: 52px; font-size: 28px; } }

/* "eaten lately" in the add sheet: a row dragged right goes off the list, dragged left to the favourites */
.ma-swipe { position: relative; overflow: hidden; touch-action: pan-y; }
.ma-swipe > .ma-slide { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; background: var(--surface);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.ma-swipe.dragging > .ma-slide { transition: none; }
.ma-under { position: absolute; inset: 0; direction: ltr; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; color: #fff; font-size: 14px; font-weight: 700;
  background: var(--row-alt); transition: background .2s; }
.ma-under > span { display: inline-flex; align-items: center; gap: 6px; visibility: hidden; direction: rtl; }
.ma-under svg { transition: transform .25s cubic-bezier(.34, 1.6, .64, 1); }
.ma-swipe.to-del .ma-under { background: #df4339; }
.ma-swipe.to-fav .ma-under, .ma-swipe.faved .ma-under { background: #f5a524; }
.ma-swipe.to-del .ma-u-del, .ma-swipe.to-fav .ma-u-fav, .ma-swipe.faved .ma-u-fav { visibility: visible; }
.ma-swipe.armed .ma-under svg { transform: scale(1.3); }
.ma-u-fav svg { fill: currentColor; }
.ma-swipe.faved .ma-u-fav svg { animation: tl-star .7s cubic-bezier(.34, 1.6, .64, 1); }
.ma-hint { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .ma-swipe > .ma-slide { transition: none; } }

/* a message with a way back ("ביטול"): the words on the first line, the button under them, all centred */
#toast:has(.toast-undo) { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 12px 20px 14px; }
#toast .toast-undo { margin: 0; padding: 5px 18px; }

/* a food already in the favourites: the swipe takes it off them, in grey, the star hollow */
.tl-fav.is-fav { background: linear-gradient(270deg, #a3aec2, #6b7689); color: #fff; }
.tl-fav.is-fav svg, .ma-u-fav.is-fav svg { fill: none; }
.ma-swipe.to-fav:has(.ma-u-fav.is-fav) .ma-under, .ma-swipe.faved:has(.ma-u-fav.is-fav) .ma-under { background: #6b7689; }

/* every message with an action (core.js toast): the words, then under them, a little apart, the action as a button */
#toast.has-act { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 13px 20px 14px; }
#toast .toast-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
#toast .toast-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 96px; margin: 0; padding: 7px 18px; border: 0; border-radius: 11px;
  background: var(--accent); color: var(--accent-text); font: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent); transition: transform .15s, filter .15s; }
#toast .toast-btn:active { transform: scale(.96); }
#toast .toast-btn:hover { filter: brightness(1.08); }

/* the notes' eraser: faint in the box's top left corner, there only when there is something to clear */
.tl-note-wrap { position: relative; }
.tl-note-wrap .tl-note { padding-inline-end: 46px; }
.tl-note-clear { position: absolute; top: 18px; inset-inline-end: 8px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 10px;
  background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--muted); opacity: .55; cursor: pointer; visibility: hidden;
  transition: opacity .2s, background .2s, color .2s, transform .15s; -webkit-tap-highlight-color: transparent; }
.tl-note-wrap.has-text .tl-note-clear { visibility: visible; }
.tl-note-clear:hover, .tl-note-clear:focus-visible { opacity: 1; color: #df4339; background: color-mix(in srgb, #df4339 14%, transparent); }
.tl-note-clear:active { transform: scale(.92); }

/* ---------- a line chart that reads by itself (line-chart.js): the resting pulse ---------- */
.act-sub { margin: 16px 0 8px; font-size: 15px; }
.lchart { display: grid; gap: 8px; padding: 14px 14px 12px; border-radius: 18px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.lc-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 14px; }
.lc-now { display: flex; align-items: baseline; gap: 6px; }
.lc-now b { font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--lc); }
.lc-now span { font-size: 14px; color: var(--muted); }
.lc-now small { font-size: 12.5px; color: var(--muted); padding-inline-start: 4px; }
.lc-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.lc-stats > span { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; background: var(--row-alt); color: var(--muted); }
.lc-stats b { color: var(--text); font-variant-numeric: tabular-nums; }
.lc-stats .wt-chg small { font-weight: 400; color: var(--muted); }
.lc-plot { position: relative; height: 190px; }
.lc-unit { position: absolute; top: 0; right: 0; width: 40px; text-align: center; font-size: 11px; color: var(--muted); }
.lc-in { position: absolute; top: 30px; bottom: 8px; left: 20px; right: 46px; touch-action: pan-y; cursor: pointer; }
.lc-band { position: absolute; left: -20px; right: 0; background: color-mix(in srgb, #22a06b 10%, transparent); border-block: 1px dashed color-mix(in srgb, #22a06b 35%, transparent); }
.lc-band em { position: absolute; bottom: 3px; left: 6px; font-style: normal; font-size: 10.5px; color: color-mix(in srgb, #22a06b 80%, var(--text)); opacity: .85; }
.lc-grid span { position: absolute; left: -20px; right: 0; height: 0; border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent); }
.lc-grid em { position: absolute; top: 0; right: -44px; width: 38px; transform: translateY(-50%); text-align: center; font-style: normal; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lc-avg { position: absolute; left: -20px; right: 0; height: 0; border-top: 1.5px dashed color-mix(in srgb, var(--lc) 55%, transparent); }
.lc-avg b { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); padding: 1px 7px; border-radius: 8px; font-size: 10.5px; color: var(--lc); background: var(--surface-2); white-space: nowrap; }
.lc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lc-line { fill: none; stroke: var(--lc); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lc-guide { position: absolute; top: -8px; bottom: 0; width: 0; border-left: 1.5px dashed color-mix(in srgb, var(--lc) 55%, transparent); pointer-events: none; transition: left .15s ease-out; }
.lc-dot { position: absolute; z-index: 2; width: 24px; height: 24px; margin: -12px 0 0 -12px; padding: 0; border: 0; border-radius: 50%; background: none; pointer-events: none; }
.lc-dot::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--lc); transition: transform .2s, background .2s; }
.lc-dot.on::before { background: var(--lc); transform: scale(1.4); box-shadow: inset 0 0 0 2px var(--lc), 0 0 0 5px color-mix(in srgb, var(--lc) 22%, transparent); }
.lc-dot:focus-visible { outline: 2px solid var(--lc); outline-offset: 1px; }
.lc-val { position: absolute; z-index: 3; transform: translate(-50%, calc(-100% - 9px)); padding: 2px 7px; border-radius: 8px; font-size: 12px; font-weight: 700; line-height: 1.4;
  color: var(--text); background: var(--surface); box-shadow: 0 1px 4px rgba(0, 0, 0, .18), inset 0 0 0 1px var(--border); pointer-events: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lc-val.now { color: #fff; background: var(--lc); box-shadow: 0 2px 8px color-mix(in srgb, var(--lc) 40%, transparent); }
.lc-val.l { transform: translate(-24%, calc(-100% - 9px)); }
.lc-val.r { transform: translate(-76%, calc(-100% - 9px)); }
/* a line over dates (as the weight's): time runs left to right, the first date on the left, the latest on the right */
.lc-x { display: flex; flex-direction: row-reverse; justify-content: space-between; padding: 0 34px 0 6px; font-size: 12px; color: var(--muted); }
.lc-read { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 10px; margin: 2px 0 0; padding: 8px 12px; border-radius: 12px; background: var(--row-alt); font-size: 13.5px; text-align: center; }
.lc-read b { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--lc); }
.lc-vs { color: var(--muted); }
.lc-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.lc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lc-legend i { display: inline-block; width: 16px; }
.lc-legend .lg-line { height: 3px; border-radius: 3px; background: var(--lc); }
.lc-legend .lg-avg { border-top: 2px dashed color-mix(in srgb, var(--lc) 65%, transparent); }
.lc-legend .lg-band { height: 10px; border-radius: 3px; background: color-mix(in srgb, #22a06b 22%, transparent); border: 1px dashed color-mix(in srgb, #22a06b 45%, transparent); }

/* the period's numbers: three tiles (one had no data) fill the row; two in a row, an odd last spans it */
.report-kpis:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) {
  .report-kpis:has(> :nth-child(3):last-child) { grid-template-columns: repeat(2, 1fr); }
  .report-kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* the header's clock on a phone with the accessibility button beside it: no seconds (no room for
   them), a little smaller, and AM/PM small and close, so the clock never runs under its neighbours */
@media (max-width: 520px) {
  .top-row:has(.a11y-top) .clock-time small { display: none; }
  .top-row:has(.a11y-top) .top-clock { padding: 0 10px; }
  .top-row:has(.a11y-top) .clock-time { font-size: 16px; letter-spacing: .2px; }
}
@media (max-width: 520px) {
  .clock-time em { font-size: 9.5px; margin-inline-start: 3px; }
}
/* the clock never narrower than its own time, centred in its pill; when the header is short of room
   (clock.js fitClock) it gets smaller, and then the logo's name steps aside */
.top-clock { min-width: max-content; justify-content: center; }
.top-row.clock-tight .top-clock { padding: 0 8px; }
.top-row.clock-tight .clock-time { font-size: 15px; letter-spacing: 0; }
.top-row.clock-tight .clock-time em { font-size: 8.5px; margin-inline-start: 2px; }
.top-row.clock-nameless .logo-btn > span:not(.logo-mark) { display: none; }

/* the AI tab's daily limit for everyone (admin.js ai) */
.ai-limit { display: grid; gap: 12px; margin-top: 12px; }
.ai-limit .am-text { display: grid; gap: 4px; }
.ai-limit .am-text .muted { font-size: 13.5px; line-height: 1.6; }
.ai-limit-set { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* the AI's cost calculator (admin.js aiCostCalc) */
.admin-dl dd { min-width: 0; }
.ai-model-price { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; line-height: 1.4; }
.ai-model { box-sizing: border-box; width: 100%; max-width: 100%; text-overflow: ellipsis; min-height: 40px; padding: 0 10px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; }
.ai-calc { border-radius: 16px; background: var(--row-alt); padding: 4px 14px; }
.ai-calc > summary { display: flex; align-items: center; gap: 12px; padding: 10px 0; cursor: pointer; list-style: none; }
.ai-calc > summary::-webkit-details-marker { display: none; }
.aic-head { flex: 1; min-width: 0; display: grid; gap: 2px; }
.aic-head .muted { font-size: 13px; }
/* (its way open and shut at the row's other end, as the app's opening lists: down to open, up to shut) */
.aic-chev { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: var(--muted); background: color-mix(in srgb, var(--text) 8%, transparent); transition: transform .25s; }
.ai-calc[open] .aic-chev { transform: rotate(180deg); }
.ai-calc > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; }
.aic-in .field small { font-size: 11.5px; }
.aic-in .field[hidden] { display: none; }
/* the model's name and its mark on one line, never cut: the field takes two columns where there is room, and the text a little smaller */
.aic-in .field { align-content: start; }
.aic-in .field .stepper.adm-step { align-self: start; margin-top: 0; }
.aic-in select { display: flex; align-items: center; height: 42px; padding-block: 0; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; padding-inline: 8px; }
@media (min-width: 640px) { .aic-in .field:has(select) { grid-column: span 2; } }
/* typed by hand: room for a long number (ten million users) */
.aic-in .stepper.adm-step > input[type="number"] { width: 84px; }
.aic-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.aic-in .field { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.aic-in :is(input, select) { min-height: 42px; padding: 0 10px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 15px; }
.aic-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 12px 0 8px; }
.aic-out > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--surface); }
.aic-out span { font-size: 12.5px; color: var(--muted); }
.aic-out b { font-size: 20px; font-variant-numeric: tabular-nums; }
.aic-out small { font-size: 12px; color: var(--muted); direction: ltr; text-align: end; }
.aic-out .aic-top { grid-column: 1 / -1; background: color-mix(in srgb, var(--warn, #e5484d) 10%, var(--surface)); }
.aic-out .aic-top small { direction: rtl; text-align: start; }
.aic-note { margin: 0 0 10px; font-size: 12.5px; line-height: 1.6; }
.ai-limit-quick { display: flex; gap: 6px; }
.ai-limit-quick button { min-width: 44px; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font: inherit; font-weight: 700; cursor: pointer; }
.ai-limit-quick button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border-color: var(--accent); color: var(--accent); }
.ai-limit-num { display: inline-flex; align-items: center; gap: 8px; }
.ai-limit-num input { width: 86px; height: 40px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: 16px; text-align: center; }

/* more AI requests for a while (admin.js aiqAdmin, grantDialog): the requests, who has more, the window */
.aiq-admin { display: grid; gap: 14px; }
.aiq-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.aiq-top .am-text { display: grid; gap: 4px; flex: 1 1 260px; }
.aiq-top .am-text .muted { font-size: 13.5px; line-height: 1.6; }
.aiq-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.aiq-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13.5px; color: var(--text);
  border: 1px solid color-mix(in srgb, #a78bfa 50%, transparent); background: color-mix(in srgb, #a78bfa 12%, var(--surface)); }
.aiq-chip span { color: #7c3aed; font-weight: 700; }
:root[data-theme="dark"] .aiq-chip span { color: #c4b5fd; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .aiq-chip span { color: #c4b5fd; } }
.aiq-title { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font-size: 15px; }
.aiq-badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; font-size: 12.5px; color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.aiq-empty { margin: 0; }
.aiq-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.aiq-card { display: grid; gap: 10px; align-content: start; padding: 14px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface-2); }
.aiq-card.new { border-color: color-mix(in srgb, #a78bfa 55%, var(--border)); box-shadow: 0 8px 22px -16px #a855f7; }
.aiq-card header { display: flex; align-items: center; gap: 10px; }
.aiq-card .adm-avatar { width: 38px; height: 38px; font-size: 16px; background: linear-gradient(160deg, #a78bfa, #db2777); }
.aiq-who { flex: 1; display: grid; min-width: 0; }
.aiq-who small { font-size: 12px; }
.aiq-new { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.aiq-card blockquote, .aiq-g-why { margin: 0; padding: 10px 12px; border-radius: 12px; white-space: pre-wrap; line-height: 1.6; font-size: 14.5px;
  border-inline-start: 4px solid #a78bfa; background: color-mix(in srgb, #a78bfa 9%, var(--surface)); }
.aiq-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); }
.aiq-meta a { color: var(--accent); text-decoration: none; }
.aiq-meta b { color: var(--text); }
.aiq-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.aiq-actions .aiq-del { margin-inline-start: auto; color: var(--muted); }
.aiq-actions .aiq-del:hover { color: #dc2626; }
.aiq-done > summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.aiq-done[open] > summary { margin-bottom: 10px; }
.aiq-done .aiq-card { opacity: .88; }

.aiq-grant { display: grid; gap: 14px; }
.aiq-g-head { display: flex; align-items: center; gap: 12px; }
.aiq-g-head > span:last-child { display: grid; min-width: 0; }
.aiq-g-head .adm-avatar { background: linear-gradient(160deg, #a78bfa, #db2777); }
.aiq-g-now { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.aiq-g-now > span { display: grid; justify-items: center; align-content: start; gap: 2px; padding: 10px 6px; border-radius: 14px; text-align: center;
  border: 1px solid var(--border); background: var(--surface-2); }
.aiq-g-now small { font-size: 12px; color: var(--muted); }
.aiq-g-now b { font-size: 21px; }
.aiq-g-now > span.on { border-color: #a78bfa; background: color-mix(in srgb, #a78bfa 12%, var(--surface)); }
.aiq-g-now > span.on b { color: #7c3aed; }
:root[data-theme="dark"] .aiq-g-now > span.on b { color: #c4b5fd; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .aiq-g-now > span.on b { color: #c4b5fd; } }
.aiq-g-amount { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.aiq-g-days { flex-wrap: wrap; }
.aiq-g-sum { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.6; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.aiq-g-sum:empty { display: none; }
.aiq-pick { display: grid; gap: 10px; }
.aiq-pick-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.aiq-pick-list button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.aiq-pick-list button:hover { border-color: var(--accent); }
.aiq-pick-list .adm-avatar { width: 36px; height: 36px; font-size: 15px; }
.aiq-pick-t { flex: 1; display: grid; min-width: 0; }
.aiq-pick-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aiq-pick-n { display: grid; justify-items: end; font-size: 13px; font-weight: 700; }
.aiq-pick-n small { color: #7c3aed; }
.adm-ud-extra { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px dashed var(--border); }
.adm-ud-extra > span { display: grid; gap: 2px; }
.adm-ud-extra.on { border-style: solid; border-color: #a78bfa; background: color-mix(in srgb, #a78bfa 10%, var(--surface)); }

/* ---------- a day's AI requests used up (ai-quota.js) ---------- */
.aq { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 4px 2px 2px; }
.aq-art { color: var(--text); filter: drop-shadow(0 10px 22px color-mix(in srgb, #a78bfa 30%, transparent)); }
.aq-title { margin: 2px 0 0; font-size: 21px; }
.aq-text { margin: 0; max-width: 34ch; font-size: 15px; line-height: 1.65; color: var(--muted); }
.aq-text b { color: var(--text); }
.aq-meter { display: grid; justify-items: center; gap: 6px; margin: 4px 0 2px; }
.aq-dots { display: flex; gap: 6px; }
.aq-dots i { width: 26px; height: 8px; border-radius: 999px; background: var(--track); }
.aq-dots i.on { background: linear-gradient(90deg, #a78bfa, #ec4899); }
.aq-meter small { font-size: 12.5px; color: var(--muted); }
.aq-sub { margin: 10px 0 2px; font-size: 14px; color: var(--muted); font-weight: 600; }
.aq-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.aq-ways button { display: grid; justify-items: center; gap: 4px; padding: 12px 6px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-2);
  color: var(--text); font: inherit; cursor: pointer; transition: border-color .2s, transform .15s; }
.aq-ways button:active { transform: scale(.97); }
.aq-ways button:hover { border-color: var(--accent); }
.aq-ways svg { color: var(--accent); }
.aq-ways b { font-size: 13.5px; }
.aq-ways small { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.aq-ok { margin-top: 8px; width: 100%; }
.aq-note { margin: 0; font-size: 12px; color: var(--muted); }

/* asking for more today: the card in the window, and its form (ai-quota.js openAiAsk) */
.aq-ask { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 6px; padding: 12px 14px; border-radius: 18px; text-align: start; cursor: pointer;
  border: 1px solid color-mix(in srgb, #a78bfa 45%, transparent); color: var(--text); font: inherit;
  background: linear-gradient(135deg, color-mix(in srgb, #a78bfa 16%, var(--surface)), color-mix(in srgb, #ec4899 12%, var(--surface)));
  box-shadow: 0 8px 22px -14px color-mix(in srgb, #a78bfa 70%, transparent); transition: transform .15s, box-shadow .2s; }
.aq-ask:hover { box-shadow: 0 10px 26px -12px color-mix(in srgb, #a78bfa 80%, transparent); }
.aq-ask:active { transform: scale(.98); }
.aq-ask-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #ec4899); box-shadow: 0 6px 14px -6px #a855f7; }
.aq-ask-ico svg { animation: aq-rise 2.4s ease-in-out infinite; }
.aq-ask-t { flex: 1; display: grid; gap: 2px; min-width: 0; }
.aq-ask-t b { font-size: 15.5px; }
.aq-ask-t small { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.aq-ask > svg:last-child { flex: none; color: var(--muted); }
.aq-ask.sent .aq-ask-ico { background: linear-gradient(135deg, #34d399, #0ea371); box-shadow: 0 6px 14px -6px #10b981; }
.aq-ask.sent .aq-ask-ico svg { animation: none; }
@keyframes aq-rise { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-2px); } }

.aqr { display: grid; gap: 14px; }
.aqr-head { display: grid; justify-items: center; gap: 8px; text-align: center; }
.aqr-head p { margin: 0; max-width: 36ch; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.aqr-art { filter: drop-shadow(0 10px 20px color-mix(in srgb, #a78bfa 35%, transparent)); }
.aqr-art .aqr-arrow { animation: aq-rise 2.4s ease-in-out infinite; transform-origin: center; }
.aqr-art .aqr-spark { animation: aqr-twinkle 2s ease-in-out infinite; transform-origin: 78px 24px; }
@keyframes aqr-twinkle { 0%, 100% { transform: scale(.7); opacity: .6; } 50% { transform: scale(1.15); opacity: 1; } }
.aqr-now { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 13px; color: var(--muted);
  background: color-mix(in srgb, #a78bfa 12%, var(--surface-2)); }
.aqr-now b { color: var(--text); }
/* (side by side, the fields level with each other even when a name takes two lines) */
.aqr-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; align-items: end; }
.aqr-fields > :first-child { grid-column: 1 / -1; }
.aqr .field { margin: 0; }
.aqr-why { display: grid; gap: 8px; }
.aqr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.aqr-chips button { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font: inherit; font-size: 13px; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.aqr-chips button[aria-pressed="true"] { border-color: #a78bfa; color: #7c3aed; background: color-mix(in srgb, #a78bfa 16%, var(--surface)); }
:root[data-theme="dark"] .aqr-chips button[aria-pressed="true"] { color: #c4b5fd; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .aqr-chips button[aria-pressed="true"] { color: #c4b5fd; } }
.aqr-why textarea { width: 100%; min-height: 96px; resize: vertical; }
.aqr-count { justify-self: end; margin-top: -4px; font-size: 12px; color: var(--muted); }
.aqr-err { margin: -4px 0 0; padding: 9px 12px; border-radius: 12px; font-size: 14px; color: var(--danger, #dc2626);
  background: color-mix(in srgb, var(--danger, #dc2626) 10%, var(--surface)); }
.aqr-send { min-height: 50px; font-size: 16px; background: linear-gradient(135deg, #8b5cf6, #ec4899); border-color: transparent; }
.aqr-privacy { margin: -4px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); }
.aqr-done { display: grid; justify-items: center; gap: 8px; padding: 10px 4px 4px; text-align: center; }
.aqr-done h3 { margin: 4px 0 0; font-size: 21px; }
.aqr-done p { margin: 0; max-width: 36ch; line-height: 1.6; }
.aqr-done .btn { margin-top: 10px; }
.aqr-done-ring { stroke-dasharray: 100; stroke-dashoffset: 100; animation: aqr-draw .7s ease-out forwards; }
.aqr-done-tick { stroke-dasharray: 100; stroke-dashoffset: 100; animation: aqr-draw .45s .55s ease-out forwards; }
@keyframes aqr-draw { to { stroke-dashoffset: 0; } }
@media (max-width: 420px) { .aqr-fields { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .aq-ask-ico svg, .aqr-art .aqr-arrow, .aqr-art .aqr-spark { animation: none; }
  .aqr-done-ring, .aqr-done-tick { animation: none; stroke-dashoffset: 0; }
}

/* choice chips (a portion's units, the meals): all the same height, one line of words or two */
.choice-chips:not(.compact) { align-items: stretch; }
.choice-chips:not(.compact) .choice { min-height: 54px; align-items: center; }
.choice-chips:not(.compact) .choice span { justify-content: center; }

/* a manager's permissions (admin.js, a user's window): the areas of the admin screen, two in a row */
.adm-ud-perms { display: grid; gap: 10px; margin: 0; padding: 12px 14px 14px; border: 1px solid var(--border); border-radius: 16px; }
.adm-ud-perms legend { padding: 0 6px; font-weight: 700; }
.adm-ud-perms > p { margin: 0; line-height: 1.6; }
.adm-perms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.adm-perms > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.adm-perm { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); cursor: pointer; }
.adm-perm:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.adm-perm input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
.adm-perm span { display: grid; gap: 2px; min-width: 0; }
.adm-perm b { font-size: 14px; }
.adm-perm small { font-size: 12px; color: var(--muted); line-height: 1.4; }
.adm-locked { margin: 0; }
@media (max-width: 480px) { .adm-perms { grid-template-columns: minmax(0, 1fr); } .adm-perms > :last-child:nth-child(odd) { grid-column: auto; } }

/* ---------- the food search screen (explore.js): filters, sorting, cards or a table, export ---------- */
.fx-hero .fx-art svg { display: block; }
.fx-search { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 0 14px; height: 54px; border-radius: 16px;
  background: var(--surface); color: var(--text); box-shadow: 0 10px 26px rgba(0, 0, 0, .18); }
.fx-search > svg { flex: none; color: var(--muted); }
.fx-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--text); font: inherit; font-size: 17px; outline: none; }
.fx-search:focus-within { box-shadow: 0 10px 26px rgba(0, 0, 0, .18), 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
.fx-clear { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--row-alt); color: var(--muted); cursor: pointer; }
/* the field and the recent searches that open under it, over what follows */
.fx-searchbox { position: relative; z-index: 5; }
.fx-recent { animation: fxr-in .18s ease-out; }
@keyframes fxr-in { from { opacity: 0; transform: translateY(-6px); } }
/* the recent searches (search.js recentItems): one look under the search above and on the food search screen */
.suggest:has(> .rs-head) { padding: 8px; }
.rs-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px 8px; }
.rs-head > span { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.rs-clear { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700;
  color: #e5484d; background: color-mix(in srgb, #e5484d 12%, transparent); }
.rs-clear:hover { background: color-mix(in srgb, #e5484d 20%, transparent); }
.rs-row { display: flex; align-items: center; gap: 4px; border-radius: 12px; max-height: 60px; transition: opacity .18s, max-height .18s, transform .18s; }
.rs-row.gone { opacity: 0; max-height: 0; transform: translateX(-12px); overflow: hidden; }
.rs-row:hover { background: var(--row-alt); }
.rs-q { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border: 0; background: none; color: var(--text);
  font: inherit; font-size: 16px; text-align: start; cursor: pointer; }
.rs-q svg { flex: none; color: var(--muted); }
.rs-q span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-x { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.rs-x:hover { color: #e5484d; background: color-mix(in srgb, #e5484d 12%, transparent); }
.rs-x:active { transform: scale(.9); }
.rs-more { display: block; width: 100%; height: 38px; margin-top: 4px; border: 0; border-radius: 12px; background: var(--row-alt); color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
/* a press shown at once, nothing moving (search.js pressRecent); a recent search tapped: its row lit
   and its clock turning back until the results come in its place */
.rs-q { border-radius: 12px; transition: background-color .12s; }
.rs-q.down, .rs-row.busy .rs-q { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.rs-row.busy .rs-q svg { color: var(--accent); animation: spin .9s linear infinite reverse; }
.rs-x.down { color: #e5484d; background: color-mix(in srgb, #e5484d 12%, transparent); transform: scale(.9); }
.rs-more.down { background: color-mix(in srgb, var(--accent) 14%, var(--row-alt)); }
.rs-clear.down { background: color-mix(in srgb, #e5484d 24%, transparent); }
/* the tools under the field (a barcode, a photo, saying it), on the hero's colours */
.fx-bar { margin-top: 12px; }
.fx-bar button { min-height: 50px; border-radius: 16px; color: #fff; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.fx-bar button:hover { color: #fff; background: rgba(255, 255, 255, .2); }
.fx-bar button:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .fx-recent { animation: none; } .rs-row { transition: none; } .rs-row.busy .rs-q svg { animation: none; } }
.fx-body { display: grid; gap: 14px; margin-top: 18px; }
/* searching: the word large in the middle, the turning circle under it */
.fx-wait { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 64px 0 48px; color: var(--muted); font-size: 20px; font-weight: 700; text-align: center; }
.fx-wait .spinner { margin: 0; }
.fx-start { display: grid; gap: 6px; padding: 18px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.fx-start-title { margin: 0; font-size: 16px; }
.fx-start-lead { margin: 0; font-size: 15px; line-height: 1.65; }
/* the searches made here before (search-history.js): by day, each a card with its leading results, the best
   of them, and the AI's summary or its button */
.fx-hist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.fh-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fh-head h3 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; }
.fh-head h3 > svg { color: var(--accent); }
.fh-head h3 small { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #fff; background: var(--accent); }
.fh-clear { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 700; color: var(--warn); background: color-mix(in srgb, var(--warn) 11%, transparent); }
.fh-clear:hover { color: #fff; background: var(--warn); }
.fh-sort { justify-self: start; display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--row-alt); }
.fh-sort button { padding: 6px 16px; border: 0; border-radius: 10px; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--muted); background: none; }
.fh-sort button[aria-pressed="true"] { color: var(--text); background: var(--surface); box-shadow: 0 2px 8px rgba(0, 0, 0, .14); }
.fh-day { margin: 4px 2px -4px; font-size: 13px; font-weight: 800; color: var(--muted); }
.fh-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.fh-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.fh-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fh-q { display: inline-flex; align-items: center; gap: 9px; min-width: 0; padding: 0; border: 0; cursor: pointer; font: inherit; color: var(--text); text-align: start; background: none; }
.fh-q > svg { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 11px; color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.fh-q b { overflow: hidden; font-size: 16.5px; white-space: nowrap; text-overflow: ellipsis; }
.fh-meta { flex: none; margin-inline-start: auto; font-size: 12.5px; color: var(--muted); }
.fh-del { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer; color: var(--muted); background: var(--row-alt); }
.fh-del:hover { color: #fff; background: var(--warn); }
.fh-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.fh-items a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 13px; color: var(--text); text-decoration: none; background: var(--row-alt); }
.fh-items a:hover { background: color-mix(in srgb, var(--accent) 9%, var(--row-alt)); }
.fh-items span { min-width: 0; overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.fh-items b { flex: none; font-size: 15px; }
.fh-items b small { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.fh-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.fh-facts span { max-width: 100%; overflow: hidden; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis;
  color: var(--good); background: color-mix(in srgb, var(--good) 11%, transparent); }
.fh-ai { justify-self: start; display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; color: #fff; background: var(--ai-grad); box-shadow: 0 8px 18px -10px rgba(106, 70, 240, .8); }
.fh-ai:disabled { opacity: .85; cursor: default; }
.fh-aibox { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 13px 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, #6a46f0 24%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, #6a46f0 10%, var(--surface)), color-mix(in srgb, #c42f66 6%, var(--surface))); }
.fh-aibox .ai-badge { align-self: start; justify-self: start; }
.fh-aibox p { margin: 0; font-size: 14px; line-height: 1.6; }
.fh-best, .fh-watch, .fh-tip { display: flex; align-items: flex-start; gap: 8px; }
.fh-best > svg { flex: none; margin-top: 3px; color: #d97706; }
.fh-watch > svg { flex: none; margin-top: 4px; padding: 2px; border-radius: 50%; color: #fff; background: #d97706; }
.fh-tip > svg { flex: none; margin-top: 4px; padding: 2px; border-radius: 50%; color: #fff; background: var(--good); }
.fh-more { width: 100%; padding: 10px; border: 1px dashed var(--border); border-radius: 14px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; color: var(--muted); background: none; }
.fh-more:hover { color: var(--text); background: var(--row-alt); }
.fx-tools { display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.fx-kinds, .fx-flags { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-kinds button, .fx-flags button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.fx-kinds button small { padding: 1px 7px; border-radius: 999px; font-size: 11.5px; background: var(--row-alt); color: var(--muted); }
.fx-kinds button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 15%, var(--surface)); border-color: var(--accent); color: var(--accent); }
.fx-flags button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.fx-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.fx-sort { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); }
.fx-sort select { border: 0; background: none; color: var(--text); font: inherit; font-size: 15px; font-weight: 600; outline: none; }
.fx-view button { display: inline-flex; align-items: center; gap: 6px; }
.fx-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; font-size: 14px; color: var(--muted); }
.fx-sum b { color: var(--text); font-variant-numeric: tabular-nums; }
.fx-red { color: #df4339; font-weight: 700; }
.fx-reset { margin-inline-start: auto; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
.fx-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 760px) { .fx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fx-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
.fx-card { display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.fx-card-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.thumb.fx-pic { width: 62px; height: 62px; flex: none; }
.fx-name { display: grid; gap: 3px; min-width: 0; }
.fx-name b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15.5px; line-height: 1.35; }
.fx-name small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-kcal { display: grid; justify-items: center; min-width: 64px; padding: 6px 8px; border-radius: 14px; background: var(--row-alt); text-align: center; }
.fx-kcal b { font-size: 22px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.fx-kcal small { font-size: 10.5px; color: var(--muted); line-height: 1.25; max-width: 72px; }
.fx-macro { display: flex; gap: 2px; height: 8px; border-radius: 999px; overflow: hidden; background: var(--track); }
.fx-macro span { background: var(--c); }
.fx-macro-l { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.fx-macro-l span { display: inline-flex; align-items: center; gap: 5px; }
.fx-macro-l i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.fx-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.fx-nums span { display: grid; gap: 1px; padding: 7px 9px; border-radius: 11px; background: var(--surface-2); }
.fx-nums small { font-size: 11.5px; color: var(--muted); }
.fx-nums b { font-size: 15px; font-variant-numeric: tabular-nums; }
.fx-nums em { font-style: normal; font-size: 11px; color: var(--muted); }
.fx-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-pill { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.fx-pill.red { color: #fff; background: #df4339; }
.fx-pill.good { color: #15803d; background: color-mix(in srgb, #22c55e 16%, transparent); }
.fx-pill.warn { color: #b45309; background: color-mix(in srgb, #f59e0b 18%, transparent); }
:root[data-theme="dark"] .fx-pill.good { color: #86efac; }
:root[data-theme="dark"] .fx-pill.warn { color: #fcd34d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fx-pill.good { color: #86efac; } :root:not([data-theme="light"]) .fx-pill.warn { color: #fcd34d; } }
.fx-add { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border: 0; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 15%, var(--surface)); color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
.fx-add:active, .fx-add-s:active { transform: scale(.96); }
.fx-table-wrap { display: flex; align-items: flex-start; overflow: hidden; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
/* the names stay, the numbers scroll sideways beside them, fading at an edge with more beyond it */
.fx-table.fx-names { flex: none; width: auto; max-width: 52%; position: relative; z-index: 1; background: var(--surface); box-shadow: -8px 0 12px -10px rgba(0, 0, 0, .45); }
.fx-table-scroll { flex: 1; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
  --fade-s: 0px; --fade-e: 0px; -webkit-mask-image: linear-gradient(to left, transparent, #000 var(--fade-s), #000 calc(100% - var(--fade-e)), transparent);
  mask-image: linear-gradient(to left, transparent, #000 var(--fade-s), #000 calc(100% - var(--fade-e)), transparent); }
.fx-table-scroll.fade-start { --fade-s: 28px; }
.fx-table-scroll.fade-end { --fade-e: 36px; }
.fx-table thead tr { height: 42px; }
/* the two tables' rows the same height: a name of two lines and its source fit in it */
.fx-table tbody tr { height: 72px; }
.fx-table tbody :is(th, td) { padding-block: 6px; }
.fx-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.fx-table th, .fx-table td { padding: 9px 10px; text-align: center; white-space: nowrap; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.fx-table thead th { background: var(--surface-2); font-size: 12.5px; color: var(--muted); }
.fx-table thead button { border: 0; background: none; padding: 0; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.fx-table th[aria-sort="ascending"] button::after { content: " ▲"; color: var(--accent); }
.fx-table th[aria-sort="descending"] button::after { content: " ▼"; color: var(--accent); }
.fx-table .fx-th-name, .fx-table .fx-td-name { text-align: start; }
.fx-table .fx-td-name { min-width: 170px; max-width: 230px; white-space: normal; background: var(--surface); font-weight: 400; }
.fx-td-name a { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.fx-td-name span { display: grid; min-width: 0; }
.fx-td-name b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; line-height: 1.3; }
.fx-td-name small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thumb.fx-pic-s { width: 36px; height: 36px; flex: none; }
.fx-table td.hi { color: #df4339; font-weight: 700; }
.fx-table td.ok { color: #1f9d63; font-weight: 700; }
.fx-add-s { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--accent) 15%, var(--surface)); color: var(--accent); cursor: pointer; }
.fx-note { margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.fx-empty { margin: 0; padding: 30px 10px; text-align: center; color: var(--muted); }
.fx-print .pr-day table { font-size: 10px; }
.fx-print .pr-day td:first-child { white-space: normal; text-align: start; }
/* the recipes' export bar on their hero, and their printed list */
.rc-xbar { margin-top: 12px; }
.rc-xbar .xbar { display: grid; width: 100%; }
@media (min-width: 641px) { .rc-xbar { display: flex; justify-content: flex-end; } .rc-xbar .xbar { width: auto; } }
/* the two buttons over it, its width and in two equal halves, their edges its edges (the user): a phone's
   whole width; a wider screen's 460 px at the end, the bar too */
.recipes-hero .row-head > .hero-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); flex: 1 1 100%; width: 100%; gap: 10px; }
.recipes-hero .hero-actions > .btn { justify-content: center; min-width: 0; white-space: nowrap; }
@media (min-width: 641px) {
  .recipes-hero .row-head > .hero-actions { flex: 0 1 auto; width: min(460px, 100%); margin-inline-start: auto; }
  .rc-xbar .xbar { width: min(460px, 100%); }
}
/* a page's or an AI window's document (doc-print.js): framed blocks one under the other, and the sheet
   printed alone (html.print-doc: everything else hidden for the printer) */
.doc-print .pr-day td:first-child { white-space: normal; text-align: start; }
.doc-print .pr-day td:not(:first-child), .doc-print .pr-day th:not(:first-child) { width: auto; min-width: 46px; }
.doc-print .pr-day thead th:empty { padding: 0; }
.doc-list { margin: 8px 12px 10px; padding-inline-start: 18px; font-size: 12px; line-height: 1.6; }
.doc-list li + li { margin-top: 3px; }
.doc-text { margin: 8px 12px 10px; font-size: 12px; line-height: 1.6; }
.doc-sheet { display: none; }
@media print {
  html.print-doc body > *:not(.doc-sheet) { display: none !important; }
  html.print-doc .doc-sheet { display: block !important; }
  /* on paper the blocks follow one another, each whole on its page where it fits (clipped, not hidden:
     a box that hides its overflow is not split by the printer, and one longer than a page was cut);
     a long table goes on over the page with its rows whole and its head again on top */
  .doc-sheet .pr-days { display: block; }
  .doc-sheet .pr-day { overflow: clip; }
  .doc-sheet .pr-day + .pr-day { margin-top: 12px; }
  .doc-sheet .pr-head, .doc-sheet .pr-chips, .doc-sheet .pr-chip, .doc-sheet .pr-foot { break-inside: avoid; page-break-inside: avoid; }
  .doc-sheet .pr-day h2 { break-after: avoid; page-break-after: avoid; }
  .doc-sheet thead { display: table-header-group; }
  .doc-sheet tr, .doc-sheet li, .doc-sheet .doc-text { break-inside: avoid; page-break-inside: avoid; }
}
.doc-xbar { display: flex; justify-content: flex-end; margin: 14px 0 4px; }
.doc-xbar .xbar { max-width: 100%; }
@media (max-width: 640px) { .doc-xbar .xbar { display: grid; width: 100%; } }
.rc-print .pr-day table { font-size: 10px; }
.rc-print .pr-day td:first-child { white-space: normal; text-align: start; }
.rc-print .pr-day th:first-child { width: 30%; }
/* the search screen on a phone: the filters in one strip that scrolls sideways, the sort and the view on one line */
.fx-search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
@media (max-width: 640px) {
  /* the strips scroll inside the panel, cut at its rounded frame, and fade at an edge with more beyond it */
  .fx-tools { overflow: hidden; }
  .fx-kinds, .fx-flags { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -14px; padding-inline: 14px; padding-block: 2px; overscroll-behavior-x: contain;
    --fade-s: 0px; --fade-e: 0px; -webkit-mask-image: linear-gradient(to left, transparent, #000 var(--fade-s), #000 calc(100% - var(--fade-e)), transparent);
    mask-image: linear-gradient(to left, transparent, #000 var(--fade-s), #000 calc(100% - var(--fade-e)), transparent); }
  .fx-kinds.fade-start, .fx-flags.fade-start { --fade-s: 40px; }
  .fx-kinds.fade-end, .fx-flags.fade-end { --fade-e: 40px; }
  .fx-kinds::-webkit-scrollbar, .fx-flags::-webkit-scrollbar { display: none; }
  .fx-kinds button, .fx-flags button { flex: none; white-space: nowrap; }
  .fx-row { flex-wrap: nowrap; }
  .fx-sort { flex: 1; min-width: 0; }
  .fx-sort select { min-width: 0; width: 100%; text-overflow: ellipsis; }
  .fx-view { flex: none; }
  .fx-view button span { display: none; }
}

/* the welcome wizard's units: each kind on its line, its choices across the width */
.wz-units { display: grid; gap: 10px; padding: 12px; border-radius: 16px; background: color-mix(in srgb, var(--surface-2) 70%, transparent); box-shadow: inset 0 0 0 1px var(--border); }
.wz-unit { display: grid; gap: 6px; }
.wz-unit > span { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.wz-unit .segmented button { flex: 1; min-width: 0; padding-inline: 6px; white-space: nowrap; }

/* weekly flexibility on the day's panel: what the week brings to today, or takes */
.carry-chip { display: flex; align-items: center; justify-content: center; gap: 7px; width: fit-content; margin: 8px auto 2px; padding: 6px 12px; border-radius: 999px;
  font-size: 13px; color: #fff; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.carry-chip b { font-variant-numeric: tabular-nums; }
.carry-chip.plus svg { color: #a7f3d0; }
.carry-chip.minus svg { color: #fcd34d; }

/* the water page's drinks in groups, and how coffee and tea are sweetened */
.drinks-title { margin: 22px 4px 0; font-size: 16px; font-weight: 800; }
/* the water page's search over its cards (diary.js renderWater), as wide as the page */
.drink-search {
  display: flex; align-items: center; gap: 10px; height: 52px; margin: 22px 0 0; padding: 0 16px;
  border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); border: 1.5px solid var(--border); color: var(--muted);
}
.drink-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), var(--shadow); }
.drink-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--text); font: inherit; font-size: 16px; }
.drink-search input:focus-visible { outline: none; }
.drink-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.drink-search-count { font-size: 12.5px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.drink-none { margin: 22px 0 6px; text-align: center; color: var(--muted); }
/* the last four chosen: one row, as many columns as there are; on a phone small cards, four across */
.drinks.drinks-recent { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
@media (max-width: 640px) {
  .drinks-recent { gap: 8px; }
  .drinks-recent .drink { gap: 3px; padding: 10px 4px 8px; }
  .drinks-recent .drink-name { font-size: 12.5px; line-height: 1.2; text-align: center; min-height: 2.4em; display: grid; place-items: center; }
  .drinks-recent .drink .art { width: 44px; height: 44px; }
  .drinks-recent .drink small { font-size: 11px; text-align: center; }
  .drinks-recent .drink-add { font-size: 13px; }
  .drinks-recent .drink-sweet { display: none; }
}
.drinks-title + .drinks { margin-top: 10px; }
/* (the sweetening's box well apart from the cups under it) */
.sweet-pick + .drinks { margin-top: 18px; }
/* the drinks' groups as tabs (diary.js renderWater, approved): a tab each, its first drink's cup, its
   word and how many; one group shown, all of a search's finds with their titles and no tabs */
.drink-tabbar { position: sticky; top: var(--top-h, 0px); z-index: 20; margin: 8px -16px 0; padding: 8px 16px;
  background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); }
@media (min-width: 761px) { .drink-tabbar { margin-inline: 0; padding-inline: 0; border-radius: 0 0 18px 18px; } }
.drink-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 4px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.drink-tabs button { display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 0; min-height: 62px; padding: 6px 2px; border: 0; border-radius: 14px;
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--muted); background: transparent; cursor: pointer; transition: background .2s, color .2s; }
.drink-tabs button .art { width: 30px; height: 30px; }
.drink-tabs button span { max-width: 100%; overflow-wrap: anywhere; text-align: center; line-height: 1.2; }
.drink-tabs button small { font-size: 10.5px; font-weight: 600; color: var(--muted); }
.drink-tabs button[aria-selected="true"] { color: var(--text); background: color-mix(in srgb, var(--accent) 20%, var(--surface-2)); box-shadow: inset 0 0 0 1.5px var(--accent); }
.drink-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.drinks-all:not(.searching) .drinks-group.dg-off { display: none; }
.drinks-all:not(.searching) .drinks-group[data-dgroup] > .drinks-title { display: none; }
.drinks-all.searching .drink-tabbar { display: none; }
/* a phone's drinks as small tiles, three to a row, all of one size (a short last row too: the user wanted
   none stretched), a round + where the word was */
@media (max-width: 640px) {
  .drinks.dk-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .dk-tiles > .drink { min-width: 0; gap: 2px; padding: 10px 4px 8px; }
  .dk-tiles .drink .art { width: 46px; height: 46px; }
  .dk-tiles .drink-name { font-size: 12.5px; line-height: 1.2; min-height: 2.4em; display: grid; place-items: center; text-align: center; overflow-wrap: anywhere; }
  .dk-tiles .drink small { font-size: 10.5px; text-align: center; }
  .dk-tiles .drink-sweet { display: none; }
  .dk-tiles .da-add { font-size: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, transparent); }
  .dk-tiles .da-add::before { content: "+"; font-size: 20px; font-weight: 800; line-height: 1; color: var(--accent); }
  .dk-tiles .da-done { align-self: center; font-size: 12px; white-space: nowrap; }
  /* (the cards of a row share their rows: the names' as tall as the row's longest name, a one-line name
     right over its drawing rather than half a line above it, and the drawing as far from the name as
     from its size under it; an older iPhone keeps the names' two lines) */
  @supports (grid-template-rows: subgrid) {
    .dk-tiles > .drink { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 4px; justify-items: center; }
    .dk-tiles .drink-name { min-height: 0; align-self: end; margin-bottom: 2px; }
    .dk-tiles .drink-add { margin-top: 0; }
  }
}
/* how coffee and tea are sweetened: its title on a row, the eight choices even, four to a row, each its
   word and what it adds; on an iPad and a computer all in one row beside the title */
.sweet-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; padding: 12px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.sp-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--muted); }
.sweet-pick > .sp-label { grid-column: 1 / -1; margin: 0 2px 2px; }
.sweet-pick > .sp-chip { min-width: 0; min-height: 52px; padding: 6px 4px; border-radius: 14px; white-space: normal; text-align: center; line-height: 1.2; text-wrap: balance;
  background: var(--surface-2); }
.sweet-pick > .sp-chip[aria-checked="true"] { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
@media (min-width: 900px) {
  .sweet-pick { grid-template-columns: auto repeat(8, minmax(0, 1fr)); align-items: center; }
  .sweet-pick > .sp-label { grid-column: auto; margin: 0 2px 0 6px; }
}
.sp-chip { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-height: 40px; padding: 5px 11px; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; line-height: 1.15; cursor: pointer; }
.sp-chip small { font-size: 11px; font-weight: 600; color: var(--muted); }
.sp-chip[aria-checked="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.drink-sweet { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--accent); }

/* sugar, salt and black pepper by the teaspoon, olive oil by the spoon, first in a search: the spoons side by
   side, equal, each with its drawing, its amount and what it has (search.js stapleChips) */
.tsp-picks { display: flex; align-items: stretch; gap: 6px; margin-top: 8px; width: 100%; max-width: 340px; }
.tsp { flex: 1 1 0; min-width: 0; max-width: 118px; display: grid; justify-items: center; align-content: start; gap: 1px; padding: 6px 3px 7px; border-radius: 14px;
  border: 1.5px solid color-mix(in srgb, var(--accent) 35%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  color: var(--text); font: inherit; cursor: pointer; transition: border-color .15s, background .15s, transform .12s; -webkit-tap-highlight-color: transparent; }
.tsp-art { display: grid; place-items: center; height: 25px; color: var(--accent); }
.tsp-art svg { transform: rotate(-40deg); }
.tsp-shine { fill: var(--surface); opacity: .55; }
.tsp b { font-size: 13.5px; font-weight: 800; line-height: 1.25; white-space: nowrap; }
.tsp small { font-size: 11.5px; font-weight: 600; line-height: 1.2; color: var(--muted); white-space: nowrap; }
/* (never past its frame: on a very narrow phone the words get smaller, and cut at the very worst) */
.tsp b, .tsp small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 340px) { .tsp b { font-size: 12px; } .tsp small { font-size: 10.5px; } .tsp-picks { gap: 4px; } }
.tsp:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--surface)); }
.tsp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tsp:active { transform: scale(.95); }
.sg.staple { background: color-mix(in srgb, var(--accent) 6%, transparent); flex-wrap: wrap; row-gap: 2px; }
.sg.staple > .tsp-picks, .staple-offer > .tsp-picks { flex-basis: 100%; max-width: none; margin-top: 2px; }
.ma-staple { border-radius: 14px; background: color-mix(in srgb, var(--accent) 6%, transparent); padding-bottom: 8px; }
.ma-staple > .tsp-picks { padding-inline: 14px; margin-top: 0; }
.staple-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin: 4px 0 16px; padding: 14px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
  border: 1.5px solid color-mix(in srgb, var(--accent) 30%, var(--border)); }
.so-pic { width: 64px; height: 64px; flex: none; }
.so-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.so-text b { font-size: 17px; }
.so-text > span:not(.tsp-picks) { font-size: 13px; color: var(--muted); }

/* the clock opens today by the hour (day-hours.js) */
.top-clock { cursor: pointer; transition: background .15s, transform .15s; }
.top-clock:active { transform: scale(.96); background: rgba(255, 255, 255, .22); }
.top-clock:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.dh-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dh-sum span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; background: var(--row-alt); }
.dh-sum small { font-size: 12px; color: var(--muted); font-weight: 600; }
.dh-sum b { font-size: 19px; font-variant-numeric: tabular-nums; }
.dh-sum .left b { color: var(--good, #22a06b); }
.dh-sum .over b { color: var(--bad, #e5484d); }
.dh-chart { margin: 14px 0 0; }
.dh-svg { display: block; width: 100%; height: auto; overflow: visible; direction: ltr; }
/* (the grid's lines: not .dh-grid, the window's own layout, whose stroke reached every part of the
   charts and drew a frame round each hour and an outline on every number) */
.dh-gl { stroke: var(--border); stroke-width: 1; }
.dh-ytick, .dh-xtick { fill: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
/* the amounts inside the chart, over their lines at its start, clear of a bar behind them */
.dh-ytick { font-weight: 600; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.dh-water .dh-ytick { stroke: color-mix(in srgb, #3a96ee 7%, var(--surface)); }
.dh-run { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; }
.dh-budget { stroke: var(--text); stroke-width: 1.4; stroke-dasharray: 5 4; opacity: .55; }
.dh-budget-label { fill: var(--muted); font-size: 10.5px; font-weight: 700; }
.dh-now { stroke: #f43f5e; stroke-width: 1.6; stroke-dasharray: 3 3; }
.dh-now-dot { fill: #f43f5e; stroke: var(--surface); stroke-width: 2; }
.dh-now-label { fill: #f43f5e; font-size: 10.5px; font-weight: 800; }
.dh-bar { cursor: pointer; }
.dh-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.dh-legend span { display: inline-flex; align-items: center; gap: 5px; }
.dh-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--meal); }
.dh-legend i.run { height: 3px; border-radius: 2px; background: var(--accent); }
.dh-notes { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dh-notes li { padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.dh-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dh-list li { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--row-alt); transition: box-shadow .2s, background .2s; }
.dh-list li.on { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); box-shadow: inset 0 0 0 1.5px var(--accent); }
.dh-time { font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; min-width: 46px; }
.dh-what { font-size: 13.5px; line-height: 1.55; min-width: 0; overflow-wrap: anywhere; }
.dh-what i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--meal); margin-inline-end: 6px; }
.dh-list b { font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dh-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 18px; text-align: center; color: var(--muted); line-height: 1.5; }

/* a fast until the morning: a wide card over the plans, and the hour it ends */
.plan-morning { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; padding: 14px 16px; text-align: start;
  border-color: color-mix(in srgb, #7c5cff 45%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, #7c5cff 12%, var(--surface)), var(--surface)); }
.pm-art { flex: none; }
.pm-text { display: flex; flex-direction: column; gap: 2px; }
.pm-text b { font-size: 18px; color: #8b6cff; }
.pm-text small { color: var(--muted); }
.fm-hours { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.fm-hours .sp-chip { min-height: 44px; font-size: 15px; }

/* the water in the AI summary, counted */
.as-water { margin-top: 14px; padding: 14px; border-radius: 16px; background: color-mix(in srgb, #0ea5e9 9%, var(--surface)); }
.as-water h5 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; }
.as-water .as-ico { color: #0ea5e9; }
.aw-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.aw-grid > div { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 12px; background: var(--surface); }
.aw-grid small { font-size: 12px; color: var(--muted); font-weight: 600; }
.aw-grid b { font-size: 16px; font-variant-numeric: tabular-nums; }
.aw-bar { height: 8px; margin-top: 12px; border-radius: 999px; background: var(--track); overflow: hidden; }
.aw-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7cc8ff, var(--wc)); }
.aw-goal { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.aw-guide, .aw-note { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; }

/* the voice and photo confirm list: the portion on its own line, then + and − around the amount and
   its calories; the total a little apart from the list */
.confirm-portion { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.confirm-portion > select { grid-column: 1 / -1; width: 100%; min-width: 0; }
.cf-stepper { align-self: center; }
.cf-stepper button { width: 38px; height: 38px; border-radius: 50%; }
.cf-stepper button:disabled { opacity: .4; cursor: default; }
.confirm-portion .cf-stepper input { width: 64px; padding: 6px 4px; border: 0; background: transparent; text-align: center; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.cf-stepper input::-webkit-inner-spin-button, .cf-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.confirm-portion .confirm-kcal { justify-self: end; white-space: nowrap; }
.confirm-list + .entry-total { margin-top: 16px; }
/* a dish's or a meal's star, at the end of its total */
.entry-total .cf-fav { margin-inline-start: auto; align-self: center; min-height: 38px; padding: 6px 14px; font-size: 14px; }

/* the activity page's hero in four looks, picked with the button in its corner */
.ah-main { position: relative; }
.ah-main > .hs-pick { top: -4px; left: 0; }
.ah-main .hs-switch { color: var(--hx-ink, #fff); background: var(--hx-glass, rgba(255, 255, 255, .14)); border-color: var(--hx-line-2, rgba(255, 255, 255, .25)); box-shadow: var(--hx-btn-shadow, none); }
.ah-body { display: flex; align-items: center; justify-content: center; gap: 36px; flex-wrap: wrap; width: 100%; }
.ah-body.look-bars, .ah-body.look-cards { flex-direction: column; gap: 20px; }
/* the day's active calories over the bars and the cards: a flame's badge, the number, the share of the goal */
.ah-total { display: inline-flex; align-items: center; gap: 18px; padding: 14px 26px 14px 14px; border-radius: 24px; line-height: 1.1; color: var(--hx-ink, #fff);
  background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 8px 22px rgba(0, 0, 0, .12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.aht-ico { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
  background: linear-gradient(160deg, #ffb347, #ff5a36); box-shadow: 0 6px 16px rgba(255, 90, 54, .45), inset 0 1px 0 rgba(255, 255, 255, .45); }
.aht-ico svg { width: 26px; height: 26px; }
.aht-txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.aht-num { display: flex; align-items: baseline; gap: 8px; }
.aht-num b { font-size: 36px; font-weight: 800; letter-spacing: -.5px; font-variant-numeric: tabular-nums;
  background: var(--hx-big, linear-gradient(180deg, #fff 30%, #ffd9b8)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.aht-num small { font-size: 15px; font-weight: 600; opacity: .85; }
.aht-sub { font-size: 13px; opacity: .85; }
.aht-sub em { font-style: normal; font-weight: 700; color: #ffd0a8; }
.ah-bars { width: min(100%, 420px); }
.hx-hero .ah-bars li { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.ah-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: min(100%, 420px); }
.ah-card { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 18px; color: var(--hx-ink, #fff);
  background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ah-card svg { flex: none; }
.ah-card > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.ah-card small { font-size: 12.5px; opacity: .8; }
.ah-card b { font-size: 21px; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--rc) 35%, #fff); }
.ah-card em { font-style: normal; font-size: 11.5px; opacity: .75; }
.look-week .sr-week { margin-top: 6px; }
.ah-card b small { font-size: 12px; font-weight: 500; opacity: .7; color: #fff; }
@media (max-width: 560px) {
  .ah-body { gap: 16px; padding-top: 22px; }
  .ah-body:is(.look-bars, .look-cards, .look-week) { padding-top: 42px; }
}

/* a page's closing note (the activity page): apart from what comes before it */
.page-disclaimer { margin: 28px 0 12px; }
.page-disclaimer p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.6; color: color-mix(in srgb, var(--text) 85%, var(--muted)); }
.page-disclaimer p:last-child { margin-bottom: 0; }
/* the activity page's note: its X at the title's far end folds it to the title; folded, a tap on it
   opens it again (health-page.js wireActNote) */
.page-disclaimer .pd-text { flex: 1; min-width: 0; }
.page-disclaimer .pd-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; margin-bottom: 4px; }
.page-disclaimer .pd-head b { margin: 0; }
.pd-toggle { position: relative; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: color-mix(in srgb, #b45309 80%, var(--text)); background: color-mix(in srgb, #f59e0b 16%, transparent); }
.pd-toggle::before { content: ""; position: absolute; inset: -6px; }
@media (hover: hover) { .pd-toggle:hover { background: color-mix(in srgb, #f59e0b 26%, transparent); } }
.page-disclaimer.shut { align-items: center; cursor: pointer; }
.page-disclaimer.shut .pd-head { margin-bottom: 0; }

/* the next meal's tile when the day's calories are used up: a drawing for the case, and light foods */
.next-end .end-art { flex: none; display: grid; place-items: center; }
.next-end.end-reached .tile-num b { color: #22a06b; }
.next-end.end-over .tile-num b { color: #d9822b; }
.next-end.end-well .tile-num b { color: #e5484d; }
.light-foods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 2px; }
.light-foods a { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 7px 10px; border-radius: 12px; text-decoration: none; color: var(--text);
  background: color-mix(in srgb, var(--meal, var(--accent)) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--meal, var(--accent)) 18%, var(--border)); }
.light-foods b { font-size: 13px; font-weight: 600; }
.light-foods small { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

/* the admin screen: an address not confirmed, and confirming it by hand */
.pill-mail { display: inline-flex; margin-inline-start: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; vertical-align: 1px; color: #9a3412; background: #ffedd5; }
.adm-ud-verify { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--border); }
.adm-ud-verify.ok { background: color-mix(in srgb, #22a06b 8%, var(--surface)); border-color: color-mix(in srgb, #22a06b 30%, var(--border)); }
.adm-ud-verify.no { background: color-mix(in srgb, #f08a24 8%, var(--surface)); border-color: color-mix(in srgb, #f08a24 32%, var(--border)); }
.adm-ud-verify .av-ico { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; }
.adm-ud-verify.ok .av-ico { background: #22a06b; }
.adm-ud-verify.no .av-ico { background: #f08a24; }
.adm-ud-verify .av-text { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-ud-verify .btn { margin-inline-start: auto; }

/* the activities' grid ends even, however many it offers (it changes with the limit on moving):
   the last tile takes the rest of its row, five to a row and, on a phone, three */
.act-grid > .act-tile:last-child:nth-child(5n+1) { grid-column: 1 / -1; }
.act-grid > .act-tile:last-child:nth-child(5n+2) { grid-column: span 4; }
.act-grid > .act-tile:last-child:nth-child(5n+3) { grid-column: span 3; }
.act-grid > .act-tile:last-child:nth-child(5n+4) { grid-column: span 2; }
@media (max-width: 520px) {
  .act-grid > .act-tile:last-child { grid-column: auto; }
  .act-grid > .act-tile:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .act-grid > .act-tile:last-child:nth-child(3n+2) { grid-column: span 2; }
}

/* the food search's card: "to the diary" on one side, the star on the other */
.fx-card-acts { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.fx-fav { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; margin-inline-start: auto; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted); font: inherit; font-weight: 700; font-size: 14px; transition: color .2s, background .2s, border-color .2s; }
.fx-fav:active { transform: scale(.96); }
.fx-fav.on { color: #e0a100; border-color: color-mix(in srgb, #f5b52e 55%, var(--border)); background: color-mix(in srgb, #f5b52e 12%, var(--surface)); }
.fx-fav.on svg { animation: fav-pop .35s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes fav-pop { from { transform: scale(.6) rotate(-20deg); } }
@media (prefers-reduced-motion: reduce) { .fx-fav.on svg { animation: none; } }

/* the watch in the settings: a card, the source and its state on top, the buttons across */
.health-card { display: grid; gap: 10px; padding: 16px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--border); }
.health-card.on { border-color: color-mix(in srgb, #e5487f 28%, var(--border)); background: linear-gradient(160deg, color-mix(in srgb, #e5487f 8%, var(--surface-2)), var(--surface-2) 60%); }
.hcard-top { display: flex; align-items: center; gap: 12px; }
.hcard-ico { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #ff6b8b, #e5487f); box-shadow: 0 6px 16px color-mix(in srgb, #e5487f 30%, transparent); }
.health-card.off .hcard-ico { background: var(--muted); box-shadow: none; }
.hcard-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hcard-title b { font-size: 17px; line-height: 1.2; }
.hcard-state { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent); }
.health-card.on .hcard-state { color: #1f9d63; background: color-mix(in srgb, #22a06b 14%, transparent); }
.hcard-state i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent); }
.hcard-sub { margin: 0; font-size: 14px; line-height: 1.55; color: color-mix(in srgb, var(--text) 85%, var(--muted)); }
.hcard-when { display: flex; align-items: center; gap: 6px; margin: -2px 0 0; font-size: 13px; color: var(--muted); }
.hcard-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.hcard-acts .btn { justify-content: center; min-height: 44px; white-space: nowrap; }
/* the sync at work (settings.js drawHealth): its arrows turn and a light runs along its foot */
.hc-sync { position: relative; overflow: hidden; }
.hc-sync.hc-busy, .hc-sync.hc-busy:disabled { opacity: 1; cursor: progress; }
.hc-sync.hc-busy svg { animation: auth-spin-r .9s linear infinite; }
.hc-sync.hc-busy::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent) no-repeat; background-size: 45% 100%; animation: hc-run 1.1s ease-in-out infinite; }
@keyframes hc-run { from { background-position: -60% 0; } to { background-position: 160% 0; } }
@media (prefers-reduced-motion: reduce) { .hc-sync.hc-busy svg, .hc-sync.hc-busy::after { animation: none; } }

/* "work it out for me" in the goals' editors: a button, then the goal with its reasons */
.gs { display: grid; gap: 10px; margin-top: 16px; }
.gs-go { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 16px; border-radius: 14px; cursor: pointer; font: inherit; font-weight: 700;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, var(--border)); }
.gs-go:active { transform: scale(.98); }
.gs-go.busy { opacity: .6; cursor: progress; }
.gs-out { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  animation: gs-in .3s ease-out; }
@keyframes gs-in { from { opacity: 0; transform: translateY(-6px); } }
/* (its goal used: the box closes, profile.js renderGoal) */
.gs-out.gs-shut { animation: gs-shut .22s ease-in forwards; }
@keyframes gs-shut { to { opacity: 0; transform: translateY(-6px) scale(.98); } }
.gs-value { display: flex; align-items: baseline; justify-content: center; gap: 8px; flex-wrap: wrap; }
.gs-value small { flex-basis: 100%; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.gs-value b { font-size: 34px; font-variant-numeric: tabular-nums; color: var(--accent); line-height: 1.1; }
.gs-value span { font-size: 14px; color: var(--muted); }
.gs-why { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.gs-why li { position: relative; padding-inline-start: 18px; font-size: 13.5px; line-height: 1.55; }
.gs-why li::before { content: ""; position: absolute; inset-inline-start: 4px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.gs-src { margin: 0; font-size: 11.5px; color: var(--muted); }
.gs-out .gs-use { width: 100%; }
input.gs-set, .goal-total.gs-set { animation: gs-flash .7s ease-out; }
.goal-total.gs-set { border-radius: 16px; }
@keyframes gs-flash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
@media (prefers-reduced-motion: reduce) { .gs-out, .gs-out.gs-shut, input.gs-set, .goal-total.gs-set { animation: none; } }
.gs-macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.gs-macros span { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 12px; font-size: 12px; color: var(--muted); background: var(--surface); text-align: center; }
.gs-macros b { font-size: 18px; color: var(--text); font-variant-numeric: tabular-nums; }
.gs-macros .m-protein b { color: var(--protein, #e0a100); }
.gs-macros .m-carbs b { color: var(--carbs, #0fb5a6); }
.gs-macros .m-fat b { color: var(--fat, #8b6cf6); }
.gs-miss { margin: 0; font-size: 14px; }
#goalKcal.gs-set { animation: gs-pop .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes gs-pop { 40% { transform: scale(1.12); color: var(--accent); } }

/* the wizard's limit on moving: four chips, two to a row, each with its figure */
.wz-mob { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wz-mob .wz-chip span { gap: 3px; min-height: 100%; }
.wz-mob .act-mini { margin-bottom: 2px; }
.wz-opt { font-style: normal; font-size: 13px; font-weight: 500; color: var(--muted); margin-inline-start: 4px; }
.wz-hint { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
/* the profile picture in the wizard (welcome.js photoField): the round picture, its choices beside it */
.wz-photo-row { display: flex; align-items: center; gap: 14px; }
.wz-avatar { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; color: #fff; font-size: 26px; font-weight: 700;
  background: linear-gradient(160deg, #ffb86b, #f06f8f); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px color-mix(in srgb, var(--accent) 40%, transparent); }
.wz-avatar.has-photo { background: var(--surface); }
.wz-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.wz-photo-acts { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.wz-photo-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text); border: 1.5px solid var(--border); background: var(--surface); }
.wz-photo-btn:disabled { opacity: .6; cursor: default; }
.me-apple { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.5; }

/* the time an item was written ("הצגת שעות ביומן"): a small chip with a clock, under its portion */
.e-time { display: inline-flex; align-items: center; gap: 4px; width: fit-content; margin-top: 5px; padding: 2px 8px 2px 7px; border-radius: 999px;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .3px; line-height: 1.4;
  color: color-mix(in srgb, var(--accent) 80%, var(--text)); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.e-time .icon, .e-time svg { flex: none; opacity: .85; }

/* the profile menu's head: the close at its far side, apart from the name */
/* the picture and the name lead to the profile */
.menu-head-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; margin: -6px; padding: 6px; border-radius: 16px; color: inherit; text-decoration: none; transition: background .15s; }
.menu-head-link:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.menu-head-link:active { transform: scale(.98); }
.menu-head-link > div { display: flex; flex-direction: column; min-width: 0; }
.menu-head .menu-close { flex: none; align-self: flex-start; margin-inline-start: 8px; }

/* the food search's card: the price on a line of its own, the price for 100 g beside it */
.fx-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 3px; font-size: 13px; font-weight: 700; color: color-mix(in srgb, #22a06b 80%, var(--text)); }
.fx-price em { font-style: normal; font-weight: 500; font-size: 12px; color: var(--muted); }
.me-google { display: inline-flex; align-items: center; gap: 5px; }
.me-actions { flex-wrap: wrap; row-gap: 4px; }

/* the water page: the glass beside the amount and its + and −, the bar under them, all in the
   first screen; the title above in a line and a half */
.water-top h3 { margin: 0; font-size: 21px; }
.water-top p { margin: 2px 0 0; }
.water-main { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; margin: 10px auto 4px; max-width: 460px; }
.water-main .water-hero-wrap { margin: 0; }
.water-side { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.water-side .big-value { min-width: 0; width: 100%; max-width: 200px; padding: 10px 12px; }
.water-side .big-value b { font-size: 40px; }
.water-btns { display: flex; justify-content: center; gap: 14px; }
.water-btns .round-btn.big { width: 62px; height: 62px; font-size: 30px; }
.water-step { font-size: 12.5px; color: var(--muted); }
.water-page .water-bar { margin-top: 8px; }
@media (max-width: 360px) { .water-btns .round-btn.big { width: 54px; height: 54px; } .water-side .big-value b { font-size: 34px; } }

/* ---------- the road to the goal (journey.js) ---------- */
.jr-hero { padding: 16px; overflow: hidden; }
.jr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.jr-level { display: flex; align-items: center; gap: 12px; min-width: 0; }
.jr-lv-num { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; font-size: 27px; font-weight: 900; color: #7a4b00;
  background: linear-gradient(145deg, #fff1a8, #ffc928 55%, #f5a300); box-shadow: 0 8px 20px rgba(245, 163, 0, .35), inset 0 -3px 0 rgba(0, 0, 0, .12); }
.jr-level > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jr-level small { font-size: 12px; color: var(--muted); }
.jr-level b { font-size: 19px; font-weight: 800; }
.jr-lv-bar { display: block; width: min(210px, 44vw); height: 8px; margin: 3px 0 1px; border-radius: 999px; background: var(--track); overflow: hidden; }
.jr-lv-bar i { display: block; width: var(--to); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff9f1c, #ffd54a); animation: jr-grow 1.4s .5s cubic-bezier(.22, 1, .36, 1) both; }
.jr-points { flex: none; display: flex; flex-direction: column; align-items: center; padding: 8px 16px; border-radius: 18px; color: #fff;
  background: linear-gradient(145deg, #2a1f5c, #5a35d6); box-shadow: 0 10px 24px rgba(90, 53, 214, .35); }
.jr-points span { color: #ffd54a; font-size: 18px; line-height: 1; filter: drop-shadow(0 0 6px rgba(255, 213, 74, .8)); animation: jr-twinkle 2.4s ease-in-out infinite; }
.jr-points b { font-size: 25px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.jr-points small { font-size: 11.5px; opacity: .85; }

/* the scene: a game's world map from above, a trail with its stations up to the castle (journey.js) */
.jr-scene { position: relative; max-width: 560px; margin: 0 auto; border-radius: 24px; overflow: hidden; isolation: isolate;
  box-shadow: 0 0 0 4px #fff7e0, 0 0 0 6px #d9b56f, 0 16px 34px rgba(0, 0, 0, .28); }
.jr-scene svg { display: block; width: 100%; height: auto; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .jr-scene { box-shadow: 0 0 0 4px #3b3324, 0 0 0 6px #8a6d3b, 0 16px 34px rgba(0, 0, 0, .5); }
  :root:not([data-theme="light"]) .jr-scene svg { filter: brightness(.88) saturate(1.05); } }
:root[data-theme="dark"] .jr-scene { box-shadow: 0 0 0 4px #3b3324, 0 0 0 6px #8a6d3b, 0 16px 34px rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .jr-scene svg { filter: brightness(.88) saturate(1.05); }
.jm-patches ellipse { fill: #b6e48a; opacity: .45; }
.jm-tuft { fill: none; stroke: #3f8f3a; stroke-width: 1.3; stroke-linecap: round; opacity: .65; }
.jm-snow { fill: #fff; }
.jm-foothill { fill: #8fd068; }
.jm-river-bank { fill: none; stroke: #ead9a8; stroke-width: 46; stroke-linecap: round; stroke-linejoin: round; }
.jm-river { fill: none; stroke: url(#jmWater); stroke-width: 34; stroke-linecap: round; stroke-linejoin: round; }
.jm-waves { fill: none; stroke: rgba(255, 255, 255, .65); stroke-width: 2; stroke-dasharray: 8 14; stroke-linecap: round; }
.jm-sand { fill: #efdcae; }
.jm-ripple { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: jm-ripple 3s ease-in-out infinite; }
.jm-ripple.r2 { animation-delay: -1.5s; }
.jm-lily { fill: #3f9a4a; stroke: #2f7f3a; stroke-width: .8; }
.jm-rock { fill: #b3aca6; stroke: #7c746d; stroke-width: 1; }
.jm-path-edge { fill: none; stroke: #c8a265; stroke-width: 21; stroke-linecap: round; stroke-linejoin: round; }
.jm-path { fill: none; stroke: #f5e4b8; stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.jm-steps { fill: none; stroke: #d3b075; stroke-width: 3.2; stroke-dasharray: 1 10; stroke-linecap: round; }
.jm-walked { fill: none; stroke: url(#jmWalked); stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255, 190, 40, .95)); }
.jm-bridge { fill: #9b6a3a; } .jm-plank { fill: #c58f55; } .jm-rail { fill: #6f4523; }
.jm-shadow { fill: rgba(20, 50, 10, .22); }
.jm-crown { fill: #3f9f4a; } .jm-crown-dark { fill: #2b7a37; opacity: .55; } .jm-crown-light { fill: #9be07a; opacity: .7; }
.t1 .jm-crown { fill: #4cb05a; } .t2 .jm-crown { fill: #2f8f55; }
.jm-flower.f0 { fill: #ff7aa8; } .jm-flower.f1 { fill: #ffd54a; } .jm-flower.f2 { fill: #fff; } .jm-flower.f3 { fill: #c084fc; }
.jm-tent { fill: #f97316; } .jm-tent-dark { fill: #c2410c; }
.jm-fire { transform-box: fill-box; transform-origin: 50% 100%; animation: jm-flicker .45s ease-in-out infinite alternate; }
.jm-fire.f2 { animation-delay: -.2s; }
.jm-wall { fill: #ece8e4; stroke: #a8a29e; stroke-width: 1; } .jm-tower { fill: #dcd7d2; stroke: #a8a29e; stroke-width: 1; } .jm-roof { fill: #3b82f6; stroke: #1e40af; stroke-width: 1; }
.jm-pennant { transform-box: fill-box; transform-origin: 0% 50%; animation: jr-wave 1.4s ease-in-out infinite; }
.jm-pennant.p2 { animation-delay: -.7s; }
.jm-goal-glow { transform-box: fill-box; transform-origin: center; animation: jr-glow 2.6s ease-in-out infinite; }
.jm-sparkle { animation: jm-twinkle 2s calc(var(--i) * .5s) ease-in-out infinite; }
/* the map's moving parts, each a small layer of its own over the drawing (journey.js sprite): moved by
   the browser's compositor, the map itself never drawn again for them */
.jm-life { position: absolute; inset: 0; pointer-events: none; }
.jr-scene .jm-sprite { position: absolute; display: block; }
.jr-scene .jm-sprite > svg { width: 100%; height: 100%; overflow: visible; }
/* the river's dashes sway along it, the layer moved to and fro: their flow along the path (the dashes
   moved inside the drawing) had them drawn again every frame, most of what the map cost */
.jm-waves-layer { animation: jm-sway 3.2s ease-in-out infinite alternate; }
@keyframes jm-sway { from { translate: -7px 0; } to { translate: 7px 0; } }
/* the map laid out across (a tablet, a computer): wider, its river down it swaying along it */
.jr-scene.wide { max-width: 980px; }
.jm-waves-layer.v { animation-name: jm-sway-v; }
@keyframes jm-sway-v { from { translate: 0 -7px; } to { translate: 0 7px; } }
.jm-cloud circle, .jm-cloud ellipse { fill: #fff; }
.jm-cloud .jm-cloud-shade { fill: rgba(40, 70, 110, .16); }
.jm-cloud { animation: jr-drift 14s ease-in-out infinite alternate; }
.jm-cloud.c2 { animation-duration: 19s; animation-delay: -5s; } .jm-cloud.c3 { animation-duration: 16s; animation-delay: -9s; }
/* the stations: round game buttons, grey ahead, gold when passed, blue and pulsing for the next */
.jr-stops { position: absolute; inset: 0; pointer-events: none; }
.jr-stop { position: absolute; z-index: 2; width: 0; height: 0; }
.jr-stop > i { position: absolute; left: -21px; top: -25px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 2.5px solid #fff;
  font-style: normal; font-size: 17px; font-weight: 900; color: #475569;
  background: radial-gradient(circle at 34% 28%, #fff 0 13%, #f1f5f9 14%, #cbd5e1 68%, #94a3b8);
  box-shadow: 0 5px 0 #64748b, 0 10px 14px rgba(0, 0, 0, .32), inset 0 -3px 5px rgba(0, 0, 0, .12);
  animation: jr-pop .45s calc(.3s + var(--i) * .12s) cubic-bezier(.3, 1.6, .5, 1) both; }
.jr-stop.lit > i { color: #7a4b00; background: radial-gradient(circle at 34% 28%, #fffbe0 0 13%, #ffe27a 14%, #ffc928 55%, #f5a300);
  box-shadow: 0 5px 0 #b56d00, 0 10px 16px rgba(181, 109, 0, .45), 0 0 20px rgba(255, 200, 40, .65); }
.jr-stop.next > i { color: #fff; background: radial-gradient(circle at 34% 28%, #e0f2ff 0 11%, #60a5fa 12%, #2563eb 68%, #1e40af);
  box-shadow: 0 5px 0 #1e3a8a, 0 10px 16px rgba(30, 64, 175, .45); }
/* the stations still locked a little see-through (option ב, 1.208.1): the next one and the ones won stay whole */
.jr-stop > i { transition: opacity .35s; }
.jr-stop:not(.lit):not(.next) > i { opacity: .55; }
.jr-stop.next::before { content: ""; position: absolute; left: -31px; top: -35px; width: 62px; height: 62px; border-radius: 50%;
  border: 3px solid rgba(96, 165, 250, .75); animation: jm-pulse 1.8s ease-out infinite; }
.jr-stop.lit::after { content: ""; position: absolute; left: -27px; top: -31px; width: 54px; height: 54px; border-radius: 50%; border: 3px solid #ffd54a; opacity: 0; animation: jr-burst .8s ease-out; }
.jr-stop.goal > i { left: -26px; top: -30px; width: 52px; height: 52px; font-size: 24px; }
.jr-stop.first > i { font-size: 19px; }
.jr-label { position: absolute; top: 24px; left: 0; translate: -50% 0; display: flex; flex-direction: column; align-items: center; padding: 3px 10px; border-radius: 999px;
  white-space: nowrap; font-size: 11.5px; font-weight: 800; line-height: 1.2; color: #3b2a12; background: #fff8e6; border: 1.5px solid #e2c48a;
  box-shadow: 0 3px 8px rgba(60, 40, 10, .25); animation: jr-fade .4s calc(.5s + var(--i) * .12s) ease-out both; }
.jr-stop.goal .jr-label { top: 30px; }
.jr-label small { font-size: 10px; font-weight: 600; color: #8a6d3b; }
.jr-stop.lit .jr-label { background: #fff1b8; border-color: #f5b301; }
@keyframes jm-ripple { 0%, 100% { opacity: .2; scale: .8; } 50% { opacity: .9; scale: 1.15; } }
@keyframes jm-flicker { from { scale: .85 1; } to { scale: 1.1 1.15; } }
@keyframes jm-twinkle { 0%, 100% { opacity: .2; scale: .6; } 50% { opacity: 1; scale: 1.2; } }
@keyframes jm-pulse { 0% { opacity: .9; scale: .8; } 100% { opacity: 0; scale: 1.35; } }
/* the person: their picture on a pin, walking up the road */
.jr-me { position: absolute; z-index: 3; width: 0; height: 0; transform: scale(var(--k, 1)); transform-origin: 0 0; }
.jr-me::before { content: ""; position: absolute; left: -12px; top: -4px; width: 24px; height: 8px; border-radius: 50%; background: rgba(0, 0, 0, .3); }
.jr-me::after { content: ""; position: absolute; left: -7px; top: -14px; border: 7px solid transparent; border-top: 9px solid #fff; border-bottom: 0; }
.jr-face { position: absolute; left: -24px; top: -62px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; overflow: hidden;
  color: #fff; font-size: 20px; font-weight: 800; background: linear-gradient(145deg, var(--accent), #0e7a57); border: 3px solid #fff; box-shadow: 0 8px 18px rgba(0, 0, 0, .3); }
.jr-face img { width: 100%; height: 100%; object-fit: cover; }
.jr-here { position: absolute; left: 0; top: -88px; translate: -50% 0; padding: 2px 9px; border-radius: 999px; white-space: nowrap; font-size: 11px; font-weight: 800;
  color: #5a3a00; background: #ffd54a; box-shadow: 0 4px 10px rgba(0, 0, 0, .2); opacity: 0; transition: opacity .4s; }
.jr-me.arrived .jr-here { opacity: 1; }
/* where a station or its label is over the face (journey.js placeHere): beside the face, or under the pin */
.jr-here.jh-left { top: -45px; left: -28px; translate: -100% 0; }
.jr-here.jh-right { top: -45px; left: 28px; translate: 0 0; }
.jr-here.jh-below { top: 8px; }
.jr-me.arrived .jr-face { animation: jr-bob 2.2s ease-in-out infinite; }
/* the day's score under the map, as a game's (journey.js stagesOf): counters, the five steps to the
   castle with the next one beating, the quest */
.jr-status { margin: 14px 0 0; }
.jr-hud { display: grid; gap: 12px; justify-items: center; }
.jr-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; width: 100%; max-width: 380px; }
.jr-stat { --cc: #f59e0b; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0; padding: 9px 6px 8px; border-radius: 16px; line-height: 1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 22%, transparent), color-mix(in srgb, var(--cc) 10%, transparent));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cc) 38%, transparent), 0 3px 0 color-mix(in srgb, var(--cc) 22%, transparent); }
.jr-stat .js-top { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.jr-stat i { font-style: normal; font-size: 16px; }
.jr-stat b { font-size: 19px; font-weight: 900; color: color-mix(in srgb, var(--cc) 75%, var(--text)); font-variant-numeric: tabular-nums; }
.jr-stat b em { font-style: normal; font-size: 13px; font-weight: 700; opacity: .7; }
.jr-stat small { font-size: 12px; font-weight: 700; color: var(--muted); }
.jr-stat.c-stage { --cc: #ef4444; }
.jr-stat.c-wins { --cc: #f59e0b; }
.jr-stat.c-weight { --cc: #3b82f6; }
.jr-pips { display: flex; align-items: center; gap: 6px; }
.jr-pips i { width: 30px; height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--text) 12%, transparent); }
.jr-pips i.on { background: linear-gradient(180deg, #fde68a, #f59e0b); box-shadow: 0 0 10px rgba(245, 158, 11, .45); }
.jr-pips i.next { background: color-mix(in srgb, #f59e0b 30%, transparent); animation: jr-pip 1.4s ease-in-out infinite; }
@keyframes jr-pip { 50% { background: color-mix(in srgb, #f59e0b 60%, transparent); } }
.jr-pip-castle { margin-inline-start: 2px; font-size: 20px; filter: grayscale(.85); opacity: .55; }
.jr-pip-castle.on { filter: none; opacity: 1; animation: jr-castle 2.2s ease-in-out infinite; }
@keyframes jr-castle { 50% { transform: translateY(-2px) scale(1.08); } }
.jr-quest { display: flex; align-items: flex-start; gap: 8px; max-width: 34em; margin: 0; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.55;
  color: color-mix(in srgb, var(--text) 85%, var(--muted)); background: color-mix(in srgb, var(--text) 5%, transparent); }
.jr-quest > span:first-child { font-size: 17px; line-height: 1.3; }
.jr-quest b { color: #d97706; }
.jr-quest.won { background: linear-gradient(135deg, color-mix(in srgb, #f59e0b 22%, transparent), color-mix(in srgb, #fde68a 12%, transparent)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #f59e0b 40%, transparent); }
/* a day of less healthy food: the way closed (journey.js poorDay) */
.jr-quest.locked, .jr-nw-lock { background: color-mix(in srgb, #e63e11 11%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #e63e11 34%, transparent); }
.jr-quest.locked b, .jr-nw-lock b { color: #e2492a; }
.jr-nw-lock { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.55; }
.jr-nw-lock > span:first-child { font-size: 16px; line-height: 1.35; }
/* the sport's XP of a day of less healthy food, kept for the next day of good food (journey.js keepSport) */
.jr-nw-kept { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.55;
  background: color-mix(in srgb, #f08a24 10%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #f08a24 30%, transparent); }
.jr-nw-kept.in { background: color-mix(in srgb, #16a34a 11%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #16a34a 32%, transparent); }
.jr-nw-kept > span:first-child { font-size: 16px; line-height: 1.35; }
.jr-today > .jr-nw-kept { margin: 0 0 10px; }
/* the day's tally: a strip across under the title, as wide as the badges under it (not a pill
   that wrapped into the title's corner) */
.jr-today > .jr-sec-head { display: block; }
.jr-today > .jr-sec-head .jr-chip { display: block; margin-top: 10px; padding: 9px 14px; border-radius: 18px; }
@media (prefers-reduced-motion: reduce) { .jr-pips i.next, .jr-pip-castle.on { animation: none; } }

/* today, the health picture, the good moments */
.jr-sec-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 12px; }
.jr-sec-head h3 { margin: 0; }
.jr-chip { padding: 4px 11px; border-radius: 999px; font-size: 13px; background: color-mix(in srgb, #f5a524 16%, transparent); }
.jr-chip b { color: #d97706; }
.jr-badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.jr-badge { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 14px 10px 12px; border-radius: 18px; text-align: center; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border); animation: jr-rise .5s calc(.2s + var(--i) * 70ms) ease-out both; }
.jr-badge b { font-size: 14px; line-height: 1.25; }
.jr-badge small { font-size: 12px; color: var(--muted); }
.jr-b-art { position: relative; display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 4px; border-radius: 50%;
  background: color-mix(in srgb, var(--c) 14%, transparent); filter: grayscale(.75); opacity: .7; }
.jr-badge.ok .jr-b-art { filter: none; opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, #ffc928 60%, transparent), 0 6px 16px color-mix(in srgb, var(--c) 30%, transparent); }
.jr-b-check { position: absolute; bottom: -3px; inset-inline-end: -3px; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%;
  font-style: normal; font-size: 12px; font-weight: 900; color: #fff; background: #22a06b; border: 2px solid var(--surface-2); }
.jr-badge.ok { border-color: color-mix(in srgb, #ffc928 55%, var(--border)); }
.jr-badge.ok::after { content: ""; position: absolute; inset: 0; pointer-events: none; translate: -130% 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .3) 50%, transparent 65%); animation: jr-shine 4s calc(1s + var(--i) * .35s) ease-in-out infinite; }
.jr-b-bar { width: 80%; height: 5px; margin-top: 6px; border-radius: 999px; background: var(--track); overflow: hidden; }
.jr-b-bar i { display: block; width: var(--to); height: 100%; border-radius: inherit; background: var(--c); animation: jr-grow 1s .5s ease-out both; }
.jr-h-top { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.jr-score { position: relative; flex: none; width: 96px; height: 96px; }
.jr-score svg { width: 100%; height: 100%; }
.jr-ring-track { fill: none; stroke: var(--track); stroke-width: 8; }
.jr-ring { fill: none; stroke-width: 8; stroke-linecap: round; animation: jr-ring 1.2s .3s ease-out both; }
.jr-score > span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.jr-score b { font-size: 27px; font-weight: 900; } .jr-score small { font-size: 11px; color: var(--muted); }
.jr-h-words { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.jr-h-words small { font-size: 12.5px; color: var(--muted); } .jr-h-words b { font-size: 22px; font-weight: 800; }
.jr-bmi { align-self: flex-start; padding: 2px 9px; border-radius: 999px; font-size: 13px; background: var(--row-alt); }
.jr-bars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin-bottom: 16px; }
.jr-bar { display: grid; grid-template-columns: 7em minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.jr-bar > span:first-child { display: flex; flex-direction: column; font-size: 14px; font-weight: 700; line-height: 1.25; }
.jr-bar > span:first-child small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.jr-bar-track { height: 9px; border-radius: 999px; background: var(--track); overflow: hidden; }
.jr-bar-track i { display: block; width: var(--to); height: 100%; border-radius: inherit; background: #22a06b; animation: jr-grow 1s .3s ease-out both; }
.jr-bar.warn .jr-bar-track i { background: #f59e0b; }
.jr-bar b { min-width: 3ch; text-align: end; font-variant-numeric: tabular-nums; }
.jr-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.jr-fix, .jr-good { padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, #e5484d 7%, transparent); }
.jr-good { background: color-mix(in srgb, #22a06b 9%, transparent); }
.jr-fix h4, .jr-good h4 { margin: 0 0 10px; font-size: 15px; }
.jr-fix ul, .jr-good ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.jr-fix li, .jr-good li { display: flex; align-items: flex-start; gap: 10px; }
.jr-fix li > svg, .jr-good li > svg { flex: none; }
.jr-fix li > span, .jr-good li > span { display: flex; flex-direction: column; gap: 2px; }
.jr-fix b, .jr-good b { font-size: 14px; } .jr-fix small { font-size: 12.5px; color: var(--muted); }
.jr-line { position: relative; display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.jr-line::before { content: ""; position: absolute; top: 10px; bottom: 10px; inset-inline-start: 21px; width: 3px; border-radius: 3px; background: linear-gradient(#ffd54a, color-mix(in srgb, #f59e0b 30%, transparent)); }
.jr-line li { position: relative; display: flex; align-items: center; gap: 12px; animation: jr-in .5s calc(.2s + var(--i) * 90ms) ease-out both; }
.jr-node { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 40%, transparent), 0 4px 12px color-mix(in srgb, var(--c) 25%, transparent); }
.jr-line li > span:last-child { display: flex; flex-direction: column; } .jr-line b { font-size: 15px; } .jr-line small { font-size: 12.5px; color: var(--muted); }
.jr-rules summary { cursor: pointer; font-weight: 800; }
/* how the game works: a card for each part, two in a row on a wide screen (the odd last across) */
.jr-how { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 12px 0 4px; }
.jr-how-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--row-alt); }
.jr-how-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; font-size: 19px; background: var(--surface); }
.jr-how-item > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jr-how-item b { font-size: 15px; }
.jr-how-item p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text); }
.jr-how-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.jr-how-chips span { padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--surface); }
.jr-rules h4.jr-how-title { margin: 18px 0 0; font-size: 16px; }
@media (min-width: 641px) {
  .jr-how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr-how > .jr-how-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.jr-rules ul { display: grid; gap: 6px; margin: 12px 0 8px; padding: 0; list-style: none; }
.jr-rules li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 12px; background: var(--row-alt); }
.jr-rules li b { flex: none; white-space: nowrap; color: #d97706; font-variant-numeric: tabular-nums; }
.jr-rules li b.neg { color: var(--warn); }
/* the odd last of today's achievements across the row (the grid ends even); four in a row, a last row
   of two shares it between them */
.jr-badges > .jr-badge:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 641px) {
  .jr-badges > .jr-badge:nth-child(4n + 1):nth-last-child(2), .jr-badges > .jr-badge:nth-child(4n + 2):last-child { grid-column: span 2; }
}
/* the food's quality today (journey.js qualityPanel): the day's score, the foods by grade with their XP, the scale */
.jr-q-chip b.plus { color: var(--good); } .jr-q-chip b.minus { color: var(--warn); }
.jr-q-target { align-self: flex-start; margin-top: 2px; padding: 2px 10px; border-radius: 999px; font-size: 13px; background: var(--row-alt); }
.jr-q-target.ok { color: var(--good); background: color-mix(in srgb, #22a06b 12%, transparent); }
.jr-quality .jr-good h4, .jr-quality .jr-fix h4 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.jr-quality h4 small { font-size: 13px; font-weight: 800; }
.jr-quality .jr-good h4 small { color: var(--good); } .jr-quality .jr-fix h4 small { color: var(--warn); }
.jr-q-list li { align-items: center; }
.jr-q-list li > span:nth-child(2) { flex: 1; min-width: 0; }
.jr-q-list b { overflow-wrap: anywhere; }
.jr-q-list small { font-size: 12.5px; color: var(--muted); }
.jr-q-g, .jr-q-scale b { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font-size: 15px; font-weight: 900; color: var(--gt); background: var(--g); }
.jr-q-xp { flex: none; padding: 2px 9px; border-radius: 999px; font-size: 13px; font-variant-numeric: tabular-nums; }
.jr-q-xp.plus { color: var(--good); background: color-mix(in srgb, #22a06b 16%, transparent); }
.jr-q-xp.minus { color: var(--warn); background: color-mix(in srgb, #e5484d 14%, transparent); }
.jr-q-none, .jr-q-more { margin: 0; font-size: 13px; color: var(--muted); }
.jr-q-more { margin-top: 8px; }
.jr-q-mid { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
/* the foods that are no food in the game (journey.js offLine) */
.jr-q-off { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5;
  color: var(--text); background: color-mix(in srgb, #e63e11 10%, transparent); border: 1px solid color-mix(in srgb, #e63e11 28%, transparent); }
.jr-q-off b { font-weight: 700; }
.jr-q-tip { display: flex; flex-direction: column; gap: 2px; margin: 12px 0 0; padding: 10px 14px; border-radius: 14px; font-size: 14px; background: color-mix(in srgb, #f5a524 13%, transparent); }
.jr-q-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.jr-q-scale span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px; border-radius: 12px; background: color-mix(in srgb, var(--g) 13%, transparent); }
.jr-q-scale b { width: 26px; height: 26px; border-radius: 8px; font-size: 14px; }
.jr-q-scale small { font-size: 13px; font-weight: 800; }
.jr-q-how { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }
/* the scale is a key, not today's numbers: said so above it, the boxes quiet in one row */
.jr-q-key { margin: 14px 0 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.jr-q-key + .jr-q-scale { margin-top: 8px; }
.jr-q-key + .jr-q-scale span { flex-direction: row; justify-content: center; gap: 6px; padding: 5px 4px; background: color-mix(in srgb, var(--g) 8%, transparent); }
.jr-q-key + .jr-q-scale b { width: 22px; height: 22px; border-radius: 7px; font-size: 12.5px; }
.jr-q-key + .jr-q-scale small { font-size: 12.5px; font-weight: 600; color: var(--muted); }
/* its tile in the diary */
.jr-mini { flex: none; overflow: visible; }
.jm-hill { fill: color-mix(in srgb, #4caf72 30%, transparent); }
.jm-road { fill: none; stroke: #8b93a1; stroke-width: 7; stroke-linecap: round; }
.jm-trail { fill: none; stroke: #ffb02e; stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(255, 176, 46, .7)); }
@media (max-width: 640px) {
  .jr-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr-bars, .jr-two { grid-template-columns: minmax(0, 1fr); }
  .jr-points b { font-size: 22px; }
  .jr-level b { font-size: 17px; }
  .jr-lv-num { width: 48px; height: 48px; font-size: 24px; }
}
@keyframes jr-pop { from { scale: 0; } }
@keyframes jr-fade { from { opacity: 0; } }
@keyframes jr-rise { from { opacity: 0; translate: 0 12px; } }
@keyframes jr-in { from { opacity: 0; translate: -14px 0; } }
@keyframes jr-grow { from { width: 0; } }
@keyframes jr-ring { from { stroke-dasharray: 0 999; } }
@keyframes jr-road { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes jr-burst { 0% { opacity: .9; scale: .6; } 100% { opacity: 0; scale: 1.9; } }
@keyframes jr-spin { to { rotate: 360deg; } }
@keyframes jr-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes jr-shine { 0% { translate: -130% 0; } 40%, 100% { translate: 130% 0; } }
@keyframes jr-twinkle { 0%, 100% { opacity: calc(var(--stars, 1) * .35); } 50% { opacity: var(--stars, 1); } }
@keyframes jr-drift { from { translate: -16px 0; } to { translate: 20px 0; } }
@keyframes jr-wave { 0%, 100% { transform: skewY(0) scaleX(1); } 50% { transform: skewY(-7deg) scaleX(.9); } }
@keyframes jr-glow { 0%, 100% { opacity: .55; scale: .9; } 50% { opacity: 1; scale: 1.08; } }
@media (prefers-reduced-motion: reduce) {
  .jr-scene *, .jr-scene *::before, .jr-scene *::after, .jr-hero *, .jr-badge, .jr-badge *, .jr-badge::after, .jr-line li, .jr-bar-track i, .jr-ring { animation: none !important; }
}
.jr-tile-body { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }

/* ---------- "טיפים חכמים": a tip's window before something goes into the diary (nudge.js) ---------- */
.nudge-dlg { --nd: #2f8ff0; width: min(420px, calc(100% - 28px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 28px; overflow: auto;
  color: var(--text); background: var(--surface); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); animation: nd-in .5s cubic-bezier(.2, 1.3, .4, 1) both; }
.nudge-dlg::backdrop { background: rgba(10, 16, 28, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: nd-fade .3s ease both; }
.nudge-dlg.leaving { animation: nd-out .22s ease-in forwards; }
.nd-blue { --nd: #2f8ff0; } .nd-violet { --nd: #7c5cff; } .nd-rose { --nd: #e5487f; } .nd-amber { --nd: #e38b06; }
.nd-red { --nd: #e5484d; } .nd-slate { --nd: #5b6b82; } .nd-orange { --nd: #f97316; }
.nd-card { display: flex; flex-direction: column; align-items: center; padding: 0 22px 18px; text-align: center; }
.nd-art { position: relative; display: grid; place-items: center; width: calc(100% + 44px); height: 172px; margin: 0 -22px 14px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--nd) 30%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--nd) 14%, var(--surface)), var(--surface)); }
.nd-art > svg:not(.nd-moon) { width: 132px; height: auto; overflow: visible; animation: nd-bob 3.2s ease-in-out infinite; }
.nd-kicker { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800;
  color: var(--nd); background: color-mix(in srgb, var(--nd) 13%, transparent); }
.nd-card h2 { margin: 10px 0 6px; font-size: 23px; font-weight: 900; line-height: 1.2; }
.nd-lead { margin: 0 0 12px; font-size: 16.5px; line-height: 1.5; }
.nd-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 12px; }
.nd-facts span { padding: 6px 12px; border-radius: 12px; font-size: 13.5px; font-weight: 700; background: var(--row-alt); border: 1px solid var(--border);
  animation: nd-pop .4s calc(.35s + var(--i) * .1s) cubic-bezier(.3, 1.6, .5, 1) both; }
.nd-why { margin: 0 0 16px; padding: 12px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.6; text-align: start; color: var(--muted);
  background: color-mix(in srgb, var(--nd) 8%, transparent); }
.nd-why b { color: var(--text); }
.nd-actions { display: grid; gap: 8px; width: 100%; }
.nd-actions .btn { width: 100%; min-height: 50px; font-size: 16px; }
.nd-good { color: #fff; border: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--nd) 80%, #fff), var(--nd)); box-shadow: 0 10px 22px color-mix(in srgb, var(--nd) 35%, transparent); }
.nudge-dlg .btn:focus { outline: none; }
.nudge-dlg .btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--nd) 55%, #fff); outline-offset: 3px; }
.nd-never { margin-top: 12px; padding: 6px 10px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--muted); text-decoration: underline; cursor: pointer; }
/* across on an iPad and a computer: the drawing a panel down the window's right side, the words, the facts
   and the buttons beside it (it stood a tall phone's column in the middle of a wide screen) */
@media (min-width: 700px) and (min-height: 480px) {
  .nudge-dlg { width: min(800px, calc(100% - 48px)); }
  .nd-card { display: grid; grid-template-columns: 34% minmax(0, 1fr); grid-template-rows: repeat(6, auto) 1fr; column-gap: 30px; align-items: start; justify-items: start;
    padding: 0; padding-inline-end: 30px; text-align: start; }
  .nd-card > * { grid-column: 2; }
  .nd-card > .nd-art { grid-column: 1; grid-row: 1 / span 7; align-self: stretch; justify-self: stretch; width: auto; height: auto; min-height: 340px; margin: 0;
    background: radial-gradient(110% 70% at 50% 100%, color-mix(in srgb, var(--nd) 30%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--nd) 16%, var(--surface)), color-mix(in srgb, var(--nd) 6%, var(--surface))); }
  .nd-art > svg:not(.nd-moon) { width: 150px; }
  .nd-card > .nd-kicker { margin-top: 30px; }
  .nd-card h2 { margin: 12px 0 8px; font-size: 25px; }
  .nd-facts { justify-content: flex-start; }
  .nd-card > :is(.nd-why, .nd-actions) { justify-self: stretch; }
  .nd-card > .nd-never { justify-self: center; margin-bottom: 14px; }
}
/* the drawings */
.nd-art .nd-sun { position: absolute; top: 16px; right: calc(50% - 112px); width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle, #ffe27a 45%, #ffb703 68%, transparent 71%); box-shadow: 0 0 30px #ffd54a; animation: nd-rise 1.2s ease-out both; }
.nd-step { position: absolute; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 13px; font-weight: 900; color: #fff;
  background: var(--nd); box-shadow: 0 4px 10px color-mix(in srgb, var(--nd) 40%, transparent); animation: nd-pop .4s .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.nd-step.one { top: 26px; right: calc(50% - 58px); }
.nd-mini { position: absolute; bottom: 16px; left: calc(50% - 118px); opacity: .9; }
.nd-mini .nd-step.two { top: -10px; right: -8px; background: #94a3b8; box-shadow: none; animation-delay: .8s; }
.nd-moon { position: absolute; top: 12px; right: calc(50% - 104px); width: 58px; animation: nd-rise 1.2s ease-out both; }
.nd-z text { animation: nd-float 2.4s ease-in-out infinite; } .nd-z text:nth-child(2) { animation-delay: -1.2s; }
.nd-cube { animation: nd-drop .45s calc(.25s + var(--i) * .09s) cubic-bezier(.3, 1.5, .5, 1) both; }
.nd-count { animation: nd-pop .5s 1s cubic-bezier(.3, 1.6, .5, 1) both; transform-box: fill-box; transform-origin: center; }
.nd-shake { transform-box: fill-box; transform-origin: 50% 0; animation: nd-shake 1.3s ease-in-out infinite; }
.nd-grains rect { animation: nd-fall 1.3s calc(var(--i) * .22s) linear infinite; }
.nd-drip { animation: nd-drip 1.8s ease-in infinite; }
.nd-arc { animation: nd-arc 1.1s ease-out both; }
.nd-needle { transform-box: view-box; transform-origin: 60px 70px; rotate: var(--deg); animation: nd-needle 1.3s .2s cubic-bezier(.3, 1.4, .5, 1) both; }
.nd-half { animation: nd-blink 1.4s ease-in-out infinite; }
.nd-pop { transform-box: fill-box; transform-origin: center; animation: nd-pop .5s .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.nd-tilt { transform-box: fill-box; transform-origin: 50% 100%; animation: nd-tilt 2.6s ease-in-out infinite; }
.nd-stars circle { animation: nd-blink 2s ease-in-out infinite; } .nd-stars circle:nth-child(2) { animation-delay: -.7s; } .nd-stars circle:nth-child(3) { animation-delay: -1.3s; }
@keyframes nd-in { from { opacity: 0; translate: 0 40px; scale: .92; } }
@keyframes nd-out { to { opacity: 0; translate: 0 24px; scale: .96; } }
@keyframes nd-fade { from { opacity: 0; } }
@keyframes nd-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes nd-pop { from { opacity: 0; scale: .4; } }
@keyframes nd-rise { from { opacity: 0; translate: 0 30px; } }
@keyframes nd-float { 0%, 100% { opacity: .3; translate: 0 4px; } 50% { opacity: 1; translate: 3px -4px; } }
@keyframes nd-drop { from { opacity: 0; translate: 0 -44px; } }
@keyframes nd-shake { 0%, 100% { rotate: 24deg; } 25% { rotate: 38deg; } 50% { rotate: 22deg; } 75% { rotate: 36deg; } }
@keyframes nd-fall { 0% { opacity: 0; translate: 0 0; } 20% { opacity: 1; } 100% { opacity: 0; translate: -4px 46px; } }
@keyframes nd-drip { 0% { opacity: 0; translate: 0 -6px; } 30% { opacity: 1; } 100% { opacity: 0; translate: 0 14px; } }
@keyframes nd-arc { from { stroke-dasharray: 0 100; } }
@keyframes nd-needle { from { rotate: -90deg; } }
@keyframes nd-blink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes nd-tilt { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }
@media (prefers-reduced-motion: reduce) {
  .nudge-dlg, .nudge-dlg::backdrop, .nudge-dlg *, .nudge-dlg.leaving { animation: none !important; }
}
@media (max-width: 640px) { .jr-face { left: -20px; top: -54px; width: 40px; height: 40px; font-size: 17px; } .jr-here { top: -78px; } }

/* ---------- the header's windows on its buttons' side: the profile's menu, the notifications and the
   accessibility tools opened from the header, all at one place (core.js placeTopPanels), one size,
   one surface and one head: an icon, a title with a line under it, round buttons at the far side ---------- */
#profileMenu, #bellPanel, .a11y-panel.from-top {
  position: fixed; top: var(--tp-top, calc(64px + var(--sa-top, 0px))); bottom: auto; left: var(--tp-left, 12px) !important; right: auto !important;
  width: min(380px, calc(100vw - 24px)); max-height: calc(100dvh - var(--tp-top, 76px) - 16px - var(--sa-bottom, 0px)); border-radius: 22px; z-index: 70; }
.a11y-panel.from-top { overflow: hidden; transform-origin: 30% 0;
  --menu-bg: color-mix(in srgb, var(--surface) 90%, var(--accent) 10%); background: var(--menu-bg);
  border: 2px solid color-mix(in srgb, var(--accent) 72%, var(--border)); box-shadow: 0 22px 54px rgba(0, 0, 0, .34), 0 3px 10px rgba(0, 0, 0, .18); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .a11y-panel.from-top { --menu-bg: color-mix(in srgb, var(--surface) 84%, color-mix(in srgb, var(--accent) 50%, #fff) 16%); } }
:root[data-theme="dark"] .a11y-panel.from-top { --menu-bg: color-mix(in srgb, var(--surface) 84%, color-mix(in srgb, var(--accent) 50%, #fff) 16%); }
.a11y-panel.from-top::before { display: none; }
.a11y-panel.from-top > .a11y-head, .a11y-panel.from-top > :last-child { border-radius: 0; }
/* its tiles one height, a name over two lines where one won't do, balanced (a phone's rows were of
   two heights); on an iPad and a computer wider, five to a row, each name on one line */
.a11y-grid { grid-auto-rows: 1fr; }
.a11y-opt span { text-wrap: balance; }
/* (a phone: the tiles a little shorter, so all of them, one height, still open whole) */
@media (max-width: 699.98px) { .a11y-panel .a11y-opt { min-height: 62px; padding: 6px 4px; gap: 3px; font-size: 12px; line-height: 1.2; } .a11y-panel .a11y-opt svg { width: 21px; height: 21px; } }
@media (min-width: 700px) and (min-height: 500px) {
  .a11y-panel.from-top { width: min(720px, calc(100vw - 32px)); }
  .a11y-panel .a11y-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .a11y-panel .a11y-opt { min-height: 82px; font-size: 13px; }
  .a11y-panel .a11y-body { padding: 14px 16px; gap: 12px; }
}
@media (max-width: 640px) {
  #profileMenu, #bellPanel, .a11y-panel.from-top { left: 12px !important; right: 12px !important; width: auto;
    max-height: calc(100dvh - var(--tp-top, 76px) - 110px - var(--sa-bottom, 0px)); }
  /* the accessibility tools down to just over the home bar, over the bottom bar (a window of its own, it
     closes at a touch outside): fifteen tiles and the text's size open whole, the larger text too; its
     last line, where the settings are kept, left out (the bottom row of tiles had been under the buttons) */
  .a11y-panel.from-top { max-height: calc(100dvh - var(--tp-top, 76px) - 12px - var(--sa-bottom, 0px)); }
  .a11y-panel.from-top .a11y-hint { display: none; }
  /* (the reset and the two links each in its third, a link over two lines when the text is larger: the
     second one ran past the window's side) */
  .a11y-panel .a11y-foot { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 12px 14px; }
  .a11y-panel .a11y-link { white-space: normal; text-align: center; text-wrap: balance; line-height: 1.3; }
}
/* the one head */
#profileMenu { padding: 0 0 8px; }
#profileMenu .menu-head, .a11y-panel.from-top .a11y-head, #bellPanel .bell-head {
  position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; min-height: 62px; margin: 0; padding: 12px 12px 12px 10px;
  color: var(--text); background: var(--menu-bg); border-bottom: 1px solid var(--border); }
#profileMenu .menu-head { margin-bottom: 6px; }
#profileMenu > .menu-item, #profileMenu > .menu-signout { width: calc(100% - 16px); margin-inline: 8px; }
#profileMenu .menu-head-link { gap: 10px; }
#profileMenu .avatar-big { width: 36px; height: 36px; font-size: 17px; }
#profileMenu .menu-head b, .a11y-panel.from-top .a11y-head h2 { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.2; }
#profileMenu .menu-head small, .a11y-titles small { font-size: 12px; color: var(--muted); }
.a11y-titles { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.a11y-titles small { display: none; }
.a11y-panel.from-top .a11y-titles small { display: block; }
.a11y-panel.from-top .a11y-logo { width: 36px; height: 36px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #3b82f6, #1f5fd6);
  box-shadow: 0 6px 14px -6px rgba(31, 95, 214, .7); }
.a11y-panel.from-top .a11y-close, #profileMenu .menu-close { width: 36px; height: 36px; color: var(--muted); background: color-mix(in srgb, var(--text) 7%, transparent); box-shadow: none; }
.a11y-panel.from-top .a11y-close:hover, #profileMenu .menu-close:hover { color: var(--text); background: color-mix(in srgb, var(--text) 13%, transparent); }
.a11y-panel.from-top .a11y-close:focus-visible { outline: 2px solid var(--accent); }
#profileMenu .menu-head .menu-close { align-self: center; }

/* the stations' marks: a flag once passed, a lock before, the number in a corner; the goal a big cup */
.jr-stop > i .jr-ic { width: 24px; height: 24px; }
.jr-stop > i .flag { display: none; }
.jr-stop.lit > i .flag { display: block; }
.jr-stop.lit > i .lock { display: none; }
.jr-stop > i .lock { color: #64748b; }
.jr-stop.next > i .lock { color: #fff; }
.jr-cloth { transform-box: fill-box; transform-origin: 0% 50%; animation: jr-wave 1.4s ease-in-out infinite; }
.jr-num { position: absolute; top: -7px; right: -7px; display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 999px;
  font-size: 11px; font-weight: 900; color: #fff; background: #334155; border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .3); }
.jr-stop.lit .jr-num { background: #b56d00; }
.jr-stop.next .jr-num { background: #1e40af; }
.jr-stop.first.lit > i .flag { display: block; }
/* the goal: the cup itself, big, over the castle's gate */
.jr-stop.goal > i:not(.jr-gate) { display: none; }
.jr-trophy { position: absolute; left: 34px; top: -64px; width: 54px; height: 59px; isolation: isolate; filter: drop-shadow(0 8px 10px rgba(80, 50, 0, .45));
  animation: jr-pop .6s .9s cubic-bezier(.3, 1.6, .5, 1) both; }
.jr-cup { width: 100%; height: 100%; overflow: visible; animation: jr-cup-float 3.2s ease-in-out infinite; }
.jr-rays { transform-box: view-box; transform-origin: 50px 42px; opacity: .55; animation: jr-spin 14s linear infinite; }
.jr-cup-glow { transform-box: fill-box; transform-origin: center; animation: jr-glow 2.6s ease-in-out infinite; }
.jr-cup-shine { transform: skewX(-18deg); animation: jr-cup-shine 3.6s 1.2s ease-in-out infinite; }
.jr-cup-sparks path { transform-box: fill-box; transform-origin: center; animation: jm-twinkle 1.8s calc(var(--i) * .45s) ease-in-out infinite; }
.jr-goal-lock { position: absolute; bottom: -4px; right: -2px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  color: #fff; background: #334155; border: 2px solid #fff; box-shadow: 0 3px 6px rgba(0, 0, 0, .35); }
.jr-goal-lock .jr-ic { width: 13px; height: 13px; }
.jr-stop.goal:not(.lit) .jr-trophy { display: none; }
.jr-stop.goal .jr-gate { left: -15px; top: -19px; width: 30px; height: 30px; animation-delay: .9s; }
.jr-stop.goal .jr-gate .jr-ic { width: 16px; height: 16px; }
.jr-stop.goal.lit .jr-gate { display: none; }
.jr-stop.goal.next::before { left: -24px; top: -28px; width: 48px; height: 48px; }
.jr-stop.goal.lit .jr-rays { opacity: .9; }
.jr-stop.goal .jr-label { top: 16px; }
/* the person's pin stands over the station, not on it */
.jr-me { margin-top: -22px; }
@keyframes jr-cup-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes jr-cup-shine { 0% { translate: -30px 0; } 45%, 100% { translate: 110px 0; } }
.cs-panel .cs-chips .cs-one { white-space: nowrap; }
/* the week's rings lead to the goals' screen (journey.js) */
a.week-act { color: inherit; text-decoration: none; border-radius: 16px; -webkit-tap-highlight-color: transparent; transition: background .2s, transform .15s; }
a.week-act:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
a.week-act:active { transform: scale(.98); }
/* the won cup's halo: a ring of light turning behind it, and a glow breathing under it */
.jr-trophy::before { content: ""; position: absolute; z-index: -1; inset: -34%; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 214, 74, 0), rgba(255, 214, 74, .75) 30deg, rgba(255, 214, 74, 0) 60deg, rgba(255, 246, 190, .7) 120deg, rgba(255, 214, 74, 0) 150deg,
    rgba(255, 214, 74, .75) 210deg, rgba(255, 214, 74, 0) 240deg, rgba(255, 246, 190, .7) 300deg, rgba(255, 214, 74, 0) 330deg);
  -webkit-mask: radial-gradient(circle, transparent 30%, #000 36%, #000 60%, transparent 71%); mask: radial-gradient(circle, transparent 30%, #000 36%, #000 60%, transparent 71%);
  animation: jr-spin 5s linear infinite; }
.jr-trophy::after { content: ""; position: absolute; z-index: -1; inset: -14%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 160, .95), rgba(255, 200, 60, .35) 45%, rgba(255, 200, 60, 0) 70%); animation: jr-halo 2.2s ease-in-out infinite; }
@keyframes jr-halo { 0%, 100% { opacity: .55; scale: .82; } 50% { opacity: 1; scale: 1.14; } }
@media (prefers-reduced-motion: reduce) { .jr-trophy::before, .jr-trophy::after { animation: none; } }

/* ---------- the road as a game: XP in two kinds, stations won and cheered, life on the map (journey.js) ---------- */
.jr-split { margin: -4px 0 14px; }
.jr-split-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--track); }
.jr-split-bar i { width: var(--w); animation: jr-grow 1.2s .4s ease-out both; }
.jr-split-bar .k-food { background: linear-gradient(90deg, #22a06b, #4ade80); }
.jr-split-bar .k-sport { background: linear-gradient(90deg, #f08a24, #fbbf24); }
.jr-split-bar .k-bonus { background: linear-gradient(90deg, #f5a524, #fde047); }
.jr-split-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.jr-split-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.jr-split-legend b { color: var(--text); font-variant-numeric: tabular-nums; }
.jr-split-legend i, .jr-rules h4 i { width: 9px; height: 9px; border-radius: 3px; }
.k-food > i { background: #22a06b; } .k-sport > i { background: #f08a24; } .k-bonus > i { background: #f5a524; }
.jr-chip-split { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.jr-rules h4 { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 14px; }
/* how a station was won: a small round mark at its corner */
.jr-src { position: absolute; bottom: -6px; left: -8px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-style: normal; font-size: 11px;
  background: #fff; border: 2px solid #ffd54a; box-shadow: 0 2px 5px rgba(0, 0, 0, .3); }
/* a station reached: a burst of colour and a bubble with what was won */
.jr-win { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 6; pointer-events: none; }
.jr-win > i { position: absolute; left: -4px; top: -6px; width: 8px; height: 8px; border-radius: 2px; background: var(--c); animation: jr-burst-dot .9s cubic-bezier(.2, .8, .3, 1) forwards; }
.jr-win > i:nth-child(3n) { border-radius: 50%; }
.jr-bubble { position: absolute; left: 0; top: -66px; translate: -50% 0; display: flex; flex-direction: column; align-items: center; padding: 6px 12px; border-radius: 16px; white-space: nowrap;
  font-size: 14px; font-weight: 900; color: #5a3a00; background: linear-gradient(145deg, #fff8d6, #ffd54a); border: 2px solid #fff; box-shadow: 0 8px 18px rgba(120, 80, 0, .35);
  animation: jr-bubble 2.4s cubic-bezier(.3, 1.5, .5, 1) forwards; }
.jr-bubble small { font-size: 11.5px; font-weight: 800; color: #b45309; }
.jr-bubble::after { content: ""; position: absolute; bottom: -7px; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: #ffd54a; border-bottom: 0; }
.jr-win.big .jr-bubble { font-size: 17px; top: -84px; }
@keyframes jr-burst-dot { 0% { opacity: 1; translate: 0 0; scale: 1; } 100% { opacity: 0; translate: var(--dx) var(--dy); scale: .4; rotate: 200deg; } }
@keyframes jr-bubble { 0% { opacity: 0; scale: .3; } 14% { opacity: 1; scale: 1.08; } 22% { scale: 1; } 80% { opacity: 1; translate: -50% -6px; } 100% { opacity: 0; translate: -50% -22px; } }
/* life on the map */
.jm-fish { animation: jm-leap 3.6s ease-in-out infinite; transform-box: view-box; }
.jm-splash { opacity: 0; transform-box: fill-box; transform-origin: center; animation: jm-splash 3.6s ease-out infinite; }
.jm-duck { animation: jm-swim 9s ease-in-out infinite alternate; }
.jm-bunny { animation: jm-hop 6s ease-in-out infinite; }
/* its shadow on the grass, along with it (smaller while it is up) */
.jm-bunny-shade { animation: jm-hop-shade 6s ease-in-out infinite; }
.jm-fly { animation: jm-flutter .35s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.jm-fly.f1 { animation: jm-flutter .35s ease-in-out infinite alternate, jm-wander 7s ease-in-out infinite alternate; }
.jm-fly.f2 { animation: jm-flutter .3s ease-in-out infinite alternate, jm-wander 9s -3s ease-in-out infinite alternate-reverse; }
.jm-eagle { transform-box: view-box; animation: jm-soar 12s linear infinite; }
@keyframes jm-leap { 0%, 55%, 100% { translate: 0 6px; rotate: 0deg; opacity: 0; } 60% { opacity: 1; translate: -6px 0; rotate: -30deg; } 70% { translate: 2px -18px; rotate: 0deg; } 80% { translate: 10px 0; rotate: 35deg; opacity: 1; } 84% { opacity: 0; translate: 12px 6px; } }
@keyframes jm-splash { 0%, 58% { opacity: 0; scale: .4; } 62% { opacity: .9; } 72% { opacity: 0; scale: 1.4; } 80% { opacity: .9; scale: .4; } 92%, 100% { opacity: 0; scale: 1.5; } }
@keyframes jm-swim { from { translate: -10px 0; } to { translate: 18px 2px; } }
/* the bunny: three hops the way it faces, a rest, it turns, three hops back, a rest, and it turns again */
@keyframes jm-hop {
  0%, 8% { translate: 0 0; scale: 1 1; }
  13% { translate: 3px -7px; scale: 1 1; } 18% { translate: 6px 0; scale: 1 1; } 23% { translate: 9px -7px; scale: 1 1; }
  28% { translate: 12px 0; scale: 1 1; } 33% { translate: 15px -7px; scale: 1 1; } 38%, 48% { translate: 18px 0; scale: 1 1; }
  50%, 58% { translate: 18px 0; scale: -1 1; }
  63% { translate: 15px -7px; scale: -1 1; } 68% { translate: 12px 0; scale: -1 1; } 73% { translate: 9px -7px; scale: -1 1; }
  78% { translate: 6px 0; scale: -1 1; } 83% { translate: 3px -7px; scale: -1 1; } 88%, 98% { translate: 0 0; scale: -1 1; }
  100% { translate: 0 0; scale: 1 1; }
}
@keyframes jm-hop-shade {
  0%, 8% { translate: 0 0; scale: 1; }
  13% { translate: 3px 0; scale: .6; } 18% { translate: 6px 0; scale: 1; } 23% { translate: 9px 0; scale: .6; }
  28% { translate: 12px 0; scale: 1; } 33% { translate: 15px 0; scale: .6; } 38%, 58% { translate: 18px 0; scale: 1; }
  63% { translate: 15px 0; scale: .6; } 68% { translate: 12px 0; scale: 1; } 73% { translate: 9px 0; scale: .6; }
  78% { translate: 6px 0; scale: 1; } 83% { translate: 3px 0; scale: .6; } 88%, 100% { translate: 0 0; scale: 1; }
}
@keyframes jm-flutter { from { scale: 1 1; } to { scale: .35 1; } }
@keyframes jm-wander { 0% { translate: 0 0; } 33% { translate: 14px -10px; } 66% { translate: -8px -18px; } 100% { translate: 10px 4px; } }
@keyframes jm-soar { 0% { transform: rotate(0deg) translate(26px) rotate(0deg); } 100% { transform: rotate(360deg) translate(26px) rotate(-360deg); } }
/* a station won since the last visit: the victory window */
.jr-victory { width: min(380px, calc(100% - 28px)); padding: 0; border: 0; border-radius: 30px; overflow: hidden; color: var(--text); background: var(--surface);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .4); animation: nd-in .55s cubic-bezier(.2, 1.4, .4, 1) both; }
.jr-victory::backdrop { background: rgba(10, 16, 28, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: nd-fade .3s both; }
.jr-victory.leaving { animation: nd-out .22s ease-in forwards; }
.jv-card { display: flex; flex-direction: column; align-items: center; padding: 0 22px 22px; text-align: center; }
.jv-art { position: relative; display: grid; place-items: center; width: calc(100% + 44px); height: 190px; margin: 0 -22px 12px; overflow: hidden;
  background: radial-gradient(circle at 50% 60%, #fff3b0 0, #ffd54a 30%, #f59e0b 60%, #7c3aed 100%); }
.jv-rays { position: absolute; inset: -40%; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .28) 0 10deg, transparent 10deg 20deg); animation: jr-spin 14s linear infinite; }
.jv-art .jr-cup { position: relative; width: 120px; height: 132px; }
.jv-medal { position: relative; display: grid; place-items: center; width: 110px; height: 110px; border-radius: 50%; border: 6px solid #fff;
  background: radial-gradient(circle at 34% 28%, #fffbe0 0 14%, #ffe27a 15%, #ffc928 55%, #f5a300); box-shadow: 0 10px 0 #b56d00, 0 18px 30px rgba(120, 70, 0, .5);
  animation: jv-medal 1s cubic-bezier(.3, 1.6, .5, 1) both; }
.jv-medal b { font-size: 54px; font-weight: 900; color: #7a4b00; text-shadow: 0 2px 0 #fff3b0; }
.jv-star { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; background: #fff;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: jv-star 1.6s calc(.4s + var(--i) * .1s) ease-out infinite; }
.jv-star:nth-child(2n) { background: #fde047; }
.jv-kicker { padding: 4px 14px; border-radius: 999px; font-size: 13px; font-weight: 900; color: #b45309; background: #fff3c4; }
.jv-card h2 { margin: 10px 0 6px; font-size: 24px; font-weight: 900; }
.jv-card p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.jv-go { width: 100%; min-height: 52px; font-size: 17px; font-weight: 900; color: #fff; border: 0; background: linear-gradient(135deg, #f59e0b, #e5487f); box-shadow: 0 10px 22px rgba(229, 72, 127, .35); }
@keyframes jv-medal { 0% { scale: 0; rotate: -30deg; } 60% { scale: 1.15; rotate: 8deg; } 100% { scale: 1; rotate: 0deg; } }
@keyframes jv-star { 0% { opacity: 0; transform: rotate(calc(var(--i) * 45deg)) translateY(0) scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(calc(var(--i) * 45deg)) translateY(-92px) scale(1); } }
/* an achievement's window: what it is, where it stands today, a tip */
.jr-badge { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.jr-badge:active { scale: .97; }
.jr-badge b { white-space: normal; }
.jr-info { width: min(360px, calc(100% - 28px)); padding: 0; border: 0; border-radius: 28px; color: var(--text); background: var(--surface);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35); animation: nd-in .45s cubic-bezier(.2, 1.3, .4, 1) both; }
.jr-info::backdrop { background: rgba(10, 16, 28, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: nd-fade .25s both; }
.jr-info.leaving { animation: nd-out .2s ease-in forwards; }
.ji-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 22px 20px; text-align: center; }
.ji-art { position: relative; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: color-mix(in srgb, var(--c) 16%, transparent);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--c) 7%, transparent); animation: jv-medal .7s cubic-bezier(.3, 1.6, .5, 1) both; }
.ji-check { position: absolute; bottom: 0; right: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-style: normal; font-weight: 900; color: #fff; background: #22a06b; border: 3px solid var(--surface); }
.jr-info h2 { margin: 4px 0 0; font-size: 21px; font-weight: 900; }
.ji-state { padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--muted); background: var(--row-alt); }
.ji-state.ok { color: #15803d; background: color-mix(in srgb, #22a06b 14%, transparent); }
.jr-info p { margin: 4px 0 0; font-size: 15px; line-height: 1.6; }
.ji-xp { padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: #b45309; background: #fff3c4; }
.ji-tip { display: flex; flex-direction: column; gap: 2px; width: 100%; margin-top: 4px; padding: 10px 12px; border-radius: 14px; text-align: start; font-size: 14px; line-height: 1.5;
  background: color-mix(in srgb, var(--c) 9%, transparent); }
.ji-tip b { font-size: 13px; }
/* "הבנתי": a soft button in the card's colour, not a loud one (a ring only for the keyboard) */
.ji-ok { width: 100%; min-height: 44px; margin-top: 6px; border: 0; border-radius: 14px; font-size: 15.5px; font-weight: 700;
  color: color-mix(in srgb, var(--c) 72%, var(--text)); background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent);
  transition: background .2s, transform .15s; }
.ji-ok:hover { background: color-mix(in srgb, var(--c) 22%, transparent); }
.ji-ok:active { transform: scale(.98); }
.ji-ok:focus:not(:focus-visible) { outline: none; }
/* (and for the keys a thin ring in the card's colour, not the page's thick green one) */
.ji-ok:focus-visible { outline: 2px solid color-mix(in srgb, var(--c) 70%, var(--text)); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .jr-win, .jm-fish, .jm-splash, .jm-duck, .jm-bunny, .jm-bunny-shade, .jm-fly, .jm-eagle, .jv-rays, .jv-star, .jv-medal, .jr-victory, .jr-info, .ji-art, .jr-split-bar i { animation: none !important; }
}
/* the next meal's tile: its title on one line, the meal's chip short beside it, the button's words wrapping inside it */
.next-tile header h3 { white-space: nowrap; }
.next-tile .next-chip { flex: none; white-space: nowrap; }
.jv-wins { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 10px; }
.jv-wins span { padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--row-alt); }
/* a station reached: its lock opens and flies off, the flag is planted and waves, the button turns gold */
.jr-stop.unlocking > i .lock, .jr-stop.goal.unlocking .jr-gate .lock { animation: jr-unlock .42s ease-in forwards; transform-box: fill-box; transform-origin: 50% 70%; }
.jr-stop.unlocking > i { animation: jr-shake .42s ease-in-out; }
.jr-stop.lit > i .flag { transform-origin: 28% 100%; animation: jr-plant .75s cubic-bezier(.3, 1.7, .5, 1) both; }
.jr-stop.lit .jr-cloth { animation: jr-flutter 1s ease-in-out infinite; }
@keyframes jr-unlock { 0% { transform: none; } 30% { transform: translateY(-2px) rotate(-14deg); } 60% { transform: translateY(-5px) rotate(12deg) scale(1.15); } 100% { transform: translateY(-16px) scale(.2); opacity: 0; } }
@keyframes jr-shake { 0%, 100% { translate: 0 0; } 25% { translate: -2px 0; } 50% { translate: 2px -1px; } 75% { translate: -1px 0; } }
@keyframes jr-plant { 0% { transform: translateY(12px) scaleY(0); opacity: 0; } 55% { transform: translateY(-3px) scaleY(1.18); opacity: 1; } 75% { transform: scaleY(.94); } 100% { transform: none; } }
@keyframes jr-flutter { 0%, 100% { transform: skewY(0) scaleX(1); } 30% { transform: skewY(-9deg) scaleX(.86); } 65% { transform: skewY(5deg) scaleX(.95); } }
@media (prefers-reduced-motion: reduce) { .jr-stop.unlocking > i, .jr-stop.unlocking > i .lock, .jr-stop.lit > i .flag, .jr-stop.lit .jr-cloth { animation: none !important; } }

/* the road's rules: the ones that win a station */
.jr-win-mark { font-style: normal; font-size: 12px; }
/* the daily calorie goal on the road's page */
.jr-k-top { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.jr-k-ring { position: relative; flex: none; width: 104px; height: 104px; --k: #f97316; }
.jr-k-ring.in { --k: #22a06b; } .jr-k-ring.over { --k: #e5484d; }
.jr-k-ring svg { width: 100%; height: 100%; }
.jr-k-ring .jr-ring { stroke: var(--k); }
.jr-k-ring > span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; text-align: center; }
.jr-k-ring b { font-size: 21px; font-weight: 900; color: var(--k); font-variant-numeric: tabular-nums; }
.jr-k-ring small { font-size: 11px; color: var(--muted); }
.jr-k-words { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.jr-k-words > small { font-size: 12.5px; color: var(--muted); }
.jr-k-words > b { font-size: 25px; font-weight: 900; line-height: 1.2; } .jr-k-words > b small { font-size: 13px; font-weight: 600; color: var(--muted); }
.jr-k-pace { align-self: flex-start; margin-top: 4px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--carbs-ink); background: color-mix(in srgb, var(--carbs) 14%, transparent); }
.jr-k-macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.jr-k-m { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--c) 10%, transparent); }
.jr-k-m > span { font-size: 13px; font-weight: 700; color: var(--ink); }
.jr-k-m b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; } .jr-k-m b small { font-size: 12px; font-weight: 500; color: var(--muted); }
.jr-k-mbar { display: block; height: 6px; margin-top: 2px; border-radius: 999px; background: var(--track); overflow: hidden; }
.jr-k-mbar i { display: block; width: var(--to); height: 100%; border-radius: inherit; background: var(--c); animation: jr-grow 1s .4s ease-out both; }
.jr-k-week { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 14px; }
.jr-k-days { display: flex; justify-content: center; gap: 8px; }
.jr-k-day { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
/* each day a round mark with a soft light on it: a drawn check or arrow, the same small in the key */
.jr-k-day i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-style: normal; color: #fff; box-sizing: border-box;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .38), inset 0 -2px 4px rgba(0, 0, 0, .12), 0 4px 10px -3px var(--sh, transparent); }
.jr-k-day i svg, .jr-k-key i svg { display: block; width: 62%; height: 62%; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18)); }
.jr-k-day.in i, .jr-k-key i.in { background: radial-gradient(circle at 34% 26%, #5ee38f, #16a34a 72%); --sh: rgba(22, 163, 74, .6); }
.jr-k-day.over i, .jr-k-key i.over { background: radial-gradient(circle at 34% 26%, #ff8796, #e11d48 72%); --sh: rgba(225, 29, 72, .55); }
.jr-k-day.low i, .jr-k-key i.low { background: radial-gradient(circle at 34% 26%, #ffc34d, #e07b06 72%); --sh: rgba(224, 123, 6, .55); }
.jr-k-day.none i { border: 2px dashed var(--border); box-shadow: none; }
.jr-k-week small { font-size: 13px; line-height: 1.6; color: var(--muted); text-align: center; }
.jr-k-key { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin-top: 2px; }
.jr-k-key > span { display: inline-flex; align-items: center; gap: 5px; }
.jr-k-key i { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; color: #fff; }
/* (seven of them across a narrow phone's card: a little smaller there) */
@media (max-width: 360px) { .jr-k-day i { width: 28px; height: 28px; } .jr-k-days { gap: 5px; } }
.jr-k-go { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; }
@media (max-width: 420px) { .jr-k-m { padding: 9px 9px; } .jr-k-m b { font-size: 16px; } .jr-k-days { gap: 6px; } }

/* the last night: going to sleep on the right, waking on the left, the night's arc between them */
.sl-night { margin-bottom: 16px; padding: 14px 16px 16px; border-radius: 20px; border: 1px solid color-mix(in srgb, #7b6cf0 22%, var(--border));
  /* the night on the right (where it starts, by the moon), the morning on the left (by the sun) */
  background: linear-gradient(to left, color-mix(in srgb, #7b6cf0 14%, var(--surface-2)), color-mix(in srgb, #4f8cf7 8%, var(--surface-2)) 55%, color-mix(in srgb, #f5a524 11%, var(--surface-2))); }
.sl-n-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 10px; }
.sl-n-head > span:first-child { font-size: 15px; font-weight: 800; }
.sl-n-verdict { padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.sl-n-verdict.good { color: #15803d; background: color-mix(in srgb, #22a06b 16%, transparent); }
.sl-n-verdict.warn { color: #b45309; background: color-mix(in srgb, #f59e0b 18%, transparent); }
.sl-n-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(104px, 1fr) minmax(0, 1fr); align-items: end; gap: 8px; margin-bottom: 14px; } /* (bed on the right, where Hebrew starts, waking on the left) */
.sl-n-row > * { direction: rtl; }
.sl-n-time { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; line-height: 1.2; }
.sl-n-ic { width: 34px; height: 34px; margin-bottom: 4px; overflow: visible; }
.sl-n-time small { font-size: 12.5px; color: var(--muted); }
.sl-n-time b { font-size: 27px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.sl-n-time.bed b { color: #6d5dfc; } .sl-n-time.wake b { color: #e08a00; }
.sl-n-time em { margin-top: 3px; padding: 1px 7px; border-radius: 999px; white-space: nowrap; font-style: normal; font-size: 11px; color: var(--muted); background: color-mix(in srgb, var(--text) 6%, transparent); }
.sl-n-mid { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 92px; padding-bottom: 2px; text-align: center; line-height: 1.15; }
.sl-n-arc { position: absolute; inset: 0 0 auto; width: 100%; height: 74px; overflow: visible; }
.sl-n-mid b { position: relative; font-size: 30px; font-weight: 900; color: #6d5dfc; font-variant-numeric: tabular-nums; }
.sl-n-mid small { position: relative; font-size: 12px; color: var(--muted); }
.sl-n-solo { display: flex; flex-direction: column; margin-bottom: 12px; line-height: 1.2; }
.sl-n-solo b { font-size: 34px; font-weight: 900; color: #6d5dfc; } .sl-n-solo small { font-size: 12.5px; color: var(--muted); }
/* a wide card (an iPad, a computer): the night (going to sleep, its arc, waking) gathered on one side instead
   of spread across, and its stages on the other, one under the other with each one's share */
.act-sleep { container-type: inline-size; }
.sl-st-title, .sleep-rows { display: none; }
@container (min-width: 760px) {
  .sl-night { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); column-gap: 32px; align-items: center; }
  .sl-n-head { grid-column: 1 / -1; }
  .sl-night > :is(.sl-n-row, .sl-n-solo) { grid-column: 1; width: min(100%, 560px); justify-self: center; margin-bottom: 0; }
  .sl-night > .sl-stages { grid-column: 2; padding-inline-start: 28px; border-inline-start: 1px solid color-mix(in srgb, #7b6cf0 22%, var(--border)); }
  .sl-stages:has(.sleep-rows) > :is(.sleep-bar, .sleep-keys) { display: none; }
  .sl-st-title { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 800; color: var(--muted); }
  .sleep-rows { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
}
.sleep-rows li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 38px; align-items: center; gap: 10px; font-size: 13.5px; }
.sleep-rows li > span { font-weight: 700; }
.sleep-rows i { display: block; height: 10px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--sc) 16%, var(--track)); }
.sleep-rows i b { display: block; height: 100%; border-radius: inherit; background: var(--sc); }
.sleep-rows em { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.sleep-rows small { font-size: 12px; color: var(--muted); text-align: end; }
.sl-n-star { transform-box: fill-box; transform-origin: center; animation: jm-twinkle 2.4s calc(var(--i) * .6s) ease-in-out infinite; }
.sl-n-tw { transform-box: fill-box; transform-origin: center; animation: jm-twinkle 2.2s ease-in-out infinite; }
.sl-n-rays { transform-box: fill-box; transform-origin: center; animation: jr-spin 18s linear infinite; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sl-n-verdict.good { color: #4ade80; } :root:not([data-theme="light"]) .sl-n-verdict.warn { color: #fbbf24; }
  :root:not([data-theme="light"]) .sl-n-time.bed b, :root:not([data-theme="light"]) .sl-n-mid b, :root:not([data-theme="light"]) .sl-n-solo b { color: #a99bff; } :root:not([data-theme="light"]) .sl-n-time.wake b { color: #ffc53d; } }
:root[data-theme="dark"] .sl-n-verdict.good { color: #4ade80; } :root[data-theme="dark"] .sl-n-verdict.warn { color: #fbbf24; }
:root[data-theme="dark"] .sl-n-time.bed b, :root[data-theme="dark"] .sl-n-mid b, :root[data-theme="dark"] .sl-n-solo b { color: #a99bff; } :root[data-theme="dark"] .sl-n-time.wake b { color: #ffc53d; }
@media (max-width: 420px) { .sl-night { padding: 12px 12px 14px; } .sl-n-time b { font-size: 23px; } .sl-n-mid b { font-size: 26px; } .sl-n-row { grid-template-columns: minmax(0, 1fr) minmax(96px, 1fr) minmax(0, 1fr); gap: 6px; } .sl-n-time em { font-size: 10.5px; padding: 1px 6px; } }
/* the activity page's numbers, two by two on a phone: an odd last one takes the whole row */
@media (max-width: 560px) { .act-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .act-kpis > div:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* the week's rings: their colours and goals, and two buttons on (the goals in the settings, the road to the goal) */
.wa-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 12px 0 14px; padding: 0; list-style: none; font-size: 13px; color: var(--muted); }
.wa-keys li { display: inline-flex; align-items: center; gap: 6px; }
.wa-keys li b { color: var(--text); font-weight: 700; }
.wa-keys li > i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.wa-k-star { color: #d99a0b; } .wa-k-star svg { color: #f5b52e; }
.wa-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wa-link { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 14px 10px 12px; border-radius: 18px; text-align: center; color: var(--text); text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--border); -webkit-tap-highlight-color: transparent; transition: transform .15s, background .2s, border-color .2s; }
.wa-link.go { border-color: color-mix(in srgb, #f5a524 45%, var(--border));
  background: linear-gradient(to left, color-mix(in srgb, #f5a524 16%, var(--surface-2)), color-mix(in srgb, #f08a24 7%, var(--surface-2))); }
.wa-link:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.wa-link:active { transform: scale(.97); }
.wa-l-art { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: color-mix(in srgb, #64748b 14%, transparent); }
.wa-link.go .wa-l-art { background: color-mix(in srgb, #f5a524 20%, transparent); }
.wa-l-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.25; }
.wa-l-text b { font-size: 15px; font-weight: 800; white-space: nowrap; }
.wa-l-text small { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.wa-l-go { position: absolute; top: 12px; inset-inline-end: 10px; color: var(--muted); }
.wa-link.go .wa-l-go { color: #d97706; }
.wa-link.go .wa-l-art svg { animation: wa-star 3.2s ease-in-out infinite; }
@keyframes wa-star { 0%, 100% { rotate: 0deg; scale: 1; } 50% { rotate: 10deg; scale: 1.08; } }
@media (prefers-reduced-motion: reduce) { .wa-link.go .wa-l-art svg { animation: none; } }
/* a heart's chart: a living heart beside the numbers, beating gently at the pulse's pace, and small hearts for its days */
.lchart.heart .lc-head { position: relative; align-items: center; min-height: 78px; padding-inline-end: 86px; }
.lc-heart { position: absolute; top: 50%; inset-inline-end: 2px; display: grid; place-items: center; width: 78px; height: 78px; translate: 0 -50%; pointer-events: none; }
.lc-heart::before, .lc-heart::after { content: ""; position: absolute; inset: 12px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, #ff4d6d 38%, transparent) 30%, transparent 70%); animation: lc-halo calc(var(--beat) * 2) ease-out infinite; }
.lc-heart::after { animation-delay: var(--beat); }
.lc-heart svg { position: relative; width: 56px; height: 56px; overflow: visible; transform-origin: 50% 58%;
  filter: drop-shadow(0 6px 10px rgba(201, 24, 74, .38)); animation: lc-beat var(--beat) ease-in-out infinite; }
.lc-h-ecg { stroke-dasharray: 100 100; animation: lc-ecg calc(var(--beat) * 2) linear infinite; }
@keyframes lc-beat { 0%, 100% { scale: 1; } 14% { scale: 1.07; } 28% { scale: .99; } 40% { scale: 1.035; } 60% { scale: 1; } }
@keyframes lc-halo { 0% { scale: .75; opacity: .85; } 100% { scale: 1.55; opacity: 0; } }
@keyframes lc-ecg { from { stroke-dashoffset: 100; } to { stroke-dashoffset: -100; } }
.lchart.heart {
  --heart-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.3C9 19.1 2 14.6 2 8.7 2 5.5 4.4 3 7.4 3c2 0 3.6 1.1 4.6 2.8C13 4.1 14.6 3 16.6 3 19.6 3 22 5.5 22 8.7c0 5.9-7 10.4-10 12.6Z'/%3E%3C/svg%3E");
  --heart-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20C9.2 17.9 3.6 14.1 3.6 8.9 3.6 6.4 5.4 4.6 7.6 4.6c1.8 0 3.2 1.1 4.4 3 1.2-1.9 2.6-3 4.4-3 2.2 0 4 1.8 4 4.3 0 5.2-5.6 9-8.4 11.1Z' fill='none' stroke='black' stroke-width='3.2' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.lchart.heart .lc-dot::before { inset: 6.5px; border-radius: 0; box-shadow: none; background: var(--surface-2);
  -webkit-mask: var(--heart-fill) center / contain no-repeat; mask: var(--heart-fill) center / contain no-repeat; }
.lchart.heart .lc-dot::after { content: ""; position: absolute; inset: 6.5px; background: var(--lc); transition: transform .2s;
  -webkit-mask: var(--heart-line) center / contain no-repeat; mask: var(--heart-line) center / contain no-repeat; }
.lchart.heart .lc-dot.on::before { transform: scale(1.7); box-shadow: none; background: var(--lc); }
.lchart.heart .lc-dot.on::after { transform: scale(1.7); -webkit-mask-image: var(--heart-fill); mask-image: var(--heart-fill); background: var(--lc); animation: lc-dot-beat var(--beat) ease-in-out infinite; }
@keyframes lc-dot-beat { 0%, 100% { transform: scale(1.7); } 14% { transform: scale(1.95); } 30% { transform: scale(1.7); } 42% { transform: scale(1.85); } 60% { transform: scale(1.7); } }
@media (prefers-reduced-motion: reduce) { .lc-heart::before, .lc-heart::after, .lc-heart svg, .lc-h-ecg, .lchart.heart .lc-dot.on::after { animation: none; } .lc-h-ecg { stroke-dasharray: none; } }
/* a station cheering stands over the whole map: its bubble is never under the walker or another station's label */
.jr-stop.cheering { z-index: 9; }
/* the next meal's tile: its chip goes down a line when it doesn't fit beside the title; its button a plus in
   a round mark and its words in two lines, "הוספה" and the meal under it */
.next-tile header { flex-wrap: wrap; align-items: center; row-gap: 6px; }
.next-tile .tile-btn.next-add { justify-content: center; gap: 10px; padding: 9px 12px; white-space: normal; line-height: 1.2; text-align: start; }
/* the add button and the AI's next meal in one row, each half, never past the tile's edge */
.next-acts { display: flex; align-self: stretch; width: 100%; gap: 8px; margin-top: auto; min-width: 0; }
.next-acts .tile-btn.next-add { flex: 1 1 0; min-width: 0; margin-top: 0; }
.next-tile .tile-btn.next-ai { color: #6a46f0; background: color-mix(in srgb, #6a46f0 12%, transparent); }
.next-tile .tile-btn.next-ai:hover { background: color-mix(in srgb, #6a46f0 19%, transparent); }
.next-ai .na-plus { background: var(--ai-grad); box-shadow: 0 3px 8px rgba(106, 70, 240, .35); }
.next-ai .na-text small { color: color-mix(in srgb, #6a46f0 70%, var(--text)); }
:root[data-theme="dark"] .next-tile .tile-btn.next-ai { color: #c4b5fd; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .next-tile .tile-btn.next-ai { color: #c4b5fd; } }
.next-ai:hover .na-plus { transform: scale(1.08); }
@container (max-width: 300px) { .next-acts { gap: 6px; } .next-acts .na-text small { display: none; } .next-acts .tile-btn.next-add { gap: 6px; padding-inline: 8px; } }
.na-plus { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: var(--accent);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--accent) 35%, transparent); transition: transform .2s; }
.next-add:hover .na-plus { transform: rotate(90deg); }
.na-text { display: flex; flex-direction: column; min-width: 0; }
.na-text b { font-size: 15px; font-weight: 800; }
.na-text small { font-size: 12.5px; font-weight: 600; color: color-mix(in srgb, var(--accent) 75%, var(--text)); overflow-wrap: anywhere; }
/* a narrow next-meal tile (two to a row on a phone): the recipe idea stands its picture over its words */
.next-tile { container-type: inline-size; }
@container (max-width: 210px) {
  .next-recipe { flex-direction: column; align-items: stretch; text-align: center; gap: 6px; padding: 10px; }
  .next-recipe .next-pic { align-self: center; width: 56px; height: 56px; }
  .next-recipe > span:last-child { align-items: center; }
}
/* the add button's meal on one line, never bold: smaller in a narrow tile, cut with "…" only if still too long */
.na-text { overflow: hidden; }
.na-text small { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
@container (max-width: 210px) {
  .next-tile .tile-btn.next-add { gap: 8px; padding: 8px 10px; }
  .next-add .na-plus { width: 24px; height: 24px; }
  .next-add .na-plus svg { width: 14px; height: 14px; }
  .na-text b { font-size: 14px; }
  .na-text small { font-size: 11.5px; }
}
/* what the calorie goal means for the weight: plain words in a box with the same room on every side (a pill
   went oval around two or three lines) */
.jr-k-pace { margin-top: 6px; padding: 8px 12px; border-radius: 12px; font-size: 13.5px; font-weight: 400; line-height: 1.45; }
/* a station won is tapped for what was done to win it */
.jr-stop.won > i, .jr-stop.won .jr-label { pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.jr-stop.won:focus-visible { outline: none; }
.jr-stop.won:focus-visible > i { outline: 3px solid #fff; outline-offset: 3px; }
.jr-stop.won > i:active { scale: .94; }
.jr-me { pointer-events: none; }
.ji-did { font-size: 16px !important; font-weight: 500; }
.ji-goal { font-size: 13.5px; color: var(--muted); }
/* today's AI credit on the profile: a ring of the requests left, a dot for each, when they come back */
.ai-credit { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid color-mix(in srgb, #a78bfa 35%, var(--border));
  background: linear-gradient(to left, color-mix(in srgb, #a78bfa 13%, var(--surface)), color-mix(in srgb, #ec4899 8%, var(--surface))); }
.aic-ring { position: relative; flex: none; width: 68px; height: 68px; }
.aic-ring svg { width: 100%; height: 100%; }
.aic-track { fill: none; stroke: color-mix(in srgb, #a78bfa 20%, transparent); stroke-width: 7; }
.aic-arc { fill: none; stroke: url(#aicG); stroke-width: 7; stroke-linecap: round; animation: aic-fill 1s .2s ease-out both; }
@keyframes aic-fill { from { stroke-dasharray: 0 999; } }
.aic-ring > span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 25px; font-weight: 900; color: #7c3aed; font-variant-numeric: tabular-nums; }
.ai-credit.out .aic-ring > span { color: var(--muted); }
.aic-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; line-height: 1.3; }
.aic-text small { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.aic-text b { font-size: 18px; font-weight: 800; }
.aic-sub { font-size: 12.5px; color: var(--muted); }
.aic-dots { display: flex; flex-wrap: wrap; gap: 5px; margin: 3px 0 2px; }
.aic-dots i { width: 16px; height: 6px; border-radius: 999px; background: color-mix(in srgb, #a78bfa 22%, transparent); }
.aic-dots i.on { background: linear-gradient(90deg, #a78bfa, #ec4899); }
.aic-go { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, #a78bfa, #ec4899); box-shadow: 0 6px 14px rgba(167, 139, 250, .4); transition: transform .2s; }
.aic-go:active { transform: scale(.94); }
/* an account without a limit: what its requests cost, today and all the days together */
.ai-credit.has-cost { flex-wrap: wrap; }
.aic-cost { flex-basis: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, #a78bfa 22%, var(--border)); }
.aic-c { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, #a78bfa 9%, transparent); }
.aic-c small { font-size: 12px; font-weight: 700; color: var(--muted); }
.aic-c b { font-size: 20px; font-weight: 800; }
.aic-c span { font-size: 12px; color: var(--muted); }
.aic-note { grid-column: 1 / -1; margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.aic-go svg { animation: aic-twinkle 3s ease-in-out infinite; }
@keyframes aic-twinkle { 0%, 100% { rotate: 0deg; scale: 1; } 50% { rotate: 12deg; scale: 1.1; } }
@media (prefers-reduced-motion: reduce) { .aic-arc, .aic-go svg { animation: none; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .aic-ring > span { color: #c4b5fd; } }
:root[data-theme="dark"] .aic-ring > span { color: #c4b5fd; }
html.ai-off .ai-credit, html.ai-off .ai-credit-slot { display: none; }
/* the tiles' buttons: smaller, plain words (the next meal's "הוספה" keeps its weight) */
.tile-btn { font-size: 14px; font-weight: 500; }
/* the weight tile's update: a button at its bottom, as the tiles beside it have */
.weight-tile .wt-update { margin-top: auto; }
/* a tile's button sits at its bottom, so tiles side by side have their buttons on one line */
.dash-card > .tile-btn, .dash-card > .tile-actions { margin-top: auto; }
/* "+ כוס מים" on a tip: water splashes from the button, "+250 מ"ל" rises, the drop sips, the button says it */
.tip-action[data-water] { position: relative; overflow: visible; }
.tip-action.poured { animation: tw-press .45s ease-out; }
@keyframes tw-press { 0% { transform: scale(.94); } 55% { transform: scale(1.04); } 100% { transform: none; } }
.tw-done { display: inline-flex; align-items: center; gap: 6px; animation: tw-in .35s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes tw-in { from { opacity: 0; transform: translateY(6px) scale(.9); } }
.tw-fx { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.tw-wave { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.tw-wave::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: 0; height: 100%; border-radius: 40% 40% 0 0;
  background: linear-gradient(rgba(255, 255, 255, .35), rgba(255, 255, 255, .08)); transform: translateY(100%); animation: tw-wave .9s ease-out forwards; }
@keyframes tw-wave { 0% { transform: translateY(100%); } 45% { transform: translateY(10%); } 100% { transform: translateY(-110%); opacity: 0; } }
.tw-drop { position: absolute; left: 50%; top: 40%; width: 9px; height: 12px; margin: -6px 0 0 -4.5px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: linear-gradient(160deg, #e0f2ff, #60b2ff 55%, #1d6fe0); opacity: 0; animation: tw-drop .95s cubic-bezier(.2, .7, .35, 1) forwards; }
@keyframes tw-drop { 0% { opacity: 1; transform: translate(0, 0) scale(.3); } 45% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }
  100% { opacity: 0; transform: translate(calc(var(--dx) * 1.35), calc(var(--dy) + 46px)) scale(calc(var(--s) * .6)); } }
.tw-plus { position: absolute; left: 50%; top: -8px; padding: 4px 11px; border-radius: 999px; white-space: nowrap; font-size: 13px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #60b2ff, #1d6fe0); box-shadow: 0 6px 14px rgba(29, 111, 224, .4); opacity: 0; animation: tw-plus 1.5s ease-out forwards; }
@keyframes tw-plus { 0% { opacity: 0; transform: translate(-50%, 12px) scale(.6); } 18% { opacity: 1; transform: translate(-50%, -16px) scale(1.06); }
  30% { transform: translate(-50%, -18px) scale(1); } 75% { opacity: 1; transform: translate(-50%, -30px); } 100% { opacity: 0; transform: translate(-50%, -46px); } }
.tip-art.sip { animation: tw-sip .9s cubic-bezier(.3, 1.6, .5, 1); }
.tip-art.sip::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 3px solid #60b2ff; opacity: 0; animation: tw-ring .9s ease-out; pointer-events: none; }
@keyframes tw-sip { 0% { transform: scale(1); } 25% { transform: scale(1.2) rotate(-8deg); } 55% { transform: scale(.95) rotate(4deg); } 100% { transform: none; } }
@keyframes tw-ring { 0% { opacity: .9; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.5); } }
@media (prefers-reduced-motion: reduce) { .tip-action.poured, .tw-done, .tip-art.sip, .tip-art.sip::after { animation: none; } }
/* the watch's day bars: each a button that opens its day */
.wc-bar { padding: 0; border: 0; border-radius: 8px; background: none; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wc-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wc-bar:active i, .wc-bar.picked i { opacity: 1; filter: brightness(1.18) saturate(1.1); box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 0%, transparent), 0 6px 16px rgba(99, 102, 241, .35); }
.wc-bar.picked { background: color-mix(in srgb, var(--text) 6%, transparent); }
/* a day's window: its times or numbers in small boxes, its stages */
.dw-times { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; }
.dw-times span { padding: 7px 12px; border-radius: 12px; font-size: 14px; color: var(--muted); background: var(--row-alt); }
.dw-times b { color: var(--text); font-variant-numeric: tabular-nums; }
.dw-stages { width: 100%; text-align: start; }
/* a day without a value is no button; the mouse's bubble over a bar */
div.wc-bar { cursor: default; }
button.wc-bar:hover i { opacity: 1; filter: brightness(1.12); }
.wc-tip { position: absolute; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 11px; border-radius: 12px; white-space: nowrap;
  font-size: 12.5px; line-height: 1.3; color: var(--text); background: var(--surface); border: 1px solid var(--border); box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
  transform: translate(-50%, -100%); pointer-events: none; animation: wc-tip .16s ease-out both; }
.wc-tip b { font-size: 14px; } .wc-tip small, .wc-tip span { color: var(--muted); font-variant-numeric: tabular-nums; }
@keyframes wc-tip { from { opacity: 0; transform: translate(-50%, calc(-100% + 6px)); } }
/* the logo's menu on a phone: all of it in sight, the colour scheme too; a little more compact, and
   down over the bottom bar when it needs the room (it sits over it) */
@media (max-width: 640px) {
  .menu-panel.app-menu-panel { z-index: 45; max-height: calc(100dvh - 64px - var(--sa-top) - 14px - var(--sa-bottom)); }
  .app-menu-panel .am-head { padding: 12px 12px 13px; }
  .app-menu-panel .am-grid { gap: 7px; padding: 10px; }
  .app-menu-panel .am-item { padding: 9px 11px 10px; }
  .app-menu-panel .am-art { margin-bottom: 2px; }
  .app-menu-panel .am-art svg { width: 34px; height: 34px; }
  .app-menu-panel .am-item b { font-size: 15px; }
  /* (two lines at most rather than words cut with "…": a narrower screen, Display Zoom, or larger text) */
  .app-menu-panel .am-item small { max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .app-menu-panel .am-theme { margin: 2px 12px 12px; padding-top: 10px; }
}
/* the header's round buttons (accessibility, the bell, the profile) with a little room between them */
.top-actions { gap: 14px; }
@media (max-width: 430px) { .top-actions { gap: 11px; } .top-row { gap: 6px; } }
@media (max-width: 360px) { .top-actions { gap: 8px; } }
/* the logo's menu open: the floating accessibility button stays out of its way */
body:has(#appMenu:not([hidden])) .a11y-fab { display: none; }
/* a window in the middle of a wider screen (a tablet, a phone turned): it moves up by half the
   keyboard, to the middle of what is left above it, and is never taller than that */
@media (min-width: 601px) {
  dialog#dialog { transition: translate .32s cubic-bezier(.33, .8, .3, 1), max-height .32s cubic-bezier(.33, .8, .3, 1); }
  html.kb-open dialog#dialog { translate: 0 calc(var(--kb, 0px) / -2); max-height: calc(100dvh - var(--kb, 0px) - 32px); }
}
/* a setting's short line under its name, in the units and the accessibility button's rows too */
.uset-row > span small, .a11y-set-label small { display: block; margin-top: 1px; font-size: 12.5px; font-weight: 400; color: var(--muted); }
/* the settings' number editors: the stepper with its slider, room around it */
.num-edit .pe-stepper { margin: 6px 0 2px; }
.num-edit .pe-num input { width: 6ch; }
.num-edit .pe-range { margin: 14px 0 4px; }
/* a whole dish or meal in the search: a plate for its picture, its parts under its name */
.dish-pic { display: grid; place-items: center; background: color-mix(in srgb, #f08a24 14%, var(--surface-2)); border-radius: 12px; }
.dish-tag { color: #c2410c; background: color-mix(in srgb, #f08a24 16%, transparent); }
.sg-dish .sg-kcal, .ma-dish .sg-kcal { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* rows that end even: the last row's cards wider, four two and two (three and a lone one under them, the
   side menu closed) */
.dish-cards { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.dish-cards > .dish-card { flex: 1 1 260px; min-width: 0; }
.dish-cards:has(> :nth-child(4):last-child) > .dish-card { flex-basis: calc(50% - 5px); }
.dish-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; text-align: start; cursor: pointer; color: var(--text); font: inherit;
  background: var(--surface); border: 1px solid color-mix(in srgb, #f08a24 30%, var(--border)); box-shadow: var(--shadow); transition: transform .15s, border-color .2s; }
.dish-card:hover { border-color: #f08a24; } .dish-card:active { transform: scale(.98); }
.dish-card .dc-pic { flex: none; width: 52px; height: 52px; }
.dc-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.dc-text b { font-size: 15.5px; } .dc-text small { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.dish-card > svg { flex: none; color: #f08a24; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dish-tag { color: #fdba74; } }
:root[data-theme="dark"] .dish-tag { color: #fdba74; }
/* number fields: from the left, as numbers are written, whatever the page's direction */
input[type="number"], input[inputmode="decimal"], input[inputmode="numeric"] { direction: ltr; }
/* the week's two tiles in light: crisp white cards, the road to the goal warm gold, the goals' settings cool slate */
:root[data-theme="light"] .wa-link { background: #fff; border-color: #e3e8ef; box-shadow: 0 8px 20px -14px rgba(15, 23, 42, .35), 0 1px 2px rgba(15, 23, 42, .06); }
:root[data-theme="light"] .wa-link .wa-l-art { background: linear-gradient(145deg, #eef2f7, #dde4ee); box-shadow: inset 0 1px 0 #fff, 0 3px 8px -4px rgba(15, 23, 42, .25); }
:root[data-theme="light"] .wa-link .wa-l-text b { color: #0f172a; }
:root[data-theme="light"] .wa-link .wa-l-text small { color: #64748b; }
:root[data-theme="light"] .wa-link .wa-l-go { color: #94a3b8; }
:root[data-theme="light"] .wa-link.go { background: linear-gradient(150deg, #fffaf0, #ffedc7); border-color: #f2c66d; box-shadow: 0 10px 22px -14px rgba(217, 119, 6, .55), 0 1px 2px rgba(120, 53, 15, .08); }
:root[data-theme="light"] .wa-link.go .wa-l-art { background: radial-gradient(circle at 35% 30%, #ffffff, #fff1cc 70%); box-shadow: inset 0 0 0 2px #fcd34d, 0 4px 12px -4px rgba(217, 119, 6, .5); }
:root[data-theme="light"] .wa-link.go .wa-l-text b { color: #7c2d12; }
:root[data-theme="light"] .wa-link.go .wa-l-text small { color: #b45309; }
:root[data-theme="light"] .wa-link.go .wa-l-go { color: #d97706; }
:root[data-theme="light"] .wa-link:hover { border-color: #cbd5e1; }
:root[data-theme="light"] .wa-link.go:hover { border-color: #f59e0b; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .wa-link { background: #fff; border-color: #e3e8ef; box-shadow: 0 8px 20px -14px rgba(15, 23, 42, .35), 0 1px 2px rgba(15, 23, 42, .06); }
  :root:not([data-theme]) .wa-link .wa-l-art { background: linear-gradient(145deg, #eef2f7, #dde4ee); box-shadow: inset 0 1px 0 #fff, 0 3px 8px -4px rgba(15, 23, 42, .25); }
  :root:not([data-theme]) .wa-link .wa-l-text b { color: #0f172a; }
  :root:not([data-theme]) .wa-link .wa-l-text small { color: #64748b; }
  :root:not([data-theme]) .wa-link .wa-l-go { color: #94a3b8; }
  :root:not([data-theme]) .wa-link.go { background: linear-gradient(150deg, #fffaf0, #ffedc7); border-color: #f2c66d; box-shadow: 0 10px 22px -14px rgba(217, 119, 6, .55), 0 1px 2px rgba(120, 53, 15, .08); }
  :root:not([data-theme]) .wa-link.go .wa-l-art { background: radial-gradient(circle at 35% 30%, #ffffff, #fff1cc 70%); box-shadow: inset 0 0 0 2px #fcd34d, 0 4px 12px -4px rgba(217, 119, 6, .5); }
  :root:not([data-theme]) .wa-link.go .wa-l-text b { color: #7c2d12; }
  :root:not([data-theme]) .wa-link.go .wa-l-text small { color: #b45309; }
  :root:not([data-theme]) .wa-link.go .wa-l-go { color: #d97706; }
}
/* the weight page: no weighing kept for the day shown, said softly under its date */
.kg-unsaved { display: flex; align-items: flex-start; gap: 10px; width: min(100%, 360px); margin: -4px auto 12px; padding: 10px 14px; border-radius: 14px; text-align: start;
  color: #8a5300; background: color-mix(in srgb, #f5a524 13%, var(--surface)); border: 1px solid color-mix(in srgb, #f5a524 38%, transparent); animation: kg-note-in .35s ease-out; }
.kg-unsaved[hidden] { display: none; }
.kg-unsaved > svg { flex: none; margin-top: 1px; }
.kg-unsaved span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kg-unsaved b { font-size: 14px; } .kg-unsaved small { font-size: 12.5px; line-height: 1.45; opacity: .85; }
@keyframes kg-note-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kg-unsaved { color: #fcd38a; } }
:root[data-theme="dark"] .kg-unsaved { color: #fcd38a; }
/* no start weight: a card to set it */
.sw-card { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 12px 14px; border-radius: 16px; cursor: pointer; text-align: start; font: inherit; color: var(--text);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); transition: transform .15s, background .2s; }
.sw-card:hover { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); } .sw-card:active { transform: scale(.98); }
.sw-card-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #fff; background: var(--accent); }
.sw-card-t { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.sw-card-t b { font-size: 15px; } .sw-card-t small { font-size: 12.5px; color: var(--muted); }
.sw-card > svg:last-child { flex: none; color: var(--accent); }
/* the start weight's window: a road from the scale to the goal's flag */
.sw-stage { display: grid; place-items: center; padding: 6px 0 0; border-radius: 20px; background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); }
.sw-art { width: 190px; height: auto; overflow: visible; }
.sw-road { fill: none; stroke: color-mix(in srgb, var(--accent) 24%, var(--surface-2)); stroke-width: 14; stroke-linecap: round; }
.sw-lane { fill: none; stroke: var(--surface); stroke-width: 2.2; stroke-dasharray: 6 7; stroke-linecap: round; animation: sw-lane 1.6s linear infinite; }
@keyframes sw-lane { to { stroke-dashoffset: -26; } }
.sw-goal line { stroke: var(--art-line); stroke-width: 2.4; stroke-linecap: round; }
.sw-cloth { fill: #f5b301; transform-origin: 146px 11px; animation: sw-wave 2.4s ease-in-out infinite; }
@keyframes sw-wave { 50% { transform: scaleX(.86) skewY(-4deg); } }
.sw-end { fill: var(--surface); stroke: #f5b301; stroke-width: 2.4; }
.sw-scale { fill: var(--accent); }
.sw-dial { fill: #fff; stroke: color-mix(in srgb, var(--accent) 60%, #000); stroke-width: 1.5; }
.sw-needle { stroke: #e2231a; stroke-width: 2.2; stroke-linecap: round; transform-origin: 34px 76px; animation: sw-needle 1.4s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes sw-needle { from { transform: rotate(-110deg); } to { transform: rotate(18deg); } }
.sw-grip { stroke: color-mix(in srgb, #fff 55%, var(--accent)); stroke-width: 3; stroke-linecap: round; }
.sw-lead { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text); }
.sw-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sw-chip { display: flex; flex-direction: column; gap: 1px; padding: 7px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.sw-chip small { font-size: 11.5px; color: var(--muted); } .sw-chip b { font-size: 14px; }
.sw-from { margin: -4px 0 0; font-size: 13px; color: var(--muted); }
.sw .wi-diff:empty { display: none; }
.sw-later { justify-self: center; margin-top: -4px; padding: 8px 18px; border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--muted); cursor: pointer; border-radius: 10px; }
.sw-later:hover { color: var(--text); background: var(--surface-2); }
@media (prefers-reduced-motion: reduce) { .sw-lane, .sw-cloth, .sw-needle, .kg-unsaved { animation: none; } .sw-needle { transform: rotate(18deg); } }
html[data-a11y~="motion"] .sw-lane, html[data-a11y~="motion"] .sw-cloth, html[data-a11y~="motion"] .sw-needle { animation: none; }
html[data-a11y~="motion"] .sw-needle { transform: rotate(18deg); }
/* the x that empties a search field (field-clear.js): at the far side, a little in from the edge */
.field-x { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-inline-end: -6px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.field-x[hidden] { display: none; }
.field-x span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--surface); background: color-mix(in srgb, var(--muted) 75%, transparent); transition: background .2s, transform .15s; }
.field-x:hover span { background: var(--text); }
.field-x:active span { transform: scale(.88); }
.has-x input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
/* a drink in the search (drinks.js): its picture, name and line, its own − and + and an add */
.dk-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
div.dk-row { border-radius: 12px; }
.dk-row:hover, .dk-row.active { background: var(--row-alt); }
.dk-pic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, #3a96ee 12%, var(--surface-2)); }
.dk-pic svg { width: 40px; height: 40px; }
.dk-row .sg-kcal { font-size: 13px; line-height: 1.35; }
.drink-tag { color: #1d6fd1; background: color-mix(in srgb, #3a96ee 15%, transparent); }
.dq { flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.dq-btn { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer; font: inherit; font-size: 19px; font-weight: 700; line-height: 1;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); transition: transform .12s, background .2s, color .2s; }
.dq-btn:hover { background: var(--accent); color: var(--accent-text, #fff); }
.dq-btn:active { transform: scale(.88); }
.dq-val { min-width: 54px; text-align: center; font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dq-add { position: relative; flex: none; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--accent); color: var(--accent-text, #fff); transition: transform .15s, background .25s; }
.dq-add:active { transform: scale(.9); }
.dq-done { position: absolute; inset: 0; display: grid; place-items: center; font-size: 17px; font-weight: 800; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.dq-add.done { background: #1f9d63; }
.dq-add.done > svg { opacity: 0; }
.dq-add.done .dq-done { opacity: 1; transform: none; }
.dk-cards { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 18px; }
@media (min-width: 700px) { .dk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dk-cards > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
.dk-cards .dk-row { border: 1px solid color-mix(in srgb, #3a96ee 28%, var(--border)); background: var(--surface); box-shadow: var(--shadow); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .drink-tag { color: #93c5fd; } }
:root[data-theme="dark"] .drink-tag { color: #93c5fd; }
@media (max-width: 380px) { .dq-val { min-width: 46px; font-size: 12.5px; } .dq-btn { width: 28px; height: 28px; } .dk-row { gap: 8px; padding-inline: 10px; } }
/* a drink's window: its kind, the amount (− and +, the usual sizes), the sweetening and the calories */
.dk { display: grid; gap: 14px; text-align: center; }
.dk > * { min-width: 0; }
.dk-stage { display: grid; place-items: center; height: 112px; border-radius: 20px; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, #3a96ee 18%, transparent), transparent 70%); }
.dk-stage svg { width: 100px; height: 100px; animation: dk-pop .4s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes dk-pop { from { transform: scale(.7); opacity: 0; } }
.dk-kinds { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; justify-content: safe center; }
.dk-kinds::-webkit-scrollbar { display: none; }
.dk-kind { flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; }
.dk-kind[aria-checked="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--surface)); color: var(--accent); font-weight: 700; }
.dk-stepper { gap: 14px; margin: 0; }
.dk-stepper .round-btn.big { width: 58px; height: 58px; font-size: 30px; flex: none; }
.dk-amount { min-width: 0; flex: 0 1 190px; padding: 10px; }
.dk-amount b { font-size: 34px; }
.dk-amount span { min-height: 1.3em; font-size: 13px; color: var(--muted); }
.dk-sizes { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 8px; }
.dk-size { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 6px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; transition: transform .12s; }
.dk-size b { font-size: 14px; } .dk-size small { font-size: 11.5px; color: var(--muted); }
.dk-size[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.dk-size[aria-pressed="true"] b { color: var(--accent); }
.dk-size:active { transform: scale(.95); }
.dk-sweet { margin: 0; box-shadow: none; border: 1px solid var(--border); justify-content: center; }
.dk-sweet[hidden] { display: none; }
.dk-line { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--muted); line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .dk-stage svg { animation: none; } }
html[data-a11y~="motion"] .dk-stage svg { animation: none; }
/* a food's − and + in the search's lists (quick-food.js), and its add marked once added */
.sg-add { position: relative; transition: transform .15s, background .25s; }
.sg-add .dq-done { position: absolute; inset: 0; display: grid; place-items: center; font-size: 17px; font-weight: 800; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.sg-add.done { background: #1f9d63; }
.sg-add.done > svg { opacity: 0; }
.sg-add.done .dq-done { opacity: 1; transform: none; }
.sg-add:active { transform: scale(.9); }
.ma-q { cursor: pointer; }
.fq .dq-val { min-width: 30px; font-size: 14px; }
/* the steppers sit under the name and the line, at its start */
.sg-text > .dq { align-self: flex-start; margin-top: 7px; }
.dk-ctrls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 7px; }
/* coffee and tea: the sweetening beside the amount, its choices under the row */
.dk-sw-btn { display: inline-flex; align-items: center; gap: 5px; height: 38px; padding: 0 12px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap;
  color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); transition: color .2s, background .2s, border-color .2s; }
.dk-sw-btn svg:last-child { transition: transform .2s; }
.dk-sw-btn[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }
.dk-sw-btn.on { color: #b45309; border-color: color-mix(in srgb, #f59e0b 45%, transparent); background: color-mix(in srgb, #f59e0b 12%, var(--surface)); }
.dk-sw-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding: 8px; border-radius: 14px; background: var(--surface-2); animation: kg-note-in .25s ease-out; }
.dk-sw-list[hidden] { display: none; }
.dk-sw-list .sp-chip { min-height: 36px; padding: 4px 10px; font-size: 13px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dk-sw-btn.on { color: #fcd34d; } }
:root[data-theme="dark"] .dk-sw-btn.on { color: #fcd34d; }
/* under the phone's switch: where its notifications stand (settings.js notifyStatus) */
.notify-status { align-items: flex-start; gap: 12px; }
.notify-status[hidden] { display: none; }
.notify-status .ns-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; }
.notify-status.good .ns-ico { background: #1f9d63; } .notify-status.warn .ns-ico { background: #d97706; } .notify-status.bad .ns-ico { background: #dc2626; }
.notify-status.bad { background: color-mix(in srgb, #dc2626 9%, var(--surface)); }
.notify-status.warn { background: color-mix(in srgb, #d97706 9%, var(--surface)); }
.notify-status .set-label small { display: block; margin-top: 3px; line-height: 1.5; color: var(--muted); }
/* the diary's weight tile with no weighing: 0 in grey, and a word to weigh in */
.weight-tile.no-weight .tile-num b { color: var(--muted); }
.wt-missing { display: flex; flex-direction: column; gap: 3px; margin: 10px 0 0; padding: 10px 12px; border-radius: 14px; text-align: start;
  color: #8a5300; background: color-mix(in srgb, #f5a524 13%, var(--surface)); border: 1px solid color-mix(in srgb, #f5a524 38%, transparent); }
.wt-missing b { font-size: 14px; } .wt-missing span { font-size: 12.5px; line-height: 1.45; opacity: .9; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wt-missing { color: #fcd38a; } }
:root[data-theme="dark"] .wt-missing { color: #fcd38a; }
/* the weighings list: a card for each, its date in a badge, the weight large, its change as a pill */
.wt-hist { gap: 8px; margin-top: 4px; }
.wt-hist li { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto 34px; grid-template-areas: "date day kg del" "date chg kg del";
  column-gap: 12px; row-gap: 5px; align-items: center; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--border);
  background: var(--surface-2); transition: border-color .2s, background .2s; }
.wt-hist li:last-child { border-bottom: 1px solid var(--border); }
.wt-hist li.latest { border-color: color-mix(in srgb, #8b5cf6 45%, var(--border)); background: color-mix(in srgb, #8b5cf6 7%, var(--surface-2)); }
.wt-date { grid-area: date; display: grid; place-content: center; justify-items: center; width: 46px; height: 46px; border-radius: 13px; line-height: 1.05;
  color: #6d28d9; background: color-mix(in srgb, #8b5cf6 15%, var(--surface)); }
.wt-date b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wt-date small { font-size: 11px; font-weight: 600; opacity: .85; }
.wt-hist .wt-day { grid-area: day; align-self: end; gap: 1px; }
.wt-hist .wt-day b { font-size: 14.5px; font-weight: 700; }
.wt-hist .wt-day small { font-size: 11.5px; }
.wt-hist .wt-pill { grid-area: chg; justify-self: start; align-self: start; display: inline-flex; align-items: center; gap: 5px; min-width: 0; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; text-align: start; }
.wt-pill.good { color: #15803d; background: color-mix(in srgb, #1f9d63 15%, transparent); }
.wt-pill.bad { color: #c2410c; background: color-mix(in srgb, #e07a12 15%, transparent); }
.wt-pill.flat { color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent); }
.wt-pill.first { color: #6d28d9; background: color-mix(in srgb, #8b5cf6 15%, transparent); }
.wt-kg { grid-area: kg; display: flex; align-items: baseline; gap: 4px; }
.wt-kg b { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wt-kg small { font-size: 12.5px; color: var(--muted); }
.wt-hist .wt-del { grid-area: del; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); }
.wt-hist .wt-del:hover { color: #df4339; background: color-mix(in srgb, #df4339 12%, var(--surface)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.wt-date, .wt-pill.first) { color: #c4b5fd; } :root:not([data-theme="light"]) .wt-pill.good { color: #4ade80; } :root:not([data-theme="light"]) .wt-pill.bad { color: #fdba74; } }
:root[data-theme="dark"] :is(.wt-date, .wt-pill.first) { color: #c4b5fd; }
:root[data-theme="dark"] .wt-pill.good { color: #4ade80; }
:root[data-theme="dark"] .wt-pill.bad { color: #fdba74; }
/* the tip's window: its better choice on top; going on as asked and closing without adding, side by side, the same size */
.nd-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.nd-pair .btn { min-height: 50px; padding: 8px 10px; font-size: 15px; line-height: 1.25; white-space: normal; }
.nd-close { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); }
.nd-close:hover { color: var(--text); }
.nd-close svg { flex: none; }
@media (max-width: 340px) { .nd-pair { grid-template-columns: 1fr; } }
/* a price as a tag (core.js priceTag): "מ-" small, the price large with its sign, the price of 100 g beside it */
.price-tag-wrap { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.price-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px 4px 10px; border-radius: 999px; line-height: 1; white-space: nowrap;
  color: #15803d; background: color-mix(in srgb, #22a06b 13%, var(--surface)); border: 1px solid color-mix(in srgb, #22a06b 32%, transparent); }
.price-tag svg { flex: none; opacity: .85; }
.price-tag small { font-size: 11.5px; font-weight: 600; opacity: .8; }
.price-tag b { font-size: 15.5px; font-weight: 800; font-variant-numeric: tabular-nums; direction: ltr; }
.price-tag .pt-cur { font-size: 13px; font-weight: 700; }
.price-per { font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.fx-price { display: block; margin-top: 7px; font-size: inherit; font-weight: inherit; color: inherit; }
.card .price { display: block; margin-top: 4px; font-weight: inherit; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .price-tag { color: #4ade80; } }
:root[data-theme="dark"] .price-tag { color: #4ade80; }
/* the day by the hour: what was drunk and when */
.dh-water { margin-top: 16px; padding: 12px 12px 10px; border-radius: 16px; background: color-mix(in srgb, #3a96ee 7%, var(--surface)); border: 1px solid color-mix(in srgb, #3a96ee 22%, var(--border)); }
.dh-water header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dh-water h4 { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 15.5px; }
.dh-wsum { font-size: 13px; color: var(--muted); }
.dh-wsum b { font-size: 15px; color: #1d6fd1; font-variant-numeric: tabular-nums; }
.dh-wbar-total { display: block; height: 7px; margin-top: 8px; border-radius: 99px; background: color-mix(in srgb, #3a96ee 16%, transparent); overflow: hidden; }
.dh-wbar-total i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7cc8ff, #2f8ff0); }
.dh-water .dh-chart { margin-top: 10px; }
.dh-warea { fill: color-mix(in srgb, #3a96ee 16%, transparent); }
.dh-wrun { fill: none; stroke: #3a96ee; stroke-width: 2.2; stroke-linejoin: round; }
.dh-wnow-dot { fill: #3a96ee; stroke: var(--surface); stroke-width: 2; }
.dh-legend i.wrun { background: #3a96ee; }
.dh-wnotes li { background: color-mix(in srgb, #3a96ee 11%, var(--surface)); }
.dh-what .dh-drop { display: inline-block; width: 8px; height: 10px; margin-inline-end: 6px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: #3a96ee; vertical-align: -1px; }
.dh-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.dh-ml { font-size: 12px; font-weight: 700; color: #1d6fd1; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.dh-wsum b, .dh-ml) { color: #7cc8ff; } }
:root[data-theme="dark"] :is(.dh-wsum b, .dh-ml) { color: #7cc8ff; }
/* today's capsule, already on screen, is a button (the day by the hour): it looks as before */
button.wcap { font: inherit; color: inherit; border: 0; padding: 0; background: none; cursor: pointer; }
button.wcap:active .wcap-glass { transform: scale(.96); }
.dh-what .dh-drop.other { background: #e0a13a; }
/* the road's tile: its button into the map at its foot, apart from the words above it */
.journey-tile .jr-go { margin-top: auto; padding-top: 10px; padding-bottom: 10px; text-decoration: none;
  color: #a16207; background: color-mix(in srgb, #f5b301 16%, transparent); }
.journey-tile .jr-tile-body { margin-bottom: 12px; }
.journey-tile .jr-go:active { transform: scale(.97); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .journey-tile .jr-go { color: #fcd34d; } }
:root[data-theme="dark"] .journey-tile .jr-go { color: #fcd34d; }
/* the weighings list: the change's pill has the row under the day and the weight to itself, so it
   never runs over the number (a long one wraps) */
.wt-hist li { grid-template-areas: "date day kg del" "date chg chg del"; }
.wt-hist .wt-pill { max-width: 100%; white-space: normal; line-height: 1.35; }
.wt-hist .wt-kg { align-self: end; }
/* the tips' drawings: the red labels stamped on beside the package, the pan spitting its oil */
.nd-label-art { width: 176px !important; }
.nd-pack { transform-box: fill-box; transform-origin: 50% 100%; animation: nd-tilt 3.2s ease-in-out infinite; }
.nd-stamp { transform-box: fill-box; transform-origin: center; animation: nd-stamp .55s calc(.35s + var(--i) * .28s) cubic-bezier(.3, 1.5, .5, 1) both; }
.nd-stamp rect { filter: drop-shadow(0 3px 4px rgba(127, 29, 29, .35)); }
.nd-spit path { transform-box: fill-box; transform-origin: center; animation: nd-hop 1.6s calc(var(--i) * -.33s) ease-out infinite; }
.nd-bubbles circle { animation: nd-blink 1.1s calc(var(--i) * -.27s) ease-in-out infinite; }
.nd-heat path { animation: nd-float 2.2s ease-in-out infinite; } .nd-heat path:nth-child(2) { animation-delay: -.7s; } .nd-heat path:nth-child(3) { animation-delay: -1.4s; }
@keyframes nd-stamp { 0% { opacity: 0; scale: 1.9; } 60% { opacity: 1; scale: .92; } 100% { scale: 1; } }
@keyframes nd-hop { 0% { opacity: 0; translate: 0 12px; scale: .6; } 25% { opacity: 1; } 70% { opacity: 1; translate: 0 -10px; scale: 1; } 100% { opacity: 0; translate: 0 2px; scale: .8; } }
@media (prefers-reduced-motion: reduce) { .nd-stamp, .nd-spit path, .nd-bubbles circle, .nd-heat path, .nd-pack { animation: none; } }
html[data-a11y~="motion"] :is(.nd-stamp, .nd-spit path, .nd-bubbles circle, .nd-heat path, .nd-pack) { animation: none; }
/* the logo's menu: its drawings larger, in the same room (the extra size reaches into the card's
   padding and the drawing's own margins), so the cards keep their size and the words stay clear */
.am-art svg { display: block; width: 52px; height: 52px; margin: -8px -4px -4px; }
@media (max-width: 640px) {
  .app-menu-panel .am-art svg { width: 46px; height: 46px; margin: -8px -4px -4px; }
}
/* the drinks' time: the window's day and hour, the water page's hour, the tile's last drink */
.dk-when { display: grid; text-align: start; }
.water-when { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 12px; text-align: start; }
.water-when small { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
@media (max-width: 420px) { .water-when { grid-template-columns: 1fr; gap: 6px; } }
.water-left { display: none; }
/* the water page's look (the user's picture): a blue panel, waves across its top and a drop in its corner,
   the title in the middle, the amount in a box, + filled and − quiet; the last drink's card */
.water-page { position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(170deg, color-mix(in srgb, #2f8ff0 16%, var(--surface)), color-mix(in srgb, #2f8ff0 5%, var(--surface)) 60%);
  border: 1px solid color-mix(in srgb, #2f8ff0 22%, var(--border)); }
.wp-sea { position: absolute; z-index: -1; inset: 0 0 auto 0; height: 150px; pointer-events: none; }
.wp-sea > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; }
.wp-w1 { fill: color-mix(in srgb, #2f8ff0 10%, transparent); }
.wp-w2 { fill: color-mix(in srgb, #60a5fa 7%, transparent); }
.wp-drop { position: absolute; top: 22px; left: 22px; width: 38px; height: auto; fill: color-mix(in srgb, #3b82f6 55%, transparent); stroke: color-mix(in srgb, #bfdbfe 70%, transparent); }
.wp-drop path:first-child { stroke: none; }
.water-top h3 { font-size: 24px; font-weight: 900; }
.water-side .big-value { border-radius: 20px; background: color-mix(in srgb, #0b1a33 6%, var(--surface)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #3b82f6 45%, transparent); }
.water-side .big-value b { color: #3b82f6; }
.water-btns .round-btn.big[data-ml^="-"] { color: var(--text); background: color-mix(in srgb, var(--text) 9%, var(--surface)); box-shadow: inset 0 0 0 1px var(--border); }
.water-btns .round-btn.big:not([data-ml^="-"]) { color: #fff; background: linear-gradient(160deg, #60a5fa, #2563eb); box-shadow: 0 8px 20px -8px #2563eb; }
.water-last-card { display: none; }
.wlc-ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: #a78bfa; background: color-mix(in srgb, #8b5cf6 16%, transparent); }
.wlc-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; text-align: start; }
.wlc-t small { font-size: 13px; color: var(--muted); }
.wlc-t b { font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; text-align: start; }
.wlc-t b[dir="ltr"] { align-self: flex-start; }
.wlc-t span { font-size: 13px; color: var(--muted); }
.wlc-t b.wlc-none { font-size: 16px; font-weight: 700; }
.wp-drop { width: 26px; top: 14px; left: 14px; }
/* the page wide enough (a computer's, a tablet's on its side): the title over two halves, the glass
   with its amount and its + and − on one, and on the other a card of how far the day is (what is
   left to the goal, the bar) and the hour of the drinks. Narrower, as on the phone */
.water-page { container-type: inline-size; }
@container (min-width: 800px) {
  .water-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "top top" "main info"; gap: 18px 32px; align-items: center; padding: 6px 8px 8px; }
  .water-grid > .water-top { grid-area: top; }
  .water-grid > .water-main { grid-area: main; margin: 0 auto; max-width: 480px; gap: 26px; }
  .water-side .big-value { max-width: 220px; padding: 14px 16px; }
  .water-side .big-value b { font-size: 48px; }
  .water-grid > .water-info {
    grid-area: info; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 20px; text-align: start;
    background: color-mix(in srgb, #2f8ff0 7%, var(--surface)); border: 1px solid color-mix(in srgb, #2f8ff0 18%, var(--border));
  }
  .water-left { display: block; margin: 0; font-size: 17px; font-weight: 600; color: var(--muted); }
  .water-left b { font-size: 26px; font-weight: 800; color: #2f8ff0; }
  .water-info .water-bar { max-width: none; margin: 0; }
  .water-info .h-track { height: 12px; }
  .water-info .water-when { grid-template-columns: 1fr; gap: 6px; margin: 0; padding-top: 14px; border-top: 1px solid var(--border); }
  .water-info .water-when .pick-card { max-width: 260px; }
  .water-top h3 { font-size: 30px; }
  .wp-drop { width: 46px; top: 26px; left: 30px; }
  .water-last-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--text) 4%, var(--surface)); box-shadow: inset 0 0 0 1px var(--border); }
}
/* the drinks' cards in rows that end even (diary.js rowOf): as many to a row as divide the group */
.drinks-all { container-type: inline-size; }
@container (min-width: 900px) { .drinks { grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); } }
@container (min-width: 640px) and (max-width: 899.98px) { .drinks { grid-template-columns: repeat(var(--cols-mid, 4), minmax(0, 1fr)); } }
/* the last drink: its hour (and how long ago) on one line, what it was under it, the clock beside both */
.water-last { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.water-last svg { flex: none; margin-top: 1px; color: #3a96ee; }
.wl-t { display: flex; flex-direction: column; min-width: 0; }
.wl-when { white-space: nowrap; }
.wl-what { font-weight: 600; color: color-mix(in srgb, var(--text) 80%, var(--muted)); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* the day by the hour's charts at the pointer: the hour lit, and a card with all of it */
.dh-chart { position: relative; }
.dh-chart .dh-svg { touch-action: pan-y; cursor: crosshair; -webkit-user-select: none; user-select: none; }
.dh-hit { pointer-events: all; }
.dh-guide { fill: color-mix(in srgb, var(--accent) 16%, transparent); stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 1; pointer-events: none; }
.dh-chart-water .dh-guide { fill: color-mix(in srgb, #3a96ee 16%, transparent); stroke: color-mix(in srgb, #3a96ee 55%, transparent); }
.dh-tip { position: absolute; top: 0; z-index: 3; display: flex; flex-direction: column; gap: 4px; width: min(250px, 100%); padding: 10px 12px; border-radius: 14px; pointer-events: none;
  background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--border); box-shadow: 0 12px 28px rgba(5, 12, 30, .35); text-align: start;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: kg-note-in .16s ease-out; }
.dh-tip[hidden] { display: none; }
.dh-tip-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.dh-tip-h em { font-style: normal; font-size: 13px; font-weight: 800; color: var(--accent); }
.dh-chart-water .dh-tip-h em { color: #3a96ee; }
.dh-tip-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 6px; font-size: 12.5px; line-height: 1.35; }
.dh-tip-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-tip-row i:not(.dh-drop) { width: 8px; height: 8px; border-radius: 50%; background: var(--meal); }
.dh-tip-row small { color: var(--muted); font-variant-numeric: tabular-nums; }
.dh-tip-row em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.dh-tip-none { font-size: 12.5px; color: var(--muted); }
.dh-tip-sum { margin-top: 2px; padding-top: 5px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.dh-tip-row .dh-drop { display: inline-block; width: 8px; height: 10px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: #3a96ee; }
.dh-tip-row .dh-drop.other { background: #e0a13a; }
/* the panel's report button: in the other corner, as the look's switch (right, where it is left) */
#heroMain > .hs-report-pick { left: auto; right: 0; top: 6px; z-index: 4; }
#heroMain:has(.hero-side) > .hs-report-pick { left: auto; right: -9px; top: -9px; }
#heroMain:has(.hero-side) > .hs-report-pick .hs-switch { width: 38px; height: 38px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .38); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .5), 0 0 0 3px rgba(0, 0, 0, .06); }
/* the day's report window: its bar, then the A4 sheet, smaller to fit */
.dr-dialog .dlg-body { padding-top: 10px; }
.dr .xbar { margin-bottom: 10px; }
.dr-stage { padding: 6px 0 4px; background: color-mix(in srgb, var(--text) 6%, transparent); border-radius: 14px; }
.day-report .pr-summary td:nth-child(2) { text-align: start; width: auto; }
.day-report .pr-day td:first-child { width: auto; }
.day-report .pr-summary th:nth-child(2) { text-align: start; width: auto; }
/* a button at work (core.js busyButton): its spinner, and the veil over its window */
.btn-spin { display: inline-block; flex: none; width: 15px; height: 15px; margin-inline-end: 8px; border-radius: 50%; border: 2.5px solid currentColor; border-top-color: transparent;
  vertical-align: -2px; animation: spin .8s linear infinite; }
button[aria-busy="true"] { cursor: progress; opacity: .92; }
.dlg-busy { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: inherit;
  background: color-mix(in srgb, var(--surface) 72%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: kg-note-in .2s ease-out; cursor: progress; }
.dlg-busy p { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
/* the road's tile: its picture, words and button together, a small gap between, in the middle of the room */
.journey-tile .jr-group { display: flex; flex-direction: column; gap: 14px; margin-block: auto; }
.journey-tile .jr-group .jr-go { margin-top: 0; }
.journey-tile .jr-group .jr-tile-body { margin-bottom: 0; }
/* a dish's sizes, as chips under its line (dish-add.js sizeChips) */
.dz-sizes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.dz-size { display: inline-flex; align-items: baseline; gap: 4px; min-height: 30px; padding: 4px 11px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--border); transition: background .2s, border-color .2s, transform .12s; }
.dz-size small { font-size: 11px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.dz-size[aria-checked="true"] { color: #c2410c; border-color: color-mix(in srgb, #f08a24 60%, transparent); background: color-mix(in srgb, #f08a24 14%, var(--surface)); }
.dz-size[aria-checked="true"] small { color: inherit; }
.dz-size:active { transform: scale(.94); }
div.dish-card, div.ma-dish { cursor: pointer; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dz-size[aria-checked="true"] { color: #fdba74; } }
:root[data-theme="dark"] .dz-size[aria-checked="true"] { color: #fdba74; }
/* the sleep tile: three see-through clouds along its top, a little apart, drifting slowly together behind it
   (the only place they are set: earlier ones, five across the card, were here and further down) */
.sleep-tile { position: relative; overflow: hidden; isolation: isolate; }
.sleep-tile > :not(.sleep-clouds) { position: relative; z-index: 1; }
.sleep-clouds { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sleep-clouds i { position: absolute; display: block; color: #a5b4fc; opacity: .1; animation: sc-drift ease-in-out infinite; }
.sleep-clouds svg { display: block; width: 100%; height: auto; fill: currentColor; }
/* (under the title and "פרטים", in the empty side beside the night's hours, each in a row of its own) */
.sleep-clouds .sc-0 { top: 56px; width: 50px; left: 5%; opacity: .11; }
.sleep-clouds .sc-1 { top: 92px; width: 34px; left: 19%; opacity: .08; }
.sleep-clouds .sc-2 { top: 128px; width: 44px; left: 11%; opacity: .1; }
@keyframes sc-drift { 0% { translate: -22% 0; } 50% { translate: 22% -3px; } 100% { translate: -22% 0; } }
:root[data-theme="light"] .sleep-clouds i { color: #6366f1; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .sleep-clouds i { color: #6366f1; } }
@media (prefers-reduced-motion: reduce) { .sleep-clouds i { animation: none; } }
html[data-a11y~="motion"] .sleep-clouds i { animation: none; }
/* the sizes in one row: the grams only (the size's word is said to a screen reader) */
.dz-sizes { flex-wrap: nowrap; gap: 5px; }
.dz-size { min-height: 28px; padding: 3px 10px; font-size: 13px; font-variant-numeric: tabular-nums; }
/* the road's tile: its picture, words and button right under its title (the room left below) */
.journey-tile .jr-group { margin-block: 0; }
/* a diary row's time and its sensitivity marks: a line under the name (the name keeps the row's width) */
.e-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 5px; }
.e-meta .e-time { margin-top: 0; white-space: nowrap; }
.e-meta .al-marks { margin: 0; gap: 6px; }
.e-meta .al-mark { width: 22px; height: 22px; box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 3px color-mix(in srgb, var(--warn) 80%, transparent); }
.e-meta .al-mark svg { width: 15px; height: 15px; }
.e-meta .al-mark::after { top: -4px; left: -4px; width: 11px; height: 11px; font-size: 8px; }
.e-time { white-space: nowrap; }
/* the tip's window: a little room between its better choice and the two buttons under it */
.nd-actions { gap: 10px; }
.nd-actions .nd-good { margin-bottom: 4px; }
/* the tip's two buttons each on one line */
.nd-pair .btn { white-space: nowrap; padding-inline: 8px; font-size: 14.5px; }
@media (max-width: 360px) { .nd-pair .btn { font-size: 13.5px; } }
/* a message that the server can't be reached: red */
#toast.error { background: #b91c1c; color: #fff; border-color: #ef4444; box-shadow: 0 10px 28px rgba(127, 29, 29, .45); }
/* the day by the hour: its card at the pointer above the chart, not on it (under it when there is no room above) */
.dh-tip { top: auto; bottom: calc(100% + 8px); }
.dh-tip.below { top: calc(100% + 8px); bottom: auto; }
/* a food's quick add: its − and +, and a details' button beside them; once added its + turns − */
.fq-ctrls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; align-self: flex-start; margin-top: 7px; }
/* under the marks: clear of their rings (drawn outside their box) and their "!" */
.sg-marks + .fq-ctrls { margin-top: 14px; }
.sg-text > .fq-ctrls .dq { margin-top: 0; }
.fq-info { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 11px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); transition: background .2s, transform .12s; }
.fq-info:hover { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.fq-info:active { transform: scale(.94); }
/* its "i": a round disc in the button's colour, the letter cut out of it in the page's own (a dot, a stem with its foot) */
.fq-i { flex: none; }
.fq-i .fi-bg { fill: currentColor; }
.fq-i .fi-dot { fill: var(--surface); }
.fq-i .fi-stem { fill: none; stroke: var(--surface); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sg-add.is-added, .dq-add.is-added { background: #e5484d; color: #fff; }
/* a message that something was saved: green, with a check, a little larger, popping in front */
#toast.ok { background: #15803d; color: #fff; font-weight: 700; font-size: 15.5px; padding: 13px 20px; outline: 1px solid #22c55e;
  box-shadow: 0 14px 34px rgba(5, 46, 22, .5), 0 0 0 5px rgba(34, 197, 94, .2); }
#toast.ok::before { content: ""; display: inline-block; flex: none; width: 22px; height: 22px; margin-inline-end: 9px; vertical-align: -5px; border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat; }
#toast.ok.has-act::before { width: 30px; height: 30px; margin: 0; background-size: 19px; }
#toast.ok a { color: #fff; }
#toast.ok .toast-btn { background: #fff; color: #166534; box-shadow: 0 4px 12px rgba(5, 46, 22, .3); }
/* (its pop alone as it comes, without the fade as well, and held at the pop's start until the pop begins:
   the iPhone drew it whole for a frame first, then popped it in, and it looked shown twice) */
#toast.ok.show { animation: toast-pop .38s cubic-bezier(.2, 1.5, .45, 1) both; transition: none; }
@keyframes toast-pop { from { transform: translate(-50%, 18px) scale(.82); opacity: 0; } to { transform: translate(-50%, 0) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #toast.ok.show { animation: none; } }
html[data-a11y~="motion"] #toast.ok.show { animation: none; }
/* a sheet's preview zoomed in to read it (paper-zoom.js): its bar over it, and the sheet moving both ways under a finger */
.pz-bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 6px; width: fit-content; margin: 0 auto 8px; padding: 4px;
  border-radius: 999px; background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--border); box-shadow: 0 6px 18px -8px rgba(5, 12, 30, .45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pz-btn { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; font: inherit; font-size: 20px; font-weight: 700; line-height: 1;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); transition: transform .12s, opacity .2s; }
.pz-btn:active { transform: scale(.9); }
.pz-btn:disabled { opacity: .35; cursor: default; }
.pz-val { min-width: 48px; text-align: center; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pz-fit { height: 34px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--accent-text); background: var(--accent); }
.pz-fit[hidden] { display: none; }
.paper-stage.pz-stage { touch-action: pan-x pan-y; }
.paper-stage.pz-stage.zoomed { justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain; }
.paper-stage.pz-stage.zoomed .paper { margin-inline: auto; }
.dr .pz-bar { top: 2px; }
/* the diary's foot: the panels' order and the day's summary, side by side (one under the other only when they do not fit) */
.ro-open-wrap { flex-wrap: wrap; gap: 10px; }
.ro-open.ro-sum { color: var(--accent); }
/* another day's top foods: the row's width, each name read in full (two lines at most) over its share of the day */
.top-tile header { align-items: baseline; }
.top-tile .tf-count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.top-tile .top-foods { gap: 8px; margin-top: 4px; }
.top-tile .top-foods li { gap: 12px; padding: 10px 12px; border-radius: 14px; }
.top-tile .tf-rank { width: 28px; height: 28px; font-size: 14px; }
.tf-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.top-tile .tf-name { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.tf-bar { display: block; height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--text) 9%, transparent); overflow: hidden; }
.tf-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.top-foods li:nth-child(n+2) .tf-bar i { background: color-mix(in srgb, var(--accent) 60%, var(--muted)); }
.top-tile .tf-kcal { flex: none; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 52px; }
.top-tile .tf-kcal b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; }
.top-tile .tf-kcal small { font-size: 12px; font-variant-numeric: tabular-nums; }
/* a message while the keyboard is up: right above it, not behind it (--kb, keyboard.js; the id twice outweighs
   the other places it takes: the wizard's, the side menu's) */
html.kb-open #toast#toast { bottom: calc(var(--kb, 0px) + 12px); }
/* the add window: what the food's marks in the lists say (a sensitivity of yours, a preference it meets) */
.entry-marks { margin: 2px 0 14px; }
.entry-marks h4 { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.entry-marks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.em-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 14px; background: var(--row-alt); border: 1px solid transparent; }
.em-row > span:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.em-row b { font-size: 14px; font-weight: 700; }
.em-row small { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.em-row.warn { background: color-mix(in srgb, var(--warn) 9%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 28%, transparent); }
.em-row.ok { background: color-mix(in srgb, var(--pf) 9%, var(--surface)); border-color: color-mix(in srgb, var(--pf) 24%, transparent); }
.em-row .al-mark { flex: none; width: 30px; height: 30px; }
.em-row .al-mark svg { width: 20px; height: 20px; }
.em-row .pref-mark { flex: none; }
/* the next meal under the meals, the row wide: its drawing beside its number (not over it), and on a wide
   screen its words on one side and the recipe idea (or the light foods) on the other, the button under both */
.next-row .next-tile .tile-body { flex-direction: row; align-items: center; gap: 14px; }
@media (min-width: 720px) {
  .next-row .next-tile:not(.top-tile) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 22px; align-items: center; }
  /* (the buttons under both sides too: each side then ends where the other does) */
  .next-row .next-tile:not(.top-tile) > :is(header, .tile-btn, .next-acts) { grid-column: 1 / -1; }
  .next-row .next-tile:not(.top-tile) > :is(.next-recipe-box, .light-foods) { grid-column: 2; grid-row: 2 / span 2; align-self: stretch; }
  /* (the light foods as tall as the number and the words beside them: top and bottom in line) */
  .next-row .next-tile:not(.top-tile) > .light-foods { grid-auto-rows: 1fr; margin-top: 0; }
  .next-row .next-tile:not(.top-tile) > .light-foods a { align-items: center; }
}
/* the meals on a phone: the timeline's drawings smaller and nearer the screen's edge, and the meal's card the
   wider for it */
@media (max-width: 760px) {
  .tl-item { grid-template-columns: 30px minmax(0, 1fr); gap: 6px; margin-inline-start: -8px; }
  .tl-item::before { top: 40px; right: 14px; }
  .tl-rail { padding-top: 12px; }
  .tl-rail .badge-icon { width: 30px !important; height: 30px !important; }
  .tl-rail .badge-icon svg { width: 30px; height: 30px; }
}
/* the calendar with each day's calories: the number over its calories, the day tinted green within the target
   and coral above it; the month in a line, and the day tapped in a card under the month */
.cal-pop { width: 360px; }
/* an iPad's and a computer's: across, the month on the right and its numbers with the day picked
   beside it (one tall column was most of the screen's height) */
@media (min-width: 700px) {
  .cal.cal-pop { width: min(720px, calc(100vw - 32px)); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas: "head head" "grid stats" "grid detail" "foot detail"; grid-template-rows: auto auto 1fr auto; column-gap: 20px; align-items: start; }
  .cal-pop .cal-head { grid-area: head; }
  .cal-pop .cal-grid { grid-area: grid; }
  .cal-pop .cal-stats { grid-area: stats; margin-top: 0; }
  .cal-pop .cal-detail { grid-area: detail; margin-top: 10px; }
  .cal-pop .cal-foot { grid-area: foot; }
}
.cal-grid { gap: 5px; }
.cal-cell { height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.1; }
.cal-cell .cd-n { font-size: 15px; font-weight: 600; }
.cal-cell .cd-k { font-size: 9.5px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.2px; }
.cal-cell.ok::after, .cal-cell.over::after { display: none; }
.cal-cell.ok { background: color-mix(in srgb, var(--good) 13%, transparent); }
.cal-cell.ok .cd-k { color: color-mix(in srgb, var(--good) 80%, var(--text)); }
.cal-cell.over { background: color-mix(in srgb, var(--warn) 13%, transparent); }
.cal-cell.over .cd-k { color: color-mix(in srgb, var(--warn) 85%, var(--text)); }
button.cal-cell.ok:hover { background: color-mix(in srgb, var(--good) 22%, transparent); }
button.cal-cell.over:hover { background: color-mix(in srgb, var(--warn) 22%, transparent); }
.cal-cell.sel, .cal-cell.sel.ok, .cal-cell.sel.over { background: var(--accent); color: #fff; }
.cal-cell.sel .cd-k { color: #fff; opacity: .9; }
.cal-month { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: -2px 0 10px; font-size: 12.5px; color: var(--muted); }
.cal-month b { color: var(--text); font-variant-numeric: tabular-nums; }
.cal-wait { opacity: .8; }
.cal-detail { margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: var(--row-alt); display: flex; flex-direction: column; gap: 8px; }
.cal-detail[hidden] { display: none; }
/* the day's nutrition (macro-day.js): a quiet way out at its end, in the middle */
.md-end { display: flex; justify-content: center; margin-top: 2px; }
.md-close { min-height: 40px; padding: 8px 28px; font-size: 14.5px; font-weight: 600; color: var(--muted); border-color: var(--border); }
.md-close:hover { color: var(--text); }
/* the month on its way (calendar.js): each open day's calories shimmering in their place, the month's
   numbers and the day's card too, a small turning ring with its words; the shimmer a wave across a week,
   right to left */
.cal-sk { display: block; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--text) 7%, transparent) 0 38%, color-mix(in srgb, var(--text) 17%, transparent) 50%, color-mix(in srgb, var(--text) 7%, transparent) 62% 100%);
  background-size: 300% 100%; animation: cal-shimmer 1.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.1s); }
@keyframes cal-shimmer { from { background-position: 0 0; } to { background-position: 100% 0; } }
.cal-sk-k { width: 26px; height: 7px; margin-top: 4px; }
.cal-stat .cal-sk-n { width: 38px; height: 20px; margin: 3px auto 4px; border-radius: 7px; }
.cdt-head .cal-sk-chip { flex: none; width: 66px; height: 22px; }
.cal-sk-line { width: 72%; height: 14px; }
.cal-sk-bar { width: 100%; height: 7px; }
.cal-sk-btn { width: 100%; height: 40px; margin-top: 2px; border-radius: 12px; }
.cal-sk-chips { display: flex; gap: 6px; }
/* (on an iPad and a computer the card as tall as a day with food will be, so the window keeps its size) */
.cal-pop.cal-loading .cal-detail { min-height: 280px; }
.cal-pop.cal-loading .cal-sk-btn { margin-top: auto; }
.cal-sk-chips .cal-sk { width: 64px; height: 24px; }
.cal-sk-wait { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.cal-spin { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); animation: cal-spin .8s linear infinite; }
@keyframes cal-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cal-sk, .cal-spin { animation: none; } }
html[data-a11y~="motion"] .cal-sk, html[data-a11y~="motion"] .cal-spin { animation: none; }
.cdt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cdt-head b { font-size: 15px; }
.cdt-state { flex: none; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.cdt-state.ok { color: color-mix(in srgb, var(--good) 85%, var(--text)); background: color-mix(in srgb, var(--good) 15%, transparent); }
.cdt-state.over { color: color-mix(in srgb, var(--warn) 90%, var(--text)); background: color-mix(in srgb, var(--warn) 15%, transparent); }
.cdt-state.none { color: var(--muted); background: color-mix(in srgb, var(--text) 7%, transparent); }
.cdt-kcal { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13.5px; color: var(--muted); }
.cdt-kcal b { font-size: 18px; color: var(--text); font-variant-numeric: tabular-nums; }
.cdt-kcal small { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cdt-bar { display: block; height: 7px; border-radius: 99px; background: color-mix(in srgb, var(--text) 9%, transparent); overflow: hidden; }
.cdt-bar i { display: block; height: 100%; border-radius: inherit; background: var(--good); }
.cdt-bar.over i { background: var(--warn); }
.cdt-meals { display: flex; flex-wrap: wrap; gap: 6px; }
.cdt-meals:empty { display: none; }
.cdt-meals span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: color-mix(in srgb, var(--meal) 70%, var(--text)); background: color-mix(in srgb, var(--meal) 13%, transparent); }
.cdt-more { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--muted); }
.cdt-more:empty { display: none; }
.cdt-more span + span::before { content: "·"; margin-inline-end: 12px; }
.cdt-go { margin-top: 2px; }
/* the reports' day pill: its middle opens the calendar */
button.rd-day { border: 0; margin: 0; background: transparent; font: inherit; cursor: pointer; border-radius: 999px; padding: 3px 10px; transition: background .2s; }
button.rd-day:hover { background: rgba(255, 255, 255, .12); }
button.rd-day:active { background: rgba(255, 255, 255, .18); }
.rd-day b { display: inline-flex; align-items: center; gap: 4px; }
.rd-chev { transform: rotate(-90deg); opacity: .8; }
/* the calendar in one screen, with no scrolling: shorter days, the day's card tight (its meals in a word, its
   numbers in a line, a lower button), and a small foot */
.cal-head { margin-bottom: 4px; }
.cal-head b { font-size: 16px; }
.cal-nav { width: 32px; height: 32px; }
.cal-month { margin: 0 0 6px; font-size: 12px; }
.cal-grid { gap: 3px; }
.cal-wd { padding: 2px 0; font-size: 11.5px; }
.cal-cell { height: 40px; border-radius: 10px; }
.cal-cell .cd-n { font-size: 14px; }
.cal-cell .cd-k { font-size: 9px; }
.cal-detail { margin-top: 8px; padding: 10px 12px; gap: 6px; border-radius: 14px; }
.cdt-head b { font-size: 14px; }
.cdt-state { padding: 2px 9px; font-size: 11.5px; }
.cdt-kcal b { font-size: 16px; }
.cdt-bar { height: 6px; }
.cdt-meals { gap: 5px; }
.cdt-meals span { padding: 2px 8px; font-size: 11.5px; }
.cdt-more { font-size: 12px; gap: 2px 8px; }
.cdt-more span + span::before { margin-inline-end: 8px; }
.cdt-go { min-height: 40px; padding-block: 8px; font-size: 14.5px; }
.cal-foot { margin-top: 8px; padding-top: 8px; }
.cal-today { padding: 5px 12px; font-size: 13px; }
/* ---------- the calendar's look: the month's title between round arrows, its numbers in three small cards,
   each day a soft tile (a day with food: its calories, and a thin bar of the day's target at its foot), the
   chosen day lit, today ringed, the days to come faint; the day's card framed, its numbers in chips ---------- */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cal-head b { min-width: 0; font-size: 18px; font-weight: 800; letter-spacing: -.2px; white-space: nowrap; }
.cal-navs { flex: none; display: flex; align-items: center; gap: 6px; }
.cal-nav { width: 34px; height: 34px; border-radius: 50%; color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); transition: background .15s, color .15s, opacity .15s; }
.cal-nav:not(:disabled):hover { color: #fff; background: var(--accent); }
.cal-nav:disabled { opacity: .3; cursor: default; }
/* the popover's × at the head's end, a thin line and some room between it and "today" */
.cal-x { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin-inline-start: 12px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); background: color-mix(in srgb, var(--text) 6%, var(--surface)); color: var(--text); transition: background .15s, border-color .15s; }
.cal-x::before { content: ""; position: absolute; inset-inline-end: calc(100% + 6px); top: 8px; bottom: 8px; width: 1px; background: color-mix(in srgb, var(--text) 16%, transparent); }
.cal-x::after { content: ""; position: absolute; inset: -6px; }
.cal-x:hover { background: color-mix(in srgb, var(--text) 13%, var(--surface)); border-color: color-mix(in srgb, var(--text) 26%, transparent); }
.cal-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* back to today: a pill beside the arrows */
.cal-head .cal-today { display: inline-flex; align-items: center; gap: 6px; height: 34px; margin-inline-start: 4px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 800; color: #fff; background: var(--accent); box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--accent) 70%, transparent);
  transition: transform .12s, filter .15s; }
.cal-head .cal-today:hover { filter: brightness(1.08); }
.cal-head .cal-today:active { transform: scale(.95); }
.cal-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.cal-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 52px; padding: 6px; border-radius: 14px; text-align: center;
  background: color-mix(in srgb, var(--text) 5%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 7%, transparent); }
.cal-stat b { font-size: 18px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cal-stat small { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.cal-stat.ok b { color: color-mix(in srgb, var(--good) 85%, var(--text)); }
.cal-stats.wait .cal-stat b { color: var(--muted); }
.cal-stats.none .cal-stat { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.cal-wd { padding: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.cal-grid { gap: 5px; }
.cal-cell { height: 46px; padding-bottom: 4px; border-radius: 13px; overflow: hidden; transition: background .15s, transform .12s; }
button.cal-cell { background: color-mix(in srgb, var(--text) 4.5%, transparent); }
button.cal-cell:hover { background: color-mix(in srgb, var(--text) 9%, transparent); }
button.cal-cell:active { transform: scale(.94); }
.cal-cell.future, .cal-cell.empty { background: none; opacity: .34; }
.cal-cell .cd-n { font-size: 15px; font-weight: 700; }
.cal-cell .cd-k { font-size: 9.5px; font-weight: 700; }
.cal-cell .cd-bar { position: absolute; inset-inline: 8px; bottom: 5px; height: 3px; border-radius: 99px; background: color-mix(in srgb, currentColor 16%, transparent); }
.cal-cell .cd-bar::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--p); border-radius: inherit; background: var(--good); }
.cal-cell.over .cd-bar::after { background: var(--warn); }
.cal-cell.today:not(.sel) { color: var(--accent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent); }
.cal-cell.sel, .cal-cell.sel.ok, .cal-cell.sel.over { color: #fff; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 78%, #fff), var(--accent));
  box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
.cal-cell.sel .cd-k { color: #fff; opacity: .92; }
.cal-cell.sel .cd-bar { background: rgba(255, 255, 255, .32); }
.cal-cell.sel .cd-bar::after { background: #fff; }
.cal-detail { margin-top: 12px; padding: 14px; gap: 9px; border-radius: 18px; background: color-mix(in srgb, var(--text) 5%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent); }
.cdt-head b { font-size: 15px; }
.cdt-kcal b { font-size: 20px; }
.cdt-bar { height: 8px; }
.cdt-bar i { background: linear-gradient(to left, #22a06b, #4ade80); }
.cdt-bar.over i { background: linear-gradient(to left, #f59e0b, var(--warn)); }
.cdt-more { gap: 6px; font-size: 12px; }
.cdt-more span { padding: 3px 10px; border-radius: 999px; font-weight: 600; color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.cdt-more span + span::before { content: none; }
.cdt-go { min-height: 44px; border-radius: 14px; }
.cal-foot { justify-content: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.cal-legend { gap: 14px; }
.cal-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend i { width: 10px; height: 10px; margin: 0; border-radius: 3px; }
.cal-legend i.over { margin: 0; }
/* on a phone the whole month and the day's card in one screen, with no scrolling */
@media (max-width: 640px) {
  .cal-head { margin-bottom: 12px; }
  .cal-stats { gap: 6px; margin-bottom: 10px; }
  .cal-stat { min-height: 46px; }
  .cal-stat b { font-size: 17px; }
  .cal-grid { gap: 4px; }
  .cal-cell { height: 42px; }
  .cal-detail { margin-top: 10px; padding: 12px; gap: 8px; }
  .cdt-go { min-height: 42px; }
}
/* a short screen (an iPhone SE): the calendar's days lower still, so it stays in one screen */
@media (max-height: 720px) {
  .cal-cell { height: 38px; padding-bottom: 3px; }
  .cal-cell .cd-bar { bottom: 3px; }
  .cal-stat { min-height: 44px; }
  .cal-stats { margin-bottom: 8px; }
  .cal-cell .cd-n { font-size: 13px; }
  .cal-month { margin-bottom: 4px; }
  .cal-detail { gap: 5px; padding: 8px 12px; }
}
/* a diary row: the name the row's width over the calories (in a row of its own), the portion, the time and
   the marks under it beside the calories */
.tl-entry:not(.tl-act) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "pic name name" "pic sub kcal" "pic meta kcal";
  column-gap: 12px; row-gap: 0; align-items: center; }
.tl-entry:not(.tl-act) > .tl-pic { grid-area: pic; }
.tl-entry:not(.tl-act) > .entry-text { display: contents; }
.tl-entry:not(.tl-act) > .entry-text > b { grid-area: name; min-width: 0; }
.tl-entry:not(.tl-act) > .entry-text > small { grid-area: sub; min-width: 0; }
.tl-entry:not(.tl-act) > .entry-text > .e-meta { grid-area: meta; min-width: 0; }
.tl-entry:not(.tl-act) > .tl-entry-kcal { grid-area: kcal; align-self: center; margin-inline-start: 4px; }
/* ---------- the road's tile: a scene at dawn, the trail up to the castle (journey-core.js roadScene) ---------- */
.journey-tile header { align-items: center; }
.journey-tile .jr-chip { flex: none; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: #a16207; background: color-mix(in srgb, #f5b301 16%, transparent); }
.jr-scene-tile { display: block; position: relative; border-radius: 18px; overflow: hidden; isolation: isolate; -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent); aspect-ratio: 340 / 150; max-height: 190px; width: 100%; }
.jr-scene-tile:active { transform: scale(.99); }
.jrs { display: block; width: 100%; height: 100%; }
.jr-foot { display: flex; flex-direction: column; gap: 10px; }
.jr-foot .tile-num b { font-size: 22px; }
.jr-marks { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12.5px; color: var(--muted); }
.jr-marks b { font-size: 13px !important; color: var(--text); font-weight: 700; }
.journey-tile .jr-foot .jr-go { margin-top: 0; }
/* the numbers and the button side by side only when the tile itself is wide (a wide screen's narrow
   tile, an iPad's, squeezed the numbers into a word a line beside the button) */
.journey-tile { container-type: inline-size; }
@container (min-width: 460px) {
  .jr-foot { flex-direction: row; align-items: center; justify-content: space-between; }
  .journey-tile .jr-foot .jr-go { width: auto; padding-inline: 22px; }
}
.jr-foot .tile-num b { white-space: nowrap; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .journey-tile .jr-chip { color: #fcd34d; } }
:root[data-theme="dark"] .journey-tile .jr-chip { color: #fcd34d; }

/* its colours: day (the light look) */
.jrs-sky-a { stop-color: #8ec5ff; } .jrs-sky-b { stop-color: #cfe6ff; } .jrs-sky-c { stop-color: #ffe3c2; }
.jrs-glow-a { stop-color: #fff3c4; stop-opacity: .95; } .jrs-glow-b { stop-color: #ffd27a; stop-opacity: 0; }
.jrs-far-a { stop-color: #a9b9e6; } .jrs-far-b { stop-color: #c9d6f2; }
.jrs-peak-a { stop-color: #7c8fc4; } .jrs-peak-b { stop-color: #56689e; }
.jrs-hill-a { stop-color: #6cc47a; } .jrs-hill-b { stop-color: #3f9a55; }
.jrs-far { fill: url(#jrsFar); opacity: .8; }
.jrs-peak { fill: url(#jrsPeak); }
.jrs-snow { fill: #f4f7ff; opacity: .95; }
.jrs-hill { fill: url(#jrsHill); }
.jrs-hill-near { fill: #4fae62; }
.jrs-trees path { fill: #2f7f45; }
.jrs-stars circle { fill: #fff; opacity: 0; }
.jrs-cloud path { fill: #fff; opacity: .85; }
.jrs-birds path { fill: none; stroke: #4b5a7a; stroke-width: 1.2; stroke-linecap: round; }
.jrs-edge { fill: none; stroke: #b98d52; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.jrs-road { fill: none; stroke: #f3e2b6; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.jrs-steps { fill: none; stroke: #c9a46a; stroke-width: 1.4; stroke-dasharray: 1 6; stroke-linecap: round; }
.jrs-walked { fill: none; stroke: url(#jrsGold); stroke-width: 4; stroke-linecap: round; stroke-dasharray: var(--walked) 100; filter: drop-shadow(0 0 3px rgba(255, 176, 46, .9)); }
.jrs-stone circle { fill: #fff; stroke: #b9a27a; stroke-width: 1.4; }
.jrs-stone .jrs-stone-in { fill: #c9b48c; stroke: none; }
.jrs-stone.lit circle { fill: #fff6cf; stroke: #f5a300; }
.jrs-stone.lit .jrs-stone-in { fill: #f5a300; }
.jrs-wall { fill: #f1ede8; stroke: #8f8780; stroke-width: .8; }
.jrs-tower { fill: #e2ddd7; stroke: #8f8780; stroke-width: .8; }
.jrs-roof { fill: #3b82f6; stroke: #1e40af; stroke-width: .7; }
.jrs-gate { fill: #7a4b2a; }
.jrs-pole { stroke: #6b4a2f; stroke-width: 1.2; }
.jrs-pennant { fill: #ef4444; transform-box: fill-box; transform-origin: 0% 50%; animation: jrs-wave 1.6s ease-in-out infinite; }
.jrs-me-ring { fill: rgba(255, 196, 64, .35); transform-box: fill-box; transform-origin: center; animation: jrs-pulse 2.2s ease-out infinite; }
.jrs-me-dot { fill: #ffb02e; stroke: #fff; stroke-width: 2.2; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.jrs-glow { transform-box: fill-box; transform-origin: center; animation: jrs-breathe 5s ease-in-out infinite; }
/* its colours: night (the dark look), with stars */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .jrs-sky-a { stop-color: #101c48; } :root:not([data-theme="light"]) .jrs-sky-b { stop-color: #33306e; } :root:not([data-theme="light"]) .jrs-sky-c { stop-color: #8a4f72; }
  :root:not([data-theme="light"]) .jrs-glow-a { stop-color: #ffcf8a; stop-opacity: .55; } :root:not([data-theme="light"]) .jrs-glow-b { stop-color: #ff9f5a; stop-opacity: 0; }
  :root:not([data-theme="light"]) .jrs-far-a { stop-color: #3b3f7a; } :root:not([data-theme="light"]) .jrs-far-b { stop-color: #2a2d5c; }
  :root:not([data-theme="light"]) .jrs-peak-a { stop-color: #4a4f8f; } :root:not([data-theme="light"]) .jrs-peak-b { stop-color: #262a58; }
  :root:not([data-theme="light"]) .jrs-hill-a { stop-color: #2f6b4f; } :root:not([data-theme="light"]) .jrs-hill-b { stop-color: #1b4636; }
  :root:not([data-theme="light"]) .jrs-hill-near { fill: #24573f; } :root:not([data-theme="light"]) .jrs-trees path { fill: #163d2c; }
  :root:not([data-theme="light"]) .jrs-snow { fill: #dfe4ff; opacity: .8; }
  :root:not([data-theme="light"]) .jrs-cloud path { fill: #c7cdf5; opacity: .22; }
  :root:not([data-theme="light"]) .jrs-birds path { stroke: #c7cdf5; opacity: .6; }
  :root:not([data-theme="light"]) .jrs-stars circle { animation: jrs-twinkle 3.2s calc(var(--i) * -.7s) ease-in-out infinite; }
  :root:not([data-theme="light"]) .jrs-edge { stroke: #6e5634; } :root:not([data-theme="light"]) .jrs-road { stroke: #b9a77f; } :root:not([data-theme="light"]) .jrs-steps { stroke: #8a7650; }
  :root:not([data-theme="light"]) .jrs-wall { fill: #d9d4ee; } :root:not([data-theme="light"]) .jrs-tower { fill: #c4bfe0; }
}
:root[data-theme="dark"] .jrs-sky-a { stop-color: #101c48; } :root[data-theme="dark"] .jrs-sky-b { stop-color: #33306e; } :root[data-theme="dark"] .jrs-sky-c { stop-color: #8a4f72; }
:root[data-theme="dark"] .jrs-glow-a { stop-color: #ffcf8a; stop-opacity: .55; } :root[data-theme="dark"] .jrs-glow-b { stop-color: #ff9f5a; stop-opacity: 0; }
:root[data-theme="dark"] .jrs-far-a { stop-color: #3b3f7a; } :root[data-theme="dark"] .jrs-far-b { stop-color: #2a2d5c; }
:root[data-theme="dark"] .jrs-peak-a { stop-color: #4a4f8f; } :root[data-theme="dark"] .jrs-peak-b { stop-color: #262a58; }
:root[data-theme="dark"] .jrs-hill-a { stop-color: #2f6b4f; } :root[data-theme="dark"] .jrs-hill-b { stop-color: #1b4636; }
:root[data-theme="dark"] .jrs-hill-near { fill: #24573f; } :root[data-theme="dark"] .jrs-trees path { fill: #163d2c; }
:root[data-theme="dark"] .jrs-snow { fill: #dfe4ff; opacity: .8; }
:root[data-theme="dark"] .jrs-cloud path { fill: #c7cdf5; opacity: .22; }
:root[data-theme="dark"] .jrs-birds path { stroke: #c7cdf5; opacity: .6; }
:root[data-theme="dark"] .jrs-stars circle { animation: jrs-twinkle 3.2s calc(var(--i) * -.7s) ease-in-out infinite; }
:root[data-theme="dark"] .jrs-edge { stroke: #6e5634; } :root[data-theme="dark"] .jrs-road { stroke: #b9a77f; } :root[data-theme="dark"] .jrs-steps { stroke: #8a7650; }
:root[data-theme="dark"] .jrs-wall { fill: #d9d4ee; } :root[data-theme="dark"] .jrs-tower { fill: #c4bfe0; }
/* its motion: the clouds and the birds drift, the stars twinkle, the glow breathes, the pennant waves, the mark
   pulses; as the tile comes (not as it is drawn again), the walked part is drawn in and the mark pops after it */
.jrs-cloud { animation: jrs-drift 46s ease-in-out infinite alternate; }
.jrs-cloud.c2 { animation-duration: 38s; animation-delay: -12s; animation-direction: alternate-reverse; }
.jrs-cloud.c3 { animation-duration: 52s; animation-delay: -30s; }
.jrs-birds { animation: jrs-fly 26s linear infinite; }
.view:not(.redraw) .jrs-walked { animation: jrs-draw 1.8s .25s cubic-bezier(.4, 0, .2, 1) both; }
.jrs-me { transform-box: fill-box; transform-origin: center; }
.view:not(.redraw) .jrs-me { animation: jrs-pop .5s 1.8s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes jrs-drift { from { translate: -18px 0; } to { translate: 18px 0; } }
@keyframes jrs-fly { from { transform: translate(360px, 34px); } to { transform: translate(-40px, 18px); } }
@keyframes jrs-draw { from { stroke-dasharray: 0 100; } }
@keyframes jrs-pop { from { opacity: 0; scale: .2; } }
@keyframes jrs-pulse { 0% { scale: .7; opacity: .9; } 100% { scale: 1.9; opacity: 0; } }
@keyframes jrs-breathe { 0%, 100% { opacity: .75; scale: .94; } 50% { opacity: 1; scale: 1.06; } }
@keyframes jrs-twinkle { 0%, 100% { opacity: .15; } 50% { opacity: .95; } }
@keyframes jrs-wave { 0%, 100% { transform: skewY(0) scaleX(1); } 50% { transform: skewY(-8deg) scaleX(.88); } }
@media (prefers-reduced-motion: reduce) { .jrs *, .jrs { animation: none !important; } }
html[data-a11y~="motion"] .jrs * { animation: none !important; }
/* a window's save and cancel (a form's, the confirm list's, any row with a way out): a little larger, side by
   side as wide and tall as each other where they fit, else one under the other across the width (the way
   out had wrapped to a row of its own, short and askew, under a long "חיבור ל-Apple Health") */
#dialog .actions:has(> :is([data-close], [data-cancel])) { align-items: stretch; gap: 12px; }
#dialog .actions:has(> :is([data-close], [data-cancel])) > .btn { flex: 1 1 150px; min-height: 52px; padding-inline: 22px; font-size: 16px; border-radius: 15px; }
/* the add and edit window's buttons (entry.js): saving and cancelling side by side, as wide and tall as
   each other; deleting under them, small: a red word with its bin, no frame (it was a third big button),
   well apart from the saving (a finger meant for it must not delete) */
#dialog .entry-form .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#dialog .entry-form .actions > .btn { width: 100%; margin: 0; }
#dialog .entry-form .actions > .btn.entry-del { grid-column: 1 / -1; justify-self: center; width: auto; min-height: 38px; margin: 14px 0 0; padding: 6px 14px; gap: 6px;
  font-size: 14px; font-weight: 700; color: #ef5d62; background: transparent; border: 0; border-radius: 999px; box-shadow: none; }
#dialog .entry-form .actions > .btn.entry-del:hover { background: color-mix(in srgb, #e5484d 12%, transparent); }
/* the recipes' filters: the results first, at the start, and the clearing at the other end */
#dialog .rc-filter-acts > [data-close] { margin-inline-start: 0; }
#dialog .rc-filter-acts > #clearFilters { margin-inline-start: auto; }
/* how far along, on the picture's corner */
.jr-scene-tile .jr-chip { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 1; padding: 3px 10px; font-size: 12px; font-weight: 600; color: #fff;
  background: rgba(10, 16, 40, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .22); }
.jr-scene-tile .jr-chip b { font-size: 13.5px; font-weight: 800; color: #ffd54a; }
/* the agreements at the foot of the settings: three buttons in one row, each its drawing in its colour over its word */
.legal-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 28px 0 0; }
.legal-btn { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 6px 11px; border-radius: 18px; text-decoration: none; color: var(--text);
  font-size: 13px; font-weight: 700; text-align: center; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), var(--shadow); transition: transform .15s, box-shadow .2s; -webkit-tap-highlight-color: transparent; }
.legal-btn:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lc) 45%, var(--border)), var(--shadow); }
.legal-btn:active { transform: scale(.96); }
.legal-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: var(--lc); background: color-mix(in srgb, var(--lc) 15%, transparent); }
.legal-row + .made-by { margin-top: 20px; }
/* the wizard: "more below", an arrow in the middle a moment after a step comes, when it goes on past the screen:
   a glass ball, three arrows running down through it and a ring pulsing round it, gone after 3 seconds */
.wz-more { position: absolute; left: 50%; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 8px; translate: -50% 0; cursor: pointer;
  animation: wzm-in .55s cubic-bezier(.2, 1.4, .4, 1) both; }
.wz-more.out { animation: wzm-out .45s ease-in both; }
.wzm-ball { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: #fff;
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .5), rgba(255, 255, 255, .14) 55%, rgba(255, 255, 255, .08));
  border: 1.5px solid rgba(255, 255, 255, .55); box-shadow: 0 12px 30px rgba(6, 20, 60, .45), inset 0 0 18px rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: wzm-bob 1.4s ease-in-out infinite; }
.wzm-ring { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); animation: wzm-ring 1.4s ease-out infinite; }
.wzm-c { opacity: 0; animation: wzm-run 1.2s ease-in-out infinite; }
.wzm-c.c2 { animation-delay: .18s; }
.wzm-c.c3 { animation-delay: .36s; }
.wz-more small { padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap;
  background: rgba(10, 25, 70, .45); border: 1px solid rgba(255, 255, 255, .25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@keyframes wzm-in { from { opacity: 0; transform: translateY(18px) scale(.6); } }
@keyframes wzm-out { to { opacity: 0; transform: translateY(16px) scale(.8); } }
@keyframes wzm-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes wzm-ring { 0% { opacity: .8; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes wzm-run { 0% { opacity: 0; transform: translateY(-5px); } 45% { opacity: 1; } 100% { opacity: 0; transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .wz-more, .wzm-ball, .wzm-ring { animation: none; } .wzm-c { animation: none; opacity: 1; } }
html[data-a11y~="motion"] :is(.wz-more, .wzm-ball, .wzm-ring) { animation: none; }
html[data-a11y~="motion"] .wzm-c { animation: none; opacity: 1; }
/* the arrow's ball solid, so it stands out over anything under it (a white button, the bubbles) */
.wzm-ball { background: radial-gradient(circle at 35% 28%, #7cc0ff, #2f8ff0 55%, #1d5fd1); border-color: rgba(255, 255, 255, .85);
  box-shadow: 0 12px 30px rgba(6, 20, 60, .5), 0 0 0 6px rgba(47, 143, 240, .25), inset 0 2px 6px rgba(255, 255, 255, .35); }
/* the settings' foot: less room under who made it (the bottom bar still clear of it) */
.made-by { margin-bottom: 4px; }
body[data-page="settings"] .view { padding-bottom: 12px; }
/* the meal picked (the add window, the confirm list): filled in its colour, its word and drawing white, so it stands out */
:is([data-chips="meal"], [data-chips="confirmMeal"]) .choice.on { background: var(--chip); border-color: var(--chip);
  box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--chip) 60%, transparent), 0 0 0 3px color-mix(in srgb, var(--chip) 22%, transparent); }
:is([data-chips="meal"], [data-chips="confirmMeal"]) .choice.on :is(b, .icon, svg) { color: #fff; }
:is([data-chips="meal"], [data-chips="confirmMeal"]) .choice.on b { font-weight: 800; }
/* the road: the wins still open today, the closest first (journey.js nextWinPanel); a win's name on one
   line, what is left beside it taking the rest of the row (on two lines when it must), the bar under both */
.jr-next { padding: 14px 16px; }
.jr-nw-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.jr-nw-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "name left left" "bar bar pct"; align-items: center; gap: 6px 10px;
  padding: 10px 12px; border-radius: 14px; background: var(--row-alt); }
.jr-nw-list li.first { background: color-mix(in srgb, #f5b301 12%, var(--surface)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #f5b301 45%, transparent); }
.jr-nw-name { grid-area: name; font-size: 14px; font-weight: 700; white-space: nowrap; }
.jr-nw-left { grid-area: left; min-width: 0; font-size: 13.5px; font-weight: 800; line-height: 1.35; color: #b45309; text-align: end; text-wrap: balance; }
.jr-nw-bar { grid-area: bar; display: block; height: 7px; border-radius: 99px; background: var(--track); overflow: hidden; }
.jr-nw-bar i { display: block; width: var(--to); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff9f1c, #ffd54a); }
.jr-nw-pct { grid-area: pct; font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
/* what was won today: a title of its own, the wins as even badges, three to a phone's row (a lone last
   one as wide as the rest), each its sign in a round over its name; on a closed day they wait, in grey */
.jr-nw-won { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--border); }
.jr-nw-won-head { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: 13px; font-weight: 800; color: color-mix(in srgb, var(--good) 75%, var(--text)); }
.jr-nw-tick { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 900; color: #fff; background: var(--good); }
.jr-nw-won-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 90px), 1fr)); gap: 6px; }
.jr-nw-won-list li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 8px 6px; border-radius: 14px; font-size: 12.5px; font-weight: 700; line-height: 1.25; text-align: center;
  color: color-mix(in srgb, var(--good) 75%, var(--text)); background: color-mix(in srgb, var(--good) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 22%, transparent); }
.jr-nw-won-list li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.jr-nw-won.held .jr-nw-won-head, .jr-nw-won.held li { color: var(--muted); }
.jr-nw-won.held .jr-nw-tick { background: var(--muted); }
.jr-nw-won.held li { background: var(--row-alt); box-shadow: none; }
.jr-nw-ico { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; font-size: 16px; line-height: 1; background: color-mix(in srgb, var(--surface) 70%, transparent); }
/* a word on the day: a card, its sign in a round beside the words; green on the way to a win, amber
   for what would help */
.jr-nw-note { display: flex; align-items: flex-start; gap: 9px; margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.55; }
.jr-nw-note .jr-nw-ico { width: 28px; height: 28px; font-size: 15px; margin-top: -2px; }
.jr-nw-note.good { background: color-mix(in srgb, var(--good) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 26%, transparent); }
.jr-nw-note.warn { background: color-mix(in srgb, #f08a24 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #f08a24 28%, transparent); }
.jr-nw-won + .jr-nw-note { margin-top: 12px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .jr-nw-left { color: #fcd34d; } }
:root[data-theme="dark"] .jr-nw-left { color: #fcd34d; }
/* the road's tile: a little more room between what is left and the start, now and goal under it */
.journey-tile .jr-marks { margin-top: 7px; }
/* the weight's start not the weighing the road starts from: said under the tiles, with a way to start from it */
.wt-start-fix { margin: 10px 0 0; padding: 10px 12px; border-radius: 14px; font-size: 13px; line-height: 1.5; color: var(--muted);
  background: color-mix(in srgb, #f5a524 10%, transparent); border: 1px solid color-mix(in srgb, #f5a524 30%, transparent); }
.wt-start-fix .link-btn { display: inline; padding: 0; margin-inline-start: 4px; font-size: 13px; font-weight: 800; }
.wt-start-fix .link-btn { width: auto; min-height: 0; margin-top: 0; border: 0; background: none; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
/* the road's first station: 80% of a goal is enough, said under the panel's title */
.jr-nw-first { margin: 6px 0 0; padding: 6px 10px; border-radius: 10px; font-size: 12.5px; font-weight: 700; color: #b45309; background: color-mix(in srgb, #f5b301 12%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .jr-nw-first { color: #fcd34d; } }
:root[data-theme="dark"] .jr-nw-first { color: #fcd34d; }
/* the start weight's note at the top of the weight page, under the numbers */
.wt-start-fix { margin-top: 12px; }

/* ---------- "what do I see?" (see.js): the camera, the looking, the card ---------- */
dialog#dialog.see-dlg .dlg-body { padding-top: 12px; }
.see-cam { display: grid; gap: 14px; }
.see-view { position: relative; aspect-ratio: 3 / 4; max-height: min(58vh, 520px); width: 100%; margin: 0 auto; overflow: hidden; border-radius: 26px;
  background: radial-gradient(circle at 50% 40%, #312e81, #0b1020 75%); box-shadow: 0 18px 40px -18px rgba(49, 46, 129, .8); }
.see-view video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.see-view.off { display: grid; place-items: center; aspect-ratio: auto; min-height: 260px; }
.see-off { display: grid; justify-items: center; gap: 10px; padding: 24px; text-align: center; color: #e0e7ff; }
.see-off p { margin: 0; max-width: 30ch; line-height: 1.6; }
.see-view.off .see-frame { display: none; }
.see-view.off { padding-bottom: 54px; }
.see-frame { position: absolute; inset: 14% 12%; pointer-events: none; }
.see-frame i { position: absolute; width: 34px; height: 34px; border: 4px solid #fff; filter: drop-shadow(0 0 8px rgba(129, 140, 248, .9)); transition: border-color .25s; }
.see-frame i:nth-child(1) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 14px 0 0; }
.see-frame i:nth-child(2) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; }
.see-frame i:nth-child(3) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 14px 0; }
.see-frame i:nth-child(4) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 14px; }
.see-frame.hit i { border-color: #4ade80; }
.see-beam { position: absolute; inset-inline: 6%; top: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, #a5b4fc, #f0abfc, #a5b4fc, transparent);
  box-shadow: 0 0 18px 4px rgba(165, 180, 252, .55); animation: see-beam 2.4s ease-in-out infinite; }
@keyframes see-beam { 0%, 100% { top: 4%; } 50% { top: 94%; } }
.see-view.flash::after { content: ""; position: absolute; inset: 0; background: #fff; animation: see-flash .4s ease-out forwards; }
@keyframes see-flash { from { opacity: .9; } to { opacity: 0; } }
.see-hint { position: absolute; inset-inline: 16px; bottom: 14px; padding: 8px 14px; border-radius: 999px; text-align: center; font-size: 14px; font-weight: 600; color: #fff;
  background: rgba(15, 23, 42, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.see-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.see-way { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.see-way > svg { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #22a06b, #0e7a57); }
.see-way.ai > svg { background: linear-gradient(135deg, #6366f1, #c026d3); }
.see-way > span { display: grid; min-width: 0; }
.see-way b { font-size: 14.5px; }
.see-way small { font-size: 12px; color: var(--muted); line-height: 1.35; }
.see-actions { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.see-side { display: grid; justify-items: center; gap: 3px; padding: 8px; border: 0; border-radius: 16px; background: none; color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.see-side svg { width: 46px; height: 46px; padding: 11px; border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.see-side:hover svg { color: var(--accent); }
.see-shutter { position: relative; display: grid; place-items: center; width: 84px; height: 84px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: conic-gradient(from 0deg, #818cf8, #e879f9, #fb7185, #818cf8); box-shadow: 0 10px 26px -8px rgba(192, 38, 211, .7); animation: see-spin 6s linear infinite; }
.see-shutter > span { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #4f46e5, #a21caf);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .85); animation: see-spin 6s linear infinite reverse; }
.see-shutter svg { width: 30px; height: 30px; }
.see-shutter:active > span { transform: scale(.92); }
@keyframes see-spin { to { transform: rotate(360deg); } }
.see-typed { margin: 0; }

/* looking it up */
.see-look { display: grid; justify-items: center; gap: 12px; padding: 10px 0 18px; text-align: center; }
.see-look-art { position: relative; display: grid; place-items: center; width: min(280px, 80%); min-height: 120px; overflow: hidden; border-radius: 22px; }
.see-shot { display: block; width: 100%; max-height: 46vh; object-fit: cover; border-radius: 22px; }
.see-code { display: flex; align-items: center; gap: 10px; padding: 26px 24px; border-radius: 20px; font-size: 22px; letter-spacing: 2px; color: #fff;
  background: linear-gradient(135deg, #22a06b, #0e7a57); box-shadow: 0 14px 30px -14px #0e7a57; }
.see-code svg { width: 30px; height: 30px; }
.see-look-line { margin: 0; font-weight: 700; }
.see-none { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 6px 4px 12px; }
.see-none h3 { margin: 4px 0 0; }
.see-none p { margin: 0; max-width: 38ch; line-height: 1.6; }

/* the card: the hero on the picture's own colour (--see, set from it), then what it means */
.see-card { --see: 99 102 241; display: grid; gap: 14px; }
.see-hero { position: relative; display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: 16px; padding: 18px; overflow: hidden; border-radius: 26px; color: #fff;
  background: radial-gradient(circle at 85% 0%, rgb(var(--see) / .95), transparent 60%), linear-gradient(150deg, rgb(var(--see)), color-mix(in srgb, rgb(var(--see)) 45%, #0b1020));
  box-shadow: 0 22px 44px -24px rgb(var(--see) / .9); transition: background .6s; }
.see-orbs i { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .12); animation: see-orb 9s ease-in-out infinite; }
.see-orbs i:nth-child(1) { width: 160px; height: 160px; top: -60px; left: -40px; }
.see-orbs i:nth-child(2) { width: 90px; height: 90px; bottom: -30px; left: 40%; animation-delay: -3s; }
.see-orbs i:nth-child(3) { width: 40px; height: 40px; top: 20px; left: 30%; animation-delay: -6s; background: rgba(255, 255, 255, .2); }
@keyframes see-orb { 50% { transform: translate(10px, -8px) scale(1.08); } }
.see-pic-wrap { position: relative; z-index: 1; display: grid; place-items: center; width: 132px; height: 132px; }
.see-halo { position: absolute; inset: -6px; border-radius: 34px; background: conic-gradient(from 0deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .55) 60%, rgba(255, 255, 255, 0) 85%, rgba(255, 255, 255, .7));
  animation: see-spin 7s linear infinite; filter: blur(.5px); }
.see-pic { position: relative; width: 132px; height: 132px; border-radius: 28px; background: #fff; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .55); animation: see-float 4.5s ease-in-out infinite; }
.see-pic > img { object-fit: contain !important; padding: 8% !important; background: #fff !important; }
.see-pic.photo > img { object-fit: cover !important; padding: 0 !important; }
@keyframes see-float { 50% { transform: translateY(-6px) rotate(-1.5deg); } }
.see-id { position: relative; z-index: 1; display: grid; gap: 6px; min-width: 0; }
.see-via { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.see-via svg { width: 15px; height: 15px; }
.see-id h3 { margin: 0; font-size: 22px; line-height: 1.25; text-shadow: 0 2px 10px rgba(0, 0, 0, .25); overflow-wrap: anywhere; }
.see-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 14px; opacity: .92; }
.see-qty { padding: 2px 10px; border-radius: 999px; font-weight: 800; color: rgb(var(--see)); background: #fff; }
.see-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.see-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #065f46; background: #d1fae5;
  animation: see-pop .4s calc(var(--i) * 70ms + .15s) both cubic-bezier(.34, 1.5, .64, 1); }
.see-chip.red { color: #fff; background: #dc2626; }
@keyframes see-pop { from { opacity: 0; transform: scale(.6); } }
.see-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 16px; border-radius: 18px; font-size: 14.5px;
  background: color-mix(in srgb, var(--vc) 12%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vc) 35%, transparent); }
.see-verdict.good { --vc: #16a34a; } .see-verdict.mid { --vc: #d97706; } .see-verdict.watch { --vc: #dc2626; }
.see-verdict b { color: var(--vc); font-size: 16px; }
.see-verdict > span:last-child { color: var(--muted); }
.sv-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--vc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--vc) 25%, transparent); }
.see-energy { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.see-big { display: grid; justify-items: center; padding: 14px 10px; border-radius: 20px; text-align: center; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.see-big b { font-size: 34px; line-height: 1.1; font-weight: 800; color: rgb(var(--see)); }
:root[data-theme="dark"] .see-big b { color: color-mix(in srgb, rgb(var(--see)) 55%, #fff); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .see-big b { color: color-mix(in srgb, rgb(var(--see)) 55%, #fff); } }
.see-big small { font-size: 12.5px; color: var(--muted); }
.see-score { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; padding: 12px 16px; border-radius: 18px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.ss-title { font-size: 13px; font-weight: 800; color: var(--muted); }
/* its grade in a round mark of the grade's colour, the words beside it (not the Nutri-Score logo) */
.ss-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 19px; font-weight: 800; color: #fff; background: var(--g); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.ss-words { display: grid; gap: 2px; min-width: 0; }
.see-score small { font-size: 13.5px; font-weight: 700; color: var(--text); }
.see-sec { display: grid; gap: 8px; }
.see-sec h4 { display: flex; align-items: baseline; gap: 8px; margin: 2px 2px 0; font-size: 15px; }
.see-sec h4 small { font-weight: 600; color: var(--muted); font-size: 12.5px; }
.see-bars { display: grid; gap: 8px; padding: 12px 14px; border-radius: 20px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.see-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; }
.sb-name { font-weight: 700; font-size: 14px; }
.sb-val { display: flex; align-items: baseline; gap: 6px; }
.sb-val b { font-size: 14.5px; }
.sb-val small { font-size: 12px; color: var(--muted); }
.sb-none { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #047857; background: #d1fae5; }
.sb-track { grid-column: 1 / -1; height: 8px; border-radius: 8px; overflow: hidden; background: var(--track); }
.sb-track i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 60%, #fff), var(--c));
  animation: see-grow .9s calc(var(--i) * 80ms + .2s) both cubic-bezier(.22, 1, .36, 1); }
.see-bar.zero .sb-track { opacity: .45; }
@keyframes see-grow { from { width: 0; } }
.see-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.see-tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.see-tile { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.see-tile > span:last-child { display: grid; min-width: 0; }
.see-tile b { font-size: 15px; }
.see-tile small { font-size: 12px; color: var(--muted); line-height: 1.4; }
.see-ring { position: relative; flex: none; display: grid; place-items: center; width: 56px; height: 56px; }
.see-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.see-ring b { font-size: 13px; }
.see-ring-bg { stroke: var(--track); }
.see-ring.zero .see-ring-fg { display: none; }
.see-ring-fg { stroke: rgb(var(--see)); stroke-dasharray: var(--p) 100; animation: see-ring 1.1s .3s both cubic-bezier(.22, 1, .36, 1); }
@keyframes see-ring { from { stroke-dasharray: 0 100; } }
.see-tico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; color: #fff; }
.see-tile.walk .see-tico { background: linear-gradient(135deg, #14b8a6, #0f766e); }
.see-tile.price .see-tico { background: linear-gradient(135deg, #f59e0b, #d97706); }
button.see-tile { width: 100%; border: 0; font: inherit; color: var(--text); text-align: start; cursor: pointer; }
.see-tile .see-more { margin-inline-start: auto; color: var(--muted); transition: transform .25s; }
.see-tile[aria-expanded="true"] .see-more { transform: rotate(180deg); }
.see-prices ol { display: grid; gap: 6px; margin: 0; padding: 12px 14px; list-style: none; border-radius: 20px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.see-prices li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 6px 0; animation: see-pop .3s calc(var(--i) * 50ms) both; }
.see-prices li + li { border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.sp-chain { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.sp-chain em { padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: 11.5px; color: #065f46; background: #d1fae5; }
.see-prices li b { font-size: 15.5px; }
.see-prices li.best b { color: #16a34a; }
.sp-bar { grid-column: 1 / -1; height: 6px; border-radius: 6px; overflow: hidden; background: var(--track); }
.sp-bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #fbbf24, #f59e0b); animation: see-grow .7s both; }
.see-prices li.best .sp-bar i { background: linear-gradient(90deg, #4ade80, #16a34a); }
.see-prices li small { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.see-cubes { flex: none; display: grid; grid-template-columns: repeat(4, 12px); gap: 3px; width: 57px; justify-content: center; }
.see-cubes i { width: 12px; height: 12px; border-radius: 3px; background: #fff; box-shadow: inset 0 0 0 1.5px #f472b6, 0 2px 4px -1px rgba(219, 39, 119, .4); animation: see-pop .3s both; }
.see-cubes i:nth-child(n) { animation-delay: calc(.2s + .05s * var(--n, 1)); }
.see-cubes i.none { grid-column: 1 / -1; justify-self: center; width: 34px; height: 34px; border-radius: 50%; background: #d1fae5; box-shadow: none; position: relative; }
.see-cubes i.none::after { content: ""; position: absolute; inset: 9px 8px 11px 8px; border: solid #047857; border-width: 0 0 3.5px 3.5px; transform: rotate(-45deg); }
.see-notes ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.see-notes li { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 14px; font-size: 14px; line-height: 1.5; }
.see-notes li.ok { background: color-mix(in srgb, #16a34a 10%, var(--surface)); }
.see-notes li.ok svg { color: #16a34a; flex: none; margin-top: 3px; }
.see-notes li.warn { background: color-mix(in srgb, #dc2626 10%, var(--surface)); }
.see-notes li.warn svg { color: #dc2626; flex: none; margin-top: 3px; }
.see-ingr p { margin: 0; padding: 12px 14px; border-radius: 18px; line-height: 1.8; font-size: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.see-e { padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #7c2d12; background: #fed7aa; }
.see-about { display: flex; gap: 8px; margin: 0; padding: 12px 14px; border-radius: 18px; line-height: 1.6; font-size: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, #6366f1 12%, var(--surface)), color-mix(in srgb, #c026d3 10%, var(--surface))); }
.see-about svg { flex: none; color: #8b5cf6; margin-top: 2px; }
.see-source { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.see-go { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.see-go > :first-child { grid-column: 1 / -1; min-height: 52px; font-size: 16px; }
.see-go > :last-child:nth-child(even) { grid-column: 1 / -1; }
.see-alts ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.see-alts button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 16px; cursor: pointer; text-align: start; color: var(--text); font: inherit;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow .2s, opacity .2s; }
.see-alts button:hover { box-shadow: inset 0 0 0 2px var(--accent); }
.see-alts button.busy { opacity: .55; }
.see-alt-pic { flex: none; width: 46px; height: 46px; border-radius: 12px; }
.see-alts button > span { flex: 1; display: grid; min-width: 0; }
.see-alts b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.see-alts small { font-size: 12px; color: var(--muted); }
.see-alts em { display: grid; justify-items: end; font-style: normal; font-weight: 800; font-size: 14px; }
.see-alts em small { font-weight: 600; }
@media (max-width: 420px) {
  .see-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .see-id { justify-items: center; }
  .see-via { justify-self: center; }
  .see-brand, .see-chips { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .see-beam, .see-shutter, .see-shutter > span, .see-halo, .see-pic, .see-orbs i { animation: none; }
  .see-chip, .sb-track i, .see-ring-fg, .see-cubes i { animation: none; }
}

/* reading aloud in the settings (settings.js): the device's Hebrew voices as rows to pick, the chosen one
   marked, how good each is in a small tag; the sample's speaker a quiet round button, as the app's others */
.speech-voices { display: grid; gap: 6px; }
.sv-row { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; text-align: start; cursor: pointer; border: 1px solid transparent; border-radius: 14px; }
.sv-row .set-label { flex: 1; min-width: 0; }
.sv-word { flex: none; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.sv-check { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--accent); opacity: 0; transform: scale(.7); transition: opacity .15s, transform .15s; }
.sv-row[aria-checked="true"] { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.sv-row[aria-checked="true"] .sv-check { opacity: 1; transform: none; }
.speech-test { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; text-align: start; cursor: pointer; }
.speech-rate { flex-wrap: wrap; row-gap: 10px; }
.speech-rate .set-label { flex: 1 1 100%; }
.speech-rate .segmented { flex: 1 1 100%; }
.speech-test .set-label { flex: 1; }
.sp-play { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.speech-install { margin-top: 8px; }
/* Reading aloud (speech-ui.js): the speaker in the look of the page's own buttons beside it, flat (its
   words in its hover label), and the player over the bottom bar while it reads */
.tts-btn { position: relative; display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0; border-radius: 50%; color: #fff; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background .2s, transform .15s; }
.tts-btn::after { content: ""; position: absolute; inset: -6px; } /* a finger-sized target */
.tts-btn:hover, .tts-btn.on { background: rgba(255, 255, 255, .26); }
.tts-btn:active { transform: scale(.92); }
.tts-btn svg { width: 18px; height: 18px; }
html.speech-off .tts-btn { display: none; }
/* the diary: under the report button, as large as it */
#heroMain > .hs-report-pick { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#heroMain > .hs-report-pick .tts-btn { width: 34px; height: 34px; }
#heroMain > .hs-report-pick .tts-btn svg { width: 17px; height: 17px; }
#heroMain:has(.hero-side) > .hs-report-pick .tts-btn { width: 38px; height: 38px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .38); }
/* the reports: in the title's far corner */
.report-hero .hero-title { flex: 1 1 auto; min-width: 0; }
.report-hero .hero-title > .tts-btn { margin-inline-start: auto; align-self: flex-start; }
/* a recipe: beside the way back */
.detail-back { display: flex; align-items: center; gap: 10px; }
.detail-back .tts-btn { border-radius: 12px; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 22%, transparent);
  background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.detail-back .tts-btn:hover, .detail-back .tts-btn.on { background: var(--accent); color: #fff; }
/* the part being read, lit */
.tts-now { outline: 2px solid #8b5cf6; outline-offset: 4px; }
.steps li.tts-now { background: rgba(139, 92, 246, .16); border-radius: 12px; outline-offset: 2px; }
.ingredients.tts-now { border-radius: 12px; }
#heroMain.tts-now { border-radius: 26px; outline-offset: 6px; }
.tts-player { position: fixed; z-index: 60; inset: auto 0 calc(max(8px, calc(var(--sa-bottom) - 12px)) + 68px + 16px + 14px) 0; margin: 0 auto; box-sizing: border-box;
  width: min(520px, calc(100% - 24px)); display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 22px; color: #fff;
  background: linear-gradient(135deg, #2e1065, #4c1d95); border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
  opacity: 0; transform: translateY(14px); transition: opacity .22s ease, transform .22s ease; }
.tts-player.on { opacity: 1; transform: none; }
.tts-wave { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); }
.tts-wave svg { animation: tts-beat 1.1s ease-in-out infinite; }
.tts-player.paused .tts-wave svg { animation: none; opacity: .7; }
@keyframes tts-beat { 50% { transform: scale(1.12); } }
.tts-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tts-txt b { font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tts-txt small { min-height: 1.35em; font-size: 12px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* how far, and where to go on from: a finger or the mouse along the bar moves the reading back or ahead
   (speech-ui.js wireBar); the bar's line is thin, its target a finger tall, a knob at the place */
.tts-bar { --tts-at: 0; position: relative; display: block; height: 22px; margin: -3px 0 -9px; cursor: pointer; touch-action: none; outline: none; -webkit-tap-highlight-color: transparent; }
.tts-bar::before { content: ""; position: absolute; inset: -6px -4px; }
.tts-track { position: absolute; inset: 9px 0 auto; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .18); overflow: hidden; transition: transform .15s; }
.tts-track i { display: block; height: 100%; border-radius: 4px; background: #c4b5fd; transform: scaleX(var(--tts-at)); transform-origin: right; transition: transform .4s ease; }
.tts-knob { position: absolute; inset: 0; display: block; pointer-events: none; transform: translateX(calc(var(--tts-at) * -100%)); transition: transform .4s ease; }
.tts-knob::after { content: ""; position: absolute; top: 5px; right: -6px; width: 12px; height: 12px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35); transition: transform .15s; }
.tts-bar:focus-visible .tts-knob::after { box-shadow: 0 0 0 3px rgba(196, 181, 253, .7); }
.tts-player.seeking :is(.tts-track i, .tts-knob) { transition: none; }
.tts-player.seeking .tts-knob::after { transform: scale(1.35); }
.tts-player.seeking .tts-track { transform: scaleY(1.5); }
.tts-ctl, .tts-spd { flex: none; display: grid; place-items: center; padding: 0; border: 0; color: #fff; background: rgba(255, 255, 255, .16); cursor: pointer; transition: background .2s, transform .15s; }
.tts-ctl { width: 38px; height: 38px; border-radius: 50%; }
.tts-spd { min-width: 44px; height: 32px; padding: 0 8px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tts-ctl:hover, .tts-spd:hover { background: rgba(255, 255, 255, .26); }
.tts-ctl:active, .tts-spd:active { transform: scale(.92); }
@media (min-width: 700px) and (min-height: 500px) {
  html.sidenav .tts-player { inset-inline-start: var(--side-w); bottom: calc(20px + var(--sa-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .tts-wave svg { animation: none; } .tts-player, .tts-track i, .tts-knob { transition: none; } }
/* the activity page: the speaker in the panel's other corner, as its look switch */
.ah-main > .tts-btn { position: absolute; z-index: 3; top: -4px; right: 0; width: 34px; height: 34px; color: var(--hx-ink, #fff);
  background: var(--hx-glass, rgba(255, 255, 255, .14)); border-color: var(--hx-line-2, rgba(255, 255, 255, .25)); box-shadow: var(--hx-btn-shadow, none); }
.ah-main > .tts-btn svg { width: 17px; height: 17px; }
/* ---------- the day's food in two halves (macro-day.js), from the diary's protein, carbs and fat panel ---------- */
.dash-macros[data-macro-day] { position: relative; cursor: pointer; transition: background .2s, transform .15s; }
.dash-macros[data-macro-day]:hover { background: rgba(255, 255, 255, .13); }
.dash-macros[data-macro-day]:active { transform: scale(.985); }
.dash-moves { position: relative; }
/* (room kept for the way-in mark at the panel's corner: the last column's number ran under it) */
:is(.dash-macros, .dash-moves):has(> .dm-more) { padding-inline-end: 40px; }
:is(.dash-macros, .dash-moves) .dm-more { position: absolute; top: 8px; left: 10px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff; opacity: .85; }
.md { display: flex; flex-direction: column; gap: 14px; }
.md-intro { margin: 0; padding: 12px 14px; border-radius: 16px; font-size: 15px; line-height: 1.55;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.md-macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.md-macro { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.md-m-top { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.md-m-top i { width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.md-macro b { font-size: 18px; font-variant-numeric: tabular-nums; }
.md-macro b small { font-size: 12px; font-weight: 500; color: var(--muted); }
.md-m-bar { display: block; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--c) 22%, transparent); overflow: hidden; }
.md-m-bar span { display: block; height: 100%; border-radius: 99px; background: var(--c); }
.md-st { font-style: normal; font-size: 12px; font-weight: 700; }
.md-st.ok { color: #22a06b; } .md-st.low { color: #d97706; } .md-st.over { color: #e5484d; }
.md-split { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .md-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* a half wide enough (the wide window of an iPad, a computer): its foods two by two, side by side cards
   of one height, an odd last one across the row */
.md-half { container-type: inline-size; }
@container (min-width: 440px) {
  .md-foods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-food:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .md-notes, .md-need { align-self: stretch; }
}
.md-half { --mc: #22a06b; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border-radius: 20px;
  background: color-mix(in srgb, var(--mc) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--mc) 30%, transparent); }
.md-bad { --mc: #e5484d; }
.md-half > header { display: flex; align-items: center; gap: 10px; }
.md-half h3 { margin: 0; font-size: 17px; color: var(--mc); }
.md-half header small { display: block; font-size: 12.5px; color: var(--muted); }
.md-warn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; background: var(--mc); }
.md-foods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.md-food { display: flex; align-items: flex-start; gap: 10px; padding: 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.md-food .md-pic { flex: none; width: 44px; height: 44px; border-radius: 12px; object-fit: cover; }
.md-ft { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.md-ft b { font-size: 14.5px; line-height: 1.3; }
.md-ft b small { color: var(--muted); font-weight: 600; }
.md-ft > small { font-size: 12.5px; color: var(--muted); }
.md-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.md-chip { padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 700; color: var(--mc); background: color-mix(in srgb, var(--mc) 13%, transparent); }
.md-chip.sens { color: #fff; background: #e5484d; }
.md-chip.on { color: #22a06b; background: color-mix(in srgb, #22a06b 13%, transparent); }
.md-chip.off { color: #d97706; background: color-mix(in srgb, #d97706 13%, transparent); }
.md-notes { margin: 0; padding: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; line-height: 1.45; }
.md-notes li::marker { color: var(--mc); }
.md-need { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px dashed color-mix(in srgb, var(--mc) 45%, transparent); }
.md-need > b { font-size: 14px; color: var(--mc); }
.md-need p { margin: 0; display: flex; flex-direction: column; font-size: 13.5px; line-height: 1.4; }
.md-need p small { color: var(--muted); font-size: 12.5px; }
.md-none { margin: 0; font-size: 13.5px; color: var(--muted); }
.md-next { margin: 0; padding: 12px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; background: var(--surface-2); border: 1px solid var(--border); }
.md-next b { color: var(--accent); }
.md-src { margin: 0; font-size: 12px; color: var(--muted); }
.md-empty { align-items: center; text-align: center; padding: 10px 0 6px; }
.md-empty p { margin: 0; font-size: 14.5px; line-height: 1.6; }
/* a coffee or tea in the edit window: its sweetening (entry.js) */
/* the fat a fried food is made in (entry.js): one row of one height (the choices come a moment after the
   dialog, and nothing moves for them), swiped sideways when they are many; a few share the width */
.entry-fat > span { display: inline-flex; align-items: center; gap: 6px; }
.ef-row { display: flex; gap: 6px; min-height: 54px; margin: -4px -4px 0; padding: 4px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.ef-row::-webkit-scrollbar { display: none; }
.ef-row .sp-chip { flex: 1 0 auto; min-width: 66px; padding: 5px 10px; border-radius: 14px; font-size: 13.5px; white-space: nowrap; }
.ef-wait { flex: 1; height: 46px; border-radius: 14px; background: color-mix(in srgb, var(--border) 45%, transparent); animation: ef-wait 1.1s ease-in-out infinite alternate; }
@keyframes ef-wait { to { opacity: .45; } }
.entry-sweet > span { display: inline-flex; align-items: center; gap: 6px; }
/* (the eight choices in two rows of four, whatever the width) */
.entry-sweet .es-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.entry-sweet .sp-chip { min-width: 0; padding: 5px 4px; border-radius: 14px; font-size: 13.5px; line-height: 1.2; text-align: center; }
/* two choices as the app's pill buttons, side by side as wide and tall as each other (the watch's
   connect window): a drawing, a small line over a bold one, the going one tinted */
.pill-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.hl-pill { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 58px; padding: 6px; padding-inline-end: 12px; border-radius: 999px; font: inherit; color: var(--text);
  text-align: start; cursor: pointer; background: var(--surface-2); border: 1px solid var(--border); transition: transform .15s, background .2s, border-color .2s; }
.hl-pill.go { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.hl-pill:hover { border-color: var(--accent); }
.hl-pill:active { transform: scale(.97); }
.hl-pill .hl-ico { flex: none; }
.hl-pill .hl-txt { min-width: 0; font-size: 15px; }
.hl-pill .hl-txt small { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-pill .hl-go { margin-inline-start: auto; }
.hl-pill.go .hl-ico svg { animation: hl-beat 2.4s ease-in-out infinite; transform-origin: center; }
/* the reading's settings: a little room between the voices, the speed and the sample */
.speech-opts { display: flex; flex-direction: column; gap: 10px; }
.speech-opts[hidden] { display: none; }
.speech-opts > .set-group-title, .speech-opts > .note { margin-block: 0; }
/* the sport page: the speaker in the ring panel's other corner, as its look switch */
.sr-panel > .tts-btn { position: absolute; z-index: 3; top: 10px; right: 10px; width: 34px; height: 34px; color: var(--hx-ink, #fff);
  background: var(--hx-glass, rgba(255, 255, 255, .14)); border-color: var(--hx-line-2, rgba(255, 255, 255, .25)); box-shadow: var(--hx-btn-shadow, none); }
.sr-panel > .tts-btn svg { width: 17px; height: 17px; }
/* the reading's tip: a quiet "i" at its start, as tall as its words, and the same room on both sides */
.speech-tip { display: flex; align-items: flex-start; gap: 7px; padding-inline: 6px; line-height: 1.55; }
.speech-tip > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.speech-tip .st-i { flex: none; width: 1.1em; height: 1.1em; margin-top: .22em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: .7; }
/* the AI summary's last try failed (ai-summary.js): why, and a try again, over what the panel has */
.as-fail { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 12px; margin-bottom: 14px; padding: 12px 14px; border-radius: 16px;
  background: color-mix(in srgb, #e5484d 9%, var(--surface)); border: 1px solid color-mix(in srgb, #e5484d 35%, transparent); }
.as-fail-ico { display: grid; color: #e5484d; }
.as-fail > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.as-fail b { font-size: 15px; }
.as-fail > div > span { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.as-fail .btn { grid-column: 1 / -1; justify-self: start; }

/* ---------- a panel's "?" (look-info.js): by its looks switch, in its look; and its window ---------- */
.look-info { position: absolute; z-index: 3; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .12); color: #fff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background .2s, transform .15s; -webkit-tap-highlight-color: transparent; }
.look-info::after { content: ""; position: absolute; inset: -6px; } /* a finger-sized target */
.look-info:hover { background: rgba(255, 255, 255, .26); }
.look-info:active { transform: scale(.92); }
#heroMain > .look-info { top: 50px; left: 0; z-index: 4; }
/* two measures side by side: under the switch, out at the panel's corner as it is (and as the speaker across) */
#heroMain:has(.hero-side) > .look-info { top: 39px; left: -9px; width: 38px; height: 38px; }
.ah-main > .look-info { top: -4px; left: 42px; color: var(--hx-ink, #fff); background: var(--hx-glass, rgba(255, 255, 255, .14)); border-color: var(--hx-line-2, rgba(255, 255, 255, .25)); box-shadow: var(--hx-btn-shadow, none); }
.look-info-win .ji-card { align-items: stretch; gap: 12px; padding-top: 0; text-align: start; overflow-y: auto; overscroll-behavior: contain;
  max-height: min(600px, calc(100dvh - var(--sa-top, 0px) - var(--sa-bottom, 0px) - 120px)); }
/* the window's head: a band in the look's colour, the "?" badge, the title, and the way out; it stays on top as the card scrolls */
.li-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 13px; margin: 0 -22px; padding: 14px 22px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--c) 20%, var(--border));
  background: radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--c) 26%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--c) 20%, var(--surface)), color-mix(in srgb, var(--c) 6%, var(--surface))); }
.li-badge { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; color: #fff;
  background: linear-gradient(150deg, var(--c), color-mix(in srgb, var(--c) 70%, #000));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3); }
.li-top-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.li-top small { font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: color-mix(in srgb, var(--c) 62%, var(--text)); }
.look-info-win .li-title { margin: 0; font-size: 24px; font-weight: 900; line-height: 1.15; letter-spacing: -.01em; }
.li-x { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; color: var(--text);
  background: color-mix(in srgb, var(--surface) 72%, transparent); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); cursor: pointer; }
.li-x::after { content: ""; position: absolute; inset: -6px; }
.li-x:active { scale: .94; }
.li-part { display: flex; flex-direction: column; gap: 9px; }
.li-part + .li-part { padding-top: 14px; border-top: 1px solid var(--border); }
.li-head { display: flex; align-items: center; gap: 12px; }
.li-art { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: color-mix(in srgb, var(--c) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent); }
.look-info-win .li-head h3 { margin: 0; font-size: 19.5px; font-weight: 900; line-height: 1.25; color: color-mix(in srgb, var(--c) 50%, var(--text)); }
.look-info-win .li-head p { margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.li-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.li-rows li { display: flex; align-items: baseline; gap: 10px; font-size: 14.5px; line-height: 1.55; }
.li-rows i { flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); transform: translateY(1px); }
.li-rows b { font-weight: 800; }
.li-loads { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border-radius: 16px; background: color-mix(in srgb, var(--c) 9%, transparent); }
.li-loads > b { font-size: 14px; }
.li-now { font-size: 14px; font-weight: 700; line-height: 1.5; color: color-mix(in srgb, var(--c) 70%, var(--text)); }
/* the four types, a line each: the name, from what (the active energy, or the longest workout), per kg */
.li-loads table { width: 100%; border-collapse: collapse; font-size: 12.5px; line-height: 1.3; }
.li-loads th, .li-loads td { padding: 5px 3px; text-align: center; vertical-align: middle; white-space: nowrap; border-top: 1px solid var(--border); }
.li-loads tbody th { text-align: start; }
.li-loads thead th { border-top: 0; padding-block: 2px 4px; font-size: 10.5px; font-weight: 700; line-height: 1.2; white-space: normal; color: var(--muted); }
.li-loads td:nth-child(n + 4) { font-weight: 800; }
.li-loads tr.on { background: color-mix(in srgb, var(--c) 14%, transparent); }
.li-loads tr.on :is(th, td) { color: color-mix(in srgb, var(--c) 72%, var(--text)); }
.li-loads small { font-size: 12px; line-height: 1.45; color: var(--muted); }
.look-info-win .li-note { margin: 0; padding: 10px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; background: var(--row-alt); }
/* its button: smaller than the other windows' (the window fits whole) */
.look-info-win .ji-ok { min-height: 42px; margin-top: 4px; font-size: 15px; }
/* two looks in it: a little wider, and everything tighter (the head, the parts, the lines, the notes) */
.look-info-win.li-two { width: min(392px, calc(100% - 20px)); }
.li-two .ji-card { gap: 8px; padding-inline: 18px; padding-bottom: 14px; }
.li-two .li-top { gap: 11px; margin-inline: -18px; padding: 10px 18px 9px; }
.li-two .li-badge { width: 38px; height: 38px; border-radius: 12px; }
.li-two .li-badge svg { width: 21px; height: 21px; }
.look-info-win.li-two .li-title { font-size: 20px; }
.li-two .li-top small { font-size: 11.5px; }
.li-two .li-part { gap: 6px; }
.li-two .li-part + .li-part { padding-top: 9px; }
.li-two .li-head { gap: 10px; }
.li-two .li-art { width: 36px; height: 36px; border-radius: 12px; }
.li-two .li-art svg { width: 26px; height: 26px; }
.look-info-win.li-two .li-head h3 { font-size: 16.5px; }
.look-info-win.li-two .li-head p { margin: 0; font-size: 13px; line-height: 1.4; }
.li-two .li-rows { gap: 3px; }
.li-two .li-rows li { gap: 8px; font-size: 13.5px; line-height: 1.42; }
.li-two .li-rows i { width: 9px; height: 9px; }
.look-info-win.li-two .li-note { padding: 6px 10px; border-radius: 12px; font-size: 12.5px; line-height: 1.4; }

/* ---------- the castle game's level of difficulty (journey.js): its bar over the map, and its settings ---------- */
.jr-mode { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 560px; margin: 0 auto 14px; padding: 8px 10px 8px 14px; border: 0; border-radius: 18px;
  font: inherit; text-align: start; color: var(--text); cursor: pointer; transition: transform .15s;
  background: linear-gradient(135deg, color-mix(in srgb, var(--lc) 17%, var(--surface)), color-mix(in srgb, var(--lc) 5%, var(--surface)));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--lc) 36%, transparent), 0 8px 20px -14px var(--lc); }
.jr-mode.wide { max-width: 980px; }
.jr-mode:active { transform: scale(.98); }
.jr-mode-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; font-size: 22px;
  background: color-mix(in srgb, var(--lc) 20%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lc) 30%, transparent); }
.jr-mode-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.jr-mode-txt small { font-size: 12px; color: var(--muted); }
.jr-mode-txt b { font-size: 16px; font-weight: 900; }
.jr-mode-txt em { font-style: normal; font-size: 12.5px; font-weight: 600; color: color-mix(in srgb, var(--lc) 70%, var(--text)); }
.jr-mode-new { flex: none; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #fff; background: var(--lc); }
.jr-mode-gear { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: color-mix(in srgb, var(--lc) 75%, var(--text));
  background: var(--surface); box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.jr-mode-gear svg { transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.jr-mode:hover .jr-mode-gear svg { transform: rotate(60deg); }

.jg-win { width: min(440px, calc(100% - 24px)); }
.jg-card { display: flex; flex-direction: column; gap: 14px; padding: 0 18px; text-align: start; overflow-y: auto; overscroll-behavior: contain;
  max-height: min(780px, calc(100dvh - var(--sa-top, 0px) - var(--sa-bottom, 0px) - 40px)); }
/* the head: a band in the level's colour, the gear, the title and the way out; on top as the card scrolls */
.jg-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 13px; margin: 0 -18px; padding: 14px 18px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--c) 20%, var(--border)); transition: background .3s;
  background: radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--c) 26%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--c) 20%, var(--surface)), color-mix(in srgb, var(--c) 6%, var(--surface))); }
.jg-badge { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; color: #fff;
  background: linear-gradient(150deg, var(--c), color-mix(in srgb, var(--c) 70%, #000));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3); }
.jg-badge svg { width: 24px; height: 24px; animation: jg-turn 8s linear infinite; }
@keyframes jg-turn { to { transform: rotate(360deg); } }
.jg-top-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jg-top-txt small { font-size: 12.5px; font-weight: 800; color: color-mix(in srgb, var(--c) 62%, var(--text)); }
.jg-win h2 { margin: 0; font-size: 24px; font-weight: 900; line-height: 1.15; }
.jg-x { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; color: var(--text); cursor: pointer;
  background: color-mix(in srgb, var(--surface) 72%, transparent); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.jg-x::after { content: ""; position: absolute; inset: -6px; }
/* the recommendation, and why */
.jg-rec { padding: 14px; border-radius: 18px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--rc) 15%, var(--surface)), color-mix(in srgb, var(--rc) 4%, var(--surface)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 30%, transparent); }
.jg-rec-head { display: flex; align-items: center; gap: 11px; }
.jg-rec-ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-size: 25px;
  background: color-mix(in srgb, var(--rc) 22%, var(--surface)); box-shadow: 0 0 0 5px color-mix(in srgb, var(--rc) 9%, transparent); }
.jg-rec-head > span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.jg-rec-head small { font-size: 12.5px; font-weight: 800; color: color-mix(in srgb, var(--rc) 70%, var(--text)); }
.jg-rec-head b { font-size: 19px; font-weight: 900; }
.jg-rec ul, .jg-notes { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.jg-rec li, .jg-notes li { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; line-height: 1.45; }
.jg-rec li i, .jg-notes li i { flex: none; font-style: normal; }
/* the cards that pop up on a win: first in the window, in the bell's own colour (not the level's) */
.jg-alerts { --c: #f59e0b; margin-top: 2px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 26%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--c) 12%, var(--surface)), color-mix(in srgb, var(--c) 4%, var(--surface))); }
.jg-auto.jg-alerts > span.jg-al-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 20px;
  background: color-mix(in srgb, var(--c) 20%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent); }
.jg-alerts > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.jg-alerts[aria-checked="false"] .jg-al-ico { filter: grayscale(1); opacity: .6; }
/* the level's part, under its own heading */
.jg-sec { margin: 4px 0 -4px; font-size: 13px; font-weight: 800; letter-spacing: .01em; color: var(--muted); }
/* following the recommendation */
.jg-auto { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 16px; font: inherit; text-align: start; color: inherit; cursor: pointer; background: var(--row-alt); }
.jg-auto > span:first-child { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.jg-auto b { font-size: 14.5px; }
.jg-auto small { font-size: 12px; color: var(--muted); }
.jg-toggle { flex: none; position: relative; width: 46px; height: 28px; border-radius: 999px; background: var(--track); box-shadow: inset 0 0 0 1px var(--border); transition: background .25s; }
.jg-toggle i { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .25); transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.jg-auto[aria-checked="true"] .jg-toggle { background: var(--c); box-shadow: none; }
.jg-auto[aria-checked="true"] .jg-toggle i { transform: translateX(-18px); }
/* the four levels, two to a row */
.jg-levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.jg-levels button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 8px 12px; border: 0; border-radius: 18px;
  font: inherit; text-align: center; color: inherit; cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s;
  background: color-mix(in srgb, var(--lc) 8%, var(--surface)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--lc) 24%, transparent); }
.jg-levels button:active { transform: scale(.97); }
.jg-levels button[aria-checked="true"] { background: linear-gradient(160deg, color-mix(in srgb, var(--lc) 26%, var(--surface)), color-mix(in srgb, var(--lc) 10%, var(--surface)));
  box-shadow: inset 0 0 0 2.5px var(--lc), 0 12px 24px -12px var(--lc); }
.jg-levels button[aria-checked="true"]::after { content: "\2713"; position: absolute; top: 8px; left: 8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  font-size: 13px; font-weight: 900; color: #fff; background: var(--lc); }
.jg-l-ico { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 4px; border-radius: 50%; font-size: 27px;
  background: color-mix(in srgb, var(--lc) 18%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lc) 28%, transparent); }
.jg-levels b { font-size: 16.5px; font-weight: 900; }
.jg-levels small { font-size: 12px; color: var(--muted); }
.jg-l-rec { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: 10.5px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #f5a524, #f08a24); box-shadow: 0 3px 8px rgba(240, 138, 36, .35); }
.jg-l-hist { margin-top: 6px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; background: color-mix(in srgb, var(--lc) 12%, var(--row-alt)); }
/* what wins a station on the level chosen */
.jg-detail { padding: 14px; border-radius: 18px; transition: background .3s;
  background: color-mix(in srgb, var(--c) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent); }
.jg-detail p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; }
.jg-detail h3 { margin: 0 0 4px; font-size: 14.5px; font-weight: 800; color: color-mix(in srgb, var(--c) 65%, var(--text)); }
.jg-rows { list-style: none; margin: 0; padding: 0; }
.jg-rows li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13.5px; border-top: 1px solid var(--border); }
.jg-rows li:first-child { border-top: 0; }
.jg-rows i { flex: none; width: 22px; font-style: normal; text-align: center; }
.jg-rows span { flex: 1; min-width: 0; }
.jg-rows b { font-weight: 800; white-space: nowrap; }
.jg-notes li { font-size: 12.5px; color: var(--muted); }
.jg-actions { position: sticky; bottom: 0; z-index: 2; display: flex; gap: 10px; margin: 0 -18px; padding: 12px 18px 16px; background: linear-gradient(transparent, var(--surface) 28%); }
.jg-save { flex: 1; min-height: 48px; font-size: 16px; font-weight: 800; color: #fff; border: 0; background: var(--c); box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 35%, transparent); }
.jg-cancel { min-height: 48px; padding-inline: 20px; }
@media (prefers-reduced-motion: reduce) { .jg-badge svg { animation: none; } }
/* a wide screen (an iPad, a computer): the window across, whole without scrolling: the switches, the
   recommendation and the levels on one side, what wins a station on the chosen level on the other; the four
   levels in one row when there is room */
.jg-col { display: contents; }
@media (min-width: 760px) and (min-height: 560px) {
  .jg-win { width: min(1040px, calc(100% - 48px)); }
  .jg-card { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; column-gap: 18px; row-gap: 14px;
    max-height: min(960px, calc(100dvh - var(--sa-top, 0px) - var(--sa-bottom, 0px) - 40px)); }
  .jg-card > :is(.jg-top, .jg-actions) { grid-column: 1 / -1; }
  .jg-col { container-type: inline-size; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .jg-card > .jg-detail { align-self: stretch; }
  .jg-actions { justify-content: flex-start; }
  .jg-save { flex: 0 1 260px; }
}
@container (min-width: 480px) {
  .jg-levels { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .jg-levels button { padding: 30px 6px 10px; }
  .jg-l-ico { width: 44px; height: 44px; font-size: 24px; }
}

/* ---------- the admin screen: editing the site (admin.js siteTab): its buttons, and a phone's preview ---------- */
.ste-intro { margin: 0 0 12px; font-size: 14px; }
.ste-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 18px; align-items: start; }
.ste-form { display: grid; gap: 14px; min-width: 0; }
.ste-part { display: grid; gap: 12px; }
.ste-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 18px; }
.ste-badge { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: var(--stec); }
.ste-badge svg { width: 19px; height: 19px; }
.ste-opts { display: grid; gap: 14px; transition: opacity .2s; }
.ste-opts.ste-off { opacity: .45; }
.ste-row { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ste-row legend, .ste-range-head { padding: 0; font-weight: 600; font-size: 14px; }
.ste-row .segmented { justify-self: start; }
.ste-range-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ste-range-head output { font-weight: 500; font-size: 13px; color: var(--muted); }
.ste-range input { width: 100%; accent-color: var(--accent); }
.ste-colors { align-items: center; }
.ste-custom { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; overflow: hidden;
  background: conic-gradient(#f44, #fb3, #4c4, #3cf, #66f, #e4e, #f44); box-shadow: 0 0 0 2px var(--border); }
.ste-custom input { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); padding: 0; border: 0; opacity: 0; cursor: pointer; }
.ste-custom:focus-within { outline: 3px solid #ffbf00; outline-offset: 2px; }
/* (the text's size on a row of its own, then the twelve tools: two, three or four to a row, ending even) */
.ste-part { container-type: inline-size; }
.ste-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ste-tool.ste-text { grid-column: 1 / -1; }
@container (min-width: 520px) { .ste-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 700px) { .ste-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ste-tool { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 14px; cursor: pointer; }
.ste-tool input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.ste-side { position: sticky; top: 90px; display: grid; gap: 8px; justify-items: center; text-align: center; }
.ste-phone { width: 220px; padding: 9px; border-radius: 34px; background: #0b1512; box-shadow: 0 18px 40px rgba(0, 0, 0, .3), inset 0 0 0 2px rgba(255, 255, 255, .12); }
.ste-screen { position: relative; height: 420px; border-radius: 26px; overflow: hidden; background: #f4f8f6; }
.ste-bar { height: 44px; background: linear-gradient(160deg, #073f30, #11815c); }
.ste-lines { display: grid; gap: 10px; padding: 16px 14px; }
.ste-lines i { display: block; height: 10px; border-radius: 6px; background: #dde8e2; }
.ste-lines i:nth-child(3n) { width: 70%; }
.ste-lines i:nth-child(2) { height: 60px; border-radius: 12px; }
.ste-tt, .ste-sa { position: absolute; display: grid; place-items: center; border-radius: 50%; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); transition: bottom .2s, background .2s, width .2s, height .2s; }
.ste-tt[hidden], .ste-sa[hidden] { display: none; }
.ste-tt svg, .ste-sa svg { width: 55%; height: 55%; }
@media (max-width: 760px) { .ste-wrap { grid-template-columns: 1fr; } .ste-side { position: static; order: -1; } }
@media (prefers-reduced-motion: reduce) { .ste-tt, .ste-sa, .ste-opts { transition: none; } }

/* ---------- the sport board at the top of the activity page, wide (sport-board.js) ----------
   the sport: the period, the distances, the time since each sport's last workout, the readiness with its
   measures round it, the race and the day's insight; then the eating for it: the rings, the energy's
   equation, the weeks and the 28 days. Laid out by the board's own width. */
.spb { container-type: inline-size; display: grid; gap: 16px; }
.spb h4 { margin: 0; font-size: 14px; font-weight: 800; color: var(--muted); letter-spacing: .01em; }
.spb-card { padding: 14px 16px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--border); }
.spb-none { margin: 0; font-size: 13.5px; }
.spb-top { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 10px; }
/* the board's "?" (sport-board.js boardHelp), and the line when the period has no workout */
.spb-q { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--accent);
  font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; }
.spb-q:hover { background: var(--accent); color: var(--accent-text); }
.spb-why { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, #f5a524 9%, var(--surface-2)); border: 1px solid color-mix(in srgb, #f5a524 30%, var(--border)); }
.spb-why-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; font-size: 20px; color: #f5a524; background: color-mix(in srgb, #f5a524 16%, transparent); }
.spb-why p { flex: 1; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.spb-why p b { color: var(--text); }
.spb-why-go { flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, #f5a524 45%, var(--border)); background: var(--surface); color: #f5a524; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
@media (max-width: 640px) { .spb-why { flex-wrap: wrap; } .spb-why-go { margin-inline-start: 48px; } }
.spb-help-why { margin: 0; padding: 12px 14px; border-radius: 14px; text-align: start; background: color-mix(in srgb, #f5a524 9%, var(--surface-2)); }
/* the board's "?" window: wide on a tablet and a computer, the reasons beside the parts; whole on a phone */
.jr-info.spb-help-win { width: min(920px, calc(100% - 24px)); }
.spb-help-win .ji-card { align-items: stretch; gap: 10px; padding: 20px 20px 16px; text-align: start; }
.spb-help-win h3 { margin: 0; font-size: 19px; }
.spb-help-win .sh-lead { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.sh-body { display: grid; gap: 10px; }
.spb-eq-info.sh-defs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
/* (on a phone with the reasons shown, the parts behind a line, so the window fits its screen whole) */
.sh-more summary { cursor: pointer; padding: 8px 2px; font-size: 13.5px; font-weight: 700; color: var(--accent); }
.sh-more[open] summary { margin-bottom: 4px; }
.sh-defs div { flex: 1 1 140px; padding: 7px 9px; }
.sh-defs dt { font-size: 13px; }
.sh-defs dd { font-size: 12px; line-height: 1.4; }
.spb-help-win .sh-foot { margin: 0; font-size: 12px; line-height: 1.4; color: var(--muted); text-align: center; }
.spb-help-win .ji-ok { min-height: 42px; margin-top: 2px; }
@media (min-width: 760px) {
  .sh-body:has(.spb-help-why) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: start; }
  .sh-defs div { flex-basis: 200px; }
  .sh-more summary { display: none; }
  .spb-help-win .ji-ok { width: auto; min-width: 200px; align-self: center; }
}
.spb-help-why h4 { margin: 0 0 6px; font-size: 15px; color: #f5a524; }
.spb-help-why p { margin: 0 0 6px; font-size: 13px; line-height: 1.45; }
.spb-help-why ul { margin: 0; padding-inline-start: 16px; display: grid; gap: 4px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.spb-help-why li b { color: var(--text); }
.spb-period { justify-self: end; }
.spb-period button { padding: 6px 14px; }
.spb-kpis { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 12px; }
.spb-kpi { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 10px; border-radius: 18px; text-align: center;
  background: linear-gradient(160deg, color-mix(in srgb, var(--kc) 14%, var(--surface-2)), var(--surface-2)); border: 1px solid color-mix(in srgb, var(--kc) 28%, var(--border)); }
.spb-kpi b { font-size: 26px; font-weight: 900; line-height: 1.15; color: color-mix(in srgb, var(--kc) 75%, var(--text)); font-variant-numeric: tabular-nums; }
.spb-kpi span { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.spb-alert { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; color: var(--text);
  background: color-mix(in srgb, #f59e0b 13%, var(--surface)); border: 1px solid color-mix(in srgb, #f59e0b 45%, var(--border)); }
.spb-alert > span { flex: none; font-size: 18px; }
.spb-alert p { flex: 1; margin: 0; font-size: 14px; font-weight: 600; }
.spb-alert-x { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: inherit; background: transparent; }
.spb-alert-x:hover { background: color-mix(in srgb, var(--text) 10%, transparent); }

/* the middle: the sports beside, the readiness in the middle, the race and the insight on the other side */
.spb-mid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.spb-orbit-wrap { grid-column: 1 / -1; order: -1; }
@container (min-width: 1040px) {
  .spb-mid { grid-template-columns: minmax(230px, 0.9fr) minmax(400px, 1.5fr) minmax(250px, 1fr); align-items: center; }
  .spb-orbit-wrap { grid-column: auto; order: 0; }
}
.spb-col { display: grid; gap: 10px; align-content: start; min-width: 0; }
.spb-since { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); }
.spb-art { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 22px; background: color-mix(in srgb, var(--sc) 16%, transparent); }
.spb-since-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.spb-since-t b { font-size: 15px; }
.spb-since-t small { font-size: 12px; color: var(--muted); text-wrap: pretty; }
.spb-when { flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.spb-when b { font-size: 15px; font-weight: 800; color: color-mix(in srgb, var(--st) 80%, var(--text)); }
.spb-when small { font-size: 11.5px; color: var(--muted); }

/* the readiness: its gauge in the middle, the measures in a ring round it, with the ring's faint orbits */
.spb-orbit { container-type: inline-size; position: relative; width: min(100%, 560px); aspect-ratio: 1; margin-inline: auto; }
.spb-orbits { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: color-mix(in srgb, var(--rd) 22%, var(--border)); stroke-width: .3; stroke-dasharray: 1 1.6; }
.spb-gauge { position: absolute; left: 27%; top: 26.5%; width: 46%; text-align: center; } /* (its arc, number and words together in the middle of the inner circle, as much room above as under) */
.spb-gauge svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--rd) 35%, transparent)); }
.spb-needle { transform-box: view-box; }
/* the readiness's number and word: a tap opens what it is (no "i" beside it) */
.spb-ready { position: relative; margin: -26% auto 0; display: flex; flex-direction: column; align-items: center; line-height: 1.1; padding: 2px 10px; border: 0; border-radius: 14px; background: none; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.spb-ready:focus-visible { outline: 2px solid var(--rd); outline-offset: 2px; }
.spb-ready b { font-size: max(26px, 9cqi); font-weight: 900; color: var(--rd); font-variant-numeric: tabular-nums; }
.spb-ready > span { margin-top: 2px; font-size: max(11px, 2.4cqi); font-weight: 800; letter-spacing: .03em; color: color-mix(in srgb, var(--rd) 80%, var(--text)); }
.spb-bub { position: absolute; left: calc(var(--x) - 10.5%); top: calc(var(--y) - 10.5%); width: 21%; aspect-ratio: 1; padding: 0; border-radius: 50%; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-align: center; color: var(--text); font: inherit; line-height: 1.15;
  border: 2px solid color-mix(in srgb, var(--st) 70%, transparent);
  background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--st) 20%, var(--surface)), var(--surface) 72%);
  box-shadow: 0 0 18px color-mix(in srgb, var(--st) 28%, transparent), inset 0 0 14px color-mix(in srgb, var(--st) 12%, transparent);
  transition: transform .2s, box-shadow .2s; }
.spb-bub:hover { transform: scale(1.06); box-shadow: 0 0 26px color-mix(in srgb, var(--st) 45%, transparent); }
.spb-bub b { font-size: max(15px, 4.1cqi); font-weight: 900; color: color-mix(in srgb, var(--st) 75%, var(--text)); font-variant-numeric: tabular-nums; }
.spb-bub b small { font-size: .55em; font-weight: 700; }
.spb-bub > span { font-size: max(10.5px, 2cqi); font-weight: 700; color: color-mix(in srgb, var(--text) 82%, var(--muted)); }
.spb-bub > small { max-width: 88%; font-size: max(9.5px, 1.75cqi); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the race: its days, the four phases with the one due framed and the one now marked, and what to do */
.spb-side { gap: 12px; }
.spb-race { display: grid; gap: 8px; }
.spb-race-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.spb-race-head h4 { font-size: 16px; color: var(--text); }
.spb-race.none h4 { color: var(--text); font-size: 15px; }
.spb-race p { margin: 0; font-size: 13.5px; }
.spb-race-sub { color: var(--muted); }
.spb-race-sub b { color: #f472b6; }
.spb-edit { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: transparent; cursor: pointer; }
.spb-edit:hover { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }
.spb-race-edit { justify-self: start; }
.spb-phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 10px; overflow: hidden; }
.spb-phases span { position: relative; padding: 7px 2px; font-size: 11.5px; font-weight: 800; text-align: center; white-space: nowrap; color: rgba(255, 255, 255, .7); }
.spb-phases .ph-build { background: #7f1d1d; } .spb-phases .ph-sharpen { background: #78350f; } .spb-phases .ph-taper { background: #3f6212; } .spb-phases .ph-peak { background: #14532d; }
.spb-phases .due { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.spb-phases .now { color: #fff; }
.spb-phases .now::after { content: ""; position: absolute; top: 2px; bottom: 2px; inset-inline-start: 50%; width: 3px; border-radius: 2px; background: #fff; box-shadow: 0 0 8px #fff; }
.spb-advice { padding: 8px 10px; border-radius: 10px; border-inline-start: 3px solid #fbbf24; background: color-mix(in srgb, #fbbf24 8%, transparent); }
.spb-insight p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; }

/* the eating: five rings in a row, the equation, the weeks, the chart */
.spb-rings { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.spb-ring { position: relative; width: min(100%, 150px); aspect-ratio: 1; margin-inline: auto; }
.spb-ring svg { width: 100%; height: 100%; overflow: visible; }
.spb-ring .rt { fill: none; stroke: color-mix(in srgb, var(--rc) 15%, var(--track)); stroke-width: 8; }
.spb-ring .rv { fill: none; stroke: var(--rc); stroke-width: 8; stroke-linecap: round; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--rc) 60%, transparent)); }
.spb-ring-in { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; line-height: 1.15; text-align: center; }
/* (its words one block, kept inside the ring's hole by ring-fit.js) */
.spb-ring-c { display: flex; flex-direction: column; align-items: center; white-space: nowrap; }
.spb-ring-c b { font-size: 22px; font-weight: 900; color: var(--rc); font-variant-numeric: tabular-nums; }
.spb-ring-c b small { font-size: 12px; font-weight: 700; }
.spb-ring-c > span { font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.spb-ring-c > small { font-size: 11px; color: var(--muted); }
/* a narrow card (an iPad's column, the site's half): three rings over two, centred, each bigger */
@container (max-width: 640px) {
  .spb-rings { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 12px; }
  .spb-ring { flex: 0 0 calc((100% - 24px) / 3); width: auto; max-width: 136px; margin: 0; }
}
/* a sum: left to right, as the goal's */
.spb-eq { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; padding: 12px 16px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--border); direction: ltr; }
.spb-eq > * { direction: rtl; }
/* (each sign level with the numbers beside it, not with the middle of a number and its word over it) */
.spb-eq > i { align-self: flex-end; display: grid; place-items: center; height: 1.334em; font-style: normal; font-size: 18px; line-height: 1; color: var(--muted); }
.spb-eq-part { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.spb-eq-part span { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.spb-eq-part b { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
.spb-eq-part.total b { color: #60a5fa; }
.spb-eq-part.net.good b { color: #4ade80; } .spb-eq-part.net.warn b { color: #fb923c; }
.spb-eq-sep { width: 1px; align-self: stretch; background: var(--border); }
/* (the "=" with the sum, the balance and its "?": one piece, to the next line as a whole when the line is short) */
.spb-eq-res { display: flex; align-items: center; gap: 8px 14px; direction: ltr; }
.spb-eq-res > * { direction: rtl; }
.spb-eq-res > i { align-self: flex-end; display: grid; place-items: center; height: 1.334em; font-style: normal; font-size: 18px; line-height: 1; color: var(--muted); }
.spb-eq-note { margin: -8px 0 0; text-align: center; font-size: 12px; color: var(--muted); text-wrap: balance; }
/* the equation's "?": what each part is, with the day's numbers (sport-board.js equationInfo) */
/* what the period changes, under its switch */
.spb-period-note { flex-basis: 100%; text-align: end; font-size: 12px; color: var(--muted); }
.spb-eq-q { flex: none; width: 30px; height: 30px; padding: 0; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--border); background: var(--surface); color: var(--accent); font-family: inherit; font-size: 15px; font-weight: 800; line-height: 1; cursor: pointer; }
.spb-eq-q:hover { border-color: var(--accent); }
.spb-eq-info { display: grid; gap: 8px; margin: 10px 0; text-align: start; }
.spb-eq-info div { padding: 8px 10px; border-radius: 12px; background: var(--surface-2); }
.spb-eq-info dt { display: flex; justify-content: space-between; gap: 8px; font-weight: 800; }
.spb-eq-info dt b { color: var(--c); font-variant-numeric: tabular-nums; }
.spb-eq-info dd { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.spb-sub { margin-top: 4px !important; }
.spb-weeks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@container (min-width: 980px) { .spb-weeks { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.spb-week { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border-radius: 16px; text-align: center; background: var(--surface-2); border: 1px solid var(--border); }
.spb-week small { font-size: 12px; color: var(--muted); }
.spb-week b { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.spb-week.good b { color: #4ade80; } .spb-week.warn b { color: #fb923c; } .spb-week.empty b { color: var(--muted); }
/* its lines: eaten, spent and the day's average, the word at the start and its number at the end */
.spb-wk-dl { display: grid; gap: 3px; width: 100%; margin: 6px 0 2px; padding-top: 8px; border-top: 1px solid var(--border); }
.spb-wk-dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 12px; line-height: 1.35; }
.spb-wk-dl dt { color: var(--muted); white-space: nowrap; }
.spb-wk-dl dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.spb-wk-days { margin-top: 4px; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--muted); background: color-mix(in srgb, var(--text) 7%, transparent); }
.spb-wk-none { font-size: 11.5px; line-height: 1.4; color: var(--muted); text-wrap: balance; }
.spb-chart { display: grid; gap: 6px; }
.spb-chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.spb-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); }
.spb-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.spb-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; }
.spb-legend .l-in { background: #4f9a42; } .spb-legend .l-bad { background: #b23f33; } .spb-legend .l-out { background: #8b7fd8; } .spb-legend .l-net { height: 3px; border-radius: 2px; background: #e2e8f0; }
.spb-chart svg { width: 100%; height: auto; font-family: inherit; }
.spb-chart .grid line { stroke: var(--border); stroke-width: 1; }
.spb-chart .grid line.zero { stroke: color-mix(in srgb, var(--text) 40%, transparent); stroke-dasharray: 4 4; }
.spb-chart text { font-size: 12px; fill: var(--muted); }
.spb-chart .b-out { fill: #8b7fd8; opacity: .85; }
.spb-chart .b-in.g { fill: #4f9a42; } .spb-chart .b-in.w { fill: #b23f33; }
.spb-chart .net { fill: none; stroke: #e2e8f0; stroke-width: 2.2; stroke-linejoin: round; }
.spb-chart circle.g { fill: #5b9a4b; stroke: var(--surface); stroke-width: 2; } .spb-chart circle.w { fill: #b44a3c; stroke: var(--surface); stroke-width: 2; }
.spb-chart .nv { font-size: 10.5px; font-weight: 700; } .spb-chart .nv.g { fill: #7cc46a; } .spb-chart .nv.w { fill: #e0705f; }
.spb-ji { font-size: 26px; font-weight: 900; }
/* (a value with its unit: the unit a small line under the number, inside the circle with room; "54 bpm" on one line had filled it edge to edge) */
.spb-ji bdi { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.spb-ji bdi small { margin-top: 3px; font-size: 12px; font-weight: 700; letter-spacing: .02em; opacity: .75; }
.spb-race-form .field input, .spb-race-form .field select { width: 100%; }
@media (prefers-reduced-motion: reduce) { .spb-bub { transition: none; } .spb-bub:hover { transform: none; } }

/* ---------- the BMI on the weight page (bmi-card.js): the number, its band, the scale with the mark, its trend ---------- */
.bmi-card { container-type: inline-size; }
.bmi-card > h3 { margin: 0 0 6px; text-align: center; font-size: 15px; font-weight: 800; color: var(--muted); }
.bmi-in { display: grid; gap: 18px; }
@container (min-width: 700px) { .bmi-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; } }
.bmi-now { display: grid; justify-items: center; gap: 10px; text-align: center; }
.bmi-num { font-size: 64px; font-weight: 900; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.bmi-band { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 800; color: color-mix(in srgb, var(--bc) 85%, var(--text)); }
.bmi-band i { width: 10px; height: 10px; border-radius: 50%; background: var(--bc); }
.bmi-scale { position: relative; width: 100%; max-width: 440px; padding: 6px 0 24px; }
.bmi-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; }
.bmi-bar span { width: var(--w); background: var(--c); }
.bmi-mark { position: absolute; top: 0; inset-inline-start: calc(var(--at) - 12px); width: 24px; height: 26px; border-radius: 999px; background: var(--bc);
  border: 3px solid #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.bmi-ticks span { position: absolute; top: 26px; inset-inline-start: var(--at); transform: translateX(50%); font-size: 12.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.bmi-keys { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 0; padding: 0; font-size: 13px; color: var(--muted); }
.bmi-keys li { display: inline-flex; align-items: center; gap: 6px; }
.bmi-keys i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.bmi-keys li.on { color: var(--text); font-weight: 800; }
.bmi-of { margin: 0; font-size: 14.5px; color: var(--muted); }
.bmi-range { margin: 0; font-size: 13px; color: var(--muted); }
.bmi-range b { color: var(--text); }
.bmi-trend h4 { margin: 0 0 6px; font-size: 16px; }
.bmi-need a { color: var(--accent); font-weight: 700; }

/* the BMI small (bmi-card.js bmiMini): in the diary's weight card and the weighing's window, a bar from blue
   to red read from the right, and a mark where the weight is */
.bmi-mini { display: grid; gap: 6px; width: 100%; }
.bmi-mini-t { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.bmi-mini-t b { font-size: 13.5px; color: var(--text); }
.bmi-mini-t i { width: 7px; height: 7px; border-radius: 50%; background: var(--bc); }
.bmi-mini-t span { font-weight: 700; color: color-mix(in srgb, var(--bc) 85%, var(--text)); }
.bmi-mini-bar { position: relative; height: 7px; border-radius: 999px;
  background: linear-gradient(to left, #5b8fc7 0 9%, #4f9a42 19% 35%, #e0b43a 44%, #c58a32 54%, #b23f33 64% 100%); }
.bmi-mini-bar em { position: absolute; top: -4px; bottom: -4px; inset-inline-start: var(--at); width: 3px; margin-inline-start: -1.5px; border-radius: 2px;
  background: var(--text); box-shadow: 0 0 0 1.5px var(--surface); }
.wi-bmi { width: min(100%, 320px); margin: 0 auto; }
.wi-bmi:empty { display: none; }
.wi-bmi .bmi-mini-t { justify-content: center; }

/* ---------- the water card's row of glasses (water-row.js): the day's drinks, the water, the empty ones,
   the next with a "+"; sideways on a narrow screen, faded at its ends ---------- */
.water-tile .wr-head { display: inline-flex; align-items: center; gap: 10px; }
/* the look switch: 36px drawn (the head no taller: -2px above and below), a finger's 48px to tap */
.wr-toggle { position: relative; display: grid; place-items: center; width: 36px; height: 36px; margin-block: -2px; padding: 0; border: 0; border-radius: 11px; cursor: pointer; color: #2f8ff0;
  background: color-mix(in srgb, #2f8ff0 14%, transparent); transition: background .2s, transform .15s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.wr-toggle::before { content: ""; position: absolute; inset: -6px; border-radius: 16px; }
.wr-toggle svg { width: 20px; height: 20px; }
.wr-toggle:hover { background: color-mix(in srgb, #2f8ff0 22%, transparent); }
.wr-toggle:active { transform: scale(.88); background: color-mix(in srgb, #2f8ff0 30%, transparent); transition-duration: .08s; }
.water-tile .tile-body.wr { flex-direction: column; align-items: stretch; gap: 6px; }
.wr-row { display: flex; gap: 6px; margin: 0 -6px; padding: 6px 6px 4px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  scrollbar-width: none; -webkit-mask-image: linear-gradient(to left, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  mask-image: linear-gradient(to left, transparent, #000 14px, #000 calc(100% - 14px), transparent); }
.wr-row::-webkit-scrollbar { display: none; }
/* a computer's mouse pulls it (drag-scroll.js): a hand to show it, a closed one while pulled, no snapping meanwhile */
@media (hover: hover) and (pointer: fine) { .wr-row { cursor: grab; } .wr-row .wr-add { cursor: pointer; } }
.wr-row.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.wr-row.dragging * { cursor: grabbing !important; }
.wr-row > li { flex: none; width: 56px; display: flex; flex-direction: column; align-items: center; gap: 2px; scroll-snap-align: center; }
.wr-row small { max-width: 100%; font-size: 10.5px; line-height: 1.2; color: var(--muted); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the time each cup was drunk, under its name (water-row.js) */
.wr-at { font-size: 10px; line-height: 1.1; font-weight: 700; color: color-mix(in srgb, var(--accent) 70%, var(--muted)); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.wr-art { display: grid; place-items: center; width: 52px; height: 52px; }
.wr-art svg, .wr-add svg { display: block; }
.wr-drink .wr-art { border-radius: 14px; background: color-mix(in srgb, var(--text) 5%, transparent); }
.wr-water:not(.full) .wr-art { opacity: .55; }
/* (an empty glass with no water at all: the drawing's lowest level still shows a little) */
.wr-row > li:not(.full, .wr-drink) .water-level { opacity: 0; }
.wr-add { position: relative; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 14px; cursor: pointer; background: none;
  -webkit-tap-highlight-color: transparent; transition: transform .15s; }
.wr-add:active { transform: scale(.92); }
.wr-add b { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 4px; font-size: 26px; font-weight: 800; line-height: 1; color: #4f46e5;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6); animation: wr-hint 2.4s ease-in-out infinite; pointer-events: none; }
:root[data-theme="dark"] .wr-add b { color: #a5b4fc; text-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wr-add b { color: #a5b4fc; text-shadow: none; } }
.wr-next small { color: #2f8ff0; font-weight: 700; }
@keyframes wr-hint { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
.water-tile .wr-sum { flex-direction: row; align-items: baseline; gap: 6px; }
/* the goal reached, in the row: the medal on the glass that reached it, its words by the day's amount */
.wr-row > li.wr-goal { position: relative; }
.wr-look .wr-goal .water-medal { inset-inline-start: calc(50% - 17px); top: 7.8px; }
.wr-look .water-medal > b { display: none; }
.wr-won { margin-inline-start: auto; font-style: normal; font-size: 13px; font-weight: 800; color: #a86f00; white-space: nowrap; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wr-won { color: #f5c542; } }
:root[data-theme="dark"] .wr-won { color: #f5c542; }
.water-tile .wr-sum b { font-size: 22px; }
@media (prefers-reduced-motion: reduce) { .wr-add b { animation: none; } }

/* the welcome wizard's activity question (welcome.js WZ_ACTIVITY): a drawing on each card, and the line
   under the question */
.wz-emo { display: block; font-style: normal; font-size: 26px; line-height: 1; margin-bottom: 4px; }
.wz-q-sub { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--muted); }

/* ---------- the vitamins and minerals in topics (micro-topics.js): the diary's card, the reports' part ---------- */
/* a card for each topic, its rings in a row: sideways on a narrow screen, all in one row on a wide one
   (two topics side by side on the widest, the "more" one across) */
.mt-card { container-type: inline-size; gap: 12px; }
.mt-report { container-type: inline-size; display: grid; gap: 12px; margin-top: 6px; }
.mt-sub-ico { font-size: 17px; }
.mt-cover { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); }
.mt-cover svg { flex: none; margin-top: 2px; }
.mt-cover b { color: var(--text); }
.mt-groups { display: grid; gap: 12px; }
.mt-grp { min-width: 0; padding: 12px 12px 10px; border-radius: 18px; background: color-mix(in srgb, var(--gc) 6%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--gc) 22%, var(--border)); }
.mt-grp[hidden] { display: none; }
.mt-grp h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: 16px; }
.mt-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; font-size: 16px; background: color-mix(in srgb, var(--gc) 20%, transparent); }
.mt-grp > p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.mt-rings { display: flex; gap: 8px; margin: 0 -12px; padding: 2px 12px 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 12px; scrollbar-width: none;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  /* faded at an edge with more beyond it (micro-topics.js wireTopics, core.js edgeFades), the fade easing in and out */
  -webkit-mask-image: linear-gradient(to left, transparent, #000 var(--mt-fs), #000 calc(100% - var(--mt-fe)), transparent);
  mask-image: linear-gradient(to left, transparent, #000 var(--mt-fs), #000 calc(100% - var(--mt-fe)), transparent);
  transition: --mt-fs .3s ease, --mt-fe .3s ease; }
@property --mt-fs { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --mt-fe { syntax: "<length>"; inherits: false; initial-value: 0px; }
.mt-rings.fade-start { --mt-fs: 16px; }
.mt-rings.fade-end { --mt-fe: 16px; }
.mt-rings::-webkit-scrollbar { display: none; }
/* the arrows over a strip that scrolls sideways (core.js scrollArrows): small glass rounds at its sides
   with more, until it is first scrolled by hand (then they fade away), never in the layout */
.sa-rail { position: relative; }
.sa-arrow { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  color: var(--text); background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .28), inset 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent);
  opacity: 0; pointer-events: none; transform: translateY(-50%) scale(.85); transition: opacity .45s ease, transform .45s ease; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* (the start side is the right in Hebrew: its arrow points right, back; the end side's left, on) */
.sa-start { inset-inline-start: -10px; }
.sa-end { inset-inline-end: -10px; }
.sa-end svg { transform: scaleX(-1); }
:root[dir="ltr"] .sa-start svg { transform: scaleX(-1); }
:root[dir="ltr"] .sa-end svg { transform: none; }
.sa-rail.sa-on.sa-more-start .sa-start, .sa-rail.sa-on.sa-more-end .sa-end, .sa-rail.sa-back .sa-start, .sa-rail.sa-fwd .sa-end { opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1); }
.sa-arrow:active { transform: translateY(-50%) scale(.9) !important; }
/* (not shown while there is nothing to go through: the water's row before a drink) */
.sa-rail.sa-off .sa-arrow { opacity: 0 !important; pointer-events: none !important; }
/* the first time, the arrow toward the rest nudges that way */
.sa-rail.sa-nudge.sa-more-end .sa-end svg { animation: sa-nudge 1.1s ease-in-out .35s 2; }
@keyframes sa-nudge { 0%, 100% { translate: 0; } 50% { translate: -4px; } }
@media (prefers-reduced-motion: reduce) { .sa-arrow { transition: opacity .2s; } .sa-rail.sa-nudge .sa-end svg { animation: none; } }
html[data-a11y~="motion"] .sa-rail.sa-nudge .sa-end svg { animation: none; }
.mt-r { flex: none; width: 104px; min-width: 0; display: grid; justify-items: center; align-content: start; gap: 3px; padding: 8px 4px 10px; scroll-snap-align: start;
  border: 0; border-radius: 16px; background: var(--surface); box-shadow: 0 1px 0 color-mix(in srgb, var(--c) 18%, transparent); color: inherit; font: inherit; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .15s; }
.mt-r:active { transform: scale(.97); }
.mt-r:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.mt-name { max-width: 100%; font-size: 13px; color: color-mix(in srgb, var(--c) 72%, var(--text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-ring, .mc-ring { position: relative; width: 82px; aspect-ratio: 1; }
.mt-ring svg, .mc-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
:is(.mt-ring, .mc-ring) .t { fill: none; stroke: color-mix(in srgb, var(--c) 16%, var(--track)); stroke-width: 9; }
:is(.mt-ring, .mc-ring) .v { fill: none; stroke: var(--c); stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--c) 45%, transparent)); }
.mt-in { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.mt-in strong { font-size: 18px; font-weight: 800; color: var(--c); font-variant-numeric: tabular-nums; }
.mt-in small { font-size: 10.5px; color: var(--muted); }
/* a value's words with room in its ring: the number and its goal a little apart; a long one (micro-topics.js
   mt-l, mt-xl) in a larger ring, its tile wider, never its words pressed to the stroke */
.mt-r .mt-in { gap: 3px; line-height: 1.12; }
.mt-r.mt-l { width: 118px; }
.mt-r.mt-l .mt-ring { width: 98px; }
.mt-r.mt-xl { width: 130px; }
.mt-r.mt-xl .mt-ring { width: 110px; }
.mt-ck { position: absolute; top: -2px; inset-inline-end: -2px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-style: normal; font-weight: 900; color: #fff; background: var(--good); }
.mt-line { font-size: 11.5px; line-height: 1.25; color: var(--muted); }
.mt-r.st-done .mt-line { color: var(--good); font-weight: 700; }
.mt-r.st-over .mt-line { color: #ef4444; font-weight: 700; }
.mt-src { font-size: 10px; line-height: 1.2; color: var(--muted); opacity: .85; }
.mt-more-btn { justify-self: center; align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--accent); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.mt-more-btn svg { transition: transform .2s; }
.mt-more-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.mt-empty { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
/* at the topics' end: what to improve, as the values stand now (micro-topics.js improveHtml) */
.mt-fix { min-width: 0; padding: 12px; border-radius: 18px; background: color-mix(in srgb, var(--accent) 6%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border)); --gc: var(--accent); }
.mt-fix h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: 16px; }
.mt-fix > p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.mtf-parts { display: flex; flex-wrap: wrap; gap: 12px; }
.mtf-part { flex: 1 1 280px; min-width: 0; }
.mt-fix .mtf-good + .mtf-parts { margin-top: 10px; }
.mtf-part h5 { margin: 0 0 6px; font-size: 13.5px; }
.mtf-part.over h5 { color: #ef4444; }
.mtf-part.near h5 { color: #f59e0b; }
.mtf-part.low h5 { color: #38bdf8; }
.mtf-part ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mtf-row { width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--c) 26%, var(--border)); border-radius: 14px;
  background: var(--surface); color: inherit; font: inherit; text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .15s; }
.mtf-row:active { transform: scale(.98); }
.mtf-row:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.mtf-ico { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-size: 11px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.mtf-txt { min-width: 0; display: grid; gap: 1px; }
.mtf-txt b { font-size: 14px; color: color-mix(in srgb, var(--c) 70%, var(--text)); }
.mtf-st { font-size: 12.5px; font-weight: 700; color: var(--text); }
.mtf-tip { font-size: 12px; line-height: 1.4; color: var(--muted); }
.mtf-good { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; background: color-mix(in srgb, var(--good) 10%, var(--surface)); }
.mtf-good span { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; font-weight: 900; font-size: 12px; background: var(--good); }
@container (min-width: 620px) {
  /* rows that fill the width (nine values: two whole rows of five and four, not nine cramped tiles in
     one); the ring larger with a thinner line, room inside it and between the lines under it */
  .mt-rings { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 2px 0; overflow: visible; }
  .mt-r { flex: 1 1 calc((100% - (var(--cols, var(--n)) - 1) * 10px) / var(--cols, var(--n)) - 1px); width: auto; gap: 5px; padding: 10px 6px 12px; }
  .mt-ring { width: min(94px, 100%); }
  .mt-r.mt-l .mt-ring { width: min(106px, 100%); }
  .mt-r.mt-xl .mt-ring { width: min(118px, 100%); }
  .mt-ring :is(.t, .v) { stroke-width: 7.5; }
  .mt-r .mt-in { gap: 2px; line-height: 1.15; }
  .mt-r .mt-in strong { font-size: 20px; }
  .mt-r .mt-in small { font-size: 11px; }
  .mt-r .mt-line { font-size: 12.5px; line-height: 1.35; }
  .mt-r .mt-src { font-size: 11px; line-height: 1.3; }
}
/* two topics side by side only when each still has its rows of rings (620 each); the side menu closed
   (an iPad, 1096) left five cramped tiles to a topic and names cut */
@container (min-width: 1280px) {
  .mt-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mt-more { grid-column: 1 / -1; }
}
/* a value's window */
.mc { display: grid; gap: 14px; }
.mc-hero { display: flex; align-items: center; gap: 14px; }
.mc-ring { flex: none; width: 104px; }
.mc-ring .mt-in strong { font-size: 22px; }
.mc-kind { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.mc-kind.need { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.mc-kind.limit { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
.mc-state { margin: 6px 0 0; font-size: 15px; font-weight: 700; }
.mc-state.st-done { color: var(--good); }
.mc-state.st-over { color: #ef4444; }
.mc-part { margin: 4px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.mc-sec h4 { margin: 0 0 4px; font-size: 14px; color: color-mix(in srgb, var(--c) 70%, var(--text)); }
.mc-sec p { margin: 0; line-height: 1.55; }
/* an iPad's and a computer's: the window wide, its parts two by two (what it does beside the goal,
   where it came from today beside what to eat), the head and the closing lines across, an odd last part
   across too */
@media (min-width: 700px) {
  dialog#dialog.mc-dlg { width: min(880px, calc(100vw - 48px)); }
  .mc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; align-items: start; }
  .mc > :not(section) { grid-column: 1 / -1; }
  .mc > section.mc-sec:nth-of-type(odd):last-of-type { grid-column: 1 / -1; }
}
.mc-top { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mc-top li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 10px; background: var(--surface-2); }
.mc-top b { flex: none; font-variant-numeric: tabular-nums; }
/* what to eat, where it comes from: tiles across the width, each row filled (a wide screen's in a few
   columns, a phone's one or two), a small dot in the value's colour before each */
.mc-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; line-height: 1.4; }
/* (the words in the card's middle, the dot level with the middle of their first line) */
.mc-list li { flex: 1 1 190px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; align-items: start; gap: 8px; padding: 8px 11px; border-radius: 10px; background: var(--surface-2); }
.mc-list li::before { content: ""; width: 7px; height: 7px; margin-top: calc(.7em - 3.5px); border-radius: 50%; background: color-mix(in srgb, var(--c) 75%, var(--text)); }
.mc-note { margin: 0; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; color: var(--muted); background: var(--surface-2); }
.mc-guide { justify-self: start; }
.mc-foot { margin: 0; font-size: 12px; color: var(--muted); }
/* the printed day report's tables of them, two to a row, the last across when it is alone */
.pr-micro { grid-column: 1 / -1; }
.prm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prm-grid > table:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pr-micro td:not(:first-child), .pr-micro th:not(:first-child) { width: auto; white-space: nowrap; }
.prm-bar { display: inline-block; width: 44px; height: 6px; border-radius: 3px; background: #e5e7eb; vertical-align: middle; overflow: hidden; }
.prm-bar i { display: block; height: 100%; background: #4f9a42; }
.prm-bar:is(.st-near, .st-low) i { background: #c58a32; }
.prm-bar.st-over i { background: #b23f33; }

/* ---------- the weight and fasting pages on a wide screen (an iPad, a computer): side by side ---------- */
/* the weighing: its picture (the scale among small drawings, and the way from the start to the goal)
   beside the form, the numbers under both; a phone keeps the one scale over the form (diary.js weightScene) */
.weight-page { container-type: inline-size; }
.wp-scene, .wp-track { display: none; }
@container (min-width: 760px) {
  .wp-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: center; margin-bottom: 8px; }
  .wp-side { display: grid; gap: 14px; }
  .wp-side .page-art { display: none; }
  .wp-form > :is(.btn.block, .link-btn) { width: min(100%, 420px); margin-inline: auto; }
  .wp-scene { display: block; position: relative; height: 250px; border-radius: 26px; overflow: hidden; isolation: isolate;
    background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, #8b5cf6 22%, var(--surface-2)), color-mix(in srgb, #8b5cf6 6%, var(--surface-2))); border: 1px solid color-mix(in srgb, #8b5cf6 22%, var(--border)); }
  .wp-blob { position: absolute; border-radius: 50%; filter: blur(30px); opacity: .5; z-index: -1; }
  .wp-blob.a { width: 160px; height: 160px; inset-inline-start: -30px; top: -40px; background: #a78bfa; }
  .wp-blob.b { width: 140px; height: 140px; inset-inline-end: -20px; bottom: -50px; background: #38bdf8; opacity: .35; }
  .wp-scale { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%); }
  .wp-float { position: absolute; animation: wp-float 6s ease-in-out infinite; }
  .wp-float.f1 { inset-inline-start: 13%; top: 16%; }
  .wp-float.f2 { inset-inline-end: 12%; top: 20%; animation-delay: -1.5s; }
  .wp-float.f3 { inset-inline-start: 17%; bottom: 14%; animation-delay: -3s; }
  .wp-float.f4 { inset-inline-end: 16%; bottom: 18%; animation-delay: -4.5s; }
  .wp-track { display: block; padding: 14px 16px 10px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--border); text-align: start; }
  .wp-track-bar { position: relative; height: 10px; border-radius: 999px; background: var(--track); }
  .wp-track-bar i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: inherit; background: linear-gradient(270deg, #a78bfa, #8b5cf6); }
  /* where the weight is now: a small pointer over the bar, not a round knob (that looked like a slider to pull) */
  .wp-track-bar b { position: absolute; bottom: calc(100% + 3px); width: 12px; height: 8px; margin-inline-start: -6px; background: #a78bfa; clip-path: polygon(0 0, 100% 0, 50% 100%); pointer-events: none; }
  .wp-track-ends { display: flex; justify-content: space-between; margin-top: 10px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .wp-track-ends span { display: flex; flex-direction: column; line-height: 1.2; }
  .wp-track-ends span:last-child { align-items: flex-end; }
  .wp-track-ends .now { align-items: center; color: #8b5cf6; }
  .wp-track-ends small { font-size: 11.5px; font-weight: 400; color: var(--muted); }
  .wp-track p { margin: 6px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
}
@keyframes wp-float { 50% { transform: translateY(-7px) rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .wp-float { animation: none; } }
html[data-a11y~="motion"] .wp-float { animation: none; }

/* the fast not yet started: the clock with how a fast goes beside the plans, two to a row (the last
   alone across the row); a phone keeps the clock over the plans, without the steps */
.fasting { container-type: inline-size; }
.fs-wrap, .fs-side, .fs-pick { display: contents; }
.fs-stages { display: none; }
@container (min-width: 760px) {
  .fs-wrap { display: grid; width: 100%; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 32px; align-items: start; }
  .fs-side, .fs-pick { display: grid; gap: 12px; align-content: start; }
  .fs-side { justify-items: center; }
  .fs-pick > h3 { margin: 4px 0 0; text-align: start; }
  .fs-pick .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-pick .plans > :last-child:nth-child(even) { grid-column: 1 / -1; }
  .fs-stages { display: grid; width: 100%; margin: 0; padding: 0; list-style: none; text-align: start; }
  .fs-stages li { position: relative; display: flex; gap: 12px; padding: 0 0 14px; }
  .fs-stages li:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 22px; top: 50px; bottom: 4px; width: 2px; border-radius: 2px; background: linear-gradient(var(--sc), color-mix(in srgb, var(--sc) 15%, transparent)); }
  .fs-ico { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--sc) 14%, var(--surface-2)); }
  .fs-t { display: flex; flex-direction: column; gap: 1px; line-height: 1.35; padding-top: 2px; }
  .fs-t small { font-size: 12px; font-weight: 700; color: var(--sc); }
  .fs-t b { font-size: 15px; }
  .fs-t span { font-size: 13px; color: var(--muted); }
}

/* the reports' diet quality over time (nutrients-report.js qualityBlock): its average, the days by their
   word as one bar, and its line */
.nr-quality { display: grid; gap: 10px; margin: 6px 0 4px; }
.nq-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.nq-score { display: grid; justify-items: center; line-height: 1.1; padding: 10px 18px; border-radius: 18px; background: color-mix(in srgb, var(--qc) 12%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--qc) 30%, var(--border)); }
.nq-score b { font-size: 34px; font-weight: 900; color: var(--qc); font-variant-numeric: tabular-nums; }
.nq-score span { font-size: 14px; font-weight: 800; color: var(--qc); }
.nq-score small { margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.nq-days { flex: 1 1 240px; display: grid; gap: 8px; }
.nq-bar { display: flex; gap: 3px; height: 12px; }
.nq-bar i { border-radius: 4px; min-width: 6px; }
.nq-keys { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); }
.nq-keys span { display: inline-flex; align-items: center; gap: 5px; }
.nq-keys i { width: 10px; height: 10px; border-radius: 3px; }
.nq-keys b { color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- the diary's small health cards on a wide screen (diary.js moveMore, weekMore, fastMore) ----------
   their more shows only when the card is wide enough (an iPad, a computer); a phone keeps them short */
.move-tile, .week-tile, .fast-idle { container-type: inline-size; }
.tile-more { display: none; }
@container (min-width: 300px) {
  .tile-more { display: grid; gap: 10px; margin-top: auto; }
  .move-tile .tile-btn, .week-tile .wk-line { margin-top: 0; }
}
/* the move card: the rings as bars, today's workouts */
.mv-bars { display: grid; gap: 8px; }
.mv-bar { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 8px; font-size: 13px; }
.mv-bar b { justify-self: end; color: var(--rc); font-variant-numeric: tabular-nums; }
.mv-bar > i { grid-column: 1 / -1; height: 7px; border-radius: 999px; background: color-mix(in srgb, var(--rc) 16%, var(--track)); overflow: hidden; }
.mv-bar > i > i { display: block; height: 100%; border-radius: inherit; background: var(--rc); }
.mv-acts { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mv-acts li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; background: var(--surface-2); font-size: 13.5px; }
.mv-acts small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.mv-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.mv-acts .mv-rest { display: block; text-align: center; color: var(--muted); font-size: 12.5px; background: none; padding: 0; }
.mv-none { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, #ff7a45 8%, var(--surface-2)); }
.mv-none > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.mv-none small { color: var(--muted); font-size: 12.5px; }
/* the week's balance: a bar a day against its goal */
.wk-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; height: 120px; }
.wk-day { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.wk-col { position: relative; flex: 1; width: 100%; max-width: 30px; border-radius: 8px; background: var(--track); overflow: hidden; }
.wk-fill { position: absolute; inset-inline: 0; bottom: 0; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, #86c26f, #4f9a42); }
.wk-day.st-near .wk-fill { background: linear-gradient(180deg, #e3b26a, #c58a32); }
.wk-day.st-over .wk-fill { background: linear-gradient(180deg, #d9705f, #b23f33); }
.wk-goal { position: absolute; inset-inline: 0; height: 2px; background: color-mix(in srgb, var(--text) 45%, transparent); z-index: 1; }
.wk-day.st-ahead .wk-col { opacity: .45; }
.wk-day small { font-size: 11px; color: var(--muted); }
.wk-day.now small { color: var(--accent); font-weight: 800; }
.wk-line { margin: 0; font-size: 13px; color: var(--muted); }
.wk-line b { color: var(--text); font-variant-numeric: tabular-nums; }
/* the fast not running: a night with its clock, and the last fasts */
.fs-more { grid-template-columns: auto 1fr; align-items: center; gap: 16px; }
.fs-scene { position: relative; width: 120px; height: 100px; border-radius: 22px; background: radial-gradient(120% 100% at 30% 20%, color-mix(in srgb, #8b5cf6 30%, var(--surface-2)), color-mix(in srgb, #14a3b8 14%, var(--surface-2))); overflow: hidden; }
.fs-moon { position: absolute; top: 8px; inset-inline-end: 10px; }
.fs-clock { position: absolute; bottom: 8px; inset-inline-start: 12px; }
.fs-scene > i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; opacity: .7; animation: fs-twinkle 3s ease-in-out infinite; }
.fs-scene .s1 { top: 18px; inset-inline-start: 22px; } .fs-scene .s2 { top: 40px; inset-inline-start: 58px; animation-delay: -1s; } .fs-scene .s3 { top: 14px; inset-inline-start: 80px; animation-delay: -2s; width: 3px; height: 3px; }
@keyframes fs-twinkle { 50% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) { .fs-scene > i { animation: none; } }
html[data-a11y~="motion"] .fs-scene > i { animation: none; }
.fs-last { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fs-last > small { color: var(--muted); font-size: 12.5px; }
.fs-last ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.fs-last li { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 8px; padding: 5px 10px; border-radius: 10px; background: var(--surface-2); font-size: 13px; }
.fs-last li b { font-variant-numeric: tabular-nums; }
.fs-last li.ok b { color: var(--good); }
.fs-last li small { color: var(--muted); font-size: 11.5px; }

/* the activity page's day, as the diary's: its name opens the calendar, the arrows beside it (health-page.js) */
.hx-day { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.hx-day .hx-day-pick { color: #fff; }

/* ---------- the settings' "rate us" card (rate-card.js): five stars lit one after another, a word, a button ---------- */
.rate-card { position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center; gap: 10px; margin: 18px 0 6px; padding: 22px 18px 18px; text-align: center;
  border-radius: 24px; color: var(--text); border: 1px solid color-mix(in srgb, #818cf8 30%, transparent);
  background: linear-gradient(140deg, color-mix(in srgb, #6366f1 20%, transparent), color-mix(in srgb, #0ea5e9 12%, transparent) 55%, color-mix(in srgb, #14b8a6 14%, transparent));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 30px color-mix(in srgb, #6366f1 14%, transparent); }
/* a soft light behind the stars */
.rt-glow { position: absolute; inset: -55% -10% auto; height: 120%; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, #fbbf24 22%, transparent), transparent 70%); }
.rt-stars { display: flex; gap: 6px; direction: ltr; }
.rt-star { width: 34px; height: 34px; fill: #fde68a; stroke: color-mix(in srgb, #f59e0b 70%, #fff); stroke-width: 1.2; stroke-linejoin: round; filter: drop-shadow(0 2px 6px rgba(146, 64, 14, .35)); transform: scale(.6) rotate(-20deg); opacity: .45; }
.rate-card.lit .rt-star { animation: rt-pop .5s cubic-bezier(.3, 1.6, .5, 1) forwards; animation-delay: calc(var(--i) * 120ms); }
@keyframes rt-pop { to { transform: none; opacity: 1; fill: #fcd34d; } }
.rt-text h3 { margin: 0; font-size: 19px; font-weight: 900; }
.rt-text p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.rt-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, #fcd34d, #f59e0b); color: #422006; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
  box-shadow: 0 4px 16px color-mix(in srgb, #f59e0b 35%, transparent); transition: transform .15s; }
.rt-btn svg { color: #fff; filter: drop-shadow(0 1px 1px rgba(146, 64, 14, .4)); }
.rt-btn:active { transform: scale(.97); }
.rt-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .8) 50%, transparent 70%); transform: translateX(-120%); }
.rate-card.lit .rt-btn::after { animation: rt-shine 1.2s ease-out .8s; }
@keyframes rt-shine { to { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .rt-star { transform: none; opacity: 1; fill: #fcd34d; } .rate-card.lit .rt-star, .rate-card.lit .rt-btn::after { animation: none; } }
html[data-a11y~="motion"] .rt-star { transform: none; opacity: 1; fill: #fcd34d; }
html[data-a11y~="motion"] .rate-card.lit .rt-star, html[data-a11y~="motion"] .rate-card.lit .rt-btn::after { animation: none; }
@media (min-width: 761px) { .rate-card { grid-template-columns: auto 1fr auto; justify-items: start; text-align: start; gap: 18px; padding: 20px 24px; } }

/* the sport board before it knows: the readiness's arc faint with an hourglass and what it waits for,
   and a measure not yet known dashed, its hourglass and when it comes (sport-board.js WAIT, SOON) */
.spb-gauge.none svg { opacity: .32; filter: grayscale(.5); }
.spb-ready.empty { margin-top: -40%; gap: 3px; max-width: 92%; }
.spb-ready.empty .spb-wait-ico { display: grid; place-items: center; width: max(34px, 8cqi); height: max(34px, 8cqi); border-radius: 50%; font-size: max(18px, 4.2cqi);
  color: #93c5fd; background: color-mix(in srgb, #60a5fa 16%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, #60a5fa 8%, transparent); animation: spb-turn 4s ease-in-out infinite; }
.spb-ready.empty b { font-size: max(15px, 3.4cqi); color: var(--text); }
.spb-ready.empty small { font-size: max(10.5px, 2cqi); line-height: 1.35; color: var(--muted); text-wrap: balance; }
@keyframes spb-turn { 0%, 70% { transform: none; } 85%, 100% { transform: rotate(180deg); } }
.spb-bub.none { border-style: dashed; border-color: color-mix(in srgb, var(--muted) 45%, transparent); background: color-mix(in srgb, var(--surface) 70%, transparent); box-shadow: none; }
.spb-bub.none b { font-size: max(16px, 3.6cqi); color: color-mix(in srgb, var(--muted) 85%, var(--text)); line-height: 1; margin-bottom: 2px; }
.spb-bub.none > span { color: color-mix(in srgb, var(--text) 70%, var(--muted)); }
@media (prefers-reduced-motion: reduce) { .spb-ready.empty .spb-wait-ico { animation: none; } }
html[data-a11y~="motion"] .spb-ready.empty .spb-wait-ico { animation: none; }

/* ---------- the settings' backups (backup.js): the cloud's rows, the file's, the undo; the password's window ---------- */
.bk { display: grid; gap: 10px; }
.bk-lead { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.bk-wait { margin: 0; }
.bk-sub { margin: 6px 2px 0; font-size: 13px; font-weight: 800; color: var(--muted); }
.bk-row { display: flex; align-items: center; gap: 12px; text-align: start; }
.bk-row[disabled] { opacity: .55; cursor: default; }
.bk-ico { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #0e9aa7; background: color-mix(in srgb, #14b8a6 14%, var(--surface-2)); }
.bk-row .set-label { flex: 1; min-width: 0; }
.bk-now { padding-block: 4px 10px; }
.bk-now .set-label { padding-inline-start: 56px; }
.bk-bad { color: #ef4444; }
.bk-undo .bk-ico { color: #f59e0b; background: color-mix(in srgb, #f59e0b 14%, var(--surface-2)); }
/* the daily backup's switch: the app's own switch (.track), the whole of it to tap (it took the admin's
   switch-row name, .bk-switch, and both its box and its knob's second move, out of the track) */
.bk-auto { position: relative; flex: none; display: inline-flex; cursor: pointer; }
.bk-auto input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
/* (held while iCloud is away: the choice shown, faint) */
.bk-auto input:disabled { cursor: default; }
.bk-auto input:disabled + .track { opacity: .45; }
.bk-files { display: grid; gap: 8px; }
.bk-pw { display: grid; justify-items: center; gap: 10px; text-align: center; }
.bk-pw-ico { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; color: #2dd4bf; background: color-mix(in srgb, #14b8a6 14%, var(--surface-2)); }
.bk-pw-title { margin: 0; font-size: 19px; font-weight: 900; }
.bk-pw-text { margin: 0; font-size: 14px; line-height: 1.55; }
.bk-field { position: relative; width: 100%; }
.bk-field input { width: 100%; padding: 13px 16px; padding-inline-end: 48px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: 16px; }
.bk-eye { position: absolute; top: 50%; inset-inline-end: 8px; transform: translateY(-50%); width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer; }
.bk-eye[aria-pressed="true"] { color: var(--accent); }
.bk-check { display: flex; align-items: center; gap: 8px; width: 100%; font-size: 14px; text-align: start; }
.bk-err { margin: 0; color: #ef4444; font-size: 13.5px; font-weight: 700; }
.bk-pw .actions { justify-content: center; width: 100%; }
.bk-sum { display: grid; gap: 2px; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); color: var(--text); font-size: 13.5px; }
.bk-warn { color: #f59e0b; font-weight: 700; }
.xo-backup .po-art { color: #14b8a6; }

/* a round "?" beside a title, opening its explanation (the reports' diet quality: nutrients-report.js) */
.help-q { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; margin-inline-start: 8px; padding: 0; border-radius: 50%; vertical-align: middle;
  border: 1.5px solid color-mix(in srgb, #22c55e 45%, var(--border)); background: color-mix(in srgb, #22c55e 12%, var(--surface)); color: #22c55e;
  font-family: inherit; font-size: 15px; font-weight: 900; line-height: 1; cursor: pointer; box-shadow: 0 0 0 4px color-mix(in srgb, #22c55e 7%, transparent); transition: transform .15s; }
.help-q:active { transform: scale(.92); }
.help-q:focus-visible { outline: 2px solid #22c55e; outline-offset: 2px; }
.nq-head { display: flex; align-items: center; }
.nq-parts { display: grid; gap: 5px; margin: 8px 0; padding: 0; list-style: none; text-align: start; }
.nq-parts li { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 8px; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; }
.nq-parts span { color: var(--muted); font-size: 12.5px; }
.nq-parts em { font-style: normal; font-weight: 800; color: #22c55e; font-variant-numeric: tabular-nums; }
.nq-bands { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 6px 0; }
.nq-bands span { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--b); background: color-mix(in srgb, var(--b) 14%, transparent); }

/* the credits', the legal pages' and a calculator's way back, at the end of their hero (credits.js, legal.js, calculators.js) */
.legal-hero:has(> .back-btn), .calc-hero:has(> .back-btn) { display: flex; align-items: center; gap: 12px; }
.legal-hero > .hero-title, .calc-hero > .hero-title { flex: 1; min-width: 0; }
.legal-hero > .back-btn, .calc-hero > .back-btn { flex: none; color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.legal-hero > .back-btn:hover, .calc-hero > .back-btn:hover { background: rgba(255, 255, 255, .28); }
/* the backup's password window while the keyboard is up: only what is typed in and its buttons, so all
   of it shows above the keyboard (the lock and the long line come back when it goes down) */
html.kb-open .bk-pw { gap: 8px; }
html.kb-open .bk-pw-ico, html.kb-open .bk-pw-text { display: none; }
html.kb-open .bk-pw-title { font-size: 16px; }
html.kb-open .bk-field input { padding-block: 10px; }
html.kb-open .bk-check { font-size: 13px; }
html.kb-open .bk-pw .actions { margin-top: 2px; }

/* the reports' search, across the page between the hero and the strip of its sections (reports.js) */
.rep-search { margin: 16px 0 6px; }
.rep-none { margin: 10px 0; }

/* a MoH food's line with the price of the similar product in its photo, a link to that product (detail.js similarLine) */
.similar-price { display: block; color: inherit; text-decoration: none; }
.similar-price .price-go { pointer-events: none; }

/* the managers' own pictures (admin-pictures.js): a camera on the item's picture, and its window */
.ap-edit { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px dashed color-mix(in srgb, var(--accent) 55%, var(--border));
  border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ap-edit:active { transform: scale(.96); }
.ap-edit.ap-round { width: 38px; height: 38px; min-height: 0; padding: 0; margin-inline-start: 6px; border-radius: 12px; border-style: solid; vertical-align: top;
  background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .45); }
.ap { display: grid; gap: 12px; }
.ap-what { margin: 0; font-size: 14px; color: var(--muted); }
.ap-what b { color: var(--text); }
.ap-preview { display: grid; place-items: center; min-height: 160px; max-height: 42vh; overflow: hidden; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); }
.ap-preview img { display: block; max-width: 100%; max-height: 42vh; object-fit: contain; }
.ap-empty { display: grid; justify-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.ap-empty svg { width: 30px; height: 30px; }
.ap-pick { position: relative; justify-self: center; display: inline-flex; align-items: center; gap: 8px; overflow: hidden; }
/* (the file picker lies over the button itself: a tap on a phone opens it as on a computer) */
.ap-file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.ap-note { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); text-align: center; }
.cap-dish-pic { display: grid; justify-items: center; gap: 8px; margin-bottom: 10px; }
.cap-dish-photo { width: min(320px, 100%); aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; }

/* a line chart's card at the mouse (line-chart.js): by the nearest day, out of the line's way, never taking the mouse */
.lc-tip { position: absolute; z-index: 5; display: grid; gap: 1px; padding: 6px 10px; border-radius: 10px; white-space: nowrap; pointer-events: none;
  background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--border);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .55); font-size: 12px; color: var(--muted); text-align: center; opacity: 0; transition: opacity .12s; }
.lc-tip.on { opacity: 1; }
.lc-tip b { font-size: 15px; color: var(--lc, var(--text)); }
.lc-tip .lc-vs { font-size: 11px; }
@media (prefers-reduced-motion: reduce) { .lc-tip { transition: none; } }

/* whose a manager's picture is (admin-pictures.js): theirs (no line under it), or from elsewhere (its credit) */
.ap-whose { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; border: 0; }
.ap-whose legend { grid-column: 1 / -1; padding: 0; margin-bottom: 6px; font-size: 13.5px; font-weight: 700; }
.ap-choice { position: relative; display: block; cursor: pointer; }
.ap-choice input { position: absolute; opacity: 0; pointer-events: none; }
.ap-choice span { display: grid; gap: 2px; height: 100%; padding: 10px 12px; border-radius: 14px; border: 2px solid var(--border); background: var(--surface-2); transition: border-color .15s, background .15s; }
.ap-choice b { font-size: 14px; }
.ap-choice small { font-size: 12px; line-height: 1.4; color: var(--muted); }
.ap-choice input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
.ap-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.ap-credit { display: grid; gap: 6px; }
.ap-credit[hidden] { display: none; }
.ap-credit input { width: 100%; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: 14px; }
.cap-dish-credit { font-size: 11.5px; color: var(--muted); }
.cap-dish-credit a { color: inherit; }

/* the window's state now, its ways back and the uploads kept (admin-pictures.js) */
.ap-now { display: grid; gap: 4px; }
.ap-now .ap-preview { min-height: 120px; max-height: 30vh; }
.ap-now .ap-preview img { max-height: 30vh; }
.ap-now-word { text-align: center; font-size: 12.5px; color: var(--muted); }
.ap-ways { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ap-way { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ap-way:hover { border-color: var(--accent); color: var(--accent); }
.ap-versions { display: grid; gap: 4px; }
.ap-versions > small { font-size: 12px; color: var(--muted); }
.ap-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.ap-ver { flex: none; display: grid; gap: 2px; justify-items: center; width: 68px; padding: 3px; border-radius: 12px; border: 2px solid transparent; background: var(--surface-2); color: var(--muted); font: inherit; font-size: 10.5px; cursor: pointer; }
.ap-ver img { width: 58px; height: 46px; object-fit: cover; border-radius: 8px; }
.ap-ver.on { border-color: var(--accent); color: var(--accent); }
.ap-new { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.ap-link { padding: 4px 6px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ap-whose-box { display: grid; gap: 8px; }
.ap-whose-box[hidden] { display: none; }

/* the admin screen's list of the managers' pictures (admin.js pictureList) */
.apl h3 small { font-size: 13px; font-weight: 600; }
.apl-intro { margin: 0 0 12px; font-size: 13.5px; }
.apl-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.apl-item { display: grid; grid-template-columns: 72px 1fr auto; align-items: start; gap: 12px; padding: 10px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); }
.apl-thumb { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: var(--surface); }
.apl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.apl-none { color: var(--muted); }
.apl-text { min-width: 0; display: grid; gap: 2px; }
.apl-text b { font-size: 15px; }
.apl-text small { font-size: 12.5px; color: var(--muted); }
.apl-state { font-weight: 700; }
.apl-state.on { color: #22a06b; }
.apl-state.none { color: #f59e0b; }
.apl-state.own { color: var(--muted); }
.apl-vers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.apl-ver { position: relative; width: 46px; height: 46px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; }
.apl-ver.on { border-color: var(--accent); }
.apl-ver img { width: 100%; height: 100%; object-fit: cover; }
.apl-ver-x { position: absolute; top: 1px; inset-inline-end: 1px; display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; }
.apl-acts { display: grid; gap: 6px; justify-items: stretch; }
@media (max-width: 640px) {
  .apl-item { grid-template-columns: 56px 1fr; }
  .apl-thumb { width: 56px; height: 56px; }
  .apl-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; }
}

/* a window's own "close" at its end: small, in the middle */
.dlg-done-row { display: flex; justify-content: center; margin-top: 6px; }
.dlg-done { min-width: 120px; min-height: 40px; padding: 8px 22px; border-radius: 999px; font-size: 14px; font-weight: 700; }
/* a window wider than "wide" on a tablet and a computer (xwide): its parts side by side */
@media (min-width: 900px) {
  dialog#dialog.wide.xwide { width: min(1060px, calc(100vw - 40px)); }
  /* (the day's nutrition a little narrower than the widest windows) */
  dialog#dialog.wide.xwide.md-dlg { width: min(980px, calc(100vw - 56px)); }
  /* the activity: what was picked, its burn and its time on one side, the activities on the other */
  .act-dlg .act-form { display: grid; grid-template-columns: minmax(300px, .85fr) minmax(0, 1.25fr); grid-template-areas: "stage grid" "time grid" "acts grid"; gap: 16px 24px; align-items: start; }
  .act-dlg .act-stage { grid-area: stage; }
  .act-dlg .act-grid { grid-area: grid; }
  .act-dlg .act-form > .field { grid-area: time; margin: 0; }
  .act-dlg .act-form > .actions { grid-area: acts; margin: 0; }
  /* (five quick times in two whole rows: three, then two wider) */
  .act-dlg .act-quick { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .act-dlg .act-quick button { grid-column: span 2; }
  .act-dlg .act-quick button:nth-child(n+4) { grid-column: span 3; }
  /* the guide: the nutrients in one row, the explanations in two columns beside the numbers */
  .ng-dlg .ng-table { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .ng-dlg .ng-card { grid-template-columns: minmax(0, 1fr) 250px; }
  .ng-dlg .ng-main { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; align-items: start; }
  .ng-dlg .ng-main > .ng-sec:nth-child(2) { border-top: 0; padding-top: 0; }
  .ng-dlg .ng-main > .ng-sec.ng-wide { grid-column: 1 / -1; }
}

/* the running fast's clock on a disc of the card's own colour: the desert's clouds pass behind it, never over it */
.fast-clock .fc-disc { fill: var(--surface); }

/* a bar of the activity chart in the keyboard's focus (activity-stats.js) */
.ac-col:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

/* the daily balance's card (sport-board.js chartDay): beside the picked day, never over it; a thin line down it */
.spb-plot { position: relative; border-radius: 12px; }
.spb-plot:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.spb-guide { stroke: color-mix(in srgb, var(--text) 55%, transparent); stroke-width: 1.5; pointer-events: none; }
/* the day picked: a soft band behind it, its bars and dot standing out, the other days dimmed, its date under it */
.spb-plot { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.spb-band { fill: color-mix(in srgb, var(--accent) 16%, transparent); stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-width: 1.5; pointer-events: none; }
.spb-day { transition: opacity .15s; }
.spb-plot.picking .spb-day:not(.on) { opacity: .3; }
.spb-pickdot { stroke: #fff; stroke-width: 3; pointer-events: none; }
.spb-pickdot.g { fill: #5b9a4b; } .spb-pickdot.w { fill: #b44a3c; }
.spb-chart .spb-xpick { font-size: 13px; font-weight: 800; fill: var(--text); }
.spb-chart .xl.off { opacity: .25; }
/* (above the plot, over its legend's line, never over the bars it tells of) */
.spb-ctip { position: absolute; top: auto; bottom: calc(100% + 4px); z-index: 3; display: grid; gap: 4px; min-width: 150px; padding: 8px 11px; border-radius: 12px; pointer-events: none;
  background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--border);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .55); font-size: 12.5px; }
.spb-ctip[hidden] { display: none; }
.spb-ctip b { font-size: 13px; }
.spb-ctip dl { display: grid; grid-template-columns: auto auto; gap: 2px 12px; margin: 0; }
.spb-ctip dt { display: flex; align-items: center; gap: 5px; color: var(--muted); }
.spb-ctip dt i { width: 9px; height: 9px; border-radius: 3px; }
.spb-ctip dd { margin: 0; font-weight: 700; text-align: end; font-variant-numeric: tabular-nums; }
.spb-ctip-net { font-weight: 700; }
.spb-ctip-net.g { color: #4ade80; } .spb-ctip-net.w { color: #f87171; }
/* low: the day, what was eaten and burned in one line, how it came out under it; so above the plot it
   lies on the chart's own title and legend, not on what is above them */
.spb-ctip { grid-template-columns: auto auto; align-items: center; column-gap: 14px; row-gap: 2px; padding: 6px 11px; }
.spb-ctip > b { grid-column: 1; padding-inline-end: 0; }
.spb-ctip dl { grid-column: 2; display: flex; gap: 12px; }
.spb-ctip dl dd { margin-inline-start: -2px; }
.spb-ctip > .spb-ctip-net, .spb-ctip > .muted { grid-column: 1 / -1; }
.spb-ctip .l-in { background: #4f9a42; } .spb-ctip .l-bad { background: #b23f33; } .spb-ctip .l-out { background: #8b7fd8; }

/* the next meal's recipe, and the small button to more ideas under it (diary.js openMoreIdeas) */
.next-recipe-box { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.next-recipe-box .next-recipe { flex: 1; }
.next-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: border-color .15s, background .15s; }
.next-more:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.mi { display: grid; gap: 12px; }
.mi-lead { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.mi-lead svg { color: var(--meal); vertical-align: -3px; margin-inline-end: 4px; }
.mi-lead b { color: var(--text); }
.mi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mi-card { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface-2);
  color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.mi-card:hover { border-color: color-mix(in srgb, var(--meal) 60%, var(--border)); transform: translateY(-1px); }
.mi-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mi-pic { flex: none; width: 64px; height: 64px; border-radius: 14px; }
.mi-text { min-width: 0; display: grid; gap: 3px; }
.mi-text > b { font-size: 14.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mi-facts { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; color: var(--muted); }
.mi-facts b { color: var(--text); font-variant-numeric: tabular-nums; }
.mi-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.mi-tag { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--meal); background: color-mix(in srgb, var(--meal) 14%, transparent); }
@media (max-width: 520px) { .mi-grid { grid-template-columns: minmax(0, 1fr); } }

/* the calculators (calculators.js): the cards, each calculator's form beside its result */
.calc-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.calc-card { flex: 1 1 300px; display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; border: 1px solid var(--border);
  background: var(--surface); color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.calc-card:hover { border-color: color-mix(in srgb, var(--cc) 60%, var(--border)); transform: translateY(-1px); }
.calc-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.calc-card > span { display: grid; gap: 3px; min-width: 0; }
.calc-card b { font-size: 16px; }
.calc-card small { color: var(--muted); font-size: 13px; line-height: 1.4; }
.calc-art { flex: none; }
.calc-art, .calc-hero-art, .calc-scene { --na-paper: #fff; }
.calc-en { white-space: nowrap; }
.calc-note { display: flex; align-items: center; justify-content: center; gap: 9px; width: fit-content; max-width: 100%; box-sizing: border-box; margin: 16px auto 0;
  padding: 8px 16px 8px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, transparent); font-size: 13px; line-height: 1.45; color: var(--muted); text-align: center; }
.calc-note-i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent)); box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 35%, transparent); }
@media (max-width: 520px) { .calc-note { border-radius: 16px; text-align: start; } }
.calc-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
@media (min-width: 900px) { .calc-page { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; } }
.calc-form { display: grid; gap: 14px; align-content: start; }
.calc-field { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
.calc-field legend { padding: 0; margin-bottom: 8px; font-size: 14px; color: var(--muted); }
.calc-field[hidden] { display: none; }
.calc-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 16px; }
.calc-num { min-width: 0; gap: 10px; }
/* the profile's stepper, a little smaller here (profile-edit.js stepper) */
.calc-form .pe-stepper { gap: 10px; justify-content: space-between; }
.calc-form .pe-step { width: 44px; height: 44px; border-radius: 14px; font-size: 24px; }
.calc-form .pe-num { flex: 1; justify-content: center; padding: 4px 10px; min-width: 0; }
.calc-form .pe-num input { width: 4.6ch; font-size: 26px; }
.calc-form .pe-range { margin: 2px 0 0; }
.calc-form .pe-range.calc-unset { opacity: .45; background: var(--track); }
.calc-form .pe-num input::placeholder { color: var(--muted); opacity: .7; }
.calc-hint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.calc-levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 520px) { .calc-levels { grid-template-columns: minmax(0, 1fr); } }
.calc-level { position: relative; }
.calc-level input { position: absolute; opacity: 0; }
.calc-level span { display: grid; gap: 2px; height: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); cursor: pointer; }
.calc-level b { font-size: 14px; }
.calc-level small { font-size: 12px; color: var(--muted); line-height: 1.35; }
.calc-level input:checked + span { border-color: var(--cc); background: color-mix(in srgb, var(--cc) 14%, transparent); }
.calc-level input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.calc-out { display: grid; gap: 12px; min-height: 180px; align-content: start; }
.calc-empty { margin: 0; padding: 6px 8px 14px; text-align: center; color: var(--muted); }
.calc-res { display: grid; gap: 12px; }
.calc-scene { display: block; width: 100%; max-width: 230px; height: auto; margin: 0 auto; }
.calc-scale { display: grid; justify-items: center; gap: 8px; }
.calc-scale .bmi-scale { max-width: 100%; }
/* the scenes' motion, gentle (none for who asked for less) */
.calc-scene .cs-pulse { transform-box: view-box; transform-origin: 150px 26px; animation: cs-pulse 2.6s ease-in-out infinite; }
.calc-scene .cs-needle { transform-box: view-box; transform-origin: 84px 74px; animation: cs-needle 3.4s ease-in-out infinite; }
.calc-scene .cs-z { animation: cs-z 3.2s ease-in-out infinite; }
.calc-scene .cs-beat { transform-box: view-box; transform-origin: 156px 32px; animation: cs-beat 1.3s ease-in-out infinite; }
.calc-scene .cs-spark { transform-box: fill-box; transform-origin: center; animation: cs-spark 2.8s ease-in-out infinite; }
.calc-scene .cs-late { animation-delay: 1.4s; }
.calc-scene .cs-tape { animation: cs-tape 3s ease-in-out infinite; }
@keyframes cs-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes cs-needle { 0%, 100% { transform: rotate(-38deg); } 50% { transform: rotate(18deg); } }
@keyframes cs-z { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(-6px); opacity: 1; } }
@keyframes cs-beat { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.16); } 40% { transform: scale(1); } }
@keyframes cs-spark { 0%, 100% { transform: scale(.6) rotate(0); opacity: .5; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }
@keyframes cs-tape { 0%, 100% { stroke-width: 9; } 50% { stroke-width: 10.5; } }
@media (prefers-reduced-motion: reduce) { .calc-scene * { animation: none !important; } }
.calc-big { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-top: 6px; }
.calc-big b { font-size: 46px; line-height: 1; color: var(--cc); font-variant-numeric: tabular-nums; }
.calc-big span { font-size: 15px; color: var(--muted); }
.calc-label { margin: 0; text-align: center; font-size: 14.5px; }
.calc-label-top { text-align: start; font-weight: 700; }
.calc-band { display: inline-block; padding: 3px 12px; border-radius: 999px; font-weight: 800; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.calc-facts { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; font-size: 14px; line-height: 1.5; }
.calc-warn { color: #e0a23a; }
.calc-bad { margin: 0; padding: 14px; text-align: center; line-height: 1.7; }
.calc-more { margin: 0; font-size: 14px; }
.calc-src { margin: 0; font-size: 12px; color: var(--muted); }
.calc-dri { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 560px) { .calc-dri { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.calc-dri h4 { margin: 0 0 6px; font-size: 14px; color: var(--cc); }
.calc-dri ul { list-style: none; margin: 0; padding: 0; display: grid; }
.calc-dri > section > ul > li { border-bottom: 1px solid var(--border); }
/* a row opens to its explanation (calculators.js row) */
.calc-dri-item summary { display: flex; align-items: baseline; gap: 8px; padding: 7px 6px; border-radius: 10px; font-size: 13.5px; cursor: pointer; list-style: none; }
.calc-dri-item summary::-webkit-details-marker { display: none; }
.calc-dri-item summary > span { flex: 1; min-width: 0; }
.calc-dri-item summary:hover { background: color-mix(in srgb, var(--cc) 8%, transparent); }
.calc-dri-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.calc-dri-item summary b { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: end; }
.calc-dri-item summary b small { display: block; font-weight: 400; font-size: 11.5px; color: var(--muted); }
.calc-dri-chev { flex: none; align-self: center; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--cc);
  background: color-mix(in srgb, var(--cc) 12%, transparent); transition: transform .2s; }
.calc-dri-item[open] .calc-dri-chev { transform: rotate(180deg); }
.calc-dri-item[open] summary { background: color-mix(in srgb, var(--cc) 10%, transparent); }
.calc-dri-info { margin: 4px 6px 10px; padding: 10px 12px; border-radius: 12px; border-inline-start: 3px solid var(--cc);
  background: color-mix(in srgb, var(--cc) 6%, var(--surface)); font-size: 13px; line-height: 1.55; }
.calc-dri-info p { margin: 0; }
.calc-dri-info .calc-dri-src { margin-top: 8px; }
.calc-dri-info ul { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; margin: 6px 0 0; padding: 0; }
.calc-dri-info ul li { padding: 2px 9px; border-radius: 999px; font-size: 12px; background: color-mix(in srgb, var(--cc) 14%, transparent); }
.calc-dri-info .calc-dri-tip { margin-top: 8px; font-size: 12px; color: var(--muted); }
.calc-dri sup { color: var(--muted); }

/* the calculators' page: its scene under the cards (calculators.js INDEX_SCENE), a gentle motion */
.calc-index-scene { display: block; width: 100%; max-width: 440px; height: auto; margin: 22px auto 0; --na-paper: #fff; }
.calc-index-scene .k { transform-box: fill-box; transform-origin: center; animation: ci-key 4.4s ease-in-out infinite; }
.calc-index-scene .k0 { animation-delay: 0.0s; }
.calc-index-scene .k1 { animation-delay: 0.4s; }
.calc-index-scene .k2 { animation-delay: 0.8s; }
.calc-index-scene .k3 { animation-delay: 1.2s; }
.calc-index-scene .k4 { animation-delay: 1.6s; }
.calc-index-scene .k5 { animation-delay: 2.0s; }
.calc-index-scene .k6 { animation-delay: 2.4s; }
.calc-index-scene .k7 { animation-delay: 2.8s; }
.calc-index-scene .k8 { animation-delay: 3.2s; }
.calc-index-scene .k9 { animation-delay: 3.6s; }
.calc-index-scene .k10 { animation-delay: 4.0s; }
.calc-index-scene .ci-digits rect { animation: ci-digit 2.2s steps(2, jump-none) infinite; }
.calc-index-scene .ci-digits .d2 { animation-delay: .5s; }
.calc-index-scene .ci-digits .d3 { animation-delay: 1s; }
.calc-index-scene .ci-needle { transform-box: view-box; transform-origin: 73px 162px; animation: cs-needle 3.4s ease-in-out infinite; }
.calc-index-scene .ci-bounce { animation: ci-bounce 1.8s cubic-bezier(.5, 0, .5, 1) infinite; }
.calc-index-scene .ci-beat { transform-box: view-box; transform-origin: 318px 92px; animation: cs-beat 1.3s ease-in-out infinite; }
.calc-index-scene .ci-ecg { stroke-dasharray: 90; animation: ci-ecg 2.6s linear infinite; }
.calc-index-scene .ci-tape { animation: cs-tape 3s ease-in-out infinite; }
.calc-index-scene .ci-float path { animation: ci-float 4s ease-in-out infinite; }
.calc-index-scene .ci-spark { transform-box: fill-box; transform-origin: center; animation: cs-spark 2.8s ease-in-out infinite; }
.calc-index-scene .ci-late { animation-delay: 1.3s; }
.calc-index-scene .ci-later { animation-delay: 2.6s; }
@keyframes ci-key { 0%, 12%, 100% { transform: scale(1); filter: none; } 6% { transform: scale(.82); filter: brightness(.85); } }
@keyframes ci-digit { 0% { opacity: .25; } 100% { opacity: 1; } }
@keyframes ci-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes ci-ecg { 0% { stroke-dashoffset: 90; } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes ci-float { 0% { transform: translateY(6px); opacity: 0; } 30%, 70% { opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .calc-index-scene * { animation: none !important; } }

/* the sex as two cards, each with its symbol in its colour (calculators.js SEX) */
.calc-sex { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 360px; }
.calc-sex-card { position: relative; }
.calc-sex-card input { position: absolute; opacity: 0; }
.calc-sex-card span { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; border: 1.5px solid var(--border); cursor: pointer;
  background: var(--surface); transition: border-color .15s, background .15s, transform .15s; }
.calc-sex-card i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--sc);
  background: color-mix(in srgb, var(--sc) 14%, transparent); transition: transform .3s cubic-bezier(.34, 1.4, .64, 1); }
.calc-sex-card b { font-size: 15px; }
.calc-sex-card:hover span { border-color: color-mix(in srgb, var(--sc) 45%, var(--border)); }
.calc-sex-card input:checked + span { border-color: var(--sc); background: color-mix(in srgb, var(--sc) 12%, var(--surface)); }
.calc-sex-card input:checked + span i { color: #fff; background: var(--sc); transform: rotate(-8deg) scale(1.06); }
.calc-sex-card input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .calc-sex-card i { transition: none; } }

/* the recent fasts' head, with the button that deletes them all (diary.js renderFasting) */
.fast-list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.fast-list-head h3 { margin: 0; }
.fast-clear { color: var(--muted); }
.fast-clear:hover, .fast-clear:focus-visible { color: #e5484d; border-color: color-mix(in srgb, #e5484d 45%, var(--border)); background: color-mix(in srgb, #e5484d 10%, transparent); }
/* the weight page's way to the calculators (diary.js renderWeight) */
.calc-short { margin-top: 14px; padding: 14px; border-radius: 22px; border: 1px solid color-mix(in srgb, #14b8a6 30%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, #14b8a6 14%, var(--surface)), var(--surface) 70%); display: grid; gap: 12px; }
.calc-short-main { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; --na-paper: #fff; }
.calc-short-main > .icon { flex: none; color: #14b8a6; }
.calc-short-art { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: color-mix(in srgb, #14b8a6 16%, transparent); }
.calc-short-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.calc-short-t b { font-size: 16px; }
.calc-short-t small { color: var(--muted); font-size: 13px; line-height: 1.4; }
.calc-short-main:focus-visible, .calc-short-chips a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 14px; }
.calc-short-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.calc-short-chips a { flex: 1 1 auto; padding: 6px 9px; border-radius: 999px; font-size: 13px; font-weight: 700; text-align: center; white-space: nowrap; color: #0f766e; text-decoration: none;
  background: color-mix(in srgb, #14b8a6 14%, var(--surface)); border: 1px solid color-mix(in srgb, #14b8a6 30%, transparent); }
.calc-short-chips a:hover { background: color-mix(in srgb, #14b8a6 24%, var(--surface)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .calc-short-chips a { color: #5eead4; } }
:root[data-theme="dark"] .calc-short-chips a { color: #5eead4; }

/* an item the person picked from searches twice or more: it leads the list, with this mark (search.js likedMark) */
.sg-liked { display: inline-flex; align-items: center; gap: 3px; margin-inline-start: 6px; padding: 1px 7px; border-radius: 999px; vertical-align: 1px;
  font-size: 11px; font-weight: 700; color: #b7791f; background: color-mix(in srgb, #f5a524 16%, transparent); white-space: nowrap; }
.sg-liked .icon { color: #f5a524; }
.card.liked { position: relative; border-color: color-mix(in srgb, #f5a524 45%, var(--border)); }
.card-liked { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 1; display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; color: #fff; background: #e9a800; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sg-liked { color: #fcd34d; } }
:root[data-theme="dark"] .sg-liked { color: #fcd34d; }

/* the day by the hours, wide on a tablet and a computer: the food beside the drinks, the hours' list under them */
.dh .xbar { margin-bottom: 12px; }
.dh-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  dialog#dialog.dh-dialog.xwide .dh-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
  dialog#dialog.dh-dialog.xwide .dh-side .dh-water { margin-top: 14px; }
  /* (the charts no taller than this, their letters not blown up by the wide column: an iPad's column
     still has them whole across) */
  dialog#dialog.dh-dialog.xwide .dh-svg { max-height: 340px; }
  dialog#dialog.dh-dialog.xwide .dh-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}
/* the day's sheet drawn out of sight for its PDF (day-report.js dayPdfFrom) */
.dr-offscreen { position: fixed; top: 0; left: -10000px; width: 794px; pointer-events: none; }

/* the logo's menu on a short phone (an iPhone SE): each place on one row, its drawing beside its name,
   so all of them and the colour scheme stay clear of the bottom bar */
/* (and on any phone whose menu would reach under the bottom bar as drawn: nav.js am-tight, measured as it
   opens; the user's iPhone with the AI on, eight places and the shopping one's words on two lines) */
@media (max-width: 640px) and (max-height: 760px) {
  .app-menu-panel .am-grid { gap: 6px; padding: 8px 10px; }
  .app-menu-panel .am-item { flex-direction: row; align-items: center; gap: 9px; padding: 7px 10px; }
  .app-menu-panel .am-art { margin: 0; }
  .app-menu-panel .am-art svg { width: 30px; height: 30px; }
  .app-menu-panel .am-item b { font-size: 14.5px; }
  .app-menu-panel .am-item small { font-size: 11.5px; line-height: 1.25; }
}
@media (max-width: 640px) {
  .app-menu-panel.am-tight .am-grid { gap: 6px; padding: 8px 10px; }
  .app-menu-panel.am-tight .am-item { flex-direction: row; align-items: center; gap: 9px; padding: 7px 10px; }
  .app-menu-panel.am-tight .am-art { margin: 0; }
  .app-menu-panel.am-tight .am-art svg { width: 30px; height: 30px; }
  .app-menu-panel.am-tight .am-item b { font-size: 14.5px; }
  .app-menu-panel.am-tight .am-item small { font-size: 11.5px; line-height: 1.25; }
}

/* the picture window's actions (admin-pictures.js): one column of equal buttons, each with its drawing,
   the upload first and in colour, "no picture" last and in red; its save and close in the middle */
.ap-acts { display: grid; gap: 8px; width: 100%; max-width: 360px; justify-self: center; margin: 4px auto 0; }
.ap-act { position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; box-sizing: border-box; padding: 10px 16px;
  border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer; overflow: hidden; transition: border-color .15s, background .15s, transform .12s; }
.ap-act svg { flex: none; }
.ap-act:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.ap-act:active { transform: scale(.98); }
.ap-act:focus-visible, .ap-act:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.ap-act-main { color: var(--accent-text); background: var(--accent); border-color: transparent; }
.ap-act-main:hover { border-color: transparent; background: color-mix(in srgb, var(--accent) 88%, #fff); }
.ap-act-danger { color: #e5484d; background: color-mix(in srgb, #e5484d 8%, var(--surface-2)); border-color: color-mix(in srgb, #e5484d 30%, var(--border)); }
.ap-act-danger:hover { border-color: #e5484d; }
.ap-act.busy { opacity: .6; pointer-events: none; }
.ap-act .ap-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ap-dlg .actions { justify-content: center; }
.ap-dlg .actions .btn { min-width: 130px; }
.ap-acts .ap-pick { justify-self: stretch; display: flex; }

/* a manager's camera on the picture's other corner, the way back alone at the end (detail.js) */
.detail-pic-edit { position: absolute; z-index: 3; top: 10px; inset-inline-start: 10px; }
.detail-pic-edit .ap-edit.ap-round { margin: 0; background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* the goal's working out under its number (profile.js goalMathHtml): the day's energy use, what the pace
   takes off or adds, the goal; equal tiles in a row, a note when a limit held it */
.goal-math { margin: 16px auto 4px; max-width: 520px; display: grid; gap: 10px; }
.goal-math[hidden] { display: none; }
.gm-title { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
/* a sum, so it reads left to right (the energy used, what the pace takes off, the goal), its words in Hebrew */
.gm-eq { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 6px; direction: ltr; }
.gm-eq > * { direction: rtl; }
.gm-eq.two { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.gm-part { --gm: var(--accent); min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 11px 6px 12px; border-radius: 16px; text-align: center;
  background: color-mix(in srgb, var(--gm) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--gm) 28%, var(--border)); }
.gm-ico { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 2px; border-radius: 50%; color: var(--gm); background: color-mix(in srgb, var(--gm) 17%, transparent); }
.gm-part b { font-size: 20px; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--text); }
.gm-part > span:not(.gm-ico) { font-size: 12.5px; font-weight: 700; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; }
.gm-part small { font-size: 11.5px; line-height: 1.3; color: var(--muted); }
.gm-use { --gm: #f97316; }
.gm-down { --gm: #14b8a6; }
.gm-up { --gm: #8b5cf6; }
.gm-goal { --gm: var(--accent); border-width: 2px; }
.gm-goal b { color: var(--accent); }
/* the goal's tile comes alive for five seconds each time it is drawn (the page opened, a number changed):
   its frame glows out in three breaths, its target beating with them, a light sweeping across it twice
   (right to left), the number settling in; then it rests. Only shadows, transforms and a background move */
.gm-goal { position: relative; overflow: hidden; isolation: isolate; animation: gm-glow 5s ease-out both; }
.gm-goal::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, var(--gm) 30%, transparent) 50%, transparent 62%) no-repeat;
  background-size: 250% 100%; background-position: -10% 0; animation: gm-sheen 5s ease-in-out both; }
.gm-goal .gm-ico { animation: gm-beat 5s ease-in-out both; }
.gm-goal b { animation: gm-num 5s ease-out both; }
@keyframes gm-glow {
  0%, 32%, 64% { border-color: var(--gm); box-shadow: 0 0 0 0 color-mix(in srgb, var(--gm) 55%, transparent), 0 0 22px color-mix(in srgb, var(--gm) 32%, transparent); }
  31.99%, 63.99% { box-shadow: 0 0 0 9px transparent, 0 0 22px color-mix(in srgb, var(--gm) 18%, transparent); }
  92% { border-color: var(--gm); box-shadow: 0 0 0 9px transparent, 0 0 0 transparent; }
  100% { box-shadow: 0 0 0 0 transparent, 0 0 0 transparent; }
}
@keyframes gm-sheen { 0%, 4% { background-position: -10% 0; } 34%, 50% { background-position: 110% 0; } 50.01%, 54% { background-position: -10% 0; } 84%, 100% { background-position: 110% 0; } }
@keyframes gm-beat {
  0%, 32%, 64%, 96%, 100% { transform: scale(1); }
  8%, 40%, 72% { transform: scale(1.18); box-shadow: 0 0 0 5px color-mix(in srgb, var(--gm) 16%, transparent); }
}
@keyframes gm-num { 0% { transform: scale(.82); opacity: 0; text-shadow: 0 0 14px color-mix(in srgb, var(--gm) 45%, transparent); } 10% { transform: scale(1.08); opacity: 1; }
  18% { transform: scale(1); } 60% { transform: scale(1); text-shadow: 0 0 14px color-mix(in srgb, var(--gm) 45%, transparent); } 100% { transform: scale(1); text-shadow: 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .gm-goal, .gm-goal::after, .gm-goal .gm-ico, .gm-goal b { animation: none; } }
html[data-a11y~="motion"] .gm-goal, html[data-a11y~="motion"] .gm-goal::after, html[data-a11y~="motion"] .gm-goal .gm-ico, html[data-a11y~="motion"] .gm-goal b { animation: none; }
.gm-op { align-self: center; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 16px; font-weight: 800; line-height: 1;
  color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); }
.gm-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5;
  background: color-mix(in srgb, #14b8a6 10%, var(--surface)); border: 1px solid color-mix(in srgb, #14b8a6 25%, transparent); }
.gm-note svg { flex: none; margin-top: 2px; color: #0d9488; }
.gm-note.warn { background: color-mix(in srgb, #f59e0b 12%, var(--surface)); border-color: color-mix(in srgb, #f59e0b 35%, transparent); }
.gm-note.warn svg { color: #d97706; }
@media (max-width: 380px) { .gm-part b { font-size: 17px; } .gm-eq { gap: 4px; } .gm-op { width: 20px; height: 20px; font-size: 14px; } }
/* a pace the limits hold (the deficit's quarter, the safe floor) */
.rate-held { display: inline-flex; align-items: center; justify-content: center; gap: 4px; margin-top: 3px; font-style: normal; font-size: 11.5px; font-weight: 700; color: #0d9488; }
.rate-btn.on .rate-held { color: inherit; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rate-held, :root:not([data-theme="light"]) .gm-note:not(.warn) svg { color: #5eead4; } }
:root[data-theme="dark"] .rate-held, :root[data-theme="dark"] .gm-note:not(.warn) svg { color: #5eead4; }
/* the rings' window: a little tighter than the others, so three rings open whole (≤600px) */
.wa-win .ji-card { gap: 6px; padding: 18px 18px 16px; }
.wa-win .wa-big { width: 94px; height: 94px; margin-top: 0; }
.wa-win h2 { font-size: 19px; }
.wa-win .ji-ok { min-height: 44px; margin-top: 4px; }
/* ---------- the reports' diet quality meter, first on the page (reports.js qualityMeter) ---------- */
.qm-panel { display: grid; gap: 18px; padding: 18px 18px 16px; border-radius: 24px;
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--qc) 16%, transparent), transparent 60%), var(--surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qc) 28%, var(--border)); }
.qm-head { display: flex; align-items: center; gap: 12px; }
.qm-art { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: color-mix(in srgb, var(--qc) 15%, transparent); }
.qm-title { flex: 1; min-width: 0; display: grid; gap: 2px; }
.qm-title > b { font-size: 17px; font-weight: 800; }
.qm-title small { font-size: 13px; color: var(--muted); }
.qm-score { flex: none; display: grid; justify-items: center; line-height: 1; gap: 4px; }
.qm-score b { font-size: 38px; font-weight: 900; letter-spacing: -1px; color: var(--qc); font-variant-numeric: tabular-nums; text-shadow: 0 4px 18px color-mix(in srgb, var(--qc) 35%, transparent); }
.qm-score span { padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: color-mix(in srgb, var(--qc) 70%, var(--text)); background: color-mix(in srgb, var(--qc) 16%, transparent); }
/* the meter: four zones of the score in its colours (worth improving to 50, fair to 70, good to 85,
   excellent), the pin at the score with its number over it; right to left as Hebrew reads */
.qm-meter { position: relative; padding: 6px 4px 0; }
.qm-track { display: flex; gap: 3px; height: 14px; }
.qm-track i { border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.qm-track .t-r { flex: 50; background: linear-gradient(90deg, #f87171, #ef4444); border-start-start-radius: 8px; border-end-start-radius: 8px; }
.qm-track .t-a { flex: 20; background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.qm-track .t-l { flex: 15; background: linear-gradient(90deg, #a3e635, #84cc16); }
.qm-track .t-g { flex: 15; background: linear-gradient(90deg, #4ade80, #22c55e); border-start-end-radius: 8px; border-end-end-radius: 8px; }
.qm-pin { position: absolute; top: 6px; inset-inline-start: calc(4px + (100% - 8px) * var(--n)); width: 0; height: 14px; }
.qm-pin::before { content: ""; position: absolute; top: 50%; left: 0; width: 22px; height: 22px; border-radius: 50%; transform: translate(-50%, -50%);
  background: #fff; box-shadow: 0 0 0 5px var(--qc), 0 6px 16px rgba(0, 0, 0, .35); }
.qm-ticks { position: relative; height: 16px; margin-top: 8px; }
.qm-ticks span { position: absolute; inset-inline-start: calc(100% * var(--n)); transform: translateX(50%); font-size: 11px; color: var(--muted); white-space: nowrap; }
.qm-ticks span.on { font-weight: 800; color: color-mix(in srgb, var(--qc) 75%, var(--text)); }
/* each day of the period as a dot in its own quality's colour (a day with no food, hollow) */
.qm-days { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding-top: 2px; }
.qm-days i { width: 12px; height: 12px; border-radius: 50%; background: var(--dc); box-shadow: 0 0 8px color-mix(in srgb, var(--dc) 45%, transparent); }
.qm-days.many { flex-wrap: nowrap; justify-content: space-between; gap: 2px; }
.qm-days.many i { width: 8px; height: 8px; box-shadow: none; }
.qm-days i.none { background: none; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--muted) 45%, transparent); }
@media (prefers-reduced-motion: no-preference) { .qm-pin { animation: qm-in .9s cubic-bezier(.22, 1, .36, 1) both; } }
@keyframes qm-in { from { opacity: 0; transform: translateY(-6px); } }
/* settings: today's AI requests left (settings.js aiQuotaRow): a ring with the number in it, dots of the day's quota */
.aiq-row { flex-direction: column; align-items: stretch; gap: 12px; }
.aiq-top { display: flex; align-items: center; gap: 14px; }
.aiq-ring { position: relative; flex: none; display: grid; place-items: center; width: 56px; height: 56px; color: var(--text); }
.aiq-ring svg { position: absolute; inset: 0; }
.aiq-ring b { position: relative; font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; background: linear-gradient(135deg, #a78bfa, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; }
.aiq-ring b.inf { font-size: 26px; }
.aiq-row.none .aiq-ring b { background: none; color: #ef4444; }
.aiq-t { flex: 1; min-width: 0; display: grid; gap: 3px; }
.aiq-t b { font-size: 16px; font-weight: 800; }
.aiq-t small { font-size: 13.5px; color: var(--muted); }
.aiq-dots { display: flex; gap: 5px; }
.aiq-dots i { flex: 1; max-width: 48px; height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--text) 12%, transparent); }
.aiq-dots i.on { background: linear-gradient(90deg, #a78bfa, #ec4899); }
.aiq-row.none .aiq-dots i { background: color-mix(in srgb, #ef4444 22%, transparent); }
.aiq-when { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--muted); }
.aiq-more { width: 100%; min-height: 44px; border-radius: 14px; font-weight: 700; color: #a78bfa; background: color-mix(in srgb, #a78bfa 12%, transparent); border: 1px solid color-mix(in srgb, #a78bfa 30%, transparent); }
/* a product's ingredients translated by the word list (ingredients-he.js): the Hebrew; the label as
   written with each known part's Hebrew in brackets behind a small quiet button */
.ing-text { margin: 0; line-height: 1.75; }
.ing-text[data-ing="src"] { text-align: left; }
.ing-he { color: color-mix(in srgb, var(--accent) 78%, var(--text)); font-size: .92em; white-space: nowrap; }
.ing-en { color: var(--muted); }
.ing-note { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.ing-toggle { margin-inline-start: auto; padding: 3px 10px; border: 1px solid color-mix(in srgb, var(--muted) 30%, transparent); border-radius: 999px;
  font: inherit; font-size: 12px; color: var(--muted); background: none; cursor: pointer; }
.ing-toggle:hover { color: var(--text); }
.ing-toggle[aria-pressed="true"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
/* the activity page's panel and the diary's swiped sideways to the next look (swipe-looks.js): up and down stays the page's */
.ah-main .ah-body, #heroMain .hero-body { touch-action: pan-y; }
/* ready for a workout (sport-page.js trainingReady), at the head of "אוכל סביב האימון": a level of three
   (low, fair, high) from the watch's signals with their lights, the recommended hour, advice, a note */
.tr-card { display: grid; gap: 12px; margin: 4px 0 14px; padding: 14px; border-radius: 20px;
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--tc) 14%, transparent), transparent 60%), color-mix(in srgb, var(--text) 4%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 25%, var(--border)); }
.tr-top { display: flex; align-items: center; gap: 14px; }
.tr-words { display: grid; gap: 3px; min-width: 0; }
.tr-words small { font-size: 12.5px; color: var(--muted); }
.tr-words b { font-size: 16.5px; font-weight: 800; color: color-mix(in srgb, var(--tc) 70%, var(--text)); }
.tr-best { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, #0ea5e9 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #0ea5e9 24%, transparent); }
.tr-clock { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #0ea5e9; background: color-mix(in srgb, #0ea5e9 16%, transparent); }
.tr-best-t { display: grid; gap: 1px; min-width: 0; }
.tr-best-t small { font-size: 12px; color: var(--muted); }
.tr-best-t b { font-size: 18px; font-weight: 900; color: color-mix(in srgb, #0ea5e9 70%, var(--text)); }
.tr-best-t em { font-style: normal; font-size: 12.5px; color: color-mix(in srgb, var(--text) 75%, var(--muted)); }
.tr-levels { flex: none; display: flex; align-items: flex-end; gap: 4px; height: 40px; }
.tr-levels i { width: 14px; border-radius: 5px; background: color-mix(in srgb, var(--text) 12%, transparent); }
.tr-levels i.low { height: 40%; } .tr-levels i.mid { height: 70%; } .tr-levels i.high { height: 100%; }
/* the level as a signal's bars: those up to it in its colour, the ones above it faint (they were left
   transparent, so the low level's bar stood alone with an empty space beside it) */
.tr-levels:has(i.low.on) i.low, .tr-levels:has(i.mid.on) :is(i.low, i.mid), .tr-levels:has(i.high.on) i { background: var(--tc); }
.tr-tips { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tr-tips li { position: relative; padding-inline-start: 16px; font-size: 13px; line-height: 1.5; color: color-mix(in srgb, var(--text) 82%, var(--muted)); }
.tr-tips li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: #0ea5e9; }
.tr-hint { margin: 0; font-size: 12.5px; color: var(--muted); }
.tr-note { margin: 0; font-size: 11px; color: var(--muted); opacity: .8; }
.tr-card.plain { background: color-mix(in srgb, var(--text) 4%, transparent); box-shadow: inset 0 0 0 1px var(--border); }
/* the level's drawing (sport-page.js readyArt): at the card's other side beside the level and its signals,
   where no words are; a narrow card (a phone) leaves it out (measured on its wrapper: a box can't ask its
   own width) */
.tr-wrap { container-type: inline-size; }
.tr-art { display: none; }
@container (min-width: 560px) {
  .tr-card:has(.tr-art) { grid-template-columns: minmax(0, 1fr) auto; }
  .tr-card:has(.tr-art) > * { grid-column: 1 / -1; }
  .tr-card > .tr-top, .tr-card > .tr-parts { grid-column: 1; }
  .tr-card > .tr-art { display: block; grid-column: 2; grid-row: 1 / span 2; align-self: center; width: clamp(150px, 26cqi, 210px); margin: -6px 4px -10px 8px; }
  .tr-art svg { display: block; width: 100%; height: auto; overflow: visible; animation: tr-bob 3.6s ease-in-out infinite; }
}
@keyframes tr-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .tr-art svg { animation: none; } }
html[data-a11y~="motion"] .tr-art svg { animation: none; }
.tr-parts { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.tr-parts li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.45; }
.tr-parts li > i { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--lc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lc) 22%, transparent); }
.tr-parts li.ok { --lc: #22c55e; } .tr-parts li.mid { --lc: #f59e0b; } .tr-parts li.low { --lc: #ef4444; }
/* (a title in English, "HRV", kept apart from the number after it: it ran into it, "HRV30") */
.tr-parts li b { margin-inline-end: 6px; unicode-bidi: isolate; }
/* "לאימון הבא": a heading of its own over the three steps, an icon, the words, a line fading away */
.fuel-head { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; }
.fh-ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: color-mix(in srgb, #0ea5e9 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #0ea5e9 22%, transparent); }
.fh-t { display: grid; gap: 1px; }
.fh-t b { font-size: 16.5px; font-weight: 800; }
.fh-t small { font-size: 12.5px; color: var(--muted); }
.fh-line { flex: 1; height: 2px; min-width: 24px; border-radius: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, #0ea5e9 45%, transparent)); }

/* ---------- last, over the rules above: a narrow screen and larger text ---------- */
/* a narrow screen as well (a small phone, or the iPhone's Display Zoom: 320 px), at the usual text size:
   the lines that would be cut break to a second line (two at most), the switches wrap, the levels one to a
   row, the picture button's words in two lines */
.fh-facts span { white-space: normal; text-overflow: clip; border-radius: 12px; }
.fh-items span { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.set-sec-text small { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.segmented { flex-wrap: wrap; max-width: 100%; }
.ocr-box .btn { white-space: normal; text-align: center; }
/* the report's foods that gave a nutrient most: a long name in two lines, not cut */
.nm-top-foods li > span { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
/* the quality meter as wide as its panel (its column took the width of what is widest in it, and the
   score stood out of the panel on a narrow screen), its title shrinking to its room */
.qm-panel { grid-template-columns: minmax(0, 1fr); }
.qm-title { grid-template-columns: minmax(0, 1fr); }
.qm-title > * { min-width: 0; overflow-wrap: anywhere; }
/* (much larger text: a search's words in the history in full) */
html[data-text-large] .fh-q b { white-space: normal; }
/* (a search in the history: its count and hour give way first, in two lines, before its words are cut) */
.fh-q { flex: none; max-width: 65%; }
.fh-meta { flex: 0 1 auto; min-width: 0; text-align: end; }
@media (max-width: 360px) {
  .gl-levels { grid-template-columns: minmax(0, 1fr); }
  .bp-slots { grid-template-columns: minmax(0, 1fr); }
  .qm-head { gap: 8px; }
  .qm-art { width: 44px; height: 44px; border-radius: 14px; }
  .qm-score b { font-size: 32px; }
}

/* ---------- the night's chart (sleep-chart.js): its score, the stages through the night, the heart ---------- */
.sl-night > .sc { grid-column: 1 / -1; }
.sc { --lanes: 48px; --lane: 34px; margin-top: 14px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, #7b6cf0 22%, var(--border)); }
.sc-head { display: flex; align-items: center; gap: 12px; }
.sc-art { flex: none; }
.sc-art svg { display: block; width: 58px; height: 44px; overflow: visible; }
.sc-moon { animation: sc-float 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.sc-glow { animation: sc-glow 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.sc-tw { animation: sc-tw 2.6s calc(var(--i) * .7s) ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sc-float { 50% { transform: translateY(-2px) rotate(-4deg); } }
@keyframes sc-glow { 50% { opacity: .32; transform: scale(1.08); } }
@keyframes sc-tw { 0%, 100% { opacity: .3; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.1); } }
.sc-title { flex: 1; min-width: 0; }
.sc-title b { display: block; font-size: 15px; font-weight: 800; }
.sc-title small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
/* the score: a ring in its verdict's colour, its number and word in the middle */
.sc-score { position: relative; flex: none; width: 96px; height: 96px; }
.sc-score svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sc-score-track { fill: none; stroke: color-mix(in srgb, currentColor 12%, transparent); stroke-width: 6; }
.sc-score-arc { fill: none; stroke: var(--sc); stroke-width: 6; stroke-linecap: round; stroke-dasharray: var(--len) var(--all);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--sc) 55%, transparent)); animation: sc-ring 1.1s .2s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes sc-ring { from { stroke-dasharray: 0 var(--all); } }
.sc-score-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.sc-score-c b { font-size: 27px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sc-score-c small { margin-top: 5px; font-size: 11.5px; font-weight: 700; color: var(--sc); }
/* the last week's nights */
.sc-days { display: flex; gap: 6px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.sc-days::-webkit-scrollbar { display: none; }
.sc-day { flex: none; padding: 6px 12px; border: 1px solid color-mix(in srgb, currentColor 14%, transparent); border-radius: 999px; background: transparent;
  color: inherit; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.sc-day[aria-selected="true"] { border-color: transparent; color: #fff; background: linear-gradient(135deg, #7b6cf0, #4f8cf7); }
.sc-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* the score's four parts, each its bar */
.sc-parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.sc-parts li { display: grid; gap: 3px; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, currentColor 5%, transparent); }
.sc-parts span { font-size: 11.5px; color: var(--muted); }
.sc-parts b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sc-parts b small { font-size: 11px; font-weight: 500; color: var(--muted); }
.sc-parts i { height: 4px; border-radius: 999px; background: linear-gradient(to left, var(--c) var(--p), color-mix(in srgb, currentColor 10%, transparent) var(--p)); }
.sc-why { margin: 10px 0 0; font-size: 13px; line-height: 1.5; }
/* the chart: a band for its marks and its card above the lanes, the lanes' names on the right */
.sc-plot { position: relative; margin-top: 8px; border-radius: 14px; outline: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.sc-plot:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.sc-band { position: relative; height: 50px; margin-inline-start: var(--lanes); }
.sc-pin { position: absolute; bottom: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  white-space: nowrap; background: color-mix(in srgb, currentColor 7%, transparent); transition: opacity .2s; }
.sc-pin svg { width: 13px; height: 13px; }
.sc-pin-sleep { right: var(--r); }
.sc-pin-wake { left: calc(100% - var(--r)); }
.sc-band:has(.sc-tip:not([hidden])) .sc-pin { opacity: 0; }
.sc-tip { position: absolute; top: 0; z-index: 3; display: grid; gap: 2px; padding: 5px 11px; border-radius: 12px; font-size: 12px; line-height: 1.35; white-space: nowrap;
  color: var(--text); background: var(--surface); box-shadow: 0 6px 18px rgba(0, 0, 0, .22), 0 0 0 1px color-mix(in srgb, currentColor 10%, transparent); pointer-events: none; }
.sc-tip-l { display: flex; align-items: center; gap: 6px; }
.sc-tip b { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.sc-tip b > i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
.sc-tip-at { margin-inline-start: 6px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.sc-tip-hr { display: inline-flex; align-items: center; gap: 4px; }
.sc-tip-hr svg { width: 12px; height: 12px; }
.sc-tip em { font-style: normal; font-weight: 800; color: var(--c); }
.sc-body { display: flex; gap: 6px; }
.sc-lanes { flex: none; width: 42px; display: grid; grid-template-rows: repeat(4, var(--lane)); font-size: 11px; color: var(--muted); }
.sc-lanes span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.sc-lanes span::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.sc-area { position: relative; flex: 1; height: calc(var(--lane) * 4); border-radius: 10px; overflow: hidden;
  background: linear-gradient(to bottom, color-mix(in srgb, #f5a524 7%, transparent) 0 25%, color-mix(in srgb, #5ec5e8 7%, transparent) 25% 50%,
    color-mix(in srgb, #5b8def 7%, transparent) 50% 75%, color-mix(in srgb, #5b4bd5 10%, transparent) 75%); }
.sc-grid { position: absolute; top: 0; bottom: 0; right: var(--r); width: 1px; background: color-mix(in srgb, currentColor 9%, transparent); }
.sc-seg { position: absolute; right: var(--r); width: var(--w); top: calc(var(--lane) * var(--ln) + 7px); height: calc(var(--lane) - 14px); border-radius: 6px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c) 82%, #fff), var(--c)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 70%, #000);
  transform-origin: right center; animation: sc-in .55s calc(var(--d) * .9s) cubic-bezier(.22, 1, .36, 1) both; }
.sc-seg.st-b { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 30%, transparent) 0 4px, transparent 4px 8px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); }
.sc-seg.sc-on { z-index: 2; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--c), 0 0 14px var(--c); }
.sc-step { position: absolute; right: var(--r); width: 2px; margin-right: -1px; top: calc(var(--lane) * var(--top) + var(--lane) / 2); height: calc(var(--lane) * var(--rows));
  border-radius: 2px; background: color-mix(in srgb, currentColor 22%, transparent); animation: sc-fade .4s calc(var(--d) * .9s + .25s) both; }
.sc-guide, .sc-hr-guide { position: absolute; top: 0; bottom: 0; right: var(--r); z-index: 3; width: 2px; margin-right: -1px; border-radius: 2px; background: currentColor; opacity: .5; pointer-events: none; }
.sc-axis { position: relative; height: 20px; margin-inline-start: var(--lanes); font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sc-axis span { position: absolute; top: 4px; right: var(--r); transform: translateX(50%); }
.sc-quality { margin-top: 8px; }
.sc-quality small { display: block; margin-inline-start: var(--lanes); margin-bottom: 4px; font-size: 11.5px; color: var(--muted); }
.sc-q-strip { position: relative; height: 8px; margin-inline-start: var(--lanes); border-radius: 999px; overflow: hidden; background: color-mix(in srgb, currentColor 6%, transparent); }
.sc-q-strip i { position: absolute; top: 0; bottom: 0; right: var(--r); width: var(--w); background: var(--c); opacity: .85; animation: sc-fade .6s .7s both; }
.sc-q-key { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin: 5px 0 0; margin-inline-start: var(--lanes); font-size: 11px; color: var(--muted); }
.sc-q-key i { width: 8px; height: 8px; margin-inline-start: 8px; border-radius: 50%; background: var(--c); }
.sc-q-key i:first-child { margin-inline-start: 0; }
/* the heart: each stretch a bar from its lowest beat to its highest, the night's highest and lowest named */
.sc-hr { margin-top: 14px; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, currentColor 14%, transparent); }
.sc-hr-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; }
.sc-hr-head svg { width: 15px; height: 15px; }
.sc-hr-head > b { font-weight: 800; color: #f43f5e; }
.sc-hr-head span { color: var(--muted); }
.sc-hr-head span b { color: var(--text); font-variant-numeric: tabular-nums; }
.sc-hr-body { display: flex; gap: 6px; margin-top: 8px; }
.sc-hr-scale { flex: none; width: 42px; display: flex; flex-direction: column; justify-content: space-between; padding: 14px 0; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sc-hr-area { position: relative; flex: 1; height: 110px; margin: 0 4px; }
.sc-hb { position: absolute; right: var(--r); bottom: calc(22px + (100% - 44px) * var(--b) / 100); width: 8px; height: max(8px, calc((100% - 44px) * var(--h) / 100)); margin-right: -4px;
  border-radius: 999px; background: linear-gradient(to top, #fb7185, #e11d48); box-shadow: 0 2px 8px rgba(225, 29, 72, .28);
  transform-origin: bottom center; animation: sc-rise .6s calc(var(--d) * .8s + .3s) cubic-bezier(.22, 1, .36, 1) both; }
.sc-hb.sc-on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px #f43f5e, 0 0 12px #f43f5e; }
.sc-hb-tag { position: absolute; right: var(--r); transform: translateX(50%); display: grid; justify-items: center; font-size: 13px; font-weight: 800; line-height: 1.05; color: #f43f5e;
  font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; animation: sc-fade .5s 1.1s both; }
.sc-hb-tag small { font-size: 9.5px; font-weight: 700; letter-spacing: .02em; opacity: .8; }
.sc-hb-tag.sc-tag-max { bottom: calc(22px + (100% - 44px) * var(--b) / 100 + 4px); }
.sc-hb-tag.sc-tag-min { top: calc(100% - 22px - (100% - 44px) * var(--b) / 100 + 4px); }
@keyframes sc-in { from { opacity: 0; transform: scaleX(.25); } }
@keyframes sc-rise { from { opacity: 0; transform: scaleY(.2); } }
@keyframes sc-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sc *, .sc *::before { animation: none !important; } }
@media (max-width: 380px) { .sc { --lanes: 44px; } .sc-lanes, .sc-hr-scale { width: 38px; } .sc-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
html[data-text-large] .sc-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* light mode: the chart flat, no glow and no shadow (the picked moment keeps its ring) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .sc-score-arc { filter: none; }
  :root:not([data-theme="dark"]) .sc-glow { display: none; }
  :root:not([data-theme="dark"]) .sc-tip { box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent); }
  :root:not([data-theme="dark"]) :is(.sc-tip b > i, .sc-hb) { box-shadow: none; }
  :root:not([data-theme="dark"]) .sc-seg.sc-on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--c); }
  :root:not([data-theme="dark"]) .sc-hb.sc-on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px #f43f5e; }
}
:root[data-theme="light"] .sc-score-arc { filter: none; }
:root[data-theme="light"] .sc-glow { display: none; }
:root[data-theme="light"] .sc-tip { box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent); }
:root[data-theme="light"] :is(.sc-tip b > i, .sc-hb) { box-shadow: none; }
:root[data-theme="light"] .sc-seg.sc-on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--c); }
:root[data-theme="light"] .sc-hb.sc-on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px #f43f5e; }
/* move, exercise and stand: three ways of Biskal's own, never rings (Apple keeps those to its Activity
   rings; watch.js trioHero): columns lit from the bottom, rows lit from the right, vials filling */
.trio { display: grid; justify-items: center; gap: 12px; width: 100%; }
.trio-head { display: grid; justify-items: center; line-height: 1.1; text-align: center; }
.trio-head b { font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; }
.trio-head span { font-size: 12.5px; opacity: .8; }
.trio-l { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; opacity: .92; white-space: nowrap; }
.trio-l svg { flex: none; }
.trio em { font-style: normal; font-weight: 800; font-size: 14px; color: var(--c2); font-variant-numeric: tabular-nums; }
/* what is not lit yet: solid, so nothing of the panel's drawings shows through (its colour on the panel's own) */
.trio, .trio-mini, .trio-pill { --t-ground: var(--surface); --trio-base: var(--t-ground); --trio-tint: 18%; }
:is(.hx-hero, .dash-hero) :is(.trio, .trio-mini, .trio-pill) { --t-ground: #2a3d62; --trio-base: var(--t-ground); --trio-tint: 14%; }
/* (on a panel: its own colour darkened, so the bars sit in its shade in every skin, light or dark,
   not one navy on a pink or green panel) */
:is(.hx-hero, .dash-hero) :is(.trio, .trio-mini, .trio-pill)[data-tc] { --t-ground: color-mix(in srgb, #000 32%, var(--brand)); --trio-base: var(--t-ground); }
/* (dark mode's own colour is lighter, its panel darker: darkened more there) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.hx-hero, .dash-hero) :is(.trio, .trio-mini, .trio-pill)[data-tc] { --t-ground: color-mix(in srgb, #000 64%, var(--brand)); } }
:root[data-theme="dark"] :is(.hx-hero, .dash-hero) :is(.trio, .trio-mini, .trio-pill)[data-tc] { --t-ground: color-mix(in srgb, #000 64%, var(--brand)); }
/* (its track the panel's colour darkened, no darker: solid, so its drawings don't show, yet not black;
   the unlit parts lighter than it, or darker in high contrast) */
:is(.hx-hero, .dash-hero) .trio[data-tc] { --t-track: var(--t-ground) !important; }
/* the colours picked for what is not lit (watch.js trioColors, the looks' menus): the measure's own
   shade, light grey with the lit ones glowing, or high contrast; first on a light ground (a card in
   light mode), then on a dark one (the heroes always, all else in dark mode). A dark track behind the
   rows and the columns hides the panel's drawings between the parts too */
:is(.trio, .trio-mini, .trio-pill)[data-tc] { --t-track: color-mix(in srgb, #000 7%, var(--t-ground)); --t-edge: rgba(0, 0, 0, .1); }
:is(.trio, .trio-mini, .trio-pill)[data-tc="tint"] { --trio-tint: 26%; }
:is(.trio, .trio-mini, .trio-pill)[data-tc="glow"] { --trio-tint: 0%; --trio-base: color-mix(in srgb, #000 12%, var(--t-ground)); }
:is(.trio, .trio-mini, .trio-pill)[data-tc="sharp"] { --trio-tint: 0%; --trio-base: color-mix(in srgb, #000 4%, var(--t-ground)); }
:is(.hx-hero, .dash-hero) :is(.trio, .trio-mini, .trio-pill)[data-tc] { --t-track: color-mix(in srgb, #000 28%, var(--t-ground)); --t-edge: rgba(255, 255, 255, .07); }
:is(.hx-hero, .dash-hero) :is(.trio, .trio-mini, .trio-pill)[data-tc="tint"] { --trio-tint: 34%; }
:is(.hx-hero, .dash-hero) :is(.trio, .trio-mini, .trio-pill)[data-tc="glow"] { --trio-base: color-mix(in srgb, #fff 16%, var(--t-ground)); }
:is(.hx-hero, .dash-hero) :is(.trio, .trio-mini, .trio-pill)[data-tc="sharp"] { --trio-base: color-mix(in srgb, #000 48%, var(--t-ground)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.trio, .trio-mini, .trio-pill)[data-tc] { --t-track: color-mix(in srgb, #000 28%, var(--t-ground)); --t-edge: rgba(255, 255, 255, .07); }
  :root:not([data-theme="light"]) :is(.trio, .trio-mini, .trio-pill)[data-tc="tint"] { --trio-tint: 34%; }
  :root:not([data-theme="light"]) :is(.trio, .trio-mini, .trio-pill)[data-tc="glow"] { --trio-base: color-mix(in srgb, #fff 16%, var(--t-ground)); }
  :root:not([data-theme="light"]) :is(.trio, .trio-mini, .trio-pill)[data-tc="sharp"] { --trio-base: color-mix(in srgb, #000 48%, var(--t-ground)); }
}
:root[data-theme="dark"] :is(.trio, .trio-mini, .trio-pill)[data-tc] { --t-track: color-mix(in srgb, #000 28%, var(--t-ground)); --t-edge: rgba(255, 255, 255, .07); }
:root[data-theme="dark"] :is(.trio, .trio-mini, .trio-pill)[data-tc="tint"] { --trio-tint: 34%; }
:root[data-theme="dark"] :is(.trio, .trio-mini, .trio-pill)[data-tc="glow"] { --trio-base: color-mix(in srgb, #fff 16%, var(--t-ground)); }
:root[data-theme="dark"] :is(.trio, .trio-mini, .trio-pill)[data-tc="sharp"] { --trio-base: color-mix(in srgb, #000 48%, var(--t-ground)); }
.trio[data-tc]:not([data-tc="clear"]) .trio-cells { background: var(--t-track); box-shadow: 0 0 0 3px var(--t-track); border-radius: 6px; }
/* see-through, as they were before the pick (the user asked to keep it): the measure's shade over
   nothing, the panel's drawings showing through */
:is(.trio, .trio-mini, .trio-pill)[data-tc="clear"] { --trio-base: transparent; --trio-tint: 20%; }
:is(.hx-hero, .dash-hero) :is(.trio, .trio-mini, .trio-pill)[data-tc="clear"] { --trio-base: transparent; --trio-tint: 24%; }
.trio[data-tc="glow"] .trio-cells i.on { box-shadow: 0 0 7px -1px var(--k), inset 0 1px 0 rgba(255, 255, 255, .35); }
.trio[data-tc="sharp"] .trio-cells i:not(.on) { box-shadow: inset 0 0 0 1px var(--t-edge); }
.trio[data-tc="sharp"] .trio-cells i.on { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); filter: saturate(1.15) brightness(1.08); }
/* the colours' row in the looks' menus: three swatches side by side */
.hs-tc { display: grid; gap: 4px; padding: 6px 4px 0; border-top: 1px solid var(--border); margin-top: 4px; }
.hs-tc .hs-group { padding-block: 0; }
.hs-tc-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.hs-tc-row button { display: grid; justify-items: center; gap: 4px; padding: 6px 4px; border: 0; border-radius: 12px; background: var(--surface-2); color: inherit; font: inherit; cursor: pointer; }
.hs-tc-row button[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--accent); }
.hs-tc-row button b { font-size: 12px; font-weight: 700; text-align: center; line-height: 1.2; }
.hs-tc-row .trio-mini { width: 100%; max-width: 70px; }
.trio-cells i { background: color-mix(in srgb, var(--c2) var(--trio-tint), var(--trio-base)); }
.trio-cells i.on { background: var(--k); }
.trio-cols { display: flex; justify-content: center; gap: 28px; }
.trio-col { display: grid; justify-items: center; gap: 6px; }
.trio-col .trio-cells { display: flex; flex-direction: column-reverse; gap: 3px; width: 44px; height: var(--h); animation: trio-fade .4s ease-out both; }
.trio-col .trio-cells i { flex: 1; border-radius: 4px; }
.trio-rows { display: grid; gap: 13px; width: min(100%, 340px); }
.trio-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 46px; align-items: center; gap: 10px; }
.trio-row .trio-cells { display: flex; gap: 3px; height: 18px; animation: trio-fade .4s ease-out both; }
.trio-row .trio-cells i { flex: 1; border-radius: 4px; }
.trio-row em { text-align: end; }
.trio-vials { display: flex; justify-content: center; gap: 24px; }
.trio-vial { display: grid; justify-items: center; gap: 6px; }
.trio-glass { position: relative; width: 54px; height: var(--h); border-radius: 27px; overflow: hidden;
  background: color-mix(in srgb, var(--c2) var(--trio-tint), var(--trio-base)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c2) 38%, transparent); }
/* the vials alive: the liquid rises to its level as they are drawn, one after another; then its surface
   waves on, sideways, a little up and down, and a few bubbles rise in it (transforms only, and paused
   out of sight: motion.js) */
.trio-liquid { position: absolute; inset-inline: 0; bottom: 0; height: var(--p); background: linear-gradient(to top, var(--c1), var(--c2));
  animation: trio-rise 1.1s cubic-bezier(.22, 1, .36, 1) both; }
.trio-vial:nth-child(2) .trio-liquid { animation-delay: .12s; }
.trio-vial:nth-child(3) .trio-liquid { animation-delay: .24s; }
@keyframes trio-rise { from { transform: translateY(100%); } }
.trio-liquid svg { position: absolute; left: 0; right: auto; top: -8px; width: 200%; height: 9px; fill: var(--c2); animation: trio-wave 3.2s linear infinite; }
.trio-vial:nth-child(2) .trio-liquid svg { animation-duration: 3.8s; animation-direction: reverse; }
.trio-vial:nth-child(3) .trio-liquid svg { animation-duration: 2.9s; }
@keyframes trio-wave { 0% { transform: translate(0, 0); } 50% { transform: translate(-25%, 1.5px); } 100% { transform: translate(-50%, 0); } }
/* (each bubble a column the liquid's height with its dot at the foot: moved up by its own height, the dot
   rises from the bottom to the surface, whatever the level) */
.trio-liquid::before, .trio-liquid::after { content: ""; position: absolute; top: 0; bottom: 0; width: 8px; pointer-events: none;
  background: radial-gradient(circle at 50% calc(100% - 5px), rgba(255, 255, 255, .55) 2.6px, transparent 3.2px); opacity: 0; animation: trio-bubble 3.6s ease-in infinite; }
.trio-liquid::before { inset-inline-start: 28%; animation-delay: 1.4s; }
.trio-liquid::after { inset-inline-start: 60%; animation-delay: 2.7s; background: radial-gradient(circle at 50% calc(100% - 5px), rgba(255, 255, 255, .5) 1.9px, transparent 2.5px); }
@keyframes trio-bubble { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 75% { opacity: .7; } 100% { transform: translateY(-85%); opacity: 0; } }
@keyframes trio-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .trio *, .trio-mini * { animation: none !important; } }
html[data-a11y~="motion"] :is(.trio, .trio-mini) * { animation: none !important; }
/* the small ones: a day of the week, the diary's card, a day's window */
.trio-mini { display: inline-flex; align-items: flex-end; justify-content: center; gap: 3px; height: var(--h); }
.trio-mini[data-trio="cols"] b { display: flex; flex-direction: column-reverse; gap: 2px; width: max(6px, calc(var(--h) * .17)); height: 100%; }
.trio-mini[data-trio="cols"] b i { flex: 1; border-radius: 2px; background: color-mix(in srgb, var(--c2) var(--trio-tint), var(--trio-base)); }
.trio-mini[data-trio="cols"] b i.on { background: var(--k); }
.trio-mini[data-trio="vials"] i { position: relative; width: max(8px, calc(var(--h) * .22)); height: 100%; border-radius: 99px; overflow: hidden;
  background: color-mix(in srgb, var(--c2) var(--trio-tint), var(--trio-base)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c2) 40%, transparent); }
.trio-mini[data-trio="vials"] i::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: var(--p); background: linear-gradient(to top, var(--c1), var(--c2)); }
.trio-mini[data-trio="segs"] { flex-direction: column; align-items: stretch; justify-content: center; gap: calc(var(--h) * .13); width: calc(var(--h) * .95); }
.trio-mini[data-trio="segs"] i { position: relative; height: max(5px, calc(var(--h) * .16)); border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--c2) var(--trio-tint), var(--trio-base)); }
.trio-mini[data-trio="segs"] i::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--p); border-radius: inherit; background: linear-gradient(to left, var(--c1), var(--c2)); }
/* one measure, an upright pill (the cards, the diary's rows) */
.trio-pill { position: relative; flex: none; display: inline-block; width: max(12px, calc(var(--h) * .3)); height: var(--h); border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--c2) var(--trio-tint), var(--trio-base)); }
.trio-pill::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: var(--p); border-radius: inherit; background: linear-gradient(to top, var(--c1), var(--c2)); }
/* where they sit: the activity panel, the diary's sport look (whole and in half), the reports, a day's window */
.ah-trio { flex: 0 1 auto; min-width: 240px; }
.ah-trio:has([data-trio="segs"]) { flex: 1 1 300px; max-width: 380px; }
/* the reports' health and activity on an iPad and a computer: the three larger, the segments' rows
   across most of the width (they stood 340 px wide in a section twice that) */
@media (min-width: 700px) {
  .hr-trio .trio-head b { font-size: 40px; }
  .hr-trio .trio-head span { font-size: 13.5px; }
  .hr-trio .trio em { font-size: 15px; }
  .hr-trio .trio-l { font-size: 14px; }
  .hr-trio { width: min(100%, 660px); } /* (centred in its column, it shrank to its words: the rows had no width to take) */
  .hr-main .hr-trio .trio-rows { width: 100%; gap: 16px; }
  .hr-trio .trio-row { grid-template-columns: auto minmax(0, 1fr) 52px; gap: 14px; }
  .hr-trio .trio-row .trio-cells { height: 22px; gap: 4px; }
  .hr-trio .trio-cols { --h: 160px !important; gap: 40px; }
  .hr-trio .trio-col .trio-cells { width: 54px; }
  .hr-trio .trio-vials { --h: 160px !important; gap: 36px; }
  .hr-trio .trio-glass { width: 62px; border-radius: 31px; }
}
/* the segments' look beside a taller list (the watch's stand hours make it four rows): its total at
   the top, as in the other looks (it sat lower, in the middle, and seemed to jump down as a swipe
   brought it), its rows spread down beside the list */
.ah-body.look-segs { align-items: stretch; }
.ah-body.look-segs > .ah-legend { align-self: center; }
.ah-body.look-segs > .ah-trio { display: flex; }
.ah-body.look-segs > .ah-trio > .trio { grid-template-rows: auto minmax(0, 1fr); }
.ah-body.look-segs .trio-rows { align-content: space-evenly; }
.sp-trio { display: block; min-width: 230px; color: #fff; text-decoration: none; }
.sp-trio .trio-rows { width: 280px; }
.sp-trio .trio-head .sp-pre { font-size: 12px; opacity: .75; }
.sp-trio .trio-head b { font-size: 34px; letter-spacing: -.5px; background: linear-gradient(180deg, #fff 30%, #ffc2d1); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hs-half .sp-trio.hs-mini { display: grid; place-items: center; min-width: 0; }
.hs-half .sp-trio .trio { gap: 6px; padding-bottom: 12px; }
.hs-half .sp-trio.hs-mini { height: auto; min-height: 142px; }
.hs-half .sp-trio .trio-head b { font-size: 24px; }
.hs-half .sp-trio .trio-head span { font-size: 11px; }
.hs-half .sp-trio .trio-cols { gap: 12px; }
.hs-half .sp-trio .trio-col { gap: 3px; }
.hs-half .sp-trio .trio-col .trio-cells { width: 26px; gap: 2px; }
.hs-half .sp-trio .trio-vials { gap: 10px; }
.hs-half .sp-trio .trio-glass { width: 30px; border-radius: 15px; }
.hs-half .sp-trio .trio em { font-size: 11px; }
.hs-half .sp-trio .trio-rows { width: 100%; gap: 9px; }
.hs-half .sp-trio .trio-row { grid-template-columns: minmax(0, 1fr) 34px; gap: 6px; }
.hs-half .sp-trio .trio-row .trio-cells { height: 12px; gap: 2px; }
/* the half as wide as it is (an iPad's, a computer's): the three larger, the day's calories on the right
   beside them, the segments' rows across what is left (it stood a phone's 142 px wide in a half four
   times that) */
.hs-half .sp-trio.hs-mini { width: 100%; container-type: inline-size; }
@container (min-width: 290px) {
  .hs-half .sp-trio .trio { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: center; column-gap: 26px; padding: 6px 10px 12px; }
  .hs-half .sp-trio .trio-head { padding-inline: 6px; }
  .hs-half .sp-trio .trio-head b { font-size: 40px; }
  .hs-half .sp-trio .trio-head span { font-size: 13px; }
  .hs-half .sp-trio .trio em { font-size: 13px; }
  .hs-half .sp-trio .trio-cols { --h: 118px !important; gap: 22px; }
  .hs-half .sp-trio .trio-col { gap: 5px; }
  .hs-half .sp-trio .trio-col .trio-cells { width: 42px; gap: 3px; }
  .hs-half .sp-trio .trio-vials { --h: 118px !important; gap: 20px; }
  .hs-half .sp-trio .trio-glass { width: 46px; border-radius: 23px; }
  .hs-half .sp-trio .trio-rows { justify-self: stretch; width: auto; gap: 16px; margin-inline-end: 22px; } /* (clear of the panel's "?" at its edge) */
  .hs-half .sp-trio .trio-row { grid-template-columns: minmax(0, 1fr) 44px; gap: 10px; }
  .hs-half .sp-trio .trio-row .trio-cells { height: 20px; gap: 3px; }
}
.sp-ring-row .trio-pill { width: 14px; }
.hr-trio { flex: none; min-width: 230px; }
.hr-trio .trio-rows { width: min(100%, 320px); }
.act-body .trio-mini { flex: none; margin-inline-end: 6px; }
/* the move card's three, fuller: thick columns close together, wide bars, round vials; on a phone's
   narrow card at its start (the right), over the numbers, thicker still (thin columns read as nothing) */
.move-tile .trio-mini[data-trio="cols"] { gap: 5px; }
.move-tile .trio-mini[data-trio="cols"] b { width: calc(var(--h) * .27); gap: 2px; }
.move-tile .trio-mini[data-trio="cols"] b i { border-radius: 3px; }
.move-tile .trio-mini[data-trio="segs"] { width: min(100%, 132px); }
.move-tile .trio-mini[data-trio="segs"] i { height: max(8px, calc(var(--h) * .18)); }
.move-tile .trio-mini[data-trio="vials"] { gap: 7px; }
.move-tile .trio-mini[data-trio="vials"] i { width: calc(var(--h) * .28); }
@container (max-width: 299px) {
  .move-tile .act-body { align-items: stretch; }
  .move-tile .act-body .trio-mini { align-self: flex-start; margin: 2px 0 4px; }
  .move-tile .trio-mini[data-trio="cols"] { gap: 6px; }
  .move-tile .trio-mini[data-trio="cols"] b { width: calc(var(--h) * .35); }
  .move-tile .trio-mini[data-trio="vials"] i { width: calc(var(--h) * .34); }
}
.wa-day .trio-mini { margin-block: 2px; }
/* the sleep chart's row: its nights' tabs and the switch of its colours (watch.js SLEEP_COLORS) */
.sc-bar { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.sc-bar .sc-days { flex: 1; min-width: 0; margin-top: 0; }
.sc-bar .hs-pick { position: static; margin-inline-start: auto; flex: none; }
.sc .hs-switch { width: 32px; height: 32px; border-color: color-mix(in srgb, currentColor 22%, transparent); background: transparent; color: inherit; -webkit-backdrop-filter: none; backdrop-filter: none; }
.sc .hs-switch:hover, .sc .hs-switch[aria-expanded="true"] { background: color-mix(in srgb, currentColor 10%, transparent); }
/* the sleep chart enlarged (sleep-chart.js openFull): over the whole screen, one bar on top with all it
   has (the nights, the zoom, the colours, closing); the hours zoom in, the lanes' names stay in place */
.sc-expand, .scf-close { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent); background: transparent; color: inherit; cursor: pointer; }
.sc-expand:hover, .scf-close:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.sc-expand:focus-visible, .scf-close:focus-visible, .scf-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sc-bar .sc-expand { margin-inline-start: 0; }
.sc-full { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0 0 env(safe-area-inset-bottom);
  border: 0; background: var(--surface); color: var(--text); overflow-y: auto; overscroll-behavior: contain; --lanes: 48px; --lane: 44px; }
.sc-full::backdrop { background: rgba(0, 0, 0, .5); }
.scf-bar { position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  padding: calc(env(safe-area-inset-top) + 10px) 14px 10px; background: var(--surface); border-bottom: 1px solid var(--border); }
.scf-title { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 800; }
.scf-title svg { width: 18px; height: 18px; }
.scf-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.scf-bar .sc-days { order: 3; flex: 1 1 100%; margin: 0; }
.scf-zoom { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: color-mix(in srgb, currentColor 6%, transparent); }
.scf-btn { min-width: 32px; height: 30px; padding: 0 9px; border: 0; border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer; }
.scf-btn:hover:not(:disabled) { background: color-mix(in srgb, currentColor 10%, transparent); }
.scf-btn:disabled { opacity: .35; cursor: default; }
.scf-all { font-size: 12.5px; white-space: nowrap; }
.scf-val { min-width: 42px; text-align: center; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.scf-colors .hs-pick { position: static; }
.scf-colors .hs-switch { width: 32px; height: 32px; border-color: color-mix(in srgb, currentColor 22%, transparent); background: transparent; color: inherit; -webkit-backdrop-filter: none; backdrop-filter: none; }
.scf-scroll { overflow-x: auto; overflow-y: hidden; padding: 6px 14px 4px; scrollbar-width: thin; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
.scf-canvas { min-width: 100%; }
.sc-full .sc-plot { margin-top: 4px; touch-action: pan-x pan-y; }
.sc-full .sc-plot:focus-visible { outline-offset: 2px; }
.sc-full :is(.sc-lanes, .sc-hr-scale) { position: sticky; right: 0; z-index: 4; background: var(--surface); }
/* (as wide as their words, but never past the screen: a narrow one, or larger text, wraps them) */
.sc-full :is(.sc-hr-head, .sc-quality > small, .sc-q-key) { position: sticky; right: 0; width: max-content; max-width: calc(100vw - 36px); }
.sc-full .sc-hr-area { height: 170px; }
.sc-full .sc-hb { --bw: clamp(3px, calc(60% / var(--n)), 10px); width: var(--bw); margin-right: calc(var(--bw) / -2); }
/* the hours' halves and quarters, as it is zoomed in */
.scf-canvas[data-level="1"] :is(.sc-t30, .sc-t15), .scf-canvas[data-level="2"] .sc-t15 { display: none; }
.sc-axis span:is(.sc-t30, .sc-t15) { font-size: 9.5px; opacity: .75; }
.sc-grid.sc-t15 { opacity: .5; }
.scf-hint { margin: 8px 14px 16px; font-size: 12px; color: var(--muted); }
/* ---------- the "?" windows on an iPad and a computer (info-window.js) ----------
   wider than a phone's column (it was all scrolling on a tablet's screen), their lists two by two; a
   small one (a picture and a few words: an achievement, a day's bar) stays snug; the diary's two
   measures each beside the other. Windows with a width of their own keep it (the board's help, a
   page's help, the admin's) */
@media (min-width: 700px) {
  dialog.jr-info { width: min(600px, calc(100% - 48px)); }
  dialog.jr-info:not(:has(dl, ul, ol, section, table)) { width: min(440px, calc(100% - 48px)); }
  .jr-info dl.spb-eq-info:not(.sh-defs) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .jr-info dl.spb-eq-info:not(.sh-defs) > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  dialog.jr-info.look-info-win.li-two { width: min(720px, calc(100% - 48px)); } /* (860 was a flat strip) */
  .look-info-win.li-two .ji-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; align-items: start; }
  .look-info-win.li-two .ji-card > :not(.li-part) { grid-column: 1 / -1; }
  .look-info-win.li-two .li-part + .li-part { padding-top: 0; border-top: 0; padding-inline-start: 26px; border-inline-start: 1px solid var(--border); }
  /* ("הבנתי" a button's width in the middle, not the window's whole width) */
  dialog.jr-info .ji-ok { width: min(100%, 320px); align-self: center; justify-self: center; }
}

/* ---------- a page's "?" beside its title, and its window (page-help.js) ---------- */
.ph-btn { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-inline-start: 8px; padding: 0; vertical-align: middle; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, currentColor 32%, transparent); background: color-mix(in srgb, currentColor 9%, transparent); color: inherit; cursor: pointer;
  transition: background .15s, border-color .15s; position: relative; top: -1px; }
.ph-btn::after { content: ""; position: absolute; inset: -9px; }
.ph-btn:hover { background: color-mix(in srgb, currentColor 18%, transparent); border-color: color-mix(in srgb, currentColor 50%, transparent); }
.ph-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ph-win .ph-badge { background: color-mix(in srgb, var(--c) 14%, var(--surface)); }
.ph-what { margin: 0 0 10px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.ph-body { display: grid; grid-template-columns: minmax(84px, 27%) minmax(0, 1fr); gap: 12px; align-items: start; }
.ph-sketch { margin: 0; padding: 6px; border-radius: 16px; background: color-mix(in srgb, var(--c) 8%, var(--surface-2)); }
.ph-sketch svg { display: block; width: 100%; height: auto; max-height: 300px; }
.phs-frame { fill: var(--surface); stroke: color-mix(in srgb, var(--text) 18%, transparent); stroke-width: 1.5; }
.phs-notch { fill: color-mix(in srgb, var(--text) 18%, transparent); }
.phs-b { fill: color-mix(in srgb, var(--text) 8%, var(--surface)); }
.phs-a { fill: var(--pc); }
.phs-l { fill: color-mix(in srgb, var(--text) 38%, transparent); }
.phs-l2 { fill: color-mix(in srgb, var(--text) 20%, transparent); }
.phs-w { fill: #fff; }
.phs-st { stroke: color-mix(in srgb, var(--text) 45%, transparent); }
.phs-st2 { stroke: color-mix(in srgb, var(--text) 12%, transparent); }
.phs-st2f { fill: color-mix(in srgb, var(--text) 22%, transparent); }
.phs-ast { stroke: var(--pc); }
.phs-mark circle { fill: var(--pc); stroke: var(--surface); stroke-width: 2; }
.phs-mark text { fill: #fff; font-size: 9px; font-weight: 800; font-family: inherit; }
.ph-steps { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.ph-steps li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.42; }
.ph-n { flex: none; display: grid; place-items: center; width: 21px; height: 21px; margin-top: 0; border-radius: 50%; font-size: 11.5px; font-weight: 800; color: #fff; background: var(--c); }
.ph-tip { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 8px 11px; border-radius: 14px; font-size: 13px; line-height: 1.45;
  background: color-mix(in srgb, #f5b301 12%, var(--surface)); border: 1px solid color-mix(in srgb, #f5b301 30%, transparent); }
.ph-tip svg { flex: none; margin-top: 1px; color: #d99a00; }
dialog.jr-info.ph-win { width: min(400px, calc(100% - 24px)); }
@media (min-width: 700px) { dialog.jr-info.ph-win { width: min(660px, calc(100% - 48px)); } .ph-body { grid-template-columns: 170px minmax(0, 1fr); gap: 18px; } .ph-steps { gap: 9px; } .ph-steps li { font-size: 14.5px; line-height: 1.5; } .ph-what { font-size: 14px; } }
@media (max-width: 380px) { .ph-steps li, .ph-what { font-size: 13px; } .ph-body { gap: 10px; } }
/* a narrow screen (320, the iPhone's larger display): the steps across, the sketch too small to help left out */
@media (max-width: 360px) { .ph-sketch { display: none; } .ph-body { grid-template-columns: minmax(0, 1fr); } }

/* ---------- exploring the nights, under the enlarged sleep chart (sleep-explore.js) ---------- */
/* one stage lit in the chart: the others faint, the steps between them too */
.sc-area:not([data-stage=""])[data-stage] .sc-seg { opacity: .14; transition: opacity .2s; }
.sc-area[data-stage="d"] .sc-seg.st-d, .sc-area[data-stage="r"] .sc-seg.st-r, .sc-area[data-stage="c"] .sc-seg.st-c,
.sc-area[data-stage="a"] .sc-seg:is(.st-a, .st-b) { opacity: 1; box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 45%, transparent); }
.sc-area:not([data-stage=""])[data-stage] .sc-step { opacity: .2; }
/* (one column the window's width: the strips of chips scroll inside it; their full length had widened
   every section past a phone's screen, and the window scrolled sideways) */
.scx { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 4px 14px 22px; }
.scx-sec { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 10px; padding: 14px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--border); }
.scx-h { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0; font-size: 16px; font-weight: 800; }
.scx-h > svg { color: #a78bfa; }
.scx-h small { font-size: 12.5px; font-weight: 500; color: var(--muted); }
/* the night in numbers: eight tiles, four across on a wide screen, two on a phone */
.scx-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 760px) { .scx-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* (twelve, each one size: three rows of four, six of two on a phone, every row as tall as the others;
   each with its drawing at its start) */
.scx-tiles { grid-auto-rows: 1fr; }
.scx-art { display: block; width: 48px; height: 48px; margin: -2px 0 4px; color: var(--c); }
.scx-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.scx-tile { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 12px 11px; border-radius: 16px; overflow: hidden;
  background: color-mix(in srgb, var(--c) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 24%, var(--border)); }
.scx-ti { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 4px; border-radius: 10px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.scx-dot { width: 12px; height: 12px; border-radius: 4px; background: var(--c); }
.scx-tl { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.scx-tile > b { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; }
.scx-u { margin-inline-start: 4px; font-size: 12px; font-style: normal; font-weight: 600; color: var(--muted); }
.scx-tile > small { font-size: 12px; color: var(--muted); line-height: 1.35; }
.scx-vs { align-self: start; margin-top: 5px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-style: normal; font-weight: 700; line-height: 1.5;
  color: var(--muted); background: color-mix(in srgb, var(--text) 7%, transparent); }
.scx-vs.up { color: #16a34a; background: color-mix(in srgb, #22c55e 14%, transparent); }
.scx-vs.down { color: #dc2626; background: color-mix(in srgb, #ef4444 13%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .scx-vs.up { color: #4ade80; } :root:not([data-theme="light"]) .scx-vs.down { color: #f87171; } }
:root[data-theme="dark"] .scx-vs.up { color: #4ade80; } :root[data-theme="dark"] .scx-vs.down { color: #f87171; }
/* the chips: a stage, a filter (its count), an order */
.scx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.scx-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.scx-scroll::-webkit-scrollbar { display: none; }
.scx-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 5px 13px; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); background: var(--surface); color: var(--text); cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.scx-chip:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.scx-chip[aria-pressed="true"] { border-color: transparent; color: #fff; background: linear-gradient(135deg, #7b6cf0, #4f8cf7); }
.scx-chip.st > i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
/* the stages' chips fill their row, the five in one on a phone too */
.scx-stages > .scx-chip { flex: 1 1 0; justify-content: center; min-width: max-content; padding-inline: 9px; }
@media (min-width: 760px) { .scx-stages { max-width: 620px; } }
.scx-chip.st[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 78%, #000); }
.scx-chip.st[aria-pressed="true"] > i { background: #fff; }
.scx-chip small { min-width: 20px; padding: 0 6px; border-radius: 999px; font-size: 11.5px; text-align: center; background: color-mix(in srgb, currentColor 13%, transparent); }
.scx-chip:disabled { opacity: .4; cursor: default; }
.scx-chip:focus-visible, .scx-dir:focus-visible, .scx-row:focus-visible, .scx-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.scx-about { margin: 0; padding: 10px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.55; background: var(--surface); border-inline-start: 4px solid var(--c); }
.scx-about b { color: var(--text); }
.scx-about span { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; }
/* the map of the nights: a square each, by its score, the newest on the left as Hebrew reads */
.scx-map { display: flex; flex-wrap: wrap; gap: 5px; }
.scx-cell { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: var(--c); cursor: pointer; transition: transform .15s, opacity .15s; }
.scx-cell.off { opacity: .2; }
.scx-cell[aria-current="true"] { box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 4px var(--text); }
.scx-cell:hover { transform: scale(1.15); }
.scx-map-key { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: 11.5px; color: var(--muted); }
.scx-map-key i { width: 9px; height: 9px; margin-inline-start: 6px; border-radius: 3px; background: var(--c); }
.scx-map-key i:first-child { margin-inline-start: 0; }
.scx-tools { display: grid; gap: 8px; }
.scx-sortrow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.scx-sortrow .scx-chips { flex: 1; min-width: 0; }
.scx-lbl { flex: none; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.scx-dir { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  background: var(--surface); color: var(--text); cursor: pointer; }
.scx-cmp { margin: 0; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.55; color: var(--muted);
  background: color-mix(in srgb, #7b6cf0 9%, var(--surface)); border: 1px solid color-mix(in srgb, #7b6cf0 22%, transparent); }
.scx-cmp b { color: var(--text); }
/* the list: a night a row, its score, its hours, its stages in a bar, its numbers (the one sorted by lit) */
.scx-list { display: grid; gap: 6px; }
.scx-row { display: grid; grid-template-columns: 40px minmax(84px, auto) minmax(60px, 1fr) repeat(2, 58px); align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; text-align: start; cursor: pointer; transition: border-color .15s, background .15s; }
@media (min-width: 640px) { .scx-row { grid-template-columns: 40px minmax(96px, auto) minmax(90px, 1fr) repeat(4, 66px); } }
@media (max-width: 639.98px) { .scx-wide { display: none !important; } }
/* a phone: the stages' bar under the night's date and hours, so a row fits the screen's width (its five
   columns needed 360 px and pushed the window sideways) */
@media (max-width: 479.98px) {
  .scx-row { grid-template-columns: 38px minmax(0, 1fr) repeat(2, 52px); grid-template-rows: auto auto; column-gap: 8px; row-gap: 5px; padding: 8px; }
  .scx-row > .scx-score { grid-row: 1 / span 2; }
  .scx-row > .scx-when { grid-column: 2; grid-row: 1; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
  .scx-row > .scx-mini { grid-column: 2; grid-row: 2; height: 7px; }
  .scx-row > .scx-v { grid-row: 1 / span 2; }
}
.scx-row:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.scx-row[aria-current="true"] { border-color: #7b6cf0; background: color-mix(in srgb, #7b6cf0 10%, var(--surface)); }
.scx-score { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--c); box-shadow: inset 0 0 0 3px var(--c); }
.scx-when { display: flex; flex-direction: column; min-width: 0; }
.scx-when b { font-size: 14px; }
.scx-when small { font-size: 12px; color: var(--muted); }
.scx-mini { display: flex; height: 10px; gap: 1px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--text) 8%, transparent); }
.scx-mini i { min-width: 2px; background: var(--c); }
.scx-v { display: flex; flex-direction: column; align-items: center; padding: 2px 0; border-radius: 10px; }
.scx-v b { font-size: 14px; font-variant-numeric: tabular-nums; }
.scx-v small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.scx-v.on { background: color-mix(in srgb, #7b6cf0 14%, transparent); }
.scx-none, .scx-note { margin: 0; font-size: 12.5px; color: var(--muted); }
.scx-note:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .scx-cell, .scx-chip, .scx-row, .sc-area .sc-seg { transition: none; } }
@media (max-width: 380px) { .scf-all { display: none; } .scf-tools { gap: 6px; } }
/* the portions' chips (the add and edit sheets): each row filled to its width, the chips sharing it, a
   wide screen's in one row (an iPad's sheet left one alone on a second line, the rest short of the edge) */
.choice-chips[data-chips="unit"] > .choice { flex: 1 1 0; min-width: max-content; justify-content: center; text-align: center; }
.choice-chips[data-chips="unit"] > .choice span { align-items: center; }

/* ---------- the shopping list (shopping.js): the cart on top, the add field and what it finds, the foods
   eaten lately, the shelves with their items, the cart's part, and where the basket costs least ---------- */
.shop-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; }
.shop-hero .sh-main { grid-column: 1; grid-row: 1; min-width: 0; }
.shop-hero .hero-sub { display: block; margin-top: 3px; }
.shop-hero .sh-art { grid-column: 2; grid-row: 1; width: 138px; margin: -4px 0 -8px -4px; }
.shp-scene { display: block; width: 100%; height: auto; overflow: visible; }
/* (the drawings' paper: a carton, a label, a roll of paper; white, as the side menu's drawings have it) */
.shp-scene, .shp-aisle-art, .shp-care-art, .shp-medal { --na-paper: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.shp-scene, .shp-aisle-art, .shp-care-art) { --na-paper: #eef2f1; } }
:root[data-theme="dark"] :is(.shp-scene, .shp-aisle-art, .shp-care-art) { --na-paper: #eef2f1; }
.sh-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.sh-stats:not(:has(.best)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sh-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 7px 6px; border-radius: 14px; line-height: 1.2;
  text-align: center; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.sh-stat b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sh-stat small { font-size: 11.5px; font-weight: 600; opacity: .9; overflow-wrap: anywhere; }
.sh-stat.best { background: #fef08a; color: #713f12; box-shadow: none; }
/* (each a way to its part: the list, the cart, the prices) */
button.sh-stat { border: 0; font: inherit; color: #fff; cursor: pointer; transition: transform .15s, background .2s; }
button.sh-stat.best { color: #713f12; }
button.sh-stat:active { transform: scale(.96); }
@media (hover: hover) { button.sh-stat:not(.best):hover { background: rgba(255, 255, 255, .22); } }
button.sh-stat:focus-visible { outline: 3px solid #fef08a; outline-offset: 2px; }
#shopMain :is([data-key="list"], [data-key="cart"], [data-key="prices"], [data-key="done"], [data-key="empty"]) { scroll-margin-top: calc(var(--top-h, 0px) + 12px); }
/* a drugstore's or a home's product: its kind's drawing in a frame of its colour (shopping-art.js CARE) */
.si-care { display: grid; place-items: center; background: color-mix(in srgb, var(--ck) 22%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ck) 38%, transparent); }
.sh-stat.best small { opacity: 1; }
.sh-prog { grid-column: 1 / -1; height: 6px; margin-top: 2px; border-radius: 99px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.sh-prog i { display: block; width: var(--p); height: 100%; border-radius: inherit; background: #fef08a; transition: width .45s ease; }
/* the cart bobs as it waits, its price tag swings, sparkles twinkle (still when less motion is asked) */
.shp-cart { animation: shp-bob 3.4s ease-in-out infinite; }
@keyframes shp-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
.shp-tag { transform-box: fill-box; transform-origin: 50% 0; animation: shp-swing 2.8s ease-in-out infinite; }
@keyframes shp-swing { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
.shp-spark { transform-box: fill-box; transform-origin: center; animation: shp-twinkle 2.4s ease-in-out infinite; }
.shp-spark.s2 { animation-delay: .8s; }
.shp-spark.s3 { animation-delay: 1.6s; }
@keyframes shp-twinkle { 0%, 100% { opacity: .35; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }
.shp-list { animation: shp-float 3.8s ease-in-out infinite; }
@keyframes shp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .shp-cart, .shp-tag, .shp-spark, .shp-list { animation: none; } }

/* the add field, and what it finds as it is typed under it */
.shop-add { position: relative; display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px; border: 1px solid var(--border);
  border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.shop-add:focus-within { border-color: var(--accent); box-shadow: var(--shadow), 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.shop-add .sa-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 12px; color: #16a34a; background: color-mix(in srgb, #22c55e 15%, transparent); }
.shop-add input { flex: 1; min-width: 0; padding: 8px 2px; border: 0; outline: none; background: transparent; color: var(--text); font: inherit; font-size: 17px; }
.shop-add .sa-go { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 14px; background: var(--accent); color: var(--accent-text); cursor: pointer; }
.shop-sugg { position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: 30; max-height: min(60vh, 420px); margin: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain;
  list-style: none; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .45); }
.shop-sugg ul { margin: 0; padding: 0; list-style: none; }
.shop-sugg li { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 12px; cursor: pointer; }
/* the lately added: a title, and a way to forget them */
.shq-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 8px 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.shq-head span { display: inline-flex; align-items: center; gap: 6px; }
.shq-forget { padding: 4px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
@media (hover: hover) { .shq-forget:hover { background: var(--row-alt); } }
.shop-sugg li[aria-selected="true"] { background: var(--row-alt); box-shadow: inset 0 0 0 1.5px var(--accent); }
@media (hover: hover) { .shop-sugg li:hover { background: var(--row-alt); } }
.shop-sugg .shq-pic { flex: none; width: 40px; height: 40px; border-radius: 10px; }
.shop-sugg .shq-plus { display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.shq-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.shq-text b { overflow: hidden; font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.shq-text small { overflow: hidden; font-size: 12.5px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }

/* the foods eaten most lately: a tap adds one */
.shop-smart { margin-top: 14px; }
:is(.shop-smart, .shop-aisle, .shop-cart) h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 16px; }
:is(.shop-aisle, .shop-cart) h3 small { padding: 1px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--row-alt); }
.shs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* (two rows at most: fitChips hides those past them) */
.shs-chips > [hidden] { display: none !important; }
.shs-chips > .shs-chip:not(.shs-more), .shs-sw { max-width: 62%; }
.shs-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 3px 3px 4px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; box-shadow: var(--shadow); cursor: pointer; }
.shs-chip .shs-pic { flex: none; width: 26px; height: 26px; border-radius: 50%; }
.shs-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shs-chip i { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: #22c55e; }
.shs-chip i svg { width: 12px; height: 12px; }
.shs-chip.shs-more { min-height: 34px; padding: 3px 12px; color: var(--accent); font-weight: 700; }
/* a chip of the lately searched, swiped away (shopping.js swipeAway): it follows the finger over a red bin */
.shs-sw { position: relative; display: inline-flex; min-width: 0; border-radius: 999px; touch-action: pan-y; }
.shs-sw .shs-chip { position: relative; z-index: 1; min-width: 0; transition: transform .28s cubic-bezier(.22, 1, .36, 1); }
.shs-sw.dragging .shs-chip { transition: none; }
.shs-bin { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding: 0 12px; border-radius: inherit; color: #fff;
  background: linear-gradient(90deg, #ff6b6b, #e5484d); visibility: hidden; }
.shs-sw:is(.dragging, .gone) .shs-bin { visibility: visible; }
.shs-sw.bin-end .shs-bin { justify-content: flex-start; }
.shs-bin svg { transition: transform .2s; }
.shs-sw.armed .shs-bin svg { transform: scale(1.25); }
.shs-chip:disabled { opacity: .5; }
/* what was searched lately: words typed have a clock for a picture; one on the list now, a tick */
.shs-clock { display: grid; place-items: center; color: var(--muted); background: var(--row-alt); }
.shs-chip.on i { color: color-mix(in srgb, #16a34a 80%, var(--text)); background: transparent; box-shadow: inset 0 0 0 2px #22c55e; }
.shop-smart + .shop-smart { margin-top: 12px; }
.shop-smart h3 { margin-bottom: 8px; font-size: 14.5px; }
.shop-smart h3 > svg { width: 15px; height: 15px; }
.shop-smart h3 .shq-forget { margin-inline-start: auto; font-size: 13px; }

/* the shelves, each its sign and name over its items */
.shop-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 22px; align-items: start; }
/* another list on its way (shopping.js holdMain): the list going faded, a card over its top with the cart */
.shop-cols { transition: opacity .25s; }
.shop-cols.shop-held { opacity: .14; pointer-events: none; }
:is(.sh-stats, .sh-share) { transition: opacity .25s; }
:is(.sh-stats, .sh-share).shop-held { opacity: .35; pointer-events: none; }
.lw-cart.small .lw-road { display: none; }
/* an item on its way to the list (shopping.js addingRow): a row under the field, its name and the cart */
.shop-adding { display: grid; gap: 8px; margin-top: 12px; }
.sha-row { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 14px; border-radius: 16px; background: var(--surface);
  box-shadow: var(--shadow), inset 0 0 0 1.5px color-mix(in srgb, #22c55e 35%, transparent); animation: shop-wait-in .3s cubic-bezier(.2, .9, .3, 1.2) both; }
.sha-row .shs-pic { flex: none; width: 40px; height: 40px; border-radius: 12px; }
.sha-name { flex: 1; min-width: 0; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.sha-row .lw.small { flex: none; animation: none; color: color-mix(in srgb, #16a34a 80%, var(--text)); }
.lw-cart.small .lw-art svg { width: 52px; }
/* (a button held while its item goes: the cart in it, its height as it was) */
.btn.adding { justify-content: center; }
.btn.adding .lw.small { padding: 0; animation: none; }
.btn.adding .lw-words { font-size: 14.5px; }
.shop-wait { position: relative; z-index: 3; height: 0; }
.shop-wait-card { position: absolute; top: 18px; inset-inline: 0; width: min(100%, 420px); margin-inline: auto; padding: 18px 16px 20px; border-radius: 24px;
  background: var(--surface); box-shadow: var(--shadow), 0 18px 40px -22px rgba(0, 0, 0, .55); animation: shop-wait-in .3s cubic-bezier(.2, .9, .3, 1.2) both; }
.shop-wait-card .lw { animation: none; padding: 4px 0 0; }
@keyframes shop-wait-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@media (min-width: 900px) { .shop-wait-card { top: 40px; padding: 26px 24px 28px; } .shop-wait-card .lw-cart .lw-art svg { width: 190px; } }
@media (prefers-reduced-motion: reduce) { .shop-wait-card { animation: none; } }
.shop-list { display: grid; gap: 18px; margin-top: 18px; }
.shop-aisle h3 .sa-sign { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.shop-items { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
/* an item: its circle, its picture, its name with its grade, maker and price under it, and how many at
   its side (a narrow phone's under its name) */
.shop-item { position: relative; border-radius: 18px; touch-action: pan-y; transition: opacity .2s; }
.si-slide { position: relative; z-index: 1; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "check pic text qty"; align-items: center;
  gap: 6px 10px; min-height: 74px; padding: 10px 10px 10px 12px; border-radius: inherit; background: var(--surface); box-shadow: var(--shadow);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1); }
.shop-item.dragging .si-slide { transition: none; }
/* (swiped to the left: a red bin on its right) */
.si-del { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start; gap: 6px; padding: 0 22px; border-radius: inherit;
  color: #fff; font-size: 14px; font-weight: 700; background: linear-gradient(90deg, #e5484d, #ff6b6b); visibility: hidden; }
.shop-item:is(.dragging, .gone) .si-del { visibility: visible; }
.si-del svg { transition: transform .2s; }
.shop-item.armed .si-del svg { transform: scale(1.25); }
.si-check { grid-area: check; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 2.2px solid color-mix(in srgb, var(--muted) 55%, transparent);
  border-radius: 50%; background: transparent; color: transparent; cursor: pointer; transition: background .2s, border-color .2s; }
@media (hover: hover) { .si-check:hover { border-color: #22c55e; color: color-mix(in srgb, #22c55e 55%, transparent); } }
.shop-item.done .si-check, .si-check[aria-checked="true"] { border-color: #22c55e; background: #22c55e; color: #fff; }
.shop-item .si-pic { grid-area: pic; width: 50px; height: 50px; border-radius: 14px; }
.si-shelf { display: grid; place-items: center; background: var(--row-alt); }
.si-text { grid-area: text; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.si-name { display: -webkit-box; overflow: hidden; font-size: 15.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.si-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 7px; min-width: 0; font-size: 12.5px; color: var(--muted); }
.si-meta:empty { display: none; }
.si-meta .si-brand { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-grade { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 6px; font-size: 12px; font-weight: 800; color: #fff; background: var(--gc); }
.si-price { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.si-price b { font-size: 13.5px; font-weight: 800; color: color-mix(in srgb, #16a34a 78%, var(--text)); }
.si-qty { grid-area: qty; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--row-alt); }
.si-qty button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--surface); color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .14); cursor: pointer; }
.si-qty output { min-width: 24px; font-size: 15px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.si-qty .si-bin { color: var(--muted); }
@media (hover: hover) { .si-qty .si-bin:hover { color: var(--warn); } }
.shop-item.done { opacity: .62; }
.shop-item.done .si-slide { grid-template-areas: "check pic text"; grid-template-columns: auto auto minmax(0, 1fr); }
.shop-item.done .si-name { text-decoration: line-through; }
@media (max-width: 360px) {
  .shop-item:not(.done) .si-slide { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "check pic text" "check pic qty"; }
  .shop-item .si-qty { justify-self: start; }
}
.shop-item.fresh .si-slide { animation: shop-fresh 1.3s ease; }
@keyframes shop-fresh { 0% { transform: scale(1.025); box-shadow: 0 0 0 3px #22c55e, var(--shadow); } 100% { transform: none; box-shadow: var(--shadow); } }

/* the cart's part, under a dashed line */
.shop-cart { margin-top: 22px; padding-top: 16px; border-top: 2px dashed var(--border); }
.shop-cart header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.shop-cart h3 { margin: 0; color: color-mix(in srgb, #16a34a 78%, var(--text)); }
.shop-cart header .btn { flex: none; }

/* where the basket costs least: each chain's sum, its bar, and what it lacks */
.shop-prices header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
/* its head opens and shuts it (open by default): a round chevron at its end, turning */
.shop-prices .sp-h { margin: 0; }
.sp-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.sp-ht { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sp-ht b { font-size: 17px; }
.sp-ht small { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.shop-prices.shut .sp-ht small { font-weight: 700; color: color-mix(in srgb, #16a34a 78%, var(--text)); }
.sp-chev { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; color: var(--text); background: var(--row-alt);
  box-shadow: inset 0 0 0 1px var(--border); transition: transform .32s cubic-bezier(.34, 1.4, .64, 1), background .2s; }
.shop-prices:not(.shut) .sp-chev { transform: rotate(180deg); }
@media (hover: hover) { .sp-toggle:hover .sp-chev { background: color-mix(in srgb, var(--accent) 16%, var(--row-alt)); } }
.sp-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 14px; }
.sp-body { margin-top: 12px; }
.sp-body[hidden] { display: none; }
.shop-prices:not(.shut) .sp-body { animation: sp-open .3s cubic-bezier(.2, .8, .2, 1); }
@keyframes sp-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .shop-prices:not(.shut) .sp-body { animation: none; } .sp-chev { transition: none; } }
.shop-prices .sp-art { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: color-mix(in srgb, #facc15 22%, transparent); }
.shop-prices .sp-art svg { width: 28px; height: 28px; }
.shop-prices h3 { margin: 0; font-size: 17px; }
.shop-prices header small { font-size: 12.5px; color: var(--muted); }
.sp-chains { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sp-chains li { display: grid; grid-template-columns: 6.4em minmax(0, 1fr) auto; grid-template-areas: "name bar sum" "name bar note"; align-items: center; gap: 0 10px;
  padding: 8px 10px; border-radius: 14px; background: var(--row-alt); }
.spc-name { grid-area: name; font-size: 14px; font-weight: 700; }
.spc-bar { grid-area: bar; height: 8px; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--muted) 16%, transparent); }
.spc-bar i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--muted) 50%, transparent); }
.sp-chains b { grid-area: sum; font-size: 15px; text-align: end; font-variant-numeric: tabular-nums; }
.sp-chains small { grid-area: note; font-size: 11.5px; text-align: end; white-space: nowrap; color: var(--muted); }
.sp-chains li.best { background: color-mix(in srgb, #22c55e 13%, var(--surface)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #22c55e 45%, transparent); }
.sp-chains li.best .spc-bar i { background: linear-gradient(90deg, #86efac, #22c55e); }
.sp-chains li.best small { font-weight: 700; color: color-mix(in srgb, #16a34a 78%, var(--text)); }
.sp-chains li.part { opacity: .72; }
/* a chain tapped: its store online or its site (shopping.js chainDialog); the whole row the button */
.sp-chains li.go { position: relative; transition: transform .12s ease, background-color .15s ease; }
.sp-chains li.go:active { transform: scale(.985); }
.spc-tap { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; border-radius: inherit; background: none; cursor: pointer; }
.spc-tap:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .sp-chains li.go:hover { background: color-mix(in srgb, var(--accent) 9%, var(--row-alt)); } .sp-chains li.go.best:hover { background: color-mix(in srgb, #22c55e 19%, var(--surface)); } }
.spc-name em { display: flex; align-items: center; gap: 3px; margin-top: 2px; font-size: 11px; font-weight: 600; font-style: normal; color: var(--accent); white-space: nowrap; }
.spc-name em svg { flex: none; }
.spg { display: grid; gap: 12px; }
.spg-sum { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--row-alt); }
.spg-sum b { font-size: 24px; font-variant-numeric: tabular-nums; }
.spg-sum span { font-size: 13.5px; color: var(--muted); }
.spg-off { margin: 0; font-size: 14px; }
.spg-go { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; text-decoration: none; }
.spg-fine { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.sp-split { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; font-size: 14px; background: color-mix(in srgb, #facc15 14%, transparent); }
.sp-split svg { flex: none; }
.sp-note { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }

/* a word when there is nothing to price, all is in the cart, or the list is empty */
:is(.shop-hint, .shop-done) { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
:is(.shop-hint, .shop-done) svg { flex: none; }
.shop-done { font-weight: 700; color: color-mix(in srgb, #16a34a 78%, var(--text)); background: color-mix(in srgb, #22c55e 12%, var(--surface)); }
.shop-empty { margin-top: 18px; padding: 16px 16px 22px; border-radius: var(--radius); text-align: center; background: var(--surface); box-shadow: var(--shadow); }
.shop-empty .shp-scene { width: min(240px, 80%); margin: 0 auto; }
.shop-empty h3 { margin: 6px 0 4px; font-size: 19px; }
.shop-empty p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.shop-foot { margin: 16px 0 0; text-align: center; }
.shop-foot .btn { gap: 6px; color: var(--muted); }
/* the list by email (shopping.js mailDialog): a button on the top; its window, a little picture of what
   goes, the address, the addresses sent to lately; and its "sent" */
.sh-share { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 2px; }
.sh-share:empty { display: none; }
.sh-act { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 40px; padding: 7px 10px; border: 0; border-radius: 14px;
  font: inherit; font-size: 13.5px; font-weight: 700; line-height: 1.2; color: #fff; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26);
  cursor: pointer; transition: transform .15s, background .2s; }
.sh-act svg { width: 17px; height: 17px; flex: none; }
.sh-act:active { transform: scale(.96); }
@media (hover: hover) { .sh-act:hover { background: rgba(255, 255, 255, .24); } }
.sh-act:focus-visible { outline: 3px solid #fef08a; outline-offset: 2px; }
.shm { display: flex; flex-direction: column; gap: 12px; }
.shm-peek { border-radius: 16px; overflow: hidden; background: var(--surface); box-shadow: 0 0 0 1px var(--border), 0 10px 24px -18px rgba(0, 0, 0, .5); }
.shm-peek-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: #fff; background: linear-gradient(135deg, #0a5a42, #12936a); }
.shm-peek-head svg { width: 20px; height: 20px; flex: none; }
.shm-peek-head b { font-size: 15px; }
.shm-peek-head small { margin-inline-start: auto; font-size: 12.5px; font-weight: 600; opacity: .92; white-space: nowrap; }
.shm-peek ul { list-style: none; margin: 0; padding: 2px 14px; }
.shm-peek li { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 7px 0; font-size: 14px; border-top: 1px solid var(--border); }
.shm-peek li:first-child { border-top: 0; }
.shm-peek li i { width: 14px; height: 14px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, var(--border)); }
.shm-peek li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shm-peek li small { margin-inline-start: auto; color: var(--accent); font-weight: 800; white-space: nowrap; }
.shm-more { margin: 0; padding: 0 14px 9px 14px; padding-inline-start: 37px; font-size: 12.5px; color: var(--muted); }
.shm-best { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 14px; font-size: 13px; font-weight: 700; background: #fef08a; color: #713f12; }
.shm-best svg { width: 16px; height: 16px; flex: none; }
.shm-recent { display: flex; flex-direction: column; gap: 6px; margin-top: -4px; }
.shm-recent[hidden] { display: none; }
.shm-recent-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.shm-recent-head small { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.shm-recent-head .shq-forget { font-size: 13px; }
.shm-addrs { display: flex; flex-wrap: wrap; gap: 6px; }
.shm-addr { max-width: 100%; padding: 6px 11px; border: 0; border-radius: 999px; font: inherit; font-size: 13px; color: var(--text); background: var(--track);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.shm-addr[aria-pressed="true"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.shm-err { margin: -4px 0 0; color: var(--over-red, #dc2626); font-size: 13.5px; font-weight: 600; }
.shm-err[hidden] { display: none; }
.shm-note { margin: 0; font-size: 13px; line-height: 1.5; }
.shm-me { display: block; overflow-wrap: anywhere; text-align: end; }
.shm .actions { margin-top: 2px; }
.shm .actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.shm-done { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0 4px; text-align: center; }
.shm-done-art { position: relative; width: 84px; height: 84px; margin-bottom: 8px; border-radius: 24px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, #2eb67d, #15803d); box-shadow: 0 14px 28px -14px rgba(21, 128, 61, .8); }
.shm-done-art i { position: absolute; inset-inline-end: -7px; bottom: -7px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: #fef08a; color: #713f12; box-shadow: 0 0 0 3px var(--surface); }
.shm-done-t { margin: 0; font-size: 19px; font-weight: 800; }
.shm-done .muted { margin: 0; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.shm-done .actions { width: 100%; justify-content: center; margin-top: 10px; }
/* the email's options: the chains' ranking with it */
.shm-opt { align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; color: var(--text); background: var(--row-alt); }
.shm-opt-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.shm-opt-t b { font-size: 14px; }
.shm-opt-t small { font-size: 12.5px; color: var(--muted); }
/* a row's grade, a button: what the grades mean (shopping.js gradeHelp) */
button.si-grade { padding: 0; border: 0; font: inherit; font-size: 12px; font-weight: 800; color: #fff; cursor: pointer; }
button.si-grade:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sgh { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.sgh-art { position: relative; display: grid; place-items: center; width: 78px; height: 78px; margin: 8px 0 2px; border-radius: 50%; color: #fff;
  background: radial-gradient(circle at 32% 26%, #34d399, #0e7a58 58%, #0a5a42); box-shadow: 0 16px 30px -14px rgba(10, 90, 66, .9), inset 0 -5px 12px rgba(0, 0, 0, .2); }
.sgh-art b { font-size: 44px; font-weight: 900; line-height: 1; text-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
/* (a ring of the five grades' colours around it) */
.sgh-art::before { content: ""; position: absolute; inset: -7px; padding: 3.5px; border-radius: 50%;
  background: conic-gradient(#038141 0 20%, #85bb2f 0 40%, #e5b80b 0 60%, #ee8100 0 80%, #e63e11 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.sgh-lead { margin: 0; font-size: 14.5px; line-height: 1.6; }
.sgh-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; width: 100%; margin: 0; padding: 0; list-style: none; }
.sgh-scale li { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding: 8px 2px 7px; border-radius: 14px; background: var(--row-alt); }
.sgh-scale b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: #fff; font-size: 16px; font-weight: 800; background: var(--gc); }
.sgh-scale span { font-size: 11.5px; font-weight: 600; line-height: 1.25; color: var(--muted); overflow-wrap: anywhere; }
.sgh-scale li.on { background: color-mix(in srgb, var(--gc) 16%, transparent); box-shadow: inset 0 0 0 2px var(--gc); }
.sgh-scale li.on span { color: var(--text); }
.sgh-why { display: grid; gap: 6px; width: 100%; }
.sgh-why p { display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; text-align: start; background: var(--row-alt); }
.sgh-why i { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; color: #fff; }
.sgh-why i.down { background: #e5484d; }
.sgh-why i.up { background: #16a34a; }
.sgh-why i svg { width: 14px; height: 14px; }
.sgh-note { margin: 0; font-size: 12.5px; }
.sgh .actions { width: 100%; justify-content: center; }
/* a recent search in the field's list, swiped away (shopping.js swipeAway): it follows the finger over a red bin */
.shop-sugg li.shq-sw { position: relative; display: block; padding: 0; overflow: hidden; touch-action: pan-y; }
.shq-sw .shq-slide { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: inherit;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1); }
.shq-sw.dragging .shq-slide { transition: none; }
.shq-sw:is(.dragging, .gone) .shq-slide { background: var(--surface); }
.shq-bin { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 0 16px; border-radius: inherit;
  color: #fff; font-size: 14px; font-weight: 700; background: linear-gradient(90deg, #ff6b6b, #e5484d); visibility: hidden; }
.shq-sw:is(.dragging, .gone) .shq-bin { visibility: visible; }
.shq-sw.bin-end .shq-bin { justify-content: flex-start; }
.shq-bin svg { transition: transform .2s; }
.shq-sw.armed .shq-bin svg { transform: scale(1.25); }
/* (no callout on a long press: it writes the words in the field) */
:is(.shq-sw, .shs-sw) { -webkit-touch-callout: none; }
/* one searched lately that is on the list now: a tick at its end, and a tint */
.shop-sugg li.shq-sw.on .shq-slide { background: color-mix(in srgb, #22c55e 9%, transparent); }
.shq-on { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; color: color-mix(in srgb, #16a34a 80%, var(--text)); box-shadow: inset 0 0 0 2px #22c55e; }
.shq-on svg { width: 13px; height: 13px; }
.sit-of { margin: -4px 0 3px; font-size: 12px; color: var(--muted); }
/* (priced by the product in a food's picture: an estimate) */
.si-like { margin-inline-end: 1px; font-weight: 800; color: color-mix(in srgb, #16a34a 78%, var(--text)); }
/* an item with no price: products of its name that have them, to put in its place */
.sit-alts ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sit-alts li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 13px; background: var(--row-alt); }
.sit-alts .sit-alt-pic { width: 40px; height: 40px; border-radius: 11px; }
.sit-alt-t { display: flex; flex-direction: column; min-width: 0; }
.sit-alt-t b { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.sit-alt-t small { overflow: hidden; font-size: 12px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.sit-alt-go { padding: 7px 12px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.sit-alt-none { margin: 0; font-size: 13px; color: var(--muted); }
.sit-alts .lw { margin: 6px 0; }
.sit-of a { color: var(--accent); font-weight: 700; }
/* the email on its way (shopping.js mailDialog): the window locked, an envelope flying over the list's picture */
.shm-peek { position: relative; }
.shm-fly { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; border-radius: inherit; opacity: 0; visibility: hidden;
  background: color-mix(in srgb, var(--surface) 80%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: opacity .25s, visibility .25s; }
.shm.sending .shm-fly { opacity: 1; visibility: visible; }
/* (the envelope on the left, its trail on its right: it flies forward, to the left) */
.shm-fly-in { display: flex; align-items: center; gap: 8px; direction: ltr; }
.shm-fly-env { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 19px; color: #fff; background: linear-gradient(145deg, #2eb67d, #15803d);
  box-shadow: 0 16px 30px -12px rgba(21, 128, 61, .85); animation: shm-fly 1.5s ease-in-out infinite; }
.shm-fly-trail { display: grid; gap: 7px; }
.shm-fly-trail i { display: block; width: 34px; height: 4px; border-radius: 99px; background: color-mix(in srgb, #22c55e 60%, transparent); transform-origin: left center; animation: shm-trail 1.5s ease-in-out infinite; }
.shm-fly-trail i:nth-child(1) { width: 24px; }
.shm-fly-trail i:nth-child(2) { animation-delay: .18s; }
.shm-fly-trail i:nth-child(3) { width: 18px; animation-delay: .36s; }
@keyframes shm-fly { 0%, 100% { transform: translate(0, 3px) rotate(-4deg); } 50% { transform: translate(-9px, -6px) rotate(5deg); } }
@keyframes shm-trail { 0%, 100% { transform: scaleX(.5); opacity: .45; } 50% { transform: scaleX(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .shm-fly-env, .shm-fly-trail i { animation: none; } }
:root[data-a11y~="motion"] :is(.shm-fly-env, .shm-fly-trail i) { animation: none; }
.shm.sending :is(.shm-addr, .shm-opt, .shq-forget) { opacity: .55; }
.shm [data-send] .lw-dots { margin-inline-start: -4px; }
/* a row's picture and name open its window (shopping.js itemSheet) */
.shop-item [data-open] { cursor: pointer; }
button.si-name { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 15.5px; font-weight: 700; text-align: start; }
button.si-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* an item's window: its head, its health, its values, its price in each chain (short: seen whole) */
.sit { display: flex; flex-direction: column; gap: 10px; }
.sit-head { display: flex; align-items: center; gap: 12px; }
.sit-head .sit-pic { flex: none; width: 48px; height: 48px; border-radius: 14px; }
.sit-head > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sit-head b { font-size: 16.5px; line-height: 1.3; overflow-wrap: anywhere; }
.sit-head small { font-size: 13px; color: var(--muted); }
.sit-body { display: flex; flex-direction: column; gap: 10px; }
.sit-body .lw { margin: 18px 0; }
.sit-health { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: color-mix(in srgb, var(--gc) 13%, transparent); }
.sit-health > b { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; color: #fff; font-size: 17px; font-weight: 800; background: var(--gc); }
.sit-health span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sit-health strong { font-size: 15px; }
.sit-health small { font-size: 12px; color: var(--muted); }
.sit-q { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; color: #fff; font: inherit; font-size: 17px; font-weight: 900;
  cursor: pointer; background: radial-gradient(circle at 32% 26%, #34d399, #0e7a58 60%, #0a5a42); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px color-mix(in srgb, var(--gc) 70%, transparent); }
.sit-q:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sit-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.sit-values > div { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 4px 4px 3px; border-radius: 11px; background: var(--row-alt); text-align: center; }
.sit-values b { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sit-values span { font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
/* (each value by how it pulls the grade: down a lot red, a little orange, not or up green) */
.sit-values > div::before { content: ""; position: absolute; top: 6px; inset-inline-start: 6px; width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.sit-values > .bad::before { background: #e5484d; }
.sit-values > .mid::before { background: #f59e0b; }
.sit-values > .good::before { background: #22c55e; }
.sit-rank h3 { display: flex; align-items: center; gap: 7px; margin: 2px 0 4px; font-size: 14.5px; }
.sit-rank h3 svg { flex: none; width: 20px; height: 20px; }
.sit-rank ol { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.sit-rank li { display: grid; grid-template-columns: 20px minmax(0, 1fr) minmax(24px, .6fr) auto minmax(50px, auto); align-items: center; gap: 7px; min-height: 32px; padding: 2px 8px; border-radius: 11px; }
.sit-rank li.best { background: color-mix(in srgb, #22c55e 13%, transparent); }
.sit-rank li i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-style: normal; font-size: 11px; font-weight: 800; color: var(--muted); background: var(--row-alt); }
.sit-rank li.best i { color: #fff; background: #f59e0b; }
.sit-chain { min-width: 0; overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sit-bar { height: 6px; overflow: hidden; border-radius: 99px; background: var(--track); }
.sit-bar b { display: block; width: var(--w); height: 100%; border-radius: inherit; background: #94a3b8; }
.sit-rank li.best .sit-bar b { background: #16a34a; }
.sit-price { font-size: 14px; font-weight: 800; white-space: nowrap; }
.sit-diff { font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; text-align: end; }
.sit-rank li.best .sit-diff { color: color-mix(in srgb, #16a34a 80%, var(--text)); }
.sit-qty { margin: 6px 0 0; padding: 7px 12px; border-radius: 12px; font-size: 13.5px; background: var(--row-alt); }
.sit-note { margin: 6px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.sit-body > .sit-note { margin: -4px 0 0; }
.sit-none { margin: 0; padding: 12px; border-radius: 12px; font-size: 14px; line-height: 1.5; color: var(--muted); background: var(--row-alt); }
.sit .actions { margin-top: 2px; }
/* the lists (shopping.js listsBar): a row on the page's top, the open one white with its pencil */
/* (on rows of their own as they need: each list in sight, the new one's button too) */
.sh-lists { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 0; padding: 2px 0 4px; }
.shl { display: inline-flex; align-items: center; gap: 7px; flex: none; max-width: 68vw; min-height: 38px; padding: 6px 13px; border: 0; border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  cursor: pointer; transition: background .2s, color .2s, transform .15s; }
.shl:active { transform: scale(.96); }
.shl i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--lc); box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
.shl span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shl small { flex: none; min-width: 20px; padding: 1px 6px; border-radius: 99px; font-size: 11.5px; font-weight: 800; text-align: center; color: #fff; background: rgba(255, 255, 255, .2); }
.shl.on { color: #0b2342; background: #fff; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .55); }
.shl.on i { box-shadow: none; }
.shl.on small { background: var(--lc); }
.shl-edit { display: grid; place-items: center; flex: none; width: 36px; height: 36px; margin-inline-start: -2px; padding: 0; border: 0; border-radius: 50%; color: #fff;
  background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); cursor: pointer; }
.shl-add { gap: 5px; background: transparent; box-shadow: none; border: 1.5px dashed rgba(255, 255, 255, .5); }
.shl-add svg { width: 14px; height: 14px; }
.shl-add-o { justify-content: center; width: 38px; padding: 0; }
.shl-add-o svg { width: 16px; height: 16px; }
@media (hover: hover) { .shl:not(.on):hover, .shl-edit:hover { background: rgba(255, 255, 255, .22); } }
:is(.shl, .shl-edit):focus-visible { outline: 3px solid #fef08a; outline-offset: 2px; }
/* the lists shared with me: on a line of their own, under their owner's name; one for viewing only */
.shl-break { flex-basis: 100%; height: 0; }
.shl-of { display: inline-flex; align-items: center; gap: 6px; padding-inline-end: 4px; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .9); }
.shl-av { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 13px; font-weight: 800; color: #fff; background: var(--av);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
.shl.theirs:not(.on) { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); border: 0; }
.shl-note { flex-basis: 100%; display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 13px; color: rgba(255, 255, 255, .92); }
.shl-note svg { flex: none; }
/* the row's five looks (shopping.js LIST_LOOKS) and the gear by the title that picks one (looksDialog) */
.sh-gear { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-inline-start: 8px; padding: 0; vertical-align: middle; position: relative; top: -2px;
  border: 0; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32), 0 6px 14px -8px rgba(0, 0, 0, .55);
  cursor: pointer; transition: background .15s, transform .15s; }
.sh-gear::after { content: ""; position: absolute; inset: -8px; }
.sh-gear svg { transition: transform .35s ease; }
.sh-gear:active { transform: scale(.92); }
.sh-gear:active svg { transform: rotate(60deg); }
@media (hover: hover) { .sh-gear:hover { background: rgba(255, 255, 255, .26); } .sh-gear:hover svg { transform: rotate(45deg); } }
.sh-gear:focus-visible { outline: 3px solid #fef08a; outline-offset: 2px; }
.sh-lists:not(.look-chips) { display: block; }
/* one switcher, its window the lists */
.slw-row { display: flex; align-items: stretch; gap: 8px; }
.slw { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; min-height: 58px; padding: 8px 12px; border: 0; border-radius: 18px; font: inherit; text-align: start;
  color: #0b2342; background: #fff; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .6); cursor: pointer; transition: transform .15s; }
.slw:active { transform: scale(.98); }
.slw .shl-av { flex: none; width: 40px; height: 40px; font-size: 18px; box-shadow: 0 0 0 3px #e7ecf3; }
.slw-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; background: var(--lc); }
.slw-ic svg { width: 20px; height: 20px; }
.slw-t { flex: 1; min-width: 0; display: grid; gap: 1px; }
.slw-t b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slw-t small { font-size: 12px; color: #52637a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slw-chev { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #52637a; background: #eef2f7; }
.slw-btn { flex: none; display: grid; place-items: center; width: 48px; padding: 0; border: 0; border-radius: 16px; color: #fff; background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); cursor: pointer; }
.slw-btn.slw-add, .sh-lists > .slw-add { background: transparent; box-shadow: none; border: 1.5px dashed rgba(255, 255, 255, .55); }
.sh-lists > .slw-add { width: 58px; height: 58px; border-radius: 18px; color: #fff; }
.sls { display: grid; gap: 6px; }
.sls-h { display: flex; align-items: center; gap: 6px; margin: 8px 2px 0; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.sls-h:first-child { margin-top: 0; }
.sls-r { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 14px; border: 0; border-radius: 16px; font: inherit; text-align: start;
  color: var(--text); background: var(--row-alt); cursor: pointer; }
.sls-r .shl-av { flex: none; width: 32px; height: 32px; font-size: 15px; box-shadow: none; }
.sls-dot { flex: none; width: 14px; height: 14px; margin: 0 9px; border-radius: 50%; background: var(--lc); }
.sls-t { flex: 1; min-width: 0; display: grid; }
.sls-t b { font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sls-t small { font-size: 12.5px; color: var(--muted); }
.sls-r.on { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); box-shadow: inset 0 0 0 2px var(--accent); }
.sls-on { flex: none; display: grid; color: var(--accent); }
.sls-new { color: var(--accent); background: none; border: 1.5px dashed var(--border); }
.sls-new svg { flex: none; margin: 0 7px; }
/* the switch: one track, the open one a white pill */
.slg-row { display: flex; align-items: center; gap: 8px; }
.slg { flex: 1; min-width: 0; display: flex; gap: 3px; padding: 4px; overflow-x: auto; scrollbar-width: none; border-radius: 16px;
  background: rgba(8, 25, 60, .28); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2); }
.slg::-webkit-scrollbar { display: none; }
.slg-s { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 12px;
  font: inherit; font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, .92); background: none; white-space: nowrap; cursor: pointer; }
.slg-s > span { max-width: 11em; overflow: hidden; text-overflow: ellipsis; }
.slg-s > i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--lc); }
.slg-s small { padding: 1px 6px; border-radius: 99px; font-size: 11px; font-weight: 800; background: rgba(255, 255, 255, .2); }
.slg-s.on { color: #0b2342; background: #fff; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .4); }
.slg-s.on small { color: #fff; background: var(--lc); }
.slg .shl-av { flex: none; width: 22px; height: 22px; font-size: 11px; box-shadow: none; }
.slg-btn { flex: none; display: grid; place-items: center; width: 46px; height: 48px; padding: 0; border: 0; border-radius: 16px; color: #fff; background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); cursor: pointer; }
.slg-who { display: flex; align-items: center; gap: 8px; margin: 9px 2px 0; font-size: 13px; color: rgba(255, 255, 255, .95); }
.slg-who > svg { flex: none; }
.slg-who > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slg-who em, .slb-h em { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; font-style: normal; font-size: 12px; font-weight: 700;
  color: #fff; background: rgba(255, 255, 255, .16); white-space: nowrap; }
.slg-who em svg, .slb-h em svg { width: 13px; height: 13px; }
/* two groups: mine, and each share's, a glass card each */
.slb { padding: 9px 10px 10px; border-radius: 18px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.slb + .slb { margin-top: 8px; }
.slb-h { display: flex; align-items: center; gap: 7px; margin: 0 2px 8px; font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, .9); }
.slb-h > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slb-h em { margin-inline-start: auto; }
.slb-h .shl-av { flex: none; width: 22px; height: 22px; font-size: 11px; box-shadow: none; }
.slb-row { display: flex; flex-wrap: wrap; gap: 6px; }
.slb-c { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-height: 38px; padding: 6px 13px; border: 0; border-radius: 12px; font: inherit; font-size: 14px;
  font-weight: 700; color: #fff; background: rgba(255, 255, 255, .12); cursor: pointer; }
.slb-c > i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--lc); }
.slb-c > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slb-c small { flex: none; min-width: 20px; padding: 1px 6px; border-radius: 99px; font-size: 11.5px; font-weight: 800; text-align: center; background: rgba(255, 255, 255, .22); }
.slb-c.on { color: #0b2342; background: #fff; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .55); }
.slb-c.on small { color: #fff; background: var(--lc); }
.slb-btn { flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 12px; color: #fff; background: rgba(255, 255, 255, .14); cursor: pointer; }
.slb-add { background: transparent; border: 1.5px dashed rgba(255, 255, 255, .55); }
/* tiles: a card for each list, sideways when they are many */
.slt { display: flex; gap: 8px; padding: 2px 2px 4px; overflow-x: auto; scrollbar-width: none; }
.slt::-webkit-scrollbar { display: none; }
.slt-t { flex: none; width: 126px; display: grid; gap: 3px; padding: 9px 11px 10px; border: 0; border-radius: 16px; font: inherit; text-align: start; color: #fff; cursor: pointer;
  background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 4px 0 var(--lc); }
.slt-top { display: flex; align-items: center; justify-content: space-between; min-height: 22px; }
.slt-me { display: grid; }
.slt-t .shl-av { width: 20px; height: 20px; font-size: 10px; box-shadow: none; }
.slt-n { padding: 1px 7px; border-radius: 99px; font-size: 11.5px; font-weight: 800; background: rgba(255, 255, 255, .22); }
.slt-t b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slt-t small { font-size: 11.5px; opacity: .88; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slt-t.on { color: #0b2342; background: #fff; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .6), inset 0 4px 0 var(--lc); }
.slt-t.on .slt-n { color: #fff; background: var(--lc); }
.slt-t.on small { opacity: 1; color: #52637a; }
.slt-add { flex: none; width: 74px; display: grid; place-items: center; align-content: center; gap: 3px; padding: 0; border: 1.5px dashed rgba(255, 255, 255, .55); border-radius: 16px;
  font: inherit; font-size: 12px; font-weight: 700; color: #fff; background: none; cursor: pointer; }
.slt-note { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0; padding: 5px 11px; border: 0; border-radius: 99px; font: inherit; font-size: 12.5px; font-weight: 600;
  color: #fff; background: rgba(255, 255, 255, .14); }
.slt-note svg { flex: none; width: 14px; height: 14px; }
.slt-edit { cursor: pointer; }
:is(.slw, .slw-btn, .slg-s, .slg-btn, .slb-c, .slb-btn, .slt-t, .slt-add, .slt-edit):focus-visible { outline: 3px solid #fef08a; outline-offset: 2px; }
/* the shopping settings (shopping.js settingsDialog): three tabs over panels stacked in one place (the
   window as tall as the tallest, never jumping); the looks drawn small on the page's colours, the list's
   switches, the chains compared */
.sst { display: flex; gap: 3px; margin: 0 0 12px; padding: 4px; border-radius: 16px; background: var(--row-alt); }
.sst [role="tab"] { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 8px; border: 0; border-radius: 12px;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--muted); background: none; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.sst [role="tab"] svg { flex: none; width: 17px; height: 17px; }
.sst [role="tab"][aria-selected="true"] { color: var(--text); background: var(--surface); box-shadow: 0 3px 10px -4px rgba(0, 0, 0, .3); }
.sst [role="tab"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ssp-stack { display: grid; }
.ssp { grid-area: 1 / 1; min-width: 0; }
.ssp:not(.on) { visibility: hidden; }
.sss-r { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; margin-bottom: 6px; padding: 8px 12px; border: 0; border-radius: 16px; font: inherit;
  text-align: start; color: var(--text); background: var(--row-alt); cursor: pointer; }
.sss-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; font-size: 20px; background: var(--surface); }
.sss-t { flex: 1; min-width: 0; display: grid; gap: 1px; }
.sss-t b { font-size: 14.5px; }
.sss-t small { font-size: 12px; line-height: 1.35; color: var(--muted); }
.sss-sw { flex: none; position: relative; width: 46px; height: 28px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 35%, transparent); transition: background .2s; }
.sss-sw i { position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); transition: inset-inline-start .2s; }
.sss-r[aria-checked="true"] .sss-sw { background: var(--accent); }
.sss-r[aria-checked="true"] .sss-sw i { inset-inline-start: 21px; }
.sss-r:focus-visible, .ssc-c:focus-visible, .slk-o:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ssc-what { margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.ssc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ssc-c { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px; padding: 6px 12px; border: 0; border-radius: 14px; font: inherit; font-size: 14.5px;
  font-weight: 700; text-align: start; color: var(--text); background: var(--row-alt); cursor: pointer; }
.ssc-c > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssc-box { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: transparent; box-shadow: inset 0 0 0 2px var(--border); }
.ssc-box svg { width: 14px; height: 14px; }
.ssc-c[aria-checked="true"] { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent); }
.ssc-c[aria-checked="true"] .ssc-box { color: #fff; background: var(--accent); box-shadow: none; }
/* over the chains: how many are compared, and taking them all while some are out */
.ssc-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; min-height: 44px; margin: 0 0 10px; padding: 6px 6px 6px 12px; border-radius: 14px;
  background: var(--row-alt); }
.ssc-count { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--muted); }
.ssc-count b { color: var(--text); font-size: 15px; }
.ssc-count.every { color: color-mix(in srgb, #16a34a 80%, var(--text)); font-weight: 700; }
.ssc-count svg { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; color: #fff; background: #22c55e; }
.ssc-all { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 700;
  color: var(--accent-text, #fff); background: var(--accent); box-shadow: 0 4px 12px -5px color-mix(in srgb, var(--accent) 70%, transparent); cursor: pointer; white-space: nowrap; transition: transform .15s; }
.ssc-all:active { transform: scale(.96); }
.ssc-all[hidden] { display: none; }
.ssc-short { display: none; }
@media (max-width: 380px) { .ssc-bar .ssc-long { display: none; } .ssc-bar .ssc-short { display: inline; } .ssc-all { padding: 0 11px; } }
.ssc-all:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ssc-note { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--over-red, #dc2626); }
.ssc-note:empty { display: none; }
/* the list tab's resets: back to the defaults, and all the lists gone (red), each asked first */
.sss-reset { display: grid; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.sss-h { margin: 0 2px 2px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.sss-x { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 14px; border: 0; border-radius: 14px; font: inherit; text-align: start;
  color: var(--text); background: var(--row-alt); cursor: pointer; }
.sss-x > svg { flex: none; width: 20px; height: 20px; color: var(--accent); }
.sss-x > span { flex: 1; min-width: 0; display: grid; gap: 1px; }
.sss-x b { font-size: 14px; }
.sss-x small { font-size: 12px; line-height: 1.35; color: var(--muted); }
.sss-x.danger { color: var(--over-red, #dc2626); background: color-mix(in srgb, #e5484d 9%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #e5484d 28%, transparent); }
.sss-x.danger > svg { color: inherit; }
.sss-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.confirm-warn { display: inline-block; margin-top: 6px; color: var(--over-red, #dc2626); }
@media (max-height: 760px) { .sss-x small { display: none; } .sss-x { min-height: 44px; } .sss-reset { margin-top: 10px; padding-top: 8px; } }
@media (max-height: 620px) { .sss-reset .sss-h { display: none; } .sss-reset { gap: 5px; margin-top: 8px; } .sss-x { min-height: 42px; } }
/* the chips' five looks (shopping.js CHIP_LOOKS) and the small gear by the first title (settings, "הצעות") */
.shs-gear { position: relative; display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; color: var(--muted);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), var(--shadow); cursor: pointer; }
.shs-gear::after { content: ""; position: absolute; inset: -8px; }
.shop-smart h3 .shs-gear svg { width: 15px; height: 15px; transition: transform .35s ease; }
.shs-gear:active svg { transform: rotate(60deg); }
@media (hover: hover) { .shs-gear:hover { color: var(--accent); } .shs-gear:hover svg { transform: rotate(45deg); } }
.shs-gear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* one row scrolled sideways, and the tiles: every chip there, no "+ עוד"; to the page's edges */
:is(.sk-row, .sk-tiles) .shs-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px 8px; }
:is(.sk-row, .sk-tiles) .shs-chips::-webkit-scrollbar { display: none; }
:is(.sk-row, .sk-tiles) .shs-chips > :is(.shs-chip, .shs-sw) { flex: none; max-width: 220px; }
:is(.sk-row, .sk-tiles) .shs-more { display: none !important; }
/* tiles: the picture big over the name, the plus at its corner */
.sk-tiles .shs-chip:not(.shs-more) { position: relative; flex-direction: column; justify-content: flex-start; gap: 6px; width: 98px; padding: 9px 6px 10px; border-radius: 18px; text-align: center; }
.sk-tiles .shs-sw { border-radius: 18px; }
.sk-tiles .shs-chip .shs-pic { width: 58px; height: 58px; border-radius: 16px; }
.sk-tiles .shs-chip > span[dir] { display: -webkit-box; width: 100%; min-height: 2.5em; font-size: 13px; line-height: 1.25; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sk-tiles .shs-chip i { position: absolute; top: 5px; inset-inline-start: 5px; width: 24px; height: 24px; box-shadow: 0 0 0 2px var(--surface); }
.sk-tiles .shs-chip.on i { background: var(--surface); }
/* a list: a row each, as wide as the page, three rows and then "+ עוד" */
.sk-list .shs-chips { flex-direction: column; flex-wrap: nowrap; }
.sk-list .shs-chips > :is(.shs-chip, .shs-sw) { width: 100%; max-width: none; }
.sk-list .shs-sw, .sk-grid .shs-sw { display: flex; }
.sk-list .shs-sw .shs-chip, .sk-grid .shs-sw .shs-chip { width: 100%; }
.sk-list .shs-chip:not(.shs-more) { gap: 10px; min-height: 52px; padding: 6px 8px 6px 10px; border-radius: 16px; }
.sk-list .shs-sw { border-radius: 16px; }
.sk-list .shs-chip .shs-pic { width: 40px; height: 40px; border-radius: 12px; }
.sk-list .shs-chip > span[dir] { flex: 1; font-size: 15px; text-align: start; }
.sk-list .shs-chip i { width: 28px; height: 28px; }
.sk-list .shs-more { align-self: center; width: auto !important; }
/* a grid: two even columns, two rows and then "+ עוד" */
.sk-grid .shs-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sk-grid .shs-chips > :is(.shs-chip, .shs-sw) { max-width: none; min-width: 0; }
.sk-grid .shs-chip:not(.shs-more) { gap: 8px; width: 100%; min-height: 48px; padding: 5px 6px 5px 8px; border-radius: 14px; }
.sk-grid .shs-sw { border-radius: 14px; }
.sk-grid .shs-chip .shs-pic { width: 34px; height: 34px; border-radius: 10px; }
.sk-grid .shs-chip > span[dir] { flex: 1; text-align: start; }
.sk-grid .shs-more { justify-content: center; border-radius: 14px; }
/* the settings' "הצעות" tab: the looks drawn small on the page's own colour; what to show, how many, where */
.slk-pv.slk-pv-light { align-items: flex-start; background: var(--bg); box-shadow: inset 0 0 0 1px var(--border); }
.slk-chips .slk-t small { display: none; }
.slk-chips .slk-pv { height: 72px; }
@media (max-height: 760px) { .slk-grid.slk-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .slk-chips .slk-o { padding: 6px; gap: 6px; } .slk-chips .slk-pv { height: 54px; padding: 4px; }
  .slk-chips .slk-pv .slk-in { width: 240px; zoom: .36; } .slk-chips .slk-t b { font-size: 13px; } .slk-chips .slk-on { top: 9px; inset-inline-start: 9px; width: 20px; height: 20px; } .sss-more { gap: 8px; margin-top: 10px; } }
@media (max-height: 760px) and (max-width: 360px) { .slk-chips .slk-pv .slk-in { zoom: .32; } }
@media (max-height: 620px) { .slk-chips .slk-pv { height: 48px; } .slk-chips .slk-t b em { display: none; } .slk-chips .slk-t b { font-size: 12px; } .sss-more { gap: 6px; margin-top: 8px; } .sss-pick .ssc-c, .sss-seg [role="radio"] { min-height: 32px; } }
.slk-pv-light .slk-in { width: 340px; }
.slk-pv-light .shop-smart { margin-top: 0; }
.slk-pv-light .shop-smart + .shop-smart { margin-top: 8px; }
.slk-pv-light :is(.sk-row, .sk-tiles) .shs-chips { margin-inline: 0; padding-inline: 0; overflow: hidden; }
.sss-more { display: grid; gap: 10px; margin-top: 12px; }
.sss-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.sss-line > b { flex: none; min-width: 5.5em; font-size: 13.5px; }
.sss-pick { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; min-width: 0; }
.sss-pick .ssc-c { min-height: 40px; padding: 4px 10px; font-size: 13.5px; }
.sss-seg { flex: 1; display: flex; gap: 3px; min-width: 0; padding: 3px; border-radius: 12px; background: var(--row-alt); }
.sss-seg [role="radio"] { flex: 1; min-width: 0; min-height: 36px; padding: 0 8px; border: 0; border-radius: 9px; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--muted);
  background: none; cursor: pointer; white-space: nowrap; }
.sss-seg [role="radio"][aria-checked="true"] { color: var(--text); background: var(--surface); box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .3); }
.sss-seg [role="radio"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* five tabs: their drawings only where there is room, their words a little closer on the narrowest */
@media (max-width: 440px) { .sst [role="tab"] svg { display: none; } }
@media (max-width: 360px) { .sst [role="tab"] { padding: 0 4px; font-size: 13px; } }
/* the notifications tab: whether they reach this phone, the reminder's days and hour */
.ssn-state { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 0 10px; padding: 6px 6px 6px 12px; border-radius: 14px; font-size: 13.5px; color: var(--muted); background: var(--row-alt); }
.ssn-state > svg { flex: none; width: 18px; height: 18px; }
.ssn-state > span { flex: 1; min-width: 0; }
.ssn-state.ok { font-weight: 700; color: color-mix(in srgb, #16a34a 80%, var(--text)); }
.ssn-state.ok > svg { padding: 3px; border-radius: 50%; color: #fff; background: #22c55e; }
.ssn-state.off { font-weight: 700; color: color-mix(in srgb, #d97706 85%, var(--text)); background: color-mix(in srgb, #f59e0b 12%, var(--surface)); }
.ssn-open { flex: none; min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 700; color: var(--accent-text, #fff); background: var(--accent); cursor: pointer; }
.ssn-when { display: grid; gap: 8px; margin: -2px 0 10px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); box-shadow: inset 0 0 0 1px var(--border); }
.ssn-when[hidden] { display: none; }
.ssn-days { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; min-width: 0; }
.ssn-days [role="checkbox"] { min-width: 0; min-height: 36px; padding: 0; border: 0; border-radius: 10px; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--muted);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); cursor: pointer; }
.ssn-days [role="checkbox"][aria-checked="true"] { color: var(--accent-text, #fff); background: var(--accent); }
:is(.ssn-days [role="checkbox"], .ssn-open):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* a row scrolled sideways (the chips' row and tiles, the lists' switch and tiles: shopping.js wireRails):
   its edges fade where more of it waits, an arrow there that fades away once a finger moved the row */
.rail { position: relative; min-width: 0; }
.slg-row > .rail { flex: 1; }
.rail > :first-child { --fs: 0px; --fe: 0px;
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--fs), #000 calc(100% - var(--fe)), transparent 100%);
  mask-image: linear-gradient(to left, transparent 0, #000 var(--fs), #000 calc(100% - var(--fe)), transparent 100%); }
.rail.more-start > :first-child { --fs: 34px; }
.rail.more-end > :first-child { --fe: 34px; }
/* (a finger moves the row sideways even from a recent search's chip: its own swipe away is off here) */
.rail .shs-sw { touch-action: pan-x pan-y; }
/* the minus just turned into the bin (shopping.js BIN_WAIT): it comes in, and takes no tap until it has */
.si-qty .si-bin-wait { animation: si-bin-in .7s ease-out both; }
@keyframes si-bin-in { from { opacity: .25; transform: scale(.7); } 60% { opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .si-qty .si-bin-wait { animation-duration: .01s; } }
.rail-arrow { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -15px; padding: 0; border: 0;
  border-radius: 50%; color: var(--text); background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 3px 12px rgba(0, 0, 0, .2), inset 0 0 0 1px var(--border);
  cursor: pointer; opacity: 0; visibility: hidden; transform: scale(.7); pointer-events: none; transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s; }
.rail-arrow svg { width: 16px; height: 16px; }
.rail-arrow.to-start { right: 0; }
.rail-arrow.to-end { left: 0; }
.rail.more-start:not(.touched) > .rail-arrow.to-start, .rail.more-end:not(.touched) > .rail-arrow.to-end {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .4s ease, transform .4s ease; }
.rail.more-end:not(.touched) > .rail-arrow.to-end { animation: rail-nudge-end 1.5s ease-in-out .5s 2; }
.rail.more-start:not(.touched) > .rail-arrow.to-start { animation: rail-nudge-start 1.5s ease-in-out .5s 2; }
@keyframes rail-nudge-end { 50% { translate: -4px 0; } }
@keyframes rail-nudge-start { 50% { translate: 4px 0; } }
@media (prefers-reduced-motion: reduce) { .rail-arrow { animation: none !important; } }
[data-a11y~="motion"] .rail-arrow { animation: none !important; }
/* on the page's top, over its colour: glass */
.sh-lists .rail-arrow { color: #fff; background: rgba(255, 255, 255, .24); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 4px 12px -4px rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.slk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.slk-o { position: relative; display: grid; align-content: start; gap: 8px; padding: 8px; border: 0; border-radius: 18px; font: inherit; text-align: start; color: var(--text);
  background: var(--row-alt); cursor: pointer; transition: box-shadow .15s, background .15s; }
.slk-o[aria-checked="true"] { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); box-shadow: inset 0 0 0 2px var(--accent); }
.slk-pv { display: flex; align-items: center; justify-content: center; height: 92px; padding: 6px; overflow: hidden; border-radius: 12px; background: var(--hero); pointer-events: none; }
.slk-in { display: block; flex: none; width: 340px; margin: 0 !important; zoom: .41; }
.slk-t { display: grid; gap: 2px; padding: 0 4px 2px; }
.slk-t b { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 14.5px; }
.slk-t b em { padding: 1px 7px; border-radius: 99px; font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.slk-t small { font-size: 12px; line-height: 1.35; color: var(--muted); }
.slk-on { position: absolute; top: 13px; inset-inline-start: 13px; display: none; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff;
  background: var(--accent); box-shadow: 0 0 0 2px #fff; }
.slk-o[aria-checked="true"] .slk-on { display: grid; }
.slk-on svg { width: 14px; height: 14px; }
@media (max-height: 760px) { .slk-t small, .ssc-what { display: none; } .slk-pv { height: 74px; } .sss-r { min-height: 52px; } }
@media (max-height: 620px) { .slk-grid { gap: 8px; } .slk-o { gap: 6px; padding: 6px; } .slk-pv { height: 56px; } .slk-t b { font-size: 13.5px; }
  .sss-t small { display: none; } .sss-r { min-height: 46px; margin-bottom: 5px; } .sss-ico { width: 32px; height: 32px; font-size: 17px; } .ssc-c { min-height: 42px; } }
.shop-ro .si-qty, .shop-ro [data-clear-cart], .shop-ro .shop-foot, .shop-ro .shop-smart { display: none; }
.shop-ro .si-check { pointer-events: none; opacity: .55; }
#shopAdd[hidden] { display: none; }
/* a list's window: its name, its colour, the first, deleting */
.shl-form { display: flex; flex-direction: column; gap: 14px; }
.shl-colors { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.shl-colors legend { margin-bottom: 8px; padding: 0; font-size: 14px; color: var(--muted); }
.shl-colors label { position: relative; cursor: pointer; }
.shl-colors input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.shl-dot { display: block; width: 34px; height: 34px; border-radius: 50%; background: var(--lc); transition: transform .15s, box-shadow .15s; }
.shl-colors input:checked + .shl-dot { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5.5px var(--lc); transform: scale(1.04); }
.shl-colors input:focus-visible + .shl-dot { outline: 2px solid var(--accent); outline-offset: 6px; }
.shl-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.shl-more .btn { display: inline-flex; align-items: center; gap: 6px; }
.shl-more .shl-del { color: var(--over-red, #dc2626); }
.shl-more .muted { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; }
.shl-more .muted svg { flex: none; color: #f59e0b; }
.shl-err { margin: -6px 0 0; color: var(--over-red, #dc2626); font-size: 13.5px; font-weight: 600; }
.shl-err[hidden] { display: none; }
/* which list, from an item's own page */
.shl-pick { display: grid; gap: 8px; }
.shl-pick-one { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 14px;
  font: inherit; font-size: 15.5px; font-weight: 700; color: var(--text); background: var(--surface); text-align: start; cursor: pointer; }
.shl-pick-one i { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--lc); }
.shl-pick-one span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shl-pick-one small { flex: none; font-size: 12.5px; font-weight: 600; color: var(--muted); }
@media (hover: hover) { .shl-pick-one:hover { background: var(--row-alt); } }
/* ---------- sharing one's data (sharing.js: the page and its window; shared.js: what someone shared) ---------- */
.pa-row-ico.share { background: linear-gradient(135deg, #ec4899, #8b5cf6); }
.shr-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; }
/* (back to the profile, where the page is opened from: at the title's start, level with it, the hero's glass) */
.shr-hero > .back-btn { align-self: start; margin-inline-end: 4px; color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.shr-hero > .back-btn:hover { background: rgba(255, 255, 255, .28); }
/* (a phone: the back button and the drawing on the first row, the title and its words under them in the
   whole width, so the title is not broken into two lines beside the button) */
@media (max-width: 640px) {
  .shr-hero { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "back art" "main main" "new new"; }
  .shr-hero > .back-btn { grid-area: back; }
  .shr-hero > .shr-art { grid-area: art; justify-self: end; }
  .shr-hero > .shr-main { grid-area: main; }
  .shr-hero > .shr-new { grid-area: new; }
  .shr-hero .shr-art-svg { width: 104px; }
}
.shr-hero .shr-main { min-width: 0; }
.shr-hero .hero-sub { display: block; margin-top: 4px; }
.shr-art-svg { display: block; width: 132px; height: auto; }
.shr-new { grid-column: 1 / -1; justify-self: stretch; justify-content: center; gap: 8px; min-height: 48px; border: 0; border-radius: 15px; font-size: 16px; font-weight: 800;
  color: #0a4d39; background: #fff; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .5); }
@media (min-width: 641px) { .shr-new { justify-self: start; padding-inline: 26px; } }
.shr-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 900px) { .shr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.shr-card { display: flex; flex-direction: column; gap: 12px; margin: 0; container-type: inline-size; }
.shr-card > header { display: flex; align-items: center; gap: 10px; min-width: 0; }
.shr-card > header > div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.shr-card > header b { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
/* (the top line: the name or the address, and the badge at its end on the same line) */
.shr-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.shr-top b { flex: 1; min-width: 0; }
.shr-card > header small { font-size: 12.5px; color: var(--muted); }
.shr-mail { text-align: end; }
.shr-av { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; color: #fff; font-size: 18px; font-weight: 800; background: var(--av);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14); }
.shr-av.big { width: 56px; height: 56px; font-size: 24px; }
.shr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.shr-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--row-alt); }
.shr-chip svg { flex: none; color: var(--accent); }
.shr-chip.sens { background: color-mix(in srgb, #f59e0b 14%, var(--row-alt)); }
.shr-chip.sens svg { color: #d97706; }
.shr-badge { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 700;
  color: color-mix(in srgb, #3b82f6 80%, var(--text)); background: color-mix(in srgb, #3b82f6 13%, transparent); }
.shr-badge.edit { color: color-mix(in srgb, #a855f7 80%, var(--text)); background: color-mix(in srgb, #a855f7 14%, transparent); }
.shr-state { font-weight: 700; }
.shr-state.wait { color: #d97706; }
.shr-state.on { color: color-mix(in srgb, #16a34a 85%, var(--text)); }
.shr-state.off { color: var(--muted); }
.shr-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.shr-acts .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; margin: 0; padding-inline: 12px; white-space: nowrap; }
.shr-acts .wide { grid-column: 1 / -1; }
/* (a card too narrow for two whole: one under the other; in em, so a larger text goes down a column sooner) */
@container (max-width: 19.5em) { .shr-acts { grid-template-columns: minmax(0, 1fr); } }
.shr-acts .shr-stop, .shr-acts .shr-leave { color: var(--over-red, #dc2626); }
.shr-log { display: grid; gap: 2px; margin: 0; padding: 8px 10px; border-radius: 12px; list-style: none; background: var(--row-alt); }
.shr-log[hidden] { display: none; }
.shr-log li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 13px; border-top: 1px solid var(--border); }
.shr-log li:first-child { border-top: 0; }
.shr-log time { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.shr-log .none { color: var(--muted); }
.shr-empty p { margin: 0; color: var(--muted); line-height: 1.6; }
.shr-trust { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 0; padding: 12px 14px; border-radius: 14px; font-size: 13px; line-height: 1.55;
  color: var(--muted); background: color-mix(in srgb, #22c55e 8%, transparent); }
.shr-trust svg { flex: none; color: #16a34a; }
.shr-trust p { margin: 0; }
/* an invitation opened */
.shr-accept { display: flex; flex-direction: column; gap: 14px; }
.shr-acc-head { display: flex; align-items: center; gap: 12px; }
.shr-acc-head > div { display: flex; flex-direction: column; }
.shr-acc-head b { font-size: 19px; }
.shr-acc-head span { color: var(--muted); }
.shr-acc-level { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 14px; line-height: 1.55; }
.shr-check { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border-radius: 12px; font-size: 14px; line-height: 1.5; background: var(--row-alt); cursor: pointer; }
.shr-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); }
.shr-check.sens { background: color-mix(in srgb, #f59e0b 12%, var(--row-alt)); }
.shr-err { margin: -4px 0 0; color: var(--over-red, #dc2626); font-size: 13.5px; font-weight: 600; }
.shr-err[hidden] { display: none; }
/* the window: its steps, what to share, the consent and the signature */
.shw { display: flex; flex-direction: column; gap: 14px; }
/* the window's steps: circles joined by a line that fills green as they are done, each one's name under it */
.shw-steps { --g: 4px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); margin: 6px 0 4px; padding: 0; list-style: none; }
.shw-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center;
  font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--muted); }
/* (the line to the step before: from this circle's edge to that one's, across the gap) */
.shw-steps li + li::before { content: ""; position: absolute; top: 15px; height: 3px; margin-top: -1.5px; border-radius: 3px;
  inset-inline-start: calc(-50% - var(--g) + 21px); inset-inline-end: calc(50% + 21px); background: var(--border); transition: background .3s; }
.shw-steps li.on::before, .shw-steps li.done::before { background: #16a34a; }
.shw-steps i { position: relative; display: grid; place-items: center; flex: none; box-sizing: border-box; width: 30px; height: 30px; border-radius: 50%;
  font-style: normal; font-size: 13.5px; font-weight: 800; color: var(--muted); border: 2px solid var(--border); background: var(--surface); }
.shw-steps span { max-width: 100%; overflow-wrap: anywhere; }
.shw-steps li.on { color: var(--text); font-weight: 800; }
.shw-steps li.on i { color: #fff; border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent);
  animation: shw-step-on .32s cubic-bezier(.2, .8, .3, 1.2); }
.shw-steps li.done { color: var(--text); }
.shw-steps li.done i { color: #fff; border-color: #16a34a; background: #16a34a; }
@keyframes shw-step-on { from { transform: scale(.7); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 22%, transparent); } }
@media (prefers-reduced-motion: reduce) { .shw-steps li.on i { animation: none; } }
.shw-note { margin: -6px 0 0; font-size: 13px; line-height: 1.55; }
.shw-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0 14px 14px; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
/* (the title a head inside the card, not a gap in its frame: a heading, as WebKit draws a legend on the frame whatever its float) */
.shw-gh { display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: calc(100% + 28px); margin: 0 -14px 6px; padding: 11px 14px;
  font-size: 15px; font-weight: 800; color: var(--text); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--gc, var(--accent)) 9%, transparent); }
.shw-gh i { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 9px; color: #fff; background: var(--gc, var(--accent)); }
/* the long steps' buttons at the window's foot, in sight as it scrolls, over a line */
/* (stuck to the window's very foot: into the body's bottom padding, --pb, which the home bar widens on a phone;
   the buttons two equal halves, as the window's buttons with a cancel are) */
#dialog .actions.shw-foot { --pb: 20px; z-index: 3; bottom: calc(-1 * var(--pb)); margin: 4px -20px calc(-1 * var(--pb)); padding: 12px 20px var(--pb);
  border-top: 1px solid var(--border); }
#dialog .actions.shw-foot { flex-wrap: nowrap; }
#dialog .actions.shw-foot > .btn { flex: 1 1 0; min-width: 0; min-height: 52px; padding-inline: 18px; font-size: 16px; border-radius: 15px; white-space: nowrap; }
@media (max-width: 600px) { #dialog .actions.shw-foot { --pb: calc(20px + env(safe-area-inset-bottom)); } }
/* the signing at work: a page whose signature writes itself again and again, a shield on its corner
   that breathes; done, the shield green with a tick */
.shw-busy { gap: 6px; padding: 24px; text-align: center; z-index: 30; background: color-mix(in srgb, var(--surface) 86%, transparent); }
.shw-busy p { display: inline-flex; align-items: baseline; font-size: 16px; }
.shw-busy small { font-size: 12.5px; color: var(--muted); }
.sb-art { position: relative; display: block; margin-bottom: 10px; }
.sb-paper { fill: var(--surface); stroke: var(--border); stroke-width: 2; }
.sb-lines { fill: none; stroke: color-mix(in srgb, var(--muted) 45%, transparent); stroke-width: 4; stroke-linecap: round; }
.sb-base { fill: none; stroke: color-mix(in srgb, var(--muted) 35%, transparent); stroke-width: 2; stroke-dasharray: 3 4; }
.sb-sign { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--len, 120); stroke-dashoffset: var(--len, 120); animation: sb-write 2.1s ease-in-out infinite; }
.sb-badge { position: absolute; inset-inline-start: -14px; bottom: -8px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: #fff; background: var(--accent); box-shadow: 0 0 0 5px var(--surface), 0 6px 16px rgba(0, 0, 0, .25); animation: sb-breathe 1.6s ease-in-out infinite; }
.shw-busy.ok .sb-badge { background: #16a34a; animation: sb-ok .42s cubic-bezier(.2, .8, .3, 1.35); }
.shw-busy.ok .sb-sign { animation: none; stroke-dashoffset: 0; }
.shw-busy.ok p { color: color-mix(in srgb, #16a34a 85%, var(--text)); }
@keyframes sb-write { 0% { stroke-dashoffset: var(--len, 120); opacity: 1; } 60% { stroke-dashoffset: 0; opacity: 1; } 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes sb-breathe { 0%, 100% { transform: scale(.94); } 50% { transform: scale(1.06); } }
@keyframes sb-ok { from { transform: scale(.6); } }
@media (prefers-reduced-motion: reduce) { .sb-sign, .sb-badge { animation: none; } .sb-sign { stroke-dashoffset: 0; } }
:root[data-a11y~="motion"] :is(.sb-sign, .sb-badge) { animation: none; }
:root[data-a11y~="motion"] .sb-sign { stroke-dashoffset: 0; }
/* until when: pills to tap (a list's wheel on the iPhone took the next tap only to close itself) */
.shw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.shw-chips label { position: relative; }
.shw-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.shw-chips span { display: block; padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 700; white-space: nowrap; color: var(--muted); background: var(--row-alt); cursor: pointer; }
.shw-chips input:checked + span { color: #fff; background: var(--gc, var(--accent)); }
.shw-chips input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.shw-part { display: flex; align-items: center; gap: 10px; padding: 6px 2px; color: var(--text); }
.shw-part-ico { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; color: var(--accent); background: var(--row-alt); }
.shw-part-t { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; }
.shw-part-t small { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: #d97706; }
.shw-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.shw-row > span { display: flex; flex-direction: column; font-size: 14px; font-weight: 700; }
.shw-row > span small { font-size: 12px; font-weight: 400; color: var(--muted); }
.shw-row[hidden], .shw-lists[hidden] { display: none; }
.shw-row select { min-height: 40px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 12px; font: inherit; color: var(--text); background: var(--surface); }
.shw-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; padding: 3px; border-radius: 13px; background: var(--row-alt); }
.shw-seg label { position: relative; }
.shw-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.shw-seg span { display: block; padding: 7px 11px; border-radius: 10px; font-size: 13px; font-weight: 700; text-align: center; white-space: nowrap; color: var(--muted); cursor: pointer; }
.shw-seg input:checked + span { color: var(--text); background: var(--surface); box-shadow: 0 1px 4px rgba(0, 0, 0, .16); }
.shw-seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.shw-lists { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.shw-list { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 700; background: var(--row-alt); cursor: pointer; }
.shw-list input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.shw-list i { width: 10px; height: 10px; border-radius: 50%; background: var(--lc); }
.shw-list:has(input:checked) { color: #fff; background: var(--lc); }
.shw-list:has(input:checked) i { background: #fff; }
.shw-list:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.shw-consent { max-height: 34vh; overflow-y: auto; padding: 14px 16px; border-radius: 14px; font-size: 13.5px; line-height: 1.65; background: var(--row-alt);
  box-shadow: inset 0 0 0 1px var(--border); overscroll-behavior: contain; }
.shw-consent h3 { margin: 0 0 8px; font-size: 15.5px; }
.shw-consent p { margin: 0 0 8px; }
.shw-consent small { color: var(--muted); }
.shw-consent:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shw-sign { position: relative; display: flex; flex-direction: column; gap: 6px; }
.shw-sign-head { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--muted); }
.shw-pad { display: block; width: 100%; height: 150px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--border); touch-action: none; cursor: crosshair; }
.shw-pad-hint { position: absolute; inset-inline: 0; bottom: 18px; text-align: center; font-size: 14px; color: #94a3b8; pointer-events: none;
  border-top: 1.5px dashed #cbd5e1; margin-inline: 22px; padding-top: 6px; }
.shw-sign.inked .shw-pad-hint { visibility: hidden; }
.shw-wait { padding: 30px 0; text-align: center; color: var(--muted); }
/* what someone shared with me: a bar on top that stays (who, edit or not, the parts, the day's arrows), then the part */
.shd-bar { position: sticky; top: var(--top-h, 0px); z-index: 12; display: flex; flex-direction: column; gap: 10px; margin: -18px -16px 0; padding: 12px 16px 12px;
  color: #fff; background: var(--hero); border-radius: 0 0 22px 22px; box-shadow: 0 12px 26px -18px rgba(0, 0, 0, .7); }
.shd-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.shd-back, .shd-lists { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.shd-name { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; flex: 1; min-width: 0; }
.shd-name .shd-h { max-width: 100%; margin: 0; overflow: hidden; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.shd-bar .shr-badge { color: #fff; background: rgba(255, 255, 255, .18); }
.shd-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.shd-tabs::-webkit-scrollbar { display: none; }
.shd-tab { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 38px; padding: 6px 14px; border: 0; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 700;
  color: #fff; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); cursor: pointer; }
.shd-tab.on { color: #0a4d39; background: #fff; }
.shd-days { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px; border-radius: 14px; background: rgba(255, 255, 255, .1); }
.shd-days b { font-size: 15px; }
.shd-days.plain { justify-content: center; min-height: 42px; }
.shd-arrow { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 12px; color: #fff; background: rgba(255, 255, 255, .14); cursor: pointer; }
.shd-arrow:disabled { opacity: .35; cursor: default; }
:is(.shd-back, .shd-lists, .shd-tab, .shd-arrow):focus-visible { outline: 3px solid #fef08a; outline-offset: 2px; }
/* an iPad and a computer (the user: "too crowded there, show it nicer"): more room in the bar; who on one
   line (the name, then whether I may edit, beside it), and the parts beside the day's row, under it */
@media (min-width: 700px) {
  .shd-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px 22px; padding: 20px 26px 20px; border-radius: 0 0 28px 28px; }
  .shd-who { grid-column: 1 / -1; gap: 14px; }
  .shd-back, .shd-lists { width: 44px; height: 44px; }
  .shd-who .shr-av { width: 52px; height: 52px; font-size: 22px; }
  .shd-name { flex-direction: row; align-items: center; gap: 14px; }
  .shd-name .shd-h { flex: 0 1 auto; font-size: 25px; }
  .shd-name .shr-badge { flex: none; padding: 5px 12px; font-size: 13.5px; }
  .shd-tabs { gap: 8px; }
  .shd-tab { min-height: 46px; padding: 8px 20px; gap: 8px; font-size: 15.5px; }
  .shd-days, .shd-days.plain { min-height: 50px; padding: 3px; border-radius: 16px; }
  .shd-days b { font-size: 16px; }
  .shd-arrow { width: 44px; height: 44px; }
  .shd-body { gap: 16px; padding-top: 20px; }
  /* (the protein, carbs and fat: three tiles side by side, each its number by its name, not a name at one
     end of the wide card and its number at the other) */
  .shd-hero { gap: 24px; padding: 20px 24px; }
  .shd-hero-t p { margin-bottom: 14px; font-size: 16px; }
  .shd-macros { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 600px; }
  .shd-macros span { padding: 10px 14px; border-radius: 14px; font-size: 14px; background: var(--row-alt); }
}
.shd-body { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; transition: opacity .2s; }
.shd-body.loading { opacity: .45; }
.shd-body > .panel { margin: 0; }
.shd-hero { display: flex; align-items: center; gap: 16px; }
.shd-ring { position: relative; flex: none; width: 116px; height: 116px; }
.shd-ring svg { width: 100%; height: 100%; }
.shd-ring-track { stroke: var(--track); }
.shd-ring-arc { stroke: #22c55e; }
.shd-ring-arc.over { stroke: var(--warn, #f59e0b); }
.shd-ring > span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.shd-ring b { font-size: 22px; font-variant-numeric: tabular-nums; }
.shd-ring small { font-size: 11.5px; color: var(--muted); }
.shd-hero-t { flex: 1; min-width: 0; }
.shd-hero-t p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; }
.shd-macros { display: grid; gap: 5px; }
.shd-macros span { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.shd-macros i { width: 9px; height: 9px; border-radius: 50%; background: var(--mc); }
.shd-macros b { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.shd-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.shd-cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.shd-card { position: relative; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 12px; overflow: hidden; }
.shd-card > svg { color: var(--accent); margin-bottom: 4px; }
.shd-card b { font-size: 19px; font-variant-numeric: tabular-nums; }
.shd-card small { font-size: 12px; color: var(--muted); }
.shd-card.dim { opacity: .7; }
.shd-water > svg { color: #38bdf8; }
.shd-bar-p { display: block; height: 6px; margin-top: 8px; border-radius: 99px; background: linear-gradient(90deg, #38bdf8 var(--p), var(--track) var(--p)); }
.shd-glass { align-self: flex-start; margin-top: 8px; gap: 4px; }
.shd-meals { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 900px) { .shd-meals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.shd-meal { margin: 0; }
.shd-meal header { display: flex; align-items: center; gap: 8px; }
.shd-meal h3 { margin: 0; font-size: 16px; }
.shd-meal header span { margin-inline-start: auto; font-size: 13px; color: var(--muted); }
.shd-add { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; color: #fff; background: var(--accent); cursor: pointer; }
.shd-meal ul { display: grid; gap: 2px; margin: 10px 0 0; padding: 0; list-style: none; }
.shd-meal li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--border); }
.shd-meal li:first-child { border-top: 0; }
.shd-meal .shd-pic { flex: none; width: 40px; height: 40px; border-radius: 11px; }
.shd-food { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.shd-food b { overflow: hidden; font-size: 14.5px; text-overflow: ellipsis; white-space: nowrap; }
.shd-food small { font-size: 12px; color: var(--muted); }
.shd-kcal { flex: none; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.shd-del { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; color: var(--muted); background: var(--row-alt); cursor: pointer; }
.shd-note { display: flex; gap: 10px; align-items: flex-start; }
.shd-note svg { flex: none; color: var(--accent); }
.shd-note p { margin: 0; line-height: 1.55; white-space: pre-wrap; }
.shd-empty p, .shd-gone h3 { margin: 0; color: var(--muted); line-height: 1.6; }
.shd-gone { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 18px; text-align: center; }
.shd-gone > svg { color: var(--muted); }
.shd-weight-now { display: flex; align-items: baseline; gap: 10px; }
.shd-weight-now b { font-size: 30px; font-variant-numeric: tabular-nums; }
.shd-weight-now small { color: var(--muted); }
.shd-chart { display: block; width: 100%; height: 150px; margin: 10px 0; direction: ltr; overflow: visible; }
.shd-line { fill: none; stroke: #22c55e; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.shd-area { fill: color-mix(in srgb, #22c55e 16%, transparent); stroke: none; }
/* (the last weighing's dot: a round stroke cap, round however wide the chart is stretched) */
.shd-dot, .shd-dot-ring { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.shd-dot { stroke: #22c55e; stroke-width: 9; }
.shd-dot-ring { stroke: var(--surface); stroke-width: 13; }
.shd-one { display: flex; align-items: center; gap: 10px; margin: 14px 0; padding: 12px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; color: var(--muted); background: var(--row-alt); }
.shd-one svg { flex: none; color: #22c55e; }
.shd-goal { stroke: #f59e0b; stroke-width: 1.5; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.shd-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.shd-stats span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; text-align: center; background: var(--row-alt); }
.shd-stats b { font-size: 15px; font-variant-numeric: tabular-nums; }
.shd-stats small { font-size: 11.5px; color: var(--muted); }
.shd-prof h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 16px; }
.shd-prof h3 svg { color: var(--accent); }
.shd-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.shd-tile { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border-radius: 12px; background: var(--row-alt); }
.shd-tile small { font-size: 12px; color: var(--muted); }
.shd-tile b { font-size: 14.5px; }
.shd-med h3 svg { color: #d97706; }
.shd-mob { margin: 10px 0 0; font-size: 14px; line-height: 1.55; }
/* the list as a PDF (shopping.js listSheet): an A4 report, each shelf a framed table with a box to tick */
.slp-print .slp-shelf h2 { display: flex; align-items: center; gap: 7px; }
.slp-print .slp-wide { grid-column: 1 / -1; }
.slp-print .slp-shelf h2 small { margin-inline-start: auto; font-size: 11.5px; font-weight: 600; color: #4b6b60; }
.slp-print .slp-shelf h2 svg { flex: none; }
.slp-print .pr-day td { padding: 6px 8px; font-size: 12.5px; vertical-align: middle; }
.slp-print .pr-day td.slp-box { width: 14px; padding-inline-end: 0; }
.slp-print .slp-box i { display: block; width: 13px; height: 13px; border: 1.6px solid #64748b; border-radius: 3.5px; }
.slp-print .pr-day td.slp-name { width: auto; text-align: start; }
.slp-print .slp-name small, .slp-print .slp-price small { display: block; font-size: 10px; color: #6b7280; }
.slp-print .pr-day td.slp-qty { width: 34px; font-weight: 800; color: #0b5e45; white-space: nowrap; }
.slp-print .pr-day td.slp-price { width: 66px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.slp-print .pr-day td.slp-price small { font-weight: 400; }
/* an iPad and a computer: the list beside where the basket costs least, and that part stays in view */
@media (min-width: 900px) {
  .shop-cols { grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); }
  .shop-side { position: sticky; top: calc(var(--top-h, 0px) + 12px); }
  .shop-side > :first-child { margin-top: 18px; }
  /* nothing beside the list yet (an empty list, no prices): the list's part takes the whole width, and the
     empty list's card lays its picture beside its words */
  .shop-cols:not(:has(> .shop-side > *)) { grid-template-columns: minmax(0, 1fr); }
  .shop-cols:not(:has(> .shop-side > *)) > .shop-side { display: none; }
  .shop-empty { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 420px); justify-content: center; align-items: center; gap: 6px 36px; padding: 18px 28px; text-align: start; }
  .shop-empty .shp-scene { grid-row: span 2; width: 100%; }
  .shop-empty h3 { align-self: end; margin: 0; }
  .shop-empty p { align-self: start; }
  .shop-hero .sh-art { width: 170px; }
}
/* the product's and the food's page: to the shopping list, a row of its own under the two */
.portion-actions:has(.to-shop) { flex-wrap: wrap; }
.portion-actions .btn.to-shop { flex: 1 1 100%; min-height: 44px; font-size: 15px; color: color-mix(in srgb, #16a34a 80%, var(--text)); }
.portion-actions .btn.to-shop.on { border-color: #22c55e; background: color-mix(in srgb, #22c55e 10%, var(--surface)); }

/* ---------- a day not logged (unlogged.js): its card over the meals, the offer at their end, its window ---------- */
.ul-card .tl-card { background: color-mix(in srgb, #8b5cf6 7%, var(--surface)); box-shadow: var(--shadow), inset 0 0 0 1px color-mix(in srgb, #8b5cf6 22%, transparent); }
.ul-words { margin: 8px 0 2px; font-size: 15px; font-weight: 700; line-height: 1.5; }
.ul-small { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.ul-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ul-act { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; font: inherit; font-size: 14px; font-weight: 700;
  color: var(--text); background: var(--surface); cursor: pointer; }
.ul-act[data-unlogged-off] { color: color-mix(in srgb, #8b5cf6 75%, var(--text)); }
.ul-offer-btn { display: flex; align-items: center; gap: 10px; width: 100%; border: 1px dashed color-mix(in srgb, #8b5cf6 45%, var(--border)); font: inherit; text-align: start; color: var(--text);
  background: color-mix(in srgb, #8b5cf6 4%, var(--surface)); box-shadow: none; cursor: pointer; }
.ul-offer-t { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
.ul-offer-t b { font-size: 15.5px; }
.ul-offer-t small { font-size: 13px; color: var(--muted); }
.ul-offer-btn > svg { flex: none; color: #8b5cf6; }
.ul-dlg { display: flex; flex-direction: column; gap: 12px; }
.ul-art { display: grid; place-items: center; }
.ul-lead { margin: 0; font-size: 15px; line-height: 1.6; text-align: center; }
.ul-q { margin: 4px 0 0; font-size: 15px; font-weight: 800; }
.ul-q small { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ul-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ul-sizes label { position: relative; }
.ul-sizes input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ul-sizes span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 100%; box-sizing: border-box; padding: 12px 6px; border-radius: 16px;
  font-size: 13px; font-weight: 700; line-height: 1.3; text-align: center; color: var(--text); background: var(--row-alt); box-shadow: inset 0 0 0 1.5px transparent; cursor: pointer; }
.ul-sizes span svg { color: #8b5cf6; }
.ul-sizes input:checked + span { background: color-mix(in srgb, #8b5cf6 14%, var(--row-alt)); box-shadow: inset 0 0 0 2px #8b5cf6; }
.ul-sizes input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.ul-off { align-self: center; padding: 6px 10px; border: 0; font: inherit; font-size: 14px; font-weight: 700; color: color-mix(in srgb, #8b5cf6 75%, var(--text)); background: none; cursor: pointer; }

/* ---------- an invitation to share, over the page once on the device it is for (sharing.js sharePopup) ----------
   a card in the middle of the screen, not a sheet: a coloured band with the two people and a heart, what is
   shared as tiles; its colours by the sharer (a woman's purple, pink and orange; a man's Biskal green) */
dialog#dialog.shi-dlg { width: min(360px, calc(100vw - 32px)); max-width: none; margin: auto; border-radius: 28px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, .35); }
@media (max-width: 600px) {
  dialog#dialog.shi-dlg { width: min(360px, calc(100vw - 32px)); margin: auto; border-radius: 28px; max-height: calc(100dvh - 32px); }
  dialog#dialog.shi-dlg[open] { animation: shi-pop .42s cubic-bezier(.2, .9, .3, 1.2); }
  dialog#dialog.shi-dlg.closing { animation: dlg-pop-out .19s ease-in forwards; }
}
@keyframes shi-pop { from { opacity: 0; transform: translateY(24px) scale(.92); } }
dialog#dialog.shi-dlg > .dlg-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
dialog#dialog.shi-dlg > .dlg-body { padding: 0; }
.shi-m { --c1: #0b6e50; --c2: #12a07a; --c3: #38bdf8; --av1: #0e7a58; --av2a: #fbbf24; --av2b: #f97316; --k: #0e7a58; --b1: #0e7a58; --b2: #14b8a6; }
.shi-f { --c1: #7c3aed; --c2: #db2777; --c3: #f97316; --av1: #5b21b6; --av2a: #38bdf8; --av2b: #2563eb; --k: #7c3aed; --b1: #7c3aed; --b2: #db2777; }
.shi { position: relative; text-align: center; }
.shi-top { position: relative; height: 150px; background: linear-gradient(135deg, var(--c1), var(--c2) 60%, var(--c3)); }
.shi-top::after { content: ""; position: absolute; inset: auto 0 -1px; height: 40px; background: var(--surface); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.shi-spark { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .75); }
.shi-spark.a { width: 8px; height: 8px; top: 30px; right: 40px; } .shi-spark.b { width: 5px; height: 5px; top: 70px; left: 60px; } .shi-spark.c { width: 6px; height: 6px; top: 24px; left: 120px; }
.shi-avs { position: absolute; left: 50%; bottom: -6px; z-index: 2; display: flex; align-items: center; transform: translateX(-50%); }
.shi-av { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; font-size: 30px; font-weight: 800; color: #fff; box-shadow: 0 0 0 5px var(--surface), 0 10px 24px rgba(0, 0, 0, .2); }
.shi-av.s { background: var(--av1); }
.shi-av.y { background: linear-gradient(135deg, var(--av2a), var(--av2b)); }
.shi-heart { position: relative; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; margin: 0 -10px; border-radius: 50%; background: var(--surface); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.shi-x { position: absolute; top: 12px; left: 12px; z-index: 3; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .22); cursor: pointer; }
.shi-body { padding: 18px 22px 16px; }
.shi-kicker { display: inline-block; margin-bottom: 6px; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: var(--k); background: color-mix(in srgb, var(--k) 13%, transparent); }
.shi-t { margin: 0; font-size: 22px; line-height: 1.3; }
.shi-sub { margin: 6px 0 14px; font-size: 14.5px; color: var(--muted); }
.shi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.shi-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 12px 4px 10px; border-radius: 18px; font-size: 12.5px; font-weight: 700; line-height: 1.25; background: var(--row-alt); }
.shi-tile i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; color: #fff; }
.shi-tile span { overflow-wrap: anywhere; }
.shi-tile small { font-size: 11px; font-weight: 700; color: var(--muted); }
.shi-trust { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 12px; font-size: 12.5px; color: color-mix(in srgb, #16a34a 80%, var(--text)); }
.shi-trust svg { flex: none; }
.shi-go { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; border: 0; border-radius: 18px; font: inherit; font-size: 17px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--b1), var(--b2)); box-shadow: 0 12px 26px color-mix(in srgb, var(--b1) 38%, transparent); cursor: pointer; }
.shi-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; font-size: 14.5px; font-weight: 700; color: var(--muted); }
.shi-row button { padding: 6px; border: 0; font: inherit; color: inherit; background: none; cursor: pointer; }
.shi-row .shi-later { color: var(--text); }
.shi-bell { display: inline-flex; align-items: center; gap: 5px; margin: 2px 0 0; font-size: 12px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { dialog#dialog.shi-dlg[open] { animation: none; } }
html[data-a11y~="motion"] dialog#dialog.shi-dlg[open] { animation: none; }

/* the profile menu whole on a short phone too, with the way to what is shared with me at its end: its rows
   closer, and on the shortest their small second lines left out */
/* (measured as it opens, settings.js fitMenu: as close as it needs to be, no closer) */
#profileMenu.pm-t1 > .menu-item, #profileMenu.pm-t1 > .menu-signout { padding-block: 5px; }
#profileMenu.pm-t1 .menu-head { padding-block: 6px 10px; }
#profileMenu.pm-t1 > .menu-signout { margin-top: 6px; }
#profileMenu.pm-t2 > .menu-item small { display: none; }
#profileMenu.pm-t3 > .menu-item, #profileMenu.pm-t3 > .menu-signout { padding-block: 3px; }
#profileMenu.pm-t3 > .menu-item .badge-icon { width: 28px !important; height: 28px !important; }
#profileMenu.pm-t3 > .menu-item .badge-icon svg { width: 28px; height: 28px; }

/* the invitation card whole on a phone (the user: "too big, it goes under the system bar"): inside the safe
   area (the status bar and the home bar), a lower band and smaller circles, and with more than three parts
   the tiles as short rows in two columns */
dialog#dialog.shi-dlg { inset: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px); }
@media (max-width: 600px) {
  dialog#dialog.shi-dlg { max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px); }
}
.shi-top { height: 118px; }
.shi-top::after { height: 32px; }
.shi-av { width: 64px; height: 64px; font-size: 26px; box-shadow: 0 0 0 4px var(--surface), 0 8px 20px rgba(0, 0, 0, .2); }
.shi-av.y svg { width: 34px; height: 34px; }
.shi-heart { width: 34px; height: 34px; margin: 0 -9px; }
.shi-heart svg { width: 19px; height: 19px; }
.shi-x { top: 10px; left: 10px; width: 32px; height: 32px; }
.shi-body { padding: 14px 18px 12px; }
.shi-kicker { margin-bottom: 4px; padding: 3px 11px; font-size: 12px; }
.shi-t { font-size: 20px; }
.shi-sub { margin: 4px 0 12px; font-size: 14px; }
.shi-tile { padding: 10px 4px 9px; gap: 5px; }
.shi-tile i { width: 36px; height: 36px; border-radius: 12px; }
.shi-grid.many { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.shi-grid.many .shi-tile { flex-direction: row; align-items: center; gap: 8px; padding: 7px 9px; text-align: start; border-radius: 14px; }
.shi-grid.many .shi-tile i { flex: none; width: 30px; height: 30px; border-radius: 10px; }
.shi-grid.many .shi-tile i svg { width: 17px; height: 17px; }
.shi-grid.many .shi-tile > div { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.shi-grid.many .shi-tile span { font-size: 12px; line-height: 1.25; }
.shi-grid.many .shi-tile small { font-size: 10.5px; }
.shi-trust { margin-bottom: 10px; }
.shi-go { min-height: 50px; border-radius: 16px; font-size: 16.5px; }
.shi-row { margin-top: 6px; }
/* (the shortest phones: a lower band, and the subline and the bell's line left out) */
@media (max-height: 640px) {
  .shi-top { height: 96px; }
  .shi-av { width: 56px; height: 56px; font-size: 23px; }
  .shi-sub, .shi-bell, .shi-kicker { display: none; }
  .shi-t { margin-bottom: 10px; }
}

/* the health cards (the user's picture of "מעקב ובריאות"): each tinted by its colour (weight blue, activity
   green, sleep violet), its head a sign in a circle of that colour, the title and "פרטים" at its end; the
   weight's numbers and the night's arc in the middle */
.hc-blue { --hc: #3b82f6; } .hc-green { --hc: #22c55e; } .hc-violet { --hc: #8b5cf6; }
.hc-card { background: linear-gradient(165deg, color-mix(in srgb, var(--hc) 14%, var(--surface)), var(--surface) 58%);
  border: 1px solid color-mix(in srgb, var(--hc) 24%, var(--border)); }
.dash-card header.hc-head { display: flex; align-items: center; gap: 10px; }
.hc-head h3 { flex: 1; min-width: 0; margin: 0; }
.hc-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #fff;
  background: linear-gradient(150deg, color-mix(in srgb, var(--hc) 70%, #fff), var(--hc)); box-shadow: 0 6px 14px -6px var(--hc); }
.hc-head .more { flex: none; }
.hc-center { flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.hc-center .tile-num { align-items: center; text-align: center; }
.weight-tile .hc-center .tile-num b { font-size: 40px; }
.sleep-arc { position: relative; display: block; width: 156px; height: 156px; }
.sleep-arc svg { display: block; width: 100%; height: 100%; }
.sa-c svg { width: 24px; height: 24px; }
.sa-c b { font-size: 32px; font-weight: 900; font-variant-numeric: tabular-nums; }
.sa-c small { font-size: 12.5px; color: var(--muted); }
.hc-card { container-type: inline-size; }
.hc-head h3 { word-break: keep-all; overflow-wrap: normal; }
/* (a half of a phone's width: the sign smaller, "פרטים" its arrow only, so the title stays whole) */
@container (max-width: 280px) {
  .dash-card header.hc-head { gap: 8px; }
  .hc-ico { width: 34px; height: 34px; }
  .hc-ico svg { width: 18px; height: 18px; }
  .hc-head h3 { font-size: 15px; }
  .hc-head .more { font-size: 0; }
  .weight-tile .hc-center .tile-num b { font-size: 32px; }
}
.sleep-when { margin-top: -6px; font-size: 14px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }

/* the water card's row look (the user's picture): the day's water as a ring over the row of glasses, a drop
   over its amount; under the row the last drinks, the latest first */
.water-tile.wr-look { background: linear-gradient(165deg, color-mix(in srgb, #3b82f6 14%, var(--surface)), var(--surface) 60%); border: 1px solid color-mix(in srgb, #3b82f6 24%, var(--border)); }
.wring { position: relative; display: block; width: min(190px, 70%); aspect-ratio: 1; margin: 2px auto 6px; color: inherit; text-decoration: none; }
.wring > svg { display: block; width: 100%; height: 100%; }
.wring-c svg { width: 26px; height: 26px; }
.wring-arc { transition: stroke-dashoffset .8s cubic-bezier(.22, 1, .36, 1); }
.wring-in, .sa-in { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
/* (the words in a box of their own in the ring's middle, which ring-fit.js shrinks as a whole when the
   text is larger, an iPad's "מתוך 2 ליטר" crossed the ring; the hole keeps it centred) */
.wring-c, .sa-c { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; line-height: 1.1; white-space: nowrap; }
.water-tile .wring-c b { font-size: 38px; font-weight: 900; font-variant-numeric: tabular-nums; }
.wring-c > span { font-size: 13px; color: var(--muted); }
.wring-c .wr-won { font-style: normal; font-size: 12.5px; font-weight: 800; color: #f5b70a; }
.wr-recent { display: grid; gap: 8px; margin-top: 10px; }
.wr-recent h4 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14.5px; }
.wr-recent h4 svg { color: #60a5fa; }
.wr-recent .drink-list li.k-water .dl-ico { color: #3b82f6; background: color-mix(in srgb, #3b82f6 16%, transparent); }
@media (prefers-reduced-motion: reduce) { .wring-arc { transition: none; } }
/* the one-glass look beside a taller card (an iPad, a computer: the quality's breakdown): the glass and its
   amount grow into the room, in its middle, and the last drink, the other drinks and the buttons follow
   (the user: "look at that huge gap", the room was all between the last drink and the buttons) */
@media (min-width: 761px) {
  .water-tile:not(.wr-look) .water-go { flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 0; text-align: center; }
  .water-tile:not(.wr-look) .water-go .glass-art { width: clamp(70px, 40%, 150px); height: auto; }
  .water-tile:not(.wr-look) .water-go .tile-num { align-items: center; text-align: center; }
  .water-tile:not(.wr-look) .water-go .tile-num b { font-size: 40px; }
  .water-tile:not(.wr-look) > .tile-actions { margin-top: 12px; }
}

/* the Apple Watch's menu under "שעון ובריאות" (settings.js watchMenu): its own block under the health card */
.watch-menu { display: grid; gap: 10px; margin-top: 18px; }
.watch-menu > .set-group-title { display: flex; align-items: center; gap: 8px; margin: 0; }
.wm-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: #fff; background: linear-gradient(150deg, #34d399, #0ea5a4); }
.wm-ico svg { width: 15px; height: 15px; }
.watch-menu .set-list { margin: 0; }
.watch-menu .set-group-title { padding-inline: 4px; }
.watch-every { display: contents; }
.watch-every[hidden] { display: none; }
.watch-seg { flex-wrap: wrap; gap: 8px 12px; }
.watch-seg .segmented { margin-inline-start: auto; max-width: 100%; }
.watch-menu > .note { margin: 0; }
/* (four or more choices: a row of their own under the words, one width each) */
.watch-seg.wide { flex-direction: column; align-items: stretch; }
.watch-seg.wide .segmented { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; width: 100%; margin-inline-start: 0; }
.watch-seg.wide .segmented button { min-width: 0; min-height: 42px; padding: 6px 8px; white-space: normal; text-align: center; line-height: 1.25; }
/* (a wide screen: the four in one row, as the words' room allows; a phone, and a larger text: two and two, never one over another) */
@media (min-width: 700px) { .watch-seg.wide .segmented { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* the drinks row's cups are edit buttons (diary.js editDrink), and the edit window's way to take a drink away */
.wr-row > li.wr-edit { cursor: pointer; border-radius: 14px; }
.wr-row > li.wr-edit:focus-visible, .wr-row > li.wr-editing { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .wr-row > li.wr-edit:hover .wr-art { filter: brightness(1.06); } }
.drink-edit { gap: 14px; }
.drink-edit .entry-item { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.de-del { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin-top: 14px; padding: 0 16px; border: 0; border-top: 1px solid var(--line, rgba(120, 140, 130, .22)); border-radius: 0 0 12px 12px; background: none; color: var(--warn, #e5484d); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.de-del:focus-visible { outline: 2px solid var(--warn, #e5484d); outline-offset: -2px; }
@media (hover: hover) { .de-del:hover { background: color-mix(in srgb, var(--warn, #e5484d) 10%, transparent); } }
.aic-in select selectedcontent, .aic-in select option { padding-block: 0; }

/* ---------- the admin overview's problems part (admin.js problemsSection): there only when something is wrong ---------- */
.ov-problems { margin-top: 0; margin-bottom: 14px; background: color-mix(in srgb, var(--ov) 7%, var(--surface)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ov) 45%, transparent), var(--shadow); }
.ov-problems > .ov-head .ov-ico { box-shadow: 0 8px 18px color-mix(in srgb, var(--ov) 38%, transparent); }
.ov-problems > .ov-head .ov-title b { font-size: 18px; }
.ov-problems > .ov-head .ov-title small { color: var(--ov); font-weight: 700; font-size: 13.5px; }
.pb-panel { display: grid; gap: 12px; background: transparent; box-shadow: none; padding: 4px 6px 10px; border: 0; }
.pb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pb-item { --pb: #e8920c; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface);
  box-shadow: inset -4px 0 0 var(--pb), 0 1px 2px rgba(0, 0, 0, .06); }
.pb-item.error { --pb: #e5484d; }
.pb-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--pb); background: color-mix(in srgb, var(--pb) 14%, transparent); }
.pb-text { min-width: 0; display: grid; gap: 2px; line-height: 1.45; }
.pb-text b { font-size: 15.5px; }
.pb-text span { font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }
.pb-go { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; text-decoration: none; color: var(--pb);
  background: color-mix(in srgb, var(--pb) 12%, transparent); transition: background .2s; }
.pb-go:hover { background: color-mix(in srgb, var(--pb) 22%, transparent); }
.pb-go:focus-visible { outline: 3px solid color-mix(in srgb, var(--pb) 55%, transparent); outline-offset: 2px; }
.pb-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pb-foot small { flex: 1 1 220px; }
@media (max-width: 560px) { .pb-item { grid-template-columns: auto 1fr; } .pb-go { grid-column: 1 / -1; justify-self: start; } }
/* a part a problem's link brought you to: room under the sticky head, and a glow a moment */
.ov-sec, .ad-fold, .admin-legal { scroll-margin-top: 110px; }
.pb-hit { animation: pb-hit 2.8s ease-out; }
@keyframes pb-hit { 0%, 60% { box-shadow: 0 0 0 4px color-mix(in srgb, #ffb000 75%, transparent), 0 0 30px color-mix(in srgb, #ffb000 45%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .pb-hit { animation: none; outline: 3px solid #ffb000; outline-offset: 2px; } }