:root {
  --bg: #0f1216;
  --surface: #171c23;
  --surface-2: #1e252e;
  --border: #2a323d;
  --text: #e7ecf2;
  --muted: #93a1b2;
  --accent: #e0b64d;      /* Icon gold */
  --accent-2: #4ea1ff;
  --green: #47c479;
  --red: #e5484d;
  --radius: 12px;
  --shadow: 0 2px 8px rgba(0,0,0,.35);
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;   /* nav must wrap, not clip "Log out" */
  padding: 14px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.topbar .brand { display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: .5px; white-space: nowrap; }
.topbar .brand .logo {
  width: 34px; height: 34px; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), #b8862a);
  color: #1a1206; display: grid; place-items: center; font-weight: 900;
}
.topbar .brand small { color: var(--muted); font-weight: 500; display:block; letter-spacing: 0; }
.topbar nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: flex-end; }
.topbar .who { color: var(--muted); font-size: 14px; white-space: nowrap; }
/* On narrow screens the signed-in email is the first thing worth dropping —
   the nav links and Log out matter more. */
@media (max-width: 900px) {
  .topbar { padding: 12px 16px; }
  .topbar nav { gap: 12px; }
  .topbar .who { display: none; }
}

.container { max-width: 1180px; margin: 0 auto; padding: 24px; }
.container.wide { max-width: 1320px; }

h1 { font-size: 24px; margin: 0 0 4px; }
h2 { font-size: 18px; margin: 0 0 14px; }
.subtle { color: var(--muted); }
.muted { color: var(--muted); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}
.card h2 { display:flex; align-items:center; justify-content: space-between; }

.grid { display: grid; gap: 20px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } }

.stat { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.stat .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .6px; }
.stat .value { font-size: 22px; font-weight: 700; margin-top: 4px; }
.stat .value small { font-size: 13px; color: var(--muted); font-weight: 500; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table-wrap { overflow-x: auto; }
th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; position: sticky; top: 0; background: var(--surface); }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.wrap { white-space: normal; min-width: 220px; }

/* The shopping list is read one-handed in a shop, so it has to fit the phone
   screen rather than scroll sideways. Food names wrap instead of forcing the
   table wider; the generic .wrap above can't be reused because its 220px
   min-width is itself wider than the space available on a 375px viewport. */
#shopping-list-card td.food { white-space: normal; min-width: 0; }
#shopping-list-card th.food { min-width: 0; }

.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.tabs button {
  background: none; border: none; color: var(--muted);
  padding: 10px 16px; cursor: pointer; font-size: 14px; font-weight: 600;
  border-bottom: 2px solid transparent;
}
.tabs button:hover { color: var(--text); }
.tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.badge { display:inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); }
.badge.gold { background: rgba(224,182,77,.15); color: var(--accent); border-color: rgba(224,182,77,.4); }
.badge.green { background: rgba(71,196,121,.15); color: var(--green); border-color: rgba(71,196,121,.4); }
.badge.red { background: rgba(229,72,77,.15); color: var(--red); border-color: rgba(229,72,77,.4); }

.btn {
  display: inline-block; padding: 9px 16px; border-radius: 9px; font-weight: 600; font-size: 14px;
  background: var(--accent); color: #1a1206; border: none; cursor: pointer; text-decoration: none;
}
.btn:hover { filter: brightness(1.06); text-decoration: none; }
.btn.secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.btn.danger { background: transparent; color: var(--red); border: 1px solid rgba(229,72,77,.5); }
.btn.small { padding: 5px 10px; font-size: 13px; }

.chart-box { position: relative; height: 240px; }
.chart-empty { height: 240px; display: grid; place-items: center; color: var(--muted); font-style: italic; }

/* --- Progress photos --- */
/* Grid tiles at ~60% of their original size — a contact sheet you scan, with
   the lightbox for anything you want to actually look at. */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; margin-bottom: 18px; }
