/* ═══════════════════════════════════════════════════════════════════════════
   home.css - the marketing home, restyled the way apple.com ships a product
   page. Loaded LAST (after theme.css) so it settles the cascade over
   styles.css and the v11/v12 skin without !important.

   Scope: everything here targets the marketing shell only - the .mk-* classes
   on the hero and the home sections, plus the global chrome (wordmark,
   footer). The in-app tool screens keep their dark Stacked-style skin
   untouched.

   The home is LOCKED LIGHT on purpose: apple.com does not follow your OS
   theme on marketing pages, and the theme toggle keeps working for the tools.
   Two sections (the problem statement, Sage, the founder note) are near-black
   full-bleed - Apple's alternation - which is also the bridge into the dark
   product screens.

   Tokens:
   - page #ffffff, band #f5f5f7 (Apple's two page greys)
   - ink #1d1d1f, ink2 #6e6e73 on light; #f5f5f7 / #86868b on dark
   - the brand purple carries: #6a3fff on white, #9b72e8 on black
   - type: system SF stack. Headlines semibold, tight, text-wrap:balance.
   - motion: one gesture - sections fade + rise 16px on entry, 600ms,
     one-shot, killed entirely under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --mk-font:"Familjen Grotesk",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --mk-page:#ffffff;
  --mk-band:#f5f5f7;
  --mk-ink:#1d1d1f;
  --mk-ink2:#6e6e73;
  --mk-hair:rgba(0,0,0,.09);
  --mk-acc:#7c47e1;            /* brand purple: el mismo token que el relleno */
  --mk-acc-dark:#9b72e8;       /* brand purple, tuned for black */
  --mk-sec-pad:clamp(84px,11vw,150px);
  --mk-ease:cubic-bezier(.16,1,.3,1);
}

/* ── global chrome: the wordmark goes Apple ─────────────────────────────────
   v12.css sets the wordmark to Archivo 800 with positive tracking; the Apple
   read is the body face at semibold with tight tracking - a product name set
   in the system voice, not a logotype. Wins here because home.css loads last. */
html.v12 .tm-wordmark{
  font-family:var(--mk-font);
  font-weight:600;
  font-size:17px;
  letter-spacing:-.015em;
}

/* ═══ THE HERO ═══════════════════════════════════════════════════════════════
   White, centred, typography first: eyebrow, one huge headline, one sub-line,
   the league-description field (the product's real front door - it stays
   functional), two Apple CTAs, then the war-room screenshot large in a soft
   frame. Overrides the .hero rules from styles.css / v11 / v12: same
   element, entirely new composition. */
html.v12 .hero, .hero{
  display:block;
  min-height:0;
  background:var(--mk-page);
  padding:clamp(52px,7vw,96px) 22px 0;
  overflow:visible;
}
/* v11.css re-pins the hero to the theme token under [data-theme="light"] with
   a heavier selector; the marketing home is locked to its own white in both
   themes, so match that specificity. */
html.v11[data-theme="light"] .hero, html.v12[data-theme="light"] .hero{background:var(--mk-page)}
.mk-hero-inner{
  max-width:920px;
  margin:0 auto;
  text-align:center;
  font-family:var(--mk-font);
  color:var(--mk-ink);
  -webkit-font-smoothing:antialiased;
}

.mk-eyebrow{
  font-size:15px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--mk-acc);
  margin-bottom:14px;
}

/* The headline is the star: SF at display size, semibold, tight, balanced.
   Re-declared with the skin prefix because v12.css pins .hero h1 sizes. */
html.v12 .hero h1, .hero h1, .mk-h1{
  font-family:var(--mk-font);
  font-size:clamp(40px,6.4vw,74px);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.03em;
  color:var(--mk-ink);
  text-wrap:balance;
  margin:0 0 18px;
}
html.v12 .hero h1 .hl, .hero h1 .hl{color:var(--mk-acc)}

.mk-sub{
  font-size:clamp(18px,2.2vw,22px);
  line-height:1.45;
  letter-spacing:-.014em;
  color:var(--mk-ink2);
  max-width:34em;
  margin:0 auto;
  text-wrap:balance;
}

/* the league-description field: the app's real entry point, styled as one
   clean rounded input instead of a form block. display:block overrides the
   legacy .hero-cta flex row from styles.css (same element, later file). */
.mk-hero-cta{display:block;margin-top:34px}
.mk-field-label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--mk-ink2);
  margin-bottom:10px;
}
#hero-mock-ctx.mk-hero-field{
  width:100%;
  max-width:560px;
  box-sizing:border-box;
  resize:none;
  background:var(--mk-band);
  border:1px solid transparent;
  border-radius:18px;
  padding:14px 18px;
  font-family:var(--mk-font);
  font-size:16px;
  line-height:1.5;
  letter-spacing:-.012em;
  color:var(--mk-ink);
  transition:border-color .2s var(--mk-ease),background .2s var(--mk-ease);
}
#hero-mock-ctx.mk-hero-field::placeholder{color:#a1a1a6}
#hero-mock-ctx.mk-hero-field:focus{
  outline:none;
  background:#fff;
  border-color:var(--mk-acc);
  box-shadow:0 0 0 4px rgba(106,63,255,.12);
}

/* ── the two Apple CTAs: one filled pill, one text link with a chevron ────── */
.mk-cta-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  flex-wrap:wrap;
  margin-top:20px;
}
.mk-btn{
  display:inline-block;
  background:var(--accent-btn);
  color:#fff;
  font-family:var(--mk-font);
  font-size:17px;
  font-weight:500;
  letter-spacing:-.014em;
  padding:13px 28px;
  border-radius:980px;
  border:none;
  cursor:pointer;
  text-decoration:none;
  transition:transform .2s var(--mk-ease),box-shadow .25s var(--mk-ease),filter .2s var(--mk-ease);
}
.mk-btn:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 8px 24px rgba(106,63,255,.28)}
.mk-btn:active{transform:none;box-shadow:none}
.mk-btnlink{
  font-family:var(--mk-font);
  font-size:17px;
  font-weight:400;
  letter-spacing:-.014em;
  color:var(--mk-acc);
  text-decoration:none;
  cursor:pointer;
}
.mk-btnlink::after{content:" ›";font-weight:400}
.mk-btnlink:hover{text-decoration:underline}

.mk-fine{
  font-size:12.5px;
  color:#86868b;
  margin:18px 0 0;
  line-height:1.6;
}
.mk-fine a{color:var(--mk-ink2);text-decoration:underline;text-underline-offset:2px}

/* ── the product shot: large, rounded, floating on a soft shadow ──────────── */
.mk-hero-shot{
  max-width:1180px;
  margin:clamp(44px,6vw,72px) auto 0;
  padding:0 0 clamp(64px,8vw,110px);
}
.mk-hero-shot img{
  display:block;
  width:100%;
  height:auto;
  border-radius:clamp(12px,1.8vw,22px);
  box-shadow:0 30px 90px -20px rgba(29,29,31,.4),0 8px 28px -12px rgba(29,29,31,.25);
}

/* ═══ SECTIONS ═══════════════════════════════════════════════════════════════
   One message per full-bleed section. .mk-sec is white, .mk-band is the grey
   step, .mk-dark is Apple's near-black. */
