/* 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 titles, Inter for the
   whole interface (words, numbers, buttons, labels) at the app's own sizes and weights, JetBrains Mono only for the
   version, and nothing rounder than 6 px. Dark is the app's own first theme; light is the switch in Settings.
   The website's display habits (headline face on buttons and labels, capitals tracked wide) are for a page that is
   looked at once; an app is read all day, so here they keep to titles and the few section labels the app has.
   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; }
html { background: var(--bg); }
::selection { background: color-mix(in srgb, var(--pp-magenta) 32%, transparent); }
:focus-visible { outline-color: var(--accent); }

/* titles talk in Space Grotesk, tracked tight; everything else stays in Inter at the app's own sizes and weights */
h1, h2, .page-head h1, .card-title, .about-name { font-family: var(--font-display); }
.page-head h1 { font-size: 30px; font-weight: 500; letter-spacing: -0.04em; line-height: 1.07; }
.page-sub { font-size: 14.5px; color: var(--ink-2); margin-top: 6px; }
h2 { letter-spacing: -0.02em; }
.card-title { font-weight: 600; letter-spacing: -0.02em; }
.workout-card .card-title { letter-spacing: -0.03em; }
.builder-head-main h1 { font-size: 24px; }

/* section labels: small capitals, tracked a little; the day's sections carry the magenta dot */
.section-label { font-size: 11.5px; letter-spacing: 0.09em; }
.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;
}

/* ---------- buttons: the app's own type, the brand's 4 px corners and magenta ---------- */
.btn, .btn-xl { border-radius: var(--radius-sm); }
.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); }
}

/* ---------- chips, segmented controls, switches ---------- */
.chip, .wd-pill { border-radius: var(--radius-sm); }
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; }
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.active, .nav-item.active { font-weight: 650; }
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-size: 14px; font-weight: 500; color: var(--ink-2); }

/* 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: 2px; margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.pp-credit span { font-weight: 600; color: var(--ink); }
.pp-credit strong { font-weight: 550; 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); }

/* ---------- counts and the few filled pills ---------- */
/* in the dark theme REPPIN fills them with its light teal under dark ink; mapped to Blush they took white words, at
   1.7 : 1. Here they are magenta under white (4.5 : 1), as the buttons are; Community's bell counts in the same colour
   as every other count, not the alarm red */
html.theme-dark :is(.more-badge, .home-link-count, .nav-badge, .tab-badge, .msg-thread-badge, .msg-tab-n, .msg-fold-meta.fresh) {
  background: var(--pp-magenta); color: #FFFFFF;
}
html.theme-dark .soc-new-post { background: var(--pp-magenta); border-color: var(--pp-magenta); color: #FFFFFF; }
.soc-bell-count { background: var(--msg-teal); color: #FFFFFF; }
html.theme-dark .soc-bell-count { background: var(--pp-magenta); }

/* ---------- a workout's colour as words ---------- */
/* the workout colours are mid-tones made to read as fills, rails, dots and icons in both themes (3 : 1 on every page,
   card and panel); as words they are drawn toward the page's own ink, so they keep 6.3 : 1 or more. Every word app.css
   sets in the colour itself is named here (tests/brand/brand-colour.test.mjs holds it to that) */
.eyebrow.wc, .settings-value.warn, .suggest-cta, .work-extend-row .extend-btn:not(:disabled), .week-day.today .week-num,
.spark-delta.up, .runner-target.side-note { color: color-mix(in oklab, var(--wc) 70%, #000000); }
html.theme-dark :is(.eyebrow.wc, .settings-value.warn, .suggest-cta, .work-extend-row .extend-btn:not(:disabled),
  .week-day.today .week-num, .spark-delta.up, .runner-target.side-note, .pr-chip, .history-milestone, .timer .eyebrow.wc,
  .timer-lap.current .timer-lap-n, .timer-lap.current .timer-lap-split, .timer-lap-tag.fastest) {
  color: color-mix(in oklab, var(--wc) 58%, #FFFFFF);
}
/* app.css's own lighter words on the dark theme (a record's value, a milestone's number) take the same mix: its 70 / 30
   with white leaves magenta at 4.3 : 1 */
html.theme-dark .record-row { --wc-text: color-mix(in oklab, var(--wc) 58%, #FFFFFF); }
html.theme-dark .ms-medal { --ms-ink: color-mix(in oklab, var(--wc, var(--accent)) 58%, #FFFFFF); }

/* the consistency grid's days, shaded by how many sessions: app.css's 45 % for one sat barely above an empty day on
   these mid-tones (1.5 : 1 on Olive, the empty day 1.2); 60 / 80 / 100 keeps three steps and lets a day read as its
   workout's colour. The share card's grid draws the same steps (brand.mjs) */
.consist-cell.l1 { background: color-mix(in srgb, var(--wc, var(--accent)) 60%, transparent); }
.consist-cell.l2 { background: color-mix(in srgb, var(--wc, var(--accent)) 80%, transparent); }

/* ---------- 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-weight: 650; font-size: 15px; color: var(--ink); }
.pp-demo-slot:empty { display: none; }