/* MathKidoo design kit, v0.4 (5 Oct 2026). The ONE shared stylesheet for every
   product page. Light theme only. A page never invents a colour, a size or a gap.

   HOW A PAGE OPTS IN (it can sit beside the old page CSS while it migrates):
     link  fonts/baloo2.css, then mk-design.css, and put class "mkd" on body.
   Everything here is either a custom property (--mkd-...), a class starting
   with mkd-, or a rule scoped under .mkd. There is no bare element selector,
   so linking this file restyles nothing until body has class mkd.

   Sections: 1 tokens, 2 the three child groups, base and components, 3 the
   page shells (adult page, child page, auth card), 4 v0.3: form controls,
   rows and tiles, depth, motion, and the laptop layout (4r to 4x are v0.4: the
   ball ladder, the title row, the slim action bar, one header, the child reward,
   the question stage, and the school data pictures). Motion that needs a
   script lives in mk-motion.js (optional: every effect is complete without it).

   Comment rule for this file: a star is never written next to a slash
   inside a comment, because that closes the comment and the browser drops
   the next rule (the fault that hid the Log In button for eight days). */

/* ------------------------------------------------------------------ 1. TOKENS */
:root {
  /* Colour roles. Each background has its own on-colour. Every pair is
     measured on the design board with real computed colours. */
  --mkd-ground: #FAF7F2;      /* the page */
  --mkd-surface: #FFFFFF;     /* cards, fields */
  --mkd-tint: #F1ECF9;        /* quiet lilac areas, secondary fills */
  --mkd-ink: #1B1530;         /* all main text */
  --mkd-ink-soft: #5B5478;    /* supporting text */
  --mkd-edge: #7D7699;        /* borders of fields and controls (3 to 1 on white) */
  --mkd-rule: #E8E2F2;        /* decorative dividers only, never a control edge */

  --mkd-brand: #7139D3;       /* the MathKidoo purple */
  --mkd-brand-on: #FFFFFF;
  --mkd-brand-deep: #4A1F9C;  /* pressed edge, text links on lilac */
  --mkd-navy: #12266F;        /* headings, dark hero ground */
  --mkd-navy-on: #FFFFFF;

  --mkd-action: #7139D3;      /* the one main button on a screen */
  --mkd-action-on: #FFFFFF;
  --mkd-action-hover: #5F2DBB;
  --mkd-action-press: #4A1F9C;
  --mkd-action-off: #D3C9EA;  /* disabled fill */
  --mkd-action-off-on: #3B3358;

  --mkd-success: #0B6B37;
  --mkd-success-on: #FFFFFF;
  --mkd-success-tint: #E3F6EA;
  --mkd-caution: #FFC61A;     /* the gold of the Field */
  --mkd-caution-on: #20263D;
  --mkd-caution-tint: #FFF4CC;
  --mkd-caution-text: #6B4400;
  --mkd-danger: #B3261E;
  --mkd-danger-on: #FFFFFF;
  --mkd-danger-tint: #FDECEA;

  --mkd-tint-deep: #E4DAF6;   /* a pressed or hovered lilac */
  --mkd-ahead: #ECEAF1;       /* a step not reached yet */
  --mkd-focus: #12266F;       /* focus ring on light grounds */
  --mkd-focus-dark: #FFC61A;  /* focus ring on navy grounds */

  /* Fonts. Baloo 2 is the only face the repo ships; the body uses the
     device's own clean face so nothing is fetched from the network. */
  --mkd-font-display: 'Baloo 2', 'Segoe UI', system-ui, sans-serif;
  --mkd-font-body: system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Type scale. Phone first; laptop sizes are set at the bottom of section 1. */
  --mkd-fs-display: 2.5rem;   /* 40 */
  --mkd-fs-h1: 1.75rem;       /* 28 */
  --mkd-fs-h2: 1.25rem;       /* 20 */
  --mkd-fs-body: 1.0625rem;   /* 17 */
  --mkd-fs-small: 0.875rem;   /* 14, the smallest size used anywhere */
  --mkd-lh-body: 1.5;
  --mkd-lh-head: 1.15;

  /* Spacing scale (px). Nothing else is used. */
  --mkd-s1: 4px; --mkd-s2: 8px; --mkd-s3: 12px; --mkd-s4: 16px;
  --mkd-s5: 24px; --mkd-s6: 32px; --mkd-s7: 48px; --mkd-s8: 64px;
  --mkd-gutter: 20px;         /* the space between a screen edge and any content */
  --mkd-pad: 20px;            /* the space inside a card */

  /* Shape and depth */
  --mkd-r-sm: 12px; --mkd-r-md: 16px; --mkd-r-lg: 24px; --mkd-r-pill: 999px;
  --mkd-shadow-card: 0 1px 2px rgba(27,21,48,.06), 0 6px 18px rgba(27,21,48,.08);
  --mkd-shadow-lift: 0 10px 30px rgba(27,21,48,.16);
  --mkd-press: 0 4px 0 var(--mkd-action-press);  /* the brand pressed-button edge */

  /* Elevation: three steps, and one for things that float over the page.
     rest: a control or a flat tile. raised: a card (no border). hero: the one hero block. overlay: dialog, sheet, toast. */
  --mkd-elev-rest: 0 1px 2px rgba(27,21,48,.05);
  --mkd-elev-raised: 0 1px 2px rgba(27,21,48,.06), 0 6px 18px rgba(27,21,48,.08);
  --mkd-elev-hero: 0 18px 40px rgba(74,31,156,.22);
  --mkd-elev-overlay: 0 4px 8px rgba(18,38,111,.12), 0 22px 48px rgba(18,38,111,.28);

  /* Brand depth. A lit top stop gives the main button its gloss; white text on
     every stop is measured by tools/tests/design-kit-check.js. */
  --mkd-action-lit: #8250E6;
  --mkd-action-hover-lit: #6A33C6;
  --mkd-navy-deep: #0B1440;   /* the dark end of the hero ground */
  --mkd-danger-press: #7F1B16;
  --mkd-danger-hover: #9A1F18;
  --mkd-success-lit: #3DBE72;  /* a success icon on a navy toast */
  --mkd-danger-lit: #FF8C84;   /* an error icon on a navy toast */
  --mkd-gold-lit: #FFF3C4;     /* the highlight on a gold ball */
  --mkd-gold-deep: #D99F00;    /* the shade on a gold ball */
  --mkd-ball-purple: #7C49E0;  /* the purple ball */
  --mkd-ball-lit: #C9A8FF;     /* the highlight on a purple ball */
  --mkd-hero-soft: #E4E0F6;    /* supporting text on the hero ground */
  --mkd-gradtext-ink: #C2185B; /* the plain colour kept under the warm gradient on a light ground */
  --mkd-glow-action: 0 8px 18px rgba(113,57,211,.28);   /* the soft purple light under the main button */
  --mkd-grad-text: linear-gradient(90deg, #FFC61A, #FF8FA0 55%, #C9A8FF);        /* on a dark ground */
  --mkd-grad-text-light: linear-gradient(90deg, #B34700, #C2185B 55%, #7139D3);  /* on a light ground */
  --mkd-grad-action: linear-gradient(180deg, var(--mkd-action-lit), var(--mkd-action));
  --mkd-grad-action-hover: linear-gradient(180deg, var(--mkd-action-hover-lit), var(--mkd-action-hover));
  --mkd-grad-hero: linear-gradient(165deg, var(--mkd-navy), var(--mkd-navy-deep));
  --mkd-glow-hero: radial-gradient(90% 80% at 88% 0, rgba(113,57,211,.25), rgba(113,57,211,0) 62%);
  --mkd-gloss: inset 0 2px 0 rgba(255,255,255,.25);   /* the lit lip on a pressable face */
  --mkd-focus-glow: 0 0 0 4px rgba(113,57,211,.20);   /* the soft halo around a focused field */

  /* Motion. A UI change is 240ms or less; only a count-up (480), a ring (600) and the success burst (900) run longer. Spring overshoots a little, for a press or a pop only. */
  --mkd-dur-1: 120ms;          /* a press, a colour change */
  --mkd-dur-2: 240ms;          /* an enter, a switch, a fade, a dot */
  --mkd-dur-3: 480ms;          /* a number counting up */
  --mkd-dur-4: 600ms;          /* a ring drawing */
  --mkd-dur-burst: 900ms;      /* the success burst */
  --mkd-ease-out: cubic-bezier(.2, .8, .2, 1);
  --mkd-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --mkd-stagger: 40ms;         /* the gap between list items entering */

  /* Per-component hooks. A component or a page may set these on one element;
     the defaults live here so every var() in the kit resolves. */
  --mkd-i: 0;                  /* the place of an item in a staggered list */
  --mkd-a: 0deg;               /* the angle of one ball in the success burst */
  --mkd-burst-r: 64px;         /* how far the burst travels */
  --mkd-ring-size: 84px;       /* the width of the minutes ring */
  --mkd-ring-color: var(--mkd-success);
  --mkd-ladder-cols: 11;       /* columns in the ladder strip (10 or 11) */
  --mkd-hold: 0%;              /* how full a hold button is */
  --mkd-hold-fill: var(--mkd-action-press);
  --mkd-toast-bottom: 16px;    /* the gap under the toasts (mk-motion.js lifts it above an action bar) */

  /* v0.4. The amber ball (a step to repair), the three drawn balls, and their hooks. */
  --mkd-amber: #F08A24;        /* the amber ball: repair. Never text, never a fill behind text */
  --mkd-ball-gloss: radial-gradient(circle at 30% 24%, rgba(255,255,255,.34), rgba(255,255,255,0) 40%);   /* the faint highlight of the Field ball */
  --mkd-grad-ball-gold: var(--mkd-ball-gloss), var(--mkd-caution);
  --mkd-grad-ball-purple: var(--mkd-ball-gloss), var(--mkd-ball-purple);   /* the same faint highlight as the Field ball, so a white number on it stays 4.5 to 1 */
  --mkd-grad-ball-amber: var(--mkd-ball-gloss), var(--mkd-amber);
  --mkd-lad-gap: var(--mkd-surface);   /* the ground a ladder ball sits on (the gap between a ball and its ring); .mkd-hero sets the navy */
  --mkd-lad-ring: var(--mkd-edge);     /* the hollow ring of a step still to climb */
  --mkd-lad-num: var(--mkd-ink-soft);  /* the number on a hollow ring */
  --mkd-grow-step: 80ms;               /* the gap between two balls lighting (mk-motion.js lowers it on a long ladder) */
  --mkd-bar-h: 72px;                   /* the slim action bar, and the padding .mkd-has-bar keeps clear */
  --mkd-hundred-ring: var(--mkd-caution);   /* the ring on the hundred grid; .is-on-light turns it navy */
  --mkd-reward-delay: 1s;              /* when the warm line and the art arrive in .mkd-reward (mk-motion.js sets it to the end of the ladder) */

  /* Targets (set per child group below) */
  --mkd-target: 48px;         /* smallest tap size, never below 44 */
  --mkd-btn-h: 52px;          /* the main button */
  --mkd-btn-fs: 1.0625rem;
  --mkd-ball: 40px;           /* a ball in the Field */
  --mkd-ball-fs: 1rem;
  --mkd-box: 28px;            /* the drawn tick box or radio ring (the tap area is --mkd-target) */
  --mkd-switch-w: 52px; --mkd-switch-h: 30px; --mkd-thumb: 24px;   /* the on/off switch */
  --mkd-ring-w: 10px;         /* the stroke of the minutes ring */

  /* The top bar (7 Oct 2026, shell spec): the brand navy, so the 3D M glows. One place to change the shade:
     point --mkd-top-bg at another token and every header follows. Every ink is measured by tools/tests/shell-check.js. */
  --mkd-top-bg: var(--mkd-navy);            /* bar ground */
  --mkd-top-rule: var(--mkd-navy-deep);     /* the divider under the bar */
  --mkd-top-ink: var(--mkd-navy-on);        /* name and link text, 13.7 to 1 */
  --mkd-top-ink-soft: var(--mkd-hero-soft); /* quiet text and the empty dots */
  --mkd-top-link-bg: rgba(255,255,255,.10); /* pill ground */
  --mkd-top-link-edge: rgba(255,255,255,.40); /* pill border */
  --mkd-top-link-hover: rgba(255,255,255,.18); /* hover and press */
}
@media (min-width: 900px) {
  :root {
    --mkd-fs-display: 2.75rem; --mkd-fs-h1: 2.125rem; --mkd-fs-h2: 1.5rem;
    --mkd-fs-body: 1.125rem; --mkd-fs-small: 0.9375rem;
    --mkd-gutter: 32px; --mkd-pad: 24px;
  }
}

/* ------------------------------------------------- 2. THE THREE CHILD GROUPS
   One switch, three levels of help. Put data-group on the page root (or on
   any block, to show the groups side by side).
   little : cannot read yet. Voice talks. Big pictures, 64px buttons, 56px targets.
   middle : short words with pictures. The default.
   older  : cleaner and faster. Smaller balls, 48px buttons, no voice bubble.
   Words are switched with .g-little / .g-middle / .g-older on an element:
   it is shown only for its own group. */
[data-group="little"] {
  --mkd-fs-h1: 2rem; --mkd-fs-h2: 1.5rem; --mkd-fs-body: 1.375rem; --mkd-fs-small: 1.125rem;
  --mkd-target: 56px; --mkd-btn-h: 64px; --mkd-btn-fs: 1.375rem;
  --mkd-ball: 56px; --mkd-ball-fs: 1.5rem;
  --mkd-box: 36px; --mkd-switch-w: 64px; --mkd-switch-h: 36px; --mkd-thumb: 30px;
  --mkd-lh-body: 1.4;
}
[data-group="middle"] {
  --mkd-fs-h1: 1.75rem; --mkd-fs-body: 1.1875rem;
  --mkd-target: 48px; --mkd-btn-h: 56px; --mkd-btn-fs: 1.1875rem;
  --mkd-ball: 40px; --mkd-ball-fs: 1.0625rem;
  --mkd-box: 28px;
}
[data-group="older"] {
  --mkd-fs-h1: 1.5rem; --mkd-fs-body: 1rem;
  --mkd-target: 44px; --mkd-btn-h: 48px; --mkd-btn-fs: 1rem;
  --mkd-ball: 34px; --mkd-ball-fs: 0.9375rem;
  --mkd-box: 24px;
}
[data-group="little"] :is(.g-middle, .g-older),
[data-group="middle"] :is(.g-little, .g-older),
[data-group="older"] :is(.g-little, .g-middle) { display: none !important; }
/* shared by two groups: hidden only for the third */
[data-group="little"] .g-not-little, [data-group="middle"] .g-not-middle, [data-group="older"] .g-not-older { display: none !important; }

/* ------------------------------------------------------------------ BASE */
.mkd { margin: 0; background: var(--mkd-ground); color: var(--mkd-ink);
  font-family: var(--mkd-font-body); font-size: var(--mkd-fs-body); line-height: var(--mkd-lh-body);
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.mkd *, .mkd *::before, .mkd *::after { box-sizing: border-box; }
.mkd img, .mkd svg { max-width: 100%; }
.mkd-main { flex: 1 0 auto; display: flex; flex-direction: column; }
.mkd-main > :is(.mkd-body, .mkd-stage, .mkd-grow) { flex: 1 0 auto; }   /* the content takes the height ... */
.mkd-main > .mkd-actionbar { margin-top: auto; }                         /* ... so the action bar rests at the foot */
.mkd [hidden] { display: none !important; }
.mkd-page { width: 100%; max-width: 720px; margin-inline: auto; padding-inline: var(--mkd-gutter); }
.mkd-page.is-wide { max-width: 1120px; }
.mkd-page.is-narrow { max-width: 460px; }
.mkd-stack { display: flex; flex-direction: column; gap: var(--mkd-gap, var(--mkd-s4)); }
.mkd-stack > .mkd-btn:not(.is-block), .mkd-stack > .mkd-btn-voice { align-self: flex-start; }
.mkd-stack > .mkd-chip { align-self: flex-start; }
.mkd-stack.is-loose { --mkd-gap: var(--mkd-s5); }
.mkd-stack.is-tight { --mkd-gap: var(--mkd-s2); }
.mkd-section { padding-block: var(--mkd-s5); }
.mkd-cluster { display: flex; flex-wrap: wrap; gap: var(--mkd-s3); align-items: center; }
.mkd-grid { display: grid; gap: var(--mkd-s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.mkd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:where(.mkd) a { color: var(--mkd-navy); text-underline-offset: 3px; }

/* Headings and text */
.mkd-display, .mkd-h1, .mkd-h2 { font-family: var(--mkd-font-display); color: var(--mkd-navy); line-height: var(--mkd-lh-head); margin: 0; font-weight: 800; text-wrap: balance; }
.mkd-display { font-size: var(--mkd-fs-display); font-weight: 800; }
.mkd-h1 { font-size: var(--mkd-fs-h1); }
.mkd-h2 { font-size: var(--mkd-fs-h2); font-weight: 700; }
.mkd-eyebrow { font-family: var(--mkd-font-display); font-size: var(--mkd-fs-small); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mkd-brand-deep); margin: 0; }
.mkd-p { margin: 0; max-width: 62ch; }
.mkd-soft { color: var(--mkd-ink-soft); }
.mkd-small { font-size: var(--mkd-fs-small); line-height: 1.45; }
.mkd-num { font-family: var(--mkd-font-display); font-weight: 800; font-variant-numeric: tabular-nums; }

/* Focus: one ring, the same on every control. Never removed. */
.mkd :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.mkd .is-focus { outline: 3px solid var(--mkd-focus); outline-offset: 3px; }
.mkd-on-dark :is(a, button, input, summary, [tabindex]):focus-visible { outline-color: var(--mkd-focus-dark); }

/* ------------------------------------------------------------- COMPONENTS */

/* Top bar */
.mkd-topbar { position: sticky; top: 0; z-index: 20; background: var(--mkd-top-bg); border-bottom: 1px solid var(--mkd-top-rule); color: var(--mkd-top-ink); }
.mkd-topbar-in { display: flex; align-items: center; justify-content: space-between; gap: var(--mkd-s3); min-height: 60px; padding-block: var(--mkd-s2); }
.mkd-brandmark { display: inline-flex; align-items: center; min-height: var(--mkd-target); min-width: 44px; }
.mkd-brandmark img { height: 36px; width: auto; display: block; }
.mkd-topbar-title { font-family: var(--mkd-font-display); font-weight: 700; font-size: 1.0625rem; color: var(--mkd-top-ink); margin: 0; text-align: center; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Buttons. Primary = the one main action. Secondary = another choice.
   Quiet = a small action that must never compete with the main one. */
.mkd-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--mkd-s2);
  min-height: var(--mkd-btn-h); min-width: 44px; padding: 0 var(--mkd-s5); border: 2px solid transparent;
  border-radius: var(--mkd-r-pill); font-family: var(--mkd-font-display); font-weight: 800; font-size: var(--mkd-btn-fs);
  line-height: 1.1; text-decoration: none; text-align: center; cursor: pointer; position: relative;
  transition: transform var(--mkd-dur-1) var(--mkd-ease-out), box-shadow var(--mkd-dur-1) var(--mkd-ease-out), background-color var(--mkd-dur-2) var(--mkd-ease-out), border-color var(--mkd-dur-2) var(--mkd-ease-out);
  -webkit-tap-highlight-color: transparent; }
.mkd-btn.is-block { display: flex; width: 100%; }
.mkd-btn-primary { background: var(--mkd-grad-action); background-color: var(--mkd-action); color: var(--mkd-action-on); box-shadow: var(--mkd-gloss), var(--mkd-press), var(--mkd-glow-action); margin-bottom: 4px; }
.mkd-btn-primary:hover, .mkd-btn-primary.is-hover { background: var(--mkd-grad-action-hover); background-color: var(--mkd-action-hover); }
.mkd-btn-primary:active, .mkd-btn-primary.is-pressed { transform: translateY(4px); box-shadow: var(--mkd-gloss), 0 0 0 var(--mkd-action-press); background: var(--mkd-grad-action-hover); background-color: var(--mkd-action-hover); }
.mkd-btn-secondary { background: var(--mkd-surface); color: var(--mkd-brand-deep); border-color: var(--mkd-brand); box-shadow: 0 3px 0 var(--mkd-action-off); margin-bottom: 3px; }
.mkd-btn-secondary:hover, .mkd-btn-secondary.is-hover { background: var(--mkd-tint); }
.mkd-btn-secondary:active, .mkd-btn-secondary.is-pressed { transform: translateY(3px); box-shadow: 0 0 0 var(--mkd-action-off); background: #E4DAF6; }
.mkd-btn-quiet { background: transparent; color: var(--mkd-navy); text-decoration: underline; text-underline-offset: 4px; font-weight: 700; padding: 0 var(--mkd-s3); min-height: var(--mkd-target); border-radius: var(--mkd-r-sm); font-size: var(--mkd-fs-body); font-family: var(--mkd-font-body); }
.mkd-btn-quiet:hover, .mkd-btn-quiet.is-hover { background: var(--mkd-tint); }
.mkd-btn-quiet:active, .mkd-btn-quiet.is-pressed { background: #E4DAF6; }
.mkd-btn-quiet.is-small { font-size: var(--mkd-fs-small); }
.mkd-btn:disabled, .mkd-btn[aria-disabled="true"], .mkd-btn.is-disabled { background: var(--mkd-action-off); background-image: none; color: var(--mkd-action-off-on); border-color: transparent; box-shadow: none; cursor: not-allowed; transform: none; text-decoration: none; }
.mkd-btn-quiet:disabled, .mkd-btn-quiet.is-disabled { background: transparent; text-decoration: underline; }
.mkd-btn.is-loading { cursor: progress; pointer-events: none; }
.mkd-btn.is-loading::before { content: ""; width: 1.1em; height: 1.1em; border-radius: 50%; border: 3px solid currentColor; border-right-color: transparent; animation: mkd-spin .8s linear infinite; flex: none; }
@keyframes mkd-spin { to { transform: rotate(360deg); } }
.mkd-btn-google { background: var(--mkd-surface); color: var(--mkd-ink); border-color: var(--mkd-edge); font-family: var(--mkd-font-body); font-weight: 700; }
.mkd-btn-google:hover { background: var(--mkd-tint); }
.mkd-btn-google svg { width: 22px; height: 22px; flex: none; }
.mkd-btn-voice { background: var(--mkd-tint); color: var(--mkd-brand-deep); border: 2px solid transparent; border-radius: var(--mkd-r-pill); min-height: var(--mkd-target); padding: 0 var(--mkd-s4); font-family: var(--mkd-font-display); font-weight: 700; font-size: var(--mkd-fs-small); display: inline-flex; align-items: center; gap: var(--mkd-s2); cursor: pointer; }
.mkd-btn-voice svg { width: 22px; height: 22px; flex: none; }
[data-group="little"] .mkd-btn-voice.is-icon, .mkd-btn-voice.is-icon { min-width: var(--mkd-target); width: var(--mkd-target); padding: 0; justify-content: center; border-radius: 50%; }
[data-group="little"] .mkd-btn-voice { min-height: 64px; min-width: 64px; padding: 0 var(--mkd-s5); font-size: 1.25rem; background: var(--mkd-caution); color: var(--mkd-caution-on); }

/* Cards */
.mkd-card { background: var(--mkd-surface); border: 1px solid transparent; border-radius: var(--mkd-r-lg); padding: var(--mkd-pad); box-shadow: var(--mkd-elev-raised); }
.mkd-card.is-tint { background: var(--mkd-tint); box-shadow: none; border-color: transparent; }
.mkd-card.is-navy { background: var(--mkd-navy); color: var(--mkd-navy-on); border-color: transparent; }
.mkd-card.is-navy :is(.mkd-h1, .mkd-h2, .mkd-display) { color: var(--mkd-navy-on); }
.mkd-card.is-navy .mkd-soft { color: #D8D3F0; }
.mkd-card.is-navy .mkd-eyebrow { color: var(--mkd-caution); }
.mkd-card.is-caution { background: var(--mkd-caution-tint); border-color: transparent; box-shadow: none; }
.mkd-card.is-success { background: var(--mkd-success-tint); border-color: transparent; box-shadow: none; }

/* Text field: label above, help below, error with a mark (not colour alone) */
.mkd-field { display: block; }
.mkd-label { display: block; font-weight: 700; font-size: var(--mkd-fs-small); color: var(--mkd-ink); margin: 0 0 var(--mkd-s2); }
.mkd-input { display: block; width: 100%; min-height: 52px; padding: 0 var(--mkd-s4); background: var(--mkd-surface); color: var(--mkd-ink);
  border: 2px solid var(--mkd-edge); border-radius: var(--mkd-r-sm); font: inherit; font-size: 1.0625rem;
  transition: border-color var(--mkd-dur-2) var(--mkd-ease-out), box-shadow var(--mkd-dur-2) var(--mkd-ease-out), background-color var(--mkd-dur-2) var(--mkd-ease-out); }
.mkd-input::placeholder { color: var(--mkd-ink-soft); opacity: 1; }
.mkd-input:hover, .mkd-input.is-hover { border-color: var(--mkd-brand); }
.mkd-input:focus-visible, .mkd-input.is-focus { outline: 3px solid var(--mkd-focus); outline-offset: 2px; border-color: var(--mkd-focus); box-shadow: var(--mkd-focus-glow); }
.mkd-input:disabled { background: var(--mkd-action-off); color: var(--mkd-action-off-on); border-color: var(--mkd-rule); cursor: not-allowed; }
.mkd-field.is-invalid .mkd-input, .mkd-input[aria-invalid="true"] { border-color: var(--mkd-danger); background: var(--mkd-danger-tint); }
.mkd-help { margin: var(--mkd-s2) 0 0; font-size: var(--mkd-fs-small); color: var(--mkd-ink-soft); }
.mkd-error { margin: var(--mkd-s2) 0 0; font-size: var(--mkd-fs-small); font-weight: 700; color: var(--mkd-danger); display: flex; gap: var(--mkd-s2); align-items: flex-start; }
.mkd-error[hidden], .mkd-error:empty { display: none; }
.mkd-error::before { content: "!"; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--mkd-danger); color: var(--mkd-danger-on); font-size: 13px; line-height: 20px; text-align: center; margin-top: 1px; }
.mkd-inputwrap { position: relative; }
.mkd-inputwrap .mkd-input { padding-right: 84px; }
.mkd-inputwrap .mkd-btn-quiet { position: absolute; right: 4px; top: 4px; bottom: 4px; min-height: 0; min-width: 64px; font-size: var(--mkd-fs-small); }
.mkd-notice { display: flex; gap: var(--mkd-s3); align-items: flex-start; padding: var(--mkd-s4); border-radius: var(--mkd-r-md); font-size: var(--mkd-fs-small); font-weight: 600; }
.mkd-notice[hidden], .mkd-notice:empty { display: none; }
.mkd-notice.is-danger { background: var(--mkd-danger-tint); color: #7F1B16; border: 1px solid var(--mkd-danger); }
.mkd-notice.is-success { background: var(--mkd-success-tint); color: var(--mkd-success); border: 1px solid var(--mkd-success); }
.mkd-notice.is-caution { background: var(--mkd-caution-tint); color: var(--mkd-caution-text); border: 1px solid #D9A400; }

/* List row: the whole row is the target */
.mkd-list { list-style: none; margin: 0; padding: 0; background: var(--mkd-surface); border: 1px solid var(--mkd-rule); border-radius: var(--mkd-r-lg); overflow: hidden; }
.mkd-list > li + li { border-top: 1px solid var(--mkd-rule); }
.mkd-listrow { display: flex; align-items: center; gap: var(--mkd-s4); min-height: 64px; padding: var(--mkd-s3) var(--mkd-pad); color: inherit; text-decoration: none; }
a.mkd-listrow:hover, a.mkd-listrow.is-hover { background: var(--mkd-tint); }
a.mkd-listrow:active { background: #E4DAF6; }
a.mkd-listrow:focus-visible { outline-offset: -3px; }
.mkd-listrow-icon { flex: none; width: 44px; height: 44px; border-radius: var(--mkd-r-sm); background: var(--mkd-tint); color: var(--mkd-brand-deep); display: grid; place-items: center; font-family: var(--mkd-font-display); font-weight: 800; }
.mkd-listrow-text { flex: 1 1 auto; min-width: 0; }
.mkd-listrow-title { display: block; font-weight: 700; color: var(--mkd-ink); }
.mkd-listrow-sub { display: block; font-size: var(--mkd-fs-small); color: var(--mkd-ink-soft); }
.mkd-listrow-end { flex: none; color: var(--mkd-ink-soft); font-size: 1.5rem; line-height: 1; }

/* Chips. A status chip is not clickable; a choice chip is a button. */
.mkd-chip { display: inline-flex; align-items: center; gap: var(--mkd-s1); min-height: 28px; padding: 2px var(--mkd-s3); border-radius: var(--mkd-r-pill); background: var(--mkd-tint); color: var(--mkd-brand-deep); font-family: var(--mkd-font-display); font-weight: 700; font-size: var(--mkd-fs-small); line-height: 1.2; }
.mkd-chip.is-strong { background: var(--mkd-success-tint); color: var(--mkd-success); }
.mkd-chip.is-repair { background: var(--mkd-caution-tint); color: var(--mkd-caution-text); }
.mkd-chip.is-here { background: var(--mkd-brand); color: var(--mkd-brand-on); }
.mkd-chip.is-ahead { background: #ECEAF1; color: var(--mkd-ink-soft); }
button.mkd-chip { min-height: var(--mkd-target); padding: 0 var(--mkd-s4); border: 2px solid transparent; cursor: pointer; font-size: var(--mkd-fs-body); }
button.mkd-chip:hover, button.mkd-chip.is-hover { border-color: var(--mkd-brand); }
button.mkd-chip[aria-pressed="true"], button.mkd-chip.is-on { background: var(--mkd-brand); color: var(--mkd-brand-on); }

/* Progress dots: how far along, never how many right or wrong */
.mkd-dots { display: flex; gap: var(--mkd-s2); align-items: center; justify-content: center; list-style: none; margin: 0; padding: 0; }
.mkd-dots > li { width: 12px; height: 12px; border-radius: 50%; background: var(--mkd-rule); border: 2px solid var(--mkd-edge); transition: transform var(--mkd-dur-2) var(--mkd-ease-spring), background-color var(--mkd-dur-2) var(--mkd-ease-out), border-color var(--mkd-dur-2) var(--mkd-ease-out); }
.mkd-dots > li.is-done { background: var(--mkd-brand); border-color: var(--mkd-brand); }
.mkd-dots > li.is-now { background: var(--mkd-caution); border-color: var(--mkd-navy); transform: scale(1.35); }
[data-group="little"] .mkd-dots > li { width: 18px; height: 18px; }

/* Bottom action bar: sticks to the foot of the screen on a phone and a
   laptop, so the main button can never scroll out of sight. */
.mkd-actionbar { position: sticky; bottom: 0; z-index: 15; background: var(--mkd-ground); border-top: 1px solid var(--mkd-rule);
  padding: var(--mkd-s3) 0 calc(var(--mkd-s3) + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -6px 16px rgba(27,21,48,.06); }
.mkd-actionbar-in { display: flex; flex-direction: column; gap: var(--mkd-s2); align-items: stretch; }
.mkd-actionbar .mkd-btn-quiet { align-self: center; }
@media (min-width: 900px) {
  .mkd-actionbar-in { max-width: 420px; margin-inline: auto; }
}

/* Dialog (native element: it traps focus and closes with Escape) */
.mkd-dialog { border: 0; border-radius: var(--mkd-r-lg); padding: var(--mkd-pad); width: min(92vw, 420px); background: var(--mkd-surface); color: var(--mkd-ink); box-shadow: var(--mkd-shadow-lift); font: inherit; }
.mkd-dialog::backdrop { background: rgba(18,38,111,.55); }
.mkd-dialog.is-static { position: static; display: block; margin-inline: auto; }
.mkd-dialog[open] { animation: mkd-pop var(--mkd-dur-2) var(--mkd-ease-out); }
.mkd-dialog[open]::backdrop { animation: mkd-fade var(--mkd-dur-2) var(--mkd-ease-out); }
.mkd-dialog.is-closing { animation: mkd-pop-out var(--mkd-dur-1) ease-in forwards; }
.mkd-dialog.is-closing::backdrop { animation: mkd-fade-out var(--mkd-dur-1) ease-in forwards; }
.mkd-dialog.is-sheet { box-shadow: var(--mkd-elev-overlay); }
@media (max-width: 599px) {
  .mkd-dialog.is-sheet:not(.is-static) { width: 100%; max-width: none; margin: auto 0 0; border-radius: var(--mkd-r-lg) var(--mkd-r-lg) 0 0; padding-bottom: calc(var(--mkd-pad) + env(safe-area-inset-bottom, 0px)); }
  .mkd-dialog.is-sheet[open] { animation: mkd-sheet-up var(--mkd-dur-2) var(--mkd-ease-out); }
  .mkd-dialog.is-sheet.is-closing { animation: mkd-sheet-down var(--mkd-dur-1) ease-in forwards; }
}
.mkd-dialog .mkd-stack { --mkd-gap: var(--mkd-s4); }

/* Empty, loading and error states: same frame, so a screen never jumps */
.mkd-state { text-align: center; padding: var(--mkd-s6) var(--mkd-s4); border-radius: var(--mkd-r-lg); background: var(--mkd-surface); border: 1px dashed var(--mkd-edge); }
.mkd-state > * + * { margin-top: var(--mkd-s3); }
.mkd-state-icon { width: 64px; height: 64px; border-radius: 50%; margin-inline: auto; display: grid; place-items: center; background: var(--mkd-tint); color: var(--mkd-brand-deep); font-family: var(--mkd-font-display); font-weight: 800; font-size: 1.75rem; }
.mkd-state.is-error { border-style: solid; border-color: var(--mkd-danger); background: var(--mkd-danger-tint); }
.mkd-state.is-error .mkd-state-icon { background: var(--mkd-danger); color: var(--mkd-danger-on); }
.mkd-skel { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, #E8E2F2 25%, #F4F0FA 50%, #E8E2F2 75%); background-size: 200% 100%; animation: mkd-shimmer 1.4s linear infinite; }
@keyframes mkd-shimmer { to { background-position: -200% 0; } }
.mkd-spinner { width: 40px; height: 40px; margin-inline: auto; border-radius: 50%; border: 5px solid var(--mkd-rule); border-top-color: var(--mkd-brand); animation: mkd-spin .9s linear infinite; }

/* Segmented switch (used by reviewer bars and tabs) */
.mkd-seg { display: flex; gap: 4px; padding: 4px; background: var(--mkd-tint); border-radius: var(--mkd-r-pill); }
.mkd-seg > button { flex: 1 1 0; min-height: 44px; padding: 0 var(--mkd-s3); border: 0; border-radius: var(--mkd-r-pill); background: transparent; color: var(--mkd-navy); font-family: var(--mkd-font-display); font-weight: 700; font-size: 1rem; cursor: pointer; line-height: 1.1; }
.mkd-seg > button:hover { background: #E4DAF6; }
.mkd-seg > button[aria-pressed="true"], .mkd-seg > button[aria-selected="true"] { background: var(--mkd-brand); color: var(--mkd-brand-on); }

/* Reviewer bar: only on design pages, never part of a product screen.
   One slim row; the switches open under it so the screen below keeps its real height. */
.mkd-review { background: var(--mkd-navy); color: var(--mkd-navy-on); }
.mkd-review-in { display: flex; align-items: center; justify-content: space-between; gap: var(--mkd-s3); min-height: 56px; padding-block: var(--mkd-s2); }
.mkd-review a { color: var(--mkd-navy-on); font-weight: 700; font-size: var(--mkd-fs-small); white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; }
.mkd-review-toggle { min-height: 44px; padding: 0 var(--mkd-s3); border: 2px solid #8D93C4; border-radius: var(--mkd-r-pill); background: transparent; color: var(--mkd-navy-on); font-family: var(--mkd-font-display); font-weight: 700; font-size: var(--mkd-fs-small); cursor: pointer; white-space: nowrap; }
.mkd-review-toggle:hover, .mkd-review-toggle[aria-expanded="true"] { background: rgba(255,255,255,.14); }
.mkd-review-panel { padding-bottom: var(--mkd-s4); display: grid; gap: var(--mkd-s2); }
.mkd-review-panel[hidden] { display: none; }
.mkd-review .mkd-seg { background: rgba(255,255,255,.14); }
.mkd-review .mkd-seg > button { color: var(--mkd-navy-on); }
.mkd-review .mkd-seg > button:hover { background: rgba(255,255,255,.18); }
.mkd-review .mkd-seg > button[aria-pressed="true"] { background: var(--mkd-caution); color: var(--mkd-caution-on); }
.mkd-review-label { font-size: var(--mkd-fs-small); font-weight: 700; color: #D8D3F0; margin: var(--mkd-s1) 0 0; }

/* The Field: numbered balls. Each ball shows its own number. The Field
   shows the question (the groups), never the total. */
.mkd-board { --mkd-lad-gap: var(--mkd-navy); --mkd-lad-ring: var(--mkd-hero-soft); --mkd-lad-num: var(--mkd-hero-soft); background: var(--mkd-navy); border-radius: var(--mkd-r-lg); padding: var(--mkd-s4) var(--mkd-s3); color: var(--mkd-navy-on); }
.mkd-balls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--mkd-s3) var(--mkd-s3); }
[data-group="little"] .mkd-balls { flex-direction: column; gap: var(--mkd-s2); }
.mkd-btn-voice.is-icon svg { width: 30px; height: 30px; }
.mkd-ballgroup { display: grid; grid-template-columns: repeat(var(--cols, 5), var(--mkd-ball)); gap: var(--mkd-s2); justify-content: center; }
.mkd-ball { position: relative; width: var(--mkd-ball); height: var(--mkd-ball); border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mkd-font-display); font-weight: 800; font-size: var(--mkd-ball-fs); line-height: 1;
  background-image: radial-gradient(circle at 30% 24%, rgba(255,255,255,.34), rgba(255,255,255,0) 40%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.20), inset 0 -4px 6px rgba(0,0,0,.22), 0 3px 6px rgba(0,0,0,.28); }
.mkd-ball::after { content: ""; position: absolute; left: 20%; top: 11%; width: 30%; height: 17%; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0)); pointer-events: none; transform: rotate(-28deg); }   /* the glint, clear of the number */
.mkd-ball.is-a { background-color: var(--mkd-ball-purple); color: #FFFFFF; }
.mkd-ball.is-b { background-color: var(--mkd-caution); color: var(--mkd-caution-on); }
.mkd-ball.is-ghost { background: transparent; color: #D8D3F0; box-shadow: inset 0 0 0 2px #8D93C4; }
.mkd-ball.is-ghost::after { content: none; }
.mkd-ballplus { font-family: var(--mkd-font-display); font-weight: 800; font-size: 2rem; color: #FFFFFF; line-height: 1; }
.mkd-board-cap { margin: var(--mkd-s4) 0 0; text-align: center; font-size: var(--mkd-fs-small); color: #D8D3F0; }

/* Answer slot and keypad (diagnosis) */
.mkd-answer { display: grid; place-items: center; min-height: 64px; border-radius: var(--mkd-r-md); background: var(--mkd-surface); border: 3px dashed var(--mkd-edge); font-family: var(--mkd-font-display); font-weight: 800; font-size: 2.25rem; color: var(--mkd-navy); }
.mkd-answer.is-filled { border-style: solid; border-color: var(--mkd-brand); }
.mkd-keypad { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--mkd-s2); }
.mkd-key { min-height: var(--mkd-target); border: 2px solid var(--mkd-edge); border-radius: var(--mkd-r-sm); background: var(--mkd-surface); color: var(--mkd-navy); font-family: var(--mkd-font-display); font-weight: 800; font-size: 1.5rem; cursor: pointer; }
.mkd-key:hover { border-color: var(--mkd-brand); background: var(--mkd-tint); }
.mkd-key:active { transform: translateY(2px); background: #E4DAF6; }
.mkd-key.is-wide { font-size: 1rem; }
[data-group="little"] .mkd-key { font-size: 1.875rem; }

/* Voice bubble: the words that are spoken, shown as captions */
.mkd-voicebubble { display: flex; gap: var(--mkd-s3); align-items: flex-start; background: var(--mkd-caution-tint); border-radius: var(--mkd-r-md); padding: var(--mkd-s3) var(--mkd-s4); color: var(--mkd-ink); }
.mkd-voicebubble svg { width: 24px; height: 24px; flex: none; margin-top: 2px; color: var(--mkd-caution-text); }

/* Ladder strip: the 33 steps as small cells, coloured by state, always with a text twin */
.mkd-ladder { --mkd-ladder-cols: 11; display: grid; grid-template-columns: repeat(var(--mkd-ladder-cols), 1fr); gap: 4px; margin: 0; padding: 0; list-style: none; }
.mkd-ladder > li { aspect-ratio: 1; border-radius: 6px; background: #ECEAF1; display: grid; place-items: center; font-size: 14px; font-weight: 800; font-family: var(--mkd-font-display); color: var(--mkd-ink-soft); }
.mkd-ladder > li.is-strong { background: var(--mkd-success); color: #FFFFFF; }
.mkd-ladder > li.is-repair { background: var(--mkd-caution); color: var(--mkd-caution-on); }
.mkd-ladder > li.is-here { background: var(--mkd-brand); color: #FFFFFF; box-shadow: 0 0 0 3px var(--mkd-surface), 0 0 0 5px var(--mkd-brand); }

/* ------------------------------------------------------- 3. THE PAGE SHELLS
   Adult page:  .mkd-topbar, .mkd-page (or .mkd-page.is-wide), cards, .mkd-actionbar
   Child page:  .mkd-topbar.is-child, .mkd-stage, .mkd-actionbar
   Auth page:   .mkd-auth, .mkd-auth-head, one .mkd-card, .mkd-cta
   The main button of every screen carries the attribute data-main-action. */

/* Page body: the vertical space around a page's content. */
.mkd-body { padding-block: var(--mkd-s5); }

/* Top bar links: Back, Home, Sign out. Quiet pill, never the main action. */
.mkd-toplink { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 var(--mkd-s3); border-radius: var(--mkd-r-pill); background: var(--mkd-tint); color: var(--mkd-navy); font-family: var(--mkd-font-display); font-weight: 700; font-size: var(--mkd-fs-small); text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; }
.mkd-toplink:hover { background: var(--mkd-tint-deep); }
.mkd-topbar .mkd-toplink { background: var(--mkd-top-link-bg); color: var(--mkd-top-ink); border: 1px solid var(--mkd-top-link-edge); }
.mkd-topbar .mkd-toplink:hover { background: var(--mkd-top-link-hover); }
.mkd-topbar :is(a, button):focus-visible { outline: 3px solid var(--mkd-focus-dark); outline-offset: 3px; }
.mkd-toplink.is-back { padding-inline: var(--mkd-s3) var(--mkd-s4); }
.mkd-topbar .mkd-toplink:empty { display: none; }   /* never an empty pill */
.mkd-topbar-end { display: flex; align-items: center; gap: var(--mkd-s2); flex: none; }
.mkd-topbar-start { display: flex; align-items: center; gap: var(--mkd-s2); flex: none; min-width: 0; }

/* Child top strip: small M, progress dots in the middle, Pause at the end. */
.mkd-topbar.is-child .mkd-topbar-in { gap: var(--mkd-s3); }
.mkd-topbar.is-child .mkd-dots { flex: 1 1 auto; }
/* the child strip is the same shade; its dots are re-inked for navy (the done purple would be 2.3 to 1) */
.mkd-topbar .mkd-dots > li { background: transparent; border-color: var(--mkd-top-ink-soft); }
.mkd-topbar .mkd-dots > li.is-done { background: var(--mkd-ball-lit); border-color: var(--mkd-ball-lit); }
.mkd-topbar .mkd-dots > li.is-now { background: var(--mkd-caution); border-color: var(--mkd-top-ink); }

/* Child stage: the area between the strip and the bottom action area. */
.mkd-stage { padding-block: var(--mkd-s4); display: flex; flex-direction: column; gap: var(--mkd-s4); }
.mkd-stage.is-centered { justify-content: center; text-align: center; }

/* Auth card page */
.mkd-auth { padding-block: var(--mkd-s4) var(--mkd-s7); background: linear-gradient(180deg, #EFE8FB 0, var(--mkd-ground) 260px); }
.mkd-auth-head { text-align: center; margin-bottom: var(--mkd-s4); }
.mkd-auth-head .mkd-p { margin-inline: auto; margin-top: var(--mkd-s2); }
.mkd-auth-mark { display: block; width: 56px; height: 56px; margin: 0 auto var(--mkd-s2); border-radius: 16px; }
.mkd-or { display: flex; align-items: center; gap: var(--mkd-s3); color: var(--mkd-ink-soft); font-size: var(--mkd-fs-small); font-weight: 700; }
.mkd-or::before, .mkd-or::after { content: ""; flex: 1; height: 1px; background: var(--mkd-edge); opacity: .5; }
.mkd-field-end { display: flex; justify-content: flex-end; margin-top: var(--mkd-s1); }
.mkd-field-end .mkd-btn-quiet { margin-right: calc(-1 * var(--mkd-s3)); }
/* The main button of a long form: it sticks near the foot of the screen
   while the form is taller than the screen, and sits in place otherwise. */
.mkd-cta { position: sticky; bottom: 8px; padding-top: var(--mkd-s2); background: linear-gradient(rgba(255,255,255,0), #FFFFFF 30%); margin-bottom: -4px; z-index: 5; }

/* ================================================================ 4. v0.3
   Everything below is added beside the rules above. A class that is new has an
   mkd- name; nothing here restyles a bare element. Every effect is complete at
   rest (a tick is drawn, a ring is filled, a list is visible) and the motion
   only plays when a class asks for it, so a page without mk-motion.js still
   shows the finished screen. The last block of the file switches all motion off. */

/* ---- 4a. The hero ground and the two accents
   One hero block per screen: the auth header, the home child card, the plan
   card, the weekly-note header. It is the navy of the Field running to a deep
   navy, with a soft glow of the brand purple. */
.mkd-hero { --mkd-lad-gap: var(--mkd-navy); --mkd-lad-ring: var(--mkd-hero-soft); --mkd-lad-num: var(--mkd-hero-soft); position: relative; background: var(--mkd-glow-hero), var(--mkd-grad-hero); background-color: var(--mkd-navy); color: var(--mkd-navy-on); border-radius: var(--mkd-r-lg); padding: var(--mkd-pad); box-shadow: var(--mkd-elev-hero); }
.mkd-hero :is(.mkd-h1, .mkd-h2, .mkd-display, .mkd-num, .mkd-stat-num, .mkd-ring-num) { color: var(--mkd-navy-on); }
.mkd-hero .mkd-ring-unit { color: var(--mkd-hero-soft); }
.mkd-hero .mkd-soft { color: var(--mkd-hero-soft); }
.mkd-hero .mkd-eyebrow { color: var(--mkd-caution); }
.mkd-hero :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: var(--mkd-focus-dark); }
.mkd-hero a { color: var(--mkd-navy-on); }
.mkd-hero.is-bleed { border-radius: 0 0 var(--mkd-r-lg) var(--mkd-r-lg); box-shadow: var(--mkd-elev-hero); }
/* The landing's warm gradient on ONE word or number per screen. It has two
   inks: the bright one for a dark ground, and .is-light for a light ground.
   The plain colour is kept as the fallback and for the audit. */
.mkd-gradtext { color: var(--mkd-caution); background-image: var(--mkd-grad-text); background-color: transparent; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mkd-gradtext.is-light { color: var(--mkd-gradtext-ink); background-image: var(--mkd-grad-text-light); }
/* Gold is the accent for today and for the current level, nowhere else. */
.mkd-chip.is-today, .mkd-chip.is-level { background: var(--mkd-caution); color: var(--mkd-caution-on); }
.mkd-glow-gold { box-shadow: 0 0 0 3px var(--mkd-surface), 0 0 0 5px var(--mkd-caution), 0 0 16px 2px rgba(255,198,26,.6); }

/* ---- 4b. Buttons: danger, small, quiet block */
.mkd-btn-danger { background: var(--mkd-danger); color: var(--mkd-danger-on); box-shadow: var(--mkd-gloss), 0 4px 0 var(--mkd-danger-press); margin-bottom: 4px; }
.mkd-btn-danger:hover, .mkd-btn-danger.is-hover { background: var(--mkd-danger-hover); }
.mkd-btn-danger:active, .mkd-btn-danger.is-pressed { transform: translateY(4px); box-shadow: var(--mkd-gloss), 0 0 0 var(--mkd-danger-press); background: var(--mkd-danger-hover); }
.mkd-btn-danger.is-outline { background: var(--mkd-surface); color: var(--mkd-danger); border-color: var(--mkd-danger); box-shadow: 0 3px 0 var(--mkd-danger-tint); margin-bottom: 3px; }
.mkd-btn-danger.is-outline:hover, .mkd-btn-danger.is-outline.is-hover { background: var(--mkd-danger-tint); }
.mkd-btn-danger.is-outline:active, .mkd-btn-danger.is-outline.is-pressed { transform: translateY(3px); box-shadow: 0 0 0 var(--mkd-danger-tint); background: var(--mkd-danger-tint); }
.mkd-btn.mkd-btn-danger:disabled, .mkd-btn.mkd-btn-danger.is-disabled { background: var(--mkd-action-off); color: var(--mkd-action-off-on); border-color: transparent; box-shadow: none; transform: none; }
.mkd-btn-quiet.is-danger { color: var(--mkd-danger); }
.mkd-btn.is-small:not(.mkd-btn-quiet) { min-height: var(--mkd-target); padding: 0 var(--mkd-s4); font-size: var(--mkd-fs-small); }
.mkd-btn-quiet.is-block { justify-content: center; min-height: var(--mkd-target); }
.mkd-btn-quiet.is-fill { background: var(--mkd-tint); text-decoration: none; border-radius: var(--mkd-r-pill); font-family: var(--mkd-font-display); }
.mkd-btn-quiet.is-fill:hover { background: var(--mkd-tint-deep); }

/* ---- 4c. Tick box and radio row. The input is the whole tap area (invisible,
   on top); the drawn box is --mkd-box. A real input, so it works by keyboard
   and with a screen reader. Markup:
   label.mkd-check > input[type=checkbox] + span.mkd-check-box + span.mkd-check-text */
.mkd-check, .mkd-radio { position: relative; display: flex; align-items: center; gap: var(--mkd-s3); min-height: var(--mkd-target); cursor: pointer; line-height: var(--mkd-lh-body); -webkit-tap-highlight-color: transparent; }
.mkd-check > input, .mkd-radio > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.mkd-check-box, .mkd-radio-box { flex: none; display: grid; place-items: center; width: var(--mkd-box); height: var(--mkd-box); border: 2px solid var(--mkd-edge); background: var(--mkd-surface); transition: background-color var(--mkd-dur-2) var(--mkd-ease-out), border-color var(--mkd-dur-2) var(--mkd-ease-out), transform var(--mkd-dur-1) var(--mkd-ease-out); }
.mkd-check-box { border-radius: var(--mkd-s2); }
.mkd-radio-box { border-radius: 50%; }
.mkd-check-box::after { content: ""; width: 30%; height: 54%; border: solid var(--mkd-brand-on); border-width: 0 3px 3px 0; transform: translateY(-8%) rotate(45deg) scale(0); transition: transform var(--mkd-dur-2) var(--mkd-ease-out); }
.mkd-radio-box::after { content: ""; width: 46%; height: 46%; border-radius: 50%; background: var(--mkd-brand-on); transform: scale(0); transition: transform var(--mkd-dur-2) var(--mkd-ease-out); }
.mkd-check > input:checked + .mkd-check-box, .mkd-radio > input:checked + .mkd-radio-box, .mkd-check.is-on .mkd-check-box, .mkd-radio.is-on .mkd-radio-box { background: var(--mkd-brand); border-color: var(--mkd-brand); }
.mkd-check > input:checked + .mkd-check-box::after, .mkd-check.is-on .mkd-check-box::after { transform: translateY(-8%) rotate(45deg) scale(1); }
.mkd-radio > input:checked + .mkd-radio-box::after, .mkd-radio.is-on .mkd-radio-box::after { transform: scale(1); }
.mkd-check:hover .mkd-check-box, .mkd-radio:hover .mkd-radio-box, .mkd-check.is-hover .mkd-check-box, .mkd-radio.is-hover .mkd-radio-box { border-color: var(--mkd-brand); }
.mkd-check > input:focus-visible + .mkd-check-box, .mkd-radio > input:focus-visible + .mkd-radio-box, .mkd-check.is-focus .mkd-check-box, .mkd-radio.is-focus .mkd-radio-box { outline: 3px solid var(--mkd-focus); outline-offset: 3px; box-shadow: var(--mkd-focus-glow); }
.mkd-check:active .mkd-check-box, .mkd-radio:active .mkd-radio-box, .mkd-check.is-pressed .mkd-check-box, .mkd-radio.is-pressed .mkd-radio-box { transform: scale(.92); }
.mkd-check > input:disabled + .mkd-check-box, .mkd-radio > input:disabled + .mkd-radio-box, .mkd-check.is-disabled .mkd-check-box, .mkd-radio.is-disabled .mkd-radio-box { background: var(--mkd-action-off); border-color: var(--mkd-rule); }
.mkd-check > input:disabled:checked + .mkd-check-box::after { border-color: var(--mkd-action-off-on); }
.mkd-radio > input:disabled:checked + .mkd-radio-box::after { background: var(--mkd-action-off-on); }
.mkd-check:has(> input:disabled), .mkd-radio:has(> input:disabled), .mkd-check.is-disabled, .mkd-radio.is-disabled { cursor: not-allowed; color: var(--mkd-ink-soft); }
.mkd-check > input[aria-invalid="true"] + .mkd-check-box, .mkd-radio > input[aria-invalid="true"] + .mkd-radio-box, .mkd-check.is-invalid .mkd-check-box, .mkd-radio.is-invalid .mkd-radio-box { border-color: var(--mkd-danger); background: var(--mkd-danger-tint); }
.mkd-check > input[aria-invalid="true"]:checked + .mkd-check-box, .mkd-radio > input[aria-invalid="true"]:checked + .mkd-radio-box { background: var(--mkd-danger); }
.mkd-check-text { min-width: 0; }
/* A bordered row version, for a list of ticks or a pick of one */
.mkd-check.is-focus, .mkd-radio.is-focus, .mkd-switch.is-focus, .mkd-choicechip.is-focus { outline: 0; }   /* the ring is drawn on the box, not the whole row */
.mkd-check.is-row, .mkd-radio.is-row { padding: var(--mkd-s3) var(--mkd-s4); border: 2px solid var(--mkd-edge); border-radius: var(--mkd-r-md); background: var(--mkd-surface); transition: border-color var(--mkd-dur-2) var(--mkd-ease-out), background-color var(--mkd-dur-2) var(--mkd-ease-out); }
.mkd-check.is-row:hover, .mkd-radio.is-row:hover { border-color: var(--mkd-brand); }
.mkd-check.is-row:has(> input:checked), .mkd-radio.is-row:has(> input:checked) { border-color: var(--mkd-brand); background: var(--mkd-tint); }
.mkd-choices { display: flex; flex-wrap: wrap; gap: var(--mkd-s2); }

/* ---- 4d. On/off switch. Markup:
   label.mkd-switch > span.mkd-switch-text + input[type=checkbox][role=switch] + span.mkd-switch-track
   or a button: button.mkd-toggle[role=switch][aria-checked] (the page flips aria-checked). */
.mkd-switch { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--mkd-s4); min-height: var(--mkd-target); cursor: pointer; }
.mkd-switch > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.mkd-switch-text { flex: 1 1 auto; min-width: 0; font-weight: 700; }
.mkd-switch-track { position: relative; flex: none; width: var(--mkd-switch-w); height: var(--mkd-switch-h); border-radius: var(--mkd-r-pill); background: var(--mkd-edge); transition: background-color var(--mkd-dur-2) var(--mkd-ease-out); }
.mkd-switch-track::after, .mkd-toggle::after { content: ""; position: absolute; left: 3px; top: 50%; width: var(--mkd-thumb); height: var(--mkd-thumb); margin-top: calc(var(--mkd-thumb) / -2); border-radius: 50%; background: var(--mkd-surface); box-shadow: var(--mkd-elev-rest); transition: transform var(--mkd-dur-2) var(--mkd-ease-out); }
.mkd-switch > input:checked + .mkd-switch-track, .mkd-switch.is-on .mkd-switch-track { background: var(--mkd-success); }
.mkd-switch > input:checked + .mkd-switch-track::after, .mkd-switch.is-on .mkd-switch-track::after { transform: translateX(calc(var(--mkd-switch-w) - var(--mkd-thumb) - 6px)); }
.mkd-switch:hover .mkd-switch-track, .mkd-switch.is-hover .mkd-switch-track { box-shadow: 0 0 0 3px var(--mkd-tint-deep); }
.mkd-switch > input:focus-visible + .mkd-switch-track, .mkd-switch.is-focus .mkd-switch-track { outline: 3px solid var(--mkd-focus); outline-offset: 3px; }
.mkd-switch > input:disabled + .mkd-switch-track, .mkd-switch.is-disabled .mkd-switch-track { background: var(--mkd-action-off); }
.mkd-switch:has(> input:disabled), .mkd-switch.is-disabled { cursor: not-allowed; color: var(--mkd-ink-soft); }
.mkd-switch > input[aria-invalid="true"] + .mkd-switch-track, .mkd-switch.is-invalid .mkd-switch-track { box-shadow: 0 0 0 3px var(--mkd-danger); }
.mkd-toggle { position: relative; flex: none; width: calc(var(--mkd-switch-w) + var(--mkd-s1)); height: var(--mkd-target); padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mkd-toggle::before { content: ""; position: absolute; left: 0; top: 50%; width: var(--mkd-switch-w); height: var(--mkd-switch-h); margin-top: calc(var(--mkd-switch-h) / -2); border-radius: var(--mkd-r-pill); background: var(--mkd-edge); transition: background-color var(--mkd-dur-2) var(--mkd-ease-out); }
.mkd-toggle::after { left: 3px; }
.mkd-toggle[aria-checked="true"]::before, .mkd-toggle.is-on::before { background: var(--mkd-success); }
.mkd-toggle[aria-checked="true"]::after, .mkd-toggle.is-on::after { transform: translateX(calc(var(--mkd-switch-w) - var(--mkd-thumb) - 6px)); }
.mkd-toggle:disabled::before { background: var(--mkd-action-off); }
.mkd-toggle:disabled { cursor: not-allowed; }

/* ---- 4e. Select with a caret, and the multi-line field */
.mkd-select { display: block; width: 100%; min-height: 52px; padding: 0 44px 0 var(--mkd-s4); -webkit-appearance: none; appearance: none; cursor: pointer;
  background-color: var(--mkd-surface); color: var(--mkd-ink); border: 2px solid var(--mkd-edge); border-radius: var(--mkd-r-sm); font: inherit; font-size: 1.0625rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2312266F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 20px;
  transition: border-color var(--mkd-dur-2) var(--mkd-ease-out), box-shadow var(--mkd-dur-2) var(--mkd-ease-out), background-color var(--mkd-dur-2) var(--mkd-ease-out); }
.mkd-select:hover, .mkd-select.is-hover { border-color: var(--mkd-brand); }
.mkd-select:focus-visible, .mkd-select.is-focus { outline: 3px solid var(--mkd-focus); outline-offset: 2px; border-color: var(--mkd-focus); box-shadow: var(--mkd-focus-glow); }
.mkd-select:active, .mkd-select.is-pressed { background-color: var(--mkd-tint); }
.mkd-select:disabled { background-color: var(--mkd-action-off); color: var(--mkd-action-off-on); border-color: var(--mkd-rule); cursor: not-allowed; }
.mkd-field.is-invalid .mkd-select, .mkd-select[aria-invalid="true"] { border-color: var(--mkd-danger); background-color: var(--mkd-danger-tint); }
.mkd-textarea { min-height: calc(var(--mkd-s8) + var(--mkd-s6)); padding-block: var(--mkd-s3); resize: vertical; }

/* ---- 4f. Selectable card (one of a few, with a picture or a price).
   label.mkd-choice > input + span.mkd-choice-tick + span.mkd-choice-body
   It is also a button when it carries aria-pressed or aria-checked. */
.mkd-choice { position: relative; display: flex; align-items: flex-start; gap: var(--mkd-s3); min-height: var(--mkd-target); padding: var(--mkd-s4); padding-right: calc(var(--mkd-s4) + var(--mkd-s6)); background: var(--mkd-surface); color: var(--mkd-ink); border: 2px solid var(--mkd-edge); border-radius: var(--mkd-r-md); box-shadow: var(--mkd-elev-rest); cursor: pointer; text-align: left; font: inherit; width: 100%;
  transition: border-color var(--mkd-dur-2) var(--mkd-ease-out), background-color var(--mkd-dur-2) var(--mkd-ease-out), transform var(--mkd-dur-1) var(--mkd-ease-out), box-shadow var(--mkd-dur-2) var(--mkd-ease-out); -webkit-tap-highlight-color: transparent; }
.mkd-choice > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.mkd-choice-body { display: flex; flex-direction: column; gap: var(--mkd-s1); min-width: 0; flex: 1 1 auto; }
.mkd-choice-title { font-family: var(--mkd-font-display); font-weight: 800; color: var(--mkd-navy); line-height: 1.2; }
.mkd-choice-sub { font-size: var(--mkd-fs-small); color: var(--mkd-ink-soft); }
.mkd-choice-tick { position: absolute; top: var(--mkd-s4); right: var(--mkd-s4); width: var(--mkd-s5); height: var(--mkd-s5); border-radius: 50%; border: 2px solid var(--mkd-edge); background: var(--mkd-surface); display: grid; place-items: center; transition: background-color var(--mkd-dur-2) var(--mkd-ease-out), border-color var(--mkd-dur-2) var(--mkd-ease-out); }
.mkd-choice-tick::after { content: ""; width: 30%; height: 55%; border: solid var(--mkd-brand-on); border-width: 0 3px 3px 0; transform: translateY(-8%) rotate(45deg) scale(0); transition: transform var(--mkd-dur-2) var(--mkd-ease-out); }
.mkd-choice:hover, .mkd-choice.is-hover { border-color: var(--mkd-brand); }
.mkd-choice:has(> input:focus-visible), .mkd-choice:focus-visible, .mkd-choice.is-focus { outline: 3px solid var(--mkd-focus); outline-offset: 3px; }
.mkd-choice:active, .mkd-choice.is-pressed { transform: scale(.985); }
.mkd-choice:has(> input:checked), .mkd-choice[aria-pressed="true"], .mkd-choice[aria-checked="true"], .mkd-choice.is-on { border-color: var(--mkd-brand); background: var(--mkd-tint); box-shadow: 0 0 0 1px var(--mkd-brand); }
.mkd-choice:has(> input:checked) .mkd-choice-tick, .mkd-choice[aria-pressed="true"] .mkd-choice-tick, .mkd-choice[aria-checked="true"] .mkd-choice-tick, .mkd-choice.is-on .mkd-choice-tick { background: var(--mkd-brand); border-color: var(--mkd-brand); }
.mkd-choice:has(> input:checked) .mkd-choice-tick::after, .mkd-choice[aria-pressed="true"] .mkd-choice-tick::after, .mkd-choice[aria-checked="true"] .mkd-choice-tick::after, .mkd-choice.is-on .mkd-choice-tick::after { transform: translateY(-8%) rotate(45deg) scale(1); }
.mkd-choice:has(> input:disabled), .mkd-choice:disabled, .mkd-choice.is-disabled { background: var(--mkd-action-off); color: var(--mkd-action-off-on); border-color: var(--mkd-rule); box-shadow: none; cursor: not-allowed; }
.mkd-choice:has(> input:disabled) :is(.mkd-choice-title, .mkd-choice-sub), .mkd-choice.is-disabled :is(.mkd-choice-title, .mkd-choice-sub) { color: var(--mkd-action-off-on); }
.mkd-choice:has(> input[aria-invalid="true"]), .mkd-choice.is-invalid { border-color: var(--mkd-danger); background: var(--mkd-danger-tint); }
/* A choice that is a chip: a radio or tick drawn as the kit chip */
.mkd-choicechip { position: relative; display: inline-flex; }
.mkd-choicechip > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mkd-choicechip > .mkd-chip { min-height: var(--mkd-target); padding: 0 var(--mkd-s4); border: 2px solid transparent; font-size: var(--mkd-fs-body); cursor: pointer; transition: background-color var(--mkd-dur-2) var(--mkd-ease-out), border-color var(--mkd-dur-2) var(--mkd-ease-out); }
.mkd-choicechip:hover > .mkd-chip, .mkd-choicechip.is-hover > .mkd-chip { border-color: var(--mkd-brand); }
.mkd-choicechip > input:checked + .mkd-chip, .mkd-choicechip.is-on > .mkd-chip { background: var(--mkd-brand); color: var(--mkd-brand-on); animation: mkd-select-pop var(--mkd-dur-2) var(--mkd-ease-spring); }
.mkd-choicechip > input:focus-visible + .mkd-chip, .mkd-choicechip.is-focus > .mkd-chip { outline: 3px solid var(--mkd-focus); outline-offset: 3px; }
.mkd-choicechip > input:disabled + .mkd-chip { background: var(--mkd-action-off); color: var(--mkd-action-off-on); cursor: not-allowed; }
button.mkd-chip[aria-pressed="true"], button.mkd-chip.is-on { animation: mkd-select-pop var(--mkd-dur-2) var(--mkd-ease-spring); }

/* ---- 4g. List row with a trailing action, and the button row */
.mkd-row { display: flex; align-items: center; }
.mkd-row > .mkd-listrow { flex: 1 1 auto; min-width: 0; }
.mkd-row > .mkd-row-action { flex: none; margin-right: var(--mkd-s3); }
.mkd-row:hover, .mkd-row:has(> .mkd-listrow.is-hover), .mkd-row:has(> .mkd-listrow.is-selected) { background: var(--mkd-tint); }
.mkd-row > button.mkd-listrow:hover, .mkd-row > button.mkd-listrow.is-hover { background: transparent; }
button.mkd-listrow { width: 100%; background: transparent; border: 0; font: inherit; text-align: left; cursor: pointer; }
button.mkd-listrow:hover, button.mkd-listrow.is-hover { background: var(--mkd-tint); }
button.mkd-listrow:active { background: var(--mkd-tint-deep); }
button.mkd-listrow:focus-visible { outline-offset: -3px; }
.mkd-listrow.is-selected { background: var(--mkd-tint); box-shadow: inset 4px 0 0 var(--mkd-brand); }

/* ---- 4h. Avatar tile, avatar card, stat tile, minutes ring, label and value */
.mkd-avatars { display: flex; flex-wrap: wrap; gap: var(--mkd-s2); }
.mkd-avatar { flex: none; display: grid; place-items: center; width: var(--mkd-target); height: var(--mkd-target); border-radius: var(--mkd-r-sm); background: var(--mkd-tint); color: var(--mkd-ink); font-size: 1.5rem; line-height: 1; border: 2px solid transparent; padding: 0; font-family: inherit; }
.mkd-avatar.is-lg { width: 72px; height: 72px; border-radius: var(--mkd-r-md); font-size: 2.25rem; }
button.mkd-avatar { cursor: pointer; transition: border-color var(--mkd-dur-2) var(--mkd-ease-out), background-color var(--mkd-dur-2) var(--mkd-ease-out), transform var(--mkd-dur-1) var(--mkd-ease-out); }
button.mkd-avatar:hover, button.mkd-avatar.is-hover { border-color: var(--mkd-brand); }
button.mkd-avatar:active, button.mkd-avatar.is-pressed { transform: scale(.94); }
button.mkd-avatar[aria-pressed="true"], button.mkd-avatar.is-on { border-color: var(--mkd-brand); background: var(--mkd-tint-deep); animation: mkd-select-pop var(--mkd-dur-2) var(--mkd-ease-spring); }
button.mkd-avatar:disabled { background: var(--mkd-action-off); cursor: not-allowed; opacity: .7; }
.mkd-avatarcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mkd-s3); }
.mkd-avatarcard { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--mkd-s2); min-height: 120px; padding: var(--mkd-s4); background: var(--mkd-surface); color: var(--mkd-ink); border: 2px solid transparent; border-radius: var(--mkd-r-lg); box-shadow: var(--mkd-elev-raised); font: inherit; text-align: center; cursor: pointer; text-decoration: none; transition: border-color var(--mkd-dur-2) var(--mkd-ease-out), transform var(--mkd-dur-1) var(--mkd-ease-out), box-shadow var(--mkd-dur-2) var(--mkd-ease-out); -webkit-tap-highlight-color: transparent; }
.mkd-avatarcard-name { font-family: var(--mkd-font-display); font-weight: 800; color: var(--mkd-navy); line-height: 1.15; overflow-wrap: anywhere; }
.mkd-avatarcard-sub { font-size: var(--mkd-fs-small); color: var(--mkd-ink-soft); }
.mkd-avatarcard:hover, .mkd-avatarcard.is-hover { border-color: var(--mkd-brand); }
.mkd-avatarcard:active, .mkd-avatarcard.is-pressed { transform: scale(.97); }
.mkd-avatarcard[aria-pressed="true"], .mkd-avatarcard.is-on { border-color: var(--mkd-brand); background: var(--mkd-tint); animation: mkd-select-pop var(--mkd-dur-2) var(--mkd-ease-spring); }
.mkd-avatarcard.is-add { background: transparent; box-shadow: none; border: 2px dashed var(--mkd-edge); color: var(--mkd-brand-deep); }
.mkd-avatarcard.is-add:hover { background: var(--mkd-tint); }

.mkd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: var(--mkd-s3); }
.mkd-stat { display: flex; flex-direction: column; align-items: flex-start; gap: var(--mkd-s1); min-width: 0; padding: var(--mkd-s4); background: var(--mkd-surface); border: 1px solid transparent; border-radius: var(--mkd-r-lg); box-shadow: var(--mkd-elev-raised); }
.mkd-stat.is-center { align-items: center; text-align: center; }
.mkd-stat.is-flat { background: transparent; box-shadow: none; padding: 0; }
.mkd-stat-num { font-family: var(--mkd-font-display); font-weight: 800; font-variant-numeric: tabular-nums; font-size: var(--mkd-fs-display); line-height: 1; color: var(--mkd-navy); }
.mkd-stat.is-big .mkd-stat-num { font-size: 4.5rem; }
.mkd-stat-label { font-size: var(--mkd-fs-small); color: var(--mkd-ink-soft); line-height: 1.3; }
.mkd-stat-unit { display: inline-block; padding: 2px var(--mkd-s3); border-radius: var(--mkd-r-pill); background: var(--mkd-caution); color: var(--mkd-caution-on); font-family: var(--mkd-font-display); font-weight: 800; font-size: var(--mkd-fs-small); line-height: 1.3; }
.mkd-hero .mkd-stat-label { color: var(--mkd-hero-soft); }

/* The minutes ring: the fill is --mkd-pct (0 to 100). A registered number so it can draw. */
@property --mkd-pct { syntax: '<number>'; inherits: true; initial-value: 0; }
.mkd-ring { --mkd-pct: 0; --mkd-ring-size: 84px; --mkd-ring-color: var(--mkd-success); position: relative; flex: none; display: grid; place-items: center; width: var(--mkd-ring-size); height: var(--mkd-ring-size); }
.mkd-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--mkd-ring-color) calc(var(--mkd-pct) * 1%), var(--mkd-rule) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--mkd-ring-w)), black calc(100% - var(--mkd-ring-w) + 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--mkd-ring-w)), black calc(100% - var(--mkd-ring-w) + 1px)); }
.mkd-ring.is-gold { --mkd-ring-color: var(--mkd-caution); }
.mkd-ring.is-brand { --mkd-ring-color: var(--mkd-brand); }
.mkd-ring.is-lg { --mkd-ring-size: 170px; --mkd-ring-w: 14px; }
.mkd-ring.is-draw::before { animation: mkd-ring-draw var(--mkd-dur-4) var(--mkd-ease-out); }
.mkd-ring-num { position: relative; display: flex; flex-direction: column; align-items: center; font-family: var(--mkd-font-display); font-weight: 800; font-size: 2rem; line-height: 1; color: var(--mkd-navy); font-variant-numeric: tabular-nums; }
.mkd-ring.is-lg .mkd-ring-num { font-size: 3rem; }
.mkd-ring-unit { font-family: var(--mkd-font-body); font-weight: 600; font-size: var(--mkd-fs-small); color: var(--mkd-ink-soft); }
.mkd-ringcard { display: flex; align-items: center; gap: var(--mkd-s4); }
.mkd-ringcard-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--mkd-s1); }

.mkd-kv { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--mkd-s1) var(--mkd-s4); padding-block: var(--mkd-s3); }
.mkd-kv + .mkd-kv { border-top: 1px solid var(--mkd-rule); }
.mkd-kv-label { color: var(--mkd-ink-soft); font-size: var(--mkd-fs-small); }
.mkd-kv-value { margin-left: auto; text-align: right; font-family: var(--mkd-font-display); font-weight: 800; color: var(--mkd-navy); overflow-wrap: anywhere; }
.mkd-panel { background: var(--mkd-tint); border-radius: var(--mkd-r-md); padding: var(--mkd-s4); }
.mkd-panel.is-caution { background: var(--mkd-caution-tint); color: var(--mkd-ink); }
.mkd-panel.is-success { background: var(--mkd-success-tint); }

/* ---- 4i. Hold to confirm: the button fills while it is held. The fill sits behind the words.
   The fill is --mkd-hold (0% to 100%), set by mk-motion.js or by the page's own timer. */
.mkd-hold { --mkd-hold: 0%; --mkd-hold-fill: var(--mkd-action-press); isolation: isolate; overflow: hidden; flex-direction: column; gap: var(--mkd-s1); touch-action: none; -webkit-user-select: none; user-select: none; }
.mkd-hold::after { content: ""; position: absolute; inset: 0; background: var(--mkd-hold-fill); z-index: -1; clip-path: inset(0 calc(100% - var(--mkd-hold)) 0 0); }
.mkd-hold.is-letgo::after { transition: clip-path var(--mkd-dur-2) var(--mkd-ease-out); }
.mkd-hold small { display: block; font-family: var(--mkd-font-body); font-weight: 600; font-size: var(--mkd-fs-small); }
.mkd-btn-danger.mkd-hold { --mkd-hold-fill: var(--mkd-danger-press); }
.mkd-btn-secondary.mkd-hold { --mkd-hold-fill: var(--mkd-tint-deep); }
.mkd-btn.mkd-hold.is-round { width: 140px; height: 140px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: conic-gradient(var(--mkd-brand) var(--mkd-hold), var(--mkd-rule) 0); color: var(--mkd-navy); box-shadow: none; margin: 0; }
.mkd-btn.mkd-hold.is-round::after { inset: 10px; border-radius: 50%; background: var(--mkd-surface); clip-path: none; }
.mkd-hold.is-done { --mkd-hold: 100%; }

/* ---- 4j. The PIN pad: three columns and the dots */
.mkd-pindots { display: flex; justify-content: center; gap: var(--mkd-s3); list-style: none; margin: 0; padding: 0; }
.mkd-pindots > li { width: calc(var(--mkd-box) * .65); height: calc(var(--mkd-box) * .65); border-radius: 50%; border: 2px solid var(--mkd-edge); background: var(--mkd-surface); transition: background-color var(--mkd-dur-1) var(--mkd-ease-out), border-color var(--mkd-dur-1) var(--mkd-ease-out), transform var(--mkd-dur-2) var(--mkd-ease-out); }
.mkd-pindots > li.is-on { background: var(--mkd-brand); border-color: var(--mkd-brand); transform: scale(1.12); }
.mkd-pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mkd-s2); width: 100%; max-width: 300px; margin-inline: auto; }
.mkd-pinpad .mkd-key { min-height: var(--mkd-btn-h); }
.mkd-pinpad .mkd-key.is-blank { visibility: hidden; }
.mkd-key.is-pressed { transform: translateY(2px); background: var(--mkd-tint-deep); }
.mkd-pin.is-error .mkd-pindots { animation: mkd-shake var(--mkd-dur-2) var(--mkd-ease-out); }
.mkd-pin.is-error .mkd-pindots > li { border-color: var(--mkd-danger); background: var(--mkd-danger-tint); }

/* ---- 4k. Steps: adult wizard dots, the stepper, tabs */
.mkd-wizdots { display: flex; justify-content: center; align-items: center; gap: var(--mkd-s2); list-style: none; margin: 0; padding: 0; }
.mkd-wizdots > li { width: 10px; height: 10px; border-radius: var(--mkd-r-pill); background: var(--mkd-tint-deep); box-shadow: inset 0 0 0 2px var(--mkd-edge); transition: width var(--mkd-dur-2) var(--mkd-ease-out), background-color var(--mkd-dur-2) var(--mkd-ease-out), box-shadow var(--mkd-dur-2) var(--mkd-ease-out); }
.mkd-wizdots > li.is-done { background: var(--mkd-brand); box-shadow: none; }
.mkd-wizdots > li.is-now { width: 28px; background: var(--mkd-brand); box-shadow: none; }
.mkd-stepper { display: flex; list-style: none; margin: 0; padding: 0; counter-reset: mkd-step; }
.mkd-stepper > li { flex: 1 1 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--mkd-s1); text-align: center; font-size: var(--mkd-fs-small); color: var(--mkd-ink-soft); font-weight: 700; counter-increment: mkd-step; min-width: 0; }
.mkd-stepper > li::before { content: counter(mkd-step); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--mkd-tint); color: var(--mkd-ink-soft); font-family: var(--mkd-font-display); font-weight: 800; position: relative; z-index: 1; transition: background-color var(--mkd-dur-2) var(--mkd-ease-out), color var(--mkd-dur-2) var(--mkd-ease-out); }
.mkd-stepper > li::after { content: ""; position: absolute; top: 17px; left: calc(-50% + 18px); right: calc(50% + 18px); height: 3px; background: var(--mkd-rule); }
.mkd-stepper > li:first-child::after { content: none; }
.mkd-stepper > li.is-done, .mkd-stepper > li.is-now { color: var(--mkd-ink); }
.mkd-stepper > li.is-done::before { content: "\2713"; background: var(--mkd-brand); color: var(--mkd-brand-on); }
.mkd-stepper > li.is-done::after, .mkd-stepper > li.is-now::after { background: var(--mkd-brand); }
.mkd-stepper > li.is-now::before { background: var(--mkd-caution); color: var(--mkd-caution-on); box-shadow: 0 0 0 4px var(--mkd-caution-tint); }
.mkd-tabs { display: flex; gap: var(--mkd-s1); border-bottom: 2px solid var(--mkd-rule); overflow-x: auto; }
.mkd-tabs > [role="tab"] { flex: 0 0 auto; min-height: var(--mkd-target); padding: 0 var(--mkd-s4); background: transparent; border: 0; border-bottom: 4px solid transparent; margin-bottom: -2px; border-radius: var(--mkd-r-sm) var(--mkd-r-sm) 0 0; font-family: var(--mkd-font-display); font-weight: 700; font-size: var(--mkd-fs-body); color: var(--mkd-ink-soft); cursor: pointer; transition: color var(--mkd-dur-2) var(--mkd-ease-out), border-color var(--mkd-dur-2) var(--mkd-ease-out), background-color var(--mkd-dur-2) var(--mkd-ease-out); }
.mkd-tabs > [role="tab"]:hover, .mkd-tabs > [role="tab"].is-hover { background: var(--mkd-tint); color: var(--mkd-ink); }
.mkd-tabs > [role="tab"][aria-selected="true"] { color: var(--mkd-navy); border-bottom-color: var(--mkd-brand); }
.mkd-tabs > [role="tab"]:focus-visible { outline: 3px solid var(--mkd-focus); outline-offset: -3px; }
.mkd-tabs > [role="tab"]:disabled { color: var(--mkd-action-off-on); opacity: .6; cursor: not-allowed; }
.mkd-tabpanel { padding-top: var(--mkd-s4); }

/* ---- 4l. A scroll box with a visible edge fade (a wide chart or table),
   and the table that goes inside it. Give the box tabindex="0" and an aria-label
   so the keyboard can scroll it. The fade appears only on the side that has more. */
.mkd-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; border-radius: var(--mkd-r-md);
  background:
    linear-gradient(to right, var(--mkd-surface) 30%, rgba(255,255,255,0)) left center / 32px 100% no-repeat local,
    linear-gradient(to left, var(--mkd-surface) 30%, rgba(255,255,255,0)) right center / 32px 100% no-repeat local,
    linear-gradient(to right, rgba(27,21,48,.22), rgba(27,21,48,0)) left center / 16px 100% no-repeat scroll,
    linear-gradient(to left, rgba(27,21,48,.22), rgba(27,21,48,0)) right center / 16px 100% no-repeat scroll; }
.mkd-scroll-in { min-width: 560px; }
.mkd-table { width: 100%; border-collapse: collapse; font-size: var(--mkd-fs-small); }
.mkd-table th { text-align: left; font-family: var(--mkd-font-display); font-weight: 800; color: var(--mkd-ink-soft); padding: var(--mkd-s2) var(--mkd-s3); border-bottom: 2px solid var(--mkd-rule); vertical-align: bottom; }
.mkd-table td { padding: var(--mkd-s3); border-top: 1px solid var(--mkd-rule); color: var(--mkd-ink); }
.mkd-table td:first-child { font-family: var(--mkd-font-display); font-weight: 800; color: var(--mkd-navy); }
.mkd-table tbody tr:first-child td { border-top: 0; }
@media (max-width: 599px) {
  .mkd-table.is-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mkd-table.is-stack, .mkd-table.is-stack tbody, .mkd-table.is-stack tr, .mkd-table.is-stack td { display: block; }
  .mkd-table.is-stack tr { border-top: 1px solid var(--mkd-rule); padding: var(--mkd-s3) 0; }
  .mkd-table.is-stack tbody tr:first-child { border-top: 0; }
  .mkd-table.is-stack td { display: flex; justify-content: space-between; gap: var(--mkd-s4); border: 0; padding: var(--mkd-s1) 0; }
  .mkd-table.is-stack td::before { content: attr(data-label); color: var(--mkd-ink-soft); font-weight: 600; }
  .mkd-table.is-stack td:first-child::before { content: none; }
  .mkd-table.is-stack td:first-child { font-size: var(--mkd-fs-body); padding-bottom: var(--mkd-s2); }
}

/* ---- 4m. Data pictures: the stacked bar (with its legend in words), the
   timeline with the gold marker, the 33-step ladder in gold */
.mkd-stackbar { display: flex; gap: 2px; height: 16px; border-radius: var(--mkd-r-pill); overflow: hidden; background: var(--mkd-ahead); }
.mkd-stackbar > * { flex: 1 1 0; min-width: 0; }
.mkd-stackbar > .is-strong { background: var(--mkd-success); }
.mkd-stackbar > .is-repair { background: var(--mkd-caution); }
.mkd-stackbar > .is-ahead { background: var(--mkd-ahead); }
.mkd-legend { display: flex; flex-wrap: wrap; gap: var(--mkd-s1) var(--mkd-s4); list-style: none; margin: 0; padding: 0; font-size: var(--mkd-fs-small); }
.mkd-legend > li { display: inline-flex; align-items: center; gap: var(--mkd-s2); }
.mkd-legend > li::before { content: ""; width: 12px; height: 12px; border-radius: 4px; background: var(--mkd-ahead); box-shadow: inset 0 0 0 1px var(--mkd-edge); }
.mkd-legend > li.is-strong::before { background: var(--mkd-success); box-shadow: none; }
.mkd-legend > li.is-repair::before { background: var(--mkd-caution); box-shadow: none; }
.mkd-legend b { font-family: var(--mkd-font-display); font-variant-numeric: tabular-nums; }
.mkd-timeline { display: flex; list-style: none; margin: 0; padding: 0; }
.mkd-timeline > li { flex: 1 1 0; min-width: 0; position: relative; padding-top: var(--mkd-s5); text-align: center; font-size: var(--mkd-fs-small); color: var(--mkd-ink-soft); font-weight: 600; }
.mkd-timeline > li::before { content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 4px; background: var(--mkd-rule); }
.mkd-timeline > li:first-child::before { left: 50%; }
.mkd-timeline > li:last-child::before { right: 50%; }
.mkd-timeline > li::after { content: ""; position: absolute; top: 0; left: 50%; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--mkd-surface); border: 3px solid var(--mkd-edge); }
.mkd-timeline > li.is-done::before { background: var(--mkd-brand); }
.mkd-timeline > li.is-done::after { background: var(--mkd-brand); border-color: var(--mkd-brand); }
.mkd-timeline > li.is-now { color: var(--mkd-ink); font-weight: 800; }
.mkd-timeline > li.is-now::after { background: var(--mkd-caution); border-color: var(--mkd-navy); box-shadow: 0 0 0 4px var(--mkd-caution-tint), 0 0 14px 2px rgba(255,198,26,.6); }
.mkd-timeline b { display: block; font-family: var(--mkd-font-display); color: var(--mkd-navy); }
.mkd-ladder.is-gold > li.is-here { background: var(--mkd-caution); color: var(--mkd-caution-on); box-shadow: 0 0 0 3px var(--mkd-surface), 0 0 0 5px var(--mkd-caution), 0 0 14px 2px rgba(255,198,26,.65); }
.mkd-ladder.is-cols-10 { --mkd-ladder-cols: 10; }

/* ---- 4n. Empty state with a picture slot, the wait screen, the per-screen
   skeleton, and the skeleton-to-content swap */
.mkd-state.is-art { border: 0; background: var(--mkd-surface); box-shadow: var(--mkd-elev-raised); padding: var(--mkd-s6) var(--mkd-s4); }
.mkd-state-art { width: 160px; height: 160px; margin-inline: auto; display: grid; place-items: center; }
.mkd-state-art > :is(img, svg) { width: 100%; height: 100%; object-fit: contain; }
.mkd-state-art:empty { border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--mkd-caution) 0 13%, transparent 14%),
    radial-gradient(circle at 50% 50%, transparent 0 40%, rgba(113,57,211,.28) 41% 43%, transparent 44%),
    radial-gradient(circle at 50% 50%, var(--mkd-tint) 0 62%, transparent 63%); }
