/* Long-term outlook pages: ECMWF chart comparison (see assets/outlooks.js). Cards, figures and headings use the .lt-* styles in style.css. */
.ol { margin: 0.5rem 0 0; }
.ol-ctrl { display: flex; flex-wrap: wrap; gap: 0.7rem 2rem; margin: 0.5rem 0 1rem; }
.ol-group { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.ol-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #64748b; }
.ol-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; min-width: 0; }
.ol-chip {
    min-height: 40px; padding: 0 0.9rem; border-radius: 999px; border: 1px solid #cbd5e1; background: #fff;
    color: #1e3c72; font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
}
.ol-chip:hover { background: #eef4fb; }
.ol-chip[aria-checked="true"] { background: #1e3c72; border-color: #1e3c72; color: #fff; }
.ol-chip:focus-visible, .ol-select:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.ol-select {
    min-height: 44px; padding: 0 0.8rem; border-radius: 10px; border: 1px solid #cbd5e1; background: #fff;
    color: #1e3c72; font: inherit; font-weight: 600; max-width: 100%;
}
.ol-run { font-size: 0.85rem; color: #64748b; margin: 0 0 0.6rem; }
.ol-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin: 0.5rem 0; }
.ol-figs--wide { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.ol-fig { margin: 0; min-width: 0; }
.ol-fig img { display: block; width: 100%; height: auto; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; cursor: zoom-in; }
.ol-fig figcaption { font-size: 0.85rem; color: #475569; margin-top: 0.35rem; line-height: 1.45; }
.ol-fig figcaption strong { color: #1e3c72; }
.ol-how { display: block; color: #64748b; font-size: 0.8rem; margin-top: 0.15rem; }
.ol-credit { font-size: 0.8rem; color: #64748b; margin: 0.6rem 0 0; }
.ol-fail { padding: 0.8rem 1rem; border-left: 4px solid #f59e0b; background: #fffbeb; color: #475569; border-radius: 4px; }
.ol-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #92400e; background: #fef3c7; border-radius: 999px; padding: 0.05rem 0.55rem; margin-left: 0.4rem; vertical-align: middle; }
@media (max-width: 480px) {
    .ol-figs, .ol-figs--wide { grid-template-columns: 1fr; }
}
/* single-chart rows on the Teleconnections page: keep a lone chart from stretching across the card, and center it */
.lt-figs.ol-narrow { grid-template-columns: repeat(auto-fit, minmax(280px, 560px)); justify-content: center; }

/* Climate index explorer (see assets/climate-indices.js) */
.ci-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin: 0.5rem 0 0.8rem; }
.ci-stat { border: 1px solid #e2e8f0; border-left: 4px solid #94a3b8; border-radius: 8px; padding: 0.7rem 1rem; background: #f8fafc; }
.ci-stat--oni { border-left-color: #c2410c; }
.ci-stat--pdo { border-left-color: #0f766e; }
.ci-stat-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #64748b; }
.ci-stat-big { font-size: 1.9rem; font-weight: 700; color: #1e3c72; line-height: 1.1; }
.ci-stat p { margin: 0.3rem 0 0; font-size: 0.88rem; line-height: 1.45; color: #475569; }
.ci-note { margin: 0 0 0.8rem; padding: 0.6rem 0.9rem; border-left: 4px solid #f59e0b; background: #fffbeb; border-radius: 4px; font-size: 0.9rem; line-height: 1.5; color: #475569; }
.ci-chart { position: relative; width: 100%; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; overflow: hidden; min-height: 260px; }
.ci-chart svg { display: block; max-width: 100%; height: auto; }
.ci-tip { position: absolute; background: rgba(255, 255, 255, 0.96); border: 1px solid #cbd5e1; border-radius: 6px; padding: 0.3rem 0.55rem; font-size: 0.8rem; color: #0f172a; pointer-events: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); white-space: nowrap; }
.ci-tip[hidden] { display: none; }
.ci-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; margin-right: 0.3rem; }
.ci-hint { font-size: 0.8rem; color: #64748b; margin: 0.4rem 0 0.2rem; }
.ci-table { margin: 0.4rem 0; }
.ci-table summary { cursor: pointer; font-weight: 600; color: #1e3c72; min-height: 24px; }
.ci-table table { border-collapse: collapse; margin-top: 0.4rem; font-size: 0.88rem; }
.ci-table th, .ci-table td { text-align: right; padding: 0.2rem 0.8rem; border-bottom: 1px solid #e2e8f0; }
.ci-table th:first-child, .ci-table td:first-child { text-align: left; }
@media (max-width: 480px) { .ci-stat-big { font-size: 1.6rem; } }
/* CPC figures: two columns (two rows for four charts) on wider screens, one column on phones */
.lt-figs.lt-figs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .lt-figs.lt-figs--2 { grid-template-columns: 1fr; } }

/* Teleconnections and snow explorer (see assets/tele-snow.js) */
.ts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0.5rem 0; align-items: start; }
.ts-box { min-width: 0; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.6rem 0.8rem; background: #fff; margin-bottom: 0.6rem; }
.ts-box h3 { margin: 0 0 0.4rem; font-size: 0.95rem; color: #1e3c72; }
@media (max-width: 800px) { .ts-grid { grid-template-columns: 1fr; } }

/* Reading the Tea Leaves predictor (see assets/tea-leaves.js) */
.tl-inputs { display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; margin: 0.4rem 0 0.6rem; }
.tl-inputs input[type=range] { width: 240px; max-width: 100%; min-height: 32px; }
.tl-mjo { flex-basis: 100%; }
.tl-w { text-transform: none; letter-spacing: 0; font-weight: 400; color: #475569; font-size: 0.8rem; }
.tl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.9rem; margin: 0.6rem 0; }
.tl-card { border: 1px solid #e2e8f0; border-top: 5px solid #94a3b8; border-radius: 8px; padding: 0.7rem 0.9rem; background: #fff; }
.tl-card h3 { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #64748b; }
.tl-verdict { margin: 0.2rem 0 0.5rem; font-size: 1.15rem; font-weight: 700; color: #1e3c72; line-height: 1.25; }
.tl-good { border-top-color: #0f766e; } .tl-cool { border-top-color: #2563eb; } .tl-warm { border-top-color: #dc2626; } .tl-warn { border-top-color: #c2410c; } .tl-none { border-top-color: #94a3b8; }
.tl-card table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
.tl-card th { text-align: left; font-weight: 400; color: #475569; padding: 0.15rem 0; }
.tl-card td { text-align: right; font-weight: 600; padding: 0.15rem 0; }
.tl-card td small { font-weight: 400; color: #64748b; }
.tl-g { color: #0f766e; } .tl-b { color: #b91c1c; } .tl-n { color: #64748b; }
.tl-note { margin: 0.4rem 0 0; font-size: 0.8rem; color: #64748b; }

.tl-sel { margin: 0.6rem 0 0.2rem; }
.tl-over { border-collapse: separate; border-spacing: 4px; width: 100%; margin: 0.4rem 0 0.6rem; font-size: 0.88rem; }
.tl-over th { text-align: left; font-weight: 600; color: #475569; font-size: 0.78rem; }
.tl-over td { border-radius: 6px; padding: 0.45rem 0.6rem; font-weight: 700; color: #1e3c72; background: #f1f5f9; border-left: 4px solid #94a3b8; }
.tl-over td.tl-good { background: #ecfdf5; border-left-color: #0f766e; } .tl-over td.tl-cool { background: #eff6ff; border-left-color: #2563eb; }
.tl-over td.tl-warm { background: #fef2f2; border-left-color: #dc2626; } .tl-over td.tl-warn { background: #fff7ed; border-left-color: #c2410c; }
.tl-rowbtn { background: none; border: 0; font: inherit; font-weight: 700; color: #1e3c72; cursor: pointer; text-align: left; padding: 0; min-height: 32px; }
.tl-rowbtn small { display: block; font-weight: 400; color: #64748b; }
.tl-rowbtn[aria-pressed="true"] { text-decoration: underline; }
@media (max-width: 640px) { .tl-over th:not(:first-child) { font-size: 0.68rem; } .tl-over td { padding: 0.35rem 0.4rem; font-size: 0.8rem; } }

.ts-leaflet { height: 440px; border: 1px solid #e2e8f0; border-radius: 6px; z-index: 0; }
.ts-pin span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; color: #fff; font: 700 11px/1 sans-serif; text-shadow: 0 0 2px rgba(0,0,0,.6); }
@media (max-width: 600px) { .ts-leaflet { height: 340px; } }