/* Marketplace pages: state hub, standard hub, bank page.
   Visual language: the teacher side of the Game Room (public/shell.css):
   cream paper, navy ink, gold for the one thing we want clicked, Georgia headings.
   Every colour pair here was measured at 4.5:1 or better on its background. */
:root{
  --mk-paper:#f4efe3;          /* body, matches body.gr-page */
  --mk-card:#fdf8ee;           /* --gr-cream */
  --mk-card-2:#efe6d3;         /* quiet panels: standard block, facts */
  --mk-line:#e3d5b8;           /* --gr-line */
  --mk-line-2:#cdbd98;
  --mk-ink:#1b2130;            /* --gr-navy as text */
  --mk-ink-2:#4a4538;          /* body copy on cream, 8.9:1 */
  --mk-ink-3:#5f5849;          /* labels and meta, 6.3:1 on paper, 5.6:1 on card-2 */
  --mk-gold:#c98a2b;           /* --gr-gold */
  --mk-gold-dk:#b57a20;
  --mk-gold-ink:#1b1200;       /* text on gold, 7.3:1 */
  --mk-link:#7c4a03;           /* 7.4:1 on paper */
  --mk-navy:#1b2130;
  --mk-navy-2:#232b3d;
  --mk-focus:#1f5fa8;
  --mk-serif:Georgia,"Times New Roman",serif;
  --mk-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mk-measure:68ch;
  --mk-gutter:16px;
  --mk-radius:14px;
  --mk-shadow:0 8px 30px rgba(60,40,10,.08);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--mk-paper);color:var(--mk-ink);font-family:var(--mk-sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--mk-link);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--mk-navy)}
:focus-visible{outline:3px solid var(--mk-focus);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--mk-serif);font-weight:700;line-height:1.15;margin:0;color:var(--mk-ink);text-wrap:balance}
h1{font-size:clamp(32px,4.6vw,50px);letter-spacing:-.01em}
h2{font-size:clamp(24px,2.8vw,31px);margin:0 0 14px}
h3{font-size:19px;font-family:var(--mk-sans);font-weight:700}
p{margin:0 0 14px;color:var(--mk-ink-2)}
p:last-child{margin-bottom:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* ---- frame ---- */
.mk-wrap{max-width:1120px;margin:0 auto;padding:0 var(--mk-gutter)}
.mk-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 0 14px;border-bottom:1px solid var(--mk-line);flex-wrap:wrap}
.mk-brand{display:flex;flex-direction:column;text-decoration:none;color:var(--mk-ink)}
.mk-brand b{font-family:var(--mk-serif);font-size:22px;letter-spacing:-.01em}
.mk-brand small{font-size:12.5px;color:var(--mk-ink-3);letter-spacing:.04em}
.mk-topnav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mk-topnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;font-weight:700;font-size:15px;text-decoration:none;color:var(--mk-link)}
.mk-topnav a:hover{background:var(--mk-card)}
.mk-topnav .mk-btn{color:var(--mk-gold-ink);min-height:44px;padding:0 14px;font-size:15px}
/* Phones: the sticky bar carries the primary CTA, so the nav stays to two rows. */
@media (max-width:699px){.mk-topnav .mk-btn{display:none}}
.mk-crumbs{margin:16px 0 22px;font-size:14px;color:var(--mk-ink-3)}
.mk-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0;align-items:center}
.mk-crumbs li{display:inline-flex;align-items:center}
.mk-crumbs li+li::before{content:"";width:5px;height:5px;border-right:1.5px solid var(--mk-line-2);border-top:1.5px solid var(--mk-line-2);transform:rotate(45deg);margin:0 10px 0 8px;flex:none}
.mk-crumbs a{display:inline-flex;align-items:center;min-height:32px;color:var(--mk-link);text-decoration:none}
.mk-crumbs a:hover{text-decoration:underline}
.mk-crumbs [aria-current]{color:var(--mk-ink);font-weight:700}
.mk-foot{margin-top:56px;padding:22px 0 100px;border-top:1px solid var(--mk-line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--mk-ink-3)}
.mk-foot a{color:var(--mk-link)}
@media (min-width:700px){.mk-foot{padding-bottom:36px}}

/* ---- buttons ---- */
/* Serif, like the rest of the brand. The buttons inherited the body sans and
   so read as a different product from the Game Room's own, where the buttons
   are serif (Lauren, 18 Oct). font:inherit was pulling in --mk-sans. */
.mk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:11px 20px;border-radius:11px;border:1.5px solid var(--mk-gold);background:var(--mk-card);color:var(--mk-link);font-family:var(--mk-serif);font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;transition:background .15s,transform .15s;white-space:nowrap}
.mk-btn:hover{background:#fff;color:var(--mk-navy)}
.mk-btn:active{transform:translateY(1px)}
.mk-btn.primary{background:var(--mk-gold);color:var(--mk-gold-ink);border-color:var(--mk-gold)}
.mk-btn.primary:hover{background:var(--mk-gold-dk);color:var(--mk-gold-ink)}
.mk-btn.quiet{border-color:var(--mk-line-2);background:transparent}
.mk-btn.quiet:hover{background:var(--mk-card)}
.mk-btn svg{width:18px;height:18px;flex:none}
.mk-btn.block{width:100%}
.mk-cta-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.mk-offer{font-size:14.5px;color:var(--mk-ink-3);margin:8px 0 0}

/* ---- hero ---- */
.mk-hero{display:grid;gap:14px;max-width:780px;margin-bottom:10px}
.mk-kicker{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-weight:700;font-size:15px;color:var(--mk-ink-2)}
.mk-badge{display:inline-flex;align-items:center;min-height:26px;padding:2px 10px;border-radius:7px;background:var(--mk-navy);color:#f4ede0;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.mk-kicker .code{font-family:var(--mk-serif);font-size:19px;color:var(--mk-ink)}
.mk-kicker a{color:var(--mk-link)}
.mk-lede{font-size:clamp(17px,1.9vw,19.5px);line-height:1.55;max-width:var(--mk-measure)}
.mk-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:15px;color:var(--mk-ink-3);margin:0;padding:0;list-style:none}
.mk-meta li{display:inline-flex;align-items:center;gap:6px}
.mk-meta li+li::before{content:"·";color:var(--mk-line-2)}

/* ---- two-column body with sticky rail ---- */
.mk-body{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;margin-top:4px}
/* The rail is FLOATED, not a grid column. A column holds its width down the
   whole page, so every section below the short rail sat in a narrow strip with
   empty space beside it. Floated, the content wraps back to full width the
   moment the rail ends -- Lauren, 18 Oct: "move to 100% width after the right
   side menu ends". The rail comes first in the markup so there is something
   for the content to wrap around. */
@media (min-width:900px){
  .mk-body{display:block}
  .mk-rail{float:right;width:300px;margin:0 0 28px 48px}
  .mk-main{display:block}
  /* Each section establishes its own block formatting context, so it sits
     BESIDE the float rather than under it. A plain block box ignores a float
     -- only its line boxes are shortened -- which is why the section rules ran
     straight under the rail and out the other side (Lauren, 18 Oct: "your bar
     is going all the way across there"). flow-root also gives exactly the
     behaviour we want from the float: narrowed while the rail is alongside,
     full width the moment it ends. */
  #mk-main>section{display:flow-root;padding:26px 0}
}
.mk-main{min-width:0}
#mk-main>section{padding:30px 0;border-top:1px solid var(--mk-line)}
.mk-main .mk-hero{margin-bottom:30px}
.mk-main .mk-close{grid-template-columns:1fr;padding:28px 26px}
.mk-main .mk-close .mk-cta-row{justify-self:start}
/* At desktop the sticky rail owns the two CTAs, so the hero does not repeat them. */
@media (min-width:900px){.mk-hero .mk-cta-row,.mk-hero .mk-offer{display:none}}
/* Lauren, 17 Oct: "you've got it sticky, so it's scrolling down the whole
   time. We don't want that." The rail scrolls away with the page now; keeping
   a CTA in reach moves to the bar at the bottom, which takes less of the
   screen and is easier to ignore. */
.mk-rail{position:static;display:grid;gap:14px;align-self:start}
@media (min-width:900px){.mk-rail{padding-top:8px}}
.mk-rail-card{background:var(--mk-card);border:1px solid var(--mk-line);border-top:4px solid var(--mk-gold);border-radius:var(--mk-radius);padding:18px;box-shadow:var(--mk-shadow)}
.mk-rail-card h2{font-size:21px;margin-bottom:12px}
.mk-rail-card .mk-btn{width:100%}
.mk-rail-card .mk-btn+.mk-btn{margin-top:8px}
@media (max-width:899px){.mk-rail{position:static}.mk-rail .mk-rail-card.cta{display:none}}
.mk-facts{list-style:none;margin:0;padding:0;font-size:15px}
.mk-facts li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid var(--mk-line)}
.mk-facts li:first-child{border-top:0;padding-top:0}
.mk-facts span{color:var(--mk-ink-3)}
.mk-facts b{text-align:right;color:var(--mk-ink)}
.mk-facts b a{color:var(--mk-link)}