.mk-sec{
  font-family:var(--mk-font);
  background:var(--mk-page);
  color:var(--mk-ink);
  padding:var(--mk-sec-pad) 22px;
  -webkit-font-smoothing:antialiased;
}
.mk-band{background:var(--mk-band)}
.mk-dark{background:#000;color:#f5f5f7}

.mk-wrap{max-width:1040px;margin:0 auto}
.mk-wrap-narrow{max-width:640px;margin:0 auto}
.mk-center{text-align:center}

.mk-eyebrow-acc{
  font-size:14px;
  font-weight:600;
  letter-spacing:-.005em;
  color:var(--mk-acc);
  margin-bottom:14px;
}
.mk-dark .mk-eyebrow-acc{color:var(--mk-acc-dark)}

/* the skin prefix is needed: v12.css pins h2 to Archivo 700 at html.v12 h2
   specificity, which outranks a bare class */
html.v11 .mk-h2, html.v12 .mk-h2, .mk-h2{
  font-family:var(--mk-font);
  font-size:clamp(34px,4.8vw,60px);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.028em;
  text-wrap:balance;
  margin:0 0 18px;
  color:inherit;
}
.mk-h2-dim{color:#86868b}
.mk-sec .mk-sub{color:var(--mk-ink2)}
.mk-dark .mk-sub{color:#a1a1a6}

/* ── the problem statement (dark): short lines, big air ───────────────────── */
.mk-lines{
  max-width:32em;
  margin:30px auto 0;
  font-size:clamp(17px,2.1vw,21px);
  line-height:1.5;
  letter-spacing:-.014em;
  color:#a1a1a6;
}
.mk-lines p{margin:0 0 14px}
.mk-lines-strong{color:#f5f5f7;font-weight:600}
.mk-lines .hl2{color:var(--mk-acc-dark);font-weight:600}

/* ── how it works: four numbered columns over hairline rules ──────────────── */
.mk-steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:44px 40px;
  margin-top:clamp(40px,5vw,64px);
}
.mk-step{border-top:1px solid var(--mk-hair);padding-top:20px}
.mk-step-num{
  font-size:14px;
  font-weight:600;
  color:var(--mk-acc);
  font-variant-numeric:tabular-nums;
}
.mk-step h3{
  font-family:var(--mk-font);
  font-size:19px;
  font-weight:600;
  letter-spacing:-.018em;
  margin:10px 0 6px;
  color:var(--mk-ink);
}
.mk-step p{
  font-size:15px;
  line-height:1.5;
  letter-spacing:-.01em;
  color:var(--mk-ink2);
  margin:0;
}

/* ── Sage (dark): face, chat exchange, three reasons ───────────────────────── */
.mk-sage-face{display:flex;justify-content:center;margin-bottom:22px}

.mk-chat{
  max-width:560px;
  margin:36px auto 0;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.mk-chat-q,.mk-chat-a{
  font-size:15.5px;
  line-height:1.55;
  letter-spacing:-.012em;
  padding:13px 17px;
  border-radius:20px;
}
.mk-chat-q{
  align-self:flex-end;
  max-width:78%;
  background:var(--accent-btn);
  color:#fff;
  border-bottom-right-radius:6px;
}
.mk-chat-a{
  align-self:flex-start;
  max-width:88%;
  background:#1d1d1f;
  border:1px solid rgba(255,255,255,.09);
  color:#d5d5da;
  border-bottom-left-radius:6px;
}
.mk-chat-tag{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--mk-acc-dark);
  margin-bottom:5px;
}

.mk-trio{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:36px 40px;
  max-width:880px;
  margin:clamp(44px,6vw,64px) auto 0;
  text-align:left;
}
.mk-trio h3{
  font-family:var(--mk-font);
  font-size:19px;
  font-weight:600;
  letter-spacing:-.018em;
  color:#f5f5f7;
  margin:0 0 6px;
}
.mk-trio p{
  font-size:15px;
  line-height:1.5;
  letter-spacing:-.01em;
  color:#86868b;
  margin:0;
}
.mk-dark .mk-btn{background:var(--accent-btn)}
.mk-dark .mk-btn:hover{box-shadow:0 8px 24px rgba(155,114,232,.3)}
.mk-dark .mk-btnlink{color:var(--mk-acc-dark)}
.mk-center-row{margin-top:clamp(40px,5vw,56px)}

/* ── the war room: three feature cards with CSS micro-mocks ────────────────── */
.mk-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;
  margin-top:clamp(40px,5vw,60px);
}
.mk-card{
  background:#fff;
  border-radius:22px;
  padding:26px 26px 24px;
  box-shadow:0 2px 12px rgba(0,0,0,.05);
  text-align:left;
}
.mk-card h3{
  font-family:var(--mk-font);
  font-size:19px;
  font-weight:600;
  letter-spacing:-.018em;
  color:var(--mk-ink);
  margin:0 0 6px;
}
.mk-card > p{
  font-size:15px;
  line-height:1.5;
  letter-spacing:-.01em;
  color:var(--mk-ink2);
  margin:0 0 20px;
}

/* micro-mocks: tiny dark product excerpts inside the light cards - real UI
   vocabulary (position edges, on-the-clock, tier line), no fake data heavy
   enough to mislead */
.mk-mock{
  background:#0c0c0e;
  border-radius:14px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:7px;
  min-height:150px;
  justify-content:center;
}
.mk-mock-row2{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.mk-chip{
  background:#1c1c20;
  border-left:3px solid var(--pos,#555);
  border-radius:8px;
  padding:7px 9px;
  min-width:0;
}
.mk-chip b{
  display:block;
  font-size:11px;
  font-weight:600;
  letter-spacing:-.01em;
  color:#f5f5f7;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mk-chip span{
  display:block;
  font-size:9px;
  font-weight:700;
  letter-spacing:.03em;
  color:var(--pos,#9a9aa5);
  margin-top:2px;
}
.mk-chip-you{outline:1px solid rgba(155,114,232,.5);outline-offset:-1px}
.mk-clockcell{
  border:1px dashed rgba(155,114,232,.6);
  border-radius:10px;
  padding:16px 12px;
  text-align:center;
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--mk-acc-dark);
}
.mk-clockhead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  font-weight:600;
  color:#9a9aa5;
  padding:0 2px;
}
.mk-clockhead b{color:#f5f5f7;font-variant-numeric:tabular-nums}
.mk-tierline{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#f87171;
  white-space:nowrap;
}
.mk-tierline::before,.mk-tierline::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg,#9b72e8,#67e8f9);
  opacity:.55;
}

/* ── league connect: platform badges ───────────────────────────────────────── */
.mk-plats{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin:clamp(34px,4vw,48px) 0 26px;
}
.mk-plat{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:var(--mk-band);
  border-radius:980px;
  padding:11px 20px;
  font-size:15px;
  font-weight:500;
  letter-spacing:-.012em;
  color:var(--mk-ink);
}
.mk-plat img{display:block;border-radius:6px}
.mk-plat-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:20px;
  min-width:20px;
  border-radius:5px;
  padding:0 5px;
  font-size:9px;
  font-weight:800;
  color:#fff;
}

/* ── founder note (dark, editorial) ────────────────────────────────────────── */
.mk-founder p{
  font-size:17px;
  line-height:1.65;
  letter-spacing:-.012em;
  color:#a1a1a6;
  margin:0 0 20px;
}
.mk-founder .mk-founder-lead{font-size:clamp(20px,2.6vw,25px);line-height:1.5;color:#f5f5f7;letter-spacing:-.02em}
.mk-founder .mk-founder-close{font-size:19px;font-weight:600;color:var(--mk-acc-dark)}
.mk-founder-sign{
  font-size:14px;
  color:#6e6e73;
  margin-top:26px;
}

/* ── footer: quiet, small, hairline - token-based so it holds on the dark
   tool pages too ─────────────────────────────────────────────────────────── */
footer{
  font-family:var(--mk-font);
  padding:44px 22px 40px;
  margin-top:0;
}
footer .tm-wordmark{font-size:15px}
.footer-sub{font-size:12px;letter-spacing:-.005em}
footer .nav-link{font-size:12px}
.footer-legal{font-size:11px;line-height:1.7}

/* ═══ MOTION: fade + 16px rise on section entry ══════════════════════════════
   One-shot, 600ms, the same spring the tools use. The hero shot adds a
   whisper of scale so the product appears to settle into place. */
.mk-reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s var(--mk-ease),transform .6s var(--mk-ease);
}
.mk-hero-shot.mk-reveal{transform:translateY(24px) scale(.985)}
.mk-reveal.mk-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .mk-reveal{opacity:1;transform:none;transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PART 2 - THE MENUS. Every dropdown, drawer and control strip goes Apple:
   thin frosted panels, SF type, hairline separators, quiet hover, one small
   accent mark for "selected" instead of filled purple blocks, and a single
   entry gesture (fade + 6px rise, 240ms, the same ease as the home).

   The chrome sits over BOTH worlds - the light marketing home and the dark
   tools - so every panel is declared twice: dark by default, light under
   [data-theme="light"]. Frosted backgrounds keep >=.88 alpha so legibility
   never depends on backdrop-filter support.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --mk-panel:rgba(24,24,27,.92);          /* dark frosted menu surface */
  --mk-panel-hair:rgba(255,255,255,.1);
  --mk-panel-hover:rgba(255,255,255,.06);
  --mk-panel-shadow:0 18px 50px -12px rgba(0,0,0,.55),0 4px 14px rgba(0,0,0,.3);
}
[data-theme="light"]{
  --mk-panel:rgba(255,255,255,.93);
  --mk-panel-hair:rgba(0,0,0,.08);
  --mk-panel-hover:rgba(0,0,0,.05);
  --mk-panel-shadow:0 18px 50px -12px rgba(0,0,0,.22),0 4px 14px rgba(0,0,0,.08);
}

/* one entry gesture for every panel. The centred nav dropdown keeps its
   translateX in both frames so the animation never uncenters it. */
@keyframes mkMenuIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes mkMenuInC{from{opacity:0;transform:translateX(-50%) translateY(6px)}to{opacity:1;transform:translateX(-50%)}}
@keyframes mkSheetIn{from{transform:translateX(100%)}to{transform:none}}
@keyframes mkFadeIn{from{opacity:0}to{opacity:1}}

/* ── 1. the nav bar: Apple's thin frosted strip ─────────────────────────────
   v11 already gives it the blur; this quiets the links to SF at body weight
   and swaps the purple hover/active fills for a plain text-emphasis change -
   Apple's nav marks state with opacity, not chips. */
html.v11 .nav, html.v12 .nav{
  background:rgba(10,10,12,.8);
  border-bottom:1px solid rgba(255,255,255,.08);
}
html.v11[data-theme="light"] .nav, html.v12[data-theme="light"] .nav{
  background:rgba(251,251,253,.82);
  border-bottom:1px solid rgba(0,0,0,.08);
}
html.v11 .nav-item-btn, html.v12 .nav-item-btn{
  font-family:var(--mk-font);
  font-size:13px;
  font-weight:400;
  letter-spacing:-.008em;
  color:var(--muted2);
  opacity:.92;
}
html.v11 .nav-item-btn:not(.sage-hot):hover, html.v12 .nav-item-btn:not(.sage-hot):hover{
  background:transparent;
  color:var(--text);
  opacity:1;
}
html.v11 .nav-item-btn.active:not(.sage-hot), html.v12 .nav-item-btn.active:not(.sage-hot),
html.v11 .nav-item-btn.screen-nav.active:not(.sage-hot), html.v12 .nav-item-btn.screen-nav.active:not(.sage-hot){
  background:transparent;
  color:var(--text);
  font-weight:500;
}
/* Ask Sage: from a filled purple chip to a quiet hairline pill - the accent
   lives in the type, not the block */
html.v11 .nav-item-btn.sage-hot, html.v12 .nav-item-btn.sage-hot{
  background:transparent;
  border:1px solid var(--border2);
  color:var(--accent-bright);
  font-weight:500;
}
html.v11 .nav-item-btn.sage-hot:hover, html.v12 .nav-item-btn.sage-hot:hover,
html.v11 .nav-item-btn.sage-hot.active, html.v12 .nav-item-btn.sage-hot.active{
  background:var(--accent-dim);
  border-color:rgba(155,114,232,.5);
  color:var(--accent-bright);
}
/* Connect: the bar's one filled CTA, Apple-small */
html.v11 #nav-signin, html.v12 #nav-signin{
  background:var(--accent-btn);
  border:none;
  color:#fff;
  font-family:var(--mk-font);
  font-weight:500;
  padding:7px 16px;
}
html.v11 #nav-signin:hover, html.v12 #nav-signin:hover{
  background:var(--accent-btn);
  color:#fff;
  filter:brightness(1.08);
  transform:none;
}
/* utility icons: shed the outlined-chip look, hairline only on hover */
html.v11 .theme-toggle.icon, html.v12 .theme-toggle.icon{
  border-color:transparent;
  color:var(--muted2);
}
html.v11 .theme-toggle.icon:hover, html.v12 .theme-toggle.icon:hover{
  border-color:var(--border2);
  color:var(--text);
  transform:none;
  box-shadow:none;
}