.mkd-wait { flex: 1 0 auto; display: grid; place-content: center; justify-items: center; gap: var(--mkd-s4); text-align: center; padding: var(--mkd-s7) var(--mkd-gutter); min-height: 60vh; }
.mkd-wait-mark { display: block; width: 64px; height: 64px; border-radius: var(--mkd-r-md); box-shadow: var(--mkd-elev-raised); }
.mkd-wait .mkd-p { margin-inline: auto; }
.mkd-skel.is-title { height: 26px; width: 60%; border-radius: 8px; }
.mkd-skel.is-short { width: 40%; }
.mkd-skel.is-block { height: 96px; border-radius: var(--mkd-r-md); }
.mkd-skel.is-circle { width: var(--mkd-target); height: var(--mkd-target); border-radius: 50%; flex: none; }
.mkd-skel-row { display: flex; align-items: center; gap: var(--mkd-s3); }
.mkd-skel-row > .mkd-stack { flex: 1 1 auto; min-width: 0; }
.mkd-swap > .mkd-swap-skel { display: none; }
.mkd-swap[aria-busy="true"] > .mkd-swap-skel { display: block; }
.mkd-swap[aria-busy="true"] > .mkd-swap-real { display: none; }
.mkd-swap[aria-busy="false"] > .mkd-swap-real { animation: mkd-fade var(--mkd-dur-2) var(--mkd-ease-out); }

