/* Motus brand (brand kit tokens.css): always black, white type, quiet grays. Green marks a met standard, used sparingly.
   Unslop pass (heydamir/unslop, CC BY 4.0 by Damir Sokolovsky): 4px spacing, weights 400/500, radius by size, one
   easing curve, and a signature: the white orb from the mark points at today. */
:root { --bg: #000; --text: #fff; --muted: #a3a3a3; --line: #171717; --hair: rgba(255, 255, 255, .08); --raised: #1c1c1e;
        --green: #4cc38a; --warn: #f5b84a; --green2: #3a9c6f; --gray: #3a3a3c; --danger: #e5484d;
        --ease: cubic-bezier(.22, 1, .36, 1); color-scheme: dark; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: inherit; text-decoration: none; }
/* installed on a Home Screen the page runs edge to edge (viewport-fit=cover): keep clear of the notch and the home bar */
main, nav > div { max-width: 480px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
main { padding-bottom: calc(48px + env(safe-area-inset-bottom)); }
.muted, .no { color: var(--muted); }
.good { color: var(--green); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
a, button, .btn, .int summary, .int.row, .people .who { transition: color .15s var(--ease), background-color .15s var(--ease), opacity .15s var(--ease); }
.btn:active, .chips button:active, .seg button:active { transform: scale(.98); }

/* navbar */
nav { border-bottom: 1px solid var(--line); margin-bottom: 24px; padding-top: env(safe-area-inset-top); }
.bar { display: flex; justify-content: space-between; align-items: center; min-height: 48px; gap: 8px; }
.brand { display: flex; align-items: center; gap: 8px; min-height: 44px; }
/* the mark image has wide empty margins around the cape: draw it larger and pull the margins in */
.brand img { display: block; width: 48px; height: 48px; margin: -8px -8px -8px -12px; }
.brand b { font-weight: 600; font-size: 18px; letter-spacing: -.03em; }
.links { display: flex; gap: 16px; align-items: center; }
.links a, .links button { font: inherit; font-size: 14px; color: var(--muted); background: none; border: 0; padding: 12px 0; cursor: pointer; }
.links a:hover { color: var(--text); }
.links a.on, .links button[aria-expanded="true"] { color: var(--text); }
/* profile button: a round photo or initial, top right (after the links on a wide screen, beside the name on a phone) */
.me { position: relative; order: 3; display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.me > :not(.dot-new) { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;
          background: var(--raised); color: var(--muted); font-size: 14px; font-weight: 500; }
.me img { object-fit: cover; }
.me svg { padding: 7px; box-sizing: border-box; fill: none; stroke: currentColor; stroke-width: 1.5; }
.me.on > * { box-shadow: 0 0 0 2px var(--text); color: var(--text); }
.links { order: 2; margin-left: 32px; }
.me { margin-left: auto; }
@media (max-width: 440px) {
  .bar { flex-wrap: wrap; padding-top: 8px; }
  .me { order: 2; margin-left: auto; margin-right: -8px; }
  .links { order: 3; width: 100%; justify-content: flex-start; gap: 24px; margin-left: 0; }
  .links a, .links button { padding: 10px 0; }
}
@media (max-width: 340px) { .links { gap: 20px; } }

/* standards panel */
#standards { font-size: 14px; }
#standards label { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; }
#standards input { width: 90px; font: inherit; font-size: 16px; text-align: right; color: var(--text); background: none;
                   border: 0; border-bottom: 1px solid var(--hair); padding: 4px 0; border-radius: 0; font-variant-numeric: tabular-nums; }
#standards input:focus { outline: 0; border-color: var(--text); }
#standards small { color: var(--muted); font-size: 12px; }
#standards .row2 { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
#reset { font: inherit; font-size: 12px; color: var(--muted); background: none; border: 0; padding: 8px 0; cursor: pointer; text-decoration: underline; }
.label2 { font-size: 14px; padding: 16px 0 8px; }
/* Training days, when Home's "Set training days" brought you here: a green ring that pulses, and a hint */
.daysbox { border-radius: 12px; transition: background .3s var(--ease), box-shadow .3s var(--ease); }
.daysbox .tap-hint { display: none; color: var(--green); font-size: 12px; margin-left: 8px; }
.daysbox.spot { margin: 8px -12px 0; padding: 0 12px 12px; background: rgba(76, 195, 138, .06); animation: spot 1.6s var(--ease) 3; box-shadow: 0 0 0 1.5px var(--green); }
.daysbox.spot .tap-hint { display: inline; }
@keyframes spot { 0%, 100% { box-shadow: 0 0 0 1.5px var(--green), 0 0 0 0 rgba(76, 195, 138, .45); } 60% { box-shadow: 0 0 0 1.5px var(--green), 0 0 0 10px rgba(76, 195, 138, 0); } }
@media (prefers-reduced-motion: reduce) { .daysbox.spot { animation: none; } }
.chips { display: flex; gap: 8px; }
.chips button { flex: 1; font: inherit; font-size: 14px; padding: 0; border-radius: 50%; border: 0; cursor: pointer;
                background: var(--raised); color: var(--muted); aspect-ratio: 1 / 1; max-width: 40px; min-width: 28px; }
.chips button[aria-pressed="true"] { background: var(--gray); color: var(--text); }
.seg { display: inline-flex; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--hair); padding: 2px; }
.seg button { font: inherit; font-size: 14px; color: var(--muted); background: none; border: 0; border-radius: 10px; padding: 8px 16px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--gray); color: var(--text); }

/* home */
.banner { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0 0 24px; padding: 12px 16px; border-radius: 12px; background: var(--raised); }
.banner a, .foot a, .msg a, .note a { text-decoration: underline; text-underline-offset: 3px; }
.banner b { color: var(--text); font-weight: 500; }
.top { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; margin-bottom: 40px; }
.top .wide { grid-column: 1 / -1; }
.top b { display: block; font-size: 32px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.top small, small { font-size: 12px; color: var(--muted); }
.top .no { font-size: 20px; }
.top > .wide:first-child small { color: var(--muted); }
.lastweek { margin-top: -8px; padding-top: 12px; border-top: 1px solid var(--line); }
.lastweek small { line-height: 1.6; }
.lastweek .no { font-size: inherit; }
.good2 { color: var(--green2); }
.sep { color: var(--muted); opacity: .5; margin: 0 4px; }
.foot { font-size: 12px; color: var(--muted); margin-top: 24px; }

/* week strip: 7 equal columns so it never overflows or squashes on a phone */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; margin-bottom: 16px; }
.weekhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.weekhead .legend { margin: 0; font-size: 12px; }
.wd { text-align: center; min-width: 0; }
.wd small { display: block; margin-bottom: 8px; line-height: 1; }
.dot { position: relative; box-sizing: border-box; width: min(40px, 100%); aspect-ratio: 1 / 1; margin: 0 auto; border-radius: 50%;
       display: flex; align-items: center; justify-content: center; line-height: 1;
       font-size: 14px; font-variant-numeric: tabular-nums; color: var(--text); }
.dot.today::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--text); }
.dot.future { color: var(--muted); }
.dot.plan { background: var(--gray); color: var(--text); }
.dot.future.plan { color: var(--muted); }
.dot.on { background: var(--green); color: var(--bg); }

table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 40px; font-variant-numeric: tabular-nums; }
th, td { padding: 8px 0; text-align: right; font-weight: 400; border-top: 1px solid var(--hair); }
th { color: var(--muted); font-size: 12px; border-top: 0; }
th:first-child, td:first-child { text-align: left; }
td .no { font-size: 12px; white-space: nowrap; }
.chart { margin-bottom: 24px; }
svg { display: block; width: 100%; height: 40px; margin-top: 8px; }
.chart.main svg { height: 96px; }
.chart.main { margin-bottom: 32px; }

