/* Daily Journal - the desktop tracker's light look, on a phone.
   Light by default; dark is a choice, not whatever the phone happens to be in. */

/* ───────────────────────────── palette

   Light is the base and dark is one attribute away, stamped on <html> by
   theme-boot.js before the first paint.

   The mode is decided in JavaScript rather than by prefers-color-scheme, and
   that is the whole reason it can be chosen. A media query cannot answer for a
   phone in dark mode looking at an app that has been told to stay light, and
   writing every dark rule twice - once in the query, once under an attribute -
   is how a palette drifts apart. One attribute, one set of values. */

:root {
  --paper: #f8fafc;
  --card: #ffffff;
  --card-2: #f1f5f9;
  --ink: #111827;
  --ink-soft: #475569;
  --ink-faint: #94a3b8;
  --rule: #e2e8f0;
  --rule-soft: #eef2f7;

  --accent: #7c5cff;
  --accent-soft: #f0edff;
  --good: #15803d;
  --good-soft: #eaf6ee;
  --warn: #b45309;

  /* The chart colours, validated for colour-blind separation and for contrast
     against the surface they sit on, in both modes. Do not swap one for a
     prettier hue without re-running that check: the three of them have to stay
     apart from each other as well as from the paper. */
  --c-protein: #0891b2;
  --c-carbs: #b45309;
  --c-fat: #7e22ce;

  --radius: 14px;
  --radius-sm: 10px;
  --tap: 46px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --nav-h: calc(60px + var(--safe-b));

  color-scheme: light;
}

:root[data-dark] {
  --paper: #0b0d12;
  --card: #161a23;
  --card-2: #11141b;
  --ink: #f3f4f6;
  --ink-soft: #a4adbe;
  --ink-faint: #6b7486;
  --rule: #222836;
  --rule-soft: #1b202b;

  --accent: #a78bfa;
  --accent-soft: #201634;
  --good: #4ade80;
  --good-soft: #14251a;
  --warn: #fbbf24;

  --c-protein: #0891b2;
  --c-carbs: #d97706;
  --c-fat: #8b5cf6;

  color-scheme: dark;
}

/* ───────────────────────────── themes
   Settings → Look sets data-theme on <html>. A theme only moves the accent; the
   surfaces take a faint tint from it, so the whole page changes rather than
   just the buttons. Indigo is the default and takes no tint, because it is the
   colour the palette above is already built around. */

:root[data-theme="ember"]  { --accent: #c2410c; --accent-soft: #fff1e9; }
:root[data-theme="ocean"]  { --accent: #0369a1; --accent-soft: #e6f3fb; }
:root[data-theme="fern"]   { --accent: #047857; --accent-soft: #e7f6f0; }
:root[data-theme="berry"]  { --accent: #a21456; --accent-soft: #fdeaf2; }
:root[data-theme="ink"]    { --accent: #334155; --accent-soft: #eaeef4; }

:root[data-theme]:not([data-theme="indigo"]) {
  --paper:     color-mix(in srgb, var(--accent)  4%, #f8fafc);
  --card:      color-mix(in srgb, var(--accent)  2%, #ffffff);
  --card-2:    color-mix(in srgb, var(--accent)  6%, #f1f5f9);
  --rule:      color-mix(in srgb, var(--accent) 12%, #e2e8f0);
  --rule-soft: color-mix(in srgb, var(--accent)  7%, #eef2f7);
}

:root[data-dark][data-theme="ember"]  { --accent: #fb923c; --accent-soft: #2c1d10; }
:root[data-dark][data-theme="ocean"]  { --accent: #38bdf8; --accent-soft: #0d2231; }
:root[data-dark][data-theme="fern"]   { --accent: #34d399; --accent-soft: #0c2620; }
:root[data-dark][data-theme="berry"]  { --accent: #f472b6; --accent-soft: #2e1220; }
:root[data-dark][data-theme="ink"]    { --accent: #94a3b8; --accent-soft: #1c2230; }

:root[data-dark][data-theme]:not([data-theme="indigo"]) {
  --paper:     color-mix(in srgb, var(--accent)  5%, #0b0d12);
  --card:      color-mix(in srgb, var(--accent)  6%, #161a23);
  --card-2:    color-mix(in srgb, var(--accent)  7%, #11141b);
  --rule:      color-mix(in srgb, var(--accent) 14%, #222836);
  --rule-soft: color-mix(in srgb, var(--accent) 10%, #1b202b);
}

* { box-sizing: border-box; }

/* The browser's own `[hidden] { display: none }` sits below author styles, so a
   later rule like `.field { display: block }` un-hides it. This keeps hidden
   meaning hidden - it was showing "Your name" on the sign-in tab. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}
body { min-height: 100dvh; }

h1, h2, h3, h4 { margin: 0; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; }
p { margin: 0 0 .6em; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ───────────────────────────── buttons & fields */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tap); padding: 0 18px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 999px;
  font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .06s;
}
.btn:hover { background: var(--card-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: #fff; border-color: transparent; }
.btn-primary:hover { background: var(--accent); filter: brightness(1.08); }
.btn-block { width: 100%; }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 14px; }
.btn-quiet { color: var(--ink-soft); }

.icon-btn {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  background: none; border: 1px solid transparent; border-radius: 50%;
  font-size: 19px; cursor: pointer; color: var(--ink-soft);
}
.icon-btn:hover { background: var(--card-2); }

/* Anything you can type into is outlined in the accent colour whether or not it
   is focused, so on a busy page it is obvious where the writing goes. */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="time"], input[type="date"], input[type="search"], textarea {
  width: 100%; min-height: var(--tap);
  padding: 11px 14px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--accent); border-radius: var(--radius-sm);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 90px; resize: vertical; line-height: 1.55; }
input:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field { display: block; margin-bottom: 14px; }
.field > span {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--ink-soft); margin-bottom: 6px;
}

.seg {
  display: flex; gap: 4px; padding: 4px;
  background: var(--card-2); border-radius: 999px; margin-bottom: 16px;
}
.seg-btn {
  flex: 1; min-height: 38px; padding: 0 12px;
  background: none; border: 0; border-radius: 999px;
  font-weight: 600; font-size: 14px; color: var(--ink-soft); cursor: pointer;
}
.seg-btn.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.seg-btn:disabled { opacity: .4; cursor: not-allowed; }

.chip-row { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 36px; padding: 0 13px;
  background: var(--card); border: 1px solid var(--rule); border-radius: 999px;
  font-size: 14px; font-weight: 550; color: var(--ink); cursor: pointer;
}
.chip:hover { background: var(--accent-soft); border-color: var(--accent); }
.chip .n { color: var(--ink-faint); font-size: 12px; }
.chip.static { cursor: default; }
.chip.static:hover { background: var(--card); border-color: var(--rule); }

.msg { min-height: 20px; font-size: 13.5px; margin: 6px 0 12px; color: var(--accent); }
.msg.ok { color: var(--good); }

/* ───────────────────────────── welcome */

.welcome-body { display: grid; place-items: center; min-height: 100dvh; padding: 22px; }
.welcome-card {
  width: 100%; max-width: 380px;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 20px; padding: 28px 22px 22px;
  box-shadow: 0 12px 40px rgba(0,0,0,.07);
}
.brand { text-align: center; margin-bottom: 22px; }
.brand-mark {
  width: 54px; height: 54px; margin: 0 auto 12px;
  border-radius: 16px; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 24px;
}
.brand h1 { font-size: 21px; }
.brand-sub { color: var(--ink-soft); font-size: 13.5px; margin: 6px 0 0; }
.welcome-foot { margin: 16px 0 0; font-size: 12px; color: var(--ink-faint); line-height: 1.5; text-align: center; }

/* ───────────────────────────── shell */

.app {
  display: grid;
  /* minmax(0,1fr), not the default auto: an auto column sizes to its widest
     content, so the journal tables would stretch the page past the screen and
     the browser would zoom the whole thing out - footer included. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  min-height: 100dvh;
}

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule-soft);
}
.topbar .spacer { flex: 1; }
.who { display: flex; align-items: center; gap: 9px; font-weight: 650; font-size: 15px; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 700;
}

main.content {
  padding: 16px 14px calc(var(--nav-h) + 24px);
  max-width: 900px; width: 100%; margin: 0 auto;
  /* Grid items default to min-width:auto, so a wide table inside would stretch
     this past the screen - which zooms the whole page out and drags the footer
     with it. Letting it shrink keeps the table scrolling inside its own box. */
  min-width: 0;
}

.view { display: none; min-width: 0; }
.view.active { display: block; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.page-title { font-size: 23px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.page-sub { color: var(--ink-soft); font-size: 14px; margin: 4px 0 16px; }

.tabbar {
  position: fixed; left: 0; bottom: 0; z-index: 40;
  /* Width from the viewport, never from a page that happens to be wider. */
  width: 100vw; max-width: 100vw;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: color-mix(in srgb, var(--card) 96%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--rule);
  padding-bottom: var(--safe-b);
}
.tabbar button {
  background: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: 60px; color: var(--ink-faint); font-size: 10.5px; font-weight: 650;
}
.tabbar button .ic { font-size: 20px; line-height: 1; }
.tabbar button.active { color: var(--accent); }

/* ───────────────────────────── cards */

.card {
  background: var(--card); border: 1px solid var(--rule-soft);
  border-radius: var(--radius); padding: 16px; margin-bottom: 14px;
}
.card h3 { font-size: 15px; }
.card-sub { color: var(--ink-soft); font-size: 13px; margin: 5px 0 12px; }

.empty {
  text-align: center; padding: 26px 16px; color: var(--ink-faint);
  border: 1px dashed var(--rule); border-radius: var(--radius); font-size: 14px;
}
.empty .big { display: block; font-size: 28px; margin-bottom: 8px; opacity: .8; }

/* ───────────────────────────── day nav */

.daynav { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.daynav-label { flex: 1; text-align: center; }
.daynav-day { font-size: 19px; font-weight: 700; }
.daynav-date { font-size: 13px; color: var(--ink-soft); }

/* ───────────────────────────── the boxes */

/* Each section is its own bordered card: a clear edge all the way round, a tinted
   header strip with its own line under it, and a soft shadow so it sits on the page. */
.box {
  background: var(--card); border: 1.5px solid var(--rule);
  border-radius: var(--radius); margin-bottom: 14px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 18px rgba(15, 23, 42, .045);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.box.filled { border-color: color-mix(in srgb, var(--good) 45%, var(--rule)); }

.box-head {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px; background: var(--card-2);
  border-bottom: 1px solid var(--rule);
}
.box-icon { font-size: 18px; line-height: 1; }
.box-title { font-weight: 650; font-size: 15px; flex: 1; }
.box-count { font-size: 12px; color: var(--ink-faint); font-weight: 600; }
.box-tick { color: var(--good); font-size: 15px; }

.box-body { padding: 14px; }

.quick-add { display: flex; gap: 8px; }
.quick-add input { flex: 1; }
.quick-add .btn { min-height: var(--tap); padding: 0 16px; flex: none; }

.suggest-row { margin-top: 10px; }
.suggest-label {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 6px;
}

.entries { margin-top: 12px; border-top: 1px solid var(--rule-soft); }
.entry {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--rule-soft);
}
.entry:last-child { border-bottom: 0; }
.entry-time { font-size: 11.5px; color: var(--ink-faint); width: 54px; flex: none; font-variant-numeric: tabular-nums; }
.entry-text { flex: 1; min-width: 0; }
.entry-del {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: none; border: 0; color: var(--ink-faint); cursor: pointer; font-size: 13px;
}
.entry-del:hover { background: var(--accent-soft); color: var(--accent); }

.count-row { display: flex; align-items: center; gap: 10px; }
.count-row input { text-align: center; font-size: 20px; font-weight: 700; }
.count-btn {
  width: var(--tap); height: var(--tap); flex: none; border-radius: 50%;
  background: var(--card-2); border: 1px solid var(--rule); font-size: 20px; cursor: pointer;
}

/* Bedtime. Two plain number boxes and a switch, rather than one
   `input type="time"` - that hands the whole field to the phone's own picker,
   which on some browsers cannot be typed into at all. */
.timefield {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--card); border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
}
.timefield input.tf-num {
  width: 3.1em; flex: none;
  min-height: var(--tap); padding: 6px 2px;
  text-align: center; font-size: 21px; font-weight: 700;
  /* The field around them already carries the accent outline; two rings inside
     one another is too much. */
  background: var(--card-2); border-color: var(--rule); border-radius: 10px;
}
.timefield input.tf-num::placeholder { font-weight: 500; color: var(--ink-faint); }
.tf-colon { font-size: 21px; font-weight: 700; color: var(--ink-soft); margin: 0 -2px; }
.tf-ap {
  display: flex; gap: 3px; margin-left: auto; flex: none;
  padding: 3px; background: var(--card-2); border-radius: 999px;
}
.tf-ap-btn {
  min-width: 48px; min-height: 38px; padding: 0 10px;
  background: none; border: 0; border-radius: 999px;
  font-size: 14px; font-weight: 700; color: var(--ink-soft); cursor: pointer;
}
.tf-ap-btn.on { background: var(--accent); color: #fff; }

/* ───────────────────────────── theme picker */

.theme-row { display: flex; flex-wrap: wrap; gap: 10px; }
.theme-opt {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 6px 7px; min-width: 74px; flex: 1 1 74px;
  background: var(--card-2); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
}
.theme-opt .sw {
  width: 30px; height: 30px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.theme-opt.on { border-color: var(--accent); color: var(--ink); }
.theme-opt.on .sw { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 3px var(--accent-soft); }

/* ───────────────────────────── journal table */

.table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 0 -14px; padding: 0 14px;
  max-width: 100vw;
}
.j-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
.j-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); font-weight: 700; padding: 0 12px 8px 0; white-space: nowrap;
}
.j-table td {
  padding: 12px 12px 12px 0; border-top: 1px solid var(--rule);
  vertical-align: top; line-height: 1.5;
}
.j-date { font-weight: 700; white-space: nowrap; }
.j-date span { display: block; font-weight: 500; font-size: 11.5px; color: var(--ink-faint); }
.j-cell ul { margin: 0; padding-left: 15px; }
.j-cell li { margin-bottom: 2px; }
.j-empty { color: var(--ink-faint); }

/* ───────────────────────────── stats */

.stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.stat {
  background: var(--card); border: 1px solid var(--rule-soft);
  border-radius: var(--radius); padding: 14px;
}
.stat .n { font-size: 26px; font-weight: 750; letter-spacing: -.02em; }
.stat .l { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; font-weight: 600; }

.dots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.dot {
  width: 15px; height: 15px; border-radius: 4px;
  background: var(--card-2); border: 1px solid var(--rule-soft);
}
.dot.on { background: var(--good); border-color: var(--good); }
.dot.part { background: color-mix(in srgb, var(--good) 45%, var(--card-2)); border-color: transparent; }

.col-stat { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule-soft); }
.col-stat:last-child { border-bottom: 0; }
.col-stat .ci { font-size: 20px; flex: none; }
.col-stat .cb { flex: 1; min-width: 0; }
.col-stat .cn { font-weight: 650; }
.col-stat .cs { font-size: 12.5px; color: var(--ink-soft); margin-top: 1px; }
.col-stat .cv { text-align: right; flex: none; }
.col-stat .cv b { font-size: 17px; }
.col-stat .cv span { display: block; font-size: 11px; color: var(--ink-faint); }

.bar { height: 6px; background: var(--card-2); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.bar > i { display: block; height: 100%; background: var(--good); border-radius: 999px; }

/* ───────────────────────────── together */

.person-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.person-head .avatar { width: 34px; height: 34px; font-size: 14px; }
.person-head h3 { font-size: 16px; }

.vs-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--rule-soft); }
.vs-row:last-child { border-bottom: 0; }
.vs-label { flex: 1; font-size: 13.5px; font-weight: 600; }
.vs-val { width: 74px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.vs-val small { display: block; font-size: 10.5px; font-weight: 500; color: var(--ink-faint); }
.vs-head { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); font-weight: 700; }

/* ───────────────────────────── together: the clipboard view */

.tj-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 0 -14px; padding: 0 14px;
  border-radius: var(--radius);
  max-width: 100vw;
}
.tj-table { border-collapse: separate; border-spacing: 0; font-size: 13.5px; }

.tj-table th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); font-weight: 700; white-space: nowrap;
  padding: 8px 12px; background: var(--paper);
  position: sticky; top: 0; z-index: 2;
  border-bottom: 1px solid var(--rule);
}
.tj-table td {
  padding: 10px 12px; vertical-align: top; line-height: 1.45;
  border-bottom: 1px solid var(--rule-soft);
  background: var(--card);
  min-width: 150px;
}
/* A new day starts a heavier rule, like the ruled lines on the paper. */
.tj-table tr.tj-first td { border-top: 2px solid var(--rule); }

/* Date and Who stay put while the boxes scroll under them. */
.tj-table .tj-date,
.tj-table .tj-who {
  position: sticky; z-index: 3;
  background: var(--card-2);
  min-width: 0;
}
/* Exact widths, not hints: the Who column's `left` offset has to match the Date
   column's real width or the two pinned cells drift apart as you scroll. */
.tj-table .tj-date {
  left: 0; width: 96px; min-width: 96px; max-width: 96px;
  font-weight: 700; white-space: nowrap;
}
.tj-table .tj-who {
  left: 96px; width: 92px; min-width: 92px; max-width: 92px;
  white-space: nowrap; font-weight: 600;
}
.tj-table th.tj-date, .tj-table th.tj-who { z-index: 4; background: var(--paper); }

/* The shadow that tells you there is more to the right. */
.tj-table .tj-who::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: -1px; width: 6px;
  transform: translateX(100%);
  background: linear-gradient(to right, rgba(0,0,0,.10), transparent);
  pointer-events: none;
}

.tj-table .tj-date span {
  display: block; font-weight: 500; font-size: 11px; color: var(--ink-faint); margin-top: 2px;
}
.tj-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: 1px;
}
.tj-list { margin: 0; padding-left: 15px; }
.tj-list li { margin-bottom: 2px; }

.tj-range { max-width: 320px; }

/* Your own cells are writable; the other person's are read-only. */
.tj-cell.tj-mine { cursor: pointer; position: relative; }
.tj-cell.tj-mine:hover { background: var(--accent-soft); }
.tj-cell.tj-mine:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tj-cell.tj-mine::after {
  content: '＋';
  position: absolute; top: 4px; right: 6px;
  font-size: 12px; color: var(--ink-faint); opacity: 0;
  transition: opacity .12s;
}
.tj-cell.tj-mine:hover::after { opacity: 1; }
/* On touch there is no hover, so show the affordance on empty cells always. */
@media (hover: none) {
  .tj-cell.tj-mine::after { opacity: .45; }
}

@media (max-width: 480px) {
  /* Narrow phones: only the date is worth freezing, or nothing else fits. */
  .tj-table .tj-date { width: 74px; min-width: 74px; max-width: 74px; }
  .tj-table .tj-who { position: static; width: auto; min-width: 0; max-width: none; }
  .tj-table .tj-who::after { display: none; }
  .tj-table .tj-date::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: -1px; width: 6px;
    transform: translateX(100%);
    background: linear-gradient(to right, rgba(0,0,0,.10), transparent);
    pointer-events: none;
  }
  .tj-table td { min-width: 132px; }
}

/* ───────────────────────────── renameable table headings */

/* Two taps, because these tables are dragged sideways with a thumb and a
   heading that opened a sheet on contact would fire on every scroll. The first
   tap marks the heading, the pencil it reveals is what opens it. */
/* The pencil is shown and hidden by the `hidden` attribute rather than by a
   class the cascade has to resolve. It is one state, set in one place, and
   [hidden] above is already !important so nothing can half-apply it. */
th.th-own { cursor: pointer; -webkit-tap-highlight-color: transparent; }
th.th-own .th-label { display: inline-block; vertical-align: middle; }
th.th-own .th-edit {
  display: inline-grid; place-items: center; vertical-align: middle;
  width: 24px; height: 24px; margin-left: 6px; padding: 0; border-radius: 50%;
  background: var(--accent); color: #fff; border: 0; cursor: pointer;
  font-size: 12px; line-height: 1; flex: none;
  animation: fade .12s ease;
}
th.th-own.picked { background: var(--accent-soft); }

/* The cog, while Settings is what it opened. Pressing it again closes it. */
.icon-btn.on {
  background: var(--accent); color: #fff; border-color: var(--accent);
}

/* ───────────────────────────── settings columns */

.col-item {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 10px; margin-bottom: 7px;
  background: var(--card-2); border: 1px solid var(--rule-soft); border-radius: var(--radius-sm);
}
/* `pan-y` is a promise to the browser that a vertical drag is a scroll, so it
   took the gesture and cancelled the drag at the first millimetre. Nothing in
   the list could be dragged anywhere. The rows own the vertical gesture only
   while the list is actually sortable, which is what `.sortable` marks. */
.sortable .col-item { touch-action: none; }
.col-item.dragging { opacity: .95; box-shadow: 0 10px 26px rgba(0,0,0,.16); border-color: var(--accent); }
.col-item .grip { color: var(--ink-faint); cursor: grab; font-size: 14px; letter-spacing: -2px; }
.col-item .ci { font-size: 18px; }
.col-item .cb { flex: 1; min-width: 0; }
.col-item .cn { font-weight: 600; font-size: 14.5px; }
.col-item .ct { font-size: 11.5px; color: var(--ink-faint); }
.col-item .cpos {
  font-size: 11px; font-weight: 700; color: var(--ink-faint);
  min-width: 15px; text-align: right; font-variant-numeric: tabular-nums;
}

/* Two arrows per row. Dragging is the nice way and the arrows are the way that
   cannot fail - no hold, no aim, no fighting the page for the gesture. */
.col-move { display: flex; flex-direction: column; gap: 3px; }
.col-move button {
  width: 30px; height: 21px; padding: 0; line-height: 1;
  font-size: 11px; color: var(--ink-soft);
  background: var(--card); border: 1px solid var(--rule); border-radius: 6px;
  cursor: pointer; touch-action: manipulation;
}
.col-move button:disabled { opacity: .3; cursor: default; }

/* One button per row rather than three. A phone row is 314px wide and there is
   no space for rename, icon and remove as separate targets; this opens all of
   them, and keeps the rest of the row free to be dragged. */
.col-edit {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: none; border: 0; cursor: pointer; touch-action: manipulation;
  color: var(--ink-faint); font-size: 17px; line-height: 1;
}
.col-edit:hover { background: var(--accent-soft); color: var(--accent); }
.col-move button:not(:disabled):active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* The line at the top of Settings saying which page you pressed the cog on. */
.ctx {
  display: flex; align-items: center; gap: 10px;
  margin: -4px 0 16px;
}
.ctx .back {
  flex: none; padding: 7px 12px; font-size: 13px; font-weight: 600;
  background: var(--card); color: var(--ink); border: 1px solid var(--rule);
  border-radius: 999px; cursor: pointer;
}
.ctx .lbl { font-size: 12.5px; color: var(--ink-faint); line-height: 1.35; }
.ctx .lbl b { color: var(--ink); font-weight: 600; }

/* Cards that belong to the page you came from, floated to the top and marked so
   it is obvious which ones the cog was answering. */
.card.for-page { border-color: var(--accent); }
.card.for-page > h3::before {
  content: attr(data-badge);
  display: inline-block; margin-right: 8px; padding: 2px 7px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--accent); border-radius: 999px; vertical-align: 2px;
}
.rest-head {
  margin: 26px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-faint);
}

.person-row { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--rule-soft); }
.person-row:last-child { border-bottom: 0; }
.person-row .pb { flex: 1; min-width: 0; }
.person-row.sub-row { padding-left: 41px; border-bottom: 1px solid var(--rule-soft); }
.person-row.sub-row .pn { font-weight: 500; font-size: 14px; }
.person-row .pn { font-weight: 600; }
.person-row .ps { font-size: 12.5px; color: var(--ink-soft); }

.switch { position: relative; width: 50px; height: 30px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch i {
  position: absolute; inset: 0; border-radius: 999px;
  background: var(--rule); transition: background .18s; pointer-events: none;
}
.switch i::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%; background: #fff;
  transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.switch input:checked + i { background: var(--good); }
.switch input:checked + i::after { transform: translateX(20px); }

.invite-link {
  display: flex; gap: 8px; margin-top: 10px;
}
.invite-link input { font-size: 13px; }

.inv-list { display: grid; gap: 12px; margin: 4px 0 18px; }
.inv-row {
  padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--paper);
}
.inv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.inv-kind { font-weight: 650; font-size: 14px; }
.inv-sub { margin: 2px 0 0; font-size: 13px; color: var(--ink-soft); }
.inv-make { display: grid; gap: 8px; }
.inv-make .btn { width: 100%; }

/* ───────────────────────────── sheet & toast */

.sheet-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(20, 16, 10, .45); backdrop-filter: blur(2px);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet-backdrop[hidden] { display: none; }
.sheet {
  width: 100%; max-width: 520px; max-height: 90dvh; overflow-y: auto;
  background: var(--paper); border-radius: 20px 20px 0 0;
  padding: 8px 18px calc(22px + var(--safe-b));
  animation: rise .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes rise { from { transform: translateY(22px); opacity: .7; } to { transform: none; opacity: 1; } }
.grabber { width: 38px; height: 4px; border-radius: 4px; background: var(--rule); margin: 6px auto 14px; }
.sheet h3 { font-size: 18px; margin-bottom: 4px; }
.sheet-sub { color: var(--ink-soft); font-size: 13.5px; margin-bottom: 16px; }
.sheet-actions { display: flex; gap: 8px; margin-top: 18px; }
.sheet-actions .btn { flex: 1; }

/* ───────────────────────────── add to home screen */

.install-bar {
  position: fixed; z-index: 60;
  left: 10px; right: 10px;
  bottom: calc(var(--nav-h) + 10px);
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
  animation: rise .24s cubic-bezier(.2, .8, .3, 1);
}
.install-icon { width: 42px; height: 42px; border-radius: 10px; flex: none; }
.install-text { flex: 1; min-width: 0; line-height: 1.35; }
.install-text b { display: block; font-size: 14.5px; }
.install-text span { font-size: 12.5px; color: var(--ink-soft); }
.install-text span b { display: inline; font-size: inherit; color: var(--ink); }
.install-x {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: none; border: 0; color: var(--ink-faint);
  font-size: 13px; cursor: pointer;
}
.install-x:hover { background: var(--card-2); color: var(--ink); }

@media (min-width: 760px) {
  .install-bar { left: auto; right: 20px; bottom: 20px; max-width: 380px; }
}

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--nav-h) + 14px); z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 550;
  box-shadow: 0 8px 24px rgba(0,0,0,.22); pointer-events: none;
  max-width: calc(100vw - 32px); text-align: center;
}

.spinner {
  width: 15px; height: 15px; border-radius: 50%; display: inline-block; vertical-align: -2px;
  border: 2px solid var(--rule); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ───────────────────────────── wider screens */

@media (min-width: 760px) {
  .stat-row { grid-template-columns: repeat(4, 1fr); }
  main.content { padding: 24px 24px 40px; }
  .tabbar {
    position: sticky; top: 0; bottom: auto;
    width: auto; max-width: 900px; margin: 0 auto 4px; border-radius: 999px;
    border: 1px solid var(--rule); border-top: 1px solid var(--rule);
  }
  :root { --nav-h: 0px; }
  .toast { bottom: 26px; }
  .app { grid-template-rows: auto auto 1fr; }
  .tabbar { order: -1; }
}

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

/* ═══════════════════════════════════════════════════════════════════════
   Foods, habits, the planner, the reminder, and the charts.
   ═══════════════════════════════════════════════════════════════════════ */

.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sub-head { font-size: 13px; color: var(--ink-soft); margin: 16px 0 8px; font-weight: 700; }
.h-date { font-weight: 500; color: var(--ink-faint); font-size: 13px; }
.pill {
  font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
}
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1; min-width: 0; }
.seg-inline { margin-bottom: 12px; }
.btn-icon { min-width: var(--tap); padding: 0 12px; font-size: 17px; }
.btn-wide { width: 100%; }

/* The count in a box header is the way into today's list, so it is a button. */
.box-count {
  background: none; border: 0; padding: 2px 4px; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--accent);
}
.box-count:hover { text-decoration: underline; }

.box-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.box-actions .btn { flex: none; }
.dirty { font-size: 12px; color: var(--warn); font-weight: 600; margin-right: auto; }

/* Quick picks, in a grid that cannot become a wall.
   Three columns, six of them, two rows - the same on every phone width, which
   a wrapping row of variable-width chips is not. */
.chip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.chip-grid .chip {
  display: block; width: 100%; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ───────────────────────────── the food picker */

.picker { position: relative; }
.suggest-list {
  margin-top: 8px; border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--card); overflow: hidden;
}
.suggest-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  width: 100%; padding: 11px 13px; min-height: 44px;
  background: none; border: 0; border-bottom: 1px solid var(--rule-soft);
  text-align: left; cursor: pointer; font: inherit;
}
.suggest-item:last-child { border-bottom: 0; }
.suggest-item:hover { background: var(--accent-soft); }
.s-name { font-weight: 600; }
.s-macros { font-size: 12px; color: var(--ink-faint); flex: none; }
.suggest-none { padding: 11px 13px; font-size: 13px; color: var(--ink-soft); }

.picked {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 9px; padding: 9px 11px;
  background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius-sm);
}
.p-name { font-weight: 650; }
.p-qty {
  width: 5.2em; flex: none; min-height: 38px; padding: 4px 8px;
  text-align: center; font-weight: 700; background: var(--card);
}
.p-unit { color: var(--ink-soft); font-size: 13px; margin-left: -4px; }
.p-macros { flex: 1 1 100%; font-size: 12px; color: var(--ink-soft); display: flex; gap: 8px; }
.p-clear {
  width: 30px; height: 30px; flex: none; margin-left: auto; border-radius: 50%;
  background: none; border: 0; color: var(--ink-soft); cursor: pointer;
}

/* ───────────────────────────── the food list */

.food-list { margin-top: 10px; }
.food-row {
  display: block; width: 100%; text-align: left; cursor: pointer; font: inherit;
  padding: 11px 12px; margin-bottom: 7px;
  background: var(--card-2); border: 1px solid var(--rule); border-radius: var(--radius-sm);
}
.food-row:hover { border-color: var(--accent); }
.food-row.needs-row { border-style: dashed; }
.f-name { display: block; font-weight: 650; font-size: 14.5px; }
.f-macros { display: flex; flex-wrap: wrap; gap: 7px; font-size: 12px; color: var(--ink-faint); margin-top: 2px; }

.m-kcal { color: var(--ink-soft); font-weight: 600; }
.f-macros .m-p, .p-macros .m-p, .entry-macros .m-p { color: var(--c-protein); font-weight: 600; }
.f-macros .m-c, .p-macros .m-c, .entry-macros .m-c { color: var(--c-carbs); font-weight: 600; }
.f-macros .m-f, .p-macros .m-f, .entry-macros .m-f { color: var(--c-fat); font-weight: 600; }
.needs { color: var(--warn); font-weight: 600; }

.card-flag { border-color: var(--warn); }
.chip-flag { border-color: var(--warn); color: var(--warn); }

.entry-macros { display: flex; gap: 7px; font-size: 11.5px; margin-top: 1px; }

.macro-strip { display: flex; gap: 8px; margin: 10px 0; }
.macro {
  flex: 1; min-width: 0; text-align: center; padding: 9px 4px;
  background: var(--card-2); border-radius: var(--radius-sm);
}
.macro b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
.macro span { display: block; font-size: 11px; color: var(--ink-faint); }
.macro.m-p b { color: var(--c-protein); }
.macro.m-c b { color: var(--c-carbs); }
.macro.m-f b { color: var(--c-fat); }

.recipe-card { display: block; width: 100%; text-align: left; cursor: pointer; font: inherit; }
.recipe-card:hover { border-color: var(--accent); }

.ing-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--rule-soft);
}
.i-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.i-qty { width: 4.6em; flex: none; min-height: 38px; padding: 4px 6px; text-align: center; }
.i-unit { font-size: 12px; color: var(--ink-faint); width: 2.4em; flex: none; }
.i-kcal { font-size: 12px; color: var(--ink-soft); width: 5em; flex: none; text-align: right; }
.totals { margin-top: 14px; }