/* ---- 4o. Feedback: toast, tooltip, the success moment */
.mkd-toasts { --mkd-toast-bottom: var(--mkd-s4); position: fixed; left: 50%; bottom: calc(var(--mkd-toast-bottom) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(calc(100vw - 2 * var(--mkd-gutter)), 420px); display: flex; flex-direction: column; gap: var(--mkd-s2); z-index: 60; pointer-events: none; }
.mkd-toast { pointer-events: none; display: flex; align-items: center; gap: var(--mkd-s3); padding: var(--mkd-s2) var(--mkd-s2) var(--mkd-s2) var(--mkd-s4); min-height: 52px; background: var(--mkd-navy); color: var(--mkd-navy-on); border-radius: var(--mkd-r-md); box-shadow: var(--mkd-elev-overlay); font-weight: 600; font-size: var(--mkd-fs-small); animation: mkd-rise var(--mkd-dur-2) var(--mkd-ease-out); }
.mkd-toast-icon { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--mkd-caution); color: var(--mkd-caution-on); font-family: var(--mkd-font-display); font-weight: 800; font-size: 14px; line-height: 1; }
.mkd-toast.is-success .mkd-toast-icon { background: var(--mkd-success-lit); color: var(--mkd-navy-deep); }
.mkd-toast.is-danger .mkd-toast-icon { background: var(--mkd-danger-lit); color: var(--mkd-navy-deep); }
.mkd-toast-text { flex: 1 1 auto; min-width: 0; padding-block: var(--mkd-s1); }
.mkd-toast-close { pointer-events: auto; flex: none; min-width: 44px; min-height: 44px; padding: 0 var(--mkd-s3); border: 0; border-radius: var(--mkd-r-sm); background: transparent; color: var(--mkd-navy-on); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mkd-toast-close:hover { background: rgba(255,255,255,.14); }
.mkd-toast-close:focus-visible { outline: 3px solid var(--mkd-focus-dark); outline-offset: -3px; }
.mkd-toast.is-leaving { animation: mkd-fade-out var(--mkd-dur-1) ease-in forwards; }
.mkd-toast.is-static { animation: none; }

.mkd-tipwrap { position: relative; display: inline-flex; align-items: center; }
.mkd-tipbtn { display: grid; place-items: center; width: var(--mkd-target); height: var(--mkd-target); padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--mkd-brand-deep); font-family: var(--mkd-font-display); font-weight: 800; font-size: 1.0625rem; cursor: pointer; }
.mkd-tipbtn::before { content: "?"; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mkd-tint); transition: background-color var(--mkd-dur-1) var(--mkd-ease-out); }
.mkd-tipbtn:hover::before { background: var(--mkd-tint-deep); }
.mkd-tip { position: absolute; left: 50%; bottom: calc(100% + var(--mkd-s1)); width: max-content; max-width: min(260px, calc(100vw - 2 * var(--mkd-gutter))); padding: var(--mkd-s2) var(--mkd-s3); border-radius: var(--mkd-r-sm); background: var(--mkd-navy); color: var(--mkd-navy-on); font-size: var(--mkd-fs-small); font-weight: 600; line-height: 1.4; box-shadow: var(--mkd-elev-overlay); z-index: 30; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 4px); transition: opacity var(--mkd-dur-1) var(--mkd-ease-out), transform var(--mkd-dur-1) var(--mkd-ease-out), visibility 0s linear var(--mkd-dur-1); }
.mkd-tip.is-start { left: 0; transform: translate(0, 4px); }
.mkd-tip.is-end { left: auto; right: 0; transform: translate(0, 4px); }
.mkd-tipwrap:hover > .mkd-tip, .mkd-tipwrap:focus-within > .mkd-tip, .mkd-tip.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; }
.mkd-tipwrap:hover > .mkd-tip.is-start, .mkd-tipwrap:focus-within > .mkd-tip.is-start, .mkd-tip.is-open.is-start, .mkd-tipwrap:hover > .mkd-tip.is-end, .mkd-tipwrap:focus-within > .mkd-tip.is-end, .mkd-tip.is-open.is-end { transform: translate(0, 0); }
.mkd-tipwrap.is-dismissed > .mkd-tip { opacity: 0; visibility: hidden; }