/* ── 2+4. dropdown panels: nav, user account, alerts, search, autocomplete ──
   One panel language. #alerts-wrap needs restating because styles.css targets
   it by id, which outranks the class selectors. */
html.v11 .nav-dropdown, html.v12 .nav-dropdown,
html.v11 .user-dropdown, html.v12 .user-dropdown,
html.v11 .ac-dropdown, html.v12 .ac-dropdown,
#alerts-wrap .ac-dropdown{
  background:var(--mk-panel);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
  backdrop-filter:saturate(180%) blur(24px);
  border:1px solid var(--mk-panel-hair);
  border-radius:14px;
  box-shadow:var(--mk-panel-shadow);
  padding:5px;
}
/* the entry gesture: display flips from none, so the animation replays on
   every open. The nav dropdown is centred by translateX and takes the
   centre-preserving variant. */
.nav-item:hover .nav-dropdown,.nav-item.open .nav-dropdown{animation:mkMenuInC .24s var(--mk-ease)}
.user-pill.open .user-dropdown,
.ac-dropdown.open,
#alerts-wrap.open .ac-dropdown{animation:mkMenuIn .24s var(--mk-ease)}

/* rows: SF, quiet hover, the accent reserved for the active mark */
html.v11 .nav-dd-item, html.v12 .nav-dd-item,
html.v11 .user-dd-item, html.v12 .user-dd-item{
  font-family:var(--mk-font);
  font-size:13px;
  font-weight:400;
  letter-spacing:-.008em;
  padding:9px 12px;
  border-radius:9px;
  color:var(--text);
}
html.v11 .nav-dd-item:hover, html.v12 .nav-dd-item:hover,
html.v11 .user-dd-item:hover, html.v12 .user-dd-item:hover{
  background:var(--mk-panel-hover);
  color:var(--text);
}
html.v11 .nav-dd-item.active, html.v12 .nav-dd-item.active{color:var(--accent-bright)}
html.v11 .user-dd-item.danger, html.v12 .user-dd-item.danger{color:var(--red)}
html.v11 .nav-dd-sep, html.v12 .nav-dd-sep{background:var(--mk-panel-hair);margin:5px 10px}
html.v11 .user-dd-header, html.v12 .user-dd-header{border-bottom:1px solid var(--mk-panel-hair);padding:9px 12px 8px}
html.v11 .user-dd-name, html.v12 .user-dd-name{font-family:var(--mk-font);font-weight:600;letter-spacing:-.01em}
/* the account pill itself: hairline, not a chip */
html.v11 .user-pill, html.v12 .user-pill{
  background:transparent;
  border:1px solid var(--border2);
  font-family:var(--mk-font);
}
html.v11 .user-pill:hover, html.v12 .user-pill:hover{border-color:var(--border2);color:var(--text);background:var(--mk-panel-hover)}

/* ── 3. search results: Spotlight rows ──────────────────────────────────────
   The list loses its purple outline and its row rules; separation comes from
   spacing and the hover wash, like a menu. Position badges keep their data
   colours - that is information, not decoration. */
html.v11 .ac-item, html.v12 .ac-item{
  font-family:var(--mk-font);
  border-bottom:none;
  border-radius:9px;
  padding:9px 11px;
}
html.v11 .ac-item:hover, html.v12 .ac-item:hover{background:var(--mk-panel-hover)}
html.v11 .ac-ktc, html.v12 .ac-ktc{color:var(--muted2)}

/* ── 5. the phone drawer: an Apple sheet ────────────────────────────────────
   Strong frost, big tap targets, hairline dividers between top-level rows,
   400ms slide with the house ease. The chevron rotation on expand already
   exists; the open group marks itself with accent text only. */
#mob-menu{
  background:rgba(0,0,0,.42);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
#mob-menu.open{animation:mkFadeIn .24s var(--mk-ease)}
.mob-menu-panel{
  width:min(320px,86vw);
  background:var(--mk-panel);
  -webkit-backdrop-filter:saturate(180%) blur(30px);
  backdrop-filter:saturate(180%) blur(30px);
  border-left:1px solid var(--mk-panel-hair);
  padding:16px 16px 26px;
  gap:0;
}
#mob-menu.open .mob-menu-panel{animation:mkSheetIn .32s var(--mk-ease)}
.mob-menu-head{margin-bottom:10px}
.mob-menu-head span{font-family:var(--mk-font)!important;font-weight:600!important;letter-spacing:-.01em}
.mob-menu-item{
  font-family:var(--mk-font);
  font-size:16px;
  font-weight:500;
  letter-spacing:-.014em;
  padding:14px 10px;
  min-height:48px;
  border-radius:0;
}
.mob-menu-item:active{background:var(--mk-panel-hover)}
.mob-menu-item.mob-sub{
  font-size:15px;
  font-weight:400;
  padding:11px 10px 11px 26px;
  min-height:42px;
  color:var(--muted2);
}
/* hairlines between top-level rows - the Apple settings list */
.mob-menu-panel > button.mob-menu-item:not(:first-of-type),
.mob-menu-panel > .mob-group{border-top:1px solid var(--mk-panel-hair)}
.mob-group.open .mob-menu-item.mob-parent{color:var(--accent-bright)}
.mob-chev{opacity:.4}

/* ── 6. mock section chips: an Apple segmented control ──────────────────────
   Quiet hairline pills; the selected one is a raised neutral chip carrying
   the accent in its label - no purple flood. theme.css sets .md-sec-btn.on
   with a compound selector, so these restate at skin specificity. */
