:root {
  --bg: #0e1116;
  --bg2: #161b23;
  --card: #1b222d;
  --border: #2a3341;
  --text: #e8edf4;
  --muted: #8b97a8;
  --accent: #3ddc84;
  --accent-dim: #2aa863;
  --danger: #ff6b6b;
  --warn: #ffb454;
  --radius: 12px;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; }
h1 { font-size: 1.6rem; margin: .4rem 0 1rem; }
h2 { font-size: 1.2rem; margin: 1.2rem 0 .6rem; }

/* nav */
.nav {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .7rem 1.2rem; background: var(--bg2); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.brand { font-weight: 800; font-size: 1.25rem; color: var(--text); letter-spacing: .5px;
         display: inline-flex; align-items: center; }
/* Muscle-man mark from the app icon, black background made transparent
   (static/img/logo-mark.png) so it sits on the header colour, not in a box. */
.brand-mark-link { display: flex; line-height: 0; }
.brand-mark-link:hover { text-decoration: none; }
.brand-mark { height: 2.1rem; width: auto; display: block; }
/* On a phone the mark sits centred in the space between the name and the
   menu button: auto margins on both sides, and the button gives up its own
   auto margin so the free space splits evenly. */
@media (max-width: 760px) {
  .brand-mark { height: 2.4rem; }
  .brand-mark-link { margin: 0 auto; }
  .brand-mark-link ~ .nav-toggle { margin-left: 0; }
  .nav-bell { margin-right: .55rem; }
}
.brand span { color: var(--accent); }
.brand:hover { text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: 1rem; flex: 1; flex-wrap: wrap; }
.nav-links a { color: var(--text); font-size: .95rem; opacity: .85; }
.nav-links a:hover { opacity: 1; text-decoration: none; color: var(--accent); }
.nav-links a.accent { color: var(--accent); font-weight: 600; }
.nav-links a.active { color: var(--accent); font-weight: 600; opacity: 1;
  text-decoration: underline; text-underline-offset: 5px; }
.nav-links .muted { color: var(--muted); }
.spacer { flex: 1; }
.lang a { color: var(--muted); font-size: .85rem; }
.lang a.on { color: var(--accent); font-weight: 700; }
.nav-toggle { display: none; background: none; border: 0; color: var(--text); font-size: 1.4rem; cursor: pointer; }
@media (max-width: 760px) {
  .nav-toggle { display: block; margin-left: auto; font-size: 1.6rem; padding: .2rem .5rem; }
  .nav-links { display: none; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: .6rem; }
  /* 14 items would otherwise fill a phone screen and cover the page behind it */
  body.nav-open .nav-links { display: flex; max-height: 68vh; overflow-y: auto;
    padding: .5rem 0 .3rem; overscroll-behavior: contain; }
  body.nav-open .nav-links a { padding: .25rem 0; }
  .spacer { display: none; }
}

/* layout */
.container { width: 100%; max-width: 1080px; margin: 0 auto; padding: 1.4rem 1.2rem 3rem; flex: 1; }
.grid { display: grid; gap: 1rem; }
/* min(...) so a bare 280px floor cannot exceed a narrow container and push
   the card's own content out of it on a 320px phone. */
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.1rem 1.2rem;
}
.card h2 { margin-top: 0; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

/* forms */
label { display: block; font-size: .85rem; color: var(--muted); margin: .7rem 0 .25rem; }
input, select, textarea {
  width: 100%; padding: .55rem .7rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg2); color: var(--text);
  font: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-dim); border-color: transparent; }
/* strip native select chrome (Safari renders its own, breaking consistency) and
   draw a matching caret so the dropdown looks like the inputs beside it */
select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 2rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a1b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .65rem center; background-size: .85rem;
}
.btn {
  display: inline-block; padding: .55rem 1.2rem; border-radius: 8px; border: 0;
  background: var(--accent); color: #08130c; font-weight: 700; font-size: .95rem;
  cursor: pointer; margin-top: .8rem;
}
.btn:hover { background: var(--accent-dim); text-decoration: none; }
.btn.ghost { background: transparent; border: 1px solid var(--border); color: var(--text); font-weight: 500; }
.btn.small { padding: .3rem .7rem; font-size: .82rem; margin-top: 0; }
.btn.danger { background: transparent; border: 1px solid var(--danger); color: var(--danger); }
.inline-form { display: inline; }
.row { display: flex; gap: .8rem; align-items: stretch; flex-wrap: wrap; }
/* Bottom-aligned inputs with top-aligned labels. `align-items: end` alone
   pushed the whole cell down, so a label that wrapped to two lines (every
   Lithuanian one on a phone) dragged its neighbour's label out of line. */
.row > div { flex: 1; min-width: 110px; display: flex; flex-direction: column;
             justify-content: flex-end; }

/* flash */
.flash { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .95rem; }
.flash.ok { background: rgba(61,220,132,.12); border: 1px solid var(--accent-dim); }
.flash.error { background: rgba(255,107,107,.12); border: 1px solid var(--danger); }

/* tables */
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.table-wrap { overflow-x: auto; }

/* stats */
.stat { text-align: center; padding: .9rem .4rem; }
.stat .num { font-size: 1.7rem; font-weight: 800; color: var(--accent); }
.stat .lbl { font-size: .8rem; color: var(--muted); }

/* progress bars */
.bar { height: 10px; background: var(--bg2); border-radius: 6px; overflow: hidden; margin: .25rem 0 .1rem; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 6px; }
.bar i.over { background: var(--warn); }

/* hero stat strip: progress rings */
/* Swipeable rail. Was a rigid repeat(4,1fr) grid, which overflowed narrow
   phones and made the WHOLE PAGE pan sideways. Now the rail scrolls inside
   itself and the page stays put, so extra tiles can be added freely. */
