/* Prime Performance — the brand over the app's interface.
   Loaded after app.css. The values are the brand guidelines' (1.0, 30 October 2026): warm, faintly green near-blacks
   and chalky off-whites, magenta for what people press or should notice, Space Grotesk for what does the talking
   (headings, numbers, buttons, labels), Inter for what is read, JetBrains Mono for small technical labels, and nothing
   rounder than 6 px. Dark is the app's own first theme; light is the switch in Settings.
   Small text never sits in magenta on the dark neutrals (3.5–4 : 1): it takes Blush there (--accent-text), and magenta
   keeps to fills, icons, rails and glows, which need 3 : 1. */

/* ---------- type ---------- */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(fonts/space-grotesk-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(fonts/space-grotesk-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/inter-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens: light (the switch in Settings) ---------- */
:root {
  --font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --pp-magenta: #E6007E;
  --pp-magenta-bright: #ED0084;
  --pp-magenta-deep: #BF0068;
  --pp-blush: #F3A7D1;
  --pp-plum: #7B4262;
  --pp-grey: #666565;

  --bg: #F8F7F3;            /* Chalk */
  --surface: #FFFFFF;
  --border: #E4E3DB;        /* between Stone and Mist */
  --line: #E4E3DB;
  --border-strong: #CBD0C4; /* Mist */
  --ink: #1A1A1A;           /* Ink */
  --ink-2: #62635D;         /* Slate, 5.9 : 1 on white */
  --ink-3: #6C6D66;         /* 5.2 : 1 on white, 4.7 : 1 on surface-2 */
  --accent: #E6007E;
  --accent-ink: #FFFFFF;    /* 4.5 : 1 on magenta */
  --accent-glow: rgba(230, 0, 126, 0.26);
  --accent-text: #BF0068;   /* Magenta Deep: 6.1 : 1 on white */
  --accent-deep: #BF0068;
  --surface-2: #F3F2EC;
  --hover: rgba(26, 26, 26, 0.05);
  --seg-bg: #EEEDE6;        /* Stone */
  --switch-off: #CBD0C4;
  --overlay-bg: rgba(21, 22, 20, 0.46);
  --tabbar-bg: rgba(248, 247, 243, 0.86);
  --toast-bg: rgba(26, 26, 26, 0.94);
  --toast-ink: #F8F7F3;
  --card-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 38%);
  --wc: #E6007E;
  --wc-ink: #FFFFFF;        /* on the default magenta: white, 4.5 : 1 (a workout's own colour brings its own ink) */
  --radius: 6px;            /* cards, panels */
  --radius-sm: 4px;         /* buttons, chips, fields */
  --radius-lg: 6px;
  --radius-pill: 4px;
  --shadow: 0 1px 2px rgba(26, 26, 26, 0.05), 0 1px 1px rgba(26, 26, 26, 0.03);
  --shadow-hover: 0 12px 30px -14px rgba(26, 26, 26, 0.22), 0 2px 4px rgba(26, 26, 26, 0.05);
  --shadow-lift: 0 12px 40px rgba(0, 0, 0, 0.2); /* the site's one shadow */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-settle: cubic-bezier(0.45, 0, 0.55, 1);

  /* chat: what is the person's own, in magenta */
  --msg-teal: #BF0068;
  --msg-teal-soft: #E6007E;
  --msg-mine: color-mix(in srgb, #E6007E 9%, #FFFFFF);
  --msg-mine-border: color-mix(in srgb, #E6007E 26%, #FFFFFF);
  --msg-link: #BF0068;
  --msg-pending: #A3A69C;
  --msg-act-bg: #E6007E;
  --msg-act-ink: #FFFFFF;

  /* the muscles trained: one hue, light to dark */
  --pg-data: #BF0068;
  --bd-body: #F0EFE9;
  --bd-edge: #D6D8CF;
  --bd-0: #E2E2DA;
  --bd-1: #F6C3DE; --bd-2: #EE86BC; --bd-3: #E6409A; --bd-4: #C9006E; --bd-5: #8E004E;

  /* runs: the route and its days, in magenta; Strava's orange stays Strava's */
  --run: #E6007E;
  --run-glow: rgba(230, 0, 126, 0.28);
  --run-plan: rgba(123, 66, 98, 0.26);
}

/* ---------- tokens: dark (the app's first theme) ---------- */
html.theme-dark {
  --bg: #171817;            /* Club Black */
  --surface: #20221F;       /* Olive */
  --border: #2D302A;
  --line: #2D302A;
  --border-strong: #3B3F37;
  --ink: #F8F7F3;           /* Chalk: 15.6 : 1 on Olive */
  --ink-2: #C1C6BB;         /* Sage: 9.3 : 1 */
  --ink-3: #959A8E;         /* 5.4 : 1 on Olive, 4.9 : 1 on surface-2 */
  --accent: #E6007E;
  --accent-ink: #FFFFFF;
  --accent-glow: rgba(230, 0, 126, 0.42);
  --accent-text: #F3A7D1;   /* Blush: 9.2 : 1 */
  --accent-deep: #BF0068;
  --surface-2: #272A25;
  --hover: rgba(248, 247, 243, 0.06);
  --seg-bg: #1B1D1A;
  --switch-off: #3B3F37;
  --overlay-bg: rgba(12, 13, 12, 0.66);
  --tabbar-bg: rgba(23, 24, 23, 0.84);
  --toast-bg: rgba(48, 52, 45, 0.95); /* Moss */
  --toast-ink: #F8F7F3;
  --card-sheen: linear-gradient(180deg, rgba(248, 247, 243, 0.035), rgba(248, 247, 243, 0) 42%);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(248, 247, 243, 0.03);
  --shadow-hover: 0 12px 30px -12px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(248, 247, 243, 0.05);
  --shadow-lift: 0 24px 60px -16px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(248, 247, 243, 0.03);

  --msg-teal: #ED0084;
  --msg-teal-soft: #F3A7D1;
  --msg-mine: color-mix(in srgb, #E6007E 16%, #20221F);
  --msg-mine-border: color-mix(in srgb, #E6007E 38%, #20221F);
  --msg-link: #F3A7D1;
  --msg-pending: rgba(248, 247, 243, 0.34);
  --msg-act-bg: #E6007E;
  --msg-act-ink: #FFFFFF;

  --pg-data: #F3A7D1;
  --bd-body: #262924;
  --bd-edge: #3A3E36;
  --bd-0: #30342D;          /* Moss: nothing recorded */
  --bd-1: #4B1532; --bd-2: #7A0D4A; --bd-3: #B0006A; --bd-4: #E6007E; --bd-5: #F772B8;

  --run: #E6007E;
  --run-glow: rgba(230, 0, 126, 0.45);
  --run-plan: rgba(243, 167, 209, 0.34);
}

/* ---------- base ---------- */
body { font-family: var(--font-body); line-height: 1.5; font-feature-settings: "cv11"; }
html { background: var(--bg); }
::selection { background: color-mix(in srgb, var(--pp-magenta) 32%, transparent); }
:focus-visible { outline-color: var(--accent); }

/* headings, numbers and anything set bold talk in Space Grotesk (the copy's own bold rules are pointed at it as the
   brand is built); headlines are tracked tight */
h1, h2, h3, h4, .page-head h1, .card-title, .about-name { font-family: var(--font-display); }
.page-head h1 { font-size: 30px; font-weight: 500; letter-spacing: -0.045em; line-height: 1.07; }
.page-sub { font-size: 14.5px; color: var(--ink-2); margin-top: 6px; }
.card-title { font-weight: 600; letter-spacing: -0.025em; }
.workout-card .card-title { letter-spacing: -0.03em; }
.builder-head-main h1 { font-size: 24px; }

/* labels: small, uppercase, tracked open; the day's sections carry the magenta dot */
.section-label, .more-group-h, .wv-section, .month-wd, .week-wd, .conflict-label, .guide-section h3, .notif-sub,
.msg-rooms-h, .msg-gym-label, .msg-pick-h, .bd-side-label, .cr-side-label, .merge-ex-label, .run-planned-k,
.soc-recap-label, .guide-focus-label, .wear-table th, .race-table th {
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0.16em; font-size: 11px;
}
.section-label {
  color: var(--ink-3); padding-left: 14px;
  background: linear-gradient(var(--pp-magenta), var(--pp-magenta)) 0 50% / 6px 6px no-repeat;
}
html.theme-dark .section-label {
  background: radial-gradient(circle at 3px 50%, rgba(230, 0, 126, 0.55), rgba(230, 0, 126, 0) 8px) 0 0 / 14px 100% no-repeat,
    linear-gradient(#E6007E, #E6007E) 0 50% / 6px 6px no-repeat;
}
.eyebrow { font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }

/* numbers in figures */
.pg-num, .pg-stat-value, .record-row-value, .runner-elapsed, .credit-num, .week-streak, .hero-val {
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
}

/* ---------- buttons: Space Grotesk 600, uppercase, tracked +0.06em, 4 px ---------- */
.btn {
  font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: var(--radius-sm);
}
.btn-sm { font-size: 12px; letter-spacing: 0.06em; }
.btn-lg { font-size: 14px; }
.btn-xl { font-size: 15px; border-radius: var(--radius-sm); letter-spacing: 0.07em; }
.btn-primary { box-shadow: 0 10px 26px -12px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--pp-magenta-deep); border-color: var(--pp-magenta-deep); }
}
.btn-primary:active { background: var(--pp-magenta-deep); border-color: var(--pp-magenta-deep); }
html.theme-dark .btn:not(.btn-primary):not(.btn-accent):not(.btn-danger) { background: transparent; border-color: rgba(248, 247, 243, 0.2); }
@media (hover: hover) and (pointer: fine) {
  html.theme-dark .btn:not(.btn-primary):not(.btn-accent):not(.btn-danger):hover { background: rgba(248, 247, 243, 0.09); border-color: rgba(248, 247, 243, 0.32); }
}
/* a button that holds a title and a line under it (the tiles, Browse workouts): the title in Space Grotesk as a title,
   the line in Inter, neither in capitals */
.btn :is([class*="-title"], [class*="-name"], [class*="-sub"], [class*="-meta"], [class*="-note"], [class*="-line"], [class*="-desc"]) {
  text-transform: none; letter-spacing: normal;
}
.btn :is([class*="-sub"], [class*="-meta"], [class*="-note"], [class*="-line"], [class*="-desc"]) { font-family: var(--font-body); font-weight: 450; }
.btn [class*="-title"] { letter-spacing: -0.01em; }
/* links that look like links: Space Grotesk 600 over a 1 px rule */
.btn-link, .text-btn, .soc-text-link { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.01em; }

/* ---------- chips, segmented controls, switches ---------- */
.chip, .wd-pill { border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 500; letter-spacing: 0.01em; }
.chip.on, .wd-pill.on { font-weight: 600; }
html.theme-dark .chip.on, html.theme-dark .wd-pill.on { box-shadow: 0 0 0 1px rgba(230, 0, 126, 0.35), 0 6px 18px -8px rgba(230, 0, 126, 0.6); }
.segmented { border-radius: var(--radius-sm); }
.seg-btn { border-radius: 3px; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.01em; }
html.theme-dark .seg-btn.on { background: #30342D; } /* Moss */
.switch-input { border-radius: 999px; }
.switch-input::after { border-radius: 999px; }

/* ---------- cards and fields ---------- */
.card { border-radius: var(--radius); }
.input { border-radius: var(--radius-sm); }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
html.theme-dark .card { border-color: rgba(248, 247, 243, 0.08); }

/* ---------- navigation ---------- */
.tab-item { font-family: var(--font-display); font-weight: 500; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 374px) { .tab-item { font-size: 9px; letter-spacing: 0.03em; } }
.tab-item.active { font-weight: 600; }
.nav-item { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.01em; }
.nav-item.active { font-weight: 600; }
html.theme-dark .nav-item.active { background: color-mix(in srgb, #E6007E 8%, #20221F); border-color: color-mix(in srgb, #E6007E 26%, #2D302A); }
.tab-item::before { height: 2px; border-radius: 0; }
.nav-item.active::before { border-radius: 0; }

/* the brand's mark is never given a glow, an outline or a shadow (the guidelines' Don't) */
.logo { color: inherit; }
.brand-logo, .ws-logo, .about-logo, .more-logo, .rest-logo { filter: none !important; }
html.theme-dark .brand-mark { text-shadow: none; }

/* ---------- the lockup, the splash, Home and Settings ---------- */
.pp-lockup { display: block; height: 30px; width: auto; }
.pp-lockup .pp-m { fill: #E6007E; }
.pp-lockup .pp-g { fill: #666565; }
.pp-lockup .pp-w1 { fill: #1A1A1A; }
.pp-lockup .pp-w2 { fill: #666565; }
html.theme-dark .pp-lockup .pp-w1 { fill: #F8F7F3; }
html.theme-dark .pp-lockup .pp-w2 { fill: #BCBDB9; }
.pp-mark { display: block; height: 100%; width: auto; }

/* sidebar: the lockup where the app's name was */
.brand.pp-brand { padding: 6px 10px 26px; }
.brand.pp-brand .pp-lockup { height: 32px; }

/* Home: the lockup over the day */
.today-head .today-title h1.pp-home-title { margin: 0; line-height: 0; }
.today-head .pp-home-title .pp-lockup { height: 34px; }
@media (min-width: 900px) {
  .today-head .pp-home-title .pp-lockup { display: none; }
  .today-head h1.pp-home-title { line-height: 1.07; }
  .today-head .pp-home-title .sr-only { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; white-space: normal; }
}
.today-head .page-sub { margin-top: 12px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

/* Settings: who the app is, and who it is powered by */
.about-brand.pp-about { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 4px 0 6px; }
.pp-about .pp-lockup { height: 36px; }
.pp-credit { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.pp-credit strong { font-weight: 600; color: var(--accent-text); }
.pp-tagline { font-family: var(--font-display); font-weight: 500; font-size: 15px; letter-spacing: -0.01em; color: var(--ink); }

/* the splash: the mark folds out once, then Home */
.pp-splash {
  position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center;
  background: #171817; transition: opacity 420ms var(--ease-out), visibility 0s linear 420ms;
}
html:not(.theme-dark) .pp-splash { background: #F8F7F3; }
.pp-splash img { width: 112px; height: auto; display: block; }
.pp-splash.pp-done { opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .pp-splash { transition: opacity 200ms linear, visibility 0s linear 200ms; } }

/* ---------- glows in magenta (the dark theme) ---------- */
html.theme-dark .nav-item.active .icon { filter: drop-shadow(0 0 6px rgba(230, 0, 126, 0.6)); }
html.theme-dark .tab-item.active .icon { filter: drop-shadow(0 0 7px rgba(230, 0, 126, 0.65)); }
html.theme-dark .more-ic .icon { filter: drop-shadow(0 0 6px rgba(230, 0, 126, 0.4)); }
html.theme-dark .more-badge { background: var(--pp-magenta); color: #FFFFFF; }
html.theme-dark .switch-input:checked { box-shadow: 0 0 0 1px rgba(230, 0, 126, 0.45), 0 4px 16px -6px rgba(230, 0, 126, 0.7); }

/* ---------- the muscles trained: the most-worked group glows ---------- */
html.theme-dark .bd-l5, html.theme-dark [data-level="5"].bd-part { filter: drop-shadow(0 0 6px rgba(247, 114, 184, 0.55)); }

/* ---------- what this demo does not connect ---------- */
.wear-notice { display: none; } /* "connections are new, tell us" is REPPIN's own testing note: nothing connects here */
.pp-demo-off { margin: 4px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px dashed var(--border-strong); color: var(--ink-2); font-size: 13.5px; }

/* ---------- mono for small technical labels ---------- */
.brand-ver, .settings-value.mono, .dbg-v, kbd, code { font-family: var(--font-mono); }

/* ---------- the demo's set-up and reset: its three steps, how far it has got ---------- */
.pp-demo-steps { list-style: none; margin: 6px 0 16px; padding: 0; display: grid; gap: 12px; }
.pp-demo-step { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.4; color: var(--ink-3); transition: color 200ms var(--ease-out); }
.pp-demo-step .icon { flex: none; width: 20px; height: 20px; color: var(--ink-3); }
.pp-demo-step.is-on { color: var(--ink); }
.pp-demo-step.is-on .icon { color: var(--accent); animation: pp-breathe 1.4s ease-in-out infinite; }
.pp-demo-step.is-done { color: var(--ink-2); }
.pp-demo-step.is-done .icon { color: var(--accent); }
html.theme-dark .pp-demo-step.is-on .icon, html.theme-dark .pp-demo-step.is-done .icon { filter: drop-shadow(0 0 6px rgba(230, 0, 126, 0.55)); }
.pp-demo-bar { height: 4px; margin: 0 0 12px; border-radius: 2px; overflow: hidden; background: var(--surface-2); }
.pp-demo-bar > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 240ms var(--ease-out); }
html.theme-dark .pp-demo-bar > i { box-shadow: 0 0 12px rgba(230, 0, 126, 0.65); }
.pp-demo-ready { color: var(--accent-text); }
@keyframes pp-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .pp-demo-step.is-on .icon { animation: none; } .pp-demo-bar > i { transition: none; } }
/* Home, when the demo here is out of date */
.pp-demo-card { border-color: var(--pp-magenta); }
.pp-demo-card .card-body { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.pp-demo-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 200px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.pp-demo-card-text strong { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); }
.pp-demo-slot:empty { display: none; }