/* workouts */
.hero { display: block; width: 180px; height: 180px; margin: 8px auto -12px; }
/* the sign-in screens' moving cape (js/hero.js startCape); the edges fade into the page, no box */
.cape3d { display: block; width: 100%; height: 240px; margin: -8px auto -24px;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); }
h2 { font-size: 12px; font-weight: 400; color: var(--muted); margin: 40px 0 12px; }
.score b { font-size: 64px; font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.score span { font-size: 20px; color: var(--muted); }
.score.sm b { font-size: 40px; }
.ex { padding: 12px 0; border-top: 1px solid var(--hair); }
.ex .head { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.ex .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex .head span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ex svg { height: 28px; }
.more { font: inherit; font-size: 12px; color: var(--muted); background: none; border: 0; padding: 12px 0 0; cursor: pointer; text-decoration: underline; }
.more.inline { padding: 0; }
/* a link-styled button standing on its own still needs a 24 px tap area (WCAG 2.2, 2.5.8) */
button.more.inline { min-height: 24px; padding: 4px 0; }
.recent { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--hair); font-size: 14px; }
.recent .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent .r { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.recent .r.good { color: var(--green); }
.tab { font: inherit; font-size: 12px; color: var(--muted); background: none; border: 0; padding: 8px 4px; cursor: pointer; }
.tab.on { color: var(--text); text-decoration: underline; }
details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
details[open] { margin-bottom: 8px; }
details > .recent { padding-left: 12px; font-size: 14px; }
.how { margin-top: 32px; }
.how summary small { text-decoration: underline; text-underline-offset: 3px; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.legend small { margin-left: auto; }

/* connect */
.connect h1 { font-size: 28px; font-weight: 500; line-height: 1.15; margin: 0 0 8px; }
/* the page an app such as Claude opens to be allowed in (worker/oauth.js): no menu, the mark, one question */
.consent { padding-top: max(40px, env(safe-area-inset-top)); }
.consent .mark-sm { display: block; width: 72px; height: 72px; margin: 0 0 20px; }
.consent .note b { color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.lead { color: var(--muted); margin: 0 0 12px; }
.state { font-size: 14px; margin: 0 0 8px; }
.app, .mine { border-top: 1px solid var(--hair); padding: 24px 0 8px; margin-top: 16px; }
.app-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.connect h2 { font-size: 20px; font-weight: 500; color: var(--text); margin: 0 0 4px; }
.connect h3 { font-size: 14px; font-weight: 500; margin: 20px 0 4px; }
.connect h3 .muted { font-weight: 400; }
.what { font-size: 14px; color: var(--muted); margin: 0 0 8px; }
.connect ol { font-size: 14px; padding-left: 20px; margin: 8px 0 12px; }
.connect ol li { padding: 4px 0; }
.connect ol b { font-weight: 500; color: var(--text); }
.pill { font-size: 12px; color: var(--green); white-space: nowrap; }
.note { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 8px 0; }
.act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 12px 0 4px; }
.act[hidden], .check[hidden] { display: none; }
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box;
       font: inherit; font-size: 14px; font-weight: 500; color: var(--bg); background: var(--text); border: 0; border-radius: 10px; padding: 0 20px; cursor: pointer; }
.btn:hover { background: #e4e4e4; }
.btn.ghost { color: var(--text); background: var(--raised); box-shadow: inset 0 0 0 1px var(--hair); }
.btn.ghost:hover { background: #26262a; }
.btn.danger { color: var(--danger); background: none; box-shadow: inset 0 0 0 1px var(--hair); }
.btn.danger:hover { background: var(--raised); }
.btn:disabled, .more:disabled { opacity: .4; cursor: default; }
.btn.file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.btn.file:focus-within { outline: 2px solid var(--text); outline-offset: 2px; }
.btn.file:has(input:disabled) { opacity: .4; }
.key { flex: 1 1 180px; min-width: 0; min-height: 44px; box-sizing: border-box; font: inherit; font-size: 16px; color: var(--text); background: none;
       border: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--gray); padding: 0 16px; }
.key:focus { outline: 0; box-shadow: inset 0 0 0 1px var(--muted); }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); padding: 8px 0; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--text); }
.unit { font-size: 14px; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.unit select, .form select { font: inherit; font-size: 16px; color: var(--text); background: var(--bg); border: 0; box-shadow: inset 0 0 0 1px var(--gray);
                             border-radius: 8px; padding: 8px; }
.msg { font-size: 14px; color: var(--muted); min-height: 1.2em; margin: 8px 0 0; line-height: 1.5; overflow-wrap: anywhere; }
.msg.ok { color: var(--green); } .msg.bad { color: var(--warn); }
.form label { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; font-size: 14px; }
.form input { width: 55%; font: inherit; font-size: 16px; color: var(--text); background: none; border: 0;
              border-bottom: 1px solid var(--hair); padding: 8px 0; border-radius: 0; text-align: right; }
.form input:focus { outline: 0; border-color: var(--text); }
.sources { list-style: none; padding: 0; margin: 8px 0 12px; font-size: 14px; }
.sources li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hair); }
.sources li b { display: block; font-weight: 500; }
.sources li .more { padding: 8px 0; }
.mine h2 + .note { margin-top: 0; }
#privacy { margin-top: 32px; }