/* The success moment: a tick that draws, then a burst of twelve balls in the
   brand gold and purple. At rest the tick is complete and the balls are out of sight.
   Add .is-play (mk-motion.js does it) to run it once. */
.mkd-success { --mkd-burst-r: 64px; position: relative; display: inline-grid; place-items: center; width: 72px; height: 72px; }
.mkd-success.is-lg { --mkd-burst-r: 96px; width: 112px; height: 112px; }
.mkd-success-tick { display: block; width: 100%; height: 100%; overflow: visible; }
.mkd-tick-disc { fill: var(--mkd-success); transform-origin: 50% 50%; }
.mkd-tick-path { fill: none; stroke: var(--mkd-success-on); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.mkd-success.is-gold .mkd-tick-disc { fill: var(--mkd-caution); }
.mkd-success.is-gold .mkd-tick-path { stroke: var(--mkd-caution-on); }
.mkd-success.is-play .mkd-tick-disc { animation: mkd-tick-pop var(--mkd-dur-2) var(--mkd-ease-spring) both; }
.mkd-success.is-play .mkd-tick-path { animation: mkd-draw var(--mkd-dur-2) var(--mkd-ease-out) var(--mkd-dur-1) both; }
.mkd-burst { position: absolute; inset: 0; pointer-events: none; }
.mkd-burst > i { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; opacity: 0; background: radial-gradient(circle at 35% 30%, var(--mkd-gold-lit), var(--mkd-caution) 60%, var(--mkd-gold-deep)); }
.mkd-burst > i:nth-child(3n+2) { background: radial-gradient(circle at 35% 30%, var(--mkd-ball-lit), var(--mkd-ball-purple) 60%, var(--mkd-action-hover)); width: 10px; height: 10px; margin: -5px 0 0 -5px; }
.mkd-burst > i:nth-child(1) { --mkd-a: 0deg; } .mkd-burst > i:nth-child(2) { --mkd-a: 30deg; } .mkd-burst > i:nth-child(3) { --mkd-a: 60deg; }
.mkd-burst > i:nth-child(4) { --mkd-a: 90deg; } .mkd-burst > i:nth-child(5) { --mkd-a: 120deg; } .mkd-burst > i:nth-child(6) { --mkd-a: 150deg; }
.mkd-burst > i:nth-child(7) { --mkd-a: 180deg; } .mkd-burst > i:nth-child(8) { --mkd-a: 210deg; } .mkd-burst > i:nth-child(9) { --mkd-a: 240deg; }
.mkd-burst > i:nth-child(10) { --mkd-a: 270deg; } .mkd-burst > i:nth-child(11) { --mkd-a: 300deg; } .mkd-burst > i:nth-child(12) { --mkd-a: 330deg; }
.mkd-success.is-play .mkd-burst > i { animation: mkd-burst-fly var(--mkd-dur-burst) var(--mkd-ease-out) both; }
.mkd-saved { display: inline-flex; align-items: center; gap: var(--mkd-s2); color: var(--mkd-success); font-weight: 700; font-size: var(--mkd-fs-small); }
.mkd-saved svg { width: 20px; height: 20px; flex: none; overflow: visible; }
.mkd-saved .mkd-tick-path { stroke: var(--mkd-success); stroke-width: 3.5; }
.mkd-saved.is-play .mkd-tick-path { animation: mkd-draw var(--mkd-dur-2) var(--mkd-ease-out) both; }

/* ---- 4p. The laptop layout. Two columns from 900px: a fixed left column
   (the child card, the ring, the main button) that stays in view, and a
   fluid right column. On a phone it is one column in the same order. Put the
   main button in the left column for a laptop and in the bottom bar for a
   phone: .mkd-laptop-only and .mkd-phone-only hide the copy that is not wanted. */
.mkd-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mkd-s5); }
.mkd-split-side, .mkd-split-main { min-width: 0; display: flex; flex-direction: column; gap: var(--mkd-s4); }
@media (min-width: 900px) {
  .mkd-split { grid-template-columns: 380px minmax(0, 1fr); align-items: start; gap: var(--mkd-s6); }
  .mkd-split-side { position: sticky; top: calc(60px + var(--mkd-s5)); }
  .mkd-phone-only { display: none !important; }
}
@media (max-width: 899px) {
  .mkd-laptop-only { display: none !important; }
}