html.v11 .md-sec-btn, html.v12 .md-sec-btn{
  background:transparent;
  border:1px solid var(--border);
  color:var(--muted2);
  font-family:var(--mk-font);
  font-size:13px;
  font-weight:500;
  letter-spacing:-.01em;
  padding:8px 16px;
}
html.v11 .md-sec-btn:hover, html.v12 .md-sec-btn:hover{
  border-color:var(--border2);
  color:var(--text);
  background:transparent;
  transform:none;
}
html.v11 .md-sec-btn.on, html.v12 .md-sec-btn.on{
  background:var(--surface3);
  border-color:transparent;
  color:var(--accent-bright);
  font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
[data-theme="light"] .md-sec-btn.on{box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}

/* stillness is a feature */
@media (prefers-reduced-motion:reduce){
  .nav-item:hover .nav-dropdown,.nav-item.open .nav-dropdown,
  .user-pill.open .user-dropdown,.ac-dropdown.open,#alerts-wrap.open .ac-dropdown,
  #mob-menu.open,#mob-menu.open .mob-menu-panel{animation:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PART 3 - THE MOCK SETUP GOES LIGHT.

   The owner picked the white/hairline panel treatment for the mock menu, and
   the same light-into-dark bridge as the home: the SETUP is a light Apple
   sheet (white card, grey wells, clean selects, a real segmented control);
   the moment the draft starts, the same card returns to the dark Stacked
   board, which is not touched.

   Mechanism: setup and board share one .card, and mdShowSection() always
   writes #md-board's inline display. A :has() state selector flips the
   card's DESIGN TOKENS while the board is hidden, so every inline var() in
   the setup markup re-resolves to the light palette with no JS and no
   markup rewiring. Both attribute spellings are matched because the
   authored attribute has no space and the serialized one does.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* segmented control track/thumb - dark defaults for the board-on state */
  --mk-seg-track:rgba(255,255,255,.08);
  --mk-seg-on:#3a3a40;
  --mk-focus:rgba(155,114,232,.28);
}
[data-theme="light"]{
  --mk-seg-track:rgba(0,0,0,.06);
  --mk-seg-on:#ffffff;
  --mk-focus:rgba(106,63,255,.16);
}

/* ── the light region: token flip while the board is hidden ───────────────── */
#screen-mock .card:has(> #md-board[style*="display:none"]),
#screen-mock .card:has(> #md-board[style*="display: none"]){
  background:#ffffff;
  border-color:rgba(0,0,0,.09);
  color:#1d1d1f;
  --text:#1d1d1f;
  --muted:#6e6e73;
  --muted2:#494950;
  --surface:#ffffff;
  --surface2:#f5f5f7;      /* the wells: context box, config grid, fine-tune */
  --surface3:#e8e8ed;
  --border:rgba(0,0,0,.09);
  --border2:rgba(0,0,0,.16);
  --accent:#6a3fff;
  --accent-bright:#6a3fff;
  --accent-dim:rgba(106,63,255,.08);
  --green:#087a46;
  --red:#d92d3f;
  /* the inline headings reference --font-head; the setup speaks SF */
  --font-head:var(--mk-font);
  --mk-seg-track:rgba(0,0,0,.06);
  --mk-seg-on:#ffffff;
  --mk-focus:rgba(106,63,255,.16);
  font-family:var(--mk-font);
}

/* ── 1. the section chips: a real segmented control ─────────────────────────
   One recessed track, borderless segments, the selected one raised on a
   soft shadow - unmistakably Apple, in both the light setup and over the
   dark board (the chips row stays visible in both states). !important is
   needed only against the row's own inline display/gap. */
#screen-mock #md-sections{
  display:inline-flex!important;
  flex-wrap:wrap;
  gap:2px!important;
  padding:3px;
  background:var(--mk-seg-track);
  border-radius:11px;
  align-self:flex-start;
}
#screen-mock .md-sec-btn{
  background:transparent;
  border:none;
  border-radius:8px;
  padding:7px 16px;
  font-family:var(--mk-font);
  font-size:13px;
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--muted2);
  box-shadow:none;
  transition:color .16s var(--mk-ease),background .16s var(--mk-ease);
}
#screen-mock .md-sec-btn:hover{
  background:transparent;
  border:none;
  color:var(--text);
  transform:none;
}
#screen-mock .md-sec-btn.on{
  background:var(--mk-seg-on);
  border:none;
  color:var(--text);
  font-weight:600;
  box-shadow:0 1px 4px rgba(0,0,0,.16),0 0 0 .5px rgba(0,0,0,.04);
}

/* ── 3. the selects: proper Apple popup buttons ─────────────────────────────
   Scoped to the setup containers only - the board bar keeps its own controls
   untouched. White field, hairline, custom chevron, accent focus ring. */
#md-setup .opp-select, #ld-card .opp-select{
  -webkit-appearance:none;
  appearance:none;
  background-color:var(--surface);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:12px;
  border:1px solid var(--border2);
  border-radius:10px;
  font-family:var(--mk-font);
  font-size:13.5px;
  letter-spacing:-.01em;
  color:var(--text);
  padding:9px 30px 9px 12px;
  cursor:pointer;
  transition:border-color .18s var(--mk-ease),box-shadow .18s var(--mk-ease);
}
#md-setup .opp-select:focus, #ld-card .opp-select:focus{
  outline:none;
  border-color:var(--accent-bright);
  box-shadow:0 0 0 4px var(--mk-focus);
}

/* ── 2. the setup panel: white sheet, grey wells, restrained accent ─────────
   The wells themselves come from the token flip (--surface2). Inputs sit
   white on the grey wells, iOS-form style, with the accent reserved for the
   small label (inline) and the focus ring. */
#md-setup .tm-input, #mp-card .tm-input{
  background:var(--surface);
  border:1px solid var(--border2);
  color:var(--text);
  font-family:var(--mk-font);
}
#md-setup .tm-input:focus, #mp-card .tm-input:focus{
  border-color:var(--accent-bright);
  box-shadow:0 0 0 4px var(--mk-focus);
}
/* the one filled action: Start / Connect / Join / Copy invite link, in the
   light region's accent. Scoped to #mp-choose/#mp-lobby - never bare #mp-card,
   because #mp-bar lives there too and renders over the dark live board. */
#md-setup .btn-load, #ld-card .btn-load, #mp-choose .btn-load, #mp-lobby .btn-load{
  background:var(--accent-bright);
  font-family:var(--mk-font);
  font-weight:600;
  letter-spacing:-.01em;
  box-shadow:none;
}
#md-setup .btn-load:hover, #ld-card .btn-load:hover,
#mp-choose .btn-load:hover, #mp-lobby .btn-load:hover{box-shadow:0 6px 18px var(--mk-focus)}
/* quiet buttons inside the setup lose the purple tint */
#ld-card .btn-sm, #md-history-wrap .btn-sm, #mp-lobby .btn-sm{
  background:var(--surface);
  border:1px solid var(--border2);
  color:var(--muted2);
}
#ld-card .btn-sm:hover, #md-history-wrap .btn-sm:hover, #mp-lobby .btn-sm:hover{border-color:var(--border2);color:var(--text)}

/* ── 4. Draft with friends: white cards on the sheet ────────────────────────
   Same hairline card language; the create icon keeps the accent, the join
   icon stays neutral. The BETA chips and the live dot keep their accents. */
#mp-card .mpx-card{
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}
#mp-card .mpx-card:hover{
  border-color:var(--accent-bright);
  box-shadow:0 8px 22px -10px var(--mk-focus);
}
#mp-card .mpx-card:first-child .mpx-ic svg{stroke:var(--accent-bright)}
#mp-card .mpx-t{font-family:var(--mk-font);font-weight:600;letter-spacing:-.014em}

/* strategy cards: grey wells with the accent as a selection ring only */
#md-setup .md-strat-card{background:var(--surface2);border-color:var(--border)}
#md-setup .md-strat-card:hover{border-color:var(--border2);box-shadow:none;transform:none}
#md-setup .md-strat-card.on{
  background:var(--accent-dim);
  border-color:var(--accent-bright);
  box-shadow:none;
}

/* phone: a segmented control never wraps - keep one track, shrink the
   segments, and let it scroll quietly if a locale ever overflows */
@media (max-width:700px){
  #screen-mock #md-sections{
    flex-wrap:nowrap!important;
    max-width:100%;
    overflow-x:auto;
    scrollbar-width:none;
  }
  #screen-mock #md-sections::-webkit-scrollbar{display:none}
  #screen-mock .md-sec-btn{padding:7px 10px;font-size:12px;white-space:nowrap;flex:none}
}

/* ═══ PHONE ══════════════════════════════════════════════════════════════════
   Stack, scale down, keep taps big. The type clamps already do most of it. */