/* connect: account and connected apps */
.account { border-top: 1px solid var(--hair); padding: 20px 0 4px; margin-top: 16px; }
.account h2, .account .state { margin-top: 0; }
.connect h2.divider { font-size: 12px; font-weight: 400; color: var(--muted); margin: 32px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.imports > summary { padding: 8px 0; }
.imports > summary small { text-decoration: underline; text-underline-offset: 3px; }
.imports[open] > summary { margin-bottom: 4px; }
.imports > .app:first-of-type { border-top: 0; margin-top: 0; }
.steps li { padding: 8px 0; }
.steps a, .connect .what a { text-decoration: underline; text-underline-offset: 3px; }
.steps a.btn { text-decoration: none; }
/* an icon drawn inline in a step, like iPhone's Share button (Profile → Install Motus) */
.glyph { width: 18px; height: 18px; vertical-align: -3px; margin-left: 2px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.steps.big { padding-left: 24px; }
.steps.big li { padding: 12px 0; }
.steps.big li small { display: inline-block; margin-top: 8px; line-height: 1.5; font-size: 14px; }
.steps.dim { opacity: .5; }
.btn.small { min-height: 36px; padding: 0 16px; font-size: 14px; border-radius: 8px; vertical-align: middle; }
.warn { color: var(--warn); }
.kv { list-style: none; padding: 0; margin: 8px 0; }
.kv li { padding: 8px 0; border-top: 1px solid var(--hair); overflow-wrap: anywhere; font-size: 14px; }
.kv li > span:first-child { display: block; font-size: 12px; color: var(--muted); }
/* connect: the integrations, one row per app that opens its setup */
.icons { display: flex; gap: 12px; margin: 20px 0 4px; }
.icons img, .int summary img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.icons img { width: 32px; height: 32px; border-radius: 8px; opacity: .9; }
.int { border-top: 1px solid var(--hair); }
.int:last-of-type { border-bottom: 1px solid var(--hair); }
.int summary { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 0; }
.int summary span { flex: 1; min-width: 0; }
.int summary b { display: block; font-weight: 500; font-size: 16px; }
.int summary small { display: block; margin-top: 4px; line-height: 1.35; }
.int summary small.good { color: var(--green); }
.int summary i { width: 8px; height: 8px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); margin-right: 4px; transition: transform .18s var(--ease); }
.int[open] summary i { transform: rotate(45deg); }
.int .sheet { padding: 0 0 20px 52px; }
.int .sheet .steps.big { padding-left: 20px; }
.int .sheet > .what:first-child, .int .sheet > div > .what:first-child { margin-top: 0; }
@media (max-width: 380px) { .int .sheet { padding-left: 0; } }
.file-link { cursor: pointer; }
.privacy { margin-top: 24px; }

/* profile */
.profile .face { display: flex; align-items: center; gap: 16px; margin: 4px 0 24px; }
.profile .photo { position: relative; width: 88px; height: 88px; border-radius: 50%; overflow: hidden; flex: none; background: var(--line);
                  display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 500; color: var(--muted); }
.profile .photo img { width: 100%; height: 100%; object-fit: cover; }
.profile .photo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.profile .face b { display: block; font-size: 20px; font-weight: 500; }
.profile .field { display: block; margin: 0 0 16px; font-size: 14px; color: var(--muted); }
.profile .field .key { display: block; width: 100%; margin-top: 8px; flex: none; }
.profile .handle { display: flex; align-items: center; gap: 0; box-shadow: inset 0 0 0 1px var(--gray); border-radius: 10px; margin-top: 8px; padding-left: 16px; }
.profile .handle span { color: var(--muted); font-size: 16px; }
.profile .handle .key { box-shadow: none; padding-left: 2px; margin: 0; }
.profile .share { font-size: 14px; overflow-wrap: anywhere; }
.profile section { border-top: 1px solid var(--hair); padding-top: 20px; margin-top: 24px; }
.public { text-align: center; padding-top: 32px; }
.public .photo { margin: 0 auto 16px; width: 112px; height: 112px; }
.public #card > b { display: block; font-size: 24px; font-weight: 500; }
.public .rel { justify-content: center; }
.public .theirs { text-align: left; margin-top: 32px; border-top: 1px solid var(--hair); padding-top: 24px; }
.kv code, .steps code { font: 12px/1.5 ui-monospace, "SF Mono", Consolas, monospace; background: var(--line); border-radius: 4px; padding: 1px 4px; }

/* friends: people as rows of photo, name and @username, with their buttons on the right */
.people { list-style: none; margin: 0; padding: 0; }
.people li { display: flex; align-items: center; gap: 12px; min-height: 64px; border-top: 1px solid var(--hair); }
.people li:last-child { border-bottom: 1px solid var(--hair); }
.people .who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.people .who > span:last-child { min-width: 0; }
.people .who b { display: block; font-weight: 500; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people .who small { display: block; color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people .pic { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: none; background: var(--line); color: var(--muted);
               display: flex; align-items: center; justify-content: center; font-weight: 500; }
.people .pic img { width: 100%; height: 100%; object-fit: cover; }
.people .acts { display: flex; gap: 8px; flex: none; }
.friends .search { margin-top: 20px; }
.friends section { margin-top: 32px; }
/* someone asks to be friends: a small dot on the profile button */
.me .dot-new { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px var(--bg); }
/* profile: a row that opens another page (Friends), and the way back */
.go { display: flex; align-items: center; gap: 12px; min-height: 60px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); margin-top: 24px; }
.go + section { border-top: 0; }
.go > span { flex: 1; min-width: 0; }
.go b { display: block; font-weight: 500; font-size: 16px; }
.go small { display: block; margin-top: 2px; color: var(--muted); }
.go small.good { color: var(--green); }
.go i { width: 8px; height: 8px; border-right: 1.5px solid var(--muted); border-top: 1.5px solid var(--muted); transform: rotate(45deg); margin-right: 6px; }
.back { display: inline-block; font-size: 14px; color: var(--muted); padding: 8px 0; margin-bottom: 4px; }
.back:hover { color: var(--text); }
.profile .standards { margin-top: 24px; }
/* the default picture (no photo yet): the Motus mark, enlarged past its empty margins, on a dark circle */
.mark, .me > .mark { display: block; width: 100%; height: 100%; background: var(--line) url("brand/motus-mark-96.png") center / 86% no-repeat; }
.me > .mark { width: 32px; height: 32px; }

/* profile as a hub: short parts, each an icon and a word or two; links (Friends, Integrations) look like the rest */
.hub .face { margin: 4px 0 20px; }
.parts { border-bottom: 1px solid var(--hair); }
.parts > .int { border-bottom: 0; }      /* the list draws its own last line; no double lines between parts */
.int .ico { flex: none !important; width: 40px; height: 40px; border-radius: 10px; background: var(--raised); display: flex; align-items: center; justify-content: center; }
.int .ico svg { width: 18px; height: 18px; fill: none; stroke: var(--text); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.int.row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 0; border-top: 1px solid var(--hair); }
.int.row > span:nth-child(2) { flex: 1; min-width: 0; }
.int.row b { display: block; font-weight: 500; font-size: 16px; }
.int.row small { display: block; margin-top: 4px; color: var(--muted); }
.int.row small.good { color: var(--green); }
.int.row i { width: 8px; height: 8px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); margin-right: 4px; flex: none; }
.int summary small:empty, .int.row small:empty { display: none; }
.faces, .apps { display: flex; flex: none; align-items: center; }
.faces .pic { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; margin-left: -8px; box-shadow: 0 0 0 2px var(--bg); background: var(--line); }
.faces .pic:first-child { margin-left: 0; }
.faces .pic img { width: 100%; height: 100%; object-fit: cover; }
.apps { gap: 4px; }
.apps img { width: 24px; height: 24px; border-radius: 6px; }
.hub .int .sheet { padding-left: 52px; }
/* small phones (320–399 px): the parts' contents use the full width, so the seven day buttons always fit */
@media (max-width: 399px) { .hub .int .sheet { padding-left: 0; } .chips { gap: 6px; } }
.int.row:hover b, .int summary:hover b { color: #fff; }
.hub #std { margin-top: -4px; }
.btn.wide { width: 100%; }
.hub .account { text-align: center; border: 0; }

/* locked dashboard (signed in, no data yet): a sample that gets blurrier and darker towards the bottom, with one
   button on top; the person's own data unlocks it. Also used on Data. */
.board { position: relative; }
/* A mask only paints inside the element's own box, and the blur spills past it: so the sample gets 16px of
   empty space on every side (its box reaches past the page padding) and the blur fades out inside the mask
   instead of being sliced at the box edge. The board clips nothing sideways. */
.board.locked { margin: -16px -16px 0; max-height: 580px; overflow: hidden; }
.board.locked > .sample { padding: 16px 16px 0; filter: blur(5px); pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, .55) 200px, rgba(0, 0, 0, .15) 380px, transparent 520px);
          mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, .55) 200px, rgba(0, 0, 0, .15) 380px, transparent 520px); }
.unlock { position: absolute; z-index: 2; left: 0; right: 0; top: 112px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.unlock[hidden] { display: none; }
.unlock b { font-size: 24px; font-weight: 500; }

/* week strip before training days are picked: blurred, one button to Standards */
.daysask { position: relative; }
.daysask .week { filter: blur(5px); opacity: .55; pointer-events: none; }
.daysask .btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; }

/* landing for visitors (theme "Premium"): one full screen of the 3D scene, short text on top, the apps it works
   with at the bottom; nothing below it (the demo opens from See the demo). The app pages stay as they are. */
.landing { position: relative; width: 100vw; margin: -24px 0 -48px calc(50% - 50vw); height: calc(100svh - var(--hero-top, 49px)); min-height: 460px; overflow: hidden; }
.landing canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.landing-text { position: relative; z-index: 1; max-width: 480px; margin: 0 auto; padding: 48px 16px 0; text-align: center; }
.landing h1 { font-size: 40px; line-height: 1.06; font-weight: 500; letter-spacing: -.02em; margin: 0 0 16px; }
.landing p { font-size: 18px; line-height: 28px; color: var(--muted); margin: 0 auto 24px; max-width: 22em; }
.landing .act { justify-content: center; }
.works { position: absolute; left: 0; right: 0; bottom: 32px; z-index: 1; text-align: center; }
.works small { display: block; margin-bottom: 12px; }
.works .icons { justify-content: center; margin: 0; }
.works .icons img { width: 32px; height: 32px; border-radius: 8px; opacity: .9; }
@media (min-width: 720px) {
  .landing-text { padding-top: 72px; }
  .landing h1 { font-size: 56px; letter-spacing: -.03em; }
}
body { overflow-x: clip; }      /* the full-bleed hero is 100vw wide, which counts the scrollbar on desktop */
@media (max-width: 360px) { .landing h1 { font-size: 34px; } .landing p { font-size: 16px; line-height: 24px; } }
.off { display: none !important; }      /* parts of Home that the landing hides */

