/* FitTech-AI - styles.css
   Brand: Kinetic Pulse. Navy ground, orange used sparingly like a heartbeat,
   monospace utility face for a data-driven signal. */

:root {
  --navy: #0F2942;
  --navy-900: #0a1d2f;
  --navy-700: #17395a;
  --orange: #FF6B35;
  --orange-600: #e85c28;
  --white: #FFFFFF;
  --ice: #F0F4F8;
  --charcoal: #111827;
  --slate: #6B7280;
  --line: #dbe3ec;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --maxw: 1120px;
  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 20px;
  --shadow: 0 10px 30px rgba(15, 41, 66, 0.10);
  --shadow-lg: 0 24px 60px rgba(15, 41, 66, 0.18);
  --ok: #16a34a; --ok-bg: #dcfce7;
  --bad: #b42318; --bad-bg: #fdecec;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--charcoal);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---- shared primitives ---- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
}
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 15px/1 var(--font-sans);
  padding: 14px 22px; border-radius: 999px;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--orange); color: var(--white); }
.btn-primary:hover { background: var(--orange-600); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.35); }
.btn-ghost:hover { border-color: rgba(255,255,255,.7); }
.btn-dark { background: var(--navy); color: var(--white); }
.btn-dark:hover { background: var(--navy-700); transform: translateY(-1px); }
.btn-block { width: 100%; justify-content: center; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* ---- header ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.site-header img { height: 30px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { color: var(--slate); font-size: 15px; font-weight: 500; }
.nav-links a:hover { color: var(--navy); }
.nav-links .btn { padding: 10px 18px; }
@media (max-width: 760px) { .nav-links .nav-text { display: none; } }

/* ---- hero ---- */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(1200px 500px at 70% -10%, var(--navy-700), var(--navy) 55%, var(--navy-900));
  color: var(--white);
}
.hero .wrap { padding-top: 84px; padding-bottom: 0; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center; }
.hero h1 {
  font-size: clamp(38px, 6vw, 62px); line-height: 1.03; letter-spacing: -0.02em;
  font-weight: 800; margin: 18px 0 20px;
}
.hero h1 .pulse-word { color: var(--orange); }
.hero p.lede { font-size: clamp(17px, 2.2vw, 20px); color: #c6d3e0; max-width: 42ch; }
.hero-cta { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.clinic-pill {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 26px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  color: #a7b6c6; border: 1px solid rgba(255,255,255,.16);
  padding: 8px 14px; border-radius: 999px;
}
.clinic-pill b { color: var(--white); font-weight: 600; }
.hero-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius); padding: 22px;
  box-shadow: var(--shadow-lg);
}
.hero-card .eyebrow { color: var(--orange); }
.hero-card .mini-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.09); font-size: 14px; color: #c6d3e0; }
.hero-card .mini-row:last-child { border-bottom: 0; }
.hero-card .mini-row b { color: var(--white); font-weight: 600; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } .hero-card { display: none; } }

/* ---- the signature: EKG pulse line ---- */
.pulse-strip { margin-top: 40px; }
.pulse-strip svg { width: 100%; height: 90px; display: block; }
.pulse-path {
  fill: none; stroke: var(--orange); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 2600; stroke-dashoffset: 2600;
  animation: draw 3.2s ease-out forwards;
}
.pulse-base { fill: none; stroke: rgba(255,255,255,0.14); stroke-width: 2; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---- sections ---- */
section { padding: 84px 0; }
.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head h2 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.02em; line-height: 1.1; margin: 12px 0 12px; color: var(--navy); }
.section-head p { color: var(--slate); font-size: 17px; }
.bg-ice { background: var(--ice); }

/* how it works - a real sequence, so numbered */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.step { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; }
.step .num { font-family: var(--font-mono); font-size: 13px; color: var(--orange); letter-spacing: 0.1em; }
.step h3 { font-size: 18px; color: var(--navy); margin: 14px 0 8px; }
.step p { color: var(--slate); font-size: 14.5px; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* features */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; background: var(--white); position: relative; }
.feature .tick { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,107,53,0.10); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.feature .tick svg { width: 22px; height: 22px; }
.feature h3 { font-size: 18px; color: var(--navy); margin-bottom: 8px; }
.feature p { color: var(--slate); font-size: 14.5px; }
@media (max-width: 900px) { .features { grid-template-columns: 1fr; } }

/* safety band */
.safety { background: var(--navy); color: var(--white); }
.safety .wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: center; }
.safety h2 { font-size: clamp(26px, 3.6vw, 36px); letter-spacing: -0.02em; line-height: 1.12; }
.safety h2 span { color: var(--orange); }
.safety p { color: #c6d3e0; margin-top: 14px; font-size: 16px; }
.safety ul { list-style: none; display: grid; gap: 12px; }
.safety li { display: flex; gap: 12px; align-items: flex-start; color: #dbe6f0; font-size: 15px; }
.safety li b { color: var(--white); }
.safety .dot { flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--orange); margin-top: 8px; }
@media (max-width: 800px) { .safety .wrap { grid-template-columns: 1fr; } }

/* faq */
.faq { max-width: 780px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 0;
  font-size: 17px; font-weight: 600; color: var(--navy);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--orange); font-size: 22px; }
.faq details[open] summary::after { content: "\2013"; }
.faq p { color: var(--slate); padding: 0 0 20px; font-size: 15.5px; }

/* cta band */
.cta-band { background: linear-gradient(120deg, var(--navy), var(--navy-700)); color: var(--white); text-align: center; }
.cta-band h2 { font-size: clamp(28px, 4vw, 42px); letter-spacing: -0.02em; margin-bottom: 14px; }
.cta-band p { color: #c6d3e0; max-width: 52ch; margin: 0 auto 28px; }

/* footer */
.site-footer { background: var(--navy-900); color: #9fb0c1; padding: 44px 0; }
.site-footer .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
.site-footer img { height: 30px; opacity: .95; }
.site-footer .small { font-size: 13px; max-width: 46ch; }

/* =====================================================================
   APP SHELL (app.fittech-ai.com)
   ===================================================================== */
.app-body { background: var(--ice); min-height: 100vh; }
.app-center { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.card {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
  width: 100%; max-width: 400px; padding: 34px 30px; text-align: center;
}
.card img.mark { height: 52px; width: auto; margin: 0 auto 18px; }
.card h1 { font-size: 22px; color: var(--navy); margin-bottom: 8px; }
.card p.sub { color: var(--slate); font-size: 15px; margin-bottom: 22px; }
.field { text-align: left; margin-bottom: 16px; }
.field label { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin-bottom: 8px; }
.field input {
  width: 100%; font-size: 16px; padding: 13px 14px;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--white); color: var(--charcoal);
}
.field input:focus { outline: none; border-color: var(--navy); }
.msg { font-size: 14px; margin-top: 6px; min-height: 20px; }
.msg.err { color: #b42318; }
.msg.ok { color: #067647; }
.g-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; font: 600 15px/1 var(--font-sans);
  padding: 14px 18px; border-radius: var(--radius-sm);
  background: var(--navy); color: var(--white); border: 0; cursor: pointer;
}
.g-btn:hover { background: var(--navy-700); }
.g-btn .g { background: #fff; border-radius: 3px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #4285F4; }
.link-muted { background: none; border: 0; color: var(--slate); font-size: 13px; cursor: pointer; margin-top: 18px; text-decoration: underline; }
.spinner { width: 34px; height: 34px; border: 3px solid var(--line); border-top-color: var(--orange); border-radius: 50%; animation: spin .8s linear infinite; margin: 10px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .pulse-path { stroke-dashoffset: 0; }
}

/* =====================================================================
   APP FRAME (14b): responsive nav + pages
   ===================================================================== */
#app.frame { display: block; min-height: 100vh; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,0.92); backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
  height: 60px; display: flex; align-items: center; gap: 14px; padding: 0 18px;
}
.topbar-logo { height: 26px; width: auto; }
.topnav { display: flex; gap: 4px; }
.topnav a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  color: var(--slate); font-weight: 600; font-size: 14px;
}
.topnav a svg { width: 18px; height: 18px; }
.topnav a:hover { color: var(--navy); }
.topnav a.active { color: var(--navy); background: var(--ice); }
.topbar-spacer { flex: 1; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--navy); color: #fff; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.avatar:hover { background: var(--navy-700); }

.content { max-width: 760px; margin: 0 auto; padding: 26px 20px 100px; }

.bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  height: calc(62px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #fff; border-top: 1px solid var(--line); display: flex;
}
.bottomnav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: var(--slate); font-size: 11px; font-weight: 600;
}
.bottomnav a svg { width: 22px; height: 22px; }
.bottomnav a.active { color: var(--orange); }

@media (min-width: 760px) { .bottomnav { display: none; } .content { padding-bottom: 40px; } }
@media (max-width: 759px) { .topnav { display: none; } }

/* page building blocks */
.page-title { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; color: var(--navy); }
.page-sub { color: var(--slate); margin: 4px 0 20px; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 16px; }
.panel-title { font-size: 17px; font-weight: 700; color: var(--navy); margin: 0 0 12px; }
.empty { text-align: center; padding: 34px 12px; }
.empty .ei { width: 56px; height: 56px; border-radius: 14px; background: rgba(255,107,53,0.10); color: var(--orange); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.empty .ei svg { width: 26px; height: 26px; }
.empty h3 { color: var(--navy); font-size: 19px; margin-bottom: 8px; }
.empty p { color: var(--slate); max-width: 42ch; margin: 0 auto 20px; }

.row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row .rl { display: flex; flex-direction: column; }
.row .rl b { color: var(--navy); font-weight: 600; }
.row .rl span { color: var(--slate); font-size: 13px; }
.rowlink { cursor: pointer; }
.rowlink:hover .rl b { color: var(--orange); }
.chev { color: var(--slate); font-size: 20px; }
.badge-soon { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--slate); border: 1px solid var(--line); padding: 4px 9px; border-radius: 999px; white-space: nowrap; }

.seg { display: inline-flex; background: var(--ice); border-radius: 999px; padding: 4px; }
.seg button { border: 0; background: none; padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--slate); cursor: pointer; }
.seg button.on { background: #fff; color: var(--navy); box-shadow: var(--shadow); }
.mctl { display: flex; align-items: center; gap: 8px; }
.minput { width: 90px; }
.segsm button { padding: 6px 10px; font-size: 13px; }
#saveMeasures { margin: 8px auto 0; display: block; }
.ci-grid { display: flex; flex-direction: column; gap: 12px; }
.ci-q { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ci-q > b { font-size: 14px; }
.ci-range { display: flex; align-items: center; gap: 10px; }
.ci-range input[type="range"] { width: 150px; accent-color: var(--orange); }
.ci-range b { min-width: 20px; text-align: center; font-family: var(--font-mono); }
.ci-warn { background: #fff4ec; border: 1px solid var(--orange); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 14px; }
#ciSave { margin: 4px auto 0; display: block; }

.content .btn-dark { max-width: 220px; }

.toast { position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%); background: var(--navy); color: #fff; padding: 11px 20px; border-radius: 999px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 60; }
.toast.show { opacity: 1; }
@media (min-width: 760px) { .toast { bottom: 26px; } }

/* =====================================================================
   ONBOARDING WIZARD (14c)
   ===================================================================== */
.ob-head { margin-bottom: 16px; }
.ob-progress { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 12px; }
.ob-progress span { display: block; height: 100%; background: var(--orange); transition: width .25s ease; }
.ob-step-meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--slate); text-transform: uppercase; margin-bottom: 8px; }
.ob-panel { display: flex; flex-direction: column; gap: 18px; }
.ob-field { display: flex; flex-direction: column; gap: 8px; }
.ob-label { font-weight: 600; color: var(--navy); font-size: 15px; }
.ob-label .req { color: var(--orange); }
.ob-input { width: 100%; font-size: 16px; padding: 12px 13px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--charcoal); font-family: var(--font-sans); }
.ob-input:focus { outline: none; border-color: var(--navy); }
.ob-munit { display: flex; align-items: center; gap: 8px; }
.ob-munit .ob-input { flex: 1; min-width: 0; }
.ob-textarea { resize: vertical; min-height: 46px; }
.ob-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-chip { border: 1.5px solid var(--line); background: #fff; color: var(--slate); border-radius: 999px; padding: 9px 15px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .12s ease; }
.ob-chip:hover { border-color: var(--navy); color: var(--navy); }
.ob-chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.ob-nav { display: flex; gap: 12px; margin-top: 18px; }
.ob-nav .btn { flex: 1; justify-content: center; }
.ob-nav .btn-ghost { color: var(--navy); border-color: var(--line); }
.ob-nav .btn-ghost:hover { border-color: var(--navy); }
.ob-nav .btn-ghost:disabled { opacity: .4; cursor: not-allowed; }
.ob-msg { margin-top: 12px; text-align: center; }

/* =====================================================================
   PLAN / SESSION / DRAFT (15)
   ===================================================================== */
.pnl-h { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin-bottom: 10px; }
.muted { color: var(--slate); }
.notelist { list-style: none; display: grid; gap: 8px; }
.notelist li { color: var(--charcoal); font-size: 14.5px; padding-left: 16px; position: relative; }
.notelist li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 999px; background: var(--orange); }

.rf-banner { background: #fff4ec; border: 1px solid #ffd3bd; color: #9a3412; border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 16px; font-size: 14.5px; line-height: 1.5; }
.rf-banner::before { content: "⚠ "; font-weight: 700; }

.today-meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin-bottom: 10px; }

