/* Market Match (/markets/match). Dark theme (docs/design/THEME.md): the page is --ce-bg like every
   other page. The match used to be a near-black island card on a light page; it is now the page's
   landing hero, on --ce-bg with the homepage hero's two soft glows, and its question and result cards
   are ordinary --ce-surface cards. Every colour is a --ce-* token from assets/mobile.css. */
.match-page-main{padding-bottom:54px}

.mm-shell{position:relative;isolation:isolate;min-height:760px;margin:4px 0 40px;padding:clamp(20px,4vw,48px) 0 0;color:var(--ce-ink)}
/* The homepage hero's two soft glows (teal right, violet left), behind the intro only. Each ellipse
   reaches full transparency inside the box, so no edge is ever drawn and nothing overflows the frame. */
.mm-shell:before{content:"";position:absolute;left:0;right:0;top:0;height:680px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 30% 46% at 70% 40%,color-mix(in srgb,var(--ce-good) 12%,transparent),transparent 100%),radial-gradient(ellipse 28% 42% at 28% 46%,color-mix(in srgb,var(--ce-chart-4) 10%,transparent),transparent 100%)}
.mm-ambient{position:absolute;inset:0;z-index:-1;pointer-events:none}
.mm-ambient i{position:absolute;border-radius:50%;background:var(--ce-cyan);box-shadow:0 0 18px var(--ce-cyan);opacity:.45;animation:mmFloat 12s ease-in-out infinite}
.mm-ambient i:nth-child(1){width:4px;height:4px;top:9%;left:8%}
.mm-ambient i:nth-child(2){width:3px;height:3px;top:20%;right:11%;animation-delay:-4s}
.mm-ambient i:nth-child(3){width:5px;height:5px;top:52%;left:14%;animation-delay:-8s}
@keyframes mmFloat{0%,100%{transform:translate3d(0,0,0);opacity:.2}50%{transform:translate3d(0,-26px,0);opacity:.7}}

.mm-intro{max-width:830px;margin:0 auto 34px;text-align:center}
.mm-kicker,.mm-step{font:600 11px/1.4 var(--ce-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ce-cyan)}
.mm-intro h1{color:var(--ce-ink);font:600 clamp(34px,4.6vw,56px)/1.04 var(--ce-display);letter-spacing:-.035em;margin:15px auto 17px;max-width:16ch}
.mm-intro>p:not(.mm-kicker){font-size:clamp(15px,1.6vw,17px);line-height:1.65;color:var(--ce-muted);max-width:680px;margin:0 auto}
.mm-truth{display:inline-flex;text-align:left;align-items:flex-start;gap:11px;margin-top:21px;padding:11px 15px;border:1px solid var(--ce-border);background:var(--ce-surface);border-radius:var(--ce-radius-sm);color:var(--ce-muted);font-size:13px;line-height:1.5}
.mm-truth>span{color:var(--ce-cyan);font-size:16px}
.mm-truth b{color:var(--ce-ink)}

.mm-progress{max-width:820px;margin:0 auto 24px;position:relative}
.mm-progress-line{position:absolute;height:2px;background:var(--ce-border-strong);left:7%;right:7%;top:13px}
.mm-progress-line i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ce-link),var(--ce-primary));transition:width .45s cubic-bezier(.22,1,.36,1)}
.mm-progress ol{position:relative;display:flex;justify-content:space-between;list-style:none;padding:0;margin:0}
.mm-progress li{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ce-surface-2);border:1px solid var(--ce-border-input);color:var(--ce-dim);font:700 10px var(--ce-mono);transition:.3s}
.mm-progress li.done{border-color:var(--ce-link);background:var(--ce-surface-2);color:var(--ce-link)}
.mm-progress li.active{background:var(--ce-primary);border-color:var(--ce-primary);color:var(--ce-primary-ink);box-shadow:0 0 0 5px color-mix(in srgb,var(--ce-primary) 16%,transparent);transform:scale(1.08)}
.mm-progress p{text-align:center;color:var(--ce-dim);font:11px var(--ce-mono);margin-top:9px}

.mm-stage{max-width:940px;margin:0 auto;min-height:350px}
.mm-loading{min-height:330px;display:grid;place-content:center;text-align:center;color:var(--ce-muted)}
.mm-loading span{width:46px;height:46px;border:2px solid var(--ce-border-strong);border-top-color:var(--ce-cyan);border-radius:50%;margin:0 auto 15px;animation:mmSpin .8s linear infinite}
@keyframes mmSpin{to{transform:rotate(1turn)}}
.mm-question,.mm-results{outline:none}
.mm-question.enter,.mm-results.enter{animation:mmEnter .5s cubic-bezier(.22,1,.36,1) both}
@keyframes mmEnter{from{opacity:0;transform:translateY(16px) scale(.992)}to{opacity:1;transform:none}}