@media (max-width:700px){
  html.v12 .hero, .hero{padding-top:40px}
  .mk-hero-inner{padding:0 4px}
  /* the desktop line break makes a ragged third line at phone width; drop it
     and let text-wrap:balance split the headline evenly */
  .hero h1 br{display:none}
  /* three placeholder lines on a narrow screen: give the field the height */
  #hero-mock-ctx.mk-hero-field{min-height:96px}
  .mk-sub{font-size:17px}
  .mk-cta-row{gap:18px}
  .mk-btn{font-size:16px;padding:13px 26px}
  .mk-btnlink{font-size:16px}
  .mk-hero-shot{margin-left:-6px;margin-right:-6px}
  .mk-steps{gap:30px}
  .mk-chat{max-width:100%}
  .mk-chat-q{max-width:88%}
  .mk-chat-a{max-width:96%}
  .mk-trio{gap:26px;text-align:center}
  .mk-cards{grid-template-columns:1fr}
  .mk-plat{padding:10px 16px;font-size:14px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PART 4 - THE APP CONTROLS JOIN THE SYSTEM.

   The tools screens (Analyze, My League, Research, Community, Learn, Sage)
   still follow data-theme - dark by default, light with the toggle - so every
   rule here speaks in the --mk-seg-* / system tokens, which already resolve
   both ways. This retires the old purple-tint tab bars and pills and replaces
   them with the same Apple segmented control the mock setup got in PART 3.
   Selectors carry the skin prefix so, loading last at equal specificity, they
   win over theme.css / v11.css / v12.css without !important.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. the five inner tab bars: one recessed track, raised active thumb ──── */
html.v11 .inner-tab-bar, html.v12 .inner-tab-bar{
  display:inline-flex;
  gap:2px;
  padding:3px;
  background:var(--mk-seg-track);
  border:none;
  border-bottom:none;
  border-radius:11px;
  margin-bottom:16px;
}
html.v11 .inner-tab, html.v12 .inner-tab{
  background:transparent;
  border:none;
  border-radius:8px;
  padding:7px 16px;
  font-family:var(--mk-font);
  font-size:13px;
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--muted2);
  box-shadow:none;
  transition:color .16s var(--mk-ease),background .16s var(--mk-ease);
}
html.v11 .inner-tab:hover:not(.active), html.v12 .inner-tab:hover:not(.active){
  color:var(--text);
  background:transparent;
}
html.v11 .inner-tab.active, html.v12 .inner-tab.active{
  background:var(--mk-seg-on);
  color:var(--text);
  font-weight:600;
  border:none;
  box-shadow:0 1px 4px rgba(0,0,0,.16),0 0 0 .5px rgba(0,0,0,.04);
}
/* phone: a segmented control never wraps - one track, quiet scroll.
   Community carries six tabs, so this matters. min-height 42px tap targets
   come from styles.css and are left alone. */
@media (max-width:700px){
  html.v11 .inner-tab-bar, html.v12 .inner-tab-bar{
    display:flex;
    flex-wrap:nowrap;
    max-width:100%;
    overflow-x:auto;
    scrollbar-width:none;
  }
  html.v11 .inner-tab-bar::-webkit-scrollbar, html.v12 .inner-tab-bar::-webkit-scrollbar{display:none}
  html.v11 .inner-tab, html.v12 .inner-tab{padding:7px 12px;font-size:12px;white-space:nowrap;flex:none}
}

/* ── 2. the share-context + buy/sell segmented rows (.ctx-seg) ──────────────
   Same control, same answer. Equal-width segments (flex:1 1 0 from styles.css)
   are correct iOS and stay. */
html.v11 .ctx-seg, html.v12 .ctx-seg{
  gap:2px;
  padding:3px;
  background:var(--mk-seg-track);
  border-radius:11px;
}
html.v11 .ctx-seg-btn, html.v12 .ctx-seg-btn{
  background:transparent;
  border:none;
  border-radius:8px;
  color:var(--muted2);
  font-family:var(--mk-font);
  font-weight:500;
  letter-spacing:-.01em;
  transition:color .16s var(--mk-ease),background .16s var(--mk-ease);
}
html.v11 .ctx-seg-btn:hover:not(.active), html.v12 .ctx-seg-btn:hover:not(.active){color:var(--text)}
html.v11 .ctx-seg-btn.active, html.v12 .ctx-seg-btn.active{
  background:var(--mk-seg-on);
  color:var(--text);
  font-weight:600;
  box-shadow:0 1px 4px rgba(0,0,0,.16),0 0 0 .5px rgba(0,0,0,.04);
}

/* ── 3. Players quick-filter chips: quiet hairline, accent on the pick ──────
   Single-select view switchers - same recipe as the mock section chips
   before they went segmented. State is .on, written by togglePdbChip. */
html.v11 .pdb-chip, html.v12 .pdb-chip{
  background:transparent;
  border:1px solid var(--border);
  border-radius:100px;
  color:var(--muted2);
  font-family:var(--mk-font);
  font-weight:500;
  letter-spacing:-.01em;
}
html.v11 .pdb-chip:hover, html.v12 .pdb-chip:hover{
  background:transparent;
  border-color:var(--border2);
  color:var(--text);
  transform:none;
}
html.v11 .pdb-chip.on, html.v12 .pdb-chip.on{
  background:var(--mk-seg-on);
  border-color:transparent;
  color:var(--accent-bright);
  font-weight:600;
  box-shadow:0 1px 4px rgba(0,0,0,.16);
}

/* ── 4. the Dynasty/Redraft mini-toggle (Compare + Players) ─────────────────
   The wrapper span carries the recessed track inline; the buttons take their
   colors here so the .on state (written by styleModeButtons) works per theme. */
html.v11 [data-modebtn], html.v12 [data-modebtn]{
  background:transparent;
  color:var(--muted2);
  font-family:var(--mk-font);
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  transition:color .16s var(--mk-ease),background .16s var(--mk-ease);
}
html.v11 [data-modebtn]:hover, html.v12 [data-modebtn]:hover{color:var(--text)}
html.v11 [data-modebtn].on, html.v12 [data-modebtn].on{
  background:var(--mk-seg-on);
  color:var(--text);
  font-weight:700;
  box-shadow:0 1px 4px rgba(0,0,0,.16),0 0 0 .5px rgba(0,0,0,.04);
}

/* ── 5. Community's Refresh: the quiet button, not a purple pill ──────────── */
html.v11 .comm-head .btn-sm, html.v12 .comm-head .btn-sm{
  background:var(--surface);
  border:1px solid var(--border2);
  color:var(--muted2);
}
html.v11 .comm-head .btn-sm:hover, html.v12 .comm-head .btn-sm:hover{
  background:var(--surface);
  border-color:var(--border2);
  color:var(--text);
  transform:none;
}

/* ── 6. Ask Sage suggestion pills: hairline chips, no lift, no glow ───────── */
html.v11 .sage-sugg, html.v12 .sage-sugg{
  background:transparent;
  border:1px solid var(--border);
  color:var(--muted2);
  font-family:var(--mk-font);
  font-weight:500;
  letter-spacing:-.01em;
  box-shadow:none;
}
html.v11 .sage-sugg:hover, html.v12 .sage-sugg:hover{
  border-color:var(--border2);
  color:var(--text);
  transform:none;
  box-shadow:none;
}

/* ── PART 5 — SAGE THE OWL COMES ALIVE ─────────────────────────────────────
   The Ask Sage greeting owl idles like a real mascot: a slow float with a
   tiny tilt, and (via JS) an occasional expression peek. The nav owl gets a
   gentle nod on hover. Both sit out entirely under prefers-reduced-motion. */
@keyframes sage-float{
  0%,100%{transform:translateY(0) rotate(0deg)}
  30%{transform:translateY(-5px) rotate(-2deg)}
  60%{transform:translateY(-2px) rotate(1.5deg)}
}
html.v11 .sage-greet-owl, html.v12 .sage-greet-owl{
  animation:sage-float 4.5s ease-in-out infinite;
  transform-origin:center bottom;
  will-change:transform;
}
html.v11 .tm-logo-owl, html.v12 .tm-logo-owl{
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
html.v11 .nav-logo:hover .tm-logo-owl, html.v12 .nav-logo:hover .tm-logo-owl{
  transform:rotate(-8deg) scale(1.12);
}
@media (prefers-reduced-motion: reduce){
  html.v11 .sage-greet-owl, html.v12 .sage-greet-owl{animation:none}
  html.v11 .nav-logo:hover .tm-logo-owl, html.v12 .nav-logo:hover .tm-logo-owl{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PART 6 — THE PHONE PASS. A systematic audit at 390x844 against the four
   mobile sins: overlap with the fixed tab bar, sub-thumb tap targets, inputs
   that trigger Safari's focus zoom, and rows that can push the page sideways.
   Everything here is phone-scoped; the desktop never sees any of it.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:700px){
  /* The bottom tab bar owns the last ~57px of the viewport (plus the home
     indicator), and three surfaces were parking under it:
     - the sticky draft bar (its inline bottom now reads this variable),
     - the Analyze status pill (inline bottom:28px sat behind the bar),
     - every z-index 200/300 modal, which the z-index 350 bar overdrew -
       leaving the tab bar tappable ON TOP of an open dialog. */
  html.v11 #md-draftbar, html.v12 #md-draftbar{
    --md-bar-b:calc(68px + env(safe-area-inset-bottom,0px));
  }
  html.v11 #anz-toast, html.v12 #anz-toast{
    bottom:calc(76px + env(safe-area-inset-bottom,0px)) !important;
  }
  html.v11 #connect-modal, html.v12 #connect-modal,
  html.v11 .modal-overlay,  html.v12 .modal-overlay,
  html.v11 #md-edit-modal,  html.v12 #md-edit-modal,
  html.v11 #md-hist-modal,  html.v12 #md-hist-modal{
    z-index:450 !important;
  }

  /* Roster counters: eight chips on one un-wrapping inline row is wider than
     a 390px phone - the one place this page could scroll sideways. Wrap them,
     and since the counters are filter shortcuts now, give each a real tap
     height while they are at it. */
  html.v11 #md-needs, html.v12 #md-needs{flex-wrap:wrap}
  html.v11 #md-needs span, html.v12 #md-needs span{
    display:inline-flex;align-items:center;min-height:32px;padding:4px 10px;
  }

  /* Tap targets measured under 44px: the modal X (28px), the queue and draft
     circles on every player row (20/26px - drawn inline, so !important is
     the lever this file family already uses for those rows), the sortable
     table header, and the Rookies/Drafted chips (now matching the position
     chips beside them). */
  html.v11 .cm-x, html.v12 .cm-x{width:40px;height:40px;top:6px;right:8px;font-size:18px}
  html.v11 .md-ch-q,  html.v12 .md-ch-q{width:30px !important;height:30px !important}
  html.v11 .md-ch-sel, html.v12 .md-ch-sel{width:40px !important;height:40px !important}
  html.v11 .md-tbl-head .md-ch-stat, html.v12 .md-tbl-head .md-ch-stat{
    min-height:32px;display:inline-flex;align-items:center;justify-content:flex-end;
  }
  html.v11 .md-flag-chip, html.v12 .md-flag-chip{
    min-height:40px;display:inline-flex;align-items:center;justify-content:center;flex:none;
  }

  /* Safari zooms the whole page onto any focused input under 16px, and every
     input in the product sat at 12-14.5px - tapping the draft search or Ask
     Sage jolted the layout. 16px on phones only; desktop keeps its scale. */
  html.v11 .tm-input, html.v12 .tm-input{font-size:16px !important}
  html.v11 .sage-composer textarea, html.v12 .sage-composer textarea,
  html.v11 .comm-opinion-input textarea, html.v12 .comm-opinion-input textarea,
  html.v11 .hero-mock-start textarea, html.v12 .hero-mock-start textarea{font-size:16px}
}