.photo-card { margin: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.photo-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; background: #0b0e12; }
.photo-card figcaption { padding: 4px 6px; font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; text-align: center; }

/* Image buttons: strip the native button chrome. */
.photo-open { display: block; width: 100%; padding: 0; border: none; background: none; cursor: zoom-in; }
.photo-open:hover img { opacity: .85; }

/* --- Lightbox --- */
.lightbox {
  position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.92);
  display: grid; place-items: center; padding: 28px;
}
.lightbox[hidden] { display: none; }
.lightbox-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; max-height: 100%; }
.lightbox-figure img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 8px; }
.lightbox-figure figcaption { color: var(--text); font-size: 14px; text-align: center; }
.lightbox-close {
  position: absolute; top: 16px; right: 20px; z-index: 1;
  background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.25);
  width: 40px; height: 40px; border-radius: 50%; font-size: 24px; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { background: rgba(255,255,255,.2); }

/* Side-by-side comparison */
.cmp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.cmp-pose-label { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--accent); font-weight: 700; margin-bottom: 8px; }
.cmp-cell { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
/* Source photos are a mix of 3:4 and 9:16. A fixed aspect box letterboxes the
   tall ones and throws away size, so give both cells the same generous height
   and let `contain` scale each to fit without distortion. */
.cmp-cell img { width: 100%; height: 78vh; min-height: 460px; object-fit: contain; display: block; background: #0b0e12; }
.cmp-cell .cap { padding: 7px 9px; font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.cmp-cell .cap b { color: var(--text); font-weight: 600; }
.cmp-missing { display: grid; place-items: center; height: 78vh; min-height: 460px; color: var(--muted); font-style: italic; font-size: 13px; }

/* --- Show countdown --- */
.countdown {
  display: flex; align-items: center; gap: 18px;
  background: linear-gradient(90deg, rgba(224,182,77,.14), rgba(224,182,77,.03));
  border: 1px solid rgba(224,182,77,.35);
  border-radius: var(--radius); padding: 14px 20px; margin-bottom: 20px;
}
.countdown-num {
  font-size: 40px; font-weight: 800; line-height: 1; color: var(--accent);
  font-variant-numeric: tabular-nums; min-width: 64px; text-align: center;
}
.countdown-body { display: flex; flex-direction: column; gap: 2px; }
.countdown-body strong { font-size: 15px; letter-spacing: .3px; }
.countdown-body .subtle { font-size: 13px; }
/* Inside 4 weeks: switch to red to signal peak week is close. */
.countdown.imminent { background: linear-gradient(90deg, rgba(229,72,77,.14), rgba(229,72,77,.03)); border-color: rgba(229,72,77,.4); }
.countdown.imminent .countdown-num { color: var(--red); }
/* Show has passed: mute it rather than shout. */
.countdown.past { background: var(--surface); border-color: var(--border); }
.countdown.past .countdown-num { color: var(--muted); }

/* --- PED protocol day grid --- */
.ped-protocol th.day, .ped-protocol td.day {
  text-align: center; width: 52px; padding: 8px 4px; font-variant-numeric: tabular-nums;
}
.ped-protocol td.day { color: var(--muted); }
/* Dosing days stand out from rest days at a glance. */
.ped-protocol td.day.on { color: var(--text); font-weight: 600; background: rgba(224,182,77,.08); }
.ped-protocol td.compound { min-width: 150px; }
/* Every-day items span the seven day cells instead of showing seven blanks. */
.ped-protocol td.every-day { width: auto; font-weight: 600; letter-spacing: .3px; font-size: 12px; text-transform: uppercase; }

.week-block { border-bottom: 1px solid var(--border); }
.week-block > summary {
  cursor: pointer; padding: 12px 4px; font-weight: 600; font-size: 14px;
  display: flex; align-items: center; gap: 10px; list-style: none;
}
.week-block > summary::-webkit-details-marker { display: none; }
.week-block > summary::before { content: "▸"; color: var(--accent); font-size: 12px; transition: transform .15s; }
.week-block[open] > summary::before { transform: rotate(90deg); }
.week-block > summary:hover { color: var(--accent); }
.week-block > summary .subtle { margin-left: auto; font-weight: 400; font-size: 12px; }

/* --- Inline-edit tables ----------------------------------------------------
   An input inside a cell adds its own border + padding, pushing its text 12px
   right of the column header above it. Trim the cell padding and pad the header
   to match, so header and value share one left edge. Headers are forced
   left-aligned here (overriding .num) so every column lines up consistently. */
/* `th.num` (0,1,1) outranks a plain element selector, so the .num variant is
   listed explicitly to win and keep numeric headers left-aligned here too. */
table:has(td > input, td > select) th,
table:has(td > input, td > select) th.num { text-align: left; padding: 8px 14px; }
table:has(td > input, td > select) td { padding: 8px 14px; }
table:has(td > input, td > select) td:has(> input),
table:has(td > input, td > select) td:has(> select) { padding: 4px; }
table:has(td > input, td > select) td > input,
table:has(td > input, td > select) td > select { padding: 7px 9px; }

/* Day-of-week columns in the PED/supplement editors. The input fills the cell
   so its centre matches the header's centre exactly (a fixed-width input in a
   wider cell drifts a few px off). */
table th.day-col, table td.day-col { width: 58px; }
table td.day-col > input { width: 100%; padding: 7px 2px; text-align: center; }

/* Calculated (read-only) fields — visibly not for typing in. */
input.kcal-out, input[readonly] {
  background: rgba(255,255,255,.03); color: var(--muted);
  border-style: dashed; cursor: default;
}
input.kcal-out { font-weight: 600; color: var(--text); }

/* --- Modal (macro lookup) --- */
.modal { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.7); display: grid; place-items: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; width: 100%; max-width: 640px; max-height: 82vh; overflow-y: auto; box-shadow: var(--shadow);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.modal-close { background: none; border: none; color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer; width: auto; }
.modal-close:hover { color: var(--text); }
.lookup-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.lookup-row:last-child { border-bottom: none; }
.lookup-info { flex: 1; min-width: 0; }
.lookup-macros { font-size: 12px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.lookup-macros em { color: var(--muted); font-style: normal; opacity: .75; }

/* --- Workout logger (used on a phone in the gym, so mobile-first) --- */
.workout-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.day-nav { display: flex; align-items: center; gap: 6px; }
.day-nav input[type="date"] { width: auto; padding: 7px 9px; font-size: 13px; }

.exercise-card { padding: 16px; }
.ex-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ex-head h2 { font-size: 16px; }

.last-time {
  font-size: 12px; color: var(--muted); margin-top: 8px;
  padding: 6px 9px; background: var(--surface-2); border-radius: 7px;
}
.last-time span { display: inline-block; margin-right: 10px; color: var(--text); }

.set-grid { margin-top: 12px; }
.set-grid-head, .set-row {
  display: grid; grid-template-columns: 34px 1fr 1fr; gap: 8px; align-items: center;
}
.set-grid-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); margin-bottom: 6px; padding: 0 2px;
}
.set-row { margin-bottom: 7px; }
.set-row .set-no {
  text-align: center; font-size: 13px; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* The spare row beyond the prescribed sets is de-emphasised until used. */
.set-row.extra input { border-style: dashed; opacity: .75; }
.set-row.extra input:focus { opacity: 1; border-style: solid; }
/* Big touch targets — this gets used between sets with sweaty hands. */
.set-row input { padding: 12px 10px; font-size: 16px; text-align: center; }
/* A suggested number reads as a ghost so it's never mistaken for logged data. */
.set-row.has-hint input::placeholder { color: var(--muted); opacity: .55; font-style: italic; }
.set-row input[data-accepted="1"] { border-color: rgba(224,182,77,.55); }

.save-bar {
  position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px;
  background: var(--bg); padding: 14px 0; border-top: 1px solid var(--border);
}
.save-bar .btn { flex: 1; padding: 14px; font-size: 15px; }

@media (max-width: 520px) {
  .workout-head { flex-direction: column; }
  .day-nav { width: 100%; }
  .day-nav input[type="date"] { flex: 1; }
}

/* Package-inclusion toggles */
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.module-toggle {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 9px; padding: 10px 12px; font-size: 14px;
}
.module-toggle:hover { border-color: var(--accent); }
.module-toggle input { width: auto; margin: 0; accent-color: var(--accent); }
.module-toggle:has(input:checked) { border-color: rgba(224,182,77,.45); background: rgba(224,182,77,.07); }
.module-toggle:has(input:not(:checked)) span { color: var(--muted); text-decoration: line-through; }

/* Tab marked as excluded from the client's package (admin view only) */
.tabs button .excluded { color: var(--muted); font-size: 10px; margin-left: 5px; vertical-align: middle; }

form.stack { display: grid; gap: 14px; }
.field { display: grid; gap: 5px; }
.field label { font-size: 13px; color: var(--muted); font-weight: 600; }
input, select, textarea {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 9px 11px; font-size: 14px; font-family: inherit; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-2); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.form-actions { display: flex; gap: 10px; margin-top: 8px; }

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: 100%; max-width: 460px; }
.login-card .logo-big { width: 56px; height: 56px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), #b8862a); color:#1a1206; display:grid; place-items:center; font-weight:900; font-size: 22px; margin: 0 auto 14px; }
.alert { background: rgba(229,72,77,.12); border: 1px solid rgba(229,72,77,.4); color: #ffb4b6; padding: 10px 14px; border-radius: 8px; font-size: 14px; }
.notice { background: rgba(71,196,121,.12); border: 1px solid rgba(71,196,121,.4); color: #a6e9c4; padding: 10px 14px; border-radius: 8px; font-size: 14px; }

.section-title { font-size: 13px; text-transform: uppercase; letter-spacing: .8px; color: var(--accent); margin: 22px 0 10px; font-weight: 700; }
.rating { font-variant-numeric: tabular-nums; }
.empty { color: var(--muted); font-style: italic; padding: 12px 0; }

/* --- Platform branding (Wheyts) ------------------------------------------ */
/* The tenant's brand fills the app; these are the two places the platform
   itself shows: the login page and a quiet footer mark. */

.platform-footer {
  margin: 40px 0 24px;
  padding: 0 20px;
  display: flex;
  justify-content: center;
}
.powered-by {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .65;
  transition: opacity .15s ease;
}
.powered-by:hover { opacity: 1; text-decoration: none; }
.powered-by strong { color: var(--accent); font-weight: 700; letter-spacing: .16em; }
/* 15px, because this is a wordmark-only asset: the letters fill the full height
   of the file, so the rendered height IS the cap height. (26px was sized for a
   stacked lockup, where most of the height was the W mark and tagline -- as a
   pure wordmark it towered over the 12px "Powered by" beside it.) This sits a
   touch above the label, which is the intent: the name leads, the preamble
   recedes. */
.powered-by img { height: 15px; width: auto; display: block; }

.brand-card { text-align: center; }
/* Fills the card rather than sitting at a fixed cap: the artwork is the hero of
   this page, and a hard max-width made a near-square lockup look like a stamp.
   max-height keeps a tall logo from pushing the form below the fold. */
.brand-logo {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 320px;
  height: auto;
  object-fit: contain;
  margin: 0 auto 18px;
}
.brand-fallback { margin: 8px 0 10px; }
.brand-mark {
  display: block;
  font-size: 54px;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -.02em;
}
.brand-word {
  display: block;
  margin-top: 6px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .22em;
  text-indent: .22em;   /* offset the trailing letter-space so it reads centred */
}
.brand-tagline {
  margin: 0 0 22px;
  color: var(--accent);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.brand-strap {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .75;
}
@media (max-width: 480px) {
  /* No width cap on phones either -- the card is already narrow, so capping the
     logo again just wastes the little space there is. Height cap keeps the form
     above the fold. */
  .brand-logo { max-height: 200px; }
  .brand-mark { font-size: 44px; }
  .brand-word { font-size: 22px; }
  .brand-tagline, .brand-strap { letter-spacing: .14em; font-size: 10px; }
}

/* --- Food diary ---------------------------------------------------------- */
/* Logged one-handed, often standing in a kitchen, so tap targets are generous
   and the totals sit above everything else. */

.day-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.day-nav > div { text-align: center; flex: 1; }
.day-nav h1 { font-size: 19px; }

.macro-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.macro-cell { text-align: center; }
.macro-cell .label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }
.macro-cell .value { font-size: 21px; font-weight: 700; line-height: 1.2; }
.macro-cell .value small { font-size: 12px; color: var(--muted); font-weight: 500; }
.macro-cell .goal { font-size: 11px; color: var(--muted); }
/* Over/under is information, not judgement — under-eating protein and
   over-eating it are both just "off target", so neither gets a red alarm. */
.macro-cell .goal .over { color: var(--accent); }
.macro-cell .goal .under { color: var(--muted); }
.macro-cell .goal .onpoint { color: var(--green); }
.macro-cell .bar { height: 3px; background: var(--surface-2); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.macro-cell .bar span { display: block; height: 100%; background: var(--accent); }

.search-results {
  border: 1px solid var(--border); border-radius: 8px;
  margin-top: 6px; overflow: hidden; background: var(--surface-2);
  max-height: 260px; overflow-y: auto;
}
.search-hit {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; padding: 10px 12px; text-align: left; cursor: pointer;
  background: none; border: none; border-bottom: 1px solid var(--border);
  color: var(--text); font-size: 14px;
}
.search-hit:last-child { border-bottom: none; }
.search-hit:hover, .search-hit:focus { background: var(--surface); }
.search-hit .subtle { font-size: 12px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 8px 12px; border-radius: 999px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); font-size: 13px;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }

/* Food names wrap rather than widening the table off a phone screen — same
   reasoning as the shopping list. */
#panel-diet td.food, .container td.food { white-space: normal; min-width: 0; }

@media (max-width: 480px) {
  .macro-row { gap: 6px; }
  .macro-cell .value { font-size: 18px; }
  .macro-cell .label { font-size: 10px; letter-spacing: .3px; }
}

/* Diary tables on a phone: seven columns don't fit 375px, and this is THE
   screen a client uses standing in a kitchen — sideways scrolling to check a
   number is worse than not showing it. P/C/F drop out below 480px; the day
   totals at the top carry that information, and tapping a row is not needed
   to read it. Calories stay because that's the number being managed. */
@media (max-width: 480px) {
  .diary-table th.macro, .diary-table td.macro { display: none; }
  .diary-table th, .diary-table td { padding: 10px 8px; }
  /* 27px was below the comfortable-tap threshold on the one control a client
     hits most often after mis-logging. */
  .diary-table .btn.small { padding: 8px 12px; font-size: 14px; }
}

/* Session switcher on the workout logger. */
.session-switch summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.session-switch[open] summary { margin-bottom: 4px; }
.chip.on { border-color: var(--accent); color: var(--accent); background: rgba(224,182,77,.12); }
a.chip { text-decoration: none; }
a.chip:hover { text-decoration: none; }

/* Water logging on the diary. */
.water-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.water-total { font-size: 22px; font-weight: 700; }
.water-total small { font-size: 13px; color: var(--muted); font-weight: 500; margin-left: 2px; }
.water-card .chip-row form { margin: 0; }
.water-set { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.water-set label { font-size: 12px; }
.water-set input { width: 110px; }