/* ---- what it teaches ---- */
.mk-teach{display:grid;gap:0;margin:0;padding:0}
.mk-teach>div{display:grid;grid-template-columns:1fr;gap:4px;padding:12px 0;border-top:1px solid var(--mk-line)}
.mk-teach>div:first-child{border-top:0;padding-top:0}
.mk-teach dt{font-size:14px;font-weight:700;color:var(--mk-ink-3);letter-spacing:.02em}
.mk-teach dd{margin:0;color:var(--mk-ink-2)}
@media (min-width:600px){.mk-teach>div{grid-template-columns:180px 1fr;gap:16px}.mk-teach dt{padding-top:2px}}

/* ---- standard block ---- */
.mk-std{background:var(--mk-card-2);border-radius:var(--mk-radius);padding:20px;display:grid;gap:12px}
.mk-std .code{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mk-std .code b{font-family:var(--mk-serif);font-size:24px}
.mk-std blockquote{margin:0;padding:0 0 0 14px;border-left:3px solid var(--mk-gold);font-style:italic;color:var(--mk-ink-2)}
.mk-std .xwalk{font-size:15px;color:var(--mk-ink-2)}
.mk-std .xwalk b{color:var(--mk-ink)}
.mk-std .res{font-size:15px}
.mk-std .res a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700}
.mk-std .res svg{width:16px;height:16px}

