/* CAISE visual layer — isolated from analytics and easy to evolve. */
:root {
    --caise-ink: #122d40;
    --caise-sea: #0a7384;
    --caise-teal: #54dacb;
    --caise-border: #dce8ec;
    --caise-bg: #f4f8f9;
    --caise-muted: #647986;
}
.caise-shell { padding: 0 28px 42px !important; background: var(--caise-bg); min-height: 100vh; }

/* Gateway / two product experiences */
.landing-content { max-width: 1520px; margin: auto; padding-top: 19px; }
.landing-topbar {
    display: flex; justify-content: space-between; gap: 16px; align-items: center;
    margin: 4px 0 22px; color: var(--caise-ink);
}
.landing-brand { display: flex; gap: 9px; align-items: baseline; letter-spacing: 0.08em; font-weight: 700; font-size: 13px; }
.landing-brand-icon { font-size: 27px; vertical-align: -2px; color: var(--caise-sea); margin-right: 3px; }
.landing-brand-name { font-size: 17px; letter-spacing: .12em; }
.landing-brand-suffix { color: var(--caise-muted); font-weight: 500; }
.landing-top-meta { color: #6a8390; font-size: 10px; font-weight: 700; letter-spacing: .22em; }
.landing-hero {
    position: relative; overflow: hidden; isolation: isolate;
    min-height: 312px; display: flex; align-items: center;
    padding: 49px clamp(28px, 5.5vw, 80px);
    color: #f4feff; border-radius: 22px;
    background: radial-gradient(circle at 85% 22%, #187d8d 0, transparent 34%),
                linear-gradient(115deg, #08283b 6%, #10516a 64%, #156a79 100%);
    box-shadow: 0 18px 44px rgba(15, 49, 64, .16);
}
.landing-hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
    opacity: .25;
    background-image: repeating-radial-gradient(ellipse at 90% 80%,
           transparent 0, transparent 24px, rgba(197,244,242,.43) 25px,
           transparent 26px, transparent 47px);
    mask-image: linear-gradient(to right, transparent 23%, black 85%);
}
.landing-orbit { position: absolute; border: 1px solid rgba(175, 236, 234, .27);
    border-radius: 50%; z-index: -1; pointer-events: none; }
.landing-orbit--one { width: 480px; height: 480px; right: -60px; top: -155px; }
.landing-orbit--two { width: 350px; height: 350px; right: 20px; top: -80px; }
.landing-orbit--three { width: 220px; height: 220px; right: 88px; top: -10px; }
.landing-hero-copy { max-width: 825px; position: relative; z-index: 1; }
.landing-kicker { display: inline-block; color: #a3f1e6; font-size: 10px; letter-spacing: .23em; font-weight: 700; margin-bottom: 20px; }
.landing-headline { font-size: clamp(33px, 3.7vw, 58px); letter-spacing: -.045em;
    line-height: 1.12; font-weight: 680; margin: 0 0 16px; max-width: 840px; }
.landing-accent { color: #a3f1e6; }
.landing-lead { color: #d5e7ee; font-size: 16px; line-height: 1.75; max-width: 645px; margin: 0; }
.landing-choice-section { padding: 34px 2px 4px; }
.landing-section-heading { margin: 0 0 24px; }
.landing-section-title { font-size: 24px; font-weight: 680; letter-spacing: -.025em; color: var(--caise-ink); margin: 0 0 5px; }
.landing-section-subtitle { font-size: 14px; color: var(--caise-muted); margin: 0; }
.experience-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.experience-card.btn {
    display: flex; flex-direction: column; align-items: stretch; min-height: 276px;
    text-align: left; white-space: normal; padding: clamp(22px, 3vw, 36px);
    border: 1px solid var(--caise-border); border-radius: 18px;
    color: var(--caise-ink); background: #fff; box-shadow: 0 6px 22px rgba(17,54,71,.04);
    text-transform: none; letter-spacing: normal;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.experience-card.btn:hover, .experience-card.btn:focus-visible {
    color: var(--caise-ink); background: #fff; transform: translateY(-4px);
    box-shadow: 0 20px 32px rgba(11,71,90,.12); border-color: #76c8d0;
}
.experience-card--prediction.btn { background: #f5fbfa; border-color: #d6ece9; }
.experience-card--prediction.btn:hover, .experience-card--prediction.btn:focus-visible { background: #f5fbfa; border-color: #52bdae; }
.experience-heading-row { display: flex; justify-content: space-between; align-items: center; }
.experience-eyebrow { font-size: 11px; letter-spacing: .17em; color: #417f91; font-weight: 700; }
.experience-icon { width: 39px; height: 39px; display: grid; place-items: center;
    border-radius: 11px; background: #eaf3f5; font-size: 19px; color: #12607a; }
.experience-card--prediction .experience-icon { background: #def4ed; color: #13795f; }
.experience-title { font-size: clamp(25px, 2.6vw, 35px); letter-spacing: -.035em;
    font-weight: 720; margin: 12px 0 10px; }
.experience-description { font-size: 14px; line-height: 1.75; color: #546e7c; margin: 0 0 20px; }
.experience-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; }
.experience-chip { border: 1px solid #e1ebef; background: #f5f9fa; border-radius: 20px;
    color: #496d7c; padding: 5px 10px; font-size: 11px; font-weight: 600; }
.experience-card--prediction .experience-chip { background: #e8f4f1; border-color: #d9ece8; }
.experience-cta { display: flex; justify-content: space-between; align-items: center; margin-top: 24px;
    border-top: 1px solid #e4ecef; padding-top: 17px; font-weight: 700; font-size: 12px;
    letter-spacing: .025em; color: #08778a; }
.experience-cta span:last-child { font-size: 20px; }
.landing-footer-note { padding-top: 23px; color: #6b828e; font-size: 12px; }

/* Navigation visible in the chosen analytical workspace. */
.workspace-content { max-width: 1680px; margin: auto; }
.workspace-navigation { display: flex; justify-content: space-between; align-items: center; gap: 15px;
    border-bottom: 1px solid #d6e4e9; padding: 14px 0 11px; margin-bottom: 12px; }
.workspace-back.btn { color: #3f697c; font-size: 12px; font-weight: 700;
    letter-spacing: .02em; padding: 10px 12px; text-decoration: none; }
.workspace-back.btn:hover { color: #0c687c; background: #e8f1f4; }
.workspace-switcher { display: flex; gap: 5px; background: #e7f0f3; padding: 4px; border-radius: 11px; }
.workspace-nav-choice.btn { color: #5a7380; font-size: 12px; padding: 9px 18px;
    border-radius: 8px; font-weight: 700; text-transform: none; letter-spacing: 0; text-decoration: none; }
.workspace-nav-choice.btn:hover { color: #14536a; background: rgba(255,255,255,.6); }
.workspace-nav-choice.btn.is-active { background: white; color: #0b556b;
    box-shadow: 0 2px 6px rgba(16,57,71,.10); }
.workspace-content > .row .h1, .workspace-content h1#app-title {
    letter-spacing: -.02em; font-size: clamp(23px, 3vw, 36px); }
.workspace-content .card { border: 1px solid #e1eaf0; border-radius: 13px; }
.workspace-content .shadow-sm { box-shadow: 0 6px 18px rgba(20,63,82,.05) !important; }
.workspace-content .card-body { padding: clamp(16px, 2vw, 24px); }
/* Dash loading overlay is shown while map / plots are being initialized. */
#explore-map-loading, #explore-timeline-loading, #bloom-map-loading { border-radius: 13px; overflow: hidden; }
#explore-map-loading [data-dash-is-loading="true"],
#explore-timeline-loading [data-dash-is-loading="true"],
#bloom-map-loading [data-dash-is-loading="true"] { pointer-events: none; }
@media (max-width: 850px) {
    .caise-shell { padding: 0 14px 28px !important; }
    .landing-top-meta { display: none; }
    .landing-hero { padding: 35px 26px; min-height: 260px; }
    .experience-grid { grid-template-columns: 1fr; }
    .experience-card.btn { min-height: 235px; }
    .workspace-navigation { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
    .experience-card.btn { transition: none; }
    .experience-card.btn:hover { transform: none; }
}

/* -------------------------------------------------------------------------
   v7 / Unified visual language for both analytical modules.
   Scoped to .workspace-content so the v6 landing screen remains unchanged.
   This file contains presentation only; scientific plots/data are not changed.
   ------------------------------------------------------------------------- */

.workspace-content {
    --panel-border: #dde9ed;
    --panel-shadow: 0 8px 25px rgba(14, 62, 78, .045);
    --work-accent: #087c8e;
    color: #183b4b;
    font-family: "Segoe UI", "Inter", system-ui, -apple-system, sans-serif;
    padding-bottom: 36px;
}

/* Module header, linked visually to the deep-water landing hero. */
.workspace-hero-band {
    position: relative; isolation: isolate; overflow: visible;
    margin: 24px 0 28px; padding: clamp(26px, 3.3vw, 45px);
    border-radius: 20px; color: #f6feff;
    background: radial-gradient(circle at 90% 10%, #1c7885 0, transparent 38%),
                linear-gradient(115deg, #092e41 0%, #12516a 72%, #116475 100%);
    box-shadow: 0 14px 38px rgba(15, 52, 68, .14);
}
.workspace-hero-band > .row { position: relative; z-index: 1; }
.workspace-hero-orbit {
    pointer-events: none; position: absolute; width: 185px; height: 185px;
    top: 12px; right: 11%; border: 1px solid rgba(183, 240, 237, .14);
    border-radius: 50%; opacity: .8; z-index: 0;
    box-shadow: 0 0 0 48px rgba(183,240,237,.045),
                0 0 0 110px rgba(183,240,237,.035);
    clip-path: inset(0 -600px 0 -600px);
}
.workspace-eyebrow {
    display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
    color: #b1ebea; font-size: 10px; font-weight: 750;
    letter-spacing: .19em; text-transform: uppercase;
}
.workspace-heading-mark { font-size: 20px; line-height: 0; color: #a4eee6; }
.workspace-content h1.workspace-heading {
    max-width: 850px; color: #f7fdfd; font-weight: 680;
    font-size: clamp(26px, 3vw, 42px); line-height: 1.18;
    letter-spacing: -.035em; margin: 0 0 12px;
}
.workspace-description { max-width: 760px; color: #d6e8ef; font-size: 15px; line-height: 1.65; margin: 0; }
.workspace-language { max-width: 300px; margin-left: auto; }
.workspace-language-label {
    display: block; color: #c8e4ea; font-size: 10px; letter-spacing: .16em;
    font-weight: 700; margin-bottom: 8px;
}
.workspace-language .Select-control { background: rgba(255,255,255,.98); }
.workspace-language .Select-menu-outer { color: var(--caise-ink); }
.workspace-navigation { margin-top: 4px; margin-bottom: 0; }
.workspace-content #explore-content, .workspace-content #prediction-content { animation: caise-appear .24s ease-out both; }
@keyframes caise-appear { from { opacity: .65; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Shared section labels and cards. */
.workspace-content .panel-eyebrow,
.workspace-content .chart-eyebrow {
    font-size: 10px; line-height: 1.6; font-weight: 760;
    letter-spacing: .17em; color: #137c8b; text-transform: uppercase;
    margin-bottom: 8px;
}
.workspace-content .chart-eyebrow { margin-bottom: 13px; }
.workspace-content .panel-heading {
    color: #16384b; font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.3; font-weight: 700; letter-spacing: -.02em;
    margin: 0 0 9px;
}
.workspace-content .panel-description, .workspace-content .workspace-section-subtitle {
    color: #6a8090; line-height: 1.65; font-size: 13px;
    margin: 0 0 18px;
}
.workspace-content .workspace-section-title {
    font-size: clamp(20px, 2vw, 26px); font-weight: 730;
    color: #16384b; letter-spacing: -.025em; margin: 0 0 5px;
}
.workspace-section-intro { padding: 12px 3px 10px; }
.workspace-content .card, .workspace-filter-panel, .workspace-data-panel, .workspace-answer-panel {
    background: #fff; border: 1px solid var(--panel-border);
    border-radius: 17px; box-shadow: var(--panel-shadow);
}
.workspace-content .card { overflow: hidden; }
.workspace-content .card-body { padding: clamp(18px, 2.2vw, 28px); }
.workspace-filter-panel { padding: clamp(20px, 2.5vw, 30px); }
.workspace-filter-panel .workspace-section-lead { padding-bottom: 3px; }
.workspace-filter-panel .workspace-section-lead .panel-description { margin-bottom: 15px; }
.workspace-data-panel { padding: clamp(20px, 2.5vw, 30px); overflow: hidden; }
.workspace-answer-panel { padding: 20px 25px 16px; }
.workspace-answer-panel .alert { margin: 0 0 8px; }
.workspace-content .chart-panel { min-width: 0; }
.workspace-content .chart-panel .card-body { min-width: 0; }
.workspace-content .scientific-note,
.workspace-content #data-range-disclaimer {
    background: #eaf4f7; border: 1px solid #cfebef; border-left: 4px solid #39a6b6;
    border-radius: 10px; color: #285568; padding: 13px 17px !important;
    font-size: 13px; line-height: 1.65;
}
.workspace-content .language-question-panel { border-top: 3px solid #28a5ae; }
.workspace-content .scope-indicator { margin-top: 14px; }
.workspace-content .scope-indicator .badge {
    background: #e5f3f5 !important; color: #17647a !important;
    border: 1px solid #cbe5e9; border-radius: 7px;
    font-weight: 650; letter-spacing: 0; text-transform: none;
    padding: 9px 12px !important;
}
.workspace-content .validation-note {
    background: #eaf2f3; border: 1px solid #dce9e9;
    border-radius: 11px; padding: 14px 17px;
    color: #547180; font-size: 12px; line-height: 1.7;
}

/* Controls: consistent dimensions, radii, legibility and feedback. */
.workspace-content .form-label, .workspace-content label:not(.form-check-label):not(.workspace-language-label) {
    color: #355b6b; font-size: 12px; font-weight: 720; letter-spacing: .015em;
    margin-bottom: 9px;
}
.workspace-content .form-control, .workspace-content textarea,
.workspace-content .Select-control,
.workspace-content .DateRangePickerInput,
.workspace-content .DateInput_input {
    border-color: #d4e3e7; border-radius: 9px; color: #193e50;
    background-color: #fbfdfd; box-shadow: none;
}
.workspace-content .form-control:focus, .workspace-content textarea:focus,
.workspace-content .is-focused:not(.is-open) > .Select-control {
    border-color: #49a8b6; box-shadow: 0 0 0 3px rgba(47,166,181,.14);
    outline: none;
}
.workspace-content .form-control { min-height: 45px; padding: 10px 14px; }
.workspace-content textarea.form-control { min-height: 84px; resize: vertical; }
.workspace-content .Select-control { min-height: 44px; }
.workspace-content .Select-placeholder, .workspace-content .Select-value-label { line-height: 42px !important; }
.workspace-content .DateRangePickerInput { display: flex; align-items: center; min-height: 44px; }
.workspace-content .DateInput_input { padding: 9px 7px; font-size: 12px; height: 41px; }
.workspace-content .DateInput { width: min(46%, 128px); background: transparent; }
.workspace-content .DateRangePickerInput_arrow { padding: 0 5px; }
.workspace-content .btn-primary {
    color: #fff; background: #0c7487; border-color: #0c7487;
    border-radius: 9px; font-weight: 700; font-size: 12px;
    letter-spacing: .025em; text-transform: none; min-height: 45px;
    box-shadow: 0 4px 10px rgba(4,106,125,.12);
}
.workspace-content .btn-primary:hover, .workspace-content .btn-primary:focus-visible {
    background: #07576d; border-color: #07576d; color: #fff;
}
.workspace-content .btn-secondary {
    border: 1px solid #d1e5e8; background: #e9f5f6;
    color: #196174; min-height: 45px; border-radius: 9px;
    font-size: 12px; font-weight: 700; text-transform: none;
    letter-spacing: .025em;
}
.workspace-content .btn-secondary:hover { background: #d5edef; color: #124d5f; border-color: #b9dce0; }
.workspace-content .btn:focus-visible,
.workspace-content .DateInput_input:focus-visible,
.workspace-content .Select-control:focus-within {
    outline: 3px solid rgba(29,155,173,.35); outline-offset: 2px;
}
.workspace-content #ask-example, .workspace-content #bloom-map-caption,
.workspace-content #bloom-seasonal-caption { display: block; line-height: 1.65; font-size: 12px; color: #718896 !important; }
.workspace-content #ask-example { margin-top: 13px; }
.workspace-content #bloom-source-label { font-size: 12px; }
.workspace-content #bloom-answer { color: #224b5c; border: 1px solid #dcebf0; border-radius: 10px; background: #f3fafb; }
.workspace-content .form-check { padding: 6px 0 6px 26px; }
.workspace-content .form-check-input:checked { background-color: #087b8d; border-color: #087b8d; }
.workspace-content .form-check-label { font-size: 13px; line-height: 1.5; color: #35596a; }

/* Metrics, tables and plot panels. */
.workspace-content #metrics-row .card { border-top: 3px solid #27b1ad; }
.workspace-content #metrics-row .card .fs-4 { color: #0e5066; font-weight: 740; letter-spacing: -.025em; }
.workspace-content #metrics-row .card .text-muted { font-size: 11px; font-weight: 600; color: #69828e !important; }
.workspace-content .dash-table-container .dash-spreadsheet-container { border-radius: 10px; overflow-x: auto; }
.workspace-content .dash-table-container .dash-spreadsheet-container th {
    background: #eaf3f5 !important; color: #2d6171 !important;
    font-weight: 750 !important; border-color: #dce9ed !important;
}
.workspace-content .dash-table-container .dash-spreadsheet-container td { border-color: #e7edef !important; }
.workspace-content .table { font-size: 12px; margin-bottom: 5px; }
.workspace-content .table thead th { background: #eaf4f6; color: #2a5a68; border-bottom: 1px solid #d6e6eb; font-size: 11px; font-weight: 720; }
.workspace-content .table td, .workspace-content .table th { padding: 12px 13px; vertical-align: middle; }
.workspace-content .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: #f6fafb; }
.workspace-content #bloom-result-table { max-height: 690px; overflow: auto; border-radius: 9px; }
.workspace-content #bloom-result-table thead th { position: sticky; top: 0; z-index: 2; }
.workspace-content .js-plotly-plot { width: 100%; }
.workspace-content #bloom-seasonal-plot { min-height: 330px; }
.workspace-content #bloom-model-validation { margin-top: 5px; }

/* Module-loading state: the same restrained teal indicator in both modules. */
#explore-map-loading, #explore-timeline-loading, #bloom-map-loading { background: #fff; }
#explore-map-loading [data-dash-is-loading="true"],
#explore-timeline-loading [data-dash-is-loading="true"],
#bloom-map-loading [data-dash-is-loading="true"] {
    opacity: .6; pointer-events: none;
}

@media (max-width: 991px) {
    .workspace-hero-band { margin-top: 16px; }
    .workspace-language { max-width: none; margin: 10px 0 0; }
    .workspace-content .DateRangePicker { max-width: 100%; }
    .workspace-content #bloom-result-table { max-height: 420px; }
}
@media (max-width: 650px) {
    .workspace-hero-band { padding: 24px 20px; border-radius: 15px; }
    .workspace-eyebrow { font-size: 9px; letter-spacing: .12em; }
    .workspace-content .workspace-heading { font-size: 26px; }
    .workspace-content .card-body { padding: 17px; }
    .workspace-filter-panel, .workspace-data-panel, .workspace-answer-panel { padding: 17px; }
    .workspace-content .DateInput { width: 44%; }
    /* The map has a fixed canvas height at every breakpoint. */
    .workspace-content #bloom-map-loading { min-height: 690px; }
}
@media (prefers-reduced-motion: reduce) {
    .workspace-content #explore-content, .workspace-content #prediction-content { animation: none; }
}

/* Scientific HELCOM maps: match the map typography to the CAISE workspaces. */
.scientific-map-note { margin: 10px 2px 2px; padding: 10px 14px;
    color: #527382; background: #f1f8f8; border-left: 3px solid #58aebb;
    border-radius: 0 7px 7px 0; font-size: 12px; line-height: 1.55; }
.js-plotly-plot .maplibregl-control-container { font-family: Arial, sans-serif; }
.js-plotly-plot .maplibregl-ctrl-group { box-shadow: 0 2px 10px rgba(20,60,80,.15); }

/* Full-screen module transition, triggered immediately by the gateway click.
   This sits above both workspaces until their main Plotly figures render. */
.module-transition {
    position: fixed; inset: 0; z-index: 4000; display: grid;
    place-items: center; padding: 24px; overflow: hidden;
    background: radial-gradient(circle at 80% 20%, #176b79 0%, transparent 34%),
                linear-gradient(135deg, #071e30 0%, #0b364a 52%, #11596b 100%);
    color: #eefcfc;
    transition: opacity .22s ease, visibility .22s ease;
}
.module-transition.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.module-transition-open { overflow: hidden; }
.module-transition__orb {
    position: absolute; border: 1px solid rgba(168, 236, 224, .19);
    border-radius: 50%; pointer-events: none;
}
.module-transition__orb--one { width: 740px; height: 740px; right: -170px; top: -310px; }
.module-transition__orb--two { width: 500px; height: 500px; right: -60px; top: -190px; }
.module-transition__panel { width: min(100%, 660px); position: relative; z-index: 1; text-align: center; }
.module-transition__identity { display: inline-flex; gap: 12px; align-items: center;
    color: #d8f7f2; letter-spacing: .15em; font-size: 12px; font-weight: 750; margin-bottom: 44px; }
.module-transition__symbol { color: #79ddcd; font-size: 37px; line-height: 1; }
.module-transition__eyebrow { color: #9bddd8; font-size: 11px; font-weight: 700;
    letter-spacing: .23em; margin-bottom: 16px; }
.module-transition__title { color: #f6ffff; font-size: clamp(31px, 5vw, 51px);
    line-height: 1.14; font-weight: 720; letter-spacing: -.04em; margin: 0 0 16px; }
.module-transition__description { color: #d3e8ed; font-size: 15px;
    line-height: 1.7; margin: 0 auto; max-width: 495px; }
.module-transition__wave { display: flex; align-items: center; justify-content: center;
    gap: 9px; height: 75px; margin: 25px auto 13px; }
.module-transition__wave-bar { display: block; height: 16px; width: 5px;
    border-radius: 6px; background: #67dfd0;
    animation: module-wave 1.1s ease-in-out infinite; transform-origin: center; }
.module-transition__wave-bar:nth-child(2), .module-transition__wave-bar:nth-child(6) { animation-delay: .12s; }
.module-transition__wave-bar:nth-child(3), .module-transition__wave-bar:nth-child(5) { animation-delay: .24s; }
.module-transition__wave-bar:nth-child(4) { animation-delay: .36s; }
.module-transition__status { min-height: 40px; color: #a8ced6;
    font-size: 12px; line-height: 1.7; }
.module-transition__cancel { display: inline-block; border: 1px solid rgba(195,235,236,.32);
    border-radius: 9px; background: rgba(255,255,255,.06);
    color: #e8f8f8; font-size: 12px; font-weight: 650;
    padding: 10px 18px; margin-top: 25px; cursor: pointer; transition: background .15s ease; }
.module-transition__cancel:hover, .module-transition__cancel:focus-visible { background: rgba(255,255,255,.17);
    color: #fff; outline: 2px solid rgba(117,228,214,.8); outline-offset: 3px; }
@keyframes module-wave {
    0%, 100% { height: 14px; opacity: .45; }
    50% { height: 50px; opacity: 1; }
}
@media (max-width: 550px) {
    .module-transition__identity { margin-bottom: 29px; }
    .module-transition__eyebrow { font-size: 9px; letter-spacing: .15em; }
    .module-transition__wave { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .module-transition, .module-transition__cancel { transition: none; }
    .module-transition__wave-bar { animation: none; height: 22px; }
}

/* v11: fixed scientific map canvas when the Explorer workspace is revealed.
   Deliberately scoped to Eksploracja; Predykcja is untouched. */
#explore-content .chart-panel { min-width: 0; }
#explore-map-loading > .row, #explore-map-loading .col-lg-8 { min-width: 0; }
#explore-content #basin-map {
    display: block; position: relative; box-sizing: border-box;
    width: 100%; height: 620px; min-height: 620px; max-height: 620px;
    overflow: hidden; contain: layout;
}
#explore-content #basin-map .js-plotly-plot,
#explore-content #basin-map .plot-container,
#explore-content #basin-map .svg-container {
    max-height: 620px;
}
.explore-map-toolbar { display: flex; flex-wrap: wrap; gap: 14px;
    align-items: center; justify-content: space-between; margin-bottom: 12px; }
.explore-map-toolbar .chart-eyebrow { margin: 0; }
.explore-map-reset { border: 1px solid #c8dfe6; color: #145971;
    background: #eef7f8; border-radius: 8px; font-size: 12px;
    padding: 7px 11px; cursor: pointer; font-weight: 650; }
.explore-map-reset:hover { background: #dff2f3; }

/* v12: make Predykcja as dimensionally stable as Eksploracja.
   The old min-height + config.responsive=true combination allowed the hidden
   MapLibre canvas and its containing card to repeatedly enlarge each other.
   Do not change the scientific geojson, zoom, selected basin, or colors. */
#prediction-content .chart-panel,
#prediction-content .chart-panel .card-body,
#bloom-map-loading .row,
#bloom-map-loading .col-lg-8,
#bloom-map-loading .col-lg-4 {
    min-width: 0;
}
#prediction-content #bloom-map {
    display: block;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 690px;
    min-height: 690px;
    max-height: 690px;
    overflow: hidden;
    contain: layout;
}
#prediction-content #bloom-map .js-plotly-plot,
#prediction-content #bloom-map .plot-container,
#prediction-content #bloom-map .svg-container {
    max-width: 100%;
    max-height: 690px;
}

/* Shared and responsive scientific credits footer. */
.caise-project-footer { max-width: 1680px; margin: 35px auto 0;
    padding: 28px 30px 20px; color: #b8cfda;
    background: #0a3044; border-radius: 18px 18px 0 0; }
.caise-footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px; }
.caise-project-footer h6 { font-size: 13px; color: #e4faf9;
    font-weight: 720; margin-bottom: 12px; }
.caise-project-footer p { font-size: 12px; line-height: 1.7; margin-bottom: 8px; }
.caise-footer-brand { color: #83e4d4; font-size: 14px; font-weight: 770;
    letter-spacing: .08em; margin-bottom: 12px; }
.caise-project-footer a { color: #9ee8dd; text-decoration: underline; text-underline-offset: 3px; }
.caise-project-footer a:hover { color: white; }
@media (max-width: 1100px) { .caise-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .caise-footer-grid { grid-template-columns: 1fr; }
  .caise-project-footer { padding: 25px 19px; } }


/* v13 — Query feedback and precise explanation of forecast percentages. */
#semantic-status, #bloom-answer-section {
    scroll-margin-top: 92px;
}
.query-response-pending {
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 11px 15px;
    border: 1px solid #badadf;
    border-radius: 10px;
    background: #eef8f8;
    color: #1b6070;
    font-size: 13px;
    font-weight: 600;
}
.query-response-pending::before {
    content: "";
    width: 15px;
    height: 15px;
    border: 2px solid #add1d3;
    border-top-color: #147d84;
    border-radius: 50%;
    animation: caise-query-spin .8s linear infinite;
}
.probability-table-explanation {
    margin: 12px 1px 0;
    color: #526f7c;
    font-size: 12px;
    line-height: 1.65;
}
@keyframes caise-query-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .query-response-pending::before { animation: none; }
}

/* v14 — selected basin, clear period header and scientific attribution. */
.bloom-period-banner { margin: 0 0 16px; padding: 18px 22px; border: 1px solid #b7dce2; border-left: 5px solid #158ca0; border-radius: 13px; background: #eef7f9; }
.bloom-period-details { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px 20px; }
.bloom-period-type { font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .12em; color: #137b88; }
.bloom-period-dates { font-size: clamp(17px, 1.6vw, 23px); color: #153c50; }
.bloom-period-area { color: #416978; font-size: 13px; }
#bloom-result-table tr.bloom-selected-row > td { background: #e8f5f5 !important; border-top: 1px solid #3c9d9b; border-bottom: 1px solid #3c9d9b; color: #124454; }
#bloom-result-table tr.bloom-selected-row > td:first-child { border-left: 4px solid #168d90; font-weight: 700; }
.bloom-selected-tag { display: inline-block; margin-left: 9px; padding: 3px 7px; background: #137c8b; border-radius: 12px; color: white; font-size: 10px; font-weight: 700; vertical-align: middle; white-space: nowrap; }
.caise-footer-brand-link { display: flex; align-items: center; gap: 14px; width: fit-content; text-decoration: none; }
.caise-footer-brand-link:hover { opacity: .86; }
.caise-satbaltyk-logo { width: 69px; height: 69px; object-fit: contain; background: white; border-radius: 50%; padding: 3px; }
.caise-project-footer p a { overflow-wrap: anywhere; }