Source

/* Lift. Shared look comes from /kit.css; this is the app's own layout. Phones first. */
body.app-mode .landing-only { display: none !important; }
body:not(.app-mode) #app:empty, body:not(.app-mode) #app-nav { display: none; }
body.app-mode .site-foot { display: none; }
.small { font-size: 14px; }
.faint { color: var(--faint); }
.grow { flex: 1; min-width: 0; }
.self-start { justify-self: start; align-self: flex-start; }
.inline-icon { display: inline-block; vertical-align: -2px; }
.brand-app { color: var(--muted); font-weight: 500; }
.brand-sep { color: var(--line-strong); font-weight: 300; }
.nav-cta { background: var(--ink-solid); color: #fff !important; }
.nav-cta:hover { background: #2a2c31 !important; }
@media (max-width: 420px) { .brand-word { display: none; } }
.btn svg { flex: none; }
.btn-danger-solid { background: var(--brick); border-color: var(--brick); }
.btn-danger-solid:hover { background: #8f3824; }

/* Landing hero with the quick start */
.app-hero { padding: 40px 0 72px; background: linear-gradient(180deg, #faf6ee 0%, #fdfdfc 100%); border-bottom: 1px solid #f0ebe1; }
.app-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; grid-template-areas: "text start" "more start"; column-gap: 56px; align-items: center; }
.hero-text { grid-area: text; align-self: end; }
.hero-more { grid-area: more; align-self: start; }
#start { grid-area: start; min-width: 0; }
.app-hero h1 { margin-top: 14px; }
.app-hero .lede { margin-top: 18px; }
.hero-points { list-style: none; padding: 0; margin-top: 26px; display: grid; gap: 10px; font-size: 15.5px; color: #3c4048; }
.hero-points li { display: flex; gap: 10px; align-items: baseline; }
.hero-points li::before { content: ""; flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--cobalt); transform: translateY(-2px); }
.hero-art { width: 230px; height: auto; margin-bottom: -6px; }
.hero-art, .empty-art { filter: brightness(1.025); }
@media (max-width: 900px) {
  .app-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "start" "more"; row-gap: 24px; }
  .app-hero { padding-top: 16px; }
  .hero-art { width: 150px; }
  .app-hero .lede { margin-top: 4px; }
}
.start { padding: 20px; display: grid; gap: 12px; }
.start-title { font: 400 26px/1.2 var(--serif); letter-spacing: -.015em; }
.start-resume { display: grid; gap: 6px; }
.start-resume .btn { margin-top: 8px; }
.start-label { margin-top: 6px; font: 650 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.start-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.start-list.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.start-item { display: grid; gap: 2px; width: 100%; min-height: 60px; padding: 10px 14px; border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 14px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.start-item:hover { border-color: var(--line-strong); color: var(--ink); }
.start-item strong { font: 600 15px/1.25 var(--sans); }
.start-item span { font-size: 13px; color: var(--muted); }

/* Landing sections */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 28px; padding: 0; counter-reset: step; }
.steps li { list-style: none; counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 50%; background: var(--ink-solid); color: #fff; font: 650 15px var(--sans); }
.steps h3, .features h3 { font: 600 18px/1.3 var(--sans); }
.steps p, .features p { margin-top: 8px; color: #4a4e56; }
.features { list-style: none; padding: 0; margin-top: 26px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.features li { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
@media (max-width: 860px) { .steps, .features { grid-template-columns: minmax(0, 1fr); } }
.programs { list-style: none; padding: 0; margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.programs > li { padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.programs h3 { font: 600 17px/1.3 var(--sans); }
.programs p { margin-top: 4px; font-size: 14px; color: var(--muted); }
.programs ul { margin-top: 10px; padding-left: 0; list-style: none; display: grid; gap: 6px; font-size: 14.5px; }
.programs ul a { font-weight: 600; }
.api-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: start; }
.api-grid .code { font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 900px) { .api-grid { grid-template-columns: minmax(0, 1fr); } }
.more-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; list-style: none; padding: 0; margin-top: 22px; }
.more-apps a { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); }
.more-apps a:hover { border-color: var(--line-strong); box-shadow: var(--shadow); color: var(--ink); }
.more-apps strong { font: 400 22px/1.1 var(--serif); }
.more-apps span { color: var(--muted); font-size: 14px; }
.compare td:first-child { font-weight: 600; }
.compare { min-width: 720px; }

/* App tabs: in the header on wide screens, a bar at the bottom on phones */
body.app-mode .site-nav { display: none; }
#app-nav { margin-left: auto; }
.head-tabs { display: none; }
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; pointer-events: none; }
.dock > * { pointer-events: auto; }
.tabbar { display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: #fdfdfcf2; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
.tabbar a { display: grid; justify-items: center; gap: 3px; min-height: 52px; padding: 6px 0; border-radius: 12px; color: var(--muted); font: 600 12px/1 var(--sans); }
.tabbar a[aria-current="page"] { color: var(--ink-solid); background: #0000000a; }
@media (min-width: 760px) {
  .tabbar { display: none; }
  .head-tabs { display: flex; gap: 4px; }
  .head-tabs a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 8px; color: #33363c; font: 600 14.5px/1 var(--sans); }
  .head-tabs a svg { width: 18px; height: 18px; }
  .head-tabs a:hover { background: #0000000a; color: var(--ink-solid); }
  .head-tabs a[aria-current="page"] { background: #0000000d; color: var(--ink-solid); }
  .dock { left: 50%; right: auto; bottom: 20px; width: min(560px, calc(100% - 48px)); transform: translateX(-50%); }
}
@media (max-width: 900px) and (min-width: 760px) { .head-tabs a span { display: none; } }

/* The bar above the tabs: rest timer, or the workout in progress */
.active-bar { position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 10px 6px 16px; overflow: hidden; background: var(--ink-solid); color: #fff; }
@media (min-width: 760px) { .active-bar { border-radius: 14px; box-shadow: 0 12px 30px -10px #0006; } }
.active-link { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; color: #fff; font: 500 14.5px/1.2 var(--sans); white-space: nowrap; overflow: hidden; }
.active-link:hover { color: #fff; }
.active-link strong { overflow: hidden; text-overflow: ellipsis; font-weight: 650; }
.active-bar .btn { background: #fff; color: var(--ink-solid); border-color: #fff; }
.live-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #7bc48f; }
.rest-fill { position: absolute; inset: 0 auto 0 0; background: #2e5ec4; transition: width .25s linear; }
.active-bar.over { background: var(--sage); }
.active-bar.over .rest-fill { display: none; }
.rest-text { position: relative; display: flex; align-items: center; gap: 8px; flex: 1; font: 500 15px/1 var(--sans); font-variant-numeric: tabular-nums; }
.rest-text strong { font: 650 20px/1 var(--sans); }
.rest-actions { position: relative; display: flex; gap: 6px; }
.rest-btn { position: relative; min-width: 48px; min-height: 40px; padding: 0 10px; border: 1px solid #ffffff55; border-radius: 10px; background: #ffffff14; color: #fff; font: 650 14px/1 var(--sans); cursor: pointer; }
.rest-btn:hover { background: #ffffff26; }
.rest-btn.skip { background: #fff; color: var(--ink-solid); border-color: #fff; }

/* Pages */
@media (max-width: 759px) { body.app-mode { --page: calc(100% - 28px); } }
.shell { width: var(--page); margin-inline: auto; padding: 18px 0 170px; }
@media (min-width: 760px) { .shell { padding-bottom: 120px; } }
.page { max-width: 760px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.page.settings, .page.detail { max-width: 1080px; }
.page.workout { max-width: 700px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 6px; }
.page-head .h1 { margin-top: 8px; overflow-wrap: anywhere; }
.page-head > div:first-child { min-width: 0; }
.back-link { display: inline-flex; align-items: center; gap: 4px; justify-self: start; min-height: 36px; font: 600 14.5px var(--sans); }
.section-label { margin: 6px 0 2px; font: 650 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.empty { display: grid; justify-items: center; gap: 12px; padding: 30px 20px; border: 1px dashed var(--line-strong); border-radius: 16px; text-align: center; }
.empty-art { width: 200px; height: auto; }
.pad { padding: 18px; }
.icon-title { display: flex; align-items: center; gap: 8px; }
.icon-title svg { color: var(--gold); flex: none; }
.link-btn { display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 36px; padding: 0; border: 0; background: none; color: var(--cobalt); font: 600 14.5px var(--sans); cursor: pointer; }
.link-btn:hover { color: var(--cobalt-ink); }
.link-btn.danger, .menu-item.danger { color: var(--brick); }
.fine { margin-top: 2px; }
.loading { display: flex; align-items: center; gap: 12px; color: var(--muted); padding: 24px 0; }
.pr { display: inline-flex; align-items: center; gap: 4px; color: var(--gold); font: 650 12.5px/1 var(--sans); white-space: nowrap; }
.chip { flex: none; }
.input.bad { border-color: var(--brick); }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 420px) { .two-col { grid-template-columns: minmax(0, 1fr); } }

/* Start screen */
.routine-list, .history-list, .ex-list, .pick-list, .template-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.routine-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px #1a1d240a; }
.routine-main { display: grid; gap: 2px; flex: 1; min-width: 0; color: var(--ink); }
.routine-main:hover { color: var(--ink); }
.routine-main strong { font: 600 16.5px/1.3 var(--sans); overflow-wrap: anywhere; }
.program-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.program { padding: 16px; display: grid; gap: 6px; align-content: start; }
.template-list { margin-top: 6px; gap: 6px; }
.template-row { display: grid; gap: 1px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); }
.template-row:hover { border-color: var(--line-strong); color: var(--ink); background: #fcfcfb; }
.template-row strong { font: 600 15px/1.3 var(--sans); }

/* Workout */
.workout-head { position: sticky; top: 64px; z-index: 6; display: flex; align-items: center; gap: 12px; margin: -6px -14px 0; padding: 10px 14px; background: #fdfdfcf2; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .workout-head { margin-inline: 0; padding-inline: 0; } }
.workout-name { width: 100%; min-width: 0; padding: 2px 0; border: 0; border-bottom: 1px dashed transparent; background: none; font: 400 26px/1.2 var(--serif); letter-spacing: -.015em; color: var(--ink-solid); }
.workout-name:hover { border-bottom-color: var(--line-strong); }
.workout-name:focus { outline: none; border-bottom-color: var(--cobalt); }
.elapsed { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.logger { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.item { padding: 12px 10px 6px; display: grid; gap: 8px; }
@media (min-width: 560px) { .item { padding: 14px 16px 8px; } }
.item.ss { border-left: 4px solid var(--cobalt); }
.item.ss:not(.ss-last) { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; margin-bottom: -8px; }
.item.ss:not(.ss-first) { border-top-left-radius: 6px; border-top-right-radius: 6px; }
.ss-tag { font: 650 11.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--cobalt); }
.item-head { display: flex; align-items: center; gap: 8px; }
.item-name { flex: 1; min-width: 0; font: 650 16.5px/1.3 var(--sans); color: var(--ink-solid); overflow-wrap: anywhere; }
.item-name:hover { color: var(--cobalt); }
.as-link { padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.item-note { min-height: 0; padding: 8px 10px; font-size: 14.5px; }
.set-grid { display: grid; gap: 4px; }
.set-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 68px 56px 44px; align-items: center; gap: 6px; padding: 3px 2px; border-radius: 10px; }
.with-rpe .set-row { grid-template-columns: 34px minmax(0, 1fr) 64px 50px 50px 44px; }
@media (max-width: 380px) { .with-rpe .set-row { grid-template-columns: 30px minmax(0, 1fr) 58px 46px 46px 42px; gap: 4px; } }
.set-row.done { background: var(--sage-wash); }
.set-headrow { padding-block: 0; font: 650 11px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); text-align: center; }
.set-headrow span:nth-child(2) { text-align: left; }
.set-headrow svg { margin-inline: auto; }
.set-label { height: 34px; padding: 0; border: 0; border-radius: 8px; background: #f2f4f7; font: 650 14px/1 var(--sans); color: #33363c; cursor: pointer; font-variant-numeric: tabular-nums; }
.set-label:hover { background: #e8ebf0; }
.type-w .set-label { background: #fbf3e2; color: #8a6420; }
.type-d .set-label { background: var(--cobalt-wash); color: var(--cobalt-ink); }
.set-prev { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; }
.set-input { width: 100%; min-width: 0; height: 40px; padding: 0 4px; border: 1px solid var(--line); border-radius: 9px; background: #f7f8fa; color: var(--ink); text-align: center; font: 600 16px/1 var(--sans); font-variant-numeric: tabular-nums; -webkit-appearance: none; appearance: none; }
.set-input::placeholder { color: #a5aab3; font-weight: 500; }
.set-input:focus { outline: none; border-color: var(--cobalt); background: #fff; box-shadow: 0 0 0 3px #2e5ec41f; }
.done .set-input { background: #fff0; border-color: transparent; }
.set-rpe { text-align-last: center; font-size: 15px; }
.set-done { display: grid; place-items: center; width: 40px; height: 40px; justify-self: center; padding: 0; border: 1.5px solid var(--line-strong); border-radius: 10px; background: #fff; color: var(--line-strong); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .12s, color .12s, border-color .12s; }
.set-done:hover { border-color: #aeb6c2; color: #8f97a3; }
.set-done[aria-pressed="true"] { background: var(--sage); border-color: var(--sage); color: #fff; }
.add-set { justify-self: center; }
.add-ex { margin-top: 4px; }
.workout-note { margin-top: 6px; }
.workout-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 520px) { .workout-foot .btn-lg { flex: 1; } }
.workout-note-text { white-space: pre-wrap; padding: 12px 14px; border-radius: 12px; background: var(--paper-warm); border: 1px solid #ece2cf; }

/* Menus and pickers */
.menu-list { display: grid; }
.menu-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 4px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); text-align: left; font: 600 15.5px/1.3 var(--sans); cursor: pointer; }
.menu-item:last-child { border-bottom: 0; }
.menu-item:hover { color: var(--cobalt); }
.menu-field select { width: auto; min-width: 150px; min-height: 40px; padding: 6px 10px; font-size: 14.5px; }
.picker { display: grid; gap: 12px; }
.search-field { position: relative; display: block; }
.search-field svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.search-field .input { padding-left: 38px; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.chip-btn { flex: none; min-height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 99px; background: #fff; color: #3c4048; font: 600 13.5px/1 var(--sans); cursor: pointer; }
.chip-btn[aria-checked="true"] { background: var(--ink-solid); border-color: var(--ink-solid); color: #fff; }
.pick-list { gap: 4px; }
.pick-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-align: left; cursor: pointer; }
.pick-row:hover { border-color: var(--line-strong); }
.pick-row.on { border-color: var(--ink-solid); background: #fafafa; }
.pick-row .grow { display: grid; gap: 1px; }
.pick-row strong { font: 600 15px/1.3 var(--sans); }
.pick-check { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border: 1.5px solid var(--line-strong); border-radius: 7px; color: #fff; }
.pick-row.on .pick-check { background: var(--ink-solid); border-color: var(--ink-solid); }
.segmented { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: var(--panel); border: 1px solid var(--panel-line); }
.segmented.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.segmented button { min-height: 40px; padding: 0 6px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; font: 600 14px var(--sans); color: var(--muted); }
.segmented button[aria-checked="true"] { background: #fff; color: var(--ink-solid); box-shadow: 0 1px 3px #0000001a; }
.choice-list { display: grid; gap: 6px; }
.choice { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-align: left; font: 600 14.5px var(--sans); color: #33363c; cursor: pointer; }
.choice .grow { display: grid; gap: 2px; }
.choice[aria-checked="true"] { border-color: var(--ink-solid); color: var(--ink-solid); }
.choice-dot { flex: none; width: 18px; height: 18px; border: 2px solid var(--line-strong); border-radius: 50%; }
.choice[aria-checked="true"] .choice-dot { border: 5.5px solid var(--ink-solid); }
.remove-set { margin-top: 14px; }

/* Routines */
.title-input { font: 400 28px/1.2 var(--serif); letter-spacing: -.015em; min-height: 54px; }
.ritems { list-style: none; padding: 0; display: grid; gap: 10px; }
.ritem { padding: 12px 14px; display: grid; gap: 10px; }
.ritem.ss { border-left: 4px solid var(--cobalt); }
.readonly .ritem { gap: 4px; }
.readonly .ritem .spread { align-items: baseline; }
.ritem-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ritem-fields .input { min-height: 42px; padding: 8px 8px; font-size: 15px; }
.ritem-fields .field > span { font-size: 12.5px; }
@media (max-width: 480px) { .ritem-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ritem-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.move { display: flex; gap: 2px; }
.move .icon-btn:disabled { opacity: .3; cursor: default; }
.routine-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 520px) { .routine-actions .btn-lg { flex: 1 1 100%; } }
.routine-note { white-space: pre-wrap; }

/* History and exercises */
.history-row, .ex-row { display: grid; gap: 3px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); }
.history-row:hover, .ex-row:hover { border-color: var(--line-strong); color: var(--ink); }
.history-row strong { font: 600 16px/1.3 var(--sans); overflow-wrap: anywhere; }
.history-ex { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.session-sets { color: #3c4048; font-variant-numeric: tabular-nums; }
.ex-row { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 16px; }
.ex-row .grow { display: grid; gap: 1px; }
.ex-row strong { font: 600 15.5px/1.3 var(--sans); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.equip-select { width: auto; flex: 0 1 180px; min-width: 0; }
@media (max-width: 520px) { .filters .search-field { flex-basis: 100%; } .equip-select { flex: 1 1 100%; } }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
.stats > div { padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; min-width: 0; }
.stats dt { font: 600 11.5px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.stats dd { margin: 6px 0 0; font: 380 26px/1.15 var(--serif); letter-spacing: -.015em; overflow-wrap: anywhere; }
.stats dd.stat-sub { margin-top: 4px; font: 500 13px/1.3 var(--sans); letter-spacing: 0; }
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats dd { font-size: 23px; } }
.rec-list { list-style: none; padding: 0; display: grid; }
.rec-list li { display: grid; gap: 2px; padding: 9px 0; border-top: 1px solid var(--line); }
.rec-list li:first-child { border-top: 0; }
.rec-list a { font-weight: 600; }
.detail-item { display: grid; gap: 6px; }
.detail-item.ss { border-left: 4px solid var(--cobalt); }
.detail-sets { list-style: none; padding: 0; display: grid; }
.detail-sets li { display: flex; align-items: center; gap: 10px; min-height: 38px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.detail-sets li:first-child { border-top: 0; }
.detail-sets li.warm { color: var(--muted); }
.set-badge { display: grid; place-items: center; flex: none; width: 28px; height: 26px; border-radius: 7px; background: #f2f4f7; font: 650 12.5px/1 var(--sans); color: #4a4e56; }
.warm .set-badge { background: #fbf3e2; color: #8a6420; }
.saved-note { font-size: 15px; }
.reps-table td, .reps-table th { padding: 9px 12px; white-space: nowrap; }
.metric-switch { min-width: 0; flex: 1 1 320px; max-width: 460px; }
.metric-switch button { font-size: 13px; }

/* Chart */
.chart { position: relative; width: 100%; overflow: hidden; }
.chart svg { display: block; touch-action: pan-y; }
.chart-grid { stroke: #eceff3; stroke-width: 1; }
.chart-axis { fill: var(--faint); font: 500 11.5px var(--sans); font-variant-numeric: tabular-nums; }
.chart-line { fill: none; stroke: var(--cobalt); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { fill: var(--cobalt); stroke: #fff; stroke-width: 2; }
.chart-cross { stroke: #b9c0ca; stroke-width: 1; stroke-dasharray: 3 3; }
.chart-focus { fill: #fff; stroke: var(--cobalt); stroke-width: 2.5; }
.chart-readout { font-size: 14px; color: var(--muted); }
.chart-readout strong { color: var(--ink); }

/* Profile */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; align-items: start; }
.account-card { background: var(--cobalt-wash); border-color: #d1ddf5; }
.weeks { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 6px; height: 120px; }
.week-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; }
.week-bar { width: 100%; min-height: 3px; border-radius: 4px 4px 0 0; background: var(--cobalt); }
.week-n { font: 600 11.5px/1 var(--sans); color: var(--muted); }
.bw-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: end; }
.bw-form .btn { grid-column: 1 / -1; }
.bw-list { list-style: none; padding: 0; display: grid; }
.bw-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 42px; border-top: 1px solid var(--line); font-size: 14.5px; }
.bw-list li:first-child { border-top: 0; }

/* Plate calculator */
.plates-inputs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.plates-inputs .segmented { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.unit-switch { max-width: 280px; }
.unit-switch button { min-height: 34px; font-size: 13px; }
.plates-result { display: grid; gap: 10px; padding: 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--panel-line); }
.plates-line { font-size: 16px; }
.sleeve { display: flex; align-items: center; gap: 3px; min-height: 104px; overflow-x: auto; }
.sleeve-collar { flex: none; width: 10px; height: 34px; border-radius: 3px; background: #9aa1ab; }
.plate { flex: none; border-radius: 4px; background: var(--ink-solid); }
.sleeve-end { flex: 1 1 40px; max-width: 120px; height: 14px; border-radius: 0 4px 4px 0; background: #b8bec7; }

/* Sheets (from Split) */
.modal-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: #15171b66; animation: fade .15s ease; overflow: hidden; }
.modal { display: flex; flex-direction: column; outline: none; width: min(560px, 100%); max-height: min(88vh, 900px); border-radius: 18px; background: #fff; box-shadow: 0 30px 80px -20px #0006; animation: rise .18s ease; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 6px; }
.modal-title { font: 400 26px/1.2 var(--serif); letter-spacing: -.015em; min-width: 0; overflow-wrap: anywhere; }
.modal-body { padding: 12px 20px 20px; overflow-y: auto; overflow-x: hidden; }
.modal-foot { display: flex; align-items: center; gap: 10px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.icon-btn { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; cursor: pointer; color: var(--muted); }
.icon-btn:hover { background: #0000000a; color: var(--ink); }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 600px) {
  .modal-backdrop { place-items: end stretch; padding: 0; }
  .modal { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; }
}
.toast { display: flex; align-items: center; gap: 14px; bottom: calc(150px + env(safe-area-inset-bottom)); max-width: calc(100% - 32px); width: max-content; z-index: 70; }
.toast-action { flex: none; min-height: 32px; padding: 0 10px; border: 1px solid #ffffff40; border-radius: 8px; background: none; color: #fff; font: 650 14px var(--sans); cursor: pointer; }
.toast-action:hover { background: #ffffff1a; }
@media (min-width: 760px) { .toast { bottom: 96px; } }
body:not(.app-mode) .toast { bottom: 24px; }