.sess { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 16px; }
.sess-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sess-top h3 { color: var(--navy); font-size: 19px; }
.sess-label { font-family: var(--font-mono); font-size: 12px; color: var(--orange); white-space: nowrap; }
.sess-goal { color: var(--slate); margin: 6px 0 4px; }
.sess-block { margin-top: 16px; }
.sess-block h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--navy); margin-bottom: 8px; }
.sess-block ul { margin: 0; padding-left: 18px; color: var(--charcoal); }
.sess-block ul li { margin: 3px 0; }
.ex { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.ex:last-child { border-bottom: 0; }
.ex-h { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.ex-h b { color: var(--charcoal); }
.ex-h span { color: var(--slate); font-size: 13px; font-family: var(--font-mono); white-space: normal; overflow-wrap: anywhere; }
.ex-safe { color: #9a3412; font-size: 13px; margin-top: 3px; }

.pblocks { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.pblocks .pblock { flex: 0 0 auto; }
.pblock { border: 1.5px solid var(--line); background: #fff; color: var(--slate); border-radius: 999px; padding: 8px 16px; font-weight: 600; font-size: 14px; cursor: pointer; }
.pblock.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.wk-h { font-weight: 800; color: var(--navy); font-size: 16px; margin-bottom: 6px; }
.day-det { border-top: 1px solid var(--line); padding: 6px 0; }
/* Today: collapsible sections and exercise cards */
.sect-det > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; }
.sect-det > summary::-webkit-details-marker { display: none; }
.sect-det > summary h4 { margin-bottom: 0; }
.sect-det > summary::after { content: "+"; font-family: var(--font-mono); color: var(--orange); font-size: 20px; line-height: 1; }
.sect-det[open] > summary::after { content: "\2013"; }
.sect-det[open] > summary { margin-bottom: 8px; }
.ex-det > summary { cursor: pointer; list-style: none; position: relative; padding-right: 26px; }
.ex-det > summary::-webkit-details-marker { display: none; }
.ex-det > summary::after { content: "+"; font-family: var(--font-mono); color: var(--slate); font-size: 18px; line-height: 1; position: absolute; right: 2px; top: 2px; }
.ex-det[open] > summary::after { content: "\2013"; }
.addex { margin-top: 12px; }
#addExForm { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding: 12px; background: var(--ice); border-radius: var(--radius-sm); }
#addExForm[hidden] { display: none; }
#addExGo { align-self: flex-start; }
.logged-det { background: var(--ice); border-radius: var(--radius-sm); padding: 8px 12px; margin: 8px 0; }
.logged-det > summary { cursor: pointer; list-style: none; font-weight: 600; color: var(--navy); font-size: 14px; display: flex; justify-content: space-between; gap: 10px; }
.logged-det > summary::-webkit-details-marker { display: none; }
.logged-det > summary::after { content: "+"; font-family: var(--font-mono); color: var(--orange); }
.logged-det[open] > summary::after { content: "\2013"; }
.li-det { padding: 6px 0; border-top: 1px dashed var(--line); }
.li-det > summary { cursor: pointer; list-style: none; font-size: 14px; }
.li-det > summary::-webkit-details-marker { display: none; }
.li-det > summary span { color: var(--slate); font-family: var(--font-mono); font-size: 12.5px; }
.li-log { font-size: 13.5px; color: var(--charcoal); margin-top: 4px; white-space: pre-wrap; }
.done-mark { color: #16a34a; font-size: 12.5px; font-weight: 700; }
.day-det:first-of-type { border-top: 0; }
.day-det > summary { cursor: pointer; list-style: none; padding: 12px 0; font-weight: 600; color: var(--navy); display: flex; justify-content: space-between; gap: 12px; }
.day-det > summary::-webkit-details-marker { display: none; }
.day-det > summary::after { content: "+"; color: var(--orange); font-family: var(--font-mono); }
.day-det[open] > summary::after { content: "\2013"; }
.day-det .sess { border: 0; padding: 0 0 12px; margin: 0; }

.content .btn-ghost { color: var(--navy); border-color: var(--line); }
.content .btn-ghost:hover { border-color: var(--navy); }
.ob-nav .btn-primary { background: var(--orange); }

/* =====================================================================
   ONBOARDING v2 - body map, scales, notes, region detail
   ===================================================================== */
.ob-note { background: var(--ice); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14px; color: var(--charcoal); line-height: 1.5; }
.ob-note.warn { background: #fff4ec; border-color: #ffd3bd; color: #9a3412; }

.ob-scale { display: flex; align-items: center; gap: 12px; }
.ob-range { flex: 1; accent-color: var(--orange); height: 26px; }
.ob-range-val { font-family: var(--font-mono); font-weight: 700; color: var(--navy); min-width: 20px; text-align: right; }

.ob-bodymap { display: flex; flex-direction: column; align-items: center; }
.bodymap { width: 100%; max-width: 260px; height: auto; touch-action: manipulation; }
.bm-figure { fill: #e6edf4; stroke: #d3dde7; stroke-width: 1; }
.bm-node { cursor: pointer; }
.bm-node circle { fill: #fff; stroke: var(--slate); stroke-width: 1.5; transition: fill .12s, stroke .12s; }
.bm-node text { font-size: 7px; fill: var(--slate); font-family: var(--font-sans); pointer-events: none; }
.bm-node:hover circle { stroke: var(--navy); }
.bm-node.on circle { fill: var(--orange); stroke: var(--orange); }
.bm-node.on text { fill: #fff; }
.bm-hint { font-size: 13px; color: var(--slate); text-align: center; margin-top: 8px; }

.ob-regiondetail { display: flex; flex-direction: column; gap: 14px; }
.rd-block { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; }
.rd-title { font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.rd-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.rd-row > span { font-size: 13px; color: var(--slate); min-width: 64px; }
.rd-row .ob-scale { flex: 1; min-width: 160px; }
.ob-chip.small { padding: 6px 11px; font-size: 13px; }

/* body-map v2 - front/back toggle + labelled chips */
.bm-toggle { display: inline-flex; background: var(--ice); border-radius: 999px; padding: 4px; margin: 0 auto 12px; }
.bm-toggle .bm-view { border: 0; background: none; padding: 8px 20px; border-radius: 999px; font-weight: 600; color: var(--slate); cursor: pointer; font-size: 14px; }
.bm-toggle .bm-view.on { background: #fff; color: var(--navy); box-shadow: var(--shadow); }
.ob-bodymap { display: flex; flex-direction: column; align-items: center; }
.bm-chips { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 6px; }
.bm-chip { border: 1.5px solid var(--line); background: #fff; color: var(--slate); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.bm-chip:hover { border-color: var(--navy); color: var(--navy); }
.bm-chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.bm-selected { margin-top: 14px; font-size: 13px; color: var(--slate); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.bm-selected > span { font-weight: 600; }
.bm-tag { border: 1px solid #ffd3bd; background: #fff4ec; color: #9a3412; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }

/* footer brand wordmark (replaces the filtered PNG that rendered as a grey box on mobile) */
.footer-brand { font-weight: 800; font-size: 20px; letter-spacing: -0.01em; color: #fff; }
.footer-brand .fb-ai { color: var(--orange); }

/* ---- interactive Today: per-exercise logging (update-23) ---- */
.btn-sm{padding:8px 14px;font-size:.86rem}
.ex-log{padding:12px 0}
.ex-done{display:flex;align-items:center;gap:9px;cursor:pointer}
.ex-done input{width:20px;height:20px;accent-color:var(--orange);flex:0 0 auto}
.ex-done b{font-size:1rem}
.donestamp{font-size:.78rem;color:var(--orange-600);margin:4px 0 0 29px}
.ex-expand{margin:8px 0 0 29px;background:none;border:none;color:var(--navy-700);font-weight:600;font-size:.82rem;cursor:pointer;padding:0}
.ex-expand:hover{color:var(--orange)}
.ex-body{margin:10px 0 4px 29px;padding:12px;background:var(--ice);border-radius:12px;display:flex;flex-direction:column;gap:6px}
.ex-body .lbl{font-size:.74rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--slate);margin-top:6px}
.ex-body .lbl:first-child{margin-top:0}
.vidrow{display:flex;gap:8px}
.vidrow input{flex:1 1 auto;min-width:0}
.ex-body input,.ex-body textarea,.wu-body input,.wu-body textarea{padding:9px 11px;border:1px solid var(--line);border-radius:9px;font:inherit;background:#fff;width:100%}
.ex-body textarea,.wu-body textarea{resize:vertical}
.chk{display:flex;align-items:flex-start;gap:8px;font-size:.82rem;color:var(--charcoal);cursor:pointer;line-height:1.35}
.chk input{width:16px;height:16px;accent-color:var(--orange);flex:0 0 auto;margin-top:1px}
.loggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.setwrap{display:flex;flex-direction:column;gap:6px}
.setrows-area{display:flex;flex-direction:column;gap:6px}
.setrow-head{display:grid;grid-template-columns:34px 1fr 32px;gap:8px;font-size:.68rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--slate);padding:0 2px}
.setrow{display:grid;grid-template-columns:34px 1fr 32px;gap:8px;align-items:center}
.setrow-head.wcol,.setrow.wcol{grid-template-columns:34px 1fr 1fr 32px}
.setf{padding:11px;border:1px solid var(--line);border-radius:10px;font:inherit;width:100%;min-width:0;background:var(--field,#fff)}
.setf:focus{outline:none;border-color:var(--orange)}
.setnum{font-family:var(--font-mono);font-size:.82rem;color:var(--slate);text-align:center}
.setdel{background:none;border:none;color:var(--slate);font-size:1.2rem;line-height:1;cursor:pointer;padding:0;border-radius:8px}
.setdel:hover{color:var(--orange)}
.setctl{display:flex;gap:8px;flex-wrap:wrap}
.photorow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px}
.exphotonote{flex:1 1 100%;transition:border-color .15s, box-shadow .15s}
.ex-body .exphotonote.staged{border-color:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.18)}
.photorow .exphotoread{background:#16a34a;color:#fff;border:1px solid #16a34a;font-weight:700}
.photorow .exphotoread:hover{background:#12833f;border-color:#12833f}
.photorow .exphotoread:disabled{opacity:.6}
.exphotomsg{font-size:.78rem}
.wu-list{display:flex;flex-direction:column;gap:2px}
.wu-item{border-bottom:1px solid var(--line);padding:2px 0}
.wu-item:last-child{border-bottom:none}
.wu-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0}
.wu-expand{flex:0 0 auto;width:26px;height:26px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--navy-700);font-size:1rem;line-height:1;cursor:pointer}
.wu-expand:hover{border-color:var(--orange);color:var(--orange)}
.wu-body{margin:4px 0 8px;padding:12px;background:var(--ice);border-radius:12px;display:flex;flex-direction:column;gap:6px}
.finish-row{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.locked-note{background:var(--ice);color:var(--navy);font-weight:600;text-align:center}

/* Ghost buttons on LIGHT surfaces (Settings rows, exercise log panels) need dark
   text + a visible border - the base .btn-ghost is white-on-transparent for the
   dark hero and would be invisible here. (update-23b) */
.row .btn-ghost, .ex-body .btn-ghost, .wu-body .btn-ghost, .photorow .btn-ghost, .vidrow .btn-ghost {
  color: var(--navy); border-color: var(--line); background: #fff;
}
.row .btn-ghost:hover, .ex-body .btn-ghost:hover, .wu-body .btn-ghost:hover,
.photorow .btn-ghost:hover, .vidrow .btn-ghost:hover { border-color: var(--navy); }

/* ---- Plan edit mode: add video links / notes ahead of time (update-24) ---- */
.plan-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.plan-tools-hint{font-size:.8rem}
.lib-edit{margin:8px 0 4px;padding:12px;background:var(--ice);border-radius:12px;display:flex;flex-direction:column;gap:8px}
.lib-edit .exvideo,.lib-edit .exnote{padding:9px 11px;border:1px solid var(--line);border-radius:9px;font:inherit;background:#fff;width:100%}
.lib-edit textarea{resize:vertical}

/* Plan toolbar "Edit videos & notes" toggle sits on a light surface too - make
   the ghost button visible (the base .btn-ghost is white-on-transparent). (update-24b) */
.plan-tools .btn-ghost{color:var(--navy);border-color:var(--line);background:#fff}
.plan-tools .btn-ghost:hover{border-color:var(--navy)}

/* ---- progressive week/block placeholders (update-27) ---- */
.wk-ph .ph-body{margin-top:8px;padding:14px;background:var(--ice);border:1px dashed var(--line);border-radius:12px}
.wk-ph .ph-body p{margin:0}
.ph-badge{display:inline-block;background:var(--navy);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:3px 9px;margin-bottom:8px}

/* ---- swap days (update-28) ---- */
/* update-299 - a Read photos button with something staged goes green: the next
   step should look available, not merely be enabled. Green is the app's "this
   is complete/ready" colour, the same as the section pip. */
.btn.is-ready{background:#34c77b;border-color:transparent;color:#08231a;font-weight:650}
.btn.is-ready:hover{filter:brightness(1.05)}
.app-body .btn.is-ready{background:#34c77b;color:#06231a;border-color:transparent;
  box-shadow:0 8px 20px -12px rgba(52,199,123,.6)}

/* The line under an exercise name, once it describes what was actually logged
   rather than what was planned. Same monospace, brought forward a little. */
.ex-presc.is-actual{color:var(--charcoal);opacity:.95}
.app-body .ex-presc.is-actual{color:var(--text,#E9EFF6)}

/* update-298 - "Exercise done": the one loud action on an exercise card.
   [hidden] needs !important because .btn sets display:inline-flex, which beats
   the UA [hidden]{display:none} rule. This is UI invariant 1 and it has caught
   us four times. */
.exdonebtn{background:var(--orange,#FF6B35);color:#fff;border-color:transparent;font-weight:650}
.exdonebtn:hover{filter:brightness(1.05)}
.exdonebtn[hidden]{display:none !important}
.app-body .exdonebtn{background:var(--orange,#FF6B35);color:#fff;border-color:transparent;
  box-shadow:0 8px 20px -12px rgba(255,107,53,.6)}

/* update-295 - paste-in split: preview cards and the RIR box. */
.ps-dh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.ps-list{margin:10px 0 0;padding-left:18px;font-size:.88rem;line-height:1.7}
.ps-list li{margin:0}
.ps-list .muted{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem}
#psText{min-height:220px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;line-height:1.55}

/* update-294 - the summary tiles are now filter buttons, plus the usage panel. */
/* update-303, defensive: every one of these is a <button> carrying `font:
   inherit` but no colour, so each relies on its children being coloured
   explicitly. They render correctly today; this stops the next uncoloured child
   turning black on the dark theme, which is exactly how the admin tiles broke.
   Colour only, no other change, so nothing visible moves. */
.hub-card,.qa-tile,.cal-sum-link,.cal-dv-row,.prog-val{color:inherit}

/* update-305: Edit beside the remove x on a logged meal. Quiet by default so
   the row still reads name-first; it is a correction, not a primary action. */
.foodmeal-top{display:flex;align-items:center;gap:8px}
.foodmeal-top .foodmeal-name{flex:1 1 auto;min-width:0}
.foodmeal-edit{flex:0 0 auto;font:inherit;font-size:.78rem;color:#9DB2C8;
  background:transparent;border:1px solid rgba(255,255,255,.14);border-radius:999px;
  padding:3px 10px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.foodmeal-edit:hover{color:#FFFFFF;border-color:rgba(255,255,255,.3)}
.foodmeal-edit:active{transform:scale(.96)}

/* update-303: the tiles became <button> in u294, and a button takes its colour
   from the UA stylesheet (canvastext = near-black), not from the page. `font:
   inherit` carries the font but NOT the colour, so the numbers went dark on a
   dark background. Same shape as the coach input in u293: when an element
   becomes a form control, it stops inheriting and starts obeying the UA. */
/* update-304: the app is dark-only, so the admin tiles are stated in absolute
   colours rather than routed through --charcoal. That variable is redefined
   three times in this file (#111827, #1d1d1f, then #E9EFF6 under .app-body) and
   whichever one wins depends on cascade order, which is how the numbers ended
   up near-black on navy twice. There is no light theme to preserve here. */
.adm-tile{width:100%;font:inherit;color:#E9EFF6;cursor:pointer;text-align:center;background:transparent}
.adm-tile b,.app-body .adm-tile b{color:#FFFFFF}
.adm-tile span,.app-body .adm-tile span{color:#9DB2C8}
.adm-tile.on{border-color:var(--navy);background:rgba(15,41,66,.05)}
.app-body .adm-tile.on{border-color:var(--brand,#FF6B35);background:rgba(255,107,53,.1)}
.adm-tile:active{transform:scale(.98)}
.adm-cost{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.adm-cost label{display:flex;flex-direction:column;gap:5px;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.06em;color:var(--slate)}
.adm-cost input{font:inherit;font-size:16px;text-transform:none;letter-spacing:normal;
  padding:9px 10px;border:1px solid var(--line);border-radius:10px}
.adm-cost .muted{font-size:.82rem}

/* update-293 - the coach input was the one form control still rendering white
   in the dark app. `.coach-inrow .coach-input` is TWO classes, so it out-
   specifies the general `.app-body input` rule (one class + one element) no
   matter where it sits in the file, and the light background won. This is the
   standing invariant in reverse: it is not enough for the dark override to
   target a class, it has to out-specify the light rule it is overriding.
   Every other form control in the app is single-class and therefore fine.
   The layout is also rebuilt: the input gets a full-width row of its own, so
   a typed question is not squeezed into 160px beside the Photo button. */
.coach-inrow{display:grid;grid-template-columns:1fr auto;gap:8px}
.coach-inrow .coach-input{grid-column:1/-1;flex:none;padding:10px 12px}
.coach-inrow .coach-photobtn{grid-column:1;justify-self:start}
.coach-inrow .coach-send{grid-column:2;justify-self:end;min-width:96px}
.app-body .coach-inrow .coach-input{background:var(--field);color:var(--charcoal);
  border-color:var(--line)}
.app-body .coach-inrow .coach-input::placeholder{color:var(--slate);opacity:1}
.app-body .coach-inrow .coach-input:focus{border-color:var(--orange);outline:none}

/* update-292 - funnel, feature reach and churn bars on the admin page. */
.adm-fun{display:grid;grid-template-columns:1fr 90px 62px;align-items:center;gap:8px;margin:6px 0;font-size:.84rem}
.adm-fun-l{color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-fun-bar{height:8px;border-radius:999px;background:rgba(128,128,128,.18);overflow:hidden}
.adm-fun-bar span{display:block;height:100%;border-radius:999px;background:var(--brand,#FF6B35)}
.adm-fun-n{text-align:right;font-variant-numeric:tabular-nums}
.adm-fun-n em{font-style:normal;color:var(--slate);font-size:.78rem}
.adm-pills{display:flex;flex-wrap:wrap;gap:6px}
.adm-pill{font-size:.78rem;padding:4px 10px;border:1px solid var(--line);border-radius:999px;color:var(--slate)}
.adm-pill b{color:var(--charcoal)}
.app-body .adm-pill b{color:var(--text)}
@media(max-width:380px){.adm-fun{grid-template-columns:1fr 60px 54px}}

/* update-291 - founder-only admin roster. Internal tool, kept plain. */
.adm-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.adm-tile{border:1px solid var(--line);border-radius:10px;padding:10px 8px;text-align:center}
.adm-tile b{display:block;font-size:1.6rem;font-weight:700;line-height:1.15;letter-spacing:-.01em}
.adm-tile span{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em}
.adm-row{border-top:1px solid var(--line);padding:12px 0;display:flex;flex-direction:column;gap:6px}
.adm-row:first-child{border-top:0;padding-top:0}
.adm-who b{display:block}
.adm-who span{font-size:.82rem;color:var(--slate);word-break:break-all}
.adm-nums{display:flex;gap:14px;font-size:.85rem;color:var(--slate)}
.adm-nums b{color:var(--charcoal)}
.adm-when{display:flex;flex-direction:column;font-size:.8rem;color:var(--slate)}
.adm-tags{display:flex;flex-wrap:wrap;gap:6px}
.adm-tags span{font-size:.7rem;padding:2px 8px;border:1px solid var(--line);border-radius:999px;color:var(--slate)}
.adm-row.adm-warm .adm-who b{border-left:3px solid #34c77b;padding-left:8px;margin-left:-11px}
.adm-row.adm-mid .adm-who b{border-left:3px solid #f5a524;padding-left:8px;margin-left:-11px}
.adm-row.adm-cold .adm-who b{border-left:3px solid rgba(128,128,128,.5);padding-left:8px;margin-left:-11px}
.app-body .adm-nums b{color:var(--text)}
@media(max-width:420px){.adm-tiles{grid-template-columns:repeat(2,1fr)}}

/* update-290 - per-block progression mode chooser. */
.prog-mode{border:1px solid var(--line);border-radius:12px;padding:12px;margin:0 0 14px}
.pm-h{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);margin-bottom:8px}
.pm-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pm-opt{font:inherit;font-size:14px;padding:10px 8px;border:1px solid var(--line);border-radius:10px;
  background:transparent;color:var(--charcoal);cursor:pointer}
.pm-opt.on{border-color:var(--navy);font-weight:650}
.pm-opt:disabled{opacity:.5}
.pm-p{margin:9px 0 0;font-size:.85rem}
.app-body .prog-mode{border-color:var(--line)}
.app-body .pm-opt{color:var(--slate)}
.app-body .pm-opt.on{border-color:var(--brand);color:var(--text);background:rgba(255,107,53,.1)}

/* update-291 - the red-flag acknowledgement sits with the apply action. */
.rf-ack .chk{margin:0;align-items:flex-start;gap:10px;line-height:1.45}

/* update-289 - guided build: the who-writes choice and the per-day shaping. */
.mb-how{cursor:pointer}
.mb-how .pnl-h{margin-bottom:6px}
.mb-how p{margin:0}
.app-body .mb-how:hover{border-color:rgba(255,107,53,.45)}
.app-body .mb-how:active{transform:scale(.99)}
.mb-g-row{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:10px}
@media(min-width:420px){.mb-g-row{grid-template-columns:1fr 1fr}}
.mb-g-l{display:flex;flex-direction:column;gap:5px;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--slate)}
.mb-g-l select,.mb-g-l textarea{font:inherit;font-size:16px;text-transform:none;letter-spacing:normal;
  padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--charcoal)}
.mb-g-l textarea{resize:vertical;line-height:1.5}
.app-body .mb-g-l select,.app-body .mb-g-l textarea{background:var(--surface);color:var(--text);border-color:var(--line)}

/* update-288 - the build-your-own panel sat flush against .ob-nav: that class
   sets margin-top only, and .app-body .panel sets margin-bottom only, so
   nothing separated the buttons from a panel following them. The orange CTA
   carries a 26px glow (box-shadow 0 10px 26px -12px), which then spilled
   across the panel's top border and read as the panel overlapping the buttons.
   Clear the glow and match the page's vertical rhythm. */
.mb-entry{margin-top:26px}

/* update-286 - manual plan builder: the day + location picker. */
.mb-days{display:flex;flex-direction:column;gap:8px}
.mb-day{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.mb-day.on{border-color:var(--navy)}
.mb-day .chk{margin:0}
.mb-day select{font:inherit;font-size:16px;padding:7px 9px;border:1px solid var(--line);
  border-radius:9px;background:#fff;color:var(--charcoal);min-width:110px}
.mb-day select:disabled{opacity:.45}
.app-body .mb-day.on{border-color:var(--brand)}
.app-body .mb-day select{background:var(--surface);color:var(--text);border-color:var(--line)}

/* update-285 - "Edit this week". Mobile-first: one column, inputs at 16px so
   iOS does not zoom on focus. Dark-theme overrides target classes, never
   element-qualified selectors. */
.wed{display:flex;flex-direction:column;gap:14px}
.wed-note{margin:0}
.wed-day{border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.wed-dh{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wed-dh b{font-size:1rem}
.wed-lbl{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);margin-top:4px}
.wed input[type="text"],.wed textarea,.wed select{width:100%;font:inherit;font-size:16px;
  padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--charcoal)}
.wed select.wed-loc{width:auto;min-width:110px}
.wed textarea{resize:vertical;line-height:1.5}
.wed-list{display:flex;flex-direction:column;gap:10px}
.wed-row{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--line);
  border-radius:10px;background:var(--ice)}
.wed-nums{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.wed-rowtools{display:flex;gap:6px;justify-content:flex-end}
.wed-rowtools .btn{min-width:40px;padding:5px 9px}
.wed-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
@media(min-width:520px){.wed-nums{grid-template-columns:repeat(5,1fr)}}   /* update-295: +RIR */
.app-body .wed-day,.app-body .wed-row{border-color:var(--line)}
.app-body .wed-row{background:var(--surface-2)}
.app-body .wed input[type="text"],.app-body .wed textarea,.app-body .wed select{
  background:var(--surface);color:var(--text);border-color:var(--line)}
.swap-form{margin:8px 0 12px;padding:12px;background:var(--ice);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;gap:10px}
.swap-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.9rem;color:var(--charcoal)}
.swap-row select{padding:8px 10px;border:1px solid var(--line);border-radius:9px;font:inherit;background:#fff;max-width:100%}
.swap-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.swap-actions .btn-ghost{color:var(--navy);border-color:var(--line);background:#fff}
.swap-actions .btn-ghost:hover{border-color:var(--navy)}

/* AI Exercise Coach panel (Today exercise cards) */
.coachwrap{margin:8px 0}
.coachwrap .excoachbtn{color:var(--navy);border-color:var(--line);background:#fff}
.coachwrap .excoachbtn:hover{border-color:var(--navy)}
.coach-panel{margin-top:8px;padding:10px;border:1px solid var(--line);border-radius:11px;background:var(--ice)}
.coach-thread{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow-y:auto;margin-bottom:8px}
.coach-thread:empty{display:none}
.coach-turn{max-width:88%;padding:7px 10px;border-radius:12px;font-size:.9rem;line-height:1.35;white-space:normal;word-wrap:break-word}
.coach-turn.coach-u{align-self:flex-end;background:var(--navy);color:var(--white);border-bottom-right-radius:4px}
.coach-turn.coach-a{align-self:flex-start;background:#fff;color:var(--charcoal);border:1px solid var(--line);border-bottom-left-radius:4px}
.coach-turn.coach-pending{color:var(--slate);font-style:italic}
.coach-inrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.coach-inrow .coach-input{flex:1 1 160px;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:9px;font:inherit;background:#fff}
.coach-inrow .coach-photobtn{color:var(--navy);border-color:var(--line);background:#fff}
.coach-inrow .coach-photobtn:hover{border-color:var(--navy)}
.coach-inrow .coach-send{background:var(--orange);color:var(--white)}
.coach-inrow .coach-send:hover{background:var(--orange-600)}
.coach-inrow .coach-send:disabled{opacity:.6;cursor:default}
.coach-foot{margin-top:7px;font-size:.72rem;line-height:1.3}
.coach-msg{margin-top:5px;font-size:.8rem;min-height:1em}

/* Weekly & block check-in panels (collapsible, on Today) */
.ci-periodic{padding:0}
.ci-periodic>summary{list-style:none;cursor:pointer;padding:14px 16px;display:flex;align-items:center}
.ci-periodic>summary::-webkit-details-marker{display:none}
.ci-periodic>summary .panel-title{margin:0;display:flex;align-items:center;gap:8px;width:100%}
.ci-periodic>summary .ci-when{margin-left:auto;font-size:.8rem;font-weight:600;color:var(--slate)}
.ci-periodic>summary::after{content:"+";margin-left:10px;color:var(--slate);font-weight:700}
.ci-periodic[open]>summary::after{content:"–"}
.ci-periodic .ci-grid,.ci-periodic .row{padding:0 16px 16px}
.ci-hint{margin:0 0 6px;font-size:.82rem;color:var(--slate)}
.ci-meas-wrap{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.ci-meas{display:flex;align-items:center;gap:8px}
.ci-mnum{max-width:110px}
.ci-useg{flex:0 0 auto}

/* Added-exercise remove button + Finish confirm (Today) */
.exremove{color:#b42318;border-color:#f0c8c2;background:#fff;margin:8px 0}
.exremove:hover{border-color:#b42318}
.finish-confirm{display:flex;flex-direction:column;gap:8px}
.finish-q{font-weight:600;color:var(--charcoal)}
.finish-cbtns{display:flex;gap:8px;flex-wrap:wrap}
.finish-cbtns .btn-ghost{color:var(--navy);border-color:var(--line);background:#fff}

/* Progress page (v1) */
.stat-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.stat{background:var(--ice);border-radius:11px;padding:10px 8px;text-align:center}
.stat b{display:block;font-size:1.25rem;color:var(--navy);line-height:1.1}
.stat span{font-size:.68rem;color:var(--slate);display:block;margin-top:3px}
.prog-lbl{font-size:.8rem;font-weight:600;color:var(--slate);margin:4px 0 4px}
.bars{width:100%;height:auto;display:block}
.bars-axis{display:flex;justify-content:space-between;font-size:.68rem;color:var(--slate);margin-top:2px}
.spark{width:120px;height:32px;flex:0 0 auto}
.spark-empty{font-size:.72rem;color:var(--slate);flex:0 1 auto;min-width:0;text-align:center}
.meas-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.meas-row:first-of-type{border-top:0}
.meas-name{flex:1 1 auto;font-weight:600;color:var(--charcoal);font-size:.9rem}
.meas-val{flex:0 0 auto;text-align:right;min-width:78px}
.meas-val b{display:block;color:var(--navy);font-size:.95rem}
.meas-val span{font-size:.7rem;color:var(--slate)}
.prog-table-wrap{overflow-x:auto;margin-top:10px}
.prog-table{width:100%;border-collapse:collapse;font-size:.82rem}
.prog-table th,.prog-table td{text-align:left;padding:5px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.prog-table th{color:var(--slate);font-weight:600}
.str-ex{border:1px solid var(--line);border-radius:11px;margin-bottom:8px;padding:0}
.str-ex>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px 10px;padding:10px 12px;flex-wrap:wrap}
.str-ex>summary svg{flex:0 1 120px;min-width:0;max-width:100%;height:auto}
.str-ex>summary::-webkit-details-marker{display:none}
.str-nm{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;font-weight:600;color:var(--charcoal);font-size:.9rem}
.str-top{flex:0 0 auto;margin-left:auto;color:var(--navy);font-weight:700;font-size:.9rem}
.str-ex .prog-table-wrap{padding:0 12px 12px}

/* Adjust-anytime revision note (draft review) */
.adj-note{background:#fff4ef;border:1px solid #ffd9c9;color:var(--charcoal);font-size:.86rem}

/* Warm-up / cool-down done + skip marks */
.wu-marks{display:inline-flex;gap:4px;flex:0 0 auto}
.wu-name{flex:1 1 auto}
.wu-mark{width:26px;height:26px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--slate);font-size:.82rem;line-height:1;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center}
.wu-mark.wu-done:hover{border-color:#2e9e5b;color:#2e9e5b}
.wu-mark.wu-skip:hover{border-color:#b42318;color:#b42318}
.wu-mark.wu-done.on{background:#e7f6ec;border-color:#2e9e5b;color:#2e9e5b}
.wu-mark.wu-skip.on{background:#fdecec;border-color:#b42318;color:#b42318}
.wu-item.is-done .wu-name{color:#2e9e5b}
.wu-item.is-skip .wu-name{color:var(--slate);text-decoration:line-through}

/* App version badge (top-right of the frame) */
.app-ver{font-size:11px;color:var(--slate);opacity:.7;font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap}

/* Exercise Library page */
.lib-ex{border:1px solid var(--line);border-radius:11px;margin-bottom:8px}
.lib-ex>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:11px 12px}
.lib-ex>summary::-webkit-details-marker{display:none}
.lib-nm{flex:1 1 auto;font-weight:600;color:var(--charcoal);font-size:.9rem}
.lib-kind,.kind-badge{flex:0 0 auto;font-size:.66rem;text-transform:uppercase;letter-spacing:.03em;color:var(--slate);background:var(--ice);border-radius:6px;padding:2px 7px}
.lib-has{flex:0 0 auto;font-size:.68rem;color:#2e9e5b}
.lib-body{padding:0 12px 12px;display:flex;flex-direction:column;gap:8px}
.lib-body .lib-note{padding:9px 11px;border:1px solid var(--line);border-radius:9px;font:inherit;background:#fff;width:100%;resize:vertical}
.lib-msg{min-height:1em;font-size:.8rem}

/* Library delete + add-exercise picker divider */
.lib-delrow{margin-top:2px}
.lib-del{color:#b42318;border-color:#f0c8c2;background:#fff}
.lib-del:hover{border-color:#b42318}
.lib-protect{font-size:.78rem;margin-top:2px}
.addex-or{text-align:center;font-size:.76rem;color:var(--slate);margin:6px 0}

/* Export & delete page */
.exp-csvs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.exp-csvs .btn{flex:1 1 auto}
.danger-zone{border:1px solid #f0c8c2}
.danger-zone .pnl-h{color:#b42318}
.btn-danger{background:#b42318;color:#fff}
.btn-danger:hover{background:#912013}
.btn-danger:disabled{opacity:.5;cursor:default}

/* Add-to-calendar row (Today) */
.cal-row{margin:2px 0 10px}
.cal-row .btn{color:var(--navy);border-color:var(--line);background:#fff}
.cal-row .btn:hover{border-color:var(--navy)}

/* Account page */
.acct-soon{margin-top:10px;padding:10px 12px;background:var(--ice);border-radius:10px;font-size:.84rem;color:var(--slate)}

/* Food page */
.food-q{padding:8px 0;border-top:1px solid var(--line)}
.food-q:first-child{border-top:0}
.food-q b{display:block;font-size:.82rem;color:var(--slate);margin-bottom:4px}
.food-q p{margin:0}
.food-chips{display:flex;flex-wrap:wrap;gap:6px}
.food-chip{font-size:.78rem;background:var(--ice);border-radius:20px;padding:4px 10px;color:var(--charcoal)}
.food-big{font-size:1.3rem;font-weight:700;color:var(--navy);margin:2px 0 6px}
.food-list{margin:0 0 6px;padding-left:18px}
.food-list li{margin:4px 0}
.food-safe{background:#fff4ef;border:1px solid #ffd9c9;font-size:.84rem;color:var(--charcoal)}

/* Food meal ideas */
.meal-results{margin-top:10px}
.meal-results:empty{display:none}
.meal-sec{margin-bottom:10px}
.meal-sec b{display:block;color:var(--navy);font-size:.9rem;margin-bottom:2px}

/* Food log */
.foodlog-datewrap{margin-bottom:10px}
.foodlog-datewrap input{margin-left:6px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;font:inherit}
.foodmeal{border-top:1px solid var(--line);padding:8px 0}
.foodmeal-h{display:flex;align-items:center;gap:8px}
.meal-type{font-size:.66rem;text-transform:uppercase;letter-spacing:.03em;color:var(--slate);background:var(--ice);border-radius:6px;padding:2px 7px;flex:0 0 auto}
.foodmeal-h b{flex:1 1 auto}
.foodmeal-x{flex:0 0 auto;border:0;background:none;color:var(--slate);font-size:1.2rem;line-height:1;cursor:pointer;padding:0 4px}
.foodmeal-macros{font-size:.82rem;color:var(--slate);margin-top:2px}
.food-totals{display:flex;justify-content:space-between;margin-top:10px;padding-top:8px;border-top:2px solid var(--line);font-size:.9rem}
.food-totals b{color:var(--navy)}
.foodadd{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.food-photobtns{display:flex;align-items:center;gap:8px;margin:8px 0}
.food-photobtns .btn-ghost{color:var(--navy);border-color:var(--line);background:#fff}
.food-macrogrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.food-macrogrid .fm-name{grid-column:1 / -1}
.food-macrogrid label{display:flex;flex-direction:column;font-size:.74rem;color:var(--slate);gap:3px}
.food-macrogrid input{padding:8px 10px;border:1px solid var(--line);border-radius:9px;font:inherit;background:#fff}
.food-est-note{font-size:.74rem;margin:8px 0 0;text-align:center}

/* Keep bottom-nav labels on one line with 6 tabs */
.bottomnav a{min-width:0;white-space:nowrap}
@media (max-width:359px){.bottomnav a{font-size:10px}}

/* Rest-day training-day chips (fix squashed labels) */
.daychips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:4px 0 18px}
.daychip{background:var(--ice);color:var(--navy);border-radius:20px;padding:5px 13px;font-size:.85rem;font-weight:600}

/* Food meal time + name layout */
.food-tt{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}
.food-time{max-width:130px}
.foodmeal-h{display:flex;align-items:center;gap:8px}
.foodmeal-time{border:1px solid var(--line);border-radius:8px;padding:3px 7px;font:inherit;font-size:.8rem;color:var(--charcoal)}
.foodmeal-h .foodmeal-x{margin-left:auto}
.foodmeal-name{font-weight:600;color:var(--charcoal);margin-top:3px}

/* ============================================================
   Apple surface pass (update-70) - restrained monochrome feel.
   Overrides foundations only; brand navy/orange kept as the one
   accent. App-scoped where it matters; no markup/backend change.
   ============================================================ */
:root{
  --bg:#f5f5f7;
  --charcoal:#1d1d1f;      /* warm near-black, never pure #000 */
  --slate:#6b6b6b;
  --line:rgba(0,0,0,0.08);
  --focus:#0071e3;         /* Apple blue - focus rings only */
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 1px 2px rgba(0,0,0,0.04), 0 10px 30px -18px rgba(0,0,0,0.12);
  --shadow-lg:0 1px 2px rgba(0,0,0,0.05), 0 24px 60px -24px rgba(0,0,0,0.20);
  --font-sans:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
}
body{
  line-height:1.47;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Grey app canvas, white cards */
#app.frame{ background:var(--bg); }

/* Cards: soft layered shadow, near-invisible border, inset iOS radius */
.panel{
  border:1px solid rgba(0,0,0,0.05);
  border-radius:20px;
  box-shadow:var(--shadow);
}

/* Titles: negative tracking is the Apple tell */
.page-title{ font-weight:700; letter-spacing:-0.022em; font-size:1.95rem; line-height:1.1; }
@media (min-width:760px){ .page-title{ font-size:1.75rem; } }
.panel-title{ letter-spacing:-0.015em; }

/* Frosted, sticky chrome */
.topbar{
  background:rgba(255,255,255,0.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.bottomnav{
  background:rgba(255,255,255,0.82);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid rgba(0,0,0,0.06);
}
.topnav a.active{ background:rgba(0,0,0,0.05); }

/* Buttons: 12px radius, tactile press, no hover-lift (press-shrink instead) */
.btn{
  border-radius:12px; letter-spacing:-0.01em;
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.btn-primary, .btn-dark{ box-shadow:0 1px 2px rgba(0,0,0,0.10); }
.btn-primary:hover, .btn-dark:hover{ transform:none; }
.btn:active{ transform:scale(0.975); }

/* Inputs: light border at rest, soft Apple-blue focus ring */
.ob-input,
input[type="text"], input[type="number"], input[type="url"],
input[type="date"], input[type="time"], input[type="email"], textarea{
  border-radius:12px; border:1px solid rgba(0,0,0,0.12);
  transition:border-color .16s ease, box-shadow .16s ease;
}
.ob-input:focus,
input[type="text"]:focus, input[type="number"]:focus, input[type="url"]:focus,
input[type="date"]:focus, input[type="time"]:focus, input[type="email"]:focus, textarea:focus{
  outline:none; border-color:var(--focus);
  box-shadow:0 0 0 3px rgba(0,113,227,0.15);
}

/* Tappable list rows lift on desktop only (phones don't hover) */
@media (hover:hover) and (min-width:760px){
  .rowlink{ transition:transform .16s ease, box-shadow .16s ease; }
  .rowlink:hover{ transform:translateY(-1px); }
}

/* Accessibility + care: honour reduced motion */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    transition:none !important; animation:none !important; scroll-behavior:auto !important;
  }
}

/* Colour icon-chip hub (More screen) - the one place colour lives */
.hub-grid{display:grid;gap:14px;grid-template-columns:1fr;margin-bottom:16px}
@media (min-width:560px){.hub-grid{grid-template-columns:1fr 1fr}}
.hub-card{display:block;text-align:left;width:100%;background:#fff;border:1px solid rgba(0,0,0,0.05);border-radius:20px;box-shadow:var(--shadow);padding:18px;cursor:pointer;font:inherit;transition:transform .16s ease, box-shadow .16s ease}
.hub-card:active{transform:scale(0.985)}
@media (hover:hover) and (min-width:760px){.hub-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}}
.hub-chip{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;margin-bottom:12px}
.hub-chip svg{width:24px;height:24px}
.hub-title{display:block;font-size:1.05rem;font-weight:700;letter-spacing:-0.015em;color:var(--charcoal)}
.hub-desc{display:block;color:var(--slate);font-size:.9rem;margin-top:3px;line-height:1.4}
.hub-open{display:inline-block;margin-top:10px;font-weight:600;font-size:.9rem}
/* icon-chip palette: pale tint bg + saturated same-hue foreground */
.chip-green{background:#dcfce7;color:#16a34a}
.chip-blue{background:#dbeafe;color:#2563eb}
.chip-orange{background:#ffedd5;color:#ea580c}
.chip-purple{background:#ede9fe;color:#7c3aed}
.chip-amber{background:#fef3c7;color:#d97706}
.open-green{color:#16a34a}
.open-blue{color:#2563eb}
.open-orange{color:#ea580c}
.open-purple{color:#7c3aed}
.open-amber{color:#d97706}

/* Today quick-actions strip (colour chip tiles) */
.qa-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 18px}
.qa-tile{display:flex;flex-direction:column;align-items:center;gap:8px;background:#fff;border:1px solid rgba(0,0,0,0.05);border-radius:18px;box-shadow:var(--shadow);padding:14px 6px;cursor:pointer;font:inherit;transition:transform .16s ease, box-shadow .16s ease}
.qa-tile:active{transform:scale(0.97)}
@media (hover:hover) and (min-width:760px){.qa-tile:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}}
.qa-tile .hub-chip{margin-bottom:0;width:40px;height:40px}
.qa-tile .hub-chip svg{width:22px;height:22px}
.qa-label{font-size:.8rem;font-weight:600;color:var(--charcoal);text-align:center;line-height:1.2}

/* Progress summary tiles + activity chart (mockup direction) */
.prog-summary{padding:16px}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat-tile{background:var(--ice);border:1px solid rgba(0,0,0,0.04);border-radius:16px;padding:15px 16px}
.stat-tile b{display:block;font-size:1.7rem;font-weight:800;letter-spacing:-0.03em;color:var(--charcoal);line-height:1;font-variant-numeric:tabular-nums}
.stat-tile span{display:block;font-size:.82rem;color:var(--slate);margin-top:6px}
.stat-fill{background:var(--navy);border-color:var(--navy)}
.stat-fill b{color:#fff}
.stat-fill span{color:rgba(255,255,255,0.72)}
.area{width:100%;height:auto;display:block;margin-top:2px}

/* Today greeting + navy workout hero (mockup direction) */
.today-head{margin-bottom:14px}
.greet{margin:0}
.wk-hero{background:linear-gradient(160deg,#1b3a5c,var(--navy));border-radius:22px;padding:22px;color:#fff;box-shadow:0 18px 44px -20px rgba(15,41,66,0.55);margin-bottom:18px}
.wk-hero-eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.08em;color:var(--orange);margin-bottom:8px}
.wk-hero-title{font-size:1.5rem;font-weight:800;letter-spacing:-0.02em;color:#fff;margin:0}
.wk-hero-cue{color:rgba(255,255,255,0.75);font-size:.92rem;margin:6px 0 0;line-height:1.4}
.wk-hero-stats{display:flex;gap:22px;margin:16px 0 18px}
.wk-hero-stat b{display:block;font-size:1.15rem;font-weight:700;color:#fff;letter-spacing:-0.01em}
.wk-hero-stat span{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:rgba(255,255,255,0.6);margin-top:3px}
.wk-hero-btn{width:100%;min-height:50px;font-size:1rem}

/* Food redesign: calorie ring, macro tiles, meal rows (mockup direction) */
.food-ringwrap{position:relative;width:150px;height:150px;margin:6px auto 2px}
.food-ring{width:150px;height:150px;display:block}
.food-ring-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.food-ring-mid b{font-size:1.55rem;font-weight:800;letter-spacing:-0.03em;color:var(--charcoal);font-variant-numeric:tabular-nums;line-height:1.1}
.food-ring-mid span{font-size:.74rem;color:var(--slate);margin-top:3px}
.food-ring-note{text-align:center;font-size:.76rem;margin:6px 0 14px}
.food-totals{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0 14px;border-top:0;padding-top:0}
.ft-cell{background:var(--ice);border-radius:14px;padding:11px 6px;text-align:center}
.ft-cell b{display:block;font-size:1.05rem;font-weight:800;letter-spacing:-0.02em;color:var(--charcoal);font-variant-numeric:tabular-nums}
.ft-cell span{display:block;font-size:.7rem;color:var(--slate);margin-top:2px}
@media (max-width:390px){.food-totals{grid-template-columns:repeat(2,1fr)}}
.foodmeal{padding:11px 0}
.meal-type{background:#ffedd5;color:#ea580c}

/* Progress doughnuts (update-82): consistency / this week / plan progress */
.prog-donuts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.prog-donuts-2{grid-template-columns:repeat(2,1fr);max-width:300px;margin:2px auto 6px}
.prog-donut{display:flex;flex-direction:column;align-items:center;text-align:center}
.pd-ring{position:relative;width:84px;height:84px}
.pd-svg{width:84px;height:84px;transform:rotate(-90deg)}
.pd-track{fill:none;stroke:rgba(224,58,58,0.16);stroke-width:4}
.pd-val{fill:none;stroke-width:4;stroke-linecap:round}
.pd-mid{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.08rem;font-weight:800;letter-spacing:-0.02em;color:var(--charcoal);font-variant-numeric:tabular-nums}
.pd-label{font-size:.72rem;color:var(--slate);margin-top:8px;line-height:1.25}
@media (max-width:360px){.pd-ring,.pd-svg{width:72px;height:72px}.pd-mid{font-size:.96rem}}

/* Cardio actuals logging on Today (update-86) */
.cardio-presc{margin:0 0 10px}
.cardio-log{display:flex;flex-direction:column;gap:10px}
.cardio-machine{flex-wrap:wrap}
.cardio-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cardf{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:10px;font-size:14px;background:#fff;color:var(--charcoal)}
.cardf:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(15,41,66,0.12)}

.prog-donut{cursor:pointer}
.prog-donut:active{transform:scale(0.97)}

/* Weight-type tag (machine / free / bodyweight) — per-movement, update-90 */
.wtype-row{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.wtype-lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--slate);font-weight:600}
.wtype-seg{display:flex}
.wtype-seg button{padding:7px 12px;font-size:13px}
.lift-split{background:var(--ice);border-radius:14px;padding:12px 14px;margin-bottom:12px}
.lift-split-lbl{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--slate);font-weight:600;margin-bottom:8px}
.lift-split-chips{display:flex;flex-wrap:wrap;gap:6px}
.lift-split-hint{margin:10px 0 0}
.mc-untag{opacity:.72}

/* Training detail page — spiced up cards (update-88) */
.td-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.td-sum{background:var(--navy);border-radius:14px;padding:12px 10px;text-align:center;color:#fff}
.td-sum b{display:block;font-size:1.4rem;font-weight:800;line-height:1;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.td-sum span{font-size:.68rem;color:rgba(255,255,255,0.72);text-transform:uppercase;letter-spacing:.04em}
.mach-card{background:var(--ice);border-radius:16px;padding:14px;margin-bottom:12px}
.mach-card:last-child{margin-bottom:0}
.mach-head{display:flex;align-items:center;gap:12px}
.mach-ico{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:0 3px 8px rgba(15,41,66,0.18)}
.mach-ico svg{width:22px;height:22px}
.mach-name{font-weight:700;color:var(--charcoal);font-size:1.02rem;flex:1;letter-spacing:-0.01em}
.mach-count{text-align:right;line-height:1.15}
.mach-count b{display:block;font-size:1.15rem;color:var(--navy);font-weight:800;font-variant-numeric:tabular-nums}
.mach-count small{font-size:.66rem;color:var(--slate);text-transform:uppercase;letter-spacing:.04em}
.mach-entries{margin-top:10px;display:flex;flex-direction:column}
.mach-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid rgba(15,41,66,0.07)}
.mach-date{font-size:.78rem;color:var(--slate);min-width:56px;font-variant-numeric:tabular-nums}
.mach-metrics{display:flex;flex-wrap:wrap;gap:6px}
.mc-chip{background:#fff;color:var(--charcoal);border-radius:999px;padding:3px 10px;font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums}
.mc-cal{color:var(--orange)}
.mc-hr{color:#dc2626}

/* ============================================================
   update-91 - Dark elevated-glass skin (app only, scoped to .app-body).
   Redefines tokens on the app root so var(--ice/--line/--charcoal/--slate/
   --shadow) flip dark automatically; the public landing (not .app-body) is
   untouched. Every rule here is .app-body-scoped, so it outranks the base
   single-class rules on specificity. Reversible: delete this block.
   ============================================================ */
.app-body{
  --ice:#16283B;
  --line:rgba(255,255,255,0.07);
  --line-top:rgba(255,255,255,0.12);
  --charcoal:#E9EFF6;
  --slate:#8CA1B8;
  --bg:#0A1521;
  --surface:#0F1E2E;
  --surface-2:#16283B;
  --field:#0C1826;
  --glass:rgba(9,21,36,0.72);
  --glass-brd:rgba(255,255,255,0.10);
  --shadow:0 10px 30px rgba(0,0,0,0.35);
  --shadow-lg:0 24px 60px rgba(0,0,0,0.5);
  background:var(--bg);
  color:var(--charcoal);
}

/* Ground + primary surfaces */
.app-body .content,.app-body.app-body{background:var(--bg)}
.app-body .card,.app-body .panel,.app-body .sess,.app-body .hub-card,.app-body .qa-tile{
  background:var(--surface);border-color:var(--line);
}
.app-body .hub-card,.app-body .qa-tile,.app-body .stat-tile{border-color:var(--line)}

/* All app form controls -> recessed dark field */
.app-body input,.app-body textarea,.app-body select{
  background:var(--field);color:var(--charcoal);border-color:var(--line);
}
.app-body input::placeholder,.app-body textarea::placeholder{color:var(--slate);opacity:1}
.app-body input:focus,.app-body textarea:focus,.app-body select:focus{border-color:var(--orange)}

/* Navy-coloured headings/labels/values -> light */
.app-body .page-title,.app-body .panel-title,.app-body .card h1,.app-body .empty h3,
.app-body .row .rl b,.app-body .ob-label,.app-body .sess-top h3,.app-body .sess-block h4,
.app-body .wk-h,.app-body .rd-title,.app-body .stat b,.app-body .meas-val b,.app-body .str-top,
.app-body .food-big,.app-body .meal-sec b,.app-body .food-totals b,.app-body .mach-count b,
.app-body .ob-range-val,.app-body .logged-det>summary,.app-body .day-det>summary,
.app-body .finish-q,.app-body .food-totals b{color:var(--charcoal)}
.app-body .mach-count b{color:#dfe9f4}

/* Subtle "raised fill" chips / tiles that were white -> elevated dark */
.app-body .mc-chip{background:var(--surface-2);color:var(--charcoal)}
.app-body .coach-turn.coach-a{background:var(--surface-2);color:var(--charcoal);border-color:var(--line)}
.app-body .locked-note{background:var(--surface-2);color:var(--charcoal)}
.app-body .daychip{background:var(--surface-2);color:#dfe9f4}
.app-body .lib-kind,.app-body .kind-badge,.app-body .meal-type,.app-body .food-chip{color:#cdd9e6}
.app-body .meal-type{background:rgba(255,107,53,.16)}

/* Unselected pill/chip controls (were #fff) -> elevated dark; selected stays navy */
.app-body .ob-chip,.app-body .bm-chip,.app-body .pblock{background:var(--surface-2);color:var(--slate)}
.app-body .ob-chip:hover,.app-body .bm-chip:hover,.app-body .pblock:hover{color:#dfe9f4}
.app-body .seg{background:var(--field)}
.app-body .seg button.on,.app-body .bm-toggle .bm-view.on{background:var(--surface-2);color:#fff}
.app-body .topnav a.active{background:var(--surface-2);color:#dfe9f4}

/* Ghost / outline buttons that carried a white fill -> transparent on dark */
.app-body .content .btn-ghost,.app-body .photorow .btn-ghost,.app-body .vidrow .btn-ghost,
.app-body .plan-tools .btn-ghost,.app-body .swap-actions .btn-ghost,.app-body .coachwrap .excoachbtn,
.app-body .coach-inrow .coach-photobtn,.app-body .finish-cbtns .btn-ghost,.app-body .cal-row .btn,
.app-body .food-photobtns .btn-ghost,.app-body .wu-expand,.app-body .wu-mark{
  background:var(--surface-2);color:#dfe9f4;border-color:var(--line);
}
.app-body .content .btn-ghost:hover{border-color:var(--orange)}

/* Warm tint banners (were light peach) -> dark orange wash */
.app-body .ci-warn,.app-body .rf-banner,.app-body .ob-note.warn,.app-body .adj-note,
.app-body .food-safe,.app-body .bm-tag{
  background:rgba(255,107,53,0.12);border-color:rgba(255,107,53,0.38);color:#ffd9c9;
}
.app-body .exremove,.app-body .lib-del{background:transparent;color:#ff9b8a;border-color:rgba(255,107,53,0.4)}

/* Glass chrome: translucent, blurred header + bottom nav */
.app-body .topbar{
  background:var(--glass);border-bottom:1px solid var(--glass-brd);
  backdrop-filter:saturate(150%) blur(16px);-webkit-backdrop-filter:saturate(150%) blur(16px);
}
.app-body .bottomnav{
  background:var(--glass);border-top:1px solid var(--glass-brd);
  backdrop-filter:saturate(150%) blur(16px);-webkit-backdrop-filter:saturate(150%) blur(16px);
}
.app-body .toast{background:var(--surface-2);color:#fff;border:1px solid var(--glass-brd)}

/* Elevated navy surfaces read fine on the darker ground; keep, just soften edge */
.app-body .td-sum,.app-body .stat-fill,.app-body .avatar{border:1px solid var(--line)}

/* Apple-style press feedback + gentler easing */
.app-body .btn,.app-body .qa-tile,.app-body .hub-card,.app-body .ob-chip,.app-body .seg button,
.app-body .pblock,.app-body .prog-donut{transition:transform .18s cubic-bezier(.2,.8,.2,1),background .18s ease,border-color .18s ease,box-shadow .18s ease}
.app-body .btn:active,.app-body .qa-tile:active,.app-body .hub-card:active,
.app-body .prog-donut:active{transform:scale(.97)}

/* ===== update-92 - workout-view flow (progress bar, calendar fold, card spacing) ===== */
.sess-progress{position:sticky;top:60px;z-index:30;display:flex;align-items:center;gap:10px;padding:9px 2px;margin:2px 0 8px;background:var(--bg,#fff)}
.sess-progress-bar{flex:1;height:12px;border-radius:999px;background:var(--line);overflow:hidden}
.sess-progress-bar i{display:block;height:100%;width:0;background:var(--orange);border-radius:999px;transition:width .35s cubic-bezier(.2,.8,.2,1)}
.sess-progress-lbl{font-size:.72rem;font-weight:600;color:var(--slate);white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.sess-progress.is-complete .sess-progress-bar i{background:#16A34A}
.sess-progress.is-complete .sess-progress-lbl{color:#16A34A}
.cal-fold{margin-top:14px}
.cal-fold>summary{cursor:pointer;list-style:none;font-size:.82rem;font-weight:600;color:var(--slate);padding:6px 0;display:inline-flex;align-items:center;gap:6px}
.cal-fold>summary::-webkit-details-marker{display:none}
.cal-fold>summary::before{content:"+";font-weight:700;color:var(--orange)}
.cal-fold[open]>summary::before{content:"-"}
.cal-fold .cal-row{margin-top:8px}
.ex .setwrap,.ex .loggrid{margin-top:10px}
.app-body .ex-expand{color:#9db1c6}

/* ===== update-93 - inline weight-unit switch ===== */
.sess-unit{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px;font-size:.8rem;font-weight:600;color:var(--slate)}
.sess-unit .seg.segsm{margin:0}
.sess-unit-note{flex-basis:100%;font-size:.68rem;font-weight:500;color:var(--slate);opacity:.8;letter-spacing:.01em}

/* ===== update-96 - plan history / restore ===== */
.hist-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.hist-row:first-child{border-top:none}
.hist-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.hist-meta b{font-size:.92rem}
.hist-meta span{font-size:.76rem;color:var(--slate)}
.hist-restore{flex:0 0 auto;white-space:nowrap}

/* ===== update-97 - retroactively mark a logged day complete ===== */
.markdone-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:10px 0 4px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2,#f7f9fc)}
.markdone-bar .muted{font-size:.82rem}
.markdone-bar .mark-complete{flex:0 0 auto;white-space:nowrap}
.pending-mark{font-size:.82rem;font-weight:700;color:var(--orange)}

/* ===== update-100 - change-from picker ===== */
.cf-list{display:flex;flex-direction:column;gap:8px}
.cf-opt{display:flex;flex-direction:column;gap:3px;padding:12px 34px 12px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer;position:relative}
.cf-opt input{position:absolute;right:12px;top:50%;transform:translateY(-50%);accent-color:var(--orange);width:18px;height:18px}
.cf-opt:has(input:checked){border-color:var(--orange);background:var(--surface-2,#f7f9fc)}
.cf-main{font-weight:700}
.cf-sub{font-size:.78rem;color:var(--slate)}
.cf-wk{font-size:.68rem;opacity:.7;font-weight:700}

/* ===== update-102 - adjust modes + locations + change summary ===== */
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px}
.mode-btn{padding:12px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface,#fff);font:inherit;font-weight:700;cursor:pointer;color:var(--charcoal)}
.mode-btn.on{border-color:var(--orange);background:var(--surface-2,#12283f);color:var(--orange)}
.loc-pick{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.change-summary{border:1px solid var(--orange)}

/* ===== update-103 - frozen (unchanged) markers in draft outline ===== */
.frozen-mark{font-size:.72rem;font-weight:700;color:var(--slate);border:1px solid var(--line);border-radius:999px;padding:1px 8px;margin-left:4px}
.day-frozen > summary{opacity:.62}

/* ===== update-107 - detailed change summary line breaks ===== */
.change-summary p{white-space:pre-line}

/* ===== update-110 - cardio detail note + unit cleanup ===== */
.mach-note{font-size:.76rem;color:var(--slate);margin-top:4px;line-height:1.35;flex-basis:100%}

/* ===== update-111 - styled change summary list ===== */
.chg-list{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.chg-list li{position:relative;padding-left:20px;line-height:1.45}
.chg-list li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--orange)}
.chg-list li b{font-weight:700}

/* ===== update-112 - structured metric units ===== */
.exf-u{display:flex;align-items:center;gap:4px;min-width:0}
.exf-u .exf{flex:1;min-width:0;width:auto}
.unit-chip{flex:0 0 auto;border:1px solid var(--line);background:var(--field,#fff);color:var(--slate);border-radius:8px;padding:7px 7px;font-size:.66rem;font-weight:700;cursor:pointer;white-space:nowrap;line-height:1}
.unit-chip:active{transform:scale(.95)}

/* ===== update-114 - selected chip visible on dark theme ===== */
.app-body .ob-chip.on{background:rgba(255,107,53,0.16);border-color:var(--orange);color:#fff}
.app-body .ob-chip.on:hover{color:#fff}

/* ===== update-115 - Training detail redesign (hero cards + slide-over) ===== */
.td-rail{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.td-rail::-webkit-scrollbar{display:none}
.td-stat{flex:0 0 auto;min-width:96px;border-radius:16px;padding:13px 14px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--glass-brd,rgba(255,255,255,.12))}
.td-stat b{font-size:21px;font-weight:800;letter-spacing:-.5px;display:block;line-height:1}
.td-stat span{font-size:11px;color:var(--slate)}
.td-stat.accent b{color:var(--orange)}

.td-cards{display:flex;flex-direction:column;gap:14px}
.td-hero{position:relative;display:block;width:100%;text-align:left;cursor:pointer;overflow:hidden;
  border-radius:20px;padding:16px;color:var(--charcoal);font:inherit;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015));border:1px solid var(--glass-brd,rgba(255,255,255,.12));
  box-shadow:0 10px 30px -18px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05);transition:transform .16s ease}
.td-hero:active{transform:scale(.985)}
.td-glow{position:absolute;inset:-40% 45% 55% -12%;background:radial-gradient(circle,var(--orange),transparent 60%);opacity:.14;filter:blur(22px);pointer-events:none}
.td-hrow{display:flex;align-items:center;gap:13px;position:relative}
.td-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto;background:var(--orange);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.td-ico svg{width:24px;height:24px}
.td-htext{min-width:0}
.td-name{font-size:17px;font-weight:750;letter-spacing:-.2px;display:block}
.td-tags{display:flex;gap:6px;margin-top:3px;flex-wrap:wrap}
.td-pill{font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--slate)}
.td-pill.on{color:#fff;background:rgba(255,107,53,.16);border-color:rgba(255,107,53,.4)}
.td-best{margin-left:auto;text-align:right;flex:0 0 auto}
.td-best b{font-size:19px;font-weight:800;letter-spacing:-.4px;display:block;line-height:1}
.td-best span{font-size:9px;color:var(--slate);letter-spacing:.08em}
.td-chips{display:flex;gap:7px;margin-top:14px;flex-wrap:wrap;position:relative}
.td-chip{font-size:11px;color:var(--charcoal);padding:6px 10px;border-radius:10px;background:var(--field);border:1px solid var(--line)}
.td-chip small{color:var(--slate)}
.td-spark{display:block;position:relative;height:34px;margin-top:12px}
.td-chev{position:absolute;right:14px;bottom:13px;color:var(--slate);opacity:.55;font-size:20px;line-height:1}

/* slide-over full-page item view */
.td-sheet{position:fixed;inset:0;z-index:200;max-width:560px;margin:0 auto;overflow-y:auto;
  background:radial-gradient(900px 500px at 80% -10%,rgba(255,107,53,.10),transparent 55%),var(--bg);
  transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);will-change:transform}
.td-sheet.open{transform:translateX(0)}
.td-sheet-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:linear-gradient(180deg,var(--bg),rgba(0,0,0,0));backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px);border-bottom:1px solid var(--line)}
.td-back{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);display:grid;place-items:center;cursor:pointer;color:var(--charcoal);flex:0 0 auto}
.td-back svg{width:18px;height:18px}
.td-sheet-title{font-size:16px;font-weight:750;line-height:1.1}
.td-sheet-title small{display:block;font-size:11px;color:var(--slate);font-weight:500;margin-top:2px}

.td-banner{margin:16px;border-radius:22px;padding:22px;position:relative;overflow:hidden;background:linear-gradient(150deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid var(--glass-brd,rgba(255,255,255,.12))}
.td-banner .td-glow{inset:-30% 30% 40% -10%;opacity:.2;filter:blur(26px)}
.td-bico{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;margin-bottom:14px;background:var(--orange);position:relative}
.td-bico svg{width:30px;height:30px}
.td-banner h2{margin:0;font-size:23px;font-weight:800;letter-spacing:-.5px;position:relative}
.td-bsub{color:var(--slate);font-size:12px;margin-top:5px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;position:relative}
.td-big{display:flex;gap:18px;margin-top:18px;position:relative}
.td-big .k b{font-size:24px;font-weight:800;letter-spacing:-.5px;display:block;line-height:1}
.td-big .k span{font-size:10px;color:var(--slate);letter-spacing:.06em;text-transform:uppercase}

.td-sec{margin:20px 16px}
.td-sech{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate);font-weight:700;margin:0 2px 11px}
.td-chart{height:140px;position:relative}
.td-yl{position:absolute;left:0;top:0;bottom:18px;width:30px;font-size:9px;color:var(--slate);display:flex;flex-direction:column;justify-content:space-between}
.td-plot{position:absolute;left:32px;right:4px;top:0;bottom:18px}
.td-xl{position:absolute;left:32px;right:4px;bottom:0;height:16px;display:flex;justify-content:space-between;font-size:9px;color:var(--slate);overflow:hidden}
.td-xl span{white-space:nowrap}

.td-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.td-mini{border-radius:14px;background:var(--field);border:1px solid var(--line);padding:12px}
.td-mini b{font-size:17px;font-weight:800;display:block;letter-spacing:-.3px}
.td-mini span{font-size:11px;color:var(--slate)}

.td-hist{display:flex;flex-direction:column}
.td-hrow2{display:flex;align-items:flex-start;gap:12px;padding:12px 2px;border-top:1px solid var(--line)}
.td-hrow2:first-child{border-top:none}
.td-hdate{font-size:12px;color:var(--slate);width:42px;flex:0 0 auto;padding-top:3px}
.td-hmet{display:flex;gap:6px;flex-wrap:wrap;flex:1;align-items:center}
.td-hmet .td-chip{padding:4px 9px;font-size:10.5px}
.td-hnote{flex-basis:100%;font-size:11px;color:var(--slate);margin-top:3px}
.td-pr{font-size:10px;font-weight:800;color:var(--navy);background:var(--orange);padding:2px 7px;border-radius:999px}

/* ===== update-116 - Training detail filter tiles ===== */
.td-stat{cursor:pointer;text-align:left;font:inherit;color:var(--charcoal);transition:border-color .15s,background .15s}
.td-stat.on{border-color:var(--orange);background:linear-gradient(160deg,rgba(255,107,53,.14),rgba(255,107,53,.03))}

/* ===== update-117 - shared glass design pass (Today / Plan / Food + app) ===== */
/* Elevated glass panels everywhere in the app */
.app-body .panel,.app-body .card{
  background:linear-gradient(160deg,rgba(255,255,255,0.06),rgba(255,255,255,0.015));
  border:1px solid var(--glass-brd);
  border-radius:20px;
  box-shadow:0 12px 30px -22px rgba(0,0,0,0.85),inset 0 1px 0 rgba(255,255,255,0.04);
}
/* Section headers read as clean eyebrows */
.app-body .sess-block h4,.app-body .pnl-h{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--slate);font-weight:700;margin-bottom:10px;
}
.app-body .sess-block{margin-top:18px}
/* Exercise rows: cleaner separators + breathing room */
.app-body .ex{border-bottom:1px solid var(--line);padding:13px 0}
.app-body .ex-h span{font-size:12.5px}
/* Today hero + quick actions get a touch more lift */
.app-body .qa-tile,.app-body .hub-card{
  background:linear-gradient(160deg,rgba(255,255,255,0.06),rgba(255,255,255,0.015));
  border:1px solid var(--glass-brd);
  box-shadow:0 10px 26px -20px rgba(0,0,0,0.8);
}
/* Food: meal cards + macro chips as glass/chips */
.app-body .foodmeal{
  background:linear-gradient(160deg,rgba(255,255,255,0.05),rgba(255,255,255,0.015));
  border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:12px;
}
.app-body .foodmeal-macros{
  display:inline-flex;flex-wrap:wrap;gap:6px;font-size:11px;color:var(--slate);
}
.app-body .food-macrogrid .stat-tile,.app-body .food-macrogrid>div{
  background:var(--field);border:1px solid var(--line);border-radius:14px;
}
/* Log grid inputs already recessed; give the grid a touch more gap */
.app-body .loggrid{gap:8px}
/* Today's workout hero as an elevated glass banner */
.app-body .wk-hero{
  background:linear-gradient(150deg,rgba(255,255,255,0.09),rgba(255,255,255,0.02));
  border:1px solid var(--glass-brd);border-radius:22px;
  box-shadow:0 14px 34px -20px rgba(0,0,0,0.9);position:relative;overflow:hidden;
}
.app-body .wk-hero::before{content:"";position:absolute;inset:-40% 40% 50% -12%;background:radial-gradient(circle,var(--orange),transparent 60%);opacity:.14;filter:blur(24px);pointer-events:none}
.app-body .wk-hero-eyebrow{font-family:var(--font-mono);letter-spacing:0.14em;color:var(--orange);font-weight:700}
.app-body .wk-hero-stat{background:var(--field);border:1px solid var(--line);border-radius:14px}

/* ===== update-118 - accent pass: Food orange + remaining screens ===== */
/* Dark secondary CTAs become orange-accented actions (Food AI buttons, Account, Export, sign out) */
.app-body .btn-dark{background:rgba(255,107,53,0.15);border:1px solid rgba(255,107,53,0.5);color:#ffb59a}
.app-body .btn-dark:hover{background:rgba(255,107,53,0.2);color:#ffc4ad}
.app-body .btn-dark:active{background:rgba(255,107,53,0.26)}
/* Food: headline numbers + chips + inputs on-theme */
.app-body .food-big{color:var(--orange)}
.app-body .food-chip{background:var(--field);border:1px solid var(--line);color:var(--charcoal)}
.app-body .food-macrogrid input{background:var(--field);border:1px solid var(--line);color:var(--charcoal)}
.app-body .foodadd{border-color:var(--line)}
/* Progress: stat tiles as glass minis; lead tile is the orange accent */
.app-body .stat-tile{background:linear-gradient(160deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02));border:1px solid var(--glass-brd);border-radius:16px}
.app-body .stat-tile b{letter-spacing:-.5px}
.app-body .stat-fill{background:linear-gradient(160deg,rgba(255,107,53,0.16),rgba(255,107,53,0.04));border:1px solid rgba(255,107,53,0.45)}
.app-body .stat-fill b{color:var(--orange)}
.app-body .stat-fill span{color:var(--slate)}
/* Check-ins: week/block tag as an orange pill; done tick orange */
.app-body .ci-periodic>summary .ci-when{background:rgba(255,107,53,0.14);border:1px solid rgba(255,107,53,0.4);color:#ffb59a;border-radius:999px;padding:2px 9px;font-size:.72rem}
/* Settings: plan-history rows as recessed field rows */
.app-body .hist-row{background:var(--field);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px}

/* ============================================================
   update-120 - DESIGN SYSTEM PASS (vanilla CSS, .app-body scoped)
   1 Ruthless simplification  2 Whitespace & hierarchy
   3 Type/colour discipline   4 Micro-interactions
   ============================================================ */

/* --- 4. Motion + focus foundation ------------------------------------ */
.app-body button,.app-body .btn,.app-body .td-hero,.app-body .td-stat,.app-body .mode-btn,
.app-body .td-chip,.app-body .unit-chip,.app-body .ob-chip,.app-body .qa-tile,.app-body .hub-card,
.app-body .cf-opt,.app-body input,.app-body textarea,.app-body select,.app-body details summary{
  transition:background-color .15s ease-in-out,border-color .15s ease-in-out,color .15s ease-in-out,
             box-shadow .15s ease-in-out,transform .15s ease-in-out;
}
.app-body :focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:6px}
@media (hover:hover){
  .app-body .td-hero:hover,.app-body .qa-tile:hover,.app-body .hub-card:hover{transform:translateY(-2px);box-shadow:0 18px 40px -22px rgba(0,0,0,.85)}
  .app-body .btn:hover{transform:translateY(-1px)}
  .app-body .ob-chip:hover,.app-body .mode-btn:hover,.app-body .td-stat:hover{background:rgba(255,255,255,.08)}
}
.app-body .btn:active,.app-body .td-hero:active,.app-body .mode-btn:active,.app-body .ob-chip:active{transform:scale(.98)}

/* --- 1. Ruthless simplification: fewer fences ------------------------- */
/* Chips: colour blocks, not bordered boxes */
.app-body .td-chip,.app-body .mc-chip,.app-body .food-chip,.app-body .unit-chip{border:none;background:rgba(255,255,255,.07)}
.app-body .td-pill{border:none;background:rgba(255,255,255,.08)}
.app-body .td-pill.on{border:none;background:rgba(255,107,53,.18)}
/* Nested tiles: quiet tinted surfaces, no borders (outer card does the framing) */
.app-body .td-mini,.app-body .td-stat,.app-body .stat-tile,.app-body .wk-hero-stat,.app-body .hist-row{border:none;background:rgba(255,255,255,.055)}
.app-body .stat-fill{border:none}
.app-body .td-stat.on{background:rgba(255,107,53,.16);box-shadow:inset 0 0 0 1.5px var(--orange)}
/* Exercise separators: whitespace instead of dashed lines */
.app-body .ex{border-bottom:none;padding:15px 0}
.app-body .ex + .ex{border-top:1px solid rgba(255,255,255,.05)}
/* Panels: fainter frame, deeper soft shadow */
.app-body .panel,.app-body .card{border-color:rgba(255,255,255,.07);box-shadow:0 16px 40px -28px rgba(0,0,0,.9)}
/* Choice rows (change-from picker, modes): borderless surfaces, selected = tint + ring */
.app-body .cf-opt,.app-body .mode-btn{border:none;background:rgba(255,255,255,.05)}
.app-body .mode-btn.on{background:rgba(255,107,53,.15);box-shadow:inset 0 0 0 1.5px var(--orange);color:var(--orange)}

/* --- 2. Whitespace & hierarchy ---------------------------------------- */
.app-body .panel{padding:20px;margin-bottom:18px}
.app-body .td-cards{gap:16px}
.app-body .td-hero{padding:18px}
.app-body .loggrid{gap:10px}
.app-body .sess-block{margin-top:22px}
.app-body .mode-grid{gap:10px}
/* One dominant action: the primary CTA carries the only loud treatment */
.app-body .btn-primary{padding:14px 20px;border-radius:14px;font-weight:750;
  box-shadow:0 10px 26px -12px rgba(255,107,53,.55)}
.app-body .btn-primary:hover{box-shadow:0 14px 30px -12px rgba(255,107,53,.6)}
/* Secondary actions visually demoted */
.app-body .btn-ghost{background:transparent;border-color:rgba(255,255,255,.12);color:var(--slate)}
.app-body .btn-ghost:hover{color:var(--charcoal)}
.app-body .link-muted{color:var(--slate);opacity:.75}

/* --- 3. Type & colour discipline -------------------------------------- */
.app-body .page-title{font-size:28px;font-weight:800;letter-spacing:-.6px}
.app-body .page-sub{font-size:15px;line-height:1.5;color:var(--slate)}
.app-body .pnl-h,.app-body .panel-title,.app-body .td-sech,.app-body .sess-block h4{
  font-size:10.5px;letter-spacing:.16em;color:var(--slate);opacity:.9}
.app-body .td-name{font-size:18px}
.app-body .td-best b{font-size:21px}
.app-body .td-stat b,.app-body .stat-tile b{font-size:22px}
/* Decorative orange dialled back so interactive orange dominates; data accents stay */
.app-body .ex-safe,.app-body .ex-cue{color:#dd8a66}

/* ============================================================
   update-122 - MOBILE ERGONOMICS + FINISH CELEBRATION
   Bigger thumb targets, press feedback, no sticky hover on touch,
   iOS-zoom fix on cardio inputs, and the session-complete reward.
   .app-body scoped, sits after the design system (stays last).
   ============================================================ */

/* --- Set-row ergonomics: reps steppers, big delete, press feedback --- */
.repwrap{display:flex;align-items:center;gap:4px;min-width:0}
.repwrap .setf-reps{flex:1;min-width:0;width:auto;text-align:center}
.rep-step{flex:0 0 auto;width:38px;height:44px;padding:0;border:1px solid var(--line);
  background:var(--field,#fff);color:var(--navy);font-size:1.3rem;font-weight:700;line-height:1;
  border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent}
.app-body .rep-step{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#dfe9f4}
.app-body .setrow-head,.app-body .setrow{grid-template-columns:28px 1fr 44px}
.app-body .setrow-head.wcol,.app-body .setrow.wcol{grid-template-columns:28px 1fr 1.15fr 44px}
.app-body .setdel{width:44px;height:44px;margin:0 auto;font-size:1.45rem;
  display:inline-flex;align-items:center;justify-content:center}

/* --- Bigger ancillary targets --- */
.app-body .wu-mark{width:44px;height:44px;font-size:1rem;border-radius:10px}
.wu-marks{gap:6px}
.app-body .unit-chip{min-height:40px;padding:9px 11px;font-size:.72rem}
.app-body .ex-expand{padding:8px 6px;margin:6px 0 0 23px}

/* --- iOS zoom fix: cardio inputs must be >=16px to avoid focus-zoom --- */
.app-body .cardf{font-size:16px}

/* --- Uniform press feedback on the small controls --- */
.app-body .setdel:active,.app-body .rep-step:active,.app-body .setadd:active,
.app-body .wu-mark:active,.app-body .unit-chip:active,.app-body .ex-expand:active,
.app-body .coach-send:active,.app-body .coach-photobtn:active,
.app-body .exphotoread:active,.app-body .setwtoggle:active{transform:scale(.94)}

/* --- Kill sticky hover on touch (first tap must not leave a stuck state) --- */
@media (hover:none){
  .app-body .ex-expand:hover{color:#9db1c6}
  .app-body .wu-mark.wu-done:hover,.app-body .wu-mark.wu-skip:hover{border-color:rgba(255,255,255,.14);color:#c3d2e2}
  .app-body .setdel:hover,.app-body .rep-step:hover{color:inherit}
}

/* --- Finish-session celebration overlay --- */
.celebrate-overlay{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  background:rgba(8,16,28,.62);backdrop-filter:blur(3px);opacity:0;transition:opacity .26s ease}
.celebrate-overlay.show{opacity:1}
.celebrate-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.celebrate-card{position:relative;text-align:center;padding:26px 32px;border-radius:22px;
  background:linear-gradient(165deg,#123152,#0d2338);border:1px solid rgba(255,255,255,.10);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9);transform:scale(.9);
  transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.celebrate-overlay.show .celebrate-card{transform:scale(1)}
.celebrate-check svg{width:66px;height:66px}
.cc-ring{fill:none;stroke:var(--orange);stroke-width:3;stroke-dasharray:150;stroke-dashoffset:150;
  animation:cc-ring .5s ease forwards}
.cc-tick{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:40;stroke-dashoffset:40;animation:cc-tick .35s .32s ease forwards}
@keyframes cc-ring{to{stroke-dashoffset:0}}
@keyframes cc-tick{to{stroke-dashoffset:0}}
.celebrate-title{margin-top:12px;font-size:20px;font-weight:800;color:#fff;letter-spacing:-.3px}
.celebrate-sub{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.celebrate-sub span{font-size:14px;color:#ffb89c;font-weight:600}
@media (prefers-reduced-motion:reduce){
  .cc-ring,.cc-tick{animation:none;stroke-dashoffset:0}
  .celebrate-overlay,.celebrate-card{transition:none}
}

/* ============================================================
   update-125 - DESKTOP DASHBOARD LAYER
   Purely additive: one media query, scoped to .app-body.
   No base or mobile rule is touched, so >=1024px only. Reverts
   cleanly to update-124 (this whole block is removable).
   ============================================================ */
@media (min-width:1024px){

  /* 1. Persistent sidebar - reuses the existing top bar, no markup change */
  .app-body .topbar{
    position:fixed; inset:0 auto 0 0; width:256px; height:auto;
    flex-direction:column; align-items:stretch; gap:0;
    padding:20px 14px; border-bottom:0; border-right:1px solid var(--line);
    background:var(--surface); backdrop-filter:none;
  }
  .app-body .topbar-logo{height:28px; width:auto; align-self:flex-start; margin:4px 8px 20px}
  .app-body .topnav{flex-direction:column; gap:4px}
  .app-body .topnav a{width:100%; justify-content:flex-start; gap:12px;
    padding:11px 14px; border-radius:12px; font-size:15px}
  .app-body .topnav a svg{width:20px; height:20px}
  .app-body .topbar-spacer{flex:1 1 auto}
  .app-body .app-ver{margin:0 0 10px 10px; align-self:flex-start}
  .app-body .avatar{width:38px; height:38px; align-self:flex-start; margin-left:6px}

  /* 2. Wide content canvas - was a 760px centred strip */
  .app-body .content{max-width:1180px; margin:0 auto 0 256px; padding:34px 48px 64px}
  .app-body .page-title{font-size:2rem; margin-bottom:6px}

  /* 3. Progress -> KPI dashboard: dials block + a right-rail stat stack */
  .app-body .prog-summary{display:grid; grid-template-columns:2.2fr 1fr;
    gap:24px; align-items:start; padding:22px 24px}
  .app-body .prog-summary .prog-donuts-all{grid-column:1;
    display:flex;flex-wrap:wrap;justify-content:flex-start;gap:22px 18px; margin:0}
  .app-body .prog-summary .prog-donuts-all > *{flex:0 0 calc(33.333% - 12px)}
  .app-body .prog-summary .stat-grid{grid-column:2;
    grid-template-columns:1fr; gap:12px; align-self:stretch}
  .app-body .prog-summary .stat-tile{justify-content:center}

  /* 4. Training detail -> fluid card grid + right-side drawer (keeps grid in view) */
  .app-body .td-cards{display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px}
  .app-body .td-sheet{inset:0 0 0 auto; right:0; max-width:460px; margin:0;
    border-left:1px solid var(--line); box-shadow:-24px 0 60px -30px rgba(0,0,0,.8)}

  /* 5. Pointer affordances now that hover exists */
  .app-body .topnav a:hover{background:rgba(255,255,255,.06); color:var(--charcoal)}
  .app-body .topnav a.active{background:rgba(255,107,53,.16); color:var(--orange)}
  .app-body .stat-tile:hover,.app-body .prog-donut:hover{background:rgba(255,255,255,.08)}
}

/* ============================================================
   update-126 - VISUAL POLISH (tokens / type / depth / status)
   Additive; both themes. No structural placement changes.
   Reverts cleanly to update-125 (delete this block + revert the
   :root radius/status tokens and the .app-body palette values).
   ============================================================ */

/* --- Type: tabular numerals, tighter big numbers, calmer body, crisper labels --- */
.app-body{line-height:1.5}
.app-body .stat-tile b,.app-body .td-stat b,.app-body .td-best b,.app-body .pd-mid,
.app-body .setnum,.app-body .mach-date,.app-body .meas-val,.app-body .ci-range b,
.app-body .ob-range-val,.app-body .app-ver{font-variant-numeric:tabular-nums}
.app-body .stat-tile b,.app-body .td-stat b,.app-body .td-best b{letter-spacing:-.02em;font-weight:750}
.app-body .pnl-h,.app-body .panel-title,.app-body .td-sech,.app-body .sess-block h4{
  font-size:11px;letter-spacing:.14em;opacity:1}

/* --- Depth: inset top highlight (light-from-above glass) + radius ladder --- */
.app-body .panel,.app-body .card,.app-body .sess{
  box-shadow:inset 0 1px 0 var(--line-top),0 16px 40px -28px rgba(0,0,0,.9)}
.app-body .td-hero,.celebrate-card{border-radius:var(--radius-lg)}
.celebrate-overlay{backdrop-filter:blur(6px)}

/* --- Status: refined success/danger, legible on dark (light theme keeps its accessible values) --- */
.app-body{--ok:#34D399;--ok-bg:rgba(52,211,153,.14);--bad:#F87171;--bad-bg:rgba(248,113,113,.14)}
.app-body .done-mark,.app-body .open-green,.app-body .lib-has,
.app-body .wu-item.is-done .wu-name{color:var(--ok)}
.app-body .chip-green{background:var(--ok-bg);color:var(--ok)}
.app-body .wu-mark.wu-done.on{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.app-body .wu-mark.wu-skip.on{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
.app-body .exphotoread{background:#22A86A;border-color:#22A86A;color:#fff}
.app-body .exphotoread:hover{background:#1c9a5f;border-color:#1c9a5f}
.app-body .btn-danger{background:#E5484D;color:#fff}
.app-body .btn-danger:hover{background:#d13b40}
.app-body .danger-zone .pnl-h{color:var(--bad)}

/* --- Spacing: desktop breathing only (>=1024px; mobile untouched) --- */
@media (min-width:1024px){
  .app-body .panel{padding:24px;margin-bottom:20px}
  .app-body .prog-summary{padding:24px;gap:24px}
  .app-body .content{padding-top:32px}
}

/* --- Light site: two-layer navy-tinted shadow so cards feel tactile --- */
.card,.feature,.step{box-shadow:0 1px 2px rgba(15,41,66,.06),0 12px 32px -12px rgba(15,41,66,.16)}

/* ============================================================
   update-127 - Today hero stat row fix
   The three stats had a tinted background but no padding and no
   equal-width rule, so each tile shrink-wrapped its content to a
   different width and the fill sat flush against the text. Now:
   equal columns with hairline dividers, tabular numerals, graceful
   truncation. .app-body scoped, additive, reverts cleanly to 126.
   ============================================================ */
.app-body .wk-hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:18px 0}
.app-body .wk-hero-stat{background:none;border:none;box-shadow:none;border-radius:0;padding:2px 14px;min-width:0}
.app-body .wk-hero-stat:first-child{padding-left:0}
.app-body .wk-hero-stat + .wk-hero-stat{border-left:1px solid rgba(255,255,255,.12)}
.app-body .wk-hero-stat b{font-size:1.05rem;font-weight:750;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-body .wk-hero-stat span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============================================================
   update-129 - LANGUAGE SWITCHER (app dark + site light)
   ============================================================ */
.lang-switch{position:relative;flex:0 0 auto}
.lang-btn{width:44px;height:44px;border-radius:12px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;border:1px solid var(--line);
  background:var(--ice);cursor:pointer;padding:0;
  transition:background .15s ease,transform .15s ease}
.app-body .lang-btn{background:var(--surface-2)}
.lang-btn:hover{background:rgba(15,41,66,.08)}
.app-body .lang-btn:hover{background:rgba(255,255,255,.09)}
.lang-btn:active{transform:scale(.94)}
.lang-flag{font-size:14px;line-height:1}
.lang-code{font-size:9.5px;font-weight:750;letter-spacing:.08em;color:var(--slate)}
.lang-menu{position:absolute;top:50px;left:0;min-width:108px;padding:6px;border-radius:14px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(-6px) scale(.97);pointer-events:none;
  transition:opacity .15s ease,transform .15s ease;z-index:150}
.app-body .lang-menu{background:var(--surface);
  box-shadow:inset 0 1px 0 var(--line-top),0 20px 44px -20px rgba(0,0,0,.85)}
.lang-switch.open .lang-menu{opacity:1;transform:none;pointer-events:auto}
.lang-menu button{width:100%;display:flex;gap:8px;align-items:center;padding:9px 10px;
  border-radius:9px;border:0;background:none;color:var(--charcoal);font:inherit;
  font-size:.9rem;font-weight:600;cursor:pointer}
.lang-menu button:hover,.lang-menu button[aria-selected="true"]{
  background:rgba(255,107,53,.14);color:var(--orange)}
/* app topbar placement: sits between logo and nav on mobile; in the desktop
   sidebar it becomes a row item under the logo automatically (column flex) */
.topbar .lang-switch{margin-left:10px}
@media (min-width:1024px){
  .app-body .topbar .lang-switch{margin:0 0 14px 6px;align-self:flex-start}
}
/* German/Turkish expansion guards: give wrapping room without moving EN layout */
:lang(de) .bottomnav a span,:lang(tr) .bottomnav a span{font-size:9px;letter-spacing:0}
:lang(de) .qa-tile,:lang(tr) .qa-tile{min-height:96px}
:lang(de) .mode-btn,:lang(tr) .mode-btn{min-height:64px}

/* ============================================================
   update-130 - switcher fixes: SVG flags + site-header placement
   ============================================================ */
.lang-flag svg{width:18px;height:12px;border-radius:2px;display:block}
.lang-menu .lang-flag{display:inline-flex}
/* site header is space-between; pin the switcher to the logo cluster
   instead of letting it float to the centre */
.site-header .lang-switch{margin-left:14px;margin-right:auto}
.site-header .lang-menu{background:#fff}
@media (max-width:759px){ .site-header .lang-switch{margin-left:8px} }

/* ============================================================
   update-133 - MY MEALS (saved foods) + describe-with-AI
   ============================================================ */
.mymeals-strip{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.mymeals-strip::-webkit-scrollbar{display:none}
.mymeal-chip{flex:0 0 auto;min-height:44px;padding:10px 16px;border-radius:999px;
  border:none;background:rgba(255,255,255,.07);color:var(--charcoal,#eaf1f9);
  font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background .15s ease,transform .15s ease}
.app-body .mymeal-chip:hover{background:rgba(255,255,255,.11)}
.app-body .mymeal-chip:active{transform:scale(.95)}
.mymeal-saverow{display:flex;gap:8px;align-items:stretch;margin:10px 0 12px}
.mymeal-saverow .ob-input{flex:1;min-width:0}
.mymeal-saverow .btn{flex:0 0 auto;white-space:nowrap;min-height:44px}
#foodDescribe{margin-bottom:8px}

/* ============================================================
   update-134 - searchable combo (exercise picker + My meals)
   ============================================================ */
.combo{position:relative;margin:6px 0 10px}
.combo-btn{width:100%;text-align:left;cursor:pointer}
.combo-panel{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:80;
  border-radius:14px;background:var(--surface,#fff);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--line-top,rgba(255,255,255,.12)),0 20px 44px -20px rgba(0,0,0,.7);
  padding:8px;max-height:290px;display:flex;flex-direction:column}
.combo-search{margin-bottom:8px;font-size:16px}
.combo-list{overflow-y:auto;-webkit-overflow-scrolling:touch}
.combo-opt{display:block;width:100%;text-align:left;border:none;background:none;
  color:var(--charcoal);font:inherit;font-size:.92rem;padding:12px 10px;min-height:44px;
  border-radius:9px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.app-body .combo-opt:hover{background:rgba(255,255,255,.07)}
.combo-opt:active{background:rgba(255,107,53,.14)}

/* update-135 - combo fixes: hidden must win over display:flex; dark button */
.combo-panel[hidden]{display:none !important}
.app-body .combo-btn{background:var(--field);color:var(--charcoal);border:1px solid var(--line)}
.app-body .combo-btn:hover{background:rgba(255,255,255,.06)}

/* update-136 - combo: search filter must actually hide options; chevron affordance */
.combo-opt[hidden]{display:none !important}
.combo-btn{position:relative;padding-right:38px}
.combo-btn::after{content:"";position:absolute;right:14px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--slate);border-bottom:2px solid var(--slate);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}

/* update-137 - desktop: pills as labeled 2x5 grid; mobile strip unchanged */
.mymeals-label{display:none}
@media (min-width:1024px){
  .app-body .mymeals-label{display:block;font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--slate);margin:2px 0 8px}
  .app-body .mymeals-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    gap:8px;overflow:visible;padding-bottom:12px}
  .app-body .mymeals-strip .mymeal-chip{width:100%;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;text-align:center}
}

/* update-140 - My meals CRUD */
.mm-rowbtns{display:flex;gap:6px;flex:0 0 auto}
.mm-form{padding:12px 0;border-bottom:1px solid var(--line)}
.mm-form-btns{display:flex;gap:8px;margin-top:10px}
.mm-form-btns .btn{min-height:44px}
#mmAddHost .mm-form{border-bottom:none;border-radius:14px;background:rgba(255,255,255,.04);padding:14px;margin:10px 0}





/* update-143 - single 3x3 donut grid (3-col desktop, 2-col mobile) */
.app-body .prog-donuts-all{display:flex;flex-wrap:wrap;justify-content:center;
  gap:20px 14px;max-width:none;margin:0}
.app-body .prog-donuts-all > *{flex:0 0 calc(33.333% - 10px);display:flex;justify-content:center}
.app-body .prog-donuts-all .prog-donut{margin:0}
.app-body .prog-donuts-all .prog-donut:hover{background:none}

/* update-147 - per-exercise skip */
.ex-skiprow{display:flex;align-items:center;gap:10px;margin:2px 0 6px}
.ex-skiptag{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--slate);background:rgba(255,255,255,.06);border-radius:6px;padding:2px 8px}
.app-body .ex.is-skipped{opacity:.6}
.app-body .ex.is-skipped .ex-h b{text-decoration:line-through;text-decoration-color:var(--slate)}

/* update-148 - cardio log grid overflow: keep unit-chip cells inside the grid */
.app-body .loggrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.app-body .loggrid .exf,.app-body .loggrid .exf-u{min-width:0;max-width:100%}
.app-body .exf-u .unit-chip{flex:0 0 auto;white-space:nowrap;padding:0 8px}

/* update-151 - log row heft, addex cancel X, calorie row, 7-dial grid */
.app-body .exf{min-height:44px;padding:10px 12px;font-size:16px;
  background:var(--field);border:1px solid var(--line);border-radius:12px;color:var(--charcoal)}
.app-body .loggrid{gap:10px}
.cal-row{display:flex;align-items:center;gap:10px;margin:8px 0 4px;flex-wrap:wrap}
.cal-row .cal-cell{max-width:150px}
.cal-row .cal-cell .cal-in{max-width:none}
.cal-row .cal-msg{font-size:.82rem;color:var(--slate)}
/* 7 dials: rows of 3, last row centers itself via grid auto-placement */

/* update-153 - calorie detail page */
.cal-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:640px){ .cal-summary{grid-template-columns:repeat(4,1fr)} }
.cal-sum-tile{background:var(--field);border:1px solid var(--line);border-radius:14px;padding:14px;text-align:center}
.cal-sum-num{display:block;font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--charcoal)}
.cal-sum-lbl{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);margin-top:4px}
.cal-surplus{color:#f6a04d}
.cal-deficit{color:#4fd18b}
.cal-legend{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--slate);margin-bottom:12px}
.cal-key{width:12px;height:12px;border-radius:3px;display:inline-block}
.cal-key-in{background:var(--orange)}
.cal-key-out{background:#4fd18b;margin-left:12px}
.cal-bars{display:flex;flex-direction:column;gap:12px}
.cal-bar-row{display:grid;grid-template-columns:84px 1fr 52px;align-items:center;gap:10px}
.cal-bar-day{font-size:.78rem;color:var(--slate);white-space:nowrap}
.cal-bar-track{display:flex;flex-direction:column;gap:4px;min-width:0}
.cal-bar{height:9px;border-radius:5px;min-width:2px;transition:width .4s ease}
.cal-bar-in{background:var(--orange)}
.cal-bar-out{background:#4fd18b}
.cal-bar-net{font-size:.82rem;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.cal-note{margin-top:2px}

/* update-155 - labeled log fields */
.exf-cell{display:flex;flex-direction:column;gap:5px;min-width:0}
.exf-cell .exf-u{margin:0}
.exf-lbl{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);
  padding-left:2px;font-weight:600}
.app-body .loggrid{align-items:end}


/* update-157 - add-exercise: visible cancel X + seg overflow fix */
/* Type selector has 5 options - let it wrap to a second row instead of overrunning the pill */
.app-body #addExKind,.app-body #libNewKind{display:flex;flex-wrap:wrap;gap:6px;background:none;padding:0;border-radius:0}
.app-body #addExKind button,.app-body #libNewKind button{flex:0 0 auto;background:var(--field);border:1px solid var(--line);border-radius:999px}
.app-body #addExKind button.on,.app-body #libNewKind button.on{background:#fff;color:var(--navy)}
/* make the cancel X unmistakable and out of the flow's way */

/* update-158 - steps calories: page bar segment + check-in field */
.cal-key-steps{background:#7cc4ff;margin-left:12px}
.cal-bar-burn{display:flex;gap:2px;min-width:0}
.cal-bar-steps{background:#7cc4ff}
.ci-steps{max-width:160px}
.ci-steps-cal{display:inline-block;margin-left:10px;font-size:.85rem}


/* update-159 - add-exercise cancel X: own header row, red circular button */
.addex-head{display:flex;justify-content:flex-end;margin:0 0 6px}
.addex-x{width:36px;height:36px;border:none;border-radius:50%;
  background:rgba(220,60,60,.14);color:#ff6b6b;font-size:16px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.app-body .addex-x:hover{background:rgba(220,60,60,.24)}
.app-body .addex-x:active{transform:scale(.92)}

/* update-159 - mobile: breathing room under the kcal dial before stat tiles */
.app-body .prog-donuts-all{padding-bottom:8px}
@media (min-width:1024px){ .app-body .prog-summary .prog-donuts-all{padding-bottom:0} }

/* update-160 - clickable calorie summary tiles */
.cal-sum-link{cursor:pointer;font:inherit;text-align:center;position:relative;
  transition:background .15s ease,transform .15s ease}
.app-body .cal-sum-link:hover{background:rgba(255,255,255,.05)}
.app-body .cal-sum-link:active{transform:scale(.98)}
.cal-sum-cta{display:block;font-size:.68rem;color:var(--orange);margin-top:6px;
  text-transform:uppercase;letter-spacing:.04em;font-weight:700}

/* update-160 - native date/time inputs: dark-theme chrome + consistent styling */
.app-body input[type="date"],
.app-body input[type="time"]{color-scheme:dark;background:var(--field);color:var(--charcoal);
  border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:inherit;font-size:16px;min-height:44px}
.app-body .foodlog-datewrap input,
.app-body .food-time,
.app-body .foodmeal-time{color-scheme:dark;background:var(--field);color:var(--charcoal);border:1px solid var(--line)}
.app-body input[type="date"]::-webkit-calendar-picker-indicator,
.app-body input[type="time"]::-webkit-calendar-picker-indicator{filter:invert(.7);cursor:pointer;opacity:.8}
.app-body input[type="date"]::-webkit-datetime-edit,
.app-body input[type="time"]::-webkit-datetime-edit{color:var(--charcoal)}
/* the plan startDate input (Builder) too */
.app-body #startDate{color-scheme:dark}

/* update-161 - Food diary */
.food-diary-link{margin-bottom:14px}
.diary-wins{display:flex;gap:8px;margin-bottom:14px}
.diary-win{min-height:40px;padding:8px 18px;border-radius:999px;border:1px solid var(--line);
  background:var(--field);color:var(--slate);font:inherit;font-weight:600;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.app-body .diary-win.on{background:var(--orange);color:#fff;border-color:transparent}
.diary-day{padding:0}
.diary-day-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:16px 18px;cursor:pointer;list-style:none}
.diary-day-h::-webkit-details-marker{display:none}
.diary-day-name{font-weight:700;color:var(--charcoal)}
.diary-day-tot{font-size:.84rem;color:var(--slate);font-variant-numeric:tabular-nums;text-align:right}
.diary-meals{padding:0 18px 16px;display:flex;flex-direction:column;gap:12px}
.diary-meal{border-left:2px solid var(--line);padding:2px 0 2px 12px}
.diary-meal-top{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.diary-meal-time{font-size:.76rem;color:var(--slate);font-variant-numeric:tabular-nums}
.diary-meal-name{font-weight:600;color:var(--charcoal)}
.diary-meal-macros{font-size:.82rem;color:var(--slate);font-variant-numeric:tabular-nums;margin-top:2px}
.diary-meal-note{font-size:.8rem;color:var(--slate);font-style:italic;margin-top:3px}

/* update-162 - diverging net-balance calorie chart */
.cal-key-def{background:#4fd18b}
.cal-key-sur{background:var(--orange);margin-left:12px}
.cal-diverge{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.cal-dv-row{display:grid;grid-template-columns:84px 1fr 52px;align-items:center;gap:10px;
  background:none;border:none;padding:4px 0;cursor:pointer;width:100%;font:inherit;text-align:left}
.cal-dv-day{font-size:.78rem;color:var(--slate);white-space:nowrap}
.cal-dv-track{position:relative;height:16px;background:var(--field);border-radius:8px;overflow:hidden}
.cal-dv-zero{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line);transform:translateX(-.5px);z-index:1}
.cal-dv-bar{position:absolute;top:2px;bottom:2px;border-radius:6px;min-width:2px;transition:width .35s ease}
.cal-dv-sur{background:var(--orange)}
.cal-dv-def{background:#4fd18b}
.cal-dv-net{font-size:.82rem;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.cal-dv-detail{display:flex;gap:14px;flex-wrap:wrap;font-size:.78rem;color:var(--slate);
  padding:2px 0 8px 94px;font-variant-numeric:tabular-nums}
.cal-dv-hint{font-size:.76rem;margin-top:10px}

/* update-163 - detail page back button */
.detail-back{margin-bottom:12px}

/* update-164 - AI thinking state: typing dots + skeleton shimmer */
.ai-dots{display:inline-flex;align-items:center;gap:4px;height:1em}
.ai-dots i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5;
  animation:ai-dot 1.2s infinite ease-in-out}
.ai-dots i:nth-child(2){animation-delay:.18s}
.ai-dots i:nth-child(3){animation-delay:.36s}
@keyframes ai-dot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.ai-thinking-panel{overflow:hidden}
.ai-thinking-head{display:flex;align-items:center;gap:12px;color:var(--orange)}
.ai-thinking-head h3{margin:0}
.ai-thinking-sub{color:var(--slate);margin:8px 0 18px}
.ai-skel{display:flex;flex-direction:column;gap:12px}
.ai-skel-line,.ai-skel-card{border-radius:10px;
  background:linear-gradient(100deg,var(--field) 30%,rgba(255,255,255,.08) 50%,var(--field) 70%);
  background-size:200% 100%;animation:ai-shimmer 1.4s infinite linear}
.ai-skel-line{height:14px}
.ai-skel-line.w80{width:80%}
.ai-skel-line.w60{width:60%}
.ai-skel-card{height:60px;margin-top:6px}
@keyframes ai-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){
  .ai-dots i,.ai-skel-line,.ai-skel-card{animation:none}
  .ai-dots i{opacity:.6}
}

/* update-165 - German overflow sweep: let text-bearing controls grow/wrap */
.app-body .mark-complete,.app-body .hist-restore{white-space:normal;height:auto;min-height:44px;line-height:1.2}
.app-body .sess-progress-lbl{white-space:normal;text-align:right}
/* day-name columns: give longer localized dates room and let them wrap rather than clip */
.app-body .cal-bar-row,.app-body .cal-dv-row{grid-template-columns:minmax(84px,32%) 1fr 52px}
.app-body .cal-bar-day,.app-body .cal-dv-day{white-space:normal;line-height:1.15}

/* update-167 - itemised photo-read draft */
.fitems{grid-column:1 / -1;background:var(--field);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.fitems-title{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);font-weight:600}
.fitem{display:flex;flex-direction:column;gap:8px;padding:10px 0;border-top:1px solid var(--line)}
.fitem:first-of-type{border-top:none}
.fitem-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fitem-name{color:var(--charcoal);font-size:.9rem;min-width:0;overflow-wrap:anywhere;font-weight:600}
.fitem-name em{color:var(--slate);font-style:normal;font-size:.8rem;font-weight:400}
.fitem-x{width:28px;height:28px;flex:0 0 auto;border:none;border-radius:50%;background:rgba(220,60,60,.14);color:#ff6b6b;
  font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.app-body .fitem-x:active{transform:scale(.9)}
.fitem-fields{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.fitem-f{display:flex;flex-direction:column;gap:3px}
.fitem-f span{font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);font-weight:600;padding-left:2px}
.fitem-in{min-height:40px;padding:8px 10px;font-size:16px;background:var(--field);border:1px solid var(--line);
  border-radius:10px;color:var(--charcoal);width:100%;min-width:0}

/* update-172 - strength session count label */
.str-count{font-size:.76rem;color:var(--slate);margin:0;flex:0 1 auto;min-width:0;overflow-wrap:anywhere}


/* update-174 - steps count under the steps-burn tile */
.cal-sum-sub{display:block;font-size:.72rem;color:var(--slate);font-variant-numeric:tabular-nums;margin-top:2px}

/* update-178 - explicit consent screen */
.consent-panel{display:flex;flex-direction:column;gap:14px}
.consent-lead{margin:0;color:var(--charcoal);font-size:.94rem;line-height:1.55}
.consent-item{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--line);
  border-radius:12px;background:var(--field);cursor:pointer}
.consent-item input{width:22px;height:22px;flex:0 0 auto;margin-top:2px;accent-color:var(--orange)}
.consent-item span{font-size:.9rem;line-height:1.5;color:var(--charcoal)}
.consent-fine{margin:0;font-size:.82rem;line-height:1.5;color:var(--slate)}
.consent-fine a{color:var(--orange)}
.consent-msg{min-height:1em}

/* update-179 - support form slide-over sheet */
body.sheet-open{overflow:hidden}
.sheet-wrap{position:fixed;inset:0;z-index:9000;display:flex;align-items:flex-end;justify-content:center}
.sheet-backdrop{position:absolute;inset:0;background:rgba(4,10,18,.62);opacity:0;transition:opacity .22s ease}
.sheet-wrap.is-in .sheet-backdrop{opacity:1}
.sheet{position:relative;width:100%;height:calc(100dvh - 34px);background:var(--surface,#0F1E2E);
  border-radius:20px 20px 0 0;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 -18px 60px rgba(0,0,0,.5);transform:translateY(100%);transition:transform .26s cubic-bezier(.32,.72,0,1)}
.sheet-wrap.is-in .sheet{transform:translateY(0)}
.sheet-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;background:#0F2942;color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.sheet-head b{font-size:.98rem}
.sheet-x{width:36px;height:36px;flex:0 0 auto;border:none;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.sheet-x:active{transform:scale(.92)}
.sheet-frame{flex:1 1 auto;width:100%;border:0;background:#fff}
@media (min-width:1024px){
  .sheet-wrap{align-items:center}
  .sheet{width:min(720px,92vw);height:min(860px,88vh);border-radius:18px;
    transform:translateY(16px) scale(.98);opacity:0;transition:transform .22s ease,opacity .22s ease}
  .sheet-wrap.is-in .sheet{transform:translateY(0) scale(1);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .sheet,.sheet-backdrop{transition:none}
}

/* update-180 - company details in site footers */
.footer-co{opacity:.72;font-size:.8rem;margin-top:2px}

/* update-182 - warm-up/cool-down video+notes couldn't collapse: .wu-body sets
   display:flex, which beats the UA [hidden] default, so toggling the hidden
   attribute had no visual effect. Add the [hidden] guard (UI invariant #1, S28/S30). */
.wu-body[hidden]{display:none !important}

/* update-184 - food logging Save/Clear row (Clear resets the entry form) */
.food-saverow{display:flex;gap:8px;align-items:stretch;margin-top:4px}
.food-saverow .btn{min-height:44px}
.food-saverow #foodSaveBtn{flex:1}
.food-saverow #foodClearBtn{flex:0 0 auto;white-space:nowrap}

/* update-186 - food time-of-day mismatch warning */
.food-warn{display:block;color:#f5a524;font-weight:600;margin-bottom:6px}

/* update-187 - offline write-queue status chip. Fixed above the bottom nav,
   silent unless work is waiting for signal. */
.sync-chip{position:fixed;left:50%;transform:translateX(-50%) translateY(8px);
  bottom:calc(72px + env(safe-area-inset-bottom,0px));z-index:60;
  max-width:min(92vw,420px);text-align:center;
  padding:8px 14px;border-radius:999px;font-size:.78rem;font-weight:600;
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.sync-chip.is-in{opacity:1;transform:translateX(-50%) translateY(0)}
.sync-chip.is-queued{background:rgba(245,165,36,.16);color:#8a5a00;border:1px solid rgba(245,165,36,.4)}
.sync-chip.is-saved{background:rgba(52,199,123,.14);color:#1a6b42;border:1px solid rgba(52,199,123,.35)}
.app-body .sync-chip.is-queued{background:rgba(245,165,36,.18);color:#f5a524;border-color:rgba(245,165,36,.45)}
.app-body .sync-chip.is-saved{background:rgba(52,199,123,.16);color:#4ade80;border-color:rgba(52,199,123,.4)}
@media (prefers-reduced-motion:reduce){.sync-chip{transition:none}}

/* update-188 - rest timer + gym-floor contrast ------------------------------
   Timer: absolute-deadline countdown that appears under the set you just
   logged. Big targets, tabular numerals, readable at arm's length. */
.rest-bar{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;
  margin:8px 0;padding:10px 12px;border-radius:12px;
  background:rgba(255,107,53,.12);border:1px solid rgba(255,107,53,.35)}
.rest-fill{position:absolute;left:0;top:0;bottom:0;width:100%;
  background:rgba(255,107,53,.16);transition:width .25s linear;pointer-events:none}
.rest-num{position:relative;font-variant-numeric:tabular-nums;font-size:1.5rem;
  font-weight:800;min-width:74px;letter-spacing:.02em}
.rest-bar .rest-add,.rest-bar .rest-skip{position:relative;min-height:44px;min-width:66px;
  border-radius:10px;border:1px solid var(--line);background:transparent;
  font:inherit;font-weight:700;cursor:pointer}
.rest-bar.rest-done{background:rgba(52,199,123,.2);border-color:rgba(52,199,123,.5);
  animation:restpulse .5s ease 2}
.rest-bar.rest-done .rest-fill{width:100% !important;background:rgba(52,199,123,.18)}
@keyframes restpulse{50%{transform:scale(1.015)}}
@media (prefers-reduced-motion:reduce){
  .rest-bar.rest-done{animation:none}
  .rest-fill{transition:none}
}
/* dark theme via CLASSES only (UI invariant #2) */
.app-body .rest-bar{background:rgba(255,107,53,.16);border-color:rgba(255,107,53,.45)}
.app-body .rest-num{color:#ffb59a}
.app-body .rest-bar .rest-add,.app-body .rest-bar .rest-skip{
  color:#ffd9cd;border-color:rgba(255,107,53,.5)}
.app-body .rest-bar.rest-done{background:rgba(52,199,123,.22);border-color:rgba(52,199,123,.55)}
.app-body .rest-bar.rest-done .rest-num{color:#7ef0ac}

/* Contrast: logging labels are read mid-set under glaring overheads, so lift
   them well clear of the muted chrome tone. Chrome/secondary text unchanged. */
.app-body .setrow-head{color:#c8d2de}
.app-body .exf-lbl{color:#c8d2de}

/* update-189 - the topbar logo is now a link to the public site. Keep the exact
   previous sizing/layout: the anchor takes the .topbar-logo box (incl. the
   desktop sidebar's align-self rule) and the image fills it. */
a.topbar-logo{display:block;line-height:0;flex:0 0 auto}
a.topbar-logo img{height:100%;width:auto;display:block}

/* update-189 - landing gym showcase band.
   NOTE (189b): the hero ends with padding-bottom:0 (its pulse strip runs to the
   edge), so this band MUST bring its own top padding or the photo collides with
   the hero above. Follow the page rhythm (section = 84px) rather than zeroing it. */
.gym-band{padding:72px 0 8px}
.gym-shot{margin:0;position:relative}
.gym-shot img{width:100%;height:auto;display:block;border-radius:18px;
  box-shadow:0 18px 40px rgba(15,41,66,.16),0 2px 6px rgba(15,41,66,.08)}
.gym-shot figcaption{margin-top:12px;text-align:center;color:var(--slate);font-size:15px}
@media (max-width:640px){
  .gym-band{padding:44px 0 4px}
  .gym-shot img{border-radius:12px}
  .gym-shot figcaption{font-size:14px;padding:0 6px}
}

/* update-190 - per-set RPE (effort) chips -----------------------------------
   Optional, collapsed by default so the set row stays uncluttered mid-set.
   Labels state reps-in-reserve so the number explains itself. */
.setblock{display:block}
.rpe-wrap{margin:2px 0 8px 34px}
.rpe-toggle{min-height:34px;padding:4px 12px;border-radius:999px;border:1px dashed var(--line);
  background:transparent;font:inherit;font-size:.78rem;font-weight:600;color:var(--slate);cursor:pointer}
.rpe-toggle.has{border-style:solid;border-color:var(--orange);color:var(--orange)}
.rpe-opts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.rpe-opts[hidden]{display:none !important}          /* UI invariant #1 */
.rpe-opt{min-height:44px;min-width:56px;padding:4px 8px;border-radius:10px;
  border:1px solid var(--line);background:transparent;font:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15}
.rpe-opt b{font-size:1rem;font-variant-numeric:tabular-nums}
.rpe-opt span{font-size:.66rem;opacity:.75}
.rpe-opt.on{border-color:var(--orange);background:rgba(255,107,53,.12)}
.rpe-clear{min-width:64px}
/* dark theme targets CLASSES only (UI invariant #2) */
.app-body .rpe-toggle{color:#c8d2de;border-color:rgba(255,255,255,.22)}
.app-body .rpe-toggle.has{color:#ffb59a;border-color:rgba(255,107,53,.6)}
.app-body .rpe-opt{color:#e8eef5;border-color:rgba(255,255,255,.22)}
.app-body .rpe-opt.on{border-color:rgba(255,107,53,.75);background:rgba(255,107,53,.18);color:#ffd9cd}
.app-body .rpe-opt span{opacity:.8}
/* Progress: average effort readout */
.str-rpe{font-size:.72rem;font-weight:600;opacity:.85;margin-left:6px}
.app-body .str-rpe{color:#ffb59a;opacity:1}

/* update-192 - drop set button (sits beside Add set) */
.setdrop{white-space:nowrap}
.app-body .setdrop{color:#ffb59a;border-color:rgba(255,107,53,.4);background:transparent}
.app-body .setdrop:active{transform:scale(.94)}

/* update-193 - progression chooser (per movement) */
.prog-panel{margin:8px 0 4px;padding:10px;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;gap:8px}
.prog-panel[hidden]{display:none !important}
.prog-h{font-size:.78rem;font-weight:700;opacity:.85}
.prog-last{font-weight:600;opacity:.7}
.prog-opt{border:1px solid var(--line);border-radius:10px;padding:8px 10px;cursor:pointer}
.prog-opt.on{border-color:var(--orange);background:rgba(255,107,53,.1)}
.prog-opt-h{display:flex;flex-direction:column;gap:2px}
.prog-opt-h b{font-size:.9rem}
.prog-opt-h span{font-size:.72rem;opacity:.75;line-height:1.25}
.prog-manual{display:flex;align-items:center;gap:8px;margin-top:8px}
.prog-step{min-width:44px;min-height:44px;border-radius:10px;border:1px solid var(--line);background:transparent;font:inherit;font-size:1.1rem;font-weight:700;cursor:pointer}
.prog-val{flex:1;min-width:0;padding:10px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:16px;text-align:center;font-variant-numeric:tabular-nums;background:var(--field,#fff)}
.prog-u{font-size:.85rem;font-weight:700;opacity:.8}
.prog-hint{font-size:.7rem;opacity:.7;margin-top:6px}
.app-body .prog-panel{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.03)}
.app-body .prog-opt{border-color:rgba(255,255,255,.18);color:#e8eef5}
.app-body .prog-opt.on{border-color:rgba(255,107,53,.7);background:rgba(255,107,53,.16)}
.app-body .prog-step{color:#e8eef5;border-color:rgba(255,255,255,.22)}
.app-body .setprog{color:#ffb59a;border-color:rgba(255,107,53,.4);background:transparent}

/* =====================================================================
   update-194 - "Kinetic Pulse v2" landing redesign.
   Scoped to body.kin so NOTHING here can reach the app (.app-body) or the
   guide/privacy/support pages. System fonts only; no font downloads.
   ===================================================================== */
body.kin{background:#0a1d2f;color:var(--charcoal)}
body.kin .wrap{max-width:1200px}
body.kin .eyebrow{display:inline-flex;align-items:center;gap:10px;letter-spacing:.22em}
body.kin .eyebrow::before{content:"";width:26px;height:2px;background:var(--orange)}

/* reveal-on-scroll (driven by /site-fx.js) */
body.kin .rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
body.kin .rv.in{opacity:1;transform:none}
body.kin .rv-d1{transition-delay:.08s}
body.kin .rv-d2{transition-delay:.16s}
body.kin .rv-d3{transition-delay:.24s}

/* ---- top bar ---- */
body.kin .kbar{position:fixed;inset:0 0 auto 0;z-index:50;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(10,29,47,.55);border-bottom:1px solid rgba(255,255,255,.08)}
body.kin .kbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;height:60px;padding-top:0;padding-bottom:0}
body.kin .kbrand{display:flex;align-items:center;gap:10px;white-space:nowrap}
body.kin .kbrand-mark{width:30px;height:30px;border-radius:8px;background:var(--navy);display:grid;place-items:center;border:1px solid rgba(255,255,255,.16)}
body.kin .kbrand-mark svg{width:20px;height:14px}
body.kin .kbrand-txt{font-weight:800;color:#fff;letter-spacing:-.01em}
body.kin .kbrand-txt span{color:var(--orange)}
body.kin .knav{display:flex;align-items:center;gap:22px}
body.kin .knav-txt{color:#c6d3e0;font-size:14px;font-weight:600}
body.kin .knav-txt:hover{color:#fff}
body.kin .kbar-cta{font-weight:700;font-size:14px;color:#fff;background:var(--orange);padding:10px 18px;border-radius:999px;
  box-shadow:0 6px 20px rgba(255,107,53,.35);transition:transform .15s ease,box-shadow .15s ease;white-space:nowrap}
body.kin .kbar-cta:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(255,107,53,.45)}

/* ---- display type ---- */
body.kin .k-display{font-weight:900;text-transform:uppercase;font-size:clamp(52px,10vw,128px);line-height:.92;letter-spacing:-.035em;margin:18px 0 0}
body.kin .k-h2{font-weight:900;text-transform:uppercase;font-size:clamp(32px,5vw,60px);line-height:.96;letter-spacing:-.03em}
body.kin .k-h2.dark{color:var(--navy)}
body.kin .krow{display:block}
body.kin .kghost{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.35)}
body.kin .khl{color:var(--orange)}
body.kin .kyou{background:linear-gradient(100deg,var(--orange) 20%,#ff8a5c 40%,#ffd9cd 50%,#ff8a5c 60%,var(--orange) 80%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:kinsheen 5.5s ease-in-out infinite}
@keyframes kinsheen{0%,100%{background-position:0% 0}50%{background-position:100% 0}}

/* ---- buttons ---- */
body.kin .kbtn{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:17px;color:#fff;background:var(--orange);
  padding:16px 30px;border-radius:999px;min-height:52px;box-shadow:0 10px 34px rgba(255,107,53,.4);
  transition:transform .18s ease,box-shadow .18s ease}
body.kin .kbtn svg{width:18px;height:18px;transition:transform .18s ease}
body.kin .kbtn:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(255,107,53,.5)}
body.kin .kbtn:hover svg{transform:translateX(3px)}
body.kin .kbtn-quiet{font-weight:600;font-size:15px;color:#c6d3e0;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:2px}
body.kin .kbtn-quiet:hover{color:#fff;border-color:var(--orange)}

/* ---- hero ---- */
body.kin .khero{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(1400px 700px at 78% -20%, var(--navy-700), transparent 60%),
             radial-gradient(900px 500px at -10% 110%, #123252, transparent 55%), #0a1d2f}
body.kin .khero::before{content:"FA";position:absolute;right:-4vw;top:-6vw;z-index:0;font-weight:900;font-size:44vw;line-height:1;
  letter-spacing:-.06em;color:rgba(255,255,255,.025);pointer-events:none;user-select:none}
body.kin .khero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:repeat(12,1fr);gap:24px;
  padding-top:132px;padding-bottom:0;align-items:end}
body.kin .khero-copy{grid-column:1/9;padding-bottom:72px}
body.kin .klede{margin-top:22px;font-size:clamp(16px,1.9vw,19px);color:#b9c6d4;max-width:46ch}
body.kin .khero-cta{display:flex;gap:18px;margin-top:30px;flex-wrap:wrap;align-items:center}
body.kin .kclinic{margin-top:26px;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;
  color:#93a5b6;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:7px 14px}
body.kin .kclinic b{color:#dfe7ee}

/* the heartbeat, beating */
body.kin .kpulse{position:absolute;left:0;right:0;bottom:110px;z-index:0;pointer-events:none;opacity:.9}
body.kin .kpulse svg{width:100%;height:110px;display:block}
body.kin .kpl-base{stroke:rgba(255,107,53,.22);stroke-width:2;fill:none}
body.kin .kpl-beat{stroke:var(--orange);stroke-width:3;fill:none;stroke-linecap:round;
  stroke-dasharray:220 1400;stroke-dashoffset:1620;filter:drop-shadow(0 0 6px rgba(255,107,53,.65));
  animation:kinbeat 3.6s linear infinite}
@keyframes kinbeat{to{stroke-dashoffset:0}}

/* CSS phone mockup */
body.kin .khero-phone{grid-column:9/13;position:relative;z-index:2;align-self:end;transform:rotate(4deg) translateY(34px)}
body.kin .kphone{width:min(300px,100%);margin-left:auto;border-radius:38px;padding:12px;
  background:linear-gradient(160deg,#233c57,#0c2036);border:1px solid rgba(255,255,255,.18);
  box-shadow:0 40px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.25)}
body.kin .kphone-scr{border-radius:28px;overflow:hidden;background:#0d1b2a;border:1px solid rgba(255,255,255,.06)}
body.kin .kps-top{display:flex;justify-content:space-between;align-items:center;padding:12px 14px 8px;color:#8fa2b3;font-family:var(--font-mono);font-size:10px}
body.kin .kps-title{padding:2px 14px 10px;color:#fff;font-weight:800;font-size:15px}
body.kin .kps-card{margin:0 10px 10px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);padding:10px 12px}
body.kin .kps-ex{display:flex;justify-content:space-between;align-items:center;color:#e8eef5;font-size:12.5px;font-weight:700}
body.kin .kps-meta{color:#8fa2b3;font-family:var(--font-mono);font-size:10px;margin-top:2px}
body.kin .kps-set{display:flex;gap:6px;margin-top:8px}
body.kin .kps-pill{flex:1;text-align:center;background:rgba(255,255,255,.07);border-radius:8px;padding:6px 0;color:#fff;font-size:11.5px;font-variant-numeric:tabular-nums}
body.kin .kps-rpe{margin-top:7px;display:inline-block;font-size:10px;color:#ff8a5c;border:1px solid rgba(255,107,53,.5);border-radius:999px;padding:3px 9px}
body.kin .kps-rest{margin:0 10px 12px;border-radius:12px;background:rgba(255,107,53,.14);border:1px solid rgba(255,107,53,.4);
  display:flex;align-items:center;gap:10px;padding:9px 12px;position:relative;overflow:hidden}
body.kin .kps-fill{position:absolute;inset:0;width:64%;background:rgba(255,107,53,.16);animation:kindrain 8s linear infinite}
@keyframes kindrain{from{width:100%}to{width:0%}}
body.kin .kps-rest b{position:relative;color:#ffb59a;font-variant-numeric:tabular-nums;font-size:17px}
body.kin .kps-rest span{position:relative;color:#c6d3e0;font-size:10.5px}

/* ---- photo band with glass stats ---- */
body.kin .kband{position:relative;isolation:isolate;color:#fff}
body.kin .kband-media{position:absolute;inset:0;z-index:-2}
body.kin .kband-media img{width:100%;height:100%;object-fit:cover}
body.kin .kband::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(10,29,47,.94) 0%,rgba(10,29,47,.78) 38%,rgba(10,29,47,.28) 75%,rgba(10,29,47,.55) 100%)}
body.kin .kband .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding-top:130px;padding-bottom:130px}
body.kin .kband-copy{grid-column:1/7}
body.kin .kband-copy p{margin-top:18px;color:#c6d3e0;max-width:44ch;font-size:clamp(15px,1.7vw,18px)}
body.kin .kstats{grid-column:7/13;display:grid;grid-template-columns:1fr 1fr;gap:18px;align-content:center}
body.kin .kstat{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:22px 20px;
  transition:transform .25s ease,border-color .25s ease}
body.kin .kstat:hover{transform:translateY(-6px);border-color:rgba(255,107,53,.55)}
body.kin .kstat:nth-child(2),body.kin .kstat:nth-child(4){transform:translateY(26px)}
body.kin .kstat:nth-child(2):hover,body.kin .kstat:nth-child(4):hover{transform:translateY(20px)}
body.kin .kstat b{display:block;font-weight:900;font-size:clamp(26px,3vw,38px);letter-spacing:-.02em;line-height:1;color:#fff}
body.kin .kstat b i{font-style:normal;color:var(--orange)}
body.kin .kstat span{display:block;margin-top:8px;font-size:13px;color:#b9c6d4;line-height:1.45}
body.kin .kstat .kk{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);margin-bottom:10px}

/* ---- how it works ---- */
body.kin .khow{background:var(--ice)}
body.kin .khow .wrap{padding-top:110px;padding-bottom:120px}
body.kin .khow-head{max-width:640px}
body.kin .khow-head h2{margin-top:14px}
body.kin .khow-head p{margin-top:14px;color:var(--slate);font-size:17px}
body.kin .ksteps{margin-top:64px;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;counter-reset:kstep}
body.kin .kstep{position:relative;padding-top:70px}
body.kin .kstep::before{counter-increment:kstep;content:"0" counter(kstep);position:absolute;top:-14px;left:-6px;
  font-weight:900;font-size:110px;line-height:1;letter-spacing:-.05em;color:transparent;
  -webkit-text-stroke:1.5px rgba(15,41,66,.18);pointer-events:none;user-select:none}
body.kin .kstep h3{font-size:19px;font-weight:800;color:var(--navy);position:relative}
body.kin .kstep h3::before{content:"";display:block;width:34px;height:3px;background:var(--orange);margin-bottom:12px;border-radius:2px}
body.kin .kstep p{margin-top:10px;color:var(--slate);font-size:14.5px;line-height:1.6}

/* ---- features ---- */
body.kin .kfeat{background:#fff}
body.kin .kfeat .wrap{padding-top:110px;padding-bottom:120px}
body.kin .kfeat-head{max-width:640px}
body.kin .kfeat-head h2{margin-top:14px}
body.kin .kfeat-head p{margin-top:14px;color:var(--slate);font-size:17px}
body.kin .kfeatures{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
body.kin .kfeature{border:1px solid var(--line);border-radius:20px;padding:26px 24px;background:#fff;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
body.kin .kfeature:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(15,41,66,.12);border-color:rgba(255,107,53,.45)}
body.kin .ktick{width:46px;height:46px;border-radius:13px;background:rgba(255,107,53,.1);display:grid;place-items:center;margin-bottom:16px}
body.kin .ktick svg{width:24px;height:24px}
body.kin .kfeature h3{font-size:17.5px;font-weight:800;color:var(--navy)}
body.kin .kfeature p{margin-top:8px;color:var(--slate);font-size:14.5px;line-height:1.6}

/* ---- safety ---- */
body.kin .ksafety{position:relative;overflow:hidden;background:var(--navy);color:#fff}
body.kin .ksafety::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--orange),transparent)}
body.kin .ksafety .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding-top:110px;padding-bottom:120px;align-items:start}
body.kin .ksafety h2{margin-top:14px}
body.kin .ksafety h2 span{color:var(--orange)}
body.kin .klead{margin-top:16px;color:#b9c6d4;font-size:17px;max-width:42ch}
body.kin .ksafety ul{list-style:none;display:flex;flex-direction:column;gap:18px;margin-top:10px}
body.kin .ksafety li{display:flex;gap:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:16px;padding:18px 20px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#dfe7ee;font-size:15px;line-height:1.55}
body.kin .ksafety li b{color:#fff}
body.kin .kdot{flex:0 0 10px;width:10px;height:10px;border-radius:50%;background:var(--orange);margin-top:7px;box-shadow:0 0 0 4px rgba(255,107,53,.18)}

/* ---- faq ---- */
body.kin .kfaqs{background:var(--ice)}
body.kin .kfaqs .wrap{padding-top:110px;padding-bottom:120px;max-width:840px}
body.kin .kfaqs-head{text-align:center}
body.kin .kfaqs-head h2{margin-top:14px}
body.kin .kfaq{margin-top:44px;display:flex;flex-direction:column;gap:12px}
body.kin .kfaq details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:0 22px;transition:border-color .2s ease}
body.kin .kfaq details[open]{border-color:rgba(255,107,53,.5)}
body.kin .kfaq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px 0;font-weight:700;color:var(--navy);font-size:15.5px;min-height:44px}
body.kin .kfaq summary::-webkit-details-marker{display:none}
body.kin .kfaq summary::after{content:"+";font-family:var(--font-mono);color:var(--orange);font-size:22px;transition:transform .2s ease}
body.kin .kfaq details[open] summary::after{transform:rotate(45deg)}
body.kin .kfaq details p{padding:0 0 18px;color:var(--slate);font-size:14.5px;line-height:1.65}

/* ---- cta + footer ---- */
body.kin .kcta{position:relative;overflow:hidden;text-align:center;color:#fff;
  background:radial-gradient(900px 460px at 50% -30%, var(--navy-700), #0a1d2f 70%)}
body.kin .kcta .wrap{padding-top:120px;padding-bottom:130px;position:relative;z-index:1}
body.kin .kcta-h{font-size:clamp(40px,7vw,84px)}
body.kin .kcta p{margin:18px auto 0;color:#b9c6d4;max-width:52ch;font-size:17px}
body.kin .kcta .kbtn{margin-top:34px}
body.kin .kpulse-cta{bottom:40px;opacity:.55}
body.kin .kpulse-cta svg{height:80px}
body.kin .ksite-footer{background:#0a1d2f;color:#93a5b6;border-top:1px solid rgba(255,255,255,.08)}
body.kin .ksite-footer .wrap{padding:48px 24px 120px;text-align:center}
body.kin .kfooter-brand{font-weight:900;font-size:20px;color:#fff;letter-spacing:-.01em}
body.kin .kfb-ai{color:var(--orange)}
body.kin .ksmall{font-size:12.5px;margin-top:12px;line-height:1.6}
body.kin .ksite-footer a{border-bottom:1px solid rgba(255,255,255,.2)}
body.kin .ksite-footer a:hover{color:#fff;border-color:var(--orange)}
body.kin .kfooter-co{opacity:.72;font-size:12px}

/* ---- sticky mobile CTA ---- */
body.kin .ksticky{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(10,29,47,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(255,255,255,.1)}
body.kin .ksticky a{display:flex;align-items:center;justify-content:center;min-height:52px;font-weight:800;font-size:16px;
  color:#fff;background:var(--orange);border-radius:14px;box-shadow:0 8px 24px rgba(255,107,53,.4)}

/* ---- mobile (the dominant viewport) ---- */
@media (max-width:900px){
  body.kin .knav-txt{display:none}
  body.kin .khero .wrap{grid-template-columns:1fr;padding-top:104px}
  body.kin .khero-copy{grid-column:1;padding-bottom:0}
  body.kin .k-display{font-size:clamp(46px,14.5vw,72px)}
  body.kin .khero-phone{grid-column:1;transform:rotate(3deg) translateY(26px);margin-top:34px}
  body.kin .kphone{margin:0 auto;width:min(260px,78%)}
  body.kin .kpulse{bottom:auto;top:46%}
  body.kin .kband .wrap{grid-template-columns:1fr;padding-top:88px;padding-bottom:96px}
  body.kin .kband-copy{grid-column:1}
  body.kin .kstats{grid-column:1;margin-top:34px;gap:14px}
  body.kin .kstat:nth-child(2),body.kin .kstat:nth-child(4){transform:translateY(14px)}
  body.kin .kband::after{background:linear-gradient(180deg,rgba(10,29,47,.95) 0%,rgba(10,29,47,.75) 45%,rgba(10,29,47,.55) 100%)}
  body.kin .ksteps{grid-template-columns:1fr;gap:38px;margin-top:48px}
  body.kin .kstep{padding-top:56px}
  body.kin .kstep::before{font-size:88px}
  body.kin .kfeatures{grid-template-columns:1fr;gap:16px}
  body.kin .ksafety .wrap{grid-template-columns:1fr;gap:36px;padding-top:88px;padding-bottom:96px}
  body.kin .khow .wrap,body.kin .kfeat .wrap,body.kin .kfaqs .wrap{padding-top:88px;padding-bottom:96px}
  body.kin .kcta .wrap{padding-top:96px;padding-bottom:110px}
  body.kin .ksite-footer .wrap{padding-bottom:150px}
  body.kin .ksticky{display:block}
  body.kin .kbar-cta{display:none}
}
@media (min-width:901px) and (max-width:1080px){
  body.kin .kfeatures{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  body.kin .kpl-beat,body.kin .kyou,body.kin .kps-fill{animation:none}
  body.kin .rv{opacity:1;transform:none;transition:none}
  body.kin .kbtn,body.kin .kstat,body.kin .kfeature{transition:none}
}

/* update-195 - RPE panel gets a plain-English question, and timed (carry/hold)
   set rows show seconds rather than a rep count. */
.rpe-q{font-size:.78rem;font-weight:700;opacity:.9;margin-bottom:8px;line-height:1.3}
.rpe-grid{display:flex;flex-wrap:wrap;gap:6px}
.app-body .rpe-q{color:#c8d2de}
.setf-secs{font-variant-numeric:tabular-nums}

/* =====================================================================
   update-196 - three reported fixes
   ===================================================================== */

/* 1. Timed (carry / hold) rows: the seconds input was squashed between two
   44px steppers, clipping the placeholder. Give that column more room and the
   input a real minimum width. */
.setrow-head.wcol.tcol,.setrow.wcol.tcol{grid-template-columns:34px 1fr 1.5fr 32px}
.app-body .setrow-head.wcol.tcol,.app-body .setrow.wcol.tcol{grid-template-columns:28px 1fr 1.65fr 44px}
.setf-secs{min-width:62px}
.repwrap .setf-secs{flex:1 1 62px}

/* 2. The language switcher was the middle child of a space-between row, so it
   drifted to the centre. Pin it beside the logo on every page. */
.site-header .wrap > #siteLang,
body.kin .kbar .wrap > #siteLang{margin-right:auto;margin-left:12px}

/* 3. Mobile vertical rhythm was too loose: 88/96px stacked with large in-section
   gaps left big empty bands between text blocks. Tighten across the landing. */
@media (max-width:900px){
  body.kin .khow .wrap,body.kin .kfeat .wrap,body.kin .kfaqs .wrap{padding-top:60px;padding-bottom:64px}
  body.kin .kband .wrap{padding-top:60px;padding-bottom:64px}
  body.kin .ksafety .wrap{padding-top:60px;padding-bottom:64px;gap:26px}
  body.kin .kcta .wrap{padding-top:66px;padding-bottom:74px}
  body.kin .ksteps{margin-top:34px;gap:26px}
  body.kin .kstep{padding-top:46px}
  body.kin .kstep::before{font-size:72px;top:-10px}
  body.kin .kfeatures{margin-top:32px}
  body.kin .kfaq{margin-top:28px}
  body.kin .kstats{margin-top:26px}
  body.kin .khow-head p,body.kin .kfeat-head p{margin-top:10px}
  body.kin .ksite-footer .wrap{padding-top:36px;padding-bottom:132px}
}

/* ---- update-196: photography ---------------------------------------- */
/* Hero photo sits behind the phone mockup, masked into the navy so the
   headline keeps its dark ground. Portrait crop swaps in on mobile. */
body.kin .khero-photo{position:absolute;right:0;bottom:0;z-index:0;width:min(56%,760px);pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 26%,#000 100%);
  mask-image:linear-gradient(to right,transparent,#000 26%,#000 100%)}
body.kin .khero-photo img{width:100%;height:auto;display:block;opacity:.55;
  -webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent 98%);
  mask-image:linear-gradient(to bottom,#000 60%,transparent 98%)}
body.kin .khero .wrap{position:relative}

/* Home training: image left, copy right, offset so it breaks the grid */
body.kin .khome{background:#fff}
body.kin .khome .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:32px;align-items:center;
  padding-top:110px;padding-bottom:110px}
body.kin .khome-shot{grid-column:1/7;margin:0}
body.kin .khome-shot img{width:100%;height:auto;display:block;border-radius:20px;
  box-shadow:0 26px 60px rgba(15,41,66,.22)}
body.kin .khome-copy{grid-column:7/13}
body.kin .khome-copy p{margin-top:14px;color:var(--slate);font-size:16.5px;max-width:44ch}
body.kin .khome-copy h2{margin-top:14px}

/* Check-in portrait floats right of the how-it-works head */
body.kin .khow .wrap{position:relative}
body.kin .khow-shot{position:absolute;right:24px;top:96px;width:min(28%,300px);margin:0}
body.kin .khow-shot img{width:100%;height:auto;display:block;border-radius:18px;
  box-shadow:0 22px 50px rgba(15,41,66,.26)}

/* Safety: barbell texture as a dark ground */
body.kin .ksafety{isolation:isolate}
body.kin .ksafety-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
body.kin .ksafety-media img{width:100%;height:100%;object-fit:cover;opacity:.5}
body.kin .ksafety::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(15,41,66,.96) 0%,rgba(15,41,66,.86) 45%,rgba(15,41,66,.7) 100%)}

/* Effort band: photo ground, copy over the dark side */
body.kin .keffort{position:relative;isolation:isolate;color:#fff}
body.kin .keffort-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
body.kin .keffort-media img{width:100%;height:100%;object-fit:cover;object-position:30% 50%}
body.kin .keffort::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(270deg,rgba(10,29,47,.95) 0%,rgba(10,29,47,.72) 45%,rgba(10,29,47,.3) 100%)}
body.kin .keffort .wrap{display:grid;grid-template-columns:repeat(12,1fr);padding-top:130px;padding-bottom:130px}
body.kin .keffort-copy{grid-column:7/13}
body.kin .keffort-copy p{margin-top:16px;color:#c6d3e0;max-width:42ch;font-size:clamp(15px,1.7vw,17.5px)}
body.kin .keffort-copy h2{margin-top:14px}

/* Pulse strip divider */
body.kin .kpulse-strip{background:#0a1d2f;line-height:0;overflow:hidden}
body.kin .kpulse-strip img{width:100%;height:clamp(90px,12vw,170px);object-fit:cover;display:block;opacity:.85}

@media (max-width:900px){
  body.kin .khero-photo{position:relative;right:auto;bottom:auto;width:100%;margin-top:26px;
    -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 70%,transparent 100%)}
  body.kin .khero-photo img{opacity:.62;-webkit-mask-image:none;mask-image:none;border-radius:16px}
  body.kin .khero-phone{margin-top:-70px}
  body.kin .khome .wrap{grid-template-columns:1fr;gap:22px;padding-top:60px;padding-bottom:64px}
  body.kin .khome-shot,body.kin .khome-copy{grid-column:1}
  body.kin .khow-shot{position:relative;right:auto;top:auto;width:70%;margin:26px 0 0}
  body.kin .keffort .wrap{grid-template-columns:1fr;padding-top:64px;padding-bottom:70px}
  body.kin .keffort-copy{grid-column:1}
  body.kin .keffort::after{background:linear-gradient(180deg,rgba(10,29,47,.55) 0%,rgba(10,29,47,.9) 55%,rgba(10,29,47,.96) 100%)}
  body.kin .keffort-media img{object-position:60% 40%}
}

/* =====================================================================
   update-197
   ===================================================================== */

/* ROOT CAUSE of the oversized gaps: the base `section{padding:84px 0}` rule
   still applied to every body.kin section and STACKED on top of the .wrap
   padding, so mobile was getting 84+60 above and 84+64 below (nearly 300px of
   dead space between blocks). The kinetic layer owns its own rhythm via .wrap,
   so zero the section padding here and let .wrap alone control it. */
body.kin section{padding:0}

/* With the double padding gone, the wrap values can breathe a little again. */
@media (max-width:900px){
  body.kin .khow .wrap,body.kin .kfeat .wrap,body.kin .kfaqs .wrap{padding-top:64px;padding-bottom:68px}
  body.kin .kband .wrap{padding-top:64px;padding-bottom:68px}
  body.kin .khome .wrap{padding-top:64px;padding-bottom:68px}
  body.kin .ksafety .wrap{padding-top:64px;padding-bottom:68px}
  body.kin .keffort .wrap{padding-top:68px;padding-bottom:72px}
  body.kin .kcta .wrap{padding-top:72px;padding-bottom:80px}
}

/* "IT ASKS FIRST." was too faint to read as a deliberate outline. Thicker,
   brighter stroke plus a faint fill so it holds its own against the solid rows. */
body.kin .kghost{
  -webkit-text-stroke:2.2px rgba(255,255,255,.82);
  color:rgba(255,255,255,.06);
  text-shadow:0 2px 30px rgba(255,255,255,.12)}
@media (max-width:900px){
  body.kin .kghost{-webkit-text-stroke-width:1.8px}
}

/* Product name above the hero eyebrow. */
body.kin .kwordmark{display:block;font-weight:900;letter-spacing:-.02em;font-size:clamp(19px,2.4vw,26px);
  color:#fff;margin-bottom:18px;line-height:1}
body.kin .kwordmark span{color:var(--orange)}

/* =====================================================================
   update-198 - Today energy hero + macro split.
   Brings the website's hierarchy into the app: ONE hero number per screen at
   display weight, everything else quiet. Scoped to .app-body throughout.
   ===================================================================== */
.app-body .energy-hero{
  display:grid;grid-template-columns:132px 1fr;gap:20px;align-items:center;
  padding:20px;margin:0 0 14px;border-radius:20px;cursor:pointer;
  background:linear-gradient(160deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--line-top),var(--shadow);
  transition:transform .18s ease,border-color .18s ease}
.app-body .energy-hero:active{transform:scale(.99)}
.app-body .energy-hero:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

.app-body .energy-ring{position:relative;width:132px;height:132px}
.app-body .energy-ring svg{width:100%;height:100%;display:block}
.app-body .ring-track{stroke:rgba(255,255,255,.08);stroke-width:11;fill:none}
.app-body .ring-fill{stroke:url(#ringGrad);stroke-width:11;fill:none;stroke-linecap:round;
  transform:rotate(-90deg);transform-origin:50% 50%;
  transition:stroke-dasharray .8s cubic-bezier(.2,.7,.2,1)}
.app-body .ring-mid{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;pointer-events:none}
.app-body .ring-mid b{font-size:26px;font-weight:900;letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--charcoal)}
.app-body .ring-mid i{font-style:normal;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate);margin-top:4px}

.app-body .energy-net{font-size:clamp(38px,11vw,54px);font-weight:900;letter-spacing:-.03em;
  line-height:1;font-variant-numeric:tabular-nums;color:var(--charcoal)}
.app-body .energy-net.over{color:#ff8a5c}
.app-body .energy-net.under{color:#4ade80}
.app-body .energy-net.is-none{color:var(--slate);opacity:.6}
.app-body .energy-sub{font-size:11px;color:var(--slate);margin-top:6px;
  letter-spacing:.14em;text-transform:uppercase}
.app-body .energy-split{display:flex;gap:14px;margin-top:14px}
.app-body .energy-split div{flex:1;min-width:0}
.app-body .energy-split b{display:block;font-size:17px;font-weight:800;
  font-variant-numeric:tabular-nums;color:var(--charcoal)}
.app-body .energy-split span{font-size:11px;color:var(--slate)}

/* macro bars span the full card width beneath both columns */
.app-body .macro-row{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:4px}
.app-body .macro{display:flex;flex-direction:column;gap:6px}
.app-body .macro-top{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.app-body .macro-k{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.app-body .macro-v{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--charcoal)}
.app-body .macro-track{height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.app-body .macro-fill{height:100%;border-radius:999px;transition:width .7s cubic-bezier(.2,.7,.2,1)}
.app-body .macro-p .macro-fill{background:linear-gradient(90deg,#34c77b,#7ef0ac)}
.app-body .macro-c .macro-fill{background:linear-gradient(90deg,#FF6B35,#ff8a5c)}
.app-body .macro-f .macro-fill{background:linear-gradient(90deg,#f5a524,#ffc768)}
.app-body .macro-note{grid-column:1/-1;font-size:10.5px;color:var(--slate);opacity:.8;margin-top:-2px}

.app-body .energy-cta{grid-column:1/-1;min-height:44px;border-radius:12px;
  border:1px dashed rgba(255,107,53,.45);background:transparent;color:#ffb59a;
  font:inherit;font-weight:700;font-size:14px;cursor:pointer}
.app-body .energy-cta:active{transform:scale(.97)}

@media (max-width:380px){
  .app-body .energy-hero{grid-template-columns:104px 1fr;gap:14px;padding:16px}
  .app-body .energy-ring{width:104px;height:104px}
  .app-body .ring-mid b{font-size:21px}
  .app-body .energy-split{gap:10px}
  .app-body .energy-split b{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .app-body .ring-fill,.app-body .macro-fill{transition:none}
  .app-body .energy-hero{transition:none}
}

/* =====================================================================
   update-199 - 3-tap meal logging: rail, confirm sheet, post-save strip
   ===================================================================== */
.app-body .meal-rail-wrap{margin:0 0 16px}
.app-body .meal-rail-lbl{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);margin-bottom:8px}
.app-body .meal-rail{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:2px 16px 10px;margin:0 -16px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.app-body .meal-rail::-webkit-scrollbar{display:none}
.app-body .meal-chip{scroll-snap-align:start;flex:0 0 auto;max-width:62vw;min-height:60px;
  padding:11px 15px;border-radius:16px;text-align:left;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--line-top);
  transition:transform .16s ease,border-color .16s ease}
.app-body .meal-chip:active{transform:scale(.96);border-color:rgba(255,107,53,.5)}
.app-body .meal-chip b{display:block;font-size:14px;font-weight:700;color:var(--charcoal);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:56vw}
.app-body .meal-chip span{display:block;margin-top:3px;font-size:11.5px;color:var(--slate);
  font-variant-numeric:tabular-nums}

/* confirm sheet (compact variant of the existing sheet) */
.app-body .sheet.sheet-sm{height:auto;max-height:82vh}
.app-body .sheet-body{padding:16px 18px 22px;overflow-y:auto}
.app-body .ms-macros{display:flex;gap:14px;flex-wrap:wrap;padding:12px 14px;border-radius:14px;
  background:var(--surface-2);border:1px solid var(--line);margin-bottom:16px}
.app-body .ms-macros span{font-size:11px;color:var(--slate);letter-spacing:.06em}
.app-body .ms-macros b{display:block;font-size:19px;font-weight:800;color:var(--charcoal);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.app-body .ms-lbl{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);margin:14px 0 8px}
.app-body .ms-time{width:100%}
.app-body .ms-msg{min-height:18px;font-size:13px;color:var(--slate);margin-top:10px}
.app-body .ms-actions{display:flex;gap:10px;margin-top:14px}
.app-body .ms-actions .btn{min-height:48px;flex:1}
.app-body .ms-save{flex:1.4 !important}

/* post-save result strip */
.app-body .food-done{display:block;padding:12px 14px;border-radius:14px;
  background:rgba(52,199,123,.12);border:1px solid rgba(52,199,123,.35);
  color:var(--charcoal);font-size:13.5px;line-height:1.5;font-variant-numeric:tabular-nums}
.app-body .food-done b{color:#7ef0ac;margin-right:6px}
.app-body .food-done-go{display:inline-block;margin-left:8px;min-height:32px;padding:4px 12px;
  border-radius:999px;border:1px solid rgba(255,255,255,.2);background:transparent;
  color:var(--charcoal);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.app-body .food-done-go:active{transform:scale(.96)}
@media (prefers-reduced-motion:reduce){
  .app-body .meal-chip{transition:none}
}

/* =====================================================================
   update-200 - hierarchy pass. One hero tier per screen, gradient category
   rings, and consistent press feedback. All scoped to .app-body.
   ===================================================================== */

/* Progress hero: the display tier from the website, applied to the number that
   actually matters on this screen. */
.app-body .prog-hero{display:flex;align-items:center;gap:18px;padding:4px 2px 18px;
  margin-bottom:16px;border-bottom:1px solid var(--line)}
.app-body .ph-num{font-size:clamp(46px,14vw,68px);font-weight:900;letter-spacing:-.04em;line-height:.9;
  font-variant-numeric:tabular-nums;color:var(--charcoal)}
.app-body .ph-meta{display:flex;flex-direction:column;gap:5px;min-width:0}
.app-body .ph-lbl{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.app-body .ph-sub{font-size:12.5px;color:var(--slate);font-variant-numeric:tabular-nums}

/* Rings: gradient strokes with rounded caps on a light track. */
.app-body .pd-defs{position:absolute;width:0;height:0;overflow:hidden}
.app-body .pd-track{stroke:rgba(255,255,255,.08)}
.app-body .pd-val{stroke-linecap:round;transition:stroke-dasharray .8s cubic-bezier(.2,.7,.2,1)}
/* label tints follow the category so the grouping reads even in the text */
.app-body .pd-train .pd-label{color:#8fc6ee}
.app-body .pd-food .pd-label{color:#7ed3a4}
.app-body .pd-bal .pd-label{color:#79d6c8}

/* Consistent tactile feedback on every pressable surface. */
.app-body .prog-donut,.app-body .hub-card,.app-body .stat-tile,
.app-body .lib-ex summary,.app-body .str-ex summary{
  transition:transform .16s ease}
.app-body .hub-card:active,.app-body .stat-tile:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){
  .app-body .pd-val{transition:none}
  .app-body .prog-hero,.app-body .hub-card,.app-body .stat-tile{transition:none}
}

/* =====================================================================
   update-204 - onboarding path chooser
   ===================================================================== */
.app-body .ob-choose{max-width:560px;margin:0 auto}
.app-body .ob-mode{display:block;width:100%;text-align:left;margin:14px 0;padding:20px;
  border-radius:20px;cursor:pointer;
  background:linear-gradient(160deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--line-top),var(--shadow);
  transition:transform .18s ease,border-color .18s ease}
.app-body .ob-mode:active{transform:scale(.985)}
.app-body .ob-mode:hover{border-color:rgba(255,107,53,.5)}
.app-body .obm-k{display:block;font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange);margin-bottom:8px}
.app-body .obm-t{display:block;font-size:clamp(26px,7vw,34px);font-weight:900;letter-spacing:-.02em;
  line-height:1;color:var(--charcoal);font-variant-numeric:tabular-nums}
.app-body .obm-d{display:block;margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--slate)}
.app-body .ob-note{margin-top:18px;padding:12px 14px;border-radius:12px;font-size:12.5px;line-height:1.5;
  color:var(--slate);background:rgba(255,255,255,.03);border:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){.app-body .ob-mode{transition:none}}

/* =====================================================================
   update-205 - one deferred onboarding question per weekly check-in
   ===================================================================== */
.app-body .ci-defer{margin-top:8px;padding:16px;border-radius:16px;
  background:rgba(255,107,53,.07);border:1px solid rgba(255,107,53,.28)}
.app-body .cd-head{display:flex;flex-direction:column;gap:3px;margin-bottom:12px}
.app-body .cd-head b{font-size:13.5px;color:var(--charcoal)}
.app-body .cd-head span{font-size:11.5px;color:var(--slate)}
.app-body .cd-field .ob-field{margin:0}
.app-body .cd-field .ob-label{font-size:13px}
.app-body .cd-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.app-body .cd-actions .btn{min-height:40px}
.app-body .cd-never{opacity:.75}
.app-body .cd-msg{min-height:16px;font-size:12.5px;color:var(--slate);margin-top:8px}

/* update-207 - "sharpen your plan" progress card (express users only) */
.app-body .sharpen{border-color:rgba(255,107,53,.3);background:rgba(255,107,53,.06)}
.app-body .sharp-p{font-size:13.5px;color:var(--slate);line-height:1.5;margin:6px 0 14px}
.app-body .sharp-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.app-body .sharp-bar span{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#FF6B35,#ff8a5c);transition:width .7s cubic-bezier(.2,.7,.2,1)}
.app-body .sharp-meta{margin-top:8px;font-size:12px;color:var(--slate);font-variant-numeric:tabular-nums}
.app-body .sharpen .btn{margin-top:14px}
@media (prefers-reduced-motion:reduce){.app-body .sharp-bar span{transition:none}}

/* =====================================================================
   update-208 - icon inside each Progress dial, tinted to its ring colour.
   The value stays dominant; the icon is a quiet secondary cue.
   ===================================================================== */
.pd-mid{flex-direction:column;gap:2px}
.pd-num{font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:1;
  font-variant-numeric:tabular-nums}
.pd-icon{width:19px;height:19px;display:block;opacity:1}
/* tint follows the category, matching the ring gradient's mid tone */
.pd-brand .pd-icon{color:#ff8a5c}
.pd-train .pd-icon{color:#6fb8ea}
.pd-food .pd-icon{color:#57cf8e}
.pd-bal .pd-icon{color:#54cbbb}
@media (max-width:360px){
  .pd-icon{width:17px;height:17px}
  .pd-mid{gap:1px}
}

/* =====================================================================
   update-209 - the "Video, notes & photo" panel never actually collapsed.
   .ex-body sets display:flex, and an author display rule beats the UA's
   [hidden]{display:none}, so the hidden attribute was inert and every card
   rendered the whole panel. Exactly the S41 warm-up bug, flagged as latent
   here in the v2.7 notes. UI invariant #1.
   ===================================================================== */
.ex-body[hidden]{display:none !important}
.ex-expand{display:inline-flex;align-items:center;gap:8px}
.exx-mark{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;
  border:1px solid var(--line);font-size:14px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums}
.app-body .ex-expand{min-height:40px}
.app-body .exx-mark{border-color:rgba(255,255,255,.22);color:#c8d2de}

/* update-210 - rest timer gains a -30s control. Three buttons plus the clock
   have to fit a narrow phone, so the two adjusters tighten up. */
.rest-bar .rest-sub{position:relative;min-height:44px;min-width:58px;border-radius:10px;
  border:1px solid var(--line);background:transparent;font:inherit;font-weight:700;cursor:pointer}
.rest-bar .rest-add,.rest-bar .rest-sub{min-width:58px;padding:0 8px}
.rest-num{min-width:66px}
.app-body .rest-bar .rest-sub{color:#ffd9cd;border-color:rgba(255,107,53,.5)}
.rest-bar.rest-done .rest-sub,.rest-bar.rest-done .rest-add{opacity:.5;pointer-events:none}
@media (max-width:360px){
  .rest-bar{gap:6px;padding:10px 8px}
  .rest-bar .rest-add,.rest-bar .rest-sub{min-width:52px;font-size:.9rem}
  .rest-num{min-width:58px;font-size:1.3rem}
}

/* =====================================================================
   update-212 - new photography. The replacements are abstract/atmospheric
   rather than literal, so the treatments change with them: the hero art can
   carry more presence than a portrait did, the effort band is now a stairwell
   (subject on the right, so the gradient flips), and the CTA gains a ground.
   ===================================================================== */
/* Hero: abstract particle flow, so let it read rather than fading it out. */
body.kin .khero-photo img{opacity:.72}
@media (max-width:900px){ body.kin .khero-photo img{opacity:.7} }

/* Effort band: the stairwell's subject sits right of centre, so pull the crop
   left and keep the copy side dark. */
body.kin .keffort-media img{object-position:62% 45%}
@media (max-width:900px){ body.kin .keffort-media img{object-position:70% 40%} }

/* Safety band: the plate impact is bottom-right heavy; bias the crop so the
   spray stays visible behind the copy column. */
body.kin .ksafety-media img{object-position:70% 60%;opacity:.55}

/* CTA band ground. */
body.kin .kcta{isolation:isolate}
body.kin .kcta-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
body.kin .kcta-media img{width:100%;height:100%;object-fit:cover;opacity:.5;object-position:50% 65%}
body.kin .kcta::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(900px 460px at 50% 30%, rgba(10,29,47,.72), rgba(10,29,47,.93) 70%)}

/* =====================================================================
   update-214 - one-day location switch (gym <-> home)
   ===================================================================== */
.app-body .locswitch{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.app-body .locsw-on{font-size:12px;font-weight:700;letter-spacing:.06em;color:#ffb59a;
  border:1px solid rgba(255,107,53,.4);border-radius:999px;padding:5px 12px}
.app-body .locsw-go,.app-body .locsw-undo{min-height:38px}
.app-body .ls-intro{font-size:13.5px;color:var(--slate);line-height:1.5;margin-bottom:14px}
.app-body .ls-list{display:flex;flex-direction:column;gap:10px}
.app-body .ls-row{padding:12px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line)}
.app-body .ls-row.is-dropped{opacity:.45}
.app-body .ls-name b{font-size:14.5px;color:var(--charcoal)}
.app-body .ls-acts{display:flex;gap:6px;margin-top:10px}
.app-body .ls-acts button{flex:1;min-height:40px;border-radius:10px;border:1px solid var(--line);
  background:transparent;color:var(--charcoal);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.app-body .ls-acts button.on{border-color:var(--orange);background:rgba(255,107,53,.14);color:#ffd9cd}
.app-body .ls-pick{margin-top:10px}
.app-body .ls-pick[hidden]{display:none !important}
.app-body .ls-input{width:100%;padding:11px;border-radius:10px;border:1px solid var(--line);
  background:var(--field);color:var(--charcoal);font:inherit;font-size:16px}
.app-body .ls-msg{min-height:18px;font-size:13px;color:var(--slate);margin-top:12px}
.app-body .ls-actions{display:flex;gap:10px;margin-top:8px}
.app-body .ls-actions .btn{flex:1;min-height:48px}

/* update-216 - switch-things-up sheet: location, kit, and the AI draft */
.app-body .ls-lbl{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);margin:14px 0 8px}
.app-body .ls-sec{margin:22px 0 6px;padding-top:16px;border-top:1px solid var(--line);
  font-size:14px;font-weight:800;color:var(--charcoal)}
.app-body .ls-taking[hidden]{display:none !important}
.app-body .ls-take-input,.app-body .ls-input{width:100%;padding:11px;border-radius:10px;
  border:1px solid var(--line);background:var(--field);color:var(--charcoal);font:inherit;font-size:16px}
.app-body .ls-gen{width:100%;min-height:46px;margin-top:14px}
.app-body .ls-draft{margin-top:14px;padding:14px;border-radius:14px;
  background:rgba(255,107,53,.08);border:1px solid rgba(255,107,53,.32)}
.app-body .ls-draft[hidden]{display:none !important}
.app-body .lsd-h b{display:block;font-size:15px;color:var(--charcoal)}
.app-body .lsd-h span{display:block;font-size:12.5px;color:var(--slate);margin-top:2px}
.app-body .ls-draft ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.app-body .ls-draft li b{font-size:13.5px;color:var(--charcoal)}
.app-body .ls-draft li span{font-size:12px;color:var(--slate);font-variant-numeric:tabular-nums}
.app-body .lsd-why{margin-top:12px;font-size:12.5px;color:var(--slate);line-height:1.5}
.app-body .lsd-note{margin-top:10px;font-size:12.5px;line-height:1.5;color:#ffb59a;
  border-left:3px solid rgba(255,107,53,.6);padding-left:10px}
.app-body .lsd-hint{margin-top:12px;font-size:11.5px;color:var(--slate);opacity:.85}

/* update-218 - swap picker: a real filtered list, because <datalist> is not
   rendered at all by iOS Safari and behaves inconsistently on desktop. */
.app-body .ls-results{margin-top:8px;display:flex;flex-direction:column;gap:4px;
  max-height:210px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:12px;padding:6px;background:var(--surface)}
.app-body .ls-results[hidden]{display:none !important}
.app-body .ls-hit{display:block;width:100%;text-align:left;min-height:42px;padding:9px 12px;
  border-radius:9px;border:0;background:transparent;color:var(--charcoal);
  font:inherit;font-size:14px;cursor:pointer}
.app-body .ls-hit:active{background:rgba(255,107,53,.16);color:#ffd9cd}
@media (hover:hover){ .app-body .ls-hit:hover{background:rgba(255,255,255,.06)} }

/* =====================================================================
   update-222 - "What you logged" summary, and a clearer switch button
   ===================================================================== */
.app-body .li-det{border-bottom:1px solid var(--line);padding:12px 0}
.app-body .li-det:last-child{border-bottom:0}
.app-body .li-det summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:8px}
.app-body .li-det summary::-webkit-details-marker{display:none}
.app-body .li-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.app-body .li-name{font-size:14.5px;font-weight:700;color:var(--charcoal);display:flex;align-items:baseline;gap:7px;min-width:0}
.app-body .li-tick{color:#5fd39a;font-size:13px;flex:0 0 auto}
.app-body .li-kcal{flex:0 0 auto;font-size:11.5px;font-weight:700;color:#ffb59a;
  background:rgba(255,107,53,.12);border:1px solid rgba(255,107,53,.28);
  border-radius:999px;padding:3px 10px;font-variant-numeric:tabular-nums;white-space:nowrap}
.app-body .li-sets{display:flex;flex-wrap:wrap;gap:6px}
.app-body .li-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  color:var(--charcoal);background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:9px;padding:4px 9px;font-variant-numeric:tabular-nums}
.app-body .li-rpe{font-style:normal;font-size:10.5px;font-weight:700;color:#8fa2b3;
  border-left:1px solid var(--line);padding-left:6px}
.app-body .li-facts{display:flex;flex-wrap:wrap;gap:6px}
.app-body .li-facts > span{font-size:11.5px;color:var(--slate);background:rgba(255,255,255,.03);
  border-radius:7px;padding:3px 8px}
.app-body .li-tag{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);
  background:rgba(255,255,255,.04);border-radius:7px;padding:3px 8px}
.app-body .li-meta{margin-top:8px;font-size:11.5px;color:var(--slate)}
.app-body .li-log{margin-top:8px;font-size:13px;line-height:1.5;color:var(--charcoal);
  background:rgba(255,255,255,.04);border-radius:10px;padding:10px 12px}

/* The switch button was too quiet against the dark ground. A restrained
   orange outline, not a filled call to action. */
.app-body .locsw-go{border:1px solid rgba(255,107,53,.55) !important;color:#ffb59a !important;
  background:rgba(255,107,53,.07) !important;font-weight:700}
.app-body .locsw-go:active{background:rgba(255,107,53,.16) !important;transform:scale(.97)}

/* update-223 - check-in summaries as chips, matching the logged-session panel */
.app-body .ci-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.app-body .ci-chip{font-size:11.5px;color:var(--slate);background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:8px;padding:3px 9px;
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* update-225 - temporary availability change */
.app-body .dayrev{margin-top:12px;font-size:12.5px;line-height:1.5;padding:10px 12px;border-radius:10px;
  background:rgba(255,107,53,.08);border:1px solid rgba(255,107,53,.25);color:#ffb59a}

/* =====================================================================
   update-226 - colour and icons where screens were reading as grey text
   ===================================================================== */

/* Food totals: same macro palette as the Today energy hero, so the two
   screens agree rather than each inventing their own colours. */
.app-body .food-totals{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.app-body .ft-cell{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:14px 8px 12px;border-radius:16px;background:var(--surface-2);
  border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--line-top)}
.app-body .ft-cell b{font-size:clamp(17px,4.6vw,21px);font-weight:900;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1}
.app-body .ft-cell span{font-size:11px;color:var(--slate)}
.app-body .ft-icon{width:20px;height:20px;margin-top:4px}
.app-body .ft-kcal{border-color:rgba(42,169,160,.4);background:linear-gradient(160deg,rgba(42,169,160,.14),var(--surface-2))}
.app-body .ft-kcal b,.app-body .ft-kcal .ft-icon{color:#6fdcc8}
.app-body .ft-p{border-color:rgba(52,199,123,.4);background:linear-gradient(160deg,rgba(52,199,123,.14),var(--surface-2))}
.app-body .ft-p b,.app-body .ft-p .ft-icon{color:#7ef0ac}
.app-body .ft-c{border-color:rgba(255,107,53,.4);background:linear-gradient(160deg,rgba(255,107,53,.14),var(--surface-2))}
.app-body .ft-c b,.app-body .ft-c .ft-icon{color:#ff8a5c}
.app-body .ft-f{border-color:rgba(245,165,36,.4);background:linear-gradient(160deg,rgba(245,165,36,.14),var(--surface-2))}
.app-body .ft-f b,.app-body .ft-f .ft-icon{color:#ffc768}
@media (max-width:380px){
  .app-body .food-totals{grid-template-columns:repeat(2,1fr)}
  .app-body .ft-icon{width:18px;height:18px}
}

/* Plan week markers: an icon and an orange rule so they read as milestones. */
.app-body .wk-h{display:flex;align-items:center;gap:8px;color:var(--charcoal);
  padding:10px 12px;border-radius:12px;background:rgba(255,107,53,.08);
  border:1px solid rgba(255,107,53,.22);border-left:3px solid var(--orange)}
.app-body .wk-ico{width:17px;height:17px;color:var(--orange);flex:0 0 auto}

/* Safety notes is the product's cornerstone but rendered as a plain bullet list.
   Give it a shield and an orange edge so it reads as the thing it is. */
.app-body .panel-safety{border-color:rgba(255,107,53,.3);border-left:3px solid var(--orange)}
.app-body .pnl-h{display:flex;align-items:center;gap:8px}
.app-body .pnl-ico{width:17px;height:17px;color:var(--orange);flex:0 0 auto}

/* update-228 - explicit day picker, and a way in to building the next block */
.app-body .daypick{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.app-body .dp-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.app-body .dp-day{min-width:64px;min-height:42px;border-radius:11px;border:1px solid var(--line);
  background:transparent;color:var(--charcoal);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.app-body .dp-day.on{border-color:var(--orange);background:rgba(255,107,53,.14);color:#ffd9cd}
.app-body .dp-gone{display:block;font-style:normal;font-size:9.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;opacity:.55;margin-top:2px}
.app-body .dp-loc{flex:1;min-width:0}
.app-body .dp-loc[hidden]{display:none !important}
.app-body .ph-how{margin-top:10px;font-size:13px;line-height:1.5;color:var(--slate)}
.app-body .ph-go{margin-top:10px}

/* update-231 - blocking validation errors read as errors, not as status notes */
.app-body .msg-err{display:inline-block;font-weight:800;color:#ff6b6b;font-size:14px;line-height:1.4}

/* update-232 - food diary: coloured stat tiles and a ranked "most logged" list */
.app-body .diary-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.app-body .ft-kcal2{border-color:rgba(255,107,53,.4);background:linear-gradient(160deg,rgba(255,107,53,.14),var(--surface-2))}
.app-body .ft-kcal2 b,.app-body .ft-kcal2 .ft-icon{color:#ff8a5c}
.app-body .ft-meals{border-color:rgba(122,162,255,.4);background:linear-gradient(160deg,rgba(122,162,255,.14),var(--surface-2))}
.app-body .ft-meals b,.app-body .ft-meals .ft-icon{color:#8fc6ee}
/* .hist-row is justify-content:space-between, built for a two-column
   label/value row. Adding a rank badge as a first child pushed the name to the
   far right and left a gap. The ranked variant packs to the left instead. */
.app-body .top-row{display:flex;align-items:center;justify-content:flex-start;gap:12px}
.app-body .top-row .hist-meta{flex:1;min-width:0;text-align:left}
.app-body .top-row .hist-meta b{display:block;line-height:1.3}
.app-body .top-row .hist-meta span{display:block;margin-top:1px}
.app-body .top-rank{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.06);color:var(--slate);border:1px solid var(--line)}
.app-body .top-1{background:rgba(255,107,53,.18);color:#ff8a5c;border-color:rgba(255,107,53,.45)}
.app-body .top-2{background:rgba(122,162,255,.16);color:#8fc6ee;border-color:rgba(122,162,255,.4)}
.app-body .top-3{background:rgba(52,199,123,.16);color:#7ed3a4;border-color:rgba(52,199,123,.4)}

/* update-234 - diary day totals as chips. Previously one mono string that
   wrapped mid-value, orphaning a bare "P" onto its own line, and "P" is not a
   word anyone should have to decode on their own food diary. */
/* update-235: the date and the totals were competing for one row, which
   crushed the chips and wrapped "protein" onto its own line mid-chip. Stack
   them: date on top, totals underneath with room to breathe. */
.app-body .diary-day-h{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.app-body .diary-day-name{font-size:15px;font-weight:800;white-space:nowrap}
.app-body .diary-day-tot{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start;width:100%}
.app-body .dd-chip{display:inline-block;flex:0 0 auto;font-size:11.5px;font-weight:700;
  border-radius:8px;padding:4px 10px;white-space:nowrap;font-variant-numeric:tabular-nums;
  border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--slate)}
.app-body .dd-meals{color:#8fc6ee;border-color:rgba(122,162,255,.32);background:rgba(122,162,255,.10)}
.app-body .dd-kcal{color:#6fdcc8;border-color:rgba(42,169,160,.32);background:rgba(42,169,160,.10)}
.app-body .dd-p{color:#7ef0ac;border-color:rgba(52,199,123,.32);background:rgba(52,199,123,.10)}


/* update-236 - two clearly separate routes into the food form, and a way to
   correct a misread estimate in words rather than by retyping four numbers. */
.app-body .food-route{border:1px solid var(--line);border-radius:14px;margin:10px 0;
  background:rgba(255,255,255,.02);overflow:hidden}
.app-body .food-route[open]{border-color:rgba(255,107,53,.3);background:rgba(255,107,53,.04)}
.app-body .food-route summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:13px 14px;min-height:46px}
.app-body .food-route summary::-webkit-details-marker{display:none}
.app-body .food-route summary::after{content:"+";margin-left:auto;font-family:var(--font-mono);
  color:var(--orange);font-size:19px;line-height:1}
.app-body .food-route[open] summary::after{content:"\2212"}
.app-body .fr-ico{font-size:15px;line-height:1}
.app-body .food-route summary b{font-size:14.5px;color:var(--charcoal)}
.app-body .fr-sub{font-size:12px;color:var(--slate)}
.app-body .fr-body{padding:0 14px 14px;display:flex;flex-direction:column;gap:10px}
.app-body .fcorrect{margin:12px 0;padding:12px;border-radius:12px;
  background:rgba(255,107,53,.07);border:1px solid rgba(255,107,53,.28);
  display:flex;flex-direction:column;gap:9px}
.app-body .fcorrect[hidden]{display:none !important}
.app-body .fc-h{font-size:13px;font-weight:800;color:#ffb59a}

/* update-241 - effort rating for an exercise logged without set rows */
.app-body .exrpe-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:10px 0;padding:10px 12px;border-radius:12px;
  background:rgba(255,255,255,.03);border:1px solid var(--line)}
.app-body .exrpe-wrap[hidden]{display:none !important}
.app-body .exrpe-lbl{font-size:12.5px;color:var(--slate)}
.app-body .exrpe-toggle{margin-left:auto}
.app-body .exrpe-opts{flex:1 0 100%}
.app-body .li-exrpe{border-color:rgba(255,255,255,.14)}
.app-body .li-exrpe .li-rpe{border-left:0;padding-left:0;color:#8fa2b3}

/* update-242 - a deferred question asked at the point it is relevant */
.app-body .ctxq{margin:0 0 14px;padding:14px;border-radius:14px;
  background:rgba(255,107,53,.07);border:1px solid rgba(255,107,53,.28)}
.app-body .ctxq-h{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#ffb59a;margin-bottom:10px}
.app-body .ctxq-field .ob-field{margin:0}
.app-body .ctxq-field .ob-label{font-size:13.5px}
.app-body .ctxq-acts{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.app-body .ctxq-acts .btn{min-height:40px}
.app-body .ctxq-msg{min-height:16px;font-size:12.5px;color:var(--slate);margin-top:8px}

/* update-243 - rating an AI suggestion */
.app-body .fbk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--line)}
.app-body .fbk-q{font-size:12.5px;color:var(--slate)}
.app-body .fbk-btn{min-width:40px;min-height:36px;border-radius:10px;border:1px solid var(--line);
  background:transparent;font-size:16px;line-height:1;cursor:pointer}
.app-body .fbk-btn.on{border-color:var(--orange);background:rgba(255,107,53,.14)}
.app-body .fbk-btn:disabled{opacity:.45;cursor:default}
.app-body .fbk-why{flex:1 0 100%;margin-top:10px}
.app-body .fbk-why[hidden]{display:none !important}
.app-body .fbk-wl{font-size:12px;color:var(--slate);margin-bottom:8px}
.app-body .fbk-chips{display:flex;flex-wrap:wrap;gap:6px}
.app-body .fbk-chip{min-height:36px;padding:6px 12px;border-radius:9px;border:1px solid var(--line);
  background:transparent;color:var(--charcoal);font:inherit;font-size:12.5px;cursor:pointer}
.app-body .fbk-chip:active{background:rgba(255,107,53,.16);border-color:var(--orange)}
.app-body .fbk-thanks{font-size:12.5px;font-weight:700;color:#5fd39a}
.app-body .fbk-thanks[hidden]{display:none !important}
.app-body .fb-chk{flex:0 0 auto;margin-left:auto}

/* update-256 - photo-to-log reachable in one tap from the log */
.app-body .exsnap{margin-left:8px}
.app-body .snap-ex{font-size:15px;font-weight:800;color:var(--charcoal);margin-bottom:6px}
.app-body .snap-p{font-size:13px;line-height:1.5;color:var(--slate);margin-bottom:14px}
.app-body .snap-pick{min-height:52px;margin-bottom:10px}
.app-body .snap-count{font-size:12.5px;margin-bottom:10px;min-height:16px}
.app-body .snap-note{width:100%;margin-bottom:14px}
.app-body .snap-actions{display:flex;gap:10px}
.app-body .snap-actions .btn{flex:1;min-height:48px}
.app-body .snap-msg{min-height:18px;font-size:13px;color:var(--slate);margin-top:12px;text-align:center}

/* update-257 - video & notes open in a sheet rather than expanding inline */
.app-body .ex-notes{margin-top:10px}
.app-body .notes-host .ex-body{display:flex;flex-direction:column;gap:10px}
.app-body .notes-host .ex-body[hidden]{display:none !important}

/* update-258 - separate "Add an exercise" from the Exercises list above it.
   It sat directly under the last exercise card with only 12px between them, so
   it read as part of that card rather than as a new action for the session. */
.app-body .addex{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);position:relative}
.app-body .addex::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;
  background:var(--orange);border-radius:2px}
.app-body .addex > #addExBtn{width:100%;min-height:48px;border-style:dashed;
  border-color:rgba(255,255,255,.18);font-weight:700}
.app-body .addex > #addExBtn:active{border-color:var(--orange);background:rgba(255,107,53,.1)}

/* update-260 - editable training-day picker on the build-block screen */
.app-body .blkdays{display:flex;flex-direction:column;gap:8px}
.app-body .blkday{display:flex;align-items:center;gap:12px}
.app-body .blkday-t{min-width:64px;min-height:44px;padding:8px 14px;border-radius:12px;
  border:1px dashed rgba(255,255,255,.22);background:none;color:var(--slate);
  font-weight:700;font-size:.9rem;cursor:pointer}
.app-body .blkday.on .blkday-t{border-style:solid;border-color:var(--orange);
  color:#fff;background:rgba(255,107,53,.12)}
.app-body .blkday-loc{flex:1}

/* update-265 - clear a future block back to a placeholder */
.app-body .blk-clear{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.app-body .blk-clear .btn{width:100%;min-height:46px;border-style:dashed;
  border-color:rgba(255,255,255,.18)}
.app-body .blk-clear-p{font-size:12.5px;line-height:1.5;margin-top:10px}

/* update-269 - the save-to-library tick greys out for a known exercise */
.app-body .chk-muted{opacity:.45}

/* update-270 - duplicate-name notice under the add-exercise name field */
.app-body .addex-dup{font-size:12.5px;line-height:1.45;margin:6px 2px 0;color:var(--orange)}

/* update-271 - the name field warns instead of acting like a dropdown */
.app-body .ls-hint{font-size:12px;color:var(--orange);font-weight:700;
  margin:6px 2px 4px;text-transform:none}

/* update-276 - section status pips: red not started, amber part done, green all done */
.app-body .sect-det > summary{display:flex;align-items:center;gap:10px}
.app-body .sect-det > summary h4{flex:1;margin:0}
.app-body .sect-pip{width:14px;height:14px;border-radius:5px;flex:0 0 auto;
  border:1.5px solid transparent;transition:background .18s ease,border-color .18s ease}
.app-body .sect-pip.pip-none{background:rgba(229,72,77,.18);border-color:#e5484d}
.app-body .sect-pip.pip-part{background:rgba(245,165,36,.22);border-color:#f5a524}
.app-body .sect-pip.pip-all{background:#34c77b;border-color:#34c77b}
@media (prefers-reduced-motion:reduce){ .app-body .sect-pip{transition:none} }

/* update-277 - Food page: the add form comes first, the day's record follows */
.app-body .fl-sub{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--slate);font-weight:800;margin:0 0 10px}
.app-body .fl-sub-logged{margin:26px 0 12px;padding-top:18px;border-top:1px solid var(--line)}
.app-body .foodadd{margin-top:4px}

/* update-278 - Food page: tiles, one clear add action, and readable meal rows */
.app-body .food-addbtn{margin:14px 0 4px;min-height:52px;font-size:1rem}
.app-body .sheet-tall{max-height:88vh}
.app-body .meal-host .foodadd{display:block}
.app-body .meal-host .foodadd[hidden]{display:none !important}

.app-body .foodmeal{background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:14px;padding:12px 14px;margin-bottom:10px}
.app-body .foodmeal-top{display:flex;align-items:flex-start;gap:10px}
.app-body .foodmeal-name{flex:1;font-weight:800;font-size:1rem;line-height:1.3;color:#fff}
.app-body .foodmeal-x{flex:0 0 auto;width:32px;height:32px;border-radius:9px;border:none;
  background:none;color:var(--slate);font-size:1.2rem;line-height:1;cursor:pointer}
.app-body .foodmeal-x:active{background:rgba(229,72,77,.16);color:#e5484d}
.app-body .foodmeal-h{display:flex;align-items:center;gap:8px;margin:6px 0 10px}
.app-body .foodmeal-h .meal-type{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:800;color:var(--slate);background:rgba(255,255,255,.06);
  padding:3px 8px;border-radius:6px}
.app-body .foodmeal-time{background:none;border:none;color:var(--slate);font-size:.85rem;padding:0}
.app-body .foodmeal-chips{display:flex;flex-wrap:wrap;gap:6px}
.app-body .fmchip{font-size:.76rem;font-weight:700;padding:4px 9px;border-radius:8px;
  background:rgba(255,255,255,.06)}
.app-body .fmchip.fm-k{color:#6fdcc8;background:rgba(42,169,160,.16)}
.app-body .fmchip.fm-p{color:#7ef0ac;background:rgba(52,199,123,.16)}
.app-body .fmchip.fm-c{color:#ff8a5c;background:rgba(255,107,53,.16)}
.app-body .fmchip.fm-f{color:#ffc768;background:rgba(245,165,36,.16)}
.app-body .food-empty{padding:14px 2px}

/* update-278 - teal hue for the install card, matching the kcal/balance palette */
.app-body .hub-chip.chip-teal{background:rgba(42,169,160,.16);color:#6fdcc8}
.app-body .hub-open.open-teal{color:#6fdcc8}

/* update-281 - the quick-action strip now carries a fourth tile (Start workout)
   on days that have a session, and three on days that do not. A fixed 3-column
   grid would drop the fourth onto a lonely second row, so the strip counts its
   own children instead. */
.app-body .qa-strip{grid-template-columns:repeat(2,1fr)}
@media (min-width:520px){ .app-body .qa-strip{grid-template-columns:repeat(4,1fr)} }
.app-body .qa-strip:not(:has(.qa-start)){grid-template-columns:repeat(3,1fr)}
.app-body .qa-tile{padding:14px 8px}
.app-body .qa-label{text-align:center;line-height:1.25}
/* The primary action of the day reads as primary. */
.app-body .qa-start{border-color:rgba(255,107,53,.42);background:rgba(255,107,53,.07)}
.app-body .qa-start .hub-chip{background:var(--orange);color:#fff}

/* update-282 - logged kcal shown beside a ticked exercise */
.app-body .ex-kcal{font-size:.74rem;font-weight:800;letter-spacing:.01em;
  color:#6fdcc8;background:rgba(42,169,160,.16);
  padding:3px 8px;border-radius:7px;white-space:nowrap;margin-left:8px}
.app-body .ex-kcal[hidden]{display:none !important}

/* update-283 - amber dot on an exercise with logged data that is not ticked.
   Same amber as the part-done section pip. It sits inside the .ex-done label,
   beside the name, so pointer-events:none keeps it out of hit-testing and the
   dot behaves as part of the name's tap target rather than as a dead zone in
   the middle of it. Tapping it therefore ticks the exercise, exactly as
   tapping the name already does. */
.app-body .ex-h .ex-flag{width:10px;height:10px;border-radius:50%;flex:0 0 auto;
  background:#f5a524;box-shadow:0 0 0 3px rgba(245,165,36,.18);
  display:inline-block;pointer-events:none}
.app-body .ex-h .ex-flag[hidden]{display:none !important}