.mm-question{max-width:790px;margin:0 auto;padding:clamp(24px,4vw,40px);border:1px solid var(--ce-border);border-top:3px solid var(--ce-cyan);border-radius:var(--ce-radius);background:var(--ce-surface)}
.mm-question h2,.mm-results h2{color:var(--ce-ink);font:600 clamp(24px,3vw,34px)/1.12 var(--ce-display);letter-spacing:-.02em;margin:9px 0}
.mm-question-copy,.mm-results-head p{color:var(--ce-muted);line-height:1.6;font-size:14.5px;max-width:68ch}
.mm-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:24px 0}
.mm-option{appearance:none;width:100%;min-height:86px;text-align:left;display:flex;align-items:flex-start;gap:13px;padding:15px;border:1px solid var(--ce-border-strong);border-radius:12px;background:var(--ce-surface-2);color:var(--ce-ink);font-family:var(--ce-font);cursor:pointer;transition:transform .18s,border-color .18s,background .18s;animation:mmOption .38s calc(var(--i)*45ms) both}
@keyframes mmOption{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mm-option:hover{transform:translateY(-2px);border-color:var(--ce-link);background:var(--ce-surface-3)}
.mm-option.selected{border-color:var(--ce-primary);background:var(--ce-surface-3);box-shadow:inset 0 0 0 1px var(--ce-primary)}
.mm-option-mark{width:18px;height:18px;border:1px solid var(--ce-border-input);border-radius:50%;margin-top:2px;flex:none;display:grid;place-items:center}
.mm-option.selected .mm-option-mark{border-color:var(--ce-primary)}
.mm-option.selected .mm-option-mark:after{content:"";width:8px;height:8px;border-radius:50%;background:var(--ce-primary)}
.mm-option b{display:block;font-size:14.5px;color:var(--ce-ink);margin-bottom:5px}
.mm-option small{display:block;color:var(--ce-muted);font-size:12.5px;line-height:1.45}
.mm-nav{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mm-nav button,.mm-tune,.mm-result-tools button,.mm-result-tools a,.mm-more{appearance:none;border-radius:var(--ce-radius-sm);padding:11px 16px;font:650 13.5px var(--ce-font);cursor:pointer;text-decoration:none;transition:background .18s,border-color .18s,color .18s}
.mm-back{background:transparent;border:1px solid var(--ce-border-strong);color:var(--ce-ink)}
.mm-back:hover{background:var(--ce-surface-2)}
.mm-back:disabled{opacity:.4;cursor:default}
.mm-next,.mm-more{border:1px solid var(--ce-primary);background:var(--ce-primary);color:var(--ce-primary-ink)}
.mm-next:hover,.mm-more:hover{background:var(--ce-primary-hover);border-color:var(--ce-primary-hover)}

.mm-results{max-width:980px}
.mm-results-head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin:0 0 19px}
.mm-results-head>div{max-width:700px}
.mm-results-head .mm-step{font-size:11px;line-height:1.4;color:var(--ce-cyan)}
.mm-tune{background:transparent;color:var(--ce-ink);border:1px solid var(--ce-border-strong);white-space:nowrap}
.mm-tune:hover{background:var(--ce-surface-2)}
.mm-answer-strip{display:flex;gap:8px;overflow-x:auto;padding:2px 1px 11px;scrollbar-width:thin}
.mm-answer-strip button{appearance:none;flex:0 0 auto;text-align:left;border:1px solid var(--ce-border);background:var(--ce-surface-2);border-radius:var(--ce-radius-sm);padding:9px 12px;color:var(--ce-ink);cursor:pointer}
.mm-answer-strip button:hover{border-color:var(--ce-link)}
.mm-answer-strip span{display:block;color:var(--ce-dim);font:10px var(--ce-mono);text-transform:uppercase;letter-spacing:.09em}
.mm-answer-strip b{font-size:12.5px}
.mm-result-tools{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:6px 0 15px;color:var(--ce-muted);font-size:13px;line-height:1.5}
.mm-result-tools>div{display:flex;gap:8px}
.mm-result-tools button,.mm-result-tools a{border:1px solid var(--ce-border-strong);background:transparent;color:var(--ce-ink)}
.mm-result-tools button:hover,.mm-result-tools a:hover{background:var(--ce-surface-2)}
.mm-result-tools a.disabled{opacity:.45;pointer-events:none}
.mm-result-list{display:grid;gap:11px;list-style:none;padding:0}
.mm-result{animation:mmResult .52s calc(var(--i)*55ms) cubic-bezier(.22,1,.36,1) both}
@keyframes mmResult{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.mm-result article{display:grid;grid-template-columns:72px 1fr;border:1px solid var(--ce-border);border-radius:var(--ce-radius);background:var(--ce-surface);overflow:hidden;transition:transform .2s,border-color .2s}
.mm-result article:hover{transform:translateY(-2px);border-color:var(--ce-border-strong)}
.mm-result-rank{display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid var(--ce-border);background:var(--ce-surface-2)}
.mm-result-rank span{font:600 27px var(--ce-display);color:var(--ce-cyan)}
.mm-result-rank small{font:10px var(--ce-mono);color:var(--ce-dim);text-align:center;text-transform:uppercase;letter-spacing:.06em;max-width:56px}
.mm-result-main{padding:17px 18px}
.mm-result-title{display:flex;justify-content:space-between;gap:14px}
.mm-result-title h3{font:600 22px var(--ce-display);margin:5px 0 1px}
.mm-result-title h3 a{color:var(--ce-ink);text-decoration:none}
.mm-result-title h3 a:hover{color:var(--ce-link-hover)}
.mm-result-title p{color:var(--ce-muted);font-size:12px}
.mm-fit{display:inline-block;font:700 10px var(--ce-mono);letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:4px 8px}
.mm-fit.exact{color:var(--ce-good);background:var(--ce-good-bg);border:1px solid color-mix(in srgb,var(--ce-good) 40%,transparent)}
.mm-fit.near{color:var(--ce-warn);background:var(--ce-warn-bg);border:1px solid color-mix(in srgb,var(--ce-warn) 40%,transparent)}
.mm-miss{font-size:11px;color:var(--ce-muted);margin-left:7px}
.mm-compare-check{display:flex;align-items:center;gap:7px;color:var(--ce-muted);font-size:12px;cursor:pointer}
.mm-compare-check input{width:18px;height:18px;accent-color:var(--ce-primary)}
.mm-compare-check.limit{animation:mmShake .3s}
@keyframes mmShake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.mm-why{color:var(--ce-muted);font-size:13px;line-height:1.55;margin:11px 0}
.mm-why b{color:var(--ce-ink)}
.mm-result-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--ce-border);border-radius:var(--ce-radius-sm);overflow:hidden;background:var(--ce-surface-2)}
.mm-result-metrics>div{padding:9px 11px;border-right:1px solid var(--ce-border);border-bottom:1px solid var(--ce-border)}
.mm-result-metrics>div:nth-child(3n){border-right:none}
.mm-result-metrics>div:nth-last-child(-n+3){border-bottom:none}
.mm-result-metrics span{display:block;color:var(--ce-dim);font-size:11px;margin-bottom:3px}
.mm-result-metrics b{color:var(--ce-ink);font:600 13px var(--ce-mono)}
.mm-result-metrics b.positive{color:var(--ce-good)}
.mm-result-metrics b.negative{color:var(--ce-bad)}
.mm-result-foot{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin-top:10px;color:var(--ce-muted);font-size:11.5px;line-height:1.5}
.mm-result-foot b{color:var(--ce-ink)}
.mm-result-foot>div{grid-column:1/-1;display:flex;gap:16px}
.mm-result-foot a{font-size:12px;color:var(--ce-link);text-decoration:none}
.mm-result-foot a:hover{color:var(--ce-link-hover);text-decoration:underline}
.mm-caveat{color:var(--ce-muted)}
.mm-more-wrap{text-align:center;margin:22px 0 18px}
.mm-more{min-width:220px}
.mm-more-wrap p{color:var(--ce-dim);font-size:12px;margin-top:9px}
.mm-method{padding:15px 17px;border:1px solid var(--ce-border);border-left:3px solid var(--ce-cyan);background:var(--ce-surface);border-radius:0 var(--ce-radius-sm) var(--ce-radius-sm) 0;color:var(--ce-muted);font-size:12.5px;line-height:1.6}
.mm-method b{color:var(--ce-ink)}
.mm-method a{color:var(--ce-link)}
.mm-error{text-align:center;padding:50px;color:var(--ce-muted)}
.mm-error h2{color:var(--ce-ink)}
.mm-after{max-width:920px;margin:0 auto;padding:40px 18px 10px;text-align:center;border-top:1px solid var(--ce-border)}
.mm-after h2{font:600 var(--ce-h2)/1.2 var(--ce-display);letter-spacing:-.02em;color:var(--ce-ink);margin:9px 0}
.mm-after>p:not(.eyebrow):not(.asof){max-width:720px;margin:0 auto;color:var(--ce-muted);line-height:1.7}
.mm-after>div{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:20px 0}
.mm-after>div a{padding:11px 15px;border:1px solid var(--ce-border-strong);border-radius:var(--ce-radius-sm);background:transparent;color:var(--ce-ink);text-decoration:none;font-weight:650;font-size:13.5px}
.mm-after>div a:hover{background:var(--ce-surface-2)}