/* ---- 4q. Motion: the named effects. Each is a class that plays once. */
@keyframes mkd-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes mkd-fade { from { opacity: 0; } }
@keyframes mkd-fade-out { to { opacity: 0; } }
@keyframes mkd-pop { from { opacity: 0; transform: scale(.94) translateY(8px); } }
@keyframes mkd-pop-out { to { opacity: 0; transform: scale(.96); } }
@keyframes mkd-sheet-up { from { transform: translateY(100%); } }
@keyframes mkd-sheet-down { to { transform: translateY(100%); } }
@keyframes mkd-select-pop { from { transform: scale(.92); } }
@keyframes mkd-slide-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes mkd-slide-back { from { opacity: 0; transform: translateX(-24px); } }
@keyframes mkd-draw { from { stroke-dashoffset: 1; } }
@keyframes mkd-tick-pop { from { transform: scale(.6); } }
@keyframes mkd-burst-fly {
  0% { opacity: 0; transform: rotate(var(--mkd-a)) translateY(0) scale(.5); }
  12% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--mkd-a)) translateY(calc(-1 * var(--mkd-burst-r))) scale(1); }
}
@keyframes mkd-shake { 15% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 65% { transform: translateX(-4px); } 85% { transform: translateX(2px); } }
@keyframes mkd-ring-draw { from { --mkd-pct: 0; } }

