/* Violet look: the whole look in one stylesheet. Warm charcoal with a soft
   fade from the top, one violet accent used sparingly, violet fills that fade
   softly into white, round faces and round arrow-only back buttons, photo-led
   cards, glass only on photos. Switched on by data-look="violet" on <html>
   (with data-theme="dark"), loaded right after brotein.css. Everything is
   scoped to the look, so the default look is untouched. Layout, markup and
   behaviour stay brotein.css's and the scripts' (their VIOLET branches add
   the few pieces only this look shows).

    1. tokens        colours, violet recipes, surfaces, glass, radii, spacing, type, motion
    2. base          the page and its fade, focus, page heads, titles, card headings
    3. components    cards, buttons, the round back, icon buttons, fields, ticks, switches,
                     segmented controls, chips, choice cards, rows, tables, progress,
                     states, sheets, menus, toasts, faces, medals, code boxes, and the
                     v-* building blocks for markup the look adds
    4. navigation    the dock, the Tools menu, the rail, the bell, Home's compact bar,
                     the public header and foot
    5. Home          the approved Home (home.html, home.js, tasks.js, streak.js)
    6. Workout       Start, logging, rest (workout.js)
    7. Profile       your own (dashboard.js) and someone's (profile-page.js)
    8. Social        Chats, People, Referrals, the social popups and stories
    9. Train         Exercise forms, Achievements, Calculators, Build your own plan,
                     Workout plan, My plans, Calendar
   10. Food and Premium   the food plan, its sheets, cook mode and questions, the XP
                     shop, Upgrade and Pricing
   11. Account and info   Settings, Log in, Gym finder, Admin, the public pages, 404, offline
   12. Intro         the sign-up intro (index.html, intro-violet.js)

   Rule weight: the shared component rules are mostly written
   :root[data-look="violet"] :where(.class), (0,2,0), so a page section's rule
   for the same thing in its place always wins. Pages are in their own
   sections, each rule held to its page's classes. */


/* ==========================================================================
   1. tokens
   ========================================================================== */

:root[data-look="violet"] {
    color-scheme: dark;
    /* The page: a fade from a lighter warm grey at the top into the base. */
    --page-end: #1c1a1a;
    --fade: radial-gradient(130% 70% at 50% -8%, #36312e 0%, #2d2927 40%, #221f1e 72%, #1c1a1a 100%);
    --strip: #36312e;                    /* behind the clock in the home-screen app: the fade's top */
    --bg: #221f1e; --bg-2: #282523;      /* page colour, sunken tracks */
    --surface: #3a3532; --surface-2: #443f3b;   /* cards; fills raised inside a card */
    --ink: #f5f1ec; --ink-2: #cdc5bc; --ink-3: #aaa199;
    --line: #4a4440; --line-2: #57504b;
    /* Edges are light, not lines: a card's 1px rim, a pressed rim, a divider. */
    --edge: rgba(255, 255, 255, 0.07);
    --edge-strong: rgba(255, 255, 255, 0.12);
    --divider: rgba(255, 255, 255, 0.07);
    --hover: rgba(255, 255, 255, 0.05);
    --press: rgba(255, 255, 255, 0.09);
    /* Warm near-black for scrims, glass and shadows (follows the background option). */
    --scrim-rgb: 20, 16, 14;
    --photo-base: #1f1b1a;               /* under a photo while it loads */
    --ring-cut: #2f2b29;                 /* the ring cut around a face that overlaps a photo */

    /* The accent. Locked below, so a colour picked in Settings never replaces it. */
    --accent: #7552f5; --accent-strong: #6545e8; --accent-ink: #ffffff;
    --accent-text: #bba8ff;              /* violet words and icons on dark (5.9:1 on a card) */
    --accent-soft: rgba(var(--violet-rgb), 0.18);
    --violet-2: #a48cff;                 /* the light violet: rings, marks, a dot that must show */
    --violet-rgb: 139, 108, 255;         /* tints: rgba(var(--violet-rgb), x) */
    --focus: #bba8ff;

    /* Violet recipes: four fills, one ring, one glow. */
    --violet-fill: linear-gradient(180deg, #7f5ff8, #6545e8);          /* buttons, the bar, picked segments, ticks */
    --violet-fill-hover: linear-gradient(180deg, #7352f2, #5a3bdc);
    --violet-mark: linear-gradient(180deg, #a891ff, #7552f5);          /* done days, flames, done checks */
    --violet-fade: linear-gradient(90deg, #7552f5 0%, #a48cff 55%, #f4f0ff 100%);   /* every progress fill */
    --violet-orb: radial-gradient(120% 120% at 30% 20%, #9a80ff 0%, #7552f5 45%, #5b3ce0 100%);   /* Today */
    --violet-ring: conic-gradient(from 210deg, #7552f5, #a48cff, #f4f0ff, #a48cff, #7552f5);       /* a new story */
    --violet-glow: 0 8px 22px rgba(117, 82, 245, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    --on-violet: #ffffff;                /* words on violet; a second line keeps .9 (never less) */
    --on-violet-2: rgba(255, 255, 255, 0.9);

    /* Surfaces. */
    --card-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 55%), var(--surface);
    --tint-fill: linear-gradient(180deg, rgba(var(--violet-rgb), 0.18), rgba(var(--violet-rgb), 0.07)), var(--surface);
    --tint-edge: rgba(var(--violet-rgb), 0.38);
    --sheet-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 140px), var(--surface);
    --glass: rgba(var(--scrim-rgb), 0.58);
    --glass-edge: rgba(255, 255, 255, 0.14);
    --glass-blur: blur(12px);
    --dock-glass: rgba(58, 53, 50, 0.86);
    --scrim: rgba(var(--scrim-rgb), 0.64);                 /* behind sheets and menus */
    --scrim-text: linear-gradient(rgba(var(--scrim-rgb), 0) 35%, rgba(var(--scrim-rgb), 0.72) 65%, rgba(var(--scrim-rgb), 0.95));   /* words at a photo's foot */
    --scrim-top: linear-gradient(rgba(var(--scrim-rgb), 0.5), rgba(var(--scrim-rgb), 0) 26%);   /* a photo under the status bar */
    --photo-filter: saturate(0.9) contrast(1.04) brightness(0.88);
    --shadow: 0 18px 40px rgba(var(--scrim-rgb), 0.45), 0 2px 6px rgba(var(--scrim-rgb), 0.3);
    --shadow-lg: 0 40px 90px rgba(var(--scrim-rgb), 0.55);
    --shadow-pop: 0 18px 44px rgba(var(--scrim-rgb), 0.5), 0 2px 8px rgba(var(--scrim-rgb), 0.3);

    /* Status, tuned for warm charcoal (4.7:1 or more on a card and a raised fill). */
    --ok: #7fd39a; --ok-soft: rgba(127, 211, 154, 0.14);
    --bad: #ff8f85; --bad-soft: rgba(255, 143, 133, 0.14);
    --warn: #f0be78;

    /* Shape. */
    --r-pill: 999px;
    --r-feature: 28px;                   /* photo cards, the streak, calendars, sheets */
    --r-card: 24px;                      /* every card */
    --r-row: 20px;                       /* rows, strips, choice tiles */
    --r-block: 18px;                     /* 58px block buttons, small photo tiles */
    --r-field: 14px;                     /* fields, icon tiles */
    --r-input: 14px;

    /* Spacing. */
    --gap-list: 10px;                    /* sibling cards */
    --gap-group: 14px;                   /* inside a group: title, chips, strip */
    --gap-section: 28px;                 /* between sections */

    /* Type: Archivo for titles and numbers, Geist for the rest. */
    --title-xl: 4rem;                    /* a day: Workout's "Push" */
    --title-m: 2.45rem;                  /* a person's name, a page title */
    --title-sec: 1.4rem;                 /* a section heading */
    --title-card: 1.3rem;                /* a card's heading */

    /* Motion. */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* arriving: sheets, cards, fills */
    --ease-in: cubic-bezier(0.4, 0, 1, 1);         /* leaving */
    --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1); /* a nudge: arrows, pops */
    --dur-fast: 150ms;                   /* press, hover */
    --dur: 220ms;                        /* colour, fade */
    --dur-slow: 420ms;                   /* a sheet arriving */
}

/* The accent stays violet whatever was picked in Settings: the accent swatches
   (data-accent, 0,3,0 in brotein.css) and a custom colour (inline on <html>). */
:root[data-look="violet"] {
    --accent: #7552f5 !important; --accent-strong: #6545e8 !important; --accent-ink: #ffffff !important;
    --accent-text: #bba8ff !important; --accent-soft: rgba(139, 108, 255, 0.18) !important;
}

/* Background options to choose from (prototype: ?bg=1 to 4). Each is the page,
   its cards, the fade and the warm darks that follow it (scrims, glass, the
   ring around a face), so cards always sit a step lighter than the page. */
:root[data-look="violet"][data-bg="1"] {
    --bg: #1c1d20; --bg-2: #222327; --surface: #2f3035; --surface-2: #393a40; --line: #404147; --line-2: #4b4c53;
    --page-end: #161719; --dock-glass: rgba(47, 48, 53, 0.86); --strip: #303137;
    --fade: radial-gradient(130% 70% at 50% -8%, #303137 0%, #26272c 40%, #1c1d20 72%, #161719 100%);
    --scrim-rgb: 14, 15, 17; --photo-base: #19191c; --ring-cut: #26272b;
}
:root[data-look="violet"][data-bg="2"] {
    --bg: #1e1a23; --bg-2: #241f2a; --surface: #322b3a; --surface-2: #3c3445; --line: #463d50; --line-2: #52485d;
    --page-end: #17141b; --dock-glass: rgba(50, 43, 58, 0.86); --strip: #3a3045;
    --fade: radial-gradient(130% 70% at 50% -8%, #3a3045 0%, #2a2332 40%, #1e1a23 72%, #17141b 100%);
    --scrim-rgb: 16, 13, 20; --photo-base: #1b1720; --ring-cut: #2a2431;
}
:root[data-look="violet"][data-bg="3"] {
    --bg: #1c1715; --bg-2: #221c19; --surface: #322a26; --surface-2: #3c332e; --line: #463c36; --line-2: #524741;
    --page-end: #151110; --dock-glass: rgba(50, 42, 38, 0.86); --strip: #3a302a;
    --fade: radial-gradient(130% 70% at 50% -8%, #3a302a 0%, #29221e 40%, #1c1715 72%, #151110 100%);
    --scrim-rgb: 18, 13, 11; --photo-base: #1a1513; --ring-cut: #29221f;
}
:root[data-look="violet"][data-bg="4"] {
    --bg: #161a22; --bg-2: #1b2029; --surface: #262c37; --surface-2: #2f3641; --line: #38404c; --line-2: #434c59;
    --page-end: #11141a; --dock-glass: rgba(38, 44, 55, 0.86); --strip: #29303d;
    --fade: radial-gradient(130% 70% at 50% -8%, #29303d 0%, #1f242e 40%, #161a22 72%, #11141a 100%);
    --scrim-rgb: 11, 13, 18; --photo-base: #141820; --ring-cut: #222833;
}

/* The plain violet light that stands in for a missing photo (the profile's,
   the food plan's and .v-photo's cards without one). */
:root[data-look="violet"] {
    --v-plain: radial-gradient(120% 95% at 20% 0%, rgba(164, 140, 255, 0.42), rgba(117, 82, 245, 0.16) 48%, rgba(117, 82, 245, 0.05) 80%), #2b2733;
}
/* Error words on --bad-soft (14%) over a card come out at 4.2:1; on this
   8% tint they keep 4.7:1. For error boxes and red chips on cards. */
:root[data-look="violet"] { --v-bad-tint: color-mix(in srgb, var(--bad) 8%, transparent); }
/* A light chevron as a picture, for a disc that also has a fill. */
:root[data-look="violet"] {
    --vt-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4.5 16.5 12 9 19.5' fill='none' stroke='%23cdc5bc' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ==========================================================================
   2. base
   ========================================================================== */

/* The fade: lighter warm grey at the top, settling into the darker base. */
:root[data-look="violet"] { background: var(--page-end); }
:root[data-look="violet"] body { background: transparent; }
:root[data-look="violet"] body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: var(--fade);
}
/* Opened from the home screen: the strip behind the clock is the fade's top, not black. */
@media (display-mode: standalone) {
    :root[data-look="violet"]::after { background: var(--strip); }
}
:root[data-look="violet"] ::selection { background: rgba(var(--violet-rgb), 0.42); color: #fff; }

/* Focus: a light violet ring, 3:1 or more on every surface (the accent itself is 2.5:1 on a card). */
:where(:root[data-look="violet"]) :focus-visible { outline-color: var(--focus); }
:root[data-look="violet"] :is(.post-action, .post-delete, .report-chat-btn, .reply-like, .story-swatch, .story-bg-toggle, .story-remove, .story-new, .story-self__add, .story-editor__done, .emoji-picker__choice, .pic-reasons input, .pic-stage):focus-visible { outline-color: var(--focus); }
:root[data-look="violet"] :where(.inp, .field input, .field select, .field textarea):focus-visible { outline: 0; }

/* Words. */
:root[data-look="violet"] :is(.display, .h1) { font-stretch: 112%; letter-spacing: -0.04em; }
:root[data-look="violet"] .lead { color: var(--ink-2); }
:root[data-look="violet"] .muted { color: var(--ink-2); }

/* A page's head: the title in Archivo, the line under it in ink-2, actions to the right.
   Pages with a way back put the round back button on its own row above the title. */
:root[data-look="violet"] :is(.page-head, .topbar) { align-items: flex-end; gap: 14px 16px; margin-bottom: var(--gap-section); }
:root[data-look="violet"] :is(.page-head, .topbar) h1 {
    font-family: var(--font-display); font-stretch: 112%; font-size: var(--title-m); font-weight: 800;
    letter-spacing: -0.04em; line-height: 1.02; text-wrap: balance; overflow-wrap: anywhere;
}
:root[data-look="violet"] :is(.page-head, .topbar) .sub { max-width: 46ch; margin-top: 8px; font-size: 1rem; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
:root[data-look="violet"] .topbar { align-items: flex-start; }
:root[data-look="violet"] .topbar > div:first-child { flex: 1 1 0; min-width: 0; }
:root[data-look="violet"] :is(.page-head, .topbar):has(.v-back, #wbBack, #backLink, > a.btn > .ph-arrow-left) { flex-direction: column; align-items: flex-start; }
:root[data-look="violet"] :is(.page-head, .topbar) :is(.v-back, #wbBack, #backLink, a.btn:has(> .ph-arrow-left)),
:root[data-look="violet"] .topbar > .right:has(#backLink) { order: -1; }
:root[data-look="violet"] .topbar > .right:has(#backLink) { margin: 0; }
@media (max-width: 380px) {
    :root[data-look="violet"] :is(.page-head, .topbar) h1 { font-size: 2.15rem; }
}

/* Headings in cards: Archivo, heavy, a size under a section heading. */
:root[data-look="violet"] :where(.card, .panel, .sheet-card, .plan-modal-card) > :is(h2, h3, .h2),
:root[data-look="violet"] :where(.card-head, .panel-head) :is(h2, h3) {
    font-family: var(--font-display); font-stretch: 108%; font-size: var(--title-card); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
}
:root[data-look="violet"] .card > .sub, :root[data-look="violet"] .card-head .sub { color: var(--ink-2); }

/* ==========================================================================
   3. components
   ========================================================================== */

/* ---- cards ----
   A touch lighter than the page, lit softly from the top, with a faint rim
   instead of a hard line, like rounded glass on warm stone. */
:root[data-look="violet"] :is(.panel, .card, .card-lg, .tier) {
    border-color: var(--edge);
    background: var(--card-fill);
}
:root[data-look="violet"] :where(.card.flat, .panel.flat, .box, .macro, .ach) { border: 1px solid var(--edge); background: var(--surface); }
:root[data-look="violet"] :where(.box, .macro, .ach) { border-radius: var(--r-row); }
/* The recommended plan on Pricing: the violet card, white words. */
:root[data-look="violet"] .tier.rec { border-color: transparent; background: var(--violet-fill); box-shadow: 0 14px 34px rgba(117, 82, 245, 0.3); color: var(--on-violet); }
:root[data-look="violet"] .tier.rec :is(.sub, li) { color: var(--on-violet-2); opacity: 1; }
:root[data-look="violet"] .tier.rec li i { color: #fff; }
:root[data-look="violet"] .tier.rec .btn { background: #fff; color: #5a3be0; }
:root[data-look="violet"] .tier.rec .btn:hover { background: #f1edff; }

/* ---- buttons ----
   Primary is violet with a soft sheen and glow; the plain .btn is the light
   button (money and account steps); quiet is a rim on the page; danger is red.
   Sizes, the same on every screen: the screen's one main action is the 58px
   block (.v-block: Message, Save my plan, Log in, the intro's Continue); an
   action button is 52px, a pill inside a card or a sheet and an 18px-cornered
   block when it runs the page's width; small buttons are 44px (.sm), the
   smallest 36px with a 44px tap box (.xs). Cook mode keeps 56px for wet hands. */
:root[data-look="violet"] :is(.btn, .pill, .quiz-btn, .generate-button, .mini-btn) {
    transition: transform var(--dur-fast) ease, background-color var(--dur) ease, border-color var(--dur) ease, color var(--dur) ease, box-shadow var(--dur) ease;
}
:root[data-look="violet"] :is(.btn.accent, .pill.solid, .quiz-btn.primary, .wbar-tick) {
    border-color: transparent; background: var(--violet-fill); color: var(--on-violet);
    box-shadow: var(--violet-glow);
}
:root[data-look="violet"] :is(.btn.accent, .pill.solid, .quiz-btn.primary, .wbar-tick):hover { background: var(--violet-fill-hover); }
/* A main button that cannot be pressed yet is solid, not see-through: the raised
   fill and quiet words, so nothing shows through it over a scrolling page. */
:root[data-look="violet"] :is(.btn.accent, .pill.solid, .quiz-btn.primary, .intro-main):is([disabled], .is-disabled, [aria-disabled="true"]) {
    opacity: 1; border-color: transparent; background: var(--surface-2); color: var(--ink-3); box-shadow: none;
}
/* The base rules below weigh (0,2,0), so a page's or an area's own rule for a
   button in its place (Home's post box, a sheet) still wins. */
:root[data-look="violet"] :where(.btn.quiet, .btn.edge, .pill.edge, .quiz-btn.ghost, .mini-btn) {
    border: 1px solid var(--line-2); background: transparent; color: var(--ink);
}
:root[data-look="violet"] :where(.btn.quiet, .btn.edge, .pill.edge, .quiz-btn.ghost, .mini-btn):hover { border-color: var(--ink-3); background: var(--hover); }
:root[data-look="violet"] :where(.btn.danger, .quiz-btn.danger, .mini-btn.danger) { border: 1px solid rgba(255, 143, 133, 0.55); background: transparent; color: var(--bad); }
:root[data-look="violet"] :where(.btn.danger, .quiz-btn.danger, .mini-btn.danger):hover { border-color: var(--bad); background: var(--bad); color: #1c1a1a; }
/* 44px to the thumb: the small buttons grow; the smallest keeps its size and gets a taller tap box. */
:root[data-look="violet"] :where(.btn.sm, .pill.sm, .mini-btn) { height: 44px; padding: 0 18px; font-size: 0.88rem; }
:root[data-look="violet"] :where(.btn.xs) { position: relative; height: 36px; padding: 0 14px; font-size: 0.84rem; }
:root[data-look="violet"] :where(.btn.xs)::after { content: ""; position: absolute; inset: -4px 0; }
/* A text button: violet words, an underline on hover. */
:root[data-look="violet"] .link { color: var(--accent-text); text-underline-offset: 3px; }
:root[data-look="violet"] :is(.lead, .sub, .consent, .legal, p) a:not([class]) { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---- the round back button ----
   Arrow only, 44px, a soft rim on the page (glass on a photo: add .is-glass).
   The words stay in the markup for screen readers (font-size 0). Workout's
   .wk-back is the model; every other way back follows it. The word left in
   the markup is a font-size 0 grid item that makes a second row, so the
   tracks are centred (place-content), or the arrow would sit 5px high; a
   round back made from a .btn draws its two-tone arrow at .btn's 15px, so
   every arrow is set to 20px. */
:root[data-look="violet"] .wk-back {
    justify-content: center; gap: 0; width: 44px; height: 44px; margin: -6px 0 6px; padding: 0;
    border: 1px solid var(--edge-strong); border-radius: 50%;
    background: rgba(255, 255, 255, 0.06); color: var(--ink); font-size: 0;
}
:root[data-look="violet"] .wk-back i { font-size: 20px; }
:root[data-look="violet"] .wk-back:hover { background: rgba(255, 255, 255, 0.12); }
:root[data-look="violet"] :is(.v-back, .people-back, .backlink, #wbBack, #backLink, .page-head > a.btn:has(> .ph-arrow-left), .chat-back, .pic-icon-btn[data-crop="back"]) {
    position: relative; display: inline-grid; place-items: center; place-content: center; flex: none; gap: 0;
    width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0;
    border: 1px solid var(--edge-strong); border-radius: 50%; background: rgba(255, 255, 255, 0.06); box-shadow: none;
    color: var(--ink); font-size: 0; line-height: 0; text-decoration: none; cursor: pointer;
}
:root[data-look="violet"] :is(.v-back, .people-back, .backlink, #wbBack, #backLink, .page-head > a.btn:has(> .ph-arrow-left), .chat-back, .pic-icon-btn[data-crop="back"]) i { font-size: 20px; line-height: 1; }
:root[data-look="violet"] :is(.v-back, .people-back, .backlink, #wbBack, #backLink, .page-head > a.btn:has(> .ph-arrow-left), .chat-back) svg.ico { width: 20px; height: 20px; }
/* No icon in the markup (Achievements' "Back to profile"): the arrow is drawn. */
:root[data-look="violet"] :is(.v-back, #backLink):not(:has(i))::before {
    content: ""; width: 20px; height: 20px; background: currentColor;
    -webkit-mask: var(--i-arrow-left) center / contain no-repeat; mask: var(--i-arrow-left) center / contain no-repeat;
}
:root[data-look="violet"] :is(.v-back, .people-back, .backlink, #wbBack, #backLink, .page-head > a.btn:has(> .ph-arrow-left), .chat-back, .pic-icon-btn[data-crop="back"]):hover { transform: none; border-color: var(--edge-strong); background: rgba(255, 255, 255, 0.12); }
:root[data-look="violet"] :is(.v-back, .people-back, .backlink, #wbBack, #backLink, .page-head > a.btn:has(> .ph-arrow-left), .chat-back, .pic-icon-btn[data-crop="back"]):active { transform: scale(0.95); }
/* On a photo: glass. The list repeats the one above so the glass outweighs it (it holds an id). */
:root[data-look="violet"] :is(.v-back, .people-back, .backlink, #wbBack, #backLink, .chat-back).is-glass,
:root[data-look="violet"] .v-icon-btn.is-glass {
    border-color: var(--glass-edge); background: var(--glass); color: #fff;
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
:root[data-look="violet"] :is(.v-back, .people-back, .backlink, #wbBack, #backLink, .chat-back).is-glass:hover { background: rgba(var(--scrim-rgb), 0.7); }
:root[data-look="violet"] {
    --i-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12H4.5M10.5 5.5 4 12l6.5 6.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --i-caret-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4.5 16.5 12 9 19.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* ---- round icon buttons (on the page) ----
   44px circles in the raised fill, the icon in ink; pressed a step lighter. */
:root[data-look="violet"] :is(.v-icon-btn, .sheet-x, .pic-icon-btn:not([data-crop="back"]), .report-chat-btn, .custom-accent-close) {
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
    border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink); font-size: 1.25rem; cursor: pointer;
}
:root[data-look="violet"] :is(.v-icon-btn, .sheet-x, .pic-icon-btn, .report-chat-btn):active { background: var(--line-2); color: var(--ink); }
:root[data-look="violet"] .report-chat-btn:is(:hover, :focus-visible) { background: var(--bad-soft); color: var(--bad); }

/* ---- fields ----
   46px, the raised fill, a faint rim, 14px corners; focus is a light violet rim and halo. */
:root[data-look="violet"] :where(.inp, .field input, .field select, .field textarea) {
    border: 1px solid var(--edge); border-radius: var(--r-field); background-color: var(--surface-2); color: var(--ink);
    transition: border-color var(--dur) ease, box-shadow var(--dur) ease;
}
:root[data-look="violet"] :where(.inp, .field input, .field textarea)::placeholder { color: var(--ink-3); }
:root[data-look="violet"] :where(.inp, .field input, .field select, .field textarea):hover { border-color: var(--edge-strong); }
:root[data-look="violet"] :where(.inp, .field input, .field select, .field textarea):focus { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(var(--violet-rgb), 0.28); }
:root[data-look="violet"] :where(.inp, .field input, .field select, .field textarea):disabled { opacity: 0.55; cursor: not-allowed; }
:root[data-look="violet"] :where(.inp, .field input)[aria-invalid="true"] { border-color: var(--bad); }
:root[data-look="violet"] .inp:-webkit-autofill { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 40px var(--surface-2) inset; }
:root[data-look="violet"] :where(.fld > label, .field > label, .lbl) { font-size: 0.84rem; font-weight: 600; color: var(--ink-2); }
:root[data-look="violet"] input[type="date"] { color-scheme: dark; }

/* Ticks and choices, on every page (zero weight: a page's own rule wins). */
:where(:root[data-look="violet"] input:is([type="checkbox"], [type="radio"]):not([role="switch"])) {
    flex: none; width: 22px; height: 22px; margin: 0; border: 2px solid var(--ink-3); border-radius: 7px;
    background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; vertical-align: -0.3em;
    transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
:where(:root[data-look="violet"] input[type="radio"]) { border-radius: 50%; }
:where(:root[data-look="violet"] input[type="checkbox"]:not([role="switch"]):checked) {
    border-color: transparent; background: var(--i-check-white) center / 16px no-repeat, var(--violet-fill);
}
:where(:root[data-look="violet"] input[type="radio"]:checked) { border: 7px solid #8f74ff; background: #fff; }
:where(:root[data-look="violet"] input:is([type="checkbox"], [type="radio"]):disabled) { opacity: 0.45; cursor: not-allowed; }
:root[data-look="violet"] {
    --i-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5 10 17 18.5 8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* A slider: violet up to the thumb. */
:where(:root[data-look="violet"] input[type="range"]) { accent-color: #8f74ff; }

/* A switch: a checkbox with role="switch", a button with role="switch", or .v-switch. 52 x 32. */
:root[data-look="violet"] :is(input[role="switch"], .v-switch) {
    position: relative; flex: none; width: 52px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: var(--r-pill);
    background: rgba(245, 241, 236, 0.18); appearance: none; -webkit-appearance: none; cursor: pointer;
    transition: background-color var(--dur) ease;
}
:root[data-look="violet"] :is(input[role="switch"], .v-switch)::before {
    content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(var(--scrim-rgb), 0.3); transition: transform var(--dur) var(--ease-spring);
}
:root[data-look="violet"] :is(input[role="switch"]:checked, .v-switch[aria-checked="true"]) { background: var(--violet-fill); }
:root[data-look="violet"] :is(input[role="switch"]:checked, .v-switch[aria-checked="true"])::before { transform: translateX(20px); }

/* ---- segmented controls and tabs ----
   A pill track on the card colour, 44px choices (the profile's own .op-seg and
   .pp-seg keep their size). Two kinds of picked:
   - a view switch (.scope, .theme-seg, .v-seg and the pages' tabs: Friends or
     Everyone, Day, Week or Shopping list, Month or Year) is the violet fill;
   - a choice that sets a value in a form (.seg, .toggle: gender, kg or lbs,
     workouts a week, a holiday's length, sort and units) is soft violet, so a
     form with three questions never turns into three violet blocks. */
:root[data-look="violet"] :is(.seg, .toggle, .theme-seg, .scope, .v-seg) {
    display: flex; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
}
:root[data-look="violet"] :where(.seg, .toggle, .theme-seg, .scope, .v-seg) > :where(button, a, label, span) {
    flex: 1; min-height: 44px; height: auto; padding: 4px 14px;
    border: 0; border-radius: var(--r-pill); background: none; box-shadow: none; color: var(--ink-2); font-weight: 600; cursor: pointer;
    transition: background-color var(--dur) ease, color var(--dur) ease;
}
:root[data-look="violet"] :where(.seg, .toggle, .theme-seg, .scope, .v-seg) > :where(button, a, label, span):hover { color: var(--ink); }
:root[data-look="violet"] .v-seg > * { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.9rem; white-space: nowrap; }
:root[data-look="violet"] :is(.theme-seg button[aria-pressed="true"], .scope button.on, .v-seg > .on, .v-seg > [aria-selected="true"], .v-seg > [aria-pressed="true"]) {
    background: var(--violet-fill); color: var(--on-violet); box-shadow: 0 6px 16px rgba(117, 82, 245, 0.3);
}
:root[data-look="violet"] :is(.seg > .on, .toggle > .is-active) { background: var(--accent-soft); color: var(--accent-text); box-shadow: none; }
:root[data-look="violet"] :is(.seg > .on, .toggle > .is-active, .scope button.on, .v-seg > .on) :is(small, span, em, b) { color: inherit; }
:root[data-look="violet"] .bq-card .seg > * { height: auto; }
:root[data-look="violet"] :is(.scope, .theme-seg) button { height: 44px; padding: 0 18px; }

/* ---- chips, tags and badges ----
   Filter chips are 40px pills on the card colour (a 44px tap box); picked is
   soft violet. Tags are 30px info chips; a status tag carries its colour. */
:root[data-look="violet"] :where(.pick, .filter-chip, .gym-filter-chip) {
    position: relative; height: 40px; padding: 0 16px; border: 1px solid var(--edge); background: var(--surface); color: var(--ink-2); font-weight: 600;
}
:root[data-look="violet"] :where(.pick, .filter-chip, .gym-filter-chip)::after { content: ""; position: absolute; inset: -2px 0; }
:root[data-look="violet"] :where(.pick, .filter-chip, .gym-filter-chip):hover { border-color: var(--edge-strong); color: var(--ink); }
:root[data-look="violet"] :where(.pick.on, .filter-chip.is-on, .gym-filter-chip.is-active) { border-color: rgba(var(--violet-rgb), 0.45); background: var(--accent-soft); color: var(--accent-text); }
:root[data-look="violet"] :where(.tag, .chip, .tag-pill, .day-tag) {
    height: 30px; padding: 0 11px; border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); background: var(--surface-2);
    color: var(--ink); font-size: 0.8rem; font-weight: 600;
}
:root[data-look="violet"] :where(.tag, .chip, .tag-pill) i { color: var(--accent-text); font-size: 15px; }
:root[data-look="violet"] :where(.tag.good) { box-shadow: none; background: var(--ok-soft); color: var(--ok); }
:root[data-look="violet"] :where(.tag.warn) { box-shadow: none; background: rgba(240, 190, 120, 0.14); color: var(--warn); }
:root[data-look="violet"] :where(.tag.bad) { box-shadow: none; background: var(--bad-soft); color: var(--bad); }
:root[data-look="violet"] :where(.tag.violet, .chip.level, .tag-pill.admin) { box-shadow: none; background: var(--accent-soft); color: var(--accent-text); }
:root[data-look="violet"] :where(.tag.grad, .chip.premium, .tag-pill.premium, .day-tag) { box-shadow: none; background: var(--violet-fill); color: var(--on-violet); }
:root[data-look="violet"] :is(.unread, .rail .badge) { background: var(--accent); color: #fff; }

/* ---- choice cards ----
   A bold line and a note on a card of their own; the picked one is tinted violet
   with a light violet rim. */
:root[data-look="violet"] :where(.tile, .quiz-option, .plan-card) {
    padding: 16px 18px; border: 1px solid var(--edge); border-radius: var(--r-row); background: var(--card-fill); color: var(--ink);
}
:root[data-look="violet"] :where(.tile, .quiz-option):hover { border-color: var(--edge-strong); }
:root[data-look="violet"] :where(.tile.on, .quiz-option.is-selected) { border-color: var(--accent-text); background: var(--tint-fill); box-shadow: inset 0 0 0 1px var(--accent-text); }
:root[data-look="violet"] .tile > span { color: var(--ink-2); }
:root[data-look="violet"] .consent { color: var(--ink-2); }

/* ---- lists and rows ----
   Ruled lists: soft dividers. Settings rows: the same. */
:root[data-look="violet"] :where(.list > *, .settings-row, .lift, .lifts, .ex-item) {
    border-color: var(--divider);
}
:root[data-look="violet"] .list .v { color: var(--accent-text); }
:root[data-look="violet"] .settings-row span { color: var(--ink-2); }

/* ---- tables ---- */
:root[data-look="violet"] :where(.tbl th) { padding: 12px 14px; border-color: var(--divider); color: var(--ink-3); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
:root[data-look="violet"] :where(.tbl td) { border-color: var(--divider); color: var(--ink-2); font-variant-numeric: tabular-nums; }
:root[data-look="violet"] :where(.tbl td:first-child) { color: var(--ink); }
:root[data-look="violet"] :where(.tbl tbody tr:hover td) { background: var(--hover); }

/* ---- progress ----
   Violet fills fade softly into white: progress, XP, tasks, the rest timer. */
:root[data-look="violet"] :is(.xp-fill, .tally-fill, .progress i, .wk-bar i, .task-bar i, .feat-bar > i),
:root[data-look="violet"] .wbar.is-rest::before {
    background: var(--violet-fade);
}
:root[data-look="violet"] .todo-meter i.on { background: linear-gradient(90deg, #7552f5, #c9bbff); }
:root[data-look="violet"] .ring .track { stroke: rgba(255, 255, 255, 0.1); }
:root[data-look="violet"] .ring .fill { stroke: var(--violet-2); }
:root[data-look="violet"] :is(.spark i, .bars i) { background: var(--accent); }
:root[data-look="violet"] :is(.spark i.dim, .bars i.ghost, .legend i.g) { background: var(--surface-2); }

/* ---- states ----
   Status lines take the status colours; empty states are one kind line on a
   quiet card; a notice is soft violet; skeletons shimmer once a second. */
:root[data-look="violet"] :is(.status, .plan-status, .auth-status, .gym-status) { color: var(--ink-2); }
:root[data-look="violet"] :where(.empty-card, .v-empty) {
    padding: 22px 20px; border: 1px solid var(--edge); border-radius: var(--r-card); background: var(--card-fill);
}
:root[data-look="violet"] :is(.empty-card, .v-empty) p { color: var(--ink-2); }
:root[data-look="violet"] .empty p { color: var(--ink-2); }
:root[data-look="violet"] :is(.wk-notice, .wk-hint, .set-limit-notice, .v-note) { border-radius: var(--r-row); background: var(--accent-soft); color: var(--ink); }
:root[data-look="violet"] :is(.ex-fail, .pic-err, .v-error) { border-radius: var(--r-row); }
:root[data-look="violet"] :is(.v-skel, .fp-skel i, .gym-skeleton) {
    border-radius: var(--r-field); background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%) 0 0 / 300% 100%;
    animation: v-shimmer 1.2s linear infinite;
}
:root[data-look="violet"] .v-spin {
    display: inline-block; width: 22px; height: 22px; border: 2.5px solid rgba(var(--violet-rgb), 0.25); border-top-color: var(--accent-text);
    border-radius: 50%; animation: v-spin 0.8s linear infinite;
}
@keyframes v-shimmer { to { background-position: -150% 0; } }
@keyframes v-spin { to { transform: rotate(360deg); } }

/* ---- sheets, dialogs and modals ----
   One style for every popup. On a phone a sheet along the bottom (ui.js slides
   it up and adds the grab handle and the close button); on a computer a card
   in the middle. The card colour lit from the top, 28px corners, a rim, the
   page dimmed in warm black behind it. */
:root[data-look="violet"] :is(.sheet, .plan-modal, .bq-backdrop) {
    background: rgba(var(--scrim-rgb), calc(0.64 * var(--sheet-dim, 1)));
}
:root[data-look="violet"] .ex-form-sheet.is-stacked { background: rgba(var(--scrim-rgb), calc(0.4 * var(--sheet-dim, 1))); }
:root[data-look="violet"] :is(.sheet-card, .plan-modal-card, dialog.app-notice, dialog.gif-picker, dialog.emoji-picker, dialog.chat-report-dialog, dialog.progress-story-compose) {
    border: 1px solid var(--edge-strong); border-radius: var(--r-feature); background: var(--sheet-fill); color: var(--ink); box-shadow: var(--shadow-lg);
}
:root[data-look="violet"] :is(dialog.app-notice, dialog.gif-picker, dialog.emoji-picker, dialog.chat-report-dialog, dialog.progress-story-compose)::backdrop {
    background: rgba(var(--scrim-rgb), 0.64);
}
:root[data-look="violet"] :is(.sheet-card h3, .sheet-card > h2, .plan-modal-card h2, .app-notice h2, .gif-picker__head h2, .emoji-picker__head h2, .chat-report__head h2, .progress-story-compose__head h2, .crew-sheet .sheet-card h2) {
    font-family: var(--font-display); font-stretch: 108%; font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
}
:root[data-look="violet"] :is(.sheet-lead, .bq-lead, .plan-modal-card p, .app-notice p, .op-sheet-lead) { color: var(--ink-2); font-size: 0.98rem; line-height: 1.5; }
:root[data-look="violet"] .app-notice__panel { padding: 24px; }
:root[data-look="violet"] .app-notice__actions .btn.is-danger, :root[data-look="violet"] .app-notice__actions .btn.is-danger:hover { border-color: transparent; background: var(--bad); color: #1c1a1a; box-shadow: none; }
:root[data-look="violet"] .sheet-actions .btn, :root[data-look="violet"] .plan-modal-actions .btn, :root[data-look="violet"] .app-notice__actions .btn { height: 52px; padding: 0 22px; }
/* A list of choices inside a sheet (the profile's More menu, the photo choices). */
:root[data-look="violet"] :is(.pp-choices, .pic-rows, .pic-reasons) { --pp-row: var(--surface-2); border-radius: var(--r-row); background: var(--surface-2); }
:root[data-look="violet"] :is(.pp-choices button, .pic-row) + :is(button, .pic-row), :root[data-look="violet"] .pp-choices button, :root[data-look="violet"] .pic-reasons label + label { border-color: var(--divider); }
:root[data-look="violet"] :is(.pp-choices, .pic-row) i { color: var(--accent-text); }
:root[data-look="violet"] :is(.pp-choices .ico, .pic-row .ico) { --ico-accent: var(--accent-text); --ico-dark: var(--surface-2); }
:root[data-look="violet"] :is(.pp-choices button, .pic-row):active { background: var(--press); }

@media (max-width: 1080px) {
    :root[data-look="violet"] :is(.sheet-card, .plan-modal-card) { border-width: 1px 0 0; border-radius: var(--r-feature) var(--r-feature) 0 0; box-shadow: 0 -12px 40px rgba(var(--scrim-rgb), 0.45); }
    :root[data-look="violet"] :is(dialog.app-notice, dialog.gif-picker, dialog.emoji-picker, dialog.chat-report-dialog) { border-width: 1px 0 0; border-radius: var(--r-feature) var(--r-feature) 0 0; }
    :root[data-look="violet"] .sheet-handle { width: 40px; height: 5px; background: rgba(255, 255, 255, 0.22); }
    :root[data-look="violet"] .sheet-x { width: 40px; height: 40px; margin-left: 4px; font-size: 1.15rem; }
    /* Two actions share the row; a stacked set is full width. */
    :root[data-look="violet"] :is(.sheet-actions, .plan-modal-actions, .app-notice__actions) { gap: 10px; }
    :root[data-look="violet"] :is(.sheet-actions, .plan-modal-actions, .app-notice__actions) > .btn { flex: 1 1 0; min-width: 0; }
    :root[data-look="violet"] .sheet-actions.is-stacked { flex-direction: column; }
    :root[data-look="violet"] .sheet-actions.is-stacked > .btn { flex: none; width: 100%; }
}

/* ---- menus and popovers ----
   A raised card with a rim and a shadow; rows 44px and up. */
:root[data-look="violet"] :is(.custom-accent-picker, .v-menu) {
    border: 1px solid var(--edge-strong); border-radius: var(--r-block); background: var(--surface-2); box-shadow: var(--shadow-pop);
}

/* ---- toasts ----
   One raised glass pill above the dock: the tick in light violet, the words in ink,
   the action violet. A failure shows its mark in the error colour. */
:root[data-look="violet"] .app-toast {
    --toast-tick: var(--accent-text);
    border: 1px solid var(--edge-strong); background: color-mix(in srgb, var(--surface-2) 94%, transparent); color: var(--ink); box-shadow: var(--shadow-pop);
    -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
}
:root[data-look="violet"] .app-toast.is-on { transition: transform var(--dur) var(--ease-out); }
:root[data-look="violet"] .app-toast:not(.is-on) { transition: transform var(--dur) var(--ease-in), visibility 0s linear var(--dur); }
:root[data-look="violet"] .app-toast.is-error { --toast-tick: var(--bad); }
:root[data-look="violet"] .app-toast button { background: var(--violet-fill); color: var(--on-violet); box-shadow: none; }
:root[data-look="violet"] .app-toast button:active { background: var(--violet-fill-hover); }
:root[data-look="violet"] .task-toast {
    border: 1px solid var(--edge-strong); background: color-mix(in srgb, var(--surface-2) 94%, transparent); color: var(--ink); box-shadow: var(--shadow-pop);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
/* The XP toast (xp-system.js draws its own style): the same raised glass, the
   prize on a violet disc, dropping in under the clock on a phone. */
:root[data-look="violet"] .xp-toast {
    border-color: var(--edge-strong); border-radius: var(--r-row); background: color-mix(in srgb, var(--surface-2) 95%, transparent); box-shadow: var(--shadow-pop);
    color: var(--ink); font-family: var(--font-ui); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) ease;
}
:root[data-look="violet"] .xp-toast .icon { border: 0; border-radius: 50%; background: var(--violet-fill); color: #fff; }
:root[data-look="violet"] .xp-toast.is-gold .icon { background: var(--violet-mark); color: #fff; }
:root[data-look="violet"] .xp-toast .gain { color: var(--ink-2); }
@media (max-width: 1080px) {
    :root[data-look="violet"] .xp-toasts { top: calc(env(safe-area-inset-top, 0px) + 12px); left: 12px; right: 12px; justify-items: center; }
    :root[data-look="violet"] .xp-toast { width: min(380px, 100%); transform: translateY(-140%); }
    :root[data-look="violet"] .xp-toast.is-in { transform: none; }
}

/* ---- faces ----
   Round everywhere in this look, on the violet with white initials when there
   is no picture. Home's own face keeps its approved shape (section 5). */
:root[data-look="violet"] :is(.av, .avatar):not(.hello-face, .hello-bar-face .avatar) { border-radius: 50%; }
:root[data-look="violet"] :is(.av, .avatar) { color: #fff; }

/* ---- medals ----
   A medal disc (Achievements; the profile's .vp-medal and .op-next-ic follow
   it). Earned is the violet fill with a white mark; locked is a quiet tile
   with a padlock on its corner; a repeatable one is the light violet mark. */
:root[data-look="violet"] .vt-medal { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); font-size: 1.3rem; }
:root[data-look="violet"] .vt-medal .ico { --ico-accent: var(--ink-2); --ico-dark: var(--surface-2); }
:root[data-look="violet"] .vt-medal.is-earned { background: var(--violet-fill); color: #fff; }
:root[data-look="violet"] .vt-medal.is-earned .ico { --ico-accent: #fff; --ico-dark: var(--accent-strong); }
/* Locked: the mark in grey, even the flame's own orange, so only earned ones carry colour. */
:root[data-look="violet"] .vt-medal.is-locked > i:not(.lock) { filter: grayscale(1); opacity: 0.75; }
:root[data-look="violet"] .vt-medal.is-repeat { color: var(--accent-text); }
:root[data-look="violet"] .vt-medal.is-repeat .ico { --ico-accent: var(--accent-text); }
:root[data-look="violet"] .vt-medal .lock { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid var(--surface); border-radius: 50%; background: var(--ink-2); color: var(--surface); }
:root[data-look="violet"] .vt-medal .lock svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---- a round chevron that turns when its <details> opens ---- */
:root[data-look="violet"] .vt-turn { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); transition: transform var(--dur) var(--ease-out); }
:root[data-look="violet"] .vt-turn::before { content: ""; width: 15px; height: 15px; background: currentColor; transform: rotate(90deg); -webkit-mask: var(--i-caret-right) center / contain no-repeat; mask: var(--i-caret-right) center / contain no-repeat; }
:root[data-look="violet"] details[open] > summary .vt-turn { transform: rotate(180deg); }

/* ---- a 6-digit code ----
   Six boxes over one real field, the intro's recipe (.iv-code, section 12)
   for every other page that asks for a code. The page's script fills the
   boxes from the field (login.html). */
:root[data-look="violet"] .v-code { position: relative; display: flex; gap: 8px; }
:root[data-look="violet"] .v-code-box {
    flex: 1 1 0; min-width: 0; max-width: 56px; height: 58px; display: grid; place-items: center;
    border: 1px solid var(--edge); border-radius: var(--r-field); background: var(--surface-2); color: var(--ink);
    font-family: var(--font-display); font-stretch: 108%; font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
:root[data-look="violet"] .v-code-box.is-at { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(var(--violet-rgb), 0.28); }
:root[data-look="violet"] .v-code-box.is-at:empty::after { content: ""; width: 2px; height: 26px; background: var(--violet-2); animation: v-code-blink 1s steps(1) infinite; }
:root[data-look="violet"] .v-code-in {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0.01;
    background: transparent; color: transparent; caret-color: transparent; font-size: 16px; cursor: pointer;
}
:root[data-look="violet"] .v-code-in::selection { background: transparent; }
:root[data-look="violet"] .v-code-in::placeholder { color: transparent; }
:root[data-look="violet"] .v-code:has(.v-code-in:disabled) .v-code-box { opacity: 0.5; }
@keyframes v-code-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    :root[data-look="violet"] .v-code-box { transition: none; }
    :root[data-look="violet"] .v-code-box.is-at:empty::after { animation: none; }
}

/* ---- status colours ----
   "states" above paints every status line ink-2 at (0,3,0), which also wins
   over brotein's .ok, .success, .bad and .error colours, so a failed save
   would read like a hint. The colours come back here. */
:root[data-look="violet"] :is(.status, .plan-status, .auth-status, .gym-status):is(.ok, .success) { color: var(--ok); }
:root[data-look="violet"] :is(.status, .plan-status, .auth-status, .gym-status):is(.bad, .error) { color: var(--bad); }

/* ---- building blocks (v-*) ----
   For markup the pages add behind their VIOLET flag. Each is the same recipe
   as on the approved screens; system.md shows the markup. */

/* Only in this look: markup written with class="v-only" hidden shows here and
   stays hidden in the default look. .v-hide hides something in this look only. */
:root[data-look="violet"] .v-only[hidden] { display: revert !important; }
:root[data-look="violet"] .v-only.v-back[hidden] { display: inline-grid !important; }
:root[data-look="violet"] .v-hide { display: none !important; }

/* Kickers: upper case over a title (Workout's date); the tiny violet label on a list card. */
:root[data-look="violet"] .v-kick { margin: 0; font-size: 0.8rem; line-height: 18px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
:root[data-look="violet"] .v-label { margin: 0; font-size: 0.72rem; line-height: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
/* Titles: a page (Display M), a day (Display XL). */
:root[data-look="violet"] .v-title { margin: 0; font-family: var(--font-display); font-stretch: 112%; font-size: var(--title-m); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; text-wrap: balance; overflow-wrap: anywhere; }
:root[data-look="violet"] .v-title.is-xl { font-size: var(--title-xl); line-height: 0.94; letter-spacing: -0.045em; }
/* A section heading row: the heading, and a count or an action on the right. 28px above, 10px under. */
:root[data-look="violet"] .v-sec { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin: var(--gap-section) 0 10px; }
:root[data-look="violet"] .v-sec > :is(h2, h3) { margin: 0; font-family: var(--font-display); font-stretch: 108%; font-size: var(--title-sec); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
:root[data-look="violet"] .v-sec > :is(span, small) { color: var(--ink-2); font-size: 0.9rem; font-weight: 500; }

/* A sub-page's top: the round back on the left, an optional action on the
   right, the title on the row under them. */
:root[data-look="violet"] .v-topbar { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: var(--gap-group) 12px; margin: 0 0 var(--gap-section); }
:root[data-look="violet"] .v-topbar > .v-back { grid-column: 1; }
:root[data-look="violet"] .v-topbar > :last-child:not(.v-back, .v-topbar-title) { grid-column: 3; }
:root[data-look="violet"] .v-topbar-title { grid-column: 1 / -1; }
:root[data-look="violet"] .v-topbar-title .sub { margin-top: 8px; color: var(--ink-2); font-size: 1rem; }

/* Cards: plain, tinted (an offer, a step to do), feature (photo or violet light). */
:root[data-look="violet"] .v-card { padding: 18px; border: 1px solid var(--edge); border-radius: var(--r-card); background: var(--card-fill); }
:root[data-look="violet"] .v-card.is-tint { border-color: var(--tint-edge); background: var(--tint-fill); }
:root[data-look="violet"] .v-feature { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-feature); background: var(--photo-base); color: #fff; }
:root[data-look="violet"] .v-list { display: grid; gap: var(--gap-list); margin: 0; padding: 0; list-style: none; }
/* A photo filling its box (the box sets isolation), the scrim on top; plain violet light without one. */
:root[data-look="violet"] .v-photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none;
    background: var(--v-plain); }
:root[data-look="violet"] .v-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); }
:root[data-look="violet"] .v-photo::after { content: ""; position: absolute; inset: 0; background: var(--scrim-text); }
:root[data-look="violet"] .v-photo.is-top::after { background: var(--scrim-top); }   /* a photo strip under the status bar */
/* A face over a photo's edge (the profile head): ringed in the warm dark so it cuts out of the photo. */
:root[data-look="violet"] .v-face { border-radius: 50%; box-shadow: 0 0 0 5px var(--ring-cut); }
:root[data-look="violet"] .v-glass {
    border: 1px solid var(--glass-edge); background: var(--glass); color: #fff;
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}

/* A row: an icon tile, a title and its note, a value, a round chevron. 64px, its own card. */
:root[data-look="violet"] .v-row {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px 10px 12px;
    border: 1px solid var(--edge); border-radius: var(--r-row); background: var(--card-fill); color: var(--ink); font: inherit; text-align: left; text-decoration: none;
    -webkit-tap-highlight-color: transparent; transition: transform var(--dur-fast) ease;
}
:root[data-look="violet"] :is(a, button).v-row { cursor: pointer; }
:root[data-look="violet"] :is(a, button).v-row:active { transform: scale(0.99); }
:root[data-look="violet"] .v-row-t { flex: 1; min-width: 0; }
:root[data-look="violet"] .v-row-t b { display: block; font-size: 1.02rem; font-weight: 500; line-height: 1.3; }
:root[data-look="violet"] .v-row-t small { display: block; margin-top: 2px; font-size: 0.82rem; line-height: 1.35; color: var(--ink-2); }
:root[data-look="violet"] .v-row em { font-style: normal; color: var(--ink-2); white-space: nowrap; }
:root[data-look="violet"] .v-row.is-tint { border-color: var(--tint-edge); background: var(--tint-fill); }
:root[data-look="violet"] .v-tile { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-field); background: var(--surface-2); color: var(--accent-text); font-size: 1.3rem; }
:root[data-look="violet"] .v-tile .ico { --ico-accent: var(--accent-text); --ico-dark: var(--surface-2); }
:root[data-look="violet"] .v-tile.is-violet { border-radius: 50%; background: var(--violet-fill); color: #fff; }
:root[data-look="violet"] .v-tile.is-violet .ico { --ico-accent: #fff; --ico-dark: #6d4ef0; }
:root[data-look="violet"] .v-chev { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); }
:root[data-look="violet"] .v-chev::before { content: ""; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--i-caret-right) center / contain no-repeat; mask: var(--i-caret-right) center / contain no-repeat; }

/* Info chips (30px): plain, XP (soft violet), glass on a photo. */
:root[data-look="violet"] .v-chips { display: flex; flex-wrap: wrap; gap: 6px; }
:root[data-look="violet"] :is(.v-chip, .vx-pill) {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: var(--r-pill);
    background: var(--surface); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); color: var(--ink); font-size: 0.8rem; font-weight: 600; line-height: 1; white-space: nowrap;
}
:root[data-look="violet"] :is(.v-chip, .vx-pill) i { font-size: 15px; color: var(--accent-text); }
:root[data-look="violet"] :is(.v-chip, .vx-pill).is-xp { background: var(--accent-soft); box-shadow: none; color: var(--accent-text); }
:root[data-look="violet"] .v-chip.is-glass { border: 1px solid var(--glass-edge); background: var(--glass); box-shadow: none; color: #fff; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }

/* The tilted photo strip: photos in a row under the status bar, tilted and
   fading into the page (Workout's Start .vx-, your profile .vp-, the food plan
   and the paywalls .vf-, log in .v-deck). The recipe is shared; each screen
   sets the card size, the tilt's offset and how dark its photos sit. */
:root[data-look="violet"] :is(.vx-deck, .vp-deck, .vf-deck, .v-deck) { position: absolute; left: 50%; display: flex; align-items: center; }
:root[data-look="violet"] :is(.vx-deck, .vp-deck, .vf-deck, .v-deck) > span { position: relative; flex: none; overflow: hidden; }
:root[data-look="violet"] :is(.vx-deck, .vp-deck, .vf-deck, .v-deck) img { display: block; width: 100%; height: 100%; object-fit: cover; }
:root[data-look="violet"] :is(.vx-collage, .vp-collage, .vf-collage)::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; }

/* Round icon button: on the page (.v-icon-btn), on a photo (.v-icon-btn.is-glass). Above. */
/* A 58px block button (Jelena's Message): add .v-block to a .btn. */
:root[data-look="violet"] .btn.v-block { width: 100%; height: 58px; border-radius: var(--r-block); font-size: 1.05rem; font-weight: 700; }
/* A note under a group: an icon in light violet, then the words in ink-2. */
:root[data-look="violet"] .v-caption { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 0.88rem; line-height: 19px; color: var(--ink-2); text-wrap: pretty; }
:root[data-look="violet"] .v-caption i { flex: none; margin-top: 1px; font-size: 17px; color: var(--accent-text); }
/* The empty state: one kind line, maybe an action. .v-empty is in "states" above. */
:root[data-look="violet"] .v-empty { display: grid; justify-items: center; gap: 10px; text-align: center; }
:root[data-look="violet"] .v-empty > i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-size: 1.5rem; }
:root[data-look="violet"] .v-empty b { font-size: 1.02rem; font-weight: 600; }
:root[data-look="violet"] .v-empty p { margin: 0; max-width: 34ch; font-size: 0.92rem; line-height: 1.5; }
:root[data-look="violet"] .v-note { padding: 12px 14px; font-size: 0.9rem; line-height: 1.5; }
:root[data-look="violet"] .v-error { padding: 12px 14px; background: var(--bad-soft); color: var(--bad); font-size: 0.9rem; font-weight: 600; line-height: 1.45; }
:root[data-look="violet"] .v-menu { display: grid; padding: 6px; }
:root[data-look="violet"] .v-menu > :is(a, button) { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: none; color: var(--ink); font: inherit; font-weight: 500; text-align: left; cursor: pointer; }
:root[data-look="violet"] .v-menu > :is(a, button):hover { background: var(--hover); }
/* .v-only[hidden] shows with display: revert, so a v-only icon tile,
   caption, chevron or settings row would come out inline. They keep their own display. */
:root[data-look="violet"] .v-only.v-tile[hidden] { display: grid !important; }
:root[data-look="violet"] .v-only.v-caption[hidden] { display: flex !important; }
:root[data-look="violet"] .v-only.v-chev[hidden] { display: grid !important; }
:root[data-look="violet"] .v-only.settings-row[hidden] { display: grid !important; }

/* ---- motion: less of it when asked ---- */
@media (prefers-reduced-motion: reduce) {
    :root[data-look="violet"] :is(.v-skel, .fp-skel i, .gym-skeleton) { animation: none; }
    :root[data-look="violet"] .v-spin { animation-duration: 2.4s; }
    :root[data-look="violet"] :is(.v-row, .v-switch, input[role="switch"])::before,
    :root[data-look="violet"] :is(.v-row, .btn, .pill, .quiz-btn, .mini-btn, .inp, .seg > *, .scope > *, .v-seg > *) { transition: none; }
    :root[data-look="violet"] .xp-toast { transform: none; }
}

/* ==========================================================================
   4. navigation
   ========================================================================== */

/* ---- the dock (phone) and the Today button ----
   Slightly see-through on the fade; Today is the violet orb in the middle. */
:root[data-look="violet"] .tabbar {
    border-color: rgba(255, 255, 255, 0.08);
    background: var(--dock-glass);
    -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
}
:root[data-look="violet"] .tabbar a.is-today {
    background: var(--violet-orb);
    box-shadow: 0 10px 26px rgba(117, 82, 245, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* ---- the Tools menu (phone) ----
   Grows out of the dock: the card colour lit from the top, an icon tile per
   tool in light violet, the tool you are on ringed. */
@media (max-width: 1080px) {
    :root[data-look="violet"] .tools-pop::before { background: var(--scrim); }
    :root[data-look="violet"] .tools-card { border-color: var(--edge-strong); background: var(--sheet-fill); box-shadow: var(--shadow-pop); }
    :root[data-look="violet"] .tools-card h2 { font-size: var(--title-sec); }
    :root[data-look="violet"] .tools-card a:is(:hover, :active) { background: var(--hover); }
    :root[data-look="violet"] .tools-card a i.ph { background: var(--surface-2); color: var(--accent-text); font-size: 1.6rem; }
    :root[data-look="violet"] .tools-card a .ico { --ico-accent: var(--accent-text); --ico-dark: var(--surface-2); }
    :root[data-look="violet"] .tools-card a.on i.ph { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent-text); }
    :root[data-look="violet"] .tools-card small { color: var(--ink-2); }
}

/* ---- the rail (computer) ----
   No solid strip: it sits on the fade behind a faint rim. Where you are is a
   soft violet pill with the filled icon, like the dock. */
:root[data-look="violet"] .rail {
    border-right: 1px solid rgba(255, 255, 255, 0.06); background: rgba(var(--scrim-rgb), 0.18);
    scrollbar-color: var(--line-2) transparent;
}
:root[data-look="violet"] .rail::-webkit-scrollbar-track { background: transparent; }
:root[data-look="violet"] :is(.rail a, .rail button.item) { min-height: 44px; border-radius: var(--r-field); color: var(--ink-2); }
:root[data-look="violet"] :is(.rail a, .rail button.item):hover { background: var(--hover); color: var(--ink); }
:root[data-look="violet"] .rail a.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
:root[data-look="violet"] .rail a.on i.ph { font-family: "Phosphor-Fill" !important; }
:root[data-look="violet"] .rail a.on .ico { --ico-accent: var(--accent-text); }
:root[data-look="violet"] .rail .ico { --ico-accent: var(--ink-3); --ico-dark: var(--bg); }
:root[data-look="violet"] .rail a.on .badge { background: var(--accent); color: #fff; }
:root[data-look="violet"] .rail .rail-cap { color: var(--ink-3); letter-spacing: 0.08em; }
:root[data-look="violet"] .rail .sep { background: var(--divider); }
:root[data-look="violet"] .rail #upgradeLink { color: var(--accent-text); }
:root[data-look="violet"] .rail #saveAccountLink .save-dot { background: var(--violet-2); }

/* ---- the bell's panel (Home) ----
   Drops from the top bar as a card; each notification has its icon on a soft
   violet tile; new ones carry a light violet dot. */
:root[data-look="violet"] .bell-pop::before { background: var(--scrim); }
:root[data-look="violet"] .bell-card { border-color: var(--edge-strong); background: var(--sheet-fill); box-shadow: var(--shadow-pop); }
:root[data-look="violet"] .bell-card h2 { font-size: var(--title-sec); }
:root[data-look="violet"] .bell-mark { color: var(--accent-text); }
:root[data-look="violet"] :is(.notification-item, .notification-empty) { border-color: var(--divider); }
:root[data-look="violet"] .notification-icon { border-radius: var(--r-field); background: var(--accent-soft); color: var(--accent-text); }
:root[data-look="violet"] .notification-icon .ico { --ico-accent: var(--accent-text); --ico-dark: var(--surface); }
:root[data-look="violet"] .notification-item.is-new::after { background: var(--violet-2); }
@media (max-width: 1080px) {
    :root[data-look="violet"] .bell-card { border-width: 0 0 1px; border-radius: 0 0 var(--r-feature) var(--r-feature); }
}
@media (min-width: 1081px) {
    :root[data-look="violet"] .bell-card { border-radius: var(--r-card); }
}

/* ---- Home's compact top bar ----
   Drops in on the fade as glass, a faint rim under it. */
:root[data-look="violet"] .hello-bar {
    border-bottom-color: rgba(255, 255, 255, 0.06); background: color-mix(in srgb, var(--bg) 86%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
}

/* ---- public header and foot (log in, pricing, the legal pages) ---- */
:root[data-look="violet"] .nav .links { color: var(--ink-2); }
:root[data-look="violet"] .foot { border-top-color: var(--divider); color: var(--ink-3); }
:root[data-look="violet"] .foot nav a { color: var(--ink-2); }
:root[data-look="violet"] .page-copyright { border-top-color: var(--divider) !important; color: var(--ink-3); }
/* The public foot (log in, the legal pages, credits, collaborations,
   pricing): its links and logo are 44px to tap, the rows kept close; its
   Light/Dark/Auto switch does nothing in this always-dark look. */
:root[data-look="violet"] .foot nav { row-gap: 0; }
:root[data-look="violet"] :is(.foot nav a, .foot .logo) { display: inline-flex; align-items: center; min-height: 44px; }
/* The public header's logo link too (log in sets its own, inline). */
:root[data-look="violet"] body:has(:is(.legal, main.cr, .collab, .chatbox)) header .nav .logo { display: inline-flex; align-items: center; min-height: 44px; }
:root[data-look="violet"] .foot .theme-seg { display: none; }

/* ==========================================================================
   5. Home (approved; unchanged)
   ========================================================================== */

/* A ticked set keeps white text readable across its whole width. */
:root[data-look="violet"] .set.done { background: linear-gradient(90deg, #6141e4, #7a5cf5); }
/* Done marks: violet that lifts toward white at the top. */
:root[data-look="violet"] :is(.chain-mark.done, .streak-grid i.done) {
    background: var(--violet-mark);
}
:root[data-look="violet"] :is(.task-card.is-done .task-check, .task-card.is-finishing .task-check) {
    border-color: #8a6cff; background: var(--violet-mark);
}

/* Habit tiles (Sleep, Water) take their own colour from --habit: the glow in
   the corner, the large faded icon and the progress bar. */
:root[data-look="violet"] .task-card.is-habit { --habit: var(--accent); }
:root[data-look="violet"] .task-card.is-habit .habit-glyph { color: var(--habit); }
:root[data-look="violet"] .task-card.is-habit .task-bar i { background: linear-gradient(90deg, var(--habit), #ffffff); }
/* Night and water: sleep is a calm night blue, water is aqua. */
:root[data-look="violet"] .task-card.is-habit[data-task="sleep"] { --habit: #7d8cff; }
:root[data-look="violet"] .task-card.is-habit[data-task="water"] { --habit: #3fc1dc; }

/* Sleep and Water as scenes: a starry night sky and soft ripples on water.
   Finished tasks keep the slim done row. */
:root[data-look="violet"] .task-card.is-habit:not(.is-done) { border-color: rgba(255, 255, 255, 0.08); }
:root[data-look="violet"] .task-card.is-habit[data-task="sleep"]:not(.is-done) {
    background:
        radial-gradient(circle at 12% 22%, rgba(255, 255, 255, 0.85) 0 1px, transparent 1.6px),
        radial-gradient(circle at 34% 12%, rgba(255, 255, 255, 0.55) 0 1px, transparent 1.6px),
        radial-gradient(circle at 52% 30%, rgba(255, 255, 255, 0.7) 0 1.2px, transparent 1.8px),
        radial-gradient(circle at 63% 9%, rgba(255, 255, 255, 0.5) 0 1px, transparent 1.6px),
        radial-gradient(circle at 27% 40%, rgba(255, 255, 255, 0.4) 0 0.8px, transparent 1.4px),
        radial-gradient(circle at 8% 8%, rgba(255, 255, 255, 0.45) 0 0.8px, transparent 1.4px),
        radial-gradient(120% 140% at 85% 0%, #3a4590 0%, #1e2350 48%, #14162e 100%);
}
:root[data-look="violet"] .task-card.is-habit[data-task="water"]:not(.is-done) {
    background:
        repeating-radial-gradient(circle at 80% 8%, rgba(255, 255, 255, 0.07) 0 1.5px, transparent 2px 18px),
        radial-gradient(120% 140% at 85% 0%, #1b6f80 0%, #0f3c47 50%, #0b262d 100%);
}
:root[data-look="violet"] .task-card.is-habit .habit-glyph { opacity: 0.45; }
:root[data-look="violet"] .task-card.is-habit:not(.is-done) .task-meta { color: rgba(255, 255, 255, 0.8); }

/* Friends row: the flame sits snug beside the number. */
:root[data-look="violet"] .fr .fr-streak .flame { margin-left: 0; font-size: 1em; }

/* Friends row as story rings: round faces on the page itself, a violet ring for
   new messages, a violet-to-white ring for a new story, the streak as a small
   badge on the face. */
:root[data-look="violet"] .storyrow { padding: 6px 2px; border: 0; background: none; }
:root[data-look="violet"] .friends-row { gap: 14px; }
:root[data-look="violet"] .fr { position: relative; width: 70px; gap: 12px; color: var(--ink); }
:root[data-look="violet"] .fr .presence-avatar { padding: 5px; border-radius: 50%; background: transparent; }
:root[data-look="violet"] .fr.has-new .presence-avatar { background: #7552f5; }
:root[data-look="violet"] .fr.has-story .presence-avatar { background: var(--violet-ring); }
:root[data-look="violet"] .fr.has-story.is-seen .presence-avatar { background: var(--line-2); }
:root[data-look="violet"] :is(.fr .av, .story-self__avatar .av) { width: 60px; height: 60px; border-radius: 50%; outline: 0; box-shadow: 0 0 0 3px var(--bg); }
:root[data-look="violet"] .fr .fr-streak { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); margin: 0; padding: 2px 8px 2px 5px; border: 2px solid var(--bg); border-radius: 999px; background: var(--surface-2); color: var(--ink); font-size: 0.7rem; }
:root[data-look="violet"] .story-new { width: 66px; height: 66px; border: 2px dashed var(--violet-2); border-radius: 50%; background: rgba(var(--violet-rgb), 0.1); color: var(--accent-text); }
:root[data-look="violet"] .fr-split { margin: 10px 0 30px; }
/* Your own story, once posted: the same ring around your face, the + on its edge. */
:root[data-look="violet"] .story-self__pic { width: auto; height: auto; }
:root[data-look="violet"] .story-self__avatar { width: auto; height: auto; padding: 5px; border-radius: 50%; }
:root[data-look="violet"] .story-self__avatar.has-story { background: var(--violet-ring); }
:root[data-look="violet"] .story-self__avatar.has-story.is-seen { background: var(--line-2); }
:root[data-look="violet"] .story-self__add { right: -2px; bottom: -2px; border-color: var(--bg); }
:root[data-look="violet"] .fr.add .av { width: 60px; height: 60px; border-radius: 50%; }

/* ==========================================================================
   6. Workout (workout.js, behind its VIOLET flag)
   The Start page before the first set (html.wk-start), then the logging page
   with the next set's exercise drawn large (html.wk-live), and the floating
   workout bar. Rules that meet one of the shared rules carry an id.
   ========================================================================== */

/* The plates on the bar are not part of this look. */
:root[data-look="violet"] .wk-head .plates { display: none; }

/* ---- the Start page -------------------------------------------------------------------------- */
:root[data-look="violet"] .vx-collage,
:root[data-look="violet"] .vl-head,
:root[data-look="violet"] .vl-segs { display: none; }
:root[data-look="violet"] .main { position: relative; }

/* The top: today's form photos in a tilted strip under the status bar, fading into the page. */
:root[data-look="violet"].wk-start.wk-has-collage .vx-collage {
    position: relative; display: block; height: calc(214px + env(safe-area-inset-top, 0px));
    margin: -26px -32px -24px; overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent);
}
:root[data-look="violet"] .vx-collage::after { background: linear-gradient(rgba(var(--scrim-rgb), 0.5), rgba(var(--scrim-rgb), 0) 24%); }
:root[data-look="violet"] .vx-deck { top: calc(50% + env(safe-area-inset-top, 0px) / 2); gap: 14px; transform: translate(-50%, -43%) rotate(-12deg); }
:root[data-look="violet"] .vx-deck > span { width: 128px; height: 160px; border-radius: 24px; background: var(--surface); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
:root[data-look="violet"] .vx-deck > span:nth-child(even) { transform: translateY(28px); }
:root[data-look="violet"] .vx-deck > span.focus { z-index: 2; transform: translateY(6px) scale(1.12); box-shadow: 0 24px 48px rgba(var(--scrim-rgb), 0.5); }
:root[data-look="violet"] .vx-deck img { filter: saturate(0.92) contrast(1.04) brightness(0.78); }
:root[data-look="violet"] .vx-deck .focus img { filter: saturate(1) contrast(1.04); }

/* Glass chips on photos: the day on the strip, Start and End on the large card. */
:root[data-look="violet"] .vx-glass {
    position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--r-pill);
    background: rgba(var(--scrim-rgb), 0.62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    color: #fff; font-size: 0.8rem; font-weight: 600; line-height: 1; white-space: nowrap;
}
:root[data-look="violet"] .vx-glass i { font-size: 15px; color: var(--accent-text); }
:root[data-look="violet"] .vx-deck .vx-glass { left: 9px; bottom: 10px; }

/* The way back sits on the photos, in glass. */
:root[data-look="violet"].wk-start.wk-has-collage .wk-back {
    position: absolute; z-index: 5; left: 32px; top: calc(20px + env(safe-area-inset-top, 0px)); margin: 0;
    border-color: rgba(255, 255, 255, 0.14); background: rgba(var(--scrim-rgb), 0.55);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}

/* The date, then the day in very large letters. */
:root[data-look="violet"].wk-start .wk-head { position: relative; z-index: 4; margin-bottom: 0; }
:root[data-look="violet"].wk-start #wkDate { margin: 0; font-size: 0.8rem; line-height: 18px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
:root[data-look="violet"].wk-start.wk-has-collage .vx-dayno { display: none; }
:root[data-look="violet"].wk-start #wkTitle { margin: 2px 0 0; font-size: 4rem; line-height: 0.94; font-weight: 800; letter-spacing: -0.045em; overflow-wrap: anywhere; }
:root[data-look="violet"].wk-start :is(#wkProgress, #wkEnd) { display: none; }

/* Chips: how long, how many, what it pays. */
:root[data-look="violet"] .vx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
:root[data-look="violet"] #wkBody .vx-chips { margin-top: 14px; }
:root[data-look="violet"] .vx-pill[hidden] { display: none; }

/* This week: Home's row of days on a soft strip. */
:root[data-look="violet"] #wkBody .vx-week {
    margin: 14px 0 0; padding: 9px 4px 8px; border: 0; border-radius: 20px;
    background: var(--surface); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
:root[data-look="violet"] .vx-week > span { gap: 5px; }
:root[data-look="violet"] .vx-week b { width: 32px; height: 32px; border: 0; background: var(--surface-2); color: var(--ink); font-size: 0.92rem; }
:root[data-look="violet"] .vx-week b svg { width: 15px; height: 15px; }
:root[data-look="violet"] .vx-week .is-rest b { background: none; }
:root[data-look="violet"] .vx-week .is-rest b::before { width: 7px; height: 7px; background: #5c5550; }
:root[data-look="violet"] .vx-week .is-session b { border: 0; }
:root[data-look="violet"] .vx-week .is-done b { background: var(--violet-mark); color: #fff; }
:root[data-look="violet"] .vx-week .is-past.is-session b { opacity: 0.5; }
:root[data-look="violet"] .vx-week .is-today b { border: 0; background: var(--accent-soft); color: var(--accent-text); box-shadow: 0 0 0 2px var(--accent); }
:root[data-look="violet"] .vx-week .is-today.is-rest b { box-shadow: 0 0 0 2px var(--accent); }
:root[data-look="violet"] .vx-week .is-today.is-done b { outline: 0; background: var(--violet-mark); color: #fff; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
:root[data-look="violet"] .vx-week small { font-size: 0.74rem; color: var(--ink-3); }
:root[data-look="violet"] .vx-week .is-today small { color: var(--accent-text); }

/* Section headings and the line under "Exercises". */
:root[data-look="violet"] #wkBody .vx-sec { margin: 26px 0 12px; font-family: var(--font-display); font-size: 1.4rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
:root[data-look="violet"] #wkBody .vx-lead { display: flex; align-items: center; gap: 8px; margin: -4px 0 12px; font-size: 0.88rem; line-height: 18px; color: var(--ink-2); }
:root[data-look="violet"] .vx-lead i { font-size: 17px; color: var(--accent-text); }

/* One card per exercise: form photo with its number, name, target, last time, How-to and Swap. */
:root[data-look="violet"] #wkBody .vx-list { display: flex; flex-direction: column; gap: 10px; margin: 0; }
:root[data-look="violet"] .vx-card {
    display: grid; grid-template-columns: 76px minmax(0, 1fr) 44px; align-items: center; gap: 14px; padding: 12px;
    border-radius: var(--r-card); background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 55%), var(--surface);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
:root[data-look="violet"] .vx-th {
    position: relative; display: grid; place-items: center; width: 76px; height: 96px; overflow: hidden;
    border-radius: 18px; background: var(--surface-2); color: var(--accent-text); font-size: 30px;
}
:root[data-look="violet"] .vx-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
:root[data-look="violet"] .vx-th .no {
    position: absolute; left: 6px; top: 6px; display: grid; place-items: center; width: 24px; height: 24px;
    border-radius: 50%; background: rgba(var(--scrim-rgb), 0.78); color: #fff; font-size: 0.75rem; font-weight: 700;
}
:root[data-look="violet"] .vx-card .ex-name { min-width: 0; }
:root[data-look="violet"] .vx-card h3 { margin: 0; font-size: 1.12rem; line-height: 22px; font-weight: 600; letter-spacing: -0.005em; text-wrap: balance; overflow-wrap: anywhere; }
:root[data-look="violet"] .vx-card .ex-target { margin: 2px 0 0; font-size: 0.88rem; line-height: 18px; color: var(--ink-2); }
:root[data-look="violet"] .vx-last { margin: 8px 0 0; font-size: 0.94rem; line-height: 20px; color: var(--ink); font-variant-numeric: tabular-nums; }
:root[data-look="violet"] .vx-last > span { display: block; font-size: 0.75rem; line-height: 15px; font-weight: 600; color: var(--ink-2); }
:root[data-look="violet"] .vx-last b { font-weight: 600; white-space: nowrap; }
:root[data-look="violet"] .vx-card .ex-saved { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 0.8rem; color: var(--ink-3); }
:root[data-look="violet"] .vx-card .ex-icons { flex-direction: column; gap: 8px; }

/* Round How-to and Swap buttons, filled instead of outlined. */
:root[data-look="violet"].wk-start .ex-icon,
:root[data-look="violet"].wk-live .ex-icon { border: 0; background: var(--surface-2); color: var(--ink); }
:root[data-look="violet"].wk-start .ex-icon:active,
:root[data-look="violet"].wk-live .ex-icon:active { background: var(--line-2); }

/* Two quiet lines under the list. */
:root[data-look="violet"] #wkBody .vx-caps { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 0; padding: 0 4px; list-style: none; }
:root[data-look="violet"] .vx-caps li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.88rem; line-height: 19px; color: var(--ink-2); text-wrap: balance; }
:root[data-look="violet"] .vx-caps i { flex: none; margin-top: 1px; font-size: 17px; color: var(--accent-text); }

/* From your plan: plain rows, an icon and a note each. */
:root[data-look="violet"] #wkBody .vx-rules { display: flex; flex-direction: column; gap: 10px; margin: 0; }
:root[data-look="violet"] .vx-rule {
    display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px 13px 12px;
    border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 20px; background: var(--surface);
}
:root[data-look="violet"] .vx-rule-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--surface-2); color: var(--accent-text); font-size: 21px; }
:root[data-look="violet"] .vx-rule > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 1px; }
:root[data-look="violet"] .vx-rule b { font-size: 1rem; line-height: 21px; font-weight: 600; text-wrap: balance; }
:root[data-look="violet"] .vx-rule small { font-size: 0.88rem; line-height: 19px; color: var(--ink-2); text-wrap: pretty; }

/* ---- the logging page -------------------------------------------------------------------------- */
/* A compact header beside the way back: the day, sets done, what it pays; a segment per set under it. */
:root[data-look="violet"].wk-live .main { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-content: start; }
:root[data-look="violet"].wk-live .main > * { grid-column: 1 / -1; }
:root[data-look="violet"].wk-live .main > .wk-back { grid-column: 1; grid-row: 1; align-self: center; margin: 0; }
:root[data-look="violet"].wk-live .main > .vl-head { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 12px; min-height: 52px; }
:root[data-look="violet"] .vl-ttl { flex: 1; min-width: 0; }
:root[data-look="violet"] .vl-kick { margin: 0; overflow: hidden; font-size: 0.8rem; line-height: 18px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
:root[data-look="violet"] .vl-count { margin: 1px 0 0; font-family: var(--font-display); font-size: 1.4rem; line-height: 26px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
:root[data-look="violet"] .vl-count small { font-family: var(--font); font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
:root[data-look="violet"].wk-live .vl-segs { display: flex; gap: 8px; margin: 12px 0 0; }
:root[data-look="violet"] .vl-segs > span { flex: 1; display: flex; gap: 3px; }
:root[data-look="violet"] .vl-segs i { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.13); transition: background-color 0.3s ease; }
:root[data-look="violet"] .vl-segs i.done { background: var(--accent); }
:root[data-look="violet"] .vl-segs i.cur { background: rgba(var(--violet-rgb), 0.45); }
/* The usual title stays for screen readers; the bar of sets gives way to the segments. */
:root[data-look="violet"].wk-live #wkHead { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:root[data-look="violet"].wk-live #wkProgress { display: none; }
:root[data-look="violet"].wk-live #wkNotice:not(:empty) { margin-top: 14px; }
:root[data-look="violet"].wk-live #wkBody { margin-top: 14px; }
:root[data-look="violet"].wk-live #wkBody > .ex + .ex { margin-top: 12px; }

/* The card holding the next set: its start and end photos side by side, the name over them. */
:root[data-look="violet"].wk-live #wkBody .ex { scroll-margin-top: 16px; }
:root[data-look="violet"].wk-live #wkBody .ex.is-current { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
:root[data-look="violet"] .vx-hero {
    position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; height: 222px; overflow: hidden; isolation: isolate;
    border-radius: 28px; background: var(--surface);
}
:root[data-look="violet"] .vx-hero figure { position: relative; margin: 0; overflow: hidden; }
:root[data-look="violet"] .vx-hero img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(0.92) contrast(1.04); }
:root[data-look="violet"] .vx-hero .vx-glass { top: 12px; left: 12px; }
:root[data-look="violet"] .vx-hero::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(rgba(var(--scrim-rgb), 0.3), rgba(var(--scrim-rgb), 0) 26%, rgba(var(--scrim-rgb), 0) 36%, rgba(var(--scrim-rgb), 0.72) 62%, rgba(var(--scrim-rgb), 0.95));
}
:root[data-look="violet"] .vx-hero::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); pointer-events: none; }
:root[data-look="violet"] .vx-hero-body { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: 10px; padding: 0 14px 14px 18px; }
:root[data-look="violet"] .vx-hero-body .ex-name { flex: 1; min-width: 0; }
:root[data-look="violet"] .vx-hero .vx-kick { margin: 0 0 2px; font-size: 0.88rem; line-height: 18px; font-weight: 500; color: rgba(255, 255, 255, 0.78); }
:root[data-look="violet"] .vx-hero h2 { margin: 0; color: #fff; font-family: var(--font-display); font-size: 1.9rem; line-height: 1.08; font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; overflow-wrap: anywhere; }
:root[data-look="violet"] .vx-hero :is(.ex-alt, .ex-saved, .ex-swapping) { margin: 4px 0 0; color: rgba(255, 255, 255, 0.78); }
:root[data-look="violet"] .vx-hero .ex-saved { display: flex; align-items: center; gap: 4px; font-size: 0.8rem; }
:root[data-look="violet"].wk-live .vx-hero .ex-icon {
    border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(var(--scrim-rgb), 0.55); color: #fff;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
:root[data-look="violet"] #wkBody .vx-target { margin: 12px 0 0; font-size: 1.06rem; line-height: 22px; font-weight: 600; color: var(--ink); }
:root[data-look="violet"].wk-live #wkBody .ex.is-current .ex-last { margin: 1px 0 12px; }
:root[data-look="violet"].wk-live #wkBody .ex.is-current .vx-target + .set { margin-top: 12px; }

/* The other cards: a small photo beside the name. */
:root[data-look="violet"].wk-live #wkBody .ex:not(.is-current) { padding: 12px 12px 4px; }
:root[data-look="violet"] .vx-head { grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 4px; }
:root[data-look="violet"] .vx-head .vx-th { width: 56px; height: 56px; border-radius: 15px; font-size: 24px; }
:root[data-look="violet"] .vx-head .vx-kick { margin: 0; font-size: 0.72rem; line-height: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
:root[data-look="violet"] .vx-head h2 { margin-top: 2px; padding: 0; font-family: var(--font); font-stretch: 100%; font-size: 1.06rem; line-height: 21px; font-weight: 600; letter-spacing: -0.005em; }
:root[data-look="violet"] .vx-head .ex-target { margin-top: 1px; font-size: 0.82rem; line-height: 17px; }
:root[data-look="violet"].wk-live #wkBody .ex:not(.is-current) .ex-last { margin: 6px 4px 8px; font-size: 0.82rem; }

/* Set rows: number, weight, reps, a round tick. In the large card each row is its own card. */
:root[data-look="violet"].wk-live #wkBody .set {
    grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) 48px; gap: 10px; min-height: 60px; margin: 0; padding: 6px 6px 6px 8px;
    border: 1.5px solid transparent; border-radius: 20px; background: none;
}
:root[data-look="violet"].wk-live #wkBody .set.timed { grid-template-columns: 30px minmax(0, 1fr) 48px; }
:root[data-look="violet"].wk-live #wkBody .set + .set,
:root[data-look="violet"].wk-live #wkBody .set-gain + .set,
:root[data-look="violet"].wk-live #wkBody .set-err + .set { margin-top: 4px; }
:root[data-look="violet"].wk-live #wkBody .ex.is-current .set { min-height: 64px; padding: 8px 8px 8px 12px; background: var(--surface); }
:root[data-look="violet"].wk-live #wkBody .ex.is-current :is(.set + .set, .set-gain + .set, .set-err + .set) { margin-top: 8px; }
:root[data-look="violet"].wk-live #wkBody .set .no {
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.1); color: var(--ink); font-size: 0.86rem; font-weight: 700;
}
:root[data-look="violet"].wk-live #wkBody .set input {
    height: 46px; padding: 0 44px 0 14px; border: 0; border-radius: 14px; background: var(--surface-2);
    font-family: var(--font-display); font-size: 1.3rem; font-weight: 700;
}
:root[data-look="violet"].wk-live #wkBody .set input:focus { box-shadow: 0 0 0 2px var(--accent); }
:root[data-look="violet"].wk-live #wkBody .set label span { right: 13px; color: var(--ink-2); font-size: 0.86rem; font-weight: 500; }
:root[data-look="violet"].wk-live #wkBody .tick { width: 48px; height: 48px; border: 2px solid rgba(255, 255, 255, 0.3); background: transparent; color: transparent; transition: transform 0.15s ease, box-shadow 0.2s ease; }
:root[data-look="violet"].wk-live #wkBody .tick:hover { color: rgba(255, 255, 255, 0.35); }
:root[data-look="violet"].wk-live #wkBody .set.done { background: none; }
:root[data-look="violet"].wk-live #wkBody .ex.is-current .set.done { background: var(--surface); }
:root[data-look="violet"].wk-live #wkBody .set.done .no { background: var(--accent-soft); color: var(--accent-text); }
:root[data-look="violet"].wk-live #wkBody .set.done input { background: rgba(255, 255, 255, 0.04); color: var(--ink-2); font-weight: 600; }
:root[data-look="violet"].wk-live #wkBody .set.done label span { color: var(--ink-3); }
:root[data-look="violet"].wk-live #wkBody .set.done .tick { border-color: transparent; background: linear-gradient(180deg, #8a6cff, #6545e8); color: #fff; box-shadow: 0 6px 16px rgba(117, 82, 245, 0.35); }
:root[data-look="violet"].wk-live #wkBody .set.is-next { border-color: var(--accent); }
:root[data-look="violet"].wk-live #wkBody .ex.is-current .set.is-next { background: var(--surface-2); }
:root[data-look="violet"].wk-live #wkBody .set.is-next input { background: rgba(255, 255, 255, 0.07); }
:root[data-look="violet"].wk-live #wkBody .set.is-next .tick { border-color: rgba(255, 255, 255, 0.45); color: transparent; }
:root[data-look="violet"].wk-live #wkBody .set.failed .tick { border-color: var(--bad); color: var(--bad); }
:root[data-look="violet"].wk-live #wkBody .set-gain { margin: 3px 6px 0; }
:root[data-look="violet"].wk-live #wkBody .set-actions { margin-top: 2px; }
:root[data-look="violet"].wk-live #wkBody .add-set { color: var(--ink); font-size: 0.94rem; }
:root[data-look="violet"].wk-live #wkBody .add-set i { color: var(--accent-text); font-size: 1.15rem; }
:root[data-look="violet"].wk-live #wkBody .remove-set { font-size: 0.94rem; }
:root[data-look="violet"].wk-live .wk-end { justify-items: start; margin-top: 16px; text-align: left; }

/* ---- the workout bar: a floating violet bar where the dock was ---------------------------------- */
:root[data-look="violet"] #wbar {
    left: var(--rail-w); right: 0; max-width: 860px; padding: 26px 32px 16px; border-top: 0;
    background: linear-gradient(transparent, color-mix(in srgb, var(--page-end) 94%, transparent) 46%); pointer-events: none;
}
:root[data-look="violet"] #wbar.is-rest::before { content: none; }
:root[data-look="violet"] #wbar .wbar-in {
    position: relative; overflow: hidden; min-height: 76px; margin: 0 auto; padding: 12px 12px 12px 22px; border-radius: 30px;
    background: var(--violet-fill); color: #fff; pointer-events: auto;
    box-shadow: 0 18px 40px rgba(var(--scrim-rgb), 0.55), 0 8px 24px rgba(117, 82, 245, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
:root[data-look="violet"] #wbar .wbar-big { color: #fff; font-size: 1.65rem; line-height: 30px; }
:root[data-look="violet"] #wbar .wbar-big .dim { color: rgba(255, 255, 255, 0.72); }
:root[data-look="violet"] #wbar .wbar-sub { margin-top: 1px; color: rgba(255, 255, 255, 0.8); font-size: 0.88rem; line-height: 18px; font-weight: 500; }
:root[data-look="violet"] #wbar .wbar-rest .wbar-sub { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
:root[data-look="violet"] #wbar .wbar-sub.is-bad { color: #ffd7d2; }
/* Filled white buttons on the violet: Tick, Skip, Finish, and Start's play. */
:root[data-look="violet"] #wbar :is(.wbar-tick, .wbar-finish, .wbar-skip) {
    height: 52px; border: 0; border-radius: var(--r-pill); background: #fff; color: #5a3be0; box-shadow: none;
    font-size: 1.04rem; font-weight: 700;
}
:root[data-look="violet"] #wbar :is(.wbar-tick, .wbar-finish):hover { background: #f1edff; }
:root[data-look="violet"] #wbar .wbar-tick { padding: 0 20px 0 16px; }
:root[data-look="violet"] #wbar :is(.wbar-tick, .wbar-finish):active { background: #e6deff; transform: scale(0.98); }

/* Start: play, the day, the first set, an arrow. */
:root[data-look="violet"] #wbar .wbar-start { grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; padding: 12px 22px 12px 12px; cursor: pointer; }
:root[data-look="violet"] .wbar-play { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: #6545e8; }
:root[data-look="violet"] .wbar-play svg { width: 22px; height: 22px; margin-left: 2px; fill: currentColor; }
:root[data-look="violet"] #wbar .wbar-start .wbar-big { font-size: 1.4rem; line-height: 26px; }
:root[data-look="violet"] #wbar .wbar-first { display: flex; white-space: nowrap; }
:root[data-look="violet"] .wbar-first .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
:root[data-look="violet"] .wbar-go { font-size: 24px; transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
:root[data-look="violet"] #wbar .wbar-start:hover .wbar-go { transform: translateX(3px); }
:root[data-look="violet"] #wbar .wbar-start:active { transform: scale(0.99); }

/* Rest: the time large, the next set beside it, Skip, and a line draining violet to white. */
:root[data-look="violet"] #wbar .wbar-rest { grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; padding: 14px 14px 20px 20px; }
:root[data-look="violet"] .wbar-clock { display: block; }
:root[data-look="violet"] .wbar-clock small { display: block; font-size: 0.74rem; line-height: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
:root[data-look="violet"] #wbar .wbar-clock .wbar-time { display: block; min-width: 2.6ch; margin-top: 1px; font-family: var(--font-display); font-size: 2.5rem; line-height: 40px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
:root[data-look="violet"] .wbar-next { overflow: hidden; font-size: 0.94rem; line-height: 19px; font-weight: 700; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
:root[data-look="violet"] #wbar .wbar-skip { height: 48px; padding: 0 16px 0 18px; font-size: 0.94rem; }
:root[data-look="violet"] #wbar button.wbar-in:active .wbar-skip { background: #e6deff; }
:root[data-look="violet"] .wbar-line { position: absolute; left: 20px; right: 20px; bottom: 9px; height: 4px; overflow: hidden; border-radius: 2px; background: rgba(24, 14, 60, 0.28); }
:root[data-look="violet"] .wbar-line i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--left, 0%); border-radius: inherit; background: linear-gradient(90deg, #a48cff, #f4f0ff 70%, #fff); }

@media (max-width: 1080px) {
    :root[data-look="violet"].wk-start.wk-has-collage .vx-collage { margin: -20px -18px -24px; }
    :root[data-look="violet"].wk-start.wk-has-collage .wk-back { left: 18px; top: calc(14px + env(safe-area-inset-top, 0px)); }
    :root[data-look="violet"] #wbar { left: 0; max-width: none; padding: 26px 12px var(--dock-gap); }
    :root[data-look="violet"] #wbar .wbar-in { max-width: 420px; }
}
@media (max-width: 380px) {
    :root[data-look="violet"].wk-start #wkTitle { font-size: 3.6rem; }
    :root[data-look="violet"] .vx-card { grid-template-columns: 72px minmax(0, 1fr) 44px; gap: 12px; }
    :root[data-look="violet"] .vx-card .vx-th { width: 72px; height: 92px; }
    :root[data-look="violet"].wk-live #wkBody .set { gap: 8px; }
    :root[data-look="violet"] #wbar .wbar-clock .wbar-time { font-size: 2.2rem; }
    :root[data-look="violet"] #wbar .wbar-rest { gap: 12px; padding-left: 18px; }
}
/* A short phone (iPhone SE): smaller photos, so the list and the sets show sooner. */
@media (max-height: 700px) and (max-width: 1080px) {
    :root[data-look="violet"].wk-start.wk-has-collage .vx-collage { height: calc(168px + env(safe-area-inset-top, 0px)); }
    :root[data-look="violet"] .vx-deck > span { width: 100px; height: 124px; border-radius: 20px; }
    :root[data-look="violet"] .vx-deck > span:nth-child(even) { transform: translateY(22px); }
    :root[data-look="violet"] .vx-hero { height: 150px; border-radius: 24px; }
    :root[data-look="violet"] .vx-hero h2 { font-size: 1.6rem; }
    :root[data-look="violet"] #wbar .wbar-in { min-height: 68px; }
}
@media (prefers-reduced-motion: reduce) {
    :root[data-look="violet"] :is(.vl-segs i, .wbar-go) { transition: none; }
}

/* ---- done: the summary after the last set ----
   The head as on Start (the date as the kicker, the day as a page title), the
   card's target as a tinted row, soft dividers. */
:root[data-look="violet"] .wk-head:has(.done-tag) #wkDate { margin: 0; font-size: 0.8rem; line-height: 18px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
:root[data-look="violet"] .wk-head:has(.done-tag) #wkTitle { margin: 2px 0 0; font-size: var(--title-m); line-height: 1.02; letter-spacing: -0.04em; }
:root[data-look="violet"] .done-card { border-radius: var(--r-card); }
:root[data-look="violet"] .pf-target { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--tint-edge); border-radius: var(--r-row); background: var(--tint-fill); }
:root[data-look="violet"] :is(.pf-gains li + li, .pf-earned li) { border-color: var(--divider); }
:root[data-look="violet"] .pf-note { color: var(--ink-2); }

/* ==========================================================================
   7. Profile: your own (dashboard.html, dashboard.js) and someone's, or
   your own as others see it (profile.html, profile-page.js), after the approved
   mockup. The pieces the look adds (vp-*) come from the two scripts, behind
   their VIOLET flag; everything else is the pages' own markup, restyled.
   ========================================================================== */

:root[data-look="violet"] {
    --vp-glass: rgba(var(--scrim-rgb), 0.58);
    --vp-glass-edge: rgba(255, 255, 255, 0.14);
    --vp-on-photo: #ddd6cf;
    --vp-fill: linear-gradient(180deg, #8f74ff, #6545e8);
    --vp-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5L10.5 8 6 12.5' fill='none' stroke='%23cdc5bc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---- shared: a photo filling its box (plain violet without one), glass, headings ---- */
/* The box sets isolation, so the photo (z-index -1) sits over its background and under its words. */
:root[data-look="violet"] .vp-photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; background: var(--v-plain); pointer-events: none; }
:root[data-look="violet"] .vp-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.04) brightness(0.88); }
:root[data-look="violet"] .vp-photo::after { content: ""; position: absolute; inset: 0; }
:root[data-look="violet"] :is(.op-sec h2, .op-card-head h2, .vp-more, .pp-page .pp-head h2) {
    font-family: var(--font-display); font-stretch: 108%; font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
}

/* ===================================== your profile ===================================== */
:root[data-look="violet"] .op-page { position: relative; }

/* The strip of your exercise photos, tilted, fading into the page; the gear over it. */
:root[data-look="violet"] .vp-collage {
    position: relative; height: 252px; margin: -20px -18px 0; overflow: hidden; pointer-events: none;
    -webkit-mask-image: linear-gradient(#000 52%, transparent 96%); mask-image: linear-gradient(#000 52%, transparent 96%);
}
:root[data-look="violet"] .vp-collage::after { background: linear-gradient(rgba(var(--scrim-rgb), 0.5), rgba(var(--scrim-rgb), 0) 26%); }
:root[data-look="violet"] .vp-deck { top: 50%; gap: 14px; transform: translate(-50%, -44%) rotate(-12deg); }
:root[data-look="violet"] .vp-deck > span { width: 140px; height: 176px; border-radius: 26px; background: var(--v-plain); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
:root[data-look="violet"] .vp-deck > span:nth-child(even) { transform: translateY(34px); }
:root[data-look="violet"] .vp-deck > span.is-focus { z-index: 2; transform: scale(1.08); box-shadow: 0 24px 48px rgba(var(--scrim-rgb), 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
:root[data-look="violet"] .vp-deck img { filter: saturate(0.85) contrast(1.05) brightness(0.68); }
:root[data-look="violet"] .vp-deck .is-focus img { filter: saturate(0.95) contrast(1.05) brightness(0.95); }

:root[data-look="violet"] .op-top { position: absolute; z-index: 6; top: -6px; right: -4px; min-height: 0; margin: 0; }
:root[data-look="violet"] .op-icon-btn {
    border: 1px solid var(--vp-glass-edge); border-radius: 50%; background: var(--vp-glass); color: #fff;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
:root[data-look="violet"] .op-icon-btn i { font-size: 1.3rem; }
:root[data-look="violet"] .op-icon-btn .ico { --ico-accent: #fff; --ico-dark: #3a3532; }

/* The face over the strip's lower edge, Edit profile beside it, then the name and the XP bar. */
:root[data-look="violet"] .op-head {
    position: relative; z-index: 5; grid-template-columns: auto minmax(0, 1fr); align-items: end; justify-items: start; column-gap: 12px;
    margin: -66px 0 22px; text-align: left;
}
:root[data-look="violet"] .op-face-wrap, :root[data-look="violet"] .op-face-btn, :root[data-look="violet"] .avatar.op-face { width: 104px; height: 104px; }
:root[data-look="violet"] .avatar.op-face { box-shadow: 0 0 0 5px var(--ring-cut); }
:root[data-look="violet"] .op-cam { right: -8px; bottom: -6px; }
:root[data-look="violet"] .op-cam > span { border-color: var(--ring-cut); }
:root[data-look="violet"] .vp-edit {
    grid-column: 2; justify-self: end; height: 44px; margin: 0 0 6px; padding: 0 16px; gap: 8px;
    border: 1px solid var(--edge); border-radius: 14px; background: var(--surface-2); color: var(--ink); font-size: 0.92rem; font-weight: 600;
}
:root[data-look="violet"] .vp-edit i { font-size: 1.1rem; }
:root[data-look="violet"] .vp-edit .ico { --ico-accent: var(--accent-text); --ico-dark: var(--surface-2); }
:root[data-look="violet"] :is(.op-name, .op-handle, .op-xp) { grid-column: 1 / -1; }
:root[data-look="violet"] .op-name { margin: 14px 0 0; font-size: 2.45rem; line-height: 1.05; text-wrap: pretty; }
:root[data-look="violet"] .op-handle { margin: 5px 0 0; font-size: 1rem; }
:root[data-look="violet"] .op-handle > span:last-child { color: var(--ink); font-weight: 600; }
:root[data-look="violet"] .op-xp {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label meta" "bar bar"; gap: 8px 10px;
    width: 100%; max-width: none; margin-top: 16px;
}
:root[data-look="violet"] .vp-xp-label { grid-area: label; min-width: 0; font-size: 0.95rem; font-weight: 600; color: var(--ink); }
:root[data-look="violet"] .op-xp small { grid-area: meta; color: var(--ink-2); font-weight: 500; }
:root[data-look="violet"] .op-xp .xp-track { grid-area: bar; height: 10px; }

/* The streak (Home's card, streak.js) on a photo: the count on top, the chain on glass,
   the savers at the foot. The card stays one button that opens the streak sheet. */
:root[data-look="violet"] .card.op-streak {
    --chain-mark: 26px; --chain-lead: 10px;
    display: flex; flex-direction: column; min-height: 300px; margin: 0 0 30px; padding: 16px 16px 18px;
    overflow: hidden; isolation: isolate; border-radius: 28px; background: #1f1b1a;
}
:root[data-look="violet"] .op-streak:has(.streak-zero), :root[data-look="violet"] .op-streak:has(#streakCard > .sub) { min-height: 190px; }
:root[data-look="violet"] .op-streak > .vp-photo::after { background: linear-gradient(rgba(var(--scrim-rgb), 0.55), rgba(var(--scrim-rgb), 0.08) 32%, rgba(var(--scrim-rgb), 0.1) 50%, rgba(var(--scrim-rgb), 0.8) 76%, rgba(var(--scrim-rgb), 0.95)); }
:root[data-look="violet"] #streakCard { flex: 1; display: flex; flex-direction: column; color: #fff; }
:root[data-look="violet"] .op-streak .streak-chain {
    flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr auto; align-items: center; gap: 0 8px;
}
:root[data-look="violet"] .op-streak .streak-top { display: contents; }
:root[data-look="violet"] .op-streak .streak-flame { grid-area: 1 / 1; width: 48px; height: 48px; background: none; }
:root[data-look="violet"] .op-streak .streak-flame img { width: 52px; height: 52px; transform: none; }
:root[data-look="violet"] .op-streak .streak-count { grid-area: 1 / 2; display: flex; align-items: baseline; gap: 0 8px; min-width: 0; }
:root[data-look="violet"] .op-streak .streak-count b { font-size: 3rem; color: #fff; }
:root[data-look="violet"] .op-streak .streak-count span { margin: 0; font-size: 1.15rem; font-weight: 700; color: #fff; }
:root[data-look="violet"] .op-streak .streak-go {
    grid-area: 1 / 3; display: grid; place-items: center; width: 36px; height: 36px; margin: 0;
    border: 1px solid var(--vp-glass-edge); border-radius: 50%; background: var(--vp-glass); color: #fff; font-size: 1rem;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
:root[data-look="violet"] .op-streak .streak-go .ico { --ico-accent: #fff; --ico-dark: #2a2523; }
:root[data-look="violet"] .op-streak .chain-days {
    --chain-bg: #2a2523;
    grid-area: 2 / 1 / 3 / -1; margin-top: 16px; padding: 14px 10px 12px; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 22px;
    background: var(--vp-glass); box-shadow: 0 14px 34px rgba(var(--scrim-rgb), 0.3); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
:root[data-look="violet"] .op-streak .chain-slot { height: 30px; }
:root[data-look="violet"] .op-streak .chain-dl { font-size: 0.72rem; color: var(--vp-on-photo); }
:root[data-look="violet"] .op-streak .chain-day.is-today .chain-dl { color: var(--accent-text); }
:root[data-look="violet"] .op-streak .streak-savers {
    grid-area: 4 / 1 / 5 / -1; justify-self: start; align-self: end; margin: 14px 0 0; padding: 6px 12px 6px 9px;
    border: 1px solid var(--vp-glass-edge); background: var(--vp-glass); color: #fff; font-size: 0.86rem;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
:root[data-look="violet"] .op-streak .streak-savers i { color: var(--accent-text); }
:root[data-look="violet"] .op-streak .streak-saved { margin-top: 10px; color: var(--vp-on-photo); font-size: 0.92rem; }
:root[data-look="violet"] .op-streak .streak-saved .ph { color: var(--accent-text); }
:root[data-look="violet"] .op-streak :is(.streak-zero, #streakCard > .sub) { margin-top: auto; color: #fff; font-size: 1rem; }
:root[data-look="violet"] .op-streak .streak-open { border-radius: 28px; }

/* Calendar: Month | Year in violet, round days. */
:root[data-look="violet"] .op-seg { padding: 4px; border: 1px solid var(--line); background: var(--surface); }
:root[data-look="violet"] .op-seg button { height: 40px; padding: 0 18px; font-weight: 600; }
:root[data-look="violet"] .op-seg button[aria-pressed="true"] { background: var(--vp-fill); color: #fff; box-shadow: 0 6px 16px rgba(117, 82, 245, 0.3); }
:root[data-look="violet"] .card.op-cal-card { padding: 14px 14px 16px; border-radius: 28px; }
:root[data-look="violet"] .op-cal-head { margin: 0 0 8px; }
:root[data-look="violet"] .op-cal-head h3 { font-size: 1.15rem; }
:root[data-look="violet"] .op-arrow { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); color: var(--ink); }
:root[data-look="violet"] .op-arrow[disabled] { background: none; color: var(--line-2); }
:root[data-look="violet"] .op-day b { position: relative; width: 38px; height: 38px; border-radius: 50%; font-weight: 500; }
:root[data-look="violet"] .op-day.is-done b { background: var(--vp-fill); color: #fff; font-weight: 700; }
:root[data-look="violet"] .op-day.is-plan b { outline: 0; box-shadow: inset 0 0 0 2px rgba(164, 140, 255, 0.7); color: var(--ink); font-weight: 600; }
:root[data-look="violet"] .op-day.is-rest b { background: none; color: var(--ink-2); }
:root[data-look="violet"] .op-day.is-rest b::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--ink-3); opacity: 0.7; }
:root[data-look="violet"] .op-day.is-before b { color: var(--ink-3); opacity: 0.6; }
:root[data-look="violet"] .op-day.is-today b { box-shadow: inset 0 0 0 2.5px var(--accent-text); background: var(--accent-soft); color: var(--accent-text); }
:root[data-look="violet"] .op-day.is-today.is-done b { background: var(--vp-fill); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-text); color: #fff; }
:root[data-look="violet"] .op-key i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
:root[data-look="violet"] .op-key i.p { outline: 0; background: none; box-shadow: inset 0 0 0 2px rgba(164, 140, 255, 0.7); }
:root[data-look="violet"] .op-key i.r { width: 6px; height: 6px; margin: 0 2px; background: var(--ink-3); box-shadow: none; }
:root[data-look="violet"] .op-year { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
:root[data-look="violet"] .op-mini { padding: 8px 6px 6px; border-radius: 14px; }
:root[data-look="violet"] .op-mini.is-now { background: var(--surface-2); box-shadow: inset 0 0 0 1.5px rgba(var(--violet-rgb), 0.55); }
:root[data-look="violet"] .op-mini-days i.d { background: var(--violet-mark); }

/* Trends: the heading over three cards of their own; the best lift on its photo. */
:root[data-look="violet"] .card:is(.op-trends, .op-ach) { margin: 0 0 30px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
:root[data-look="violet"] .op-card-head { align-items: center; min-height: 44px; margin: 0 0 8px; }
:root[data-look="violet"] .op-card-head span { font-size: 0.9rem; font-weight: 500; color: var(--ink-2); }
:root[data-look="violet"] .op-trend-list { display: grid; gap: 10px; margin: 0; }
:root[data-look="violet"] .op-trend, :root[data-look="violet"] .op-trend:is(:first-child, :last-child) {
    position: relative; isolation: isolate; align-items: end; overflow: hidden; padding: 16px;
    border: 1px solid var(--edge); border-radius: 24px; background: var(--card-fill);
}
:root[data-look="violet"] a.op-trend::after {
    content: ""; position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%;
    background: var(--vp-chev) center / 14px no-repeat, var(--surface-2);
}
:root[data-look="violet"] a.op-trend .op-trend-k { padding-right: 36px; }
:root[data-look="violet"] a.op-trend:has(> .op-spark) .op-trend-k { padding-right: 0; }   /* the line's column keeps clear of the chevron */
:root[data-look="violet"] a.op-trend:active { transform: scale(0.99); }
:root[data-look="violet"] .op-trend-k { font-size: 0.9rem; font-weight: 500; }
:root[data-look="violet"] .op-trend-v { margin-top: 8px; }
:root[data-look="violet"] .op-trend-v b { font-size: 2rem; }
:root[data-look="violet"] .op-dir { font-size: 0.9rem; }
:root[data-look="violet"] .op-spark { width: 110px; height: 48px; margin: 0 2px 2px 0; }
:root[data-look="violet"] .op-spark .line { stroke: var(--accent-text); stroke-width: 2.4; }
:root[data-look="violet"] .op-spark .raw { fill: var(--ink-3); opacity: 0.7; }
:root[data-look="violet"] .op-spark .end { fill: var(--accent-text); stroke: var(--surface); stroke-width: 3; }
:root[data-look="violet"] .op-lock { background: var(--surface-2); }
:root[data-look="violet"] .op-trend-note { background: rgba(255, 255, 255, 0.05); }
:root[data-look="violet"] .op-trend.vp-on-photo { background: #1f1b1a; }
:root[data-look="violet"] .op-trend.vp-on-photo > .vp-photo::after { background: linear-gradient(90deg, rgba(var(--scrim-rgb), 0.94), rgba(var(--scrim-rgb), 0.8) 55%, rgba(var(--scrim-rgb), 0.45)); }
:root[data-look="violet"] .op-trend.vp-on-photo .op-trend-k { color: var(--vp-on-photo); }
:root[data-look="violet"] .op-trend.vp-on-photo .op-spark .end { stroke: #2a2523; }

/* Achievements: the next one on a card, the newest as a row of its own. */
:root[data-look="violet"] .op-next { grid-template-columns: 56px minmax(0, 1fr); gap: 4px 14px; padding: 18px; border: 1px solid var(--edge); border-radius: 24px; background: var(--card-fill); }
:root[data-look="violet"] .op-next-ic { width: 56px; height: 56px; border-radius: 50%; background: var(--vp-fill); color: #fff; font-size: 1.6rem; }
:root[data-look="violet"] .op-next-ic .ico { --ico-accent: #fff; --ico-dark: #6d4ef0; }
:root[data-look="violet"] .op-next b { font-size: 1.12rem; font-weight: 700; }
:root[data-look="violet"] .op-next small { font-size: 0.9rem; color: var(--ink-2); }
:root[data-look="violet"] .op-next-bar { grid-column: 1 / -1; margin-top: 12px; }
:root[data-look="violet"] .op-next-bar .tally-track { height: 10px; }
:root[data-look="violet"] .op-newest {
    min-height: 64px; margin: 10px 0 0; padding: 10px 12px 10px 18px;
    border: 1px solid var(--edge); border-radius: 20px; background: var(--card-fill);
}
:root[data-look="violet"] .op-newest > span:first-child { font-size: 0.95rem; }

/* More: the rows as cards of their own, an icon tile and a round chevron each. */
:root[data-look="violet"] .vp-more { order: 7; margin: 0 0 10px; }
:root[data-look="violet"] .op-rows { display: grid; gap: 10px; padding: 0; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
:root[data-look="violet"] .op-row, :root[data-look="violet"] .op-row + .op-row {
    min-height: 64px; padding: 10px 14px 10px 12px; border: 1px solid var(--edge); border-radius: 20px; background: var(--card-fill);
}
:root[data-look="violet"] .op-row > i:first-child { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--surface-2); color: var(--accent-text); font-size: 1.3rem; }
:root[data-look="violet"] .op-row > i:first-child .ico { --ico-accent: var(--accent-text); --ico-dark: var(--surface-2); }
:root[data-look="violet"] .op-row-t b { font-size: 1.02rem; font-weight: 500; }
:root[data-look="violet"] .op-row em { color: var(--ink-2); }
:root[data-look="violet"] .op-row-go { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); font-size: 1rem; }
:root[data-look="violet"] .op-row-go .ico { --ico-accent: var(--ink-2); --ico-dark: var(--surface-2); }
:root[data-look="violet"] .op-row.is-save { border-color: rgba(var(--violet-rgb), 0.45); background: linear-gradient(180deg, rgba(var(--violet-rgb), 0.16), rgba(var(--violet-rgb), 0.06)), var(--surface); }
:root[data-look="violet"] .op-row[aria-checked="true"] .op-switch { background: var(--vp-fill); }

/* A computer: the strip tops the left column as a rounded card. */
@media (min-width: 1081px) {
    :root[data-look="violet"] .op-side { position: sticky; }
    :root[data-look="violet"] .vp-collage { height: 210px; margin: 0; border-radius: 28px; }
    :root[data-look="violet"] .op-top { top: 10px; right: 10px; }
    :root[data-look="violet"] .op-head { margin-top: -56px; padding: 0 6px; }
    :root[data-look="violet"] .vp-more { margin-top: 26px; }
}

/* ================================ someone's profile ================================= */
:root[data-look="violet"] .pp-page, :root[data-look="violet"] .pp-col { gap: 18px; }

/* The nameplate on a photo, edge to edge, the top bar over it; the rest under it. */
:root[data-look="violet"] .vp-hero {
    position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between;
    min-height: 440px; margin: -20px -18px -4px; padding: 6px 18px 4px; overflow: hidden; background: none; box-shadow: none;
}
:root[data-look="violet"] .vp-hero.is-plain { min-height: 330px; }
:root[data-look="violet"] .vp-hero > .vp-photo { border-radius: 0; -webkit-mask-image: linear-gradient(#000 58%, transparent); mask-image: linear-gradient(#000 58%, transparent); }
:root[data-look="violet"] .vp-hero > .vp-photo img { filter: saturate(0.9) contrast(1.04) brightness(0.85); }
:root[data-look="violet"] .vp-hero > .vp-photo::after { background: linear-gradient(rgba(var(--scrim-rgb), 0.6), rgba(var(--scrim-rgb), 0) 130px, rgba(var(--scrim-rgb), 0) 40%, rgba(var(--scrim-rgb), 0.75) 72%, rgba(var(--scrim-rgb), 0.9)); }
:root[data-look="violet"] .vp-hero.is-plain > .vp-photo::after { background: none; }
:root[data-look="violet"] .vp-hero .pp-top { min-height: 52px; margin: 0; }
:root[data-look="violet"] .vp-hero .pp-top-title { color: #fff; text-align: center; font-size: 1.05rem; }
:root[data-look="violet"] .vp-hero .pp-top:not(:has(.pp-icon + .pp-top-title + .pp-icon))::after { content: ""; flex: none; width: 44px; }
:root[data-look="violet"] .vp-hero .pp-icon {
    margin: 0; border: 1px solid var(--vp-glass-edge); background: var(--vp-glass); color: #fff; font-size: 1.3rem;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
:root[data-look="violet"] .vp-hero .pp-icon .ico { --ico-accent: #fff; --ico-dark: #3a3532; }
:root[data-look="violet"] .vp-hero .pp-plate-head { display: block; padding-top: 24px; }
:root[data-look="violet"] .vp-hero .avatar.pp-face { width: 104px; height: 104px; border-radius: 50%; font-size: 1.7rem; box-shadow: 0 0 0 4px rgba(var(--scrim-rgb), 0.9); }
:root[data-look="violet"] .vp-hero .pp-name { display: flex; align-items: center; gap: 4px; margin-top: 14px; color: #fff; font-size: 2.5rem; line-height: 1.05; }
:root[data-look="violet"] .vp-hero .pp-name .flame { margin-left: -2px; }
:root[data-look="violet"] .vp-hero .pp-handle { margin-top: 6px; font-size: 1rem; color: var(--vp-on-photo); }
:root[data-look="violet"] .vp-hero .pp-at { color: var(--vp-on-photo); font-weight: 500; }
:root[data-look="violet"] .vp-hero .pp-handle > span:last-child { color: #fff; font-weight: 600; }
:root[data-look="violet"] .vp-plate-rest { display: grid; gap: 14px; }
:root[data-look="violet"] .vp-plate-rest:empty { display: none; }
:root[data-look="violet"] .vp-plate-rest :is(.pp-bio, .pp-mutual, .pp-acts) { margin: 0; }
:root[data-look="violet"] .pp-acts .btn { height: 58px; border-radius: 18px; font-size: 1.05rem; font-weight: 700; }
:root[data-look="violet"] .pp-preview.card { padding: 16px; border-color: rgba(var(--violet-rgb), 0.3); border-radius: 22px; background: linear-gradient(180deg, rgba(var(--violet-rgb), 0.2), rgba(var(--violet-rgb), 0.08)), var(--surface); }
:root[data-look="violet"] .pp-seg { border: 1px solid var(--line); border-radius: 999px; }
:root[data-look="violet"] .pp-seg > * { border-radius: 999px; }
:root[data-look="violet"] .pp-seg > .on { background: var(--vp-fill); color: #fff; }

/* The week: round days, the facts under a line. */
:root[data-look="violet"] .pp-page .card { border-radius: 24px; }
:root[data-look="violet"] .pp-days { margin: 14px 0 16px; }
:root[data-look="violet"] .pp-days li { gap: 8px; font-size: 0.82rem; color: var(--ink-3); }
:root[data-look="violet"] .pp-days li.is-done { color: var(--ink); }
:root[data-look="violet"] .pp-days i { border: 0; background: var(--surface-2); }
:root[data-look="violet"] .pp-days li.is-done i { background: var(--vp-fill); }
:root[data-look="violet"] .pp-days li.is-today i { border: 2px dashed var(--accent-text); background: none; box-shadow: none; }
:root[data-look="violet"] .pp-days li.is-today.is-done i { border: 0; background: var(--vp-fill); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-text); }
:root[data-look="violet"] .pp-days li.is-later i { background: none; box-shadow: inset 0 0 0 1.5px var(--line-2); }
:root[data-look="violet"] .pp-days svg { stroke: #fff; }
:root[data-look="violet"] .pp-fact { font-size: 0.95rem; }
:root[data-look="violet"] .pp-fact > i { color: var(--accent-text); }
:root[data-look="violet"] .pp-fact > i .ico { --ico-accent: var(--accent-text); --ico-dark: var(--surface); }

/* Sections whose heading sits over cards of their own: records, bests, trophies. */
:root[data-look="violet"] .pp-page .card:is(.pp-recs, .pp-bests-card, .pp-case) { overflow: visible; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
:root[data-look="violet"] .pp-page .pp-head { min-height: 44px; margin-bottom: 6px; }
:root[data-look="violet"] .pp-page .pp-head h2 { font-size: 1.32rem; }
:root[data-look="violet"] .pp-page .pp-head .pp-count { font-weight: 500; }
:root[data-look="violet"] .pp-recs > .pp-sub { margin: -2px 0 12px; font-size: 0.95rem; }

/* Compare with me: a dark pill beside the heading. */
:root[data-look="violet"] #ppCompare { min-height: 44px; margin: 0; padding: 0 14px; border-radius: 14px; background: var(--surface-2); color: var(--ink); font-size: 0.86rem; }
:root[data-look="violet"] #ppCompare[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); }

/* The lifts as tiles: the photo, the set, the name and the day. */
:root[data-look="violet"] .pp-rec-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
:root[data-look="violet"] .vp-rec, :root[data-look="violet"] .vp-rec:first-child {
    position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: stretch; gap: 0; min-height: 0;
    padding: 84px 14px 14px; overflow: hidden; border: 1px solid var(--edge); border-radius: 22px; background: var(--surface);
}
:root[data-look="violet"] .vp-rec > .vp-photo { bottom: auto; height: 104px; border-radius: 0; }
:root[data-look="violet"] .vp-rec > .vp-photo img { filter: saturate(0.85) brightness(0.9); }
:root[data-look="violet"] .vp-rec > .vp-photo::after { background: linear-gradient(rgba(58, 53, 50, 0) 40%, var(--surface)); }
:root[data-look="violet"] .vp-rec .pp-rec-v { justify-items: start; }
:root[data-look="violet"] .vp-rec .pp-rec-v strong { font-size: 1.9rem; }
:root[data-look="violet"] .vp-rec .pp-rec-v em { font-size: 0.92rem; color: var(--ink-2); }
:root[data-look="violet"] .vp-rec .pp-rec-v em.vp-reps { margin-left: 3px; font-size: 1.1rem; font-weight: 700; color: var(--accent-text); }
:root[data-look="violet"] .vp-rec .pp-rec-l { gap: 2px; margin-top: 6px; }
:root[data-look="violet"] .vp-rec .pp-rec-l b { font-size: 0.95rem; line-height: 1.25; }
:root[data-look="violet"] .vp-rec .pp-rec-l small { color: var(--ink-3); }
:root[data-look="violet"] .vp-rec .pp-new { position: absolute; top: 10px; left: 10px; box-shadow: 0 4px 12px rgba(var(--scrim-rgb), 0.3); }
:root[data-look="violet"] .vp-rec .pp-you { margin-top: 6px; }
:root[data-look="violet"] .pp-recs .pp-all {
    justify-content: center; width: 100%; min-height: 56px; margin: 10px 0 0; padding: 0 16px;
    border: 1px solid var(--line-2); border-radius: 18px; color: var(--ink); font-size: 1rem;
}
:root[data-look="violet"] .pp-recs .pp-quiet { margin: 0; padding: 16px; border: 1px solid var(--edge); border-radius: 22px; background: var(--card-fill); }
:root[data-look="violet"] .pp-tile { border-radius: 14px; background: var(--surface-2); color: var(--accent-text); }
:root[data-look="violet"] .pp-tile .ico { --ico-accent: var(--accent-text); --ico-dark: var(--surface-2); }

/* Personal bests: four tiles, each with a round icon, the longest streak in violet. */
:root[data-look="violet"] .pp-bests { gap: 10px; margin: 0; border: 0; background: none; }
:root[data-look="violet"] .pp-bests > div { padding: 14px 16px 16px; border: 1px solid var(--edge); border-radius: 22px; background: var(--card-fill); }
:root[data-look="violet"] .pp-bests > div:first-child { border-color: transparent; background: linear-gradient(160deg, #8f74ff, #6545e8); box-shadow: 0 10px 26px rgba(117, 82, 245, 0.3); color: #fff; }
:root[data-look="violet"] .pp-bests > div:first-child :is(span:not(.vp-disc), em, b small) { color: rgba(255, 255, 255, 0.8); }
:root[data-look="violet"] .pp-bests .vp-disc { display: grid; place-items: center; width: 42px; height: 42px; margin: 0 0 12px; border-radius: 50%; background: var(--surface-2); color: var(--accent-text); font-size: 1.35rem; font-weight: 400; line-height: 1; }
:root[data-look="violet"] .vp-disc .ico { --ico-accent: var(--accent-text); --ico-dark: var(--surface-2); }
:root[data-look="violet"] .pp-bests > div:first-child .vp-disc { background: rgba(255, 255, 255, 0.2); color: #fff; }
:root[data-look="violet"] .pp-bests > div:first-child .vp-disc .ico { --ico-accent: #fff; --ico-dark: #7a5cf5; }
:root[data-look="violet"] .pp-bests b { font-size: 2.15rem; }
:root[data-look="violet"] .pp-bests > div > span:not(.vp-disc) { margin-top: 6px; font-weight: 500; }
:root[data-look="violet"] .pp-bests em { margin-top: 4px; }
:root[data-look="violet"] .pp-longest.card { border-color: transparent; background: linear-gradient(160deg, #8f74ff, #6545e8); color: #fff; }
:root[data-look="violet"] .pp-longest span, :root[data-look="violet"] .pp-longest b small { color: rgba(255, 255, 255, 0.85); }
:root[data-look="violet"] .pp-note.card { border: 1px solid var(--edge); background: var(--card-fill); }

/* The trophy case: the newest as glass chips on a photo, then Next up and See all. */
:root[data-look="violet"] .vp-shelf {
    position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 16px;
    padding: 22px 16px 24px; overflow: hidden; border-radius: 28px; background: #1f1b1a;
}
:root[data-look="violet"] .vp-shelf > .vp-photo::after { background: linear-gradient(rgba(var(--scrim-rgb), 0.2), rgba(var(--scrim-rgb), 0.5)); }
:root[data-look="violet"] .vp-shelf.is-plain > .vp-photo::after { background: none; }
:root[data-look="violet"] .vp-chip {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; max-width: 80%; padding: 10px 16px 10px 10px;
    border: 1px solid var(--vp-glass-edge); border-radius: 18px; background: var(--vp-glass); box-shadow: 0 12px 28px rgba(var(--scrim-rgb), 0.3);
    color: #fff; text-decoration: none; transform: rotate(-3deg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    -webkit-tap-highlight-color: transparent;
}
:root[data-look="violet"] .vp-chip:nth-child(3) { align-self: flex-end; transform: rotate(2.5deg); }
:root[data-look="violet"] .vp-chip:nth-child(4) { margin-left: 6px; transform: rotate(-1.5deg); }
:root[data-look="violet"] .vp-chip:nth-child(5) { align-self: flex-end; margin-right: 6px; transform: rotate(3deg); }
:root[data-look="violet"] .vp-chip:active { scale: 0.97; }
:root[data-look="violet"] .vp-chip b { display: block; font-size: 0.98rem; font-weight: 600; line-height: 1.25; }
:root[data-look="violet"] .vp-chip small { display: block; margin-top: 1px; font-size: 0.78rem; color: var(--vp-on-photo); }
:root[data-look="violet"] .vp-medal { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--vp-fill); color: #fff; font-size: 1.15rem; }
:root[data-look="violet"] .vp-medal .ico { --ico-accent: #fff; --ico-dark: #6d4ef0; }
:root[data-look="violet"] .pp-case .pp-next {
    grid-template-columns: 56px minmax(0, 1fr); gap: 14px; margin-top: 10px; padding: 18px;
    border: 1px solid var(--edge); border-radius: 24px; background: var(--card-fill);
}
:root[data-look="violet"] .pp-medal.is-next { width: 56px; height: 56px; border: 0; background: var(--vp-fill); color: #fff; font-size: 1.6rem; }
:root[data-look="violet"] .pp-page .pp-medal.is-next .ico { --ico-accent: #fff; --ico-dark: #6d4ef0; }
:root[data-look="violet"] .pp-next b { font-size: 1.12rem; font-weight: 700; }
:root[data-look="violet"] .pp-next small { font-size: 0.9rem; color: var(--ink-2); }
:root[data-look="violet"] .pp-tally .tally-track { height: 10px; }
:root[data-look="violet"] .pp-seeall { display: block; margin: 10px 0 0; }
:root[data-look="violet"] .pp-seeall .pp-link {
    display: flex; gap: 12px; width: 100%; min-height: 64px; margin: 0; padding: 10px 14px 10px 12px;
    border: 1px solid var(--edge); border-radius: 20px; background: var(--card-fill); color: var(--ink); font-size: 1.02rem; font-weight: 500;
}
:root[data-look="violet"] .pp-seeall .pp-link > span:nth-child(2) { flex: 1; min-width: 0; }
:root[data-look="violet"] .pp-seeall .pp-link > i:last-child { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); font-size: 1rem; }
:root[data-look="violet"] .pp-seeall .pp-link > i:last-child .ico { --ico-accent: var(--ink-2); --ico-dark: var(--surface-2); }
:root[data-look="violet"] .vp-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--surface-2); color: var(--accent-text); font-size: 1.3rem; }
:root[data-look="violet"] .vp-ic .ico { --ico-accent: var(--accent-text); --ico-dark: var(--surface-2); }

/* A computer: the nameplate is a rounded card at the top of the left column. */
@media (min-width: 1081px) {
    :root[data-look="violet"] .vp-hero { min-height: 400px; margin: 0; padding: 8px 18px 20px; border-radius: 28px; background: #1f1b1a; }
    :root[data-look="violet"] .vp-hero > .vp-photo { border-radius: 28px; -webkit-mask-image: none; mask-image: none; }
}

/* A small phone: the names and the big numbers step down. */
@media (max-width: 380px) {
    :root[data-look="violet"] :is(.op-name, .vp-hero .pp-name) { font-size: 2.15rem; }
    :root[data-look="violet"] .op-streak .streak-count b { font-size: 2.6rem; }
    :root[data-look="violet"] .vp-rec .pp-rec-v strong { font-size: 1.65rem; }
}

/* ==========================================================================
   8. Social: Chats, People, Referrals and the social popups
   Home's friends row, requests, post box and feed are the approved Home and
   stay as they are: every rule for a class Home shares (.req, .requests, .ci,
   .b, .presence-avatar) is held to the Chats page (.messages-page) or to
   Referrals (.referrals-page).

   8a. Chats, the list     8c. Chats on a computer   8e. popups (report, GIFs, emoji)
   8b. a chat              8d. People                8f. progress stories
   8g. Referrals           8h. less motion
   ========================================================================== */

/* ---- 8a. Chats, the list -------------------------------------------------- */

/* The search: a pill on the page, the magnifier inside it. */
:root[data-look="violet"] .social-mess .thread-search { display: block; margin: 0 0 var(--gap-group); }
:root[data-look="violet"] .social-mess .thread-search i { left: 17px; color: var(--ink-3); font-size: 1.15rem; }
:root[data-look="violet"] .social-mess .thread-search .inp {
    height: 48px; padding: 0 18px 0 46px; border: 1px solid var(--edge); border-radius: var(--r-pill);
    background-color: var(--surface); font-size: 1rem;
}
:root[data-look="violet"] .social-mess .thread-search .inp:focus { border-color: var(--focus); }

/* One card per chat, 10px apart: the face (ringed in violet while there is
   something new, as on Home), the name with the time of the last message,
   then the last message with its tick, and the count of new ones. */
:root[data-look="violet"] .social-mess .lst { display: flex; flex-direction: column; gap: var(--gap-list); padding: 0; border: 0; }
:root[data-look="violet"] .social-mess .ci {
    display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; grid-template-rows: 1fr auto auto 1fr; align-items: center; column-gap: 12px; row-gap: 3px;
    width: 100%; min-height: 80px; padding: 10px 14px 10px 10px;
    border: 1px solid var(--edge); border-radius: var(--r-row); background: var(--card-fill); color: var(--ink);
    -webkit-tap-highlight-color: transparent; transition: transform var(--dur-fast) ease, border-color var(--dur) ease;
}
:root[data-look="violet"] .social-mess .thread-picker .ci + .ci { border-top: 1px solid var(--edge); border-radius: var(--r-row); }
:root[data-look="violet"] .social-mess .thread-picker .ci.has-unread { border: 1px solid var(--edge); border-radius: var(--r-row); }
:root[data-look="violet"] .social-mess .ci:hover { border-color: var(--edge-strong); background: var(--card-fill); }
:root[data-look="violet"] .social-mess .ci:active { transform: scale(0.99); }
:root[data-look="violet"] .social-mess .ci > .presence-avatar { grid-column: 1; grid-row: 1 / 5; padding: 4px; border-radius: 50%; }
:root[data-look="violet"] .social-mess .ci.has-unread > .presence-avatar { background: var(--accent); }
:root[data-look="violet"] .social-mess .ci .av { width: 52px; height: 52px; font-size: 0.95rem; box-shadow: 0 0 0 2.5px var(--surface); }
:root[data-look="violet"] .social-mess .ci .presence-avatar.online::after { right: 1px; bottom: 2px; width: 15px; height: 15px; border: 2.5px solid var(--surface); }
/* The two lines (the wrapper steps aside, so its lines sit on the row's grid). */
:root[data-look="violet"] .social-mess .ci .ci-main { display: contents; }
:root[data-look="violet"] .social-mess .ci .ci-top { grid-column: 2 / 4; grid-row: 2; display: flex; align-items: baseline; gap: 10px; min-width: 0; }
:root[data-look="violet"] .social-mess .ci .ci-top b { flex: 1; min-width: 0; overflow: hidden; font-size: 1.04rem; font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
:root[data-look="violet"] .social-mess .ci .ci-time { flex: none; color: var(--ink-3); font-size: 0.8rem; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
:root[data-look="violet"] .social-mess .ci.has-unread .ci-time { color: var(--accent-text); font-weight: 600; }
:root[data-look="violet"] .social-mess .ci .ci-preview { grid-column: 2; grid-row: 3; display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--ink-2); font-size: 0.92rem; line-height: 1.35; }
:root[data-look="violet"] .social-mess .ci.has-unread .ci-preview { color: var(--ink); font-weight: 500; }
:root[data-look="violet"] .social-mess .ci .ci-receipt { order: -1; color: var(--ink-3); font-size: 1rem; }
:root[data-look="violet"] .social-mess .ci .ci-receipt i { font-size: 1rem; }
:root[data-look="violet"] .social-mess .ci .ci-receipt.is-seen { color: var(--accent-text); }
/* The count of new messages: a violet pill under the time. */
:root[data-look="violet"] .social-mess .ci .ci-unread {
    grid-column: 3; grid-row: 3; justify-self: end; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px;
    border-radius: var(--r-pill); background: var(--accent); color: #fff; font-size: 0.74rem; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums;
}
:root[data-look="violet"] .social-mess .ci .ci-unread[hidden] { display: none; }
/* No chats yet, or nobody matches the search. */
:root[data-look="violet"] .social-mess .lst > .sub { padding: 18px 4px; color: var(--ink-2); font-size: 0.95rem; text-align: center; }
:root[data-look="violet"] .social-mess .lst > .v-empty { margin-top: 6px; }
/* No chats yet: the empty card has Find people, so the head's pill and a
   search with nothing to search step aside. */
:root[data-look="violet"] .social-mess:has(.lst > .v-empty) .thread-search,
:root[data-look="violet"] .messages-page:has(#threadList > .v-empty) .hello-pill { display: none; }

@media (max-width: 1080px) {
    /* The list scrolls with the page, under the dock, like Home: the big
       title goes up with it. A chat keeps its own full-screen layout (b). */
    :root[data-look="violet"] .messages-page:not(.is-chat-open) {
        display: block; height: auto; min-height: 0; overflow: visible;
        padding: 20px 18px calc(var(--tabbar-h) + 46px + env(safe-area-inset-bottom));
    }
    :root[data-look="violet"] .messages-page:not(.is-chat-open) #socialBody { display: block; }
    :root[data-look="violet"] .messages-page .hello.is-title { margin: 8px 0 22px; padding: 0; }
    :root[data-look="violet"] .messages-page:not(.is-chat-open) #viewMessages { display: block; height: auto; }
    :root[data-look="violet"] .messages-page:not(.is-chat-open) .social-mess {
        height: auto; margin: 0; padding: 0; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none;
    }
    :root[data-look="violet"] .messages-page:not(.is-chat-open) .social-mess .thread-picker { display: block; border: 0; }
    :root[data-look="violet"] .messages-page:not(.is-chat-open) .social-mess .lst {
        height: auto; max-height: none; min-height: 0; padding: 0; overflow: visible; border: 0; scroll-snap-type: none;
    }
    :root[data-look="violet"] .messages-page:not(.is-chat-open) .social-mess .ci { max-width: none; padding: 10px 14px 10px 10px; scroll-snap-align: none; }
}

/* ---- 8b. a chat ----------------------------------------------------------- */

/* The head: the round back, the face with its online dot, the name over
   "@handle · Level N", the report flag. A soft rule under it. */
:root[data-look="violet"] .social-mess .th-head {
    display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 18px;
    border-bottom: 1px solid var(--divider);
}
:root[data-look="violet"] .social-mess .th-head .presence-avatar { flex: none; }
:root[data-look="violet"] .social-mess .th-head .av { width: 44px; height: 44px; font-size: 0.86rem; }
:root[data-look="violet"] .social-mess .th-head .presence-avatar.online::after { right: -3px; bottom: -2px; border-color: var(--chat-bg); }
:root[data-look="violet"] .social-mess .chat-name { font-size: 1.06rem; font-weight: 600; letter-spacing: -0.005em; }
:root[data-look="violet"] .social-mess .chat-name .who-link:hover { text-decoration: none; }
:root[data-look="violet"] .social-mess .chat-who .sub { margin-top: 2px; color: var(--ink-2); font-size: 0.86rem; }
:root[data-look="violet"] .social-mess .th-head .report-chat-btn { flex: 0 0 44px; margin-left: auto; color: var(--ink-2); font-size: 1.15rem; }

/* The words: calm rhythm. Their bubbles on the card colour, yours violet.
   Bubbles in a row from one person sit close, with a small corner where they
   meet; a new speaker starts a little further down. */
:root[data-look="violet"] .social-mess .msgs { gap: 3px; padding: 16px 18px 14px; }
:root[data-look="violet"] .social-mess .b {
    max-width: min(80%, 34rem); padding: 10px 14px 8px; border-radius: 22px;
    font-size: 1rem; line-height: 1.4; box-shadow: none;
}
:root[data-look="violet"] .social-mess .b.them { border-bottom-left-radius: 8px; background: var(--surface); color: var(--ink); }
/* Yours take the deeper violet, so white keeps 4.5:1 up to the bubble's top edge. */
:root[data-look="violet"] .social-mess .b.me { border-bottom-right-radius: 8px; background: var(--violet-fill-hover); color: var(--on-violet); }
:root[data-look="violet"] .social-mess .b.them + .b.them { border-top-left-radius: 8px; }
:root[data-look="violet"] .social-mess .b.me + .b.me { border-top-right-radius: 8px; }
:root[data-look="violet"] .social-mess :is(.b.me + .b.them, .b.them + .b.me, .b + .typing-indicator) { margin-top: 10px; }
:root[data-look="violet"] .social-mess .b.me.is-pending { opacity: 0.65; }
/* The time and the tick: quiet on their side, white .9 on violet (never lower). */
:root[data-look="violet"] .social-mess .b .t { gap: 2px 6px; margin-top: 2px; font-size: 0.7rem; font-variant-numeric: tabular-nums; opacity: 1; }
:root[data-look="violet"] .social-mess .b.them .t { color: var(--ink-3); }
:root[data-look="violet"] .social-mess .b.me .t { color: var(--on-violet-2); }
:root[data-look="violet"] .social-mess .b .receipt i { font-size: 0.9rem; }
:root[data-look="violet"] .social-mess .b.me .receipt, :root[data-look="violet"] .social-mess .b.me .receipt.is-seen { color: var(--on-violet); }
/* A day starts with a small kicker, as dates do across the look. */
:root[data-look="violet"] .social-mess .day-line {
    margin: 16px 0 8px; color: var(--ink-3); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
/* A short chat sits down on the composer, as in any messenger; a long one
   scrolls as before (an auto margin takes only space that is left over). */
:root[data-look="violet"] .social-mess .msgs > :first-child { margin-top: auto; }
:root[data-look="violet"] .social-mess .msgs > .day-line:first-child { margin-top: auto; padding-top: 4px; }
/* The message being answered, inside a bubble: a straight rounded bar at its side. */
:root[data-look="violet"] .social-mess .message-reply {
    position: relative; margin: 0 0 7px; padding: 7px 10px 7px 17px; border: 0; border-radius: var(--r-field);
    background: rgba(255, 255, 255, 0.06); box-shadow: none; font-size: 0.82rem;
}
:root[data-look="violet"] .social-mess .message-reply::before {
    content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 3px; border-radius: var(--r-pill); background: var(--accent-text);
}
:root[data-look="violet"] .social-mess .b.me .message-reply { background: rgba(var(--scrim-rgb), 0.2); }
:root[data-look="violet"] .social-mess .b.me .message-reply::before { background: var(--on-violet-2); }
:root[data-look="violet"] .social-mess .b.me .message-reply__author { color: var(--on-violet); }
:root[data-look="violet"] .social-mess .b.me .message-reply__text { color: var(--on-violet-2); }
/* A reply to a story: the label, then the picture (or "Story expired"). */
:root[data-look="violet"] .social-mess .story-reply { gap: 6px; margin-bottom: 8px; }
:root[data-look="violet"] .social-mess .story-reply__label { font-size: 0.76rem; font-weight: 600; opacity: 1; }
:root[data-look="violet"] .social-mess .b.them .story-reply__label { color: var(--ink-2); }
:root[data-look="violet"] .social-mess .b.me .story-reply__label { color: var(--on-violet); }
:root[data-look="violet"] .social-mess .story-reply__thumb { width: 88px; border-radius: var(--r-field); background: var(--bg-2); }
/* An expired story is a small chip, not an empty frame. */
:root[data-look="violet"] .social-mess .story-reply__thumb.is-expired {
    display: inline-flex; width: auto; aspect-ratio: auto; padding: 5px 10px; border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.07); color: var(--ink-2); font-size: 0.76rem; font-weight: 600; opacity: 1;
}
:root[data-look="violet"] .social-mess .b.me .story-reply__thumb.is-expired { background: rgba(var(--scrim-rgb), 0.2); color: var(--on-violet-2); }
/* A GIF keeps its shape (see the page's own rule); a softer corner here. */
:root[data-look="violet"] .social-mess .b .chat-gif { border-radius: 16px; background: var(--bg-2); }
/* The bicep reaction: a small chip on the bubble's lower edge; yours is tinted violet.
   The bubble makes room so the chip never sits on the next one. */
:root[data-look="violet"] .social-mess .b:has(.chat-reaction) { margin-bottom: 12px; }
:root[data-look="violet"] .social-mess .chat-reaction {
    right: 10px; bottom: -13px; min-height: 26px; padding: 2px 8px; border: 1px solid var(--edge-strong);
    background: var(--surface-2); box-shadow: 0 4px 12px rgba(var(--scrim-rgb), 0.35); color: var(--ink); font-size: 0.84rem; font-weight: 600;
}
:root[data-look="violet"] .social-mess .b.them .chat-reaction { right: auto; left: 10px; }
:root[data-look="violet"] .social-mess .chat-reaction.is-reacted { border-color: rgba(var(--violet-rgb), 0.55); background: color-mix(in srgb, var(--accent) 22%, var(--surface-2)); }
:root[data-look="violet"] .social-mess .reply-swipe-hint { background: var(--surface-2); color: var(--accent-text); }
:root[data-look="violet"] .reaction-burst i { background: var(--violet-2); }
/* Typing: their bubble with three soft dots. */
:root[data-look="violet"] .social-mess .typing-indicator { padding: 14px 16px; border-radius: 22px 22px 22px 8px; background: var(--surface); }
:root[data-look="violet"] .social-mess .typing-indicator i { background: var(--ink-2); }
/* No messages yet: one kind line under a soft violet disc. */
:root[data-look="violet"] .social-mess .msgs > .sub { display: grid; justify-items: center; gap: 12px; color: var(--ink-2); font-size: 0.95rem; text-align: center; }
:root[data-look="violet"] .social-mess .msgs > .sub::before {
    content: ""; width: 56px; height: 56px; border-radius: 50%;
    background: var(--accent-text); -webkit-mask: var(--i-chat-disc) center / contain no-repeat; mask: var(--i-chat-disc) center / contain no-repeat;
}
:root[data-look="violet"] {
    /* A soft disc with a speech bubble cut out of it (for "No messages yet"). */
    --i-chat-disc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Ccircle cx='28' cy='28' r='28' fill='%23000' fill-opacity='.2'/%3E%3Cpath d='M28 17c-6.6 0-12 4.5-12 10.1 0 2.7 1.3 5.2 3.4 7l-1.1 4.8 5-2.6c1.4.5 3 .8 4.7.8 6.6 0 12-4.5 12-10.1S34.6 17 28 17Z' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Something went wrong (a send, a reaction): one line under the words. */
:root[data-look="violet"] #chatStatus { margin: 0; padding: 0 18px 8px; color: var(--bad); font-size: 0.86rem; font-weight: 500; line-height: 1.4; }
:root[data-look="violet"] #chatStatus:empty { display: none; }

/* The composer: GIF, the message pill and the round violet send, 48px each. */
:root[data-look="violet"] .social-mess .composer { gap: 8px; padding: 10px 18px 14px; border-top: 1px solid var(--divider); background: transparent; }
:root[data-look="violet"] .social-mess .composer .inp {
    height: 48px; padding: 0 18px; border: 1px solid var(--edge); border-radius: var(--r-pill); background-color: var(--surface-2); font-size: 16px;
}
:root[data-look="violet"] .social-mess .composer .inp:focus { border-color: var(--focus); }
:root[data-look="violet"] .social-mess .chat-gif-btn {
    flex: 0 0 48px; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
    background: var(--surface-2); color: var(--ink-2); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.04em;
}
:root[data-look="violet"] .social-mess .chat-gif-btn:hover { background: var(--line-2); color: var(--ink); }
:root[data-look="violet"] .social-mess .composer .send-btn { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; box-shadow: var(--violet-glow); }
:root[data-look="violet"] .social-mess .composer .send-btn i { font-size: 1.25rem; }
:root[data-look="violet"] .social-mess .composer .send-btn:active { transform: scale(0.95); }
/* Answering one message: it sits over the box with its bar and a way out. */
:root[data-look="violet"] .social-mess .message-reply-composer {
    position: relative; gap: 8px; padding: 4px 4px 4px 20px; border: 1px solid var(--edge); border-radius: var(--r-row);
    background: var(--surface); box-shadow: none;
}
:root[data-look="violet"] .social-mess .message-reply-composer::before {
    content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 3px; border-radius: var(--r-pill); background: var(--accent-text);
}
:root[data-look="violet"] .social-mess .message-reply-composer .message-reply { padding: 4px 0; background: none; box-shadow: none; }
:root[data-look="violet"] .social-mess .message-reply-composer .message-reply::before { content: none; }
:root[data-look="violet"] .social-mess .message-reply-composer > button { flex: 0 0 44px; width: 44px; height: 44px; font-size: 1.1rem; }
:root[data-look="violet"] .social-mess .message-reply-composer > button:hover { background: var(--hover); }
/* GIFs waiting to be sent. */
:root[data-look="violet"] .chat-gif-preview__item { border-radius: var(--r-field); background: var(--bg-2); }
:root[data-look="violet"] .chat-gif-preview__item button i.ph { background: var(--glass); color: #fff; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }

@media (max-width: 1080px) {
    /* Full screen: the chat sits on the page's own fade; the composer is a
       soft glass bar over the home bar. */
    :root[data-look="violet"] .messages-page.is-chat-open { background: transparent; }
    :root[data-look="violet"] .messages-page.is-chat-open #viewMessages { background: transparent; }
    :root[data-look="violet"] .messages-page.is-chat-open .social-mess .thread { --chat-bg: var(--bg); }
    :root[data-look="violet"] .messages-page.is-chat-open .social-mess .th-head { min-height: 68px; padding: 8px 14px 10px 18px; }
    :root[data-look="violet"] .messages-page.is-chat-open .social-mess .msgs { padding: 14px 18px 12px; scrollbar-width: none; }
    :root[data-look="violet"] .messages-page.is-chat-open .social-mess .msgs::-webkit-scrollbar { display: none; }
    :root[data-look="violet"] .messages-page.is-chat-open .social-mess .composer {
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) 14px;
        background: color-mix(in srgb, var(--bg) 86%, transparent);
        -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
    }
}

/* ---- 8c. Chats on a computer ----------------------------------------------
   The title over the page (Find people under it, your face on the right), then the list of
   chats on the left and the open chat on the right, as one card.
   -------------------------------------------------------------------------- */

@media (min-width: 1081px) {
    :root[data-look="violet"] .messages-page { padding: 26px 32px 24px; }
    :root[data-look="violet"] .messages-page .hello.is-title { display: grid; flex: none; margin: 0 0 22px; }
    /* The title keeps Home's size (a tab's title, as on the phone). */
    :root[data-look="violet"] .messages-page .hello.is-title[hidden] { display: none; }
    :root[data-look="violet"] .messages-page .social-mess,
    :root[data-look="violet"] .messages-page .social-mess:not(.has-thread),
    :root[data-look="violet"] .messages-page.is-chat-open #viewMessages {
        grid-template-columns: 340px minmax(0, 1fr); gap: 20px; padding: 0; overflow: visible;
        border: 0; border-radius: 0; background: none; box-shadow: none;
    }
    :root[data-look="violet"] .messages-page .social-mess .thread-picker,
    :root[data-look="violet"] .messages-page.is-chat-open .social-mess .thread-picker { display: flex; min-height: 0; border-right: 0; }
    :root[data-look="violet"] .messages-page .social-mess .lst { flex: 1; min-height: 0; padding: 0 4px 12px 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
    :root[data-look="violet"] .messages-page .social-mess .ci { flex: none; }
    :root[data-look="violet"] .messages-page .social-mess .ci.on { border-color: var(--tint-edge); background: var(--tint-fill); }
    :root[data-look="violet"] .messages-page .social-mess .ci.on .av { box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--accent) 14%, var(--surface)); }
    /* The chat: one feature card. With none open it says what to do. */
    :root[data-look="violet"] .messages-page .social-mess .thread,
    :root[data-look="violet"] .messages-page .social-mess:not(.has-thread) .thread {
        --chat-bg: var(--surface); display: flex; min-height: 0; overflow: hidden;
        border: 1px solid var(--edge); border-radius: var(--r-feature); background: var(--card-fill);
    }
    /* The list sits beside the chat, so there is no way back to show (#head: past the back rule's weight). */
    :root[data-look="violet"] .messages-page #head .chat-back { display: none; }
    :root[data-look="violet"] .messages-page .social-mess .th-head { padding: 14px 20px; }
    :root[data-look="violet"] .messages-page .social-mess .msgs { padding: 18px 24px 16px; }
    :root[data-look="violet"] .messages-page .social-mess .b.them { background: var(--surface-2); }
    :root[data-look="violet"] .messages-page .social-mess .b.them .t { color: var(--ink-2); }   /* ink-3 is under 4.5:1 on the raised fill */
    :root[data-look="violet"] .messages-page .social-mess .typing-indicator { background: var(--surface-2); }
    :root[data-look="violet"] .messages-page .social-mess .composer { padding: 12px 20px 16px; }
    :root[data-look="violet"] .messages-page .social-mess:not(.has-thread) :is(.th-head, .msgs) { display: none; }
    /* !important: a v-only block shows with display: revert !important. */
    :root[data-look="violet"] .messages-page .social-mess .chat-pick {
        flex: 1; display: grid !important; place-content: center; justify-items: center; gap: 10px; padding: 32px; text-align: center;
    }
    :root[data-look="violet"] .messages-page .social-mess .chat-pick i { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 4px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-size: 1.6rem; }
    :root[data-look="violet"] .messages-page .social-mess .chat-pick b { font-family: var(--font-display); font-stretch: 108%; font-size: var(--title-card); font-weight: 800; letter-spacing: -0.02em; }
    :root[data-look="violet"] .messages-page .social-mess .chat-pick p { max-width: 32ch; margin: 0; color: var(--ink-2); font-size: 0.95rem; line-height: 1.5; text-wrap: balance; }
    /* No chats yet: there is nobody to pick, so the "Your chats" card steps
       aside and the one empty state stands alone. */
    :root[data-look="violet"] .messages-page .social-mess:not(.has-thread):has(#threadList > .v-empty) { grid-template-columns: minmax(0, 520px); }
    :root[data-look="violet"] .messages-page .social-mess:not(.has-thread):has(#threadList > .v-empty) .thread { display: none; }
}
/* The "pick a chat" card is for a computer with no chat open. */
:root[data-look="violet"] .social-mess.has-thread .chat-pick.v-only { display: none !important; }
@media (max-width: 1080px) {
    :root[data-look="violet"] .social-mess .chat-pick.v-only { display: none !important; }
}

/* ---- 8d. People -----------------------------------------------------------
   The round back, the title, then three sections: requests, find people and
   your friends, each a heading and its own row cards.
   -------------------------------------------------------------------------- */

:root[data-look="violet"] .messages-page .peopleview { gap: 0; max-width: 640px; }
:root[data-look="violet"] .messages-page .people-head { margin: 14px 0 0; }
:root[data-look="violet"] .messages-page .people-head .sub { margin: 8px 0 0; color: var(--ink-2); font-size: 1rem; line-height: 1.45; text-wrap: pretty; }
/* Requests and the two cards become sections on the page. */
:root[data-look="violet"] .messages-page .peopleview > :is(.requests, .card) {
    margin: var(--gap-section) 0 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}
:root[data-look="violet"] .messages-page .peopleview > :is(.requests, .card) > h2 {
    display: flex; align-items: center; min-height: 44px; margin: 0;
    font-family: var(--font-display); font-stretch: 108%; font-size: var(--title-sec); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink);
}
:root[data-look="violet"] .messages-page .peopleview > .card > .sub { margin: 0 0 var(--gap-group); color: var(--ink-2); font-size: 0.92rem; }
:root[data-look="violet"] .messages-page .peopleview > .requests > h2 { margin-bottom: 10px; }
/* The search: a pill with the magnifier, like the one on Chats. */
:root[data-look="violet"] .messages-page #search {
    height: 48px; padding: 0 18px 0 46px; border-radius: var(--r-pill); background: var(--surface) var(--i-search) 16px 50% / 20px no-repeat; font-size: 1rem;
}
:root[data-look="violet"] {
    --i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%23aaa199' stroke-width='1.8'/%3E%3Cpath d='m15.5 15.5 4.5 4.5' stroke='%23aaa199' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
:root[data-look="violet"] .messages-page :is(#requests, #results, .people-list) { display: grid; gap: var(--gap-list); margin: 0; }
:root[data-look="violet"] .messages-page #results:not(:empty) { margin-top: var(--gap-group); }
/* A person: the face, the name over the handle, the action. Its own card. */
:root[data-look="violet"] .messages-page .peopleview .req {
    gap: 12px; min-height: 72px; padding: 10px 12px 10px 12px;
    border: 1px solid var(--edge); border-radius: var(--r-row); background: var(--card-fill);
}
:root[data-look="violet"] .messages-page .peopleview .req:last-child { border-bottom: 1px solid var(--edge); }
:root[data-look="violet"] .messages-page .peopleview .req .av { width: 48px; height: 48px; font-size: 0.9rem; }
:root[data-look="violet"] .messages-page .peopleview .req .presence-avatar.online::after { right: -3px; bottom: -2px; border-color: var(--surface); }
:root[data-look="violet"] .messages-page .peopleview .req-who a { font-size: 1rem; font-weight: 600; }
:root[data-look="violet"] .messages-page .peopleview .req-who span { margin-top: 2px; color: var(--ink-2); font-size: 0.86rem; }
:root[data-look="violet"] .messages-page .peopleview .req .btn.xs { height: 40px; padding: 0 16px; font-size: 0.88rem; }
:root[data-look="violet"] .messages-page .peopleview .req .btn.xs::after { inset: -2px 0; }
:root[data-look="violet"] .messages-page .peopleview .req .btn.quiet.xs { border-color: var(--edge-strong); background: var(--surface-2); }
:root[data-look="violet"] .messages-page .peopleview .req .btn.quiet.xs:hover { background: var(--line-2); }
:root[data-look="violet"] .messages-page .peopleview .req .tag { height: 32px; padding: 0 12px; }
:root[data-look="violet"] .messages-page .peopleview :is(#results, .people-list) > .sub { margin: 0; color: var(--ink-2); font-size: 0.92rem; }
/* A request: who it is on top, Accept and Decline sharing the row under them,
   on the violet-tinted card it has on Home (a step to do). */
:root[data-look="violet"] .messages-page #requestsCard .req {
    display: grid; grid-template-columns: auto minmax(0, 1fr); row-gap: 12px; padding: 14px;
    border-color: var(--tint-edge); background: var(--tint-fill);
}
:root[data-look="violet"] .messages-page #requestsCard .req .presence-avatar.online::after { border-color: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
:root[data-look="violet"] .messages-page #requestsCard .req .row { grid-column: 1 / -1; display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; }
:root[data-look="violet"] .messages-page #requestsCard .req .row .btn { width: 100%; height: 44px; }
@media (max-width: 380px) {
    /* Accept and Decline stay on the row; the name gives way. */
    :root[data-look="violet"] .messages-page .peopleview .req .btn.xs { padding: 0 12px; }
}
@media (max-width: 1080px) {
    :root[data-look="violet"] .messages-page:not(.is-chat-open) .peopleview { display: block; overflow: visible; }
}

/* ---- 8e. popups: report a chat, GIFs, emoji -------------------------------
   The shells are the shared sheets (section 3); this is what is inside them.
   -------------------------------------------------------------------------- */

/* On a phone the sheet's own top bar has the close, so the heading's goes. */
@media (max-width: 1080px) {
    :root[data-look="violet"] dialog:has(> .sheet-top) :is([data-gif-close], [data-emoji-close], .chat-report__head [data-chat-report-close], .progress-story-compose__head [data-story-compose-cancel]) { display: none; }
    :root[data-look="violet"] :is(.gif-picker__inner, .emoji-picker__inner) { padding: 0 18px 18px; }
    :root[data-look="violet"] .chat-report__form { padding: 0 20px 22px; }
    /* These dialogs have no padding of their own, so their top bar keeps the close off the edge. */
    :root[data-look="violet"] dialog:is(.gif-picker, .emoji-picker, .chat-report-dialog) > .sheet-top { height: auto; padding: 10px 12px 0; }
}
/* A close button kept on a computer: a round, like every other. */
:root[data-look="violet"] :is(.gif-picker__head, .emoji-picker__head, .chat-report__head, .progress-story-compose__head) .btn.xs {
    flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink); font-size: 1.15rem;
}
:root[data-look="violet"] :is(.gif-picker__head, .emoji-picker__head, .chat-report__head, .progress-story-compose__head) .btn.xs:hover { background: var(--line-2); }
:root[data-look="violet"] :is(.gif-picker__head, .emoji-picker__head, .chat-report__head, .progress-story-compose__head) .btn.xs svg.ico { width: 20px; height: 20px; }

/* Report a conversation. */
:root[data-look="violet"] .chat-report__form { gap: 8px; }
:root[data-look="violet"] .chat-report__form > .sub { margin: 4px 0 8px; color: var(--ink-2); font-size: 0.95rem; line-height: 1.5; }
:root[data-look="violet"] .chat-report__form > label { margin-top: 8px; color: var(--ink-2); font-size: 0.84rem; font-weight: 600; }
:root[data-look="violet"] .chat-report__form textarea.inp { min-height: 112px; padding: 12px 14px; line-height: 1.45; }
:root[data-look="violet"] .chat-report__status { padding: 10px 14px; border-radius: var(--r-field); background: var(--bad-soft); font-weight: 600; }
:root[data-look="violet"] .chat-report__status.is-success { background: var(--ok-soft); color: var(--ok); }
:root[data-look="violet"] .chat-report__actions { gap: 10px; margin-top: 10px; }
:root[data-look="violet"] .chat-report__actions .btn { height: 50px; padding: 0 22px; }
@media (max-width: 1080px) {
    :root[data-look="violet"] .chat-report__actions .btn { flex: 1 1 0; min-width: 0; }
}

/* GIFs: a search pill, three across, rounded tiles. */
:root[data-look="violet"] .gif-picker__search { gap: 8px; margin: 12px 0 6px; }
:root[data-look="violet"] .gif-picker__search .inp { height: 46px; border-radius: var(--r-pill); padding: 0 18px; }
:root[data-look="violet"] .gif-picker__search .btn { height: 46px; }
:root[data-look="violet"] .gif-picker__status { color: var(--ink-2); }
:root[data-look="violet"] .gif-picker__results { gap: 6px; }
/* The picture never sizes the tile (rows keep each tile's full height:
   brotein.css's grid-auto-rows, a bug fix for both looks). */
:root[data-look="violet"] .gif-picker__result { position: relative; border: 0; border-radius: var(--r-field); background: var(--bg-2); transition: transform var(--dur-fast) ease; }
:root[data-look="violet"] .gif-picker__result img { position: absolute; inset: 0; }
:root[data-look="violet"] .gif-picker__result:active { transform: scale(0.97); }
:root[data-look="violet"] .gif-picker__result:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:root[data-look="violet"] .gif-picker__foot { color: var(--ink-3); font-size: 0.78rem; }

/* Emoji: seven across, each at least 44px, on the raised fill. */
:root[data-look="violet"] .emoji-picker__grid { gap: 6px; margin-top: 12px; }
:root[data-look="violet"] .emoji-picker__choice { min-height: 44px; border: 1px solid transparent; border-radius: var(--r-field); background: var(--surface-2); }
:root[data-look="violet"] .emoji-picker__choice:hover, :root[data-look="violet"] .emoji-picker__choice:focus-visible { border-color: var(--accent-text); background: var(--accent-soft); outline: none; }

/* ---- 8f. progress stories (Home's rings open these) ----------------------- */

/* The viewer: the photo as a feature card on the darkest warm base, round
   glass buttons on it, a fill that fades violet into white, the reply as a
   glass pill. */
:root[data-look="violet"] .progress-story-viewer, :root[data-look="violet"] .progress-story-viewer::backdrop { background: var(--page-end); }
:root[data-look="violet"] .progress-story-viewer__brand { font-family: var(--font-display); font-stretch: 112%; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.03em; }
:root[data-look="violet"] :is(.progress-story-viewer__close, .progress-story-viewer__nav, .progress-story-viewer__delete) {
    width: 44px; height: 44px; border: 1px solid var(--glass-edge); border-radius: 50%; background: var(--glass); color: #fff; font-size: 1.25rem;
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
/* The close sits on the plain dark beside the photo on a phone: the page's round, not glass. */
:root[data-look="violet"] .progress-story-viewer__close {
    border-color: var(--edge-strong); background: rgba(255, 255, 255, 0.08); font-size: 1.3rem;
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
:root[data-look="violet"] .progress-story-viewer__close:hover { background: rgba(255, 255, 255, 0.14); }
:root[data-look="violet"] .progress-story-viewer__nav { font-size: 1.15rem; }
:root[data-look="violet"] .progress-story-viewer__delete:hover { background: var(--glass); color: var(--bad); }
:root[data-look="violet"] :is(.progress-story-viewer__close, .progress-story-viewer__nav, .progress-story-viewer__delete, .progress-story-viewer__like):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:root[data-look="violet"] .progress-story-viewer__stage { border-radius: var(--r-feature); background: var(--photo-base); box-shadow: var(--shadow-lg); }
@media (max-width: 1099px) {
    /* The photo keeps clear of the close and the name above it, even on a short
       phone (it used to slide under them), and of the notch and the home bar. */
    :root[data-look="violet"] .progress-story-viewer__stage {
        top: calc(50% + 30px + (env(safe-area-inset-top) - env(safe-area-inset-bottom)) / 2);
        width: min(420px, calc((100dvh - 92px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 0.5625), calc(100vw - 24px));
    }
}
:root[data-look="violet"] .progress-story-viewer__stage::after { background: linear-gradient(180deg, rgba(var(--scrim-rgb), 0.55), rgba(var(--scrim-rgb), 0) 26%, rgba(var(--scrim-rgb), 0) 70%, rgba(var(--scrim-rgb), 0.3)); }
:root[data-look="violet"] .progress-story-viewer__stage::before { height: 160px; background: linear-gradient(0deg, rgba(var(--scrim-rgb), 0.6), rgba(var(--scrim-rgb), 0)); }
:root[data-look="violet"] .progress-story-viewer__image { filter: var(--photo-filter); }
:root[data-look="violet"] .progress-story-viewer__progress { top: 14px; left: 14px; right: 14px; height: 4px; background: rgba(255, 255, 255, 0.28); }
:root[data-look="violet"] .progress-story-viewer__progress span { background: var(--violet-fade); }
:root[data-look="violet"] .progress-story-viewer__head { top: 30px; left: 16px; right: 16px; gap: 12px; }
:root[data-look="violet"] .progress-story-viewer__head .av { width: 40px; height: 40px; border: 0; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }
:root[data-look="violet"] .progress-story-viewer__author { text-shadow: 0 1px 6px rgba(var(--scrim-rgb), 0.8); }
:root[data-look="violet"] .progress-story-viewer__author b { font-size: 1rem; font-weight: 600; }
:root[data-look="violet"] .progress-story-viewer__author span { color: rgba(255, 255, 255, 0.9); font-size: 0.8rem; }
:root[data-look="violet"] .progress-story-viewer__nav.is-previous { left: 12px; }
:root[data-look="violet"] .progress-story-viewer__nav.is-next { right: 12px; }
:root[data-look="violet"] .progress-story-viewer__like[aria-pressed="true"] { color: var(--bad); }
:root[data-look="violet"] .progress-story-like-burst { color: var(--bad); }
:root[data-look="violet"] .progress-story-like-burst svg { fill: var(--bad); }
:root[data-look="violet"] .progress-story-reply { right: 14px; bottom: 16px; }
:root[data-look="violet"] .progress-story-reply input {
    height: 48px; border: 1px solid var(--glass-edge); background: var(--glass); font-size: 16px;
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
:root[data-look="violet"] .progress-story-reply input::placeholder { color: rgba(255, 255, 255, 0.9); }
:root[data-look="violet"] .progress-story-reply input:focus { border-color: var(--focus); background: rgba(var(--scrim-rgb), 0.72); }
:root[data-look="violet"] .progress-story-reply button { min-width: 64px; height: 44px; padding: 0 16px; border-radius: var(--r-pill); background: var(--violet-fill); color: #fff; }
:root[data-look="violet"] .progress-story-neighbor { border-radius: var(--r-row); background: var(--photo-base); }
:root[data-look="violet"] .progress-story-neighbor img { filter: var(--photo-filter) brightness(0.8); }

/* The composer: a card with the 9:16 stage in a dashed violet frame, round
   tools on the photo, the text controls on a sunken panel. */
:root[data-look="violet"] .progress-story-compose { padding: 22px; }
:root[data-look="violet"] .progress-story-compose form { gap: var(--gap-group); }
@media (max-width: 1080px) {
    /* On a phone a bottom sheet like every other popup: top corners only, up
       from the home bar, clear of the notch. It keeps its own round close
       (ui.js gives the others their handle and close; see the report). */
    :root[data-look="violet"] dialog.progress-story-compose {
        width: 100%; max-width: none; margin: auto 0 0; max-height: calc(100dvh - env(safe-area-inset-top) - 12px);
        padding: 22px 18px calc(18px + env(safe-area-inset-bottom));
        border-width: 1px 0 0; border-radius: var(--r-feature) var(--r-feature) 0 0; box-shadow: 0 -12px 40px rgba(var(--scrim-rgb), 0.45);
    }
    :root[data-look="violet"] dialog.progress-story-compose[open] { animation: v-story-sheet-in 420ms var(--ease-out); }
    /* Ready for that: with ui.js's top bar (handle and close) the bar sits where
       the padding was and the heading's own close goes (e. popups). */
    :root[data-look="violet"] dialog.progress-story-compose:has(> .sheet-top) { padding-top: 0; }
    :root[data-look="violet"] dialog.progress-story-compose > .sheet-top { height: auto; margin: 0 -6px 4px; padding: 10px 0 0; }
}
@keyframes v-story-sheet-in { from { transform: translateY(100%); } }
:root[data-look="violet"] .progress-story-compose__head .sub { margin-top: 8px; color: var(--ink-2); font-size: 0.92rem; line-height: 1.45; }
:root[data-look="violet"] .story-editor__stage { border-radius: var(--r-row); background: var(--bg-2); }
:root[data-look="violet"] .story-editor__choose { gap: 4px; border: 2px dashed rgba(var(--violet-rgb), 0.55); color: var(--ink-2); }
:root[data-look="violet"] .story-editor__choose:hover,
:root[data-look="violet"] .progress-story-compose:has(#progressStoryFile:focus-visible) .story-editor__choose { border-color: var(--violet-2); background: rgba(var(--violet-rgb), 0.1); }
:root[data-look="violet"] .story-editor__choose i { width: 56px; height: 56px; margin-bottom: 8px; background: var(--accent-soft); color: var(--accent-text); }
:root[data-look="violet"] .story-editor__choose b { font-size: 1rem; }
:root[data-look="violet"] .story-editor__choose span { color: var(--ink-2); font-size: 0.82rem; }
:root[data-look="violet"] .story-editor__tool {
    width: 44px; height: 44px; border: 1px solid var(--glass-edge); background: var(--glass); color: #fff;
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
:root[data-look="violet"] .story-editor__tool:hover { background: rgba(var(--scrim-rgb), 0.75); }
:root[data-look="violet"] .story-editor__tool:focus-visible, :root[data-look="violet"] .story-editor__done:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:root[data-look="violet"] .story-editor__edit { background: rgba(var(--scrim-rgb), 0.6); }
:root[data-look="violet"] .story-editor__done { height: 44px; padding: 0 18px; background: #fff; color: #5a3be0; }
:root[data-look="violet"] .story-controls { gap: 14px; padding: 14px; border: 1px solid var(--edge); border-radius: var(--r-row); background: var(--bg-2); }
/* Colour dots: 34px, each with a 44px tap box. */
:root[data-look="violet"] .story-swatches { gap: 10px; }
:root[data-look="violet"] .story-swatch { width: 34px; height: 34px; border: 3px solid var(--bg-2); box-shadow: 0 0 0 1px var(--line-2); }
:root[data-look="violet"] .story-swatch::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
:root[data-look="violet"] .story-swatch[aria-pressed="true"], :root[data-look="violet"] .story-swatch.is-active { box-shadow: 0 0 0 2px var(--accent-text); transform: none; }
:root[data-look="violet"] .story-swatch:hover { transform: none; box-shadow: 0 0 0 1px var(--ink-3); }
:root[data-look="violet"] .story-swatch[aria-pressed="true"]:hover { box-shadow: 0 0 0 2px var(--accent-text); }
:root[data-look="violet"] :is(.story-swatch:focus-visible, .story-swatch:has(input:focus-visible)) { outline: 2px solid var(--focus); outline-offset: 3px; }
:root[data-look="violet"] :is(.story-bg-toggle, .story-remove) { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink); }
:root[data-look="violet"] :is(.story-bg-toggle, .story-remove):hover { background: var(--line-2); }
:root[data-look="violet"] .story-bg-toggle[aria-pressed="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent-text); color: var(--accent-text); }
:root[data-look="violet"] .story-remove:hover { background: var(--bad-soft); color: var(--bad); }
:root[data-look="violet"] :is(.story-bg-toggle, .story-remove, .story-size input):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:root[data-look="violet"] .story-size { color: var(--ink-2); }
:root[data-look="violet"] .story-size input { height: 44px; accent-color: #8f74ff; }
:root[data-look="violet"] .progress-story-status { color: var(--ink-2); }
:root[data-look="violet"] .progress-story-status.is-error { color: var(--bad); }
:root[data-look="violet"] .progress-story-compose__actions .btn { height: 50px; }

/* ---- 8g. Referrals --------------------------------------------------------
   Your code first: a coupon to copy, how far it has got you, the reward once
   thirty friends joined (the violet card), then a friend's code, then who
   joined with yours as rows with their faces.
   -------------------------------------------------------------------------- */

:root[data-look="violet"] .referrals-page { max-width: 640px; }
:root[data-look="violet"] .referrals-page .referral-card { gap: var(--gap-group); margin-top: var(--gap-list) !important; padding: 20px; }
:root[data-look="violet"] .referrals-page .referral-card:first-of-type { margin-top: 0 !important; }
:root[data-look="violet"] .referrals-page .referral-card h2 {
    margin: 0; font-family: var(--font-display); font-stretch: 108%; font-size: var(--title-card); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
}
:root[data-look="violet"] .referrals-page .referral-card .sub { margin: 6px 0 0; color: var(--ink-2); font-size: 0.92rem; line-height: 1.5; }
:root[data-look="violet"] .referrals-page .referral-note { margin: 0; color: var(--ink-2); font-size: 0.9rem; line-height: 1.5; }
:root[data-look="violet"] .referrals-page .referral-note:empty { display: none; }
:root[data-look="violet"] .referrals-page .status { margin: 0; font-size: 0.9rem; font-weight: 500; }
:root[data-look="violet"] .referrals-page .status.ok { color: var(--ok); }
:root[data-look="violet"] .referrals-page .status.bad { color: var(--bad); }

/* The code: big and spaced, in a dashed violet coupon; Copy link leads. */
:root[data-look="violet"] .referrals-page .referral-code { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
:root[data-look="violet"] .referrals-page .referral-code .inp {
    grid-column: 1 / -1; height: 72px; padding: 0 16px; border: 1.5px dashed rgba(var(--violet-rgb), 0.55); border-radius: var(--r-block);
    background: rgba(var(--violet-rgb), 0.08); color: var(--ink); font-family: var(--font-display); font-stretch: 108%;
    font-size: 1.9rem; font-weight: 800; letter-spacing: 0.08em; text-align: center; font-variant-numeric: tabular-nums;
}
:root[data-look="violet"] .referrals-page .referral-code .inp:focus { border-style: solid; border-color: var(--focus); }
:root[data-look="violet"] .referrals-page .referral-code .btn { height: 52px; gap: 8px; padding: 0 16px; font-size: 0.95rem; }
:root[data-look="violet"] .referrals-page .referral-code .btn svg.ico { width: 18px; height: 18px; }
:root[data-look="violet"] .referrals-page .referral-code .btn.quiet { border-color: var(--edge-strong); background: var(--surface-2); }
:root[data-look="violet"] .referrals-page .referral-code .btn.quiet:hover { background: var(--line-2); }
:root[data-look="violet"] .referrals-page #createCode { width: 100%; height: 50px; }
:root[data-look="violet"] .referrals-page .referral-empty { margin: 0; padding: 14px 16px; border-radius: var(--r-row); background: var(--surface-2); color: var(--ink-2); font-size: 0.92rem; line-height: 1.5; }
/* How far the code has got: thirty friends unlock thirty days of Premium. */
/* !important: a v-only block shows with display: revert !important. Left
   empty (no code yet), it isn't shown at all. */
:root[data-look="violet"] .referrals-page .ref-progress.v-only { display: grid !important; gap: 12px; padding-top: var(--gap-group); border-top: 1px solid var(--divider); }
:root[data-look="violet"] .referrals-page .ref-progress.v-only:empty { display: none !important; }
:root[data-look="violet"] .referrals-page .ref-progress-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
:root[data-look="violet"] .referrals-page .ref-progress-top b { font-size: 1rem; font-weight: 600; }
:root[data-look="violet"] .referrals-page .ref-progress-top span { color: var(--ink-2); font-size: 0.9rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
:root[data-look="violet"] .referrals-page .ref-track { height: 10px; overflow: hidden; border-radius: var(--r-pill); background: var(--bg-2); }
:root[data-look="violet"] .referrals-page .ref-track i { display: block; height: 100%; min-width: 10px; border-radius: inherit; background: var(--violet-fade); transform-origin: left; }

/* The reward: the violet-tinted card for an offer (the look's tint recipe,
   so it follows the background options), with the white block button the
   look keeps for a money step. */
:root[data-look="violet"] .referrals-page .referral-reward {
    position: relative; isolation: isolate; overflow: hidden; border-color: transparent; color: var(--ink);
    background: var(--tint-fill); box-shadow: inset 0 0 0 1px var(--tint-edge);
}
:root[data-look="violet"] .referrals-page .referral-reward #claimRewardButton { height: 52px; border-radius: var(--r-block); background: #fff; box-shadow: var(--violet-glow); color: #5a3be0; font-size: 1rem; font-weight: 700; }
:root[data-look="violet"] .referrals-page .referral-reward #claimRewardButton:hover { background: #f1edff; }
:root[data-look="violet"] .referrals-page .referral-reward #claimRewardButton:active { background: #e6deff; transform: scale(0.98); }

/* A friend's code: the field and a quiet filled button (the code's Copy link leads the page). */
:root[data-look="violet"] .referrals-page .referral-form { gap: 10px; }
:root[data-look="violet"] .referrals-page .referral-form label { margin-bottom: 8px; color: var(--ink-2); font-size: 0.84rem; }
:root[data-look="violet"] .referrals-page .referral-form .inp { height: 52px; }
:root[data-look="violet"] .referrals-page #redeemButton { height: 52px; padding: 0 22px; border: 1px solid var(--edge-strong); background: var(--surface-2); box-shadow: none; color: var(--ink); }
:root[data-look="violet"] .referrals-page #redeemButton:hover { background: var(--line-2); }

/* Who joined with your code: a section on the page, a row card per person. */
:root[data-look="violet"] .referrals-page .referral-history { margin-top: var(--gap-section) !important; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; gap: 0; }
:root[data-look="violet"] .referrals-page .referral-history h2 { display: flex; align-items: center; min-height: 44px; font-size: var(--title-sec); }
:root[data-look="violet"] .referrals-page .referral-history .sub { margin: 0 0 var(--gap-group); }
:root[data-look="violet"] .referrals-page .referral-list { gap: var(--gap-list); }
:root[data-look="violet"] .referrals-page .referral-person {
    flex-direction: row; align-items: center; gap: 12px; min-height: 64px; padding: 10px 16px 10px 10px;
    border: 1px solid var(--edge); border-radius: var(--r-row); background: var(--card-fill);
}
:root[data-look="violet"] .referrals-page .ref-initial {
    flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2);
    color: var(--accent-text); font-family: var(--font-display); font-stretch: 108%; font-size: 1.1rem; font-weight: 800;
}
:root[data-look="violet"] .referrals-page .referral-person b { flex: 1; min-width: 0; overflow: hidden; font-size: 1rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
:root[data-look="violet"] .referrals-page .referral-person span:not(.ref-initial) { color: var(--ink-2); font-size: 0.86rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
:root[data-look="violet"] .referrals-page .referral-history .referral-empty { padding: 18px 16px; border: 1px solid var(--edge); background: var(--card-fill); text-align: center; }

@media (max-width: 480px) {
    :root[data-look="violet"] .referrals-page .referral-code { grid-template-columns: 1fr 1fr; }
    :root[data-look="violet"] .referrals-page .referral-person { flex-direction: row; align-items: center; }
}
@media (max-width: 380px) {
    :root[data-look="violet"] .referrals-page .referral-code .inp { font-size: 1.6rem; }
}

/* ---- 8h. less motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    :root[data-look="violet"] dialog.progress-story-compose[open] { animation: none; }
    :root[data-look="violet"] :is(.social-mess .ci, .gif-picker__result, .social-mess .composer .send-btn) { transition: none; }
    :root[data-look="violet"] :is(.social-mess .ci, .gif-picker__result, .social-mess .composer .send-btn):active { transform: none; }
}

/* ==========================================================================
   9. Train: Exercise forms (exercises.html) with the form sheet and the
   picker every page opens (exercise-library.js), the Calendar, Workout plan,
   My plans, Build your own plan, Achievements and Calculators, with the quick
   setup sheet (questionnaire.js). Built on Workout's own pieces (.vx-card,
   .vx-th, .vx-pill, .vx-rule, section 6), so the training screens read as one
   family; the pages' VIOLET branches add the markup.

   9a. shared pieces       9d. Calculators           9g. My plans
   9b. Exercise forms      9e. Build your own plan   9h. Calendar
   9c. Achievements        9f. Workout plan          9i. computer, small phones, motion
   ========================================================================== */

/* ---- 9a. shared ----------------------------------------------------------- */

/* An exercise, the one recipe every training screen uses: Workout's card
   (.vx-card, .vx-th, .ex-target, .vx-last and the round .ex-icon from
   section 6), so a lift reads the same on Workout, the Calendar and
   Build your own plan. The photo with its number, the name, its sets in
   words, How to do it and Swap on the right. Where a screen can take an
   exercise out, Remove is quiet: a round x at the end of the sets row (Build
   your own plan, .vt-ex-x), or a word under the sets (Calendar, .vt-ex-rm). */
/* (.vx-card.vt-ex: two classes, so these win over Workout's own card rules.) */
:root[data-look="violet"] .vx-card.vt-ex { grid-template-areas: "th body acts"; align-items: start; }
:root[data-look="violet"] .vt-ex > .vx-th { grid-area: th; }
:root[data-look="violet"] .vt-ex .vx-th img { filter: var(--photo-filter); }
/* The words sit level with the photo, however tall the buttons beside them. */
:root[data-look="violet"] .vt-ex-body { grid-area: body; display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 96px; }
:root[data-look="violet"] .vt-ex-body :is(h3, h5) { margin: 0; font-family: var(--font-ui); font-stretch: 100%; font-size: 1.12rem; line-height: 22px; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); text-wrap: balance; overflow-wrap: anywhere; }
:root[data-look="violet"] .vt-ex-body .ex-target { margin: 2px 0 0; font-size: 0.88rem; line-height: 18px; color: var(--ink-2); }
:root[data-look="violet"] .vt-ex-body .vx-last b { white-space: normal; }
:root[data-look="violet"] .vt-ex-body .ex-alt { margin: 4px 0 0; font-size: 0.84rem; line-height: 18px; color: var(--ink-2); }
:root[data-look="violet"] .vt-ex > .ex-icons { grid-area: acts; display: flex; flex-direction: column; gap: 8px; }
:root[data-look="violet"] .vt-ex .ex-icon { border: 0; background: var(--surface-2); color: var(--ink); }
:root[data-look="violet"] .vt-ex .ex-icon:hover { background: var(--line-2); }
:root[data-look="violet"] .vt-ex .ex-icon:active { background: var(--line-2); transform: scale(0.95); }
:root[data-look="violet"] .vt-ex-x {
    flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--line-2); border-radius: 50%; background: transparent; color: var(--ink-2); font-size: 1.05rem; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: background-color var(--dur) ease, color var(--dur) ease, border-color var(--dur) ease;
}
:root[data-look="violet"] .vt-ex-x:hover { border-color: transparent; background: var(--bad-soft); color: var(--bad); }
:root[data-look="violet"] .vt-ex-x:active { transform: scale(0.95); }
/* The Calendar's Remove: a quiet word under the sets, its 44px box reaching into the card's padding. */
:root[data-look="violet"] .vt-ex-rm {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 44px; margin: 0 0 -12px -12px; padding: 0 12px;
    border: 0; border-radius: var(--r-pill); background: none; color: var(--ink-2); font: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: background-color var(--dur) ease, color var(--dur) ease;
}
:root[data-look="violet"] .vt-ex-rm i { font-size: 0.95rem; }
:root[data-look="violet"] .vt-ex-rm:hover { background: var(--bad-soft); color: var(--bad); }
:root[data-look="violet"] .vt-ex :is(.ex-icon, .vt-ex-x, .vt-ex-rm):disabled { opacity: 0.45; cursor: default; }

/* ---- 9b. Exercise forms, the form sheet and the picker -------------------- */

/* The page: no card around it. A large search field, the body parts as a
   row of chips running edge to edge, then a card per exercise. */
:root[data-look="violet"] .card.ex-library { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
:root[data-look="violet"] .ex-search-wrap > i { left: 16px; font-size: 1.2rem; color: var(--ink-2); }
:root[data-look="violet"] .inp.ex-search { height: 50px; padding-left: 46px; font-size: 16px; }
:root[data-look="violet"] .ex-library .ex-search-wrap { max-width: none; }
:root[data-look="violet"] .ex-library .ex-parts { flex-wrap: nowrap; gap: 8px; margin: 14px -18px 0; padding: 2px 18px 4px; overflow-x: auto; scrollbar-width: none; }
:root[data-look="violet"] .ex-library .ex-parts::-webkit-scrollbar { display: none; }
:root[data-look="violet"] .ex-library .ex-msg { margin: 16px 0 6px; padding: 22px 20px; border: 1px solid var(--edge); border-radius: var(--r-card); background: var(--card-fill); color: var(--ink-2); }
:root[data-look="violet"] .ex-results.is-grid { gap: var(--gap-list); margin-top: 16px; }
:root[data-look="violet"] .ex-row {
    grid-template-columns: 64px minmax(0, 1fr) 32px; gap: 14px; min-height: 82px; padding: 8px 14px 8px 8px;
    border: 1px solid var(--edge); border-radius: var(--r-row); background: var(--card-fill);
    -webkit-tap-highlight-color: transparent; transition: transform var(--dur-fast) ease, border-color var(--dur) ease;
}
:root[data-look="violet"] .ex-row:hover { border-color: var(--edge-strong); background: var(--card-fill); }
:root[data-look="violet"] .ex-row:active { transform: scale(0.99); }
:root[data-look="violet"] .ex-row .ex-thumb,
:root[data-look="violet"] .ex-item .ex-thumb {
    width: 64px; height: 64px; border-radius: var(--r-field); background: var(--surface-2); color: var(--accent-text); font-size: 1.5rem;
}
:root[data-look="violet"] .ex-row:hover .ex-thumb { background: var(--surface-2); }
:root[data-look="violet"] :is(.ex-row, .ex-item) .ex-thumb img { filter: var(--photo-filter); }
:root[data-look="violet"] .ex-row-text b { font-size: 1rem; font-weight: 600; line-height: 1.3; }
:root[data-look="violet"] .ex-row-text small { margin-top: 3px; font-size: 0.84rem; color: var(--ink-2); }
:root[data-look="violet"] .ex-more { margin-top: 16px; }
:root[data-look="violet"] .ex-more .btn { width: 100%; max-width: 360px; height: 50px; border-radius: var(--r-block); }

/* The form sheet: the name large, the muscle and the kit as chips, the
   photos on a large rounded frame with glass labels, numbered steps. */
:root[data-look="violet"] .ex-form-sheet .ex-form-head h3 { font-size: 1.75rem; line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }
:root[data-look="violet"] .ex-shown { margin-top: 6px; font-size: 0.86rem; color: var(--ink-2); }
:root[data-look="violet"] .ex-meta { margin-top: 14px; }
:root[data-look="violet"] .ex-meta .tag { gap: 6px; }
:root[data-look="violet"] .ex-also { margin-top: 10px; font-size: 0.9rem; color: var(--ink-2); }
:root[data-look="violet"] .ex-form-body { margin-top: 20px; }
:root[data-look="violet"] .ex-photo { margin-bottom: 22px; border-radius: var(--r-card); background: var(--photo-base); box-shadow: inset 0 0 0 1px var(--edge); }
:root[data-look="violet"] .ex-photo img { filter: saturate(0.92) contrast(1.04); }
:root[data-look="violet"] .ex-photo figcaption {
    left: 12px; top: 12px; height: 30px; padding: 0 12px; border: 1px solid var(--glass-edge); background: var(--glass); box-shadow: none;
    color: #fff; font-size: 0.8rem; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
:root[data-look="violet"] .ex-steps { gap: 14px; }
:root[data-look="violet"] .ex-steps li { grid-template-columns: 30px minmax(0, 1fr); gap: 14px; font-size: 0.98rem; line-height: 1.55; color: var(--ink); }
:root[data-look="violet"] .ex-steps li::before { width: 30px; height: 30px; margin-top: -2px; background: var(--surface-2); color: var(--ink); font-size: 0.84rem; }
:root[data-look="violet"] .ex-none { color: var(--ink-2); }
:root[data-look="violet"] .ex-fail { padding: 14px 16px; background: var(--surface-2); color: var(--ink-2); }
:root[data-look="violet"] .ex-form-sheet .sheet-actions { gap: 14px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--divider); }
:root[data-look="violet"] .ex-credit { font-size: 0.78rem; color: var(--ink-3); }
:root[data-look="violet"] .ex-credit a:hover { color: var(--ink); }

/* The picker: the search and the chips stay at the top, each exercise is a
   row of its own with its photo, How to do it is a round button. */
:root[data-look="violet"] .ex-pick-head { background: linear-gradient(rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.035)), var(--surface); box-shadow: 0 1px 0 var(--divider); }
/* On a phone the sheet's own close button is in its top bar; the second one goes. */
@media (max-width: 1080px) {
    :root[data-look="violet"] .ex-pick-top .sheet-actions { display: none; }
}
:root[data-look="violet"] .ex-pick-top h3 { margin: 0; }
:root[data-look="violet"] .ex-picker .ex-parts { gap: 8px; }
:root[data-look="violet"] .ex-picker .ex-results { display: grid; gap: 8px; margin-top: 12px; }
:root[data-look="violet"] .ex-picker .ex-item {
    gap: 8px; padding: 6px 8px 6px 6px; border: 1px solid var(--edge); border-radius: var(--r-row);
    background: rgba(255, 255, 255, 0.04);
}
:root[data-look="violet"] .ex-picker .ex-item:last-child { border-bottom: 1px solid var(--edge); }
:root[data-look="violet"] .ex-picker .ex-item-name { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0; }
:root[data-look="violet"] .ex-picker .ex-item .ex-thumb { flex: none; display: grid; place-items: center; overflow: hidden; width: 56px; height: 56px; }
:root[data-look="violet"] .ex-picker .ex-item .ex-thumb img { width: 100%; height: 100%; object-fit: cover; }
:root[data-look="violet"] .ex-picker .ex-item-name > span:last-child { min-width: 0; }
:root[data-look="violet"] .ex-picker .ex-item-name b { font-size: 0.98rem; }
:root[data-look="violet"] .ex-picker .ex-item-name small { font-size: 0.82rem; color: var(--ink-2); }
:root[data-look="violet"] .ex-picker .ex-item-name:hover b { text-decoration: none; }
:root[data-look="violet"] .ex-picker .ex-item:has(.ex-item-name:hover) { border-color: var(--edge-strong); }
:root[data-look="violet"] .ex-item-form { flex: none; font-size: 1.2rem; }
:root[data-look="violet"] .ex-picker .ex-msg { margin-top: 20px; }

/* ---- 9c. Achievements ----------------------------------------------------- */

/* The tally: the count large beside a violet trophy, a bar, the XP under it. */
:root[data-look="violet"] .achpage .card.tally {
    grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "medal count" "medal label" "bar bar" "xp xp";
    align-items: center; gap: 0 14px; padding: 18px; border-radius: var(--r-card);
}
:root[data-look="violet"] .achpage .tally > div:not(.tally-track) { display: contents; }
:root[data-look="violet"] .achpage .tally > .vt-medal { grid-area: medal; width: 56px; height: 56px; font-size: 1.6rem; }
:root[data-look="violet"] .achpage #tallyCount { grid-area: count; align-self: end; font-stretch: 108%; font-size: 2.4rem; font-variant-numeric: tabular-nums; }
:root[data-look="violet"] .achpage #tallyCount small { margin-left: 2px; font-family: var(--font-ui); font-stretch: 100%; font-size: 1.05rem; font-weight: 600; letter-spacing: 0; color: var(--ink-2); }
:root[data-look="violet"] .achpage .tally > .sub { grid-area: label; align-self: start; margin: 4px 0 0; font-size: 0.92rem; color: var(--ink-2); }
:root[data-look="violet"] .achpage .tally .tally-track { grid-area: bar; height: 10px; margin-top: 16px; background: var(--bg-2); }
:root[data-look="violet"] .achpage #tallyXp { grid-area: xp; margin-top: 10px; font-size: 0.86rem; color: var(--ink-2); }
:root[data-look="violet"] .achpage .whose { margin-top: 8px; font-size: 1rem; color: var(--ink-2); font-weight: 500; }

/* The three lists: a heading with a count over cards of their own. */
:root[data-look="violet"] .achpage .card.sect { margin-top: var(--gap-section); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
:root[data-look="violet"] .achpage .sect > h2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin: 0 0 10px; font-size: var(--title-sec); }
:root[data-look="violet"] .achpage .vt-count { font-family: var(--font-ui); font-stretch: 100%; font-size: 0.9rem; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
:root[data-look="violet"] .achpage .ach-grid { gap: var(--gap-list); }
:root[data-look="violet"] .achpage #earnedNote { padding: 16px 18px; border: 1px solid var(--edge); border-radius: var(--r-row); background: var(--card-fill); color: var(--ink-2); }

/* Earned: a tile each. */
:root[data-look="violet"] .achpage .ach.vt-ach { display: flex; flex-direction: column; align-items: flex-start; padding: 16px 16px 14px; border: 1px solid var(--edge); border-radius: var(--r-row); background: var(--card-fill); }
:root[data-look="violet"] .achpage .vt-ach .vt-medal { margin-bottom: 14px; }
:root[data-look="violet"] .achpage .vt-ach b { color: var(--ink); font-size: 1rem; font-weight: 600; line-height: 1.3; }
:root[data-look="violet"] .achpage .vt-ach .ach-note { margin-top: 3px; font-size: 0.84rem; line-height: 1.4; color: var(--ink-2); }
:root[data-look="violet"] .achpage .vt-ach-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; margin-top: auto; padding-top: 14px; }
:root[data-look="violet"] .achpage .vt-ach .ach-when { margin: 0; font-size: 0.8rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Still to earn and Earn again: a row each, the XP on the right. */
:root[data-look="violet"] .achpage #lockedGrid,
:root[data-look="violet"] .achpage #repeatGrid { grid-template-columns: minmax(0, 1fr); }
:root[data-look="violet"] .achpage .ach.vt-ach-row { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 12px 16px 12px 12px; border: 1px solid var(--edge); border-radius: var(--r-row); background: var(--card-fill); opacity: 1; }
:root[data-look="violet"] .achpage .vt-ach-t { flex: 1; min-width: 0; }
:root[data-look="violet"] .achpage .vt-ach-t b { display: block; color: var(--ink); font-size: 1rem; font-weight: 600; line-height: 1.3; }
:root[data-look="violet"] .achpage .vt-ach-t small { display: block; margin-top: 2px; font-size: 0.84rem; line-height: 1.4; color: var(--ink-2); }
:root[data-look="violet"] .achpage .vt-every { color: var(--ink); font-weight: 600; }
:root[data-look="violet"] .achpage .vt-ach-row em { flex: none; font-style: normal; font-size: 0.86rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
:root[data-look="violet"] .achpage .vt-ach-row.is-repeat em { color: var(--accent-text); }

/* Logged out, or nobody by that name: one kind line on a quiet card. */
:root[data-look="violet"] .achpage .card.notice { padding: 32px 22px; border-radius: var(--r-card); }
:root[data-look="violet"] .achpage .notice h3 { font-size: var(--title-card); }
/* brotein's .ach centres everything and sizes every span; these cards read from the left. */
:root[data-look="violet"] .achpage :is(.vt-ach, .vt-ach-row) { text-align: left; }
:root[data-look="violet"] .achpage :is(.vt-ach, .vt-ach-row) :is(.vt-medal, .vt-ach-t, .vx-pill) { margin-top: 0; }
:root[data-look="violet"] .achpage .vt-ach .vx-pill { font-size: 0.8rem; color: var(--accent-text); }

/* ---- 9d. Calculators and the quick setup sheet ---------------------------- */

/* Your numbers: the same fields, a little tighter, age and height side by side. */
:root[data-look="violet"] .calc { gap: var(--gap-list); }
:root[data-look="violet"] .calc > .card { padding: 18px; border-radius: var(--r-card); }
:root[data-look="violet"] .calc > .card > h3 { margin: 0; }
:root[data-look="violet"] .calc > .card > .sub { margin: 4px 0 0; font-size: 0.92rem; }
:root[data-look="violet"] #calcForm { gap: 16px; margin-top: 18px; }
:root[data-look="violet"] #calcForm .fields.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
:root[data-look="violet"] #calcForm .fld { gap: 8px; }
:root[data-look="violet"] #calcForm .unit { grid-template-columns: minmax(0, 1fr) 128px; gap: 10px; }
:root[data-look="violet"] #calcForm input[type="number"] { -moz-appearance: textfield; font-variant-numeric: tabular-nums; }
:root[data-look="violet"] #calcForm input[type="number"]::-webkit-outer-spin-button,
:root[data-look="violet"] #calcForm input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
:root[data-look="violet"] #workout > button { padding: 0 2px; font-variant-numeric: tabular-nums; }

/* BMI: the arc fills violet into white, the marker is a white dot ringed in the card. */
:root[data-look="violet"] .gauge-wrap { padding-top: 22px; }
:root[data-look="violet"] #gaugeTrack { stroke: rgba(255, 255, 255, 0.08); }
:root[data-look="violet"] #gaugeFill { stroke: url(#vtGaugeFade); }
:root[data-look="violet"] #bmiMarker { fill: #fff; stroke: var(--surface); stroke-width: 4; }
:root[data-look="violet"] .gauge-num b { font-stretch: 108%; font-size: 3rem; font-variant-numeric: tabular-nums; }
:root[data-look="violet"] .gauge-num span { margin-top: 2px; font-size: 0.92rem; font-weight: 500; color: var(--ink-2); }
:root[data-look="violet"] .gauge-sum { margin-top: 16px; font-size: 0.94rem; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

/* Calories and protein: two stat tiles side by side, a round icon over the number. */
:root[data-look="violet"] .vt-kpi-ic { width: 42px; height: 42px; margin: 0 0 14px; border-radius: 50%; background: var(--surface-2); color: var(--accent-text); font-size: 1.35rem; line-height: 42px; text-align: center; }
:root[data-look="violet"] .vt-kpi-ic i { vertical-align: -3px; }
:root[data-look="violet"] .calc .kpi b { font-stretch: 108%; font-size: 2rem; font-variant-numeric: tabular-nums; }
:root[data-look="violet"] .calc .kpi span { margin-top: 4px; font-size: 0.88rem; font-weight: 500; color: var(--ink-2); }
:root[data-look="violet"] .kcal-note { margin-top: 10px; font-size: 0.82rem; line-height: 1.45; color: var(--ink-3); }

/* Where you sit: the four ranges as soft rows; yours carries its colour. */
:root[data-look="violet"] .cats { gap: 6px; margin-top: 14px; }
:root[data-look="violet"] .cats div { align-items: center; min-height: 48px; padding: 0 16px; border-radius: var(--r-field); background: rgba(255, 255, 255, 0.05); color: var(--ink-2); font-size: 0.92rem; font-variant-numeric: tabular-nums; }
:root[data-look="violet"] .cats div.on { background: var(--ok-soft); color: var(--ok); box-shadow: inset 0 0 0 1px rgba(127, 211, 154, 0.35); }
:root[data-look="violet"] .cats div.on.high { background: var(--bad-soft); color: var(--bad); box-shadow: inset 0 0 0 1px rgba(255, 143, 133, 0.35); }

/* Eating for a goal: a choice each, the number large, a round mark on the right
   (the same as the plan's answers). */
:root[data-look="violet"] .goals { gap: 8px; margin-top: 14px; }
:root[data-look="violet"] .goals .tile {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 24px; grid-template-areas: "n mark" "l mark"; align-items: center; gap: 0 12px;
    min-height: 68px; padding: 12px 16px; text-align: left; cursor: pointer;
}
:root[data-look="violet"] .goals .tile b { grid-area: n; font-size: 1.45rem; font-variant-numeric: tabular-nums; }
:root[data-look="violet"] .goals .tile span { grid-area: l; font-size: 0.86rem; }
:root[data-look="violet"] .goals .tile::after { content: ""; grid-area: mark; width: 24px; height: 24px; border: 2px solid var(--line-2); border-radius: 50%; }
:root[data-look="violet"] .goals .tile.on::after { border: 0; background: var(--i-check-white) center / 14px no-repeat, var(--violet-fill); }

@media (max-width: 640px) {
    :root[data-look="violet"] .calc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    :root[data-look="violet"] .calc > .s2 { grid-column: 1 / -1; }
    :root[data-look="violet"] .calc > .card:not(.s2) { padding: 16px; }
}

/* Violet stays an accent in a form: a picked segment loses its glow, and the
   small settings (gender, kg or lb) are picked in soft violet, so the violet
   fill is left to the main choice and the one main button. */

/* The quick setup sheet (questionnaire.js): the shared sheet; the fields a step apart. */
:root[data-look="violet"] .bq-card .fields.two { gap: 14px 12px; }
:root[data-look="violet"] .bq-card .bq-lead { margin-bottom: 20px; }

/* ---- 9e. Build your own plan ---------------------------------------------- */

:root[data-look="violet"] .wb { gap: 0; }
/* Days per week and the ready-made week: one card at the top. */
:root[data-look="violet"] .wb > .card:first-child { padding: 18px; border-radius: var(--r-card); }
:root[data-look="violet"] .wb-h { font-family: var(--font-display); font-stretch: 108%; font-size: var(--title-card); font-weight: 800; letter-spacing: -0.02em; }
:root[data-look="violet"] .wb-days { gap: 12px; }
:root[data-look="violet"] .wb-days .seg { flex: 1 1 100%; }
:root[data-look="violet"] .wb-week { gap: 10px 14px; margin-top: 18px; padding-top: 18px; border-top-color: var(--divider); }
:root[data-look="violet"] .wb-week label { font-size: 0.92rem; color: var(--ink-2); }
:root[data-look="violet"] .wb-select {
    height: 44px; padding: 0 40px 0 16px; border: 1px solid var(--edge); background-color: var(--surface-2);
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
}
:root[data-look="violet"] .wb-select:hover { border-color: var(--edge-strong); }
:root[data-look="violet"] .wb-select:focus { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(var(--violet-rgb), 0.28); }
:root[data-look="violet"] .wb-week .wb-select { flex: 1 1 200px; }

/* A day: no card around it. "Day 1" over its title, the preset menu beside them. */
:root[data-look="violet"] .wb-daylist { gap: 0; }
:root[data-look="violet"] .wb-daylist > .card { margin-top: var(--gap-section); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
:root[data-look="violet"] .wb-day-head { align-items: flex-end; flex-wrap: nowrap; gap: 12px; margin-bottom: 12px; }
:root[data-look="violet"] .vt-wb-day { flex: 1; min-width: 0; }
:root[data-look="violet"] .vt-wb-day .wb-h { font-size: var(--title-sec); }
:root[data-look="violet"] .vt-wb-day:has(.wb-day-title) .wb-h { margin: 0 0 2px; font-family: var(--font-ui); font-stretch: 100%; font-size: 0.72rem; line-height: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
:root[data-look="violet"] .vt-wb-day .wb-day-title { display: block; font-family: var(--font-display); font-stretch: 108%; font-size: var(--title-sec); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); overflow-wrap: anywhere; }
:root[data-look="violet"] .vt-wb-count { display: block; margin-top: 4px; font-size: 0.86rem; color: var(--ink-2); }
:root[data-look="violet"] .wb-day-preset { flex: none; margin: 0; }
:root[data-look="violet"] .wb-day-preset .wb-select { max-width: 184px; padding-right: 36px; }

/* An exercise: the shared card (section a), the sets and the target along
   its foot, Remove at the end of them. */
:root[data-look="violet"] .wb-list { display: grid; gap: var(--gap-list); margin: 0 0 12px; border: 0; }
:root[data-look="violet"] .vx-card.vt-wb-ex { grid-template-areas: "th body acts" "ctl ctl ctl"; gap: 12px 14px; padding: 12px; border-bottom: 0; }
:root[data-look="violet"] .vt-wb-ex .wb-ctl { grid-area: ctl; flex-wrap: nowrap; gap: 6px; padding-top: 12px; border-top: 1px solid var(--divider); }
:root[data-look="violet"] .vt-wb-ex .vt-ex-x { margin-left: auto; }
:root[data-look="violet"] .wb-step,
:root[data-look="violet"] .wb-target { height: 44px; border: 0; background: var(--surface-2); }
:root[data-look="violet"] .wb-step button { width: 44px; color: var(--ink); font-size: 1rem; }
:root[data-look="violet"] .wb-step button:hover { background: var(--line-2); }
:root[data-look="violet"] .wb-step button[aria-disabled="true"] { background: none; color: var(--ink-3); opacity: 0.6; }
:root[data-look="violet"] .wb-sets { min-width: 48px; font-size: 0.9rem; color: var(--ink-2); }
:root[data-look="violet"] .wb-sets b { color: var(--ink); font-family: var(--font-display); font-size: 1.05rem; }
:root[data-look="violet"] .wb-target:focus-within { box-shadow: 0 0 0 2px var(--focus); }
:root[data-look="violet"] .wb-range { width: calc(5ch + 18px); font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; }
:root[data-look="violet"] .wb-unit { min-width: 48px; padding: 0 10px; border-left: 1px solid var(--edge-strong); color: var(--accent-text); font-size: 0.86rem; }
:root[data-look="violet"] .wb-unit:hover { background: var(--line-2); }
:root[data-look="violet"] .wb-none { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 16px; border: 1px solid var(--edge); border-radius: var(--r-row); background: var(--card-fill); color: var(--ink-2); text-align: left; }
:root[data-look="violet"] .wb-none i { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-field); background: var(--surface-2); color: var(--accent-text); font-size: 1.3rem; }
:root[data-look="violet"] .vt-wb-add { width: 100%; height: 50px; border-radius: var(--r-block); }
:root[data-look="violet"] .vt-wb-add i { color: var(--accent-text); font-size: 1.15rem; }
:root[data-look="violet"] .wb-note { color: var(--ink-2); }

/* Saving: the stats it still needs, a hint, the 58px Save. */
:root[data-look="violet"] .wb-save.card { gap: 14px; margin-top: var(--gap-section); padding: 18px; border-radius: var(--r-card); }
:root[data-look="violet"] .wb-save #wbSave { width: 100%; height: 58px; border-radius: var(--r-block); font-size: 1.05rem; font-weight: 700; }
:root[data-look="violet"] .wb-save .status:empty { display: none; }

/* ---- 9f. Workout plan: the questions, the plan, the existing-plan notice ---- */

/* The questions come first; the other way in follows them as a quiet row
   (the page's script moves it after the questions). */
:root[data-look="violet"] .quiz-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; max-width: 720px; margin: var(--gap-section) auto 0; padding: 14px 16px; border: 1px solid var(--edge); border-radius: var(--r-row); background: var(--card-fill); color: var(--ink-2); font-size: 0.94rem; }
:root[data-look="violet"] .quiz-alt[hidden] { display: none; }
:root[data-look="violet"] .quiz-alt { position: relative; }
:root[data-look="violet"] .quiz-alt a { color: var(--accent-text); text-underline-offset: 3px; }
:root[data-look="violet"] .quiz-alt a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* the whole row is the link */
:root[data-look="violet"] .quiz-alt:has(a:hover) { border-color: var(--edge-strong); }

/* The questions sit on the page: a bar of one segment per step, the question
   large, the answers as cards (the intro's questions, in violet). */
:root[data-look="violet"] .card-lg.quiz-panel { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
:root[data-look="violet"] .quiz-head { align-items: center; margin-bottom: 10px; }
:root[data-look="violet"] .quiz-head h2 { font-size: 0.8rem; line-height: 18px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
:root[data-look="violet"] .quiz-step { font-size: 0.86rem; font-weight: 600; color: var(--ink-2); }
:root[data-look="violet"] .quiz-bar {
    height: 6px; border-radius: 0; background: rgba(255, 255, 255, 0.12);
    -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(100% / var(--n, 9) - 5px), transparent calc(100% / var(--n, 9) - 5px) calc(100% / var(--n, 9)));
    mask: repeating-linear-gradient(90deg, #000 0 calc(100% / var(--n, 9) - 5px), transparent calc(100% / var(--n, 9) - 5px) calc(100% / var(--n, 9)));
}
:root[data-look="violet"] .quiz-bar span { border-radius: 0; background: var(--violet-fade); background-size: calc(100% * var(--n, 9) / max(1, var(--n, 9))) 100%; }
:root[data-look="violet"] .quiz-panel .quiz-title { margin: 28px 0 8px; font-stretch: 112%; font-size: 2.1rem; line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
:root[data-look="violet"] .quiz-hint { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
:root[data-look="violet"] .quiz-options { gap: var(--gap-list); margin-top: 22px; }
:root[data-look="violet"] .quiz-option {
    gap: 14px; min-height: 68px; padding: 12px 14px 12px 18px; border-radius: var(--r-row); text-align: left;
    -webkit-tap-highlight-color: transparent; transition: transform var(--dur-fast) ease, background-color var(--dur) ease, border-color var(--dur) ease;
}
:root[data-look="violet"] .quiz-option::after { content: none; }
:root[data-look="violet"] .quiz-option:active { transform: scale(0.99); }
:root[data-look="violet"] .quiz-option-label { font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
:root[data-look="violet"] .quiz-option-note { margin-top: 2px; font-size: 0.88rem; color: var(--ink-2); }
:root[data-look="violet"] .quiz-option.is-none { border-style: solid; }
:root[data-look="violet"] .vt-mark { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); }
:root[data-look="violet"] .vt-mark::before { content: ""; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--i-caret-right) center / contain no-repeat; mask: var(--i-caret-right) center / contain no-repeat; }
:root[data-look="violet"] .quiz-options.is-multi .vt-mark { width: 26px; height: 26px; margin-right: 3px; border: 2px solid var(--line-2); background: none; }
:root[data-look="violet"] .quiz-options.is-multi .vt-mark::before { content: none; }
/* Picked, one of a kind (it moves on by itself): the violet card, white
   words, the mark white with a violet arrow, as the sign-up's questions. */
:root[data-look="violet"] .quiz-options:not(.is-multi) .quiz-option.is-selected { border-color: transparent; background: var(--violet-fill); box-shadow: var(--violet-glow); color: var(--on-violet); }
:root[data-look="violet"] .quiz-options:not(.is-multi) .quiz-option.is-selected .quiz-option-note { color: var(--on-violet-2); }
:root[data-look="violet"] .quiz-options:not(.is-multi) .quiz-option.is-selected .vt-mark { border: 0; background: #fff; color: var(--accent-strong); }
/* Picked, several at once: the choice card (Calculators' goal, the sign-up's
   plans): the light violet tint and rim, a white tick on a violet disc. */
:root[data-look="violet"] .quiz-options.is-multi .quiz-option.is-selected { border-color: transparent; background: var(--tint-fill); box-shadow: inset 0 0 0 1.5px var(--accent-text); color: var(--ink); }
:root[data-look="violet"] .quiz-options.is-multi .quiz-option.is-selected .vt-mark { border: 0; background: var(--i-check-white) center / 14px no-repeat, var(--violet-fill); }
:root[data-look="violet"] .quiz-panel .form-grid { gap: 14px 12px; max-width: none !important; margin-top: 22px !important; }
:root[data-look="violet"] .quiz-actions { gap: 10px; margin-top: 26px; }
:root[data-look="violet"] .quiz-actions .quiz-btn { height: 52px; padding: 0 24px; border-radius: var(--r-pill); font-size: 1rem; font-weight: 700; }
:root[data-look="violet"] .quiz-actions .quiz-btn.primary { flex: 1; max-width: 360px; margin-left: auto; }
/* A pick-one first step has neither Back nor Next: no empty row under its answers. */
:root[data-look="violet"] .quiz-actions:has(#quizBack[hidden]):has(#quizNext[style*="none"]) { display: none; }
:root[data-look="violet"] #quizBack[hidden] { display: none; }
:root[data-look="violet"] .plan-status { margin-top: 14px; }
:root[data-look="violet"] .plan-status:empty { display: none; }
/* Premium needed: an offer on the violet-tinted card, not an error. */
:root[data-look="violet"] .vt-offer { display: grid; justify-items: start; gap: 6px; padding: 18px; text-align: left; }
:root[data-look="violet"] .vt-offer b { font-family: var(--font-display); font-stretch: 108%; font-size: var(--title-card); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); }
:root[data-look="violet"] .vt-offer p { margin: 0; font-size: 0.94rem; line-height: 1.5; color: var(--ink-2); font-weight: 400; }
:root[data-look="violet"] .vt-offer .btn { width: 100%; height: 50px; margin-top: 10px; text-decoration: none; }
:root[data-look="violet"] .vt-offer small { justify-self: center; font-size: 0.8rem; color: var(--ink-3); }
:root[data-look="violet"] .plan-modal-card .vt-offer { margin-top: 4px; }
:root[data-look="violet"] .plan-status.error { color: var(--bad); font-weight: 600; }
:root[data-look="violet"] .plan-status.success { color: var(--ok); }
:root[data-look="violet"] .page-head .tag.grad { flex: none; height: 30px; border: 0; background: var(--accent-soft); box-shadow: none; color: var(--accent-text); }
:root[data-look="violet"] .page-head .tag.grad .ico { --ico-accent: var(--accent-text); }
/* You already have a plan: on a phone the two actions share the row. */
@media (max-width: 1080px) {
    :root[data-look="violet"] .plan-modal-actions { display: flex; gap: 10px; }
    :root[data-look="violet"] .plan-modal-actions > * { flex: 1; height: 50px; justify-content: center; }
}

/* The plan, once built: what My plans shows a moment later (section g): three
   chips and a line, then a card per day opening onto its exercises. */
:root[data-look="violet"] .card-lg.result { margin-top: var(--gap-section); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
:root[data-look="violet"] .result > h2 { font-stretch: 112%; font-size: var(--title-m); line-height: 1.02; letter-spacing: -0.04em; }
:root[data-look="violet"] .result #planChips { display: block; margin: 14px 0 18px; }
:root[data-look="violet"] .result #planChips .v-chip { height: 30px; padding: 0 11px; border-radius: var(--r-pill); background: var(--surface); text-transform: none; }
:root[data-look="violet"] .result .vt-plan-more { margin-top: 10px; color: var(--ink-3); }
:root[data-look="violet"] .result .plan-block .plan-summary { gap: 6px; }
:root[data-look="violet"] .result .plan-block .plan-summary span { height: 30px; padding: 0 11px; background: var(--surface); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); color: var(--ink); font-size: 0.8rem; font-weight: 600; text-transform: none; font-variant-numeric: tabular-nums; }
:root[data-look="violet"] .result .day-rows { gap: var(--gap-list); }
:root[data-look="violet"] .result .plan-block { margin-top: var(--gap-section); padding-top: 0; border-top: 0; }
:root[data-look="violet"] .result .plan-block h3 { margin: 0 0 10px; font-family: var(--font-display); font-stretch: 108%; font-size: var(--title-sec); font-weight: 800; letter-spacing: -0.02em; }
:root[data-look="violet"] .result .plan-block p,
:root[data-look="violet"] .result .plan-block li { font-size: 0.95rem; line-height: 1.55; color: var(--ink-2); }
/* How to progress: one card, a divided row each (My plans' notes). */
:root[data-look="violet"] .result .plan-block ul { display: grid; gap: 0; margin: 0; padding: 0; border: 1px solid var(--edge); border-radius: var(--r-row); background: var(--surface); list-style: none; }
:root[data-look="violet"] .result .plan-block li { position: relative; padding: 12px 16px 12px 44px; }
:root[data-look="violet"] .result .plan-block li + li { border-top: 1px solid var(--divider); }
:root[data-look="violet"] .result .plan-block li::before { content: ""; position: absolute; left: 14px; top: 14px; width: 18px; height: 18px; background: var(--accent-text); -webkit-mask: var(--i-check-white) center / contain no-repeat; mask: var(--i-check-white) center / contain no-repeat; }
:root[data-look="violet"] .result .plan-actions { gap: 10px; margin-top: var(--gap-section); }
:root[data-look="violet"] .result .plan-actions > * { flex: 1 1 200px; height: 52px; border-radius: var(--r-pill); }
:root[data-look="violet"] #openPdfFallback { color: var(--accent-text); }

/* ---- 9g. My plans --------------------------------------------------------- */

/* Sections, not boxes: each plan's heading over cards of its own. */
:root[data-look="violet"] #profileContent { gap: 40px var(--gap-section); }
:root[data-look="violet"] #profileContent > .stack { gap: 0; }
:root[data-look="violet"] #profileContent > .stack > .card:not(.vt-stats) { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
:root[data-look="violet"] #profileContent > .stack > .card + .card { margin-top: 40px; }
:root[data-look="violet"] #profileContent .card-head { margin-bottom: 14px; }
:root[data-look="violet"] #profileContent :is(.card-head h3, #favorites-heading) { margin: 0; font-size: var(--title-sec); }
:root[data-look="violet"] #profileContent .card-head .sub,
:root[data-look="violet"] #favorites-heading + .sub { margin: 4px 0 0; font-size: 0.95rem; color: var(--ink-2); }
/* A plan's head: three chips with icons, the rest as one quiet line. */
:root[data-look="violet"] #profileContent .plan-summary { display: block; margin: 0 0 14px; }
:root[data-look="violet"] #profileContent .plan-summary .v-chip { height: 30px; padding: 0 11px; border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font-size: 0.8rem; }
:root[data-look="violet"] #profileContent .vt-plan-more { margin-top: 10px; font-size: 0.86rem; color: var(--ink-3); }
/* The plan's notes: one card, a divided row each. */
:root[data-look="violet"] #profileContent .vt-notes { margin-top: var(--gap-list); border: 1px solid var(--edge); border-radius: var(--r-row); background: var(--surface); }
:root[data-look="violet"] #profileContent .vt-notes:not(:has(.plan-text:not(:empty))) { display: none; }
:root[data-look="violet"] #profileContent .plan-text { margin: 0; padding: 13px 16px; font-size: 0.92rem; line-height: 1.5; color: var(--ink-2); }
:root[data-look="violet"] #profileContent .plan-text:empty { display: none; }
:root[data-look="violet"] #profileContent .plan-text:not(:empty) ~ .plan-text:not(:empty) { border-top: 1px solid var(--divider); }
:root[data-look="violet"] #profileContent .plan-text strong { display: block; margin-bottom: 2px; color: var(--ink); }

/* The week: a card per day, opening onto its exercises or meals. */
:root[data-look="violet"] #profileContent .day-rows { display: grid; gap: var(--gap-list); margin: 4px 0 0; border: 0; }
:root[data-look="violet"] #foodSummary + .day-rows { margin-top: 4px; }
:root[data-look="violet"] #profileContent .day-row { border: 1px solid var(--edge); border-radius: var(--r-row); background: var(--card-fill); }
:root[data-look="violet"] #profileContent .day-row summary {
    display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px 10px 14px; border-radius: var(--r-row); -webkit-tap-highlight-color: transparent;
}
:root[data-look="violet"] #profileContent .day-row summary::after {
    content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%; transform: rotate(90deg); transition: transform var(--dur) var(--ease-out);
    background: var(--vt-chev) center / 15px no-repeat, var(--surface-2);
}
:root[data-look="violet"] #profileContent .day-row[open] summary::after { transform: rotate(-90deg); }
:root[data-look="violet"] :is(#profileContent, #planPreview) .day-row.vt-day summary::after { content: none; }
:root[data-look="violet"] #profileContent .day-row summary:hover .day-title { color: var(--ink); }
:root[data-look="violet"] #profileContent .day-row .day-tag { flex: none; height: 30px; background: var(--accent-soft); color: var(--accent-text); font-size: 0.78rem; }
:root[data-look="violet"] #profileContent .day-row .day-title { flex: 1; min-width: 0; font-size: 1.02rem; }
:root[data-look="violet"] #profileContent .day-row .day-meta { flex: none; font-size: 0.84rem; color: var(--ink-2); }
/* Food days: the day, the kcal and the protein on fixed columns, so the list reads straight down. */
:root[data-look="violet"] #foodDays .day-row > summary { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto 32px; font-variant-numeric: tabular-nums; }
:root[data-look="violet"] #foodDays .day-row .day-tag { justify-self: start; }
:root[data-look="violet"] #foodDays .day-row .day-meta { grid-column: auto; text-align: right; }
:root[data-look="violet"] #profileContent .day-list { gap: 0; margin: 0 14px; padding: 0 0 10px; font-size: 0.92rem; }
:root[data-look="violet"] #profileContent .day-list li { padding: 11px 0; border-top: 1px solid var(--divider); }
:root[data-look="violet"] #profileContent .day-list li .v { color: var(--accent-text); font-size: 0.86rem; }
:root[data-look="violet"] #profileContent .day-list li small { color: var(--ink-2); }

/* A training day (here and on Workout plan once built): its form photo,
   "Day 1" over the title, the round chevron; open, a row per exercise with
   its photo, its sets in Workout's words and a round How to do it (the
   picker's row). */
:root[data-look="violet"] :is(#profileContent, #planPreview) .day-row.vt-day { overflow: hidden; border: 1px solid var(--edge); border-radius: var(--r-row); background: var(--card-fill); }
:root[data-look="violet"] :is(#profileContent, #planPreview) .vt-day > summary { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; min-height: 76px; padding: 10px 12px 10px 10px; border-radius: var(--r-row); list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:root[data-look="violet"] .vt-day > summary::-webkit-details-marker { display: none; }
:root[data-look="violet"] .vt-day .vx-th { flex: none; width: 56px; height: 56px; border-radius: 15px; font-size: 24px; }
:root[data-look="violet"] .vt-day .vx-th img { filter: var(--photo-filter); }
:root[data-look="violet"] .vt-day-t { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; gap: 1px; }
:root[data-look="violet"] :is(#profileContent, #planPreview) .vt-day-t .day-tag { height: auto; padding: 0; border: 0; background: none; font-size: 0.72rem; line-height: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
:root[data-look="violet"] :is(#profileContent, #planPreview) .vt-day-t .day-title { font-size: 1.06rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
:root[data-look="violet"] :is(#profileContent, #planPreview) .vt-day-t .day-meta { grid-column: auto; width: auto; margin: 0; font-size: 0.84rem; color: var(--ink-2); text-align: left; }
:root[data-look="violet"] :is(#profileContent, #planPreview) .vt-day .day-list { display: grid; gap: 0; margin: 0 14px; padding: 0 0 6px; font-size: 0.92rem; list-style: none; }
:root[data-look="violet"] :is(#profileContent, #planPreview) .vt-day .day-list.ex-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--divider); font-size: 0.92rem; }
:root[data-look="violet"] .vt-ex-th { flex: none; display: grid; place-items: center; overflow: hidden; width: 48px; height: 48px; border-radius: var(--r-field); background: var(--surface-2); color: var(--accent-text); font-size: 1.2rem; }
:root[data-look="violet"] .vt-ex-th img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); }
:root[data-look="violet"] .vt-ex-t { flex: 1; min-width: 0; }
:root[data-look="violet"] .vt-ex-t b { display: block; font-size: 0.98rem; font-weight: 600; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
:root[data-look="violet"] :is(#profileContent, #planPreview) .vt-day li .vt-ex-t .v { display: block; margin-top: 2px; font-size: 0.84rem; font-weight: 400; line-height: 1.35; color: var(--ink-2); white-space: normal; }
:root[data-look="violet"] .vt-ex-t em { display: inline-flex; align-items: center; height: 22px; margin: 4px 0 0; padding: 0 8px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); font-size: 0.72rem; font-style: normal; font-weight: 600; }
:root[data-look="violet"] .vt-how { flex: none; font-size: 1.15rem; }
:root[data-look="violet"] .vt-how[hidden] { display: none; }
/* A rest day: a slim row, the moon where a photo would be. */
:root[data-look="violet"] #profileContent .day-row.vt-rest { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 14px 6px 10px; border-color: var(--edge); background: transparent; font-size: 0.9rem; }
:root[data-look="violet"] .vt-rest-ic { flex: none; display: grid; place-items: center; width: 56px; color: var(--ink-3); font-size: 1.2rem; }
:root[data-look="violet"] #profileContent .vt-rest .day-tag { height: auto; padding: 0; background: none; color: var(--ink); font-size: 0.96rem; font-weight: 600; }
:root[data-look="violet"] #profileContent .vt-rest .day-meta { color: var(--ink-2); font-size: 0.86rem; }

/* What to do with a plan: Download PDF and Edit exercises share a row as
   quiet buttons (the plan, not a button, is what the page shows), Delete is a
   quiet coral text button under them. */
:root[data-look="violet"] #profileContent .plan-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
:root[data-look="violet"] #profileContent .plan-actions .btn { flex: 1 1 0; min-width: 0; height: 52px; white-space: nowrap; }
:root[data-look="violet"] #profileContent .plan-actions .btn:not(.accent):not(.danger) { border: 1px solid var(--line-2); background: transparent; color: var(--ink); box-shadow: none; }
:root[data-look="violet"] #profileContent .plan-actions .btn:not(.accent):not(.danger):hover { border-color: var(--ink-3); background: var(--hover); }
:root[data-look="violet"] #profileContent .plan-actions .btn i { color: var(--accent-text); }
:root[data-look="violet"] #profileContent .plan-actions .btn.accent { flex-basis: 100%; }
:root[data-look="violet"] #profileContent .plan-actions .btn.danger { flex: 1 1 100%; height: 44px; margin-top: -2px; border: 0; background: none; color: var(--bad); font-weight: 600; }
:root[data-look="violet"] #profileContent .plan-actions .btn.danger:hover { background: var(--bad-soft); color: var(--bad); }
:root[data-look="violet"] #profileContent .empty-plan { display: grid; justify-items: center; gap: 4px; padding: 22px 20px; border: 1px solid var(--edge); border-radius: var(--r-card); background: var(--card-fill); }
:root[data-look="violet"] #profileContent .empty-plan p { color: var(--ink-2); }
/* The empty plans read as every other empty state (.v-empty): an icon on a soft violet disc over the line. */
:root[data-look="violet"] #profileContent .empty-plan { text-align: center; }
:root[data-look="violet"] #profileContent .empty-plan::before {
    display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent-text); font-family: "Phosphor"; font-size: 1.5rem; line-height: 1;
}
:root[data-look="violet"] #planEmpty::before { content: "\e0b6"; }   /* ph-barbell */
:root[data-look="violet"] #foodEmpty::before { content: "\e262"; }   /* ph-fork-knife */
:root[data-look="violet"] #profileContent .plan-status:empty { display: none; }

/* Favourite gyms: a card each; the stars and the remove button big enough to tap. */
:root[data-look="violet"] #profileFavoritesList { display: grid; gap: var(--gap-list); margin-top: 14px; }
:root[data-look="violet"] .fav-item { position: relative; gap: 10px 14px; padding: 14px 14px 12px 16px; border: 1px solid var(--edge); border-radius: var(--r-row); background: var(--card-fill); }
:root[data-look="violet"] .fav-item:last-child { border-bottom: 1px solid var(--edge); }
:root[data-look="violet"] .fav-item.sub { color: var(--ink-2); }
:root[data-look="violet"] .fav-name { font-size: 1.02rem; }
:root[data-look="violet"] .fav-address { color: var(--ink-2); font-size: 0.84rem; }
:root[data-look="violet"] .fav-controls { gap: 6px 10px; width: 100%; }
:root[data-look="violet"] .fav-avg { color: var(--ink-2); font-variant-numeric: tabular-nums; }
:root[data-look="violet"] .fav-stars { gap: 0; margin: 0 -8px; }
:root[data-look="violet"] .fav-stars .star { place-items: center; width: 44px; height: 44px; padding: 0; color: var(--line-2); }
:root[data-look="violet"] .fav-stars .star svg { width: 22px; height: 22px; }
:root[data-look="violet"] .fav-stars .star.filled { color: var(--violet-2); }
:root[data-look="violet"] .fav-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-text); }
:root[data-look="violet"] .fav-main { padding-right: 50px; }
:root[data-look="violet"] .fav-remove { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; background: var(--surface-2); color: var(--ink-2); font-size: 1.1rem; }
:root[data-look="violet"] .fav-remove:hover { background: var(--bad-soft); color: var(--bad); }

/* Your body stats: one row that opens Settings, the whole card the link. */
:root[data-look="violet"] #profileContent .card.vt-stats {
    position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) 32px; align-items: center; gap: 2px 12px;
    margin-top: 40px; min-height: 64px; padding: 12px 14px 12px 12px; border-radius: var(--r-row);
}
:root[data-look="violet"] .vt-stats .v-tile { grid-row: 1 / span 2; }
:root[data-look="violet"] .vt-stats h3 { grid-column: 2; margin: 0; font-family: var(--font-ui); font-stretch: 100%; font-size: 1.02rem; font-weight: 600; letter-spacing: 0; line-height: 1.3; }
:root[data-look="violet"] .vt-stats .sub { grid-column: 2; margin: 0; font-size: 0.84rem; line-height: 1.35; color: var(--ink-2); }
:root[data-look="violet"] .vt-stats .btn {
    grid-column: 3; grid-row: 1 / span 2; position: static; display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
    border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); font-size: 0;
}
:root[data-look="violet"] .vt-stats .btn::before { content: ""; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--i-caret-right) center / contain no-repeat; mask: var(--i-caret-right) center / contain no-repeat; }
:root[data-look="violet"] .vt-stats .btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
:root[data-look="violet"] .vt-stats:has(.btn:hover) { border-color: var(--edge-strong); }
:root[data-look="violet"] .vt-stats:has(.btn:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
:root[data-look="violet"] .vt-stats .btn:focus-visible { outline: 0; }

/* ---- 9h. Calendar --------------------------------------------------------- */

/* The head: the reminders switch as a quiet pill under the line. */
:root[data-look="violet"] .notify-btn { height: 44px; gap: 8px; }
:root[data-look="violet"] .notify-btn i { color: var(--accent-text); font-size: 1.1rem; }
:root[data-look="violet"] .notify-btn.is-enabled { border-color: rgba(127, 211, 154, 0.5); color: var(--ok); }
:root[data-look="violet"] .notify-btn.is-enabled i { color: var(--ok); }

/* This week: the heading and its dates on the left, round arrows on the right. */
:root[data-look="violet"] .week-head { align-items: flex-end; gap: 12px; margin: 0 0 14px; }
:root[data-look="violet"] .week-head h2 { font-stretch: 108%; font-size: var(--title-sec); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; text-transform: none; }
:root[data-look="violet"] .week-range { margin-top: 4px; font-family: var(--font-ui); font-size: 0.9rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-2); font-variant-numeric: tabular-nums; }
:root[data-look="violet"] .week-nav { gap: 6px; }
:root[data-look="violet"] :is(.week-nav-btn, .week-nav-today) { height: 44px; border: 1px solid var(--edge-strong); background: rgba(255, 255, 255, 0.06); color: var(--ink); }
:root[data-look="violet"] .week-nav-btn { width: 44px; border-radius: 50%; }
:root[data-look="violet"] .week-nav-btn svg { width: 20px; height: 20px; }
:root[data-look="violet"] .week-nav-today { padding: 0 16px; border-radius: var(--r-pill); font-size: 0.88rem; }
:root[data-look="violet"] :is(.week-nav-btn, .week-nav-today):hover { border-color: var(--edge-strong); background: rgba(255, 255, 255, 0.12); }
:root[data-look="violet"] :is(.week-nav-btn, .week-nav-today):active { transform: scale(0.95); }

/* The week in three numbers, one card. */
:root[data-look="violet"] .summary-strip { margin-bottom: 14px; border: 1px solid var(--edge); border-radius: var(--r-row); background: var(--card-fill); }
:root[data-look="violet"] .summary-chip { display: flex; flex-direction: column; justify-content: space-between; padding: 14px 14px 13px; }
:root[data-look="violet"] .summary-chip + .summary-chip { border-left-color: var(--divider); }
:root[data-look="violet"] .summary-chip span { font-family: var(--font-ui); font-size: 0.78rem; font-weight: 500; letter-spacing: 0; line-height: 1.3; text-transform: none; color: var(--ink-2); }
:root[data-look="violet"] .summary-chip strong { margin-top: 6px; font-stretch: 108%; font-size: 1.5rem; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
:root[data-look="violet"] .summary-chip.is-streak strong { color: var(--accent-text); }

/* The deck: a photo card per training day (the form photo of its first
   exercise), the day and its date over it, the session in white at its
   foot, the family as a glass chip. A rest day is a short, quieter card.
   Today wears the light violet ring; the open day a white one. */
:root[data-look="violet"] .day-card {
    border: 1px solid var(--edge); border-radius: var(--r-card); background: var(--photo-base);
    -webkit-tap-highlight-color: transparent;
}
:root[data-look="violet"] .day-card::before { filter: var(--photo-filter); }
:root[data-look="violet"] .day-card::after { background: linear-gradient(rgba(var(--scrim-rgb), 0.5), rgba(var(--scrim-rgb), 0.12) 34%, rgba(var(--scrim-rgb), 0.2) 50%, rgba(var(--scrim-rgb), 0.82) 82%, rgba(var(--scrim-rgb), 0.94)); }
:root[data-look="violet"] .day-card.type-rest::before { filter: saturate(0.5) brightness(0.5); }
:root[data-look="violet"] .day-card:hover { transform: translateY(-2px); }
:root[data-look="violet"] .day-card:active { transform: scale(0.99); }
:root[data-look="violet"] .day-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
:root[data-look="violet"] .day-name { font-family: var(--font-ui); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.9); }
:root[data-look="violet"] .day-number { margin-top: 2px; font-stretch: 108%; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
:root[data-look="violet"] .day-section-body { font-stretch: 108%; letter-spacing: -0.02em; }
:root[data-look="violet"] .day-section-body.muted { color: rgba(255, 255, 255, 0.9); font-weight: 700; }
:root[data-look="violet"] .day-chip { margin-top: 4px; font-size: 0.82rem; font-weight: 500; color: rgba(255, 255, 255, 0.9); }
:root[data-look="violet"] .day-section-label {
    height: 28px; padding: 0 11px; border: 1px solid var(--glass-edge); background: var(--glass); color: #fff;
    font-size: 0.74rem; font-weight: 600; letter-spacing: 0; text-transform: none;
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
:root[data-look="violet"] .day-card.type-rest .day-section-label { background: var(--glass); color: rgba(255, 255, 255, 0.9); }
/* The badges: Today on glass with a light violet dot (Home and Workout mark
   today with a ring, not a fill, and a tick would read as done), Done as the
   violet mark, Missed in coral, Moved on glass. */
:root[data-look="violet"] :is(.today-badge, .done-badge, .missed-badge, .moved-badge) { height: 28px; padding: 0 11px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em; text-transform: none; }
:root[data-look="violet"] .today-badge { gap: 7px; border: 1px solid var(--glass-edge); background: var(--glass); color: #fff; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
:root[data-look="violet"] .today-badge svg { display: none; }
:root[data-look="violet"] .today-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--violet-2); }
:root[data-look="violet"] .done-badge { background: var(--violet-mark); color: #fff; }
:root[data-look="violet"] .missed-badge { border: 1px solid rgba(255, 143, 133, 0.4); background: rgba(var(--scrim-rgb), 0.6); color: var(--bad); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
:root[data-look="violet"] .moved-badge { border: 1px solid var(--glass-edge); background: var(--glass); color: #fff; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
:root[data-look="violet"] .day-card.is-today { border-color: transparent; background: var(--photo-base); outline: 2px solid var(--accent-text); outline-offset: -2px; }
:root[data-look="violet"] .day-card.is-open { border-color: transparent; background: var(--photo-base); outline: 2px solid #fff; outline-offset: -2px; }
:root[data-look="violet"] .day-card.is-today:focus-visible, :root[data-look="violet"] .day-card.is-open:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* A ringed card sits over its neighbours, so the next card in the deck doesn't cover its ring. */
:root[data-look="violet"] .day-card:is(.is-today, .is-open, .is-swap-selected, .is-rest-slot) { z-index: 1; }
:root[data-look="violet"] .day-card:focus-visible { z-index: 2; }
/* A rest day says so once: the chip under it would repeat it. */
:root[data-look="violet"] .day-card.type-rest .day-section-label { display: none; }
/* Changing days: every card dims, a rest day that can take a session is ringed
   in dashed light violet, the session in hand is lifted on a violet ring. */
:root[data-look="violet"] .day-card.is-edit-mode { border: 1px solid var(--edge); background: var(--photo-base); }
/* While changing days only the session in hand is ringed. */
:root[data-look="violet"] .day-card.is-edit-mode.is-today:not(.is-swap-selected) { outline: 0; }
:root[data-look="violet"] .day-card.is-edit-mode.is-today:not(.is-swap-selected):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
:root[data-look="violet"] .day-card.is-edit-mode.is-rest-slot { border: 2px dashed var(--violet-2); }
:root[data-look="violet"] .day-card.is-swap-selected { border: 0; background: var(--photo-base); outline: 2px solid var(--accent-text); outline-offset: -2px; box-shadow: 0 18px 40px rgba(var(--scrim-rgb), 0.55); }
:root[data-look="violet"] .day-card.is-swap-selected::after { background: linear-gradient(rgba(var(--violet-rgb), 0.35), rgba(var(--scrim-rgb), 0.3) 40%, rgba(var(--scrim-rgb), 0.92)); }
:root[data-look="violet"] .day-hint { font-size: 0.82rem; color: var(--accent-text); }

/* Under the deck: Change days full width, the legend, the edit bar as a violet-tinted card. */
:root[data-look="violet"] .week-foot { margin-top: 16px; }
:root[data-look="violet"] #editScheduleBtn { height: 50px; border-radius: var(--r-block); }
:root[data-look="violet"] #editScheduleBtn i { color: var(--accent-text); font-size: 1.15rem; }
/* While changing days it reads Cancel: kept quiet, so Confirm is the one that stands out. */
:root[data-look="violet"] #editScheduleBtn.is-active { border-color: var(--line-2); background: transparent; color: var(--ink); }
:root[data-look="violet"] .legend { gap: 18px; font-size: 0.84rem; color: var(--ink-2); }
:root[data-look="violet"] .legend .dot { width: 12px; height: 12px; border: 2px solid var(--accent-text); border-radius: 50%; vertical-align: -2px; }
:root[data-look="violet"] .edit-bar { margin-top: 14px; padding: 16px; border: 1px solid var(--tint-edge); border-radius: var(--r-card); background: var(--tint-fill); }
:root[data-look="violet"] .edit-bar-text { font-size: 0.92rem; line-height: 1.5; color: var(--ink-2); }
:root[data-look="violet"] .edit-bar-acts .btn { height: 52px; }
/* No plan: the way to make one comes first (renderWeek's violetNoPlan), the
   days follow as slim rows with no photo, still open for a weigh-in. The
   page's own empty card below the week goes. */
:root[data-look="violet"] #emptyPlans { display: none !important; }
:root[data-look="violet"] .vt-no-plan-card { margin-bottom: 14px; padding: 26px 20px 22px; }
:root[data-look="violet"] .vt-no-plan-card .btn { min-width: 200px; height: 50px; margin-top: 4px; }
:root[data-look="violet"] .vt-no-plan-card[hidden] { display: none; }
:root[data-look="violet"] .week-grid.vt-no-plan .day-card[data-index] { flex-direction: column; align-items: stretch; justify-content: center; min-height: 56px; margin-top: 0; padding: 8px 12px 8px 16px; border-color: var(--edge); border-radius: var(--r-row); background: var(--card-fill); box-shadow: none; }
:root[data-look="violet"] .week-grid.vt-no-plan .day-card[data-index] + .day-card { margin-top: 8px; }
:root[data-look="violet"] .week-grid.vt-no-plan .day-card-top { flex-wrap: nowrap; align-items: center; justify-content: space-between; }
:root[data-look="violet"] .week-grid.vt-no-plan .day-card-top > div:first-child { display: flex; align-items: baseline; gap: 10px; }
:root[data-look="violet"] .week-grid.vt-no-plan .day-card[data-index] .day-number { margin: 0; font-size: 1.35rem; }
:root[data-look="violet"] .week-grid.vt-no-plan .day-card::before,
:root[data-look="violet"] .week-grid.vt-no-plan .day-card::after { content: none; }
:root[data-look="violet"] .week-grid.vt-no-plan .day-card .day-section { display: none; }
:root[data-look="violet"] .week-grid.vt-no-plan .day-name { color: var(--ink-2); }
:root[data-look="violet"] .week-grid.vt-no-plan .day-number { color: var(--ink); }
:root[data-look="violet"] .week-grid.vt-no-plan .day-card.is-today .today-badge { border-color: transparent; background: var(--accent-soft); color: var(--accent-text); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-look="violet"] .week-grid.vt-no-plan .day-card.is-today,
:root[data-look="violet"] .week-grid.vt-no-plan .day-card.is-open { background: var(--card-fill); }
:root[data-look="violet"] #editScheduleBtn[hidden] { display: none; }
:root[data-look="violet"] .login-note { border: 1px solid var(--edge); border-radius: var(--r-row); background: var(--card-fill); }

/* One day, open: the round back, the day's date as a kicker over its name in
   large letters, a card per exercise (Workout's), then what to do with it. */
:root[data-look="violet"] #dayModalBackdrop.is-open { margin-top: var(--gap-section); padding-top: 0; border-top: 0; }
:root[data-look="violet"] #dayModalBackdrop .backlink { margin-bottom: 14px; }
:root[data-look="violet"] .day-split { gap: var(--gap-list); }
@media (max-width: 1000px) {
    :root[data-look="violet"] .day-split { grid-template-columns: minmax(0, 1fr); }
}
:root[data-look="violet"] .card-lg.day-main { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
:root[data-look="violet"] #dayModalTitle { margin: 0 0 4px; font-size: 0.8rem; line-height: 18px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); font-variant-numeric: tabular-nums; }
:root[data-look="violet"] .day-modal-section h4 { margin: 0 0 14px; font-stretch: 112%; font-size: var(--title-m); line-height: 1.02; letter-spacing: -0.04em; }
:root[data-look="violet"] .day-modal-section p { color: var(--ink-2); }
:root[data-look="violet"] .day-title-row { gap: 12px; }
:root[data-look="violet"] .day-title-edit { width: 44px; height: 44px; border: 1px solid var(--edge-strong); background: rgba(255, 255, 255, 0.06); color: var(--ink); font-size: 1.1rem; }
:root[data-look="violet"] .day-title-edit:hover { border-color: var(--edge-strong); background: rgba(255, 255, 255, 0.12); color: var(--ink); }
:root[data-look="violet"] .day-title-input { width: 0; border-bottom-color: var(--accent-text); }   /* fills the row, never widens the page */
:root[data-look="violet"] .moved-note { display: inline-flex; align-items: center; height: 30px; margin: -4px 0 14px; padding: 0 12px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); font-size: 0.84rem; }
:root[data-look="violet"] .modal-exercise-list { display: grid; gap: var(--gap-list); max-width: none; }
:root[data-look="violet"] .modal-exercise-list li { border-bottom: 0; }
:root[data-look="violet"] .day-add-btn { justify-content: center; width: 100%; height: 50px; margin-top: 10px; border: 1px solid var(--line-2); border-radius: var(--r-block); color: var(--ink); font-size: 0.95rem; }
:root[data-look="violet"] .day-add-btn:hover { border: 1px solid var(--ink-3); background: var(--hover); }
:root[data-look="violet"] .day-add-btn i { font-size: 1.15rem; color: var(--accent-text); }
/* Sets logged under a name the plan no longer shows: the same cards under a kicker. */
:root[data-look="violet"] .day-modal-section .extra-cap { margin: 22px 0 10px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
/* Start, or mark it done. Today: Start in violet, Mark done the quiet
   button under it, both full width. Another day: its state beside the button. */
:root[data-look="violet"] .modal-done-toggle { gap: 10px 14px; margin-top: 20px; }
:root[data-look="violet"] .modal-done-toggle.has-start #modalDoneBtn { order: 0; flex: 1 1 100%; height: 50px; }
/* A missed day: the coral note under it says it all, so the dead Missed button goes. */
:root[data-look="violet"] .modal-done-toggle:not(.has-start):not(:has(> span)) { display: none; }
:root[data-look="violet"] #modalDoneBtn { height: 52px; padding: 0 24px; border: 1px solid var(--line-2); background: transparent; color: var(--ink); font-size: 1rem; font-weight: 700; }
:root[data-look="violet"] #dayModalBody .start-workout { flex: 1 1 100%; justify-content: center; height: 52px; padding: 0 24px; border: 0; background: var(--violet-fill); color: #fff; box-shadow: var(--violet-glow); font-size: 1rem; font-weight: 700; }
:root[data-look="violet"] #dayModalBody .start-workout:hover { background: var(--violet-fill-hover); }
:root[data-look="violet"] .modal-done-toggle:not(.has-start) #modalDoneBtn:not(.is-done):not(:disabled) { border-color: transparent; background: var(--ink); color: var(--bg); }
:root[data-look="violet"] #modalDoneBtn.is-done { border-color: transparent; background: var(--accent-soft); color: var(--accent-text); }
:root[data-look="violet"] #modalDoneBtn:disabled { border-color: var(--line-2); background: transparent; color: var(--ink-2); opacity: 0.8; }
:root[data-look="violet"] .modal-done-toggle span { font-size: 0.9rem; color: var(--ink-2); }
:root[data-look="violet"] #dayModalBody > div[style*="--bad"] { margin-top: 12px !important; padding: 12px 14px; border-radius: var(--r-row); background: var(--bad-soft); font-weight: 600; line-height: 1.45; }
/* Move this session: a step to do, on the violet-tinted card. */
:root[data-look="violet"] .reschedule-panel { margin-top: 16px; padding: 16px; border: 1px solid var(--tint-edge); border-radius: var(--r-card); background: var(--tint-fill); }
:root[data-look="violet"] .reschedule-panel h4 { font-family: var(--font-display); font-stretch: 108%; font-size: var(--title-card); font-weight: 800; letter-spacing: -0.02em; }
:root[data-look="violet"] .reschedule-panel p { color: var(--ink-2); }
:root[data-look="violet"] .reschedule-field label { color: var(--ink-2); }
:root[data-look="violet"] .reschedule-field select { height: 46px; }
:root[data-look="violet"] .reschedule-controls .btn { height: 46px; }
:root[data-look="violet"] .reschedule-status.is-error { color: var(--bad); }
/* Weigh-in: a small card of its own, kg inside the field as Workout's set fields have it. */
:root[data-look="violet"] .modal-weight-section { margin-top: var(--gap-section); padding: 16px; border: 1px solid var(--edge); border-radius: var(--r-card); background: var(--card-fill); }
:root[data-look="violet"] .modal-weight-section h4 { margin: 0 0 12px; font-family: var(--font-display); font-stretch: 108%; font-size: var(--title-card); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; text-transform: none; color: var(--ink); }
:root[data-look="violet"] .modal-weight-field { position: relative; display: grid; gap: 8px; max-width: 220px; }
:root[data-look="violet"] .modal-weight-field input { height: 50px; padding: 0 48px 0 16px; border: 1px solid var(--edge); border-radius: var(--r-field); background: var(--surface-2); font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
:root[data-look="violet"] .modal-weight-field input:focus { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(var(--violet-rgb), 0.28); }
:root[data-look="violet"] .modal-weight-unit { position: absolute; top: 0; right: 16px; display: flex; align-items: center; height: 50px; color: var(--ink-2); font-size: 0.92rem; font-weight: 600; pointer-events: none; }
:root[data-look="violet"] .modal-weight-field .reschedule-status { order: 2; margin: 0; }
:root[data-look="violet"] .modal-weight-field .reschedule-status:empty { display: none; }
/* The week so far, beside the day: the ring fills in light violet. */
:root[data-look="violet"] .card-lg.week-ring { padding: 22px 18px; border: 1px solid var(--edge); border-radius: var(--r-card); background: var(--card-fill); }
:root[data-look="violet"] #ringTrack { stroke: rgba(255, 255, 255, 0.08); }
:root[data-look="violet"] #ringArc { stroke: var(--violet-2); }
:root[data-look="violet"] #ringArc[stroke-dasharray^="0 "] { stroke-opacity: 0; }   /* nothing done: no dot where the arc would start */
:root[data-look="violet"] .week-ring .kpi b { font-stretch: 108%; font-size: 2.2rem; font-variant-numeric: tabular-nums; }
:root[data-look="violet"] .week-ring .kpi span { max-width: 110px; font-family: var(--font-ui); font-size: 0.8rem; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
:root[data-look="violet"] #ringStreak { height: 30px; background: var(--accent-soft); color: var(--accent-text); }
:root[data-look="violet"] .week-ring .vt-ring-t { display: none; }

/* The year: a card, the heading, the squares in light violet, the months under them. */
:root[data-look="violet"] .card-lg#yearPanel { margin-top: var(--gap-section); padding: 16px 16px 14px; border: 1px solid var(--edge); border-radius: var(--r-card); background: var(--card-fill); }
:root[data-look="violet"] .heat-head { margin-bottom: 14px; }
:root[data-look="violet"] .heat-head h3 { font-family: var(--font-display); font-stretch: 108%; font-size: var(--title-card); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; text-transform: none; color: var(--ink); text-wrap: balance; }
:root[data-look="violet"] .legend-h { font-family: var(--font-ui); font-size: 0.78rem; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
:root[data-look="violet"] .legend-h i { width: 12px; height: 12px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); }
:root[data-look="violet"] .legend-h i:nth-child(2) { background: rgba(var(--violet-rgb), 0.38) !important; }
:root[data-look="violet"] .legend-h i:nth-child(3) { background: var(--violet-2) !important; }
:root[data-look="violet"] .hw button, :root[data-look="violet"] .hw i { border-radius: 2px; background: rgba(255, 255, 255, 0.08); }
:root[data-look="violet"] .hw i { background: none; }
:root[data-look="violet"] .hw .l1 { background: rgba(var(--violet-rgb), 0.38); }
:root[data-look="violet"] .hw .l4 { background: var(--violet-2); }
/* As many columns as renderHeatmap draws (20 weeks on a phone); today is a ring inside its square. */
:root[data-look="violet"] .heat { grid-template-columns: repeat(var(--weeks, 53), minmax(0, 1fr)); }
:root[data-look="violet"] .hw button:hover, :root[data-look="violet"] .hw button:focus-visible { outline: 1.5px solid var(--focus); outline-offset: 1px; }
:root[data-look="violet"] .hw .today { outline: 0; box-shadow: inset 0 0 0 2px var(--ink); }
:root[data-look="violet"] .months { display: grid; grid-template-columns: repeat(var(--weeks, 53), minmax(0, 1fr)); gap: 0 3px; margin-top: 8px; font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0; text-transform: none; color: var(--ink-3); white-space: nowrap; }
:root[data-look="violet"] .heat-note { margin-top: 10px; font-size: 0.84rem; color: var(--ink-2); }

@media (max-width: 1000px) {
    /* The deck: each card slides up over the one above, a warm shadow on its top edge. */
    :root[data-look="violet"] .day-card { min-height: 160px; padding: 16px 16px 18px; box-shadow: 0 -10px 24px rgba(var(--scrim-rgb), 0.55); }
    :root[data-look="violet"] .day-card + .day-card { margin-top: -14px; }
    :root[data-look="violet"] .day-number { font-size: 2.2rem; }
    :root[data-look="violet"] .day-section-body { font-size: 1.55rem; }
    /* A rest day: one short row, the day on the left, Rest on the right. */
    :root[data-look="violet"] .day-card.type-rest:not(.is-edit-mode) { flex-direction: row; align-items: flex-end; justify-content: space-between; min-height: 108px; }
    :root[data-look="violet"] .day-card.type-rest:not(.is-edit-mode) .day-section { flex: 0 1 auto; align-items: center; justify-content: flex-end; }
    :root[data-look="violet"] .day-card.type-rest:not(.is-edit-mode) .day-section-body { flex: 0 1 auto; font-size: 1.1rem; }
    :root[data-look="violet"] .day-card.type-rest:not(.is-edit-mode) .day-number { font-size: 1.9rem; }
    :root[data-look="violet"] .summary-chip strong { font-size: 1.35rem; }
}
@media (max-width: 760px) {
    :root[data-look="violet"] .summary-chip { padding: 13px 10px 12px 14px; }
    :root[data-look="violet"] .summary-chip span { font-size: 0.74rem; letter-spacing: 0; }
    :root[data-look="violet"] .summary-chip.is-streak strong { font-size: 1.35rem; white-space: nowrap; }
    :root[data-look="violet"] #editScheduleBtn { height: 50px; }
    :root[data-look="violet"] .card-lg.day-main { padding: 0; }
    :root[data-look="violet"] .edit-bar-acts .btn { height: 52px; }
    /* The year: 20 weeks of 12px squares, 4px apart. */
    :root[data-look="violet"] .heat,
    :root[data-look="violet"] .hw { gap: 4px; }
    :root[data-look="violet"] .months { column-gap: 4px; }
    /* The week so far, under the day: one row, a small ring, the count, the streak. */
    :root[data-look="violet"] .card-lg.week-ring { display: flex; align-items: center; justify-content: flex-start; gap: 14px; padding: 12px 16px 12px 12px; border-radius: var(--r-row); text-align: left; }
    :root[data-look="violet"] .week-ring .ring-num { flex: none; width: 52px !important; height: 52px !important; }
    :root[data-look="violet"] .week-ring .ring-num .in { display: none; }
    :root[data-look="violet"] .week-ring .vt-ring-t { flex: 1; min-width: 0; display: grid; gap: 1px; }
    :root[data-look="violet"] .week-ring .vt-ring-t b { font-family: var(--font-display); font-stretch: 108%; font-size: 1.3rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
    :root[data-look="violet"] .week-ring .vt-ring-t span { font-size: 0.84rem; color: var(--ink-2); }
    :root[data-look="violet"] .week-ring p { flex: none; margin: 0 !important; }
}

/* ---- 9i. computer, small phones, reduced motion --------------------------- */

@media (min-width: 1001px) {
    /* Calendar: the week so far stays in view beside a long day. */
    :root[data-look="violet"] .card-lg.week-ring { position: sticky; top: 24px; align-self: start; }
}
@media (min-width: 1081px) {
    /* Exercise forms and the picker: with a mouse there is no swiping, so the body parts wrap. */
    :root[data-look="violet"] :is(.ex-library, .ex-pick-head) .ex-parts { flex-wrap: wrap; margin: 14px 0 0; padding: 0; overflow: visible; }
    :root[data-look="violet"] .ex-results.is-grid { align-items: stretch; }
    /* Workout plan: the questions start where the title does; Premium sits under the line. */
    :root[data-look="violet"] .main:has(> .quiz-panel) > :is(.quiz-panel, .quiz-alt, .result) { margin-left: 0; }
    :root[data-look="violet"] .page-head:has(> .tag.grad) { flex-direction: column; align-items: flex-start; gap: 12px; }
    /* Achievements: the long lists in columns. */
    :root[data-look="violet"] .achpage #lockedGrid,
    :root[data-look="violet"] .achpage #repeatGrid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
    :root[data-look="violet"] .achpage .ach-grid#earnedGrid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    /* A pseudo-element can't sit inside :is(), so the summary's ::after has its own selector. */
    :root[data-look="violet"] :is(.vt-turn, .ex-row, .quiz-option, .day-card, .vt-wb-ex, .vt-ex-x, .vt-ex-rm),
    :root[data-look="violet"] #profileContent .day-row summary::after { transition: none; }
    :root[data-look="violet"] :is(.ex-row, .quiz-option, .day-card, .week-nav-btn, .week-nav-today, .vt-ex .ex-icon, .vt-ex-x):active,
    :root[data-look="violet"] .day-card:hover { transform: none; }
}

/* ==========================================================================
   10. Food and Premium: the food plan (food-plan.html with food-plan-menu.js,
   food-cook.js and food-questions.js), the XP shop (shop.html, shop.js) and
   the two Premium pages (upgrade.html, pricing.html). Markup the look adds
   sits behind each script's VIOLET flag, or is written class="v-only" hidden.

   10a. food plan          10d. food questions       10g. computers, small phones, motion
   10b. food sheets        10e. XP shop
   10c. cook mode          10f. Premium
   ========================================================================== */

:root[data-look="violet"] {
    --fp-pic-bg: #2b2733;
}

/* ---- 10a. food plan ------------------------------------------------------- */

:root[data-look="violet"] .fp { position: relative; }

/* ---- the photo strip (the shared tilted strip, section 3) ----
   This week's meals from today on, tilted and fading into the page. */
:root[data-look="violet"] .vf-collage {
    position: relative; height: 196px; margin: -20px -18px -4px; overflow: hidden; pointer-events: none;
    -webkit-mask-image: linear-gradient(#000 56%, transparent 98%); mask-image: linear-gradient(#000 56%, transparent 98%);
}
:root[data-look="violet"] .vf-collage::after { background: var(--scrim-top); }
:root[data-look="violet"] .vf-deck { top: 50%; gap: 12px; transform: translate(-50%, -47%) rotate(-12deg); }
:root[data-look="violet"] .vf-deck > span { width: 124px; height: 156px; border-radius: var(--r-card); background: var(--v-plain); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
:root[data-look="violet"] .vf-deck > span:nth-child(even) { transform: translateY(30px); }
:root[data-look="violet"] .vf-deck > span.is-focus { z-index: 2; transform: translateY(6px) scale(1.1); box-shadow: 0 24px 48px rgba(var(--scrim-rgb), 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
:root[data-look="violet"] .vf-deck img { filter: saturate(0.9) contrast(1.04) brightness(0.7); }
:root[data-look="violet"] .vf-deck .is-focus img { filter: var(--photo-filter); }

/* ---- the head: the title, the targets, the answers button ----
   Over the strip, the answers button sits on glass in the corner (the profile's gear). */
:root[data-look="violet"] .fp-head { position: relative; z-index: 4; align-items: flex-end; margin: 0 0 18px; }
:root[data-look="violet"] .fp-head h1 { font-stretch: 112%; font-size: var(--title-m); letter-spacing: -0.04em; line-height: 1.02; }
:root[data-look="violet"] .fp-sub { margin-top: 8px; font-size: 1rem; line-height: 1.45; color: var(--ink-2); }
:root[data-look="violet"] .fp-sub b { color: var(--ink); font-weight: 600; }
:root[data-look="violet"] .fp-round {
    border: 1px solid var(--edge-strong); background: rgba(255, 255, 255, 0.06); color: var(--ink); font-size: 1.25rem;
    transition: background-color var(--dur) ease, transform var(--dur-fast) ease;
}
:root[data-look="violet"] .fp-round:hover { background: rgba(255, 255, 255, 0.12); }
:root[data-look="violet"] .fp-round:active { transform: scale(0.95); background: rgba(255, 255, 255, 0.12); }
:root[data-look="violet"] .fp.has-collage #fpAnswers {
    position: absolute; z-index: 6; top: -4px; right: -4px;
    border-color: var(--glass-edge); background: var(--glass); color: #fff;
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
:root[data-look="violet"] .fp.has-collage .fp-head { position: static; margin-top: -10px; }
:root[data-look="violet"] .fp.has-collage .fp-head > div { position: relative; z-index: 4; }

/* ---- Day, Week, Shopping list: the segmented control ---- */
:root[data-look="violet"] .fp-tabs { gap: 2px; margin-bottom: var(--gap-group); padding: 4px; border-color: var(--line); background: var(--surface); }
:root[data-look="violet"] .fp-tabs button { min-height: 44px; color: var(--ink-2); transition: background-color var(--dur) ease, color var(--dur) ease; }
:root[data-look="violet"] .fp-tabs button:hover { color: var(--ink); }
:root[data-look="violet"] .fp-tabs button[aria-selected="true"] { background: var(--violet-fill); color: var(--on-violet); box-shadow: 0 6px 16px rgba(117, 82, 245, 0.3); }

/* ---- the week strip: Workout's row of days on a soft strip ----
   The date in a circle, the weekday and the day's calories under it; the
   picked day is violet, today wears the violet ring. */
:root[data-look="violet"] .fp-strip {
    gap: 0; margin-bottom: var(--gap-group); padding: 8px 4px 9px; border-radius: var(--r-row);
    background: var(--surface); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
:root[data-look="violet"] .fp-strip button {
    gap: 3px; height: auto; min-height: 72px; padding: 2px 0; border: 0; border-radius: var(--r-field); background: none;
    transition: background-color var(--dur) ease;
}
:root[data-look="violet"] .fp-strip button:hover { background: var(--hover); }
:root[data-look="violet"] .fp-strip-n {
    order: -1; display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 2px; border-radius: 50%;
    background: var(--surface-2); color: var(--ink); font-size: 0.98rem; line-height: 1;
}
:root[data-look="violet"] .fp-strip-d { font-size: 0.74rem; color: var(--ink-2); }
:root[data-look="violet"] .fp-strip-k { font-size: 0.7rem; font-weight: 500; color: var(--ink-3); }
:root[data-look="violet"] .fp-strip button.is-today:not(.is-on) { border: 0; }
:root[data-look="violet"] .fp-strip button.is-today:not(.is-on) .fp-strip-n { background: var(--accent-soft); color: var(--accent-text); box-shadow: 0 0 0 2px var(--accent); }
:root[data-look="violet"] .fp-strip button.is-today .fp-strip-d { color: var(--accent-text); }
:root[data-look="violet"] .fp-strip button.is-on { border: 0; background: none; color: var(--ink); }
:root[data-look="violet"] .fp-strip button.is-on .fp-strip-n { background: var(--violet-fill); color: var(--on-violet); box-shadow: 0 6px 14px rgba(117, 82, 245, 0.35); }
:root[data-look="violet"] .fp-strip button.is-on.is-today .fp-strip-n { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-text); }
:root[data-look="violet"] .fp-strip button.is-on .fp-strip-d { color: var(--ink); }
:root[data-look="violet"] .fp-strip button.is-on.is-today .fp-strip-d { color: var(--accent-text); }
:root[data-look="violet"] .fp-strip button.is-on .fp-strip-k { color: var(--ink-2); }

/* ---- cards: the card colour lit from the top, a faint rim ---- */
:root[data-look="violet"] .fp-card { border: 1px solid var(--edge); border-radius: var(--r-card); background: var(--card-fill); }
:root[data-look="violet"] .fp-card + .fp-card, :root[data-look="violet"] .fp-menu + .fp-card { margin-top: var(--gap-list); }
:root[data-look="violet"] .fp-menu + .fp-card { margin-top: var(--gap-group); }

/* ---- the day: one short card, then one card per meal ----
   The date as Workout's kicker with the cooking time as its chip, the four
   numbers in one row (protein and kcal big, carbs and fat smaller and dropped to
   share their baseline); a caption under it only when it says more than the numbers. */
:root[data-look="violet"] .fp-menu { border: 0; border-radius: 0; background: none; }
:root[data-look="violet"] .fp-menu-top { padding: 12px 16px 13px 18px; border: 1px solid var(--edge); border-radius: var(--r-card); background: var(--card-fill); }
:root[data-look="violet"] .fp-menu-title { min-height: 28px; }
:root[data-look="violet"] .fp-menu-title h2.v-kick { font-family: var(--font-ui); font-stretch: 100%; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; line-height: 18px; color: var(--ink-3); }
:root[data-look="violet"] .fp-cookchip { height: 28px; padding: 0 10px; background: var(--surface-2); cursor: default; }
:root[data-look="violet"] .fp-stats { margin-top: 8px; }
:root[data-look="violet"] .fp-stat + .fp-stat { padding-left: 12px; border-left-color: var(--divider); }
:root[data-look="violet"] .fp-stat b { font-stretch: 108%; font-size: 1.4rem; letter-spacing: -0.03em; }
:root[data-look="violet"] .fp-stat span { margin-top: 4px; font-size: 0.78rem; color: var(--ink-2); }
:root[data-look="violet"] .fp-stat.is-s b { padding-top: 4px; font-size: 1.12rem; color: var(--ink-2); }
:root[data-look="violet"] .fp-dayline { margin: 12px 4px 0; }

/* A meal: photo, label, name, numbers, time; the tick over the swap (Workout's exercise card). */
:root[data-look="violet"] .fp-meals { display: grid; gap: var(--gap-list); margin-top: var(--gap-list); }
:root[data-look="violet"] .fp-meal {
    grid-template-columns: minmax(0, 1fr) 44px; gap: 12px; padding: 12px;
    border: 1px solid var(--edge); border-radius: var(--r-card); background: var(--card-fill);
}
:root[data-look="violet"] .fp-meal.is-still { grid-template-columns: minmax(0, 1fr); }
:root[data-look="violet"] .fp-meal + .fp-meal { border-top: 1px solid var(--edge); }
:root[data-look="violet"] .fp-meal-open { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; min-height: 96px; border-radius: var(--r-block); }
:root[data-look="violet"] .fp-meal .fp-pic-sq { width: 76px; height: 96px; border-radius: var(--r-block); }
:root[data-look="violet"] .fp-meal-txt { gap: 3px; }
:root[data-look="violet"] .fp-slot { font-size: 0.72rem; line-height: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
:root[data-look="violet"] .fp-meal-txt b { font-size: 1.06rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }
:root[data-look="violet"] .fp-meal .fp-mac { margin-top: 3px; font-size: 0.9rem; color: var(--ink-2); }
:root[data-look="violet"] .fp-mac em { color: var(--ink); }
:root[data-look="violet"] .fp-meal .fp-when { gap: 6px; font-size: 0.84rem; color: var(--ink-2); }
:root[data-look="violet"] .fp-when i { font-size: 15px; color: var(--accent-text); }
:root[data-look="violet"] .fp-meal-acts { flex-direction: column; gap: 8px; }
:root[data-look="violet"] .fp-meal.is-eaten .fp-meal-txt b { color: var(--ink-2); }
:root[data-look="violet"] .fp-meal.is-eaten .fp-pic img { opacity: 0.6; }
/* A meal that fits nothing yet: the plain violet light, one kind line. */
:root[data-look="violet"] .fp-meal.is-none { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 12px; }
:root[data-look="violet"] .fp-meal.is-none .fp-pic-sq { width: 76px; height: 76px; }
:root[data-look="violet"] .fp-meal.is-none .fp-meal-txt b { font-size: 1rem; }
/* The swap: a round button in the raised fill. */
:root[data-look="violet"] .fp-swapbtn { background: var(--surface-2); color: var(--ink); font-size: 1.25rem; transition: background-color var(--dur) ease, transform var(--dur-fast) ease; }
:root[data-look="violet"] .fp-swapbtn:hover { background: var(--line-2); }
:root[data-look="violet"] .fp-swapbtn:active { background: var(--line-2); transform: scale(0.95); }
/* Eaten: Workout's set tick, a ring that fills violet with a white tick. */
:root[data-look="violet"] .fp-meal .fp-tick > span { width: 44px; height: 44px; border: 2px solid rgba(255, 255, 255, 0.45); transition: background-color var(--dur) ease, border-color var(--dur) ease, transform var(--dur-fast) ease; }
:root[data-look="violet"] .fp-tick:active > span { transform: scale(0.94); }
:root[data-look="violet"] .fp-meal .fp-tick svg { width: 20px; height: 20px; }
:root[data-look="violet"] .fp-tick.is-on > span { border-color: transparent; background: var(--violet-fill); color: var(--on-violet); box-shadow: 0 6px 16px rgba(117, 82, 245, 0.35); }
:root[data-look="violet"] .fp-tick:focus-visible > span { outline-color: var(--focus); }

/* Photos: a soft violet light under them; the food icon stays when one fails. */
:root[data-look="violet"] .fp-pic { background: var(--v-plain); color: rgba(255, 255, 255, 0.9); }
:root[data-look="violet"] .fp-pic .ico { --ico-dark: #3d3352; --ico-accent: var(--accent-text); }
:root[data-look="violet"] .fp-pic img { filter: var(--photo-filter); }

/* ---- a step to do: close the gap, next week, updated targets, Premium ended ---- */
:root[data-look="violet"] :is(.fp-gap, .fp-next, .fp-drift, .fp-ended) { border: 1px solid var(--tint-edge); background: var(--tint-fill); }
:root[data-look="violet"] :is(.fp-gap, .fp-next) { padding: 18px; }
:root[data-look="violet"] :is(.fp-gap h3, .fp-next h3) { font-family: var(--font-display); font-stretch: 108%; font-size: var(--title-card); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
:root[data-look="violet"] :is(.fp-gap, .fp-next) > p { margin: 6px 0 14px; font-size: 0.94rem; line-height: 1.5; color: var(--ink-2); }
:root[data-look="violet"] .fp-tag-warn { height: 30px; padding: 0 12px; background: rgba(240, 190, 120, 0.14); color: var(--warn); font-size: 0.8rem; }
:root[data-look="violet"] .fp-gap-row { grid-template-columns: 60px minmax(0, 1fr); margin-bottom: 16px; }
:root[data-look="violet"] .fp-gap-row .fp-pic-sq { width: 60px; height: 60px; border-radius: var(--r-field); }
:root[data-look="violet"] .fp-gap-txt b { font-size: 0.98rem; }
:root[data-look="violet"] .fp-delta { height: 30px; border: 0; background: var(--surface-2); color: var(--ink-2); }
/* A gain is the profile's good change: light violet, never a second green accent. */
:root[data-look="violet"] .fp-delta.is-up { background: var(--accent-soft); color: var(--accent-text); }
:root[data-look="violet"] :is(.fp-gap, .fp-next) .btn { height: 52px; }
/* Next week: the first options as faces in a row, ringed so they cut out of each other. */
:root[data-look="violet"] .fp-next-pics { margin: 0 0 16px 2px; }
:root[data-look="violet"] .fp-next-pics .fp-pic-round { width: 46px; height: 46px; border: 0; box-shadow: 0 0 0 3px var(--surface); }
:root[data-look="violet"] .fp-next-pics .fp-pic-round + .fp-pic-round { margin-left: -8px; }
:root[data-look="violet"] .fp-next-state { margin-bottom: 12px; font-size: 0.94rem; }
:root[data-look="violet"] .fp-next-state i { color: var(--accent-text); }
:root[data-look="violet"] .fp-drift, :root[data-look="violet"] .fp-ended { gap: 14px; margin-bottom: var(--gap-group); padding: 16px 18px; }
:root[data-look="violet"] :is(.fp-drift, .fp-ended) p { font-size: 0.95rem; line-height: 1.5; }
:root[data-look="violet"] .fp-drift-acts { gap: 10px; }
:root[data-look="violet"] .fp-drift-acts .btn { flex: 1 1 0; }

/* The notes about the answers: the soft violet notice (its icon light violet, as
   .v-note's); past the first note they fold behind Show more. */
:root[data-look="violet"] .fp-notes { margin-bottom: var(--gap-group); padding: 14px 16px; border: 0; border-radius: var(--r-row); background: var(--accent-soft); }
:root[data-look="violet"] .fp-notes p { font-size: 0.92rem; line-height: 1.5; }
:root[data-look="violet"] .fp-notes > i { color: var(--accent-text); }
/* Show more and Change answers share one row of text buttons under the note. */
:root[data-look="violet"] .fp-notes > div { display: flex; flex-wrap: wrap; align-items: center; column-gap: 22px; }
:root[data-look="violet"] .fp-notes > div > p { flex: 1 0 100%; }
:root[data-look="violet"] .fp-notes-more[open] { flex: 1 0 100%; }
:root[data-look="violet"] .fp-notes-more > summary {
    display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0 -12px; list-style: none; cursor: pointer;
    color: var(--accent-text); font-size: 0.9rem; font-weight: 600;
}
:root[data-look="violet"] .fp-notes-more > summary::-webkit-details-marker { display: none; }
:root[data-look="violet"] .fp-notes-more[open] > summary { display: none; }
:root[data-look="violet"] .fp-notes-more[open] + .link { margin-top: 0; }

/* Download, and the photo credits: a quiet block button and a plain link. */
:root[data-look="violet"] .fp-pdf { height: 52px; margin-top: var(--gap-section); border-radius: var(--r-block); font-size: 0.98rem; }
:root[data-look="violet"] .fp-next + .fp-pdf, :root[data-look="violet"] .fp-gap + .fp-pdf { margin-top: var(--gap-group); }
:root[data-look="violet"] .fp-credits-link a { color: var(--ink-2); }

/* ---- states: one card, one kind line, one action ---- */
:root[data-look="violet"] .fp-state { padding: 22px 20px 20px; }
:root[data-look="violet"] .fp-state h2 { font-stretch: 108%; font-size: var(--title-card); line-height: 1.15; }
:root[data-look="violet"] .fp-state p { font-size: 0.98rem; color: var(--ink-2); }
:root[data-look="violet"] .fp-state-acts .btn { flex: 1 1 auto; height: 52px; }
:root[data-look="violet"] .fp-state.is-start { border-color: var(--tint-edge); background: var(--tint-fill); }
:root[data-look="violet"] .fp-state.is-start h2 { font-size: 1.6rem; letter-spacing: -0.03em; }
:root[data-look="violet"] .fp-state.is-start .fp-state-acts .btn { width: 100%; }
/* Loading: the shapes of the plan, shimmering. */
:root[data-look="violet"] .fp-skel > * { background: var(--surface); }
:root[data-look="violet"] .fp-skel-tabs { height: 54px; }
:root[data-look="violet"] .fp-skel-strip { height: 90px; margin-bottom: var(--gap-group); border-radius: var(--r-row); background: var(--surface); }
:root[data-look="violet"] .fp-skel-strip i { display: none; }
:root[data-look="violet"] .fp-skel-card { border-color: var(--edge); border-radius: var(--r-card); }
:root[data-look="violet"] .fp-skel-card :is(b, span) {
    border-radius: var(--r-field); background: linear-gradient(100deg, var(--surface-2) 30%, var(--line-2) 50%, var(--surface-2) 70%) 0 0 / 300% 100%;
    animation: v-shimmer 1.2s linear infinite;
}
:root[data-look="violet"] .fp-skel-card span { height: 96px; border-radius: var(--r-block); }

/* ---- Week: every meal at once, a card per day, today tinted ---- */
/* The head: the dates, the average day on a line of its own, then how many days
   hit protein as a caption; the leftover key is a caption under the grid. */
:root[data-look="violet"] .fp-wk-sum { display: block; margin: 4px 2px 0; }
:root[data-look="violet"] .fp-wk-sum b { font-size: var(--title-sec); font-variant-numeric: tabular-nums; white-space: nowrap; }
:root[data-look="violet"] .fp-wk-avg { margin: 6px 0 0; font-size: 0.94rem; line-height: 1.4; text-align: left; color: var(--ink-2); }
:root[data-look="violet"] .fp-wk-avg span { display: inline; font-size: inherit; font-weight: 600; color: var(--ink); }
:root[data-look="violet"] .fp-wk-hit { margin: 10px 2px 16px; font-size: 0.88rem; color: var(--ink-2); }
:root[data-look="violet"] .fp-wk-key { align-items: center; margin: 12px 2px 0; font-size: 0.88rem; color: var(--ink-2); }
:root[data-look="violet"] .fp-wk-key .fp-lo { margin: 0; }
:root[data-look="violet"] .fp-wk-grid { display: grid; gap: 8px; }
:root[data-look="violet"] .fp-wk-row { gap: 6px; padding: 6px; border: 1px solid var(--edge); border-radius: var(--r-row); background: var(--surface); }
:root[data-look="violet"] .fp-wk-row + .fp-wk-row { margin-top: 0; }
:root[data-look="violet"] .fp-wk-row.is-today { border-color: var(--accent-text); background: var(--tint-fill); }
:root[data-look="violet"] .fp-wk-colh { padding: 0 6px; border: 0; background: none; }
:root[data-look="violet"] .fp-wk-colh span { font-size: 0.74rem; font-weight: 600; color: var(--ink-2); }
:root[data-look="violet"] .fp-wk-day { height: 58px; padding-left: 6px; border-radius: var(--r-field); }
:root[data-look="violet"] .fp-wk-day:hover { background: var(--hover); }
:root[data-look="violet"] .fp-wk-day b { font-size: 0.9rem; }
:root[data-look="violet"] .fp-wk-day span { font-size: 0.74rem; color: var(--ink-2); }
:root[data-look="violet"] .fp-wk-row.is-today .fp-wk-day b { color: var(--accent-text); }
:root[data-look="violet"] .fp-wk-tile { height: 58px; border-radius: var(--r-field); transition: transform var(--dur-fast) ease; }
:root[data-look="violet"] .fp-wk-tile:active { transform: scale(0.96); }
:root[data-look="violet"] .fp-wk-tile .fp-pic { border-radius: var(--r-field); }
:root[data-look="violet"] .fp-wk-tile.is-empty .fp-pic { background: var(--bg-2); }
:root[data-look="violet"] .fp-lo { background: var(--violet-fill); color: var(--on-violet); }
:root[data-look="violet"] .fp-wk-tile .fp-lo { box-shadow: 0 0 0 2px rgba(var(--scrim-rgb), 0.6); }
:root[data-look="violet"] :is(.fp-wk-grid, .fp-wk-key) + .fp-card { margin-top: var(--gap-section); }

/* ---- Shopping list: filter chips, the basket bar, a card per aisle ---- */
:root[data-look="violet"] .fp-shop-top { margin: 4px 2px 14px; }
:root[data-look="violet"] .fp-shop-top b { font-size: var(--title-sec); font-variant-numeric: tabular-nums; }
:root[data-look="violet"] .fp-shop-top small { margin-top: 4px; font-size: 0.88rem; color: var(--ink-2); }
:root[data-look="violet"] .fp-shop-top .fp-round { border: 0; background: var(--surface-2); }
:root[data-look="violet"] .fp-shop-top .fp-round:hover { background: var(--line-2); }
:root[data-look="violet"] .fp-chip {
    height: 40px; padding: 0 16px; border: 1px solid var(--edge); background: var(--surface); color: var(--ink-2);
    transition: background-color var(--dur) ease, color var(--dur) ease, border-color var(--dur) ease;
}
:root[data-look="violet"] .fp-chip::after { inset: -2px 0; }
:root[data-look="violet"] .fp-chip:hover { border-color: var(--edge-strong); color: var(--ink); }
:root[data-look="violet"] .fp-chip.is-on { border-color: rgba(var(--violet-rgb), 0.45); background: var(--accent-soft); color: var(--accent-text); }
:root[data-look="violet"] .fp-shop-prog { gap: 10px; margin: 0 2px 6px; }
:root[data-look="violet"] .fp-shop-prog > span { font-size: 0.9rem; color: var(--ink-2); }
:root[data-look="violet"] .fp-bar { height: 10px; background: var(--surface); }
:root[data-look="violet"] .fp-bar i { background: var(--violet-fade); transition: width var(--dur-slow) var(--ease-out); }
:root[data-look="violet"] .fp-aisle { margin-top: var(--gap-list); overflow: hidden; }
:root[data-look="violet"] .fp-aisle:first-of-type { margin-top: var(--gap-group); }
:root[data-look="violet"] .fp-aisle-h { padding: 16px 18px 8px; }
:root[data-look="violet"] .fp-aisle-h h3 { font-family: var(--font-display); font-stretch: 108%; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; }
:root[data-look="violet"] .fp-aisle-h span { font-size: 0.84rem; color: var(--ink-2); }
:root[data-look="violet"] .fp-item { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 14px; min-height: 60px; padding: 8px 18px; border-top-color: var(--divider); transition: background-color var(--dur) ease; }
:root[data-look="violet"] .fp-item:hover { background: var(--hover); }
:root[data-look="violet"] .fp-item-n small { font-size: 0.8rem; color: var(--ink-2); }
:root[data-look="violet"] .fp-amt small { color: var(--ink-2); }
:root[data-look="violet"] .fp-amt.is-taste { color: var(--ink-2); }
/* Ticks: the look's checkbox (square in the list, round on the recipe). */
:root[data-look="violet"] .fp-box { width: 24px; height: 24px; border: 2px solid var(--ink-3); border-radius: 7px; transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease; }
:root[data-look="violet"] .fp-box.is-round { width: 26px; height: 26px; border-radius: 50%; }
:root[data-look="violet"] :is(.fp-item.is-on, .fp-ing.is-on) .fp-box { border-color: transparent; background: var(--violet-fill); color: var(--on-violet); }
:root[data-look="violet"] .fp-item input:focus-visible + .fp-box { outline-color: var(--focus); }
:root[data-look="violet"] .fp-item.is-on .fp-item-n b { color: var(--ink-3); }
:root[data-look="violet"] .fp-spices { padding: 14px 18px 16px; border-top-color: var(--divider); color: var(--ink-2); }
:root[data-look="violet"] .fp-shop-foot { display: flex; gap: 8px; margin: var(--gap-group) 2px 0; font-size: 0.88rem; color: var(--ink-2); }
:root[data-look="violet"] .fp-empty { color: var(--ink-2); }

/* ---- 10b. food sheets (the sheet itself is section 3's) ------------------- */

:root[data-look="violet"] .fp-sheet .sheet-card { --fp-sx: 22px; }
:root[data-look="violet"] .fp-sheet .sheet-card { border-color: var(--edge-strong); }
:root[data-look="violet"] .fp-sfoot { margin-top: 22px; padding-top: 14px; border-top-color: var(--divider); background: var(--surface); }
:root[data-look="violet"] .fp-sfoot .btn { height: 52px; }
:root[data-look="violet"] .fp-round.is-big { width: 54px; height: 54px; border: 0; background: var(--surface-2); }
:root[data-look="violet"] .fp-round.is-big:hover { background: var(--line-2); }
:root[data-look="violet"] .fp-sh-title { font-stretch: 108%; font-size: 1.6rem; letter-spacing: -0.03em; }
:root[data-look="violet"] .fp-sh-date { margin-top: 6px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
/* Over a title (the swap), the date is the kicker, as everywhere in the look. */
:root[data-look="violet"] .fp-sh-date:has(+ .fp-sh-title) { margin: 0 0 4px; line-height: 18px; }
:root[data-look="violet"] .fp-sh-sub { font-size: 0.95rem; color: var(--ink-2); }

/* ---- the recipe: the photo first, then the name, the numbers, what to get ready, the method ---- */
:root[data-look="violet"] .fp-r-photo { aspect-ratio: 16 / 10; border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
:root[data-look="violet"] .fp-r-pcredit { margin: 8px 4px 16px; color: var(--ink-3); }
:root[data-look="violet"] .fp-r-title { font-stretch: 112%; font-size: 1.95rem; letter-spacing: -0.035em; line-height: 1.04; }
:root[data-look="violet"] .fp-r-meta { margin-top: 10px; font-size: 0.9rem; color: var(--ink-2); }
:root[data-look="violet"] .fp-r-sum { margin-top: 10px; font-size: 0.95rem; line-height: 1.55; color: var(--ink-2); }
:root[data-look="violet"] .fp-tag {
    height: 30px; padding: 0 11px; border: 0; background: var(--surface-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    color: var(--ink); font-size: 0.8rem;
}
:root[data-look="violet"] .fp-tag i { font-size: 15px; color: var(--accent-text); }
:root[data-look="violet"] .fp-tag.is-accent { box-shadow: none; background: var(--accent-soft); color: var(--accent-text); }
/* The numbers: one raised strip, protein first in light violet. */
:root[data-look="violet"] .fp-r-mac { margin-top: 16px; border: 0; border-radius: var(--r-row); background: var(--surface-2); }
/* Protein and kcal big, carbs and fat smaller (the day card's strip); brotein's 3px
   drop puts the smaller numbers on the big ones' baseline, and the labels in one line. */
:root[data-look="violet"] .fp-r-mac > div { padding: 12px 0 11px 14px; }
:root[data-look="violet"] .fp-r-mac > div + div { border-left-color: var(--divider); }
:root[data-look="violet"] .fp-r-mac b { font-stretch: 108%; font-size: 1.32rem; letter-spacing: -0.03em; }
:root[data-look="violet"] .fp-r-mac span { color: var(--ink-2); font-size: 0.76rem; }
:root[data-look="violet"] .fp-r-mac .is-s b { padding-top: 3px; font-size: 1.08rem; color: var(--ink-2); }
:root[data-look="violet"] .fp-r-sized { margin-top: var(--gap-list); padding: 12px 14px; border-radius: var(--r-row); background: var(--accent-soft); font-size: 0.9rem; }
:root[data-look="violet"] .fp-r-h { margin: 28px 0 6px; }
:root[data-look="violet"] .fp-r-h h3 { font-family: var(--font-display); font-stretch: 108%; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; }
:root[data-look="violet"] .fp-r-h span { font-size: 0.86rem; color: var(--ink-2); }
:root[data-look="violet"] .fp-mseg { padding: 4px; border: 1px solid var(--line); background: var(--surface-2); }
:root[data-look="violet"] .fp-mseg button { height: 40px; padding: 0 16px; }
:root[data-look="violet"] .fp-mseg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); box-shadow: none; }
:root[data-look="violet"] .fp-ing { min-height: 56px; border-bottom-color: var(--divider); }
:root[data-look="violet"] .fp-ing:hover { background: var(--hover); }
:root[data-look="violet"] .fp-ing:not(.is-on) .fp-box.is-round { border-color: rgba(255, 255, 255, 0.45); }
:root[data-look="violet"] .fp-ing-n small { color: var(--ink-2); }
:root[data-look="violet"] .fp-ing.is-on .fp-ing-n b { color: var(--ink-3); }
:root[data-look="violet"] .fp-r-notes li, :root[data-look="violet"] .fp-r-contains { font-size: 0.88rem; color: var(--ink-2); }
:root[data-look="violet"] .fp-r-notes i { color: var(--accent-text); }
:root[data-look="violet"] .fp-r-contains i { color: var(--warn); }
:root[data-look="violet"] .fp-steps li { grid-template-columns: 30px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom-color: var(--divider); }
:root[data-look="violet"] .fp-sn { width: 30px; height: 30px; background: var(--accent-soft); color: var(--accent-text); }
:root[data-look="violet"] .fp-steps p { margin-top: 4px; font-size: 0.98rem; line-height: 1.55; }
:root[data-look="violet"] .fp-tpill { height: 30px; padding: 0 11px; background: var(--surface-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); color: var(--ink); }
:root[data-look="violet"] .fp-tpill i { font-size: 15px; color: var(--accent-text); }
:root[data-look="violet"] .fp-r-warn { color: var(--ink-2); }
:root[data-look="violet"] .fp-r-credits { margin-top: 20px; padding-top: 12px; border-top-color: var(--divider); color: var(--ink-3); }

/* ---- the swap: what is on now, then the options as one group of rows ---- */
:root[data-look="violet"] .fp-sw-now { margin-top: 16px; padding: 10px 14px 10px 10px; border: 1px solid var(--tint-edge); border-radius: var(--r-row); background: var(--tint-fill); }
:root[data-look="violet"] .fp-sw-now .fp-pic-sq { border-radius: var(--r-field); }
:root[data-look="violet"] .fp-sw-now small { color: var(--ink-2); }
:root[data-look="violet"] .fp-tag-now { height: 30px; padding: 0 12px; background: var(--accent-soft); color: var(--accent-text); font-size: 0.8rem; }
:root[data-look="violet"] .fp-sheet .fp-chips { margin: 16px 0 12px; }
:root[data-look="violet"] .fp-sheet .fp-chip { background: var(--surface-2); }
:root[data-look="violet"] .fp-sheet .fp-chip.is-on { background: var(--accent-soft); }
:root[data-look="violet"] .fp-sw-list { overflow: hidden; border-radius: var(--r-row); background: var(--surface-2); }
:root[data-look="violet"] .fp-sw-row { min-height: 84px; padding: 10px 14px 10px 10px; border-bottom-color: var(--divider); transition: background-color var(--dur) ease; }
:root[data-look="violet"] .fp-sw-row:hover { background: var(--hover); }
:root[data-look="violet"] .fp-sw-row:active { background: var(--press); }
:root[data-look="violet"] .fp-sw-row .fp-pic-sq { border-radius: var(--r-field); }
:root[data-look="violet"] .fp-sw-row .fp-delta { background: var(--line); color: var(--ink); }
/* The group clips its corners, so a row's focus ring is drawn inside it, round at the ends. */
:root[data-look="violet"] :is(.fp-sw-row, .fq-row):focus-visible { outline-offset: -3px; border-radius: 6px; }
:root[data-look="violet"] .fp-sw-list li:first-child .fp-sw-row:focus-visible { border-radius: var(--r-row) var(--r-row) 6px 6px; }
:root[data-look="violet"] .fp-sw-list li:last-child .fp-sw-row:focus-visible { border-radius: 6px 6px var(--r-row) var(--r-row); }
:root[data-look="violet"] .fp-sw-list li:only-child .fp-sw-row:focus-visible { border-radius: var(--r-row); }
:root[data-look="violet"] .fp-sw-row .fp-delta.is-up { background: var(--accent-soft); color: var(--accent-text); }

/* ---- pick your week: the days on top, three options a meal, the two buttons under the thumb ---- */
:root[data-look="violet"] .fp-pick .sheet-card { padding: 0; }
:root[data-look="violet"] .fp-pk-head { padding: 0 22px 14px; border-bottom-color: var(--divider); }
:root[data-look="violet"] .fp-pk-head .fp-sh-title { font-size: 1.7rem; }
:root[data-look="violet"] .fp-pk-days { gap: 4px; margin-top: 14px; }
:root[data-look="violet"] .fp-pk-day {
    gap: 3px; height: 66px; padding-top: 9px; border: 0; border-radius: var(--r-field); background: var(--surface-2); color: var(--ink-2);
    transition: background-color var(--dur) ease;
}
:root[data-look="violet"] .fp-pk-day:hover { background: var(--line); }
:root[data-look="violet"] .fp-pk-day b { font-stretch: 108%; font-size: 1.1rem; }
:root[data-look="violet"] .fp-pk-dots i { background: rgba(255, 255, 255, 0.2); }
:root[data-look="violet"] .fp-pk-dots i.is-on { background: var(--violet-2); }
:root[data-look="violet"] .fp-pk-day.is-cur { background: var(--violet-fill); color: var(--on-violet-2); box-shadow: 0 6px 16px rgba(117, 82, 245, 0.3); }
:root[data-look="violet"] .fp-pk-day.is-cur b { color: var(--on-violet); }
:root[data-look="violet"] .fp-pk-day.is-cur .fp-pk-dots i { background: rgba(255, 255, 255, 0.4); }
:root[data-look="violet"] .fp-pk-day.is-cur .fp-pk-dots i.is-on { background: #fff; }
:root[data-look="violet"] .fp-pk-body { padding: 16px 22px 24px; }
:root[data-look="violet"] .fp-pk-dayline b { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
:root[data-look="violet"] .fp-pk-dayline span { font-size: 0.86rem; color: var(--ink-2); }
:root[data-look="violet"] .fp-pk-slot + .fp-pk-slot { margin-top: 24px; }
:root[data-look="violet"] .fp-pk-slot-h { margin-bottom: 10px; }
:root[data-look="violet"] .fp-pk-slot-h h3 { font-family: var(--font-display); font-stretch: 108%; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; }
:root[data-look="violet"] .fp-pk-slot-h span { font-size: 0.84rem; color: var(--ink-2); }
:root[data-look="violet"] .fp-opts { gap: 8px; }
:root[data-look="violet"] .fp-opt {
    padding-bottom: 12px; border: 1.5px solid transparent; border-radius: var(--r-block); background: var(--surface-2);
    transition: border-color var(--dur) ease, transform var(--dur-fast) ease;
}
:root[data-look="violet"] .fp-opt:hover { border-color: var(--edge-strong); }
:root[data-look="violet"] .fp-opt-pic { border-radius: 16px 16px 0 0; }
:root[data-look="violet"] .fp-opt-best {
    min-height: 24px; padding: 3px 9px; border: 1px solid var(--glass-edge); border-radius: var(--r-pill); background: var(--glass);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
:root[data-look="violet"] .fp-opt-check { width: 28px; height: 28px; background: var(--violet-fill); color: var(--on-violet); box-shadow: 0 4px 12px rgba(var(--scrim-rgb), 0.4); }
:root[data-look="violet"] .fp-opt.is-on { border-color: var(--accent-text); background: var(--tint-fill); box-shadow: none; }
:root[data-look="violet"] .fp-opt-name { margin: 10px 10px 6px; font-size: 0.86rem; }
:root[data-look="violet"] .fp-opt-lo { margin: -2px 10px 6px; }
:root[data-look="violet"] .fp-opt-p { margin: auto 10px 0; }
:root[data-look="violet"] .fp-opt-k { margin: 2px 10px 0; color: var(--ink-2); }
:root[data-look="violet"] .fp-pk-foot { padding: 14px 22px calc(14px + env(safe-area-inset-bottom)); border-top-color: var(--divider); background: var(--surface); }
:root[data-look="violet"] .fp-pk-foot .btn { height: 52px; }
:root[data-look="violet"] .fp-pick .fp-credits-link { margin-top: 18px; }

/* ---- 10c. cook mode: the whole screen, one step at a time ----------------- */

:root[data-look="violet"] .fp-cook { background: var(--fade); }
:root[data-look="violet"] .fp-cook-top { grid-template-columns: 44px minmax(0, 1fr) 44px; padding: 12px 18px 0; }
:root[data-look="violet"] .fp-cook-top .fp-round { width: 44px; height: 44px; }
/* Step 2 of 5 as Workout's kicker, the recipe under it. */
:root[data-look="violet"] .fp-cook-title b { font-size: 0.8rem; line-height: 18px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
:root[data-look="violet"] .fp-cook-title span { margin-top: 1px; font-size: 1rem; font-weight: 600; color: var(--ink); }
/* One segment a step: done violet, this one a softer violet (Workout's set segments). */
:root[data-look="violet"] .fp-prog { gap: 4px; padding: 14px 18px 0; }
:root[data-look="violet"] .fp-prog i { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.13); transition: background-color 0.3s ease; }
:root[data-look="violet"] .fp-prog i.is-done { background: var(--accent); }
:root[data-look="violet"] .fp-prog i.is-on { background: rgba(var(--violet-rgb), 0.55); }
:root[data-look="violet"] .fp-cook-other {
    width: calc(100% - 36px); min-height: 48px; margin: 12px 18px 0; padding: 0 16px; border: 1px solid var(--tint-edge); border-radius: var(--r-row);
    background: var(--tint-fill); font-size: 0.92rem;
}
:root[data-look="violet"] .fp-cook-body { padding: 28px 18px 24px; }
:root[data-look="violet"] .fp-step-text { font-stretch: 108%; font-weight: 700; font-size: 1.9rem; letter-spacing: -0.03em; line-height: 1.16; }
:root[data-look="violet"] .fp-step-text mark { color: var(--accent-text); }
/* The timer: a card with a violet play button while it waits or is paused. Running,
   it turns into Workout's rest bar (violet, its line running into white) and Next
   step steps back to the quiet button, so one violet block shows at a time. Done,
   it is a tinted card again, the clock in light violet, and Next step is violet. */
:root[data-look="violet"] .fp-timer {
    gap: 12px; margin-top: 26px; padding: 14px 14px 20px 22px; border: 1px solid var(--edge); border-radius: 30px;
    background: var(--card-fill); color: var(--ink);
    transition: background-color var(--dur) ease, box-shadow var(--dur) ease;
}
:root[data-look="violet"] .fp-clock { font-stretch: 108%; font-size: 2.6rem; letter-spacing: -0.03em; }
:root[data-look="violet"] .fp-timer small { margin-top: 4px; color: var(--ink-2); font-size: 0.86rem; font-weight: 500; }
:root[data-look="violet"] .fp-plus { height: 44px; border: 0; background: var(--surface-2); color: var(--ink); transition: background-color var(--dur) ease; }
:root[data-look="violet"] .fp-plus:hover { background: var(--line-2); }
:root[data-look="violet"] .fp-play { width: 52px; height: 52px; background: var(--violet-fill); color: var(--on-violet); box-shadow: var(--violet-glow); transition: background-color var(--dur) ease, transform var(--dur-fast) ease; }
:root[data-look="violet"] .fp-play:hover { background: var(--violet-fill-hover); }
:root[data-look="violet"] .fp-play:active { transform: scale(0.96); }
:root[data-look="violet"] .fp-play svg { width: 22px; height: 22px; }
/* The time gone: Workout's rest line, a rounded track inset at the card's foot
   (the bar's width is the share of the timer that has run). None before it starts;
   the card keeps one height in every state, so nothing under it jumps. */
:root[data-look="violet"] .fp-tline { position: absolute; left: 22px; right: 22px; bottom: 8px; height: 4px; overflow: hidden; border-radius: 2px; background: var(--surface-2); }
:root[data-look="violet"] .fp-timer.is-idle .fp-tline { display: none; }
:root[data-look="violet"] .fp-tline .fp-tbar { top: 0; bottom: 0; left: 0; height: auto; border-radius: inherit; background: var(--violet-fade); }
:root[data-look="violet"] .fp-timer.is-on {
    border-color: transparent; background: var(--violet-fill); color: var(--on-violet);
    box-shadow: 0 18px 40px rgba(var(--scrim-rgb), 0.45), 0 8px 24px rgba(117, 82, 245, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
:root[data-look="violet"] .fp-timer.is-on .fp-tline { background: rgba(24, 14, 60, 0.28); }
:root[data-look="violet"] .fp-timer.is-on .fp-tbar { background: linear-gradient(90deg, #a48cff, #f4f0ff 70%, #fff); }
:root[data-look="violet"] .fp-timer.is-on .fp-clock { color: #fff; }
:root[data-look="violet"] .fp-timer.is-on small { color: var(--on-violet-2); }
/* +1 min on the violet: a dark veil under white words (about 6.4:1), never a white one. */
:root[data-look="violet"] .fp-timer.is-on .fp-plus { background: rgba(24, 14, 60, 0.28); color: #fff; }
:root[data-look="violet"] .fp-timer.is-on .fp-plus:hover { background: rgba(24, 14, 60, 0.36); }
:root[data-look="violet"] .fp-timer.is-on .fp-play { background: #fff; color: #5a3be0; box-shadow: none; }
:root[data-look="violet"] .fp-timer.is-on .fp-play:hover { background: #f1edff; }
:root[data-look="violet"] .fp-timer.is-on .fp-play:active { background: #e6deff; }
:root[data-look="violet"] .fp-timer.is-on :focus-visible { outline-color: #fff; }
/* Time is up: the tinted card, the clock and the words light violet, the line gone. */
:root[data-look="violet"] .fp-timer.is-done { border-color: var(--tint-edge); background: var(--tint-fill); }
:root[data-look="violet"] .fp-timer.is-done .fp-tline { display: none; }
:root[data-look="violet"] .fp-timer.is-done .fp-clock { color: var(--accent-text); }
:root[data-look="violet"] .fp-timer.is-done small { color: var(--ink); font-weight: 700; }
:root[data-look="violet"] .fp-timer.is-done .fp-play { background: var(--surface-2); color: var(--ink); box-shadow: none; }
:root[data-look="violet"] .fp-timer.is-done .fp-play:hover { background: var(--line-2); }
/* What this step needs: one card of rows. */
:root[data-look="violet"] .fp-for { margin: 30px 0 10px; font-family: var(--font-display); font-stretch: 108%; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; }
:root[data-look="violet"] .fp-sing { padding: 2px 16px; border: 1px solid var(--edge); border-radius: var(--r-row); background: var(--card-fill); }
:root[data-look="violet"] .fp-sing li { min-height: 52px; border-bottom-color: var(--divider); }
:root[data-look="violet"] .fp-sing li:last-child { border-bottom: 0; }
:root[data-look="violet"] .fp-sing li.is-none { color: var(--ink-2); }
:root[data-look="violet"] .fp-sing b.is-taste { color: var(--ink-2); }
:root[data-look="violet"] .fp-cook-credits { margin-top: 18px; color: var(--ink-3); }
/* The foot: back as a round button, the next step violet; the page fades in under them. */
:root[data-look="violet"] .fp-cook-foot {
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); border-top: 0;
    background: linear-gradient(transparent, var(--page-end) 46%);
}
:root[data-look="violet"] .fp-cook-foot .btn { height: 56px; }
:root[data-look="violet"] .fp-cook:has(.fp-timer.is-on) .fp-cook-foot .btn.accent { border: 1px solid var(--line-2); background: transparent; box-shadow: none; color: var(--ink); }
:root[data-look="violet"] .fp-cook:has(.fp-timer.is-on) .fp-cook-foot .btn.accent:hover { border-color: var(--ink-3); background: var(--hover); }
:root[data-look="violet"] .fp-cook-foot .fp-round.is-big { width: 56px; height: 56px; border: 1px solid var(--edge-strong); background: rgba(255, 255, 255, 0.06); }
:root[data-look="violet"] .fp-cook-foot .fp-round.is-big:hover { background: rgba(255, 255, 255, 0.12); }
:root[data-look="violet"] .fp-round[disabled] { opacity: 0.4; }

/* ---- 10d. food questions (food-questions.js, in the intro's markup) -------
   The intro's question screens: a strip of food photos under a glass back
   button and the progress, the question as a big headline, answers as rows
   with a round chevron. Everything is scoped to the food layer (.fq), so the
   intro's own screens are left to the intro.
   -------------------------------------------------------------------------- */

:root[data-look="violet"] {
    --vf-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4.5 16.5 12 9 19.5' fill='none' stroke='%23cdc5bc' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --vf-caret-violet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4.5 16.5 12 9 19.5' fill='none' stroke='%235a3be0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root[data-look="violet"] .fq-layer { background: var(--fade); }
/* The top: back, the progress, the count; over the strip it is glass. */
:root[data-look="violet"] .fq .intro-top { height: 64px; background: linear-gradient(rgba(var(--scrim-rgb), 0.55), rgba(var(--scrim-rgb), 0)); }
:root[data-look="violet"] .fq .intro-back {
    width: 44px; height: 44px; margin-left: 0; border: 1px solid var(--edge-strong); background: rgba(255, 255, 255, 0.06); color: var(--ink); font-size: 1.25rem;
    transition: background-color var(--dur) ease, transform var(--dur-fast) ease;
}
:root[data-look="violet"] .fq .intro-back:hover { background: rgba(255, 255, 255, 0.12); }
:root[data-look="violet"] .fq .intro-back:active { transform: scale(0.95); }
:root[data-look="violet"] .fq:has(.fq-collage) .intro-back { border-color: var(--glass-edge); background: var(--glass); color: #fff; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
/* The intro's 18px gutter, on the top, the column and the bar. */
:root[data-look="violet"] .fq :is(.intro-top-in, .intro-col) { width: min(var(--intro-col), calc(100% - 36px)); }
:root[data-look="violet"] .fq .intro-bar { padding-right: calc(18px + env(safe-area-inset-right, 0px)); padding-left: calc(18px + env(safe-area-inset-left, 0px)); }
/* The progress: the intro's segments on their dark pill, one a question; done light
   violet, this one violet running into white, the rest faint. */
:root[data-look="violet"] .fq .intro-progress { height: 6px; background: rgba(255, 255, 255, 0.18); }
:root[data-look="violet"] .fq .intro-progress span { background: var(--violet-fade); }
:root[data-look="violet"] .fq .fq-segs {
    display: flex; gap: 3px; height: auto; padding: 8px 10px; border-radius: var(--r-pill);
    background: rgba(var(--scrim-rgb), 0.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
:root[data-look="violet"] .fq .fq-segs i { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.2); }
:root[data-look="violet"] .fq .fq-segs i.is-done { background: var(--violet-2); }
:root[data-look="violet"] .fq .fq-segs i.is-now { background: var(--violet-fade); }
:root[data-look="violet"] .fq .intro-step {
    display: inline-grid; place-items: center; min-width: 0; height: 30px; padding: 0 11px; border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.06); color: var(--ink); font-size: 0.8rem; font-weight: 600;
}
:root[data-look="violet"] .fq:has(.fq-collage) .intro-step { border: 1px solid var(--glass-edge); background: var(--glass); color: #fff; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
/* The strip runs under the top bar and fades into the page. */
:root[data-look="violet"] .fq-collage { height: 196px; margin: -64px 0 0; }
:root[data-look="violet"] .fq-collage .vf-deck { top: 58%; }
:root[data-look="violet"] .fq:has(.fq-collage) .intro-body { position: relative; z-index: 4; margin-top: -40px; padding-top: 0; }

/* The question: Brotein's words as a headline, no bubble; your last answer is
   already in the progress, so it is not said again. */
:root[data-look="violet"] .fq .intro-chat { gap: 12px; }
:root[data-look="violet"] .fq .intro-me, :root[data-look="violet"] .fq .intro-avatar { display: none; }
:root[data-look="violet"] .fq .intro-bot { display: block; }
:root[data-look="violet"] .fq .intro-bubble { padding: 0; border: 0; border-radius: 0; background: none; }
:root[data-look="violet"] .fq .intro-react { margin: 0 0 8px; font-size: 1rem; line-height: 1.4; color: var(--ink-2); }
:root[data-look="violet"] .fq .intro-q { font-stretch: 112%; font-size: 2.1rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.04; text-wrap: balance; }
:root[data-look="violet"] .fq .intro-hint { margin: -2px 0 2px; font-size: 0.98rem; line-height: 1.45; color: var(--ink-2); }

/* Answers: a row each, a round chevron at the end; the one picked turns violet. */
:root[data-look="violet"] .fq .intro-answers { gap: var(--gap-list); margin-top: 8px; }
:root[data-look="violet"] .fq .intro-answer {
    min-height: 64px; padding: 12px 14px 12px 20px; border: 1px solid var(--edge); border-radius: var(--r-row); background: var(--card-fill);
    transition: background-color var(--dur) ease, border-color var(--dur) ease, transform var(--dur-fast) ease;
}
:root[data-look="violet"] .fq .intro-answer:hover { border-color: var(--edge-strong); }
:root[data-look="violet"] .fq .intro-answer-label { font-size: 1.05rem; font-weight: 500; }
:root[data-look="violet"] .fq .intro-answer-note { margin-top: 3px; font-size: 0.86rem; color: var(--ink-2); }
:root[data-look="violet"] .fq .intro-answer::after {
    content: ""; width: 32px; height: 32px; border: 0; background: var(--vf-caret) center / 16px no-repeat, var(--surface-2);
    transition: transform var(--dur) var(--ease-spring);
}
:root[data-look="violet"] .fq .intro-answer.is-on, :root[data-look="violet"] .fq .intro-answer.is-on:hover { border-color: transparent; background: var(--violet-fill); color: var(--on-violet); box-shadow: var(--violet-glow); }
:root[data-look="violet"] .fq .intro-answer.is-on .intro-answer-label { font-weight: 600; }
:root[data-look="violet"] .fq .intro-answer.is-on .intro-answer-note { color: var(--on-violet-2); }
:root[data-look="violet"] .fq .intro-answer.is-on::after { content: ""; border: 0; background: var(--vf-caret-violet) center / 16px no-repeat, #fff; transform: translateX(3px); }
:root[data-look="violet"] .fq .intro-answer.is-none { border-style: dashed; border-color: var(--line-2); background: transparent; }
:root[data-look="violet"] .fq .intro-answer.is-none.is-on { border-style: solid; border-color: transparent; background: var(--violet-fill); }
/* As many as apply (allergies, never eat): a round tick; picked is tinted, not filled,
   so a few picks never flood the screen. */
:root[data-look="violet"] :is(.fq-at-q-allergies, .fq-at-q-avoid) .intro-answer:not(.is-none)::after { width: 24px; height: 24px; border: 2px solid var(--ink-3); background: none; transform: none; }
:root[data-look="violet"] :is(.fq-at-q-allergies, .fq-at-q-avoid) .intro-answer.is-on:not(.is-none) { border-color: var(--accent-text); background: var(--tint-fill); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent-text); }
:root[data-look="violet"] :is(.fq-at-q-allergies, .fq-at-q-avoid) .intro-answer.is-on:not(.is-none) .intro-answer-note { color: var(--ink-2); }
:root[data-look="violet"] :is(.fq-at-q-allergies, .fq-at-q-avoid) .intro-answer.is-on:not(.is-none)::after { border: 0; background: var(--i-check-white) center / 15px no-repeat, var(--violet-fill); }
:root[data-look="violet"] .fq-grid .intro-answer { min-height: 60px; padding: 11px 10px 11px 14px; border-radius: var(--r-row); }
:root[data-look="violet"] .fq-grid .intro-answer-label { font-size: 0.98rem; }
:root[data-look="violet"] .fq-grid .intro-answer:not(.is-none)::after { width: 22px; height: 22px; }
:root[data-look="violet"] .fq-fine { margin-top: 4px; color: var(--ink-2); }

/* Fields (age, height, weight). */
:root[data-look="violet"] .fq .intro-input { height: 56px; border: 1px solid var(--edge); border-radius: var(--r-field); background: var(--surface-2); transition: border-color var(--dur) ease, box-shadow var(--dur) ease; }
:root[data-look="violet"] .fq .intro-input:focus { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(var(--violet-rgb), 0.28); }
:root[data-look="violet"] .fq .intro-suffix { color: var(--ink-2); }
:root[data-look="violet"] .fq .intro-label { color: var(--ink-2); }
:root[data-look="violet"] .fq .intro-seg { border-color: var(--line); background: var(--surface); }
:root[data-look="violet"] .fq .intro-seg > .on { background: var(--violet-fill); color: var(--on-violet); }

/* The main button: the 58px block (the intro's), violet to move on. */
:root[data-look="violet"] .fq .intro-bar { padding-top: 26px; border-top: 0; background: linear-gradient(transparent, var(--page-end) 46%); }
:root[data-look="violet"] .fq .intro-main { height: 58px; border-radius: var(--r-block); font-size: 1.05rem; font-weight: 700; }
/* A main button that cannot be pressed yet: the shared solid rule (section 3). */


/* The check screen: the two targets, every answer in one card of rows, the notes. */
:root[data-look="violet"] .fq-head .intro-title { font-stretch: 112%; font-size: 2.2rem; letter-spacing: -0.04em; line-height: 1.04; }
:root[data-look="violet"] .fq-targets { gap: 2px 24px; margin-top: 16px; }
:root[data-look="violet"] .fq-targets b { font-size: 2.5rem; }
:root[data-look="violet"] .fq-head .intro-sub { color: var(--ink-2); }
:root[data-look="violet"] .fq-rows { margin-top: 22px; overflow: hidden; border: 1px solid var(--edge); border-radius: var(--r-card); background: var(--card-fill); }
:root[data-look="violet"] .fq-row { grid-template-columns: auto minmax(0, 1fr) 32px; min-height: 58px; padding: 8px 12px 8px 18px; border-bottom-color: var(--divider); transition: background-color var(--dur) ease; }
:root[data-look="violet"] .fq-row:last-child { border-bottom: 0; }
:root[data-look="violet"] .fq-row:first-child:focus-visible { border-radius: var(--r-card) var(--r-card) 6px 6px; }
:root[data-look="violet"] .fq-row:last-child:focus-visible { border-radius: 6px 6px var(--r-card) var(--r-card); }
:root[data-look="violet"] .fq-row:active { background: var(--press); }
@media (hover: hover) { :root[data-look="violet"] .fq-row:hover { background: var(--hover); } }
:root[data-look="violet"] .fq-row-label { color: var(--ink-2); }
:root[data-look="violet"] .fq-row-value { font-weight: 600; }
:root[data-look="violet"] .fq-row > i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); font-size: 0.95rem; }
:root[data-look="violet"] .fq-notes { gap: var(--gap-list); margin-top: 20px; }
:root[data-look="violet"] .fq-note { padding: 13px 16px; border: 0; border-radius: var(--r-row); background: var(--accent-soft); color: var(--ink); }
:root[data-look="violet"] .fq-note > i { color: var(--accent-text); }
:root[data-look="violet"] .fq-note.is-warn { background: rgba(240, 190, 120, 0.12); }
:root[data-look="violet"] .fq-note.is-warn > i { color: var(--warn); }
:root[data-look="violet"] .fq-note.is-bad { background: var(--bad-soft); }
:root[data-look="violet"] .fq .intro-fine { color: var(--ink-2); }

/* Building your week: the marks spin in light violet and fill when done. */
:root[data-look="violet"] .fq .intro-building .intro-title { font-stretch: 112%; font-size: 2rem; letter-spacing: -0.04em; }
:root[data-look="violet"] .fq .intro-building-face .intro-avatar { display: block; border: 0; border-radius: 50%; box-shadow: 0 0 0 6px var(--accent-soft), 0 12px 32px rgba(117, 82, 245, 0.35); }
:root[data-look="violet"] .fq .intro-build-mark { border-color: rgba(var(--violet-rgb), 0.25); border-top-color: var(--accent-text); }
:root[data-look="violet"] .fq .intro-build li.is-done .intro-build-mark { border-color: transparent; background: var(--i-check-white) center / 14px no-repeat, var(--violet-fill); }
:root[data-look="violet"] .fq .intro-build li.is-done .intro-build-mark::after { content: none; }
:root[data-look="violet"] .fq .intro-build li span:last-child { color: var(--ink-2); }
:root[data-look="violet"] .fq .intro-build li.is-done span:last-child { color: var(--ink); }

/* ---- 10e. XP shop (shop.html, shop.js) ------------------------------------
   The round back to the profile, the XP to spend on a card of its own, then a
   card per thing to buy. Spending is a money step, so Buy and Book are the
   light buttons (the sign-up demo's rule); violet stays for what is picked.
   -------------------------------------------------------------------------- */

/* The wallet: one row, a violet disc and the XP to spend beside it. */
:root[data-look="violet"] .wallet {
    display: flex; align-items: center; gap: 14px;
    width: 100%; min-height: 72px; padding: 12px 18px 12px 14px; border: 1px solid var(--edge); border-radius: var(--r-card); background: var(--card-fill); text-align: left;
}
:root[data-look="violet"] .wallet > i,
:root[data-look="violet"] .wallet > i.v-only[hidden] { display: grid !important; }
:root[data-look="violet"] .wallet > i {
    flex: none; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: var(--violet-fill); box-shadow: var(--violet-glow); color: #fff; font-size: 1.35rem;
}
:root[data-look="violet"] .wallet > i .ico { --ico-accent: #fff; --ico-dark: #6d4ef0; }
:root[data-look="violet"] .wallet b { font-size: 2rem; letter-spacing: -0.04em; line-height: 1; }
:root[data-look="violet"] .wallet span { margin: 0; font-size: 0.94rem; color: var(--ink-2); }
:root[data-look="violet"] .main:has(.wallet) .page-head { margin-bottom: var(--gap-section); }

/* A card per thing to buy: an icon tile, the name, two quiet lines, then the action. */
:root[data-look="violet"] .shop { gap: var(--gap-list); }
:root[data-look="violet"] .shop-card { gap: 16px; padding: 18px; }
:root[data-look="violet"] .shop-top { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; }
:root[data-look="violet"] .shop-icon { width: 48px; height: 48px; border-radius: var(--r-field); background: var(--surface-2); color: var(--accent-text); font-size: 1.45rem; }
:root[data-look="violet"] .shop-icon .ico { --ico-accent: var(--accent-text); --ico-dark: var(--surface-2); }
:root[data-look="violet"] .shop-copy h2 { margin: 1px 0 6px; font-family: var(--font-display); font-stretch: 108%; font-size: var(--title-card); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
:root[data-look="violet"] .shop-copy p { font-size: 0.94rem; line-height: 1.5; color: var(--ink-2); }
/* The rest of what a thing does: a caption under its action (flex, past .v-only's revert). */
:root[data-look="violet"] .shop-card .v-caption.v-only[hidden] { display: flex !important; }
:root[data-look="violet"] .shop-card .v-caption { margin-top: -4px; }
:root[data-look="violet"] .shop-foot { gap: 12px; padding-top: 16px; border-top-color: var(--divider); }
:root[data-look="violet"] .shop-foot .sub { font-size: 0.92rem; line-height: 1.45; color: var(--ink-2); }
:root[data-look="violet"] .shop-card :is(#buySaver, #buyHoliday) {
    height: 52px; padding: 0 24px; border: 0; background: var(--ink); color: var(--bg); box-shadow: none; font-weight: 700;
}
:root[data-look="violet"] .shop-card :is(#buySaver, #buyHoliday):hover { background: #fff; }
:root[data-look="violet"] .shop-card :is(#buySaver, #buyHoliday):active { transform: scale(0.98); }
:root[data-look="violet"] .shop-card .status:not(:empty) { padding: 10px 14px; border-radius: var(--r-field); background: var(--surface-2); font-size: 0.9rem; font-weight: 600; }
:root[data-look="violet"] .shop-card .status.ok { background: var(--ok-soft); color: var(--ok); }
:root[data-look="violet"] .shop-card .status.bad { background: var(--bad-soft); color: var(--bad); }

/* The holiday: how long as the segmented control (the price under each), when as a field. */
:root[data-look="violet"] .holiday-form { gap: 16px; }
:root[data-look="violet"] .holiday-len > button { height: auto; min-height: 56px; padding: 6px 8px; font-size: 0.95rem; }
:root[data-look="violet"] .holiday-len > button small { font-size: 0.76rem; color: var(--ink-2); }
:root[data-look="violet"] .holiday-len > button.on small { color: var(--accent-text); }
:root[data-look="violet"] .holiday-date-control { height: 56px; border: 1px solid var(--edge); border-radius: var(--r-field); background: var(--surface-2); transition: border-color var(--dur) ease, box-shadow var(--dur) ease; }
:root[data-look="violet"] .holiday-date-control:hover { border-color: var(--edge-strong); }
:root[data-look="violet"] .holiday-date-control:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(var(--violet-rgb), 0.28); }
:root[data-look="violet"] .holiday-date-display { font-size: 1.05rem; font-weight: 600; }
/* What is booked: a row each in the raised fill. */
:root[data-look="violet"] .bookings { gap: 8px; }
:root[data-look="violet"] .booking { min-height: 60px; padding: 8px 8px 8px 16px; border-radius: var(--r-row); background: var(--surface-2); }
:root[data-look="violet"] .booking .sub { color: var(--ink-2); }
:root[data-look="violet"] .booking .btn { height: 44px; }
:root[data-look="violet"] .shop-earn { margin: var(--gap-group) 4px 0; font-size: 0.9rem; line-height: 1.5; color: var(--ink-2); }

/* ---- 10f. Premium (upgrade.html, pricing.html) ----------------------------
   The intro paywall's presentation: a band of photos under a round glass way
   back, the title, the plans as cards with Yearly picked and its saving on a
   violet band, the light button (money), and plain terms under it. The same
   prices as everywhere: $59.99 a year, $7.99 a month, 7 days free.
   The plan cards (.plan-choice-opt) are the intro's markup;
   these rules are kept to .up and .pricing so the intro can style its own.
   -------------------------------------------------------------------------- */

/* ---- upgrade: an app page under Profile, so no public bar on top ---- */
:root[data-look="violet"] body:has(> main.up) > header.wrap { display: none; }
:root[data-look="violet"] .up { position: relative; width: min(560px, calc(100% - 36px)); padding-top: 0; }
:root[data-look="violet"] .vu-band { height: 270px; margin: 0 calc(50% - 50vw) -36px; }
:root[data-look="violet"] .vu-band .vf-deck { top: 54%; }
:root[data-look="violet"] .vu-band .vf-deck > span { width: 136px; height: 170px; }
/* An id, to weigh as much as the shared back rule (its list holds an id). */
:root[data-look="violet"] #vuBack { position: absolute; z-index: 6; top: calc(14px + env(safe-area-inset-top, 0px)); left: 0; }
:root[data-look="violet"] .up > #upTitle { position: relative; z-index: 4; font-size: 2.35rem; line-height: 1.02; letter-spacing: -0.04em; text-align: center; }
:root[data-look="violet"] .up > #upLead { position: relative; z-index: 4; max-width: 34ch; margin: 12px auto 0; font-size: 1rem; line-height: 1.5; text-align: center; color: var(--ink-2); }
/* The buy column first, on the page itself (not a card); what you get after it. */
:root[data-look="violet"] .up .up-grid { grid-template-columns: minmax(0, 1fr); gap: var(--gap-section); margin-top: 22px; }
:root[data-look="violet"] .up .up-buy { order: -1; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
:root[data-look="violet"] .up .up-buy > h3 { display: none; }
:root[data-look="violet"] .up .up-buy .plan-choice { margin: 0; }

/* The plans: the name and its note on the left, the price on the right, a round
   tick at the end; the yearly saving rides on a violet band across the top. */
:root[data-look="violet"] :is(.up, .pricing) .plan-choice { gap: var(--gap-list); }
:root[data-look="violet"] :is(.up, .pricing) .plan-choice-opt {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top price" "note price"; align-items: center; gap: 2px 12px;
    min-height: 84px; padding: 16px 62px 16px 20px; border: 1px solid var(--edge-strong); border-radius: var(--r-row); background: var(--card-fill);
    transition: border-color var(--dur) ease, background-color var(--dur) ease, transform var(--dur-fast) ease;
}
:root[data-look="violet"] .up .plan-choice-opt:hover { border-color: var(--ink-3); }
:root[data-look="violet"] :is(.up, .pricing) .plan-choice-opt:has(.plan-choice-save) { padding-top: 46px; }
:root[data-look="violet"] :is(.up, .pricing) .plan-choice-top { grid-area: top; }
:root[data-look="violet"] :is(.up, .pricing) .plan-choice-opt:not(:has(.plan-choice-note)) .plan-choice-top { grid-row: 1 / 3; }
:root[data-look="violet"] :is(.up, .pricing) .plan-choice-top b { font-family: var(--font-display); font-stretch: 108%; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
:root[data-look="violet"] :is(.up, .pricing) .plan-choice-note { grid-area: note; font-size: 0.9rem; color: var(--ink-2); }
:root[data-look="violet"] :is(.up, .pricing) .plan-choice-price { grid-area: price; display: grid; justify-items: end; gap: 1px; font-size: 0.86rem; line-height: 1.2; color: var(--ink-2); text-align: right; white-space: nowrap; }
:root[data-look="violet"] :is(.up, .pricing) .plan-choice-price [data-local-price] { font-family: var(--font-display); font-stretch: 108%; font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
:root[data-look="violet"] :is(.up, .pricing) .plan-choice-save {
    position: absolute; top: 0; left: 0; right: 0; justify-content: center; height: 30px; padding: 0 12px; border-radius: calc(var(--r-row) - 1px) calc(var(--r-row) - 1px) 0 0;
    background: var(--violet-fill); color: var(--on-violet); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
:root[data-look="violet"] .up .plan-choice-opt::after { right: 18px; width: 28px; height: 28px; margin-top: -14px; border: 2px solid var(--ink-3); }
:root[data-look="violet"] .up .plan-choice-opt:has(.plan-choice-save)::after { margin-top: 1px; }
:root[data-look="violet"] .up .plan-choice-opt[aria-checked="true"] { padding: 16px 62px 16px 20px; border: 2px solid var(--accent-text); background: var(--tint-fill); }
:root[data-look="violet"] .up .plan-choice-opt[aria-checked="true"]:has(.plan-choice-save) { padding-top: 46px; }
:root[data-look="violet"] .up .plan-choice-opt[aria-checked="true"] .plan-choice-save { top: -1px; left: -1px; right: -1px; }
:root[data-look="violet"] .up .plan-choice-opt[aria-checked="true"] .plan-choice-price [data-local-price] { color: var(--accent-text); }
:root[data-look="violet"] .up .plan-choice-opt[aria-checked="true"]::after { content: ""; right: 17px; border: 0; background: var(--i-check-white) center / 16px no-repeat, var(--violet-fill); box-shadow: 0 4px 12px rgba(117, 82, 245, 0.35); }
:root[data-look="violet"] .up .plan-choice-opt[aria-disabled="true"] { opacity: 0.6; }
:root[data-look="violet"] .up .plan-choice-opt:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* The saving spelled out under the plans (the intro paywall's line). */
:root[data-look="violet"] .up .vu-anchor { margin: 12px 4px 0; font-size: 0.88rem; line-height: 1.5; color: var(--ink-2); text-align: center; text-wrap: balance; }
:root[data-look="violet"] .up .up-buy:has(#upgradeButton[hidden]) .vu-anchor { display: none; }

/* The light button for money, then plain terms. */
:root[data-look="violet"] .up .up-buy .note { margin: 12px 4px 0; font-size: 0.84rem; line-height: 1.5; color: var(--ink-2); text-align: center; }
:root[data-look="violet"] .up .vu-buybar:has(> #upgradeButton[hidden]) { display: none; }
:root[data-look="violet"] .up #upgradeButton {
    width: 100%; height: 58px; margin-top: 16px; border: 0; border-radius: var(--r-block); background: var(--ink); color: var(--bg); box-shadow: none; font-size: 1.05rem; font-weight: 700;
}
:root[data-look="violet"] .up #upgradeButton:hover { background: #fff; }
:root[data-look="violet"] .up #upgradeButton:active { transform: scale(0.98); }
:root[data-look="violet"] .up :is(#manage, #notNow) { height: 52px; border-radius: var(--r-block); font-size: 1rem; }
:root[data-look="violet"] .up .up-state { gap: 12px; margin-top: 16px; padding: 14px 16px; border: 1px solid var(--tint-edge); border-radius: var(--r-row); background: var(--tint-fill); }
:root[data-look="violet"] .up .up-state i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--violet-fill); color: #fff; font-size: 0.95rem; }
:root[data-look="violet"] .up .up-buy .status:not(:empty) { margin-top: 12px; text-align: center; font-size: 0.9rem; }
:root[data-look="violet"] .up #upNote { margin-top: 14px; }

/* What you get: a heading and a row each, an icon tile per row. */
:root[data-look="violet"] .up .what { padding: 20px 18px 8px; }
:root[data-look="violet"] .up .what h3 { margin: 0; font-family: var(--font-display); font-stretch: 108%; font-size: var(--title-card); font-weight: 800; letter-spacing: -0.02em; }
:root[data-look="violet"] .up .what .sub { margin-top: 4px; color: var(--ink-2); }
:root[data-look="violet"] .up .what ul { gap: 0; margin-top: 12px; }
:root[data-look="violet"] .up .what li { grid-template-columns: 42px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--divider); }
:root[data-look="violet"] .up .what li i { width: 42px; height: 42px; border-radius: var(--r-field); background: var(--surface-2); color: var(--accent-text); font-size: 1.3rem; }
:root[data-look="violet"] .up .what li i .ico { --ico-accent: var(--accent-text); --ico-dark: var(--surface-2); }
:root[data-look="violet"] .up .what li b { font-size: 1rem; font-weight: 600; }
:root[data-look="violet"] .up .what li span { color: var(--ink-2); }
:root[data-look="violet"] .up + .foot { margin-top: 56px; }

/* ---- pricing: the public page, the same band and plan cards ---- */
:root[data-look="violet"] .wrapm > .vu-band {
    height: 236px; margin: -6px calc(50% - 50vw) -34px;
    -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 56%, transparent 98%); mask-image: linear-gradient(transparent, #000 16%, #000 56%, transparent 98%);
}
:root[data-look="violet"] .wrapm > .vu-band::after { content: none; }
:root[data-look="violet"] .wrapm > .vu-band + .center { position: relative; z-index: 4; }
:root[data-look="violet"] .wrapm > .center h1.display { letter-spacing: -0.045em; }
:root[data-look="violet"] .wrapm > .center .lead { font-size: 1.02rem; line-height: 1.55; color: var(--ink-2); }
/* The free week: a quiet violet line of its own, a fact, not a button. */
:root[data-look="violet"] .pricing-trial {
    display: inline-flex; align-items: center; min-height: 40px; margin-top: 18px; padding: 8px 16px; border-radius: var(--r-pill);
    background: var(--accent-soft); color: var(--accent-text); font-size: 0.92rem; text-wrap: balance;
}
:root[data-look="violet"] .pricing { gap: var(--gap-list); margin-top: var(--gap-section); }
:root[data-look="violet"] .pricing .tier { padding: 22px 20px 20px; }
:root[data-look="violet"] .pricing .tier h3 { margin: 0; font-family: var(--font-display); font-stretch: 108%; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
:root[data-look="violet"] .pricing .tier .sub { margin-top: 4px; color: var(--ink-2); }
:root[data-look="violet"] .pricing .tier .price { margin-top: 16px; font-stretch: 108%; font-size: 2.8rem; }
:root[data-look="violet"] .pricing .tier .price small { color: var(--ink-2); }
:root[data-look="violet"] .pricing .tier ul { gap: 12px; margin: 20px 0 24px; }
:root[data-look="violet"] .pricing .tier li { color: var(--ink); }
:root[data-look="violet"] .pricing .tier li i { color: var(--accent-text); }
:root[data-look="violet"] .pricing .tier .btn { align-self: stretch; height: 52px; border-radius: var(--r-block); font-size: 1rem; }
/* Premium: the tinted card with the light violet rim, not a violet flood; the light button. */
:root[data-look="violet"] .pricing .tier.rec { border: 1.5px solid var(--accent-text); background: var(--tint-fill); box-shadow: none; color: var(--ink); }
:root[data-look="violet"] .pricing .tier.rec :is(.sub, li) { color: var(--ink); }
:root[data-look="violet"] .pricing .tier.rec .sub { color: var(--ink-2); }
:root[data-look="violet"] .pricing .tier.rec li i { color: var(--accent-text); }
:root[data-look="violet"] .pricing .tier.rec :is(.price, .price-alt) { display: none; }
:root[data-look="violet"] .pricing .tier.rec .btn { border: 0; background: var(--ink); color: var(--bg); font-weight: 700; }
:root[data-look="violet"] .pricing .tier.rec .btn:hover { background: #fff; }
:root[data-look="violet"] .pricing .tier .btn.is-current { opacity: 1; border: 0; background: var(--surface-2); color: var(--ink-2); }
/* The two prices as two divided rows in the card: information, not a choice (the
   plan is picked on Upgrade), so no rims, no ticks, nothing to press. */
:root[data-look="violet"] .vu-prices { margin-top: 14px; border-top: 1px solid var(--divider); }
:root[data-look="violet"] .vu-price { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 12px 0; border-bottom: 1px solid var(--divider); }
:root[data-look="violet"] .vu-price-l { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
:root[data-look="violet"] .vu-price-l > b { font-family: var(--font-display); font-stretch: 108%; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; }
:root[data-look="violet"] .vu-best {
    display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: var(--r-pill);
    background: var(--accent-soft); color: var(--accent-text); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
:root[data-look="violet"] .vu-price-note { flex-basis: 100%; font-size: 0.88rem; color: var(--ink-2); }
:root[data-look="violet"] .vu-price-r { flex: none; font-size: 0.86rem; color: var(--ink-2); text-align: right; white-space: nowrap; }
:root[data-look="violet"] .vu-price-r b { display: block; font-family: var(--font-display); font-stretch: 108%; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); }
/* The table of what each includes. */
:root[data-look="violet"] .compare { margin-top: var(--gap-list); padding: 6px 18px 4px; }
/* Fourteen ticks: the soft violet, so the table never floods. */
:root[data-look="violet"] .compare .yes { width: 26px; height: 26px; background: var(--accent-soft); color: var(--accent-text); font-size: 0.85rem; }
:root[data-look="violet"] .compare .no { color: var(--ink-2); }
:root[data-look="violet"] .more { margin-top: 22px; font-size: 0.9rem; line-height: 1.55; color: var(--ink-2); }

/* ---- 10g. computers, small phones, reduced motion ------------------------- */

@media (min-width: 1081px) {
    /* Workout's column width beside the rail, so the meals and the week have room. */
    :root[data-look="violet"] .fp { max-width: 796px; }
    /* The strip tops the column as a rounded card (the profile's on a computer). */
    :root[data-look="violet"] .vf-collage:not(.fq-collage, .vu-band) { height: 216px; margin: 0 0 2px; border-radius: var(--r-feature); }
    :root[data-look="violet"] .fp.has-collage #fpAnswers { top: 12px; right: 12px; }
    :root[data-look="violet"] .fp.has-collage .fp-head { margin-top: -20px; }
    /* The sticky top wears the sheet's own lit top, so it never shows as a band. */
    :root[data-look="violet"] .fp-sheet .sheet-top { background: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.031)), var(--surface); }
    :root[data-look="violet"] .fp-cook-top { padding-top: 22px; }
    /* The questions keep the intro's column; the strip runs the column's width. */
    :root[data-look="violet"] .fq-collage {
        width: min(560px, 100%); margin: -64px auto 0;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(#000 56%, transparent 98%);
        mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(#000 56%, transparent 98%);
        -webkit-mask-composite: source-in; mask-composite: intersect;
    }
    /* Premium: the band as a rounded card over the paywall column. */
    :root[data-look="violet"] .up { padding-top: 26px; }
    :root[data-look="violet"] .up > .vu-band { height: 250px; margin: 0 0 -30px; border-radius: var(--r-feature); }
    :root[data-look="violet"] #vuBack { top: 40px; left: 14px; }
    :root[data-look="violet"] .wrapm > .vu-band {
        width: min(760px, 100%); margin: 0 auto -40px;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(transparent, #000 16%, #000 56%, transparent 98%);
        mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(transparent, #000 16%, #000 56%, transparent 98%);
        -webkit-mask-composite: source-in; mask-composite: intersect;
    }
}
/* Pricing on a wide screen: the two plans side by side, the same height. */
@media (min-width: 761px) {
    :root[data-look="violet"] .pricing { gap: 14px; }
}
/* Phones: Pricing keeps the look's 18px gutter; Upgrade's main button rides in a bar
   at the foot while the plans are on screen, as the intro paywall's does. */
@media (max-width: 900px) {
    :root[data-look="violet"] .wrapm:has(> .pricing) { width: calc(100% - 36px); }
}
@media (max-width: 760px) {
    :root[data-look="violet"] .up .vu-buybar {
        position: sticky; bottom: 0; z-index: 5; margin: 4px -18px 0; padding: 14px 18px calc(12px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(rgba(var(--scrim-rgb), 0), var(--page-end) 34%);
    }
    :root[data-look="violet"] .up .vu-buybar #upgradeButton { margin-top: 0; }
}
/* Short phones (an iPhone SE): lower photo strips, so the meals and the plans start sooner. */
@media (max-width: 760px) and (max-height: 740px) {
    :root[data-look="violet"] .vf-collage:not(.fq-collage, .vu-band) { height: 156px; }
    :root[data-look="violet"] .up > .vu-band { height: 176px; margin-bottom: -30px; }
    :root[data-look="violet"] .up > .vu-band .vf-deck > span { width: 112px; height: 140px; }
    :root[data-look="violet"] .up > #upLead { margin-top: 8px; font-size: 0.94rem; }
    :root[data-look="violet"] .up .up-grid { margin-top: 16px; }
}
@media (max-width: 380px) {
    :root[data-look="violet"] .fp-stat b { font-size: 1.22rem; }
    :root[data-look="violet"] .fp-stat.is-s b { font-size: 1rem; }
    :root[data-look="violet"] .fp-meal-open { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
    :root[data-look="violet"] .fp-meal .fp-pic-sq { width: 64px; height: 84px; }
    :root[data-look="violet"] .fp-strip-n { width: 32px; height: 32px; font-size: 0.92rem; }
    :root[data-look="violet"] .fq .intro-q { font-size: 1.85rem; }
    :root[data-look="violet"] .fp-step-text { font-size: 1.7rem; }
    :root[data-look="violet"] .up > #upTitle { font-size: 2.1rem; }
    :root[data-look="violet"] .vu-band { height: 236px; }
}
@media (prefers-reduced-motion: reduce) {
    :root[data-look="violet"] :is(.fp-tabs button, .fp-strip button, .fp-round, .fp-swapbtn, .fp-tick > span, .fp-chip, .fp-bar i, .fp-wk-tile, .fp-item, .fp-ing, .fp-sw-row, .fp-pk-day, .fp-opt, .fp-prog i, .fp-timer, .fp-plus, .fp-play,
        .fq .intro-answer, .fq .intro-back, .fq-row, .holiday-date-control, .up .plan-choice-opt),
    :root[data-look="violet"] .fq .intro-answer::after { transition: none; }
    :root[data-look="violet"] :is(.fp-tick:active > span, .fp-wk-tile:active, .fp-round:active, .fp-swapbtn:active, .fp-play:active, .fq .intro-back:active) { transform: none; }
    :root[data-look="violet"] .fq .intro-answer.is-on::after { transform: none; }
    :root[data-look="violet"] .fp-skel-card :is(b, span) { animation: none; }
}

/* The shop's own confirm: spending is the money step, so its button is the light one too. */
:root[data-look="violet"] body:has(.shop) dialog.app-notice .app-notice__actions .btn.accent:not(.is-danger) { border: 0; background: var(--ink); color: var(--bg); box-shadow: none; font-weight: 700; }
:root[data-look="violet"] body:has(.shop) dialog.app-notice .app-notice__actions .btn.accent:not(.is-danger):hover { background: #fff; }

/* ==========================================================================
   11. Account and info: Settings, Log in, the Gym finder, the Admin panel,
   the public pages (Privacy, Terms, Credits, Collaborations, Contact) and the
   two standalone pages (404 and offline). The few pieces only this look shows
   are written class="v-only" hidden in the HTML, or come from the scripts
   behind their VIOLET flag.

   11b. Settings     11c. Log in     11d. Gym finder     11e. Admin
   11f. public pages     11g. 404 and offline
   ========================================================================== */

/* ---- 11b. Settings (settings.html, settings.js) ---------------------------
   The page reads like the profile's More list: a section heading on the page,
   one quiet line under it, then each setting on a card of its own with an
   icon tile. Single things (your plan, the body stats fields) are one card;
   actions that leave the page are rows with a round chevron. settings.js puts
   Appearance after the subscription: in this look only the language works there.
   -------------------------------------------------------------------------- */

:root[data-look="violet"] .settings { gap: var(--gap-section); }
:root[data-look="violet"] .settings > .topbar { margin-bottom: -4px; }

/* Sections sit on the page: no card around them, the heading in Archivo. */
:root[data-look="violet"] .settings > :is(#appearance, #account, #subscription, #privacy, #adminCard, #delete) {
    display: flex; flex-direction: column; gap: var(--gap-list);
    padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}
:root[data-look="violet"] .settings > section:not(#save-account) > h3 {
    margin: 0; font-family: var(--font-display); font-stretch: 108%; font-size: var(--title-sec); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
}
:root[data-look="violet"] .settings > section:not(#save-account) > .sub {
    margin: -6px 0 4px !important; max-width: 52ch; font-size: 0.95rem; line-height: 1.45; color: var(--ink-2);
}
/* Empty status lines take no room (the page keeps them for screen readers). */
:root[data-look="violet"] .settings > section > .status:not(:empty) { margin: 0; font-size: 0.9rem; }

/* What this look leaves out: the theme and accent choices (one look, always
   dark: a read-only Theme row says so; what was picked stays saved for the
   default look), their notes, the language's second line, and the subscription's
   line, which the plan card already says. */
:root[data-look="violet"] #appearance > .settings-row:has(> :is(.theme-seg, .swatches)),
:root[data-look="violet"] :is(#customAccentNote, #customAccentStatus, #languageNote, #appearance > .sub, #subscription > .sub) { display: none !important; }

/* A setting: icon tile, its name and a line under it, the control on the right
   (or under it on a phone, for the wide ones). */
:root[data-look="violet"] .settings .settings-row {
    display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px;
    min-height: 64px; padding: 11px 14px 11px 12px;
    border: 1px solid var(--edge); border-radius: var(--r-row); background: var(--card-fill);
}
:root[data-look="violet"] .settings .settings-row > .v-tile { grid-column: 1; align-self: start; }
:root[data-look="violet"] .settings .settings-row > div:first-of-type { grid-column: 2; min-width: 0; }
:root[data-look="violet"] .settings .settings-row b { font-size: 1.02rem; font-weight: 500; line-height: 1.3; }
:root[data-look="violet"] .settings .settings-row span { margin-top: 2px; font-size: 0.86rem; line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
:root[data-look="violet"] .settings .settings-row > :is(form, .op-lang-pick) { grid-column: 1 / -1; }
:root[data-look="violet"] .settings .settings-row .save-it { min-height: 44px; margin-left: 6px; color: var(--accent-text); }

/* Language: the field under the words. */
:root[data-look="violet"] .settings .op-lang-pick { width: 100%; }
:root[data-look="violet"] .settings .op-lang-pick .inp { max-width: none; height: 50px; }

/* Username: Change on the right; its form opens under the row, full width. */
:root[data-look="violet"] .settings .handle-note { color: var(--ink-3); font-size: 0.82rem; }
:root[data-look="violet"] #usernameEdit { grid-column: 3; }
:root[data-look="violet"] .settings .handle-form { max-width: none; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--divider); }
:root[data-look="violet"] .settings .handle-form .inp { max-width: none; height: 50px; }

/* Body stats: a section of its own on the page (the form's <b> as its heading,
   one line under it), the fields on one card, Save under the card, as the
   plan's buttons are. */
:root[data-look="violet"] #statsForm { display: flex; flex-direction: column; margin-top: calc(var(--gap-section) - var(--gap-list)) !important; }
:root[data-look="violet"] #statsForm > b {
    margin: 0 !important; font-family: var(--font-display); font-stretch: 108%; font-size: var(--title-sec); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
}
:root[data-look="violet"] #statsForm > .sub { margin: 4px 0 var(--gap-list); max-width: 52ch; font-size: 0.95rem; line-height: 1.45; color: var(--ink-2); }
:root[data-look="violet"] #statsForm .fields.two {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; margin: 0; padding: 18px;
    border: 1px solid var(--edge); border-radius: var(--r-card); background: var(--card-fill);
}
/* On a phone weight (with its unit) and gender take the width; wider, the
   four sit two by two. */
@media (max-width: 640px) {
    :root[data-look="violet"] #statsForm .fields.two > .fld:is(:first-child, :last-child) { grid-column: 1 / -1; }
}
:root[data-look="violet"] #statsForm .inp { height: 52px; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
:root[data-look="violet"] #statsForm .seg { padding: 3px; }
:root[data-look="violet"] #statsForm .seg > * { min-height: 44px; }
:root[data-look="violet"] #statsForm .actions { gap: 14px; margin-top: 12px; }
:root[data-look="violet"] #statsForm .actions .btn { height: 50px; padding: 0 24px; font-size: 0.95rem; }

/* Your plan: one card with the plan, its price and the line about it; the
   buttons under it on the page. Going Premium is a money step: the light button. */
:root[data-look="violet"] #subscription .plan-line {
    gap: 10px 12px; padding: 18px; border: 1px solid var(--edge); border-radius: var(--r-card); background: var(--card-fill);
}
:root[data-look="violet"] #subscription .plan-line .chip { height: 30px; font-size: 0.8rem; }
:root[data-look="violet"] #subscription .plan-line .price { font-size: 1.9rem; font-variant-numeric: tabular-nums; }
:root[data-look="violet"] #subscription .plan-line .price small { color: var(--ink-2); font-size: 0.9rem; }
:root[data-look="violet"] #subscription .plan-line > .sub { margin: 2px 0 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink-2); }
:root[data-look="violet"] #subscription .plan-note-line { margin-top: 6px; color: var(--ink-3); font-size: 0.86rem; }
:root[data-look="violet"] #subscription > .row { margin-top: 0 !important; }
:root[data-look="violet"] #subscription > .row .btn { height: 50px; padding: 0 24px; font-size: 0.95rem; }
:root[data-look="violet"] #subscription #goPremium { border-color: transparent; background: var(--ink); color: var(--bg); box-shadow: none; }
:root[data-look="violet"] #subscription #goPremium:hover { background: #fff; }

/* Rows that leave the page (Your data, Admin): an icon tile, the name, a round chevron. */
:root[data-look="violet"] #privacy > .row { display: grid; gap: var(--gap-list); }
:root[data-look="violet"] :is(#privacy > .row, #adminCard) > a.btn {
    position: relative; justify-content: flex-start; gap: 12px; width: 100%; height: auto; min-height: 64px; padding: 10px 14px 10px 12px;
    border: 1px solid var(--edge); border-radius: var(--r-row); background: var(--card-fill); color: var(--ink);
    font-size: 1.02rem; font-weight: 500; text-align: left; white-space: normal;
}
:root[data-look="violet"] :is(#privacy > .row, #adminCard) > a.btn:hover { transform: none; border-color: var(--edge-strong); background: var(--card-fill); }
:root[data-look="violet"] :is(#privacy > .row, #adminCard) > a.btn:active { transform: scale(0.99); }
/* The round chevron: a raised circle (::before) with the caret over it (::after). */
:root[data-look="violet"] :is(#privacy > .row, #adminCard) > a.btn::before {
    content: ""; position: absolute; right: 14px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; background: var(--surface-2);
}
:root[data-look="violet"] :is(#privacy > .row, #adminCard) > a.btn::after {
    content: ""; position: relative; z-index: 1; flex: none; width: 32px; height: 32px; margin-left: auto;
    background: var(--ink-2); -webkit-mask: var(--i-caret-right) center / 15px no-repeat; mask: var(--i-caret-right) center / 15px no-repeat;
}
/* Admin's link already has its icon: it becomes the tile. */
:root[data-look="violet"] #adminCard > a.btn > i.ph {
    display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: var(--r-field);
    background: var(--surface-2); color: var(--accent-text); font-size: 1.3rem;
}
:root[data-look="violet"] #adminCard > a.btn > i.ph .ico { --ico-accent: var(--accent-text); --ico-dark: var(--surface-2); }
/* A two-tone icon (icons.js) in a tile inside a button: brotein's .btn svg
   would hold it at 15px; it takes the tile's size, as the glyphs do. */
:root[data-look="violet"] :is(.settings .v-tile, #adminCard > a.btn > i.ph) .ico { width: 1em; height: 1em; }
/* Contact is closed: the row says so instead of a chevron. */
:root[data-look="violet"] #privacy .row > a.btn.is-off { opacity: 1; color: var(--ink-3); }
:root[data-look="violet"] #privacy .row > a.btn.is-off > .v-tile { color: var(--ink-3); }
:root[data-look="violet"] #privacy .row > a.btn.is-off::before { display: none; }
:root[data-look="violet"] #privacy .row > a.btn.is-off::after {
    content: attr(title); width: auto; height: auto; border-radius: 0; background: none; -webkit-mask: none; mask: none;
    color: var(--ink-3); font-size: 0.82rem; font-weight: 500;
}

/* Delete: the heading in the error colour, the button on the page, the
   confirmation on a card of its own once asked for. */
:root[data-look="violet"] #delete > h3 { color: var(--bad); }
:root[data-look="violet"] #delete > .row { margin-top: 0 !important; }
:root[data-look="violet"] #delete .btn { height: 50px; padding: 0 24px; font-size: 0.95rem; }
:root[data-look="violet"] #delete .confirm {
    max-width: none; margin: 0; padding: 18px; border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); border-radius: var(--r-card);
    background: linear-gradient(180deg, var(--v-bad-tint), transparent), var(--surface);
}
:root[data-look="violet"] #delete .confirm label { color: var(--ink-2); font-size: 0.92rem; }
:root[data-look="violet"] #delete .confirm .inp { height: 52px; letter-spacing: 0.08em; }
:root[data-look="violet"] #delete .confirm .row { flex-direction: column; align-items: stretch; gap: 10px; }
:root[data-look="violet"] #delete .confirm .status { min-height: 0; }
:root[data-look="violet"] #delete .confirm .status:empty { margin-top: -10px !important; }

/* Log out: a quiet block at the foot, like "Show all" on a profile. */
:root[data-look="violet"] .settings > .row:has(#logoutBtn2) { margin-top: 0 !important; }
:root[data-look="violet"] #logoutBtn2 { width: 100%; height: 52px; border-radius: var(--r-block); font-size: 1rem; }
:root[data-look="violet"] #logoutBtn2 i { color: var(--ink-2); }

/* Back from saving with Google or the email link: how it went. */
:root[data-look="violet"] .settings > .save-return { border-radius: var(--r-row); }

/* Save your account (only for an account the intro made): the violet-tinted
   card, a step to do. account.js's form keeps the sign-up demo's light buttons. */
:root[data-look="violet"] #save-account { padding: 20px 18px; border-color: var(--tint-edge); background: var(--tint-fill); }
:root[data-look="violet"] #save-account > h3 { margin: 0 0 6px; font-size: var(--title-card); }
:root[data-look="violet"] #save-account > .sub { margin-bottom: 16px; color: var(--ink-2); font-size: 0.95rem; line-height: 1.5; }
/* Small notes on the tint: ink-2, as ink-3 drops under 4.5:1 there. */
:root[data-look="violet"] #save-account .save-acct-note { color: var(--ink-2); }
:root[data-look="violet"] #save-account .save-acct .btn { position: relative; height: 58px; padding: 0 52px; border-radius: var(--r-block); font-size: 1rem; font-weight: 700; }
/* The mark on the left, as in the intro's save step (section 12j). */
:root[data-look="violet"] #save-account .save-acct > .btn > :is(.save-acct-g, i) { position: absolute; top: 50%; left: 20px; display: grid; place-items: center; width: 22px; height: 22px; font-size: 21px; transform: translateY(-50%); }
:root[data-look="violet"] #save-account .save-acct :is(.btn.quiet, .btn.accent) { border-color: transparent; background: var(--ink); color: var(--bg); box-shadow: none; }
:root[data-look="violet"] #save-account .save-acct :is(.btn.quiet, .btn.accent):hover { background: #fff; }
:root[data-look="violet"] #save-account .save-acct :is(.field input, .inp) { height: 56px; font-size: 1.05rem; }
:root[data-look="violet"] #save-account .save-acct .save-acct-code input { height: 64px; font-family: var(--font-display); font-stretch: 108%; font-size: 1.7rem; font-weight: 700; letter-spacing: 0.3em; }
:root[data-look="violet"] #save-account .save-acct .save-acct-text { min-height: 44px; color: var(--accent-text); }

@media (max-width: 640px) {
    :root[data-look="violet"] .settings .settings-row > .op-lang-pick { min-width: 0; }
    :root[data-look="violet"] .settings .settings-row > .v-tile { align-self: center; }
    :root[data-look="violet"] .settings .settings-row:has(> .op-lang-pick) > .v-tile { align-self: start; }
}
@media (min-width: 641px) {
    :root[data-look="violet"] .settings .settings-row > .op-lang-pick { grid-column: 3; width: 320px; }
}

/* ---- 11c. Log in (login.html and its inline scripts) ----------------------
   The intro's language: today's lifts as a tilted strip of photo cards under
   the status bar, fading into the page (the inline script draws it behind
   its VIOLET flag), the title on the fade under it, the form on one card.
   Logging in is an account step, so its main button is the light block of
   the approved sign-up demo; violet is kept for the app itself.
   -------------------------------------------------------------------------- */

:root[data-look="violet"]:has(main.auth) { --lp-col: min(480px, calc(100% - 36px)); }
:root[data-look="violet"] main.auth .auth-head { min-height: 0; padding: calc(var(--nav-h) + 188px + env(safe-area-inset-top, 0px)) 18px 0; background: transparent; color: var(--ink); }
:root[data-look="violet"] main.auth .auth-head::after { display: none; }
:root[data-look="violet"] .auth-photos { inset: 0 0 auto; height: calc(var(--nav-h) + 236px + env(safe-area-inset-top, 0px)); overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 58%, transparent); mask-image: linear-gradient(#000 58%, transparent); }
:root[data-look="violet"] .auth-photos > i { display: none; }
:root[data-look="violet"] .auth-photos::after { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--scrim-top); }
:root[data-look="violet"] .auth-photos .v-deck { top: 52%; gap: 14px; transform: translate(-50%, -46%) rotate(-12deg); }
:root[data-look="violet"] .auth-photos .v-deck > span { width: 128px; height: 160px; border-radius: var(--r-card); background: var(--photo-base); box-shadow: inset 0 0 0 1px var(--edge); }
:root[data-look="violet"] .auth-photos .v-deck > span:nth-child(even) { transform: translateY(28px); }
:root[data-look="violet"] .auth-photos .v-deck > span.is-focus { z-index: 2; transform: translateY(6px) scale(1.1); box-shadow: 0 24px 48px rgba(var(--scrim-rgb), 0.5); }
:root[data-look="violet"] .auth-photos .v-deck img { filter: saturate(0.9) contrast(1.04) brightness(0.74); }
:root[data-look="violet"] .auth-photos .v-deck .is-focus img { filter: var(--photo-filter); }

/* The title on the page, Display M, the quiet line under it. */
:root[data-look="violet"] main.auth .auth-head h1.display {
    position: relative; z-index: 1; color: var(--ink); font-size: var(--title-m); font-stretch: 112%; font-weight: 800; letter-spacing: -0.04em; line-height: 1.02;
}
:root[data-look="violet"] main.auth .auth-head .lead { margin: 8px 0 0; max-width: 34ch; color: var(--ink-2); font-size: 1rem; line-height: 1.45; }

/* The form on one card. */
:root[data-look="violet"] main.auth .auth-card {
    margin: 22px auto 0; padding: 20px 18px 18px; border: 1px solid var(--edge); border-radius: var(--r-card); background: var(--card-fill); box-shadow: none;
}
:root[data-look="violet"] .auth-card .fields { gap: 14px; }
:root[data-look="violet"] .auth-card .inp { height: 56px; border-radius: var(--r-field); font-size: 1.05rem; }
:root[data-look="violet"] .auth-card .verification-heading h2 { font-stretch: 108%; font-size: 1.45rem; }
:root[data-look="violet"] .auth-card .verification-heading .sub { margin-top: 4px; color: var(--ink-2); font-size: 0.95rem; line-height: 1.45; }
:root[data-look="violet"] .auth-card .verification-heading strong { color: var(--ink); overflow-wrap: anywhere; }
/* The main step: the light block. */
:root[data-look="violet"] .auth-card .btn.submit-btn {
    height: 58px; margin-top: 4px; border: 0; border-radius: var(--r-block); background: var(--ink); color: var(--bg); box-shadow: none; font-size: 1.02rem; font-weight: 700;
}
:root[data-look="violet"] .auth-card .btn.submit-btn:hover { background: #fff; }
/* Another way in (Google, a new link): a quiet block. */
:root[data-look="violet"] .auth-card :is(.google-btn, #resendEmailLinkBtn) { height: 52px; border-radius: var(--r-block); font-size: 1rem; }
:root[data-look="violet"] .auth-card .google-mark { font-size: 1.15rem; }
/* A step back inside the form keeps its words, as a quiet text button. */
:root[data-look="violet"] .auth-card :is(#codeBack, #changeVerificationEmailBtn, #accessSignOut) {
    height: 44px; border-color: transparent; background: none; color: var(--ink-2); font-size: 0.95rem; font-weight: 600;
}
:root[data-look="violet"] .auth-card :is(#codeBack, #changeVerificationEmailBtn, #accessSignOut):hover { border-color: transparent; background: var(--hover); color: var(--ink); }
:root[data-look="violet"] .auth-card .auth-code-link { min-height: 44px; font-size: 0.98rem; }
:root[data-look="violet"] .auth-card .auth-divider { margin: 0; color: var(--ink-3); }
:root[data-look="violet"] .auth-card .auth-divider::before, :root[data-look="violet"] .auth-card .auth-divider::after { border-top-color: var(--divider); }
/* The email code: one large field, the digits spaced out. */
:root[data-look="violet"] .auth-card .access-input:not(.v-code-in) {
    height: 64px; padding-left: 0.3em; font-family: var(--font-display); font-stretch: 108%; font-size: 1.7rem; font-weight: 700; letter-spacing: 0.3em;
}
:root[data-look="violet"] .auth-card .access-input:not(.v-code-in)::placeholder { color: var(--ink-3); opacity: 0.6; }
/* The access code: the intro's six boxes (.v-code, section a); the real field
   over them stays invisible, its label read out but not shown, as the heading says it. */
:root[data-look="violet"] .auth-card .inp.v-code-in { height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 16px; letter-spacing: 0; }
:root[data-look="violet"] #accessPanel .fld:has(> .v-code) > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* An account on this phone not saved yet: the soft violet note. */
:root[data-look="violet"] .auth-card .auth-anon { margin-bottom: 16px; padding: 12px 14px; border-radius: var(--r-row); background: var(--accent-soft); color: var(--ink); font-size: 0.92rem; }
:root[data-look="violet"] .auth-card .auth-anon a { color: var(--accent-text); }
/* How it went: a soft box in the status colour. */
:root[data-look="violet"] .auth-card .auth-status:not(:empty) { padding: 12px 14px; border-radius: var(--r-row); background: var(--surface-2); color: var(--ink-2); font-size: 0.92rem; }
:root[data-look="violet"] .auth-card .auth-status.error:not(:empty) { background: var(--v-bad-tint); color: var(--bad); }
:root[data-look="violet"] .auth-card .auth-status.success:not(:empty) { background: var(--ok-soft); color: var(--ok); }
/* The inline script moves it under the step's main button, inside the step's
   field stack: the stack's gap spaces it, and an empty one takes no room. */
:root[data-look="violet"] .auth-card .fields > .auth-status { margin-top: 0; }
:root[data-look="violet"] .auth-card .fields > .auth-status:empty { margin-top: -14px; }
:root[data-look="violet"] .auth-new { color: var(--ink-2); }
:root[data-look="violet"] #accessPanel .verification-heading,
:root[data-look="violet"] #emailLinkNotice .verification-heading { margin-bottom: 14px; }

@media (max-width: 959px) {
    :root[data-look="violet"] main.auth { padding-bottom: 40px; }
    /* A phone: the form straight on the page under the title, as the intro sets its fields. */
    :root[data-look="violet"] main.auth .auth-card { width: var(--lp-col); padding: 0; border: 0; background: none; box-shadow: none; }
    :root[data-look="violet"] body:has(main.auth) > footer.foot { margin-top: 40px; }
    /* A step (the email code, the access code, the email link): its heading
       takes the title's place at the title's size, instead of a second
       heading under "Welcome back." (still read out, not shown). */
    :root[data-look="violet"] main.auth:has(#codePanel.active, .auth-card.is-access, #emailLinkNotice:not([hidden])) .auth-head > :is(h1, .lead) {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
    :root[data-look="violet"] main.auth:has(#codePanel.active, .auth-card.is-access, #emailLinkNotice:not([hidden])) .auth-card { margin-top: 0; }
    /* The strip keeps its fade under the step's heading, as under the title. */
    :root[data-look="violet"] main.auth:has(#codePanel.active, .auth-card.is-access, #emailLinkNotice:not([hidden])) .auth-head { overflow: visible; }
    :root[data-look="violet"] .auth-card .verification-heading { position: relative; z-index: 1; margin-bottom: 8px; }
    :root[data-look="violet"] .auth-card .verification-heading h2 { margin: 0; font-size: var(--title-m); font-stretch: 112%; letter-spacing: -0.04em; line-height: 1.02; text-wrap: balance; }
    :root[data-look="violet"] .auth-card .verification-heading .sub { margin-top: 8px; font-size: 1rem; }
}
/* A short phone (iPhone SE): a lower strip, so the fields show sooner. */
@media (max-width: 959px) and (max-height: 700px) {
    :root[data-look="violet"] main.auth .auth-head { padding-top: calc(var(--nav-h) + 132px + env(safe-area-inset-top, 0px)); }
    :root[data-look="violet"] .auth-photos { height: calc(var(--nav-h) + 176px + env(safe-area-inset-top, 0px)); }
    :root[data-look="violet"] .auth-photos .v-deck > span { width: 100px; height: 124px; border-radius: var(--r-row); }
    :root[data-look="violet"] .auth-photos .v-deck > span:nth-child(even) { transform: translateY(22px); }
}
/* A computer: the strip fills the left half, larger, with the title at its
   foot; the form is a raised card on the right. */
@media (min-width: 960px) {
    :root[data-look="violet"] main.auth .auth-head { padding: calc(var(--nav-h) + 32px) var(--lp-side) clamp(40px, 7vh, 80px); }
    /* The strip fades out at its foot and at both sides (one oval mask, so
       nothing has to combine two), instead of stopping hard at the split. */
    :root[data-look="violet"] .auth-photos {
        inset: 0; height: auto;
        -webkit-mask-image: radial-gradient(50% 46% at 50% 40%, #000 55%, transparent 100%);
        mask-image: radial-gradient(50% 46% at 50% 40%, #000 55%, transparent 100%);
    }
    :root[data-look="violet"] .auth-photos .v-deck { top: 40%; gap: 18px; }
    :root[data-look="violet"] .auth-photos .v-deck > span { width: 190px; height: 240px; border-radius: var(--r-feature); }
    :root[data-look="violet"] .auth-photos .v-deck > span:nth-child(even) { transform: translateY(40px); }
    :root[data-look="violet"] main.auth .auth-head h1.display { font-size: clamp(3rem, 4.6vw, 4.4rem); line-height: 0.96; }
    :root[data-look="violet"] main.auth .auth-head .lead { margin-top: 14px; font-size: 1.1rem; }
    :root[data-look="violet"] main.auth .auth-card { margin-top: calc(var(--nav-h) + 24px); padding: 28px; border-color: var(--edge-strong); border-radius: var(--r-feature); background: var(--sheet-fill); box-shadow: var(--shadow); }
}
@media (prefers-reduced-motion: reduce) {
    :root[data-look="violet"] .auth-card .btn { transition: none; }
}

/* ---- 11d. Gym finder (gym-finder.html, gym-finder.js) ---------------------
   Search is the one violet action. Saved gyms and the options are rows that
   open in place. Before a search, a gym photo says what to do. Each gym is a
   card: its name and star, then distance and open now as chips, today's hours,
   and the links, rating and reviews under them. On a phone the map comes
   first, the list under it, with no scrolling box inside the page.
   -------------------------------------------------------------------------- */

/* ---- search ---- */
:root[data-look="violet"] .finder .search-row { gap: 10px; }
:root[data-look="violet"] .gym-locate { height: 50px; font-size: 0.95rem; }
:root[data-look="violet"] .gym-locate i { color: var(--accent-text); }
:root[data-look="violet"] .gym-search {
    gap: 10px; height: 56px; padding: 0 6px 0 16px; border: 1px solid var(--edge); border-radius: var(--r-pill); background: var(--surface-2);
    transition: border-color var(--dur) ease, box-shadow var(--dur) ease;
}
:root[data-look="violet"] .gym-search:hover { border-color: var(--edge-strong); }
:root[data-look="violet"] .gym-search:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(var(--violet-rgb), 0.28); }
:root[data-look="violet"] .gym-search > i { flex: none; color: var(--ink-2); font-size: 1.25rem; }
:root[data-look="violet"] .gym-search input { font-size: 1rem; }
:root[data-look="violet"] .gym-search button {
    height: 44px; padding: 0 20px; background: var(--violet-fill); color: var(--on-violet); box-shadow: var(--violet-glow); font-size: 0.92rem;
    transition: background-color var(--dur) ease, transform var(--dur-fast) ease;
}
:root[data-look="violet"] .gym-search button:hover { background: var(--violet-fill-hover); }
:root[data-look="violet"] .gym-search button:active { transform: scale(0.97); }
:root[data-look="violet"] .gym-search button:disabled { opacity: 0.45; box-shadow: none; }
:root[data-look="violet"] .gym-suggestions { padding: 6px; border: 1px solid var(--edge-strong); border-radius: var(--r-block); background: var(--surface-2); box-shadow: var(--shadow-pop); }
:root[data-look="violet"] .gym-suggestions button { min-height: 44px; padding: 10px 12px; border: 0; border-radius: 12px; color: var(--ink); line-height: 1.35; }
:root[data-look="violet"] .gym-suggestions button:hover { background: var(--hover); }
:root[data-look="violet"] .gym-status:empty { min-height: 0; margin: 0; }
:root[data-look="violet"] .gym-status { margin-top: 10px; color: var(--ink-2); font-size: 0.88rem; line-height: 1.45; }
:root[data-look="violet"] .gym-status.success { color: var(--ink-2); }
:root[data-look="violet"] .gym-status.error { color: var(--bad); font-weight: 600; }

/* ---- saved gyms and search options: rows that open in place ---- */
:root[data-look="violet"] .three { gap: var(--gap-list) 16px; }
:root[data-look="violet"] .card.filters { display: grid; gap: var(--gap-list); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
:root[data-look="violet"] .finder-menu { padding: 0; border: 1px solid var(--edge); border-radius: var(--r-row); background: var(--card-fill); }
:root[data-look="violet"] .finder-menu + .finder-menu { margin-top: 0; }
:root[data-look="violet"] .finder-menu > summary {
    justify-content: flex-start; gap: 12px; min-height: 64px; padding: 10px 14px 10px 12px; border-radius: var(--r-row);
    font-size: 1.02rem; font-weight: 500;
}
:root[data-look="violet"] .finder-menu > summary::after {
    content: ""; flex: none; width: 32px; height: 32px; margin-left: auto; border-radius: 50%;
    background: var(--surface-2) var(--v-caret-down) center / 15px no-repeat;
    transition: transform var(--dur) var(--ease-out);
}
:root[data-look="violet"] .finder-menu[open] > summary::after { content: ""; transform: rotate(180deg); }
:root[data-look="violet"] .finder-menu > summary:hover { background: var(--hover); }
:root[data-look="violet"] .finder-menu-content { padding: 4px 16px 18px; }
:root[data-look="violet"] .filters-label { margin: 18px 0 8px; color: var(--ink-2); font-size: 0.84rem; }
:root[data-look="violet"] .finder-menu .toggle { max-width: 360px; }
:root[data-look="violet"] .finder-menu #gymRadius { max-width: 360px; height: 50px; }
:root[data-look="violet"] .gym-filters { gap: 8px; }
:root[data-look="violet"] .gym-privacy { display: flex; gap: 8px; margin-top: 18px; color: var(--ink-2); font-size: 0.84rem; }
:root[data-look="violet"] {
    --v-caret-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 9 12 16.5 19.5 9' fill='none' stroke='%23cdc5bc' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Saved gyms inside the row: one slim row each, the star to unsave. */
:root[data-look="violet"] #gymFavorites[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
:root[data-look="violet"] #gymFavoritesList { gap: 8px; padding: 0 12px 14px; }
:root[data-look="violet"] #gymFavoritesList .gym-item { padding: 6px 6px 6px 14px; border: 0; border-radius: var(--r-field); background: var(--surface-2); }
:root[data-look="violet"] #gymFavoritesList .gym-item .gym-meta { margin: 0 0 6px; color: var(--ink-2); }

/* ---- before the first search: a gym photo, the words at its foot ---- */
:root[data-look="violet"] .gym-results[hidden] + .gym-start {
    position: relative; isolation: isolate; overflow: hidden; align-content: end; justify-items: start; min-height: 300px; padding: 22px 20px;
    border: 0; border-radius: var(--r-feature); background: var(--photo-base); text-align: left; color: #fff;
}
/* The photo comes from here, not an <img> in the page: the default look never
   loads this sheet, so it never downloads the photo. */
:root[data-look="violet"] .gym-start .v-photo::before {
    content: ""; position: absolute; inset: 0;
    background: url("https://wsrv.nl/?url=cdn.jsdelivr.net%2Fgh%2Fyuhonas%2Ffree-exercise-db%40f00c92c7dcf1216a928a52c3706c7ce8e2f71ed5%2Fexercises%2FWide-Grip_Lat_Pulldown%2F0.jpg&w=900&h=640&fit=cover&q=60") center / cover no-repeat;
    filter: saturate(0.85) contrast(1.04) brightness(0.74);
}
:root[data-look="violet"] .gym-start .v-photo::after { background: linear-gradient(rgba(var(--scrim-rgb), 0.15), rgba(var(--scrim-rgb), 0.55) 42%, rgba(var(--scrim-rgb), 0.95) 78%); }
:root[data-look="violet"] .gym-start i.ph-map-pin {
    display: grid; place-items: center; width: 44px; height: 44px; margin: 0 0 14px; border: 1px solid var(--glass-edge); border-radius: 50%;
    background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); color: #fff; font-size: 1.3rem;
}
:root[data-look="violet"] .gym-start h2 { margin: 0 0 6px; color: #fff; font-family: var(--font-display); font-stretch: 108%; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
:root[data-look="violet"] .gym-start p { margin: 0; max-width: 36ch; color: #ddd6cf; font-size: 0.95rem; line-height: 1.5; }

/* ---- results ---- */
:root[data-look="violet"] .gym-results { gap: 14px; }
:root[data-look="violet"] .gym-count { margin: 4px 0 10px; color: var(--ink-3); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
:root[data-look="violet"] .gym-list { gap: var(--gap-list); }
:root[data-look="violet"] .gym-map-wrap { border-radius: var(--r-feature); box-shadow: inset 0 0 0 1px var(--edge); }
:root[data-look="violet"] .gym-map-wrap::after { content: ""; position: absolute; inset: 0; z-index: 900; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--edge); pointer-events: none; }
:root[data-look="violet"] #gymMap { background: var(--bg-2); }
:root[data-look="violet"] .gym-map-skeleton { background: var(--surface); color: var(--ink-2); }
:root[data-look="violet"] #gymMap .leaflet-tile { filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.9) sepia(0.18); }
:root[data-look="violet"] #gymMap .leaflet-bar { overflow: hidden; border: 1px solid var(--edge-strong); border-radius: var(--r-field); box-shadow: var(--shadow-pop); }
:root[data-look="violet"] #gymMap .leaflet-bar a { width: 44px; height: 44px; border-color: var(--divider); background: var(--surface-2); color: var(--ink); font: 600 22px/44px var(--font-ui); }
:root[data-look="violet"] #gymMap .leaflet-bar a:hover { background: var(--line-2); }
:root[data-look="violet"] #gymMap .leaflet-control-attribution { border-radius: 10px 0 0 0; background: rgba(var(--scrim-rgb), 0.7); color: var(--ink-2); }
:root[data-look="violet"] #gymMap .leaflet-popup-content-wrapper { border: 1px solid var(--edge-strong); border-radius: var(--r-block); background: var(--surface-2); }
:root[data-look="violet"] #gymMap .leaflet-popup-tip { background: var(--surface-2); }
:root[data-look="violet"] #gymMap .leaflet-popup-close-button { width: 32px; height: 32px; font: 400 22px/32px var(--font-ui); color: var(--ink-2); }

/* A gym: its own card. */
:root[data-look="violet"] .gym-item { padding: 14px 14px 16px 16px; border: 1px solid var(--edge); border-radius: var(--r-card); background: var(--card-fill); box-shadow: none; }
:root[data-look="violet"] .gym-item.is-clickable:hover { border-color: var(--edge-strong); }
:root[data-look="violet"] .gym-item.is-highlighted { border-color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-text); }
:root[data-look="violet"] .gym-list .gym-item-head { display: block; }
:root[data-look="violet"] .gym-name-row { align-items: flex-start; gap: 6px; }
:root[data-look="violet"] .gym-name { flex: 1; min-height: 44px; padding: 10px 0; font-size: 1.08rem; font-weight: 600; line-height: 1.3; }
:root[data-look="violet"] .gym-favorite-btn {
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink-2);
    transition: color var(--dur) ease, transform var(--dur-fast) ease;
}
:root[data-look="violet"] .gym-favorite-btn svg { width: 20px; height: 20px; }
:root[data-look="violet"] .gym-favorite-btn:active { transform: scale(0.94); }
:root[data-look="violet"] .gym-favorite-btn.is-favorite { color: var(--violet-2); }
:root[data-look="violet"] .gym-list .gym-side { display: flex; flex-wrap: wrap; align-items: center; justify-items: start; gap: 6px; margin-top: 4px; text-align: left; }
:root[data-look="violet"] .gym-distance,
:root[data-look="violet"] .gym-state {
    display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: var(--r-pill);
    background: var(--surface-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); color: var(--ink); font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
:root[data-look="violet"] .gym-state.is-open { background: var(--ok-soft); box-shadow: none; color: var(--ok); }
:root[data-look="violet"] .gym-state.is-closed { background: var(--v-bad-tint); box-shadow: none; color: var(--bad); }
:root[data-look="violet"] .gym-list .gym-today { flex-basis: 100%; max-width: none; margin-top: 4px; color: var(--ink-2); font-size: 0.86rem; }
:root[data-look="violet"] .gym-meta { margin-top: 4px; color: var(--ink-2); font-size: 0.86rem; }
/* What's here: a row that opens, chips inside. */
:root[data-look="violet"] .gym-extras { margin-top: 12px; padding-top: 0; border-top: 1px solid var(--divider); }
:root[data-look="violet"] .gym-extras summary, :root[data-look="violet"] .gym-reviews summary {
    display: flex; align-items: center; justify-content: space-between; min-height: 44px; color: var(--ink); font-size: 0.92rem; font-weight: 600;
}
:root[data-look="violet"] :is(.gym-extras, .gym-reviews) summary::-webkit-details-marker { display: none; }
:root[data-look="violet"] :is(.gym-extras, .gym-reviews) summary::after {
    content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2) var(--v-caret-down) center / 13px no-repeat;
    transition: transform var(--dur) var(--ease-out);
}
:root[data-look="violet"] :is(.gym-extras, .gym-reviews)[open] summary::after { content: ""; transform: rotate(180deg); }
:root[data-look="violet"] .gym-extras-body { margin: 0 0 6px; }
:root[data-look="violet"] .gym-extras-title { margin: 8px 0 8px; color: var(--ink-3); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
:root[data-look="violet"] .gym-chips { margin: 0; padding: 0; list-style: none; }
:root[data-look="violet"] .gym-chips li {
    display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: var(--r-pill);
    background: var(--surface-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); color: var(--ink); font-size: 0.8rem; font-weight: 600;
}
:root[data-look="violet"] .gym-chips.is-no li { background: none; color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.3); }
:root[data-look="violet"] :is(.gym-extras-empty, .gym-extras-note) { color: var(--ink-2); }
:root[data-look="violet"] .gym-extras-note a { position: relative; }
/* Directions and Website: quiet pills with their icon. */
:root[data-look="violet"] .gym-links { flex-wrap: wrap; gap: 8px; margin-top: 12px; }
:root[data-look="violet"] .gym-links a {
    display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--r-pill);
    color: var(--ink); font-size: 0.88rem; font-weight: 600; text-decoration: none;
}
:root[data-look="violet"] .gym-links a i { color: var(--accent-text); font-size: 1.05rem; }
:root[data-look="violet"] .gym-links a:hover { border-color: var(--ink-3); background: var(--hover); text-decoration: none; }
/* Rating: five 44px stars, the average, then Write a review and Save. */
:root[data-look="violet"] .gym-rating { gap: 4px 10px; margin-top: 12px; padding-top: 6px; border-top: 1px solid var(--divider); }
:root[data-look="violet"] .gym-rating .stars { gap: 0; margin-left: -10px; }
:root[data-look="violet"] .gym-rating .star { width: 44px; height: 44px; padding: 11px; color: color-mix(in srgb, var(--ink-3) 82%, var(--surface)); }
:root[data-look="violet"] .gym-rating .star:hover { transform: none; color: var(--violet-2); }
:root[data-look="violet"] .gym-rating .star.filled { color: var(--violet-2); }
:root[data-look="violet"] .gym-rating .star:active:not(.disabled) { transform: scale(0.9); }
:root[data-look="violet"] .gym-rating .avg { margin-left: 0; color: var(--ink-2); font-variant-numeric: tabular-nums; }
:root[data-look="violet"] .gym-review-btn { height: 44px; padding: 0 16px; border-color: var(--line-2); color: var(--ink); font-size: 0.86rem; }
:root[data-look="violet"] .gym-review-btn i { color: var(--accent-text); }
:root[data-look="violet"] .save-rating-btn { height: 44px; padding: 0 18px; background: var(--violet-fill); color: var(--on-violet); box-shadow: var(--violet-glow); font-size: 0.86rem; }
:root[data-look="violet"] .save-rating-btn:hover { background: var(--violet-fill-hover); }
:root[data-look="violet"] .save-rating-btn:disabled { opacity: 0.45; box-shadow: none; }
:root[data-look="violet"] .gym-review-input { min-height: 96px; margin-top: 10px; padding: 12px 14px; font-size: 16px; line-height: 1.5; }
:root[data-look="violet"] .gym-review-status { margin-top: 8px; font-size: 0.86rem; }
:root[data-look="violet"] .gym-review-status.is-info { color: var(--ink-2); }
/* A gym card reads in the order gym-finder.js builds it, which is the order
   focus takes: what's here, Directions and Website, then the rating on its
   own row (stars, the average, Write a review), the box to write in, reviews. */
:root[data-look="violet"] .gym-list .gym-rating { display: flex; flex-wrap: wrap; align-items: center; width: 100%; margin-top: 14px; padding-top: 8px; }
:root[data-look="violet"] .gym-list .gym-rating > .stars { flex: none; }
:root[data-look="violet"] .gym-list .gym-rating > .avg { flex: 1 1 auto; }
:root[data-look="violet"] .gym-list .gym-rating > :is(.gym-review-btn, .save-rating-btn) { flex: none; margin: 2px 0 0; }
:root[data-look="violet"] .gym-favorite-btn:not(.is-favorite) { color: var(--ink-3); }
:root[data-look="violet"] #gymMap .leaflet-control-attribution { margin: 0 16px 10px 0; border-radius: 8px; }
/* Reviews: one raised card each. */
:root[data-look="violet"] .gym-reviews { margin-top: 6px; padding-top: 0; border-top: 1px solid var(--divider); }
:root[data-look="violet"] .gym-review-list { gap: 8px; margin: 0 0 4px; }
:root[data-look="violet"] .gym-review { padding: 12px 14px; border-radius: var(--r-row); background: var(--surface-2); }
:root[data-look="violet"] .gym-review-gym { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink); }
/* Inside a gym's own card its name on every review is noise: the review leads
   with who wrote it and when, the stars beside them. */
:root[data-look="violet"] .gym-item .gym-review-gym { display: none; }
:root[data-look="violet"] .gym-item .gym-review-head { align-items: center; }
:root[data-look="violet"] .gym-review-author { margin-top: 0; color: var(--ink-2); font-size: 0.8rem; }
:root[data-look="violet"] .gym-review-stars { color: var(--violet-2); }
:root[data-look="violet"] .gym-review-body { color: var(--ink); font-size: 0.92rem; }
:root[data-look="violet"] .gym-review-actions { gap: 4px; margin: 4px 0 -6px -8px; }
:root[data-look="violet"] .gym-review-action { min-height: 44px; padding: 0 8px; color: var(--ink-2); font-size: 0.82rem; font-weight: 600; }
:root[data-look="violet"] .gym-review-action.is-liked { color: var(--accent-text); }
:root[data-look="violet"] .gym-review-thread { border-top-color: var(--divider); }
:root[data-look="violet"] .gym-review-reply-form { gap: 8px; }
:root[data-look="violet"] .gym-review-reply-form .inp { height: 44px; border-radius: var(--r-pill); padding: 0 16px; }
:root[data-look="violet"] .gym-review-reply-form .btn { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; }
:root[data-look="violet"] .gym-review-empty { color: var(--ink-2); }
/* Nothing found, the retry, the loading rows. */
:root[data-look="violet"] .gym-empty { padding: 18px; border: 1px solid var(--edge); border-radius: var(--r-card); background: var(--card-fill); box-shadow: none; color: var(--ink-2); line-height: 1.5; }
:root[data-look="violet"] .gym-retry-btn { height: 44px; margin-top: 12px; padding: 0 18px; border: 1px solid var(--line-2); color: var(--ink); font-size: 0.88rem; }
:root[data-look="violet"] .gym-retry-btn:hover { border-color: var(--ink-3); background: var(--hover); }
:root[data-look="violet"] .gym-skeleton { height: 148px; border-radius: var(--r-card); animation: v-shimmer 1.2s linear infinite; }

@media (max-width: 1180px) {
    /* The map first, at a phone's width, kept short so the first gym shows
       under it; the list under it, part of the page. One finger on the map
       scrolls the page (gym-finder.js), two fingers move and zoom the map. */
    :root[data-look="violet"] .gym-map-wrap { order: -1; aspect-ratio: 16 / 9; }
    :root[data-look="violet"] .gym-list-wrap { max-height: none; overflow: visible; padding-right: 0; }
}
@media (min-width: 1181px) {
    /* A computer: a taller map, so the list beside it has room. */
    :root[data-look="violet"] .gym-map-wrap { aspect-ratio: auto; min-height: 580px; }
}
@media (max-width: 600px) {
    :root[data-look="violet"] .gym-results[hidden] + .gym-start { min-height: 280px; }
    /* Use my location as a round button beside the search field, as map apps
       do (its words still read out, not shown), so after a search the map
       and the first gym fit the first screen. */
    :root[data-look="violet"] .finder .search-row { flex-wrap: nowrap; }
    :root[data-look="violet"] .gym-search-wrap { flex-basis: auto; }
    :root[data-look="violet"] .gym-locate { flex: none; width: 56px; height: 56px; padding: 0; gap: 0; border-radius: 50%; font-size: 0; }
    :root[data-look="violet"] .gym-locate i { font-size: 1.4rem; }
    :root[data-look="violet"] .gym-locate i .ico { width: 1em; height: 1em; }   /* the two-tone icon, past brotein's 15px .btn svg */
}
@media (max-width: 600px) and (max-height: 700px) {
    :root[data-look="violet"] .gym-map-wrap { aspect-ratio: 2 / 1; }   /* a short phone (iPhone SE) */
}
@media (prefers-reduced-motion: reduce) {
    :root[data-look="violet"] :is(.finder-menu > summary, .gym-extras summary, .gym-reviews summary)::after,
    :root[data-look="violet"] :is(.gym-search button, .gym-favorite-btn, .gym-rating .star) { transition: none; }
    :root[data-look="violet"] .gym-skeleton { animation: none; }
}
/* ---- 11e. Admin (admin.html, admin.js): internal, restyled lightly --------
   The sections as the segmented recipe (two rows on a phone, so Photos and
   its count are never out of sight), the numbers as compact cards, the chart in light violet, lists as
   raised rows, the table on soft rules.
   -------------------------------------------------------------------------- */

:root[data-look="violet"] .console-nav {
    display: flex; gap: 2px; width: fit-content; max-width: 100%; margin-bottom: 18px; padding: 4px; overflow-x: auto; scrollbar-width: none;
    border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
}
:root[data-look="violet"] .console-nav::-webkit-scrollbar { display: none; }
:root[data-look="violet"] .console-nav button { flex: none; height: 44px; padding: 0 16px; color: var(--ink-2); font-weight: 600; transition: background-color var(--dur) ease, color var(--dur) ease; }
:root[data-look="violet"] .console-nav button:hover { color: var(--ink); }
:root[data-look="violet"] .console-nav button.on { background: var(--violet-fill); color: var(--on-violet); box-shadow: 0 6px 16px rgba(117, 82, 245, 0.3); }
:root[data-look="violet"] .console-nav button i { font-size: 1.1rem; }
:root[data-look="violet"] .console-nav em { min-width: 20px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font-size: 0.74rem; font-weight: 700; font-variant-numeric: tabular-nums; }
:root[data-look="violet"] .console-nav em:empty { display: none; }
:root[data-look="violet"] .console-nav button.on em { background: rgba(255, 255, 255, 0.2); color: #fff; }

/* The numbers: compact cards, the number in Archivo, what it counts under it. */
:root[data-look="violet"] .stats { gap: var(--gap-list); }
:root[data-look="violet"] .stats .kpi { padding: 16px 18px; border-radius: var(--r-card); }
:root[data-look="violet"] .stats .kpi b { font-size: 1.9rem; font-variant-numeric: tabular-nums; }
:root[data-look="violet"] .stats .kpi span { margin-top: 2px; color: var(--ink-2); font-size: 0.86rem; }
:root[data-look="violet"] .stats .kpi.money { border-color: var(--tint-edge); background: var(--tint-fill); }
:root[data-look="violet"] .stats .kpi.money b { color: var(--ink); }

:root[data-look="violet"] [data-panel] .card-lg, :root[data-look="violet"] section.card-lg[data-panel] { padding: 20px; }
:root[data-look="violet"] [data-panel] .panel-head { gap: 12px; margin-bottom: 14px; }
:root[data-look="violet"] [data-panel] .panel-head h2 { font-family: var(--font-display); font-stretch: 108%; font-size: var(--title-card); font-weight: 800; letter-spacing: -0.02em; }
:root[data-look="violet"] [data-panel] .chip-row { gap: 6px; }
:root[data-look="violet"] .chart rect { fill: var(--violet-2); }
:root[data-look="violet"] .chart rect:hover { fill: #f4f0ff; }
:root[data-look="violet"] .chart .base { stroke: var(--divider); }
:root[data-look="violet"] .chart-legend { color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Users: the search field, filter chips, the table on soft rules. */
:root[data-look="violet"] [data-panel="users"] .toolbar .inp { height: 50px; }
:root[data-look="violet"] #usersTable th { border-bottom-color: var(--divider); color: var(--ink-3); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
:root[data-look="violet"] #usersTable th[data-sort] { height: 44px; }
:root[data-look="violet"] #usersTable td { border-bottom-color: var(--divider); color: var(--ink-2); font-variant-numeric: tabular-nums; }
:root[data-look="violet"] #usersTable tr:hover td { background: var(--hover); }
:root[data-look="violet"] #usersTable .cell-sub { color: var(--ink-2); }
:root[data-look="violet"] #usersTable .tag-pill { height: 26px; }
:root[data-look="violet"] .row-actions { gap: 6px; }
:root[data-look="violet"] .pager span { color: var(--ink-2); }

/* Ratings, photo reports and the audit log: raised rows inside their card. */
:root[data-look="violet"] .log-list li { align-items: center; min-height: 56px; padding: 10px 12px 10px 16px; border-radius: var(--r-row); background: var(--surface-2); color: var(--ink-2); line-height: 1.45; }
:root[data-look="violet"] .log-list strong { color: var(--ink); }
:root[data-look="violet"] .log-list .when { color: var(--ink-2); font-variant-numeric: tabular-nums; }
:root[data-look="violet"] .pic-admin-row { padding: 14px; border-radius: var(--r-row); background: var(--surface-2); }
:root[data-look="violet"] .pic-admin-photo { border-radius: 50%; background: var(--surface); }
:root[data-look="violet"] .pic-admin-note { border-radius: var(--r-row); background: var(--surface-2); }
:root[data-look="violet"] .tag-pill.pic-admin-hidden { box-shadow: none; background: var(--v-bad-tint); color: var(--bad); }
:root[data-look="violet"] .pic-admin-lead { color: var(--ink-2); }
:root[data-look="violet"] [data-panel] .empty { padding: 18px 2px 4px; color: var(--ink-2); }
:root[data-look="violet"] #deniedPanel .empty { color: var(--ink-2); }

/* The admin's own sheet (details, confirmations). */
:root[data-look="violet"] #sheet .detail-rows div { padding-bottom: 10px; border-bottom-color: var(--divider); }
:root[data-look="violet"] #sheet .detail-rows .k { color: var(--ink-2); }
:root[data-look="violet"] #sheet .detail-rows span:last-child { color: var(--ink); text-align: right; overflow-wrap: anywhere; }
:root[data-look="violet"] #sheet .sheet-actions .mini-btn { height: 50px; padding: 0 22px; font-size: 0.95rem; }
@media (max-width: 640px) {
    /* The five sections in two rows instead of a strip that hides the last two. */
    :root[data-look="violet"] .console-nav { flex-wrap: wrap; width: 100%; overflow: visible; border-radius: var(--r-row); }
    :root[data-look="violet"] .console-nav button { flex: 1 1 auto; justify-content: center; padding: 0 12px; }
}
@media (max-width: 720px) {
    /* A phone: each account is a raised row (name and plan, the email, the
       actions); the column names stay above as sort buttons. */
    :root[data-look="violet"] [data-panel="users"] .table-wrap { overflow: visible; }
    :root[data-look="violet"] #usersTable, :root[data-look="violet"] #usersTable :is(thead, tbody) { display: block; }
    :root[data-look="violet"] #usersTable thead tr { display: flex; gap: 2px; margin: 0 -4px 8px; overflow-x: auto; scrollbar-width: none; }
    :root[data-look="violet"] #usersTable thead tr::-webkit-scrollbar { display: none; }
    :root[data-look="violet"] #usersTable th { display: inline-flex; flex: none; align-items: center; height: 44px; padding: 0 9px; border: 0; border-radius: var(--r-pill); }
    :root[data-look="violet"] #usersTable td:nth-child(4) { grid-column: 1 / -1; color: var(--ink-2); font-size: 0.84rem; }
    :root[data-look="violet"] #usersTable th.is-sorted { background: var(--accent-soft); color: var(--accent-text); }
    :root[data-look="violet"] #usersTable th:last-child { display: none; }
    :root[data-look="violet"] #usersTable tbody { display: grid; gap: 8px; }
    :root[data-look="violet"] #usersTable tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 14px; border-radius: var(--r-row); background: var(--surface-2); }
    :root[data-look="violet"] #usersTable tbody tr:hover td { background: none; }
    :root[data-look="violet"] #usersTable td { display: block; padding: 0; border: 0; }
    :root[data-look="violet"] #usersTable td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; overflow-wrap: anywhere; }
    :root[data-look="violet"] #usersTable td:nth-child(3) { display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: flex-end; gap: 4px; }
    :root[data-look="violet"] #usersTable td:last-child { grid-column: 1 / -1; margin-top: 6px; }
    :root[data-look="violet"] #usersTable .row-actions { justify-content: flex-start; }
}

/* ---- 11f. public pages: Privacy, Terms, Credits, Collaborations, Contact ----
   The site's own header and foot (section 4), the page's 18px side margin,
   the title at Display M. Long text sits straight on the page in a reading
   column, with clear Archivo headings; paragraphs keep to about 75 letters a
   line (36em: Geist's ch is its wide zero, so 66ch filled the column).
   -------------------------------------------------------------------------- */

:root[data-look="violet"] body:has(:is(.legal, main.cr, .collab, .chatbox)) > :is(header.wrap, main, footer.wrap) { width: min(var(--wrap), calc(100% - 36px)); }
:root[data-look="violet"] body:has(:is(.legal, main.cr)) > main:is(.wraps, .cr) { width: min(720px, calc(100% - 36px)); }
:root[data-look="violet"] body:has(:is(.legal, main.cr, .collab, .chatbox)) > main h1.display { font-size: clamp(var(--title-m), 6vw, 3.4rem); letter-spacing: -0.04em; line-height: 1.02; }
:root[data-look="violet"] body:has(:is(.legal, main.cr, .collab, .chatbox)) > main .lead { margin-top: 10px; max-width: 46ch; font-size: 1.02rem; line-height: 1.55; }
:root[data-look="violet"] body:has(:is(.legal, main.cr, .collab, .chatbox)) > footer.foot { margin-top: 56px; }

/* ---- legal text: a reading column, headings that stand out ---- */
:root[data-look="violet"] .card.legal { margin-top: 30px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
:root[data-look="violet"] .legal h2 {
    margin: 36px 0 10px; color: var(--ink); font-family: var(--font-display); font-stretch: 108%; font-size: var(--title-card); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2;
}
:root[data-look="violet"] .legal :is(p, ul) { max-width: 36em; font-size: 1.02rem; line-height: 1.72; color: var(--ink-2); }
:root[data-look="violet"] .legal > p:first-child { color: var(--ink); font-size: 1.08rem; }
:root[data-look="violet"] .legal ul { margin-top: 10px; padding-left: 22px; }
:root[data-look="violet"] .legal li { padding-left: 4px; }
:root[data-look="violet"] .legal li + li { margin-top: 10px; }
:root[data-look="violet"] .legal ul + p { margin-top: 12px; }
:root[data-look="violet"] .legal li::marker { color: var(--violet-2); }
:root[data-look="violet"] .legal strong { color: var(--ink); }
:root[data-look="violet"] .legal a { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Questions? The address on a card of its own at the end. */
:root[data-look="violet"] .legal .contact {
    margin-top: 40px; padding: 18px 20px; border: 1px solid var(--edge); border-radius: var(--r-row); background: var(--card-fill); color: var(--ink-2);
}

/* ---- credits ---- */
:root[data-look="violet"] .cr .cr-card { margin-top: 36px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
:root[data-look="violet"] .cr-card h2 { color: var(--ink); font-family: var(--font-display); font-stretch: 108%; font-size: var(--title-sec); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
:root[data-look="violet"] .cr-card p { max-width: 36em; font-size: 1.02rem; line-height: 1.7; color: var(--ink-2); }
:root[data-look="violet"] .cr-card .cr-sub { margin-top: 28px; font-family: var(--font-display); font-stretch: 108%; font-size: 1.1rem; font-weight: 800; letter-spacing: -0.01em; }
:root[data-look="violet"] .cr-card a, :root[data-look="violet"] .cr-cites a { color: var(--accent-text); }
/* The facts and the long lists keep their ruled rows: many short lines, read down. */
:root[data-look="violet"] .cr-facts { margin-top: 16px; overflow: hidden; border: 1px solid var(--edge); border-radius: var(--r-row); background: var(--card-fill); }
:root[data-look="violet"] .cr-facts > div { padding: 12px 16px; row-gap: 2px; border-bottom-color: var(--divider); }
/* The links keep their 44px to tap but not the room under their words, so a
   row that wraps (the label over the value) sits even in its rim. */
:root[data-look="violet"] .cr-facts dd a { margin-block: -6px; }
:root[data-look="violet"] .cr-facts > div:last-child { border-bottom: 0; }
:root[data-look="violet"] .cr-facts dt { color: var(--ink-2); }
:root[data-look="violet"] .cr-links { gap: 0 8px; margin-top: 6px; }
:root[data-look="violet"] .cr-links a { padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-pill); text-decoration: none; }
:root[data-look="violet"] .cr-links a:hover { border-color: var(--ink-3); background: var(--hover); }
:root[data-look="violet"] .cr-links li { margin-top: 8px; }
:root[data-look="violet"] .cr-rows { margin-top: 10px; padding: 0 16px; border: 1px solid var(--edge); border-radius: var(--r-row); background: var(--card-fill); }
:root[data-look="violet"] .cr-row { padding: 14px 0; border-bottom-color: var(--divider); }
:root[data-look="violet"] .cr-row:last-child { border-bottom: 0; }
:root[data-look="violet"] .cr-note { color: var(--ink-2); }
:root[data-look="violet"] .cr-dot { color: var(--ink-3); }
:root[data-look="violet"] .cr-empty { color: var(--ink-2); }
:root[data-look="violet"] .cr-cites { color: var(--ink-2); font-size: 0.95rem; }
:root[data-look="violet"] .cr-cites li::marker { color: var(--violet-2); }
:root[data-look="violet"] :is(.cr-card p.cr-fine, .cr-fine) { color: var(--ink-2); font-size: 0.86rem; }
:root[data-look="violet"] .cr-status { border-color: var(--edge); border-radius: var(--r-row); background: var(--card-fill); }

/* ---- collaborations: a bento of cards, the headline tinted violet ---- */
:root[data-look="violet"] .collab { grid-auto-rows: minmax(150px, auto); gap: var(--gap-list); margin-top: 28px; }
:root[data-look="violet"] .collab > * { padding: 22px; }
:root[data-look="violet"] .collab .headline { border-color: var(--tint-edge); background: var(--tint-fill); color: var(--ink); }
:root[data-look="violet"] .collab .headline :is(p, .sub) { color: var(--ink-2); opacity: 1; }
:root[data-look="violet"] .collab .headline > div > p:not(.sub) { color: var(--ink); }
:root[data-look="violet"] .collab .headline .bignum { font-family: var(--font-display); font-stretch: 112%; font-size: clamp(3rem, 9vw, 4.6rem); font-weight: 800; letter-spacing: -0.05em; line-height: 0.95; }
/* "Work with us" is closed for now: a quiet rim pill that says so (its
   title, which the translations cover), after the one thing that works,
   See the site, as the light block. */
:root[data-look="violet"] .collab .headline .row { flex-wrap: wrap; gap: 10px; }
:root[data-look="violet"] .collab .headline .row .btn { height: 52px; }
:root[data-look="violet"] .collab .headline .btn.quiet { order: -1; border-color: transparent; background: var(--ink); color: var(--bg); box-shadow: none; }
:root[data-look="violet"] .collab .headline .btn.quiet:hover { background: #fff; }
:root[data-look="violet"] .collab .headline .btn.is-off { gap: 12px; border-color: var(--line-2); background: transparent; color: var(--ink-2); box-shadow: none; opacity: 1; cursor: default; }
:root[data-look="violet"] .collab .headline .btn.is-off > i { display: none; }
:root[data-look="violet"] .collab .headline .btn.is-off::after { content: attr(title); color: var(--ink-2); font-size: 0.8rem; font-weight: 500; }
:root[data-look="violet"] .collab .kpi { justify-content: flex-end; }
:root[data-look="violet"] .collab .kpi b { font-size: 2.2rem; font-variant-numeric: tabular-nums; }
:root[data-look="violet"] .collab .kpi span { color: var(--ink-2); font-size: 0.88rem; }
:root[data-look="violet"] .collab .quote { margin: 0; font-family: var(--font-display); font-stretch: 108%; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
:root[data-look="violet"] .collab h3 { font-family: var(--font-display); font-stretch: 108%; font-size: var(--title-card); font-weight: 800; letter-spacing: -0.02em; }
:root[data-look="violet"] .collab article p { color: var(--ink-2); }
:root[data-look="violet"] body:has(.collab) main > .between > .open { height: 32px; background: var(--ok-soft); color: var(--ok); }
/* Find us: each platform a raised row inside the card. */
:root[data-look="violet"] .collab .find { gap: 8px; }
:root[data-look="violet"] .collab .find h3 { margin-bottom: 4px; }
:root[data-look="violet"] .collab .find a {
    align-items: center; min-height: 52px; padding: 0 16px; border: 0; border-radius: var(--r-field); background: var(--surface-2); color: var(--ink-2);
}
:root[data-look="violet"] .collab .find a:hover { background: var(--line-2); }
:root[data-look="violet"] .collab .find a:hover b { color: var(--ink); }

/* ---- contact (closed on the site; the page is kept): the chat, Home's way ---- */
:root[data-look="violet"] .chatbox { padding: 18px; }
:root[data-look="violet"] .chatbox .bav { width: 34px; height: 34px; border-radius: 50%; background: var(--violet-fill); color: #fff; font-size: 1.15rem; }
:root[data-look="violet"] .chatbox .bub { border-radius: 20px; font-size: 0.96rem; }
:root[data-look="violet"] .chatbox .bub.bot { border-bottom-left-radius: 6px; background: var(--surface-2); color: var(--ink); }
:root[data-look="violet"] .chatbox .bub.me { border-bottom-right-radius: 6px; background: var(--violet-fill); color: var(--on-violet); }
:root[data-look="violet"] .chatbox .quick .pick { min-height: 44px; }
:root[data-look="violet"] .chatbox .composer { border-top-color: var(--divider); }
:root[data-look="violet"] .chatbox .composer .inp { height: 50px; border-radius: var(--r-pill); padding: 0 18px; }
:root[data-look="violet"] .chatbox .composer .btn { height: 50px; }
:root[data-look="violet"] .chatbox .typing i { background: var(--ink-2); }
:root[data-look="violet"] .chatbox ~ .fallback { color: var(--ink-2); }
:root[data-look="violet"] #credits .list > * { border-color: var(--divider); }

@media (max-width: 640px) {
    /* The two numbers side by side; everything else takes the width. */
    :root[data-look="violet"] .collab { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
    :root[data-look="violet"] .collab > :not(.kpi) { grid-column: 1 / -1; }
    :root[data-look="violet"] .collab > .kpi { min-height: 120px; padding: 18px; }
    :root[data-look="violet"] .collab .headline .row .btn { flex: 1 1 auto; }
}

/* ---- 11g. 404 and offline: standalone pages, no brotein.css (their own inline ----
   styles lose to these). The app icon, one line, one violet button.
   -------------------------------------------------------------------------- */

:root[data-look="violet"] body:has(> main > img:first-child[src*="broteinico-192"]) { box-sizing: border-box; color: var(--ink); font-family: "Geist", system-ui, -apple-system, sans-serif; }
:root[data-look="violet"] body:has(> main > img:first-child[src*="broteinico-192"]) > main { max-width: 340px; }
:root[data-look="violet"] body:has(> main > img:first-child[src*="broteinico-192"]) > main > img { width: 76px; height: 76px; border-radius: 20px; box-shadow: 0 0 0 1px var(--edge-strong), 0 18px 40px rgba(var(--scrim-rgb), 0.5); }
:root[data-look="violet"] body:has(> main > img:first-child[src*="broteinico-192"]) > main > h1 {
    margin: 26px 0 8px; font-family: "Archivo", system-ui, -apple-system, sans-serif; font-stretch: 108%; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1;
}
:root[data-look="violet"] body:has(> main > img:first-child[src*="broteinico-192"]) > main > p { margin: 0 0 26px; color: var(--ink-2); font-size: 1rem; line-height: 1.55; }
:root[data-look="violet"] body:has(> main > img:first-child[src*="broteinico-192"]) > main > a {
    height: 52px; padding: 0 28px; border-radius: var(--r-pill); background: var(--violet-fill); color: var(--on-violet); box-shadow: var(--violet-glow); font-size: 1rem;
    transition: background-color var(--dur) ease, transform var(--dur-fast) ease;
}
:root[data-look="violet"] body:has(> main > img:first-child[src*="broteinico-192"]) > main > a:hover { background: var(--violet-fill-hover); }
:root[data-look="violet"] body:has(> main > img:first-child[src*="broteinico-192"]) > main > a:active { transform: scale(0.98); }
:root[data-look="violet"] body:has(> main > img:first-child[src*="broteinico-192"]) > main > a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    :root[data-look="violet"] body:has(> main > img:first-child[src*="broteinico-192"]) > main > a { transition: none; }
}

/* ==========================================================================
   12. Intro: the sign-up intro (index.html; intro-violet.js draws the screens
   behind intro.js's VIOLET flag, account.js the save form). The approved
   sign-up demo, its lime swapped for the violet, on the app's warm charcoal so
   the intro flows into Home. Every rule sits under main.intro, so
   food-questions.js (it borrows the .intro-* classes) is not touched.

   12a. tokens and the page   12e. the welcome        12i. the paywall
   12b. the top bar           12f. story cards        12j. save the account
   12c. the photo wall        12g. building: the orb  12k. sheets
   12d. questions, the code   12h. the plan preview   12l. computer, short screens, motion
   ========================================================================== */

/* ---- 12a. tokens and the page --------------------------------------------- */

:root[data-look="violet"] {
    /* The notch and the home bar. The test pages set these to 47px and 34px. */
    --iv-st: env(safe-area-inset-top, 0px);
    --iv-sb: env(safe-area-inset-bottom, 0px);
    /* The light button (money and account steps): ink on the page's darkest. */
    --iv-light: var(--ink);
    --iv-on-light: var(--page-end);
}

/* The photos run under the clock, so no strip or padding there; a soft scrim
   keeps the clock readable over photos and over words scrolled under it. */
:root[data-look="violet"] body:has(> main.intro) { padding-top: 0; }
:root[data-look="violet"]:has(main.intro)::after { display: none; }
:root[data-look="violet"] main.intro::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 29; height: var(--iv-st); pointer-events: none;
    background: linear-gradient(rgba(var(--scrim-rgb), 0.6), rgba(var(--scrim-rgb), 0));
}
:root[data-look="violet"] main.intro { position: relative; z-index: 1; min-height: 100dvh; padding-bottom: var(--intro-bar-h, 0px); }
:root[data-look="violet"] main.intro .intro-body { position: relative; }

/* Screen to screen: in from the right (from the left on Back) with a fade. */
:root[data-look="violet"] main.intro .intro-from-right { animation: iv-in-right 240ms var(--ease-spring) both; }
:root[data-look="violet"] main.intro .intro-from-left { animation: iv-in-left 240ms var(--ease-spring) both; }
@keyframes iv-in-right { from { opacity: 0; transform: translateX(24px); } }
@keyframes iv-in-left { from { opacity: 0; transform: translateX(-24px); } }

/* Words. */
:root[data-look="violet"] main.intro .iv-h1 {
    margin: 0; font-family: var(--font-display); font-stretch: 112%; font-size: 2rem; font-weight: 800;
    line-height: 1.06; letter-spacing: -0.04em; color: var(--ink); text-wrap: balance; overflow-wrap: anywhere;
}
:root[data-look="violet"] main.intro .iv-sub { margin: 10px 0 22px; font-size: 1rem; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
:root[data-look="violet"] main.intro .iv-fine { margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--ink-3); text-wrap: pretty; }

/* Buttons: 58px blocks. Violet moves through the flow; the light one is for
   the code, money and the account; Later and the quiet links are words. */
:root[data-look="violet"] main.intro .btn.iv-btn { width: 100%; height: 58px; padding: 0 20px; border-radius: var(--r-block); font-size: 1.05rem; font-weight: 700; }
:root[data-look="violet"] main.intro .btn.iv-light { border: 0; background: var(--iv-light); color: var(--iv-on-light); box-shadow: none; }
:root[data-look="violet"] main.intro .btn.iv-light:hover { background: #fff; }
:root[data-look="violet"] main.intro .btn.iv-btn:active:not(:disabled) { transform: scale(0.98); }
:root[data-look="violet"] main.intro .btn.iv-btn:disabled { border: 0; background: var(--surface-2); color: var(--ink-3); box-shadow: none; transform: none; cursor: default; opacity: 1; }
:root[data-look="violet"] main.intro .intro-alt {
    display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 6px auto 0; padding: 0 14px;
    color: var(--ink-2); font-size: 0.95rem; font-weight: 600; text-decoration: none;
}
:root[data-look="violet"] main.intro .intro-alt:hover { color: var(--ink); }
:root[data-look="violet"] main.intro .iv-quiet {
    display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 10px auto 0; padding: 0 14px;
    border: 0; border-radius: var(--r-pill); background: none; color: var(--accent-text); font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer;
}
:root[data-look="violet"] main.intro .iv-quiet:hover { background: var(--hover); }
:root[data-look="violet"] main.intro :is(.btn, .iv-quiet, .intro-alt, .iv-row, .iv-plan, .iv-units button, .iv-glass, .iv-tap):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* A status or error line under what was tapped. */
:root[data-look="violet"] main.intro .intro-status { min-height: 0; margin: 12px 2px 0; font-size: 0.9rem; font-weight: 600; line-height: 1.4; color: var(--ink-2); text-align: left; }
:root[data-look="violet"] main.intro .intro-status:empty { margin: 0; }
:root[data-look="violet"] main.intro .intro-status.bad { color: var(--bad); }

/* ---- 12b. the top bar: Back, and on a question nine segments and "3/9" ---- */

:root[data-look="violet"] main.intro .iv-top {
    position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: auto;
    padding: calc(var(--iv-st) + 8px) 16px 0; background: none; pointer-events: none;
}
/* The two screens that scroll (the plan, the paywall): Back scrolls away with
   the page's top, as the round back does on every other page. */
:root[data-look="violet"] main.intro:is(.intro-at-preview, .intro-at-paywall) .iv-top { position: absolute; }
:root[data-look="violet"] main.intro .iv-top .intro-top-in { width: min(560px, 100%); height: 44px; gap: 12px; margin: 0 auto; }
:root[data-look="violet"] main.intro .iv-top .intro-top-in > * { pointer-events: auto; }
/* The round, arrow-only back: a soft rim on the page, glass on photos. */
:root[data-look="violet"] main.intro .iv-glass {
    flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0;
    border: 1px solid var(--edge-strong); border-radius: 50%; background: rgba(255, 255, 255, 0.06); color: var(--ink);
    font-size: 20px; cursor: pointer; transition: background-color var(--dur) ease, transform var(--dur-fast) ease;
}
:root[data-look="violet"] main.intro .iv-glass:hover { background: rgba(255, 255, 255, 0.12); }
:root[data-look="violet"] main.intro .iv-glass:active { transform: scale(0.95); }
:root[data-look="violet"] main.intro:is([class*="intro-at-q-"], .intro-at-paywall):not(:has(.iv-echo)) .iv-glass {
    border-color: var(--glass-edge); background: var(--glass); color: #fff;
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
/* The segments: done in light violet, this one violet, the rest faint. */
:root[data-look="violet"] main.intro .iv-segs {
    flex: 1; display: flex; gap: 3px; min-width: 0; padding: 8px 10px; border-radius: var(--r-pill);
    background: rgba(var(--scrim-rgb), 0.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
:root[data-look="violet"] main.intro .iv-segs > span { position: relative; flex: 1; height: 4px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, 0.2); }
:root[data-look="violet"] main.intro .iv-segs > .is-done { background: var(--violet-2); }
:root[data-look="violet"] main.intro .iv-segs > .is-now::after {
    content: ""; position: absolute; inset: 0; background: var(--violet-fade); transform-origin: left center;
    animation: iv-seg-fill 240ms var(--ease-out) both;
}
/* The story bars on What you get: no glass, the page is plain there. */
:root[data-look="violet"] main.intro .iv-segs.is-story { padding: 8px 4px; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-look="violet"] main.intro .iv-segs.is-story > span { height: 3px; }
:root[data-look="violet"] main.intro .iv-segs.is-story > .is-done { background: rgba(255, 255, 255, 0.85); }
:root[data-look="violet"] main.intro .iv-segs[hidden] { display: none; }
@keyframes iv-seg-fill { from { transform: scaleX(0); } }
:root[data-look="violet"] main.intro .iv-count {
    flex: none; padding: 5px 10px; border-radius: var(--r-pill); background: rgba(var(--scrim-rgb), 0.62); white-space: nowrap;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: #fff; font-size: 0.82rem; font-weight: 600; line-height: 1.2; text-align: center; font-variant-numeric: tabular-nums;
}

/* ---- 12c. the photo wall, and the splash ---------------------------------- */

/* Behind the code and question screens (and dimmed behind Save): it fades
   into the page at its foot, under the headline. */
:root[data-look="violet"] .iv-wall {
    position: absolute; top: 0; left: 0; right: 0; z-index: 0; height: var(--wall-h, 440px); overflow: hidden; pointer-events: none;
    opacity: 0; visibility: hidden;
    transition: opacity 300ms ease, visibility 0s linear 300ms, height 560ms var(--ease-spring);
    -webkit-mask-image: linear-gradient(#000 calc(100% - 170px), transparent); mask-image: linear-gradient(#000 calc(100% - 170px), transparent);
}
:root[data-look="violet"] .iv-wall.is-on { opacity: 1; visibility: visible; transition: opacity 300ms ease, visibility 0s, height 560ms var(--ease-spring); }
:root[data-look="violet"] .iv-wall::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: 4; height: calc(var(--iv-st) + 120px);
    background: linear-gradient(rgba(var(--scrim-rgb), 0.7), rgba(var(--scrim-rgb), 0));
}
/* The cards behind the lifted one are a shade darker. */
:root[data-look="violet"] .iv-wall::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(var(--scrim-rgb), 0.2); }
:root[data-look="violet"] .iv-wall.is-dim { height: 100lvh; }
:root[data-look="violet"] .iv-wall.is-dim::after { z-index: 3; background: rgba(var(--scrim-rgb), 0.5); }
:root[data-look="violet"] .iv-wall.is-dim .iv-card .iv-chip { opacity: 0; }
:root[data-look="violet"] .iv-deck {
    position: absolute; left: 55%; top: var(--dy, 48%); width: 0; height: 0;
    transform: scale(var(--ds, 1)) rotate(-24deg) translateY(var(--shift, 0px));
    transition: transform 560ms var(--ease-spring), top 560ms var(--ease-spring);
}
:root[data-look="violet"] .iv-wall.is-still :is(.iv-deck, .iv-card) { transition: none !important; }
:root[data-look="violet"] .iv-card {
    position: absolute; z-index: 0; width: 168px; height: 212px; margin: -106px 0 0 -84px; overflow: hidden;
    border-radius: var(--r-feature); background: var(--photo-base);
    transition: transform 560ms var(--ease-spring), box-shadow 560ms var(--ease-spring);
}
:root[data-look="violet"] .iv-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); pointer-events: none; }
:root[data-look="violet"] .iv-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.04) brightness(0.86); }
:root[data-look="violet"] .iv-card.is-focus { z-index: 2; transform: scale(1.06); box-shadow: 0 24px 48px rgba(var(--scrim-rgb), 0.55); }
:root[data-look="violet"] .iv-card.is-focus img { filter: saturate(0.95) contrast(1.04); }
/* A glass chip on the lifted card, drawn like the app. */
:root[data-look="violet"] .iv-chip {
    position: absolute; left: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 24px); height: 30px; padding: 0 11px 0 9px;
    border: 1px solid var(--glass-edge); border-radius: var(--r-pill); background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    color: #fff; font-size: 0.8rem; font-weight: 600; line-height: 1; white-space: nowrap; opacity: 0; transition: opacity 300ms ease 200ms;
}
:root[data-look="violet"] .iv-chip i { font-size: 15px; color: var(--accent-text); }
:root[data-look="violet"] .iv-chip span { overflow: hidden; text-overflow: ellipsis; }
:root[data-look="violet"] .iv-card.is-focus .iv-chip { opacity: 1; }
:root[data-look="violet"] .iv-wall.is-short .iv-chip { opacity: 0; transition-delay: 0s; }

/* The splash: the wordmark, a short violet bar and the line. */
:root[data-look="violet"] .iv-splash {
    position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; cursor: pointer;
    background: var(--fade); background-color: var(--page-end); transition: opacity 300ms ease;
}
:root[data-look="violet"] .iv-splash.is-out { opacity: 0; }
:root[data-look="violet"] .iv-splash img { width: 200px; height: auto; animation: iv-logo-in 600ms var(--ease-out) both; }
:root[data-look="violet"] .iv-splash-bar { position: absolute; top: calc(50% + 70px); left: 50%; width: 44px; height: 3px; margin-left: -22px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, 0.12); }
:root[data-look="violet"] .iv-splash-bar::after { content: ""; position: absolute; inset: 0; background: var(--violet-fade); transform-origin: left; animation: iv-bar 900ms var(--ease-out) both; }
:root[data-look="violet"] .iv-splash p { position: absolute; left: 0; right: 0; bottom: calc(var(--iv-sb) + 64px); margin: 0; text-align: center; font-size: 1rem; color: var(--ink-2); animation: iv-fade 600ms ease 250ms both; }
@keyframes iv-logo-in { from { opacity: 0; transform: scale(0.94); } }
@keyframes iv-bar { from { transform: scaleX(0); } }
@keyframes iv-fade { from { opacity: 0; } }

/* ---- 12d. questions and the access code ----------------------------------- */

/* Room for the wall, then the words and answers low, near the thumb. */
:root[data-look="violet"] main.intro .iv-q { display: flex; flex-direction: column; min-height: 100dvh; padding-top: var(--iv-st); }
:root[data-look="violet"] main.intro .iv-spacer { flex: 1 1 0; min-height: 136px; max-height: calc(64dvh - 64px); }
:root[data-look="violet"].iv-kb main.intro .iv-q .iv-spacer { flex: 0 0 76px; min-height: 76px; }
:root[data-look="violet"] main.intro .iv-qbody { position: relative; z-index: 2; width: min(480px, 100%); margin: 0 auto; padding: 0 18px calc(var(--iv-sb) + 16px); }
:root[data-look="violet"] main.intro .iv-qbody > .iv-btn { margin-top: 16px; }
/* The wall refits when the words grow (intro-violet.js, bodyWatcher); while
   it moves, a soft shade keeps the lines under the headline readable. */
:root[data-look="violet"] main.intro .iv-q .iv-sub { text-shadow: 0 1px 12px rgba(var(--scrim-rgb), 0.9); }

/* Answers: a row each, a round chevron; picked fills violet and the chevron nudges right. */
:root[data-look="violet"] main.intro .iv-rows { display: grid; gap: var(--gap-list); margin: 0; }
:root[data-look="violet"] main.intro .iv-row {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px 10px 20px;
    border: 1px solid var(--edge); border-radius: var(--r-row); background: var(--card-fill); color: var(--ink);
    font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
    transition: transform var(--dur-fast) ease, background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
:root[data-look="violet"] main.intro .iv-row::after { content: none; }
:root[data-look="violet"] main.intro .iv-row:hover { border-color: var(--edge-strong); }
:root[data-look="violet"] main.intro .iv-row:active { transform: scale(0.98); }
:root[data-look="violet"] main.intro .iv-row:has(.iv-row-note) { min-height: 64px; }
:root[data-look="violet"] main.intro .iv-row-t { flex: 1; min-width: 0; display: grid; gap: 1px; }
:root[data-look="violet"] main.intro .iv-row-label { font-size: 1.06rem; font-weight: 500; line-height: 1.3; }
:root[data-look="violet"] main.intro .iv-row-note { font-size: 0.84rem; line-height: 1.35; color: var(--ink-2); }
:root[data-look="violet"] main.intro .iv-num { margin-right: 2px; font-family: var(--font-display); font-stretch: 108%; font-size: 1.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
:root[data-look="violet"] main.intro :is(.iv-chev, .iv-tick) { flex: none; display: grid; place-items: center; border-radius: 50%; transition: transform 120ms var(--ease-spring), background-color 120ms ease, border-color 120ms ease; }
:root[data-look="violet"] main.intro .iv-chev { width: 32px; height: 32px; background: var(--surface-2); color: var(--ink-2); }
:root[data-look="violet"] main.intro .iv-chev::before,
:root[data-look="violet"] main.intro .iv-tick::before { content: ""; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--i-caret-right) center / contain no-repeat; mask: var(--i-caret-right) center / contain no-repeat; }
:root[data-look="violet"] main.intro .iv-tick { width: 26px; height: 26px; margin-right: 3px; border: 2px solid var(--ink-3); color: transparent; }
:root[data-look="violet"] main.intro .iv-tick::before { -webkit-mask-image: var(--iv-i-check); mask-image: var(--iv-i-check); }
:root[data-look="violet"] main.intro .iv-row:is(.is-on, [aria-pressed="true"]) {
    border-color: transparent; background: var(--violet-fill); color: var(--on-violet); box-shadow: var(--violet-glow);
}
:root[data-look="violet"] main.intro .iv-row:is(.is-on, [aria-pressed="true"]) .iv-row-label { font-weight: 600; }
:root[data-look="violet"] main.intro .iv-row:is(.is-on, [aria-pressed="true"]) .iv-row-note { color: var(--on-violet-2); }
:root[data-look="violet"] main.intro .iv-row:is(.is-on, [aria-pressed="true"]) .iv-chev { background: var(--on-violet); color: var(--accent-strong); transform: translateX(4px); }
:root[data-look="violet"] main.intro .iv-row:is(.is-on, [aria-pressed="true"]) .iv-tick { border-color: var(--on-violet); background: var(--on-violet); color: var(--accent-strong); }
/* As many as apply (injuries): picked is tinted with a violet tick, not
   filled, so a few picks never flood the screen (as the food questions). */
:root[data-look="violet"] main.intro .iv-row:has(.iv-tick):is(.is-on, [aria-pressed="true"]) {
    border-color: var(--accent-text); background: var(--tint-fill); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent-text);
}
:root[data-look="violet"] main.intro .iv-row:has(.iv-tick):is(.is-on, [aria-pressed="true"]) .iv-row-note { color: var(--ink-2); }
:root[data-look="violet"] main.intro .iv-row:has(.iv-tick):is(.is-on, [aria-pressed="true"]) .iv-tick { border-color: transparent; background: var(--violet-fill); color: var(--on-violet); }
/* No injuries stands apart from the ticks: dashed, as No allergies in the food questions. */
:root[data-look="violet"] main.intro .iv-row.is-none { margin-top: 6px; border-style: dashed; border-color: var(--line-2); background: transparent; }
:root[data-look="violet"] main.intro .iv-row.is-none:is(.is-on, [aria-pressed="true"]) { border-style: solid; border-color: transparent; background: var(--violet-fill); }
:root[data-look="violet"] {
    --iv-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5 10 17 18.5 8' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* The name: one big field. */
:root[data-look="violet"] main.intro .iv-field {
    display: block; width: 100%; height: 60px; padding: 0 20px; border: 1px solid var(--edge); border-radius: var(--r-row);
    background: var(--card-fill); color: var(--ink); font: inherit; font-size: 1.25rem; font-weight: 500; outline: none;
    transition: border-color var(--dur) ease, box-shadow var(--dur) ease;
}
:root[data-look="violet"] main.intro .iv-field::placeholder { color: var(--ink-3); opacity: 1; }
:root[data-look="violet"] main.intro .iv-field:focus { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(var(--violet-rgb), 0.28); }

/* The access code: six boxes over one real field. */
:root[data-look="violet"] main.intro .iv-code { position: relative; display: flex; gap: 8px; }
:root[data-look="violet"] main.intro .iv-box {
    flex: 1 1 0; min-width: 0; height: 58px; display: grid; place-items: center;
    border: 1px solid var(--edge); border-radius: var(--r-field); background: var(--surface-2); color: var(--ink);
    font-family: var(--font-display); font-stretch: 108%; font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
:root[data-look="violet"] main.intro .iv-box.is-at { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(var(--violet-rgb), 0.28); }
:root[data-look="violet"] main.intro .iv-box.is-at:empty::after { content: ""; width: 2px; height: 26px; background: var(--violet-2); animation: iv-blink 1s steps(1) infinite; }
:root[data-look="violet"] main.intro .iv-code-in {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0.01;
    background: transparent; color: transparent; caret-color: transparent; font-size: 16px; cursor: pointer;
}
:root[data-look="violet"] main.intro .iv-code-in::selection { background: transparent; }
:root[data-look="violet"] main.intro .iv-code:has(.iv-code-in:disabled) .iv-box { opacity: 0.5; }
@keyframes iv-blink { 50% { opacity: 0; } }

/* Safari on an iPhone: add to the Home Screen first. */
:root[data-look="violet"] main.intro .intro-ios {
    display: flex; align-items: flex-start; gap: 12px; margin: 16px 0 0; padding: 14px 16px 4px;
    border: 1px solid var(--edge); border-radius: var(--r-row); background: var(--card-fill); text-align: left;
}
:root[data-look="violet"] main.intro .intro-ios > i { flex: none; margin-top: 1px; font-size: 1.4rem; color: var(--accent-text); }
:root[data-look="violet"] main.intro .intro-ios p { margin: 0; font-size: 0.9rem; line-height: 1.45; color: var(--ink-2); }
:root[data-look="violet"] main.intro .intro-ios .link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--accent-text); font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer; }

/* Age, height and weight: a row each, the units as a small violet switch. */
:root[data-look="violet"] main.intro .iv-nums { display: grid; gap: var(--gap-list); }
:root[data-look="violet"] main.intro .iv-num-row {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 10px; min-height: 64px; padding: 9px 10px 9px 20px;
    border: 1px solid var(--edge); border-radius: var(--r-row); background: var(--card-fill);
}
:root[data-look="violet"] main.intro .iv-num-row:focus-within { border-color: var(--edge-strong); }
:root[data-look="violet"] main.intro .iv-num-label { flex: 1 1 auto; min-width: 56px; font-size: 1.06rem; font-weight: 500; color: var(--ink); }
:root[data-look="violet"] main.intro .iv-num-in {
    flex: none; width: 76px; height: 44px; padding: 0 10px; border: 1px solid var(--edge); border-radius: var(--r-field);
    background: var(--surface-2); color: var(--ink); font-family: var(--font-display); font-stretch: 108%; font-size: 1.25rem; font-weight: 700;
    text-align: center; font-variant-numeric: tabular-nums; outline: none; transition: border-color var(--dur) ease, box-shadow var(--dur) ease;
}
:root[data-look="violet"] main.intro .iv-num-in:focus { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(var(--violet-rgb), 0.28); }
:root[data-look="violet"] main.intro .iv-pair { display: inline-flex; align-items: center; gap: 4px; }
:root[data-look="violet"] main.intro .iv-pair .iv-num-in { width: 48px; padding: 0 4px; }
:root[data-look="violet"] main.intro .iv-pair small { margin-right: 4px; font-size: 0.86rem; font-weight: 600; color: var(--ink-2); }
:root[data-look="violet"] main.intro .iv-units { display: inline-flex; flex: none; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--surface-2); }
:root[data-look="violet"] main.intro .iv-units button {
    position: relative; min-width: 44px; height: 32px; padding: 0 8px; border: 0; border-radius: var(--r-pill);
    background: none; color: var(--ink-2); font: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer;
}
/* A 44px tap box on the 32px pill. */
:root[data-look="violet"] main.intro .iv-units button::before { content: ""; position: absolute; inset: -6px -1px; }
:root[data-look="violet"] main.intro .iv-units button.on { background: var(--violet-fill); color: var(--on-violet); box-shadow: 0 4px 12px rgba(var(--violet-rgb), 0.3); }

/* ---- 12e. the welcome: one photo, the words low, near the thumb ----------- */

:root[data-look="violet"] main.intro .iv-welcome { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 100dvh; }
:root[data-look="violet"] main.intro .iv-welcome-photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--photo-base); }
:root[data-look="violet"] main.intro .iv-welcome-photo img {
    width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; transform-origin: 40% 40%;
    filter: saturate(0.92) contrast(1.04); animation: iv-push 7s var(--ease-out) both;
}
:root[data-look="violet"] main.intro .iv-welcome-photo::before { content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: calc(var(--iv-st) + 140px); background: linear-gradient(rgba(var(--scrim-rgb), 0.62), rgba(var(--scrim-rgb), 0)); }
:root[data-look="violet"] main.intro .iv-welcome-photo::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(rgba(var(--scrim-rgb), 0) 42%, rgba(var(--scrim-rgb), 0.82) 66%, var(--page-end) 94%);
}
/* Safari's Home Screen card makes the words taller: the shade starts higher. */
:root[data-look="violet"] main.intro .iv-welcome:has(.intro-ios) .iv-welcome-photo::after {
    background: linear-gradient(rgba(var(--scrim-rgb), 0) 24%, rgba(var(--scrim-rgb), 0.84) 48%, var(--page-end) 86%);
}
:root[data-look="violet"] main.intro .iv-wordmark { position: absolute; top: calc(var(--iv-st) + 14px); left: 20px; width: auto; height: 26px; }
:root[data-look="violet"] main.intro .iv-welcome-words { width: min(480px, 100%); margin-top: auto; padding: 0 20px calc(var(--iv-sb) + 14px); }
:root[data-look="violet"] main.intro .iv-welcome .iv-h1 { font-size: clamp(2.2rem, 9.4vw, 2.7rem); line-height: 1.02; color: #fff; }
:root[data-look="violet"] main.intro .iv-welcome .iv-sub { margin-bottom: 22px; }
:root[data-look="violet"] main.intro .iv-welcome .intro-ios { margin: -6px 0 16px; }
:root[data-look="violet"] main.intro .iv-kicker {
    display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
    color: var(--accent-text); font-size: 0.8rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase;
}
:root[data-look="violet"] main.intro .iv-kicker::before { content: ""; width: 18px; height: 2px; border-radius: 1px; background: currentColor; }
@keyframes iv-push { from { transform: scale(1.06); } }

/* ---- 12f. story cards: your goal, and What you get ------------------------ */

:root[data-look="violet"] main.intro .iv-inset-screen {
    display: flex; flex-direction: column; gap: 16px; width: min(520px, 100%); min-height: 100dvh; margin: 0 auto;
    padding: calc(var(--iv-st) + 64px) 16px calc(var(--iv-sb) + 12px);
}
:root[data-look="violet"] main.intro .iv-tour .iv-inset-screen { min-height: calc(100dvh - var(--intro-bar-h, 90px)); padding-bottom: 4px; }
:root[data-look="violet"] main.intro .iv-inset {
    position: relative; isolation: isolate; flex: 1 1 auto; min-height: 420px; overflow: hidden;
    border: 1px solid var(--edge); border-radius: var(--r-feature); background: var(--photo-base);
}
:root[data-look="violet"] main.intro .iv-inset-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); }
:root[data-look="violet"] main.intro .iv-inset-pic.is-slow { animation: iv-push 7s var(--ease-out) both; }
:root[data-look="violet"] main.intro .iv-inset::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(rgba(var(--scrim-rgb), 0.35), rgba(var(--scrim-rgb), 0) 22%, rgba(var(--scrim-rgb), 0) 40%, rgba(var(--scrim-rgb), 0.84) 70%, rgba(var(--scrim-rgb), 0.96));
}
:root[data-look="violet"] main.intro .iv-tag {
    position: absolute; top: 16px; left: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 32px); height: 32px; padding: 0 13px 0 11px;
    border-radius: var(--r-pill); font-size: 0.82rem; font-weight: 700; line-height: 1; white-space: nowrap;
}
:root[data-look="violet"] main.intro .iv-tag > span { overflow: hidden; text-overflow: ellipsis; }
:root[data-look="violet"] main.intro .iv-tag i { font-size: 15px; }
:root[data-look="violet"] main.intro .iv-tag.is-light { background: var(--iv-light); color: var(--iv-on-light); }
:root[data-look="violet"] main.intro .iv-tag.is-violet { background: var(--violet-fill); color: var(--on-violet); box-shadow: var(--violet-glow); }
:root[data-look="violet"] main.intro .iv-inset-words { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 0 22px 24px; pointer-events: none; }
:root[data-look="violet"] main.intro .iv-inset .iv-h1 { font-size: 1.85rem; line-height: 1.08; color: #fff; }
:root[data-look="violet"] main.intro .iv-inset .iv-sub { margin: 10px 0 0; color: var(--ink-2); }
/* Tap the right of a card for the next, the left for the one before. */
:root[data-look="violet"] main.intro .iv-tap { position: absolute; top: 0; bottom: 30%; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:root[data-look="violet"] main.intro .iv-tap.is-prev { left: 0; width: 34%; }
:root[data-look="violet"] main.intro .iv-tap.is-next { right: 0; width: 66%; }
:root[data-look="violet"] main.intro .iv-tap:focus-visible { outline-offset: -4px; border-radius: var(--r-feature); }
:root[data-look="violet"] main.intro .iv-tour.is-from-right { animation: iv-in-right 240ms var(--ease-spring) both; }
:root[data-look="violet"] main.intro .iv-tour.is-from-left { animation: iv-in-left 240ms var(--ease-spring) both; }

/* Drawn on the story photos, like the app's own: glass cards and chips. */
:root[data-look="violet"] main.intro :is(.iv-setcard, .iv-weekcard, .iv-uichip) {
    border: 1px solid var(--glass-edge); background: var(--glass); color: #fff;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
:root[data-look="violet"] main.intro :is(.iv-setcard, .iv-weekcard) { position: absolute; top: 64px; left: 18px; right: 18px; z-index: 2; border-radius: var(--r-card); box-shadow: 0 16px 40px rgba(var(--scrim-rgb), 0.35); }
:root[data-look="violet"] main.intro .iv-setcard { padding: 14px; }
:root[data-look="violet"] main.intro .iv-setcard b { display: flex; align-items: center; gap: 10px; margin: 0 0 10px 2px; font-size: 0.95rem; line-height: 1.3; }
:root[data-look="violet"] main.intro :is(.iv-setcard b, .iv-weekcard p) small { margin-left: auto; color: rgba(255, 255, 255, 0.78); font-size: 0.75rem; font-weight: 500; }
:root[data-look="violet"] main.intro .iv-set { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 8px 0 10px; border-radius: var(--r-field); background: rgba(255, 255, 255, 0.07); font-weight: 600; }
:root[data-look="violet"] main.intro .iv-set + .iv-set { margin-top: 6px; }
:root[data-look="violet"] main.intro .iv-set.is-next { box-shadow: inset 0 0 0 1.5px var(--violet-2); }
:root[data-look="violet"] main.intro .iv-set-no { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); font-size: 0.75rem; }
:root[data-look="violet"] main.intro .iv-set-v { flex: 1; display: flex; gap: 14px; font-family: var(--font-display); font-stretch: 108%; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
:root[data-look="violet"] main.intro .iv-set-v small { margin-left: 3px; font-family: var(--font-ui); font-size: 0.78rem; font-weight: 500; color: rgba(255, 255, 255, 0.75); }
:root[data-look="violet"] main.intro .iv-set-last { font-size: 0.75rem; font-weight: 500; color: rgba(255, 255, 255, 0.78); }
:root[data-look="violet"] main.intro .iv-set-tick { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--violet-fill); color: var(--on-violet); font-size: 15px; }
:root[data-look="violet"] main.intro .iv-set.is-next .iv-set-tick { border: 2px solid rgba(255, 255, 255, 0.32); background: none; }
:root[data-look="violet"] main.intro .iv-uichip {
    position: relative; display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 9px 13px 9px 10px;
    border-radius: var(--r-field); font-size: 0.88rem; font-weight: 600; line-height: 1.25;
}
:root[data-look="violet"] main.intro .iv-uichip i { font-size: 18px; color: var(--accent-text); }
:root[data-look="violet"] main.intro .iv-uichip small { display: block; font-size: 0.75rem; font-weight: 500; color: rgba(255, 255, 255, 0.8); }
/* The food card: the plan's own dish on a slowly turning plate, chips around it. */
:root[data-look="violet"] main.intro .iv-plate-art { position: absolute; inset: 0; background: radial-gradient(circle at 50% 36%, rgba(var(--violet-rgb), 0.2), rgba(var(--violet-rgb), 0) 55%), var(--photo-base); }
:root[data-look="violet"] main.intro .iv-plate-wrap { --pd: min(280px, 64vw, 34dvh); position: absolute; top: min(40%, calc(var(--pd) / 2 + 56px)); left: 50%; width: var(--pd); height: var(--pd); transform: translate(-50%, -50%); }
:root[data-look="violet"] main.intro .iv-plate { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; box-shadow: 0 30px 60px rgba(var(--scrim-rgb), 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06); animation: iv-spin 90s linear infinite; }
:root[data-look="violet"] main.intro .iv-plate img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.3); }
:root[data-look="violet"] main.intro .iv-plate-wrap .iv-uichip { position: absolute; margin: 0; white-space: nowrap; box-shadow: 0 12px 30px rgba(var(--scrim-rgb), 0.35); }
:root[data-look="violet"] main.intro .iv-uichip.is-kcal { top: -14px; right: -22px; }
:root[data-look="violet"] main.intro .iv-uichip.is-dish { top: 62%; left: -22px; }
:root[data-look="violet"] main.intro .iv-uichip.is-shop { top: 90%; right: -22px; }
@keyframes iv-spin { to { transform: rotate(360deg); } }
/* The streak card on the friends photo (an example week). */
:root[data-look="violet"] main.intro .iv-weekcard { padding: 14px 14px 16px; }
:root[data-look="violet"] main.intro .iv-weekcard p { display: flex; align-items: center; gap: 8px; margin: 0 0 12px 2px; font-size: 0.95rem; font-weight: 600; }
:root[data-look="violet"] main.intro .iv-weekcard p i { font-size: 20px; color: var(--accent-text); }
:root[data-look="violet"] main.intro .iv-weekcard > div { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
:root[data-look="violet"] main.intro .iv-weekcard > div > span { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 600; color: rgba(255, 255, 255, 0.8); }
:root[data-look="violet"] main.intro .iv-weekcard > div i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); font-size: 14px; font-style: normal; }
:root[data-look="violet"] main.intro .iv-weekcard > div .is-done i { background: var(--violet-mark); color: var(--on-violet); }
:root[data-look="violet"] main.intro .iv-weekcard > div .is-rest i { border: 1.5px dashed rgba(255, 255, 255, 0.24); background: none; }

/* Less guessing: the grey card without, the violet card with, overlapping. */
:root[data-look="violet"] main.intro .iv-ww { display: flex; flex-direction: column; width: min(480px, 100%); min-height: calc(100dvh - var(--intro-bar-h, 90px)); margin: 0 auto; padding: calc(var(--iv-st) + 64px) 18px 26px; }
:root[data-look="violet"] main.intro .iv-ww .iv-h1 { text-align: center; }
:root[data-look="violet"] main.intro .iv-ww-stage { --lift: 104px; flex: 1 0 auto; display: grid; grid-template-columns: 1fr; margin: 22px 0 8px; }
:root[data-look="violet"] main.intro .iv-ww-card { position: relative; grid-area: 1 / 1; overflow: hidden; padding: 20px 16px 124px 18px; border-radius: var(--r-feature); }
:root[data-look="violet"] main.intro .iv-ww-card h2 { margin: 0 0 16px; font-family: var(--font-display); font-stretch: 108%; font-size: 1.45rem; font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; }
:root[data-look="violet"] main.intro .iv-ww-card ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
:root[data-look="violet"] main.intro .iv-ww-card li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.94rem; line-height: 1.3; }
:root[data-look="violet"] main.intro .iv-ww-card li i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: -1px; border-radius: 50%; font-size: 12px; }
:root[data-look="violet"] main.intro .iv-ww-card.is-without { z-index: 1; align-self: start; justify-self: start; width: 190px; min-height: calc(100% - var(--lift)); padding-right: 40px; border: 1px solid var(--edge); background: var(--card-fill); color: var(--ink-2); }
:root[data-look="violet"] main.intro .iv-ww-card.is-without h2 { color: var(--ink); }
:root[data-look="violet"] main.intro .iv-ww-card.is-without li i { background: var(--surface-2); color: var(--ink-2); }
:root[data-look="violet"] main.intro .iv-ww-card.is-with { z-index: 2; align-self: stretch; justify-self: end; width: 186px; margin-top: var(--lift); background: var(--violet-fill); color: var(--on-violet); box-shadow: -12px 18px 36px rgba(var(--scrim-rgb), 0.45), 0 10px 30px rgba(var(--violet-rgb), 0.3); }
:root[data-look="violet"] main.intro .iv-ww-card.is-with li { font-weight: 500; }
:root[data-look="violet"] main.intro .iv-ww-card.is-with li i { background: var(--on-violet); color: var(--accent-strong); }
:root[data-look="violet"] main.intro .iv-mascot { position: absolute; width: 104px; height: 104px; }
:root[data-look="violet"] main.intro .is-without .iv-mascot { left: 10px; bottom: 6px; }
:root[data-look="violet"] main.intro .is-with .iv-mascot { bottom: 10px; left: 50%; margin-left: -52px; }
:root[data-look="violet"] main.intro .iv-tour.is-ww .is-without { animation: iv-from-left 360ms var(--ease-spring) both; }
:root[data-look="violet"] main.intro .iv-tour.is-ww .is-with { animation: iv-from-right 360ms var(--ease-spring) 80ms both; }
:root[data-look="violet"] main.intro .iv-tour.is-ww .is-with .iv-mascot { animation: iv-hop 400ms var(--ease-spring) 420ms both; }
@keyframes iv-from-left { from { opacity: 0; transform: translateX(-28px); } }
@keyframes iv-from-right { from { opacity: 0; transform: translateX(28px); } }
@keyframes iv-hop { 50% { transform: translateY(-6px); } }

/* ---- 12g. building: the liquid orb ---------------------------------------- */

:root[data-look="violet"] main.intro .iv-build {
    --orb: 168px; position: relative; display: flex; flex-direction: column; align-items: center; min-height: 100dvh;
    padding: calc(var(--iv-st) + 88px) 18px calc(var(--iv-sb) + 16px); text-align: center;
}
:root[data-look="violet"] main.intro .iv-build::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; pointer-events: none;
    background: radial-gradient(ellipse at 50% 110%, rgba(var(--violet-rgb), 0.12), rgba(var(--violet-rgb), 0) 62%);
}
:root[data-look="violet"] main.intro .iv-orb { position: relative; flex: none; width: var(--orb); height: var(--orb); }
:root[data-look="violet"] main.intro .iv-orb-glow {
    position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(var(--violet-rgb), 0.32) 0, rgba(var(--violet-rgb), 0) 64%); animation: iv-breathe 3s ease-in-out infinite;
}
:root[data-look="violet"] main.intro .iv-orb-wob {
    position: relative; display: block; width: var(--orb); height: var(--orb); overflow: hidden; border-radius: 50%;
    box-shadow: 0 18px 40px rgba(var(--scrim-rgb), 0.45), 0 0 0 1px rgba(var(--violet-rgb), 0.16); transform: translateZ(0);
    animation: iv-wobble 4.2s ease-in-out infinite;
}
:root[data-look="violet"] main.intro .iv-orb-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
:root[data-look="violet"] main.intro .iv-orb-pct {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-top: 4px;
    color: var(--on-violet); font-family: var(--font-display); font-stretch: 108%; font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums; text-shadow: 0 0 2px rgba(var(--scrim-rgb), 0.55), 0 2px 12px rgba(var(--scrim-rgb), 0.6); transition: opacity 150ms ease;
}
:root[data-look="violet"] main.intro .iv-orb-pct small { margin-left: 1px; font-size: 0.6em; }
:root[data-look="violet"] main.intro .iv-orb-tick { opacity: 0; transform: scale(0); transform-origin: 100px 100px; transition: transform 220ms var(--ease-spring), opacity 220ms ease; }
:root[data-look="violet"] main.intro .iv-build.is-ready .iv-orb-tick { opacity: 1; transform: scale(1); }
:root[data-look="violet"] main.intro .iv-build.is-ready .iv-orb-pct { opacity: 0; }
@keyframes iv-breathe { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes iv-wobble {
    0%, 100% { border-radius: 47% 53% 49% 51% / 53% 47% 53% 47%; transform: translateZ(0) scale(1, 1); }
    25% { border-radius: 53% 47% 45% 55% / 47% 55% 45% 53%; transform: translateZ(0) scale(1.018, 0.984); }
    50% { border-radius: 49% 51% 55% 45% / 55% 46% 54% 45%; transform: translateZ(0) scale(0.988, 1.014); }
    75% { border-radius: 54% 46% 50% 50% / 48% 52% 48% 52%; transform: translateZ(0) scale(1.012, 0.99); }
}
/* The step running now, and the next one quieter under it. */
:root[data-look="violet"] main.intro .iv-status {
    display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; min-height: 96px; margin-top: 30px;
    transition: opacity 260ms ease, transform 260ms var(--ease-out);
}
:root[data-look="violet"] main.intro .iv-status.is-moving { opacity: 0; transform: translateY(-10px); }
:root[data-look="violet"] main.intro .iv-now { max-width: 340px; margin: 0; font-family: var(--font-display); font-stretch: 108%; font-size: 1.4rem; font-weight: 800; line-height: 1.22; letter-spacing: -0.02em; text-wrap: balance; }
:root[data-look="violet"] main.intro .iv-next { max-width: 320px; margin: 0; font-size: 0.98rem; font-weight: 500; line-height: 1.35; color: var(--ink-3); text-wrap: balance; }
:root[data-look="violet"] main.intro .iv-done { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--ink-2); }
/* What the last step found. */
:root[data-look="violet"] main.intro .iv-found { flex: none; display: flex; flex-direction: column; align-items: center; min-height: 124px; margin-top: auto; padding-top: 18px; }
:root[data-look="violet"] main.intro .iv-found-in { display: flex; flex-direction: column; align-items: center; transition: opacity 200ms ease, transform 200ms var(--ease-out); }
:root[data-look="violet"] main.intro .iv-found-in.is-out { opacity: 0; transform: translateY(6px); }
:root[data-look="violet"] main.intro .iv-found-ic {
    display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px; border-radius: var(--r-field);
    background: var(--accent-soft); color: var(--accent-text); font-size: 1.4rem; box-shadow: inset 0 0 0 1px rgba(var(--violet-rgb), 0.3);
}
:root[data-look="violet"] main.intro .iv-found b { max-width: 340px; font-size: 1.2rem; font-weight: 700; line-height: 1.3; text-wrap: balance; }
:root[data-look="violet"] main.intro .iv-found-in > span:not(.iv-found-ic) { margin-top: 2px; font-size: 0.94rem; line-height: 1.35; color: var(--ink-2); }
/* A fact with its source. */
:root[data-look="violet"] main.intro .iv-fact {
    flex: none; width: 100%; max-width: 440px; min-height: 150px; margin-top: 22px; padding: 18px 20px;
    border: 1px solid var(--edge); border-radius: var(--r-card); background: var(--card-fill); text-align: left;
}
:root[data-look="violet"] main.intro .iv-fact-in { transition: opacity 200ms ease; }
:root[data-look="violet"] main.intro .iv-fact-in.is-out { opacity: 0; }
:root[data-look="violet"] main.intro .iv-fact-label { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
:root[data-look="violet"] main.intro .iv-fact-label i { font-size: 16px; color: var(--accent-text); }
:root[data-look="violet"] main.intro .iv-fact-text { margin: 0; font-size: 1rem; line-height: 1.45; text-wrap: pretty; }
:root[data-look="violet"] main.intro .iv-fact-source { margin: 8px 0 0; font-size: 0.82rem; line-height: 1.4; color: var(--ink-3); }
:root[data-look="violet"] main.intro .iv-foot-note { flex: none; margin: 16px 0 0; font-size: 0.88rem; color: var(--ink-3); transition: opacity 300ms ease; }
:root[data-look="violet"] main.intro .iv-build.is-ready .iv-foot-note { opacity: 0; }
/* The plan could not be built: the app's error state, Try again in the bar. */
:root[data-look="violet"] main.intro .iv-build.is-failed { justify-content: center; min-height: calc(100dvh - var(--intro-bar-h, 90px)); padding-top: calc(var(--iv-st) + 24px); }
:root[data-look="violet"] main.intro .iv-build.is-failed::before { content: none; }
:root[data-look="violet"] main.intro .iv-fail-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-field); background: var(--bad-soft); color: var(--bad); font-size: 1.4rem; }
:root[data-look="violet"] main.intro .iv-build-title { max-width: 320px; margin: 16px 0 6px; font-family: var(--font-display); font-stretch: 108%; font-size: 1.4rem; font-weight: 800; line-height: 1.22; text-wrap: balance; }

/* ---- 12h. the plan preview: Day 1's first two open, the rest veiled ------- */

:root[data-look="violet"] main.intro .iv-pv { width: min(520px, 100%); margin: 0 auto; padding: calc(var(--iv-st) + 64px) 18px 24px; }
:root[data-look="violet"] main.intro .iv-pv-hero:empty { display: none; }
:root[data-look="violet"] main.intro .iv-pv-card {
    position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; height: 212px; margin-bottom: 22px; overflow: hidden;
    border-radius: var(--r-feature); background: var(--photo-base); box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
:root[data-look="violet"] main.intro .iv-pv-card::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(rgba(var(--scrim-rgb), 0.2), rgba(var(--scrim-rgb), 0) 34%, rgba(var(--scrim-rgb), 0.86)); }
:root[data-look="violet"] main.intro .iv-pv-card.is-waiting { grid-template-columns: 1fr; place-items: center; background: radial-gradient(120% 95% at 20% 0%, rgba(var(--violet-rgb), 0.36), rgba(var(--violet-rgb), 0.12) 50%, rgba(var(--violet-rgb), 0.04) 80%), var(--photo-base); }
:root[data-look="violet"] main.intro .iv-pv-wait { position: relative; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-size: 1.5rem; }
:root[data-look="violet"] main.intro .iv-pv-shot { position: relative; overflow: hidden; background: var(--photo-base); }
:root[data-look="violet"] main.intro .iv-pv-shot img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.28); transform-origin: 50% 46%; filter: var(--photo-filter); }
:root[data-look="violet"] main.intro .iv-glass-chip {
    position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; height: 28px; padding: 0 11px;
    border: 1px solid var(--glass-edge); border-radius: var(--r-pill); background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    color: #fff; font-size: 0.78rem; font-style: normal; font-weight: 600;
}
:root[data-look="violet"] main.intro .iv-pv-name { position: absolute; left: 18px; right: 18px; bottom: 14px; z-index: 2; display: grid; color: #fff; }
:root[data-look="violet"] main.intro .iv-pv-name small { font-size: 0.82rem; font-weight: 500; color: rgba(255, 255, 255, 0.86); }
:root[data-look="violet"] main.intro .iv-pv-name b { font-family: var(--font-display); font-stretch: 108%; font-size: 1.35rem; font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; }
:root[data-look="violet"] main.intro .iv-pv .iv-sub { margin-bottom: 18px; }
/* The week: Home's and Workout's row of days on a soft strip (violet-workout.css,
   .vx-week): a disc with the session's number, a dot for rest, the day under it. */
:root[data-look="violet"] main.intro .iv-week {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0 0 14px; padding: 9px 4px 8px;
    border-radius: var(--r-row); background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge);
}
:root[data-look="violet"] main.intro .iv-week > span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
:root[data-look="violet"] main.intro .iv-week b {
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); color: var(--ink);
    font-size: 0.92rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
:root[data-look="violet"] main.intro .iv-week .is-rest b { background: none; }
:root[data-look="violet"] main.intro .iv-week .is-rest b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
:root[data-look="violet"] main.intro .iv-week small { font-size: 0.74rem; font-weight: 600; line-height: 1; white-space: nowrap; color: var(--ink-3); }
/* A day: its tag, its name and how long; Day 1 open, the others locked. */
:root[data-look="violet"] main.intro .iv-day { padding: 16px; border: 1px solid var(--edge); border-radius: var(--r-card); background: var(--card-fill); }
:root[data-look="violet"] main.intro .iv-day + .iv-day { margin-top: var(--gap-list); }
:root[data-look="violet"] main.intro .iv-day-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
:root[data-look="violet"] main.intro .iv-day-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink); font-size: 0.78rem; font-weight: 700; }
:root[data-look="violet"] main.intro .iv-day.is-open .iv-day-tag { background: var(--violet-fill); color: var(--on-violet); }
:root[data-look="violet"] main.intro .iv-day-title { font-family: var(--font-display); font-stretch: 108%; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; }
:root[data-look="violet"] main.intro .iv-day-lock { margin-left: auto; font-size: 18px; color: var(--ink-3); }
:root[data-look="violet"] main.intro .iv-day-meta { width: 100%; font-size: 0.86rem; color: var(--ink-2); }
:root[data-look="violet"] main.intro .iv-lifts { display: grid; gap: 8px; margin-top: 14px; }
:root[data-look="violet"] main.intro .iv-lift { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: var(--r-block); background: var(--surface-2); }
:root[data-look="violet"] main.intro .iv-lift-pic { position: relative; flex: none; display: grid; place-items: center; width: 56px; height: 66px; overflow: hidden; border-radius: var(--r-field); background: var(--bg-2); color: var(--accent-text); font-size: 1.3rem; }
:root[data-look="violet"] main.intro .iv-lift-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
:root[data-look="violet"] main.intro .iv-lift-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
:root[data-look="violet"] main.intro .iv-lift-t b { font-size: 1rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
:root[data-look="violet"] main.intro .iv-lift-t small { font-size: 0.84rem; color: var(--ink-2); }
/* Veiled rows: blurred stand-ins, with the lock over them. */
:root[data-look="violet"] main.intro .iv-locked { position: relative; margin-top: 8px; }
:root[data-look="violet"] main.intro .iv-veil ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; filter: blur(5px); opacity: 0.7; user-select: none; -webkit-user-select: none; }
:root[data-look="violet"] main.intro .iv-veil li { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 44px; padding: 0 14px; border-radius: var(--r-field); background: var(--surface-2); font-size: 0.94rem; font-weight: 600; }
:root[data-look="violet"] main.intro .iv-veil li b { color: var(--ink-2); font-size: 0.86rem; }
:root[data-look="violet"] main.intro .iv-day.is-locked .iv-veil { margin-top: 10px; }
:root[data-look="violet"] main.intro .iv-day.is-locked .iv-veil li { height: 36px; }
:root[data-look="violet"] main.intro .iv-lock-pill {
    position: absolute; top: 50%; left: 50%; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 16px); height: 38px; padding: 0 16px;
    border-radius: var(--r-pill); background: var(--iv-light); color: var(--iv-on-light); box-shadow: 0 8px 24px rgba(var(--scrim-rgb), 0.45);
    font-size: 0.82rem; font-weight: 700; white-space: nowrap; transform: translate(-50%, -50%);
}
:root[data-look="violet"] main.intro .iv-lock-pill > span { overflow: hidden; text-overflow: ellipsis; }
:root[data-look="violet"] main.intro .iv-pv-chips { margin: 18px 0; }

/* The bar at the foot: the page fades in behind it, no hard line. */
:root[data-look="violet"] main.intro .intro-bar {
    padding: 30px calc(18px + env(safe-area-inset-right, 0px)) calc(12px + var(--iv-sb)) calc(18px + env(safe-area-inset-left, 0px));
    border-top: 0; background: linear-gradient(rgba(var(--scrim-rgb), 0), var(--page-end) 34px);
}
:root[data-look="violet"] main.intro .intro-bar-in { width: min(480px, 100%); gap: 8px; }
:root[data-look="violet"] main.intro .intro-bar-note { margin: 0; text-align: center; font-size: 0.86rem; color: var(--ink-2); }
:root[data-look="violet"] main.intro .intro-terms { margin: 2px 0 0; text-align: center; font-size: 0.78rem; line-height: 1.45; color: var(--ink-3); }
:root[data-look="violet"] main.intro .intro-terms a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
:root[data-look="violet"] main.intro .intro-bar .intro-status { margin: 0; text-align: center; }

/* ---- 12i. the paywall: photos drifting in two rows, then the plans -------- */

:root[data-look="violet"] main.intro .iv-pay { padding-bottom: 16px; }
:root[data-look="violet"] main.intro .iv-pay-band {
    position: relative; height: calc(var(--iv-st) + 268px); overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
}
:root[data-look="violet"] main.intro .iv-pay-band::before { content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: calc(var(--iv-st) + 40px); background: linear-gradient(rgba(var(--scrim-rgb), 0.55), rgba(var(--scrim-rgb), 0)); }
:root[data-look="violet"] main.intro .iv-pay-rows { position: absolute; top: calc(var(--iv-st) - 22px); left: -80px; right: -80px; display: flex; flex-direction: column; gap: 12px; transform: rotate(-6deg); }
:root[data-look="violet"] main.intro .iv-pay-row { display: flex; gap: 12px; width: max-content; animation: iv-drift 40s linear infinite; }
:root[data-look="violet"] main.intro .iv-pay-row.is-2 { margin-left: -90px; animation-direction: reverse; }
:root[data-look="violet"] main.intro .iv-pay-band.is-away .iv-pay-row { animation-play-state: paused; }
:root[data-look="violet"] main.intro .iv-pay-row span { flex: none; width: 140px; height: 124px; overflow: hidden; border-radius: var(--r-block); background: var(--photo-base); }
:root[data-look="violet"] main.intro .iv-pay-row img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); }
@keyframes iv-drift { to { transform: translateX(-50%); } }
:root[data-look="violet"] main.intro .iv-pay-body { position: relative; z-index: 2; width: min(480px, 100%); margin: -26px auto 0; padding: 0 18px; }
:root[data-look="violet"] main.intro .iv-pay .iv-h1 { font-size: 1.95rem; text-align: center; }
:root[data-look="violet"] main.intro .iv-pay .iv-sub { margin: 8px 0 18px; text-align: center; }
/* The plans: yearly picked unless monthly was. "Save 37%" (as Upgrade and Pricing say it) is a fact about the price, so it stays on yearly. */
:root[data-look="violet"] main.intro .iv-plans { display: grid; gap: var(--gap-list); margin: 0; }
:root[data-look="violet"] main.intro .iv-plan {
    position: relative; display: block; width: 100%; min-height: 0; padding: 0; overflow: hidden;
    border: 1px solid var(--edge); border-radius: var(--r-row); background: var(--card-fill); color: var(--ink);
    font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: border-color var(--dur) ease, background-color var(--dur) ease, transform var(--dur-fast) ease;
}
:root[data-look="violet"] main.intro .iv-plan::after { content: none; }
:root[data-look="violet"] main.intro .iv-plan:active { transform: scale(0.99); }
:root[data-look="violet"] main.intro .iv-plan[aria-checked="true"] { padding: 0; border: 2px solid var(--accent-text); background: var(--tint-fill); }
:root[data-look="violet"] main.intro .iv-plan-band { display: block; height: 26px; background: var(--violet-fill); color: var(--on-violet); font-size: 0.72rem; font-weight: 700; line-height: 26px; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; }
:root[data-look="violet"] main.intro .iv-plan-body { display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 12px 16px 12px 18px; }
:root[data-look="violet"] main.intro .iv-plan-l { flex: 1; min-width: 0; }
:root[data-look="violet"] main.intro .iv-plan-l b { display: block; font-family: var(--font-display); font-stretch: 108%; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
:root[data-look="violet"] main.intro .iv-plan-l small { display: block; margin-top: 2px; font-size: 0.86rem; color: var(--ink-2); }
:root[data-look="violet"] main.intro .iv-plan-r { text-align: right; font-family: var(--font-display); font-stretch: 108%; font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
:root[data-look="violet"] main.intro .iv-plan-r small { display: block; font-family: var(--font-ui); font-size: 0.8rem; font-weight: 500; color: var(--ink-2); }
:root[data-look="violet"] main.intro .iv-plan.is-year .iv-plan-r > [data-local-price] { color: var(--accent-text); }
:root[data-look="violet"] main.intro .iv-radio { flex: none; width: 26px; height: 26px; border: 2px solid var(--ink-3); border-radius: 50%; }
:root[data-look="violet"] main.intro .iv-plan[aria-checked="true"] .iv-radio { border: 0; background: var(--i-check-white) center / 15px no-repeat, var(--violet-fill); }
:root[data-look="violet"] main.intro .iv-anchor { margin: 12px 4px 0; font-size: 0.86rem; line-height: 1.45; color: var(--ink-2); text-align: center; text-wrap: balance; }
:root[data-look="violet"] main.intro .iv-anchor [data-local-price] { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
/* Today, then the day the free week ends: a short line between them. */
:root[data-look="violet"] main.intro .iv-timeline { margin: 18px 0 0; padding: 16px 18px; list-style: none; border: 1px solid var(--edge); border-radius: var(--r-row); background: var(--card-fill); }
:root[data-look="violet"] main.intro .iv-timeline li { position: relative; display: grid; gap: 2px; padding: 0 0 16px 30px; }
:root[data-look="violet"] main.intro .iv-timeline li:last-child { padding-bottom: 0; }
:root[data-look="violet"] main.intro .iv-timeline li::before { content: ""; position: absolute; top: 3px; left: 0; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; background: var(--violet-mark); }
:root[data-look="violet"] main.intro .iv-timeline li:last-child::before { border: 2px solid var(--line-2); background: none; }
:root[data-look="violet"] main.intro .iv-timeline li:not(:last-child)::after { content: ""; position: absolute; top: 22px; bottom: 2px; left: 6px; width: 2px; border-radius: 2px; background: linear-gradient(var(--violet-2), var(--line-2)); }
:root[data-look="violet"] main.intro .iv-timeline b { font-weight: 600; }
:root[data-look="violet"] main.intro .iv-timeline span { font-size: 0.9rem; line-height: 1.45; color: var(--ink-2); }
:root[data-look="violet"] main.intro .iv-print { display: grid; gap: 10px; margin-top: 8px; }
/* The test-build note: the app's soft violet notice (.v-note). */
:root[data-look="violet"] main.intro .iv-print > p:first-child { display: flex; gap: 10px; margin: 0; padding: 12px 14px; border-radius: var(--r-row); background: var(--accent-soft); font-size: 0.86rem; line-height: 1.5; color: var(--ink); }
:root[data-look="violet"] main.intro .iv-print > p:first-child i { flex: none; margin-top: 1px; font-size: 18px; color: var(--accent-text); }
:root[data-look="violet"] main.intro .iv-print .iv-fine { text-align: center; }
/* Start: the light money button with an arrow after the words, as Upgrade's
   Go Premium. Drawn here, so it stays when intro.js writes the words again
   after a failed start; gone while it is starting. */
:root[data-look="violet"] main.intro #introTrial::after {
    content: ""; flex: none; width: 18px; height: 18px; background: currentColor; transform: scaleX(-1);
    -webkit-mask: var(--i-arrow-left) center / contain no-repeat; mask: var(--i-arrow-left) center / contain no-repeat;
}
:root[data-look="violet"] main.intro #introTrial:disabled::after { content: none; }
/* The security check stays shut unless Cloudflare asks for a tap. */
:root[data-look="violet"] main.intro .intro-bar .captcha-widget.is-asking { margin-bottom: 4px; }

/* ---- 12j. save the account: a sheet over the dimmed wall ------------------ */

:root[data-look="violet"] main.intro .iv-save { display: flex; flex-direction: column; min-height: 100dvh; padding-top: var(--iv-st); }
/* The sheet stays on the floor however short its step: the wall takes the rest. */
:root[data-look="violet"] main.intro .iv-save .iv-spacer { flex: 1 1 0; min-height: 160px; max-height: none; }
:root[data-look="violet"] main.intro .iv-sheet {
    position: relative; z-index: 2; width: min(480px, 100%); margin: 0 auto; padding: 24px 20px calc(var(--iv-sb) + 16px);
    border: 1px solid var(--edge-strong); border-bottom: 0; border-radius: var(--r-feature) var(--r-feature) 0 0;
    background: var(--sheet-fill); box-shadow: 0 -20px 60px rgba(var(--scrim-rgb), 0.45); text-align: center;
    animation: iv-sheet-up 360ms var(--ease-out) both;
}
@keyframes iv-sheet-up { from { transform: translateY(100%); } }
:root[data-look="violet"] main.intro .iv-ok {
    display: flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; min-height: 34px; margin: 0 auto 16px; padding: 4px 14px 4px 5px;
    border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); font-size: 0.9rem; font-weight: 600; line-height: 1.3; text-align: left;
}
:root[data-look="violet"] main.intro .iv-ok i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--violet-fill); color: var(--on-violet); font-size: 13px; }
:root[data-look="violet"] main.intro .iv-sheet .intro-head { margin: 0; }
:root[data-look="violet"] main.intro .iv-sheet .iv-h1 { font-size: 1.85rem; }
:root[data-look="violet"] main.intro .iv-sheet .intro-sub { margin: 10px 0 22px; font-size: 1rem; line-height: 1.45; color: var(--ink-2); }
:root[data-look="violet"] main.intro .iv-sheet .intro-save { text-align: left; }
:root[data-look="violet"] main.intro .btn.iv-later { height: 44px; margin-top: 8px; border: 0; background: none; color: var(--ink-2); font-weight: 600; box-shadow: none; }
:root[data-look="violet"] main.intro .btn.iv-later:hover { color: var(--ink); }
/* Once saved, Later becomes Go to Home. */
:root[data-look="violet"] main.intro .btn.iv-later.accent { height: 58px; margin-top: 16px; border-radius: var(--r-block); background: var(--violet-fill); color: var(--on-violet); box-shadow: var(--violet-glow); font-size: 1.05rem; font-weight: 700; }
:root[data-look="violet"] main.intro .iv-sheet #introLaterNote { margin: 0; font-size: 0.84rem; color: var(--ink-3); }
/* account.js's form: Google and email as light buttons, the icon on the left. */
:root[data-look="violet"] main.intro .save-acct[data-context="intro"] { gap: 10px; }
:root[data-look="violet"] main.intro .save-acct[data-context="intro"] > .btn,
:root[data-look="violet"] main.intro .save-acct[data-context="intro"] .btn.accent {
    position: relative; height: 58px; min-height: 58px; padding: 0 52px; border: 0; border-radius: var(--r-block);
    background: var(--iv-light); color: var(--iv-on-light); box-shadow: none; font-size: 1rem; font-weight: 700;
}
:root[data-look="violet"] main.intro .save-acct[data-context="intro"] > .btn:hover,
:root[data-look="violet"] main.intro .save-acct[data-context="intro"] .btn.accent:hover { background: #fff; }
:root[data-look="violet"] main.intro .save-acct[data-context="intro"] .btn:disabled { background: var(--surface-2); color: var(--ink-3); }
:root[data-look="violet"] main.intro .save-acct[data-context="intro"] > .btn > :is(.save-acct-g, i) { position: absolute; top: 50%; left: 20px; display: grid; place-items: center; width: 22px; height: 22px; font-size: 21px; transform: translateY(-50%); }
:root[data-look="violet"] main.intro .save-acct[data-context="intro"] .save-acct-note { color: var(--ink-2); text-align: center; }
/* Past the first step the form's own step (Your email, Check your email,
   Choose a password) is the sheet: the trial line and the lead step aside,
   and a step with its own title takes the sheet's (One last thing stays for
   screen readers). The saved step brings the header back. */
:root[data-look="violet"] main.intro .iv-sheet:has(.save-acct-form) :is(.iv-ok, .intro-head .intro-sub) { display: none; }
:root[data-look="violet"] main.intro .iv-sheet:has(.save-acct > h3) .intro-head {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
:root[data-look="violet"] main.intro .iv-sheet:has(.save-acct > h3) .intro-save { margin-top: 0; }
:root[data-look="violet"] main.intro .save-acct[data-context="intro"] > h3 {
    margin: 0; font-family: var(--font-display); font-stretch: 112%; font-size: 1.85rem; font-weight: 800;
    line-height: 1.06; letter-spacing: -0.04em; color: var(--ink); text-align: center; text-wrap: balance;
}
:root[data-look="violet"] main.intro .save-acct[data-context="intro"] > .save-acct-lead { margin: -2px 0 8px; font-size: 1rem; line-height: 1.45; color: var(--ink-2); text-align: center; text-wrap: pretty; }
:root[data-look="violet"] main.intro .save-acct[data-context="intro"] .save-acct-links { justify-content: center; }
/* Back on the email step: a quiet word, centred, a full 44px to tap. */
:root[data-look="violet"] main.intro .save-acct[data-context="intro"] .save-acct-text { justify-self: center; min-width: 44px; padding: 0 8px; justify-content: center; }
:root[data-look="violet"] main.intro .save-acct[data-context="intro"] .field input { height: 56px; border-radius: var(--r-field); font-size: 1.05rem; }
:root[data-look="violet"] main.intro .save-acct[data-context="intro"] .save-acct-code input { height: 64px; font-family: var(--font-display); font-stretch: 108%; font-size: 1.7rem; font-weight: 700; letter-spacing: 0.3em; }
:root[data-look="violet"] main.intro .save-acct[data-context="intro"] .save-acct-text { color: var(--accent-text); font-weight: 600; }
:root[data-look="violet"] main.intro .save-acct[data-context="intro"] .status.error { color: var(--bad); }
:root[data-look="violet"] main.intro .save-acct[data-context="intro"] .status.success { color: var(--ok); }
:root[data-look="violet"] main.intro .save-acct[data-context="intro"] .save-acct-done { align-items: center; border-radius: var(--r-row); background: var(--accent-soft); color: var(--ink); }
:root[data-look="violet"] main.intro .save-acct[data-context="intro"] .save-acct-done i { display: grid; place-items: center; width: 26px; height: 26px; margin: 0; border-radius: 50%; background: var(--violet-fill); color: var(--on-violet); font-size: 14px; }

/* ---- 12k. sheets: Add to the Home Screen, and What stays free ------------- */

:root[data-look="violet"] .intro-a2hs li::before { background: var(--violet-fill); color: var(--on-violet); }
:root[data-look="violet"] .intro-a2hs li > i { color: var(--accent-text); }
:root[data-look="violet"] .iv-after h3 { margin: 0 0 4px; }
:root[data-look="violet"] .iv-after .iv-after-head { margin: 18px 0 8px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
:root[data-look="violet"] .iv-after ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
:root[data-look="violet"] .iv-after li { display: flex; gap: 10px; font-size: 0.96rem; line-height: 1.4; }
:root[data-look="violet"] .iv-after li i { flex: none; margin-top: 2px; font-size: 18px; color: var(--accent-text); }
:root[data-look="violet"] .iv-after .sheet-actions { margin-top: 22px; }
:root[data-look="violet"] .iv-after .sheet-actions .btn { width: 100%; }

/* ---- 12l. a computer, short screens, and less motion ---------------------- */

/* A computer: the words stay a phone's width, the photos fill the window. */
@media (min-width: 760px) {
    /* One column for every layer, centred: Back, the words, the cards and the
       bar's button share one left edge, as on Workout. */
    :root[data-look="violet"] main.intro { --iv-col: 444px; }
    :root[data-look="violet"] main.intro .iv-top .intro-top-in,
    :root[data-look="violet"] main.intro .intro-bar-in { width: min(var(--iv-col), 100%); }
    :root[data-look="violet"] main.intro :is(.iv-qbody, .iv-pay-body, .iv-ww, .iv-pv) { width: min(calc(var(--iv-col) + 36px), 100%); }
    :root[data-look="violet"] main.intro .iv-inset-screen { width: min(calc(var(--iv-col) + 32px), 100%); }
    :root[data-look="violet"] main.intro .iv-fact { max-width: var(--iv-col); }
    :root[data-look="violet"] main.intro .iv-spacer { max-height: calc(58dvh - 64px); }
    :root[data-look="violet"] main.intro .iv-welcome-words { width: min(calc(var(--iv-col) + 40px), 100%); margin-inline: auto; padding-bottom: 48px; }
    :root[data-look="violet"] main.intro .iv-welcome .iv-h1 { font-size: 3.2rem; }
    /* A wide window shows more of the photo: keep to the hands and the bar. */
    :root[data-look="violet"] main.intro .iv-welcome-photo img { position: absolute; bottom: 0; left: 0; height: 140%; object-position: 50% 100%; }
    /* The story cards sit in the middle of the room; Less guessing gets wider cards. */
    :root[data-look="violet"] main.intro .iv-tour .iv-inset-screen { justify-content: center; }
    :root[data-look="violet"] main.intro .iv-ww-card.is-without { width: 236px; }
    :root[data-look="violet"] main.intro .iv-ww-card.is-with { width: 232px; }
    /* Save: a card that floats over the wall, as every popup does on a computer. */
    :root[data-look="violet"] main.intro .iv-sheet { margin-bottom: 48px; border-bottom: 1px solid var(--edge-strong); border-radius: var(--r-feature); box-shadow: var(--shadow-lg); }
    :root[data-look="violet"] main.intro .iv-wordmark { top: 28px; left: 32px; height: 30px; }
    :root[data-look="violet"] main.intro .iv-inset { min-height: 520px; max-height: 640px; }
    :root[data-look="violet"] main.intro .iv-pay-row span { width: 200px; height: 160px; }
    :root[data-look="violet"] main.intro .iv-pay-band { height: 300px; }
}

/* A short phone (an iPhone SE): less air, a smaller orb, the cards lower. */
@media (max-height: 740px) {
    :root[data-look="violet"] main.intro .iv-h1 { font-size: 1.8rem; }
    /* Save: the sheet's longest step (the password) fits above the fold. */
    :root[data-look="violet"] main.intro .iv-save .iv-spacer { min-height: 96px; }
    :root[data-look="violet"] main.intro .iv-sheet { padding-top: 20px; }
    :root[data-look="violet"] main.intro .iv-sub { margin: 8px 0 16px; }
    :root[data-look="violet"] main.intro .iv-row { min-height: 54px; }
    :root[data-look="violet"] main.intro .iv-row:has(.iv-row-note) { min-height: 58px; }
    :root[data-look="violet"] main.intro .iv-rows { gap: 8px; }
    :root[data-look="violet"] main.intro .iv-build { --orb: 132px; padding-top: calc(var(--iv-st) + 28px); }
    :root[data-look="violet"] main.intro .iv-status { min-height: 84px; margin-top: 18px; }
    :root[data-look="violet"] main.intro .iv-found { min-height: 104px; padding-top: 8px; }
    :root[data-look="violet"] main.intro .iv-found-ic { width: 38px; height: 38px; margin-bottom: 8px; font-size: 1.2rem; }
    :root[data-look="violet"] main.intro .iv-fact { min-height: 0; margin-top: 14px; padding: 14px 16px; }
    :root[data-look="violet"] main.intro .iv-fact-text { font-size: 0.94rem; }
    :root[data-look="violet"] main.intro .iv-foot-note { display: none; }
    :root[data-look="violet"] main.intro .iv-inset { min-height: 340px; }
    :root[data-look="violet"] main.intro .iv-inset .iv-h1 { font-size: 1.6rem; }
    :root[data-look="violet"] main.intro :is(.iv-setcard, .iv-weekcard) { top: 58px; }
    :root[data-look="violet"] main.intro .iv-uichip.is-shop { display: none; }
    :root[data-look="violet"] main.intro .iv-ww { padding-top: calc(var(--iv-st) + 58px); }
    :root[data-look="violet"] main.intro .iv-ww .iv-h1 { font-size: 1.7rem; }
    :root[data-look="violet"] main.intro .iv-ww-stage { --lift: 54px; margin: 14px 0 8px; }
    :root[data-look="violet"] main.intro .iv-ww-card { padding: 16px 14px 78px 16px; }
    :root[data-look="violet"] main.intro .iv-ww-card.is-without { padding-right: 46px; }
    :root[data-look="violet"] main.intro .iv-ww-card h2 { margin-bottom: 10px; font-size: 1.3rem; }
    :root[data-look="violet"] main.intro .iv-ww-card ul { gap: 8px; }
    :root[data-look="violet"] main.intro .iv-ww-card li { font-size: 0.88rem; }
    :root[data-look="violet"] main.intro .iv-mascot { width: 68px; height: 68px; }
    :root[data-look="violet"] main.intro .is-with .iv-mascot { margin-left: -34px; bottom: 4px; }
    :root[data-look="violet"] main.intro .iv-pay-band { height: calc(var(--iv-st) + 200px); }
    :root[data-look="violet"] main.intro .iv-pay-row span { width: 124px; height: 104px; }
    :root[data-look="violet"] main.intro .iv-pay .iv-h1 { font-size: 1.75rem; }
}

/* A narrow phone: the two cards of Less guessing share less room. */
@media (max-width: 380px) {
    :root[data-look="violet"] main.intro .iv-ww-card.is-without { width: 178px; }
    :root[data-look="violet"] main.intro .iv-ww-card.is-with { width: 176px; }
}

@media (prefers-reduced-motion: reduce) {
    :root[data-look="violet"] main.intro :is(.intro-from-right, .intro-from-left, .iv-tour.is-from-right, .iv-tour.is-from-left) { animation: iv-fade 150ms ease both; }
    :root[data-look="violet"] :is(.iv-deck, .iv-card, .iv-wall) { transition: none !important; }
    :root[data-look="violet"] .iv-wall.is-on { transition: opacity 150ms ease !important; }
    :root[data-look="violet"] :is(.iv-splash img, .iv-splash p),
    :root[data-look="violet"] .iv-splash-bar::after { animation: none; }
    :root[data-look="violet"] main.intro :is(.iv-welcome-photo img, .iv-inset-pic.is-slow, .iv-pay-row, .iv-plate, .iv-orb-glow, .iv-orb-wob, .iv-sheet),
    :root[data-look="violet"] main.intro .iv-segs > .is-now::after,
    :root[data-look="violet"] main.intro .iv-box.is-at:empty::after { animation: none !important; }
    :root[data-look="violet"] main.intro .iv-tour.is-ww :is(.is-without, .is-with, .is-with .iv-mascot) { animation: none !important; }
    :root[data-look="violet"] main.intro :is(.iv-status, .iv-found-in, .iv-fact-in, .iv-row, .iv-chev, .iv-tick, .iv-plan, .iv-orb-tick) { transition: none !important; }
    :root[data-look="violet"] main.intro :is(.iv-row, .iv-plan, .btn.iv-btn):active { transform: none; }
}