/* demo tour (js/tour.js): a spotlight that glides between stops, a small card, the orb hopping along */
.tour { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.tour-spot { position: fixed; border-radius: 14px; box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .74), inset 0 0 0 1px rgba(255, 255, 255, .25);
  transition: left .45s var(--ease), top .45s var(--ease), width .45s var(--ease), height .45s var(--ease), opacity .3s var(--ease); }
.tour-card { position: fixed; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); max-width: 420px; margin: 0 auto;
  pointer-events: auto; background: var(--raised); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--hair), 0 8px 32px rgba(0, 0, 0, .5);
  padding: 20px 20px 16px 56px; }
.tour-card b { display: block; font-size: 18px; font-weight: 500; }
.tour-card p { margin: 4px 0 16px; color: var(--muted); font-size: 15px; }
.tour-row { display: flex; align-items: center; gap: 12px; }
.tour-row.end { gap: 12px; flex-wrap: wrap; }
.tour-dots { display: flex; gap: 6px; margin-right: auto; }
.tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--gray); transition: background-color .2s var(--ease), transform .2s var(--ease); }
.tour-dots i.done { background: var(--green); }
.tour-dots i.on { background: var(--text); transform: scale(1.4); }
.tour-skip { font: inherit; font-size: 14px; color: var(--muted); background: none; border: 0; padding: 8px; cursor: pointer; }
.tour-skip:hover { color: var(--text); }
/* the orb from the mark, hopping beside the words */
.tour-orb { position: absolute; left: 22px; top: 26px; width: 14px; height: 14px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 12px 4px rgba(255, 255, 255, .35); animation: hop 1.1s var(--ease) infinite; }
.tour-orb.big { width: 18px; height: 18px; left: 20px; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px); } 60% { transform: translateY(-8px); } }
.tour-card.pop { animation: pop .32s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.tour-card.final { text-align: left; }
.tour-sparks { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 60; pointer-events: none; }
.touring { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  .tour-spot, .tour-dots i { transition: none; }
  .tour-orb, .tour-card.pop { animation: none; }
}

/* Standards: Save */
#s-save { margin-top: 20px; }
#s-save.saved { background: var(--green); color: #000; border-color: var(--green); }

/* moving between pages (core.js pageMotion). Leaving: the orb from the mark streaks along the top, the page dims. */
.motion { position: fixed; top: 0; left: 0; right: 0; height: 6px; z-index: 60; pointer-events: none; overflow: hidden; }
.motion i { position: absolute; top: 1px; left: 0; width: 45vw; height: 3px; opacity: 0;
  background: linear-gradient(90deg, rgba(76, 195, 138, 0), rgba(76, 195, 138, .55) 70%, #fff); border-radius: 2px; }
.motion i::after { content: ""; position: absolute; right: -4px; top: -2.5px; width: 8px; height: 8px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, .9), 0 0 18px 6px rgba(220, 230, 255, .45); }
.motion.moving i { opacity: 1; animation: streak 1.1s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes streak { from { transform: translateX(-45vw); } to { transform: translateX(100vw); } }
html.leaving main { opacity: .3; filter: blur(2px); transform: scale(.99); transition: opacity .25s var(--ease), filter .25s var(--ease), transform .25s var(--ease); }

/* Arriving: the loading screen every page opens on. js/boot.js plays "Launch" on it (the cape artwork as cloth on the
   GPU: ignition, hero pose, the cape coming alive, take-off into depth, a ring of light opening onto the page). Until it
   starts, and wherever it can't (reduce motion, no WebGL 2), the still mark rises softly out of the dark and core.js
   fades it once the page is ready. A CSS timer lifts it at 4 s even without JS. */
.boot { position: fixed; inset: 0; z-index: 70; background: #000; display: flex; flex-direction: column; align-items: center;
  justify-content: center; overflow: hidden; animation: boot-off .4s 4s forwards; }
.boot.done { opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s; }
.boot-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.boot[data-gl] .boot-mark { display: none; }
.boot-mark { position: relative; width: 128px; height: 128px; animation: mark-in .5s .35s var(--ease) both; }
.boot-mark img { display: block; width: 100%; height: 100%; }
.boot-mark span { position: absolute; left: var(--mark-orb-x); top: var(--mark-orb-y); width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 8px 3px rgba(255, 255, 255, .8), 0 0 24px 10px rgba(220, 230, 255, .3); }
.boot-road { display: none; }
@keyframes mark-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes boot-off { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .boot-mark { animation: none; } }

/* Profile: the card at the top is the way into editing (the Edit chip says so) */
.hub .face .who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; font: inherit; color: inherit;
  background: none; border: 0; padding: 8px 12px; margin: -8px -12px; border-radius: 14px; cursor: pointer; }
.hub .face .who > span:first-child { flex: 1; min-width: 0; }
.hub .face .who b { display: block; font-size: 20px; font-weight: 500; }
.hub .face .who small { display: block; color: var(--muted); }
.edit-chip { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 13px; color: var(--muted);
  padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.edit-chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.who.on .edit-chip { color: var(--text); background: rgba(255, 255, 255, .14); }
.edit { margin: -8px 0 16px; }
.edit:not([open]) { display: none; }
.edit .sheet { padding: 4px 0 8px; }

/* Integrations: Update now */
.update { margin: 4px 0 20px; text-align: center; }
.update small { display: block; margin-top: 8px; color: var(--muted); font-size: 13px; }
.update .msg:empty { display: none; }

/* glass on hover and press, like Apple: the row lifts onto frosted, lit glass */
.int.row, .int > summary, .hub .face .who { position: relative; border-radius: 14px;
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
.parts .int.row, .parts .int > summary, #integrations .int > summary { padding-left: 12px; padding-right: 12px; margin: 0 -12px; }
.int.row { border-radius: 0; }          /* square at rest, so its divider line stays straight; rounded only as glass */
@media (hover: hover) {
  .int.row:hover, .int > summary:hover, .hub .face .who:hover { border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035));
    -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 24px rgba(0, 0, 0, .45);
    transform: translateY(-1px); }
}
.int.row:active, .int > summary:active, .hub .face .who:active { border-radius: 14px;
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transform: scale(.99); }
@media (prefers-reduced-motion: reduce) { .int.row, .int > summary, .hub .face .who { transition: none; transform: none !important; } }

/* Profile photo: a pencil shows it can be changed (on hover; a small badge always on phones, which can't hover) */
.profile .photo .photo-edit { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
  background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .2s var(--ease); }
.profile .photo .photo-edit svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .profile .photo:hover .photo-edit { opacity: 1; } }
.profile .photo:focus-within .photo-edit { opacity: 1; }
@media (hover: none) {
  .profile .photo { overflow: visible; }
  .profile .photo img, .profile .photo .mark { border-radius: 50%; }
  .profile .photo .photo-edit { inset: auto -2px -2px auto; width: 28px; height: 28px; border-radius: 50%; opacity: 1; background: #2c2c2e;
    box-shadow: 0 0 0 3px var(--bg); }
  .profile .photo .photo-edit svg { width: 14px; height: 14px; }
}

/* Profile: streaks */
.streaks { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 20px; }
.streak { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 159, 67, .16), rgba(255, 159, 67, .06)); box-shadow: inset 0 0 0 1px rgba(255, 159, 67, .28); }
.streak i { font-style: normal; font-size: 16px; animation: flicker 2.4s ease-in-out infinite; }
.streak b { font-weight: 500; font-variant-numeric: tabular-nums; }
.streak small { color: var(--muted); font-size: 13px; }
@keyframes flicker { 50% { transform: scale(1.12) rotate(-4deg); } }

/* Improve */
.improve h1 { margin-bottom: 8px; }
.improve h2 { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; font-weight: 500; color: var(--text); margin: 32px 0 12px; }
.improve h2 small { color: var(--muted); font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums; }
.note.good { color: var(--green); }

