/* ============================================================
   Fullrack app UI, recreated for the marketing site.

   Every token below is copied from app/public/styles.css and
   brand.css — the same off-black with a green cast, the same 14px
   radius, the same mono micro-labels, the same card and class-card
   geometry. A recreation rather than a screenshot on purpose: it
   stays sharp at any size, weighs nothing, can animate, and can't
   go stale against a screenshot someone took in March.

   IMPORTANT: the UI is laid out at a fixed 320x692 phone viewport
   and then scaled to whatever the device shell is. Everything below
   is therefore in real px at real phone sizes — no rems, no vw, no
   guessing. Scaling happens once, in JS, so a card can never
   half-fit or a tab row wrap.

   --accent is set per phone. That mirrors how the product actually
   works: a gym's deployment is rebranded from one environment
   variable, so a blue gym and a green coach run the same code.

   One deliberate difference from the app: the display face here is
   Geist, not Montserrat. The site already self-hosts Geist; shipping
   four Montserrat files for text rendered at ~13px, where the two are
   indistinguishable, would cost real bytes for no visible gain.
   ============================================================ */

.ui{
  --bg:#0B0F0E; --card:#15181B; --card2:#1C232B;
  --line:rgba(255,255,255,.09);
  --line-hi:color-mix(in srgb, var(--accent) 45%, transparent);
  --text:#F4F7F6; --muted:#8A9296; --warn:#FFB13B; --danger:#FF5C5C;
  --radius:14px; --r-sm:9px;
  --font-display:Geist,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  width:320px; height:692px; flex:0 0 auto; transform-origin:center;
  background:var(--bg); color:var(--text);
  font-family:var(--font-display); line-height:1.35;
  display:flex; flex-direction:column; position:relative; overflow:hidden;
}
.ui[data-accent="gym"]{--accent:#4AC2F0; --accent-ink:#04202B}
.ui[data-accent="pt"]{--accent:#2BD9A9; --accent-ink:#062018}
.ui i,.ui b,.ui s{font-style:normal;text-decoration:none}

/* ---------- header ---------- */
.ui-top{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:13px 14px 11px;border-bottom:1px solid var(--line);
  background:rgba(7,9,10,.96);flex:0 0 auto}
.ui .wordmark{font-weight:800;font-size:15px;letter-spacing:.01em;line-height:1}
.ui .wordmark i{color:var(--accent)}
.ui .rolechip{font-family:var(--font-mono);font-size:8px;letter-spacing:.14em;line-height:1;
  color:var(--muted);border:1px solid var(--line);padding:5px 9px;border-radius:999px;flex:0 0 auto}

/* ---------- body ---------- */
/* min-height:0 is load-bearing: without it a flex item's implicit
   min-height:auto lets overflowing content push the tab bar out of the
   phone entirely, which is exactly what happened the first time. */
.ui-main{flex:1 1 0;min-height:0;padding:2px 12px 8px;overflow:hidden;display:block}
.ui .daylabel{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.13em;
  color:var(--muted);margin:13px 2px 7px}
.ui .sectionhead{display:block;font-family:var(--font-mono);font-weight:600;font-size:9.5px;
  letter-spacing:.14em;color:var(--text);margin:15px 2px 8px}

.ui .card{display:block;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:10px 12px;margin-bottom:8px;
  box-shadow:0 1px 2px rgba(0,0,0,.3)}
.ui .classcard{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center}
.ui .classcard.next{border-color:var(--line-hi);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent),
             0 0 24px -6px color-mix(in srgb,var(--accent) 35%,transparent)}
.ui .ctime{display:block;text-align:center;min-width:44px}
.ui .ctime b{display:block;font-family:var(--font-mono);font-weight:700;font-size:15px;
  font-variant-numeric:tabular-nums;line-height:1.1}
.ui .ctime i{display:block;font-size:8.5px;color:var(--muted);margin-top:3px;letter-spacing:.05em}
.ui .body{display:block;min-width:0}
/* .mockh, not h3.
   Everything inside .ui is a PICTURE of an app. Marking its card titles as real
   headings put "1-to-1 — Upper body" into the page's document outline directly
   under the <h1>, so the coaches page announced an h1 followed by five h3s that
   belong to a screenshot. A screen-reader user navigating by heading was being
   handed the contents of an illustration. */
.ui .body .mockh, .ui .body h3{display:block;font-size:13.5px;font-weight:700;
  letter-spacing:-.005em;margin:0 0 5px;line-height:1.2}
.ui .meta{display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px;
  color:var(--muted);font-size:10.5px;line-height:1}
.ui .cap{font-family:var(--font-mono);font-size:10.5px;font-variant-numeric:tabular-nums;color:var(--muted)}
.ui .cap.full{color:var(--danger)}
.ui .pill{display:inline-block;font-family:var(--font-mono);font-size:8px;letter-spacing:.12em;
  line-height:1;padding:4px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.ui .pill.on{border-color:var(--line-hi);color:var(--accent)}
.ui .pill.warn{border-color:rgba(255,177,59,.5);color:var(--warn)}
.ui .act{display:block}
.ui .btn{display:block;font-size:10.5px;font-weight:600;line-height:1;padding:8px 10px;
  border-radius:var(--r-sm);border:1px solid var(--line);color:var(--text);
  white-space:nowrap;transition:background .3s ease,color .3s ease,border-color .3s ease}
.ui .btn.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.ui .btn.ghost{background:transparent;color:var(--muted)}

/* ---------- stats ---------- */
.ui .statgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ui .stat{text-align:center;padding:13px 6px;margin:0}
.ui .bigstat{display:block;font-family:var(--font-mono);font-weight:600;font-size:26px;
  color:var(--accent);letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1}
.ui .lbl{display:block;font-family:var(--font-mono);font-size:8px;letter-spacing:.13em;
  color:var(--muted);margin-top:6px}

/* ---------- programme ---------- */
.ui .sets{padding:2px 12px}
.ui .setrow{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--line)}
.ui .setrow:last-child{border-bottom:0}
.ui .setrow .nm{font-size:12px;font-weight:600}
.ui .setrow .rp{font-family:var(--font-mono);font-size:9.5px;color:var(--muted);white-space:nowrap}
.ui .tick{display:block;width:16px;height:16px;border-radius:5px;border:1.5px solid var(--line);
  position:relative;transition:background .25s ease,border-color .25s ease}
.ui .tick:after{content:"";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;
  border:solid var(--accent-ink);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);
  transition:transform .25s cubic-bezier(.2,1.4,.4,1)}
