/* Collection geometry and card tokens from Figma 1768:469. */
:root{--market-surface:rgba(25,29,58,.84);--market-border:#c3c9f52e;--market-shadow:0 3px 8px #10112d30,inset 0 1px 0 #ffffff05;--section-title-size:22px}
body>header.is-scrolled{background:rgba(255,255,255,.2);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom-color:#ffffff1a}
body>header{transition:background .2s,backdrop-filter .2s}
.layout{--collection-bleed:64px}
.layout>aside{position:relative;z-index:2}
#sections{margin-top:24px;scroll-margin-top:170px}
#summary:not([hidden]){margin:24px 0 0}
.collection-section{margin-bottom:24px;scroll-margin-top:170px}
.collection-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}
.collection-heading h2{font:600 var(--section-title-size)/1.3 'DM Sans',sans-serif;letter-spacing:0;margin:0}
.collection-heading p{font:400 14px/1.4 'DM Sans',sans-serif;margin:4px 0 0;color:#fff}
.collection-view{display:flex;align-items:center;gap:4px;border:1px solid transparent;border-radius:100px;padding:4px 10px;white-space:nowrap;color:#ffffff99;font:400 14px/18px 'DM Sans',sans-serif}
.collection-view img{display:block}.collection-view:hover{background:#ffffff1a;border-color:#ffffff4d;color:white}
.collection-carousel{position:relative;width:calc(100% + var(--collection-bleed));margin-right:calc(-1 * var(--collection-bleed))}
.collection-track{display:grid;grid-auto-flow:column;grid-auto-columns:320px;grid-template-rows:1fr;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-left:0;padding:1px calc(var(--collection-bleed) + 1px) 2px 1px;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--collection-bleed)),transparent 100%);mask-image:linear-gradient(to right,#000 calc(100% - var(--collection-bleed)),transparent 100%)}
.collection-track::-webkit-scrollbar{display:none}
.collection-carousel.can-forward .collection-track{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 130px),transparent 100%);mask-image:linear-gradient(to right,#000 calc(100% - 130px),transparent 100%)}
.collection-carousel.can-back .collection-track{-webkit-mask-image:linear-gradient(to right,#000 0%,#000 calc(100% - var(--collection-bleed)),transparent 100%);mask-image:linear-gradient(to right,#000 0%,#000 calc(100% - var(--collection-bleed)),transparent 100%)}
.collection-carousel.can-back.can-forward .collection-track{-webkit-mask-image:linear-gradient(to right,#000 0%,#000 calc(100% - 130px),transparent 100%);mask-image:linear-gradient(to right,#000 0%,#000 calc(100% - 130px),transparent 100%)}
.collection-arrow{position:absolute;z-index:3;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#ffffff33;border:1px solid #ffffff4d;backdrop-filter:blur(20px);opacity:0;transition:opacity .18s,background .18s}
.collection-arrow.forward{right:calc(var(--collection-bleed) + 8px)}.collection-arrow.back{left:8px}.collection-arrow.back img{transform:rotate(180deg)}
.collection-carousel:hover .collection-arrow,.collection-carousel:focus-within .collection-arrow{opacity:1}.collection-arrow:hover{background:#ffffff55}
.compact-market{display:flex;flex-direction:column;gap:10px;min-height:203px;padding:14px;border:1px solid var(--market-border);border-radius:6px;background:var(--market-surface);box-shadow:var(--market-shadow);position:relative;scroll-snap-align:start;min-width:0;color:#fff}
.compact-market.live-market{background:linear-gradient(rgba(121,216,173,.1),rgba(121,216,173,.1)),rgba(25,32,58,.86);border-color:#79d8ad66}
.compact-market.live-market:is(:hover,:focus-within){border-color:#79d8ad99}
.compact-market:hover{border-color:#a6afd56b}
.compact-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:22px;font-size:14px;color:#afb4ce}
.compact-meta>div{display:flex;gap:8px;align-items:center;min-width:0}.compact-meta-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compact-meta-text i{font-style:normal;color:#ffffff4d}
.compact-save{display:grid;place-items:center;width:18px;height:18px;flex:none;padding:0}.compact-save img{display:block}.compact-save[aria-pressed=true]{background:none}
.market-badge{border:1px solid currentColor;border-radius:100px;padding:2px 6px;display:inline-flex;align-items:center;gap:4px;font:600 12px/16px 'DM Sans';flex:none}.market-badge.is-new{color:#e3e9a0;background:#e3e9a014}.market-badge.is-live{color:#79d8ad;background:#79d8ad12}.market-badge img{display:block}
.compact-divider{height:1px;background:#d9d9d91a;flex:none}
.compact-question{display:flex;align-items:center;gap:10px;min-height:52px}
.compact-question h3{font:600 16px/21px 'DM Sans',sans-serif;margin:0;min-width:0;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.compact-photo{width:52px;height:52px;border-radius:4px;object-fit:cover;flex:none}.compact-photo.existing-art{object-fit:contain;background:#ffffff12}.letter-art{display:grid;place-items:center;background:var(--art-bg);color:var(--art-color);font-size:28px;font-weight:600}
.eth-crop{position:relative;overflow:hidden}.eth-crop img{position:absolute;left:-26.92%;top:-20.23%;width:153.85%;height:140.47%;max-width:none}
#track-sports{grid-auto-columns:300px}
.binary-probability{display:flex;align-items:baseline;gap:7px;margin-top:auto;margin-bottom:0;min-height:24px}.binary-probability strong{font:600 24px/24px 'DM Sans'}.binary-probability>span{font-size:12px;color:#ffffff80}
.compact-actions{display:flex;gap:10px;margin-top:auto}
.outcome-button{height:var(--market-action-height);min-width:0;flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #4a5bb280;border-radius:6px;padding:8px 10px;font:var(--market-action-font);background:linear-gradient(122deg,#2dc084,#25986d);color:white;white-space:nowrap}
.outcome-button.no{background:linear-gradient(122deg,#dc4156,#ce404d)}.outcome-button.draw{background:none;border-color:#ffffff80;font-size:13px;padding:8px 5px;flex:.9}.outcome-button:hover{filter:brightness(1.12)}.outcome-button.picked{outline:2px solid white;outline-offset:-3px}
.outcome-lines{display:grid;grid-template-columns:minmax(0,1fr);min-width:0;gap:8px;margin-top:auto}.outcome-line{display:grid;grid-template-columns:minmax(0,1fr) max-content max-content;align-items:center;gap:12px;min-width:0;min-height:30px}.outcome-line>span{font:400 14px/18px 'DM Sans';min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.outcome-line>strong{font:600 16px/21px 'DM Sans';font-variant-numeric:tabular-nums;white-space:nowrap}.outcome-line>div{display:flex;gap:4px}.outcome-line .outcome-button{width:50px;height:30px;flex:none;padding:4px;font-size:14px}
.type-ranges .outcome-line>span{font-variant-numeric:tabular-nums}
.direction-gauge{position:relative;width:104px;height:52px;flex:none}.direction-gauge>img{display:block}.direction-gauge>strong{display:flex;align-items:center;gap:2px;position:absolute;bottom:0;left:15px;font:600 24px/24px 'DM Sans'}.direction-gauge strong img{display:block}.direction-arrow{display:block}.points-down{transform:rotate(180deg)}
.direction-tape{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:-6px;height:80px;flex:none;font-size:14px;line-height:20px;font-variant-numeric:tabular-nums;text-shadow:none}
.tape-window{height:80px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 16px,#000 100%);mask-image:linear-gradient(to bottom,transparent,#000 16px,#000 100%)}
.tape-window.up{color:#62e9b4}.tape-window.down{color:#ff9ba9;text-align:right}
.tape-lane{display:flex;flex-direction:column}.tape-lane>span{display:block;height:20px;flex:none;white-space:nowrap}
.type-direction{gap:10px;min-height:246px}
.team-lines{display:grid;gap:8px}.team-line{display:flex;align-items:center;gap:8px;min-height:32px}.team-crest{width:32px;height:32px;display:grid;place-items:center;flex:none}.team-crest img{display:block}.team-name{flex:1;font-size:14px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.team-line>strong{font:600 16px/21px 'DM Sans'}.team-score{margin-right:4px}.team-score i{font-style:normal;color:#ffffff4d;margin-left:3px}.type-football,.type-tennis{min-height:197px}.type-football .compact-actions .outcome-button{font-size:14px;padding:8px 5px}
.compact-feedback{position:absolute;left:14px;right:14px;bottom:14px;border-radius:6px;padding:10px;text-align:center;font-size:12px;color:white;background:#33366bf2;pointer-events:none;opacity:0;transition:opacity .15s}.has-feedback .compact-feedback{opacity:1}
.collection-section.expanded .collection-carousel{width:100%;margin-right:0}.collection-section.expanded .collection-track{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));grid-template-rows:auto;grid-auto-columns:auto;overflow:visible;-webkit-mask-image:none;mask-image:none;padding-right:1px}
@media(max-width:800px){.layout{--collection-bleed:0px}.collection-track{padding-right:2px;-webkit-mask-image:none;mask-image:none}.collection-carousel.can-forward .collection-track{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 65px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 65px),transparent)}.collection-carousel.can-back .collection-track{-webkit-mask-image:linear-gradient(to right,transparent,#000 24px);mask-image:linear-gradient(to right,transparent,#000 24px)}.collection-carousel.can-back.can-forward .collection-track{-webkit-mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 65px),transparent);mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 65px),transparent)}}
@media(max-width:560px){.collection-track{grid-auto-columns:min(320px,calc(100vw - 60px))}.collection-heading p{font-size:12px}.collection-view{font-size:12px;padding:4px 8px}.compact-meta{font-size:12px}.type-football .team-name{font-size:12px}.collection-section.expanded .collection-track{grid-template-columns:minmax(0,1fr)}}
@media(hover:none){.collection-arrow{opacity:1}}
/* Matte outcome controls: color carries meaning without glossy gradients. */
:root body :is(.compact-market,.trade-outcomes) .outcome-button{position:relative;overflow:hidden;border-radius:var(--button-radius);border-color:var(--yes-control-border);background:var(--yes-control-bg);color:var(--yes-control-text)}
:root body :is(.compact-market,.trade-outcomes) .outcome-button.no{border-color:var(--no-control-border);background:var(--no-control-bg);color:var(--no-control-text)}
:root body :is(.compact-market,.trade-outcomes) .outcome-button.draw{border-color:#b0b7d238;background:#a6afcf12;color:#d0d4e5}
:is(.compact-market,.trade-outcomes) .outcome-button::before,:is(.compact-market,.trade-outcomes) .outcome-button::after{content:none}
:root body :is(.compact-market,.trade-outcomes) .outcome-button:is(:hover,:focus-visible){box-shadow:inset 0 0 0 100px #00000024;filter:none;border-color:currentColor}
:root body :is(.compact-market,.trade-outcomes) .outcome-button.picked{outline:2px solid currentColor;outline-offset:-3px}
.collection-track{padding-top:8px;padding-bottom:8px;margin-top:-7px;margin-bottom:-7px}
.compact-market{isolation:isolate;transition:border-color .16s ease-out}
.compact-market:focus-within{border-color:#a6afd58c}
@media(prefers-reduced-motion:reduce){.compact-market,:is(.compact-market,.trade-outcomes) .outcome-button{transition:none}}

/* Shared market links retain the approved card typography. */
.compact-market .search-team-link{display:block;color:inherit;text-decoration:none}
.compact-market a.outcome-button{text-decoration:none}