@media(max-width:700px){
.mm-shell{padding:16px 0 0;min-height:720px}
.mm-intro h1{font-size:34px}
.mm-truth{text-align:left}
.mm-options{grid-template-columns:1fr}
.mm-question{padding:22px 15px}
.mm-progress-line{left:5%;right:5%}
.mm-results-head{align-items:flex-start;flex-direction:column}
.mm-result-tools{align-items:flex-start;flex-direction:column}
.mm-result article{grid-template-columns:49px 1fr}
.mm-result-rank span{font-size:21px}
.mm-result-rank small{font-size:9px;letter-spacing:.02em}
.mm-result-main{padding:14px 12px}
.mm-result-title h3{font-size:19px}
.mm-result-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
.mm-result-metrics>div:nth-child(3n){border-right:1px solid var(--ce-border)}
.mm-result-metrics>div:nth-child(2n){border-right:none}
.mm-result-metrics>div:nth-last-child(-n+3){border-bottom:1px solid var(--ce-border)}
.mm-result-metrics>div:nth-last-child(-n+2){border-bottom:none}
.mm-result-foot{grid-template-columns:1fr}
.mm-result-foot>div{grid-column:1;flex-direction:column;gap:6px}
.mm-miss{display:block;margin:5px 0 0}
.mm-answer-strip{margin-left:-2px;margin-right:-2px}
}

