/* Shared predictions navigation and progressive filter enhancement. */
.public-design #main-content .public-prediction-nav {
    padding:0; border:0; border-radius:0; background:transparent; margin-bottom:20px;
    display:flex; flex-direction:column; gap:12px;
}
.public-design #main-content .public-prediction-nav > div { margin:0; display:flex; gap:4px; }
.public-design #main-content .public-prediction-nav > div:first-child {
    padding:5px; border:1px solid #dce6e4; border-radius:14px; background:#eaf0ee; width:fit-content; max-width:100%;
}
.public-design #main-content .public-prediction-nav a {
    justify-content:center; border-radius:10px; padding:11px 20px; min-height:44px;
    color:#526661; font-size:14px; font-weight:600; white-space:nowrap; background:transparent; box-shadow:none;
    transition:background .15s,color .15s;
}
.public-design #main-content .public-prediction-nav a:hover { color:#075e46; background:#ffffffa6; }
.public-design #main-content .public-prediction-nav a[aria-current] { color:white; background:#123e34; box-shadow:0 2px 5px #123e3420; }
.public-design #main-content .public-prediction-nav > div + div { flex-wrap:wrap; gap:8px; }
.public-design #main-content .public-prediction-nav > div + div a { border:1px solid #dce6e4; background:white; padding:9px 16px; font-size:13px; border-radius:24px; }
.public-design #main-content .public-prediction-nav > div + div a[aria-current] { border-color:#a5d7c7; background:#e7f6ef; color:#075e46; }
.public-design #main-content .public-prediction-filters {
    position:relative; padding:20px; border:1px solid #dce6e4; border-radius:16px;
    background:linear-gradient(120deg,#fff,#f8fbfa); box-shadow:0 4px 20px #163e3406;
}
.public-design #main-content .public-prediction-filters form { display:flex; flex-wrap:wrap; align-items:flex-start; gap:16px; margin:0; }
.public-design #main-content .public-prediction-filters form > :is(div,fieldset) { flex:1 1 200px; min-width:0; margin:0; }
.public-design #main-content .public-prediction-filters :is(legend,label[for]) { font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#5a7069; margin-bottom:8px; }
.public-design #main-content .public-prediction-filters :is(select,input[type=date],input[type=search],summary) {
    box-sizing:border-box; width:100%; min-width:0; height:48px; min-height:48px; border:1px solid #d9e3df; border-radius:10px;
    background-color:white; color:#203d33; padding:12px; font-size:14px; line-height:22px; font-weight:500;
}
.public-design #main-content .public-prediction-filters select { padding-right:32px; }
.public-design #main-content .public-prediction-filters :is(select,input,summary):focus-visible { outline:3px solid #a5d7c7; outline-offset:2px; }
.public-design #main-content .public-prediction-filters .has-selection { border-color:#84bca8; background-color:#f0faf5; }
.public-design #main-content .public-prediction-filters details { position:relative; border:0; background:transparent; }
.public-design #main-content .public-prediction-filters details[open] summary { border-color:#84bca8; }
.public-design #main-content .public-prediction-filters details:has(input:checked) summary { background:#f0faf5; border-color:#84bca8; }
.public-design #main-content .public-prediction-filters details > div {
    position:absolute; top:calc(100% + 8px); left:0; width:max(100%,300px); max-width:calc(100vw - 72px); z-index:40;
    padding:14px; border:1px solid #dce6e4; border-radius:12px; background:white; box-shadow:0 16px 40px #143d3426;
}
.public-design #main-content .public-prediction-filters details label:has(input[type=checkbox]) { padding:8px; border-radius:7px; }
.public-design #main-content .public-prediction-filters input[type=checkbox] { width:18px; height:18px; min-height:18px; flex-shrink:0; padding:0; accent-color:#087b56; }
.public-design #main-content .public-prediction-filters .prediction-filter-actions { flex:0 0 auto; align-self:flex-start; padding-top:25px; gap:8px; }
.public-design #main-content .prediction-filter-actions a { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:10px 14px; margin:0; border:0; border-radius:10px; color:#537268; font-size:13px; font-weight:600; }
.public-design #main-content .prediction-filter-actions a:hover { background:#eaf3ee; }
.public-prediction-filters .is-enhanced button[type=submit] { display:none; }
[data-prediction-feed][aria-busy=true] { opacity:.5; pointer-events:none; }
.public-prediction-filters:has(.is-loading)::after { content:''; position:absolute; inset:0; border:2px solid #84bca8; border-radius:16px; pointer-events:none; }
@media(max-width:639px) {
    .public-design #main-content .public-prediction-nav > div:first-child { width:100%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
    .public-design #main-content .public-prediction-nav a { font-size:12px; padding:8px 4px; white-space:normal; text-align:center; }
    .public-design #main-content .public-prediction-nav > div + div { display:flex; flex-wrap:nowrap; overflow-x:auto; gap:6px; padding-bottom:6px; scrollbar-width:thin; scroll-snap-type:x proximity; }
    .public-design #main-content .public-prediction-nav > div + div a { flex:0 0 auto; font-size:12px; padding:8px 12px; border-radius:24px; white-space:nowrap; scroll-snap-align:start; }
    .public-design #main-content .public-prediction-filters { padding:16px; }
    .public-design #main-content .public-prediction-filters form { gap:14px; }
    .public-design #main-content .public-prediction-filters form > :is(div,fieldset) { flex-basis:100%; }
    .public-design #main-content .public-prediction-filters .prediction-filter-actions { flex-basis:auto; padding-top:0; }
    .public-design #main-content .public-prediction-filters details > div { width:100%; max-width:none; }
}