/* ═══ WENDY&WAYNE SKIN — THE RENAME ════════════════════════════════════════
   Loaded LAST, after spoke-skin-v4.css, on every page in /app.

   v4's argument still holds: every generation of these pages uses the same
   class names, so overriding them reskins the whole app without touching
   markup or logic. This file does not change a single colour — v4 already
   landed on white paper with the mark's red, which is exactly the W&W
   palette. All this does is change WHOSE app it is:

     1. the three-spoke ball  ->  the KITT voice box, fully illuminated
     2. the word SPOKE        ->  wendy&wayne
     3. adds the voice element the mentor uses to speak

   NOTHING IS DELETED. The old ball SVG is still in the markup on all 23
   pages that carry it; its children are hidden and the new mark is painted
   onto the badge behind them. Remove this one <link> and SPOKE comes back
   exactly as it was.

   The company is unchanged: Spoke Tennis owns Wendy&Wayne. This is the
   product's name, not the entity's.
   ═════════════════════════════════════════════════════════════════════════ */

/* ══ THE LOOK, NOT JUST THE NAME (Ronan, 9 Sep: "they're not matching the new
   home design, very boring") ═══════════════════════════════════════════════
   Everything below this point used to be a rename. The pages past home kept
   the old app's typography — one weight, one face, headings that look like
   body copy — so tapping Game or Diary felt like leaving the product.

   Home's language is two things and they are both type:
     · anything that LEADS is the display face at tight tracking and heavy
       weight, big enough to be a headline rather than a label;
     · anything that LABELS is small capitals, widely tracked, muted.
   Nothing else about the pages is touched — no layout, no logic, no colour
   beyond what v4 already set. Type alone carries most of the difference, and
   type is the only thing safe to change across thirty pages at once. */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&display=swap");

html body{ --disp:'Bricolage Grotesque','Inter Tight',system-ui,sans-serif; }

/* WHAT LEADS. These are the page titles and section heads across the interior
   pages; every one of them was set in the body face at a body weight. */
html body h1,
html body .title, html body .hero-t, html body .pg-t, html body .page-title,
html body .sec-title, html body .cal-mo, html body .of-panel-h,
html body .season-t, html body .pro-name, html body .welcome-title{
  font-family:var(--disp)!important;
  font-weight:800!important;
  letter-spacing:-.035em!important;
  line-height:1.04!important;
}

/* WHAT LABELS. Small, tracked, quiet — the counterweight that makes the
   headline read as a headline. */
html body .sec-h, html body .eyebrow, html body .of-sheet-lab,
html body .pro-eyebrow, html body .ls-sec, html body .kit-min{
  font-size:9.5px!important;
  font-weight:800!important;
  letter-spacing:.24em!important;
  text-transform:uppercase!important;
  color:#8C857B!important;
}

/* the bottom bar, in home's own idiom: tracked capitals, quiet until current */
html body .nav .nv, html body .nav .nav-btn, html body .nav .nb{
  font-size:9.5px!important;
  font-weight:800!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
}

/* ══ FLAT PAPER, NOT FLOATING CARDS ══════════════════════════════════════
   Ronan, 9 Sep: "where the new design?"

   The type pass changed the headings and left the thing that actually dates
   these pages: every block is a 15-20px rounded box with a drop shadow,
   floating on grey. Home has no shadows and no floating boxes anywhere — flat
   paper, hairline rules, space doing the separating, and the only rounded
   thing on it is a pill.

   So the boxes are flattened where they live. Nothing moves and nothing is
   renamed; they stop pretending to be objects on a surface and go back to
   being sections of a page. */
html body .ao-card,
html body .game-record, html body .game-record.sesh,
html body .hero,
html body .cal-card,
html body .ls-card{
  box-shadow:none!important;
  border-radius:0!important;
  background:transparent!important;
  border:0!important;
  border-top:1px solid #E6E2DD!important;
  padding-left:0!important;padding-right:0!important;
  margin-left:0!important;margin-right:0!important;
}
/* the two record rows are a list now, so they need the rule between them and
   nothing else */