/* ───────────────────────────── habits */

.habit-list { margin-top: 4px; }
.habit-row {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 10px 0; border-bottom: 1px solid var(--rule-soft);
  background: none; border-left: 0; border-right: 0; border-top: 0;
  text-align: left; cursor: pointer; font: inherit;
}
.habit-row:last-child { border-bottom: 0; }
.h-icon { font-size: 20px; width: 26px; flex: none; text-align: center; }
.h-body { flex: 1; min-width: 0; }
.h-name { font-weight: 650; font-size: 14.5px; }
.h-sub { font-size: 12px; color: var(--ink-faint); }

.icon-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.icon-opt {
  width: 40px; height: 40px; font-size: 19px; cursor: pointer;
  background: var(--card-2); border: 1px solid var(--rule); border-radius: 10px;
}
.icon-opt.on { border-color: var(--accent); background: var(--accent-soft); }

/* ───────────────────────────── the calendar */

.cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.cal-title { flex: 1; text-align: center; font-weight: 700; font-size: 17px; }

/* minmax(0, 1fr): a column may shrink below its contents. With plain 1fr the days
   held the grid at 55px each, which made the page wider than a phone, so the phone
   zoomed out and the tab bar dropped below the screen on Plan only. */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 16px; }
.cal-dow {
  text-align: center; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-faint); padding-bottom: 2px;
}
.cal-day {
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  aspect-ratio: 1 / 1; padding: 5px 2px 4px; min-height: 42px;
  background: var(--card); border: 1px solid var(--rule-soft); border-radius: 9px;
  cursor: pointer; font: inherit;
}
.cal-day.off { opacity: .38; }
.cal-day.today { border-color: var(--accent); }
.cal-day.picked { background: var(--accent-soft); border-color: var(--accent); }
.cd-n { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.cd-dots { display: flex; gap: 2px; min-height: 6px; }
.cd-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.cd-dot.k-reminder { background: var(--c-carbs); }
.cd-dot.k-note { background: var(--ink-faint); }
.cd-dot.done { opacity: .35; }

.task-list { margin-top: 6px; }
.task-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--rule-soft);
}
.task-row:last-child { border-bottom: 0; }
.task-row.done .t-title { text-decoration: line-through; color: var(--ink-faint); }
.t-icon { width: 24px; flex: none; text-align: center; color: var(--ink-faint); }
.t-body { flex: 1; min-width: 0; background: none; border: 0; text-align: left; cursor: pointer; font: inherit; padding: 0; }
.t-title { font-weight: 600; font-size: 14.5px; }
.t-sub { font-size: 12px; color: var(--ink-faint); }

.tick { width: 24px; flex: none; display: grid; place-items: center; cursor: pointer; }
.tick input { position: absolute; opacity: 0; width: 0; height: 0; }
.tick i {
  width: 21px; height: 21px; border-radius: 6px;
  border: 1.5px solid var(--rule); background: var(--card); display: block;
}
.tick input:checked + i {
  background: var(--good); border-color: var(--good);
  box-shadow: inset 0 0 0 2px var(--card);
}

.rem-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--rule-soft);
}
.rem-row:last-child { border-bottom: 0; }
.rem-row.off { opacity: .55; }
.rem-row .rb { flex: 1; min-width: 0; }
.rem-row .rn { font-weight: 600; font-size: 14.5px; }
.rem-row .rs { font-size: 12px; color: var(--ink-faint); }

/* ───────────────────────────── the reminder that waits

   No way out but the button: no backdrop click, no Escape, no history entry to
   swipe back through. Everything else in this app closes on all three, and this
   is the one thing that must not. */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 22px;
  background: rgba(12, 12, 16, .55); backdrop-filter: blur(3px);
}
.modal {
  width: 100%; max-width: 380px; padding: 26px 22px 22px; text-align: center;
  background: var(--card); border: 1px solid var(--rule); border-radius: 20px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
  animation: pop .2s ease;
}
.modal-icon { font-size: 34px; margin-bottom: 8px; }
.modal h3 { font-size: 17px; margin-bottom: 10px; }
.modal-body {
  font-size: 16px; line-height: 1.5; margin: 0 0 12px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.modal-note { font-size: 12.5px; color: var(--ink-faint); margin: 0 0 18px; }
@keyframes pop { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }

/* ───────────────────────────── charts */

.chart { position: relative; margin: 6px 0 2px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-slot { min-height: 10px; }

.c-grid { stroke: var(--rule-soft); stroke-width: 1; }
.c-tick { fill: var(--ink-faint); font-size: 10px; font-variant-numeric: tabular-nums; }
.c-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.c-bar { transition: opacity .12s; }
.c-bar:hover { opacity: .82; }
.c-hit { fill: transparent; cursor: pointer; }
.c-cursor { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 3 3; }

.c-tip {
  position: absolute; top: -4px; transform: translate(-50%, -100%);
  padding: 7px 10px; border-radius: 9px; pointer-events: none; white-space: nowrap;
  background: var(--ink); color: var(--paper); font-size: 12px; line-height: 1.35;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22); z-index: 3;
}
.c-tip b { display: block; font-size: 13px; }
.c-tip span { opacity: .75; }

.c-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.c-key { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); }
.c-key i { width: 10px; height: 10px; border-radius: 3px; flex: none; }

.spark { display: block; }
.cspark { width: 72px; flex: none; opacity: .85; }

.heat { display: flex; gap: 3px; overflow-x: auto; padding-bottom: 4px; }
.heat-col { display: flex; flex-direction: column; gap: 3px; }
.heat-cell { width: 13px; height: 13px; border-radius: 3px; background: var(--card-2); display: block; }
.heat-cell.pad { background: none; }
.heat-cell.l0 { background: var(--card-2); }
.heat-cell.l1 { background: color-mix(in srgb, var(--accent) 25%, var(--card-2)); }
.heat-cell.l2 { background: color-mix(in srgb, var(--accent) 48%, var(--card-2)); }
.heat-cell.l3 { background: color-mix(in srgb, var(--accent) 72%, var(--card-2)); }
.heat-cell.l4 { background: var(--accent); }
.heat-key {
  display: flex; align-items: center; gap: 4px; margin-top: 8px;
  font-size: 11px; color: var(--ink-faint);
}

.stat-row-4 .stat { min-width: 0; }

/* ───────────────────────────── wider screens */

@media (min-width: 700px) {
  .cal-day { min-height: 58px; }
  .field-row { gap: 14px; }
  .chip-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ───────────────────────────── one entry per Add, for writing

   Thoughts of the day is a list now, one thought per Add, but a thought is a
   sentence rather than "1 glass". So its box is a textarea that starts one line
   tall, wraps what you type instead of scrolling it sideways, and grows to fit.
   Enter adds it; the script never lets a second line in. */

.quick-add-writing { align-items: flex-end; }
textarea.grow {
  min-height: var(--tap); height: var(--tap); max-height: 40vh;
  resize: none; overflow-y: auto;
  padding-top: 11px; padding-bottom: 11px; line-height: 1.45;
}

/* ───────────────────────────── sheets on a wide screen

   A bottom sheet is the right shape for a thumb and the wrong one for a
   window. On a laptop it sat at the bottom edge of a screen twice its width,
   off to one side of where you were looking, and at 720px tall it ran 22px
   past the bottom of the window before its opening slide had even finished.
   From the width at which the tab bar moves to the top, a sheet is a dialog in
   the middle of the screen instead, and never taller than the space it has. */
@media (min-width: 760px) {
  .sheet-backdrop { align-items: center; padding: 24px; }
  .sheet {
    border-radius: 20px;
    max-height: 100%;
    padding: 20px 22px 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
    animation: pop .18s ease;
  }
  .sheet .grabber { display: none; }
}

/* ───────────────────────────── the number on Plan */

.tabbar button { position: relative; }
.tab-badge {
  position: absolute; top: 5px; left: 50%; margin-left: 5px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: 999px; background: #dc2626; color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 2px var(--card);
}

/* ───────────────────────────── how much of it */

.portion-per { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.portion-presets { margin-bottom: 12px; }
.portion-presets .chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 700; }
.portion-field input { font-size: 20px; font-weight: 700; }
.portion-total {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  padding: 12px 14px; border-radius: var(--radius-sm); background: var(--card-2);
}
.pt-label { font-size: 12.5px; color: var(--ink-soft); }
.pt-numbers { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; }
.pt-numbers .m-p { color: var(--c-protein); font-weight: 700; }
.pt-numbers .m-c { color: var(--c-carbs); font-weight: 700; }
.pt-numbers .m-f { color: var(--c-fat); font-weight: 700; }
.pt-numbers .m-kcal { font-weight: 700; color: var(--ink); }

.suggest-none { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; }
.suggest-label + .food-row { margin-top: 4px; }
#browse-list .suggest-label { margin-top: 12px; }
.chip-loose { border-style: dashed; color: var(--ink-soft); }

/* ───────────────────────────── food against targets */

.macro-bar { display: block; height: 5px; border-radius: 5px; background: var(--rule); margin-top: 6px; overflow: hidden; }
.macro-bar > i { display: block; height: 100%; border-radius: 5px; background: currentColor; }
.macro .macro-bar { color: var(--accent); }
.macro.m-p .macro-bar { color: var(--c-protein); }
.macro.m-c .macro-bar { color: var(--c-carbs); }
.macro.m-f .macro-bar { color: var(--c-fat); }

.target-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 8px 0 4px; }
.target-cell { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--card-2); color: var(--accent); }
.target-cell.m-p { color: var(--c-protein); }
.target-cell.m-c { color: var(--c-carbs); }
.target-cell.m-f { color: var(--c-fat); }
.tc-top b { font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; }
.tc-top span { font-size: 12px; color: var(--ink-soft); margin-left: 4px; }
.tc-sub { font-size: 11.5px; color: var(--ink-faint); margin-top: 4px; }
.macro-bar.over > i { background: var(--warn); }
.food-empty { margin-top: 10px; }
.field-hint { font-style: normal; font-weight: 500; color: var(--ink-faint); margin-left: 4px; }
@media (min-width: 560px) { .target-grid { grid-template-columns: repeat(4, 1fr); } }

