/* No Limits Open Workout — Build 1
   Screen styles. The print styles that follow this file are lifted
   unchanged from the previous app so the sheets look identical. */

*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* The browser's own rule for the hidden attribute is [hidden]{display:none},
   which has element-level specificity. Any class that sets display — and
   most of the buttons here do, for flex or grid layout — beats it and the
   element stays on screen.

   This is why a bare back chevron appeared on screens that had no back
   destination, and why "Next exercise" sat above an already-open search
   box. Both were being hidden correctly in JavaScript and shown anyway by
   CSS. !important is the right tool for exactly this: the attribute is a
   statement of fact about the element, not a style preference. */
[hidden]{display:none!important}
body{
  background:#0e0e0e;
  color:#f2f2f2;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.45;
  -webkit-text-size-adjust:100%;
  padding-bottom:env(safe-area-inset-bottom);
}
h1{font-size:22px;margin:0 0 14px}
h2{font-size:17px;margin:0 0 10px}
p{margin:0 0 10px}
.muted{color:#9a9a9a;font-size:14px}

/* ---------- header ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:10px;
  padding:calc(8px + env(safe-area-inset-top)) 8px 8px;
  background:#0e0e0e;
  border-bottom:1px solid #232323;
}
/* The logo is the way home. It is a button, so it gets a real target
   height and reads as pressable rather than as decoration. */
.brand-btn{
  display:flex;align-items:center;gap:9px;
  min-height:44px;padding:0 6px;
  background:none;border:0;cursor:pointer;
  /* A button in the app, an <a> on the privacy page — without this the
     anchor version wears the browser's underline and TRAINING appears
     underlined on one page and not the other. */
  text-decoration:none;
}
.brand-btn:disabled{cursor:default;opacity:1}
.brand-btn:active:not(:disabled){opacity:.65}
.brand-logo{height:23px;width:auto;display:block}
.brand-word{font-size:10px;letter-spacing:.32em;color:#8d8d8d;font-weight:700}

/* 44pt targets. The old chevron was a 20px glyph you had to aim at. */
.back-btn{
  display:flex;align-items:center;gap:4px;
  min-height:44px;padding:0 12px 0 6px;margin-right:-2px;
  background:none;border:0;color:#f2f2f2;
  font-size:15px;font-weight:600;cursor:pointer;
}
.back-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.back-btn span:empty{display:none}
.icon-btn{
  display:grid;place-items:center;
  min-width:44px;min-height:44px;
  background:none;border:0;color:#9a9a9a;cursor:pointer;
}
/* Push the first icon right; any that follow sit beside it. */
#openDiary{margin-left:auto}
#openSettings:first-of-type,
#openDiary[hidden] + #openSettings{margin-left:auto}
.icon-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.icon-btn:active{color:#fff}

/* ---------- views ---------- */
main{padding:16px 14px 40px;max-width:720px;margin:0 auto}
.view{display:none}
.view.active{display:block}

/* ---------- home ---------- */
.home-inner{display:grid;gap:22px}
/* The one button that matters on this screen. It carries the brand's
   own devices — the italic slant of the wordmark, and a hint of the red
   swoosh under it — rather than being a plain red slab with a glyph.

   The icon is drawn from filled shapes and sized to sit beside the text
   as an equal, not as decoration in front of it. */
.start-workout{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;gap:16px;
  width:100%;min-height:78px;padding:18px 22px;
  background:linear-gradient(176deg,#f5232b 0%,#e01118 55%,#c60f16 100%);
  border:0;border-radius:16px;
  color:#fff;cursor:pointer;
  box-shadow:0 10px 26px rgba(214,17,24,.28), inset 0 1px 0 rgba(255,255,255,.22);
  -webkit-tap-highlight-color:transparent;
}
/* The swoosh, echoing the underline in the logo. Decorative and behind
   everything, so it never interferes with the label. */
.start-workout::after{
  content:"";position:absolute;left:-6%;right:-6%;bottom:-26px;height:52px;
  background:rgba(255,255,255,.09);
  border-radius:50%;
  pointer-events:none;
}
.start-workout:active{
  transform:translateY(1px);
  box-shadow:0 5px 14px rgba(214,17,24,.26), inset 0 1px 0 rgba(255,255,255,.16);
}
.start-workout strong{
  position:relative;
  font-size:21px;font-weight:800;font-style:italic;
  letter-spacing:.01em;text-transform:uppercase;
}

.start-icon{position:relative;display:grid;place-items:center;flex:none}
.start-icon svg{display:block;fill:#fff}
.icon-dumbbell{width:46px;height:29px}
.icon-resume{width:34px;height:34px}

/* One mark or the other, never both. */
.start-workout .icon-resume{display:none}
.start-workout.resuming .icon-dumbbell{display:none}
.start-workout.resuming .icon-resume{display:block}

@media (prefers-reduced-motion:reduce){
  .start-workout:active{transform:none}
}

.recent h2{color:#8d8d8d;font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.recent-item{
  display:grid;gap:3px;
  width:100%;text-align:left;
  padding:14px 15px;margin-bottom:8px;
  background:#171717;border:0;border-radius:14px;
  color:inherit;font:inherit;cursor:pointer;
}
.recent-item strong{font-size:15px}
.recent-item span{color:#9a9a9a;font-size:13px}
.empty{color:#7d7d7d;font-size:14px;padding:6px 0}

/* The one control on this screen sits at the bottom, where a thumb
   already is. Everything above scrolls underneath it, and the fade stops
   text appearing to run into the button. */
.home-action{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);
  width:100%;max-width:720px;z-index:35;
  display:grid;gap:8px;
  padding:22px 14px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, #0e0e0e 62%, rgba(14,14,14,0));
  pointer-events:none;
}
.home-action > *{pointer-events:auto}

/* Room for it, so the last workout in the list is never hidden under it. */
body.at-home main{padding-bottom:170px}

.resume-strip{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;
  background:#1a1712;border:1px solid #3d3524;border-radius:11px;
  color:#d8c9a4;font-size:13px;
}
.resume-strip span{flex:1}
.link-btn{
  background:none;border:0;padding:6px;
  color:#9a9a9a;font-size:14px;text-decoration:underline;cursor:pointer;
}
.link-btn.danger{color:#e2615f}

/* Links inside prose. Without this they fall back to the browser
   defaults — blue, then purple once visited, both unreadable on a black
   card. :visited must be set too, or the link changes colour the moment
   somebody has read the page once. */
main p a,main p a:visited{
  color:#e8e8e8;text-decoration:underline;text-underline-offset:2px;
}
main p a:active{color:#ed1c24}
/* The default focus ring on a dark card is a thin blue box that swallows
   the text. Long addresses also need somewhere to break, or they run off
   a phone screen. */
main p a:focus-visible{
  outline:2px solid #ed1c24;outline-offset:2px;border-radius:3px;
  color:#fff;
}
main p a{word-break:break-word}
.build-stamp{
  text-align:center;margin:8px 0 0;
  color:#5a5a5a;font-size:12px;letter-spacing:.08em;
}

/* ---------- rest bar ---------- */
/* Clock, then Pause directly under it, with the four alternative
   lengths in a 2x2 block beside them. Two columns of equal visual
   weight instead of a row of chips that wraps into an odd shape. */
.rest-bar{
  position:sticky;top:calc(46px + env(safe-area-inset-top));z-index:30;
  display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;
  padding:12px;margin:0 0 14px;
  background:#161616;border:0;border-radius:14px;
  transition:background .2s ease;
}
.rest-bar.resting{background:#1c1c1c}

.rest-main{display:grid;gap:6px;justify-items:start;min-width:0}
.rest-label{
  margin:0;color:#7d7d7d;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
}
.rest-label strong{color:#c8c8c8}
.rest-clock{
  display:flex;align-items:baseline;gap:5px;
  font-size:34px;font-weight:800;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:#f2f2f2;
}
/* The length you're aiming for, as a suffix rather than its own line —
   "REST · SET TO 01:00" was wrapping to two rows on a narrow phone. */
.rest-clock em{
  font-style:normal;font-size:15px;font-weight:700;color:#6f6f6f;
}
.rest-bar:not(.resting) .rest-clock{color:#4a4a4a}

.rest-presets{
  display:grid;grid-template-columns:repeat(2,1fr);gap:7px;
}

.pause-btn{
  width:100%;min-height:46px;padding:0 16px;margin-top:2px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#242424;border:1px solid #3a3a3a;border-radius:11px;
  color:#e8e8e8;font-size:15px;font-weight:700;cursor:pointer;
}
.pause-btn .play-icon,.pause-btn.paused .pause-icon{display:none}
.pause-btn.paused .play-icon{display:block}
.pause-btn.paused{background:#ed1c24;border-color:#ed1c24;color:#fff}
.pause-btn:disabled{opacity:.35;cursor:default}
.pause-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.pause-btn .play-icon{fill:currentColor;stroke:none}

body.is-paused .rest-clock,
body.is-paused .workout-meta #workoutElapsed{opacity:.4}

.chip{
  min-height:46px;padding:0 16px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#222;border:1px solid #343434;border-radius:11px;
  color:#e8e8e8;font-size:16px;font-weight:700;cursor:pointer;
  font-variant-numeric:tabular-nums;
}
.chip.on{background:#ed1c24;border-color:#ed1c24;color:#fff}
.chip.icon{padding:6px 9px;display:grid;place-items:center}
.chip.icon svg{width:19px;height:19px;fill:currentColor;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.chip.icon svg .wave{fill:none}
.chip.icon svg .cross{display:none;fill:none}
.chip.icon.muted svg .wave{display:none}
.chip.icon.muted svg .cross{display:block}

.rest-bar.flash{
  background:#ed1c24;border-color:#fff;
  transform:translateY(-4%);
  box-shadow:0 0 0 6px rgba(237,28,36,.28);
}
.rest-bar.flash *{color:#fff!important}
.rest-bar.flash .chip{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5)}
@media (prefers-reduced-motion:reduce){
  .rest-bar.flash{transform:none;box-shadow:none}
}

/* ---------- workout meta ---------- */
/* The workout duration leads the screen, centred and labelled, and is on
   from the moment you open a workout rather than appearing once it runs.
   It belongs to the whole session, not to the rest you happen to be
   taking, so it sits above the rest bar rather than inside it. */
.workout-meta{
  display:grid;justify-items:center;gap:3px;
  margin:2px 0 14px;
}
.duration-label{
  color:#7d7d7d;font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
}
.workout-meta #workoutElapsed{
  font-size:32px;font-weight:800;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:#f2f2f2;
}
.meta-row{
  display:flex;gap:14px;align-items:baseline;
  color:#8d8d8d;font-size:13px;margin-top:2px;
}
.saved{color:#5fbf7a}
.saved.saving{color:#c9a23a}

/* ---------- exercise cards ---------- */
/* One border rule for the whole app: outlines are for things you type
   into. Everything else separates by surface colour. Before this, a card
   inside a section inside a screen meant three nested outlines, which is
   what made the screenshots read as boxes inside boxes. */
.exercise{
  padding:16px;margin-bottom:10px;
  background:#171717;border:0;border-radius:16px;
}
.exercise.done{background:#141a15}
.exercise.open{background:#191919}

.ex-head{display:flex;align-items:flex-start;gap:4px;margin-bottom:2px}
.ex-name{
  flex:1;text-align:left;
  background:none;border:0;padding:0;
  color:#fff;font-size:21px;font-weight:800;letter-spacing:-.015em;line-height:1.15;
  cursor:pointer;
}
.ex-remove,.ex-collapse{
  flex:none;width:40px;height:40px;margin-top:-8px;
  display:grid;place-items:center;
  background:none;border:0;color:#5a5a5a;font-size:16px;cursor:pointer;
}
.ex-remove:active,.ex-collapse:active{color:#9a9a9a}
.ex-sub{color:#6f6f6f;font-size:12px;margin-bottom:12px;letter-spacing:.01em}

/* Last time, on one line. It was a three-line block with the weight at
   heading size, which made every exercise card start with history rather
   than with the sets you're about to do. */
.ex-best{
  display:grid;gap:2px;
  padding:8px 11px;margin-bottom:11px;
  background:#141b23;border-radius:10px;
  border-left:2px solid #3d6b96;
}
.ex-best span{color:#7d94a8;font-size:11px;letter-spacing:.04em;font-weight:600}
.ex-best strong{color:#cfe4f7;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.ex-best em{color:#5b6f80;font-size:11px;font-style:normal;font-variant-numeric:tabular-nums}
.ex-first{color:#5a5a5a;font-size:13px;margin-bottom:14px}

/* Folded: the name and what you did, nothing else. */
.exercise.collapsed{padding:0}
.collapsed-head{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:15px 16px;
  background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;
}
.collapsed-main{display:grid;gap:3px;flex:1;min-width:0}
.collapsed-main strong{font-size:16px;font-weight:700}
.collapsed-sets{
  color:#8d8d8d;font-size:13px;font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.collapsed-count{
  flex:none;min-width:28px;height:28px;
  display:grid;place-items:center;
  background:#242424;border-radius:999px;
  color:#9a9a9a;font-size:12px;font-weight:700;
}
.exercise.collapsed.done .collapsed-count{background:#2f5c3a;color:#fff}

.set-head,.set-row{
  display:grid;grid-template-columns:28px 1fr 1fr 64px;gap:10px;align-items:center;
}
.set-head{color:#6f6f6f;font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.set-row{margin-bottom:10px}
.set-row strong{color:#6f6f6f;font-size:15px;text-align:center;font-variant-numeric:tabular-nums}
.set-row input{
  width:100%;height:58px;padding:0 8px;
  background:#0d0d0d;border:1px solid #333;border-radius:12px;
  color:#fff;font-size:22px;font-weight:700;text-align:center;
  font-variant-numeric:tabular-nums;
}
.set-row input::placeholder{color:#4a4a4a;font-size:15px;font-weight:500}
.set-row input:focus{outline:2px solid #ed1c24;outline-offset:1px;border-color:#ed1c24}

.set-row.logged input{color:#7fae8c;background:#111511;border-color:#243024}
.set-row.logged strong{color:#5fbf7a}
.set-row.open strong{color:#e8e8e8}

.tick{
  width:64px;height:58px;
  display:grid;place-items:center;
  background:#1e1e1e;border:1px solid #343434;border-radius:12px;
  color:#6f6f6f;font-size:24px;line-height:1;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.tick.on{background:#2f5c3a;border-color:#3d7a4c;color:#fff}
.tick:active{transform:scale(.96)}


/* ---------- picker ---------- */
.picker{
  padding:14px;margin-bottom:14px;
  background:#141414;border:1px dashed #333;border-radius:14px;
}
.picker-search input{
  width:100%;padding:13px 12px;
  background:#0f0f0f;border:1px solid #333;border-radius:10px;
  color:#fff;font-size:16px;
}
.suggestion{
  display:grid;gap:2px;width:100%;text-align:left;
  padding:11px 12px;margin-bottom:6px;
  background:#1e1e1e;border:0;border-radius:12px;
  color:inherit;font:inherit;cursor:pointer;
}
.suggestion strong{font-size:15px}
.suggestion span{color:#8d8d8d;font-size:12px}
.add-offer{margin-top:8px;display:grid;gap:6px}
.picker-hint{margin:10px 2px 2px;color:#6f6f6f;font-size:13px}
.add-custom{font-size:13px;padding:10px}
.add-custom.keep{background:#1e2a1e;border-color:#3d5a3d;color:#bcd9bc}

.lib-row{
  display:flex;align-items:center;gap:8px;
  padding:12px 13px;margin-bottom:6px;
  background:#171717;border:0;border-radius:12px;
}
.lib-main{flex:1;min-width:0;display:grid;gap:2px}
.lib-main strong{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lib-main span{color:#8d8d8d;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lib-btn{
  flex:none;padding:8px 10px;
  background:#242424;border:1px solid #343434;border-radius:8px;
  color:#d8d8d8;font-size:12px;font-weight:600;cursor:pointer;
}
.lib-btn.danger{color:#e2615f;border-color:#4a2a2a}

#libSearch{
  width:100%;padding:13px 12px;margin-bottom:8px;
  background:#0f0f0f;border:1px solid #333;border-radius:10px;
  color:#fff;font-size:16px;
}
#libGroup{
  padding:11px;background:#0f0f0f;border:1px solid #333;border-radius:9px;
  color:#fff;font-size:16px;
}

.add-custom{
  width:100%;padding:11px;margin-top:4px;
  background:#20242c;border:1px dashed #3c4654;border-radius:10px;
  color:#b9c8dc;font-size:14px;cursor:pointer;
}

/* ---------- finish ---------- */
.finish-box{display:grid;gap:10px;justify-items:center;margin-top:18px}
button.primary,button.secondary{
  padding:15px 18px;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;
}
button.primary{background:#ed1c24;border:0;color:#fff}
button.secondary{background:#1c1c1c;border:1px solid #343434;color:#e8e8e8}
button.danger-btn{
  padding:15px 18px;border-radius:12px;
  background:#2a1414;border:1px solid #6b2b2b;color:#e2615f;
  font-size:16px;font-weight:700;cursor:pointer;
}
button.danger-btn:active{background:#3a1a1a}
.full{width:100%}

/* ---------- cards / settings ---------- */
.card{
  padding:16px;margin-bottom:12px;
  background:#171717;border:0;border-radius:16px;
}
.card>button{margin-top:8px}
#signedOut>button,#signedIn>button{margin-top:8px}
.account-email{
  margin:0 0 4px;color:#f2f2f2;font-size:16px;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Styled by type, not by id. The id-based version meant every new input
   arrived unstyled — white and squat on iOS — until somebody noticed and
   added another id here. */
.field input[type=email],.field input[type=password],.field input[type=date]{
  padding:13px;background:#0d0d0d;border:1px solid #333;border-radius:11px;
  color:#fff;font-size:16px;
}
.field{display:grid;gap:6px;margin-bottom:14px}
.field>span{color:#9a9a9a;font-size:13px}
.field input[type=text],.field input[type=number]{
  padding:11px;background:#0f0f0f;border:1px solid #333;border-radius:9px;
  color:#fff;font-size:16px;
}
.rest-inputs{display:flex;align-items:center;gap:8px}
.rest-inputs input{width:74px;text-align:center}
.rest-inputs span{color:#8d8d8d;font-size:13px}
.check{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:15px}
.check input{width:20px;height:20px;accent-color:#ed1c24}

/* ---------- detail / history ---------- */
.detail-section{margin-bottom:16px}
.detail-section h2{color:#8d8d8d;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.detail-section ul{margin:0;padding-left:20px}
.detail-section li{margin-bottom:5px}
.hist-ex{padding:11px 0;border-bottom:1px solid #242424}
.hist-ex strong{display:block;font-size:15px;margin-bottom:3px}
.set-chips{display:flex;gap:6px;flex-wrap:wrap}
.set-chip{
  padding:5px 9px;background:#1e1e1e;border:0;border-radius:8px;
  font-size:12px;color:#c9c9c9;
}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:9999;max-width:88vw;
  padding:12px 18px;
  background:#f2f2f2;border-radius:999px;
  color:#111;font-size:14px;font-weight:600;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.nl-print-controls{display:none}
body.print-preview-open{overflow:hidden}
body.print-preview-open>*:not(.nl-print-root):not(.nl-print-controls){display:none!important}
body.print-preview-open .nl-print-root{display:block!important;position:fixed;inset:0;z-index:9998;overflow:auto;background:#e7e7e7;color:#111;padding:18px 12px 110px}
body.print-preview-open .nl-print-root .print-page{position:relative;width:min(794px,100%);min-height:1123px;margin:0 auto 18px;padding:38px;background:#fff;color:#111;box-shadow:0 8px 30px rgba(0,0,0,.22);font-family:Arial,Helvetica,sans-serif}
body.print-preview-open .nl-print-root .print-header{display:flex;align-items:flex-start;justify-content:space-between;border-bottom:4px solid #ed1c24;padding-bottom:8px;margin-bottom:10px}
body.print-preview-open .nl-print-root .print-brand{display:grid;justify-items:center;gap:2px;min-width:220px}
body.print-preview-open .nl-print-root .print-brand img{width:220px;height:auto}
body.print-preview-open .nl-print-root .print-brand span{font-size:12px;font-weight:800;letter-spacing:.42em;color:#111;margin-left:.42em}
body.print-preview-open .nl-print-root .print-title{text-align:right;max-width:56%}
body.print-preview-open .nl-print-root .print-title strong{display:block;font-size:20px;text-transform:uppercase}
body.print-preview-open .nl-print-root .print-title span{font-size:11px;color:#555}
body.print-preview-open .nl-print-root .print-meta{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1.3fr;gap:10px;font-size:11px;border:1px solid #bbb;padding:8px;margin-bottom:8px}
body.print-preview-open .nl-print-root .warmup{font-size:11px;background:#f1f1f1;padding:7px;margin-bottom:8px}
body.print-preview-open .nl-print-root .print-exercise{border:1.5px solid #222;margin:0 0 8px}
body.print-preview-open .nl-print-root .exercise-heading{display:flex;justify-content:space-between;align-items:flex-end;padding:7px 9px;border-bottom:1px solid #222}
body.print-preview-open .nl-print-root .exercise-heading small{font-size:8px;letter-spacing:.15em;color:#ed1c24;font-weight:bold}
body.print-preview-open .nl-print-root .exercise-heading h2{color:#111;font-size:15px;margin:2px 0 0}
body.print-preview-open .nl-print-root .exercise-heading p{font-size:10px;margin:0}
body.print-preview-open .nl-print-root table{width:100%;border-collapse:collapse;font-size:10px}
body.print-preview-open .nl-print-root th,body.print-preview-open .nl-print-root td{border-right:1px solid #999;border-bottom:1px solid #aaa;padding:4px;height:23px;text-align:center;color:#111}
body.print-preview-open .nl-print-root .notes-cell{width:36%}
body.print-preview-open .nl-print-root .print-disclaimer{border:2px solid #ed1c24;padding:7px 9px;margin-top:8px;font-size:8px;line-height:1.35;font-weight:700;text-transform:uppercase}
body.print-preview-open .nl-print-root .print-footer{display:flex;justify-content:space-between;font-size:9px;color:#555;margin-top:8px}
body.print-preview-open .nl-print-controls{display:flex!important;position:fixed;left:0;right:0;bottom:0;z-index:9999;align-items:center;justify-content:center;gap:10px;padding:12px;background:rgba(10,10,10,.97);border-top:1px solid #333}
body.print-preview-open .nl-print-controls>div{display:grid;gap:2px;margin-right:8px}
body.print-preview-open .nl-print-controls strong{color:#fff}
body.print-preview-open .nl-print-controls span{color:#aaa;font-size:12px}
@media(max-width:760px){
body.print-preview-open .nl-print-root{padding:8px 6px 150px}
body.print-preview-open .nl-print-root .print-page{width:100%;min-height:auto;padding:16px 12px;box-shadow:none}
body.print-preview-open .nl-print-root .print-brand{min-width:130px}
body.print-preview-open .nl-print-root .print-brand img{width:130px}
body.print-preview-open .nl-print-root .print-brand span{font-size:8px}
body.print-preview-open .nl-print-root .print-title{max-width:58%}
body.print-preview-open .nl-print-root .print-title strong{font-size:13px}
body.print-preview-open .nl-print-root .print-meta{grid-template-columns:1fr}
body.print-preview-open .nl-print-controls{display:grid!important;grid-template-columns:1fr;gap:10px}
body.print-preview-open .nl-print-controls button{white-space:nowrap;font-size:15px}
body.print-preview-open .nl-print-controls>div{grid-column:1/-1;margin:0}
body.print-preview-open .nl-print-controls button{width:100%}
}


/* BUILD 23 — Hide mobile print controls from printed pages */
@media print{
  .nl-print-controls,
  #nlPrintControls{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    position:absolute!important;
    width:0!important;
    height:0!important;
    overflow:hidden!important;
  }

  body.print-preview-open .nl-print-controls,
  body.print-preview-open #nlPrintControls{
    display:none!important;
  }

  body.print-preview-open{
    overflow:visible!important;
  }

  body.print-preview-open .nl-print-root{
    position:static!important;
    inset:auto!important;
    overflow:visible!important;
    padding:0!important;
    background:#fff!important;
  }
}
/* BUILD 20 — Reliable in-page printing */
.nl-print-root{display:none}

@media print{
  @page{size:A4;margin:10mm}

  html,body{
    background:#fff!important;
    color:#111!important;
    margin:0!important;
    padding:0!important;
  }

  body>*:not(.nl-print-root){
    display:none!important;
  }

  .nl-print-root{
    display:block!important;
    position:static!important;
    width:auto!important;
    min-height:0!important;
    background:#fff!important;
    color:#111!important;
  }

  .nl-print-root *{
    box-sizing:border-box;
  }

  .nl-print-root .print-page{
    position:relative;
    page-break-after:always;
    break-after:page;
    background:#fff;
    color:#111;
    font-family:Arial,Helvetica,sans-serif;
  }

  .nl-print-root .print-page:last-child{
    page-break-after:auto;
    break-after:auto;
  }

  .nl-print-root .print-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:4px solid #ed1c24;
    padding-bottom:8px;
    margin-bottom:10px;
  }

  .nl-print-root .print-header img{
    width:210px;
    height:auto;
  }

  .nl-print-root .print-header div{
    text-align:right;
  }

  .nl-print-root .print-header strong{
    display:block;
    font-size:20px;
    text-transform:uppercase;
  }

  .nl-print-root .print-header span{
    font-size:11px;
    color:#555;
  }

  .nl-print-root .print-meta{
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr 1.3fr;
    gap:10px;
    font-size:11px;
    border:1px solid #bbb;
    padding:8px;
    margin-bottom:8px;
  }

  .nl-print-root .warmup{
    font-size:11px;
    background:#f1f1f1;
    padding:7px;
    margin-bottom:8px;
  }

  .nl-print-root .print-exercise{
    border:1.5px solid #222;
    margin:0 0 8px;
    break-inside:avoid;
    page-break-inside:avoid;
  }

  .nl-print-root .exercise-heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    padding:7px 9px;
    border-bottom:1px solid #222;
  }

  .nl-print-root .exercise-heading small{
    font-size:8px;
    letter-spacing:.15em;
    color:#ed1c24;
    font-weight:bold;
  }

  .nl-print-root .exercise-heading h2{
    font-size:15px;
    margin:2px 0 0;
    color:#111!important;
  }

  .nl-print-root .exercise-heading p{
    font-size:10px;
    margin:0;
  }

  .nl-print-root table{
    width:100%;
    border-collapse:collapse;
    font-size:10px;
  }

  .nl-print-root th,
  .nl-print-root td{
    border-right:1px solid #999;
    border-bottom:1px solid #aaa;
    padding:4px;
    height:23px;
    text-align:center;
    color:#111!important;
  }

  .nl-print-root th:last-child,
  .nl-print-root td:last-child{
    border-right:0;
  }

  .nl-print-root tbody tr:last-child td{
    border-bottom:0;
  }

  .nl-print-root .notes-cell{
    width:36%;
  }

  .nl-print-root .print-footer{
    display:flex;
    justify-content:space-between;
    font-size:9px;
    color:#555;
    margin-top:8px;
  }

  .nl-print-root .custom-watermark{
    position:fixed;
    left:50%;
    top:48%;
    transform:translate(-50%,-50%) rotate(-30deg);
    font-size:54px;
    line-height:1.05;
    font-weight:900;
    text-align:center;
    color:rgba(190,0,0,.075);
    letter-spacing:.08em;
    z-index:0;
    pointer-events:none;
    white-space:nowrap;
  }

  .nl-print-root .print-page>*:not(.custom-watermark){
    position:relative;
    z-index:1;
  }

  .nl-print-root .print-disclaimer{
    border:2px solid #ed1c24;
    padding:7px 9px;
    margin-top:8px;
    font-size:8px;
    line-height:1.35;
    font-weight:700;
    text-transform:uppercase;
    background:rgba(255,255,255,.88);
  }
}

/* ============================================================
   Build 12 — the landscape board
   Sideways during a workout, the phone stops being a form and
   becomes something readable from the rack.

   The type is deliberately well short of the edges. Earlier
   builds scaled it off viewport width alone, which on a phone
   held sideways meant the clocks ran into the rounded corners
   and the notch. It now sizes off the available HEIGHT, which
   is the dimension actually in short supply when a phone is on
   its side, and sits inside a padded, capped column.
   ============================================================ */

.landscape{display:none}

@media (orientation:landscape) and (max-height:560px){

  /* Flex rows, not named grid areas. A named area that doesn't match its
     template silently auto-places the element somewhere else on the
     screen — which is exactly what went wrong — and nothing reports it.
     Two rows of flex can only fail by being ugly, and you can see ugly. */
  .landscape.available{
    display:flex;flex-direction:column;justify-content:center;
    gap:clamp(10px,4vh,22px);
    position:fixed;inset:0;z-index:9000;
    padding:16px max(30px, env(safe-area-inset-left) + 18px)
            18px max(30px, env(safe-area-inset-right) + 18px);
    background:#0b0b0b;
  }

  body.in-workout .topbar,
  body.in-workout main{display:none}

  /* What you're on, and what you did last time, on one line across the
     top — the two things you read, and nothing between them. */
  .ls-head{
    display:flex;align-items:baseline;justify-content:space-between;
    gap:24px;min-width:0;
    padding-bottom:clamp(8px,2.4vh,14px);
    border-bottom:1px solid #1e1e1e;
  }
  .landscape-exercise{
    min-width:0;
    color:#fff;font-size:clamp(17px,6vh,28px);font-weight:800;
    line-height:1.1;letter-spacing:-.015em;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .landscape-best{
    flex:none;display:flex;align-items:baseline;gap:10px;white-space:nowrap;
  }
  .landscape-best span{
    color:#66798a;font-size:clamp(8px,2vh,11px);letter-spacing:.18em;
    text-transform:uppercase;font-weight:700;
  }
  .landscape-best strong{
    color:#a8c8e4;font-size:clamp(15px,4.4vh,22px);font-weight:800;
    font-variant-numeric:tabular-nums;
  }

  /* Both clocks side by side, Pause pushed to the far edge where a hand
     already is when the phone is propped or held sideways. */
  .ls-body{
    display:flex;align-items:flex-end;gap:clamp(28px,7vw,64px);
  }
  .landscape-rest,.landscape-total{display:grid;gap:2px;min-width:0}
  .landscape-rest span,.landscape-total span{
    color:#7d7d7d;font-size:clamp(8px,2vh,11px);letter-spacing:.2em;
    text-transform:uppercase;font-weight:700;
  }
  .landscape-rest strong,.landscape-total strong{
    color:#f2f2f2;font-size:clamp(34px,20vh,80px);font-weight:800;
    font-variant-numeric:tabular-nums;line-height:.95;letter-spacing:-.03em;
  }
  .landscape-rest strong{color:#ff5a5f}

  .ls-pause{
    margin-left:auto;flex:none;
    display:inline-flex;align-items:center;justify-content:center;gap:12px;
    min-height:clamp(52px,17vh,72px);
    min-width:clamp(170px,26vw,240px);padding:0 28px;
    background:#242424;border:1px solid #3d3d3d;border-radius:16px;
    color:#fff;cursor:pointer;
  }
  .ls-pause span{
    color:#fff;font-size:clamp(17px,4.8vh,24px);font-weight:800;
    letter-spacing:0;text-transform:none;
  }
  .ls-pause .play-icon,.ls-pause.paused .pause-icon{display:none}
  .ls-pause.paused .play-icon{display:block}
  .ls-pause.paused{background:#ed1c24;border-color:#ed1c24}
  .ls-pause:disabled{opacity:.35;cursor:default}
  .ls-pause svg{
    width:clamp(19px,5vh,26px);height:clamp(19px,5vh,26px);
    fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;
  }
  .ls-pause .play-icon{fill:currentColor;stroke:none}

  body.is-paused .landscape-rest strong,
  body.is-paused .landscape-total strong{opacity:.45}
}

/* Chip row used by the rest choice in Options. */
.chip-row{display:flex;gap:6px;flex-wrap:wrap}

/* Slightly calmer surfaces and consistent radii throughout. */
.card{border-radius:14px}
.picker{border-radius:14px}

/* Build 9 — the picker only takes space while it's in use. */
/* This is the forward action on the workout screen — it ends the
   exercise you're on and starts the next. It should read as a step, not
   as a secondary control. */
.add-exercise-btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;min-height:56px;padding:15px;margin-bottom:14px;
  background:#1c1c1c;border:1px dashed #3f3f3f;border-radius:14px;
  color:#e0e0e0;font-size:16px;font-weight:700;cursor:pointer;
}
.add-exercise-btn:active{background:#242424}
.add-exercise-btn span{font-size:19px;line-height:1;color:#ed1c24;font-weight:800}
.picker{background:#161616;border:0;padding:14px}
.picker .link-btn{display:block;margin:8px auto 0}

/* ============================================================
   Build 11 — sideways on the home screen
   Nothing to read here, so nothing is shown. Rotating on Home
   is somebody propping the phone up; tell them which way to
   turn it and which button will be waiting.
   ============================================================ */
@media (orientation:landscape) and (max-height:560px){
  body.at-home .topbar,
  body.at-home .home-action,
  body.at-home .recent,
  body.at-home .build-stamp{display:none}

  body.at-home main{padding:0}
  body.at-home .home-inner{
    display:grid;place-items:center;
    min-height:100vh;min-height:100dvh;
    padding:20px;
  }
  body.at-home .rotate-note{
    display:grid;justify-items:center;gap:14px;
    max-width:420px;text-align:center;
  }
  body.at-home .rotate-note svg{
    width:40px;height:40px;
    fill:none;stroke:#6f6f6f;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
    transform:rotate(90deg);
  }
  body.at-home .rotate-note p{
    margin:0;color:#c8c8c8;font-size:17px;font-weight:600;line-height:1.35;
  }
}

/* Upright, the note has nothing to say. */
.rotate-note{display:none}

/* ============================================================
   Build 13 — styles lost in the Build 9 CSS rewrite

   These were deleted by accident when a block was replaced by
   range rather than by rule. Nothing failed, because no test
   looked at whether a class the app renders actually has a
   rule — so the training diary quietly fell back to default
   browser buttons: small, white, unreadable on black.
   tests.js now checks every class against the stylesheet.
   ============================================================ */

/* --- training diary rows --- */
/* Centred, not stretched. Stretching made Repeat as tall as whatever
   card happened to sit beside it, so a three-line workout got a huge red
   block and a two-line one got a small one — and the loudest thing on
   the screen ended up being the secondary action. */
.workout-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.workout-open{
  flex:1;min-width:0;display:grid;gap:3px;text-align:left;
  padding:14px 15px;
  background:#171717;border:0;border-radius:14px;
  color:inherit;font:inherit;cursor:pointer;
}
.workout-open strong{font-size:16px;font-weight:700;color:#fff}
.workout-open span{color:#9a9a9a;font-size:13px}
.workout-names{
  color:#6f6f6f!important;font-size:12px!important;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.workout-open:active{background:#1d1d1d}

.repeat-btn{
  flex:none;min-width:82px;height:52px;padding:0 16px;
  background:#ed1c24;border:0;border-radius:12px;
  color:#fff;font-size:14px;font-weight:800;cursor:pointer;
}
.repeat-btn:active{background:#c9151c}

#workoutsSearch{
  width:100%;padding:14px 13px;margin-bottom:10px;
  background:#0d0d0d;border:1px solid #333;border-radius:12px;
  color:#fff;font-size:16px;
}

/* --- best set on a saved workout --- */
.hist-best{
  display:block;color:#a8c8e4;font-size:13px;font-weight:700;
  margin-bottom:5px;font-variant-numeric:tabular-nums;
}

/* --- pause on the landscape board --- */
.ls-pause{display:none}

/* --- a rest length of your own --- */
.custom-rest{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.custom-rest input{
  width:70px;height:46px;padding:0 8px;
  background:#0d0d0d;border:1px solid #333;border-radius:11px;
  color:#fff;font-size:17px;font-weight:700;text-align:center;
}
.custom-rest span{color:#8d8d8d;font-size:13px}
.custom-rest button{min-height:46px;padding:0 18px;font-size:15px}

/* ============================================================
   Build 25 — body composition
   ============================================================ */

.row-link{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:14px 15px;margin-bottom:14px;
  background:#171717;border:0;border-radius:14px;
  color:inherit;font:inherit;text-align:left;cursor:pointer;
}
.row-link span{display:grid;gap:3px;flex:1;min-width:0}
.row-link strong{font-size:16px;font-weight:700;color:#fff}
.row-link em{
  font-style:normal;color:#8d8d8d;font-size:13px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.row-link svg{
  flex:none;width:18px;height:18px;
  fill:none;stroke:#6f6f6f;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
}
.row-link:active{background:#1d1d1d}

.body-latest-date{
  margin:0 2px 10px;color:#7d7d7d;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:700;
}
.body-stats{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;
  margin-bottom:14px;
}
.body-stat{
  display:grid;gap:2px;
  padding:12px 13px;
  background:#171717;border-radius:12px;
}
.body-stat>span{color:#8d8d8d;font-size:12px}
.body-stat strong{
  color:#fff;font-size:24px;font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.body-stat strong em{
  font-style:normal;font-size:13px;font-weight:700;color:#7d7d7d;margin-left:3px;
}
/* Direction is coloured, not judged — up is not bad and down is not good,
   it depends entirely on what the member is training for. */
.body-delta{font-size:12px;color:#8d8d8d;font-variant-numeric:tabular-nums}
.body-delta.up{color:#c9a23a}
.body-delta.down{color:#6fa8dc}

.body-chart{
  padding:14px;margin-bottom:14px;
  background:#141b23;border-radius:14px;
}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.chart-head span{color:#7d94a8;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.chart-head em{font-style:normal;color:#a8c8e4;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.body-chart svg{display:block;width:100%;height:90px;overflow:visible}
.chart-line{fill:none;stroke:#7fb2e0;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.chart-fill{fill:rgba(127,178,224,.12);stroke:none}
.chart-dots circle{fill:#cfe4f7}

.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#bodyForm input{
  padding:13px;background:#0d0d0d;border:1px solid #333;border-radius:11px;
  color:#fff;font-size:17px;font-weight:700;
}
#bodyDate{font-weight:600}
#bodyToggleTape{display:block;margin:0 auto 10px}

.body-history-head{
  margin:18px 2px 8px;color:#7d7d7d;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:700;
}
.body-row{
  display:flex;align-items:center;gap:10px;
  padding:12px 13px;margin-bottom:6px;
  background:#171717;border-radius:12px;
}
.body-row-main{display:grid;gap:3px;flex:1;min-width:0}
.body-row-main strong{font-size:15px;font-weight:700}
.body-row-main span{
  color:#8d8d8d;font-size:12px;font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* --- Build 26: favourites, browsing the library, storage checks --- */

.star{
  flex:none;width:40px;height:40px;
  display:grid;place-items:center;
  background:none;border:0;cursor:pointer;
  color:#4a4a4a;
}
.star svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.star.on{color:#e8b93a}
.star.on svg{fill:currentColor}
.star:active{transform:scale(.9)}

.lib-group{
  margin:18px 2px 8px;color:#7d7d7d;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:700;
}
.picker-label{
  margin:12px 2px 6px;color:#7d7d7d;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;font-weight:700;
}

.storage-result{
  margin:10px 0 0;padding:12px 13px;
  border-radius:11px;font-size:13px;line-height:1.5;
}
.storage-result.good{background:#141a15;color:#a8cbb0;border-left:3px solid #3d7a4c}
.storage-result.bad{background:#1f1414;color:#e2a3a3;border-left:3px solid #8a3030}
.storage-result.warn{background:#1d1a12;color:#d8c9a4;border-left:3px solid #7a6530}


/* Sign out and Delete my account sit together — one is a door, the other
   is a demolition, so they are separated and coloured differently. */
.account-links{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:10px;
}
.account-links .link-btn{padding:8px 2px}

/* Where somebody's subscription stands — trial days left, renewal date,
   or that it has ended. It leads the card, so it is not styled as an
   aside. */
.subscription-note{
  margin:0 0 10px;color:#e0e0e0;font-size:14px;font-weight:600;
}

/* Which version you are on, on the screen you actually look at. Quiet by
   default — this is a status, not an advert — but the trial carries a
   countdown, and the last few days warm up so the deadline is visible
   without a nag. */
.plan-badge{
  display:flex;align-items:baseline;gap:9px;
  width:100%;padding:11px 14px;margin-bottom:4px;
  background:#171717;border:0;border-radius:12px;
  color:inherit;font:inherit;text-align:left;cursor:pointer;
}
.plan-label{
  font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}
.plan-detail{
  flex:1;color:#8d8d8d;font-size:13px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.plan-badge:active{background:#1d1d1d}

.plan-badge.free .plan-label{color:#8d8d8d}
.plan-badge.trial .plan-label{color:#cfa93a}
.plan-badge.trial{background:#1a1712}
.plan-badge.trial .plan-detail{color:#c8b184}
.plan-badge.full .plan-label{color:#5fbf7a}

#feedbackMessage,#feedbackKind,#feedbackEmail{
  padding:12px;background:#0d0d0d;border:1px solid #333;border-radius:11px;
  color:#fff;font-size:16px;font-family:inherit;
}
#feedbackMessage{resize:vertical;min-height:96px;line-height:1.45}

.install-steps{display:grid;gap:10px;margin-top:4px}
.install-steps p{margin:0;color:#b4b4b4;font-size:14px;line-height:1.55}
.install-steps strong{color:#fff;font-weight:700}