/* ── The homepage product film ──────────────────────────────────────────────
   Square reel in the hero shot slot: contained width, generous radius, the
   deep shadow that lifts dark media off the light page. Reduced motion gets
   the poster only (the film pauses via the same media query the rest obeys). */
html.v11 .mk-film, html.v12 .mk-film{
  display:block;
  width:min(620px, 92vw);
  height:auto;
  margin:0 auto;
  border-radius:28px;
  box-shadow:0 30px 80px rgba(20,10,50,.28);
  background:#050507;
}
@media (prefers-reduced-motion: reduce){
  html.v11 .mk-film, html.v12 .mk-film{content:url("/promo-poster.jpg")}
}

/* ═══ PART 7 — DRAFT NIGHT: the marketing page goes dark ═══════════════════
   The owner's call: the light Apple clone hid the product's identity. Same
   type discipline, dark canvas. Declared LAST so these tokens win PART 1. */
:root{
  --mk-page:#050507;
  --mk-band:#0b0b0f;
  --mk-ink:#f5f5f7;
  --mk-ink2:#9a9aa3;
  --mk-hair:rgba(255,255,255,.09);
  --mk-acc:#9b72e8;
}
html.v11 .mk-card, html.v12 .mk-card, .mk-card{
  background:#101016;
  border:1px solid rgba(255,255,255,.07);
}
/* rich stills inside the feature cards */
html.v11 .mk-shot, html.v12 .mk-shot{
  display:block;
  width:100%;
  height:auto;
  margin-top:16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
}
/* the film: landscape, wide, lifted off the dark page by a purple-tinted glow */
html.v11 .mk-film, html.v12 .mk-film{
  width:min(1120px,94vw);
  height:auto;
  border-radius:24px;
  box-shadow:0 30px 90px rgba(107,63,255,.22);
}
@media (prefers-reduced-motion: reduce){
  html.v11 .mk-film, html.v12 .mk-film{content:url("/promo-poster.jpg")}
}
/* the burger knows it has secrets: a purple dot that pings three times on
   load, then holds - enough to say "there's more in here" without nagging */