.c-target { stroke: var(--ink-soft); stroke-width: 1.5; stroke-dasharray: 5 4; }
.c-target-label { fill: var(--ink-soft); font-size: 10px; font-weight: 700; }

/* ───────────────────────────── top habits */

.top-habits h3 { margin-bottom: 6px; }
.top-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule-soft); }
.top-row:last-child { border-bottom: 0; }
.top-rank {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 800;
}
.top-bar { height: 5px; border-radius: 5px; background: var(--rule-soft); margin: 4px 0 2px; overflow: hidden; max-width: 220px; }
.top-bar > i { display: block; height: 100%; background: var(--accent); border-radius: 5px; }

/* ───────────────────────────── reminders for each other */

.who-pill {
  display: inline-block; padding: 1px 7px; margin-right: 4px; border-radius: 999px;
  font-size: 11px; font-weight: 700; background: var(--accent-soft); color: var(--accent);
}
.who-pill.other { background: var(--card-2); color: var(--ink-soft); }
.btn-pair { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* The amounts under How much are words of different lengths ("1 serving ·
   30g" beside "15g"), so they wrap as a row rather than being squeezed into
   equal columns that cut the longest one off. */
.chip-grid.portion-presets { display: flex; flex-wrap: wrap; }
.chip-grid.portion-presets .chip { width: auto; flex: 1 1 auto; overflow: visible; }

/* ───────────────────────────── running totals */

.chip-habit .n { margin-left: 5px; font-weight: 800; color: var(--accent); font-size: 12px; }
.today-tally {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 700; vertical-align: 1px;
}

.so-far { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 4px 0 14px; color: var(--accent); }
.so-far .sf-big { font-size: 34px; font-weight: 800; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.so-far .sf-word { font-size: 13.5px; color: var(--ink-soft); }
.so-far .macro-bar { flex: 1 1 100%; height: 7px; }

/* ───────────────────────────── habits, day by day */

.habit-pick { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 6px; margin: 4px 0 10px; scrollbar-width: thin; }
.habit-pick .chip { flex: none; }
.habit-pick .chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.habit-today { margin-top: 6px; }

.week-grid { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.week-grid th, .week-grid td { padding: 7px 4px; text-align: center; border-bottom: 1px solid var(--rule-soft); }
.week-grid thead th { font-size: 11px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; }
.week-grid thead th span { display: block; font-size: 12px; color: var(--ink-soft); text-transform: none; }
.week-grid tbody th {
  text-align: left; font-weight: 600; white-space: nowrap; padding-right: 10px;
  max-width: 150px; overflow: hidden; text-overflow: ellipsis;
}
.week-grid tbody th span { display: block; font-size: 11px; font-weight: 500; color: var(--ink-faint); }
.week-grid .is-today { background: var(--accent-soft); }
.week-grid tbody tr { cursor: pointer; }
.week-grid tbody tr.on th { color: var(--accent); }
.wg-none { color: var(--ink-faint); }
.wg-done { color: var(--good); font-weight: 700; }


/* The week grid on a phone. Seven day columns and a name have to share about
   310px, so the cells are narrow, the numbers small, and the habit names pinned
   on the left while the days scroll under them if they must. */
.week-wrap { overflow-x: auto; margin: 0 -4px; }
.week-grid { table-layout: fixed; min-width: 300px; font-size: 12.5px; }
.week-grid th, .week-grid td { padding: 7px 2px; width: 30px; }
.week-grid thead th:first-child, .week-grid tbody th { width: 96px; }
.week-grid tbody th, .week-grid thead th:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--card);
  max-width: 96px; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px;
}
@media (min-width: 560px) {
  .week-grid th, .week-grid td { width: auto; padding: 7px 4px; }
  .week-grid thead th:first-child, .week-grid tbody th { width: 150px; max-width: 150px; }
}


/* While the page swaps an old version of its scripts for the new one, show
   nothing rather than a broken page for the moment before it reloads. */
html[data-updating] body { visibility: hidden; }

/* ───────────────────────────── matching old food lines */

.match-list { margin-top: 6px; }
.match-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule-soft); }
.match-row:last-child { border-bottom: 0; }
.mr-text { flex: 1; min-width: 0; }
.mr-text b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-text span { font-size: 12px; color: var(--ink-faint); }
.match-was { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════════════
   v3: a one-line Woke up, and movement that gets out of the way.
   ═══════════════════════════════════════════════════════════════════════ */

/* Woke up once it is set: the answer on one line, the whole line a button. */
.box-line { margin-bottom: 14px; }
.line-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 13px 14px; min-height: var(--tap);
  background: transparent; border: 0; color: var(--ink); font: inherit;
  text-align: left; cursor: pointer;
}
.line-btn:hover { background: var(--card-2); }
.line-text { flex: 1; font-size: 15px; }
.line-text b { font-weight: 700; margin-left: 4px; }
.line-edit { font-size: 13px; font-weight: 600; color: var(--accent); }

/* A box that has just been redrawn rises into place instead of snapping. */
@keyframes boxIn {
  from { opacity: 0; transform: translateY(6px) scale(.985); }
  to { opacity: 1; transform: none; }
}
.box-in { animation: boxIn .22s ease both; }

/* A line has just been added: one soft green ring, then gone. */
@keyframes boxFlash {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 40%, transparent); }
  100% { box-shadow: 0 0 0 10px transparent; }
}
.box-flash { animation: boxFlash .5s ease-out; }

/* Everything pressable answers the press at once and eases back. */
.btn, .chip, .count-btn, .tabbar button, .line-btn, .box-count, .entry-del {
  transition: background-color .15s ease, border-color .15s ease, color .15s ease,
    transform .09s ease, box-shadow .15s ease, filter .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.chip:active, .count-btn:active { transform: scale(.95); }
.tabbar button:active { transform: scale(.93); }
.line-btn:active { background: var(--accent-soft); }

/* Pages, sheets and the toast ease in rather than appearing. */
.sheet-backdrop { animation: fade .16s ease; }
.toast { transition: opacity .2s ease, transform .2s ease; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .box-in, .box-flash { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v3: Profile as collapsed sections, and a hidden bar stays hidden.
   ═══════════════════════════════════════════════════════════════════════ */

.seg[hidden] { display: none; }

.acc { padding: 0; margin-bottom: 12px; overflow: hidden; }
.acc > summary {
  display: flex; align-items: center; gap: 12px; list-style: none;
  padding: 14px 16px; min-height: 60px; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background-color .15s ease;
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary:hover { background: var(--card-2); }
.acc > summary:active { background: var(--accent-soft); }
.acc-ic {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--accent-soft); font-size: 18px;
}
.acc-t { flex: 1; font-size: 16px; font-weight: 650; display: flex; flex-direction: column; gap: 2px; }
.acc-t small { font-size: 13px; font-weight: 450; color: var(--ink-soft); }
.acc-chev {
  flex: none; width: 9px; height: 9px;
  border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint);
  transform: rotate(-45deg); transition: transform .2s ease; margin-right: 4px;
}
.acc[open] > summary { border-bottom: 1px solid var(--rule); }
.acc[open] .acc-chev { transform: rotate(45deg); }
.acc-body { padding: 14px 16px 16px; animation: fade .18s ease; }
.acc-body h3 { font-size: 15px; margin: 0 0 4px; }
.acc-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule-soft); }
.acc-row:first-of-type { margin-top: 10px; }

/* ═══════════════════════════════════════════════════════════════════════
   v4: the Tracking table.
   ═══════════════════════════════════════════════════════════════════════ */