.hero-stats {
  display: flex; gap: .7rem; margin: 0 0 1rem;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* Firefox */
  padding-bottom: .2rem;
}
.hero-stats::-webkit-scrollbar { display: none; }
.hero-stats > * {
  flex: 1 0 clamp(84px, 20%, 140px);
  scroll-snap-align: start;
}
/* soft right edge = visual hint that the rail keeps going */
.hero-stats {
  -webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, #000 92%, transparent 100%);
}
.ring-tile {
  background: linear-gradient(160deg, var(--card) 0%, var(--bg2) 100%);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: .7rem .4rem .55rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
}
.ring-tile svg { width: 74px; height: 74px; max-width: 100%; }
.ring-bg, .ring-fg { fill: none; stroke-width: 7; }
.ring-bg { stroke: var(--bg2); }
.ring-fg {
  stroke: var(--accent); stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 42px 42px;
  transition: stroke-dasharray .6s ease;
}
.ring-fg.done { stroke: var(--accent); filter: drop-shadow(0 0 4px rgba(61,220,132,.55)); }
.ring-fg.over { stroke: var(--warn); }
.ring-num { fill: var(--text); font-size: 17px; font-weight: 800; text-anchor: middle; }
.ring-sub { fill: var(--muted); font-size: 9.5px; text-anchor: middle; }
.ring-lbl { font-size: .72rem; color: var(--muted); margin-top: .35rem; letter-spacing: .02em; }
.weight-tile, .num-tile { justify-content: center; gap: .25rem; }
.num-tile .tile-ic { font-size: 1.1rem; line-height: 1; }
.num-tile .weight-num { padding-top: .2rem; }
.weight-num { font-size: 1.45rem; font-weight: 800; line-height: 1.1; padding-top: .4rem; }
.weight-unit { font-size: .8rem; font-weight: 600; color: var(--muted); }
.trend {
  display: inline-block; padding: .1rem .5rem; border-radius: 999px;
  font-size: .74rem; font-weight: 700; white-space: nowrap;
}
.trend.good { background: rgba(61,220,132,.14); color: var(--accent); }
.trend.watch { background: rgba(255,180,84,.14); color: var(--warn); }
/* `overflow-x: hidden` turns the element into a scroll container, which kills
   `position: sticky` on the nav — the header scrolled away on phones and you
   had to scroll all the way back up to reach the menu. `clip` does the same
   job without creating a scroll container. `hidden` first as the fallback. */
html, body { overflow-x: hidden; overflow-x: clip; }

@media (max-width: 560px) {
  .hero-stats { gap: .45rem; }
  .ring-tile svg { width: 62px; height: 62px; }
  .weight-num { font-size: 1.15rem; }
}