/* Page and section enter: a 12px rise and fade over 240ms. Lists stagger
   40ms apart, at most six steps, so a long list is never slow. */
.mkd-enter { animation: mkd-rise var(--mkd-dur-2) var(--mkd-ease-out) both; }
.mkd-enter-list > * { --mkd-i: 0; animation: mkd-rise var(--mkd-dur-2) var(--mkd-ease-out) both; animation-delay: calc(var(--mkd-i) * var(--mkd-stagger)); }
.mkd-enter-list > :nth-child(2) { --mkd-i: 1; }
.mkd-enter-list > :nth-child(3) { --mkd-i: 2; }
.mkd-enter-list > :nth-child(4) { --mkd-i: 3; }
.mkd-enter-list > :nth-child(5) { --mkd-i: 4; }
.mkd-enter-list > :nth-child(n+6) { --mkd-i: 5; }
/* A wizard step slides in 24px from the side it came from */
.mkd-step-in { animation: mkd-slide-in var(--mkd-dur-2) var(--mkd-ease-out) both; }
.mkd-step-in.is-back { animation-name: mkd-slide-back; }
/* A card lifts when a mouse is over it. Never on a touch screen. */
@media (hover: hover) and (pointer: fine) {
  .mkd-lift { transition: transform var(--mkd-dur-2) var(--mkd-ease-out), box-shadow var(--mkd-dur-2) var(--mkd-ease-out); }
  .mkd-lift:hover, .mkd-lift.is-hover { transform: translateY(-3px); box-shadow: var(--mkd-shadow-lift); }
  .mkd-lift:active { transform: translateY(-1px); }
}