/* the hotbar: six square slots with a bevel, like a game's inventory */
.hotbar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 6px; border-radius: 6px; background: #0e0e0e;
  box-shadow: inset 0 0 0 2px #2a2a2a, 0 6px 20px rgba(0, 0, 0, .5); }
.slot { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 3px; padding: 0; font: inherit;
  background: #1a1a1a; box-shadow: inset 3px 3px 0 rgba(0, 0, 0, .65), inset -3px -3px 0 rgba(255, 255, 255, .07); }
.slot.full { cursor: pointer; background: #232323; box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .1), inset -3px -3px 0 rgba(0, 0, 0, .6), 0 0 0 1px rgba(76, 195, 138, .35); }
.slot.full span { font-size: clamp(20px, 6.5vw, 30px); filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6)); }
/* tiers: a row of five more under the six for each 10/10; same slot size (5 of the 6 columns' width), centred */
.slot-rows { display: flex; flex-direction: column; gap: 8px; }
.hotbar.more { grid-template-columns: repeat(5, 1fr); box-sizing: border-box; width: calc((100% - 12px - 30px) * 5 / 6 + 24px + 12px); margin: 0 auto; }
.hotbar.unlocked { animation: row-in .9s var(--ease) both; }
@keyframes row-in { 0% { opacity: 0; transform: translateY(-8px) scale(.98); box-shadow: inset 0 0 0 2px #2a2a2a, 0 0 0 rgba(76, 195, 138, 0); }
  50% { opacity: 1; box-shadow: inset 0 0 0 2px rgba(76, 195, 138, .6), 0 0 24px rgba(76, 195, 138, .35); }
  100% { box-shadow: inset 0 0 0 2px #2a2a2a, 0 6px 20px rgba(0, 0, 0, .5); } }
.tier-note { margin: 8px 0 0; font-size: 13px; }
.boost.e-missed .b-state { color: var(--warn); }
@media (prefers-reduced-motion: reduce) { .hotbar.unlocked { animation: none; } }
.slot.pop { animation: slot-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes slot-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } }
.xp { position: relative; height: 0; }
.xp span { position: absolute; bottom: 64px; transform: translateX(-50%); white-space: nowrap; font-size: 14px; font-weight: 500; color: #7CFC7C;
  text-shadow: 0 2px 0 #000, 0 0 10px rgba(124, 252, 124, .5); pointer-events: none; animation: rise 1.4s var(--ease) both; }
.xp span.xp-pts { font-size: 18px; font-weight: 600; }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 10px); } 15% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -50px); } }

