/* 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-310: the row controls read as icons with no meaning. A "Reorder" hint
   labels the pair, and Remove says what it does rather than showing a bare x. */
.wed-rowtools{align-items:center;flex-wrap:wrap}
.wed-toolhint{margin-right:auto;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.06em;color:#9DB2C8}
.wed-rowtools .wed-up,.wed-rowtools .wed-down{min-width:44px;font-size:1rem;line-height:1}
/* update-313: the reorder controls live in the card HEADER, so they are visible
   without opening anything. update-312 put them inside .ex-body, which is the
   Video & notes panel: hidden by default, and MOVED into a modal sheet on open,
   which also broke closest(".ex-det") in the click handler. */
.ex-reorder{display:flex;align-items:center;gap:6px;margin-top:2px}
.ex-reorder .exmove-up{color:#34c77b;border-color:rgba(52,199,123,.45);min-width:44px;
  font-size:1rem;line-height:1;padding:4px 8px}
.ex-reorder .exmove-down{color:#E86A5C;border-color:rgba(232,106,92,.45);min-width:44px;
  font-size:1rem;line-height:1;padding:4px 8px}
.app-body .ex-h .ex-reorder .wed-toolhint{margin-right:2px}
/* Stated once under the Exercises header, not repeated on every card. */
.ex-reorder-note{margin:0 0 8px;font-size:.78rem}

/* update-312: direction is the thing being communicated, so colour it. Green up,
   red down, and Remove stays a neutral outline so it does not compete. */
.wed-rowtools .wed-up{color:#34c77b;border-color:rgba(52,199,123,.45)}
.wed-rowtools .wed-down{color:#E86A5C;border-color:rgba(232,106,92,.45)}
.wed-rowtools .wed-del{color:#9DB2C8;border-color:rgba(255,255,255,.16)}
.wed-all{display:flex;align-items:flex-start;gap:8px;width:100%;margin:4px 0 0;
  font-size:.88rem;line-height:1.4;color:#9DB2C8}
.wed-all input{flex:0 0 auto;margin-top:2px}

/* update-307: "Edit this day's meals" inside an expanded diary day. Full width
   so it reads as the action for the whole day, not for one meal. */
.diary-edit{display:block;width:100%;margin:0 0 10px}

/* 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:block}
.wed-dbody{display:flex;flex-direction:column;gap:8px;padding-top:10px;margin-top:10px;
  border-top:1px solid var(--line)}
.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}

/* ---- update-314: reorder arrow colours, stated so nothing can outrank them ----
   The 313 rules were .ex-reorder .exmove-up and .wed-rowtools .wed-up, both
   (0,2,0) and both ABOVE .app-body .btn-ghost{color:var(--slate)} at line 1543,
   which is also (0,2,0) and therefore won on source order. Both arrow pairs
   rendered grey. This is UI invariant 31/32 again, and the same shape as S77.
   Fixed by carrying .app-body (0,3,0), landing LAST in the file, and stating
   absolute colours rather than routing through a variable that is redefined
   elsewhere. :hover is pinned too, or .app-body .btn-ghost:hover repaints them. */
.app-body .ex-reorder .exmove-up,
.app-body .ex-reorder .exmove-up:hover{color:#34c77b;border-color:rgba(52,199,123,.45)}
.app-body .ex-reorder .exmove-down,
.app-body .ex-reorder .exmove-down:hover{color:#E86A5C;border-color:rgba(232,106,92,.45)}
.app-body .wed-rowtools .wed-up,
.app-body .wed-rowtools .wed-up:hover{color:#34c77b;border-color:rgba(52,199,123,.45)}
.app-body .wed-rowtools .wed-down,
.app-body .wed-rowtools .wed-down:hover{color:#E86A5C;border-color:rgba(232,106,92,.45)}
.app-body .wed-rowtools .wed-del,
.app-body .wed-rowtools .wed-del:hover{color:#9DB2C8;border-color:rgba(255,255,255,.16)}

/* ---- update-320: Describe it / Photograph it read as buttons -------------
   They were bordered rows that looked like inert headings, so the two ways of
   logging a meal did not look tappable at all. Same <details> markup, so the
   open/close behaviour and the fr-body contents are untouched: only the
   summary is restyled. Orange fill, white text, stated absolutely rather than
   routed through a variable (UI invariant 31/32), and .app-body carried so
   nothing later in the sheet outranks it. */
.app-body .food-route{border:0;background:none;margin:10px 0}
.app-body .food-route summary,
.app-body .food-route summary:hover{background:#FF6B35;color:#fff;border-radius:14px;
  padding:14px;min-height:52px;box-shadow:0 1px 0 rgba(0,0,0,.18)}
.app-body .food-route summary b,
.app-body .food-route summary .fr-sub,
.app-body .food-route summary .fr-ico{color:#fff}
.app-body .food-route summary b{font-size:15px}
.app-body .food-route summary .fr-sub{opacity:.85}
.app-body .food-route summary::after{color:#fff;font-size:21px}
/* Open: dim the button so the panel below it is what the eye lands on. */
.app-body .food-route[open]{border:0;background:none}
.app-body .food-route[open] summary{border-radius:14px 14px 0 0;background:#e85f2c}
.app-body .food-route[open] .fr-body{border:1px solid rgba(255,107,53,.32);border-top:0;
  border-radius:0 0 14px 14px;padding:14px;background:rgba(255,107,53,.05)}

/* ---- update-321: the week editor folds, one day at a time ---------------- */
.app-body .wed-sum{list-style:none;cursor:pointer;display:flex;align-items:baseline;
  gap:8px;flex-wrap:wrap;min-height:44px;padding:2px 0}
.app-body .wed-sum::-webkit-details-marker{display:none}
.app-body .wed-sum::after{content:"+";margin-left:auto;font-family:var(--font-mono);
  color:#FF6B35;font-size:19px;line-height:1;align-self:center}
.app-body .wed-day[open] > .wed-sum::after{content:"\2212"}
.app-body .wed-sum b{font-size:1rem;color:#E8EEF5}
.app-body .wed-sum-loc{font-family:var(--font-mono);font-size:12px;color:#FF6B35}
.app-body .wed-sum-title{font-size:13px;color:#DFE9F4}
.app-body .wed-sum-n{font-family:var(--font-mono);font-size:12px;color:#9DB2C8}
.app-body .wed-day[open]{border-color:rgba(255,107,53,.32)}
/* A touched day stays visible as touched once it is folded away again. */
.app-body .wed-day[data-dirty="1"] > .wed-sum b::after{content:" \2022";color:#FF6B35}

/* ---- update-322: the refusal is shown next to the row that caused it ---- */
.app-body .wed-daymsg:empty{display:none}
.app-body .wed-daymsg{color:#E86A5C;font-size:.82rem}

/* ---- update-324: a week that has moved says so ------------------------- */
.app-body .wk-paused{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.06em;color:#FF6B35;border:1px solid rgba(255,107,53,.42);
  border-radius:999px;padding:2px 8px;margin-left:8px}
.app-body .wk-when{font-family:var(--font-mono);font-size:11px;color:#9DB2C8;margin-left:auto}

/* ---- update-326: Add a meal is the page's primary action ----------------
   It was a ghost button with no bottom margin, so the first saved meal card
   started against its lower edge and read as overlapping it. btn-primary also
   carries a downward box-shadow, which needs clearance of its own. */
.app-body .mm-addbtn{display:inline-flex;margin:2px 0 16px}
.app-body #mmAddHost:not(:empty){margin-bottom:16px}

/* ---- update-327: search your saved meals --------------------------------
   UI invariant 33: .hist-row is display:flex in two places, so the [hidden]
   attribute alone does nothing and every "filtered out" row would stay on
   screen. State it. */
.app-body #mmList .hist-row[hidden]{display:none !important}
.app-body .mm-noresults[hidden]{display:none !important}
.app-body .mm-searchrow{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.app-body .mm-search{flex:1 1 auto;min-width:0}
.app-body .mm-count{font-family:var(--font-mono);font-size:12px;color:#9DB2C8;white-space:nowrap}
.app-body .mm-noresults{margin:6px 2px}

/* ---- update-328: shared period selector --------------------------------
   Absolute colours and .app-body carried, per UI invariants 31 and 32: a
   <button> does not inherit page colour, and routing the active state through
   a variable is how the admin tiles broke twice. */
.app-body .prog-wins{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 4px}
.app-body .prog-win{min-height:34px;padding:6px 12px;border-radius:999px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;
  color:#9DB2C8;border-color:rgba(255,255,255,.16);background:transparent}
.app-body .prog-win:hover{color:#DFE9F4}
.app-body .prog-win.is-on,
.app-body .prog-win.is-on:hover{background:#FF6B35;color:#fff;border-color:transparent;font-weight:650}

/* ---- update-329 -----------------------------------------------------------
   1. The period buttons sat almost against the top of the first ring on a
      phone. They are a control for the grid, not part of it.
   2. .pd-num inherits its size from .pd-mid, so a long value simply spilled
      past the circle. Step it down by length instead. */
.app-body .prog-wins{margin:16px 0 20px}
.app-body .pd-num-sm{font-size:.78em;letter-spacing:-.01em}
.app-body .pd-num-xs{font-size:.62em;letter-spacing:-.02em}
@media (max-width:520px){
  .app-body .prog-wins{margin:14px 0 22px;gap:5px}
  .app-body .prog-win{padding:6px 10px}
}

/* ---- update-330: the week as a pulse trace, and the day page ------------
   Signature taken from the Kinetic Pulse mark: a spine down the week with a
   node per day, where the NODE IS THE STATUS rather than a decoration of it.
   Absolute colours and .app-body carried throughout (UI invariants 31/32). */
.app-body .week-blk{margin-bottom:26px}
.app-body .wk-beats{display:flex;align-items:center;gap:5px;margin:9px 0 14px}
.app-body .beat{width:22px;height:3px;border-radius:2px;background:rgba(255,255,255,.12)}
.app-body .beat.on{background:#34c77b}
.app-body .beat.now{background:#FF6B35}
.app-body .wk-beats span{font-family:var(--font-mono);font-size:10.5px;color:#8CA1B8;margin-left:4px}

.app-body .trace{position:relative;padding-left:34px}
.app-body .trace::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:2px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.11) 12%,rgba(255,255,255,.11) 88%,transparent)}
.app-body .trace .days{display:flex;flex-direction:column;gap:11px;position:relative}

.app-body .trace .day{position:relative;display:grid;grid-template-columns:52px 1fr auto;
  align-items:center;gap:14px;width:100%;text-align:left;font:inherit;color:#E9EFF6;cursor:pointer;
  background:linear-gradient(180deg,#16283B,#0F1E2E);border:1px solid rgba(255,255,255,.07);
  border-radius:15px;padding:14px 15px;
  transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease}
.app-body .trace .day:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.2);
  box-shadow:0 14px 30px -18px rgba(0,0,0,.9)}
.app-body .trace .day:active{transform:translateY(0)}
.app-body .trace .day:focus-visible{outline:2px solid #FF6B35;outline-offset:3px}
.app-body .trace .day::before{content:"";position:absolute;left:-28px;top:50%;margin-top:-4px;
  width:9px;height:9px;border-radius:50%;background:#0A1521;border:2px solid rgba(255,255,255,.22)}
.app-body .trace .day.done::before{background:#34c77b;border-color:#34c77b;box-shadow:0 0 0 4px rgba(52,199,123,.14)}
.app-body .trace .day.part::before{background:#f5a524;border-color:#f5a524}
.app-body .trace .day.today::before{background:#FF6B35;border-color:#FF6B35;box-shadow:0 0 0 5px rgba(255,107,53,.18)}
.app-body .trace .day.today{border-color:rgba(255,107,53,.42);
  background:linear-gradient(180deg,rgba(255,107,53,.11),#0F1E2E)}
.app-body .trace .day.skip{opacity:.55}

.app-body .d-date{text-align:center}
.app-body .d-wd{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#8CA1B8}
.app-body .d-dd{display:block;font-family:var(--font-mono);font-size:27px;font-weight:700;
  line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.03em;margin-top:1px;color:#E9EFF6}
.app-body .trace .day.done .d-dd{color:#34c77b}
.app-body .trace .day.today .d-dd{color:#FF6B35}
.app-body .d-main{min-width:0}
.app-body .d-title{display:block;font-weight:650;font-size:15.5px;letter-spacing:-.012em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-body .d-meta{display:flex;align-items:center;gap:6px;margin-top:5px}
.app-body .d-meta .chip{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;padding:2.5px 7px;border-radius:999px;
  border:1px solid rgba(255,255,255,.13);color:#8CA1B8}
.app-body .d-meta .chip.gym{color:#8fc6ee;border-color:rgba(61,143,212,.38);background:rgba(61,143,212,.09)}
.app-body .d-n{font-family:var(--font-mono);font-size:11px;color:#8CA1B8;font-variant-numeric:tabular-nums}
.app-body .d-right{display:flex;align-items:center;gap:10px}
.app-body .d-right .st{font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.09em;padding:4px 8px;border-radius:999px;white-space:nowrap}
.app-body .d-right .st.done{color:#34c77b;background:rgba(52,199,123,.12);border:1px solid rgba(52,199,123,.4)}
.app-body .d-right .st.part{color:#f5a524;background:rgba(245,165,36,.1);border:1px solid rgba(245,165,36,.4)}
.app-body .d-right .st.skip{color:#8CA1B8;border:1px solid rgba(255,255,255,.13)}
.app-body .d-right .st.today{color:#fff;background:#FF6B35;border:1px solid transparent;font-weight:650}
.app-body .chev{color:rgba(255,255,255,.28);font-size:17px;line-height:1}

/* ---- the day page ---- */
.app-body .pd-back{margin:6px 0 14px}
.app-body .dp{position:relative;overflow:hidden;border-radius:18px;padding:20px 18px 18px;
  margin-bottom:18px;border:1px solid rgba(255,107,53,.24);
  background:linear-gradient(160deg,rgba(255,107,53,.15),rgba(15,30,46,.5) 60%),#0F1E2E}
.app-body .dp svg{position:absolute;right:-10px;top:14px;width:190px;height:54px;opacity:.5}
.app-body .dp-when{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:#FF6B35}
.app-body .dp-title{font-size:25px;font-weight:800;letter-spacing:-.028em;margin:7px 0 3px;position:relative;z-index:1}
.app-body .dp-goal{color:#8CA1B8;font-size:14px;max-width:26ch}
.app-body .dp-stats{display:flex;gap:22px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.09)}
.app-body .dp-stat b{display:block;font-family:var(--font-mono);font-size:19px;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.app-body .dp-stat span{font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.1em;color:#8CA1B8}
.app-body .dp-stat.ok b{color:#34c77b}

.app-body details.sect{background:#0F1E2E;border:1px solid rgba(255,255,255,.07);
  border-radius:15px;margin-bottom:11px;overflow:hidden}
.app-body details.sect>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:11px;padding:15px;min-height:54px;font-weight:650;font-size:15px;letter-spacing:-.01em}
.app-body details.sect>summary::-webkit-details-marker{display:none}
.app-body details.sect .rail{width:3px;height:19px;border-radius:2px;background:#8CA1B8;flex:none}
.app-body details.sect.warm .rail{background:#3d8fd4}
.app-body details.sect.work .rail{background:#FF6B35}
.app-body details.sect.cool .rail{background:#2aa9a0}
.app-body details.sect .sect-n{font-family:var(--font-mono);font-size:10.5px;color:#8CA1B8;
  font-weight:400;letter-spacing:.06em}
.app-body details.sect>summary::after{content:"+";margin-left:auto;font-family:var(--font-mono);
  font-size:19px;color:#FF6B35;line-height:1}
.app-body details.sect[open]>summary::after{content:"\2212"}
.app-body details.sect[open]>summary{border-bottom:1px solid rgba(255,255,255,.07)}
.app-body .sect-body{padding:13px 15px 16px}
.app-body .sect-body ol{margin:0;padding-left:0;list-style:none;counter-reset:m}
.app-body .sect-body ol li{counter-increment:m;margin:9px 0;padding-left:26px;position:relative;font-size:14.5px}
.app-body .sect-body ol li::before{content:counter(m);position:absolute;left:0;top:1px;
  font-family:var(--font-mono);font-size:10.5px;color:#8CA1B8;border:1px solid rgba(255,255,255,.07);
  border-radius:50%;width:18px;height:18px;display:grid;place-items:center}
.app-body .sect-body .ex{padding:13px 0;border-top:1px solid rgba(255,255,255,.07)}
.app-body .sect-body .ex:first-child{border-top:none;padding-top:2px}
.app-body .sect-body .ex-h{display:flex;align-items:center;gap:8px}
.app-body .sect-body .ex-nm{font-weight:650;font-size:15px;letter-spacing:-.01em}
.app-body .sect-body .ex-presc{font-family:var(--font-mono);font-size:12px;color:#8CA1B8;
  margin-top:4px;font-variant-numeric:tabular-nums}
.app-body .sect-body .ex-note{color:#ff9b73;font-size:13px;margin-top:4px}
.app-body .sect-body .tick{margin-left:auto;color:#34c77b;font-size:13px;font-family:var(--font-mono)}
.app-body .dp ~ .note{background:rgba(61,143,212,.07);border:1px solid rgba(61,143,212,.26);
  border-radius:14px;padding:13px 15px;font-size:13.5px;color:#cbdff2;margin-bottom:16px}
@media (prefers-reduced-motion:reduce){.app-body .trace .day{transition:none}}

/* ---- update-331: finished, but with nothing recorded --------------------
   A hollow node with a ring: clearly "closed" rather than "trained", and
   distinguishable from both the filled green of a real session and the flat
   grey of a skipped one. */
.app-body .trace .day.empty::before{background:#0A1521;border-color:#8CA1B8;
  box-shadow:0 0 0 3px rgba(140,161,184,.12)}
.app-body .trace .day.empty{opacity:.82}
.app-body .d-right .st.empty{color:#8CA1B8;border:1px solid rgba(255,255,255,.18)}
.app-body .beat.empty{background:rgba(140,161,184,.45)}

/* ---- update-333 ----------------------------------------------------------
   "Train anyway" is the primary action on a break day, so it leads and the
   View plan link follows. The used-up note replaces the two buttons rather
   than sitting beside disabled ones. */
.app-body .empty #freeTrain{margin:2px 6px 8px 0}
.app-body .pz-used{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;
  color:#8CA1B8;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px 11px;
  display:inline-block}

/* ---- update-334: Simple and Detailed, one DOM -----------------------------
   Simple is the default for everyone. Detailed is exactly the app as it was.
   The mode is ONE class on <body>: no render function forks, so the two cannot
   drift. .fold is the disclosure; .detail-only is the layer beneath it that
   Simple hides entirely. Hiding, never deleting: the numbers still compute and
   still export. */
.app-body .fold{margin-top:6px;border-top:1px solid rgba(255,255,255,.07)}
.app-body .fold>summary{list-style:none;cursor:pointer;color:#8CA1B8;font-size:14px;
  padding:14px 0;display:flex;align-items:center;gap:8px;min-height:48px}
.app-body .fold>summary::-webkit-details-marker{display:none}
.app-body .fold>summary::after{content:"+";margin-left:auto;font-family:var(--font-mono);
  color:#FF6B35;font-size:18px;line-height:1}
.app-body .fold[open]>summary::after{content:"\2212"}
.app-body .fold-body{padding-bottom:14px}
/* Detailed: same folds, permanently open and unlabelled, so the page reads flat. */
.app-body.mode-detailed .fold{border-top:0}
.app-body.mode-detailed .fold>summary{display:none}
.app-body.mode-detailed .fold-body{padding-bottom:0}
.app-body.mode-simple .detail-only{display:none !important}

/* The mode switch itself. */
.app-body .seg{display:flex;background:rgba(255,255,255,.06);border-radius:12px;padding:4px;gap:4px}
.app-body .seg button{flex:1;font:inherit;font-size:14px;padding:11px;border:0;border-radius:9px;
  background:transparent;color:#8CA1B8;cursor:pointer}
.app-body .seg button.on{background:#FF6B35;color:#fff;font-weight:650}
.app-body .mode-seg{min-width:190px}

/* Builder: one obvious action, alternatives as quiet one-liners. */
.app-body .btn-big{width:100%;padding:20px;font-size:19px;border-radius:16px}
.app-body .recap{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.app-body .recap span{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;
  padding:6px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.07);color:#8CA1B8}
.app-body .alt{width:100%;text-align:left;font:inherit;cursor:pointer;background:#16283B;
  border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:15px;margin-bottom:9px;
  color:#E9EFF6}
.app-body .alt:hover{border-color:rgba(255,255,255,.2)}
.app-body .alt:focus-visible{outline:2px solid #FF6B35;outline-offset:2px}
.app-body .alt b{display:block;font-size:15.5px;font-weight:650}
.app-body .alt span{display:block;color:#8CA1B8;font-size:13.5px;margin-top:3px}

/* ---- update-335: the mode toggle at the top of More ---------------------- */
.app-body .mode-panel{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.app-body .mode-lbl{flex:1 1 190px;min-width:0}
.app-body .mode-lbl b{display:block;font-size:15.5px;font-weight:650}
.app-body .mode-lbl span{display:block;color:#8CA1B8;font-size:13.5px;margin-top:3px}
.app-body .mode-panel .mode-seg{flex:0 0 auto;min-width:186px}
/* The check-in fold sits inside its own panel, so it needs no top rule. */
.app-body .ci-fold{border-top:0}
.app-body .ci-fold>summary{padding:10px 0}

/* ---- update-337: Today, in Simple ----------------------------------------
   The exercise card carried twelve controls. This update is CSS ONLY: no
   markup moved, no handler changed, nothing removed. Detailed therefore cannot
   have shifted by even a pixel, which is the whole point.
   What stays in Simple is what someone out of breath needs: the name, the
   prescription, the safety cue, the set rows, Skip, Exercise done, and the
   photo logger (which is the least technical way to log anything we have).
   What goes is what only makes sense sitting down. */

/* Reorder arrows on every card. A list-management tool, not a gym tool. */
.app-body.mode-simple .ex-reorder-note{display:none !important}

/* Per-exercise AI coach. Real feature, wrong moment. */
.app-body.mode-simple .coachwrap{display:none !important}

/* Video and notes: reference material, read before or after, never mid-set. */
/* update-345: video and notes belong ON the exercise page. 337 hid them in
   Simple because mid-set is the wrong moment for reference material. That was
   right about the LIST and wrong about the page: a form video is exactly what
   you want on a screen dedicated to one movement.
   Hidden on the hero in Simple; always present inside the sheet, in BOTH
   modes. Inside the sheet they render inline rather than behind the toggle,
   because that toggle moves them into a SECOND sheet, and a sheet inside a
   sheet is not worth building. */
.app-body.mode-simple .ex-det:not(.in-sheet) .ex-notes{display:none !important}
.app-body.mode-simple .ex-det:not(.in-sheet) .ex-body{display:none !important}
.app-body .ex-sheet .ex-notes{display:none !important}
.app-body .ex-sheet .ex-body,
.app-body .ex-sheet .ex-body[hidden]{display:block !important;
  margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.07)}

/* The kcal field and Estimate with AI. A number you cannot act on.
   .exsnap stays: photographing a console is the EASIEST way to log. */
.app-body.mode-simple .cal-row .cal-cell{display:none !important}
.app-body.mode-simple .calest{display:none !important}

/* Weight type, Progression, Reps only, Drop set: four decisions per exercise. */
.app-body.mode-simple .wtype-row{display:none !important}
.app-body.mode-simple .wtype-lbl{display:none !important}
.app-body.mode-simple .setprog{display:none !important}
.app-body.mode-simple .setwtoggle:not(.setw-add){display:none !important}
.app-body.mode-simple .setdrop{display:none !important}

/* The energy hero keeps its ring and its net figure; the three-way split of
   food, exercise and steps is arithmetic, and the ring already says it. */
.app-body.mode-simple .energy-split{display:none !important}

/* ---- update-338: the body map opens as a sheet ---------------------------
   Inline, a 200x370 figure with forty tap targets rendered at whatever width
   was left in the phase, so the dots came out smaller than a fingertip. Full
   screen it has room. Both modes get this: it is a usability fix, not a
   Simple-only one. */
.app-body .bm-open{width:100%;text-align:left;font:inherit;cursor:pointer;min-height:56px;
  background:var(--field);border:1px solid rgba(255,255,255,.07);border-radius:13px;
  padding:15px;color:#E9EFF6;display:flex;align-items:center;gap:12px}
.app-body .bm-open:hover{border-color:rgba(255,255,255,.2)}
.app-body .bm-open:focus-visible{outline:2px solid #FF6B35;outline-offset:2px}
.app-body .bm-open-t{flex:1;min-width:0}
.app-body .bm-open-c{font-family:var(--font-mono);font-size:12px;color:#FF6B35;
  border:1px solid rgba(255,107,53,.42);border-radius:999px;padding:2px 9px}
.app-body .bm-open-c:empty{display:none}

.app-body .bm-sheet{position:fixed;inset:0;z-index:60;background:#0A1521;
  overflow-y:auto;-webkit-overflow-scrolling:touch}
.app-body .bm-sheet[hidden]{display:none !important}
.app-body .bm-sheet-in{max-width:520px;margin:0 auto;padding:16px 16px 40px}
.app-body .bm-sheet-head{position:sticky;top:0;z-index:2;background:#0A1521;
  display:flex;align-items:center;gap:12px;padding:8px 0 14px;
  border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:14px}
.app-body .bm-sheet-head b{font-size:18px;flex:1}
.app-body .bm-close{font:inherit;font-size:15px;font-weight:650;cursor:pointer;
  background:#FF6B35;color:#fff;border:0;border-radius:12px;padding:11px 20px;min-height:44px}
.app-body .bm-sheet .bodymap{width:100%;max-width:320px;height:auto;display:block;margin:0 auto}

/* ---- update-340: the way back out of a break-day session ----------------
   Quiet, above the session, and only rendered when the day is empty, so it can
   never hide work that has been logged. */
.app-body .freeback-row{margin:2px 0 12px}

/* ---- update-341: steps get their own card, ring and page ----------------- */
.app-body .st-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  font:inherit;color:#E9EFF6;cursor:pointer;border:1px solid rgba(255,255,255,.07)}
.app-body .st-card:hover{border-color:rgba(255,255,255,.2)}
.app-body .st-card:focus-visible{outline:2px solid #FF6B35;outline-offset:2px}
.app-body .st-card-l{flex:1;min-width:0}
.app-body .st-card-l b{display:block;font-size:26px;font-weight:750;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.app-body .st-card-l span{display:block;color:#8CA1B8;font-size:13px;margin-top:2px}
.app-body .st-card-cta{font-family:var(--font-mono);font-size:12px;color:#FF6B35;white-space:nowrap}

.app-body .ci-stepsrow{display:flex;align-items:center;justify-content:space-between;gap:12px}

.app-body .st-today{margin-bottom:12px}
.app-body .st-lbl{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:#8CA1B8;margin-bottom:8px}
.app-body .st-input{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}
.app-body .st-burn{font-size:13px;margin-top:8px;min-height:18px}
.app-body .st-avg{font-size:13px;margin:12px 0 0}

/* update-351: a bar chart with no labels and no numbers is decoration. Each
   column now carries its count above and its weekday below; over a long span
   those would collide, so the markup drops them and the tooltip carries it. */
.app-body .st-chart{display:flex;align-items:flex-end;gap:4px;margin-bottom:14px}
.app-body .st-col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.app-body .st-val{font-family:var(--font-mono);font-size:10px;color:#8CA1B8;
  font-variant-numeric:tabular-nums;min-height:12px}
.app-body .st-col.is-today .st-val{color:#FF6B35}
.app-body .st-bar{width:100%;height:104px;display:flex;align-items:flex-end}
.app-body .st-bar i{display:block;width:100%;background:#34c77b;border-radius:3px;opacity:.75}
.app-body .st-col.is-today .st-bar i{background:#FF6B35;opacity:1}
.app-body .st-wd{font-family:var(--font-mono);font-size:10px;color:#8CA1B8;text-transform:uppercase}
.app-body .st-col.is-today .st-wd{color:#FF6B35}
.app-body .st-date{margin-bottom:12px}
.app-body .st-stats{display:flex;gap:20px;padding-top:14px;border-top:1px solid rgba(255,255,255,.07)}
.app-body .st-stats b{display:block;font-family:var(--font-mono);font-size:18px;font-weight:700;
  font-variant-numeric:tabular-nums}
.app-body .st-stats span{font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.1em;color:#8CA1B8}

/* ---- update-344: Today exercises are heroes that open a sheet ------------
   The card is the SAME <details> as before; it is moved into the sheet and
   moved back, never re-rendered. Closed, its summary reads as a hero. */
.app-body .sess .ex-det{background:linear-gradient(180deg,#16283B,#0F1E2E);
  border:1px solid rgba(255,255,255,.07);border-radius:15px;padding:14px 15px;margin-bottom:10px;
  transition:transform .14s ease,border-color .14s ease}
.app-body .sess .ex-det:not(.in-sheet) > summary{cursor:pointer;list-style:none;position:relative;
  padding-right:20px}
.app-body .sess .ex-det:not(.in-sheet) > summary::-webkit-details-marker{display:none}
/* The chevron says "this opens something", which a bare row does not. */
.app-body .sess .ex-det:not(.in-sheet) > summary::after{content:"\203A";position:absolute;
  right:0;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.28);font-size:19px;line-height:1}
.app-body .sess .ex-det:not(.in-sheet):hover{transform:translateY(-2px);border-color:rgba(255,255,255,.2)}
.app-body .sess .ex-det:focus-within{border-color:rgba(255,107,53,.4)}
/* Closed in the list, the body is never shown: the sheet is the only way in. */
.app-body .sess .ex-det:not([open]) > *:not(summary){display:none}

.app-body .ex-sheet{position:fixed;inset:0;z-index:70;background:rgba(6,14,24,.72);
  overflow-y:auto;-webkit-overflow-scrolling:touch}
.app-body .ex-sheet[hidden]{display:none !important}
.app-body .ex-sheet-in{max-width:560px;margin:0 auto;min-height:100%;background:#0A1521;
  padding:0 16px 40px}
.app-body .ex-sheet-head{position:sticky;top:0;z-index:2;background:#0A1521;display:flex;
  align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.07);
  margin-bottom:14px}
.app-body .ex-sheet-t{flex:1;font-size:18px;letter-spacing:-.015em;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-body .ex-sheet-close{background:#FF6B35;color:#fff;border:0;border-radius:12px;
  padding:11px 20px;min-height:44px;font-weight:650;font-size:15px}
/* In the sheet it is a plain panel: no hero chrome, no chevron, no hover lift. */
.app-body .ex-sheet .ex-det{background:none;border:0;border-radius:0;padding:0;margin:0;transform:none}
.app-body .ex-sheet .ex-det > summary{cursor:default;padding-right:0}
.app-body .ex-sheet .ex-det > summary::after{content:none}
.app-body.sheet-open{overflow:hidden}

/* ---- update-345: the sheet's action buttons ------------------------------
   In the list these buttons wrapped into a ragged block because each row is a
   separate container sized to its content. Full screen there is room, so they
   become one even stack: same width, same height, in the order you use them.
   Exercise done is last and filled, because it is the one that ends the card. */
.app-body .ex-sheet .setrow-btns,
.app-body .ex-sheet .cal-row{display:flex;flex-wrap:wrap;gap:10px}
.app-body .ex-sheet .setadd,
.app-body .ex-sheet .setwtoggle,
.app-body .ex-sheet .setdrop,
.app-body .ex-sheet .setprog,
.app-body .ex-sheet .exsnap,
.app-body .ex-sheet .calest,
.app-body .ex-sheet .ex-notes,
.app-body .ex-sheet .exskip{flex:1 1 46%;min-height:50px;justify-content:center;text-align:center}
.app-body .ex-sheet .exdonebtn{display:block;width:100%;min-height:54px;font-size:17px;
  margin-top:14px;border-radius:14px}
.app-body .ex-sheet .exremove{width:100%;min-height:50px}

.app-body .ex-sheet-foot{margin-top:22px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.07)}
.app-body .ex-sheet-back{width:100%;min-height:52px;font-size:16px;
  background:transparent;color:#DFE9F4;border:1px solid rgba(255,255,255,.18);border-radius:14px}
.app-body .ex-sheet-back:hover{border-color:rgba(255,255,255,.34)}

/* ---- update-346 ----------------------------------------------------------
   1. The three saved-notes fields fold behind one summary. Deliberately NOT
      class="fold": applyUiMode() force-opens every .fold in Detailed, and this
      needs to collapse in both modes.
   2. The reorder arrows belong on the hero, where you can see the order you
      are changing. Inside the exercise page there is nothing to reorder
      against, so they are noise. */
.app-body .exnotes-fold{margin-top:14px;border-top:1px solid rgba(255,255,255,.07)}
.app-body .exnotes-fold > summary{list-style:none;cursor:pointer;color:#8CA1B8;font-size:14px;
  padding:14px 0;display:flex;align-items:center;gap:8px;min-height:48px}
.app-body .exnotes-fold > summary::-webkit-details-marker{display:none}
.app-body .exnotes-fold > summary::after{content:"+";margin-left:auto;
  font-family:var(--font-mono);color:#FF6B35;font-size:18px;line-height:1}
.app-body .exnotes-fold[open] > summary::after{content:"\2212"}
.app-body .exnotes-fold .fold-body{padding-bottom:6px}

.app-body .ex-sheet .ex-reorder{display:none !important}

/* ---- update-347: the notes panel on the exercise page --------------------
   .ex-body carries margin-left:29px so that, inline in the list, it lines up
   under the done checkbox. On the exercise page there is no checkbox to line
   up with, so the panel sat indented while its fold row and border-top ran the
   full width, which is what looks off-centre. Full width, even padding, and
   the fold's own rule sits inside it rather than spanning the card. */
.app-body .ex-sheet .ex-body{margin:0;padding:16px;border-radius:14px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.app-body .ex-sheet .exnotes-fold{margin-top:0;border-top:0}
.app-body .ex-sheet .exnotes-fold > summary{padding:2px 0}
.app-body .ex-sheet .exnotes-fold[open] > summary{margin-bottom:10px;padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.07)}
.app-body .ex-sheet .exnotes-fold .fold-body{display:flex;flex-direction:column;gap:8px}
/* Exercise done ENDS the card, so the notes belong above it, not after it.
   order only works inside a flex parent, so the card becomes a flex column;
   everything without an order stays at 0 and keeps its document order. */
.app-body .ex-sheet .ex-det{display:flex;flex-direction:column}
.app-body .ex-sheet .ex-det > .ex-body{order:2}
.app-body .ex-sheet .ex-det > .exdonebtn{order:3}

/* ---- update-348: library entries are rows that open their own page -------
   The full panel is still rendered and wired; on the list it is presented as a
   row, and the detail page shows the same nodes expanded. One implementation. */
.app-body .lib-ex.lib-row{cursor:pointer;position:relative;padding-right:26px}
.app-body .lib-ex.lib-row:hover{border-color:rgba(255,255,255,.2)}
.app-body .lib-ex.lib-row::after{content:"\203A";position:absolute;right:8px;top:14px;
  color:rgba(255,255,255,.28);font-size:19px;line-height:1}
/* Everything past the heading row belongs to the page, not the list. */
.app-body .lib-ex.lib-row .lib-video,
.app-body .lib-ex.lib-row .lib-note,
.app-body .lib-ex.lib-row .lib-open,
.app-body .lib-ex.lib-row .lib-save,
.app-body .lib-ex.lib-row .lib-wtype,
.app-body .lib-ex.lib-row .lib-delrow,
.app-body .lib-ex.lib-row .lbl,
.app-body .lib-ex.lib-row .chk,
.app-body .lib-ex.lib-row .lib-msg{display:none !important}

/* ---- update-350: the library entry page ---------------------------------
   Back sits at the bottom left, which is where you are once you have edited
   the fields, rather than in the corner you scrolled away from. Its own class:
   Calories, Food diary and Steps keep their top-left .detail-back. */
.app-body .lib-back{display:block;margin:20px 0 0;min-height:50px;padding:13px 20px;
  border-radius:14px;background:transparent;color:#DFE9F4;border:1px solid rgba(255,255,255,.18)}
.app-body .lib-back:hover{border-color:rgba(255,255,255,.34)}
/* Save is the action of this page, so it looks like one. Absolute colour and
   .app-body carried, per UI invariants 31 and 32. */
.app-body .lib-ex:not(.lib-row) .lib-save{background:#FF6B35;color:#fff;border-color:transparent;
  font-weight:650;min-height:48px;padding:12px 22px}
.app-body .lib-ex:not(.lib-row) .lib-save:hover{filter:brightness(1.05)}