html.v11 .nav-burger-alive, html.v12 .nav-burger-alive{position:relative;overflow:visible}
html.v11 .nav-burger-dot, html.v12 .nav-burger-dot{
  position:absolute; top:5px; right:5px;
  width:7px; height:7px; border-radius:50%;
  background:var(--mk-acc-dark,#9b72e8);
  pointer-events:none;
}
html.v11 .nav-burger-dot::after, html.v12 .nav-burger-dot::after{
  content:""; position:absolute; inset:-2px; border-radius:50%;
  border:2px solid var(--mk-acc-dark,#9b72e8);
  animation:mk-burger-ping 2s var(--mk-ease) .8s 3;
  opacity:0;
}
@keyframes mk-burger-ping{
  0%{transform:scale(.6);opacity:.9}
  100%{transform:scale(2.6);opacity:0}
}
@media (prefers-reduced-motion: reduce){
  html.v11 .nav-burger-dot::after, html.v12 .nav-burger-dot::after{animation:none}
}

/* ── PART 7b — THE STADIUM BREATHES ────────────────────────────────────────
   Owner: "full black is too black - put a draft board back there." A blurred
   night stadium with the big board glowing (Higgsfield) sits behind the hero;
   the page base lifts from pure black to charcoal so the dark has depth. */
:root{
  --mk-page:#0a0a10;
  --mk-band:#0d0d14;
}
html.v11 .hero, html.v12 .hero{
  background:
    linear-gradient(180deg, rgba(10,10,16,.30) 0%, rgba(10,10,16,.55) 62%, var(--mk-page-solid) 100%),
    url("/bg-stage.jpg") center top / cover no-repeat,
    var(--mk-page-solid);
}
@media (max-width:700px){
  html.v11 .hero, html.v12 .hero{
    background:
      linear-gradient(180deg, rgba(10,10,16,.30) 0%, rgba(10,10,16,.55) 62%, var(--mk-page-solid) 100%),
      url("/bg-stage-m.jpg") center top / cover no-repeat,
      var(--mk-page-solid);
  }
}

/* ── PART 7c — THE ATMOSPHERE FOLLOWS THE SCROLL ───────────────────────────
   Owner: "cuando scrolleas se pierde el background." The page and band
   tokens become layered auroras - every section below the hero keeps a soft
   purple/teal breath instead of collapsing to flat charcoal. */
:root{
  --mk-page-solid:#0a0a10;
  --mk-page:
    radial-gradient(1100px 700px at 12% 8%, rgba(107,63,255,.10), transparent 62%),
    radial-gradient(900px 620px at 88% 42%, rgba(103,232,249,.05), transparent 60%),
    radial-gradient(1000px 700px at 40% 96%, rgba(107,63,255,.07), transparent 62%),
    #0a0a10;
  --mk-band:
    radial-gradient(1000px 640px at 85% 10%, rgba(107,63,255,.09), transparent 60%),
    radial-gradient(820px 560px at 10% 80%, rgba(103,232,249,.05), transparent 58%),
    #0d0d14;
}

/* Mac rides the phone tab bar - full colour, lifted a touch so he sits like
   an icon, and he brightens with the active tab instead of tinting. */
html.v11 .tabbar-mac, html.v12 .tabbar-mac{
  object-fit:contain;
  display:block;
  margin:0 auto -1px;
  opacity:.72;
  transition:opacity .18s var(--mk-ease),transform .18s var(--mk-ease);
}
html.v11 .tabbar-item.active .tabbar-mac, html.v12 .tabbar-item.active .tabbar-mac{
  opacity:1;transform:scale(1.1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   A08 - correcciones de UX movil. Se anade al FINAL de home.css, que es la
   ultima hoja que carga, para ganarle a las reglas de tamano que ya existen
   en styles.css y theme.css sin repartir !important por todo el proyecto.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A08-1. La sala de draft se salia del telefono ──────────────────────────
   #md-pos-filter y #md-sections son items flex con min-width:auto, asi que su
   tamano minimo automatico le ganaba a max-width y a overflow-x:auto: la caja
   crecia (428px dentro de una columna de 320) en vez de scrollear su contenido.
   Con html,body en overflow-x:clip el sobrante no se podia ni alcanzar.
   min-width:0 es lo que devuelve el control a max-width y hace que el scroll
   interno exista de verdad. */
@media(max-width:700px){
  /* PRIMERO el contenedor. La fila que envuelve filtros+orden+buscador lleva
     su display:flex en el atributo style y hereda min-width:auto, asi que era
     ELLA la que se quedaba en 428px; con max-width:100% sobre #md-pos-filter
     el 100% resolvia contra esos mismos 428 y no servia de nada. */
  #md-available div:has(> #md-pos-filter),
  #au-z-center div:has(> #md-pos-filter){min-width:0;max-width:100%}

  #screen-mock #md-pos-filter,
  #au-z-center #md-pos-filter,
  #screen-mock #md-sections{
    min-width:0;
    flex:1 1 100%;
    overflow-x:auto;
    flex-wrap:nowrap;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  #screen-mock #md-pos-filter::-webkit-scrollbar,
  #screen-mock #md-sections::-webkit-scrollbar{display:none}
  /* el buscador de jugadores ocupa su propia linea completa, sin base fija */
  #screen-mock #md-avail-search{
    flex:1 1 100%;
    min-width:0;
    max-width:100%;
  }
  #screen-mock #md-sort{flex:0 0 auto;max-width:100%}
  #md-available > div,
  #md-available > div > div{min-width:0}
}

/* ── A08-2. Areas tactiles a 44px ───────────────────────────────────────────
   Todo lo que se toca en el telefono llega al minimo de 44x44 CSS px. Los
   anchos de columna de la lista de jugadores (--md-cols) los escribe app.js
   en el style inline del contenedor, asi que las dos columnas de botones se
   corrigen en app.js (parche 2b) y aqui solo se fija la altura. */
@media(max-width:700px){
  /* Iconos de la cabecera: eran 30x30. Subirlos a 44 anade 42px al lado
     derecho, y eso solo partia el wordmark en dos lineas, asi que el bloque
     va junto: nowrap en el wordmark y margenes de los iconos a cero. */
  .nav{gap:4px}
  .nav-logo{flex:0 0 auto;min-width:0}
  .tm-wordmark{white-space:nowrap}
  .nav .theme-toggle.icon{width:44px;height:44px;margin-left:0}
  #alerts-wrap,#nav-search-wrap{margin-left:0!important}
  .nav #nav-signin{min-height:44px}

  /* Lista de jugadores: draftear y cola. Las dos columnas pasan de 28 y 34px
     a 44 (parche 2b en app.js), lo que le quita 26px al nombre y hacia que
     "Christian McCaffrey" partiera la fila en tres lineas. Bajar el hueco
     entre columnas de 8 a 4px devuelve el ancho: medido, la fila mas alta
     vuelve de 71px a 59px en 320 y en 390. */
  #md-choices .md-bd-go,
  #md-choices .md-bd-q{min-width:44px;min-height:44px}
  #md-choices .md-bd-row{min-height:44px}
  #md-choices .md-bd-more{min-height:44px}
  #md-choices .md-bd-head,
  #md-choices .md-bd-row{column-gap:4px!important}
  #screen-mock #md-sort{width:auto!important}

  /* controles de la sala */
  #screen-mock .md-view-btn{min-height:44px;padding:0 14px}
  #screen-mock .md-pos-chip,
  #screen-mock .md-flag-chip,
  #au-z-center .md-pos-chip,
  #au-z-center .md-flag-chip{min-height:44px;display:inline-flex;align-items:center;justify-content:center;flex:none}
  #screen-mock .md-sec-btn{min-height:44px}
  #screen-mock .md-rb-btn{min-height:44px}
  #screen-mock .opp-select,
  #screen-mock #md-sort{min-height:44px}
  #screen-mock .btn-sm{min-height:44px}

  /* panel de roster: los chips de necesidad filtran la lista al tocarlos */
  #md-roster .mdr-need{min-height:44px}
  #md-roster .mdr-head{min-height:44px}
  #md-roster .mdr-slot{min-height:44px}

  /* casillas: 13x13 y 18x18 no se pueden tocar */
  #screen-mock input[type=checkbox],
  #md-auto{width:22px;height:22px;flex:none}
  #screen-mock label:has(> input[type=checkbox]),
  #md-setup .md-check{min-height:44px;display:flex;align-items:center;gap:10px}

  /* subasta */
  #au-mhead .au-x{width:44px;height:44px;flex:none}
  #au-tabs .au-tab{min-height:44px}
  #au-lot .au-stepbtn{min-width:44px;min-height:44px}
  #au-lot .btn-sm{min-height:44px}

  /* pestanas internas y modales */
  .inner-tab{min-height:44px;display:inline-flex;align-items:center}
  .pm-close{width:44px;height:44px}
  #connect-modal .cm-x{width:44px;height:44px}
}

/* ── A08-2b. Telefonos estrechos (<=400px) ──────────────────────────────────
   A 320-375px no caben logo + CTA + tres iconos de 44px de ancho. Se mantiene
   el area tactil de 44x44 con un ::after invisible y se baja la caja visible a
   40px. Por debajo de 360px sigue sin caber todo: cede lo funcional, no la
   marca. El loro se queda y la campana de alertas se va al drawer "More",
   donde el parche de index.html le pone su entrada. Medido: con esto todo lo
   que queda en la barra entra en pantalla y el wordmark ocupa una sola linea
   en 320, 360 y 390, cosa que sin el parche no pasa en ninguno de los tres. */
@media(max-width:400px){
  .nav .theme-toggle.icon{width:40px;height:40px;position:relative}
  .nav .theme-toggle.icon::after{
    content:"";position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);width:44px;height:44px;
  }
}
/* La regla base va ANTES del media query: con la misma especificidad ganaria
   la ultima, y la entrada del drawer no apareceria nunca. */
.mob-menu-item.mob-alerts{display:none}
@media(max-width:360px){
  /* se oculta el BOTON, nunca #alerts-wrap: el panel #alerts-dd es hijo suyo,
     y ocultando el contenedor el panel no podria abrirse desde el drawer */
  #alerts-wrap > button{display:none}
  #alerts-wrap{margin-left:0!important;width:0}
  /* Al colapsar el contenedor a 0px, el panel (position:absolute anclado a el)
     se iria a x=-5. styles.css:1713 ya pedia pinnearlo al viewport ("so it
     always fits"), pero hoy esa regla no gana: el valor calculado sigue siendo
     absolute. Se fuerza aqui, y solo en <=360px, que es donde movemos la
     campana; en 361px y arriba el comportamiento actual no se toca. */
  #alerts-dd{
    position:fixed!important;
    left:10px!important;right:10px!important;
    top:64px!important;
    min-width:0!important;width:auto!important;
  }
  .nav #nav-signin{padding-left:10px;padding-right:10px;font-size:12px}
  .mob-menu-item.mob-alerts{display:block}
}

/* ── A08-3. Safe area: horizontal ───────────────────────────────────────────
   Con viewport-fit=cover (parche 3a en index.html) el viewport se extiende
   hasta el borde fisico. En vertical el inset lateral es 0 y esto no cambia
   nada; en horizontal, en un iPhone con notch, son 34-59px y sin esto el
   wordmark y las pestanas de los extremos quedan bajo el notch o la esquina.
   Los insets inferiores ya estaban escritos en las 11 reglas existentes. */
.nav{
  padding-left:max(1.5rem, env(safe-area-inset-left,0px));
  padding-right:max(1.5rem, env(safe-area-inset-right,0px));
}
@media(max-width:1200px){
  .nav{
    padding-left:max(.75rem, env(safe-area-inset-left,0px));
    padding-right:max(.75rem, env(safe-area-inset-right,0px));
  }
}
@media(max-width:700px){
  .nav{
    padding-left:max(.5rem, env(safe-area-inset-left,0px));
    padding-right:max(.5rem, env(safe-area-inset-right,0px));
  }
  #tabbar{
    padding-left:env(safe-area-inset-left,0px);
    padding-right:env(safe-area-inset-right,0px);
  }
  #ticker-bar,#md-rstrip,#au-mtabs,#md-roster{
    padding-left:max(10px, env(safe-area-inset-left,0px));
    padding-right:max(10px, env(safe-area-inset-right,0px));
  }
}
/* los dos calc() sin fallback se caen enteros en un motor sin env() */
@media(max-width:700px){
  #au-mtabs{padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}
  #md-rstrip.in-au{bottom:calc(56px + env(safe-area-inset-bottom,0px))}
}

/* ── A08-4. Zoom automatico de iOS ──────────────────────────────────────────
   styles.css:1487 ya fuerza 16px en <=700px, pero home.css:896 carga despues
   con mas especificidad (#md-setup .opp-select = 13.5px) y los selects de
   #md-profiles-rows llevan font-size:12px en el atributo style, que solo se
   gana con !important. Por debajo de 16px Safari iOS hace zoom al enfocar. */
/* El segundo media query cubre el telefono en horizontal: un iPhone 14 apaisado
   mide 844px de ancho, asi que NINGUNA regla <=700px se aplica ahi, y el zoom
   de iOS al enfocar depende del tamano de letra, no de la orientacion. */