/* the boosts to choose from */
.boosts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.boost { position: relative; display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; align-items: center;
  text-align: left; font: inherit; color: var(--text); border: 0; border-radius: 14px; padding: 12px; cursor: pointer;
  background: var(--raised); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
/* the icon with its points under it, like an item's level; the name and its main effect get the rest */
.boost .b-icon { grid-row: 1 / 3; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 24px; line-height: 1; }
.boost .b-name { font-weight: 500; font-size: 15px; line-height: 1.25; }
/* an earned boost's line: its progress, or ✓ when the records show it (Improve) */
.boost .b-state { min-width: 0; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boost.e-achieved .b-state { color: var(--green); }
.boost.e-locked .b-icon > span:first-child { opacity: .45; filter: grayscale(1); }
.slot.full.unearned span { opacity: .35; filter: grayscale(1); }
.bc-earn { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.bc-earn b { color: var(--text); font-weight: 500; }
.boost .b-plus { min-width: 0; font-size: 12px; color: var(--green); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* points: stronger evidence and bigger effects score more (js/boosts.js); the brightest green for the strongest */
.pts { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; border-radius: 999px; padding: 1px 7px; color: var(--muted);
  background: rgba(255, 255, 255, .06); }
.pts.p5 { color: #7CFC7C; background: rgba(76, 195, 138, .18); }
.pts.p4 { color: var(--green); background: rgba(76, 195, 138, .12); }
.pts.p3 { color: var(--text); }
.boost .pts { font-size: 11px; padding: 1px 6px; }
#boosts h3 { font-size: 13px; font-weight: 500; color: var(--muted); margin: 20px 0 8px; }
#boosts h3:first-child { margin-top: 0; }
.boost.in { box-shadow: inset 0 0 0 1.5px var(--green); }
@media (hover: hover) {
  .boost:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035));
    -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 24px rgba(0, 0, 0, .45); transform: translateY(-1px); }
}
.boost:active { transform: scale(.98); }
@media (max-width: 360px) { .boosts { grid-template-columns: 1fr; } }

/* a boost's card */
.boost-card, .glass-card { width: min(420px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 20px; color: var(--text);
  background: rgba(28, 28, 30, .92); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 24px 60px rgba(0, 0, 0, .6); }
.boost-card[open], .glass-card[open] { animation: card-in .35s var(--ease); }
.boost-card::backdrop, .glass-card::backdrop { background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
@keyframes card-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.bc-in { padding: 20px; }
.bc-top { display: flex; align-items: center; gap: 12px; }
.bc-top > span:nth-child(2) { flex: 1; }
.bc-top b { display: block; font-size: 20px; font-weight: 500; }
.bc-top small { color: var(--muted); }
.bc-icon { font-size: 40px; }
.bc-close { font: inherit; font-size: 24px; line-height: 1; color: var(--muted); background: none; border: 0; padding: 4px 8px; cursor: pointer; }
.plus { list-style: none; padding: 0; margin: 16px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.plus li { padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 500; color: #7CFC7C;
  background: rgba(76, 195, 138, .12); box-shadow: inset 0 0 0 1px rgba(76, 195, 138, .3); }
.bc-how { margin: 0 0 8px; }
.bc-caution { margin: 0 0 8px; color: var(--warn); font-size: 14px; }
.bc-src { font-size: 13px; color: var(--muted); margin: 0 0 16px; }
.bc-src .pts { margin-right: 6px; }
.bc-src a { color: var(--muted); }

/* ChatGPT's link (shown once) and the address to paste in Claude */
#gpt-url, #claude-url { display: block; font-size: 12px; word-break: break-all; padding: 10px 12px; border-radius: 10px; background: var(--raised); }
@media (prefers-reduced-motion: reduce) { .streak i, .slot.pop, .boost-card[open] { animation: none; } }

/* Home: each day's number can be tapped to change it (asked first). The light falls on a pill around the number,
   not the whole (wide) cell, so you see exactly what you're pointing at; negative margins keep the columns still. */
td.ed { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
td.ed .v { display: inline-block; padding: 4px 8px; margin: -4px -8px; border-radius: 8px;
  transition: background-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease); }
@media (hover: hover) { td.ed:hover .v { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); } }
td.ed:active .v { background: rgba(255, 255, 255, .14); transform: scale(.96); }
td.ed:focus-visible .v { box-shadow: 0 0 0 1.5px var(--text); }
.e-title { display: block; font-size: 20px; font-weight: 500; margin-bottom: 6px; }
.e-now { color: var(--muted); margin: 0 0 16px; }
.e-field { display: block; color: var(--muted); font-size: 14px; margin-bottom: 16px; }
.e-field input { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; font-size: 24px; }
.e-remove { display: block; margin-top: 12px; color: var(--danger); }

/* the profile button's menu: Profile, Log out (core.js meMenu) */
nav .bar { position: relative; }
.me-menu { position: absolute; right: 0; top: calc(100% - 4px); z-index: 40; min-width: 132px; padding: 4px; border-radius: 12px;
  background: #1c1c1e; -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 16px 40px rgba(0, 0, 0, .6);
  animation: card-in .2s var(--ease); }
.me-menu a, .me-menu button { display: flex; align-items: center; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: 8px;
  font: inherit; font-size: 14px; color: var(--text); background: none; text-decoration: none; text-align: left; cursor: pointer; box-sizing: border-box; }
.me-menu a:hover, .me-menu button:hover, .me-menu a:focus-visible, .me-menu button:focus-visible { background: rgba(255, 255, 255, .08); outline: none; }
.me-menu [data-logout] { color: var(--danger); }
/* Edit: the privacy choice under the name and username */
.edit .field + .seg { margin-top: 8px; }

/* a friend's page: The Road (js/friendview.js) */
.fview { margin-top: 28px; text-align: left; }
.fv-orb { display: block; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 3px rgba(255, 255, 255, .8), 0 0 24px 8px rgba(220, 230, 255, .3); }
.fv-orb.fv-them { background: var(--green); box-shadow: 0 0 8px 3px rgba(76, 195, 138, .8), 0 0 24px 8px rgba(76, 195, 138, .3); }

/* Road */
.rd-intro { color: var(--muted); text-align: center; margin: 0 0 16px; }
.rd { padding: 16px 0 8px; border-top: 1px solid var(--hair); }
.rd-head { display: flex; justify-content: space-between; align-items: baseline; }
.rd-head b { font-weight: 500; }
.rd-head small { color: var(--muted); }
.rd-track { position: relative; height: 92px; margin: 12px 4px 0; background: linear-gradient(90deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .06));
  border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.rd-track::before { content: ""; position: absolute; left: 10px; right: 10px; top: 46px; border-top: 2px dashed rgba(255, 255, 255, .14); }
.rd-flag { position: absolute; right: 6px; top: 34px; font-size: 18px; }
.rd-runner { position: absolute; left: calc(14px + (100% - 150px) * var(--at)); display: flex; flex-direction: row; align-items: center; gap: 8px;
  animation: rd-go 1.6s var(--ease) both; }
.rd-runner.rd-you { top: 16px; }
.rd-runner.rd-them { top: 56px; }
.rd-runner small { white-space: nowrap; font-size: 12px; color: var(--muted); }
.rd-runner .fv-orb { position: relative; }
.rd-runner .fv-orb::after { content: ""; position: absolute; right: 100%; top: 50%; width: 46px; height: 3px; margin-top: -1.5px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5)); }
.rd-runner .fv-orb.fv-them::after { background: linear-gradient(90deg, transparent, rgba(76, 195, 138, .6)); }
@keyframes rd-go { from { left: 14px; } }

@media (prefers-reduced-motion: reduce) { .rd-runner { animation: none; } }

/* Profile: the list of parts is one card with clear edges; each part a row in it, a hairline between */
.hub .parts { border: 0; border-radius: 16px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); padding: 4px 12px; margin-top: 8px; }
.hub .parts > .int:first-child, .hub .parts > .int.row:first-child { border-top: 0; }
.hub .parts .int.row, .hub .parts .int > summary { margin: 0 -8px; padding-left: 8px; padding-right: 8px; }

/* a username, once set, is fixed: shown greyed out */
.field.locked .handle, .field.locked input { color: var(--muted); }
.field.locked .handle { background: rgba(255, 255, 255, .03); border-color: transparent; cursor: not-allowed; }
.field.locked input { cursor: not-allowed; }

/* ---- glass cards (Home, Workouts, History): each part on its own lit pane, still black and quiet ---- */
.glass { position: relative; padding: 16px; margin-bottom: 12px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 10px 30px rgba(0, 0, 0, .35); }
.glass.top { margin-bottom: 12px; }
.glass > table { margin: 0; }
.glass .wide:only-child, #weekcard > .wide, #lastcard > .wide { margin: 0; }
#charts.glass > .chart:last-child { margin-bottom: 0; }
.dash .col > .glass:last-child { margin-bottom: 0; }
.dash .col { display: flex; flex-direction: column; gap: 12px; }
.dash .col > .glass { margin-bottom: 0; }
.dash { display: flex; flex-direction: column; gap: 12px; }

/* ---- desktop: a wider, two-column layout once signed in (phones keep one column) ---- */
@media (min-width: 1024px) {
  nav > div { max-width: 1080px; }
  main:has(.dash), main:has(#content), main.hub, main:has(#table) { max-width: 1080px; }
  .dash { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; align-items: start; }
  .dash .col { gap: 16px; }
  .top b { font-size: 36px; }
  /* History: the table on one wide card */
  main:has(#table) .sample { max-width: 880px; margin: 0 auto; }
  /* Workouts: cards in two columns */
  #content { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  #content > .span { grid-column: 1 / -1; }
  /* Profile: one centered column, you on top (photo, name, streaks), the list below */
  main.hub { max-width: 640px; padding-top: 24px; }
  main.hub > #in { flex-direction: column; align-items: center; gap: 16px; text-align: center; }
  main.hub .face .photo { width: 112px; height: 112px; }
  main.hub .face .who { flex: none; flex-direction: column; gap: 10px; margin: 0; text-align: center; }
  main.hub .face .who b { font-size: 26px; }
  main.hub > #streaks { justify-content: center; margin: 4px 0 28px; }
  main.hub > .parts { margin-top: 0; }
}

/* a card's heading sits at its top edge */
.glass > h2:first-child { margin-top: 0; }
#content > .glass { margin-bottom: 12px; }
#content .chart:last-child, #content .score:last-child { margin-bottom: 0; }
@media (min-width: 1024px) { #content > .glass { margin-bottom: 0; } }

/* Suggestions: up to three plain nudges, each a tappable row */
.sugg h2 { margin: 0 0 4px; }
.sugg-list { list-style: none; margin: 0; padding: 0; }
.sugg-list li + li { border-top: 1px solid rgba(255, 255, 255, .07); }
.sugg-list a { display: flex; align-items: center; gap: 12px; min-height: 44px; color: inherit; text-decoration: none; font-size: 15px; }
.sugg-list a::after { content: "›"; margin-left: auto; color: var(--muted); font-size: 18px; }
.sugg-list a:hover, .sugg-list a:focus-visible { color: #fff; }

/* Ask Motus: a round button bottom right; the chat opens above it as a glass panel (full width on phones) */
.ask-btn { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 30; min-height: 44px; padding: 0 16px;
  border: 0; border-radius: 22px; font: inherit; font-size: 15px; color: #fff; cursor: pointer;
  background: rgba(30, 30, 32, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 8px 24px rgba(0, 0, 0, .45); }
.ask-btn span { color: var(--good, #30d158); }
.ask { position: fixed; right: 16px; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 41; display: flex; flex-direction: column;
  max-height: min(70vh, 560px); border-radius: 18px; overflow: hidden;
  background: #141416;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 20px 50px rgba(0, 0, 0, .6); }
.ask[hidden] { display: none; }
.ask header { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 6px 16px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.ask-x { width: 44px; height: 44px; border: 0; background: none; color: var(--muted); font-size: 24px; cursor: pointer; }
.ask-log { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.ask-log p { margin: 0; padding: 8px 12px; border-radius: 14px; max-width: 85%; font-size: 15px; line-height: 1.4; white-space: pre-wrap; }
.ask-you { align-self: flex-end; background: rgba(255, 255, 255, .12); }
.ask-bot { align-self: flex-start; background: rgba(255, 255, 255, .05); }
.ask-bot.wait { color: var(--muted); }
p.ask-hint { color: var(--muted); padding: 0; max-width: none; }
.ask-form { display: flex; gap: 8px; padding: 8px 12px; border-top: 1px solid rgba(255, 255, 255, .07); }
.ask-form input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border-radius: 22px; border: 0; font: inherit; font-size: 16px;
  color: #fff; background: rgba(255, 255, 255, .07); }
.ask-form button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: #000; font-size: 18px; cursor: pointer; }
.ask-note { display: block; padding: 0 16px 10px; color: var(--muted); font-size: 12px; }
@media (min-width: 600px) { .ask { left: auto; width: 380px; } }

/* the Last week card: the card is its edge, so no line on top; room under the page for the Ask button */
#lastcard .lastweek { margin: 0; padding-top: 0; border-top: 0; }
body:has(#ask-btn) main { padding-bottom: 72px; }

/* Home cards: a small title on each so you always know what you're looking at */
.card-t { display: inline; font-size: inherit; font-weight: 600; color: var(--fg, #fff); }
.card-h { display: block; margin-bottom: 8px; }
.top.last { gap: 16px; }
.top.last b:not(.card-t) { font-size: 24px; }
#lastcard .lastweek { margin: 0; padding-top: 0; border-top: 0; }
.dash > .glass { margin-bottom: 0; }
@media (min-width: 1024px) {
  /* this week + last week | suggestions + workout days; underneath, the table and the charts side by side */
  .dash { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .top.last b:not(.card-t) { font-size: 26px; }
}
.top b.card-t, .top.last b.card-t { display: inline; font-size: 13px; font-weight: 600; line-height: inherit; color: #fff; }

/* Suggestions are plain lines now (not links): the tip, and under it the number that led to it */
.sugg-list li { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 0; font-size: 15px; }
.sugg-list li small { display: block; margin-top: 2px; }
.sugg-i { width: 24px; text-align: center; }

/* Home in two parts: now (this week, suggestions), then a line, then everything else */
.dash { gap: 0; }
.dash .part { display: flex; flex-direction: column; gap: 12px; }
.dash .part.rest { margin-top: 28px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .1); }
.dash .part > .glass { margin-bottom: 0; }
@media (min-width: 1024px) {
  .dash { display: block; }
  .dash .part { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
  .dash .part.rest { align-items: start; margin-top: 32px; padding-top: 32px; }
  .dash .part.now:has(> #sugg[hidden]) { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Home widgets: Edit Home, the extra cards, and the sheet to pick them ---- */
.w-off { display: none !important; }
.dash-bar { display: flex; justify-content: flex-end; margin: -4px 0 10px; }
.edit-home { min-height: 36px; padding: 0 14px; border: 0; border-radius: 18px; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.edit-home:hover, .edit-home:focus-visible { color: #fff; }
.extras { display: flex; flex-direction: column; gap: 12px; }
.extras[hidden] { display: none; }
/* The extras' columns can shrink below their content (minmax(0, …), not 1fr's "auto" minimum): with 1fr one long
   exercise name widened its column past the dashboard column, and the card slid over Every Day or the charts.
   Every card is also allowed to shrink (min-width: 0) and long words break inside it. */
@media (min-width: 600px) { .extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .extras > .w-card:only-child { grid-column: 1 / -1; } }
.dash .col, .dash .part > *, .dash .col > *, .extras > .w-card { min-width: 0; }
.w-card { margin: 0; overflow-wrap: anywhere; }
.w-card svg { max-width: 100%; }
.w-big { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.w-big b { font-size: 30px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.w-big span { color: var(--muted); font-size: 13px; }
.w-sub { display: block; margin-top: 6px; }
.w-none { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.w-none a { color: inherit; text-decoration: underline; }
.w-bar { height: 6px; margin-top: 10px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.w-bar i { display: block; height: 100%; border-radius: 3px; background: var(--green); }
.w-list { list-style: none; margin: 0; padding: 0; }
.w-list li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14px; }
.w-list li + li { border-top: 1px solid rgba(255, 255, 255, .06); }
.w-list li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-list b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.w-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.w-spark { display: block; width: 100%; height: 40px; margin-top: 8px; }
.w-boosts { display: flex; gap: 6px; margin-top: 8px; font-size: 22px; }

.wsheet-bg { position: fixed; inset: 0; z-index: 44; background: rgba(0, 0, 0, .6); }
.wsheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; max-height: 82vh; display: flex; flex-direction: column;
  border-radius: 20px 20px 0 0; background: #141416; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 -20px 50px rgba(0, 0, 0, .6);
  padding-bottom: env(safe-area-inset-bottom); }
.wsheet[hidden], .wsheet-bg[hidden] { display: none; }
.wsheet header { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 20px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.wsheet-done { min-height: 44px; padding: 0 16px; border: 0; border-radius: 22px; background: #fff; color: #000; font: inherit; font-weight: 600; cursor: pointer; }
.wsheet-list { list-style: none; margin: 0; padding: 4px 12px 12px; overflow-y: auto; }
.wsheet-list li + li { border-top: 1px solid rgba(255, 255, 255, .06); }
.wrow { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 6px 8px; cursor: pointer; }
.wrow-i { width: 28px; text-align: center; font-size: 20px; }
.wrow-t { flex: 1; min-width: 0; }
.wrow-t b { display: block; font-weight: 500; font-size: 15px; }
.switch { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 48px; height: 28px; margin: 0; border-radius: 14px;
  background: var(--gray); cursor: pointer; transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch:checked { background: var(--green); }
.switch:checked::after { transform: translateX(20px); }
.switch:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (min-width: 600px) { .wsheet { left: 50%; right: auto; bottom: auto; top: 50%; width: 440px; transform: translate(-50%, -50%); border-radius: 20px; } }
@media (prefers-reduced-motion: reduce) { .switch, .switch::after { transition: none; } }

/* Edit Home: Cancel, the title, Confirm; and the move after Confirm (only the cards move, the page doesn't fade) */
.wsheet header { gap: 8px; padding: 8px; }
.wsheet header b { flex: 1; text-align: center; }
.wsheet-cancel { min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.wsheet-cancel:hover, .wsheet-cancel:focus-visible { color: #fff; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(*) { animation-duration: .5s; animation-timing-function: cubic-bezier(.22, .8, .24, 1); }
::view-transition-old(*):only-child { animation: w-out .25s ease both; }
::view-transition-new(*):only-child { animation: w-in .35s .15s ease both; }
@keyframes w-out { to { opacity: 0; transform: scale(.96); } }
@keyframes w-in { from { opacity: 0; transform: scale(.96); } }
@media (min-width: 1024px) {
  /* one card left in the top part (the other switched off in Edit Home): it takes the whole row */
  .dash .part.now:has(> #sugg.w-off), .dash .part.now:has(> #top.w-off) { grid-template-columns: minmax(0, 1fr); }
}
/* during the move a card's box grows or shrinks, but its text isn't stretched: each snapshot keeps its real size,
   pinned to the top-left, and the old one fades quickly into the new */
::view-transition-old(*), ::view-transition-new(*) { height: 100%; object-fit: none; object-position: left top; overflow: clip; }
::view-transition-old(*) { animation-duration: .18s; }
::view-transition-new(*) { animation-duration: .3s; }
::view-transition-old(*):only-child { animation: w-out .14s ease both; }

/* Profile signed out: the list stays hidden (the class's own display would otherwise show it) */
.parts[hidden] { display: none; }
/* the profile button's menu: in from the screen edge, under the button */
.me-menu { right: 16px; }

/* Workouts → Routines (experimental, js/routinesview.js): your copies and the library as rows, one opened in a card */
.routines h3 { font-size: 14px; font-weight: 500; margin: 16px 0 4px; }
.routines .exp { font-size: 11px; color: var(--muted); padding: 2px 8px; margin-left: 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair); }
.routines .int.row { width: 100%; font: inherit; color: inherit; background: none; border: 0; border-top: 1px solid var(--hair); text-align: left; cursor: pointer; }
.routines .note { margin: 4px 0 8px; }
@media (min-width: 1024px) {
  .routines { margin-top: 16px; }
  .r-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
}
.routine-card { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.routine-card .bc-top { align-items: flex-start; }
.routine-card .bc-top > span:first-child { flex: 1; min-width: 0; }
.routine-card .bc-top small { display: block; margin-top: 2px; }
.routine-card .bc-in:focus { outline: none; }        /* opened: the card itself has focus, so the reader starts at its top */
.routine-card .what { margin: 12px 0 0; }
.r-day { margin: 16px 0 0; }
.r-day b { font-size: 14px; font-weight: 500; }
.r-day ol { list-style: none; margin: 4px 0 0; padding: 0; }
.r-day li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-top: 1px solid var(--hair); font-size: 14px; }
.r-day li span { min-width: 0; overflow-wrap: anywhere; }
.r-day li small { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
#r-src { margin-top: 16px; }
#r-src a { color: var(--muted); }
.r-q { flex-basis: 100%; font-size: 14px; }
.r-plain { display: block; width: 100%; min-height: 160px; margin-top: 8px; padding: 12px 16px; font-size: 16px; resize: vertical; }
.r-plain[hidden], #r-form[hidden], #r-view[hidden] { display: none; }
.routine-card .more.inline { min-height: 44px; font-size: 14px; }
.r-f-day { margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid var(--hair); }
.r-f-top { display: flex; align-items: center; gap: 12px; }
.r-f-top .key { flex: 1; font-weight: 500; }
.r-f-x { color: var(--danger); white-space: nowrap; }
.r-f-ex { margin: 12px 0 0; }
.r-f-ex > .key { display: block; width: 100%; }
.r-f-nums { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 8px; align-items: end; margin-top: 8px; }
.r-f-nums label { display: block; min-width: 0; font-size: 12px; color: var(--muted); }
.r-f-nums .key { display: block; width: 100%; margin-top: 4px; padding: 0 10px; }
.r-f-rm { width: 44px; height: 44px; font: inherit; font-size: 20px; color: var(--muted); background: none; border: 0; border-radius: 10px; cursor: pointer; }
.r-f-rm:hover { color: var(--text); background: var(--raised); }
@media (prefers-reduced-motion: reduce) { .glass-card[open] { animation: none; } }
#r-form { margin-top: 16px; }
.routine-card .e-field input { font-size: 18px; }

/* ---- onboarding (onboarding.html): one step at a time, centred, big tap targets ---- */
.onboard { max-width: 440px; padding-top: calc(32px + env(safe-area-inset-top)); padding-bottom: 40px; }
.ob-dots { display: flex; justify-content: center; gap: 6px; list-style: none; margin: 0 0 28px; padding: 0; }
.ob-dots li { width: 6px; height: 6px; border-radius: 3px; background: var(--gray); transition: width .25s, background .25s; }
.ob-dots li.on { width: 20px; background: #fff; }
.ob-dots li.done { background: var(--green); }
.ob-step { text-align: center; }
.ob-step h1 { margin: 12px 0 6px; font-size: 26px; }
.ob-sub { color: var(--muted); margin: 0 0 24px; }
.ob-mark { display: block; margin: 0 auto; }
.handle-in { display: flex; align-items: center; gap: 4px; min-height: 52px; padding: 0 16px; border-radius: 14px; background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); font-size: 18px; text-align: left; }
.handle-in:focus-within { box-shadow: inset 0 0 0 1px #fff; }
.handle-in span { color: var(--muted); }
.handle-in input { flex: 1; min-width: 0; border: 0; background: none; color: #fff; font: inherit; outline: none; padding: 0; }
.ob-ideas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 16px; }
.ob-ideas .chip { min-height: 36px; padding: 0 12px; border: 0; border-radius: 18px; background: rgba(255, 255, 255, .08); color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.ob-step .btn.wide { margin-top: 8px; }
.ob-step .msg.ok { color: var(--green); }

/* onboarding: the welcome list, goal choices (tap one), the optional goals, the apps */
.ob-list { list-style: none; margin: 8px 0 28px; padding: 0; text-align: left; display: grid; gap: 14px; }
.ob-list li { display: flex; gap: 12px; align-items: center; font-size: 16px; }
.ob-list li span { font-size: 22px; }
#ob-standards { text-align: left; }
#ob-standards h1, #ob-standards .ob-sub { text-align: center; }
.ob-q { margin: 0 0 18px; }
.ob-q > b { font-weight: 500; }
.ob-q .muted { color: var(--muted); margin-left: 4px; }
.ob-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ob-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 8px; margin-top: 8px; }
.ob-opts button { min-height: 52px; padding: 6px 8px; border: 0; border-radius: 12px; font: inherit; font-size: 15px; color: #fff; cursor: pointer;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.ob-opts button small { color: var(--muted); font-size: 11px; }
.ob-opts button[aria-pressed="true"] { background: rgba(76, 195, 138, .16); box-shadow: inset 0 0 0 1.5px var(--green); }
.ob-days { margin-top: 8px; }
.ob-more { margin: 4px 0 18px; border-radius: 14px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); padding: 4px 14px; }
.ob-more summary { min-height: 44px; display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; }
.ob-more summary small { color: var(--muted); font-weight: 400; }
.ob-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 14px; color: var(--muted); }
.ob-in input { width: 96px; min-height: 40px; border-radius: 10px; border: 0; padding: 0 10px; background: rgba(255, 255, 255, .08); color: #fff; font: inherit; }
.ob-note { display: block; margin-top: 8px; }
.ob-skip { display: block; margin: 10px auto 0; min-height: 44px; border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.ob-apps { display: grid; gap: 8px; margin: 0 0 20px; text-align: left; }
.ob-apps a { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 14px; border-radius: 14px; color: #fff; text-decoration: none;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.ob-apps a::after { content: "›"; margin-left: auto; color: var(--muted); font-size: 20px; }
.ob-apps img { width: 32px; height: 32px; border-radius: 8px; }

/* brand: generated by tools/brand/build.mjs (the orb's place in the mark, measured); don't edit by hand */
:root { --mark-orb-x: 62.11%; --mark-orb-y: 35.35%; }
/* brand: end */

/* Improve: earned boosts fill slots by themselves (js/earned.js allocate); a chosen one with no room left waits */
.improve .e-auto { margin: -4px 0 12px; }
.slot.full.auto { box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .1), inset -3px -3px 0 rgba(0, 0, 0, .6), 0 0 0 1.5px var(--green); }
.boost.wait { box-shadow: inset 0 0 0 1px var(--hair); }
.boost.wait .b-plus { color: var(--muted); }
.bc-auto { margin: 0; padding: 12px 14px; border-radius: 12px; font-size: 14px; color: var(--muted); background: rgba(76, 195, 138, .08); box-shadow: inset 0 0 0 1px rgba(76, 195, 138, .25); }
/* Connect → Apple Health: what to do if iOS asks about large amounts of data (it publishes no size: docs/onboarding-batch/SHORTCUT-V6.md) */
small.hint { display: block; margin-top: 6px; color: var(--muted); }
/* the demo tour's edit stop (js/tour.js acted): a tap ripple on the number, then the corrected number lit */
td.tour-edit { position: relative; }
td.tour-edit.tapped::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  background: rgba(255, 255, 255, .28); animation: tour-tap .6s var(--ease) forwards; pointer-events: none; }
@keyframes tour-tap { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
td.tour-edit.fixed .v { display: inline-block; padding: 4px 8px; margin: -4px -8px; border-radius: 8px; color: var(--green);
  background: rgba(76, 195, 138, .14); box-shadow: inset 0 0 0 1px rgba(76, 195, 138, .45); }
@media (prefers-reduced-motion: reduce) { td.tour-edit.tapped::after { animation: none; opacity: 0; } }

/* feature tips (js/tips.js): one small glass note beside a feature, fades in a few pixels up; never over the feature */
.tip { position: absolute; z-index: 45; box-sizing: border-box; padding: 12px 14px 10px; border-radius: 14px; color: var(--text);
  background: #1c1c1e;                                        /* solid: the numbers under it must not show through */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 16px 40px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(6px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.tip.above { transform: translateY(-6px); }
.tip.in { opacity: 1; transform: none; }
.tip small { display: block; font-size: 12px; color: var(--green); }
.tip p { margin: 2px 0 8px; font-size: 15px; line-height: 1.35; }
.tip-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tip-off { font: inherit; font-size: 13px; color: var(--muted); background: none; border: 0; padding: 8px 0; min-height: 36px; cursor: pointer; }
.tip-off:hover { color: var(--text); }
.tip-arrow { position: absolute; top: -6px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg); background: #1c1c1e;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .08); }
.tip.above .tip-arrow { top: auto; bottom: -6px; box-shadow: inset -1px -1px 0 rgba(255, 255, 255, .08); }
@media (prefers-reduced-motion: reduce) { .tip, .tip.above { transition: none; transform: none; } }