/* ---- 4r. v0.4 A. The ladder drawn as balls
   Same markup as the flat ladder: ol.mkd-ladder.is-balls > li, with the same
   state classes. A ball is 24px, drawn like the Field's ball (flat colour, a faint
   highlight, a shaded lip). A state is told by SHAPE, never by colour alone:
     is-strong  a lit gold glossy ball (the landing's ball)
     is-here    a purple ball with a gold ring, and a slow 2s pulse. This is the ONLY looping
                motion in the kit; it is off under reduced motion and the ring stays
     is-repair  an amber ball with a bite taken out of one corner
     (none)     a hollow ring: still to climb
   Here and repair can never look alike, so a screen that says "0 to repair" cannot
   show an amber step. The step number is drawn on the ball (14px, 4.5 to 1 on every ball);
   put the written count on the list (role img and aria-label) and in .mkd-legend.is-line. */
.mkd-ladder.is-balls { gap: var(--mkd-s2) 0; grid-template-columns: repeat(var(--mkd-ladder-cols), minmax(0, 24px)); justify-content: space-between; padding-block: 5px; }
.mkd-ladder.is-balls > li { position: relative; isolation: isolate; width: 100%; max-width: 24px; justify-self: center; aspect-ratio: 1; border-radius: 50%; background: none; box-shadow: inset 0 0 0 2px var(--mkd-lad-ring); font-size: 0.875rem; line-height: 1; letter-spacing: -.03em; color: var(--mkd-lad-num); }
.mkd-ladder.is-balls > li:is(.is-strong, .is-repair, .is-here)::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: 50%; background: var(--mkd-ball-gloss); box-shadow: inset 0 -3px 4px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.2); }
.mkd-ladder.is-balls > li.is-strong { background: var(--mkd-caution); box-shadow: 0 2px 3px rgba(27,21,48,.22); color: var(--mkd-caution-on); }
.mkd-ladder.is-balls > li.is-repair { background: var(--mkd-amber); box-shadow: none; color: var(--mkd-caution-on); -webkit-mask: radial-gradient(circle at 90% 10%, transparent 0 5px, black 5.5px); mask: radial-gradient(circle at 90% 10%, transparent 0 5px, black 5.5px); }
.mkd-ladder.is-balls > li.is-here { background: var(--mkd-ball-purple); color: var(--mkd-brand-on); box-shadow: 0 0 0 2px var(--mkd-lad-gap), 0 0 0 4px var(--mkd-caution); }
.mkd-ladder.is-balls > li.is-here::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--mkd-caution); opacity: 0; pointer-events: none; animation: mkd-here-pulse 2s var(--mkd-ease-out) infinite; }
.mkd-ladder.is-balls.is-gold > li.is-here { background: var(--mkd-ball-purple); box-shadow: 0 0 0 2px var(--mkd-lad-gap), 0 0 0 4px var(--mkd-caution); }
@keyframes mkd-here-pulse { 0% { opacity: .9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.5); } }
/* Grow: mk-motion.js adds .is-growing to a ladder carrying data-mkd-grow and lights the lit balls one
   by one (80ms apart, about 900ms in all), each from the hollow ring it was. Without the script the
   ladder is simply complete. */
@keyframes mkd-ball-on { from { background-color: transparent; color: var(--mkd-lad-num); box-shadow: inset 0 0 0 2px var(--mkd-lad-ring); transform: scale(.8); } }
@keyframes mkd-ball-gloss { from { opacity: 0; } }
.mkd-ladder.is-grow.is-growing > li:is(.is-strong, .is-repair, .is-here) { animation: mkd-ball-on var(--mkd-dur-2) var(--mkd-ease-spring) both; animation-delay: calc(var(--mkd-i) * var(--mkd-grow-step)); }
.mkd-ladder.is-grow.is-growing > li::before { animation: mkd-ball-gloss var(--mkd-dur-2) var(--mkd-ease-out) both; animation-delay: calc(var(--mkd-i) * var(--mkd-grow-step)); }
/* One-line legend for the ladder: li.is-strong, li.is-here, li.is-repair, and a plain li for the hollow ring */
.mkd-legend.is-line { gap: var(--mkd-s1) var(--mkd-s3); }
.mkd-legend.is-line > li { gap: var(--mkd-s1); white-space: nowrap; }
.mkd-legend.is-line > li::before { width: 16px; height: 16px; border-radius: 50%; flex: none; background: none; box-shadow: inset 0 0 0 2px var(--mkd-lad-ring); }
.mkd-legend.is-line > li.is-strong::before { background: var(--mkd-grad-ball-gold); box-shadow: inset 0 0 0 1px var(--mkd-gold-deep); }
.mkd-legend.is-line > li.is-here::before { margin: 3px; background: var(--mkd-grad-ball-purple); box-shadow: 0 0 0 1.5px var(--mkd-lad-gap), 0 0 0 3px var(--mkd-caution); }
.mkd-legend.is-line > li.is-repair::before { background: var(--mkd-grad-ball-amber); box-shadow: none; -webkit-mask: radial-gradient(circle at 90% 10%, transparent 0 3.6px, black 4.1px); mask: radial-gradient(circle at 90% 10%, transparent 0 3.6px, black 4.1px); }

/* ---- 4s. v0.4 B. The title row
   A plain title for a screen that does not earn the hero: account, settings, family,
   guiding, classes, teachers. The hero is for a screen where it carries content (home,
   plan, the promise, the check, results). Markup:
   div.mkd-titlerow > div.mkd-titlerow-text > (p.mkd-eyebrow + h1.mkd-titlerow-title)
                      + optional div.mkd-titlerow-end (a quiet link, a chip) */