.ui .tick.done{background:var(--accent);border-color:var(--accent)}
.ui .tick.done:after{transform:rotate(45deg) scale(1)}

/* ---------- kcal ---------- */
.ui .kcal{padding:12px}
.ui .kbar{display:block;height:5px;border-radius:99px;background:var(--card2);
  overflow:hidden;margin-bottom:10px}
.ui .kbar i{display:block;height:100%;width:0;background:var(--accent);border-radius:99px;
  transition:width 1.6s cubic-bezier(.2,.8,.2,1)}
.ui .krow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ui .kcal .bigstat{font-size:17px;display:flex;align-items:baseline;gap:5px}
.ui .kcal s{font-size:9.5px;color:var(--muted);font-weight:400;font-family:var(--font-mono)}

/* ---------- tabs ---------- */
.ui-tabs{display:flex;justify-content:space-around;align-items:center;flex:0 0 auto;
  background:rgba(7,9,10,.97);border-top:1px solid var(--line);padding:11px 4px 13px}
.ui .tabbtn{font-size:10px;letter-spacing:.04em;color:var(--muted);padding:0 4px;line-height:1}
.ui .tabbtn.active{color:var(--accent)}

/* ---------- toast ---------- */
.ui .toast{position:absolute;left:50%;bottom:56px;transform:translate(-50%,14px);
  background:var(--card2);border:1px solid var(--line-hi);color:var(--accent);
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;line-height:1;
  padding:8px 13px;border-radius:999px;white-space:nowrap;
  opacity:0;transition:opacity .4s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
.ui .toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  .ui .kbar i,.ui .tick,.ui .tick:after,.ui .toast,.ui .btn{transition:none}
}

