/* 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; }