/* Look and feel taken from the HERD mockup: deep navy, warm beige, tan accents, Inter Tight. */
:root {
    --navy: #183642;
    --bg: #f2f2f2;
    --blue: #719fb5;
    --blue-text: #4f7f98;
    --tan: #d6c3a8;
    --tan-light: #e8dfcf;
    --tan-text: #8f7a56;
    --text: #183642;
    --muted: #6b737a;
    --line: #e6e4dc;
    --red: #a63f31;
    --red-bg: #f6e1dc;
    --green: #2f6f4d;
    --green-bg: #dcefe3;
    --m1: #7f6be0; --m2: #6c90e3; --m3: #58b4d8; --m4: #79c7b4; --m5: #e9c65c; --m6: #f0a04a; --m7: #ec7a2e;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font: 16px/1.5 "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--blue-text); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 .5rem; }
h2, .h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 .5rem; }
h3 { font-size: .95rem; font-weight: 700; margin: 1.2rem 0 .35rem; }
p { margin: 0 0 .75rem; }
main { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.crumb { margin: 0 0 .25rem; font-size: .85rem; }
.client-title { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }

/* Header */
.topbar { background: var(--navy); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.75rem; padding: .85rem 1.25rem; }
.brand { color: #fff; font-weight: 800; font-size: 1.5rem; letter-spacing: .02em; text-transform: uppercase; }
.brand:hover { text-decoration: none; }
.topbar nav { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; align-items: center; }
.topbar nav a, .topbar button.link { color: var(--tan); font-weight: 600; font-size: .92rem; }
.topbar nav a:hover, .topbar button.link:hover { color: #fff; text-decoration: none; }

/* Cards */
.card { background: #fff; border-radius: 22px; padding: 1.4rem 1.5rem; margin-bottom: 1rem; }
.card.dark { background: var(--navy); color: #fff; }
.card.dark h2 { color: #fff; }
.card.narrow { max-width: 480px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.grid > .card { margin-bottom: 0; }
.grid .wide { grid-column: 1 / -1; }
.row-between { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: .5rem 1rem; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.toolbar { margin: 0 0 1rem; }
.eyebrow, .cap { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--blue-text); margin: 0; }
.eyebrow.light { color: #9fc0d1; }

/* Tabs (the pill style from the mockup) */
.tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1.25rem; }
.tabs a { padding: .35rem 1.05rem; border-radius: 999px; border: 1.5px solid var(--tan); color: var(--tan-text); font-weight: 700; font-size: .85rem; background: transparent; }
.tabs a:hover { text-decoration: none; background: var(--tan-light); }
.tabs a.on { background: var(--tan); color: #fff; border-color: var(--tan); }

/* Forms */
label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: .8rem; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=time], input[type=number], input[type=search], input[type=tel], input[type=url], select, textarea {
    display: block; width: 100%; font: inherit; font-weight: 400; padding: .6rem .8rem; margin-top: .3rem;
    border: 1.5px solid #cdd0ca; border-radius: 12px; background: #fff; color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--navy); }
textarea { resize: vertical; }
.stack > * { margin-bottom: .65rem; }
.stack input, .stack select, .stack textarea { margin-top: 0; }
.stack label input { margin-top: .3rem; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.three { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .1rem .75rem; }
.inline-check { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; margin: 0; }
.inline-check input { width: auto; margin: 0; }
.form { max-width: 580px; }
.logform { margin-top: .75rem; }
.logcard summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; }
.logcard summary .h2 { margin: 0; }
fieldset.pickrow { border: 0; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
fieldset.pickrow legend { width: 100%; font-weight: 600; font-size: .88rem; margin-bottom: .4rem; padding: 0; }
.pick { position: relative; margin: 0; }
.pick input { position: absolute; opacity: 0; width: 100%; height: 100%; left: 0; top: 0; margin: 0; cursor: pointer; }
.pick span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--tan); background: #fff; color: var(--navy); font-weight: 700; font-size: .9rem; }
.pick input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.pick input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.pick.mood span { border: 0; color: var(--navy); opacity: .5; }
.pick.mood input:checked + span { opacity: 1; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--navy); }
.mood.m1 span, .dot.m1 { background: var(--m1); }
.mood.m2 span, .dot.m2 { background: var(--m2); }
.mood.m3 span, .dot.m3 { background: var(--m3); }
.mood.m4 span, .dot.m4 { background: var(--m4); }
.mood.m5 span, .dot.m5 { background: var(--m5); }
.mood.m6 span, .dot.m6 { background: var(--m6); }
.mood.m7 span, .dot.m7 { background: var(--m7); }
.pick.mood.m1 span, .pick.mood.m2 span { color: #fff; }

/* Buttons */
button, .button {
    font: inherit; font-size: .88rem; font-weight: 700; padding: .5rem 1.15rem; border-radius: 999px; cursor: pointer;
    border: 1.5px solid var(--tan); background: #fff; color: var(--navy); display: inline-block; line-height: 1.3;
}
button:hover, .button:hover { background: var(--tan-light); text-decoration: none; }
button.primary, .button.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
button.primary:hover, .button.primary:hover { background: #224b5b; }
button.small { padding: .2rem .7rem; font-size: .78rem; }
button.link { border: 0; background: none; padding: 0; border-radius: 0; }
button.link:hover { background: none; }
button:focus-visible, .button:focus-visible, a:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
form.inline { display: inline; margin: 0; }
/* Round 290: every button is the same height and lines up, whether it is a link or a real button.
   Normal 40px, small 32px. Big main actions (Add Activity, Visit Training Hub, scorecard, pay) keep their own larger size. */
.button, :where(button):not([class]), :where(button).primary, :where(button).secondary, :where(button).danger {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: 40px; line-height: 1.2; vertical-align: middle; box-sizing: border-box; text-align: center;
}
.button.small, :where(button).small { min-height: 32px; padding: .2rem .8rem; font-size: .8rem; }
button.link, button.link.small { min-height: 0; display: inline; padding: 0; }
.fm-starts .button { justify-content: flex-start; }
.layoutlinks button.link { color: #b9a37f; font-weight: 600; font-size: inherit; }
.button svg, :where(button).primary svg { flex: none; }
/* Round 290: My plan tabs fit a phone (icon over the label) instead of running off the screen */
@media (max-width: 560px) {
    .plantabs.pt-fit { overflow: visible; gap: .3rem; }
    .plantabs.pt-fit a { flex: 1 1 0; min-width: 0; flex-direction: column; gap: .15rem; padding: .45rem .15rem; min-height: 56px; border-radius: 16px; font-size: .74rem; line-height: 1.15; }
    .plantabs.pt-fit a .pt-ico { width: 20px; height: 20px; }
    .plantabs.pt-fit a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}
/* Round 290: an empty Mood/Energy tile on the coach Overview shows a faded neutral face, not a sad one */
.tile-empty-face { opacity: .4; }
form.push { margin-left: auto; }

/* Tables */
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .65rem .5rem; border-bottom: 1px solid var(--line); font-size: .92rem; vertical-align: top; }
th { color: var(--blue-text); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.trunc { max-width: 260px; color: var(--muted); }
td.rowactions { white-space: nowrap; text-align: right; }
td.rowactions > * { margin-left: .4rem; }
.delta { color: var(--muted); margin-left: .25rem; }

/* Lists */
.list, ul.plain { list-style: none; margin: 0 0 .75rem; padding: 0; }
.list li { display: flex; gap: .7rem; align-items: flex-start; padding: .65rem 0; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }
.list.notes li { justify-content: space-between; }
.list.notes p { margin: .3rem 0 0; }
.list li.archived { opacity: .6; }
.list.done span { color: var(--muted); }
ul.plain li { padding: .2rem 0; }
.label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--blue-text); margin-right: .35rem; }

/* Tick circle: tan outline with a dash, filling navy with a tick on hover */
.check { width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 2px solid var(--tan); background: #fff; position: relative; flex: none; margin-top: 1px; }
.check::before { content: ""; position: absolute; left: 5px; right: 5px; top: 50%; height: 2px; margin-top: -1px; background: var(--tan); }
.check:hover { background: var(--navy); border-color: var(--navy); }
.check:hover::before { left: 7px; right: auto; top: 3px; width: 6px; height: 11px; margin-top: 0; background: none; border: solid var(--tan); border-width: 0 2px 2px 0; transform: rotate(40deg); }

/* Tags and dots */
.tag { display: inline-block; font-size: .72rem; font-weight: 700; padding: .08rem .6rem; border-radius: 999px; background: var(--tan-light); color: #5a4d36; margin-left: .2rem; vertical-align: middle; }
.tag.late { background: var(--red-bg); color: var(--red); }
.tag.flag { background: #fbe9bd; color: #7a5a0a; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 .25rem 0 .6rem; vertical-align: baseline; }
.legend { margin: .5rem 0 0; font-size: .8rem; color: var(--muted); }
.legend .dot:first-child { margin-left: 0; }

/* Facts and stats */
.facts { display: grid; grid-template-columns: 8rem 1fr; gap: .3rem .75rem; margin: 0 0 .75rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.stat { text-align: right; }
.stat .big { display: block; font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.stat .cap { display: block; margin-top: .15rem; }
.snapgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem 1.25rem; margin-top: .5rem; }
.snapgrid .cap { display: block; margin-bottom: .15rem; }
.snapgrid .big { display: block; font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.snapgrid .small-big { font-size: 1.15rem; padding-top: .3rem; }
.snaplists { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: .75rem; border-top: 1px solid var(--line); }

/* Charts */
.chart { display: block; width: 100%; height: auto; margin-top: .5rem; }
.chart .gl { stroke: #dcdad0; stroke-width: 1; stroke-dasharray: 3 5; }
.chart .goal { stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 6 5; }
.chart .axis { font-size: 11px; fill: var(--muted); font-family: inherit; }
.chart .goal-text { fill: var(--blue-text); font-weight: 600; }
.macrobar { display: block; width: 100%; height: 14px; border-radius: 7px; overflow: hidden; margin: .5rem 0; }
.bigcal { font-size: 3rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin: .3rem 0 .9rem; }
.bigcal span { font-size: 1rem; font-weight: 500; color: #bcd0da; letter-spacing: 0; }
.macros { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin-top: .6rem; }
.macros div { position: relative; padding-left: 18px; display: flex; flex-direction: column; }
.macros strong { font-size: 1.3rem; font-weight: 700; line-height: 1.2; }
.macros div > span:last-child { font-size: .8rem; opacity: .75; }
.swatch { position: absolute; left: 0; top: .45rem; width: 11px; height: 11px; border-radius: 3px; }
.swatch.s1 { background: #3b86a8; }
.swatch.s2 { background: #d6c3a8; }
.swatch.s3 { background: #a7c4d2; }
.plan-notes { margin: 1rem 0 0; color: #d5e2e8; }
.calcresult { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 1rem; }

/* Notices */
.flash { padding: .7rem 1rem; border-radius: 14px; margin-bottom: 1rem; font-weight: 500; }
.flash.ok { background: var(--green-bg); color: var(--green); }
.flash.err { background: var(--red-bg); color: var(--red); }

.filters a { margin-right: 1rem; color: var(--muted); font-weight: 600; }
.filters a.on { color: var(--navy); border-bottom: 2px solid var(--tan); }
.searchbar { display: flex; gap: .5rem; margin: .75rem 0 1rem; }
.searchbar input { margin: 0; }

/* Sign in */
.login-page { background: var(--navy); display: grid; place-items: center; min-height: 100vh; }
.login-card { background: #fff; border-radius: 26px; padding: 2rem 1.75rem; width: min(400px, 92vw); margin: 0; }
.login-card h1 { font-size: 1.6rem; margin-bottom: 1rem; }
.brand-large { font-size: 1.1rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); margin-bottom: .25rem; }
.login-card button { width: 100%; margin-top: .5rem; padding: .7rem; }

@media (max-width: 600px) {
    h1 { font-size: 1.6rem; }
    .two { grid-template-columns: 1fr; }
    .card { padding: 1.1rem 1.1rem; border-radius: 20px; }
    .grid { grid-template-columns: 1fr; }
    .bigcal { font-size: 2.4rem; }
    .stat { text-align: left; }
    .chart .axis { font-size: 19px; }
    .facts { grid-template-columns: 7rem 1fr; }
}

/* ---- Phase 3: programs ---- */
.grow { flex: 1; min-width: 0; }
.items { width: 100%; min-width: 760px; }
.items th { white-space: nowrap; }
.items td { padding: .3rem .3rem; vertical-align: middle; }
.items input[type=text] { width: 100%; margin: 0; min-width: 7rem; }
.items td:first-child { min-width: 14rem; }
.items input.num, input.num { width: 4.2rem; margin: 0; text-align: center; }
.repcell { white-space: nowrap; }
.repcell input { display: inline-block; }
.dayadjust { margin-top: .75rem; border-top: 1px solid var(--line); padding-top: .75rem; }
.detailactions { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.exporttext { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; margin-top: .75rem; }
.calcresult h3 { margin: .1rem 0 .3rem; }
.calcresult ul.plain li { margin-bottom: .35rem; }

/* ---- Phase 4: security and privacy ---- */
.foot { text-align: center; font-size: .8rem; color: var(--muted); padding: 1rem 0 2rem; }
.foot a { color: var(--muted); }
.codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; margin: 1rem 0; }
.codes code, .setupkey code { background: var(--bg); padding: .45rem .7rem; border-radius: 10px; font-size: 1.05rem; letter-spacing: .06em; display: inline-block; }
.setupkey code { font-size: 1.2rem; }
.breakall { word-break: break-all; }
.consentbox { border: 1.5px solid var(--tan); border-radius: 16px; padding: .8rem 1rem; margin: 0 0 1rem; }
.consentbox legend { font-weight: 700; padding: 0 .4rem; color: var(--blue-text); }
.danger { border: 1.5px solid var(--red); }
.consent-warn { border-left: 6px solid var(--tan); }
.doc-page { background: var(--bg); }
.doc { max-width: 720px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.doc h2 { margin-top: 1.2rem; }

/* ---- Phase 6: client app ---- */
.clientapp .topbar { justify-content: space-between; }
.clientmain { max-width: 560px; margin: 0 auto; padding: 1rem 16px 2rem; }
.clientapp .hi { font-size: 2.1rem; font-weight: 800; color: var(--blue); letter-spacing: -0.02em; margin: .6rem 0 .1rem; }
.clientapp .lead { font-size: 1.05rem; color: var(--navy); margin: 0 0 1rem; }
.clientcard h1 { margin-top: 0; }
.clientcard { margin-top: 1.5rem; }
.consentline { align-items: flex-start; margin: .5rem 0 1rem; font-weight: 400; }
.consentline input { margin-top: .25rem; }
.habitlist { list-style: none; margin: .5rem 0 0; padding: 0; }
.habitlist li { padding: .35rem 0; }
.habitform { display: flex; align-items: center; gap: .9rem; margin: 0; }
.habitform span { font-size: 1.25rem; font-weight: 500; color: var(--navy); }
.habitform span.done { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.tick { position: relative; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; padding: 0; border: 2px solid var(--tan); background: #fff; cursor: pointer; }
.tick.on { background: var(--navy); border-color: var(--navy); }
.tick.on::after { content: ""; position: absolute; left: 13px; top: 7px; width: 9px; height: 17px; border: solid var(--tan); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.tick.off::after { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 2.5px; margin-top: -1px; background: var(--tan); border-radius: 2px; }
.tick:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.weekgrid { margin-top: .5rem; }
.wg-head, .wg-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(7, 26px); gap: 6px; align-items: center; }
.wg-head { color: var(--blue-text); font-weight: 700; font-size: .9rem; text-align: center; margin-bottom: .35rem; }
.wg-head .today { color: var(--navy); text-decoration: underline; }
.wg-row { padding: .5rem 0; border-top: 1px solid var(--line); }
.wg-name { font-weight: 600; font-size: .95rem; color: var(--navy); overflow-wrap: anywhere; }
.dotc { display: block; width: 22px; height: 22px; border-radius: 50%; margin: 0 auto; border: 2px solid var(--tan); position: relative; box-sizing: border-box; }
.dotc.on { background: var(--navy); border-color: var(--navy); }
.dotc.on::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 9px; border: solid var(--tan); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.dotc.future { border-color: var(--line); opacity: .7; }
.habittable td.c, .habittable th.c { text-align: center; padding: .35rem .25rem; }
.muted-light { color: #bcd0da; margin: .2rem 0 0; }
.clientapp .card.dark .button { background: transparent; color: var(--tan); border-color: var(--tan); }
@media (max-width: 600px) { .clientapp .hi { font-size: 1.9rem; } }

/* ===================== Coach layout (phase 8): sidebar, notifications, dashboard ===================== */
.coachshell { background: #f2f2f2; --sbw: 268px; }
.navc .coachshell { --sbw: 85px; }
.ico { width: 28px; height: 28px; flex: none; display: block; }
.ico .fill, .ncheck .fill { fill: currentColor; stroke: none; }
.shell { display: flex; min-height: 100vh; }
.shellmain { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shellmain > main { flex: 1; }

/* Sidebar */
.sidebar { width: var(--sbw); flex: none; background: var(--navy); color: var(--tan); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 1.6rem 1rem 1.4rem; overflow-y: auto; z-index: 30; transition: width .18s ease; }
.sbtop { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.6rem; padding: 0 .35rem; }
.logo { display: inline-flex; flex-direction: column; align-items: center; gap: .1rem; color: var(--tan); }
.logo:hover { text-decoration: none; }
.logo-full { width: 140px; height: auto; display: block; }
.logo-sub { font-style: italic; font-weight: 800; font-size: .9rem; color: var(--tan); letter-spacing: .01em; }
.logo-vert { display: none; width: 34px; height: auto; }
.sbtoggle, .sbclose { border: 0; background: none; padding: 0; border-radius: 6px; color: var(--blue); cursor: pointer; line-height: 0; }
.sbtoggle:hover, .sbclose:hover { background: none; color: #fff; }
.sbtoggle .ico { width: 30px; height: 30px; }
.sbclose { display: none; color: var(--tan); }
.sbnav { display: flex; flex-direction: column; gap: .35rem; }
.sbnav a { display: flex; align-items: center; gap: 1rem; padding: .7rem .8rem; border-radius: 12px; color: var(--tan); font-weight: 700; font-size: 1.05rem; }
.sbnav a:hover { text-decoration: none; background: rgba(255, 255, 255, .06); color: #fff; }
.sbnav a.on { background: #24505f; color: var(--tan); }
.sbfoot { margin-top: auto; padding: 0 .5rem; font-size: .9rem; font-weight: 700; }
.sbfoot a, .sbfoot button.link { display: block; color: var(--tan-light); padding: .55rem 0; font-size: .9rem; font-weight: 700; text-align: left; }
.sbfoot a:hover, .sbfoot button.link:hover { color: #fff; text-decoration: none; }
.sbfoot form { display: block; border-top: 1px solid rgba(214, 195, 168, .55); margin-top: .35rem; padding-top: .35rem; }
.sbback, .nback { display: none; }

/* Collapsed menu (desktop) */
.navc .sidebar { width: 85px; padding-left: .6rem; padding-right: .6rem; }
.navc .sbtop { flex-direction: column; align-items: center; gap: 1rem; padding: 0; }
.navc .logo-full, .navc .logo-sub, .navc .lbl { display: none; }
.navc .logo-vert { display: block; }
.navc .sbnav a { justify-content: center; padding: .7rem 0; }
.navc .sbfoot { padding: 0; text-align: center; }
.navc .sbfoot a, .navc .sbfoot button.link { font-size: .7rem; text-align: center; width: 100%; }
.navc .sbtoggle { transform: rotate(180deg); }

/* Top bar and greeting */
.mbar { display: none; }
.pagehead { display: flex; align-items: center; justify-content: flex-end; gap: 1.1rem; padding: 1.6rem 2rem 0; }
.hi { font-weight: 700; font-size: 1.15rem; margin-right: .4rem; }
.tool, button.tool { position: relative; display: inline-grid; place-items: center; padding: .3rem; border: 0; background: none; border-radius: 10px; color: var(--tan); cursor: pointer; line-height: 0; }
.tool:hover, button.tool:hover { background: rgba(214, 195, 168, .22); text-decoration: none; }
.tool .ico { width: 30px; height: 30px; }
.belldot { position: absolute; top: 3px; right: 5px; width: 9px; height: 9px; border-radius: 50%; background: #e0566a; box-shadow: 0 0 0 2px #f2f2f2; }
.mbar .belldot { box-shadow: 0 0 0 2px var(--navy); }
.searchbar { display: flex; gap: .6rem; padding: .8rem 2rem 0; max-width: 640px; margin-left: auto; width: 100%; }
.searchbar[hidden] { display: none; }
.searchbar input { margin: 0; }
.coachshell main { max-width: 1320px; width: 100%; margin: 0; padding: .5rem 2rem 4rem; }
.pagetitle { font-size: 2.2rem; margin: 0 0 1.6rem; }

/* Dashboard */
.dgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
.dcard { background: #fff; border-radius: 14px; padding: 1.3rem 1.5rem 1.4rem; }
.dcard.expanded { grid-column: 1 / -1; }
.dhead { display: flex; align-items: center; gap: .9rem; margin-bottom: .9rem; }
.dhead h2 { margin: 0 auto 0 0; font-size: 1.5rem; font-weight: 700; }
.viewall, button.viewall { color: #c5b394; font-weight: 500; font-size: .95rem; border: 0; background: none; padding: 0; border-radius: 0; cursor: pointer; }
.viewall:hover, button.viewall:hover { color: var(--tan-text); background: none; text-decoration: none; }
.xbtn, button.xbtn { border: 0; background: none; padding: 0; color: var(--tan); line-height: 0; cursor: pointer; border-radius: 6px; }
.xbtn:hover { background: none; color: var(--tan-text); }
.xbtn .ico { width: 22px; height: 22px; }
.dlist { list-style: none; margin: 0; padding: 0; }
.dlist li { border-bottom: 1px solid #e7e7e7; }
.trow { display: flex; align-items: center; gap: .85rem; padding: .85rem 0; }
.ttitle { flex: 1; min-width: 0; font-size: 1rem; }
.tclient { font-size: .8rem; color: var(--muted); margin-left: .35rem; }
.ncheck, button.ncheck { border: 0; background: none; padding: 0; color: #b9bcbf; line-height: 0; cursor: pointer; border-radius: 50%; flex: none; }
.ncheck:hover, button.ncheck:hover { background: none; color: var(--navy); }
.ncheck .ico { width: 22px; height: 22px; stroke-width: 1.5; }
.dwhen { white-space: nowrap; font-size: .95rem; font-weight: 500; }
.dwhen.bad { color: #e0566a; }
.dwhen.warn { color: #f0a020; }
.dwhen.good { color: #1fa86a; }
.drow { display: flex; align-items: center; gap: .6rem; padding: .7rem 0; }
.dlink { flex: 1; min-width: 0; display: flex; align-items: center; gap: .75rem; color: var(--text); }
.dlink:hover { text-decoration: none; }
.dlink:hover .dmsg { text-decoration: underline; }
.dtext { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.dwho { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #a39f95; }
.dmsg { font-size: .98rem; overflow: hidden; text-overflow: ellipsis; }
.avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .72rem; font-weight: 700; color: #fff; letter-spacing: .02em; }
.av0 { background: #d9a8c0; } .av1 { background: #2fa9e0; } .av2 { background: #6fbf98; } .av3 { background: #e3a65a; } .av4 { background: #9b8bd6; } .av5 { background: #e08585; }
.gtag { display: inline-block; font-size: .68rem; font-weight: 700; padding: .12rem .55rem; border-radius: 3px; margin: .15rem 0 .35rem; }
.gtag.solid { background: var(--tan); color: #fff; }
.gtag.outline { border: 1px solid var(--tan); color: var(--tan-text); margin-top: .7rem; }
.dempty { margin: 0; padding: .4rem 0 .8rem; }
.dmore { margin: .7rem 0 0; font-size: .85rem; color: var(--muted); }
.dcard:not(.expanded) .more { display: none; }
.dcard.expanded .dmore { display: none; }

/* Notifications */
.notifpanel { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: #fff; z-index: 60; padding: 1.5rem 1.4rem; overflow-y: auto; transform: translateX(105%); transition: transform .2s ease; box-shadow: -10px 0 40px rgba(24, 54, 66, .12); border-radius: 18px 0 0 18px; visibility: hidden; }
.notif-open .notifpanel { transform: none; visibility: visible; }
.nback { position: fixed; inset: 0; background: rgba(24, 54, 66, .35); z-index: 55; }
.notif-open .nback { display: block; }
.nhead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.ntitle { display: inline-flex; align-items: center; gap: .6rem; position: relative; color: var(--tan); }
.ntitle h2 { margin: 0; font-size: 1.5rem; color: var(--navy); }
.ntitle .belldot { top: 0; left: 15px; right: auto; box-shadow: 0 0 0 2px #fff; }
.nactions { display: inline-flex; align-items: center; gap: 1rem; }
.nactions button.link, .nclose { color: var(--muted); font-size: .92rem; font-weight: 500; }
.nactions button.link.accent { color: #c5b394; }
.nactions button.link:hover { color: var(--navy); }
.nclose .ico { width: 20px; height: 20px; }
.nlist { list-style: none; margin: 0; padding: 0; }
.nitem { display: flex; align-items: center; gap: .7rem; padding: .55rem .5rem; border-bottom: 1px solid #dfeceb; border-radius: 8px; }
.nitem.unread { background: #faf8f5; }
.nitem.read .nmsg, .nitem.read .nwho { opacity: .75; }
.nitem.read .ncheck { color: #b3b6b8; }
.nbody { flex: 1; min-width: 0; display: flex; align-items: center; gap: .65rem; color: var(--text); }
.nbody:hover { text-decoration: none; }
.nbody:hover .nmsg { text-decoration: underline; }
.ntext { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.nwho { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #a39f95; }
.nmsg { font-size: .95rem; }
.nitem.read .nmsg { color: var(--muted); }
.ntime { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.nitem.unread .ntime { color: #c5b394; }
.nempty { padding: 1rem .25rem; }
.notifpage { max-width: 640px; }
.notifpage .nhead { margin-bottom: .6rem; }

/* Phone and tablet: top bar and slide-in menu */
@media (max-width: 980px) {
    .dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
    .mbar { display: flex; align-items: center; justify-content: space-between; background: var(--navy); height: 80px; padding: 0 1.1rem; position: sticky; top: 0; z-index: 40; }
    .mbar .logo { align-items: flex-start; gap: 0; }
    .mbar .logo img { width: 92px; height: auto; }
    .mbar .logo-sub { font-size: .66rem; margin-left: 12px; }
    .mtools { display: inline-flex; align-items: center; gap: .35rem; }
    .mtools .tool .ico { width: 26px; height: 26px; color: var(--tan-light); }
    .pagehead { display: none; }
    .searchbar { padding: .8rem 1rem 0; max-width: none; }
    .coachshell main { padding: 1.2rem 1rem 3rem; }
    .pagetitle { font-size: 1.8rem; margin-bottom: 1.1rem; }
    .dgrid { grid-template-columns: 1fr; gap: 1rem; }
    .sidebar, .navc .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); padding: 1.4rem 1rem; transform: translateX(-105%); transition: transform .2s ease; visibility: hidden; box-shadow: 10px 0 40px rgba(0, 0, 0, .25); z-index: 50; }
    .menu-open .sidebar { transform: none; visibility: visible; }
    .sbback { position: fixed; inset: 0; background: rgba(24, 54, 66, .45); z-index: 45; }
    .menu-open .sbback { display: block; }
    .sbtoggle { display: none; }
    .sbclose { display: inline-block; }
    .navc .sbtop { flex-direction: row; align-items: flex-start; padding: 0 .35rem; }
    .navc .logo-full { display: block; }
    .navc .logo-sub { display: block; }
    .navc .lbl { display: inline; }
    .navc .logo-vert { display: none; }
    .navc .sbnav a { justify-content: flex-start; padding: .7rem .8rem; }
    .navc .sbfoot { padding: 0 .5rem; text-align: left; }
    .navc .sbfoot a, .navc .sbfoot button.link { font-size: .9rem; text-align: left; }
    .notifpanel { width: 100%; border-radius: 0; }
}
.ico .fill + path { stroke: #fff; }
.dhead h2 { font-size: 1.4rem; white-space: nowrap; }
.viewall, button.viewall { white-space: nowrap; }
.tclient { display: block; margin: 0; font-size: .78rem; }
.nactions button.link { white-space: nowrap; }
@media (max-width: 820px) { .notifpanel .ntitle h2 { font-size: 1.3rem; } .nactions { gap: .7rem; } }

/* ===================== Phase 9 ===================== */
/* Avatars: default #dbe7ea with white initials; clients can override (generated /avatars.css) */
.avatar { background: #dbe7ea; color: #ffffff; object-fit: cover; }
.avatar-img { padding: 0; }
.avatar-lg { width: 96px; height: 96px; font-size: 2rem; }
.profilecard .center { text-align: center; }
.profilepic { display: flex; justify-content: center; margin: .25rem 0 .75rem; }
input[type=color].colorpick { height: 48px; padding: 4px; cursor: pointer; }
input[type=file] { font: inherit; font-size: .9rem; margin-top: .3rem; }
.hdrright { display: inline-flex; align-items: center; gap: 1rem; }
.hdravatar .avatar { width: 36px; height: 36px; font-size: .8rem; box-shadow: 0 0 0 2px var(--tan); }
.clientapp .tabs { }

/* Colour coding: tasks and dates */
.dwhen.bad { color: #db6e76; }
.dwhen.good { color: #57d397; }

/* Colour coding: notifications. Read is grey, negative red, first 24 hours green, older tan. */
.nitem .ncheck, .nitem .ntime { color: #d6c3a7; }
.nitem.tone-new .ncheck, .nitem.tone-new .ntime { color: #57d397; }
.nitem.tone-old .ncheck, .nitem.tone-old .ntime { color: #d6c3a7; }
.nitem.tone-neg .ncheck, .nitem.tone-neg .ntime { color: #db6e76; }
.nitem.tone-read .ncheck, .nitem.tone-read .ntime, .nitem.tone-read .ncheck:hover { color: #bcbcbc; }
.nitem.unread.tone-neg { background: #fcf3f4; }
.nitem.client .nmsg { font-weight: 600; }
.clientpanel .nbody { padding: .2rem 0; }
.clientpanel .nitem { padding: .45rem .5rem; }
.clientpanel .nclose { line-height: 0; }
.nactions a.link { font-size: .92rem; font-weight: 500; }
.clients-open .clientpanel { transform: none; visibility: visible; }
.clients-open .nback { display: block; }

/* Mobile menu: scrolls so Account and Sign Out are always reachable */
@media (max-width: 820px) {
    .sidebar, .navc .sidebar { height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
    .sbfoot { margin-top: 1.5rem; }
    .mtools { gap: .1rem; }
    .mtools .tool .ico { width: 24px; height: 24px; }
}

/* Tasks: list/calendar toggle and calendar */
.viewtoggle { display: inline-flex; border: 1.5px solid var(--tan); border-radius: 999px; overflow: hidden; }
.viewtoggle a { padding: .35rem 1.1rem; font-weight: 700; font-size: .88rem; color: var(--tan-text); }
.viewtoggle a:hover { text-decoration: none; background: var(--tan-light); }
.viewtoggle a.on { background: var(--tan); color: #fff; }
.movebox { display: inline-flex; gap: .3rem; align-items: center; margin-left: auto; }
.movebox input[type=date] { margin: 0; padding: .2rem .4rem; width: auto; font-size: .8rem; border-radius: 8px; }
.calcard { padding: 1rem 1.1rem 1.2rem; }
.calhead { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.calhead h2 { margin: 0 auto 0 .4rem; font-size: 1.35rem; }
.calmsg { min-height: 1.2em; margin: 0 0 .4rem; color: var(--blue-text); }
.calscroll { overflow-x: auto; }
.calgrid { display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); gap: 4px; min-width: 770px; }
.calday.dow { text-align: center; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: .3rem 0; }
.calcell { min-height: 112px; background: #f7f7f5; border-radius: 10px; padding: .3rem .35rem; border: 2px solid transparent; }
.calcell.other { background: #fafafa; opacity: .65; }
.calcell.today { border-color: var(--tan); background: #fffdf8; }
.calcell.over, .undated.over { border-color: #57d397; background: #f0fbf5; }
.dnum { font-size: .78rem; font-weight: 700; color: var(--muted); }
.tchips { list-style: none; margin: .2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; min-height: 8px; }
.tchip { cursor: grab; font-size: .78rem; line-height: 1.2; padding: .22rem .4rem; border-radius: 7px; background: #fff; border-left: 4px solid #57d397; box-shadow: 0 1px 2px rgba(24, 54, 66, .12); overflow: hidden; }
.tchip small { display: block; color: var(--muted); font-size: .68rem; }
.tchip.late { border-left-color: #db6e76; }
.tchip.isdone { border-left-color: #bcbcbc; color: #8b9096; text-decoration: line-through; cursor: default; box-shadow: none; background: #f1f1f1; }
.tchip.dragging { opacity: .4; }
.undated { margin-top: .8rem; padding: .6rem; border: 2px dashed #dcd6c8; border-radius: 12px; }
.undated h3 { margin: 0 0 .3rem; font-size: .85rem; }
.undated .tchips { flex-direction: row; flex-wrap: wrap; }
.undated .tchip { max-width: 240px; }

/* ===================== Phase 10: Sessions ===================== */
.sesslist { padding: 1rem 1.2rem 1.2rem; }
.sessday { margin: 1rem 0 .3rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.sessday:first-child { margin-top: 0; }
.sessrow { display: flex; align-items: center; gap: .8rem; padding: .65rem .4rem; border-bottom: 1px solid #ececec; color: var(--text); border-radius: 8px; }
.sessrow:hover { background: #fafaf8; text-decoration: none; }
.sessrow.cancelled { opacity: .6; }
.sessrow.cancelled .sesstext strong { text-decoration: line-through; }
.sesstime { width: 4.4rem; font-weight: 700; line-height: 1.2; flex: none; }
.sesstime small { display: block; font-weight: 400; color: var(--muted); font-size: .72rem; }
.sesstext { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sesstext span { color: var(--muted); font-size: .88rem; }
.sesscost { font-weight: 600; font-size: .9rem; color: var(--tan-text); }
.linkbox { margin-top: .3rem; font-family: ui-monospace, Menlo, monospace; font-size: .78rem; }
.repeatbox { border: 1.5px solid var(--line); border-radius: 12px; padding: .6rem .9rem; margin: 0; }
.repeatbox legend { font-weight: 700; font-size: .85rem; padding: 0 .4rem; }
.narrownum { display: inline-block; width: 4.5rem; margin: 0 .3rem; }
.availrow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .4rem 0; border-bottom: 1px solid #efefef; }
.availrow strong { width: 6.5rem; }
.availwin { display: inline-flex; align-items: center; gap: .4rem; }
.availwin input { margin: 0; width: auto; }
button.danger, .button.danger { border-color: #db6e76; color: #b4424b; }
button.danger:hover { background: #fbe9ea; }
.dangerform { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid #efefef; display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; }
.list li.archived { opacity: .6; }
.tag.on { background: var(--navy); color: #fff; }

/* client app */
.sesscards { list-style: none; margin: 0; padding: 0; }
.sesscards li + li { border-top: 1px solid #efefef; }
.sesscards a { display: flex; align-items: center; gap: .9rem; padding: .8rem 0; color: var(--text); }
.sesscards a:hover { text-decoration: none; }
.sdate { width: 3rem; text-align: center; background: var(--navy); color: var(--tan); border-radius: 12px; padding: .3rem 0; line-height: 1.1; flex: none; }
.sdate b { display: block; font-size: 1.25rem; }
.sdate small { text-transform: uppercase; font-size: .66rem; letter-spacing: .06em; }
.stext { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.stext span { color: var(--muted); font-size: .88rem; }
.schev { font-size: 1.6rem; color: var(--tan); }
.slotgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .5rem; margin: .8rem 0; }
button.slot { padding: .65rem .4rem; border-radius: 12px; font-size: .95rem; border-color: var(--tan); background: #fff; }
button.slot:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.nextsession .nsl { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; color: var(--text); }
.nextsession .nsl span { color: #2f9a68; font-weight: 600; }
.nextsession .cap { margin-bottom: .2rem; }

/* ---- Phase 12: status colours, search, filters ---- */
.tag.st-active { background: #57d397; color: #357c57; }
.tag.st-archived { background: #bcbcbc; color: #7f7f7f; }
.filterbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .75rem 0 1rem; }
.filterbar input[type=search] { flex: 1 1 14rem; margin: 0; }
.filterbar select { flex: 0 1 12rem; margin: 0; width: auto; }
.filters .count { display: inline-block; margin-left: .25rem; font-size: .72rem; opacity: .75; }
.searchpage { display: flex; gap: .6rem; margin: .5rem 0 1.2rem; max-width: 640px; }
.searchpage input { margin: 0; }
.sgroup { margin-bottom: 1rem; }
.sgroup h2 { margin: 0 0 .5rem; font-size: 1rem; }
.slist { list-style: none; margin: 0; padding: 0; }
.slist li a { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; padding: .55rem 0; border-top: 1px solid #ecece6; text-decoration: none; color: inherit; }
.slist li:first-child a { border-top: 0; }
.slabel { font-weight: 600; }
.ssub { color: var(--muted, #6b747a); font-size: .85rem; }
.snear .slabel { font-weight: 500; }
.searchbar { position: relative; }
.suggest { position: absolute; left: 2rem; right: 2rem; top: 100%; z-index: 40; list-style: none; margin: .3rem 0 0; padding: .3rem; background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(24,54,66,.18); max-height: 60vh; overflow: auto; }
.suggest[hidden] { display: none; }
.suggest a { display: flex; gap: .6rem; align-items: baseline; padding: .55rem .7rem; border-radius: 10px; text-decoration: none; color: inherit; }
.suggest a:hover, .suggest a.on { background: #f1ede4; }
.suggest .sg-group { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: #8a7a58; min-width: 4.6rem; }
.suggest .sg-sub { color: #6b747a; font-size: .82rem; margin-left: auto; }
.suggest .sg-near { font-style: italic; }
@media (max-width: 760px) { .suggest { left: 1rem; right: 1rem; } }

/* ---- Phase 12: sessions ---- */
.sa-days { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: .4rem 0; }
.sa-day { display: inline-flex; align-items: center; gap: .3rem; margin: 0; font-weight: 600; }
.sa-day input { width: auto; margin: 0; }
.sa-quick { margin: .2rem 0 .9rem; }
.maplink { display: inline-block; margin-left: .4rem; font-size: .85rem; }
.mapframe { display: block; width: 100%; height: 220px; margin-top: .6rem; border: 0; border-radius: 14px; background: #ece8dd; }
.cancelpast { border-left: 4px solid #d6c3a7; }
.cancelpast h2 { margin-top: 0; }
.blocklist li { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }

/* ---- Phase 12: global calendar ---- */
.calhead .button { white-space: nowrap; }
.calbar { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin: .4rem 0 .6rem; }
.calnav { display: inline-flex; gap: .3rem; }
.calnav .button { padding: .35rem .8rem; }
.callabel { font-size: 1.1rem; flex: 1 1 auto; }
.calviews { display: inline-flex; background: #fff; border-radius: 999px; padding: .2rem; gap: .1rem; }
.calviews a { padding: .3rem .8rem; border-radius: 999px; text-decoration: none; color: #6b5d3f; font-weight: 600; font-size: .85rem; }
.calviews a.on { background: #183642; color: #fff; }
.calfilters { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .9rem; }
.calchip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 999px; border: 1.5px solid #d6c3a7; background: #fff; color: #6b5d3f; font-size: .82rem; font-weight: 600; text-decoration: none; }
.calchip .dot { width: .6rem; height: .6rem; border-radius: 50%; background: #bcbcbc; }
.calchip:not(.on) { opacity: .55; }
.calchip.sessions .dot { background: #25525f; }
.calchip.tasks .dot { background: #d6c3a7; }
.calchip.late .dot { background: #db6e76; }
.calchip.blocked .dot { background: #bcbcbc; }
.calchip.static { border-color: transparent; padding: .1rem .4rem; background: transparent; }
.calkey { margin-top: .8rem; }
.gcal-head, .gcal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.gcal-head span { text-align: center; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #8a7a58; padding: .2rem 0; }
.gday { background: #fff; border-radius: 12px; padding: .35rem .4rem; min-height: 6.2rem; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gcal.week .gday { min-height: 14rem; }
.gcal.fortnight .gday { min-height: 9rem; }
.gday.out { background: transparent; box-shadow: inset 0 0 0 1px #e4e0d4; }
.gday.out .gnum { opacity: .45; }
.gday.today { box-shadow: inset 0 0 0 2px #183642; }
.gnum { font-weight: 700; font-size: .85rem; color: #183642; text-decoration: none; }
.gnum small { font-weight: 500; color: #8a7a58; }
.gdow { display: none; font-weight: 500; color: #8a7a58; }
.gev { display: block; font-size: .72rem; line-height: 1.25; padding: .15rem .35rem; border-radius: 7px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gev b { font-weight: 700; }
.gmore { font-size: .72rem; color: #8a7a58; text-decoration: none; }
.ev-session { background: #dbe7ea; color: #183642; border-left: 3px solid #25525f; }
.ev-task { background: #f1e9d8; color: #5a4d36; border-left: 3px solid #d6c3a7; }
.ev-task.ev-done { background: #57d397; color: #1f5a3d; border-left-color: #357c57; text-decoration: line-through; }
.ev-task.ev-late { background: #db6e76; color: #fff; border-left-color: #b04a52; }
.ev-block { background: repeating-linear-gradient(135deg, #e3e3e3, #e3e3e3 6px, #efefef 6px, #efefef 12px); color: #6a6a6a; border-left: 3px solid #bcbcbc; }
.dayview .evlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.dayview .ev a { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: .8rem; align-items: center; padding: .7rem .9rem; border-radius: 12px; text-decoration: none; color: inherit; }
.evtime { font-weight: 700; } .evtime small { font-weight: 500; display: block; opacity: .75; }
.evtext { display: grid; } .evtext span { font-size: .85rem; opacity: .8; }
.evtype { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; opacity: .7; }
@media (max-width: 760px) {
    .callabel { flex-basis: 100%; order: 3; }
    .calviews { order: 2; }
    .gcal.week .gcal-head, .gcal.fortnight .gcal-head { display: none; }
    .gcal.week .gcal-grid, .gcal.fortnight .gcal-grid { display: grid; grid-template-columns: 1fr; gap: 6px; }
    .gcal.week .gday, .gcal.fortnight .gday { min-height: 0; flex-direction: column; padding: .55rem .7rem; }
    .gcal.week .gdow, .gcal.fortnight .gdow { display: inline; }
    .gcal.week .gday:not(.has), .gcal.fortnight .gday:not(.has) { opacity: .7; }
    .gcal.month .gday { min-height: 3.4rem; padding: .25rem; flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: 3px; }
    .gcal.month .gnum { flex: 0 0 100%; font-size: .78rem; text-align: center; }
    .gcal.month .gev { font-size: 0; width: .55rem; height: .55rem; padding: 0; border-radius: 50%; border: 0; }
    .gcal.month .gev.ev-session { background: #25525f; } .gcal.month .gev.ev-task { background: #d6c3a7; } .gcal.month .gev.ev-task.ev-done { background: #57d397; } .gcal.month .gev.ev-task.ev-late { background: #db6e76; } .gcal.month .gev.ev-block { background: #bcbcbc; }
    .gcal.month .gmore { font-size: .65rem; flex: 0 0 100%; text-align: center; }
    .dayview .ev a { grid-template-columns: 5rem 1fr; } .evtype { display: none; }
}

/* ---- Phase 13: public booking requests ---- */
.pendingnote { border-left: 4px solid #d6c3a7; background: #fbf7ee; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.slotpick { border: 0; padding: 0; margin: 0 0 .6rem; }
.slotpick legend { font-size: .88rem; font-weight: 600; margin-bottom: .4rem; padding: 0; }
.slotgrid label.slot { position: relative; display: block; margin: 0; padding: 0; cursor: pointer; }
.slotgrid label.slot input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.slotgrid label.slot span { display: block; text-align: center; padding: .55rem .4rem; border-radius: 12px; border: 1.5px solid #d6c3a7; background: #fff; font-weight: 600; }
.slotgrid label.slot input:checked + span { background: #183642; color: #fff; border-color: #183642; }
.slotgrid label.slot input:focus-visible + span { outline: 2px solid #183642; outline-offset: 2px; }
.check-line { display: flex; gap: .65rem; align-items: flex-start; font-weight: 400; line-height: 1.4; }
.check-line input { margin-top: .1rem; }
.reqcard { border-top: 1px solid #ecece6; padding: 1rem 0; }
.reqcard:first-of-type { border-top: 0; }
.reqcard h3 { margin: 0; }
.declinebox { margin-top: .6rem; }
.declinebox summary { cursor: pointer; font-weight: 600; color: #8a7a58; }
.tabs .count { display: inline-block; min-width: 1.2rem; padding: 0 .35rem; margin-left: .25rem; border-radius: 999px; background: #db6e76; color: #fff; font-size: .72rem; text-align: center; }
.dpending { margin: .2rem 0 .6rem; font-weight: 600; }
.dpending a { color: #8a4b50; }
.pushbox { margin: .4rem 0; }
.ev-request { background: #fff; color: #183642; border: 1.5px dashed #25525f; }
.calchip.requests .dot { background: #fff; box-shadow: inset 0 0 0 2px #25525f; }
@media (max-width: 760px) { .gcal.month .gev.ev-request { background: #fff; box-shadow: inset 0 0 0 1.5px #25525f; } }

/* Phase 14: every tick box is a square, sitewide */
input[type=checkbox] {
    -webkit-appearance: none; appearance: none; display: inline-block; flex: 0 0 auto; box-sizing: border-box;
    width: 1.3rem; height: 1.3rem; min-width: 1.3rem; padding: 0; margin: 0; vertical-align: middle;
    border: 2px solid #8a7a58; border-radius: 4px; background: #fff; cursor: pointer; position: relative;
}
input[type=checkbox]:hover { border-color: var(--navy); }
input[type=checkbox]:checked { background: var(--navy); border-color: var(--navy); }
input[type=checkbox]:checked::after {
    content: ""; position: absolute; left: .36rem; top: .1rem; width: .3rem; height: .62rem;
    border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
input[type=checkbox]:focus-visible { outline: 3px solid var(--tan); outline-offset: 2px; }
input[type=checkbox]:disabled { opacity: .5; cursor: not-allowed; }
.inline-check, .consentline, .sa-day, .check-line { cursor: pointer; }

/* Phase 14: add from the calendar */
.calhead-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.gday { position: relative; }
.gplus { position: absolute; top: .25rem; right: .3rem; width: 1.5rem; height: 1.5rem; line-height: 1.4rem; text-align: center; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 700; text-decoration: none; opacity: 0; transition: opacity .12s; }
.gday:hover .gplus, .gplus:focus-visible { opacity: 1; }
.gplus:hover { background: #25525f; text-decoration: none; }
.gnum-m { display: none; }
@media (max-width: 760px) {
    .gnum { display: none; }
    .gnum-m { display: block; font-weight: 700; font-size: .85rem; color: #183642; text-decoration: none; }
    .gcal.month .gnum-m { flex: 0 0 100%; font-size: .78rem; text-align: center; padding: .1rem 0; }
    .gcal.month .gnum-m .gdow { display: none; }
    .gplus { display: none; }
}
.calchip.checkins .dot { background: #8d6bb5; }
.calchip.events .dot { background: #e0a94c; }
.ev-checkin { background: #ece4f5; color: #4a3566; border-left: 3px solid #8d6bb5; }
.ev-checkin.ev-done { background: #57d397; color: #1f5a3d; border-left-color: #357c57; }
.ev-event { background: #fbefd3; color: #6b4d12; border-left: 3px solid #e0a94c; }
@media (max-width: 760px) { .gcal.month .gev.ev-checkin { background: #8d6bb5; } .gcal.month .gev.ev-event { background: #e0a94c; } }
.addtabs a.on { background: var(--tan); color: #fff; }

/* Phase 14b: add-to-calendar pop up */
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(24,54,66,.55); padding: 1rem; }
.modal-box { background: #fff; border-radius: 18px; padding: 1.25rem 1.4rem; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.modal-box h2 { margin: 0; }
.modal-x { background: none; border: 0; font-size: 1.8rem; line-height: 1; cursor: pointer; color: #183642; padding: 0 .4rem; }
.modal .pane[hidden] { display: none; }
body.modal-open { overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* Phase 15: swipe rows on phones */
@media (max-width: 760px) and (pointer: coarse) {
    form.swipe-ready { display: none !important; }
    .swipe-row { touch-action: pan-y; will-change: transform; }
}
.swipe-panel { position: absolute; z-index: 40; display: flex; overflow: hidden; background: #db6e76; }
.swipe-panel[hidden] { display: none !important; }
.swipe-panel button { flex: 1 0 92px; border: 0; border-radius: 0; margin: 0; padding: 0 .4rem; font: inherit; font-weight: 700; font-size: .85rem; color: #fff; cursor: pointer; }
.swipe-panel .swipe-del { background: #c94b55; }
.swipe-panel .swipe-arc { background: #7f7f7f; }
.swipe-tip { margin: 0 0 .4rem; }
.swipe-clip { overflow-x: clip; }

/* Phase 15: nothing may push a phone screen sideways */
@media (max-width: 760px) {
    .grid { grid-template-columns: minmax(0, 1fr) !important; }
    .grid > *, .card, .two > *, .three > * { min-width: 0; }
    .card table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .two { grid-template-columns: minmax(0, 1fr); }
    input, select, textarea { max-width: 100%; }
}
@media (max-width: 400px) {
    .calhead { flex-wrap: wrap; }
    .availwin { max-width: 100%; flex: 1 1 100%; }
    .availwin input { min-width: 0; flex: 1 1 0; }
    .dhead { flex-wrap: wrap; row-gap: .2rem; }
    .dhead h2 { min-width: 0; }
}

/* Phase 16: metric sliders */
.metrics3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; margin-bottom: .8rem; }
.metric { border: 1.5px solid #e4e0d4; border-radius: 16px; padding: .7rem .9rem .8rem; margin: 0 0 .8rem; background: #fff; min-width: 0; }
.metrics3 .metric { margin: 0; }
.metric legend { font-weight: 700; font-size: .88rem; padding: 0 .35rem; }
.metric-row { display: flex; align-items: center; gap: .8rem; margin-bottom: .6rem; }
.metric-icon { display: inline-flex; background: #183642; border-radius: 16px; padding: 8px; flex: 0 0 auto; }
.metric-label { display: block; font-size: 1.05rem; color: #183642; }
.metric:not(.touched) .metric-label { color: #8a8a8a; }
.metric-ask { display: block; line-height: 1.25; }
.metric-range { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; border-radius: 999px; background: linear-gradient(90deg, #719eb4, #e7e5de, #d6c3a7); margin: .5rem 0; padding: 0; border: 0; cursor: pointer; }
.metric-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #183642; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.metric-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #183642; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.metric-range:focus-visible { outline: 3px solid var(--tan); outline-offset: 4px; }
.metric:not(.touched) .metric-range::-webkit-slider-thumb { background: #b9b9b9; }
.metric:not(.touched) .metric-range::-moz-range-thumb { background: #b9b9b9; }
.metric-scale { display: flex; justify-content: space-between; gap: .2rem; font-size: .66rem; color: #7a7a7a; line-height: 1.2; }
.metric-scale span { flex: 1 1 0; text-align: center; min-width: 0; }
.metric-scale span:first-child { text-align: left; } .metric-scale span:last-child { text-align: right; }

/* Phase 16: client overview */
.clienthead { display: flex; align-items: center; gap: 1rem; margin: .2rem 0 .9rem; }
.clienthead .avatar { width: 64px; height: 64px; font-size: 1.4rem; flex: 0 0 64px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; }
.clienthead .client-title { margin: 0; font-size: 2.1rem; line-height: 1.1; }
.editlink { font-weight: 600; }
.clientmeta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; margin: .35rem 0 0; font-size: .78rem; }
.band { background: #183642; color: #e7e5de; display: flex; flex-wrap: wrap; align-items: stretch; padding: 1.2rem .6rem; margin-bottom: .6rem; gap: .8rem 0; }
.band.editing { padding-bottom: .8rem; }
.btile { flex: 1 1 150px; min-width: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 .9rem; border-left: 1px solid rgba(231,229,222,.22); gap: .15rem; }
.btile:first-child { border-left: 0; }
.bigfig { font-size: 3.4rem; font-weight: 800; line-height: 1; color: #fff; }
.bigfig.mid { font-size: 2.3rem; }
.unit { font-size: .85rem; color: #d6c3a7; }
.tcap { display: flex; flex-direction: column; font-size: .8rem; letter-spacing: .02em; margin-top: .35rem; color: #e7e5de; }
.tcap b { font-size: .95rem; color: #fff; letter-spacing: .04em; }
.tlevel { font-size: 1.3rem; font-weight: 700; color: #d6c3a7; margin-top: .25rem; }
.metric-tile { display: inline-flex; }
.btile .macrobar { width: 100%; max-width: 230px; height: 10px; border-radius: 5px; margin: .45rem 0; }
.macros { display: flex; gap: .7rem; font-size: .68rem; color: #c9c7c0; flex-wrap: wrap; justify-content: center; }
.macros b { color: #fff; margin-right: .2rem; font-size: .8rem; }
.macros i { display: inline-block; width: 8px; height: 8px; margin-right: .25rem; border-radius: 2px; }
.macros .mp { background: #3b86a8; } .macros .mc { background: #d6c3a8; } .macros .mf { background: #a7c4d2; }
.spark { width: 150px; height: 78px; }
.spark .sparkd { font-size: 8px; fill: #c9c7c0; }
.layoutlinks { display: flex; gap: 1.2rem; justify-content: flex-end; margin: 0 .3rem .8rem; font-size: .8rem; align-items: center; }
.layoutlinks a { color: #b9a37f; font-weight: 600; }
.tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; align-items: start; margin-bottom: 1rem; }
.tiles .card { margin-bottom: 0; }
.tile h2 { margin-top: 0; }
.viewall { font-size: .82rem; color: #b9a37f; font-weight: 600; }
.tile .actions { margin-top: .6rem; }
.tile.t-assistant { background: #d6c3a7; }
.habittable.mini { width: 100%; }
.habittable.mini td, .habittable.mini th { padding: .3rem .25rem; border: 0; }
.layoutbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border: 2px dashed #d6c3a7; }
.layoutbar p { margin: 0; }
.tilectl { margin-top: .6rem; padding-top: .5rem; border-top: 1px dashed rgba(128,128,128,.4); display: flex; gap: .4rem; justify-content: center; }
.band .tilectl { border-top-color: rgba(231,229,222,.35); }
.tile-move { padding: .25rem .8rem; border-radius: 999px; font-size: 1rem; line-height: 1; }
.band .tilectl .inline-check { color: #e7e5de; font-size: .78rem; }
.is-hidden { opacity: .45; }
.editing [data-tile] { outline: 2px dashed transparent; }
[data-arrange] [data-tile] { cursor: grab; outline-color: #d6c3a7; }
[data-arrange] [data-tile].dragging { opacity: .4; }
@media (max-width: 760px) {
    .btile { flex-basis: 45%; border-left: 0; padding: .6rem; }
    .clienthead .client-title { font-size: 1.6rem; }
    .bigfig { font-size: 2.8rem; }
}

/* Phase 17: tile widths and clickable summary */
.tiles .sz-3 { grid-column: span 3; } .tiles .sz-4 { grid-column: span 4; } .tiles .sz-6 { grid-column: span 6; } .tiles .sz-12 { grid-column: span 12; }
.band .btile.sz-3 { flex: 0 0 25%; } .band .btile.sz-4 { flex: 0 0 33.333%; } .band .btile.sz-6 { flex: 0 0 50%; } .band .btile.sz-12 { flex: 0 0 100%; border-left: 0; }
.tilebody { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .15rem; flex: 1 1 auto; width: 100%; color: inherit; text-decoration: none; border-radius: 12px; }
a.tilelink:hover { background: rgba(231,229,222,.09); text-decoration: none; }
a.tilelink:focus-visible { outline: 3px solid #d6c3a7; outline-offset: 2px; }
.sizepick { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .78rem; font-weight: 600; }
.sizepick select { width: auto; margin: 0; padding: .25rem .5rem; font-size: .78rem; border-radius: 8px; }
.tilectl { flex-wrap: wrap; align-items: center; }
@media (max-width: 1000px) { .tiles .sz-3, .tiles .sz-4 { grid-column: span 6; } }
@media (max-width: 760px) { .tiles .sz-3, .tiles .sz-4, .tiles .sz-6, .tiles .sz-12 { grid-column: span 12; } .band .btile.sz-3, .band .btile.sz-4 { flex: 0 0 50%; } .band .btile.sz-6, .band .btile.sz-12 { flex: 0 0 100%; } }

/* ===================== Phase 18 ===================== */
/* ---- Weekly report ---- */
.rep { background: #fff; border-radius: 22px; overflow: hidden; margin-bottom: 1rem; }
.rep-head { background: var(--navy); color: #fff; padding: 1.4rem 1.6rem; }
.rep-head .cap { color: #d6c3a7; margin: 0 0 .2rem; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.rep-head h2 { color: #fff; margin: 0; font-size: 1.6rem; }
.rep-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0 0; }
.rep-chips span { background: rgba(231,229,222,.16); color: #e7e5de; border-radius: 999px; padding: .2rem .8rem; font-size: .8rem; font-weight: 600; }
.rep-notes { margin: 1.2rem 1.6rem; padding: 1rem 1.2rem; background: #f6f1e8; border-left: 4px solid #d6c3a7; border-radius: 12px; }
.rep-notes .cap { margin: 0 0 .35rem; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #b9a37f; }
.rep-notes p { line-height: 1.6; }
.rep-sign { font-weight: 700; margin: .5rem 0 0; }
.rep-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; padding: 0 1.6rem; }
.rep-tile { background: #e7e5de; border-radius: 16px; padding: .9rem .6rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.rep-tile strong { font-size: 1.05rem; }
.rep-big { font-size: 1.7rem; font-weight: 800; line-height: 1.2; }
.rep-big small { font-size: .8rem; font-weight: 600; }
.rep-ico { display: inline-flex; }
.rep-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem 1.4rem; padding: 1rem 1.6rem 0; }
.rep-charts h3 { margin: .4rem 0 .2rem; font-size: .8rem; }
.repbars { display: block; width: 100%; max-width: 300px; height: auto; }
.repbars .rb-track { fill: #ece9e0; }
.repbars .rb-bar { fill: #719fb5; }
.repbars .rb-day { fill: #6b737a; font-size: 10px; font-family: inherit; }
.rep-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem 1.4rem; padding: .4rem 1.6rem 1.4rem; }
.rep-cols section { min-width: 0; }
.rep > .muted { padding: 0 1.6rem 1.2rem; margin: 0; }
.notesbox { width: 100%; min-height: 12rem; line-height: 1.6; resize: vertical; font-size: 1rem; }
.publishbox { margin-top: 1rem; padding: 1rem 1.2rem; background: #f6f1e8; border-radius: 16px; }
.publishbox h3 { margin-top: 0; }
.pubmeta { margin: .3rem 0 .8rem; }
.previewh { margin: 1.4rem 0 .6rem; font-size: 1rem; color: var(--muted); }
.newreport { background: #d6c3a7; }
.newreport .cap { margin: 0 0 .2rem; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 640px) {
    .rep-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 1rem; }
    .rep-charts, .rep-cols { grid-template-columns: 1fr; padding-left: 1rem; padding-right: 1rem; }
    .rep-notes { margin: 1rem; }
    .rep-head { padding: 1.1rem 1rem; }
}

/* ---- Assistant Coach ---- */
.digest .cap { margin: 0 0 .3rem; font-size: .72rem; font-weight: 600; color: var(--muted); }
.digest h3 { font-size: 1.15rem; margin: .2rem 0 .4rem; }
.digest h4 { margin: 1.1rem 0 .3rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #b9a37f; }
.digestlist li { align-items: flex-start; }
.aipanel .aireview { margin-top: 1rem; padding-top: .6rem; border-top: 1px dashed rgba(24,54,66,.25); }
.aipanel h3 { margin-top: 0; }
.nobr { white-space: nowrap; }
.sections { border: 0; padding: 0; margin: 0 0 .6rem; }
.sections legend { font-weight: 600; margin-bottom: .3rem; padding: 0; }
.sections .check-line { margin-bottom: .3rem; }
.assistcard { border-left: 6px solid #d6c3a7; }

/* ---- Trends tiles ---- */
.trendtiles .chartcard { margin: 0; min-width: 0; }
.trendtiles .stat .big { font-size: 1.3rem; }
@media (min-width: 1001px) {
    .trendtiles .sz-3 .chart .axis { font-size: 27px; }
    .trendtiles .sz-4 .chart .axis { font-size: 20px; }
    .trendtiles .sz-6 .chart .axis { font-size: 14px; }
    .trendtiles .sz-3 .stat .big, .trendtiles .sz-4 .stat .big { font-size: 1.05rem; }
}
@media (max-width: 1000px) and (min-width: 761px) { .trendtiles .chart .axis { font-size: 15px; } }
@media (max-width: 760px) { .trendtiles .chart .axis { font-size: 19px; } }
.tilenote { margin-top: .6rem; overflow-wrap: anywhere; min-width: 0; }
.tiles > .tile { min-width: 0; }
.rep-notes, .repnotes, .notebody, .coachnote { overflow-wrap: anywhere; }
.tilenote .notebody { background: #f6f1e8; border-left: 3px solid #d6c3a7; border-radius: 8px; padding: .5rem .7rem; font-size: .88rem; margin: 0 0 .4rem; }
.noteedit summary { cursor: pointer; color: var(--blue-text); font-weight: 600; }
.noteedit form { margin-top: .5rem; }
.coachnote { background: #f6f1e8; border-left: 3px solid #d6c3a7; border-radius: 8px; padding: .5rem .7rem; font-size: .9rem; margin: .6rem 0 0; }

/* ---- Body figure ---- */
.bodygrid { display: grid; grid-template-columns: minmax(180px, 250px) 1fr; gap: 1.4rem; align-items: start; }
.bodyfig-wrap { position: sticky; top: 1rem; text-align: center; }
.bodyfig { display: block; width: 100%; max-width: 250px; height: auto; margin: 0 auto; }
.bodyfig .bf-ground { fill: rgba(24,54,66,.07); }
.bodyfig .bf-body { fill: #f6f1e8; stroke: none; }
.bodyfig .bf-r { fill: rgba(113,159,181,.0); transition: fill .15s; }
.bodyfig .bf-region { outline: none; cursor: pointer; }
.bodyfig .bf-region:not(.bf-off) .bf-r { fill: rgba(113,159,181,.2); }
.bodyfig .bf-region.has:not(.bf-off) .bf-r { fill: rgba(113,159,181,.38); }
.bodyfig .bf-region:not(.bf-off):hover .bf-r, .bodyfig .bf-region:focus-visible .bf-r { fill: rgba(113,159,181,.6); }
.bodyfig .bf-region.is-active .bf-r { fill: rgba(214,195,167,.9); }
.bodyfig .bf-region:focus-visible { outline: 2px solid #719fb5; outline-offset: 2px; }
.bodyfig .bf-off { cursor: default; }
.bodyfig .bf-off .bf-r { fill: transparent; }
.bodyfig .bf-lines { fill: none; stroke: #719fb5; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.bodyfig .bf-lines .bf-edge { stroke: #4a7e93; stroke-width: 2.2; }
.bodyfig .bf-tape { display: none; fill: none; stroke: #183642; stroke-width: 2.6; stroke-dasharray: 6 4; stroke-linecap: round; pointer-events: none; }
.bodyfig .is-active .bf-tape { display: inline; }
.figchips { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin: .6rem 0 0; }
.chip { border-radius: 999px; padding: .25rem .8rem; font-size: .78rem; font-weight: 600; }
.chip.is-active { background: #d6c3a7; border-color: #b9a37f; }
.figtip { margin: .5rem 0 0; }
.bodyfields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem 1rem; align-content: start; }
.bodyfields .datefield, .bodyfields > button.primary { grid-column: 1 / -1; }
.bodyfields > button.primary { justify-self: start; }
.mfield { padding: .55rem .7rem .6rem; border-radius: 14px; border: 1.5px solid transparent; transition: background .15s; min-width: 0; }
.mfield.is-active { background: #f6f1e8; border-color: #d6c3a7; }
.mfield label { display: block; font-weight: 600; margin-bottom: .25rem; }
.mrow { display: flex; gap: .5rem; align-items: center; }
.mrow input { flex: 1 1 5rem; min-width: 0; margin: 0; }
.howto-btn { white-space: nowrap; padding: .35rem .8rem; font-size: .78rem; border-radius: 999px; }
.howto-box { max-width: 640px; }
.howto-body { display: grid; grid-template-columns: 150px 1fr; gap: 1rem; align-items: start; margin-top: .6rem; }
.howto-fig { text-align: center; }
.bodyfig.bf-mini { max-width: 150px; }
.howto-steps ol { padding-left: 1.2rem; margin: 0 0 .4rem; }
.howto-steps li { margin-bottom: .45rem; }
.howto-steps ul { padding-left: 1.1rem; margin: 0; color: var(--muted); font-size: .88rem; }
#howto .actions { margin-top: 1rem; justify-content: flex-end; }
.fieldlist li { flex-wrap: wrap; }
.fieldedit { flex: 1 1 100%; margin-top: .3rem; }
.fieldedit summary { cursor: pointer; color: var(--blue-text); font-weight: 600; }
.fieldedit form { margin-top: .5rem; }
.fieldscard > summary { cursor: pointer; list-style: none; }
.fieldscard > summary::-webkit-details-marker { display: none; }
@media (max-width: 760px) {
    .bodygrid { grid-template-columns: 1fr; }
    .bodyfig-wrap { position: static; }
    .bodyfig { max-width: 190px; }
    .howto-body { grid-template-columns: 1fr; }
    .bodyfields { grid-template-columns: 1fr; }
}

/* ===== Phase 19: Progress pathway ===== */
.jn a { color: inherit; }
.jn-k { font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; color: #d6c3a7; font-weight: 700; }
.jn-sub { font-size: .8rem; color: rgba(231,229,222,.72); }
.jn-fill { display: block; height: 100%; border-radius: 99px; background: #fff; }
.w0 { width: 0; } .w5 { width: 5%; } .w10 { width: 10%; } .w15 { width: 15%; } .w20 { width: 20%; } .w25 { width: 25%; } .w30 { width: 30%; } .w35 { width: 35%; }
.w40 { width: 40%; } .w45 { width: 45%; } .w50 { width: 50%; } .w55 { width: 55%; } .w60 { width: 60%; } .w65 { width: 65%; } .w70 { width: 70%; } .w75 { width: 75%; }
.w80 { width: 80%; } .w85 { width: 85%; } .w90 { width: 90%; } .w95 { width: 95%; } .w100 { width: 100%; }
.b-great { background: #4fe0a0; } .b-good { background: #a9e86a; } .b-mixed { background: #ffd24d; } .b-low { background: #ff8a7a; } .b-none { background: #aab6bb; }
.jn-link { background: none; border: 0; color: #d6c3a7; font: inherit; font-size: .8rem; text-decoration: underline; cursor: pointer; padding: 0 .3rem; }
@media (prefers-reduced-motion: reduce) { .jn-pulse { animation: none; opacity: .5; } }
.jn-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 99px; background: #8aa; vertical-align: middle; flex: none; }
.jn-dot[data-metric="sleep"], .jn-fill[data-metric="sleep"] { background: #7aa7ff; }
.jn-dot[data-metric="training"], .jn-fill[data-metric="training"] { background: #ff6b6b; }
.jn-dot[data-metric="mood"], .jn-fill[data-metric="mood"] { background: #ffd24d; }
.jn-dot[data-metric="energy"], .jn-fill[data-metric="energy"] { background: #ff9f43; }
.jn-dot[data-metric="nutrition"], .jn-fill[data-metric="nutrition"] { background: #4fe0a0; }
.jn-dot[data-metric="steps"], .jn-fill[data-metric="steps"] { background: #3fd5e6; }
.jn-dot[data-metric="habits"], .jn-fill[data-metric="habits"] { background: #ee8cff; }
/* Milestone cards: one dark card per milestone */
.jn { margin: 0 0 1rem; }
.jn-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1rem; align-items: start; }
.jn-card { background: #183642; color: #e7e5de; border-radius: 26px; padding: 1.1rem; box-shadow: 0 10px 28px rgba(24, 54, 66, .22); min-width: 0; scroll-margin-top: 1rem; }
.jn-card + .jn-card, .jn-cards + .jn-card { margin-top: 1rem; }
.jn-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; margin-bottom: .8rem; }
.jn-headl { min-width: 0; }
.jn-cap { color: #d6c3a7; letter-spacing: .14em; text-transform: uppercase; font-size: .86rem; font-weight: 800; margin: 0 0 .45rem; }
.jn-status { display: inline-block; padding: .22rem .8rem; border-radius: 99px; font-weight: 700; font-size: .82rem; color: #0b1c27; }
.jn-status.b-mixed { background: #ff9f43; }
.jn-hcore { display: flex; flex-direction: column; align-items: flex-end; text-align: right; flex: none; }
.jn-corev { font-size: 2.5rem; font-weight: 800; color: #fff; line-height: 1; }
.jn-hcore small { color: rgba(231, 229, 222, .72); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; margin-top: .15rem; }
.jn-sub-card { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; padding: .8rem .95rem; display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.jn-title { font-size: 1.3rem; line-height: 1.2; color: #fff; font-weight: 700; overflow-wrap: anywhere; }
.jn-v { font-size: 1.45rem; line-height: 1.15; color: #fff; font-weight: 700; }
.jn-count { font-variant-numeric: tabular-nums; }
.jn-count > span { display: block; }
.jn-count.late { color: #ff9b8a; }
.jn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .6rem; }
.jn-track { height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .16); overflow: hidden; display: block; margin: .15rem 0; }
.jn-fill.gold { background: #d6c3a7; }
.jn-goalsl { margin-top: .9rem; }
.jn-gh { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.jn-gl-list { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .45rem; }
.jn-gl { display: flex; gap: .75rem; align-items: center; width: 100%; background: transparent; border: 0; color: #fff; text-align: left; font: inherit; padding: .2rem 0; cursor: pointer; border-radius: 10px; }
.jn-gl:hover, .jn-gl:focus-visible { background: rgba(255, 255, 255, .07); outline: none; }
.jn-gchk { width: 26px; height: 26px; border-radius: 8px; border: 2px solid #aab6bb; display: grid; place-items: center; flex: none; }
.jn-gchk.on { background: #4fe0a0; border-color: #4fe0a0; }
.jn-gchk svg { width: 18px; height: 18px; fill: none; stroke: #0b1c27; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.jn-gtxt { display: grid; min-width: 0; }
.jn-gt { font-weight: 700; overflow-wrap: anywhere; }
.jn-gl.done .jn-gt { color: #4fe0a0; }
.jn-gl small { color: rgba(231, 229, 222, .75); font-size: .8rem; }
.jn-gl.late small { color: #ffab9c; }
.jn-pills { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 .6rem; }
.jn-pillb { border: 1px solid rgba(255, 255, 255, .28); border-radius: 99px; padding: .42rem .85rem; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; text-decoration: none; color: #e7e5de; }
.jn-pillb:hover { background: rgba(255, 255, 255, .1); }
.jn-pillb.on { background: #d6c3a7; border-color: #d6c3a7; color: #183642; }
.jn-scroll { max-height: 560px; overflow-y: auto; -webkit-overflow-scrolling: touch; border-radius: 22px; background: #0b1c27; outline-offset: 2px; }
.jn-svg { display: block; width: 100%; height: auto; }
.jn-svg text { font-family: inherit; }
.jn-bg-future { fill: #0b1c27; } .jn-bg-past { fill: #1a4357; }
.jn-col { cursor: pointer; outline: none; }
.jn-hit { fill: transparent; transition: fill .15s; }
.jn-col.alt .jn-hit { fill: rgba(255, 255, 255, .025); }
.jn-col.is-now .jn-hit { fill: rgba(214, 195, 167, .08); }
.jn-col:hover .jn-hit, .jn-col:focus-visible .jn-hit { fill: rgba(255, 255, 255, .08); }
.jn-col:focus-visible .jn-hit { stroke: #d6c3a7; stroke-width: 2px; }
.jn-wk { fill: rgba(231, 229, 222, .85); font-size: 12px; } .jn-wk.is-now { fill: #fff; font-weight: 700; }
.jn-pill { fill: #8fa0a8; }
.jn-pill.b-great { fill: #4fe0a0; } .jn-pill.b-good { fill: #a9e86a; } .jn-pill.b-mixed { fill: #ffd24d; } .jn-pill.b-low { fill: #ff8a7a; } .jn-pill.b-none, .jn-pill.b-future { fill: #8fa0a8; }
.jn-pill-t { fill: #0b1c27; font-size: 11.5px; font-weight: 700; }
.jn-today line { stroke: rgba(255, 255, 255, .62); stroke-width: 1.5px; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.jn-today rect { fill: #d6c3a7; } .jn-today text { fill: #183642; font-size: 11px; font-weight: 700; }
.jn-vein { fill: none; stroke-width: 2.6px; stroke-linecap: round; stroke-linejoin: round; stroke-opacity: .93; vector-effect: non-scaling-stroke; pointer-events: none; }
.jn-vein.is-hidden { display: none; }
.jn-core { pointer-events: none; }
.jn-lead { stroke: rgba(255, 255, 255, .4); stroke-width: 2px; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; }
.jn-core-future { stroke: rgba(255, 255, 255, .24); stroke-width: 12px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.jn-core-base { stroke: #27495a; stroke-width: 13px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.jn-seg { stroke: #fff; stroke-width: 9px; stroke-linecap: butt; vector-effect: non-scaling-stroke; }
.jn-seg-glow { stroke: #fff; stroke-width: 12px; stroke-linecap: butt; vector-effect: non-scaling-stroke; }
.jn-goal { cursor: pointer; outline: none; }
.jn-ghit { fill: transparent; }
.jn-goal:focus-visible .jn-ghit, .jn-sb:focus-visible .jn-ghit { stroke: #d6c3a7; stroke-width: 2px; }
.jn-goal-line { stroke: rgba(214, 195, 167, .6); stroke-width: 1.4px; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.jn-goal.done .jn-goal-line { stroke: rgba(79, 224, 160, .7); }
.jn-goal-box { fill: #0b1c27; stroke: #aab6bb; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.jn-goal.done .jn-goal-box { fill: #4fe0a0; stroke: #4fe0a0; }
.jn-goal.ev .jn-goal-box { stroke: #c9b6ff; fill: #143445; }
.jn-tick { fill: none; stroke: #0b1c27; stroke-width: 2.6px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.jn-goal-t { font-size: 12.5px; font-weight: 700; }
.jn-goal-tag { fill: #d6c3a7; font-size: 10.5px; letter-spacing: .06em; } .jn-goal-name { fill: #fff; }
.jn-goal.done .jn-goal-name { fill: #4fe0a0; } .jn-goal.late .jn-goal-tag { fill: #ff9b8a; } .jn-goal.ev .jn-goal-tag { fill: #c9b6ff; }
.jn-goal:hover .jn-lbl-bg, .jn-goal:focus-visible .jn-lbl-bg, .jn-sb:hover .jn-lbl-bg, .jn-sb:focus-visible .jn-lbl-bg { fill: rgba(44, 86, 106, .96); }
.jn-lbl-bg { fill: rgba(11, 28, 39, .86); }
.jn-sb { cursor: pointer; outline: none; }
.jn-sb-band { fill: rgba(255, 77, 77, .1); pointer-events: none; }
.jn-sb-line { stroke: #ff6b5e; stroke-width: 1.6px; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.jn-sb-dot { fill: #e5383b; stroke: #fff; stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.jn-sb-bang { fill: #fff; font-size: 13px; font-weight: 800; pointer-events: none; }
.jn-sb-txt { fill: #ffb3a8; font-size: 11.5px; font-weight: 700; pointer-events: none; }
.jn-node { cursor: pointer; outline: none; }
.jn-ring { fill: none; stroke: #d6c3a7; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.jn-shape { fill: #183642; stroke: #d6c3a7; stroke-width: 3px; vector-effect: non-scaling-stroke; }
.jn-node.late .jn-ring, .jn-node.late .jn-shape { stroke: #ff8a7a; }
.jn-node:hover .jn-shape, .jn-node:focus-visible .jn-shape { fill: #2c566a; }
.jn-num { fill: #fff; font-size: 17px; font-weight: 800; }
.jn-pulse { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 2px; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: jnpulse 2.4s ease-out infinite; }
@keyframes jnpulse { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.jn-legendwrap { display: flex; align-items: center; gap: .4rem; margin: .7rem 0 .2rem; }
.jn-legend { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; flex: 1; min-width: 0; padding: .1rem 0; }
.jn-legend::-webkit-scrollbar { display: none; }
.jn-chip { flex: none; white-space: nowrap; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .22); color: #e7e5de; border-radius: 99px; padding: .3rem .8rem; font: inherit; font-size: .82rem; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.jn-chip small { color: rgba(231, 229, 222, .75); }
.jn-chip:not(.on) { opacity: .5; text-decoration: line-through; }
.jn-arrow { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: #e7e5de; display: grid; place-items: center; cursor: pointer; padding: 0; }
.jn-arrow:hover { background: rgba(255, 255, 255, .1); }
.jn-arrow svg, .jn-learn summary svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.jn-learn { margin-top: .6rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.jn-learn summary { display: flex; align-items: center; justify-content: center; gap: .35rem; cursor: pointer; list-style: none; color: #d6c3a7; font-weight: 700; padding: .65rem 0 .2rem; }
.jn-learn summary::-webkit-details-marker { display: none; }
.jn-learn[open] summary svg { transform: rotate(180deg); }
.jn-help { font-size: .84rem; color: rgba(231, 229, 222, .8); margin: .5rem 0 0; }
.jn-done-list { margin-top: 1rem; }
.jn-empty .jn-sub-card { margin-top: .2rem; }
@media (prefers-reduced-motion: reduce) { .jn-legend { scroll-behavior: auto; } }
.jn-box { max-width: 580px; color: #183642; }
.jn-box h2, .jn-box h3, .jn-box p { color: #183642; }
.jn-box .muted { color: #5b6b73; }
.jn-box .jn-headline.b-great { color: #1d7f55; } .jn-box .jn-headline.b-good { color: #4a7e1a; } .jn-box .jn-headline.b-mixed { color: #8a6a00; } .jn-box .jn-headline.b-low { color: #b0412f; }
.jn-box .jn-mval { color: #5b6b73; }
.jn-headline { font-weight: 700; margin: .3rem 0 .6rem; }
.jn-headline.b-great, .jn-headline.b-good, .jn-headline.b-mixed, .jn-headline.b-low, .jn-headline.b-none { background: none; }
.jn-headline.b-great { color: #1d7f55; } .jn-headline.b-good { color: #4a7e1a; } .jn-headline.b-mixed { color: #8a6a00; } .jn-headline.b-low { color: #b0412f; }
.jn-mrows { list-style: none; padding: 0; margin: 0 0 .7rem; display: grid; gap: .35rem; }
.jn-mrows li { display: grid; grid-template-columns: .8rem 5.2rem 1fr 5rem 2.6rem; gap: .5rem; align-items: center; font-size: .86rem; }
.jn-mname { font-weight: 600; } .jn-mval { color: #5b6b73; min-width: 0; overflow-wrap: anywhere; }
.jn-bar { height: 7px; background: #e7e5de; border-radius: 99px; overflow: hidden; display: block; }
.jn-bar .jn-fill { background: #719fb5; }
.jn-mpct { text-align: right; font-weight: 700; }
.jn-next { background: #f6f1e8; border-left: 3px solid #d6c3a7; border-radius: 8px; padding: .5rem .7rem; }
.jn-numbers { margin: 1.4rem 0 .4rem; }
.jn-client > summary { cursor: pointer; }
.jn-list { display: block; }
.jn-list li { display: flex; justify-content: space-between; gap: .8rem; padding: .6rem 0; border-top: 1px solid #ece8df; flex-wrap: wrap; align-items: flex-start; }
.jn-list li:first-child { border-top: 0; }
.jn-list li.is-done b { text-decoration: none; color: #4a7e93; }
.jn-acts { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: flex-end; }
.plainlist { list-style: none; padding: 0; margin: 0; }
.addbox { margin-top: .8rem; }
.addbox > summary { list-style: none; cursor: pointer; display: inline-block; }
.addbox > summary::-webkit-details-marker { display: none; }
.addsummary { background: #183642; color: #fff; border-radius: 99px; padding: .45rem 1rem; font-weight: 600; }
.addbox[open] > .addsummary { margin-bottom: .7rem; }
.tag.tag-warn { background: #fde7e2; color: #b0412f; }
.jn-settings { width: 100%; border-collapse: collapse; }
.jn-settings th { text-align: left; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #719fb5; padding: .3rem .4rem; }
.jn-settings td { padding: .5rem .4rem; border-top: 1px solid #ece8df; vertical-align: top; }
.jn-settings input[type=number] { width: 6.5rem; margin: 0; }
.inline-check { display: inline-flex; gap: .4rem; align-items: center; font-weight: 600; }
@media (max-width: 760px) {
    .jn-mrows li { grid-template-columns: .8rem 4.6rem 1fr 2.6rem; }
    .jn-mrows .jn-bar { display: none; }
}

/* ===== Phase 20: Recipes and meal prep ===== */
.rx-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .4rem; }
.rx-head .hi, .rx-head h2 { margin: 0; }
.subtabs { margin-top: .2rem; }
.rp-chip { display: inline-block; font-size: .74rem; font-weight: 700; padding: .12rem .65rem; border-radius: 999px; background: var(--tan-light); color: #5a4d36; margin: 0 .3rem .3rem 0; }
.rp-chip.diet { background: var(--green-bg); color: var(--green); }
/* collection */
.rf { background: #fff; border-radius: 20px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.rf-top { display: grid; grid-template-columns: 1fr auto auto auto; gap: .5rem; align-items: center; }
.rf-top input[type=search] { margin: 0; }
.rf-top select { margin: 0; width: auto; }
.rf-quick, .rf-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; align-items: center; }
.rf-chip, .rf-tag { border: 1.5px solid var(--tan); color: var(--tan-text); background: transparent; border-radius: 999px; padding: .28rem .85rem; font: inherit; font-weight: 700; font-size: .82rem; cursor: pointer; text-decoration: none; display: inline-block; }
.rf-chip:hover, .rf-tag:hover { background: var(--tan-light); text-decoration: none; }
.rf-chip.on, .rf-tag.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.rf-tag { font-weight: 600; font-size: .78rem; padding: .18rem .7rem; }
.rf-macros { margin-top: .7rem; }
.rf-macros summary { cursor: pointer; font-weight: 700; font-size: .85rem; color: var(--blue-text); }
.rf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; margin: .6rem 0; }
.rf-grid fieldset { border: 1px solid var(--line); border-radius: 12px; padding: .4rem .6rem .6rem; margin: 0; min-width: 0; }
.rf-grid legend { font-size: .8rem; font-weight: 700; padding: 0 .3rem; }
.rf-grid input { width: calc(50% - 3px); display: inline-block; margin: 0; }
.rf-clear { margin: .6rem 0 0; font-size: .85rem; }
.rf-count { margin: 0 0 .5rem; }
.rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.rc { background: #fff; border-radius: 20px; overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.rc-wrap { display: flex; flex-direction: column; gap: .3rem; }
.rc-wrap .rc { height: auto; flex: 1; }
.rc-img { display: block; position: relative; aspect-ratio: 3 / 2; background: var(--tan-light); overflow: hidden; }
.rc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-img.none { display: flex; align-items: center; justify-content: center; font-size: 3rem; font-weight: 800; color: var(--tan-text); }
.rc-saved { position: absolute; top: .5rem; right: .6rem; background: rgba(24, 54, 66, .85); color: #ffd24d; font-style: normal; border-radius: 999px; padding: .1rem .5rem; font-size: .9rem; }
.rc-body { padding: .8rem 1rem 1rem; }
.rc-body h3 { margin: 0 0 .3rem; font-size: 1.05rem; line-height: 1.25; }
.rc-body h3 a { color: var(--navy); }
.rc-macros { display: flex; flex-wrap: wrap; gap: .2rem .7rem; font-size: .8rem; color: var(--muted); margin: 0 0 .3rem; }
.rc-macros b { color: var(--navy); }
.rc-sub { margin: 0 0 .4rem; }
.rc-tags { margin: 0; }
.rc-acts { display: flex; flex-wrap: wrap; gap: .8rem; padding: 0 .5rem; font-size: .85rem; align-items: center; }
/* recipe page */
.rp-wrap { max-width: 900px; margin: 0 auto; }
.rp { background: #fff; border-radius: 24px; overflow: hidden; padding-bottom: 1.4rem; }
.rp-hero img { width: 100%; height: auto; max-height: 460px; object-fit: cover; display: block; aspect-ratio: 16 / 9; }
.rp-head, .rp-bar, .rp-cols, .rp-allergen, .rp-addprep, .rp-macros, .rp-cooknote { margin-left: 1.6rem; margin-right: 1.6rem; }
.rp-head { margin-top: 1.3rem; }
.rp-head h1 { font-size: 2.2rem; margin-bottom: .6rem; }
.rp-meta { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; list-style: none; padding: 0; margin: 0 0 .7rem; font-size: .9rem; color: var(--muted); }
.rp-meta b { color: var(--navy); margin-right: .25rem; text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; }
.rp-tags { margin: 0 0 .7rem; }
.rp-desc { font-size: 1.05rem; line-height: 1.6; color: #31505c; margin: 0 0 1rem; }
.rp-macros { display: flex; flex-wrap: wrap; align-items: stretch; gap: .5rem; background: var(--navy); color: #fff; border-radius: 18px; padding: .8rem 1rem; margin-bottom: 1rem; }
.rp-per { flex: 0 0 100%; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #d6c3a7; font-weight: 700; }
.rp-m { flex: 1 1 80px; display: flex; flex-direction: column; gap: .1rem; }
.rp-m strong { font-size: 1.5rem; line-height: 1.1; }
.rp-m small { font-size: .68rem; letter-spacing: .1em; color: #bcd0da; }
.rp-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; align-items: center; }
.rp-bar form.inline { display: contents; }
.rp-btn { border: 1.5px solid var(--tan); background: transparent; color: var(--tan-text); border-radius: 999px; padding: .38rem 1rem; font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 2.35rem; line-height: 1.2; white-space: nowrap; }
.rp-btn:hover { background: var(--tan-light); text-decoration: none; }
.rp-btn.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.rp-cooknote { font-size: .85rem; color: var(--muted); }
.rp-cols { display: grid; grid-template-columns: minmax(250px, 1fr) minmax(0, 1.5fr); gap: 2rem; align-items: start; }
.rp-cols h2 { font-size: 1.3rem; margin: 0 0 .6rem; }
.rp-ing-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.rp-ing-head h2 { margin: 0; }
.rp-serves { display: flex; align-items: center; gap: .35rem; margin: 0; font-size: .85rem; }
.rp-serves label { font-weight: 600; color: var(--muted); }
.rp-serves input { width: 3.6rem; margin: 0; text-align: center; padding: .35rem .2rem; }
.rp-step { width: 2rem; height: 2rem; border-radius: 50%; border: 1.5px solid var(--tan); background: #fff; color: var(--navy); font-size: 1.1rem; font-weight: 700; cursor: pointer; line-height: 1; padding: 0; }
.rp-step:hover { background: var(--tan-light); }
.rp-update { border: 0; background: var(--navy); color: #fff; border-radius: 999px; padding: .35rem .8rem; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.rp-scaled { margin: 0 0 .4rem; }
.rp-list { list-style: none; margin: 0; padding: 0; }
.ing { padding: .5rem 0; border-top: 1px solid var(--line); line-height: 1.4; }
.ing:first-child { border-top: 0; }
.ing-amt { font-weight: 800; color: var(--navy); }
.ing-note { color: var(--muted); }
.ing.opt .ing-name { color: #4b5d65; }
.ing-opt { font-size: .72rem; background: var(--tan-light); color: #5a4d36; border-radius: 999px; padding: .05rem .5rem; font-style: normal; font-weight: 700; margin-left: .3rem; }
.rp-steps { line-height: 1.65; }
.rp-steps ol { padding-left: 1.4rem; margin: 0 0 .8rem; }
.rp-steps ol li { padding-left: .3rem; margin-bottom: .75rem; }
.rp-steps ol li::marker { font-weight: 800; color: var(--blue-text); }
.rp-steps ul { padding-left: 1.3rem; }
.rp-steps h3 { font-size: 1.05rem; margin: 1rem 0 .3rem; }
.rp-allergen { margin-top: 1.4rem; padding: .7rem 1rem; background: #fbf5e6; border-radius: 14px; font-size: .9rem; }
.rp-addprep { margin-top: 1rem; border: 1px solid var(--line); border-radius: 16px; padding: .7rem 1rem; }
.rp-addprep summary { cursor: pointer; font-weight: 700; color: var(--blue-text); }
.rp-from { text-align: center; margin-top: .8rem; }
body.cook .rp { font-size: 1.2rem; }
body.cook .rp-steps { font-size: 1.3rem; line-height: 1.75; }
body.cook .ing { font-size: 1.2rem; padding: .7rem 0; }
body.cook .topbar, body.cook .tabs, body.cook .foot, body.cook .crumb { display: none; }
body.cook .rp-cols { grid-template-columns: 1fr; }
/* editor */
.re .card h2 { margin-bottom: .3rem; }
.re-five { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .1rem .75rem; }
.re-photo { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.re-photo img { border-radius: 12px; object-fit: cover; width: 160px; height: 107px; }
.re-checks { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .3rem; }
.re-lab { font-size: .85rem; }
.re-sug { margin: 0; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.re-save { margin: 1rem 0; }
.re-del { display: block; margin: 0 0 3rem; }
.ri-head, .ri { display: grid; grid-template-columns: minmax(150px, 2.2fr) minmax(90px, .8fr) minmax(90px, .9fr) minmax(110px, 1.3fr) auto auto; gap: .4rem; align-items: center; }
.ri-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; padding: .3rem 0; }
.ri { margin-bottom: .4rem; }
.ri input, .ri select { margin: 0; }
.ri-opt span { font-size: .85rem; }
.wys { border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.wys-bar { display: flex; flex-wrap: wrap; gap: .3rem; padding: .4rem; background: #f6f1e8; border-bottom: 1px solid var(--line); }
.wys-b { border: 1px solid var(--tan); background: #fff; border-radius: 8px; min-width: 2.2rem; padding: .25rem .6rem; font: inherit; font-weight: 700; cursor: pointer; color: var(--navy); }
.wys-b:hover { background: var(--tan-light); }
.wys-bold { font-weight: 900; } .wys-italic { font-style: italic; }
.wys-ed { min-height: 14rem; padding: .8rem 1rem; outline: none; }
.wys-ed:focus { box-shadow: inset 0 0 0 2px var(--navy); }
.wys-src { width: 100%; font-family: ui-monospace, monospace; font-size: .85rem; }
.skiplist li { padding: .25rem 0; border-top: 1px solid var(--line); font-size: .9rem; }
.csvhelp li { padding: .3rem 0; font-size: .9rem; }
.csvhelp code { background: #f6f1e8; padding: .05rem .3rem; border-radius: 5px; }
/* meal prep */
.mp-list li { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; padding: .6rem 0; border-top: 1px solid var(--line); }
.mp-list li:first-child { border-top: 0; }
.mp-list li.past { opacity: .6; }
.mp-when { font-size: 1.05rem; margin: 0 0 .5rem; }
.mp-edit { margin-bottom: 1rem; }
.mp-est-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .6rem; margin-bottom: .5rem; }
.mp-est-row span { display: flex; flex-direction: column; }
.mp-est-row strong { font-size: 1.35rem; white-space: nowrap; line-height: 1.1; }
.mp-est-row small { color: var(--muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.mp-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem; }
.mp-slot { background: #f6f1e8; border-radius: 16px; padding: .4rem .8rem .8rem; min-height: 8rem; border: 2px dashed transparent; }
.mp-slot.over { border-color: var(--navy); background: #efe7d6; }
.mp-slot h3 { margin-top: .6rem; }
.mp-item { background: #fff; border-radius: 12px; padding: .6rem .7rem; margin-bottom: .5rem; cursor: grab; }
.mp-item.dragging { opacity: .5; }
.mp-title { font-weight: 700; color: var(--navy); }
.mp-item p { margin: .1rem 0 .3rem; }
.mp-row { display: flex; gap: .5rem; align-items: center; margin: .2rem 0; font-size: .82rem; }
.mp-row label { display: flex; gap: .4rem; align-items: center; margin: 0; font-weight: 600; color: var(--muted); }
.mp-row input[type=number] { width: 4rem; margin: 0; padding: .25rem .4rem; }
.mp-row select { margin: 0; width: auto; padding: .25rem .4rem; }
.mp-add { margin-top: 1.2rem; border-top: 1px solid var(--line); padding-top: .4rem; }
.shop li { border-top: 1px solid var(--line); }
.shop li:first-child { border-top: 0; }
.shop form { margin: 0; }
.shop-btn { display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left; background: transparent; border: 0; padding: .7rem .2rem; font: inherit; cursor: pointer; color: var(--text); }
.shop-box { flex: none; width: 1.5rem; height: 1.5rem; border: 2px solid var(--navy); border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; }
.shop li.done .shop-box { background: var(--navy); }
.shop li.done .shop-txt { text-decoration: line-through; color: var(--muted); }
.shop-amt { color: var(--navy); }
.shop em { font-size: .72rem; background: var(--tan-light); border-radius: 999px; padding: .05rem .5rem; font-style: normal; font-weight: 700; color: #5a4d36; }
.mealprep-note { margin-bottom: 1rem; }
@media (max-width: 760px) {
    .rp-cols { grid-template-columns: 1fr; gap: 1.2rem; }
    .rp-head, .rp-bar, .rp-cols, .rp-allergen, .rp-addprep, .rp-macros, .rp-cooknote { margin-left: 1rem; margin-right: 1rem; }
    .rp-head h1 { font-size: 1.7rem; }
    .rf-top { grid-template-columns: 1fr 1fr; }
    .rf-top input[type=search] { grid-column: 1 / -1; }
    .ri-head { display: none; }
    .ri { grid-template-columns: 1fr 1fr; padding: .6rem; background: #f6f1e8; border-radius: 12px; }
    .ri > input[name^="ing_name"] { grid-column: 1 / -1; }
    .ri > input[name^="ing_note"] { grid-column: 1 / -1; }
}
@media print {
    body { background: #fff; }
    .sidebar, .topbar, .tabs, .foot, .crumb, .rp-bar, .rp-addprep, .rp-serves button, .rp-cooknote, .flash, .rp-update, .mp-row, .mp-edit, .rx-head .actions, #sbtoggle, .menubtn, .rp-from, nav { display: none !important; }
    .shell { display: block; }
    main, .clientmain { padding: 0; max-width: none; margin: 0; }
    .rp { border-radius: 0; padding: 0; box-shadow: none; }
    .rp-hero img { max-height: 260px; }
    .rp-macros { background: #fff; color: #000; border: 1.5px solid #000; }
    .rp-per, .rp-m small { color: #444; }
    .rp-cols { grid-template-columns: 1fr 1.6fr; }
    .rp-serves input { border: 0; width: 2rem; }
    .rp-step { display: none; }
    .card { box-shadow: none; border: 0; padding: 0; }
    .shop-btn { padding: .25rem 0; }
    .shop-box { border-color: #000; }
    .mp-slots { grid-template-columns: 1fr 1fr; }
    a { color: #000; }
}

/* ---- Phase 21: client app shell (same look as the coach app) ---- */
.clientshell { background: #f2f2f2; --sbw: 268px; }
.navc .clientshell { --sbw: 85px; }
.clientshell .sidebar .logo-full { width: 150px; }
.clientshell .logo { align-items: flex-start; }
.pageuser { display: inline-flex; align-items: center; gap: .6rem; color: var(--navy); }
.pageuser:hover { text-decoration: none; }
.clientapp .pageuser .hi { font-size: 1.15rem; font-weight: 700; color: var(--navy); letter-spacing: 0; margin: 0; }
.pageuser .avatar { width: 40px; height: 40px; font-size: .85rem; }
.clientshell .pagehead { padding-bottom: .2rem; }
.clientshell .clientmain { width: 100%; max-width: 860px; margin: 0; padding: .5rem 2rem 4rem; }
.clientshell .page-body .clientmain, .page-body .clientmain { max-width: 1040px; }
.page-today .clientmain, .page-progress .clientmain, .page-recipes .clientmain, .page-plan .clientmain { max-width: 1180px; }
.clientshell main > h1.hi:first-child { margin-top: .2rem; }
.clientshell .tabs a.on { background: var(--navy); border-color: var(--navy); }
.clientshell .card { box-shadow: none; }

/* Signed-out pages (sign in, invite): a navy bar with the logo, then a small centred card */
.outbar { background: var(--navy); display: flex; justify-content: center; align-items: center; padding: 1rem 1rem; }
.outbar .logo img { width: 150px; height: auto; display: block; }
.signedout .clientmain { max-width: 520px; margin: 0 auto; padding: 1.2rem 16px 2rem; }

/* Today: two columns on a wide screen */
.tgrid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 0 1.5rem; align-items: start; }
.tgrid.solo { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
.tcol > .card:last-child { margin-bottom: 0; }
.page-today .newreport, .page-today .nextsession { max-width: 1180px; }

/* Bottom bar on phones */
@media (max-width: 1000px) {
    .tgrid, .tgrid.solo { grid-template-columns: minmax(0, 1fr); max-width: none; }
    .tcol > .card:last-child { margin-bottom: 1rem; }
}
@media (max-width: 820px) {
    .clientshell .clientmain { padding: 1.1rem 1rem 1.5rem; }
    .clientshell.signedin .shellmain { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
    .clientshell .mbar { padding-top: env(safe-area-inset-top); height: calc(72px + env(safe-area-inset-top)); }
    .clientshell .mbar .logo img { width: 92px; height: auto; }
    .clientshell .mtools .hdravatar .avatar { width: 36px; height: 36px; }
    .clientshell .sidebar .logo-full { width: 130px; }
}
@media (min-width: 821px) {
    .page-recipes .rc-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
body.cook .mbar, body.cook .bnav, body.cook .fnav, body.cook .sidebar, body.cook .pagehead, body.cook .outbar { display: none !important; }
body.cook .shell { display: block; }
@media print { .mbar, .bnav, .fnav, .pagehead, .outbar { display: none !important; } }
.page-today .pageuser .hi { display: none; }
.clientshell .clientmain:has(.tgrid.solo) { max-width: 860px; }
.clientshell .tgrid.solo { max-width: none; }

/* ---- Phase 22: refresh button, live notification toast ---- */
.sbtools { display: inline-flex; flex-direction: column; align-items: center; gap: .55rem; }
.sbrefresh { border: 0; background: none; padding: 0; border-radius: 6px; color: var(--blue); cursor: pointer; line-height: 0; }
.sbrefresh:hover { background: none; color: #fff; }
.sbrefresh .ico { width: 30px; height: 30px; }
.js-refresh.spin .ico { animation: refspin .7s linear infinite; }
@keyframes refspin { to { transform: rotate(360deg); } }
.mtools .mrefresh { color: var(--blue); }
.mtools .mrefresh .ico { color: var(--blue); }
@media (min-width: 821px) { .mrefresh { display: none; } }
@media (max-width: 820px) { .sbrefresh { display: none; } }
.toast { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 80; max-width: min(380px, calc(100vw - 2rem)); }
.toast[hidden] { display: none; }
.toastlink { display: flex; flex-direction: column; gap: .15rem; background: var(--navy); color: #fff; padding: .85rem 1.1rem; border-radius: 14px; box-shadow: 0 10px 30px rgba(24, 54, 66, .35); border-left: 5px solid #57d397; }
.toastlink.neg { border-left-color: #db6e76; }
.toastlink:hover { text-decoration: none; color: #fff; }
.toastlink strong { color: var(--tan); font-size: .85rem; }
.toastlink span { font-size: .95rem; }
.toastlink em { font-size: .78rem; color: var(--tan-light); font-style: normal; }
@media (max-width: 820px) { .toast { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; } }
@media (prefers-reduced-motion: reduce) { .js-refresh.spin .ico { animation: none; } }
@media print { .toast, .sbtools { display: none !important; } }

/* ---- Phase 23: workout builder ---- */
.wb { padding-bottom: 5rem; }
.wbhead { background: #fff; border-radius: 22px; padding: 1.1rem 1.4rem; margin-bottom: 1rem; }
.wbnav { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; margin-bottom: .5rem; font-size: .9rem; }
.wbback { font-weight: 600; }
.wbstep { color: var(--muted); }
.wbrow { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: .5rem; }
.wbname { flex: 1 1 18rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; margin: 0 !important; border-color: transparent !important; background: #f2f2f2 !important; }
.wbname:focus { border-color: var(--navy) !important; background: #fff !important; }
.wbtime { font-weight: 700; color: var(--blue-text); white-space: nowrap; }
.wbwd, .wbscope { font-size: .85rem; color: var(--muted); display: inline-flex; align-items: center; gap: .4rem; }
.wbwd select, .wbscope select { margin: 0; width: auto; padding: .35rem .6rem; }
.wbequip { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.eqchip { display: inline-flex; align-items: center; gap: .35rem; background: var(--tan-light); color: #5a4d36; border-radius: 999px; padding: .2rem .7rem .2rem .45rem; font-size: .8rem; font-weight: 600; }
.eqchip .ico { width: 18px; height: 18px; }
.wbsave { margin-bottom: .4rem; }
.wbstatus { font-size: .85rem; color: var(--muted); }
.wbstatus.dirty { color: #a0701f; font-weight: 600; }
.wbstatus.err { color: var(--red); font-weight: 600; }
.wbnotes { margin-top: .4rem; }
.wbnotes summary { cursor: pointer; font-weight: 600; margin-bottom: .4rem; }
.wblimits { margin-top: .7rem; padding: .6rem .9rem; border-radius: 12px; background: #fbf3e4; font-size: .88rem; }
.wbgrid { display: grid; grid-template-columns: 290px minmax(0, 1fr) 310px; gap: 1rem; align-items: start; }
.wbpick, .wbprev { background: #fff; border-radius: 22px; padding: 1rem; position: sticky; top: .6rem; max-height: calc(100vh - 1.2rem); overflow: auto; }
.wbtabs { display: flex; gap: .3rem; margin-bottom: .8rem; }
.wbtabs button { flex: 1; border: 0; background: #f2f2f2; border-radius: 999px; padding: .45rem .8rem; font: inherit; font-weight: 600; cursor: pointer; color: var(--muted); }
.wbtabs button.on { background: var(--navy); color: #fff; }
.wbpclose { display: none; }
.wbaddto { display: block; font-size: .8rem; color: var(--muted); margin-bottom: .5rem; }
.wbaddto select { margin: .2rem 0 0; }
.wbsearch { display: grid; gap: .4rem; margin-bottom: .6rem; }
.wbsearch input, .wbsearch select { margin: 0; }
.wbres { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; border-top: 1px solid var(--line); }
.wbres .grow { min-width: 0; line-height: 1.25; }
.wbres strong { font-size: .92rem; overflow-wrap: anywhere; }
.wbadd { margin-left: auto; }
.wbthumb { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; color: #fff; background: var(--navy); }
.wbthumb .ico { width: 22px; height: 22px; }
.th0 { background: #183642; } .th1 { background: #4a7c93; } .th2 { background: #8a6a3d; } .th3 { background: #5b7f68; }
.th4 { background: #7a5c7e; } .th5 { background: #a0584a; } .th6 { background: #55708f; } .th7 { background: #7f7f52; }
.wbic { border: 0; background: none; padding: .3rem; border-radius: 8px; cursor: pointer; color: var(--blue-text); line-height: 0; }
.wbic:hover { background: var(--tan-light); }
.wbic .ico { width: 22px; height: 22px; }
.wbic.wbadd { background: var(--navy); color: #fff; border-radius: 50%; padding: .35rem; }
.wbic.wbadd:hover { background: #224b5b; }
.wbnew { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.wbnew summary { cursor: pointer; font-weight: 600; color: var(--blue-text); }
.wbnewform { display: grid; gap: .5rem; margin-top: .6rem; }
.wbnewform label { font-size: .82rem; color: var(--muted); }
.wbnewform input { margin: .15rem 0 0; }
.wbmain { min-width: 0; }
.wbsec { background: #fff; border-radius: 22px; margin-bottom: 1rem; overflow: visible; border: 2px solid transparent; }
.wbsec > .wbshead { border-radius: 20px 20px 0 0; }
.wbsec > .wbshead:last-child { border-radius: 20px; }
.wbsec:focus-within { position: relative; z-index: 6; }   /* Round 55: the type-to-add list drops down over the next section instead of being cut off */
.wbsec.active { border-color: var(--blue); }
.wbshead { display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; background: var(--navy); color: #fff; cursor: pointer; }
.wbshead.t-interval { background: #3f6f86; } .wbshead.t-amrap { background: #7b5d33; } .wbshead.t-timed { background: #6d526f; } .wbshead.t-freestyle { background: #5a6b73; }
.wbshead .wbic { color: #fff; } .wbshead .wbic:hover { background: rgba(255, 255, 255, .15); }
.wbsname { flex: 1; min-width: 0; margin: 0 !important; background: transparent !important; border: 1px solid transparent !important; color: #fff !important; -webkit-text-fill-color: #fff; font-weight: 700; font-size: 1.05rem; padding: .3rem .5rem; }
.wbsname:hover, .wbsname:focus { border-color: rgba(255, 255, 255, .5) !important; }
.wbtype { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: rgba(255, 255, 255, .18); border-radius: 999px; padding: .15rem .6rem; }
.wbsecmin { font-size: .8rem; opacity: .85; white-space: nowrap; }
.wbcfgrow { display: flex; flex-wrap: wrap; gap: .6rem 1.1rem; align-items: end; padding: .8rem 1rem 0; }
.wbcfg { font-size: .78rem; color: var(--muted); display: grid; gap: .2rem; }
.wbcfg input { width: 6rem; margin: 0; }
.wbfree { padding: .8rem 1rem 1rem; }
.wbfree textarea { width: 100%; margin: 0; }
.wbitems { padding: .8rem 1rem .2rem; }
.wbempty { padding: .5rem 0; }
.wbcard { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: .5rem; border: 1px solid var(--line); border-radius: 16px; padding: .8rem .8rem .8rem .4rem; background: #fff; box-shadow: 0 1px 4px rgba(24, 54, 66, .06); }
.wbcard.linked { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.wbcard.linkedprev { border-top-left-radius: 4px; border-top-right-radius: 4px; }
.wbcard.linked, .wbcard.linkedprev { border-color: var(--blue); }
.wbrail { display: flex; flex-direction: column; justify-content: center; gap: .2rem; }
.wbmv { padding: .1rem; }
.wbmv .ico { width: 20px; height: 20px; }
.wbcin { min-width: 0; }
.wbctop { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.wbexname { flex: 1; min-width: 0; margin: 0 !important; background: #f2f2f2 !important; border-color: transparent !important; font-weight: 600; }
.wbexname:focus { background: #fff !important; border-color: var(--navy) !important; }
.wbchip { border: 0; background: #f2f2f2; color: var(--muted); border-radius: 8px; padding: .35rem .7rem; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.wbchip.on { background: var(--navy); color: #fff; }
.wblinkrow { display: flex; justify-content: center; margin: -.35rem 0; position: relative; z-index: 1; height: 26px; }
.wblink { border: 2px solid var(--line); background: #fff; color: var(--muted); border-radius: 50%; width: 30px; height: 30px; padding: 0; cursor: pointer; line-height: 0; display: inline-flex; align-items: center; justify-content: center; }
.wblink .ico { width: 16px; height: 16px; }
.wblink:hover { border-color: var(--blue); color: var(--blue-text); }
.wblink.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.wbsets { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.wbsrow { display: grid; grid-template-columns: 2.6rem repeat(3, minmax(0, 1fr)) 1.9rem; align-items: center; border-top: 1px solid var(--line); }
.wbsets.cols1 .wbsrow { grid-template-columns: 2.6rem repeat(4, minmax(0, 1fr)) 1.9rem; }
.wbsets.cols2 .wbsrow { grid-template-columns: 2.6rem repeat(5, minmax(0, 1fr)) 1.9rem; }
.wbsets.cols3 .wbsrow { grid-template-columns: 2.6rem repeat(6, minmax(0, 1fr)) 1.9rem; }
.wbsets.cols4 .wbsrow { grid-template-columns: 2.6rem repeat(7, minmax(0, 1fr)) 1.9rem; }
.wbsets.cols5 .wbsrow { grid-template-columns: 2.6rem repeat(8, minmax(0, 1fr)) 1.9rem; }
.wbsets.cols6 .wbsrow { grid-template-columns: 2.6rem repeat(9, minmax(0, 1fr)) 1.9rem; }
.wbsets.cols7 .wbsrow { grid-template-columns: 2.6rem repeat(10, minmax(0, 1fr)) 1.9rem; }
.wbsets.cols8 .wbsrow { grid-template-columns: 2.6rem repeat(11, minmax(0, 1fr)) 1.9rem; }
.wbsets.cols9 .wbsrow { grid-template-columns: 2.6rem repeat(12, minmax(0, 1fr)) 1.9rem; }
.wbsets.single .wbsrow { grid-template-columns: 2.2rem repeat(2, minmax(0, 1fr)); }
.wbsets.single.cols1 .wbsrow { grid-template-columns: 2.2rem repeat(3, minmax(0, 1fr)); }
.wbsets.single.cols2 .wbsrow { grid-template-columns: 2.2rem repeat(4, minmax(0, 1fr)); }
.wbsets.single.cols3 .wbsrow { grid-template-columns: 2.2rem repeat(5, minmax(0, 1fr)); }
.wbsets.single.cols4 .wbsrow { grid-template-columns: 2.2rem repeat(6, minmax(0, 1fr)); }
.wbsets.single.cols5 .wbsrow { grid-template-columns: 2.2rem repeat(7, minmax(0, 1fr)); }
.wbsets.single.cols6 .wbsrow { grid-template-columns: 2.2rem repeat(8, minmax(0, 1fr)); }
.wbsets.single.cols7 .wbsrow { grid-template-columns: 2.2rem repeat(9, minmax(0, 1fr)); }
.wbsets.single.cols8 .wbsrow { grid-template-columns: 2.2rem repeat(10, minmax(0, 1fr)); }
.wbsets.single.cols9 .wbsrow { grid-template-columns: 2.2rem repeat(11, minmax(0, 1fr)); }
.wbshd { border-top: 0; font-size: .75rem; font-weight: 700; color: var(--muted); text-align: center; padding: .35rem 0; }
.wbsrow .wbin { margin: 0 !important; border: 0 !important; border-radius: 0 !important; text-align: center; background: transparent !important; padding: .55rem .25rem; min-width: 0; width: 100%; font-weight: 600; color: var(--blue-text); }
.wbsrow .wbin:focus { background: #f2f7fa !important; outline: 2px solid var(--blue); outline-offset: -2px; }
.wbsn { text-align: center; font-weight: 700; }
.wbst { border: 0; background: none; font: inherit; font-weight: 800; cursor: pointer; padding: .55rem 0; text-align: center; width: 100%; }
.st-r { color: #d58a2a; } .st-w { color: #7c868c; } .st-d { color: #3f6bd8; } .st-f { color: #d8505a; }
.wbst.st-r { color: var(--text); }
.wbsl { display: inline-block; width: 1.4rem; font-weight: 800; }
.wbx { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 0; line-height: 0; text-align: center; }
.wbx:hover:not(:disabled) { color: var(--red); }
.wbx:disabled { opacity: .3; cursor: default; }
.wbx .ico { width: 16px; height: 16px; }
.wbcfoot { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .6rem; }
.wbcheck { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; cursor: pointer; }
.wbtempo { width: 9.5rem; margin: 0 !important; background: #f2f2f2 !important; border-color: transparent !important; font-size: .88rem; }
.wbaddset { display: inline-flex; }
.wbas { border: 1px solid var(--line); border-right: 0; background: #fff; border-radius: 10px 0 0 10px; padding: .4rem 1rem; font: inherit; color: var(--muted); cursor: pointer; }
.wbasp { border: 1px solid var(--line); background: #f2f2f2; border-radius: 0 10px 10px 0; padding: .4rem .6rem; }
.wbnote { width: 100%; margin: .6rem 0 0 !important; background: #f2f2f2 !important; border-color: transparent !important; font-size: .9rem; }
.wbnote:focus { background: #fff !important; border-color: var(--navy) !important; }
.wbalts, .wbss { margin-top: .4rem; color: var(--muted); }
.wbwarn { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem .8rem; background: #fbf0dc; border-radius: 12px; padding: .6rem .8rem; margin-bottom: .6rem; font-size: .88rem; }
.wbwarn .ico { width: 20px; height: 20px; color: #a0701f; flex: 0 0 20px; }
.wbwarn.excl { background: var(--red-bg); } .wbwarn.excl .ico { color: var(--red); }
.wbwarn .grow { flex: 1 1 14rem; }
.wbaddex, .wbaddsec { padding: .6rem 1rem 1rem; text-align: right; }
.wbaddsec { padding: 0; margin-bottom: 1rem; }
.wbaddbtn { border: 1px solid var(--blue-text); background: #fff; color: var(--blue-text); border-radius: 12px; padding: .55rem 1.3rem; font: inherit; font-weight: 600; cursor: pointer; }
.wbaddbtn:hover { background: #f2f7fa; }
.wbphead { display: flex; align-items: center; gap: .6rem; }
.wbphead h2 { flex: 1; margin: 0; font-size: 1.1rem; }
.wbptime { font-weight: 700; color: var(--blue-text); }
.wbpsec { margin-top: .8rem; }
.wbpsh { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; padding-bottom: .25rem; border-bottom: 2px solid var(--navy); }
.wbplist { list-style: none; margin: 0; padding: 0; min-height: 8px; }
.wbplist.over { background: #f2f7fa; }
.wbprow { display: flex; align-items: center; gap: .4rem; padding: .45rem .3rem; border-bottom: 1px solid var(--line); cursor: grab; background: #fff; font-size: .9rem; }
.wbprow.dragging { opacity: .4; }
.wbprow.overtop { box-shadow: 0 -3px 0 var(--blue); } .wbprow.overbot { box-shadow: 0 3px 0 var(--blue); }
.wbprow.lk { border-bottom-style: dashed; border-bottom-color: var(--blue); }
.wbprow.lkp, .wbprow.lk { border-left: 3px solid var(--blue); }
.wbgrip { color: var(--muted); line-height: 0; } .wbgrip .ico { width: 16px; height: 16px; }
.wbpn { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.wbpm { font-size: .78rem; white-space: nowrap; }
.wbpop { position: absolute; z-index: 90; background: #fff; border-radius: 14px; box-shadow: 0 10px 34px rgba(24, 54, 66, .25); padding: .35rem; min-width: 14rem; max-width: 20rem; }
.wbpop.narrow { min-width: 11rem; }
.wbmi { display: flex; align-items: center; width: 100%; text-align: left; border: 0; background: none; padding: .55rem .8rem; border-radius: 9px; font: inherit; cursor: pointer; color: var(--text); }
.wbmi:hover { background: #f2f7fa; }
.wbmi.danger { color: var(--red); }
.wbmodal { position: fixed; inset: 0; z-index: 100; background: rgba(24, 54, 66, .55); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.wbmbox { background: #fff; border-radius: 22px; width: min(520px, 100%); max-height: 90vh; display: flex; flex-direction: column; }
.wbmbox.wide { width: min(760px, 100%); }
.wbmhead { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.3rem .3rem; }
.wbmhead h2 { margin: 0; font-size: 1.2rem; }
.wbmbody { padding: .5rem 1.3rem; overflow: auto; }
.wbmbody label { display: block; margin-bottom: .6rem; font-size: .85rem; color: var(--muted); }
.wbmbody input[type=text], .wbmbody input[type=number] { margin-top: .2rem; }
.wbmfoot { display: flex; flex-wrap: wrap; gap: .5rem; padding: .8rem 1.3rem 1.2rem; }
.wbmfoot .danger, button.danger.primary { background: var(--red); border-color: var(--red); }
.wbfmts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .7rem; margin-bottom: .5rem; }
.wbfmt { text-align: left; border: 2px solid var(--line); border-radius: 16px; padding: .9rem 1rem; background: #fff; font: inherit; cursor: pointer; display: grid; gap: .25rem; color: var(--text); }
.wbfmt:hover { border-color: var(--blue); background: #f8fbfc; }
.wbfmt span { font-size: .85rem; color: var(--muted); }
.wbchecks { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .5rem; }
.wbaltrow { display: flex; align-items: center; gap: .8rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.wbaltrow .grow { min-width: 0; }
.wbtoast { position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 120; background: var(--navy); color: #fff; padding: .7rem 1.2rem; border-radius: 14px; box-shadow: 0 8px 28px rgba(24, 54, 66, .3); max-width: 90vw; }
.wbtoast.err { background: var(--red); }
.wbfab { display: none; }
@media (max-width: 1400px) {
    .wbgrid { grid-template-columns: 270px minmax(0, 1fr); }
    .wbprev { position: static; grid-column: 1 / -1; max-height: none; }
}
@media (max-width: 820px) {
    .wbgrid { grid-template-columns: minmax(0, 1fr); }
    .wbpick { position: fixed; inset: auto 0 0 0; max-height: 78vh; z-index: 70; border-radius: 22px 22px 0 0; transform: translateY(110%); transition: transform .2s; box-shadow: 0 -10px 40px rgba(24, 54, 66, .3); }
    .wb.pickopen .wbpick { transform: none; }
    .wbpclose { display: inline-block; flex: 0 0 auto; border: 0; background: none; padding: 0 .3rem; line-height: 0; }
    .wbpclose .ico { width: 22px; height: 22px; }
    .wbprev { display: none; }
    .wb.prevopen .wbprev { display: block; }
    .wbfab { display: flex; gap: .5rem; position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60; background: #fff; padding: .4rem; border-radius: 999px; box-shadow: 0 6px 24px rgba(24, 54, 66, .25); }
    .wbname { font-size: 1.2rem; }
    .wbcard { grid-template-columns: 24px minmax(0, 1fr); padding: .6rem .5rem .6rem .2rem; }
    .wbsrow .wbin { padding: .6rem .15rem; font-size: 16px; }
    .wbsets.cols3 .wbsrow, .wbsets.cols4 .wbsrow, .wbsets.cols5 .wbsrow, .wbsets.cols6 .wbsrow, .wbsets.cols7 .wbsrow, .wbsets.cols8 .wbsrow, .wbsets.cols9 .wbsrow { font-size: .8rem; }
    .wbsets { overflow-x: auto; }
    .wbitems { padding: .6rem .6rem .2rem; }
}
@media (prefers-reduced-motion: reduce) { .wbpick { transition: none; } }

/* ---- Phase 23: program page ---- */
.pwlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; margin-top: .6rem; }
.pwfixed { position: relative; }
.pwnum { display: inline-block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--tan-text); margin: 0 0 .25rem .3rem; }
.pwcard { border: 1px solid var(--line); border-radius: 16px; padding: .8rem .9rem; background: #fff; box-shadow: 0 1px 4px rgba(24, 54, 66, .06); }
.pwhead { display: grid; gap: .1rem; margin-bottom: .4rem; }
.pwname { font-weight: 700; font-size: 1.02rem; color: var(--text); }
.pweq { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .4rem; }
.eqico { display: inline-flex; width: 28px; height: 28px; border-radius: 50%; background: var(--tan-light); color: #5a4d36; align-items: center; justify-content: center; }
.eqico .ico { width: 17px; height: 17px; }
.pwflags { margin-bottom: .4rem; }
.pwsecs { list-style: none; margin: 0 0 .6rem; padding: 0; font-size: .88rem; }
.pwsecs li { padding: .12rem 0; }
.pwact { gap: .35rem; }
.pwday { display: flex; flex-wrap: wrap; align-items: end; gap: .4rem; margin-top: .6rem; border-top: 1px solid var(--line); padding-top: .5rem; }
.pwday label { margin: 0; flex: 1 1 8rem; } .pwday select { margin: .15rem 0 0; padding: .35rem .6rem; }
.pwweek { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; margin-top: .6rem; }
.pwcol { background: #f7f6f1; border-radius: 14px; padding: .5rem; min-width: 0; }
.pwcol h3, .pwcol h4 { margin: 0 0 .4rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--tan-text); }
.pwcol .pwcard { margin-bottom: .5rem; padding: .6rem; }
.pwrest { text-align: center; padding: .5rem 0; }
.pwweek.mini .pwcol { padding: .4rem; }
.calweek { margin-bottom: 1rem; }
.calweek h3 { margin-top: .6rem; }
.seg { display: inline-flex; background: #f2f2f2; border-radius: 999px; padding: .2rem; }
.seg a { padding: .25rem .8rem; border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.seg a.on { background: var(--navy); color: #fff; }
.seg a:hover { text-decoration: none; }
.limitcard { background: #fbf3e4; }
.addworkout { padding: 0; max-width: none; margin: 0; width: auto; flex-wrap: wrap; }
@media (max-width: 820px) { .pwweek { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .pwweek { grid-template-columns: minmax(0, 1fr); } }
.pwex { margin: .15rem 0 .35rem; padding-left: 1.3rem; font-size: .84rem; color: var(--ink, #183642); }
.pwex li { padding: .05rem 0; }
.pwfree { font-style: italic; }

/* Phase 24: training blocks */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.chip { border: 1px solid var(--line, #ddd); background: #fff; border-radius: 999px; padding: .3rem .8rem; font-size: .88rem; font-weight: 600; color: var(--blue-text); cursor: pointer; }
.chip.on, .chip:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.plantable { width: 100%; border-collapse: collapse; }
.plantable th { text-align: left; font-size: .8rem; color: var(--muted); padding: .2rem .4rem; }
.plantable td { padding: .25rem .4rem; vertical-align: middle; }
.plantable select, .plantable input { margin: 0; width: 100%; }
.exresults { list-style: none; padding: 0; margin: .3rem 0 0; }
.exresults li { padding: .15rem 0; }
.blkprog { border: 1px solid var(--line, #ddd); border-radius: 12px; padding: .8rem 1rem; margin-bottom: .8rem; background: #fff; }
.blkprog.draft { border-style: dashed; background: #faf7f1; }
.blkprog h3 { margin: 0 0 .2rem; }
.blkrules { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .3rem .8rem; align-items: end; margin: .5rem 0; }
.blkrules label { margin: 0; }
.blkrules .rulecheck { display: flex; gap: .4rem; align-items: center; }
.changelog { margin: .4rem 0 0; padding-left: 1.2rem; font-size: .88rem; max-height: 14rem; overflow: auto; }
.draftbanner { border: 1px dashed var(--tan, #d6c3a8); background: #faf7f1; border-radius: 12px; padding: .8rem 1rem; margin: .6rem 0; }
@media (max-width: 640px) {
    .plantable thead { display: none; }
    .plantable tr { display: grid; grid-template-columns: 2rem 1fr; gap: .3rem; padding: .4rem 0; border-bottom: 1px solid var(--line, #eee); }
    .plantable td:nth-child(n+3) { grid-column: 2; }
}

/* Phase 25: client plan, workout page, timer */
.planseg { margin: .3rem 0 .8rem; }
.weeknav { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .4rem; }
.weeklabel { display: flex; flex-direction: column; align-items: center; text-align: center; }
.button.off { opacity: .35; pointer-events: none; }
.pday { border-top: 1px solid var(--line, #e5e5e5); padding: .6rem 0; }
.pday h3 { margin: 0 0 .3rem; font-size: 1rem; }
.pday.today { background: linear-gradient(90deg, rgba(113, 159, 181, .12), transparent); margin: 0 -.6rem; padding: .6rem; border-radius: 10px; }
.pday-rest { margin: 0; }
.pwk { display: flex; justify-content: space-between; gap: .8rem; align-items: flex-start; background: #fff; border: 1px solid var(--line, #e5e5e5); border-radius: 12px; padding: .6rem .8rem; margin-bottom: .4rem; }
.pwk.moved { border-color: var(--blue); }
.pwk-name { font-weight: 700; font-size: 1.05rem; }
.pwk-move { display: flex; align-items: flex-end; gap: .3rem; flex-shrink: 0; }
.pwk-move label { margin: 0; }
.pwk-move select { margin: 0; font-size: .85rem; padding: .3rem .4rem; }
.js .pwk-go { display: none; }
@media (max-width: 520px) { .pwk { flex-direction: column; } .pwk-move { width: 100%; } .pwk-move label { flex: 1; } .pwk-move select { width: 100%; } }
.eqlist { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.eqlist li { display: flex; align-items: center; gap: .4rem; }
.wnotes { white-space: normal; margin: .2rem 0 .6rem; }
.wsec .tag { font-size: .75rem; }
.wlist { list-style: none; padding: 0; margin: .4rem 0 0; }
.wex { padding: .7rem 0; border-top: 1px solid var(--line, #e5e5e5); }
.wex.linked { border-left: 3px solid var(--blue); padding-left: .6rem; }
.wexh { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.wsets { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .92rem; color: var(--muted); }
.timer { position: fixed; inset: 0; z-index: 90; background: rgba(24, 54, 66, .96); display: flex; align-items: center; justify-content: center; padding: 1rem; color: #fff; }
.timer[hidden] { display: none; }
.timer-box { width: 100%; max-width: 420px; text-align: center; position: relative; }
.timer-close { position: absolute; top: -.2rem; right: 0; background: transparent; color: #fff; border: 0; font-size: 2rem; line-height: 1; cursor: pointer; }
.timer-title { color: #bcd0da; margin: 0 0 .4rem; font-weight: 600; }
.timer-phase { font-size: 1.4rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin: .2rem 0; }
.timer-phase.ph-work, .timer-phase.ph-amrap, .timer-phase.ph-timed { color: #f6c667; }
.timer-phase.ph-rest { color: #9fd3e8; }
.timer-phase.ph-done { color: #8fe0a8; }
.timer-name { font-size: 1.1rem; min-height: 1.6rem; margin: 0; }
.timer-clock { font-size: 5.5rem; font-weight: 800; font-variant-numeric: tabular-nums; margin: .4rem 0; line-height: 1; }
.timer-round { color: #bcd0da; margin: 0 0 .6rem; }
.timer-bar { height: 8px; background: rgba(255, 255, 255, .15); border-radius: 99px; overflow: hidden; margin-bottom: 1rem; }
.timer-bar span { display: block; height: 100%; width: 0; background: var(--blue); transition: width .25s linear; }
.timer-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.timer-actions button { min-width: 6rem; }
body.timer-open { overflow: hidden; }
.qalist li { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.qalist input[type=date] { margin: 0; max-width: 11rem; }
.qacheck { display: flex; align-items: center; gap: .5rem; margin: 0; min-width: 12rem; }
.copyactions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

/* ---- Phase 26: program calendar, workout tiles, dialogs ---- */
.four { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .1rem .75rem; }
.tagrow { display: flex; flex-wrap: wrap; gap: .3rem; margin: .1rem 0 .8rem; }
.detailsfold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; }
.detailsfold > summary::-webkit-details-marker { display: none; }
.detailsfold > summary h2 { margin: 0; }
.detailsfold > summary::after { content: "\25BE"; color: var(--muted); font-size: 1.1rem; }
.detailsfold:not([open]) > summary::after { content: "\25B8"; }
.detailsfold > form { margin-top: .8rem; }
details.more { margin: .4rem 0 .8rem; }
details.more > summary { cursor: pointer; color: var(--blue-text); font-weight: 600; font-size: .9rem; }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 0; background: transparent; color: var(--muted); cursor: pointer; list-style: none; }
.iconbtn::-webkit-details-marker { display: none; }
.iconbtn:hover { background: var(--tan-light); color: var(--text); }
.iconbtn.danger:hover { background: var(--red-bg); color: var(--red); }
.iconbtn .ico { width: 17px; height: 17px; }
.pcal-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .2rem 0 .8rem; }
.pcal-title { color: var(--muted); font-size: .9rem; flex: 1 1 12rem; }
.pcal-tools { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.plusmenu { position: relative; }
.plusbtn { width: 40px; height: 40px; background: var(--navy); color: #fff; box-shadow: 0 2px 6px rgba(24, 54, 66, .25); }
.plusbtn:hover { background: #224b5b; color: #fff; }
.plusbtn .ico { width: 22px; height: 22px; }
.plusmenu .menu { position: absolute; z-index: 30; top: calc(100% + .35rem); left: 0; min-width: 14rem; margin: 0; padding: .3rem; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px rgba(24, 54, 66, .18); }
.plusmenu .menu button { width: 100%; text-align: left; border: 0; background: transparent; border-radius: 9px; padding: .5rem .7rem; font-weight: 600; }
.plusmenu .menu button:hover { background: var(--tan-light); }
.calweek { border: 1px solid var(--line); border-radius: 18px; margin-bottom: .8rem; background: #fcfbf8; }
.calweek-h { display: flex; align-items: center; gap: .6rem; padding: .35rem .6rem .35rem .3rem; }
.calweek-toggle { display: inline-flex; align-items: center; gap: .3rem; border: 0; background: transparent; font-weight: 700; font-size: 1.02rem; padding: .35rem .6rem; border-radius: 10px; }
.calweek-toggle small { font-weight: 500; color: var(--muted); margin-left: .3rem; }
.calweek-toggle .chev { width: 18px; height: 18px; transition: transform .15s; }
.calweek.closed .calweek-toggle .chev { transform: rotate(-90deg); }
.calweek-info { flex: 1; color: var(--muted); font-size: .85rem; }
.calweek-body { padding: 0 .7rem .8rem; }
.calweek-body[hidden] { display: none; }
.wkgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
.wkcell { background: #f2f0e8; border-radius: 14px; padding: .5rem; min-width: 0; min-height: 5.5rem; transition: background .1s, outline-color .1s; outline: 2px dashed transparent; outline-offset: -2px; }
.wkcell h4 { display: flex; align-items: center; gap: .3rem; margin: 0 0 .4rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--tan-text); }
.wkcell h4 small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); }
.wkcell h4 .plusmini { margin-left: auto; }
.wkcell.anyday { margin-top: .5rem; min-height: 0; }
.noact { margin: 0; font-size: .78rem; font-style: italic; color: var(--muted); }
.dropok { outline-color: var(--blue) !important; background: #e4eef3 !important; }
.plusmini { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1.5px solid #c9bfa8; background: #fff; color: var(--tan-text); cursor: pointer; }
.plusmini:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.plusmini .ico { width: 14px; height: 14px; }
.wkslots { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .6rem; padding: .3rem; border-radius: 14px; outline: 2px dashed transparent; outline-offset: -2px; }
.slot { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.slotno { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--tan-text); margin-left: .2rem; }
.slot.empty { border: 2px dashed #d3cab5; border-radius: 16px; min-height: 8rem; align-items: center; justify-content: center; background: #f7f5ee; padding: .6rem; }
.slot.empty .plusmini { width: 40px; height: 40px; border-width: 2px; }
.slot.empty .plusmini .ico { width: 20px; height: 20px; }
.slotctl { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .4rem; }
.wtile { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 4px rgba(24, 54, 66, .07); padding: .55rem .6rem .55rem 1.7rem; margin-bottom: .45rem; min-width: 0; }
.wkcell .wtile:last-child, .slot .wtile { margin-bottom: 0; }
.wtile:hover { box-shadow: 0 3px 10px rgba(24, 54, 66, .14); }
.wtile-grip { position: absolute; left: 0; top: 0; bottom: 0; width: 1.5rem; display: flex; align-items: center; justify-content: center; color: #b3ad9d; cursor: grab; touch-action: none; border-radius: 14px 0 0 14px; }
.wtile-grip:hover, .wtile-grip:focus-visible { color: var(--navy); background: var(--tan-light); }
.wtile-grip .ico { width: 16px; height: 16px; }
.wtile-link { display: block; color: var(--text); text-decoration: none; padding-right: 5.6rem; }
.wtile-link:hover { text-decoration: none; }
.wtile-name { display: block; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.wtile-meta { display: block; font-size: .8rem; color: var(--muted); margin: .1rem 0 .3rem; }
.wtile-secs { list-style: none; margin: 0 0 .35rem; padding: 0; font-size: .8rem; }
.wtile-secs li { display: flex; justify-content: space-between; gap: .5rem; padding: .12rem 0; border-top: 1px solid #f0eee6; }
.wtile-secs li:first-child { border-top: 0; }
.wtile-secs span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wtile-secs em { font-style: normal; color: var(--muted); }
.wtile .pweq { margin: 0 0 .1rem; }
.wtile .eqico { width: 22px; height: 22px; }
.wtile .eqico .ico { width: 13px; height: 13px; }
.wtile-actions { position: absolute; top: .25rem; right: .25rem; display: flex; gap: 0; }
.wtile-actions .iconbtn { width: 26px; height: 26px; }
.wtile-actions .iconbtn .ico { width: 15px; height: 15px; }
.wtile.dragging { opacity: .35; }
.dndghost { position: fixed !important; z-index: 300; pointer-events: none; opacity: .92; box-shadow: 0 12px 28px rgba(24, 54, 66, .3); margin: 0 !important; transform: rotate(1.2deg); }
.dropmark { position: absolute; width: 4px; border-radius: 4px; background: var(--blue); pointer-events: none; z-index: 5; }
[data-dnd-zone] { position: relative; }
body.dnd-active, body.dnd-active * { user-select: none; cursor: grabbing !important; }
body.dnd-busy { cursor: progress; }
.dndtoast { position: fixed; z-index: 400; left: 50%; bottom: 1.2rem; transform: translateX(-50%); max-width: 92vw; margin: 0; }
.dndtoast[hidden] { display: none; }
.calmiles { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.mile { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; background: #fbf3e4; border: 1px solid #ecdcb8; border-radius: 12px; padding: .3rem .6rem; font-size: .88rem; }
.mile .ico { width: 15px; height: 15px; color: var(--tan-text); flex: none; }
.mile-text { flex: 1 1 12rem; }
.mile.draft { background: #f3f2ee; border-style: dashed; border-color: #cfcbbd; opacity: .8; }
.mileedit { flex: 1 1 100%; }
.mileedit > summary { display: inline-flex; float: right; margin-top: -2rem; }
.mileedit[open] > summary { float: none; margin: 0; }
.milebox { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .7rem; margin-top: .3rem; }
.laterprog { border: 1px solid var(--line); border-radius: 16px; padding: .7rem .9rem; margin-bottom: .7rem; background: #fff; }
.laterprog > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.laterprog.greyed { background: #f3f2ee; border-style: dashed; }
.laterprog.greyed > summary strong { color: #6e7378; }
.laterprog[open] { padding-bottom: 1rem; }
.laterprog .pcal { margin-top: .8rem; }
.rulesform { margin: .8rem 0; }
.rulesform fieldset { border: 0; padding: 0; margin: 0 0 .5rem; }
.rulesform legend { font-weight: 700; font-size: .9rem; padding: 0; margin-bottom: .2rem; }
label.radio { display: inline-flex; align-items: center; gap: .35rem; margin: 0 1rem .2rem 0; font-weight: 600; }
.dlg { border: 0; border-radius: 20px; padding: 0; width: min(520px, 94vw); max-height: 92vh; box-shadow: 0 20px 60px rgba(24, 54, 66, .35); color: var(--text); }
.dlg::backdrop { background: rgba(24, 54, 66, .5); }
.dlg form { padding: 1.3rem 1.4rem; margin: 0; max-width: none; }
.dlg h2 { margin-bottom: .8rem; }
.savedlist { max-height: 15rem; overflow: auto; border: 1px solid var(--line); border-radius: 12px; margin: .5rem 0 .8rem; }
.savedrow { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .5rem .7rem; border-top: 1px solid #f0eee6; margin: 0; cursor: pointer; }
.savedrow:first-child { border-top: 0; }
.savedrow[hidden] { display: none; }
.savedrow:hover { background: var(--tan-light); }
@media (max-width: 960px) { .wkgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .wkgrid { grid-template-columns: minmax(0, 1fr); }
    .wkcell { min-height: 0; }
    .wkslots { grid-template-columns: minmax(0, 1fr); }
    .wtile-link { padding-right: 5.2rem; }
    .pcal-tools { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .calweek-toggle .chev, .wkcell { transition: none; } }

/* ---- Phase 27: builder, favourites, library, export ---- */
.wbch { display: inline-flex; align-items: center; justify-content: center; gap: .2rem; min-width: 0; }
.wbapply { border: 0; background: transparent; color: var(--muted, #6b7b85); padding: .1rem; border-radius: 6px; cursor: pointer; line-height: 0; }
.wbapply:hover, .wbapply:focus-visible { background: #e4eef3; color: var(--blue); }
.wbapply .ico { width: 14px; height: 14px; }
.wbstar, .starbtn { border: 0; background: transparent; padding: .25rem; border-radius: 8px; cursor: pointer; color: #b9b4a6; line-height: 0; }
.wbstar .ico, .starbtn .ico { width: 18px; height: 18px; }
.wbstar:hover, .starbtn:hover { color: #c9942b; background: #f7f0de; }
.wbstar.on, .starbtn.on { color: #c9942b; }
.wbstar.on .ico, .starbtn.on .ico { fill: #e8b94a; }
.wbfilters { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin: .4rem 0; }
.wbfilters select { min-width: 0; margin: 0; }
.wbfilters .wbchip { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; }
.wbfilters .wbchip .ico { width: 14px; height: 14px; }
.wbinwrap { position: relative; flex: 1 1 14rem; min-width: 0; }
.wbinline { width: 100%; margin: 0 !important; }
.wbinlist { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(24, 54, 66, .16); max-height: 18rem; overflow: auto; }
.wbinrow { display: flex; align-items: center; gap: .3rem; padding: .15rem .4rem .15rem 0; border-top: 1px solid var(--line); }
.wbinrow:first-child { border-top: 0; }
.wbinpick { flex: 1; min-width: 0; text-align: left; border: 0; background: transparent; padding: .5rem .7rem; cursor: pointer; font: inherit; color: inherit; }
.wbinpick:hover, .wbinpick:focus-visible { background: #f2f7fa; }
.wbaddex { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.wbcard.ssg { border-color: transparent; }
.wbcard.ss0 { background: #e9f3f8; box-shadow: inset 4px 0 0 #4f9bbd, 0 1px 4px rgba(24, 54, 66, .06); }
.wbcard.ss1 { background: #f6eee0; box-shadow: inset 4px 0 0 #c9942b, 0 1px 4px rgba(24, 54, 66, .06); }
.wbcard.ss2 { background: #eaf4ea; box-shadow: inset 4px 0 0 #5b9b61, 0 1px 4px rgba(24, 54, 66, .06); }
.wbcard.ss3 { background: #f4ecf5; box-shadow: inset 4px 0 0 #9a6aa3, 0 1px 4px rgba(24, 54, 66, .06); }
.wbsslabel { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .1rem .5rem; border-radius: 999px; margin-bottom: .3rem; }
.wbsslabel.ss0 { background: #cfe5ef; color: #1f5a74; }
.wbsslabel.ss1 { background: #ecdcb8; color: #7a5710; }
.wbsslabel.ss2 { background: #cfe6d1; color: #2d6a34; }
.wbsslabel.ss3 { background: #e6d3ea; color: #6b3f74; }
.extable .favcol { width: 2.4rem; padding-right: 0; }
.extable form { margin: 0; }
.filterbar .checkline { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
/* Client view: supersets shown together */
.wex.sg { padding-left: .8rem; padding-right: .6rem; background: #e9f3f8; box-shadow: inset 4px 0 0 #4f9bbd; border-top-color: transparent; }
.wex.sg.ss1 { background: #f6eee0; box-shadow: inset 4px 0 0 #c9942b; }
.wex.sg.ss2 { background: #eaf4ea; box-shadow: inset 4px 0 0 #5b9b61; }
.wex.sg.ss3 { background: #f4ecf5; box-shadow: inset 4px 0 0 #9a6aa3; }
.wex.sg.sgfirst { border-top-left-radius: 14px; border-top-right-radius: 14px; margin-top: .6rem; }
.wex.sg.sglast { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; margin-bottom: .6rem; }
.wex .sglabel { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #1f5a74; margin-bottom: .2rem; }
/* Everfit export */
.exportwk { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .6rem; }
.exportitem { margin-bottom: 1rem; }
.exportitem textarea { width: 100%; }
.copyok { color: #2d6a34; font-weight: 600; }
.wbsave .iconbtn { white-space: nowrap; width: auto; height: auto; padding: .5rem .8rem; border-radius: 999px; font-size: .85rem; }
.wbfilters select { padding-left: .5rem; padding-right: .3rem; font-size: .85rem; }

/* Phase 27 fix: footer row is Each Side | Tempo | (space) | Add Set, with the note directly underneath */
.wbcfoot { flex-wrap: nowrap; gap: .6rem .9rem; }
.wbcfoot .wbcheck { margin: 0; flex: 0 0 auto; white-space: nowrap; }
.wbcfoot input.wbtempo[type=text] { flex: 0 0 auto; width: 5.4rem; min-width: 0; padding: .4rem .55rem; text-align: center; text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; }
.wbcfoot input.wbtempo[type=text]::placeholder { text-transform: uppercase; color: var(--muted); }
.wbcfoot .grow { flex: 1 1 auto; }
.wbcfoot .wbaddset { flex: 0 0 auto; }
input.wbnote[type=text] { width: 100%; margin: .5rem 0 0 !important; }
/* exercise name dropdown on a card */
.wbpop.wbexpop { width: min(26rem, calc(100vw - 16px)); max-width: none; max-height: 22rem; overflow: auto; padding: .3rem; }
.wbexlist { display: block; }
.wbexhead { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: .4rem .6rem .25rem; font-weight: 700; }
.wbexrow { display: flex; align-items: center; gap: .3rem; border-radius: 8px; }
.wbexrow:hover, .wbexrow:focus-within { background: #f2f2f2; }
.wbexpick { flex: 1; min-width: 0; display: flex; align-items: center; gap: .6rem; background: none; border: 0; padding: .4rem .5rem; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.wbexinfo { display: flex; flex-direction: column; min-width: 0; }
.wbexinfo strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbexnote { padding: .5rem .6rem; margin: 0; }
.wbexcustom { display: block; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); margin-top: .3rem; padding: .55rem .6rem; font: inherit; color: var(--navy); cursor: pointer; }
.wbexcustom:hover { background: #f2f2f2; }
@media (max-width: 480px) { .wbcfoot { gap: .4rem .5rem; } .wbcfoot input.wbtempo[type=text] { width: 3.9rem; padding: .35rem .2rem; font-size: .72rem; letter-spacing: 0; } .wbcfoot .wbas { padding: .4rem .55rem; font-size: .88rem; } .wbcfoot .wbasp { padding: .4rem .45rem; } .wbcfoot .wbaddset { margin-left: auto; } .wbcfoot .wbcheck { font-size: .84rem; } }
@media (max-width: 380px) { .wbcfoot { flex-wrap: wrap; } }

/* Calendar workout tiles (coach and client): handle and icons on the top row, then title, duration and a row per section */
.wtile { padding: .35rem .7rem .7rem; }
.wtile-top { display: flex; align-items: center; justify-content: space-between; gap: .3rem; margin: 0 -.35rem .2rem -.35rem; }
.wtile-grip { position: static; width: 1.8rem; height: 1.8rem; border-radius: 8px; flex: 0 0 auto; }
.wtile-actions { position: static; display: flex; gap: 0; flex: 0 0 auto; }
.wtile-actions .iconbtn { width: 28px; height: 28px; }
.wtile-link, .wkcell .wtile-link { padding-right: 0; }
.wtile-name, .pwk-name { display: block; font-size: 1.12rem; line-height: 1.2; font-weight: 800; color: var(--navy); overflow-wrap: break-word; word-break: normal; hyphens: auto; }
.wtile-dur { display: block; margin: .3rem 0 .55rem; font-size: .84rem; font-weight: 700; color: #cdb893; }
.wtile-secs { margin: 0 0 .2rem; font-size: .92rem; }
.wtile-secs li { align-items: center; border-top: 0; padding: .22rem 0; gap: .5rem; }
.wtile-sname { display: flex; align-items: center; gap: .45rem; min-width: 0; font-weight: 700; color: var(--navy); }
.wtile-sname > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wtile-sname .ico, .wtile-count .ico { flex: 0 0 auto; width: 18px; height: 18px; color: #cdb893; }
.wtile-count { display: inline-flex; align-items: center; gap: .3rem; font-style: normal; flex: 0 0 auto; }
.wtile-count b { font-weight: 800; color: var(--navy); min-width: .8rem; }
.wtile-type { font-size: .8rem; color: var(--muted); font-style: normal; flex: 0 0 auto; }
.wtile .pwflags { display: block; margin-top: .3rem; }
.pwk { flex-direction: column; align-items: stretch; gap: .5rem; padding: .8rem .9rem; }
.pwk-main { min-width: 0; }
.pwk .wtile-secs { margin-top: 0; }
.pwk-move { width: 100%; }
.pwk-move label { flex: 1; }
.pwk-move select { width: 100%; }
/* wider day columns so a tile reads like the guide: as many as fit, wrapping onto the next row */
.wkgrid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .7rem; }
@media (max-width: 960px) { .wkgrid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } }
@media (max-width: 640px) { .wkgrid { grid-template-columns: minmax(0, 1fr); } }
.wkcell { padding: .6rem; }
.wkcell h4 { font-size: .9rem; margin-bottom: .55rem; }
.wkcell h4 small { font-size: .85rem; }

/* ---- Phase 28: Resources and timers ---- */
.rsh { margin: 1.2rem 0 .5rem; font-size: 1.05rem; color: var(--tan-text); text-transform: uppercase; letter-spacing: .08em; }
.rs-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .7rem; }
.rs-tool { display: flex; gap: .8rem; align-items: center; background: #fff; border-radius: 18px; padding: .9rem 1rem; color: var(--text); text-decoration: none; box-shadow: 0 1px 4px rgba(24, 54, 66, .08); }
.rs-tool:hover { text-decoration: none; box-shadow: 0 3px 12px rgba(24, 54, 66, .16); }
.rs-tool strong { display: block; font-size: 1.05rem; color: var(--navy); }
.rs-ico { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; background: var(--navy); color: var(--tan); display: flex; align-items: center; justify-content: center; }
.rs-ico .ico { width: 24px; height: 24px; }
.rs-list { display: grid; gap: .6rem; }
.rs-item { display: flex; flex-direction: column; gap: .2rem; align-items: flex-start; background: #fff; border-radius: 16px; padding: .8rem 1rem; color: var(--text); text-decoration: none; box-shadow: 0 1px 4px rgba(24, 54, 66, .08); }
.rs-item:hover { text-decoration: none; box-shadow: 0 3px 12px rgba(24, 54, 66, .16); }
.rs-item strong { font-size: 1.05rem; color: var(--navy); }
.rs-ext { color: var(--tan-text); }
.rs-article h1 { margin: .4rem 0; }
.rs-article .lead { font-size: 1.05rem; }
.rs-body p { line-height: 1.6; margin: 0 0 1rem; }
.reslist .rowacts { display: flex; gap: .8rem; align-items: center; flex: 0 0 auto; }

.tmr { max-width: 820px; margin: 0 auto; }
.tmr-tabs { display: flex; gap: .4rem; margin-bottom: .8rem; flex-wrap: wrap; }
.tmr-tab { border-radius: 999px; border: 1.5px solid var(--tan); background: transparent; color: var(--tan-text); font-weight: 700; padding: .45rem 1.1rem; cursor: pointer; font: inherit; font-weight: 700; }
.tmr-tab[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.tmr-stage { --ring: min(88vw, 30rem, 58vh); background: #183642; color: #fff; border-radius: 26px; padding: 1rem 1rem 1.2rem; display: flex; flex-direction: column; align-items: center; gap: .6rem; margin-bottom: 1rem; transition: background .25s; text-align: center; }
.tmr-stage.seg-idle { background: #183642; }
.tmr-stage.seg-prep { background: #a05a00; }
.tmr-stage.seg-work { background: #1b7a3d; }
.tmr-stage.seg-rest { background: #1d5f9e; }
.tmr-stage.seg-roundrest { background: #6b3fa0; }
.tmr-stage.seg-done { background: #183642; }
.tmr-stage.mode-stopwatch.seg-work, .tmr-stage.mode-countdown.seg-work { background: #183642; }
.tmr-stage.style-gym, .tmr-stage.style-gym.seg-idle, .tmr-stage.style-gym.seg-work, .tmr-stage.style-gym.seg-done { background: #0a0a0a; }
.tmr-top { display: flex; flex-direction: column; align-items: center; gap: .15rem; min-height: 3.4rem; justify-content: center; }
.tmr-phase { font-size: clamp(1.4rem, 5vw, 2.6rem); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; line-height: 1.1; }
.tmr-sub { font-size: clamp(.85rem, 2.6vw, 1.2rem); opacity: .88; min-height: 1.2em; }
.tmr-ring { position: relative; width: var(--ring); height: var(--ring); flex: 0 0 auto; }
.tmr-ring svg { width: 100%; height: 100%; display: block; }
.tmr-track { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 1.2; }
.tmr-prog { fill: none; stroke: #fff; stroke-width: 4.4; stroke-linecap: round; stroke-dashoffset: 289; transition: stroke-dashoffset .12s linear; }
.tmr-stage.seg-done .tmr-prog { stroke: var(--tan); }
.tmr-stage.style-gym .tmr-track { stroke: #3d1512; }
.tmr-stage.style-gym .tmr-prog { stroke: #ff3b30; }
.tmr-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.tmr-digits { font-size: calc(var(--ring) * .26); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.02em; }
.tmr-digits.long { font-size: calc(var(--ring) * .18); }
.tmr-gym { width: calc(var(--ring) * .76); }
.tmr-gym svg { width: 100%; height: auto; display: block; }
.tmr-gym .on { fill: #ff3b30; }
.tmr-gym .off { fill: #2b0e0c; }
.tmr-name { font-size: clamp(1.3rem, 4.6vw, 2.5rem); font-weight: 800; min-height: 1.2em; overflow-wrap: anywhere; }
.tmr-next { font-size: clamp(.9rem, 2.8vw, 1.3rem); opacity: .85; min-height: 1.2em; }
.tmr-ctl { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; align-items: center; }
.tmr .tmr-btn { background: rgba(255, 255, 255, .16); color: #fff; border: 1.5px solid rgba(255, 255, 255, .4); border-radius: 999px; padding: .7rem 1.2rem; font: inherit; font-weight: 700; cursor: pointer; margin: 0; min-height: 3rem; }
.tmr .tmr-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .28); }
.tmr .tmr-btn:disabled { opacity: .4; cursor: default; }
.tmr .tmr-btn.tmr-main { background: #fff; color: #183642; border-color: #fff; font-size: 1.25rem; min-width: 9.5rem; padding: .8rem 2rem; }
.tmr .tmr-btn.tmr-main:hover { background: #f3f0e8; }
.tmr .tmr-btn.tmr-icon { padding: .7rem; width: 3rem; display: inline-flex; align-items: center; justify-content: center; }
.tmr .tmr-btn.tmr-icon .ico { width: 22px; height: 22px; }
.tmr .tmr-btn.off { opacity: .55; }
.tmr .tmr-btn[hidden] { display: none; }
.tmr-stage.style-gym .tmr-main { background: #ff3b30; color: #fff; border-color: #ff3b30; }
.tmr-laps { list-style: none; margin: .4rem 0 0; padding: 0; width: min(100%, 26rem); max-height: 9rem; overflow: auto; font-variant-numeric: tabular-nums; }
.tmr-laps[hidden] { display: none; }
.tmr-laps li { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; padding: .25rem .2rem; border-top: 1px solid rgba(255, 255, 255, .2); font-size: .95rem; }
.tmr-stage.tfull { position: fixed; inset: 0; z-index: 500; border-radius: 0; margin: 0; --ring: min(94vw, calc(100vh - 17rem)); --ring: min(94vw, calc(100dvh - 17rem)); justify-content: center; overflow: auto; padding: 1rem; }
.tmr-stage.tfull .tmr-btn { min-height: 3.4rem; }
.tmr-stage.tfull .tmr-name { font-size: clamp(1.6rem, 6vw, 3.4rem); }
html.tmr-lock, html.tmr-lock body { overflow: hidden; }
.tmr-cfg { margin-bottom: 1rem; }
.tmr-cfg h2 { margin-top: 0; }
.tmr-cfg .tmr-h2 { margin-top: 1.6rem; }
.tmr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem .8rem; }
.tmr-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tmr-presets { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.tmr-total { font-weight: 700; color: var(--navy); margin: .4rem 0 0; }
.tmr-style { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.tmr-style h3 { margin: 0 0 .4rem; font-size: .95rem; }
.tmr-style .seg button { border: 0; background: transparent; padding: .35rem 1rem; border-radius: 999px; font-weight: 600; color: var(--muted); cursor: pointer; font: inherit; font-weight: 600; font-size: .9rem; }
.tmr-style .seg button.on { background: var(--navy); color: #fff; }
.tmr-try { display: flex; align-items: flex-end; }
.tmr-range { display: block; margin-top: .8rem; }
.tmr-range output { float: right; font-weight: 700; color: var(--navy); }
.tmr-range input[type=range] { width: 100%; margin-top: .4rem; padding: 0; border: 0; accent-color: var(--navy); }
.tmr-file input { margin-top: .4rem; }
@media (max-width: 520px) { .tmr-stage { padding: .8rem .6rem 1rem; border-radius: 22px; } .tmr .tmr-btn { padding: .65rem 1rem; } .tmr .tmr-btn.tmr-main { min-width: 8rem; } }
@media (prefers-reduced-motion: reduce) { .tmr-prog, .tmr-stage { transition: none; } }

.tmr-gym { width: calc(var(--ring) * .68); }
.tmr-name:empty, .tmr-next:empty { display: none; }

/* ---- Phase 29: training landing, libraries, Training Hub ---- */
.trainnav { margin-bottom: 1rem; }
.trgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .9rem; margin: 1rem 0; }
.trcard { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--line); border-radius: 18px; color: var(--text); text-decoration: none; }
.trcard:hover { border-color: var(--navy); }
.trcard .trn { font-size: 1.8rem; font-weight: 700; color: var(--navy); line-height: 1.1; }
a.plusbtn, button.plusbtn { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; text-decoration: none; flex: none; padding: 0; border: 0; cursor: pointer; }
.libfilter { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0 .7rem; }
.libfilter input[type=search] { flex: 1 1 14rem; width: auto; display: block; }
.libfilter select { width: auto; display: block; }
.tagchips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .3rem 0 1rem; }
.tagchips .chip { display: inline-flex; gap: .35rem; align-items: center; background: #f6f1e8; border: 1px solid #d6c3a7; color: var(--navy); text-decoration: none; }
.tagchips .chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.tagchips .chip.on .muted { color: #cfe0e8; }
.tagchips.small { margin: .35rem 0 0; }
.tagchips.small .chip { padding: .1rem .55rem; font-size: .72rem; }
.pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .4rem .9rem; margin: .5rem 0; }
.hubpic { max-width: 100%; height: auto; border-radius: 14px; }
.menu li form { margin: 0; }
/* client Training Hub */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem; margin: .8rem 0; }
.hub-card { display: flex; flex-direction: column; gap: .3rem; padding: .9rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: 18px; color: var(--text); text-decoration: none; }
.hub-card:hover { border-color: var(--navy); }
.hub-card img { width: 100%; height: 130px; object-fit: cover; border-radius: 12px; }
.hub-done { color: #2c7a4b; font-weight: 600; }
.logdone { margin-top: 1rem; }
.effortrow { display: flex; flex-wrap: wrap; gap: .4rem; }
.effortrow label { display: inline-flex; align-items: center; gap: .3rem; font-weight: 400; }
.effortrow input { width: auto; display: inline-block; }

/* ---- Phase 30: client plan with several programs, drag between days ---- */
.pday[data-dnd-zone] { position: relative; min-height: 3rem; }
.pwk { position: relative; align-items: flex-start; }
.pwk .wtile-grip.pwk-grip { position: static; width: 1.8rem; height: 1.8rem; border-radius: 8px; flex: 0 0 auto; margin-top: .1rem; }
.pwk.dragging { opacity: .35; }
.pwk-main { flex: 1 1 auto; min-width: 0; }
.pwk-prog { display: block; font-size: .78rem; font-weight: 600; color: var(--blue); margin-top: .1rem; }
.pday.dropok { border-radius: 10px; outline: 2px dashed var(--blue); outline-offset: -2px; }

/* ---- Phase 30: client Training tab ---- */
.tcal-week { margin: .8rem 0 1.2rem; }
.tcal-week h3 { margin: 0 0 .4rem; }
.tcal .wkcell.today { background: #e6eff3; outline: 2px solid var(--blue); outline-offset: -2px; }
.tcal .wtile { padding: .7rem .7rem .55rem; }
.tcal .wtile.moved { border-color: var(--blue); }
.tcal .wtile-name { font-size: 1rem; }
.createpane { padding-top: .4rem; }
.createpane h3 { margin: 1.1rem 0 .3rem; }

/* ---- Global calendar in the Training look: warm day boxes, white tiles with a coloured edge ---- */
.gcal-grid { gap: .5rem; }
.gcal-head { gap: .5rem; }
.gcal-head span { color: var(--tan-text); font-weight: 700; letter-spacing: .07em; }
.gday { background: #f2f0e8; border-radius: 14px; padding: .5rem; gap: .4rem; box-shadow: none; outline: 2px dashed transparent; outline-offset: -2px; }
.gday.today { background: #e6eff3; box-shadow: none; outline: 2px solid var(--blue); }
.gday.out { background: transparent; box-shadow: none; outline: 1px dashed #d9d4c4; }
.gday .gnum, .gday .gnum-m { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tan-text); }
.gday .gnum small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); }
.gev { position: relative; display: block; background: #fff; color: var(--text); border: 1px solid var(--line); border-left: 4px solid #bcbcbc; border-radius: 14px; box-shadow: 0 1px 4px rgba(24, 54, 66, .07); padding: .45rem .6rem; font-size: .85rem; line-height: 1.25; white-space: normal; text-decoration: none; overflow: hidden; }
.gev:hover { box-shadow: 0 3px 10px rgba(24, 54, 66, .14); text-decoration: none; }
.gev-name { display: block; font-size: .95rem; line-height: 1.2; font-weight: 800; color: var(--navy); overflow-wrap: anywhere; }
.gev-time { display: block; margin-top: .2rem; font-size: .8rem; font-weight: 700; color: #cdb893; }
.gev-sub { display: block; margin-top: .15rem; font-size: .78rem; color: var(--muted); overflow-wrap: anywhere; }
.gev.ev-session { background: #fff; color: var(--text); border-left-color: #25525f; }
.gev.ev-task { background: #fff; color: var(--text); border-left-color: #d6c3a7; }
.gev.ev-task.ev-done { background: #eaf8f1; border-left-color: #357c57; color: var(--text); text-decoration: none; }
.gev.ev-task.ev-done .gev-name { text-decoration: line-through; color: #1f5a3d; }
.gev.ev-task.ev-late { background: #fbeaec; border-left-color: #b04a52; color: var(--text); }
.gev.ev-task.ev-late .gev-name { color: #8f2f38; }
.gev.ev-checkin { background: #fff; color: var(--text); border-left-color: #8d6bb5; }
.gev.ev-checkin.ev-done { background: #eaf8f1; border-left-color: #357c57; }
.gev.ev-event { background: #fff; color: var(--text); border-left-color: #e0a94c; }
.gev.ev-block { background: repeating-linear-gradient(135deg, #f1f1f1, #f1f1f1 6px, #fafafa 6px, #fafafa 12px); color: #6a6a6a; border-left-color: #bcbcbc; }
.gev.ev-block .gev-name { color: #5b5b5b; }
.gev.ev-request { background: #fff; color: var(--text); border: 1.5px dashed #25525f; border-left: 4px solid #25525f; }
.gcal.month .gev { padding: .3rem .5rem; border-radius: 10px; }
.gcal.month .gev-name { font-size: .8rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcal.month .gev-time { display: inline; font-size: .72rem; margin: 0 .3rem 0 0; }
.gcal.month .gev-sub { display: none; }
.gmore { font-size: .78rem; font-weight: 600; color: var(--tan-text); }
.dayview .ev a { background: #fff; border: 1px solid var(--line); border-left: 4px solid #bcbcbc; box-shadow: 0 1px 4px rgba(24, 54, 66, .07); border-radius: 14px; }
.dayview .ev a:hover { box-shadow: 0 3px 10px rgba(24, 54, 66, .14); }
.dayview .ev.ev-session a { background: #fff; color: var(--text); border-left-color: #25525f; }
.dayview .ev.ev-task a { background: #fff; color: var(--text); border-left-color: #d6c3a7; }
.dayview .ev.ev-task.ev-done a { background: #eaf8f1; border-left-color: #357c57; }
.dayview .ev.ev-task.ev-late a { background: #fbeaec; border-left-color: #b04a52; color: var(--text); }
.dayview .ev.ev-checkin a { background: #fff; color: var(--text); border-left-color: #8d6bb5; }
.dayview .ev.ev-event a { background: #fff; color: var(--text); border-left-color: #e0a94c; }
.dayview .ev.ev-block a { background: repeating-linear-gradient(135deg, #f1f1f1, #f1f1f1 6px, #fafafa 6px, #fafafa 12px); border-left-color: #bcbcbc; }
.dayview .ev.ev-request a { background: #fff; border-style: dashed; border-left-style: solid; border-left-color: #25525f; }
.dayview .evtime { font-weight: 700; color: #cdb893; }
.dayview .evtext strong { color: var(--navy); font-weight: 800; }
@media (max-width: 760px) {
    .gcal.month .gev { width: .6rem; height: .6rem; padding: 0; border-radius: 50%; border: 0; box-shadow: none; background: #bcbcbc; }
    .gcal.month .gev > * { display: none; }
    .gcal.month .gev.ev-session { background: #25525f; } .gcal.month .gev.ev-task { background: #d6c3a7; } .gcal.month .gev.ev-task.ev-done { background: #57d397; } .gcal.month .gev.ev-task.ev-late { background: #db6e76; }
    .gcal.month .gev.ev-checkin { background: #8d6bb5; } .gcal.month .gev.ev-event { background: #e0a94c; } .gcal.month .gev.ev-block { background: #bcbcbc; }
    .gcal.month .gev.ev-request { background: #fff; box-shadow: inset 0 0 0 1.5px #25525f; }
    .gcal.month .gday { min-height: 3.4rem; padding: .3rem; }
    .gcal.week .gday, .gcal.fortnight .gday { padding: .55rem .7rem; }
}

/* Client app on an iPhone home screen: the status bar is see-through (black-translucent), so whatever is under it shows.
   Keep that strip solid navy at all times, and make the page edge navy too, so pulling down never shows a pale band. */
html.clientroot { background: var(--navy); }
body.clientshell { min-height: 100vh; min-height: 100dvh; }
/* iOS 26 chooses the status bar's text colour and its soft "fade" from the page's own background colour (not from the navy strip above).
   With a pale body it showed dark text and a grey haze over the navy header. Make the page background navy and give the content its own
   pale background, so the status bar area is judged dark: white clock, no haze. */
body.clientshell.signedin { background: var(--navy); }
body.clientshell.signedin .shellmain { background: var(--bg); min-height: 100vh; min-height: 100dvh; }
body.clientshell::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: var(--navy); z-index: 9999; pointer-events: none; }
.dayview .evlist > li.ev { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 14px; }

/* Coach sign-in: Remember me */
.login-card label.rememberme { display: flex; align-items: center; gap: .55rem; margin: .2rem 0 1rem; font-weight: 500; color: var(--muted); cursor: pointer; }
.login-card label.rememberme input { width: 1.15rem; height: 1.15rem; margin: 0; padding: 0; flex: none; accent-color: var(--navy); }

/* ---- Floating bottom menu (phones), client and coach ---- */
.fnav { display: none; }
@media (max-width: 820px) {
    .fnav { --fs: 1; position: fixed; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: calc(100% - 24px); max-width: 560px; transform: translateX(-50%); z-index: 35; display: grid; grid-template-columns: repeat(var(--fcols, 5), minmax(0, 1fr)); gap: .1rem; align-items: center;
        padding: calc(.45rem * var(--fs)) calc(.5rem * var(--fs)); background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 999px; box-shadow: 0 6px 24px rgba(24, 54, 66, .14), 0 1px 3px rgba(24, 54, 66, .08);
        transition: width .22s ease, padding .22s ease, bottom .22s ease; }
    .fnav.small { --fs: .8; width: min(calc(80% - 19px), 448px); }
    .fnav a, .fnav button { display: flex; align-items: center; justify-content: center; height: calc(3.1rem * var(--fs)); margin: 0 auto; width: 100%; max-width: 4.6rem; border: 0; background: transparent; border-radius: 999px; color: #c9b48f; font: inherit; cursor: pointer; text-decoration: none; transition: height .22s ease, background .15s; -webkit-tap-highlight-color: transparent; }
    .fnav a:hover, .fnav button:hover { text-decoration: none; background: #f6f4ef; }
    .fnav a.on, .fnav a[aria-current], .menu-open .fnav #mmenu { background: #eeece6; color: #b39a68; }
    .fnav { --fcols: 6; }
    .fnav .ico { width: calc(28px * var(--fs)); height: calc(28px * var(--fs)); transition: width .22s ease, height .22s ease; }
    .coachshell main, .clientshell .clientmain { padding-bottom: 7rem; }
    .clientshell.signedin .shellmain { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
    .wbfab { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
    body.clients-open .fnav, body.notif-open .fnav { display: none; }
}
@media (max-width: 820px) and (prefers-reduced-motion: reduce) { .fnav, .fnav a, .fnav button, .fnav .ico { transition: none; } }
body.cook .fnav { display: none !important; }
@media print { .fnav { display: none !important; } }

/* ================= Chat (coach and client) ================= */
.chat { --ch-h: calc(100vh - 150px); --ch-h: calc(100dvh - 150px); }
.chat, .ch-modal, .ch-lightbox { --muted: #4f5a63; }
.ch-ico { width: 1.2em; height: 1.2em; flex: none; }
.ch-loading { padding: 2rem 0; }
.ch-link { background: none; border: 0; padding: 0; color: #2f6483; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.ch-link:hover { text-decoration: underline; }
.ch-link.danger { color: var(--red); }
.ch-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--navy); cursor: pointer; padding: 0; flex: none; }
.ch-btn:hover { background: var(--tan-light); }
.ch-btn:focus-visible, .ch-row:focus-visible, .ch-send:focus-visible, .ch-link:focus-visible, .ch-em:focus-visible, .ch-filecard:focus-visible, .ch-imgbtn:focus-visible, .ch-quote:focus-visible, .ch-input:focus-visible, .ch-search:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.ch-net { background: var(--red-bg); color: var(--red); padding: .55rem 1rem; border-radius: 12px; margin-bottom: .6rem; font-weight: 600; font-size: .9rem; }
.ch-toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--navy); color: #fff; padding: .65rem 1rem; border-radius: 14px; z-index: 300; max-width: min(92vw, 420px); font-size: .92rem; box-shadow: 0 8px 28px rgba(24, 54, 66, .3); }
.ch-toast[hidden] { display: none; }
.ch-empty { text-align: center; padding: 3rem 1.5rem; color: var(--navy); display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }
.ch-empty .ch-ico { width: 2.4rem; height: 2.4rem; color: var(--blue-text); margin-bottom: .5rem; }
.ch-empty h2 { margin: 0 0 .3rem; }

.ch-shell { display: grid; grid-template-columns: 340px minmax(0, 1fr); background: #fff; border-radius: 22px; overflow: hidden; height: var(--ch-h); min-height: 480px; }
.ch-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #fff; }
.ch-listpane { border-right: 1px solid var(--line); }
.ch-listhead { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.1rem .4rem; gap: .5rem; }
.ch-listhead h1 { margin: 0; font-size: 1.5rem; }
.ch-lockmini { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 700; color: var(--green); background: var(--green-bg); padding: .2rem .55rem; border-radius: 999px; }
.ch-searchrow { display: flex; align-items: center; gap: .5rem; margin: .3rem 1rem .6rem; padding: 0 .8rem; background: var(--bg); border-radius: 14px; color: var(--muted); }
.ch-searchrow input.ch-search { flex: 1; border: 0; background: transparent; box-shadow: none; padding: .65rem 0; margin: 0; font: inherit; color: var(--navy); min-width: 0; width: auto; outline-offset: 6px; border-radius: 0; }
.ch-listbody { flex: 1; overflow-y: auto; padding: 0 .5rem .5rem; margin: 0; list-style: none; overscroll-behavior: contain; }
.ch-none { padding: 1.2rem; }
.ch-row { display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 16px; padding: .7rem .65rem; cursor: pointer; font: inherit; color: var(--navy); }
.ch-row:hover { background: var(--bg); }
.ch-row.on { background: var(--tan-light); }
.ch-av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.ch-av.sm { width: 38px; height: 38px; }
.ch-avtxt { display: inline-flex; align-items: center; justify-content: center; background: var(--tan); color: var(--navy); font-weight: 700; font-size: .95rem; }
.ch-rowtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.ch-rowtop, .ch-rowbot { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.ch-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-when { font-size: .75rem; color: var(--muted); flex: none; }
.ch-prev { color: var(--muted); font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-row.unread .ch-prev, .ch-row.unread .ch-when { color: var(--navy); font-weight: 600; }
.ch-badge { background: var(--navy); color: #fff; font-size: .72rem; font-weight: 700; min-width: 1.35rem; height: 1.35rem; padding: 0 .4rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ch-archtoggle { padding: .8rem 1.1rem 1rem; text-align: left; }
.ch-archtoggle[hidden] { display: none; }

.ch-threadpane { position: relative; }
.ch-thread { display: flex; flex-direction: column; height: 100%; min-height: 0; position: relative; }
.ch-thread.drop::after { content: "Drop files to attach"; position: absolute; inset: 0; background: rgba(113, 159, 181, .18); border: 3px dashed var(--blue); border-radius: 18px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--navy); z-index: 5; pointer-events: none; }
.ch-thead { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line); background: #fff; }
.ch-tinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ch-ttitle { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-tstatus { font-size: .78rem; color: var(--muted); }
.ch-tstatus.typing { color: var(--green); font-weight: 600; }
.ch-back { display: none; }
.ch-back { min-width: 44px; min-height: 44px; margin: -.4rem 0 -.4rem -.5rem; align-items: center; justify-content: center; touch-action: manipulation; flex: none; }
.ch-banners:empty { display: none; }
.ch-intro-b, .ch-warn { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .9rem; margin: .6rem .9rem 0; border-radius: 14px; font-size: .85rem; }
.ch-intro-b { background: var(--green-bg); color: #1f4a34; }
.ch-warn { background: var(--red-bg); color: var(--red); }
.ch-intro-b p, .ch-warn p { margin: 0; flex: 1; }
.ch-body { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.ch-msgs { flex: 1; overflow-y: auto; padding: 1rem .9rem .5rem; display: flex; flex-direction: column; gap: .3rem; overscroll-behavior: contain; background: #fbfaf7; }
.ch-olderwrap { display: flex; justify-content: center; margin: .4rem 0 .8rem; }
.ch-older { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: .35rem 1rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--navy); font-weight: 700; font-size: .9rem; cursor: pointer; }
.ch-older:hover { background: #f6f4ef; }
.ch-older:disabled { opacity: .7; cursor: default; }
.ch-older svg { width: 16px; height: 16px; }
.ch-older small { font-weight: 600; color: var(--muted); }
.ch-day { text-align: center; margin: .8rem 0 .3rem; }
.ch-day span { font-size: .75rem; font-weight: 700; color: var(--muted); background: var(--bg); padding: .2rem .7rem; border-radius: 999px; }
.ch-sys { align-self: center; display: flex; gap: .4rem; align-items: center; font-size: .8rem; color: var(--muted); background: var(--bg); padding: .35rem .8rem; border-radius: 999px; margin: .3rem 0; text-align: center; max-width: 92%; }
.ch-intro { margin: auto; text-align: center; color: var(--muted); }
.ch-intro .ch-ico { width: 1.8rem; height: 1.8rem; color: var(--blue-text); }
.ch-msg { display: flex; flex-direction: column; max-width: min(78%, 560px); position: relative; }
.ch-msg.mine { align-self: flex-end; align-items: flex-end; }
.ch-msg.theirs { align-self: flex-start; align-items: flex-start; }
.ch-bubble { padding: .5rem .75rem .35rem; border-radius: 18px; background: #fff; border: 1px solid var(--line); word-break: break-word; overflow-wrap: anywhere; min-width: 3.4rem; }
.ch-msg.mine .ch-bubble { background: var(--navy); border-color: var(--navy); color: #fff; border-bottom-right-radius: 6px; }
.ch-msg.theirs .ch-bubble { border-bottom-left-radius: 6px; }
.ch-msg.flash .ch-bubble { outline: 3px solid var(--blue); outline-offset: 2px; }
.ch-text { margin: 0; white-space: pre-wrap; }
.ch-text a { color: inherit; text-decoration: underline; }
.ch-msg.theirs .ch-text a { color: var(--blue-text); }
.ch-undec { display: flex; gap: .4rem; align-items: flex-start; font-style: italic; opacity: .85; font-size: .92rem; }
.ch-meta { display: flex; align-items: center; justify-content: flex-end; gap: .25rem; font-size: .68rem; opacity: .75; margin-top: .1rem; }
.ch-tick { display: inline-flex; }
.ch-tick .ch-ico { width: 1.1em; height: 1.1em; }
.ch-tick.read { color: #8fd0f0; opacity: 1; }
.ch-msg.theirs .ch-tick.read { color: var(--blue-text); }
.ch-tick.failed { color: #ffb3a7; }
.ch-quote { display: flex; flex-direction: column; text-align: left; width: 100%; background: rgba(113, 159, 181, .16); border: 0; border-left: 3px solid var(--blue); border-radius: 10px; padding: .3rem .55rem; margin: 0 0 .35rem; font: inherit; font-size: .82rem; color: inherit; cursor: pointer; }
.ch-msg.mine .ch-quote { background: rgba(255, 255, 255, .14); border-left-color: var(--tan); }
.ch-qwho { font-weight: 700; }
.ch-qtext { opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38ch; }
.ch-acts { position: absolute; top: -.2rem; display: none; }
.ch-msg.mine .ch-acts { left: -2.6rem; }
.ch-msg.theirs .ch-acts { right: -2.6rem; }
.ch-msg:hover .ch-acts, .ch-msg:focus-within .ch-acts { display: block; }
.ch-act { width: 32px; height: 32px; background: #fff; border: 1px solid var(--line); }
.ch-failrow.wait { color: var(--muted); }
.ch-failrow { display: flex; gap: .5rem; align-items: center; color: var(--red); font-size: .82rem; margin-top: .2rem; flex-wrap: wrap; }
.ch-prog { display: flex; gap: .6rem; align-items: center; margin-top: .25rem; font-size: .82rem; }
.ch-prog progress { width: 150px; height: 8px; accent-color: var(--blue-text); }
.ch-newpill { position: absolute; left: 50%; bottom: .8rem; transform: translateX(-50%); display: inline-flex; gap: .35rem; align-items: center; background: var(--navy); color: #fff; border: 0; border-radius: 999px; padding: .5rem .9rem; font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer; box-shadow: 0 6px 20px rgba(24, 54, 66, .25); }
.ch-newpill[hidden] { display: none; }

.ch-photo { display: block; max-width: 100%; height: auto; max-height: 320px; width: auto; border-radius: 12px; background: var(--bg); object-fit: contain; }
.ch-imgbtn { display: block; border: 0; padding: 0; background: none; cursor: zoom-in; border-radius: 12px; margin: 0 0 .3rem; max-width: 100%; }
.ch-imgbtn.bad::after { content: "Could not load this photo"; display: block; font-size: .8rem; padding: .5rem; }
.ch-filecard { display: flex; align-items: center; gap: .6rem; width: 100%; min-width: 220px; text-align: left; background: rgba(113, 159, 181, .16); border: 0; border-radius: 12px; padding: .55rem .7rem; margin: 0 0 .3rem; font: inherit; color: inherit; cursor: pointer; }
.ch-msg.mine .ch-filecard { background: rgba(255, 255, 255, .14); }
.ch-ftxt, .ch-ctxt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ch-fname { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-fsub { font-size: .75rem; opacity: .75; }
.ch-video video { max-width: 100%; max-height: 360px; border-radius: 12px; display: block; margin-bottom: .3rem; background: #000; }

.ch-composer { border-top: 1px solid var(--line); background: #fff; padding: .55rem .7rem calc(.55rem + env(safe-area-inset-bottom, 0px)); position: relative; }
.ch-comprow { display: flex; align-items: flex-end; gap: .3rem; }
.ch-input { flex: 1; resize: none; border: 1px solid var(--line); background: var(--bg); border-radius: 20px; padding: .6rem .9rem; font: inherit; font-size: 1rem; color: var(--navy); max-height: 160px; min-height: 42px; line-height: 1.4; }
.ch-send { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.ch-send:disabled { background: var(--tan); color: #fff; cursor: default; }
.ch-readonly { display: flex; gap: .5rem; align-items: center; margin: .3rem; color: var(--muted); font-size: .9rem; }
.ch-replybar { display: flex; align-items: center; gap: .6rem; background: var(--bg); border-left: 3px solid var(--blue); border-radius: 12px; padding: .35rem .5rem .35rem .7rem; margin-bottom: .45rem; font-size: .85rem; }
.ch-replybar[hidden], .ch-files[hidden], .ch-emoji[hidden] { display: none; }
.ch-rtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ch-rtxt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.ch-files { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .45rem; }
.ch-chip { display: flex; align-items: center; gap: .5rem; background: var(--bg); border-radius: 12px; padding: .3rem .3rem .3rem .5rem; max-width: 240px; }
.ch-chip img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; }
.ch-emoji { position: absolute; bottom: calc(100% + 4px); right: .7rem; width: min(330px, calc(100vw - 1.4rem)); max-height: 220px; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: .5rem; display: grid; grid-template-columns: repeat(8, 1fr); gap: .1rem; box-shadow: 0 10px 30px rgba(24, 54, 66, .18); z-index: 6; }
.ch-em { background: none; border: 0; font-size: 1.35rem; padding: .25rem; border-radius: 8px; cursor: pointer; line-height: 1.2; }
.ch-em:hover { background: var(--bg); }

.ch-lightbox { position: fixed; inset: 0; z-index: 400; background: rgba(10, 24, 30, .92); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3.5rem 1rem 1rem; }
.ch-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.ch-lbbar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; color: #fff; }
.ch-lbname { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-lbbar .ch-btn { color: #fff; }
.ch-lbbar .ch-btn:hover { background: rgba(255, 255, 255, .15); }
body.ch-lb { overflow: hidden; }

.ch-modal { position: fixed; inset: 0; z-index: 350; background: rgba(24, 54, 66, .45); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.ch-card { background: #fff; border-radius: 22px; width: min(560px, 100%); max-height: min(86vh, 760px); overflow-y: auto; padding: 1.2rem 1.3rem 1.4rem; }
.ch-cardhead { display: flex; align-items: center; justify-content: space-between; }
.ch-cardhead h2 { margin: 0; }
.ch-safety { font: 700 1.05rem/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; background: var(--bg); border-radius: 14px; padding: .8rem 1rem; word-spacing: .4rem; }
.ch-ok { display: flex; gap: .5rem; align-items: center; color: var(--green); font-weight: 600; }
.ch-warnline { display: flex; gap: .5rem; align-items: center; color: var(--red); font-weight: 600; }
.ch-devs { list-style: none; padding: 0; margin: .3rem 0 1rem; display: flex; flex-direction: column; gap: .4rem; }
.ch-devs li { display: flex; align-items: center; gap: .6rem; background: var(--bg); border-radius: 12px; padding: .55rem .7rem; flex-wrap: wrap; }
.ch-dname { font-weight: 600; flex: 1; min-width: 7rem; display: flex; gap: .4rem; align-items: center; }
.ch-fp { font-size: .75rem; color: var(--muted); }
.ch-notes { padding-left: 1.1rem; }

@media (max-width: 899px) {
    .chat { --ch-h: calc(100vh - 230px); --ch-h: calc(100dvh - 230px); }
    .ch-shell { display: block; border-radius: 0; margin: 0 -1rem; height: auto; min-height: 0; background: transparent; }
    .ch-listpane { border-right: 0; border-radius: 22px; margin: 0 1rem; min-height: 60vh; }
    .ch-threadpane { display: none; }
    .chat.ch-showthread .ch-listpane { display: none; }
    .chat.ch-showthread .ch-threadpane { display: flex; }
    .ch-back { display: inline-flex; }
    body.ch-inthread .ch-threadpane { position: fixed; left: 0; right: 0; top: var(--vvt, 0px); height: var(--vvh, 100dvh); z-index: 120; background: #fff; }
    body.ch-inthread .fnav, body.ch-inthread .mbar, body.ch-inthread .pagehead, body.ch-inthread .bnav { display: none !important; }
    body.ch-inthread .ch-thead { padding-top: calc(.7rem + env(safe-area-inset-top, 0px)); }
    .ch-msg { max-width: 86%; }
    .ch-msg.mine .ch-acts, .ch-msg.theirs .ch-acts { left: auto; right: .3rem; top: -1.1rem; }
    .ch-msg .ch-bubble { user-select: text; }
    .ch-emoji { grid-template-columns: repeat(7, 1fr); }
}
/* Touch screens: tapping a message opens its options. The buttons stay in the page, out of sight, so screen readers and keyboards can still reach them. */
@media (hover: none) { .ch-msg .ch-acts { display: block; width: 1px; height: 1px; overflow: hidden; opacity: 0; } .ch-msg .ch-acts:focus-within { width: auto; height: auto; overflow: visible; opacity: 1; z-index: 3; } }
@media (prefers-reduced-motion: reduce) { .ch-newpill, .ch-toast { transition: none; } }
.ch-toggle { display: flex; gap: .6rem; align-items: center; padding: .35rem 0; cursor: pointer; }
.ch-toggle input { width: 1.2rem; height: 1.2rem; accent-color: var(--navy); flex: none; margin: 0; }

.ch-intro-b .ch-link { color: #1f4a34; text-decoration: underline; }
.foot a { color: #4f5a63; }

/* Unread count on the Chat icon (floating menu and side menu) */
.fbadge { position: absolute; top: 2px; right: 50%; margin-right: -26px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #e0566a; color: #fff; font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #fff; pointer-events: none; font-variant-numeric: tabular-nums; }
.fbadge[hidden] { display: none; }
.fnav a { position: relative; }
.sbnav a { position: relative; }
.sbnav .fbadge { top: 50%; transform: translateY(-50%); right: 14px; margin-right: 0; box-shadow: none; }
.navc .sbnav .fbadge { top: 6px; right: 10px; transform: none; }

/* ---------- Tiles: Training Hub, Resources, articles, blog posts, videos, links (same look as the Recipe tiles) ---------- */
.tile-cover { color: var(--tile-ink, var(--tan-text)); }
.tile-cover .tile-ico { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.tile-cover .tile-ico svg { width: 42%; height: 42%; max-width: 120px; max-height: 120px; opacity: .5; }
a.tile-cover:hover { text-decoration: none; }
.tile-cover.tile-hero { aspect-ratio: 16 / 6; border-radius: 16px; margin: 0 0 1rem; }
.tile-cover.tile-hero img { object-position: center; }
.tile-cover.tile-hero .tile-ico svg { width: 30%; height: 70%; }
.rc.tile .rc-body h2, .rc.tile .rc-body h3 { margin: 0 0 .3rem; font-size: 1.05rem; line-height: 1.25; }
.rc.tile .rc-body h2 a, .rc.tile .rc-body h3 a { color: var(--navy); }
.rc.tile .rc-body h2 a:hover, .rc.tile .rc-body h3 a:hover { text-decoration: underline; }
.tile-acts a, .tile-acts .link { color: #2f6483; }
.tile-acts .link.danger { color: var(--red); }
.rc.tile .rc-body { flex: 1; display: flex; flex-direction: column; }
.tile-acts { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; margin-top: auto; padding-top: .6rem; font-size: .9rem; }
.rp-chip.unshared { background: var(--red-bg); color: var(--red); }
.rc.tile a:focus-visible { outline: 3px solid var(--blue-text); outline-offset: 2px; }
/* colours */
.tc-sage { background: #dcebe0; --tile-ink: #2f6f4d; }
.tc-sky { background: #d9e8f0; --tile-ink: #356984; }
.tc-sand { background: #e8dfcf; --tile-ink: #7b6740; }
.tc-coral { background: #f6ddd5; --tile-ink: #a63f31; }
.tc-sun { background: #f6e8bf; --tile-ink: #7d5f0c; }
.tc-lilac { background: #e6e0f3; --tile-ink: #5b4aa8; }
.tc-teal { background: #cfe9e5; --tile-ink: #1f6b63; }
.tc-rose { background: #f5dbe6; --tile-ink: #9b3b64; }
.tc-peach { background: #f8e0cc; --tile-ink: #a65a1c; }
.tc-slate { background: #dfe3e6; --tile-ink: #4a5760; }
.tc-navy { background: #183642; --tile-ink: #e8dfcf; }
.tc-forest { background: #2f6f4d; --tile-ink: #dcefe3; }
/* coach picker */
.tilepick { border: 1px solid var(--line); border-radius: 16px; padding: .8rem 1rem 1rem; margin: 1rem 0; }
.tilepick legend { font-weight: 700; padding: 0 .4rem; }
.tp-top { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 1rem; align-items: start; margin: .6rem 0; }
.tp-prev .rc-img { border-radius: 16px; }
.tp-colours { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0; }
.tp-sw { position: relative; display: inline-block; width: 40px; height: 40px; cursor: pointer; }
.tp-swin { display: block; width: 100%; height: 100%; border-radius: 50%; border: 2px solid rgba(24, 54, 66, .25); box-sizing: border-box; }
.tp-sw input:checked + .tp-swin { border-color: var(--navy); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--navy); }
.tp-sw input:focus-visible + .tp-swin, .tp-ic input:focus-visible + .tp-icin { outline: 3px solid var(--blue-text); outline-offset: 3px; }
.tp-search { display: block; max-width: 420px; margin: .8rem 0 .4rem; }
.tp-icons { max-height: 340px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; padding: .4rem .7rem .7rem; background: #fff; }
.tp-gname { margin: .6rem 0 .3rem; font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.tp-gicons { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: .3rem; }
.tp-ic { position: relative; display: block; cursor: pointer; }
.tp-ic[hidden], .tp-grp[hidden] { display: none; }
.tp-icin { display: flex; align-items: center; justify-content: center; height: 46px; border-radius: 10px; border: 2px solid transparent; color: var(--navy); background: var(--bg); }
.tp-icin svg { width: 26px; height: 26px; }
.tp-ic:hover .tp-icin { border-color: var(--blue); }
.tp-ic input:checked + .tp-icin { border-color: var(--navy); background: var(--tan-light); }
@media (max-width: 640px) {
    .tp-top { grid-template-columns: 1fr; }
    .tp-icons { max-height: 280px; }
}

/* ---- Chat stage 2: voice and video notes, reactions, edit, delete ---- */
.ch-edited { font-style: italic; }
.ch-deleted { display: flex; gap: .4rem; align-items: center; font-style: italic; opacity: .85; font-size: .92rem; }
.ch-bubble.deleted { background: transparent; border-style: dashed; color: var(--muted); }
.ch-msg.mine .ch-bubble.deleted { background: transparent; color: var(--muted); border-color: var(--tan); }
.ch-reacts { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: -.2rem; padding: 0 .4rem; position: relative; z-index: 1; }
.ch-msg.mine .ch-reacts { justify-content: flex-end; }
.ch-react { display: inline-flex; align-items: center; gap: .2rem; min-height: 28px; padding: .1rem .5rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--navy); font: inherit; font-size: .85rem; cursor: pointer; box-shadow: 0 1px 3px rgba(24, 54, 66, .12); }
.ch-react.mine { background: #dcebf3; border-color: var(--blue); }
.ch-react:disabled { cursor: default; opacity: 1; }
.ch-react:focus-visible, .ch-qr:focus-visible, .ch-actbtn:focus-visible, .ch-delopt:focus-visible, .ch-attitem:focus-visible, .ch-nbtn:focus-visible, .ch-vp-play:focus-visible, .ch-vp-speed:focus-visible, .ch-vn-face:focus-visible, .ch-vn-full:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.ch-remoji { font-size: 1rem; line-height: 1; }
.ch-rcount { font-weight: 700; font-size: .78rem; }

/* message options sheet */
.ch-sheet .ch-card { width: min(420px, 100%); }
.ch-quickr { display: flex; flex-wrap: wrap; gap: .3rem; margin: .2rem 0 .7rem; }
.ch-qr { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); font-size: 1.35rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--navy); }
.ch-qr.on { background: #dcebf3; border-color: var(--blue); }
.ch-qgrid { position: static; width: 100%; box-shadow: none; max-height: 200px; margin-top: .3rem; border-radius: 12px; flex-basis: 100%; }
.ch-qgrid[hidden] { display: none; }
.ch-actlist { display: flex; flex-direction: column; gap: .2rem; }
.ch-actbtn, .ch-delopt { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 46px; padding: .55rem .7rem; border: 0; background: transparent; border-radius: 12px; font: inherit; color: var(--navy); text-align: left; cursor: pointer; }
.ch-actbtn:hover, .ch-delopt:hover { background: var(--bg); }
.ch-actbtn.danger, .ch-delopt.danger { color: var(--red); }
.ch-delprev { background: var(--bg); border-radius: 12px; padding: .6rem .8rem; margin: 0 0 .6rem; max-height: 5.5rem; overflow: hidden; overflow-wrap: anywhere; }
.ch-delopt { flex-direction: column; align-items: flex-start; gap: .1rem; border: 1px solid var(--line); margin-bottom: .45rem; }
.ch-delopt strong { font-size: 1rem; }
.ch-delopt span { font-size: .85rem; color: var(--muted); }
.ch-delbtns { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; margin-top: .8rem; }
.ch-delbtns button { min-height: 44px; padding: .5rem 1.1rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: inherit; font-weight: 600; color: var(--navy); cursor: pointer; }
.ch-delbtns button.danger { background: var(--red); border-color: var(--red); color: #fff; }

/* attach menu */
.ch-attach { position: absolute; left: .7rem; bottom: calc(100% + 4px); width: min(300px, calc(100vw - 1.4rem)); background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: .35rem; box-shadow: 0 10px 30px rgba(24, 54, 66, .18); z-index: 7; display: flex; flex-direction: column; }
.ch-attach[hidden] { display: none; }
.ch-attitem { display: flex; gap: .7rem; align-items: center; width: 100%; min-height: 48px; padding: .45rem .6rem; border: 0; background: transparent; border-radius: 12px; font: inherit; color: var(--navy); text-align: left; cursor: pointer; }
.ch-attitem:hover:not(:disabled) { background: var(--bg); }
.ch-attitem:disabled { opacity: .6; cursor: default; }
.ch-attt { display: flex; flex-direction: column; min-width: 0; }
.ch-attt span:first-child { font-weight: 600; }
.ch-notemount:empty { display: none; }

/* recorder */
.ch-note { background: var(--bg); border-radius: 16px; padding: .8rem; }
.ch-note-body { display: flex; flex-direction: column; gap: .6rem; }
.ch-note-head { display: flex; align-items: center; gap: .55rem; }
.ch-recdot { width: .8rem; height: .8rem; border-radius: 50%; background: var(--red); animation: chpulse 1.2s ease-in-out infinite; }
.ch-note.paused .ch-recdot { animation: none; background: var(--muted); }
@keyframes chpulse { 50% { opacity: .35; } }
.ch-note-clock { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .9rem; margin-right: auto; }
.ch-note-meter { display: inline-flex; align-items: flex-end; gap: 3px; height: 1.4rem; }
.ch-note-meter i { display: block; width: 5px; border-radius: 2px; background: var(--blue-text); height: 20%; transition: height .08s linear; }
.ch-note-meter .ch-m1 { height: calc(20% + var(--lvl, 0) * 40%); }
.ch-note-meter .ch-m2 { height: calc(20% + var(--lvl, 0) * 80%); }
.ch-note-meter .ch-m3 { height: calc(20% + var(--lvl, 0) * 60%); }
.ch-note-meter .ch-m4 { height: calc(20% + var(--lvl, 0) * 30%); }
.ch-note-meter .ch-m0 { height: calc(20% + var(--lvl, 0) * 20%); }
.ch-nrow { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.ch-nbtn { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: inherit; font-weight: 600; color: var(--navy); cursor: pointer; }
.ch-nbtn-main { background: var(--navy); border-color: var(--navy); color: #fff; }
.ch-nbtn-quiet { background: transparent; }
.ch-nbtn.danger { color: var(--red); }
.ch-nbtn:disabled { opacity: .55; cursor: default; }
.ch-note-err { display: flex; gap: .5rem; align-items: flex-start; color: var(--red); font-weight: 600; margin: 0; }
.ch-note-hint, .ch-note-wait { margin: 0; }
.ch-note-live { width: 100%; max-height: 300px; border-radius: 14px; background: #000; object-fit: cover; aspect-ratio: 4 / 3; }
.ch-note-live.mirror { transform: scaleX(-1); }
.ch-note-review { width: 100%; max-height: 320px; border-radius: 14px; background: #000; }
audio.ch-note-review { background: transparent; }

/* voice note player */
.ch-vp { display: flex; align-items: center; gap: .55rem; min-width: min(260px, 70vw); padding: .15rem 0 .3rem; }
.ch-vp-play { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--blue-text); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.ch-msg.mine .ch-vp-play { background: #fff; color: var(--navy); }
.ch-vp-wave { position: relative; flex: 1; min-width: 0; height: 34px; display: flex; align-items: center; gap: 2px; }
.ch-vp-bar { flex: 1; min-width: 2px; height: var(--h, 30%); border-radius: 2px; background: currentColor; opacity: .35; }
.ch-vp-bar.on { opacity: 1; }
.ch-vp-seek { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ch-vp-wave:focus-within { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.ch-vp-time { font-size: .78rem; font-variant-numeric: tabular-nums; min-width: 2.6rem; text-align: right; }
.ch-vp-speed { min-width: 44px; min-height: 32px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; opacity: .85; }

/* video note */
.ch-vn { position: relative; width: min(280px, 72vw); aspect-ratio: var(--ratio, 4 / 3); border-radius: 14px; overflow: hidden; background: #000; margin: 0 0 .3rem; }
.ch-vn-face { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: #0d1d24; cursor: pointer; display: block; }
.ch-vn-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch-vn-blank { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #183642, #355a6b); }
.ch-vn-play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--navy); display: flex; align-items: center; justify-content: center; }
.ch-vn-dur { position: absolute; left: .5rem; bottom: .5rem; background: rgba(0, 0, 0, .65); color: #fff; font-size: .75rem; padding: .1rem .45rem; border-radius: 999px; }
.ch-vn-video { width: 100%; height: 100%; display: block; background: #000; object-fit: contain; }
.ch-vn-full { position: absolute; top: .4rem; right: .4rem; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .6); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .ch-recdot { animation: none; } .ch-note-meter i { transition: none; } }

/* the site-wide button hover would recolour these; keep their own colours */
.ch-nbtn:hover { background: var(--tan-light); }
.ch-nbtn-quiet:hover { background: rgba(255, 255, 255, .6); }
.ch-nbtn-main:hover, .ch-nbtn-main:focus { background: #224b5b; border-color: #224b5b; color: #fff; }
.ch-nbtn-main.rec:hover { background: #224b5b; }
.ch-vp-play:hover { background: #3f6a82; }
.ch-msg.mine .ch-vp-play:hover { background: var(--tan-light); }
.ch-vp-speed:hover { background: rgba(127, 127, 127, .18); color: inherit; }
.ch-vn-face:hover { background: #0d1d24; }
.ch-vn-full:hover { background: rgba(0, 0, 0, .8); }
.ch-react:hover { background: #eef5f9; }
.ch-react.mine:hover { background: #cfe3ee; }
.ch-qr:hover { background: var(--tan-light); }
.ch-qr.on:hover { background: #cfe3ee; }
.ch-attitem:hover:not(:disabled) { background: var(--bg); }
.ch-actbtn:hover, .ch-delopt:hover { background: var(--bg); }
.ch-delopt.danger:hover, .ch-actbtn.danger:hover { background: #fbe9ea; }
.ch-delbtns button:hover { background: var(--tan-light); }
.ch-delbtns button.danger:hover { background: #8e3327; border-color: #8e3327; color: #fff; }

/* ---- Chat stage 3: tabs, Shared panel, resource cards ---- */
.ch-tabs { display: flex; gap: .25rem; padding: .3rem .7rem 0; border-bottom: 1px solid var(--line); background: #fff; }
.ch-tab { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; padding: .5rem .9rem; min-height: 44px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; }
.ch-tab:hover { background: var(--bg); color: var(--navy); }
.ch-tab.on { color: var(--navy); border-bottom-color: var(--navy); background: transparent; }
.ch-tab:focus-visible, .sh-tab:focus-visible, .sh-act:focus-visible, .sh-thumb:focus-visible, .ch-pickitem:focus-visible, .ch-rescta:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.ch-msgs[hidden], .ch-shared[hidden] { display: none; }
.ch-thread.ch-tab-shared .ch-composer { display: none; }
.ch-shared { flex: 1; min-height: 0; overflow-y: auto; padding: .7rem .9rem 1.2rem; background: #fbfaf7; }
.sh-top { display: flex; flex-direction: column; gap: .5rem; position: sticky; top: -.7rem; background: #fbfaf7; padding-bottom: .4rem; z-index: 2; }
.sh-search { width: 100%; border: 1px solid var(--line); border-radius: 999px; padding: .6rem 1rem; font: inherit; font-size: 1rem; background: #fff; color: var(--navy); min-height: 44px; }
.sh-tabs { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .15rem; scrollbar-width: thin; }
.sh-tab { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; min-height: 40px; padding: .3rem .8rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: .9rem; font-weight: 600; color: var(--navy); cursor: pointer; }
.sh-tab:hover { background: var(--tan-light); }
.sh-tab.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.sh-n { font-size: .75rem; background: rgba(127, 127, 127, .2); border-radius: 999px; padding: 0 .45rem; min-width: 1.3rem; text-align: center; }
.sh-bar { display: flex; gap: .4rem; flex-wrap: wrap; }
.sh-sel { border: 1px solid var(--line); border-radius: 10px; padding: .35rem .6rem; min-height: 38px; font: inherit; font-size: .88rem; background: #fff; color: var(--navy); }
.ch-sh-status { margin: .1rem 0 .4rem; min-height: 1.2em; }
.sh-month { margin: 1rem 0 .4rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.sh-items { list-style: none; padding: 0; margin: 0; }
.sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.sh-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.sh-thumb { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; border: 0; padding: 0; background: #dfe6e8; cursor: zoom-in; overflow: hidden; border-radius: 0; color: var(--navy); }
.sh-thumb:hover { background: #d3dcdf; }
.sh-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-thumb.vid { flex-direction: column; gap: .3rem; background: #183642; color: #fff; cursor: pointer; }
.sh-thumb.vid:hover { background: #224b5b; }
.sh-thumb.vid .ch-ico { width: 2rem; height: 2rem; }
.sh-vname { font-size: .72rem; padding: 0 .5rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-thumb.bad::after { content: "Could not load"; font-size: .75rem; }
.sh-cap { padding: .4rem .6rem 0; display: flex; flex-direction: column; min-width: 0; }
.sh-fn { font-weight: 600; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-sub, .sh-meta, .sh-url { font-size: .75rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.sh-url { white-space: nowrap; }
.sh-acts { display: flex; flex-wrap: wrap; gap: .25rem; padding: .3rem .4rem .5rem; }
.sh-act { display: inline-flex; align-items: center; gap: .3rem; min-height: 36px; padding: .2rem .6rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: .78rem; font-weight: 600; color: #2f6483; text-decoration: none; cursor: pointer; }
.sh-act:hover { background: var(--tan-light); text-decoration: none; }
.sh-act .ch-ico { width: 1rem; height: 1rem; }
.sh-rows { display: flex; flex-direction: column; gap: .5rem; }
.sh-row { display: flex; align-items: flex-start; gap: .7rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .6rem .7rem; flex-wrap: wrap; }
.sh-row > .ch-ico { width: 1.4rem; height: 1.4rem; margin-top: .15rem; color: var(--blue-text); flex: none; }
.sh-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sh-row .sh-acts { padding: 0; flex-basis: 100%; }
.sh-note { flex-direction: column; align-items: stretch; }
.sh-note .sh-cap { padding: 0; }
.sh-snip { overflow-wrap: anywhere; }
.sh-snip mark { background: #ffe9a8; color: inherit; border-radius: 3px; padding: 0 .1rem; }
.sh-empty { display: flex; gap: .6rem; align-items: center; justify-content: center; color: var(--muted); padding: 2rem 1rem; text-align: center; }
.ch-rescard { display: flex; gap: .6rem; align-items: center; background: rgba(113, 159, 181, .16); border-radius: 12px; padding: .55rem .7rem; margin: 0 0 .3rem; min-width: 230px; }
.ch-msg.mine .ch-rescard { background: rgba(255, 255, 255, .14); }
.ch-rescta { display: inline-flex; gap: .3rem; align-items: center; min-height: 36px; padding: .2rem .7rem; border-radius: 999px; background: #fff; color: var(--navy); font-weight: 700; font-size: .85rem; text-decoration: none; flex: none; }
.ch-rescta:hover { background: var(--tan-light); text-decoration: none; }
.ch-rescta.off { background: transparent; color: inherit; font-weight: 500; font-size: .78rem; opacity: .85; }
.ch-pick { list-style: none; padding: 0; margin: .6rem 0 0; max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: .2rem; }
.ch-pickitem { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 48px; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; font: inherit; color: var(--navy); text-align: left; cursor: pointer; }
.ch-pickitem:hover { background: var(--tan-light); }
@media (max-width: 899px) { .ch-tabs { padding-left: .4rem; } .sh-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } }
.sh-sel { width: auto; flex: 1 1 130px; max-width: 100%; }
.ch-delbtns button.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.ch-delbtns button.primary:hover { background: #224b5b; color: #fff; }
.ch-bubble.deleted .ch-meta { opacity: 1; color: #5a6268; }
.sh-month { font-size: .8rem; }

/* ---- Chat stage 4: GIFs and link previews ---- */
.ch-gifbtn { width: auto; min-width: 40px; padding: 0 .5rem; border-radius: 12px; font-weight: 800; font-size: .8rem; letter-spacing: .02em; border: 1px solid var(--line); height: 34px; align-self: center; }
.ch-gif { position: absolute; left: .7rem; right: .7rem; bottom: calc(100% + 4px); max-width: 460px; max-height: min(60vh, 460px); overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: .6rem; box-shadow: 0 10px 30px rgba(24, 54, 66, .18); z-index: 8; display: flex; flex-direction: column; gap: .5rem; }
.ch-gif[hidden] { display: none; }
.ch-gifhead { display: flex; align-items: center; gap: .3rem; }
.ch-gifgrid { columns: 2; column-gap: .4rem; }
.ch-gifitem { display: block; width: 100%; padding: 0; margin: 0 0 .4rem; border: 0; background: #dfe6e8; border-radius: 10px; overflow: hidden; cursor: pointer; break-inside: avoid; }
.ch-gifitem img { display: block; width: 100%; height: auto; }
.ch-gifitem:focus-visible, .ch-prevcard:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.ch-gifmore { align-self: center; min-height: 40px; }
.ch-gifcredit { margin: 0; text-align: right; color: var(--muted); }
.ch-gifnotes { margin: .4rem 0 .6rem; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .3rem; }
.ch-gifmsg { position: relative; display: inline-block; margin: 0 0 .3rem; }
.ch-gifimg { max-height: 240px; }
.ch-gifbadge { position: absolute; left: .4rem; bottom: .4rem; font-size: .68rem; font-weight: 700; background: rgba(0, 0, 0, .65); color: #fff; padding: .05rem .4rem; border-radius: 999px; }
.sh-thumb.gif { cursor: pointer; }
.ch-prevbar[hidden] { display: none; }
.ch-prevbar { margin-bottom: .45rem; }
.ch-prevoffer { display: flex; align-items: center; gap: .6rem; background: var(--bg); border-left: 3px solid var(--blue); border-radius: 12px; padding: .35rem .6rem; font-size: .85rem; flex-wrap: wrap; }
.ch-prevbarin { display: flex; align-items: flex-start; gap: .3rem; }
.ch-prevbarin .ch-prevcard { flex: 1; min-width: 0; }
.ch-prevcard { display: flex; gap: .6rem; align-items: stretch; text-decoration: none; color: inherit; background: rgba(113, 159, 181, .16); border-radius: 12px; overflow: hidden; margin: .1rem 0 .3rem; max-width: 380px; }
.ch-msg.mine .ch-prevcard { background: rgba(255, 255, 255, .14); }
.ch-prevcard:hover { text-decoration: none; filter: brightness(.97); }
.ch-prevthumb { width: 96px; height: auto; min-height: 96px; object-fit: cover; flex: none; background: #dfe6e8; }
.ch-prevtxt { display: flex; flex-direction: column; gap: .1rem; padding: .5rem .6rem; min-width: 0; }
.ch-prevsite, .ch-prevhost { font-size: .72rem; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-prevtitle { font-weight: 700; font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ch-prevdesc { font-size: .8rem; opacity: .9; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 480px) { .ch-gifgrid { columns: 2; } .ch-prevthumb { width: 76px; min-height: 76px; } }

/* Stage 5: recovery key and history backup */
.ch-recovery { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.05rem; line-height: 1.7; letter-spacing: .04em; word-spacing: .35em; background: var(--bg); border: 1px dashed var(--line); border-radius: 14px; padding: .8rem 1rem; margin: .5rem 0; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; color: var(--navy); }
.ch-recin { width: 100%; box-sizing: border-box; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1rem; line-height: 1.6; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 12px; resize: vertical; margin: .4rem 0; }
.ch-recin:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Phase 11: stacked tick boxes (Google Calendar settings, phone reminders) */
.inline-check.stack { display: flex; margin: .45rem 0; }
fieldset.checks { border: 1px solid var(--line); border-radius: 12px; padding: .5rem .8rem .7rem; margin: .8rem 0; min-width: 0; }
fieldset.checks legend { font-weight: 600; font-size: .9rem; padding: 0 .3rem; }

/* Phase 31: health import */
.hi-how details { margin: 0 0 .6rem; }
.hi-how summary { cursor: pointer; padding: .35rem 0; }
.hi-file input[type=file] { display: block; width: 100%; padding: .6rem; border: 1px dashed #b9c6cc; border-radius: 12px; background: #fff; }
.hi-bar { height: 8px; border-radius: 8px; background: #e6ecee; overflow: hidden; margin: .4rem 0; }
.hi-barfill { height: 100%; width: 0; background: #b99a6b; transition: width .2s; }
.hi-bar[hidden], [data-hi-review][hidden], [data-hi-done][hidden], [data-hi-error][hidden], [data-hi-dmy-wrap][hidden] { display: none; }
.hi-pick { border: 0; padding: 0; margin: .6rem 0; }
.hi-pick legend { font-weight: 600; margin-bottom: .2rem; }
.hi-pick .inline-check { display: block; margin: .2rem 0; }
.hi-tablewrap { max-height: 22rem; overflow: auto; border: 1px solid #e0e6e8; border-radius: 12px; background: #fff; margin: .6rem 0; }
.hi-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.hi-table th, .hi-table td { padding: .4rem .6rem; text-align: left; border-bottom: 1px solid #eef1f2; white-space: nowrap; }
.hi-table thead th { position: sticky; top: 0; background: #f6f3ee; }
.hi-table tbody th { font-weight: 500; }
.hi-recent li { display: flex; justify-content: space-between; gap: .6rem; align-items: center; flex-wrap: wrap; padding: .35rem 0; }
.hi-tablewrap table.hi-table { display: table; overflow: visible; }
.hi-table thead th { color: #2c4452; }
.hi-table tbody th { color: inherit; text-transform: none; font-size: .92rem; letter-spacing: 0; font-weight: 500; }

/* Guided workouts: the start card, logged workouts and the progress chart */
.playcard { display: grid; gap: .5rem; }
.playcard .playgo { text-align: center; font-size: 1.05rem; padding: .85rem 1.25rem; }
.liftchart { display: block; width: 100%; max-width: 520px; height: auto; background: var(--tan-light, #efe7d8); border-radius: 12px; }
.liftchart polyline { stroke: var(--navy); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.liftchart circle { fill: var(--navy); }
.pbcard { border-left: 5px solid var(--tan); }
.playlist li { align-items: center; }
.playlist a, table a { color: var(--navy); font-weight: 700; }

/* completed assigned workouts are greyed out; the action is View results */
.pwk.pwk-finished { background: #ebebeb; border-color: #dcdcdc; }
.pwk.pwk-finished .pwk-name, .pwk.pwk-finished .wtile-dur, .pwk.pwk-finished .wtile-sections { color: #6b737a; }
.pwk.pwk-finished .pwk-move { opacity: .6; }
.pwk-results { display: inline-block; margin-top: .3rem; }
.playcard.playdone { background: #ebebeb; }
.wtile-train { display: flex; gap: .6rem; align-items: center; margin: .3rem 0 0; }

/* The floating "Resume workout" tile: sits just above the floating bottom menu on every signed-in page */
.resumetile { position: fixed; left: 50%; bottom: calc(12px + 4rem + 10px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: calc(100% - 32px); max-width: 528px; z-index: 34; display: flex; align-items: center; gap: .7rem; min-height: 56px; padding: .45rem .9rem; border-radius: 18px; background: #183642; color: #fff; text-decoration: none; box-shadow: 0 8px 24px rgba(24,54,66,.35); }
.resumetile:hover { text-decoration: none; background: #224b5b; color: #fff; }
.resumetile .rt-dot { width: 10px; height: 10px; border-radius: 50%; background: #35c27a; flex: none; box-shadow: 0 0 0 0 rgba(53,194,122,.6); animation: rt-pulse 2s infinite; }
.resumetile[data-paused="1"] .rt-dot { background: #d6c3a8; animation: none; }
.resumetile .rt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.resumetile .rt-text strong { font-size: 1rem; font-weight: 800; }
.resumetile .rt-text small { font-size: .8rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resumetile .rt-time { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.05rem; color: #d6c3a8; }
@keyframes rt-pulse { 0% { box-shadow: 0 0 0 0 rgba(53,194,122,.55); } 70% { box-shadow: 0 0 0 8px rgba(53,194,122,0); } 100% { box-shadow: 0 0 0 0 rgba(53,194,122,0); } }
@media (min-width: 821px) { .resumetile { bottom: 18px; left: auto; right: 18px; transform: none; width: 340px; } }
body.clients-open .resumetile, body.notif-open .resumetile, body.ch-inthread .resumetile, body.cook .resumetile { display: none; }
@media (prefers-reduced-motion: reduce) { .resumetile .rt-dot { animation: none; } }
@media print { .resumetile { display: none !important; } }
body:has(#resumetile) main { padding-bottom: 5rem; }
.upcoming .up-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .5rem 0; border-top: 1px solid #e0e0e0; }
.upcoming .up-row:first-of-type { border-top: 0; }
.upcoming .up-t { display: grid; min-width: 0; }
.upcoming .up-t small { color: var(--muted); font-weight: 600; }
.upcoming .up-done { opacity: .55; }
.upcoming .up-none a { text-decoration: none; color: inherit; }
.upcoming .up-next { margin: .3rem 0 0; color: var(--muted); }
.updatebar { position: fixed; left: 12px; right: 12px; top: calc(10px + env(safe-area-inset-top)); z-index: 90; max-width: 460px; margin: 0 auto; display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-radius: 14px; background: var(--navy, #183642); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.3); font-weight: 600; }
.updatebar span { flex: 1; }
.updatebar button { min-height: 40px; padding: 0 1rem; border-radius: 999px; background: #d8c3a0; color: #183642; font-weight: 800; }
.updatebar .ub-later { background: transparent; color: #fff; text-decoration: underline; padding: 0 .3rem; }

/* Settings: reward style and the animal list */
.rstyle { border: 0; padding: 0; margin: .6rem 0 1rem; display: grid; gap: .6rem; }
.rchoice { display: flex; gap: .7rem; align-items: flex-start; border: 2px solid var(--line); border-radius: 16px; padding: .8rem 1rem; cursor: pointer; font-weight: 400; margin: 0; }
.rchoice input { width: auto; margin: .25rem 0 0; flex: none; }
.rchoice strong { display: block; }
.rchoice small { display: block; color: #4f565c; font-size: .85rem; margin-top: .15rem; }
.rchoice:has(input:checked) { border-color: var(--navy); background: #f4f7f8; }
.rchoice:focus-within { outline: 3px solid var(--blue); outline-offset: 2px; }
.agrid { list-style: none; margin: 1rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; }
.acard { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15rem; border: 2px solid var(--line); border-radius: 18px; padding: .6rem .5rem .7rem; cursor: pointer; background: #fff; margin: 0; font-weight: 400; height: 100%; }
.acard input { position: absolute; top: .55rem; left: .55rem; width: 1.3rem; height: 1.3rem; margin: 0; accent-color: var(--navy); }
.acard img { width: 100%; max-width: 120px; height: auto; aspect-ratio: 1; opacity: .45; filter: grayscale(.85); transition: opacity .15s, filter .15s; }
.acard.is-on { border-color: var(--navy); background: #f4f7f8; }
.acard.is-on img { opacity: 1; filter: none; }
.acard .an { font-weight: 800; color: var(--navy); }
.acard .aw { font-size: .78rem; color: #4f565c; line-height: 1.25; }
.acard:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.acard:has(input:checked) img { opacity: 1; filter: none; }
.acard:has(input:checked) { border-color: var(--navy); background: #f4f7f8; }

/* Client phone menu: the logo and the Sign Out row stay put and only the list of sections scrolls, so the menu can never open scrolled
   half-way (it showed the bottom and could not be pulled back up on an iPhone). */
@media (max-width: 820px) {
    .clientshell .sidebar, .clientshell.navc .sidebar, .navc .clientshell .sidebar { display: flex; flex-direction: column; overflow: hidden; height: auto; top: 0; bottom: 0;
        padding: calc(1rem + env(safe-area-inset-top, 0px)) 1rem calc(1rem + env(safe-area-inset-bottom, 0px)); }
    .clientshell .sidebar .sbtop { flex: none; margin-bottom: .8rem; }
    .clientshell .sidebar .sbnav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    .clientshell .sidebar .sbfoot { flex: none; margin-top: .6rem; }
}

/* Upcoming Training: the hero of the client dashboard */
.upcoming.hero { background: var(--navy); color: #fff; padding: 1.5rem 1.4rem 1.6rem; border-radius: 26px; box-shadow: 0 10px 28px rgba(24, 54, 66, .22); position: relative; overflow: hidden; }
.upcoming.hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(113, 159, 181, .35), rgba(113, 159, 181, 0) 70%); pointer-events: none; }
.upcoming.hero .cap { color: var(--tan); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; margin: 0 0 .7rem; }
.upcoming.hero .up-row { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: .9rem; padding: .9rem 0; border-top: 1px solid rgba(255, 255, 255, .16); }
.upcoming.hero .up-row:first-of-type { border-top: 0; padding-top: 0; }
.upcoming.hero .up-t strong { font-size: 1.55rem; line-height: 1.15; font-weight: 800; color: #fff; }
.upcoming.hero .up-t small { color: rgba(255, 255, 255, .78); font-size: .92rem; margin-top: .25rem; }
.upcoming.hero .up-done { opacity: .6; }
.upcoming.hero .up-none { position: relative; z-index: 1; margin: 0; font-size: 1.55rem; line-height: 1.15; }
.upcoming.hero .up-next { position: relative; z-index: 1; margin: .4rem 0 1rem; color: rgba(255, 255, 255, .8); }
.upcoming.hero .up-go { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; border-radius: 16px; background: #fff; color: var(--navy); border: 0; font-size: 1.05rem; font-weight: 800; text-decoration: none; }
.upcoming.hero .up-go:hover { background: var(--tan-light); text-decoration: none; }
.upcoming.hero .up-go.alt { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.upcoming.hero .up-go.alt:hover { background: rgba(255, 255, 255, .12); }
.upcoming.hero .up-makeup { border-top: 1px solid rgba(255, 255, 255, .16); margin-top: .4rem; }
.upcoming.hero .up-makeup .up-t strong { font-size: 1.2rem; }
@media (min-width: 700px) { .upcoming.hero .up-row { grid-template-columns: 1fr auto; align-items: center; } .upcoming.hero .up-go { width: auto; padding: 0 1.6rem; } }

.pday-makeup .pwk.makeup { display: flex; align-items: center; justify-content: space-between; gap: .8rem; border-style: dashed; }
.pday-makeup .pwk-main { display: grid; gap: .15rem; min-width: 0; }

/* exercise modifiers in the builder */
.wbmods { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin-top: .5rem; }
.wbmods .wbcheck { margin: 0; white-space: nowrap; }
.wbmodh { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #5a636a); }
.wbhold { width: 4.5rem; margin: 0 !important; background: #f2f2f2 !important; border-color: transparent !important; font-size: .88rem; }
.wbhold:disabled { opacity: .45; }
.wbmodu { font-size: .85rem; color: var(--muted, #5a636a); margin-left: -.6rem; }

/* a checkbox with a title and a line of help beside it */
.optline { display: flex; gap: .7rem; align-items: flex-start; }
.optline input[type=checkbox] { margin-top: .3rem; width: 1.25rem; height: 1.25rem; flex: none; }

/* =====================================================================================================================
   Motion, site wide. Every popup, side menu, bottom menu, modal, dialog and dropdown opens and closes with the same
   feel as the Workout Player's top menu: a quick, decelerating slide/fade in (.36s) and a shorter, accelerating way out (.26s).
   For anything new:
     - side or bottom panel moved by a class: transition transform with var(--mo-out)/var(--mo-ease-out) on the closed state and
       var(--mo-in)/var(--mo-ease-in) on the open state, and fade its backdrop the same way (see .notifpanel / .nback below);
     - something shown and hidden with the `hidden` attribute: give it class "modal" or the attribute data-mo="modal|drop|fade";
       assets/motion.js plays the open and close for you;
     - <dialog>: nothing to do, show() / showModal() / close() are covered by assets/motion.js and the rules below;
     - <details class="plusmenu"> dropdowns: covered.
   Reduced motion: the tokens drop to nothing, so everything simply appears.
   ===================================================================================================================== */
:root { --mo-in: .36s; --mo-out: .26s; --mo-ease-in: cubic-bezier(.2, .9, .3, 1); --mo-ease-out: cubic-bezier(.5, 0, .8, .4); }
@media (prefers-reduced-motion: reduce) { :root { --mo-in: .001s; --mo-out: .001s; } }
@keyframes mo-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mo-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes mo-rise-in { from { opacity: 0; transform: translateY(26px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes mo-rise-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(26px) scale(.98); } }
@keyframes mo-drop-in { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes mo-drop-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px) scale(.97); } }

/* side menus and panels: the menu slides, the backdrop fades; the panel stays visible while it slides out */
@media (max-width: 820px) {
    .sidebar, .navc .sidebar { transition: transform var(--mo-out) var(--mo-ease-out), visibility 0s linear var(--mo-out); }
    .menu-open .sidebar { transition: transform var(--mo-in) var(--mo-ease-in), visibility 0s; }
    .sbback { display: block; opacity: 0; visibility: hidden; transition: opacity var(--mo-out) linear, visibility 0s linear var(--mo-out); }
    .menu-open .sbback { opacity: 1; visibility: visible; transition: opacity var(--mo-in) linear, visibility 0s; }
    .wbpick { transition: transform var(--mo-out) var(--mo-ease-out); }
    .wb.pickopen .wbpick { transition: transform var(--mo-in) var(--mo-ease-in); }
}
.notifpanel { transition: transform var(--mo-out) var(--mo-ease-out), visibility 0s linear var(--mo-out); }
.notif-open .notifpanel { transition: transform var(--mo-in) var(--mo-ease-in), visibility 0s; }
.nback { display: block; opacity: 0; visibility: hidden; transition: opacity var(--mo-out) linear, visibility 0s linear var(--mo-out); }
.notif-open .nback { opacity: 1; visibility: visible; transition: opacity var(--mo-in) linear, visibility 0s; }

/* modals shown and hidden with the hidden attribute (assets/motion.js adds .mo-in / .mo-out) */
.modal.mo-in { animation: mo-fade-in var(--mo-in) linear both; }
.modal.mo-in > .modal-box { animation: mo-rise-in var(--mo-in) var(--mo-ease-in) both; }
.modal.mo-out { animation: mo-fade-out var(--mo-out) linear both; pointer-events: none; }
.modal.mo-out > .modal-box { animation: mo-rise-out var(--mo-out) var(--mo-ease-out) both; }
[data-mo="drop"].mo-in, .suggest.mo-in { animation: mo-drop-in var(--mo-in) var(--mo-ease-in) both; transform-origin: top center; }
[data-mo="drop"].mo-out, .suggest.mo-out { animation: mo-drop-out var(--mo-out) var(--mo-ease-out) both; transform-origin: top center; pointer-events: none; }
[data-mo="fade"].mo-in { animation: mo-fade-in var(--mo-in) linear both; }
[data-mo="fade"].mo-out { animation: mo-fade-out var(--mo-out) linear both; pointer-events: none; }
[data-mo="modal"].mo-in { animation: mo-rise-in var(--mo-in) var(--mo-ease-in) both; }
[data-mo="modal"].mo-out { animation: mo-rise-out var(--mo-out) var(--mo-ease-out) both; pointer-events: none; }

/* <dialog> */
dialog[open] { animation: mo-rise-in var(--mo-in) var(--mo-ease-in) both; }
dialog[open]::backdrop { animation: mo-fade-in var(--mo-in) linear both; }
dialog.mo-out { animation: mo-rise-out var(--mo-out) var(--mo-ease-out) both; pointer-events: none; }
dialog.mo-out::backdrop { animation: mo-fade-out var(--mo-out) linear both; }

/* small dropdown menus built on <details> */
details.plusmenu[open] > :not(summary), details[data-mo][open] > :not(summary) { animation: mo-drop-in var(--mo-in) var(--mo-ease-in) both; transform-origin: top left; }
details.plusmenu.mo-closing > :not(summary), details[data-mo].mo-closing > :not(summary) { animation: mo-drop-out var(--mo-out) var(--mo-ease-out) both; pointer-events: none; }

.slotfield { border: 0; padding: 0; margin: 0; min-width: 0; }
.nextslot { color: var(--navy); font-weight: 600; }

/* ---- client dashboard tiles: Today's Logs, Today's Tasks, Your Week */
.tile-h { margin: 0 0 1rem; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; }
.tile-logs, .tile-tasks, .tile-week { position: relative; overflow: hidden; border: 0; border-radius: 26px; padding: 1.4rem 1.4rem 1.2rem; }
.tile-logs::after, .tile-tasks::after, .tile-week::after { content: ""; position: absolute; right: -70px; top: -70px; width: 220px; height: 220px; border-radius: 50%; pointer-events: none; }
.tile-logs > *, .tile-tasks > *, .tile-week > * { position: relative; z-index: 1; }
.tile-logs { background: #46758d; color: #fff; box-shadow: 0 10px 28px rgba(70, 117, 141, .25); }
.tile-logs::after { background: radial-gradient(circle, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 70%); }
.tile-logs .tile-h { color: var(--tan); }
.tl-row { list-style: none; margin: 0; padding: 0 0 1rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; border-bottom: 1px solid rgba(255, 255, 255, .55); }
.tl-row li { display: grid; justify-items: center; gap: .3rem; text-align: center; }
.tl-row svg { width: 64px; height: 64px; }
.tl-row .fill { fill: #ece7df; }
.tl-row .outline { fill: none; stroke: #ece7df; stroke-width: 5; stroke-linejoin: round; }
.tl-row .ink { fill: #46758d; }
.tl-row .line { fill: none; stroke: #46758d; stroke-width: 4; stroke-linecap: round; }
.tl-row b { font-size: .88rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; }
.tl-row span { font-size: .78rem; }
.tl-row li.on .fill { fill: #5fe0a0; }
.tl-row li.on .ink, .tl-row li.on .line { stroke: #46758d; fill: #46758d; }
.tl-row li.on .line { fill: none; }
.tl-row li.on b, .tl-row li.on span { color: #c9f7de; }
.tile-link { display: flex; align-items: center; justify-content: center; gap: .45rem; margin-top: .9rem; min-height: 40px; color: inherit; text-decoration: none; font-weight: 600; letter-spacing: .02em; }
.tile-link:hover { text-decoration: underline; }
.tile-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tile-link.dim { color: var(--muted); }
.tile-tasks { background: var(--tan); color: var(--navy); box-shadow: 0 10px 28px rgba(143, 122, 86, .2); }
.tile-tasks::after { background: radial-gradient(circle, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 70%); }
.tile-tasks .tile-h { color: var(--navy); }
.tile-tasks .habitlist { margin: 0; }
.tile-tasks .habitform span { font-size: 1.35rem; font-weight: 400; }
.tile-tasks .tick { width: 48px; height: 48px; border-color: #fff; background: transparent; border-width: 3px; }
.tile-tasks .tick.off::after { left: 13px; right: 13px; background: #fff; height: 3px; }
.tile-tasks .tick.on { background: var(--navy); border-color: var(--navy); }
.tile-tasks .tick.on::after { left: 16px; top: 9px; border-color: #fff; }
.tile-empty { margin: 0; color: inherit; opacity: .85; }
.tile-week { background: #f8f7f4; color: var(--navy); box-shadow: 0 6px 20px rgba(24, 54, 66, .08); }
.tile-week::after { background: radial-gradient(circle, rgba(214, 195, 168, .22), rgba(214, 195, 168, 0) 70%); }
.weekgrid.edit .dotf { margin: 0; display: block; }
.weekgrid.edit button.dotc { padding: 0; cursor: pointer; background: transparent; width: 28px; height: 28px; }
.weekgrid.edit button.dotc.on { background: var(--navy); }
.weekgrid.edit button.dotc:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.weekgrid.edit .dotc.on::after { left: 8px; top: 3px; }
.weekgrid.edit .wg-head, .weekgrid.edit .wg-row { grid-template-columns: minmax(0, 1fr) repeat(7, 28px); }
.tile-tasks .habitform span.done { color: #3a5360; }

.tl-row { align-items: start; }
.tl-row b { font-size: .78rem; letter-spacing: .07em; }
.tl-row span { font-size: .72rem; white-space: nowrap; }
.backlink { color: var(--navy); font-weight: 600; text-decoration: underline; }

/* Health data section: the native buttons are shown or hidden with the hidden attribute */
#healthsync [hidden] { display: none !important; }
#healthsync .small.err { color: var(--red); font-weight: 600; }
#healthsync a { color: var(--navy); font-weight: 600; text-decoration: underline; }

/* Today: a quick link to each milestone (striving towards, core value, time left) */
.tile-ms { background: #183642; color: #e7e5de; border: 0; border-radius: 26px; padding: 1.4rem 1.4rem 1.2rem; box-shadow: 0 10px 28px rgba(24, 54, 66, .22); }
.tile-ms .tile-h { color: var(--tan); }
.ms-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ms-link { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "cap chev" "str chev" "meta chev"; column-gap: .6rem; row-gap: .15rem; align-items: center; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px; padding: .85rem 1rem; color: inherit; text-decoration: none; min-height: 44px; }
.ms-link:hover, .ms-link:focus-visible { background: rgba(255, 255, 255, .15); outline: none; }
.ms-link:focus-visible { box-shadow: 0 0 0 3px var(--tan); }
.ms-cap { grid-area: cap; color: var(--tan); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ms-striving { grid-area: str; display: grid; min-width: 0; }
.ms-striving small { color: rgba(231, 229, 222, .72); font-size: .74rem; }
.ms-striving strong { color: #fff; font-size: 1.1rem; overflow-wrap: anywhere; }
.ms-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; margin-top: .3rem; font-size: .84rem; }
.ms-core b { font-size: 1.05rem; color: #4fe0a0; }
.ms-core.b-mixed b { color: #ffb066; } .ms-core.b-low b { color: #ff9b8a; } .ms-core.b-none b { color: #e7e5de; }
.ms-core { background: none; }
.ms-left { color: #e7e5de; font-weight: 600; }
.ms-left.late { color: #ffab9c; }
.ms-link svg { grid-area: chev; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }

/* ---- Forms: PAR-Q, SMART goal, check-ins, custom forms ---- */
.tag.tag-flag { background: var(--red-bg); color: var(--red); }
.tag.tag-ok { background: var(--green-bg); color: var(--green); }
.tag.tag-wait { background: #e9eff3; color: #3f6579; }
.fm-list li, .fm-forms > li { align-items: center; gap: .75rem; }
.fm-forms > li { display: block; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.fm-forms > li.fm-archived { opacity: .7; }
.fm-formhead { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; }
.fm-acts { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; font-size: .92rem; }
.fm-acts form { display: inline; }
.fm-send { margin-top: .6rem; }
.fm-send summary { cursor: pointer; font-weight: 600; color: var(--blue-text); min-height: 32px; display: inline-flex; align-items: center; }
.fm-clients { border: 0; margin: 0 0 .6rem; padding: 0; display: grid; gap: .35rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.fm-starts { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.fm-starts .button { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; text-align: left; padding: .9rem 1rem; height: auto; white-space: normal; border-radius: 16px; }
.fm-late { color: var(--red); font-weight: 600; }
.fm-card { max-width: 46rem; }
.fm-intro { max-width: 42rem; }
.fm-head h2 { margin: 1.4rem 0 .2rem; font-size: 1.15rem; }
.fm-q { border: 0; margin: 0 0 1.25rem; padding: 0; min-width: 0; }
.fm-q legend, .fm-label { display: block; font-weight: 600; padding: 0; margin-bottom: .3rem; line-height: 1.35; }
.fm-q input[type=text], .fm-q input[type=number], .fm-q input[type=date], .fm-q textarea { width: 100%; }
.fm-req { font-size: .7rem; font-weight: 600; color: #75613f; text-transform: uppercase; letter-spacing: .04em; margin-left: .35rem; }
.fm-help { margin: 0 0 .4rem; }
.fm-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.fm-opt { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .9rem; min-height: 44px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-weight: 500; cursor: pointer; }
.fm-opt:has(input:checked) { background: var(--navy); border-color: var(--navy); color: #fff; }
.fm-opt:has(input:focus-visible), .fm-num:has(input:focus-visible) { outline: 2px solid var(--blue-text); outline-offset: 2px; }
.fm-opt input, .fm-num input { accent-color: var(--blue-text); }
.fm-scale { display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: .4rem; max-width: 34rem; }
.fm-num { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-weight: 600; cursor: pointer; position: relative; }
.fm-num input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.fm-num:has(input:checked) { background: var(--navy); border-color: var(--navy); color: #fff; }
.fm-ends { display: flex; justify-content: space-between; margin: .3rem 0 0; max-width: 34rem; }
.fm-consent { padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.fm-q.has-err > .fm-label, .fm-q.has-err > legend { color: var(--red); }
.fm-q.has-err input[type=text], .fm-q.has-err textarea, .fm-q.has-err input[type=number], .fm-q.has-err input[type=date] { border-color: var(--red); }
.fm-err { color: var(--red); font-weight: 600; margin: .35rem 0 0; font-size: .92rem; }
.fm-sign { font-style: italic; font-size: 1.1rem; }
.fm-banner { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; padding: .75rem 1rem; border-radius: 16px; background: var(--tan-light); color: #5a4d36; font-weight: 600; }
.fm-banner a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.fm-answers { margin: 0; }
.fm-answers dt { font-weight: 600; margin-top: 1rem; }
.fm-answers dt.fm-ah { font-size: 1.1rem; margin-top: 1.6rem; }
.fm-answers dd { margin: .2rem 0 0; }
.fm-answers dd.fm-flagged { color: var(--red); font-weight: 600; }
.fb-list { display: grid; gap: .8rem; margin-bottom: 1rem; }
.fb-row { border: 1px solid var(--line); border-radius: 16px; padding: .8rem; background: #fff; display: grid; gap: .6rem; }
.fb-head { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.fb-head select { flex: 1 1 10rem; min-width: 0; }
.fb-n { display: inline-flex; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; }
.fb-f { display: grid; gap: .2rem; font-weight: 600; font-size: .9rem; }
.fb-f input, .fb-f select, .fb-f textarea { width: 100%; font-weight: 400; }
.fb-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.fb-addlbl { display: inline-flex; flex-direction: column; gap: .2rem; font-weight: 600; font-size: .9rem; }
@media (max-width: 520px) { .fb-pair { grid-template-columns: 1fr; } }
.fm-banner .ico { width: 22px; height: 22px; }
.muted.fm-lead { color: #566068; }
.crumb a { color: #3f6a82; }

/* ---- Flows ---- */
[data-for][hidden] { display: none !important; }
.fs-h { display: inline; margin: 0; font-size: 1.15rem; }
details > summary { cursor: pointer; }
.fs-steps { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.fs-step { border: 1px solid var(--line); border-radius: 16px; padding: .75rem .9rem; background: #fff; }
.fs-head { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; }
.fs-when { font-variant-numeric: tabular-nums; font-size: .85rem; font-weight: 700; color: #3f6a82; }
.fs-body { margin: .3rem 0 0; }
.fs-edit { margin-top: .5rem; }
.fs-edit > summary { font-weight: 600; color: #3f6a82; min-height: 32px; display: inline-flex; align-items: center; }
.fs-edit .fs-form { margin-top: .6rem; }
.fs-manage > summary { font-weight: 600; color: #3f6a82; min-height: 32px; display: inline-flex; align-items: center; }
.fs-manage-in { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; padding: .4rem 0; }
.fs-days { width: 6rem; }
.fs-inline { max-width: 34rem; }
.fs-preview { margin-top: 1rem; padding: .9rem 1rem; border-radius: 16px; background: var(--tan-light); color: #3d3322; }
.fs-preview p { margin: 0 0 .6rem; }
.fs-people li { flex-wrap: wrap; }
.fu-readall { margin: 0 0 .8rem; }
.fu-list { list-style: none; margin: 0; padding: 0; }
.fu-list li { padding: 0; }
.fu-item { display: grid; gap: .25rem; padding: .85rem .2rem; color: inherit; text-decoration: none; width: 100%; }
.fu-item:hover { background: rgba(0, 0, 0, .02); }
.fu-top { display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; }
.fu-body { color: #3d4a52; }
.fu-new .fu-top strong { color: var(--navy); }
.fu-dot { width: 10px; height: 10px; border-radius: 50%; background: #e0566a; display: inline-block; }

.card p.muted a { text-decoration: underline; }
.card p.muted a { color: #2b5870; }
.card .grow > a { color: #2b5870; }

/* Challenges and training buddies */
.cg-meta { display: flex; flex-wrap: wrap; gap: .4rem .7rem; align-items: center; margin: .2rem 0 .8rem; }
.cg-big { font-size: 2rem; font-weight: 700; line-height: 1.1; margin: .2rem 0 .5rem; font-variant-numeric: tabular-nums; }
.cg-big .muted { font-size: .95rem; font-weight: 400; }
.cg-bar { display: block; width: 100%; height: 12px; border: 0; border-radius: 999px; overflow: hidden; background: var(--line); accent-color: var(--blue-text); -webkit-appearance: none; appearance: none; margin: .4rem 0; }
.cg-bar::-webkit-progress-bar { background: var(--line); border-radius: 999px; }
.cg-bar::-webkit-progress-value { background: var(--blue-text); border-radius: 999px; }
.cg-bar::-moz-progress-bar { background: var(--blue-text); border-radius: 999px; }
.cg-note { background: var(--tan-light); border-radius: 10px; padding: .55rem .8rem; margin: 0 0 .7rem; color: #5e4d2f; }
.cg-dates { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; align-items: end; }
.cg-form [hidden], .cg-form[hidden] { display: none !important; }
.cg-log { max-width: 32rem; }
.cg-weeks { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .25rem; }
.cg-entries li { display: flex; gap: .6rem; align-items: center; padding: .4rem 0; }
.cg-board { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .35rem; }
.cg-board li { display: grid; grid-template-columns: 2.6rem 1fr auto; gap: .5rem; align-items: center; padding: .55rem .7rem; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.cg-board li.cg-me { border-color: var(--blue-text); background: #eef5f9; }
.cg-rank { font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; color: var(--navy); font-size: .92rem; }
.cg-when { display: block; font-size: .8rem; color: var(--green); font-weight: 600; }
.cg-who { min-width: 0; overflow-wrap: anywhere; }
.cg-score { font-variant-numeric: tabular-nums; color: var(--navy); text-align: right; font-size: .92rem; }
.cg-card { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .5rem; }
.cg-cols-2 { grid-template-columns: repeat(2, 1fr); } .cg-cols-3 { grid-template-columns: repeat(3, 1fr); } .cg-cols-4 { grid-template-columns: repeat(4, 1fr); }
.cg-cols-5 { grid-template-columns: repeat(5, 1fr); } .cg-cols-6 { grid-template-columns: repeat(6, 1fr); }
.cg-card li { position: relative; display: flex; flex-direction: column; gap: .25rem; min-width: 0; padding: .6rem .5rem; border-radius: 12px; background: #fff; border: 1px solid var(--line); text-align: center; align-items: center; justify-content: space-between; }
.cg-list li { text-align: left; align-items: flex-start; }
.cg-card li.cg-done { background: var(--green-bg); border-color: #b7dcc6; }
.cg-sq-label { font-weight: 600; font-size: .9rem; overflow-wrap: anywhere; }
.cg-count { font-variant-numeric: tabular-nums; color: var(--navy); font-size: .85rem; }
.cg-tick { color: var(--green); font-weight: 700; font-size: 1.1rem; }
.cg-snote { overflow-wrap: anywhere; }
.cg-sq-actions { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; width: 100%; }
.cg-tickform { display: flex; flex-direction: column; gap: .3rem; width: 100%; }
.cg-tickform input[type=text] { width: 100%; min-width: 0; }
@media (max-width: 520px) { .cg-cols-5, .cg-cols-6 { grid-template-columns: repeat(3, 1fr); } .cg-cols-4 { grid-template-columns: repeat(2, 1fr); } .cg-dates { grid-template-columns: 1fr; } .cg-card li { padding: .5rem .4rem; } }
.cg-tpl li { padding: .55rem 0; }
.bd-qr { text-align: center; margin: .6rem 0; }
.bd-qr img { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 6px; max-width: 100%; height: auto; }
.bd-linkbox { width: 100%; font-size: .85rem; }
.bd-sendlink a { color: #2b5870; }
.bd-sendlink { margin: .2rem 0; font-size: .9rem; }
.fm-opt:has(input:checked) .muted { color: #d6e4eb; }
.cg-meta .muted { color: #4d565d; }
.cg-me .muted { color: #4d565d; }

/* ---- Extra activities: Quick Add tile, full-screen pop-up, picker, details form ---- */
.tile-qa { border-radius: 26px; padding: 1.4rem 1.4rem 1.2rem; }
.tile-qa .tile-h { color: var(--navy); }
.qa-lead { margin: 0 0 1rem; color: #4d565d; }
.qa-go { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 54px; border-radius: 16px; font-size: 1.05rem; font-weight: 800; text-decoration: none; }
.qa-go .ico { width: 22px; height: 22px; }
.qa-sub { margin: 1.2rem 0 .4rem; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: #4d565d; }
.qa-all { margin: .8rem 0 0; }
.qa-all a { color: #2b5870; }
@media (min-width: 700px) { .qa-go { width: auto; padding: 0 1.8rem; display: inline-flex; } }
.act-logs { list-style: none; margin: 0 0 .4rem; padding: 0; display: grid; gap: .5rem; }
.act-logrow { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: inherit; text-decoration: none; min-height: 56px; }
.act-logrow:hover { background: #f8f6f1; text-decoration: none; }
.act-logrow > .ico { width: 30px; height: 30px; flex: 0 0 auto; color: var(--navy); }
.act-logrow .grow { min-width: 0; overflow-wrap: anywhere; }
.act-open { color: #2b5870; font-weight: 700; font-size: .9rem; }
.act-day { margin: 1rem 0 .4rem; font-size: .95rem; }
.act-manage-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.act-manage-list li { display: flex; align-items: center; gap: .7rem; padding: .35rem 0; border-bottom: 1px solid var(--line); }
.act-manage-list .ico { width: 26px; height: 26px; color: var(--navy); }
.act-manage-list form { display: flex; align-items: center; gap: .6rem; }

dialog.act-dlg { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; padding: 0; border-radius: 0; background: var(--bg); color: var(--text); overflow: hidden; }
dialog.act-dlg[open] { display: flex; flex-direction: column; }
.act-dlg::backdrop { background: var(--bg); }
.act-dlg-bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: calc(.8rem + env(safe-area-inset-top)) 1rem .8rem; background: var(--navy); color: #fff; }
.act-dlg-bar h2 { margin: 0; font-size: 1.1rem; color: #fff; }
.act-x { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; padding: 0; cursor: pointer; }
.act-x .ico { width: 22px; height: 22px; }
.act-dlg-body { flex: 1 1 auto; overflow-y: auto; padding: 1rem 1rem calc(2rem + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }
.act-dlg-body .act-root { max-width: 640px; margin: 0 auto; }
html.act-open { overflow: hidden; }

.act-searchlbl { display: block; font-weight: 700; margin: 0 0 .3rem; }
.act-search { width: 100%; min-height: 48px; margin-bottom: .8rem; }
.act-h { margin: 1.1rem 0 .4rem; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: #4d565d; }
.act-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.act-item { display: flex; align-items: stretch; gap: .35rem; }
.act-item[hidden], .act-sec[hidden] { display: none; }
.act-row { flex: 1 1 auto; display: flex; align-items: center; gap: .8rem; padding: .6rem .9rem; min-height: 56px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--navy); font-weight: 700; text-decoration: none; min-width: 0; }
.act-row:hover { background: #f8f6f1; text-decoration: none; }
.act-row .ico { width: 30px; height: 30px; flex: 0 0 auto; }
.act-nm { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.act-uses { flex: 0 0 auto; font-weight: 500; color: #5a6268; }
.act-pref { display: flex; gap: .25rem; margin: 0; padding: 0; }
.act-star, .act-hide { width: 44px; min-height: 44px; border: 1px solid var(--line); background: #fff; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: #5a6268; cursor: pointer; align-self: center; }
.act-star .ico, .act-hide .ico { width: 20px; height: 20px; }
.act-star.on { background: var(--tan-light); color: #5a4d36; border-color: var(--tan); }
.act-star.on .ico { fill: currentColor; }
.act-manage { margin-top: 1.2rem; }
.act-manage a { color: #2b5870; }
.act-top { display: flex; align-items: center; gap: 1rem; margin: 0 0 1rem; }
.act-big .ico { width: 52px; height: 52px; color: var(--navy); }
.act-title { margin: 0; font-size: 1.4rem; }
.act-title:focus { outline: none; }
.act-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem 1rem; margin: 0 0 1rem; }
.act-grid > .act-f[hidden] { display: none; }
.act-f { display: grid; gap: .25rem; font-weight: 600; align-content: start; }
.act-f input, .act-f select { width: 100%; min-height: 46px; font-weight: 400; }
.act-wide { grid-column: 1 / -1; }
.act-form .actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.act-form .primary { min-height: 52px; min-width: 160px; }
.flash.err { background: var(--red-bg); color: var(--red); padding: .7rem 1rem; border-radius: 12px; }
.act-tagline { display: inline-flex; align-items: center; gap: .4rem; }
.act-tagline .ico { width: 22px; height: 22px; color: var(--navy); }
.act-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem 1.4rem; margin: 0 0 1rem; }
.act-dl dt { font-size: .8rem; color: #4d565d; font-weight: 700; }
.act-dl dd { margin: .1rem 0 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.act-dl-wide { grid-column: 1 / -1; }
.act-root .muted, .act-top .muted, .act-form .muted { color: #4d565d; }
.act-tagline a { color: #2b5870; }

/* Exercise pictures */
.exform-pic { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; margin: .6rem 0; }
.exform-thumb { border-radius: 10px; border: 1px solid var(--line, #ddd); height: auto; max-width: 120px; background: #fff; }
.exthumb { width: 36px; height: 36px; object-fit: cover; border-radius: 8px; vertical-align: middle; border: 1px solid var(--line, #ddd); background: #fff; }
.exthumb-link { display: inline-block; margin-right: .35rem; vertical-align: middle; }
.exfig { display: inline-block; margin: .25rem 0; }
.exfig img { display: block; width: 100%; max-width: 240px; height: auto; border-radius: 12px; border: 1px solid var(--line, #ddd); background: #fff; }
.wbpic { display: block; max-width: 100%; max-height: 50vh; height: auto; border-radius: 12px; margin: .4rem 0; }
.imp-pics { border: 1px solid var(--line, #ddd); border-radius: 12px; padding: .7rem .9rem; margin: .7rem 0; }
.imp-pics legend { font-weight: 700; padding: 0 .3rem; }

.wbthumb.haspic { background: #fff; overflow: hidden; padding: 0; border: 1px solid var(--line, #e6e4dc); }
.wbthumb.haspic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wbinpick .wbthumb { flex-basis: 28px; width: 28px; height: 28px; border-radius: 8px; margin-right: .45rem; vertical-align: middle; }

/* Today page leaderboards and points challenges */
.tile-boards .bd-tabs { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .3rem; margin: .2rem 0 .6rem; }
.tile-boards .bd-tab { flex: 0 0 auto; border: 1px solid var(--line); background: #fff; color: var(--navy); border-radius: 999px; padding: .4rem .85rem; font: inherit; font-size: .9rem; cursor: pointer; min-height: 44px; }
.tile-boards .bd-tab[aria-selected="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.tile-boards .bd-head { margin: .2rem 0 .3rem; display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; }
.tile-boards .bd-open { color: var(--navy); }
.tile-boards .bd-panel + .bd-panel { margin-top: .8rem; }
.tile-boards .bd-panel[hidden] { display: none; }
.cg-claims li, .cg-conds li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.cg-claims .cg-decide { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.cg-claims .cg-decide input[type="text"] { min-width: 0; }
.cg-proof { margin-top: .2rem; font-size: .9rem; overflow-wrap: anywhere; }

/* Subscription levels and feature hiding */
ul.checks { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .55rem; }
ul.checks .inline-check { align-items: flex-start; }
.sublist th[scope="row"] { text-align: left; }
.sublist td.actions { white-space: nowrap; }
#plan .plan-name { font-size: 1.15rem; margin: 0 0 .2rem; }
#locked { text-align: left; }
.sublist th[scope="col"] { color: #3a6075; }
.sublist th[scope="row"] { text-transform: none; letter-spacing: normal; font-size: 1em; color: var(--ink, #183642); }

/* Community groups */
.cg-list li, .cg-members li, .cg-invlist li { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cg-item { display: grid; gap: .15rem; flex: 1; text-decoration: none; color: inherit; padding: .2rem 0; }
.cg-top { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.fbadge-inline { background: #183642; color: #fff; border-radius: 999px; padding: .05rem .5rem; font-size: .78rem; font-weight: 700; }
.cg-head { align-items: flex-start; }
.cg-links { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cg-post { margin-bottom: .8rem; }
.cg-post.is-pinned { border-color: #719fb5; }
.cg-ph { display: flex; gap: .65rem; align-items: center; margin-bottom: .4rem; }
.cg-av { width: 38px; height: 38px; border-radius: 50%; background: #dbe7ea; color: #183642; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
a.cg-time { color: #4d565d; text-decoration: none; }
a.cg-time:hover { text-decoration: underline; }
.cg-body { margin: .3rem 0 .6rem; overflow-wrap: anywhere; }
.cg-attach { border: 1px solid var(--line, #d9dfe2); border-radius: 12px; padding: .7rem .8rem; margin: .4rem 0 .6rem; background: rgba(113, 159, 181, .08); }
.cg-at-h { margin: 0 0 .3rem; }
.cg-stats { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin: .2rem 0 .4rem; padding: 0; }
.cg-stats li { display: grid; }
.cg-stats b { font-size: 1.1rem; }
.cg-stats span { font-size: .78rem; color: #4d565d; }
.cg-animal { display: flex; align-items: center; gap: .5rem; margin: .2rem 0; font-weight: 600; }
.cg-pbs { margin: .2rem 0 0; }
.cg-actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-top: .3rem; }
.cg-like.on { background: #183642; color: #fff; }
.cg-comments { list-style: none; margin: .6rem 0 .3rem; padding: 0; display: grid; gap: .5rem; }
.cg-comments li { background: rgba(0, 0, 0, .035); border-radius: 10px; padding: .45rem .65rem; }
.cg-comments p { margin: 0; }
.cg-cbody { overflow-wrap: anywhere; }
.cg-cform { display: flex; gap: .4rem; margin-top: .5rem; }
.cg-cform input { flex: 1; min-width: 0; }
button.cg-linkbtn { background: none; border: 0; padding: 0; color: #2f5d73; text-decoration: underline; cursor: pointer; font-size: .85rem; }
.cg-macts { display: inline-flex; gap: .4rem; flex-wrap: wrap; }
.cg-head .muted, .cg-post .muted, .cg-attach .muted, .cg-comments .muted, #members .muted { color: #4d565d; }
.cg-body a, .cg-cbody a, .cg-head a, .cg-attach a:not(.button) { color: #2a566b; text-decoration: underline; }

/* ---------- Menus: dropdown groups and hero items in the side menu ---------- */
.nv-grp { display: block; }
.nv-sum { display: flex; align-items: center; gap: 1rem; padding: .7rem .8rem; border-radius: 12px; color: var(--tan); font-weight: 700; font-size: 1.05rem; cursor: pointer; list-style: none; position: relative; -webkit-tap-highlight-color: transparent; }
.nv-sum::-webkit-details-marker { display: none; }
.nv-sum:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nv-sum:focus-visible, .sbnav a:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.nv-chev { margin-left: auto; display: inline-flex; transition: transform .18s ease; }
.nv-chev .ico { width: 18px; height: 18px; }
.nv-grp[open] > .nv-sum .nv-chev { transform: rotate(90deg); }
.nv-grp.on > .nv-sum, .nv-grp[open] > .nv-sum { color: #fff; }
.nv-kids { display: flex; flex-direction: column; gap: .2rem; margin: .25rem 0 .35rem 1.55rem; padding-left: .55rem; border-left: 1px solid rgba(214, 195, 168, .35); }
.nv-kids a, .nv-kids .nv-sum { font-size: .98rem; padding: .55rem .7rem; }
.nv-sum .fbadge { top: 50%; transform: translateY(-50%); right: 44px; margin-right: 0; box-shadow: none; }
.sbnav a.nav-hero, .nv-grp.nav-hero > .nv-sum { background: var(--tan); color: var(--navy); margin: .3rem 0; padding-top: .95rem; padding-bottom: .95rem; font-size: 1.1rem; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.sbnav a.nav-hero:hover, .nv-grp.nav-hero > .nv-sum:hover { background: var(--tan-light); color: var(--navy); }
.sbnav a.nav-hero.on { background: var(--tan-light); box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(0, 0, 0, .25); color: var(--navy); }
.sbnav a.nav-hero .fbadge { box-shadow: none; }
.navc .nv-sum { justify-content: center; padding: .7rem 0; }
.navc .nv-chev { display: none; }
.navc .nv-kids { margin-left: 0; padding-left: 0; border-left: 0; }
.navc .nv-sum .fbadge { top: 6px; right: 10px; transform: none; }
.navc .sbnav a.nav-hero, .navc .nv-grp.nav-hero > .nv-sum { padding-left: 0; padding-right: 0; }
@media (max-width: 820px) {
    .navc .nv-sum { justify-content: flex-start; padding: .7rem .8rem; }
    .navc .nv-chev { display: inline-flex; }
    .navc .nv-kids { margin-left: 1.55rem; padding-left: .55rem; border-left: 1px solid rgba(214, 195, 168, .35); }
    .navc .nv-sum .fbadge { top: 50%; transform: translateY(-50%); right: 44px; }
    .navc .sbnav a.nav-hero, .navc .nv-grp.nav-hero > .nv-sum { padding: .95rem .8rem; }
}

/* ---------- Menus: floating bar groups and hero ---------- */
@media (max-width: 820px) {
    .fnav.fc2 { --fcols: 2; } .fnav.fc3 { --fcols: 3; } .fnav.fc4 { --fcols: 4; } .fnav.fc5 { --fcols: 5; } .fnav.fc6 { --fcols: 6; }
    .fnav .fn-grp { display: block; min-width: 0; position: static; }
    .fnav .fn-sum { display: flex; align-items: center; justify-content: center; height: calc(3.1rem * var(--fs)); margin: 0 auto; width: 100%; max-width: 4.6rem; border-radius: 999px; color: #c9b48f; cursor: pointer; list-style: none; position: relative; -webkit-tap-highlight-color: transparent; transition: height .22s ease, background .15s; }
    .fnav .fn-sum::-webkit-details-marker { display: none; }
    .fnav .fn-sum:hover { background: #f6f4ef; }
    .fnav .fn-grp[open] > .fn-sum, .fnav .fn-sum.on { background: #eeece6; color: #b39a68; }
    .fnav .fn-sum:focus-visible, .fnav a:focus-visible, .fnav button:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
    .fnav .fn-pop { position: absolute; left: .5rem; right: .5rem; bottom: calc(100% + .7rem); max-width: 20rem; margin: 0 auto; padding: .4rem; background: #fff; border-radius: 18px; box-shadow: 0 8px 28px rgba(24, 54, 66, .22), 0 1px 3px rgba(24, 54, 66, .1); display: flex; flex-direction: column; gap: .1rem; }
    .fnav .fn-pop a { height: auto; max-width: none; width: 100%; margin: 0; justify-content: flex-start; gap: .8rem; padding: .7rem .9rem; border-radius: 12px; color: var(--navy); font-weight: 700; font-size: 1rem; }
    .fnav .fn-pop a:hover { background: #f6f4ef; }
    .fnav .fn-pop a.on { background: #eeece6; }
    .fnav .fn-pop .ico { width: 24px; height: 24px; flex: none; }
    .fnav .fn-pop .fbadge { position: static; margin: 0 0 0 auto; box-shadow: none; }
    .fnav .fn-sum .fbadge { top: 2px; right: 50%; margin-right: -26px; }
    .fnav a.fn-hero, .fnav .fn-hero > .fn-sum { background: var(--navy); color: #fff; width: calc(3.5rem * var(--fs)); height: calc(3.5rem * var(--fs)); transform: translateY(calc(-.55rem * var(--fs))); box-shadow: 0 6px 14px rgba(24, 54, 66, .3); }
    .fnav a.fn-hero:hover, .fnav .fn-hero > .fn-sum:hover { background: #224b5b; }
    .fnav a.fn-hero.on, .fnav a.fn-hero[aria-current], .fnav .fn-hero[open] > .fn-sum, .fnav .fn-hero > .fn-sum.on { background: var(--navy); color: #fff; box-shadow: 0 0 0 3px #eeece6, 0 6px 14px rgba(24, 54, 66, .3); }
    .fnav a.fn-hero .ico, .fnav .fn-hero > .fn-sum .ico { width: calc(30px * var(--fs)); height: calc(30px * var(--fs)); }
}
@media (prefers-reduced-motion: reduce) { .nv-chev, .fnav .fn-sum { transition: none; } }

/* ---------- Menus: the editor in Settings ---------- */
.mn-choose { list-style: none; margin: 0; padding: 0; }
.mn-choose li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.mn-choose li > span { max-width: 36rem; }
.mn-choose .muted { display: block; }
.mn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.mn-kids { margin: .6rem 0 .1rem 1rem; }
.mn-item { border: 1px solid var(--line); border-radius: 12px; padding: .6rem .8rem; background: #fff; }
.mn-item.mn-hero { border-color: var(--tan); background: #faf6ee; }
.mn-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; }
.mn-label { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; min-width: 0; }
.mn-label .ico { width: 22px; height: 22px; flex: none; color: var(--navy); }
.mn-url { overflow-wrap: anywhere; }
.mn-acts { display: flex; flex-wrap: wrap; gap: .3rem; }
.mn-move { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .45rem; }
.mn-move select { width: auto; max-width: 100%; }
.mn-herotag { background: var(--navy); color: #fff; }
.mn-empty { margin: .5rem 0 0 1rem; }
.mn-addform { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1rem; }
.mn-addform h3 { margin: 0 0 .4rem; }
.mn-style { border: 0; padding: 0; margin: .8rem 0 0; }
.mn-style legend { font-weight: 700; padding: 0; }
.mn-move label { color: #4f5a63; }

/* Ticking a waypoint (client Progress page) */
.jn-glr { display: flex; align-items: center; gap: .65rem; }
.jn-glr .jn-gl { width: auto; flex: 1 1 auto; min-width: 0; }
.jn-tickf { flex: none; margin: 0; }
button.jn-tickb { position: relative; background: transparent; padding: 0; cursor: pointer; width: 26px; height: 26px; border-radius: 8px; border: 2px solid #aab6bb; }
button.jn-tickb.on { background: #4fe0a0; border-color: #4fe0a0; }
button.jn-tickb::after { content: ""; position: absolute; inset: -10px; }
button.jn-tickb:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }
button.jn-tickb.on:hover { background: #4fe0a0; }
button.jn-tickb:focus-visible { outline: 3px solid #719fb5; outline-offset: 2px; }
button.jn-tickb svg { width: 18px; height: 18px; display: block; margin: 0 auto; }
#daily-banner a { margin-left: .5rem; }

/* Preview mode */
.pv-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin: 0 0 1rem; padding: .7rem 1rem; border-radius: 16px; background: var(--navy); color: #fff; }
.pv-bar .pv-msg { display: flex; align-items: center; gap: .5rem; flex: 1 1 18rem; font-size: .92rem; }
.pv-bar .pv-msg .ico { width: 20px; height: 20px; flex: none; }
.pv-bar .pv-acts { display: flex; gap: .5rem; }
.pv-bar button.small { padding: .35rem .9rem; border-radius: 999px; border: 1.5px solid #fff; background: transparent; color: #fff; font-weight: 600; cursor: pointer; }
.pv-bar button.small.primary { background: #fff; color: var(--navy); }
.pv-card h2 .tag { vertical-align: middle; margin-left: .4rem; }
.pv-card .actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* Round 9: Diagnostics page */
.diag-list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .1rem; }
.diag-row { display: flex; gap: .75rem; align-items: flex-start; padding: .6rem 0; border-top: 1px solid var(--line); }
.diag-row:first-child { border-top: 0; }
.diag-row .tag { flex: none; min-width: 3.4rem; text-align: center; margin: .15rem 0 0; }
.diag-row > div { min-width: 0; overflow-wrap: anywhere; }   /* Round 105: long words (the database mode) wrap on a phone */
.diag-row .tag.diag-good { background: var(--green-bg); color: var(--green); }
.diag-slow { color: var(--red); font-weight: 700; }
/* Round 130: load watch verdict */
.lw-verdict { margin: .25rem 0 .5rem; padding: .75rem .9rem; border-radius: 14px; background: var(--green-bg); color: var(--green); font-weight: 600; }
.lw-verdict.lw-host, .lw-verdict.lw-queue { background: var(--red-bg); color: var(--red); }
.lw-verdict.lw-collecting { background: var(--line); color: inherit; font-weight: 500; }
#diag-lw h3 { margin-top: 1rem; }
#diag-test h3 { margin-top: 1rem; }

/* Exercise form: Find on YMove */
.ymove { border: 1px solid var(--line); border-radius: 12px; padding: .8rem 1rem; margin: 0 0 1rem; background: #fff; }
.ymove-h { font-size: 1.05rem; margin: 0 0 .25rem; }
.ymove-bar { display: flex; gap: .5rem; margin: .4rem 0; }
.ymove-bar input { flex: 1; min-width: 0; }
.ymove-list { list-style: none; margin: .4rem 0; padding: 0; display: grid; gap: .4rem; }
.ymove-item { display: flex; align-items: center; gap: .75rem; padding: .4rem; border: 1px solid var(--line); border-radius: 10px; }
.ymove-item img { border-radius: 8px; object-fit: cover; background: var(--tan-light); flex: none; }
.ymove-txt { flex: 1; min-width: 0; }
.ymove-picked { margin-top: .6rem; padding: .6rem .8rem; border-radius: 10px; background: var(--green-bg); color: var(--navy); }
.ymove-picked .muted { color: #3d5360; }
.posterbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin: 0 0 1rem; padding: .7rem 1rem; }
.posterbar p { margin: 0; flex: 1 1 260px; }

/* ---- My plan: tabs, My Moves, Upcoming Sessions, nutrition tiles ---- */
.plantabs { display: flex; gap: .35rem; overflow-x: auto; margin: .2rem 0 1rem; padding-bottom: .15rem; -webkit-overflow-scrolling: touch; }
.plantabs a { flex: 1 0 auto; text-align: center; padding: .6rem 1rem; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--navy); font-weight: 600; text-decoration: none; }
.plantabs a.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.plantabs a:focus-visible { outline: 3px solid var(--blue-text); outline-offset: 2px; }
.pm-top { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1rem; }
.pm-ring { position: relative; width: 112px; height: 112px; flex: 0 0 auto; }
.pm-ring svg { width: 100%; height: 100%; }
.pm-ring circle { fill: none; stroke-width: 9; }
.pm-ring .trk { stroke: rgba(255, 255, 255, .28); }
.pm-ring .bar { stroke: #5fe0a0; stroke-linecap: round; }
.pm-num { position: absolute; inset: 0; display: grid; place-items: center; }
.pm-num b { font-size: 1.6rem; }
.pm-cap { margin: 0; }
.pm-days { list-style: none; margin: 0; padding: 0 0 1rem; display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; border-bottom: 1px solid rgba(255, 255, 255, .55); }
.pm-days li { display: grid; justify-items: center; gap: .3rem; }
.pm-l { font-size: .78rem; font-weight: 800; letter-spacing: .08em; }
.pm-b { width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .6); display: grid; place-items: center; font-weight: 800; font-size: .95rem; color: #46758d; }
.pm-days li.on .pm-b { background: #5fe0a0; border-color: #5fe0a0; }
.pm-days li.today .pm-b { box-shadow: 0 0 0 3px rgba(255, 255, 255, .5); }
.up-seg, .up-view { margin: .4rem 0 .8rem; }
.up-seg button, .up-view button { cursor: pointer; }
.up-prog { margin: 0 0 .3rem; }
.up-strip { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; }
.up-strip[hidden], .up-view[hidden], [data-up-panel][hidden] { display: none; }
.ds { width: 100%; min-height: 62px; padding: .35rem 0; display: grid; justify-items: center; gap: .1rem; border-radius: 14px; border: 1px solid var(--line); background: #fff; color: var(--navy); cursor: pointer; }
.ds.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.ds.today .ds-n { text-decoration: underline; }
.ds-l { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.ds-n { font-size: 1.05rem; font-weight: 800; }
.ds-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.ds.has .ds-dot { background: #3f9d6b; }
.ds.on.has .ds-dot { background: #5fe0a0; }
.ds:focus-visible { outline: 3px solid var(--blue-text); outline-offset: 2px; }
.js .up-tile[data-view="day"] .plandays .pday { display: none; }
.js .up-tile[data-view="day"] .plandays .pday.sel { display: block; }
.up-hist { margin: .8rem 0 0; }
.pwk-resched { min-height: 44px; padding: .4rem 1rem; border-radius: 999px; background: #fff; border: 1px solid var(--navy); color: var(--navy); font-weight: 600; cursor: pointer; }
.rs-dlg { border: 0; border-radius: 22px; padding: 1.4rem; width: min(92vw, 24rem); }
.rs-dlg::backdrop { background: rgba(24, 54, 66, .55); }
.rs-quick { display: flex; flex-wrap: wrap; gap: .5rem; }
.rs-quick button { min-height: 44px; }
.nt-note { margin: .8rem 0 0; }
.nt-goal h3, .nm h3 { margin: 1rem 0 .3rem; font-size: 1rem; }
.ng-calc, .ng-how { margin: 0 0 .6rem; padding-left: 1.2rem; display: grid; gap: .35rem; }
.nm-list { display: grid; gap: .9rem; }
.nm p { margin: .2rem 0; font-size: .92rem; }
.nm-g { margin-left: auto; font-weight: 800; }
.nm h3 { display: flex; align-items: center; gap: .4rem; }
.pw-list { margin: 0; padding-left: 1.1rem; display: grid; gap: .4rem; }
.tile-ms .tile-link, .tile-logs .tile-link { justify-content: flex-start; }
.lg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .8rem; }
.lg-stat b { display: block; font-size: 2rem; line-height: 1.1; }
.lg-stat span { font-size: .85rem; opacity: .85; }
.up-tile:not([data-view="day"]) .up-strip { display: none; }

/* ---- My plan, round 2: tab icons, carousel of days, full-width list tabs ---- */
.clientapp .hi { margin-bottom: 1rem; }
.plantabs a { gap: .4rem; }
.pt-ico { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.up-strip { display: flex; gap: .45rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: .2rem .1rem .6rem; margin: 0 0 .6rem; grid-template-columns: none; scrollbar-width: none; }
.up-strip::-webkit-scrollbar { display: none; }
.up-strip li { flex: 0 0 calc((100% - 2.7rem) / 6.4); scroll-snap-align: start; min-width: 52px; }
.ds-dot { background: transparent; }
.ds.todo .ds-dot { background: #d3d8dc; }
.ds.done .ds-dot { background: #3f9d6b; }
.ds.on.todo .ds-dot { background: #aeb8bf; }
.ds.on.done .ds-dot { background: #5fe0a0; }
.ds.has .ds-dot { background: transparent; }
.ds.has.todo .ds-dot { background: #d3d8dc; }
.up-seg, .up-view { display: flex; width: 100%; margin: .8rem 0 0; }
.up-seg button, .up-view button { flex: 1 1 0; }
.pweek-h { margin: 1rem 0 .3rem; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.js .up-tile[data-view="day"] .pweek-h { display: none; }
.js .up-tile .up-strip { display: flex; }
.up-tile:not([data-view="day"]) .up-strip { display: none; }
.up-strip[hidden] { display: none; }
.up-seg, .up-view { background: #ece9e2; border-radius: 999px; padding: .25rem; gap: .25rem; }
.up-seg button, .up-view button { border: 0; background: transparent; color: var(--navy); border-radius: 999px; min-height: 44px; font-weight: 600; }
.up-seg button.on, .up-view button.on { background: var(--navy); color: #fff; }
.up-seg button:focus-visible, .up-view button:focus-visible { outline: 3px solid var(--blue-text); outline-offset: 2px; }

/* ---- Coach app: the client list slides up from the bottom as a sheet ---- */
.clientpanel { top: auto; right: auto; left: 50%; bottom: 0; width: min(560px, 100%); max-height: 82vh; max-height: 82dvh; border-radius: 24px 24px 0 0; transform: translate(-50%, 105%); box-shadow: 0 -10px 40px rgba(24, 54, 66, .18); padding: 1.6rem 1.4rem calc(1.2rem + env(safe-area-inset-bottom, 0px)); }
.clients-open .clientpanel { transform: translate(-50%, 0); }
.clientpanel::before { content: ""; position: absolute; top: .55rem; left: 50%; width: 42px; height: 5px; margin-left: -21px; border-radius: 3px; background: #d6d3cc; }
.clients-open .nback { opacity: 1; visibility: visible; transition: opacity var(--mo-in) linear, visibility 0s; }

/* ---- Form controls never spill past the screen or crowd each other (iPhone and iPad included) ---- */
input, select, textarea { max-width: 100%; box-sizing: border-box; }
input:not([type=checkbox]):not([type=radio]), select, textarea { min-width: 0; }
input[type=checkbox], input[type=radio] { flex: 0 0 auto; }
input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=week] { -webkit-appearance: none; appearance: none; min-height: 2.6rem; min-width: 0; max-width: 100%; }
input[type=date]::-webkit-date-and-time-value, input[type=time]::-webkit-date-and-time-value, input[type=datetime-local]::-webkit-date-and-time-value { text-align: left; min-height: 1.2em; margin: 0; }
label { overflow-wrap: anywhere; }
form > *, fieldset, .row, .two, .three { min-width: 0; }

/* ---- Client app: notifications bell and panel ---- */
.cnotif-open .cnotifpanel { transform: none; visibility: visible; }
.cnotif-open #cnback { display: block; opacity: 1; visibility: visible; transition: opacity var(--mo-in) linear, visibility 0s; }
#cnback { display: block; opacity: 0; visibility: hidden; transition: opacity var(--mo-out) linear, visibility 0s linear var(--mo-out); }
.cnotifpanel .nitem a.nbody { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .35rem 0; }
.cnotifpanel .nitem { padding: .5rem .5rem; }
.cn-readall { margin: 0 0 .6rem; }
.pagebell { display: inline-flex; margin-right: .2rem; }
.pagebell .tool { position: relative; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--navy); }
.pagebell .tool svg { width: 24px; height: 24px; }
.pagebell .belldot { box-shadow: 0 0 0 2px #f2f2f2; }
.mbar .js-cbell { position: relative; }

/* ---- Buddy messages ---- */
.bm-link{margin:0 0 .5rem;font-size:.95rem}
.bm-link .fbadge,.bm-row .fbadge{position:static;display:inline-block;margin-left:.4rem;vertical-align:middle}
.bm-list{list-style:none;margin:0;padding:0}
.bm-row{display:flex;align-items:center;gap:.6rem;padding:.8rem .2rem;border-bottom:1px solid var(--line,#e5e7eb);text-decoration:none;color:inherit;min-width:0}
.bm-name{font-weight:600}
.bm-last{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bm-msgs{display:flex;flex-direction:column;gap:.4rem;max-height:55vh;overflow-y:auto;padding:.3rem 0 .6rem}
.bm-msg{max-width:80%;padding:.5rem .8rem;border-radius:14px;overflow-wrap:anywhere;white-space:pre-wrap}
.bm-msg.mine{align-self:flex-end;background:var(--brand,#2563eb);color:#fff}
.bm-msg.theirs{align-self:flex-start;background:var(--soft,#eef0f3);color:inherit}
.bm-form{display:flex;gap:.5rem;align-items:center}
.bm-form input[type=text]{flex:1;min-width:0}

/* ---- Challenge prizes and public leaderboard ---- */
.cg-banner{display:block;width:100%;max-height:220px;object-fit:cover;border-radius:14px;margin:.4rem 0 .8rem}
.cg-stakes{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:.6rem}
.cg-stakes li{display:flex;gap:.8rem;align-items:center;padding:.6rem;border:1px solid var(--line);border-radius:12px;min-width:0}
.cg-stakes img{width:72px;height:72px;object-fit:cover;border-radius:10px;flex:none}
.cg-stakes .grow{flex:1;min-width:0;overflow-wrap:anywhere}
.cg-stake-add{margin-top:.8rem}
.cg-stake-add summary{cursor:pointer;font-weight:600}
.copyfield{width:100%;max-width:100%}
body.lb-page{background:#183642;color:#fff;min-height:100vh}
.lb{max-width:1200px;margin:0 auto;padding:1.2rem 16px 2rem}
.lb-banner{display:block;width:100%;max-height:260px;object-fit:cover;border-radius:18px;margin-bottom:1rem}
.lb-head{display:flex;gap:1.5rem;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;margin-bottom:1.2rem}
.lb-head h1{font-size:clamp(1.8rem,5vw,3.2rem);margin:.1rem 0 .4rem;color:#fff}
.lb-by{margin:0;opacity:.75;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem}
.lb-meta,.lb-desc{margin:.2rem 0;opacity:.9}
.lb-join{display:grid;justify-items:center;gap:.5rem;background:#fff;padding:.8rem;border-radius:16px;color:#183642}
.lb-join img{background:#fff}
.lb-grid{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media (min-width:900px){.lb-grid{grid-template-columns:3fr 2fr}}
.lb h2{color:#fff;font-size:1.3rem}
.lb-board{list-style:none;margin:.5rem 0 1rem;padding:0;display:grid;gap:.45rem}
.lb-board li{display:grid;grid-template-columns:2.6rem 1fr auto;gap:.7rem;align-items:center;padding:.7rem 1rem;border-radius:14px;background:rgba(255,255,255,.1);font-size:clamp(1.05rem,2.2vw,1.5rem)}
.lb-board li:nth-child(1){background:#f2c94c;color:#183642}
.lb-board li:nth-child(2){background:#d9dde1;color:#183642}
.lb-board li:nth-child(3){background:#e0a878;color:#183642}
.lb-rank{font-weight:700}
.lb-name{min-width:0;overflow-wrap:anywhere}
.lb-name small{opacity:.7}
.lb-score{font-weight:700;white-space:nowrap}
.lb-stakes{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.7rem}
.lb-stakes li{display:flex;gap:.8rem;align-items:center;background:rgba(255,255,255,.1);border-radius:14px;padding:.7rem}
.lb-stakes img{width:90px;height:90px;object-fit:cover;border-radius:10px;flex:none}
.lb-stakes p{margin:.2rem 0 0;opacity:.9}
.lb .muted{color:#fff;opacity:.85}

/* ---- Workout builder: picture sections ---- */
.wbmedia{padding:.4rem .2rem .6rem}
.wbmrow{display:flex;gap:.8rem;align-items:center}
.wbmthumb{width:96px;height:72px;object-fit:cover;border-radius:10px;flex:none}

/* ---- Groups: tiles, composer, pictures, reactions ---- */
.cg-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.8rem}
.cg-tiles li{list-style:none;padding:0;border:0}
.cg-tiles .cg-item{display:flex;flex-direction:column;gap:.3rem;height:100%;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;text-decoration:none;color:inherit;padding-bottom:.7rem}
.cg-tiles .cg-item>span{padding:0 .8rem}
.cg-thumb{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--navy)}
.cg-thumb-none{display:flex;align-items:center;justify-content:center;color:#fff;font-size:2.4rem;font-weight:700;padding:0 !important}
.cg-cover,.cg-covprev{display:block;width:100%;max-height:200px;object-fit:cover;border-radius:16px;margin-bottom:.8rem}
.cg-trigger{display:none;width:100%;text-align:left;padding:.8rem 1rem;border:1px solid var(--line);border-radius:999px;background:#f6f6f6;color:#5b6168;font:inherit;cursor:text}
.cg-compose.cg-js:not(.open) .cg-trigger{display:block}
.cg-compose.cg-js:not(.open) .cg-panel{display:none}
.cg-panelhead{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.cg-compose.cg-js:not(.open) .cg-panelhead{display:none}
@media (max-width:820px){
 .cg-compose.open{position:fixed;inset:0;z-index:300;border-radius:0;margin:0;overflow:auto;padding-bottom:5rem}
}
.cg-previews{display:flex;gap:.4rem;flex-wrap:wrap}
.cg-previews img{width:72px;height:72px;object-fit:cover;border-radius:10px}
.cg-suggest{list-style:none;margin:.2rem 0;padding:0;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.cg-suggest button{display:block;width:100%;text-align:left;padding:.55rem .8rem;border:0;background:none;font:inherit}
.cg-suggest[hidden]{display:none}
.cg-taglist{display:grid;gap:.2rem;max-height:180px;overflow:auto;margin:.4rem 0}
.cg-taglist label[hidden]{display:none}
.cg-photos{display:grid;gap:4px;margin:.5rem 0;border-radius:14px;overflow:hidden}
.cg-photos.n2,.cg-photos.n4{grid-template-columns:1fr 1fr}
.cg-photos.n3{grid-template-columns:1fr 1fr}
.cg-photo{display:block;overflow:hidden;background:#111}
.cg-photo img{display:block;width:100%;height:100%;object-fit:cover}
.cg-photo.is-portrait{aspect-ratio:4/3}
.cg-photo.is-landscape{aspect-ratio:1/1}
.cg-tagged{margin:.3rem 0}
.cg-react{display:inline-block;position:relative}
.cg-react summary{display:inline-block;padding:.35rem .7rem;border:1px solid var(--line);border-radius:999px;cursor:pointer;list-style:none}
.cg-react summary::-webkit-details-marker{display:none}
.cg-reacts{display:flex;gap:.3rem;position:absolute;z-index:5;bottom:110%;left:0;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.3rem .5rem;box-shadow:0 4px 16px rgba(0,0,0,.15)}
.cg-rbtn{border:0;background:none;font-size:1.5rem;padding:.2rem .3rem;border-radius:50%;cursor:pointer}
.cg-rbtn.on{background:#e8f1f5}
.cg-rsum{margin:.2rem 0;display:flex;gap:.6rem;flex-wrap:wrap}
.cg-lightbox{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center}
.cg-lightbox[hidden]{display:none}
.cg-lightbox img{max-width:100%;max-height:100%;object-fit:contain}
.cg-lbclose{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);right:14px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;font-size:1.6rem;line-height:1}
.cg-photos:not(.n1) .cg-photo{aspect-ratio:1/1}
.cg-compose input[type=file]{max-width:100%;margin:.2rem 0}

/* ---- Credits ---- */
.cr-balance{font-size:2rem;margin:.2rem 0 .6rem}
.cr-balance .muted{font-size:1rem}
.cr-hist li{display:flex;gap:.8rem;align-items:center}
.cr-plus{color:#1d7a46}
.cr-minus{color:#a33}
.sbcredits{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.sbcredits strong{background:rgba(255,255,255,.18);border-radius:999px;padding:.05rem .6rem}

/* ---- Classes ---- */
.cls-row{display:flex;gap:.8rem;align-items:center;text-decoration:none;color:inherit;padding:.4rem 0;min-width:0}
.cls-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem}
.cls-grid input{width:100%;max-width:100%}
.cls-map{display:block;width:100%;height:240px;border:0;border-radius:14px;margin:.6rem 0}
.cls-bringlist{list-style:none;margin:.3rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.cls-bringlist li{background:#eef5f0;border-radius:999px;padding:.25rem .7rem}
.cls-bring,.cls-who{border:0;padding:0;margin:.4rem 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.2rem .8rem}
.cls-att li{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}

/* Public class schedule */
.clientapp .hi.pub-h { color: var(--navy); }
.pubnote a, .clientapp .pubnote a { color: var(--navy); text-decoration: underline; }

/* Specialty programs */
.sp-count { margin: .4rem 0 .8rem; padding: .6rem .8rem; border-radius: 12px; background: #eef3f5; color: var(--navy); font-size: 1.05rem; }
.sp-count-time { font-variant-numeric: tabular-nums; }
.sp-dt { border: 0; padding: 0; margin: 0 0 .4rem; display: flex; gap: .8rem; flex-wrap: wrap; }
.sp-dt legend { font-weight: 600; padding: 0; margin-bottom: .3rem; }
.sp-add { margin-top: .8rem; }
.sp-add summary { cursor: pointer; padding: .4rem 0; }

/* Coach Training tab: tabs, ticks, unscheduled */
.ttabs { display: flex; gap: .3rem; margin: 0 0 1rem; border-bottom: 1px solid var(--line); overflow-x: auto; }
.ttabs a { display: inline-flex; align-items: center; gap: .4rem; padding: .6rem .9rem; color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; font-weight: 600; white-space: nowrap; }
.ttabs a .ico { width: 18px; height: 18px; }
.ttabs a.on { color: var(--navy); border-bottom-color: var(--navy); }
.ttab-wrap.js .ttab-panel:not(.on) { display: none; }
.ttab-wrap:not(.js) .ttabs { display: none; }
.tcal-week .wtile { padding-left: 2rem; }
.tcal-week .wtile-link { padding-right: 0; }
.wtile.done { background: #eaf6ec; border-color: #2e8b57; box-shadow: inset 0 0 0 1px #2e8b57; }
.wtile-tick { display: inline-flex; vertical-align: -3px; color: #1f7a45; }
.wtile-tick .ico { width: 18px; height: 18px; }
.tcal-week .wtile-train { display: flex; flex-direction: column; gap: .35rem; margin: .5rem 0 0; }
.tcal-week .wtile-train .button { width: 100%; text-align: center; justify-content: center; box-sizing: border-box; }
.tcal-unsched { margin-top: .6rem; padding: .6rem; border: 2px dashed var(--line); border-radius: 14px; background: #fafaf7; }
.tcal-unsched h4 { margin: 0 0 .4rem; display: flex; align-items: center; gap: .4rem; }
.tcal-unsched h4 .ico { width: 16px; height: 16px; }
.tcal-unsched .wtile { max-width: 22rem; }
.tcal-unsched.dropok, .tcal-week .wkcell.dropok { outline: 2px solid var(--blue); outline-offset: -2px; }
.tcal-week .wkcell h4, .tcal-week .wkcell h4 small, .tcal-week .noact, .ttab-wrap .seg a:not(.on) { color: #44545c; }
.tcal-week .wtile-dur, .tcal-week .wtile-type, .tcal-week .wtile-secs em, .tcal-week .wtile-count { color: #44545c; }

/* Classes: covers, thumbnails, information tile */
.cls-hero { margin: -1rem -1rem .8rem; border-radius: 16px 16px 0 0; overflow: hidden; }
.cls-hero .tile-cover { aspect-ratio: 16 / 9; width: 100%; border-radius: 0; margin: 0; display: flex; align-items: center; justify-content: center; }
.cls-hero .tile-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cls-hero .tile-ico svg { width: 72px; height: 72px; }
.cls-thumb { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; }
.cls-thumb .tile-cover { width: 64px; height: 64px; aspect-ratio: 1; margin: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.cls-thumb .tile-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cls-thumb .tile-ico svg { width: 30px; height: 30px; }
li.cls-row { display: flex; align-items: center; gap: .8rem; padding: .6rem 0; }
li.cls-row .grow { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.cls-title { font-weight: 700; color: var(--navy); text-decoration: underline; }
.cls-full { width: 100%; box-sizing: border-box; min-height: 3rem; font-size: 1.05rem; }
.cls-dt { display: grid; grid-template-columns: max-content 1fr; gap: .4rem .9rem; margin: 0 0 .8rem; }
.cls-dt dt { font-weight: 700; color: var(--navy); background: #e6eff3; padding: .15rem .6rem; border-radius: 8px; }
.cls-dt dd { margin: 0; align-self: center; }
.cls-views { margin: .2rem 0 .8rem; }
.cls-day { padding: .5rem 0; border-top: 1px solid var(--line); }
.cls-day.today h3 { color: var(--navy); }
.cls-weeknav h2 { margin: 0; font-size: 1.05rem; }
.pwk-class { border-left: 4px solid #2e8b57; }
.up-class .tag { margin-left: .3rem; }
.tile-classes .cls-list { margin: 0; padding: 0; list-style: none; }
.cls-views a:not(.on) { color: #44545c; }

/* ---- Round 24: My Plan calendar, My Moves ring, Nutrition ---- */
.up-wk { display: flex; width: 100%; margin: 0 0 .7rem; background: #ece9e2; border-radius: 999px; padding: .25rem; gap: .25rem; }
.up-wk[hidden] { display: none; }
.up-wk button { flex: 1 1 0; border: 0; background: transparent; color: var(--navy); border-radius: 999px; min-height: 44px; font-weight: 600; cursor: pointer; }
.up-wk button.on { background: var(--navy); color: #fff; }
.up-wk button:focus-visible { outline: 3px solid var(--blue-text); outline-offset: 2px; }
.js .up-tile[data-wk="0"] [data-w="1"], .js .up-tile[data-wk="1"] [data-w="0"] { display: none !important; }
.up-strip li { flex: 0 0 calc((100% - 2.7rem) / 6.4); }
.up-n { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .4rem; margin-left: .3rem; border-radius: 999px; background: rgba(24, 54, 66, .12); font-size: .85rem; font-weight: 800; line-height: 1; }
.up-seg button.on .up-n { background: rgba(255, 255, 255, .22); }
.up-n.up-red { background: #c62828; color: #fff; }
.up-seg button.on .up-n.up-red { background: #e53935; color: #fff; }
.pm-ring .bar2 { stroke: #b6ffd8; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(0, 0, 0, .35)); }
.pm-ring.ringing .bar, .pm-ring.ringing .bar2 { filter: drop-shadow(0 0 4px rgba(95, 224, 160, .8)); }
.pm-ring.ringed { animation: pm-pop .5s ease-out; }
@keyframes pm-pop { 0% { transform: scale(1); } 45% { transform: scale(1.06); } 100% { transform: scale(1); } }
.pm-days li.on .pm-b { animation: pm-bub .5s ease-out both; }
.pm-days li:nth-child(2).on .pm-b { animation-delay: .08s; }
.pm-days li:nth-child(3).on .pm-b { animation-delay: .16s; }
.pm-days li:nth-child(4).on .pm-b { animation-delay: .24s; }
.pm-days li:nth-child(5).on .pm-b { animation-delay: .32s; }
.pm-days li:nth-child(6).on .pm-b { animation-delay: .40s; }
.pm-days li:nth-child(7).on .pm-b { animation-delay: .48s; }
@keyframes pm-bub { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .pm-ring.ringed, .pm-days li.on .pm-b { animation: none; }
}
/* Nutrition goal */
.nt-goal .ng-name { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: .2rem 0 .9rem; }
.ng-big { font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.nt-goal .ng-tag { font-size: .95rem; padding: .3rem .8rem; }
.ng-rate { font-size: 1.05rem; font-weight: 600; }
.ng-more { border-top: 1px solid rgba(24, 54, 66, .3); }
.ng-more > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 48px; padding: .6rem 0; font-weight: 700; cursor: pointer; color: var(--navy); }
.ng-more > summary::-webkit-details-marker { display: none; }
.ng-more > summary svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.ng-more[open] > summary svg { transform: rotate(180deg); }
.ng-more > summary:focus-visible { outline: 3px solid var(--blue-text); outline-offset: 2px; border-radius: 8px; }
/* Macros Explained: a colour-coded tile on each macro */
.nm-list { gap: .8rem; }
.nm { padding: .9rem 1rem; border-radius: 16px; border: 1px solid var(--line); border-left-width: 8px; }
.nm.nm-p { border-left-color: #3b86a8; background: #eef6fa; }
.nm.nm-c { border-left-color: #d6c3a8; background: #faf6ef; }
.nm.nm-f { border-left-color: #a7c4d2; background: #f1f6f8; }
.nm h3 { margin-top: 0; }
.nm h3 .swatch { position: static; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; margin: 0; }

/* ---- Round 25: client top bar (Chat beside the bell, profile far right) and the phone menu as a bottom sheet ---- */
.js-chatlink { position: relative; }
.mtools .js-chatlink, .pagebell .js-chatlink { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
.pagebell .js-chatlink { color: var(--navy); }
.pagebell .js-chatlink svg { width: 24px; height: 24px; }
.js-chatlink .fbadge { top: 3px; right: 0; margin-right: 0; min-width: 17px; height: 17px; line-height: 17px; font-size: .64rem; padding: 0 4px; box-shadow: 0 0 0 2px var(--navy); }
.pagebell .js-chatlink .fbadge { box-shadow: 0 0 0 2px #f2f2f2; }
.js-chatlink .fbadge[hidden] { display: none; }
.sbgrab { display: none; }
@media (max-width: 820px) {
    .mtools { gap: .05rem; }
    html.clientroot body.clientshell .sidebar, html.clientroot.navc body.clientshell .sidebar {
        top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-width: none; height: auto; max-height: min(82vh, 82dvh);
        border-radius: 26px 26px 0 0; transform: translateY(105%); box-shadow: 0 -12px 40px rgba(0, 0, 0, .3);
        padding: .55rem 1.1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    }
    html.clientroot body.clientshell.menu-open .sidebar { transform: none; }
    html.clientroot body.clientshell .sidebar .sbgrab { display: block; width: 44px; height: 5px; border-radius: 999px; background: rgba(214, 195, 168, .5); margin: 0 auto .5rem; flex: none; }
    html.clientroot body.clientshell .sidebar .sbtop { justify-content: flex-end; margin-bottom: .2rem; min-height: 0; }
    html.clientroot body.clientshell .sidebar .sbtop .logo { display: none; }
    html.clientroot body.clientshell .sidebar .sbtop .sbtools { display: none; }
    html.clientroot body.clientshell .sidebar .sbclose { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -.5rem; }
    html.clientroot body.clientshell .sidebar .sbnav { overscroll-behavior: contain; }
    html.clientroot body.clientshell .sidebar .sbfoot { border-top: 1px solid rgba(214, 195, 168, .25); padding-top: .6rem; }
}
@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
    html.clientroot body.clientshell .sidebar { transition: transform .32s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .32s; }
    html.clientroot body.clientshell.menu-open .sidebar { transition: transform .32s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
}

/* ---- Round 26: class banner on the coach page sits inside the page, not out to the edges ---- */
.cls-coachcover { max-width: 760px; margin: 0 0 1rem; }
.cls-coachcover .cls-hero { margin: 0; border-radius: 16px; }
.cls-coachcover .cls-hero .tile-cover { aspect-ratio: 3 / 1; border-radius: 16px; }
@media (max-width: 820px) { .cls-coachcover .cls-hero .tile-cover { aspect-ratio: 16 / 9; } }

/* ---- Round 27: completed sessions use the Coaching app's green and green tick ---- */
.pwk.pwk-finished { background: #eaf6ec; border-color: #2e8b57; box-shadow: inset 0 0 0 1px #2e8b57; }
.pwk.pwk-finished .pwk-name { color: var(--navy); }
.pwk.pwk-finished .wtile-dur, .pwk.pwk-finished .wtile-sections { color: #4b5d65; }
.pwk.pwk-finished .pwk-move { opacity: 1; }
.pwk .wtile-tick, .playdone-h .wtile-tick { display: inline-flex; vertical-align: -3px; color: #1f7a45; }
.pwk .wtile-tick .ico, .playdone-h .wtile-tick .ico { width: 18px; height: 18px; }
.pwk.pwk-finished .hub-done { color: #1f6b3d; }
.playcard.playdone { background: #eaf6ec; border: 1px solid #2e8b57; box-shadow: inset 0 0 0 1px #2e8b57; }
.playdone-h { margin: 0 0 .5rem; color: var(--navy); }

/* Swipeable tab rows: no visible scroll bar */
.plantabs, .ttabs, nav.tabs { scrollbar-width: none; -ms-overflow-style: none; }
.plantabs::-webkit-scrollbar, .ttabs::-webkit-scrollbar, nav.tabs::-webkit-scrollbar { display: none; width: 0; height: 0; }
.plantabs { padding-bottom: 0; }

/* Top bar icons: one size box each so refresh, chat, bell and profile sit on the same line */
.mtools { align-items: center; }
.mtools > .tool { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0; line-height: 0; vertical-align: middle; }
.mtools > .tool.hdravatar { width: 44px; }
.mtools > .tool .ico, .mtools > .tool > svg { display: block; flex: none; }

/* ---- Round 28: repeating classes and cancelled classes ---- */
.cls-sticker { display: inline-block; padding: .15rem .6rem; border-radius: 999px; background: #c62828; color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; white-space: nowrap; transform: rotate(-3deg); }
li.cls-cxl, .cls-row.cls-cxl, .card.cls-cxl, article.pwk.cls-cxl { background: #fdecea; border-color: #c62828; }
li.cls-cxl { border-radius: 14px; margin: .3rem 0; }
.cls-cxl .cls-title, .cls-cxl .pwk-name, .cls-cxl strong { color: #7a1f1f; }
.cls-cxl .muted, .cls-cxl .wtile-dur, .cls-cxl .cls-when { color: #8a3a36; }
.cls-why { display: block; color: #7a1f1f; font-weight: 600; }
.cls-cxl-box { background: #fdecea; border: 1px solid #c62828; border-radius: 16px; padding: 1rem 1.1rem; margin: 0 0 1rem; color: #7a1f1f; }
.cls-cxl-box p { margin: .25rem 0; }
.cls-cancel { margin: .4rem 0; }
.cls-cancel > summary { display: inline-block; cursor: pointer; list-style: none; }
.cls-cancel > summary::-webkit-details-marker { display: none; }
.cls-cancel[open] > summary { margin-bottom: .6rem; }
.cls-cancel form { padding: .8rem; border: 1px solid #c62828; border-radius: 14px; background: #fff; max-width: 34rem; }
.cls-cancel form textarea { width: 100%; box-sizing: border-box; }
.cls-repeat { margin-top: .6rem; }
.cls-repeat[hidden] { display: none; }
.cls-days { display: flex; flex-wrap: wrap; gap: .3rem .9rem; border: 0; padding: 0; margin: .4rem 0 .8rem; }
.cls-days .check-line { margin: 0; }

/* Group posts: pin is an icon at the top right of the post */
.cg-pinform { margin-left: auto; }
.cg-pin { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #5a6a72; cursor: pointer; }
.cg-pin:hover { background: #f1eee7; }
.cg-pin .ico { width: 22px; height: 22px; }
.cg-pin.on { color: #fff; background: var(--navy); }
.cg-pin:focus-visible { outline: 3px solid var(--blue-text); outline-offset: 2px; }

/* Group page tabs */
.cg-tabwrap:not(.js) .cg-tabs { display: none; }
.cg-tabwrap.js .cg-tabpanel:not(.on) { display: none; }
.cg-tabs { margin-top: .6rem; }

/* + New dropdown: same look as the app's other pop-up menus */
.plusmenu .menu { min-width: 16rem; padding: .4rem; border-radius: 18px; border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(24, 54, 66, .2); }
.plusmenu .menu a { display: flex; align-items: center; gap: .8rem; min-height: 48px; padding: .6rem .9rem; border-radius: 12px; color: var(--navy); font-weight: 700; font-size: 1rem; text-decoration: none; }
.plusmenu .menu a:hover, .plusmenu .menu a:focus-visible { background: #f6f4ef; text-decoration: none; }
.plusmenu .menu a:focus-visible { outline: 3px solid var(--blue-text); outline-offset: -2px; }
.plusmenu .menu a .ico { width: 24px; height: 24px; flex: none; color: #b39a68; }
.plusmenu .menu li + li { margin-top: .1rem; }
.plusmenu .menu button { min-height: 44px; border-radius: 12px; color: var(--navy); font-weight: 700; }

/* Round 28 spacing pass: buttons never touch neighbouring content */
.row-between { row-gap: .7rem; }
.row-between + p, .row-between + .lead, .row-between + .calbar { margin-top: .9rem; }
.cg-board + p, .cg-board + .actions { margin-top: .9rem; }
.calbar { gap: .7rem 1rem; }
.calnav { gap: .5rem; }
.calhead-actions { gap: .6rem; }
.calviews { gap: .25rem; }
.card :where(p, h2, h3, ul, ol, input, select, textarea, .muted, .small) + :where(button, .button),
.logform :where(p, h2, h3, input, select, textarea, label) + :where(button, .button),
.setform :where(p, h2, h3, input, select, textarea, label) + :where(button, .button),
form :where(p, h2, h3, input, select, textarea, label.inline-check) + :where(button, .button) { margin-top: .7rem; }
form button:where(:not(.rf-chip, .rf-tag, .wys-b, .act-star, .act-hide, .tool, .sbclose)) + :where(p, h2, h3, .muted, .small) { margin-top: .8rem; }
.logform > :where(h2, h3) { margin-top: 1.1rem; }
.logform > :where(h2, h3):first-child { margin-top: 0; }
.act-pref { gap: .5rem; }
.rf-quick, .rf-tags { gap: .55rem; }
.wys-bar { gap: .45rem; padding: .5rem; }
section[id^="menus-"] :where(button, .button) { margin-left: .25rem; }
label.tp-ic + :where(button, .button, a.button) { margin-left: .6rem; }
.actions > :where(button, .button) + :where(button, .button) { margin-top: 0; }

.card :where(form, .actions) + :where(p, h2, h3, form, .actions, details, .muted),
main > :where(form, .actions, .rx-head, .row-between) + :where(p, h2, h3, form, .actions) { margin-top: .85rem; }
:where(p, h2, h3, ul, ol) + .actions { margin-top: .7rem; }
form > :where(button, .button) + :where(label, p, .muted, .small),
form > :where(label.inline-check, label.check-line) + .actions { margin-top: .85rem; }
.rx-head { row-gap: .7rem; margin-bottom: .8rem; }
.rx-head + p { margin-top: .5rem; }
.tp-ic { margin-right: .5rem; }
.sa-quick { display: flex; flex-wrap: wrap; gap: .35rem .9rem; align-items: center; margin-top: .8rem; }
.sa-quick button.link { padding: .35rem .2rem; min-height: 36px; }
.sa-days { margin-bottom: .6rem; }
.sa-days + .sa-quick { margin-top: .8rem; }
.availrow + .actions, .sa-quick + .availrow { margin-top: .9rem; }
.availwin input + input { margin-left: .4rem; }
.calcard .calbar + p, .calcard .calnav + p, #taskcal > .muted { margin-top: .9rem; }
.act-item { gap: .5rem; }
.act-list li + li, .act-sec li + li { margin-top: .15rem; }
.ri-del { margin-left: .5rem; }
.wys-bar { gap: .5rem; }
.calhead + p { margin-top: .9rem; }
.calhead { gap: .6rem; }
.ri { column-gap: .6rem; }
form :where(input, select, textarea, label, p) + .actions { margin-top: .8rem; }

/* Round 29: generic tabs across the top of a page */
.tabset:not(.js) > .plantabs { display: none; }
.tabset.js > .tabpanel:not(.on) { display: none; }
.tabset > .plantabs { margin: .6rem 0 .9rem; }
.cls-tabs { margin: .6rem 0 .9rem; }

/* The Clients sheet shares the notification panel's class, so opening Notifications used to slide it up too. */
body.notif-open .clientpanel { transform: translate(-50%, 105%); visibility: hidden; box-shadow: none; }
body.clients-open .notifpanel:not(.clientpanel) { transform: translateX(105%); visibility: hidden; }

/* Round 30: a repeating class is one main entry with its sessions listed smaller underneath */
.cls-series { display: block; padding: .8rem 0; border-top: 1px solid var(--line); }
.cls-sermain { display: flex; align-items: flex-start; gap: .8rem; }
.cls-sermain .grow { display: block; flex: 1; min-width: 0; }
.cls-subs { list-style: none; margin: .7rem 0 0 .2rem; padding: 0 0 0 .9rem; border-left: 2px solid var(--line); display: grid; gap: .35rem; }
.cls-subs li { margin: 0; padding: 0; border: 0; }
.cls-subs li.cls-cxl { border-radius: 10px; }
.cls-sub { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .45rem .7rem; min-height: 40px; border-radius: 10px; background: #f6f4ef; color: inherit; text-decoration: none; font-size: .9rem; }
.cls-sub:hover { background: #efece4; text-decoration: none; }
.cls-subs li.cls-cxl .cls-sub { background: transparent; }
.cls-more { margin: .6rem 0 0 .2rem; }
.cls-more summary { cursor: pointer; padding: .5rem .2rem; min-height: 44px; display: flex; align-items: center; color: var(--blue-text); font-weight: 600; font-size: .9rem; }
.cls-more .cls-subs { margin-top: .3rem; }
ul.cls-list > li.cls-series { display: block; }
.cls-series .cls-subs > li { display: block; }

/* Round 31: what changed in each update */
.up-list > li { align-items: flex-start; gap: .8rem; }
.up-notes { margin: .6rem 0 0; }
.up-notes summary { cursor: pointer; padding: .4rem 0; min-height: 40px; display: flex; align-items: center; color: var(--blue-text); font-weight: 600; }
.up-bullets { margin: .3rem 0 .6rem; padding-left: 1.2rem; }
.up-bullets li { margin: .3rem 0; }
.up-notes p { margin: .4rem 0; overflow-wrap: anywhere; }
.up-list .up-bullets { list-style: disc; margin: .3rem 0 .6rem; padding-left: 1.3rem; }
.up-list .up-bullets > li { display: list-item; border: 0; padding: 0; margin: .35rem 0; }

/* Hosts (Classes and Social Sessions) */
.cls-hosts{color:var(--muted,#5b6b73);font-size:.9rem}
.cls-hostpick{border:0;padding:0;margin:.6rem 0;display:flex;flex-wrap:wrap;gap:.5rem}
.cls-hostchip{position:relative;display:inline-flex;align-items:center;margin:0;cursor:pointer}
.cls-hostchip input{position:absolute;opacity:0;width:1px;height:1px}
.cls-hostchip span{display:inline-block;border:2px solid var(--line,#cfd9dd);border-radius:999px;padding:.4rem .9rem;background:#fff;font-weight:600;min-height:40px;line-height:1.6}
.cls-hostchip input:checked + span{background:#173a45;border-color:#173a45;color:#fff}
.cls-hostchip input:focus-visible + span{outline:3px solid #2b7a9a;outline-offset:2px}
.cls-hostlist li{display:flex;align-items:center;gap:.8rem;justify-content:space-between}

/* Playlists, Hub music card and Random picker */
.pl-list .pl-item{display:flex;align-items:center;gap:.8rem}
.pl-ico{display:inline-flex;width:1.4rem;height:1.4rem;vertical-align:middle}
.pl-ico svg{width:100%;height:100%}
.pl-edit{margin-top:.4rem}
.pl-edit form{margin-top:.5rem}
.hub-music .row-between{align-items:center;gap:.8rem}
.rp-main h2{margin:.2rem 0 .4rem}
.rp-tag{text-transform:uppercase;letter-spacing:.08em;margin:0}
.rp-why{font-weight:600}
.rp-runners li{display:flex;align-items:center;gap:.8rem}
.rp-main .actions{margin-top:.6rem}

/* Progress photos */
.ph-views{margin:.6rem 0}
.ph-up{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.6rem}
.ph-slot{display:flex;flex-direction:column;gap:.3rem;font-weight:600}
.ph-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.ph-pair{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
.ph-fig{margin:0}
.ph-fig img,.ph-blank{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;background:#eef2f4}
.ph-blank{display:flex;align-items:center;justify-content:center;border:2px dashed #c4cfd4;color:#6b7b83;font-size:.85rem;background:transparent}
.ph-fig figcaption{font-size:.85rem;text-align:center;margin-top:.25rem;color:#4d5d65}
.ph-set{padding:.8rem 0;border-top:1px solid #e3e9ec}
.ph-set:first-of-type{border-top:0}
.ph-cmp{margin-top:1rem}
.ph-pick{display:flex;flex-wrap:wrap;gap:.8rem;align-items:flex-end;margin:.5rem 0}
.ph-tip{border-top:1px solid #e3e9ec;padding:.6rem 0}
.ph-tip summary{cursor:pointer}
.ph-tip ul{margin:.5rem 0 0;padding-left:1.2rem}
@media (max-width:560px){.ph-grid{grid-template-columns:repeat(2,1fr)}}

/* Random picker: the launch button (full width, a soft light sweeping across it) and the full-screen picker */
.rn-launch { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: .55rem; row-gap: .1rem; width: 100%; min-height: 66px; padding: .8rem 1.2rem; margin: .2rem 0 1rem; border-radius: 18px; overflow: hidden; isolation: isolate;
    background: linear-gradient(120deg, #183642 0%, #21495a 55%, #183642 100%); color: #fff; text-decoration: none; text-align: center; box-shadow: 0 8px 22px rgba(24, 54, 66, .2); }
.rn-launch:hover { text-decoration: none; color: #fff; box-shadow: 0 10px 26px rgba(24, 54, 66, .28); }
.rn-launch::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 55%; z-index: -1; pointer-events: none; transform: translateX(-120%) skewX(-18deg);
    background: linear-gradient(100deg, rgba(113, 159, 181, 0) 0%, rgba(113, 159, 181, .32) 40%, rgba(214, 195, 168, .26) 62%, rgba(214, 195, 168, 0) 100%); animation: rn-sweep 4.2s ease-in-out infinite; }
.rn-launch .ico { width: 22px; height: 22px; flex: 0 0 auto; }
.rn-launch span { font-size: 1.15rem; font-weight: 800; }
.rn-launch small { flex: 0 0 100%; font-size: .82rem; color: rgba(255, 255, 255, .78); }
.rn-launch:focus-visible { outline: 3px solid #719eb4; outline-offset: 3px; }
@keyframes rn-sweep { 0% { transform: translateX(-120%) skewX(-18deg); } 55%, 100% { transform: translateX(300%) skewX(-18deg); } }

body.rn-lock { overflow: hidden; }
.rn { position: fixed; inset: 0; z-index: 5000; display: flex; flex-direction: column; color: #fff; opacity: 0; transition: opacity .22s ease;
    background: radial-gradient(circle at 85% -10%, rgba(113, 159, 181, .38), rgba(113, 159, 181, 0) 55%), radial-gradient(circle at 0% 105%, rgba(214, 195, 168, .18), rgba(214, 195, 168, 0) 50%), linear-gradient(165deg, #183642 0%, #1d4151 100%); }
.rn[hidden] { display: none; }
.rn.show { opacity: 1; }
.rn-inner { display: flex; flex-direction: column; width: 100%; max-width: 620px; margin: 0 auto; flex: 1 1 auto; min-height: 0; padding: env(safe-area-inset-top) 1rem env(safe-area-inset-bottom); }
.rn-top { display: flex; align-items: center; justify-content: space-between; padding: .9rem 0 .3rem; }
.rn-top h2 { margin: 0; font-size: 1.1rem; letter-spacing: .12em; text-transform: uppercase; color: #d6c3a8; }
.rn-close { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; padding: 0; margin: 0; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; }
.rn-close .ico { display: block; width: 20px; height: 20px; stroke-width: 2.4; }
.rn-close:hover { background: rgba(255, 255, 255, .22); }
.rn-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .4rem 0 1rem; display: flex; flex-direction: column; }
.rn-lead { font-size: 1.5rem; line-height: 1.2; font-weight: 800; margin: .4rem 0 1.2rem; }
.rn-group { border: 0; margin: 0 0 1.2rem; padding: 0; min-width: 0; }
.rn-group legend { padding: 0; margin: 0 0 .5rem; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: rgba(255, 255, 255, .7); }
.rn-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.rn-chip { min-height: 44px; padding: .45rem 1.05rem; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .06); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.rn-chip:hover { background: rgba(255, 255, 255, .14); }
.rn-chip.on { background: #fff; border-color: #fff; color: #183642; }
.rn-chip:focus-visible, .rn-spin:focus-visible, .rn-change:focus-visible, .rn-close:focus-visible { outline: 3px solid #d6c3a8; outline-offset: 2px; }
.rn-count { margin: .2rem 0 0; color: rgba(255, 255, 255, .78); font-size: .92rem; }
.rn-stage { display: flex; flex-direction: column; gap: 1rem; justify-content: center; flex: 1 1 auto; }
.rn-reel { position: relative; height: 12rem; overflow: hidden; border-radius: 20px; background: rgba(255, 255, 255, .06); -webkit-mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent); mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent); transition: opacity .25s ease, transform .25s ease; }
.rn-reel.out { opacity: 0; transform: scale(.96); }
.rn-reel::after { content: ""; position: absolute; left: 6%; right: 6%; top: 4rem; height: 4rem; border-top: 2px solid rgba(214, 195, 168, .65); border-bottom: 2px solid rgba(214, 195, 168, .65); pointer-events: none; }
.rn-reel ul { list-style: none; margin: 0; padding: 0; will-change: transform; }
.rn-reel li { height: 4rem; display: flex; align-items: center; justify-content: center; padding: 0 1.2rem; text-align: center; font-size: 1.45rem; font-weight: 800; line-height: 1.1; overflow: hidden; }
.rn-result { display: flex; flex-direction: column; gap: .9rem; }
.rn-result.in { animation: rn-in .38s cubic-bezier(.2, .8, .2, 1); }
@keyframes rn-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.rn-card { border-radius: 20px; padding: 1.1rem 1.2rem; background: #fff; color: #183642; }
.rn-card h3 { margin: 0 0 .4rem; }
.rn-win { background: #eaf6ec; border: 1px solid #2e8b57; box-shadow: inset 0 0 0 1px #2e8b57; }
.rn-win-h { margin: 0 0 .4rem; color: #183642; }
.rn-win-h .wtile-tick .ico { width: 20px; height: 20px; }
.rn-win-t { font-size: 1.6rem; line-height: 1.15; font-weight: 800; }
.rn-tags { margin: 0 0 .4rem; }
.rn-sum { margin: 0 0 .5rem; color: #4b5d65; }
.rn-why { font-weight: 600; margin: 0 0 .9rem; }
.rn-go { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; font-size: 1.05rem; }
.rn-ru h3 { font-size: 1rem; }
.rn-ru-list { list-style: none; margin: 0; padding: 0; }
.rn-ru-list li { display: flex; align-items: center; gap: .8rem; padding: .6rem 0; border-top: 1px solid #e3e9ec; }
.rn-ru-list li:first-child { border-top: 0; }
.rn-ru-t { flex: 1 1 auto; min-width: 0; }
.rn-ru-t a { color: #183642; }
.rn-ru-t .small { color: #4b5d65; }
.rn-change { align-self: center; background: transparent; border: 0; color: #d6c3a8; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; padding: .5rem 1rem; min-height: 44px; }
.rn-none { text-align: center; }
.rn-foot { padding: .6rem 0 1rem; }
.rn-spin { position: relative; display: flex; align-items: center; justify-content: center; gap: .55rem; width: 100%; min-height: 60px; border: 0; border-radius: 18px; overflow: hidden; isolation: isolate; background: #fff; color: #183642; font: inherit; font-size: 1.15rem; font-weight: 800; cursor: pointer; }
.rn-spin .ico { width: 22px; height: 22px; }
.rn-spin::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 55%; z-index: -1; pointer-events: none; transform: translateX(-120%) skewX(-18deg); background: linear-gradient(100deg, rgba(113, 159, 181, 0), rgba(113, 159, 181, .3) 45%, rgba(214, 195, 168, .35) 65%, rgba(214, 195, 168, 0)); animation: rn-sweep 3.6s ease-in-out infinite; }
.rn-spin:disabled { opacity: .55; cursor: default; }
.rn-spin:disabled::before { animation: none; }
.rn-spin[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
    .rn-launch::before, .rn-spin::before { animation: none; opacity: 0; }
    .rn, .rn-reel { transition: none; }
    .rn-result.in { animation: none; }
}
/* the no-JavaScript Random picker page: the pick looks like a finished workout card */
.rp-main { background: #eaf6ec; border: 1px solid #2e8b57; box-shadow: inset 0 0 0 1px #2e8b57; }

/* Classes, social sessions on the coach calendar; the coach's Today tile; links under the client's events tile */
.calchip.classes .dot { background: #2f6f4d; }
.calchip.social .dot { background: #d9694f; }
.ev-class { background: #dcebe0; color: #1f4d36; border-left: 3px solid #2f6f4d; }
.ev-social { background: #f6ddd5; color: #7a2e22; border-left: 3px solid #d9694f; }
.ev-class.ev-done, .ev-social.ev-done { opacity: .6; }
.gev.ev-class { background: #fff; color: var(--text); border-left-color: #2f6f4d; }
.gev.ev-social { background: #fff; color: var(--text); border-left-color: #d9694f; }
.gev.ev-class.ev-done .gev-name, .gev.ev-social.ev-done .gev-name { text-decoration: line-through; }
@media (max-width: 760px) { .gcal.month .gev.ev-class { background: #2f6f4d; } .gcal.month .gev.ev-social { background: #d9694f; } }
.cls-alllinks a + a { margin-left: 1rem; }

/* Upcoming Classes, Socials, Events tile: 5 rows, then it scrolls inside the tile with "view all" at the end */
.cls-scroll { overflow-y: auto; overscroll-behavior: contain; max-height: 28rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #c9d3d7 transparent; }
.cls-scroll:focus-visible { outline: 3px solid #719eb4; outline-offset: 2px; border-radius: 12px; }
.cls-scroll.can-scroll:not(.at-end) { -webkit-mask-image: linear-gradient(#000 calc(100% - 2.2rem), transparent); mask-image: linear-gradient(#000 calc(100% - 2.2rem), transparent); }
.cls-scroll .cls-list { margin: 0; padding: 0; list-style: none; }
li.cls-end { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; padding: .8rem 0 .3rem; border-top: 1px solid var(--line, #e3e9ec); }
li.cls-end a { font-weight: 700; color: #2b5870; text-decoration: underline; }
.coach-events .cls-att { white-space: nowrap; }

/* Playlist covers */
.pl-thumb { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: #e6eff3; display: block; }
.pl-thumb-none { display: flex; align-items: center; justify-content: center; color: #356984; }
.pl-thumb-none .ico { width: 26px; height: 26px; }
.pl-music { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.pl-music .pl-thumb { flex-basis: 48px; width: 48px; height: 48px; }
.pl-refresh { margin-top: .5rem; }

/* Deck of Cards: coach variation list and form */
.deck-list { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .6rem; }
.deck-list li { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between; align-items: center; padding: .7rem .8rem; border: 1px solid var(--line, #dedbd0); border-radius: 12px; background: #fff; }
.deck-acts { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.deck-acts form { margin: 0; }
.deck-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin: .55rem 0; }
.deck-row input[type=text] { flex: 1 1 14rem; min-width: 0; }
.deck-lbl { min-width: 5.2rem; font-weight: 700; }
.deck-suit { width: 2rem; font-size: 1.6rem; line-height: 1; text-align: center; }
.deck-suit.s-H, .deck-suit.s-D { color: #b3261e; }
.deck-suit.s-C, .deck-suit.s-S { color: #183642; }
.deck-reps { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.deck-reps input { width: 4.5rem; }

/* Chat in the coach's top bar, between Search and Notifications, with its unread count */
.tool.tchat .fbadge { top: -3px; right: -5px; margin-right: 0; box-shadow: 0 0 0 2px #f2f2f2; }
.mbar .tool.tchat .fbadge { box-shadow: 0 0 0 2px var(--navy); }
.tool.tchat.on { background: rgba(214, 195, 168, .22); }

/* Chat: New message, training buddies and clients not on the app in the list */
.ch-newbtn.on { background: rgba(214, 195, 168, .3); }
.ch-grouphead { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .9rem 1.1rem .3rem; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #5a636a); }
.ch-grouphead .ch-link { text-transform: none; letter-spacing: 0; font-size: .85rem; }
a.ch-row.ch-contact { text-decoration: none; color: inherit; }
a.ch-row.ch-contact .ch-av .ico, a.ch-row.ch-contact .ch-av svg { width: 20px; height: 20px; }

/* ---- Round 44: client Sessions page in the Today tile style ---- */
.ss-hero .up-row:first-of-type { padding-top: 0; }
.ss-hero .up-t strong { font-size: 1.35rem; }
.tile-sess .tile-h { color: var(--navy); }
.tile-past .tile-h { color: var(--tan); }
.ss-date { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 14px; background: var(--navy); color: var(--tan); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; }
.ss-date b { font-size: 1.35rem; font-weight: 800; }
.ss-date small { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.ss-past .ss-date { background: #e6eff3; color: var(--navy); }
.ss-past.cls-cxl .ss-date { background: #f6d5d1; color: #8a3a36; }
.tile-sess li.cls-row > .tag, .ss-rebook, .ss-gone { flex: none; }
.ss-rebook { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: 0 .95rem; border-radius: 999px; background: #fff; color: var(--navy); border: 2px solid var(--navy); font-weight: 700; text-decoration: none; white-space: nowrap; }
.ss-rebook:hover { background: var(--navy); color: #fff; text-decoration: none; }
.ss-rebook svg { width: 18px; height: 18px; }
.ss-gone { max-width: 6.5rem; text-align: right; }
.ss-empty { margin: 0; }
.ss-past .cls-sticker { margin-top: .25rem; }
@media (max-width: 420px) { .ss-rebook svg { display: none; } .ss-rebook { padding: 0 .8rem; } .tile-sess li.cls-row > .tag { max-width: 6.5rem; white-space: normal; text-align: center; } }
#ss-tabs .plantabs a { flex: 1 1 0; min-width: 0; padding: .6rem .6rem; gap: .35rem; white-space: nowrap; }
.ss-past.cls-cxl { padding: .6rem; border-radius: 12px; }
@media (max-width: 460px) { #ss-tabs .plantabs a .pt-ico { display: none; } #ss-tabs .plantabs a { font-size: .92rem; padding: .6rem .4rem; } }

/* ---- Round 45: draft / live status pills (coach) and the "New" marker (client menus and lists) ---- */
.st-pill { display: inline-block; padding: .12rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; white-space: nowrap; vertical-align: middle; }
.st-draft { background: #fff4d6; color: #7a5300; box-shadow: inset 0 0 0 1.5px #e0b84a; }
.st-live { background: var(--green-bg); color: var(--green); }
.st-wait { background: #e6eff3; color: #24566b; }
.st-done { background: #ececec; color: #4f5a63; }
.st-cxl { background: #fdecea; color: #a52a22; }
.draft-row { background: repeating-linear-gradient(135deg, #fffaf0 0 10px, #fff 10px 20px); }
.draft-banner { display: flex; gap: .8rem; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: .8rem 1rem; border-radius: 14px; background: #fff4d6; border: 1.5px solid #e0b84a; color: #5c3f00; margin: 0 0 1rem; }
.draft-banner p { margin: 0; }
.draft-banner form { margin: 0; }
.save-choice { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.save-choice .muted { flex-basis: 100%; margin: 0; }
.new-tag { display: inline-block; padding: .02rem .55rem; border-radius: 999px; background: #fff; color: #1d4fd8; border: 1.5px solid #2563eb; font-size: .74rem; font-weight: 700; letter-spacing: .01em; line-height: 1.45; vertical-align: middle; white-space: nowrap; }
.nbadge { display: inline-block; margin-left: auto; padding: .05rem .5rem; border-radius: 999px; background: #2563eb; color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .01em; line-height: 1.45; pointer-events: none; flex: none; }
.sbnav a .nbadge, .nv-sum .nbadge { margin-left: -.55rem; font-size: .68rem; padding: .05rem .5rem; }
.grow > .new-tag, .cls-row .grow .new-tag { align-self: flex-start; }
span.grow > a.cls-title + .new-tag { margin-top: .1rem; }

.nbadge.nb-float { position: absolute; top: 0; left: 50%; margin-left: -32px; padding: 0 .38rem; font-size: .6rem; box-shadow: 0 0 0 2px #fff; }
#bmore, .fnav .fn-sum { position: relative; }
.navc .sbnav a .nbadge { position: absolute; top: 4px; left: 6px; margin: 0; padding: 0 .32rem; font-size: .56rem; }


/* ---- Round 47: nothing sticks out past the screen or its box on a phone ---- */
/* A fieldset is as wide as its widest content by default (min-width: min-content), which pushed the tile picker past its card. */
fieldset { min-width: 0; max-width: 100%; box-sizing: border-box; }
.tilepick, .tp-top, .tp-top > *, .tp-prev, .tp-pic { min-width: 0; max-width: 100%; box-sizing: border-box; }
.tp-prev .rc-img { width: 100%; max-width: 100%; box-sizing: border-box; }
.tp-pic input[type=file] { max-width: 100%; }
img, video, iframe, canvas { max-width: 100%; }
input, select, textarea { max-width: 100%; }
/* The "+ New" menu opens leftwards from its button so it stays on screen when the button is on the right. */
.row-between .plusmenu .menu, .plusmenu.pm-right .menu { left: auto; right: 0; }
@media (max-width: 480px) { .plusmenu .menu { max-width: calc(100vw - 2rem); min-width: 0; width: max-content; } }
.row-between details.plusmenu[open] > :not(summary) { transform-origin: top right; }
.tablewrap { max-width: 100%; -webkit-overflow-scrolling: touch; }
.tablewrap:focus-visible { outline: 3px solid var(--blue-text); outline-offset: 2px; }
/* hidden screen-reader labels inside a table that scrolls sideways must be held by it, or they push the whole page wide */
.tablewrap, .card table, .tablewrap table { position: relative; }

/* ---- Round 48: approve telling clients about training calendar changes ---- */
.pn-card { position: fixed; z-index: 60; right: 1rem; bottom: 1rem; display: flex; align-items: center; gap: .8rem; max-width: min(420px, calc(100vw - 2rem)); box-sizing: border-box; padding: .8rem .9rem .8rem 1rem; background: #fff; border: 1.5px solid #2563eb; border-radius: 18px; box-shadow: 0 10px 30px rgba(24, 54, 66, .25); }
.pn-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #e8efff; color: #1d4fd8; }
.pn-ico svg { width: 22px; height: 22px; }
.pn-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.pn-txt span { color: var(--muted); font-size: .88rem; }
@media (max-width: 820px) { .pn-card { left: 1rem; right: 1rem; bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px)); max-width: none; } }
.pn-dlg { width: min(560px, 94vw); }
.pn-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pn-head h2 { margin: 0; }
.pn-x svg { width: 22px; height: 22px; }
.pn-list { max-height: 55vh; overflow-y: auto; margin: .6rem 0; }
.pn-client { border: 1px solid var(--line); border-radius: 14px; padding: .5rem .9rem .7rem; margin: 0 0 .7rem; }
.pn-client legend { padding: 0 .3rem; }
.pn-lines { list-style: none; margin: .2rem 0 .4rem; padding: 0; }
.pn-lines li { display: flex; gap: .55rem; align-items: flex-start; padding: .3rem 0; }
.pn-lines li svg { flex: none; width: 18px; height: 18px; margin-top: .15rem; color: #1d4fd8; }
.pn-lines li.pn-remove svg { color: #a52a22; }
.pn-note summary { cursor: pointer; color: var(--navy); font-weight: 600; font-size: .9rem; }
.pn-note textarea { width: 100%; box-sizing: border-box; margin-top: .4rem; }
.pn-acts { flex-wrap: wrap; }
.tcal .wtile { padding-right: 2rem; }
.wtile-del { position: absolute; top: .2rem; right: .2rem; margin: 0; z-index: 2; }
.wtile-x { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: #a3a3a3; cursor: pointer; }
.wtile-x svg { width: 16px; height: 16px; }
.wtile-x:hover, .wtile-x:focus-visible { background: #fdecea; color: #a52a22; }
.tcal-wh { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tcal-clear { display: inline-flex; margin: 0; }
.tcal-x { color: #a52a22; }
.tcal-x svg { width: 18px; height: 18px; }
@media (hover: hover) { .wtile .wtile-x { opacity: .55; } .wtile:hover .wtile-x, .wtile-x:focus-visible { opacity: 1; } }
.cls-restore { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid rgba(165, 42, 34, .25); }
.cls-restore .muted { margin: .4rem 0 0; }

/* ---- Round 53: match the exercise library with YMove ---- */
.ymm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.ymm-stats li { background: #f6f4ef; border-radius: 14px; padding: .7rem .8rem; display: flex; flex-direction: column; }
.ymm-stats b { font-size: 1.5rem; color: var(--navy); }
.ymm-stats span { color: var(--muted); font-size: .85rem; }
.ymm-prog { margin: .8rem 0; }
.ymm-bar { height: 10px; border-radius: 999px; background: #e8e4da; overflow: hidden; }
.ymm-bar span { display: block; height: 100%; width: 0; background: var(--navy); transition: width .3s ease; }
.ymm-opts { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: .4rem 0 1rem; }
.ymm-ex { border: 1px solid var(--line); border-radius: 14px; padding: .5rem .9rem .8rem; margin: 0 0 .8rem; }
.ymm-ex legend { padding: 0 .3rem; }
.ymm-cands { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .5rem; margin: .3rem 0 .5rem; }
.ymm-cand { position: relative; display: block; cursor: pointer; }
.ymm-cand input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ymm-card { display: flex; gap: .7rem; align-items: center; padding: .5rem; border: 2px solid var(--line); border-radius: 12px; background: #fff; min-width: 0; }
.ymm-card img, .ymm-noimg { flex: none; width: 72px; height: 72px; border-radius: 10px; object-fit: cover; background: #f1efe9; display: grid; place-items: center; color: var(--muted); }
.ymm-txt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ymm-txt b { line-height: 1.2; }
.ymm-cand input:checked + .ymm-card { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(24, 54, 66, .12); }
.ymm-cand input:focus-visible + .ymm-card { outline: 3px solid var(--blue-text); outline-offset: 2px; }
.ymm-score { display: inline-block; align-self: flex-start; padding: .05rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.ymm-score.hi { background: var(--green-bg); color: var(--green); }
.ymm-score.mid { background: #e6eff3; color: #24566b; }
.ymm-score.lo { background: #f3efe6; color: #6b5a33; }
.ymm-other { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }

/* ---- Round 55: copy a whole week to the next week in the program calendar ---- */
.calweek-copy { margin-left: auto; }
.calweek-copy + form { margin-left: 0; }
.calweek-copy .iconbtn { display: inline-flex; align-items: center; gap: .35rem; width: auto; padding: 0 .7rem; border-radius: 999px; color: var(--navy); }
.calweek-copyt { font-size: .85rem; font-weight: 700; white-space: nowrap; }
@media (max-width: 560px) { .calweek-copyt { display: none; } .calweek-copy .iconbtn { padding: 0; width: 36px; justify-content: center; } }

/* Round 57: workout page. Start Session is a hero tile; the details sit underneath it; the workout itself is under an Overview tab. */
.wo-hero { margin-bottom: .6rem; }
.wo-hero .cap { display: flex; align-items: center; gap: .4rem; position: relative; z-index: 1; }
.wo-hero .cap .wtile-tick { width: 22px; height: 22px; color: var(--tan); }
.wo-hero .up-go { gap: .55rem; min-height: 62px; font-size: 1.15rem; }
.wo-hero .up-go .ico { width: 20px; height: 20px; fill: currentColor; }
.wo-hero .up-go + .up-go { margin-top: .6rem; }
.wo-hero .up-none { font-size: 1.35rem; }
@media (min-width: 700px) { .wo-hero .up-go { width: 100%; } }
.wo-meta { color: var(--muted, #5b6b73); font-weight: 600; margin: 0 0 1rem; padding: 0 .2rem; overflow-wrap: anywhere; }

/* Round 61: training log rows with View results and a delete button that asks first */
.lg-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.lg-row > .grow { flex: 1 1 200px; min-width: 0; }
.lg-row .lg-view { flex: none; white-space: nowrap; }
.lg-row form.lg-del { margin: 0; flex: none; }
.lg-delbtn { width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; color: #a33; box-shadow: none; }
.lg-delbtn:hover, .lg-delbtn:focus-visible { background: #fbeaea; border-color: #e6b3b3; }
.lg-delbtn .ico { width: 20px; height: 20px; }
.lg-dlg { background: #fff; color: var(--text, #183642); border: 0; border-radius: 20px; padding: 1.4rem 1.3rem 1.2rem; max-width: min(420px, calc(100vw - 32px)); box-shadow: 0 18px 50px rgba(24, 54, 66, .3); }
.lg-dlg::backdrop { background: rgba(24, 54, 66, .45); }
.lg-dlg h2 { margin: 0 0 .5rem; font-size: 1.2rem; }
.lg-dlg-what { font-weight: 700; margin: 0 0 .5rem; overflow-wrap: anywhere; }
.lg-dlg-b { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1rem; }

/* Round 62: Progress page, lighter on phones.
   The pathway glow is two soft wide strokes (no blur filter), and cards further down the page are only drawn when scrolled near. */
.jn-glow1 .jn-seg-glow { stroke-width: 26px; opacity: .22; }
.jn-glow2 .jn-seg-glow { stroke-width: 16px; opacity: .35; }
.chartcard, .jn-card + .jn-card, .jn-cards + .jn-card { content-visibility: auto; contain-intrinsic-size: auto 420px; }

/* Round 64: assign clients to a subscription level */
.subfilter { flex-wrap: wrap; margin-bottom: 1rem; }
.sa-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; margin-bottom: 1rem; }
.sa-bar label { margin: 0; }
.sa-bar .inline-check { align-self: center; }
.sa-table .sa-tick { width: 44px; text-align: center; }
.sa-table input[type=checkbox] { width: 20px; height: 20px; }
.sa-table th[scope=row] label { font-weight: 700; cursor: pointer; }

/* ---------------------------------------------------------------- Round 70: Your Week Ahead (full-screen, Sunday evening on Today) */
html.wa-lock, html.wa-lock body { overflow: hidden; }
.wa { position: fixed; inset: 0; z-index: 600; display: flex; flex-direction: column; color: #fff;
    background: linear-gradient(180deg, #183642 0%, #1c4656 38%, #255b6e 72%, #2e6c80 100%); }
.wa[hidden] { display: none; }
.wa.on { animation: wa-fade .35s ease-out both; }
.wa.out { animation: wa-fade-out .24s ease-in both; }
.wa-x { position: absolute; top: calc(env(safe-area-inset-top, 0px) + .6rem); left: .6rem; z-index: 2; margin: 0; }
.wa-x-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.3); background: #1f4757; box-shadow: 0 3px 10px rgba(8, 24, 30, .35); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.wa-x-btn:hover, .wa-x-btn:focus-visible { background: #2b5a6c; }
.wa:focus { outline: none; }
.wa-x-btn svg { width: 22px; height: 22px; }
.wa-in { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding: calc(env(safe-area-inset-top, 0px) + 3.6rem) 1.1rem 1.2rem; display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.wa-in > * { width: 100%; max-width: 520px; }
.wa-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .35rem; padding-bottom: .4rem; }
.wa-cal { width: 84px; height: 84px; flex: none; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wa-cal-body { stroke: #b9dcea; stroke-width: 4; stroke-dasharray: 190; stroke-dashoffset: 190; }
.wa-cal-top { stroke: #b9dcea; stroke-width: 4; stroke-dasharray: 50; stroke-dashoffset: 50; }
.wa-cal-ring { stroke: #fff; stroke-width: 5; stroke-dasharray: 12; stroke-dashoffset: 12; }
.wa-cal-tick { stroke: var(--tan); stroke-width: 6; stroke-dasharray: 34; stroke-dashoffset: 34; }
.wa.on .wa-cal-body { animation: wa-draw .7s ease-out .05s forwards; }
.wa.on .wa-cal-top { animation: wa-draw .35s ease-out .45s forwards; }
.wa.on .wa-cal-ring { animation: wa-draw .3s ease-out .6s forwards; }
.wa.on .wa-cal-tick { animation: wa-draw .4s ease-out .8s forwards; }
.wa-eyebrow { margin: .3rem 0 0; font-size: .78rem; font-weight: 800; letter-spacing: .18em; color: var(--tan); }
.wa-h { margin: 0; font-size: clamp(1.45rem, 6.4vw, 2rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: #fff; }
.wa-range { margin: 0; font-weight: 700; color: rgba(255,255,255,.78); }
.wa-chips { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.wa-chip { padding: .3rem .7rem; border-radius: 999px; font-size: .82rem; font-weight: 800; background: var(--wa-bg); color: var(--wa-fg); }
[data-wa-anim] { opacity: 0; }
.wa.on [data-wa-anim] { animation: wa-rise .45s ease-out var(--d, .4s) both; }
.wa-day { background: #fff; color: var(--navy); border-radius: 18px; padding: .85rem .9rem .9rem; box-shadow: 0 6px 18px rgba(8, 24, 30, .18); }
.wa-dh { margin: 0 0 .55rem; display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; font-size: 1.05rem; font-weight: 800; }
.wa-dh small { font-size: .82rem; font-weight: 700; color: var(--muted); }
.wa-empty { margin: 0; color: var(--muted); font-size: .9rem; }
/* a day with nothing on is one slim line */
.wa-rest { padding: .7rem .9rem; background: rgba(255,255,255,.9); display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .8rem; }
.wa-rest .wa-dh { margin: 0; flex: 1 1 auto; justify-content: flex-start; }
.wa-loose { border: 2px dashed #9cc3d3; }
.wa-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.wa-it > a, .wa-it > div { display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem; border-radius: 13px; background: var(--wa-bg); color: var(--navy); text-decoration: none; border-left: 4px solid var(--wa-fg); }
.wa-it > a:hover, .wa-it > a:focus-visible { filter: brightness(.97); text-decoration: none; }
.wa-ic { width: 36px; height: 36px; flex: none; border-radius: 11px; background: var(--wa-fg); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.wa-ic svg { width: 19px; height: 19px; }
.wa-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .05rem; }
.wa-tx strong { font-size: .97rem; line-height: 1.25; overflow-wrap: anywhere; }
.wa-tx small { color: #4d5a61; font-size: .82rem; font-weight: 600; }
.wa-tag { align-self: flex-start; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--wa-fg); }
.wa-go { color: var(--wa-fg); display: inline-flex; flex: none; }
.wa-go svg { width: 18px; height: 18px; }
.wa-k-workout { --wa-fg: #2f6f8f; --wa-bg: #e3eff5; }
.wa-k-session { --wa-fg: #8a6326; --wa-bg: #f4ebdc; }
.wa-k-class { --wa-fg: #6a4c93; --wa-bg: #eee7f6; }
.wa-k-social { --wa-fg: #2f6f4d; --wa-bg: #dfefe5; }
.wa-k-checkin { --wa-fg: #b0522a; --wa-bg: #f9e8de; }
.wa-k-event { --wa-fg: #a63f5f; --wa-bg: #f7e2e9; }
.wa-k-mealprep { --wa-fg: #1f7472; --wa-bg: #dcf0ef; }
.wa-k-habit { --wa-fg: #183642; --wa-bg: #e8dfcf; }
.wa-k-request { --wa-fg: #9a6a12; --wa-bg: #fbefd6; }
.wa-k-task { --wa-fg: #45596a; --wa-bg: #e6ecf0; }
.wa-k-blocked { --wa-fg: #6b737a; --wa-bg: #eceeef; }
.wa-hlist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.wa-hlist li { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem .35rem .4rem; border-radius: 999px; background: var(--tan-light); font-weight: 700; font-size: .9rem; }
.wa-hdot { width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.wa-hdot svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wa-none { text-align: center; }
.wa-none .wa-dh { justify-content: center; }
.wa-foot { flex: none; padding: .8rem 1.1rem calc(.6rem + env(safe-area-inset-bottom, 0px)); display: grid; gap: .55rem; width: 100%; max-width: 552px; margin: 0 auto;
    animation: wa-rise .45s ease-out .5s both; }
.wa-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px; border-radius: 16px; font-weight: 800; font-size: 1rem; text-decoration: none;
    background: rgba(255,255,255,.14); color: #fff; border: 1.5px solid rgba(255,255,255,.4); }
.wa-btn svg { width: 20px; height: 20px; }
.wa-btn:hover, .wa-btn:focus-visible { background: rgba(255,255,255,.22); text-decoration: none; color: #fff; }
.wa-btn-main { background: #fff; color: var(--navy); border-color: #fff; }
.wa-btn-main:hover, .wa-btn-main:focus-visible { background: #f1ede5; color: var(--navy); }
.wa-got { margin: 0; text-align: center; }
.wa-got-btn { background: none; border: 0; color: #fff; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; padding: .45rem 1rem; cursor: pointer; min-height: 40px; }
@keyframes wa-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wa-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes wa-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes wa-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    .wa.on, .wa.out, .wa.on [data-wa-anim], .wa-foot, .wa.on .wa-cal-body, .wa.on .wa-cal-top, .wa.on .wa-cal-ring, .wa.on .wa-cal-tick { animation: none; }
    [data-wa-anim] { opacity: 1; }
    .wa-cal-body, .wa-cal-top, .wa-cal-ring, .wa-cal-tick { stroke-dashoffset: 0; }
}
@media print { .wa { display: none !important; } }

/* Round 71: the "Your Week Ahead" tile at the top of Today and the Dashboard (Sunday 3pm to Monday midday).
   A light tile so it stands apart from the white cards and the navy hero, with a slowly moving gradient border and a soft glow. */
.wa-tile { position: relative; display: flex; align-items: center; gap: .9rem; width: 100%; box-sizing: border-box; margin: .3rem 0 1.1rem; padding: .95rem 1rem .95rem .95rem;
    border-radius: 18px; border: 2px solid transparent; color: var(--navy); text-decoration: none;
    background: linear-gradient(135deg, #f6fbfd 0%, #e6f2f8 55%, #f7f0e5 100%) padding-box,
        linear-gradient(110deg, #8fc3d8 0%, #ffffff 25%, #d6c3a8 50%, #ffffff 75%, #8fc3d8 100%) border-box;
    background-size: 100% 100%, 300% 100%;
    box-shadow: 0 4px 14px rgba(24, 54, 66, .08);
    animation: wa-tile-in .5s ease-out both, wa-border 5s ease-in-out infinite alternate, wa-glow 3.2s ease-in-out .5s infinite; }
.wa-tile:hover, .wa-tile:focus-visible { text-decoration: none; color: var(--navy); transform: translateY(-1px); }
.wa-tile:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.wa-tile-ic { width: 50px; height: 50px; flex: none; border-radius: 14px; background: var(--navy); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(24, 54, 66, .25); }
.wa-tile-ic svg { width: 30px; height: 30px; fill: none; stroke: #cfe6f0; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.wa-tile-ic svg .t { stroke: var(--tan); stroke-width: 6; stroke-dasharray: 34; stroke-dashoffset: 34; animation: wa-draw .5s ease-out .45s forwards; }
.wa-tile-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .05rem; }
.wa-tile-eye { font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--tan-text); }
.wa-tile-tx strong { font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.wa-tile-tx small { font-size: .85rem; font-weight: 600; color: #4f6470; }
.wa-tile-go { width: 34px; height: 34px; flex: none; border-radius: 50%; background: #fff; color: var(--navy); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(24, 54, 66, .12); animation: wa-nudge 3.2s ease-in-out 1s infinite; }
.wa-tile-go svg { width: 18px; height: 18px; }
@keyframes wa-tile-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes wa-border { from { background-position: 0 0, 0% 50%; } to { background-position: 0 0, 100% 50%; } }
@keyframes wa-glow { 0%, 100% { box-shadow: 0 4px 14px rgba(24, 54, 66, .08), 0 0 0 0 rgba(113, 159, 181, 0); } 50% { box-shadow: 0 4px 14px rgba(24, 54, 66, .08), 0 0 18px 3px rgba(113, 159, 181, .45); } }
@keyframes wa-nudge { 0%, 70%, 100% { transform: none; } 80% { transform: translateX(3px); } 90% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .wa-tile, .wa-tile-go, .wa-tile-ic svg .t { animation: none; }
    .wa-tile-ic svg .t { stroke-dashoffset: 0; }
    .wa-tile { box-shadow: 0 0 0 3px rgba(113, 159, 181, .25), 0 4px 14px rgba(24, 54, 66, .08); }
}
@media print { .wa-tile { display: none !important; } }


/* ---------------------------------------------------------------- Round 72: time before and after a class / social session */
.buf-h { margin: 1.1rem 0 .2rem; font-size: 1rem; }
.buf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .4rem 1.2rem; margin-top: .5rem; }
.buf-field label { margin-bottom: .35rem; }
.buf-row { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.buf-in { position: relative; display: inline-flex; align-items: center; }
.buf-in input { width: 6.5rem; padding-right: 2.6rem; margin: 0; font-variant-numeric: tabular-nums; }
.buf-unit { position: absolute; right: .7rem; color: var(--muted); font-size: .85rem; font-weight: 600; pointer-events: none; }
.buf-add { border-radius: 999px; border: 1.5px solid var(--blue); background: #eef6fa; color: var(--navy); font-weight: 800; padding: .45rem .85rem; min-height: 40px; cursor: pointer; }
.buf-add:hover, .buf-add:focus-visible { background: #dcecf3; }
.buf-clear { border: 0; background: none; color: var(--muted); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; padding: .45rem .3rem; min-height: 40px; cursor: pointer; }
.buf-field small { display: block; margin-top: .3rem; }
.buf-bump { animation: buf-bump .35s ease-out; }
@keyframes buf-bump { 0% { box-shadow: 0 0 0 0 rgba(113, 159, 181, .6); } 100% { box-shadow: 0 0 0 8px rgba(113, 159, 181, 0); } }
.buf-sum { margin: .6rem 0 0; padding: .6rem .8rem; border-radius: 12px; background: #eef6fa; color: var(--navy); font-weight: 600; font-size: .9rem; }
.buf-sum:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .buf-bump { animation: none; } }
.cf-card { max-width: 640px; border-top: 5px solid #c9822b; }
.cf-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .4rem; }
.cf-ic { width: 46px; height: 46px; flex: none; border-radius: 14px; background: #fbeed9; color: #a1611a; display: inline-flex; align-items: center; justify-content: center; }
.cf-ic svg { width: 26px; height: 26px; }
.cf-eyebrow { margin: 0; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #a1611a; }
.cf-h { margin: 0; font-size: 1.45rem; }
.cf-lead { margin: .4rem 0 .8rem; }
.cf-day { font-size: .95rem; margin: 1rem 0 .4rem; }
.cf-list { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .45rem; }
.cf-list li { display: flex; flex-direction: column; gap: .05rem; padding: .6rem .8rem; border-radius: 12px; background: #fbf4e8; border-left: 4px solid #c9822b; }
.cf-kind { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #a1611a; }
.cf-list small { color: var(--muted); font-weight: 600; }
.cf-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.cf-actions .button { flex: 1 1 220px; display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; box-sizing: border-box; margin: 0; }
/* Round 73: the daily snapshot tile is a touch warmer than the weekly one */
.wa-tile.wa-tile-day { background: linear-gradient(135deg, #fbf8f2 0%, #f3ebdd 55%, #e9f3f7 100%) padding-box,
    linear-gradient(110deg, #d6c3a8 0%, #ffffff 25%, #8fc3d8 50%, #ffffff 75%, #d6c3a8 100%) border-box; background-size: 100% 100%, 300% 100%; }



/* Round 78: the app updates itself ("Updating" screen, then a small "Updated" note on the same page) */
.upd-splash { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; background: #183642; color: #fff; text-align: center; animation: upd-in .25s ease-out both; }
.upd-splash strong { font-size: 1.4rem; font-weight: 800; letter-spacing: -.01em; }
.upd-splash small { color: rgba(255,255,255,.75); font-weight: 600; }
.upd-spin { width: 42px; height: 42px; border-radius: 50%; border: 4px solid rgba(255,255,255,.2); border-top-color: #d6c3a8; animation: upd-spin .8s linear infinite; margin-bottom: .4rem; }
.upd-done { position: fixed; left: 50%; top: calc(14px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 9000; background: #183642; color: #fff; font-weight: 700; font-size: .9rem; padding: .55rem 1rem; border-radius: 999px; box-shadow: 0 6px 18px rgba(24,54,66,.25); animation: upd-in .3s ease-out both; white-space: nowrap; }
.upd-done.out { opacity: 0; transition: opacity .35s ease; }
@keyframes upd-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes upd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .upd-splash, .upd-done { animation: none; } .upd-spin { animation-duration: 2.4s; } }
/* Round 80: training alerts on/muted for one client (coach's Training log page) */
.mute-row { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; }
.mute-row .grow { flex: 1; min-width: 0; }
.mute-ic svg { width: 1.6rem; height: 1.6rem; color: var(--navy, #183642); }
.mute-row .button { flex: none; }
/* Round 81: habits linked to training */
.habit-add { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin: .5rem 0; }
.habit-add .hl-f { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 14rem; min-width: 0; font-weight: 600; font-size: .9rem; }
.habit-add .hl-f select, .habit-add .hl-f input { width: 100%; }
.hl-row { display: flex; align-items: center; gap: .35rem; margin-top: .35rem; }
.hl-row select { max-width: 18rem; font-size: .85rem; padding: .25rem .4rem; min-height: 2rem; }
.hl-ic svg, .hl-txt svg { width: .95rem; height: .95rem; flex: none; }
.hl-ic { color: var(--muted, #5a636a); display: inline-flex; }
.hl-txt { display: flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 500; color: var(--muted, #5a636a); margin-top: .15rem; }
.done .hl-txt { text-decoration: none; }
/* the "Habit complete" pop-up */
.hpop { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(12, 32, 40, .55); opacity: 0; transition: opacity .25s ease; }
.hpop.on { opacity: 1; }
.hpop[hidden] { display: none; }
.hpop-box { background: #fff; border-radius: 22px; width: min(24rem, 100%); padding: 1.6rem 1.4rem 1.2rem; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.25); transform: translateY(18px) scale(.96); transition: transform .35s cubic-bezier(.2,.9,.3,1.2); }
.hpop.on .hpop-box { transform: none; }
.hpop-badge { width: 4.2rem; height: 4.2rem; margin: 0 auto .7rem; border-radius: 50%; background: #2f8f5b; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 8px rgba(47,143,91,.15); }
.hpop-badge svg { width: 2.3rem; height: 2.3rem; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; }
.hpop.on .hpop-badge svg { animation: hpop-draw .5s .2s ease forwards; }
@keyframes hpop-draw { to { stroke-dashoffset: 0; } }
.hpop-box h2 { margin: 0 0 .3rem; font-size: 1.35rem; color: var(--navy, #183642); }
.hpop-box p { margin: 0 0 .8rem; color: var(--muted, #5a636a); }
.hpop-list { list-style: none; padding: 0; margin: 0 0 1.1rem; display: grid; gap: .4rem; }
.hpop-list li { background: #eef6f1; color: #1f6b43; border-radius: 12px; padding: .55rem .8rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; justify-content: center; }
.hpop-list li svg { width: 1.1rem; height: 1.1rem; }
.hpop-ok { width: 100%; min-height: 3rem; border-radius: 14px; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .hpop, .hpop-box { transition: none; } .hpop.on .hpop-badge svg { animation: none; stroke-dashoffset: 0; } }
/* Round 82: sessions the client puts on their own calendar */
.pwk.cplan { border-left: 4px solid #6a8caf; background: #f4f7fb; display: flex; align-items: center; gap: .6rem; }
.pwk.cplan .pwk-main { flex: 1; min-width: 0; }
.pwk.cplan-done { border-left-color: #2f8f5b; background: #f1f8f4; }
.cplan-ic { display: inline-flex; width: 2.1rem; height: 2.1rem; flex: none; border-radius: 10px; background: #fff; align-items: center; justify-content: center; }
.cplan-ic svg { width: 1.35rem; height: 1.35rem; }
.cplan-tag { background: #dfe8f2; color: #2c4f73; }
.cplan-rep { display: inline-flex; vertical-align: middle; color: #5a636a; }
.cplan-rep svg { width: .9rem; height: .9rem; }
.cplan-log { flex: none; }
.up-add { display: flex; justify-content: flex-end; margin: .25rem 0 .6rem; }
.up-add .button { display: inline-flex; align-items: center; gap: .35rem; }
.up-add svg { width: 1rem; height: 1rem; }
.cplan-kind, .cplan-scope { border: 0; padding: 0; margin: 0 0 .9rem; display: grid; gap: .5rem; }
.cplan-kind legend, .cplan-scope legend { font-weight: 700; margin-bottom: .35rem; }
.cplan-opt { display: flex; gap: .6rem; align-items: flex-start; border: 1.5px solid rgba(24,54,66,.15); border-radius: 12px; padding: .65rem .8rem; cursor: pointer; }
.cplan-opt:has(input:checked) { border-color: #183642; background: #f4f7f8; }
.cplan-opt span { display: flex; flex-direction: column; }
.cplan-opt small { color: var(--muted, #5a636a); }
.cplan-head { display: flex; gap: .8rem; align-items: center; }
.cplan-head .grow { flex: 1; min-width: 0; }
.cplan-head h2 { margin: 0 0 .2rem; }
.cplan-date { margin: 0 0 .15rem; }
.cplan-note { background: #f7f5f0; border-radius: 10px; padding: .6rem .8rem; }
.cplan-acts { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.cplan-logbig { min-width: 12rem; }
.tcal .pwk.cplan, .wkcell .pwk.cplan { padding: .45rem .5rem; font-size: .85rem; margin: .3rem 0; border-radius: 10px; }
.wkcell .cplan-ic { width: 1.6rem; height: 1.6rem; }
.wa-k-mine { --wa-fg: #2c4f73; --wa-bg: #dfe8f2; }
/* Round 84: Workout Log */
.sl-form { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end; }
.sl-name { flex: 1 1 14rem; display: flex; flex-direction: column; gap: .25rem; font-weight: 600; }
.sl-name input { width: 100%; }
.sl-go { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.9rem; padding: 0 1.2rem; }
.sl-go svg { width: 1.1rem; height: 1.1rem; }
.sl-saved { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.sl-w { display: flex; gap: .7rem; align-items: flex-start; justify-content: space-between; border: 1.5px solid rgba(24,54,66,.12); border-radius: 14px; padding: .75rem .85rem; flex-wrap: wrap; }
.sl-w-main { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 12rem; min-width: 0; }
.sl-w-name { font-size: 1.05rem; }
.sl-w-ex { color: var(--muted, #5a636a); overflow: hidden; text-overflow: ellipsis; }
.sl-w-acts { display: flex; gap: .4rem; align-items: flex-start; flex-wrap: wrap; }
.sl-more { position: relative; }
.sl-more > summary { list-style: none; cursor: pointer; }
.sl-more > summary::-webkit-details-marker { display: none; }
.sl-more-p { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .4rem; }
.sl-rename { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.sl-rename input { min-width: 0; flex: 1 1 10rem; }
.sl-rec { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.qa-btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.qa-btns .qa-go { flex: 1 1 10rem; justify-content: center; }
.hpop-list li svg { stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cplan-wk { display: flex; align-items: center; gap: .7rem; background: #f4f7fb; border-radius: 12px; padding: .7rem .8rem; margin: 0 0 .8rem; }
.cplan-wk span:last-child { display: flex; flex-direction: column; }
.cplan-wk small { color: var(--muted, #5a636a); font-weight: 600; }
/* Round 85: calendar tiles — the client's own sessions with the icon on the left, edit and delete icons, and the per-day add button */
.pday .pwk.cplan, .tcal .pwk.cplan, .wkcell .pwk.cplan { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .3rem .75rem; text-align: left; flex-direction: row; }
.pwk.cplan .cplan-ic { grid-column: 1; grid-row: 1; align-self: center; }
.pwk.cplan .cplan-main { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; text-align: left; }
.pwk.cplan .pwk-name { text-align: left; }
.pwk.cplan .cal-acts { grid-column: 3; grid-row: 1; position: static; }
.pwk.cplan .cplan-log { grid-column: 1 / -1; grid-row: 2; width: 100%; justify-content: center; }
.cplan-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.cplan-when { color: var(--tan-text, #9a7b4f); font-weight: 700; font-size: .9rem; }
.cal-acts { display: inline-flex; gap: .25rem; align-items: center; }
.pwk-class .cal-acts { position: absolute; top: .55rem; right: .55rem; }
.pwk-class .pwk-main { padding-right: 4.8rem; }
.cal-act { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 10px; background: #f1efe9; color: var(--navy, #183642); border: 0; padding: 0; cursor: pointer; }
.cal-act svg { width: 1.05rem; height: 1.05rem; }
.cal-act.danger { color: #a63f3f; }
.cal-act:hover, .cal-act:focus-visible { background: #e6e1d6; }
.cal-add { display: flex; width: 100%; justify-content: center; align-items: center; gap: .4rem; margin-top: .4rem; min-height: 2.75rem; border-style: dashed; }
.cal-add svg { width: 1.05rem; height: 1.05rem; }
/* Upcoming Training on Today: the "My plan" tag sits beside the name, not across the tile */
.upcoming .up-t .tag { justify-self: start; width: auto; margin: .35rem 0 0; }
.upcoming.hero .up-t .tag.cplan-tag { background: #dfe8f2; color: #2c4f73; }
/* Round 85: Workout Tracker — the top matches the workout player's start page */
.wt-hero { background: #183642; color: #fff; border-radius: 0 0 28px 28px; margin: -1rem -1rem 3rem; padding: 1.4rem 1.1rem 2.6rem; text-align: center; position: relative; }
.wt-form { margin: 0; }
.wt-eyebrow { color: #d4c4a8; font-size: 1.05rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 .35rem; }
.wt-name { display: block; width: 100%; background: transparent; border: 0; border-bottom: 2px dashed rgba(255,255,255,.25); border-radius: 0; color: #fff; font: inherit; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; text-align: center; padding: .15rem .2rem .3rem; }
.wt-name:focus { outline: none; border-bottom-color: #d4c4a8; }
.wt-sub { color: rgba(255,255,255,.85); margin: .6rem 0 0; font-size: .95rem; }
.wt-start { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); min-width: 200px; min-height: 60px; padding: 0 2rem; border-radius: 999px; background: #d4c4a8; color: #183642; font-weight: 800; font-size: 1.7rem; border: 0; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.wt-start:active { background: #c8b392; }
.wt-tabs { display: flex; margin: 0 0 1rem; }
.wt-tabs a { flex: 1; text-align: center; text-decoration: none; display: inline-flex; justify-content: center; align-items: center; gap: .35rem; }
.sl-w-acts .button svg { width: 1rem; height: 1rem; vertical-align: -2px; }
@media (min-width: 900px) { .wt-hero { margin: 0 0 3rem; border-radius: 28px; } }
.wt-hero input.wt-name { background: transparent !important; border: 0 !important; border-bottom: 2px dashed rgba(255,255,255,.3) !important; border-radius: 0 !important; box-shadow: none !important; color: #fff !important; min-height: 0; }
.wt-hero input.wt-name:focus { border-bottom-color: #d4c4a8 !important; }
.sl-w-acts { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: .45rem; width: 100%; align-items: stretch; }
.sl-w-acts > form, .sl-w-acts > details { display: contents; }
.sl-w-acts > form > button, .sl-w-acts > a, .sl-w-acts > details > summary { display: flex; align-items: center; justify-content: center; gap: .35rem; min-height: 2.6rem; width: 100%; margin: 0; white-space: nowrap; box-sizing: border-box; }
.sl-w-acts > details > .sl-more-p { grid-column: 1 / -1; }
.wt-hero input.wt-name { font-size: 1.6rem !important; font-weight: 800 !important; text-align: center !important; padding: .2rem .2rem .35rem !important; width: 100% !important; }
.sl-w-acts > form > button.small { width: 100% !important; max-width: none !important; border-radius: 999px !important; padding: 0 .8rem !important; aspect-ratio: auto !important; height: auto !important; }
.sl-w-acts > form.inline, .sl-w-acts > details.sl-more { display: contents !important; }
.sl-w-acts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr) minmax(0, 1fr); }
/* Round 86: the hero meets the header with no gap; the name sits between the Start button and the tabs */
.wt-hero { margin-top: -1.2rem; padding-top: 1.6rem; margin-bottom: 2.6rem; }
.wt-start { font-size: 1.35rem; min-width: 240px; white-space: nowrap; }
.wt-namebox { display: flex; flex-direction: column; gap: .3rem; margin: 0 0 1.1rem; }
.wt-namel { font-weight: 700; color: var(--navy, #183642); font-size: .95rem; }
input.wt-name { width: 100%; min-height: 3rem; font-size: 1.15rem !important; font-weight: 700; color: var(--navy, #183642); text-align: center; border-radius: 14px; }
/* Round 87: training linked to a milestone */
.jt-train { border: 1px solid var(--line, #e5e5e5); border-radius: 12px; padding: .6rem .8rem; margin: .4rem 0; }
.jt-train > summary { cursor: pointer; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.jt-groups { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: .5rem 0; }
.jt-grp { border: 0; margin: 0; padding: 0; display: grid; gap: .25rem; max-height: 14rem; overflow: auto; }
.jt-grp legend { font-weight: 700; font-size: .85rem; margin-bottom: .25rem; }
.jt-opt { display: flex; gap: .45rem; align-items: flex-start; font-weight: 400; font-size: .9rem; }
.jt-target { max-width: 22rem; }
.ms-train { display: flex; align-items: center; gap: .4rem; font-size: .85rem; margin: .35rem 0 0; }
/* Round 88: My Moves keeps planned sessions (green) apart from other sessions (blue badge) */
.pm-b { position: relative; }
.pm-ob { position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #8fc3ff; color: #183642; font-style: normal; font-size: .68rem; font-weight: 800; display: grid; place-items: center; border: 2px solid #46758d; box-sizing: border-box; }
.pm-other { display: flex; align-items: flex-start; gap: .55rem; margin: .2rem 0 .9rem; padding: .55rem .7rem; border-radius: 12px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.9); font-size: .9rem; line-height: 1.35; }
.pm-other b { font-size: 1.05rem; }
.pm-other:not(.on) { opacity: .75; }
.pm-odot { width: 12px; height: 12px; border-radius: 50%; background: #8fc3ff; flex: none; margin-top: .3rem; }
.pm-onote { color: rgba(255,255,255,.75); }
.pm-key { display: flex; gap: 1rem; justify-content: flex-end; margin: .4rem 0 0; font-size: .75rem; color: rgba(255,255,255,.8); }
.pm-key span { display: inline-flex; align-items: center; gap: .35rem; }
.pm-key i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.pm-key .k-plan { background: #5fe0a0; }
.pm-key .k-oth { background: #8fc3ff; }
.pm-cap strong { font-weight: 700; }
/* Round 90: edit and delete icons sit level (the delete button is inside a form, which carried its own spacing) */
.cal-acts { align-items: center; line-height: 0; }
.cal-acts > form, .cal-acts > form.inline { display: inline-flex !important; margin: 0 !important; padding: 0 !important; }
.cal-acts .cal-act, .cal-acts button.cal-act { margin: 0 !important; width: 2.1rem !important; height: 2.1rem !important; min-height: 0 !important; min-width: 0 !important; padding: 0 !important; box-shadow: none; vertical-align: middle; }
/* Round 91: the Training this week tile has the same gap above it as the tiles above */
.jn-train { margin-top: .6rem; }
/* Round 93: weekly snapshot link at the bottom of Upcoming Training (Monday midday to Saturday night) */
.upcoming .up-wa { display: flex; align-items: center; gap: .5rem; margin-top: .9rem; padding-top: .85rem; border-top: 1px solid rgba(255,255,255,.14); color: #d4c4a8; font-weight: 700; text-decoration: none; }
.upcoming .up-wa svg { width: 1.1rem; height: 1.1rem; flex: none; }
.upcoming .up-wa svg:last-child { margin-left: auto; fill: none; stroke: currentColor; stroke-width: 2; }
.upcoming:not(.hero) .up-wa { color: var(--navy, #183642); border-top-color: var(--line, #e5e5e5); }

/* Round 94: a light hero tile (the Week Ahead tile's look) for the Add Activity section on Today.
   Soft blue-to-tan background and a slowly moving gradient border, with no pulsing glow so it sits calmly under the navy hero. */
.card.hero-light { position: relative; border: 2px solid transparent; color: var(--navy);
    background: linear-gradient(135deg, #f6fbfd 0%, #e6f2f8 55%, #f7f0e5 100%) padding-box,
        linear-gradient(110deg, #8fc3d8 0%, #ffffff 25%, #d6c3a8 50%, #ffffff 75%, #8fc3d8 100%) border-box;
    background-size: 100% 100%, 300% 100%;
    box-shadow: 0 6px 18px rgba(24, 54, 66, .10);
    animation: wa-border 5s ease-in-out infinite alternate; }
.hero-light .tile-h { color: var(--navy); }
.hero-light .qa-lead, .hero-light .qa-sub { color: #4f6470; }
.hero-light .act-logrow { border-color: rgba(24, 54, 66, .10); box-shadow: 0 1px 3px rgba(24, 54, 66, .05); }
.hero-light .qa-log { background: #fff; }
@media (prefers-reduced-motion: reduce) { .card.hero-light { animation: none; } }

/* Round 95: pull down to refresh (assets/pullrefresh.js). A round button slides out from under the top bar as you pull;
   it turns navy when a release will refresh, and spins while the page reloads. */
.ptr { --ptr-y: 0px; --ptr-turn: 0deg; --ptr-o: 0; position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 56px); z-index: 35;
    display: flex; flex-direction: column; align-items: center; gap: .45rem; pointer-events: none; opacity: 0;
    transform: translateY(calc(var(--ptr-y) - 24px)); }
.ptr.on, .ptr.going { opacity: var(--ptr-o); }
.ptr.back { transition: transform .22s ease, opacity .22s ease; }
.ptr-ball { width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--navy); display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(24, 54, 66, .22); transition: background .15s ease, color .15s ease, transform .15s ease; }
.ptr-ball svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transform: rotate(var(--ptr-turn)); }
.ptr.armed .ptr-ball { background: var(--navy); color: #fff; transform: scale(1.08); }
.ptr.held .ptr-ball { background: var(--tan); color: var(--navy); }
.ptr-tx { font-size: .8rem; font-weight: 700; color: var(--navy); background: rgba(255, 255, 255, .92); border-radius: 999px; padding: .15rem .65rem; box-shadow: 0 2px 6px rgba(24, 54, 66, .12); }
.ptr-tx:empty { display: none; }
.ptr.going { opacity: 1; }
.ptr.going .ptr-ball { background: var(--navy); color: #fff; }
.ptr.going .ptr-ball svg { animation: refspin .7s linear infinite; }
.ptr-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ptr.back, .ptr-ball { transition: none; } .ptr.going .ptr-ball svg { animation: none; } }
@media print { .ptr { display: none !important; } }

/* Round 96: the workout builder's Alternate exercises picker (search the library, suggestions, create a custom exercise). */
.wbalt { display: grid; gap: .6rem; }
.wbaltchips { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 2rem; align-items: center; }
.wbaltchip { display: inline-flex; align-items: center; gap: .3rem; background: #e6f2f8; color: var(--navy); border: 1px solid #b9d9e8; border-radius: 999px; padding: .2rem .25rem .2rem .7rem; font-weight: 700; font-size: .88rem; max-width: 100%; }
.wbaltchip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbaltx { width: 26px; height: 26px; border-radius: 50%; border: 0; background: transparent; color: var(--navy); display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; flex: none; }
.wbaltx:hover { background: #fff; }
.wbaltx svg { width: 14px; height: 14px; }
.wbaltnone { margin: 0; }
.wbaltq { width: 100%; }
.wbaltlist { max-height: min(52vh, 26rem); overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--line); }
.wbaltlist .wbexhead { margin: .6rem 0 .1rem; }
label.wbaltrow { cursor: pointer; padding: .5rem .2rem; }
label.wbaltrow .grow { display: flex; flex-direction: column; }
label.wbaltrow.on { background: #f3f9fc; }
label.wbaltrow.self { opacity: .5; cursor: default; }
label.wbaltrow input[type=checkbox] { width: 22px; height: 22px; flex: none; }
.wbaltnew { display: flex; align-items: center; gap: .4rem; margin-top: .5rem; }
.wbaltnew svg { width: 16px; height: 16px; }
.wbaltnote { margin: .7rem 0 .2rem; }
.wbalt label.wbaltrow { display: flex; flex-direction: row; align-items: center; gap: .8rem; margin: 0; font-weight: 400; }
.wbalt label.wbaltrow .wbthumb { flex: none; }

/* Round 97: Map Trail challenge. A dark Herd map (navy ground, sand route), the coach's waypoint list and the client's stops. */
.cm-map { height: 340px; border-radius: 14px; overflow: hidden; background: var(--navy); margin: .75rem 0; position: relative; }
.cm-map-edit { height: 380px; }
.cm-map.cm-off { height: auto; min-height: 0; display: grid; place-items: center; padding: 1.25rem; }
.cm-msg { color: var(--tan-light); margin: 0; text-align: center; font-size: .92rem; }
.cm-info { display: grid; gap: .15rem; color: var(--navy); font-size: .9rem; max-width: 220px; }
.cm-find { display: flex; gap: .5rem; margin: .5rem 0 .25rem; }
.cm-find input { flex: 1; min-width: 0; }
.cm-sum { font-weight: 600; color: var(--navy); margin: .25rem 0 .5rem; min-height: 1.2em; }
.cm-pts, .cm-stops { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .4rem; }
.cm-pt, .cm-stop { display: flex; align-items: flex-start; gap: .6rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .6rem .65rem; }
.cm-n { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tan); color: var(--navy); font-weight: 700; font-size: .9rem; }
.cm-pt-f { flex: 1; min-width: 0; display: grid; gap: .4rem; }
.cm-pt-f input { width: 100%; }
.cm-pt-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.cm-pt-row .cm-task-in { flex: 1 1 100%; min-width: 0; }
label.cm-minl { display: flex; align-items: center; gap: .25rem; margin: 0; flex: 0 0 auto; font-size: .85rem; color: var(--muted); white-space: nowrap; }
.cm-pt-f .cm-pt-row input.cm-mins { width: 3.6rem; flex: 0 0 3.6rem; padding-left: .4rem; padding-right: .2rem; }
.cm-tools { display: flex; flex-direction: column; gap: .25rem; }
.cm-ib { width: 32px; height: 30px; padding: 0; border-radius: 8px; font-size: 1rem; line-height: 1; display: grid; place-items: center; }
.cm-ib:disabled { opacity: .35; }
.cm-del { color: var(--red); }
.cm-leg { font-size: .82rem; color: var(--tan-text); padding: 0 0 0 2.6rem; position: relative; }
.cm-leg::before { content: ''; position: absolute; left: 14px; top: -6px; bottom: -6px; border-left: 2px dashed var(--tan); }
.cm-card .cm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .5rem 0; }
.cm-stats span { background: var(--navy); color: #fff; border-radius: 12px; padding: .6rem .5rem; display: grid; text-align: center; }
.cm-stats b { font-size: 1.15rem; color: var(--tan-light); }
.cm-stats small { font-size: .75rem; opacity: .8; }
.cm-how { margin: .25rem 0 0; }
.cm-open { display: block; text-align: center; margin: .25rem 0 .75rem; }
.cm-stop { align-items: center; }
.cm-stop-t { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.cm-task { font-size: .88rem; color: var(--muted); }
.cm-dir { flex: 0 0 auto; font-size: .85rem; font-weight: 600; color: var(--blue-text); text-decoration: none; padding: .35rem .6rem; border: 1.5px solid var(--tan); border-radius: 999px; }
.cm-stop.done { background: var(--green-bg); border-color: transparent; }
.cm-stop.done .cm-n { background: var(--green); color: #fff; }
.cm-stop.done strong { text-decoration: line-through; text-decoration-color: rgba(24, 54, 66, .4); }

/* Round 98: Map Trail per-leg moves and repeats, the map key, the cover image and the instructions tab. */
.cm-cover { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 16px; margin: .25rem 0 .75rem; background: var(--navy); }
.cm-key { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin: -.25rem 0 .6rem; font-size: .82rem; color: var(--muted); }
.cm-key span { display: inline-flex; align-items: center; gap: .4rem; }
.cm-k { display: inline-block; width: 30px; height: 12px; border-radius: 6px; background: var(--navy); position: relative; }
.cm-k::after { content: ''; position: absolute; left: 4px; right: 4px; top: 4px; border-top: 4px solid var(--tan-light); }
.cm-k-walk::after { border-top-style: dotted; }
.cm-k-jog::after { border-top-style: dashed; }
.cm-leg-ed { display: grid; gap: .3rem; padding-top: .15rem; padding-bottom: .15rem; }
.cm-leg-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.cm-leg-row select.cm-leg-move { width: auto; min-width: 6.5rem; padding-top: .35rem; padding-bottom: .35rem; }
label.cm-repl { display: inline-flex; align-items: center; gap: .3rem; margin: 0; font-size: .85rem; color: var(--navy); font-weight: 600; white-space: nowrap; }
.cm-leg-row input.cm-leg-reps { width: 3.6rem; padding: .35rem .4rem; }
.cm-leg-t { font-size: .82rem; color: var(--tan-text); }
.cm-leg-rep { color: var(--navy); font-weight: 600; }
.cm-instr-body { white-space: normal; line-height: 1.55; margin: .5rem 0 .75rem; }
#cm-tabs > .plantabs a { padding: .55rem .8rem; }

/* Round 99: My Plan's Log it button is button sized, under the session name, not stretched across the tile */
.pwk.cplan .cplan-log { grid-column: 2 / -1; width: auto; justify-self: start; padding-left: 1.4rem; padding-right: 1.4rem; }

/* Round 101: the client menu still slides up from the bottom, but fills the whole screen; the middle scrolls, Credits / profile / Sign Out stay at the bottom */
@media (max-width: 820px) {
    html.clientroot body.clientshell .sidebar, html.clientroot.navc body.clientshell .sidebar {
        top: 0; height: 100vh; height: 100dvh; max-height: none; border-radius: 0;
        padding-top: calc(.55rem + env(safe-area-inset-top, 0px));
    }
}

/* Round 101: finished sessions in the Weekly Snapshot are greyed out and struck through */
.wa-it.wa-done { --wa-fg: #9aa3a8; --wa-bg: #eef0f1; }
.wa-it.wa-done .wa-tx strong, .wa-it.wa-done .wa-tx small, .wa-it.wa-done .wa-tag { text-decoration: line-through; text-decoration-thickness: 1.5px; color: #8a9398; }
.wa-it.wa-done .wa-ic { opacity: .75; }
.cg-meta-line { flex-wrap: nowrap; white-space: nowrap; }
.cg-meta-line .muted { overflow: hidden; text-overflow: ellipsis; }

/* ---- Round 107: Routines */
.flash.warn { background: #fbf0d9; color: #7a5a14; }
.tile-routine { position: relative; overflow: hidden; border: 0; border-radius: 26px; padding: 1.4rem 1.2rem 1.1rem; background: var(--tan); color: var(--navy); box-shadow: 0 10px 28px rgba(143, 122, 86, .2); }
.tile-routine::after { content: ""; position: absolute; right: -70px; top: -70px; width: 220px; height: 220px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 70%); }
.tile-routine > * { position: relative; z-index: 1; }
.rt-tile-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .7rem; }
.rt-tile-top .tile-h { margin: 0; }
.rt-streak { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .65rem .25rem .45rem; border-radius: 999px; background: var(--navy); color: #fff; font-size: .95rem; }
.rt-streak svg, .rt-flame svg { width: 18px; height: 18px; fill: #f0a04a; stroke: #f7c26b; stroke-width: 1.2; }
.rt-flame { display: inline-flex; align-items: center; gap: .2rem; margin-left: .5rem; color: #a35b12; font-weight: 600; }
.rt-prog { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.rt-prog-bar { flex: 1; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .55); overflow: hidden; }
.rt-prog-fill { display: block; height: 100%; background: var(--navy); border-radius: 99px; transition: width .4s ease; }
.rt-prog-fill.w0 { width: 0%; }
.rt-prog-fill.w5 { width: 5%; }
.rt-prog-fill.w10 { width: 10%; }
.rt-prog-fill.w15 { width: 15%; }
.rt-prog-fill.w20 { width: 20%; }
.rt-prog-fill.w25 { width: 25%; }
.rt-prog-fill.w30 { width: 30%; }
.rt-prog-fill.w35 { width: 35%; }
.rt-prog-fill.w40 { width: 40%; }
.rt-prog-fill.w45 { width: 45%; }
.rt-prog-fill.w50 { width: 50%; }
.rt-prog-fill.w55 { width: 55%; }
.rt-prog-fill.w60 { width: 60%; }
.rt-prog-fill.w65 { width: 65%; }
.rt-prog-fill.w70 { width: 70%; }
.rt-prog-fill.w75 { width: 75%; }
.rt-prog-fill.w80 { width: 80%; }
.rt-prog-fill.w85 { width: 85%; }
.rt-prog-fill.w90 { width: 90%; }
.rt-prog-fill.w95 { width: 95%; }
.rt-prog-fill.w100 { width: 100%; }

.rt-prog-n { font-weight: 700; font-size: .95rem; min-width: 2.6rem; text-align: right; }
.rt-day { list-style: none; margin: 0; padding: 0; position: relative; }
.rt-day::before { content: ""; position: absolute; left: 4.3rem; top: .4rem; bottom: .4rem; width: 2px; background: rgba(255, 255, 255, .6); }
.rt-slot { display: grid; grid-template-columns: 5.1rem 1fr; gap: .2rem .5rem; padding: .45rem 0; position: relative; }
.rt-slot::before { content: ""; position: absolute; left: calc(4.3rem - 4px); top: 1.05rem; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--navy); }
.rt-slot.done::before { background: var(--navy); }
.rt-slot.next::before { background: #f0a04a; border-color: #f0a04a; box-shadow: 0 0 0 5px rgba(240, 160, 74, .3); }
.rt-time { font-weight: 700; font-size: .9rem; white-space: nowrap; padding-top: .55rem; line-height: 1.15; padding-right: .9rem; }
.rt-time small { display: block; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: #a35b12; font-weight: 800; margin-top: .15rem; }
.rt-slot.done .rt-time { opacity: .55; }
.rt-stack { list-style: none; margin: 0 0 0 .7rem; padding: 0; display: grid; gap: .35rem; }
.rt-stack.many { background: rgba(255, 255, 255, .28); border-radius: 16px; padding: .35rem .5rem; margin-left: .45rem; }
.rt-slot.next .rt-stack { background: rgba(255, 255, 255, .55); border-radius: 16px; padding: .35rem .5rem; margin-left: .45rem; }
.rt-stack li { display: flex; align-items: center; gap: .7rem; }
.rt-stack .habitform { gap: .7rem; flex: 1; }
.rt-stack .tick { width: 40px; height: 40px; border-color: #fff; background: transparent; border-width: 3px; display: block; }
.rt-stack .tick.off::after { left: 10px; right: 10px; background: #fff; height: 3px; }
.rt-stack .tick.on { background: var(--navy); border-color: var(--navy); }
.rt-stack .tick.on::after { left: 12px; top: 5px; border-color: #fff; }
.rt-step-t { font-size: 1.1rem; font-weight: 500; color: var(--navy); line-height: 1.25; }
.rt-stack .habitform span.rt-step-t { font-size: 1.1rem; }
.rt-step-t.done, .rt-stack .habitform span.rt-step-t.done { color: rgba(24, 54, 66, .55); text-decoration: line-through; text-decoration-thickness: 1.5px; }
a.rt-step-t { text-decoration: none; }
.rt-kind { display: inline-block; margin-left: .4rem; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 800; color: rgba(24, 54, 66, .6); text-decoration: none; vertical-align: .15em; }
.rt-alldone { display: flex; align-items: center; gap: .45rem; margin: .7rem 0 0; font-weight: 600; }
.rt-alldone svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rt-alldone svg .fill { fill: var(--navy); stroke: var(--navy); }
.rt-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid rgba(255, 255, 255, .6); }
.rt-wd { display: grid; justify-items: center; gap: .25rem; font-size: .72rem; }
.rt-wd b { font-weight: 700; opacity: .75; }
.rt-wd i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: transparent; }
.rt-wd.part i { background: linear-gradient(to top, #fff 50%, transparent 50%); }
.rt-wd.full i { background: var(--navy); border-color: var(--navy); }
.rt-wd.future i { opacity: .45; }
.rt-wd.rest i { border-style: dashed; opacity: .5; }
.rt-wd.today b { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.rt-alert { margin-top: .9rem; padding: .75rem .85rem; border-radius: 16px; background: #fff; color: var(--navy); }
.rt-alert > b { display: flex; align-items: center; gap: .4rem; margin-bottom: .4rem; }
.rt-alert > b svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; flex: 0 0 auto; }
.rt-alert.warn { background: #fbf0d9; color: #6d5112; }
.rt-alert ul { margin: 0; padding-left: 1.1rem; }
.rt-alert li { margin: .2rem 0; }
.rt-addhabit { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: .35rem 0 0; }
.rt-ah-name { flex: 1 1 8rem; font-weight: 600; }
.rt-addhabit input[type=time] { width: 7.5rem; min-height: 40px; }
.rt-prompt { border-radius: 26px; background: #f8f7f4; }
.rt-prompt .tile-h { display: flex; align-items: center; gap: .4rem; }
.rt-prompt .tile-h svg, .rt-new svg, .rt-chip svg, .rt-card-acts svg, .rt-addrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; vertical-align: -3px; }
/* lists of routines (coach tab, client page, templates) */
.rt-card-h { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.rt-card-h h2, .rt-card-h h3, .rt-card-h h4 { margin: 0; flex: 1 1 auto; }
.rt-coach .rt-card { border: 1px solid var(--line); border-radius: 14px; padding: .8rem .9rem; margin: .6rem 0; background: #fff; }
.rt-coach .rt-card.rt-saved, .rt-card.rt-saved { background: #faf9f6; }
.rt-sub { margin: 1.1rem 0 .3rem; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rt-mini { list-style: none; margin: .6rem 0; padding: 0; display: grid; gap: .3rem; }
.rt-mini li { display: grid; grid-template-columns: 4.6rem 1fr; gap: .5rem; align-items: baseline; }
.rt-mini-t { font-weight: 700; font-size: .9rem; color: var(--navy); }
.rt-mini-s { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem; }
.rt-mini-step small { margin-left: .3rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tan-text); font-weight: 700; }
.rt-plus { color: var(--tan-text); font-weight: 800; }
.rt-card-acts { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .4rem; }
.rt-card-acts form { margin: 0; }
.rt-assign { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.rt-assign select { max-width: 12rem; }
.rt-only { margin: .4rem 0 0; }
.rt-stat { margin: .3rem 0 .6rem; }
.rt-new { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1rem; }
.rt-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .75rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--navy); font-size: .9rem; }
.rt-chip:hover { border-color: var(--tan); }
.rt-tpl-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.rt-onoff { display: inline-flex; align-items: center; gap: .45rem; margin: 0; }
.rt-empty { color: var(--muted); }
.rt-h { margin: 0 0 .3rem; font-size: 1.05rem; }
.rt-title { margin: .4rem 0 .8rem; }
/* the routine form */
.rt-f { display: grid; gap: .2rem; }
.rt-f > span { font-size: .78rem; font-weight: 600; color: var(--muted); }
.rt-name input { font-size: 1.1rem; }
.rt-days { border: 0; padding: 0; margin: .9rem 0 0; min-width: 0; }
.rt-days legend { font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: .35rem; padding: 0; }
.rt-dayset, .rt-daypick { display: flex; flex-wrap: wrap; gap: .4rem; }
.rt-daypick { margin-top: .5rem; }
.rt-daypick[hidden] { display: none; }
.rt-pill { position: relative; }
.rt-pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rt-pill span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-weight: 600; color: var(--navy); }
.rt-pill.sm span { min-height: 36px; padding: 0 .75rem; }
.rt-pill input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.rt-pill input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.rt-radio { display: flex; align-items: flex-start; gap: .5rem; margin: .35rem 0; }
.rt-radio input { margin-top: .3rem; }
.rt-steps { display: grid; gap: .6rem; margin: .6rem 0; }
.rt-step { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .6rem; padding: .7rem; border: 1px solid var(--line); border-radius: 14px; background: #faf9f6; align-items: end; }
.rt-step.rt-stacked { border-left: 4px solid var(--tan); }
/* phone first: time and minutes side by side, what and type full width, then reminder and buttons */
.rt-step .rt-what, .rt-step .rt-link { grid-column: 1 / -1; }
.rt-step .rt-time-f { order: 1; } .rt-step .rt-min { order: 2; } .rt-step .rt-what { order: 3; } .rt-step .rt-link { order: 4; } .rt-step .rt-chk { order: 5; } .rt-step .rt-step-acts { order: 6; }
.rt-step .rt-chk { display: flex; align-items: center; gap: .35rem; font-size: .9rem; min-height: 40px; }
.rt-step-acts { display: flex; gap: .35rem; justify-content: flex-end; align-items: center; }
.rt-step input, .rt-step select { width: 100%; min-width: 0; }
.rt-step input[type=checkbox] { width: 22px; height: 22px; min-height: 0; flex: 0 0 auto; margin: 0; padding: 0; appearance: auto; -webkit-appearance: checkbox; accent-color: var(--navy); }
.rt-card-acts .button, .rt-card-acts button, .rt-new .button, .rt-addrow { display: inline-flex; flex-direction: row; align-items: center; gap: .3rem; white-space: nowrap; }
.rt-addrow { display: inline-flex; align-items: center; gap: .3rem; }
.rt-actions { display: flex; gap: .5rem; margin: 1rem 0 2rem; }
.rt-draft-rows { display: grid; gap: .3rem; margin: .5rem 0 .6rem; }
.rt-draft-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.rt-draft-row .check-line { margin: 0; flex: 1; }
.rt-draft-row input[type=time] { width: 7.5rem; }
@media (min-width: 720px) {
    .rt-step { grid-template-columns: 8.5rem 1fr 1.2fr 6.5rem; }
    .rt-step .rt-what, .rt-step .rt-link { grid-column: auto; }
    .rt-step .rt-time-f, .rt-step .rt-min, .rt-step .rt-what, .rt-step .rt-link { order: 0; }
    .rt-step .rt-chk { grid-column: 1 / 3; } .rt-step .rt-step-acts { grid-column: 3 / -1; }
}
/* the reward pop-up for routine streaks */
.hpop-badge.hpop-flame { background: #f0a04a; box-shadow: 0 0 0 8px rgba(240, 160, 74, .18); position: relative; }
.hpop-badge.hpop-flame svg { fill: #fff; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0; width: 2.4rem; height: 2.4rem; }
.hpop.on .hpop-badge.hpop-flame svg { animation: rt-flicker 1.4s ease-in-out infinite alternate; }
.hpop-n { position: absolute; bottom: -.35rem; right: -.35rem; min-width: 1.8rem; height: 1.8rem; padding: 0 .35rem; border-radius: 99px; background: var(--navy); color: #fff; font-weight: 800; font-size: .9rem; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
@keyframes rt-flicker { from { transform: scale(1) rotate(-3deg); } to { transform: scale(1.08) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .hpop.on .hpop-badge.hpop-flame svg { animation: none; } }
.rt-step-acts button { margin: 0; }

/* ---- Round 108: Routine Builder */
.rt-step .rt-often { order: 4; grid-column: 1 / -1; }
.rt-step .rt-levels { order: 4; grid-column: 1 / -1; font-size: .92rem; }
.rt-step .rt-levels summary { cursor: pointer; color: var(--blue-text); font-weight: 600; min-height: 32px; display: flex; align-items: center; gap: .3rem; }
.rt-step .rt-levels .rt-f { margin-top: .35rem; }
@media (min-width: 720px) { .rt-step .rt-often, .rt-step .rt-levels { order: 0; grid-column: 1 / -1; } }
.rb { max-width: 40rem; }
.rb-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: .2rem 0 .3rem; }
.rb-step { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tan-text); }
.rb-dots { display: flex; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.rb-dots li { width: 22px; height: 6px; border-radius: 99px; background: var(--line); }
.rb-dots li.done { background: var(--tan); }
.rb-dots li.on { background: var(--navy); }
.rb-h { margin: .1rem 0 .2rem; font-size: 2rem; line-height: 1.1; }
.rb-lead { margin: 0 0 .9rem; color: var(--muted); }
.rb-card { border-radius: 20px; }
.rb-q { margin: 0 0 .25rem; font-size: 1.15rem; line-height: 1.25; display: flex; align-items: center; gap: .4rem; }
.rb-q svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.rb-q small { font-size: .8rem; font-weight: 500; }
.rb-q + .rb-chips, .rb-hint + .rb-chips { margin-top: .5rem; }
.rb-chips + .rb-q { margin-top: 1rem; }
.rb-hint { margin: 0; color: var(--muted); font-size: .92rem; }
.rb-sub { margin: .9rem 0 .35rem; font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.rb-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.rb-chips .rt-pill span { min-height: 42px; padding: 0 .9rem; font-weight: 500; }
.rb-chips .rt-pill.off span { opacity: .45; }
.rb-chips .rt-pill input, .rb-chips .rt-pill input:disabled { opacity: 0; appearance: none; -webkit-appearance: none; }
.rb-chips .rt-pill.off input { cursor: not-allowed; }
.rb-goals .rt-pill span[data-n]:not([data-n=""])::before { content: attr(data-n); display: inline-flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem; margin-right: .4rem; border-radius: 50%; background: var(--tan); color: var(--navy); font-size: .78rem; font-weight: 800; }
.rb-no .rt-pill input:checked + span { background: #f6e1dc; border-color: #e7b9ad; color: var(--red); text-decoration: line-through; }
.rb-nums .rt-pill span { min-width: 44px; justify-content: center; }
.rb-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .8rem 0 .4rem; }
.rb-workbits { grid-template-columns: 1fr 1fr 1fr; }
.rb-row input, .rb-row select { width: 100%; min-width: 0; }
.rb-two { display: grid; gap: .2rem; }
.rb-two .rb-sub { margin-top: .5rem; }
.rb-screen { display: grid; gap: .1rem; }
.rb-form textarea { width: 100%; margin-top: .4rem; }
.rb-form input[type=checkbox]:not(.rt-pill input) { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--navy); }
.rb-nav { display: flex; flex-direction: row-reverse; justify-content: flex-start; gap: .5rem; margin: 1rem 0 .6rem; position: sticky; bottom: calc(env(safe-area-inset-bottom, 0px) + .5rem); z-index: 3; }
.rb-nav button { min-height: 48px; padding: 0 1.3rem; border-radius: 999px; }
.rb-nav .rb-next { flex: 1; font-size: 1.05rem; box-shadow: 0 8px 20px rgba(24, 54, 66, .25); }
.rb-nav .rb-back, .rb-nav .rb-skip { background: #fff; }
.rb-default { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0; border: 0; }
.rb-foot { text-align: center; }
.linkbtn { background: none; border: 0; color: var(--blue-text); text-decoration: underline; padding: .4rem; cursor: pointer; font: inherit; }
.rb-protect { background: #eef5f0; }
.rb-protect .rb-q { color: var(--green); }
.rb-plain { margin: .3rem 0 0; padding-left: 1.1rem; }
.rb-slots { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .5rem; }
.rb-slots li { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .55rem .6rem; border: 1px solid var(--line); border-radius: 14px; background: #faf9f6; }
.rb-slot-on { display: flex; align-items: flex-start; gap: .55rem; flex: 1; min-width: 0; }
.rb-slot-on input { margin-top: .2rem; }
.rb-slot-on span { display: grid; }
.rb-slot-on small { font-size: .82rem; color: var(--muted); }
.rb-slots input[type=time] { width: 7.4rem; flex: 0 0 auto; }
.rb-items { display: grid; gap: .7rem; }
.rb-item { border-radius: 20px; border-left: 6px solid var(--tan); padding: 1rem 1rem .8rem; }
.rb-item.p-move { border-left-color: #46758d; }
.rb-item.p-food { border-left-color: #6aa36f; }
.rb-item.p-sleep { border-left-color: #7f6be0; }
.rb-item.p-mind { border-left-color: #e9a64c; }
.rb-item.p-connect { border-left-color: #d9728a; }
.rb-item-h { display: flex; align-items: flex-start; gap: .6rem; }
.rb-item-t { flex: 1; min-width: 0; }
.rb-item-t h3 { margin: 0; font-size: 1.15rem; line-height: 1.2; }
.rb-item-h input[type=time] { width: 7rem; flex: 0 0 auto; }
.rb-keep input { width: 24px; height: 24px; margin: .1rem 0 0; accent-color: var(--navy); }
.rb-meta { display: flex; flex-wrap: wrap; gap: .3rem; margin: .3rem 0 0; }
.rb-meta span { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: #f1efe9; border-radius: 99px; padding: .15rem .5rem; }
.rb-meta .rb-pillar { background: var(--navy); color: #fff; }
.rb-levels { display: grid; gap: .35rem; margin: .7rem 0 .2rem; }
.rb-level { position: relative; display: block; }
.rb-level input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rb-level span { display: grid; gap: .1rem; padding: .5rem .7rem; border: 1.5px solid var(--line); border-radius: 12px; font-size: .92rem; color: var(--navy); background: #fff; }
.rb-level span b { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.rb-level input:checked + span { border-color: var(--navy); background: #eef3f5; box-shadow: inset 0 0 0 1px var(--navy); }
.rb-level input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.rb-wk { margin-top: .5rem; max-width: 12rem; }
.rb-why { margin-top: .5rem; font-size: .92rem; }
.rb-why summary { cursor: pointer; color: var(--blue-text); font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.rb-why p { margin: .2rem 0 0; color: var(--muted); }
.rb-acts { display: flex; flex-wrap: wrap; gap: .3rem; margin: .5rem 0 0; }
.rb-act, .rt-act { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 600; color: var(--navy); background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: .2rem .6rem; }
.rb-act svg, .rt-act svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.rb-swap { display: flex; gap: .4rem; align-items: center; margin-top: .6rem; }
.rb-swap select { flex: 1; min-width: 0; }
.rb-caution p { margin: .2rem 0 0; }
.rb-entry { border-radius: 22px; background: linear-gradient(135deg, #f6fbfd, #eef3f5); border: 1px solid #dbe8ee; }
.rb-entry-h { display: flex; align-items: center; gap: .4rem; margin: 0 0 .3rem; font-size: 1.2rem; }
.rb-entry-h svg, .rb-entry-acts svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; vertical-align: -3px; }
.rb-entry p { margin: 0 0 .7rem; }
.rb-entry-acts { display: flex; flex-wrap: wrap; gap: .4rem; }
.rb-entry-acts .button { display: inline-flex; align-items: center; gap: .3rem; }
.rt-coach .rb-entry { margin-top: 1rem; }
.rb-tag { background: #eef3f5; color: var(--navy); }
.rb-tag.warn { background: #fbf0d9; color: #6d5112; }
.rb-fitpick { display: grid; gap: .6rem; }
.rb-fit select { max-width: 100%; }
.rb-opt { padding: .45rem .55rem; border: 1px solid var(--line); border-radius: 12px; margin: .3rem 0; }
.rb-opt span { display: grid; }
.rb-opt small { font-size: .82rem; color: #8a5a12; }
.rb-opt small.ok { color: var(--green); }
.rb-tiers { font-size: .9rem; color: var(--muted); margin: .8rem 0; }
.rb-shake .rb-q { display: block; }
.rb-coachwrap { max-width: 44rem; }
/* Today: weekly targets, levels and links */
.rt-stack li { flex-wrap: wrap; }
.rt-stack li.is-met .rt-step-t { opacity: .6; }
.rt-kind.wk { color: #46758d; }
.rt-kind.wk.met { color: var(--green); }
.rt-kind.lv { color: #8f5a12; }
.rt-more { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; gap: .35rem; padding-left: calc(40px + .7rem); margin-top: -.1rem; }
.rt-more .rt-act { background: rgba(255, 255, 255, .7); border-color: rgba(255, 255, 255, .9); }
.rt-tiers { flex-basis: 100%; font-size: .9rem; }
.rt-tiers summary { cursor: pointer; font-weight: 600; color: rgba(24, 54, 66, .75); min-height: 30px; display: inline-flex; align-items: center; }
.rt-tiers form { margin: .3rem 0 0; }
.rt-tierbtn { display: grid; width: 100%; text-align: left; gap: .05rem; padding: .45rem .7rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .55); color: var(--navy); cursor: pointer; font: inherit; }
.rt-tierbtn b { font-size: .8rem; }
.rt-tierbtn span { font-size: .85rem; opacity: .8; }

/* Round 109: the Routine Builder in the Weekly Snapshot style: a dark panel with a hero (step, questions here, time left), a step
   tracker, white question cards with large headings, and a sticky white Next button. */
.rb-snap { position: relative; margin: .3rem 0 1.2rem; padding: 1.4rem 1rem 1rem; border-radius: 26px; color: #fff;
    background: linear-gradient(180deg, #183642 0%, #1c4656 38%, #255b6e 72%, #2e6c80 100%); box-shadow: 0 10px 28px rgba(8, 24, 30, .18); }
.rb-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.rb-ic { width: 70px; height: 70px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rb-ic-body { stroke: #b9dcea; stroke-width: 4; stroke-dasharray: 180; stroke-dashoffset: 180; animation: wa-draw .7s ease-out .05s forwards; }
.rb-ic-clip { stroke: #fff; stroke-width: 4; stroke-dasharray: 30; stroke-dashoffset: 30; animation: wa-draw .3s ease-out .45s forwards; }
.rb-ic-line { stroke: #b9dcea; stroke-width: 4; stroke-dasharray: 40; stroke-dashoffset: 40; animation: wa-draw .4s ease-out .55s forwards; }
.rb-ic-tick { stroke: var(--tan); stroke-width: 5; stroke-dasharray: 30; stroke-dashoffset: 30; animation: wa-draw .4s ease-out .8s forwards; }
@media (prefers-reduced-motion: reduce) { .rb-ic * { animation: none !important; stroke-dashoffset: 0 !important; } }
.rb-eyebrow { margin: .2rem 0 0; font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--tan); }
.rb-snap .rb-h { margin: 0; font-size: clamp(1.7rem, 7.4vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: #fff; }
.rb-snap .rb-lead { margin: .1rem 0 0; max-width: 30rem; color: rgba(255,255,255,.8); font-weight: 500; }
.rb-meta-top { list-style: none; margin: .55rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.rb-meta-top li { padding: .3rem .75rem; border-radius: 999px; font-size: .84rem; font-weight: 800; background: #e3eef3; color: #1f4f63; }
.rb-meta-top .rb-time-left { background: #f3e7d3; color: #6b4e1f; }
.rb-track { margin: 1.1rem 0 1rem; }
.rb-track ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: .15rem; }
.rb-track li a, .rb-track li > span { display: flex; flex-direction: column; align-items: center; gap: .25rem; text-decoration: none; color: rgba(255,255,255,.7); min-height: 44px; }
.rb-tn { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 800;
    border: 2px solid rgba(255,255,255,.35); color: rgba(255,255,255,.85); }
.rb-tn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; }
.rb-track li.done .rb-tn { background: var(--tan); border-color: var(--tan); color: var(--navy); }
.rb-track li.on .rb-tn { background: #fff; border-color: #fff; color: var(--navy); box-shadow: 0 0 0 4px rgba(255,255,255,.22); }
.rb-track small { font-size: .68rem; font-weight: 700; line-height: 1.1; text-align: center; }
.rb-track li.on small { color: #fff; }
.rb-track li a:hover .rb-tn, .rb-track li a:focus-visible .rb-tn { box-shadow: 0 0 0 3px rgba(255,255,255,.4); }
.rb-track-bar { display: block; height: 4px; margin: .6rem 6% 0; border-radius: 99px; background: rgba(255,255,255,.18); overflow: hidden; }
.rb-track-bar span { display: block; height: 100%; border-radius: 99px; background: var(--tan); }
.rb-track-bar .w0 { width: 0%; }
.rb-track-bar .w5 { width: 5%; }
.rb-track-bar .w10 { width: 10%; }
.rb-track-bar .w15 { width: 15%; }
.rb-track-bar .w20 { width: 20%; }
.rb-track-bar .w25 { width: 25%; }
.rb-track-bar .w30 { width: 30%; }
.rb-track-bar .w35 { width: 35%; }
.rb-track-bar .w40 { width: 40%; }
.rb-track-bar .w45 { width: 45%; }
.rb-track-bar .w50 { width: 50%; }
.rb-track-bar .w55 { width: 55%; }
.rb-track-bar .w60 { width: 60%; }
.rb-track-bar .w65 { width: 65%; }
.rb-track-bar .w70 { width: 70%; }
.rb-track-bar .w75 { width: 75%; }
.rb-track-bar .w80 { width: 80%; }
.rb-track-bar .w85 { width: 85%; }
.rb-track-bar .w90 { width: 90%; }
.rb-track-bar .w95 { width: 95%; }
.rb-track-bar .w100 { width: 100%; }
@media (max-width: 520px) { .rb-track li:not(.on) small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.rb-sec { background: #fff; color: var(--navy); border-radius: 18px; padding: 1rem 1rem 1.1rem; margin: 0 0 .8rem; box-shadow: 0 6px 18px rgba(8, 24, 30, .18); }
.rb-sh { margin: 0 0 .35rem; display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.rb-sh span { font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; display: inline-flex; align-items: center; gap: .4rem; }
.rb-sh span svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.rb-big .rb-sh span { font-size: 1.75rem; }
.rb-sh small { flex: none; font-size: .76rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.rb-sec .rb-hint + .rb-chips, .rb-sh + .rb-chips { margin-top: .6rem; }
.rb-sec .rb-q { margin-top: 1.1rem; font-size: 1.02rem; }
.rb-notes { display: grid; gap: .3rem; margin-top: .9rem; }
.rb-notes small { font-weight: 500; color: var(--muted); }
.rb-notes input, .rb-notes textarea, .rb-sec textarea { width: 100%; }
.rb-snap .rb-protect { background: #eef5f0; }
.rb-snap .rb-protect .rb-sh span { color: var(--green); font-size: 1.1rem; }
.rb-snap .rb-items { margin-bottom: .8rem; }
.rb-snap .rb-nav { display: grid; gap: .5rem; margin: .4rem -.4rem 0; padding: .55rem; border-radius: 22px;
    background: rgba(24, 58, 72, .94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rb-snap .rb-nav .rb-next { width: 100%; min-height: 54px; border-radius: 16px; background: #fff; color: var(--navy); border: 0; font-size: 1.08rem; font-weight: 800; box-shadow: 0 6px 16px rgba(8, 24, 30, .25); }
.rb-snap .rb-nav .rb-next:hover, .rb-snap .rb-nav .rb-next:focus-visible { background: #f1ede5; }
.rb-nav2 { display: flex; gap: .5rem; }
.rb-nav2:empty { display: none; }
.rb-snap .rb-nav .rb-back, .rb-snap .rb-nav .rb-skip { flex: 1; min-height: 46px; border-radius: 14px; background: rgba(255,255,255,.1); color: #fff; border: 1.5px solid rgba(255,255,255,.35); font-weight: 700; }
.rb-snap .rb-nav .rb-back:hover, .rb-snap .rb-nav .rb-skip:hover { background: rgba(255,255,255,.2); }
.rb-snap .rb-foot .linkbtn { color: #fff; }
.rb-snap .rb-caution { margin-bottom: .8rem; }
.rb-snap .rb-nav { justify-content: stretch; }
.rb-snap .rb-nav2 { width: 100%; }
.rb-sh { flex-direction: column-reverse; align-items: flex-start; gap: .15rem; }
.rb-sh small { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8a6a35; }
.rb-snap .rb-item, .rb-snap .card { color: var(--navy); }
.rb-snap .rb-item-h input[type=time] { width: 8.2rem; }

/* Round 110: the Routine Builder full screen (no menus to wander off to), with an exit button; the result's time switch, days,
   habit stacks, groups and free time; and the routine overview in the Weekly Snapshot style. */
.rb-snap.rb-full { position: fixed; inset: 0; z-index: 650; margin: 0; border-radius: 0; box-shadow: none; overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem calc(env(safe-area-inset-bottom, 0px) + 1rem); }
.rb-in { max-width: 560px; margin: 0 auto; }
.rb-x { position: absolute; top: calc(env(safe-area-inset-top, 0px) + .6rem); left: .6rem; z-index: 3; width: 44px; height: 44px; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.3); background: #1f4757; color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(8, 24, 30, .35); }
.rb-x:hover, .rb-x:focus-visible { background: #2b5a6c; color: #fff; }
.rb-x svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.ov .rb-x { position: absolute; }
.rb-flash { margin: 2.6rem 0 .6rem; }
.rb-full .rb-hero { padding-top: 1.6rem; }
.rb-group { margin: 1rem 0 .5rem; display: grid; gap: .1rem; color: #fff; }
.rb-group span { font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; }
.rb-group small { font-size: .86rem; color: rgba(255,255,255,.75); font-weight: 500; }
.rb-items > .rb-group:first-child { margin-top: 0; }
.rb-items .rb-item + .rb-item { margin-top: 0; }
.rb-planned { background: #f3e7d3 !important; color: #6b4e1f !important; }
.rb-stack { display: flex; align-items: center; gap: .4rem; margin: .55rem 0 0; padding: .45rem .6rem; border-radius: 12px; background: #eef5f0; color: #2f6f4d; font-size: .9rem; font-weight: 600; }
.rb-stack svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
.rb-when { margin-top: .7rem; }
.rb-sugg { margin: 0 0 .4rem; font-size: .95rem; color: var(--navy); }
.rb-sugg b { font-size: 1.05rem; }
.rb-ampm { display: grid; gap: .35rem; }
.rb-half { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.rb-half-l { width: 2.1rem; font-size: .72rem; font-weight: 800; letter-spacing: .08em; color: var(--muted); }
.rb-slotpick { position: relative; }
.rb-slotpick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rb-slotpick span { display: grid; gap: 0; min-height: 44px; padding: .3rem .7rem; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; color: var(--navy); align-content: center; }
.rb-slotpick span b { font-size: .92rem; }
.rb-slotpick span small { font-size: .72rem; color: var(--muted); line-height: 1.15; }
.rb-slotpick input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.rb-slotpick input:checked + span small { color: rgba(255,255,255,.8); }
.rb-slotpick input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.rb-custom { padding-left: 2.45rem; }
.rb-custom input[type=time] { width: 8.2rem; min-height: 44px; }
.rb-days { border: 0; margin: .7rem 0 0; padding: 0; }
.rb-days legend { padding: 0; font-weight: 700; font-size: .95rem; margin-bottom: .35rem; }
.rb-days legend small { font-weight: 500; color: var(--muted); margin-left: .25rem; }
.rb-days .rt-pill span { min-width: 46px; justify-content: center; }
.rb-free .rb-sh span svg { width: 20px; height: 20px; }
.rb-freelist { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .55rem; }
.rb-freelist li { padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 14px; background: #faf9f6; }
.rb-free-t { margin: 0 0 .35rem; display: flex; flex-wrap: wrap; gap: .2rem .5rem; align-items: baseline; }
.rb-free-t span { color: var(--muted); font-size: .9rem; }
.rb-free-t small { width: 100%; font-weight: 700; color: #2f6f4d; }
/* the overview reuses the Weekly Snapshot (.wa) look */
.ov { z-index: 650; }
.ov .wa-in { padding-top: calc(env(safe-area-inset-top, 0px) + 3.6rem); }
.ov .flash.rb-flash { margin: 0; width: 100%; max-width: 520px; }
.ov-chip-plan { --wa-fg: #6b4e1f; --wa-bg: #f3e7d3; }
.ov-it > div { display: flex; align-items: center; gap: .7rem; }
.ov-plan { border-left: 6px solid #e2c48f; }
.ov-free .ov-fit { display: inline-flex; align-items: center; gap: .35rem; margin-top: .6rem; font-weight: 700; color: var(--navy); }
.ov-free .ov-fit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
/* Round 110: one button style on the routine pages. Links styled as buttons (Edit, At a glance) and form buttons (Use this instead,
   Run alongside, Delete) were different sizes; now every small one matches, and the big ones match each other. */
.rt-card-acts .button, .rt-card-acts button, .rt-addhabit button, .rt-onoff button { display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
    min-height: 38px; padding: 0 .9rem; font-size: .84rem; font-weight: 700; line-height: 1.2; border-radius: 999px; border-width: 1.5px; white-space: nowrap; }
.rb-entry-acts .button, .rb-entry > .button, .rt-new .button { display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    min-height: 44px; padding: 0 1.15rem; font-size: .9rem; font-weight: 700; line-height: 1.2; border-radius: 999px; }
.rb-snap .rb-workbits { grid-template-columns: 1fr 1fr; }
.rb-snap .rb-workbits label:last-child { grid-column: 1 / -1; }
/* Round 111: clear all routines and reset */
.rt-reset-link { margin: .9rem 0 0; font-size: .9rem; }
.rt-reset-link a { display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; color: #b4424b; font-weight: 600; }
.rt-reset-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.rt-reset-list { margin: .3rem 0 .9rem; padding-left: 1.2rem; display: grid; gap: .25rem; }
.rt-reset-list.keep { color: var(--muted); }
.rt-reset-form .rt-radio { margin: .4rem 0 .8rem; font-weight: 600; }

/* Round 112: the builder's buttons sit in the page after the last question (no floating bar); "Save and close" replaces "Skip this step". */
.rb-snap .rb-nav { position: static; bottom: auto; z-index: auto; margin: 1.1rem 0 .4rem; padding: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.rb-snap .rb-nav .rb-close { flex: 1; min-height: 46px; border-radius: 14px; background: rgba(255,255,255,.1); color: #fff; border: 1.5px solid rgba(255,255,255,.35); font-weight: 700; }
.rb-snap .rb-nav .rb-close:hover, .rb-snap .rb-nav .rb-close:focus-visible { background: rgba(255,255,255,.2); }
.rb-sub-mind { margin: .9rem 0 .35rem; font-weight: 800; }
/* Round 113: "Continue where you left off": the gold bar has room to breathe, and the button matches the others (icon beside the label). */
.rb-resume { border-left: 4px solid var(--gold, #c99a4a); padding: .1rem 0 .2rem .85rem; }
.rb-resume p { margin: .3rem 0 .8rem; }
.rb-resume-acts { display: flex; flex-wrap: wrap; gap: .5rem; }
.rb-resume-acts .button { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 44px; padding: 0 1.15rem; font-size: .9rem; font-weight: 700; line-height: 1.2; border-radius: 999px; }
.rb-resume-acts .button svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
/* Round 113: the message under a field the phone wouldn't accept (assets/formguard.js) */
.fg-msg { margin: .3rem 0 .5rem; padding: .45rem .7rem; border-radius: 10px; background: #fdecea; color: #8a1f17; font-size: .88rem; font-weight: 600; }

/* Round 113: Routine Builder rework */
.rb-snap .rb-plan { background: #f4f8f9; }
.rb-wins { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .7rem; }
.rb-win { background: #fff; border: 1px solid #dbe8ee; border-radius: 16px; padding: .7rem .85rem; }
.rb-win-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; margin: 0 0 .35rem; }
.rb-win-h b { font-size: 1.02rem; }
.rb-win-h span { font-weight: 700; color: var(--teal, #2c6474); }
.rb-win-h small { width: 100%; color: var(--muted); font-size: .8rem; }
.rb-win ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.rb-win li { display: grid; grid-template-columns: 4.6rem 1fr; gap: .4rem; align-items: baseline; font-size: .92rem; }
.rb-win-t { font-weight: 800; font-variant-numeric: tabular-nums; }
.rb-win-n small { color: var(--muted); font-weight: 600; }
.rb-win-d { display: inline-block; margin-left: .2rem; padding: 0 .4rem; border-radius: 999px; background: #e7f0f3; color: var(--navy) !important; }
.rb-win-free { margin: .45rem 0 0; font-size: .85rem; font-weight: 700; color: #3c7a52; }
.rb-snap .rb-meta .rb-wk { background: var(--navy); color: #fff; font-size: .78rem; padding: .2rem .6rem; }
.rb-focusline { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; margin: .1rem 0 .5rem; font-weight: 700; }
.rb-focusline span { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #8a6a35; }
.rb-days legend { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-weight: 800; }
.rb-dcount { display: inline-flex; align-items: baseline; gap: .1rem; padding: .2rem .65rem; border-radius: 999px; background: #fbeed6; color: #7a5420; font-size: .9rem; font-weight: 800; }
.rb-dcount b { font-size: 1.15rem; }
.rb-dcount.ok { background: #e1f1e6; color: #2f6b45; }
.rb-dcount.over { background: #e7f0f3; color: var(--navy); }
.rb-dhint { margin: .25rem 0 .45rem; font-size: .85rem; color: var(--muted); }
.rb-talk-h { display: flex; align-items: center; gap: .45rem; font-size: 1.45rem; margin: 0 0 .3rem; }
.rb-talk-h svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.rb-talk-msg { display: grid; gap: .35rem; margin: .6rem 0 1rem; }
.rb-talk-msg textarea { width: 100%; }
.rb-talk-clear { justify-self: start; display: inline-flex; align-items: center; gap: .3rem; }
.rb-talk-clear svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.rb-talk-set { border: 0; padding: 0; margin: 0 0 1rem; }
.rb-talk-set legend { font-weight: 800; margin-bottom: .4rem; }
.rb-talk-other { margin-top: .5rem; }
.rb-talk-other input { width: 100%; }
.rb-entry-acts button.button { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 44px; padding: 0 1.15rem; font-size: .9rem; font-weight: 700; line-height: 1.2; border-radius: 999px; }
.rb-entry-acts button.button svg, .rb-entry-acts a.button svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
.rb-wp-pick { border: 0; padding: 0; margin: .4rem 0 .8rem; }
.rb-wp-pick legend { font-weight: 800; margin-bottom: .4rem; }
.rb-wp-stage { display: flex; justify-content: center; margin: 0 0 1rem; }
.rb-wp-stage canvas { width: min(62vw, 260px); height: auto; aspect-ratio: 1179 / 2556; border-radius: 28px; box-shadow: 0 10px 30px rgba(24, 54, 66, .25); border: 6px solid #183a48; }
.rb-wp-how { margin-top: .8rem; }
.rb-score .rt-card-h { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.rb-score h2, .rb-reqs h2 { display: flex; align-items: center; gap: .4rem; margin: 0; }
.rb-score h2 svg, .rb-reqs h2 svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.rb-att { margin: .6rem 0 .9rem; padding: .75rem .9rem; border-radius: 16px; background: #e7f0f3; }
.rb-att p { margin: .15rem 0; }
.rb-att-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; }
.rb-att-h span { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--muted); }
.rb-att-h b { font-size: 1.1rem; }
.rb-att-high { background: #fbe5e1; }
.rb-att-medium { background: #fbeed6; }
.rb-att-low { background: #e1f1e6; }
.rb-areas { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .45rem; }
.rb-area p { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin: 0; }
.rb-area small { color: var(--muted); }
.rb-dots { display: inline-flex; gap: 4px; }
.rb-dots i { width: 12px; height: 12px; border-radius: 50%; background: #dfe6e9; }
.rb-area.s1 .rb-dots i.on, .rb-area.s2 .rb-dots i.on { background: #c8553d; }
.rb-area.s3 .rb-dots i.on { background: #d9a441; }
.rb-area.s4 .rb-dots i.on, .rb-area.s5 .rb-dots i.on { background: #3c8a5a; }
.rb-sc-list { margin: .2rem 0 .9rem; padding-left: 1.1rem; }
.rb-sc-list li { margin: .25rem 0; }
.rb-reqs .rb-req { border-top: 1px solid #e3e8ea; padding: .6rem 0; }
.rb-reqs .rb-req:first-of-type { border-top: 0; }
.rb-req p { margin: .2rem 0; }
.rb-req-when { color: var(--muted); font-size: .85rem; }
.rb-req-msg { white-space: normal; }
.rb-score, .rb-reqs { margin-top: 1rem; }
.rb-swap-h { margin: .7rem 0 .3rem; font-size: .9rem; font-weight: 800; color: var(--navy); }

/* Round 113: Non-Negotiables */
.rb-fxs { display: grid; gap: .7rem; }
.rb-fx { border: 1px solid var(--line, #dfe5e8); border-radius: 14px; padding: .75rem .8rem .6rem; margin: 0; background: var(--card, #fff); }
.rb-fx .rt-f { margin: 0 0 .5rem; }
.rb-fx-days { margin: 0 0 .5rem; }
.rb-fx-t { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; }
.rb-fx-t label { display: grid; gap: .2rem; font-size: .8rem; font-weight: 600; flex: 1 1 7rem; }
.rb-fx-t input { width: 100%; min-height: 44px; }
.rb-fx-clear { min-height: 40px; margin-left: auto; font-size: .85rem; }
.rb-fx-add { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; margin-top: .5rem; font-weight: 700; }
.rb-fx-add svg { width: 18px; height: 18px; }
.rb-locked { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .35rem; }
.rb-locked li { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; font-size: .9rem; }
.rb-locked li b { font-weight: 700; }
.rb-locked li span { opacity: .75; }
.rb-locked-box { border-left: 4px solid var(--gold, #c99a4a); padding: .4rem 0 .4rem .8rem; margin: 0 0 1rem; }
.rb-locked-box h3 { margin: 0; font-size: .95rem; }
.rb-avoid { font-size: .82rem; opacity: .8; margin: .25rem 0 0; }

/* Round 113 styling pass: one grid for the time picker, one size for the tags */
.rb-ampm { display: grid; gap: .45rem; }
.rb-half { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); align-items: center; gap: .5rem; }
.rb-half-l { width: auto; }
.rb-half-o { display: flex; flex-wrap: wrap; align-items: stretch; gap: .4rem; }
.rb-custom { padding-left: 0; }
.rb-slotpick span { min-height: 52px; padding: .35rem .8rem; box-sizing: border-box; }
.rb-custom .rb-slotpick span { height: 100%; }
.rb-custom input[type=time] { flex: 1 1 7.5rem; width: auto; max-width: 11rem; min-height: 52px; margin: 0; box-sizing: border-box; border-radius: 12px; }
.rb-meta, .rb-snap .rb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .4rem 0 0; }
.rb-meta span, .rb-snap .rb-meta span, .rb-snap .rb-meta .rb-wk { display: inline-flex; align-items: center; min-height: 26px; margin: 0; max-width: none; padding: 0 .65rem; font-size: .72rem; line-height: 1; white-space: nowrap; box-sizing: border-box; }
.rb-item-h { align-items: flex-start; }
.rb-keep { flex: none; padding-top: .1rem; }
.rb-why { margin-top: .6rem; }
.rb-dts { margin-top: .75rem; display: grid; gap: .45rem; }
.rb-dts-h { margin: 0; font-weight: 800; color: var(--navy); }
.rb-dts-none { margin: 0; color: var(--muted); font-size: .9rem; }
.rb-dt { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: center; gap: .3rem .5rem; }
.rb-dt[hidden] { display: none; }
.rb-dt-d { font-weight: 800; font-size: .9rem; color: var(--navy); }
.rb-dt select { width: 100%; min-height: 48px; margin: 0; font-size: .92rem; border-radius: 12px; box-sizing: border-box; }
.rb-dt .rb-dt-t { grid-column: 2; width: 100%; max-width: 11rem; min-height: 48px; margin: 0; border-radius: 12px; box-sizing: border-box; }
.rb-dt .rb-dt-t[hidden] { display: none; }
.rb-swap { display: flex; align-items: center; gap: .5rem; }
.rb-swap select { flex: 1 1 auto; min-width: 0; min-height: 48px; margin: 0; }
.rb-swap button { flex: none; min-height: 44px; }
.rb-slots input[type=time] { width: 8.6rem; min-height: 44px; font-size: .95rem; }
.rb-dt-d { margin: 0; align-self: center; }
.rb-dt select { padding-right: 2rem; text-overflow: ellipsis; }
.rb-fxs { margin-top: .6rem; }
.rb-dt select { padding-left: .65rem; padding-right: 1.7rem; font-size: .88rem; }
/* At a glance: Looks good full width, the rest smaller and side by side so the routine stays in view */
.ov-foot { grid-template-columns: 1fr 1fr; gap: .45rem; }
.ov-foot .wa-btn-main { grid-column: 1 / -1; }
.ov-foot .wa-btn:not(.wa-btn-main) { min-height: 44px; font-size: .85rem; padding: .3rem .5rem; gap: .35rem; text-align: center; line-height: 1.15; }
.ov-foot .wa-btn:not(.wa-btn-main) svg { width: 17px; height: 17px; flex: none; }
.ov-foot .wa-btn:not(.wa-btn-main):last-child:nth-child(even) { grid-column: 1 / -1; }
.rb-fx { position: relative; }
.rb-fx-clear { position: absolute; top: .45rem; right: .6rem; min-height: 32px; margin: 0; }

/* Round 115: coach Habits list (was a wide table that clipped on phones) */
.hb-list { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .7rem; }
.hb-it { border: 1px solid var(--line); border-radius: 16px; padding: .8rem .9rem; background: #fff; display: grid; gap: .65rem; }
.hb-it.archived { opacity: .7; background: #faf9f6; }
.hb-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.hb-name { margin: 0; font-weight: 700; color: var(--navy); font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.hb-rate { display: grid; justify-items: end; flex: none; line-height: 1.1; }
.hb-rate b { font-size: 1.05rem; color: var(--navy); }
.hb-rate small { font-size: .7rem; color: var(--muted); }
.hb-week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; max-width: 22rem; }
.hb-week li { display: grid; justify-items: center; gap: .2rem; }
.hb-week small { font-size: .7rem; font-weight: 700; color: var(--blue-text); }
.hb-it .hl-row { display: grid; gap: .3rem; margin: 0; }
.hl-lab { display: flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 600; color: var(--muted); }
.hl-lab svg { width: .95rem; height: .95rem; flex: none; }
.hl-pick { display: flex; align-items: center; gap: .5rem; }
.hl-pick select { flex: 1 1 auto; min-width: 0; max-width: none; width: 100%; min-height: 44px; margin: 0; font-size: .92rem; padding: .3rem 2rem .3rem .7rem; }
.hl-pick button { flex: none; min-height: 44px; padding: 0 1rem; margin: 0; font-size: .88rem; }
.hb-acts { display: flex; flex-wrap: wrap; gap: .5rem; }
.hb-acts form { margin: 0; }
.hb-acts button { min-height: 40px; padding: 0 1rem; font-size: .85rem; margin: 0; }

/* Round 115: client routine notes with a status, review, done and delete */
.rq-tag { display: inline-flex; align-items: center; min-height: 22px; padding: 0 .55rem; margin-right: .45rem; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.rq-tag.rq-new { background: #fbeed6; color: #7a5420; }
.rq-tag.rq-rev { background: #e3eef3; color: #1f4f63; }
.rq-tag.rq-done { background: #e1f1e6; color: #2f6b45; }
.rb-req-when { display: flex; align-items: center; flex-wrap: wrap; gap: .2rem; }
.rq-note { background: #f6f3ec; border-radius: 10px; padding: .45rem .6rem; font-size: .9rem; }
.rq-acts { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; margin-top: .5rem; }
.rq-acts form { margin: 0; }
.rq-acts button, .rq-acts summary.button { display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: 0 .95rem; font-size: .85rem; margin: 0; }
.rq-acts svg { width: 16px; height: 16px; flex: none; }
.rq-review { flex: 1 1 100%; order: 3; }
.rq-review > summary { list-style: none; cursor: pointer; width: max-content; }
.rq-review > summary::-webkit-details-marker { display: none; }
.rq-review[open] > summary { margin-bottom: .5rem; }
.rq-review:not([open]) { flex: 0 0 auto; order: 0; }
.rq-form { display: grid; gap: .5rem; }
.rq-form textarea { width: 100%; }
.rq-form button { justify-self: start; min-height: 44px; }
.rq-donelist { margin-top: .6rem; border-top: 1px solid #e3e8ea; padding-top: .5rem; }
.rq-donelist > summary { cursor: pointer; font-weight: 700; color: var(--blue-text); min-height: 36px; display: flex; align-items: center; }
.rb-req.rq-done { opacity: .85; }

/* Round 115: more detail on the body answers */
.rb-hds { display: grid; gap: .7rem; margin: .7rem 0 0; }
.rb-hd { border: 1px solid var(--line); border-radius: 14px; padding: .7rem .8rem .8rem; margin: 0; background: #faf9f6; display: grid; gap: .45rem; }
.rb-hd[hidden] { display: none; }
.rb-hd legend { font-weight: 800; color: var(--navy); font-size: .95rem; padding: 0 .2rem; }
.rb-hd legend small { font-weight: 500; color: var(--muted); }
.rb-hd-q { margin: .1rem 0 0; font-size: .85rem; font-weight: 700; color: var(--navy); }
.rb-hd .rb-chips { margin: 0; }
.rb-hd .rt-f { margin: .2rem 0 0; }
.rb-hd textarea { width: 100%; }
.rb-sc-flag { color: #8a3b2f; }
.rb-hd legend { float: left; width: 100%; padding: 0; margin: 0 0 .15rem; line-height: 1.3; }
.rb-hd legend + * { clear: both; }
.hb-acts:has(> form.swipe-ready) { display: none; }

/* Round 116: the routine as time blocks, with Schedule for exact times and levels */
.rb-blocks { display: grid; gap: 1.1rem; }
.rb-block { display: grid; gap: .6rem; }
.rb-block-h { padding: 0 .1rem; }
.rb-block-h h2 { margin: 0; color: #fff; font-size: 1.3rem; line-height: 1.2; }
.rb-block-h p { margin: .15rem 0 0; color: rgba(255,255,255,.78); font-size: .92rem; font-weight: 600; }
.rb-fixed-in { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.rb-fixed-in li { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: .55rem; align-items: center; padding: .6rem .75rem; border-radius: 14px; background: #f3e7d3; color: #3d2c10; }
.rb-fixed-in .rb-fixed-ic { grid-column: 1; grid-row: 1 / 3; display: inline-flex; width: 32px; height: 32px; border-radius: 10px; background: #8a6326; color: #fff; align-items: center; justify-content: center; }
.rb-fixed-ic svg { width: 17px; height: 17px; }
.rb-fixed-in b { grid-column: 2; grid-row: 1; font-size: .98rem; }
.rb-fixed-in span:not(.rb-fixed-ic) { grid-column: 2 / 4; grid-row: 2; font-size: .85rem; opacity: .85; }
.rb-fixed-in small { grid-column: 3; grid-row: 1; font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #8a6326; }
.rb-item-h { display: flex; align-items: flex-start; gap: .6rem; }
.rb-dur { flex: none; margin: 0; display: grid; justify-items: end; gap: .05rem; text-align: right; line-height: 1.15; }
.rb-dur b { font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #2f6b45; }
.rb-dur span { font-size: 1rem; font-weight: 800; color: var(--navy); white-space: nowrap; }
.rb-sched { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); border-radius: 16px; }
.rb-sched > summary { list-style: none; cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .5rem; min-height: 52px; padding: .5rem 1rem; color: #fff; font-weight: 800; font-size: 1rem; }
.rb-sched > summary::-webkit-details-marker { display: none; }
.rb-sched > summary svg { width: 19px; height: 19px; flex: none; }
.rb-sched > summary small { font-weight: 600; font-size: .82rem; color: rgba(255,255,255,.75); }
.rb-sched > summary::after { content: "+"; margin-left: auto; font-size: 1.3rem; line-height: 1; }
.rb-sched[open] > summary::after { content: "\2212"; }
.rb-sched > .rb-hint { margin: 0 1rem .6rem; color: rgba(255,255,255,.8); }
.rb-sched-it { background: #fff; border-radius: 14px; margin: 0 .55rem .55rem; padding: .8rem .85rem; display: grid; gap: .6rem; }
.rb-sched-it h3 { margin: 0; font-size: 1.02rem; color: var(--navy); }
.rb-sched-it .rb-levels { margin: 0; }
.rb-running { margin: 0 0 .75rem; }
.rb-running p { margin: .25rem 0 0; }
.rb-startpick { border: 0; margin: .4rem 0 0; padding: 0; display: grid; gap: .5rem; }
.rb-start { position: relative; display: block; }
.rb-start input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rb-start span { display: grid; gap: .15rem; padding: .75rem .9rem .75rem 2.6rem; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; position: relative; }
.rb-start span::before { content: ""; position: absolute; left: .9rem; top: .95rem; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #9aa7ad; box-sizing: border-box; }
.rb-start b { color: var(--navy); font-size: 1rem; }
.rb-start small { color: var(--muted); font-size: .85rem; line-height: 1.35; }
.rb-start input:checked + span { border-color: var(--navy); background: #eef3f5; }
.rb-start input:checked + span::before { border: 6px solid var(--navy); }
.rb-start input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.rb-name[hidden] { display: none; }

/* Round 117: Lucky Dip (coach): the variation form, the generator picker, class tools */
.lk-fmts, .lk-when { border: 0; margin: 0 0 .6rem; padding: 0; display: grid; gap: .5rem; }
.lk-part[hidden], .lk-block[hidden], .lk-prow[hidden], .lk-whenwrap[hidden] { display: none; }
.lk-part { display: grid; gap: .6rem; padding-top: .3rem; }
.lk-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.lk-blocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem; }
.lk-block textarea { min-height: 6.5rem; }
.lk-whenrow { display: flex !important; flex-wrap: wrap; align-items: center; gap: .5rem; min-height: 48px; padding: .4rem .7rem; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; font-weight: 600; }
.lk-whenrow input[type=radio] { width: 20px; height: 20px; margin: 0; accent-color: var(--navy); }
.lk-whenrow input[type=number] { width: 4.6rem; min-height: 40px; text-align: center; }
.lk-whenrow:has(input[type=radio]:checked) { border-color: var(--navy); background: #eef3f5; }
.lk-pool { display: grid; gap: .6rem; }
.lk-prow { margin: 0; padding: .7rem; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .75fr) minmax(0, 1.08fr) minmax(0, 1.12fr) minmax(0, .98fr) minmax(0, 1.05fr); gap: .5rem; align-items: end; }
/* Round 134: six fields on one line (How and Max per game added), the tick boxes in a row underneath */
.lk-pchecks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .4rem; }
.lk-pspec { white-space: nowrap; }
.lk-prow select { font-size: .88rem; padding-left: .5rem; padding-right: 1.5rem; }
.lk-prow label { display: grid; gap: .2rem; font-size: .78rem; font-weight: 600; color: var(--muted); margin: 0; }
.lk-prow input[type=text], .lk-prow select { width: 100%; min-width: 0; }
.lk-pspec { display: flex !important; align-items: center; gap: .35rem; min-height: 44px; padding: 0 .6rem; border-radius: 999px; background: var(--grey, #f1f0ea); color: var(--navy) !important; font-size: .85rem !important; font-weight: 700 !important; cursor: pointer; }
.lk-pspec input { width: 18px; height: 18px; margin: 0; accent-color: #b8862b; }
.lk-prow.is-special { border-color: #e8c66a; background: linear-gradient(100deg, #fff4cf, #fffaf0); }
.lk-prow.is-special .lk-pspec:not(.lk-pall):not(.lk-ppart):not(.lk-pcond) { background: linear-gradient(135deg, #f7d774, #e8b53e); color: #3b2a07 !important; }
.lk-pall input { accent-color: #e4553a; }
.lk-prow.is-all { border-color: #ff9c80; background: linear-gradient(100deg, #ffe4da, #fffaf7); }
.lk-prow.is-special.is-all { background: linear-gradient(100deg, #fff4cf, #ffe4da); }
.lk-prow.is-all .lk-pall { background: linear-gradient(135deg, #ff8a66, #e4553a); color: #fff !important; }
.lk-ppart input { accent-color: #6a3fc2; }
.lk-prow.is-partner { border-color: #b9a2f2; background: linear-gradient(100deg, #ece4ff, #fbf9ff); }
.lk-prow.is-partner .lk-ppart { background: linear-gradient(135deg, #9b77ee, #6a3fc2); color: #fff !important; }
.lk-pcond input { accent-color: #138a82; }
.lk-prow.is-cond { border-color: #8fd9d0; background: linear-gradient(100deg, #dcf6f2, #f8fefd); }
.lk-prow.is-cond .lk-pcond { background: linear-gradient(135deg, #39c2b5, #138a82); color: #fff !important; }
.lk-prow.is-cond .lk-popts, .lk-prow.is-cond .lk-punit, .lk-prow.is-cond .lk-phow { opacity: .35; pointer-events: none; }
@media (max-width: 720px) {
    .lk-prow { display: grid; grid-template-columns: 1fr 1fr; }
    .lk-pname { grid-column: 1 / -1; }
    .lk-pspec { justify-self: start; }
    .lk-pair { grid-template-columns: 1fr; }
}
.lk-genlist { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .5rem; }
.lk-tools h2 .tag { vertical-align: middle; }
.lk-loglist { margin: .3rem 0 0; padding-left: 1.3rem; display: grid; gap: .2rem; }
.lk-steph { display: flex; align-items: center; gap: .6rem; font-size: 1.3rem; margin-bottom: .6rem; }
.lk-stepno { flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 800; }
.lk-subh { font-size: 1rem; margin: 1.1rem 0 .4rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.lk-stepcard .lk-subh:first-of-type { border-top: 0; padding-top: 0; margin-top: .6rem; }
.lk-genrow { display: flex; align-items: center; gap: .5rem; }
.lk-genrow .rb-start { flex: 1; min-width: 0; }
.lk-genedit { flex: none; }
.lk-gendel { flex: none; color: #b4424b; border-color: #db6e76; background: #fff; }   /* Round 130 */

/* Round 121: the Resources timers in the Workout Player's timer look (play.css .pl-runfull): a phase colour behind everything, a pill, the
   exercise name, a thick ring that drains, Ready / Set / Go for the get-ready count, the big tan button, an outline Skip, small links */
.tmr-tabs { gap: .5rem; }
.tmr-tab { min-height: 44px; padding: 0 1.2rem; border-color: rgba(24,54,66,.18); color: var(--navy); background: #fff; }
.tmr-tab[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.tmr-stage { --ring: clamp(190px, min(72vw, 300px, calc(100vh - 470px)), 300px); --ring: clamp(190px, min(72vw, 300px, calc(100dvh - 470px)), 300px);
    background: #183642; border-radius: 28px; padding: 1.1rem 1.1rem 1rem; gap: .55rem; transition: background .3s ease; }
.tmr-stage.seg-idle, .tmr-stage.seg-done { background: #183642; }
.tmr-stage.seg-prep { background: #5c4a2a; }
.tmr-stage.seg-work, .tmr-stage.mode-stopwatch.seg-work, .tmr-stage.mode-countdown.seg-work { background: #0e4a32; }
.tmr-stage.seg-rest { background: #2f5d75; }
.tmr-stage.seg-roundrest { background: #3d4f7a; }
.tmr-phase { display: inline-block; margin: 0; font-size: .95rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2; padding: .32rem 1rem; border-radius: 999px; background: rgba(255,255,255,.2); color: #fff; }
.tmr-stage.seg-idle .tmr-phase, .tmr-stage.seg-done .tmr-phase { background: var(--tan); color: var(--navy); }
.tmr-name { margin: 0; font-size: clamp(1.5rem, 6.5vw, 2.1rem); font-weight: 800; line-height: 1.15; color: #fff; letter-spacing: -.01em; }
.tmr-ring { margin: .2rem 0; }
.tmr-track { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 8; }
.tmr-prog { fill: none; stroke: #9af0c1; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset .2s linear, stroke .3s ease; }
.tmr-stage.seg-idle .tmr-prog, .tmr-stage.seg-prep .tmr-prog, .tmr-stage.seg-rest .tmr-prog, .tmr-stage.seg-roundrest .tmr-prog, .tmr-stage.seg-done .tmr-prog { stroke: var(--tan); }
.tmr-stage.seg-prep .tmr-track { animation: tmr-pulse 1s ease-in-out infinite; }
.tmr-face { flex-direction: column; gap: .15rem; }
.tmr-digits { font-size: calc(var(--ring) * .25); font-weight: 800; letter-spacing: -.02em; }
.tmr-digits.long { font-size: calc(var(--ring) * .17); }
.tmr-digits.sec { font-size: calc(var(--ring) * .1); opacity: .85; }
.tmr-of { font-size: .95rem; font-weight: 600; opacity: .8; min-height: 1.2em; }
.tmr-of:empty { display: none; }
.tmr-word { display: block; font-size: calc(var(--ring) * .21); font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.tmr-word[hidden] { display: none; }
.tmr-word.w-ready { color: var(--tan); }
.tmr-word.w-set { color: #ffd98a; }
.tmr-word.w-go { color: #9af0c1; }
.tmr-word.pop { animation: tmr-pop .55s cubic-bezier(.2, 1.4, .4, 1) both; }
.tmr-sub { margin: 0; font-size: 1rem; font-weight: 700; opacity: 1; color: rgba(255,255,255,.82); min-height: 0; }
.tmr-sub:empty { display: none; }
.tmr-next { margin: 0; font-size: 1rem; font-weight: 700; opacity: 1; color: rgba(255,255,255,.82); }
.tmr-ctl { width: 100%; max-width: 420px; display: grid; gap: .55rem; margin-top: .3rem; }
.tmr .tmr-main { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 58px; margin: 0; border: 0; border-radius: 999px; background: var(--tan); color: var(--navy); font: inherit; font-size: 1.2rem; font-weight: 800; cursor: pointer; }
.tmr .tmr-main:active { filter: brightness(.95); }
.tmr .tmr-main .ico { width: 22px; height: 22px; }
.tmr .tmr-main .tmr-i-pause, .tmr .tmr-main.is-running .tmr-i-play { display: none; }
.tmr .tmr-main.is-running .tmr-i-pause { display: block; }
.tmr .tmr-alt { width: 100%; min-height: 50px; margin: 0; border-radius: 999px; background: transparent; border: 2px solid rgba(255,255,255,.55); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.tmr .tmr-alt:disabled { opacity: .4; cursor: default; }
.tmr .tmr-alt[hidden] { display: none; }
.tmr-links { display: flex; align-items: center; justify-content: center; gap: .3rem .9rem; flex-wrap: wrap; }
.tmr .tmr-link { min-height: 44px; padding: 0 .5rem; margin: 0; border: 0; background: none; color: var(--tan); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tmr .tmr-link:disabled { opacity: .4; cursor: default; }
.tmr .tmr-link[hidden] { display: none; }
.tmr .tmr-ib { width: 44px; height: 44px; margin: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tmr .tmr-ib .ico { width: 20px; height: 20px; }
.tmr .tmr-ib.off { opacity: .5; }
.tmr-stage.style-gym .tmr-main { background: #ff3b30; color: #fff; }
.tmr-stage.style-gym .tmr-prog { stroke: #ff3b30; }
.tmr-stage.style-gym .tmr-phase { background: rgba(255,59,48,.25); color: #fff; }
.tmr-stage.tfull { --ring: clamp(200px, min(80vw, 380px, calc(100vh - 360px)), 380px); --ring: clamp(200px, min(80vw, 380px, calc(100dvh - 360px)), 380px); padding: calc(1rem + env(safe-area-inset-top, 0px)) 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px)); }
.tmr-stage.tfull .tmr-name { font-size: clamp(1.7rem, 7vw, 3rem); }
/* the settings: the player's − value + steppers */
.tmr-rows { display: grid; gap: .5rem; margin-bottom: .6rem; }
.tmr-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .5rem; background: var(--grey, #f1f0ea); border-radius: 14px; padding: .45rem .5rem .45rem 1rem; }
.tmr-row > label { margin: 0; font-weight: 800; color: var(--navy); }
.tmr-stp { display: grid; grid-template-columns: 44px 5.2rem 44px; align-items: center; gap: .3rem; }
.tmr-stp button { min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 12px; background: #fff; color: var(--navy); font: inherit; font-size: 1.4rem; font-weight: 800; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tmr-stp input { width: 100%; min-height: 44px; margin: 0; padding: 0 .2rem; text-align: center; font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; background: transparent; border: 0; color: var(--navy); -moz-appearance: textfield; appearance: textfield; }
.tmr-stp input::-webkit-outer-spin-button, .tmr-stp input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tmr-presets .chip { min-height: 44px; }
@keyframes tmr-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes tmr-pulse { 0%, 100% { stroke: rgba(255,255,255,.14); } 50% { stroke: rgba(255,255,255,.34); } }
@media (max-width: 520px) { .tmr-stage { padding: 1rem .8rem .9rem; border-radius: 24px; } }
@media (prefers-reduced-motion: reduce) { .tmr-word.pop, .tmr-stage.seg-prep .tmr-track { animation: none; } }
.tmr-stage.style-gym.seg-idle, .tmr-stage.style-gym.seg-work, .tmr-stage.style-gym.seg-done, .tmr-stage.style-gym.mode-countdown.seg-work, .tmr-stage.style-gym.mode-stopwatch.seg-work { background: #0a0a0a; }

/* Round 124: a workout in progress, on the coach's Training calendar and the training log; start and finish times on a session */
.live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #1b9a59; box-shadow: 0 0 0 0 rgba(27,154,89,.55); animation: live-pulse 1.6s ease-out infinite; vertical-align: middle; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(27,154,89,.55); } 80%, 100% { box-shadow: 0 0 0 8px rgba(27,154,89,0); } }
.wtile.live { border-color: #1b9a59; box-shadow: 0 0 0 2px rgba(27,154,89,.25); }
.wtile-live { display: flex; align-items: center; gap: .35rem; margin-top: .25rem; font-size: .78rem; font-weight: 700; color: #137a45; }
.play-live { border: 2px solid rgba(27,154,89,.35); }
.play-live h2 { display: flex; align-items: center; gap: .5rem; }
.play-times { display: flex; align-items: center; gap: .35rem; margin-top: -.4rem; }
.play-times .ico { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.trlive { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; background: #e8f6ee; border: 1px solid #9fd8b5; border-radius: 14px; padding: 12px 16px; margin: 0 0 14px; }
.trlive .button { margin-left: auto; }
/* Round 125: time between sets */
.play-gaps h2 { display: flex; align-items: center; gap: 8px; }
.play-gaps h2 svg { width: 20px; height: 20px; }
.gap-slow { background: #fde9df; color: #a2401c; }
td.gap-slow-c { color: #a2401c; font-weight: 700; white-space: nowrap; }
.gap-list li { align-items: center; }
/* Round 126: Coach's picks */
.hubrecs { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line, #e6e1da); }
.hubrecs h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.hubrecs h3 svg, .hubpicks h2 svg { width: 20px; height: 20px; color: #c98a2b; }
.hubrec-list li { gap: 8px; flex-wrap: wrap; }
.hubrec-list form { margin: 0; }
.hubrec-add { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-top: 10px; }
.hubrec-add label { margin: 0; }
@media (max-width: 760px) { .hubrec-add { grid-template-columns: 1fr; } }
.hubpicks { margin: 4px 0 22px; }
.hubpicks h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; }
.rp-chip.pick { background: #fbefd9; color: #8a5a12; font-weight: 700; }
@media (max-width: 760px) {
  .hubpicks .rc-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 2px 2px 10px; margin: 0 -2px; -webkit-overflow-scrolling: touch; }
  .hubpicks .rc { flex: 0 0 76%; scroll-snap-align: start; }
  .hubpicks .rc-img { aspect-ratio: 16 / 9; }
}
.hubpicks .rc-macros span:first-child { font-style: italic; }
/* Round 127: Training Now on the Dashboard */
#card-training { grid-column: 1 / -1; }
#card-training .dhead h2 { display: flex; align-items: center; gap: 8px; }
#card-training .gtag { margin-top: .9rem; }
.tn-go { flex: none; font-size: .8rem; font-weight: 700; padding: .35rem .75rem; border-radius: 999px; border: 1.5px solid var(--tan, #d8c3a5); color: var(--navy, #173a45); white-space: nowrap; }
.tn-go.live { background: #1f9d55; border-color: #1f9d55; color: #fff; }
.tn-live .dmsg { color: #1c7a43; }
@media (max-width: 560px) { .tn-go { font-size: .72rem; padding: .3rem .55rem; } }
/* Round 128: App usage */
.us-period { margin: .5rem 0 1rem; }
.us-kpis .trn small { font-size: .55em; color: var(--muted, #6b7280); font-weight: 600; }
.us-kpis .us-busy { font-size: 1.35rem; }
.us-cols { display: flex; align-items: flex-end; gap: 3px; height: 140px; padding-top: 6px; border-bottom: 1px solid #e6e1da; }
.us-col { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; min-width: 2px; }
.us-col i { display: block; width: 100%; background: #4f7f92; border-radius: 4px 4px 0 0; }
.us-hrs { height: 90px; }
.us-axis { display: flex; justify-content: space-between; margin: .3rem 0 0; }
.us-bar { display: inline-block; vertical-align: middle; width: 120px; height: 8px; background: #eef1f2; border-radius: 99px; overflow: hidden; margin-right: 6px; }
.us-bar i { display: block; height: 100%; background: #4f7f92; border-radius: 99px; }
.us-table td { white-space: nowrap; }
.us-two { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.2rem; }
.us-two > .card { margin: 0 0 1.2rem; }
@media (max-width: 860px) { .us-two { grid-template-columns: 1fr; } .us-bar { width: 70px; } }
.us-dow { list-style: none; padding: 0; margin: .3rem 0 0; }
.us-dow li { display: grid; grid-template-columns: 3rem 1fr 3rem; align-items: center; gap: 8px; padding: 3px 0; }
.us-dow .us-bar { width: 100%; }
.us-dow b { text-align: right; }
.us-mine-h { margin-top: 1.2rem; }
/* Round 129: Let's Catch Up */
.catchup-card { display: flex; gap: 14px; align-items: flex-start; background: linear-gradient(135deg, #fbf3e6, #f3e6d2); border: 1px solid #e7d3b4; border-radius: 18px; padding: 16px 18px; margin: 0 0 16px; }
.catchup-ic { flex: none; width: 42px; height: 42px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; color: #9a6a2a; }
.catchup-ic svg { width: 22px; height: 22px; }
.catchup-b h2 { margin: 0 0 4px; font-size: 1.15rem; }
.catchup-b p { margin: 0 0 10px; }
.catchup-acts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.catchup-acts form, .catchup-later { margin: 0; }
.catchup-later { margin-top: 10px; text-align: center; }
.catchup-q { font-weight: 700; margin: 14px 0 -4px; }
button.linkish { background: none; border: 0; padding: 0; color: var(--blue, #3f6f86); text-decoration: underline; font: inherit; cursor: pointer; min-height: 0; box-shadow: none; }

/* Round 135: Goal & Package (coach only). Statuses carry a symbol and words, not just colour. */
.cr-lede { max-width: 640px; }
.cr-headbtns { display: inline-flex; gap: .5rem; flex-wrap: wrap; }
.cr-banner { background: var(--tan-light); color: #5a4d36; border-radius: 14px; padding: .7rem 1rem; margin: 0 0 1rem; font-size: .92rem; }
.cr-review { background: var(--red-bg); color: var(--red); border-radius: 14px; padding: .75rem 1rem; margin: 0 0 1rem; font-size: .92rem; }
.cr-review ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.cr-status { display: inline-block; font-size: .72rem; font-weight: 700; padding: .1rem .6rem; border-radius: 999px; background: #e9ecee; color: var(--navy); margin-left: .25rem; vertical-align: middle; white-space: nowrap; }
.cr-status.ok { background: var(--green-bg); color: var(--green); }
.cr-status.warn { background: var(--red-bg); color: var(--red); }
.cr-status.muted { background: #eee; color: var(--muted); }
.cr-prov { display: inline-block; font-size: .7rem; font-weight: 700; padding: .05rem .5rem; border-radius: 999px; background: var(--tan-light); color: #5a4d36; border: 1px dashed var(--tan-text); }
.cr-list { list-style: none; margin: 0; padding: 0; }
.cr-list li { padding: .6rem 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; }
.cr-list li:last-child { border-bottom: 0; }
.cr-new { max-width: 580px; }
.cr-prospect { margin: 0 0 1rem; }
.cr-prospect summary { cursor: pointer; font-weight: 600; color: var(--blue-text); margin-bottom: .6rem; }
.cr-err { color: var(--red); font-weight: 600; font-size: .85rem; margin: -.4rem 0 .8rem; }
.cr-req { color: var(--red); font-weight: 600; }
.cr-check { display: flex; gap: .5rem; align-items: center; font-weight: 500; margin: 0 0 .5rem; }
.cr-check input { width: auto; margin: 0; flex: none; }

/* wizard */
.cr-wiz { max-width: 680px; }
.cr-wizhead h1 { margin-bottom: .1rem; }
.cr-steps { list-style: none; display: flex; gap: .3rem; padding: 0; margin: .6rem 0 1rem; }
.cr-steps li { flex: 1; min-width: 0; }
.cr-steps a { display: block; text-align: center; color: var(--muted); font-size: .72rem; font-weight: 600; text-decoration: none; }
.cr-steps a::before { content: ""; display: block; height: 6px; border-radius: 3px; background: var(--line); margin-bottom: .3rem; }
.cr-steps li.past a::before { background: var(--blue); }
.cr-steps li.on a { color: var(--navy); }
.cr-steps li.on a::before { background: var(--navy); }
.cr-stepn { display: none; }
.cr-stepl { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-stepcard { padding: 1.5rem; }
.cr-q { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.cr-q legend, .cr-qh, .cr-big { font-size: 1.25rem; font-weight: 800; color: var(--navy); line-height: 1.3; margin: 0 0 .8rem; padding: 0; }
.cr-q legend.small { font-size: .88rem; font-weight: 600; margin-bottom: .4rem; }
.cr-hint { margin: -.4rem 0 .8rem; }
.cr-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .5rem; }
.cr-opt { position: relative; margin: 0; font-weight: 600; font-size: .98rem; }
.cr-opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cr-opt span { display: flex; align-items: center; gap: .6rem; min-height: 52px; padding: .7rem 1rem; border: 1.5px solid #cdd0ca; border-radius: 14px; background: #fff; }
.cr-opt span::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--tan); background: #fff; }
.cr-opt input:checked + span { border-color: var(--navy); background: #eef3f5; }
.cr-opt input:checked + span::before { border-color: var(--navy); background: var(--navy); box-shadow: inset 0 0 0 3px #fff; }
.cr-opt input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.cr-days { display: flex; flex-wrap: wrap; gap: .4rem; }
.cr-day { position: relative; margin: 0; }
.cr-day input { position: absolute; opacity: 0; inset: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.cr-day span { display: grid; place-items: center; min-width: 48px; height: 40px; padding: 0 .6rem; border-radius: 999px; border: 1.5px solid var(--tan); font-weight: 700; font-size: .85rem; }
.cr-day input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.cr-day input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.cr-custom { margin-top: .4rem; }
.cr-nav { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: 1.2rem; flex-wrap: wrap; }
.cr-navr { display: inline-flex; gap: .5rem; flex-wrap: wrap; margin-left: auto; }
.cr-nav button { min-height: 44px; padding-left: 1.4rem; padding-right: 1.4rem; }
.cr-archive { margin: .5rem 0 0; text-align: right; }
.cr-archive .link { color: var(--muted); font-size: .85rem; }

/* recommendation */
.cr-kicker { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--blue-text); margin: 0 0 .3rem; }
.card.dark .cr-kicker { color: #9fc0d1; }
.cr-goaltext { font-size: 1.45rem; font-weight: 800; line-height: 1.25; margin: 0 0 .7rem; }
.cr-goal .small { color: #c9d6dc; }
.cr-why ul { padding-left: 1.2rem; margin: .3rem 0 .8rem; }
.cr-why h3 { font-size: .95rem; margin: .8rem 0 .3rem; }
.cr-flags { list-style: none; padding: 0 !important; }
.cr-flags li { display: flex; gap: .5rem; align-items: flex-start; padding: .25rem 0; }
.cr-flagico { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--red); color: #fff; font-weight: 800; font-size: .75rem; margin-top: .15rem; }
.cr-confid { margin: .5rem 0; background: #faf6f0; border-radius: 12px; padding: .5rem .8rem; }
.cr-confid summary { cursor: pointer; font-weight: 600; }
.cr-pkgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.cr-pkgs > .card { margin-bottom: 0; }
.cr-pkg { border: 1.5px solid var(--line); display: flex; flex-direction: column; }
.cr-pkg.main { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); }
.cr-pkg h2 { margin: 0; }
.cr-pkg form { margin-top: auto; }
.cr-pkgtag { margin: 0 0 .3rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--tan-text); }
.cr-pkg.main .cr-pkgtag { color: var(--navy); }
.cr-inc { list-style: none; padding: 0; margin: .4rem 0; }
.cr-inc li { display: flex; justify-content: space-between; gap: .8rem; padding: .35rem 0; border-bottom: 1px dashed var(--line); font-size: .9rem; }
.cr-pkgtotal { display: flex; justify-content: space-between; font-size: 1.1rem; margin: .6rem 0 .1rem; }
.cr-other summary { cursor: pointer; font-weight: 700; }
.cr-otherform { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: flex-end; margin-top: .8rem; }
.cr-otherform label { flex: 1 1 220px; margin: 0; }

/* editor */
.cr-edit { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
.cr-invest { position: sticky; top: 1rem; }
.cr-invest dl, .cr-totals { margin: 0 0 .6rem; }
.cr-invest dl div, .cr-totals div { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--line); }
.cr-invest dt, .cr-totals dt { color: var(--muted); }
.cr-invest dd, .cr-totals dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.cr-tot { border-bottom: 0 !important; font-size: 1.15rem; }
.cr-tot dt { color: var(--navy) !important; font-weight: 700; }
.cr-invest button { width: 100%; margin-top: .5rem; min-height: 44px; }
.cr-items { display: grid; gap: .7rem; }
.cr-item { border: 1.5px solid var(--line); border-radius: 16px; padding: .8rem 1rem .3rem; margin: 0; min-width: 0; }
.cr-item.inc { background: #f7f9f6; }
.cr-item.gone { opacity: .5; }
.cr-itemtop { display: flex; gap: .8rem; align-items: flex-end; }
.cr-itemlabel { flex: 1; margin-bottom: .3rem; }
.cr-linetotal { font-weight: 800; font-size: 1.05rem; padding-bottom: .9rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cr-itemmeta { margin: 0 0 .5rem; }
.cr-itemgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.cr-itemgrid label { margin-bottom: .5rem; font-size: .8rem; }
.cr-itemgrid input[readonly] { background: #f2f2f2; color: var(--muted); }
.cr-itemflags { display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
.cr-itemflags .cr-check { font-size: .85rem; }
.cr-note { font-size: .8rem; }
.cr-add { margin-top: 1rem; padding-top: .8rem; border-top: 1px dashed var(--line); }
.cr-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }

/* proposal */
.cr-prophead { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start; margin-bottom: .8rem; }
.cr-prophead h1 { margin: 0; }
.cr-propstatus { text-align: right; }
.cr-goalbox ul, .cr-terms ul { padding-left: 1.2rem; margin: .3rem 0 .6rem; }
.cr-table td.num, .cr-table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cr-table tr.cr-sub th { padding-top: 1rem; }
.cr-totals { margin-top: .8rem; max-width: 420px; margin-left: auto; }
.cr-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 .5rem; }
.cr-summary { font-size: .82rem; color: var(--muted); margin-bottom: 1rem; }
.cr-approve form { margin-bottom: .6rem; }
.cr-fu summary { cursor: pointer; font-weight: 600; color: var(--blue-text); margin: .4rem 0; }
.cr-link { max-width: 580px; }
.cr-timeline { list-style: none; padding: 0; margin: 0; }
.cr-tlhead { margin: 0 0 .3rem; }
.cr-tlrow { margin: .2rem 0; font-size: .92rem; }

/* settings */
.cr-svchead { margin: 0 0 .6rem; font-size: 1.1rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.cr-pkgitems { border: 0; padding: 0; margin: 0 0 .6rem; min-width: 0; }
.cr-pkgitems legend { font-weight: 700; font-size: .88rem; margin-bottom: .4rem; padding: 0; }
.cr-pkgitem { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) 70px auto; gap: .4rem .6rem; align-items: center; padding: .35rem 0; border-bottom: 1px dashed var(--line); }
.cr-pkgitem .cr-check { margin: 0; font-size: .85rem; }
.cr-pkgitem select, .cr-pkgitem input[type=number] { margin: 0; padding: .4rem .5rem; font-size: .85rem; }

@media (max-width: 860px) {
    .cr-edit { grid-template-columns: minmax(0, 1fr); }
    .cr-invest { position: static; order: 2; }
}
@media (max-width: 560px) {
    .cr-opts { grid-template-columns: minmax(0, 1fr); }
    .cr-stepl { display: none; }
    .cr-steps li.on .cr-stepl { display: block; overflow: visible; }
    .cr-steps li.on { flex: 3; }
    .cr-itemgrid, .cr-three { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .cr-itemgrid label:first-child { grid-column: 1 / -1; }
    .cr-pkgitem { grid-template-columns: minmax(0, 1fr) 64px; }
    .cr-pkgitem select { grid-column: 1 / -1; grid-row: 2; }
    .cr-goaltext { font-size: 1.25rem; }
    .cr-propstatus { text-align: left; }
    .cr-table th:nth-child(4), .cr-table td:nth-child(4) { display: none; }
}
@media print {
    .cr-noprint, .sidebar, .mbar, .crumb, .flash, .foot, .bnav, .fnav { display: none !important; }
    .cr-print .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
    .cr-print { color: #000; }
}

/* ---------- Round 136: Dice Multiplier (coach pages) */
.dc-row { padding: .55rem .7rem; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; }
.dc-play { flex: 1; min-width: 0; display: grid; gap: .1rem; color: inherit; text-decoration: none; }
.dc-play small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-delform { margin: 0; flex: none; }
.dc-go { flex: none; }
.dc-rows { display: grid; gap: .5rem; margin: .6rem 0; }
.dc-frow { margin: 0; padding: .6rem .7rem; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; display: grid; grid-template-columns: 1.6rem minmax(0, .7fr) minmax(0, .9fr) minmax(0, 2.2fr); gap: .5rem; align-items: end; }
.dc-frow[hidden] { display: none; }
.dc-frow label { display: grid; gap: .2rem; font-size: .78rem; font-weight: 600; color: var(--muted); margin: 0; }
.dc-frow input, .dc-frow select { width: 100%; min-width: 0; }
.dc-fno { align-self: center; justify-self: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--tan, #d7c3a6); color: var(--navy, #183642); font-weight: 800; font-size: .8rem; display: grid; place-items: center; }
@media (max-width: 560px) {
    .dc-frow { grid-template-columns: 1.6rem minmax(0, 1fr) minmax(0, 1.2fr); }
    .dc-frow .dc-fname { grid-column: 2 / -1; }
    .dc-fno { grid-row: 1 / 3; }
    .dc-row { flex-wrap: wrap; }
    .dc-play { flex-basis: 100%; }
}

/* ---------- Round 137: Notification settings (coach) */
.nc-lead { max-width: 640px; margin: -.2rem 0 1rem; }
.nc-status { display: grid; gap: .55rem; }
.nc-stat { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; }
.nc-stat .ico { width: 20px; height: 20px; flex: none; color: var(--blue-text); margin-top: .1rem; }
.nc-quick { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 1rem 0 .8rem; }
.nc-head, .nc-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px 76px 250px; gap: .6rem; align-items: center; }
.nc-head { padding: 0 .9rem .3rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--blue-text); }
.nc-head span:nth-child(n+2) { text-align: center; }
.nc-list { display: grid; gap: .5rem; }
.nc-row { margin: 0; padding: .75rem .9rem; border: 1.5px solid var(--line); border-radius: 16px; background: #fff; min-width: 0; }
.nc-row.is-off { background: #f6f4f1; }
.nc-row.is-off .nc-ico { background: #e7e3dd; color: #8a979e; }
.nc-what { display: flex; gap: .7rem; align-items: flex-start; min-width: 0; }
.nc-ico { flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--navy); color: #fff; display: grid; place-items: center; }
.nc-ico .ico { width: 20px; height: 20px; }
.nc-txt { display: grid; gap: .1rem; min-width: 0; }
.nc-label { font-weight: 700; }
.nc-about { font-size: .82rem; color: var(--muted); }
.nc-sum { font-size: .75rem; font-weight: 700; color: var(--green); }
.nc-row.is-off .nc-sum { color: #a0453a; }
.nc-tog { margin: 0; display: grid; justify-items: center; cursor: pointer; }
.nc-tog input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nc-tog span { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; width: 64px; height: 38px; border-radius: 12px; border: 1.5px solid var(--line); color: #9aa5ab; background: #fff; transition: background .15s, color .15s; }
.nc-tog span .ico { width: 18px; height: 18px; }
.nc-tog em { display: none; font-style: normal; font-size: .8rem; font-weight: 700; }
.nc-tog input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.nc-tog input:focus-visible + span, .nc-mail input:focus-visible + span { outline: 3px solid var(--blue-text); outline-offset: 2px; }
.nc-mail { display: inline-flex; background: #f2f0ec; border-radius: 12px; padding: .2rem; gap: .15rem; justify-self: end; }
.nc-mail label { margin: 0; cursor: pointer; }
.nc-mail input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nc-mail span { display: block; padding: .45rem .7rem; border-radius: 10px; font-size: .82rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.nc-mail input:checked + span { background: var(--navy); color: #fff; }
.nc-note { margin: .7rem .2rem 1rem; max-width: 680px; }
.nc-timing h2 { margin-top: 0; }
.nc-timing select { width: auto; display: inline-block; margin: 0 .2rem; padding: .35rem .5rem; }
.nc-line { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .6rem 0 .1rem; font-weight: 600; }
.nc-quietrow label { margin: 0; font-weight: 600; }
.nc-quietrow[data-off] { opacity: .45; }
.nc-save { padding: .4rem 0 1rem; }
.nc-save .primary { min-width: 180px; }
.nhead .nset { display: inline-flex; align-items: center; gap: .25rem; font-size: .85rem; }
@media (max-width: 760px) {
    .nc-head { display: none; }
    .nc-row { grid-template-columns: auto auto minmax(0, 1fr); gap: .6rem .5rem; }
    .nc-what { grid-column: 1 / -1; }
    .nc-tog span { width: auto; padding: 0 .7rem; }
    .nc-tog em { display: inline; }
    .nc-mail { justify-self: stretch; display: flex; }
    .nc-mail label { flex: 1; }
    .nc-mail span { text-align: center; padding: .5rem .3rem; }
}
.nc-entry { display: flex; flex-wrap: wrap; gap: .4rem .7rem; align-items: center; margin: 0 0 .8rem; }

/* Round 139: rate card groups, assigned packages, the Package Setup Guide and the client's My package page. */
.cr-jump { margin: -.4rem 0 1rem; }
.cr-pre { white-space: pre-line; }
.cr-conds { background: #f7f7f4; border-radius: 12px; padding: .8rem 1rem; }
.cr-group { margin: 0 0 .8rem; }
.cr-group > summary { cursor: pointer; padding: .8rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; list-style-position: inside; }
.cr-group[open] > summary { margin-bottom: .8rem; }
.cr-group > .card { margin-left: .4rem; }
.cr-delrow { margin: .4rem 0 0; text-align: right; }
.link.danger { color: #b4424b; border: 0; }
.cr-add > summary, .cr-edit > summary { cursor: pointer; }
.cr-add[open] > summary, .cr-edit[open] > summary { margin-bottom: .8rem; }
.cr-packs h3 { margin-top: 0; }
.cr-packrow { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.cr-packrow p { margin: .2rem 0; }
.cr-assignnew { margin-top: .8rem; }
.cr-assignnew > summary { cursor: pointer; font-weight: 600; color: var(--blue-text); margin-bottom: .6rem; }
.cr-assignnew form { max-width: 420px; }
.cr-del { margin-left: auto; }
.cr-tlhead { display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: baseline; }
/* setup guide */
.cr-setuphead h2 { margin-bottom: .2rem; }
.cr-bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin: .4rem 0 1rem; max-width: 520px; }
.cr-bar span { display: block; height: 100%; background: var(--navy); width: 0; }
.cr-bar-1 { width: 12.5% !important; } .cr-bar-2 { width: 25% !important; } .cr-bar-3 { width: 37.5% !important; } .cr-bar-4 { width: 50% !important; }
.cr-bar-5 { width: 62.5% !important; } .cr-bar-6 { width: 75% !important; } .cr-bar-7 { width: 87.5% !important; } .cr-bar-8 { width: 100% !important; }
.cr-setup { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1rem; align-items: start; }
.cr-guide { padding: .6rem; position: sticky; top: 1rem; }
.cr-guide ol { list-style: none; margin: 0; padding: 0; }
.cr-guide a { display: flex; gap: .5rem; align-items: center; padding: .5rem .6rem; border-radius: 10px; text-decoration: none; color: var(--navy); font-weight: 600; font-size: .9rem; }
.cr-guide li.on a { background: #eef3f5; }
.cr-stico { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--tan); font-size: .75rem; font-weight: 800; }
.cr-st-done .cr-stico { background: var(--green); border-color: var(--green); color: #fff; }
.cr-st-skipped .cr-stico, .cr-st-na .cr-stico { border-color: #c9c9c9; color: var(--muted); }
.cr-st-skipped a, .cr-st-na a { color: var(--muted); }
.cr-stepbtns { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.cr-stepbtns .primary { margin-left: auto; }
.cr-stepbtns button { min-height: 44px; }
.cr-stepinc { background: #f7f7f4; border-radius: 12px; padding: .6rem .9rem; margin: 0 0 1rem; }
.cr-stepinc p { margin: 0 0 .3rem; }
.cr-stepinc ul { margin: 0; padding-left: 1.1rem; }
.cr-inclist { list-style: none; margin: 0 0 1rem; padding: 0; }
.cr-incrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; align-items: start; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.cr-incrow > .cr-check { margin-top: .6rem; }
.cr-incrow > .cr-check input { width: 22px; height: 22px; }
.cr-incfields input[type=text] { margin-bottom: .35rem; }
.cr-incmeta { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: center; margin-bottom: .35rem; }
.cr-incmeta label { display: inline-flex; gap: .3rem; align-items: center; margin: 0; }
.cr-incmeta input { width: 5rem; }
.cr-incadd { border: 1px dashed var(--line); border-radius: 12px; padding: .6rem .9rem; }
.cr-inlinefield { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }
.cr-inlinefield label { margin: 0; }
.cr-links { list-style: none; padding: 0; margin: 0 0 1rem; }
.cr-links li { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.cr-condbox { margin: 0 0 1rem; }
.cr-condbox > summary { cursor: pointer; font-weight: 600; margin-bottom: .5rem; }
.cr-finish { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; }
.cr-finish p { margin: 0; }
/* package summary */
.cr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; margin-bottom: .4rem; }
.cr-stat { margin: 0; }
.cr-stat p { margin: 0 0 .2rem; }
.cr-stat .cr-big { margin: 0 0 .2rem; font-size: 1.1rem; }
.cr-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.cr-setlist, .cr-inclview { list-style: none; margin: 0; padding: 0; }
.cr-setlist li, .cr-inclview li { padding: .4rem 0; border-bottom: 1px solid var(--line); }
.cr-setlist li:last-child, .cr-inclview li:last-child { border-bottom: 0; }
.cr-tick { display: inline-block; width: 1.2rem; color: var(--green); font-weight: 800; }
.cr-tick.off { color: var(--muted); font-weight: 400; }
.cr-inlineform { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: flex-end; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.cr-inlineform label { margin: 0; }
.cr-delform { border-bottom: 0; }
@media (max-width: 760px) {
    .cr-setup { grid-template-columns: 1fr; }
    .cr-guide { position: static; }
    .cr-guide ol { display: flex; overflow-x: auto; gap: .2rem; scrollbar-width: none; }
    .cr-guide li { flex: none; }
    .cr-guide a { font-size: .8rem; padding: .4rem .5rem; white-space: nowrap; }
    .cr-stepbtns .primary { margin-left: 0; width: 100%; order: -1; }
}
/* client app: My package */
.pk-card h2 { margin: 0; }
.pk-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.pk-tag { font-size: .75rem; font-weight: 700; padding: .1rem .6rem; border-radius: 999px; background: var(--tan-light); color: #5a4d36; }
.pk-when { font-weight: 700; color: var(--navy); margin: .3rem 0 .5rem; }
.pk-bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin: 0 0 1rem; }
.pk-bar span { display: block; height: 100%; background: var(--navy); width: 0; }
.pk-w1 { width: 10% !important; } .pk-w2 { width: 20% !important; } .pk-w3 { width: 30% !important; } .pk-w4 { width: 40% !important; } .pk-w5 { width: 50% !important; }
.pk-w6 { width: 60% !important; } .pk-w7 { width: 70% !important; } .pk-w8 { width: 80% !important; } .pk-w9 { width: 90% !important; } .pk-w10 { width: 100% !important; }
.pk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; margin: 0 0 1rem; }
.pk-stats div { background: #f5f6f3; border-radius: 14px; padding: .7rem .8rem; }
.pk-stats dt { font-size: .78rem; color: var(--muted); font-weight: 600; }
.pk-stats dd { margin: .15rem 0 0; font-size: 1rem; }
.pk-stats dd strong { font-size: 1.4rem; color: var(--navy); }
.pk-facts { list-style: none; padding: 0; margin: 0 0 1rem; }
.pk-facts li { padding: .35rem 0; border-bottom: 1px solid var(--line); display: flex; gap: .6rem; justify-content: space-between; flex-wrap: wrap; }
.pk-incs { margin: 0 0 1rem; padding-left: 1.2rem; }
.pk-incs li { padding: .2rem 0; }
.pk-pre { white-space: pre-line; }
.pk-conds { margin: 0 0 .8rem; }
.pk-conds > summary { cursor: pointer; font-weight: 600; color: var(--blue-text); }

/* Round 140: proposal PDF button, the goal finder (website and client app) and new requests. */
@media (display-mode: standalone) { .cr-print-btn { display: none; } }
@media (hover: none) and (pointer: coarse) { .cr-print-btn { display: none; } }
.crf { max-width: 760px; margin: 0 auto; }
.crf-kicker { margin: 0 0 .2rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tan-text); }
.crf h1 { margin-top: 0; }
.crf-lede { font-size: 1.02rem; color: #4a5458; margin: 0 0 1.2rem; }
.crf-form .crf-q { background: #fff; border-radius: 16px; padding: 1rem 1rem .6rem; margin: 0 0 .9rem; }
.crf-form .crf-q legend { float: left; width: 100%; font-size: 1.1rem; margin-bottom: .7rem; }
.crf-form .crf-q legend + * { clear: both; }
.crf-q.has-err { box-shadow: 0 0 0 2px var(--red); }
.crf-n { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; margin-right: .3rem; border-radius: 50%; background: var(--navy); color: #fff; font-size: .85rem; vertical-align: 2px; }
.crf-err { color: var(--red); font-weight: 600; margin: 0 0 .5rem; clear: both; }
.crf-free { display: block; margin: 0 0 1rem; font-weight: 600; }
.crf-free input { margin-top: .35rem; }
.crf-go { width: 100%; min-height: 52px; font-size: 1.05rem; }
.crf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.crf-back { margin: 0 0 .6rem; }
.crf-pkg { border: 1.5px solid var(--line); }
.crf-pkg.main { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); }
.crf-pkg h2 { margin: 0 0 .2rem; }
.crf-pkg.main .cr-pkgtag { color: var(--navy); }
.crf-inc { margin: .3rem 0 .8rem; padding-left: 1.2rem; }
.crf-inc li { padding: .15rem 0; }
.crf-price { font-size: 1.1rem; margin: 0 0 .3rem; color: var(--navy); }
.crf-pick { display: flex; align-items: center; gap: .6rem; margin: .8rem 0 0; padding: .7rem .9rem; border-radius: 12px; background: #eef3f5; font-weight: 600; cursor: pointer; }
.crf-pick input { width: 20px; height: 20px; margin: 0; flex: none; }
.crf-why ul { margin: 0; padding-left: 1.2rem; }
.crf-why li { padding: .2rem 0; }
.crf-contact textarea { width: 100%; }
.crf-done { text-align: center; }
.crf-pending { border-left: 4px solid var(--tan); }
.crf-onpack { margin: 0 0 1rem; }
.cr-reqs { border-left: 4px solid var(--navy); }
.cr-count { display: inline-block; min-width: 1.5rem; padding: 0 .45rem; border-radius: 999px; background: var(--navy); color: #fff; font-size: .8rem; text-align: center; vertical-align: 3px; }
.cr-enq p { margin: 0 0 .35rem; }
.cr-enq p:last-child { margin-bottom: 0; }
.cr-ask { margin: .2rem 0 .4rem; padding: .5rem .7rem; border-radius: 10px; background: var(--tan-light); }
.cr-link a { word-break: break-all; }
.pv-steps { margin: 0 0 .6rem; padding-left: 1.3rem; }
.pv-steps li { padding: .25rem 0; }
.pv-coachside { margin: .6rem 0 0; }
.crf-test { background: #eef3f5; }

/* Round 142: the public goal finder's full-screen page, one question at a time, and "Most suited". */
.finderpage { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: #183642 linear-gradient(170deg, #183642 0, #23495a 600px, #2f5d6f 1400px, #2f5d6f 100%); color: var(--navy); }
.finderroot { background: #2f5d6f; }
.fp-top { display: flex; justify-content: center; padding: 1.4rem 1rem .6rem; padding-top: max(1.4rem, env(safe-area-inset-top)); }
.fp-top img { height: 52px; width: auto; }
.fp-main { flex: 1; display: flex; flex-direction: column; align-items: center; padding: .6rem 16px 1.5rem; }
.fp-foot { text-align: center; padding: 1rem; padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
.fp-foot a { color: #c9d6dc; font-size: .85rem; }
.fp-card { width: 100%; max-width: 620px; background: #fff; border-radius: 24px; padding: 1.6rem 1.4rem 1.4rem; box-shadow: 0 18px 50px rgba(0, 0, 0, .25); box-sizing: border-box; }
.fp-wide { width: 100%; max-width: 980px; }
.fp-wide > .fp-h1, .fp-wide > .fp-lede, .fp-wide > .fp-back a { color: #fff; }
.fp-wide > .fp-lede { color: #dbe6ea; }
.fp-h1 { font-size: 1.9rem; line-height: 1.15; margin: .2rem 0 .4rem; }
.fp-back { margin: 0 0 .6rem; }
.fp-kicker { margin: 0 0 .3rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tan-text); }
.fp-intro h1, .fp-done h1 { font-size: 2rem; line-height: 1.12; margin: 0 0 .6rem; }
.fp-lede { font-size: 1.05rem; color: #4a5458; margin: 0 0 1.1rem; }
.fp-points { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 1.4rem; }
.fp-points li { padding: .35rem .75rem; border-radius: 999px; background: #eef3f5; font-size: .88rem; font-weight: 600; }
.fp-go { width: 100%; min-height: 54px; font-size: 1.08rem; border-radius: 14px; }
.fp-progress { display: none; align-items: center; gap: .7rem; margin: 0 0 1.2rem; }
.js-steps.is-stepped .fp-progress { display: flex; }
.js-steps.is-stepped.at-intro .fp-progress { display: none; }
.fp-bar { flex: 1; height: 8px; border-radius: 999px; background: #e7ebe8; overflow: hidden; }
.fp-fill { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--navy); transition: width .3s ease; }
.fp-count { font-size: .82rem; font-weight: 700; color: var(--tan-text); white-space: nowrap; }
.fp-step { border: 0; padding: 0; margin: 0 0 1.4rem; min-width: 0; }
.js-steps.is-stepped .fp-step { margin-bottom: 0; animation: fp-in .25s ease; }
@keyframes fp-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js-steps.is-stepped .fp-step { animation: none; } .fp-fill { transition: none; } }
.fp-step legend { float: left; width: 100%; padding: 0; margin: 0 0 1rem; font-size: 1.45rem; font-weight: 800; line-height: 1.25; color: var(--navy); outline: none; }
.fp-step legend + * { clear: both; }
.fp-qn { display: block; margin-bottom: .35rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tan-text); }
.fp-opts { grid-template-columns: minmax(0, 1fr); gap: .55rem; }
.fp-opts .cr-opt span { min-height: 56px; font-size: 1.02rem; }
.fp-nav { margin: 1rem 0 0; }
.fp-nav .link { padding: .4rem 0; font-weight: 600; color: var(--blue-text, #3d6f86); }
.fp-step:not(.fp-intro) .fp-nav { display: none; }
.js-steps.is-stepped .fp-step .fp-nav { display: block; }
.js-steps:not(.is-stepped) .fp-intro .js-next { display: none; }
.fp-big { display: block; font-size: 1.35rem; font-weight: 800; line-height: 1.25; margin-bottom: .7rem; }
.fp-last input[type=text] { min-height: 52px; font-size: 1rem; }
.fp-last .fp-go { margin-top: .4rem; }
.fp-errs { margin-bottom: 1rem; }
.fp-done { text-align: center; }
.fp-tick { width: 64px; height: 64px; margin: 0 auto .8rem; border-radius: 50%; background: #e3f1ea; color: #2e7d55; font-size: 2rem; line-height: 64px; font-weight: 800; }
.crf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1rem; align-items: start; margin-bottom: 1rem; }
.crf-cards > .card { margin: 0; }
.finderpage .crf-why, .finderpage .crf-contact { max-width: 980px; }
.crf-best { display: inline-block; padding: .25rem .65rem; border-radius: 999px; background: var(--navy); color: #fff !important; letter-spacing: .05em; }
.crf-variants { margin: 0 0 .4rem; }
@media (max-width: 560px) { .fp-top { padding-top: max(1rem, env(safe-area-inset-top)); } .fp-top img { height: 42px; } .fp-card { padding: 1.3rem 1.1rem 1.1rem; border-radius: 20px; } .fp-intro h1, .fp-done h1 { font-size: 1.7rem; } .fp-step legend { font-size: 1.3rem; } .fp-h1 { font-size: 1.6rem; } }
.fp-step[hidden] { display: none !important; }
.crf-cards > .crf-why { grid-column: 1 / -1; }
.cr-sharerow { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.cr-sharerow input { flex: 1 1 16rem; min-width: 0; margin: 0; }
.cr-share { border-left: 4px solid var(--tan); }

/* ---- Round 143: package card on the client overview, session log ---- */
.cr-ovpkg h2 { margin: 0; font-size: 1.1rem; }
.cr-ovpkg .row-between { gap: .6rem; flex-wrap: wrap; }
.cr-ovstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin: .8rem 0 .4rem; }
.cr-ovstats > div { display: flex; flex-direction: column; gap: .1rem; background: var(--bg, #f5f7f8); border-radius: 10px; padding: .55rem .7rem; min-width: 0; }
.cr-ovstats b { font-size: 1.05rem; color: var(--navy); overflow-wrap: anywhere; }
@media (max-width: 640px) { .cr-ovstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cr-ovlog { margin-top: .6rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.cr-ovlog summary { cursor: pointer; padding: .2rem 0; }
.cr-logform { display: grid; gap: .55rem; margin: .6rem 0; }
.cr-logform label { margin: 0; }
.cr-logform textarea { width: 100%; }
.cr-logrow { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.cr-logrow label { flex: 1 1 10rem; }
.cr-logrow input[type=date] { width: 100%; }
.cr-loglist { list-style: none; padding: 0; margin: .4rem 0 0; }
.cr-loglist li { border-top: 1px solid var(--line); padding: .5rem 0; }
.cr-loglist li p { margin: .25rem 0 0; }
.cr-logmeta { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.cr-logdel { margin: 0 0 0 auto; display: inline; }
.cr-feedback { list-style: none; padding: 0; margin: .3rem 0 0; }
.cr-feedback li { border-top: 1px solid var(--line); padding: .5rem 0; }
.cr-feedback li p { margin: .2rem 0 0; }

/* ---- Round 144: wider public goal finder on tablets and desktops ---- */
.finderpage .fp-main { width: 100%; max-width: none; box-sizing: border-box; align-self: stretch; }
@media (min-width: 760px) {
    .fp-card { max-width: 860px; padding: 2.2rem 2.4rem 2rem; }
    .fp-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
    .fp-step legend { font-size: 1.7rem; }
    .fp-intro h1, .fp-done h1 { font-size: 2.4rem; }
}
@media (min-width: 1200px) {
    .fp-card { max-width: 980px; }
    .fp-wide, .finderpage .crf-why, .finderpage .crf-contact { max-width: 1180px; }
}
.crf-addon { margin: .8rem 0 .2rem; padding: .75rem .9rem; border-radius: 14px; background: #fbf6ec; border: 1px dashed #d8c6a1; }
.crf-addon p { margin: 0 0 .25rem; }
.crf-addon-k { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8a6d3b; }
.crf-addon-pick { display: flex; align-items: center; gap: .5rem; margin: .45rem 0 0; font-weight: 600; cursor: pointer; }
.crf-addon-pick input { width: auto; margin: 0; }
.cr-upsell { margin: .5rem 0; padding: .5rem .7rem; border-radius: 10px; background: #fbf6ec; font-size: .85rem; }
@media (min-width: 900px) {
    .finderpage .crf-cards.crf-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .finderpage .crf-cards.crf-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Round 145: App only, always offered with a free trial ---- */
.crf-cards > .crf-apponly { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 1.6rem; align-items: center; background: #f4f7f8; border: 1px solid #d9e3e6; }
.crf-apponly h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.crf-apponly p { margin: 0 0 .35rem; }
.crf-trial { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 999px; background: #e3f1ea; color: #2e7d55; }
.crf-app-side { min-width: 220px; }
.crf-app-side .crf-pick { margin-top: .4rem; }
@media (max-width: 700px) { .crf-cards > .crf-apponly { grid-template-columns: minmax(0, 1fr); } .crf-app-side { min-width: 0; } }
.cr-apponly-note { margin-top: 1rem; }
.pk-trial { margin: .3rem 0 .6rem; }
.crf-app-price { margin: 0 0 .3rem; font-size: 1.05rem; }

/* ---- Round 146: Community on Today (Training Now, Groups) and the Today page settings */
.tile-comm { position: relative; overflow: hidden; border: 0; border-radius: 26px; padding: 1.4rem 1.4rem 1.2rem; background: #eef3f1; color: var(--navy); box-shadow: 0 6px 20px rgba(24, 54, 66, .08); }
.tile-comm .tile-h { color: var(--navy); margin-bottom: .8rem; }
.cm-sub { display: flex; align-items: center; gap: .45rem; margin: 0 0 .55rem; font-size: 1.05rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--navy); }
.cm-groups { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid rgba(24, 54, 66, .12); }
.cm-cap { margin: .8rem 0 .4rem; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--tan-text); }
.cm-empty { margin: 0; color: var(--navy); opacity: .85; }
.cm-empty a, .cm-inv a { color: var(--navy); font-weight: 700; text-decoration: underline; }
.cm-inv { margin: 0 0 .6rem; }
.cm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.cm-row { display: flex; align-items: center; gap: .7rem; background: #fff; border-radius: 16px; padding: .6rem .75rem; min-height: 48px; color: inherit; text-decoration: none; box-shadow: 0 1px 2px rgba(24, 54, 66, .06); }
a.cm-row:hover, a.cm-row:focus-visible { box-shadow: 0 0 0 2px var(--tan); outline: none; }
.cm-av { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.cm-live .cm-av { background: #1b9a59; }
.cm-gav { background: var(--tan); color: var(--navy); }
.cm-gav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cm-txt { flex: 1; min-width: 0; display: grid; gap: .05rem; }
.cm-who { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-res { font-size: .84rem; color: var(--muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cm-when { flex: none; font-size: .78rem; color: var(--muted); white-space: nowrap; }
.cm-tag { flex: none; font-size: .72rem; font-weight: 700; padding: .18rem .55rem; border-radius: 999px; background: var(--tan); color: var(--navy); white-space: nowrap; }
.cm-tag.live { background: #d9f3e5; color: #0f6b3c; }
.cm-link { justify-content: flex-start; margin-top: .6rem; }
.tdy-set { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; display: grid; gap: .65rem; }
.tdy-set legend { font-weight: 700; font-size: .9rem; padding: 0; margin-bottom: .5rem; }
.tdy-lock { display: flex; align-items: center; gap: .6rem; margin: 0; color: var(--muted); }
.tdy-lock svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-left: .1rem; }

/* ---- Round 147: in-app tour for clients (tour.js) */
.tour { position: fixed; inset: 0; z-index: 10050; opacity: 0; transition: opacity .25s ease; }
.tour.on { opacity: 1; }
.tour-veil { position: absolute; inset: 0; background: transparent; }
.tour.tour-centre .tour-veil { background: rgba(12, 32, 40, .62); }
.tour-hole { position: fixed; border-radius: 18px; box-shadow: 0 0 0 9999px rgba(12, 32, 40, .62), 0 0 0 3px var(--tan) inset; pointer-events: none; transition: top .3s ease, left .3s ease, width .3s ease, height .3s ease; }
.tour.tour-centre .tour-hole { display: none; }
.tour-card { position: fixed; background: #fff; color: var(--text); border-radius: 20px; padding: 1rem 1.1rem 1rem; box-shadow: 0 18px 44px rgba(0, 0, 0, .28); max-width: calc(100vw - 32px); }
.tour.tour-centre .tour-card { top: 50%; left: 50%; width: min(24rem, calc(100vw - 32px)); transform: translate(-50%, -50%); padding: 1.5rem 1.4rem 1.2rem; text-align: center; }
.tour-card.in { animation: tourIn .3s cubic-bezier(.2, .9, .3, 1.15); }
.tour.tour-centre .tour-card.in { animation-name: tourInC; }
@keyframes tourIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tourInC { from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(.97); } to { opacity: 1; transform: translate(-50%, -50%); } }
.tour-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 1.2rem; margin-bottom: .2rem; }
.tour.tour-centre .tour-top { justify-content: center; }
.tour-count { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tan-text); }
.tour-x { font-size: .85rem; color: var(--muted); padding: .2rem 0; min-height: 0; }
.tour-card h2 { font-size: 1.15rem; margin: .1rem 0 .35rem; outline: none; }
.tour.tour-centre .tour-card h2 { font-size: 1.4rem; }
.tour-card p { margin: 0 0 .8rem; line-height: 1.45; font-size: .95rem; }
.tour-dots { display: flex; gap: 5px; flex-wrap: wrap; margin: 0 0 .85rem; }
.tour.tour-centre .tour-dots { justify-content: center; }
.tour-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background .2s, width .2s; }
.tour-dots span.past { background: var(--tan); }
.tour-dots span.on { background: var(--navy); width: 18px; border-radius: 4px; }
.tour-acts { display: flex; gap: .6rem; justify-content: flex-end; }
.tour.tour-centre .tour-acts { justify-content: center; }
.tour-acts button { min-width: 6.5rem; }
.tour-acts button[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .tour, .tour-hole { transition: none; } .tour-card.in { animation: none; } }
#apptour .button { margin-top: .25rem; }

/* ---- Round 148: App only sign-up and getting set up ---- */
.fp-signup .fp-back { margin: 0 0 .6rem; }
.fp-signup .fp-back a { color: var(--blue, #2d6a8a); }
.fp-signup label { margin-top: .6rem; }
.fp-signup .fp-go { margin-top: 1rem; }
.fp-agree { margin-top: .9rem; align-items: flex-start; }
.fp-agree input { margin-top: .2rem; }
.fp-signsteps { display: flex; gap: .4rem; list-style: none; padding: 0; margin: .4rem 0 1rem; counter-reset: fs; }
.fp-signsteps li { flex: 1; min-width: 0; font-size: .74rem; font-weight: 700; color: var(--muted); text-align: center; counter-increment: fs; }
.fp-signsteps li::before { content: counter(fs); display: block; width: 26px; height: 26px; line-height: 26px; margin: 0 auto .3rem; border-radius: 50%; background: #e9ecee; color: var(--navy); }
.fp-signsteps li.on { color: var(--navy); }
.fp-signsteps li.on::before { background: var(--navy); color: #fff; }
.crf-startapp[hidden], .crf-contact[hidden] { display: none; }
.crf-startapp { text-align: center; }
.crf-startapp h2 { margin-top: 0; }
.crf-startapp .fp-go { display: inline-flex; justify-content: center; align-items: center; max-width: 420px; text-decoration: none; }
.crf-app-go { display: inline-block; margin-top: .5rem; }
.wl { max-width: 640px; }
.wl-lede { font-size: 1.05rem; }
.wl-steps { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .8rem; }
.wl-steps > li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: .8rem; align-items: start; }
.wl-steps h2 { font-size: 1.1rem; margin: .2rem 0 .3rem; }
.wl-done { padding: .2rem 1.1rem; }
.wl-n { width: 34px; height: 34px; line-height: 34px; border-radius: 50%; background: var(--navy); color: #fff; text-align: center; font-weight: 800; }
.wl-done .wl-n, .wl-ok .wl-n { background: #e3f1ea; color: #2e7d55; }
.wl-dev { border-top: 1px solid var(--line); padding: .5rem 0; }
.wl-dev summary { cursor: pointer; }
.wl-dev ol { margin: .4rem 0 0; padding-left: 1.2rem; }
.wl-dev li { margin: .25rem 0; }
.wl-installed { color: #2e7d55; font-weight: 700; }
.wl-how[hidden], .wl-installed[hidden], .wl-installbtn[hidden] { display: none; }

/* ---- Round 154: App only and App only Plus ---- */
.crf-cards > .crf-apponly { grid-template-columns: minmax(0, 1fr); align-items: start; }
.crf-app-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; }
.crf-app-plan { background: #fff; border: 1px solid #d9e3e6; border-radius: 16px; padding: .9rem 1rem; display: flex; flex-direction: column; gap: .2rem; }
.crf-app-plan h3 { margin: 0; font-size: 1.05rem; }
.crf-app-plan .crf-pick { margin-top: auto; padding-top: .4rem; }
.crf-app-plan .crf-app-go { text-align: center; }
.fp-plans { border: 0; padding: 0; margin: .2rem 0 .6rem; display: grid; gap: .5rem; }
.fp-plans legend { font-weight: 700; margin-bottom: .4rem; padding: 0; }
.fp-signup .fp-plan { display: flex; gap: .7rem; align-items: flex-start; margin: 0; padding: .8rem .9rem; border: 1.5px solid var(--line, #d7dadd); border-radius: 14px; cursor: pointer; font-weight: 400; }
.fp-plan input { width: auto; margin: .25rem 0 0; flex: none; }
.fp-plan:has(input:checked) { border-color: var(--navy); background: #f4f7f8; }
.fp-plan-b { display: grid; gap: .15rem; }
.fp-plan-p { font-weight: 700; color: var(--navy); }

/* ---- Round 155: emoji reactions on finished sessions (_reacts.php, reacts.js) */
.rx { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .5rem 0 0; min-width: 0; }
.rx.rx-busy { opacity: .6; pointer-events: none; }
.rx-e { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; line-height: 1; }
.rx-sum { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.rx-chip { display: inline-flex; align-items: center; gap: .25rem; height: 30px; padding: 0 .55rem; border-radius: 999px; background: #f3efe8; border: 1.5px solid transparent; font-size: .85rem; color: var(--navy); }
.rx-chip .rx-e { font-size: 1rem; }
.rx-chip b { font-weight: 700; font-variant-numeric: tabular-nums; }
.rx-chip.mine { background: #fff4dc; border-color: var(--tan); }
.rx-dd { position: static; }
.rx-dd > summary { list-style: none; }
.rx-dd > summary::-webkit-details-marker { display: none; }
.rx-add { display: inline-flex; align-items: center; gap: .3rem; height: 30px; padding: 0 .65rem; border-radius: 999px; border: 1.5px solid var(--line, #d9d2c5); background: #fff; color: var(--navy); font-size: .82rem; font-weight: 700; cursor: pointer; user-select: none; }
.rx-add:hover, .rx-add:focus-visible { border-color: var(--tan); outline: none; box-shadow: 0 0 0 2px rgba(201, 169, 110, .35); }
.rx-add.rx-icon { width: 30px; padding: 0; justify-content: center; }
.rx-c .rx-add.rx-icon { width: 26px; }
.rx-add .rx-e { font-size: 1rem; }
.rx-plus svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; display: block; }
.rx-dd[open] { flex: 1 1 100%; }
.rx-pick { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .25rem; margin: .45rem 0 0; padding: .45rem .3rem; border-radius: 16px; background: var(--navy); box-shadow: 0 8px 22px rgba(24, 54, 66, .22); animation: rx-in .16s ease-out; }
.rx-opt { display: grid; justify-items: center; gap: .3rem; min-width: 0; min-height: 64px; padding: .4rem .1rem .35rem; border: 0; border-radius: 12px; background: transparent; color: #fff; cursor: pointer; font: inherit; }
.rx-opt .rx-e { font-size: 1.6rem; transition: transform .12s ease; }
.rx-opt .rx-l { font-size: .66rem; line-height: 1.15; text-align: center; color: rgba(255, 255, 255, .78); overflow-wrap: normal; word-break: keep-all; hyphens: none; }
.rx-opt:hover .rx-e, .rx-opt:focus-visible .rx-e { transform: scale(1.18); }
.rx-opt:focus-visible { outline: 2px solid var(--tan); outline-offset: -2px; }
.rx-opt.on { background: rgba(255, 255, 255, .14); }
.rx-opt.on .rx-l { color: #fff; font-weight: 700; }
.rx-people { list-style: none; margin: .2rem 0 0; padding: 0; flex: 1 1 100%; display: grid; gap: .2rem; font-size: .86rem; }
.rx-people .rx-e { font-size: 1rem; }
.rx-pop .rx-chip.mine, .rx-pop .rx-add.on { animation: rx-pop .3s ease-out; }
.rx-c { margin-top: .35rem; }
.rx-c .rx-chip, .rx-c .rx-add { height: 26px; font-size: .78rem; padding: 0 .5rem; }
.cm-recent .cm-row { flex-wrap: wrap; }
.cm-recent .cm-row > .rx { flex: 1 1 100%; margin: .1rem 0 .1rem calc(36px + .7rem); }
.cm-recent .cm-row > .rx .rx-pick { margin-left: calc(-36px - .7rem); }
.drow.has-rx > .rx .rx-pick { margin-left: calc(-30px - .75rem); max-width: 440px; }
.lg-row > .rx .rx-pick, .rx-card .rx-pick { max-width: 440px; }
.lg-row { flex-wrap: wrap; }
.lg-row > .rx { flex: 1 1 100%; margin: 0 0 .2rem; }
.drow.has-rx { display: block; }
.drow.has-rx > .rx { margin: .45rem 0 .15rem calc(30px + .75rem); position: relative; clear: both; }
.rx-card h2 { margin-bottom: .2rem; }
@keyframes rx-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes rx-pop { 0% { transform: scale(.85); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .rx-pick, .rx-pop .rx-chip.mine, .rx-pop .rx-add.on { animation: none; } .rx-opt .rx-e { transition: none; } }
@media (max-width: 380px) { .rx-pick { padding: .4rem .15rem; gap: .1rem; } .rx-opt .rx-e { font-size: 1.45rem; } .rx-opt .rx-l { font-size: .6rem; } }

/* ---- Round 156: package sessions ---- */
.tag.pks-tag { background: #e8eef6; color: #23466b; border-color: #c9d7e8; }
.pks-list { margin-bottom: .8rem; }

/* ---- Round 158: light Today tiles. Each Today section gets its own soft version of the Add Activity tile (Round 94 .hero-light):
   a gentle gradient fill, a slow moving gradient border (wa-border) and the letter-spaced heading. Upcoming Training stays navy
   so the page keeps one strong tile at the top. Only on the Today page (body.page-today); other pages keep their tiles. */
.page-today .tile-comm, .page-today .tile-ms, .page-today .tile-boards, .page-today .tile-classes, .page-today .tile-logs,
.page-today .rt-prompt, .page-today .tile-routine, .page-today .tile-tasks, .page-today .tile-week {
    --lt-fill: linear-gradient(135deg, #f6fbfd 0%, #e6f2f8 55%, #f7f0e5 100%);
    --lt-edge: #8fc3d8; --lt-edge2: #d6c3a8;
    position: relative; overflow: hidden; border: 2px solid transparent; border-radius: 26px; color: var(--navy);
    background: var(--lt-fill) padding-box,
        linear-gradient(110deg, var(--lt-edge) 0%, #fff 25%, var(--lt-edge2) 50%, #fff 75%, var(--lt-edge) 100%) border-box;
    background-size: 100% 100%, 300% 100%;
    box-shadow: 0 6px 18px rgba(24, 54, 66, .08);
    animation: wa-border 5s ease-in-out infinite alternate; }
.page-today .tile-comm::after, .page-today .tile-logs::after, .page-today .tile-routine::after, .page-today .tile-tasks::after, .page-today .tile-week::after { display: none; }
.page-today .tile-comm .tile-h, .page-today .tile-ms .tile-h, .page-today .tile-boards .tile-h, .page-today .tile-classes .tile-h, .page-today .tile-logs .tile-h,
.page-today .rt-prompt .tile-h, .page-today .tile-routine .tile-h, .page-today .tile-tasks .tile-h, .page-today .tile-week .tile-h { color: var(--navy); letter-spacing: .14em; }
/* Community: sage */
.page-today .tile-comm { --lt-fill: linear-gradient(135deg, #f5faf7 0%, #e5f1ea 55%, #f3f2ea 100%); --lt-edge: #9cc9ae; --lt-edge2: #c9d9c0; }
/* Milestones: champagne (was navy) */
.page-today .tile-ms { --lt-fill: linear-gradient(135deg, #fdfbf3 0%, #f5edd6 55%, #f8f4ea 100%); --lt-edge: #d9be7c; --lt-edge2: #ecdcb4; }
.page-today .tile-ms .ms-link { background: rgba(255, 255, 255, .7); border-color: rgba(24, 54, 66, .08); color: var(--navy); box-shadow: 0 1px 3px rgba(24, 54, 66, .05); }
.page-today .tile-ms .ms-link:hover, .page-today .tile-ms .ms-link:focus-visible { background: #fff; }
.page-today .tile-ms .ms-cap { color: var(--tan-text); }
.page-today .tile-ms .ms-striving small { color: #6b737a; }
.page-today .tile-ms .ms-striving strong { color: var(--navy); }
.page-today .tile-ms .ms-core b { color: #2f8a5c; }
.page-today .tile-ms .ms-core.b-mixed b { color: #b8651c; } .page-today .tile-ms .ms-core.b-low b { color: #a63f31; } .page-today .tile-ms .ms-core.b-none b { color: #6b737a; }
.page-today .tile-ms .ms-left { color: var(--navy); }
.page-today .tile-ms .ms-left.late { color: var(--red); }
.page-today .tile-ms .tile-link { color: var(--navy); }
/* Leaderboards: soft rose */
.page-today .tile-boards { --lt-fill: linear-gradient(135deg, #fdf8f8 0%, #f6e6e6 55%, #faf4ef 100%); --lt-edge: #dba5a5; --lt-edge2: #ecd0c4; }
/* the Leaderboards heading takes the same letter-spaced style as the other tiles */
.page-today .tile-boards > h2 { margin: 0 0 1rem; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--navy); }
/* Upcoming Classes, Socials, Events: off-white (Round 159; was aqua) */
.page-today .tile-classes { --lt-fill: linear-gradient(135deg, #fffefb 0%, #faf8f3 55%, #f6f3ec 100%); --lt-edge: #e3dccd; --lt-edge2: #f1ece2; }
/* Today's Logs: sky blue (was solid blue) */
.page-today .tile-logs { --lt-fill: linear-gradient(135deg, #f4f9fd 0%, #e1eef8 55%, #eef0f8 100%); --lt-edge: #7fb2cf; --lt-edge2: #b9cfe6; }
.page-today .tile-logs .tl-row { border-bottom-color: rgba(70, 117, 141, .18); }
.page-today .tile-logs .tl-row .fill { fill: #fff; }
.page-today .tile-logs .tl-row .outline { stroke: #b9d3e3; }
.page-today .tile-logs .tl-row b { color: var(--navy); }
.page-today .tile-logs .tl-row span { color: #4f6470; }
.page-today .tile-logs .tl-row li.on .fill { fill: #8fd9b4; }
.page-today .tile-logs .tl-row li.on b { color: var(--green); }
.page-today .tile-logs .tl-row li.on span { color: #3d7a5a; }
.page-today .tile-logs .tile-link { color: var(--navy); }
/* Build Your Routine and the running routine: warm sand */
.page-today .rt-prompt, .page-today .tile-routine { --lt-fill: linear-gradient(135deg, #fdfaf4 0%, #f6ecdc 55%, #f9f4ec 100%); --lt-edge: #d6b98c; --lt-edge2: #e8dfcf; }
.page-today .rt-prompt p { color: #5b5446; }
/* the running routine was drawn in white on tan: on the light sand its lines and circles take the tan instead */
.page-today .tile-routine .rt-prog-bar { background: rgba(214, 185, 140, .3); }
.page-today .tile-routine .rt-day::before { background: rgba(214, 185, 140, .55); }
.page-today .tile-routine .rt-stack.many { background: rgba(255, 255, 255, .45); }
.page-today .tile-routine .rt-slot.next .rt-stack { background: rgba(255, 255, 255, .75); }
.page-today .tile-routine .rt-stack .tick { border-color: #d6b98c; background: #fff; }
.page-today .tile-routine .rt-stack .tick.off::after { background: #d6b98c; }
.page-today .tile-routine .rt-stack .tick.on { background: var(--navy); border-color: var(--navy); }
.page-today .tile-routine .rt-week { border-top-color: rgba(214, 185, 140, .35); }
.page-today .tile-routine .rt-wd i { border-color: #d6b98c; }
.page-today .tile-routine .rt-wd.part i { background: linear-gradient(to top, #d6b98c 50%, transparent 50%); }
.page-today .tile-routine .rt-wd.full i { background: var(--navy); border-color: var(--navy); }
/* Today's Tasks: apricot (was solid tan) */
.page-today .tile-tasks { --lt-fill: linear-gradient(135deg, #fef8f3 0%, #f8e8dc 55%, #fbf3ee 100%); --lt-edge: #e0a983; --lt-edge2: #ecd3c0; }
.page-today .tile-tasks .tick { border-color: #d9b49a; background: #fff; }
.page-today .tile-tasks .tick.off::after { background: #d9b49a; }
.page-today .tile-tasks .tick.on { background: var(--navy); border-color: var(--navy); }
.page-today .tile-tasks .habitform span { color: var(--navy); }
/* Your Week: misty lilac */
.page-today .tile-week { --lt-fill: linear-gradient(135deg, #f9f8fd 0%, #ecebf6 55%, #eef4f6 100%); --lt-edge: #a9a3d4; --lt-edge2: #c9d6e2; }
.page-today .tile-week .tile-link { color: var(--navy); }
@media (prefers-reduced-motion: reduce) {
    .page-today .tile-comm, .page-today .tile-ms, .page-today .tile-boards, .page-today .tile-classes, .page-today .tile-logs,
    .page-today .rt-prompt, .page-today .tile-routine, .page-today .tile-tasks, .page-today .tile-week { animation: none; } }

/* ---- Round 159: Reminders card on Today (views/_reminders.php, assets/reminders.js). It replaces the three tan banners (updates,
   today's log, forms): an off-white card with a count, a coloured icon per reminder, a detail line and how long it has waited.
   Tap the heading to fold it; folded, it shows a one-line summary. */
.rem-card { position: relative; margin: 0 0 1rem; padding: 0 1.2rem; border-radius: 26px; border: 1px solid #ebe5da; color: var(--navy);
    background: linear-gradient(135deg, #fffefb 0%, #faf7f1 100%); box-shadow: 0 6px 18px rgba(24, 54, 66, .07); }
.rem-sum { list-style: none; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "h chev" "peek chev"; align-items: center; column-gap: .6rem;
    min-height: 56px; padding: 1.05rem 0 .5rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rem-sum::-webkit-details-marker { display: none; }
.rem-sum::marker { content: ""; }
.rem-sum:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 12px; }
.rem-sum .tile-h { grid-area: h; display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--navy); letter-spacing: .14em; }
.rem-n { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .4rem; border-radius: 99px; background: var(--navy); color: #fff; font-size: .72rem; letter-spacing: 0; }
.rem-peek { grid-area: peek; display: none; margin-top: .2rem; color: #5b6770; font-size: .9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rem-chev { grid-area: chev; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(180deg); transition: transform .2s ease; }
.rem-card:not([open]) .rem-sum { padding-bottom: 1.05rem; }
.rem-card:not([open]) .rem-peek { display: block; }
.rem-card:not([open]) .rem-chev { transform: none; }
.rem-list { list-style: none; margin: 0; padding: 0 0 .4rem; }
.rem-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .8rem 0; border-top: 1px solid #efe9df; }
.rem-row:first-child { border-top: 0; }
.rem-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; }
.rem-ic .ico { width: 22px; height: 22px; }
.rem-updates .rem-ic { background: #e4eff6; color: #3f6f88; }
.rem-daily .rem-ic { background: #e3f0e8; color: #2f6f4d; }
.rem-forms .rem-ic { background: #f3eadb; color: #8f7a56; }
.rem-b { min-width: 0; display: grid; gap: .1rem; }
.rem-b strong { font-size: 1.02rem; line-height: 1.3; }
.rem-d { color: #5b6770; font-size: .9rem; line-height: 1.35; overflow-wrap: anywhere; }
.rem-age { display: inline-flex; align-items: center; gap: .35rem; margin-top: .2rem; font-size: .78rem; font-weight: 600; color: #6f787f; }
.rem-age i { width: 7px; height: 7px; border-radius: 50%; background: #e0773e; flex: none; }
.rem-age.old { color: #a14f22; }
.rem-go { display: grid; gap: .4rem; }
.rem-go a { display: inline-flex; align-items: center; justify-content: center; min-width: 5.2rem; min-height: 44px; padding: 0 1rem; border-radius: 99px; background: #fff; border: 1px solid #e2dccf; font-weight: 700; font-size: .9rem; color: var(--navy); white-space: nowrap; text-decoration: none; }
.rem-go a:hover { background: var(--tan-light); text-decoration: none; }
.rem-go a:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .rem-chev { transition: none; } }

/* ---- Round 160: leaderboard rows on Today take the Leaderboards tile's rose, deeper for better results (app/boardshade.php):
   cg-lv0 nothing yet, cg-lv1 started, cg-lv2, cg-lv3, cg-lv4 finished or 1st. Your own row keeps its navy outline. */
.page-today .tile-boards .cg-board li { border-color: #f0e1de; background: rgba(255, 255, 255, .8); box-shadow: 0 1px 3px rgba(24, 54, 66, .04); }
.page-today .tile-boards .cg-board li.cg-lv1 { background: #fcf2f1; border-color: #f1dcd9; }
.page-today .tile-boards .cg-board li.cg-lv2 { background: #f9e6e4; border-color: #edd0cc; }
.page-today .tile-boards .cg-board li.cg-lv3 { background: #f4d6d3; border-color: #e6bdb8; }
.page-today .tile-boards .cg-board li.cg-lv4 { background: linear-gradient(110deg, #efc4bf 0%, #f3d2ce 100%); border-color: #dba5a5; }
.page-today .tile-boards .cg-board li.cg-lv4 .cg-rank, .page-today .tile-boards .cg-board li.cg-lv4 .cg-score { font-weight: 800; }
.page-today .tile-boards .cg-board li.cg-me { border: 2px solid var(--navy); padding: calc(.55rem - 1px) calc(.7rem - 1px); }
.page-today .tile-boards .cg-board li.cg-me .tag { background: #fff; color: var(--navy); }

/* ---- Round 163: the dashboard Training Now card scrolls inside (latest 20 finished workouts) */
#card-training .tn-scroll { max-height: 30rem; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; margin: 0 -.5rem; padding: 0 .5rem; scrollbar-width: thin; scrollbar-color: var(--tan) transparent; }
#card-training .tn-scroll:focus-visible { outline: 2px solid var(--tan); outline-offset: 2px; border-radius: 8px; }
#card-training .tn-scroll::-webkit-scrollbar { width: 6px; }
#card-training .tn-scroll::-webkit-scrollbar-thumb { background: var(--tan); border-radius: 3px; }
#card-training.expanded .tn-scroll { max-height: 70vh; }
#card-training .tn-scroll .dlist li:last-child { border-bottom: 0; }
@media (max-width: 700px) { #card-training .tn-scroll { max-height: 26rem; } }

/* ---- Round 165: dashboard Training Now: every kind of session, reactions below the text */
#card-training .drow.has-rx > .dlink { align-items: flex-start; }
#card-training .drow.has-rx > .dlink > .avatar, #card-training .drow.has-rx > .dlink > .tn-go { margin-top: .15rem; }
#card-training .dmsg { line-height: 1.3; padding-bottom: .05rem; }
.tn-kind { display: inline-block; margin-left: .35rem; padding: 0 .4rem; border-radius: 999px; background: #f3efe8; color: #8f7a56; font-size: .62rem; letter-spacing: .06em; vertical-align: 1px; }
.tn-a .tn-kind { background: #e8f1f4; color: #3c6878; }
.tn-c .tn-kind { background: #eef3ea; color: #4f6b3a; }

/* Round 170: missing-items count on the client Setup tab */
.tabs .su-badge { display: inline-block; min-width: 1.3em; margin-left: .35em; padding: 0 .4em; border-radius: 999px; background: var(--red); color: #fff; font-size: .72rem; line-height: 1.5; text-align: center; vertical-align: 1px; }
/* Round 173: Client watch and sessions in the weekly update, and its day and time */
.digest h4.dg-lane-urgent { color: var(--red); }
.digest h4.dg-lane-week { color: #8a5a10; }
.digest h4.dg-lane-later { color: var(--blue); }
.digest .dg-n { display: inline-block; margin-left: .3rem; padding: 0 .45rem; border-radius: 999px; background: #f1f0ec; color: var(--navy); letter-spacing: 0; }
.dg-when { display: inline-block; font-size: .78rem; font-weight: 800; border-radius: 999px; padding: .05rem .5rem; background: #f1f0ec; white-space: nowrap; }
.dg-watch[data-lane=urgent] .dg-when { background: var(--red-bg); color: var(--red); }
.dg-watch[data-lane=week] .dg-when { background: #fbecd2; color: #8a5a10; }
.digest-when { display: flex; gap: .8rem; flex-wrap: wrap; }
.digest-when label { display: flex; flex-direction: column; gap: .2rem; font-weight: 600; }
.digest-when select { width: auto; }
/* Round 179: Packages & plans section switcher and package links */
.pk-kicker { margin: 0 0 .3rem; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tan-text); }
.pk-nav { margin-bottom: 1rem; }
.pk-links { width: 100%; border-collapse: collapse; }
.pk-links th, .pk-links td { text-align: left; padding: .5rem .4rem; border-top: 1px solid var(--line); vertical-align: middle; }
.pk-links select { width: 100%; max-width: 18rem; }
.pk-cat { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tan-text); }
.pk-links tbody th { text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 600; color: var(--ink, inherit); }
.pk-links tbody th label { margin: 0; font: inherit; color: inherit; }
@media (max-width: 600px) {
  .pk-links thead { display: none; }
  .pk-links, .pk-links tbody, .pk-links tr, .pk-links th, .pk-links td { display: block; width: 100%; }
  .pk-links tbody th { border-top: 1px solid var(--line); padding-bottom: .25rem; }
  .pk-links tbody th, .pk-links tbody td { border-bottom: 0; }
  .pk-links tbody td { border-top: 0; padding-top: 0; }
  .pk-links td.pk-cat { border-top: 1px solid var(--line); padding-top: .9rem; }
  .pk-links select { max-width: none; }
}

/* Round 202: a run's result on the logged workout page */
.runres-head { font-size: 1.25rem; font-weight: 800; margin: .2rem 0 .4rem; font-variant-numeric: tabular-nums; }
.runres-bits { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.runres-bits li { background: #f1f0ea; border-radius: 999px; padding: .2rem .7rem; font-size: .85rem; font-weight: 600; }
.runres-alert { border-left: 4px solid #a63f31; }
.runres-note { color: #a63f31; font-weight: 600; margin-top: .5rem; }
.runres-chk { margin: .3rem 0; }

/* Round 274: Today greeting row, date on the right in tan capitals (like the Upcoming Training heading) */
.clientapp .today-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 1rem; row-gap: .2rem; margin: .6rem 0 1rem; }
.clientapp .today-head .hi { margin: 0; min-width: 0; }
.clientapp .today-date { margin: 0 0 0 auto; color: #b39a72; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; white-space: nowrap; text-align: right; }
@media (max-width: 380px) { .clientapp .today-date { font-size: .72rem; letter-spacing: .1em; } }
/* Round 275: a long name (or one that won't fit beside the date) puts the date above it, top left */
.clientapp .today-head.th-stack { flex-direction: column-reverse; align-items: flex-start; row-gap: .35rem; }
.clientapp .today-head.th-stack .today-date { margin: 0; text-align: left; }
/* Round 292 (Kurt): a finished session's View results matches Reschedule and sits beside it */
.pwk-move { gap: .5rem; flex-wrap: wrap; }
.pwk-move .pwk-results, .pwk-move .pwk-resched { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: .4rem 1rem; border-radius: 999px; background: #fff; border: 1px solid var(--navy); color: var(--navy); font-size: .85rem; font-weight: 600; line-height: 1.2; text-decoration: none; box-shadow: none; }
.pwk-move .pwk-results:hover, .pwk-move .pwk-resched:hover { background: var(--navy); color: #fff; }