/* MatchPoint Kids · one design system (4 Nov, Joshua: "a lot of the screens have some inconsistencies… when I make tweaks,
   they should apply to every kind of style"). Before this the app had 52 text sizes, 34 corner sizes and ~12 button heights.
   1. TOKENS: every size, colour and corner lives here once, as --ds-*. The Style page (style/index.html) changes them live;
      ds.js lays a saved set over these defaults.
   2. COMPONENTS: .ds-* classes for new screens (text roles, buttons, cards, highlight box, chips).
   3. APPLY: points the existing screens at the tokens. html.ds-off switches this layer off (the Style page's "Before" view).
   Loaded last so it wins. Screens not listed in 3 still use their own styles; they move over one round at a time. */

:root{
  /* ---------- text: 7 roles ---------- */
  --ds-display:30px;      /* a big hero line (Match hero, celebrations) */
  --ds-title:27px;        /* the page title at the top of each tab and sheet */
  --ds-headline:21px;     /* the main line on a card */
  --ds-lead:17px;         /* the first, bigger paragraph on a sheet */
  --ds-body:15.5px;       /* normal text */
  --ds-small:13px;        /* small helper lines */
  --ds-label:11.5px;      /* SMALL CAPITALS over a card or box */
  --ds-bold:800;          /* headings, buttons, labels */
  --ds-text-w:600;        /* paragraphs */
  --ds-tight:-.02em;      /* letter spacing on headings */
  --ds-label-track:.06em;
  --ds-leading:1.45;      /* line height for paragraphs */

  /* ---------- colour ---------- */
  --ds-ink:#0B1021;       /* headings */
  --ds-text:#2A2D4A;      /* paragraphs */
  --ds-muted:#6B6E99;     /* helper text, labels */
  --ds-brand:#6D49FF;     /* main buttons, links, highlights */
  --ds-brand-2:#592EDA;   /* the deep end of purple gradients */
  --ds-brand-soft:#F2EEFF;/* highlight box */
  --ds-go:#12A85F;        /* green: go, done, success */
  --ds-warm:#F28A24;      /* orange: Match Ready, energy */
  --ds-page:#ECECF5;      /* the page behind the cards */
  --ds-card:#FFFFFF;
  --ds-line:rgba(11,16,33,.08);

  /* ---------- shape ---------- */
  --ds-r-sm:12px;         /* chips, icon tiles */
  --ds-r-md:18px;         /* white cards, highlight boxes, list rows */
  --ds-r-lg:24px;         /* big colour cards */
  --ds-r-btn:99px;        /* buttons: round ends, like Home's Continue (16px = rounded box) */
  --ds-r-sheet:16px;      /* the top corners of a page that slides up */
  --ds-border:0px;        /* card outline width (0 = shadow only) */
  --ds-shadow:0 1px 3px rgba(60,50,140,.08);
  --ds-shadow-lift:0 16px 30px -20px rgba(40,20,120,.55);

  /* ---------- space ---------- */
  --ds-gutter:20px;       /* page edge to content */
  --ds-pad:18px;          /* inside a card */
  --ds-gap:12px;          /* between cards */

  /* ---------- buttons: send Claude a new button design and only these lines change ---------- */
  --ds-btn-h:54px;        /* main and second buttons */
  --ds-btn-fs:17px;
  --ds-btn-h-s:40px;      /* small pill buttons */
  --ds-btn-fs-s:14.5px;
  --ds-r-pill:99px;       /* small pill buttons and chips */
  --ds-btn-bg:linear-gradient(180deg,#7A5BFF,#5F3BEF);   /* main button: Make it my focus, Next, Save match */
  --ds-btn-fg:#fff;
  --ds-btn-edge:0 10px 22px -12px rgba(77,39,189,.8);   /* the soft glow under it (none = flat) */
  --ds-btn2-bg:#F1F1F6;                   /* second button: Another tip, Close, Not now */
  --ds-btn2-fg:var(--ds-ink);
  --ds-btn2-edge:0 0 0 1px rgba(11,16,33,.05) inset;
  --ds-btn-depth:3px;                     /* how far the chunky lesson buttons stick up */

  /* ---------- colour cards: not only purple (Joshua, 4 Nov). A tip's colour follows its kind ---------- */
  --ds-grad-purple:linear-gradient(181deg,#7A5BFF 0%,#5B33E6 100%);
  --ds-grad-blue:linear-gradient(170deg,#4B8DFF 0%,#2F5BEA 100%);
  --ds-grad-green:linear-gradient(160deg,#2FD47F 0%,#12A85F 55%,#0B8A4E 100%);
  --ds-grad-orange:linear-gradient(200deg,#FFB443 0%,#F07A1C 100%);
  --ds-grad-pink:linear-gradient(170deg,#FF5E9C 0%,#D92F74 100%);
  --ds-grad-teal:linear-gradient(170deg,#1FC8C0 0%,#0B8F98 100%);
  --ds-grad-navy:linear-gradient(180deg,#1B2A55,#0F1A3A);

  /* ---------- pop-ups (bottom sheets and pages that slide up) ---------- */
  --ds-veil:rgba(0,0,0,.34);              /* the dim behind a pop-up */
  --ds-ease:cubic-bezier(.32,.72,0,1);    /* how every pop-up moves */
  --ds-open-ms:520ms;
  --ds-grab:#D1D1D6;                      /* the little handle at the top */

  /* ---------- section titles ("Latest", "My progress", "Before you play") ---------- */
  --ds-section:18px;
  --ds-ic:16px;           /* line icons next to labels */
}

/* =============== 2. components for new screens =============== */
.ds-display,.ds-title,.ds-headline{margin:0;color:var(--ds-ink);font-weight:var(--ds-bold);letter-spacing:var(--ds-tight);text-wrap:balance}
.ds-display{font-size:var(--ds-display);line-height:1.12}
.ds-title{font-size:var(--ds-title);line-height:1.15}
.ds-headline{font-size:var(--ds-headline);line-height:1.25}
.ds-lead,.ds-body,.ds-small{margin:0;color:var(--ds-text);font-weight:var(--ds-text-w);line-height:var(--ds-leading)}
.ds-lead{font-size:var(--ds-lead)}
.ds-body{font-size:var(--ds-body)}
.ds-small{font-size:var(--ds-small);color:var(--ds-muted)}
.ds-label{display:block;font-size:var(--ds-label);font-weight:var(--ds-bold);letter-spacing:var(--ds-label-track);text-transform:uppercase;color:var(--ds-muted)}

.ds-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:var(--ds-btn-h);padding:0 20px;border:0;border-radius:var(--ds-r-btn);font:inherit;font-size:var(--ds-btn-fs);font-weight:var(--ds-bold);cursor:pointer;transition:transform .3s cubic-bezier(.34,1.36,.5,1)}
.ds-btn:active{transform:scale(.97)}
.ds-btn.main{background:var(--ds-btn-bg);color:var(--ds-btn-fg);box-shadow:var(--ds-btn-edge)}
.ds-btn.go{background:var(--ds-go);color:#fff;box-shadow:0 8px 20px -10px var(--ds-go)}
.ds-btn.second{background:var(--ds-btn2-bg);color:var(--ds-btn2-fg);box-shadow:var(--ds-btn2-edge)}
.ds-btn.text{width:auto;min-height:44px;padding:0 6px;background:none;color:var(--ds-brand);font-size:var(--ds-btn-fs-s)}
.ds-btn.pill{width:auto;min-height:var(--ds-btn-h-s);padding:0 18px;border-radius:99px;font-size:var(--ds-btn-fs-s);background:var(--ds-brand);color:#fff}
.ds-btn.pill.light{background:#fff;color:var(--ds-ink)}

.ds-card{padding:var(--ds-pad);border-radius:var(--ds-r-md);background:var(--ds-card);box-shadow:var(--ds-shadow),0 0 0 var(--ds-border) var(--ds-line) inset}
.ds-colour{position:relative;padding:var(--ds-pad);border-radius:var(--ds-r-lg);color:#fff;overflow:hidden;box-shadow:var(--ds-shadow-lift)}
.ds-colour.purple{background:linear-gradient(181deg,var(--ds-brand),var(--ds-brand-2))}
.ds-colour.green{background:linear-gradient(160deg,#2FD47F 0%,var(--ds-go) 55%,#0B8A4E 100%)}
.ds-colour.orange{background:linear-gradient(225deg,#FFC35A 0%,var(--ds-warm) 100%)}
.ds-colour .ds-display,.ds-colour .ds-title,.ds-colour .ds-headline{color:#fff}
.ds-colour .ds-body,.ds-colour .ds-lead,.ds-colour .ds-label{color:rgba(255,255,255,.85)}
.ds-hl{padding:16px var(--ds-pad);border-radius:var(--ds-r-md);background:var(--ds-brand-soft)}
.ds-hl .ds-label{color:var(--ds-brand)}
.ds-hl b{display:block;margin-top:4px;font-size:calc(var(--ds-headline) - 3px);font-weight:var(--ds-bold);line-height:1.3;letter-spacing:var(--ds-tight);color:var(--ds-ink)}
.ds-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:99px;background:var(--ds-brand-soft);color:var(--ds-brand);font-size:var(--ds-small);font-weight:var(--ds-bold)}
.ds-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:56px;padding:12px 16px;border:0;border-radius:var(--ds-r-md);background:var(--ds-card);box-shadow:var(--ds-shadow),0 0 0 var(--ds-border) var(--ds-line) inset;font:inherit;font-size:calc(var(--ds-body) + .5px);font-weight:var(--ds-bold);color:var(--ds-ink);text-align:left;cursor:pointer}

/* line icons: <i class="ds-ic i-bulb"></i> takes the colour of the text around it. One set for the whole app. */
.ds-ic{display:inline-block;flex:none;width:var(--ds-ic);height:var(--ds-ic);vertical-align:-.15em;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.ds-lab{display:flex;align-items:center;gap:7px}       /* a SMALL CAPITAL label with its icon */
.i-bulb{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5%22/%3E%3Cpath d=%22M9 18h6M10 22h4%22/%3E%3C/svg%3E")}
.i-zap{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M13 2 4 14h7l-1 8 9-12h-7l1-8z%22/%3E%3C/svg%3E")}
.i-cal{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%224%22 width=%2218%22 height=%2218%22 rx=%223%22/%3E%3Cpath d=%22M16 2v4M8 2v4M3 10h18M9 16l2 2 4-4%22/%3E%3C/svg%3E")}
.i-target{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%225%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%221%22/%3E%3C/svg%3E")}
.i-star{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17.3l-5.6 2.9 1.1-6.2L3 9.6l6.2-.9L12 3z%22/%3E%3C/svg%3E")}
.i-trophy{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M8 21h8M12 17v4M7 4h10v5a5 5 0 0 1-10 0V4z%22/%3E%3Cpath d=%22M17 5h3v2a3 3 0 0 1-3 3M7 5H4v2a3 3 0 0 0 3 3%22/%3E%3C/svg%3E")}
.i-flame{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 22c4 0 7-2.7 7-7 0-4-3-6.5-4-10-2.5 2-3 4-3 6-1-1-2-2-2-4-2.5 2.5-5 5.5-5 8 0 4.3 3 7 7 7z%22/%3E%3C/svg%3E")}
.i-book{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 19.5V5a2 2 0 0 1 2-2h14v16H6a2 2 0 0 0-2 2 2 2 0 0 0 2 2h14%22/%3E%3C/svg%3E")}
.i-chart{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 20V10M10 20V4M16 20v-7M22 20H2%22/%3E%3C/svg%3E")}
.i-user{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%228%22 r=%224%22/%3E%3Cpath d=%22M4 21a8 8 0 0 1 16 0%22/%3E%3C/svg%3E")}
.i-users{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%229%22 cy=%228%22 r=%224%22/%3E%3Cpath d=%22M1 21a8 8 0 0 1 16 0M16 4a4 4 0 0 1 0 8M19 14a6 6 0 0 1 4 7%22/%3E%3C/svg%3E")}
.i-refresh{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 12a9 9 0 1 1-3-6.7L21 8%22/%3E%3Cpath d=%22M21 3v5h-5%22/%3E%3C/svg%3E")}
.i-ticket{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 8a2 2 0 0 0 0 4v0a2 2 0 0 1 0 4v2h18v-2a2 2 0 0 1 0-4 2 2 0 0 1 0-4V6H3v2z%22/%3E%3Cpath d=%22M14 6v12%22 stroke-dasharray=%222 2.5%22/%3E%3C/svg%3E")}
.i-shirt{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 3 4 5 2 10l4 1v10h12V11l4-1-2-5-5-2a3 3 0 0 1-6 0z%22/%3E%3C/svg%3E")}
.i-chev{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m9 6 6 6-6 6%22/%3E%3C/svg%3E")}
.i-check{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22m8 12 3 3 5-6%22/%3E%3C/svg%3E")}
.i-clock{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 7v5l3 2%22/%3E%3C/svg%3E")}
.i-chat{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z%22/%3E%3C/svg%3E")}
.i-flag{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 22V3M5 4h12l-2 4 2 4H5%22/%3E%3C/svg%3E")}
.i-shield{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 22s8-3.5 8-10V5l-8-3-8 3v7c0 6.5 8 10 8 10z%22/%3E%3C/svg%3E")}
.i-sparkle{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3zM19 16l.8 2.2L22 19l-2.2.8L19 22l-.8-2.2L16 19l2.2-.8L19 16z%22/%3E%3C/svg%3E")}
.i-plus{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 5v14M5 12h14%22/%3E%3C/svg%3E")}
.i-heart{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 20s-7.5-4.6-9.3-9.2C1.4 7.3 3.7 4 7 4c2 0 3.6 1.1 5 3 1.4-1.9 3-3 5-3 3.3 0 5.6 3.3 4.3 6.8C19.5 15.4 12 20 12 20z%22/%3E%3C/svg%3E")}
.i-eye{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22/%3E%3C/svg%3E")}

.i-bag{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%227%22 width=%2218%22 height=%2214%22 rx=%223%22/%3E%3Cpath d=%22M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 13h18%22/%3E%3C/svg%3E")}
.i-list{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 6h11M9 12h11M9 18h11%22/%3E%3Ccircle cx=%224.5%22 cy=%226%22 r=%221%22/%3E%3Ccircle cx=%224.5%22 cy=%2212%22 r=%221%22/%3E%3Ccircle cx=%224.5%22 cy=%2218%22 r=%221%22/%3E%3C/svg%3E")}
/* the colour of a colour card: <div data-tag="match"> or class .g-orange. Each sets --g (gradient), --g-soft (a pale box), --g-ink (labels on white) */
[data-tag=mind],.g-purple{--g:var(--ds-grad-purple);--g-soft:#F2EEFF;--g-ink:#6D49FF;--g-edge:#4D27BD}
[data-tag=match],.g-orange{--g:var(--ds-grad-orange);--g-soft:#FFF1E3;--g-ink:#D9620B;--g-edge:#C95A10}
[data-tag=habit],.g-green{--g:var(--ds-grad-green);--g-soft:#E5F8EE;--g-ink:#0C8A50;--g-edge:#0A7A46}
[data-tag=sport],.g-blue{--g:var(--ds-grad-blue);--g-soft:#EAF1FF;--g-ink:#2F5BEA;--g-edge:#2549C4}
[data-tag=pro],.g-pink{--g:var(--ds-grad-pink);--g-soft:#FFEAF2;--g-ink:#D2296B;--g-edge:#B21F5A}
.g-teal{--g:var(--ds-grad-teal);--g-soft:#E3F8F7;--g-ink:#0B8F98;--g-edge:#087880}

/* =============== 3. the existing screens follow the tokens =============== */
/* page background: Home, Match and every page that slides in */
html.pm4:not(.ds-off) body,html.pm4:not(.ds-off) .app,html.pm4:not(.ds-off) .scroll,html:not(.ds-off) .mr-s,html:not(.ds-off) .mr-bar{background:var(--ds-page)}

/* page titles: "Let's Go, Danny!", Match, My Journal, Games, and the top line of every sheet and page */
html:not(.ds-off) .mt-h,html.pm4:not(.ds-off) #app[data-tab=home] .td-h,html:not(.ds-off) .mr-pg,html:not(.ds-off) .mr-hi h1,html:not(.ds-off) .mr-done h1,html:not(.ds-off) .tsh h2{
  font-size:var(--ds-title);font-weight:var(--ds-bold);letter-spacing:var(--ds-tight);line-height:1.15}
html:not(.ds-off) .mr-hi h1{font-size:calc(var(--ds-title) - 3px)}
html:not(.ds-off) .mt-s,html:not(.ds-off) .mc-sub,html:not(.ds-off) .mr-sub{font-size:var(--ds-body);font-weight:var(--ds-text-w);color:var(--ds-muted)}
html:not(.ds-off) .m5-hero h3{font-size:calc(var(--ds-display) - 6px)}

/* the main line on a card */
html.pm4:not(.ds-off) .t4 .tod-t,html:not(.ds-off) .rd-c b,html:not(.ds-off) .mr-try b,html:not(.ds-off) .mi-card b{font-size:var(--ds-headline);font-weight:var(--ds-bold);letter-spacing:var(--ds-tight)}
html:not(.ds-off) .m5-t b,html:not(.ds-off) .m4-sec h3{font-size:calc(var(--ds-headline) - 3px)}

/* paragraphs */
html:not(.ds-off) .tsh-why,html:not(.ds-off) .tsh-try p{font-size:var(--ds-lead);font-weight:var(--ds-text-w);line-height:var(--ds-leading);color:var(--ds-text)}
html.pm4:not(.ds-off) .t4-sub,html.pm4:not(.ds-off) .dyk.d4 p,html.pm4:not(.ds-off) .f4-tx,html.pm4:not(.ds-off) .f6-in,html:not(.ds-off) .rd-c p,html:not(.ds-off) .mr-try p,html:not(.ds-off) .mr-hi p,html:not(.ds-off) .m5-hero p,html:not(.ds-off) .mr-done p{
  font-size:var(--ds-body);line-height:var(--ds-leading)}
html:not(.ds-off) .m5-t span,html:not(.ds-off) .m5-pc small,html:not(.ds-off) .m5-after small,html:not(.ds-off) .rd-tag,html:not(.ds-off) .mr-fine{font-size:var(--ds-small)}

/* SMALL CAPITAL labels over cards and boxes */
html.pm4:not(.ds-off) .c4-pill,html:not(.ds-off) .mr-step,html:not(.ds-off) .tsh small,html:not(.ds-off) .rd-hd small,html:not(.ds-off) .mr-plan small,html:not(.ds-off) .mr-try small,html:not(.ds-off) .m5-t small,
html:not(.ds-off) .m5-hc small,html:not(.ds-off) .rd-more small,html:not(.ds-off) .m4-how small,html:not(.ds-off) .tsh-pill,html:not(.ds-off) .tsh-chip{font-size:var(--ds-label);font-weight:var(--ds-bold);letter-spacing:var(--ds-label-track)}

/* highlight boxes ("Use it", "Try this first") */
html:not(.ds-off) .tsh-use,html:not(.ds-off) .mr-try{border-radius:var(--ds-r-md);background:var(--ds-brand-soft);padding:16px var(--ds-pad)}
html:not(.ds-off) .tsh-use small,html:not(.ds-off) .mr-try small{color:var(--ds-brand)}
html:not(.ds-off) .tsh-use b{font-size:calc(var(--ds-headline) - 3px)}

/* buttons: main (purple), second (white), all one height and one corner */
html:not(.ds-off) .mr-btn,html:not(.ds-off) .tsh-btn{min-height:var(--ds-btn-h);border-radius:var(--ds-r-btn);font-size:var(--ds-btn-fs);font-weight:var(--ds-bold)}
html:not(.ds-off) .mr-btn:not(.ghost),html:not(.ds-off) .tsh-btn.main{background:var(--ds-btn-bg);color:var(--ds-btn-fg);box-shadow:var(--ds-btn-edge)}
html:not(.ds-off) .mr-btn.ghost,html:not(.ds-off) .tsh-btn.ghost{background:var(--ds-btn2-bg);color:var(--ds-btn2-fg);box-shadow:var(--ds-btn2-edge)}
html:not(.ds-off) .mr-tert button,html:not(.ds-off) .m4-sec button,html:not(.ds-off) .c4-link{font-size:var(--ds-btn-fs-s);color:var(--ds-brand)}
html:not(.ds-off) .m5-go,html:not(.ds-off) .rd-go,html:not(.ds-off) .j4-go{min-height:var(--ds-btn-h-s);font-size:var(--ds-btn-fs-s)}

/* white cards and list rows: one corner, one shadow, optional outline */
html.pm4:not(.ds-off) .j4,html.pm4:not(.ds-off) .f4,html.pm4:not(.ds-off) .mc-tease,html:not(.ds-off) .mr-ch button:not(.ns),html:not(.ds-off) .mr-pr,html:not(.ds-off) .m5-after,html:not(.ds-off) .rd-more,html:not(.ds-off) .mr-plan,html:not(.ds-off) .m4-how{
  border-radius:var(--ds-r-md);background-color:var(--ds-card);box-shadow:var(--ds-shadow),0 0 0 var(--ds-border) var(--ds-line) inset}
html:not(.ds-off) .mr-ch button.ns{border-radius:var(--ds-r-md)}
html:not(.ds-off) .mr-em{border-radius:var(--ds-r-sm)}

/* big colour cards */
html.pm4:not(.ds-off) .tod.t4,html.pm4:not(.ds-off) .dyk.d4,html:not(.ds-off) .m5-hero,html:not(.ds-off) .m5-t,html:not(.ds-off) .m5-pc,html:not(.ds-off) .rd-c,html:not(.ds-off) .mi-card{border-radius:var(--ds-r-lg)}

/* pages that slide up have the same top corners as Tips */
html:not(.ds-off) .tsh,html:not(.ds-off) .mr-s.up{border-radius:var(--ds-r-sheet) var(--ds-r-sheet) 0 0}
html.pm4:not(.ds-off) .j4-t{font-size:calc(var(--ds-headline) - 1px);font-weight:var(--ds-bold);letter-spacing:var(--ds-tight)}
/* dark headings take the ink colour (not the ones on colour cards, and not the grown-up black Home) */
html:not(.ds-off) .mt-h,html:not(.ds-off) .mr-pg,html:not(.ds-off) .mr-hi h1,html:not(.ds-off) .mr-done h1,html.pm4:not(.pm5):not(.ds-off) .j4-t,html.pm4:not(.pm5):not(.ds-off) #app[data-tab=home] .td-h{color:var(--ds-ink)}

/* season effects (design/live.js, set in MatchPoint Studio › Seasons): a few things drifting down over the top of the screen, never blocking taps */
.mp-fx{position:absolute;left:0;right:0;top:0;height:60%;z-index:20;overflow:hidden;pointer-events:none;-webkit-mask:linear-gradient(#000 55%,transparent);mask:linear-gradient(#000 55%,transparent)}
.mp-fx i{position:absolute;top:-24px;font-style:normal;font-size:var(--s);line-height:1;opacity:.85;text-shadow:0 1px 3px rgba(0,0,0,.12);animation:mpFall var(--d) linear var(--dl) infinite}
@keyframes mpFall{to{transform:translate(var(--dx),560px) rotate(200deg);opacity:0}}
.phone.tsh-on .mp-fx,.phone:has(.mr) .mp-fx{display:none}

/* =============== 4. polish round (4 Nov, Joshua: "Journal, Match and Profile are not there yet… pop-ups should work the same") =============== */
/* every tab title sits where Home's does */
html:not(.ds-off) .app[data-tab=mine] .mt,html:not(.ds-off) .app[data-tab=match] .mt{padding-top:max(26px,calc(env(safe-area-inset-top) + 8px))}

/* Tip of the day: the card and its page take the tip's colour (Mind purple, Match orange, Habit green, Sport blue, Pros pink) */
html.pm4:not(.ds-off) .tod.t4[data-tag]{background:var(--g)}
html.pm4:not(.ds-off) .tsh[data-tag] .tsh-hero{background:var(--g)}
html:not(.ds-off) .tsh[data-tag] .tsh-use{background:var(--g-soft)}
html:not(.ds-off) .tsh[data-tag] .tsh-use small{color:var(--g-ink)}
/* its three parts each get a line icon, so a long tip is easy to read */
html:not(.ds-off) .tsh small.ds-lab{display:flex;margin-bottom:8px}
html:not(.ds-off) .tsh small .ds-ic{--ds-ic:16px;color:var(--g-ink,var(--ds-brand))}
html:not(.ds-off) .tsh-use b{margin-top:2px}

/* pop-ups from the bottom (Add a match, Coach tip, Switch player…) look and move like the Tips page */
html:not(.ds-off) .veil{background:var(--ds-veil);transition:opacity var(--ds-open-ms) var(--ds-ease)}
html:not(.ds-off) .sheet{border-radius:var(--ds-r-sheet) var(--ds-r-sheet) 0 0;padding:10px var(--ds-gutter) calc(24px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(0,0,0,.18);transition:transform var(--ds-open-ms) var(--ds-ease)}
html:not(.ds-off) .sheet .grab{width:38px;height:5px;margin:0 auto 18px;background:var(--ds-grab)}
html:not(.ds-off) .sh-h small{font-size:var(--ds-label);font-weight:var(--ds-bold);letter-spacing:var(--ds-label-track);color:var(--ds-muted)}
html:not(.ds-off) .sh-h b{font-size:calc(var(--ds-title) - 3px);font-weight:var(--ds-bold);letter-spacing:var(--ds-tight);line-height:1.15;color:var(--ds-ink)}
html:not(.ds-off) .sh-h .ic{border-radius:var(--ds-r-md);box-shadow:none}
/* the chunky buttons used in pop-ups and lessons: same height, corner and type as every other button (their colours stay) */
:where(html:not(.ds-off)) .b3{min-height:var(--ds-btn-h);border-radius:var(--ds-r-btn);font-size:var(--ds-btn-fs);font-weight:var(--ds-bold);letter-spacing:0;box-shadow:0 var(--ds-btn-depth) 0 var(--d,var(--w2))}
:where(html:not(.ds-off)) .b3:active{transform:translateY(var(--ds-btn-depth));box-shadow:0 0 0 var(--d,var(--w2))}

/* section titles: one size everywhere */
html:not(.ds-off) .jn-h,html:not(.ds-off) .sec h3{font-size:var(--ds-section);font-weight:var(--ds-bold);letter-spacing:var(--ds-tight);text-transform:none;color:var(--ds-ink)}
html:not(.ds-off) .sec h3 svg{width:18px;height:18px;color:var(--ds-muted)}
html:not(.ds-off) .sec .lk,html:not(.ds-off) .grown .lk{font-size:var(--ds-btn-fs-s);font-weight:var(--ds-bold);color:var(--ds-brand)}

/* Journal: the same white cards as Home */
html:not(.ds-off) .jn-tabs,html:not(.ds-off) .jn-fc,html:not(.ds-off) .jn-quick button,html:not(.ds-off) .jn-row{border-radius:var(--ds-r-md);box-shadow:var(--ds-shadow),0 0 0 var(--ds-border) var(--ds-line) inset}

/* Profile: a title like every other tab, no old top bar (stars and streak are in the card) */
html:not(.ds-off) #app[data-tab=me] .bar{display:none}
html:not(.ds-off) #app[data-tab=me] .bar-sp{height:0}
html:not(.ds-off) .pf-h{margin:0;padding:max(26px,calc(env(safe-area-inset-top) + 8px)) 19px 14px}
html:not(.ds-off) .pf,html:not(.ds-off) .pf-tro,html:not(.ds-off) .tkrow,html:not(.ds-off) .lkr{margin-left:19px;margin-right:19px}
html:not(.ds-off) .pf{margin-top:0;background:var(--ds-grad-blue);border-radius:var(--ds-r-lg);box-shadow:var(--ds-shadow-lift)}
html:not(.ds-off) .pf-n h2{font-size:calc(var(--ds-title) - 3px);font-weight:var(--ds-bold);letter-spacing:var(--ds-tight)}
html:not(.ds-off) .pf-n p{font-size:var(--ds-small);font-weight:700;color:rgba(255,255,255,.85)}
html:not(.ds-off) .pf-sw{height:var(--ds-btn-h-s);padding:0 16px;border-radius:var(--ds-r-pill);font-size:var(--ds-btn-fs-s);font-weight:var(--ds-bold)}
html:not(.ds-off) .pf-stats div{border-radius:var(--ds-r-sm)}
html:not(.ds-off) .pf-stats b{font-weight:var(--ds-bold);color:var(--ds-ink)}
html:not(.ds-off) .pf-stats small{font-size:11px;font-weight:700;color:var(--ds-muted)}
/* rows: white card, title, one grey line, chevron */
html:not(.ds-off) .pf-tro,html:not(.ds-off) .tkrow,html:not(.ds-off) .rv,html:not(.ds-off) .prog2,html:not(.ds-off) .grown{border-radius:var(--ds-r-md);background:var(--ds-card);box-shadow:var(--ds-shadow),0 0 0 var(--ds-border) var(--ds-line) inset}
html:not(.ds-off) .pf-tro,html:not(.ds-off) .tkrow{margin-top:var(--ds-gap)}
html:not(.ds-off) .pf-tro b,html:not(.ds-off) .tkrow b,html:not(.ds-off) .rv b{font-size:calc(var(--ds-body) + 1px);font-weight:var(--ds-bold);color:var(--ds-ink)}
html:not(.ds-off) .pf-tro small,html:not(.ds-off) .tkrow small,html:not(.ds-off) .rv small{font-size:var(--ds-small);font-weight:600;color:var(--ds-muted)}
html:not(.ds-off) .tkrow>svg{width:44px;height:44px;padding:9px;border-radius:var(--ds-r-sm);background:var(--ds-brand-soft);color:var(--ds-brand)}
html:not(.ds-off) .rv i{border-radius:var(--ds-r-sm)}
html:not(.ds-off) .rv em svg{color:var(--ds-muted)}
html:not(.ds-off) .lkr{margin-top:var(--ds-gap);border-radius:var(--ds-r-lg);box-shadow:var(--ds-shadow-lift)}
html:not(.ds-off) .lk-prog{padding:0 19px 28px}
html:not(.ds-off) .lk-prog .sec{margin:26px 2px 10px}
html:not(.ds-off) .prog2 small{font-size:var(--ds-label);font-weight:var(--ds-bold);letter-spacing:var(--ds-label-track);color:var(--ds-muted)}
html:not(.ds-off) .prog2 b{font-size:calc(var(--ds-body) + 1px);font-weight:var(--ds-bold);color:var(--ds-ink)}
html:not(.ds-off) .grown{font-size:var(--ds-small);font-weight:600;color:var(--ds-text)}
html:not(.ds-off) .grown .b3.white{min-height:var(--ds-btn-h-s);padding:0 14px;border-radius:var(--ds-r-pill);background:#FFF0F1;color:#D7263D;font-size:var(--ds-btn-fs-s);box-shadow:none;white-space:nowrap}
html:not(.ds-off) .grown .b3.white svg{width:16px;height:16px}

/* ONE main button and ONE second button. The older screens (lessons, pop-ups, practice) each had their own purple in
   polish.css, sheets.css, practice.css and premium.css; now they all read the button tokens at the top of this file. */
html.pm2:not(.ds-off) .b3:not(.ghost):not(.white):not(.slb):not(.rec):not(.blue):not(.lk):not([disabled]):not([style*="--c"]),
html.pm2:not(.ds-off) .flow:not(.cerf) .b3.slb:not([disabled]),html.pm2:not(.ds-off) #sheet .b3:not(.ghost):not(.white):not(.lk),
html:not(.ds-off) .flow.px .ffoot .b3:not(.ghost),html.pm:not(.ds-off) .ffoot .b3[data-check],html.pm2:not(.ds-off) .fban .b3{
  background:var(--ds-btn-bg) !important;color:var(--ds-btn-fg) !important;box-shadow:var(--ds-btn-edge) !important}
html.pm2:not(.ds-off) #sheet .b3.white{background:var(--ds-btn2-bg) !important;color:var(--ds-btn2-fg) !important;box-shadow:var(--ds-btn2-edge) !important}
html:not(.ds-off) #sheet .b3{border-radius:var(--ds-r-btn)}
/* on the grey page a second button is white, so it still looks like a button */
html:not(.ds-off) .mr-s{--ds-btn2-bg:#fff}

/* court challenge pop-up (kids.js drillSheet, lessons/drills.js): what it is, what you need, what to do, when you've got it, why */
html:not(.ds-off) .dr-h span{font-size:var(--ds-body);font-weight:var(--ds-text-w);line-height:1.4;color:var(--ds-text)}
html:not(.ds-off) .sheet small.ds-lab{display:flex;margin:0 0 8px;font-size:var(--ds-label);font-weight:var(--ds-bold);letter-spacing:var(--ds-label-track);text-transform:uppercase;color:var(--ds-muted)}
html:not(.ds-off) .sheet small.ds-lab .ds-ic{--ds-ic:15px;color:var(--ds-brand)}
.dr-need{margin:16px 0 4px}
.dr-need>div{display:flex;flex-wrap:wrap;gap:8px}
.dr-need span{display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:var(--ds-r-pill,99px);background:var(--ds-brand-soft,#F2EEFF);color:var(--ds-ink,#0B1021);font-size:var(--ds-small,13px);font-weight:var(--ds-bold,800)}
.dr-card>small.ds-lab+ol{margin-top:4px}
.dr-why{display:flex;align-items:flex-start;gap:8px;margin:12px 2px 2px;font-size:var(--ds-small,13px);font-weight:700;line-height:1.4;color:var(--ds-muted,#6B6E99)}
.dr-why .ds-ic{--ds-ic:16px;margin-top:1px;color:var(--ds-warm,#F28A24)}
html:not(.ds-off) .dr-h small{font-size:var(--ds-label);font-weight:var(--ds-bold);letter-spacing:var(--ds-label-track);color:var(--ds-brand)}
html:not(.ds-off) .dr-h b{font-size:calc(var(--ds-title) - 3px);font-weight:var(--ds-bold);letter-spacing:var(--ds-tight);line-height:1.1;color:var(--ds-ink)}
html:not(.ds-off) .dr-card{border-radius:var(--ds-r-md);box-shadow:0 0 0 1.5px rgba(11,16,33,.07) inset}
html:not(.ds-off) .drill-goal{border-radius:var(--ds-r-md)}