.tg-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.tg-bar .seg { margin: 0; }
.tg-pin { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.tg-hint { margin: 10px 2px 0; font-size: 13px; }

.tg-card {
  border: 1.5px solid var(--rule); border-radius: var(--radius); background: var(--card);
  overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 18px rgba(15, 23, 42, .045);
}
/* The table scrolls inside its card, so the headings and the dates can stay put. */
.tg-scroll {
  overflow: auto; max-height: calc(100dvh - 330px); min-height: 280px;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.tg { border-collapse: separate; border-spacing: 0; font-size: 14px; min-width: 100%; }
.tg th, .tg td {
  padding: 9px 11px; text-align: left; vertical-align: top;
  background: var(--card); border-bottom: 1px solid var(--rule-soft); border-right: 1px solid var(--rule-soft);
}
.tg thead th {
  position: sticky; top: 0; z-index: 3; white-space: nowrap; padding: 11px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  background: color-mix(in srgb, var(--c, var(--accent)) 15%, var(--card));
  border-bottom: 3px solid var(--c, var(--accent));
}
.tg th.tg-c { min-width: 132px; }

/* Dates and who: narrow, and optionally fixed. */
.tg .tg-d, .tg .tg-w {
  position: sticky; left: 0; z-index: 2; background: var(--card-2);
  text-align: center; padding: 8px 4px;
}
.tg .tg-d { width: 56px; min-width: 56px; max-width: 56px; }
.tg .tg-d b { display: block; font-size: 13px; font-weight: 700; }
.tg .tg-d span { display: block; font-size: 11px; font-weight: 500; color: var(--ink-faint); margin-top: 1px; }
.tg .tg-w { left: 56px; width: 34px; min-width: 34px; max-width: 34px; }
.tg .tg-w i {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  font-style: normal; font-size: 10.5px; font-weight: 700; color: #fff;
}
.tg thead th.tg-d, .tg thead th.tg-w { z-index: 5; background: var(--card-2); border-bottom: 3px solid var(--rule); }
.tg-unpinned .tg .tg-d, .tg-unpinned .tg .tg-w { position: static; }

.tg tr.tg-first td { border-top: 2px solid var(--rule); }
.tg tr:first-child.tg-first td { border-top: 0; }
.tg td.tg-c { background: color-mix(in srgb, var(--c) 4%, var(--card)); min-width: 132px; }
.tg tr.tg-today td.tg-c { background: color-mix(in srgb, var(--c) 11%, var(--card)); }
.tg tr.tg-today td.tg-d { box-shadow: inset 3px 0 0 var(--accent); }
.tg tr.tg-today td.tg-d b { color: var(--accent); }

.tg-line { display: flex; gap: 7px; line-height: 1.4; margin-bottom: 3px; }
.tg-line::before {
  content: ''; flex: none; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%;
  background: var(--c, var(--accent));
}
.tg-plus { display: block; color: var(--c); opacity: .5; font-size: 18px; font-weight: 700; line-height: 1.1; }

.tg td.tg-own {
  cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.tg td.tg-own:hover { background: color-mix(in srgb, var(--c) 16%, var(--card)); }
.tg td.tg-own:hover .tg-plus { opacity: 1; }
.tg td.tg-own:active { box-shadow: inset 0 0 0 2px var(--c); }
.tg td.tg-own:focus-visible { outline: 2px solid var(--c); outline-offset: -2px; }
@keyframes tgFlash { from { background: color-mix(in srgb, var(--c) 38%, var(--card)); } }
.tg td.tg-flash { animation: tgFlash .6s ease-out; }

.tg th.th-own.picked { background: color-mix(in srgb, var(--c) 28%, var(--card)); }

/* The colour choice in the column editor. */
.swatches { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 6px; }
.sw {
  position: relative; width: 34px; height: 34px; border-radius: 50%; padding: 0;
  border: 2px solid transparent; cursor: pointer; display: grid; place-items: center;
  font: inherit; font-size: 10px; font-weight: 700; transition: transform .1s ease, border-color .15s ease;
}
.sw:active { transform: scale(.92); }
.sw.on { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--card); }
.sw-none { background: var(--card-2); border-color: var(--rule); color: var(--ink-soft); }
.sw-none.on { border-color: var(--ink); }
.sw-custom { background: conic-gradient(#f43f5e, #f59e0b, #84cc16, #06b6d4, #6366f1, #d946ef, #f43f5e); overflow: hidden; }
.sw-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

@media (prefers-reduced-motion: reduce) { .tg td.tg-flash { animation: none; } }

.tg-bar .seg { flex: 1 1 auto; }
.tg-bar .seg-btn { white-space: nowrap; padding-left: 14px; padding-right: 14px; }

/* Shared Tracking: each person's whole row in their own colour, with a line under it. */
.tg tr.tg-person td.tg-c { background: color-mix(in srgb, var(--p) 11%, var(--card)); border-bottom: 2px solid color-mix(in srgb, var(--p) 55%, var(--card)); }
.tg tr.tg-person.tg-today td.tg-c { background: color-mix(in srgb, var(--p) 18%, var(--card)); }
.tg tr.tg-person td.tg-own:hover { background: color-mix(in srgb, var(--p) 26%, var(--card)); }
.tg tr.tg-person td.tg-w { box-shadow: inset 4px 0 0 var(--p); border-bottom: 2px solid color-mix(in srgb, var(--p) 55%, var(--card)); }

/* Overall day */
.mood-grid { display: grid; grid-template-columns: repeat(var(--n, 6), 1fr); gap: 8px; }
.mood-btn {
  min-height: 52px; font-size: 28px; line-height: 1; padding: 0;
  background: var(--card); border: 1.5px solid var(--rule); border-radius: 14px; cursor: pointer;
  transition: transform .1s ease, background-color .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.mood-btn:active { transform: scale(.92); }
.mood-btn.on { background: var(--accent-soft); border-color: var(--accent); transform: scale(1.06); box-shadow: 0 2px 8px rgba(124, 92, 255, .25); }
.mood-sets { display: inline-flex; gap: 4px; padding: 2px; background: var(--card); border: 1px solid var(--rule); border-radius: 999px; }
.mood-set { border: 0; background: transparent; font: inherit; font-size: 11.5px; font-weight: 650; color: var(--ink-soft); padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.mood-set.on { background: var(--accent); color: #fff; }
.tg-emoji { font-size: 26px; line-height: 1.1; }

/* Overall day settings */
.emo-list, .emo-palette { display: flex; flex-wrap: wrap; gap: 8px; }
.emo-chip {
  position: relative; display: inline-grid; place-items: center; width: 50px; height: 50px; padding: 0;
  font-size: 26px; background: var(--card); border: 1.5px solid var(--rule); border-radius: 14px; cursor: pointer;
}
.emo-chip i { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; display: grid; place-items: center;
  font-style: normal; font-size: 10px; font-weight: 700; color: #fff; background: var(--ink-faint); border-radius: 50%; }
.emo-chip:active { transform: scale(.94); }
.emo-pick {
  width: 42px; height: 42px; padding: 0; font-size: 22px; background: var(--card-2);
  border: 1px solid var(--rule-soft); border-radius: 12px; cursor: pointer;
}
.emo-pick:active { transform: scale(.9); background: var(--accent-soft); }

/* Fitness */
.fit-types { display: flex; gap: 8px; margin-bottom: 14px; }
.fit-types .seg-btn { flex: 1; min-height: 44px; }
.fit-stats { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; gap: 6px; margin: 6px 0 12px; }
.fit-stats b { display: block; font-size: 30px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.fit-stats span { font-size: 12px; color: var(--ink-soft); }
.fit-live { margin: 8px 0; }
.fit-route { width: 100%; height: auto; background: var(--card-2); border: 1px solid var(--rule-soft); border-radius: var(--radius-sm); }
.fit-actions { justify-content: center; gap: 12px; }
.fit-actions .btn { min-width: 130px; min-height: 52px; font-size: 17px; }
.fit-start { min-width: 200px !important; }
.fit-note { margin: 12px 0 0; text-align: center; }
.fit-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 2px; border-top: 1px solid var(--rule-soft); cursor: pointer;
}
.fit-row-main { display: flex; flex-direction: column; gap: 2px; }
.fit-row-main span { font-size: 13px; color: var(--ink-soft); }

/* Groups */
.grp-row { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.grp-label { font-size: 12px; font-weight: 700; color: var(--ink-soft); letter-spacing: .04em; text-transform: uppercase; flex: none; }
.grp-chips { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.grp-chips::-webkit-scrollbar { display: none; }
.grp-chip { flex: none; min-height: 36px; padding: 0 14px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); background: var(--card); border: 1.5px solid var(--rule); border-radius: 999px; cursor: pointer; white-space: nowrap; }
.grp-chip.grp-example { border-style: dashed; }
.grp-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.grp-banner { margin: 0 0 12px; padding: 10px 13px; font-size: 13px; background: var(--accent-soft); border: 1px dashed var(--accent); border-radius: var(--radius-sm); }
.grp-members { display: grid; }
.grp-member { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule-soft); }
.grp-member .pb { flex: 1; min-width: 0; }
.grp-tag { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 4px; padding: 1px 5px; vertical-align: 2px; }
.grp-pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.grp-pill.yes { background: var(--good-soft); color: var(--good); }
.grp-pill.no { background: var(--card-2); color: var(--ink-soft); }
.grp-pill.wait { background: #fff7e0; color: #92620a; }
.grp-sample { display: grid; gap: 10px; }
.grp-srow { border: 1.5px solid color-mix(in srgb, var(--p) 55%, var(--card)); background: color-mix(in srgb, var(--p) 10%, var(--card)); border-radius: var(--radius-sm); padding: 10px 12px; }
.grp-sname { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 8px; }
.grp-scell { display: flex; gap: 8px; font-size: 14px; padding: 3px 0; }
.grp-scell span { flex: none; width: 84px; color: var(--ink-soft); font-size: 12.5px; padding-top: 1px; }
.grp-lock { font-size: 13px; color: var(--ink-soft); }

/* Home */
.home-hello { margin: 0 0 14px; font-size: 17px; color: var(--ink-soft); }
.home-range { margin-bottom: 16px; }
.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.home-stat {
  background: var(--card); border: 1.5px solid var(--rule); border-radius: var(--radius);
  padding: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 18px rgba(15, 23, 42, .045);
}
.hs-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.hs-ic { font-size: 20px; }
.hs-label { font-size: 12.5px; font-weight: 650; color: var(--ink-soft); }
.hs-value { font-size: 26px; font-weight: 750; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.hs-sub { font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; min-height: 16px; }
.home-pick { display: grid; gap: 4px; margin: 8px 0 4px; }
.home-opt { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--rule-soft); cursor: pointer; }
.home-opt input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.home-opt .ho-ic { font-size: 22px; }
.home-opt small { display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 1px; }

/* Groups, real */
.grp-chip.grp-add { border-style: dashed; color: var(--ink-soft); }
.grp-card { margin-bottom: 12px; }
.grp-card .row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.grp-member.grp-sub { padding: 6px 0 6px 52px; border-top: 0; justify-content: space-between; }
#grp-name { width: 100%; box-sizing: border-box; min-height: 44px; font: inherit; padding: 0 12px; border: 1.5px solid var(--rule); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); margin: 6px 0 14px; }

/* Tracking: a slimmer header so the table gets the room */
.trk-head { display: flex; gap: 8px; margin: 0 0 8px; }
.trk-head .seg { flex: 1; margin: 0; padding: 3px; }
.trk-head .seg-btn { min-height: 32px; font-size: 13px; padding: 0 8px; white-space: nowrap; }
#view-together .tg-bar { margin: 0 0 8px; gap: 8px; }
#view-together .tg-bar .seg-btn { min-height: 32px; font-size: 13px; }
#view-together .tg-bar .seg { padding: 3px; }
#view-together .tg-pin { font-size: 12px; gap: 6px; }
#group-strip .grp-row { margin: 0 0 8px; }
#view-together .grp-chip { min-height: 32px; font-size: 13px; padding: 0 12px; }
/* names instead of letters in the Who column */
.tg.tg-names .tg-w { width: 62px; min-width: 62px; max-width: 62px; padding: 8px 3px; }
.tg.tg-names .tg-w i { width: auto; max-width: 56px; height: auto; min-height: 20px; padding: 2px 6px; border-radius: 10px; font-size: 11px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
/* Menu order list */
.ord-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--rule-soft); }
.ord-row .ic { font-size: 20px; width: 28px; text-align: center; }
.ord-row b { flex: 1; font-weight: 600; }
.ord-row .btn { min-width: 44px; min-height: 40px; padding: 0; }
.ord-row.off { opacity: .55; }

#view-together .tg-bar { flex-wrap: nowrap; }
#view-together .tg-bar .seg { flex: 1 1 auto; min-width: 0; }
#view-together .tg-bar .seg-btn { padding: 0 8px; }

/* Tracking uses the whole screen: no top bar, the switches at the very top, the table running down to the menu */
body[data-view="together"] .topbar { display: none; }
@media (max-width: 759px) { body[data-view="together"] .app { display: block; min-height: 0; } }
body[data-view="together"] main.content {
  display: flex; flex-direction: column; box-sizing: border-box; height: 100dvh; min-height: 0;
  padding: calc(6px + env(safe-area-inset-top, 0px)) 8px calc(var(--nav-h) + 4px);
}
body[data-view="together"] #view-together.active { display: flex; flex-direction: column; flex: 1; min-height: 0; animation: none; }
#view-together .trk-head { flex: none; margin-bottom: 6px; }
#view-together #group-strip { flex: none; }
#view-together #together-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
#view-together .tg-bar { flex: none; margin-bottom: 6px; }
#view-together .tg-card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#view-together .tg-scroll { flex: 1; min-height: 0; max-height: none; }
#view-together .tg-hint { display: none; }

/* No top bar on any page, and no big page titles: the bottom menu already says where you are */
.topbar { display: none; }
@media (max-width: 759px) { .app { display: block; min-height: 0; } }
main.content { padding: calc(14px + env(safe-area-inset-top, 0px)) 12px calc(var(--nav-h) + 16px); }
.view > .page-title:not(#settings-title), .view > .page-sub:not(.keep) {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
#view-settings > .page-sub { position: static !important; width: auto; height: auto; margin: 4px 0 12px; clip: auto; overflow: visible; white-space: normal; }
#settings-title { font-size: 20px; margin: 0; }
.daynav { margin-top: 0; }
/* Tracking: a little breathing room above the switches */
body[data-view="together"] main.content { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }

#rm-cadence, #rm-for { width: 100%; min-width: 0; box-sizing: border-box; }

.trk-gear { flex: none; width: 40px; min-height: 38px; border: 1px solid var(--rule); border-radius: 999px; background: var(--card-2); color: var(--ink-soft); font-size: 19px; line-height: 1; cursor: pointer; }
.trk-head { align-items: stretch; }
.tg.tg-names .tg-w { width: 78px; min-width: 78px; max-width: 78px; }
.tg.tg-names .tg-w i { max-width: 72px; white-space: normal; overflow-wrap: anywhere; line-height: 1.2; }

/* Group invitations: the red alert in Profile and the pop-up */
.gi-alert { background: color-mix(in srgb, #ef4444 9%, var(--card)); border: 1.5px solid #ef4444; border-radius: var(--radius); padding: 12px 14px; margin: 0 0 14px; }
.gi-alert p { margin: 6px 0 8px; font-size: 14px; }
.gi-top { display: flex; align-items: center; gap: 8px; color: #ef4444; }
.gi-dot { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.25); }
.gi-pop { text-align: center; }
.gi-bell { font-size: 34px; }
.gi-line { font-size: 16px; margin: 4px 0 6px; }
.gi-x { border: 0; background: none; color: inherit; font-size: 15px; cursor: pointer; padding: 0 0 0 4px; }

.gi-later { display: block; width: 100%; min-height: 44px; margin-top: 4px; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }


/* Home cards: a grid of stat cards, clean until Edit is pressed (home-cards.js, home-charts.js) */
.home-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.home-head .home-hello { margin: 0; }
.hc-grid { position: relative; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); grid-auto-rows: 100px; grid-auto-flow: row dense; }
.hc-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden;
  background: var(--card); border: 1.5px solid var(--rule); border-radius: var(--radius);
  padding: 9px 10px 6px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 18px rgba(15, 23, 42, .045);
}
.hc-card .hs-top { margin: 0; height: 22px; flex: none; gap: 6px; }
.hc-card .hs-ic { font-size: 15px; line-height: 1; }
.hc-card .hs-label { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-days { font-size: 10px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 1px 5px; }
/* the handles: only they grab a touch (touch-action none), the rest of a card scrolls the page */
.hc-card .hs-top { padding-right: 22px; }
.hc-card.editing-card { z-index: 61; outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 1px; border-color: var(--accent); }
.hc-more { position: absolute; top: 0; right: 0; width: 44px; height: 38px; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--ink-soft); cursor: pointer; z-index: 2; padding: 0 4px 0 0; text-align: right; }
.hc-add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 40px; margin: 0 0 12px; border: 2px dashed var(--rule); border-radius: var(--radius);
  background: none; color: var(--ink-soft); font: inherit; font-weight: 650; cursor: pointer; }
.hc-add span { font-size: 20px; line-height: 1; }
/* a card's body: it scales with the card */
.hc-body { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }
.hc-num { flex: none; min-width: 0; }
.hc-num .hs-value { font-size: var(--nv, 24px); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-num .hs-sub { font-size: var(--ns, 12px); margin-top: 1px; min-height: 0; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-fill { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-bottom: 6px; }
.hc-chart { flex: 1; min-height: 0; min-width: 0; overflow: hidden; }
.hc-split { display: flex; gap: 8px; flex: 1; min-height: 0; }
.hc-side { flex: 0 0 auto; min-width: 0; max-width: 40%; display: flex; align-items: center; }
.hc-foot { flex: none; font-size: 11.5px; line-height: 1.35; color: var(--ink-soft); padding: 2px 0 2px 18px; }
.hc-foot b { color: var(--ink); }
.hc-empty { font-size: 12px; color: var(--ink-soft); margin: 6px 0; }
.hc-svg { display: block; max-width: 100%; }
.hc-svg .line { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hc-svg .line.thin { stroke-width: 1.8; }
.hc-svg circle { fill: var(--card); stroke: var(--accent); stroke-width: 1.5; }
.hc-svg .clip { fill: var(--accent); stroke: none; }
.hc-svg .hbar { fill: color-mix(in srgb, var(--accent) 55%, var(--card)); }
.hc-svg .hbar.hi { fill: var(--accent); }
.hc-svg .barv { fill: var(--ink-soft); font-weight: 650; }
.hc-svg .avg { stroke: var(--ink-faint); stroke-width: 1.2; stroke-dasharray: 4 3; }
.hc-svg .grid { stroke: var(--rule); stroke-width: 1; }
.hc-svg text { font-size: 9px; fill: var(--ink-faint); font-family: inherit; }
.hc-svg .lb { fill: var(--ink-soft); font-weight: 600; }
.hc-svg .lb.ax { fill: var(--ink-faint); font-weight: 500; }
.hc-svg .lb.now { fill: var(--ink); font-weight: 750; }
.hc-svg .lb.mean { fill: var(--ink-soft); }
.hc-svg .lpill { fill: var(--card); opacity: .8; stroke: none; }
.hc-svg circle.now { fill: var(--accent); stroke: var(--card); stroke-width: 1.5; }
.hc-svg .hit { fill: transparent; stroke: none; cursor: pointer; }
.hc-svg circle.hit { fill: transparent; stroke: none; }
.hc-tip { position: absolute; z-index: 8; pointer-events: none; background: var(--ink); color: var(--card); font-size: 11px; font-weight: 650; padding: 3px 8px; border-radius: 8px; white-space: nowrap; box-shadow: 0 3px 10px rgba(0, 0, 0, .3); }
.hc-line { display: flex; align-items: baseline; gap: 6px; }
.hc-line .hs-sub { flex: 1; min-width: 0; margin: 0; }
/* calendar: a rounded square a day, a row a week, a weekly badge at the end of the row */
.cal { --cs: 24px; --cg: 4px; width: fit-content; margin: 0 auto; }
.cal-row { display: flex; align-items: center; gap: var(--cg); margin-bottom: var(--cg); }
.cal-head i { height: 12px; line-height: 12px; width: var(--cs); text-align: center; font-style: normal; font-size: 10px; font-weight: 650; color: var(--ink-faint); }
.cal-d { flex: none; width: var(--cs); height: var(--cs); border-radius: calc(var(--cs) * .3); background: var(--rule); }
.cal-d.on { background: var(--good); }
.cal-d.part { background: color-mix(in srgb, var(--good) 45%, var(--rule)); }
.cal-d.pad { background: transparent; }
.cal-d.future { background: transparent; border: 1.5px dashed var(--rule); box-sizing: border-box; }
.cal-d.today { outline: 2px solid var(--accent); outline-offset: 1px; }
.cal-b { flex: none; width: calc(var(--cs) * 1.6); height: var(--cs); border-radius: calc(var(--cs) * .3); display: flex; align-items: center; justify-content: center;
  font-size: clamp(9px, calc(var(--cs) * .42), 12px); font-weight: 750; color: var(--ink-soft); background: var(--card-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cal-b.met { background: var(--good); color: #fff; }
.cal-b.open:not(.met) { border: 1.5px dashed var(--rule); background: none; box-sizing: border-box; }
.cal.mini .cal-b { font-size: 0; }
.cal.mini .cal-d.today { outline-width: 1.5px; outline-offset: 0; }
/* progress table */
.hc-body > .pt-wrap { flex: 1; min-height: 0; overflow: auto; margin: 0 -4px; }
.pt { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pt th, .pt td { padding: 6px 4px; text-align: center; border-top: 1px solid var(--rule-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pt thead th { position: sticky; top: 0; background: var(--card); border-top: 0; font-size: 11px; font-weight: 650; color: var(--ink-faint); z-index: 1; }
.pt tbody th { text-align: left; font-weight: 650; color: var(--ink); max-width: 112px; overflow: hidden; text-overflow: ellipsis; }
.pt tbody th span { margin-right: 6px; }
.pt td { font-weight: 650; }
.pt small { font-size: 10px; color: var(--ink-faint); margin-left: 1px; font-weight: 500; }
/* the edit panel: pinned to the bottom, no backdrop, no blur */
.hc-panel { position: fixed; left: 0; right: 0; width: 100%; max-width: 640px; margin: 0 auto; top: 50%; bottom: var(--pb, 0px); z-index: 62; background: var(--card);
  border: 2px solid var(--accent); border-top-width: 3px; border-radius: 0; box-shadow: 0 -10px 30px rgba(15, 23, 42, .35); padding: 12px 14px 16px; overflow-y: auto; overscroll-behavior: contain; }
.hc-scrim { position: fixed; left: 0; right: 0; top: 0; bottom: var(--pb, 0px); z-index: 55; background: rgba(8, 10, 18, .58); }
.hc-scrim[hidden] { display: none; }
.hc-panel[hidden] { display: none; }
.hp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; margin-bottom: 2px; }
.hp-row { display: flex; align-items: center; gap: 8px; margin: 5px 0; }
.hp-lab { flex: none; width: 54px; font-size: 11.5px; font-weight: 650; color: var(--ink-soft); }
.hp-chips { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.hp-chips .chip { min-height: 34px; padding: 0 10px; font-size: 13px; }
.hp-chips .chip.on, .hc-size.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 700; }
.hc-size { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 50px; padding: 4px 6px 3px; border: 1px solid var(--rule); border-radius: 10px; background: var(--card); font: inherit; font-size: 11px; color: var(--ink-soft); cursor: pointer; }
.hc-dia { display: flex; align-items: center; justify-content: center; width: 28px; height: 18px; }
.hc-dia i { display: block; background: currentColor; border-radius: 2px; opacity: .8; }
.hc-undo { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--pb, 0px) + 14px); z-index: 60; display: flex; align-items: center; gap: 16px;
  background: var(--ink); color: var(--card); border-radius: 12px; padding: 10px 14px; font-size: 14px; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
.hc-undo button { border: 0; background: none; color: var(--accent-soft); font: inherit; font-weight: 750; text-decoration: underline; cursor: pointer; }
/* the Add card list */
.hc-grp { margin: 14px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
.home-opt .ho-main { flex: 1; min-width: 0; }
.hc-styles { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.hc-style { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 8px 4px; border: 1px solid var(--rule); border-radius: 10px; background: var(--card); color: var(--accent); font: inherit; font-size: 11px; cursor: pointer; }
.hc-style span { color: var(--ink-soft); }
.hc-style:active { transform: scale(.95); }

.hc-reset { display: block; margin: 14px auto 2px; border: 0; background: none; color: var(--ink-faint); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; min-height: 40px; }

/* several styles in one card */
.hc-multi { flex: 1; min-height: 0; display: flex; gap: 6px; overflow: hidden; }
.hc-mstack { flex-direction: column; }
.hc-mside, .hc-mrow { flex-direction: row; gap: 8px; }
.hc-multi .hc-chart { overflow: hidden; }
.hc-plus { position: absolute; top: 7px; right: 36px; z-index: 2; min-width: 26px; height: 20px; padding: 0 6px; border: 0; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }
.chip.static { cursor: default; }

.hc-card:has(.hc-plus) .hs-top { padding-right: 62px; }
.hc-svg .lpill { opacity: .9; }

/* ───────────────────────────── Badges, XP, levels and the scoreboard
   Tier colours are plain tokens so a badge reads the same on the Home card, the Profile card and the sheet. */
:root {
  --t-bronze: #b4690e; --t-silver: #7b8798; --t-gold: #c98a00; --t-platinum: #0e9bb8;
}
:root[data-dark] {
  --t-bronze: #e0914a; --t-silver: #b4bfd0; --t-gold: #f0b429; --t-platinum: #5ad1ec;
}
.tier-bronze { --tc: var(--t-bronze); }
.tier-silver { --tc: var(--t-silver); }
.tier-gold { --tc: var(--t-gold); }
.tier-platinum { --tc: var(--t-platinum); }

.ach-bar { height: 8px; border-radius: 99px; background: var(--rule); overflow: hidden; margin: 6px 0; flex: none; }
.ach-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #f0b429)); }
.ach-bar.thin { height: 5px; margin: 4px 0 0; }

.ach-c { display: flex; flex-direction: column; min-height: 0; min-width: 0; flex: 1; overflow: hidden; justify-content: center; }
.ach-big { font-size: 22px; font-weight: 780; line-height: 1.12; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ach-sm { font-size: 12px; color: var(--ink-soft); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ach-l1 .ach-big { font-size: 24px; }
.ach-lrow { flex-direction: row; align-items: center; gap: 12px; }
.ach-lside { flex: none; max-width: 46%; min-width: 0; }
.ach-lmain { flex: 1; min-width: 0; }
.ach-lbig { align-items: center; text-align: center; gap: 6px; }
.ach-lbig.row { flex-direction: row; text-align: left; gap: 14px; justify-content: flex-start; }
.ach-ltxt { min-width: 0; width: 100%; flex: 1; }
.ach-lbig:not(.row) .ach-ltxt { flex: none; }
.ach-ring .ar-bg { fill: none; stroke: var(--rule); stroke-width: 6; }
.ach-ring .ar-fg { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; }
.ach-ring .ar-n { fill: var(--ink); font-weight: 800; }
.ach-ring .ar-l { fill: var(--ink-faint); font-weight: 700; letter-spacing: .08em; }
.ach-ring { flex: none; }

.ach-head { display: flex; align-items: baseline; gap: 8px; height: 24px; flex: none; min-width: 0; }
.ach-head b { font-size: 17px; font-weight: 780; white-space: nowrap; }
.ach-head span { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ach-brow { flex-direction: row; align-items: center; gap: 10px; }
.ach-tiles { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; min-width: 0; overflow: hidden; }
.ach-brow .ach-tiles { flex: 1; flex-wrap: nowrap; gap: 5px; }
.ach-t {
  display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0; line-height: 1;
  border: 2px solid var(--tc, var(--rule)); border-radius: 12px; cursor: pointer; font-family: inherit;
  background: color-mix(in srgb, var(--tc, var(--ink-faint)) 14%, var(--card)); color: var(--ink);
}
.ach-t.off { filter: grayscale(1); opacity: .42; border-style: dashed; border-color: var(--rule); background: var(--card-2); }
.ach-t.more { font-size: 12px; font-weight: 750; color: var(--ink-soft); border-style: solid; border-color: var(--rule); background: var(--card-2); cursor: default; }
.ach-t:active { transform: scale(.94); }

.ach-board { display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; }
.ach-r { display: flex; align-items: center; gap: 8px; height: 24px; flex: none; padding: 0 6px; border-radius: 8px; font-size: 12.5px; min-width: 0; }
.ach-r .r { width: 20px; flex: none; font-weight: 780; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ach-r .n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ach-r .n em { font-style: normal; font-size: 10.5px; font-weight: 750; margin-left: 4px; padding: 1px 6px; border-radius: 99px; background: var(--accent); color: #fff; }
.ach-r .l { flex: none; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ach-r .x { flex: none; min-width: 64px; text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.ach-r.me { background: var(--accent-soft); color: var(--ink); font-weight: 700; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.ach-r.me .r { color: var(--accent); }
.ach-gap { height: 12px; line-height: 6px; text-align: center; color: var(--ink-faint); font-size: 12px; flex: none; }
.ach-board.big { margin: 4px 0 6px; }
.ach-board.big .ach-r { height: 34px; font-size: 14px; }

/* the Profile card */
.ach-hero { display: flex; align-items: center; gap: 16px; padding: 4px 0 12px; }
.ach-hero .ach-big { font-size: 24px; }
.ach-cats { margin: 4px 0 12px; }
.ach-cats .chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 700; }
.ach-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .ach-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ach-p {
  display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 10px; min-width: 0; font: inherit; color: var(--ink); cursor: pointer;
  border: 1.5px solid var(--tc); border-radius: 12px; background: color-mix(in srgb, var(--tc) 9%, var(--card));
}
.ach-p .ap-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ach-p .ap-ic { font-size: 24px; line-height: 1; flex: none; }
.ach-p .ap-name { font-size: 13.5px; font-weight: 720; line-height: 1.2; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ach-p .ap-line { font-size: 11.5px; color: var(--ink-soft); line-height: 1.3; min-height: 44px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.ach-p .ap-num { font-size: 11px; color: var(--ink-faint); font-weight: 650; font-variant-numeric: tabular-nums; }
.ach-p .ach-bar { margin: 3px 0 0; }
.ach-p.off { border-style: dashed; border-color: var(--rule); background: var(--card-2); }
.ach-p.off .ap-ic { filter: grayscale(1); opacity: .5; }
.ach-p.off .ap-name { color: var(--ink-soft); }
.ach-h { font-size: 15px; margin: 18px 0 2px; }
.ach-how { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.ach-how li { margin-bottom: 5px; }

/* the badge sheet */
.ach-sheet { text-align: center; }
.ach-sheet .as-ic { width: 84px; height: 84px; margin: 4px auto 8px; display: flex; align-items: center; justify-content: center; font-size: 44px; border-radius: 24px; border: 3px solid var(--tc); background: color-mix(in srgb, var(--tc) 15%, var(--card)); }
.ach-sheet.off .as-ic { filter: grayscale(1); opacity: .5; border-style: dashed; border-color: var(--rule); background: var(--card-2); }
.ach-sheet .as-pills { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 6px 0 10px; }
.ach-pill { font-size: 11.5px; font-weight: 750; padding: 3px 10px; border-radius: 99px; background: var(--tc); color: #fff; }
.ach-pill.plain { background: var(--card-2); color: var(--ink-soft); }
.ach-sheet .as-hint { font-size: 13.5px; margin: 0 0 6px; }
.ach-sheet .as-prog, .ach-sheet .as-xp { font-size: 13px; color: var(--ink-soft); margin: 2px 0; }

/* the unlock pop-up */
.ach-pop {
  position: fixed; left: 50%; top: calc(12px + env(safe-area-inset-top, 0px)); z-index: 400; display: flex; align-items: center; gap: 12px;
  width: min(92vw, 360px); padding: 12px 16px; border-radius: 16px; background: var(--card); color: var(--ink);
  border: 2px solid var(--tc); box-shadow: 0 12px 34px rgba(15, 23, 42, .3); transform: translateX(-50%);
  animation: ach-in .35s cubic-bezier(.2, 1.3, .4, 1);
}
.ach-pop.out { opacity: 0; transform: translate(-50%, -14px); transition: opacity .3s ease, transform .3s ease; }
.ach-pop .ap-ic { font-size: 32px; line-height: 1; }
.ach-pop .ap-t { display: flex; flex-direction: column; min-width: 0; }
.ach-pop b { font-size: 14px; }
.ach-pop small { font-size: 12px; color: var(--ink-soft); }
@keyframes ach-in { from { opacity: 0; transform: translate(-50%, -24px) scale(.92); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .ach-pop { animation: none; } }
.ach-fail { align-items: flex-start; gap: 6px; }
.ach-fail .btn { min-height: 30px; padding: 4px 12px; font-size: 12.5px; }
.ach-link { flex: none; margin-left: 4px; padding: 0; border: 0; background: none; font: inherit; font-size: 11.5px; font-weight: 500; line-height: 1.2; color: color-mix(in srgb, var(--accent) 80%, var(--ink-soft)); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; cursor: pointer; }
.ach-link:active { opacity: .6; }
.hc-card .hs-top .hs-label { flex: 0 1 auto; min-width: 0; }
.settings-head { margin: 22px 0 10px; padding: 0 2px; }
.settings-head h3 { font-size: 13px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); margin: 0; }
.settings-head p { margin: 2px 0 0; font-size: 13px; color: var(--ink-soft); }
.day-switch { flex-direction: column; align-items: stretch; gap: 6px; }
.day-switch .seg { margin: 0; }
.day-switch .daynav-date { text-align: center; }
.tg-c.tg-locked { cursor: not-allowed; opacity: .92; }

/* Badges card styles: Icons, Rows, Words */
.ach-bare { gap: 3px; }
.ach-i { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; background: none; font-size: 20px; line-height: 1; cursor: pointer; font-family: inherit; color: var(--ink); }
.ach-i.off { filter: grayscale(1); opacity: .38; }
.ach-i.more { font-size: 11px; font-weight: 750; color: var(--ink-soft); cursor: default; width: auto; padding: 0 6px; }
.ach-list { display: flex; flex-direction: column; gap: 0; min-height: 0; overflow: hidden; }
.ach-rw { display: flex; align-items: center; gap: 8px; height: 30px; flex: none; padding: 0 2px; border: 0; border-top: 1px solid var(--rule-soft); background: none; font: inherit; font-size: 12.5px; color: var(--ink); text-align: left; cursor: pointer; min-width: 0; }
.ach-rw:first-child { border-top: 0; }
.ach-rw .rw-ic { flex: none; width: 22px; text-align: center; font-size: 17px; }
.ach-rw .rw-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.ach-rw .rw-r { flex: none; display: flex; align-items: center; gap: 6px; width: 46%; max-width: 150px; justify-content: flex-end; min-width: 0; }
.ach-rw .rw-r .ach-bar { flex: 1; margin: 0; min-width: 24px; }
.ach-rw .rw-num { font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ach-rw .rw-tier { font-size: 11px; font-weight: 750; color: var(--tc); }
.ach-rw.off .rw-ic { filter: grayscale(1); opacity: .45; }
.ach-rw.off .rw-n { color: var(--ink-soft); font-weight: 550; }
.ach-more { font-size: 11px; color: var(--ink-faint); padding: 2px; flex: none; }
.ach-words { display: grid; grid-template-columns: repeat(var(--wc, 1), minmax(0, 1fr)); column-gap: 10px; align-content: start; min-height: 0; overflow: hidden; }
.ach-wd { display: flex; align-items: center; gap: 5px; height: 19px; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; color: var(--ink); text-align: left; cursor: pointer; min-width: 0; }
.ach-wd i { flex: none; width: 12px; font-style: normal; font-weight: 800; color: var(--good); }
.ach-wd span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ach-wd em { flex: none; font-style: normal; font-size: 10.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ach-wd.off { color: var(--ink-faint); }
.ach-c:has(> .ach-list), .ach-c:has(> .ach-words), .ach-c:has(> .ach-bare) { justify-content: flex-start; }

.hc-tool { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 62px; min-height: 48px; padding: 4px 8px; border: 1px solid var(--rule); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; font-size: 11px; cursor: pointer; }
.hc-tool b { font-size: 20px; line-height: 1; font-weight: 600; }
.hc-tool:active { background: var(--accent-soft); border-color: var(--accent); }
.hc-tool:disabled { opacity: .35; cursor: default; }
.hc-card.hc-flash { animation: hc-flash .7s ease; }
@keyframes hc-flash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 55%, transparent); } }
.hp-chips.hc-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 1; gap: 6px; }
.hc-tools .hc-tool { min-width: 0; width: 100%; padding: 4px 2px; }

/* Profile badges: My badges / Locked / All */
.ach-seg { margin: 4px 0 8px; }
.ach-seg .seg-btn small, .ach-cats .chip small { font-size: 11px; font-weight: 700; opacity: .65; margin-left: 2px; }
.ach-gh { margin: 8px 0 6px; }
.ach-mine { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) { .ach-mine { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ach-m { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px 12px; min-width: 0; font: inherit; color: var(--ink); cursor: pointer; text-align: center;
  border: 2px solid var(--tc); border-radius: 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--tc) 22%, var(--card)), color-mix(in srgb, var(--tc) 6%, var(--card))); }
.ach-m:active { transform: scale(.97); }
.ach-m .am-ic { font-size: 38px; line-height: 1.1; }
.ach-m .am-name { font-size: 14px; font-weight: 750; line-height: 1.2; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: 4px; }
.ach-m .am-tier { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--tc); }
.ach-m .am-xp { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ach-empty { display: flex; flex-direction: column; gap: 6px; align-items: stretch; padding: 12px; border: 1px dashed var(--rule); border-radius: 14px; text-align: center; }
.ach-empty > span { color: var(--ink-soft); font-size: 13px; }
.ach-empty .ach-p { text-align: left; }
.ach-seg .seg-btn { white-space: nowrap; }
.ach-seg .seg-btn small, .ach-cats .chip small { display: inline; }


/* ───────────────────────────── Food (its own page; only for people it has been given to)
   Cards here are set apart on purpose: each has its own border and lift, the numbers sit in a real table, and the day's total is a row of
   its own, so nothing runs into the card above it. */
#view-food .fd { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-bottom: 8px; }
#view-food .fd > * { min-width: 0; }
#view-food .fd .card { margin: 0; border: 1px solid var(--rule); box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 22px rgba(15, 23, 42, .07); padding: 16px; }
:root[data-dark] #view-food .fd .card { box-shadow: 0 0 0 1px rgba(255, 255, 255, .02), 0 8px 24px rgba(0, 0, 0, .45); border-color: #2c3445; }
#view-food .fd h3 { font-size: 15px; letter-spacing: .01em; margin: 0; }

.fd-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fd-when { text-align: center; line-height: 1.2; }
.fd-when b { display: block; font-size: 17px; }
.fd-when small { color: var(--ink-soft); font-size: 12px; }
.fd-step { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule); background: var(--card); color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); transition: transform .12s, background .15s; }
.fd-step:active { transform: scale(.92); }
.fd-step:disabled { opacity: .35; cursor: default; }

/* the day at a glance */
#view-food .fd .fd-hero { background: linear-gradient(160deg, var(--accent-soft), var(--card) 70%); border-color: var(--accent); }
.fd-kcal { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fd-kcal b { font-size: 38px; line-height: 1; font-variant-numeric: tabular-nums; }
.fd-kcal span { color: var(--ink-soft); font-size: 14px; }
.fd-kcal em { margin-left: auto; font-style: normal; font-weight: 700; font-size: 14px; color: var(--accent); }
.fd-bar { height: 9px; border-radius: 6px; background: var(--rule); overflow: hidden; margin: 10px 0 2px; }
.fd-bar i { display: block; height: 100%; border-radius: 6px; background: var(--accent); transition: width .45s cubic-bezier(.2, .8, .2, 1); }
.fd-bar i.over { background: #e0763a; }
.fd-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
.fd-tile { background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--ink-faint); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.fd-tile.p { border-top-color: var(--c-protein); } .fd-tile.c { border-top-color: var(--c-carbs); } .fd-tile.f { border-top-color: var(--c-fat); } .fd-tile.i { border-top-color: var(--good); }
.fd-tile span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.fd-tile b { display: block; font-size: 24px; font-variant-numeric: tabular-nums; }
.fd-tile b small, .fd-tile > small { font-size: 12px; font-weight: 400; color: var(--ink-soft); }

/* adding food */
.fd-addcard { border-left: 4px solid var(--accent) !important; }
.fd-addcard input[type=text] { width: 100%; box-sizing: border-box; margin-top: 10px; font-size: 17px; padding: 13px 14px; border-radius: 12px; border: 2px solid var(--rule); background: var(--card-2); color: var(--ink); transition: border-color .15s, background .15s; }
.fd-addcard input[type=text]:focus { outline: none; border-color: var(--accent); background: var(--card); }
.fd-hint { color: var(--ink-soft); font-size: 12.5px; margin: 8px 2px 0; }
.fd-quick:empty { display: none; }
.fd-qlabel { margin: 14px 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); }
.fd-qrow { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.fd-qrow::-webkit-scrollbar { display: none; }
.fd-q { flex: none; display: grid; text-align: left; gap: 1px; border: 1px solid var(--rule); background: var(--card-2); color: var(--ink); border-radius: 12px; padding: 8px 12px; cursor: pointer; transition: transform .1s, background .15s, border-color .15s; max-width: 190px; }
.fd-q:active { transform: scale(.95); background: var(--accent-soft); border-color: var(--accent); }
.fd-q b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-q small { color: var(--ink-soft); font-size: 11.5px; }
.fd-pv { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.fd-pv > li { background: var(--card-2); border: 1px solid var(--rule); border-radius: 12px; padding: 10px 12px; animation: fd-in .18s ease-out; }
.fd-pv-top { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.fd-pv-top span { color: var(--ink-soft); }
.fd-cands { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.fd-c { border: 1px solid var(--rule); background: var(--card); color: var(--ink); border-radius: 99px; padding: 6px 12px; font-size: 13px; cursor: pointer; transition: background .12s, color .12s; }
.fd-c.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.fd-pv-n { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px; }
.fd-pv-n input { width: 84px; font-size: 15px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); }
.fd-miss small { display: block; color: var(--ink-soft); }
.fd-add-row { display: flex; gap: 8px; margin-top: 12px; }
.fd-go { flex: 1; min-height: 48px; border: 0; border-radius: 12px; background: var(--accent); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; transition: transform .1s, opacity .15s; }
.fd-go:active { transform: scale(.98); }
.fd-go:disabled { opacity: .4; cursor: default; }
.fd-quiet { min-height: 48px; padding: 0 16px; border: 1px solid var(--rule); border-radius: 12px; background: var(--card); color: var(--ink-soft); font-size: 14px; cursor: pointer; }

/* the day's food: a real table */
.fd-dayhead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.fd-dayhead h3 { font-size: 17px; }
.fd-dayhead span { color: var(--ink-soft); font-size: 12.5px; }
.fd-wrap { overflow-x: auto; margin: 0 -6px; padding: 0 6px; }
.fd-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.fd-tbl th { position: sticky; top: 0; background: var(--card-2); color: var(--ink-soft); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 8px 6px; text-align: right; white-space: nowrap; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.fd-tbl th:first-child { border-left: 1px solid var(--rule); border-radius: 10px 0 0 0; }
.fd-tbl th:last-child { border-right: 1px solid var(--rule); border-radius: 0 10px 0 0; }
.fd-tbl th i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; background: var(--ink-faint); }
.fd-tbl th.p i { background: var(--c-protein); } .fd-tbl th.c i { background: var(--c-carbs); } .fd-tbl th.f i { background: var(--c-fat); }
.fd-tbl td { padding: 10px 6px; text-align: right; border-bottom: 1px solid var(--rule-soft); white-space: nowrap; }
.fd-tbl tbody tr:nth-child(even) td { background: var(--card-2); }
.fd-tbl .nm { text-align: left; white-space: normal; min-width: 118px; }
.fd-tbl td.nm b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.fd-tbl td.nm small { display: block; color: var(--ink-soft); font-size: 11.5px; margin-top: 1px; }
.fd-tbl td.k { font-weight: 700; font-size: 14px; }
.fd-tbl td.p { color: var(--c-protein); font-weight: 600; } .fd-tbl td.c { color: var(--c-carbs); font-weight: 600; } .fd-tbl td.f { color: var(--c-fat); font-weight: 600; }
.fd-tbl td.x, .fd-tbl th.x { width: 30px; padding-left: 0; padding-right: 0; }
.fd-tbl tr.pending td { opacity: .6; }
.fd-tbl tr.fresh { animation: fd-row .35s ease-out; }
.fd-tbl tfoot td { position: sticky; bottom: 0; background: var(--accent-soft); border-top: 2px solid var(--accent); border-bottom: 0; font-weight: 800; font-size: 14px; padding: 12px 6px; }
.fd-tbl tfoot td.nm { border-radius: 0 0 0 10px; }
.fd-tbl tfoot td.x { border-radius: 0 0 10px 0; }
.fd-x { border: 0; background: transparent; color: var(--ink-faint); font-size: 22px; line-height: 1; padding: 4px 8px; cursor: pointer; border-radius: 8px; }
.fd-x:hover { color: #c8553d; background: var(--rule-soft); }
.fd-empty { display: grid; gap: 3px; text-align: center; padding: 22px 8px; background: var(--card-2); border: 1px dashed var(--rule); border-radius: 12px; color: var(--ink-soft); font-size: 13px; }
.fd-empty b { color: var(--ink); font-size: 15px; }

/* the rest */
.fd-all summary { cursor: pointer; font-weight: 700; font-size: 15px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.fd-all summary::after { content: '+'; font-size: 20px; color: var(--ink-soft); }
.fd-all[open] summary::after { content: '\2212'; }
.fd-t { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px; }
.fd-t th { color: var(--ink-soft); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; text-align: left; padding: 6px; }
.fd-t td { padding: 7px 6px; border-top: 1px solid var(--rule-soft); white-space: nowrap; }
.fd-t .n { text-align: right; font-variant-numeric: tabular-nums; }
.fd-t td .fd-bar { margin: 0; min-width: 70px; }
.fd-note { color: var(--ink-soft); font-size: 12.5px; margin: 10px 0 0; }
.fd-recent { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 10px; }
.fd-rd { display: grid; gap: 1px; justify-items: center; border: 1px solid var(--rule); background: var(--card-2); color: var(--ink); border-radius: 10px; padding: 8px 2px; cursor: pointer; font-size: 11px; min-width: 0; transition: transform .1s; }
.fd-rd:active { transform: scale(.94); }
.fd-rd b { font-size: 14px; font-variant-numeric: tabular-nums; }
.fd-rd small { color: var(--ink-soft); font-size: 10px; }
.fd-rd.on { border-color: var(--accent); background: var(--accent-soft); }
.fd-src { color: var(--ink-faint); font-size: 12px; margin: 0 4px; }

/* waiting for the first answer */
.fd-sk { border-radius: 12px; background: linear-gradient(90deg, var(--rule-soft) 25%, var(--rule) 37%, var(--rule-soft) 63%); background-size: 400% 100%; animation: fd-shimmer 1.3s ease infinite; }
@keyframes fd-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes fd-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fd-row { from { background: var(--accent-soft); transform: translateY(-4px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (min-width: 560px) { .fd-tiles { grid-template-columns: repeat(4, 1fr); } }
.fd-tbl th .s { display: none; }
@media (max-width: 519px) {
  .fd-tbl th .l { display: none; } .fd-tbl th .s { display: inline; }
  .fd-tbl th, .fd-tbl td { padding-left: 3px; padding-right: 3px; }
  .fd-tbl .nm { min-width: 0; padding-left: 8px; width: 40%; } .fd-tbl td.nm b { font-size: 13px; }
  .fd-tbl td { font-size: 12.5px; } .fd-tbl td.k { font-size: 13.5px; }
  .fd-tbl td.x, .fd-tbl th.x { width: 24px; } .fd-x { padding: 4px 4px; }
  #view-food .fd .card { padding: 14px 12px; }
}
@media (prefers-reduced-motion: reduce) { .fd-bar i, .fd-tbl tr.fresh, .fd-pv > li, .fd-sk { animation: none; transition: none; } }


/* Your colour, in Shared Tracking */
.tg-colour { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); border-radius: 99px; padding: 6px 12px 6px 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.tg-colour i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.tg-colour:active { transform: scale(.96); }
.tg-clash { margin: 8px 0 0; padding: 10px 12px; border: 1px solid var(--warn); border-radius: 12px; background: rgba(180, 83, 9, .08); font-size: 13px; line-height: 1.4; }
.tg-clash button { border: 0; background: transparent; color: var(--accent); font-weight: 700; font-size: 13px; padding: 0; cursor: pointer; text-decoration: underline; }

/* foods people ask for */
.fd-link { display: block; margin: 12px 2px 0; padding: 0; border: 0; background: transparent; color: var(--accent); font-size: 13px; font-weight: 600; text-decoration: underline; cursor: pointer; text-align: left; }
.fd-req { margin-top: 8px; border: 1px dashed var(--accent); background: var(--accent-soft); color: var(--ink); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: left; width: 100%; box-sizing: border-box; }
.fd-rqf { display: grid; gap: 10px; margin-top: 12px; padding: 12px; border: 1px solid var(--accent); border-radius: 12px; background: var(--card-2); animation: fd-in .18s ease-out; }
.fd-rqf label { display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-soft); }
.fd-rqf input, .fd-rqf textarea { font: inherit; font-size: 15px; padding: 10px 11px; border-radius: 10px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); width: 100%; box-sizing: border-box; resize: vertical; }
#view-food .fd .fd-review { border: 2px solid var(--warn); background: linear-gradient(160deg, rgba(180, 83, 9, .08), var(--card) 60%); }
.fd-rv-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.fd-rv-n { background: #dc2626; color: #fff; border-radius: 99px; min-width: 22px; height: 22px; line-height: 22px; text-align: center; font-size: 12px; font-weight: 700; padding: 0 6px; }
.fd-rv { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fd-rv > li { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 10px 12px; }
.fd-rv-top { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.fd-rv-top small, .fd-rv-note { color: var(--ink-soft); font-size: 12.5px; }
.fd-rv-act { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.fd-rv-act input { flex: 1 1 140px; min-width: 0; font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--rule); background: var(--card-2); color: var(--ink); }
.fd-sm { min-height: 38px !important; padding: 0 14px !important; font-size: 13.5px !important; flex: none !important; }
.fd-my { list-style: none; margin: 8px 0 0; padding: 0; }
.fd-my li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--rule-soft); }
.fd-my li:first-child { border-top: 0; }
.fd-my small { display: block; color: var(--ink-soft); font-size: 12px; }
.fd-st { flex: none; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: var(--rule-soft); color: var(--ink-soft); }
.fd-st.added { background: var(--good-soft); color: var(--good); }
.fd-st.open { background: rgba(180, 83, 9, .12); color: var(--warn); }
.fd-cf-host { margin-top: 8px; }
.fd-cf-host:empty { display: none; }
.fd-cf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fd-cf .fd-rqf-b, .fd-cf b { font-size: 13px; }

/* Food: add a food, new recipe, and a calmer phone layout */
.fd-own { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.fd-own .fd-quiet { flex: 1 1 140px; padding: 11px 12px; font-size: 14px; font-weight: 600; }
.fd-form { display: grid; gap: 10px; margin-top: 12px; padding: 12px; border: 1px solid var(--accent); border-radius: 12px; background: var(--card-2); animation: fd-in .18s ease-out; }
.fd-form > b { font-size: 15px; }
.fd-form label { display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-soft); min-width: 0; }
.fd-form input { font: inherit; font-size: 16px; padding: 10px 11px; border-radius: 10px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); width: 100%; box-sizing: border-box; min-width: 0; }
.fd-form input:focus { outline: none; border-color: var(--accent); }
.fd-sub { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.4; }
.fd-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fd-sum { font-size: 14px; color: var(--ink-soft); }
.fd-sum b { color: var(--ink); }
.fd-form .fd-add-row { flex-wrap: wrap; margin-top: 4px; }
.fd-form .fd-add-row .fd-go { flex: 1 1 100%; }
.fd-form .fd-add-row .fd-quiet { flex: 1 1 40%; }
.fd-pv > li, .fd-cands { min-width: 0; }
.fd-cands { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fd-c { max-width: 100%; text-align: left; white-space: normal; }
#fd-preview .fd-add-row { position: sticky; bottom: 8px; z-index: 3; padding: 8px; margin-inline: -4px; background: var(--card); border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
#fd-preview .fd-add-row .fd-go { flex: 1 1 auto; }
@media (max-width: 519px) {
  #view-food .fd-hero { padding: 12px 12px; }
  .fd-kcal b { font-size: 30px; }
  .fd-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
  .fd-tile { padding: 8px 6px; border-radius: 10px; }
  .fd-tile span { font-size: 9.5px; letter-spacing: .02em; }
  .fd-tile b { font-size: 17px; }
  .fd-tile b small { font-size: 10px; }
  .fd-tile > small { display: none; }
  .fd-pv-n { gap: 8px; }
  .fd-pv-n input { width: 76px; font-size: 16px; }
  .fd-addcard input[type=text] { font-size: 16px; }
}

/* Food on a phone: while typing, the keyboard takes the lower half, so the box rises and the suggestions are one compact card */
#fd-q { scroll-margin-top: 56px; }
@media (max-width: 759px) {
  .fd-addcard.typing .fd-quick, .fd-addcard.typing .fd-hint, .fd-addcard.typing .fd-own { display: none; }
  .fd-pv { margin-top: 8px; gap: 8px; }
  .fd-pv > li { padding: 8px 10px; }
  .fd-pv .fd-cands { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 6px; padding-bottom: 4px; scrollbar-width: none; }
  .fd-pv .fd-cands::-webkit-scrollbar { display: none; }
  .fd-pv .fd-c { flex: 0 0 auto; white-space: nowrap; }
  .fd-pv-n { margin-top: 6px; }
}

/* Mantra: a full-screen feed. Each card wears one of seven looks (set per slide), and the chrome (top bar, buttons) follows the look on screen. */
body[data-view="mantra"] .topbar { display: none; }
body[data-view="mantra"] main.content { padding: 0; }
body[data-view="mantra"] #view-mantra.active { animation: none; display: block; }
.mf {
  --mf-h: calc(100dvh - var(--nav-h));
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Inter, system-ui, sans-serif;
  --serif: "Iowan Old Style", Charter, "Source Serif 4", Georgia, "Times New Roman", serif;
  position: relative; height: var(--mf-h); overflow: hidden; font-family: var(--font); background: #fbfbfd;
  --cfg: #1d1d1f; --cmuted: #6e6e73; --cchip: rgba(0,0,0,.07); --cbtn: #fff; --cshadow: 0 2px 10px rgba(0,0,0,.14);
}
@media (min-width: 760px) { .mf { --mf-h: calc(100dvh - 84px); border-radius: 18px; } }
.mf[data-skin="neon"], .mf[data-skin="gold"], .mf[data-skin="forest"], .mf[data-skin="sunset"] { --cfg: #fff; --cmuted: rgba(255,255,255,.72); --cchip: rgba(255,255,255,.16); --cbtn: rgba(0,0,0,.34); --cshadow: none; }
.mf-top { position: absolute; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; gap: 8px; padding: max(12px, env(safe-area-inset-top)) 12px 8px; color: var(--cfg); }
.mf-pick { display: flex; align-items: center; gap: 6px; border: 0; background: var(--cchip); color: inherit; padding: 9px 14px; border-radius: 999px; font: 700 14px/1 var(--font); white-space: nowrap; cursor: pointer; }
.mf-pick svg { width: 14px; height: 14px; }
.mf-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; }
.mf-tabs::-webkit-scrollbar { display: none; }
.mf-tabs button { flex: 0 0 auto; border: 0; background: none; color: var(--cmuted); padding: 9px 12px; font: 700 14px/1 var(--font); border-radius: 999px; white-space: nowrap; cursor: pointer; }
.mf-tabs button.on { color: var(--cfg); background: var(--cchip); }
.mf-reel { height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.mf-reel::-webkit-scrollbar { display: none; }
.mf-slide { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; justify-content: center; padding: 92px 74px 74px 22px; overflow: hidden; background: var(--bg); color: var(--fg); }
.mf-inner { position: relative; z-index: 1; display: flex; flex-direction: column; max-width: 560px; }
.mf-inner > :first-child { margin-top: 0; }
.mf-art { position: absolute; right: -18px; bottom: 96px; width: 230px; height: 230px; pointer-events: none; opacity: var(--artop, .14); color: var(--art, currentColor); z-index: 0; }
.mf-artsvg { width: 100%; height: 100%; }
.mf-date { margin: 0 0 6px; font: 600 12px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mf-big { font: 800 clamp(28px, 7.8vw, 40px)/1.18 var(--hf, var(--font)); letter-spacing: -.025em; margin: 16px 0 0; text-wrap: balance; }
.mf-q { font: 700 clamp(26px, 7.4vw, 37px)/1.25 var(--qf, var(--font)); letter-spacing: -.02em; margin: 16px 0 0; text-wrap: balance; }
.mf-by { font: 700 15px/1.3 var(--font); margin: 16px 0 0; color: var(--by, var(--fg)); }
.mf-src { font: 500 12px/1.5 var(--font); color: var(--muted); margin: 10px 0 0; max-width: 40ch; }
.mf-stat { font: 800 clamp(46px, 14.5vw, 80px)/1.02 var(--hf, var(--font)); letter-spacing: -.045em; margin: 16px 0 0; background: linear-gradient(90deg, var(--s1), var(--s2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mf-head { font: 700 clamp(19px, 5.2vw, 24px)/1.3 var(--hf, var(--font)); letter-spacing: -.015em; margin: 10px 0 0; text-wrap: balance; }
.mf-body { font-size: 16px; line-height: 1.58; color: var(--muted); margin: 12px 0 0; max-width: 42ch; }
.mf-track { height: 10px; border-radius: 99px; background: var(--track); margin: 16px 0 0; max-width: 300px; overflow: hidden; }
.mf-track i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--s1), var(--s2)); }
.mf-bl { font: 600 12px/1 var(--font); color: var(--muted); margin: 8px 0 0; }
.mf-cover { width: 112px; height: 152px; border-radius: 5px 12px 12px 5px; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(160deg, var(--g1), var(--g2)); border-left: 8px solid rgba(255,255,255,.55); box-shadow: 0 14px 28px rgba(0,0,0,.28); margin: 16px 0 0; font: 800 15px/1.15 var(--font); color: #fff; }
.mf-cover small { font: 500 10.5px/1 var(--font); opacity: .85; }
.mf-rail { position: absolute; right: 10px; bottom: 22px; z-index: 15; display: flex; flex-direction: column; gap: 14px; align-items: center; color: var(--cfg); }
.mf-rail button { width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--cbtn); box-shadow: var(--cshadow); color: inherit; display: grid; place-items: center; cursor: pointer; }
.mf-rail button.on { background: #ff375f; color: #fff; }
.mf-count { position: absolute; left: 22px; bottom: 28px; z-index: 15; font: 700 12px/1 var(--font); color: var(--cmuted); letter-spacing: .08em; }
.mf-hint { position: absolute; left: 50%; transform: translateX(-50%); bottom: 26px; z-index: 14; font: 700 12px/1 var(--font); color: var(--cmuted); animation: mf-bob 1.6s ease-in-out infinite; pointer-events: none; }
.mf-hint[hidden] { display: none; }
@keyframes mf-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -8px); } }
.mf-bigheart { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px; z-index: 30; color: #ff375f; opacity: 0; pointer-events: none; }
.mf-bigheart.pop { animation: mf-pop .7s ease-out; }
@keyframes mf-pop { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0; transform: scale(1); } }
.mf-end { align-items: center; text-align: center; justify-content: center; }
.mf-end .mf-inner { align-items: center; }
.mf-end h2 { font: 800 clamp(28px, 8vw, 40px)/1.15 var(--font); letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.mf-end p { color: var(--muted); max-width: 34ch; margin: 14px 0 0; }
.mf-row { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; width: 100%; max-width: 300px; }
.mf-row button { border: 0; border-radius: 99px; padding: 15px; font: 700 15px/1 var(--font); background: #38e8ff; color: #06060b; cursor: pointer; }
.mf-row button.ghost { background: rgba(255,255,255,.14); color: #fff; }

/* the sheet: choose a feed, or see the stats */
.mf-sheet { position: absolute; inset: 0; z-index: 40; background: rgba(0,0,0,.6); display: flex; align-items: flex-end; opacity: 0; pointer-events: none; transition: opacity .2s; }
.mf-sheet.open { opacity: 1; pointer-events: auto; }
.mf-panel { width: 100%; max-height: 86%; overflow: auto; background: var(--card); color: var(--ink); border-radius: 22px 22px 0 0; padding: 20px 16px 24px; transform: translateY(30px); transition: transform .25s; }
.mf-sheet.open .mf-panel { transform: none; }
.mf-panel h3 { margin: 0 0 4px; font: 800 20px/1.2 var(--font); }
.mf-panel h4 { margin: 18px 0 6px; font: 700 13px/1.2 var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.mf-panel > p { margin: 0 0 14px; color: var(--ink-soft); font-size: 13px; }
.mf-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mf-tile { border: 0; text-align: left; color: #fff; border-radius: 16px; padding: 14px; min-height: 84px; background: linear-gradient(160deg, var(--g1), var(--g2)); font: 700 15px/1.25 var(--font); cursor: pointer; }
.mf-tile small { display: block; font: 500 11.5px/1.35 var(--font); opacity: .9; margin-top: 6px; }
.mf-tile.on { outline: 3px solid var(--ink); }
.mf-tile.wide { grid-column: 1 / -1; }
.mf-link { display: block; width: 100%; margin-top: 16px; padding: 12px; border: 1px solid var(--rule); border-radius: 12px; background: transparent; color: var(--ink); font: 600 14px/1 var(--font); cursor: pointer; }
.mf-link[hidden] { display: none; }
.mf-statshead { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mf-range { display: flex; gap: 4px; }
.mf-range button { border: 1px solid var(--rule); background: transparent; color: var(--ink); border-radius: 999px; padding: 7px 12px; font: 600 12.5px/1 var(--font); cursor: pointer; }
.mf-range button.on { background: var(--ink); color: var(--card); border-color: var(--ink); }
.mf-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.mf-cell { background: var(--card-2); border: 1px solid var(--rule-soft); border-radius: 12px; padding: 10px; }
.mf-cell b { display: block; font: 800 20px/1.1 var(--font); font-variant-numeric: tabular-nums; }
.mf-cell span { font-size: 11.5px; color: var(--ink-soft); }
.mf-bars { display: flex; gap: 4px; align-items: flex-end; height: 64px; margin-top: 14px; }
.mf-bars div { flex: 1; max-width: 40px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; min-width: 0; }
.mf-bars i { display: block; width: 100%; background: var(--accent); border-radius: 4px 4px 0 0; }
.mf-bars span { font-size: 9.5px; color: var(--ink-faint); }
.mf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mf-list li { display: grid; gap: 2px; padding: 8px 10px; background: var(--card-2); border-radius: 10px; font-size: 13px; }
.mf-list li b { font-size: 13px; }
.mf-list li span { color: var(--ink-soft); font-size: 12.5px; }
.mf-none, .mf-note { color: var(--ink-faint); font-size: 12.5px; }

/* the seven looks */
.mf-tone-sunrise { --a1: #ff9f0a; --a2: #ff375f; --g1: #f2994a; --g2: #c2417a; --pastel: #ffe5d2; }
.mf-tone-ocean   { --a1: #0a84ff; --a2: #5e5ce6; --g1: #1d9bc9; --g2: #3a3fb5; --pastel: #d8eefc; }
.mf-tone-forest  { --a1: #1fb35a; --a2: #0a9d8f; --g1: #2f9e6b; --g2: #176b6b; --pastel: #daf2df; }
.mf-tone-dusk    { --a1: #5e5ce6; --a2: #bf5af2; --g1: #6a5acd; --g2: #2c2a6b; --pastel: #e6deff; }
.mf-tone-berry   { --a1: #ff375f; --a2: #bf5af2; --g1: #d6457f; --g2: #7b2a8f; --pastel: #ffdbeb; }
.mf-tone-sand    { --a1: #d98a00; --a2: #a2845e; --g1: #b8863b; --g2: #7a4a2a; --pastel: #f5e8cf; }
.mf-k-apple  { --bg: #fbfbfd; --fg: #1d1d1f; --muted: #6e6e73; --s1: var(--a1); --s2: var(--a2); --track: rgba(0,0,0,.09); --art: var(--a1); --artop: .08; }
.mf-k-apple .mf-big { font-weight: 700; letter-spacing: -.035em; line-height: 1.1; font-size: clamp(30px, 8.6vw, 46px); }
.mf-k-apple .mf-q { font-style: normal; font-weight: 700; letter-spacing: -.03em; font-size: clamp(28px, 8vw, 42px); line-height: 1.16; }
.mf-k-apple .mf-body { color: #424245; }
.mf-k-paper  { --bg: #f7f4ee; --fg: #1b1a17; --muted: #58544b; --s1: var(--g2); --s2: var(--g2); --track: rgba(0,0,0,.12); --art: var(--g1); --artop: .07; --hf: var(--serif); --qf: var(--serif); }
.mf-k-paper::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: linear-gradient(var(--g1), var(--g2)); }
.mf-k-paper .mf-q { font-style: italic; font-weight: 600; }
.mf-k-paper .mf-stat { -webkit-text-fill-color: var(--g2); color: var(--g2); background: none; }
.mf-k-paper .mf-track i { background: var(--g2); }
.mf-k-paper .mf-body { color: #403c34; }
.mf-k-neon   { --bg: radial-gradient(70% 45% at 85% 5%, var(--g1), transparent 70%), radial-gradient(60% 40% at 5% 100%, var(--g2), transparent 70%), #06060b; --fg: #f5f5ff; --muted: #b4b6d4; --s1: #38e8ff; --s2: #ff5cc8; --track: rgba(255,255,255,.14); --by: #38e8ff; --art: #38e8ff; --artop: .18; background-blend-mode: screen; }
.mf-k-neon::after { content: ""; position: absolute; inset: 0; background: rgba(6,6,11,.72); z-index: 0; }
.mf-k-neon .mf-track i { box-shadow: 0 0 14px rgba(56,232,255,.7); }
.mf-k-neon .mf-q { font-style: normal; }
.mf-k-neon .mf-art { z-index: 1; filter: drop-shadow(0 0 20px rgba(56,232,255,.6)); }
.mf-k-gold   { --bg: radial-gradient(110% 70% at 85% 0, rgba(229,185,78,.16), transparent 55%), radial-gradient(90% 60% at 0 100%, rgba(58,90,160,.28), transparent 60%), #0a1020; --fg: #f4efe2; --muted: #b4bccd; --s1: #e5b94e; --s2: #f0d27a; --track: rgba(255,255,255,.14); --by: #e5b94e; --art: #e5b94e; --artop: .1; --qf: var(--serif); }
.mf-k-gold .mf-q { font-style: italic; }
.mf-k-forest { --bg: radial-gradient(100% 60% at 80% 0, rgba(155,227,176,.18), transparent 60%), radial-gradient(80% 50% at 0 100%, rgba(40,120,90,.4), transparent 60%), #0c231c; --fg: #ecf6ef; --muted: #b3cdbd; --s1: #9be3b0; --s2: #6fd3c0; --track: rgba(255,255,255,.16); --by: #9be3b0; --art: #9be3b0; --artop: .12; }
.mf-k-forest .mf-q { font-style: normal; }
.mf-k-pastel { --bg: var(--pastel, #f4f1ff); --fg: #1d1b2e; --muted: #4f4d66; --s1: var(--g2); --s2: var(--g2); --track: rgba(0,0,0,.12); --art: var(--g2); --artop: .12; }
.mf-k-pastel .mf-stat { -webkit-text-fill-color: var(--g2); color: var(--g2); background: none; }
.mf-k-pastel .mf-track i { background: var(--g2); }
.mf-k-pastel .mf-q { font-style: normal; }
.mf-k-sunset { --bg: radial-gradient(120% 80% at 100% 0, rgba(255,255,255,.28), transparent 55%), linear-gradient(165deg, var(--g1), var(--g2)); --fg: #fff; --muted: rgba(255,255,255,.86); --s1: #fff; --s2: #ffe9c7; --track: rgba(255,255,255,.28); --art: #fff; --artop: .18; padding-left: 14px; }
.mf-k-sunset .mf-inner { background: rgba(18,10,30,.5); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.22); border-radius: 28px; padding: 24px 22px; box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.mf-k-sunset .mf-q { font-style: normal; }
.mf-end.mf-k-neon { --bg: #06060b; }
.mf-end.mf-k-neon::after { content: none; }
@media (max-height: 720px) { .mf-stat { font-size: clamp(36px, 11vw, 56px); } .mf-body { font-size: 14px; line-height: 1.5; } .mf-slide { padding-top: 76px; padding-bottom: 64px; } .mf-cover { display: none; } }
@media (min-width: 760px) { .mf-slide { padding-left: max(22px, calc(50% - 300px)); padding-right: max(80px, calc(50% - 250px)); } .mf-top { padding-left: max(12px, calc(50% - 320px)); padding-right: max(12px, calc(50% - 320px)); } }
@media (prefers-reduced-motion: reduce) { .mf-hint { animation: none; } }

/* the Mantra stats on their own page, for people given the stats but not the feed */
.mf-statsonly { height: auto; min-height: var(--mf-h); overflow: visible; background: var(--bg-page, transparent); border-radius: 0; }
.mf-statsonly .mf-panel { position: static; max-height: none; transform: none; border-radius: 0; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(var(--nav-h) + 24px); }
.mf-statsonly .mf-panel > h3, .mf-statsonly .mf-statshead h3 { font-size: 22px; }

/* the book page: a cover drawn for each book, standing a little turned with its spine and page edges */
.mf-book { position: relative; width: min(150px, 38vw); aspect-ratio: 2 / 3; margin: 14px 0 6px 6px; transform: perspective(900px) rotateY(-16deg); transform-origin: left center; border-radius: 3px 7px 7px 3px; box-shadow: -3px 3px 0 rgba(0,0,0,.28), 12px 16px 30px rgba(0,0,0,.38); }
.mf-bookart { display: block; width: 100%; height: 100%; border-radius: 3px 7px 7px 3px; }
.mf-book::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.34) 0, rgba(255,255,255,.2) 4.5%, rgba(0,0,0,.14) 7%, rgba(0,0,0,0) 12%, rgba(0,0,0,0) 93%, rgba(0,0,0,.2) 100%); }
.mf-book::after { content: ""; position: absolute; top: 3px; bottom: 3px; right: -6px; width: 6px; border-radius: 0 3px 3px 0; background: repeating-linear-gradient(180deg, #f6f1e7 0 2px, #d6cfc0 2px 3px); }
.mf-booktitle { margin-top: 16px; }
.mf-why { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(127,127,127,.14); font-size: 14px; line-height: 1.5; color: var(--fg); max-width: 42ch; }
.mf-why b { display: block; margin-bottom: 3px; font: 700 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mf-hours { display: flex; gap: 2px; align-items: flex-end; height: 56px; margin-top: 6px; }
.mf-hours div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; min-width: 0; }
.mf-hours i { display: block; width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; }
.mf-hours span { font-size: 9.5px; color: var(--ink-faint); height: 10px; }
@media (max-height: 720px) { .mf-book { width: 96px; } }

/* Food results as a vertical list: a picture, the name, energy, and a tick. Replaces the sideways row of chips. */
.fd-results { display: grid; gap: 6px; margin-top: 8px; }
.fd-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 22px; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.fd-row.on { border-color: var(--accent); background: var(--accent-soft); }
.fd-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--card-2); display: grid; place-items: center; font-size: 22px; line-height: 1; }
.fd-nm { min-width: 0; }
.fd-nm b { display: block; font-size: 14.5px; line-height: 1.25; overflow-wrap: anywhere; }
.fd-nm small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-soft); }
.fd-en { text-align: right; white-space: nowrap; }
.fd-en b { font-size: 15px; font-variant-numeric: tabular-nums; }
.fd-en small { display: block; font-size: 10.5px; color: var(--ink-faint); }
.fd-ck { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--rule); display: grid; place-items: center; font-size: 11px; color: #fff; }
.fd-row.on .fd-ck { background: var(--accent); border-color: var(--accent); }
.fd-more { display: block; margin: 8px auto 0; padding: 8px 14px; border: 0; background: transparent; color: var(--accent); font: 600 13px/1 inherit; cursor: pointer; }
.fd-pv .fd-pv-n { margin-top: 10px; }

/* ── Home dashboard: the day at a glance (js/home-dash.js) ─────────────────────────────────────────────────────────────────────── */
.hd { padding-bottom: 84px; --hd-a1: #7c5cff; --hd-a2: #34c6bd; --hd-good: #2fb463; --hd-mid: #f0a020; --hd-low: #e8795a; }
.hd-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 12px; }
.hd-step { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--rule); background: var(--card); color: var(--ink); font-size: 26px; line-height: 1; display: grid; place-items: center; cursor: pointer; padding: 0 0 3px; }
.hd-step:disabled { opacity: .35; cursor: default; }
.hd-date { text-align: center; }
.hd-date b { display: block; font-size: 20px; letter-spacing: -.01em; }
.hd-date small { color: var(--ink-soft); font-size: 13px; }
.hd-card { background: var(--card); border: 1px solid var(--rule-soft); border-radius: 24px; padding: 18px 14px 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(20,20,40,.05); }
.hd-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 4px; }
.hd-side { display: grid; gap: 14px; align-content: center; }
.hd-side.r { text-align: right; }
.hd-tile { min-width: 0; }
.hd-tl { display: block; font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-tv { display: inline-flex; align-items: baseline; gap: 5px; }
.hd-side.r .hd-tv { justify-content: flex-end; }
.hd-tv b { font-size: 22px; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--ink-faint); }
.hd-tv i { font-style: normal; font-size: 14px; }
.hd-tile.on .hd-tv b { color: var(--accent); }
.hd-ring { position: relative; width: clamp(140px, 44vw, 210px); aspect-ratio: 1; }
.hd-ringsvg { width: 100%; height: 100%; display: block; }
.hd-seg { fill: none; stroke: var(--rule); stroke-width: 14; stroke-linecap: round; transition: stroke .3s; }
.hd-seg.on { stroke: url(#hd-g); }
.hd-seg.part { stroke: var(--hd-a1); opacity: .45; }
.hd-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.hd-mid b { font-size: 36px; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hd-mid b small { font-size: 17px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0; }
.hd-mid span { margin-top: 3px; font-size: 13px; color: var(--ink-soft); }
.hd-mid em { margin-top: 6px; font-style: normal; font-size: 12px; font-weight: 650; color: var(--hd-a1); }
.hd-more { display: block; margin: 12px auto 0; border: 0; background: transparent; color: var(--accent); font: 600 13px/1 inherit; padding: 8px 12px; cursor: pointer; }
.hd-all { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 6px; padding: 12px; background: var(--card-2); border-radius: 14px; }
.hd-sec { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 4px 8px; }
.hd-sec h3 { margin: 0; font-size: 15px; }
.hd-sec small { color: var(--ink-faint); font-size: 12px; }
.hd-rows { display: grid; gap: 12px; padding: 0 4px; }
.hd-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.hd-rl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-track { height: 10px; border-radius: 99px; background: var(--rule); overflow: hidden; }
.hd-track i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--hd-a1), var(--hd-a2)); }
.hd-rv { color: var(--ink-soft); font-size: 12px; white-space: nowrap; }
.hd-rv b { color: var(--ink); }
.hd-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: end; height: 118px; padding: 0 2px; }
.hd-wk { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; height: 100%; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; padding: 0 0 2px; min-width: 0; }
.hd-wk i { display: block; width: 62%; max-width: 30px; border-radius: 8px; background: var(--rule); margin-bottom: 6px; }
.hd-wk.good i { background: var(--hd-good); } .hd-wk.mid i { background: var(--hd-mid); } .hd-wk.low i { background: var(--hd-low); }
.hd-wk span { font-size: 12px; font-weight: 600; }
.hd-wk small { font-size: 11px; color: var(--ink-faint); }
.hd-wk.sel span, .hd-wk.sel small { color: var(--ink); }
.hd-wk.sel::after { content: ""; position: absolute; bottom: -7px; width: 8px; height: 8px; background: var(--accent); border-radius: 2px; transform: rotate(45deg); }
.hd-fab { position: fixed; right: 16px; bottom: calc(var(--nav-h) + 16px); z-index: 30; width: 56px; height: 56px; border-radius: 18px; border: 0; background: linear-gradient(135deg, var(--hd-a1, #7c5cff), var(--hd-a2, #34c6bd)); color: #fff; font-size: 32px; line-height: 1; display: grid; place-items: center; padding: 0 0 3px; box-shadow: 0 8px 22px rgba(80, 60, 200, .35); cursor: pointer; }
.home-stats-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 26px 2px 10px; flex-wrap: wrap; }
.home-stats-head h3 { margin: 0; font-size: 17px; }
.home-stats-head .home-range { margin: 0; }
@media (min-width: 760px) { .hd { max-width: 560px; margin: 0 auto; } .hd-fab { right: max(24px, calc(50vw - 360px)); bottom: 28px; } }

/* ── Food: easier on the eyes (day list and the picker) ─────────────────────────────────────────────────────────────────────────── */
.fd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.fd-it { padding: 14px 2px; border-bottom: 1px solid var(--rule-soft); }
.fd-it.pending { opacity: .6; }
.fd-it.fresh { animation: fd-row .35s ease-out; }
.fd-it-top { display: flex; align-items: flex-start; gap: 10px; }
.fd-it-nm { flex: 1; min-width: 0; }
.fd-it-nm b { display: block; font-size: 16.5px; font-weight: 650; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.fd-it-nm small { display: block; margin-top: 3px; font-size: 14px; color: var(--ink-soft); line-height: 1.35; }
.fd-it-k { text-align: right; white-space: nowrap; }
.fd-it-k b { font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ink); }
.fd-it-k small { margin-left: 4px; font-size: 13px; color: var(--ink-soft); }
.fd-it-m { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: 14px; color: var(--ink-soft); }
.fd-it-m span { display: inline-flex; align-items: center; gap: 5px; }
.fd-it-m b { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.fd-it-m i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); }
.fd-it-m i.p { background: var(--c-protein); } .fd-it-m i.c { background: var(--c-carbs); } .fd-it-m i.f { background: var(--c-fat); } .fd-it-m i.i { background: var(--good); }
.fd-sum { margin-top: 14px; padding: 14px 14px 12px; border-radius: 14px; background: var(--accent-soft); }
.fd-sum .fd-it-nm b { font-size: 17px; }
.fd-sum .fd-it-k b { font-size: 24px; }
.fd-x { font-size: 26px; padding: 2px 10px; margin: -4px -8px 0 0; color: var(--ink-soft); }
.fd-dayhead h3 { font-size: 19px; }
.fd-dayhead span { font-size: 14px; }
/* the picker: more air, bigger and brighter words, no hard borders */
.fd-row { padding: 12px 12px; gap: 12px; grid-template-columns: 44px minmax(0, 1fr) auto 24px; border: 0; background: var(--card-2); margin-bottom: 8px; }
.fd-row:hover { background: var(--rule-soft); }
.fd-row.on { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.fd-ic { width: 44px; height: 44px; font-size: 24px; background: var(--card); }
.fd-nm b { font-size: 16.5px; font-weight: 650; line-height: 1.3; }
.fd-nm small { font-size: 14px; margin-top: 3px; }
.fd-en b { font-size: 17px; }
.fd-en small { font-size: 12.5px; color: var(--ink-soft); }
.fd-ck { width: 24px; height: 24px; font-size: 13px; }
.fd-more { font-size: 15px; padding: 12px 14px; }

/* ── Home: Food overview card ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.ov { display: flex; flex-direction: column; gap: 10px; height: 100%; justify-content: center; }
.ov-top { display: flex; align-items: baseline; gap: 8px; }
.ov-top b { font-size: 34px; line-height: 1; font-weight: 750; font-variant-numeric: tabular-nums; }
.ov-top span { font-size: 14px; color: var(--ink-soft); }
.ov-s .ov-top { flex-direction: column; gap: 2px; align-items: flex-start; }
.ov-s .ov-top b { font-size: 28px; }
.ov-row { flex-direction: row; align-items: center; gap: 14px; }
.ov-tiles { display: grid; grid-template-columns: repeat(var(--oc, 2), minmax(0, 1fr)); gap: 8px; }
.ov-inline { display: flex; gap: 14px; flex-wrap: nowrap; overflow: hidden; }
.ov-t { background: var(--card-2); border-radius: 12px; padding: 8px 10px; min-width: 0; }
.ov-inline .ov-t { background: none; padding: 0; }
.ov-t span { display: block; font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-t b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ov-t b small { font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }

/* ── Day overview as a Home card ────────────────────────────────────────────────────────────────────────────────────────────── */
.hd-in { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.hd-in .hd-nav { margin: 0; }
.hd-in .hd-step { width: 34px; height: 34px; font-size: 22px; }
.hd-in .hd-date b { font-size: 17px; }
.hd-in .hd-ring { width: var(--rs, 160px); flex: none; }
.hd-in .hd-stage.one { grid-template-columns: 1fr; justify-items: center; }
.hd-in .hd-side { gap: 10px; }
.hd-in .hd-mid b { font-size: 30px; }
.hd-hid { margin: -2px 0 0; text-align: center; font-size: 12px; color: var(--ink-faint); }
.hd-in .hd-rows { margin-top: 4px; }
.hd-in .hd-week { height: 96px; margin-top: 4px; }

/* Unlock book summaries (a button on every book card; the summaries themselves are not built yet) */
.mf-unlock { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 11px 18px; border-radius: 99px; border: 1.5px solid currentColor; background: transparent; color: inherit; font: 650 15px/1 inherit; cursor: pointer; }
.mf-unlock svg { width: 17px; height: 17px; }
.mf-unlock:active { transform: scale(.97); }

/* Book summaries: micro-lessons in the Mantra sheet */
.mf-dots { display: flex; gap: 5px; justify-content: center; margin-bottom: 14px; }
.mf-dots i { width: 18px; height: 4px; border-radius: 3px; background: currentColor; opacity: .2; }
.mf-dots i.done { opacity: .5; } .mf-dots i.on { opacity: 1; }
.mf-ls { max-height: 60vh; overflow-y: auto; text-align: left; }
.mf-ls h3 { margin: 4px 0 6px; font-size: 22px; line-height: 1.25; }
.mf-ls p { margin: 0 0 12px; font-size: 16.5px; line-height: 1.5; }
.mf-ls b { display: block; margin-bottom: 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; opacity: .7; }
.mf-ls-k { font-size: 12.5px !important; text-transform: uppercase; letter-spacing: .08em; opacity: .7; margin-bottom: 4px !important; }
.mf-ls-by, .mf-ls-note { opacity: .75; font-size: 14px !important; }
.mf-ls-ex, .mf-ls-try { padding: 10px 12px; border-radius: 12px; background: rgba(127,127,127,.14); }
.mf-q3 { margin-bottom: 16px; }
.mf-q3 button { display: block; width: 100%; text-align: left; margin-top: 6px; padding: 11px 12px; border-radius: 12px; border: 1.5px solid rgba(127,127,127,.4); background: transparent; color: inherit; font: inherit; font-size: 15px; cursor: pointer; }
.mf-q3 button.ok { border-color: #2fb463; background: rgba(47,180,99,.16); } .mf-q3 button.no { border-color: #e8795a; background: rgba(232,121,90,.16); }
.mf-q3 small { display: block; margin-top: 6px; opacity: .8; font-size: 13.5px; }
.mf-ls-nav { margin-top: 10px; }
.mf-ls-nav button:disabled { opacity: .35; }

/* A new badge, in the middle of the screen */
.ach-cele { position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; padding: 20px; background: rgba(8, 10, 20, .62); animation: ac-in .22s ease-out; }
.ach-cele.out { opacity: 0; transition: opacity .2s; }
.ac-card { position: relative; width: min(340px, 100%); text-align: center; padding: 30px 22px 22px; border-radius: 26px; background: var(--card); color: var(--ink); box-shadow: 0 24px 70px rgba(0, 0, 0, .45); animation: ac-pop .42s cubic-bezier(.2, 1.4, .4, 1); overflow: hidden; }
.ac-badge { width: 104px; height: 104px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; font-size: 54px; background: linear-gradient(135deg, #fde68a, #f59e0b); box-shadow: 0 8px 24px rgba(245, 158, 11, .45); }
.ach-cele.tier-silver .ac-badge { background: linear-gradient(135deg, #e5e7eb, #94a3b8); box-shadow: 0 8px 24px rgba(148, 163, 184, .5); }
.ach-cele.tier-bronze .ac-badge { background: linear-gradient(135deg, #fdba74, #c2410c); box-shadow: 0 8px 24px rgba(194, 65, 12, .4); }
.ach-cele.tier-platinum .ac-badge { background: linear-gradient(135deg, #c4b5fd, #38bdf8); box-shadow: 0 8px 24px rgba(99, 102, 241, .45); }
.ac-card h2 { margin: 6px 0 4px; font-size: 26px; letter-spacing: -.01em; }
.ac-line { margin: 0 0 6px; font-size: 17px; }
.ac-hint { margin: 0 0 8px; font-size: 14px; color: var(--ink-soft); }
.ac-xp { margin: 0 0 16px; font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: .04em; text-transform: uppercase; }
.ac-ok { width: 100%; min-height: 50px; font-size: 17px; }
.ac-bits i { position: absolute; left: 50%; top: 96px; width: 8px; height: 14px; border-radius: 3px; background: var(--accent); opacity: 0; transform: rotate(var(--a)) translateY(0); animation: ac-bit 1.1s ease-out var(--d) both; }
.ac-bits i:nth-child(3n) { background: #f59e0b; } .ac-bits i:nth-child(3n+1) { background: #34d399; } .ac-bits i:nth-child(5n) { background: #f472b6; }
@keyframes ac-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ac-pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ac-bit { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-110px); } }
@media (prefers-reduced-motion: reduce) { .ac-card, .ach-cele, .ac-bits i { animation: none; } }

/* Mantra: the grid view, and quotes said in talks and written in books */
.mf-gridbtn { flex: 0 0 auto; width: 38px; height: 38px; border: 0; border-radius: 12px; background: none; color: var(--cmuted); display: grid; place-items: center; cursor: pointer; }
.mf-gridbtn.on { color: var(--cfg); background: var(--cchip); }
.mf-grid { position: absolute; inset: 0; z-index: 10; overflow-y: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: min-content; gap: 2px; padding: 64px 0 80px; background: #0b0d12; align-content: start; }
.mf-grid[hidden] { display: none; }
.mf.grid-on .mf-reel, .mf.grid-on .mf-rail, .mf.grid-on .mf-count, .mf.grid-on .mf-hint, .mf.grid-on .mf-bigheart { display: none; }
.mf-gt { position: relative; aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 10px 9px; border: 0; text-align: left; overflow: hidden; cursor: pointer; font-family: var(--font); color: #fff; background: #3b3f5c; }
.mf-gt b { font-size: 19px; line-height: 1.05; letter-spacing: -.02em; }
.mf-gt span { font-size: 11.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; }
.mf-gt small { margin-top: 3px; font-size: 9.5px; opacity: .75; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-gt.on::after { content: "\2665"; position: absolute; right: 6px; bottom: 4px; font-size: 12px; color: #ff6b8b; }
.mf-gt.gt-paper { background: #f7f4ee; color: #1b1a17; }
.mf-gt.gt-sunrise { background: linear-gradient(160deg, #f2994a, #a8325e); }
.mf-gt.gt-ocean { background: linear-gradient(160deg, #1d9bc9, #2d2f9e); }
.mf-gt.gt-forest { background: linear-gradient(160deg, #2f9e6b, #0f5559); }
.mf-gt.gt-dusk { background: linear-gradient(160deg, #6a5acd, #241f5c); }
.mf-gt.gt-berry { background: linear-gradient(160deg, #d6457f, #5f2080); }
.mf-gt.gt-sand { background: linear-gradient(160deg, #c09243, #6b3d22); }

/* The Admin tab */
.ad-card { margin-bottom: 14px; }
.ad-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; flex: none; }
.ad-row { display: flex; align-items: center; gap: 4px; width: 100%; padding: 13px 4px; border: 0; border-top: 1px solid var(--rule-soft); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ad-row b { flex: 1; font-size: 16px; }
.ad-row span:last-child { color: var(--accent); font-weight: 650; font-size: 14px; }
.ad-row.off { cursor: default; } .ad-row.off span:last-child { color: var(--ink-faint); font-weight: 500; }
.ad-tbl { overflow-x: auto; margin-top: 8px; }
.ad-th, .ad-tr { display: grid; grid-template-columns: minmax(110px, 1.6fr) repeat(auto-fit, minmax(64px, 1fr)); align-items: center; gap: 6px; padding: 9px 0; border-top: 1px solid var(--rule-soft); font-size: 14px; }
.ad-th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); border-top: 0; font-weight: 700; }
.ad-th span:not(:first-child), .ad-tr > :not(:first-child) { text-align: center; }
.ad-chk input { width: 22px; height: 22px; accent-color: var(--accent); }
.ad-na { color: var(--ink-faint); }
.ad-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .ad-head h3 { margin: 0; display: flex; align-items: center; }
.ad-seg { margin: 6px 0 12px; }
.ad-day { padding: 12px 0; border-top: 1px solid var(--rule-soft); } .ad-day h4 { margin: 0 0 6px; font-size: 15px; }
.ad-box { display: grid; grid-template-columns: 110px 1fr; gap: 8px; padding: 5px 0; font-size: 14px; }
.ad-bl { color: var(--ink-soft); }
.ad-bv { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ad-bv i { font-style: normal; overflow-wrap: anywhere; } .ad-bv small { color: var(--ink-soft); }
.ad-tot { margin-top: 2px; }
.seen-card { border-left: 4px solid var(--accent); }

.ad-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin: 10px 0 4px; }
.ad-tile { display: grid; gap: 2px; padding: 10px 11px; border-radius: 12px; background: var(--card-2); }
.ad-tile b { font-size: 22px; font-variant-numeric: tabular-nums; } .ad-tile span { font-size: 12px; color: var(--ink-soft); }
.ad-card h4 { margin: 16px 0 6px; font-size: 13px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }
.ad-bars { height: 84px; }
.ad-people { overflow-x: auto; }
.ad-pr { display: grid; grid-template-columns: minmax(96px, 1.5fr) repeat(5, minmax(56px, 1fr)); gap: 6px; padding: 8px 0; border-top: 1px solid var(--rule-soft); font-size: 13.5px; align-items: center; min-width: 440px; }
.ad-pr > :not(:first-child) { text-align: center; font-variant-numeric: tabular-nums; }
.ad-ph { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); font-weight: 700; border-top: 0; }
.ad-feed { list-style: none; margin: 8px 0 0; padding: 0; } .ad-feed li { display: flex; gap: 8px; padding: 7px 0; border-top: 1px solid var(--rule-soft); font-size: 14px; }
.ad-feed li span { margin-left: auto; color: var(--ink-faint); font-size: 12.5px; white-space: nowrap; }
.ad-bars i { display: block; width: 100%; max-width: 18px; border-radius: 5px 5px 2px 2px; background: var(--accent); }
.ad-bars span { font-size: 10px; color: var(--ink-faint); }
.ad-card .mf-list { list-style: none; margin: 0; padding: 0; }
.ad-card .mf-list li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--rule-soft); font-size: 13.5px; }
.ad-card .mf-list li span { color: var(--ink-soft); text-align: right; }
.ad-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .ad-head h3 { margin: 0; }

.ad-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ad-live i { width: 8px; height: 8px; border-radius: 50%; background: #2fb463; animation: ad-pulse 1.6s ease-in-out infinite; }
@keyframes ad-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .ad-live i { animation: none; } }

/* Mantra: the X on a card, and the slide that replaces a removed card (Undo) */
.mf-rail #mf-x { background: var(--cbtn); }
.mf-gone { text-align: center; opacity: .9; }
.mf-gone h2 { font-size: 26px; margin: 0 0 6px; }
.mf-gone p { margin: 0 0 16px; }

/* Live chat: a bottom bar tab for everybody, and the admin's side in the Admin tab */
.ch { display: flex; flex-direction: column; gap: 10px; }
.ch-note { margin: 0; font-size: 14px; color: var(--ink-soft, var(--ink)); }
.ch-list { display: flex; flex-direction: column; gap: 8px; height: min(52vh, 460px); overflow-y: auto; padding: 10px; border: 1px solid var(--rule-soft); border-radius: 14px; background: var(--card, transparent); }
.ch-m { max-width: 82%; padding: 8px 12px 6px; border-radius: 16px; display: flex; flex-direction: column; gap: 2px; }
.ch-m p { margin: 0; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.ch-m small, .ch-m time { font-size: 11px; opacity: .7; }
.ch-m.me { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.ch-m.them { align-self: flex-start; background: var(--rule-soft); color: var(--ink); border-bottom-left-radius: 4px; }
.ch-m.pending { opacity: .6; }
.ch-empty { margin: auto; text-align: center; color: var(--ink-faint, var(--ink)); font-size: 15px; padding: 0 12px; }
.ch-err { margin: 0; min-height: 18px; font-size: 13px; color: #dc2626; }
.ch-form { display: flex; gap: 8px; align-items: flex-end; }
.ch-form textarea { flex: 1; min-width: 0; resize: none; max-height: 120px; padding: 10px 12px; border: 1px solid var(--rule-soft); border-radius: 14px; font: inherit; font-size: 16px; background: var(--card, transparent); color: var(--ink); }
.ad-chatlist { height: min(40vh, 340px); }
.ad-prev { flex: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-faint, var(--ink)); font-size: 14px; padding: 0 8px; }
.ad-row small { color: var(--ink-faint, var(--ink)); font-size: 12px; }
.ad-new { font-style: normal; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; background: #dc2626; color: #fff; font-size: 12px; font-weight: 700; }

/* Live chat on the sign-in page */
.vc-open { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 40; padding: 12px 18px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font: inherit; font-weight: 650; box-shadow: 0 6px 20px rgba(0,0,0,.25); cursor: pointer; }
.vc-open.has::after { content: ''; position: absolute; top: 4px; right: 6px; width: 12px; height: 12px; border-radius: 50%; background: #dc2626; border: 2px solid var(--accent); }
.vc-panel { position: fixed; right: max(12px, env(safe-area-inset-right, 0px)); bottom: max(12px, env(safe-area-inset-bottom, 0px)); z-index: 41; width: min(380px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--rule-soft); border-radius: 18px; background: var(--card); color: var(--ink); box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.vc-panel[hidden] { display: none; }
.vc-panel header { display: flex; justify-content: space-between; align-items: center; font-size: 17px; }
.vc-x { border: 0; background: none; color: inherit; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 6px; }
.vc-panel .ch-list { height: min(40vh, 300px); }
.vc-panel input[type=text] { padding: 9px 12px; border: 1px solid var(--rule-soft); border-radius: 12px; font: inherit; font-size: 16px; background: var(--card, transparent); color: var(--ink); }

/* ── Admin, the redesign ─────────────────────────────────────────────────────────────────────────────────────────────── */
#admin-body { display: grid; gap: 14px; padding-bottom: 8px; }
#admin-body .card { margin-bottom: 0; }
.ax-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 4px 2px 2px; }
.ax-hero h2 { margin: 0; font-size: 30px; letter-spacing: -.02em; font-weight: 800; }
.ax-hero p { margin: 4px 0 0; color: var(--ink-soft); font-size: 13.5px; max-width: 30ch; line-height: 1.4; }
.ax-hero .ad-live { padding: 6px 11px; border-radius: 999px; background: var(--card); border: 1px solid var(--rule-soft); white-space: nowrap; }
.ax-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ax-kpi { position: relative; display: grid; gap: 2px; padding: 14px 14px 12px; border-radius: 18px; background: var(--card); border: 1px solid var(--rule-soft); overflow: hidden; color: var(--accent); }
.ax-kpi > b { font-size: 34px; line-height: 1.05; font-weight: 800; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ax-kl { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.ax-kf { font-size: 12.5px; color: var(--ink-faint); }
.ax-spark { width: 100%; height: 30px; margin: 4px 0 0; }
.ax-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); border-radius: 16px; background: var(--card); border: 1px solid var(--rule-soft); overflow: hidden; }
.ax-stat { display: grid; gap: 1px; padding: 11px 12px; border-left: 1px solid var(--rule-soft); }
.ax-stat:first-child { border-left: 0; }
.ax-stat b { font-size: 19px; font-weight: 750; font-variant-numeric: tabular-nums; }
.ax-stat span { font-size: 11.5px; color: var(--ink-soft); line-height: 1.25; }
.ax-tight { margin-top: 12px; }
.ax-card { border-radius: 18px; padding: 16px 16px 14px; }
.ax-ch { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ax-ch h3 { margin: 0; font-size: 16px; font-weight: 750; letter-spacing: -.01em; }
.ax-note { font-size: 12px; color: var(--ink-faint); text-align: right; }
.ax-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.ax-chip { border: 1px solid var(--rule); background: transparent; color: var(--ink-soft); padding: 6px 12px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ax-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.ax-bars { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; align-items: end; height: 150px; }
.ax-bar { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; height: 100%; min-width: 0; }
.ax-bar > i { align-self: end; width: 100%; max-width: 20px; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 45%, transparent)); }
.ax-bar > em { font-style: normal; font-size: 9.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; min-height: 12px; }
.ax-bar > span { display: grid; justify-items: center; font-size: 10px; font-weight: 700; color: var(--ink-faint); padding-top: 4px; line-height: 1.1; }
.ax-bar > span small { font-size: 9px; font-weight: 500; opacity: .8; }
.ax-bar.today > i { background: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.ax-bar.today > span { color: var(--accent); }
.ax-people { display: grid; }
.ax-person { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rule-soft); }
.ax-person:first-child { border-top: 0; padding-top: 2px; }
.ax-av { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 16px; text-shadow: 0 1px 2px rgba(0,0,0,.35); flex: none; }
.ax-av.sm { width: 26px; height: 26px; font-size: 12px; }
.ax-av.dim { opacity: .45; }
.ax-av.st-on::after, .ax-av.st-day::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--card); background: #2fb463; }
.ax-av.st-day::after { background: #f59e0b; }
.ax-pn { display: grid; gap: 1px; min-width: 0; }
.ax-pn b { font-size: 15.5px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.ax-tag { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.ax-ps { font-size: 12.5px; color: var(--ink-faint); } .ax-ps.on { color: #2fb463; font-weight: 650; } .ax-ps.day { color: #d97706; }
.ax-pm { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.ax-pm span { display: grid; gap: 0; padding: 7px 8px; border-radius: 10px; background: var(--card-2); font-size: 10.5px; color: var(--ink-soft); text-align: center; }
.ax-pm span b { font-size: 16px; font-weight: 750; color: var(--ink); font-variant-numeric: tabular-nums; }
.ax-rate { display: grid; grid-template-columns: minmax(0, 1.4fr) 1.6fr auto; gap: 10px; align-items: center; padding: 6px 0; font-size: 13px; color: var(--ink-soft); }
.ax-rate div { height: 8px; border-radius: 99px; background: var(--card-2); overflow: hidden; } .ax-rate i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.ax-rate b { color: var(--ink); font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }
.ax-feed { list-style: none; margin: 0; padding: 0; max-height: 440px; overflow-y: auto; overscroll-behavior: contain; border-radius: 12px; }
.ax-feed li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 9px 2px; border-top: 1px solid var(--rule-soft); font-size: 14px; }
.ax-feed li:first-child { border-top: 0; }
.ax-feed time { font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
.ax-more { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--rule-soft); margin-top: 6px; font-size: 12.5px; color: var(--ink-faint); }
.ax-more span { margin-right: auto; }
.ax-open { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 11px 2px; border: 0; border-top: 1px solid var(--rule-soft); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ax-open b { font-size: 15.5px; }
.ax-go { color: var(--accent); font-weight: 700; font-size: 13.5px; }
.ax-open.off { cursor: default; color: var(--ink-faint); } .ax-open.off b { font-weight: 500; }
.ax-lock { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-faint); }
@media (min-width: 560px) { .ax-kpis { grid-template-columns: repeat(4, 1fr); } .ax-pm { grid-column: auto; margin: 0; grid-template-columns: repeat(4, 64px); } .ax-person { grid-template-columns: auto 1fr auto; } }

.ch-card .ch-list { height: min(36vh, 300px); }
.ch-card .ch-form textarea { min-height: 44px; }

/* ── Live chat v2: the Profile button, the full screen chat sheet, the Admin chat section ───────────────────────────────── */
.chat-open { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: var(--ink); cursor: pointer; padding: 14px 16px; border-radius: 18px; }
.chat-oi { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 22px; background: var(--accent-soft); }
.chat-ot { display: grid; gap: 1px; min-width: 0; } .chat-ot b { font-size: 16px; } .chat-ot small { color: var(--ink-soft); font-size: 12.5px; line-height: 1.3; }
.chat-ob { font-style: normal; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; background: #dc2626; color: #fff; font-size: 12px; font-weight: 700; }
.chat-ob[hidden] { display: none; }
.chat-oc { font-size: 26px; color: var(--ink-faint); line-height: 1; }
body.chs-on { overflow: hidden; }
.chs { position: fixed; inset: 0; z-index: 90; display: grid; background: rgba(0,0,0,.45); }
.chs-panel { display: flex; flex-direction: column; width: 100%; max-width: 560px; margin: 0 auto; height: 100dvh; background: var(--paper); padding-top: env(safe-area-inset-top, 0px); }
.chs-head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: 8px 6px; border-bottom: 1px solid var(--rule-soft); }
.chs-head h3 { margin: 0; text-align: center; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chs-b { width: 44px; height: 44px; border: 0; background: none; color: var(--ink); font-size: 30px; line-height: 1; cursor: pointer; }
.chs-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
.chs-new { align-self: stretch; padding: 13px; font-size: 16px; }
.chs-list { display: grid; }
.chs-row, .chs-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 12px 4px; border: 0; border-top: 1px solid var(--rule-soft); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.chs-card { padding: 14px; border: 1px solid var(--rule); border-radius: 16px; background: var(--card); grid-template-columns: auto 1fr; }
.chs-card.off { opacity: .55; cursor: default; }
.chs-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 20px; background: var(--accent-soft); }
.chs-ic.ai { background: linear-gradient(135deg, #f0abfc55, #67e8f955); }
.chs-t { display: grid; gap: 1px; min-width: 0; } .chs-t b { font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chs-t small { color: var(--ink-soft); font-size: 12.5px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.chs-m2 time { font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
.chs-m2 em { font-style: normal; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; background: #dc2626; color: #fff; font-size: 12px; font-weight: 700; }
.chs-empty, .chs-lead { margin: 14px 4px; color: var(--ink-soft); text-align: center; font-size: 15px; }
.chs-lead { text-align: left; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.chs-fine { margin: auto 4px 0; padding-top: 14px; font-size: 12px; color: var(--ink-faint); text-align: center; }
.chs-msgs { flex: 1; height: auto; min-height: 120px; }
.ch-m.ai { background: linear-gradient(135deg, #a78bfa22, #38bdf822); }
.ch-m.typing p { padding: 2px 8px; }
.ax-alert { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13.5px; color: var(--ink-soft); cursor: pointer; }
.ax-threads { display: grid; }
.ax-th { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 11px 0; border: 0; border-top: 1px solid var(--rule-soft); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ax-th.new .ax-tn b { color: var(--ink); } .ax-tn { display: grid; gap: 1px; min-width: 0; }
.ax-tn b { font-size: 15px; display: flex; align-items: baseline; gap: 8px; } .ax-tn b small { font-size: 11.5px; font-weight: 500; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-tn > span { font-size: 13px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-th small { font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
.ax-sub { margin-left: 8px; font-size: 12px; font-weight: 500; color: var(--ink-faint); }
.ax-skel { display: grid; gap: 10px; } .ax-skel i { display: block; height: 96px; border-radius: 18px; background: linear-gradient(90deg, var(--card) 25%, var(--card-2) 50%, var(--card) 75%); background-size: 200% 100%; animation: ax-sh 1.2s linear infinite; }
@keyframes ax-sh { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ax-skel i { animation: none; } }

.chs-card .chs-t small { -webkit-line-clamp: unset; display: block; overflow: visible; white-space: normal; }
.chs-body .ch-form textarea { min-height: 44px; }

/* ── Mantra: handwriting for affirmations, the manager's X and tick, the note sheet, the Admin builder ─────────────────────── */
.mf-rail button[hidden] { display: none; }
.mf-rail #mf-tick.on { background: #22c55e; color: #fff; }
/* The handwriting fonts, kept on this site (they are open fonts under the SIL Open Font License; see /fonts/README.txt). Latin letters only, which is all the journal writes. */
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/caveat.woff2') format('woff2'); }
@font-face { font-family: 'Kalam'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/kalam.woff2') format('woff2'); }
@font-face { font-family: 'Patrick Hand'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/patrick.woff2') format('woff2'); }
@font-face { font-family: 'Shadows Into Light'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/shadows.woff2') format('woff2'); }
@font-face { font-family: 'Dancing Script'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/dancing.woff2') format('woff2'); }
@font-face { font-family: 'Reenie Beanie'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/reenie.woff2') format('woff2'); }
/* Mantra handwriting: the web font first, then handwriting fonts that ship with phones and computers, then the browser's cursive (stacks match js/mantra-fonts.js). */
.mf-f-caveat .mf-big { font-family: 'Caveat', 'Segoe Script', 'Bradley Hand', 'Snell Roundhand', cursive; font-weight: 600; font-size: clamp(40px, 11.5vw, 62px); letter-spacing: 0; line-height: 1.06; }
.mf-f-kalam .mf-big { font-family: 'Kalam', 'Segoe Print', 'Noteworthy', 'Marker Felt', cursive; font-weight: 400; font-size: clamp(32px, 9vw, 50px); letter-spacing: 0; line-height: 1.18; }
.mf-f-patrick .mf-big { font-family: 'Patrick Hand', 'Segoe Print', 'Chalkboard SE', 'Comic Sans MS', cursive; font-weight: 400; font-size: clamp(34px, 9.6vw, 52px); letter-spacing: 0; line-height: 1.16; }
.mf-f-shadows .mf-big { font-family: 'Shadows Into Light', 'Ink Free', 'Bradley Hand', 'Segoe Script', cursive; font-weight: 400; font-size: clamp(36px, 10vw, 54px); letter-spacing: 0; line-height: 1.14; }
.mf-f-dancing .mf-big { font-family: 'Dancing Script', 'Lucida Handwriting', 'Snell Roundhand', 'Apple Chancery', cursive; font-weight: 600; font-size: clamp(36px, 10vw, 54px); letter-spacing: 0; line-height: 1.14; }
.mf-f-reenie .mf-big { font-family: 'Reenie Beanie', 'Ink Free', 'Bradley Hand', 'Segoe Script', cursive; font-weight: 400; font-size: clamp(44px, 12.5vw, 68px); letter-spacing: 0; line-height: 1.02; }
.mf-note { position: absolute; inset: 0; z-index: 40; display: grid; align-items: end; background: rgba(0,0,0,.5); }
.mf-notep { background: var(--card, #fff); color: var(--ink, #111); border-radius: 22px 22px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 10px; }
.mf-notep h3 { margin: 0; font-size: 19px; } .mf-notep p { margin: 0; font-size: 14px; color: var(--ink-soft, #555); }
.mf-notep textarea { width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1px solid var(--rule, #ccc); border-radius: 14px; font: inherit; font-size: 16px; background: var(--card-2, #f5f5f5); color: inherit; resize: vertical; }
.mf-notep .mf-row { display: flex; gap: 8px; flex-wrap: wrap; }
.mf-notep .mf-row button { flex: 1; padding: 12px; border-radius: 14px; border: 0; background: var(--accent, #7c5cff); color: #fff; font: inherit; font-weight: 650; cursor: pointer; }
.mf-notep .mf-row button.ghost { background: transparent; color: inherit; border: 1px solid var(--rule, #ccc); }

/* The Admin Mantra builder */
.mb { position: fixed; inset: 0; z-index: 90; display: grid; background: rgba(0,0,0,.45); }
.mb-panel { display: flex; flex-direction: column; width: 100%; max-width: 560px; margin: 0 auto; height: 100dvh; background: var(--paper); padding-top: env(safe-area-inset-top, 0px); }
.mb-body { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 14px; align-content: start; padding: 14px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
.mb-prev { display: grid; place-items: center; min-height: 190px; padding: 22px 18px; border-radius: 22px; text-align: center; overflow: hidden; background: var(--bg, #fbfbfd); color: var(--fg, #1d1d1f); }
.mb-prev .mf-big { margin: 0; }
.mb-prev .mf-by { margin: 10px 0 0; font-size: 13px; opacity: .7; }
.mb-prev.mf-k-apple { --bg: #fbfbfd; --fg: #1d1d1f; } .mb-prev.mf-k-paper { --bg: #f4ecdc; --fg: #3a2f22; } .mb-prev.mf-k-neon { --bg: #0b0b1a; --fg: #f4f1ff; } .mb-prev.mf-k-gold { --bg: #1a1408; --fg: #f6dc8f; } .mb-prev.mf-k-forest { --bg: #0f2a20; --fg: #e5f6ea; } .mb-prev.mf-k-pastel { --bg: #fde8f1; --fg: #5a2a45; } .mb-prev.mf-k-sunset { --bg: #4a1d4f; --fg: #ffe3cf; }
.mb-field { display: grid; gap: 6px; font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.mb-field textarea, .mb-field input { width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1px solid var(--rule); border-radius: 14px; font: inherit; font-size: 16px; background: var(--card); color: var(--ink); font-weight: 400; }
.mb-field textarea { min-height: 96px; resize: vertical; }
.mb-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.mb-sw { min-width: 74px; padding: 10px 12px; border-radius: 12px; border: 2px solid transparent; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; background: var(--bg); color: var(--fg); box-shadow: inset 0 0 0 1px rgba(128,128,128,.35); }
.mb-sw.on { border-color: var(--accent); }
.mb-fn { padding: 9px 13px; border-radius: 999px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); font-size: 19px; cursor: pointer; }
.mb-fn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.mb-row { display: flex; gap: 8px; flex-wrap: wrap; }
.mb-h { margin: 6px 0 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }
.mb-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--rule-soft); font-size: 14px; }
.mb-item p { margin: 0; overflow-wrap: anywhere; } .mb-item small { color: var(--ink-faint); font-size: 12px; grid-column: 1 / -1; }
.mb-item .btn { padding: 6px 12px; font-size: 13px; }
.mb-openbtn { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; width: 100%; text-align: left; font: inherit; color: var(--ink); cursor: pointer; padding: 14px 16px; border-radius: 18px; }

.mb-prev:not([class*="mf-f-"]) .mf-big { font-weight: 700; font-size: 28px; }
.mb-prev[class*="mf-f-"] .mf-big { zoom: .8; }
.mb-prev .mf-big { margin: 0; }