@media(max-width:700px),
       (max-height:500px) and (orientation:landscape) and (pointer:coarse){
  #md-setup .opp-select,
  #md-setup .tm-input,
  #ld-card .opp-select,
  #mp-card .tm-input,
  #md-profiles-rows .opp-select,
  #md-sort,
  #md-avail-search{font-size:16px!important}
}

/* ── A08-4b. El buscador del nav rompia la cabecera ─────────────────────────
   Abierto medía 168px y salia 18px fuera del viewport, partia el wordmark en
   dos lineas y empujaba fuera de pantalla los botones de alertas y tema. En
   el telefono pasa a ser una capa a ancho completo, el mismo tratamiento que
   ya se le dio al panel de alertas en styles.css:1708. */
@media(max-width:700px){
  /* el wrap lleva position:relative en el atributo style del HTML, que solo se
     puede vencer con !important sin tocar el markup */
  #nav-search-wrap.open{
    position:fixed!important;
    left:max(8px, env(safe-area-inset-left,0px));
    right:max(8px, env(safe-area-inset-right,0px));
    top:8px;
    z-index:200;
    margin-left:0!important;
  }
  #nav-search-wrap.open .nav-search-input{
    width:100%;
    min-height:44px;
    margin-left:0;
    padding:6px 14px 6px 40px;
  }
  #nav-search-wrap.open #nav-search-btn{
    position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:1;
    width:40px;height:44px;
  }
  #nav-search-wrap.open #nav-search-dd{
    left:0!important;right:0!important;
    min-width:0!important;width:auto;
    max-height:60vh;overflow-y:auto;overscroll-behavior:contain;
  }
}

/* ── A08-5b. Feedback tactil ────────────────────────────────────────────────
   En el telefono no hay hover: ocho clases de la sala de draft no daban
   ninguna respuesta al tocarlas, y el unico resaltado era el azul de fabrica
   del navegador (rgba(51,181,229,.4)) sobre una app morada. */
html{-webkit-tap-highlight-color:transparent}
@media(max-width:700px){
  .md-bd-go:active,.md-bd-q:active,.md-bd-more:active,
  .md-pos-chip:active,.md-flag-chip:active,
  .md-sec-btn:active,.md-rb-btn:active,.md-view-btn:active,
  .inner-tab:active,.mdr-need:active,.au-tab:active{
    background:var(--accent-dim);
    filter:brightness(1.25);
  }
  .md-bd-row:active,.mdr-slot:active{background:var(--surface2)}
  .btn-sm:active,.btn-primary:active,.btn-load:active{transform:scale(.97)}
}

/* ── A08-5c. Scroll encadenado ──────────────────────────────────────────────
   Al llegar al final de un scroller interno el gesto seguia moviendo la
   pagina, que en medio de un draft se lee como "se movio sola". */
#md-choices,
#md-roster .mdr-slots,
.inner-tab-bar,
.au-boardrow,
#alerts-dd,
.pm-card,
.mob-menu-panel{overscroll-behavior:contain}

/* ── A08-5d. Texto por debajo de 12px ───────────────────────────────────────
   Se sube el minimo de texto de interfaz a 12px. Varios de estos llevan el
   font-size en el atributo style del elemento, asi que solo ceden a
   !important; por eso el bloque lo lleva entero, para que no queden a medias.
   Excepciones deliberadas, NO tocar:
     - div.footer-legal (11px): es letra pequena legal, no texto de interfaz.
     - #tabbar (10px -> 11px): a 12px las cinco etiquetas no caben en 320px.
       Medido, 11px si entra y sube un punto sobre el original.
     - los distintivos "ESPN" (8px) y "Y!" (10px) de #login-panel: son marcas
       dentro de un chip de 18px de alto; a 12px la letra desborda el chip.
       Si se quieren legibles hay que agrandar el chip, que es cosa de diseno. */
@media(max-width:700px){
  #tabbar .tabbar-item{font-size:11px!important}
  #mode-badge,
  #login-panel .hint-row,
  #login-panel div,
  #login-panel span:not([style*="background"]),
  #how-mini div,
  #screen-community span,
  #board-builder .side-clear-btn,
  #md-finetune div,
  #home-news-grid div,
  #home-analyst-row .ac-src,
  #home-analyst-row .ac-f,
  #home-analyst-row .ac-d,
  #home-news-wrap span,
  #home-story .mk-chat-tag,
  #player-modal .pm-ktc-label,
  #md-setup div,
  #md-finetune summary,
  #md-profiles summary,
  #md-profiles strong,
  #md-profiles span,
  #md-profiles-note,
  #md-fz26-bar span,
  #md-profiles-rows span,
  #sage-side .sage-side-empty,
  #sage-greeting .sage-cap,
  #sage-suggestions .sage-sugg,
  #league-meta,
  #board-builder span,
  #builder-panel div,
  #board-mine .bb-empty,
  #board-opp .bb-empty,
  #ideas-header span,
  #ideas-league-name{font-size:12px!important}
}

/* ── A08-5e. Chips de capacidades de Mac ────────────────────────────────────
   space-between partia "Reads / your roster" en dos columnas desalineadas. */
@media(max-width:700px){
  #sage-greeting .sage-cap{justify-content:flex-start;gap:6px;white-space:nowrap}
}

/* ═══ PART 8 — THE LIGHT ROOM ═══════════════════════════════════════════════ */
html[data-theme="light"]{
  --mk-page-solid:#ffffff;
  --mk-page:#ffffff;
  --mk-band:#f5f5f7;
  --mk-ink:#1d1d1f;
  --mk-ink2:#6e6e73;
  --mk-hair:rgba(0,0,0,.10);
  /* ►►► EL MORADO DE MARCA ENTRA AQUI (tema claro) ◄◄◄
     Consume el token de A10. En el tema claro este acento juega LOS DOS
     roles: relleno de boton con texto blanco Y tinta sobre pagina/banda.
     El fallback solo cubre el caso de que el token no exista todavia. */
  --mk-acc:var(--accent-btn);
}
html.v11[data-theme="light"] .hero, html.v12[data-theme="light"] .hero{
  background:
    radial-gradient(1200px 760px at 50% -12%, color-mix(in srgb, var(--mk-acc) 10%, transparent), transparent 64%),
    #ffffff;
}
@media (max-width:700px){
  html.v11[data-theme="light"] .hero, html.v12[data-theme="light"] .hero{
    background:
      radial-gradient(720px 520px at 50% -8%, color-mix(in srgb, var(--mk-acc) 12%, transparent), transparent 66%),
      #ffffff;
  }
}
html[data-theme="light"] .mk-dark{background:var(--mk-page);color:var(--mk-ink)}
html[data-theme="light"] #home-problem{background:var(--mk-band)}
html[data-theme="light"] .mk-dark .mk-sub{color:var(--mk-ink2)}
html[data-theme="light"] .mk-dark .mk-eyebrow-acc{color:var(--mk-acc)}
html[data-theme="light"] .mk-dark .mk-btnlink{color:var(--mk-acc)}
/* el relleno de boton lo manda el token de relleno de A10, no el acento de tinta */
html[data-theme="light"] .mk-dark .mk-btn{background:var(--accent-btn)}
html[data-theme="light"] .mk-lines{color:var(--mk-ink2)}
html[data-theme="light"] .mk-lines-strong{color:var(--mk-ink)}
html[data-theme="light"] .mk-lines .hl2{color:var(--mk-acc)}
html[data-theme="light"] .mk-founder p{color:var(--mk-ink2)}
html[data-theme="light"] .mk-founder .mk-founder-lead{color:var(--mk-ink)}
html[data-theme="light"] .mk-founder .mk-founder-close{color:var(--mk-acc)}
html[data-theme="light"] .mk-founder-sign{color:#6e6e73}
html[data-theme="light"] #home-story > .mk-sec.mk-dark{background:#000;color:#f5f5f7}
html[data-theme="light"] #home-story > .mk-sec.mk-dark .mk-sub{color:#a1a1a6}
html[data-theme="light"] #home-story > .mk-sec.mk-dark .mk-eyebrow-acc{color:var(--mk-acc-dark)}
html[data-theme="light"] #home-story > .mk-sec.mk-dark .mk-btnlink{color:var(--mk-acc-dark)}
html[data-theme="light"] .mk-card,
html.v11[data-theme="light"] .mk-card,
html.v12[data-theme="light"] .mk-card{
  background:#ffffff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 2px 12px rgba(29,29,31,.06);
}
html.v11[data-theme="light"] .mk-shot, html.v12[data-theme="light"] .mk-shot{
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 10px 28px -14px rgba(29,29,31,.35);
}
html.v11[data-theme="light"] .mk-film, html.v12[data-theme="light"] .mk-film{
  background:#050507;
  box-shadow:0 30px 90px -20px rgba(29,29,31,.42),0 8px 28px -12px rgba(29,29,31,.22);
}