/* ---- sample question cards ---- */
.mk-samples{display:grid;gap:12px;list-style:none;margin:0;padding:0;counter-reset:q}
.mk-q{background:#fff;border:1px solid var(--mk-line);border-radius:var(--mk-radius);padding:16px 18px 16px 56px;position:relative;box-shadow:0 2px 0 rgba(60,40,10,.04)}
.mk-q::before{counter-increment:q;content:counter(q);position:absolute;left:16px;top:14px;width:28px;height:28px;border-radius:8px;background:var(--mk-gold);color:var(--mk-gold-ink);font-weight:700;font-size:14px;display:grid;place-items:center}
.mk-q p{color:var(--mk-ink);font-weight:600;font-size:17.5px;line-height:1.45}
.mk-q small{display:block;margin-top:6px;font-size:13.5px;color:var(--mk-ink-3)}
.mk-note{font-size:14.5px;color:var(--mk-ink-3);margin-top:12px}

/* ---- game tiles with the question overlaid ---- */
.mk-games{display:grid;grid-template-columns:1fr;gap:18px;list-style:none;margin:0;padding:0}
@media (min-width:560px){.mk-games{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mk-tile{background:var(--mk-card);border:1px solid var(--mk-line);border-radius:var(--mk-radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--mk-shadow)}
.mk-shot{position:relative;aspect-ratio:16/10;background:#241448;overflow:hidden}
.mk-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mk-shot::after{content:"";position:absolute;inset:0;background:rgba(14,10,36,.62)}
/* The card below copies .ac-qcard from public/arcade-core.js so the preview
   reads like the real Arcade question card. A screenshot pipeline (ups.6)
   replaces this whole block with a rendered image. */
.mk-qcard{position:absolute;left:8%;right:8%;top:50%;transform:translateY(-50%);background:#fff;color:#1a1030;border-radius:12px;padding:12px 14px;box-shadow:0 14px 40px rgba(0,0,0,.45);z-index:1;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.mk-qcard .qt{font-weight:800;font-size:clamp(12px,2.3vw,15px);line-height:1.3;margin:0 0 8px}
.mk-qcard .typebox{display:flex;gap:6px}
.mk-qcard .typebox span{flex:1;min-width:0;border:2px solid #d8d0f0;border-radius:8px;height:30px;background:#fff}
.mk-qcard .typebox i{font-style:normal;background:#1a1030;color:#ffd23f;border-radius:8px;padding:0 10px;height:30px;display:grid;place-items:center;font-size:12px;font-weight:900}
.mk-qcard .choices{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mk-qcard .choices span{display:flex;align-items:center;gap:6px;border:2px solid #d8d0f0;background:#faf8ff;border-radius:8px;padding:5px 7px;font-size:11.5px;font-weight:800;min-height:28px}
.mk-qcard .choices i{font-style:normal;width:18px;height:18px;border-radius:50%;background:#1a1030;color:#ffd23f;display:grid;place-items:center;font-size:10px;flex:none}
.mk-shot .hud{position:absolute;left:10px;right:10px;top:8px;display:flex;justify-content:space-between;z-index:1;font-size:11px;font-weight:800;color:#ffe9ad;letter-spacing:.04em}
.mk-tile-body{padding:14px 16px 16px;display:grid;gap:10px}
.mk-tile-body h3{font-size:18px}
.mk-tile-body p{font-size:14.5px;color:var(--mk-ink-3)}
.mk-tile-body .mk-btn{justify-self:start}
.mk-also{margin-top:22px;padding-top:18px;border-top:1px dashed var(--mk-line-2)}
.mk-also h3{margin-bottom:10px}
.mk-covers{display:flex;gap:10px;flex-wrap:wrap;list-style:none;margin:0 0 12px;padding:0}
.mk-covers li{display:flex;align-items:center;gap:8px;background:var(--mk-card);border:1px solid var(--mk-line);border-radius:10px;padding:5px 10px 5px 5px;font-size:14px;font-weight:700}
.mk-covers img{width:52px;height:34px;object-fit:cover;border-radius:6px}

/* ---- how teachers use it ---- */
.mk-uses{display:grid;gap:14px;list-style:none;margin:0;padding:0}
@media (min-width:700px){.mk-uses{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mk-uses li{background:var(--mk-card);border:1px solid var(--mk-line);border-radius:var(--mk-radius);padding:16px}
.mk-uses h3{margin-bottom:6px}
.mk-uses p{font-size:15px}

/* ---- faq ---- */
.mk-faq{display:grid;gap:0;border-top:1px solid var(--mk-line)}
.mk-faq details{border-bottom:1px solid var(--mk-line)}
.mk-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:52px;padding:12px 0;font-weight:700;font-size:17px;color:var(--mk-ink)}
.mk-faq summary::-webkit-details-marker{display:none}
.mk-faq summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--mk-gold-dk);border-bottom:2px solid var(--mk-gold-dk);transform:rotate(45deg);transition:transform .2s;flex:none;margin-right:6px}
.mk-faq details[open] summary::after{transform:rotate(225deg)}
.mk-faq .a{padding:0 0 16px;max-width:var(--mk-measure)}

/* ---- closing cta band ---- */
.mk-close{margin-top:10px;background:var(--mk-navy);color:#f4ede0;border-radius:18px;padding:28px 24px;display:grid;gap:16px}
@media (min-width:760px){.mk-close{grid-template-columns:1fr auto;align-items:center;padding:32px 34px}}
.mk-close h2{color:#fff}
.mk-close p{color:#d9d2c3}
.mk-close .mk-btn{border-color:rgba(255,255,255,.35);background:transparent;color:#fff}
.mk-close .mk-btn:hover{background:rgba(255,255,255,.08)}
.mk-close .mk-btn.primary{background:var(--mk-gold);color:var(--mk-gold-ink);border-color:var(--mk-gold)}
.mk-close .mk-btn.primary:hover{background:#e0a042}
.mk-close .mk-cta-row{justify-self:end}
@media (max-width:759px){.mk-close .mk-cta-row{justify-self:stretch}.mk-close .mk-btn{flex:1 1 100%}}

/* ---- sticky bottom cta on phones ---- */
.mk-sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px var(--mk-gutter) calc(10px + env(safe-area-inset-bottom));background:rgba(253,248,238,.96);border-top:1px solid var(--mk-line);box-shadow:0 -8px 30px rgba(60,40,10,.12);display:flex;gap:10px;align-items:center;backdrop-filter:blur(8px)}
.mk-sticky .mk-btn{flex:1;min-height:48px;font-size:16px}
.mk-sticky small{display:none}
/* Shown at every width now, not only on a phone, and revealed once the reader
   has moved past the first screen -- a bar that appears before anyone has read
   anything is just a smaller advert. (This rule was duplicated in the file;
   both copies are replaced.) */
.mk-sticky[hidden]{display:none}
.mk-sticky{transition:transform .22s ease}
.mk-sticky.mk-away{transform:translateY(115%)}
@media (min-width:700px){.mk-sticky{justify-content:center}
  .mk-sticky .mk-btn{flex:0 1 auto;min-width:320px}
  .mk-sticky small{display:inline;color:var(--mk-ink-3);font-size:13.5px;margin-left:8px}}

/* ---- hub pages ---- */
.mk-hub-head{max-width:760px;display:grid;gap:12px;margin:0 0 22px}
.mk-grade{padding:26px 0;border-top:1px solid var(--mk-line)}
.mk-grade h2{display:flex;align-items:baseline;gap:12px}
.mk-grade h2 small{font-family:var(--mk-sans);font-size:15px;font-weight:400;color:var(--mk-ink-3)}
.mk-stdgroup{margin-top:16px;background:var(--mk-card);border:1px solid var(--mk-line);border-radius:var(--mk-radius);padding:18px;box-shadow:var(--mk-shadow)}
.mk-stdgroup header{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.mk-stdgroup h3{font-family:var(--mk-serif);font-size:22px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mk-stdgroup h3 a{color:var(--mk-ink);text-decoration:none}
.mk-stdgroup h3 a:hover{text-decoration:underline}
.mk-stdgroup .count{font-size:14px;color:var(--mk-ink-3);font-weight:700;white-space:nowrap;padding-top:6px}
.mk-stdgroup .stdtext{font-size:15px;color:var(--mk-ink-2);margin-bottom:14px;max-width:var(--mk-measure)}
.mk-bankcards{display:grid;gap:12px;list-style:none;margin:0;padding:0}
@media (min-width:640px){.mk-bankcards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}}
.mk-bankcard{position:relative;background:#fff;border:1px solid var(--mk-line);border-radius:12px;padding:14px 16px;display:grid;gap:6px;transition:transform .15s,box-shadow .15s}
.mk-bankcard:hover{transform:translateY(-2px);box-shadow:var(--mk-shadow)}
.mk-bankcard h4{margin:0;font-size:17.5px;font-family:var(--mk-serif)}
.mk-bankcard h4 a{color:var(--mk-ink);text-decoration:none}
.mk-bankcard h4 a::after{content:"";position:absolute;inset:0}
.mk-bankcard .m{font-size:14px;color:var(--mk-ink-3)}
.mk-bankcard .s{font-size:14.5px;color:var(--mk-ink-2);border-left:3px solid var(--mk-line-2);padding-left:10px;margin-top:4px}
.mk-bankcard .go{font-size:14.5px;font-weight:700;color:var(--mk-link);margin-top:4px}
.mk-related{display:grid;gap:10px;list-style:none;margin:0;padding:0}
.mk-related li{background:var(--mk-card);border:1px solid var(--mk-line);border-radius:12px;padding:12px 14px;font-size:15px}
.mk-related a{font-family:var(--mk-serif);font-size:18px;text-decoration:none;color:var(--mk-ink)}
.mk-related a:hover{text-decoration:underline}
.mk-related span{display:block;color:var(--mk-ink-2);margin-top:2px}
.mk-stdhero{display:grid;gap:12px;max-width:780px;margin-bottom:22px}
.mk-stdhero blockquote{margin:0;padding:14px 18px;border-left:4px solid var(--mk-gold);background:var(--mk-card-2);border-radius:0 12px 12px 0;font-style:italic;font-size:18px;color:var(--mk-ink-2)}

/* ---- live bank page (src/bank-page.ts): the add button and its status ---- */
.mk-btn:disabled{opacity:.6;cursor:progress}
.mk-rail-card .mk-btn,.mk-close .mk-btn{white-space:normal;text-align:center}
.mk-add-msg{margin:8px 0 0;font-size:15px;font-weight:700;color:var(--mk-ink)}
.mk-add-msg:empty{display:none}
@media (min-width:900px){.mk-hero .mk-add-msg{display:none}}
.mk-rail-card .mk-offer a,.mk-hero .mk-offer a{font-weight:700}
.mk-gone{max-width:640px;padding:48px 0 24px;display:grid;gap:16px}

/* ---- dev check panel (not part of the product) ---- */
.mk-check{position:fixed;left:12px;bottom:84px;z-index:45}
@media (min-width:700px){.mk-check{bottom:12px}}
.mk-check pre{right:auto;left:0}
.mk-check button{min-height:44px;padding:0 14px;border-radius:10px;border:1.5px solid var(--mk-line-2);background:var(--mk-card);color:var(--mk-ink-2);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;box-shadow:var(--mk-shadow)}
.mk-check pre{position:absolute;right:0;bottom:52px;width:min(92vw,420px);max-height:60vh;overflow:auto;margin:0;padding:12px 14px;background:var(--mk-navy);color:#f4ede0;font-size:12.5px;line-height:1.5;border-radius:10px;white-space:pre-wrap}
.mk-check pre:empty{display:none}

/* ===== ups.7 bank page v2: tags, auth-aware actions, the locked ledger =====
   The HTML is cached and the same for everyone. public/marketplace.js sets
   html[data-auth="in"] after /api/auth/me answers 200. Both states are in the
   page; these rules show one. Every slot keeps its height, so nothing moves. */
html:not([data-auth="in"]) [data-in]{display:none}
html[data-auth="in"] [data-out]{display:none}
/* Stacked slots: both states share one grid cell and the hidden one keeps its box,
   so the row is always as tall as the taller state. Zero layout shift either way. */
.mk-act .alt,.mk-act .mk-offer,.mk-act.hub .row,.mk-sticky,.mk-bankcard .go,[data-act-btn],.mk-stack{display:grid;align-items:center}
[data-act-btn]{justify-items:center}
.mk-act .alt>span,.mk-act .mk-offer>span,.mk-act.hub .row>span,.mk-sticky>span,.mk-sticky>a,.mk-bankcard .go>[data-out],.mk-bankcard .go>[data-in],[data-act-btn]>span,.mk-stack>*{grid-area:1/1}
html:not([data-auth="in"]) :is(.mk-act .alt,.mk-act .mk-offer,.mk-act.hub .row,.mk-sticky,.mk-bankcard .go,[data-act-btn],.mk-stack)>[data-in],
html[data-auth="in"] :is(.mk-act .alt,.mk-act .mk-offer,.mk-act.hub .row,.mk-sticky,.mk-bankcard .go,[data-act-btn],.mk-stack)>[data-out]{display:block;visibility:hidden;pointer-events:none}
.mk-cta-row.mk-stack>span{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.mk-topnav .mk-stack{justify-items:start}
/* The phone sticky bar steps aside while a primary action is already on screen (public/marketplace.js). */
.mk-sticky{transition:transform .25s ease}
.mk-sticky.off{transform:translateY(120%)}
/* Shown at every width now, not only on a phone, and revealed once the reader
   has moved past the first screen -- a bar that appears before anyone has read
   anything is just a smaller advert. (This rule was duplicated in the file;
   both copies are replaced.) */
.mk-sticky[hidden]{display:none}
.mk-sticky{transition:transform .22s ease}
.mk-sticky.mk-away{transform:translateY(115%)}
@media (min-width:700px){.mk-sticky{justify-content:center}
  .mk-sticky .mk-btn{flex:0 1 auto;min-width:320px}
  .mk-sticky small{display:inline;color:var(--mk-ink-3);font-size:13.5px;margin-left:8px}}

/* tags row: standards first, then grade, subjects, topic */
.mk-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;font-size:14px}
.mk-tags li{display:contents}
.mk-tag{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:2px 10px;border-radius:8px;border:1px solid var(--mk-line-2);background:var(--mk-card);color:var(--mk-ink);text-decoration:none;font-weight:700;line-height:1}
.mk-tag:hover{border-color:var(--mk-gold);background:#fff;color:var(--mk-ink)}
.mk-tag.std{border-color:var(--mk-navy);background:var(--mk-navy);color:#f4ede0;font-family:var(--mk-serif);font-size:15.5px;padding-right:11px}
.mk-tag.std:hover{background:var(--mk-navy-2);color:#fff}
.mk-tag.std .fw{font-family:var(--mk-sans);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#f4d9a6;font-weight:700}
.mk-tag.sub{color:var(--mk-link)}
.mk-chip{display:inline-flex;align-items:center;min-height:24px;padding:1px 8px;border-radius:6px;background:var(--mk-card-2);color:var(--mk-ink-2);font-size:12.5px;font-weight:700;margin:0 4px 0 0}
.mk-chip.std{background:var(--mk-navy);color:#f4ede0;font-family:var(--mk-serif);font-size:13px}

/* the action block: one primary button, one line under it, one status line */
.mk-act{display:grid;gap:8px;max-width:440px}
.mk-act .mk-btn{width:100%;white-space:normal;text-align:center}
/* The icon is pinned, so a label change (Start free... -> Play with this bank) moves no element box. */
.mk-act .mk-btn.primary,.mk-sticky .mk-btn{position:relative;padding-left:44px;padding-right:44px}
.mk-act .mk-btn.primary svg,.mk-sticky .mk-btn svg{position:absolute;left:18px;top:50%;transform:translateY(-50%)}
.mk-act .mk-btn.is-busy{opacity:.7;cursor:progress}
.mk-act .alt{min-height:24px;font-size:14.5px;line-height:1.5;color:var(--mk-ink-3);margin:0}
.mk-act .alt a{font-weight:700}
.mk-act .mk-add-msg{min-height:22px;margin:0;font-size:14.5px;line-height:1.5}
.mk-act .mk-add-msg:empty{display:block}
.mk-act .mk-offer{margin:0}
.mk-act.hub{max-width:none}
/* Phones: the H1, the action and the first bank card fit one 390x844 viewport. The quiet
   "plans" button lives in the closing band and the footer; the lede clamps to three lines. */
@media (max-width:699px){
  /* One-row header (the owner line is in the footer) and a one-line breadcrumb that scrolls. */
  .mk-top{padding:12px 0 10px;flex-wrap:nowrap;gap:8px}
  .mk-brand small{display:none}
  .mk-brand b{font-size:19px;white-space:nowrap}
  .mk-topnav{flex-wrap:nowrap;gap:2px}
  .mk-topnav a{padding:0 7px;min-height:40px;font-size:14px;white-space:nowrap}
  .mk-top,.mk-topnav{min-width:0}
  .mk-topnav .mk-stack{display:none}
  .mk-sticky .mk-btn{white-space:normal}
  .mk-crumbs{margin:10px 0 14px}
  .mk-crumbs ol{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .mk-crumbs ol::-webkit-scrollbar{display:none}
  .mk-crumbs li{flex:none;white-space:nowrap}
  .mk-act.hub .mk-btn.quiet{display:none}
  .mk-hub-head,.mk-stdhero{gap:10px;margin-bottom:12px}
  .mk-hub-head h1,.mk-stdhero h1{font-size:28px}
  .mk-stdhero blockquote{font-size:15.5px;padding:10px 14px}
  .mk-hub-head .mk-lede,.mk-stdhero .mk-lede{font-size:16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .mk-grade{padding:18px 0}
  .mk-stdgroup{padding:14px}
}
.mk-act.hub .row{min-height:48px}
.mk-act.hub .row>span{display:flex;flex-wrap:wrap;gap:10px}
.mk-act.hub .mk-btn{width:auto}
@media (max-width:559px){.mk-act.hub .row>span,.mk-act.hub .mk-btn{width:100%}}
/* At desktop the rail owns the hero's action; the ledger, section and closing copies stay. */
@media (min-width:900px){.mk-hero>.mk-act{display:none}}
.mk-hero{gap:12px}
.mk-hero h1{font-size:clamp(28px,4.2vw,46px)}
.mk-hero .mk-lede{font-size:16.5px}
.mk-close .mk-act{justify-self:end;min-width:min(100%,320px)}
@media (max-width:759px){.mk-close .mk-act{justify-self:stretch;max-width:none}}
.mk-close .mk-act .alt,.mk-close .mk-act .mk-add-msg{color:#d9d2c3}
.mk-close .mk-act .alt a{color:#fff}
.mk-sticky>span{display:flex}
.mk-sticky>span .mk-btn,.mk-sticky>a.mk-btn{flex:1;width:100%}

/* the first question as students see it, over the first game's board */
.mk-qhero{position:relative;max-width:640px;background:#241448;border-radius:var(--mk-radius);padding:38px 14px 14px;overflow:hidden;box-shadow:var(--mk-shadow)}
.mk-qhero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.mk-qhero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,10,36,.55),rgba(14,10,36,.75))}
.mk-qhero .hud{position:absolute;left:12px;right:12px;top:10px;display:flex;justify-content:space-between;z-index:1;font-size:11px;font-weight:800;color:#ffe9ad;letter-spacing:.06em}
.mk-qhero .mk-qcard{position:relative;left:auto;right:auto;top:auto;transform:none;padding:14px 16px}
.mk-qhero .mk-qcard .qt{font-size:clamp(15px,2.4vw,18px)}
.mk-qhero .cap{position:relative;z-index:1;margin:10px 2px 0;font-size:12.5px;color:#d9d2c3}

/* the ledger: open cards, then locked rows that hold no text at all */
.mk-ledger{display:grid;gap:10px;list-style:none;margin:0;padding:0;counter-reset:q}
.mk-ledger .mk-q{padding:14px 16px 14px 54px}
.mk-ledger .mk-q::before{left:14px;top:12px}
.mk-q.locked{background:transparent;border:1px dashed var(--mk-line-2);box-shadow:none;padding:11px 16px 11px 54px;display:flex;align-items:center;gap:12px;min-height:50px;color:var(--mk-ink-3)}
.mk-q.locked::before{background:var(--mk-card-2);color:var(--mk-ink-3);top:10px}
.mk-q.locked .bar{flex:0 0 88%;height:10px;border-radius:5px;background:repeating-linear-gradient(90deg,var(--mk-line-2) 0 14px,transparent 14px 20px);filter:blur(1.4px)}
.mk-q.locked .w1{flex-basis:64%}.mk-q.locked .w2{flex-basis:76%}.mk-q.locked .w3{flex-basis:52%}.mk-q.locked .w4{flex-basis:70%}
.mk-q.locked::after{content:"";flex:none;width:16px;height:16px;margin-left:auto;background:var(--mk-ink-3);-webkit-mask:var(--mk-lock) center/contain no-repeat;mask:var(--mk-lock) center/contain no-repeat;opacity:.7}
.mk-ledger{--mk-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E")}
.mk-ledger .locked~.locked~.locked~.locked{opacity:.75}.mk-ledger .locked~.locked~.locked~.locked~.locked~.locked~.locked~.locked{opacity:.5}
.mk-count{margin:-6px 0 14px;font-size:15px}.mk-count b{color:var(--mk-ink)}
.mk-more-n{margin:10px 0 0 54px;font-size:15px;font-weight:700;color:var(--mk-ink-3)}
.mk-more{margin-top:4px;background:var(--mk-card-2);border-radius:var(--mk-radius);padding:16px 18px;display:grid;gap:12px}
.mk-more p{margin:0;color:var(--mk-ink-2)}
.mk-more b{color:var(--mk-ink)}

/* Game Room chips: plain labels for everyone, play buttons once signed in */
.mk-playin{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 16px;padding:0}
.mk-playin .chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:4px 12px;border-radius:10px;border:1.5px solid var(--mk-line-2);background:var(--mk-card);color:var(--mk-ink-2);font-weight:700;font-size:14.5px}
.mk-playin .chip svg{opacity:.45}
html[data-auth="in"] .mk-playin .chip{color:var(--mk-link);cursor:pointer}
html[data-auth="in"] .mk-playin .chip svg{opacity:1}
html[data-auth="in"] .mk-playin .chip:hover{border-color:var(--mk-gold);background:#fff}
.mk-arcade>.mk-act,.mk-room>.mk-act{margin-top:18px}
.mk-stds{display:grid;gap:12px}

/* hub cards: the bottom row swaps "See 2 sample questions" for the add button */
.mk-bankcard .chips{display:flex;flex-wrap:wrap;gap:4px 0}
.mk-bankcard .go{position:relative;z-index:2;justify-items:start;min-height:40px;margin-top:4px}
.mk-bankcard .go [data-out]{display:inline-flex;align-items:center;min-height:40px;font-size:14.5px;font-weight:700;color:var(--mk-link)}
.mk-bankcard .go .mk-add.done{grid-area:1/1}
.mk-add{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:4px 12px;border-radius:10px;border:1.5px solid var(--mk-gold);background:var(--mk-card);color:var(--mk-link);font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;text-decoration:none}
.mk-add:hover{background:#fff}
.mk-add:disabled{opacity:.6;cursor:progress}
.mk-add.done{border-color:#9ed1ad;background:#e4f5e9;color:#1e7e34}
.mk-bankcard .mk-add-msg{display:block;grid-row:2;font-size:13px;color:#c0392b}
.mk-bankcard .mk-add-msg:empty{display:none}

@media (max-width:359px){.mk-brand b{font-size:17px}.mk-topnav a{font-size:13px;padding:0 5px}}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* bank article (ups.7 articles): approved on /admin-seo */
.mk-article p,.mk-article ul{max-width:var(--mk-measure)}.mk-article h3{margin:20px 0 8px}.mk-article ul{margin:0;padding-left:22px;color:var(--mk-ink-2)}.mk-article li{margin:0 0 6px}

/* ── one grid of every game (replaces .mk-room + .mk-arcade) ──────────────
   Lauren asked for "a row of all the different games", Kahoot-style, and for
   the page to be shorter. Compact cards: art, where it plays, title, one line,
   one action. Auto-fill rather than a fixed column count, so the row fills
   whatever width it is given and reflows to one column on a phone. */
.mk-gamegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:14px;list-style:none;margin:0 0 18px;padding:0}
.mk-gamecard{display:flex;flex-direction:column;background:var(--mk-card);
  border:1px solid var(--mk-line);border-radius:var(--mk-radius);overflow:hidden}
.mk-gameart{aspect-ratio:300/158;background:var(--mk-bg-2,#f3ece0);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.mk-gameart img{width:100%;height:100%;object-fit:cover;display:block}
.mk-letter{font-size:44px;font-weight:800;color:var(--mk-ink-3);opacity:.5;line-height:1}
.mk-gamebody{padding:10px 12px 12px;display:grid;gap:6px;align-content:start}
.mk-where{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--mk-ink-3)}
.mk-gamebody h3{font-size:15.5px;margin:0}
.mk-gamebody p{font-size:13.5px;color:var(--mk-ink-3);margin:0}
.mk-mini{display:inline-flex;align-items:center;gap:5px;align-self:start;margin-top:2px;
  font-family:var(--mk-serif);font-size:13.5px;font-weight:700;color:var(--mk-link);text-decoration:none}
.mk-mini svg{width:14px;height:14px}
/* A Game Room card only opens a game for a teacher who is signed in. */
.mk-gamecard .mk-mini.chip{color:var(--mk-ink-3);cursor:default}
html[data-auth="in"] .mk-gamecard .mk-mini.chip{color:var(--mk-link);cursor:pointer}


/* ── how do you want to play: two choices, then the games ─────────────────
   A CSS-only toggle on two radios, so every game is in the HTML for a crawler
   and the section works before any script runs. */
.mk-how{margin:32px 0}
.mk-choose>input{position:absolute;opacity:0;pointer-events:none}
.mk-choice-tabs{display:grid;gap:12px;margin:0 0 18px}
@media (min-width:640px){.mk-choice-tabs{grid-template-columns:1fr 1fr}}
/* Lauren's design, 17 Oct: a fan of three covers on a tinted shelf, then a
   white panel with the label. The art is the selling point, so it leads. */
.mk-choice{display:grid;gap:0;cursor:pointer;overflow:hidden;
  background:#f7efdf;border:2px solid var(--mk-line);border-radius:16px}
.mk-choice-body{display:grid;gap:5px;padding:16px 20px 18px;background:var(--mk-card)}
.mk-choice b{font-size:21px;display:flex;align-items:center;gap:9px;line-height:1.15}
.mk-choice small{font-size:15px;color:var(--mk-ink-2);line-height:1.4}
.mk-ico{font-size:20px;line-height:1}

/* the fan: middle card upright and in front, the outer two tucked behind */
.mk-fan{display:flex;align-items:center;justify-content:center;
  padding:22px 10px 14px;min-height:150px}
.mk-fanc{width:112px;aspect-ratio:3/4;border-radius:10px;overflow:hidden;
  background:#efe6d4;border:4px solid #fff;
  box-shadow:0 6px 16px rgba(60,40,10,.22);display:block}
.mk-fanc img{width:100%;height:100%;object-fit:cover;display:block}
.mk-fanc-0{transform:rotate(-9deg) translateY(6px);margin-right:-26px;z-index:1}
.mk-fanc-1{transform:translateY(-4px) scale(1.06);z-index:3}
.mk-fanc-2{transform:rotate(9deg) translateY(6px);margin-left:-26px;z-index:2}
@media (max-width:420px){.mk-fanc{width:92px}.mk-choice b{font-size:19px}}
@media (prefers-reduced-motion:reduce){.mk-fanc{transition:none}}
#mk-how-room:checked~.mk-choice-tabs label[for="mk-how-room"],
#mk-how-arcade:checked~.mk-choice-tabs label[for="mk-how-arcade"]{
  border-color:var(--mk-gold);box-shadow:0 0 0 3px rgba(201,138,43,.18)}
/* Keyboard users get the same ring the mouse gets. */
.mk-choose>input:focus-visible+input+.mk-choice-tabs label[for="mk-how-room"],
.mk-choose>input:first-child:focus-visible~.mk-choice-tabs label[for="mk-how-room"],
#mk-how-arcade:focus-visible~.mk-choice-tabs label[for="mk-how-arcade"]{
  outline:3px solid var(--mk-link);outline-offset:3px}
/* Nothing opens underneath a choice any more (Lauren, 18 Oct: "no games will
   show up underneath when you click on them"), so the reveal panels and their
   radio toggle are gone. The card carries its own Play button. */
.mk-choice-body .mk-btn{margin-top:10px;align-self:start}

.mk-sq{display:grid;gap:6px;text-decoration:none;color:inherit}
/* Both products use the same card shape. The Game Room covers are 16:9
   (900x502, 1280x714) and the Arcade board thumbs are 300x158, so a square
   would crop the artwork -- including the title lettering inside several of
   the covers. One ratio, so the two sets sit in one grid as the same card. */
.mk-sqart{aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#f3ece0;
  border:1px solid var(--mk-line);display:flex;align-items:center;justify-content:center}
.mk-sqart img{width:100%;height:100%;object-fit:cover;display:block}
.mk-sqname{font-size:13.5px;font-weight:700;text-align:center;line-height:1.25}
.mk-sq.chip{cursor:default}
html[data-auth="in"] .mk-sq.chip{cursor:pointer}

/* ── the keyword paragraph ───────────────────────────────────────────────── */
.mk-seo{margin:30px 0}
.mk-seo h2{font-size:19px}
.mk-seo p{font-size:15px;color:var(--mk-ink-2);max-width:68ch}

/* ── the swipe row ───────────────────────────────────────────────────────── */
/* Larger: at 168px the covers were too small to read as artwork, which is
   the only reason the row exists. */
.mk-strip-wrap{margin:30px 0 8px}
.mk-strip .mk-sqname{font-size:15px}
.mk-strip{display:grid;grid-auto-flow:column;grid-auto-columns:230px;gap:12px;
  list-style:none;margin:0 0 10px;padding:0 0 10px;overflow-x:auto;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;overscroll-behavior-x:contain}
.mk-strip>li{scroll-snap-align:start}


/* ── the collage above "Bring it to class" ────────────────────────────────
   Real covers from the live catalogue, tilted and overlapping on a dark
   panel, so a teacher arriving from a search can see in a second that this is
   a set of games rather than a worksheet. Five cards: three Arcade boards and
   two Game Room covers, picked from the bank id so neighbouring pages differ. */
.mk-rail-card.cta{padding:0;overflow:hidden}
.mk-rail-card.cta>h2{padding:16px 18px 0;margin-bottom:10px}
.mk-rail-card.cta>:not(.mk-collage):not(h2){padding-left:18px;padding-right:18px}
.mk-rail-card.cta>:last-child{padding-bottom:18px}
/* A grid, flush, filling the panel -- the Arcade lobby's own look. The tilted
   cards made the artwork the decoration; the grid makes it the point. */
.mk-collage{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  background:#241a33;overflow:hidden;border-bottom:1px solid var(--mk-line)}
.mk-cc{display:block;aspect-ratio:1;overflow:hidden}
.mk-cc img{width:100%;height:100%;object-fit:cover;display:block}
/* On a phone the rail sits in the flow; the collage still reads at full width. */
@media (max-width:899px){.mk-collage{height:150px}}


/* ── the join dialog ──────────────────────────────────────────────────────
   Signed-out Play opens this instead of navigating. Lauren, 18 Oct: a form,
   then an upgrade offer she can skip, then a choice of Arcade or Game Room --
   and never the sales page. */
.mk-modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(27,18,0,.55);overflow:auto}
/* Tighter than the page around it. The dialog inherited the body's 17px and a
   generous input scale, which at a dialog's width reads as shouting -- and on
   a laptop at any browser zoom it filled the screen. It also has to survive a
   short window, hence the max-height and its own scroll. */
.mk-modal-box{position:relative;width:min(380px,100%);max-height:calc(100vh - 40px);overflow:auto;
  background:var(--mk-card);border:1px solid var(--mk-line);border-radius:14px;
  padding:20px 20px 18px;box-shadow:0 24px 60px rgba(40,26,0,.35);display:grid;gap:9px;
  font-size:15px}
.mk-modal-box h2{font-size:19px;line-height:1.2;margin:0;padding-right:26px}
.mk-modal-sub{font-size:13.5px;line-height:1.45;color:var(--mk-ink-2);margin:0}
.mk-modal-fine{font-size:12.5px;color:var(--mk-ink-3);margin:0}
.mk-modal-err{font-size:13px;color:#8a2b12;background:#fdeeea;border:1px solid #f0c9bf;
  border-radius:8px;padding:7px 9px;margin:0}
.mk-modal-msg{font-size:13px;color:var(--mk-ink-3);margin:0;min-height:1.1em}
.mk-modal-box form{display:grid;gap:9px}
.mk-modal-box label{display:grid;gap:3px;font-size:12.5px;font-weight:700;
  color:var(--mk-ink-2);text-transform:none}
/* 16px on the control itself: anything smaller makes iOS Safari zoom the page
   when the field is focused, which is its own kind of broken. */
.mk-modal-box input{font-family:var(--mk-sans);font-size:16px;padding:8px 10px;
  border:1.5px solid var(--mk-line-2);border-radius:8px;background:#fff;color:var(--mk-ink);
  width:100%;box-sizing:border-box;min-height:0}
.mk-modal-box input:focus-visible{outline:2px solid var(--mk-focus);outline-offset:1px}
.mk-modal-box .mk-btn{min-height:42px;font-size:15px;padding:9px 16px;margin-top:2px}
.mk-x{position:absolute;top:8px;right:10px;border:0;background:none;cursor:pointer;
  font-size:22px;line-height:1;color:var(--mk-ink-3);padding:2px 6px;border-radius:7px}
.mk-x:hover{background:var(--mk-card-2)}
.mk-btn.quiet{border-color:transparent;background:none;color:var(--mk-ink-3)}
/* Phone: a bottom sheet, and never taller than the screen. */
@media (max-width:480px){
  .mk-modal{padding:0;align-items:flex-end}
  .mk-modal-box{width:100%;max-height:92vh;border-radius:14px 14px 0 0;padding:18px 16px 16px}
  .mk-modal-box h2{font-size:18px}
}
.mk-two{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media (max-width:380px){.mk-two{grid-template-columns:1fr}}
.mk-opt{font-weight:400;color:var(--mk-ink-3);font-size:12.5px}

/* District and campus sit disabled until the step above them is answered.
   Visibly inert, so the order reads as a sequence and not as a broken field. */
.mk-modal-box input:disabled,.mk-modal-box select:disabled{
  background:#f4efe4;color:#9a8d79;cursor:not-allowed;
}

/* ── creators (src/creators.ts): the "Become a creator" form and the profile
   preview. Built from the tokens and controls above (the join dialog's
   fields, .mk-tag, .mk-btn) so the creator pages read as the same site. */
.mk-apply{max-width:720px;padding:32px 0 8px;display:grid;gap:16px;min-width:0}
.mk-form{display:grid;gap:14px;background:var(--mk-card);border:1px solid var(--mk-line);border-radius:var(--mk-radius);padding:22px;box-shadow:var(--mk-shadow);min-width:0}
.mk-form label{display:grid;gap:5px;font-size:15px;font-weight:700;color:var(--mk-ink);min-width:0}
.mk-form fieldset{border:0;margin:0;padding:0;display:grid;gap:8px;min-width:0}
.mk-form legend{font-size:15px;font-weight:700;color:var(--mk-ink);padding:0;margin-bottom:8px}
.mk-form legend small{font-weight:400;color:var(--mk-ink-3)}
.mk-form input:not([type=checkbox]),.mk-form textarea{font-family:var(--mk-sans);font-size:16px;padding:10px 12px;
  border:1.5px solid var(--mk-line-2);border-radius:8px;background:#fff;color:var(--mk-ink);width:100%;box-sizing:border-box;min-width:0}
.mk-form textarea{resize:vertical;min-height:120px;line-height:1.45}
.mk-form input:focus-visible,.mk-form textarea:focus-visible{outline:2px solid var(--mk-focus);outline-offset:1px}
.mk-form .mk-btn{justify-self:start;white-space:normal}
.mk-checks{display:flex;flex-wrap:wrap;gap:8px}
.mk-form .mk-pick{position:relative;display:inline-flex;cursor:pointer}
.mk-pick input{position:absolute;opacity:0;width:1px;height:1px}
.mk-pick span{display:inline-flex;align-items:center;min-height:40px;padding:4px 14px;border-radius:8px;border:1.5px solid var(--mk-line-2);background:#fff;font-weight:700;font-size:15px;color:var(--mk-ink)}
.mk-pick input:checked+span{background:var(--mk-gold);border-color:var(--mk-gold);color:var(--mk-gold-ink)}
.mk-pick input:focus-visible+span{outline:3px solid var(--mk-focus);outline-offset:2px}
.mk-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mk-done{background:var(--mk-card);border:1px solid var(--mk-line);border-radius:var(--mk-radius);padding:22px}
.mk-creator{padding:28px 0 8px;display:grid;gap:18px;min-width:0}
.mk-preview-note{background:var(--mk-card-2);border:1px solid var(--mk-line-2);border-radius:10px;padding:12px 14px;font-size:15px;color:var(--mk-ink-2)}
.mk-creator-card{display:grid;grid-template-columns:120px minmax(0,1fr);gap:22px;align-items:start;background:var(--mk-card);border:1px solid var(--mk-line);border-radius:var(--mk-radius);padding:22px;box-shadow:var(--mk-shadow)}
.mk-creator-card h1{font-size:clamp(28px,4vw,40px);margin-bottom:10px;overflow-wrap:anywhere}
.mk-creator-card .mk-lede{overflow-wrap:anywhere}
.mk-creator-photo{width:120px;height:120px;border-radius:50%;object-fit:cover;border:3px solid var(--mk-gold)}
.mk-creator-initial{display:flex;align-items:center;justify-content:center;background:var(--mk-navy);color:#f4ede0;font-family:var(--mk-serif);font-size:52px;font-weight:700}
.mk-creator-tags{display:flex;flex-wrap:wrap;gap:6px}
.mk-creator-links{display:flex;flex-wrap:wrap;gap:8px}
.mk-creator-links .mk-btn{border-color:var(--mk-line-2);white-space:normal}
@media (max-width:560px){.mk-creator-card{grid-template-columns:1fr;justify-items:start;padding:18px}.mk-form{padding:18px 16px}}
/* Creators phase 2: the package preview (src/packages.ts), from the tokens above. */
.mk-package-cover{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:12/5;object-fit:cover;border-radius:var(--mk-radius);border:1px solid var(--mk-line)}
.mk-package-head{display:grid;gap:12px;min-width:0}
.mk-package-head h1{font-size:clamp(28px,4vw,40px);overflow-wrap:anywhere;margin:0}
.mk-package-by h2{font-size:22px;margin:0 0 6px;overflow-wrap:anywhere}
.mk-package .mk-bankcard h4{overflow-wrap:anywhere}
/* Creators phase 3: the public profile, package and index pages
   (src/creator-pages.ts). Same tokens and pieces as the bank pages. */
.mk-bankcard h3{margin:0;font-size:17.5px;font-family:var(--mk-serif)}
.mk-bankcard h3 a{color:var(--mk-ink);text-decoration:none}
.mk-bankcard h3 a::after{content:"";position:absolute;inset:0}
.mk-creator-card .mk-kicker{margin-bottom:8px}
.mk-creator-card .mk-tags{margin:0 0 12px}
.mk-pkgcards,.mk-creatorcards{display:grid;gap:14px;list-style:none;margin:0;padding:0}
@media (min-width:640px){.mk-pkgcards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.mk-creatorcards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}}
.mk-pkgcard a,.mk-creatorcard a{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--mk-line);border-radius:12px;overflow:hidden;color:var(--mk-ink);text-decoration:none;transition:transform .15s,box-shadow .15s}
.mk-pkgcard a:hover,.mk-creatorcard a:hover{transform:translateY(-2px);box-shadow:var(--mk-shadow);color:var(--mk-ink)}
.mk-pkgcard .cover{display:block;width:100%;height:auto;aspect-ratio:12/5;object-fit:cover;background:var(--mk-card-2)}
.mk-pkgcard .cover.none{display:flex;align-items:center;justify-content:center;background:var(--mk-navy);color:#f4ede0;font-family:var(--mk-serif);font-size:22px;font-weight:700}
.mk-pkgcard .body,.mk-creatorcard .body{display:grid;gap:6px;padding:14px 16px;min-width:0}
.mk-pkgcard h3,.mk-creatorcard h2{margin:0;font-family:var(--mk-serif);font-size:19px;line-height:1.2;overflow-wrap:anywhere}
.mk-pkgcard .m,.mk-creatorcard .m{font-size:14px;color:var(--mk-ink-3)}
.mk-pkgcard .s,.mk-creatorcard .s{font-size:14.5px;color:var(--mk-ink-2);overflow-wrap:anywhere}
.mk-pkgcard .go{font-size:14.5px;font-weight:700;color:var(--mk-link);margin-top:2px}
.mk-creatorcard a{flex-direction:row;align-items:flex-start;gap:14px;padding:14px}
.mk-creatorcard .body{padding:0}
.mk-creatorcard .mk-creator-photo{width:72px;height:72px;flex:none;font-size:30px;border-width:2px}
.mk-creators{padding:8px 0;display:grid;gap:18px;min-width:0}
.mk-pkgbanks{display:grid;gap:14px;list-style:none;margin:0;padding:0}
.mk-pkgbank{background:var(--mk-card);border:1px solid var(--mk-line);border-radius:var(--mk-radius);padding:16px;display:grid;gap:10px;min-width:0}
.mk-pkgbank h3{font-family:var(--mk-serif);font-size:20px;overflow-wrap:anywhere}
.mk-pkgbank .mk-q p{overflow-wrap:anywhere}
.mk-pkgbank .mk-note{margin:0}
.mk-pkg-act{max-width:440px}
.mk-pkg-result{font-size:15px;color:var(--mk-ink-2)}
.mk-pkg-result:empty{display:none}
.mk-pkg-result p{margin:0 0 8px}
.mk-pkg-result .mk-cta-row .mk-btn{width:auto;flex:1 1 180px}
.mk-pkg-result.err p{color:#8a2b12}
.mk-package-by h2 a{color:var(--mk-ink);text-decoration:none}
.mk-package-by h2 a:hover{text-decoration:underline}
@media (max-width:560px){.mk-creatorcard a{padding:12px}.mk-pkgbank{padding:14px 12px}}