.mm-loading[hidden]{display:none!important}
/* Focus uses the shared 3px --ce-focus ring from assets/mobile.css (8.8:1 on the page, >= 5.5:1 on
   every surface here), so the shell no longer needs its own gold ring. */
.mm-question h2:focus,.mm-results h2:focus{outline:none}
.mm-nav button,.mm-tune,.mm-result-tools button,.mm-result-tools a,.mm-more{min-height:46px}

@media(prefers-reduced-motion:reduce){
.mm-ambient i,.mm-loading span,.mm-question.enter,.mm-results.enter,.mm-option,.mm-result{animation:none!important}
.mm-progress-line i,.mm-option,.mm-result article,.mm-next,.mm-more{transition:none!important}
html{scroll-behavior:auto}
}

.mm-custom{margin:18px 0;padding:16px;border:1px solid var(--ce-border);border-radius:12px;background:var(--ce-bg-deep)}
.mm-custom[hidden],#mmCustomError[hidden]{display:none}
.mm-custom label{display:block;color:var(--ce-ink);font-size:13.5px;margin-bottom:9px}
.mm-custom>div{display:flex;gap:8px}
.mm-custom input{min-width:0;width:100%;min-height:46px;padding:10px;border:1px solid var(--ce-border-input);border-radius:var(--ce-radius-sm);background:var(--ce-surface-2);color:var(--ce-ink);font:16px var(--ce-font)}
.mm-custom input::placeholder{color:var(--ce-dim)}
.mm-custom button{flex:none;min-height:46px;padding:10px 14px;border:1px solid var(--ce-border-strong);border-radius:var(--ce-radius-sm);background:transparent;color:var(--ce-ink);font:650 13.5px var(--ce-font);cursor:pointer}
.mm-custom button:hover{background:var(--ce-surface-2)}
.mm-custom p{font-size:12.5px;line-height:1.6;color:var(--ce-muted);margin-top:8px}
#mmCustomError{color:var(--ce-bad)}

.mm-save-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;padding-top:15px;border-top:1px solid var(--ce-border)}
.mm-save-research{min-height:44px;padding:10px 14px;border:1px solid color-mix(in srgb,var(--ce-good) 45%,transparent);border-radius:var(--ce-radius-sm);background:var(--ce-good-bg);color:var(--ce-good);font:650 12.5px var(--ce-font);cursor:pointer}
.mm-save-research:disabled{cursor:default;background:var(--ce-surface-2);color:var(--ce-muted);border-color:var(--ce-border)}
.mm-save-row a{color:var(--ce-link);font-size:12.5px;min-height:44px;display:flex;align-items:center;text-underline-offset:4px}
.mm-save-status{color:var(--ce-muted);font-size:12.5px}