html body .game-record + .game-record{border-top:1px solid #F1EEEA!important}

/* THE SUB UNDER A PAGE TITLE is the same small tracked label home uses above
   every block, so the top of a page has home's two-part shape. */
html body .sub, html body .intro{
  font-size:9.5px!important;font-weight:800!important;letter-spacing:.24em!important;
  text-transform:uppercase!important;color:#8C857B!important;margin-top:8px!important;
}

/* AN EMPTY STATE IS NOT A SHRUG. Centred grey small type is the house style of
   an app with nothing to say; this one has plenty. Left, at reading size, in
   the app's own voice. */
html body .empty, html body .season-empty{
  text-align:left!important;font-size:16px!important;line-height:1.42!important;
  color:#5C574F!important;padding:22px 0 8px!important;max-width:34em;
}

/* ══ THE BAR ═════════════════════════════════════════════════════════════
   Home's, exactly: five doors, hairline top and bottom, the current one in the
   key red and the rest quiet. Written here rather than on eight pages so it can
   only ever look like one thing. */
html body nav.ww-nav{position:fixed;bottom:0;left:0;right:0;z-index:50;
 background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(14px);
 backdrop-filter:blur(14px);border-top:1px solid #E6E2DD;
 padding:7px 0 calc(env(safe-area-inset-bottom,0px) + 7px);
 display:block!important}
html body nav.ww-nav .nav-in{max-width:460px;margin:0 auto;display:flex;
 justify-content:space-around;padding:0 8px}
html body nav.ww-nav .ni{display:flex;flex-direction:column;align-items:center;
 gap:4px;background:none;border:0;font:inherit;font-size:8.5px;font-weight:700;
 letter-spacing:.11em;text-transform:uppercase;color:#8C857B;cursor:pointer;
 padding:2px 4px;text-decoration:none}
html body nav.ww-nav .ni.on, html body nav.ww-nav .ni.on svg{color:#D2402B!important}

/* ══ THE VOICE ═══════════════════════════════════════════════════════════
   The lockup from the home page, so a line reads identically wherever it is
   said: the five bars scanning, the name in small tracked capitals, the line
   itself at reading size. Wayne is the key red; Wendy is quieter.
   .vl:empty collapses, so a slot with nothing written for it takes up no
   space at all rather than leaving a gap where a line would be. */
html body .vl{display:flex;gap:10px;align-items:flex-start;margin-top:18px;
 padding-top:16px;border-top:1px solid rgba(42,39,36,.08)}
html body .vl:empty,
html body .ww-say:empty{display:none}
html body .vl .bars{display:flex;gap:2.5px;padding-top:5px;flex:none}
html body .vl .bars b{width:3px;height:11px;border-radius:1px;background:#D2402B;
 display:block;animation:wwkitt 1.05s infinite ease-in-out}
html body .vl .bars b:nth-child(2){animation-delay:.08s}
html body .vl .bars b:nth-child(3){animation-delay:.16s}
html body .vl .bars b:nth-child(4){animation-delay:.24s}
html body .vl .bars b:nth-child(5){animation-delay:.32s}
html body .vl.wendy .bars b{background:#8C857B}
@keyframes wwkitt{0%,100%{opacity:.2;transform:scaleY(.5)}45%{opacity:1;transform:scaleY(1.3)}}
@media (prefers-reduced-motion:reduce){html body .vl .bars b{animation:none;opacity:1}}
html body .vl p{margin:0;font-size:16.5px;line-height:1.42;font-weight:500;
 letter-spacing:-.014em;color:#2A2724}
html body .vl p i{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.2em;
 text-transform:uppercase;color:#D2402B;display:block;margin-bottom:4px}
html body .vl.wendy p i{color:#8C857B}
html body .ww-say{max-width:460px;margin:0 auto;padding:0 20px}

/* ── 1. THE MARK ────────────────────────────────────────────────────────
   .spoke-mark-badge is sized by its sibling class (.brand-mono and friends)
   and v4 already forces background:none on it. We paint the new mark as the
   badge's background and hide the ball's paths, so the box keeps its size. */
/* NOTE ON SPECIFICITY: game.html (and any page that copies its lockup block)
   re-declares .spoke-mark-badge{background-image:none!important} in an inline
   <style> further down the document. Equal specificity loses on source order,
   so every rule that has to beat it is prefixed html/body. */
html body .spoke-mark-badge {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Crect%20x%3D%226.00%22%20y%3D%2234.80%22%20width%3D%2212%22%20height%3D%2230.40%22%20rx%3D%226.0%22%20fill%3D%22%23D2402B%22%2F%3E%3Crect%20x%3D%2225.00%22%20y%3D%2222.64%22%20width%3D%2212%22%20height%3D%2254.72%22%20rx%3D%226.0%22%20fill%3D%22%23D2402B%22%2F%3E%3Crect%20x%3D%2244.00%22%20y%3D%2212.00%22%20width%3D%2212%22%20height%3D%2276.00%22%20rx%3D%226.0%22%20fill%3D%22%23D2402B%22%2F%3E%3Crect%20x%3D%2263.00%22%20y%3D%2222.64%22%20width%3D%2212%22%20height%3D%2254.72%22%20rx%3D%226.0%22%20fill%3D%22%23D2402B%22%2F%3E%3Crect%20x%3D%2282.00%22%20y%3D%2234.80%22%20width%3D%2212%22%20height%3D%2230.40%22%20rx%3D%226.0%22%20fill%3D%22%23D2402B%22%2F%3E%3C%2Fsvg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
html body .spoke-mark-badge > svg.spoke-mark > * { display: none !important; }

/* Where the mark sits on the red itself, flip it to white. Add .on-key to
   any container that has a red fill behind the badge. */
html body .on-key .spoke-mark-badge,
html body .spoke-mark-badge.on-key { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Crect%20x%3D%226.00%22%20y%3D%2234.80%22%20width%3D%2212%22%20height%3D%2230.40%22%20rx%3D%226.0%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Crect%20x%3D%2225.00%22%20y%3D%2222.64%22%20width%3D%2212%22%20height%3D%2254.72%22%20rx%3D%226.0%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Crect%20x%3D%2244.00%22%20y%3D%2212.00%22%20width%3D%2212%22%20height%3D%2276.00%22%20rx%3D%226.0%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Crect%20x%3D%2263.00%22%20y%3D%2222.64%22%20width%3D%2212%22%20height%3D%2254.72%22%20rx%3D%226.0%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Crect%20x%3D%2282.00%22%20y%3D%2234.80%22%20width%3D%2212%22%20height%3D%2230.40%22%20rx%3D%226.0%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E") !important; }

/* ── 2. THE WORDMARK ────────────────────────────────────────────────────
   Two shapes carry the word across the app: .brand-word (13 pages) and a
   .word that always sits immediately after the badge (7 pages). Both get
   their own text zeroed and the new name injected, so no HTML changes and
   no chance of catching an unrelated .word somewhere else. */
html body .brand-word,
html body .spoke-mark-badge + .word {
  font-size: 0 !important;
  letter-spacing: 0 !important;
}
html body .brand-word::after,
html body .spoke-mark-badge + .word::after {
  content: "wendy&wayne";
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--ink, #2A2724);
  text-transform: none;
}
/* the ampersand cannot be coloured inside content:, so the whole word stays
   ink here. The red ampersand is used on the website lockup only. */

/* ── 3. THE VOICE ───────────────────────────────────────────────────────
   The element Wendy and Wayne speak through. The same five bars as the
   mark, animated. Drop <span class="ww-bars"><b></b>x5</span> beside a name
   and it reads as the logo talking. */
.ww-bars { display: inline-flex; gap: 2.5px; align-items: center; vertical-align: -1px; }
.ww-bars b {
  width: 3px; height: 10px; border-radius: 1px; display: block;
  background: var(--key, #D2402B); opacity: .22;
}
.ww-bars.live b { animation: ww-kitt 1s infinite ease-in-out; }
.ww-bars.live b:nth-child(2) { animation-delay: .08s; }
.ww-bars.live b:nth-child(3) { animation-delay: .16s; }
.ww-bars.live b:nth-child(4) { animation-delay: .24s; }
.ww-bars.live b:nth-child(5) { animation-delay: .32s; }
@keyframes ww-kitt {
  0%, 100% { opacity: .2; transform: scaleY(.5); }
  45%      { opacity: 1;  transform: scaleY(1.3); }
}
@media (prefers-reduced-motion: reduce) {
  .ww-bars.live b { animation: none; opacity: 1; }
}

/* The speaker's name, in the house style. */
.ww-who {
  font-size: 10.5px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--key, #D2402B);
}
.ww-who.wendy { color: var(--ink-mute, #8C857B); }