/* ---------- membership ---------- */
.ui .memcard{display:grid;grid-template-columns:1fr auto;gap:11px;align-items:center}

/* ---------- trend ---------- */
.ui .trend{padding:12px}
.ui .spark{display:block;width:100%;height:56px;margin-bottom:8px;overflow:visible}
.ui .spark polyline{fill:none;stroke:var(--accent);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:340;stroke-dashoffset:340;
  transition:stroke-dashoffset 2s cubic-bezier(.2,.8,.2,1)}
.ui .spark circle{fill:var(--accent);opacity:0;transition:opacity .4s ease 1.4s}
.ui.drawn .spark polyline{stroke-dashoffset:0}
.ui.drawn .spark circle{opacity:1}
.ui .trendnum{font-size:20px;display:flex;align-items:baseline;gap:2px}
.ui .trendnum s{font-size:11px;color:var(--muted);font-weight:400}
@media (prefers-reduced-motion:reduce){
  .ui .spark polyline{transition:none;stroke-dashoffset:0}
  .ui .spark circle{transition:none;opacity:1}
}

/* ============================================================
   Screen router — added when the phones went from "one screen
   with counters" to "the app being used".
   ============================================================ */

/* .ui-main is the viewport; each .view is a full screen stacked in it.
   Absolute positioning means the outgoing and incoming screens can move
   past each other, which is what makes it read as navigation rather than
   a cross-fade. */
.ui-main{position:relative}
.ui .view{position:absolute;inset:0;padding:2px 12px 10px;overflow:hidden;
  opacity:0;transform:translateX(22px);pointer-events:none;
  transition:opacity .34s ease,transform .42s cubic-bezier(.2,.8,.2,1)}
.ui .view.on{opacity:1;transform:none}
.ui .view.out{opacity:0;transform:translateX(-22px)}

/* Cards stagger in behind the screen they belong to. The delays are set
   inline by the script from each card's index, so adding a card to the
   markup needs no CSS change. */
.ui .view.on > *{animation:cardin .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes cardin{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* ---------- tap indicator ----------
   A synthetic finger. Without it the screens appear to change by
   themselves, which reads as a video; with it, it reads as someone
   using the thing. */
.ui .cursor{position:absolute;left:0;top:0;width:26px;height:26px;
  margin:-13px 0 0 -13px;border-radius:50%;z-index:6;pointer-events:none;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);
  opacity:0;transform:translate(160px,340px);
  transition:transform .52s cubic-bezier(.4,0,.2,1),opacity .25s ease}
.ui .cursor.show{opacity:1}
.ui .cursor.tap{animation:tapring .44s ease-out}
@keyframes tapring{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}
  60%{box-shadow:0 0 0 15px transparent}
  100%{box-shadow:0 0 0 15px transparent}
}
.ui .cursor.press{background:rgba(255,255,255,.3);transform-origin:center}

/* ---------- extra blocks the new screens need ---------- */
.ui .memcard,.ui .refcard,.ui .prnote{display:grid;grid-template-columns:1fr auto;
  gap:11px;align-items:center}
.ui .refcard .meta,.ui .prnote .meta{font-size:10px}
.ui .allow{display:flex;align-items:baseline;gap:5px;font-size:13px;font-weight:600}
.ui .allow i{font-family:var(--font-mono);color:var(--accent);font-size:15px}
.ui .allow s{font-size:10px;color:var(--muted);font-weight:400;font-family:var(--font-mono)}
.ui .macros{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}
.ui .mac{text-align:center;padding:12px 4px;margin:0}
.ui .macn{display:block;font-family:var(--font-mono);font-weight:600;font-size:19px;
  color:var(--accent);font-variant-numeric:tabular-nums;line-height:1}
.ui .chiprow{display:flex;gap:6px;margin-top:9px}
.ui .send{padding:10px}
.ui .blockbtn{text-align:center;width:100%}
.ui .prnote{border-color:var(--line-hi)}

@media (prefers-reduced-motion:reduce){
  .ui .view{transition:none}
  .ui .view.on > *{animation:none}
  .ui .cursor{transition:none;display:none}
}