.mkd-titlerow { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--mkd-s3); padding-block: var(--mkd-s2) var(--mkd-s1); }
.mkd-titlerow-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--mkd-s1); }
.mkd-titlerow-title { margin: 0; font-family: var(--mkd-font-display); font-weight: 800; font-size: 1.75rem; line-height: var(--mkd-lh-head); color: var(--mkd-navy); text-wrap: balance; overflow-wrap: anywhere; }
.mkd-titlerow-end { flex: none; display: flex; align-items: center; gap: var(--mkd-s2); }

/* ---- 4t. v0.4 C. The slim action bar, hide on scroll, and room for a pinned bar
   .is-slim: 72px, no solid band and no border: the page fades into the bar's ground over
   24px. Hold ONE button in it (a second quiet link belongs in the page, not the bar).
   data-mkd-hide-on-scroll (mk-motion.js): the bar slides away on a scroll down and returns
   on a scroll up or at the end of the page. It never hides while it holds focus. Without
   the script it simply stays. .mkd-has-bar goes on the content (or body) of a screen whose
   bar is fixed or overlaps, so the last content is never covered. */
.mkd-actionbar.is-slim { min-height: var(--mkd-bar-h); display: flex; flex-direction: column; justify-content: center; padding: var(--mkd-s2) 0 calc(var(--mkd-s2) + env(safe-area-inset-bottom, 0px)); background: var(--mkd-ground); border-top: 0; box-shadow: none; }
.mkd-actionbar.is-slim::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--mkd-s5); background: linear-gradient(to top, var(--mkd-ground), transparent); pointer-events: none; }
.mkd-actionbar[data-mkd-hide-on-scroll] { transition: transform var(--mkd-dur-2) var(--mkd-ease-out); }
.mkd-actionbar.is-hidden { transform: translateY(110%); }
.mkd-has-bar { padding-bottom: calc(var(--mkd-bar-h) + var(--mkd-s4) + env(safe-area-inset-bottom, 0px)); }

/* ---- 4u. v0.4 D. One header (7 Oct 2026, shell spec)
   .mkd-topbar is one row on the brand navy: Back (the parent page's name) then the logo at the start, at most
   THREE quiet links (.mkd-toplink) in .mkd-topbar-end, the last of them Sign out, and no title.
   ONE logo: the 3D M mark plus the plain text name. The wordmark picture is retired from every header.
     a.mkd-brandmark > img.mkd-brand-mark[icons/mark-192.png] + span.mkd-brand-name "MathKidoo"
   The name hides below 380px so Back, the M and Sign out fit a 320px phone; the aria-label keeps the name. */
.mkd-brandmark { gap: var(--mkd-s2); text-decoration: none; }
.mkd-brand-mark { flex: none; width: 36px; height: 36px; object-fit: contain; }
.mkd-brand-name { font-family: var(--mkd-font-display); font-weight: 800; font-size: 1.25rem; line-height: 1; color: var(--mkd-top-ink); }
.mkd-brandmark .mkd-brand-word { display: none; }   /* safety net: any old markup left behind shows the M only, never the 3D wordmark */
@media (max-width: 379px) { .mkd-brandmark .mkd-brand-name { display: none; } }
/* A long Back label ("School board", "Hall set-up", "Class board") leaves no room for the name beside the M, Back and Sign out
   inside the 20px gutters of a 390px phone; the name steps aside until 440px, where all of it fits. */
@media (max-width: 439px) { .mkd-topbar-start:has(.mkd-toplink.is-back.is-long) .mkd-brand-name { display: none; } }
@media (max-width: 359px) { .mkd-toplink.is-back.is-long .mkd-back-label { display: none; } .mkd-toplink.is-back.is-long { padding-inline: var(--mkd-s3); } }

/* ---- 4v. v0.4 E. The child's reward
   The frame for the end of a child's task. Nothing here says right or wrong, or a score. In order:
   the ladder grows (4r), twelve gold and purple balls burst out of the art slot, a large warm line
   arrives, and the art. data-mkd-reward on the frame runs it once (mk-motion.js). At rest, with no
   script, everything is in place and finished. Markup (put .mkd-hero on it for the navy ground):
   section.mkd-reward[data-mkd-reward] > ol.mkd-ladder.is-balls.is-grow
      + div.mkd-reward-stage > div.mkd-reward-art[aria-hidden] (empty, or an img or svg) + span.mkd-success[aria-hidden] > span.mkd-burst
      + p.mkd-reward-line */
.mkd-reward { display: flex; flex-direction: column; align-items: center; gap: var(--mkd-s5); padding: var(--mkd-s6) var(--mkd-pad); text-align: center; }
.mkd-reward .mkd-ladder { width: 100%; max-width: 360px; }
.mkd-reward-stage { position: relative; display: grid; place-items: center; width: 100%; }
.mkd-reward-art { width: 160px; height: 160px; display: grid; place-items: center; }
.mkd-reward-art > :is(img, svg) { width: 100%; height: 100%; object-fit: contain; }
.mkd-reward-art:empty { border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--mkd-caution) 0 13%, transparent 14%),
    radial-gradient(circle at 50% 50%, transparent 0 40%, var(--mkd-ball-lit) 41% 43%, transparent 44%),
    radial-gradient(circle at 50% 50%, rgba(201,168,255,.18) 0 62%, transparent 63%); }
.mkd-reward-stage > .mkd-success { --mkd-burst-r: 128px; position: absolute; left: 50%; top: 50%; width: 160px; height: 160px; margin: -80px 0 0 -80px; pointer-events: none; }
.mkd-reward-line { margin: 0; font-family: var(--mkd-font-display); font-weight: 800; font-size: clamp(1.75rem, 7vw, 2.5rem); line-height: var(--mkd-lh-head); color: var(--mkd-navy); text-wrap: balance; }
.mkd-hero .mkd-reward-line { color: var(--mkd-navy-on); }
.mkd-reward.is-playing .mkd-reward-line { animation: mkd-rise var(--mkd-dur-2) var(--mkd-ease-out) var(--mkd-reward-delay) both; }
.mkd-reward.is-playing .mkd-reward-art { animation: mkd-pop var(--mkd-dur-2) var(--mkd-ease-spring) var(--mkd-reward-delay) both; }

/* ---- 4w. v0.4 F. The question stage
   .mkd-hundred: ten by ten small numbered balls, 1 to 100. Put is-ring on ONE cell to show a number
   that is in the question (never the answer) when a prompt has no picture. On a white card add .is-on-light.
   .mkd-drain: a ring that drains for the time left. Calm: one colour, no red, no flash, no keyframes.
   --mkd-pct runs from 100 to 0 (mk-motion.js MKMotion.drain does it, or set it yourself); the number
   inside .mkd-drain-num is the seconds left.
   .mkd-key.is-lg: a 64px key. .mkd-prompt: the question itself, 2rem at the least. */
.mkd-hundred { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; list-style: none; margin: 0 auto; padding: var(--mkd-s2); max-width: 400px; }
.mkd-hundred > li { position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--mkd-grad-ball-purple); color: var(--mkd-brand-on); font-family: var(--mkd-font-display); font-weight: 800; font-size: 0.875rem; line-height: 1; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), inset 0 -2px 3px rgba(0,0,0,.2); }
.mkd-hundred > li:nth-child(100) { letter-spacing: -.06em; }
.mkd-hundred > li.is-ring { z-index: 1; transform: scale(1.12); box-shadow: 0 0 0 2px var(--mkd-lad-gap), 0 0 0 4px var(--mkd-hundred-ring); }
.mkd-hundred.is-on-light { --mkd-hundred-ring: var(--mkd-navy); }
.mkd-drain { --mkd-pct: 100; position: relative; flex: none; display: grid; place-items: center; width: 96px; height: 96px; }
.mkd-drain::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--mkd-brand) calc(var(--mkd-pct) * 1%), var(--mkd-tint-deep) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 10px), black calc(100% - 9px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 10px), black calc(100% - 9px)); }
.mkd-drain-num { position: relative; font-family: var(--mkd-font-display); font-weight: 800; font-size: 2rem; line-height: 1; color: var(--mkd-navy); font-variant-numeric: tabular-nums; }
:is(.mkd-hero, .mkd-board) .mkd-drain::before { background: conic-gradient(var(--mkd-caution) calc(var(--mkd-pct) * 1%), rgba(255,255,255,.2) 0); }
:is(.mkd-hero, .mkd-board) .mkd-drain-num { color: var(--mkd-navy-on); }
.mkd-key.is-lg, .mkd-pinpad .mkd-key.is-lg { min-height: 64px; font-size: 1.75rem; }
[data-group="little"] .mkd-key.is-lg { font-size: 1.875rem; }
.mkd-prompt { margin: 0; font-family: var(--mkd-font-display); font-weight: 800; font-size: clamp(2rem, 9vw, 3rem); line-height: 1.1; color: var(--mkd-navy); text-align: center; text-wrap: balance; }
:is(.mkd-hero, .mkd-board) .mkd-prompt { color: var(--mkd-navy-on); }

/* ---- 4x. v0.4 G. Data pictures for a school
   .mkd-heat: one row per child or class. Cells (i.is-success, i.is-caution, i.is-neutral) are told apart by
   fill, stripes and a plain tint, and every row carries its words in .mkd-heat-twin ("9 strong, 2 to repair"),
   so colour is never alone. The cells are aria-hidden; the twin is what is read out.
   ul.mkd-heat > li.mkd-heat-row > b.mkd-heat-name + span.mkd-heat-twin + span.mkd-heat-cells[aria-hidden] > i
   .mkd-rankcard: a place number, a name and a note, in ol.mkd-ranklist (adult results lists only).
   .mkd-chartfit: wrap an svg so it fills the width of a phone and never scrolls the page sideways.
   Draw the viewBox about 320 wide, so a 14px label stays about 14px on a phone; it stops growing at 420px. */
.mkd-heat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--mkd-s3); }
.mkd-heat-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name twin" "cells cells"; gap: var(--mkd-s1) var(--mkd-s3); align-items: baseline; }
.mkd-heat-name { grid-area: name; min-width: 0; font-family: var(--mkd-font-display); font-weight: 800; color: var(--mkd-navy); overflow-wrap: anywhere; }
.mkd-heat-twin { grid-area: twin; font-size: var(--mkd-fs-small); color: var(--mkd-ink-soft); text-align: right; }
.mkd-heat-cells { grid-area: cells; display: flex; gap: 2px; height: 20px; }
.mkd-heat-cells > i { flex: 1 1 0; min-width: 0; border-radius: 4px; background: var(--mkd-ahead); }
.mkd-heat-cells > i.is-success { background: var(--mkd-success); }
.mkd-heat-cells > i.is-caution { background: repeating-linear-gradient(135deg, var(--mkd-caution) 0 3px, var(--mkd-gold-deep) 3px 5px); }
.mkd-heat-cells > i.is-neutral { background: var(--mkd-ahead); }
.mkd-legend.is-heat > li.is-success::before { background: var(--mkd-success); box-shadow: none; }
.mkd-legend.is-heat > li.is-caution::before { background: repeating-linear-gradient(135deg, var(--mkd-caution) 0 3px, var(--mkd-gold-deep) 3px 5px); box-shadow: none; }
@media (min-width: 900px) {
  .mkd-heat-row { grid-template-columns: 160px minmax(0, 1fr) 200px; grid-template-areas: "name cells twin"; align-items: center; }
  .mkd-heat-twin { text-align: left; }
}
.mkd-ranklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--mkd-s2); }
.mkd-rankcard { display: flex; align-items: center; gap: var(--mkd-s4); min-height: 64px; padding: var(--mkd-s3) var(--mkd-pad); background: var(--mkd-surface); border-radius: var(--mkd-r-lg); box-shadow: var(--mkd-elev-raised); }
.mkd-rankcard-place { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--mkd-tint); color: var(--mkd-brand-deep); font-family: var(--mkd-font-display); font-weight: 800; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.mkd-rankcard.is-top .mkd-rankcard-place { background: var(--mkd-brand); color: var(--mkd-brand-on); }
.mkd-rankcard-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.mkd-rankcard-name { font-family: var(--mkd-font-display); font-weight: 800; color: var(--mkd-navy); overflow-wrap: anywhere; }
.mkd-rankcard-note { font-size: var(--mkd-fs-small); color: var(--mkd-ink-soft); }
.mkd-chartfit { width: 100%; min-width: 0; max-width: 420px; margin-inline: auto; }
.mkd-chartfit > svg { display: block; width: 100%; max-width: 100%; height: auto; overflow: visible; }
.mkd-chartfit text { font-family: var(--mkd-font-body); font-size: 14px; fill: var(--mkd-ink-soft); }

/* ------------------------------------------------- 5. REDUCED MOTION
   Keep every piece of information, drop the movement. Everything above is
   already complete at rest, so switching the animation off loses nothing.
   Only the spinner and the skeleton shimmer (a wait is still a wait) are
   replaced by a still picture. Every class that plays a keyframe is named
   below; tools/tests/design-kit-check.js fails if one is missing. */
@media (prefers-reduced-motion: reduce) {
  .mkd *, .mkd *::before, .mkd *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .mkd-dialog[open],
  .mkd-dialog[open]::backdrop,
  .mkd-dialog.is-closing,
  .mkd-dialog.is-closing::backdrop,
  .mkd-dialog.is-sheet[open],
  .mkd-dialog.is-sheet.is-closing,
  .mkd-choicechip > input:checked + .mkd-chip,
  .mkd-choicechip.is-on > .mkd-chip,
  button.mkd-chip[aria-pressed="true"],
  button.mkd-chip.is-on,
  button.mkd-avatar[aria-pressed="true"],
  button.mkd-avatar.is-on,
  .mkd-avatarcard[aria-pressed="true"],
  .mkd-avatarcard.is-on,
  .mkd-ring.is-draw::before,
  .mkd-pin.is-error .mkd-pindots,
  .mkd-swap[aria-busy="false"] > .mkd-swap-real,
  .mkd-toast,
  .mkd-toast.is-leaving,
  .mkd-success.is-play .mkd-tick-disc,
  .mkd-success.is-play .mkd-tick-path,
  .mkd-success.is-play .mkd-burst > i,
  .mkd-saved.is-play .mkd-tick-path,
  .mkd-enter,
  .mkd-enter-list > *,
  .mkd-step-in,
  .mkd-step-in.is-back,
  .mkd-ladder.is-balls > li.is-here::after,
  .mkd-ladder.is-grow.is-growing > li:is(.is-strong, .is-repair, .is-here),
  .mkd-ladder.is-grow.is-growing > li::before,
  .mkd-reward.is-playing .mkd-reward-line,
  .mkd-reward.is-playing .mkd-reward-art { animation: none !important; }
  .mkd-btn.is-loading::before { animation: none; border-right-color: currentColor; border-style: dotted; }
  .mkd-spinner { animation: none; }
  .mkd-skel { animation: none; }
  .mkd-burst { display: none; }
}