/* coach tip card */
.tip-card {
  display: flex; align-items: center; gap: .9rem;
  background: linear-gradient(135deg, rgba(61,220,132,.10), rgba(61,220,132,.02));
  border: 1px solid var(--accent-dim); border-radius: var(--radius);
  padding: .8rem 1rem; margin-bottom: 1rem;
}
.tip-ic {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(61,220,132,.15); color: var(--accent);
}
.tip-ic .ic { width: 22px; height: 22px; }
.tip-body { flex: 1; min-width: 200px; }
.tip-kicker { font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.tip-body p { margin: .1rem 0 0; font-size: .95rem; }
.tip-card .btn { margin-top: 0; white-space: nowrap; }
@media (max-width: 560px) {
  .tip-card { flex-wrap: wrap; }
  /* the 48px indent lines the action up under the icon — no icon, no indent */
  .tip-card:not(.no-ic) .btn { margin-left: 48px; }
}

/* status dots (bloodwork flags) */
.status-dot {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .12rem .55rem; border-radius: 999px; font-size: .76rem; font-weight: 700;
}
.status-dot i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.status-dot b { font-weight: 600; }
.status-dot.ok { background: rgba(61,220,132,.12); color: var(--accent); }
.status-dot.ok i { background: var(--accent); box-shadow: 0 0 5px rgba(61,220,132,.7); }
.status-dot.warn { background: rgba(255,180,84,.13); color: var(--warn); }
.status-dot.warn i { background: var(--warn); box-shadow: 0 0 5px rgba(255,180,84,.7); }

/* card headers with icon chip */
.card-h { display: flex; align-items: center; gap: .55rem; }
.card-ic {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(61,220,132,.12); color: var(--accent);
}
.card-ic .ic { width: 17px; height: 17px; }
.ic { width: 20px; height: 20px; }

/* chips */
.chip {
  display: inline-block; padding: .15rem .6rem; border-radius: 999px;
  border: 1px solid var(--border); font-size: .8rem; color: var(--muted); margin: 0 .3rem .3rem 0;
}
.chip.on, .chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.badge { display: inline-block; padding: .1rem .5rem; border-radius: 6px; font-size: .75rem; font-weight: 700; }
.badge.free { background: rgba(139,151,168,.2); color: var(--muted); }
.badge.pro { background: rgba(61,220,132,.15); color: var(--accent); }

/* coach chat */
.chat { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1rem; }
.msg { max-width: 85%; padding: .7rem 1rem; border-radius: var(--radius); white-space: pre-wrap; overflow-wrap: break-word; }
.msg.user { align-self: flex-end; background: var(--accent-dim); color: #06130b; border-bottom-right-radius: 4px; }
.msg.assistant { align-self: flex-start; background: var(--card); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.msg .saved-link { display: block; margin-top: .5rem; font-weight: 600; }
.chat-input { display: flex; gap: .6rem; position: sticky; bottom: 0; background: var(--bg); padding: .6rem 0; }
.chat-input textarea { resize: none; height: 58px; }
.chat-input .btn { margin-top: 0; align-self: stretch; }
.typing { color: var(--muted); font-style: italic; }

/* charts */
.chart svg { width: 100%; height: auto; display: block; }
.chart .axis { stroke: var(--border); stroke-width: 1; }
.chart .line { stroke: var(--accent); stroke-width: 2; fill: none; }
.chart .dot { fill: var(--accent); }
.chart text { fill: var(--muted); font-size: 10px; }

/* auth pages */
.auth-box { max-width: 420px; margin: 3rem auto; }
.auth-box .brand-big { font-size: 2rem; font-weight: 800; text-align: center; display: block; margin-bottom: 1rem; color: var(--text); }
.auth-box .brand-big span { color: var(--accent); }

/* logged-out landing: hero + login side by side */
.landing {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.5rem;
  align-items: center; max-width: 960px; margin: 1.5rem auto; min-height: 70vh;
}
.landing .auth-box { margin: 0; width: 100%; max-width: 420px; }
.landing-hero { min-width: 0; }
.hero-title { font-size: 2.6rem; font-weight: 800; letter-spacing: .5px; margin: .2rem 0 .5rem; }
.hero-title span { color: var(--accent); }
.hero-lead { font-size: 1.1rem; color: var(--muted); margin: 0 0 1.2rem; max-width: 30ch; }
.hero-feats { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.hero-feats li { display: flex; align-items: center; gap: .6rem; margin: .55rem 0; font-size: .96rem; }
.hero-feats .ic { flex: 0 0 auto; width: 20px; height: 20px; color: var(--accent); }
.hero-cta { margin-top: 0; }

/* animated hero art: a row of KPI rings (numbers count up) + ECG sweep */
.hero-art { max-width: 340px; margin-bottom: .6rem; }
.hero-art svg { width: 100%; height: auto; display: block; overflow: visible; }
.hr-bg { fill: none; stroke: var(--bg2); stroke-width: 7; }
.hr-fg {
  fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 188.5; stroke-dashoffset: 188.5;
  transform: rotate(-90deg); transform-box: fill-box; transform-origin: center;
  filter: drop-shadow(0 0 3px rgba(61,220,132,.5));
}
.hr-num { fill: var(--text); font-size: 16px; font-weight: 800; text-anchor: middle; dominant-baseline: central; }
.hero-ecg {
  fill: none; stroke: var(--accent); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round; opacity: .65;
  stroke-dasharray: 300; animation: ecgSweep 4.3s linear infinite;
}
@keyframes ecgSweep {
  0% { stroke-dashoffset: 300; }
  55% { stroke-dashoffset: 0; }
  70%, 100% { stroke-dashoffset: -300; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ecg { animation: none; stroke-dashoffset: 0; }
}
@media (max-width: 760px) {
  .landing { grid-template-columns: 1fr; gap: 1.4rem; min-height: 0; text-align: center; }
  .landing .auth-box { margin: 0 auto; }
  .hero-lead { margin-left: auto; margin-right: auto; }
  .hero-feats { display: block; width: max-content; max-width: 100%; margin: 0 auto 1.4rem; text-align: left; }
  .hero-art { margin: 0 auto .6rem; max-width: 260px; }
  .hero-title { font-size: 2.2rem; }
}

/* footer */
.footer { padding: 1rem 1.2rem 1.6rem; border-top: 1px solid var(--border); background: var(--bg2); }
.footer p { max-width: 1080px; margin: 0 auto; color: var(--muted); font-size: .78rem; }
.footer-links { margin: 0 auto .5rem !important; }
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--accent); }

/* legal / policy pages */
.legal { max-width: 780px; margin: 0 auto; line-height: 1.65; }
.legal h1 { margin-bottom: .3rem; }
.legal h2 { margin-top: 1.6rem; font-size: 1.15rem; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin: .3rem 0; }
.requisites { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.requisites th, .requisites td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.requisites th { width: 42%; color: var(--muted); font-weight: 600; }

/* PWA install bar */
.install-bar {
  position: fixed; left: .6rem; right: .6rem; bottom: .6rem; z-index: 80;
  display: flex; align-items: center; gap: .8rem;
  background: var(--card); border: 1px solid var(--accent-dim);
  border-radius: 14px; padding: .7rem .9rem; box-shadow: 0 8px 24px rgba(0,0,0,.5);
  max-width: 520px; margin: 0 auto;
}
/* the [hidden] attribute must win over the display above (author display:flex
   otherwise overrides the UA [hidden]{display:none} rule) */
.install-bar[hidden] { display: none; }
/* Same trap for every button and card: .btn sets display, which beat the
   hidden attribute. Hidden must always mean hidden. */
[hidden] { display: none !important; }
.install-bar img { border-radius: 9px; flex: 0 0 auto; }
.install-text { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.install-close { background: none; border: 0; color: var(--muted); font-size: 1.1rem; cursor: pointer; padding: .2rem .3rem; }

/* exercise photo popover */
#ex-pop {
  display: none; position: absolute; z-index: 60; width: 300px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: .5rem; box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
#ex-pop img, #ex-pop video { width: 100%; border-radius: 8px; display: block; background: #fff; }
#ex-pop img { transition: opacity .12s ease; }
#ex-pop video { aspect-ratio: 1; object-fit: cover; }
#ex-pop .cap { margin: .4rem 0 0; font-size: .85rem; color: var(--muted); text-align: center; }
#ex-pop.fixed {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(90vw, 340px);
}
.ex-pic { cursor: pointer; }

/* set editor rows */
.set-row { display: grid; grid-template-columns: 2fr 70px 90px 70px 36px; gap: .5rem; margin-bottom: .5rem; align-items: center; }
.set-row .sr-ex { position: relative; }        /* anchors the exercise picker */
.set-row .sr-ex input, .set-row .sr-n input { width: 100%; }
.set-row .sr-n::before { display: none; }
.set-row button { background: none; border: 0; color: var(--danger); cursor: pointer; font-size: 1.1rem; }
/* Phones: four inputs across left 56px for "Kartojimai", so the placeholders
   were shaved to "Kart" and "kg" and the exercise field had no room for a name
   at all. One set per block instead — exercise on its own line, the numbers
   under it with real labels. */
@media (max-width: 560px) {
  .set-row {
    grid-template-columns: 1fr auto; gap: .4rem .5rem; align-items: center;
    border: 1px solid var(--border); border-radius: 10px;
    padding: .5rem .6rem; background: var(--bg2);
  }
  /* Two explicit rows: the exercise and the delete button across the top,
     the three numbers side by side underneath. Left to auto-placement each
     number claimed a row of its own and the block grew to five lines. */
  .set-row { position: relative; grid-template-columns: auto auto; padding-right: 2.8rem; }
  .set-row > span:nth-of-type(1) { grid-column: 1 / -1; grid-row: 1; }
  /* Out of the grid entirely: as a fourth column it pushed the whole row past
     the card edge on a 360px screen. */
  .set-row > button { position: absolute; top: .3rem; right: .3rem; }
  .set-row > span:nth-of-type(2) { grid-column: 1; grid-row: 2; }
  .set-row > span:nth-of-type(3) { grid-column: 2; grid-row: 2; }
  /* RPE stays hidden on phones, as it was before — optional, rarely filled,
     and the room is better spent on labels people can actually read. */
  .set-row > span:nth-of-type(4) { display: none; }
  .set-row .sr-n { display: inline-flex; align-items: center; gap: .3rem; }
  .set-row .sr-n::before {
    display: inline; content: attr(data-label); color: var(--muted); font-size: .72rem;
  }
  .set-row .sr-n input { width: 3.6rem; }
}

/* readiness: "how do you feel" pill radios (the radio itself is hidden) */
.feel-opt {
  /* MUST stay positioned: the hidden radio inside is absolutely positioned, and
     without this it escapes to the initial containing block and stretches the
     whole document sideways (the "page pans" bug). */
  position: relative;
  flex: 1; margin: 0; text-align: center; cursor: pointer; user-select: none;
  padding: .45rem .3rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg2); color: var(--muted); font-size: .85rem;
}
/* The radio is invisible and unclickable — the <label> around it does the
   work — so it needs no size at all. It used to be stretched to inset:0 with
   width/height:100%, which resolved a few pixels wider than the pill and left
   every option overflowing its own border. */
.feel-opt input { position: absolute; top: 0; left: 0; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; }
.feel-opt:has(input:checked), .feel-opt.on {
  border-color: var(--accent); color: var(--accent); background: rgba(61, 220, 132, .08);
}
/* No nowrap: "⟳ sinchronizuota automatiškai · ką tik" is one phrase and it is
   wider than a phone card, so nowrap pushed the tail straight out of the tile.
   Only the timestamp itself must not break. */
.synced { color: var(--accent); margin-left: .4rem; }
.synced .ago { white-space: nowrap; }
/* A dead device link has to look wrong at a glance, not read as ordinary
   muted text — this is the one state the member must actually act on. */
.sync-warn { color: #f0a83c; margin: .1rem 0 .35rem; font-size: .92rem; }
.sync-warn .muted { color: var(--muted); }

/* Device-link dot on the steps tile. Three states, because two would lie:
   a 6-hourly worker means an overnight gap is normal, so "old" and "dead"
   must not look the same. Only the healthy state animates — a pulse over a
   dead feed reassures the member that nothing is wrong. */
.sync-dot { display:inline-block; width:.46rem; height:.46rem; border-radius:50%;
  margin-right:.38rem; vertical-align:middle; background:var(--muted); }
.sync-dot.live  { background:#3b9dff; animation: sync-pulse 2.6s ease-out infinite; }
.sync-dot.stale { background:#f0a83c; }
.sync-dot.off   { background:#e5484d; }

/* Date under the headline figure when it is not today's reading. */
.tile-day { color: var(--muted); font-size: .74rem; margin-top: -.15rem; }
/* Disclosure caret on the steps tile. Sits opposite the sync button so the two
   never overlap on a narrow phone. */
/* KLAUSK — the one-tap route to the coach. Outlined rather than filled so it
   reads as an invitation next to the tip, not a second primary action
   competing with "Registruoti treniruotę". */
.btn-ask {
  display:block; text-align:center; letter-spacing:.22em; font-weight:700;
  font-size:.95rem; color:var(--accent); text-decoration:none;
  border:2px solid var(--accent); border-radius:.5rem;
  padding:.5rem .9rem; margin:0 0 .7rem;
}
.btn-ask:hover, .btn-ask:focus-visible { background:rgba(61,220,132,.12); }

/* Four-week training calendar. */
.cal { width:100%; border-collapse:separate; border-spacing:4px; table-layout:fixed; }
.cal th { font-size:.66rem; font-weight:600; color:var(--muted); padding-bottom:.2rem; }
.cal td { height:2.6rem; border-radius:.45rem; background:rgba(255,255,255,.035);
  text-align:center; vertical-align:middle; }
.cal td.future { opacity:.35; }
.cal td.today { outline:1px solid var(--muted); }
.cal td.done { background:rgba(61,220,132,.16); }
.cal .cal-d { display:block; font-size:.66rem; color:var(--muted); line-height:1; }
.cal .cal-m { display:block; font-size:.95rem; color:var(--accent); line-height:1.15; }

.tile-more { position:absolute; left:.45rem; top:.45rem; background:none; border:0;
  color:var(--muted); font-size:.95rem; line-height:1; padding:.25rem .35rem;
  cursor:pointer; border-radius:.4rem; }
.tile-more:hover, .tile-more:focus-visible { color:var(--text); background:rgba(255,255,255,.06); }
@keyframes sync-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(59,157,255,.55); }
  70%  { box-shadow: 0 0 0 .5rem rgba(59,157,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(59,157,255,0); }
}
/* Respect the OS setting — a looping animation is a real problem for some
   people, and colour already carries the whole meaning. */
@media (prefers-reduced-motion: reduce) { .sync-dot.live { animation: none; } }
.pair-token {
  display: block; padding: .6rem .7rem; background: var(--bg2);
  border: 1px solid var(--accent); border-radius: 8px; color: var(--accent);
  font-family: monospace; font-size: .8rem; word-break: break-all; user-select: all;
}

/* "sync now" affordance on the steps tile (Android app only) */
.num-tile { position: relative; }
.tile-sync {
  position: absolute; top: 4px; right: 6px;
  background: none; border: 0; color: var(--muted);
  font-size: .95rem; line-height: 1; cursor: pointer; padding: 2px 4px;
}
.tile-sync:active { color: var(--accent); }
.tile-sync.spin { animation: tile-spin .9s linear infinite; color: var(--accent); }
@keyframes tile-spin { to { transform: rotate(360deg); } }

/* Measured vitals grid — the home for everything the watch records. Wraps to
   as many columns as fit, so new sensors (distance, BP, SpO2) just slot in. */
.vitals {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: .55rem; margin: .2rem 0 .8rem;
}
.vital {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  padding: .55rem .3rem;
}
.v-num { font-size: 1.25rem; font-weight: 800; line-height: 1.1; }
.v-num i { font-size: .72rem; font-weight: 600; color: var(--muted); font-style: normal; margin-left: 2px; }
.v-lbl { font-size: .68rem; color: var(--muted); margin-top: .2rem; text-align: center; }

/* Card/page heading with an action button on the right. The pattern used to
   be inline flex styles per template, which meant a long Lithuanian title got
   squeezed into a four-line column beside the button on a phone. */
.hd-row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.hd-row .hd-main { flex: 1; min-width: 0; margin: 0; }

/* Horizontal-scroll hint. html/body clip overflow-x, so a table that runs
   wider than the phone is invisible past the edge unless something says so. */
.table-wrap { position: relative; }
.table-wrap.scrollable::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 26px;
  pointer-events: none; border-radius: 0 var(--radius) var(--radius) 0;
  background: linear-gradient(to right, transparent, var(--card) 85%);
}

/* --- Phone pass -------------------------------------------------------
   One-handed use in a gym: nothing clipped, nothing smaller than a thumb,
   no text column so narrow it wraps every second word. */
@media (max-width: 560px) {
  /* The rail stays a rail — a 2x2 grid cost three screens of height for the
     same four numbers. What it lacked was a way to know more was there, so
     .rail-more says so and scrolls to it. */
  .hero-stats { gap: .45rem; }
  .ring-tile svg { width: 66px; height: 66px; }
  .weight-num { font-size: 1.25rem; }

  /* Thumb-sized controls. .btn.small was 25-28px tall — under half the
     48dp Android target, and these are the buttons that do the work. */
  .btn.small {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 40px; padding: .5rem .9rem; font-size: .88rem;
  }
  .chip { display: inline-flex; align-items: center; min-height: 36px; padding: .35rem .8rem; }
  .set-row button { min-height: 40px; min-width: 40px; font-size: 1.3rem; }

  /* The heading title takes the full width and the button drops below it. */
  .hd-row .hd-main { flex: 1 1 100%; }

  /* Lithuanian feel labels are longer than the English ones and were
     spilling past their own pill border. */
  .feel-opt { min-width: 0; padding: .5rem .15rem; font-size: .78rem; overflow-wrap: anywhere; }

  /* Buy back horizontal room so exercise names wrap less. */
  th, td { padding: .45rem .35rem; }

  /* Four columns of lab results do not fit 360px, and the one being cut off
     was the flag — the only column that says "look at this". The dot and the
     arrow carry the same meaning without the word. */
  .status-dot b { display: none; }
  .status-dot { padding: .2rem .35rem; }
}

/* Full-screen picture, opened by tapping a thumbnail (see .img-zoom in app.js) */
.img-zoom-overlay {
  display: none; position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,.88); padding: 1rem;
  align-items: center; justify-content: center;
}
.img-zoom-overlay.on { display: flex; }
.img-zoom-overlay img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  border-radius: 12px; background: #f6f1e7;
}
.izo-close {
  position: absolute; top: max(.6rem, env(safe-area-inset-top)); right: .8rem;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff; font-size: 1.2rem; line-height: 1;
}

/* Rail "there is more" affordance. Sits in .hero-rail (static) rather than in
   .hero-stats (scrolling), or it would slide away with the tiles. */
.hero-rail { position: relative; }
.rail-more {
  position: absolute; top: 50%; right: -2px; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg2); color: var(--text);
  font-size: 1.25rem; line-height: 1; padding: 0 0 3px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.5); z-index: 3;
}
.rail-more:active { color: var(--accent); border-color: var(--accent); }

/* A ticked calendar day opens the session it stands for. */
.cal td.done { padding: 0; }
.cal .cal-link {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; border-radius: .45rem; text-decoration: none;
}
.cal .cal-link:hover { background: rgba(61,220,132,.12); text-decoration: none; }
.cal td.done:target, .cal td.done.flash-target { outline: 2px solid var(--accent); }

/* Saved workouts as folders: date on the cover, sets inside. */
.wk-folder { margin-bottom: .6rem; padding-top: .35rem; padding-bottom: .35rem; }
.wk-folder[open] { padding-bottom: 1rem; }
.wk-sum {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  cursor: pointer; list-style: none; padding: .45rem .1rem; min-height: 40px;
}
.wk-sum::-webkit-details-marker { display: none; }
.wk-sum::before {
  content: "\25B8"; color: var(--muted); font-size: .9rem;
  transition: transform .15s ease; flex: 0 0 auto;
}
.wk-folder[open] .wk-sum::before { transform: rotate(90deg); }
.wk-date { font-weight: 700; font-variant-numeric: tabular-nums; }
.wk-head { margin: .2rem 0 .5rem; font-weight: 600; }
.wk-folder:target { border-color: var(--accent); }
.wk-del { display: flex; justify-content: flex-end; margin-top: .5rem; }

/* Energy-out bars (calories tile panel) */
.b-bmr { fill: #3b5f7a; }
.b-act { fill: var(--accent); }
.b-tot { fill: var(--text); font-size: 10px; font-weight: 700; }
.b-day { fill: var(--muted); font-size: 9px; }
.legend { display: flex; gap: 1rem; flex-wrap: wrap; margin: .5rem 0 0; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  margin-right: .35rem; vertical-align: -1px; }
.legend .sw-bmr { background: #3b5f7a; }
.legend .sw-act { background: var(--accent); }

/* "Photograph your plate" — the headline Pro feature, so it looks like one
   rather than another ghost button in a row of them. */
/* Matches .btn-ask (the KLAUSK button): outlined rather than filled, so the
   two headline actions on the dashboard read as the same kind of thing. The
   solid green fill was competing with KLAUSK for the eye and winning on the
   strength of its background, not its importance. */
.plate-btn {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  width: 100%; margin: 0 0 .55rem; padding: .5rem .9rem; cursor: pointer;
  text-align: center; text-decoration: none;
  background: transparent; color: var(--accent);
  border: 2px solid var(--accent); border-radius: .5rem;
  font-size: .95rem; font-weight: 700; letter-spacing: .04em;
}
.plate-btn:hover, .plate-btn:focus-visible {
  background: rgba(61,220,132,.12); text-decoration: none;
}
.plate-btn.locked {
  background: transparent; border: 1px dashed var(--border); color: var(--muted);
  font-weight: 600;
}
.plate-btn.locked:hover { background: rgba(255,255,255,.03); text-decoration: none; }
.plate-shot { margin: 0; }
/* Second way in: a photo already on the phone. Deliberately quieter than the
   camera button, which stays the main action. */
.gallery-link {
  display: block; text-align: center; margin: -.2rem 0 .55rem; padding: .25rem;
  font-size: .85rem; color: var(--accent); cursor: pointer;
}
.gallery-link:hover { text-decoration: underline; }
.calib-note { color: var(--accent); margin: -.2rem 0 .6rem; line-height: 1.5; }
.td-food { white-space: nowrap; }
.ed-food { min-width: 8rem; }
.units { color: var(--accent); font-weight: 700; margin-right: .3rem; }
.est-mark { margin-left: .25rem; }

/* Meal rows on a phone. Seven columns of inputs is 648px of table inside a
   282px card — every macro past kcal was off the edge, on the very screen the
   photo estimator asks people to correct. Below 560px each food becomes a
   block: name on its own line, the numbers wrapping under it with their
   column letter as a label. */
@media (max-width: 560px) {
  .meal-table, .meal-table tbody, .meal-table tr, .meal-table td { display: block; }
  .meal-table tr.hdr { display: none; }
  .meal-table tr {
    border: 1px solid var(--border); border-radius: 10px;
    padding: .55rem .6rem; margin-bottom: .55rem; background: var(--bg2);
  }
  .meal-table td { border: 0; padding: .15rem 0; }
  .meal-table td.td-food { display: flex; align-items: center; gap: .3rem; }
  .meal-table td.td-food .ed-food { flex: 1; min-width: 0; }
  .meal-table td.num {
    display: inline-flex; align-items: center; gap: .3rem;
    margin: .25rem .5rem .1rem 0;
  }
  .meal-table td.num::before {
    content: attr(data-label); color: var(--muted); font-size: .72rem;
  }
  .meal-table td.num .ed-in { width: 3.6rem; }
  .meal-table td.td-act { display: flex; justify-content: flex-end; gap: .4rem; margin-top: .2rem; }
  /* stacked rows never overflow, so the scroll hint must not appear */
  .meal-table { min-width: 0; }
}
.fresh-card { border-color: var(--accent-dim); background: linear-gradient(180deg, rgba(61,220,132,.05), transparent 60%); }

/* Predictive food list (FC food picker — replaces the native datalist popup) */
.fp-list {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
  margin: 2px 0 0; padding: 0; list-style: none; max-height: 15rem;
  overflow-y: auto; background: var(--bg2); border: 1px solid var(--accent-dim);
  border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.55);
  /* scrolling the list must not drag the page behind it */
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.fp-item {
  padding: .7rem .7rem; cursor: pointer; font-size: .92rem; min-height: 44px;
  display: flex; align-items: center;
  border-bottom: 1px solid var(--border); color: var(--text);
}
/* a pressed item should look pressed, so a slow tap does not feel ignored */
.fp-item:active { background: rgba(61,220,132,.22); }
.fp-item:last-child { border-bottom: 0; }
.fp-item.on, .fp-item:hover { background: rgba(61,220,132,.14); color: var(--accent); }

/* "plačiau" / "details" — was 400-weight muted grey inside a heading, which
   reads as punctuation rather than a link. Green, and a thumb-sized target. */
.more-link {
  color: var(--accent); font-weight: 600; font-size: .82rem;
  white-space: nowrap; padding: .35rem .5rem; margin-left: .2rem;
  border: 1px solid var(--accent-dim); border-radius: 999px;
  display: inline-block; vertical-align: middle; line-height: 1.2;
}
.more-link:hover, .more-link:focus-visible {
  background: rgba(61,220,132,.12); text-decoration: none;
}

/* Section chooser (Profile → What you want to see) */
.sec-list { list-style: none; margin: .6rem 0 0; padding: 0; }
.sec-list li { border-bottom: 1px solid var(--border); }
.sec-list li:last-child { border-bottom: 0; }
.sec-row {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .7rem .1rem; cursor: pointer; min-height: 44px;
}
.sec-row input { width: 20px; height: 20px; margin-top: .15rem; flex: 0 0 auto; accent-color: var(--accent); }
.sec-text { display: flex; flex-direction: column; min-width: 0; }
.sec-text b { font-weight: 600; }
.sec-text i { font-style: normal; color: var(--muted); font-size: .84rem; line-height: 1.45; }

/* Verdict chips on the admin traffic page */
.chip-ok, .chip-watch, .chip-crit {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: .15rem .45rem; border-radius: 4px; white-space: nowrap;
}
.chip-ok    { background: rgba(61,220,132,.15); color: var(--accent); }
.chip-watch { background: rgba(255,180,84,.15); color: var(--warn); }
.chip-crit  { background: rgba(255,107,107,.15); color: var(--danger); }

/* Admin headings: title on the left, actions on the right, wrapping underneath
   when they no longer fit. These used to be float:right, which is out of normal
   flow — on a phone the button row hung off both edges and squeezed the stats
   grid below it to zero width. */
.hd-actions {
  display: inline-flex; flex-wrap: wrap; gap: 8px;
  margin-left: auto; font-size: .85rem; font-weight: 500;
}
@media (max-width: 700px) {
  .hd-row .hd-actions { margin-left: 0; flex-basis: 100%; }
}
/* Section-verdict table on a phone: the numbers are narrow, the label is not,
   so give the label the slack and keep the verdict chip on screen. */
@media (max-width: 560px) {
  .sec-verdicts table { min-width: 0; font-size: .84rem; }
  .sec-verdicts th, .sec-verdicts td { padding: .5rem .25rem .5rem 0; }
  .sec-verdicts th:first-child, .sec-verdicts td:first-child { width: 38%; }
  .chip-ok, .chip-watch, .chip-crit { font-size: .62rem; padding: .12rem .3rem; }
}

/* The session that is due must be findable at a glance on a phone: a green
   bar down its side, and a badge big enough to read (the shared chip size
   above shrinks to ~10px on small screens). */
.prog-next { border-left: 3px solid var(--accent); padding-left: .65rem; }
.prog-when { font-size: .8rem; color: var(--muted); margin: 0 0 .3rem; }

/* Split calories tile: energy OUT over energy IN, and the balance (dashboard). */
.energy-tile { justify-content: center; gap: .05rem; position: relative; }
.en-line { font-size: 1.1rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.en-out { color: var(--warn); }
.en-in { color: var(--accent); }
.en-bal {
  font-size: .8rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums;
  border-top: 1px solid var(--border); margin-top: .2rem; padding-top: .2rem; min-width: 72%;
}
.tile-warn {
  display: inline-block; width: 1.25em; height: 1.25em; line-height: 1.25em; border-radius: 50%;
  background: var(--warn); color: #111; font-weight: 800; text-align: center; vertical-align: middle;
}
@media (max-width: 480px) {
  .en-line { font-size: .98rem; }
  .num-tile .weight-num { font-size: 1.1rem; }
}
.num-tile .weight-num { white-space: nowrap; }
/* the breakdown panel opened from that tile. minmax(0, 1fr) and min-width: 0
   let a long label wrap instead of pushing the number past the card edge —
   which is what happened with the phone's larger text setting. */
.en-table { display: grid; grid-template-columns: minmax(0, 1fr); gap: .2rem; margin-bottom: .7rem; }
.en-head, .en-sub { display: flex; justify-content: space-between; align-items: baseline; gap: .7rem; min-width: 0; }
.en-head > span:first-child, .en-sub > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.en-sub > span:last-child { flex-shrink: 0; }
.en-head { font-weight: 600; padding-top: .45rem; color: var(--text); }
/* the total may drop "kcal · deficitas" to a second line rather than overflow */
.en-head b { font-variant-numeric: tabular-nums; text-align: right; }
.en-head.en-out b { color: var(--warn); }
.en-head.en-in b { color: var(--accent); }
.en-head i { font-style: normal; font-weight: 400; font-size: .8rem; color: var(--muted); }
.en-balrow { border-top: 1px solid var(--border); margin-top: .4rem; padding-top: .55rem; }
.en-sub { font-size: .85rem; color: var(--muted); padding-left: 1.7rem; }
.en-sub span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.en-note { font-size: .78rem; color: var(--muted); margin: .1rem 0 0 1.7rem; }
.en-help {
  font-size: .86rem; line-height: 1.45; color: var(--muted);
  background: var(--bg2); border-radius: 8px; padding: .65rem .8rem; margin: 0 0 .9rem;
}
.en-help.warn { color: var(--text); border-left: 3px solid var(--warn); }
.en-help b { color: var(--warn); }

/* Nutrition: confirmation next to the row just saved, and the meal picker on
   the "just recognized" card. */
.saved-chip {
  display: inline-block; margin-left: .45rem; padding: .15rem .55rem; border-radius: 999px;
  background: rgba(61,220,132,.15); color: var(--accent); font-size: .8rem; font-weight: 700;
  white-space: nowrap; vertical-align: middle; animation: saved-in .35s ease-out;
}
@keyframes saved-in { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.fresh-meal { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0 0 .6rem; font-size: .9rem; }
.fresh-meal select { width: auto; min-width: 9rem; padding-top: .35rem; padding-bottom: .35rem; }

/* Scanned product card and the My products list (nutrition page). */
.prod-table { width: 100%; margin: 0 0 .7rem; font-size: .9rem; }
.prod-table th, .prod-table td { padding: .3rem .4rem; text-align: right; }
.prod-table th:first-child, .prod-table td:first-child { text-align: left; color: var(--muted); }
.prod-log { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; }
.prod-log > div { flex: 1 1 7rem; min-width: 0; }
.prod-log label { margin-top: 0; }
.prod-log .btn { flex: 1 1 100%; margin-top: .2rem; }
.prod-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .7rem; }
.prod-actions .inline-form { display: inline-flex; align-items: center; gap: .4rem; }
.my-products > summary { list-style: none; cursor: pointer; }
.my-products > summary::-webkit-details-marker { display: none; }
.my-products > summary h2 { display: inline; margin: 0; }
.my-products ul { margin: .6rem 0 0; padding-left: 1.1rem; }
.my-products li { margin: .35rem 0; }

/* Weekly review button when there is not enough data yet (dashboard). */
.weekly-wait > summary { list-style: none; cursor: pointer; width: 100%; }
.weekly-wait > summary::-webkit-details-marker { display: none; }
.weekly-wait > p { margin: .55rem .2rem 0; line-height: 1.45; }
.prog-when b { color: var(--accent); font-weight: 600; }

/* In-page confirmation dialog (base.html #fc-confirm, app.js). */
.fc-confirm {
  width: min(92vw, 420px); padding: 1.2rem 1.25rem 1rem;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.fc-confirm::backdrop { background: rgba(0,0,0,.6); }
.fc-confirm-msg { margin: 0 0 1.1rem; font-size: 1rem; line-height: 1.45; }
.fc-confirm-btns { display: flex; gap: .6rem; justify-content: flex-end; }
.fc-confirm-btns .btn { min-width: 6.5rem; justify-content: center; }
.chip-ok.next-chip {
  display: table; margin: .3rem 0 0; font-size: .8rem; padding: .25rem .6rem;
  letter-spacing: .02em; border-radius: 999px;
}

/* Two or more buttons that belong together in a card. Equal width from the
   container, never from the label — otherwise a long Lithuanian caption makes
   one button twice the size of the one beside it. */
.btn-stack { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.btn-stack > .btn { flex: 1 1 auto; min-width: 11rem; margin-top: 0; justify-content: center; }
@media (max-width: 560px) {
  .btn-stack { flex-direction: column; }
  .btn-stack > .btn { width: 100%; min-width: 0; }
}
/* The plate button spans the card, so its partner matches rather than sitting
   at whatever width its own caption happens to be. Not an adjacent-sibling
   rule: a hidden form sits between the two in the markup. */
.log-food { display: flex; justify-content: center; width: 100%; margin-top: .5rem; }

/* Nutrition card with the camera at the top: the button already carries its
   own outline, so the card just needs the spacing tightened around it. */
.card .plate-shot:first-child { margin: 0; }
/* The heading that now follows reads as a section label, not a page title.
   General sibling, not adjacent: the hidden barcode form sits between them. */
.card .plate-shot:first-child ~ .card-h,
.card > .plate-btn.locked:first-child ~ .card-h {
  margin: 0 0 .35rem;
  padding-top: .55rem;
  border-top: 1px solid var(--border);
}

/* Nutrition card: less air between the figures so the whole card fits a phone
   screen without scrolling past it. */
.card .plate-shot:first-child ~ p { margin: .2rem 0 .35rem; }
.card .plate-shot:first-child ~ .bar { margin: .2rem 0 .35rem; }
.card .plate-shot:first-child ~ .log-food { margin-top: .45rem; }

/* Email-confirmation banner. One element, three tones — the colour is the
   escalation, so a member who has stopped reading the words still sees the
   state change. */
.verify-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem .8rem; padding: .55rem 1rem; text-align: center; font-size: .9rem;
  border-bottom: 1px solid;
}
.verify-bar form { margin: 0; }
.verify-bar .btn { margin-top: 0; }
.verify-bar.nudge { background: #2b2416; border-color: #4a3d1f; color: #e8d9a8; }
.verify-bar.press { background: #33240f; border-color: #7a5417; color: #f3c266; }
.verify-bar.hold  { background: #34191b; border-color: #7c2f33; color: #f0a99f; }

/* Header bell: unread coach reminders. Rendered only when there are some. */
.nav-bell { position: relative; font-size: 1.35rem; line-height: 1; padding: .2rem .3rem; text-decoration: none; }
.nav-bell:hover { text-decoration: none; }
.bell-count {
  position: absolute; top: -.3rem; right: -.45rem; min-width: 1.2rem; height: 1.2rem;
  padding: 0 .25rem; border-radius: 999px; background: var(--danger); color: #fff;
  font-size: .72rem; font-weight: 800; line-height: 1.2rem; text-align: center;
}
/* The reminders page */
.notice-list { display: grid; gap: .6rem; }
.notice { display: block; color: var(--text); text-decoration: none; }
.notice:hover { text-decoration: none; border-color: var(--accent-dim); }
.notice p { margin: .3rem 0 .4rem; color: var(--muted); }
.notice.unread { border-left: 3px solid var(--danger); }

/* Phone header on ONE line: name, logo, bell, menu. With the phone's larger
   text setting and the bell added, the flex row wrapped and pushed the menu
   button onto a second line. The row no longer wraps; the opened menu drops
   down as a panel under the bar instead of relying on the wrap. */
@media (max-width: 760px) {
  .nav { flex-wrap: nowrap; gap: .4rem; padding: .6rem .75rem; }
  .brand { white-space: nowrap; font-size: 1.1rem; flex-shrink: 0; }
  /* the logo is the one piece that may give up width on a very large text size */
  .brand-mark-link { min-width: 1.4rem; flex: 0 1 auto; }
  .brand-mark { height: auto; max-height: 2.2rem; max-width: 100%; }
  .nav-bell { margin-right: 0; flex-shrink: 0; }
  .nav-toggle { flex-shrink: 0; padding: .2rem .35rem; }
  body.nav-open .nav-links {
    flex-wrap: nowrap;               /* one scrolling column, not two cropped ones */
    position: absolute; top: 100%; left: 0; right: 0;
    padding: .6rem 1.2rem .8rem; background: var(--bg2);
    border-bottom: 1px solid var(--border); box-shadow: 0 10px 24px rgba(0,0,0,.35);
  }
}

/* My plates page */
.plate-list { display: grid; gap: .6rem; margin: 0 0 1rem; }
.plate-item { display: flex; align-items: center; gap: .8rem; padding: .7rem .8rem; }
.plate-item img { width: 84px; height: 84px; object-fit: cover; border-radius: 50%; flex-shrink: 0; background: var(--bg2); }
.plate-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.plate-item form { flex-shrink: 0; }
.plate-form .row > div { min-width: 7.5rem; }
.plate-svg { width: 100%; max-width: 320px; display: block; margin: 0 auto .6rem; color: var(--text); }
.svg-arrow { stroke: currentColor; stroke-width: 2.5; }
.svg-lbl { fill: #111; font-size: 17px; font-weight: 800; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.svg-small { fill: currentColor; font-size: 13px; }
.svg-phone { fill: none; stroke: currentColor; stroke-width: 2; }
.guide-list { margin: .3rem 0 .8rem; padding-left: 1.2rem; line-height: 1.5; }
.guide-list li { margin: .3rem 0; }
.plate-guide ul.guide-list { list-style: none; padding-left: 0; }
.plate-save { width: 100%; margin-top: .6rem; }
.photo-status { color: var(--accent); margin: .35rem 0 0; }

/* Admin: delete-account control, folded away under each member row */
.del-user { margin-top: .35rem; }
.del-user > summary { cursor: pointer; list-style: none; color: var(--danger); font-size: .8rem; }
.del-user > summary::-webkit-details-marker { display: none; }
.del-user form { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.del-user input { min-width: 12rem; flex: 1; padding: .3rem .45rem; font-size: .82rem; }